/* Malafama · Bar y restaurante (Sueca). Vista previa.

   Colores: el verde del logo que mandó Alfred, #01504a (mediana de 441.000 píxeles), más crema, negro y blanco; el resto, neutros cálidos. Contrastes calculados (WCAG):
   blanco sobre el verde 9,3:1; verde sobre crema #f6efe3 8,2:1; negro #141414 sobre crema 16:1; gris #5b5b55 sobre crema 6,2:1; crema sobre el verde 8,2:1.
   Las palabras gigantes (rellenas o solo con contorno) van sobre fotos oscurecidas con un degradado: se miden con la web ya montada.
   Tipografías: Anton (palabras gigantes y menú, la letra condensada y pesada de sus publicaciones) y Bricolage Grotesque (texto y botones), autoalojadas (WOFF2, SIL OFL 1.1).
   Enlaces: nunca subrayados, en ningún estado; se reconocen por el color y el peso 600. El foco de teclado lleva contorno. */

@font-face { font-family: "Anton"; src: url("../fonts/anton.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  --verde: #01504a;
  --verde-oscuro: #00322e;
  --crema: #f6efe3;
  --papel: #fffaf1;
  --negro: #141414;
  --gris: #5b5b55;
  --linea: #dcd2c1;
  --blanco: #ffffff;
  --ancho: 77.5rem;
  --margen: clamp(1rem, 4vw, 2.5rem);
  --seccion: clamp(3.5rem, 8vw, 7rem);
  --trama: linear-gradient(rgb(255 255 255 / 0.12) 1px, transparent 1px) 0 0 / 8px 8px, linear-gradient(90deg, rgb(255 255 255 / 0.12) 1px, transparent 1px) 0 0 / 8px 8px; /* la cuadrícula fina de la portada: cuadros de 8 px (también en el bloque de vídeo de encima del pie) */
  --titulares: "Anton", "Arial Narrow", Impact, sans-serif;
  --texto: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 1rem; }
body { display: flex; flex-direction: column; min-height: 100vh; margin: 0; background: var(--crema); color: var(--negro); font: 400 1.0625rem/1.55 var(--texto); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
svg { display: block; }
h1, h2, h3, p, ul, dl, dd, figure, address { margin: 0; }
ul { padding: 0; list-style: none; }
address { font-style: normal; }
main { flex: 1 0 auto; }
[hidden] { display: none !important; } /* el atributo hidden manda sobre cualquier display de las reglas de abajo */

/* Enlaces: ni subrayado ni borde inferior en ningún estado */
a, a:hover, a:focus, a:active, a:visited { text-decoration: none; }
a { color: var(--verde); font-weight: 600; }
a:hover { color: var(--negro); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; }

.solo-lectores { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.icono { width: 1.5rem; height: 1.5rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icono--relleno { fill: currentColor; stroke: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--margen); }
.flecha { white-space: nowrap; }
.salto { position: absolute; left: var(--margen); top: -5rem; z-index: 30; padding: 0.75rem 1rem; border: 2px solid var(--verde); background: var(--blanco); color: var(--verde); }
.salto:focus { top: 0.5rem; }

/* ---------- Palabras gigantes: la letra condensada y pesada de sus publicaciones, rellena o solo con contorno ---------- */
.palabra { --tinta: var(--blanco); font-family: var(--titulares); font-weight: 400; line-height: 0.9; letter-spacing: 0.005em; text-transform: uppercase; }
.palabra > span, .palabra .bocadillo__palabras > span { display: block; }
.palabra .relleno { color: var(--tinta); }
.palabra .contorno { color: transparent; -webkit-text-stroke: max(1.5px, 0.026em) var(--tinta); }
.palabra--hero { font-size: clamp(3.9rem, 1.6rem + 10.5vw, 10rem); }
.palabra--seccion { font-size: clamp(3.25rem, 1.8rem + 6.5vw, 7rem); }
.palabra--legal { --tinta: var(--verde); font-size: clamp(3rem, 2rem + 4vw, 5.5rem); }
.palabra--acento > span + span { margin-top: 0.3em; } /* la tilde de la 2.ª línea no pisa la letra de arriba */

/* ---------- Botones: rectos, a todo el ancho en el móvil ---------- */
.acciones { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 3.25rem; padding: 0.7rem 1.5rem; border: 2px solid var(--verde); border-radius: 0; background: var(--verde); color: var(--blanco); font: 800 1rem/1.2 var(--texto); letter-spacing: 0.03em; text-align: center; text-transform: uppercase; cursor: pointer; }
.boton:hover { background: transparent; color: var(--verde); }
.boton--claro { border-color: var(--crema); background: var(--crema); color: var(--verde); }
.boton--claro:hover { background: transparent; color: var(--crema); }
.boton--linea { border-color: currentColor; background: transparent; color: var(--blanco); }
.boton--linea:hover { background: var(--blanco); border-color: var(--blanco); color: var(--verde); }
.boton--linea-oscuro { border-color: var(--verde); background: transparent; color: var(--verde); }
.boton--linea-oscuro:hover { background: var(--verde); color: var(--blanco); }
@media (max-width: 37.4375rem) { .acciones { flex-direction: column; } .boton { width: 100%; } }

/* ---------- Cabecera: el verde de la marca, logo blanco y menú en la letra de los titulares ---------- */
.cab { position: relative; z-index: 20; background: var(--verde); color: var(--blanco); }
.cab__fila { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 0.95rem; } /* el logo no toca los bordes de la barra: aire arriba y abajo */
.cab__logo { display: block; flex: none; line-height: 0; }
.cab__logo img { width: 8.25rem; height: auto; }
.cab__logo:focus-visible, .cab a:focus-visible, .cab button:focus-visible { outline-color: var(--blanco); }
.cab__nav ul { display: flex; gap: clamp(1.1rem, 2.4vw, 2.25rem); }
.cab__nav a { color: var(--blanco); font: 400 1.3rem/1 var(--titulares); letter-spacing: 0.05em; text-transform: uppercase; }
.cab__nav a:hover { color: var(--crema); }
@media (min-width: 56.25rem) { .cab__solo-movil { display: none; } } /* en escritorio «Reservar» ya es el botón de la derecha; el de la lista queda para el menú del móvil */
/* «Bebidas» (15/11/2026) añadió un sexto elemento al menú y entre 900 y ~940 px la cabecera se quedaba sin sitio: el menú se comprimía y «Dónde estamos» se partía en dos líneas. Entre 900 y 1100 px las letras (de 1,15 a 1,3 rem)
   y los huecos (de 1,1 rem a 2,4 vw) del menú crecen con el ancho; desde 1100 px queda como estaba. */
@media (min-width: 56.25rem) and (max-width: 68.75rem) {
  .cab__nav ul { gap: clamp(1.1rem, 4.4vw - 22px, 2.4vw); }
  .cab__nav a { font-size: clamp(1.15rem, 0.475rem + 1.2vw, 1.3rem); }
}
.cab__iconos { display: none; }
/* El botón del menú (Alfred, 14/11): la carita del logo en lugar de la palabra «Menú» y, después, sin el cuadro que la envolvía; abierto, la carita pasa a ser una ✕. Sigue siendo una zona de toque de 2,75 rem */
.cab__control { display: none; flex: none; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: transparent; color: var(--blanco); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cab__cara { display: block; width: 2.4rem; height: auto; margin-top: 0.1rem; }
.cab__control .i-cerrar { display: none; width: 1.75rem; height: 1.75rem; }
.cab__control[aria-expanded="true"] .i-cerrar { display: block; }
.cab__control[aria-expanded="true"] .cab__cara { display: none; }
.cab__control:hover .cab__cara { opacity: 0.8; }
@media (max-width: 56.1875rem) {
  .cab__fila { flex-wrap: wrap; }
  .cab__reservar { display: none; }
  .cab__control { display: inline-flex; }
  .cab__nav { display: none; flex: 0 0 100%; order: 3; padding-block: 1.25rem 1.75rem; border-top: 1px solid rgb(255 255 255 / 0.3); text-align: center; }
  .cab__nav.abierto { display: block; }
  .cab__nav ul { flex-direction: column; gap: 0.35rem; }
  .cab__nav li a { display: block; padding: 0.5rem 0; font-size: 1.6rem; }
  .cab__iconos { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 1.5rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid rgb(255 255 255 / 0.3); }
  .cab__nav .cab__iconos a { display: inline-flex; align-items: center; gap: 0.5rem; font: 600 1rem/1.2 var(--texto); letter-spacing: 0; text-transform: none; }
}
/* Sin JavaScript el menú se queda a la vista */
@media (scripting: none) {
  .cab__control { display: none; }
  .cab__nav { display: block; }
}

/* ---------- Portada: una pared de tres fotos, como la cuadrícula de su Instagram, con la frase gigante arriba a la izquierda (Alfred, 09/11: «Sube el texto fijo sí»: antes iba abajo y en una ventana normal quedaba cortado) ---------- */
.hero { --velo-arriba: linear-gradient(90deg, rgb(0 0 0 / 0.28) 0%, rgb(0 0 0 / 0.28) 40%, rgb(0 0 0 / 0) 80%), linear-gradient(180deg, rgb(0 0 0 / 0.62) 0%, rgb(0 0 0 / 0.46) 35%, rgb(0 0 0 / 0.2) 65%, rgb(0 0 0 / 0.42) 100%); position: relative; display: flex; align-items: flex-start; min-height: clamp(38rem, 92svh, 56rem); overflow: hidden; background: var(--negro); color: var(--blanco); }
.hero__pared { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr; }
.hero__pared img { width: 100%; height: 100%; object-fit: cover; }
.hero__foto--2, .hero__foto--3 { display: none; }
.hero::after { content: ""; position: absolute; inset: 0; background: var(--trama), var(--velo-arriba); } /* entre las fotos y el texto: trama de cuadros finos + capa oscura, más fuerte arriba, donde va el texto */
.hero__texto { position: relative; z-index: 1; padding-block: 2.5rem 3rem; } /* el texto fijo va arriba (Alfred, 09/11), en el mismo sitio que las palabras del destello; 2,5 rem para que la tilde de AQUÍ no toque la cabecera */
.hero h1 { max-width: 6.5em; }
.hero__entrada { max-width: 30rem; margin: 1.4rem 0 1.75rem; font-size: 1.3rem; font-weight: 600; line-height: 1.4; text-shadow: 0 1px 14px rgb(0 0 0 / 0.55); }
.hero a:focus-visible { outline-color: var(--blanco); }
/* Los dos botones del hero, uno debajo del otro (Alfred, 15/11/2026: «en la sección hero de la home, debajo del botón de reservar, el botón de la carta de comida, que al fin y al cabo es lo más
   importante de un bar. Reservar y comer»): «Llamar» (la web no tiene formulario: se reserva por teléfono) arriba y «Ver la carta» debajo, a la izquierda y los dos del mismo ancho (el del más ancho;
   en el móvil, a todo el ancho de la pantalla). Los dos con el mismo peso: son las dos cosas que se hacen en un bar. */
.hero__texto .acciones { display: grid; grid-template-columns: max-content; justify-content: start; }
@media (max-width: 37.4375rem) { .hero__texto .acciones { grid-template-columns: minmax(0, 1fr); } }
/* Tableta (de 640 a 899 px; Alfred, 15/11/2026: «donde pone almuerzos, comidas, tardeo, cenas y sobremesas largas y llamar… el mismo recurso, dos columnas»): bajo el título, el texto a la izquierda y el botón de llamar
   a la derecha, en la misma fila. En el móvil, uno debajo del otro y, desde 900 px, como estaba (el texto con el botón debajo, a la izquierda, y las fotos a la derecha). */
@media (min-width: 40rem) and (max-width: 56.1875rem) {
  .hero__texto { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titulo titulo" "texto boton"; align-items: center; column-gap: 2rem; }
  .hero h1 { grid-area: titulo; }
  .hero__entrada { grid-area: texto; margin: 1.4rem 0 0; }
  .hero__texto .acciones { grid-area: boton; justify-self: end; margin-top: 1.4rem; }
}
@media (min-width: 56.25rem) {
  .hero__pared { grid-template-columns: repeat(3, 1fr); }
  .hero__foto--2, .hero__foto--3 { display: block; }
}

/* ---------- Destello de la portada: las palabras de la web pasan a cuadro, a 10 por segundo y cada una con su foto; tras 3 vueltas se queda la portada ----------
   Solo con JavaScript y sin «reducir movimiento»: en cualquier otro caso la portada es la de siempre (no se pinta ni se bajan sus fotos). web.js lo arma (.destello--en-marcha)
   cuando las fotos están decodificadas y lo quita al acabar o al tocarlo; si el JS no llega a armarlo, se esconde solo a los 5 s. Cada cuadro se ve durante su «paso» de cada
   vuelta: una vuelta son 12 pasos y hay 3 vueltas (36 pasos, 3,6 s). La carita (Alfred, 15/11: «que salga una sola vez en el flashazo») es un cuadro más que sale UNA vez, en el paso 18 (la mitad de los 36), por encima de
   ROLL de la segunda vuelta (que ese paso no se ve): no alarga nada. El ritmo es --paso. Si cambia el número de palabras hay que cambiar el 8,3333 % (100/12), los retrasos y el 12 y el 36; la carita sale en el paso
   del retraso de .destello__cuadro--cara. */
.destello { display: none; }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .destello { --paso: 100ms; position: absolute; inset: 0; z-index: 2; display: block; overflow: hidden; background: var(--negro); cursor: pointer; animation: destello-seguro 1ms linear 5s forwards; }
  .destello--fuera { display: none; }
  .destello--en-marcha { animation: destello-fin 0.35s ease-out calc(var(--paso) * 36) forwards; }
  /* Cada cuadro es su propio contexto de apilado (isolation): el texto de una palabra lleva z-index 1 y, sin esto, se pintaría por encima del fondo de un cuadro posterior (la carita tapa a ROLL en el paso 18: sin aislarlo,
     la palabra se veía a través de la carita) */
  .destello__cuadro { position: absolute; inset: 0; visibility: hidden; isolation: isolate; }
  .destello--en-marcha .destello__cuadro { animation: destello-cuadro calc(var(--paso) * 12) linear 0s 3; }
  .destello--en-marcha .destello__cuadro:nth-child(2) { animation-delay: calc(var(--paso) * 1); }
  .destello--en-marcha .destello__cuadro:nth-child(3) { animation-delay: calc(var(--paso) * 2); }
  .destello--en-marcha .destello__cuadro:nth-child(4) { animation-delay: calc(var(--paso) * 3); }
  .destello--en-marcha .destello__cuadro:nth-child(5) { animation-delay: calc(var(--paso) * 4); }
  .destello--en-marcha .destello__cuadro:nth-child(6) { animation-delay: calc(var(--paso) * 5); }
  .destello--en-marcha .destello__cuadro:nth-child(7) { animation-delay: calc(var(--paso) * 6); }
  .destello--en-marcha .destello__cuadro:nth-child(8) { animation-delay: calc(var(--paso) * 7); }
  .destello--en-marcha .destello__cuadro:nth-child(9) { animation-delay: calc(var(--paso) * 8); }
  .destello--en-marcha .destello__cuadro:nth-child(10) { animation-delay: calc(var(--paso) * 9); }
  .destello--en-marcha .destello__cuadro:nth-child(11) { animation-delay: calc(var(--paso) * 10); }
  .destello--en-marcha .destello__cuadro:nth-child(12) { animation-delay: calc(var(--paso) * 11); }
  /* La carita: una sola vez (una vuelta de un paso), en el paso 18 de los 36 (1,8 s), por encima de la palabra que toque (es el último cuadro, así que se pinta encima; ROLL en la segunda vuelta) */
  .destello--en-marcha .destello__cuadro--cara { animation: destello-cara var(--paso) linear calc(var(--paso) * 18) 1; }
  .destello__cuadro picture { position: absolute; inset: 0; display: block; }
  .destello__cuadro img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  /* Las palabras van arriba a la izquierda: en el móvil (Alfred, 08/11) y en escritorio (Alfred, 09/11: «también hay que subir los textos arriba porque se quedan abajo no se ven si no haces
     scroll»; la portada es más alta que la ventana y lo de abajo quedaba fuera de la vista). Por eso la capa oscura (--velo-arriba) es más fuerte arriba */
  .destello__cuadro::after { content: ""; position: absolute; inset: 0; background: var(--trama), var(--velo-arriba); }
  .destello__texto { position: relative; z-index: 1; display: flex; align-items: flex-start; height: 100%; padding-block: 2.5rem 3rem; }
  .destello__cuadro--sola .palabra { font-size: clamp(6rem, 2.6rem + 16vw, 16rem); }
  /* En ventanas bajas la palabra de cuatro líneas (SO-BRE-ME-SAS) se reduce para que quepa entera sin hacer scroll: sus 3,6 líneas de alto tienen que caber en lo que queda de ventana bajo la cabecera */
  .destello__cuadro:not(.destello__cuadro--sola) .palabra { font-size: min(clamp(3.9rem, 1.6rem + 10.5vw, 10rem), calc((100svh - 9.5rem) / 3.7)); }
  /* La carita (Alfred, 15/11/2026: «clavar como a la misma altura del texto el logo de Malafama, pero solo la carita, lo que estamos usando de favicon… como un texto más»): un cuadro sin foto, el verde de la marca con la
     misma trama (sin la capa oscura: es la carita blanca sobre verde del favicon), y la carita arriba a la izquierda, en el mismo sitio que las palabras (el mismo .destello__texto). Mide 5 rem + 33 vw de ancho, entre
     11 y 22 rem (en el móvil, algo más de la mitad de la pantalla; desde unos 800 px, 22 rem) y su alto sale de su proporción (1,2 : 1): a 1280 px mide 339 × 280, como una palabra de una línea (ROLL, 430 × 215), y a 390 px,
     209 × 173 (ROLL, 190 × 91). Sale una sola vez en todo el destello (Alfred, 15/11: «que salga una sola vez en el flashazo»); antes, tras cada tercera palabra. */
  .destello__cuadro--cara { background: var(--verde); }
  .destello__cuadro--cara::after { background: var(--trama); }
  .destello__cuadro .destello__cara { position: static; inset: auto; display: block; width: clamp(11rem, 5rem + 33vw, 22rem); height: auto; object-fit: contain; }
}
@keyframes destello-cuadro { 0% { visibility: visible; } 8.3333% { visibility: hidden; } 100% { visibility: hidden; } }
/* La carita se ve durante todo su paso (la animación dura un paso y no repite: antes y después sigue oculta) */
@keyframes destello-cara { from { visibility: visible; } to { visibility: visible; } }
@keyframes destello-fin { 0% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
@keyframes destello-seguro { to { visibility: hidden; } }

/* ---------- Móvil: la barra verde, el logo y el botón de la carita salen cuando acaba el destello ----------
   Alfred, 09/11: «al entrar solo se vería los flashazos de imágenes y texto y cuando ya se muestre la fija, entonces aparece de forma gradual pero rápido la top bar con el logo y el menú».
   Solo en la portada (su cabecera lleva .cab--portada), solo donde hay botón «Menú» (hasta 56,1875 rem, como el resto de reglas del móvil) y solo si el destello se va a ver (con JavaScript y
   sin «reducir movimiento»): en cualquier otro caso la barra se ve desde el principio, como siempre. La portada sube por detrás de la barra (--alto-cab, su altura) para que los destellos
   ocupen la pantalla entera desde arriba; el titular, los botones y las palabras del destello quedan donde estaban, la barra tapa justo esa franja al salir y no se mueve nada (la capa oscura
   se reparte igual que antes, a partir del borde de abajo de la barra). web.js pone .cab--espera al armar el destello y .cab--entra cuando EMPIEZA el fundido de salida del destello (o antes, si
   se toca, se pulsa una tecla o falla): la barra sale a la vez que la portada fija, con el mismo fundido de 0,35 s (Alfred, 09/11: «debería de aparecer un pelín antes, porque la imagen fija sale
   un instante antes que el menú y queda un poco raro»; antes esperaba a que acabase el fundido y llegaba 0,35 s tarde). Si el JS no llega a armarlo, sale sola a los 5 s, a la vez que se esconde
   la capa negra del destello (destello-seguro). Oculta lleva visibility: hidden, así que no se puede pulsar ni enfocar mientras no se ve. Para cambiar la velocidad: el 0.35s de cab-entra y
   de cab-seguro (que va con el 0.35s de destello-fin). */
@media (max-width: 56.1875rem) and (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  :root { --alto-cab: calc(2.75rem + 1.9rem); } /* la barra: el botón de la carita (2,75 rem, más alto que el logo de 8,25 rem × 94/300 = 2,59 rem) + 0,95 rem de aire arriba y abajo = 4,65 rem (74,4 px) */
  .cab--portada { visibility: hidden; opacity: 0; animation: cab-seguro 0.35s ease-out 5s forwards; }
  .cab--portada.cab--espera { animation: none; }
  .cab--portada.cab--entra { animation: cab-entra 0.35s ease-out forwards; }
  .cab--portada + main .hero {
    --velo-arriba: linear-gradient(90deg, rgb(0 0 0 / 0.28) 0%, rgb(0 0 0 / 0.28) 40%, rgb(0 0 0 / 0) 80%),
      linear-gradient(180deg, rgb(0 0 0 / 0.62) 0, rgb(0 0 0 / 0.62) var(--alto-cab), rgb(0 0 0 / 0.46) calc(var(--alto-cab) + (100% - var(--alto-cab)) * 0.35),
        rgb(0 0 0 / 0.2) calc(var(--alto-cab) + (100% - var(--alto-cab)) * 0.65), rgb(0 0 0 / 0.42) 100%);
    margin-top: calc(var(--alto-cab) * -1);
    min-height: calc(clamp(38rem, 92svh, 56rem) + var(--alto-cab));
  }
  .cab--portada + main .hero__texto, .cab--portada + main .destello__texto { padding-top: calc(2.5rem + var(--alto-cab)); }
}
@keyframes cab-entra { from { opacity: 0; visibility: visible; } to { opacity: 1; visibility: visible; } }
@keyframes cab-seguro { from { opacity: 0; visibility: visible; } to { opacity: 1; visibility: visible; } }

/* ---------- Losetas: cada una es una «publicación» a 4:5, foto + palabra gigante + una frase suya ---------- */
.feed { display: grid; gap: 0.75rem; }
@media (min-width: 40rem) { .feed { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } }
.loseta { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--negro); color: var(--blanco); }
.loseta > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.loseta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(0 0 0 / 0.34) 0%, rgb(0 0 0 / 0.34) 35%, rgb(0 0 0 / 0) 85%), linear-gradient(180deg, rgb(0 0 0 / 0.5) 0%, rgb(0 0 0 / 0.42) 50%, rgb(0 0 0 / 0.2) 70%, rgb(0 0 0 / 0.8) 100%); }
.loseta__texto { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; padding: clamp(1.1rem, 3vw, 2rem); }
.loseta .palabra { font-size: clamp(3.8rem, 1.9rem + 7.4vw, 7.25rem); }
.loseta__texto > p { max-width: 25rem; font-size: 1.0625rem; font-weight: 600; line-height: 1.4; text-shadow: 0 1px 12px rgb(0 0 0 / 0.6); }
/* Con un número impar de losetas la primera (la del día que empieza) ocupa las dos columnas y va en horizontal (16:10, tan alta como las de al lado): así no queda una suelta en la última fila */
@media (min-width: 40rem) {
  .loseta--ancha { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
  .loseta--ancha > img { object-position: 50% 80%; }
}
/* En dos columnas estrechas (de 40 a 56 rem) SO-BRE-ME-SAS, de cuatro líneas, no cabía con su frase a este tamaño (se comía el margen de abajo y a 40 rem se cortaba la última línea): va más pequeña */
@media (min-width: 40rem) and (max-width: 56.1875rem) { .loseta--sobremesas .palabra { font-size: clamp(3rem, -1.5rem + 12.6vw, 6rem); } }
@media (hover: hover) {
  .loseta:hover > img { transform: scale(1.04); }
  .loseta .palabra .contorno { transition: color 0.35s ease; }
  .loseta:hover .palabra .contorno { color: var(--tinta); }
}
.momentos { padding-block: clamp(1rem, 2vw, 1.5rem) var(--seccion); }
@media (max-width: 39.9375rem) { .momentos > .contenedor { padding-inline: 0; } }

/* ---------- Bocadillo del mes ---------- */
.bocadillo { padding-block: var(--seccion); background: var(--verde); color: var(--blanco); }
.bocadillo__rejilla { display: grid; gap: 2rem 4rem; align-items: center; }
.bocadillo__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.bocadillo__titulo { display: flex; align-items: flex-start; gap: 0.1em; margin-bottom: 1.5rem; font-size: clamp(5.5rem, 3rem + 11vw, 11.5rem); }
.bocadillo__palabras { display: block; }
.bocadillo__mes { padding-top: 0.2em; font-size: 0.3em; letter-spacing: 0.1em; line-height: 1; writing-mode: vertical-rl; transform: rotate(180deg); color: var(--blanco); }
.bocadillo__texto p { max-width: 28rem; margin-bottom: 1.6rem; font-size: 1.3rem; font-weight: 600; line-height: 1.4; }
.bocadillo a:focus-visible { outline-color: var(--blanco); }
@media (min-width: 56.25rem) { .bocadillo__rejilla { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
@media (max-width: 39.9375rem) { .bocadillo__foto { margin-inline: calc(var(--margen) * -1); } }
/* Tableta (de 640 a 899 px; Alfred, 15/11/2026: «Lo mismo para el bloque del bocadillo del mes, porque tiene el mismo problema»): bajo la foto, el título con su frase a la izquierda y el botón a la derecha, centrado en la
   altura de las dos. El botón mide 15 rem y su texto baja a dos líneas (título y botón en una sola línea no caben a 768 px). En el móvil, todo en una columna y, desde 900 px, como estaba (la foto a la izquierda y el
   texto con el botón a su derecha). */
@media (min-width: 40rem) and (max-width: 56.1875rem) {
  .bocadillo__texto { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; grid-template-areas: "titulo boton" "texto boton"; align-items: center; column-gap: 2rem; }
  .bocadillo__titulo { grid-area: titulo; align-self: end; }
  .bocadillo__texto p { grid-area: texto; align-self: start; max-width: none; margin-bottom: 0; }
  .bocadillo__texto .acciones { grid-area: boton; }
  .bocadillo__texto .acciones .boton { width: 100%; }
}

/* ---------- La carta (Alfred, 09/11): antes «Lo que se pide» (seis losetas de platos); ahora un bloque con la pared perforada del local de fondo, el título y el botón del PDF ----------
   El fondo es la imagen apaisada desde 56,25 rem y la vertical por debajo (<picture> en la página). El botón no hace nada hasta que haya PDF (CARTA_PDF en el generador). */
.carta { position: relative; display: flex; align-items: center; min-height: clamp(20rem, 40vw, 30rem); overflow: hidden; background: #e1cfbe; color: var(--negro); }
.carta__fondo { position: absolute; inset: 0; display: block; }
.carta__fondo img { width: 100%; height: 100%; object-fit: cover; }
.carta__contenido { position: relative; padding-block: var(--seccion); }
.carta .palabra { --tinta: var(--negro); }
.carta .palabra .contorno { color: var(--crema); } /* la palabra con contorno lleva el interior en crema: sin él, los puntitos de la pared se ven dentro de las letras y se leen peor */
.carta__boton { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
/* La textura de «La carta» (Alfred, 15/11/2026): hojas y flores en verde azulado, naranja, amarillo y azul marino sobre crema, de fondo del bloque «La carta» (la portada y la página de la carta; «Las bebidas»
   sigue con la pared perforada). En la página de la carta, para que el título y el texto pequeño se lean sobre un dibujo tan vivo: una veladura crema que se desvanece hacia la derecha (la mitad derecha se ve con
   todo su color) y «Inicio / Carta» sobre su propio fondo crema. */
.carta--pagina .carta__fondo--textura::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(246 239 227 / 0.68) 0%, rgb(246 239 227 / 0.56) 30%, rgb(246 239 227 / 0.16) 56%, rgb(246 239 227 / 0) 72%); pointer-events: none; }
.carta--textura .etiqueta { display: inline-block; padding: 0.3rem 0.65rem; background: rgb(246 239 227 / 0.92); }
/* El bloque de la portada (Alfred, 15/11/2026: «no veo un botón que nos lleve directamente [a la carta de vinos] haciendo scroll… en el bloque de la carta, añadir dentro dos columnas, uno que sea la carta y otro que
   sea de bebidas, con los dos botones»): dos tarjetas crema con borde negro (como la nota de la página de la carta), «La carta» y «Las bebidas», cada una con su título y su botón, sobre la textura entera, que así
   conserva todo su color; una al lado de la otra desde 640 px y, por debajo, una encima de la otra. */
.carta__dos { display: grid; gap: 1.5rem 2rem; }
.carta__col { min-width: 0; padding: clamp(1.1rem, 2.2vw, 1.75rem); border: 2px solid var(--negro); background: rgb(246 239 227 / 0.94); }
.carta__col .carta__boton { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }
@media (min-width: 40rem) { .carta__dos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* El enlace a la otra página, al final de la carta («Ver las bebidas») y al final de las bebidas («Ver la carta») (Alfred, 15/11/2026): una banda baja con el mismo fondo que la cabecera de su página (la textura en la
   carta, la pared en las bebidas: la misma imagen, así que no se baja nada más) y una tarjeta como las de la portada, con el título en una sola línea a la izquierda y el botón a la derecha desde 640 px; por debajo, uno
   encima del otro. */
.carta--enlace { min-height: 0; }
.carta--enlace .carta__contenido { padding-block: clamp(2.25rem, 5vw, 3.75rem); }
.carta__col--enlace { display: grid; gap: 1.1rem 2rem; align-items: center; }
.carta__col--enlace .palabra { font-size: clamp(2.8rem, 1.6rem + 4.6vw, 4.75rem); }
.carta__col--enlace .palabra > span { display: inline; }
.carta__col--enlace .carta__boton { margin-top: 0; }
@media (min-width: 40rem) { .carta__col--enlace { grid-template-columns: minmax(0, 1fr) auto; } }

/* ---------- Lo último en Instagram ---------- */
.instagram { padding-block: var(--seccion); background: var(--negro); color: var(--blanco); }
.instagram h2 { margin-bottom: 1.25rem; }
.instagram__entrada { max-width: 34rem; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); font-size: 1.3rem; font-weight: 600; line-height: 1.4; }
.ultimos { display: grid; gap: 1.75rem 1.25rem; margin-bottom: 2.5rem; }
.ultimo { display: grid; gap: 0.5rem; color: var(--blanco); font-weight: 400; }
.ultimo:hover { color: var(--crema); }
.ultimo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; margin-bottom: 0.4rem; transition: opacity 0.3s ease; }
.ultimo:hover img { opacity: 0.85; }
.ultimo__fecha { color: var(--crema); font: 400 1.35rem/1 var(--titulares); letter-spacing: 0.06em; text-transform: uppercase; }
.ultimo__texto { font-size: 1.0625rem; line-height: 1.45; }
.ultimos, .ultimo { grid-template-columns: minmax(0, 1fr); } /* sin esto, un texto largo sin espacios (una dirección) ensanchaba la portada en el móvil */
.ultimo__texto { overflow-wrap: anywhere; }
.instagram a:focus-visible { outline-color: var(--blanco); }
@media (min-width: 40rem) { .ultimos { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ultimo img { aspect-ratio: 4 / 5; } }

/* ---------- Reservar ---------- */
/* ---------- El local: una foto del sitio a todo el ancho, entre «Lo último» y «Reservar» ----------
   Alfred, 09/11: la foto del rincón del local (sofá azul bajo el neón con el logo; es de su Instagram), «en reservar». Una banda sin texto encima (el neón ya dice lo suyo), como la del vídeo del pie: la misma
   trama que la portada y un velo suave. En el móvil, entera (3:4, a todo el ancho); desde 40 rem, una banda apaisada que recorta la foto para enseñar el neón y el sofá (object-position). */
.local { position: relative; overflow: hidden; aspect-ratio: 3 / 4; background: var(--negro); }
.local__foto { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 33%; }
.local::after { content: ""; position: absolute; inset: 0; background: var(--trama), rgb(0 0 0 / 0.2); }
@media (min-width: 40rem) { .local { aspect-ratio: auto; min-height: clamp(26rem, 46vw, 38rem); } }

.reservar { padding-block: var(--seccion); background: var(--verde); color: var(--blanco); }
.reservar__rejilla { display: grid; gap: 1.75rem 4rem; align-items: end; }
.reservar__cuerpo p { max-width: 24rem; margin-bottom: 1.4rem; font-size: 1.4rem; font-weight: 600; line-height: 1.35; }
.reservar a:focus-visible { outline-color: var(--blanco); }
@media (min-width: 56.25rem) { .reservar__rejilla { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
/* Tableta (de 640 a 899 px; Alfred, 15/11/2026, con captura: «este espacio desaprovechado se podría optimizar»): «Reserva tu mesa» en dos columnas. A la izquierda, el título y «Reservas por teléfono.»; a la derecha,
   el botón de llamar, a ras del borde derecho y centrado en la altura de las dos. En el móvil sigue todo en una columna y, desde 900 px, como estaba (el título y, a su derecha, el texto con el botón). */
@media (min-width: 40rem) and (max-width: 56.1875rem) {
  .reservar__rejilla { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titulo boton" "texto boton"; align-items: center; gap: 1.4rem 2rem; }
  .reservar__rejilla > h2 { grid-area: titulo; align-self: end; }
  .reservar__cuerpo { display: contents; }
  .reservar__cuerpo p { grid-area: texto; align-self: start; margin-bottom: 0; }
  .reservar__cuerpo .acciones { grid-area: boton; justify-self: end; }
}

/* ---------- Dónde estamos: plano propio (OpenStreetMap) con un solo botón debajo ---------- */
.donde { padding-block: var(--seccion); }
.donde .palabra { --tinta: var(--negro); }
.donde__rejilla { display: grid; gap: 2rem 4rem; }
.donde__direccion { margin: 1.5rem 0; font-size: 1.4rem; font-weight: 600; line-height: 1.35; }
.datos { border-top: 2px solid var(--negro); }
.datos > div { display: grid; gap: 0.1rem 1.5rem; padding: 0.85rem 0; border-bottom: 1px solid var(--linea); }
.datos dt { color: var(--gris); font: 400 1rem/1.4 var(--titulares); letter-spacing: 0.1em; text-transform: uppercase; }
.datos dd { margin: 0; }
.horario { border-collapse: collapse; } /* el horario de su ficha de Google: tabla con el día como cabecera de fila */
.horario th, .horario td { padding: 0.12rem 0; text-align: left; vertical-align: baseline; font-weight: 400; }
.horario th { padding-right: 1rem; font-weight: 600; white-space: nowrap; }
.horario__tramo { display: block; white-space: nowrap; }
/* Cada dato con su nombre al lado cuando la lista es ancha (la tabla del horario pide unos 24 rem) y con el nombre encima cuando no cabe, medido sobre la propia lista (container query): a 900 px, con el plano a la derecha, la
   columna de la izquierda es estrecha y el horario se salía de ella (15/11/2026). */
.datos { container-type: inline-size; }
@container (min-width: 24rem) { .datos > div { grid-template-columns: 7rem minmax(0, 1fr); } }
@media (min-width: 56.25rem) { .donde__rejilla { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: start; } }
/* Tableta (de 640 a 899 px; Alfred, 15/11/2026: «Pone dónde estamos, debajo pone la calle y luego queda un hueco muy grande a la parte derecha, que ahí cabría perfectamente el teléfono, Instagram y horario»): a la
   izquierda, el título con la dirección; a la derecha, el teléfono, Instagram y el horario (cada dato con su nombre encima, que la columna es estrecha); el plano, debajo, a todo el ancho. En el móvil y desde 900 px,
   como estaba. */
@media (min-width: 40rem) and (max-width: 56.1875rem) {
  .donde__texto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "titulo datos" "direccion datos"; align-content: start; column-gap: 2.5rem; } /* la fila de abajo (1fr) absorbe lo que la lista de datos mide de más: la dirección queda pegada al título */
  .donde__texto h2 { grid-area: titulo; }
  .donde__direccion { grid-area: direccion; margin-bottom: 0; }
  .donde__texto .datos { grid-area: datos; align-self: start; }
}
.mapa__marco { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border: 2px solid var(--negro); background: var(--papel); }
/* El plano son dos imágenes (herramientas/mapa.py), centradas en el punto del bar: cuadrada en el móvil y 4:3 en pantallas más anchas. Todo el marco es un enlace a Google Maps (el mismo que el
   botón de debajo): un enlace vacío con nombre propio (aria-label) que cubre el marco, como un «enlace extendido». Sin crédito de OpenStreetMap en la imagen: es un croquis de menos de 100 elementos (ver herramientas/mapa.py). */
.mapa__enlace { position: absolute; inset: 0; z-index: 1; }
.mapa__enlace:focus-visible { outline: 3px solid var(--verde); outline-offset: -5px; }
.mapa__marco picture { display: block; width: 100%; height: 100%; }
@media (hover: hover) { .mapa__enlace + picture { transition: opacity 0.2s ease; } .mapa__enlace:hover + picture { opacity: 0.9; } }
.plano { display: block; width: 100%; height: 100%; object-fit: cover; }
.mapa__acciones { margin: 1rem 0 0; }
@media (max-width: 37.4375rem) { .mapa__marco { aspect-ratio: 1; } }

/* ---------- Bloque de vídeo encima del pie (Alfred, 09/11): el vídeo de fondo, en bucle y sin sonido, con la cuadrícula del hero por encima y un poco oscurecido ----------
   Es un vídeo vertical de 720 × 1280 (la preparación de un chuletón y, en los últimos 5 s, la carita del logo sobre verde azulado): en el móvil se ve casi entero (3:4) y en pantallas anchas va
   ampliado 2× y recortado a una franja central (la carita queda en el centro). Sin texto encima. web.js lo descarga y arranca cuando se acerca a la pantalla; sin JavaScript o con
   «reducir movimiento» se queda el póster (su primer fotograma). */
.cierre { position: relative; display: flex; align-items: flex-end; min-height: clamp(26rem, 46vw, 38rem); overflow: hidden; background: var(--negro); color: var(--blanco); }
.cierre__fondo { position: absolute; inset: 0; }
.cierre__video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.cierre__fondo::after { content: ""; position: absolute; inset: 0; background: var(--trama), rgb(0 0 0 / 0.36); } /* la misma trama que la portada + un velo suave */
.cierre button:focus-visible { outline-color: var(--blanco); }
/* El botón de pausa no se ve: aparece al llegar a él con el teclado, y con el foco dentro del bloque el vídeo se detiene (web.js) */
.cierre__control { position: absolute; right: 0; bottom: 1rem; left: 0; display: flex; justify-content: flex-end; margin-inline: auto; pointer-events: none; }
.cierre__pausa { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.cierre__pausa:focus-visible { position: static; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin: 0; overflow: visible; clip-path: none; border: 2px solid var(--blanco); background: rgb(0 0 0 / 0.7); color: var(--blanco); cursor: pointer; pointer-events: auto; }
.cierre__pausa .i-seguir, .cierre__pausa[aria-pressed="true"] .i-pausa { display: none; }
.cierre__pausa[aria-pressed="true"] .i-seguir { display: block; }
@media (max-width: 39.9375rem) { .cierre { min-height: 0; aspect-ratio: 3 / 4; } }

/* ---------- Pie ---------- */
.pie { margin-top: auto; background: var(--verde-oscuro); color: var(--blanco); }
.pie a { color: var(--blanco); }
.pie a:hover { color: var(--crema); }
.pie a:focus-visible { outline-color: var(--blanco); }
.pie__fila { display: grid; justify-items: center; gap: 1.5rem; padding-block: 3rem 2rem; text-align: center; }
.pie__logo { display: block; line-height: 0; }
.pie__logo img { width: 12.5rem; height: auto; }
.pie__direccion { font-size: 1.1rem; line-height: 1.5; }
.pie__contactos { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem 2.25rem; }
.pie__contactos a { position: relative; display: inline-flex; align-items: center; gap: 0.6rem; }
.pie__contactos .icono { width: 1.375rem; height: 1.375rem; }
.pie__legal { display: grid; justify-items: center; gap: 0.5rem; padding-block: 1.5rem 2rem; border-top: 1px solid rgb(255 255 255 / 0.25); text-align: center; }
.pie__legal p:first-child { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.75rem; }
/* La firma de diseño (Alfred, 14/11/2026): el mini logo «DSdesign», muy pequeño, al final del pie y a la derecha, con enlace. Su ancho crece con la pantalla (de 3 a 4,5 rem) y el enlace lleva aire alrededor para pulsarlo bien con el dedo (≥ 24 px).
   El dibujo es BLANCO PURO sobre fondo transparente (el original es negro: sobre el verde oscuro del pie no se vería; «hay que añadirle una capa blanca por encima, porque si no no se va a ver demasiado bien»), a opacidad 1: «design» es de trazo fino. */
.pie__firma { justify-self: end; display: block; margin-inline-end: -0.3rem; padding: 0.55rem 0.3rem; line-height: 0; }   /* el margen negativo compensa el aire del enlace: el dibujo acaba justo donde acaban los demás enlaces del pie */
.pie__firma:hover { opacity: 0.8; }
.pie__firma img { display: block; width: clamp(3rem, 2.2rem + 2.5vw, 4.5rem); height: auto; }
@media (min-width: 56.25rem) {
  .pie__fila { grid-template-columns: auto 1fr auto; justify-items: stretch; align-items: center; gap: 2.5rem; text-align: left; }
  .pie__direccion { text-align: center; }
  .pie__legal { grid-template-columns: 1fr auto; align-items: center; justify-items: start; text-align: left; }   /* los enlaces legales a la izquierda y la firma a la derecha, en la misma línea */
}

/* ---------- Páginas legales (borrador) y 404 ---------- */
.etiqueta { margin-bottom: 0.9rem; color: var(--gris); font: 400 1rem/1.2 var(--titulares); letter-spacing: 0.12em; text-transform: uppercase; }
.borrador { margin: 1.75rem 0 2rem; padding: 0.9rem 1.1rem; border: 2px solid var(--verde); border-left-width: 0.5rem; background: var(--papel); font-weight: 600; }
.legal { max-width: 52rem; padding-block: clamp(2.5rem, 6vw, 4.5rem) 4rem; }
.legal a { overflow-wrap: anywhere; }   /* un enlace largo («openstreetmap.org/copyright») no ensancha la página en un móvil de menos de 290 px */
.legal h2 { margin-top: 2.25rem; margin-bottom: 0.7rem; color: var(--verde); font: 400 1.9rem/1.1 var(--titulares); letter-spacing: 0.02em; text-transform: uppercase; }
.legal p + p { margin-top: 0.8rem; }
.legal ul { margin: 0.7rem 0 0; padding-left: 1.25rem; list-style: square; }
.legal li + li { margin-top: 0.5rem; }
.legal li::marker { color: var(--verde); }
.pendiente { color: var(--gris); }
.perdido { padding-block: clamp(3rem, 8vw, 6rem) 5rem; text-align: center; }   /* todo centrado, en móvil y en escritorio (Alfred, 14/11) */
.perdido__marca { display: block; width: 7rem; height: auto; margin: 0 auto 1.75rem; }
.perdido .palabra { --tinta: var(--verde); margin-bottom: 1.5rem; }
.perdido .entradilla { max-width: 30rem; margin: 0 auto 1.75rem; font-size: 1.3rem; line-height: 1.45; }
.perdido .acciones { justify-content: center; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* ---------- La carta en la web (Alfred, 13/11): carta.html, transcrita de la carta impresa; «Carta» del menú y el botón de la portada llevan aquí ----------
   Cabecera con la pared perforada de fondo (como el bloque de la portada), un índice fijo de apartados en el verde de la marca y tres columnas como en el papel (Ensaladas y Tapas frías |
   Tapas calientes y Patatas | Principales y Postres). Cada apartado imita el trazo del papel: título en las palabras gigantes, filete con su nudo y una línea vertical; cada plato lleva su nombre,
   una línea de puntos y el precio a la derecha. */
.carta--pagina { min-height: clamp(16rem, 28vw, 22rem); }
.carta--pagina .etiqueta, .carta--pagina .etiqueta a { color: var(--negro); }
.carta--pagina .etiqueta { margin-bottom: 1.4rem; }
.carta__nota { max-width: 28rem; margin-top: 1.4rem; padding: 0.8rem 1rem; border: 2px solid var(--negro); background: rgb(246 239 227 / 0.94); font-weight: 600; line-height: 1.35; }
.carta-indice { position: sticky; top: 0; z-index: 15; background: var(--verde); border-bottom: 3px solid var(--verde-oscuro); }
.carta-indice .contenedor { display: flex; align-items: center; gap: 1.5rem; }
.carta-indice ul { display: flex; flex: 1 1 auto; min-width: 0; gap: 0.5rem 1.75rem; padding-block: 0.85rem; overflow-x: auto; scrollbar-width: none; }
.carta-indice ul::-webkit-scrollbar { display: none; }
.carta-indice a { color: var(--blanco); font: 400 1.15rem/1 var(--titulares); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.carta-indice a:hover { color: var(--crema); }
.carta-indice a:focus-visible { outline-color: var(--blanco); }
.carta-pag { padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--seccion); }
.carta-pag__rejilla { display: grid; gap: 3rem 3.5rem; }
.carta-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; align-content: start; }   /* la pista de la rejilla no crece con su contenido: una fila ancha ensanchaba TODA la columna (ver «La carta no se desborda de lado») */
@media (min-width: 40rem) and (max-width: 56.1875rem) {
  .carta-pag__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .carta-col:last-child { grid-column: 1 / -1; }
}
@media (min-width: 56.25rem) { .carta-pag__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.categoria { scroll-margin-top: 4.25rem; }
.palabra--categoria { --tinta: var(--verde); padding-bottom: 0.4rem; border-bottom: 3px solid var(--verde); font-size: clamp(2.6rem, 2rem + 2.4vw, 3.6rem); line-height: 1; overflow-wrap: anywhere; }   /* el título que escribe el bar nunca se sale de su columna: si una palabra no cabe, se parte */
.palabra--categoria > span { display: inline; }
.palabra--categoria > span + span { margin-left: 0.22em; }
/* De 900 a 1067 px (tres columnas todavía estrechas, de 239 a 283 px) el título crecía más rápido que la columna y «PRINCIPALES» sobresalía hasta 9 px: aquí crece al ritmo de la columna y a 1067 px
   llega al mismo tamaño de siempre (3,6 rem). A 900 px baja de 53,6 a 49,4 px; a 1000 px es igual. */
@media (min-width: 56.25rem) and (max-width: 66.6875rem) { .palabra--categoria { font-size: clamp(2.6rem, 7vw - 0.85rem, 3.6rem); } }
.platos { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); container-type: inline-size; gap: 1.2rem; margin: 0; padding: 1.1rem 0 0.3rem 1.1rem; border-left: 3px solid var(--verde); }
.platos::before { content: ""; position: absolute; left: -0.62rem; top: -0.55rem; width: 0.9rem; height: 0.9rem; border: 3px solid var(--verde); border-radius: 50%; background: var(--crema); }
.plato__cab { display: flex; align-items: baseline; gap: 0.55rem; }
.plato__nombre { flex: 0 1 auto; overflow-wrap: anywhere; font: 800 1.1rem/1.2 var(--texto); }   /* solo parte una palabra si la fila no cabe de otra manera */
.plato__linea { flex: 1 1 1rem; min-width: 0.75rem; border-bottom: 2px dotted #bfb29a; transform: translateY(-0.3em); }
.plato__etiqueta { color: var(--gris); font: 400 0.95rem/1 var(--titulares); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.plato__precio { color: var(--verde); font: 400 1.5rem/1 var(--titulares); letter-spacing: 0.02em; white-space: nowrap; }
.plato__euro { font-size: 0.7em; }
.plato__desc { max-width: 30rem; margin-top: 0.3rem; color: #3a3a36; font-size: 0.98rem; line-height: 1.4; }

/* La carta no se desborda de lado a ningún ancho (Alfred, 15/11/2026: «Repara lo del desborde»). Antes, entre 900 y 1050 px (tres columnas), a 640-660 px y en pantallas de menos de 300 px, la fila más ancha
   de una columna («Chuletón de vaca madurada · 2 personas · 36 €» pide 267 px como mínimo: «2 personas» y el precio no se parten) ensanchaba la pista de la rejilla de TODA la columna y el sobrante asomaba por
   la derecha de todos sus platos (hasta 12 px de barra de desplazamiento a 900 px). Arreglos: (1) las pistas de .carta-col y .platos ya no crecen con su contenido (arriba); (2) el nombre de un plato solo parte
   una palabra si no hay otra salida (arriba); (3) en una columna estrecha, la unidad de un plato («por unidad», «6 uds.», «2 personas»…) baja a una segunda línea, a la derecha y justo debajo del precio, en vez de
   quedarse entre el nombre y el precio. «Estrecha» = el espacio de los platos mide 17 rem (272 px) o menos; con una unidad larga (más de 10 letras: «media ración», «para compartir»), 31 rem (496 px). El resto de
   filas, y estas en las columnas anchas, no cambian. Se mide en cada ancho con herramientas/medir-desborde.mjs. */
@container (max-width: 17rem) {
  .plato__cab--etq { display: grid; grid-template-columns: auto minmax(0.75rem, 1fr) auto; column-gap: 0.4rem; row-gap: 0.15rem; }
  .plato__cab--etq > .plato__precio { grid-column: 3; grid-row: 1; }
  .plato__cab--etq > .plato__etiqueta { grid-column: 1 / -1; grid-row: 2; justify-self: end; text-align: right; white-space: normal; }
}
@container (max-width: 31rem) {
  .plato__cab--etq-larga { display: grid; grid-template-columns: auto minmax(0.75rem, 1fr) auto; column-gap: 0.4rem; row-gap: 0.15rem; }
  .plato__cab--etq-larga > .plato__precio { grid-column: 3; grid-row: 1; }
  .plato__cab--etq-larga > .plato__etiqueta { grid-column: 1 / -1; grid-row: 2; justify-self: end; text-align: right; white-space: normal; }
}

/* ---------- La carta de bebidas (Alfred, 15/11/2026): los vinos ----------
   Es la página bebidas.php, con la cabecera, la barra verde y las columnas de la carta de comida. Cada vino: nombre, línea de puntos y los precios de la copa y de la botella (cada uno con su nombre);
   debajo, en las mismas mayúsculas pequeñas de las unidades de la carta, su estilo y su origen («Seco · Rioja»), y su descripción. Los vinos no llevan alérgenos ni ventana: no se pulsan.
   Con pocos grupos las columnas se reparten solas (una o dos, centradas) en lugar de dejar huecos a la derecha. */
.vino .plato__cab { flex-wrap: wrap; row-gap: 0.1rem; }
.vino__precios { display: flex; flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; min-width: 0; gap: 0.1rem 1.1rem; margin-left: auto; white-space: nowrap; } /* si copa y botella no caben en la columna (tres columnas a 900 px, o precios largos), la botella pasa debajo de la copa en vez de empujar la columna */
.vino__precio { display: inline-flex; align-items: baseline; gap: 0.35rem; }
.vino__etq { color: var(--gris); font: 400 0.82rem/1 var(--titulares); letter-spacing: 0.08em; text-transform: uppercase; }
.vino__cifra { color: var(--verde); font: 400 1.5rem/1 var(--titulares); letter-spacing: 0.02em; }
.vino__marcas { display: flex; flex-wrap: wrap; margin-top: 0.3rem; color: var(--gris); font: 400 0.95rem/1.25 var(--titulares); letter-spacing: 0.08em; text-transform: uppercase; }
.vino__marcas span + span::before { content: "·" / ""; margin-inline: 0.55em; }
.carta-pag__rejilla--1 { max-width: 46rem; margin-inline: auto; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .carta-pag__rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 62rem; margin-inline: auto; } .carta-pag__rejilla--2 .carta-col:last-child { grid-column: auto; } }
@media (min-width: 56.25rem) { .carta-pag__rejilla--1 { grid-template-columns: minmax(0, 1fr); } }
.bebidas__vacio { max-width: 34rem; margin-inline: auto; padding: 1.2rem 1.4rem; border: 2px solid var(--negro); background: var(--papel); font-weight: 600; line-height: 1.4; text-align: center; }
/* La foto de un vino (15/11/2026): un vino con foto se toca y abre una ventana como la de un plato (js/bebidas.js): foto, nombre, «Tinto · Seco · Rioja», precios y descripción. Los precios y la ficha son los mismos
   elementos de la lista, sin el margen que los empuja a la derecha. */
.modal--vino .vino__marcas { margin-top: 0; }
.modal--vino .vino__precios { margin-left: 0; justify-content: flex-start; }
.modal--vino .vino__cifra { font-size: 1.7rem; }

/* ---------- Alérgenos de la carta (Alfred, 14/11): al tocar un plato sale una ventana con sus alérgenos y la carta se puede filtrar por alérgenos ----------
   js/carta.js lo activa (sin JavaScript la barra del filtro sigue oculta y cada plato enseña sus alérgenos en una línea, solo si los scripts están desactivados). Un plato cuyos alérgenos
   no ha confirmado el bar sale como «sin confirmar»: nunca se da por libre de nada. Las letras de cada alérgeno van en las mismas mayúsculas de los titulares de la web. */
.carta-filtro { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; padding-block: 1.5rem 0; }
.carta-filtro__abrir { margin: 0; }
.carta-filtro__estado { flex: 1 1 16rem; font-weight: 600; line-height: 1.35; }
.carta-filtro__estado:empty { display: none; }
.carta-filtro__quitar { padding: 0.5rem 0; border: 0; background: none; color: var(--verde); font: 800 0.95rem/1.2 var(--texto); letter-spacing: 0.03em; text-transform: uppercase; cursor: pointer; }
.carta-filtro__quitar:hover { color: var(--negro); }
/* En tableta (de 640 a 1023 px; Alfred, 15/11/2026, con captura) el botón «Filtrar por alérgenos» va a la DERECHA de su barra, con el resumen y «Quitar filtros» a su izquierda. En el móvil sigue a la izquierda
   y, desde 1024 px, el botón está en la barra verde del índice (también a la derecha). */
@media (min-width: 40rem) and (max-width: 63.9375rem) {
  .carta-filtro__estado { order: 1; }
  .carta-filtro__quitar { order: 2; }
  .carta-filtro__abrir { order: 3; margin-left: auto; }
}
/* En escritorio (Alfred, 14/11) el botón del filtro va en la barra verde del índice, a la derecha y en blanco; el que hay en la barra de debajo solo se usa en móvil y tableta, y la barra de debajo
   solo sale en escritorio cuando hay un filtro puesto (para el resumen y «Quitar filtros»). Desde 64 rem el índice y el botón caben a la vez (la barra no crece). */
.carta-indice__filtro { display: none; }
@media (min-width: 64rem) {
  .carta-indice__filtro { display: inline-flex; align-items: center; flex: none; min-height: 2.5rem; margin: 0; padding: 0.35rem 1.1rem; border: 2px solid var(--blanco); border-radius: 0; background: var(--blanco); color: var(--verde); font: 800 0.9rem/1.2 var(--texto); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
  .carta-indice__filtro:hover { background: transparent; color: var(--blanco); }
  .carta-indice__filtro:focus-visible { outline: 3px solid var(--blanco); outline-offset: 3px; }
  .carta-filtro__abrir { display: none; }
  .carta-filtro:not(.carta-filtro--activo) { display: none; }
}
.plato--abrible { cursor: pointer; }
.plato__abrir { display: inline; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.plato__fin { white-space: nowrap; }
.plato__i { display: inline-grid; place-items: center; width: 1.15em; height: 1.15em; margin-left: 0.4em; border: 2px solid var(--verde); border-radius: 50%; color: var(--verde); font: 400 0.7em/1 var(--titulares); vertical-align: 0.12em; }
.plato--abrible:hover .plato__i, .plato__abrir:focus-visible .plato__i { background: var(--verde); color: var(--blanco); }
.plato--sin-datos { margin: -0.5rem -0.6rem; padding: 0.5rem 0.6rem; background: rgb(191 178 154 / 0.22); } /* sin confirmar: un fondo suave, no una opacidad (bajaría el contraste del texto) */
.plato__sin-info, .plato__alergenos { margin-top: 0.3rem; color: var(--gris); font-size: 0.9rem; line-height: 1.35; }
.plato__sin-info { font-weight: 600; }
.plato__alergenos { display: none; }
@media (scripting: none) { .plato__alergenos { display: block; } }
.sin-dialogos .plato__alergenos { display: block; } /* navegador sin <dialog>: carta.js lo avisa y se enseña la línea de cada plato */

/* Las ventanas (<dialog>) */
html.modal-abierto { overflow: hidden; }
.modal { width: min(92vw, 32rem); max-width: none; max-height: min(88vh, 46rem); padding: 0; overflow: auto; border: 3px solid var(--negro); border-radius: 0; background: var(--crema); color: var(--negro); }
.modal::backdrop { background: rgb(0 0 0 / 0.66); }
.modal__interior { display: grid; gap: 1.1rem; padding: 1.1rem 1.25rem 1.4rem; }
.modal__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.modal__titulo { font: 400 clamp(1.7rem, 1.3rem + 1.6vw, 2.2rem)/1.05 var(--titulares); letter-spacing: 0.03em; text-transform: uppercase; overflow-wrap: anywhere; }
.modal__cerrar { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin: -0.25rem -0.4rem 0 0; padding: 0; border: 2px solid var(--negro); background: transparent; color: var(--negro); font: 400 1.7rem/1 var(--texto); cursor: pointer; }
.modal__cerrar:hover { background: var(--negro); color: var(--crema); }
.modal__estado { font-weight: 600; line-height: 1.4; }
/* La ventana de un plato: foto arriba (si la tiene), nombre, descripción corta y alérgenos. El botón de cerrar flota siempre a la vista, aunque la ventana haga scroll */
.modal--plato { max-height: none; overflow: hidden; }
.modal--plato .modal__scroll { max-height: min(88vh, 46rem); overflow: auto; overscroll-behavior: contain; }
.modal--plato .modal__scroll:focus-visible { outline: 3px solid var(--verde); outline-offset: -3px; }   /* la zona con scroll se puede alcanzar con el Tab para moverla con las flechas */
.modal__cerrar--flotante { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 3; margin: 0; background: var(--crema); }
.modal--plato .modal__titulo { padding-right: 3.3rem; }
.modal__foto { background: #e1cfbe; }
.modal__foto img { display: block; width: 100%; height: auto; max-height: min(46vh, 22rem); object-fit: cover; }
.modal__desc { line-height: 1.45; }
.alergenos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; margin: 0.7rem 0 0; padding: 0; list-style: none; }   /* en el móvil, uno debajo de otro (CRUSTÁCEOS no cabe en media ventana) */
@media (min-width: 30rem) { .alergenos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.alergeno, .traza { display: flex; align-items: center; gap: 0.6rem; min-width: 0; padding: 0.5rem 0.7rem; border: 2px solid var(--verde); background: var(--verde); color: var(--blanco); }
.alergeno__icono, .traza__icono { flex: none; width: 2.2rem; height: 2.2rem; }
.alergeno__nombre, .traza__nombre { min-width: 0; font: 400 1.1rem/1.1 var(--titulares); letter-spacing: 0.06em; text-transform: uppercase; }
.alergeno--coincide { border-color: #9b1c1c; background: #9b1c1c; }
/* las trazas en la ficha del plato: casillas con el borde a trazos (lo que el plato PUEDE llevar); en rojo, como los alérgenos, si es algo que se quiere evitar */
.modal__estado--trazas { margin-top: 1rem; }
.traza { border-style: dashed; background: transparent; color: var(--negro); }
.traza__icono { color: var(--verde); }
.traza.traza--coincide { border-color: #9b1c1c; border-style: solid; background: #9b1c1c; color: var(--blanco); }
.traza--coincide .traza__icono { color: var(--blanco); }
/* con un filtro puesto: el plato se enseña pero puede llevar trazas de lo que se evita, y lo dice en rojo */
.plato__trazas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.35rem; color: #9b1c1c; font-size: 0.92rem; font-weight: 700; line-height: 1.3; }
.plato__trazas-icono { flex: none; width: 1.3rem; height: 1.3rem; }
.filtro__grupo { min-width: 0; margin: 0; padding: 0; border: 0; }
.filtro__grupo legend { margin-bottom: 0.7rem; padding: 0; font-weight: 800; line-height: 1.3; }
.chips { display: grid; gap: 0.45rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chip { position: relative; display: block; cursor: pointer; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip__cuerpo { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; align-items: center; column-gap: 0.5rem; row-gap: 0.1rem; height: 100%; padding: 0.5rem 0.6rem; border: 2px solid var(--negro); background: var(--papel); }
.chip__icono { grid-row: 1 / span 2; width: 1.9rem; height: 1.9rem; }
.chip__nombre, .chip__detalle { grid-column: 2; }
.chip__nombre { font: 400 1.02rem/1.1 var(--titulares); letter-spacing: 0.05em; text-transform: uppercase; }
.chip__detalle { color: var(--gris); font-size: 0.74rem; line-height: 1.25; }
.chip input:checked + .chip__cuerpo { border-color: var(--verde); background: var(--verde); color: var(--blanco); }
.chip input:checked + .chip__cuerpo .chip__detalle { color: var(--blanco); }
.chip input:checked + .chip__cuerpo .chip__nombre::before { content: "✓ "; }
.chip input:focus-visible + .chip__cuerpo { outline: 3px solid var(--verde); outline-offset: 3px; }
.casilla-filtro { display: flex; align-items: flex-start; gap: 0.6rem; font-weight: 600; line-height: 1.35; cursor: pointer; }
.casilla-filtro input { flex: none; width: 1.4rem; height: 1.4rem; margin: 0.1rem 0 0; accent-color: var(--verde); }
.modal__botones { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 -1.25rem -1.4rem; padding: 0.8rem 1.25rem 1.1rem; border-top: 2px solid var(--negro); background: var(--crema); } /* siempre a la vista, aunque la lista de alérgenos haga scroll */
.modal__botones .boton { flex: 1 1 10rem; }