/* ============================================================
   EVO WEB DESIGN SYSTEM v1 — dirección de arte v2
   Tecnologías EVO — HOME

   Arquitectura de scroll: APROBADA, intacta (sticky + scrub + solape).
   Esta capa cambia sólo luz, materia, composición y tipografía.

   Principio rector de luz:
     el fondo es casi negro SIEMPRE; el azul y el cian son LUZ EMITIDA
     por una fuente localizada, con caída progresiva. Nunca relleno.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Oscuridad base — el 90% de la pantalla vive aquí */
  --bg-deep:#010308;
  --bg:#02050B;
  --bg-2:#030712;
  --bg-3:#050A14;

  /* Materia: superficies apenas más claras que el fondo */
  --surface:rgba(9,16,28,.72);
  --surface-hi:rgba(14,24,42,.82);
  --line:rgba(122,166,220,.09);
  --line-hi:rgba(140,195,255,.18);
  --line-lit:rgba(140,210,255,.34);

  /* Tinta */
  --text:#E9F1FB;
  --text-dim:#B4C7DE;
  /* Subidos respecto a v2: el copy comercial no puede vivir al límite del
     contraste sólo para sostener el tono oscuro. */
  --muted:#93A8C2;
  --faint:#63799A;
  --ghost:rgba(120,160,210,.13);

  /* Luz */
  --blue:#1F6FFF;
  --blue-deep:#0A3FB0;
  --cyan:#35E2FF;
  /* Cian saturado sólo en piezas pequeñas. En display grande satura la
     pantalla y lee como neón: ahí va la variante luminosa, no la eléctrica. */
  --cyan-soft:#A6E6FF;
  --violet:#7B5CFF;

  /* Medidas */
  --max:1200px;
  --gutter:clamp(20px,4vw,48px);
  --header:74px;
  --r-sm:10px;
  --r-md:14px;
  --r-lg:20px;

  /* Tipografía — techos más bajos, más aire (v2) */
  --fs-eyebrow:.7rem;
  --fs-body:clamp(.98rem,.94rem + .28vw,1.1rem);
  --fs-lead:clamp(1rem,.96rem + .42vw,1.18rem);
  --fs-h3:clamp(1.3rem,1.1rem + .85vw,1.85rem);
  --fs-h2:clamp(1.95rem,1.45rem + 2.1vw,3.5rem);
  --fs-h1:clamp(2.5rem,1.75rem + 3.2vw,4.7rem);

  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.2,.7,.2,1);
  --t-fast:160ms;
  --t-base:300ms;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  /* clip (no hidden): hidden crearía un contenedor de scroll y rompería sticky */
  overflow-x:clip;
  scroll-padding-top:calc(var(--header) + 20px);
}
body{
  margin:0;
  overflow-x:clip;
  background:var(--bg-deep);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:var(--fs-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
body.menu-open{overflow:hidden}
h1,h2,h3,h4,p,figure,blockquote,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img,canvas,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3{line-height:1.06;letter-spacing:-.032em;font-weight:740;text-wrap:balance}
h1{font-size:var(--fs-h1);letter-spacing:-.04em}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);letter-spacing:-.02em}
em{font-style:normal;color:var(--cyan)}
p{text-wrap:pretty}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.skip-link{position:fixed;z-index:2000;top:10px;left:10px;padding:10px 18px;background:#fff;color:#000;border-radius:8px;transform:translateY(-200%)}
.skip-link:focus{transform:none}
:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;border-radius:6px}

.container{width:min(100% - (var(--gutter) * 2),var(--max));margin-inline:auto}

/* ---------- 3. CAPA CÓSMICA ---------- */
.cosmos{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:clip;background:var(--bg-deep)}
#cosmos-canvas{position:absolute;inset:0;width:100%;height:100%}

/* Nebulosas: presencia mínima. Son polvo, no fondo. */
.nebula{position:absolute;border-radius:50%;filter:blur(110px);will-change:transform,opacity}
.nebula-a{width:64vw;height:64vw;left:-20vw;top:-16vw;background:radial-gradient(circle,rgba(31,111,255,.10),transparent 66%);opacity:.7}
.nebula-b{width:52vw;height:52vw;right:-18vw;top:38vh;background:radial-gradient(circle,rgba(123,92,255,.06),transparent 68%);opacity:.6}

/* ---------- 4. EVO HORIZON ----------
   Interior casi negro. TODA la luz nace en el filo y decae hacia dentro
   y hacia fuera. Cuatro capas: cuerpo, filo, atmósfera interior, halo exterior. */
.evo-horizon{
  position:absolute;
  left:50%;
  top:58vh;
  width:300vw;          /* mucho mayor que el viewport: curvatura enorme */
  height:300vw;
  transform:translateX(-50%);
  will-change:transform,opacity;
}
/* Cuerpo: negro con un único lavado de luz que muere a un 14% del borde */
.horizon-body{
  position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(105% 62% at 50% 0%,
      rgba(74,190,255,.13) 0%,
      rgba(30,96,190,.055) 5%,
      rgba(12,34,74,.022) 10%,
      transparent 15%),
    #010308;
}
/* Filo: hairline. La fuente de luz real de toda la escena. */
.horizon-rim{
  position:absolute;inset:0;border-radius:50%;
  box-shadow:
    0 0 0 .8px rgba(178,236,255,.62),
    0 -1px 5px rgba(120,220,255,.34),
    0 -5px 22px rgba(45,140,235,.16);
  clip-path:inset(0 0 88% 0);
}
/* Segundo filo enmascarado: rompe la lectura de "círculo CSS perfecto"
   concentrando la luz fuera del eje. */
.horizon-rim-hot{
  position:absolute;inset:0;border-radius:50%;
  box-shadow:0 0 0 1px rgba(215,246,255,.5),0 -2px 12px rgba(150,230,255,.3);
  clip-path:inset(0 0 88% 0);
  -webkit-mask-image:linear-gradient(100deg,transparent 12%,#000 34%,#000 46%,transparent 68%);
  mask-image:linear-gradient(100deg,transparent 12%,#000 34%,#000 46%,transparent 68%);
}
/* Atmósfera interior: halo suave inmediatamente sobre el filo */
.horizon-glow{
  position:absolute;left:50%;top:-2.6%;width:78%;height:8%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 100%,rgba(96,214,255,.22),rgba(31,111,255,.06) 40%,transparent 72%);
  filter:blur(30px);
}
/* Halo exterior: enorme y extremadamente tenue. Sugiere escala. */
.horizon-veil{
  position:absolute;left:50%;top:-9%;width:150%;height:20%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 100%,rgba(40,130,215,.075),transparent 66%);
  filter:blur(70px);
}
.horizon-orbit{
  position:absolute;left:50%;top:50%;border-radius:50%;
  border:1px solid rgba(96,160,225,.055);
  transform:translate(-50%,-50%);
  will-change:transform,opacity;
}
.horizon-orbit.o1{width:107%;height:107%}
.horizon-orbit.o2{width:116%;height:116%;border-color:rgba(96,160,225,.03)}

/* ---------- 5. HEADER ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--header);
  border-bottom:1px solid transparent;
  transition:background-color var(--t-base) ease,border-color var(--t-base) ease,transform var(--t-base) var(--ease-out);
}
.site-header.scrolled{
  background:rgba(2,5,11,.7);
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  border-bottom-color:var(--line);
}
.site-header.header-hidden{transform:translateY(-100%)}
.nav-wrap{height:100%;width:min(100% - (var(--gutter) * 2),var(--max));margin-inline:auto;display:flex;align-items:center;gap:28px}
/* padding vertical: el logo es un enlace de vuelta al inicio y necesita
   área de toque, no sólo el alto de sus imágenes. */
/* Tamaño aprobado en el piloto de EVO Growth y extendido aquí: el
   conjunto quedaba pequeño contra los 74px de barra, la navegación y el
   CTA. Sube un ~20% conservando la proporción 3:1 del logotipo. La barra
   NO cambia de altura: 34 + los 14px de padding son 48 dentro de 74. */
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0;padding:7px 0}
.brand img:first-child{width:34px;height:34px;object-fit:contain}
.brand img:last-child{width:auto;height:30px;object-fit:contain}
.site-nav{margin-left:auto;display:flex;gap:32px;align-items:center}
.site-nav a{font-size:.88rem;color:var(--text-dim);position:relative;transition:color var(--t-fast) ease}
.site-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;background:var(--cyan);transition:right var(--t-base) var(--ease-out)}
.site-nav a:hover,.site-nav a.active{color:var(--text)}
.site-nav a.active::after{right:0}
.menu-toggle{display:none;padding:9px;margin-left:auto}
.menu-toggle span:not(.sr-only){display:block;width:22px;height:1.5px;background:currentColor;margin:5px 0;transition:transform var(--t-base) var(--ease-out),opacity var(--t-fast) ease}
.menu-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ---------- 6. BOTONES ---------- */
.button{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:50px;padding:13px 26px;border-radius:99px;
  font-weight:660;font-size:.95rem;letter-spacing:-.005em;
  background:linear-gradient(140deg,#2477ff,#0b3ea8);
  border:1px solid rgba(130,185,255,.34);
  box-shadow:0 8px 30px rgba(16,72,190,.26),inset 0 1px 0 rgba(255,255,255,.14);
  transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-base) ease,border-color var(--t-fast) ease;
}
.button:hover{transform:translateY(-2px);box-shadow:0 12px 38px rgba(16,72,190,.38),inset 0 1px 0 rgba(255,255,255,.2)}
.button .arrow{transition:transform var(--t-base) var(--ease-out)}
.button:hover .arrow{transform:translateX(4px)}
.button.ghost{background:transparent;border-color:var(--line-hi);box-shadow:none;color:var(--text-dim)}
.button.ghost:hover{border-color:var(--line-lit);color:var(--text);box-shadow:0 0 24px rgba(53,226,255,.09)}
.button.small{min-height:42px;padding:10px 20px;font-size:.86rem}
.actions{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- 7. PRIMITIVAS TIPOGRÁFICAS ---------- */
.eyebrow{
  display:inline-block;font-size:var(--fs-eyebrow);font-weight:700;
  text-transform:uppercase;letter-spacing:.26em;color:rgba(120,215,255,.82);
  margin-bottom:24px;
}
.eyebrow::before{content:"";display:inline-block;width:20px;height:1px;background:currentColor;vertical-align:middle;margin-right:13px;opacity:.55}
.lead{font-size:var(--fs-lead);color:var(--muted);max-width:52ch;line-height:1.72}
.fineprint{font-size:.8rem;color:var(--faint);line-height:1.7}
/* Numeral fantasma: jerarquía sin cajas */
.numeral{font:700 clamp(2.6rem,1.6rem + 3.4vw,5.4rem)/1 Inter,sans-serif;letter-spacing:-.05em;color:var(--ghost)}

/* ---------- 8. ARQUITECTURA DE ESCENAS (APROBADA — sin cambios) ---------- */
main{position:relative;z-index:1}
.scene{position:relative;height:calc(var(--len,200) * 1vh)}
.scene-pin{
  position:sticky;top:0;
  height:100vh;height:100dvh;
  display:grid;grid-template:1fr/1fr;
  overflow:clip;
}
.stage{
  grid-area:1/1;position:relative;
  width:100%;height:100%;
  display:grid;place-items:center;
  align-content:center;
  will-change:transform,opacity,filter;
}
.section{position:relative;padding:clamp(96px,12vw,190px) 0;z-index:1}

/* ---------- 9. ESCENA 1 · HERO ---------- */
.scene-hero{z-index:6}
.hero-stage{text-align:center;padding-top:var(--header)}
.hero-copy{max-width:960px;display:grid;justify-items:center;padding-inline:var(--gutter)}
.hero-copy h1{margin-bottom:30px;max-width:16ch}
.hero-copy .lead{margin-bottom:42px;text-align:center;max-width:56ch}
.hero-actions{justify-content:center}

.hero-bridge{
  position:absolute;inset:0;
  display:grid;place-items:center;
  padding-inline:var(--gutter);text-align:center;
  font-size:clamp(1.6rem,1.05rem + 2.2vw,3rem);
  font-weight:700;line-height:1.14;letter-spacing:-.035em;
  opacity:0;pointer-events:none;
  will-change:transform,opacity,filter;
}
.hero-bridge span{max-width:17ch}
.hero-bridge em{display:block;color:var(--cyan-soft)}

.scroll-hint{
  position:absolute;left:0;right:0;bottom:30px;
  display:grid;justify-items:center;gap:9px;
  font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;color:var(--faint);
}
.scroll-hint i{display:block;width:1px;height:32px;background:linear-gradient(180deg,rgba(53,226,255,.8),transparent);animation:hintDrop 2.6s var(--ease-soft) infinite}
@keyframes hintDrop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- 10. ESCENA 2 · FRAGMENTOS → FLUJOS → SISTEMA ---------- */
.scene-weave{z-index:5}
#weave-canvas{position:absolute;inset:0;width:100%;height:100%}
.weave-copy{position:relative;width:min(100% - 2 * var(--gutter),820px);margin-inline:auto;text-align:center;display:grid}
.weave-state{grid-area:1/1;opacity:0;will-change:transform,opacity,filter}
/* 24ch da al titular nuevo un quiebre de línea natural sin agrandarlo. */
.weave-state h2{font-size:clamp(1.5rem,1.05rem + 1.9vw,2.7rem);margin-bottom:20px;max-width:24ch;margin-inline:auto}
.weave-state p{color:var(--muted);font-size:1rem;max-width:52ch;line-height:1.62;margin-inline:auto}
/* Verbos: texto, no píldoras */
.weave-verbs{display:flex;gap:clamp(12px,2vw,26px);flex-wrap:wrap;justify-content:center;margin-top:28px}
/* `nowrap` impide que "DAR SEGUIMIENTO" se parta en dos elementos aparentes. */
.weave-verbs li{font-size:.82rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(120,215,255,.7);white-space:nowrap}

/* ---------- 11. ESCENA 3 · SOLUCIONES EVO ----------
   Comportamiento APROBADO intacto. Cambia sólo el acabado: menos caja,
   más editorial, y una microcomposición propia por servicio. */
.scene-solutions{z-index:4}
.sol-head{
  position:absolute;top:calc(var(--header) + clamp(10px,2.6vh,34px));left:0;right:0;
  margin-inline:auto;padding-inline:var(--gutter);
  width:min(100%,var(--max));text-align:center;will-change:transform,opacity;
  /* Durante su fase nada puede cruzarlo. Refuerzo del timing, no sustituto. */
  z-index:120;
}
.sol-head h2{font-size:clamp(1.6rem,1.15rem + 1.7vw,2.6rem);margin-bottom:16px}
.sol-head .lead{margin-inline:auto;text-align:center;font-size:.98rem;max-width:52ch}

/* padding-block asimétrico: baja el centro del deck para dar aire al
   encabezado en los fotogramas donde ambos coexisten a baja opacidad. */
.sol-deck{position:absolute;inset:0;display:grid;place-items:center;padding-inline:var(--gutter);padding-block:clamp(56px,9vh,104px) clamp(20px,3.5vh,44px);perspective:1700px}
.sol-card{
  grid-area:1/1;
  position:relative;
  width:min(100%,1000px);
  padding:clamp(30px,3.6vw,54px) clamp(26px,3.4vw,58px);
  border-radius:var(--r-lg);
  /* Hairline en lugar de borde marcado, y luz sólo en el canto superior */
  border:1px solid var(--line);
  border-top-color:rgba(150,205,255,.16);
  background:
    radial-gradient(120% 70% at 50% -20%,rgba(38,120,220,.10),transparent 58%),
    linear-gradient(180deg,rgba(9,17,30,.86),rgba(3,7,15,.92));
  box-shadow:0 50px 110px rgba(0,0,0,.6);
  will-change:transform,opacity,filter;
  backface-visibility:hidden;
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(24px,3.4vw,56px);
  align-items:center;
}
/* Halo del protagonista, controlado por --lit desde JS */
.sol-card::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  background:radial-gradient(90% 60% at 50% -14%,rgba(70,200,255,.16),transparent 62%);
  opacity:var(--lit,0);
}
.sol-copy{position:relative;min-width:0}
.sol-meta{display:flex;align-items:baseline;gap:14px;margin-bottom:20px}
.sol-meta .sol-index{font:600 .72rem/1 ui-monospace,SFMono-Regular,monospace;letter-spacing:.2em;color:rgba(120,215,255,.72)}
.sol-meta .sol-count{font:600 .72rem/1 ui-monospace,monospace;letter-spacing:.2em;color:var(--faint);margin-left:auto}
/* Jerarquía de lectura: nombre → categoría → qué hace → capacidades →
   resultado → explorar. Sin píldoras, sin cajas internas: sólo tipografía,
   espacio y un hairline. */
.sol-card h3{font-size:clamp(1.65rem,1.15rem + 1.6vw,2.75rem);margin-bottom:14px;letter-spacing:-.035em}
/* Descriptor: la categoría comprensible. Debe leerse sin esfuerzo. */
.sol-descriptor{
  font-size:clamp(1.04rem,.98rem + .42vw,1.3rem);
  font-weight:600;color:var(--text);letter-spacing:-.012em;line-height:1.4;
  max-width:28ch;margin-bottom:16px;
}
/* Explicación: información comercial principal, nunca enterrada. */
.sol-explain{
  font-size:clamp(.96rem,.92rem + .26vw,1.06rem);
  color:#BACDE4;line-height:1.72;max-width:46ch;margin-bottom:24px;
}
/* Capacidades: secundarias, separadas por punto medio. */
.sol-keys{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 11px;
  font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;color:#8CA2BE;
}
.sol-keys li{display:inline-flex;align-items:center;gap:11px}
.sol-keys li::after{content:"·";color:var(--line-lit);font-size:.9rem;line-height:1}
.sol-keys li:last-child::after{content:none}
/* Resultado: visible, con acento, pero por debajo de la explicación. */
.sol-result{
  margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
  font-size:.93rem;line-height:1.6;color:rgba(166,230,255,.9);max-width:42ch;
}
.sol-card footer{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:20px}
/* margin-left:auto lo mantiene a la derecha exista o no nota discreta,
   para que el CTA no cambie de sitio entre tarjetas. */
/* Ahora que estas rutas existen de verdad, "Explorar" es un CTA real y
   necesita un área de toque cómoda, sobre todo en móvil. */
.sol-explore{display:inline-flex;align-items:center;gap:9px;margin-left:auto;padding:9px 0;font-weight:640;font-size:.92rem;color:rgba(120,215,255,.9)}
.sol-explore .arrow{transition:transform var(--t-base) var(--ease-out)}
.sol-explore:hover .arrow{transform:translateX(5px)}
.sol-card footer small{color:var(--faint);font-size:.76rem;max-width:34ch;line-height:1.6}

/* Microcomposición: diagrama de línea propio de cada servicio.
   Sin caja: flota sobre el fondo de la tarjeta. */
.sol-viz{position:relative;min-width:0;align-self:stretch;display:grid;place-items:center}
.sol-viz svg{width:100%;height:auto;overflow:visible}
.sol-viz .track{fill:none;stroke:var(--line-hi);stroke-width:1}
.sol-viz .live{fill:none;stroke:rgba(120,215,255,.85);stroke-width:1.2;stroke-linecap:round;
  stroke-dasharray:var(--dash,300);stroke-dashoffset:var(--dash,300);opacity:calc(.25 + var(--lit,0) * .75)}
.sol-viz .node{fill:#04080f;stroke:var(--line-hi);stroke-width:1}
.sol-viz .node-lit{fill:rgba(120,215,255,.95);stroke:none}
.sol-viz .core{fill:none;stroke:rgba(120,215,255,.55);stroke-width:1}
.sol-viz .label{font:600 8.5px/1 ui-monospace,monospace;letter-spacing:.14em;fill:var(--faint);text-transform:uppercase}
.sol-viz .spark{opacity:.16}
/* Sólo la protagonista anima: las demás quedan quietas y no consumen frames */
.sol-card.is-lit .sol-viz .live{animation:drawRoute 3.6s var(--ease-soft) infinite}
.sol-card.is-lit .sol-viz .spark{animation:sparkFade 3.6s var(--ease-soft) infinite}
@keyframes drawRoute{0%{stroke-dashoffset:var(--dash,300)}58%,100%{stroke-dashoffset:0}}
@keyframes sparkFade{0%,52%{opacity:.16}68%{opacity:1}100%{opacity:.34}}

/* Rail de progreso 01–05 */
.sol-rail{position:absolute;left:0;right:0;bottom:clamp(20px,4vh,44px);display:flex;gap:9px;align-items:center;justify-content:center}
.sol-rail li{width:30px;height:2px;border-radius:2px;background:rgba(122,166,220,.15);position:relative;overflow:hidden}
.sol-rail li i{position:absolute;inset:0;background:linear-gradient(90deg,rgba(31,111,255,.9),rgba(53,226,255,.95));transform:scaleX(0);transform-origin:left}
.sol-rail li span{position:absolute;left:0;top:-20px;font-size:.6rem;letter-spacing:.16em;color:var(--faint);opacity:0;transition:opacity var(--t-base) ease}
.sol-rail li.active span{opacity:1;color:rgba(120,215,255,.85)}

.sol-outro{position:absolute;inset:0;display:grid;place-items:center;padding-inline:var(--gutter);text-align:center;opacity:0;pointer-events:none;will-change:transform,opacity,filter}
.sol-outro p{max-width:19ch;font-size:clamp(1.35rem,.95rem + 1.7vw,2.4rem);font-weight:700;line-height:1.2;letter-spacing:-.032em}
.sol-outro p em{display:block;color:var(--cyan-soft)}

/* ---------- 12. ESCENA 4 · MÉTODO EVO — línea de evolución ---------- */
.scene-method{z-index:3}
/* `.stage` centra sus hijos con justify-items:center, lo que los encoge a
   ancho de contenido. El raíl necesita ocupar todo el ancho: se restituye. */
.method-stage{width:min(100% - 2 * var(--gutter),var(--max));margin-inline:auto;justify-items:stretch}
.method-head{text-align:center;margin-bottom:clamp(40px,7vh,84px)}
.method-head h2{font-size:clamp(1.6rem,1.15rem + 1.7vw,2.6rem)}

/* Raíl: una sola línea con cuatro marcas. Cero cajas. */
.method-rail{position:relative;width:100%;margin-bottom:clamp(38px,6vh,74px)}
/* La línea pasa por el centro del punto (9px), no por el centro de la marca */
.method-line{position:absolute;left:0;right:0;top:4px;height:1px;background:var(--line-hi)}
.method-line b{position:absolute;inset:0;display:block;background:linear-gradient(90deg,rgba(31,111,255,.9),rgba(53,226,255,.95));transform:scaleX(0);transform-origin:left}
.method-ticks{position:relative;display:grid;grid-template-columns:repeat(4,1fr)}
.method-tick{display:grid;justify-items:center;gap:14px;will-change:opacity}
.method-tick i{
  width:9px;height:9px;border-radius:50%;background:var(--bg-deep);
  border:1px solid var(--line-lit);position:relative;z-index:1;
  transition:transform var(--t-base) var(--ease-out),background-color var(--t-base) ease,box-shadow var(--t-base) ease;
}
.method-tick.active i{background:rgba(120,215,255,.95);border-color:transparent;transform:scale(1.5);box-shadow:0 0 16px rgba(53,226,255,.6)}
.method-tick span{font:600 .68rem/1 ui-monospace,monospace;letter-spacing:.2em;color:var(--faint);transition:color var(--t-base) ease}
.method-tick.active span{color:rgba(120,215,255,.9)}

/* Detalle: sólo la etapa protagonista ocupa la escena */
.method-detail{position:relative;display:grid;min-height:clamp(180px,26vh,260px)}
.method-step{grid-area:1/1;display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:start;will-change:transform,opacity,filter}
.method-step .numeral{line-height:.82}
.method-step h3{font-size:clamp(1.45rem,1.1rem + 1.3vw,2.35rem);margin-bottom:16px}
.method-step p{color:var(--muted);max-width:46ch;line-height:1.75}

/* ---------- 13. ESCENA 5 · IMPACTO — filas editoriales, sin cajas ---------- */
.scene-impact{position:relative}
.impact-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(36px,6vw,96px);align-items:start}
.impact-intro h2{font-size:clamp(1.8rem,1.3rem + 1.9vw,3rem)}
.impact-intro .fineprint{margin-top:32px;max-width:34ch}
.impact-list{display:grid}
.impact-row{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(16px,2.6vw,36px);align-items:center;
  padding:clamp(22px,3vh,32px) 0;
  border-top:1px solid var(--line);
}
.impact-row:last-child{border-bottom:1px solid var(--line)}
/* Escritorio de poca altura. Con la cabecera visible —que es lo que ocurre al
   volver hacia arriba— quedan 74px menos de alto útil, y el quinto resultado
   se salía por 10-15px. Se recuperan ajustando SÓLO el respiro de estas filas
   y SÓLO por debajo de 720px de alto: ni tipografía, ni escala, ni el resto de
   la página. Medido: bajando ya cabía; esto cierra también la subida. */
@media (min-width:1024px) and (max-height:720px){
  .impact-row{padding:16px 0}
}
.impact-row b{font:600 .7rem/1 ui-monospace,monospace;letter-spacing:.2em;color:var(--faint);padding-top:5px}
.impact-row h3{font-size:clamp(1.02rem,.92rem + .45vw,1.28rem);margin-bottom:7px}
.impact-row p{color:var(--muted);font-size:.9rem;line-height:1.65;max-width:42ch}
/* Micro-visualización de línea: abstracta, sin cifras */
.impact-spark{width:clamp(54px,7vw,86px);height:30px;overflow:visible;flex-shrink:0}
.impact-spark path{fill:none;stroke:rgba(120,215,255,.5);stroke-width:1.2;stroke-linecap:round}
.impact-spark .base{stroke:var(--line-hi);stroke-width:1}

/* ---------- 14. NOSOTROS — editorial ---------- */
.team-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,90px);align-items:start}
.team-intro h2{font-size:clamp(1.8rem,1.3rem + 1.9vw,3rem);max-width:16ch}
.team-list{display:grid}
.team-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,2.4vw,28px);padding:clamp(22px,3vh,30px) 0;border-top:1px solid var(--line)}
.team-row:last-child{border-bottom:1px solid var(--line)}
.team-initials{font:600 .72rem/1 ui-monospace,monospace;letter-spacing:.18em;color:rgba(120,215,255,.7);padding-top:6px}
.team-row h3{font-size:1.1rem;margin-bottom:5px}
.team-row h4{font-size:.8rem;font-weight:600;letter-spacing:.03em;color:var(--faint);margin-bottom:11px}
.team-row p{color:var(--muted);font-size:.88rem;line-height:1.68;max-width:44ch}

/* ---------- 15. ESCENA 6 · MICRO DEMOSTRACIÓN — una acción que viaja ---------- */
.scene-demo{z-index:2}
.demo-stage{width:min(100% - 2 * var(--gutter),var(--max));margin-inline:auto;text-align:center;justify-items:stretch}
.demo-heads{display:grid;margin-bottom:clamp(46px,8vh,96px)}
.demo-heads h2{grid-area:1/1;font-size:clamp(1.5rem,1.05rem + 1.9vw,2.7rem);will-change:transform,opacity,filter;max-width:24ch;margin-inline:auto}
.demo-heads em{color:var(--cyan-soft)}
.demo-stream{position:relative;width:100%}
.demo-stream svg{width:100%;height:auto;overflow:visible}
.demo-track{fill:none;stroke:var(--line-hi);stroke-width:1}
.demo-live{fill:none;stroke:rgba(120,215,255,.8);stroke-width:1.4;stroke-linecap:round}
.demo-station{fill:#02050B;stroke:var(--line-hi);stroke-width:1}
.demo-halo{fill:rgba(53,226,255,.14)}
.demo-pulse{fill:#DFF6FF}
.demo-label{font:600 9px/1 ui-monospace,monospace;letter-spacing:.13em;fill:var(--faint);text-transform:uppercase}
/* En la variante vertical el viewBox es mucho más estrecho: la tipografía
   debe crecer en unidades de usuario para conservar el mismo tamaño en pantalla. */
.demo-stream svg.is-tall .demo-label{font-size:15px;letter-spacing:.08em}
.demo-stream svg.is-tall .demo-live{stroke-width:2.4}
.demo-stream svg.is-tall .demo-track{stroke-width:1.8}
.demo-verbs{display:flex;gap:clamp(14px,2.6vw,34px);flex-wrap:wrap;justify-content:center;margin-top:clamp(40px,7vh,80px)}
.demo-verbs li{font-size:clamp(.85rem,.78rem + .35vw,1.05rem);font-weight:620;letter-spacing:.06em;color:var(--faint);will-change:opacity,transform}

/* ---------- 16. ESCENA 7 · CTA FINAL — 90% oscuridad ---------- */
.scene-cta{z-index:1;position:relative;padding:clamp(130px,20vh,230px) 0 clamp(150px,24vh,270px);text-align:center;overflow:clip}
/* Única fuente de luz: un resplandor bajo, muy contenido, detrás del titular */
.cta-light{
  position:absolute;left:50%;top:34%;width:min(150%,1500px);height:60%;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,rgba(40,140,225,.13),rgba(20,70,150,.045) 34%,transparent 66%);
  filter:blur(40px);
}
.cta-inner{position:relative;width:min(100% - 2 * var(--gutter),820px);margin-inline:auto}
.cta-inner h2{margin-bottom:26px;max-width:17ch;margin-inline:auto}
.cta-inner .lead{margin:0 auto 44px;text-align:center;max-width:46ch}
.scene-cta .actions{justify-content:center}

/* ---------- 17. FOOTER ---------- */
/* Alternativa discreta bajo los CTA principales del cierre. */
.cta-alt{margin-top:22px;font-size:.9rem;color:var(--muted)}
.cta-alt a{color:var(--cyan-soft);border-bottom:1px solid rgba(166,230,255,.28)}
.cta-alt a:hover{border-bottom-color:var(--cyan-soft)}

.footer{position:relative;z-index:1;border-top:1px solid var(--line);background:rgba(1,3,8,.94);padding:78px 0 26px}
.footer-grid{display:grid;grid-template-columns:1.3fr .7fr 1.1fr;gap:60px}
.footer img.footer-mark{height:36px;width:auto;margin-bottom:20px}
.footer h2{font-size:.7rem;text-transform:uppercase;letter-spacing:.22em;color:rgba(120,215,255,.72);margin-bottom:18px}
/* padding en lugar de margin: el área de toque crece con el enlace y llega
   a ~40px, en vez de dejar hueco muerto entre enlaces contiguos. */
.footer-grid a:not(.button){display:block;color:var(--muted);padding:9px 0;transition:color var(--t-fast) ease}
.footer-grid a:not(.button):hover{color:var(--text)}
.footer p{color:var(--muted);margin-bottom:22px;font-size:.92rem}
.social-links{display:flex;gap:10px;margin-top:22px}
.social-links a{display:inline-flex!important;align-items:center;gap:8px;margin:0!important;padding:8px 13px;border:1px solid var(--line);border-radius:99px;font-size:.85rem}
.social-links a:hover{border-color:var(--line-lit)}
.social-links img{width:17px;height:17px;object-fit:contain}
.legal{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);margin-top:52px;padding-top:24px;color:var(--faint);font-size:.78rem}
/* El botón flotante de WhatsApp vive fijo en la esquina inferior derecha
   (50px + 20px de margen). Por debajo de 1340px el contenedor deja de estar
   limitado por --max y su borde derecho se le mete debajo: medido, tapaba el
   37% de "Volver arriba" a 1024×640 y el 11% de los enlaces legales en móvil.
   Justo en el estado final del recorrido, donde esos enlaces son lo que el
   visitante tiene que poder usar. Se reserva su carril, nada más. */
@media (max-width:1339px){ .legal{padding-right:78px} }
.footer-wordmark{width:100%;margin-top:48px;opacity:.09;pointer-events:none}
.footer-wordmark svg{width:100%;height:auto;display:block}
.footer-wordmark text{fill:none;stroke:#8fbdf0;stroke-width:1;font:700 100px/1 Inter,sans-serif}

/* ---------- 18. WHATSAPP FLOTANTE ---------- */
.floating{
  position:fixed;right:20px;bottom:20px;z-index:90;
  width:50px;height:50px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(145deg,#0b5940,#169a6b);
  border:1px solid rgba(76,224,162,.32);
  box-shadow:0 8px 24px rgba(10,110,70,.3);
  transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-base) ease;
}
.floating:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(10,110,70,.42)}
.floating img{width:24px;height:24px;object-fit:contain}
.floating-tooltip{
  position:absolute;right:calc(100% + 12px);white-space:nowrap;
  padding:7px 11px;border:1px solid var(--line);border-radius:8px;background:#05090f;
  font-size:.72rem;font-weight:600;opacity:0;transform:translateX(6px);pointer-events:none;
  transition:opacity var(--t-fast) ease,transform var(--t-fast) var(--ease-out);
}
.floating:hover .floating-tooltip,.floating:focus-visible .floating-tooltip{opacity:1;transform:none}

/* ---------- 19. MICROINTERACCIONES ---------- */
/* Impacto y Nosotros se revelan por TIEMPO, no por scroll: son las únicas
   dos secciones que no son escenas scrubbed. Con .7s más .24s de retardo,
   un usuario que baja rápido las adelantaba y las veía a medio aparecer.
   Se acorta a .5s con retardos a la mitad: sigue siendo un escalonado
   perceptible, pero ya no se puede dejar atrás. */
.rise{opacity:0;transform:translate3d(0,16px,0);transition:opacity .5s var(--ease-soft),transform .5s var(--ease-out)}
.rise.visible{opacity:1;transform:none}
.impact-list .rise:nth-child(2){transition-delay:.04s}
.impact-list .rise:nth-child(3){transition-delay:.08s}
.impact-list .rise:nth-child(4){transition-delay:.12s}
.impact-list .rise:nth-child(5){transition-delay:.16s}
.team-list .rise:nth-child(2){transition-delay:.05s}
.team-list .rise:nth-child(3){transition-delay:.10s}

.cursor{
  position:fixed;z-index:999;top:0;left:0;pointer-events:none;
  width:26px;height:26px;border:1px solid rgba(53,226,255,.45);border-radius:50%;
  transform:translate3d(-100px,-100px,0);
  transition:width var(--t-fast) ease,height var(--t-fast) ease,background-color var(--t-fast) ease;
}
.cursor.hot{width:40px;height:40px;background:rgba(53,226,255,.06)}

/* ---------- 20. RESPONSIVE ---------- */
@media (max-width:1023px){
  .site-nav{
    position:fixed;inset:var(--header) 0 auto;flex-direction:column;align-items:flex-start;gap:18px;
    padding:26px var(--gutter) 32px;background:rgba(2,5,11,.98);backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line);display:none;
  }
  .site-nav.open{display:flex}
  /* En el menú desplegable los enlaces son objetivos táctiles, no texto
     corrido: se les da altura cómoda sin tocar la cabecera de escritorio. */
  .site-nav a{display:block;width:100%;padding:11px 0;font-size:1rem}
  .menu-toggle{display:block}
  .nav-wrap > .button{display:none}
  .cursor{display:none}
  /* En táctil "Explorar" necesita altura mínima cómoda; en escritorio el
     puntero no lo requiere y el alto extra descuadraría la tarjeta. */
  .sol-explore{min-height:38px}
  .sol-card{grid-template-columns:1fr;gap:26px}
  .sol-viz{max-width:420px;margin-inline:auto;width:100%}
  .impact-layout,.team-layout{grid-template-columns:1fr;gap:44px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:40px}
}

@media (max-width:767px){
  :root{--header:64px}
  /* En móvil el aumento es menor: la barra baja a 64px y el CTA
     desaparece, así que el logo compite con el botón de menú. */
  .brand{gap:10px}
  .brand img:first-child{width:31px;height:31px}
  .brand img:last-child{height:28px}
  .scene{height:calc(var(--len-m,var(--len,180)) * 1vh)}
  .scene-pin{height:100svh}
  .hero-copy h1{max-width:none}
  .sol-card{padding:24px 20px}
  .sol-descriptor{margin-bottom:12px}
  .sol-explain{margin-bottom:18px}
  .sol-result{margin-top:16px;padding-top:14px}
  .sol-keys{font-size:.7rem;gap:5px 9px}
  .sol-card footer{flex-direction:column;align-items:flex-start;gap:14px}
  .sol-card footer small{max-width:none}
  .sol-head{top:calc(var(--header) + 10px)}
  .sol-head .lead{display:none}
  .sol-viz{max-width:none}
  .method-tick span{font-size:.6rem}
  .method-step{grid-template-columns:1fr;gap:12px}
  .method-step .numeral{font-size:2.4rem}
  .impact-row{grid-template-columns:auto minmax(0,1fr);gap:14px}
  .impact-spark{display:none}
  .demo-verbs{gap:12px}
  .footer-grid{grid-template-columns:1fr;gap:36px}
  /* En móvil el botón flotante mide 46px con 14px de margen. */
  .legal{flex-direction:column;gap:12px;padding-right:66px}
  .floating{width:46px;height:46px;right:14px;bottom:14px}
  .floating img{width:22px;height:22px}
  .floating-tooltip{display:none}
  .actions{width:100%}
  .actions .button{flex:1 1 auto}
  .nebula{filter:blur(70px)}
  .evo-horizon{width:420vw;height:420vw;top:62vh}
}

@media (max-height:820px){
  .scroll-hint{display:none}
}
/* En viewports muy bajos se sacrifica la explicación larga, nunca el
   descriptor ni el resultado: son lo que hace comprensible la solución. */
@media (max-height:640px){
  .hero-copy .lead{display:none}
  .sol-explain{display:none}
  .method-head{margin-bottom:24px}
}

/* ---------- 21. MOTION REDUCIDO ---------- */
.reduced-motion .scene-pin{position:relative;height:auto;min-height:0;padding:clamp(70px,10vh,120px) 0;display:block}
.reduced-motion .scene{height:auto!important}
.reduced-motion .stage{transform:none!important;opacity:1!important;filter:none!important;height:auto;display:block}
.reduced-motion .hero-bridge,
.reduced-motion .sol-outro{position:relative;inset:auto;transform:none;opacity:1;margin:44px auto 0;display:block}
.reduced-motion .weave-state{grid-area:auto;opacity:1;margin-bottom:48px}
.reduced-motion .sol-deck{position:relative;inset:auto;perspective:none;display:grid;gap:20px;padding:0}
.reduced-motion .sol-card{position:relative;grid-area:auto;transform:none!important;opacity:1!important;filter:none!important}
.reduced-motion .sol-head{position:relative;top:auto;margin-bottom:36px}
.reduced-motion .sol-rail,
.reduced-motion .scroll-hint,
.reduced-motion #weave-canvas{display:none}
.reduced-motion .method-detail{display:grid;gap:36px}
.reduced-motion .method-step{grid-area:auto;opacity:1!important;transform:none!important;filter:none!important}
.reduced-motion .demo-heads{display:grid;gap:16px}
.reduced-motion .demo-heads h2{grid-area:auto;opacity:1!important;transform:none!important;filter:none!important}
.reduced-motion .demo-verbs li{opacity:1;color:var(--text-dim)}
.reduced-motion .rise{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .cursor,.scroll-hint{display:none}
}