/* Menú del sitio en las páginas internas (about, contact, developers, privacy, reparto, sabores,
   preguntas). Un botón de tres rayas en la cabecera que abre la lista de secciones.

   Es un <details> nativo: abre y cierra sin JavaScript, y los enlaces están en el HTML servido,
   que es lo que leen Google y los agentes (un menú armado con JS no existiría para ellos).
   menu.js solo suma lo que <details> no hace: cerrar con Escape, al tocar afuera, al scrollear y al volver
   con "atrás".

   Va en su propio archivo, con ?v=, y no en paginas.css: vercel.json cachea todo .css un año con
   immutable, y paginas.css se pide sin versión, así que un cambio ahí no le llegaría a quien ya
   estuvo. Va después de paginas.css en cada página: así gana a las reglas de la cabecera. */

.menu { position: relative; }
/* Un velo invisible sobre toda la pantalla mientras el menú está abierto: tocar en cualquier lado lo cierra
   (menu.js lo escucha en pointerdown, que iOS sí manda aunque no haya nada tocable debajo). Queda detrás de
   los hijos del <details> (z-index negativo dentro del contexto de la barra) y no se ve. */
.menu[open]::before { content: ""; position: fixed; inset: 0; z-index: -1; }
.menu > summary { list-style: none; width: 44px; height: 44px; border-radius: 999px; background: rgba(255,255,255,.12);
  display: grid; place-items: center; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover { background: rgba(255,255,255,.25); }
.menu > summary:focus-visible { outline: 2px solid #EDDCC6; outline-offset: 3px; }

/* Las tres rayas: una barra y sus dos pseudo-elementos. Abierto, se cruzan en una X. */
.menu-barras, .menu-barras::before, .menu-barras::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: #EDDCC6;
  transition: transform .25s ease, top .25s ease, background-color .2s ease; }
.menu-barras { position: relative; }
.menu-barras::before, .menu-barras::after { content: ""; position: absolute; left: 0; }
.menu-barras::before { top: -6px; }
.menu-barras::after { top: 6px; }
.menu[open] .menu-barras { background-color: transparent; }
.menu[open] .menu-barras::before { top: 0; transform: rotate(45deg); }
.menu[open] .menu-barras::after { top: 0; transform: rotate(-45deg); }

.menu-panel { position: absolute; right: 0; top: calc(100% + 10px); z-index: 30; width: min(300px, calc(100vw - 32px));
  display: grid; gap: 2px; padding: 10px; border-radius: 22px; background: #F5EAD8; box-shadow: 0 18px 40px rgba(0, 42, 68, .3); }
.menu-panel a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 14px;
  color: #00426B; font-size: 15px; font-weight: 700; text-decoration: none; }
.menu-panel a:hover { background: #EDDCC6; }
.menu-panel a:focus-visible { outline: 2px solid #BF4646; outline-offset: -2px; }
.menu-panel a[aria-current="page"] { background: #DDEBF3; }
.menu-panel a.menu-pedir { margin-bottom: 6px; justify-content: center; background: #BF4646; color: #fff; }
.menu-panel a.menu-pedir:hover { background: #A63B3B; }
.menu-panel a.menu-aparte { margin-top: 4px; min-height: 40px; border-top: 1px solid #DDCBAF; border-radius: 0 0 14px 14px; color: #645C50; font-size: 13px; font-weight: 600; }

@media (prefers-reduced-motion: no-preference) {
  .menu[open] .menu-panel { animation: menu-entra .22s ease-out both; }
  @keyframes menu-entra { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
}