/* ============================================================================
   Alta cocina · plantilla de restaurante caro (21-09-2026).

   Escrita desde cero para Prospector. Él enseñó la web de un asador de carne de
   Murcia y pidió «una de este estilo, con los mismos efectos y la misma
   distribución, para un restaurante súper caro». De ella se estudiaron las
   DECISIONES, no el código ni los textos:
     - la página se lee por pantallas completas, una a una (aquí con el ajuste
       nativo del navegador, `scroll-snap`, y no secuestrando la rueda: no se
       atasca ni en el móvil ni con el teclado);
     - pantallas partidas: media foto grande, media oscura con el texto;
     - una pantalla que pasa de lado al bajar (las especialidades);
     - verde casi negro, letra fina en mayúsculas muy espaciadas, botones de
       solo borde y puntos a la derecha que dicen en qué pantalla estás.
   Se añade una serif fina (Cormorant Garamond) para titulares y frase: es lo
   que le da aire de sitio caro. Las dos letras son libres (Google Fonts).

   El latón es FIJO: sobre fondo oscuro un color elegido por la IA no se puede
   garantizar legible (mismo criterio que noche-ambar). COLOR_ACENTO solo va a
   --color-casa, que usa el motivo.

   Cumple el mínimo del 12-09-2026 (templates/_comun): portada que se acerca y
   titular que sube, cinta que corre, especialidades numeradas que se abren en
   el visor, foto con marco desplazado, frase con comillas gigantes, carta con
   números grandes (hoja de menú en oscuro: nunca cajas) y pie oscuro.
   ========================================================================== */

:root {
  --color-casa: #8c3b2a;
  --motivo-tercero: #b08d57;
  --motivo-tercero-texto: #97794b;
  --motivo-glifo: "❧";

  --laton: #c8a96b;
  --laton-claro: #e2c995;
  --acento: var(--laton); /* lo usan el visor y los efectos comunes */

  --fondo: #0a110c;
  --fondo-2: #0f1811;
  --fondo-3: #152118;
  --texto: #f1eee6;
  --suave: #b3b1a7;
  --tenue: #84847b;
  --linea: rgba(241, 238, 230, .14);

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --efx-titulos: var(--serif);
  --efx-texto: var(--sans);

  --marco: 1180px;
  --alto: 100svh;
  --curva: cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }

/* Las pantallas encajan solas al soltar la rueda, sin secuestrarla. Solo en
   ordenador: en el móvil se baja normal. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  html { scroll-snap-type: y proximity; }
  .pantalla, .lateral-paso { scroll-snap-align: start; }
}
html, body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 300 15px/1.8 var(--sans);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 400; }

.marco { width: min(var(--marco), calc(100% - 48px)); margin-inline: auto; }

.kicker {
  margin: 0 0 18px;
  font: 400 .7rem/1.4 var(--sans);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--laton);
}

.cabeza { text-align: center; margin-bottom: 64px; }
.cabeza h2 { font-size: clamp(2.2rem, 4.2vw, 3.4rem); line-height: 1.08; }
.cabeza h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  margin: 26px auto 0;
  background: var(--laton);
}

/* --- botones de solo borde --------------------------------------------------- */

.acciones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
.acciones-izq { justify-content: flex-start; }

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 30px;
  border: 1px solid color-mix(in srgb, var(--texto) 55%, transparent);
  font: 400 .72rem/1 var(--sans);
  letter-spacing: .26em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--texto);
  background: transparent;
  transition: background .4s var(--curva), color .4s, border-color .4s, transform .4s var(--curva);
}
.boton:hover { background: var(--texto); color: var(--fondo); transform: translateY(-2px); }
.boton-suave { border-color: color-mix(in srgb, var(--laton) 60%, transparent); color: var(--laton-claro); }
.boton-suave:hover { background: var(--laton); border-color: var(--laton); color: var(--fondo); }

/* --- cabecera ------------------------------------------------------------------ */

.cabecera {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 44px;
  background: linear-gradient(180deg, rgba(10, 17, 12, .7), transparent);
  transition: padding .4s var(--curva), background .4s, box-shadow .4s;
}
.cabecera.efx-con-sombra {
  padding-block: 13px;
  background: color-mix(in srgb, var(--fondo) 94%, transparent);
  box-shadow: 0 1px 0 var(--linea);
}
.marca {
  font: 400 .95rem/1 var(--sans);
  letter-spacing: .42em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.nav { display: flex; align-items: center; gap: 30px; }
.nav a {
  font: 400 .68rem/1 var(--sans);
  letter-spacing: .26em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--suave);
  transition: color .3s;
}
.nav a:hover { color: var(--texto); }
.nav .nav-tel { padding: 11px 18px; border: 1px solid var(--linea); color: var(--texto); }
.nav .nav-tel:hover { border-color: var(--laton); color: var(--laton-claro); }

/* --- puntos de la derecha ------------------------------------------------------ */

.puntos {
  position: fixed;
  right: 26px;
  top: 50%;
  z-index: 35;
  display: grid;
  gap: 16px;
  transform: translateY(-50%);
}
.puntos[hidden] { display: none; }
.puntos a {
  position: relative;
  display: block;
  width: 9px;
  height: 9px;
  border: 1px solid color-mix(in srgb, var(--texto) 70%, transparent);
  border-radius: 50%;
  transition: background .3s, transform .3s var(--curva), border-color .3s;
}
.puntos a.activo { background: var(--laton); border-color: var(--laton); transform: scale(1.35); }
.puntos a span {
  position: absolute;
  right: 22px;
  top: 50%;
  translate: 0 -50%;
  white-space: nowrap;
  font: 400 .6rem/1 var(--sans);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--texto);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.puntos a:hover span, .puntos a:focus-visible span { opacity: 1; }

/* --- pantallas ------------------------------------------------------------------ */

.pantalla { position: relative; min-height: var(--alto); }

/* 1 · Portada: foto grande a la izquierda, el nombre en oscuro a la derecha. */
.portada { display: grid; grid-template-columns: 1.35fr 1fr; background: var(--fondo); }
.portada-foto { position: relative; overflow: hidden; min-height: var(--alto); }
.portada-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.portada-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 60%, rgba(10, 17, 12, .55));
}
.portada-lado {
  position: relative;
  display: grid;
  place-items: center;
  padding: 120px clamp(28px, 5vw, 80px) 80px;
  background: var(--fondo-2);
  text-align: center;
}
.portada-dentro { max-width: 460px; }
.portada-nombre, .portada h1.portada-nombre {
  margin: 0;
  color: var(--texto);
  font: 200 clamp(1.9rem, 3.4vw, 3rem)/1.15 var(--sans);
  letter-spacing: .32em;
  text-transform: uppercase;
  text-indent: .32em; /* compensa el espaciado final para que quede centrado */
}
.filete { display: block; width: 44px; height: 1px; margin: 30px auto; background: var(--laton); }
.portada h1 {
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  font-style: italic;
  line-height: 1.25;
  color: var(--laton-claro);
}
.portada h1 em { font-style: normal; color: var(--texto); }
.portada-bajada { margin: 20px 0 0; color: var(--suave); font-size: .92rem; }
.portada .acciones { justify-content: center; }

/* La portada con SU vídeo: a pantalla completa y el nombre encima, no partida.
   El vídeo de un cliente viene del móvil en vertical, así que a lo ancho se
   recorta por los lados: por eso el texto va centrado y con velo, que es donde
   la imagen aguanta el recorte. */
body[data-video="fondo"] .portada { grid-template-columns: 1fr; }
body[data-video="fondo"] .portada-foto { position: absolute; inset: 0; z-index: 0; }
/* El vídeo, ENTERO. Viene del móvil, en vertical: ampliado para llenar una
   pantalla ancha se le cortaba la cabeza a quien habla y además se veía
   borroso, porque 720 px estirados a 1.900 es ampliar dos veces y media
   (30-09-2026). Cabiendo entero se ve todo y, al pintarse más pequeño que su
   tamaño real, se ve nítido. Abajo se le deja sitio al texto para que los
   subtítulos del vídeo no caigan encima. */
body[data-video="fondo"] .portada-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: transparent;
}
/* Detrás, el mismo fotograma desenfocado y bajado: llena los lados sin que
   parezca un hueco negro. */
.portada-ambiente {
  display: none;
  filter: blur(34px) brightness(.34) saturate(.85);
  transform: scale(1.18);
  transition: opacity .8s ease;
}
body[data-video-fin] .portada-ambiente { opacity: 0; }
/* Velo: sin él, el nombre en letra fina sobre el vídeo no se lee en cuanto
   pasa un plano claro. */
body[data-video="fondo"] .portada-foto::after {
  background: linear-gradient(180deg, rgba(10, 17, 12, .62) 0%, rgba(10, 17, 12, .34) 42%, rgba(10, 17, 12, .86) 100%);
}
body[data-video="fondo"] .portada-lado { position: relative; z-index: 1; background: transparent; }
/* Con el vídeo detrás, el nombre es lo único que hay: va más grande. */
body[data-video="fondo"] .portada-nombre,
body[data-video="fondo"] .portada h1.portada-nombre {
  font-size: clamp(2.4rem, 5.6vw, 4.6rem);
  text-shadow: 0 2px 40px rgba(10, 17, 12, .5);
}

/* En pantalla ancha, el vídeo se lleva TODO el alto y el texto se va al lado.
   Pidió verlo más grande «pero sin perder calidad» (30-09-2026): el vídeo tiene
   720x1280, así que el tope sin ampliarlo es el alto de la ventana. Dejándole
   hueco abajo al texto se quedaba en 375 px de ancho; a pantalla completa de
   alto sube a unos 500, que es lo máximo que se puede sin estirarlo. */
@media (min-width: 1100px) {
  body[data-video="fondo"] .portada-video { object-fit: contain; }
  /* El rótulo del final es cuadrado y, a todo el alto, se metía por debajo del
     texto de la izquierda: se le reserva esa columna. */
  body[data-video="fondo"] .portada-foto img.portada-cierre { padding-bottom: 0; padding-left: min(30vw, 440px); }
  /* El fondo desenfocado solo hace falta aquí: en el móvil el vídeo llena la
     pantalla y no se ve nada de lo de detrás. */
  .portada-ambiente { display: block; }
  /* Y los botones del vídeo, a la derecha: abajo a la izquierda chocaban con
     «Llamar y reservar». */
  body[data-video="fondo"] .video-sonido { left: auto; right: clamp(20px, 4vw, 48px); }
  body[data-video="fondo"] .portada-lado {
    align-items: center;
    justify-items: start;
    text-align: left;
    padding: 100px max(4vw, 32px) 100px;
  }
  body[data-video="fondo"] .portada-dentro { max-width: min(30vw, 350px); }
  /* El nombre vuelve a la izquierda: sin él, esa media pantalla quedaba vacía
     (30-09-2026). Más pequeño que en las portadas sin vídeo, que aquí comparte
     sitio con el vídeo. */
  body[data-video="fondo"][data-portada] .portada-dentro .kicker { display: block; }
  body[data-video="fondo"][data-portada] .portada-nombre { display: block; font-size: clamp(1.7rem, 2.4vw, 2.5rem); }
  body[data-video="fondo"][data-portada] .portada .filete { display: block; margin: 24px 0; }
  /* Y con el nombre puesto, el texto de debajo ya no necesita tanto aire. */
  body[data-video="fondo"] .portada-bajada { margin-top: 18px; }
  body[data-video="fondo"] .portada .acciones,
  body[data-video="fondo"] .portada-nota { justify-content: flex-start; }
  body[data-video="fondo"] .portada-bajada { margin-inline: 0; }
  /* Sombra por la izquierda, que es donde cae el texto. */
  body[data-video="fondo"] .portada-foto::after {
    background:
      linear-gradient(90deg, rgba(10, 17, 12, .78) 0%, rgba(10, 17, 12, .35) 32%, transparent 48%),
      linear-gradient(180deg, rgba(10, 17, 12, .6) 0%, transparent 28%, transparent 72%, rgba(10, 17, 12, .7) 100%);
  }
  body[data-video-fin] .portada-foto::after {
    background: linear-gradient(90deg, rgba(10, 17, 12, .82) 0%, rgba(10, 17, 12, .4) 30%, transparent 46%);
  }
}

.marca { display: inline-flex; align-items: center; gap: 14px; }
.marca-logo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  /* El logotipo viene sobre crema y la cabecera es verde casi negro: el aro lo
     separa del fondo sin recortarle nada. */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .18);
}

/* El rótulo del final, nítido: el mismo con el que acaba el vídeo, pero con su
   PNG a resolución completa y el crema del propio rótulo de fondo, para que no
   se note dónde acaba la imagen. */
/* Con `.portada-cierre` a secas NO basta: `.portada-foto img` ya le pone
   `object-fit: cover` y gana por especificidad, así que el rótulo salía
   ampliado y cortado. */
.portada-foto img.portada-cierre {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #f6f1e7;
  /* Abajo se deja sitio para la frase, la nota de Google y los botones. */
  padding: clamp(8px, 2vh, 28px) 0 clamp(172px, 24vh, 270px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .7s ease;
}
body[data-video-fin] .portada-foto img.portada-cierre { opacity: 1; visibility: visible; }
/* La sombra de abajo, por encima del rótulo: si no, el texto se queda sobre el
   crema y no se lee. */
body[data-video-fin] .portada-foto::after { z-index: 2; }

/* Cuando el vídeo termina.
   Su vídeo acaba con el rótulo de la casa —el logotipo a pantalla completa— y
   eso es lo que se queda: el <video> no se esconde, se para en su último
   fotograma. Antes se le montaba encima una portada propia con el logotipo;
   sobra, y además nunca iba a quedar tan bien como su propio cierre
   (30-09-2026).

   Lo único que hace falta es que el texto de abajo siga leyéndose, porque ese
   rótulo es claro: el velo pasa a ser una sombra solo en la parte de abajo. */
body[data-video-fin] .portada-foto::after {
  background: linear-gradient(180deg, rgba(10, 17, 12, .55) 0%, transparent 24%, transparent 40%, rgba(10, 17, 12, .62) 64%, rgba(10, 17, 12, .9) 92%);
}
/* Sobra repetir el nombre: lo dice el vídeo y lo dice su rótulo. */
body[data-video="fondo"] .portada-dentro .kicker,
body[data-video="fondo"] .portada-nombre,
body[data-video="fondo"] .portada .filete { display: none; }
body[data-video-fin] .video-sonido { display: none; }
body[data-video-fin] .video-rever { display: inline-block; }
.video-rever { display: none; }

/* El texto, abajo, sobre la sombra. */
body[data-video="fondo"] .portada-lado { align-items: end; }
body[data-video-fin] .portada-bajada { margin-top: 0; text-shadow: 0 1px 14px rgba(10, 17, 12, .8); }

/* La nota de Google, solo en esta pantalla: es el mejor argumento que tiene. */
.portada-nota { display: none; }
body[data-video-fin] .portada-nota {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  margin: 22px 0 0;
  font: 400 .72rem/1 var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--texto);
}
body[data-video-fin] .portada-nota strong {
  font: 300 1.5rem/1 var(--sans);
  letter-spacing: .06em;
  color: var(--laton-claro);
}
body[data-video-fin] .portada-nota { text-shadow: 0 1px 14px rgba(10, 17, 12, .8); }
body[data-video-fin] .portada-nota .estrellas { letter-spacing: .1em; color: var(--laton); }

body[data-video-fin] .video-sonido { display: none; }
body[data-video-fin] .video-rever { display: inline-block; }
.video-rever { display: none; }

/* El texto, abajo, sin pisar el logotipo. */
body[data-video-fin] .portada-lado { align-items: end; }
body[data-video-fin] .portada-bajada { margin-top: 0; }

/* La nota de Google, solo en esta pantalla: es el mejor argumento que tiene. */
.portada-nota { display: none; }
body[data-video-fin] .portada-nota {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  margin: 22px 0 0;
  font: 400 .72rem/1 var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--suave);
}
body[data-video-fin] .portada-nota strong {
  font: 300 1.5rem/1 var(--sans);
  letter-spacing: .06em;
  color: var(--laton-claro);
}
body[data-video-fin] .portada-nota .estrellas { letter-spacing: .1em; color: var(--laton); }

.video-sonido {
  position: absolute;
  z-index: 2;
  left: clamp(20px, 4vw, 48px);
  bottom: 34px;
  padding: 12px 20px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 0;
  background: rgba(10, 17, 12, .5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--texto);
  font: 400 .7rem/1 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s, border-color .25s;
}
.video-sonido:hover { background: rgba(10, 17, 12, .8); border-color: var(--laton); }

.bajar {
  position: absolute;
  left: 50%;
  bottom: 34px;
  width: 1px;
  height: 64px;
  translate: -50% 0;
  background: var(--linea);
  overflow: hidden;
}
.bajar span {
  position: absolute;
  left: 0;
  top: -40%;
  width: 1px;
  height: 40%;
  background: var(--laton);
  animation: gota 2.4s var(--curva) infinite;
}
@keyframes gota { to { top: 100%; } }

/* 2 y 6 · Pantallas partidas: texto en oscuro, foto a sangre. */
.dividida { display: grid; grid-template-columns: 1fr 1fr; background: var(--fondo); }
.dividida-inversa .lado-foto { order: -1; }
.lado-texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 130px clamp(28px, 6vw, 110px) 90px;
  background: var(--fondo-2);
}
.lado-texto h2 { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.1; margin-bottom: 26px; }
.texto-largo p { margin: 0 0 16px; color: var(--suave); max-width: 52ch; }
.texto-corto { margin: 0 0 28px; color: var(--suave); max-width: 46ch; }
.lado-texto > .boton { margin-top: 26px; }
.rasgos { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 18px 0 0; padding: 0; list-style: none; }
.rasgos li {
  font: 400 .68rem/1.4 var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--texto);
}
.rasgos li::before { content: "— "; color: var(--laton); }

.lado-foto { position: relative; overflow: hidden; min-height: var(--alto); cursor: zoom-in; }
.lado-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--curva);
}
.lado-foto:hover img { transform: scale(1.04); }
/* El marco de latón desplazado, por dentro de la foto. */
.lado-foto::after {
  content: "";
  position: absolute;
  inset: 28px 28px 28px 28px;
  border: 1px solid color-mix(in srgb, var(--laton) 55%, transparent);
  translate: 12px 12px;
  pointer-events: none;
}
.sello {
  position: absolute;
  left: 40px;
  bottom: 36px;
  font: italic 400 5.5rem/1 var(--serif);
  color: color-mix(in srgb, var(--texto) 80%, transparent);
  text-shadow: 0 6px 30px rgba(0, 0, 0, .5);
}

.ficha {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px 28px;
  margin: 0 0 8px;
  padding: 24px 0;
  border-block: 1px solid var(--linea);
  font-size: .9rem;
}
.ficha dt {
  font: 400 .64rem/2.2 var(--sans);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--laton);
}
.ficha dd { margin: 0; color: var(--suave); }
.ficha a { text-decoration: none; color: var(--texto); }

/* 3 · Especialidades de lado. El JS le da altura (una pantalla por plato) y
   mueve la tira; sin JS, o en el móvil, van una debajo de otra. */
.lateral { position: relative; background: var(--fondo); }
.lateral-fijo { position: relative; }
.lateral-cabeza { padding: 110px 24px 40px; text-align: center; }
.lateral-cabeza h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
.lateral-tira { display: grid; }
.lateral-barra { display: none; }

.plato { display: grid; grid-template-columns: 1fr 1fr; min-height: 80svh; }
.plato:nth-child(even) .plato-foto { order: 2; }
.plato-foto { position: relative; overflow: hidden; cursor: zoom-in; }
.plato-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--curva);
}
.plato-foto:hover img { transform: scale(1.05); }
.plato-texto {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px clamp(28px, 6vw, 110px);
  background: var(--fondo-2);
}
.plato-num {
  font: 200 clamp(4.5rem, 9vw, 8rem)/1 var(--sans);
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--laton) 70%, transparent);
  margin-bottom: 18px;
}
.plato h3 { font-size: clamp(2rem, 3.2vw, 2.8rem); line-height: 1.1; margin-bottom: 18px; }
.plato-desc { margin: 0; color: var(--suave); max-width: 44ch; }

.efx-lateral .lateral-fijo {
  position: sticky;
  top: 0;
  height: var(--alto);
  overflow: hidden;
}
.efx-lateral .lateral-cabeza {
  position: absolute;
  z-index: 2;
  top: 96px;
  left: 50%;
  width: 50%;
  padding: 0 clamp(28px, 6vw, 110px);
  text-align: left;
  pointer-events: none;
}
.efx-lateral .lateral-cabeza h2 { font-size: 1.05rem; font-family: var(--sans); font-weight: 300; letter-spacing: .08em; color: var(--suave); }
.efx-lateral .lateral-tira {
  display: flex;
  height: 100%;
  will-change: transform;
  transition: transform .9s var(--curva);
}
.efx-lateral .plato { flex: 0 0 100vw; min-height: 0; height: 100%; }
.efx-lateral .plato:nth-child(even) .plato-foto { order: 0; }
.efx-lateral .lateral-barra {
  display: block;
  position: absolute;
  left: 50%;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--linea);
}
.efx-lateral .lateral-barra span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--laton);
  transition: width .9s var(--curva);
}
.lateral-paso { position: absolute; left: 0; width: 1px; height: 1px; }

/* 4 · La frase sobre la foto entera, con comillas gigantes. */
.frase { display: grid; place-items: center; overflow: hidden; text-align: center; }
.frase-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.velo { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(10, 17, 12, .55), rgba(10, 17, 12, .88)); }
.frase-dentro { position: relative; z-index: 1; width: min(900px, calc(100% - 48px)); padding: 120px 0 140px; }
.comillas {
  display: block;
  height: 90px;
  font: italic 400 11rem/1 var(--serif);
  color: var(--laton);
  opacity: .8;
}
.frase-dentro p:not(.frase-firma) {
  margin: 0;
  font: italic 400 clamp(1.9rem, 3.6vw, 3.1rem)/1.25 var(--serif);
}
.frase-firma {
  margin: 34px 0 0;
  font: 400 .66rem/1 var(--sans);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--laton);
}

/* La cinta, discreta, al pie de la frase. */
.cinta {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  padding: 16px 0;
  border-top: 1px solid var(--linea);
  background-color: rgba(10, 17, 12, .6);
  background-image: var(--motivo-patron, none);
  background-size: var(--motivo-tam, auto);
}
.cinta-tira { display: flex; gap: 46px; width: max-content; animation: desfile 46s linear infinite; }
.cinta-tira span {
  display: inline-flex;
  align-items: center;
  gap: 46px;
  font: 400 .68rem/1 var(--sans);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--texto);
  white-space: nowrap;
}
.cinta-tira span::after { content: var(--motivo-glifo, "·"); color: var(--laton); letter-spacing: 0; }
@keyframes desfile { to { transform: translateX(-50%); } }

/* --- cifras -------------------------------------------------------------------- */

.cifras { padding: 90px 0; background: var(--fondo-2); border-block: 1px solid var(--linea); }
.cifras-marco { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px 90px; text-align: center; }
.cifras strong { display: block; font: 200 3.4rem/1 var(--sans); color: var(--laton-claro); }
.cifras span { font: 400 .66rem/2.4 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--suave); }

/* --- carta: hoja de menú en oscuro ----------------------------------------------- */

.carta { padding: 140px 0 130px; background: var(--fondo); }
.carta-hoja {
  position: relative;
  padding: clamp(50px, 7vw, 90px) clamp(22px, 6vw, 84px) clamp(40px, 6vw, 70px);
  background: var(--fondo-2);
  outline: 1px solid color-mix(in srgb, var(--laton) 55%, transparent);
  outline-offset: -16px;
}
.carta-hoja::before {
  content: "";
  position: absolute;
  inset: 24px;
  border: 1px solid var(--linea);
  pointer-events: none;
}
.carta-indice { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; margin-bottom: 62px; }
.carta-indice a {
  padding: 10px 18px;
  border: 1px solid var(--linea);
  font: 400 .64rem/1 var(--sans);
  letter-spacing: .24em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--suave);
  transition: border-color .3s, color .3s;
}
.carta-indice a:hover { border-color: var(--laton); color: var(--laton-claro); }
.carta-rejilla { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 64px 84px; align-items: start; }
.carta-bloque { position: relative; scroll-margin-top: 110px; }
.carta-bloque.destacada { grid-column: 1 / -1; }
.carta-bloque.destacada ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 72px; }
.carta-num {
  position: absolute;
  right: 0;
  top: -18px;
  font: 200 3.4rem/1 var(--sans);
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--laton) 70%, transparent);
  pointer-events: none;
}
.carta-bloque h3 {
  padding: 0 80px 16px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--laton) 55%, transparent);
  font-size: clamp(1.8rem, 2.6vw, 2.3rem);
  font-style: italic;
}
.carta-bloque.destacada h3 { color: var(--laton-claro); }
.carta-lema { margin: 12px 0 0; font: italic 400 1.1rem/1.4 var(--serif); color: var(--suave); }
.carta-bloque ul { list-style: none; margin: 22px 0 0; padding: 0; }
.carta-bloque li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 4px 12px;
  padding: 15px 0;
  border-bottom: 1px solid var(--linea);
  transition: transform .4s var(--curva);
}
.carta-bloque li:hover { transform: translateX(6px); }
.carta-plato { grid-column: 1; font: 400 .95rem/1.4 var(--sans); letter-spacing: .02em; }
.carta-puntos { grid-column: 2; min-width: 24px; border-bottom: 1px dotted var(--linea); transform: translateY(-5px); }
.carta-precio { grid-column: 3; font: 400 1.2rem/1 var(--serif); color: var(--laton-claro); }
.carta-desc { grid-column: 1 / -1; font-size: .82rem; color: var(--tenue); }
.carta-pie { position: relative; margin: 54px 0 0; text-align: center; font: italic 400 1.05rem/1.4 var(--serif); color: var(--tenue); }

/* --- opiniones y grupos ------------------------------------------------------------ */

.opiniones, .grupos { padding: 130px 0; background: var(--fondo-2); }
.valoracion { display: grid; justify-items: center; gap: 6px; margin: -20px 0 56px; text-align: center; }
.valoracion strong { font: 200 3.8rem/1 var(--sans); color: var(--laton-claro); }
.estrellas { letter-spacing: .3em; color: var(--laton); }
.valoracion span:last-child { font: 400 .64rem/2 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--suave); }
.citas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 34px; }
.citas figure { margin: 0; padding: 34px 30px; border-top: 1px solid var(--laton); background: var(--fondo-3); }
.citas blockquote { margin: 0; font: italic 400 1.3rem/1.45 var(--serif); }
.aviso-textos { margin: 34px 0 0; text-align: center; font-size: .72rem; color: var(--tenue); }
.grupos-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 30px; }
.grupos-rejilla article { padding: 34px 30px; border: 1px solid var(--linea); }
.grupos-rejilla h3 { font-size: 1.6rem; margin-bottom: 10px; }
.grupos-rejilla p { margin: 0; color: var(--suave); }

/* --- preguntas frecuentes ----------------------------------------------------------

   Acordeón fino, sin cajas, en la línea de la hoja de menú: la pregunta a la
   vista y la respuesta a un clic. El texto está en el HTML aunque el bloque
   esté cerrado —es lo que leen Google y las IA—; cerrarlo solo ahorra pantalla.
   Fondo `--fondo` para que alterne con las opiniones, que van en `--fondo-2`. */

.preguntas { padding: 130px 0; background: var(--fondo); }
.preguntas-lista { border-top: 1px solid var(--linea); }
.pregunta { border-bottom: 1px solid var(--linea); }
.pregunta summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 2px;
  cursor: pointer;
  list-style: none;
  font: 400 1.05rem/1.45 var(--sans);
  transition: color .3s var(--curva);
}
.pregunta summary::-webkit-details-marker { display: none; }
/* El signo que gira al abrir. Va en el summary y no en un <span> para que no
   haya un elemento más que pueda robarle el clic. */
.pregunta summary::after {
  content: "+";
  flex: none;
  font: 200 1.5rem/1 var(--sans);
  color: var(--laton);
  transition: transform .35s var(--curva);
}
.pregunta summary:hover { color: var(--laton-claro); }
.pregunta[open] summary { color: var(--laton-claro); }
.pregunta[open] summary::after { transform: rotate(45deg); }
.pregunta p {
  margin: 0 0 28px;
  max-width: 68ch;
  color: var(--suave);
  font-size: .95rem;
  line-height: 1.8;
}

@media (max-width: 700px) {
  .preguntas { padding: 90px 0; }
  .pregunta summary { font-size: .98rem; padding: 22px 0; gap: 16px; }
}

/* --- pie ---------------------------------------------------------------------------- */

.pie {
  padding: 70px 0 60px;
  background-color: #060b08;
  background-image: var(--motivo-patron, none);
  background-size: var(--motivo-tam, auto);
  border-top: 1px solid var(--linea);
  text-align: center;
}
.pie-marco { display: grid; justify-items: center; gap: 4px; }
.pie-nombre { font: 300 1.2rem/1 var(--sans); letter-spacing: .42em; text-transform: uppercase; text-indent: .42em; margin-bottom: 10px; }
.pie-lema { font: italic 400 1.1rem/1.4 var(--serif); color: var(--laton-claro); }
.pie p { margin: 0; color: var(--suave); font-size: .85rem; }
.pie a { text-decoration: none; }

.barra-movil { display: none; }

/* --- móvil --------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .cabecera { padding: 14px 18px; }
  .nav { gap: 16px; }
  .nav a:not(.nav-carta):not([href="#llegar"]) { display: none; } /* una sola fila, sin «Llamar» */
  .nav .nav-tel { display: none; }
  .marca { font-size: .8rem; letter-spacing: .3em; }
  /* En un teléfono de 390px el nombre se montaba encima de «La carta» y «El
     local» (02-10-2026, lo vio él). El nombre va con `nowrap`, así que o se le
     deja sitio o se pisan: se aprieta la letra de los dos y, si aun así no cabe,
     se recorta el nombre antes que montarse. */
  .marca { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .nav { flex: 0 0 auto; }
  .puntos { display: none !important; }

  .portada { grid-template-columns: 1fr; }
  .portada-foto { min-height: 62svh; }
  .portada-foto::after { background: linear-gradient(180deg, transparent 55%, var(--fondo-2)); }
  .portada-lado { padding: 36px 24px 90px; }
  /* Los dos botones de la portada bajan a la barra fija: en el teléfono caían
     en mitad del vídeo, encima de los subtítulos. */
  .portada .acciones { display: none; }
  /* Los botones del vídeo, arriba: abajo se chocaban con «Llamar y reservar». */
  .video-sonido { top: 74px; bottom: auto; left: 14px; padding: 9px 14px; }

  .dividida { grid-template-columns: 1fr; }
  .dividida .lado-foto { order: -1; min-height: 58svh; }
  .lado-texto { padding: 56px 24px 64px; }
  .lado-foto::after { inset: 16px; translate: 8px 8px; }

  .plato { grid-template-columns: 1fr; min-height: 0; }
  .plato-foto { aspect-ratio: 4 / 5; }
  .plato:nth-child(even) .plato-foto { order: 0; }
  .plato-texto { padding: 36px 24px 56px; }
  .lateral-cabeza { padding: 80px 24px 30px; }

  /* La carta en el teléfono, como la pidió (02-10-2026): más ancha y con las
     categorías una detrás de otra. Las pestañas se apagan solas por debajo de
     900px (templates/_comun/carta-pestanas.js); aquí solo se le quita el aire
     que le sobraba a los lados. */
  .carta { padding: 70px 0 80px; }
  .carta .marco { width: calc(100% - 20px); }
  .carta-rejilla, .carta-bloque.destacada ul { grid-template-columns: 1fr; gap: 48px; }
  .carta-hoja { padding: 34px 16px 40px; outline-offset: -6px; }
  .carta-hoja::before { inset: 9px; }
  .carta-indice { margin-bottom: 36px; }
  .carta-bloque h3 { padding-right: 56px; font-size: clamp(1.5rem, 6.4vw, 2rem); }
  .carta-bloque li { padding: 13px 0; }
  .carta-plato { font-size: 1rem; }
  .frase-dentro { padding: 100px 0 120px; }

  .barra-movil {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 58px;
    z-index: 45;
    display: flex;
    gap: 10px;
  }
  .barra-movil a {
    flex: 1 1 0;
    min-width: 0;
    padding: 15px 8px;
    background: var(--laton);
    color: var(--fondo);
    text-align: center;
    text-decoration: none;
    font: 500 .74rem/1 var(--sans);
    letter-spacing: .2em;
    text-transform: uppercase;
    box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .8);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cinta-tira, .bajar span { animation: none; }
  .efx-lateral .lateral-tira, .efx-lateral .lateral-barra span { transition: none; }
}

/* --- La carta por pestañas (23-09-2026) ---------------------------------
   Solo cuando alta-cocina.js las enciende: sin JS, o en el móvil, la carta
   sigue siendo la lista entera de siempre. Ver alta-cocina.js. */
.carta-pestanas .carta-indice { margin-bottom: 52px; }
.carta-pestanas .carta-indice a { cursor: pointer; }
.carta-pestanas .carta-indice a.activo {
  border-color: var(--laton);
  color: var(--fondo);
  background: var(--laton);
}
.carta-pestanas .carta-rejilla { grid-template-columns: 1fr; }
/* La categoría abierta ocupa la hoja entera y sus platos van a dos columnas:
   con una sola, la mitad derecha se quedaba vacía. */
.carta-pestanas .carta-bloque { grid-column: 1 / -1; }
.carta-pestanas .carta-bloque ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 72px; }
.carta-pestanas .carta-bloque.activo { animation: carta-entra .5s var(--curva) both; }
.carta-pestanas .carta-num { top: -26px; font-size: 4.6rem; }
@keyframes carta-entra {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .carta-pestanas .carta-bloque.activo { animation: none; }
}
@media (max-width: 900px) {
  .carta-pestanas .carta-bloque ul { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  /* El índice, en FILAS. Se deslizó de lado un tiempo, como las pestañas de una
     app, para no comerse la pantalla. Lo vio en su iPhone el 03-10-2026 y pidió
     justo lo contrario: las categorías una debajo de otra, a la vista todas, y
     que al tocar una se abra solo esa. Así que aquí no se toca el `wrap` que
     trae de serie; lo único es apretarlas para que quepan más por fila. */
  .carta-pestanas .carta-indice a { padding: 9px 12px; font-size: .58rem; letter-spacing: .16em; }
}

/* Un teléfono de verdad es más estrecho que 900px: aquí es donde el nombre y el
   menú se peleaban por el sitio (02-10-2026). */
@media (max-width: 560px) {
  .cabecera { padding: 12px 14px; gap: 10px; }
  .marca { font-size: .66rem; letter-spacing: .16em; gap: 9px; }
  .marca-logo { width: 30px; height: 30px; }
  .nav { gap: 10px; }
  .nav a { font-size: .55rem; letter-spacing: .12em; }
  .barra-movil a { letter-spacing: .14em; font-size: .68rem; }
}