/* =============================================================================
   r4.css | facundobertiller.com, ronda 4 integrada (variante separada; no pisa la ronda 3)
   ESTATICO PRIMERO: sin .fx (movimiento reducido o sin JS) todo se lee como una pagina normal.
   Con .fx cada escena se fija (sticky) y el scroll dirige variables CSS (--p1, --pf, --s2...).
   Capas globales: #bg (aurora WebGL fija, z -1) < contenido < header (100) < cursor (200).
   Estados: .fx (hay movimiento) | .no-gl (sin WebGL2: hero y cierre pierden sus pantallas 3D)
            html[data-tone=light] (el header se invierte sobre las secciones claras)
   ============================================================================= */
:root{
  --blue-deep:#09318D;--blue:#245BFF;--pink:#FF91CC;--carbon:#111318;--ink:#070A16;--ice:#DCE5FF;--steel:#9AA3B8;
  --paper:#F2F5FF;--paper-ink:#0B1020;
  --display:'Manrope',system-ui,sans-serif;--body:'Inter',system-ui,sans-serif;
  --out:cubic-bezier(.16,1,.3,1);--ease:cubic-bezier(.4,0,.2,1);
  --pad:clamp(20px,4vw,64px);--max:1240px;--hc:#fff;--hc2:rgba(255,255,255,.88);--hb:rgba(255,255,255,.3);
  interpolate-size:allow-keywords;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:linear-gradient(180deg,#0a1f5c,var(--ink) 40%);overflow-x:clip;scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{font-family:var(--body);font-size:1.0625rem;line-height:1.6;color:#fff;background:transparent;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--display);line-height:1.05;letter-spacing:-.02em;font-weight:700}
p{text-wrap:pretty}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:var(--carbon);padding:10px 16px;border-radius:8px;z-index:300}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px;border-radius:6px}
[data-tone=light] :focus-visible{outline-color:var(--blue)}
.anchor{position:absolute;left:0;width:1px;height:1px;pointer-events:none}
.bgcv{position:fixed;inset:0;width:100%;height:100%;z-index:-1;display:block;opacity:0;transition:opacity 1.6s var(--out)}
.ready .bgcv{opacity:1}
.bg-wait .bgcv{opacity:0}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.8rem 1.6rem;border-radius:999px;border:1.5px solid transparent;font:600 1rem/1 var(--display);text-decoration:none;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s,box-shadow .4s;transform:translate3d(var(--mx,0px),var(--my,0px),0) scale(var(--sc,1));will-change:transform}
.btn:active{--sc:.97}
.btn--pink{background:var(--pink);color:var(--carbon)}
.btn--pink:hover{background:#ffa6d7;box-shadow:0 0 0 6px rgba(255,145,204,.18),0 18px 50px -12px rgba(255,145,204,.6)}
.btn--line{border-color:rgba(255,255,255,.4);color:#fff;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn--line:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.btn--ink{border-color:rgba(255,255,255,.4);color:#fff}
.btn--ink:hover{background:#fff;color:var(--carbon);border-color:#fff}
.btn--big{min-height:68px;font-size:1.15rem;padding:1.1rem 2.2rem;position:relative;overflow:hidden}
.btn--big::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%);animation:shine 3.6s var(--ease) infinite}
@keyframes shine{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.btn[disabled]{opacity:.6;cursor:wait}
.link{display:inline-flex;align-items:center;min-height:48px;padding:0 .4rem;color:#fff;font:600 1rem var(--display);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px;transition:color .18s}
.link:hover{color:var(--pink)}
.linkb{background:none;border:0;cursor:pointer}

/* ---------- header ---------- */
.head{position:fixed;inset:0 0 auto 0;z-index:100;transition:background-color .4s,box-shadow .4s}
.head.is-solid{background:rgba(7,10,22,.5);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 1px 0 rgba(255,255,255,.08)}
html[data-sect=story] .head.is-solid{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
html[data-tone=light]{--hc:#0B1020;--hc2:rgba(11,16,32,.82);--hb:rgba(11,16,32,.25)}
html[data-tone=light] .head.is-solid{background:rgba(242,245,255,.7);box-shadow:0 1px 0 rgba(11,16,32,.08)}
.head__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:72px}
.logo{display:inline-flex;align-items:center;min-height:44px;font:800 1.05rem/1 var(--display);letter-spacing:-.01em;color:var(--hc);text-decoration:none;transition:color .4s}
.nav{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2rem)}
.nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;color:var(--hc2);text-decoration:none;font:500 .95rem var(--display);transition:color .4s}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:7px;height:1.5px;background:var(--pink);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--out)}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)}
.head__r{display:flex;align-items:center;gap:.9rem}
.lang{display:flex;border:1px solid var(--hb);border-radius:999px;padding:2px;transition:border-color .4s}
.lang a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border-radius:999px;color:var(--hc2);font:600 .82rem var(--display);text-decoration:none;transition:background-color .3s,color .3s}
.lang a[aria-current="true"]{background:var(--hc);color:var(--ink)}
html[data-tone=light] .lang a[aria-current="true"]{color:var(--paper)}
.head .btn{min-height:44px;padding:.5rem 1.1rem;font-size:.92rem}
.btn--head .short{display:none}
@media(max-width:860px){.nav{display:none}}
@media(max-width:640px){.head__in{gap:.5rem}.head__r{gap:.5rem}.logo{font-size:.98rem}.btn--head .long{display:none}.btn--head .short{display:inline}.head .btn{padding:.5rem .95rem}}

/* ---------- cursor (solo puntero fino) ---------- */
.cur{position:fixed;left:0;top:0;z-index:200;width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid rgba(255,255,255,.85);border-radius:50%;pointer-events:none;display:none;mix-blend-mode:difference;transition:width .45s var(--out),height .45s var(--out),margin .45s var(--out),background-color .3s;will-change:transform}
.cur span{position:absolute;inset:0;display:grid;place-items:center;font:700 .68rem var(--display);letter-spacing:.04em;color:#000;opacity:0;transition:opacity .25s;text-transform:uppercase;white-space:nowrap}
.fx.can-cur .cur{display:block}
.cur.big{width:92px;height:92px;margin:-46px 0 0 -46px;background:#fff}
.cur.big span{opacity:1}
.cur.act{width:22px;height:22px;margin:-11px 0 0 -11px}

/* ---------- letras cineticas (las crea r4.js solo con .fx) ---------- */
.wd{display:inline-block;white-space:nowrap}
.ch{display:inline-block;overflow:hidden;vertical-align:top;padding:.06em .02em .16em;margin:-.06em -.02em -.16em calc(-.02em + var(--kn,0em))}
.ch>span{display:inline-block;will-change:transform}
.fx .kin:not(.in):not(.scrub) .ch>span{translate:0 118%}
.fx .kin.in .ch>span{translate:0 0;transition:translate 1.1s var(--out) calc(var(--i,0) * 32ms + var(--d0,0ms))}

/* =============================================================================
   1. HERO + TRABAJOS: una sola escena fijada. Capas del stage:
   1 titular gigante  2 pantallas WebGL  3 textos  4 enlaces  5 HUD
   ============================================================================= */
.story{position:relative}
.stage{position:relative;padding:110px 0 60px;background:linear-gradient(165deg,#09318D,#0a1f5c 55%,#111318)}
.cv{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.fallback{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:0 var(--pad);margin:1rem 0}
.fallback img{width:100%;height:auto;aspect-ratio:1.6;object-fit:cover;object-position:top;border-radius:16px}
.cv,.hit,.hud,.cue{display:none}
.t-h1,.t,#h1{position:relative}
#h1{padding:0 var(--pad);font-size:clamp(2.6rem,9vw,6rem);line-height:.95;letter-spacing:-.035em;font-weight:300;max-width:none}
#h1 .ln{display:block}#h1 .ln.b{font-weight:800}
.t{padding:2rem var(--pad)}
.t>*{margin:0 0 1rem;max-width:40rem}
.t-hero .facts,.t-p1 .kf{list-style:none;display:flex;flex-wrap:wrap;gap:1rem 2rem;padding:0}
.t-hero .facts b,.t-p1 .kf b{display:block;font:700 1.05rem/1.2 var(--display)}
.t-p1 .kf b{font:300 1.7rem/1 var(--display)}
.t-hero .facts span,.t-p1 .kf span{display:block;font-size:.85rem;color:rgba(220,229,255,.84)}
.t-hero .cta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem}
.t-hero .sub{color:var(--ice)}
.t h2{font-weight:300;letter-spacing:-.04em;line-height:.9}
.big{display:inline-block;font-size:clamp(3rem,10vw,6rem);font-weight:800;letter-spacing:-.05em}
.small{display:inline-block;font-size:clamp(1.2rem,2.2vw,2.4rem);font-weight:500;letter-spacing:-.02em;margin-left:.4rem}
.badge{display:inline-block;font:600 .8rem/1 var(--body);padding:.45rem .75rem;border-radius:999px}
.badge--real{background:var(--pink);color:var(--carbon)}
.badge--own{background:rgba(255,255,255,.16);color:var(--ice)}
.t-p1 .fine{font-size:.85rem;color:rgba(220,229,255,.8)}

/* con movimiento y WebGL2: el stage se fija y el scroll dirige todo */
.fx:not(.no-gl) .story{height:calc(100svh * 8.2)}
.fx:not(.no-gl) .stage{position:sticky;top:0;height:100svh;overflow:hidden;padding:0;background:transparent}
.fx:not(.no-gl) .cv{display:block}
.fx:not(.no-gl) .fallback{display:none}
.fx:not(.no-gl) .cv--gl,.fx:not(.no-gl) #gl{z-index:2}
.fx:not(.no-gl) .cv{opacity:0;transition:opacity 1.4s var(--out)}
.fx.ready:not(.no-gl) .cv{opacity:1}
.fx:not(.no-gl) .t-h1{position:absolute;inset:0;z-index:1;pointer-events:none}
.fx:not(.no-gl) #h1{position:absolute;left:var(--pad);top:calc(var(--hd,16vh));padding:0;font-size:clamp(3rem,7.6vw,9.4rem);line-height:.93;max-width:92vw;text-wrap:nowrap}
.fx:not(.no-gl) #h1 .ln{overflow:hidden;padding:.06em .04em .14em;margin:-.06em -.04em -.14em;white-space:nowrap}
.fx:not(.no-gl) #h1 .ch>span,.fx:not(.no-gl) .t h2 .ch>span{translate:0 118%;transform:translate3d(0,0,0)}
.fx.ready:not(.no-gl) #h1 .ch>span{animation:chIn 1.15s var(--out) calc(var(--i,0) * 34ms + 260ms) forwards}
@keyframes chIn{from{translate:0 118%;rotate:6deg}to{translate:0 0;rotate:0deg}}
.fx:not(.no-gl) #h1 .ch>span{transform:translate3d(0,calc(clamp(0, var(--a,0) * 2.7 - var(--i,0) * .036, 1) * -125% + var(--w,0) * -.11em),0)}
.fx:not(.no-gl) .t{position:absolute;inset:0;z-index:3;padding:0;pointer-events:none}
.fx:not(.no-gl) .t>*{margin:0;max-width:none}
.fx:not(.no-gl) .t a,.fx:not(.no-gl) .t button{pointer-events:auto}
.fx:not(.no-gl) .t-hero .sub,.fx:not(.no-gl) .t-hero .facts,.fx:not(.no-gl) .t-hero .cta,.fx:not(.no-gl) .t-hero .note{position:absolute;left:var(--pad);opacity:calc(1 - var(--a,0) * 1.6);translate:0 calc(var(--a,0) * -40px)}
.fx:not(.no-gl) .t-hero .sub{bottom:var(--sb,17.5vh);max-width:min(34rem,44vw);font-size:clamp(1rem,1.25vw,1.2rem)}
.fx:not(.no-gl) .t-hero .facts{bottom:var(--fb,11.5vh);flex-wrap:nowrap;gap:0}
.fx:not(.no-gl) .t-hero .facts li{padding:0 1.4rem;border-left:1px solid rgba(255,255,255,.28)}
.fx:not(.no-gl) .t-hero .facts li:first-child{padding-left:0;border-left:0}
.fx:not(.no-gl) .t-hero .facts b{white-space:nowrap}
.fx:not(.no-gl) .t-hero .cta{bottom:var(--cb,4.6vh)}
.fx:not(.no-gl) .t-hero .note{display:none}
.fx:not(.no-gl) .t-hero.gone{visibility:hidden}
.fx.ready:not(.no-gl) .t-hero .sub{animation:up 1s var(--out) .9s backwards}
.fx.ready:not(.no-gl) .t-hero .facts{animation:up 1s var(--out) 1.05s backwards}
.fx.ready:not(.no-gl) .t-hero .cta{animation:up 1s var(--out) 1.2s backwards}
@keyframes up{from{opacity:0;translate:0 26px}}
.fx:not(.no-gl) .t-p1,.fx:not(.no-gl) .t-p2{visibility:hidden}
.fx:not(.no-gl) .t-p1.on,.fx:not(.no-gl) .t-p2.on{visibility:visible}
.fx:not(.no-gl) .t-p1>*,.fx:not(.no-gl) .t-p2>*{position:absolute}
.fx:not(.no-gl) .t-p1 .badge{left:var(--pad);bottom:var(--pb,41vh)}
.fx:not(.no-gl) .t-p1 h2{left:var(--pad);bottom:var(--pt,20.5vh)}
.fx:not(.no-gl) .t-p1 .meta{left:var(--pad);bottom:var(--pm,10vh);max-width:min(30rem,36vw);color:#fff;font-size:clamp(.92rem,1.05vw,1.05rem);opacity:calc(var(--in1,0) * (1 - var(--out1,0)));translate:0 calc((1 - var(--in1,0)) * 24px)}
.fx:not(.no-gl) .t-p1 .kf{left:var(--pad);bottom:var(--pk,3.2vh);flex-wrap:nowrap;gap:1.6rem;opacity:calc(var(--in1,0) * (1 - var(--out1,0)))}
.fx:not(.no-gl) .t-p1 .btn{left:calc(var(--pad) + 28rem);bottom:var(--pbt,3.4vh);opacity:calc(var(--in1,0) * (1 - var(--out1,0)))}
.fx:not(.no-gl) .t-p1 .fine{right:var(--pad);top:var(--pf,14vh);max-width:20rem;font-size:.78rem;color:rgba(255,255,255,.78);opacity:calc(var(--in1,0) * (1 - var(--out1,0)) * .9);text-align:right}
.fx:not(.no-gl) .t-p2 .badge{right:var(--pad);bottom:var(--pb,41vh)}
.fx:not(.no-gl) .t-p2 h2{right:var(--pad);bottom:var(--pt,20.5vh);text-align:right}
.fx:not(.no-gl) .t-p2 .meta{right:var(--pad);bottom:var(--pm,10vh);max-width:min(28rem,36vw);text-align:right;color:#fff;font-size:clamp(.92rem,1.05vw,1.05rem);opacity:calc(var(--in2,0) * (1 - var(--ex,0)));translate:0 calc((1 - var(--in2,0)) * 24px)}
.fx:not(.no-gl) .t-p2 .btn{right:var(--pad);bottom:var(--pbt,3.4vh);opacity:calc(var(--in2,0) * (1 - var(--ex,0)))}
.fx:not(.no-gl) .big{font-size:clamp(4.4rem,13.5vw,16rem)}
.fx:not(.no-gl) .small{opacity:0;vertical-align:baseline}
.fx:not(.no-gl) #t1 .small{opacity:calc(var(--in1,0) * (1 - var(--out1,0)));translate:0 calc((1 - var(--in1,0)) * 14px)}
.fx:not(.no-gl) #t2 .small{opacity:calc(var(--in2,0) * (1 - var(--ex,0)));translate:0 calc((1 - var(--in2,0)) * 14px)}
.fx:not(.no-gl) #t1 .ch>span{translate:none;animation:none;transform:translate3d(0,calc((1 - clamp(0, var(--in1,0) * 2.4 - var(--i,0) * .26, 1)) * 118% + clamp(0, var(--out1,0) * 2.4 - var(--i,0) * .26, 1) * -118%),0)}
.fx:not(.no-gl) #t2 .ch>span{translate:none;animation:none;transform:translate3d(0,calc((1 - clamp(0, var(--in2,0) * 2.4 - var(--i,0) * .3, 1)) * 118% + clamp(0, var(--ex,0) * 2.4 - var(--i,0) * .3, 1) * -118%),0)}
.fx:not(.no-gl) #tp1 .badge{opacity:calc(var(--in1,0) * (1 - var(--out1,0)))}
.fx:not(.no-gl) #tp2 .badge{opacity:calc(var(--in2,0) * (1 - var(--ex,0)))}
.cap{font-size:.85rem;color:rgba(220,229,255,.82);max-width:40rem;margin:0 0 1rem}
.stage>.cap{padding:0 var(--pad)}
.fx:not(.no-gl) .cap{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fx:not(.no-gl) .hit{position:absolute;inset:0;z-index:4}
.fx:not(.no-gl) .hit.on{display:block}
.fx:not(.no-gl) .hud{position:absolute;left:max(56%,calc(var(--pad) + 733px));bottom:2.4vh;translate:-50% 0;z-index:5;display:flex;gap:clamp(14px,3vw,40px);align-items:center;padding-bottom:6px;opacity:calc(1 - var(--ex,0) * 3)}
.hud button{text-shadow:0 1px 12px rgba(0,0,0,.65);display:flex;align-items:center;gap:9px;background:none;border:0;color:rgba(255,255,255,.55);font:600 .78rem var(--display);cursor:pointer;min-height:44px;padding:0 4px;transition:color .3s}
.hud button i{width:8px;height:8px;border-radius:50%;background:currentColor;display:block;transition:transform .4s var(--out),background-color .3s}
.hud button.on{color:#fff}
.hud button.on i{transform:scale(1.7);background:var(--pink)}
.hud .rail{position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.18)}
.hud .rail b{position:absolute;inset:0;background:var(--pink);transform:scaleX(var(--t,0));transform-origin:left}
.fx:not(.no-gl) .cue{display:block;position:absolute;left:50%;bottom:9vh;translate:-50% 0;z-index:5;width:1px;height:44px;background:rgba(255,255,255,.2);overflow:hidden;opacity:calc(1 - var(--a,0) * 4)}
.cue i{display:block;width:1px;height:16px;background:#fff;animation:cue 1.8s var(--ease) infinite}
@keyframes cue{from{transform:translateY(-16px)}to{transform:translateY(44px)}}
.fx:not(.no-gl) .hud{display:flex}
.fx.is-p:not(.no-gl) .hud{display:none}
@media(max-width:1199px){.fx:not(.no-gl) .hud{display:none}}   /* por debajo de este ancho no cabe junto a los botones del proyecto */

/* movil (vertical) */
@media(max-width:760px){
  .fx:not(.no-gl) .story{height:calc(100svh * 7.4)}
  .fx:not(.no-gl) #h1{--hd:11.5vh;font-size:clamp(2.2rem,11.2vw,4.2rem);left:var(--pad);right:var(--pad);max-width:none;text-wrap:wrap}
  .fx:not(.no-gl) #h1 .ln{white-space:normal}
  .fx:not(.no-gl) .t-hero .sub{bottom:var(--sb,25.5vh);max-width:86vw;font-size:.9rem;line-height:1.5}
  .fx:not(.no-gl) .t-hero .facts{bottom:var(--fb,15.4vh);width:calc(100% - var(--pad) * 2)}
  .fx:not(.no-gl) .t-hero .facts li{padding:0 .6rem;flex:1 1 0;min-width:0}
  .fx:not(.no-gl) .t-hero .facts b{font-size:.86rem;white-space:normal}
  .fx:not(.no-gl) .t-hero .facts span{font-size:.74rem}
  .fx:not(.no-gl) .t-hero .cta{bottom:var(--cb,5.2vh)}
  .fx:not(.no-gl) .hud{display:none}
  .fx:not(.no-gl) .big{font-size:clamp(3.6rem,19vw,7rem)}
  .fx:not(.no-gl) .t-p1 .badge{bottom:var(--pb,48.5vh)}
  .fx:not(.no-gl) .t-p1 h2{bottom:var(--pt,34.5vh)}
  .fx:not(.no-gl) .t-p1 .meta{bottom:var(--pm,22vh);max-width:86vw}
  .fx:not(.no-gl) .t-p1 .kf{bottom:var(--pk,12.4vh);gap:1.1rem}
  .fx:not(.no-gl) .t-p1 .kf b{font-size:1.3rem}
  .fx:not(.no-gl) .t-p1 .btn{left:var(--pad);bottom:var(--pbt,4vh)}
  .fx:not(.no-gl) .t-p1 .fine{display:none}
  .fx:not(.no-gl) .t-p2 .badge{bottom:var(--pb,45vh)}
  .fx:not(.no-gl) .t-p2 h2{bottom:var(--pt,31vh)}
  .fx:not(.no-gl) .t-p2 .meta{bottom:var(--pm,15vh);max-width:86vw}
  .fx:not(.no-gl) .t-p2 .btn{bottom:var(--pbt,4vh)}
}

/* =============================================================================
   2. POSICIONAMIENTO: momento editorial. La frase se rompe y se reordena con el scroll.
   Variables (JS): --p1 aparece, --sk tachado, --pf caida, --p2 ensamble, --hl resaltado,
   --sh reduccion del titular, --fl diagrama, --pp parrafo
   ============================================================================= */
.stmt{position:relative;padding:clamp(80px,12vw,160px) 0}
.stmt__h{font-weight:300;font-size:clamp(2rem,5.8vw,5.6rem);line-height:1.06;letter-spacing:-.035em;max-width:min(100%,1180px)}
.stmt__h .ln{display:block;margin-bottom:.25em}
.stmt__h b{font-weight:800}
.stmt__h .fall{color:rgba(255,255,255,.55);text-decoration:line-through;text-decoration-color:var(--pink);text-decoration-thickness:.06em}
.stmt__low{margin-top:2.4rem;display:grid;grid-template-columns:1fr 1fr;gap:2rem 4rem;align-items:center}
.stmt__p{color:var(--ice);font-size:1.15rem;max-width:30rem}
.flow{position:relative;height:clamp(170px,25vh,250px);margin-left:2rem}
.flow__svg{position:absolute;inset:0;width:100%;height:100%}
.flow__svg path{fill:none;stroke:var(--pink);stroke-width:2;vector-effect:non-scaling-stroke;opacity:.85}
.chip{position:absolute;left:0;transform:translateY(-50%);padding:.5rem 1rem;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);font:600 1rem var(--display);backdrop-filter:blur(6px)}
.c1{top:16%}.c2{top:50%}.c3{top:84%}
.node{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:.6rem;padding:.7rem 1.3rem;border-radius:999px;background:var(--pink);color:var(--carbon);font:700 1.05rem var(--display)}
.node i{width:9px;height:9px;border-radius:50%;background:var(--carbon);box-shadow:0 0 0 0 rgba(17,19,24,.5);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 12px rgba(17,19,24,0)}100%{box-shadow:0 0 0 0 rgba(17,19,24,0)}}

.fx .stmt{height:calc(100svh * 3);padding:0}
.fx .stmt .pin{position:sticky;top:0;height:100svh;display:grid;align-items:center}
.fx .stmt__in{position:relative;height:100%;display:flex;flex-direction:column;justify-content:center}
.fx .stmt__h{position:relative;transform-origin:0 0;transform:translate3d(0,calc(var(--sh,0) * -17vh),0) scale(calc(1 - var(--sh,0) * .3))}
.fx .stmt__h .fall{text-decoration:none;position:relative;color:#fff}
.fx .stmt__h .fall::after{content:"";position:absolute;left:0;right:0;top:56%;height:.065em;background:var(--pink);transform:scaleX(var(--sk,0));transform-origin:left;opacity:calc(1 - var(--pf,0) * 4)}
/* Si la frase tachada se parte en dos renglones (es / en varios anchos de pantalla) la raya no puede ser un elemento absoluto: su caja seria un rectangulo sin sentido y no se
   veria. r4.js marca .wrap en ese caso y la raya pasa a ser el fondo de la propia frase, que se reparte por renglon y avanza renglon por renglon. En un solo renglon
   queda la raya de siempre. */
.fx .stmt__h .fall.wrap::after{display:none}
.fx .stmt__h .fall.wrap{--tc:color-mix(in srgb,var(--pink) calc(clamp(0,1 - var(--pf,0) * 4,1) * 100%),transparent);background:linear-gradient(transparent 56%,var(--tc) 56% calc(56% + .065em),transparent calc(56% + .065em)) 0 0/calc(var(--sk,0) * 100%) 100% no-repeat}
.fx .stmt__h .ch{overflow:hidden}
.fx .stmt__h.fallen .ch,.fx .stmt__h .l2 .ch{overflow:visible}
.fx .l1 .ch>span{--k0:clamp(0,calc(var(--p1,0) * 1.9 - var(--i,0) / var(--tot,40) * .9),1);--k:calc(var(--k0) * var(--k0) * (3 - 2 * var(--k0)));translate:0 calc((1 - var(--k)) * 118%)}
.fx .fall .ch>span{--f0:clamp(0,calc(var(--pf,0) * 1.8 - var(--j,0) / var(--ft,12) * .8),1);--f:calc(var(--f0) * var(--f0));transform:translate3d(calc(var(--f) * var(--fx,0) * 1vw),calc(var(--f) * (70 + var(--fy,0)) * 1vh),0) rotate(calc(var(--f) * var(--fr,0) * 1deg));opacity:calc(1 - var(--f) * 1.4)}
.fx .l2 .ch>span{--k0:clamp(0,calc(var(--p2,0) * 1.9 - var(--i,0) / var(--tot,40) * .9),1);--k:calc(var(--k0) * var(--k0) * (3 - 2 * var(--k0)));transform:translate3d(calc((1 - var(--k)) * var(--dx,0) * 1vw),calc((1 - var(--k)) * var(--dy,0) * 1vh),0) rotate(calc((1 - var(--k)) * var(--rot,0) * 1deg));opacity:var(--k)}
/* La barra rosa es el fondo de la propia frase y no un elemento absoluto: si la frase se parte en dos renglones (pantallas de hasta ~360 px) el fondo se reparte
   por renglon (box-decoration-break:slice, el valor por defecto) y avanza renglon por renglon. El relleno lateral se compensa con margen negativo: no mueve el texto. */
.fx .l2 b{color:#fff;padding:0 .08em .02em;margin:0 -.08em;border-radius:.14em;background:linear-gradient(var(--pink),var(--pink)) 0 .04em/calc(var(--hl,0) * 100%) calc(100% - .04em) no-repeat}
.fx .l2 b .ch>span{color:color-mix(in srgb,var(--carbon) calc(clamp(0,(var(--hl,0) - var(--hf,0)) * 60 + .5,1) * clamp(0,var(--hl,0) * 40,1) * 100%),#fff)}
/* Cada letra de la frase resaltada se parte en el borde exacto de la barra rosa: la letra blanca queda a la derecha del borde y una copia negra (::after, texto en data-c)
   a la izquierda. La letra que esta justo en el frente queda negra sobre el rosa y blanca sobre el fondo: nunca gris ni cortada. --x = avance de la barra sobre esa letra
   (0 = el borde llega a su inicio, 1 = ya la paso); --hs / --hw = inicio y ancho de la letra a lo largo de la barra (los calcula r4.js). Si el navegador no soporta
   clip-path o falta data-c, se mantiene la regla de arriba (color por letra). */
@supports (clip-path:inset(0 calc(.5 * 100%))) and (width:clamp(1px,2px,3px)){
  .fx .l2 b .ch>span[data-c]{position:relative;color:transparent;--x:clamp(-1,calc((var(--hl,0) - var(--hs,0)) / var(--hw,.1)),2)}
  .fx .l2 b .ch>span[data-c]::before,.fx .l2 b .ch>span[data-c]::after{content:attr(data-c);position:absolute;left:0;top:0;white-space:nowrap}
  .fx .l2 b .ch>span[data-c]::before{color:#fff;clip-path:inset(-.3em -.3em -.3em calc(var(--x) * 100%))}
  .fx .l2 b .ch>span[data-c]::after{color:var(--carbon);clip-path:inset(-.3em calc((1 - var(--x)) * 100%) -.3em -.3em)}
}
.fx .stmt__low{position:absolute;left:var(--pad);right:var(--pad);bottom:9vh;margin:0;max-width:var(--max);padding:0;opacity:var(--pp,0);translate:0 calc((1 - var(--pp,0)) * 30px)}
.fx .flow__svg{clip-path:inset(0 calc((1 - var(--fl,0)) * 100%) 0 0)}
.fx .chip,.fx .node{opacity:var(--fl,0)}
@media(max-width:760px){
  .stmt__low{grid-template-columns:1fr}
  .flow{margin-left:0;height:140px}
  .fx .stmt{height:calc(100svh * 3.2)}
  .fx .stmt__h{font-size:clamp(1.9rem,10.2vw,3.2rem);transform:translate3d(0,calc(var(--sh,0) * -22vh),0) scale(calc(1 - var(--sh,0) * .26))}
  .fx .stmt__low{bottom:6vh;gap:1.2rem}
  .stmt__p{font-size:1rem}
}

/* =============================================================================
   3. SERVICIOS: planes con profundidad 3D y selector de velocidad como acelerador.
   La velocidad elegida cambia la atmosfera (aurora mas rapida), las estelas y el color del borde.
   Variables: --spd (0/1/2, en .svc), --sp (posicion del selector), --c (entrada de cada plan)
   ============================================================================= */
.svc{position:relative;padding:clamp(90px,12vw,170px) 0;--spc:#245BFF}
.svc[data-speed="1"]{--spc:#8C7BFF}.svc[data-speed="2"]{--spc:#FF91CC}
.svc__h{font-size:clamp(2.4rem,6.4vw,5.6rem);font-weight:300;letter-spacing:-.04em;line-height:1}
.svc .lead{margin-top:1.3rem;max-width:40rem;color:var(--ice);font-size:1.15rem}
.speed{position:relative;display:grid;grid-template-columns:repeat(3,1fr);padding:6px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);max-width:780px;margin:2.6rem 0 2.4rem;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.speed button{position:relative;z-index:1;min-height:64px;padding:.6rem 1rem;border:0;background:none;border-radius:999px;cursor:pointer;font-family:var(--display);color:rgba(220,229,255,.78);text-align:center;transition:color .4s}
.speed button b{display:block;font-size:1.02rem;font-weight:700}
.speed button span{display:block;font:400 .8rem/1.3 var(--body);margin-top:.1rem}
.speed button[aria-pressed="true"]{color:#fff}
.speed button:hover{color:#fff}
.speed__thumb{position:absolute;z-index:0;top:6px;bottom:6px;left:6px;width:calc((100% - 12px) / 3);border-radius:999px;background:linear-gradient(90deg,var(--blue),var(--spc));box-shadow:0 0 44px -6px var(--spc);transform:translateX(calc(var(--sp,0) * 100%));transition:transform .7s var(--out),box-shadow .5s,background .5s;overflow:hidden}
.speed__thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);animation:thumb 3.2s var(--ease) infinite}
.svc[data-speed="1"] .speed__thumb::after{animation-duration:1.8s}.svc[data-speed="2"] .speed__thumb::after{animation-duration:.9s}
@keyframes thumb{0%,40%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;align-items:stretch;perspective:1700px;perspective-origin:50% 35%}
.plan{position:relative;display:flex;flex-direction:column;padding:2rem 1.7rem;border-radius:24px;background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transform-style:preserve-3d;transition:opacity .5s,filter .5s,border-color .5s,box-shadow .5s}
.plan::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;background:linear-gradient(135deg,var(--spc),transparent 55%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.9;pointer-events:none;transition:background .6s}
.plan--feat{background:linear-gradient(160deg,rgba(36,91,255,.6),rgba(9,49,141,.55));box-shadow:0 40px 90px -30px rgba(36,91,255,.7)}
.plan:hover{box-shadow:0 40px 90px -30px var(--spc)}
.plan__glare{position:absolute;inset:0;border-radius:inherit;background:radial-gradient(520px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.17),transparent 45%);opacity:var(--go,0);transition:opacity .4s;pointer-events:none}
.plan h3{font-size:1.5rem;font-weight:700}
.plan__desc{margin-top:.35rem;color:var(--ice);font-size:.98rem}
.plan__price{margin-top:1.5rem;font:800 clamp(2rem,3.1vw,2.7rem)/1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.plan__price small{font:500 .9rem var(--body);opacity:.75;margin-left:.2rem;letter-spacing:0;white-space:nowrap}
.plan__from{display:block;font:500 .85rem var(--body);opacity:.75;margin-bottom:.3rem;letter-spacing:0}
.plan__eta{margin-top:.6rem;font-size:.92rem;color:var(--ice);transition:color .4s}
.plan__eta.na{color:#ffb4b4}
.plan ul{list-style:none;margin:1.5rem 0 1.9rem;display:grid;gap:.6rem;font-size:.98rem}
.plan li{display:flex;gap:.6rem;align-items:flex-start}
.plan li::before{content:"";flex:none;width:16px;height:16px;margin-top:.28rem;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF91CC' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E")}
.plan li.off{color:#c8d0e6;text-decoration:line-through}
.plan li.off::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b849a' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")}
.plan .btn{margin-top:auto}
.plan:has(.plan__eta.na){opacity:.5;filter:saturate(.4)}
.plan .amt{display:inline-block}
.incl{margin-top:2.2rem;max-width:52rem;padding:1.05rem 1.4rem;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-size:1rem}
.pay{margin-top:1rem;max-width:52rem;color:rgba(220,229,255,.9);font-size:.95rem}
.svc__fx{position:absolute;inset:0;pointer-events:none;overflow:hidden;opacity:0;display:none}
.fx .svc__fx{display:block;opacity:calc(.08 + var(--spd,0) * .34)}
.svc__fx i{position:absolute;left:0;width:55%;height:1.5px;background:linear-gradient(90deg,transparent,var(--spc),transparent);animation:streak calc(7s / (1 + var(--spd,0) * 2.4)) linear infinite}
.svc__fx i:nth-child(1){top:12%;animation-delay:-1s}.svc__fx i:nth-child(2){top:27%;animation-delay:-4s;width:35%}
.svc__fx i:nth-child(3){top:41%;animation-delay:-2.2s}.svc__fx i:nth-child(4){top:55%;animation-delay:-5.4s;width:42%}
.svc__fx i:nth-child(5){top:69%;animation-delay:-3.1s}.svc__fx i:nth-child(6){top:81%;animation-delay:-6s;width:30%}.svc__fx i:nth-child(7){top:92%;animation-delay:-.4s}
@keyframes streak{from{transform:translateX(-60%)}to{transform:translateX(190%)}}
.svc .wrap{position:relative;z-index:1}
/* entrada 3D de los planes: abanico que se endereza con el scroll; inclinacion con el cursor */
.fx .plan{--c:1;transform:translate3d(calc((1 - var(--c)) * var(--ox,0px)),calc((1 - var(--c)) * 110px),calc((1 - var(--c)) * -300px)) rotateY(calc((1 - var(--c)) * var(--oy,0deg) + var(--tx,0) * 7deg)) rotateX(calc((1 - var(--c)) * 16deg + var(--ty,0) * -6deg));opacity:calc(.15 + var(--c) * .85)}
.fx .plan:nth-child(1){--ox:-90px;--oy:34deg}.fx .plan:nth-child(2){--ox:0px;--oy:0deg}.fx .plan:nth-child(3){--ox:90px;--oy:-34deg}
.fx .plan:has(.plan__eta.na){opacity:calc((.15 + var(--c) * .85) * .5)}
@media(max-width:960px){.plans{grid-template-columns:1fr;max-width:520px;perspective:none}.fx .plan{transform:translate3d(0,calc((1 - var(--c)) * 60px),0)}.speed{border-radius:28px}.speed button{min-height:56px}}
@media(max-width:560px){.speed{grid-template-columns:1fr;border-radius:24px}.speed__thumb{display:none}.speed button[aria-pressed="true"]{background:linear-gradient(90deg,var(--blue),var(--spc))}}

/* =============================================================================
   4. PROCESO: relato fijado. Tres etapas; cada una cambia el titulo, el numero y la escena.
   Variables por paso (li): --in --out ; en .proc: --s1 --s2 --s3 (escena), --pp (riel)
   ============================================================================= */
.proc{position:relative;padding:clamp(80px,10vw,140px) 0}
.proc__h{font:600 .9rem var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--pink);margin-bottom:1.4rem}
.steps{list-style:none;display:grid;gap:2.4rem}
.step__n{display:block;font:200 5rem/.9 var(--display);color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.4)}
.step h3{font-size:clamp(2.2rem,5vw,4rem);font-weight:800;line-height:.95;margin-top:.15em}
.step p{max-width:30rem;color:var(--ice);margin-top:1rem}
.proc__viz,.proc__rail{display:none}
.fx .proc{height:calc(100svh * 3.1);padding:0}
.fx .proc .pin{position:sticky;top:0;height:100svh;display:grid;align-items:center}
.fx .proc__in{position:relative;display:grid;grid-template-columns:1fr 1.08fr;gap:3vw;align-items:center}
.fx .steps{position:relative;display:block;height:clamp(320px,54vh,480px)}
.fx .step{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;opacity:calc(var(--in,0) * (1 - var(--out,0)));translate:0 calc((1 - var(--in,0)) * 40px - var(--out,0) * 40px)}
.fx .step__n{font-size:clamp(5rem,13vw,12rem)}
.fx .step h3 .ch>span{--k0:clamp(0,calc(var(--in,0) * 1.9 - var(--i,0) / var(--tot,10) * .9),1);--o0:clamp(0,calc(var(--out,0) * 1.9 - var(--i,0) / var(--tot,10) * .9),1);transform:translate3d(0,calc((1 - var(--k0)) * 118% - var(--o0) * 118%),0)}
.fx .proc__viz{display:block;position:relative;aspect-ratio:16/12;max-height:64vh;width:100%}
.fx .proc__rail{display:block;position:absolute;left:var(--pad);right:var(--pad);bottom:-12vh;height:2px;background:rgba(255,255,255,.15)}
.proc__rail i{position:absolute;top:-5px;width:12px;height:12px;border-radius:50%;background:#2a3150;border:2px solid rgba(255,255,255,.3)}
.proc__rail i:nth-child(1){left:0}.proc__rail i:nth-child(2){left:calc(50% - 6px)}.proc__rail i:nth-child(3){right:0}
.proc__rail b{position:absolute;inset:0;background:var(--pink);transform:scaleX(var(--pp,0));transform-origin:left;box-shadow:0 0 14px var(--pink)}
.dev{position:absolute;inset:9% 7%;border-radius:20px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);box-shadow:0 60px 100px -30px rgba(0,0,0,.75);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:1;display:flex;flex-direction:column;transform:perspective(1500px) rotateY(calc(-16deg + var(--pp,0) * 12deg)) rotateX(5deg) scale(calc(.9 + var(--pp,0) * .1))}
.dev__bar{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.12)}
.dev__bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.3)}
.dev__url{flex:1;margin-left:8px;height:22px;border-radius:999px;background:rgba(255,255,255,.1);position:relative;overflow:hidden}
.dev__url b{position:absolute;left:10px;top:6px;bottom:6px;width:calc(var(--s3,0) * 46%);border-radius:99px;background:var(--pink)}
.dev__body{position:relative;flex:1;padding:6%}
.chat,.page{position:absolute;inset:6%}
.chat{opacity:calc(1 - var(--s2,0) * 2.2)}
.bub{position:absolute;height:15%;border-radius:999px;background:rgba(255,255,255,.16)}
.b1{left:0;top:6%;width:48%;--k:clamp(0,calc(var(--s1,0) * 3),1);transform-origin:0 50%}
.b2{right:0;top:32%;width:60%;background:var(--pink);--k:clamp(0,calc(var(--s1,0) * 3 - 1),1);transform-origin:100% 50%}
.b3{left:0;top:58%;width:38%;--k:clamp(0,calc(var(--s1,0) * 3 - 2),1);transform-origin:0 50%}
.bub{transform:scale(var(--k,0));opacity:var(--k,0)}
.typing{position:absolute;left:0;bottom:2%;display:flex;gap:6px;opacity:calc(var(--s1,0) * (1 - var(--s2,0) * 3))}
.typing i{width:9px;height:9px;border-radius:50%;background:#fff;animation:typing 1.1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes typing{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-5px)}}
.wf{position:absolute;border-radius:10px;background:rgba(255,255,255,.14);opacity:var(--k,0);transform:scale(calc(.8 + var(--k,0) * .2));transition:none}
.wf::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(120deg,var(--blue),var(--pink));opacity:var(--col,0)}
.w-nav{left:0;right:0;top:0;height:9%;--k:clamp(0,calc(var(--s2,0) * 6),1)}
.w-hero{left:0;right:0;top:14%;height:36%;--k:clamp(0,calc(var(--s2,0) * 6 - 1),1)}
.w-l1{left:0;top:56%;width:56%;height:6%;--k:clamp(0,calc(var(--s2,0) * 6 - 2),1)}
.w-l2{left:0;top:66%;width:40%;height:6%;--k:clamp(0,calc(var(--s2,0) * 6 - 2.5),1)}
.w-btn{left:0;top:78%;width:24%;height:11%;border-radius:999px;--k:clamp(0,calc(var(--s2,0) * 6 - 3),1)}
.w-c{top:56%;width:20%;height:32%}
.w-c.c1{right:42%;--k:clamp(0,calc(var(--s2,0) * 6 - 3.4),1)}.w-c.c2{right:21%;--k:clamp(0,calc(var(--s2,0) * 6 - 3.8),1)}.w-c.c3{right:0;--k:clamp(0,calc(var(--s2,0) * 6 - 4.2),1)}
.page{--col:clamp(0,calc(var(--s2,0) * 4 - 2.4),1)}
.rings{display:none}
.fx .rings{display:block;position:absolute;inset:0;opacity:var(--s3,0);pointer-events:none}
.ring{position:absolute;left:50%;top:50%;width:30%;aspect-ratio:1;border-radius:50%;border:2px solid var(--pink);translate:-50% -50%;opacity:0;animation:ring 2.8s var(--out) infinite}
.ring.r2{animation-delay:1.4s}
@keyframes ring{from{scale:.3;opacity:.9}to{scale:3.2;opacity:0}}
.links{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.links{clip-path:circle(calc(var(--s3,0) * 80%) at 50% 50%)}
.links path{fill:none;stroke:var(--pink);stroke-width:1.8;vector-effect:non-scaling-stroke}
.sat{position:absolute;z-index:2;width:12%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(8px);opacity:var(--sk,0);scale:calc(.5 + var(--sk,0) * .5)}
.sat svg{width:48%;fill:none;stroke:#fff;stroke-width:1.8;stroke-linejoin:round}
.sat1{left:8%;top:18%;translate:-50% -50%;--sk:clamp(0,calc(var(--s3,0) * 3 - .6),1)}
.sat2{left:92%;top:20%;translate:-50% -50%;--sk:clamp(0,calc(var(--s3,0) * 3 - 1),1)}
.sat3{left:90%;top:88%;translate:-50% -50%;--sk:clamp(0,calc(var(--s3,0) * 3 - 1.4),1)}
@media(max-width:760px){
  .fx .proc{height:calc(100svh * 3.2)}
  .fx .proc__in{grid-template-columns:1fr;gap:0;align-content:center}
  .fx .proc__viz{order:-1;aspect-ratio:16/11;max-height:34vh;margin-bottom:1.2rem}
  .fx .steps{height:clamp(230px,34vh,300px)}
  .fx .step__n{font-size:4.6rem}
  .fx .step h3{font-size:clamp(2rem,10vw,3rem)}
  .fx .step p{font-size:.98rem}
  .fx .proc__rail{bottom:-8vh}
}

/* =============================================================================
   5. QUIEN ESTA DETRAS: un iris abre un mundo claro. Otro ritmo: lento, horizontal, amplio.
   Variables: --r (radio del iris, vmax), --ph (foto), --mk (nombre gigante), --tp (texto)
   ============================================================================= */
.about{position:relative;background:var(--paper);color:var(--paper-ink)}
.iris{position:relative;padding:clamp(80px,10vw,140px) 0;overflow:hidden}
.about__mark{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:0;pointer-events:none;white-space:nowrap}
.about__mark span{font:800 clamp(6rem,21vw,20rem)/.84 var(--display);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px rgba(11,16,32,.13);display:block}
.about__in{position:relative;display:grid;grid-template-columns:.85fr 1.35fr;gap:clamp(1.6rem,5vw,4.5rem);align-items:center}
.about__photo{border-radius:999px 999px 28px 28px;overflow:hidden;aspect-ratio:3/4;max-width:min(30vw,430px);background:var(--ice);box-shadow:0 50px 80px -40px rgba(11,16,32,.55)}
.about__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.about h2{font-size:clamp(2.6rem,6.2vw,5.6rem);font-weight:300;letter-spacing:-.045em;line-height:.98}
.about p{margin-top:1.4rem;color:rgba(11,16,32,.72);font-size:1.18rem;max-width:34rem}
.fx .about{height:calc(100svh * 2.1);background:transparent}
.fx .about .pin{position:sticky;top:0;height:100svh}
.fx .iris{position:absolute;inset:0;padding:0;background:var(--paper);display:grid;align-items:center;clip-path:circle(calc(var(--r,0) * 1vmax) at 50% 62%);will-change:clip-path}
.fx .about__mark span:nth-child(1){transform:translateX(calc(8vw - var(--mk,0) * 26vw))}
.fx .about__mark span:nth-child(2){transform:translateX(calc(-40vw + var(--mk,0) * 30vw))}
.fx .about__photo{clip-path:inset(calc((1 - var(--ph,0)) * 100%) 0 0 0 round 0 0 28px 28px);box-shadow:none}
.fx .about__photo img{transform:scale(calc(1.5 - var(--ph,0) * .5))}
.fx .about h2 .ch>span{--k0:clamp(0,calc(var(--tp,0) * 1.9 - var(--i,0) / var(--tot,18) * .9),1);transform:translate3d(0,calc((1 - var(--k0)) * 118%),0)}
.fx .about p{clip-path:inset(0 calc((1 - var(--tp2,0)) * 100%) 0 0);opacity:var(--tp2,0);translate:calc((1 - var(--tp2,0)) * -30px) 0}
@media(max-width:760px){
  .about__in{grid-template-columns:1fr;gap:1.4rem;align-content:center}
  .about__photo{max-width:200px}
  .about p{font-size:1.02rem}
  .fx .about{height:calc(100svh * 2)}
}

/* =============================================================================
   6. PREGUNTAS: descanso. Lectura clara; microinteracciones sutiles.
   ============================================================================= */
.faqs{position:relative;z-index:2;background:var(--paper);color:var(--paper-ink);padding:clamp(24px,3vw,44px) 0 clamp(110px,13vw,200px);border-radius:0 0 50% 50% / 0 0 clamp(40px,7vw,110px) clamp(40px,7vw,110px)}
.faqs__in{max-width:980px}
.faqs h2{font-size:clamp(2.4rem,6vw,5rem);font-weight:300;letter-spacing:-.045em;margin-bottom:2.6rem}
.faq details{position:relative;border-top:1px solid rgba(11,16,32,.14)}
.faq details:last-child{border-bottom:1px solid rgba(11,16,32,.14)}
.faq details::before{content:"";position:absolute;inset:0;background:radial-gradient(460px circle at var(--wx,20%) 50%,rgba(255,145,204,.2),transparent 60%);opacity:0;transition:opacity .4s;pointer-events:none}
.faq details:hover::before,.faq details[open]::before{opacity:1}
.faq summary{position:relative;z-index:1;display:grid;grid-template-columns:3rem 1fr 2.4rem;align-items:center;gap:1rem;min-height:76px;padding:1.1rem 0;cursor:pointer;list-style:none;font:600 clamp(1.05rem,1.9vw,1.45rem)/1.25 var(--display);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.q__n{font:500 .85rem var(--body);color:rgba(11,16,32,.4);letter-spacing:.04em;transition:color .3s}
.faq details:hover .q__n,.faq details[open] .q__n{color:#c43d8f}
.q__t{transition:transform .6s var(--out)}
.faq details:hover .q__t{transform:translateX(10px)}
.q__i{position:relative;justify-self:end;width:36px;height:36px;border-radius:50%;border:1.5px solid rgba(11,16,32,.25);transition:transform .6s var(--out),background-color .3s,border-color .3s}
.q__i::before,.q__i::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.8px;background:var(--paper-ink);translate:-50% -50%;transition:transform .5s var(--out),background-color .3s}
.q__i::after{transform:rotate(90deg)}
.faq details[open] .q__i{transform:rotate(180deg);background:var(--paper-ink);border-color:var(--paper-ink)}
.faq details[open] .q__i::before,.faq details[open] .q__i::after{background:var(--paper)}
.faq details[open] .q__i::after{transform:rotate(0)}
.faq details p{position:relative;z-index:1;padding:0 3.4rem 1.7rem 4rem;max-width:48rem;color:rgba(11,16,32,.74)}
.faq details::details-content{height:0;overflow:clip;transition:height .55s var(--out),content-visibility .55s allow-discrete}
.faq details[open]::details-content{height:auto}
.fx .faq details{opacity:0;translate:0 26px;transition:opacity .9s var(--out),translate .9s var(--out);transition-delay:calc(var(--n,0) * 80ms)}
.fx .faq details.in{opacity:1;translate:0 0}
@media(max-width:560px){.faq summary{grid-template-columns:2.2rem 1fr 2.2rem;gap:.6rem}.faq details p{padding:0 .4rem 1.5rem 2.8rem}}

/* =============================================================================
   7. CONTACTO: cierre cinematografico. Las pantallas vuelven, la camara las atraviesa y se abre
   una pantalla en blanco: la tuya. El titular se invierte donde la ventana lo cubre.
   Variables: --pt (ventana), --ob (esfera CTA)
   ============================================================================= */
.close{position:relative;margin-top:calc(-1 * clamp(40px,7vw,110px))}
.close__scene{position:relative}
.close__h{font-family:var(--display);font-size:clamp(3rem,11.5vw,13rem);font-weight:800;letter-spacing:-.055em;line-height:.88;text-align:center}
.close .pin{position:relative;padding:calc(clamp(40px,7vw,110px) + 4rem) var(--pad) 3rem;text-align:center}
.close .pin .cv,.portal,.orb{display:none}
.close__h--inv{display:none}
.close__eyebrow{display:none}
.fx .close__eyebrow{display:block;font:600 .9rem var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--pink);margin-bottom:1rem}
.close__body{position:relative;z-index:1;padding-top:clamp(50px,7vw,100px);padding-bottom:clamp(70px,9vw,130px);background:rgba(7,10,22,.88);border-radius:50% 50% 0 0 / clamp(40px,6vw,90px) clamp(40px,6vw,90px) 0 0;margin-top:calc(-1 * clamp(40px,6vw,90px))}
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.close .lead{color:var(--ice);font-size:1.15rem;max-width:34rem}
.offer{list-style:none;display:grid;gap:.8rem;margin-top:1.6rem;max-width:34rem;color:var(--ice);font-size:1rem}
.offer b{color:#fff}
.contact__wa{margin-top:2rem}
.form{display:grid;gap:.95rem;padding:clamp(1.4rem,3vw,2.4rem);border-radius:28px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 50px 100px -40px rgba(0,0,0,.6)}
.form label{display:grid;gap:.4rem;font:600 .92rem var(--display);color:var(--ice)}
.form input,.form textarea{width:100%;min-height:52px;padding:.8rem 1rem;border-radius:12px;border:1.5px solid rgba(255,255,255,.32);background:rgba(255,255,255,.07);color:#fff;font:400 1rem var(--body);transition:border-color .2s,background-color .2s}
.form textarea{min-height:100px;resize:vertical}
.form input:focus,.form textarea:focus{border-color:var(--pink);background:rgba(255,255,255,.12);outline:3px solid rgba(255,145,204,.4);outline-offset:2px}
.form input[aria-invalid="true"]{border-color:#ff8a8a}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form__msg{min-height:1.4em;font-size:.95rem;color:var(--ice)}
.form__msg.ok{color:var(--pink)}.form__msg.err{color:#ffb4b4}.form__msg a{color:#fff}
.privacy{font-size:.85rem;color:rgba(220,229,255,.82)}
.fx .close__scene{height:calc(100svh * 2.5)}
.fx .close .pin{position:sticky;top:0;height:100svh;overflow:hidden;padding:0}
.fx:not(.no-gl) .close .pin .cv{display:block}
.fx .close__h{position:absolute;left:50%;top:50%;translate:-50% -50%;width:92vw;z-index:2;pointer-events:none}
.fx .close__h .ch>span{--k0:clamp(0,calc(var(--cp,0) * 1.9 - var(--i,0) / var(--tot,20) * .9),1);--k:calc(var(--k0) * var(--k0) * (3 - 2 * var(--k0)));transform:translate3d(0,calc((1 - var(--k)) * 118%),0) scale(calc(1 + (1 - var(--k)) * .25))}
.fx .close__h--inv{display:block;color:var(--carbon)}
.fx .portal{display:block;position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(135deg,#FF91CC 0%,#ff80c4 38%,#b996ff 100%);clip-path:inset(calc((1 - var(--pt,0)) * 50%) calc((1 - var(--pt,0)) * 50%) round calc((1 - var(--pt,0)) * 34px))}
.fx .portal::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 70% 15%,rgba(255,255,255,.45),transparent 60%),radial-gradient(50% 60% at 10% 100%,rgba(36,91,255,.4),transparent 70%)}
.fx .portal .close__h{z-index:1}
.fx .orb{display:grid;position:absolute;left:50%;bottom:var(--orb-b,calc(8vh + clamp(40px,6vw,90px)));z-index:5;width:var(--orb-d,clamp(120px,13vw,168px));aspect-ratio:1;translate:-50% 0;border-radius:50%;background:var(--carbon);color:#fff;place-items:center;text-decoration:none;opacity:var(--ob,0);scale:calc(.5 + var(--ob,0) * .5);visibility:hidden}
.fx .orb.on{visibility:visible}
.orb svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 16s linear infinite}
.orb text{font:700 12.5px var(--display);letter-spacing:.08em;fill:#fff}
@keyframes spin{to{transform:rotate(360deg)}}
.orb__arr{position:relative;width:2px;height:34%;background:var(--pink);transition:transform .4s var(--out)}
.orb__arr::after{content:"";position:absolute;left:50%;bottom:-1px;width:12px;height:12px;border-right:2px solid var(--pink);border-bottom:2px solid var(--pink);translate:-50% 0;rotate:45deg}
.orb:hover .orb__arr{transform:translateY(6px)}
@media(max-width:860px){.contact__grid{grid-template-columns:1fr}.fx .close__scene{height:calc(100svh * 2.4)}.close__h{font-size:clamp(2.8rem,15vw,7rem)}.fx .orb{bottom:var(--orb-b,calc(5vh + clamp(40px,6vw,90px)))}}

/* ---------- pie ---------- */
.foot{position:relative;z-index:1;background:var(--ink);color:rgba(220,229,255,.78);padding:2.4rem 0 0;font-size:.92rem;overflow:hidden}
.foot__in{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:1.6rem 2rem;align-items:start}
.foot .logo{min-height:36px;color:#fff}
.foot__tag{margin-top:.4rem}
.foot nav,.foot__links{display:grid;gap:.1rem}
.foot a{display:inline-flex;align-items:center;min-height:36px;color:rgba(220,229,255,.9);text-underline-offset:3px}
.foot a:hover{color:#fff}
.foot__copy{grid-column:1/-1;padding-top:1rem;border-top:1px solid rgba(255,255,255,.12);font-size:.85rem}
.foot__mark{margin-top:1.2rem;text-align:center;white-space:nowrap;font:800 min(9.4vw,11.5rem)/.8 var(--display);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.2);user-select:none;padding:0 var(--pad)}
.fx .foot__mark{transform:translateY(calc((1 - var(--fm,0)) * 60%))}
@media(max-width:700px){.foot__in{grid-template-columns:1fr 1fr}.foot__in>div:first-child{grid-column:1/-1}.foot a,.foot .logo{min-height:44px}}

/* avisos del plazo: el texto cambia con un pequeno vuelco cuando se elige otra velocidad */
.plan__eta.flip{animation:etaIn .7s var(--out)}
@keyframes etaIn{from{opacity:0;translate:0 8px}}
/* sin WebGL2: la historia queda estatica y legible (el resto de las escenas DOM sigue funcionando) */
.no-gl .story .ch>span{translate:none!important;animation:none!important;transform:none!important}
.no-gl .story .t-p1,.no-gl .story .t-p2{opacity:1;visibility:visible}
.no-gl .story .small{opacity:1}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}