/* ── LA CABECERA DEL SITIO, en un solo sitio ───────────────────────────────────
   Escrita a mano y a propósito. Estas mismas reglas viven COPIADAS en `war.css` y
   en `paginas.css`, y una de las dos copias había perdido
   `.menu-open .mobile-menu{opacity:1}`: en todas las páginas de esa hoja la
   hamburguesa se veía, se pulsaba y no pasaba nada. Lo que se duplica se
   desincroniza, y no lo nota nadie hasta que un cliente lo prueba desde su
   teléfono — lo encontró Javiera el 8-sep-2026.

   Esta hoja la cargan SOLO las guías, que llevan su CSS en línea y no tenían ni
   una regla del menú. A las páginas que ya cargan `paginas.css` NO se les añade:
   dos hojas con las mismas reglas no se suman, se estorban —al probarlo, los
   enlaces de escritorio se pintaron en el teléfono y empujaron la hamburguesa a
   x=682 sobre una pantalla de 390, fuera de la vista—.
   ──────────────────────────────────────────────────────────────────────────── */

.nav .wrap{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{flex:none}   /* que ningún vecino lo exprima a 0 */
.brand img{width:140px;height:auto}

.idiomas{display:inline-flex;gap:2px;align-items:center;margin-left:14px}
.idiomas a{font-family:var(--font-display);font-size:12px;font-weight:600;letter-spacing:.06em;
  color:var(--bone-dim);padding:5px 7px;border-radius:6px;transition:color .2s,background .2s}
.idiomas a:hover{color:var(--bone)}
.idiomas a[aria-current]{color:var(--bg);background:var(--copper)}

.nav-links{display:flex;align-items:center;gap:30px;font-size:14.5px;font-weight:500}
.nav-links a{color:var(--bone-dim);transition:color .25s;white-space:nowrap}
.nav-links a:hover{color:var(--bone)}

.burger{display:none;background:rgba(12,32,44,.55);backdrop-filter:blur(6px);border:0;
  border-radius:10px;padding:11px 12px;cursor:pointer;min-height:44px}
.burger span{display:block;width:20px;height:2px;background:var(--bone);margin:4px 0;
  transition:transform .3s var(--ease),opacity .2s}
.mobile-menu{display:none}

@media (max-width:900px){
  /* En el teléfono manda la hamburguesa: los enlaces en fila no caben y, si se
     quedan, empujan el botón fuera de la pantalla. */
  .nav-links{display:none}
  /* 🔴 Y el botón de WhatsApp TAMBIÉN se esconde (lo hace el resto del sitio en
     sus propias hojas; aquí faltaba). Mide 219 px: con él, la cabecera pide 531
     sobre una pantalla de 390. Flexbox no desborda, EXPRIME: aplastaba el
     logotipo a 0 px —su <img> es `max-width:100%` de un padre de ancho 0, así que
     desaparecía sin dar un solo error— y empujaba la hamburguesa a x=433, fuera
     de la pantalla. Quedaba una guía en el teléfono sin marca y sin menú.
     Lo reportó Sebastián el 10-sep-2026. */
  .nav > .wrap > .btn{display:none}
  .burger{display:block}
  .mobile-menu{display:flex;position:fixed;inset:0;z-index:45;background:rgba(12,32,44,.97);
    backdrop-filter:blur(10px);flex-direction:column;align-items:center;justify-content:center;
    gap:28px;font-family:var(--font-display);font-size:23px;font-weight:600;
    opacity:0;pointer-events:none;transition:opacity .35s var(--ease)}
  .mobile-menu a{color:var(--bone)}
  /* 🔴 La regla que ABRE. Es la que faltaba en paginas.css. */
  .menu-open .mobile-menu{opacity:1;pointer-events:auto}
  .menu-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .menu-open .burger span:nth-child(2){opacity:0}
  .menu-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .menu-open{overflow:hidden}
}