/* =========================================================
   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: #C88405;   /* dorado profundo, para itálicas y filetes */
  --color-accent:  #DB9F05;   /* dorado del aro del logo */
  --gold-lit:      #E9A712;   /* dorado encendido: LED, canal, cita */
  --gold-soft:     #F0C766;
  --gold-ink:      #A9760A;   /* dorado apto para texto sobre claro */
  --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; }

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);
}

.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(--color-primary);
}
.eyebrow--hero { color: var(--color-accent); 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 — ratio real medido 800 × 800 px (1:1, cuadrado,
   fondo transparente). Según la tabla de proporciones,
   un logo cuadrado ocupa el 85-90 % del espacio disponible.
   --------------------------------------------------------- */
/* El archivo es 85 % transparente y un 32 % de su tinta es NEGRA (el texto
   "Teleclub / Los Valles" y el contorno de la espina): sobre el header
   transparente que va encima de la foto, sobre el menú y sobre el footer
   verdes, ese texto quedaría ilegible. El aro dorado ocupa un 85,2 % del
   lienzo, centrado, así que un disco claro a caja completa lo convierte en
   un medallón con un filo de crema de ~7 % alrededor del aro. En el header
   fijado el disco coincide con el crema del fondo y no se percibe. */
/* El medallón es cuadrado, así que puede permitirse el 85-90 % del alto
   disponible. En el móvil ese alto disponible es mucho menor: un header
   de 148 px se comía una sexta parte de la pantalla del teléfono, de modo
   que el medallón baja a 92 px y va creciendo por tramos. */
/* Escala del medallón. En el ordenador va al 0,8 de la versión original
   —allí pesaba demasiado y se comía alto de pantalla—; en móvil y tablet
   va al 1,4 de esa escala reducida, porque en pantalla estrecha el
   medallón es la única marca visible y necesita presencia.

   MÓVIL — la caja mide 88 px, no 104. El motivo es el disco: en header y
   footer el logo se sirve sobre un disco crema a caja completa, así que
   lo que se ve es un círculo del alto entero de la caja; en el panel del
   menú el disco se retira y solo se ve el aro dorado, que ocupa el 85,2 %
   del lienzo. A igualdad de caja, el del header se veía un 17 % más
   grande. Con 88 px el disco del header mide exactamente lo mismo que el
   aro del menú (104 × 0,852 = 88,6): los dos medallones se ven idénticos,
   que es de lo que se trataba. De paso el header baja de 122 a 106 px y
   le devuelve ese alto al hero. */
.logo-img {
  height: 88px;
  width: auto;
  object-fit: contain;
  display: block;
  flex: 0 0 auto;
  background: var(--color-bg);
  border-radius: 50%;
  transition: height .4s cubic-bezier(.22,1,.36,1);
}
@media (min-width: 640px) {
  .logo-img { height: 100px; }
}
@media (min-width: 768px) {
  .logo-img { height: 148px; }   /* tablet */
}
@media (min-width: 1024px) {
  .logo-img { height: 115px; }   /* desktop */
}

/* Al hacer scroll la cabecera se compacta. En el ordenador el medallón
   baja bastante, pero en móvil a 62 px se quedaba en un botón ilegible:
   ahí sube un 40 % (62 → 87), casi el mismo alto que en reposo. La
   cabecera fijada crece con él lo justo para dejarle aire. */
.site-header.is-stuck .logo-img { height: 87px; }
@media (min-width: 640px)  { .site-header.is-stuck .logo-img { height: 98px; } }
@media (min-width: 768px)  { .site-header.is-stuck .logo-img { height: 97px; } }
@media (min-width: 1024px) { .site-header.is-stuck .logo-img { height: 75px; } }

/* El footer acompaña al header en cada tramo */
.logo-img--footer { height: 88px; }
@media (min-width: 640px)  { .logo-img--footer { height: 100px; } }
@media (min-width: 768px)  { .logo-img--footer { height: 148px; } }
@media (min-width: 1024px) { .logo-img--footer { height: 115px; } }

/* En el menú a pantalla completa el medallón encabeza el panel con
   EXACTAMENTE el mismo alto que en la cabecera del móvil —mismos valores
   tramo a tramo—, de modo que al abrir el menú el logo no encoge: se
   queda donde estaba.
   Sobre blanco puro el disco crema del logo se notaría, así que aquí
   el fondo se retira y el PNG transparente se apoya en el blanco.
   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: 104px;              /* = .logo-img del header en móvil */
  width: auto;
  object-fit: contain;
  background: transparent;
}
@media (min-width: 640px) { .mobile-menu .logo-img--menu { height: 119px; } }
@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 el medallón 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(48px, 12.5svh, 92px); }
}

/* ---------------------------------------------------------
   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; } }
.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); }

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

/* 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. */
.mobile-menu-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  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; }

/* ---------------------------------------------------------
   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 h4 {
  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; }
.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; }
.footer-demo { color: var(--gold-soft); font-style: italic; }

/* 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; } }

/* ---------------------------------------------------------
   11. POP-UP KORA
   --------------------------------------------------------- */
.kora-modal {
  position: fixed;
  inset: 0;
  z-index: 8000;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(14,10,7,.85);
  backdrop-filter: blur(7px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease, visibility .45s ease;
  cursor: none;
}
#kora-modal * { cursor: none; }
.kora-modal.is-open { opacity: 1; visibility: visible; }
.kora-modal.is-closing { opacity: 0; }

.kora-box {
  position: relative;
  width: min(500px, 100%);
  padding: 44px 30px 38px;
  text-align: center;
  background: var(--color-bg);
  border: 1px solid rgba(200,137,26,.4);
  border-radius: 4px;
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.95);
  transform: translateY(22px) scale(.97);
  opacity: 0;
  transition: transform .55s cubic-bezier(.22,1,.36,1), opacity .45s ease;
  pointer-events: auto;
}
.kora-modal.is-open .kora-box { transform: translateY(0) scale(1); opacity: 1; }
@media (min-width: 640px) { .kora-box { padding: 52px 46px 44px; } }

.kora-espina {
  width: 170px;
  margin: 0 auto 18px;
  color: var(--color-primary);
  opacity: .85;
}
.kora-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.6rem, 8vw, 3.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .12em;
  margin: 0 0 6px;
  color: var(--color-deep);
}
.kora-title::after {
  content: "";
  display: block;
  width: 54px; height: 2px;
  background: var(--color-accent);
  margin: 16px auto 0;
}
.kora-text {
  margin: 20px auto 28px;
  max-width: 400px;
  font-size: .95rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--color-muted);
}
.kora-text strong { color: var(--color-deep); font-weight: 600; }

.kora-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 44px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--color-deep);
  color: #FBF7EF;
  font-family: 'Jost', sans-serif;
  font-size: .84rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: none;
  transition: background-color .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.kora-btn:hover {
  background: var(--color-accent);
  color: #23180A;
  transform: translateY(-3px);
  box-shadow: 0 16px 30px -14px rgba(200,137,26,.9);
}

/* ---------------------------------------------------------
   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;
}

/* --- 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; }
}

/* --- 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; }
  .kora-box { padding: 36px 20px 30px; }

  .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; }
  .logo-img { height: 66px; }
  .site-header.is-stuck .logo-img { height: 56px; }
  .logo-img--footer { height: 80px; }
  .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; }
}