/* ═══════════════════════════════════════════════════════════
   HOPPE STUDIO — Sistema de estilos
   Paleta: base oscura azulada + neutros + 1 acento (violeta eléctrico)
   El fondo animado vive detrás de TODA la página: las secciones
   son transparentes o usan velos semitransparentes, nunca colores sólidos.
   ═══════════════════════════════════════════════════════════ */

/* ───────── 1. TOKENS ───────── */
:root{
  --bg:          #080A11;
  --bg-2:        #0B0E17;
  --surface:     #10141F;
  --surface-2:   #161B29;
  --line:        rgba(255,255,255,.09);
  --line-strong: rgba(255,255,255,.16);

  --text:        #EEF1F7;
  --text-2:      #C3CAD9;
  --muted:       #8D96AC;

  --accent:      #7C5CFF;
  --accent-2:    #AC9BFF;
  --accent-deep: #4B31C7;
  --glow:        rgba(124,92,255,.38);
  --glow-soft:   rgba(124,92,255,.14);

  --font:  'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;

  /* La sans llena mucho más caja que la serif con el mismo cuerpo:
     estas escalas están calibradas para Inter, no para Instrument. */
  --fs-h1:  clamp(2.5rem, 6.4vw, 5.9rem);
  --fs-h2:  clamp(2.0rem, 4.7vw, 3.9rem);
  --fs-h3:  clamp(1.55rem, 3.2vw, 2.7rem);
  --fs-lead:clamp(1rem, 1.5vw, 1.28rem);

  --pad:    clamp(1.25rem, 5vw, 5rem);
  --maxw:   1320px;
  --radius: 18px;

  --ease:      cubic-bezier(.22,1,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);

  --header-h: 76px;

  /* Sombras del texto: profundidad constante + brillo de acento */
  --sh-depth: 0 8px 34px rgba(0,0,0,.65);
  --sh-lit:   0 0 26px rgba(124,92,255,.40);
  --sh-hover: 0 0 24px rgba(172,155,255,.9), 0 0 62px rgba(124,92,255,.45);
}

/* ───────── 2. RESET ───────── */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  background:var(--bg);
}
/* OJO: nada de overflow en html/body. Cualquier recorte acá rompe
   el position:sticky de la comparación antes/después. El desborde
   horizontal se controla en cada sección decorativa. */
html.lenis{ scroll-behavior:auto }
.lenis.lenis-smooth{ scroll-behavior:auto }
.lenis.lenis-stopped{ overflow:hidden }

body{
  font-family:var(--font);
  font-weight:400;
  line-height:1.6;
  color:var(--text);
  background:transparent;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
body.is-loading{ overflow:hidden; height:100vh }

img,svg,canvas,video{ display:block; max-width:100% }
img{ height:auto }
a{ color:inherit; text-decoration:none }
button,input,select,textarea{ font:inherit; color:inherit }
ul{ list-style:none }

::selection{ background:var(--accent); color:#fff }

:focus-visible{ outline:2px solid var(--accent-2); outline-offset:3px; border-radius:4px }

::-webkit-scrollbar{ width:10px }
::-webkit-scrollbar-track{ background:var(--bg) }
::-webkit-scrollbar-thumb{ background:#242a3a; border-radius:10px; border:3px solid var(--bg) }
::-webkit-scrollbar-thumb:hover{ background:var(--accent-deep) }

/* ═══════════════════════════════════════════
   3. FONDO ANIMADO GLOBAL
   ═══════════════════════════════════════════ */
.bg{
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:0;
  opacity:0;
  transition:opacity 1.4s var(--ease);
  pointer-events:none;
}
.bg.is-ready{ opacity:1 }

/* Respaldo en CSS puro: se activa si no hay WebGL o si el equipo es de gama baja.
   Solo anima transform/opacity, así que no cuesta nada. */
.bg-static{
  position:fixed; inset:-15%;
  z-index:0; display:none; pointer-events:none;
  background:
    radial-gradient(46% 40% at 22% 18%, rgba(124,92,255,.20), transparent 68%),
    radial-gradient(40% 36% at 78% 42%, rgba(75,49,199,.22), transparent 70%),
    radial-gradient(52% 44% at 42% 88%, rgba(124,92,255,.14), transparent 70%),
    linear-gradient(180deg,#0A0D16,#070910);
  animation:bgDrift 34s ease-in-out infinite alternate;
  will-change:transform;
}
.bg-fallback .bg-static{ display:block }
.bg-fallback .bg{ display:none }
@keyframes bgDrift{
  0%{ transform:translate3d(0,0,0) scale(1) }
  100%{ transform:translate3d(-3%,-4%,0) scale(1.08) }
}

/* Todo el contenido va por encima del fondo */
main{ position:relative; z-index:1 }

/* ───────── 4. UTILIDADES ───────── */
.container{
  width:100%; max-width:var(--maxw);
  margin-inline:auto; padding-inline:var(--pad);
}

/* Sólo para lectores de pantalla y buscadores */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

.eyebrow{
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent-2); font-weight:500;
  margin-bottom:1.4rem;
  display:flex; align-items:center; gap:.75rem;
  text-shadow:0 2px 16px rgba(8,10,17,.8);
}
.eyebrow::before{
  content:''; width:32px; height:1px;
  background:linear-gradient(90deg,var(--accent),transparent);
}

/* ── Los titulares van en serif de display ──
   Es el cambio que más levanta el nivel y no cuesta un byte: la
   Instrument Serif ya se bajaba para los acentos en bastardilla.
   Serif grande para titular + sans neutra para leer: ésa es la fórmula
   de todo lo que se ve caro.

   Ojo con el peso: la Instrument Serif viene sólo en 400. Pedirle 600
   hace que el navegador la engorde a mano y queda embarrada. Todo lo
   que use --serif tiene que declarar font-weight:400.

   Esto vive sólo en la landing propia. Las demos NO lo heredan: un
   consultorio odontológico en serif de display se leería a revista de
   moda, que es justo lo contrario de lo que ahí hay que vender. */
/* ── Por qué los titulares NO van enteros en serif ──
   Instrument Serif viene en un solo peso, el 400, y tiene los trazos
   finos. En blanco sobre fondo casi negro, a 90 px, el antialias se
   come medio trazo y el titular se lee gris y desganado: el color
   dice #EEF1F7 y el ojo ve gris. Probado y descartado.

   Queda entonces la fórmula que sí funciona: el bloque de la frase en
   la sans con peso, y la serif en bastardilla SÓLO en el remate. Dos
   voces, y la elegante entra justo donde hay que subrayar. */
.h2{
  font-weight:600;
  font-size:var(--fs-h2);
  line-height:1.02; letter-spacing:-.032em;
  margin-bottom:1.6rem; max-width:19ch;
}
.h3{ font-size:var(--fs-h3); font-weight:600; line-height:1.1; letter-spacing:-.03em }
.h3 em{ font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.01em }
.h2 em{
  font-family:var(--serif); font-style:italic; font-weight:400;
  color:var(--accent-2); letter-spacing:-.01em;
}

.lead{
  font-size:var(--fs-lead); color:var(--text-2);
  max-width:56ch; line-height:1.65; font-weight:300;
}
.lead em{ font-family:var(--serif); font-style:italic; color:var(--text); font-size:1.06em }

/* ── Sombras del texto ──
   Profundidad siempre; brillo de acento cuando el bloque entra en pantalla
   (clase .is-lit que agrega el scroll) y al pasar el mouse por cada palabra. */
.hero__title,.h2,.h3,.rubros__big,.legacy__punch,.step__body h4,.soon__card h4{
  text-shadow:var(--sh-depth);
}
.lead,.legacy__text p,.about__text p,.step__body p,.soon__card p,.soon__foot,.contact__list li,.lcard__txt{
  text-shadow:0 2px 14px rgba(8,10,17,.6);
}
.h-word,.hero__title .w{ transition:text-shadow .55s var(--ease) }
.split-lines.is-lit .h-word{ text-shadow:var(--sh-lit), var(--sh-depth) }
@media (hover:hover){
  .h-word:hover,.hero__title .w:hover{ text-shadow:var(--sh-hover), var(--sh-depth) }
}

/* ── Título que se arma letra por letra ──
   Las letras llegan desde los costados, separadas, y se juntan.
   Los espacios NO se parten (van dentro de .as-w) para que el título
   siga cortando por palabras en pantallas angostas. */
.assemble .as-w{ display:inline-block; white-space:nowrap }
.assemble .as-ch{ display:inline-block; will-change:transform, opacity }
.assemble.is-lit .as-ch{ text-shadow:var(--sh-lit), var(--sh-depth) }
.assemble .as-ch{ transition:text-shadow .55s var(--ease) }

/* Botones */
.btn{
  --btn-bg:var(--accent);
  position:relative; display:inline-flex;
  align-items:center; justify-content:center; gap:.5rem;
  padding:.85rem 1.6rem; border:0; border-radius:100px;
  background:var(--btn-bg); color:#fff;
  font-size:.9rem; font-weight:500; letter-spacing:-.01em;
  cursor:pointer; overflow:hidden; isolation:isolate; white-space:nowrap;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
  box-shadow:0 6px 26px -8px var(--glow);
  will-change:transform;
}
.btn span{ position:relative; z-index:2 }
.btn::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:radial-gradient(120% 140% at 50% 120%, #9d84ff 0%, var(--accent) 45%, var(--accent-deep) 100%);
  opacity:0; transition:opacity .45s var(--ease);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 14px 40px -10px var(--glow) }
.btn:hover::before{ opacity:1 }
.btn:active{ transform:translateY(0) scale(.985) }

.btn--lg{ padding:1.05rem 2.1rem; font-size:.98rem }
.btn--sm{ padding:.62rem 1.15rem; font-size:.82rem }
.btn--full{ width:100%; margin-top:.5rem }

/* ── Botón que late ──
   Doble pulso, como un latido. El resplandor viaja en el box-shadow y no
   en un pseudo-elemento porque .btn recorta lo de adentro (overflow:hidden).
   Al pasar el mouse el latido se corta del todo: así el :hover recupera su
   propio transform y el botón responde como cualquier otro. */
.btn--beat{ animation:btnBeat 2.6s var(--ease) infinite; transform-origin:50% 50% }
.btn--beat:hover,.btn--beat:focus-visible,.btn--beat:active{ animation:none }
@keyframes btnBeat{
  0%,64%,100%{ transform:scale(1);     box-shadow:0 6px 26px -8px var(--glow) }
  10%        { transform:scale(1.035); box-shadow:0 16px 48px -10px var(--glow) }
  22%        { transform:scale(.998);  box-shadow:0 6px 26px -8px var(--glow) }
  34%        { transform:scale(1.022); box-shadow:0 12px 40px -10px var(--glow) }
}

.btn--ghost{
  background:rgba(8,10,17,.35); border:1px solid var(--line-strong);
  color:var(--text); box-shadow:none; backdrop-filter:blur(8px);
}
.btn--ghost::before{ background:rgba(124,92,255,.16) }
.btn--ghost:hover{ border-color:var(--accent); box-shadow:0 10px 34px -14px var(--glow) }

/* ───────── 5. INTRO / PRELOADER ─────────
   La marca se arma con partículas en un canvas (intro.js) y después
   explota. Acá sólo vive el escenario: fondo, halo, barra y respaldo. */
.intro{
  position:fixed; inset:0; z-index:9999;
  display:grid; place-items:center; overflow:hidden;
  transition:opacity .5s .45s linear;
}
.intro__bg{
  position:absolute; inset:0;
  background:radial-gradient(130% 110% at 50% 45%, #101528 0%, #070910 60%, #05070D 100%);
  transition:opacity .7s var(--ease);
}
.intro__halo{
  position:absolute; width:min(820px,130vw); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,rgba(124,92,255,.30) 0%,transparent 62%);
  filter:blur(24px); opacity:0;
  animation:introHalo 2.4s var(--ease) .1s forwards;
  transition:opacity .6s var(--ease), transform .9s var(--ease);
}
@keyframes introHalo{
  0%{ opacity:0; transform:scale(.55) }
  60%{ opacity:1; transform:scale(1) }
  100%{ opacity:.8; transform:scale(1.1) }
}

.intro__canvas{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; transition:opacity .5s var(--ease);
}
.intro__canvas.is-ready{ opacity:1 }

/* Respaldo en texto: sólo con .is-plain */
.intro__plain{
  position:relative; z-index:2; display:none;
  flex-direction:column; align-items:center; gap:.5rem;
}
.intro.is-plain .intro__canvas{ display:none }
.intro.is-plain .intro__plain{ display:flex }
.intro__plain{ gap:clamp(1rem,3vh,1.8rem) }
.intro__plain svg{ width:clamp(84px,16vw,150px); height:auto }
.intro__plain span{
  font-size:clamp(1.35rem,4.5vw,2.1rem); font-weight:600; letter-spacing:-.02em;
  color:var(--text);
}
.intro__plain em{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--accent-2) }

.intro__ui{
  position:absolute; left:50%; bottom:clamp(3rem,12vh,7rem); translate:-50% 0;
  width:min(260px,60vw); text-align:center; z-index:3;
  transition:opacity .45s var(--ease);
}
.intro__bar{
  height:2px; width:100%;
  background:rgba(255,255,255,.08); border-radius:2px; overflow:hidden;
}
.intro__bar i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--accent-deep),var(--accent),var(--accent-2));
  box-shadow:0 0 18px var(--glow);
}
.intro__num{
  margin-top:.8rem; font-size:.66rem; letter-spacing:.24em;
  color:var(--muted); font-variant-numeric:tabular-nums;
}

/* Salida: el fondo se va antes que las partículas, así la explosión
   termina de disolverse ya sobre la página. */
.intro.is-out{ opacity:0; pointer-events:none }
.intro.is-out .intro__bg,
.intro.is-out .intro__halo,
.intro.is-out .intro__ui{ opacity:0 }
.intro.is-out .intro__halo{ transform:scale(1.5) }
.intro.is-out .intro__plain{ opacity:0; transition:opacity .5s var(--ease) }

/* ───────── 6. CURSOR ───────── */
.cursor{ display:none }
@media (hover:hover) and (pointer:fine){
  /* Sin mix-blend-mode a propósito: obliga a componer toda la página
     en una sola capa y tira abajo los 60 fps del scroll. */
  .cursor{ display:block; position:fixed; top:0; left:0; z-index:9998; pointer-events:none }
  .cursor__dot{
    position:absolute; width:6px; height:6px; margin:-3px 0 0 -3px;
    border-radius:50%; background:var(--accent-2);
    box-shadow:0 0 10px var(--glow);
    transition:opacity .3s; will-change:transform;
  }
  .cursor__ring{
    position:absolute; width:38px; height:38px; margin:-19px 0 0 -19px;
    border:1px solid rgba(226,230,240,.5); border-radius:50%;
    display:grid; place-items:center;
    transition:width .38s var(--ease), height .38s var(--ease),
               margin .38s var(--ease), background-color .38s var(--ease),
               border-color .38s var(--ease);
    will-change:transform;
  }
  .cursor__label{
    font-size:.6rem; letter-spacing:.12em; text-transform:uppercase;
    color:#0a0d15; opacity:0; transition:opacity .25s; white-space:nowrap; font-weight:500;
  }
  .cursor.is-link .cursor__ring{ width:56px; height:56px; margin:-28px 0 0 -28px; background:rgba(238,241,247,.92); border-color:transparent }
  .cursor.is-cta  .cursor__ring{ width:72px; height:72px; margin:-36px 0 0 -36px; background:var(--accent-2); border-color:transparent }
  .cursor.is-link .cursor__label,.cursor.is-cta .cursor__label{ opacity:1 }
  .cursor.is-link .cursor__dot,.cursor.is-cta .cursor__dot{ opacity:0 }
  .cursor.is-hidden{ opacity:0 }
}

/* ───────── 7. PROGRESO ───────── */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:2px;
  z-index:900; pointer-events:none;
}
.scroll-progress i{
  display:block; height:100%; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--accent-deep),var(--accent),var(--accent-2));
  box-shadow:0 0 12px var(--glow);
}

/* ───────── 8. HEADER ───────── */
.header{
  position:fixed; top:0; left:0; right:0; z-index:800;
  height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding-inline:var(--pad);
  transition:transform .5s var(--ease), background-color .5s var(--ease);
  will-change:transform;
}
.header.is-stuck{
  background:rgba(8,10,17,.66);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.header.is-hidden{ transform:translateY(-110%) }

.header__logo{ display:flex; align-items:center; gap:.55rem; font-size:1rem; font-weight:600; letter-spacing:-.02em }
/* El color de cada capa del monograma lo pone .hlogo__capa con --c. Acá
   había un color plano para el SVG suelto de antes: si volviera, ganaría
   sobre el de la capa —lo lleva el propio <svg>, que es donde se resuelve
   currentColor— y las cuatro capas saldrían del mismo violeta. */
.header__logo em{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--text-2) }

.header__nav{ display:flex; gap:2rem; font-size:.86rem; color:var(--text-2) }
.header__nav a{ position:relative; padding-block:.3rem; transition:color .3s }
.header__nav a::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:100% 50%;
  transition:transform .45s var(--ease);
}
.header__nav a:hover{ color:var(--text) }
.header__nav a:hover::after{ transform:scaleX(1); transform-origin:0 50% }

@media (max-width:860px){ .header__nav{ display:none } }

/* ═══════════════════════════════════════════
   9. HERO
   ═══════════════════════════════════════════ */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding-top:var(--header-h);
  overflow:hidden; isolation:isolate;
}
.hero__canvas-wrap{ position:absolute; inset:0; z-index:1; pointer-events:none }

/* ── La capa del planeta ──
   Fija a la ventana y fuera del hero, porque el efecto tiene que durar
   toda la página. Va con z-index 0 y ANTES que las secciones en el
   documento: entre elementos del mismo nivel manda el orden del
   documento, así que todo lo que viene después queda por encima sin
   tocar un solo z-index más.

   Requisito de eso: ninguna sección puede quedarse en position:static,
   o su contenido se pinta por debajo de esta capa. Ver abajo. */
.globo-wrap{ position:fixed; inset:0; z-index:0; pointer-events:none }
#heroCanvas{
  display:block; width:100%; height:100%;
  opacity:0; transition:opacity 1.2s var(--ease);
}
#heroCanvas.is-ready{ opacity:1 }

/* Las dos secciones que no tenían posición propia. Sin esto el planeta
   les pasa por encima al texto. */
.process,.about{ position:relative; z-index:1 }

.hero__fallback{ position:absolute; inset:0; display:none; place-items:center; perspective:1200px }
.hero__fallback.is-active{ display:grid }
.ff-layer{
  position:absolute; width:min(420px,62vw); aspect-ratio:4/5;
  border-radius:24px; border:1px solid var(--line-strong);
  background:linear-gradient(150deg,rgba(22,27,41,.9),rgba(11,14,23,.7));
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9);
  transform-style:preserve-3d; will-change:transform;
}
.ff-layer--1{ transform:translateZ(-120px) rotateX(52deg) rotateZ(-24deg) }
.ff-layer--2{ transform:translateZ(-40px)  rotateX(52deg) rotateZ(-24deg); background:linear-gradient(150deg,rgba(124,92,255,.16),transparent 60%) }
.ff-layer--3{ transform:translateZ(40px)   rotateX(52deg) rotateZ(-24deg); border-color:rgba(124,92,255,.3) }
.ff-layer--4{ transform:translateZ(120px)  rotateX(52deg) rotateZ(-24deg); background:radial-gradient(60% 60% at 50% 40%,var(--glow-soft),transparent 70%) }

/* El foco del mouse. Va sobre la grilla y debajo del texto. */
.hero__lux{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(420px 420px at var(--lx,50%) var(--ly,42%),
    rgba(124,92,255,.20), rgba(124,92,255,.06) 42%, transparent 72%);
  opacity:0; transition:opacity .8s var(--ease);
}
.hero.is-lux .hero__lux{ opacity:1 }

.hero__grid{
  position:absolute; inset:-10%; z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(70% 60% at 50% 45%, #000 0%, transparent 100%);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 45%, #000 0%, transparent 100%);
}

.hero__content{ position:relative; z-index:3; padding-block:2rem 7rem }

.hero__title{
  font-weight:600;
  font-size:var(--fs-h1);
  line-height:.98; letter-spacing:-.035em;
  /* Devuelve el aire que se comen dos cosas a la vez: el
     letter-spacing negativo, que también achica el espacio, y el
     latido de cada palabra (ver main.js). Sin esto el titular se lee
     "Hacemoslas mejores". */
  word-spacing:.07em;
  margin-bottom:1.6rem; max-width:15ch;
}
/* padding-bottom + margen negativo: el overflow:hidden del reveal
   no debe cortar descendentes (g, p, í) */
.hero__title .line{ display:block; overflow:hidden; padding-bottom:.16em; margin-bottom:-.14em }
/* El recorte sólo hace falta mientras las palabras suben desde abajo.
   Terminada la entrada se libera (initHero) para que el latido no
   quede cortado por arriba. */
.hero__title .line.is-open{ overflow:visible }
.hero__title .w{ display:inline-block; will-change:transform }
.hero__title em{
  font-family:var(--serif); font-style:italic; font-weight:400;
  background:linear-gradient(100deg,var(--accent-2) 0%, #fff 55%, var(--accent-2) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  letter-spacing:-.01em;
}

.hero__sub{
  font-size:var(--fs-lead); color:var(--text-2);
  max-width:48ch; font-weight:300; margin-bottom:2.4rem;
  text-shadow:0 2px 14px rgba(8,10,17,.6);
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:.9rem }

.hero__scroll-hint{
  position:absolute; z-index:3; left:50%; bottom:4.2rem; translate:-50% 0;
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  font-size:.64rem; letter-spacing:.28em; text-transform:uppercase; color:var(--muted);
}
.hero__scroll-hint i{
  width:1px; height:44px;
  background:linear-gradient(to bottom,var(--accent),transparent);
  animation:scrollLine 2.4s var(--ease) infinite; transform-origin:top;
}
@keyframes scrollLine{
  0%{ transform:scaleY(0); opacity:0 }
  35%{ transform:scaleY(1); opacity:1 }
  100%{ transform:scaleY(1) translateY(44px); opacity:0 }
}

.hero__marquee{
  position:absolute; bottom:0; left:0; right:0; z-index:3;
  padding-block:1.1rem; border-top:1px solid var(--line);
  background:linear-gradient(to top,rgba(8,10,17,.85),transparent);
  overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{
  display:flex; align-items:center; gap:1.6rem; width:max-content;
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  animation:marquee 34s linear infinite; will-change:transform;
}
.marquee__track b{ color:var(--accent) }
@keyframes marquee{ to{ transform:translateX(-50%) } }

@media (max-width:640px){
  .hero__scroll-hint{ display:none }
  .hero__title{ max-width:100% }
}

/* ═══════════════════════════════════════════
   10. PROBLEMA — comparación antes/ahora
   ═══════════════════════════════════════════ */
.problem{ position:relative; padding-block:clamp(4rem,8vw,7rem) 0 }
/* overflow-x:clip (no auto/hidden) recorta las letras que entran desde
   los costados sin crear caja de scroll ni romper el sticky de al lado */
.problem__intro{ margin-bottom:clamp(2.2rem,4.5vw,3.6rem); overflow-x:clip }
.problem__intro .h2{ max-width:14ch }

/* ── "¿Todavía no tenés una?" ──
   El cartel tiene que empujar a actuar, así que no se queda quieto: una luz
   da vueltas por el borde, la caja respira y el punto del título late.
   El truco del borde: un cono de luz gigante girando (::before) tapado por
   un relleno que deja libre 1 px de contorno (::after). */
.headstart{
  position:relative; isolation:isolate;
  margin-top:clamp(1.6rem,3vw,2.4rem);
  max-width:62ch; padding:clamp(1.2rem,2.6vw,1.75rem) clamp(1.3rem,2.8vw,2rem);
  border-radius:18px; overflow:hidden;
  animation:headGlow 4.4s var(--ease) infinite;
  transition:transform .5s var(--ease);
}
/* Cuadrado apenas más grande que la diagonal del cartel: al girar cubre
   todo el borde sin dejar esquinas vacías, y no se le pide a la placa de
   video una capa gigante (con inset:-150% serían varios megapíxeles). */
.headstart::before{
  content:''; position:absolute; z-index:0;
  left:50%; top:50%; translate:-50% -50%;
  width:max(150%,44rem); aspect-ratio:1;
  background:conic-gradient(from 0deg,
    transparent 0 58%,
    rgba(172,155,255,.35) 68%,
    var(--accent-2) 76%,
    var(--accent) 82%,
    rgba(124,92,255,.3) 88%,
    transparent 96% 100%);
  animation:headSpin 7s linear infinite;
}
.headstart::after{
  content:''; position:absolute; z-index:1; inset:1px; border-radius:17px;
  background:
    linear-gradient(150deg,rgba(124,92,255,.16),rgba(255,255,255,.02)),
    rgba(9,12,20,.82);
}
.headstart > *{ position:relative; z-index:2 }
.headstart:hover{ transform:translateY(-3px) }
@keyframes headSpin{ to{ rotate:360deg } }
@keyframes headGlow{
  0%,100%{ box-shadow:0 0 0 0 rgba(124,92,255,0),    0 22px 60px -34px #000 }
  50%    { box-shadow:0 0 52px -10px rgba(124,92,255,.32), 0 22px 60px -34px #000 }
}

.headstart__tag{
  display:inline-flex; align-items:center; gap:.55rem; margin-bottom:.85rem;
  font-size:.74rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-2);
  padding:.4rem .85rem .4rem .7rem; border-radius:100px;
  background:rgba(124,92,255,.12); border:1px solid rgba(124,92,255,.36);
}
/* Punto en vivo con su onda: lo mismo que usa el aviso de consulta nueva */
.headstart__tag i{
  position:relative; width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--accent-2); box-shadow:0 0 12px var(--glow);
}
.headstart__tag i::after{
  content:''; position:absolute; inset:-3px; border-radius:50%;
  border:1px solid var(--accent-2);
  animation:headPing 2.2s var(--ease) infinite;
}
@keyframes headPing{
  0%  { transform:scale(.6); opacity:.9 }
  70% { transform:scale(2.4); opacity:0 }
  100%{ transform:scale(2.4); opacity:0 }
}

.headstart__txt{
  color:var(--text-2); font-weight:300; line-height:1.7;
  font-size:clamp(.95rem,1.6vw,1.05rem); margin:0;
}
.headstart__txt + .headstart__txt{ margin-top:.85rem }
/* Cada palabra es una caja propia para poder girarla; el interlineado no
   cambia porque siguen siendo cajas en línea. */
.hs-w{ display:inline-block }
.headstart__txt em{ font-family:var(--serif); font-style:italic; color:var(--text); font-size:1.08em }
.headstart__txt strong{ color:var(--text); font-weight:500 }

.compare{ height:300vh; position:relative }
.compare__sticky{
  position:sticky; top:0; height:100svh;
  display:flex; flex-direction:column; justify-content:center; gap:clamp(1.2rem,3vw,2.4rem);
  padding:calc(var(--header-h) + 1rem) var(--pad) 2.5rem;
  /* Al girar, la caja del cuadro se ensancha hasta su diagonal. Va recortado
     acá y no en .compare: un overflow en el padre rompería el sticky.
     clip y no hidden, que además crearía caja de scroll. */
  overflow-x:clip;
}

.compare__stage{
  /* Achicado a propósito. A 1100 px se comía la pantalla entera y la
     sección se sentía una captura pegada, no una escena. Con 880 px
     queda aire arriba y abajo, y el planeta del fondo se ve pasar por
     los costados: eso es lo que la mete adentro de la página. */
  position:relative; width:100%; max-width:880px; margin-inline:auto;
  aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 50px 120px -50px #000;
  /* Este fondo casi no se ve: las dos caras van con inset:0 y lo tapan.
     Queda de respaldo. La transparencia de verdad está en .newsite. */
  background:var(--surface);
  --wipe:0%;
  /* El cuadro entra acercándose y se aleja con el scroll (ver initProblem).
     Se promociona a capa propia para que ese movimiento no repinte nada. */
  will-change:transform;
}
@media (max-width:760px){ .compare__stage{ aspect-ratio:4/3 } }

/* El lado nuevo se descubre desde la izquierda, así que su etiqueta va a la
   izquierda y la del viejo a la derecha. Los z-index encierran cada etiqueta
   en su propio lado: si no, la del "Antes" flota sobre el panel nuevo. */
.compare__side{ position:absolute; inset:0; z-index:1 }
.compare__side--new{ z-index:2; clip-path:inset(0 calc(100% - var(--wipe)) 0 0); will-change:clip-path }
/* Las dos etiquetas son el resumen de toda la sección, así que tienen que
   pesar. "Antes" queda apagado y gris a propósito; "Ahora" es lo único
   encendido del cuadro: violeta pleno, punto en vivo y un halo que respira.
   El contraste entre las dos es el argumento. */
.compare__tag{
  position:absolute; top:clamp(10px,1.5vw,16px); z-index:6;
  display:inline-flex; align-items:center; gap:.5em;
  font-size:clamp(.62rem,1.05vw,.8rem); font-weight:700; line-height:1;
  letter-spacing:.2em; text-transform:uppercase;
  padding:.55em 1em; border-radius:100px; backdrop-filter:blur(10px);
}
.compare__tag i{ width:.5em; height:.5em; border-radius:50%; flex:none; position:relative }

.compare__tag--old{
  right:clamp(10px,1.5vw,16px);
  background:rgba(0,0,0,.62); color:#9b937f;
  border:1px solid rgba(255,255,255,.12);
}
.compare__tag--old i{ background:#615c50 }

.compare__tag--new{
  left:clamp(10px,1.5vw,16px);
  color:#fff; text-shadow:0 1px 2px rgba(20,8,60,.5);
  background:linear-gradient(115deg,var(--accent) 0%,#6B45FF 55%,rgba(79,227,193,.75) 130%);
  border:1px solid rgba(255,255,255,.34);
  animation:tagAhora 3.2s var(--ease) infinite;
}
.compare__tag--new i{ background:#fff; box-shadow:0 0 10px rgba(255,255,255,.9) }
.compare__tag--new i::after{
  content:''; position:absolute; inset:-3px; border-radius:50%;
  border:1px solid #fff; animation:headPing 2.2s var(--ease) infinite;
}
@keyframes tagAhora{
  0%,100%{ box-shadow:0 0 0 0 rgba(124,92,255,.55), 0 6px 22px -8px rgba(124,92,255,.7) }
  50%    { box-shadow:0 0 0 6px rgba(124,92,255,0),  0 8px 30px -6px rgba(124,92,255,1) }
}

.compare__handle{
  position:absolute; top:0; bottom:0; z-index:7; left:var(--wipe);
  width:2px; margin-left:-1px;
  background:linear-gradient(to bottom,transparent,var(--accent),transparent);
  box-shadow:0 0 22px var(--glow); will-change:left;
}
.compare__handle i{
  position:absolute; top:50%; left:50%; translate:-50% -50%;
  width:38px; height:38px; border-radius:50%;
  background:var(--bg); border:1px solid var(--accent); box-shadow:0 0 26px var(--glow);
}
.compare__handle i::before,.compare__handle i::after{
  content:''; position:absolute; top:50%; width:0; height:0; border-block:4px solid transparent;
}
.compare__handle i::before{ left:9px; border-right:6px solid var(--accent-2); translate:0 -50% }
.compare__handle i::after{ right:9px; border-left:6px solid var(--accent-2); translate:0 -50% }

/* La malla 3D flota sobre los dos lados, pegada a la costura del barrido.
   Sin fondo propio: lo único que aporta son líneas de luz (ver morph.js). */
.compare__morph{
  position:absolute; z-index:5; pointer-events:none;
  left:50%; top:50%; translate:-50% -50%;
  width:min(62%,620px); aspect-ratio:16/10;
}

/* — Llegada del cuadro: encuadre, borde encendido y barrido de luz —
   Los tres los maneja la misma línea de tiempo del scroll (initProblem).
   Con --rim en 0 el borde no existe: no pinta nada hasta que se enciende. */
.compare__hud{ position:absolute; inset:12px; z-index:8; pointer-events:none }
.compare__hud i{
  position:absolute; width:clamp(18px,2.6vw,34px); aspect-ratio:1;
  border:2px solid var(--accent-2); opacity:0;
  box-shadow:0 0 18px var(--glow);
}
.compare__hud i:nth-child(1){ top:0;    left:0;  border-right:0; border-bottom:0; border-radius:10px 0 0 0 }
.compare__hud i:nth-child(2){ top:0;    right:0; border-left:0;  border-bottom:0; border-radius:0 10px 0 0 }
.compare__hud i:nth-child(3){ bottom:0; right:0; border-left:0;  border-top:0;    border-radius:0 0 10px 0 }
.compare__hud i:nth-child(4){ bottom:0; left:0;  border-right:0; border-top:0;    border-radius:0 0 0 10px }

.compare__rim{
  position:absolute; inset:0; z-index:8; pointer-events:none; border-radius:inherit;
  box-shadow:
    inset 0 0 0 1px rgba(172,155,255,calc(var(--rim,0) * .55)),
    inset 0 0 60px -14px rgba(124,92,255,calc(var(--rim,0) * .8));
}
.compare__sweep{
  position:absolute; inset:0; z-index:8; pointer-events:none;
  background:linear-gradient(102deg,transparent 42%,rgba(200,190,255,.28) 50%,transparent 58%);
  background-size:260% 100%;
  background-position:var(--sweep,200%) 0;
}

/* — Mock "web vieja" — */
.oldsite{
  position:absolute; inset:0; background:#e8e4d8; color:#1c1c1c;
  font-family:'Times New Roman',Times,serif;
  /* El beige es el bloque más claro de toda la página y encandilaba:
     era lo primero que se veía al llegar a la sección, cuando el que
     tiene que ganar es el lado "Ahora". Bajado de brillo, sigue
     leyéndose como web vieja pero deja de gritar. */
  font-size:clamp(6px,1.05vw,12px); overflow:hidden; filter:saturate(.62) brightness(.86);
}
.oldsite__bar{
  height:8%; min-height:20px; background:linear-gradient(#dcdcdc,#c4c4c4);
  border-bottom:1px solid #9a9a9a; display:flex; align-items:center; gap:5px; padding-inline:8px;
}
.oldsite__bar span{ width:9px; height:9px; border-radius:50%; background:#a8a8a8; border:1px solid #8a8a8a; flex:none }
.oldsite__url{
  flex:1; margin-left:8px; background:#fff; border:1px solid #9a9a9a;
  padding:2px 6px; font-family:Arial,sans-serif; font-size:.85em; color:#444;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.oldsite__body{ height:92%; display:flex; flex-direction:column }
.oldsite__marquee{ background:#00007a; color:#ffd400; overflow:hidden; padding:3px 0; font-family:Arial,sans-serif; font-size:.9em }
.oldsite__marquee span{ display:inline-block; white-space:nowrap; padding-left:100%; animation:oldMarquee 16s linear infinite }
@keyframes oldMarquee{ to{ transform:translateX(-100%) } }
.oldsite__hero{
  background:linear-gradient(#f4f1e6,#ddd8c6); padding:.9em 1.2em;
  border-bottom:2px solid #b4ae98; display:flex; justify-content:space-between; align-items:center; gap:1em;
}
.oldsite__logo{ font-weight:700; font-size:2.1em; color:#00007a; line-height:1.1; letter-spacing:-.02em }
.oldsite__logo small{ display:block; font-size:.34em; color:#6b6b5a; font-style:italic; font-weight:400 }

/* Barra de botones biselados, como los de 2004 */
.oldsite__nav{
  display:flex; gap:2px; padding:.4em .6em;
  background:#d0cec2; border-bottom:1px solid #9a9a9a;
  font-family:Arial,sans-serif; font-size:.92em;
}
.oldsite__nav span{
  padding:.22em .7em; color:#00007a; text-decoration:underline;
  background:linear-gradient(#f2f2ea,#d8d6c8); border:2px outset #eceade;
  white-space:nowrap;
}
.oldsite__nav span:first-child{ background:linear-gradient(#e2e0d2,#cbc9bb); border-style:inset }

.oldsite__cols{ flex:1; display:grid; grid-template-columns:1.6fr .9fr; gap:1.2em; padding:1.1em 1.2em }
.oldsite__col h4{ font-size:1.35em; color:#8a0000; margin-bottom:.4em; border-bottom:1px dotted #a49b80 }
.oldsite__col p{ margin-bottom:.6em; line-height:1.45; color:#3a3a34 }
.oldsite__links{ color:#0000cc; font-family:Arial,sans-serif; font-size:.92em }
.oldsite__box{
  background:#ffd400; border:2px outset #d4b000; padding:.45em; text-align:center;
  font-family:'Comic Sans MS','Trebuchet MS',Arial,sans-serif;
  font-weight:700; font-size:1.05em; margin-bottom:.6em; color:#7a0000;
}
/* Imagen rota: el detalle que más envejece un sitio */
.oldsite__broken{
  display:flex; align-items:center; gap:.5em;
  background:#fff; border:1px solid #9a9a9a; padding:.5em;
  font-family:Arial,sans-serif; font-size:.85em; color:#555; margin-bottom:.6em;
}
.oldsite__broken i{
  position:relative; width:1.5em; height:1.5em; flex:none;
  background:#e9e9e9; border:1px solid #b0b0b0;
}
.oldsite__broken i::before,.oldsite__broken i::after{
  content:''; position:absolute; left:12%; top:48%; width:76%; height:2px; background:#c0392b;
}
.oldsite__broken i::before{ transform:rotate(45deg) }
.oldsite__broken i::after{ transform:rotate(-45deg) }
/* Cartel "en construcción" con las rayas de obra de siempre */
.oldsite__works{
  font-family:Arial,sans-serif; font-weight:700; font-size:.82em; color:#3a3a34;
  text-align:center; padding:.35em; letter-spacing:.04em;
  background:repeating-linear-gradient(45deg,#ffd400 0 8px,#1c1c1c 8px 16px);
  -webkit-text-stroke:3px #ffd400; paint-order:stroke fill;
}
.oldsite__counter{
  background:#000; color:#0f0; font-family:'Courier New',monospace;
  font-size:.95em; padding:.3em .5em; letter-spacing:.2em; white-space:nowrap;
  border:1px solid #444;
}
.oldsite__footer{
  background:#c4c4c4; border-top:1px solid #9a9a9a; padding:.55em 1.2em;
  font-family:Arial,sans-serif; font-size:.82em; color:#4a4a4a; text-align:center;
}

/* — Mock "web nueva" —
   Todo el mock se dimensiona con em a partir de un tamaño base fluido,
   igual que el mock viejo: así el texto y las cajas escalan juntos y
   la maqueta se lee tanto en un monitor como en un celular. */
.newsite{
  position:absolute; inset:0;
  /* El último tramo NO cierra en el color de fondo sino en un negro al
     86 %: el planeta de atrás se ve pasar apenas por detrás de la
     maqueta. Es lo que hace que el cuadro se sienta parte de la página
     y no una captura pegada encima. */
  background:
    radial-gradient(130% 100% at 18% -10%, #1b2136 0%, #0d1220 46%, rgba(8,10,17,.86) 100%);
  overflow:hidden;
  /* El borde de arriba deja pasar la etiqueta "Ahora", que va en píxeles
     fijos y no escala con el mock */
  padding:clamp(34px,3.9em,52px) 1.9em 1.9em;
  display:flex; flex-direction:column; gap:1.3em;
  font-family:var(--font); font-size:clamp(6.5px,1.15vw,13px);
  /* Colores propios de la maqueta: el violeta de la marca más tres
     acentos que le dan vida sin salirse de la paleta oscura. */
  --n-cy:#4FE3C1;
  --n-am:#FFC46B;
  --n-pk:#FF7AC6;
}
/* Campo de partículas 3D: es lo que hace que el lado nuevo se vea vivo */
.newsite__fx{
  position:absolute; inset:0; z-index:0; width:100%; height:100%;
  opacity:0; transition:opacity 1s var(--ease); pointer-events:none;
}
.newsite__fx.is-ready{ opacity:1 }

/* Tres focos de color que respiran desfasados */
.newsite__glow{
  position:absolute; z-index:0; top:-30%; left:8%; width:70%; aspect-ratio:1;
  background:radial-gradient(circle,var(--glow) 0%,transparent 62%);
  filter:blur(30px); opacity:.65;
  animation:newGlow 9s ease-in-out infinite alternate;
}
.newsite__glow--cy{
  top:auto; bottom:-34%; left:auto; right:-12%; width:62%;
  background:radial-gradient(circle,rgba(79,227,193,.34) 0%,transparent 64%);
  animation-duration:12s; animation-delay:-4s; opacity:.5;
}
.newsite__glow--pk{
  top:34%; left:auto; right:26%; width:44%;
  background:radial-gradient(circle,rgba(255,122,198,.26) 0%,transparent 66%);
  animation-duration:15s; animation-delay:-8s; opacity:.42;
}
@keyframes newGlow{
  0%{ transform:translate3d(0,0,0) scale(1); opacity:.5 }
  100%{ transform:translate3d(6%,4%,0) scale(1.15); opacity:.8 }
}

/* Retícula que deriva de fondo: da sensación de producto, no de dibujo */
.newsite__grid{
  position:absolute; z-index:0; left:-25%; top:-25%; width:150%; height:150%;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:3.4em 3.4em;
  -webkit-mask-image:radial-gradient(68% 58% at 32% 42%,#000 0%,transparent 76%);
          mask-image:radial-gradient(68% 58% at 32% 42%,#000 0%,transparent 76%);
  animation:newGridDrift 26s linear infinite; will-change:transform;
}
@keyframes newGridDrift{ to{ transform:translate3d(3.4em,3.4em,0) } }

/* Barrido de luz que recorre la pantalla nueva */
.newsite__scan{
  position:absolute; inset:0; z-index:5; pointer-events:none;
  background:linear-gradient(100deg,transparent 38%,rgba(172,155,255,.16) 50%,transparent 62%);
  background-size:260% 100%;
  animation:newScan 6.5s var(--ease) infinite;
}
@keyframes newScan{
  0%,72%{ background-position:180% 0 }
  100%{ background-position:-60% 0 }
}

/* — Barra superior — */
.newsite__nav{ position:relative; z-index:3; display:flex; align-items:center; gap:1.6em }
.newsite__brand{
  display:flex; align-items:center; gap:.55em; flex:none;
  font-size:1.02em; font-weight:700; letter-spacing:.14em; color:#fff;
}
.newsite__brand i{
  width:1.75em; height:1.75em; border-radius:.52em; flex:none;
  background:linear-gradient(140deg,var(--accent-2),var(--accent) 46%,var(--n-cy));
  box-shadow:0 0 1.2em var(--glow);
  animation:newBrand 7s var(--ease) infinite;
}
@keyframes newBrand{
  0%,100%{ transform:rotate(0) scale(1) }
  46%{ transform:rotate(0) scale(1) }
  56%{ transform:rotate(-8deg) scale(1.12) }
  66%{ transform:rotate(0) scale(1) }
}
.newsite__links{ display:flex; gap:1.2em; font-size:.92em; color:rgba(255,255,255,.46) }
.newsite__links em{ font-style:normal; white-space:nowrap }
.newsite__links em:first-child{ color:#fff }
.newsite__navcta{
  margin-left:auto; flex:none;
  font-size:.88em; font-weight:600; color:#fff; white-space:nowrap;
  padding:.62em 1.25em; border-radius:100px;
  background:linear-gradient(90deg,var(--accent),var(--accent-deep));
  box-shadow:0 .6em 1.6em -.5em var(--glow);
}

/* — Bloque principal — */
.newsite__hero{
  position:relative; z-index:3; margin-top:auto;
  display:flex; flex-direction:column; align-items:flex-start; gap:.7em;
}
.newsite__kicker{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:.78em; letter-spacing:.13em; text-transform:uppercase; color:var(--n-cy);
  padding:.4em .85em; border-radius:100px;
  background:rgba(79,227,193,.1); border:1px solid rgba(79,227,193,.3);
  white-space:nowrap;
}
.newsite__kicker i{
  width:.5em; height:.5em; border-radius:50%; flex:none;
  background:var(--n-cy); box-shadow:0 0 .8em var(--n-cy);
  animation:newLive 2.4s ease-in-out infinite;
}
@keyframes newLive{ 0%,100%{ opacity:1; transform:scale(1) } 50%{ opacity:.35; transform:scale(.72) } }

.newsite__h1{
  font-size:3.05em; font-weight:600; line-height:1.04; letter-spacing:-.035em;
  color:#fff; text-shadow:0 .18em .7em rgba(0,0,0,.55);
}
.newsite__h1 em{
  font-family:var(--serif); font-style:italic; font-weight:400;
  background:linear-gradient(92deg,var(--accent-2) 10%,var(--n-cy) 50%,var(--accent-2) 90%);
  background-size:230% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:newGrad 7s var(--ease) infinite;
}
@keyframes newGrad{ 0%,100%{ background-position:0 0 } 50%{ background-position:100% 0 } }

.newsite__p{ font-size:1em; color:rgba(255,255,255,.58); max-width:26em; line-height:1.5 }
.newsite__row{ display:flex; align-items:center; gap:.8em; margin-top:.45em }

.newsite__cta{
  position:relative; white-space:nowrap;
  font-size:.95em; font-weight:600; color:#fff;
  padding:.78em 1.5em; border-radius:100px;
  background:linear-gradient(90deg,var(--accent),#9d84ff);
  box-shadow:0 .8em 2.2em -.7em var(--glow);
  /* Late en el mismo ciclo de 7 s del cursor: respira, se hunde justo
     cuando le hacen clic y rebota. Es el punto al que queremos que
     vaya el ojo dentro de la maqueta. */
  transform-origin:0% 50%;
  animation:newCtaBeat 7s var(--ease) infinite;
  will-change:transform;
}
.newsite__cta2{
  font-size:.9em; font-weight:500; color:rgba(255,255,255,.75); white-space:nowrap;
  padding:.72em 1.2em; border-radius:100px;
  border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.04);
}
/* Brillo que recorre el botón: refuerza que está vivo */
.newsite__cta::before{
  content:''; position:absolute; inset:0; border-radius:inherit; overflow:hidden;
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.55) 50%,transparent 66%);
  background-size:240% 100%;
  animation:newCtaShine 7s var(--ease) infinite;
}
@keyframes newCtaBeat{
  0%,100%{ transform:scale(1);     box-shadow:0 .8em 2.2em -.7em var(--glow) }
  12%    { transform:scale(1.07);   box-shadow:0 1.2em 3em -.5em var(--glow) }
  24%    { transform:scale(1) }
  38%    { transform:scale(1.07) }
  46%    { transform:scale(.92);    box-shadow:0 .5em 1.3em -.7em var(--glow) }
  54%    { transform:scale(1.11);   box-shadow:0 1.5em 3.8em -.4em var(--glow) }
  64%    { transform:scale(1) }
  82%    { transform:scale(1.05) }
}
@keyframes newCtaShine{
  0%,20%{ background-position:170% 0 }
  46%   { background-position:-40% 0 }
  100%  { background-position:-40% 0 }
}
/* La píldora del menú también respira, medio compás desfasada */
.newsite__navcta{ animation:newNavPulse 3.5s var(--ease) infinite; transform-origin:100% 50% }
@keyframes newNavPulse{
  0%,100%{ transform:scale(1); filter:brightness(1) }
  50%    { transform:scale(1.06); filter:brightness(1.25) }
}
/* Onda del clic, sincronizada con la llegada del cursor */
.newsite__cta::after{
  content:''; position:absolute; inset:0; border-radius:100px;
  border:2px solid var(--accent-2); opacity:0;
  animation:newClick 7s var(--ease) infinite;
}
@keyframes newClick{
  0%,44%{ transform:scale(1); opacity:0 }
  48%{ transform:scale(1); opacity:.9 }
  62%{ transform:scale(1.5); opacity:0 }
  100%{ opacity:0 }
}

/* — Las tres pruebas: reputación, resultado y respuesta — */
.newsite__cards{
  position:relative; z-index:3; margin-top:auto;
  display:grid; grid-template-columns:repeat(3,1fr); gap:.85em;
}
.newsite__card{
  position:relative; overflow:hidden;
  border-radius:.95em; padding:.8em .9em;
  background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  border:1px solid var(--line);
  /* Las tres tarjetas flotan desfasadas: la maqueta nunca está quieta */
  animation:newFloat 6s ease-in-out infinite; will-change:transform;
}
.newsite__card:nth-child(2){ animation-delay:-2s }
.newsite__card:nth-child(3){ animation-delay:-4s }
@keyframes newFloat{
  0%,100%{ transform:translateY(0) }
  50%{ transform:translateY(-6px) }
}
.newsite__card b{
  position:relative; display:block; line-height:1.05;
  font-size:1.55em; font-weight:600; letter-spacing:-.035em; color:#fff;
}
.newsite__lbl{
  position:relative; display:block; margin-top:.2em;
  font-size:.78em; color:rgba(255,255,255,.5); line-height:1.3;
}

.newsite__card--star{
  background:linear-gradient(160deg,rgba(255,196,107,.17),rgba(255,196,107,.02));
  border-color:rgba(255,196,107,.3);
}
.newsite__card--star b{ color:var(--n-am) }
.newsite__stars{
  display:block; margin-bottom:.2em;
  font-size:.82em; letter-spacing:.12em; color:var(--n-am);
  text-shadow:0 0 .6em rgba(255,196,107,.55);
  animation:newStars 5s var(--ease) infinite;
}
@keyframes newStars{
  0%,70%,100%{ filter:brightness(1) }
  80%{ filter:brightness(1.5) }
}

.newsite__card--chart{
  background:linear-gradient(160deg,rgba(79,227,193,.17),rgba(79,227,193,.02));
  border-color:rgba(79,227,193,.3);
}
.newsite__card--chart b{ color:var(--n-cy) }
/* La curva se dibuja sola cada ciclo: el "creció" se ve, no se lee */
.newsite__spark{
  position:absolute; left:34%; right:0; bottom:0; width:66%; height:52%;
  opacity:.45; pointer-events:none;
}
.newsite__spark polyline{
  fill:none; stroke:var(--n-cy); stroke-width:2.5;
  stroke-linecap:round; stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:130; stroke-dashoffset:130;
  animation:newSpark 5s var(--ease) infinite;
}
@keyframes newSpark{ 0%{ stroke-dashoffset:130 } 55%,100%{ stroke-dashoffset:0 } }

.newsite__card--time{
  background:linear-gradient(160deg,rgba(124,92,255,.22),rgba(124,92,255,.03));
  border-color:rgba(124,92,255,.34);
}
.newsite__card--time b{ color:var(--accent-2) }
.newsite__ring{
  position:absolute; right:.7em; top:.7em; width:1.7em; height:1.7em; border-radius:50%;
  background:conic-gradient(var(--accent-2) 0 .68turn, rgba(255,255,255,.12) .68turn);
  -webkit-mask:radial-gradient(circle,transparent 54%,#000 56%);
          mask:radial-gradient(circle,transparent 54%,#000 56%);
  animation:newRing 4.5s linear infinite;
}
@keyframes newRing{ to{ transform:rotate(360deg) } }

/* El orbe queda de telón de fondo: las partículas son las protagonistas */
.newsite__orb{
  position:absolute; z-index:0; right:-4%; top:22%; width:26%; aspect-ratio:1; border-radius:50%;
  background:conic-gradient(from 210deg,var(--accent-deep),var(--accent),#c9bcff,var(--n-cy),var(--accent-deep));
  filter:blur(16px); opacity:.28; animation:orbSpin 18s linear infinite;
}
@keyframes orbSpin{ to{ transform:rotate(360deg) } }

/* Cursor que entra, va al botón y hace clic */
/* Se animan left/top (porcentajes del mock; un translate en % se
   mediría contra el propio cursor, que mide 20 px). Es un solo
   elemento diminuto: el costo es irrelevante. */
.newsite__cursor{
  position:absolute; z-index:7; width:clamp(14px,2.2vw,22px); height:auto;
  left:78%; top:84%; opacity:0;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.6));
  animation:newCursor 7s var(--ease) infinite;
}
@keyframes newCursor{
  0%   { left:80%; top:88%; transform:scale(1); opacity:0 }
  12%  { opacity:1 }
  44%  { left:16%; top:72%; opacity:1 }
  48%  { transform:scale(.78) }
  56%  { transform:scale(1) }
  78%  { left:30%; top:52%; opacity:1 }
  92%,100%{ left:54%; top:30%; opacity:0 }
}

/* Ficha flotante de consulta: inclinada, respirando, con el botón encendido.
   Llena el aire de la derecha y cuenta que el sitio junta contactos. */
.newsite__panel{
  position:absolute; z-index:4; right:4.5%; top:38%;
  width:15em; padding:1.1em; border-radius:1.1em;
  display:flex; flex-direction:column; gap:.65em;
  background:linear-gradient(165deg,rgba(30,36,58,.92),rgba(12,15,26,.9));
  border:1px solid rgba(172,155,255,.24);
  box-shadow:0 1.6em 3.4em -1.4em #000, inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(6px);
  transform:perspective(700px) rotateY(-9deg) rotateX(3deg);
  animation:newPanel 8s ease-in-out infinite; will-change:transform;
}
@keyframes newPanel{
  0%,100%{ transform:perspective(700px) rotateY(-9deg) rotateX(3deg) translateY(0) }
  50%    { transform:perspective(700px) rotateY(-5deg) rotateX(1deg) translateY(-.55em) }
}
.newsite__panel-top{ font-size:.88em; font-weight:600; color:#fff }
.newsite__field{
  height:1.6em; border-radius:.5em;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1);
}
.newsite__field--sm{ height:2.6em }
.newsite__panel-btn{
  align-self:flex-start; margin-top:.15em;
  font-size:.8em; font-weight:600; color:#fff;
  padding:.55em 1.1em; border-radius:100px;
  background:linear-gradient(90deg,var(--accent),#9d84ff);
  box-shadow:0 .5em 1.4em -.4em var(--glow);
  animation:newPanelBtn 7s var(--ease) infinite;
}
@keyframes newPanelBtn{
  0%,72%,100%{ filter:brightness(1); box-shadow:0 .5em 1.4em -.4em var(--glow) }
  80%        { filter:brightness(1.3); box-shadow:0 .8em 2.2em -.3em var(--glow) }
}

/* Aviso de consulta nueva: aparece después del clic */
.newsite__ping{
  position:absolute; z-index:6; right:3.5%; top:22%;
  display:flex; align-items:center; gap:.6em;
  padding:.6em .9em; border-radius:.85em;
  background:rgba(8,10,17,.85); border:1px solid rgba(124,92,255,.45);
  box-shadow:0 1em 2.4em -1em #000;
  opacity:0; transform:translateX(16px);
  animation:newPing 7s var(--ease) infinite;
}
.newsite__ping-dot{
  width:.6em; height:.6em; border-radius:50%; flex:none;
  background:#3ddc84; box-shadow:0 0 .8em rgba(61,220,132,.9);
}
.newsite__ping-txt{ display:flex; flex-direction:column; line-height:1.25 }
.newsite__ping-txt b{ font-size:.85em; font-weight:600; color:#fff; white-space:nowrap }
.newsite__ping-txt i{ font-size:.74em; font-style:normal; color:rgba(255,255,255,.45); white-space:nowrap }
@keyframes newPing{
  0%,52%{ opacity:0; transform:translateX(16px) }
  58%{ opacity:1; transform:translateX(0) }
  84%{ opacity:1; transform:translateX(0) }
  92%,100%{ opacity:0; transform:translateX(16px) }
}

/* En pantallas chicas el cuadro se angosta: se sacan los adornos que
   ya no aportan para que el mensaje siga entrando entero. */
@media (max-width:760px){
  .compare__tag{ top:6px; font-size:.54rem; padding:.4em .75em; gap:.4em; letter-spacing:.16em }
  .compare__tag--new{ left:8px }
  .compare__tag--old{ right:8px }
  .newsite{ padding:clamp(30px,3.9em,52px) 1.4em 1.4em; gap:1em }
  .newsite__links{ display:none }
  .newsite__h1{ font-size:2.4em }
  .newsite__cta2{ display:none }
  .newsite__panel{ display:none }
  .newsite__ping{ top:26%; right:3% }
}

.compare__stats{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,3vw,3rem);
  max-width:1100px; margin-inline:auto; width:100%;
  border-top:1px solid var(--line); padding-top:clamp(1.4rem,3vw,2.4rem);
}
.stat{ display:flex; flex-direction:column; align-items:center; text-align:center }

/* ── El globo ──
   El dato viaja adentro. Se infla con el scroll y revienta al llegar
   a su número: los trozos los reparte GSAP desde el centro. */
.globo{
  position:relative;
  width:clamp(62px,7.4vw,94px); height:clamp(76px,9vw,114px);
  margin-bottom:.55rem;
  animation:globoFlota 5.2s var(--ease) infinite;
}
.globo:nth-child(1){ animation-delay:0s }
.stat:nth-child(2) .globo{ animation-delay:-1.7s }
.stat:nth-child(3) .globo{ animation-delay:-3.4s }
@keyframes globoFlota{
  0%,100%{ transform:translateY(0) rotate(-2deg) }
  50%    { transform:translateY(-9px) rotate(2.4deg) }
}

.globo__inflar{
  position:absolute; inset:0; display:block;
  transform:scale(.42); transform-origin:50% 92%;
}
.globo__cuerpo{
  position:absolute; inset:0;
  border-radius:50% 50% 47% 47% / 56% 56% 44% 44%;
  background:radial-gradient(circle at 33% 27%, var(--g1), var(--g2) 58%, var(--g3) 100%);
  box-shadow:inset -7px -12px 20px rgba(0,0,0,.30), 0 14px 34px -14px var(--g2);
}
/* El nudo */
.globo__cuerpo::after{
  content:''; position:absolute; left:50%; bottom:-6px;
  width:11px; height:9px; transform:translateX(-50%);
  background:var(--g3);
  clip-path:polygon(50% 100%, 0 0, 100% 0);
}
/* El reflejo: es lo que lo hace leer como goma y no como un círculo */
.globo__luz{
  position:absolute; left:20%; top:12%; width:26%; height:22%;
  border-radius:50%;
  background:linear-gradient(150deg, rgba(255,255,255,.85), rgba(255,255,255,0));
  filter:blur(1px);
}
/* El hilo */
.globo__hilo{
  position:absolute; left:50%; top:100%;
  width:16px; height:clamp(18px,2.4vw,30px);
  border-left:1px solid rgba(172,155,255,.5);
  border-bottom-left-radius:70% 100%;
  transform:translateX(-50%) rotate(7deg);
  transition:opacity .2s linear;
}

.stat b{
  position:absolute; inset:0; z-index:2;
  display:grid; place-items:center;
  font-size:clamp(1.5rem,3.4vw,2.6rem);
  font-weight:600; letter-spacing:-.04em; line-height:1;
  color:#fff; font-variant-numeric:tabular-nums;
  text-shadow:0 2px 10px rgba(20,8,60,.55);
  transition:color .5s var(--ease), text-shadow .5s var(--ease);
}
/* Reventado el globo, el número se queda solo y vuelve al color de la casa */
.globo.is-reventado b{ color:var(--accent-2); text-shadow:var(--sh-depth) }

.globo__trozos{ position:absolute; inset:0; z-index:1 }
.globo__trozos i{
  position:absolute; left:50%; top:46%;
  width:9px; height:11px; margin:-5px 0 0 -4px;
  background:var(--g2); opacity:0;
  border-radius:60% 40% 55% 45% / 50% 60% 40% 50%;
}

.stat__txt{
  display:block; font-size:clamp(.68rem,1.3vw,.86rem);
  color:var(--muted); line-height:1.4; max-width:22ch;
}

@media (max-width:640px){
  .compare__stats{ grid-template-columns:repeat(3,1fr); gap:.6rem }
  .globo{ width:clamp(46px,15vw,64px); height:clamp(56px,18vw,78px); margin-bottom:.4rem }
  .globo__hilo{ height:14px }
  .stat b{ font-size:clamp(1.05rem,4.4vw,1.5rem) }
  .stat__txt{ font-size:.6rem; line-height:1.3 }
}

/* ═══════════════════════════════════════════
   10 bis. ABRIR UN LOCAL NO GARANTIZA VENDER
   ═══════════════════════════════════════════
   Dos columnas enfrentadas, y a propósito NO con el mismo peso visual:
   la de la izquierda es una lista de gastos y va en gris apagado con
   guiones; la de la derecha va con las tildes violetas del resto del
   sitio. La comparación tiene que entenderse de un vistazo, sin leer.

   El cuadro va entero adentro de un solo .reveal-up y no ítem por ítem:
   son diez líneas cortas: apareciendo de a una se lee como una lista de
   tareas cargando, y lo que acá importa es ver las dos columnas juntas. */
.costo{ position:relative; padding-block:clamp(2.5rem,6vw,4.5rem) }
.costo__grid{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,5vw,4rem); align-items:center;
}
@media (max-width:900px){ .costo__grid{ grid-template-columns:1fr } }

.costo__tag{
  display:inline-flex; align-items:center; gap:.55rem; margin-bottom:1rem;
  font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-2);
  padding:.38rem .85rem .38rem .7rem; border-radius:100px;
  background:rgba(124,92,255,.12); border:1px solid rgba(124,92,255,.36);
}
.costo__tag i{
  width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--accent-2); box-shadow:0 0 12px var(--glow);
}
.costo__texto .h3{ max-width:17ch; margin-bottom:1.2rem }
.costo__texto .lead{ color:var(--text-2); font-weight:300; max-width:52ch }
.costo__punch{
  font-size:clamp(1.05rem,2.1vw,1.4rem);
  color:var(--text); line-height:1.4; letter-spacing:-.02em;
  margin-top:1.6rem; padding-left:1.2rem;
  border-left:2px solid var(--accent);
}
.costo__punch em{
  font-family:var(--serif); font-style:italic; font-size:1.06em;
  background:linear-gradient(100deg,var(--accent-2),#fff 60%,var(--accent-2));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

.costo__cuadro{
  display:grid; grid-template-columns:1fr 1fr; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(165deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  backdrop-filter:blur(10px);
}
.costo__col{ padding:clamp(1.15rem,2.4vw,1.6rem) }
.costo__col + .costo__col{
  border-left:1px solid var(--line);
  background:linear-gradient(180deg,rgba(124,92,255,.09),rgba(124,92,255,.02));
}
/* Por debajo de 560 px las dos columnas dan renglones de tres palabras.
   Apiladas siguen comparándose: la de arriba es lo que sale, la de abajo
   lo que se hace en su lugar. */
@media (max-width:560px){
  .costo__cuadro{ grid-template-columns:1fr }
  .costo__col + .costo__col{ border-left:0; border-top:1px solid var(--line) }
}

.costo__quien{
  display:block; margin-bottom:1rem; padding-bottom:.7rem;
  border-bottom:1px solid var(--line);
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
}
.costo__col:first-child .costo__quien{ color:var(--muted) }
.costo__col + .costo__col .costo__quien{ color:var(--accent-2) }

.costo__lista{ display:flex; flex-direction:column; gap:.75rem }
.costo__lista li{
  position:relative; padding-left:1.5rem;
  font-size:.88rem; line-height:1.55; font-weight:300;
}
.costo__lista--no li{ color:var(--muted) }
.costo__lista--si li{ color:var(--text-2) }
.costo__lista li::before{
  position:absolute; left:0; top:0; font-size:.8em; line-height:1.75;
}
.costo__lista--no li::before{ content:'—'; color:rgba(255,255,255,.26) }
.costo__lista--si li::before{ content:'✓'; color:var(--accent-2); font-weight:700 }

/* ═══════════════════════════════════════════
   11. LOS LOCALES DE SIEMPRE
   ═══════════════════════════════════════════ */
.legacy{
  position:relative; padding-block:clamp(4rem,9vw,8rem);
  background:linear-gradient(180deg,
    rgba(8,10,17,0) 0%, rgba(8,10,17,.62) 18%,
    rgba(8,10,17,.62) 82%, rgba(8,10,17,0) 100%);
}
.legacy__grid{
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(2rem,5vw,4.5rem); align-items:start;
}
.legacy__text .h3{ max-width:18ch; margin-bottom:1.4rem }
.legacy__text p{ color:var(--text-2); font-weight:300; margin-bottom:1.1rem; max-width:58ch }
.legacy__text em{ font-family:var(--serif); font-style:italic; color:var(--text); font-size:1.06em }
.legacy__punch{
  font-size:clamp(1.15rem,2.4vw,1.65rem);
  color:var(--text) !important; line-height:1.35; letter-spacing:-.02em;
  margin-block:1.8rem !important; padding-left:1.2rem;
  border-left:2px solid var(--accent);
}
.legacy__punch em{
  background:linear-gradient(100deg,var(--accent-2),#fff 60%,var(--accent-2));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* ── Las tres tarjetas ──
   Entran girando en 3D con el scroll, se encienden al cruzar, y se dan
   vuelta: adelante el problema explicado, atrás la misma frase sola,
   grande, sobre violeta pleno.

   ⚠ TRES TRAMPAS, TODAS SIN ERROR EN CONSOLA:

   1 · `overflow` distinto de visible, `isolation` y `filter` APLANAN el
       3D. Si alguna de las tres queda en el elemento que envuelve las
       caras, el giro se ve como si la tarjeta se estrechara y volviera,
       sin profundidad. Por eso `.lcard__gira` no lleva ninguna, y el
       recorte y el aislamiento viven en cada cara.

   2 · `backdrop-filter` NO FUNCIONA adentro de una cadena preserve-3d.
       No falla: simplemente no desenfoca nada. El vidrio esmerilado que
       tenía la tarjeta se reemplazó por una capa oscura translúcida —
       se ve casi igual y encima sale más barata.

   3 · Las dos caras se apilan en una grilla de UNA celda (las dos en
       `grid-area:1/1`), no con position:absolute. Con absolute la
       tarjeta mide sólo el frente y el dorso se desborda por abajo en
       cuanto el texto de atrás es más largo. */
.legacy__list{
  display:flex; flex-direction:column; gap:clamp(.9rem,2vw,1.3rem);
}
.lcard{
  position:relative; will-change:transform;
  perspective:1500px; perspective-origin:50% 42%;
}
.lcard__gira{
  position:relative; height:100%;
  display:grid; grid-template:1fr / 1fr;
  transform-style:preserve-3d;
  transition:transform .85s cubic-bezier(.42,.02,.24,1);
}
@media (hover:hover){ .lcard:hover .lcard__gira{ transform:rotateY(180deg) } }
.lcard.is-vuelta .lcard__gira{ transform:rotateY(180deg) }

.lcard__cara{
  grid-area:1/1; position:relative; overflow:hidden; isolation:isolate;
  padding:clamp(1.3rem,2.8vw,1.9rem);
  border-radius:var(--radius); border:1px solid var(--line);
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  transition:border-color .6s var(--ease), box-shadow .6s var(--ease);
}
.lcard__frente{
  background:
    linear-gradient(165deg,rgba(255,255,255,.055),rgba(255,255,255,.016)),
    linear-gradient(0deg,rgba(9,11,19,.62),rgba(9,11,19,.62));
}
.lcard__dorso{
  transform:rotateY(180deg);
  display:flex; flex-direction:column; justify-content:center;
  background:linear-gradient(152deg,#8A6BFF 0%,#6B4BE0 46%,#4429B8 100%);
  border-color:rgba(214,205,255,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}

/* Número fantasma gigante de fondo */
.lcard__ghost{
  position:absolute; right:-.06em; top:-.34em; z-index:-1;
  font-size:clamp(5.5rem,13vw,9rem); font-weight:700; line-height:1;
  letter-spacing:-.06em; color:rgba(255,255,255,.035);
  transition:color .8s var(--ease), transform .9s var(--ease);
  transform:translateX(12px);
}
.lcard.is-on .lcard__frente{
  border-color:rgba(124,92,255,.4);
  box-shadow:0 30px 70px -46px var(--glow);
}
.lcard.is-on .lcard__ghost{ color:rgba(124,92,255,.14); transform:translateX(0) }

.lcard__num{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.66rem; letter-spacing:.2em; color:var(--muted);
  margin-bottom:.55rem; transition:color .5s var(--ease);
}
.lcard__num::before{
  content:''; width:0; height:1px; background:var(--accent);
  box-shadow:0 0 10px var(--glow);
  transition:width .8s var(--ease);
}
.lcard.is-on .lcard__frente .lcard__num{ color:var(--accent-2) }
.lcard.is-on .lcard__frente .lcard__num::before{ width:26px }

/* En el dorso el violeta ES el fondo, así que la marca y el filete se
   invierten: blancos sobre el acento, no acento sobre el fondo. */
.lcard__dorso .lcard__num{ color:rgba(255,255,255,.7) }
.lcard__dorso .lcard__num::before{ width:26px; background:#fff; box-shadow:0 0 10px rgba(255,255,255,.5) }

.lcard__title{
  display:block; font-size:clamp(1.05rem,2.1vw,1.32rem); font-weight:500;
  letter-spacing:-.025em; margin-bottom:.4rem;
}
.lcard__txt{ display:block; font-size:.9rem; color:var(--muted); font-weight:300; line-height:1.6 }

/* La misma frase de adelante, dos cuerpos más grande y sola en la cara:
   es el motivo entero por el que la tarjeta gira. */
.lcard__clave{
  display:block; font-size:clamp(1.38rem,2.9vw,1.9rem); font-weight:600;
  letter-spacing:-.032em; line-height:1.1; color:#fff;
  margin-bottom:.7rem;
  text-shadow:0 2px 18px rgba(30,12,84,.5);
}
.lcard__cierre{
  display:block; font-size:.9rem; line-height:1.6; font-weight:300;
  color:rgba(255,255,255,.88);
}

/* Destello que cruza la tarjeta una sola vez, cuando se enciende */
.lcard__sweep{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  background:linear-gradient(105deg,transparent 40%,rgba(172,155,255,.18) 50%,transparent 60%);
  background-size:250% 100%; background-position:180% 0;
}
.lcard.is-on .lcard__sweep{ opacity:1; animation:lcardSweep 1.3s var(--ease) forwards }
@keyframes lcardSweep{ to{ background-position:-60% 0 } }

/* Marca de esquina: avisa que hay algo atrás. Sin esto, en un celular
   la tarjeta se ve igual que antes y no la da vuelta nadie. */
.lcard__vuelta{
  position:absolute; right:clamp(.9rem,2vw,1.3rem); bottom:clamp(.9rem,2vw,1.3rem);
  width:24px; height:24px; border-radius:50%;
  border:1px solid rgba(172,155,255,.4);
  background:rgba(124,92,255,.10);
  display:grid; place-items:center;
  opacity:.6; transition:opacity .5s var(--ease), transform .6s var(--ease);
}
.lcard__vuelta::before{
  content:'↻'; font-size:.78rem; line-height:1; color:var(--accent-2);
  font-style:normal;
}
.lcard.is-on .lcard__vuelta{ opacity:1 }
@media (hover:hover){
  .lcard:hover .lcard__vuelta{ opacity:0; transform:scale(.8) }
}

@media (max-width:860px){ .legacy__grid{ grid-template-columns:1fr } }

/* ═══════════════════════════════════════════
   12. RUBROS — muro 3D de palabras
   ═══════════════════════════════════════════ */
.rubros{ position:relative; padding-block:clamp(4rem,9vw,7.5rem) }

/* ── La entrada de la sección ──
   Tres piezas apiladas, en este orden: el remate a tamaño de cartel, la
   regla que se dibuja debajo, y la explicación en cuerpo chico. Antes
   iba al revés —la explicación grande arriba— y la sección arrancaba
   con cuatro renglones de texto antes del golpe. */
.rubros__intro{ margin-bottom:clamp(1rem,3vw,2.4rem) }

/* La explicación. Va en cuerpo de bajada y no de titular: dicha después
   del remate ya no tiene que llamar la atención, tiene que terminar de
   explicarlo. El reflejo se reajusta al gris del texto secundario, o la
   luz sale de un color que la frase no tiene. */
.rubros__bajada{
  margin-top:clamp(1rem,2.2vw,1.4rem);
  max-width:30ch;
  font-size:clamp(1.08rem,2.1vw,1.5rem);
  font-weight:400; line-height:1.3; letter-spacing:-.022em;
  color:var(--text-2);
}
.rubros__bajada .rf-ch{ --rf-1:var(--text-2); --rf-3:var(--text-2) }

/* La regla se dibuja atada al scroll, no en medio segundo fijo. Es el
   único separador entre el remate y la bajada: sin ella los dos
   renglones se leen como un solo bloque de texto en dos cuerpos. */
.rubros__regla{
  display:block; height:2px; border-radius:2px; max-width:min(30rem,72%);
  margin-top:clamp(1.1rem,2.4vw,1.7rem);
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,
    var(--accent) 0%, var(--accent-2) 54%, rgba(172,155,255,0) 100%);
  box-shadow:0 0 16px var(--glow);
}
/* Perspectiva para la entrada por renglones: cada línea llega
   inclinada desde abajo y se endereza. Sin esto el rotateX no se ve. */
.rubros__h .h-word{ transform-origin:50% 100% }

/* ── El titular de la sección ──
   Es un <h2> sin la clase .h2: esa clase trae un text-shadow, y con el
   degradado recortado contra el texto la sombra se ve A TRAVÉS del
   glifo transparente y queda un fantasma gris detrás de cada letra.
   Todo lo que necesita está acá. */
.rubros__punch{
  margin-top:clamp(.7rem,1.8vw,1.2rem);
  font-family:inherit;
  font-size:clamp(2.2rem,6.2vw,5rem);
  font-weight:700; line-height:1.02; letter-spacing:-.038em;
  max-width:13ch;
}
/* ⚠ ACÁ HAY UNA TRAMPA QUE NO DA NINGÚN ERROR.
   `background-clip:text` NO alcanza a un descendiente que tenga
   `transform`. Y las letras llevan transform, porque entran de a una
   con escala. Resultado: la frase clipeada en el padre pintaba las dos
   primeras letras y dejaba las otras dieciocho TRANSPARENTES — un
   hueco del tamaño de un titular en medio de la sección, sin una sola
   línea roja en la consola y con getComputedStyle informando
   exactamente lo mismo en las letras que se veían y en las que no.
   Se descubre mirando, no midiendo.

   El arreglo es clipear en CADA LETRA y no en la frase, dándole a cada
   una un degradado del tamaño de la FRASE ENTERA corrido por su propia
   posición (--lx / --ly, que escribe initRubros). Las veinte piezas
   vuelven a formar una sola imagen continua, y ahora sí sobreviven a
   cualquier transform.

   Las medidas se toman con offsetLeft/offsetTop y no con
   getBoundingClientRect: offset* ignora los transforms, así que la
   cuenta sigue dando bien aunque se mida con las letras a media
   entrada. */
.lava{
  display:inline-block;
  --lw:100%; --lh:100%; --lx:0px; --ly:0px; --lava-x:0%;
  /* Respaldo para cuando el JS no partió la frase en letras (sin GSAP):
     ahí no hay descendientes con transform y el clip del padre alcanza. */
  background-image:linear-gradient(96deg, #C9BCFF, #8E72FF 55%, #C9BCFF);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
/* Partida en letras, el respaldo se apaga: si no, las dos o tres letras
   que el clip del padre TODAVÍA alcanza se pintan dos veces, una con el
   degradado de la frase y otra con el suyo, y se ve un fantasma corrido
   detrás de la primera palabra. partirLetras deja el data-split. */
.lava[data-split="1"]{ background-image:none }
/* Las palabras quedan enteras; adentro, cada letra se enciende sola */
.lava .lv-w{ display:inline-block }
.lava .lv{
  display:inline-block; white-space:pre;
  background-image:
    radial-gradient(46% 128% at calc(20% + var(--lava-x)) 28%, #E8E2FF 0%, rgba(232,226,255,0) 58%),
    radial-gradient(50% 132% at calc(76% - var(--lava-x)) 74%, #4FE3C1 0%, rgba(79,227,193,0) 60%),
    radial-gradient(58% 150% at calc(48% + var(--lava-x)) 96%, #7C5CFF 0%, rgba(124,92,255,0) 62%),
    linear-gradient(96deg, #C9BCFF, #8E72FF 55%, #C9BCFF);
  background-size:var(--lw) var(--lh);
  background-repeat:no-repeat;
  background-position:calc(var(--lx) * -1) calc(var(--ly) * -1);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}

/* El resplandor de atrás: no está recortado contra el texto, así que
   puede desbordar y darle peso a la frase. */
.rubros__punch{ position:relative; isolation:isolate }
/* ⚠ El resplandor NO puede sobresalir por la derecha.
   Con el remate apilado debajo del título y limitado a 13ch, su borde
   derecho quedaba lejos del borde de la página y un `right:-14%` no
   molestaba a nadie. En la grilla de dos columnas el remate TERMINA en
   el borde del contenedor, así que ese mismo -14% se va de la ventana
   y aparecen 30 px de scroll horizontal — sólo a partir de 1000 px de
   ancho, sólo mientras la sección está en pantalla, y sin que se vea
   nada raro: el desborde es un degradado transparente.

   El desenfoque sí puede pasarse: la tinta desbordada no genera barra
   de scroll, sólo la caja. Por eso alcanza con cerrar el lado derecho. */
.rubros__punch::before{
  content:''; position:absolute; z-index:-1;
  left:-8%; right:0; top:-30%; bottom:-30%;
  background:radial-gradient(50% 55% at 28% 50%, rgba(124,92,255,.28), transparent 70%),
             radial-gradient(45% 50% at 74% 55%, rgba(79,227,193,.16), transparent 72%);
  filter:blur(14px); pointer-events:none;
  animation:punchLatido 6.5s var(--ease) infinite;
}
@keyframes punchLatido{
  0%,100%{ opacity:.55; transform:scale(.94) }
  50%    { opacity:1;   transform:scale(1.06) }
}

/* El muro: cinco filas a distinta profundidad dentro de una perspectiva.
   Cada fila se desplaza sola con una animación de transform (barata) y el
   conjunto se inclina con el scroll. overflow local: nunca genera scroll
   horizontal y no hay ningún position:sticky adentro. */
.wall{
  position:relative; overflow:hidden;
  padding-block:clamp(2.5rem,7vw,5.5rem);
  perspective:900px; perspective-origin:50% 50%;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),
             linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),
                     linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
.wall__inner{
  transform-style:preserve-3d;
  transform:rotateX(var(--rx,14deg)) rotateZ(var(--rz,-2.5deg));
  display:flex; flex-direction:column; gap:clamp(.7rem,2.2vw,1.7rem);
  will-change:transform;
}
/* Sin will-change acá a propósito: son cinco capas anchas y promoverlas
   todas encima de las de .wall__track no aporta y sí cuesta memoria. */
.wall__row{
  display:flex; width:max-content;
  transform:translateZ(var(--z,0px));
}
.wall__track{
  display:flex; align-items:center; width:max-content;
  animation:wallSlide var(--dur,48s) linear infinite;
  will-change:transform;
}
.wall__track--rev{ animation-direction:reverse }
@keyframes wallSlide{ to{ transform:translate3d(-50%,0,0) } }

/* Al pasar el mouse se frena todo el muro: se puede leer sin perseguir nada */
@media (hover:hover){
  .wall:hover .wall__track{ animation-play-state:paused }
}

.rubro{
  display:inline-block; white-space:nowrap;
  padding-inline:clamp(.6rem,1.6vw,1.4rem);
  font-size:clamp(1.35rem,3.4vw,3rem);
  font-weight:500; letter-spacing:-.035em; line-height:1.35;
  color:rgba(238,241,247,.34);
  text-shadow:var(--sh-depth);
  transition:color .45s var(--ease), text-shadow .45s var(--ease);
  cursor:default;
}
.rubro::after{
  content:'·'; margin-left:clamp(.6rem,1.6vw,1.4rem);
  color:var(--accent); opacity:.45; font-weight:400;
}
.rubro--acc{ color:rgba(172,155,255,.72) }
@media (hover:hover){
  .rubro:hover{ color:#fff; text-shadow:var(--sh-hover), var(--sh-depth) }
}
/* Fila del medio (la que está más cerca): siempre un poco más viva */
.wall__row:nth-child(3) .rubro{ color:rgba(238,241,247,.6) }

.wall__hint{
  position:absolute; left:50%; bottom:clamp(.6rem,2vw,1.4rem); translate:-50% 0;
  font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); opacity:.55; pointer-events:none;
}
@media (hover:none){ .wall__hint{ display:none } }

/* ── Cierre: "¿Tu rubro no está acá?" ── */
.rubros__outro{ text-align:center; padding-top:clamp(2.5rem,7vw,5rem) }

/* ── Efecto lectura ──
   El texto arranca apenas insinuado y se enciende letra por letra al
   ritmo del scroll, como si se fuera leyendo solo. Las letras van dentro
   de un envoltorio por palabra (.rw) para que el texto siga cortando
   por palabras y nunca a mitad de una. */
.fill-text{ color:transparent }
.rubros__outro .fill-text{ margin-bottom:1.2rem }
.fill-text .rw{ display:inline-block; white-space:nowrap }
.fill-text .ch{
  display:inline-block;
  color:rgba(238,241,247,.14);
  transition:color .25s linear, text-shadow .25s linear;
}
.fill-text .ch.is-on{ color:var(--text); text-shadow:var(--sh-lit), var(--sh-depth) }
/* En texto corrido el encendido es sobrio: mismo color y sombra que el resto */
p.fill-text .ch.is-on{ color:var(--text-2); text-shadow:0 2px 14px rgba(8,10,17,.6) }
p.fill-text.lead .ch.is-on{ color:var(--text-2) }
.no-gsap .fill-text .ch,.no-gsap .fill-text{ color:var(--text) }

.rubros__big{
  font-size:clamp(1.7rem,5vw,3.6rem); font-weight:600;
  letter-spacing:-.04em; line-height:1.1;
  max-width:20ch; margin:0 auto 2.6rem;
}
.rubros__lead-in{ display:block; color:var(--text-2) }

/* Rotador de frases: cada una entra y sale con desenfoque */
.swap{ position:relative; display:block; min-height:2.4em; margin-top:.2rem }
.swap i{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-style:normal; opacity:0;
}
.swap i em{
  font-family:var(--serif); font-style:italic; font-weight:400;
  background:linear-gradient(100deg,var(--accent-2),#fff 55%,var(--accent-2));
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:swapSheen 5s linear infinite;
}
@keyframes swapSheen{ to{ background-position:200% 50% } }
.swap i.is-on{ opacity:1 }
.no-gsap .swap{ min-height:0 }
.no-gsap .swap i{ position:static; opacity:0 }
.no-gsap .swap i.is-on{ opacity:1 }

@media (max-width:600px){
  .swap{ min-height:3.6em }
  .wall__inner{ gap:.1rem }
}

/* ═══════════════════════════════════════════
   13. PROCESO
   ═══════════════════════════════════════════ */
.process{
  padding-block:clamp(4.5rem,9vw,8rem);
  background:linear-gradient(180deg, rgba(8,10,17,0), rgba(8,10,17,.6) 20%, rgba(8,10,17,.6) 80%, rgba(8,10,17,0));
}
/* ── La sección que se pincha ──
   El título y el marcador quedan pegados arriba mientras los tres
   pasos les pasan por al lado. Es `position:sticky` de CSS puro: no
   hay nada que recalcular por cuadro, y si el JS no llega la sección
   sigue leyéndose igual, sólo que sin quedarse pegada.

   Para que sticky funcione, ningún ancestro puede tener overflow
   distinto de visible. Por eso .process no recorta nada. */
.process__grid{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);
  gap:clamp(2.5rem,6vw,6rem); align-items:start;
}
.process__aside{
  position:sticky;
  top:calc(var(--header-h) + clamp(2rem,7vh,5rem));
}
/* Los pasos arrancan más abajo que el título: así el primero entra
   cuando el título ya se frenó, y se nota que quedó pegado. */
.process__list{ position:relative; padding-top:clamp(1rem,6vh,4.5rem) }

/* El marcador: el número grande del paso en el que estás, y un riel
   que se llena a medida que bajás. */
/* El hueco es generoso a propósito: la cifra va en serif de display y
   esos números tienen mucho aire propio a la derecha. Con menos, "de
   tres" parece pegado al uno. */
.process__marcador{ margin-top:clamp(2rem,5vw,3.4rem); display:flex; align-items:baseline; gap:1.5rem }
.process__cifra{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(3.4rem,8vw,6.4rem); line-height:.8;
  letter-spacing:-.03em; color:var(--accent-2);
  font-variant-numeric:tabular-nums;
}
.process__de{ font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted) }
.process__riel{
  position:relative; flex:1; height:1px; align-self:center;
  background:var(--line); margin-left:.4rem;
}
.process__riel i{
  position:absolute; inset:0;
  background:linear-gradient(to right,var(--accent-2),var(--accent));
  transform:scaleX(0); transform-origin:0 50%;
  box-shadow:0 0 16px var(--glow); will-change:transform;
}

.step{ position:relative; padding-block:clamp(1.6rem,3.6vw,3rem); padding-left:clamp(3rem,5vw,5rem) }
.step + .step{ border-top:1px solid var(--line) }
.step__num{
  position:absolute; left:0; top:clamp(1.6rem,3.6vw,3rem);
  width:clamp(2.3rem,4.6vw,3.2rem); display:grid; place-items:center;
}

/* En vertical no hay dos columnas: el título vuelve a ir arriba de
   todo y nada se queda pegado, porque pegar algo en una pantalla de
   teléfono es comerse media pantalla. */
@media (max-width:900px){
  .process__grid{ grid-template-columns:1fr; gap:clamp(1.6rem,5vw,2.4rem) }
  .process__aside{ position:static }
  .process__marcador{ display:none }
  .process__list{ padding-top:0 }
}
.step__num span{
  display:grid; place-items:center; width:clamp(2.3rem,4.6vw,3.2rem); aspect-ratio:1;
  border-radius:50%; border:1px solid var(--line-strong);
  background:rgba(8,10,17,.7); backdrop-filter:blur(6px);
  font-size:.78rem; letter-spacing:.04em; color:var(--muted);
  transition:border-color .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease);
}
.step.is-on .step__num span{ border-color:var(--accent); color:var(--accent-2); box-shadow:0 0 24px -4px var(--glow) }

.step__body h4{ font-size:clamp(1.35rem,3vw,2.1rem); font-weight:600; letter-spacing:-.035em; margin-bottom:.7rem }
.step__body p{ color:var(--text-2); max-width:52ch; font-weight:300; margin-bottom:1rem }
.step__body ul{ display:flex; flex-wrap:wrap; gap:.5rem }
.step__body li{
  font-size:.76rem; color:var(--muted); padding:.4rem .85rem; border-radius:100px;
  border:1px solid var(--line); background:rgba(255,255,255,.03);
}

/* ═══════════════════════════════════════════
   14. SOBRE MÍ
   ═══════════════════════════════════════════ */
/* overflow local: los glows decorativos no deben generar scroll horizontal.
   Seguro acá porque esta sección no contiene ningún position:sticky. */
.about{
  padding-block:clamp(5rem,10vw,9rem); overflow:hidden;
  background:linear-gradient(180deg, rgba(8,10,17,0), rgba(8,10,17,.55) 22%, rgba(8,10,17,.55) 78%, rgba(8,10,17,0));
}
.about__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,6vw,6rem); align-items:center }
.about__media{ position:relative; perspective:1000px }
.about__frame{
  position:relative;
  aspect-ratio:4/7;            /* calza exacto con la foto (768×1344): no recorta nada */
  border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line-strong);
  background:linear-gradient(160deg,var(--surface-2),var(--bg));
  box-shadow:0 50px 110px -60px #000;
}
.about__frame img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 45%;  /* si algún día cambiás la foto y recorta, saca piso, no cabeza */
  filter:contrast(1.06) brightness(.97);
  transition:filter .8s var(--ease), transform 1.2s var(--ease);
  will-change:transform;
}
.about__frame:hover img{ filter:contrast(1.12) brightness(1.02); transform:scale(1.03) }
.about__frame img.is-missing{ display:none }

/* Viñeta: funde el fondo claro de la foto con la página oscura en vez de
   dejar un rectángulo blanco flotando. */
.about__frame::after{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(118% 78% at 50% 38%, transparent 46%, rgba(8,10,17,.5) 100%),
    linear-gradient(to top, rgba(8,10,17,.6) 0%, transparent 30%);
}

.about__placeholder{
  position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:.5rem;
  color:var(--muted); text-align:center; padding:2rem;
  background-image:
    radial-gradient(60% 50% at 50% 30%, var(--glow-soft), transparent 70%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.022) 0 10px, transparent 10px 20px);
}
.about__placeholder[hidden]{ display:none }
.about__placeholder p{ font-size:.9rem; color:var(--text-2) }
.about__placeholder small{ font-size:.72rem; opacity:.6; font-family:ui-monospace,SFMono-Regular,Menlo,monospace }
.about__frame-glow{
  position:absolute; inset:auto -20% -30% -20%; height:60%;
  background:radial-gradient(60% 100% at 50% 100%, var(--glow-soft), transparent 70%);
  pointer-events:none;
}

/* ── Efectos de la foto (todo transform/opacity: sale gratis) ── */
/* Destello diagonal que cruza el retrato cada tanto */
.about__sheen{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(102deg,transparent 40%,rgba(172,155,255,.22) 50%,transparent 60%);
  background-size:260% 100%;
  animation:aboutSheen 8s var(--ease) infinite;
}
@keyframes aboutSheen{
  0%,78%{ background-position:190% 0 }
  100%{ background-position:-70% 0 }
}
/* Línea de acento que baja lentamente, como un escaneo */
.about__scan{
  position:absolute; left:0; right:0; top:0; height:2px; z-index:3; pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--accent-2),transparent);
  box-shadow:0 0 22px var(--glow); opacity:.55;
  animation:aboutScan 7s linear infinite;
}
@keyframes aboutScan{
  0%{ transform:translateY(0); opacity:0 }
  12%{ opacity:.6 }
  88%{ opacity:.6 }
  100%{ transform:translateY(var(--scan-h,560px)); opacity:0 }
}
/* Marco de esquinas que se dibuja al pasar el mouse */
.about__frame::before{
  content:''; position:absolute; inset:12px; z-index:4; pointer-events:none;
  border:1px solid rgba(172,155,255,.5); border-radius:calc(var(--radius) - 8px);
  opacity:0; transform:scale(1.02);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
@media (hover:hover){
  .about__frame:hover::before{ opacity:1; transform:scale(1) }
}

/* ── Banda de países ── */
.flags{
  position:relative; margin-top:clamp(2.5rem,6vw,4rem);
  padding-block:1.1rem;
  border-block:1px solid var(--line);
  overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.flags__track{
  display:flex; align-items:center; gap:clamp(1.4rem,3vw,2.6rem); width:max-content;
  animation:marquee 58s linear infinite; will-change:transform;
}
@media (hover:hover){ .flags:hover .flags__track{ animation-play-state:paused } }
.flag{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.82rem; color:var(--muted); white-space:nowrap;
  transition:color .4s var(--ease);
}
.flag:hover{ color:var(--text) }
.flags__note{
  margin-top:1.2rem; font-size:.84rem; color:var(--muted);
  font-weight:300; text-align:center;
}

/* Banderas dibujadas con gradientes: nada de imágenes ni emoji
   (los emoji de bandera no se ven en Windows). */
.f{
  position:relative; display:inline-block; flex:none;
  width:26px; height:18px; border-radius:3px; overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22), 0 2px 8px rgba(0,0,0,.4);
}
.f--ar{ background:linear-gradient(#74ACDF 33.3%,#fff 33.3% 66.6%,#74ACDF 66.6%) }
.f--ar::after{ content:''; position:absolute; left:50%; top:50%; width:26%; aspect-ratio:1; translate:-50% -50%; border-radius:50%; background:#F6B40E }
.f--uy{ background:
  linear-gradient(#fff,#fff) 0 0/45% 55% no-repeat,
  repeating-linear-gradient(#fff 0 11.1%,#0038A8 11.1% 22.2%); }
.f--uy::after{ content:''; position:absolute; left:22%; top:27%; width:17%; aspect-ratio:1; translate:-50% -50%; border-radius:50%; background:#F6B40E }
.f--cl{ background:
  radial-gradient(circle at 17% 25%, #fff 0 12%, transparent 12%),
  linear-gradient(#0039A6,#0039A6) 0 0/35% 50% no-repeat,
  linear-gradient(#fff 50%,#D52B1E 50%); }
.f--py{ background:linear-gradient(#D52B1E 33.3%,#fff 33.3% 66.6%,#0038A8 66.6%) }
.f--bo{ background:linear-gradient(#D52B1E 33.3%,#F9E300 33.3% 66.6%,#007934 66.6%) }
.f--pe{ background:linear-gradient(90deg,#D91023 33.3%,#fff 33.3% 66.6%,#D91023 66.6%) }
.f--ec{ background:linear-gradient(#FFDD00 50%,#0033A0 50% 75%,#CE1126 75%) }
.f--co{ background:linear-gradient(#FCD116 50%,#003893 50% 75%,#CE1126 75%) }
.f--ve{ background:linear-gradient(#FFCE00 33.3%,#00247D 33.3% 66.6%,#CF142B 66.6%) }
.f--br{ background:#009B3A }
.f--br::before{ content:''; position:absolute; inset:14% 7%; background:#FEDF00; clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%) }
.f--br::after{ content:''; position:absolute; left:50%; top:50%; width:34%; aspect-ratio:1; translate:-50% -50%; border-radius:50%; background:#002776 }
.f--mx{ background:linear-gradient(90deg,#006847 33.3%,#fff 33.3% 66.6%,#CE1126 66.6%) }
.f--gt{ background:linear-gradient(90deg,#4997D0 33.3%,#fff 33.3% 66.6%,#4997D0 66.6%) }
.f--sv{ background:linear-gradient(#0F47AF 33.3%,#fff 33.3% 66.6%,#0F47AF 66.6%) }
.f--hn{ background:linear-gradient(#0073CF 33.3%,#fff 33.3% 66.6%,#0073CF 66.6%) }
.f--ni{ background:linear-gradient(#0067C6 33.3%,#fff 33.3% 66.6%,#0067C6 66.6%) }
.f--cr{ background:linear-gradient(#0033A0 0 17%,#fff 17% 33%,#CE1126 33% 67%,#fff 67% 83%,#0033A0 83%) }
.f--pa{ background:
  linear-gradient(90deg,#fff 50%,#DA121A 50%) 0 0/100% 50% no-repeat,
  linear-gradient(90deg,#0073CE 50%,#fff 50%) 0 100%/100% 50% no-repeat; }
.f--do{ background:
  linear-gradient(#fff,#fff) 50% 0/17% 100% no-repeat,
  linear-gradient(#fff,#fff) 0 50%/100% 22% no-repeat,
  linear-gradient(90deg,#002D62 50%,#CE1126 50%) 0 0/100% 50% no-repeat,
  linear-gradient(90deg,#CE1126 50%,#002D62 50%) 0 100%/100% 50% no-repeat; }
.f--es{ background:linear-gradient(#AA151B 25%,#F1BF00 25% 75%,#AA151B 75%) }
.about__badge{
  position:absolute; right:-.5rem; bottom:1.6rem;
  background:rgba(8,10,17,.8); backdrop-filter:blur(10px);
  border:1px solid var(--line-strong); border-radius:100px;
  padding:.55rem 1.1rem; font-size:.74rem; letter-spacing:.06em; color:var(--text-2);
}

.about__text p{ color:var(--text-2); font-weight:300; margin-bottom:1.1rem; max-width:56ch }
.about__text p em{ font-family:var(--serif); font-style:italic; color:var(--text); font-size:1.08em }
.about__text p strong{ color:var(--accent-2); font-weight:500 }
/* Cada palabra en su propia caja para poder girarla (ver .flow-in en main.js) */
.fw{ display:inline-block }
.about__meta{
  display:flex; flex-wrap:wrap; gap:clamp(1.5rem,4vw,3rem);
  margin-top:2rem; padding-top:1.6rem; border-top:1px solid var(--line);
}
.about__meta b{ display:block; font-size:1.5rem; font-weight:600; letter-spacing:-.03em; color:var(--accent-2) }
.about__meta span{ font-size:.76rem; color:var(--muted) }

@media (max-width:860px){
  .about__grid{ grid-template-columns:1fr }
  .about__frame{ max-width:420px }
  .about__badge{ right:auto; left:1rem }
}

/* ═══════════════════════════════════════════
   15. PRÓXIMAMENTE
   ═══════════════════════════════════════════ */
.soon{ position:relative; padding-block:clamp(4.5rem,9vw,8rem) }
.soon__cards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.2rem; margin-block:clamp(2.5rem,6vw,4rem) 2rem;
}
/* Tres propiedades independientes, tres dueños distintos, cero peleas:
   `transform` lo escribe GSAP (la cámara de scroll), `translate` lo mueve
   la flotación en CSS y `scale` es el hover. El navegador las compone solo.
   OJO: nada de transition sobre transform, o el scroll iría con retraso. */
.soon__card{
  position:relative; padding:clamp(1.4rem,3vw,2rem);
  border-radius:var(--radius); border:1px solid var(--line);
  background:linear-gradient(165deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  backdrop-filter:blur(8px);
  transition:scale .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
  will-change:transform; overflow:hidden;
  animation:soonFloat 7.5s ease-in-out infinite;
}
.soon__card:nth-child(2){ animation-delay:-2.5s }
.soon__card:nth-child(3){ animation-delay:-5s }
@keyframes soonFloat{
  0%,100%{ translate:0 0 }
  50%    { translate:0 -7px }
}
/* Luz que recorre el filo de arriba: la tarjeta "está trabajando" */
.soon__card::before{
  content:''; position:absolute; z-index:1; inset:0 0 auto 0; height:2px;
  background:linear-gradient(90deg,transparent,var(--accent-2) 45% 55%,transparent);
  background-size:45% 100%; background-repeat:no-repeat;
  animation:soonEdge 5.5s var(--ease) infinite;
}
.soon__card:nth-child(2)::before{ animation-delay:1.1s }
.soon__card:nth-child(3)::before{ animation-delay:2.2s }
@keyframes soonEdge{
  0%      { background-position:-60% 0 }
  60%,100%{ background-position:160% 0 }
}
.soon__card::after{
  content:''; position:absolute; width:280px; height:280px; border-radius:50%;
  left:var(--mx,50%); top:var(--my,50%); translate:-50% -50%;
  background:radial-gradient(circle,var(--glow-soft),transparent 62%);
  opacity:0; transition:opacity .5s; pointer-events:none;
}
.soon__card:hover{ scale:1.025; border-color:rgba(124,92,255,.36); box-shadow:0 26px 60px -34px var(--glow) }
.soon__card:hover::after{ opacity:1 }

.soon__chip{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent-2); border:1px solid rgba(124,92,255,.36);
  background:rgba(124,92,255,.08); padding:.3rem .7rem; border-radius:100px; margin-bottom:1rem;
}
/* Punto en vivo, uno por tarjeta y desfasados entre sí */
.soon__chip i{
  position:relative; width:6px; height:6px; border-radius:50%; flex:none;
  background:var(--accent-2); box-shadow:0 0 10px var(--glow);
}
.soon__chip i::after{
  content:''; position:absolute; inset:-3px; border-radius:50%;
  border:1px solid var(--accent-2);
  animation:headPing 2.4s var(--ease) infinite;
}
.soon__card:nth-child(2) .soon__chip i::after{ animation-delay:.8s }
.soon__card:nth-child(3) .soon__chip i::after{ animation-delay:1.6s }
.soon__card h4{ font-size:1.2rem; font-weight:600; letter-spacing:-.03em; margin-bottom:.6rem }
.soon__card p{ font-size:.9rem; color:var(--muted); font-weight:300; line-height:1.6 }
.soon__foot{ color:var(--text-2); font-size:.95rem; font-weight:300; max-width:46ch }
/* La pregunta y el botón, uno al lado del otro mientras entren en la fila;
   apilados en cuanto no entran. La frase manda el ancho, el botón no se
   estira nunca (flex:none) porque un botón ancho parece una barra. */
.soon__cta{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(1rem,2.5vw,2rem); margin-top:clamp(2rem,4vw,3rem);
}
.soon__cta .btn{ flex:none }

/* ═══════════════════════════════════════════
   15 bis. CREDIBILIDAD
   Una tira fina apenas termina el hero. Sin cajas ni iconos: son
   cinco datos y punto.
   ═══════════════════════════════════════════ */
.prueba{ position:relative; z-index:2; padding-block:clamp(1.6rem,3.5vw,2.6rem) }
.prueba__fila{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(1.2rem,4vw,3.4rem);
  padding-block:1.3rem;
  border-block:1px solid var(--line);
}
.prueba__item{
  display:flex; flex-direction:column; align-items:center; gap:.15rem;
  text-align:center; min-width:88px;
  transition:transform .45s var(--ease);
}
a.prueba__item:hover{ transform:translateY(-3px) }
.prueba__item b{
  font-size:clamp(1.1rem,2.4vw,1.55rem); font-weight:600;
  letter-spacing:-.03em; color:var(--text);
  text-shadow:var(--sh-depth);
}
a.prueba__item:hover b{ color:var(--accent-2); text-shadow:var(--sh-hover), var(--sh-depth) }
.prueba__item span{ font-size:.72rem; color:var(--muted); letter-spacing:.02em; max-width:15ch }
@media (max-width:560px){
  .prueba__fila{ gap:1rem 1.4rem }
  .prueba__item{ min-width:76px }
  .prueba__item span{ font-size:.64rem }
}

/* ═══════════════════════════════════════════
   15 quáter. EN SIMPLE
   La sección más quieta de toda la landing, y es a propósito. Va justo
   después del hero, antes de cualquier efecto, para el visitante que no
   tiene tiempo ni ganas de mirar un espectáculo: tres pasos numerados,
   letra grande y ni una palabra técnica.

   Los tres pasos SÍ van en tarjeta, pero de un solo color y sin iconos:
   un panel violeta translúcido, del mismo acento que toda la página.
   La versión anterior era texto suelto sobre el fondo y se leía como
   una nota al pie de la sección; con el panel se leen como tres cosas
   que pasan, que es lo que son.

   Lo que las saca de la quietud no es el panel sino el scroll: entran
   escalonadas y atadas a la rueda, y el número gigante corre más lento
   que su texto, así el bloque nunca queda plano mientras se lo mira.
   ═══════════════════════════════════════════ */
.simple{ position:relative; z-index:2; padding-block:clamp(3.5rem,8vw,6.5rem) }
.simple__h{ max-width:18ch; margin-bottom:clamp(2.2rem,5vw,3.4rem) }
/* Con bajada debajo, el aire grande lo pone la bajada y no el título:
   si los dos ponen el suyo, el par se despega y deja de leerse como un
   bloque. */
.simple__h--bajada{ margin-bottom:clamp(.7rem,1.6vw,1rem) }
.simple__lead{ max-width:56ch; margin-bottom:clamp(2.2rem,5vw,3.4rem) }

/* La perspectiva vive acá, en la grilla, y no en cada panel: con una
   cámara por panel los tres giran cada uno hacia la suya y el conjunto
   se ve torcido; con una sola, se leen como tres carteles en la misma
   habitación. El origen va arriba del centro para que el arco se abra
   hacia el lector. */
.simple__pasos{
  list-style:none; display:grid; gap:clamp(1.8rem,4vw,3rem);
  grid-template-columns:repeat(3,1fr);
  perspective:1200px; perspective-origin:50% 34%;
}
@media (max-width:860px){ .simple__pasos{ grid-template-columns:1fr; gap:2.2rem } }

.simple__paso{
  position:relative; isolation:isolate; overflow:hidden;
  padding:clamp(1.5rem,3vw,2rem) clamp(1.35rem,2.7vw,1.8rem);
  border-radius:var(--radius);
  border:1px solid rgba(124,92,255,.20);
  background:linear-gradient(158deg,
    rgba(124,92,255,.155) 0%,
    rgba(124,92,255,.055) 52%,
    rgba(124,92,255,.02) 100%);
  backdrop-filter:blur(9px);
  transition:border-color .7s var(--ease), box-shadow .7s var(--ease);
}
/* El halo se enciende cuando el paso cruza la pantalla (clase .is-on).
   Va en un pseudo-elemento y no en el box-shadow de la tarjeta: así lo
   único que cambia es la opacidad de una capa, no la sombra de una caja. */
.simple__paso::before{
  content:''; position:absolute; z-index:-1; inset:-45% -25% auto -25%; height:140%;
  background:radial-gradient(46% 46% at 20% 14%, rgba(124,92,255,.42), transparent 72%);
  opacity:0; transition:opacity .9s var(--ease); pointer-events:none;
}
.simple__paso.is-on{ border-color:rgba(124,92,255,.42) }
.simple__paso.is-on::before{ opacity:1 }

/* El número es grande y va relleno con el degradado del acento: es lo
   primero que se ve de cada paso y lo que ordena la lectura de a tres.
   El resplandor va en filter y no en text-shadow — con el degradado
   recortado contra el texto, un text-shadow se ve A TRAVÉS del glifo
   transparente y el número queda con un fantasma corrido detrás. */
.simple__num{
  display:block; font-size:clamp(2.6rem,5.4vw,3.6rem); line-height:1;
  font-weight:700; letter-spacing:-.055em; margin-bottom:.45rem;
  background-image:linear-gradient(152deg,#F0EBFF,#A78BFF 44%,#6B4BE0);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 8px 22px rgba(124,92,255,.34));
}
.simple__paso b{
  display:block; font-size:clamp(1.05rem,2.2vw,1.3rem); font-weight:500;
  letter-spacing:-.02em; color:var(--text); margin-bottom:.6rem;
}
/* Un punto más grande que el resto de los párrafos de la página: esto
   tiene que poder leerse de un vistazo, incluso a un brazo de distancia. */
.simple__paso p{
  font-size:clamp(.95rem,1.7vw,1.06rem); line-height:1.65;
  color:var(--text-2); font-weight:300; max-width:38ch;
}

/* Párrafo normal, no flex: en flex cada <b> pasa a ser un ítem y el gap
   abre huecos en medio de la frase. */
.simple__cierre{
  margin-top:clamp(2.4rem,5vw,3.6rem); padding-top:1.4rem;
  border-top:1px solid var(--line);
  font-size:clamp(.95rem,1.9vw,1.12rem); line-height:1.7;
  color:var(--text-2); font-weight:300;
}
.simple__cierre b{ color:var(--text); font-weight:500 }
.simple__cierre a{
  margin-left:1.1rem; white-space:nowrap;
  color:var(--accent-2); border-bottom:1px solid currentColor;
  padding-bottom:1px; transition:opacity .3s var(--ease);
}
.simple__cierre a:hover{ opacity:.7 }

/* ═══════════════════════════════════════════
   15 ter. TRABAJOS
   Cuatro demos. Cada tarjeta lleva su propio color en --caso, así el
   borde y el enlace se tiñen del tema del sitio al que llevan: se ve
   de un vistazo que son cuatro mundos distintos.
   ═══════════════════════════════════════════ */
.casos{ position:relative; padding-block:clamp(4.5rem,10vw,8rem) }
.casos .lead{ margin-bottom:clamp(2.2rem,5vw,3.4rem) }
.casos .lead em{ font-family:var(--serif); font-style:italic; color:var(--text) }

.casos__grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(1rem,2.4vw,1.8rem);
}
@media (max-width:820px){ .casos__grid{ grid-template-columns:1fr } }

.caso{
  display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  backdrop-filter:blur(10px);
  transition:transform .55s var(--ease), border-color .55s var(--ease), box-shadow .55s var(--ease);
  will-change:transform;
}
.caso:hover{
  transform:translateY(-6px);
  border-color:var(--caso, var(--accent));
  box-shadow:0 30px 70px -40px var(--caso, var(--glow));
}
.caso__foto{ position:relative; overflow:hidden; background:var(--surface) }
.caso__foto img{
  width:100%; aspect-ratio:16/10; object-fit:cover;
  transition:transform .9s var(--ease), filter .9s var(--ease);
  filter:saturate(.9);
}
.caso:hover .caso__foto img{ transform:scale(1.05); filter:saturate(1.05) }
/* Un velo del color del tema: de lejos se leen los cuatro colores. */
.caso__foto::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, var(--caso, var(--accent)));
  opacity:.28; transition:opacity .6s var(--ease); mix-blend-mode:multiply;
}
.caso:hover .caso__foto::after{ opacity:.12 }

.caso__txt{ padding:clamp(1.2rem,2.4vw,1.7rem); display:flex; flex-direction:column; gap:.5rem; flex:1 }
.caso__rubro{
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--caso, var(--accent-2)); font-weight:500;
}
.caso__txt h4{ font-size:1.22rem; font-weight:600; letter-spacing:-.025em }
/* Hoy ninguna ficha lleva párrafo: el 2026-08-07 se borraron las seis
   descripciones, que contaban decisiones de diseño ("oscuro pero cálido",
   "titular entero en serif"). Eso le habla a un diseñador y el que paga es
   el dueño del negocio; además, la captura ya muestra de qué se trata. Las
   reglas quedan por si alguna vez vuelve a haber texto ahí. */
.caso__txt p{ font-size:.92rem; color:var(--text-2); font-weight:300; line-height:1.6 }
.caso__txt p em{ font-family:var(--serif); font-style:italic; color:var(--text) }
.caso__link{
  margin-top:auto; padding-top:.7rem;
  font-size:.85rem; font-weight:500; color:var(--text);
  display:inline-flex; align-items:center; gap:.4rem;
}
.caso__link i{ font-style:normal; transition:transform .45s var(--ease); color:var(--caso, var(--accent-2)) }
.caso:hover .caso__link i{ transform:translate(3px,-3px) }

.casos__nota{ margin-top:clamp(1.6rem,3vw,2.2rem); font-size:.8rem; color:var(--muted); max-width:60ch }

/* ═══════════════════════════════════════════
   15 ter bis. BENEFICIOS
   Dos columnas, una por situación: el que no tiene nada y el que tiene
   algo viejo. Se lee justo antes de "Qué incluye", así que lo primero
   que había que resolver es que las dos listas de tildes NO se parezcan
   —si no, la segunda se lee como la primera repetida—. Tres diferencias
   deliberadas: acá la tilde va en un círculo lleno y allá suelta, acá el
   texto es más grande, y acá cada ítem es un resultado y no una pieza.
   ═══════════════════════════════════════════ */
.benef{ position:relative; padding-block:clamp(3.5rem,8vw,6rem) }
.benef__grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(1.2rem,2.6vw,2rem);
  margin-top:clamp(2rem,4vw,3rem);
  /* Sin align-items: las dos cajas estiran a la misma altura. Con `start`
     cada una medía lo que medía su texto y la comparación se leía a
     descuido; parejas se leen como dos opciones del mismo peso, aunque a
     una le sobre un poco de aire abajo. */
}
@media (max-width:860px){ .benef__grid{ grid-template-columns:1fr } }

.benef__caja{
  padding:clamp(1.5rem,3vw,2.2rem);
  border:1px solid var(--line); border-radius:var(--radius);
  /* --vidrio existe en el tema de las demos pero no acá: el degradado va
     escrito y no con var(), para no dejar una variable fantasma. */
  background:linear-gradient(165deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  backdrop-filter:blur(10px);
  transition:border-color .5s var(--ease), transform .5s var(--ease);
}
@media (hover:hover){
  .benef__caja:hover{ border-color:rgba(124,92,255,.4); transform:translateY(-3px) }
}

/* El rótulo de quién es cada columna. Va arriba y en chico: el visitante
   tiene que poder saltearse la que no es la suya sin leerla. */
.benef__quien{
  display:block; margin-bottom:1.3rem; padding-bottom:.9rem;
  border-bottom:1px solid var(--line);
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-2); font-weight:500;
}

.benef__lista{ display:flex; flex-direction:column; gap:.95rem }
/* 1 rem contra los .92 de .plan__lista. Parece poco escrito así, pero es la
   diferencia entre "leelo" y "pasalo de largo": estas doce frases son el
   argumento, y la lista de la caja de al lado es la ficha del paquete. */
.benef__lista li{
  position:relative; padding-left:2rem;
  font-size:1rem; line-height:1.6; font-weight:300; color:var(--text-2);
}
/* La tilde adentro de un disco. Es lo que separa "esto te pasa a vos" de
   la ficha técnica de la caja de al lado. */
.benef__lista li::before{
  content:'✓'; position:absolute; left:0; top:.05em;
  display:grid; place-items:center;
  width:1.35rem; height:1.35rem; border-radius:50%;
  background:rgba(124,92,255,.16); border:1px solid rgba(124,92,255,.4);
  color:var(--accent-2); font-size:.72rem; font-weight:700;
}

/* ═══════════════════════════════════════════
   15 quater. PRECIO Y PREGUNTAS
   ═══════════════════════════════════════════ */
.plan{ position:relative; padding-block:clamp(4.5rem,10vw,8rem) }
.plan__grid{
  display:grid; grid-template-columns:.85fr 1.15fr;
  gap:clamp(2rem,5vw,4.5rem); align-items:start;
  margin-top:clamp(2rem,4vw,3rem);
}
@media (max-width:900px){ .plan__grid{ grid-template-columns:1fr } }

.plan__caja{
  position:sticky; top:calc(var(--header-h) + 20px);
  padding:clamp(1.6rem,3.4vw,2.4rem);
  border:1px solid var(--line-strong); border-radius:var(--radius);
  background:linear-gradient(165deg,rgba(124,92,255,.10),rgba(255,255,255,.02));
  backdrop-filter:blur(12px);
  box-shadow:0 40px 90px -60px #000;
}
@media (max-width:900px){ .plan__caja{ position:static } }

.plan__tags{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:1.1rem;
}
/* Quedó una sola chapita, así que va rellena y no calada: sola contra el
   fondo, el borde violeta sobre negro no la despega de nada. Antes eran
   dos y la calada existía para que la otra —la que apuraba— tuviera con
   qué contrastar. */
.plan__tag{
  display:inline-block; padding:.35rem .8rem; border-radius:100px;
  font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  white-space:nowrap;
  background:var(--accent); color:#fff; border:1px solid var(--accent);
  box-shadow:0 4px 18px -6px var(--glow);
}
/* Acá vivía la cifra —USD 249, a 4 rem—. Sacado el número, el lugar no se
   deja vacío: el ojo entra a la caja por acá, y si arriba de todo hay una
   lista de tildes, la caja se lee a formulario. Ahora entra por la promesa,
   en cuerpo de titular chico en vez de cuerpo de precio. */
.plan__cifra{
  font-size:clamp(1.9rem,3.6vw,2.6rem); font-weight:600;
  letter-spacing:-.035em; line-height:1.06;
  text-shadow:var(--sh-depth);
}
.plan__cifra i{
  font-family:var(--serif); font-style:italic; font-weight:400;
  letter-spacing:-.01em; color:var(--accent-2);
}
.plan__nota{ font-size:.86rem; color:var(--text-2); margin:.6rem 0 .7rem }
/* La fecha de corte: lo único que convierte un cupo en un cupo. */
.plan__promo{
  font-size:.78rem; color:var(--text-2); font-weight:300;
  margin-bottom:1.5rem; padding-left:.7rem;
  border-left:2px solid var(--accent);
}
.plan__promo b{ color:var(--text); font-weight:600 }

.plan__lista{ display:flex; flex-direction:column; gap:.6rem; margin-bottom:1.2rem }
.plan__lista li{ display:flex; gap:.6rem; align-items:flex-start; font-size:.92rem; color:var(--text-2); font-weight:300 }
.plan__lista li::before{ content:'✓'; color:var(--accent-2); flex:none; font-weight:600 }
.plan__lista li b{ color:var(--text); font-weight:600 }
.plan__lista--no li{ color:var(--muted) }
.plan__lista--no li::before{ content:'+'; color:var(--muted) }
.plan__pie{ font-size:.72rem; color:var(--muted); margin-top:1rem; text-align:center; line-height:1.6 }

/* Acordeón de preguntas */
.faq details{ border-bottom:1px solid var(--line); padding-block:1.15rem }
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  cursor:pointer; list-style:none;
  font-size:1rem; font-weight:500; letter-spacing:-.015em;
  transition:color .3s;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{
  content:'+'; flex:none; font-size:1.4rem; line-height:1;
  color:var(--accent-2); transition:transform .4s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(45deg) }
.faq summary:hover{ color:var(--accent-2) }
.faq details p{
  margin-top:.75rem; color:var(--text-2); font-size:.93rem;
  font-weight:300; line-height:1.7; max-width:64ch;
}

/* ═══════════════════════════════════════════
   15 quinquies. GLOSARIO
   Un diccionario al pie, para el que no vive de esto. Es la sección más
   sobria de la página a propósito: viene después del formulario, o sea
   que el que llega hasta acá viene con una duda concreta, no a mirar.

   El fondo es más oscuro que el resto para que se lea como un anexo y no
   como una sección más de venta.
   ═══════════════════════════════════════════ */
.glosario{
  position:relative; z-index:2;
  padding-block:clamp(4rem,9vw,7rem);
  border-top:1px solid var(--line);
  background:rgba(8,10,17,.55);
}
.glosario__h{ max-width:16ch }
.glosario__lead{ margin-top:1rem; max-width:52ch }

/* Dos columnas de fichas. En vez de una tabla o una lista con viñetas,
   cada término es un bloque con su propia línea de base: así el ojo
   puede saltar de negrita en negrita y frenar sólo en la que busca. */
.glosario__lista{
  margin-top:clamp(2.2rem,5vw,3.4rem);
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(1.4rem,3vw,2.4rem) clamp(2rem,5vw,4rem);
}
@media (max-width:760px){ .glosario__lista{ grid-template-columns:1fr } }

.glosario__item{
  padding-top:1.1rem;
  border-top:1px solid var(--line);
  transition:border-color .4s var(--ease);
}
@media (hover:hover){
  .glosario__item:hover{ border-top-color:var(--accent) }
}
.glosario__item dt{
  font-size:1.02rem; font-weight:600; letter-spacing:-.02em;
  margin-bottom:.5rem;
}
.glosario__item dd{
  font-size:.9rem; line-height:1.7; font-weight:300;
  color:var(--text-2); margin:0;
}
.glosario__item dd em{ color:var(--accent-2); font-style:normal }

.glosario__cierre{
  margin-top:clamp(2.2rem,4vw,3rem);
  font-size:.92rem; color:var(--muted); font-weight:300;
}
.glosario__cierre a{ color:var(--accent-2); text-decoration:underline; text-underline-offset:.22em }

/* ═══════════════════════════════════════════
   16. CONTACTO + FOOTER
   ═══════════════════════════════════════════ */
.contact{
  position:relative; overflow:hidden;
  padding-top:clamp(5rem,10vw,9rem);
  background:linear-gradient(180deg, rgba(8,10,17,0), rgba(8,10,17,.72) 26%, rgba(8,10,17,.92) 100%);
}
.contact__grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem,6vw,6rem); align-items:start;
  padding-bottom:clamp(4rem,8vw,7rem);
}
.contact__list{ margin-top:2.4rem; display:flex; flex-direction:column; gap:1rem }
.contact__list li{ display:flex; align-items:center; gap:.8rem; color:var(--text-2); font-size:.92rem }
.contact__list svg{ color:var(--accent-2); flex:none }
.contact__list a{ transition:color .3s }
.contact__list a:hover{ color:var(--accent-2) }

.form{
  padding:clamp(1.5rem,3.5vw,2.6rem); border-radius:var(--radius);
  border:1px solid var(--line);
  background:linear-gradient(165deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  backdrop-filter:blur(12px);
  box-shadow:0 40px 90px -60px #000;
}
.form__hp{ position:absolute; left:-9999px; opacity:0; pointer-events:none }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem }
@media (max-width:560px){ .form__row{ grid-template-columns:1fr } }

.field{ position:relative; margin-bottom:1rem }
.field input,.field select,.field textarea{
  width:100%; padding:1.35rem 1rem .6rem;
  background:rgba(8,10,17,.45); border:1px solid var(--line); border-radius:12px;
  font-size:.92rem; appearance:none;
  transition:border-color .35s var(--ease), background-color .35s var(--ease), box-shadow .35s var(--ease);
}
.field textarea{ resize:vertical; min-height:120px; padding-top:1.6rem }
.field select{
  padding-top:1.35rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238D96AC' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; background-size:12px; cursor:pointer;
}
.field select option{ background:var(--surface); color:var(--text) }

.field label{
  position:absolute; left:1rem; top:1.05rem;
  font-size:.92rem; color:var(--muted); pointer-events:none;
  transition:transform .3s var(--ease), font-size .3s var(--ease), color .3s var(--ease);
  transform-origin:0 50%;
}
.field label em{ font-style:normal; opacity:.6; font-size:.85em }
.field label.label--static,
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label,
.field select:focus + label,
.field select:valid + label{
  transform:translateY(-.72rem) scale(.76); color:var(--accent-2);
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:var(--accent);
  background:rgba(124,92,255,.08); box-shadow:0 0 0 3px rgba(124,92,255,.12);
}
.field.has-error input,.field.has-error textarea,.field.has-error select{
  border-color:#ff6b81; box-shadow:0 0 0 3px rgba(255,107,129,.12);
}

.form__note{ font-size:.72rem; color:var(--muted); margin-top:1rem; line-height:1.5 }
.form__status{ font-size:.86rem; margin-top:.9rem; min-height:1.2em }
.form__status.is-ok{ color:var(--accent-2) }
.form__status.is-err{ color:#ff8b9c }
/* El enlace de rescate. Va subrayado y en blanco: aparece dentro de una
   línea roja de error, y si además fuera rojo se leería como parte de la
   queja en vez de como la salida. Es lo único cliqueable de esa línea. */
.form__rescate{
  display:inline-block; color:#fff; font-weight:600;
  text-decoration:underline; text-underline-offset:3px;
}
.form__rescate:hover{ color:var(--accent-2) }

@media (max-width:860px){ .contact__grid{ grid-template-columns:1fr } }

.footer{ position:relative; z-index:2; border-top:1px solid var(--line); padding-block:2.5rem 6rem }
.footer__inner{ display:flex; flex-direction:column; gap:.4rem; align-items:center; text-align:center }
.footer__brand{
  display:flex; align-items:center; gap:.6rem;
  font-size:1.05rem; font-weight:600; letter-spacing:-.02em; margin-bottom:.25rem;
}
.footer__brand svg{ color:var(--accent-2) }
.footer__brand em{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--accent-2) }
.footer__inner p{ font-size:.85rem; color:var(--text-2) }
.footer__inner small{ font-size:.72rem; color:var(--muted) }

/* Enlaces legales: presentes pero sin robarle protagonismo al contacto */
.footer__legal{
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; justify-content:center;
  margin-top:.5rem; font-size:.75rem; color:var(--muted);
}
.footer__legal a{ color:var(--muted); text-decoration:none; border-bottom:1px solid transparent; transition:color .3s var(--ease), border-color .3s var(--ease) }

/* ── El monograma del pie, extruido en 3D ──
   Seis copias apiladas en profundidad. El bloque gira solo, así que la
   extrusión se lee. Puros transform: compone, no repinta.

   POR QUÉ SE TRABABA. Antes era una sola animación de ida y vuelta:
   0 % y 100 % en la misma pose, con la vuelta en el 50 %. Dos problemas
   encimados. Uno, la curva era var(--ease), que frena al final de cada
   tramo: el bloque llegaba muerto a los dos extremos y se quedaba
   quieto un instante, dos veces por vuelta. Y dos, el eje era uno solo,
   así que aunque la curva fuera pareja el movimiento igual se detiene
   cuando invierte el sentido — es inevitable con un solo eje.

   LA SOLUCIÓN. Dos ejes anidados, cada uno con su propia duración y sin
   relación entera entre ellas: 7 s el giro horizontal y 11 s el
   cabeceo. Cuando uno frena para darse vuelta, el otro va por la mitad
   de su recorrido, así que el conjunto no se detiene nunca. Y como 7 y
   11 no tienen divisores comunes, la pose completa recién se repite a
   los 77 segundos: el ojo no le encuentra el compás.

   Las curvas son cubic-bezier planas —casi lineales en el medio— en vez
   de var(--ease): en un vaivén, lo que se quiere es velocidad pareja y
   una vuelta corta, no una llegada frenada. */
.footer__mark{
  width:clamp(40px,4.6vw,56px); aspect-ratio:107/100;
  perspective:300px; flex:none;
}
.fm__cubo{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d;
  animation:fmGiraY 7s cubic-bezier(.42,0,.58,1) infinite;
}
.fm__eje{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  animation:fmGiraX 11s cubic-bezier(.42,0,.58,1) infinite;
}
/* 3,4 px por capa en vez de 2,6: con seis capas son 17 px de fondo
   contra los 13 de antes. Es lo que hace que se lea como un bloque y no
   como un logo con sombra. */
.fm__capa{
  position:absolute; inset:0; color:var(--c);
  transform:translateZ(calc(var(--i) * -3.4px));
}
.fm__capa svg{ width:100%; height:100%; display:block }
/* La cara de adelante lleva el brillo */
.fm__capa[style*="--i:0"]{ filter:drop-shadow(0 0 10px rgba(172,155,255,.55)) }
@keyframes fmGiraY{
  0%,100%{ transform:rotateY(-36deg) }
  50%    { transform:rotateY( 36deg) }
}
@keyframes fmGiraX{
  0%,100%{ transform:rotateX( 13deg) }
  50%    { transform:rotateX(-11deg) }
}
@media (hover:hover){
  .footer__brand:hover .fm__cubo{ animation-duration:2.6s }
  .footer__brand:hover .fm__eje{  animation-duration:4.1s }
}

/* ── El mismo monograma, chico, en el header ──
   Cuatro capas y no seis: mide 26 px, y a ese tamaño la sexta capa ya no
   agrega profundidad, sólo emborrona el trazo.

   Este vive fijo en pantalla durante todo el scroll, así que la amplitud
   es la mitad de la del pie y el ciclo casi el doble de largo: tiene que
   notarse si lo mirás, y no llamarte si no. Al pasar el mouse por el logo
   se despierta. */
.hlogo{
  width:26px; aspect-ratio:107/100; flex:none;
  perspective:150px; display:block;
}
.hlogo__cubo{
  position:relative; display:block; width:100%; height:100%;
  transform-style:preserve-3d;
  animation:hlGiraY 12s cubic-bezier(.42,0,.58,1) infinite;
}
.hlogo__eje{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  animation:hlGiraX 17s cubic-bezier(.42,0,.58,1) infinite;
}
.hlogo__capa{
  position:absolute; inset:0; color:var(--c);
  transform:translateZ(calc(var(--i) * -1.7px));
}
.hlogo__capa svg{ width:100%; height:100%; display:block }
.hlogo__capa[style*="--i:0"]{ filter:drop-shadow(0 0 7px rgba(172,155,255,.5)) }
@keyframes hlGiraY{
  0%,100%{ transform:rotateY(-19deg) }
  50%    { transform:rotateY( 19deg) }
}
@keyframes hlGiraX{
  0%,100%{ transform:rotateX(  8deg) }
  50%    { transform:rotateX( -7deg) }
}
@media (hover:hover){
  .header__logo:hover .hlogo__cubo{ animation-duration:3.2s }
  .header__logo:hover .hlogo__eje{  animation-duration:4.7s }
}

.footer__social{ display:flex; gap:.6rem; margin:.7rem 0 .3rem }
.footer__social a{
  display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
  color:var(--muted); border:1px solid var(--line); background:rgba(255,255,255,.02);
  transition:color .35s var(--ease), border-color .35s var(--ease),
             background .35s var(--ease), transform .35s var(--ease),
             box-shadow .35s var(--ease);
}
.footer__social svg{
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.footer__social a:hover,.footer__social a:focus-visible{
  color:var(--text); border-color:rgba(124,92,255,.55);
  background:rgba(124,92,255,.14); transform:translateY(-3px);
  box-shadow:0 10px 22px -12px var(--accent);
}
.footer__legal a:hover,.footer__legal a:focus-visible{ color:var(--text-2); border-bottom-color:var(--accent) }

/* ═══════════════════════════════════════════
   17. PÁGINAS DE TEXTO (legales)
   Sin efectos ni scripts pesados: se leen y listo.
   ═══════════════════════════════════════════ */
.doc{ position:relative; z-index:2; padding-block:calc(var(--header-h) + 3rem) 5rem }
.doc__inner{ max-width:72ch; margin-inline:auto }
.doc__volver{
  display:inline-flex; align-items:center; gap:.5rem; margin-bottom:2.5rem;
  font-size:.85rem; color:var(--muted); text-decoration:none;
  transition:color .3s var(--ease);
}
.doc__volver:hover,.doc__volver:focus-visible{ color:var(--accent-2) }
.doc h1{
  font-family:var(--serif); font-weight:400; letter-spacing:-.02em; line-height:1.05;
  font-size:clamp(2.1rem,5vw,3.4rem); margin-bottom:.6rem;
}
.doc h1 em{ font-style:italic; color:var(--accent-2) }
.doc__fecha{ font-size:.8rem; color:var(--muted); margin-bottom:3.5rem }
.doc section{ margin-bottom:3.5rem; scroll-margin-top:calc(var(--header-h) + 1.5rem) }
.doc h2{
  font-size:clamp(1.35rem,2.6vw,1.9rem); font-weight:600; letter-spacing:-.03em;
  margin-bottom:1.4rem; padding-bottom:.8rem; border-bottom:1px solid var(--line);
}
.doc h3{ font-size:1.02rem; font-weight:600; margin:2rem 0 .6rem; color:var(--text) }
.doc p,.doc li{ color:var(--text-2); font-weight:300; line-height:1.75; font-size:.95rem }
.doc p+p{ margin-top:.9rem }
.doc ul{ margin:.9rem 0 0 1.1rem; display:grid; gap:.6rem }
.doc li::marker{ color:var(--accent) }
.doc a{ color:var(--accent-2); text-decoration:none; border-bottom:1px solid rgba(124,92,255,.4) }
.doc a:hover,.doc a:focus-visible{ border-bottom-color:var(--accent-2) }
.doc strong{ color:var(--text); font-weight:500 }
.doc__nota{
  margin-top:1.4rem; padding:1rem 1.2rem; border-radius:14px;
  border:1px solid var(--line-strong); background:rgba(124,92,255,.07);
  font-size:.88rem;
}

/* ═══════════════════════════════════════════
   17. WHATSAPP FLOTANTE
   ═══════════════════════════════════════════ */
.wa{
  position:fixed; right:clamp(1rem,2.5vw,2rem); bottom:clamp(1rem,2.5vw,2rem);
  z-index:850; display:flex; align-items:center; gap:.6rem;
  height:58px; padding-inline:16px; border-radius:100px;
  background:#1FAE54; color:#fff;
  box-shadow:0 14px 38px -12px rgba(31,174,84,.6), 0 0 0 1px rgba(255,255,255,.08) inset;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), opacity .5s var(--ease);
  will-change:transform;
  opacity:0; transform:translateY(20px) scale(.85); pointer-events:none;
}
.wa.is-visible{ opacity:1; transform:none; pointer-events:auto }
.wa:hover{ transform:translateY(-3px); box-shadow:0 20px 48px -14px rgba(31,174,84,.75) }
.wa__label{
  font-size:.88rem; font-weight:500; white-space:nowrap;
  max-width:0; overflow:hidden; opacity:0;
  transition:max-width .5s var(--ease), opacity .4s var(--ease);
}
.wa:hover .wa__label{ max-width:120px; opacity:1 }
.wa__pulse{
  position:absolute; inset:0; border-radius:100px;
  border:1px solid rgba(31,174,84,.7);
  animation:waPulse 2.8s var(--ease) infinite; pointer-events:none;
}
@keyframes waPulse{
  0%{ transform:scale(1); opacity:.8 }
  70%{ transform:scale(1.35); opacity:0 }
  100%{ opacity:0 }
}
@media (max-width:640px){
  .wa{ height:54px; padding-inline:14px }
  .wa__label{ display:none }
}

/* ═══════════════════════════════════════════
   18. ESTADOS INICIALES DE ANIMACIÓN
   ═══════════════════════════════════════════ */
.js .reveal-up{ opacity:0; transform:translateY(26px) }
.js .lcard{ opacity:0 }
.js .simple__paso{ opacity:0 }

/* Si GSAP no cargó (CDN caído o bloqueado): todo visible, sin animaciones */
.no-gsap .reveal-up,
.no-gsap .lcard,
.no-gsap .simple__paso,
.no-gsap .rubros__h .h-word,
.no-gsap .assemble .as-ch,
.no-gsap .hero__title .w{ opacity:1 !important; transform:none !important }
.no-gsap .rubros__regla{ transform:none }
.no-gsap .intro{ display:none }
.no-gsap .wa{ opacity:1; transform:none; pointer-events:auto }
.no-gsap .compare{ height:auto }
.no-gsap .compare__sticky{ position:relative; height:auto }
.no-gsap .compare__stage{ --wipe:50% }

/* ═══════════════════════════════════════════
   19. ACCESIBILIDAD / REDUCED MOTION
   ═══════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
   GRANO Y VIÑETA
   Las dos capas que más sacan el "look de plantilla". Van encima
   de todo el contenido y debajo del cursor y de la cortina.

   El grano es una sola textura de ruido que salta entre ocho
   posiciones. Salta con `transform`, que no repinta nada: cuesta
   lo mismo que una capa quieta. La viñeta es un degradado fijo.

   Las dos son decorativas y las inyecta el JS: si no hay JS no
   aparecen y no pasa nada.
   ═══════════════════════════════════════════════════════════ */
:root{
  --grano-op:  .045;
  /* OJO CON ESTE DEGRADADO. La primera versión abría el negro en el 42 %
     del radio y llegaba al 50 % de opacidad: como el titular del hero
     arranca a un 5 % del borde izquierdo, le caía encima medio negro y
     el blanco del texto se veía gris sucio. Parecía un problema de
     tipografía y era la viñeta tapándola.

     Regla: el negro no puede empezar antes de que el óvalo pase el
     borde del texto. Con 100% x 88% centrado en 50% 45%, la esquina
     superior izquierda del titular cae en 0,57 del radio — por eso el
     primer tramo llega hasta 0,62. Sólo se oscurecen las esquinas.

     En tema oscuro cierra con negro; los temas claros la pisan con su
     propio valor (o la apagan del todo). */
  --vineta: radial-gradient(100% 88% at 50% 45%, transparent 62%, rgba(0,0,0,.45) 100%);
}

.grano,.vineta{ position:fixed; pointer-events:none }

.grano{
  /* Se extiende más allá de la pantalla porque se mueve: si midiera
     justo, cada salto dejaría un borde vacío. */
  inset:-140px; z-index:940;
  opacity:var(--grano-op);
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E");
  animation:granear 1.1s steps(1,end) infinite;
  will-change:transform;
}
@keyframes granear{
  0%   { transform:translate3d(0,0,0) }
  12%  { transform:translate3d(-3%,-5%,0) }
  25%  { transform:translate3d(-8%,2%,0) }
  37%  { transform:translate3d(4%,-3%,0) }
  50%  { transform:translate3d(-2%,6%,0) }
  62%  { transform:translate3d(6%,4%,0) }
  75%  { transform:translate3d(-6%,-2%,0) }
  87%  { transform:translate3d(2%,5%,0) }
  100% { transform:translate3d(0,0,0) }
}

.vineta{ inset:0; z-index:939; background:var(--vineta) }

/* En pantallas chicas el grano se ve el doble de grueso —los píxeles
   son más chicos— y encima la mezcla de capas es de lo más caro que
   hay en un teléfono. Va más suave. */
@media (max-width:760px){
  :root{ --grano-op:.035 }
}
/* Equipos flojos: no hay grano. Es lo primero que conviene resignar. */
.tier-low .grano{ display:none }

@media (prefers-reduced-motion:reduce){
  .grano{ animation:none }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .js .reveal-up,.js .lcard,.js .simple__paso{ opacity:1 !important; transform:none !important }
  .hero__scroll-hint i{ animation:none }
  /* El giro de las tarjetas pasa a ser un fundido: la información de
     atrás sigue estando, y no hay 180 grados de nada dando vueltas. */
  .lcard__gira{ transform:none !important }
  .lcard__cara{ backface-visibility:visible; -webkit-backface-visibility:visible }
  .lcard__dorso{ transform:none; opacity:0; pointer-events:none }
  .lcard:hover .lcard__dorso,.lcard.is-vuelta .lcard__dorso{ opacity:1 }
  .lcard:hover .lcard__frente,.lcard.is-vuelta .lcard__frente{ opacity:0 }
  .rubros__regla{ transform:none }
  .rubros__h .h-word{ opacity:1 !important; transform:none !important }
  .compare{ height:auto }
  .compare__sticky{ position:relative; height:auto }
  .compare__stage{ --wipe:50% }
  .bg{ display:none }
  .bg-static{ display:block; animation:none }
  /* El muro no se mueve solo, pero sigue siendo legible */
  .wall__track,.flags__track,.marquee__track{ animation:none }
  .wall__inner{ transform:none }
  .wall{ overflow-x:auto }
  .about__sheen,.about__scan,.newsite__scan{ display:none }
  .swap{ min-height:0 }
  .swap i{ position:static; opacity:0 }
  .swap i.is-on{ opacity:1 }
  .fill-text .ch{ color:var(--text) }
  p.fill-text .ch{ color:var(--text-2) }
  .assemble .as-ch{ opacity:1 !important; transform:none !important }
  .btn--beat,.newsite__cta,.newsite__cta::before,.newsite__navcta,
  .headstart,.headstart::before,.headstart__tag i::after,
  .newsite__grid,.newsite__brand i,.newsite__kicker i,.newsite__h1 em,
  .newsite__stars,.newsite__spark polyline,.newsite__ring,.newsite__card,
  .newsite__panel,.newsite__panel-btn,
  .compare__tag--new,.compare__tag--new i::after,
  .soon__card,.soon__card::before,.soon__chip i::after{ animation:none }
  /* Sin el latido, "Ahora" sigue destacándose por color y contraste */
  .compare__tag--new{ box-shadow:0 6px 22px -8px rgba(124,92,255,.7) }
  /* Sin animación la curva quedaría sin dibujar */
  .newsite__spark polyline{ stroke-dashoffset:0 }
  /* Los globos no flotan ni la lava corre; el monograma se queda de frente */
  .globo{ animation:none }
  .globo__inflar{ transform:scale(1) }
  .lava{ animation:none }
  .rubros__punch::before{ animation:none }
  .fm__cubo{ animation:none; transform:rotateY(-16deg) }
  .fm__eje{  animation:none; transform:rotateX(5deg) }
  .hlogo__cubo{ animation:none; transform:rotateY(-14deg) }
  .hlogo__eje{  animation:none; transform:rotateX(4deg) }
  .compare__hud,.compare__sweep,.compare__morph{ display:none }
  .headstart::before{ background:rgba(124,92,255,.4) }
}

.no-js .loader{ display:none }
.no-js .wa{ opacity:1; transform:none; pointer-events:auto }

/* ═══════════════════════════════════════════════════════════
   EL REFLEJO VIOLETA DE LOS TÍTULOS
   Una luz del color de la marca cruza cada titular de la página, de
   arriba a abajo del sitio. Es el mismo mecanismo que llevan las seis
   demos, traído acá con el violeta del estudio.

   Qué resuelve: los títulos ya tenían profundidad (una sombra) y un
   halo violeta al entrar en pantalla (.is-lit), pero las dos cosas son
   ESTADOS —se prenden una vez y se quedan—. Un título que entra, se
   ilumina y después no vuelve a pasar nada se lee plano a los tres
   segundos. Esto es lo contrario: no marca un momento, es algo que
   sigue ocurriendo mientras el título está a la vista.

   ⚠ SE PINTA EN CADA LETRA, NO EN EL TÍTULO. Los titulares de esta
   página están partidos en palabras (.h-word, .w, .as-ch) y GSAP las
   transforma. Un degradado pintado en el <h2> se recortaría contra la
   caja sin transformar y saldría cortado en diagonal.

   ⚠ ARRANCA PAUSADO Y SÓLO CORRE EL TÍTULO QUE SE ESTÁ VIENDO. Animar
   `background-position` repinta el elemento en cada cuadro —no es
   `transform`, que lo resuelve la placa—. Esta página tiene catorce
   titulares: uno a la vez no se siente, los catorce a la vez son
   trescientos elementos repintando para que se vean veinte. Eso lo
   maneja initReflejo con un IntersectionObserver.

   ⚠ Y NO VA EN .fill-text. Esos dos títulos ya se encienden letra por
   letra con el scroll, que es exactamente el mismo idioma: encima uno
   del otro, se pelean por el color de la misma letra.
   ═══════════════════════════════════════════════════════════ */
.reflejo{
  --rf-1: var(--text);
  --rf-2: #B49CFF;   /* el violeta claro: sobre el fondo casi negro,
                        --accent (#7C5CFF) se apaga y parece gris */
  --rf-3: var(--text);
  --rf-luz: 7s;
}
/* La palabra entera, que es lo que no se puede partir: una letra suelta
   con display:inline-block es un punto donde el renglón PUEDE cortar, y
   sin este envoltorio los títulos se quiebran a mitad de palabra. */
.reflejo .rf-w{ display:inline-block; white-space:nowrap }
.reflejo .rf-ch{
  display:inline-block;
  background-image:linear-gradient(100deg,
    var(--rf-1) 0 38%, var(--rf-2) 50%, var(--rf-3) 62% 100%);
  background-size:300% 100%;
  background-position:118% 0;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  /* ⚠ Acá no va var(--ease). La curva del sistema es de salida fuerte:
     se come el recorrido en los primeros 300 ms y lo que queda es un
     parpadeo. Con una curva pareja la luz tarda casi dos segundos en
     cruzar el renglón y se lee como una luz que pasa. */
  animation:rfLuz var(--rf-luz) cubic-bezier(.5,.06,.42,.96) infinite;
  animation-play-state:paused;
}
.reflejo.is-viendo .rf-ch{ animation-play-state:running }
@keyframes rfLuz{
  0%, 64%, 100%{ background-position:118% 0 }
  26%, 36%     { background-position:-18% 0 }
}
/* El <em> en serif del hero tiene su propio violeta. Adentro del <em>
   se dan vuelta las paradas: la palabra descansa en el acento y la luz
   que la cruza es la del texto. Es la MISMA luz recorriendo el renglón,
   revelada al revés donde el titular cambia de voz. */
.reflejo em{
  --rf-1: var(--accent-2);
  --rf-2: var(--text);
  --rf-3: var(--accent-2);
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .reflejo .rf-ch{ background:none; color:var(--text); animation:none }
}
.no-gsap .reflejo .rf-ch{ background:none; color:var(--text); animation:none }
@media (prefers-reduced-motion:reduce){
  .reflejo .rf-ch{ animation:none; background:none; color:var(--text) }
}