/* =====================================================================
   home.css — Estilos de la portada (index.html) y de su versión inglesa
   (/en/index.html).

   Extraído de los dos bloques <style> incrustados en index.html el
   2026-07-26 para que ambos idiomas compartan UNA sola hoja de estilos y
   no se desincronicen.

   NOTA: las url() de este archivo resuelven contra la ubicación de la
   hoja (la raíz del sitio), no contra la página que la enlaza. Por eso
   funcionan igual desde / y desde /en/.
   ===================================================================== */

  /* Cara de marca — Futura Extra Bold Oblique. UNA sola cara: extra bold y
     oblicua; no existe redonda ni pesos intermedios.

     NOMBRE Y RUTA NUEVOS A PROPÓSITO. styles.css e investigaciones.css declaran
     otra @font-face llamada "Altitud100K" apuntando a FuturaExtraBoldOblique.otf
     de la raíz, que son 176 bytes de metadatos de cuarentena de macOS y no una
     fuente — por eso el titular de la portada llevaba años cayendo a Segoe UI.
     Reparar ESE archivo cambiaría de golpe rendimiento/, conocimiento/,
     recursos/ e investigaciones.html, que no están en el alcance de este cambio
     y no llevan reajustados los tamaños (esta cara es un 20-25 % más ancha que
     la system-ui que hoy hace de fallback). Con nombre propio, el cambio no
     puede salirse de la portada.

     El archivo está subseteado a los caracteres que usa el sitio (197 glifos,
     11 KB): pesa menos y deja de ser una fuente redistribuible. */
  @font-face {
    font-family: "Altitud100K Display";
    src: url("/assets/fonts/altitud100k-display.woff2") format("woff2"),
         url("/assets/fonts/altitud100k-display.otf")   format("opentype");
    font-weight: 700 900;  /* el archivo declara 700 y las reglas piden 800: el rango evita bold sintético */
    font-style: oblique;   /* la inclinación de 9° va DIBUJADA; no se sintetiza otra encima */
    font-display: swap;
  }

  :root {
    /* ===== Backgrounds ===== */
    --bg-deep: #010A1F;   /* casi-negro azulado, fondo principal */
    --bg-mid:  #02183D;   /* azul marino oficial — gradientes/elevación */

    /* ===== Texto =====
       --ink-faint pasó de #4A5670 a #7E8CA8 por contraste: sobre el fondo del
       about medía 2.38:1 y el mínimo WCAG para texto de cuerpo es 4.5:1. Es el
       color de arranque del párrafo que se "pinta" al hacer scroll, así que era
       texto real ilegible — y si el CDN de GSAP falla, se queda así. Ahora da
       5.17:1 y sigue leyéndose como apagado frente al blanco pintado. */
    --ink:       #FFFFFF;
    --ink-dim:   #A8B0C0;
    --ink-faint: #7E8CA8;

    /* ===== Acentos de ruta ===== */
    --accent-warm: #F9921C;  /* naranja oficial — Rendimiento / Desarrollo e Innovación */
    --accent-cool: #913793;  /* púrpura oficial — Conocimiento / Investigación */

    /* ===== Acentos complementarios ===== */
    --accent-hot:  #F21651;  /* magenta — énfasis (cue dot, glow) */
    --accent-deep: #8C1C3F;  /* granate — sobrio, para fondos secundarios */

    /* ===== Variantes SÓLO TEXTO de los acentos =====
       Los acentos oficiales son colores de MARCA, calibrados para rellenos,
       bordes y glows. Como texto sobre fondo oscuro no llegan al mínimo:
         --accent-cool #913793 → 2.98:1   (falla incluso como texto grande)
         --accent-hot  #F21651 → 3.87:1   sobre el panel del sello
       Estas son sus versiones aclaradas, y SÓLO se usan cuando el color va en
       un glifo. Para fondos, bordes y sombras se siguen usando los oficiales.
       --accent-cool-ink no es un color nuevo: es el mismo #C77BC9 que la sección
       de rutas ya usaba como --route-ink, promovido a token. */
    --accent-cool-ink: #C77BC9;  /* 6.67:1 sobre --bg-deep */
    --accent-hot-ink:  #FF7FA3;  /* 8.28:1 sobre --bg-deep · 6.81:1 sobre el panel del sello */

    /* ===== Líneas ===== */
    --line:        rgba(255, 255, 255, 0.10);
    --line-strong: rgba(255, 255, 255, 0.22);

    /* ===== ESTRUCTURA — la espina vertical =====
       Antes cada sección elegía su propio ancho (1400/1280/1100/900/860) y su
       propio margen lateral (64px / clamp(24,3vw,40) / clamp(28,4vw,48) / 20px /
       40px). A 1440px el texto arrancaba en SIETE posiciones distintas y la
       columna saltaba de lado en cada scroll: es lo que hacía que la página se
       leyera como módulos pegados en vez de una página. Tres anchos y un solo
       margen. Si hace falta un cuarto ancho, casi siempre la respuesta correcta
       es usar el más cercano de estos tres. */
    --w-wide: 1280px;  /* hero, about, caminos, footer — secciones panorámicas */
    --w-page: 1080px;  /* ignite, clientes, sello — contenido en paneles        */
    --w-read:  720px;  /* FAQ y cualquier columna de prosa (~70ch)              */
    --gutter: clamp(20px, 4vw, 48px);

    /* ===== Escala vertical =====
       Un paso por función, no uno por sección. --sp-5 es el ritmo por defecto
       entre secciones; --sp-6 sólo donde se quiere un corte de capítulo. */
    --sp-3: clamp(24px, 3vh, 32px);
    --sp-4: clamp(36px, 5vh, 48px);
    --sp-5: clamp(56px, 7vh, 72px);
    --sp-6: clamp(84px, 10vh, 108px);

    /* ===== Radios =====
       Había nueve valores distintos (0, 4, 10, 12, 14, 16, 18, 20, 999). El peor
       caso: el sello es el panel más grande de la página y tenía la esquina MÁS
       afilada (4px) entre vecinos de 14 y 20. El 0 del plano técnico se queda
       como excepción documentada: ahí la esquina viva es intencional. */
    --r-sm:   8px;    /* píldoras de navegación, etiquetas, controles pequeños */
    --r-md:  16px;    /* todas las tarjetas y placas                           */
    --r-pill: 999px;  /* sólo CTAs                                             */

    /* ===== Elevación =====
       Había más de veinte recetas y diecisiete radios de desenfoque distintos,
       y la jerarquía estaba invertida: las tarjetas de ruta del hero —la vía de
       conversión— llevaban la sombra MÁS BAJA, por debajo de placas decorativas.
       Los glows de color no entran aquí: se componen encima (box-shadow:
       var(--e-3), var(--glow-warm)), que es como ya lo hacía .hero-route. */
    --e-1: 0 2px 8px rgba(0, 0, 0, 0.30);     /* :active, controles en línea    */
    --e-2: 0 8px 24px rgba(0, 0, 0, 0.35);    /* controles en reposo, placas    */
    --e-3: 0 20px 48px rgba(0, 0, 0, 0.42);   /* tarjetas en reposo             */
    --e-4: 0 30px 64px rgba(0, 0, 0, 0.50);   /* tarjetas en hover              */

    /* ===== Movimiento =====
       Siete duraciones (0.15 → 0.4) y tres curvas para UNA sola interacción
       ("levantar y profundizar la sombra al pasar el cursor"). El resultado era
       que el botón del FAQ daba un tirón, los logos de clientes iban lentos y
       nada compartía tacto. La curva es la que ya usaba el tooltip del plano,
       que era la mejor del archivo. */
    --t-fast: 140ms;  /* :active y cambios de color puros */
    --t-base: 220ms;  /* todos los hover                  */
    --t-slow: 380ms;  /* entradas y revelados             */
    --ease:   cubic-bezier(0.2, 0.8, 0.2, 1);
    --lift:   -3px;   /* una sola distancia de levantamiento */

    /* ===== Tipografía =====
       --display      Futura Extra Bold Oblique. Es la VOZ DE MARCA y sólo va en
                      titulares grandes y énfasis: al ser extra bold oblicua,
                      abusar de ella hace que la página grite.
                      Regla del sistema: en esta portada, lo inclinado es marca.
       --display-alt  Jost — geométrica redonda, de hecho una revisión libre de
                      Futura, con los pesos que Futura no tiene. Subtítulos,
                      botones y rótulos del plano técnico.
       --sans         IBM Plex Sans — texto corrido.
       --mono         IBM Plex Mono — etiquetas técnicas, eyebrows y anotaciones
                      del plano. Antes era una pila del sistema, así que los 20
                      rótulos "técnicos" del sitio se veían DISTINTOS en cada SO
                      (Consolas / SF Mono / DejaVu). Esto los unifica.

       --display cae a Jost, no a system-ui: si el archivo de marca faltara, la
       página degrada a una geométrica pariente de Futura y no a Segoe UI.
       --display-alt NO cae en la cara de marca: eso convertiría los botones en
       texto extra bold oblicuo. Ni Jost ni Plex cargan itálicas — toda la
       inclinación de la portada viene de Futura. */
    --display:     "Altitud100K Display", "Jost", system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
    --display-alt: "Jost", system-ui, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
    --sans:        "IBM Plex Sans", system-ui, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
    --mono:        "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;

    /* ===== AJUSTES DE LA SECCIÓN ABOUT =====
       Cambia estos valores para regular cómo se ve el fondo wireframe del about.
       Cada uno es la opacidad (0 = transparente, 1 = negro sólido) del overlay
       oscuro que va encima de la animación 3D.

       PRESETS sugeridos (copia los 3 valores donde corresponda):
         Sin overlay (animación 100%): 0.00 / 0.00 / 0.00   ← texto puede costar leerse
         Muy sutil:                    0.20 / 0.10 / 0.25
         Sutil:                        0.35 / 0.18 / 0.40
         Medio (actual):               0.55 / 0.30 / 0.60
         Fuerte:                       0.75 / 0.50 / 0.75   ← apenas se ve la animación
         Solo borde (cine):            0.85 / 0.10 / 0.85

       También podés tocar --about-bg-top y --about-bg-bottom para cambiar los
       colores del gradiente de fondo (los que se ven a través del overlay). */
    --about-overlay-top:    0.10;
    --about-overlay-middle: 0.05;
    --about-overlay-bottom: 0.15;

    --about-bg-top:    var(--bg-mid);   /* azul marino oficial */
    --about-bg-bottom: var(--bg-deep);  /* color al que se desvanece */

    /* ===== Blueprint técnico (sección Caminos / Engranajes) ===== */
    --blueprint-bg:         var(--bg-mid);
    --blueprint-border:     #C49828;
    --blueprint-rule:       rgba(196, 152, 40, 0.55);
    --blueprint-centre:     rgba(168, 176, 192, 0.40);
    --blueprint-pitch:      rgba(168, 176, 192, 0.22);
    --blueprint-direction:  rgba(249, 146, 28, 0.65);
    --blueprint-ink:        rgba(255, 255, 255, 0.92);
    --blueprint-ink-muted:  rgba(168, 176, 192, 0.78);
    --blueprint-void:       rgba(2, 24, 61, 0.85);
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  html, body {
    background: var(--bg-deep);
    color: var(--ink);
    font-family: var(--sans);
    overflow-x: hidden;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
  }

  body {
    background:
      radial-gradient(ellipse at 20% 0%, rgba(145, 55, 147, 0.10) 0%, transparent 50%),
      radial-gradient(ellipse at 80% 100%, rgba(249, 146, 28, 0.08) 0%, transparent 50%),
      var(--bg-deep);
  }

  /* Disable scroll mientras corre el loader */
  body.is--loading-body {
    height: 100dvh;
    overflow: hidden;
  }

  a { color: inherit; }

  /* IBM Plex Sans se carga en 400 y 600. El 700 por defecto del navegador para
     strong/b haría que se sintetizara un negrita falso. */
  strong, b { font-weight: 600; }

  /* ============ ENLACE DE SALTO ============
     Sin él, con teclado hay que tabular por el logo, tres enlaces de navegación,
     el selector de idioma y las dos tarjetas de ruta en CADA carga de página.
     Fuera de foco no ocupa espacio; al enfocarlo aparece sobre todo lo demás. */
  .skip-link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 300;          /* por encima del loader (200) */
    transform: translateY(-120%);
    padding: 12px 20px;
    background: var(--accent-warm);
    color: var(--bg-deep);
    font-family: var(--display-alt);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    border-bottom-right-radius: var(--r-sm);
    transition: transform var(--t-base) var(--ease);
  }

  .skip-link:focus-visible {
    transform: translateY(0);
    outline: 2px solid var(--ink);
    outline-offset: -4px;
  }

  /* ============ LOADER I+D+i ============ */
  .idi-loader {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: linear-gradient(315deg,
      rgba(0, 0, 0, 1) 3%,
      rgba(0, 28, 87, 1) 38%,
      rgba(0, 69, 144, 1) 68%,
      rgba(0, 153, 196, 1) 98%);
    background-size: 400% 400%;
    animation: idi-loader-gradient 15s ease infinite;
    perspective: 50vmin;
    transform-style: preserve-3d;
    color: #FFFFFF;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Fade-out controlado por GSAP al final del timeline */
    will-change: opacity;
  }

  .idi-loader.is--hidden {
    display: none;
  }

  /* Partículas warp — fondo del loader I+D+i */
  .idi-loader .particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    transform-style: preserve-3d;
  }

  .idi-loader .particles::before,
  .idi-loader .particles::after {
    content: "";
    position: absolute;
    width: 200vw;
    height: 200vh;
    left: -50vw;
    top: -50vh;
    border-radius: 100%;
    opacity: 0;
    transform: translateZ(-50vmin);
    transform-style: preserve-3d;
    background-image:
      repeating-conic-gradient(#FFF8 0%, transparent .0002%, transparent .075%, transparent .65%),
      repeating-conic-gradient(#FFF  0%, transparent .0004%, transparent .05%,  transparent .495%);
    animation: idi-particles-1 5s ease-in 0s infinite;
  }

  .idi-loader .particles::after {
    animation-name: idi-particles-2;
    animation-delay: 1s;
  }

  .idi-loader .particles + .particles + .particles::before { animation-delay: 2s; }
  .idi-loader .particles + .particles + .particles::after  { animation-delay: 3s; }

  @keyframes idi-loader-gradient {
    0%   { background-position: 0% 0%; }
    50%  { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
  }

  @keyframes idi-particles-1 {
    0%            { transform: translateZ(-50vmin); opacity: 0; }
    30%, 70%, 90% { opacity: 1; }
    100%          { transform: translateZ(50vmin) rotate(15deg); opacity: 0; }
  }

  @keyframes idi-particles-2 {
    0%            { transform: translateZ(-50vmin) rotate(180deg); opacity: 0; }
    30%, 70%, 90% { opacity: 1; }
    100%          { transform: translateZ(50vmin) rotate(195deg); opacity: 0; }
  }

  /* ============ LOADER PARTÍCULAS — override mobile ============
     En desktop el conic-gradient se ve como puntos por la perspectiva y
     proporción del viewport. En celular vertical la elipse se estira y los
     "rayos" se ven como rayas. Acá los reemplazamos por un tile de
     radial-gradient (estrellas reales) y suavizamos la perspectiva. */
  @media (max-width: 767px) {
    .idi-loader { perspective: 120vmin; }

    /* Mobile: deshabilitamos el patrón de tiles (radial-gradient repetido) porque
       producía columnas/filas visibles. Las estrellas se generan individualmente
       en JS (populateMobileStars) con Math.random() para un campo realmente
       aleatorio, igual que el starfield del hero. */
    .idi-loader .particles::before,
    .idi-loader .particles::after {
      content: none;
    }

    /* Rotación lenta de cada capa — evoca el "warp" del desktop. Las 3 capas
       giran en el MISMO sentido (clockwise) a velocidades crecientes para crear
       parallax: capa frontal rota ~3× más rápido que la del fondo. El contenedor
       se sobredimensiona (180%) y se centra con offset negativo para que la
       rotación no deje esquinas vacías dentro del viewport. */
    .idi-loader .particles {
      width: 180%;
      height: 180%;
      left: -40%;
      top: -40%;
      transform-origin: 50% 50%;
      animation: idi-mobile-spin 45s linear infinite;
      will-change: transform;
    }
    .idi-loader .particles:nth-child(2) {
      animation: idi-mobile-spin 80s linear infinite;
    }
    .idi-loader .particles:nth-child(3) {
      animation: idi-mobile-spin 140s linear infinite;
    }

    .idi-loader .particles .star {
      position: absolute;
      background: #fff;
      border-radius: 50%;
      pointer-events: none;
      opacity: var(--star-opacity, 0.8);
      animation: idi-loader-twinkle var(--duration, 3s) infinite ease-in-out;
      will-change: opacity;
    }
  }

  @keyframes idi-mobile-spin { to { transform: rotate(360deg); } }

  /* Twinkle del loader que respeta la opacidad máxima por estrella (--star-opacity)
     para que la diferencia de brillo entre capas (profundidad) no se borre durante
     el parpadeo. Mantenemos `starfield-twinkle` aparte porque la usa el hero. */
  @keyframes idi-loader-twinkle {
    0%, 100% { opacity: calc(var(--star-opacity, 1) * 0.3); }
    50%      { opacity: var(--star-opacity, 1); }
  }

  @media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .idi-loader .particles,
    .idi-loader .particles:nth-child(2),
    .idi-loader .particles:nth-child(3) { animation: none; }
    .idi-loader .particles .star { animation: none; opacity: 0.6; }
  }

  .idi-loader__inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .idi__brand-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(200px, 24vw, 360px);
    height: auto;
    /* La centralización (xPercent/yPercent) y la escala las controla GSAP */
    opacity: 0;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    z-index: 1;
    filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.45));
  }

  @media (max-width: 767px) {
    .idi__brand-logo {
      width: clamp(140px, 38vw, 220px);
    }
  }

  .idi__h1 {
    white-space: nowrap;
    justify-content: center;
    font-family: var(--display);
    font-weight: 800;
    font-style: oblique;
    /* Reajustado al estrenar la cara de marca: tiene la altura de x un 6 % y la
       de mayúscula un 8 % mayores que la Segoe UI que hacía de fallback, así que
       al mismo px se ve MÁS grande, no más chica. */
    font-size: 10.5em;
    line-height: 1.0;           /* antes 0.75 — la "i" italic se cortaba abajo */
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 0.28em;                /* antes 0.08em — la D italic se montaba con los + */
    padding-bottom: 0.08em;     /* aire extra para la cola del italic */
    position: relative;
    z-index: 2;
  }

  .idi__h1-start {
    justify-content: flex-end;
    width: 1.4em;               /* "I+" mide 1,203em en la cara de marca dentro de esta caja con overflow:clip — 1.3em dejaba sólo un 7 % de holgura antes del voladizo de la oblicua */
    display: flex;
    /* clip recorta sin crear scroll container (evita scrollbars del overflow-y) */
    overflow: clip;
    overflow-clip-margin: 0.25em;  /* aire extra para descender italic (Chrome/FF) */
  }

  .idi__h1-end {
    justify-content: flex-start;
    width: 1.4em;               /* "I+" mide 1,203em en la cara de marca dentro de esta caja con overflow:clip — 1.3em dejaba sólo un 7 % de holgura antes del voladizo de la oblicua */
    display: flex;
    overflow: clip;
    overflow-clip-margin: 0.25em;
  }

  .idi__letter {
    display: block;
    position: relative;
  }

  .idi-loader__box {
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 0;
    display: flex;
    position: relative;
  }

  .idi-loader__box-inner {
    justify-content: center;
    align-items: center;
    min-width: 1em;
    height: 95%;
    display: flex;
    position: relative;
  }

  .idi__letter-d {
    position: relative;
    z-index: 3;
    display: block;
  }

  .idi__growing-image {
    justify-content: center;
    align-items: center;
    width: 0%;
    height: 100%;
    display: flex;
    position: absolute;
    overflow: hidden;
    z-index: 1;
  }

  .idi__growing-image-wrap {
    width: 100%;
    min-width: 1em;
    height: 100%;
    position: absolute;
  }

  .idi__cover-image {
    pointer-events: none;
    object-fit: cover;
    -webkit-user-select: none;
    user-select: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  @media (max-width: 991px) {
    .idi__h1 { font-size: 8em; }
  }
  @media (max-width: 767px) {
    .idi__h1 { font-size: 4.9em; }
  }
  @media (max-width: 480px) {
    .idi__h1 { font-size: 3.5em; }
  }

  /* ============ HERO ============ */
  .hero {
    position: relative;
    height: 100vh;
    height: 100dvh;
    width: 100%;
    overflow: hidden;
    background: var(--bg-deep);
  }

  .hero-webgl {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
  }

  /* Vignette para legibilidad del texto */
  .hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg,
        rgba(1, 10, 31, 0.55) 0%,
        rgba(1, 10, 31, 0.15) 25%,
        rgba(1, 10, 31, 0.30) 55%,
        rgba(1, 10, 31, 0.85) 100%);
    pointer-events: none;
    z-index: 1;
  }

  .hero-header {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 20;
    padding: 28px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    opacity: 0;
    transition: opacity 1s ease-out 0.2s;
  }

  .hero.is--ready .hero-header { opacity: 1; }

  .hero-logo {
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    color: var(--ink);
    min-width: 0;
  }

  .hero-logo__img {
    width: clamp(52px, 5.2vw, 70px);
    height: clamp(52px, 5.2vw, 70px);
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 10px 28px rgba(0,0,0,0.45));
  }

  .hero-logo__name {
    font-family: var(--display);
    font-weight: 800;
    font-style: oblique;
    font-size: clamp(16px, 1.5vw, 21px);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ink);
    text-shadow: 0 2px 12px rgba(0,0,0,0.7);
    white-space: nowrap;
  }

  /* Wordmark oficial: ALTITUD blanco + 100K fucsia */
  .hero-logo__name-k {
    color: var(--accent-hot);
  }

  .hero-nav {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  /* Botones de navegación — cada uno con el acento de su ruta */
  .hero-nav__link {
    --nav-accent: var(--accent-warm);
    --nav-glow: rgba(249, 146, 28, 0.30);
    font-family: var(--mono);
    font-size: clamp(12px, 0.9vw, 14px);
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--ink);
    text-decoration: none;
    text-transform: uppercase;
    text-shadow: 0 2px 12px rgba(0,0,0,0.7);
    padding: 10px 18px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: rgba(1, 10, 31, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: var(--e-2);
    transition: border-color var(--t-slow) var(--ease), background 0.3s ease, box-shadow var(--t-slow) var(--ease), transform 0.3s ease;
  }

  .hero-nav__link:hover,
  .hero-nav__link:focus-visible {
    border-color: var(--nav-accent);
    background: rgba(1, 10, 31, 0.75);
    box-shadow:
      0 8px 24px rgba(0, 0, 0, 0.40),
      0 0 18px var(--nav-glow);
    transform: translateY(-2px);
  }

  .hero-nav__link:active {
    transform: translateY(0);
    box-shadow: var(--e-1);
  }

  .hero-nav__link--cool { --nav-accent: var(--accent-cool); --nav-glow: rgba(145, 55, 147, 0.36); }
  .hero-nav__link--warm { --nav-accent: var(--accent-warm); --nav-glow: rgba(249, 146, 28, 0.30); }

  /* Contacto: CTA fucsia destacado */
  .hero-nav__link--cta {
    --nav-accent: var(--accent-hot);
    --nav-glow: rgba(242, 22, 81, 0.42);
    border-color: rgba(242, 22, 81, 0.75);
    background: rgba(242, 22, 81, 0.16);
  }

  .hero-nav__link--cta:hover,
  .hero-nav__link--cta:focus-visible {
    background: var(--accent-hot);
    border-color: var(--accent-hot);
  }

  /* ── Botón de idioma ──────────────────────────────────────────────────
     UN SOLO botón que nombra el idioma AL QUE se cambia: "ENGLISH" en la
     página española, "ESPAÑOL" en la inglesa. Los códigos ES/EN había que
     descifrarlos y no se leían como "idioma"; la palabra completa + el globo
     hacen el control inequívoco sin tener que interpretarlo. Además así no
     hay estado activo/inactivo que entender: el botón dice lo que hace. */
  .hero-lang {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-left: 10px;
    padding: 10px 16px;
    font-family: var(--mono);
    font-size: clamp(12px, 0.9vw, 14px);
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    /* Relleno BLANCO sólido: es el único elemento claro de una barra oscura,
       así que el ojo lo encuentra de inmediato. Con borde translúcido pasaba
       desapercibido. Mismo tratamiento que en los hubs, para que el control
       sea reconocible en todo el sitio. */
    color: #0b0d12;
    border: 1px solid #ffffff;
    border-radius: var(--r-sm);
    background: #ffffff;
    box-shadow: var(--e-2);
    transition: background var(--t-base) var(--ease), border-color 0.22s ease, color var(--t-base) var(--ease),
                transform 0.22s ease, box-shadow var(--t-base) var(--ease);
  }

  /* El globo en naranja de marca remata la identificación del control. */
  .hero-lang__globe {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    color: var(--accent-warm);
    transition: color var(--t-base) var(--ease);
  }
  .hero-lang__globe svg { display: block; }

  .hero-lang:hover,
  .hero-lang:focus-visible {
    background: var(--accent-warm);
    border-color: var(--accent-warm);
    color: #0b0d12;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.40), 0 0 20px rgba(249, 146, 28, 0.50);
  }
  .hero-lang:hover .hero-lang__globe,
  .hero-lang:focus-visible .hero-lang__globe { color: #0b0d12; }

  .hero-lang:focus-visible {
    outline: 2px solid var(--accent-hot);
    outline-offset: 3px;
  }

  .hero-lang:active { transform: translateY(0); }

  /* Badge "ES" — marca los enlaces que llevan a páginas que sólo existen en
     español. Sólo se usa en /en/. */
  .lang-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 5px;
    font-family: var(--mono);
    font-size: 0.72em;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.65);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    vertical-align: 1px;
    text-transform: uppercase;
  }

  .hero-content {
    position: relative;
    z-index: 10;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: clamp(96px, 12vh, 120px) var(--gutter) clamp(48px, 7vh, 72px);
    /* +2×gutter: este elemento lleva el gutter Y el max-width, así que sin esto
       su contenido arrancaría un gutter más adentro que el del resto. */
    max-width: calc(var(--w-wide) + 2 * var(--gutter));
    margin: 0 auto;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.2s ease-out 0.4s, transform 1.2s ease-out 0.4s;
  }

  .hero.is--ready .hero-content {
    opacity: 1;
    transform: translateY(0);
  }

  .hero-title {
    font-family: var(--display);
    font-weight: 800;
    font-style: oblique;
    font-size: clamp(32px, min(4.9vw, 8vh), 78px);
    line-height: 1.08;
    letter-spacing: -0.005em;
    margin-bottom: clamp(20px, 3vh, 32px);
    max-width: min(1120px, 92%);
    text-shadow: 0 6px 32px rgba(0,0,0,0.75);
  }

  .hero-title em {
    font-style: oblique;
    color: var(--accent-warm);
  }

  .hero-lede {
    font-size: clamp(16px, min(1.45vw, 2.3vh), 21px);
    line-height: 1.55;
    color: var(--ink);
    max-width: min(720px, 95%);
    margin-bottom: clamp(28px, 5vh, 52px);
    text-shadow: 0 2px 16px rgba(0,0,0,0.8);
  }

  .hero-routes {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
  }

  /* ---- Tarjetas de ruta ---- */
  .hero-route {
    --route-accent: var(--accent-warm);
    --route-ink: var(--accent-warm);
    --route-glow: rgba(249, 146, 28, 0.20);
    position: relative;
    display: inline-flex;
    flex-direction: column;
    gap: 16px;
    min-width: 340px;
    max-width: 400px;
    padding: 26px 28px;
    text-decoration: none;
    color: var(--ink);
    background: linear-gradient(160deg, rgba(2, 24, 61, 0.50), rgba(1, 10, 31, 0.82));
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    overflow: hidden;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: var(--e-3);
    cursor: pointer;
    isolation: isolate;
    transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
  }

  /* Lavado del color de ruta en hover */
  .hero-route::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(120% 90% at 15% 0%, var(--route-glow), transparent 55%);
    opacity: 0;
    transition: opacity var(--t-slow) var(--ease);
    pointer-events: none;
  }

  /* Jost y sin inclinar: estos dos títulos de tarjeta viven justo debajo de un
     titular de 78px en la cara de marca. En oblicua extra bold competirían con
     él y la portada tendría dos voces display gritando a la vez. */
  .hero-route__title {
    font-family: var(--display-alt);
    font-weight: 600;
    font-size: clamp(19px, min(1.9vw, 2.9vh), 27px);
    letter-spacing: 0.01em;
    line-height: 1.08;
    color: var(--route-accent);
  }

  .hero-route__desc {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.4;
    color: var(--ink-dim);
    max-width: 34ch;
  }

  .hero-route__desc li {
    position: relative;
    padding-left: 18px;
  }

  /* Marcador mínimo (guion) con el acento de la ruta */
  .hero-route__desc li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 8px;
    height: 2px;
    background: var(--route-ink);
    opacity: 0.9;
  }

  /* Variantes de ruta — cae todo en cascada vía custom properties */
  .hero-route--warm {
    --route-accent: var(--accent-warm);
    --route-ink: var(--accent-warm);
    --route-glow: rgba(249, 146, 28, 0.20);
  }

  .hero-route--cool {
    --route-accent: var(--accent-cool);
    --route-ink: #C77BC9;
    --route-glow: rgba(145, 55, 147, 0.26);
  }

  .hero-route:hover,
  .hero-route:focus-visible {
    transform: translateY(-4px);
    border-color: var(--route-accent);
    box-shadow:
      0 24px 56px rgba(0, 0, 0, 0.50),
      0 0 30px var(--route-glow);
  }

  .hero-route:hover::before { opacity: 1; }

  .hero-route:focus-visible {
    outline: 2px solid var(--route-accent);
    outline-offset: 3px;
  }

  

  /* ============ ABOUT ============ */
  .about {
    padding: var(--sp-5) var(--gutter);
    position: relative;
    z-index: 2;
    overflow: hidden;
    min-height: clamp(440px, 64vh, 620px);
    display: flex;
    align-items: center;
    background:
      radial-gradient(ellipse farthest-corner at center top,
        var(--about-bg-top) 0%, var(--about-bg-bottom) 60%);
  }

  .about-webgl {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
    pointer-events: none;
  }

  /* Overlay oscuro encima de la animación.
     Ajusta los 3 valores --about-overlay-* arriba (en :root) para regular
     cuánto se ve la animación vs cuánto se oscurece para legibilidad. */
  .about::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      linear-gradient(180deg,
        rgba(1, 10, 31, var(--about-overlay-top))    0%,
        rgba(1, 10, 31, var(--about-overlay-middle)) 40%,
        rgba(1, 10, 31, var(--about-overlay-bottom)) 100%);
  }

  .about-inner {
    position: relative;
    z-index: 2;
    max-width: var(--w-wide);
    margin: 0 auto;
    width: 100%;
    display: flex;
    align-items: stretch;
  }

  

  

  .about-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1;
    justify-content: flex-start;
  }

  .about-title {
    font-family: var(--display);
    font-weight: 800;
    font-style: oblique;
    font-size: clamp(22px, min(2.9vw, 4.5vh), 39px);
    line-height: 1.08;
    letter-spacing: 0;
  }

  .about-title em {
    font-style: oblique;
    color: var(--accent-warm);
  }

  .about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }

  .about-para {
    font-size: 16px;
    line-height: 1.7;
    color: var(--ink-dim);
  }

  .about-para strong {
    color: var(--ink);
    font-weight: 600;
  }

  

  .about-grid--with-logo {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: clamp(24px, 3.6vw, 56px);
    align-items: center;
    max-width: var(--w-wide);
    width: 100%;
  }

  .about-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 2vw, 22px);
  }

  .about-logo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    isolation: isolate;
  }

  .about-logo img {
    position: relative;
    z-index: 2;
    width: clamp(150px, 18vw, 250px);
    height: auto;
    filter: drop-shadow(0 8px 32px rgba(0, 0, 0, 0.6));
    animation: aboutLogoFloat 6s ease-in-out infinite alternate;
  }

  .about-logo__glow {
    position: absolute;
    z-index: 1;
    width: clamp(200px, 30vw, 320px);
    height: clamp(200px, 30vw, 320px);
    border-radius: 50%;
    background:
      radial-gradient(circle at center,
        rgba(242, 22, 81, 0.95) 0%,
        rgba(242, 22, 81, 0.65) 25%,
        rgba(242, 22, 81, 0.30) 50%,
        rgba(242, 22, 81, 0) 75%);
    filter: blur(36px) saturate(1.2);
    animation: aboutLogoPulse 4.5s ease-in-out infinite alternate;
    pointer-events: none;
  }

  @keyframes aboutLogoPulse {
    0%   { opacity: 0.8; transform: scale(0.94); }
    100% { opacity: 1;   transform: scale(1.12); }
  }

  @keyframes aboutLogoFloat {
    0%   { transform: translateY(-4px); }
    100% { transform: translateY(6px);  }
  }

  .about-cta-row {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 0;
  }

  .about-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: start;
    padding: 12px 22px;
    background: var(--accent-warm);
    color: var(--bg-deep);
    /* Jost, no la cara de marca: pedía peso 700 sin font-style, y como la
       familia de marca sólo tiene una cara (800 oblicua) el navegador habría
       servido ESA — el fallback ocurre por glifo ausente, no por peso ausente.
       El botón habría quedado extra bold e inclinado. */
    font-family: var(--display-alt);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.01em;
    text-decoration: none;
    border-radius: var(--r-pill);
    transition: transform var(--t-base) var(--ease), box-shadow .25s ease, background var(--t-base) var(--ease);
    box-shadow: 0 10px 24px rgba(249, 146, 28, 0.25);
  }

  .about-cta:hover {
    transform: translateY(-2px);
    background: #ffa53a;
    box-shadow: 0 14px 32px rgba(249, 146, 28, 0.35);
  }

  .about-cta__arrow {
    display: inline-block;
    transition: transform var(--t-base) var(--ease);
  }

  .about-cta:hover .about-cta__arrow {
    transform: translateX(4px);
  }

  

  .about-header .about-title {
    flex: 1 1 auto;
    min-width: 0;
  }

  .about-cta--outline {
    background: transparent;
    color: var(--ink);
    border: 1.5px solid var(--accent-warm);
    box-shadow: none;
    align-self: center;
    margin-top: 0;
  }

  .about-cta--outline:hover {
    background: rgba(249, 146, 28, 0.12);
    color: var(--ink);
    box-shadow: 0 10px 24px rgba(249, 146, 28, 0.18);
    transform: translateY(-2px);
  }

  .about-cta__arrow--diag {
    transition: transform var(--t-base) var(--ease);
  }

  .about-cta--outline:hover .about-cta__arrow--diag {
    transform: translate(3px, -3px);
  }

  /* ---- Scroll-fill text (sobre la animación WebGL existente) ---- */
  .about-fill {
    color: transparent;
    font-size: clamp(16px, min(2.5vw, 3.6vh), 26px);
    line-height: 1.22;
    letter-spacing: 0;
    font-weight: 400;  /* Plex Sans sólo trae 400 y 600; 500 se sintetizaría */
  }

  .about-fill > span {
    --paint-progress: 0%;
    --paint-band: clamp(22px, 4vw, 42px);
    -webkit-background-clip: text;
    background-clip: text;
    background-image:
      linear-gradient(
        180deg,
        transparent 0,
        transparent calc(var(--paint-progress) - var(--paint-band)),
        var(--accent-warm) calc(var(--paint-progress) - var(--paint-band)),
        var(--accent-warm) var(--paint-progress),
        transparent var(--paint-progress),
        transparent 100%
      ),
      linear-gradient(
        180deg,
        var(--ink) 0,
        var(--ink) var(--paint-progress),
        var(--ink-faint) var(--paint-progress),
        var(--ink-faint) 100%
      );
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: transparent;
    -webkit-text-fill-color: transparent;
    display: block;
  }

  .about-fill > span strong {
    font-weight: 600;
    color: inherit;
  }

  @media (prefers-reduced-motion: reduce) {
    .about-fill > span {
      --paint-progress: 100%;
      background-image: linear-gradient(180deg, var(--ink) 0, var(--ink) 100%);
    }
    .about-fill > span strong {
      color: inherit;
    }
  }

  /* ============ IGNITE — Start-Up Chile Ignite + promo SPHERA ============
     Banda inmediatamente bajo el hero, dentro de .starfield-zone--trust:
     izquierda el subsidio adjudicado (placa blanca + copy), derecha la tarjeta
     SPHERA que enlaza a /sphera.html — la misma pieza que vive bajo el hero de
     conocimiento/index.html, re-escalada para media columna.

     Las clases .sphera-promo* son un PORT de conocimiento/index.html:158-313.
     Allá viven en un <style> inline; acá viven en home.css, que sólo cargan /
     y /en/. No hay ninguna otra hoja donde puedan chocar, así que se conservan
     los nombres originales para que sincronizar ambas copias siga siendo fácil.

     Las props --sp-* se declaran EN LA TARJETA, no en :root: son la paleta
     cian/púrpura de SPHERA, que no pertenece al sistema de la portada. */
  .ignite-strip {
    padding: var(--sp-5) var(--gutter) var(--sp-3);
    position: relative;  /* + z-index: el .starfield hermano es position:absolute
                            z-index:0 y, sin esto, las estrellas se pintan ENCIMA
                            de este texto (mismo motivo que .trust-strip) */
    z-index: 2;
  }

  .ignite-inner {
    max-width: var(--w-wide);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(28px, 3.4vw, 52px);
    align-items: stretch;
  }

  /* ---------- Izquierda: subsidio adjudicado ---------- */
  /* El gap NO es uniforme a propósito: la placa se separa como bloque propio y
     el par título+bajada queda agrupado (ver .ignite-title { margin-bottom }). */
  .ignite-award {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(22px, 3.4vh, 44px);
    min-width: 0;
  }

  /* Placa blanca — el logo es azul marino y sobre fondo oscuro no se vería.
     El PNG es 4000×2250 pero la marca sólo ocupa 3424×604 (bbox del canal alfa:
     288,823 → 3712,1427), o sea 36,58 % de aire arriba y otro tanto abajo. Con
     object-fit:contain la marca quedaría al 27 % del alto de la placa. Los
     márgenes negativos recortan EXACTAMENTE ese aire:
        36,58 % del alto × (2250/4000) = 20,57 % del ANCHO,
     y los % de margin vertical se resuelven contra el ancho del contenedor.
     Así la placa se ajusta sola a la marca, sin aspect-ratio calculado a ojo.
     Si se reemplaza el PNG por otro con distinto aire, recalcular ese 20,57. */
  .ignite-badge {
    width: 100%;
    margin: 0;
    /* Padding lateral chico a propósito: el PNG ya trae un 7,2 % de aire propio
       a cada lado, que hace de área de resguardo de la marca. */
    padding: clamp(34px, 5.8vh, 70px) clamp(12px, 1.2vw, 20px);
    background: #FFFFFF;
    border-radius: var(--r-md);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow:
      var(--e-2),
      0 1px 0 rgba(255, 255, 255, 0.08) inset;
  }

  .ignite-badge img {
    display: block;
    width: 100%;
    height: auto;
    margin-top: -20.57%;
    margin-bottom: -20.57%;
  }

  .ignite-title {
    font-family: var(--display);
    font-weight: 800;
    font-style: oblique;
    font-size: clamp(26px, min(3.2vw, 4.6vh), 46px);
    line-height: 1.08;
    /* Negativo contra el gap del flex: acerca la bajada al título para que el
       par lea como un bloque, separado de la placa. */
    margin-bottom: calc(clamp(22px, 3.4vh, 44px) * -0.55);
  }

  /* En bloque para que el nombre de la marca nunca se parta entre líneas
     («Ganamos Start-Up / Chile Ignite»). Queda el verbo en blanco arriba y la
     marca completa en naranja abajo, igual en los dos idiomas. */
  .ignite-title em {
    display: block;
    font-style: oblique;
    color: var(--accent-warm);
  }

  .ignite-lede {
    font-size: clamp(15px, min(1.25vw, 2vh), 19px);
    line-height: 1.65;
    color: var(--ink-dim);
    max-width: 44ch;   /* medida de lectura; además equilibra el alto de la columna */
  }

  .ignite-lede strong { color: var(--ink); }

  /* ---------- Derecha: tarjeta SPHERA (port de conocimiento/) ---------- */
  /* Los cuerpos de texto de esta banda escalaban con `vw`, pero viven en cajas
     que DEJAN DE CRECER antes que el viewport (la tarjeta SPHERA ocupa media
     columna: ~38 % del ancho de pantalla). El término fluido corría por tanto
     ~2,6× más rápido de lo que le corresponde a su caja, y la proporción entre
     el título y su tarjeta cambiaba al redimensionar aunque la tarjeta no.
     Con `cqi` el tipo escala respecto a SU contenedor. Los mín/máx del clamp no
     cambian, así que en navegadores sin soporte el resultado sigue acotado. */
  .ignite-project {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
  }

  .sphera-promo-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 4px;
    font-family: "Roboto Mono", var(--mono);
    font-size: clamp(11px, 2cqi, 13px);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #76D1FF;
  }

  .sphera-promo-eyebrow::after {
    content: '';
    flex: 1;
    height: 1px;
    margin-left: 6px;
    background: linear-gradient(90deg,
      rgba(118, 209, 255, 0.45), rgba(180, 111, 182, 0.3), transparent);
  }

  .sphera-promo-eyebrow__pulse {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #76D1FF;
    box-shadow: 0 0 12px rgba(118, 209, 255, 0.9);
    animation: spheraEyebrowPulse 2.2s ease-in-out infinite;
  }

  @keyframes spheraEyebrowPulse {
    0%, 100% { transform: scale(1);   opacity: 1;    }
    50%      { transform: scale(1.5); opacity: 0.55; }
  }

  .sphera-promo {
    --sp-ink: #eef5ff;
    --sp-cyan: #76d1ff;
    --sp-purple: #b46fb6;
    --sp-line: rgba(182, 225, 255, 0.28);
    position: relative;
    display: block;
    flex: 1 1 auto;               /* la tarjeta rellena el alto de la fila */
    overflow: hidden;
    border-radius: var(--r-md);          /* 24px en el original; acá la tarjeta es menor */
    border: 1px solid var(--sp-line);
    min-height: clamp(360px, 44vh, 470px);
    color: var(--sp-ink);
    text-decoration: none;
    cursor: pointer;
    background: #070a12;          /* fallback si WebGL no está disponible */
    box-shadow: var(--e-3);
    transition: transform var(--t-base) var(--ease), box-shadow 0.25s ease;
  }

  .sphera-promo:hover,
  .sphera-promo:focus-visible {
    transform: translateY(-4px);
    box-shadow:
      var(--e-4),
      0 0 44px rgba(118, 209, 255, 0.14);
  }

  /* El original no tiene foco visible; acá sí, que es un enlace de tarjeta */
  .sphera-promo:focus-visible {
    outline: 2px solid var(--sp-cyan);
    outline-offset: 3px;
  }

  .sphera-promo__canvas { position: absolute; inset: 0; z-index: 0; }
  .sphera-promo__canvas canvas { display: block; width: 100%; height: 100%; }

  .sphera-promo__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /* Los rgba(1,10,31,·) son exactamente --bg-deep: la tarjeta se funde con la banda */
    background:
      radial-gradient(115% 80% at 50% 42%,
        rgba(1, 10, 31, 0.34) 0%, rgba(1, 10, 31, 0.42) 34%,
        rgba(1, 10, 31, 0.6) 70%, rgba(1, 10, 31, 0.94) 100%),
      linear-gradient(180deg,
        rgba(1, 10, 31, 0.58) 0%, rgba(1, 10, 31, 0.18) 28%,
        rgba(1, 10, 31, 0.18) 52%, rgba(1, 10, 31, 0.97) 100%);
  }

  /* En media columna la tarjeta se apila SIEMPRE (anillo arriba, texto abajo):
     es el mismo layout que el original aplica bajo 980px, acá por defecto. */
  .sphera-promo__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: clamp(10px, 1.6vh, 18px);
    padding: clamp(22px, 2.4vw, 34px);
    text-align: center;
  }

  .sphera-promo__title {
    font-family: "Space Grotesk", var(--display-alt);
    font-weight: 700;
    font-size: clamp(1.9rem, 7cqi, 2.8rem);
    line-height: 0.98;
    letter-spacing: -0.015em;
    color: var(--sp-ink);
    text-shadow: 0 6px 40px rgba(0, 0, 0, 0.55);
  }

  .sphera-promo__acronym {
    max-width: 34ch;
    font-family: "Roboto Mono", var(--mono);
    font-size: clamp(10px, 1.9cqi, 12px);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sp-cyan);
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
  }

  .sphera-promo__lead {
    max-width: 28ch;
    font-family: "Space Grotesk", var(--display-alt);
    font-weight: 500;
    font-size: clamp(1.05rem, 3.5cqi, 1.35rem);
    line-height: 1.2;
    color: #f3f8ff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
  }

  .sphera-promo__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: clamp(4px, 1vh, 10px);
    font-family: "Roboto Mono", var(--mono);
    font-size: clamp(11px, 2cqi, 13px);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sp-cyan);
  }

  .sphera-promo__cta::after {
    content: '→';
    transition: transform var(--t-base) var(--ease);
  }

  .sphera-promo:hover .sphera-promo__cta::after { transform: translateX(4px); }

  /* Logo SPHERA: anillo de texto 3D */
  .sphera-promo__right {
    --sp-radius: clamp(64px, 6vw, 96px);
    --sp-radius-text: calc(var(--sp-radius) * 1.18);
    --sp-ring-font: calc(var(--sp-radius) * 0.64);
    --sp-spin: 22s;
    --sp-speedX: 0; --sp-speedY: -2; --sp-speedZ: 0;
    --sp-step: 20deg; /* separación angular entre letras: menor = más juntas */
    position: relative;
    display: grid;
    place-items: center;
    perspective: 1100px;
    min-height: calc(2.2 * var(--sp-radius));
  }

  .sphera-promo__ring {
    position: relative;
    display: grid;
    place-items: center;
    transform-style: preserve-3d;
  }

  .sphera-promo__ring > * { grid-area: 1 / 1; }

  .sphera-promo__ring-disc {
    width: calc(2 * var(--sp-radius));
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid rgba(180, 111, 182, 0.45);
    background: radial-gradient(circle at 50% 50%,
      rgba(6, 11, 28, 0.72) 16%, rgba(6, 11, 28, 0.32) 52%, rgba(6, 11, 28, 0) 73%);
    box-shadow:
      inset 0 0 70px rgba(118, 209, 255, 0.12),
      0 0 70px rgba(145, 55, 147, 0.28);
  }

  .sphera-promo__ring-text {
    position: relative;
    transform-style: preserve-3d;
    color: transparent;
    font-family: "Space Grotesk", var(--display-alt);
    font-weight: 700;
    font-size: var(--sp-ring-font);
    text-transform: uppercase;
    will-change: transform;
    animation: spheraPromoSpin var(--sp-spin) linear infinite;
  }

  .sphera-promo__ring-text span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0)
               rotateY(calc(var(--i) * var(--sp-step)))
               translateZ(var(--sp-radius-text));
    backface-visibility: visible;
    color: #f3f8ff;
    text-shadow: 0 0 18px rgba(118, 209, 255, 0.5), 0 2px 12px rgba(0, 0, 0, 0.65);
  }

  @keyframes spheraPromoSpin {
    0%   { transform: rotateX(0deg) rotateZ(0deg) rotateY(0deg); }
    100% { transform: rotateX(calc(360deg * var(--sp-speedX)))
                     rotateZ(calc(360deg * var(--sp-speedZ)))
                     rotateY(calc(360deg * var(--sp-speedY))); }
  }

  /* En teléfono el anillo se come la tarjeta entera — igual que hace el
     original de conocimiento/ en su breakpoint de 640px. */
  @media (max-width: 600px) {
    .sphera-promo__right { display: none; }
    .sphera-promo { min-height: clamp(260px, 38vh, 320px); }
    .ignite-badge {
      width: 100%;
      padding: clamp(22px, 3.4vh, 34px) 14px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .sphera-promo__ring-text,
    .sphera-promo-eyebrow__pulse { animation: none; }
    .sphera-promo,
    .sphera-promo:hover { transform: none; }
    .sphera-promo__cta::after { transition: none; }
  }

  /* ============ TRUST STRIP — Empresas que confían ============ */
  .trust-strip {
    padding: var(--sp-3) var(--gutter);
    position: relative;
    z-index: 2;
  }

  .trust-inner {
    container-type: inline-size;
    max-width: var(--w-page);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(20px, 3vh, 28px);
  }

  .trust-eyebrow {
    font-family: var(--mono);
    font-size: clamp(18px, 2.2cqi, 24px);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 18px;
  }

  .trust-eyebrow::before,
  .trust-eyebrow::after {
    content: '';
    width: 44px;
    height: 1px;
    background: var(--accent-warm);
    opacity: 0.6;
  }

  .trust-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: clamp(20px, 3.2vw, 44px);
  }

  .trust-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border-radius: var(--r-md);
    padding: 18px 28px;
    margin: 0;
    min-width: clamp(190px, 18vw, 260px);
    height: clamp(96px, min(11vw, 14vh), 130px);
    box-shadow:
      var(--e-2),
      0 1px 0 rgba(255, 255, 255, 0.08) inset;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: transform var(--t-slow) var(--ease), box-shadow 0.4s ease;
    overflow: hidden;
  }

  .trust-logo img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
  }

  /* FALP tiene mucho aire en su PNG — escalar para que se lea */
  .trust-logo img.logo-falp {
    transform: scale(2.2);
    transform-origin: center;
  }

  .trust-logo:hover {
    transform: translateY(-4px);
    box-shadow:
      var(--e-3),
      0 0 0 1px rgba(249, 146, 28, 0.35);
  }

  /* ============ SELLO EMPRESA MUJER ============ */
  .sello-strip {
    padding: var(--sp-3) var(--gutter) var(--sp-5);
    position: relative;
    z-index: 2;
  }

  .sello-inner {
    max-width: var(--w-page);
    margin: 0 auto;
    display: grid;
    grid-template-columns: clamp(150px, 18vw, 200px) 1fr;
    gap: clamp(28px, 3.6vw, 44px);
    align-items: center;
    padding: clamp(26px, 4vh, 36px) clamp(28px, 3.5vw, 48px);
    background:
      linear-gradient(135deg,
        rgba(145, 55, 147, 0.20) 0%,
        rgba(242, 22, 81, 0.10) 60%,
        rgba(2, 24, 61, 0.0) 100%),
      rgba(2, 24, 61, 0.65);
    border: 1px solid rgba(242, 22, 81, 0.25);
    border-radius: var(--r-sm);
    box-shadow:
      var(--e-3),
      inset 0 1px 0 rgba(255, 255, 255, 0.04);
    position: relative;
    overflow: hidden;
  }

  .sello-inner::before {
    content: '';
    position: absolute;
    top: 36px;
    bottom: 36px;
    left: calc(clamp(28px, 3.5vw, 48px) + clamp(150px, 18vw, 200px) + clamp(14px, 1.6vw, 22px));
    width: 1px;
    background: linear-gradient(180deg,
      transparent 0%,
      rgba(242, 22, 81, 0.35) 50%,
      transparent 100%);
  }

  .sello-badge {
    width: clamp(150px, 18vw, 200px);
    height: clamp(150px, 18vw, 200px);
    border-radius: 50%;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(10px, 1.2vw, 14px);
    margin: 0;
    box-shadow:
      var(--e-2),
      0 0 0 4px rgba(255, 255, 255, 0.06),
      0 0 60px rgba(242, 22, 81, 0.18);
  }

  .sello-badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: none;
  }

  .sello-pill {
    font-family: var(--mono);
    font-size: clamp(12px, min(0.95vw, 1.5vh), 14px);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    /* El magenta oficial da 3.87:1 sobre el gradiente del propio panel; el
       punto de abajo sí lo conserva, porque ahí es relleno, no texto. */
    color: var(--accent-hot-ink);
    margin-bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }

  .sello-pill::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-hot);
    box-shadow: 0 0 12px rgba(242, 22, 81, 0.6);
  }

  .sello-title {
    font-family: var(--display);
    font-weight: 800;
    font-style: oblique;
    font-size: clamp(22px, min(2.6vw, 4vh), 34px);
    line-height: 1.10;
    letter-spacing: 0;
    margin-bottom: 20px;
  }

  .sello-title em {
    font-style: oblique;
    color: var(--accent-hot);
  }

  .sello-lede {
    font-size: clamp(16px, min(1.35vw, 2.1vh), 19px);
    line-height: 1.65;
    color: var(--ink-dim);
    max-width: 52ch;
  }

  /* ============ STARFIELD — fondo warp en zonas acotadas ============ */
  .starfield-zone {
    position: relative;
    isolation: isolate;
    background: var(--bg-deep);
  }

  .starfield {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .starfield .star {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    opacity: 0.8;
    animation: starfield-twinkle var(--duration, 3s) infinite ease-in-out;
    /* Sin will-change: eran ~410 capas de compositor permanentes, y `top` ni
       siquiera es componible. El parallax ya usa transform. */
  }

  @keyframes starfield-twinkle {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 1; }
  }

  @media (prefers-reduced-motion: reduce) {
    .starfield .star { animation: none; opacity: 0.55; transform: none !important; }
  }

  /* ============ CAMINOS — INSTRUMENT PANEL ============ */
  .stage-doors {
    padding: var(--sp-5) var(--gutter) var(--sp-6);
    position: relative;
    z-index: 2;
  }

  .doors-intro {
    max-width: var(--w-wide);
    margin: 0 auto clamp(24px, 4vh, 36px);
    padding-top: 12px;
    position: relative;
    z-index: 1;
  }

  .doors-subtitle {
    margin-top: clamp(12px, 2vh, 18px);
    /* Es un párrafo de hasta 28px: en la cara de marca saldría extra bold
       oblicuo entero (ver nota en .about-cta). */
    font-family: var(--display-alt);
    font-weight: 400;
    font-size: clamp(17px, min(1.95vw, 2.8vh), 28px);
    line-height: 1.5;
    color: var(--ink-dim);
    letter-spacing: 0.01em;
  }

  /* Las dos palabras enfatizadas del subtítulo SÍ van en la cara de marca:
     dentro de un párrafo en Jost redonda, la inclinación hace todo el trabajo
     del énfasis. Es lo que compra la regla "lo inclinado es marca", y evita
     tener que cargar una itálica de Jost sólo para esto. */
  .doors-subtitle .opt-warm {
    color: var(--accent-warm);
    font-family: var(--display);
    font-weight: 800;
    font-style: oblique;
  }

  .doors-subtitle .opt-cool {
    color: var(--accent-cool-ink);  /* el oficial da 2.98:1 como texto */
    font-family: var(--display);
    font-weight: 800;
    font-style: oblique;
  }

  

  .doors-question {
    font-family: var(--display);
    font-weight: 800;
    font-style: oblique;
    font-size: clamp(24px, min(3.8vw, 5.4vh), 46px);
    line-height: 1.10;
    letter-spacing: 0;
  }

  .doors-question em {
    font-style: oblique;
    color: var(--accent-warm);
  }

  

  .instrument-panel {
    container-type: inline-size;
    position: relative;
    z-index: 1;
    max-width: clamp(720px, 78vw, 1100px);
    margin: 0 auto;
    aspect-ratio: 700 / 460;
    background-color: var(--blueprint-bg);
    background-image: radial-gradient(circle, rgba(196, 152, 40, 0.06) 1px, transparent 1px);
    background-size: 20px 20px;
    border: 1px solid var(--blueprint-border);
    box-shadow:
      0 2px 0 rgba(196, 152, 40, 0.40),
      inset 0 0 0 6px rgba(196, 152, 40, 0.06),
      0 30px 80px rgba(0, 0, 0, 0.45);
  }

  .instrument-panel-drawing {
    display: block;
    width: 100%;
    height: 100%;
  }

  

  

  

  .centre-line {
    fill: none;
    stroke: var(--blueprint-centre);
    stroke-width: 0.8;
    stroke-dasharray: 7 5;
  }

  .pitch-circle {
    fill: none;
    stroke: var(--blueprint-pitch);
    stroke-width: 0.6;
    stroke-dasharray: 3 8;
  }

  .direction-arc {
    fill: none;
    stroke: var(--blueprint-direction);
    stroke-width: 1.8;
    stroke-linecap: round;
    opacity: 0.85;
  }

  .arrowhead {
    fill: var(--blueprint-direction);
    opacity: 0.95;
  }

  
  
  

  .dwg-meta {
    font-family: var(--mono);
    font-size: 8.5px;
    letter-spacing: 0.18em;
    fill: var(--blueprint-ink-muted);
    dominant-baseline: middle;
  }

  .dwg-cta {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.18em;
    fill: var(--blueprint-ink);
    dominant-baseline: middle;
  }
  .dwg-cta.dwg-cta--warm { fill: var(--accent-warm); }
  .dwg-cta.dwg-cta--cool { fill: var(--accent-cool); }

  .dwg-cta--callout {
    font-size: 11px;
    letter-spacing: 0.16em;
  }

  .dwg-dimension line {
    stroke: var(--blueprint-rule);
    stroke-width: 0.6;
    fill: none;
  }
  .dwg-dimension circle {
    fill: var(--blueprint-border);
  }
  .dwg-dimension text {
    font-family: var(--mono);
    font-size: 8.5px;
    letter-spacing: 0.14em;
    fill: var(--blueprint-ink-muted);
  }

  
  

  .dwg-block-frame {
    fill: none;
    stroke: var(--blueprint-border);
    stroke-width: 0.8;
    opacity: 0.9;
  }
  .dwg-block-line {
    stroke: var(--blueprint-rule);
    stroke-width: 0.6;
  }
  .dwg-block-title {
    font-family: var(--mono);
    font-weight: 600;
    font-size: 9px;
    letter-spacing: 0.18em;
    fill: var(--blueprint-ink);
    dominant-baseline: middle;
  }
  .dwg-block-row {
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: 0.14em;
    fill: var(--blueprint-ink-muted);
    dominant-baseline: middle;
  }

  

  .gear-label {
    font-family: var(--display-alt);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.16em;
    fill: var(--blueprint-ink);
    text-anchor: middle;
    dominant-baseline: middle;
  }

  .gear-label--warm { fill: var(--accent-warm); }
  .gear-label--cool { fill: var(--accent-cool); }

  

  

  .gear-body {
    fill: var(--blueprint-void);
    stroke-width: 1.2;
    stroke-linejoin: miter;
    fill-rule: evenodd;
    transition: filter var(--t-slow) var(--ease);
  }

  .gear-clockwise .gear-body { stroke: var(--accent-warm); }
  .gear-counter-clockwise .gear-body { stroke: var(--accent-cool); }

  .gear-hub {
    fill: var(--blueprint-bg);
    stroke-width: 1.5;
  }
  .gear-clockwise .gear-hub { stroke: var(--accent-warm); }
  .gear-counter-clockwise .gear-hub { stroke: var(--accent-cool); }

  .gear-axle {
    fill: var(--blueprint-ink-muted);
    stroke: var(--blueprint-bg);
    stroke-width: 0.75;
  }

  .gear-keyway {
    fill: var(--blueprint-bg);
  }

  .gear-clockwise {
    transform-box: fill-box;
    transform-origin: center;
    animation: spin-clockwise 8s linear infinite;
  }

  .gear-counter-clockwise {
    transform-box: fill-box;
    transform-origin: center;
    animation: spin-counter-clockwise 5s linear infinite;
  }

  @keyframes spin-clockwise          { to { transform: rotate(360deg); } }
  @keyframes spin-counter-clockwise  { to { transform: rotate(-360deg); } }

  .gear-link {
    cursor: pointer;
    transition: filter var(--t-slow) var(--ease);
  }

  /* Antes esto era `outline: none` y el único aviso de foco era el halo
     difuminado de abajo. Un resplandor de color alrededor de un engranaje que
     gira no tiene área ni contraste medibles: no sirve como indicador de foco,
     y era el único sitio del proyecto que quitaba el outline. El halo se queda
     como refuerzo estético; el indicador real es este. */
  .gear-link:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 4px;
    border-radius: var(--r-sm);
  }

  .gear-hit-area {
    fill: transparent;
    pointer-events: all;
  }

  .gear-link--warm:hover,
  .gear-link--warm:focus-visible {
    filter:
      drop-shadow(0 0 24px rgba(249, 146, 28, 0.85))
      drop-shadow(0 0 6px  rgba(249, 146, 28, 1));
  }
  .gear-link--cool:hover,
  .gear-link--cool:focus-visible {
    filter:
      drop-shadow(0 0 24px rgba(145, 55, 147, 0.85))
      drop-shadow(0 0 6px  rgba(145, 55, 147, 1));
  }

  /* ====================================================================
     CONTROLES DE POSICIÓN DE TOOLTIPS — EDITA ESTOS 4 VALORES
     --------------------------------------------------------------------
     Cuadro IZQUIERDO (warm — Acelerar mi empresa):
       --tooltip-warm-gap : separación horizontal del plano
                            (positivo = más afuera, negativo = se mete dentro)
       --tooltip-warm-top : posición vertical (0% = arriba, 50% = centro, 100% = abajo)

     Cuadro DERECHO (cool — Investigación):
       --tooltip-cool-gap : separación horizontal del plano
       --tooltip-cool-top : posición vertical
     ==================================================================== */
  .instrument-panel {
    --tooltip-warm-gap: clamp(-260px, -22vw, -180px);
    --tooltip-warm-top: 50%;
    --tooltip-cool-gap: clamp(-260px, -22vw, -180px);
    --tooltip-cool-top: 50%;
  }

  .gear-tooltip {
    position: absolute;
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    width: clamp(320px, 30vw, 440px);
    padding: clamp(22px, 3vh, 34px) clamp(24px, 3vw, 38px) clamp(20px, 2.6vh, 32px);
    background:
      linear-gradient(180deg, rgba(2, 24, 61, 0.55), transparent 50%),
      rgba(1, 10, 31, 0.96);
    border: 1px solid;
    border-left-width: 3px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    opacity: 0;
    transform: translateY(calc(-50% + 14px)) scale(0.98);
    pointer-events: none;
    transition: opacity var(--t-fast) var(--ease),
                transform var(--t-fast) var(--ease),
                box-shadow var(--t-base) var(--ease);
    box-shadow:
      0 30px 60px rgba(0, 0, 0, 0.45),
      0 0 0 1px rgba(255, 255, 255, 0.03) inset;
    z-index: 5;
  }

  .gear-tooltip.is-visible:hover { transform: translateY(-50%) scale(1.01); }
  .gear-tooltip--warm.is-visible:hover {
    box-shadow:
      0 30px 60px rgba(0, 0, 0, 0.45),
      0 0 0 1px rgba(249, 146, 28, 0.35) inset;
  }
  .gear-tooltip--cool.is-visible:hover {
    box-shadow:
      0 30px 60px rgba(0, 0, 0, 0.45),
      0 0 0 1px rgba(145, 55, 147, 0.35) inset;
  }

  .gear-tooltip.is-visible {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    pointer-events: auto;
  }

  .gear-tooltip--warm {
    right: calc(100% + var(--tooltip-warm-gap, 16px));
    top: var(--tooltip-warm-top, 50%);
    border-color: rgba(249, 146, 28, 0.55);
    border-left-color: var(--accent-warm);
    background:
      linear-gradient(180deg, rgba(249, 146, 28, 0.10), transparent 45%),
      rgba(1, 10, 31, 0.96);
  }

  .gear-tooltip--cool {
    left: calc(100% + var(--tooltip-cool-gap, 16px));
    top: var(--tooltip-cool-top, 50%);
    border-color: rgba(145, 55, 147, 0.55);
    border-left-color: var(--accent-cool);
    background:
      linear-gradient(180deg, rgba(145, 55, 147, 0.12), transparent 45%),
      rgba(1, 10, 31, 0.96);
  }

  .gear-tooltip__tag {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--display);
    font-weight: 800;
    font-style: oblique;
    font-size: clamp(17px, min(1.55vw, 2.4vh), 22px);
    line-height: 1.08;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 24px;
  }

  .gear-tooltip--warm .gear-tooltip__tag { color: var(--accent-warm); }
  .gear-tooltip--cool .gear-tooltip__tag { color: var(--accent-cool); }

  .gear-tooltip__tag::before {
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .gear-tooltip--warm .gear-tooltip__tag::before {
    background: var(--accent-warm);
    box-shadow: 0 0 14px rgba(249, 146, 28, 0.7);
  }
  .gear-tooltip--cool .gear-tooltip__tag::before {
    background: var(--accent-cool);
    box-shadow: 0 0 14px rgba(145, 55, 147, 0.7);
  }

  .gear-tooltip__list {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
  }

  .gear-tooltip__list li {
    /* Frases de cuerpo: misma razón que .about-cta y .doors-subtitle. */
    font-family: var(--display-alt);
    font-weight: 400;
    font-size: clamp(15px, min(1.3vw, 2vh), 18px);
    line-height: 1.5;
    letter-spacing: 0.01em;
    color: var(--ink);
    padding: clamp(10px, 1.6vh, 16px) 0;
    border-bottom: 1px solid var(--line);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--t-base) var(--ease),
                transform var(--t-base) var(--ease),
                /* translateX, no padding-left: padding es layout y reflowaba
                   la lista entera en cada hover */
                color var(--t-base) var(--ease),
                border-color var(--t-slow) var(--ease);
  }

  .gear-tooltip__list li:last-child { border-bottom: none; }

  .gear-tooltip.is-visible .gear-tooltip__list li { opacity: 1; transform: translateY(0); }

  .gear-tooltip__list li:hover {
    transform: translateX(8px);   /* era padding-left: reflowaba la lista entera */
    border-bottom-color: var(--line-strong);
  }
  .gear-tooltip--warm .gear-tooltip__list li:hover { color: var(--accent-warm); }
  .gear-tooltip--cool .gear-tooltip__list li:hover { color: var(--accent-cool-ink); }

  /* Mantiene la frase en una sola familia: un 800 oblicuo en línea dentro de un
     párrafo en 400 sería un salto de peso Y de inclinación a la vez. */
  .gear-tooltip__list li strong {
    font-family: var(--display-alt);
    font-weight: 600;
    letter-spacing: 0.015em;
    color: var(--ink);
    transition: color var(--t-slow) var(--ease);
  }
  .gear-tooltip--warm .gear-tooltip__list li:hover strong { color: var(--accent-warm); }
  .gear-tooltip--cool .gear-tooltip__list li:hover strong { color: var(--accent-cool); }

  .gear-tooltip__cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--display);
    font-weight: 800;
    font-style: oblique;
    font-size: clamp(17px, min(1.5vw, 2.3vh), 21px);
    letter-spacing: 0;
    padding-top: 20px;
    border-top: 1px solid;
  }

  .gear-tooltip--warm .gear-tooltip__cta {
    color: var(--accent-warm);
    border-top-color: rgba(249, 146, 28, 0.40);
  }
  .gear-tooltip--cool .gear-tooltip__cta {
    color: var(--accent-cool);
    border-top-color: rgba(145, 55, 147, 0.40);
  }

  @media (prefers-reduced-motion: reduce) {
    .gear-tooltip,
    .gear-tooltip__list li {
      transition: opacity 0.2s ease !important;
      transform: none !important;
    }
  }

  /* Rótulos del plano: se ocultan según el ancho REAL del panel, no del
     viewport. Antes se escondían a 600px de viewport, pero el panel ya bajaba
     de 700px hacia los 748px: quedaba una franja de ~150px con anotaciones
     técnicas presentes e ilegibles. */
  @container (max-width: 700px) {
    .instrument-panel .dwg-title-block,
    .instrument-panel .dwg-cta:not(.dwg-cta--callout),
    .instrument-panel .dwg-meta,
    .instrument-panel .dwg-dimension {
      display: none;
    }
  }

  /* ============ FOOTER (estilo rutas rendimiento/conocimiento) ============ */
  .foot {
    max-width: calc(var(--w-wide) + 2 * var(--gutter));
    margin: var(--sp-5) auto 0;
    padding: var(--sp-3) var(--gutter);
    border-top: 1px solid var(--line);
    color: var(--ink-dim);
    font-size: 14px;
    position: relative;
    z-index: 2;
  }

  .foot-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    /* Reserva el rincón inferior derecho para el botón flotante de contacto */
    padding-right: 84px;
  }

  .foot-copy {
    display: flex;
    align-items: center;
    color: var(--ink-dim);
    opacity: 0.92;
  }

  /* Firma con separador sutil, como en las páginas de ruta */
  .foot-copy .sig {
    margin-left: 12px;
    padding-left: 12px;
    border-left: 1px dashed var(--line-strong);
    opacity: 0.85;
    white-space: nowrap;
  }

  .foot-copy .sig a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
  }

  .foot-copy .sig a:hover {
    color: var(--ink);
    border-bottom-color: transparent;
  }

  .foot-nav {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
  }

  .foot-nav a {
    color: var(--ink-dim);
    text-decoration: none;
  }

  .foot-nav a:hover {
    color: var(--ink);
  }

  /* ============ RESPONSIVE ============ */
  @media (max-width: 1200px) {
    .hero-content {
      padding-left: 48px;
      padding-right: 48px;
    }
    .hero-routes {
      flex-direction: column;
      width: 100%;
      max-width: 560px;
      gap: 14px;
    }
    .hero-route {
      min-width: 0;
      width: 100%;
      max-width: none;
      padding: 20px 22px 18px;
    }
    .hero-route__title { font-size: 22px; }
    .hero-route__desc { font-size: 12.5px; }
    .hero-header { padding: 22px 32px; }

    .about-grid--with-logo { gap: 32px; }

    .ignite-inner { gap: 32px; }
    .ignite-badge { padding: 34px 16px; }

    .trust-inner { gap: 22px; padding-top: 28px; }

    .sello-inner {
      grid-template-columns: 170px 1fr;
      gap: 32px;
      padding: 28px 32px;
    }
    .sello-inner::before { left: calc(32px + 170px + 18px); }
    .sello-badge { width: 170px; height: 170px; }

    .doors-intro { margin-bottom: 28px; }
    .instrument-panel {
      max-width: 860px;
      --tooltip-warm-gap: -200px;
      --tooltip-cool-gap: -200px;
    }

    .gear-tooltip { width: 320px; padding: 22px 26px 20px; }
    .gear-tooltip__list li { font-size: 15px; padding: 12px 0; }
    .gear-tooltip__cta { font-size: 18px; padding-top: 14px; }
  }

  @media (max-width: 900px) {
    .hero-header { padding: 20px 24px; }
    .hero-logo { gap: 12px; }
    .hero-logo__img {
      width: clamp(44px, 6vw, 56px);
      height: clamp(44px, 6vw, 56px);
    }
    .hero-logo__name { font-size: clamp(14px, 1.8vw, 17px); }
    .hero-nav { gap: 10px; }
    .hero-nav__link { font-size: clamp(11px, 1.45vw, 13px); padding: 8px 13px; }
    .hero-lang {
      font-size: clamp(11px, 1.45vw, 13px);
      letter-spacing: 0.08em;
      gap: 7px;
      padding: 8px 13px;
    }
    .hero-content {
      align-items: stretch;
    }
    .hero-routes { flex-direction: column; width: 100%; }
    .hero-route { min-width: 0; width: 100%; }
    .about-grid { grid-template-columns: 1fr; gap: 24px; }
    /* Fusionado desde el antiguo @media 720px: allí estas reglas eran código
       muerto (el bloque de 900 las pisaba por orden de aparición) y el
       reordenado del logo llegaba 180px tarde respecto al colapso. */
    .about { min-height: 0; display: block; }
    .about-inner { display: block; }
    .about-body { gap: 22px; }
    .about-cta--outline { margin-top: 0; }
    .about-fill { font-size: clamp(19px, 4.8vw, 26px); }
    .about-side { order: -1; gap: 14px; }
    .about-logo img { width: clamp(130px, 34vw, 180px); }
    .about-logo__glow { width: clamp(170px, 46vw, 230px); height: clamp(170px, 46vw, 230px); }
    .about-cta-row { justify-content: center; }
    /* Una sola columna: primero el premio, después SPHERA (mismo orden de
       lectura izq→der convertido en arriba→abajo). */
    .ignite-inner {
      grid-template-columns: 1fr;
      gap: 28px;
      max-width: 620px;
      text-align: center;
    }
    .ignite-award { gap: 22px; }
    /* En una sola columna la placa se estiraría demasiado: se topa y se centra */
    .ignite-badge {
      width: min(100%, 560px);
      margin-left: auto;
      margin-right: auto;
      padding: 30px 18px;
    }
    .ignite-title { margin-bottom: -12px; }
    .ignite-lede { margin-left: auto; margin-right: auto; }
    .sphera-promo-eyebrow { justify-content: center; padding-left: 0; }
    .sphera-promo-eyebrow::after { display: none; }
    /* La tarjeta vuelve a ser ancha, así que el anillo puede crecer */
    .sphera-promo__right { --sp-radius: clamp(80px, 14vw, 120px); }

    .trust-inner { padding-top: 48px; gap: 28px; }
    .trust-eyebrow::before, .trust-eyebrow::after { width: 24px; }
    .trust-logos { gap: 20px; }
    .trust-logo {
      min-width: 160px;
      height: 92px;
      padding: 20px 26px;
    }
    .trust-logo img { max-height: 48px; }
    .sello-inner {
      grid-template-columns: 1fr;
      gap: 28px;
      padding: 36px 28px;
      text-align: center;
    }
    .sello-inner::before { display: none; }
    .sello-badge {
      width: 170px;
      height: 170px;
      margin: 0 auto;
      padding: 12px;
    }
    .sello-lede { margin-left: auto; margin-right: auto; }
    .sello-pill { justify-content: center; }
    .doors-intro { grid-template-columns: 1fr; gap: 24px; }.instrument-panel { aspect-ratio: 700 / 520; }
    /* Tooltips → tarjetas-camino. Este tratamiento vivía sólo bajo 600px, así
       que entre 601 y 900 el mismo componente se veía como un bloque cuadrado y
       azul marino. Una sola identidad desde que deja de flotar. */
    .gear-tooltip {
      position: static;
      opacity: 1;
      transform: none;
      pointer-events: auto;
      margin: 14px 14px 0;
      width: calc(100% - 28px);
      padding: 22px 24px 20px;
      border-radius: var(--r-md);
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-left-width: 4px;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)),
        rgba(1, 10, 31, 0.82);
      box-shadow: var(--e-3), 0 1px 0 rgba(255, 255, 255, 0.08) inset;
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
    }
    .gear-tooltip--warm, .gear-tooltip--cool { left: auto; right: auto; }
    .gear-tooltip--warm { border-left-color: var(--accent-warm); }
    .gear-tooltip--cool { border-left-color: var(--accent-cool); }
    .gear-tooltip + .gear-tooltip { margin-top: 12px; }
    .gear-tooltip:active { transform: translateY(2px) scale(0.995); }
    .gear-tooltip__list li { opacity: 1; transform: none; font-size: 14px; }
    .gear-tooltip__cta { font-size: 16px; }
    /* Footer apilado: deja libre la zona del botón flotante abajo */
    .foot-flex {
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 10px;
      padding-right: 0;
    }
    .foot-copy { flex-wrap: wrap; justify-content: center; }
    .foot-copy .sig {
      border-left-color: transparent;
      border-top: 1px dashed var(--line-strong);
      margin-top: 6px;
      padding-top: 6px;
    }
    .foot-nav { justify-content: center; }
  }

  /* ============ HERO — afinado solo para teléfonos ============
     Resuelve tres problemas reportados en celular:
     1) Header se montaba sobre el título (nav sin wrap).
     2) Contenido se cortaba al final (hero estaba clavado en 100dvh con overflow:hidden).
     3) Todo se veía apretado en pantallas ~360–420 px. */
  @media (max-width: 600px) {
    /* Permitir que el hero crezca: ahora hace scroll en lugar de cortar contenido */
    .hero {
      height: auto;
      min-height: 100dvh;
      overflow: visible;
    }

    /* Header apilado: logo arriba, nav debajo en su propia fila */
    .hero-header {
      padding: 14px 18px 10px;
      flex-direction: column;
      align-items: stretch;
      gap: 10px;
    }
    .hero-logo { gap: 10px; align-self: flex-start; }
    .hero-logo__img { width: 40px; height: 40px; }
    .hero-logo__name { font-size: 13.5px; }
    .hero-nav {
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-start;
      width: 100%;
      padding-top: 8px;
      border-top: 1px solid var(--line);
    }
    .hero-nav__link {
      font-size: 10.5px;
      letter-spacing: 0.08em;
      white-space: nowrap;
      padding: 7px 11px;
    }

    /* El selector sale del flujo del nav y se ancla en el hueco libre a la
       derecha del wordmark (.hero-header ya es position:absolute, así que es
       el bloque contenedor). Así .hero-nav sigue siendo UNA fila de 3 enlaces
       y el padding-top: 130px de .hero-content sigue siendo válido. */
    .hero-lang {
      position: absolute;
      top: 11px;
      right: 18px;
      margin-left: 0;
      font-size: 10.5px;
      letter-spacing: 0.06em;
      gap: 6px;
      padding: 7px 11px;
      z-index: 2;
    }
    .hero-lang__globe svg { width: 13px; height: 13px; }

    /* Contenido: padding-top suficiente para esquivar header de 2 filas */
    .hero-content {
      padding: 130px 20px 64px;
    }
    .hero-title {
      font-size: clamp(25px, 7vw, 34px);
      line-height: 1.12;
      margin-bottom: 18px;
      max-width: 100%;
    }
    .hero-lede {
      font-size: 14.5px;
      line-height: 1.5;
      margin-bottom: 26px;
      max-width: 100%;
    }
    /* Tarjetas de ruta: más compactas */
    .hero-routes { gap: 14px; }
    .hero-route { padding: 20px 20px; gap: 12px; }
    .hero-route__title { font-size: 19px; }
    .hero-route__desc { font-size: 12.5px; gap: 8px; max-width: 100%; }
    .hero-route__desc li { padding-left: 16px; line-height: 1.4; }
  }

  /* ============ STAGE-DOORS — afinado solo para teléfonos ============
     Mejora la sección de engranajes en mobile:
     - panel SVG a ancho completo con engranajes más grandes y táctiles
     - oculta callouts técnicos chicos que quedan ilegibles
     - hint táctil ("Toca un engranaje") fuera del SVG
     - tooltips → tarjetas-camino estilo .hero-route, jerárquicas y táctiles */
  .doors-tap-hint {
    display: none;
  }

  @media (max-width: 600px) {
    .stage-doors { padding: 32px 14px 70px; }
    .doors-intro { margin-bottom: 18px; }
    .doors-question { font-size: clamp(23px, 6.8vw, 32px); line-height: 1.12; }
    .doors-subtitle { font-size: clamp(15px, 4vw, 18px); margin-top: 10px; }

    .doors-tap-hint {
      display: block;
      max-width: var(--w-wide);
      margin: 0 auto 12px;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--accent-warm);
      text-align: left;
    }

    /* Panel SVG: ancho completo, con plano ampliado para teléfonos */
    .instrument-panel {
      max-width: 100%;
      aspect-ratio: auto;
      overflow: visible;
      padding-bottom: 18px;
      background-size: 16px 16px;
      box-shadow:
        0 2px 0 rgba(196, 152, 40, 0.40),
        inset 0 0 0 4px rgba(196, 152, 40, 0.06),
        0 20px 48px rgba(0, 0, 0, 0.45);
    }

    .instrument-panel .instrument-panel-drawing {
      width: 100%;
      height: auto;
      aspect-ratio: 700 / 520;
      transform: scale(1.16);
      transform-origin: 50% 48%;
      margin-bottom: 36px;
    }

    /* Ocultar piezas técnicas y callouts internos en mobile.
       Los callouts "HAZ CLIC AQUÍ" con sus flechas y specs (Ø/M/Z) se superponen
       en pantallas chicas. La info ya queda clara con:
         · el hint "▸ Toca un engranaje" arriba del panel
         · los labels bajo cada engranaje ("ACELERAR MI EMPRESA" / "INVESTIGACIÓN")
         · las tarjetas-camino debajo */

    /* Labels de cada engranaje más grandes */
    .instrument-panel .gear-label {
      font-size: 20px;
      letter-spacing: 0.14em;
    }

    .gear-tooltip--warm:active {
      box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.5),
        0 0 22px rgba(249, 146, 28, 0.20);
    }
    .gear-tooltip--cool:active {
      box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.5),
        0 0 22px rgba(145, 55, 147, 0.24);
    }

    /* Engranaje encendido al tap — replica el halo del hover desktop */
    .gear-link--warm.is-active {
      filter:
        drop-shadow(0 0 24px rgba(249, 146, 28, 0.85))
        drop-shadow(0 0 6px  rgba(249, 146, 28, 1));
    }
    .gear-link--cool.is-active {
      filter:
        drop-shadow(0 0 24px rgba(145, 55, 147, 0.85))
        drop-shadow(0 0 6px  rgba(145, 55, 147, 1));
    }

    /* Cuadro activo — refuerza borde + glow sin mover el cuadro de su posición */
    .gear-tooltip.is-active {
      border-color: rgba(255, 255, 255, 0.32);
    }
    .gear-tooltip--warm.is-active {
      border-color: rgba(249, 146, 28, 0.85);
      border-left-color: var(--accent-warm);
      box-shadow:
        0 22px 50px rgba(0, 0, 0, 0.48),
        0 0 28px rgba(249, 146, 28, 0.30),
        0 1px 0 rgba(255, 255, 255, 0.10) inset;
    }
    .gear-tooltip--cool.is-active {
      border-color: rgba(145, 55, 147, 0.85);
      border-left-color: var(--accent-cool);
      box-shadow:
        0 22px 50px rgba(0, 0, 0, 0.48),
        0 0 28px rgba(145, 55, 147, 0.32),
        0 1px 0 rgba(255, 255, 255, 0.10) inset;
    }

    .gear-tooltip__tag {
      font-size: clamp(16px, 4.2vw, 20px);
      letter-spacing: 0.01em;
      margin-bottom: 18px;
      gap: 12px;
    }
    .gear-tooltip__tag::before { width: 11px; height: 11px; }

    .gear-tooltip__list { margin: 0 0 20px; }
    .gear-tooltip__list li {
      font-size: 15px;
      line-height: 1.45;
      padding: 12px 0;
      opacity: 1;
      transform: none;
    }

    .gear-tooltip__cta {
      font-size: 17px;
      letter-spacing: 0.02em;
      padding-top: 16px;
      gap: 12px;
    }
  }

  /* El botón flotante de contacto («¿Hablamos?») vivía aquí. Se movió a
     /assets/css/floating-contact.css el 2026-07-27 al replicarlo en
     conocimiento, rendimiento y sphera: dejarlo aquí habría obligado a
     mantener tres copias del mismo CSS. Ver también /js/floating-contact.js. */

  @media (prefers-reduced-motion: reduce) {
    .idi-loader { display: none !important; }
    .idi-loader .particles,
    .idi-loader .particles::before,
    .idi-loader .particles::after {
      animation: none !important;
      opacity: 0 !important;
    }
    .hero-header, .hero-content {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
    }
    .hero-nav__link,
    .hero-route,
    .hero-route::before {
      transition: none !important;
    }
    .about-webgl { display: none !important; }

    /* Faltaban estas cuatro. Los engranajes son lo más grande que se mueve en
       la página y giraban indefinidamente sin escape: para alguien con
       sensibilidad vestibular era lo más hostil que quedaba. Quedan quietos en
       una posición engranada, que es como deben verse. */
    .gear-clockwise,
    .gear-counter-clockwise,
    .about-logo img,
    .about-logo__glow {
      animation: none !important;
    }
  }

/* =====================================================================
   FAQ de portada  (antes: segundo bloque <style> incrustado en index.html)
   ===================================================================== */
  .faq-home {
    background: var(--bg-deep);
    color: var(--ink);
    padding: var(--sp-6) var(--gutter);
    border-top: 1px solid var(--line);
  }
  .faq-home__wrap { max-width: var(--w-read); margin: 0 auto; }
  .faq-home__head { text-align: center; margin-bottom: var(--sp-4); }
  .faq-home__eyebrow {
    font-family: var(--mono);   /* los otros cinco eyebrows de la página son mono */
    font-size: clamp(11px, 0.9vw, 13px);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-warm);
    margin: 0 0 10px;
  }
  .faq-home__title {
    /* Heredaba la fuente de cuerpo con peso 800: se declara explícito en Jost
       en vez de dejar que caiga en un peso que Plex Sans no tiene. */
    /* Los otros cinco <h2> de la portada van en la cara de marca; éste era el
       único en Jost y se leía como el arranque de otro sitio. */
    font-family: var(--display);
    font-weight: 800;
    font-style: oblique;
    font-size: clamp(24px, min(2.8vw, 4.2vh), 38px);
    line-height: 1.10;
    margin: 0 0 12px;
    letter-spacing: 0;
  }
  .faq-home__lede {
    color: var(--ink-dim);
    font-size: clamp(15px, min(1.15vw, 1.9vh), 17px);
    max-width: 60ch;
    margin: 0 auto;
    line-height: 1.55;
  }
  .faq-home__list { display: flex; flex-direction: column; gap: 12px; margin: 0 0 var(--sp-4); }
  .faq-home__item {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 16px 20px;
    transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
  }
  .faq-home__item:hover { border-color: rgba(249, 146, 28, .35); }
  .faq-home__item[open] { background: rgba(249, 146, 28, .06); border-color: rgba(249, 146, 28, .35); }
  .faq-home__item summary {
    cursor: pointer;
    font-weight: 600;
    font-size: clamp(15px, 1.15vw, 17px);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    color: var(--ink);
  }
  .faq-home__item summary::-webkit-details-marker { display: none; }
  .faq-home__item summary::after {
    content: "+";
    font-size: 22px;
    line-height: 1;
    color: var(--accent-warm);
    transition: transform var(--t-base) var(--ease);
    flex-shrink: 0;
  }
  .faq-home__item[open] summary::after { content: "−"; }
  .faq-home__item p {
    margin: 12px 0 0;
    color: var(--ink-dim);
    font-size: clamp(14px, 1.05vw, 16px);
    line-height: 1.6;
  }
  .faq-home__item p a { color: var(--accent-warm); text-decoration: none; border-bottom: 1px solid rgba(249, 146, 28, 0.35); }
  .faq-home__item p a:hover { border-bottom-color: var(--accent-warm); }
  /* Nota de idioma — sólo se usa en /en/index.html */
  .faq-home__lede--note {
    margin: 0 auto var(--sp-3);
    padding-top: 20px;
    border-top: 1px solid var(--line);
    font-size: clamp(13px, 1vw, 15px);
    color: var(--ink-dim);
  }
  .faq-home__lede--note a { color: var(--accent-warm); }

  .faq-home__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
  .faq-home__btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: var(--r-pill);
    background: var(--accent-warm);
    color: var(--bg-deep);
    text-decoration: none;
    font-family: var(--display-alt);   /* doctrina: los botones van en Jost */
    font-weight: 600;
    font-size: clamp(14px, 1.05vw, 16px);
    transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
  }
  .faq-home__btn:hover { transform: translateY(var(--lift)); box-shadow: var(--e-2), 0 0 24px rgba(249, 146, 28, 0.35); }
  .faq-home__btn--ghost {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line-strong);
  }
  .faq-home__btn--ghost:hover { background: rgba(255, 255, 255, 0.06); box-shadow: none; transform: translateY(var(--lift)); }