/* Menú de hamburguesa en móvil (<=760 px) y espacio antes del pie (29-oct-2026).
   Se carga después de header-unico-20261029.css (y de los CSS de la tienda). En escritorio no cambia nada del header. */

/* ---- Espacio entre el contenido y el pie (todas las páginas con <footer> directo en el body) ---- */
html body footer:not(article footer):not(section footer):not(aside footer) { margin-top: 64px; }
@media (max-width: 760px) { html body footer:not(article footer):not(section footer):not(aside footer) { margin-top: 48px; } }
/* Tienda: la barra inferior flotante no debe tapar el pie */
@media (max-width: 800px) { html body.shop-app footer { padding-bottom: 112px; } }

/* ---- Botón de menú: oculto por defecto ---- */
.wx-menu-btn { display: none; }

@media (max-width: 760px) {
  /* Botón cuadrado, 48 px de zona táctil, tres barras que pasan a X */
  html.wx-menu-js .wx-menu-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; padding: 0; margin: 0; background: transparent; color: #16171b; border: 2px solid #16171b; border-radius: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .15s, color .15s; }
  html.wx-menu-js .wx-menu-btn:hover, html.wx-menu-js .wx-menu-btn[aria-expanded="true"] { background: #16171b; color: #f2f0ea; }
  .wx-menu-btn:focus-visible { outline: 3px solid #16171b; outline-offset: 3px; }
  .wx-menu-ico, .wx-menu-ico::before, .wx-menu-ico::after { display: block; width: 22px; height: 2.5px; background: currentColor; content: ""; transition: transform .2s, opacity .15s; }
  .wx-menu-ico { position: relative; }
  .wx-menu-ico::before { position: absolute; left: 0; top: -7px; }
  .wx-menu-ico::after { position: absolute; left: 0; top: 7px; }
  .wx-menu-btn[aria-expanded="true"] .wx-menu-ico { background: transparent; }
  .wx-menu-btn[aria-expanded="true"] .wx-menu-ico::before { transform: translateY(7px) rotate(45deg); }
  .wx-menu-btn[aria-expanded="true"] .wx-menu-ico::after { transform: translateY(-7px) rotate(-45deg); }

  /* «Escríbenos» se reemplaza por el menú (ya existe el botón flotante de WhatsApp) */
  html.wx-menu-js body header.wx-hd .wx-hd-links a.wx-btn,
  html.wx-menu-js body header.header .nav-links a.hd-cta { display: none; }

  /* ---- Header común: el <nav> se convierte en panel desplegable, sin mover el layout ---- */
  html.wx-menu-js body header.wx-hd .wx-hd-links { display: none; }
  html.wx-menu-js body header.wx-hd.is-open .wx-hd-links { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: absolute; left: 0; right: 0; top: 100%; z-index: 60; margin: 0; padding: 4px clamp(16px, 4vw, 56px) 12px; background: var(--hd-bg); border-bottom: 2px solid var(--hd-ink); box-shadow: 0 10px 0 rgba(22,23,27,.08); }
  html.wx-menu-js body header.wx-hd.is-open .wx-hd-links a:not(.wx-btn),
  html.wx-menu-js body header.wx-hd.is-open .wx-hd-links a.wx-hide-sm:not(.wx-btn) { display: flex; align-items: center; justify-content: flex-start; min-height: 52px; padding: 0 2px; font: 700 1.0625rem/1.2 "General", "Helvetica Neue", Arial, sans-serif; border-bottom: 1px solid rgba(22,23,27,.18); text-decoration: none; }
  html.wx-menu-js body header.wx-hd.is-open .wx-hd-links a:last-child { border-bottom: 0; }
  html body header.wx-hd .wx-hd-links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; }

  /* ---- Header de la tienda: carrito + menú; el panel cuelga debajo ---- */
  html body.shop-app header.header { position: sticky; top: 0; z-index: 50; }
  html body.shop-app .nav-links { gap: 10px; }
  html body.shop-app .nav-links .bag .bag-label { display: none; }
  html body.shop-app .wx-menu-panel { display: none; }
  html.wx-menu-js body.shop-app header.header.is-open .wx-menu-panel { display: flex; flex-direction: column; position: absolute; left: 18px; right: 18px; top: calc(100% - 4px); z-index: 60; background: #f2f0ea; border: 2px solid #16171b; box-shadow: 4px 4px 0 #16171b; padding: 4px 16px 8px; }
  html body.shop-app .wx-menu-panel a { display: flex; align-items: center; min-height: 52px; padding: 0 2px; color: #16171b !important; font: 700 1.0625rem/1.2 var(--wx-font-sans, "General", Arial, sans-serif); text-decoration: none; border-bottom: 1px solid rgba(22,23,27,.18); }
  html body.shop-app .wx-menu-panel a:last-child { border-bottom: 0; }
  html body.shop-app .wx-menu-panel a[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; }
}
@media (min-width: 761px) { html body.shop-app .wx-menu-panel { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .wx-menu-ico, .wx-menu-ico::before, .wx-menu-ico::after, .wx-menu-btn { transition: none; } }