@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/poppins-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/poppins-medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../assets/fonts/instrument-serif-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Colores base (confirmados en Figma) */
  --color-cream: #E2DDD4;
  --color-terracotta: #AE5B3B;
  --color-brown-dark: #5A3217;
  --color-bg-light: #F4F1EA;
  --color-text-dark: #272727;
  /* Fondo alterno de secciones (Menú destacado, Grupos+Reseñas, y equivalentes
     en Historia/Carta/Reservas) — confirmado en Figma en los 4 documentos:
     nodos 56:1184, 78:170, 60:255, 71:415. Distinto de --color-bg-light. */
  --color-bg-alt: #EAE5DC;

  /* Tipografía */
  --font-body: "Poppins", sans-serif;
  --font-display: "Instrument Serif", serif;

  --text-paragraph: 1rem;       /* 16px */
  --text-paragraph-lg: 1.25rem; /* 20px */
  --text-subtitle: 2rem;        /* 32px */
  --text-title: 3rem;           /* 48px */
  --text-super-title: clamp(2.5rem, 8vw, 4.375rem); /* 40px en móvil pequeño, hasta 70px desde ~878px */

  /* Sistema de rejilla confirmado contra el render real del Figma (no una
     aproximación): el contenido no vive dentro de un .container centrado con
     tope estrecho — las secciones son full-bleed con solo 32px de padding
     lateral FIJO (no responsive) en todos los anchos, y el contenido interno
     tiene un tope de 1440px (no 1200px). Verificado con Playwright a 390/768/
     1024/1280/1440/1920/2560px: el padding se mantiene en 32px siempre, y el
     grid interno nunca supera 1440px de ancho. Antes: 1200px + padding
     responsive clamp(), lo que dejaba los grids de imágenes (menú destacado,
     galería, reseñas, ubicación) ~22% más estrechos de lo real. */
  --container-max: 1440px;
  --section-padding-y: 9rem;
  --section-padding-x: 2rem;
  /* Tope de ancho para bloques de texto centrados dentro de una sección ancha
     (título+párrafo de "Menú destacado" CTA, "Grupos", "Reseñas"): 950px,
     confirmado por el wrapper real `max-w-[950px] mx-auto` del Figma. */
  --text-block-width: 950px;
}

body {
  font-family: var(--font-body);
  color: var(--color-text-dark);
  background: var(--color-bg-light);
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.1; }

.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--section-padding-x); }
.section { padding-block: var(--section-padding-y); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: 25px;
  background: var(--color-terracotta);
  color: var(--color-cream);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 2.8px;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  /* whitespace-nowrap fiel a Figma (todos los botones lo llevan en el diseño):
     sin esto, la flecha final "→" es la última "palabra" del texto y salta
     sola a una segunda línea cuando el botón es más estrecho que el texto
     completo (ej. "Consultar opciones para grupos →" en Carta) — se ve como
     un botón partido en dos con la flecha suelta abajo. */
  white-space: nowrap;
}
/* Variante sin relleno (footer, "Ver en Google Maps"): en Figma este enlace
   comparte la estructura de .btn (flex + gap + flecha) pero SIN el fondo
   naranja relleno — es texto sobre el fondo marrón del footer. */
.btn--plain { background: none; padding-inline: 0; color: var(--color-cream); }

@media (max-width: 480px) {
  /* En viewports muy estrechos, los botones con texto largo ("Consultar
     opciones para grupos →") no caben en una línea al tamaño de escritorio
     ni siquiera con el ancho completo del contenedor. Reducir tamaño de
     fuente/tracking/padding en vez de permitir el salto de línea (que deja
     la flecha huérfana) mantiene el botón siempre en una sola línea. */
  .btn { font-size: 0.75rem; letter-spacing: 2px; padding: 10px 18px; }
}

@media (max-width: 360px) {
  /* Reducción adicional para el botón más largo del sitio ("Consultar
     opciones para grupos →", ~33 caracteres): a 0.75rem seguía desbordando
     el viewport en anchos ≤360px (ej. 320px). Verificado con Playwright que
     con estos valores el botón cabe en una línea sin overflow horizontal
     hasta 320px. */
  .btn { font-size: 0.625rem; letter-spacing: 1.4px; padding: 9px 14px; }
}

/* ==== HEADER ==== */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  /* z-index debe superar el de .cookie-banner (100): .site-header crea su propio
     contexto de apilamiento (position:fixed + z-index), así que .site-header__nav
     queda atrapado dentro de él al abrirse en móvil — ningún z-index puesto en el
     nav puede escapar de ese techo para ganarle a un hermano de .site-header como
     el banner de cookies. Verificado con Playwright (elementFromPoint) a 375×667:
     con z-index:10 aquí, el banner seguía interceptando clics sobre el nav abierto
     incluso con z-index:200 en .site-header__nav.is-open. */
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 37.5px var(--section-padding-x);
  color: var(--color-cream);
  transition: background-color 0.3s ease;
}
/* Padding vertical (37.5px) calculado para que la altura total del header
   (padding-box, que es el containing block de .site-header__logo en position:absolute)
   sea exactamente 100px, igual que el nodo Figma "Header transparente" (5:85,
   h-[100px]): con los 25px de los hijos en flujo (iconos sociales/nav) más
   37.5px arriba y abajo, el logo de 70px queda centrado con 15px de aire a cada
   lado — igual que en Figma, donde el logo (70px) también está centrado en un
   contenedor de 100px. Antes el header medía 81px (28px de padding), dejando solo
   ~5.5px de margen y un aspecto más apretado de lo que muestra el diseño.
   .site-header ahora es position:fixed (permanece visible al hacer scroll, ver
   initHeaderScroll() en js/main.js); en Home/Historia empieza transparente sobre
   la foto del hero y se vuelve sólida (.is-scrolled) en cuanto se hace scroll,
   para seguir siendo legible sobre el resto de secciones. En Carta/Reservas
   (.site-header--solid) es sólida siempre, así que .is-scrolled no cambia nada
   ahí. Como el header ya no ocupa espacio en el flujo del documento, las páginas
   con header sólido compensan con padding-top en <main> (ver más abajo) — Home/
   Historia no lo necesitan porque su hero ya está pensado para quedar cubierto
   por el header transparente. */
.site-header.is-scrolled { background: var(--color-brown-dark); }
.site-header__social { display: flex; gap: 16px; }
.site-header__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.site-header__logo img { height: 56px; width: auto; }
.site-header__nav { display: flex; align-items: center; gap: 32px; }
.site-header__nav a {
  font-size: 0.875rem;
  letter-spacing: 2.8px;
  text-transform: uppercase;
  font-weight: 500;
}
.site-header__nav a.is-active { text-decoration: underline; text-underline-offset: 4px; }
.site-header__lang {
  position: relative;
  margin-inline-start: 8px;
  padding-inline-start: 24px;
  border-inline-start: 1px solid rgba(226, 221, 212, 0.35);
}
.site-header__lang-toggle {
  display: flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  font: inherit; color: inherit;
  font-size: 0.875rem; letter-spacing: 2.8px; text-transform: uppercase; font-weight: 500;
}
.site-header__lang-caret { font-size: 0.7em; transition: transform 0.2s ease; }
.site-header__lang.is-open .site-header__lang-caret { transform: rotate(180deg); }
.site-header__lang-menu {
  position: absolute; top: calc(100% + 12px); right: 0;
  display: flex; flex-direction: column; min-width: 96px;
  background: var(--color-brown-dark); border-radius: 4px; overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.site-header__lang.is-open .site-header__lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.site-header__lang-menu a {
  padding: 10px 16px; font-size: 0.875rem; letter-spacing: 2.8px;
  text-transform: uppercase; font-weight: 500;
}
.site-header__lang-menu a.is-active { text-decoration: underline; text-underline-offset: 4px; }
.site-header__lang-menu a:hover { background: rgba(226, 221, 212, 0.1); }
.site-header__toggle { display: none; background: none; border: none; cursor: pointer; }

@media (max-width: 768px) {
  .site-header__nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: 40px;
    background: var(--color-brown-dark);
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }
  .site-header__nav.is-open { transform: translateX(0); }
  /* Texto más grande solo en el menú móvil a pantalla completa: 14px (heredado
     del header de escritorio) es ilegible/pequeño para una pantalla completa
     de navegación táctil. */
  .site-header__nav a { font-size: 1.5rem; }
  .site-header__lang {
    border-inline-start: none; border-block-start: 1px solid rgba(226, 221, 212, 0.35);
    padding-inline-start: 0; padding-block-start: 24px; margin-inline-start: 0;
  }
  .site-header__lang-toggle { font-size: 1.5rem; margin-inline: auto; }
  .site-header__lang-menu {
    position: static; opacity: 1; visibility: hidden; transform: none;
    box-shadow: none; background: none; align-items: center;
    max-height: 0; overflow: hidden; transition: max-height 0.2s ease, visibility 0.2s;
  }
  .site-header__lang.is-open .site-header__lang-menu { max-height: 200px; margin-block-start: 16px; visibility: visible; }
  .site-header__lang-menu a { font-size: 1.125rem; padding: 8px 0; }
  .site-header__toggle { display: block; position: relative; z-index: 11; }
  .site-header__toggle span {
    display: block; width: 24px; height: 2px; background: var(--color-cream); margin: 5px 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: center;
  }
  /* Hamburguesa → X: la línea central desaparece, la superior e inferior
     rotan y se desplazan para cruzarse en el centro (mismo punto donde
     estaba la línea del medio, separada 7px = 5px margin + 2px height). */
  .site-header__toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .site-header__toggle.is-open span:nth-child(2) { opacity: 0; }
  .site-header__toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ==== HERO ==== */
.hero { position: relative; height: 100vh; min-height: 600px; overflow: hidden; }
.hero__bg, .hero__bg img, .hero__bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* La <picture> queda debajo en el DOM y sirve de fallback inmediato mientras el
   vídeo carga, si no hay JS (la fuente del vídeo la asigna initHeroVideo) y para
   navegadores sin soporte de <video>. Su primer fotograma es el mismo que el del
   vídeo —el rótulo de la fachada—, así que no hay salto al arrancar. La versión
   vertical se sirve en móvil por el atributo media de <source>, igual que la
   variante vertical del vídeo. */
@media (prefers-reduced-motion: reduce) {
  /* Respeta la preferencia de movimiento reducido: se oculta el vídeo en vez
     de reproducirlo en bucle automáticamente, queda visible la foto estática. */
  .hero__bg video { display: none; }
}
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 100%);
}
.hero__content {
  position: relative; z-index: 1; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 32px; text-align: center; color: var(--color-cream); padding-inline: 1.5rem;
}
/* Tamaño responsivo heredado de --text-super-title (definido en :root): a 390px
   de ancho, 70px con max-width:20ch desbordaría el viewport, y además debe
   mantenerse consistente con el resto de usos del mismo token (p.ej. el h2
   de Intro, justo debajo del hero) para no invertir la jerarquía visual. */
.hero__content h1 { font-size: var(--text-super-title); max-width: 20ch; }
.hero__scroll {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
  color: var(--color-cream); font-size: 1.5rem;
  /* z-index por encima de .cookie-banner (fixed, z-index:100, bottom:0): en
     viewports de altura media (~900px o menos) el banner de cookies visible
     en la primera visita se solapa con este botón, ya que ambos comparten el
     mismo contexto de apilamiento raíz (.hero es position:relative sin
     z-index, no crea contexto propio). Detectado en QA final (Tarea 24) al
     verificar el botón de scroll del hero de Historia con Playwright. */
  z-index: 101;
}

/* Enlace discreto al vídeo corporativo, centrado justo encima de la flecha de
   scroll (que vive a 32px del borde inferior). Mismo z-index que la flecha para
   quedar por encima del banner de cookies. Sin subrayado en hover: el
   text-decoration alcanzaba también al triángulo del ::before y quedaba sucio;
   el estado se marca solo con la opacidad. */
.hero__video-link {
  position: absolute; bottom: 76px; left: 50%; transform: translateX(-50%);
  z-index: 101;
  display: inline-flex; align-items: center; gap: 10px;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--color-cream); font-family: var(--font-body); font-weight: 500;
  font-size: 0.8125rem; letter-spacing: 1.5px; text-transform: uppercase;
  text-decoration: none;
  opacity: 0.85; transition: opacity 0.2s ease;
}
.hero__video-link::before { content: "\25B6"; font-size: 0.7em; line-height: 1; }
.hero__video-link:hover,
.hero__video-link:focus-visible { opacity: 1; }

@media (max-width: 768px) {
  .hero__video-link { font-size: 0.6875rem; letter-spacing: 1px; }
}

/* ==== INTRO ==== */
.eyebrow {
  font-size: 0.875rem; letter-spacing: 2.8px; text-transform: uppercase;
  color: var(--color-terracotta); margin-bottom: 8px; font-weight: 500;
}
.intro { text-align: center; background: var(--color-cream); }
/* Tamaño y ancho confirmados contra el render real (no una estimación en ch):
   70px (--text-super-title, no --text-title) y 764px de ancho máximo tanto
   para el título como el párrafo, mismo wrapper en el Figma real. */
.intro .eyebrow { margin-bottom: 32px; }
.intro h2 { font-size: var(--text-super-title); color: var(--color-brown-dark); margin-block: 0 32px; max-width: 764px; margin-inline: auto; }
.intro p:not(.eyebrow) { max-width: 764px; margin-inline: auto; margin-bottom: 16px; }
.intro p:not(.eyebrow):last-of-type { margin-bottom: 32px; }

/* ==== MENU DESTACADO ==== */
.menu-highlight__head { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; margin-bottom: 2.5rem; }
.menu-highlight__head h2 { font-size: var(--text-title); color: var(--color-brown-dark); }
.menu-highlight__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.menu-card { position: relative; overflow: hidden; aspect-ratio: 459 / 689; }
.menu-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.menu-card__text {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-start; gap: 60px;
  padding: 24px; color: var(--color-cream);
  /* Degradado real de Figma (nodo 52:1027): cubre solo el 52% superior de la
     tarjeta (360/689px), de 0.6 arriba a transparente en el 52%. Por eso el
     texto se agrupa arriba (justify-content: flex-start) en vez de repartirse
     con space-between: con el degradado completo anterior el párrafo podía
     vivir en la mitad inferior sin oscurecer y perdía contraste. */
  background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 52%);
}
.menu-card__text h3 { font-size: var(--text-title); }
.menu-card__text h3, .menu-card__text p { text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
.menu-highlight__cta { text-align: center; margin-top: 4rem; }
/* font-size explícito: sin esto el h2 caía al tamaño por defecto del navegador
   (~24px) en vez de --text-title (48px) — confirmado bug real contra el
   render de referencia. */
.menu-highlight__cta h2 { font-size: var(--text-title); color: var(--color-brown-dark); max-width: var(--text-block-width); margin-inline: auto; }
.menu-highlight__buttons { display: flex; justify-content: center; gap: 16px; margin-top: 2.5rem; }

@media (max-width: 768px) {
  .menu-highlight__head, .menu-highlight__cards { grid-template-columns: 1fr; }
}

.menu-highlight { background: var(--color-bg-alt); }

/* ==== HISTORIA ==== */
.historia {
  position: relative; overflow: hidden; min-height: 500px;
  display: flex; align-items: center; justify-content: flex-end;
  padding-inline: var(--section-padding-x); padding-block: 0;
}
.historia__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Overlay confirmado contra Figma (nodo 20:302, "Rectangle 9"): un rectángulo
   independiente de 1920×794 con relleno degradado izquierda→derecha, transparente
   sobre la comida (izquierda) y al 80% de negro donde se apoya el texto (derecha).
   No existe una "tarjeta" sólida detrás del texto en el diseño real. */
.historia__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.8));
}
.historia__text {
  position: relative; z-index: 1; color: var(--color-cream); max-width: 706px;
}
/* Sin caja/tarjeta detrás del texto (fiel a Figma): la legibilidad depende del
   degradado de .historia__bg::after más un text-shadow, mismo patrón ya usado en
   .menu-card__text para texto sobre foto sin caja de fondo. Da un margen de
   contraste extra en anchos donde object-fit:cover recorta el degradado sobre
   una zona más clara de la foto (patatas, tomate), sin dibujar un rectángulo
   visible que Figma no muestra. */
.historia__text h2, .historia__text p:not(.eyebrow) { text-shadow: 0 1px 4px rgba(0,0,0,0.9); }
.historia__text h2 { font-size: var(--text-title); margin-block: 12px 16px; }
.historia__text p:not(.eyebrow) { margin-bottom: 24px; }

/* Medidas confirmadas contra el render real (localhost:5183): altura fija de
   794px, columna de texto al 50% del ancho (máx. 720px) con padding asimétrico
   (32px izq., 64px der.). Solo a partir de 769px: por debajo, ese ancho fijo del
   50% rompe el texto (columna de ~195px a 390px, palabras cortadas una por
   línea) — un problema del propio render de referencia, no del diseño; en
   mobile se mantiene el comportamiento fluido anterior (min-height + texto a
   todo el ancho disponible). */
@media (min-width: 769px) {
  .historia { height: 794px; min-height: 0; padding-inline: 0; }
  .historia__text {
    width: 50%; max-width: 720px; margin-left: auto;
    padding-left: 2rem; padding-right: 4rem;
  }
}

/* ==== GALERÍA ====
   Nodo Figma 28:123: bento 3 columnas x 2 fotos (alta+baja alternada por columna).
   Ratio real alta:baja = 690/307 ≈ 2.25 (9:4), confirmado por los nativos exportados
   (600x900 / 900x600) — se usa aspect-ratio por foto en vez de grid-row: span,
   ya que ningún span entero sobre un grid-auto-rows fijo reproduce ese ratio con precisión. */
.gallery { background: var(--color-cream); }
.gallery h2 { font-size: var(--text-title); color: var(--color-brown-dark); text-align: center; margin-bottom: 2.5rem; }
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.gallery__col { display: flex; flex-direction: column; gap: 1.5rem; }
.gallery__item {
  display: block; width: 100%; height: auto; object-fit: cover;
}
/* Nota: height:auto es imprescindible aquí — los atributos HTML width/height del
   <img> (para evitar CLS) se mapean como pista de altura definida, lo que anula
   aspect-ratio si no se sobreescribe explícitamente en CSS. */
.gallery__item--tall { aspect-ratio: 2 / 3; }
.gallery__item--short { aspect-ratio: 3 / 2; }

@media (max-width: 480px) {
  .gallery__grid { grid-template-columns: 1fr; }
  .gallery__item { max-height: 22rem; }
}

/* ==== UBICACIÓN ==== */
.location { background: var(--color-cream); }
.location__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.location__text h2 { font-size: var(--text-title); color: var(--color-brown-dark); margin-bottom: 2rem; }
.location__text p { margin-bottom: 1rem; max-width: 45ch; }
.location__map { width: 100%; height: auto; border: 5px solid var(--color-cream); }

@media (max-width: 768px) {
  .location__grid { grid-template-columns: 1fr; }
}

/* ==== GRUPOS + RESEÑAS ==== */
.groups-reviews { background: var(--color-bg-alt); }
.groups { text-align: center; }
.groups h2 { font-size: var(--text-title); color: var(--color-brown-dark); max-width: var(--text-block-width); margin-inline: auto; margin-bottom: 2rem; }
.groups p:not(.groups__contact) { max-width: var(--text-block-width); margin-inline: auto; margin-bottom: 1.5rem; }
.groups__contact { max-width: var(--text-block-width); margin-inline: auto; margin-top: 0; margin-bottom: 0; font-size: var(--text-paragraph-lg); }
.groups__contact a { text-decoration: underline; }
.divider {
  display: flex; align-items: center; justify-content: center; gap: 24px;
  max-width: var(--container-max); margin: 3rem auto 4rem; padding-inline: var(--section-padding-x);
}
.divider__line { flex: 1 1 690px; max-width: 690px; height: 1px; background: var(--color-terracotta); }
.divider__icon { flex-shrink: 0; }

.reviews { text-align: center; }
.reviews h2 { font-size: var(--text-title); color: var(--color-brown-dark); max-width: var(--text-block-width); margin-inline: auto; margin-bottom: 2.5rem; }
.reviews__aggregate { display: inline-block; margin-block: 0 5rem; font-weight: 500; }
.reviews__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: left; }
.review-card { background: var(--color-cream); border-radius: 16px; padding: 24px; box-shadow: 0 7px 3.5px rgba(0,0,0,0.09), 0 2px 2px rgba(0,0,0,0.1); }
.review-card header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.review-card header > img:last-child { margin-left: auto; }
.review-card__name { font-weight: 500; }
.review-card__date { font-size: 0.8rem; opacity: 0.7; }
.review-card__stars { color: var(--color-terracotta); margin-bottom: 8px; }

/* Utilidad: oculta visualmente pero mantiene accesible a lectores de pantalla.
   Necesaria porque el rating por tarjeta (★★★★★) es la única señal de esa
   valoración individual — a diferencia del agregado de la sección, que ya
   repite el dato en texto plano ("4.1 de 563 opiniones"), aquí no hay
   equivalente numérico visible, así que el glifo se marca aria-hidden y se
   añade este texto alternativo en vez de ocultar la información por completo. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Rotura intermedia: sin esto, el rango 769px-1200px (incluye iPad portrait
   real a 810/820/834px) sigue en 4 columnas y cada tarjeta queda demasiado
   estrecha (~185px, ~136px de texto útil tras el padding), forzando nombres
   largos a 3 líneas y citas a bloques densos de 5-6 líneas. Corregido de
   max-width:1024px a 1200px tras revisión — con 1024px el rango 1025-1150px
   seguía reproduciendo el mismo problema (verificado por render). */
@media (max-width: 1200px) {
  .reviews__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .reviews__grid { grid-template-columns: 1fr; }
}

/* ==== FOOTER ====
   Tipografía confirmada contra Figma (nodo 46:953): párrafos de contacto/horario
   en 20px Poppins Medium ("Párrafo grande"), no el 16px regular por defecto del
   body. Iconos de teléfono/ubicación (exportados de Figma, nodos 46:843/46:842)
   y de redes sociales a 30px (más grandes que los 25px del header). El botón
   "Ver en Google Maps" NO es una píldora naranja rellena en Figma — es texto +
   flecha sin fondo (ver .btn--plain). */
.site-footer { background: var(--color-brown-dark); color: var(--color-cream); padding-block: 9rem 2rem; }
.site-footer h3 { font-size: var(--text-subtitle); margin-bottom: 1rem; }
.site-footer__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; margin-bottom: 3rem; }
.site-footer__contact p, .site-footer__hours p, .site-footer__social-title {
  /* Figma marca estos textos como Poppins Medium (500), pero a 20px se percibe
     visualmente más pesado de lo esperado — decisión del cliente: mantener el
     tamaño 20px pero con peso Regular (400), más ligero que la especificación
     técnica exacta. */
  font-size: var(--text-paragraph-lg); font-weight: 400;
}
.site-footer__contact .btn { margin-top: 1rem; }
.site-footer__line { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 1rem; }
.site-footer__line img { flex-shrink: 0; margin-top: 4px; }
.site-footer__social-title { margin-top: 1.5rem; }
.site-footer__social-icons { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.site-footer__handle { font-style: italic; font-weight: 400; font-size: 1rem; }
.site-footer__bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  padding-top: 2rem; border-top: 1px solid rgba(226,221,212,0.3); font-size: 0.9rem;
}
.site-footer__bottom a { text-decoration: underline; }

@media (max-width: 768px) {
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__bottom { flex-direction: column; }
}

/* ==== COOKIE BANNER ==== */
.cookie-banner {
  position: fixed; bottom: 0; inset-inline: 0; z-index: 105;
  background: var(--color-brown-dark); color: var(--color-cream);
  padding: 1.5rem clamp(1.5rem, 5vw, 4rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
}
/* Bug encontrado en el pase de responsive (Tarea 15): el atributo [hidden] que
   js/cookies.js activa vía banner.hidden = true nunca ocultaba el banner. La
   regla UA por defecto es [hidden]{display:none} sin !important, y una regla
   normal de autor (.cookie-banner{display:flex}) siempre gana sobre una regla
   normal de user-agent en la cascada, sin importar el orden ni la especificidad.
   Resultado verificado: tras pulsar "Aceptar"/"Rechazar", o en una visita
   recurrente con consentimiento ya guardado, el banner se quedaba fijo en
   pantalla para siempre, tapando el pie de página en los 3 anchos. Se
   sobreescribe aquí con mayor especificidad de autor. */
.cookie-banner[hidden] { display: none; }
.cookie-banner__actions { display: flex; gap: 12px; }
/* Compone sobre .btn (mismo padding/radio/tipografía) y solo sustituye el
   relleno sólido por un contorno, para el botón secundario "Rechazar". */
.cookie-banner__btn--ghost {
  background: transparent;
  border: 1px solid var(--color-cream);
}

/* ==== HISTORIA (PÁGINA) ==== */
/* Overlay del hero de Historia (nodo Figma 60:286): a diferencia del hero de
   Home (overlay al 100% de la altura), aquí el rectángulo de oscurecimiento
   mide solo 541px de los 1080px totales del hero (50.1%), con degradado
   0.7 arriba a 0 abajo — un "viñeteado" superior, no un tinte completo. */
.hero--top-vignette .hero__bg::after {
  inset: 0 0 auto 0;
  height: 50%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
}

.intro--historia h2 { font-size: var(--text-super-title); color: var(--color-brown-dark); max-width: 950px; margin-inline: auto; }

.legacy { background: var(--color-bg-alt); }
.legacy__intro { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; margin-bottom: 2.5rem; }
.legacy__intro h2 { font-size: var(--text-title); color: var(--color-brown-dark); }
.legacy__mosaic { margin-top: 0; }

@media (max-width: 768px) {
  .legacy__intro { grid-template-columns: 1fr; }
}

/* ==== INFO-SPLIT (compartido: Historia §patrimonio y Reservas §ubicación) ====
   Proporción de columnas confirmada en Figma (nodos 71:412 y 78:169): texto
   459px / mapa 705px en ambos casos — no es un grid 1fr/1fr como .location__grid
   de Home, es ~40/60. Se usa fr con los valores reales para reproducir la
   proporción exacta sin aproximar a mano. */
.info-split__grid { display: grid; grid-template-columns: 460fr 705fr; gap: 3rem; align-items: center; }
.info-split__text h2 { font-size: var(--text-title); color: var(--color-brown-dark); margin-bottom: 1rem; }
.info-split__text p { margin-bottom: 1rem; max-width: 50ch; }
.info-split__map { width: 100%; height: auto; border: 5px solid var(--color-cream); }
.info-split--alt { background: var(--color-bg-alt); }

@media (max-width: 768px) {
  .info-split__grid { grid-template-columns: 1fr; }
}

/* Reservas §ubicación (nodo Figma 78:169): a diferencia de Historia
   §patrimonio (nodo 71:412) — donde título y párrafo comparten los mismos
   460px de columna — en Figma el título "Dónde estamos / (y dónde aparcar
   fácilmente)" vive en una caja de 704px, más ancha que los 459px de la
   columna de texto/párrafo, precisamente para que su 2ª línea quepa en una
   sola línea a 48px. Nuestro grid usa un gap fijo de 3rem (no los ~275px
   reales entre columnas en Figma), y el contenedor tiene un ancho máximo
   (--container-max: 1200px), así que "columna + gap" tiene un techo fijo de
   ~452px en cualquier viewport — insuficiente para ese texto a 48px por
   ~25px, incluso ensanchando el h2 hasta el límite del gap disponible.
   Comprobado con Playwright: con el grid de 2 columnas compartido, el
   título se parte en 3-4 líneas en TODO el rango 769-1280px, no solo a
   1280px. Como el layout apilado (1 columna) sí lo resuelve limpiamente en
   todo ese rango (ya se comprueba en 768px), esta sección (solo el
   modificador .info-split--wide-title, sin tocar la regla compartida
   .info-split__grid) se apila hasta 1279px. A partir de 1280px la columna
   alcanza su ancho techo fijo, así que un h2 ensanchado con el gap
   disponible + una reducción leve de tamaño (44px en vez de 48px) cabe con
   margen en 2 líneas de forma robusta para cualquier viewport mayor. No se
   toca la regla base compartida .info-split__text h2 (Historia sigue en
   48px). */
@media (max-width: 1279px) {
  .info-split--wide-title .info-split__grid { grid-template-columns: 1fr; }
}
@media (min-width: 1280px) {
  .info-split--wide-title .info-split__text h2 {
    font-size: 2.75rem;
    width: calc(100% + 3rem);
    max-width: none;
  }
}

/* ==== CTA-CLOSE (compartido: Historia y Carta) ==== */
.cta-close { background: var(--color-bg-alt); text-align: center; }
.cta-close h2 { font-size: var(--text-title); color: var(--color-brown-dark); max-width: var(--text-block-width); margin-inline: auto; margin-bottom: 1rem; }
.cta-close p { max-width: var(--text-block-width); margin-inline: auto; margin-bottom: 1.5rem; }
.cta-close__buttons { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.cta-close--plain { background: var(--color-bg-light); }

/* ==== HEADER SÓLIDO (Carta y Reservas) ====
   Fondo 100% opaco marrón siempre (a diferencia de .site-header transparente en
   Home/Historia, que solo se vuelve sólido al hacer scroll vía .is-scrolled).
   position:fixed ya viene heredado de .site-header, así que .site-header__logo
   sigue teniendo un ancestro posicionado sin necesidad de un override aquí.
   Como .site-header es fixed en las 4 páginas, ya no ocupa espacio en el flujo
   del documento — el hueco se compensa con padding-top en <main> (regla de abajo),
   solo en las páginas con header sólido: Home/Historia no lo necesitan porque su
   hero está pensado para quedar cubierto por el header transparente. */
.site-header--solid { background: var(--color-brown-dark); }
.site-header--solid ~ main { padding-top: 100px; }

/* ==== PAGE-HERO (compartido: Carta y Reservas) ====
   No lleva la clase .section porque es el contenido above-the-fold de estas
   páginas. Como .section también aporta el padding-block vertical, se
   replica aquí directamente para no perder el espaciado al quitar la clase. */
.page-hero { text-align: center; padding-block: var(--section-padding-y); }
.page-hero h1 { font-size: var(--text-super-title); color: var(--color-brown-dark); margin-block: 16px 24px; max-width: 764px; margin-inline: auto; }
.page-hero p { max-width: 765px; margin-inline: auto; margin-bottom: 1rem; }
.page-hero p em { font-style: italic; }
.page-hero__buttons { display: flex; justify-content: center; gap: 16px; margin-top: 1.5rem; flex-wrap: wrap; }
.page-hero__phone { font-family: var(--font-body); font-weight: 500; font-size: var(--text-paragraph-lg); }
.page-hero__phone a { text-decoration: underline; text-underline-offset: 3px; }

/* ==== GROUPS-MENU (Carta) ====
   El Figma (nodo 56:1176) da texto 461px / imagen 706px — prácticamente la
   misma proporción ~40/60 que .info-split (460px/705px, Historia §patrimonio
   y Reservas §ubicación), no un 1fr/1fr simétrico. Se usa el mismo ratio
   460fr/705fr; sigue siendo un componente propio (no .info-split) porque
   cambia el fondo (--color-bg-alt) y el propósito semántico de la sección. */
.groups-menu { background: var(--color-bg-alt); }
.groups-menu__grid { display: grid; grid-template-columns: 460fr 705fr; gap: 3rem; align-items: center; }
.groups-menu__text h2 { font-size: var(--text-title); color: var(--color-brown-dark); margin-block: 8px 16px; }
.groups-menu__text p { margin-bottom: 1.5rem; max-width: 50ch; }
.groups-menu__image { width: 100%; height: auto; }

@media (max-width: 768px) {
  .groups-menu__grid { grid-template-columns: 1fr; }
}

/* ==== VIDEO MODAL (vídeo corporativo) ====
   <dialog> nativo: el propio elemento aporta el foco atrapado, el cierre con
   Esc y el ::backdrop, así que aquí solo se define el aspecto. El vídeo lleva
   preload="none" en el HTML: no se descarga hasta que se abre el diálogo. */
.video-modal {
  border: 0; padding: 0; background: transparent;
  width: min(1200px, 92vw); max-width: 92vw; max-height: 92vh;
  overflow: visible;
  /* El reset del proyecto pone margin:0 a todo, lo que anula el margin:auto con
     el que el navegador centra un <dialog> modal: sin esto se pega a la esquina
     superior izquierda. Con position:fixed e inset:0 (los del user agent),
     margin:auto lo vuelve a centrar en los dos ejes. */
  margin: auto;
}
.video-modal::backdrop { background: rgba(0, 0, 0, 0.88); }
.video-modal__inner { position: relative; }
.video-modal__player {
  display: block; width: 100%; height: auto; max-height: 88vh;
  aspect-ratio: 16 / 9; background: #000;
}
.video-modal__close {
  position: absolute; top: 12px; right: 12px;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer;
  background: rgba(0, 0, 0, 0.55); color: var(--color-cream);
  font-size: 1.5rem; line-height: 1;
  transition: background 0.2s ease;
}
.video-modal__close:hover,
.video-modal__close:focus-visible { background: var(--color-terracotta); }

/* Enlace de la galería resumida de la Home a la página con todas las fotos. */
.gallery__more { display: flex; justify-content: center; margin-top: 2.5rem; }

/* ==== GALERÍA COMPLETA (página propia) ====
   Los mosaicos de Home e Historia son un aperitivo dentro de una página larga,
   y por eso ahí las fotos se topan a 22rem. Esta página existe solo para verlas,
   así que baja de columnas antes (a 900px y a 480px), no recorta la altura y
   estrecha el margen lateral en móvil para ganar ancho de imagen. Sin esto, a
   600px se veían tres columnas de 158px y en móvil las verticales perdían un
   25% del alto. */
@media (max-width: 900px) {
  .gallery--full .gallery__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .gallery--full .gallery__grid { grid-template-columns: 1fr; gap: 1rem; }
  .gallery--full .gallery__col { gap: 1rem; }
  .gallery--full .gallery__item { max-height: none; }
  .gallery--full .container { padding-inline: 1rem; }
}