/* ============================================================
   Menú desplegado — sin caja: solo texto y líneas.
   Se carga DESPUÉS de home-sequence.css / site.css.
   ============================================================ */
@media (max-width: 767px) {

  /* Sin color de caja ni sombra. El desenfoque es lo único que
     garantiza legibilidad sobre las etapas fotográficas del Home. */
  /* El header de las páginas de contenido tiene su propio
     backdrop-filter. Anidar dos backdrop-filter anula el del hijo, así
     que el del header se apaga mientras el menú está desplegado. */
  .site-header.is-nav-open {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(255, 255, 255, .97);
  }

  .topbar__nav.is-open,
  .site-nav.is-open {
    background: rgba(255, 255, 255, .34);
    -webkit-backdrop-filter: blur(26px) saturate(150%);
    backdrop-filter: blur(26px) saturate(150%);
    box-shadow: none;
    border: 0;
    padding: 6px 20px 22px;
  }
  /* Sobre fondo oscuro el velo se invierte. La clase la pone nav.js
     tras medir qué elemento queda debajo del menú desplegado. */
  .topbar__nav.is-on-dark,
  .site-nav.is-on-dark { background: rgba(16, 15, 14, .34); }

  /* Alto contraste según el fondo. Sustituye la regla que forzaba
     el menú a tinta oscura sobre etapas oscuras. */
  .topbar__nav.is-open a, .site-nav.is-open a { color: var(--ink); }
  .topbar__nav.is-on-dark a, .site-nav.is-on-dark a { color: #fff; }

  /* Solo texto y líneas: se quita el borde de caja y se dibuja
     una hairline propia que entra de izquierda a derecha. */
  .topbar__nav.is-open a,
  .site-nav.is-open a {
    position: relative;
    border-bottom: 0;
    opacity: 0;
    transform: translateY(-14px);
    animation: navEntra .38s cubic-bezier(.22, 1, .36, 1) forwards;
  }
  .topbar__nav.is-open a::after,
  .site-nav.is-open a::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: currentColor; opacity: .16;
    transform: scaleX(0); transform-origin: left;
    animation: navLinea .5s cubic-bezier(.22, 1, .36, 1) forwards;
  }
  .topbar__nav.is-open a:last-child::after,
  .site-nav.is-open a:last-child::after { display: none; }

  /* Escalonado: --nd lo asigna nav.js (45ms por ítem), así funciona
     con cualquier cantidad de enlaces. La línea entra 60ms tras el texto. */
  .topbar__nav.is-open a,
  .site-nav.is-open a { animation-delay: var(--nd, 0ms); }
  .topbar__nav.is-open a::after,
  .site-nav.is-open a::after { animation-delay: calc(var(--nd, 0ms) + 60ms); }

  /* El CTA deja de ser botón sólido dentro del menú: solo texto. */
  .topbar__nav.is-open .topbar__cta,
  .site-nav.is-open .btn {
    background: none; border: 0; padding: 13px 0;
    color: var(--orange-text) !important; font-weight: 700;
  }
  .topbar__nav.is-on-dark .topbar__cta,
  .site-nav.is-on-dark .btn { color: #f0a36a !important; }

  /* Salida: rápida y sin escalonar. Cerrar debe sentirse inmediato. */
  .topbar__nav.is-closing, .site-nav.is-closing {
    display: flex; opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
  }
}

@keyframes navEntra { to { opacity: 1; transform: none; } }
@keyframes navLinea { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .topbar__nav.is-open a, .site-nav.is-open a {
    animation: none; opacity: 1; transform: none;
  }
  .topbar__nav.is-open a::after, .site-nav.is-open a::after {
    animation: none; transform: scaleX(1);
  }
}