/* Piezas que se repiten entre páginas. Una sola definición por pieza:
 * si la cabecera se arregla aquí, se arregla en las siete páginas. */

/* ── Cabecera ───────────────────────────────────────────────────────────── */

/* La cabecera va CLARA por defecto. Importa: cinco de las siete paginas no
 * tienen foto a sangre detras, y sobre fondo claro un logotipo blanco no se ve.
 * Solo en las que si la tienen (`body.con-hero`) se vuelve transparente
 * mientras se esta arriba del todo. */
.cabecera {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-cabecera);
  border-bottom: 1px solid var(--linea);
  transition: border-color var(--medio);
}

/* El velo y el desenfoque van en un PSEUDOELEMENTO, no en `.cabecera`.
 *
 * `backdrop-filter` convierte al elemento que lo lleva en bloque contenedor de
 * sus descendientes `position: fixed` —igual que `transform` o `filter`—. Con
 * el desenfoque puesto en la cabecera, el panel del menú del móvil, que es hijo
 * suyo y va con `inset: 0`, se encajaba dentro de la cabecera: 76 px de alto en
 * vez de los 812 de la pantalla. Su fondo era opaco, pero solo tapaba esa
 * franja, y los enlaces caían fuera con la página viéndose detrás.
 *
 * Con el desenfoque aquí, `.cabecera` deja de ser bloque contenedor y el panel
 * vuelve a medirse contra la ventana. */
.cabecera::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--velo-cabecera);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: opacity var(--medio);
}

/* Encima de una foto a sangre y arriba del todo, sin velo. */
body.con-hero .cabecera:not(.esta-abajo) { border-bottom-color: transparent; }
body.con-hero .cabecera:not(.esta-abajo)::before { opacity: 0; }

.cabecera__caja {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
  padding-block: var(--e-4);
}

.cabecera__logo img {
  height: 44px;
  width: auto;
  /* El PNG es oscuro sobre transparente. `brightness(0)` lo deja negro puro,
   * que es lo que pide un fondo claro. */
  filter: brightness(0);
  transition: filter var(--medio);
}

/* Encima de la foto, blanco. */
body.con-hero .cabecera:not(.esta-abajo) .cabecera__logo img {
  filter: brightness(0) invert(1);
}

.nav { display: flex; align-items: center; gap: var(--e-5); }

/* El panel envuelve al boton de cerrar y a la lista. Antes el boton colgaba
   directamente del <ul>, que solo admite <li>: ademas de no ser valido, hacia
   que un lector de pantalla anunciara un elemento de lista de mas. */
.nav__panel { display: flex; align-items: center; gap: var(--e-5); }

.nav__lista {
  display: flex;
  align-items: center;
  gap: var(--e-5);
}

.nav__enlace {
  color: var(--texto-suave);
  text-decoration: none;
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  padding-block: var(--e-2);
  position: relative;
}

.nav__enlace:hover { color: var(--texto); }

body.con-hero .cabecera:not(.esta-abajo) .nav__enlace {
  color: var(--sobre-foto-suave);
  text-shadow: var(--sombra-foto);
}

body.con-hero .cabecera:not(.esta-abajo) .nav__enlace:hover,
body.con-hero .cabecera:not(.esta-abajo) .nav__enlace[aria-current="page"] {
  color: var(--sobre-foto);
}

body.con-hero .cabecera:not(.esta-abajo) .nav__abrir {
  color: var(--sobre-foto);
  border-color: rgba(255, 255, 255, 0.45);
}

.nav__enlace[aria-current="page"] {
  color: var(--texto);
}

.nav__enlace[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--acento);
}

.nav__abrir {
  display: none;
  background: none;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  padding: var(--e-2) var(--e-3);
  color: var(--texto);
}

/* ── Botones ────────────────────────────────────────────────────────────── */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  /* 44px de alto mínimo: el tamaño por debajo del cual un dedo falla. */
  min-height: 44px;
  padding: var(--e-3) var(--e-5);
  border: 1px solid transparent;
  border-radius: var(--radio);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-align: center;
  transition: background var(--rapido), border-color var(--rapido),
              color var(--rapido), transform var(--rapido);
}

.boton:active { transform: translateY(1px); }

.boton--principal {
  background: var(--acento);
  color: var(--fondo);
}

.boton--principal:hover {
  background: var(--acento-hover);
  color: var(--fondo);
}

.boton--contorno {
  border-color: var(--linea-fuerte);
  color: var(--texto);
  background: var(--fondo-alto);
}

.boton--contorno:hover {
  border-color: var(--acento);
  color: var(--acento);
}

.boton--fantasma {
  color: var(--texto-suave);
  padding-inline: var(--e-3);
}

.boton--fantasma:hover { color: var(--texto); }

.botonera {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-top: var(--e-6);
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  display: grid;
  place-items: center;
  /* `dvh` y no `vh`: en el móvil, `100vh` cuenta la barra del navegador que
   * luego se retrae, y el contenido queda cortado por abajo. */
  min-height: 100dvh;
  padding-block: var(--e-9) var(--seccion);
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: var(--z-hero);
}

/* El <picture> necesita alto propio: `height: 100%` en la imagen se mide contra
 * su padre, y un <picture> sin alto declarado es alto automatico. Sin esta
 * regla la foto del hero se queda a su altura natural y el resto es fondo. */
.hero__media picture {
  width: 100%;
  height: 100%;
}

.hero__media img,
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Un degradado, no un velo plano: la foto respira arriba y el texto se apoya
 * en la parte de abajo, que es donde va. */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--velo-hero);
}

/* El vídeo lo pone el JS y solo en móvil (ver assets/sitio.js). Sin JS queda
 * la foto, que es un hero perfectamente digno. */
.hero__video { display: none; }
.hero__media.con-video .hero__video { display: block; }
.hero__media.con-video > picture { display: none; }

.hero__contenido {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 44rem;
}

.hero__contenido { color: var(--sobre-foto); }

.hero__titulo {
  font-size: var(--t-3xl);
  font-weight: 900;
  color: var(--sobre-foto);
  text-shadow: var(--sombra-foto);
}

.hero__titulo .eu {
  display: block;
  font-family: var(--tipo-texto);
  font-size: 0.3em;
  font-weight: 300;
  font-style: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sobre-foto-suave);
  text-shadow: var(--sombra-foto);
  margin-top: var(--e-4);
}

.hero__bajada {
  font-size: var(--t-md);
  /* Blanco, no `--texto-suave`: encima de una foto no hay contraste calculable
   * y un gris a medias es justo lo que se leia mal. */
  color: var(--sobre-foto);
  text-shadow: var(--sombra-foto);
  margin-top: var(--e-5);
}

.hero .botonera { justify-content: center; }

.hero .boton--contorno {
  border-color: rgba(255, 255, 255, 0.7);
  color: var(--sobre-foto);
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.hero .boton--contorno:hover {
  border-color: var(--sobre-foto);
  background: rgba(0, 0, 0, 0.45);
  color: var(--sobre-foto);
}

/* ── Tarjetas ───────────────────────────────────────────────────────────── */

.rejilla {
  display: grid;
  gap: var(--e-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.tarjeta {
  background: var(--fondo-alto);
  border: 1px solid var(--linea);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-tarjeta);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tarjeta__foto {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.tarjeta__cuerpo { padding: var(--e-5); }

.tarjeta__titulo { font-size: var(--t-lg); margin-bottom: var(--e-2); }

.tarjeta__texto { color: var(--texto-suave); font-size: var(--t-sm); }

/* ── Carta ──────────────────────────────────────────────────────────────── */

.carta__bloque + .carta__bloque { margin-top: var(--e-8); }

/* Aire tambien antes de la primera: con `+` solo lo tenian de la segunda en
 * adelante, y el primer epigrafe se pegaba a la entradilla. */
.carta__seccion { margin-top: var(--e-7); }

.carta__seccion-titulo {
  font-size: var(--t-lg);
  color: var(--brasa);
  padding-bottom: var(--e-2);
  border-bottom: 1px solid var(--linea);
  margin-bottom: var(--e-4);
}

.plato {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--e-2) var(--e-4);
  align-items: baseline;
  padding-block: var(--e-3);
}

.plato + .plato { border-top: 1px solid var(--linea); }

.plato__nombre { font-weight: 500; }

.plato__precio {
  font-variant-numeric: tabular-nums;
  color: var(--brasa);
  font-weight: 600;
  white-space: nowrap;
}

.plato__descripcion {
  grid-column: 1 / -1;
  font-size: var(--t-sm);
  color: var(--texto-tenue);
  margin-top: calc(var(--e-1) * -1);
}

/* El menú cerrado: destacado, con su precio grande. Es el producto que se
 * quiere vender, no una línea más de la lista. */
/* ── El menú de la casa ────────────────────────────────────────────────────
 *
 * Era una tarjeta blanca con esquinas redondeadas y un filete azul: el aspecto
 * por defecto de cualquier cosa. Ahora es una pieza partida —foto a un lado,
 * menú al otro—, con las esquinas rectas, los platos separados por filetes en
 * vez de metidos en cajas, la numeración en monoespaciada y el precio en serif
 * grande. La foto lleva su pie, también en mono.
 *
 * Es el registro de una carta impresa, no el de una aplicación. */
.menu-firma {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--fondo-alto);
  border: 1px solid var(--linea);
  border-radius: 2px;              /* casi recto: el logotipo es anguloso */
  overflow: hidden;
}

@media (min-width: 860px) {
  .menu-firma { grid-template-columns: 0.82fr 1fr; }
}

/* ── La foto ── */
.menu-firma__foto {
  position: relative;
  margin: 0;
  min-height: 17rem;
  background: var(--texto);
}

.menu-firma__foto picture,
.menu-firma__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Un punto menos de saturación y algo más de contraste: las fotos son muy
 * cálidas y así se apoyan en la página en vez de gritar. */
.menu-firma__foto img { filter: saturate(0.92) contrast(1.04); }

.menu-firma__foto figcaption {
  position: absolute;
  /* Por encima del degradado: `::after` es contenido generado y se pinta
     DESPUÉS de los hijos del elemento, así que sin esto el velo tapa el pie. */
  z-index: 1;
  left: var(--e-4);
  right: var(--e-4);
  bottom: var(--e-4);
  font-family: var(--tipo-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sobre-foto);
  text-shadow: var(--sombra-foto);
}

.menu-firma__foto::after {
  content: '';
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(to bottom, transparent, rgba(6, 14, 22, 0.75));
  pointer-events: none;
}

/* ── El contenido ── */
.menu-firma__cuerpo { padding: clamp(1.75rem, 3vw, 3rem); }

.menu-firma__cuerpo h2 { margin-bottom: var(--e-3); }

/* ── Los platos, como pasos de un menú cerrado ── */
.pasos {
  margin-top: var(--e-6);
  border-top: 1px solid var(--linea);
}

.pasos li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--e-4);
  padding-block: var(--e-4);
  border-bottom: 1px solid var(--linea);
}

.pasos__n {
  font-family: var(--tipo-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  color: var(--acento);
  padding-top: 0.28em;
}

.pasos__plato {
  display: block;
  font-weight: 600;
  margin-bottom: 0.15em;
}

.pasos__nota {
  font-size: var(--t-sm);
  color: var(--texto-tenue);
}

/* ── El precio ── */
.menu-firma__precio {
  display: flex;
  align-items: baseline;
  gap: var(--e-3);
  flex-wrap: wrap;
  margin-top: var(--e-6);
}

.menu-firma__cifra {
  font-family: var(--tipo-titulo);
  font-size: clamp(2.6rem, 1.8rem + 3vw, 4rem);
  font-weight: 700;
  line-height: 0.9;
  color: var(--texto);
}

.menu-firma__cifra span {
  font-size: 0.5em;
  color: var(--acento);
  margin-left: 0.1em;
}

.menu-firma__unidad {
  font-family: var(--tipo-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.menu-firma .botonera { margin-top: var(--e-6); }

/* ── Cinta de datos ─────────────────────────────────────────────────────── */

.cinta {
  display: grid;
  gap: var(--e-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.cinta__dato-titulo {
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin-bottom: var(--e-2);
}

/* ── Galería ────────────────────────────────────────────────────────────── */

.galeria {
  display: grid;
  gap: var(--e-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.galeria picture { display: block; }

.galeria img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radio);
}

/* Una galería de tres, con la vertical ocupando dos filas. En `auto-fit` con
   tres elementos sobraban columnas y quedaba un hueco raro a la derecha. */
/* Galería de tres: una BANDA de altura fija, y las tres fotos recortando para
 * llenarla.
 *
 * Antes la foto vertical ocupaba dos filas de la rejilla y las otras dos solo
 * una, así que sobraba media fila y la vertical se descolgaba por debajo: tres
 * fotos de tres alturas distintas, sin línea común ni arriba ni abajo.
 *
 * Con una altura de banda y `object-fit: cover`, las tres comparten borde
 * superior e inferior y la vertical aporta su proporción sin romper la fila.
 * La columna estrecha es para ella: recorta poco de lo que importa. */
.galeria--tres { grid-template-columns: 1fr; }

@media (min-width: 800px) {
  .galeria--tres {
    grid-template-columns: 1.25fr 1.25fr 0.8fr;
    height: clamp(21rem, 44vw, 33rem);
  }

  .galeria--tres > *,
  .galeria--tres picture,
  .galeria--tres img {
    height: 100%;
  }

  .galeria--tres img {
    aspect-ratio: auto;
    object-fit: cover;
  }
}

/* En móvil la vertical se queda vertical: apiladas, cada una con su forma. */
@media (max-width: 799px) {
  .galeria--tres .galeria__alta img { aspect-ratio: 3 / 4; }
}

/* ── Reserva ────────────────────────────────────────────────────────────── */

.reserva__caja {
  background: var(--fondo-alto);
  border: 1px solid var(--linea);
  box-shadow: var(--sombra-tarjeta);
  border-radius: var(--radio-grande);
  padding: var(--e-4);
}

/* El widget se inyecta en un iframe y tarda unos segundos: hay que reservarle
 * sitio para que la pagina no salte cuando aparece. Pero reservar 880 px fijos
 * era peor que el salto: en un movil de 812 px de alto, quien entra ve un
 * rectangulo vacio y nada mas. Se reserva por proporcion y con un tope. */
.reserva__caja > div {
  min-height: min(55rem, 78vh);
}

@media (min-width: 700px) {
  .reserva__caja > div { min-height: 55rem; }
}

.aviso {
  border-left: 3px solid var(--brasa);
  padding: var(--e-3) var(--e-4);
  background: rgba(138, 75, 0, 0.07);
  color: var(--texto-suave);
  font-size: var(--t-sm);
  border-radius: 0 var(--radio) var(--radio) 0;
}

/* ── Pie ────────────────────────────────────────────────────────────────── */

/* El pie en el azul de la marca: en una pagina clara es donde el color oficial
 * tiene sitio para pesar sin pelearse con las fotos. */
.pie {
  background: var(--acento);
  color: var(--sobre-foto-suave);
  padding-block: var(--seccion) var(--e-6);
  font-size: var(--t-sm);
}

.pie__titulo { color: rgba(255, 255, 255, 0.72); }
.pie a { color: var(--sobre-foto); }
.pie a:hover { color: var(--sobre-foto); text-decoration: underline; }
.pie .pie__legal { border-top-color: rgba(255, 255, 255, 0.22); color: rgba(255, 255, 255, 0.72); }
.pie .redes a { border-color: rgba(255, 255, 255, 0.3); color: var(--sobre-foto-suave); }
.pie .redes a:hover { border-color: var(--sobre-foto); color: var(--sobre-foto); }

.pie__rejilla {
  display: grid;
  gap: var(--e-7);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.pie__titulo {
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: var(--e-3);
}

.pie a { text-decoration: none; }

.pie__legal {
  margin-top: var(--e-7);
  padding-top: var(--e-5);
  border-top: 1px solid var(--linea);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-5);
  justify-content: space-between;
  font-size: var(--t-xs);
}

.redes { display: flex; gap: var(--e-3); }

.redes a {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  color: var(--texto-suave);
  transition: border-color var(--rapido), color var(--rapido);
}

.redes a:hover { border-color: var(--acento); color: var(--acento); }
.redes svg { width: 20px; height: 20px; }

/* ── Móvil ──────────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .nav__abrir { display: block; }

  .nav__panel {
    position: fixed;
    inset: 0;
    z-index: var(--z-menu);
    flex-direction: column;
    justify-content: center;
    background: var(--fondo-alto);
    /* Sin JS el menú no se abre, así que la navegación completa va también en
     * el pie: nadie se queda sin poder moverse. */
    transform: translateX(100%);
    transition: transform var(--medio);
  }

  .nav__panel.esta-abierto { transform: translateX(0); }

  .nav__lista {
    flex-direction: column;
    gap: var(--e-6);
    font-size: var(--t-lg);
  }

  /* Los enlaces del menu se quedaban en 41 px de alto: por debajo de los 44
     que hacen falta para que un dedo acierte sin pensarlo. */
  .nav__enlace {
    display: block;
    padding-block: var(--e-3);
  }

  /* El CTA tambien dentro del panel, y con tamano de dedo. */
  .nav__reservar {
    margin-top: var(--e-7);
    padding-inline: var(--e-7);
    font-size: var(--t-base);
  }

  .nav__enlace { font-size: var(--t-lg); }

  .nav__cerrar {
    position: absolute;
    top: var(--e-5); right: var(--gutter);
    min-height: 44px;   /* se quedaba en 43,99 por el redondeo del interlineado */
    background: none;
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--radio);
    padding: var(--e-2) var(--e-4);
    color: var(--texto);
  }

  .cabecera__logo img { height: 36px; }
}

@media (min-width: 861px) {
  .nav__cerrar { display: none; }
}

/* Texto secundario DENTRO del pie azul.
 *
 * Antes iba con `--texto-tenue` en un estilo en línea, que está calculado para
 * fondo claro: sobre el azul de marca se quedaba en un gris apagado, que es
 * justo la pega que levantó Javier. Un token de texto lleva dentro una suposición
 * sobre su fondo; si el fondo cambia, el token también. */
.pie__tenue { color: rgba(255, 255, 255, 0.68); }


/* ── Vídeo suelto dentro de una sección ────────────────────────────────────
 *
 * Los vídeos del reportaje son verticales (1080x1920). En el hero a sangre eso
 * obliga a recortar o a poner bandas, y por eso allí solo entran en móvil. Pero
 * en un hueco vertical dentro de una sección caben tal cual, también en
 * escritorio: el formato deja de ser un problema y pasa a ser la forma de la
 * pieza.
 *
 * No se descargan hasta que el visitante llega a ellos (`preload="none"` y la
 * dirección en `data-src`, ver assets/sitio.js). Hasta entonces se ve el
 * póster, que pesa unos 30 KB frente a los 700 del vídeo. Así se pueden
 * repartir por el sitio sin que la portada cargue megas que nadie ve. */
.video-pieza {
  position: relative;
  margin: 0;
  border-radius: 2px;
  overflow: hidden;
  background: var(--texto);
}

.video-pieza__v {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
}

.video-pieza figcaption {
  position: absolute;
  z-index: 1;                 /* por encima del velo, como en el menú */
  left: var(--e-4);
  right: var(--e-4);
  bottom: var(--e-4);
  font-family: var(--tipo-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sobre-foto);
  text-shadow: var(--sombra-foto);
}

.video-pieza::after {
  content: '';
  position: absolute;
  inset: 55% 0 0;
  background: linear-gradient(to bottom, transparent, rgba(6, 14, 22, 0.72));
  pointer-events: none;
}

/* ── Pieza de vídeo junto a texto ── */
.con-video-al-lado {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 860px) {
  .con-video-al-lado { grid-template-columns: 1fr 22rem; }
  .con-video-al-lado--izquierda { grid-template-columns: 22rem 1fr; }
}