/* =========================================================
   TELECLUB DE LOS VALLES — estilos custom
   Paleta extraída del logo (aro dorado sobre tinta negra) y de
   las fotos reales del local: la cal canaria de los muros da el
   crema del fondo y la madera de las mesas los tonos cálidos.
   Tailwind se encarga de la maquetación en grid/flex;
   aquí vive todo lo que Tailwind no puede expresar.
   ========================================================= */

:root {
  /* --- Color ---
     Tinta casi negra + dorado del aro del logo sobre crema de cal
     canaria. Es la paleta del propio medallón del Teleclub. */
  --color-primary: #B27505;   /* dorado profundo, para itálicas y filetes (3,3:1 sobre la crema) */
  --color-accent:  #DB9F05;   /* dorado del aro del logo */
  --gold-lit:      #E9A712;   /* dorado encendido: LED, canal, cita */
  --gold-soft:     #F0C766;
  /* Dorado para texto sobre claro. Estaba en #A9760A y se quedaba en
     3,4:1 sobre la crema: por debajo del 4,5:1 que pide la WCAG para
     texto pequeño, y estos rótulos van a 11-12 px. Bajado hasta que
     cumple sobre los tres cremas de la casa (F3EDE1, F5EFE3 y F1E7D0). */
  --gold-ink:      #865D08;
  --color-deep:    #14100C;   /* tinta casi negra: botones, marco, footer */
  --green-700:     #2A211A;   /* tinta un punto más clara (hover) */
  --color-bg:      #F3EDE1;   /* cal canaria, off-white cálido */
  --color-surface: #FAF6EE;
  --wood:          #E9DFCC;   /* roble de las mesas */
  --color-text:    #241E17;
  --color-muted:   #6D6051;
  --line:          rgba(36,30,23,.12);
  --hair:          #D8D2C7;   /* filete fino entre bloques */

  /* --- Escala tipográfica --- */
  --fs-sm: .875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 2rem;
  --fs-4xl: clamp(2.5rem, 6vw, 5rem);

  /* --- Layout --- */
  --shell: 1220px;
  --gh: 200px;             /* alto de las fotos de la galería */
  /* El alto de la cabecera va atado al del medallón: al reducirlo un 20 %
     el header baja con él y le devuelve ese espacio al hero. */
  --header-h: 106px;
  --header-stuck: 100px;   /* alto de la cabecera ya compactada por scroll */
  /* Proporción del televisor del hero. En el móvil manda el 4:3 del CRT;
     en cuanto la caja se ensancha ese 4:3 daría un mueble desmesurado,
     así que se achata por tramos. */
  --tv-ar: 4 / 3;
  /* Margen izquierdo del `.shell`: lo usan el hero y la sección "La casa"
     para alinear su columna de texto con el resto de la página aunque
     sus cajas se salgan del contenedor. */
  --gutter: max(20px, calc((100vw - var(--shell)) / 2 + 20px));
}
@media (min-width: 560px)  { :root { --tv-ar: 16 / 10; } }
@media (min-width: 640px)  { :root { --header-h: 120px; --header-stuck: 110px; } }
@media (min-width: 720px)  { :root { --tv-ar: 5 / 4; } }   /* el hero pasa a dos columnas */
@media (min-width: 768px)  { :root { --header-h: 168px; --header-stuck: 118px; } }
@media (min-width: 1024px) { :root { --header-h: 136px; --header-stuck: 96px; --tv-ar: 4 / 3; } }

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

/* El formulario de reserva y su resguardo se turnan con el atributo
   `hidden`: cualquier `display` declarado en una clase le ganaría, así
   que aquí se le devuelve la última palabra. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  /* Al saltar a un ancla la cabecera ya está compactada: se reserva ese
     alto y no el del reposo, o quedaría un hueco muerto sobre el título. */
  scroll-padding-top: calc(var(--header-stuck) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: 'Jost', system-ui, sans-serif;
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.7;
  cursor: none;
  overflow-x: hidden;
}

/* El preflight de Tailwind se inyecta con `document.head.append()`, es
   decir DESPUÉS de esta hoja, y declara `body { line-height: inherit }`
   a la misma especificidad, lo que dejaría el cuerpo en el 1.5 que
   Tailwind pone en `html`. Con `html body` (0-0-2) gana el 1.7 de arriba. */
html body { line-height: 1.7; }

body.is-locked { overflow: hidden; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 20px;
}

::selection { background: var(--color-accent); color: var(--color-deep); }

/* ---------------------------------------------------------
   SCROLLBAR PERSONALIZADA
   --------------------------------------------------------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #E8E0D0; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--color-accent), var(--color-primary));
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--color-deep); }
html { scrollbar-color: var(--color-primary) #E8E0D0; scrollbar-width: thin; }

/* ---------------------------------------------------------
   CURSOR PERSONALIZADO — z-index máximo de toda la página
   --------------------------------------------------------- */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 999999;   /* el valor más alto de toda la página */
  border-radius: 50%;
  opacity: 0;
  /* La posición y la escala las compone el rAF de script.js:
     nunca se transiciona `transform` para no pelear con él. */
  transform: translate3d(-100px, -100px, 0) translate(-50%, -50%);
}
.cursor-dot {
  width: 7px; height: 7px;
  background: var(--color-accent);
  transition: opacity .3s ease, background-color .25s ease;
}
.cursor-ring {
  width: 36px; height: 36px;
  border: 1.5px solid rgba(224,165,38,.75);
  transition: opacity .3s ease, border-color .25s ease, background-color .25s ease;
}
.cursor-ready .cursor-dot,
.cursor-ready .cursor-ring { opacity: 1; }

.cursor-hover .cursor-ring {
  border-color: var(--color-accent);
  background: rgba(224,165,38,.14);
}
.cursor-hover .cursor-dot { background: var(--gold-soft); }

/* El `cursor: none` del body NO llega a los enlaces: la hoja del propio
   navegador declara un cursor sobre `a`, y una declaración siempre gana a
   un valor heredado. El preflight de Tailwind añade además
   `button,[role="button"]{cursor:pointer}` después de esta hoja. Sin esto
   la manita nativa se vería junto al cursor personalizado en toda la nav,
   el footer, las redes y el botón flotante de WhatsApp. */
body a,
body button,
body [role="button"],
body label,
body select,
body summary { cursor: none; }

/* En táctil no hay cursor que sustituir */
@media (hover: none), (pointer: coarse) {
  body { cursor: auto; }
  body a,
  body button,
  body [role="button"],
  body label,
  body select,
  body summary { cursor: auto; }
  .cursor-dot, .cursor-ring { display: none; }
}

/* ---------------------------------------------------------
   TIPOGRAFÍA COMPARTIDA
   --------------------------------------------------------- */
.h-display {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 700;
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -.03em;
  margin: 0 0 20px;
  color: var(--color-text);
}
.h-display em {
  font-style: italic;
  font-weight: 400;
  color: var(--color-primary);
}

/* --- Palabras largas: que ninguna se salga de su columna ---
   El alemán encadena sustantivos y salen piezas como
   «Datenschutzerklärung»: veinte letras que a 3,6 rem no caben en la
   columna de ningún titular, y lo que hacía el navegador era dejarlas
   sobresalir por el lado. `break-word` no cambia nada mientras la
   palabra quepa —solo actúa cuando no hay forma— así que los cinco
   idiomas siguen cortando por donde cortaban. */
h1, h2, h3, h4,
.h-display, .hero-title, .m-name, .stat-lbl,
.footer-col a, .contact-list a, .btn { overflow-wrap: break-word; }

/* Y en alemán, además, partición por sílabas: el idioma la necesita de
   verdad y el navegador la sabe hacer con solo tener puesto el `lang`,
   que es lo que hace i18n.js al cambiar de idioma. Así la palabra se
   parte con guion donde toca en vez de cortarse a hachazos. Va atada al
   alemán a propósito: en los otros cuatro no hace falta y activarla
   cambiaría cortes de línea que hoy están bien. */
html[lang="de"] h1, html[lang="de"] h2, html[lang="de"] h3,
html[lang="de"] .h-display, html[lang="de"] .hero-title {
  -webkit-hyphens: auto;
  hyphens: auto;
}

.eyebrow {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: currentColor;
  flex: 0 0 auto;
}
.eyebrow--light { color: var(--gold-soft); }

/* Antetítulo numerado: la cajita "01" / "02" sustituye al filete */
.eyebrow--num { gap: 14px; }
.eyebrow--num::before { display: none; }
.eyebrow-num {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  padding: 3px 6px 2px;
  border: 1px solid rgba(200,132,5,.55);
  border-radius: 2px;
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--gold-ink);
}
.eyebrow--hero { color: var(--gold-ink); font-size: .72rem; letter-spacing: .22em; font-weight: 500; }
.eyebrow--sec  { color: var(--color-muted); font-size: .92rem; letter-spacing: .24em; font-weight: 400; }
@media (max-width: 639px) { .eyebrow--sec { font-size: .78rem; } }

.sec-head { max-width: 640px; margin-bottom: 42px; }
.sec-head .sec-sub {
  color: var(--color-muted);
  font-size: var(--fs-lg);
  line-height: 1.75;
  margin: 0;
  font-weight: 300;
}
.sec-head--split { max-width: none; }
.sec-head--split .sec-sub { max-width: 420px; }
.sec-head--light .h-display { color: #FBF7EF; }
.sec-head--light .h-display em { color: var(--gold-soft); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  font-size: .95rem;
  letter-spacing: .04em;
  color: var(--gold-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(156,107,15,.35);
  padding-bottom: 4px;
  transition: gap .25s ease, border-color .25s ease;
}
.link-arrow:hover { gap: 18px; border-color: var(--color-primary); }

/* ---------------------------------------------------------
   BOTONES
   --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 17px 32px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: 'Jost', sans-serif;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: none;
  position: relative;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, background-color .3s ease, color .3s ease, border-color .3s ease;
}
.btn i { font-size: 1.05em; }
.btn::after {           /* shimmer */
  content: "";
  position: absolute;
  top: 0; left: -130%;
  width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-20deg);
  transition: left .65s cubic-bezier(.22,1,.36,1);
}
.btn:hover::after { left: 135%; }

.btn-gold {
  background: var(--color-accent);
  color: #23180A;
  box-shadow: 0 10px 26px -12px rgba(200,137,26,.85);
}
.btn-gold:hover {
  background: var(--gold-soft);
  transform: translateY(-3px);
  box-shadow: 0 18px 34px -14px rgba(200,137,26,.95);
}

.btn-ghost {
  background: transparent;
  color: #FBF7EF;
  border-color: rgba(251,247,239,.45);
}
.btn-ghost:hover {
  background: rgba(251,247,239,.12);
  border-color: #FBF7EF;
  transform: translateY(-3px);
}

.btn-deep {
  background: var(--color-deep);
  color: #F6F1E7;
}
.btn-deep:hover {
  background: var(--green-700);
  transform: translateY(-3px);
  box-shadow: 0 18px 32px -16px rgba(20,16,12,.85);
}
.btn-deep i { transition: transform .35s cubic-bezier(.22,1,.36,1); }
.btn-deep:hover i { transform: translateX(5px); }

/* Botón de contorno sobre fondo claro */
.btn-line {
  background: transparent;
  color: var(--color-text);
  border-color: rgba(36,30,23,.26);
}
.btn-line:hover {
  background: rgba(36,30,23,.05);
  border-color: var(--color-text);
  transform: translateY(-3px);
}

.btn-block { width: 100%; }

/* ---------------------------------------------------------
   LOGO — kit vectorial (SVG en curvas, fondo transparente)
   --------------------------------------------------------- */
/* El medallón anterior era un PNG cuadrado de 800 × 800 con el nombre
   grabado dentro y un 32 % de tinta negra: sobre el footer oscuro ese
   texto quedaba ilegible, así que había que servirlo sobre un disco crema
   a caja completa. El logotipo nuevo llega en SVG y en varios acabados, de
   modo que el disco sobra: en fondo claro va la versión bicolor —emblema
   en oro, texto en tinta— y en fondo oscuro la dorada. Se acabaron el
   `background` y el `border-radius` de esta clase.

   El reparto de piezas es:

     · cabecera ................. horizontal bicolor   .logo-img--brand
     · panel del menú ........... vertical bicolor     .logo-img--menu
     · footer ................... vertical dorado      .logo-img--footer

   Cada `img.logo-img` lleva SIEMPRE uno de esos modificadores: la clase base
   no declara medida a propósito, para que ninguna pieza herede la de otra. */
.logo-img {
  width: auto;
  object-fit: contain;
  display: block;
  flex: 0 0 auto;
  transition: height .4s cubic-bezier(.22,1,.36,1), width .4s cubic-bezier(.22,1,.36,1);
}

/* LA MARCA DE LA CABECERA — el logotipo horizontal en toda la escala, del
   móvil al escritorio. Se mide por ANCHO y no por alto: es una pieza de
   3,19:1, así que el alto sale solo y lo que hay que vigilar es que quepa a
   lo ancho de la fila. Nunca baja de los 170 px que el manual fija como ancho
   mínimo para esta versión.

   Qué comparte la fila con la marca, tramo a tramo:

     · hasta 767 px ..... solo la hamburguesa (~42 px); el teléfono aún no sale
     · 768 - 1023 px .... teléfono + hamburguesa (~208 px), sin navegación
     · desde 1024 px .... teléfono (~154 px) y la navegación en el centro

   Hasta 1023 px sobra sitio y el ancho lo marca el gusto. Desde 1024 manda la
   cuenta de la rejilla, que va justo abajo. */
.logo-img--brand { width: clamp(180px, 58vw, 240px); }
@media (min-width: 640px) { .logo-img--brand { width: 248px; } }            /* barra 120 */
@media (min-width: 768px) { .logo-img--brand { width: clamp(260px, 36vw, 340px); } }  /* barra 168 */

/* El acabado dorado es el suplente: solo sale en la portada, en móvil y con la
   cabecera aún retirada sobre la fachada. La regla que lo saca está abajo del
   todo, junto a la que retira la cabecera. Lleva también `--brand`, así que
   hereda todos los anchos de arriba sin repetirlos. */
.logo-img--brand-oro { display: none; }

/* DESDE 1024 px — con la navegación puesta, el ancho sale de una cuenta y no
   a ojo. La cabecera es una rejilla `1fr auto 1fr` con 20 px de hueco y el
   contenido del `.shell` es min(ancho, 1220) − 40, así que a la marca le toca:

       columna = (contenido − navegación − 40) / 2

   El logotipo tiene que caber DENTRO de esa columna con aire de sobra: si la
   llena, el único hueco que queda hasta "Inicio" son los 20 px del `gap` y la
   cabecera se ve apretada.

   Con los 38 px de interletraje de siempre la navegación mide 581 px, y a
   1024 px de ancho eso deja una columna de 181: no da. Por eso en el tramo
   1024-1179 —y solo ahí— la navegación aprieta a 26 px, baja a ~521 y la
   columna sube a 211, que ya deja unos 55 px de aire. De 1180 en adelante
   sobra sitio y la navegación recupera su separación normal. */
@media (min-width: 1024px) {
  .logo-img--brand { width: clamp(176px, 17vw, 232px); }
}
/* El apretón de la navegación en ese tramo vive junto a `.main-nav`, más
   abajo en esta hoja: si se declarase aquí, la regla suelta de `.main-nav`
   —posterior y de la misma especificidad— le devolvería sus 38 px. */

/* Al hacer scroll la cabecera se compacta y la marca baja con ella: un 10 %
   menos de ancho en cada tramo, sin bajar nunca de los 170 px del mínimo. */
.site-header.is-stuck .logo-img--brand { width: clamp(170px, 52vw, 216px); }
@media (min-width: 640px)  { .site-header.is-stuck .logo-img--brand { width: 224px; } }
@media (min-width: 768px)  { .site-header.is-stuck .logo-img--brand { width: clamp(234px, 32vw, 300px); } }
@media (min-width: 1024px) { .site-header.is-stuck .logo-img--brand { width: clamp(170px, 15vw, 204px); } }

/* FOOTER — el vertical dorado sobre la tinta del pie. Los altos salen del
   mínimo de 113 px de ancho: a 1,096:1, 104 px de alto son 114 px de ancho,
   justo por encima. */
.logo-img--footer { height: 104px; }
@media (min-width: 640px)  { .logo-img--footer { height: 112px; } }
@media (min-width: 768px)  { .logo-img--footer { height: 138px; } }
@media (min-width: 1024px) { .logo-img--footer { height: 124px; } }

/* MENÚ a pantalla completa: el vertical bicolor encabeza el panel, sobre el
   blanco del propio panel.
   Selector de dos clases a propósito: cualquier regla suelta de `.logo-img`
   que aparezca más abajo en la hoja —como la de pantallas muy bajas—
   pisaría estos altos por ser posterior. Con 0-2-0 mandan siempre los de
   aquí. */
.mobile-menu .logo-img--menu {
  height: 116px;
  width: auto;
  object-fit: contain;
  background: transparent;
}
@media (min-width: 640px) { .mobile-menu .logo-img--menu { height: 126px; } }
@media (min-width: 768px) { .mobile-menu .logo-img--menu { height: 148px; } }
/* Única excepción: pantallas bajas (móvil en horizontal). Ahí el panel
   entero se mide en `svh` y la marca tiene que acompañar, o los seis
   enlaces y el botón de reserva no cabrían sin barra de scroll. */
@media (max-height: 620px) {
  .mobile-menu .logo-img--menu { height: clamp(56px, 13svh, 100px); }
}

/* ---------------------------------------------------------
   1. HEADER
   --------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  background: rgba(245,239,227,.88);
  backdrop-filter: blur(16px) saturate(1.08);
  border-bottom: 1px solid rgba(36,30,23,.09);
  transition: background-color .4s ease, box-shadow .4s ease;
}
.site-header.is-stuck {
  background: rgba(245,239,227,.97);
  box-shadow: 0 16px 34px -28px rgba(36,30,23,.75);
}
.site-header.is-stuck .header-inner { min-height: var(--header-stuck); }

/* Rejilla de 3 columnas: marca a la izquierda, navegación centrada en
   el viewport y acciones a la derecha. Cuando la nav se oculta en
   móvil la columna central colapsa y los extremos siguen en su sitio. */
.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  min-height: var(--header-h);
  transition: min-height .4s cubic-bezier(.22,1,.36,1);
}

/* La marca es solo el medallón: el propio logo ya lleva el nombre
   "Teleclub \ Los Valles" grabado, así que repetirlo en texto al lado
   duplicaba la lectura. */
.brand {
  grid-column: 1;
  display: flex;
  align-items: center;
  text-decoration: none;
  justify-self: start;
}
.brand .logo-img { transition: transform .35s ease; }
.brand:hover .logo-img { transform: scale(1.04); }

/* Las columnas se declaran explícitamente: si la nav se oculta en móvil
   y no se fija la columna, el autoposicionado colocaría las acciones en
   la columna central y el botón hamburguesa quedaría en mitad del header. */
.main-nav { grid-column: 2; display: none; gap: 38px; justify-self: center; }
@media (min-width: 1024px) { .main-nav { display: flex; } }
/* Entre 1024 y 1179 px la navegación aprieta de 38 a 26 px. Con 38 mide
   581 px y a la marca solo le quedaba una columna de 181, es decir el
   logotipo pegado a "Inicio"; con 26 baja a ~521 y la columna sube a ~211,
   que ya deja aire. Desde 1180 px sobra sitio y recupera su separación. */
@media (min-width: 1024px) and (max-width: 1179px) { .main-nav { gap: 26px; } }
.main-nav a {
  position: relative;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-text);
  text-decoration: none;
  padding: 8px 0;
  transition: color .3s ease;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 2px;
  width: 0; height: 1.5px;
  background: var(--color-accent);
  transition: width .35s cubic-bezier(.22,1,.36,1);
}
.main-nav a:hover::after,
.main-nav a.is-active::after { width: 100%; }
.main-nav a:hover,
.main-nav a.is-active { color: var(--gold-ink); }
/* El panel móvil va en blanco: la página activa se marca con el dorado
   apto para texto sobre claro, no con el dorado claro del footer. */
.mobile-nav a.is-active { color: var(--gold-ink); }

/* --- La barra, en cinco idiomas -------------------------------------
   Los seis rótulos no miden lo mismo en todos los idiomas: en alemán
   («Speisekarte», «Reservieren») ocupan 77 px más que en español y en
   francés 33 px más. Con las medidas de siempre eso dejaba la cabecera
   en negativo —a 1024 px hasta el español se pasa por 3 px— y el
   navegador lo resolvía partiendo los rótulos: «Das / Haus», «Die /
   Küche», y la cabecera al doble de alto.

   Primero, un rótulo NUNCA parte. Con `nowrap` y sin encogimiento el
   enlace conserva su ancho real, así que quien cede es la barra entera
   y no la palabra. Y para que ceda con criterio hay dos escalones que
   pone `script.js` midiendo de verdad (marca + barra + acciones contra
   el ancho útil), no adivinando por idioma ni por breakpoint. */
.main-nav a { white-space: nowrap; flex: 0 0 auto; }

/* Escalón 1 — la barra aprieta: menos separación, menos interletraje y
   un punto menos de cuerpo. Recupera entre 75 y 145 px, justo lo que le
   sobra al alemán. Es lo que se ve en francés y alemán de 1100 px para
   arriba, y en todos los idiomas a 1024. */
.site-header.nav-apretada .main-nav { gap: 22px; }
.site-header.nav-apretada .main-nav a { font-size: .74rem; letter-spacing: .09em; }

/* Escalón 2 — ni apretando cabe: la barra se retira y el trabajo pasa al
   botón de menú, que ya existe y funciona en cualquier ancho. Hoy solo
   entra en alemán entre 1024 y 1099 px. Las dos clases ganan por
   especificidad a las reglas sueltas del tramo de 1024. */
.site-header.nav-plegada .main-nav { display: none; }
.site-header.nav-plegada .burger { display: grid; }

/* Mientras se mide, sin transiciones: la medida se toma con la cabecera
   suelta —el logotipo grande, que es el caso peor— para que la barra no
   aparezca y desaparezca al hacer scroll. Sin esto, ese ida y vuelta del
   ancho del logotipo arrancaría una animación en cada medición. */
.site-header.midiendo,
.site-header.midiendo * { transition: none !important; }

.header-actions { grid-column: 3; display: flex; align-items: center; gap: 12px; justify-self: end; }

/* --------------------------------------------------------------
   La cabecera en móvil: dos columnas, no tres

   Por debajo de 1024 px la navegación central está oculta, pero la
   rejilla `1fr auto 1fr` seguía cobrando sus DOS huecos de 20 px por
   una columna que no pinta nada. Con el medallón a 58vw, la cuenta a
   320 px salía a 185 + 20 + 0 + 20 + 119 + 32 de margen = 376 px en
   una pantalla de 320: la cabecera se salía 56 px por la derecha.

   No se veía como una barra de scroll porque el `body` lleva
   `overflow-x: hidden`, así que lo que hacía era RECORTAR lo último de
   la fila — que es justo el botón del menú. En un móvil de 390 px
   asomaban 12 de sus 46 px: el menú de navegación quedaba fuera de la
   pantalla y no había forma de abrirlo.

   Dos columnas (un solo hueco, y más estrecho), tracks que sí pueden
   encoger —`minmax(0, 1fr)`, porque un `1fr` a secas no baja de su
   contenido— y el medallón atado a 46vw con tope, que es lo que deja
   sitio de sobra para el selector de idioma y la hamburguesa.
   -------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  .header-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
  }
  /* Sin esto, el `grid-column: 3` de arriba se inventaría una tercera
     columna y volveríamos a tener el mismo desbordamiento. */
  .header-actions { grid-column: 2; }
}

@media (max-width: 767.98px) {
  .logo-img--brand { width: min(46vw, 220px); max-width: 100%; }
  .site-header.is-stuck .logo-img--brand { width: min(42vw, 200px); }
}

/* Píldora de teléfono en tinta con el icono en dorado */
.header-phone {
  display: none;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  padding: 12px 21px;
  border-radius: 999px;
  background: var(--color-deep);
  color: #F6F1E7;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  transition: background-color .3s ease, transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}
@media (min-width: 768px) { .header-phone { display: inline-flex; } }
.header-phone i { color: var(--gold-lit); font-size: .8rem; }
.header-phone:hover {
  background: var(--green-700);
  transform: translateY(-2px);
  box-shadow: 0 16px 28px -16px rgba(20,16,12,.85);
}

/* Botón hamburguesa */
.burger {
  width: 46px; height: 46px;
  display: grid;
  place-content: center;
  gap: 6px;
  border: 1px solid rgba(36,30,23,.18);
  border-radius: 50%;
  background: transparent;
  cursor: none;
  padding: 0;
  transition: border-color .3s ease, background-color .3s ease;
}
@media (min-width: 1024px) { .burger { display: none; } }
.burger span {
  display: block;
  width: 18px; height: 1.6px;
  background: var(--color-deep);
  border-radius: 2px;
  transition: background-color .4s ease, transform .35s ease, opacity .25s ease;
}
.burger span:nth-child(2) { width: 13px; margin-left: auto; }
.burger:hover { border-color: var(--color-accent); background: rgba(219,159,5,.14); }
.burger:hover span:nth-child(2) { width: 18px; }

/* ---------------------------------------------------------
   MENÚ HAMBURGUESA (móvil)
   --------------------------------------------------------- */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 6900;
  background: rgba(16,12,8,.62);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility .4s ease;
}
.menu-overlay.is-open { opacity: 1; visibility: visible; }

/* El panel ocupa la pantalla entera y va en blanco puro: entra
   deslizando desde la derecha y tapa por completo la página, el
   header incluido. */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 7000;
  width: 100%;
  height: 100%;
  height: 100dvh;
  background: #FFFFFF;
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .48s cubic-bezier(.65,0,.35,1);
  overflow-y: auto;
}
.mobile-menu.is-open { transform: translateX(0); }

/* Medallón a la izquierda y aspa en la esquina derecha: la cruz sale del
   flujo para que el logo mande en la alineación de la cabecera del panel.
   Sin filete inferior: el panel es una superficie limpia y el único
   ritmo horizontal lo marcan los separadores entre enlaces. */
/* El logotipo va centrado en el panel. El aspa no cuenta para el reparto
   —es absoluta, pegada al borde derecho—, así que centrar la fila centra el
   logotipo respecto al panel entero y no respecto al hueco que dejaba el
   botón, que era lo que descuadraba la vista. */
.mobile-menu-head {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(7px, 2.2svh, 18px) 20px;
  position: relative;
}
/* El aspa va desnuda, sin el aro que la rodeaba: el botón conserva su
   caja de 42 px como zona de toque, pero no se dibuja. */
.menu-close {
  position: absolute;
  top: 50%; right: 18px;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-deep);
  font-size: 1.1rem;
  cursor: none;
  transform: translateY(-50%);
  transition: background-color .3s ease, color .3s ease, transform .3s ease;
}
.menu-close:hover {
  background: var(--color-accent);
  color: #23180A;
  transform: translateY(-50%) rotate(90deg);
}

/* La navegación se come el alto sobrante y se centra en vertical;
   cada enlace va centrado en horizontal con un filete entre medias.
   Cuerpo e interlineado se miden en `svh`: los seis enlaces, la cabecera
   y el botón de reserva tienen que caber SIEMPRE en una pantalla, sin
   barra de scroll, desde un móvil en horizontal hasta una tableta. */
.mobile-nav {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3px, 1.7svh, 14px) 26px;
  text-align: center;
  position: relative;
}
.mobile-nav a {
  display: block;
  padding: clamp(4px, 2.05svh, 20px) 2px;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.06rem, 3.95svh, 1.86rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.015em;
  color: var(--color-deep);
  text-decoration: none;
  transition: color .3s ease, letter-spacing .3s ease;
}
.mobile-nav a:hover { color: var(--gold-ink); letter-spacing: .03em; }
.mobile-nav hr {
  width: min(230px, 64%);
  height: 1px;
  border: 0;
  margin: 0 auto;
  background: linear-gradient(90deg, transparent, rgba(36,30,23,.22), transparent);
}

.mobile-menu-foot {
  margin-top: auto;
  padding: clamp(9px, 2.2svh, 22px) 26px clamp(11px, 2.6svh, 26px);
  text-align: center;
  position: relative;
}
/* El botón de reserva entra en el mismo reparto de alto que el resto */
.mobile-menu-foot .btn {
  padding: clamp(10px, 2.1svh, 17px) 28px;
  font-size: clamp(.68rem, 1.55svh, .8rem);
}

/* ---------------------------------------------------------
   2. HERO
   --------------------------------------------------------- */
.hero {
  position: relative;
  /* El fondo inferior deja sitio a la segunda pantalla, que sobresale
     por debajo del mueble en móvil y tablet. */
  padding: calc(var(--header-h) + 30px) 0 86px;
  overflow: hidden;
  isolation: isolate;
  background: var(--color-bg);
}
/* En el ordenador el hero tiene que caber ENTERO en la primera pantalla,
   sin necesidad de bajar. Ese presupuesto de alto lo reparten la cabecera
   (--header-h), el aire de arriba y abajo, y lo que quede es lo máximo que
   pueden medir la columna de texto y el televisor. */
@media (min-width: 1024px) {
  .hero {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding: calc(var(--header-h) + 18px) 0 30px;
  }
}

.hero-grid { display: grid; gap: 44px; width: 100%; }
@media (min-width: 1024px) {
  .hero-grid {
    /* 55/45 en lugar de 52/48: el televisor cede ancho —y con el 4:3,
       alto— para que la composición entre en pantalla. */
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    align-items: center;
    gap: 0;
  }
  .hero-title  { margin-bottom: 22px; font-size: clamp(2.6rem, 3.55vw, 4.35rem); }
  .hero-lead   { margin-bottom: 28px; }
  .hero-facts  { margin-top: 30px; padding-top: 22px; }
}

/* Portátiles de pantalla corta (la gran mayoría: 1366×768, 1440×900):
   el mismo contenido con el ritmo comprimido, o no cabría. */
@media (min-width: 1024px) and (max-height: 900px) {
  .hero-title { font-size: clamp(2.3rem, 3.05vw, 3.5rem); margin-bottom: 16px; }
  .hero-lead  { font-size: 1.03rem; margin-bottom: 22px; }
  .hero-cta .btn { padding: 15px 26px; }
  .hero-facts { margin-top: 22px; padding-top: 17px; gap: 10px; }
}

/* --- Columna de texto: alineada al margen del `.shell` --- */
.hero-copy { position: relative; z-index: 2; padding-inline: var(--gutter); }
@media (min-width: 1024px) { .hero-copy { padding-right: 56px; } }

.hero-title {
  margin: 0 0 30px;
  max-width: 6em;                 /* fuerza el corte "Aquí el pueblo / se junta a comer" */
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: clamp(2.7rem, 3.95vw, 4.9rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--color-text);
}
.hero-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--color-primary);
}

.hero-lead {
  max-width: 27.4em;
  margin: 0 0 38px;
  font-size: 1.12rem;
  font-weight: 300;
  line-height: 1.76;
  color: var(--color-muted);
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 18px; }

/* Datos prácticos bajo un filete fino */
.hero-facts {
  list-style: none;
  max-width: 30em;
  margin: 42px 0 0;
  padding: 30px 0 0;
  border-top: 1px solid var(--hair);
  display: grid;
  gap: 13px;
}
.hero-facts li { display: flex; align-items: center; gap: 15px; }
.hero-facts i { color: var(--color-accent); font-size: .95rem; width: 16px; flex: 0 0 auto; }
.hero-facts span { font-size: .92rem; font-weight: 400; color: #3A3128; }

/* Marca de agua: el nombre del pueblo detrás de todo */
.hero-mark {
  position: absolute;
  left: var(--gutter);
  bottom: 22px;
  z-index: 0;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: clamp(4rem, 7.5vw, 10.5rem);
  line-height: .8;
  letter-spacing: -.04em;
  color: rgba(200,132,5,.11);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
@media (max-width: 1023px) { .hero-mark { display: none; } }

/* =========================================================
   ELEMENTO CREATIVO TEMÁTICO — EL TELEVISOR
   Un teleclub era el local donde el pueblo se juntaba a ver
   la única tele que había: la fachada se sirve dentro de un
   televisor de carcasa, con barrido CRT, indicador de emisión
   y una segunda pantalla más pequeña encima.
   ========================================================= */
.hero-tv { position: relative; z-index: 1; padding-inline: var(--gutter); }
@media (min-width: 1024px) { .hero-tv { padding-inline: 0; } }
.tv-tilt {
  transform: perspective(1500px) rotateX(var(--tvx, 0deg)) rotateY(var(--tvy, 0deg));
  transition: transform .7s cubic-bezier(.22,1,.36,1);
}

.tv-shell {
  position: relative;
  width: 100%;
  aspect-ratio: var(--tv-ar);
  padding: 14px;
  border-radius: 30px;
  background: linear-gradient(155deg, #2A211A 0%, #100C08 52%, #1E1710 100%);
  box-shadow:
    inset 0 1px 0 rgba(246,241,231,.09),
    0 60px 100px -58px rgba(20,16,12,.9),
    0 0 0 1px rgba(0,0,0,.28);
}
@media (min-width: 1024px) {
  .tv-shell {
    /* se sale por la derecha del viewport, como un mueble que sigue,
       pero mordiendo menos que antes: el mueble ocupaba demasiado */
    width: calc(100% + 54px);
    padding: 16px;
    border-radius: 40px;
    transform: skewX(-3.6deg);
    /* Techo duro: en pantallas muy anchas el 4:3 disparaba el alto del
       mueble y era él quien empujaba el hero por debajo del pliegue. */
    max-height: calc(100svh - var(--header-h) - 92px);
  }
}

.tv-screen {
  position: relative;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: #0A0806;
}
@media (min-width: 1024px) { .tv-screen { border-radius: 30px; } }
.tv-screen img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 46%;
  display: block;
}

/* Barrido CRT + banda de sincronía que baja despacio */
.tv-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(10,8,6,.17) 0 1px, transparent 1px 4px);
  mix-blend-mode: multiply;
  opacity: .6;
  overflow: hidden;
}
.tv-scan::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 24%;
  background: linear-gradient(180deg, transparent, rgba(255,241,208,.16), transparent);
  mix-blend-mode: screen;
  animation: tv-roll 7.5s linear infinite;
}
@keyframes tv-roll {
  from { transform: translateY(-140%); }
  to   { transform: translateY(560%); }
}

/* Viñeteado del cristal curvo */
.tv-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(118% 88% at 50% 42%, transparent 52%, rgba(10,8,6,.42) 100%);
  box-shadow: inset 0 0 62px rgba(10,8,6,.4);
}

/* Rótulo de canal, abajo a la derecha de la pantalla */
.tv-chan {
  position: absolute;
  left: 16px;
  bottom: 20px;
  z-index: 3;
  padding: 6px 13px;
  border-radius: 6px;
  border: 1px solid rgba(233,167,18,.6);
  background: rgba(16,12,8,.82);
  color: var(--gold-lit);
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (min-width: 1024px) { .tv-chan { left: auto; right: 104px; bottom: 30px; transform: skewX(3.6deg); } }

/* Segunda pantalla, encajada sobre la esquina inferior izquierda */
.tv-pip {
  position: absolute;
  z-index: 4;
  right: 14px;
  bottom: -30px;
  width: min(38%, 240px);
  margin: 0;
}
@media (min-width: 1024px) {
  .tv-pip {
    right: auto;
    left: max(-13.5%, calc(-1 * var(--gutter) + 14px));
    bottom: 4%;
    width: clamp(178px, 26%, 236px);
  }
}
.pip-screen {
  display: block;
  padding: 9px;
  border-radius: 20px;
  background: linear-gradient(160deg, #2A211A, #100C08);
  box-shadow: 0 34px 60px -32px rgba(20,16,12,.92), 0 0 0 1px rgba(0,0,0,.25);
}
.pip-screen img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 12px;
}
.tv-pip figcaption {
  margin-top: 9px;
  padding: 9px 13px;
  border-radius: 8px;
  background: rgba(20,16,12,.93);
  color: rgba(243,237,225,.9);
  font-size: .53rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.3;
}

/* Aviso de bajada, pegado al filo izquierdo del viewport */
.hero-scroll {
  position: absolute;
  left: clamp(14px, 2.6vw, 42px);
  bottom: 34px;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  z-index: 2;
}
@media (min-width: 1560px) { .hero-scroll { display: flex; } }
.hero-scroll-line {
  width: 1px; height: 46px;
  background: linear-gradient(180deg, transparent, var(--color-accent));
  position: relative;
  overflow: hidden;
}
.hero-scroll-line::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 40%;
  background: var(--color-deep);
  animation: scroll-run 2.2s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes scroll-run {
  0%   { transform: translateY(-110%); }
  60%, 100% { transform: translateY(260%); }
}
.hero-scroll-txt {
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--color-muted);
  transition: color .3s ease;
}
.hero-scroll:hover .hero-scroll-txt { color: var(--gold-ink); }

/* ---------------------------------------------------------
   3. SOBRE NOSOTROS
   --------------------------------------------------------- */
.about { padding: 84px 0 0; position: relative; }
@media (min-width: 1024px) { .about { padding-top: 128px; } }

.about-grid { display: grid; gap: 62px; }
@media (min-width: 1024px) {
  .about-grid {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.3fr);
    /* Dos filas: la columna de la izquierda lleva la composición de fotos
       arriba y los cuatro datos justo debajo —ahí quedaba un hueco muerto
       del alto de media sección—, mientras la de texto ocupa las dos. */
    grid-template-rows: auto 1fr;
    gap: 70px;
    align-items: start;
  }
  .about-media { grid-column: 1; grid-row: 1; }
  .about-copy  { grid-column: 2; grid-row: 1 / span 2; }
  .about-grid > .stats {
    grid-column: 1;
    grid-row: 2;
    /* Los cuatro en una sola línea, a la misma anchura que la composición
       de fotos de encima (400 px). La columna da entre 378 px a 1024 y
       400 px de ahí en adelante, así que cada dato dispone de ~87-91 px:
       el número y la etiqueta bajan de cuerpo lo justo para que quepan
       sin partirse, con la calle apretada a 10 px. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 10px;
    max-width: 400px;
    margin-top: 34px;   /* el marco dorado vuela 58 px por debajo de la foto */
    padding-top: 30px;
  }
  .about-grid > .stats .stat-num { font-size: clamp(1.5rem, 1.95vw, 2.1rem); }
  .about-grid > .stats .stat-lbl {
    margin-top: 9px;
    font-size: .52rem;
    letter-spacing: .07em;
    line-height: 1.55;
  }
}

/* --- Composición de fotos: principal + marco dorado desplazado
       + segunda foto encajada saliéndose por la izquierda --- */
.about-media { position: relative; }
/* La composición se topa: a 470 px de ancho la foto vertical medía casi
   600 px de alto y desequilibraba la sección. Con el tope, marco e inset
   —que se miden en porcentaje de la caja— encogen con ella. */
@media (min-width: 1024px) { .about-media { margin-top: 56px; max-width: 400px; } }

.about-media > img {
  position: relative;
  z-index: 1;
  display: block;
  width: 93%;
  margin-left: 7%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 26px;
  box-shadow: 0 44px 74px -46px rgba(36,30,23,.7);
}

.about-frame {
  position: absolute;
  z-index: 0;
  left: 0; right: 0;
  top: 44px; bottom: -58px;
  border: 1px solid rgba(200,132,5,.5);
  border-radius: 26px;
}

.about-inset {
  position: absolute;
  z-index: 2;
  left: max(-34%, calc(-1 * var(--gutter) + 12px));
  bottom: -68px;
  width: min(46%, 240px);
  margin: 0;
  padding: 7px;
  border-radius: 16px;
  background: var(--color-bg);
  box-shadow: 0 34px 60px -34px rgba(36,30,23,.72);
}
@media (max-width: 1023px) {
  .about-inset { left: auto; right: -8px; bottom: -46px; width: min(42%, 200px); }
}
/* En móvil la composición entera se encoge y se centra: la foto
   vertical ocupaba casi todo el alto de la pantalla */
@media (max-width: 719px) {
  .about-media { max-width: min(74vw, 292px); margin-inline: auto; }
  .about-media > img { border-radius: 22px; }
  .about-frame { top: 32px; bottom: -42px; border-radius: 22px; }
  .about-inset {
    right: -20px;
    bottom: -32px;
    width: min(48%, 142px);
    padding: 6px;
    border-radius: 14px;
  }
  .about-inset img { border-radius: 9px; }
}
.about-inset img {
  display: block;
  width: 100%;
  aspect-ratio: 1.08;
  object-fit: cover;
  border-radius: 10px;
}

/* --- Columna de texto --- */
.about-copy .h-display {
  max-width: 4.7em;               /* corta en "Un teleclub / que acabó / en cocina" */
  font-size: clamp(2.3rem, 3.55vw, 4.2rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.022em;
  margin-bottom: 30px;
}
.about-copy p {
  margin: 0 0 22px;
  max-width: 33em;
  color: var(--color-muted);
  font-weight: 300;
  font-size: 1.12rem;
  line-height: 1.78;
}
.about-copy p:last-of-type { margin-bottom: 0; }

.about-quote {
  margin: 40px 0 0;
  padding: 4px 0 4px 26px;
  border-left: 4px solid var(--gold-lit);
}
.about-quote p {
  margin: 0;
  max-width: 18em;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.35rem, 1.6vw, 1.9rem);
  line-height: 1.5;
  letter-spacing: -.01em;
  color: var(--color-deep);
}

.stats {
  margin: 46px 0 0;
  padding-top: 34px;
  border-top: 1px solid var(--hair);
}
.stat { padding: 0; }
.stat-num {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.9rem, 2.6vw, 2.85rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--color-deep);
}
.stat-lbl {
  display: block;
  margin-top: 10px;
  font-size: .6rem;
  line-height: 1.65;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--color-muted);
}
@media (min-width: 640px) {
  .stat-lbl { font-size: .64rem; letter-spacing: .15em; }
}

/* ---------------------------------------------------------
   ELEMENTO CREATIVO TEMÁTICO — la espina del logo se dibuja
   sola al entrar en pantalla (stroke-dashoffset)
   --------------------------------------------------------- */
.divider {
  display: flex;
  justify-content: center;
  padding: 66px 20px 6px;
}
.divider--tight { padding: 46px 20px 0; }
/* La espina de la galería se apoyaba justo encima del bloque oscuro de
   "Por qué elegirnos". Se le da por debajo el mismo aire que tiene la de
   "La casa" antes de la banda: 6 px de la propia caja + los 52 px de
   margen de `.band`. Solo la de la galería: la de la carta no lleva un
   bloque oscuro detrás. */
.gallery .divider--tight { padding-bottom: 58px; }
.espina {
  width: min(300px, 68vw);
  color: var(--color-primary);
  overflow: visible;
}
.espina-p {
  stroke-dasharray: var(--len, 300);
  stroke-dashoffset: var(--len, 300);
}
.espina-eye { opacity: 0; transition: opacity .5s ease .9s; }
.espina.is-drawn .espina-p {
  animation: espina-draw 1.5s cubic-bezier(.65,0,.35,1) forwards;
  animation-delay: var(--d, 0s);
}
.espina.is-drawn .espina-eye { opacity: 1; }
@keyframes espina-draw { to { stroke-dashoffset: 0; } }

/* ---------------------------------------------------------
   4. MARQUEE — patrón obligatorio: track con 2 sets
   idénticos, width: max-content y traslación al -50 %
   --------------------------------------------------------- */
.marquee-wrapper {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.marquee-track {
  display: inline-flex;
  align-items: center;
  width: max-content;
  will-change: transform;
  animation: marquee-left 42s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }

@keyframes marquee-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes marquee-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

.band {
  background: var(--color-deep);
  padding: 15px 0;          /* banda un 30 % más compacta */
  margin-top: 52px;
  border-block: 1px solid rgba(224,165,38,.3);
  position: relative;
  overflow: hidden;
}
.band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 140% at 50% 0%, rgba(224,165,38,.14), transparent 70%);
  pointer-events: none;
}
/* Escala reducida al 70 % respecto a la versión anterior */
.marquee-item {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.05rem, 2.38vw, 1.75rem);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -.02em;
  color: #FBF7EF;
  padding: 0 4px;
  flex: 0 0 auto;
}
.marquee-sep {
  flex: 0 0 auto;
  padding: 0 15px;
  color: var(--color-accent);
  font-size: clamp(.6rem, 1.12vw, .8rem);
  transform: translateY(-1px);
}

/* ---------------------------------------------------------
   5. SERVICIOS
   --------------------------------------------------------- */
.services { padding: 84px 0 76px; }
@media (min-width: 1024px) { .services { padding: 116px 0 104px; } }

.svc {
  position: relative;
  padding: 34px 28px 38px;
  background: var(--color-surface);
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  transition: transform .45s cubic-bezier(.22,1,.36,1), border-color .45s ease, background-color .45s ease, box-shadow .45s ease;
}
.svc::before {   /* velo dorado que sube al hacer hover */
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 0;
  background: linear-gradient(180deg, rgba(224,165,38,.1), rgba(224,165,38,.02));
  transition: height .5s cubic-bezier(.22,1,.36,1);
}
.svc:hover {
  transform: translateY(-6px);
  border-color: rgba(200,137,26,.55);
  box-shadow: 0 30px 50px -34px rgba(30,27,22,.6);
}
.svc:hover::before { height: 100%; }
.svc > * { position: relative; }

/* Cada tarjeta con altura ligeramente distinta: rompe la rejilla plana */
.svc:nth-child(2), .svc:nth-child(4), .svc:nth-child(6) { padding-top: 46px; }

.svc-num {
  position: absolute;
  top: 16px; right: 20px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 3.1rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.05em;
  color: rgba(30,27,22,.07);
  transition: color .45s ease;
}
.svc:hover .svc-num { color: rgba(200,137,26,.24); }

.svc-ico {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(224,165,38,.14);
  border: 1px solid rgba(200,137,26,.3);
  color: var(--gold-ink);
  font-size: 1.28rem;
  margin-bottom: 20px;
  transition: background-color .45s ease, color .45s ease, transform .55s cubic-bezier(.22,1,.36,1);
}
.svc:hover .svc-ico {
  background: var(--color-deep);
  border-color: var(--color-deep);
  color: var(--gold-soft);
  transform: rotate(-8deg) scale(1.06);
}

.svc h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0 0 10px;
  color: var(--color-deep);
}
.svc p {
  margin: 0 0 18px;
  font-size: .95rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--color-muted);
}
.svc-line {
  display: block;
  width: 30px; height: 2px;
  background: var(--color-primary);
  transition: width .5s cubic-bezier(.22,1,.36,1);
}
.svc:hover .svc-line { width: 74px; }

/* Remate de la sección: llamada a la carta completa */
.svc-foot {
  margin-top: 44px;
  padding-top: 34px;
  border-top: 1px solid var(--hair);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
@media (min-width: 640px) {
  .svc-foot { flex-direction: row; align-items: center; justify-content: space-between; gap: 28px; }
}
.svc-foot p {
  margin: 0;
  max-width: 30em;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -.015em;
  color: var(--color-deep);
}

/* ---------------------------------------------------------
   6. GALERÍA
   --------------------------------------------------------- */
.gallery {
  padding: 76px 0 0;
  background: linear-gradient(180deg, var(--wood) 0%, rgba(231,214,188,.35) 34%, var(--color-bg) 100%);
  position: relative;
}
@media (min-width: 1024px) { .gallery { padding-top: 104px; } }

/* Las bandas se desvanecen por los dos extremos: las fotos parecen
   aparecer y desaparecer "de la nada" en lugar de cortarse en seco. */
.gal-row {
  padding: 8px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 11%, #000 89%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 11%, #000 89%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}
@media (min-width: 1024px) {
  .gal-row {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  }
}
.gal-row + .gal-row { margin-top: 4px; }

/* La separación va como margin en cada ítem, NO como `gap` en el
   track: con `gap` los dos sets no miden exactamente lo mismo y el
   -50 % dejaría medio hueco visible en cada vuelta del bucle. */
.gal-track--right { animation: marquee-right 74s linear infinite; }
.gal-track--left  { animation: marquee-left  66s linear infinite; }

.g-item {
  flex: 0 0 auto;
  height: var(--gh);
  margin: 0 14px 0 0;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  cursor: none;
  background: rgba(36,30,23,.08);
  box-shadow: 0 18px 34px -26px rgba(30,27,22,.8);
  transition: box-shadow .45s ease, transform .45s cubic-bezier(.22,1,.36,1);
}
.g-item img {
  height: 100%;
  width: auto;
  max-width: none;      /* neutraliza el max-width:100% del preflight de Tailwind */
  display: block;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.22,1,.36,1), filter .5s ease;
}
.g-item::after {
  content: "\f00e";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #FBF7EF;
  font-size: 1.4rem;
  background: linear-gradient(0deg, rgba(20,16,12,.58), rgba(20,16,12,.14));
  opacity: 0;
  transition: opacity .4s ease;
}
.g-item:hover { transform: translateY(-4px); box-shadow: 0 26px 44px -22px rgba(30,27,22,.75); }
.g-item:hover img { transform: scale(1.08); }
.g-item:hover::after { opacity: 1; }

@media (min-width: 640px)  { :root { --gh: 240px; } }
@media (min-width: 1024px) { :root { --gh: 300px; } }

/* ---------------------------------------------------------
   7. POR QUÉ ELEGIRNOS
   --------------------------------------------------------- */
.why {
  background: var(--color-deep);
  color: #FBF7EF;
  padding: 84px 0;
  position: relative;
  overflow: hidden;
  margin-top: -1px;
}
@media (min-width: 1024px) { .why { padding: 128px 0 116px; } }
.why::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(50% 40% at 88% 8%, rgba(224,165,38,.17), transparent 65%),
    radial-gradient(45% 45% at 4% 96%, rgba(200,132,5,.12), transparent 70%);
  pointer-events: none;
}
.why .shell { position: relative; }

.why-item {
  padding: 30px 24px 32px;
  border: 1px solid rgba(251,247,239,.14);
  border-radius: 3px;
  background: rgba(251,247,239,.035);
  transition: background-color .45s ease, border-color .45s ease, transform .45s cubic-bezier(.22,1,.36,1);
}
.why-item:hover {
  background: rgba(251,247,239,.075);
  border-color: rgba(224,165,38,.5);
  transform: translateY(-5px);
}
.why-ico {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(224,165,38,.45);
  background: rgba(224,165,38,.12);
  color: var(--gold-soft);
  font-size: 1.2rem;
  margin-bottom: 20px;
  transition: background-color .45s ease, color .45s ease;
}
.why-item:hover .why-ico { background: var(--color-accent); color: #23180A; }
.why-item h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.02em;
  margin: 0 0 9px;
  color: #FBF7EF;
}
.why-item p {
  margin: 0;
  font-size: .93rem;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(251,247,239,.7);
}

.pull {
  margin: 56px auto 0;
  max-width: 780px;
  text-align: center;
  position: relative;
  padding: 0 12px;
}
.pull-mark {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 6rem;
  line-height: .55;
  color: rgba(224,165,38,.42);
}
.pull p {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.34;
  letter-spacing: -.02em;
  color: #FBF7EF;
  margin: 8px 0 18px;
}
.pull cite {
  font-style: normal;
  font-size: .68rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-soft);
}

/* ---------------------------------------------------------
   8. CONTACTO
   --------------------------------------------------------- */
.contact { padding: 84px 0 90px; }
@media (min-width: 1024px) { .contact { padding: 116px 0 122px; } }

.contact-lead {
  margin: 0 0 32px;
  max-width: 460px;
  font-size: var(--fs-lg);
  font-weight: 300;
  line-height: 1.75;
  color: var(--color-muted);
}
.contact-list { list-style: none; margin: 0 0 34px; padding: 0; display: grid; gap: 22px; }
.contact-list li { display: flex; gap: 16px; align-items: flex-start; }
.contact-ico {
  width: 44px; height: 44px;
  flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--color-deep);
  color: var(--gold-soft);
  font-size: .95rem;
}
.contact-list small {
  display: block;
  font-size: .63rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 3px;
}
.contact-list a,
.contact-plain {
  display: block;
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-deep);
  text-decoration: none;
  transition: color .3s ease;
}
.contact-list a:hover { color: var(--gold-ink); }

.contact-form {
  padding: 30px 24px 32px;
  background: var(--color-surface);
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: 16px 16px 0 rgba(36,30,23,.08);
}
@media (min-width: 640px) { .contact-form { padding: 40px 36px 42px; } }
.form-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -.025em;
  margin: 0 0 24px;
  color: var(--color-deep);
}
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 8px;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 13px 16px;
  font-family: 'Jost', sans-serif;
  font-size: .98rem;
  font-weight: 300;
  color: var(--color-text);
  background: #FBF7EF;
  border: 1px solid var(--line);
  border-radius: 2px;
  outline: none;
  cursor: none;
  resize: vertical;
  transition: border-color .3s ease, background-color .3s ease, box-shadow .3s ease;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: rgba(107,99,85,.6); }
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--color-primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(224,165,38,.16);
}
.contact-form input.is-error,
.contact-form textarea.is-error { border-color: #B4432F; background: #FDF3F1; }

.form-status {
  margin: 16px 0 0;
  font-size: .88rem;
  line-height: 1.6;
  min-height: 1.2em;
  color: var(--gold-ink);
}
.form-status.is-ok { color: var(--green-700); font-weight: 500; }
.form-status.is-bad { color: #B4432F; }

/* ---------------------------------------------------------
   8 bis. FORMULARIO DE RESERVA
   El bloque de contacto ya no recoge un mensaje suelto: pide
   mesa de verdad. Todo lo de aquí abajo cuelga de .contact-form,
   así que hereda su caja, su papel crema y sus filetes.
   --------------------------------------------------------- */
.form-note {
  margin: -14px 0 24px;
  font-size: .92rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--color-muted);
}
.rsv-aviso {
  margin: 0 0 22px;
  padding: 11px 14px;
  font-size: .87rem;
  line-height: 1.55;
  color: var(--gold-ink);
  background: rgba(224,165,38,.1);
  border-left: 3px solid var(--color-accent);
}

/* Dos campos por línea en cuanto hay ancho. Los mínimos van a cero a
   propósito: el mínimo automático de una rejilla es el ancho del
   contenido, y basta con que una traducción crezca para que esa columna
   reclame su tamaño entero y se lo quite a la de al lado. */
.rsv-row { display: grid; gap: 0 18px; }
@media (min-width: 480px) {
  .rsv-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  /* La fila de «día + comensales» es el caso raro: sus dos campos no
     piden lo mismo. El selector de día lleva una fecha escrita entera
     («Vie · 28 de agosto», «Do · 28. August») que no parte —tiene
     `nowrap` y puntos suspensivos—, mientras que el contador se apaña
     con los dos botones y hueco para dos cifras. Repartir a medias
     dejaba la fecha con puntos suspensivos aun sobrando sitio al lado.

     Así que la primera columna se sirve de lo que mide su fecha y la
     segunda se queda con el resto, sin bajar nunca de 140 px: por
     debajo de eso el contador se queda en los dos botones y el número
     desaparece, que es justo lo que pasaba antes con 0 px de ancho.
     Si algún día una traducción trae una fecha tan larga que no quepa,
     quien cede es ella —para eso tiene los puntos— y el contador sigue
     siendo usable. */
  .rsv-row--cuando { grid-template-columns: minmax(0, max-content) minmax(140px, 1fr); }
}

/* Entre 720 y 1023 px esa fila vuelve a apilarse. Ahí la sección de
   contacto se parte en dos columnas y el formulario se queda en 356-424
   px: ni repartiendo bien caben la fecha y el contador uno al lado del
   otro. Es el mismo caso del móvil aunque la ventana mida 900, así que se
   resuelve igual —uno debajo del otro— y el calendario recupera el ancho
   del envoltorio, como abajo de 480. El par nombre + teléfono sí aguanta
   ese ancho, y se queda en dos columnas. */
@media (min-width: 720px) and (max-width: 1023px) {
  .rsv-row--cuando { grid-template-columns: 1fr; }
}

/* Etiquetas con matiz. `.lbl-opt` se fue con el campo de email, que era
   el único que llevaba el "opcional"; queda la pista de la hora. */
.lbl-hint {
  font-size: .62rem;
  font-weight: 400;
  letter-spacing: .12em;
  color: var(--gold-ink);
  text-transform: none;
  margin-left: 7px;
}
.field-help {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  margin-top: 8px;
  font-size: .78rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-muted);
}
.field-help i { color: var(--gold-ink); margin-top: 3px; }

/* El desplegable copia el trazo de los inputs y se pinta su flecha */
.contact-form select {
  width: 100%;
  padding: 13px 40px 13px 16px;
  font-family: 'Jost', sans-serif;
  font-size: .98rem;
  font-weight: 300;
  color: var(--color-text);
  background-color: #FBF7EF;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-muted) 50%),
                    linear-gradient(135deg, var(--color-muted) 50%, transparent 50%);
  background-position: calc(100% - 21px) calc(50% + 1px), calc(100% - 16px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  border: 1px solid var(--line);
  border-radius: 2px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .3s ease, background-color .3s ease, box-shadow .3s ease;
}
.contact-form select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(224,165,38,.16);
}
/* --- El día: botón propio + calendario de la casa ---------------
   El campo nativo `type="date"` traía la letra y el gris del
   navegador, empezaba la semana en domingo y dejaba pulsar los
   jueves, que es justo el día que el Teleclub descansa. Aquí el
   día se elige en un panel con el dorado y la Cormorant de la
   casa, y lo que está cerrado ni se puede pulsar. */
.datepick-wrap { position: relative; }

.datepick {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  font-family: 'Jost', sans-serif;
  font-size: .98rem;
  font-weight: 300;
  text-align: left;
  color: rgba(107,99,85,.75);
  background: #FBF7EF;
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: border-color .3s ease, background-color .3s ease, box-shadow .3s ease, color .3s ease;
}
.datepick.tiene-dia { color: var(--color-text); font-weight: 400; }
.datepick:hover { border-color: rgba(200,132,5,.5); background: #fff; }
.datepick:focus-visible,
.datepick[aria-expanded="true"] {
  border-color: var(--color-primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(224,165,38,.16);
  outline: none;
}
.datepick.is-error { border-color: #B4432F; background: #FDF3F1; }
.datepick-ico { color: var(--gold-ink); font-size: .95rem; flex: 0 0 auto; }
.datepick-txt {
  flex: 1 1 auto;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.datepick-caret {
  flex: 0 0 auto;
  font-size: .62rem;
  color: var(--color-muted);
  transition: transform .3s ease;
}
.datepick[aria-expanded="true"] .datepick-caret { transform: rotate(180deg); }

.cal {
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  left: 0;
  /* Hasta 480 px la fila del formulario va en una sola columna, así que
     el envoltorio ya mide todo el ancho útil: el panel se limita a
     copiarlo y no hay forma de que se salga por el lado derecho. A
     partir de ahí la fila se parte en dos y el envoltorio se queda
     estrecho, de modo que el panel pasa a un ancho fijo cómodo. */
  width: 100%;
  padding: 14px 14px 12px;
  background: var(--color-surface);
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: 0 18px 44px -12px rgba(36,30,23,.34);
  animation: cal-entra .22s ease both;
}
@media (min-width: 480px) { .cal { width: 322px; } }
/* Salvo entre 720 y 1023 px, donde la fila vuelve a una sola columna
   —ver `.rsv-row`— y el envoltorio recupera todo el ancho del
   formulario: el panel se limita a copiarlo, como en móvil. */
@media (min-width: 720px) and (max-width: 1023px) { .cal { width: 100%; } }
@keyframes cal-entra {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .cal { animation: none; } }

.cal-top {
  display: grid;
  grid-template-columns: 34px 1fr 34px;
  align-items: center;
  margin-bottom: 12px;
}
.cal-mes {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.22rem;
  font-weight: 600;
  letter-spacing: -.015em;
  text-align: center;
  color: var(--color-deep);
}
.cal-nav {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: transparent;
  color: var(--color-deep);
  font-size: .72rem;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.cal-nav:hover:not(:disabled) {
  background: var(--color-deep);
  border-color: var(--color-deep);
  color: var(--gold-soft);
}
.cal-nav:disabled { opacity: .3; }

.cal-semana,
.cal-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-semana {
  margin-bottom: 6px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
}
.cal-semana span {
  text-align: center;
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.cal-dia {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 2px;
  background: transparent;
  color: var(--color-text);
  font-family: 'Jost', sans-serif;
  font-size: .92rem;
  font-weight: 300;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.cal-dia:hover:not(:disabled) { background: var(--wood); border-color: rgba(200,132,5,.45); }
.cal-dia:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }

/* Hoy: un filete dorado bajo el número, sin robarle sitio al día elegido */
.cal-dia.es-hoy { font-weight: 500; }
.cal-dia.es-hoy::after {
  content: "";
  position: absolute;
  bottom: 5px;
  width: 13px; height: 2px;
  background: var(--color-accent);
}
.cal-dia.es-puesto {
  background: var(--color-deep);
  border-color: var(--color-deep);
  color: var(--gold-soft);
  font-weight: 500;
}
.cal-dia.es-puesto::after { background: var(--gold-soft); }

/* Cerrado: se ve, se entiende y no se puede pulsar. El aspa diagonal
   distingue el descanso del día que simplemente cae fuera de plazo. */
.cal-dia.es-cerrado {
  color: rgba(109,96,81,.5);
  background: repeating-linear-gradient(
    -45deg,
    transparent 0 4px,
    rgba(109,96,81,.13) 4px 5px
  );
}
.cal-dia.es-cerrado span { text-decoration: line-through; text-decoration-thickness: 1px; }
.cal-dia.es-fuera { color: rgba(109,96,81,.28); }
.cal-dia:disabled { cursor: none; }

.cal-hueco { aspect-ratio: 1; }

.cal-pie {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: .68rem;
  font-weight: 300;
  letter-spacing: .02em;
  color: var(--color-muted);
}
.cal-muestra {
  flex: 0 0 auto;
  width: 15px; height: 15px;
  border-radius: 2px;
  background: repeating-linear-gradient(
    -45deg,
    transparent 0 4px,
    rgba(109,96,81,.13) 4px 5px
  );
  border: 1px solid var(--line);
}

/* En táctil el panel se agranda: los días de 34 px se fallan con el dedo */
@media (hover: none), (pointer: coarse) {
  .cal { padding: 16px; }
  .cal-dia { font-size: 1rem; }
}

/* --- Contador de comensales --- */
.stepper {
  display: grid;
  grid-template-columns: 46px 1fr 46px;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: #FBF7EF;
  overflow: hidden;
}
.stepper:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(224,165,38,.16);
}
.step-btn {
  border: 0;
  background: transparent;
  color: var(--color-deep);
  font-size: .78rem;
  display: grid;
  place-items: center;
  transition: background-color .25s ease, color .25s ease;
}
.step-btn:hover { background: var(--color-deep); color: var(--gold-soft); }
.stepper input {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center;
  font-size: 1.12rem !important;
  font-weight: 500 !important;
  padding: 12px 0 !important;
  -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* --- Turnos --- */
.slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: rgba(233,223,204,.35);
  transition: border-color .3s ease, box-shadow .3s ease;
  min-height: 74px;
  align-content: start;
}
.slots.is-error { border-color: #B4432F; box-shadow: 0 0 0 3px rgba(180,67,47,.12); }

.slot {
  display: grid;
  gap: 1px;
  padding: 9px 4px 8px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--color-surface);
  color: var(--color-deep);
  text-align: center;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.slot-h { font-size: .96rem; font-weight: 500; letter-spacing: .01em; line-height: 1.2; }
.slot-n {
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-ink);
  line-height: 1.4;
}
.slot:not(.is-off):hover {
  border-color: var(--color-accent);
  background: #fff;
  transform: translateY(-2px);
}
.slot.is-on {
  background: var(--color-deep);
  border-color: var(--color-deep);
  color: var(--gold-soft);
  transform: none;
}
.slot.is-on .slot-n { color: rgba(240,199,102,.7); }
.slot.is-off {
  background: transparent;
  border-style: dashed;
  color: rgba(109,96,81,.55);
  opacity: .8;
}
.slot.is-off .slot-h { text-decoration: line-through; text-decoration-thickness: 1px; }
.slot.is-off .slot-n { color: rgba(109,96,81,.5); }

.slots-msg {
  grid-column: 1 / -1;
  align-self: center;
  padding: 6px 4px;
  font-size: .88rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--color-muted);
}
/* Solo sale los días que la cocina cierra antes que el resto de la
   semana. Va debajo de los turnos, ocupando la fila entera de la
   rejilla, para que se lea después de ver que la tarde está vacía. */
.slots-nota {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  padding: 9px 11px;
  border-left: 3px solid var(--color-accent);
  background: rgba(219,159,5,.09);
  font-size: .82rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--color-muted);
}
.slots-nota b { font-weight: 500; color: var(--color-text); }

.slots-msg.is-loading::after {
  content: "";
  display: inline-block;
  vertical-align: -2px;
  width: 12px; height: 12px;
  margin-left: 9px;
  border: 1.5px solid rgba(109,96,81,.3);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: rsv-spin .75s linear infinite;
}
@keyframes rsv-spin { to { transform: rotate(360deg); } }

/* --- Selector de zona --- */
.seg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: rgba(233,223,204,.35);
}
.seg-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 11px 4px 9px;
  border: 1px solid transparent;
  border-radius: 2px;
  background: transparent;
  color: var(--color-muted);
  font-family: 'Jost', sans-serif;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.2;
  transition: background-color .28s ease, color .28s ease, border-color .28s ease;
}
.seg-btn i { font-size: .95rem; }
.seg-btn:hover { color: var(--color-deep); border-color: var(--line); background: var(--color-surface); }
.seg-btn.is-on {
  background: var(--color-deep);
  border-color: var(--color-deep);
  color: var(--gold-soft);
}

/* --- Filete de separación dentro del formulario --- */
.rsv-hr {
  display: block;
  height: 1px;
  margin: 26px 0 24px;
  background: linear-gradient(90deg, var(--line), transparent);
}

/* --- Plegable de detalles --- */
.rsv-extra {
  margin: 0 0 22px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.rsv-extra summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 2px;
  list-style: none;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-muted);
  transition: color .3s ease;
}
.rsv-extra summary::-webkit-details-marker { display: none; }
.rsv-extra summary:hover { color: var(--color-deep); }
.rsv-extra summary i { font-size: .72rem; transition: transform .35s cubic-bezier(.22,1,.36,1); }
.rsv-extra[open] summary { color: var(--color-deep); }
.rsv-extra[open] summary i { transform: rotate(180deg); }
.rsv-extra-body { padding: 4px 0 20px; }

.checks { display: grid; gap: 11px; margin-top: 4px; }
.check { display: flex; align-items: center; gap: 11px; }
.check input {
  width: 19px; height: 19px;
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--color-primary);
}
.check span {
  font-size: .9rem;
  font-weight: 300;
  color: var(--color-text);
  text-transform: none;
  letter-spacing: 0;
}
.check span i { color: var(--gold-ink); margin-right: 5px; font-size: .88rem; }

.rsv-legal {
  margin: 16px 0 0;
  font-size: .76rem;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(109,96,81,.85);
}
.rsv-legal a { color: var(--gold-ink); font-weight: 500; text-decoration: none; }
.rsv-legal a:hover { text-decoration: underline; }

/* La flecha del botón se vuelve rueca mientras viaja la petición */
.btn.is-loading { opacity: .78; }
.btn.is-loading .fa-arrow-right::before { content: "\f110"; }
.btn.is-loading .fa-arrow-right { animation: rsv-spin .8s linear infinite; }

/* --- Resguardo --- */
.rsv-ticket {
  position: relative;
  padding: 40px 26px 30px;
  background: var(--color-surface);
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: 16px 16px 0 rgba(36,30,23,.08);
  text-align: center;
  overflow: hidden;
}
@media (min-width: 640px) { .rsv-ticket { padding: 48px 40px 36px; } }
.rsv-ticket.is-in { animation: rsv-in .6s cubic-bezier(.22,1,.36,1) both; }
@keyframes rsv-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
/* Borde troquelado, como el resguardo de papel que se lleva la sala */
.rsv-ticket-punch {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 10px;
  background: radial-gradient(circle at 6px 10px, var(--color-bg) 5px, transparent 5.5px);
  background-size: 16px 10px;
}
.rsv-ticket-ico {
  width: 60px; height: 60px;
  margin: 0 auto 20px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--color-deep);
  color: var(--gold-soft);
  font-size: 1.35rem;
  animation: rsv-sello .55s cubic-bezier(.34,1.56,.64,1) .15s both;
}
@keyframes rsv-sello {
  from { transform: scale(.4) rotate(-14deg); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.rsv-ticket-eyebrow {
  margin: 0 0 10px;
  font-size: .63rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.rsv-ticket-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.7rem, 5vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.12;
  margin: 0 0 14px;
  color: var(--color-deep);
}
.rsv-ticket-title em { font-style: italic; color: var(--color-primary); }
.rsv-ticket-lead {
  margin: 0 auto 26px;
  max-width: 400px;
  font-size: .93rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--color-muted);
}
.rsv-ticket-data {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0 0 26px;
  background: var(--line);
  border: 1px solid var(--line);
}
/* Los cuatro datos en fila solo cuando el resguardo es ancho de verdad.
   Entre 720 y 1023 px la sección de contacto va a dos columnas y el
   resguardo se queda en 356 px: repartido en cuatro, cada casilla se
   quedaba con 71 px útiles y «LOCALIZADOR» —once letras de una pieza, en
   versalita y con interletraje— se salía por el lado. En ese tramo
   vuelven a dos y dos, como en móvil. */
@media (min-width: 560px) { .rsv-ticket-data { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 720px) and (max-width: 1023px) { .rsv-ticket-data { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rsv-ticket-data > div { background: #FBF7EF; padding: 15px 8px 14px; }
/* Y por si algún idioma trae un rótulo aún más largo: antes de salirse,
   que parta. */
.rsv-ticket-data dt,
.rsv-ticket-data dd { overflow-wrap: break-word; }
.rsv-ticket-data dt {
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 5px;
}
.rsv-ticket-data dd {
  margin: 0;
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--color-deep);
}
.rsv-t-cod {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.16rem !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  color: var(--gold-ink) !important;
}
/* Los dos botones van apilados a todo lo ancho: en dos columnas, con el
   versalita y el espaciado de `.btn`, sus rótulos partían en dos líneas
   y la caja quedaba con un escalón feo. */
.rsv-ticket-cta { display: grid; gap: 10px; }
.rsv-ticket-cta .btn { width: 100%; padding-inline: 22px; }
.rsv-ticket-again {
  margin-top: 18px;
  border: 0;
  background: none;
  font-family: 'Jost', sans-serif;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-muted);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color .3s ease, border-color .3s ease;
}
.rsv-ticket-again:hover { color: var(--color-deep); border-color: var(--color-accent); }

/* ---------------------------------------------------------
   9. FOOTER
   --------------------------------------------------------- */
.site-footer {
  background: #100C08;
  color: rgba(251,247,239,.72);
  padding: 66px 0 26px;
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 100% at 12% 0%, rgba(224,165,38,.11), transparent 62%);
  pointer-events: none;
}
.site-footer .shell { position: relative; }

.footer-brand p {
  margin: 20px 0 22px;
  max-width: 340px;
  font-size: .93rem;
  font-weight: 300;
  line-height: 1.75;
}
.socials { display: flex; gap: 11px; }
.socials a {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(251,247,239,.2);
  color: rgba(251,247,239,.8);
  font-size: 1rem;
  text-decoration: none;
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, transform .35s ease;
}
.socials a:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #23180A;
  transform: translateY(-3px);
}

/* El búho de Tripadvisor va en SVG en línea: el glifo de marca de Font
   Awesome no llegaba a pintarse y el botón quedaba vacío. */
.ico-tripadvisor {
  width: 23px;
  height: auto;
  display: block;
  /* cada forma lleva su propio fill/stroke en `currentColor`: así el búho
     acompaña al color del botón también en hover */
}

.footer-col h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -.015em;
  color: #FBF7EF;
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(251,247,239,.15);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer-col li { font-size: .9rem; font-weight: 300; line-height: 1.6; }
.footer-col a {
  color: rgba(251,247,239,.72);
  text-decoration: none;
  transition: color .3s ease, padding-left .3s ease;
}
.footer-col a:hover { color: var(--color-accent); padding-left: 5px; }
/* En el movil estos enlaces se quedaban en 20 px de alto: por debajo de los
   24 px que pide la WCAG 2.5.8 para un objetivo tactil y, en la practica,
   dos enlaces que se pisan con el dedo. Se les da caja propia sin tocar el
   dibujo del pie, que ya separa los renglones con el `gap` de la lista. */
@media (hover: none), (pointer: coarse) {
  .footer-col a,
  .footer-contact a {
    display: inline-block;
    padding-block: 3px;
    min-height: 24px;
  }
  .footer-col a:hover { padding-left: 0; }
}
.footer-contact li { display: flex; gap: 11px; align-items: flex-start; }
.footer-contact i { color: var(--color-accent); margin-top: 5px; font-size: .82rem; flex: 0 0 auto; }

.footer-bottom {
  margin-top: 46px;
  padding-top: 22px;
  border-top: 1px solid rgba(251,247,239,.13);
}
.footer-bottom p { margin: 0; font-size: .78rem; letter-spacing: .04em; }
/* Puerta de servicio: el personal entra al panel de reservas por aquí,
   sin robarle protagonismo a nada del pie. */
.footer-staff {
  color: rgba(251,247,239,.5);
  text-decoration: none;
  transition: color .3s ease;
}
.footer-staff:hover { color: var(--color-accent); }

/* En móvil el footer va a una sola columna: apilado y alineado a la
   izquierda quedaba desmayado hacia un lado, así que se centra entero
   —medallón, texto, redes, títulos, enlaces y datos— y el resplandor
   dorado del fondo se centra con él. */
@media (max-width: 639px) {
  .site-footer { text-align: center; }
  .site-footer::before {
    background: radial-gradient(90% 100% at 50% 0%, rgba(224,165,38,.11), transparent 62%);
  }
  .footer-brand .logo-img--footer { margin-inline: auto; }
  .footer-brand p { margin-inline: auto; }
  .socials { justify-content: center; }
  /* Cada dato de contacto se centra como una sola pieza, icono incluido */
  .footer-contact li { justify-content: center; }
}

/* ---------------------------------------------------------
   10. WHATSAPP FLOTANTE
   --------------------------------------------------------- */
.wa-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 58px;
  padding: 0 17px;
  border-radius: 999px;
  background: #25D366;
  color: #FFFFFF;
  font-size: 1.55rem;
  text-decoration: none;
  box-shadow: 0 16px 34px -12px rgba(37,211,102,.75);
  transition: gap .4s cubic-bezier(.22,1,.36,1), padding .4s cubic-bezier(.22,1,.36,1), transform .35s ease, background-color .3s ease;
}
.wa-float::before {   /* pulso */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid rgba(37,211,102,.65);
  animation: wa-pulse 2.6s ease-out infinite;
}
@keyframes wa-pulse {
  0%   { transform: scale(1); opacity: .8; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}
.wa-float-txt {
  max-width: 0;
  overflow: hidden;   /* aquí y no en el padre, para no recortar el pulso */
  opacity: 0;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: max-width .4s cubic-bezier(.22,1,.36,1), opacity .3s ease;
}
.wa-float:hover { gap: 11px; transform: translateY(-3px); background: #1FBF5A; }
.wa-float:hover .wa-float-txt { max-width: 120px; opacity: 1; }
@media (min-width: 768px) { .wa-float { right: 26px; bottom: 26px; } }

/* ---------------------------------------------------------
   LIGHTBOX
   --------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  padding: 60px 16px 84px;
  background: rgba(12,9,6,.95);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility .4s ease;
  cursor: none;
}
.lightbox * { cursor: none; }
.lightbox.is-open { opacity: 1; visibility: visible; }

.lb-stage { margin: 0; display: grid; place-items: center; gap: 18px; max-width: 100%; position: relative; }
.lb-stage img {
  max-width: min(1100px, 92vw);
  max-height: 74vh;
  width: auto; height: auto;
  border-radius: 6px;
  box-shadow: 0 40px 90px -40px rgba(0,0,0,1);
  /* La entrada la dispara el JS añadiendo `.is-shown` cuando la foto ya
     está descodificada. Antes la animación arrancaba al fijar el `src`,
     de modo que si la descodificación tardaba el fundido terminaba sobre
     una imagen todavía vacía y la ampliación se veía en negro. */
  opacity: 0;
  transform: scale(.965);
  transition: opacity .4s ease, transform .5s cubic-bezier(.22,1,.36,1);
}
.lb-stage img.is-shown { opacity: 1; transform: scale(1); }

/* Ruedecilla mientras la foto se descarga y descodifica */
.lb-spin {
  position: absolute;
  top: 50%; left: 50%;
  width: 40px; height: 40px;
  margin: -20px 0 0 -20px;
  border: 2px solid rgba(251,247,239,.22);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  animation: lb-spin 900ms linear infinite;
}
.lb-spin.is-on { opacity: 1; }
@keyframes lb-spin { to { transform: rotate(360deg); } }
.lb-stage figcaption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  font-size: .88rem;
  font-weight: 300;
  color: rgba(251,247,239,.85);
}
.lb-counter {
  font-size: .66rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-soft);
}

.lb-close, .lb-nav {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(251,247,239,.25);
  background: rgba(251,247,239,.07);
  color: #FBF7EF;
  cursor: none;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease, transform .3s ease;
}
.lb-close:hover, .lb-nav:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #23180A;
}
.lb-close {
  top: 16px; right: 16px;
  width: 46px; height: 46px;
  font-size: 1.2rem;
}
.lb-close:hover { transform: rotate(90deg); }
.lb-nav {
  top: auto;
  bottom: 20px;
  width: 52px; height: 52px;
  font-size: 1.05rem;
}
.lb-prev { left: calc(50% - 62px); }
.lb-next { left: calc(50% + 10px); }
@media (min-width: 900px) {
  .lb-nav { top: 50%; bottom: auto; transform: translateY(-50%); width: 58px; height: 58px; }
  .lb-prev { left: 24px; }
  .lb-next { left: auto; right: 24px; }
  .lb-nav:hover { transform: translateY(-50%) scale(1.08); }
}

/* =========================================================
   PÁGINA DE CARTA — carta.html
   Misma paleta y misma tipografía que la portada; el ritmo
   cambia a lectura de carta impresa: nombre, filete punteado
   y precio, sobre el crema de cal del resto del sitio.
   ========================================================= */
.page-head {
  position: relative;
  padding: calc(var(--header-h) + 52px) 0 46px;
  overflow: hidden;
  isolation: isolate;
}
/* Medallón de agua: el aro del logo, en grande y muy tenue */
.page-head::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  right: -140px;
  transform: translateY(-46%);
  width: clamp(320px, 40vw, 540px);
  aspect-ratio: 1;
  border: 1px solid rgba(200,132,5,.22);
  border-radius: 50%;
  pointer-events: none;
}
.page-head::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  right: -104px;
  transform: translateY(-46%);
  width: clamp(250px, 31vw, 420px);
  aspect-ratio: 1;
  border: 1px solid rgba(200,132,5,.13);
  border-radius: 50%;
  pointer-events: none;
}
.page-head .h-display {
  max-width: 8em;
  font-size: clamp(2.6rem, 6.4vw, 5rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.03em;
  margin-bottom: 22px;
}
.page-lead {
  max-width: 34em;
  margin: 0;
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 1.76;
  color: var(--color-muted);
}

/* Píldoras de aviso bajo el titular */
.page-tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; }
.page-tags li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 17px;
  border: 1px solid rgba(200,132,5,.45);
  border-radius: 999px;
  background: rgba(224,165,38,.09);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.page-tags i { font-size: .78rem; }

/* Migas de pan / volver */
.page-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-muted);
  text-decoration: none;
  transition: color .3s ease, gap .3s ease;
}
.page-back i { font-size: .68rem; color: var(--color-primary); transition: transform .3s ease; }
.page-back:hover { color: var(--gold-ink); gap: 14px; }
.page-back:hover i { transform: translateX(-4px); }

/* --- Cuerpo de la carta --- */
.menu { padding: 8px 0 96px; }
@media (min-width: 1024px) { .menu { padding-bottom: 120px; } }

.menu-block + .menu-block { margin-top: 68px; }

.menu-block-head { display: flex; align-items: baseline; gap: 20px; margin-bottom: 8px; }
.menu-block-head h2 {
  flex: 0 0 auto;
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.025em;
  color: var(--color-deep);
}
.menu-block-head::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(200,132,5,.55), rgba(200,132,5,0));
  transform: translateY(-6px);
}
.menu-block-sub {
  margin: 0 0 26px;
  font-size: .95rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--color-muted);
  max-width: 46em;
}

/* Dos columnas de carta en pantallas anchas */
.menu-cols { display: grid; gap: 0 68px; }
@media (min-width: 900px) { .menu-cols { grid-template-columns: 1fr 1fr; } }

.menu-list { margin: 0; padding: 0; list-style: none; }

/* Epígrafe interno: PESCADOS / CARNES */
.m-sub {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 30px 0 6px;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.m-sub:first-child { margin-top: 0; }
.m-sub::before { content: ""; width: 24px; height: 1px; background: currentColor; flex: 0 0 auto; }

/* Fila: nombre · filete punteado · precio */
.m-row {
  display: flex;
  align-items: baseline;
  gap: 11px;
  padding: 13px 0 12px;
  border-bottom: 1px solid rgba(36,30,23,.09);
  transition: border-color .3s ease;
}
.m-row:hover { border-color: rgba(200,132,5,.45); }
.m-name {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-text);
  transition: color .3s ease;
}
.m-row:hover .m-name { color: var(--gold-ink); }
.m-lead {
  flex: 1 1 auto;
  min-width: 16px;
  height: 0;
  transform: translateY(-4px);
  border-bottom: 1px dotted rgba(36,30,23,.32);
}
.m-price {
  flex: 0 0 auto;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--color-deep);
  white-space: nowrap;
  text-align: right;
}

/* La letra pequeña pegada al precio: «6 unidades», «según mercado».
   Baja a su propia línea para no empujar el precio ni partirlo. */
.m-note {
  display: block;
  margin-top: 1px;
  font-family: 'Jost', system-ui, sans-serif;
  font-size: .68rem;
  font-style: normal;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Lo que lleva el plato, cuando el plato lo dice. Va debajo de la glosa
   y en el mismo tono, un peldaño por debajo del nombre. */
.m-desc {
  display: block;
  margin-top: 3px;
  font-size: .8rem;
  font-weight: 300;
  line-height: 1.45;
  color: var(--color-muted);
  letter-spacing: 0;
  max-width: 34em;
}

/* Los iconos de alérgenos del plato. Se agrandan un punto porque un
   emoji a .8rem no se distingue de otro. */
.m-alg {
  display: block;
  margin-top: 5px;
  font-size: .95rem;
  line-height: 1;
  letter-spacing: .12em;
  cursor: help;
}

/* --- Mientras carga, y si no llega --- */
.carta-bloques > :first-child { margin-top: 0; }

.menu-cargando,
.menu-vacia,
.menu-error {
  margin: 0;
  padding: 40px 0;
  text-align: center;
  font-size: .95rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--color-muted);
}
.menu-error {
  padding: 34px 24px;
  border: 1px solid rgba(200,132,5,.4);
  border-radius: 4px;
  background: var(--color-surface);
  color: var(--color-text);
}
.menu-error a { color: var(--gold-ink); font-weight: 500; }

/* --- La leyenda de alérgenos ---
   Solo salen los iconos que de verdad se usan en la carta, así que esta
   caja aparece y desaparece sola según lo que haya puesto el panel. */
.menu-alergenos {
  margin-top: 56px;
  padding: 26px 24px 24px;
  border: 1px solid var(--hair);
  border-radius: 4px;
  background: var(--color-surface);
}
.menu-alergenos h3 {
  margin: 0 0 16px;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.alg-lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px 18px;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
}
.alg-lista li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .85rem;
  font-weight: 300;
  color: var(--color-text);
}
.alg-ico { font-size: 1.05rem; line-height: 1; flex: 0 0 auto; }
.alg-nota {
  margin: 18px 0 0;
  font-size: .8rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--color-muted);
}

/* --- Destacado: el cachopo de la casa --- */
.cachopo {
  position: relative;
  margin-top: 68px;
  padding: 38px 24px 34px;
  background: var(--color-deep);
  color: #FBF7EF;
  border-radius: 4px;
  overflow: hidden;
}
@media (min-width: 768px) { .cachopo { padding: 52px 46px 46px; } }
.cachopo::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(58% 70% at 88% 4%, rgba(224,165,38,.2), transparent 66%),
    radial-gradient(46% 60% at 2% 100%, rgba(200,132,5,.14), transparent 70%);
  pointer-events: none;
}
.cachopo > * { position: relative; }
.cachopo .eyebrow { color: var(--gold-soft); }
.cachopo h2 {
  margin: 0 0 12px;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.03em;
  color: #FBF7EF;
}
.cachopo h2 em { font-style: italic; font-weight: 400; color: var(--gold-soft); }
.cachopo > p {
  margin: 0 0 32px;
  max-width: 42em;
  font-size: .98rem;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(251,247,239,.72);
}
.cachopo-grid { display: grid; gap: 13px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .cachopo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }
.c-size {
  padding: 22px 14px 20px;
  text-align: center;
  border: 1px solid rgba(224,165,38,.32);
  border-radius: 3px;
  background: rgba(251,247,239,.04);
  transition: background-color .4s ease, border-color .4s ease, transform .4s cubic-bezier(.22,1,.36,1);
}
.c-size:hover {
  background: rgba(224,165,38,.12);
  border-color: rgba(224,165,38,.7);
  transform: translateY(-5px);
}
.c-size b {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  color: #FBF7EF;
}
.c-size span {
  display: block;
  margin-top: 9px;
  font-size: .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(251,247,239,.55);
}
.c-size i {
  display: block;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(251,247,239,.14);
  font-style: normal;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--gold-soft);
}

/* --- Nota al pie de la carta --- */
.menu-note {
  margin-top: 46px;
  padding: 22px 0 0;
  border-top: 1px solid var(--hair);
  display: grid;
  gap: 10px;
}
.menu-note p {
  margin: 0;
  display: flex;
  gap: 12px;
  font-size: .86rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--color-muted);
}
.menu-note i { color: var(--color-primary); margin-top: 5px; font-size: .8rem; flex: 0 0 auto; }

/* --- Cierre: reservar --- */
.menu-cta {
  margin-top: 58px;
  padding: 40px 24px;
  text-align: center;
  border: 1px solid rgba(200,132,5,.4);
  border-radius: 4px;
  background: var(--color-surface);
}
@media (min-width: 768px) { .menu-cta { padding: 54px 40px; } }
.menu-cta h2 {
  margin: 0 0 12px;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--color-deep);
}
.menu-cta h2 em { font-style: italic; font-weight: 400; color: var(--color-primary); }
.menu-cta p {
  margin: 0 auto 28px;
  max-width: 34em;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.72;
  color: var(--color-muted);
}
.menu-cta-btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* =========================================================
   AJUSTES RESPONSIVE FINOS
   Van al final para ganar a las reglas de cada bloque.
   ========================================================= */

/* =========================================================
   EL TELEVISOR EN MÓVIL Y TABLET
   En el ordenador el mueble se sale por la derecha del
   viewport y la segunda pantalla se encaja en su costado
   izquierdo. Por debajo de 1024 px esa misma composición se
   mantiene —el mueble sigue sangrando por la derecha y el
   PIP sigue mordiendo la esquina— pero con las medidas
   recalculadas: si no, el televisor se comía la pantalla y
   el rótulo del PIP quedaba colgando en el aire.
   ========================================================= */
@media (max-width: 1023px) {
  /* El mueble se alinea al margen del texto por la izquierda y
     se sale por la derecha, como en el ordenador. */
  .hero-tv {
    padding-left: var(--gutter);
    padding-right: 0;
    max-width: 100%;
  }
  .tv-shell {
    width: calc(100% + 22px);
    padding: 11px;
    border-radius: 22px;
  }
  .tv-screen { border-radius: 14px; }

  /* El rótulo de canal sube a la esquina alta: abajo a la
     izquierda ahora vive la segunda pantalla. */
  .tv-chan {
    left: 12px;
    top: 12px;
    bottom: auto;
    padding: 5px 11px;
    font-size: .52rem;
  }

  /* Segunda pantalla mordiendo la esquina inferior izquierda.
     El `left` se mide desde el borde del `.hero-tv`, que lleva el
     gutter de padding: restándole 10 px el PIP muerde el costado
     del mueble sin salirse del viewport.
     El pie de foto se retira: a este tamaño era un rótulo suelto
     colgando por debajo del mueble. */
  .tv-pip {
    right: auto;
    left: calc(var(--gutter) - 10px);
    bottom: -32px;
    width: min(44%, 190px);
  }
  .tv-pip figcaption { display: none; }
  .pip-screen { padding: 7px; border-radius: 16px; }
  .pip-screen img { border-radius: 10px; }
}

/* --- Tablet (720-1023 px): el hero pasa a dos columnas ---
   Apilado, el televisor ocupaba 728 × 546 px y el titular se
   quedaba en un tercio del ancho: un vacío enorme a su derecha
   y un hero de 1380 px de alto. Con dos columnas la
   composición vuelve a ser la del ordenador. El corte en 720 px
   deja dentro al iPad mini en vertical (744 px). */
@media (min-width: 720px) and (max-width: 1023px) {
  .hero { padding: calc(var(--header-h) + 34px) 0 70px; }
  .hero-grid {
    grid-template-columns: minmax(0, 53fr) minmax(0, 47fr);
    align-items: center;
    gap: 0;
  }
  .hero-copy { padding-right: 26px; }
  /* A esta anchura el corte fijo en 6 em dejaba el titular en un
     tercio de su columna: se suelta y se deja que el navegador
     reparta las líneas. */
  .hero-title {
    max-width: 11em;
    font-size: 2.45rem;
    margin-bottom: 24px;
    text-wrap: balance;
  }
  .hero-lead {
    max-width: none;
    margin-bottom: 30px;
    font-size: 1rem;
    line-height: 1.72;
  }
  .hero-cta { gap: 12px; }
  .hero-cta .btn { padding: 15px 19px; font-size: .7rem; letter-spacing: .09em; }
  .hero-facts {
    max-width: none;
    margin-top: 32px;
    padding-top: 26px;
    gap: 11px;
  }
  .hero-facts span { font-size: .85rem; }

  .tv-shell { width: calc(100% + 26px); }
  .tv-pip { width: min(48%, 158px); left: calc(var(--gutter) - 14px); bottom: -26px; }

  /* --- "La casa" también se pone a dos columnas: apilada, la
         foto vertical medía 930 px de alto --- */
  .about-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.24fr);
    gap: 40px;
    align-items: start;
  }
  .about-media { margin-top: 38px; max-width: 320px; }
  .about-copy .h-display { max-width: 6.4em; font-size: 2.15rem; }
  .about-copy p { font-size: 1.02rem; }
  .about-quote { margin-top: 32px; }
  .about-quote p { font-size: 1.3rem; }
  .about-inset { right: -14px; bottom: -34px; width: min(52%, 148px); }

  /* Los cuatro datos ocupan el ancho entero de la sección en una fila
     propia, bajo las dos columnas. */
  .about-media { grid-column: 1; grid-row: 1; }
  .about-copy  { grid-column: 2; grid-row: 1; }
  .about-grid > .stats {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 20px;
    margin-top: 40px;
    padding-top: 28px;
  }

  /* --- Contacto: los datos y el formulario caben al lado --- */
  .contact .contact-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
    gap: 36px;
    align-items: start;
  }
  .contact-form { padding: 32px 26px 34px; }
}

/* --- Tramo intermedio (640-719 px): sigue apilado, pero el
       bloque de texto se ciñe a una medida legible en lugar de
       estirarse de lado a lado --- */
@media (min-width: 640px) and (max-width: 719px) {
  .hero-copy { max-width: 37rem; }
  .hero-title { max-width: 8em; font-size: 3rem; }
  .hero-lead { max-width: 30em; }
  .about-copy .h-display { max-width: 6.4em; }
  .about-copy p, .hero-lead { line-height: 1.74; }
}

/* =========================================================
   MÓVIL (≤ 719 px): LA FACHADA ES EL HERO
   El mueble del televisor desaparece —a este ancho competía
   con el titular por la misma pantalla— y lo que se veía en
   su pantalla, la fachada del local, pasa a ocupar el fondo
   entero de la sección, a sangre por los cuatro costados.
   Para que el texto se lea sobre una casa encalada a pleno
   sol, la foto se rebaja de brillo y encima van un velo
   cálido, un viñeteado y las líneas de barrido del CRT: el
   guiño al teleclub sobrevive al mueble.
   ========================================================= */
@media (max-width: 719px) {
  .hero-tv { display: none; }

  .hero {
    display: flex;
    align-items: center;
    min-height: 100svh;
    padding: calc(var(--header-h) + 20px) 0 44px;
    background: #0F0B07;
    border-bottom: 1px solid rgba(219,159,5,.32);
  }
  .hero-grid { gap: 0; }

  /* Capa 1 — la foto. El encuadre al 62 % del ancho deja dentro el
     rótulo de madera y la puerta verde, que es lo que identifica la
     casa; el recorte vertical no importa porque la imagen apaisada
     siempre llena el alto de un móvil de sobra. */
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url("assets/images/fachada-teleclub.webp") 62% 46% / cover no-repeat;
    filter: brightness(.62) saturate(1.16) contrast(1.05);
  }
  /* Capa 2 — barrido CRT, viñeteado y velo cálido de arriba abajo.
     El velo se afloja justo donde está el titular y aprieta en los
     extremos: contraste garantizado sin apagar la foto. */
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      repeating-linear-gradient(180deg, rgba(10,8,6,.2) 0 1px, transparent 1px 4px),
      radial-gradient(132% 78% at 56% 34%, transparent 32%, rgba(10,8,6,.6) 100%),
      linear-gradient(180deg, rgba(16,12,8,.5) 0%, rgba(16,12,8,.37) 26%, rgba(16,12,8,.52) 62%, rgba(16,12,8,.9) 100%);
  }

  /* --- El texto se pasa a claro sobre la foto --- */
  .hero-copy { z-index: 2; }
  .hero .eyebrow--hero { color: var(--gold-soft); }
  .hero .eyebrow-num { color: var(--gold-soft); border-color: rgba(240,199,102,.5); }
  .hero-title { color: #FCF9F1; text-shadow: 0 2px 30px rgba(8,6,4,.55); }
  .hero-title em { color: var(--gold-soft); }
  .hero-lead { color: rgba(246,241,231,.88); text-shadow: 0 1px 16px rgba(8,6,4,.5); }
  .hero-facts { border-top-color: rgba(246,241,231,.26); }
  .hero-facts i { color: var(--gold-lit); }
  .hero-facts span { color: rgba(246,241,231,.9); }

  /* --- El hero entero en una pantalla, sin arrastrar ---
     El titular, la entradilla y los datos aprietan su ritmo vertical y
     los dos botones pasan a ir en línea, más bajos y con el cuerpo
     reducido: entre eso y el medallón más pequeño el bloque completo
     cabe sin desplazarse. `flex-wrap` queda puesto como red: en una
     pantalla absurdamente estrecha vuelven a apilarse antes que
     recortar el texto. */
  .hero-title { margin-bottom: 22px; }
  .hero-lead {
    font-size: 1.02rem;
    line-height: 1.65;
    margin-bottom: 26px;
  }
  .hero-cta { flex-wrap: wrap; gap: 10px; }
  .hero-cta .btn {
    flex: 1 1 auto;
    width: auto;
    padding: 15px 12px;
    font-size: .68rem;
    letter-spacing: .07em;
    gap: 7px;
    white-space: nowrap;
  }

  /* El botón de tinta se perdería contra la foto oscura: el principal
     pasa a dorado y el secundario a contorno claro sobre un velo. */
  .hero-cta .btn-deep {
    background: var(--color-accent);
    color: #23180A;
    box-shadow: 0 14px 30px -16px rgba(0,0,0,.8);
  }
  .hero-cta .btn-line {
    color: #FBF7EF;
    background: rgba(251,247,239,.08);
    border-color: rgba(251,247,239,.55);
    backdrop-filter: blur(4px);
  }

  /* --- "La casa": la composición de fotos crece medio tamaño (×1,5).
         Caja, marco, foto encajada y sus vuelos se multiplican por el
         mismo factor, así que las proporciones entre las tres piezas
         siguen siendo exactamente las de antes. --- */
  .about-media { max-width: min(55.5vw, 219px); }
  .about-frame { top: 24px; bottom: -32px; border-radius: 16px; }
  .about-media > img { border-radius: 16px; }
  .about-inset {
    right: -15px;
    bottom: -24px;
    width: min(48%, 107px);
    padding: 5px;
    border-radius: 10px;
  }
  .about-inset img { border-radius: 8px; }
  .about-grid { gap: 58px; }
}

/* --- La cabecera, al principio de la página y en móvil, se retira:
       la fachada llega hasta el filo de arriba y el medallón se apoya
       sobre ella como un sello. En cuanto se hace scroll (`is-stuck`)
       vuelve el crema de siempre, con su transición ya definida.
       Va atada a `body.home` porque la carta no tiene hero. --- */
@media (max-width: 719px) {
  body.home .site-header:not(.is-stuck) {
    background: transparent;
    backdrop-filter: none;
    border-bottom-color: transparent;
  }
  body.home .site-header:not(.is-stuck) .burger { border-color: rgba(251,247,239,.5); }
  body.home .site-header:not(.is-stuck) .burger span { background: #FBF7EF; }
  /* Y el logotipo hace lo mismo que la hamburguesa: con la foto detrás, el
     texto en tinta del bicolor desaparecería, así que en ese estado —y solo
     en ese— se sirve el acabado dorado, que es el que la marca usa sobre
     fondo oscuro. Al fijarse la cabecera vuelve el crema y con él el bicolor. */
  body.home .site-header:not(.is-stuck) .logo-img--brand { display: none; }
  body.home .site-header:not(.is-stuck) .logo-img--brand-oro { display: block; }
}

/* --- Móviles (≤ 639 px) --- */
@media (max-width: 639px) {
  /* Con la fachada de fondo el hero cabe en una pantalla: el bloque de
     datos se ciñe. Los botones ya van en línea (bloque de ≤ 719 px). */
  .hero-facts { margin-top: 20px; padding-top: 16px; gap: 11px; }

  /* Los cuatro datos en 2 × 2, centrados y a mayor escala: alineados a la
     izquierda y en cuerpo pequeño quedaban como una nota al pie. */
  .about-grid > .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 16px;
    justify-items: center;
    text-align: center;
  }
  .stat-num { font-size: 2.45rem; }
  .stat-lbl { margin-top: 12px; font-size: .72rem; letter-spacing: .15em; }
}

/* --- Móviles estrechos (≤ 400 px) --- */
@media (max-width: 400px) {
  .shell { padding-inline: 16px; }
  :root { --gutter: 16px; }

  .btn { padding: 15px 24px; font-size: .74rem; letter-spacing: .1em; }

  .hero-title { font-size: 2.35rem; }
  .hero-lead  { font-size: 1.02rem; }
  .about-copy p { font-size: 1.02rem; }

  /* el televisor y su segunda pantalla ya van a media escala arriba */

  .svc { padding: 26px 20px 30px; }
  .svc:nth-child(2), .svc:nth-child(4), .svc:nth-child(6) { padding-top: 34px; }
  .contact-form { padding: 26px 18px 28px; }

  .stat-num { font-size: 2.1rem; }
  .footer-brand p, .footer-col li { font-size: .88rem; }

  .m-name  { font-size: .94rem; }
  .m-price { font-size: 1.15rem; }
  .c-size  { padding: 18px 10px 16px; }
  .c-size b { font-size: 2rem; }
  .menu-cta { padding: 32px 18px; }
}

/* --- Pantallas bajas y móviles en horizontal ---
   Un header de 132-162 px se comería la mitad del alto útil. */
@media (max-height: 560px) and (min-width: 480px) {
  :root { --header-h: 86px; --header-stuck: 74px; }
  /* La cabecera baja a 86 px: 198 px de ancho son 62 de alto y caben con
     12 px de aire por arriba y por abajo. */
  .logo-img--brand { width: 198px; }
  .site-header.is-stuck .logo-img--brand { width: 172px; }
  /* Al footer no se le toca: se llega scrollando, no compite por el alto
     útil, y encogerlo lo dejaría por debajo de su ancho mínimo. */
  .hero { min-height: 0; padding-top: calc(var(--header-h) + 28px); }
  .lb-stage img { max-height: 62vh; }
}

/* --- Nada se sale nunca del ancho del viewport --- */
img, svg, video { max-width: 100%; }
.contact-list a,
.footer-contact span,
.mobile-menu-addr { overflow-wrap: anywhere; }

/* --- Lightbox en pantallas cortas --- */
@media (max-height: 700px) {
  .lightbox { padding: 48px 12px 76px; }
  .lb-stage img { max-height: 66vh; }
}

/* ---------------------------------------------------------
   REVEAL AL HACER SCROLL
   --------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .85s cubic-bezier(.22,1,.36,1), transform .85s cubic-bezier(.22,1,.36,1);
  transition-delay: var(--rd, 0s);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee-track, .wa-float::before, .hero-scroll-line::after,
  .tv-scan::after { animation: none !important; }
  .tv-tilt { transition: none; }
  .espina-p { stroke-dashoffset: 0; }
  .espina-eye { opacity: 1; }
}

/* =========================================================
   EL SELECTOR DE IDIOMA
   Va en la barra y, además, dentro del menú del móvil: quien
   navega con el pulgar lo busca donde están los enlaces, no
   en una esquina de la cabecera.

   El botón es una píldora al lado del teléfono, con el mismo
   radio y la misma altura, pero en hueco: la píldora en tinta
   es del teléfono y no debe tener competencia.
   ========================================================= */
.idioma { position: relative; flex: 0 0 auto; }

.idioma-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--color-text);
  font-family: 'Jost', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  cursor: none;
  transition: border-color .3s ease, background-color .3s ease, color .3s ease;
}
.idioma-btn:hover,
.idioma.esta-abierto .idioma-btn {
  border-color: var(--color-accent);
  color: var(--gold-ink);
  background: rgba(219,159,5,.07);
}
.idioma-btn > .fa-globe { font-size: .92rem; color: var(--gold-ink); }
.idioma-flecha { font-size: .6rem; opacity: .55; transition: transform .3s ease; }
.idioma.esta-abierto .idioma-flecha { transform: rotate(180deg); }

.idioma-lista {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  z-index: 1200;
  min-width: 178px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(36,30,23,.06), 0 22px 44px -20px rgba(36,30,23,.45);
  animation: idioma-entra .22s cubic-bezier(.22,1,.36,1) both;
}
@keyframes idioma-entra {
  from { opacity: 0; transform: translateY(-7px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .idioma-lista { animation: none; } }

.idioma-lista li { margin: 0; }
.idioma-lista button {
  display: grid;
  grid-template-columns: 26px 1fr 14px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text);
  font-family: 'Jost', sans-serif;
  font-size: .9rem;
  text-align: left;
  cursor: none;
  transition: background-color .2s ease, color .2s ease;
}
.idioma-lista button:hover { background: rgba(36,30,23,.06); }
.idioma-corto {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .09em;
  color: var(--color-muted);
}
.idioma-lista .es-actual { color: var(--gold-ink); font-weight: 500; }
.idioma-lista .es-actual .idioma-corto { color: var(--gold-ink); }
.idioma-tic { font-size: .72rem; opacity: 0; color: var(--color-accent); }
.idioma-lista .es-actual .idioma-tic { opacity: 1; }

/* En el panel del menú móvil la lista se abre hacia arriba: abajo del
   todo no hay sitio y se saldría de la pantalla. */
.mobile-menu-foot .idioma { display: block; margin-bottom: 12px; }
.mobile-menu-foot .idioma-btn { width: 100%; justify-content: center; }
.mobile-menu-foot .idioma-lista {
  top: auto;
  bottom: calc(100% + 9px);
  left: 0;
  right: 0;
  min-width: 0;
}

/* Sobre la fachada, en el móvil, la cabecera se retira y el texto en
   tinta se perdería contra la foto: el selector se pasa al crema, igual
   que ya hacen el logotipo y la hamburguesa. */
@media (max-width: 719px) {
  .home .site-header:not(.is-stuck) .header-actions .idioma-btn {
    border-color: rgba(246,241,231,.4);
    color: #F6F1E7;
  }
  .home .site-header:not(.is-stuck) .header-actions .idioma-btn > .fa-globe { color: var(--gold-soft); }
}

/* En pantallas muy estrechas el globo se basta solo */
@media (max-width: 380px) {
  .header-actions .idioma-btn { padding: 10px 11px; gap: 5px; }
  .header-actions .idioma-flecha { display: none; }
}

/* =========================================================
   LA GLOSA DE LA CARTA
   El nombre del plato se queda en español —así es como se pide
   en la barra— y debajo, en pequeño, va qué es. En español la
   glosa viene vacía y no se pinta nada.
   ========================================================= */
.m-gloss {
  display: block;
  margin-top: 2px;
  font-size: .78rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1.35;
  color: var(--color-muted);
  letter-spacing: 0;
}

/* =========================================================
   LAS PÁGINAS LEGALES
   Aviso legal, privacidad y cookies. Son texto largo y poco
   más: una sola columna estrecha, buen interlineado y nada
   que distraiga. Lo importante aquí es que se lea, no que
   luzca.
   ========================================================= */
.page-head--legal { padding-bottom: 12px; }

.legal-fecha {
  margin: 6px 0 0;
  font-size: var(--fs-sm);
  color: var(--color-muted);
  font-style: italic;
}

.legal { padding: 8px 0 76px; }
@media (min-width: 1024px) { .legal { padding-bottom: 104px; } }

/* 68 caracteres por línea: lo que aguanta un ojo sin perder el renglón */
.legal-shell { max-width: 760px; }

.legal-bloque {
  padding-top: 34px;
  margin-top: 34px;
  border-top: 1px solid var(--hair);
}
.legal-bloque:first-child { border-top: 0; margin-top: 0; }

.legal-bloque > h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.45rem, 3.4vw, 1.95rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--color-text);
  margin: 0 0 16px;
}

.legal-cuerpo { color: var(--color-muted); font-size: 1rem; line-height: 1.78; }
.legal-cuerpo p { margin: 0 0 15px; }
.legal-cuerpo p:last-child { margin-bottom: 0; }
.legal-cuerpo strong { color: var(--color-text); font-weight: 500; }
.legal-cuerpo a { color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; }
.legal-cuerpo a:hover { color: var(--color-primary); }

.legal-cuerpo ul { margin: 0 0 15px; padding: 0; list-style: none; }
.legal-cuerpo li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 9px;
}
.legal-cuerpo li::before {
  content: '';
  position: absolute;
  left: 2px; top: .72em;
  width: 6px; height: 1px;
  background: var(--color-accent);
}

/* Los datos del titular: etiqueta arriba y valor debajo, como una
   ficha. En cuanto hay sitio pasan a dos columnas alineadas. */
.legal-datos {
  margin: 0 0 18px;
  padding: 20px 22px;
  background: var(--color-surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--color-accent);
  border-radius: 4px;
  display: grid;
  gap: 13px;
}
.legal-datos > div { display: grid; gap: 2px; }
.legal-datos dt {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.legal-datos dd { margin: 0; color: var(--color-text); line-height: 1.55; }
.legal-datos a { color: var(--gold-ink); text-decoration: none; }
@media (min-width: 560px) {
  .legal-datos > div { grid-template-columns: 170px 1fr; gap: 14px; align-items: baseline; }
  .legal-datos dt { padding-top: 3px; }
}

/* La tabla de lo que se guarda en el navegador. En el móvil no cabe
   en tres columnas, así que se desplaza dentro de su propia caja en
   vez de estirar la página entera. */
.legal-tabla-caja { overflow-x: auto; margin: 0 0 15px; }
.legal-tabla {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: .92rem;
}
.legal-tabla th, .legal-tabla td {
  padding: 11px 13px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--hair);
}
.legal-tabla th {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-text);
  background: var(--color-surface);
  border-bottom-color: var(--line);
}
.legal-tabla td code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .82rem;
  color: var(--gold-ink);
  background: rgba(219,159,5,.09);
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
}

/* El carril de la tabla se puede desplazar con el teclado —lo pide la
   WCAG en cuanto algo tiene scroll propio— así que necesita verse
   enfocado cuando le llega el tabulador. */
.legal-tabla-caja:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 4px;
}