/* ============================================================
   BENNONI — MENÚ DIGITAL
   ------------------------------------------------------------
   Hoja propia de menu.html. Se carga aparte de styles.css para que
   la portada no pague el coste de unos estilos que no usa.

   Hereda toda la identidad —tokens de color, tipografías, radios y
   sombras— de styles.css. Aquí solo vive lo específico del menú.

   Dos rejillas con criterios distintos y deliberados:
     · Secciones (la portada del menú) → mosaico tipo Pinterest, de
       alturas desiguales. Invita a pasear y a descubrir.
     · Productos → rejilla regular, de columnas iguales. Cuando ya se
       está comparando platillos y precios, lo que se quiere es leer en
       vertical sin que el ojo salte; el mosaico ahí estorbaría.
============================================================ */

/* ── La página ──────────────────────────────────────────── */
.menu-page {
  /* Alto de la cabecera fija: lo usan los saltos de ancla para no
     dejar los títulos escondidos debajo. */
  --mheader-h: 8.5rem;
  background: var(--bg);
}

.mmain {
  padding-top: 2rem;
  padding-bottom: var(--s-6);
}

@media (min-width: 720px) {
  .menu-page { --mheader-h: 6.5rem; }
}

/* ── Cabecera fija ──────────────────────────────────────── */
.mheader {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(247, 249, 246, 0.97);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--sh-sm);
}

.mheader__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding-block: 0.7rem;
}

.mheader__brand { height: clamp(26px, 6vw, 34px); }

.mheader__tel { margin-left: auto; }
.mheader__tel-txt { display: none; }

/* ── Buscador ───────────────────────────────────────────── */
/* Sin JavaScript no hay nada que filtre: se retira en lugar de dejar
   un campo que no responde. */
.no-js .mbuscador { display: none; }

.mbuscador {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 100%;
  order: 3;                     /* en móvil baja a su propia línea */
}

.mbuscador__lupa {
  position: absolute;
  left: 0.9rem;
  display: grid;
  place-items: center;
  color: var(--c-crimson);
  pointer-events: none;
}

.mbuscador__campo {
  width: 100%;
  min-height: 48px;             /* objetivo táctil cómodo */
  padding: 0.7rem 2.6rem;
  font-family: var(--f-body);
  font-size: var(--t-base);
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--field-border);
  border-radius: var(--r-pill);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--d-fast), box-shadow var(--d-fast);
}
.mbuscador__campo::placeholder { color: var(--placeholder); }
.mbuscador__campo:focus {
  border-color: var(--c-crimson);
  box-shadow: 0 0 0 4px rgba(178, 42, 68, 0.1);
}
/* La ✕ nativa de Chrome duplicaría nuestro propio botón de limpiar. */
.mbuscador__campo::-webkit-search-cancel-button { -webkit-appearance: none; }

.mbuscador__limpiar {
  position: absolute;
  right: 0.35rem;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  font-size: 1rem;
  color: var(--text-soft);
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: color var(--d-fast), background var(--d-fast);
}
.mbuscador__limpiar:hover { color: var(--c-crimson); background: var(--c-cream); }
.mbuscador__limpiar[hidden] { display: none; }

@media (min-width: 720px) {
  .mbuscador { flex: 1 1 280px; order: 0; max-width: 460px; }
  .mheader__tel-txt { display: inline; }
}

/* ── Fila de secciones ──────────────────────────────────── */
.mchips {
  border-top: 1px solid var(--line);
  background: rgba(229, 225, 214, 0.5);
}

/* El marco sostiene la fila y las dos flechas, que van encima de los
   bordes en lugar de robarle sitio a los chips: en un teléfono de
   320 px, dos botones en el flujo se comerían un cuarto de la fila. */
.mchips__marco { position: relative; }

/* Velos de continuidad. Solo se encienden del lado donde queda algo por
   recorrer, así que son información, no adorno. `pointer-events: none`
   para que no intercepten el gesto de arrastre. */
.mchips__marco::before,
.mchips__marco::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(36px, 10vw, 64px);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity var(--d-base) var(--ease-soft);
}
.mchips__marco::before {
  left: 0;
  background: linear-gradient(90deg, #EFEDE5 25%, rgba(239, 237, 229, 0));
}
.mchips__marco::after {
  right: 0;
  background: linear-gradient(270deg, #EFEDE5 25%, rgba(239, 237, 229, 0));
}
.mchips__marco.tiene-izquierda::before,
.mchips__marco.tiene-derecha::after { opacity: 1; }

.mchips__lista {
  display: flex;
  gap: 0.4rem;
  list-style: none;
  padding-block: 0.6rem;
  /* Se desplaza en horizontal en vez de apilarse: la cabecera no puede
     crecer hasta comerse la pantalla en un teléfono. */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-behavior: smooth;
  /* Un chip nunca queda cortado a la mitad al soltar el gesto. */
  scroll-snap-type: x proximity;
}
.mchips__lista::-webkit-scrollbar { display: none; }
.mchips__lista > li { scroll-snap-align: start; }

/* Las flechas: pensadas sobre todo para ratón y teclado, pero visibles
   en cualquier pantalla porque también avisan de que hay más. */
.mchips__flecha {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 3;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--c-crimson);
  background: var(--surface);
  border: 1px solid var(--line-gold);
  border-radius: 50%;
  box-shadow: var(--sh-sm);
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--d-fast), color var(--d-fast), transform var(--d-fast);
}
.mchips__flecha:hover { background: var(--c-crimson); color: #fff; transform: scale(1.08); }
.mchips__flecha[hidden] { display: none; }

.mchips__flecha--prev { left: 0.15rem; }
.mchips__flecha--next { right: 0.15rem; }

@media (min-width: 720px) {
  .mchips__flecha { width: 38px; height: 38px; }
  .mchips__flecha--prev { left: 0.3rem; }
  .mchips__flecha--next { right: 0.3rem; }
}

/* Sin JavaScript nadie las maneja: la fila se arrastra con el dedo o
   con la barra del navegador, y las flechas sobran. */
.no-js .mchips__flecha,
.no-js .mchips__marco::before,
.no-js .mchips__marco::after { display: none; }

/* Con movimiento reducido, el salto es inmediato en vez de deslizarse. */
@media (prefers-reduced-motion: reduce) {
  .mchips__lista { scroll-behavior: auto; }
}

.mchip {
  display: inline-block;
  white-space: nowrap;
  padding: 0.5rem 1rem;
  font-family: var(--f-ui);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-soft);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  transition: color var(--d-fast), background var(--d-fast), border-color var(--d-fast);
}
.mchip:hover { color: var(--c-crimson); border-color: var(--line-gold); }

/* La sección activa no se distingue solo por el color: también cambia
   el peso de la letra y el borde (WCAG 1.4.1). */
.mchip.is-activa {
  color: #fff;
  font-weight: 600;
  background: var(--c-crimson);
  border-color: var(--c-crimson);
}

/* ── Encabezado del menú ────────────────────────────────── */
.mintro { margin-bottom: 2.5rem; text-align: center; }

.mintro__titulo {
  font-family: var(--f-display);
  font-size: var(--t-3xl);
  font-weight: 200;
  line-height: 1.08;
  letter-spacing: -0.015em;
}
.mintro__titulo em { font-style: normal; font-weight: 600; color: var(--c-crimson); }
.mintro__titulo:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 6px; }

.mintro__sub {
  margin-top: 0.9rem;
  max-width: 52ch;
  margin-inline: auto;
  color: var(--text-soft);
}

/* Aviso mientras el menú lleva datos de muestra. Deliberadamente feo:
   tiene que estorbar hasta que se cargue el menú real. */
.mvista-previa {
  margin-bottom: 2rem;
  padding: 0.9rem 1.2rem;
  font-size: var(--t-sm);
  color: var(--c-espresso);
  background: rgba(186, 142, 48, 0.22);
  border: 1.5px dashed var(--c-gold-text);
  border-radius: var(--r-md);
}
.mvista-previa code { font-family: var(--f-ui); font-weight: 600; }

/* ── Portada del menú: mosaico de secciones ─────────────── */
/* Multi-columna en lugar de rejilla: las tarjetas conservan su altura
   natural y se encajan unas bajo otras, que es el efecto Pinterest.
   Con `grid` habría que fijar alturas y volverían los huecos. */
.mcard-grid {
  column-count: 2;
  column-gap: 0.9rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 660px)  { .mcard-grid { column-count: 3; column-gap: 1.1rem; } }
@media (min-width: 1000px) { .mcard-grid { column-count: 4; } }

.mcard {
  /* Impide que una tarjeta se parta entre dos columnas. */
  break-inside: avoid;
  margin-bottom: 0.9rem;
}
@media (min-width: 660px) { .mcard { margin-bottom: 1.1rem; } }

.mcard__link {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  background: var(--surface);
  transition: transform var(--d-base) var(--ease), box-shadow var(--d-base);
}
.mcard__link:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); }

.mcard__media { display: block; }
.mcard__media img {
  width: 100%;
  height: auto;
  transition: transform 0.85s var(--ease);
}
.mcard__link:hover .mcard__media img { transform: scale(1.06); }

/* Tarjeta sin fotografía: no es un hueco, es una pieza de marca. El
   monograma sobre fondo crema y el filete dorado bastan para que el
   mosaico se lea intencional aunque falten fotos. */
.mcard--sin-foto .mcard__link {
  background:
    linear-gradient(160deg, var(--c-cream) 0%, #EFEBE1 100%);
  border: 1px solid var(--line-gold);
}
.mcard--sin-foto .mcard__media {
  display: grid;
  place-items: center;
  min-height: clamp(96px, 26vw, 150px);
}
.mcard__sello {
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  color: var(--c-gold);
  opacity: 0.85;
}

.mcard__cuerpo {
  display: block;
  padding: 0.9rem 1rem 1.05rem;
}
.mcard--sin-foto .mcard__cuerpo { padding-top: 0; text-align: center; }

.mcard__nombre {
  display: block;
  font-family: var(--f-display);
  font-size: var(--t-lg);
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
}
.mcard__cuenta {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--f-ui);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-gold-text);
}

/* ── Secciones y productos ──────────────────────────────── */
.mseccion { scroll-margin-top: var(--mheader-h); }

/* Sin JavaScript se ven todas las secciones, una tras otra, como una
   carta impresa: el atributo `hidden` del HTML se ignora aquí. */
.no-js .mseccion { display: block; }
.no-js .mseccion + .mseccion { margin-top: var(--s-5); }

.mseccion__header {
  margin-bottom: 1.8rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line-gold);
}

.mseccion__titulo {
  font-family: var(--f-display);
  font-size: var(--t-2xl);
  font-weight: 200;
  line-height: 1.1;
  color: var(--c-crimson);
}
.mseccion__titulo:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 6px; }

.mseccion__desc { margin-top: 0.4rem; color: var(--text-soft); }

/* Las advertencias de la carta: tiempos de preparación, qué incluye el
   café, el costo de los ingredientes extra. Van bajo el título de la
   sección porque condicionan el pedido tanto como el precio. */
.mseccion__notas {
  margin-top: 0.7rem;
  padding-left: 1.1rem;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.mseccion__notas li {
  position: relative;
  font-size: var(--t-sm);
  color: var(--text-soft);
}
.mseccion__notas li::before {
  content: '◈';
  position: absolute;
  left: -1.1rem;
  color: var(--c-gold);
  font-size: 0.7em;
  top: 0.2em;
}

/* «c/u», «la pieza»: matiza el importe sin competir con él. */
.prod__precio-nota {
  font-family: var(--f-body);
  font-size: var(--t-xs);
  font-weight: 400;
  color: var(--text-soft);
}

.prod-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 600px)  { .prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .prod-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.prod {
  /* El navegador se ahorra dibujar lo que está fuera de la pantalla.
     Con ciento setenta tarjetas, esto es la diferencia entre abrir al
     instante y esperar. La altura estimada evita que la barra de
     desplazamiento pegue saltos mientras se recorre. */
  content-visibility: auto;
  contain-intrinsic-size: auto 190px;
}

.prod article {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--d-base), box-shadow var(--d-base), transform var(--d-base) var(--ease);
}
.prod:hover article { border-color: var(--line-gold); box-shadow: var(--sh-md); transform: translateY(-3px); }

.prod__media { aspect-ratio: 4/3; overflow: hidden; }
.prod__media img { width: 100%; height: 100%; object-fit: cover; }

.prod__cuerpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.35rem;
  padding: 1.1rem 1.2rem 1.2rem;
}

/* Sin foto, el nombre del platillo es la pieza gráfica: se le da aire
   y un filete dorado corto, el mismo recurso de la marca. */
.prod:not(.prod--con-foto) .prod__cuerpo { padding-top: 1.3rem; }
.prod:not(.prod--con-foto) .prod__nombre::after {
  content: '';
  display: block;
  width: 34px; height: 1.5px;
  margin-top: 0.55rem;
  background: linear-gradient(90deg, var(--c-gold), transparent);
}

.prod__nombre {
  font-family: var(--f-display);
  font-size: var(--t-lg);
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
}

.prod__desc {
  font-size: var(--t-sm);
  color: var(--text-soft);
  flex: 1;
}

.prod__precio {
  margin-top: 0.5rem;
  font-family: var(--f-ui);
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--c-crimson);
  font-variant-numeric: lining-nums tabular-nums;
}

/* Varios tamaños: se listan en columna con el importe alineado a la
   derecha, para poder compararlos de un vistazo. */
.prod__tamanos {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.prod__tamanos li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--t-sm);
  color: var(--text-soft);
}
.prod__tamanos b {
  font-family: var(--f-ui);
  font-weight: 600;
  color: var(--c-crimson);
  font-variant-numeric: lining-nums tabular-nums;
}

.prod__etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
  margin-top: 0.15rem;
}
.prod__etiqueta {
  font-family: var(--f-ui);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-gold-text);
  background: rgba(186, 142, 48, 0.14);
  border-radius: var(--r-pill);
  padding: 0.2rem 0.6rem;
}

/* ── Resultados de búsqueda ─────────────────────────────── */
.mresumen {
  margin-bottom: 1.6rem;
  font-family: var(--f-ui);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-gold-text);
}
.mresumen[hidden] { display: none; }

.mvacio {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--text-soft);
}
.mvacio[hidden] { display: none; }

.mvacio__btn {
  font: inherit;
  color: var(--c-crimson);
  font-weight: 600;
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

.mpie-nota {
  margin-top: var(--s-5);
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  font-size: var(--t-xs);
  color: var(--text-soft);
  text-align: center;
}

/* ── Impresión ──────────────────────────────────────────── */
/* La carta completa en papel, para el personal o para la mesa. */
@media print {
  .mheader, .mchips, .mcard-grid, .mvista-previa, .footer { display: none !important; }
  .mseccion { display: block !important; break-inside: auto; }
  .prod { content-visibility: visible; break-inside: avoid; }
  .prod article { border: none; box-shadow: none; }
  .prod__media { display: none; }
  .prod-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  body { background: #fff; color: #000; }
}