/* W9 · el menú de la cabecera en el móvil. Compartido por todas las páginas con la
   cabecera de la home (`/empezar` lleva la suya, mínima, a propósito).

   Solo se activa con la clase `nav-movil` en <html>, que la pone `nav-movil.js`: sin JS
   no hay botón que no haga nada, y la cabecera se queda como estaba. Por debajo de 900 px
   la barra deja el logo, el idioma y el botón "Menú"; todo lo demás (los enlaces,
   "Pruébalo en WhatsApp" y "Entrar") vive en el panel. Animación solo con opacity/transform. */
.nav-toggle{display:none}
.nav-panel{display:none}
@media (max-width: 900px){
  .nav-movil .nav > .nav-links,
  .nav-movil .nav > .btn{display:none}
  /* WEB-IDIOMA-1 · el idioma se queda en la barra, a la izquierda de "Menú". */
  .nav-movil .nav > .lang-btn{display:inline-flex; align-items:center}
  .nav-movil .nav-toggle{display:inline-flex; align-items:center; gap:8px;
    border:1.5px solid var(--grafito, #2A2622); background:transparent;
    color:var(--grafito, #2A2622); border-radius:999px; padding:8px 16px;
    font:inherit; font-size:.9rem; font-weight:600; cursor:pointer}
  .nav-movil .nav-toggle:focus-visible{outline:2px solid var(--petroleo, #1F4A52);
    outline-offset:2px}
  .nav-toggle .cerrar{display:none}
  .nav-toggle[aria-expanded="true"] .abrir{display:none}
  .nav-toggle[aria-expanded="true"] .cerrar{display:inline}
  .nav-movil .nav-panel{display:flex; flex-direction:column; gap:4px;
    position:absolute; left:0; right:0; top:100%;
    padding:12px 20px 22px; background:var(--hueso, #F2EDE6);
    border-bottom:1px solid var(--linea, rgba(42,38,34,.14));
    box-shadow:0 18px 30px -24px rgba(42,38,34,.45);
    opacity:1; transform:none; transition:opacity .18s ease, transform .18s ease}
  .nav-movil .nav-panel[hidden]{display:flex; opacity:0; transform:translateY(-8px);
    pointer-events:none; visibility:hidden}
  .nav-panel > a:not(.btn), .nav-panel > .off{padding:12px 2px; font-weight:600;
    text-decoration:none; color:var(--grafito, #2A2622);
    border-bottom:1px solid var(--linea, rgba(42,38,34,.14))}
  .nav-panel > .off{font-weight:500; color:var(--tinta2, rgba(42,38,34,.64));
    font-size:.88rem}
  .nav-panel > .btn{text-align:center; margin-top:8px}
}
@media (prefers-reduced-motion: reduce){
  .nav-panel{transition:none!important}
}