/* ============================================================
   La Jorgería — sistema visual
   Tinta, papel y grabado. Una sola acentuación: el naranja
   de los precios de la carta impresa.
   ============================================================ */

@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../assets/fonts/source-sans-3-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../assets/fonts/source-sans-3-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../assets/fonts/source-sans-3-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --tinta: #202020;
  --papel: #F7F4EE;
  --ink: #1A1A1A;
  /* Naranja de la carta impresa: #E66F28. Sobre papel no llega a 4,5:1, asi que
     el texto en papel usa la version oscurecida y los fondos tinta la original. */
  --precio: #C2410C;
  --precio-tinta: #E66F28;
  --tinta-suave: #5C564E;
  --papel-suave: #B8B2A6;
  --linea: color-mix(in srgb, var(--tinta) 16%, transparent);
  --linea-fuerte: color-mix(in srgb, var(--tinta) 55%, transparent);
  --linea-clara: color-mix(in srgb, var(--papel) 20%, transparent);
  --espacio-xs: 0.5rem;
  --espacio-s: 0.75rem;
  --espacio-m: 1rem;
  --espacio-l: 1.5rem;
  --espacio-xl: 2.5rem;
  --espacio-2xl: 4.25rem;
  --espacio-3xl: 7rem;
  --tipo-xs: clamp(0.7rem, 0.66rem + 0.18vw, 0.78rem);
  --tipo-s: clamp(0.8125rem, 0.76rem + 0.22vw, 0.9375rem);
  --tipo-cuerpo: clamp(1rem, 0.95rem + 0.22vw, 1.125rem);
  --tipo-m: clamp(1.125rem, 1rem + 0.5vw, 1.4rem);
  --tipo-l: clamp(1.45rem, 1.05rem + 1.5vw, 2.15rem);
  --tipo-display: clamp(2.6rem, 1.15rem + 6.2vw, 6.4rem);
  --tipo-capitulo: clamp(2.5rem, 0.5rem + 8vw, 7.6rem);
  --tipo-gigante: clamp(5.5rem, 3rem + 16vw, 15rem);
  --gutter: clamp(1.15rem, 4vw, 3.25rem);
  --medida: min(76rem, calc(100% - 2 * var(--gutter)));
  --medida-estrecha: min(42rem, calc(100% - 2 * var(--gutter)));
  --cabecera-h: 6rem;
  --sans: "Source Sans 3", "Segoe UI", sans-serif;
  --serif: "Fraunces", "Palatino Linotype", Palatino, serif;
  --curva: cubic-bezier(0.22, 1, 0.36, 1);
  --duracion: 220ms;
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--sans);
  font-size: var(--tipo-cuerpo);
  line-height: 1.55;
  color: var(--ink);
  background-color: var(--papel);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Grano de papel sobre todo el sitio */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  background-image: var(--grano);
  background-size: 260px 260px;
  opacity: 0.05;
  mix-blend-mode: overlay;
}

body.con-barra-movil {
  padding-bottom: calc(4.35rem + env(safe-area-inset-bottom));
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

h1,
h2,
h3,
p,
ul,
dl,
figure,
blockquote {
  margin: 0;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

html.menu-abierto,
html.menu-abierto body {
  overflow: hidden;
}

::selection {
  background: var(--precio);
  color: var(--papel);
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--precio);
  outline-offset: 3px;
}

.saltar {
  position: absolute;
  left: var(--gutter);
  top: 0;
  z-index: 120;
  transform: translateY(-120%);
  padding: 0.55rem 0.85rem;
  background: var(--papel);
  color: var(--ink);
}

.saltar:focus {
  transform: translateY(0.6rem);
}

.envoltorio {
  width: var(--medida);
  margin-inline: auto;
}

.envoltorio--estrecho {
  width: var(--medida-estrecha);
  margin-inline: auto;
}

.kicker {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: var(--tipo-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--tinta-suave);
  margin-bottom: var(--espacio-l);
}

.kicker::before {
  content: "";
  width: 2.4rem;
  height: 1px;
  background: var(--precio);
  flex: 0 0 auto;
}

/* ---------- Cabecera ---------- */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-m);
  min-height: var(--cabecera-h);
  padding: 0.85rem var(--gutter);
  background: var(--papel);
  transition: padding var(--duracion) var(--curva), background-color var(--duracion) var(--curva), border-color var(--duracion) var(--curva), min-height var(--duracion) var(--curva), color var(--duracion) var(--curva);
}

.cabecera.es-compacta {
  padding-block: 0.4rem;
  min-height: 4.6rem;
  border-bottom: 1px solid var(--linea);
  background: color-mix(in srgb, var(--papel) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.pagina-inicio .cabecera {
  position: fixed;
  inset-inline: 0;
  background: transparent;
  color: var(--papel);
}

.pagina-inicio .cabecera.es-compacta {
  background: color-mix(in srgb, var(--papel) 92%, transparent);
  color: var(--ink);
}

.marca {
  display: block;
  flex: 0 0 auto;
  line-height: 0;
  color: inherit;
}

/* El wordmark es un WebP monocromo con alfa: usado como mascara se pinta con
   currentColor, asi que hereda el color de la cabecera y transiciona con ella
   en vez de saltar de blanco a negro. */
.marca-figura {
  display: block;
  width: 3.2rem;
  aspect-ratio: 576 / 644;
  background-color: currentColor;
  -webkit-mask: url("../assets/img/wordmark-papel.webp") no-repeat center / contain;
  mask: url("../assets/img/wordmark-papel.webp") no-repeat center / contain;
  transition: width var(--duracion) var(--curva), opacity 0.25s var(--curva);
}

.cabecera.es-compacta .marca-figura {
  width: 2.7rem;
}

.vo {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.menu-boton {
  position: relative;
  z-index: 100;
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.menu-boton img {
  width: 1.45rem;
  height: 1.45rem;
}

.menu-boton .icono-cerrar,
.menu-boton[aria-expanded="true"] .icono-menu {
  display: none;
}

.menu-boton[aria-expanded="true"] .icono-cerrar {
  display: block;
}

.pagina-inicio .cabecera:not(.es-compacta) .menu-boton:not([aria-expanded="true"]) img {
  filter: invert(1);
}

.nav-principal {
  display: flex;
  align-items: center;
  gap: var(--espacio-l);
}

.nav-lista {
  display: flex;
  gap: 1.35rem;
  list-style: none;
  padding: 0;
}

.nav-lista a {
  position: relative;
  display: inline-block;
  padding-block: 0.3rem;
  text-decoration: none;
  font-size: var(--tipo-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}

.nav-lista a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--curva);
}

.nav-lista a:hover::after {
  transform: scaleX(1);
}

.nav-lista a[aria-current="page"] {
  color: var(--precio);
}

.nav-lista a[aria-current="page"]::after {
  transform: scaleX(1);
  background: var(--precio);
}

.pagina-inicio .cabecera:not(.es-compacta) .nav-lista a[aria-current="page"] {
  color: var(--papel);
}

.pagina-inicio .cabecera:not(.es-compacta) .nav-lista a[aria-current="page"]::after {
  background: var(--papel);
}

.nav-pie {
  display: none;
}

/* ---------- Botones ---------- */

.cta-reservar,
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.6rem 1.35rem;
  border: 1px solid currentColor;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--tipo-xs);
  font-weight: 700;
  transition: transform var(--duracion) var(--curva), background-color var(--duracion) var(--curva), color var(--duracion) var(--curva), border-color var(--duracion) var(--curva);
}

.cta-reservar:hover,
.btn:hover {
  transform: translateY(-2px);
}

.cta-reservar:active,
.btn:active {
  transform: translateY(0);
}

.btn--lleno {
  background: var(--tinta);
  color: var(--papel);
  border-color: var(--tinta);
}

.btn--lleno:hover {
  background: var(--precio);
  border-color: var(--precio);
}

/* ---------- Grabado: ley de colocacion ----------
   Medido sobre los WebP: las seis figuras estan cortadas por ABAJO en el PDF
   original (pez, pulpo y la carne, solo por abajo). De ahi la regla: el borde
   inferior de la imagen se pega SIEMPRE al borde inferior de su contenedor, para
   que el corte coincida con un borde de la composicion y se lea como sangrado.
   Cuando un segundo borde cortado cae dentro del marco, se desvanece con mascara
   en lugar de dejar el tajo a la vista.
   ------------------------------------------------------------- */

.hero-langosta,
.portal-ilustra,
.pliego-ilustra,
.decor {
  position: absolute;
  bottom: 0;
  pointer-events: none;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 var(--fundido, 30%), #000 100%),
    linear-gradient(to right, transparent 0, #000 var(--fundido-lado, 0%), #000 100%),
    linear-gradient(to top, transparent 0, #000 var(--fundido-abajo, 0%), #000 100%);
  mask-image:
    linear-gradient(to bottom, transparent 0, #000 var(--fundido, 30%), #000 100%),
    linear-gradient(to right, transparent 0, #000 var(--fundido-lado, 0%), #000 100%),
    linear-gradient(to top, transparent 0, #000 var(--fundido-abajo, 0%), #000 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--tinta);
  color: var(--papel);
  overflow: hidden;
  display: flex;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(120% 90% at 85% 100%, transparent 40%, color-mix(in srgb, var(--tinta) 55%, transparent) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--tinta) 35%, transparent), transparent 30%, transparent 62%, color-mix(in srgb, var(--tinta) 68%, transparent));
  pointer-events: none;
}

.hero-cuerpo {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: var(--medida);
  margin-inline: auto;
  padding: calc(var(--cabecera-h) + var(--espacio-l)) 0 clamp(5rem, 12vh, 8rem);
}

.hero-marca {
  position: relative;
  z-index: 3;
  width: clamp(8.5rem, 16vw, 12rem);
  line-height: 0;
  transform-origin: 0 0;
  will-change: transform;
  animation: hero-aparece 1.1s var(--curva) 0.05s backwards;
}

.hero-marca img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-texto {
  position: relative;
  z-index: 2;
  margin-top: auto;
  max-width: 40rem;
}

.hero-kicker {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: var(--tipo-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--papel-suave);
  margin-bottom: var(--espacio-l);
  animation: hero-aparece 0.9s var(--curva) 0.35s backwards;
}

.hero-kicker::before {
  content: "";
  width: 2.4rem;
  height: 1px;
  background: var(--precio-tinta);
}

.hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--tipo-display);
  line-height: 0.96;
  letter-spacing: -0.025em;
}

.hero h1 .linea {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

.hero h1 .linea > span {
  display: block;
  transform: translateY(112%);
  animation: hero-sube 1s var(--curva) forwards;
  animation-delay: calc(0.45s + var(--i, 0) * 0.13s);
}

.hero-cita {
  margin-top: var(--espacio-l);
  font-size: var(--tipo-m);
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.35;
  max-width: 30ch;
  color: color-mix(in srgb, var(--papel) 84%, var(--tinta));
  animation: hero-aparece 0.9s var(--curva) 0.95s backwards;
}

.hero-meta {
  margin-top: var(--espacio-m);
  color: var(--papel-suave);
  font-size: var(--tipo-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  animation: hero-aparece 0.9s var(--curva) 1.1s backwards;
}

.hero-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: var(--espacio-xl);
  animation: hero-aparece 0.9s var(--curva) 1.25s backwards;
}

.hero-acciones .btn {
  color: var(--papel);
  border-color: var(--linea-clara);
}

.hero-acciones .btn:hover {
  border-color: var(--papel);
}

.hero-acciones .btn--lleno {
  background: var(--papel);
  color: var(--tinta);
  border-color: var(--papel);
}

.hero-acciones .btn--lleno:hover {
  background: var(--precio);
  border-color: var(--precio);
  color: var(--papel);
}

.hero-langosta {
  z-index: 0;
  right: -6%;
  width: min(80vw, 19rem);
  /* La langosta esta cortada por los cuatro lados y su masa vive en el 40%
     izquierdo del lienzo. Espejada, ese corte pasa al lado derecho y sangra
     por el borde de la pantalla; el corte de arriba lo come la mascara. */
  --fundido: 14%;
  opacity: 0.9;
  clip-path: inset(100% 0 0 0);
  transform: scaleX(-1) translateY(3%);
  animation: hero-emerge 1.6s var(--curva) 0.15s forwards;
}

.hero-baja {
  position: absolute;
  z-index: 3;
  right: var(--gutter);
  bottom: var(--espacio-l);
  display: none;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--tipo-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--papel-suave);
  writing-mode: vertical-rl;
  animation: hero-aparece 0.9s var(--curva) 1.5s backwards;
}

.hero-baja::after {
  content: "";
  width: 1px;
  height: 3rem;
  background: var(--linea-clara);
}

@keyframes hero-sube {
  to {
    transform: translateY(0);
  }
}

@keyframes hero-aparece {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes hero-emerge {
  to {
    clip-path: inset(0 0 0 0);
    transform: scaleX(-1);
  }
}

.pagina-inicio .cabecera:not(.es-compacta) :focus-visible,
.hero :focus-visible,
.franja-tinta :focus-visible,
.pie :focus-visible {
  outline-color: var(--papel);
}

#reservar :focus-visible {
  outline-color: var(--papel);
}

/* ---------- Teletipo de novedades ---------- */

.novedades[hidden] {
  display: none;
}

.novedades:not([hidden]) {
  border-block: 1px solid var(--tinta);
  padding: 0.75rem 0;
  font-size: var(--tipo-s);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}

/* ---------- Portal ---------- */

.portal {
  padding: var(--espacio-3xl) 0 var(--espacio-2xl);
}

.portal-rejilla {
  display: grid;
  gap: var(--espacio-m);
}

.portal-entrada {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 16rem;
  padding: var(--espacio-xl);
  border: 1px solid var(--tinta);
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--duracion) var(--curva), background-color var(--duracion) var(--curva);
}

.portal-entrada:hover {
  transform: translateY(-3px);
}

.portal-num {
  position: absolute;
  top: var(--espacio-l);
  left: var(--espacio-xl);
  font-size: var(--tipo-xs);
  letter-spacing: 0.22em;
  font-weight: 700;
  color: var(--tinta-suave);
}

.portal-entrada h2 {
  font-family: var(--sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.045em;
  font-size: clamp(2.4rem, 1rem + 4vw, 4.4rem);
  line-height: 0.82;
  transition: transform var(--duracion) var(--curva);
}

.portal-entrada:hover h2 {
  transform: translateX(0.35rem);
}

.portal-entrada p {
  margin-top: 0.85rem;
  max-width: 26ch;
  color: var(--tinta-suave);
}

.portal-flecha {
  position: absolute;
  top: var(--espacio-l);
  right: var(--espacio-xl);
  font-size: var(--tipo-l);
  line-height: 1;
  transform: translateX(-0.5rem);
  opacity: 0;
  transition: transform var(--duracion) var(--curva), opacity var(--duracion) var(--curva);
}

.portal-entrada:hover .portal-flecha {
  transform: none;
  opacity: 1;
}

.portal-entrada--inversa {
  background: var(--tinta);
  color: var(--papel);
  border-color: var(--tinta);
}

.portal-entrada--inversa .portal-num,
.portal-entrada--inversa p {
  color: var(--papel-suave);
}

.portal-ilustra {
  width: min(58%, 16rem);
  opacity: 0.26;
  transition: opacity 0.5s var(--curva);
}

/* El hover no puede levantar la imagen: despegaria el corte del borde. */
.portal-entrada:hover .portal-ilustra {
  opacity: 0.4;
}

.portal-entrada h2,
.portal-entrada p {
  position: relative;
  z-index: 1;
}

.portal-carta .portal-ilustra {
  right: -10%;
  width: min(68%, 26rem);
  --fundido: 24%;
}

/* El pez es apaisado (1201x599): pide mas ancho y menos fundido. */
.portal-vinos .portal-ilustra {
  right: -13%;
  width: min(94%, 26rem);
  --fundido: 24%;
}

/* Tarjeta en negativo: la langosta va espejada para sangrar por la derecha. */
.portal-casa .portal-ilustra {
  right: -10%;
  width: min(58%, 16rem);
  opacity: 0.38;
  transform: scaleX(-1);
  --fundido: 22%;
}

.portal-casa:hover .portal-ilustra {
  opacity: 0.42;
}

/* El calamar es muy vertical (1201x1830): entra poco y se funde antes. */
.portal-contacto .portal-ilustra {
  right: -6%;
  width: min(46%, 15rem);
  --fundido: 18%;
  --fundido-lado: 10%;
}

/* ---------- Láminas ---------- */

.laminas {
  padding: 0 0 var(--espacio-3xl);
}

.laminas-rejilla {
  display: grid;
  gap: var(--espacio-xl);
}

.lamina {
  margin: 0;
}

.lamina-marco {
  padding: clamp(0.75rem, 1.6vw, 1.1rem);
  border: 1px solid var(--linea-fuerte);
  background: color-mix(in srgb, var(--papel) 35%, white);
}

.lamina-placa {
  position: relative;
  aspect-ratio: 5 / 4;
  background:
    repeating-linear-gradient(46deg,
      transparent 0 11px,
      color-mix(in srgb, var(--tinta) 6%, transparent) 11px 12px),
    linear-gradient(168deg, color-mix(in srgb, var(--tinta) 10%, var(--papel)), color-mix(in srgb, var(--tinta) 4%, var(--papel)));
  /* huella de plancha: el reborde hundido que deja el cobre en el papel */
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--tinta) 17%, transparent),
    inset 0 1px 0.7rem color-mix(in srgb, var(--tinta) 7%, transparent);
  overflow: hidden;
}

.lamina-placa::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grano);
  background-size: 220px;
  opacity: 0.16;
}

.lamina figcaption {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.65rem;
  font-size: var(--tipo-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.lamina figcaption::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: var(--linea-fuerte);
}

/* ---------- Destacados ---------- */

.destacados {
  padding: 0 0 var(--espacio-3xl);
}

.destacados-lista {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0;
}

.destacados-lista a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem 1.5rem;
  align-items: baseline;
  padding: 1.5rem 0;
  border-top: 1px solid var(--tinta);
  text-decoration: none;
}

.destacados-lista li:last-child a {
  border-bottom: 1px solid var(--tinta);
}

.destacado-n {
  font-family: var(--serif);
  font-size: var(--tipo-m);
  font-weight: 400;
  color: var(--tinta-suave);
}

.destacado-nombre {
  font-family: var(--serif);
  font-size: var(--tipo-l);
  font-weight: 400;
  transition: transform var(--duracion) var(--curva), color var(--duracion) var(--curva);
}

.destacados-lista a:hover .destacado-nombre {
  transform: translateX(0.6rem);
}

.destacado-precio {
  color: var(--precio);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: var(--tipo-m);
}

/* ---------- Franja tinta (reseñas) ---------- */

.franja-tinta {
  position: relative;
  background: var(--tinta);
  color: var(--papel);
  padding: var(--espacio-3xl) 0;
  overflow: hidden;
}

.franja-tinta-cuerpo {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--espacio-l);
}

.nota-grande {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--tipo-gigante);
  line-height: 0.78;
  letter-spacing: -0.05em;
}

.resenas-texto {
  font-family: var(--serif);
  font-size: var(--tipo-l);
  max-width: 16ch;
  line-height: 1.15;
}

.franja-tinta a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--espacio-m);
  color: var(--papel);
  font-size: var(--tipo-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--linea-clara);
  padding-bottom: 0.3rem;
  transition: border-color var(--duracion) var(--curva), color var(--duracion) var(--curva);
}

.franja-tinta a:hover {
  color: var(--precio-tinta);
  border-color: var(--precio-tinta);
}

.franja-kicker {
  font-size: var(--tipo-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--papel-suave);
  margin-bottom: var(--espacio-m);
}

/* ---------- Cierre ---------- */

.cierre {
  padding: var(--espacio-3xl) 0;
}

.cierre-rejilla {
  display: grid;
  gap: var(--espacio-2xl);
}

.cierre h2,
.pagina-titulo {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--tipo-display);
  line-height: 0.96;
  letter-spacing: -0.025em;
}

.horario {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.55rem 1.5rem;
  max-width: 26rem;
  margin-top: var(--espacio-m);
}

.horario dt {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--tipo-xs);
}

.horario dd {
  margin: 0;
  color: var(--tinta-suave);
}

.cierre-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: var(--espacio-l);
}

.telefono-grande {
  font-family: var(--serif);
  font-size: var(--tipo-l);
  line-height: 1.1;
  margin-bottom: var(--espacio-m);
}

.telefono-grande a {
  text-decoration: none;
  border-bottom: 1px solid var(--linea);
}

.telefono-grande a:hover {
  border-color: var(--precio);
  color: var(--precio);
}

.contacto-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.contacto-alterno {
  margin-top: var(--espacio-m);
  font-size: var(--tipo-s);
  color: var(--tinta-suave);
}

.contacto-alterno a {
  color: inherit;
}

/* ---------- Pie ---------- */

.pie {
  background: var(--tinta);
  color: var(--papel);
  padding: var(--espacio-3xl) 0 calc(var(--espacio-xl) + 0.5rem);
}

.pie a {
  color: var(--papel);
  text-decoration: none;
}

.pie-rejilla {
  display: grid;
  gap: var(--espacio-xl);
}

.pie-marca {
  display: block;
  line-height: 0;
  margin-bottom: var(--espacio-l);
}

.pie-marca img {
  width: clamp(8rem, 14vw, 11rem);
  height: auto;
  display: block;
}

.pie-dir {
  font-style: normal;
  color: var(--papel-suave);
  font-size: var(--tipo-s);
}

.pie-dir p + p {
  margin-top: 0.35rem;
}

.pie-dir a {
  border-bottom: 1px solid transparent;
  transition: border-color var(--duracion) var(--curva);
}

.pie-dir a:hover {
  border-color: var(--papel);
}

.pie-nav,
.pie-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.25rem;
  list-style: none;
  padding: 0;
}

.pie-nav a,
.pie-legal a {
  font-size: var(--tipo-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}

.pie-nav {
  margin-bottom: var(--espacio-l);
}

.pie-legal {
  color: var(--papel-suave);
}

.pie-legal a {
  color: var(--papel-suave);
}

.pie-copy {
  margin-top: var(--espacio-2xl);
  padding-top: var(--espacio-l);
  border-top: 1px solid var(--linea-clara);
  color: var(--papel-suave);
  font-size: var(--tipo-s);
}

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

.barra-movil {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 70;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background: var(--tinta);
  color: var(--papel);
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid var(--linea-clara);
}

.barra-movil a {
  min-height: 2.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.5rem 0.2rem;
  text-decoration: none;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
}

.barra-movil a + a {
  border-left: 1px solid var(--linea-clara);
}

.barra-movil img {
  width: 1.15rem;
  height: 1.15rem;
  filter: invert(1);
}

/* ---------- Diálogo Reservar ---------- */

#reservar {
  overflow: hidden;
  border: 0;
  padding: 0;
  background: var(--tinta);
  color: var(--papel);
  max-width: 30rem;
  width: min(30rem, calc(100vw - 2rem));
}

#reservar[open] {
  animation: dialogo-sube 0.32s var(--curva);
}

@keyframes dialogo-sube {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

#reservar::backdrop {
  background: color-mix(in srgb, var(--tinta) 84%, transparent);
  backdrop-filter: blur(3px);
}

/* Misma ley que en el resto: el canto cortado del grabado va sobre el borde. */
.dialogo-grabado {
  position: absolute;
  right: -20%;
  bottom: 0;
  width: 64%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.26;
  transform: scaleX(-1);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 100%);
}

.dialogo-cuerpo {
  position: relative;
  z-index: 1;
  padding: var(--espacio-xl) var(--espacio-xl) var(--espacio-l);
}

.dialogo-kicker {
  font-size: var(--tipo-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--papel-suave);
  margin-bottom: var(--espacio-s);
}

#reservar h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--tipo-l);
  line-height: 1.05;
}

.dialogo-telefono {
  margin-top: var(--espacio-m);
  font-family: var(--serif);
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.015em;
}

.dialogo-telefono a {
  text-decoration: none;
  border-bottom: 1px solid var(--linea-clara);
  transition: border-color var(--duracion) var(--curva), color var(--duracion) var(--curva);
}

.dialogo-telefono a:hover {
  color: var(--precio-tinta);
  border-color: var(--precio-tinta);
}

.horario--tinta {
  margin-top: var(--espacio-l);
  padding-top: var(--espacio-m);
  border-top: 1px solid var(--linea-clara);
  gap: 0.4rem 1.5rem;
}

.horario--tinta dd {
  color: var(--papel-suave);
}

.dialogo-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: var(--espacio-l);
}

#reservar .btn {
  color: var(--papel);
  border-color: var(--linea-clara);
}

#reservar .btn:hover {
  border-color: var(--papel);
}

#reservar .btn--lleno {
  background: var(--papel);
  color: var(--tinta);
  border-color: var(--papel);
}

#reservar .btn--lleno:hover {
  background: var(--precio-tinta);
  border-color: var(--precio-tinta);
  color: var(--tinta);
}

.dialogo-nota {
  margin-top: var(--espacio-m);
  font-size: var(--tipo-s);
  color: var(--papel-suave);
  font-family: var(--serif);
  font-style: italic;
}

.dialogo-aspa {
  position: absolute;
  z-index: 2;
  top: 0.55rem;
  right: 0.55rem;
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--duracion) var(--curva);
  opacity: 0.75;
}

.dialogo-aspa:hover {
  opacity: 1;
}

.dialogo-aspa img {
  width: 1.15rem;
  height: 1.15rem;
  filter: invert(1);
}

/* ---------- Páginas interiores ---------- */

.pagina-interior {
  padding: calc(var(--espacio-2xl) + 0.5rem) 0 var(--espacio-3xl);
}

.pagina-interior .pagina-titulo {
  margin-bottom: var(--espacio-l);
}

.pagina-interior address {
  font-style: normal;
  color: var(--tinta-suave);
}

.lead {
  font-family: var(--serif);
  font-size: var(--tipo-m);
  max-width: 34ch;
  line-height: 1.4;
}

/* Decoración de grabado en páginas interiores */

.pagina-interior {
  position: relative;
  overflow: clip;
}

.pagina-interior > .envoltorio {
  position: relative;
  z-index: 1;
}

.decor {
  opacity: 0.16;
  z-index: 0;
  --fundido: 44%;
  --fundido-abajo: 30%;
}

.decor-casa {
  right: -6%;
  top: auto;
  width: min(38vw, 24rem);
  transform: scaleX(-1);
  --fundido: 20%;
}

.decor-contacto {
  right: -5%;
  width: min(34vw, 20rem);
  --fundido: 22%;
}

/* Índice sticky de capítulos */

.indice {
  position: sticky;
  top: 4.6rem;
  z-index: 40;
  background: color-mix(in srgb, var(--papel) 90%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-block: 1px solid var(--linea);
}

.indice-lista {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  width: var(--medida);
  margin-inline: auto;
  padding: 0.9rem 0;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}

.indice-lista::-webkit-scrollbar {
  display: none;
}

.indice a {
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--tipo-xs);
  font-weight: 700;
  color: var(--tinta-suave);
  padding-block: 0.25rem;
  transition: color var(--duracion) var(--curva);
}

.indice a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--precio);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--curva);
}

.indice a:hover {
  color: var(--ink);
}

.indice a.es-activo {
  color: var(--precio);
}

.indice a.es-activo::after {
  transform: scaleX(1);
}

/* Pliegos de la carta */

.pliego {
  position: relative;
  margin-top: var(--espacio-3xl);
  padding: var(--espacio-xl) 0 var(--espacio-2xl);
  scroll-margin-top: 8.5rem;
}

.pliego:first-of-type {
  margin-top: var(--espacio-xl);
}

.capitulo-titulo {
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--tipo-capitulo);
  letter-spacing: -0.05em;
  text-transform: uppercase;
  line-height: 0.84;
  margin-bottom: var(--espacio-xl);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
}

.capitulo-n {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--tipo-l);
  letter-spacing: 0;
  color: var(--precio);
}

.pliego-ilustra {
  width: min(46vw, 18rem);
  opacity: 0.17;
  z-index: 0;
  --fundido: 42%;
  --fundido-abajo: 40%;
}

.pliego--entrantes .pliego-ilustra:first-of-type {
  left: -4%;
}

.pliego--entrantes .pliego-ilustra:last-of-type {
  right: -5%;
}

.pliego--arroces .pliego-ilustra {
  right: -8%;
  width: min(62vw, 24rem);
  --fundido: 34%;
  --fundido-abajo: 34%;
}

.pliego--carnes .pliego-ilustra {
  right: -4%;
}

.pliego--postres .pliego-ilustra {
  left: -4%;
}

.plato {
  position: relative;
  z-index: 1;
  padding: 0.9rem 0.5rem 1rem;
  margin-inline: -0.5rem;
  border-top: 1px solid var(--linea);
  transition: background-color var(--duracion) var(--curva);
}

.plato:hover {
  background: color-mix(in srgb, var(--tinta) 4%, transparent);
}

.plato:last-child {
  border-bottom: 1px solid var(--linea);
}

.plato-linea {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
}

.plato-nombre {
  font-size: var(--tipo-cuerpo);
  font-weight: 600;
  max-width: 38ch;
}

.plato-lider {
  flex: 1;
  border-bottom: 1px dotted color-mix(in srgb, var(--tinta) 32%, transparent);
  transform: translateY(-0.28em);
  min-width: 1.5rem;
}

.plato-precio {
  color: var(--precio);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.plato-alergenos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.85rem;
  margin-top: 0.35rem;
  color: var(--tinta-suave);
  font-size: var(--tipo-s);
}

.alergeno {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.alergeno img {
  width: 1rem;
  height: 1rem;
}

.notas-arroz {
  position: relative;
  z-index: 1;
  margin-top: var(--espacio-xl);
  padding: var(--espacio-l);
  border: 1px solid var(--tinta);
  max-width: 28rem;
  background: color-mix(in srgb, var(--papel) 60%, white);
}

.notas-arroz ul {
  padding-left: 1.1rem;
}

.extra-envase {
  position: relative;
  z-index: 1;
  margin-top: var(--espacio-l);
  font-size: var(--tipo-s);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  max-width: 36ch;
}

.pliego-dos {
  display: grid;
  gap: var(--espacio-l);
}

.extras {
  margin-top: var(--espacio-xl);
}

.subgrupo {
  margin-top: var(--espacio-xl);
}

.subgrupo h3,
.do-titulo {
  font-family: var(--sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: var(--tipo-s);
  margin-bottom: 0.35rem;
}

.subgrupo h3::after,
.do-titulo::after {
  content: "";
  display: block;
  width: 2rem;
  height: 2px;
  background: var(--precio);
  margin-top: 0.4rem;
}

/* Recomendación de la casa */

[data-recomendacion]:not([hidden]) {
  margin-top: var(--espacio-xl);
  padding: var(--espacio-l);
  border: 1px solid var(--precio);
  max-width: 32rem;
}

[data-recomendacion-plato] {
  font-family: var(--serif);
  font-size: var(--tipo-l);
}

[data-recomendacion-descripcion] {
  margin-top: 0.35rem;
  color: var(--tinta-suave);
}

[data-recomendacion-precio] {
  margin-top: 0.5rem;
}

/* Vino del mes */

.vino-mes:not([hidden]) {
  margin-top: var(--espacio-xl);
  padding: var(--espacio-l);
  border: 1px solid var(--precio);
  max-width: 32rem;
}

/* Leyenda de alérgenos */

.leyenda {
  margin-top: var(--espacio-3xl);
  padding-top: var(--espacio-xl);
  border-top: 1px solid var(--tinta);
}

.leyenda h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--tipo-l);
  margin-bottom: var(--espacio-l);
}

.leyenda-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.75rem 1rem;
  list-style: none;
  padding: 0;
}

.leyenda-lista .alergeno {
  font-size: var(--tipo-s);
}

.leyenda-aviso {
  margin-top: var(--espacio-l);
  max-width: 36ch;
  color: var(--tinta-suave);
  font-style: italic;
  font-family: var(--serif);
}

.icono-seccion {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
  color: var(--precio);
  font-size: var(--tipo-s);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.icono-seccion img {
  width: 1.15rem;
  height: 1.15rem;
}

/* La casa / Contacto */

.hechos {
  display: grid;
  gap: var(--espacio-2xl);
  margin-top: var(--espacio-2xl);
}

.hechos h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--tipo-l);
  margin-bottom: 0.65rem;
}

.contacto-bloques {
  display: grid;
  gap: var(--espacio-2xl);
  margin-top: var(--espacio-2xl);
}

.contacto-bloques h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--tipo-l);
  margin-bottom: 0.65rem;
}

.mapa-lamina {
  display: block;
  margin-top: var(--espacio-m);
  border: 1px solid var(--tinta);
  padding: 0.55rem;
  background: color-mix(in srgb, var(--papel) 55%, white);
  transition: transform var(--duracion) var(--curva);
}

.mapa-lamina:hover {
  transform: translateY(-2px);
}

.mapa-lamina img {
  display: block;
  width: 100%;
  height: auto;
}

/* Legales */

.pagina-legal h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--tipo-m);
  margin: var(--espacio-xl) 0 0.6rem;
}

.pagina-legal p,
.pagina-legal li {
  max-width: 62ch;
}

.pagina-legal ul {
  padding-left: 1.15rem;
}

.pagina-legal a {
  color: var(--precio);
}

/* 404 */

.error-404 {
  min-height: 70vh;
  display: flex;
  align-items: flex-end;
  padding: var(--espacio-3xl) 0;
}

.error-404 .btn {
  margin-top: var(--espacio-l);
}

/* ---------- Revelado al hacer scroll ---------- */

.js [data-revela] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--curva), transform 0.8s var(--curva);
}

.js [data-revela].es-visible {
  opacity: 1;
  transform: none;
}

/* ---------- Breakpoints ---------- */

@media (min-width: 38rem) {
  .hero-cuerpo {
    padding-bottom: clamp(6rem, 14vh, 9rem);
  }

  .franja-tinta-cuerpo {
    grid-template-columns: auto 1fr;
    align-items: end;
    gap: 2rem 3.5rem;
  }
}

@media (min-width: 56rem) {
  body.con-barra-movil {
    padding-bottom: 0;
  }

  .menu-boton {
    display: none;
  }

  .hero-langosta {
    right: -10%;
    width: min(50vw, 34rem);
  }

  .hero-baja {
    display: flex;
  }

  .portal-rejilla {
    grid-template-columns: 1.15fr 1fr;
    grid-template-rows: auto auto;
    gap: var(--espacio-l);
  }

  .portal-carta {
    min-height: 23rem;
  }

  .portal-vinos {
    min-height: 19rem;
    margin-top: 2.5rem;
  }

  .portal-casa {
    min-height: 18rem;
  }

  .portal-contacto {
    min-height: 21rem;
  }

  .laminas-rejilla {
    grid-template-columns: minmax(0, 33rem) minmax(0, 22rem);
    justify-content: start;
    align-items: end;
    gap: clamp(2rem, 5vw, 4.5rem);
  }

  .lamina:first-child {
    transform: rotate(-1.05deg);
  }

  .lamina:last-child {
    transform: translateY(2.2rem) rotate(0.8deg);
  }

  .cierre-rejilla,
  .pie-rejilla {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: start;
  }

  .pliego-dos {
    grid-template-columns: 1fr 1fr;
    gap: 2rem 4.5rem;
  }

  .hechos,
  .contacto-bloques {
    grid-template-columns: 1.05fr 0.95fr;
  }

  .hechos {
    align-items: start;
    gap: var(--espacio-xl) var(--espacio-2xl);
  }

  .hechos > section {
    grid-column: 1;
  }

  .hechos > .lamina {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: start;
  }

  .barra-movil {
    display: none;
  }
}

@media (min-width: 64rem) {
  .hero-langosta {
    right: -8%;
    width: min(44vw, 38rem);
  }

  .destacados-lista a {
    padding-block: 1.75rem;
  }
}

/* ---------- Menú móvil ---------- */

@media (max-width: 55.99875rem) {
  .nav-principal {
    position: fixed;
    inset: 0;
    z-index: 90;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--espacio-xl);
    padding: var(--espacio-2xl) var(--gutter);
    background: var(--papel);
    color: var(--ink);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.32s var(--curva), visibility 0s 0.32s;
  }

  .nav-principal[data-abierto] {
    transform: none;
    visibility: visible;
    transition: transform 0.32s var(--curva);
  }

  .nav-lista {
    flex-direction: column;
    gap: 0.4rem;
  }

  .nav-lista li {
    overflow: hidden;
  }

  .nav-lista a {
    font-size: var(--tipo-l);
    letter-spacing: -0.02em;
    text-transform: none;
    font-family: var(--serif);
    font-weight: 400;
    padding-block: 0.35rem;
    transform: translateY(110%);
    transition: transform 0.4s var(--curva);
  }

  .nav-principal[data-abierto] .nav-lista a {
    transform: none;
  }

  .nav-principal[data-abierto] .nav-lista li:nth-child(1) a { transition-delay: 0.08s; }
  .nav-principal[data-abierto] .nav-lista li:nth-child(2) a { transition-delay: 0.14s; }
  .nav-principal[data-abierto] .nav-lista li:nth-child(3) a { transition-delay: 0.2s; }
  .nav-principal[data-abierto] .nav-lista li:nth-child(4) a { transition-delay: 0.26s; }
  .nav-principal[data-abierto] .nav-lista li:nth-child(5) a { transition-delay: 0.32s; }

  .nav-lista a::after {
    display: none;
  }

  /* `backdrop-filter` crea bloque contenedor para los descendientes `fixed`:
     con el, el panel del menu (fixed, translateX(100%)) dejaba de anclarse al
     viewport y generaba scroll horizontal de un ancho de pantalla en cuanto se
     bajaban 40 px. En movil se usa fondo opaco, que ademas no cuesta composicion. */
  .cabecera.es-compacta,
  .pagina-inicio .cabecera.es-compacta,
  .indice {
    background: var(--papel);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .nav-pie {
    display: block;
    margin-top: auto;
    padding-top: var(--espacio-l);
    border-top: 1px solid var(--linea);
    width: 100%;
    color: var(--tinta-suave);
    font-size: var(--tipo-s);
  }

  .nav-pie p + p {
    margin-top: 0.3rem;
  }

  .nav-pie a {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--linea-fuerte);
  }

  .nav-principal {
    justify-content: flex-start;
    padding-top: calc(var(--cabecera-h) + var(--espacio-2xl));
    padding-bottom: var(--espacio-xl);
  }



  .pagina-inicio .cabecera:not(.es-compacta) .nav-principal {
    color: var(--ink);
  }

  .pagina-inicio .cabecera:not(.es-compacta) .nav-lista a[aria-current="page"] {
    color: var(--precio);
  }

  .hero-cuerpo {
    padding-bottom: 30vh;
  }

  .hero-cita {
    max-width: 26ch;
  }

  .decor {
    opacity: 0.12;
  }

  .decor-casa {
    right: -12%;
    width: 68vw;
  }

  .decor-contacto {
    right: -14%;
    width: 66vw;
  }
}

/* ---------- Impresión ---------- */

@media print {
  .saltar,
  .cabecera,
  .indice,
  .barra-movil,
  .pie,
  #reservar,
  .hero-acciones,
  .cta-reservar,
  body::after {
    display: none !important;
  }

  body {
    background: white;
    color: black;
    padding: 0;
  }

  .pliego {
    break-inside: avoid;
  }

  .pliego-ilustra {
    opacity: 0.08;
  }

  a {
    text-decoration: none;
    color: inherit;
  }
}

/* ---------- Movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .hero-langosta {
    clip-path: none;
    transform: scaleX(-1);
  }

  .hero h1 .linea > span {
    transform: none;
  }

  .js [data-revela] {
    opacity: 1;
    transform: none;
  }
}