/* nav-fix.css — Corrige el desborde del CTA "Agendar cita" en el header en
   TODAS las plantillas (home, agendar, glosario, catálogo, sesión, etc.).
   El nav de escritorio aparecía desde 768px (md) pero solo cabe a ~1440px;
   entre medias el botón se salía (tapado por overflow-x) o se partía en 2 líneas.
   CSS propio con URL nueva = sin caché immutable que invalidar, sin recompilar
   Tailwind. Solo se enlaza en páginas con menú móvil funcional (#menu-movil),
   para no dejar sin navegación a las que no tienen drawer.
   Ver memoria: sitio_web_assets_cache_bust_version. */

/* El botón "Agendar cita" nunca se parte en dos líneas. */
#navbar nav a.btn-rojo,
#navbar nav a[href="/agendar/"] { white-space: nowrap; }

/* Tablet y laptop angosto (768–1279px): el nav completo no cabe.
   Ocultarlo y mostrar el menú móvil (drawer), que está bien construido.
   OJO: el drawer y su backdrop llevan `md:hidden` de Tailwind (display:none
   desde 768px), así que aquí hay que re-habilitarlos cuando main.js les quita
   la clase .hidden — si no, la hamburguesa abre "nada" y congela el scroll. */
@media (min-width: 768px) and (max-width: 1279.98px) {
  #navbar nav      { display: none !important; }
  #navbar #btn-menu { display: inline-flex !important; }
  #menu-movil:not(.hidden)    { display: block !important; }
  #menu-backdrop:not(.hidden) { display: block !important; }
}

/* Laptop (1280–1439px): mostrar el nav completo pero compactarlo para que
   el botón entre — gaps menores, ocultar "Artículos" y afinar la marca. */
@media (min-width: 1280px) and (max-width: 1439.98px) {
  #navbar nav           { gap: 0.5rem !important; }
  #navbar .nav-articulos { display: none !important; }
  #navbar .wordmark-dual { font-size: 1.5rem !important; }
}

/* ── Nav simple de la tienda (tienda/index + 36 fichas) ───────────────────
   Esas 37 páginas no usan #navbar ni tienen drawer (#menu-movil): llevan un
   nav propio con estilos en línea. El div de enlaces no envuelve, así que a
   375px la fila medía 406px y "Agendar cita" caía de 308px a 428px — fuera
   de pantalla, sin contenedor scrollable y tapado por `body{overflow-x:clip}`.
   En móvil no había forma de navegar ni de agendar desde toda la tienda.
   Arreglo: dejar que la fila envuelva a una segunda línea centrada. Los 5
   destinos quedan alcanzables sin inyectar un drawer nuevo en 37 archivos.
   Medido a 375×812 el 2026-07-24. */
@media (max-width: 767.98px) {
  .nav-tienda       { padding: 0.55rem 0.75rem !important; }
  .nav-tienda-fila  { justify-content: center !important; gap: 0.15rem !important; }
  .nav-tienda-marca { font-size: 1rem !important; }
  .nav-tienda-links { flex-wrap: wrap !important; justify-content: center; width: 100%;
                      gap: 0.1rem 0.9rem !important; font-size: 0.85rem !important; }
  /* Área táctil de 36px (antes 20px) y letra de 14.9px — por encima del piso
     de 14px que pide la audiencia del sitio. El escritorio no se toca. */
  .nav-tienda-links > a                   { padding: 0.55rem 0.2rem; line-height: 1.15; }
  .nav-tienda-links > a[href="/agendar/"] { padding: 0.55rem 0.9rem !important; }
}