.builder-topbar{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
margin-bottom:18px;
}

.builder-topbar>div{
display:flex;
align-items:center;
gap:18px;
}

.builder-back{
color:#666b76;
font-size:14px;
}

.builder-top-actions{
display:flex;
align-items:center;
gap:14px;
}

.save-status{
font-size:13px;
font-weight:650;
}

.save-status.saved{color:#287340;}
.save-status.pending{color:#8a6117;}
.save-status.saving{color:#555b66;}
.save-status.error{color:#b42318;}

.builder-save-btn{
height:38px;
padding:0 16px;
border:0;
border-radius:8px;
background:#15161a;
color:#fff;
font-weight:650;
cursor:pointer;
}

.builder-layout{
height:calc(100vh - 150px);
min-height:680px;
display:grid;
grid-template-columns:210px minmax(340px,1fr) 300px;
border:1px solid #dde0e5;
border-radius:14px;
overflow:hidden;
background:#fff;
}

.builder-left,
.builder-right{
background:#fff;
padding:18px;
overflow-y:auto;
color:#191a1e;
display:block;
}

.builder-left{border-right:1px solid #e5e7eb;}
.builder-right{border-left:1px solid #e5e7eb;}

.builder-center{
background:#e9ebef;
overflow:auto;
padding:18px 20px 28px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
gap:14px;
}

.builder-stage-toolbar{
width:100%;
display:flex;
justify-content:center;
}

.stage-zoom{
display:flex;
align-items:center;
gap:8px;
padding:8px 10px;
background:#fff;
border:1px solid #dde0e5;
border-radius:12px;
box-shadow:0 5px 15px rgba(0,0,0,.05);
}

.stage-zoom button{
height:34px;
padding:0 12px;
border:1px solid #d7dae0;
background:#fff;
border-radius:8px;
cursor:pointer;
font-weight:700;
color:#191a1e;
}

.stage-zoom button:hover{
background:#f5f6f8;
}

.stage-zoom span{
min-width:52px;
text-align:center;
font-size:13px;
font-weight:700;
color:#444a55;
}

.phone-shell-wrap{
width:100%;
display:flex;
justify-content:center;
align-items:flex-start;
overflow:visible;
}

.builder-section{margin-bottom:24px;}

.builder-section-head{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:10px;
}

.builder-section-head button{
width:30px;
height:30px;
border:1px solid #d9dce2;
background:#fff;
border-radius:7px;
font-size:20px;
cursor:pointer;
}

.builder-page-item{
width:100%;
border:0;
background:transparent;
border-radius:8px;
padding:9px 10px;
display:flex;
align-items:center;
gap:10px;
text-align:left;
cursor:pointer;
margin-bottom:4px;
color:#191a1e;
}

.builder-page-item:hover{background:#f3f4f6;}
.builder-page-item.active{background:#18191d;color:#fff;}

.builder-page-item span{
width:22px;
height:22px;
display:flex;
align-items:center;
justify-content:center;
border-radius:6px;
background:rgba(120,120,120,.13);
font-size:11px;
}

.builder-page-item strong{
font-size:13px;
font-weight:600;
}

.builder-tool{
width:100%;
min-height:42px;
margin-top:10px;
border:1px solid #d9dce2;
background:#fff;
border-radius:8px;
text-align:left;
padding:0 12px;
font-weight:650;
cursor:pointer;
color:#191a1e;
}

.builder-tool:hover{background:#f6f7f8;}

.phone-shell{
background:#191a1e;
padding:10px;
border-radius:32px;
box-shadow:0 20px 55px rgba(0,0,0,.18);
transition:transform .18s ease;
}

.builder-canvas{
width:390px;
min-height:844px;
background:#fff;
border-radius:24px;
overflow:hidden;
}

.ir-stage{
position:relative;
width:390px;
height:844px;
overflow:hidden;
border-radius:24px;
touch-action:none;
}

.ir-background-media{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
border:0;
z-index:0;
pointer-events:none;
}

.ir-block{
position:absolute;
box-sizing:border-box;
cursor:move;
user-select:none;
touch-action:none;
z-index:2;
}

.ir-block.selected{
outline:2px solid #3977ff !important;
outline-offset:0 !important;
}

.ir-text{
white-space:pre-wrap;
word-break:break-word;
padding:3px;
}

.ir-media{
overflow:hidden;
}

.ir-media-content{
width:100%;
height:100%;
display:block;
object-fit:cover;
border:0;
pointer-events:none;
}

.ir-audio-card{
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
border:1px solid rgba(0,0,0,.15);
background:rgba(255,255,255,.93);
border-radius:9px;
color:#222;
}

.ir-audio-card span{font-size:24px;}

.ir-generic{
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:14px;
overflow:hidden;
}

.ir-generic-title{
font-size:18px;
font-weight:800;
color:#1d2430;
line-height:1.1;
}

.ir-generic-subtitle{
margin-top:6px;
font-size:12px;
color:#667085;
line-height:1.3;
}

.ir-slider-shell{
display:grid;
grid-template-columns:34px 1fr 34px;
align-items:center;
width:100%;
height:100%;
gap:6px;
}

.ir-slider-arrow{
width:30px;
height:30px;
border-radius:50%;
background:#16181d;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
}

.ir-slider-center{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:10px;
}

.ir-slider-dots{
display:flex;
gap:6px;
margin-top:10px;
}

.ir-slider-dots span{
width:8px;
height:8px;
background:#d2d6dc;
border-radius:50%;
display:block;
}

.ir-slider-dots span.active{background:#1f2937;}

.ir-map-box{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
width:100%;
height:100%;
padding:16px;
}

.ir-map-pin{
font-size:26px;
font-weight:900;
color:#111827;
margin-bottom:8px;
}

.ir-map-button{
margin-top:10px;
padding:8px 14px;
border-radius:999px;
background:#111827;
color:#fff;
font-size:12px;
font-weight:700;
}

.ir-count-row{
display:flex;
gap:10px;
justify-content:center;
margin-top:12px;
}

.ir-count-row div{
min-width:64px;
padding:10px 8px;
background:#f4f5f7;
border-radius:12px;
display:flex;
flex-direction:column;
align-items:center;
}

.ir-count-row strong{
font-size:22px;
line-height:1;
color:#111827;
}

.ir-count-row span{
font-size:11px;
margin-top:4px;
color:#667085;
text-transform:uppercase;
}

.ir-rsvp-field{
width:100%;
height:34px;
border-radius:10px;
background:#f4f5f7;
margin-top:10px;
}

.ir-rsvp-field.short{
width:72%;
}

.ir-rsvp-btn{
margin-top:14px;
padding:10px 16px;
border-radius:999px;
background:#111827;
color:#fff;
font-size:12px;
font-weight:800;
}

.ir-divider{
display:flex;
align-items:center;
justify-content:center;
overflow:visible;
}

.ir-divider-line{
width:100%;
}

.ir-divider-row{
width:100%;
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
gap:10px;
}

.ir-divider-row .left,
.ir-divider-row .right{
display:block;
width:100%;
border-radius:999px;
}

.ir-divider-row .icon{
font-size:16px;
color:#b89954;
font-weight:700;
}

.ir-shape{
display:block;
}

.builder-right h3{
margin:0 0 18px;
font-size:16px;
}

.prop-title{margin-top:30px !important;}

.builder-muted{
color:#777c87;
font-size:13px;
line-height:1.5;
}

.prop-field{
display:flex;
flex-direction:column;
gap:7px;
margin-bottom:17px;
}

.prop-field span{
font-size:12px;
font-weight:700;
color:#535862;
}

.prop-field input,
.prop-field textarea,
.prop-field select,
.position-grid input{
width:100%;
border:1px solid #d7dae0;
border-radius:8px;
padding:9px 10px;
background:#fff;
color:#191a1e;
}

.prop-field input[type=color]{
height:42px;
padding:4px;
}

.position-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
margin-bottom:20px;
}

.position-grid label{
font-size:12px;
font-weight:700;
color:#535862;
}

.position-grid input{margin-top:6px;}

.check-field{
display:flex;
align-items:center;
gap:9px;
font-size:13px;
margin:12px 0;
}

.check-field input{width:auto;}

.builder-separator{
border:0;
border-top:1px solid #e5e7eb;
margin:28px 0 20px;
}

.builder-action{
width:100%;
min-height:42px;
border:1px solid #d7dae0;
background:#fff;
color:#191a1e;
border-radius:8px;
cursor:pointer;
font-weight:650;
margin-bottom:10px;
}

.builder-action:hover{background:#f5f6f7;}

.builder-danger{
width:100%;
height:40px;
border:1px solid #efc7c4;
background:#fff;
color:#a72820;
border-radius:8px;
cursor:pointer;
font-weight:650;
}

.builder-danger:disabled{
opacity:.35;
cursor:not-allowed;
}

.media-info-card{
padding:12px;
border:1px solid #e2e5e9;
border-radius:9px;
margin-bottom:18px;
overflow:hidden;
}

.media-info-card strong,
.media-info-card small{
display:block;
}

.media-info-card small{
color:#777c87;
margin-top:5px;
font-size:11px;
word-break:break-all;
}

.media-kind{
display:inline-flex;
padding:4px 7px;
margin-bottom:8px;
border-radius:20px;
background:#eff1f4;
font-size:10px;
text-transform:uppercase;
font-weight:800;
}

.global-media-label{
font-size:11px;
font-weight:800;
text-transform:uppercase;
letter-spacing:.04em;
color:#777c87;
margin:18px 0 8px;
}

.global-media-empty{
padding:14px;
border:1px dashed #d7dae0;
border-radius:9px;
color:#8a8f98;
font-size:12px;
margin-bottom:12px;
}

.global-media-card{
border:1px solid #e0e3e7;
border-radius:10px;
padding:10px;
margin-bottom:12px;
}

.global-media-card strong,
.global-media-card small{
display:block;
}

.global-media-card small{
color:#777c87;
font-size:11px;
margin-top:3px;
}

.global-media-preview{
display:block;
width:100%;
height:120px;
object-fit:cover;
border-radius:7px;
margin-bottom:9px;
background:#eee;
}

.global-video-preview{
height:80px;
display:flex;
align-items:center;
justify-content:center;
background:#17181c;
color:#fff;
border-radius:7px;
margin-bottom:9px;
font-size:12px;
font-weight:800;
}

.global-audio-preview{
display:block;
width:100%;
margin-bottom:9px;
}

.media-remove{
border:0;
background:none;
padding:8px 0 0;
color:#b42318;
font-size:12px;
cursor:pointer;
}

.media-modal[hidden]{display:none;}

.media-modal{
position:fixed;
inset:0;
z-index:99999;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
}

.media-modal-backdrop{
position:absolute;
inset:0;
background:rgba(15,16,20,.62);
backdrop-filter:blur(4px);
}

.media-modal-card{
position:relative;
z-index:1;
width:min(560px,100%);
background:#fff;
border-radius:16px;
padding:24px;
box-shadow:0 30px 100px rgba(0,0,0,.25);
}

.media-modal-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:20px;
}

.media-modal-head h2{
margin:0;
font-size:21px;
}

.media-modal-head p{
margin:5px 0 0;
color:#777c87;
font-size:13px;
}

.media-close{
width:34px;
height:34px;
border:0;
border-radius:8px;
background:#f1f2f4;
font-size:24px;
line-height:1;
cursor:pointer;
}

.media-tabs{
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
margin:24px 0 20px;
}

.media-tab{
height:42px;
border:1px solid #d8dbe0;
background:#fff;
border-radius:8px;
cursor:pointer;
font-weight:650;
}

.media-tab.active{
background:#17181c;
border-color:#17181c;
color:#fff;
}

.media-source-panel{
min-height:130px;
}

.media-help{
color:#777c87;
font-size:12px;
line-height:1.45;
}

.media-modal-error{
background:#fff0ef;
color:#a52a21;
border-radius:8px;
padding:10px 12px;
font-size:13px;
margin-top:12px;
}

.media-modal-actions{
display:flex;
justify-content:flex-end;
gap:9px;
padding-top:20px;
margin-top:20px;
border-top:1px solid #e5e7eb;
}

.media-modal-open{overflow:hidden;}

.builder-edit-selected{
overflow:visible !important;
}

.builder-resize-handle{
position:absolute;
display:block;
width:12px;
height:12px;
background:#ffffff;
border:2px solid #3977ff;
border-radius:50%;
z-index:100000;
box-shadow:0 1px 4px rgba(0,0,0,.25);
touch-action:none;
}

.builder-resize-handle.nw{left:-7px;top:-7px;cursor:nwse-resize;}
.builder-resize-handle.ne{right:-7px;top:-7px;cursor:nesw-resize;}
.builder-resize-handle.se{right:-7px;bottom:-7px;cursor:nwse-resize;}
.builder-resize-handle.sw{left:-7px;bottom:-7px;cursor:nesw-resize;}

.builder-resize-handle.n{
left:50%;
top:-7px;
transform:translateX(-50%);
cursor:ns-resize;
}

.builder-resize-handle.s{
left:50%;
bottom:-7px;
transform:translateX(-50%);
cursor:ns-resize;
}

.builder-resize-handle.e{
right:-7px;
top:50%;
transform:translateY(-50%);
cursor:ew-resize;
}

.builder-resize-handle.w{
left:-7px;
top:50%;
transform:translateY(-50%);
cursor:ew-resize;
}

.builder-direct-delete{
position:absolute;
right:5px;
top:5px;
width:30px;
height:30px;
display:flex;
align-items:center;
justify-content:center;
padding:0;
border:0;
border-radius:50%;
background:rgba(185,28,28,.94);
color:#fff;
font-size:22px;
font-weight:400;
line-height:1;
cursor:pointer;
z-index:100001;
box-shadow:0 2px 7px rgba(0,0,0,.25);
}

.builder-direct-delete:hover{
background:#991b1b;
transform:scale(1.06);
}

.builder-is-resizing,
.builder-is-resizing *{
user-select:none !important;
cursor:inherit;
}

@media(max-width:1100px){
.builder-layout{
grid-template-columns:190px minmax(320px,1fr);
height:auto;
}

.builder-right{
grid-column:1/-1;
border-left:0;
border-top:1px solid #e5e7eb;
min-height:350px;
}
}

@media(max-width:760px){
.builder-layout{display:block;}
.builder-left,
.builder-right{
border:0;
border-bottom:1px solid #e5e7eb;
}
.builder-center{justify-content:flex-start;}
}


/* =========================================================
   FASE 2D-C
   CATALOGO EXTENDIDO
   ========================================================= */

.ir-extra{
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
overflow:hidden;
box-sizing:border-box;
background:#fff;
border:1px solid #dfe3e8;
border-radius:18px;
padding:14px;
color:#1f2937;
}

.ir-extra-title{
font-size:16px;
font-weight:800;
line-height:1.1;
text-align:center;
}

.ir-extra-label{
font-size:11px;
font-weight:700;
margin-top:7px;
text-align:center;
}


/* GRAFICOS */

.ir-graphic-symbol{
font-size:54px;
line-height:1;
}

.ir-icon-symbol{
font-size:54px;
line-height:1;
}


/* ANIMACIONES */

.ir-animation{
animation:irPulse 1.8s ease-in-out infinite;
}

.ir-animation-core{
font-size:48px;
line-height:1;
}

@keyframes irPulse{
0%{transform:scale(1)}
50%{transform:scale(1.07)}
100%{transform:scale(1)}
}


/* GRAFICAS */

.ir-chart-bars{
width:90%;
height:110px;
display:flex;
align-items:flex-end;
justify-content:center;
gap:9px;
margin-top:16px;
padding-bottom:4px;
border-bottom:1px solid #d5d9df;
}

.ir-chart-bars span{
display:block;
width:14%;
background:#17181c;
border-radius:7px 7px 2px 2px;
}


/* FORMULARIO */

.ir-form-input{
width:90%;
height:34px;
background:#f3f4f6;
border:1px solid #e0e3e7;
border-radius:8px;
margin-top:10px;
}

.ir-form-button{
min-width:120px;
padding:9px 16px;
margin-top:12px;
border-radius:999px;
background:#17181c;
color:#fff;
font-size:12px;
font-weight:800;
}


/* HOJA DE CALCULO */

.ir-sheet-toolbar{
width:100%;
height:32px;
display:flex;
align-items:center;
padding:0 10px;
background:#f3f4f6;
border-bottom:1px solid #dfe3e8;
font-size:12px;
font-weight:800;
}

.ir-sheet-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
width:100%;
height:calc(100% - 32px);
}

.ir-sheet-grid span{
border-right:1px solid #e5e7eb;
border-bottom:1px solid #e5e7eb;
}


/* TABLA */

.ir-table{
justify-content:flex-start;
}

.ir-table-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
width:100%;
flex:1;
margin-top:12px;
}

.ir-table-grid span{
border-right:1px solid #dfe3e8;
border-bottom:1px solid #dfe3e8;
background:#fff;
}

.ir-table-grid span.head{
background:#eef0f3;
}


/* MARCO */

.ir-frame{
padding:12px;
}

.ir-frame-inner{
width:100%;
height:100%;
border:3px dashed #aeb4bd;
border-radius:18px;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
background:#f7f8fa;
}

.ir-frame-icon{
font-size:40px;
}

.ir-frame-inner small{
font-size:10px;
color:#89909c;
margin-top:5px;
}


/* CUADRICULA */

.ir-grid-block{
display:grid;
grid-template-columns:1fr 1fr;
grid-template-rows:1fr 1fr;
gap:6px;
padding:6px;
}

.ir-grid-cell{
background:#edf0f3;
border:1px solid #d6dae0;
border-radius:8px;
}


/* MOCKUP */

.ir-mockup{
padding:10px;
background:transparent;
border:0;
}

.ir-mockup-phone{
position:relative;
width:100%;
height:100%;
padding:12px;
border-radius:30px;
background:#17181c;
box-shadow:0 14px 35px rgba(0,0,0,.25);
}

.ir-mockup-notch{
width:42%;
height:16px;
border-radius:0 0 10px 10px;
background:#17181c;
position:absolute;
top:5px;
left:29%;
z-index:2;
}

.ir-mockup-screen{
width:100%;
height:100%;
border-radius:21px;
background:#fff;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
}


/* 3D */

.ir-three-d{
perspective:500px;
}

.ir-cube{
position:relative;
width:82px;
height:82px;
transform:rotateX(-20deg) rotateY(35deg);
transform-style:preserve-3d;
margin-bottom:10px;
}

.ir-cube-face{
position:absolute;
width:82px;
height:82px;
border:1px solid rgba(255,255,255,.5);
}

.ir-cube-face.front{
background:#9c4dcc;
transform:translateZ(41px);
}

.ir-cube-face.top{
background:#c883ec;
transform:rotateX(90deg) translateZ(41px);
}

.ir-cube-face.side{
background:#7434a0;
transform:rotateY(90deg) translateZ(41px);
}


/* BOTON */

.ir-button-block{
display:flex;
flex-direction:row;
align-items:center;
justify-content:center;
gap:12px;
font-weight:800;
font-size:14px;
padding:0 18px;
}

.ir-button-block strong{
font-size:18px;
}


/* ESPACIADOR */

.ir-spacer{
background:rgba(255,255,255,.65);
border:1px dashed #aeb5c0;
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
gap:8px;
padding:8px;
}

.ir-spacer span{
font-size:10px;
font-weight:700;
color:#7a818d;
}

.ir-spacer-line{
height:1px;
background:#aeb5c0;
width:100%;
}


/* ==========================================================
   FASE 2E - INICIO
   ========================================================== */

.builder-intro-section{
padding-bottom:20px;
border-bottom:1px solid #e5e7eb;
}

.builder-intro-item{
width:100%;
display:flex;
align-items:center;
gap:10px;
margin-top:10px;
padding:11px;
border:1px solid #d9dce2;
border-radius:9px;
background:#fff;
color:#191a1e;
text-align:left;
cursor:pointer;
}

.builder-intro-item:hover{
background:#f5f6f8;
}

.builder-intro-item.active{
background:#18191d;
border-color:#18191d;
color:#fff;
}

.builder-intro-item>span:last-child{
display:flex;
flex-direction:column;
gap:3px;
}

.builder-intro-item strong{
font-size:12px;
}

.builder-intro-item small{
font-size:10px;
opacity:.65;
}

.intro-icon{
width:28px;
height:28px;
display:flex;
align-items:center;
justify-content:center;
border-radius:8px;
background:rgba(120,120,120,.12);
font-size:11px;
}


/* PREVIEW INTRO */

.ir-intro-stage{
position:relative;
overflow:hidden;
}

.ir-intro-visual{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
z-index:0;
border:0;
pointer-events:none;
}

.ir-intro-overlay{
position:absolute;
inset:0;
z-index:1;
pointer-events:none;
}

.ir-intro-content{
position:absolute;
inset:0;
z-index:2;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
padding:38px 30px;
}

.ir-intro-title{
font-size:18px;
font-weight:500;
letter-spacing:.05em;
margin-bottom:10px;
}

.ir-intro-event{
font-size:38px;
font-weight:800;
line-height:1.05;
margin-bottom:16px;
}

.ir-intro-message{
max-width:300px;
font-size:15px;
line-height:1.5;
margin-bottom:28px;
}

.ir-intro-open{
min-width:220px;
min-height:54px;
padding:0 26px;
border:0;
border-radius:999px;
background:#fff;
color:#111;
font-size:14px;
font-weight:800;
box-shadow:0 8px 30px rgba(0,0,0,.18);
cursor:pointer;
}


/* ==========================================================
   FASE 3A
   SLIDER PRESETS + FX
   ========================================================== */


/* ----------------------------------------------------------
   SLIDER PRO
   ---------------------------------------------------------- */

.ir-slider-pro{
overflow:hidden;
}

.ir-slider-pro .ir-slider-shell{
width:100%;
height:100%;
display:grid;
grid-template-columns:42px 1fr 42px;
align-items:center;
padding:16px 8px;
box-sizing:border-box;
}

.ir-slider-pro .ir-slider-center{
min-width:0;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
}

.ir-slider-eyebrow{
font-size:11px;
font-weight:700;
letter-spacing:.14em;
text-transform:uppercase;
margin-bottom:7px;
}

.ir-slider-title{
width:100%;
line-height:1.05;
text-align:center;
word-break:break-word;
}

.ir-slider-date{
margin-top:7px;
letter-spacing:.04em;
}

.ir-slider-ornament{
margin:7px 0 1px;
font-size:17px;
opacity:.72;
}

.ir-slider-pro .ir-slider-arrow{
width:30px;
height:30px;
display:flex;
align-items:center;
justify-content:center;
justify-self:center;
border-radius:50%;
background:rgba(20,20,20,.92);
color:#fff;
font-size:21px;
line-height:1;
}

.ir-slider-pro .ir-slider-dots{
margin-top:12px;
}


/* ----------------------------------------------------------
   ANIMACIONES FX
   ---------------------------------------------------------- */

@keyframes irFxFade{

from{
opacity:0;
}

to{
opacity:1;
}

}


@keyframes irFxZoom{

from{
opacity:0;
transform:scale(.78);
}

to{
opacity:1;
transform:scale(1);
}

}


@keyframes irFxSlideUp{

from{
opacity:0;
transform:translateY(45px);
}

to{
opacity:1;
transform:translateY(0);
}

}


@keyframes irFxSlideDown{

from{
opacity:0;
transform:translateY(-45px);
}

to{
opacity:1;
transform:translateY(0);
}

}


@keyframes irFxSlideLeft{

from{
opacity:0;
transform:translateX(-45px);
}

to{
opacity:1;
transform:translateX(0);
}

}


@keyframes irFxSlideRight{

from{
opacity:0;
transform:translateX(45px);
}

to{
opacity:1;
transform:translateX(0);
}

}


/* ----------------------------------------------------------
   INSPECTOR
   ---------------------------------------------------------- */

.builder-extra-panel{
margin:0 0 18px;
padding:13px;
border:1px solid #dfe3e8;
border-radius:12px;
background:rgba(127,127,127,.045);
}

.builder-extra-heading{
display:flex;
flex-direction:column;
gap:2px;
margin-bottom:11px;
}

.builder-extra-heading strong{
font-size:13px;
}

.builder-extra-heading small{
font-size:10px;
opacity:.65;
}


/* SLIDER PRESETS */

.slider-preset-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:7px;
}

.slider-preset-grid button{
min-height:65px;
padding:7px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:4px;
border:1px solid #dfe3e8;
border-radius:10px;
background:transparent;
cursor:pointer;
}

.slider-preset-grid button:hover{
border-color:#9299a3;
}

.slider-preset-grid button span{
font-size:19px;
}

.slider-preset-grid button .preset-script{
font-family:"Snell Roundhand","Brush Script MT","Segoe Script",cursive;
font-size:24px;
}

.slider-preset-grid button b{
font-size:10px;
}


/* FX */

.fx-quick-presets{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:5px;
margin-bottom:12px;
}

.fx-quick-presets button{
height:31px;
padding:0 4px;
border:1px solid #dfe3e8;
border-radius:8px;
background:transparent;
font-size:9px;
font-weight:700;
cursor:pointer;
}

.fx-field{
display:flex;
flex-direction:column;
gap:6px;
margin-bottom:11px;
}

.fx-field > span{
display:flex;
align-items:center;
justify-content:space-between;
font-size:10px;
font-weight:700;
}

.fx-field > span b{
font-size:9px;
opacity:.65;
}

.fx-field input[type="range"]{
width:100%;
}

.fx-field input[type="number"],
.fx-field select{
width:100%;
min-height:36px;
padding:7px 9px;
box-sizing:border-box;
}

.fx-two{
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
}

.fx-reset{
width:100%;
min-height:36px;
margin-top:2px;
border:1px solid #dfe3e8;
border-radius:9px;
background:transparent;
font-size:10px;
font-weight:700;
cursor:pointer;
}


/* DARK */

body.builder-dark-v2 .builder-extra-panel,
body.builder-dark-v2 .slider-preset-grid button,
body.builder-dark-v2 .fx-quick-presets button,
body.builder-dark-v2 .fx-reset{
border-color:#2d3c51;
}

body.builder-dark-v2 .builder-extra-panel{
background:rgba(255,255,255,.025);
}