/* =====================================================================
   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/.
   ===================================================================== */

  @font-face {
    font-family: "Altitud100K";
    src: url("FuturaExtraBoldOblique.otf") format("opentype");
    font-weight: 800;
    font-style: oblique;
    font-display: swap;
  }

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

    /* ===== Texto ===== */
    --ink:       #FFFFFF;
    --ink-dim:   #A8B0C0;
    --ink-faint: #4A5670;

    /* ===== 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 */

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

    --display: "Altitud100K", system-ui, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;
    --sans: system-ui, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;

    /* ===== 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:    #02183D;  /* color superior del gradiente radial del about (azul marino oficial) */
    --about-bg-bottom: #010A1F;  /* color al que se desvanece */

    /* ===== Blueprint técnico (sección Caminos / Engranajes) ===== */
    --blueprint-bg:         #02183D;
    --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; }

  /* ============ 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;
    font-size: 12em;
    line-height: 0.95;          /* antes 0.75 — la "i" italic se cortaba abajo */
    letter-spacing: -0.01em;
    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.3em;               /* +0.1em para que el "+" no quede pegado a la D */
    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.3em;               /* +0.1em para que el "+" no quede pegado a la D */
    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: 9em; }
  }
  @media (max-width: 767px) {
    .idi__h1 { font-size: 5.5em; }
  }
  @media (max-width: 480px) {
    .idi__h1 { font-size: 4em; }
  }

  /* ============ 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(18px, 1.75vw, 24px);
    letter-spacing: 1px;
    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: 700;
    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: 10px;
    background: rgba(1, 10, 31, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.30);
    transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s 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: 0 2px 8px rgba(0, 0, 0, 0.35);
  }

  .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: 700;
    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: 10px;
    background: #ffffff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.40);
    transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease,
                transform 0.22s ease, box-shadow 0.22s 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 0.22s 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: 700;
    line-height: 1.5;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.65);
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    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) 64px clamp(48px, 7vh, 72px);
    max-width: 1400px;
    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(36px, min(5.5vw, 9vh), 88px);
    line-height: 1.04;
    letter-spacing: 0.01em;
    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: 16px;
    overflow: hidden;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.38);
    cursor: pointer;
    isolation: isolate;
    transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s 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 0.35s ease;
    pointer-events: none;
  }

  .hero-route__title {
    font-family: var(--display);
    font-weight: 800;
    font-style: oblique;
    font-size: 26px;
    letter-spacing: 0.02em;
    line-height: 1.05;
    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;
  }

  .hero-cue {
    position: absolute;
    left: 50%;
    bottom: 32px;
    transform: translateX(-50%);
    z-index: 10;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 10px;
    text-shadow: 0 2px 12px rgba(0,0,0,0.8);
    opacity: 0;
    transition: opacity 1s ease-out 1.2s;
    pointer-events: none;
  }

  .hero.is--ready .hero-cue { opacity: 0.85; }

  .hero-cue__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-hot);
    animation: cueBlink 2s ease-in-out infinite;
  }

  @keyframes cueBlink {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
  }

  /* ============ ABOUT ============ */
  .about {
    padding: clamp(36px, 6vh, 56px) clamp(28px, 4vw, 48px) clamp(28px, 4vh, 44px);
    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: 1400px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    align-items: stretch;
  }

  .about-eyebrow {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-warm);
    position: relative;
    padding-top: 16px;
    align-self: start;
  }

  .about-eyebrow::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 40px; height: 1px;
    background: var(--accent-warm);
  }

  .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(24px, min(3.2vw, 5vh), 44px);
    line-height: 1.02;
    letter-spacing: 0.02em;
  }

  .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--single {
    grid-template-columns: 1fr;
    max-width: 1200px;
    gap: 28px;
  }

  .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: 1400px;
    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);
    font-family: var(--display);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.01em;
    text-decoration: none;
    border-radius: 999px;
    transition: transform .25s ease, box-shadow .25s ease, background .25s 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 .25s ease;
  }

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

  .about-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
  }

  .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 .25s 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: 500;
  }

  .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;
    will-change: background-image;
  }

  .about-fill > span strong {
    font-weight: 700;
    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;
    }
  }

  @media (max-width: 720px) {
    .about {
      min-height: 0;
      padding: 42px 24px 34px;
      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-grid--with-logo {
      grid-template-columns: 1fr;
      gap: 22px;
    }
    .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;
    }
  }

  /* ============ TRUST STRIP — Empresas que confían ============ */
  .trust-strip {
    padding: clamp(36px, 5.5vh, 50px) clamp(24px, 3vw, 40px) clamp(14px, 2.5vh, 22px);
    position: relative;
    z-index: 2;
  }

  .trust-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(20px, 3vh, 28px);
    padding-top: clamp(24px, 4vh, 36px);
  }

  .trust-eyebrow {
    font-family: var(--mono);
    font-size: clamp(18px, 1.7vw, 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: 14px;
    padding: 18px 28px;
    margin: 0;
    min-width: clamp(190px, 18vw, 260px);
    height: clamp(96px, min(11vw, 14vh), 130px);
    box-shadow:
      0 18px 40px rgba(0, 0, 0, 0.35),
      0 1px 0 rgba(255, 255, 255, 0.08) inset;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: transform 0.4s 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:
      0 24px 50px rgba(0, 0, 0, 0.45),
      0 0 0 1px rgba(249, 146, 28, 0.35);
  }

  /* ============ SELLO EMPRESA MUJER ============ */
  .sello-strip {
    padding: clamp(14px, 2.5vh, 24px) clamp(24px, 3vw, 40px) clamp(50px, 8vh, 70px);
    position: relative;
    z-index: 2;
  }

  .sello-inner {
    max-width: 900px;
    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: 4px;
    box-shadow:
      0 30px 60px rgba(0, 0, 0, 0.4),
      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:
      0 14px 36px rgba(0, 0, 0, 0.45),
      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;
    color: var(--accent-hot);
    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(24px, min(2.9vw, 4.4vh), 38px);
    line-height: 1.05;
    letter-spacing: 0.02em;
    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;
    will-change: transform, opacity, top;
  }

  @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: clamp(40px, 6vh, 60px) clamp(28px, 4vw, 48px) clamp(60px, 9vh, 100px);
    position: relative;
    z-index: 2;
  }

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

  .doors-subtitle {
    margin-top: clamp(12px, 2vh, 18px);
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(17px, min(1.95vw, 2.8vh), 28px);
    line-height: 1.45;
    color: var(--ink-dim);
    letter-spacing: 0.01em;
  }

  .doors-subtitle .opt-warm {
    color: var(--accent-warm);
    font-weight: 700;
    font-style: oblique;
  }

  .doors-subtitle .opt-cool {
    color: var(--accent-cool);
    font-weight: 700;
    font-style: oblique;
  }

  .doors-number {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.15em;
    color: var(--accent-warm);
    text-transform: uppercase;
  }

  .doors-question {
    font-family: var(--display);
    font-weight: 800;
    font-style: oblique;
    font-size: clamp(26px, min(4.2vw, 6vh), 52px);
    line-height: 1.05;
    letter-spacing: 0.02em;
  }

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

  .doors-meta {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-dim);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: right;
    line-height: 1.8;
  }

  .instrument-panel {
    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%;
  }

  .registration-mark {
    fill: none;
    stroke: var(--blueprint-border);
    stroke-width: 1.5;
    stroke-linecap: square;
  }

  .rule {
    fill: none;
    stroke: var(--blueprint-rule);
    stroke-width: 0.8;
    opacity: 0.75;
  }

  .rule-primary {
    fill: none;
    stroke: var(--blueprint-border);
    stroke-width: 2;
    opacity: 0.9;
  }

  .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;
  }

  /* Anotaciones tipo plano técnico (satellite blueprint) */
  .dwg-axis {
    stroke: var(--blueprint-border);
    stroke-width: 0.9;
    fill: none;
    opacity: 0.9;
  }
  .dwg-arrow {
    fill: var(--blueprint-border);
    opacity: 0.9;
  }
  .dwg-axis-label {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    fill: var(--blueprint-border);
    text-anchor: middle;
    dominant-baseline: middle;
  }

  .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: 700;
    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-scale-bar line {
    stroke: var(--blueprint-rule);
    stroke-width: 0.8;
    fill: none;
  }
  .dwg-scale-bar text {
    font-family: var(--mono);
    font-size: 7.5px;
    letter-spacing: 0.12em;
    fill: var(--blueprint-ink-muted);
    dominant-baseline: hanging;
  }

  .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: 700;
    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;
  }

  .panel-title {
    font-family: var(--display);
    font-weight: 800;
    font-style: oblique;
    font-size: 13px;
    letter-spacing: 0.5em;
    fill: var(--blueprint-ink);
    text-anchor: middle;
    dominant-baseline: middle;
  }

  .gear-label {
    font-family: var(--display);
    font-weight: 800;
    font-style: oblique;
    font-size: 16px;
    letter-spacing: 0.20em;
    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-spec {
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: 0.18em;
    fill: var(--blueprint-ink-muted);
    text-anchor: middle;
    dominant-baseline: middle;
  }

  .panel-caption {
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: 0.3em;
    fill: var(--blueprint-ink-muted);
    text-anchor: middle;
    dominant-baseline: middle;
  }

  .gear-body {
    fill: var(--blueprint-void);
    stroke-width: 1.2;
    stroke-linejoin: miter;
    fill-rule: evenodd;
    transition: filter 0.4s 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;
    outline: none;
    transition: filter 0.4s ease;
  }

  .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 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
                transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.25s 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(18px, min(1.7vw, 2.6vh), 24px);
    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 {
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(15px, min(1.3vw, 2vh), 18px);
    line-height: 1.45;
    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 0.22s ease,
                transform 0.22s ease,
                padding-left 0.3s ease,
                color 0.3s ease,
                border-color 0.3s 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 {
    padding-left: 8px;
    border-bottom-color: rgba(255, 255, 255, 0.22);
  }
  .gear-tooltip--warm .gear-tooltip__list li:hover { color: var(--accent-warm); }
  .gear-tooltip--cool .gear-tooltip__list li:hover { color: var(--accent-cool); }

  .gear-tooltip__list li strong {
    font-family: var(--display);
    font-weight: 800;
    font-style: oblique;
    letter-spacing: 0.015em;
    color: var(--ink);
    transition: color 0.3s 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(18px, min(1.6vw, 2.5vh), 22px);
    letter-spacing: 0.02em;
    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;
    }
  }

  /* ============ FOOTER (estilo rutas rendimiento/conocimiento) ============ */
  .foot {
    max-width: 1400px;
    margin: 60px auto 0;
    padding: 24px 40px;
    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 { padding: 36px 32px 28px; }
    .about-grid--with-logo { gap: 32px; }

    .trust-strip { padding: 40px 32px 18px; }
    .trust-inner { gap: 22px; padding-top: 28px; }

    .sello-strip { padding: 18px 32px 56px; }
    .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; }

    .stage-doors { padding: 48px 32px 72px; }
    .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: 19px; 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(16px, 2.1vw, 19px); }
    .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 {
      padding: clamp(80px, 14vh, 110px) 24px clamp(40px, 6vh, 60px);
      align-items: stretch;
    }
    .hero-routes { flex-direction: column; width: 100%; }
    .hero-route { min-width: 0; width: 100%; }
    .about { padding: 46px 24px 36px; }
    .about-inner { grid-template-columns: 1fr; gap: 24px; }
    .about-grid { grid-template-columns: 1fr; gap: 24px; }
    .trust-strip { padding: 60px 24px 30px; }
    .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-strip { padding: 30px 24px 80px; }
    .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; }
    .stage-doors { padding: 40px 24px 80px; }
    .doors-intro { grid-template-columns: 1fr; gap: 24px; }
    .doors-meta { text-align: left; }
    .instrument-panel { aspect-ratio: 700 / 520; }
    .gear-tooltip {
      position: static;
      width: 100%;
      opacity: 1;
      transform: none;
      pointer-events: auto;
      margin-top: 16px;
      padding: 24px 26px;
      background:
        linear-gradient(180deg, rgba(2, 24, 61, 0.45), transparent 60%),
        rgba(1, 10, 31, 0.85);
    }
    .gear-tooltip--warm, .gear-tooltip--cool { left: auto; right: auto; }
    .gear-tooltip__list li { opacity: 1; transform: none; font-size: 14px; }
    .gear-tooltip__cta { font-size: 17px; }
    /* Footer apilado: deja libre la zona del botón flotante abajo */
    .foot { padding: 24px 24px 100px; }
    .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: 15px; }
    .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(28px, 8vw, 38px);
      line-height: 1.08;
      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(26px, 7.5vw, 36px); line-height: 1.08; }
    .doors-subtitle { font-size: clamp(15px, 4vw, 18px); margin-top: 10px; }

    .doors-tap-hint {
      display: block;
      max-width: 1400px;
      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 */
    .instrument-panel .dwg-title-block,
    .instrument-panel .dwg-cta:not(.dwg-cta--callout),
    .instrument-panel .dwg-meta,
    .instrument-panel .dwg-dimension {
      display: none;
    }

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

    /* Tooltips → tarjetas-camino estilo hero-route */
    .gear-tooltip {
      position: static;
      width: 100%;
      opacity: 1;
      transform: none;
      pointer-events: auto;
      margin: 14px 14px 0;
      width: calc(100% - 28px);
      padding: 22px 24px 20px;
      border-radius: 10px;
      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:
        0 18px 42px rgba(0, 0, 0, 0.42),
        0 1px 0 rgba(255, 255, 255, 0.08) inset;
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s 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; }

    /* Active state — feedback táctil al tap */
    .gear-tooltip:active {
      transform: translateY(2px) scale(0.995);
    }
    .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(17px, 4.6vw, 22px);
      letter-spacing: 0.03em;
      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: 18px;
      letter-spacing: 0.02em;
      padding-top: 16px;
      gap: 12px;
    }
  }

  /* ============ BOTÓN FLOTANTE DE CONTACTO ============ */
  .floating-contact {
    position: fixed;
    right: 22px;
    bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    z-index: 150;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
  }

  .floating-contact-button {
    width: 60px;
    height: 60px;
    border: 0;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    position: relative;
    box-shadow:
      0 10px 26px rgba(0, 0, 0, 0.45),
      0 0 18px rgba(37, 211, 102, 0.35);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }

  .floating-contact-button:hover,
  .floating-contact-button:focus-visible {
    transform: translateY(-2px);
    box-shadow:
      0 14px 32px rgba(0, 0, 0, 0.5),
      0 0 26px rgba(37, 211, 102, 0.55);
  }

  .floating-contact-button:active {
    transform: translateY(0) scale(0.96);
  }

  .floating-contact-button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
  }

  /* Anillo de pulso sutil que invita al clic */
  .floating-contact-button::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(37, 211, 102, 0.55);
    animation: fab-pulse 2.6s ease-out infinite;
    pointer-events: none;
  }

  .floating-contact.is-open .floating-contact-button::after {
    animation: none;
    opacity: 0;
  }

  @keyframes fab-pulse {
    0%   { transform: scale(1); opacity: 0.7; }
    70%  { transform: scale(1.45); opacity: 0; }
    100% { transform: scale(1.45); opacity: 0; }
  }

  /* Crossfade burbuja de chat ↔ X */
  .floating-contact-button__icon {
    grid-area: 1 / 1;
    transition: opacity 0.25s ease, transform 0.25s ease;
  }

  .floating-contact-button__icon--close {
    opacity: 0;
    transform: rotate(-90deg) scale(0.6);
  }

  .floating-contact.is-open .floating-contact-button__icon--chat {
    opacity: 0;
    transform: rotate(90deg) scale(0.6);
  }

  .floating-contact.is-open .floating-contact-button__icon--close {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }

  /* Menú desplegable */
  .floating-contact-menu {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
  }

  .floating-contact-option {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px 9px 10px;
    border-radius: 999px;
    background: rgba(2, 24, 61, 0.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--line-strong);
    color: var(--ink);
    text-decoration: none;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.96);
    transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.28s, border-color 0.25s ease;
  }

  .floating-contact.is-open .floating-contact-option {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s, border-color 0.25s ease;
  }

  /* Stagger: la opción más cercana al botón aparece primero */
  .floating-contact.is-open .floating-contact-option:nth-child(3) { transition-delay: 0s; }
  .floating-contact.is-open .floating-contact-option:nth-child(2) { transition-delay: 0.06s; }
  .floating-contact.is-open .floating-contact-option:nth-child(1) { transition-delay: 0.12s; }

  .floating-contact.is-open .floating-contact-option:hover {
    transform: translateY(-2px);
    transition-delay: 0s;
  }

  .floating-contact-option:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
  }

  .floating-contact-option__icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex: 0 0 auto;
  }

  .floating-contact-option--wsp .floating-contact-option__icon { background: rgba(37, 211, 102, 0.16); color: #25D366; }
  .floating-contact-option--cal .floating-contact-option__icon { background: rgba(249, 146, 28, 0.16); color: var(--accent-warm); }
  .floating-contact-option--mail .floating-contact-option__icon { background: rgba(145, 55, 147, 0.22); color: #C77BC9; }

  .floating-contact.is-open .floating-contact-option--wsp:hover { border-color: #25D366; }
  .floating-contact.is-open .floating-contact-option--cal:hover { border-color: var(--accent-warm); }
  .floating-contact.is-open .floating-contact-option--mail:hover { border-color: var(--accent-cool); }

  @media (max-width: 600px) {
    .floating-contact {
      right: 16px;
      bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }
    .floating-contact-button { width: 56px; height: 56px; }
    .floating-contact-option { font-size: 11px; padding: 8px 14px 8px 9px; }
  }

  @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;
    }
    .idi-loader {
      animation: none !important;
      background: #02183D !important;
    }
    .hero-header, .hero-content, .hero-cue {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
    }
    .hero-cue__dot { animation: none !important; }
    .hero-nav__link,
    .hero-lang__opt,
    .hero-route,
    .hero-route::before {
      transition: none !important;
    }
    .floating-contact-button,
    .floating-contact-button__icon,
    .floating-contact-option {
      transition: none !important;
    }
    .floating-contact-button::after {
      animation: none !important;
      opacity: 0 !important;
    }
    .about-webgl { display: none !important; }
  }

/* =====================================================================
   FAQ de portada  (antes: segundo bloque <style> incrustado en index.html)
   ===================================================================== */
  .faq-home {
    background: #050b1f;
    color: #e8eef9;
    padding: clamp(3rem, 7vw, 5rem) 1.25rem;
    border-top: 1px solid rgba(255,255,255,.06);
  }
  .faq-home__wrap { max-width: 860px; margin: 0 auto; }
  .faq-home__head { text-align: center; margin-bottom: 2rem; }
  .faq-home__eyebrow {
    font-size: .8rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #f9921c;
    margin: 0 0 .35rem;
  }
  .faq-home__title {
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    margin: 0 0 .5rem;
    font-weight: 800;
    letter-spacing: -.01em;
  }
  .faq-home__lede {
    color: #c1cce0;
    font-size: 1rem;
    max-width: 60ch;
    margin: 0 auto;
    line-height: 1.55;
  }
  .faq-home__list { display: flex; flex-direction: column; gap: .75rem; margin: 0 0 2rem; }
  .faq-home__item {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    transition: border-color .2s ease, background .2s 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: 1.02rem;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    color: #fff;
  }
  .faq-home__item summary::-webkit-details-marker { display: none; }
  .faq-home__item summary::after {
    content: "+";
    font-size: 1.4rem;
    line-height: 1;
    color: #f9921c;
    transition: transform .2s ease;
    flex-shrink: 0;
  }
  .faq-home__item[open] summary::after { content: "−"; }
  .faq-home__item p {
    margin: .75rem 0 0;
    color: #c1cce0;
    font-size: .95rem;
    line-height: 1.6;
  }
  .faq-home__item p a { color: #f9921c; text-decoration: none; border-bottom: 1px solid rgba(249, 146, 28, .35); }
  .faq-home__item p a:hover { border-bottom-color: #f9921c; }
  /* Nota de idioma — sólo se usa en /en/index.html */
  .faq-home__lede--note {
    margin: 0 auto 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255,255,255,.08);
    font-size: .92rem;
    color: #a9b6cd;
  }
  .faq-home__lede--note a { color: #f9921c; }

  .faq-home__cta { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
  .faq-home__btn {
    display: inline-block;
    padding: .75rem 1.5rem;
    border-radius: 999px;
    background: #f9921c;
    color: #0b0d12;
    text-decoration: none;
    font-weight: 700;
    font-size: .95rem;
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .faq-home__btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(249, 146, 28, .35); }
  .faq-home__btn--ghost {
    background: transparent;
    color: #e8eef9;
    border: 1px solid rgba(255,255,255,.22);
  }
  .faq-home__btn--ghost:hover { background: rgba(255,255,255,.06); box-shadow: none; transform: translateY(-1px); }