/* =========================================================
   SOLVEX — case study interactivo (vista previa)
   Todo vive dentro de .sx: no toca el resto del portafolio.
   Paleta de la marca (lámina de Daniss): #0057FF, #C2DEF3,
   #000000, #363B41 y secundarios #A9DEFF, #0449B7, #002E72.
   Movimiento: --p de case.js (`progress`): "pin" mientras una
   sección está fija, "through" desde que entra hasta que sale.
   Lo fijo solo corre en escritorio con movimiento permitido;
   en celular, tablet y movimiento reducido todo queda quieto.
   ========================================================= */
.sx{--sx-b:#0057FF;--sx-b2:#0449B7;--sx-b3:#002E72;--sx-ice:#C2DEF3;--sx-sky:#A9DEFF;--sx-g:#363B41;--sx-k:#000000;--sx-r:var(--r-xl,44px);--sx-max:1440px;--sx-cut:polygon(0 0,100% 0,100% 100%,0 100%);padding-top:calc(var(--header-h,84px) + 12px);overflow-x:clip}
.sx img{display:block;width:100%;height:auto}
.sx figure{margin:0}
.sx ul,.sx ol{list-style:none;margin:0;padding:0}
.sx-sec{max-width:var(--sx-max);margin:0 auto;padding:clamp(88px,10vw,160px) var(--gut) 0}
.sx-kicker{display:inline-flex;align-items:center;gap:10px;font:600 12.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--sx-b)}
.sx-kicker b{font-weight:600;color:var(--gray)}
.sx-title{margin-top:14px;font:900 clamp(36px,5vw,84px)/.95 var(--display);text-transform:uppercase;letter-spacing:-.03em;color:var(--fg);text-wrap:balance}
.sx-sub{font:900 clamp(26px,2.8vw,44px)/1 var(--display);text-transform:uppercase;letter-spacing:-.02em;color:var(--fg)}
.sx-lead{margin-top:16px;max-width:46ch;font-size:clamp(15.5px,1.2vw,18.5px);line-height:1.55;color:var(--fg)}
.sx-cap{position:absolute;left:16px;bottom:16px;z-index:2;padding:8px 12px;border-radius:var(--pill);background:rgba(0,0,0,.72);color:#FFFFFF;font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;backdrop-filter:blur(6px)}
.sx-cap--plain{position:static;display:inline-block;background:var(--sx-b)}
.sx [data-lb]{cursor:zoom-in}
.has-cursor .sx [data-lb]{cursor:none}
.sx-btn{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 24px;border-radius:var(--pill);border:1px solid currentColor;font:600 14.5px/1 var(--text);color:inherit;transition:background .3s ease,color .3s ease,border-color .3s ease}
.sx-btn span{transition:translate .35s var(--e-out)}
.sx-btn:hover{background:#FFFFFF;border-color:#FFFFFF;color:var(--sx-k)}
.sx-btn:hover span{translate:3px -3px}
.sx-btn--solid{background:var(--sx-b);border-color:var(--sx-b);color:#FFFFFF}
.sx-in{animation:sx-fade .8s var(--e-out) var(--d,0s) both}
@keyframes sx-fade{from{opacity:0;transform:translateY(16px)}}
@keyframes sx-up{from{transform:translateY(110%)}}
@keyframes sx-wheel{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}

/* ---------- 01 · hero: la palabra y la fachada que se abre ---------- */
.sx-hero{--p:0;position:relative}
.sx-hero__pin{--mx:0;--my:0;--q:clamp(0,calc(var(--p) * 1.25),1);position:relative;overflow:hidden;isolation:isolate;margin:0 clamp(8px,1.2vw,16px);height:calc(100svh - var(--header-h,84px) - 24px);min-height:600px;max-height:1080px;border-radius:var(--sx-r);background:var(--sx-b);color:#FFFFFF}
.sx-hero__back{position:absolute;top:clamp(16px,2vw,28px);left:clamp(16px,2.4vw,36px);z-index:6;margin:0}
.sx-hero__kicker{position:absolute;top:clamp(26px,2.8vw,40px);right:clamp(20px,3vw,48px);z-index:6;font:600 12.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.sx-hero__title{position:absolute;left:0;right:0;top:clamp(70px,11%,130px);z-index:4;display:grid;justify-items:center;gap:6px;margin:0;opacity:calc(1 - var(--q) * 1.4);translate:0 calc(var(--q) * -60px);pointer-events:none}
.sx-word{display:flex;font:900 clamp(72px,15.5vw,268px)/.84 var(--display);letter-spacing:-.02em;text-transform:uppercase}
.sx-word > span{display:inline-block;overflow:hidden;padding:0 .01em}
.sx-word > span{animation:sx-up 1s var(--e-out) calc(.15s + var(--i) * .07s) both;clip-path:inset(0 0 -5% 0)}
.sx-hero__sub{font:600 clamp(13px,1.15vw,17px)/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--sx-ice)}
/* la ventana: chica abajo al centro y se abre hasta ocupar toda la portada */
.sx-hero__win{position:absolute;inset:0;z-index:2;overflow:hidden;clip-path:inset(calc(46% - var(--q) * 46%) calc(24% - var(--q) * 24%) calc(7% - var(--q) * 7%) calc(24% - var(--q) * 24%) round calc(var(--sx-r) * .6));background:var(--sx-b2)}
.sx-hero__win img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;scale:calc(1.18 - var(--q) * .14);translate:calc(var(--mx) * -10px) calc(var(--my) * -8px + (1 - var(--q)) * 30%);animation:sx-fade 1.1s var(--e-out) .35s both}
.sx-hero__cta{position:absolute;left:50%;bottom:clamp(18px,2.4vw,30px);z-index:5;translate:-50% 0;display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 20px;border-radius:var(--pill);background:rgba(0,0,0,.35);backdrop-filter:blur(8px);font:600 14px/1 var(--text);color:#FFFFFF;opacity:calc(1 - var(--q) * 2);transition:background .3s}
.sx-hero__cta:hover{background:#000000}
.sx-scroll{position:absolute;right:clamp(18px,2.4vw,36px);bottom:clamp(22px,3vw,40px);z-index:5;width:26px;height:42px;border:1.5px solid rgba(255,255,255,.7);border-radius:14px}
.sx-scroll i{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#FFFFFF;animation:sx-wheel 1.8s ease-in-out infinite}

/* ---------- 02 · overview ---------- */
.sx-statement{margin-top:18px;max-width:18ch;font:900 clamp(38px,5.4vw,92px)/.94 var(--display);text-transform:uppercase;letter-spacing:-.03em;color:var(--fg);text-wrap:balance}
.sx-over__grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(28px,6vw,110px);margin-top:clamp(36px,4.4vw,64px);align-items:start}
.sx-over__text{display:grid;gap:14px;font-size:clamp(16px,1.2vw,18.5px);line-height:1.58;max-width:56ch}
.sx-over__lead{font-size:clamp(18px,1.55vw,23px);line-height:1.45;margin-bottom:14px}
.sx-over__label{margin-top:8px;font:600 12px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--sx-b)}
.sx-over__side{position:sticky;top:calc(var(--header-h,84px) + 24px);display:grid;gap:28px}
.sx-arch{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sx-arch__card{position:relative;display:grid;gap:8px;align-content:end;min-height:190px;padding:20px;border-radius:24px;background:var(--sx-ice);color:var(--sx-b3);overflow:hidden;transition:background .45s var(--e-out),color .45s var(--e-out),translate .45s var(--e-out)}
.sx-arch__card::after{content:"";position:absolute;inset:auto -30% -60% auto;width:140%;aspect-ratio:1;background:var(--sx-b);border-radius:50%;scale:0;transform-origin:100% 100%;transition:scale .6s var(--e-out);z-index:0}
.sx-arch__card > *{position:relative;z-index:1}
.sx-arch__card:hover{color:#FFFFFF;translate:0 -4px}
.sx-arch__card:hover::after{scale:1}
.sx-arch__n{position:absolute !important;top:18px;left:20px;font:600 12px/1 var(--mono);letter-spacing:.08em}
.sx-arch__card b{font:900 clamp(22px,2vw,30px)/1 var(--display);text-transform:uppercase;letter-spacing:-.02em}
.sx-arch__card span:last-child{font:500 14px/1.35 var(--text)}
.sx-meta{display:grid;gap:14px;margin:0}
.sx-meta > div{display:grid;grid-template-columns:minmax(90px,.35fr) minmax(0,1fr);gap:18px;align-items:baseline;padding-bottom:14px;border-bottom:1px solid var(--line)}
.sx-meta dt{font:600 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--gray)}
.sx-meta dd{margin:0;font-size:15.5px;line-height:1.45;color:var(--fg)}

/* ---------- 03 · construcción del símbolo ---------- */
.sx-build{--p:1;margin-top:clamp(36px,4vw,64px)}
.sx-build__pin{--a:clamp(0,calc((var(--p) - .04) / .38),1);--m:clamp(0,calc((var(--p) - .62) / .3),1);position:relative;display:grid;place-items:center;margin:0 clamp(8px,1.2vw,16px);min-height:min(78svh,760px);padding:clamp(48px,6vw,96px) var(--gut);border-radius:var(--sx-r);background:#FFFFFF;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);overflow:hidden}
.sx-build__stage{position:relative;width:min(100%,1180px);aspect-ratio:1200 / 324;container-type:inline-size}
.sx-pc{mix-blend-mode:multiply;position:absolute;top:29.63%;left:calc(var(--l) * 1%);width:calc(var(--w) * 1%) !important;height:auto;opacity:var(--a);transform:translate(calc(var(--dx) * 1cqw * (1 - var(--a))),calc(var(--dy) * 1cqw * (1 - var(--a)))) rotate(calc(var(--r) * 1deg * (1 - var(--a))))}
/* fase 2: escudo, S y V entran al símbolo; los signos se apagan; el símbolo pasa al centro y crece */
.sx-pc:not(.sx-pc--op):not(.sx-pc--sym){opacity:calc(var(--a) * (1 - var(--m)));transform:translate(calc(var(--dx) * 1cqw * (1 - var(--a)) + var(--gx) * 1cqw * var(--m)),calc(var(--dy) * 1cqw * (1 - var(--a)))) rotate(calc(var(--r) * 1deg * (1 - var(--a)))) scale(calc(1 - var(--m) * .5))}
.sx-pc--op{opacity:calc(var(--a) * (1 - var(--m) * 1.6))}
.sx-pc--sym{transform:translate(calc(var(--dx) * 1cqw * (1 - var(--a)) - 27.66cqw * var(--m)),0) scale(calc(1 + var(--m) * 1.5))}
.sx-build__steps{position:absolute;bottom:clamp(18px,2.4vw,30px);left:50%;translate:-50% 0;display:flex;gap:8px}
.sx-build__steps li{padding:7px 12px;border-radius:var(--pill);border:1px solid rgba(0,87,255,.3);font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--sx-b);opacity:.4;transition:opacity .3s,background .3s,color .3s}
.sx-build__steps li:nth-child(1){opacity:calc(1 - var(--a) * .6)}
.sx-build__steps li:nth-child(2){opacity:calc(.4 + var(--a) * .6 - var(--m) * .6)}
.sx-build__steps li:nth-child(3){opacity:calc(.4 + var(--m) * .6)}

/* versiones */
.sx-ver{padding-top:clamp(56px,6vw,96px)}
.sx-ver__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px}
.sx-tabs{position:relative;display:flex;gap:2px;padding:4px;border-radius:var(--pill);background:var(--sx-ice)}
.sx-tabs button{position:relative;z-index:1;min-height:42px;padding:0 18px;border:0;border-radius:var(--pill);background:none;font:600 14px/1 var(--text);color:var(--sx-b3);cursor:pointer;transition:color .3s}
.sx-tabs button[aria-selected="true"]{color:#FFFFFF}
.sx-tabs button:focus-visible{outline:2px solid var(--sx-b3);outline-offset:2px}
.sx-tabs__ink{position:absolute;top:4px;bottom:4px;left:0;width:var(--w,0);translate:var(--x,0) 0;border-radius:var(--pill);background:var(--sx-b);transition:translate .5s var(--e-out),width .5s var(--e-out)}
.sx-ver__stage{display:grid;place-items:center;min-height:clamp(300px,34vw,520px);border-radius:var(--sx-r);background:#FFFFFF;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);overflow:hidden}
.sx-ver__panel{grid-area:1 / 1;width:min(48%,460px);mix-blend-mode:multiply}
.sx-ver__panel.is-on{animation:sx-panel .7s var(--e-out) both}
@keyframes sx-panel{from{opacity:0;clip-path:inset(0 0 0 100%);transform:translateX(-24px)}to{opacity:1;clip-path:inset(0)}}

/* cintas: máscara que se abre con el scroll */
.sx-mask{--p:.5;margin-top:clamp(56px,6vw,96px)}
.sx-mask__fig{position:relative;overflow:hidden;margin:0 clamp(8px,1.2vw,16px);border-radius:var(--sx-r);clip-path:inset(0 clamp(0%,calc(14% - var(--p) * 28%),14%) round var(--sx-r))}
.sx-mask__fig img{scale:calc(1.2 - var(--p) * .2);transform-origin:50% 40%}

/* ---------- 04 · lenguaje visual (negro de la marca) ---------- */
.sx-lang{margin:clamp(88px,10vw,160px) clamp(8px,1.2vw,16px) 0;border-radius:var(--sx-r);background:var(--sx-k);color:#FFFFFF}
.sx-lang__in{max-width:var(--sx-max);margin:0 auto;padding:clamp(56px,7vw,110px) var(--gut)}
.sx-lang .sx-title{color:#FFFFFF}
.sx-lang .sx-kicker{color:var(--sx-sky)}
.sx-lang .sx-kicker b{color:rgba(255,255,255,.55)}
.sx-pal{margin-top:clamp(32px,4vw,56px)}
.sx-pal__label{margin:0 0 12px;font:700 13px/1 var(--text);letter-spacing:.02em;text-transform:uppercase;color:rgba(255,255,255,.9)}
.sx-pal__row{display:flex;gap:0;height:clamp(150px,17vw,260px);margin-bottom:50px}
.sx-pal__row--thin{height:clamp(46px,4.4vw,64px)}
.sx-sw{position:relative;flex:var(--f) 1 0;min-width:0;border:0;padding:0;background:var(--c);cursor:pointer;transform-origin:50% 100%;transition:flex-grow .6s var(--e-out),scale .8s var(--e-out) calc(var(--k) * .07s)}
.sx-sw--ink{box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.sx-sw span{position:absolute;left:10px;top:calc(100% + 12px);font:700 13px/1 var(--text);letter-spacing:.02em;color:#FFFFFF;white-space:nowrap;transition:color .3s}
.sx-sw:hover,.sx-sw:focus-visible{flex-grow:calc(var(--f) * 1.45)}
.sx-sw:focus-visible{outline:2px solid #FFFFFF;outline-offset:3px;z-index:1}
.sx-sw.is-copied span{color:var(--sx-sky)}
.js .sx-pal:not(.is-in) .sx-sw{scale:1 0}
.sx-pal__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:-6px}
.sx-pal__hint{margin:0;font:500 13px/1.4 var(--mono);color:rgba(255,255,255,.6)}
.sx-link{display:inline-flex;gap:8px;align-items:center;min-height:44px;padding:0 18px;border:1px solid rgba(255,255,255,.35);border-radius:var(--pill);background:none;font:600 13.5px/1 var(--text);color:#FFFFFF;cursor:zoom-in;transition:background .3s,color .3s}
.sx-link:hover{background:#FFFFFF;color:#000000}
.sx-lang__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(14px,1.6vw,22px);margin-top:clamp(48px,6vw,90px);align-items:end}
.sx-wipe{position:relative;overflow:hidden;border-radius:22px;--rv-r:22px}
.sx-wipe:nth-child(2){margin-bottom:clamp(0px,6vw,90px)}

/* ---------- 05A · pantalla fija con cortes en diagonal ---------- */
.sx-show{padding-bottom:clamp(28px,3vw,44px)}
.sx-sticky{--on:0;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);max-width:var(--sx-max);margin:0 auto;padding:0 var(--gut)}
.sx-sticky__frame{position:sticky;top:calc(var(--header-h,84px) + 20px);align-self:start;aspect-ratio:4 / 3;max-height:calc(100svh - var(--header-h,84px) - 48px);overflow:hidden;border-radius:var(--sx-r);background:var(--sx-k)}
.sx-sticky__img{position:absolute;inset:0;width:100%;height:100% !important;object-fit:cover;clip-path:polygon(0 0,0 0,0 100%,0 100%);transition:clip-path 1s var(--e-out),scale 1.2s var(--e-out);scale:1.08}
.sx-sticky__img:first-child{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);scale:1}
.sx-sticky__img.is-on{clip-path:polygon(0 0,130% 0,100% 100%,-30% 100%);scale:1}
.sx-sticky__count{position:absolute;right:16px;bottom:16px;z-index:3;padding:8px 12px;border-radius:var(--pill);background:rgba(0,0,0,.7);color:#FFFFFF;font:600 12px/1 var(--mono);letter-spacing:.08em}
.sx-sticky__count b{color:var(--sx-sky);font-weight:600}
.sx-sticky__steps{display:grid}
.sx-step{display:grid;align-content:center;gap:10px;min-height:72svh;padding:24px 0;opacity:.35;transition:opacity .5s ease}
.sx-step.is-on{opacity:1}
.sx-step__n{font:600 13px/1 var(--mono);letter-spacing:.1em;color:var(--sx-b)}
.sx-step h3{margin:0;font:900 clamp(28px,3.2vw,52px)/1 var(--display);text-transform:uppercase;letter-spacing:-.02em;color:var(--fg)}
.sx-step__fig{display:none}

/* ---------- 05B · fila que se arrastra ---------- */
.sx-drag__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
.sx-drag__ctrl{display:flex;align-items:center;gap:8px}
.sx-drag__hint{margin-right:6px;font:600 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gray)}
.sx-arrow{display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--line);border-radius:50%;background:var(--surface,transparent);font-size:18px;color:var(--fg);cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.sx-arrow:hover{background:var(--sx-b);border-color:var(--sx-b);color:#FFFFFF}
.sx-arrow:disabled{opacity:.35;pointer-events:none}
.sx-drag__track{display:flex;align-items:center;gap:clamp(14px,1.6vw,22px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(var(--gut) * -1);padding:6px var(--gut) 10px;cursor:grab;outline:none}
.sx-drag__track::-webkit-scrollbar{display:none}
.sx-drag__track:focus-visible{box-shadow:inset 0 0 0 2px var(--sx-b);border-radius:12px}
.sx-drag__track.is-dragging{cursor:grabbing;scroll-snap-type:none}
.sx-drag__track.is-dragging .sx-drag__item{pointer-events:none}
.sx-drag__item{--h:min(56svh,560px);position:relative;flex:none;height:var(--h);aspect-ratio:var(--ar);overflow:hidden;border-radius:22px;scroll-snap-align:start;scroll-margin-left:var(--gut);background:var(--sx-ice)}
.sx-drag__item--low{--h:min(44svh,440px)}
.sx-drag__item img{height:100% !important;object-fit:cover;scale:1.04;translate:calc(var(--mx,0) * -8px) calc(var(--my,0) * -6px);transition:scale .6s var(--e-out);user-select:none;-webkit-user-drag:none}
.sx-drag__item:hover img{scale:1.08}
.sx-drag__bar{height:3px;margin-top:20px;border-radius:2px;background:var(--line);overflow:hidden}
.sx-drag__bar i{display:block;height:100%;width:100%;background:var(--sx-b);transform-origin:0 50%;scale:var(--d,0) 1;transition:scale .15s linear}

/* ---------- 05C · tarjetas apiladas que se separan ---------- */
.sx-layers-head{padding-top:clamp(64px,7vw,110px)}
.sx-layers{--p:1;margin-top:22px}
.sx-layers__pin{--s:clamp(0,calc((var(--p) - .1) / .6),1);display:grid;place-items:center;margin:0 clamp(8px,1.2vw,16px);min-height:min(76svh,740px);padding:clamp(40px,5vw,72px) var(--gut);border-radius:var(--sx-r);background:linear-gradient(160deg,var(--sx-b) 0%,var(--sx-b2) 60%,var(--sx-b3) 100%);overflow:hidden}
.sx-layers__deck{position:relative;display:grid;width:min(30vw,440px)}
.sx-card{grid-area:1 / 1;overflow:hidden;border-radius:20px;background:#FFFFFF;box-shadow:0 30px 60px -32px rgba(0,0,0,.6);transform:translateX(calc(var(--x1) * 1% * var(--s))) translateY(calc((1 - var(--s)) * var(--k) * -10px)) rotate(calc(var(--r0) * 1deg * (1 - var(--s))));transition:scale .45s var(--e-out)}
.sx-card:hover{scale:1.04;z-index:3}
.sx-card img{aspect-ratio:3 / 2;height:auto;object-fit:cover}

/* ---------- 06 · aplicaciones ---------- */
.sx-full{--p:.5;margin-top:clamp(32px,4vw,56px)}
.sx-full__fig{overflow:hidden;margin:0 clamp(8px,1.2vw,16px);border-radius:calc(var(--sx-r) * (1 - var(--p) * .6));max-height:96svh}
.sx-full__fig img{height:auto;scale:calc(1.22 - var(--p) * .22);transform-origin:50% 60%}
.sx-asym{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);align-items:end}
.sx-asym__a{grid-column:4 / -1;position:relative;overflow:hidden;border-radius:22px;--rv-r:22px}
.sx-asym__a img{transition:scale .7s var(--e-out)}
.sx-asym__a:hover img{scale:1.05}
.sx-asym__txt{grid-column:1 / 4;grid-row:1;display:grid;gap:12px;align-self:start;padding-top:12px;font-size:15.5px;line-height:1.5;color:var(--fg)}
.sx-asym__txt .sx-cap--plain{justify-self:start}

/* ---------- 07 · cierre ---------- */
.sx-final{--p:.5;position:relative;display:grid;align-items:end;min-height:min(92svh,860px);margin:clamp(88px,10vw,160px) clamp(8px,1.2vw,16px) 0;border-radius:var(--sx-r);overflow:hidden;background:#000000;color:#FFFFFF}
.sx-final__art{position:absolute;inset:0}
.sx-final__art img{width:100%;height:100% !important;object-fit:cover;object-position:50% 40%;scale:calc(1.14 - var(--p) * .14)}
.sx-final__art::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,0) 55%)}
.sx-final__in{position:relative;z-index:2;display:grid;gap:18px;justify-items:start;max-width:720px;padding:clamp(28px,4vw,64px)}
.sx-final .sx-kicker{color:var(--sx-sky)}
.sx-final__text{margin:0;font-size:clamp(17px,1.4vw,21px);line-height:1.5;color:rgba(255,255,255,.88)}
.sx-final__btns{display:flex;flex-wrap:wrap;gap:12px}
.sx-next{position:relative;display:grid;gap:8px;margin:clamp(14px,1.6vw,22px) clamp(8px,1.2vw,16px) 0;padding:clamp(28px,4vw,56px) clamp(24px,4vw,64px);border-radius:var(--sx-r);background:var(--sx-ice);color:var(--sx-b3);overflow:hidden;isolation:isolate}
.sx-next__k{font:600 12.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.sx-next__name{font:900 clamp(40px,7vw,120px)/.9 var(--display);text-transform:uppercase;letter-spacing:-.03em;transition:color .5s var(--e-out)}
.sx-next__name span{display:inline-block;transition:translate .5s var(--e-out)}
.sx-next__img{position:absolute;inset:0;z-index:-1;clip-path:inset(100% 0 0 0);transition:clip-path .8s var(--e-out)}
.sx-next__img img{width:100%;height:100% !important;object-fit:cover;scale:1.1;transition:scale 1.1s var(--e-out)}
.sx-next__img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.7),rgba(0,0,0,.1))}
.sx-next:hover,.sx-next:focus-visible{color:#FFFFFF}
.sx-next:hover .sx-next__img,.sx-next:focus-visible .sx-next__img{clip-path:inset(0)}
.sx-next:hover .sx-next__img img{scale:1}
.sx-next:hover .sx-next__name span{translate:12px 0}

/* ---------- lo fijo (pin) solo en escritorio con movimiento permitido ---------- */
@media (min-width:1025px) and (min-height:620px) and (prefers-reduced-motion:no-preference){
  .sx-hero{height:190svh}
  .sx-hero__pin{position:sticky;top:calc(var(--header-h,84px) + 12px)}
  .sx-build{height:240svh}
  .sx-build__pin{position:sticky;top:calc(var(--header-h,84px) + 16px)}
  .sx-layers{height:200svh}
  .sx-layers__pin{position:sticky;top:calc(var(--header-h,84px) + 16px)}
}
/* sin pin: todo en su estado final */
@media not all and (min-width:1025px) and (min-height:620px) and (prefers-reduced-motion:no-preference){
  /* portada apilada: palabra arriba, fachada completa abajo */
  .sx-hero__pin{height:auto;min-height:0;display:grid;padding:76px 0 0}
  .sx-hero__kicker{top:auto;bottom:auto;position:relative;right:auto;justify-self:center;margin-bottom:14px}
  .sx-hero__title{position:relative;top:auto;opacity:1;translate:none}
  .sx-word{font-size:clamp(56px,17vw,200px)}
  .sx-hero__win{position:relative;inset:auto;margin:24px 12px 12px;aspect-ratio:3 / 2;max-height:70svh;clip-path:none;border-radius:24px}
  .sx-hero__win img{scale:1;translate:none}
  .sx-hero__cta{position:relative;left:auto;bottom:auto;translate:none;justify-self:center;margin:6px 0 18px;opacity:1}
  .sx-scroll{display:none}
  .sx-hero__win{margin:28px clamp(12px,2vw,20px) clamp(12px,2vw,20px)}
  .sx-build__pin{--a:1;--m:0}
  .sx-layers__pin{--s:1}
}

/* ---------- tablet y celular ---------- */
@media (max-width:1024px){
  .sx-over__grid{grid-template-columns:minmax(0,1fr)}
  .sx-over__side{position:static}
  .sx-sticky{grid-template-columns:minmax(0,1fr)}
  .sx-sticky__frame{display:none}
  .sx-step{min-height:0;opacity:1;padding:0 0 28px}
  .sx-step__fig{display:block;overflow:hidden;border-radius:20px;margin-top:6px}
  .sx-layers__pin{min-height:0}
  .sx-layers__deck{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%}
  .sx-card{grid-area:auto;transform:none}
  .sx-asym__a{grid-column:1 / -1}
  .sx-asym__txt{grid-column:1 / -1;grid-row:auto}
}
@media (max-width:768px){
  .sx-build__pin{min-height:0;padding:56px 14px 70px}
  .sx-ver__panel{width:min(76%,360px)}
  .sx-mask__fig{clip-path:none}
  .sx-pal__row{height:120px}
  .sx-sw span{left:2px;top:calc(100% + 8px);font-size:9.5px;letter-spacing:0}
  .sx-lang__grid{grid-template-columns:minmax(0,1fr)}
  .sx-wipe:nth-child(2){margin-bottom:0}
  .sx-drag__hint{display:none}
  .sx-drag__item,.sx-drag__item--low{--h:auto;width:84vw;height:auto}
  .sx-drag__item img{height:auto !important;aspect-ratio:var(--ar)}
  .sx-layers__deck{grid-template-columns:minmax(0,1fr)}
  .sx-full__fig{border-radius:24px}
  .sx-final{min-height:640px}
}
@media (prefers-reduced-motion:reduce){
  .sx-in,.sx-word > span,.sx-hero__win img,.sx-scroll i{animation:none}
  .sx-sticky__img{transition:none}
  .sx-mask__fig{clip-path:none}
  .sx-mask__fig img,.sx-full__fig img,.sx-final__art img{scale:none}
  .js .sx-pal:not(.is-in) .sx-sw{scale:none}
}

/* textos de Daniss: etiquetas, leer más y notas */
.sx-over__tags{font:600 12.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--sx-b)}
.sx-more{margin-top:6px}
.sx-more .cs-brief__body{font-size:inherit}
.sx-arch__note{margin:-12px 0 0;font:500 13.5px/1.4 var(--mono);color:var(--gray)}
.sx-lead--inv{color:rgba(255,255,255,.82)}
.sx-ver__head .sx-lead{margin-top:10px;max-width:52ch}
.sx-final__text--s{font-size:clamp(15px,1.1vw,17px);color:rgba(255,255,255,.7)}
/* cierre: texto a la izquierda y botones a la derecha para que todo entre en una pantalla */
@media (min-width:900px){
  .sx-final__in{max-width:none;width:100%;grid-template-columns:minmax(0,640px) auto;justify-content:space-between;align-items:end;column-gap:40px}
  .sx-final__in > .sx-kicker,.sx-final__in > .sx-final__text{grid-column:1}
  .sx-final__btns{grid-column:2;grid-row:1 / span 3;align-self:end}
}

/* versiones en SVG (archivos de Daniss): cada una con su ancho */
.sx-ver__panel--v{width:min(62%,620px)}
.sx-ver__panel--h{width:min(84%,980px)}
.sx-ver__panel--s{width:min(34%,320px)}
.sx-ver__panel--h img{border-radius:6px}
@media (max-width:768px){.sx-ver__panel--v{width:86%}.sx-ver__panel--h{width:92%}.sx-ver__panel--s{width:52%}}

/* ---------- 01 · portada (mismo formato que SF TOOLS) ----------
   La foto ocupa el lado del logo y se funde en el azul de la propia pared;
   el texto va en la zona lisa de la derecha, así nunca queda tapado. */
.sx-cover{--mx:0;--my:0;--sx-wall:#1D3A98;position:relative;isolation:isolate;overflow:hidden;margin:0 clamp(8px,1.2vw,16px);height:calc(100svh - var(--header-h,84px) - 24px);min-height:600px;max-height:1060px;border-radius:var(--sx-r);background:linear-gradient(180deg,#2A4AA6 0%,#1D3A98 55%,#132E8A 100%);color:#FFFFFF}
.sx-cover__back{position:absolute;top:clamp(16px,2vw,28px);left:clamp(16px,2.4vw,36px);z-index:5;margin:0}
.sx-cover__media{position:absolute;inset:-2% auto -2% -2%;width:calc(104% - min(520px,38%) - clamp(24px,4vw,72px) + 2%);z-index:1;margin:0}
.sx-cover__media img{width:100%;height:100%;object-fit:cover;object-position:35% 45%;translate:calc(var(--mx) * -10px) calc(var(--my) * -8px);-webkit-mask-image:linear-gradient(90deg,#000 76%,transparent);mask-image:linear-gradient(90deg,#000 76%,transparent);animation:sx-cover-in 1.3s var(--e-out) both}
@keyframes sx-cover-in{from{opacity:0;scale:1.06}}
.sx-cover__text{position:absolute;z-index:3;right:clamp(24px,4vw,72px);top:50%;translate:0 -46%;display:grid;justify-items:end;gap:16px;text-align:right;max-width:min(520px,38%)}
.sx-cover__kicker{margin:0;font:600 12.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--sx-ice)}
.sx-cover__title{margin:0}
.sx-cover__title .sx-word{font-size:clamp(56px,7vw,124px)}
.sx-word__b{color:var(--sx-sky)}
.sx-cover__sub{margin:0;font:600 clamp(13px,1.1vw,16px)/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.sx-cover__cta{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 24px;border-radius:var(--pill);border:1px solid rgba(255,255,255,.85);font:600 14.5px/1 var(--text);color:#FFFFFF;transition:background .3s ease,color .3s ease}
.sx-cover__cta span{transition:translate .35s var(--e-out)}
.sx-cover__cta:hover{background:#FFFFFF;color:var(--sx-b)}
.sx-cover__cta:hover span{translate:0 3px}
.sx-cover__scroll{right:auto;left:50%;margin-left:-13px}
/* apilada: celular y ventanas casi cuadradas o verticales (como SF TOOLS) */
@media (max-width:768px),(max-aspect-ratio:11/10){
  .sx-cover{height:auto;min-height:0;max-height:none;display:flex;flex-direction:column;padding:0 0 clamp(24px,4vw,44px)}
  .sx-cover__media{position:relative;inset:auto;width:auto;aspect-ratio:2000 / 1333}
  .sx-cover__media img{-webkit-mask-image:none;mask-image:none;translate:none;object-position:50% 40%}
  .sx-cover__back{top:12px;left:12px}
  .sx-cover__text{position:relative;top:auto;right:auto;translate:none;justify-items:start;text-align:left;max-width:none;padding:22px 20px 0}
  .sx-cover__title .sx-word{font-size:clamp(56px,17vw,140px)}
  .sx-cover__scroll{display:none}
}
@media (prefers-reduced-motion:reduce){.sx-cover__media img{animation:none;translate:none}}