/* ==========================================================================
   Tokens de diseño — dirección «Sobremesa» (aprobada como punto de partida en
   la fase 2; el sistema visual todavía no está cerrado).
   Colores tomados del propio restaurante (docs/PROYECTO.md → Dirección visual):
   madera oscura y manteles rojos de la sala, paredes cálidas, naranja de la
   guitarra del logotipo y azul de los azulejos del local, sólo como acento.
   ========================================================================== */

@font-face {
  font-family: "Fraunces";
  src: url("/fuentes/fraunces-latin-soft-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/fuentes/fraunces-latin-soft-italic.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Mulish";
  src: url("/fuentes/mulish-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Paleta */
  --tabaco: #2b1d17;        /* madera oscura de sillas y suelo: fondos profundos y texto */
  --tabaco-2: #3a2820;
  --crema: #f7f1e8;         /* paredes cálidas de la sala: fondo general */
  --crema-2: #efe5d6;
  --papel: #fffdf9;
  --rojo: #b8322a;          /* manteles y cartas; rojo atemperado, no el #f01830 de Canva */
  --rojo-oscuro: #93261f;
  --guitarra: #d08a2e;      /* naranja de la guitarra del logotipo: acento sobre oscuro */
  --guitarra-sobre-claro: #8a5b1e; /* mismo tono (34°), más oscuro, para texto pequeño sobre fondo claro: 5,2:1 sobre crema, 4,7:1 sobre crema-2 (WCAG AA) */
  --azulejo: #24506b;       /* azul de los azulejos y del mural: sólo detalle */
  --texto: var(--tabaco);
  --texto-suave: #6b574b;
  --linea: #e4d8c8;
  --crema-sobre-oscuro: rgb(247 241 232 / 0.78);

  /* Cenefa de azulejo (motivo propio, en SVG): guiño a los azulejos del local. */
  --azulejo-motivo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' fill='%23f7f1e8'/%3E%3Cpath d='M12 2c2 3.2 2 6.8 0 10-2-3.2-2-6.8 0-10zm0 20c-2-3.2-2-6.8 0-10 2 3.2 2 6.8 0 10zM2 12c3.2-2 6.8-2 10 0-3.2 2-6.8 2-10 0zm20 0c-3.2 2-6.8 2-10 0 3.2-2 6.8-2 10 0z' fill='%2324506b'/%3E%3Cpath d='M0 0h4L0 4zM24 0v4l-4-4zM0 24v-4l4 4zM24 24h-4l4-4z' fill='%2324506b'/%3E%3C/svg%3E");

  /* Tipografía */
  --fuente-titulos: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --fuente-texto: "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --paso--2: clamp(0.75rem, 0.73rem + 0.1vw, 0.8rem);
  --paso--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --paso-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --paso-1: clamp(1.15rem, 1.07rem + 0.4vw, 1.4rem);
  --paso-2: clamp(1.4rem, 1.25rem + 0.8vw, 1.9rem);
  --paso-3: clamp(1.8rem, 1.45rem + 1.7vw, 2.8rem);
  --paso-4: clamp(2.2rem, 1.6rem + 2.6vw, 3.9rem);

  /* Espacio y forma */
  --esp-1: 0.5rem;
  --esp-2: 1rem;
  --esp-3: 1.5rem;
  --esp-4: 2.5rem;
  --esp-5: 4rem;
  --esp-6: clamp(4rem, 2.8rem + 5vw, 8rem);
  --ancho: 76rem;
  --margen: clamp(1rem, 0.6rem + 2vw, 2.5rem);
  --radio: 0.375rem;
  --radio-foto: 0.25rem;
  --sombra: 0 1px 2px rgb(43 29 23 / 0.06), 0 10px 30px rgb(43 29 23 / 0.1);
  --alto-cabecera: 4.25rem;

  /* Movimiento: discreto y desactivable */
  --curva: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duracion: 700ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --duracion: 0ms; }
}

/* ==========================================================================
   Base: reinicio suave, tipografía y utilidades.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--alto-cabecera) + 4rem);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--crema);
  color: var(--texto);
  font-family: var(--fuente-texto);
  font-size: var(--paso-0);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--esp-2);
  font-family: var(--fuente-titulos);
  font-weight: 500;
  font-variation-settings: "SOFT" 50;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
p, ul, dl { margin: 0 0 var(--esp-2); }
p { text-wrap: pretty; }
img, picture { display: block; max-width: 100%; height: auto; }
address { font-style: normal; }
figure { margin: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--rojo); }

:focus-visible {
  outline: 3px solid var(--guitarra);
  outline-offset: 3px;
  border-radius: 2px;
}

.contenedor {
  width: min(100% - 2 * var(--margen), var(--ancho));
  margin-inline: auto;
}

.seccion { padding-block: var(--esp-6); }

.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.saltar {
  position: absolute;
  left: var(--esp-2);
  top: -3rem;
  z-index: 100;
  padding: var(--esp-1) var(--esp-2);
  background: var(--tabaco);
  color: var(--crema);
  border-radius: var(--radio);
}
.saltar:focus { top: var(--esp-2); }

.antetitulo {
  margin-bottom: var(--esp-2);
  font-family: var(--fuente-texto);
  font-size: var(--paso--1);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rojo);
}

.titulo-seccion {
  max-width: 20ch;
  font-size: var(--paso-3);
  font-weight: 400;
  font-variation-settings: "SOFT" 100;
}
.texto-grande { font-size: var(--paso-1); line-height: 1.5; }

/* Enlace con flecha: acción secundaria, discreta */
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 800;
  font-size: var(--paso--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 0.15em;
}
.enlace-flecha::after { content: "→"; transition: transform 250ms var(--curva); }
.enlace-flecha:hover::after { transform: translateX(4px); }

/* Aparición suave al entrar en pantalla. Sin JS (o con movimiento reducido)
   todo está visible desde el principio. */
.js .aparecer { opacity: 0; transform: translateY(18px); transition: opacity var(--duracion) var(--curva), transform var(--duracion) var(--curva); }
.js .aparecer.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .aparecer { opacity: 1; transform: none; } }
@media print { .js .aparecer { opacity: 1; transform: none; } }

/* ==========================================================================
   Componentes comunes. Mobile first: estilos base para móvil, ampliados con
   min-width.
   ========================================================================== */

/* --- Botones ------------------------------------------------------------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 3rem;
  padding: 0.75em 1.6em;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-weight: 800;
  font-size: var(--paso--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 200ms, color 200ms, border-color 200ms, transform 200ms var(--curva);
}
.boton:active { transform: translateY(1px); }
.boton--principal { background: var(--rojo); color: var(--papel); }
.boton--principal:hover { background: var(--rojo-oscuro); color: var(--papel); }
.boton--secundario { border-color: currentColor; color: inherit; }
.boton--secundario:hover { background: var(--tabaco); border-color: var(--tabaco); color: var(--crema); }
.boton--claro { background: var(--crema); color: var(--tabaco); }
.boton--claro:hover { background: var(--papel); color: var(--rojo-oscuro); }
.boton--compacto { min-height: 2.5rem; padding: 0.5em 1.2em; }

/* --- Cabecera ------------------------------------------------------------ */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(247 241 232 / 0.94);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--linea);
  transition: box-shadow 250ms;
}
.cabecera[data-desplazada] { box-shadow: 0 6px 24px rgb(43 29 23 / 0.08); }
.cabecera__interior {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  width: min(100% - 2 * var(--margen), var(--ancho));
  min-height: var(--alto-cabecera);
  margin-inline: auto;
}
.marca { display: flex; align-items: center; gap: 0.6rem; margin-right: auto; text-decoration: none; }
.marca:hover { color: inherit; }
.marca__logo { width: 3rem; height: 3rem; border-radius: 50%; box-shadow: 0 0 0 1px var(--linea); }
.marca__nombre {
  font-family: var(--fuente-titulos);
  font-size: var(--paso-1);
  font-weight: 600;
  font-variation-settings: "SOFT" 100;
  letter-spacing: -0.01em;
}

.cabecera__menu {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.cabecera__menu-icono,
.cabecera__menu-icono::before,
.cabecera__menu-icono::after {
  display: block;
  width: 1.5rem;
  height: 2px;
  background: currentColor;
  transition: transform 250ms var(--curva), background-color 200ms;
}
.cabecera__menu-icono { position: relative; }
.cabecera__menu-icono::before, .cabecera__menu-icono::after { content: ""; position: absolute; left: 0; }
.cabecera__menu-icono::before { top: -7px; }
.cabecera__menu-icono::after { top: 7px; }
[aria-expanded="true"] .cabecera__menu-icono { background: transparent; }
[aria-expanded="true"] .cabecera__menu-icono::before { transform: translateY(7px) rotate(45deg); }
[aria-expanded="true"] .cabecera__menu-icono::after { transform: translateY(-7px) rotate(-45deg); }

/* Panel móvil: visible sin JS; con JS empieza plegado y el botón lo abre. */
.cabecera__paneles {
  position: absolute;
  inset: 100% 0 auto 0;
  display: grid;
  gap: var(--esp-3);
  max-height: calc(100dvh - var(--alto-cabecera));
  overflow-y: auto;
  padding: var(--esp-3) var(--margen) var(--esp-4);
  background: var(--crema);
  border-bottom: 1px solid var(--linea);
  box-shadow: var(--sombra);
}
.js .cabecera__paneles:not([data-abierto]) { display: none; }
.no-js .cabecera__menu { display: none; }
.no-js .cabecera__paneles { position: static; box-shadow: none; }

.nav__lista { display: grid; gap: var(--esp-1); margin: 0; padding: 0; list-style: none; }
.nav__lista a {
  display: block;
  padding: 0.35rem 0;
  font-family: var(--fuente-titulos);
  font-size: var(--paso-2);
  text-decoration: none;
}
.nav__lista a[aria-current="page"] { color: var(--rojo); }

/* Selector de idioma: botón compacto (globo + código + chevron) que despliega la lista.
   Sin JS la lista se ve siempre; con JS empieza plegada. */
.idioma { position: relative; }
.idioma__boton {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.5rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--paso--1);
  font-weight: 800;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: border-color 200ms, background-color 200ms;
}
.idioma__boton:hover, .idioma__boton[aria-expanded="true"] { border-color: var(--linea); background: var(--papel); }
.idioma svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.idioma__chevron { transition: transform 200ms var(--curva); }
.idioma__boton[aria-expanded="true"] .idioma__chevron { transform: rotate(180deg); }
.idioma__lista {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 60;
  min-width: 10.5rem;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.js .idioma__lista:not([data-abierto]) { display: none; }
.no-js .idioma__lista { position: static; box-shadow: none; }
.idioma__opcion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  border-radius: calc(var(--radio) - 2px);
  text-decoration: none;
  font-size: var(--paso-0);
}
.idioma__opcion:hover, .idioma__opcion:focus-visible { background: var(--crema); color: var(--texto); }
.idioma__opcion[aria-current] { font-weight: 800; }
.idioma__activo { color: var(--rojo); }

@media (min-width: 62em) {
  .cabecera__menu { display: none; }
  .cabecera__paneles,
  .js .cabecera__paneles:not([data-abierto]) {
    position: static;
    display: flex;
    align-items: center;
    gap: var(--esp-4);
    max-height: none;
    overflow: visible;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .nav__lista { display: flex; gap: var(--esp-3); }
  .nav__lista a { font-family: var(--fuente-texto); font-size: var(--paso--1); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
  .nav__lista a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--rojo); color: inherit; }
}

/* --- Avisos de trabajo (sólo en la construcción local) ------------------ */
.aviso-provisional {
  margin: 0;
  padding: 0.45rem var(--margen);
  background: var(--azulejo);
  color: var(--papel);
  font-size: var(--paso--2);
  letter-spacing: 0.02em;
  text-align: center;
}
.aviso-trabajo {
  margin: 0 0 var(--esp-4);
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--azulejo);
  background: rgb(36 80 107 / 0.07);
  font-size: var(--paso--1);
}
.marca-trabajo { font-family: var(--fuente-texto); font-size: var(--paso--2); font-weight: 700; letter-spacing: 0; text-transform: none; }
.marca-trabajo--traduccion {
  display: inline-block;
  margin: 0.25rem 0.35rem 0 0;
  padding: 0.05rem 0.5rem;
  border: 1px dashed var(--azulejo);
  border-radius: 999px;
  color: var(--azulejo);
}
.marca-trabajo--revisar { display: inline-block; margin-top: 0.25rem; color: var(--azulejo); vertical-align: top; }
.marca-trabajo--revisar summary { cursor: pointer; }
.marca-trabajo--revisar summary::before { content: "⚑ "; }
.marca-trabajo--revisar ul {
  margin: 0.35rem 0 0;
  padding: 0.5rem 0.75rem 0.5rem 1.5rem;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  color: var(--texto);
  font-weight: 400;
}
.dato-pendiente {
  padding: 0.05rem 0.4rem;
  background: rgb(208 138 46 / 0.16);
  border: 1px dashed var(--guitarra);
  border-radius: 3px;
  color: var(--tabaco);
  font-weight: 700;
}

/* --- Cabecera de páginas interiores ------------------------------------- */
.cabecera-pagina { padding: var(--esp-6) 0 var(--esp-5); }
.cabecera-pagina__titulo { font-size: var(--paso-4); font-weight: 400; font-variation-settings: "SOFT" 100; }
.cabecera-pagina__intro { max-width: 46ch; font-size: var(--paso-1); color: var(--texto-suave); }
.cabecera-pagina__acciones { margin-top: var(--esp-3); }

/* --- Contacto ------------------------------------------------------------ */
.contacto { padding-bottom: var(--esp-6); }
.contacto__datos { display: grid; gap: var(--esp-3); margin: 0; }
.contacto__datos dt { font-size: var(--paso--1); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texto-suave); }
.contacto__datos dd { margin: 0.25rem 0 0; font-family: var(--fuente-titulos); font-size: var(--paso-2); }
@media (min-width: 48em) { .contacto__datos { grid-template-columns: repeat(3, 1fr); } }

/* --- Páginas legales ------------------------------------------------------ */
.legal { padding-bottom: var(--esp-6); }
.legal > * { max-width: 46rem; }
.legal h2 { margin-top: var(--esp-4); font-size: var(--paso-2); font-weight: 400; font-variation-settings: "SOFT" 100; }
.legal__datos { display: grid; gap: 0.6rem; margin: 0 0 var(--esp-3); padding: var(--esp-3); background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); }
.legal__datos div { display: grid; gap: 0.1rem; }
.legal__datos dt { font-size: var(--paso--2); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texto-suave); }
.legal__datos dd { margin: 0; }

/* Página 404: enlaces para seguir navegando. */
.pagina-404 { padding-bottom: var(--esp-6); }
.pagina-404__enlaces { list-style: none; margin: 0 0 var(--esp-4); padding: 0; display: grid; gap: 0.75rem; font-size: var(--paso-1); }
@media (min-width: 40em) { .legal__datos div { grid-template-columns: 11rem 1fr; align-items: baseline; } }

/* --- Tarjeta de reservas y Mi cuenta (widget del sistema de reservas) ---- */
.reserva {
  position: relative;
  max-width: 40rem;
  margin: 0 0 var(--esp-6);
  padding: var(--esp-4) var(--esp-3);
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.reserva::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--rojo); }
.reserva__alternativa { margin: 0; font-size: var(--paso--1); color: var(--texto-suave); }
/* El widget trae su propia presentación: la tarjeta sólo lo enmarca, sin tocar su contenido. */
.reserva--widget { max-width: none; margin: 0; padding: calc(var(--esp-2) + 6px) var(--esp-1) var(--esp-1); }
.reserva__widget { min-height: 20rem; }
@media (min-width: 48em) { .reserva--widget { padding: calc(var(--esp-3) + 6px) var(--esp-3) var(--esp-3); } }

/* --- Acceso a Mi cuenta (cabecera) -------------------------------------- */
.cuenta-acceso {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  font-size: var(--paso--1);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
.cuenta-acceso svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.cuenta-acceso[aria-current="page"] { color: var(--rojo); }
@media (min-width: 62em) {
  .cuenta-acceso {
    justify-content: center;
    width: 2.5rem;
    min-height: 2.5rem;
    margin-right: calc(-1 * var(--esp-2));
    border: 1px solid transparent;
    border-radius: 999px;
    transition: border-color 200ms, background-color 200ms;
  }
  .cuenta-acceso:hover, .cuenta-acceso:focus-visible { border-color: var(--linea); background: var(--papel); }
  /* Nombre oculto a la vista pero no a los lectores de pantalla (mismo patrón que .visualmente-oculto). */
  .cuenta-acceso__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* --- Pie ------------------------------------------------------------------ */
.pie { background: var(--tabaco); color: var(--crema); }
.pie__cenefa { height: 12px; background: var(--azulejo-motivo) 0 0 / 12px 12px; opacity: 0.9; }
.pie a { text-decoration: none; }
.pie a:hover { color: var(--guitarra); }
.pie p { margin: 0; }
.pie__interior {
  display: grid;
  gap: var(--esp-4);
  width: min(100% - 2 * var(--margen), var(--ancho));
  margin: 0 auto;
  padding: var(--esp-5) 0 var(--esp-4);
}
.pie__nombre { margin-bottom: var(--esp-1) !important; font-family: var(--fuente-titulos); font-size: var(--paso-2); font-variation-settings: "SOFT" 100; }
.pie__direccion { color: var(--crema-sobre-oscuro); }
.pie__como-llegar { margin-top: var(--esp-2) !important; }
.pie__como-llegar .enlace-flecha { color: var(--guitarra); font-size: var(--paso--2); }
.pie__bloque { display: grid; align-content: start; gap: 0.35rem; }
.pie__etiqueta { margin-top: 0.35rem !important; font-size: var(--paso--2); font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--guitarra); }
.pie__etiqueta:first-child { margin-top: 0 !important; }
.pie__lista { display: grid; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.pie__lista a[aria-current="page"] { color: var(--guitarra); }
.pie__base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-4);
  justify-content: space-between;
  align-items: center;
  width: min(100% - 2 * var(--margen), var(--ancho));
  margin: 0 auto;
  padding: var(--esp-3) 0;
  border-top: 1px solid rgb(247 241 232 / 0.14);
  font-size: var(--paso--1);
  color: rgb(247 241 232 / 0.62);
}
.pie__legales { display: flex; flex-wrap: wrap; gap: 0.35rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.pie__legales a { color: rgb(247 241 232 / 0.75); }
/* Firma del autor: centrada, pequeña y de bajo contraste; no compite con la marca. */
.pie__firma {
  padding: var(--esp-2) var(--margen) var(--esp-3) !important;
  font-size: var(--paso--2);
  letter-spacing: 0.04em;
  text-align: center;
  color: rgb(247 241 232 / 0.62);
}
/* «Creado por» + logotipo oficial del autor, desde sitio.json → creditos (sin modificar: sólo se fija la altura). */
.pie__firma-enlace {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  color: rgb(247 241 232 / 0.62);
  text-decoration: none;
  transition: color 0.2s ease;
}
.pie__firma-enlace:hover,
.pie__firma-enlace:focus-visible { color: var(--crema); }
.pie__firma-logo { display: inline-flex; align-items: center; gap: 0.4rem; }
.pie__firma-logo img { display: block; width: auto; max-width: none; }
.pie__firma-simbolo { height: 1.15rem; }
.pie__firma-wordmark { height: 0.85rem; }
@media (min-width: 40em) { .pie__interior { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .pie__interior { grid-template-columns: 1.5fr 1.2fr 1fr 1fr; } }

/* Cabecera en móviles estrechos: marca, idioma y menú caben en una línea. */
.marca__nombre { white-space: nowrap; }
@media (max-width: 30em) {
  .cabecera__interior { gap: 0.4rem; }
  .marca { gap: 0.45rem; }
  .marca__logo { width: 2.5rem; height: 2.5rem; }
  .marca__nombre { font-size: 1.05rem; }
  .idioma__boton { padding-inline: 0.45rem; }
}

/* Redes del pie: icono SVG propio junto al nombre, sin cajas ni fondos. */
.pie__red { display: inline-flex; align-items: center; gap: 0.55rem; line-height: 1.2; }
.pie__red .icono-red { flex: none; width: 1.25rem; height: 1.25rem; }
.pie__red:hover, .pie__red:focus-visible { color: var(--guitarra); }

/* ==========================================================================
   Portada. Ritmo de secciones: oscuro (hero) → crema → papel → oscuro (menú
   del día) → crema → papel → rojo (reserva) → crema → oscuro (pie).
   ========================================================================== */

/* --- Hero ------------------------------------------------------------------ */
.hero { display: grid; background: var(--tabaco); color: var(--crema); }
.hero__foto { order: -1; position: relative; }
.hero__picture img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 72% 50%; }
.hero__texto { position: relative; padding: var(--esp-5) var(--margen); }
.hero__texto::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 12px;
  background: var(--azulejo-motivo) 0 0 / 12px 12px;
}
.hero .antetitulo { color: var(--guitarra); }
.hero__titulo { max-width: 17ch; font-size: var(--paso-4); font-weight: 400; font-variation-settings: "SOFT" 100; }
.hero__entradilla { max-width: 36ch; font-size: var(--paso-1); line-height: 1.5; color: var(--crema-sobre-oscuro); }
.hero__acciones { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin: var(--esp-4) 0; }
.hero .boton--secundario:hover { background: var(--crema); border-color: var(--crema); color: var(--tabaco); }
.hero__datos {
  display: grid;
  gap: var(--esp-2);
  margin: 0;
  padding-top: var(--esp-3);
  border-top: 1px solid rgb(247 241 232 / 0.16);
  font-size: var(--paso--1);
}
.hero__datos dt { font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--guitarra); font-size: var(--paso--2); }
.hero__datos dd { margin: 0.15rem 0 0; color: var(--crema-sobre-oscuro); }
.hero__texto > * { animation: entrada var(--duracion) var(--curva) both; }
.hero__texto > :nth-child(2) { animation-delay: 80ms; }
.hero__texto > :nth-child(3) { animation-delay: 160ms; }
.hero__texto > :nth-child(4) { animation-delay: 240ms; }
.hero__texto > :nth-child(5) { animation-delay: 320ms; }
@keyframes entrada { from { opacity: 0; transform: translateY(12px); } }

@media (min-width: 40em) { .hero__datos { grid-template-columns: repeat(2, auto); justify-content: start; column-gap: var(--esp-5); } }
@media (min-width: 60em) {
  .hero { grid-template-columns: 48fr 52fr; min-height: min(calc(100svh - var(--alto-cabecera)), 54rem); }
  .hero__foto { order: 0; min-height: 30rem; }
  .hero__picture { position: absolute; inset: 0; }
  .hero__picture img { height: 100%; aspect-ratio: auto; }
  .hero__texto {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--esp-6) var(--esp-5) var(--esp-5) max(var(--margen), (100vw - var(--ancho)) / 2);
  }
  .hero__texto::before { inset: 0 0 0 auto; width: 12px; height: auto; }
}

/* --- Nuestra cocina ---------------------------------------------------------- */
.cocina__rejilla { display: grid; gap: var(--esp-4); align-items: center; }
.cocina__foto { position: relative; max-width: 34rem; }
.cocina__foto::after {
  content: "";
  position: absolute;
  inset: auto auto -14px -14px;
  width: 42%;
  height: 42%;
  z-index: -1;
  background: var(--azulejo-motivo) 0 0 / 14px 14px;
  opacity: 0.55;
}
.cocina__foto { isolation: isolate; }
.cocina__picture img { border-radius: var(--radio-foto); }
.cocina__texto p:not(.antetitulo) { max-width: 40ch; }
@media (min-width: 60em) {
  .cocina__rejilla { grid-template-columns: 5fr 6fr; gap: var(--esp-6); }
}

/* --- Platos destacados -------------------------------------------------------- */
.platos { background: var(--papel); }
.cabecera-seccion { margin-bottom: var(--esp-4); }
.destacados {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78vw, 20rem);
  gap: var(--esp-3);
  margin: 0 calc(-1 * var(--margen));
  padding: 0 var(--margen) var(--esp-2);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--margen);
  scrollbar-width: thin;
}
.destacado { scroll-snap-align: start; display: grid; align-content: start; gap: var(--esp-2); }
.destacado__foto img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radio-foto); transition: transform 600ms var(--curva); }
.destacado__foto { overflow: hidden; border-radius: var(--radio-foto); }
.destacado:hover .destacado__foto img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .destacado:hover .destacado__foto img { transform: none; } }
.destacado__nombre { margin: 0 0 0.35rem; font-size: var(--paso-2); font-weight: 400; font-variation-settings: "SOFT" 100; }
.destacado__desc { margin: 0 0 0.5rem; font-size: var(--paso--1); color: var(--texto-suave); }
.destacado .plato__precio { justify-items: start; margin: 0; font-weight: 800; color: var(--rojo); }
.platos__enlace { margin: var(--esp-4) 0 0; }
@media (min-width: 40em) {
  .destacados { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); margin: 0; padding: 0; overflow: visible; }
}
@media (min-width: 64em) {
  .destacados { grid-template-columns: repeat(3, 1fr); column-gap: var(--esp-4); row-gap: var(--esp-5); }
}

/* --- Menú del día ------------------------------------------------------------ */
.menu-inicio { display: grid; background: var(--tabaco); color: var(--crema); }
.menu-inicio__picture img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.menu-inicio__texto { padding: var(--esp-5) var(--margen); }
.menu-inicio .antetitulo { color: var(--guitarra); }
.menu-inicio__precio {
  margin: 0 0 0.25rem;
  font-family: var(--fuente-titulos);
  font-size: var(--paso-4);
  font-variation-settings: "SOFT" 100;
  line-height: 1;
  color: var(--guitarra);
}
.menu-inicio__incluye { font-weight: 700; }
.menu-inicio__subtitulo { margin: var(--esp-3) 0 0.5rem; font-size: var(--paso--2); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--crema-sobre-oscuro); }
.menu-inicio__lista { display: flex; flex-wrap: wrap; gap: 0.25rem 0; margin: 0 0 var(--esp-3); padding: 0; list-style: none; font-family: var(--fuente-titulos); font-size: var(--paso-1); }
.menu-inicio__lista li:not(:last-child)::after { content: "·"; margin: 0 0.6rem; color: var(--guitarra); }
.menu-inicio__sandwich { color: var(--crema-sobre-oscuro); font-size: var(--paso--1); }
.menu-inicio__acciones { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin: var(--esp-4) 0 0; }
.menu-inicio .boton--secundario:hover { background: var(--crema); border-color: var(--crema); color: var(--tabaco); }
@media (min-width: 60em) {
  .menu-inicio { grid-template-columns: 1fr 1fr; }
  .menu-inicio__foto { position: relative; min-height: 32rem; }
  .menu-inicio__picture { position: absolute; inset: 0; }
  .menu-inicio__picture img { height: 100%; aspect-ratio: auto; }
  .menu-inicio__texto { align-self: center; max-width: 38rem; padding: var(--esp-6) var(--esp-5); }
}

/* --- Ambiente y cócteles -------------------------------------------------------- */
.ambiente__rejilla { display: grid; gap: var(--esp-4); }
.ambiente__picture img { width: 100%; border-radius: var(--radio-foto); }
.ambiente__cabecera p:not(.antetitulo) { max-width: 38ch; }
.ambiente__coctel { max-width: 22rem; }
.ambiente__sala .ambiente__picture img { aspect-ratio: 4 / 5; object-fit: cover; }
.ambiente__pie { margin-top: var(--esp-2); font-size: var(--paso--1); color: var(--texto-suave); }
.ambiente__pie-titulo { display: block; margin-bottom: 0.25rem; font-family: var(--fuente-titulos); font-size: var(--paso-1); font-weight: 500; color: var(--texto); }
@media (min-width: 60em) {
  .ambiente__rejilla {
    grid-template-columns: 5fr 6fr;
    grid-template-areas: "cabecera sala" "coctel sala";
    column-gap: var(--esp-6);
    row-gap: var(--esp-4);
    align-items: start;
  }
  .ambiente__cabecera { grid-area: cabecera; }
  .ambiente__sala { grid-area: sala; }
  .ambiente__coctel { grid-area: coctel; }
}

/* --- Grupos y eventos ---------------------------------------------------------- */
.grupos { background: var(--papel); }
.grupos__rejilla { display: grid; gap: var(--esp-4); align-items: center; }
.grupos__picture img { border-radius: var(--radio-foto); }
.grupos__lista { display: grid; gap: var(--esp-3); margin: var(--esp-3) 0 var(--esp-4); }
.grupos__lista div { padding-left: var(--esp-2); border-left: 3px solid var(--rojo); }
.grupos__lista dt { font-family: var(--fuente-titulos); font-size: var(--paso-2); font-variation-settings: "SOFT" 100; }
.grupos__lista dd { margin: 0.2rem 0 0; color: var(--texto-suave); }
@media (min-width: 60em) { .grupos__rejilla { grid-template-columns: 7fr 5fr; gap: var(--esp-6); } }

/* --- Llamada a reservar ---------------------------------------------------------- */
.llamada { background: var(--rojo); color: var(--papel); text-align: center; }
.llamada__interior { padding-block: var(--esp-6); }
.llamada__titulo { font-size: var(--paso-4); font-weight: 400; font-variation-settings: "SOFT" 100; }
.llamada__texto { font-size: var(--paso-1); color: rgb(255 253 249 / 0.85); }
.llamada__acciones { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--esp-3); margin: var(--esp-4) 0 0; }
.llamada__telefono { font-family: var(--fuente-titulos); font-size: var(--paso-2); text-decoration: none; border-bottom: 1px solid rgb(255 253 249 / 0.5); }
.llamada__telefono:hover { color: var(--papel); border-color: currentColor; }

/* --- Visítanos -------------------------------------------------------------------- */
.visita__rejilla { display: grid; gap: var(--esp-4); align-items: center; }
.visita__datos { display: grid; gap: var(--esp-3); margin: var(--esp-3) 0 0; }
.visita__datos dt { font-size: var(--paso--2); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texto-suave); }
.visita__datos dd { margin: 0.25rem 0 0; font-family: var(--fuente-titulos); font-size: var(--paso-1); }
.visita__datos dd a:not(.enlace-flecha) { text-decoration: none; }
.visita__datos .enlace-flecha { margin-top: 0.6rem; font-family: var(--fuente-texto); color: var(--rojo); }
.visita__picture img { border-radius: var(--radio-foto); }
@media (min-width: 40em) { .visita__datos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60em) { .visita__rejilla { grid-template-columns: 7fr 5fr; gap: var(--esp-6); } }

/* ==========================================================================
   Carta. Índice de categorías: barra fija de «chips» desplazable en móvil y
   tableta; columna lateral fija en escritorio. La sección activa se marca
   (aria-current) al desplazarse.
   ========================================================================== */

/* --- Cabecera -------------------------------------------------------------- */
.carta-cabecera { padding: var(--esp-5) 0 var(--esp-4); }
.carta-cabecera__rejilla { display: grid; gap: var(--esp-4); align-items: center; }
.carta-cabecera__titulo { font-size: var(--paso-4); font-weight: 400; font-variation-settings: "SOFT" 100; }
.carta-cabecera__intro { max-width: 40ch; font-size: var(--paso-1); color: var(--texto-suave); }
.carta-cabecera__acciones { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin: var(--esp-3) 0 0; }
.carta-cabecera__picture img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radio-foto); }
@media (min-width: 60em) {
  .carta-cabecera { padding: var(--esp-6) 0 var(--esp-5); }
  .carta-cabecera__rejilla { grid-template-columns: 5fr 6fr; gap: var(--esp-6); }
}

/* --- Disposición: índice + contenido ------------------------------------------- */
.carta-disposicion { display: block; padding-bottom: var(--esp-6); }

.carta-indice {
  position: sticky;
  top: var(--alto-cabecera);
  z-index: 40;
  margin: 0 calc(-1 * var(--margen));
  background: rgb(247 241 232 / 0.96);
  backdrop-filter: blur(6px);
  border-block: 1px solid var(--linea);
}
.carta-indice__titulo { display: none; }
.carta-indice__lista {
  display: flex;
  gap: 0.4rem;
  margin: 0;
  padding: 0.55rem var(--margen);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  /* Degradado en los bordes: indica que hay más categorías a los lados. */
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--margen), #000 calc(100% - 2.5rem), transparent);
}
.carta-indice__lista::-webkit-scrollbar { display: none; }
.carta-indice__lista li { scroll-snap-align: start; flex: none; }
.carta-indice a {
  display: flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.35rem 0.95rem;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: var(--papel);
  font-size: var(--paso--1);
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 200ms, border-color 200ms, color 200ms;
}
.carta-indice a:hover { border-color: var(--rojo); color: var(--rojo); }
.carta-indice a[aria-current] { background: var(--tabaco); border-color: var(--tabaco); color: var(--crema); }

.carta { padding-top: var(--esp-4); min-width: 0; }

@media (min-width: 64em) {
  .carta-disposicion { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: var(--esp-6); }
  .carta-indice {
    align-self: start;
    top: calc(var(--alto-cabecera) + var(--esp-3));
    margin: var(--esp-4) 0 0;
    background: none;
    backdrop-filter: none;
    border: 0;
  }
  .carta-indice__titulo {
    display: block;
    margin: 0 0 var(--esp-2);
    font-size: var(--paso--2);
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--texto-suave);
  }
  .carta-indice__lista { flex-direction: column; gap: 0.15rem; padding: 0 0 0 var(--esp-2); overflow: visible; mask-image: none; border-left: 1px solid var(--linea); }
  .carta-indice a {
    min-height: 0;
    margin-left: calc(-1 * var(--esp-2) - 1px);
    padding: 0.45rem 0 0.45rem var(--esp-2);
    border: 0;
    border-left: 2px solid transparent;
    border-radius: 0;
    background: none;
    font-size: var(--paso-0);
    font-weight: 600;
    white-space: normal;
  }
  .carta-indice a:hover { color: var(--rojo); }
  .carta-indice a[aria-current] { background: none; color: var(--rojo); border-left-color: var(--rojo); }
  .carta { padding-top: var(--esp-4); }
}

/* --- Secciones --------------------------------------------------------------- */
.carta-seccion { margin-bottom: var(--esp-6); }
.carta-seccion__cabecera { margin-bottom: var(--esp-3); }
.carta-seccion__titulo {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  margin-bottom: var(--esp-1);
  font-size: var(--paso-3);
  font-weight: 400;
  font-variation-settings: "SOFT" 100;
}
.carta-seccion__titulo::after { content: ""; flex: 1; height: 1px; background: var(--linea); }
.carta-seccion__nota { max-width: 60ch; margin: 0; color: var(--texto-suave); font-style: italic; }

/* Franja de fotos: ritmo editorial al abrir las categorías con platos fotografiados. */
.carta-fotos {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(8.5rem, 42%);
  gap: var(--esp-2);
  margin: 0 0 var(--esp-3);
  padding: 0 0 0.25rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.carta-fotos::-webkit-scrollbar { display: none; }
.carta-foto { scroll-snap-align: start; margin: 0; }
.carta-foto__img img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radio-foto); }
.carta-foto__pie { margin: 0.45rem 0 0; font-size: var(--paso--2); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-suave); }
@media (min-width: 40em) {
  .carta-fotos { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); margin: 0 0 var(--esp-3); padding: 0; overflow: visible; }
}

.carta-grupo { margin-top: var(--esp-4); }
.carta-grupo__titulo { font-size: var(--paso-1); font-weight: 500; color: var(--rojo); }

.carta-lista { display: grid; margin: 0; padding: 0; list-style: none; }
.plato {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.25rem var(--esp-3);
  padding: var(--esp-2) 0;
  border-bottom: 1px dashed var(--linea);
}
.plato p { margin: 0; }
.plato__ante { font-size: var(--paso--2); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--guitarra-sobre-claro); }
.plato__nombre { font-family: var(--fuente-titulos); font-size: var(--paso-1); font-variation-settings: "SOFT" 100; line-height: 1.25; }
.plato__desc { margin-top: 0.2rem !important; max-width: 56ch; font-size: var(--paso--1); color: var(--texto-suave); }
.plato__precio { display: grid; justify-items: end; align-content: start; gap: 0.1rem; font-weight: 800; white-space: nowrap; }
.plato__importe small { margin-left: 0.15rem; font-weight: 600; color: var(--texto-suave); }
.plato__formato { font-size: var(--paso--2); font-weight: 600; color: var(--texto-suave); }
@media (min-width: 80em) {
  .carta-lista { grid-template-columns: 1fr 1fr; column-gap: var(--esp-5); }
}

/* --- Menú del día -------------------------------------------------------------- */
.menu-dia {
  padding: var(--esp-4) var(--esp-3);
  color: var(--crema);
  border-radius: var(--radio);
  background-image: linear-gradient(var(--tabaco), var(--tabaco)), var(--azulejo-motivo);
  background-size: 100% 100%, 12px 12px;
  background-origin: padding-box, border-box;
  border: 12px solid transparent;
  background-clip: padding-box, border-box;
}
.menu-dia .antetitulo { color: var(--guitarra); }
.menu-dia .carta-seccion__titulo::after { background: rgb(247 241 232 / 0.2); }
.menu-dia__precio { margin: 0; font-family: var(--fuente-titulos); font-size: var(--paso-4); line-height: 1; color: var(--guitarra); }
.menu-dia__incluye { margin-top: var(--esp-1); font-weight: 700; }
.menu-dia__nota { font-style: italic; color: var(--crema-sobre-oscuro); }
.menu-dia__columnas { display: grid; gap: var(--esp-3); margin-top: var(--esp-3); }
.menu-dia__subtitulo { margin: var(--esp-2) 0 0.5rem; font-family: var(--fuente-texto); font-size: var(--paso--2); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--guitarra); }
.menu-dia__lista { margin: 0; padding-left: 1.1rem; }
.menu-dia__lista li { margin-bottom: 0.2rem; }
.menu-dia__detalle { color: var(--crema-sobre-oscuro); font-size: var(--paso--1); }
.menu-dia__sandwich { margin-top: var(--esp-3); padding-top: var(--esp-2); border-top: 1px solid rgb(247 241 232 / 0.2); }
.menu-dia .marca-trabajo--traduccion, .menu-dia .marca-trabajo--revisar { color: #9cc3d9; border-color: #9cc3d9; }
@media (min-width: 48em) {
  .menu-dia { padding: var(--esp-5); }
  .menu-dia__columnas { grid-template-columns: 1fr 1fr; }
}

.carta-pie { padding-top: var(--esp-3); border-top: 1px solid var(--linea); }
.carta-pie__nota { margin: 0 0 0.5rem; font-size: var(--paso--1); color: var(--texto-suave); }

/* ==========================================================================
   Páginas interiores: Grupos y eventos, Nosotros, Contacto y Reservar.
   Mismo sistema «Sobremesa» que la portada, con composiciones propias.
   ========================================================================== */

/* --- Grupos y eventos ------------------------------------------------------ */
.grupos-cabecera { position: relative; display: grid; background: var(--tabaco); color: var(--crema); }
.grupos-cabecera__picture img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.grupos-cabecera__texto { position: relative; padding: var(--esp-5) 0 var(--esp-5); }
.grupos-cabecera__texto::before {
  content: "";
  position: absolute;
  inset: 0 calc(-1 * var(--margen)) auto;
  height: 12px;
  background: var(--azulejo-motivo) 0 0 / 12px 12px;
}
.grupos-cabecera .antetitulo { color: var(--guitarra); }
.grupos-cabecera__titulo { font-size: var(--paso-4); font-weight: 400; font-variation-settings: "SOFT" 100; }
.grupos-cabecera__lead { max-width: 38ch; font-size: var(--paso-1); line-height: 1.5; color: var(--crema-sobre-oscuro); }
.grupos-cabecera__nota { margin-top: var(--esp-2); font-size: var(--paso--1); letter-spacing: 0.02em; color: var(--crema-sobre-oscuro); }
@media (min-width: 60em) {
  /* Foto panorámica a sangre con el texto superpuesto sobre un degradado de madera oscura. */
  .grupos-cabecera { min-height: min(72svh, 40rem); align-items: end; }
  .grupos-cabecera__foto, .grupos-cabecera__texto { grid-area: 1 / 1; }
  .grupos-cabecera__foto { position: relative; height: 100%; }
  .grupos-cabecera__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(43 29 23 / 0.92) 0%, rgb(43 29 23 / 0.7) 38%, rgb(43 29 23 / 0) 72%); }
  .grupos-cabecera__picture, .grupos-cabecera__picture img { height: 100%; }
  .grupos-cabecera__picture img { aspect-ratio: auto; }
  .grupos-cabecera__texto { z-index: 1; padding: var(--esp-6) 0; }
  .grupos-cabecera__texto::before { display: none; }
}

.propuestas { position: relative; z-index: 1; padding: var(--esp-5) 0 0; }
.propuestas__rejilla { display: grid; gap: var(--esp-4); }
.propuesta { display: grid; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); }
.propuesta__picture img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.propuesta__texto { padding: var(--esp-3) var(--esp-3) var(--esp-4); }
.propuesta__titulo { font-size: var(--paso-2); font-weight: 400; font-variation-settings: "SOFT" 100; }
.propuesta__minimo { color: var(--rojo); }
@media (min-width: 48em) { .propuestas__rejilla { grid-template-columns: 1fr 1fr; } }
@media (min-width: 60em) { .propuestas { margin-top: calc(-1 * var(--esp-5)); padding-top: 0; } }

/* Tarjetas de menú: evocan una carta impresa (papel, cenefa, tipografía de cartel). */
.menus-tarjetas { display: grid; gap: var(--esp-4); }
@media (min-width: 60em) { .menus-tarjetas { grid-template-columns: 1fr 1fr; align-items: start; } }
.menu-tarjeta {
  padding: var(--esp-4) var(--esp-3);
  background: var(--papel);
  border: 1px solid var(--linea);
  border-top: 6px solid var(--rojo);
  border-radius: var(--radio);
}
@media (min-width: 48em) { .menu-tarjeta { padding: var(--esp-5) var(--esp-4); } }
.menu-tarjeta__cabecera { margin-bottom: var(--esp-3); padding-bottom: var(--esp-3); border-bottom: 1px solid var(--linea); text-align: center; }
.menu-tarjeta__nombre { margin-bottom: var(--esp-1); font-size: var(--paso-3); font-weight: 400; font-variation-settings: "SOFT" 100; }
.menu-tarjeta__precio { margin: 0; font-family: var(--fuente-titulos); font-size: var(--paso-3); line-height: 1.1; color: var(--rojo); }
.menu-tarjeta__precio span { display: block; margin-top: 0.3rem; font-family: var(--fuente-texto); font-size: var(--paso--1); font-weight: 700; color: var(--texto-suave); }
.menu-tarjeta__incluye { max-width: 36ch; margin: var(--esp-2) auto 0; font-size: var(--paso--1); font-weight: 700; }
.menu-tarjeta__tiempo { margin-top: var(--esp-3); text-align: center; }
.menu-tarjeta__tiempo-titulo { margin-bottom: 0.6rem; font-family: var(--fuente-texto); font-size: var(--paso--2); font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rojo); }
.menu-tarjeta__tiempo ul { margin: 0; padding: 0; list-style: none; }
.menu-tarjeta__tiempo li { margin-bottom: 0.45rem; font-family: var(--fuente-titulos); font-size: var(--paso-1); line-height: 1.3; }
.menu-tarjeta__detalle { display: block; font-family: var(--fuente-texto); font-size: var(--paso--1); color: var(--texto-suave); }
.menu-tarjeta__nota { max-width: 40ch; margin: 0.5rem auto 0; font-size: var(--paso--1); font-style: italic; color: var(--texto-suave); }
.menus-nota { margin: var(--esp-3) 0 0; font-size: var(--paso--1); color: var(--texto-suave); }

.menu-tarjeta--oscura { background: var(--tabaco-2); border-color: rgb(247 241 232 / 0.14); border-top-color: var(--guitarra); color: var(--crema); }
.menu-tarjeta--oscura .menu-tarjeta__cabecera { border-color: rgb(247 241 232 / 0.14); }
.menu-tarjeta--oscura .menu-tarjeta__precio, .menu-tarjeta--oscura .menu-tarjeta__tiempo-titulo { color: var(--guitarra); }
.menu-tarjeta--oscura .menu-tarjeta__precio span, .menu-tarjeta--oscura .menu-tarjeta__detalle { color: var(--crema-sobre-oscuro); }
.menu-tarjeta--oscura .marca-trabajo--revisar, .menu-tarjeta--oscura .marca-trabajo--traduccion { color: #9cc3d9; border-color: #9cc3d9; }

.menus-coctel { background: var(--tabaco); color: var(--crema); }
.menus-coctel .antetitulo { color: var(--guitarra); }
.menus-coctel__rejilla { display: grid; gap: var(--esp-4); }
.menus-coctel__minimo {
  display: inline-block;
  margin: var(--esp-1) 0 var(--esp-3);
  padding: 0.4rem 1rem;
  border: 1px solid var(--guitarra);
  border-radius: 999px;
  font-weight: 800;
  color: var(--guitarra);
}
.menus-coctel__fotos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-2); max-width: 30rem; }
.menus-coctel__picture img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radio-foto); }
.menus-coctel .menus-tarjetas { grid-template-columns: 1fr; }
@media (min-width: 48em) { .menus-coctel .menus-tarjetas { grid-template-columns: 1fr 1fr; } }
@media (min-width: 72em) {
  .menus-coctel__rejilla { grid-template-columns: 4fr 7fr; gap: var(--esp-5); align-items: start; }
  .menus-coctel__cabecera { position: sticky; top: calc(var(--alto-cabecera) + var(--esp-3)); }
}

.llamada--grupos .llamada__telefono { font-family: var(--fuente-texto); font-size: var(--paso-1); }

/* --- Nosotros ----------------------------------------------------------------- */
.nosotros-cabecera { padding: var(--esp-5) 0; }
.nosotros-cabecera__rejilla { display: grid; gap: var(--esp-4); align-items: end; }
.nosotros-cabecera__titulo { max-width: 14ch; font-size: clamp(2.5rem, 1.6rem + 4vw, 5rem); font-weight: 400; font-variation-settings: "SOFT" 100; line-height: 1.02; }
.nosotros-cabecera__lead { max-width: 36ch; font-size: var(--paso-1); color: var(--texto-suave); }
.nosotros-cabecera__foto { position: relative; justify-self: end; width: min(100%, 28rem); isolation: isolate; }
.nosotros-cabecera__foto::before {
  content: "";
  position: absolute;
  inset: -14px -14px auto auto;
  width: 45%;
  height: 45%;
  z-index: -1;
  background: var(--azulejo-motivo) 0 0 / 14px 14px;
  opacity: 0.55;
}
.nosotros-cabecera__picture img { border-radius: var(--radio-foto); }
@media (min-width: 60em) {
  .nosotros-cabecera { padding: var(--esp-6) 0 var(--esp-5); }
  .nosotros-cabecera__rejilla { grid-template-columns: 7fr 5fr; gap: var(--esp-6); }
}

.esencia { padding-block: var(--esp-5); border-top: 1px solid var(--linea); }
.esencia__rejilla { display: grid; gap: var(--esp-2); }
.esencia__texto { max-width: 34ch; margin: 0; font-family: var(--fuente-titulos); font-size: var(--paso-2); line-height: 1.35; font-variation-settings: "SOFT" 100; }
@media (min-width: 60em) { .esencia__rejilla { grid-template-columns: 3fr 9fr; gap: var(--esp-6); } .esencia__antetitulo { padding-top: 0.6rem; } }

.proposito { background: var(--tabaco); color: var(--crema); }
.proposito::before { content: ""; display: block; height: 12px; background: var(--azulejo-motivo) 0 0 / 12px 12px; }
.proposito__interior { padding-block: var(--esp-6); text-align: center; }
.proposito .antetitulo { color: var(--guitarra); }
.proposito__cita { margin: 0 auto; }
.proposito__cita p { max-width: 24ch; margin: 0 auto; font-family: var(--fuente-titulos); font-size: var(--paso-3); font-style: italic; font-weight: 300; line-height: 1.25; text-wrap: balance; }

.local__cabecera { margin-bottom: var(--esp-4); }
.local__cabecera p:not(.antetitulo) { max-width: 46ch; }
.local__mosaico { display: grid; gap: var(--esp-3); }
.local__foto img { width: 100%; border-radius: var(--radio-foto); }
.local__foto figcaption { margin-top: 0.5rem; font-size: var(--paso--1); color: var(--texto-suave); }
.local__foto--alta img { aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 48em) {
  .local__mosaico { grid-template-columns: 2fr 1fr; align-items: end; }
  .local__foto--panoramica { grid-column: 1 / -1; }
}

.cocina-nosotros { background: var(--papel); }
.cocina-nosotros__rejilla { display: grid; gap: var(--esp-4); align-items: center; }
.cocina-nosotros__picture img { width: 100%; max-width: 30rem; border-radius: var(--radio-foto); }
.cocina-nosotros__texto p:not(.antetitulo) { max-width: 44ch; }
@media (min-width: 60em) { .cocina-nosotros__rejilla { grid-template-columns: 5fr 6fr; gap: var(--esp-6); } }

.valores { padding-block: var(--esp-6); }
.valores__interior { text-align: center; }
.valores__lista { display: grid; gap: var(--esp-2); margin: var(--esp-3) 0 var(--esp-4); padding: 0; list-style: none; }
.valores__lista li {
  font-family: var(--fuente-titulos);
  font-size: var(--paso-3);
  font-weight: 400;
  font-variation-settings: "SOFT" 100;
  line-height: 1.15;
}
.valores__lista li:nth-child(even) { color: var(--rojo); font-style: italic; }
.valores__texto { max-width: 46ch; margin: 0 auto; color: var(--texto-suave); }

/* --- Contacto --------------------------------------------------------------- */
.contacto-cabecera { padding: var(--esp-6) 0 var(--esp-4); }
.contacto-cabecera__titulo { font-size: var(--paso-4); font-weight: 400; font-variation-settings: "SOFT" 100; }
.contacto-cabecera__lead { max-width: 40ch; font-size: var(--paso-1); color: var(--texto-suave); }

.contacto-vias { padding-bottom: var(--esp-5); }
.contacto-vias__rejilla { display: grid; gap: 0; border-top: 1px solid var(--linea); }
.via { padding: var(--esp-3) 0; border-bottom: 1px solid var(--linea); }
.via__titulo { margin-bottom: 0.4rem; font-family: var(--fuente-texto); font-size: var(--paso--2); font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rojo); }
.via__dato { margin: 0; font-family: var(--fuente-titulos); font-size: var(--paso-3); font-variation-settings: "SOFT" 100; line-height: 1.15; overflow-wrap: anywhere; }
.via__dato a { text-decoration: none; }
.via__dato a:hover { color: var(--rojo); text-decoration: underline; text-decoration-thickness: 1px; }
.via__dato--email, .via__dato--direccion { font-size: var(--paso-2); }
.via__accion { margin: var(--esp-2) 0 0; }
.via__accion .enlace-flecha { color: var(--rojo); }
@media (min-width: 60em) {
  .contacto-vias__rejilla { grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--linea); }
  .via { padding: var(--esp-4) var(--esp-4) var(--esp-4) 0; border-bottom: 0; }
  .via + .via { padding-left: var(--esp-4); border-left: 1px solid var(--linea); }
}

.contacto-lugar { background: var(--papel); }
.contacto-lugar__rejilla { display: grid; gap: var(--esp-4); align-items: center; }
.contacto-lugar__foto img { border-radius: var(--radio-foto); }
.contacto-lugar__foto figcaption { margin-top: 0.5rem; font-size: var(--paso--1); color: var(--texto-suave); }
.contacto-lugar__acciones { margin: var(--esp-3) 0; }
.contacto-lugar__datos { display: grid; gap: var(--esp-3); margin: var(--esp-4) 0 0; padding-top: var(--esp-3); border-top: 1px solid var(--linea); }
.contacto-lugar__datos dt { font-size: var(--paso--2); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texto-suave); }
.contacto-lugar__datos dd { margin: 0.35rem 0 0; }
.contacto-lugar__datos .enlace-flecha { color: var(--rojo); }
.contacto-redes { display: flex; flex-wrap: wrap; gap: var(--esp-1) var(--esp-3); margin: 0; padding: 0; list-style: none; }
.contacto-redes .pie__red { min-height: 2.75rem; }
.contacto-redes .pie__red:hover, .contacto-redes .pie__red:focus-visible { color: var(--rojo); }
@media (min-width: 60em) { .contacto-lugar__rejilla { grid-template-columns: 7fr 5fr; gap: var(--esp-6); } }

/* --- Mi cuenta ---------------------------------------------------------------- */
/* Columna centrada y estrecha para la cabecera y el widget: el mismo ancho para los dos, así el
   título queda alineado con la tarjeta y el conjunto, centrado en la página. */
.contenedor--cuenta { width: min(100% - 2 * var(--margen), 42rem); }
.mi-cuenta { padding-bottom: var(--esp-6); }

/* --- Reservar ------------------------------------------------------------------ */
.reservar__rejilla {
  display: grid;
  gap: var(--esp-4);
  padding: var(--esp-5) 0 var(--esp-6);
  grid-template-areas: "cabecera" "zona" "info";
}
.reservar__cabecera { grid-area: cabecera; }
.reservar__titulo { font-size: var(--paso-4); font-weight: 400; font-variation-settings: "SOFT" 100; }
.reservar__lead { max-width: 36ch; font-size: var(--paso-1); color: var(--texto-suave); }
/* Zona de reserva: el widget del sistema de reservas (sitio.json → reservas), con tamaño propio y estable. */
.reservar__zona {
  grid-area: zona;
  container-type: inline-size;
  min-height: 26rem;
  display: grid;
}
.reservar__zona { align-content: start; }
/* Estabilidad del widget (CLS). El cargador del sistema de reservas (sitio.json → reservas)
   inserta el marco a 520 px y luego lo ajusta a su contenido; el calendario inicial mide entre
   939 y 1017 px de 375 a 1440 px de ancho (medido en producción el 17/10/2026). Si el widget
   llegaba tarde, «Antes de venir» bajaba dos veces a la vista del usuario. Se reserva algo menos
   que la altura mínima medida: el widget siempre la llena (sin hueco) y lo que crezca después
   ocurre fuera de pantalla. Sin JavaScript, o si el cargador muestra su enlace de respaldo
   (un <a> en lugar del marco), no se reserva nada. */
@media (scripting: enabled) {
  .reservar__zona .reserva__widget { min-height: 58rem; }
  .reservar__zona .reserva__widget:has(> a) { min-height: 0; }
}
.reservar__info { grid-area: info; }
.reservar__datos { display: grid; gap: var(--esp-3); margin: 0; }
.reservar__datos dt { font-size: var(--paso--2); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texto-suave); }
.reservar__datos dd { margin: 0.35rem 0 0; }
.reservar__datos .enlace-flecha { margin-top: 0.4rem; color: var(--rojo); }
.reservar__foto { position: relative; }
.reservar__picture img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
@media (min-width: 60em) {
  .reservar__rejilla {
    grid-template-columns: 5fr 7fr;
    grid-template-areas: "cabecera zona" "info zona";
    /* El alto extra del widget va a la segunda fila: la cabecera no crece y «Antes de venir» no baja. */
    grid-template-rows: auto 1fr;
    column-gap: var(--esp-6);
    align-items: start;
    padding-top: var(--esp-6);
  }
  .reservar__zona { min-height: 34rem; }
  .reservar__picture img { aspect-ratio: 21 / 7; }
}
.contacto-redes a { text-decoration: none; }