/*
 * Webs Express · diseño de las webs de bar y restaurante (móvil primero).
 *
 * Es el diseño de Lovable (alexpf988-hub/petit-mediterrani-starter, revisado el 22-09-2026)
 * convertido a CSS plano: sin Tailwind ni Node. Los colores y la letra de cada negocio entran
 * como variables (--color-*, --letra-*, --peso-titulos) desde la plantilla base; todo texto
 * sobre color usa parejas que se leen con contraste AA (muestras/estilo.py, TEXTO_SOBRE_FONDO).
 *
 * Letras libres (SIL Open Font License 1.1) servidas por la propia app, con su licencia al
 * lado (letras/<familia>/OFL.txt): la web no pide nada a terceros (ux-webs-restaurante Q4).
 * Iconos: Lucide (ISC), dentro de la plantilla (piezas/iconos.html).
 */

/* ------------------------------------------------------------------ letras */

@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("letras/fraunces/fraunces-latin-wght-normal.eb2486760f75.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("letras/manrope/manrope-latin-wght-normal.938c6e8019b6.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("letras/playfair-display/playfair-display-latin-wght-normal.ef05b30d6e5c.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("letras/source-sans-3/source-sans-3-latin-wght-normal.30164609c163.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("letras/lora/lora-latin-wght-normal.9577af3ccda5.woff2") format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 200 1000; font-display: swap; src: url("letras/nunito-sans/nunito-sans-latin-wght-normal.e010923d59d4.woff2") format("woff2"); }
@font-face { font-family: "DM Serif Display"; font-style: normal; font-weight: 400; font-display: swap; src: url("letras/dm-serif-display/dm-serif-display-latin-400-normal.c27d5a47c09e.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 100 1000; font-display: swap; src: url("letras/dm-sans/dm-sans-latin-wght-normal.7c87a648293f.woff2") format("woff2"); }
@font-face { font-family: "Alegreya"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("letras/alegreya/alegreya-latin-wght-normal.97a4bfd7b3ce.woff2") format("woff2"); }
@font-face { font-family: "Alegreya Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("letras/alegreya-sans/alegreya-sans-latin-400-normal.dec96422d9be.woff2") format("woff2"); }
@font-face { font-family: "Alegreya Sans"; font-style: normal; font-weight: 700 900; font-display: swap; src: url("letras/alegreya-sans/alegreya-sans-latin-700-normal.c198fa600447.woff2") format("woff2"); }

/* ------------------------------------------------------------------ base */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, p, blockquote, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
body {
  min-height: 100vh;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--letra-texto);
  font-size: 1rem;
  line-height: 1.55;
  overflow-wrap: break-word;
}
h1, h2, h3, .pie-nombre, .tarjeta-carta strong, .direccion p, .carta-precio-unico strong {
  font-family: var(--letra-titulos);
  font-weight: var(--peso-titulos);
  font-synthesis: none;
  letter-spacing: 0;
}
:focus-visible { outline: 3px solid var(--color-acento); outline-offset: 2px; }
.iconos { position: absolute; width: 0; height: 0; overflow: hidden; }
.icono { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icono-grande { width: 1.75rem; height: 1.75rem; }
[id] { scroll-margin-top: 1rem; }

/* ------------------------------------------------------------------ botones (≥ 48 px, 8 px entre ellos) */

.boton {
  min-height: 3rem;
  border: 1px solid transparent;
  border-radius: .35rem;
  padding: .75rem 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
.boton-principal { background: var(--color-principal); color: var(--color-fondo); border-color: var(--color-principal); }
.boton-secundario { background: transparent; color: inherit; border-color: currentColor; }
.boton-claro { background: var(--color-fondo); color: var(--color-principal); }
.enlace-texto { min-height: 3rem; display: inline-flex; align-items: center; color: var(--color-principal); font-weight: 800; font-size: .9rem; text-decoration: none; }

/* «Reservar»: un <details> que abre llamar / WhatsApp (sin JavaScript) */
.reservar { position: relative; width: max-content; }
.reservar > summary { list-style: none; min-width: 8rem; }
.reservar > summary::-webkit-details-marker { display: none; }
.reservar[open] > summary .icono { transform: rotate(180deg); }
.reservar-menu {
  position: absolute; left: 0; bottom: calc(100% + .5rem); z-index: 5;
  width: 100%; min-width: 11rem; overflow: hidden;
  background: var(--color-fondo); color: var(--color-texto);
  border: 1px solid color-mix(in oklab, var(--color-texto) 18%, transparent);
  border-radius: .35rem;
  box-shadow: 0 12px 28px color-mix(in oklab, var(--color-texto) 18%, transparent);
}
.reservar-menu a { min-height: 3rem; display: flex; align-items: center; gap: .65rem; padding: .75rem 1rem; text-decoration: none; font-weight: 700; }
.reservar-menu a + a { border-top: 1px solid color-mix(in oklab, var(--color-texto) 12%, transparent); }

/* ------------------------------------------------------------------ cabecera */

.cabecera { position: relative; display: flex; color: var(--color-fondo); background: var(--color-texto); overflow: hidden; }
.cabecera-foto { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.cabecera-velo { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in oklab, var(--color-texto) 45%, transparent), color-mix(in oklab, var(--color-texto) 82%, transparent)); }
.cabecera-contenido { position: relative; z-index: 1; width: 100%; max-width: 72rem; margin: 0 auto; padding: 3rem 1.25rem 2.5rem; display: flex; flex-direction: column; }
.cabecera-principal { margin-top: auto; max-width: 48rem; }
.tipo { font-size: .8rem; font-weight: 700; text-transform: uppercase; line-height: 1.5; margin-bottom: .75rem; }
.cabecera h1 { font-size: clamp(2.5rem, 11vw, 5.4rem); line-height: 1; max-width: 14ch; }
.datos { display: flex; flex-wrap: wrap; gap: .65rem 1.3rem; margin: 1.25rem 0 1.5rem; font-weight: 700; }
.acciones { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .5rem; max-width: 25rem; }

/* ------------------------------------------------------------------ secciones */

.seccion { max-width: 72rem; margin: 0 auto; padding: 4rem 1.25rem; }
.seccion-titulo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .5rem 1rem; margin-bottom: 1.5rem; }
.antetitulo { color: var(--color-acento); font-weight: 800; text-transform: uppercase; font-size: .78rem; }
.seccion h2, .titulo-fotos h2 { font-size: 2.25rem; line-height: 1.05; }

/* Nuestras cartas: una tarjeta grande por carta, que se pulsa entera */
.seccion-cartas .seccion-titulo { grid-template-columns: minmax(0, 1fr); }
.marca-ejemplo { display: flex; flex-wrap: wrap; gap: .1rem .5rem; justify-self: start; width: max-content; max-width: 100%; padding: .35rem .6rem; border: 1px solid var(--color-acento); color: var(--color-acento); font-size: .78rem; line-height: 1.4; }
.marca-ejemplo strong { text-transform: uppercase; font-weight: 800; }
.tarjetas-cartas { display: grid; gap: .75rem; }
.tarjeta-carta {
  min-height: 6.5rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem;
  padding: 1.25rem; border: 1px solid color-mix(in oklab, var(--color-texto) 16%, transparent);
  background: var(--color-suave); color: var(--color-texto); text-decoration: none;
}
.tarjeta-carta > span { min-width: 0; display: grid; gap: .25rem; }
.tarjeta-carta strong { font-size: 1.45rem; }
.tarjeta-carta small { color: var(--color-tenue); font-size: .9rem; line-height: 1.4; }
.tarjeta-carta .icono { color: var(--color-acento); }

/* Fotos del local: galería que se desliza */
.banda-fotos { background: var(--color-principal); color: var(--color-fondo); padding-bottom: 3rem; overflow: hidden; }
.titulo-fotos { padding-bottom: 1.4rem; display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.titulo-fotos span { font-size: .85rem; font-weight: 700; }
.galeria { display: flex; gap: .8rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 1.25rem 1rem; scrollbar-width: thin; }
.galeria img { flex: 0 0 82%; max-width: 30rem; aspect-ratio: 4 / 3; object-fit: cover; scroll-snap-align: start; border-radius: .25rem; }

/* Reseñas */
.resenas { display: grid; gap: 1rem; }
.resena { padding: 1.4rem 0; border-top: 1px solid color-mix(in oklab, var(--color-texto) 18%, transparent); }
.resena-datos { display: flex; justify-content: space-between; gap: 1rem; }
.resena-datos span { font-size: .85rem; color: var(--color-tenue); }
.estrellas { color: var(--color-acento); margin: .6rem 0; }
.resena blockquote { line-height: 1.7; }

/* Nuestra historia */
.banda-historia { background: var(--color-suave); }
.historia { display: grid; gap: 2rem; align-items: center; }
.historia img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: .25rem; }
.historia h2 { margin-top: .25rem; }
.historia p { font-size: 1.12rem; line-height: 1.75; margin-top: 1rem; max-width: 39rem; }

/* Horario y dirección */
.horario-y-direccion { display: grid; gap: 2.5rem; margin-top: 1.5rem; }
.dia { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem; border-bottom: 1px solid color-mix(in oklab, var(--color-texto) 15%, transparent); }
.dia.hoy { background: var(--color-suave); border-left: 4px solid var(--color-secundario); }
.dia em { font-style: normal; font-size: .75rem; font-weight: 700; text-transform: uppercase; background: var(--color-principal); color: var(--color-fondo); padding: .15rem .4rem; margin-left: .5rem; }
.direccion { padding: 1.5rem; background: var(--color-principal); color: var(--color-fondo); align-self: start; }
.direccion p { font-size: 1.4rem; line-height: 1.4; margin: 1rem 0 1.5rem; }

/* Pie (la barra fija del móvil no tapa el final: hueco abajo) */
.pie { background: var(--color-texto); color: var(--color-fondo); }
.pie-rejilla { display: grid; gap: 1.5rem; padding-top: 3rem; padding-bottom: 7rem; }
.pie-nombre { font-size: 1.5rem; }
.pie p { font-size: .9rem; line-height: 1.6; margin: .6rem 0; }
.pie a { display: inline-flex; min-height: 3rem; align-items: center; }

/* Barra fija abajo en el móvil: «Ver la carta» y un botón pequeño de llamar */
.barra-movil {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem;
  padding: .65rem max(1rem, env(safe-area-inset-right)) calc(.65rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  background: color-mix(in oklab, var(--color-fondo) 94%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid color-mix(in oklab, var(--color-texto) 12%, transparent);
}
.boton-llamar { min-width: 3rem; padding: .75rem; color: var(--color-principal); border-color: var(--color-principal); background: var(--color-fondo); }

/* ------------------------------------------------------------------ la carta «clásica» */

.pagina-carta { padding-bottom: 6rem; }
.carta-barra { position: sticky; top: 0; z-index: 20; background: color-mix(in oklab, var(--color-fondo) 96%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid color-mix(in oklab, var(--color-texto) 13%, transparent); }
.carta-barra-fila { max-width: 48rem; margin: auto; padding: .25rem .6rem 0; }
.volver { min-height: 3rem; display: inline-flex; align-items: center; gap: .4rem; padding: 0 .6rem; color: var(--color-principal); font-weight: 800; text-decoration: none; }
.otras-cartas { display: flex; gap: .5rem; overflow-x: auto; max-width: 48rem; margin: auto; padding: 0 .9rem; scrollbar-width: thin; }
.salto { min-height: 3rem; display: inline-flex; align-items: center; padding: .6rem .65rem; border-bottom: 3px solid transparent; color: var(--color-tenue); font-weight: 700; font-size: .9rem; text-decoration: none; white-space: nowrap; }
.salto.activa { color: var(--color-principal); border-color: var(--color-principal); }

.carta { max-width: 46rem; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }
.carta > .marca-ejemplo, .carta > [lang] > .marca-ejemplo { margin: 0 auto 1.5rem; justify-content: center; text-align: center; }
.carta-negocio { color: var(--color-principal); text-align: center; font-size: .8rem; font-weight: 800; text-transform: uppercase; }
.carta > h1 { margin-top: .35rem; text-align: center; font-size: 3rem; line-height: 1; }
.carta-resumen { margin: .75rem auto 0; max-width: 32rem; text-align: center; color: var(--color-tenue); }
.carta-precio-unico { display: flex; align-items: baseline; justify-content: center; gap: .7rem; margin: 1.5rem auto 0; color: var(--color-acento); }
.carta-precio-unico span { font-size: .8rem; font-weight: 800; text-transform: uppercase; }
.carta-precio-unico strong { font-size: 2rem; }
.carta-secciones { margin-top: 2.5rem; }
.carta-seccion + .carta-seccion { margin-top: 3.5rem; }
.adorno { display: flex; align-items: center; gap: .6rem; color: var(--color-secundario); }
.adorno::before, .adorno::after { content: ""; height: 1px; flex: 1; background: color-mix(in oklab, var(--color-texto) 20%, transparent); }
.adorno span { font-size: .5rem; }
.carta-seccion > h2 { margin: .75rem 0 1rem; text-align: center; color: var(--color-principal); font-size: 2rem; }
.plato { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; padding: .9rem 0; border-bottom: 1px dotted color-mix(in oklab, var(--color-texto) 25%, transparent); }
.plato h3 { font-family: var(--letra-texto); font-size: 1rem; font-weight: 800; }
.plato p { margin-top: .25rem; color: var(--color-tenue); font-size: .9rem; line-height: 1.45; }
.plato .precio { color: var(--color-principal); font-variant-numeric: tabular-nums; }

/* Varios precios por plato (unidad 011, R5). Con 2 o 3 columnas de precio, sus nombres van
   arriba de la sección y cada precio, alineado debajo de su columna, como en la carta de papel
   (G-31, Q3). Cada precio lleva su nombre en `.nombre-columna`, oculto a la vista pero leído
   por el lector de pantalla (técnica de WebAIM): «Media ración 9,00». Si no caben (un móvil de
   320 px o la letra ampliada al 200 %), los precios bajan debajo del plato con su nombre a la
   vista y sin desplazarse de lado (WCAG 2.2, 1.4.10): la sección es un contenedor y se pregunta
   su ancho en «em», que crece con la letra (consultas de contenedor, en todos los navegadores
   desde 2023). */
.nombre-columna {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.con-columnas { container-type: inline-size; --ancho-precio: 4rem; }
.con-columnas .plato { gap: .75rem; }
.cabecera-columnas {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .75rem;
  padding-bottom: .35rem; border-bottom: 1px solid color-mix(in oklab, var(--color-texto) 25%, transparent);
  color: var(--color-principal); font-size: .75rem; font-weight: 800; line-height: 1.25;
}
.cabecera-columnas .precios { grid-column: 2; }
.con-columnas .precios { display: grid; grid-auto-flow: column; grid-auto-columns: var(--ancho-precio); column-gap: .5rem; text-align: right; }
.con-columnas .plato .precios { align-self: start; margin: 0; color: inherit; font-size: 1rem; line-height: 1.55; }
.cabecera-columnas .precios span { align-self: end; overflow-wrap: anywhere; hyphens: auto; }

@container (width < 21em) {
  .columnas-3 .cabecera-columnas { display: none; }
  .columnas-3 .plato { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
  .columnas-3 .plato .precios { display: flex; flex-wrap: wrap; gap: .1rem .5rem; text-align: left; }
  .columnas-3 .precio:empty { display: none; }
  .columnas-3 .nombre-columna { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; color: var(--color-tenue); font-weight: 700; }
  .columnas-3 strong.precio ~ strong.precio::before { content: "· "; content: "· " / ""; color: var(--color-tenue); }
}
@container (width < 16em) {
  .columnas-2 .cabecera-columnas { display: none; }
  .columnas-2 .plato { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
  .columnas-2 .plato .precios { display: flex; flex-wrap: wrap; gap: .1rem .5rem; text-align: left; }
  .columnas-2 .precio:empty { display: none; }
  .columnas-2 .nombre-columna { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; color: var(--color-tenue); font-weight: 700; }
  .columnas-2 strong.precio ~ strong.precio::before { content: "· "; content: "· " / ""; color: var(--color-tenue); }
}
.alergenos { display: flex; flex-wrap: wrap; gap: .35rem .8rem; margin-top: .45rem; color: var(--color-acento); }
.alergeno { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; font-weight: 700; }
.alergeno .icono, .leyenda .icono { width: 1rem; height: 1rem; }
.carta-nota { margin-top: 2rem; text-align: center; font-weight: 700; }
.leyenda { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 2px solid var(--color-principal); }
.leyenda h2 { font-size: 1.35rem; }
/* Desde la 024 (R7, el boceto 2.3): cada alérgeno en su línea, con su nombre corto en negrita y
   el oficial del anexo II del Reglamento 1169/2011, como en el papel. */
.leyenda ul { display: flex; flex-direction: column; gap: .55rem; margin-top: .85rem; }
.leyenda li { display: inline-flex; align-items: flex-start; gap: .35rem; font-size: .9rem; line-height: 1.45; color: var(--color-texto); }
.leyenda li .icono { flex: none; margin-top: .2rem; color: var(--color-acento); }
.notas-de-la-carta { margin-top: 2rem; color: var(--color-tenue); text-align: center; font-size: .9rem; line-height: 1.7; }
.barra-movil-carta { grid-template-columns: 1fr; }
.reservar-compacta, .reservar-compacta > summary, .reservar-compacta .reservar-menu { width: 100%; }
.reservar-compacta > summary, .reservar-directo.reservar-compacta { background: var(--color-principal); color: var(--color-fondo); border-color: var(--color-principal); }

/* ------------------------------------------------------------------ aviso legal */

.legal { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1.25rem; }
.legal > div { max-width: 44rem; }
.legal h1 { font-size: clamp(2.25rem, 8vw, 4rem); line-height: 1.05; margin: .5rem 0 1.5rem; }
.legal h2 { font-size: 1.5rem; margin: 2rem 0 .75rem; }
.legal p { line-height: 1.8; margin-bottom: 1rem; }
.legal .boton { margin-top: 1rem; }

/* ------------------------------------------------------------------ web de muestra (012) */

/* La etiqueta de muestra (muestra.css) va fija arriba y mide 3 rem: se le deja su hueco para que
   no tape nada de la web (el nombre, «Volver», los botones), tampoco al saltar a una sección. */
.con-etiqueta { padding-top: 3rem; }
.con-etiqueta .carta-barra { top: 3rem; }
.con-etiqueta [id] { scroll-margin-top: 4rem; }
.con-etiqueta .legal { min-height: calc(100vh - 3rem); }

/* ------------------------------------------------------------------ portada en el móvil (016) */

/* Solo por debajo de 640 px: en el ordenador nada cambia. La portada llena la primera pantalla
   (antes, el 82 %): `svh` es la altura que se ve con las barras del navegador a la vista, y
   `vh` va antes para quien no lo sepa; con la etiqueta de muestra, sus 3 rem de menos. Si el
   texto no cabe, crece. «Ver la carta» y el secundario van al pie, uno encima del otro y a todo
   el ancho: al alcance del pulgar (Hoober, ux-webs-restaurante Q2).
   La barra fija de abajo la esconde portada.js mientras esos dos botones se ven (`data-oculta`):
   sale por abajo, no se ve y no se toca; sin el script, se ve siempre. El movimiento se quita
   con `prefers-reduced-motion` (regla general del final). */
@media (max-width: 639.98px) {
  .cabecera { min-height: 100vh; min-height: 100svh; }
  .con-etiqueta .cabecera { min-height: calc(100vh - 3rem); min-height: calc(100svh - 3rem); }
  .cabecera-contenido { padding-bottom: 1.25rem; }
  .acciones { grid-template-columns: minmax(0, 1fr); max-width: none; }
  .acciones .reservar, .acciones .reservar > summary { width: 100%; }
  .barra-movil[data-animada] { transition: transform .2s ease-out, visibility .2s; }
  .barra-movil[data-oculta] { transform: translateY(100%); visibility: hidden; pointer-events: none; }
}

/* Sin JavaScript, la barra fija se ve siempre: la portada le deja abajo su hueco (lo que mide:
   3 rem del botón, .65 rem arriba y abajo, 1 px de borde y la zona segura) para que no tape el
   secundario al abrir. `scripting: none`, en todos los navegadores desde diciembre de 2023
   (MDN, consultado el 26-09-2026); uno más antiguo, o un script que no carga con JavaScript
   encendido, la ven como antes. */
@media (max-width: 639.98px) and (scripting: none) {
  .cabecera-contenido { padding-bottom: calc(1.25rem + 4.3rem + 1px + env(safe-area-inset-bottom)); }
}

/* ------------------------------------------------------------------ ordenador */

@media (min-width: 640px) {
  .barra-movil { display: none; }
  .pagina-carta { padding-bottom: 0; }
  .cabecera { min-height: 44rem; }
  .cabecera-contenido { padding: 4.5rem 2rem 5rem; }
  .seccion { padding: 6rem 2rem; }
  .seccion h2, .titulo-fotos h2 { font-size: 3.5rem; }
  .tarjetas-cartas { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
  .tarjeta-carta { min-height: 9rem; }
  .galeria { padding: 0 max(2rem, calc((100% - 72rem) / 2 + 2rem)) 1rem; }
  .galeria img { flex-basis: 30rem; }
  .resenas { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
  .historia, .horario-y-direccion { grid-template-columns: 1.05fr .95fr; gap: 4rem; }
  .pie-rejilla { grid-template-columns: 1fr 1fr; padding-bottom: 3rem; }
  .carta { padding-top: 4rem; padding-bottom: 6rem; }
  .carta > h1 { font-size: 4.5rem; }
  .carta-seccion { padding-inline: 2rem; }
}

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

/* ------------------------------------------------------------------ el selector de idioma (027) */

/* «Castellano · Català · English» (R4; boceto 1.1, 1.3, 1.4 y 1.7, `propuesta-web-e4.css`): cada
   idioma con su nombre en su idioma y sin banderas (W3C, «Authoring web pages»; NN/g, «Language
   Switchers», 2022); a la vista arriba (NN/g); cada uno de 44 px de alto (WCAG 2.2, 2.5.8). El de
   ahora, en negrita con subrayado grueso y sin enlace. Va al final: así lo pintó el boceto. */
.idiomas { display: flex; align-items: center; flex-wrap: wrap; gap: 0 .1rem; font-size: .95rem; font-weight: 700; }
.idiomas a, .idioma-actual { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .3rem; }
.idiomas a { color: inherit; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.idioma-actual { box-shadow: inset 0 -3px 0 currentColor; }
.idiomas .punto { opacity: .6; }
.carta-barra-fila { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.carta-barra .idiomas { color: var(--color-principal); }
.carta-barra .idioma-actual { color: var(--color-texto); }
.idiomas-cabecera { align-self: flex-end; margin: -2rem -.3rem 1.2rem 0; color: var(--color-fondo); }
.idiomas-pie { grid-column: 1 / -1; margin-left: -.3rem; color: var(--color-fondo); }