/* =====================================================================
   GULA Consultora — sistema visual de la landing
   Tokens de NOVA (_arte/DIRECCION-DE-ARTE.md), medidos en las piezas reales:
   negro puro · blanco · dorado #EAC75D · gris #9A9A9A. Poppins, una sola.
   Todo en rem/vw: arriba de 1920 la página escala proporcionalmente.
   ===================================================================== */

@font-face{font-family:"Poppins";font-weight:300;font-display:swap;src:url("../fonts/poppins-300-latin.woff2") format("woff2");}
@font-face{font-family:"Poppins";font-weight:400;font-display:swap;src:url("../fonts/poppins-400-latin.woff2") format("woff2");}
@font-face{font-family:"Poppins";font-weight:600;font-display:swap;src:url("../fonts/poppins-600-latin.woff2") format("woff2");}
@font-face{font-family:"Poppins";font-weight:700;font-display:swap;src:url("../fonts/poppins-700-latin.woff2") format("woff2");}
@font-face{font-family:"Poppins";font-weight:900;font-display:swap;src:url("../fonts/poppins-900-latin.woff2") format("woff2");}
/* fallback métrico: el hero no salta cuando entra la fuente (CLS) */
@font-face{font-family:"Poppins Fallback";src:local("Arial");size-adjust:104%;ascent-override:105%;descent-override:35%;line-gap-override:10%;}

:root{
  --negro:#000000; --blanco:#FFFFFF; --dorado:#EAC75D; --gris:#9A9A9A;
  --blanco-80:rgba(255,255,255,.80); --blanco-56:rgba(255,255,255,.56);
  --blanco-12:rgba(255,255,255,.12); --blanco-06:rgba(255,255,255,.06);
  --negro-2:#0A0A0A; --negro-3:#141414;
  --dorado-hover:#F2D678; --dorado-24:rgba(234,199,93,.24);
  --scrim-h:linear-gradient(90deg,#000 0%,rgba(0,0,0,.82) 34%,rgba(0,0,0,.35) 62%,rgba(0,0,0,0) 82%);
  --scrim-v:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 45%,#000 100%);
  --font:"Poppins","Poppins Fallback",system-ui,"Segoe UI",sans-serif;

  --t-hero:clamp(2.5rem,0.5rem + 6.6vw,7rem);
  --t-titulo:clamp(2rem,0.85rem + 4vw,4.25rem);
  --t-frase:clamp(1.5rem,0.7rem + 2.3vw,2.75rem);
  --t-numeral:clamp(4.5rem,2rem + 11vw,13rem);
  --t-lead:clamp(1.125rem,1rem + .5vw,1.375rem);
  --t-cuerpo:clamp(1rem,.95rem + .25vw,1.125rem);
  --t-etiqueta:.75rem;
  --t-boton:.9375rem;

  --margen:clamp(1.25rem,4.4vw,4rem);
  --gutter:clamp(1rem,1.6vw,1.5rem);
  --ancho-max:90rem;
  --u:.5rem; --s-2:1rem; --s-3:1.5rem; --s-4:2rem; --s-6:3rem; --s-8:4rem; --s-12:6rem; --s-16:8rem;
  --seccion-y:clamp(6rem,12vh,10rem);
  --header-h:5.25rem;

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-inout:cubic-bezier(.65,0,.35,1);
  --d-micro:180ms; --d-base:420ms; --d-reveal:820ms;
  --stagger-palabra:70ms; --stagger-item:90ms;
  --deriva-max:6vh;
  --bd:0s;                     /* retardo del hero: lo fija el boot */
}
@media(min-width:1920px){html{font-size:calc(100vw / 120);}}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;background:var(--negro);color:var(--blanco);scroll-behavior:auto;}
body{margin:0;font-family:var(--font);font-weight:300;line-height:1.5;background:var(--negro);color:var(--blanco);
  overflow-x:clip;-webkit-font-smoothing:antialiased;}
img,svg,picture{display:block;max-width:100%;}
img{height:auto;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,p,ul,ol{margin:0;}
ul,ol{padding:0;list-style:none;}
:focus-visible{outline:2px solid var(--blanco);outline-offset:3px;}
::selection{background:var(--dorado);color:#000;}
.skip{position:absolute;left:-999px;top:.75rem;z-index:300;background:var(--dorado);color:#000;padding:.6rem 1rem;font-weight:600;}
.skip:focus{left:.75rem;}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.wrap{width:100%;max-width:calc(var(--ancho-max) + 2*var(--margen));margin:0 auto;padding-left:var(--margen);padding-right:var(--margen);}
.g2{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:calc(var(--gutter) * 3);row-gap:var(--s-4);align-items:start;}
@media(max-width:1023px){.g2{grid-template-columns:1fr;}}
.grano{position:fixed;inset:0;z-index:9;background:url("../img/grano-128.png");opacity:.03;mix-blend-mode:overlay;pointer-events:none;}
.solo-movil{display:none;}
@media(max-width:1023px){.solo-movil{display:block;}}

/* ---------- vocabulario ---------- */
.kicker{font-weight:600;font-size:var(--t-etiqueta);line-height:1.2;letter-spacing:.18em;text-transform:uppercase;color:var(--dorado);margin-bottom:var(--s-3);}
.etiqueta{font-weight:600;font-size:var(--t-etiqueta);line-height:1.2;letter-spacing:.18em;text-transform:uppercase;color:var(--gris);}
.rc{font-weight:600;font-size:var(--t-etiqueta);letter-spacing:.18em;text-transform:uppercase;color:var(--gris);font-variant-numeric:tabular-nums;white-space:nowrap;}
.lead{font-weight:300;font-size:var(--t-lead);line-height:1.5;color:var(--blanco-80);max-width:56ch;text-wrap:pretty;}
.cuerpo{font-weight:400;font-size:var(--t-cuerpo);line-height:1.6;color:var(--blanco-80);max-width:60ch;text-wrap:pretty;}
.frase{font-weight:600;font-size:var(--t-frase);line-height:1.12;letter-spacing:-.01em;text-wrap:balance;}
.num{font-weight:300;font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.04em;line-height:.9;}
.q{color:var(--dorado);font-weight:inherit;}
.regla{display:block;width:clamp(4rem,8vw,7.5rem);height:3px;background:var(--gris);margin:var(--s-2) 0 var(--s-4);
  transform:scaleX(0);transform-origin:left;transition:transform var(--d-reveal) var(--ease-out),background var(--d-base) var(--ease-out);}
.regla.in{transform:none;}
.activa .regla{background:var(--dorado);}
/* rombo como bala y como punto final */
.pt{display:inline-block;width:.18em;height:.18em;background:var(--dorado);transform:rotate(45deg);margin-left:.1em;vertical-align:.02em;}
.bala,.lista-bala li,.frases li{display:flex;align-items:flex-start;gap:1.1rem;}
.bala::before,.lista-bala li::before,.frases li::before{content:"";flex:none;width:.56rem;height:.56rem;background:var(--dorado);transform:rotate(45deg);margin-top:.55em;}
.lista-bala{margin-top:var(--s-6);display:flex;flex-direction:column;gap:var(--s-2);}
.lista-bala li{font-weight:600;font-size:var(--t-lead);line-height:1.35;color:var(--blanco);}
.orn{position:absolute;left:-7vw;top:-6vw;width:28vw;height:auto;aspect-ratio:401/347;color:var(--dorado);z-index:0;pointer-events:none;opacity:.9;}
@media(max-width:767px){.orn{width:48vw;left:-14vw;top:-12vw;}}

/* CTA primario: dorado, sin radio, rombo como bala. Sin imán: la marca no coquetea. */
.cta{display:inline-flex;align-items:center;justify-content:space-between;gap:.9rem;background:var(--dorado);color:#000;
  font-weight:600;font-size:var(--t-boton);line-height:1;letter-spacing:.06em;text-transform:uppercase;padding:1.25rem 1.75rem;min-height:3.5rem;
  transition:background var(--d-micro) var(--ease-out),box-shadow var(--d-micro) var(--ease-out),transform var(--d-micro) var(--ease-out);}
.cta i{width:.5rem;height:.5rem;background:#000;transform:rotate(45deg);flex:none;}
.cta:hover,.cta:focus-visible{background:var(--dorado-hover);box-shadow:0 0 0 6px var(--dorado-24);transform:translateY(-2px);}
@media(max-width:767px){.cta{width:100%;font-size:.875rem;padding:1.125rem 1.25rem;}}
.cta2{font-weight:600;font-size:var(--t-etiqueta);line-height:1;letter-spacing:.18em;text-transform:uppercase;color:var(--blanco);
  border:1px solid var(--blanco-12);padding:.875rem 1.125rem;transition:border-color var(--d-micro) var(--ease-out);white-space:nowrap;}
.cta2:hover,.cta2:focus-visible{border-color:var(--blanco);}

/* ---------- header ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:40;height:var(--header-h);display:flex;align-items:center;
  transition:transform var(--d-base) var(--ease-out),background var(--d-base) var(--ease-out);}
header.solid{background:rgba(20,20,20,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
header.tuck{transform:translateY(-101%);}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);}
.logo{display:block;width:7rem;color:var(--blanco);}
.logo img{width:100%;height:auto;}
nav{display:flex;align-items:center;gap:var(--s-4);}
nav a:not(.cta2){font-weight:600;font-size:var(--t-etiqueta);letter-spacing:.18em;text-transform:uppercase;color:var(--blanco-56);position:relative;padding:.4rem 0;transition:color var(--d-micro);}
nav a:not(.cta2)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--dorado);transform:scaleX(0);transform-origin:right;transition:transform var(--d-base) var(--ease-out);}
nav a:not(.cta2):hover{color:var(--blanco);}
nav a:not(.cta2):hover::after,nav a:not(.cta2):focus-visible::after{transform:scaleX(1);transform-origin:left;}
@media(max-width:1023px){nav a:not(.cta2){display:none;}.logo{width:6rem;}}

/* ---------- rail: el rombo baja con el progreso, gira en cada tick, se rellena al final ---------- */
.railp{position:fixed;right:1.75rem;top:50%;z-index:30;width:1px;height:44vh;transform:translateY(-50%);background:var(--blanco-12);pointer-events:none;}
.railp .rail-fill{position:absolute;inset:0;background:var(--dorado);clip-path:inset(0 0 100% 0);}
.railp .ticks{position:absolute;left:-.2rem;top:0;bottom:0;width:.4rem;display:flex;flex-direction:column;justify-content:space-between;}
.railp .ticks i{display:block;width:100%;height:1px;background:var(--blanco-56);}
.railp .rail-mark{position:absolute;left:50%;top:0;width:.625rem;height:.625rem;margin:-.3125rem 0 0 -.3125rem;color:var(--dorado);
  transform:translate3d(0,var(--ry,0px),0) rotate(var(--rr,0deg));transition:transform var(--d-micro) linear;}
.railp .rail-mark svg{position:absolute;inset:0;width:100%;height:100%;transition:opacity 200ms var(--ease-out);}
.railp .rail-mark .rm-lleno{opacity:0;}
.railp.full .rail-mark .rm-lleno{opacity:1;}
@media(max-width:1023px){.railp{display:none;}}

/* ---------- reveals: por TIEMPO (IO), nunca por progreso de scroll ---------- */
html.js .rv{opacity:0;transform:translateY(.75rem);transition:opacity var(--d-reveal) var(--ease-out),transform var(--d-reveal) var(--ease-out);
  transition-delay:calc(var(--d,0) * var(--stagger-item));}
html.js .rv.in{opacity:1;transform:none;}
html.js .regla.rv{opacity:1;transform:scaleX(0);}
html.js .regla.rv.in{transform:none;}
/* título partido por palabras (el motor parte h2.sec en .w > i) */
h2.sec{font-weight:700;font-size:var(--t-titulo);line-height:1;letter-spacing:-.02em;text-transform:uppercase;text-wrap:balance;position:relative;max-width:20ch;}
h2.sec.kin{opacity:1!important;transform:none!important;}
h2.sec .w{display:inline-block;overflow:clip;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em;}
h2.sec .w i{display:inline-block;font-style:normal;transform:translateY(110%);
  transition:transform var(--d-reveal) var(--ease-out);transition-delay:calc(var(--i,0) * var(--stagger-palabra));}
h2.sec.in .w i{transform:none;}

/* ---------- escenas pinned ---------- */
.scene{position:relative;z-index:1;}
.scene-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--negro);}
.foto{position:absolute;inset:0;z-index:0;}
.foto picture,.foto img{width:100%;height:100%;}
.foto img{object-fit:cover;filter:saturate(.92);}
.scrim{position:absolute;inset:0;z-index:1;background:var(--scrim-h);pointer-events:none;}
@media(max-width:1023px){.scrim{background:var(--scrim-v);}}

/* =====================================================================
   0. BOOT — los rombos se dibujan, aparece el wordmark, el overlay sube
   ===================================================================== */
html:not(.booting) #boot{display:none;}
#boot{position:fixed;inset:0;z-index:200;background:var(--negro);display:flex;align-items:center;justify-content:center;pointer-events:none;
  animation:bootout .5s var(--ease-inout) 1s both;}
@keyframes bootout{to{clip-path:inset(0 0 100% 0);}}
#boot .brom{position:absolute;left:-4vw;top:-3vw;width:22vw;height:auto;color:var(--dorado);}
#boot .brom path{stroke-dasharray:1200;stroke-dashoffset:1200;animation:draw .6s var(--ease-inout) both;}
#boot .brom path:nth-child(2){animation-delay:.12s;}
@keyframes draw{to{stroke-dashoffset:0;}}
#boot .bword{width:min(28vw,23.75rem);height:auto;opacity:0;animation:fadein .3s var(--ease-out) .25s both;}
@keyframes fadein{to{opacity:1;}}
html.booting{--bd:1.15s;}

/* =====================================================================
   1. HERO — vender (cosas caen, cifras sueltas) · pinned 280vh en desktop
   ===================================================================== */
#hero{height:280vh;}
#hero .scene-sticky{overflow:clip;}
.hfoto{position:absolute;inset:0 0 0 30%;z-index:0;background-size:cover;background-position:78% 55%;transform:translate3d(0,var(--hy,0px),0);will-change:transform;}
.hfoto picture,.hfoto img{width:100%;height:100%;}
.hfoto img{object-fit:cover;object-position:78% 55%;filter:saturate(.92);}
.hfoto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.7) 22%,rgba(0,0,0,.25) 48%,rgba(0,0,0,0) 70%);}
.digitos{position:absolute;left:calc(var(--margen) + 46%);top:18%;z-index:1;font-weight:600;font-size:var(--t-etiqueta);line-height:1.9;letter-spacing:.18em;
  color:rgba(255,255,255,var(--dop,.12));font-variant-numeric:tabular-nums;white-space:pre;pointer-events:none;}
.digitos .fila{display:block;transform:translate3d(0,var(--dy,0px),0);will-change:transform;}
.digitos .dregla{position:absolute;left:0;bottom:-.4rem;width:14rem;height:1px;background:var(--gris);transform:scaleX(var(--dr,0));transform-origin:left;}
.hgrid{position:relative;z-index:2;height:100%;display:grid;grid-template-columns:minmax(0,9fr) minmax(0,3fr);align-items:center;padding-top:var(--header-h);}
.htxt{grid-column:1;}
h1{font-weight:900;font-size:var(--t-hero);line-height:.92;letter-spacing:-.03em;text-transform:uppercase;}
h1 .hl{display:block;overflow:clip;padding-bottom:.08em;margin-bottom:-.08em;}
h1 .hl > span{display:block;transform:translateY(110%);animation:rise .82s var(--ease-out) both;}
h1 .hl:nth-child(1) > span{animation-delay:calc(var(--bd) + 0ms);}
h1 .hl:nth-child(2) > span{animation-delay:calc(var(--bd) + 70ms);}
h1 .hl:nth-child(3) > span{animation-delay:calc(var(--bd) + 140ms);}
h1 .hl:nth-child(4) > span{animation-delay:calc(var(--bd) + 210ms);}
h1 .hl:nth-child(5) > span{animation-delay:calc(var(--bd) + 280ms);}
@keyframes rise{to{transform:none;}}
h1 .pt{opacity:0;transform:rotate(-45deg);animation:ptin .2s var(--ease-out) calc(var(--bd) + .7s) both;}
@keyframes ptin{to{opacity:1;transform:rotate(45deg);}}
.hlead{margin-top:var(--s-4);opacity:0;animation:fadein .6s var(--ease-out) calc(var(--bd) + .5s) both;}
.hlead b{display:block;font-weight:600;color:var(--blanco);margin-bottom:.5rem;}
.hcta{margin-top:var(--s-4);opacity:0;animation:fadein .6s var(--ease-out) calc(var(--bd) + .6s) both;}
@media(max-width:1023px){
  #hero{height:auto;}
  #hero .scene-sticky{position:relative;height:auto;min-height:100svh;}
  .hfoto{inset:0 0 auto 0;height:58vh;background-position:50% 40%;transform:none!important;}
  .hfoto img{object-position:50% 40%;}
  .hfoto::after{background:var(--scrim-v);}
  .digitos{display:none;}
  .hgrid{grid-template-columns:1fr;height:auto;padding-top:46vh;padding-bottom:var(--s-8);align-items:end;}
  .hlead{margin-top:var(--s-3);}
  .hcta{margin-top:var(--s-3);}
}

/* =====================================================================
   2. EL HUMO SE ABRE — la foto borrosa; adentro del rombo, nítida
   ===================================================================== */
#sc-humo{height:330vh;}
#sc-humo .humo img{filter:blur(6px) saturate(.92) brightness(.45);transform:scale(1.04);}
#sc-humo .nitida{clip-path:var(--pol,polygon(65% 60%,65% 60%,65% 60%,65% 60%));}
#sc-humo .lente{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;}
.sgrid{position:relative;z-index:2;height:100%;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;padding-top:var(--header-h);}
.stxt{grid-column:1;}
.frases{margin-top:var(--s-4);display:flex;flex-direction:column;gap:.6rem;}
.frases li{font-weight:600;font-size:var(--t-frase);line-height:1.12;letter-spacing:-.01em;align-items:center;
  opacity:0;transform:translateY(.75rem);transition:opacity var(--d-base) var(--ease-out),transform var(--d-base) var(--ease-out);}
.frases li::before{margin-top:0;}
.frases li.on{opacity:1;transform:none;}
.frases .scr.scrambling{color:var(--blanco-12);font-variant-numeric:tabular-nums;letter-spacing:.08em;}
@media(max-width:1023px){
  #sc-humo{height:280vh;}
  #sc-humo .humo img{filter:blur(4px) saturate(.92) brightness(.45);}
  .sgrid{grid-template-columns:1fr;align-items:start;padding-top:calc(var(--header-h) + var(--s-2));}
  .frases{margin-top:var(--s-3);}
}

/* =====================================================================
   3. LA MESA — seis áreas se ponen sobre la línea, en orden
   ===================================================================== */
#sc-mesa{height:280vh;}
.mtop{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-4);padding-top:calc(var(--header-h) + var(--s-2));}
.mtop .rc{margin-top:.5rem;}
.mesa-linea{position:absolute;left:var(--margen);right:var(--margen);top:50%;height:1px;background:var(--blanco-12);z-index:1;}
.mesa-linea .tick{position:absolute;top:-.375rem;width:1.5px;height:.75rem;background:var(--dorado);transform:scaleY(0);transform-origin:bottom;transition:transform var(--d-micro) var(--ease-out);}
.mesa-linea .tick:nth-child(1){left:8.33%;}.mesa-linea .tick:nth-child(2){left:25%;}.mesa-linea .tick:nth-child(3){left:41.66%;}
.mesa-linea .tick:nth-child(4){left:58.33%;}.mesa-linea .tick:nth-child(5){left:75%;}.mesa-linea .tick:nth-child(6){left:91.66%;}
.mesa-linea .tick.on{transform:none;}
.pista{position:absolute;left:0;right:0;top:50%;z-index:2;display:flex;gap:var(--s-8);padding:var(--s-4) var(--margen) 0;
  transform:translate3d(var(--rx,0px),0,0);will-change:transform;}
.area{flex:none;width:clamp(17.5rem,26vw,25rem);padding:var(--s-3) var(--s-2) var(--s-3) 0;transition:background var(--d-micro) var(--ease-out);}
.area .num{display:block;font-size:clamp(3.5rem,1.5rem + 8vw,9rem);color:var(--blanco);opacity:.28;transform:translate3d(var(--nx,0px),0,0);will-change:transform;
  transition:color var(--d-base) var(--ease-out),opacity var(--d-base) var(--ease-out);}
.area.on .num{color:var(--dorado);opacity:1;}
.area .kick{font-weight:600;font-size:var(--t-etiqueta);letter-spacing:.18em;text-transform:uppercase;color:var(--dorado);margin-top:var(--s-2);}
.area .cuerpo{margin-top:.6rem;}
@media(max-width:767px){
  #sc-mesa{height:auto;}
  #sc-mesa .scene-sticky{position:relative;height:auto;overflow:visible;}
  .mtop{padding-top:var(--seccion-y);}
  #mesa-count{display:none;}
  .mesa-linea{display:none;}
  .pista{position:static;flex-direction:column;gap:0;padding:var(--s-6) var(--margen) var(--seccion-y);transform:none!important;}
  .area{width:auto;display:grid;grid-template-columns:4rem minmax(0,1fr);column-gap:var(--s-3);border-top:1px solid var(--blanco-12);padding:var(--s-4) 0;}
  .area .num{grid-row:1 / span 2;font-size:3.5rem;opacity:.5;transform:none!important;}
  .area .kick{margin-top:.25rem;}
  .area:last-child{border-bottom:1px solid var(--blanco-12);}
}

/* =====================================================================
   4. LA CUENTA QUE CIERRA EN LOOP — cinco pasos, la línea vuelve al principio
   ===================================================================== */
#sc-proc{height:330vh;}
.ptop{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-4);padding-top:calc(var(--header-h) + var(--s-2));}
.ptop .frase{color:var(--dorado);font-size:var(--t-lead);}
.pasos-wrap{position:absolute;left:0;right:0;top:56%;z-index:2;padding-bottom:var(--s-8);}
.pasos{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-2);}
.paso{display:flex;flex-direction:column;align-items:center;gap:.5rem;}
.paso .num{font-size:clamp(3rem,1.5rem + 6vw,8rem);color:var(--blanco);opacity:.28;transition:color var(--d-base) var(--ease-out),opacity var(--d-base) var(--ease-out);}
.paso .verbo{font-weight:600;font-size:clamp(.95rem,.55rem + 1.2vw,1.75rem);letter-spacing:.04em;text-transform:uppercase;color:var(--blanco-56);transition:color var(--d-base) var(--ease-out);}
.paso.on .num{color:var(--dorado);opacity:1;}
.paso.on .verbo{color:var(--blanco);}
.loop{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;}
.loop-mark{color:var(--dorado);opacity:var(--lo,0);transform:translate(var(--lx,0px),var(--ly,0px));}
@media(max-width:767px){
  #sc-proc{height:260vh;}
  .pasos-wrap{top:auto;bottom:var(--s-6);padding-bottom:0;}
  .pasos{flex-direction:column;align-items:flex-start;gap:var(--s-2);}
  .paso{flex-direction:row;align-items:center;gap:var(--s-3);padding-left:var(--s-3);}
  .paso .num{font-size:2.75rem;width:2.5rem;text-align:center;}
}

#proc-txt{padding:var(--seccion-y) 0;}
#proc-txt .frase{margin-bottom:var(--s-2);}
#proc-txt .lead + p{margin-top:var(--s-4);}

/* =====================================================================
   5. EL NIVEL DEL VASO — una pregunta a la vez
   ===================================================================== */
#sc-preg{height:280vh;}
#sc-preg .vaso{inset:0 0 0 45%;}
#sc-preg .vaso img{object-position:70% 68%;}
.nivel{position:absolute;left:14%;right:22%;top:var(--lv,55%);height:1px;background:var(--dorado);transition:top var(--d-base) var(--ease-inout);}
.nivel svg{position:absolute;right:-.2rem;top:-.2rem;width:.4rem;height:.4rem;color:var(--dorado);}
.qgrid{position:relative;z-index:2;height:100%;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;padding-top:var(--header-h);}
.qtxt{grid-column:1;}
.preg-stage{position:relative;margin-top:var(--s-6);min-height:8.5em;}
.preg-stage .rc{display:block;margin-bottom:var(--s-2);}
.pregunta{position:absolute;left:0;right:0;top:2.4rem;font-weight:600;font-size:var(--t-frase);line-height:1.12;letter-spacing:-.01em;text-wrap:balance;
  opacity:0;transform:translateY(1.5rem);transition:opacity 320ms var(--ease-out),transform 320ms var(--ease-out);}
.pregunta.on{opacity:1;transform:none;}
.pregunta.gone{transform:translateY(-1.5rem);}
@media(max-width:1023px){
  #sc-preg .vaso{inset:0 0 auto 0;height:46vh;}
  #sc-preg .vaso img{object-position:50% 60%;}
  .qgrid{grid-template-columns:1fr;align-items:start;padding-top:calc(46vh - var(--s-4));}
  .preg-stage{margin-top:var(--s-3);min-height:7em;}
}
#preg-lista{padding:var(--seccion-y) 0;}
.qlist{display:flex;flex-direction:column;}
.qlist li{display:flex;gap:var(--s-3);align-items:baseline;padding:.9rem 0;border-top:1px solid var(--blanco-12);font-weight:400;font-size:var(--t-cuerpo);color:var(--blanco-56);}
.qlist li:last-child{border-bottom:1px solid var(--blanco-12);}
.qlist .n{font-weight:600;font-size:var(--t-etiqueta);letter-spacing:.18em;color:var(--dorado);font-variant-numeric:tabular-nums;flex:none;}
#preg-lista .frase.bala{color:var(--blanco);}

/* =====================================================================
   6. LA SUMA — retrato + tres líneas con el «+» dorado
   ===================================================================== */
#quien{padding:var(--seccion-y) 0;}
.quien-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start;}
.retrato{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--negro-2);}
/* el clip va en <picture>, no en .retrato: un IntersectionObserver sobre un elemento clipeado a 0 nunca dispara */
.retrato picture{position:absolute;inset:0;clip-path:inset(0 0 100% 0);transition:clip-path 1.2s var(--ease-inout);}
.retrato.in picture{clip-path:inset(0 0 0 0);}
.retrato img{width:100%;height:100%;object-fit:cover;object-position:45% 30%;filter:saturate(.92);transform:translate(0,var(--fy,0px)) scale(1.1);}
.suma .l{display:block;font-weight:700;font-size:var(--t-titulo);line-height:1;letter-spacing:-.02em;text-transform:uppercase;}
.suma .mas{display:inline-block;font-weight:300;color:var(--dorado);transform:rotate(45deg);transition:transform var(--d-base) var(--ease-out);}
.suma .l:nth-child(2) .mas{transition-delay:120ms;}
.suma .l:nth-child(3) .mas{transition-delay:240ms;}
.suma.in .mas{transform:none;}
#quien .frase{margin-top:var(--s-2);}
#quien .etiqueta{margin-top:.5rem;}
#quien .cuerpo{margin-top:var(--s-3);}
@media(max-width:1023px){.quien-grid{grid-template-columns:1fr;}.retrato{aspect-ratio:1/1;}.retrato img{object-position:50% 30%;}}

/* =====================================================================
   7. CUATRO CERTEZAS — grilla 2×2, solo lo que el cliente afirma
   ===================================================================== */
#plan{position:relative;padding:var(--seccion-y) 0;overflow:clip;}
#plan .wrap{position:relative;z-index:1;}
.tres .l{display:block;font-weight:700;font-size:var(--t-titulo);line-height:1.05;letter-spacing:-.02em;text-transform:uppercase;}
.plan-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--blanco-12);border:1px solid var(--blanco-12);margin-top:var(--s-6);}
.cell{background:var(--negro);padding:var(--s-4);min-height:16rem;display:flex;flex-direction:column;justify-content:flex-end;gap:.5rem;transition:background var(--d-micro) var(--ease-out),transform var(--d-micro) var(--ease-out);}
.cell:hover{background:var(--blanco-06);}
.cell .k.num{font-size:clamp(3rem,1.5rem + 6vw,7rem);color:var(--blanco);}
.cell .k.frase{font-weight:600;font-size:var(--t-frase);margin-bottom:.4rem;}
.cell .kick{font-weight:600;font-size:var(--t-etiqueta);letter-spacing:.18em;text-transform:uppercase;color:var(--dorado);}
.cell .cuerpo{margin-top:.5rem;}
@media(max-width:767px){.plan-grid{grid-template-columns:1fr;}.cell{min-height:0;padding:var(--s-3);}}

/* =====================================================================
   8. EL RUBRO EN FILA — marquee al ritmo del scroll · 8b logos
   ===================================================================== */
#quien-es{padding:var(--seccion-y) 0 0;}
.marquee{border-top:1px solid var(--blanco-12);overflow:hidden;padding:var(--s-3) 0;white-space:nowrap;}
.marquee.rev{border-bottom:1px solid var(--blanco-12);}
.marquee .track{display:inline-block;animation:mq 34s linear infinite;}
.marquee.rev .track{animation-direction:reverse;}
@keyframes mq{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.marquee.js-mq .track{animation:none!important;will-change:transform;}
.marquee .track span{display:inline-flex;align-items:center;gap:var(--s-3);padding-right:var(--s-3);font-weight:600;font-size:var(--t-frase);line-height:1;letter-spacing:-.01em;color:var(--blanco);}
.marquee .track .sep{display:inline-block;width:.5rem;height:.5rem;background:var(--dorado);transform:rotate(45deg);flex:none;}
#quien-es .desde{padding:var(--s-6) 0 0;}
#clientes{padding:var(--seccion-y) 0;}
.logos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-6) var(--s-4);margin-top:var(--s-4);}
.logos li{height:6.25rem;display:flex;align-items:center;justify-content:center;}
.logos img{opacity:.72;max-height:100%;width:auto;transition:opacity var(--d-micro) var(--ease-out);}
.logos li:hover img,.logos li:focus-within img{opacity:1;}
@media(max-width:767px){.logos{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4) var(--s-2);}.logos li{height:5rem;}.logos img{max-width:90%;}}

/* =====================================================================
   9. LA CUENTA CIERRA — la única sección centrada
   ===================================================================== */
#sc-cierre{height:280vh;}
.cierre{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding-top:var(--header-h);}
#h-cierre .l1,#h-cierre .l2{display:block;font-weight:900;font-size:var(--t-hero);line-height:.92;letter-spacing:-.03em;text-transform:uppercase;}
#h-cierre .l1{transition:color var(--d-base) var(--ease-out);}
#h-cierre .l1.dim{color:var(--blanco-56);}
#h-cierre .hl{display:inline-block;overflow:clip;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em;}
#h-cierre .hl > span{display:inline-block;transform:translateY(110%);transition:transform var(--d-reveal) var(--ease-out);}
#h-cierre .l1 .hl:nth-child(2) > span{transition-delay:70ms;}
#h-cierre .l1 .hl:nth-child(3) > span{transition-delay:140ms;}
#h-cierre .l1 .hl:nth-child(4) > span{transition-delay:210ms;}
#h-cierre.in .l1 .hl > span,#h-cierre .l2.on .hl > span{transform:none;}
.rent{position:relative;font-weight:900;transition:color var(--d-base) var(--ease-out);}
.rent.on{color:var(--dorado);}
.rrule{position:absolute;left:0;right:0;bottom:-.06em;height:.06em;background:var(--dorado);transform:scaleX(var(--rs,0));transform-origin:left;}
.rent.done .rrule{transform:scaleX(1);transition:transform var(--d-base) var(--ease-out);}
.cfin{margin-top:var(--s-6);display:flex;flex-direction:column;align-items:center;gap:var(--s-3);opacity:0;transform:translateY(.75rem);
  transition:opacity var(--d-reveal) var(--ease-out),transform var(--d-reveal) var(--ease-out);}
.cfin.on{opacity:1;transform:none;}
.cfin .lead{text-align:center;}
@media(max-width:767px){.cfin .cta{width:auto;}}

footer{border-top:1px solid var(--blanco-12);padding:var(--s-6) 0;}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);flex-wrap:wrap;}
footer .slogan{font-weight:400;font-size:var(--t-cuerpo);letter-spacing:.02em;}
footer .slogan b{font-weight:700;}

/* =====================================================================
   REDUCED MOTION — todo visible, estático y legible; nada clipeado
   ===================================================================== */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;}
  #boot{display:none!important;}
  .grano{display:none;}
  html.js .rv,html.js .regla.rv{opacity:1;transform:none;}
  h2.sec .w i,h1 .hl > span,#h-cierre .hl > span{transform:none!important;}
  h1 .pt{opacity:1;transform:rotate(45deg);}
  .hlead,.hcta,.cfin,.frases li,.pregunta{opacity:1!important;transform:none!important;}
  header.tuck{transform:none;}
  .railp{display:none;}
  .scene{height:auto!important;}
  .scene-sticky{position:static;height:auto;overflow:visible;}
  .hfoto{transform:none!important;}
  .digitos{display:none;}
  .hgrid,.sgrid,.qgrid,.cierre{height:auto;min-height:100svh;padding-bottom:var(--s-8);}
  #sc-humo .humo{display:none;}
  #sc-humo .nitida{clip-path:none!important;}
  #sc-humo .lente{display:none;}
  .mtop{padding-top:var(--seccion-y);}
  .mesa-linea{display:none;}
  .pista{position:static;flex-wrap:wrap;transform:none!important;padding-bottom:var(--seccion-y);}
  .area .num{transform:none!important;opacity:.5;}
  .pasos-wrap{position:static;padding:var(--s-8) var(--margen);}
  .paso .num{opacity:1;color:var(--dorado);}
  .paso .verbo{color:var(--blanco);}
  .loop{display:none;}
  .pregunta{position:static;margin-top:var(--s-2);}
  .preg-stage{min-height:0;}
  .nivel{display:none;}
  .retrato picture{clip-path:none!important;}
  .retrato img{transform:none!important;}
  .suma .mas{transform:none!important;}
  .marquee{white-space:normal;}
  .marquee .track{animation:none!important;transform:none!important;white-space:normal;}
  #h-cierre .l1.dim{color:var(--blanco);}
  .rent{color:var(--dorado);}
  .rrule{transform:scaleX(1);}
}
@media(prefers-contrast:more){:root{--blanco-80:#FFFFFF;--blanco-56:#CFCFCF;}}