@font-face { font-family: "Cinzel"; src: url("../fonts/cinzel-latin-600-800.woff2") format("woff2"); font-weight: 600 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Baskerville"; src: url("../fonts/libre-baskerville-latin-400-700.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/source-sans-3-latin-400-700.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  /* La web ya tiene su propio tema oscuro: así el «tema oscuro para webs» de Chrome en Android no la oscurece encima (oscurecía el logo del grupo) */
  color-scheme: light dark;
  --color-fondo: #F6F0E3;
  --color-superficie: #FFFDF7;
  --color-texto: #241A14;
  --color-texto-suave: #5A4A3F;
  --color-primario: #8E1219;
  --color-primario-oscuro: #6E0B12;
  --color-primario-luz: #C1161F;
  --color-secundario: #134A2F;
  --color-oro: #C9A85C;
  --color-oro-texto: #8A6A22;
  --color-letra-oro: #E0C78C;
  --color-borde: #E2D6BF;
  --color-madera: #3A2416;
  --color-madera-oscura: #24130A;
  --fuente-titulos: "Cinzel", "Times New Roman", serif;
  --fuente-acento: "Libre Baskerville", Georgia, serif;
  --fuente-texto: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radio: 6px;

  /* Derivados de los tokens: no cambian con el modo oscuro (rótulo, chapa y bandas son siempre iguales) */
  --crema-fija: #F6F0E3;
  --rotulo-rojo: #8E1219;
  --rotulo-rojo-luz: #C1161F;
  --rotulo-rojo-oscuro: #6E0B12;
  --chapa-texto: #241A14;
  --color-secundario-texto: #134A2F;
  --color-rojo-texto: #8E1219;
  --color-boton: #8E1219;
  --color-boton-hover: #6E0B12;
  --color-banda-verde: #2B4436;
  --color-precio: #8E1219;
  --color-hoy: #EFE2C0;
  --color-cabecera: #F6F0E3;
  --color-pie: #24130A;
  --color-velo: rgba(36, 19, 10, .82);

  --ancho: 72rem;
  --alto-cabecera: 64px;
  --alto-barra: 62px;

  --foco-barra: 50% 40%;
  --foco-barra-movil: 50% 50%;
  --foco-rotulo: 50% 50%;
  --foco-terraza: 50% 55%;
  --foco-sala: 50% 50%;
  --foco-tartas: 50% 50%;
  --foco-pared: 50% 50%;
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-fondo: #17100C;
    --color-superficie: #221812;
    --color-texto: #F4EEDB;
    --color-texto-suave: #CDBFA5;
    --color-primario: #A3141D;
    --color-primario-luz: #E0464D;
    --color-secundario: #1C5C3B;
    --color-oro-texto: #E0C78C;
    --color-borde: #3A2A20;
    --color-secundario-texto: #8FD3AB;
    --color-rojo-texto: #F07C82;
    --color-boton: #A3141D;
    --color-boton-hover: #C1161F;
    --color-banda-verde: #2D4A3A;
    --color-precio: #E0C78C;
    --color-hoy: #33241A;
    --color-cabecera: #3A2416;
    --color-pie: #130A05;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--alto-cabecera) + .75rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--color-fondo); color: var(--color-texto); font: 400 18px/1.6 var(--fuente-texto); }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0 0 .6em; font-family: var(--fuente-titulos); font-weight: 700; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; text-wrap: balance; }
h1 { font-size: clamp(1.55rem, 5.2vw + .2rem, 2.75rem); }
h2 { font-size: clamp(1.35rem, 3.4vw + .4rem, 2rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
a { color: var(--color-rojo-texto); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; transition: text-decoration-color .2s, text-decoration-thickness .2s; }
a:hover { text-decoration-color: var(--color-oro); text-decoration-thickness: 3px; }
/* Zona pulsable mínima de 44 x 44 px sin cambiar el aspecto */
a:not(.btn):not(.saltar):not(.chip):not(.grupo__enlace) { position: relative; }
a:not(.btn):not(.saltar):not(.chip):not(.grupo__enlace)::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(calc(100% + .5rem), 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
:focus-visible { outline: 3px solid var(--color-oro); outline-offset: 2px; box-shadow: 0 0 0 2px var(--color-texto); border-radius: 2px; }
.icono { width: 24px; height: 24px; flex: none; }
.solo-lectores { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.contenedor { width: min(100% - 2rem, var(--ancho)); margin-inline: auto; }
.prosa { max-width: 46rem; }
.saltar { position: absolute; left: .5rem; top: -4rem; z-index: 100; padding: .7rem 1rem; background: var(--color-primario-oscuro); color: var(--crema-fija); border-radius: var(--radio); }
.saltar:focus { top: .5rem; }
.sin-js-oculto { display: none; }
main { display: block; }
[hidden] { display: none !important; }

/* ---------- Cabecera ---------- */
.cabecera { position: sticky; top: 0; z-index: 50; background: var(--color-cabecera); border-bottom: 2px solid var(--color-oro); }
.cabecera__in { display: flex; align-items: center; gap: 1rem; min-height: var(--alto-cabecera); width: min(100% - 2rem, var(--ancho)); margin-inline: auto; }
.logo { display: flex; align-items: center; flex: none; min-height: 44px; line-height: 0; border-radius: 3px; }
.logo img { height: 36px; width: auto; }
.nav { display: none; }
.nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.nav li a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .25rem; font: 600 .9rem/1 var(--fuente-titulos); letter-spacing: .06em; text-transform: uppercase; color: var(--color-texto); text-decoration: none; border-bottom: 3px solid transparent; transition: border-color .2s; }
.nav li a:hover, .nav li a[aria-current="page"] { border-bottom-color: var(--color-oro); }
.cabecera .cabecera__llamar { display: none; }
.menu-btn { display: none; margin-left: auto; width: 44px; height: 44px; padding: 0; align-items: center; justify-content: center; border: 2px solid var(--color-oro); border-radius: var(--radio); background: transparent; color: var(--color-texto); cursor: pointer; }
/* Cambio de idioma en móvil: botón «EN» en las páginas en español y «ES» en las páginas en inglés, junto al menú */
.idioma { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 .5rem; border: 2px solid var(--color-oro); border-radius: var(--radio); color: var(--color-texto); font: 700 .85rem/1 var(--fuente-titulos); letter-spacing: .08em; text-decoration: none; transition: border-color .2s; }
.idioma:hover { border-color: var(--color-texto); }
.idioma + .menu-btn { margin-left: -.5rem; }
.idioma, .menu-btn { flex: none; }
/* En móviles de menos de 400 px el logo se encoge para que quepan los botones de idioma y de menú */
@media (max-width: 399px) {
  .cabecera__in { gap: .5rem; }
  .idioma + .menu-btn { margin-left: 0; }
  .logo { flex: 0 1 auto; min-width: 0; }
  .logo picture { display: block; min-width: 0; }
  .logo img { width: 100%; height: auto; max-height: 36px; }
}
.menu-btn .icono-cerrar { display: none; }
.menu-btn[aria-expanded="true"] .icono-menu { display: none; }
.menu-btn[aria-expanded="true"] .icono-cerrar { display: block; }
.nav__movil { display: none; }
/* Fila «Español · English» al final del menú desplegado y conmutador «ES · EN» de escritorio: el idioma actual no es enlace */
.idiomas, .nav__idiomas { display: none; }
.idiomas a, .nav__idiomas a, .idiomas__actual { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .25rem; color: var(--color-texto); text-decoration: none; border-bottom: 3px solid transparent; transition: border-color .2s; }
.idiomas a:hover, .nav__idiomas a:hover { border-bottom-color: var(--color-oro); }
.idiomas__actual { color: var(--color-rojo-texto); border-bottom-color: var(--color-oro); }
.idiomas__punto { padding: 0 .35rem; color: var(--color-texto-suave); }
.js .nav .nav__idiomas { display: flex; align-items: center; justify-content: center; margin: .75rem 0 0; font: 600 .95rem/1 var(--fuente-titulos); letter-spacing: .06em; text-transform: uppercase; }
.js .menu-btn { display: inline-flex; }
.js .nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--color-cabecera); border-bottom: 2px solid var(--color-oro); padding: .5rem 1rem 1rem; }
.js .nav.abierto { display: block; }
.js .nav ul { flex-direction: column; gap: 0; }
.js .nav li { border-bottom: 1px solid var(--color-borde); }
.js .nav li a { display: flex; min-height: 52px; font-size: 1rem; border-bottom: 0; }
.js .nav .nav__movil { display: flex; flex-wrap: wrap; gap: .6rem; padding-top: 1rem; }
.js .nav .nav__movil .btn { flex: 1 1 8rem; }
@media (max-width: 51.99rem) { html.menu-abierto, html.menu-abierto body { overflow: hidden; } }
.menu-fondo { position: fixed; z-index: 45; left: 0; right: 0; top: calc(var(--alto-cabecera) + 2px); bottom: calc(var(--alto-barra) + env(safe-area-inset-bottom)); background: rgba(0, 0, 0, .55); opacity: 0; transition: opacity .2s ease; }
.menu-fondo.visible { opacity: 1; }
.menu-fondo[hidden] { display: none; }
@media (min-width: 52rem) {
  :root { --alto-cabecera: 72px; }
  .nav__cookies, .nav__inicio { display: none; }
  .menu-fondo { display: none; }
  .logo img { height: 44px; }
  .cabecera .cabecera__llamar { display: inline-flex; }
  .js .menu-btn { display: none; }
  .nav, .js .nav { display: block; position: static; margin-left: auto; padding: 0; border: 0; background: none; }
  .nav ul, .js .nav ul { flex-direction: row; gap: .25rem 1.25rem; }
  .js .nav li { border: 0; }
  .js .nav li a { display: inline-flex; min-height: 44px; font-size: .9rem; border-bottom: 3px solid transparent; }
  .js .nav li a:hover, .js .nav li a[aria-current="page"] { border-bottom-color: var(--color-oro); }
  .js .nav .nav__movil, .js .nav .nav__idiomas { display: none; }
  .nav ul, .js .nav ul { flex-wrap: nowrap; }
}
/* Desde 1120 px el botón de idioma se cambia por el conmutador de texto «ES · EN», entre el menú y el botón de llamar.
   Por debajo (832 a 1119 px, con el menú en línea) no cabe sin apretar el menú y se queda el botón de móvil. */
@media (min-width: 70rem) {
  .idioma { display: none; }
  .idiomas { display: flex; align-items: center; font: 600 .9rem/1 var(--fuente-titulos); letter-spacing: .06em; text-transform: uppercase; }
  .idiomas::before { content: ""; width: 1px; height: 1.4rem; margin-right: .9rem; background: var(--color-oro); }
}
@media (min-width: 52rem) and (max-width: 69.99rem) { .idioma { order: 2; margin-left: 0; } .cabecera .cabecera__llamar { order: 3; } }
/* Entre 832 y 1023 px la navegación en línea se ajusta para quedar siempre en una sola línea */
@media (min-width: 52rem) and (max-width: 63.99rem) {
  .cabecera__in { gap: .75rem; }
  .logo img { height: 36px; }
  .nav ul, .js .nav ul { gap: .25rem .9rem; }
  .nav li a, .js .nav li a { font-size: .8125rem; letter-spacing: .03em; }
  .cabecera .cabecera__llamar { padding-inline: .9rem; }
}

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: .55rem 1.2rem; border: 2px solid transparent; border-radius: var(--radio); font: 700 1rem/1.2 var(--fuente-texto); text-align: center; text-decoration: none; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.btn .icono { width: 22px; height: 22px; }
.btn:hover { text-decoration: none; }
.btn--primario { background: var(--color-boton); border-color: var(--color-boton); color: var(--crema-fija); }
.btn--primario:hover { background: var(--color-boton-hover); border-color: var(--color-boton-hover); }
.btn--secundario { border-color: var(--color-secundario-texto); color: var(--color-secundario-texto); background: transparent; }
.btn--secundario:hover { background: var(--color-secundario-texto); color: var(--color-fondo); }
.btn--claro { background: var(--crema-fija); border-color: var(--crema-fija); color: var(--rotulo-rojo-oscuro); }
.btn--claro:hover { background: var(--color-letra-oro); border-color: var(--color-letra-oro); }
.btn--contorno-claro { border-color: var(--crema-fija); color: var(--crema-fija); background: transparent; }
.btn--contorno-claro:hover { background: var(--crema-fija); color: var(--rotulo-rojo-oscuro); }
.btn--neutro { border-color: var(--color-oro-texto); color: var(--color-texto); background: var(--color-superficie); }
.btn--neutro:hover { background: var(--color-hoy); }
.btn-grupo { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ---------- Marca: cartela, óvalo, filetes, bandas ---------- */
.cartela { --cap: clamp(1.1rem, 5vw, 2.4rem); --paso: .5rem; position: relative; z-index: 0; margin-inline: var(--cap); padding: 1.25rem 1rem; border-block: 2px solid var(--color-oro); background: radial-gradient(ellipse at 52% 30%, var(--rotulo-rojo-luz), var(--rotulo-rojo) 55%, var(--rotulo-rojo-oscuro)); color: var(--crema-fija); }
.cartela::before, .cartela::after { content: ""; position: absolute; z-index: -1; top: calc(-1 * var(--paso) - 2px); bottom: calc(-1 * var(--paso) - 2px); width: var(--cap); background-color: var(--rotulo-rojo-oscuro); border: 2px solid var(--color-oro); }
.cartela::before { right: 100%; border-right: 0; border-radius: 100% 0 0 100% / 50% 0 0 50%; background-image: linear-gradient(var(--color-oro), var(--color-oro)), linear-gradient(var(--color-oro), var(--color-oro)); background-repeat: no-repeat; background-size: 2px calc(var(--paso) + 2px); background-position: right top, right bottom; }
.cartela::after { left: 100%; border-left: 0; border-radius: 0 100% 100% 0 / 0 50% 50% 0; background-image: linear-gradient(var(--color-oro), var(--color-oro)), linear-gradient(var(--color-oro), var(--color-oro)); background-repeat: no-repeat; background-size: 2px calc(var(--paso) + 2px); background-position: left top, left bottom; }
.cartela h1, .cartela h2 { color: var(--color-letra-oro); margin-bottom: .4em; }
.cartela p:last-child { margin-bottom: 0; }
.cartela--titulo { text-align: center; padding-block: 1rem; }
.cartela--titulo h1 { margin: 0; }
.cartela--titulo p { margin: .35rem 0 0; font-size: 1rem; }
.ovalo { display: inline-block; padding: .15rem .95rem; border: 2px solid var(--color-oro); border-radius: 999px; background: radial-gradient(ellipse at 50% 40%, #FFFCF2, #ECE3C8); color: var(--chapa-texto); font: 700 .78rem/1.5 var(--fuente-acento); letter-spacing: .08em; text-transform: uppercase; }
.filete { height: 0; margin: 0; border: 0; border-top: 2px solid var(--color-oro); }
.banda { padding-block: clamp(2.5rem, 7vw, 4.5rem); }
.banda, .cierre { content-visibility: auto; contain-intrinsic-size: auto 40rem; }
.banda--verde { background: var(--color-banda-verde); color: var(--crema-fija); border-block: 2px solid var(--color-oro); }
.banda--verde h2 { color: var(--color-letra-oro); }
.banda--verde a:not(.btn) { color: var(--color-letra-oro); }
.banda--superficie { background: var(--color-superficie); }
.titulo-seccion { margin-bottom: 1.25rem; }
.titulo-seccion::after { content: ""; display: block; width: 4rem; margin-top: .6rem; border-top: 3px solid var(--color-oro); }
.centrado { text-align: center; }
.centrado .titulo-seccion::after { margin-inline: auto; }

/* ---------- Migas ---------- */
.migas { padding-block: .9rem .2rem; font-size: .9rem; }
/* Aviso «View this page in English»: solo existe en las páginas en español y lo enseña assets/js/idioma.js antes de pintar */
.aviso-idioma { display: none; }
.aviso-ingles .aviso-idioma { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-block: .75rem; padding: 0 0 0 1rem; background: var(--color-hoy); border: 1px solid var(--color-borde); border-left: 4px solid var(--color-oro); border-radius: var(--radio); }
.aviso-idioma p { margin: 0; }
.aviso-idioma a { display: inline-block; padding-block: .55rem; font-weight: 700; color: var(--color-texto); text-underline-offset: .2em; }
.aviso-idioma__cerrar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radio); background: transparent; color: var(--color-texto); cursor: pointer; }
.aviso-idioma__cerrar:hover { background: var(--color-borde); }
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem .5rem; }
.migas li + li::before { content: "›"; margin-right: .5rem; color: var(--color-texto-suave); }
.migas a { color: var(--color-texto-suave); }
.migas [aria-current] { color: var(--color-texto); font-weight: 600; }

/* ---------- Plato y marco de carta ---------- */
.marco { border: 5px double var(--color-oro-texto); background: var(--color-superficie); padding: 1rem 1.1rem 1.1rem; border-radius: 2px; }
.marco__titulo { text-align: center; margin: 0 0 .4rem; font-size: clamp(1.25rem, 3.5vw, 1.6rem); letter-spacing: .06em; }
.marco__subtitulo { margin: -.3rem 0 .6rem; text-align: center; font: italic 400 .95rem/1.4 var(--fuente-acento); color: var(--color-texto-suave); }
.platos { list-style: none; }
.plato { padding: .55rem 0; }
.plato + .plato { border-top: 1px solid var(--color-borde); }
.plato__fila { display: grid; grid-template-columns: minmax(0, auto) minmax(1rem, 1fr) auto; align-items: end; column-gap: .45rem; }
.plato__nombre { margin: 0; font: 600 1.06rem/1.35 var(--fuente-texto); letter-spacing: 0; text-transform: none; text-wrap: pretty; }
.plato__puntos { align-self: end; height: .9em; margin-bottom: .3em; border-bottom: 2px dotted var(--color-oro-texto); }
.plato__precio { font: 700 1.06rem/1.35 var(--fuente-texto); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--color-precio); }
.plato__desc { margin: .15rem 0 0; font-size: .95rem; line-height: 1.45; color: var(--color-texto-suave); }
.plato--sin-precio .plato__desc { font-style: italic; }
.platos--fotos { display: grid; gap: 1rem; margin-bottom: 1rem; }
.platos--fotos + .platos--lista { padding-top: .25rem; border-top: 1px solid var(--color-borde); }
.plato--con-foto { display: flex; flex-direction: column; gap: .75rem; padding: .6rem; border: 1px solid var(--color-borde); border-radius: 10px; background: var(--color-fondo); }
.plato--con-foto + .plato { border-top: 0; }
.plato__foto { display: block; flex: none; aspect-ratio: 4 / 3; overflow: hidden; border: 1.5px solid var(--color-oro); border-radius: 8px; background: var(--color-borde); }
.plato__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.plato__texto { flex: 1; min-width: 0; padding: 0 .25rem .25rem; }
.plato--con-foto .plato__fila { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.plato--con-foto .plato__puntos { display: none; }
.plato--con-foto .plato__nombre { font-size: 1.12rem; }
.plato--con-foto .plato__desc { margin-top: .35rem; }
@media (min-width: 900px) {
  .platos--fotos { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .platos--fotos > .plato--con-foto { flex-direction: row; align-items: stretch; }
  .platos--fotos > .plato--con-foto .plato__foto { width: 46%; align-self: flex-start; }
  .platos--fotos > .plato--con-foto:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .platos--fotos > .plato--con-foto:last-child:nth-child(odd) .plato__foto { width: 34%; }
  .plato--con-foto .plato__texto { padding: .25rem .4rem; }
}

/* ---------- Portada ---------- */
.portada { --foto-movil: min(42svh, 340px); position: relative; overflow: hidden; background-color: #3A2416; background-image: radial-gradient(ellipse at 60% 35%, #7A4521 0%, #3A2416 55%, #24130A 100%); }
.portada__foto, .portada__foto img { position: absolute; inset: 0 0 auto 0; width: 100%; height: var(--foto-movil); }
.portada__foto img { object-fit: cover; object-position: var(--foco-barra-movil); transition: opacity .3s ease-out; }
.portada__foto img.fundido-pendiente { opacity: 0; }
.portada__foto::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(36, 19, 10, .78) 0%, rgba(36, 19, 10, .5) 35%, rgba(36, 19, 10, 0) 72%); }
.portada__in { position: relative; width: 100%; padding: max(0px, calc(var(--foto-movil) - 8.5rem)) 0 1rem; }
.portada__estado { display: flex; justify-content: flex-end; margin: 0 var(--cap-estado, 1.1rem) .5rem; min-height: 2rem; }
.portada .cartela { margin-bottom: 0; padding: 1rem .9rem; }
.portada__ante { margin-bottom: .5rem; }
.portada__ante .ovalo { padding: .1rem .7rem; font-size: .8125rem; letter-spacing: .02em; line-height: 1.4; }
.portada h1 { font-size: clamp(1.3rem, 6vw, 2.6rem); margin-bottom: .35em; }
.portada__entradilla { font-size: .95rem; line-height: 1.45; margin-bottom: .75rem; }
.portada .btn-grupo { gap: .5rem; }
.portada .btn { padding-inline: .5rem; gap: .35rem; }
.portada .btn .icono { width: 20px; height: 20px; }
.portada .btn--principal { flex: 1 1 100%; }
.portada .btn--sec { flex: 1 1 8rem; }
.estado { display: inline-flex; align-items: center; gap: .55rem; padding: .3rem 1rem; border: 2px solid var(--color-oro); border-radius: 999px; background: radial-gradient(ellipse at 50% 40%, #FFFCF2, #ECE3C8); color: var(--chapa-texto); font: 700 .9rem/1.4 var(--fuente-texto); }
.estado[hidden] { display: none; }
.estado__punto { width: .7rem; height: .7rem; border-radius: 50%; background: var(--rotulo-rojo); flex: none; }
.estado--abierto .estado__punto { background: #1B6B3F; }
@media (min-width: 701px) {
  .portada { display: flex; align-items: flex-end; min-height: clamp(26rem, calc(100svh - var(--alto-cabecera)), 46rem); }
  .portada__foto, .portada__foto img { inset: 0; height: 100%; }
  .portada__foto img { object-position: var(--foco-barra); }
  .portada__in { width: min(100% - 2rem, var(--ancho)); margin-inline: auto; padding: 0 0 2.5rem; }
  .portada .cartela { --cap: 2.4rem; width: min(100% - 2 * var(--cap), 46rem); margin-left: var(--cap); padding: 1.75rem 2rem; }
  .portada__estado { justify-content: flex-start; margin: 0 0 .75rem var(--cap-estado, 2.4rem); }
  .portada .btn { padding-inline: 1.2rem; gap: .5rem; }
  .portada .btn .icono { width: 22px; height: 22px; }
  .portada__ante .ovalo { font-size: .8125rem; letter-spacing: .08em; padding: .15rem .95rem; }
  .portada .btn--principal { flex: 0 0 auto; }
  .portada .btn--sec { flex: 0 0 auto; }
  .portada__entradilla { font-size: 1.1rem; }
}

/* ---------- Secciones de Inicio ---------- */
.carta-ancho-inicio { max-width: 42rem; margin-inline: auto; }
.de-la-carta .btn-grupo { margin-top: 1.1rem; justify-content: center; }
.tarjetas { display: grid; gap: 1rem; margin-top: 1.5rem; }
.tarjeta { background: var(--color-superficie); color: var(--color-texto); border: 1px solid var(--color-borde); border-radius: var(--radio); padding: 1.25rem; overflow: hidden; }
.tarjeta h3 { color: var(--color-texto); margin: .8rem 0 .35rem; }
.tarjeta p { margin: 0; color: var(--color-texto-suave); }
.tarjeta__icono { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--color-boton); color: var(--crema-fija); border: 2px solid var(--color-oro); }
.tarjeta__icono .icono { width: 28px; height: 28px; }
.tarjeta--foto { display: flex; flex-direction: column; padding: 0; }
.tarjeta__foto { position: relative; aspect-ratio: 16 / 10; }
.tarjeta__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tarjeta--terraza .tarjeta__foto img { object-position: var(--foco-terraza); }
.tarjeta--futbol .tarjeta__foto img { object-position: var(--foco-sala); }
.tarjeta--tartas .tarjeta__foto img { object-position: var(--foco-tartas); }
.tarjeta__texto { padding: 1.25rem; }
.dentro-fuera, .fotos-llegar { display: grid; gap: 1.25rem; }
@media (max-width: 699px) {
  .tarjetas { display: flex; gap: .75rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 0; padding: 3px 3px .75rem; margin-inline: -3px; scrollbar-width: thin; }
  .tarjetas > .tarjeta { flex: 0 0 82%; scroll-snap-align: start; }
  .tarjetas .revelar--oculto { opacity: 1; transform: none; }
}
.fotos-llegar .foto-pie--terraza { max-width: 36rem; }
.llegar__mas { margin-top: 1rem; }
.foto-pie { margin: 0; }
.foto-pie img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 3px solid var(--color-oro); border-radius: 2px; }
.foto-pie figcaption { margin-top: .6rem; color: var(--color-texto-suave); font-size: 1rem; }
.foto-pie--sala img { object-position: var(--foco-sala); }
.foto-pie--terraza img { object-position: var(--foco-terraza); }
.foto-pie--rotulo img { aspect-ratio: 3 / 1; object-position: var(--foco-rotulo); }
.opiniones { text-align: center; padding-block: 1.5rem; }
.valoracion { margin: 0; display: flex; align-items: center; justify-content: center; gap: .6rem; font: 700 clamp(1.4rem, 5vw, 2.2rem)/1.2 var(--fuente-titulos); letter-spacing: .04em; text-transform: uppercase; color: var(--color-letra-oro); }
.valoracion .icono { width: 1.2em; height: 1.2em; }
.valoracion__fecha { margin: .15rem 0 .9rem; font-size: .9rem; color: var(--crema-fija); }
.opiniones .btn-grupo { justify-content: center; }
.llegar { display: grid; gap: 1.5rem; }
.llegar > * { min-width: 0; }
.direccion { font-style: normal; margin-bottom: 1rem; }
.direccion strong { display: block; font-size: 1.15rem; }
.cierre { position: relative; overflow: hidden; padding-block: clamp(3rem, 9vw, 5.5rem); color: var(--crema-fija); text-align: center; background: var(--color-madera-oscura); }
.cierre__foto, .cierre__foto img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cierre__foto img { object-fit: cover; object-position: var(--foco-pared); }
.cierre::after { content: ""; position: absolute; inset: 0; background: var(--color-velo); }
.cierre__in { position: relative; z-index: 1; }
.cierre h2 { color: var(--color-letra-oro); font-size: clamp(1.5rem, 5vw, 2.4rem); }
.cierre .btn-grupo { justify-content: center; }
@media (min-width: 700px) {
  .tarjetas { grid-template-columns: repeat(3, 1fr); }
  .tarjeta__foto { aspect-ratio: 4 / 3; }
  .tarjeta--abierto { grid-column: 1 / -1; }
  .dentro-fuera { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 56rem) {
  .llegar { grid-template-columns: 1fr 1.25fr; align-items: start; }
}

/* ---------- Horario y estado ---------- */
.horario { width: 100%; border-collapse: collapse; font-size: 1.02rem; }
.horario th, .horario td { padding: .5rem .5rem; border-bottom: 1px solid var(--color-borde); text-align: left; font-weight: 400; }
.horario th { font-weight: 600; }
.horario td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.horario .hoy { background: var(--color-hoy); box-shadow: inset 4px 0 0 var(--color-oro-texto); }
.horario .hoy th, .horario .hoy td { font-weight: 700; }
.horario .ovalo { margin-left: .5rem; padding: 0 .6rem; font-size: .8125rem; vertical-align: middle; }
.horario-nota { margin: .6rem 0 0; font-size: .92rem; color: var(--color-texto-suave); }
.horario-estado { margin-bottom: 1rem; }

/* ---------- Mapa ---------- */
.mapa { position: relative; display: grid; width: 100%; place-items: center; min-height: 16rem; aspect-ratio: 4 / 3; overflow: hidden; border: 3px solid var(--color-oro); border-radius: 2px; background: var(--color-secundario); color: var(--crema-fija); text-align: center; }
.mapa__aviso { display: grid; justify-items: center; gap: .6rem; padding: 1.25rem 1rem; }
.mapa__aviso p { margin: 0; font-weight: 600; }
.mapa__aviso .icono { width: 36px; height: 36px; color: var(--color-letra-oro); }
.mapa__aviso a { color: var(--color-letra-oro); }
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (min-width: 44rem) { .mapa { aspect-ratio: 16 / 10; } }

/* ---------- Páginas interiores ---------- */
.encabezado-pagina { padding-block: .5rem 2rem; }
.encabezado-pagina .cartela { margin-top: 1.1rem; }
.seccion { padding-block: clamp(1.75rem, 5vw, 3rem); }
.seccion + .seccion { border-top: 2px solid var(--color-borde); }
.lista-iconos { list-style: none; display: grid; gap: .8rem; }
.lista-iconos li { display: flex; gap: .75rem; align-items: flex-start; }
.lista-iconos .icono { margin-top: .15rem; color: var(--color-rojo-texto); }
.telefono-texto { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.faq details { margin-bottom: .6rem; border: 1px solid var(--color-borde); border-left: 4px solid var(--color-oro-texto); border-radius: var(--radio); background: var(--color-superficie); }
.faq summary { position: relative; min-height: 44px; padding: .8rem 3rem .8rem 1rem; font-weight: 700; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 1rem; top: .55rem; font: 700 1.4rem/1.2 var(--fuente-texto); color: var(--color-rojo-texto); }
.faq details[open] summary::after { content: "\2212"; }
.faq__resp { padding: 0 1rem 1rem; }
.faq__resp p:last-child { margin-bottom: 0; }
.legal h2 { font-size: 1.25rem; margin-top: 2rem; }
.legal h3 { font-size: 1.05rem; margin-top: 1.25rem; }
.legal .num { font-family: var(--fuente-texto); font-weight: 700; letter-spacing: 0; }
.legal ul { padding-left: 1.25rem; margin-bottom: 1em; }
.legal li { margin-bottom: .35rem; }
.legal table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .95rem; }
.legal th, .legal td { padding: .6rem; border: 1px solid var(--color-borde); text-align: left; vertical-align: top; }
.legal th { background: var(--color-hoy); }
.legal__fecha { margin-top: 2rem; color: var(--color-texto-suave); font-size: .95rem; }
.nota-traduccion { margin-top: .5rem; color: var(--color-texto-suave); font-size: .95rem; }
.tabla-scroll { overflow-x: auto; }
.error404 { text-align: center; padding-block: 2.5rem 3.5rem; }
.error404 img { margin: 0 auto 2rem; width: min(100%, 38rem); height: auto; }
.error404 .btn-grupo { justify-content: center; }

/* ---------- Pie ---------- */
.pie { background: var(--color-pie); color: #E8DFC9; border-top: 3px solid var(--color-oro); padding-block: 2.5rem 1.5rem; font-size: 1rem; }
.pie a { color: var(--color-letra-oro); }
.pie a:hover { text-decoration-color: var(--crema-fija); }
.pie__titulo { margin: 0 0 .7rem; color: var(--color-letra-oro); font-family: var(--fuente-titulos); font-size: 1rem; font-weight: 700; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; }
.pie__cols { display: grid; gap: 2rem; }
.pie__logo img { width: 220px; height: auto; }
.pie address { font-style: normal; margin: 1rem 0 0; }
.pie__instagram { display: inline-flex; align-items: center; gap: .35rem; }
.pie__instagram .icono { width: 20px; height: 20px; flex: none; }
.pie ul { list-style: none; display: grid; gap: .1rem; }
.pie li a, .pie__btn { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding-inline: .15rem; }
.pie__btn { padding: 0; border: 0; background: none; color: var(--color-letra-oro); font: inherit; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.pie__horario { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .15rem 1rem; }
.pie__horario dt { font-weight: 600; }
.pie__horario dd { margin: 0; font-variant-numeric: tabular-nums; }
.pie__legal { margin: 2rem 0 0; padding-top: 1.25rem; border-top: 1px solid rgba(201, 168, 92, .35); font-size: .92rem; text-align: center; color: #D9CDB2; }
@media (max-width: 51.99rem) {
  .pie { padding-block: 1.75rem 1rem; }
  .pie__cols { gap: 1.1rem 1rem; }
  .pie__marca { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; align-items: center; }
  .pie__logo img { width: 128px; }
  .pie address { margin: 0; font-size: .95rem; line-height: 1.45; }
  .pie__titulo { margin-bottom: .3rem; }
  .pie__web ul { grid-template-columns: 1fr 1fr; gap: 0 .75rem; }
  .pie__legal { margin-top: 1.25rem; padding-top: .9rem; }
  .grupo { grid-template-columns: 96px 1fr; align-items: center; column-gap: 1rem; row-gap: .75rem; margin-top: 1.25rem; padding-top: 1rem; }
  .grupo > div { display: contents; }
  .grupo__logo { width: 96px; }
  .grupo__texto { margin: 0; font-size: .95rem; line-height: 1.4; }
}
@media (min-width: 44rem) { .pie__cols { grid-template-columns: 1.2fr 1fr 1fr; } }

/* ---------- Bloque Grupo Hostelero Friser (mismo CSS que el kit) ---------- */
.grupo { --g-fondo: transparent; --g-texto: #E8DFC9; --g-acento: #E0C78C; --g-borde: rgba(201, 168, 92, .4); display: grid; gap: 1.25rem; margin-top: 2.25rem; padding: 1.5rem 0 0; border-top: 1px solid var(--g-borde); background: var(--g-fondo); color: var(--g-texto); }
.grupo--claro { --g-texto: #241A14; --g-acento: #8E1219; --g-borde: #E2D6BF; }
.grupo__logo { width: 140px; height: auto; }
.grupo__texto { margin: 0 0 1rem; font-size: 1rem; }
.grupo__locales { list-style: none; display: grid; gap: .5rem; padding: 0; margin: 0; }
.grupo__enlace { display: grid; grid-template-columns: 28px 1fr auto; column-gap: .75rem; align-items: center; min-height: 44px; padding: .45rem .6rem; border: 1px solid var(--g-borde); border-radius: 6px; color: inherit; text-decoration: none; }
a.grupo__enlace:hover { border-color: var(--g-acento); }
.grupo__icono { grid-row: span 2; width: 26px; height: 28px; color: var(--g-acento); }
.grupo__nombre { font-weight: 700; line-height: 1.25; }
.grupo__dir { grid-column: 2; font-size: .9rem; opacity: .9; }
.grupo__aqui, .grupo__externo { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
.grupo__aqui { padding: .05rem .6rem; border: 1px solid var(--g-acento); border-radius: 999px; font-size: .8125rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--g-acento); }
.grupo__externo { width: 18px; height: 18px; color: var(--g-acento); }
.grupo__local--aqui .grupo__enlace { border-color: var(--g-acento); }
@media (min-width: 52rem) {
  .grupo { grid-template-columns: 140px 1fr; column-gap: 2rem; align-items: start; }
  /* Escritorio: rejilla 2 × 2 de tarjetas iguales (icono · nombre y dirección debajo · enlace o «Estás aquí»).
     .pie .grupo__enlace gana a .pie li a, que las ponía en inline-flex con nombre y dirección en la misma línea */
  .grupo__locales { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; }
  .pie .grupo__locales { gap: .6rem; } /* como el Excalibur; .pie ul la dejaba en .1rem */
  .pie .grupo__enlace { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: .8rem; align-items: center; align-content: center; width: 100%; height: 100%; min-height: 4rem; padding: .55rem .85rem; color: var(--g-texto); }
  .grupo__nombre, .grupo__dir { min-width: 0; line-height: 1.3; }
  .grupo__dir { font-size: 1rem; color: #CDBFA5; opacity: 1; }
  .grupo__aqui, .grupo__externo { justify-self: end; }
  .grupo__aqui { white-space: nowrap; }
}
/* Entre 832 y 1119 px la columna de tarjetas es estrecha: texto algo menor para que los nombres quepan */
@media (min-width: 52rem) and (max-width: 69.99rem) {
  .pie .grupo__enlace { column-gap: .65rem; padding-inline: .7rem; }
  .grupo__nombre { font-size: 1rem; }
  .grupo__dir { font-size: .9375rem; }
  .grupo__aqui { padding-inline: .45rem; letter-spacing: .02em; }
}
@media (max-width: 51.99rem) {
  /* Tarjetas de los locales: las cuatro iguales (icono · nombre y dirección · enlace o «Estás aquí») */
  .grupo__locales { grid-column: 1 / -1; gap: .4rem; grid-auto-rows: 1fr; }
  .pie .grupo__locales { gap: .4rem; } /* como el Excalibur en móvil; .pie ul la dejaba en .1rem */
  .pie .grupo__enlace { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: .7rem; align-items: center; align-content: center; width: 100%; height: 100%; min-height: 3.25rem; padding: .45rem .75rem; color: var(--g-texto); }
  .grupo__icono { width: 22px; height: 24px; }
  .grupo__nombre, .grupo__dir { min-width: 0; line-height: 1.3; }
  .grupo__nombre { font-size: 1rem; }
  .grupo__dir { font-size: .9rem; color: #CDBFA5; opacity: 1; }
  .grupo__aqui, .grupo__externo { justify-self: end; }
  .grupo__externo { width: 18px; height: 18px; }
  .grupo__aqui { padding: .1rem .5rem; font-size: .8125rem; letter-spacing: .04em; white-space: nowrap; }
}
/* Por debajo de 416 px se ajusta el texto para que «La Bodeguita de la Esquina» quepa en una línea junto a «Estás aquí» (nunca por debajo de 13 px) */
@media (max-width: 25.99rem) {
  .pie .grupo__enlace { column-gap: .6rem; padding-inline: .65rem; }
  .grupo__nombre { font-size: .9375rem; }
  .grupo__dir { font-size: .875rem; }
  .grupo__aqui { padding-inline: .45rem; letter-spacing: .02em; }
}
@media (max-width: 23.75rem) {
  .pie .grupo__enlace { column-gap: .5rem; padding-inline: .55rem; }
  .grupo__nombre { font-size: .875rem; }
  .grupo__dir { font-size: .8125rem; }
  .grupo__aqui { padding-inline: .4rem; letter-spacing: 0; }
}

/* ---------- Barra móvil ---------- */
.barra-movil { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(3, 1fr); padding-bottom: env(safe-area-inset-bottom); background: var(--color-madera); border-top: 2px solid var(--color-oro); }
.barra-movil a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: calc(var(--alto-barra) - 2px); color: var(--crema-fija); font-size: .82rem; font-weight: 700; text-decoration: none; }
.barra-movil a:hover { text-decoration: none; }
.barra-movil .icono { width: 24px; height: 24px; }
.barra-movil__llamar { background: var(--rotulo-rojo); }
body { padding-bottom: calc(var(--alto-barra) + env(safe-area-inset-bottom)); }
/* En Inicio la barra solo aparece cuando los botones de la portada ya no se ven (main.js, con IntersectionObserver).
   Oculta no se ve ni recibe el foco (visibility). Sin JS se queda oculta: la portada tiene los mismos tres botones. */
.barra-movil--auto { visibility: hidden; transform: translateY(100%); transition: transform .25s ease, visibility 0s linear .25s; }
.barra-movil--auto.barra-movil--visible { visibility: visible; transform: none; transition: transform .25s ease, visibility 0s; }
/* Con prefers-reduced-motion no se desplaza: aparece y desaparece al instante (la regla general quita las transiciones) */
@media (prefers-reduced-motion: reduce) { .barra-movil--auto { transform: none; } }
.barra-movil-oculta .menu-fondo { bottom: 0; }
@media (min-width: 52rem) {
  :root { --alto-barra: 0px; }
  .barra-movil { display: none; }
  body { padding-bottom: 0; }
}

/* ---------- Páginas de redirección (/mesa, /barra, /ir/…), que genera .github/scripts/preparar-pages.js ---------- */
.redireccion { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; min-height: 100svh; padding: 1.5rem 1rem; text-align: center; }
.redireccion picture { margin-bottom: 1.25rem; }
.redireccion img { width: min(296px, 80vw); height: auto; }
.redireccion__texto { margin: .75rem 0 0; color: var(--color-texto-suave); }
.redireccion p { margin: 0; }

/* ---------- Cookies ---------- */
/* No hay aviso al entrar: el permiso del mapa se pide en su recuadro y se cambia en este panel */
.cookies-panel[hidden] { display: none; }
.cookies-panel { position: fixed; z-index: 70; inset: 0; display: grid; place-items: center; padding: 1rem; background: rgba(36, 19, 10, .65); }
.cookies-panel__caja { width: min(100%, 36rem); max-height: 100%; overflow-y: auto; padding: 1.25rem; background: var(--color-superficie); color: var(--color-texto); border: 3px solid var(--color-oro); border-radius: var(--radio); }
.cookies-panel__titulo { margin: 0 0 .6em; font-family: var(--fuente-titulos); font-size: 1.2rem; font-weight: 700; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; }
.cookies-opcion { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; align-items: start; margin-bottom: 1rem; padding: .8rem; border: 1px solid var(--color-borde); border-radius: var(--radio); }
.cookies-opcion input { width: 24px; height: 24px; margin: .1rem 0 0; accent-color: var(--color-primario); }
.cookies-opcion label { font-weight: 700; }
.cookies-opcion p { grid-column: 2; margin: 0; font-size: .95rem; color: var(--color-texto-suave); }

/* ---------- Movimiento ---------- */
.revelar { transition: opacity .6s ease, transform .6s ease; }
.revelar--oculto { opacity: 0; transform: translateY(14px); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .revelar--oculto { opacity: 1; transform: none; }
}

/* ---------- Impresión ---------- */
@media print {
  :root { --color-fondo: #fff; --color-superficie: #fff; --color-texto: #000; --color-texto-suave: #222; }
  body { padding: 0; font-size: 12pt; background: #fff; }
  .cabecera, .barra-movil, .cookies-panel, .saltar, .chips, .volver-arriba, .pie, .migas, .resena-carta, .btn { display: none !important; }
  .cartela { background: none; color: #000; border-block: 2px solid #000; padding: .5rem 0; margin: 0; }
  .cartela::before, .cartela::after { display: none; }
  .cartela h1 { color: #000; }
  .marco { break-inside: avoid; border-color: #000; }
  .plato__precio, a { color: #000; }
  .plato__puntos { border-color: #000; }
}