/* ==========================================================================
   El Rincón del Cojo · hoja de estilos
   Mobile-first: todo lo de fuera de un @media es el móvil.
   Puntos de corte: 40em (640 px), 56em (896 px), 64em (1024 px), 80em (1280 px)
   ========================================================================== */

/* ---------- Tipografías autoalojadas ---------- */
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Sistema de diseño ---------- */
:root {
  --negro: #080807;
  --carbon: #11100E;
  --carbon-2: #191613;
  --carbon-3: #221E1A;
  --marfil: #F1E8DA;
  --marfil-2: #D8CCBA;
  --gris: #9A9288;
  --gris-papel: #5C554D;
  --cobre: #A9653E;
  --ambar: #D18A42;
  --brasa: #E9A55A;
  --ladrillo: #8A2A1E;
  --linea: rgba(241, 232, 218, .14);
  --linea-papel: rgba(17, 16, 14, .14);

  --f-titulo: "Fraunces", "Iowan Old Style", Georgia, serif;
  --f-texto: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-xs: .78rem;
  --t-s: .9rem;
  --t-m: clamp(1rem, .96rem + .2vw, 1.08rem);
  --t-l: clamp(1.12rem, 1.02rem + .5vw, 1.35rem);

  --gutter: clamp(1rem, 4.5vw, 3.5rem);
  --max: 84rem;
  --cabecera: 4.25rem;
  --curva: cubic-bezier(.2, .7, .2, 1);
  --arco: 50% 50% 0 0 / 30% 30% 0 0;
}
@media (min-width: 64em) {
  :root { --cabecera: 5.5rem; }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--cabecera);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--carbon);
  color: var(--marfil);
  font-family: var(--f-texto);
  font-size: var(--t-m);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
figure { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
address { font-style: normal; }
[hidden] { display: none !important; }
html.menu-abierto, html:has(dialog[open]) { overflow: hidden; }

:focus-visible {
  outline: 2px solid var(--brasa);
  outline-offset: 3px;
  border-radius: 2px;
}
::selection { background: var(--ambar); color: var(--negro); }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.saltar {
  position: fixed;
  top: .75rem; left: .75rem;
  z-index: 200;
  padding: .75rem 1rem;
  background: var(--marfil);
  color: var(--negro);
  font-weight: 600;
  transform: translateY(-200%);
}
.saltar:focus { transform: none; }

.contenedor {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Tipografía editorial ---------- */
.num {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.4rem;
  color: var(--brasa);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.num::before {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: currentColor;
  opacity: .7;
}
.titulo-xxl, .titulo-xl, .titulo-l, .hero-lema {
  font-family: var(--f-titulo);
  font-weight: 300;
  font-optical-sizing: auto; /* a 144 forzado, las líneas finas de la "e" casi desaparecen en el móvil */
  letter-spacing: -.02em;
  line-height: 1;
  text-wrap: balance;
}
.titulo-xxl { font-size: clamp(2.6rem, 1.6rem + 6.2vw, 6.6rem); }
.titulo-xl  { font-size: clamp(2.2rem, 1.5rem + 4.2vw, 4.6rem); }
.titulo-l   { font-size: clamp(1.9rem, 1.4rem + 2.6vw, 3.3rem); }
.titulo-xxl em, .titulo-xl em, .titulo-l em {
  display: block;
  font-style: italic;
  color: var(--marfil-2);
}
.titulo-xxl span, .titulo-xl span { display: block; }
.entradilla {
  max-width: 34rem;
  margin-top: 1.6rem;
  color: var(--marfil-2);
  font-size: var(--t-l);
  line-height: 1.55;
}

/* ---------- Botones y enlaces ---------- */
.btn {
  --alto: 3.25rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: var(--alto);
  padding: 0 1.6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--f-texto);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  transition: background-color .3s var(--curva), color .3s var(--curva), border-color .3s var(--curva), box-shadow .4s var(--curva), transform .3s var(--curva);
}
.btn-sm { --alto: 2.75rem; padding: 0 1.1rem; font-size: .88rem; }
.btn-lg { --alto: 3.6rem; padding: 0 2.2rem; font-size: 1.02rem; }
.btn-fuego {
  background: var(--ambar);
  color: var(--negro);
  box-shadow: 0 0 0 0 rgba(233, 165, 90, 0);
}
.btn-fuego:hover {
  background: var(--brasa);
  box-shadow: 0 10px 40px -8px rgba(233, 140, 60, .55);
  transform: translateY(-1px);
}
.btn-linea {
  border-color: rgba(241, 232, 218, .42);
  color: var(--marfil);
  background: rgba(8, 8, 7, .18);
}
.btn-linea:hover {
  border-color: var(--marfil);
  background: rgba(241, 232, 218, .08);
}
.btn:active { transform: translateY(1px); }

.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 2.75rem;
  color: var(--brasa);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.enlace-flecha::after {
  content: "→";
  transition: transform .3s var(--curva);
}
.enlace-flecha:hover::after { transform: translateX(4px); }
.enlace-flecha:hover { border-bottom-color: currentColor; }

button.enlace {
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: rgba(241, 232, 218, .3);
  text-underline-offset: .25em;
}
button.enlace:hover { text-decoration-color: currentColor; }

/* ---------- Cabecera ---------- */
.cabecera {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--cabecera);
  transition: background-color .4s var(--curva), border-color .4s var(--curva), backdrop-filter .4s;
  border-bottom: 1px solid transparent;
}
.cabecera::before {
  content: "";
  position: absolute;
  inset: 0 0 -2.5rem;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(8, 8, 7, .72), rgba(8, 8, 7, 0));
  pointer-events: none;
  transition: opacity .4s;
}
.cabecera.solida {
  background: rgba(17, 16, 14, .86);
  border-bottom-color: var(--linea);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
}
.cabecera.solida::before { opacity: 0; }
.cabecera-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.logo { display: block; flex-shrink: 1; min-width: 0; padding-block: .5rem; }
.logo img { width: 140px; height: auto; }
/* Móviles estrechos (320-379 px): logo, Reservar y menú tienen que caber en una fila */
@media (max-width: 23.7em) {
  .logo img { width: 112px; }
  .cabecera-acciones { gap: .4rem; }
  .cabecera-acciones .btn-sm { padding: 0 .85rem; font-size: .84rem; }
}

.nav { display: none; }
.cabecera-acciones { display: flex; align-items: center; gap: .6rem; }
.cabecera .idioma-cabecera { display: none; }

.menu-btn {
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--linea);
  border-radius: 50%;
  background: rgba(8, 8, 7, .3);
}
.menu-btn-lineas,
.menu-btn-lineas::before {
  position: absolute;
  left: 50%;
  width: 1.1rem;
  height: 1.5px;
  background: var(--marfil);
  transition: transform .35s var(--curva), top .35s var(--curva);
}
.menu-btn-lineas { top: calc(50% - 3px); transform: translateX(-50%); }
.menu-btn-lineas::before { content: ""; top: 6px; transform: translateX(-50%); }
.menu-btn[aria-expanded="true"] .menu-btn-lineas { top: 50%; transform: translateX(-50%) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn-lineas::before { top: 0; transform: translateX(-50%) rotate(-90deg); }

/* Selector de idioma */
.idioma { display: inline-flex; gap: .25rem; }
.idioma button {
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 .75rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  color: var(--gris);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .08em;
  transition: color .25s, border-color .25s;
}
.idioma button:hover { color: var(--marfil); }
.idioma button[aria-pressed="true"] {
  color: var(--marfil);
  border-color: var(--linea);
}

@media (min-width: 64em) {
  .logo img { width: 190px; }
  .menu-btn { display: none; }
  .cabecera .idioma-cabecera { display: inline-flex; }
  .nav { display: block; }
  .nav ul { display: flex; gap: clamp(1rem, 2.2vw, 2.4rem); }
  .nav a {
    position: relative;
    display: inline-block;
    padding-block: .6rem;
    font-size: .9rem;
    letter-spacing: .04em;
    text-decoration: none;
    color: var(--marfil-2);
    transition: color .25s;
  }
  .nav a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: .3rem;
    height: 1px;
    background: var(--brasa);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s var(--curva);
  }
  .nav a:hover, .nav a[aria-current="true"] { color: var(--marfil); }
  .nav a:hover::after, .nav a[aria-current="true"]::after { transform: scaleX(1); }
  .cabecera-acciones { gap: 1rem; }
  .cabecera-acciones .btn-sm { --alto: 2.9rem; padding: 0 1.4rem; }
}

/* ---------- Menú móvil ---------- */
.menu-movil {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: calc(var(--cabecera) + 2rem) var(--gutter) calc(1.5rem + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    radial-gradient(120% 60% at 50% 110%, rgba(209, 138, 66, .22), transparent 60%),
    var(--negro);
  opacity: 0;
  transition: opacity .35s var(--curva);
}
.menu-movil.abierto { opacity: 1; }
.menu-movil-lista { counter-reset: menu; }
.menu-movil-lista li { counter-increment: menu; border-bottom: 1px solid var(--linea); }
.menu-movil-lista a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: .7rem 0;
  font-family: var(--f-titulo);
  font-size: clamp(1.7rem, 7.5vw, 2.6rem);
  font-weight: 300;
  line-height: 1.15;
  text-decoration: none;
  transform: translateY(12px);
  opacity: 0;
  transition: transform .5s var(--curva), opacity .5s var(--curva), color .2s;
}
.menu-movil-lista a::before {
  content: counter(menu, decimal-leading-zero);
  font-family: var(--f-texto);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .15em;
  color: var(--brasa);
}
.menu-movil.abierto .menu-movil-lista a { transform: none; opacity: 1; }
.menu-movil.abierto .menu-movil-lista li:nth-child(2) a { transition-delay: .03s; }
.menu-movil.abierto .menu-movil-lista li:nth-child(3) a { transition-delay: .06s; }
.menu-movil.abierto .menu-movil-lista li:nth-child(4) a { transition-delay: .09s; }
.menu-movil.abierto .menu-movil-lista li:nth-child(5) a { transition-delay: .12s; }
.menu-movil.abierto .menu-movil-lista li:nth-child(6) a { transition-delay: .15s; }
.menu-movil.abierto .menu-movil-lista li:nth-child(7) a { transition-delay: .18s; }
.menu-movil-lista a:hover { color: var(--brasa); }
.menu-movil-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.menu-movil-tel {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--marfil-2);
  font-size: 1.05rem;
  text-decoration: none;
  letter-spacing: .04em;
}
@media (min-width: 64em) {
  .menu-movil { display: none !important; }
}

/* ---------- Portada ---------- */
/* Fondo con dos vídeos del restaurante: la lumbre abajo y las chispas encima,
   fundidas en modo "screen" (el negro del vídeo desaparece) para que parezca
   que las chispas salen de las brasas. El texto queda en medio. */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--cabecera) + 2rem) var(--gutter) calc(clamp(8rem, 26svh, 15rem) + env(safe-area-inset-bottom));
  overflow: hidden;
  background: var(--negro);
}
.hero-fondo {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.hero-capa { position: absolute; }
.hero-capa picture { display: contents; }
.hero-capa img, .hero-capa video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-capa video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s var(--curva);
}
.hero-capa video.reproduciendo { opacity: 1; }
/* Encuadre: llamas arriba y ascuas abajo, solo se funde el borde de arriba */
.hero-lumbre {
  inset: auto 0 0;
  height: 42%;
  -webkit-mask-image: linear-gradient(to top, #000 68%, transparent);
  mask-image: linear-gradient(to top, #000 68%, transparent);
}
.hero-lumbre img, .hero-lumbre video { object-position: 50% 30%; }
.hero-chispas {
  inset: 0;
  mix-blend-mode: screen;
}
.hero-velo {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(95% 50% at 40% 55%, rgba(8, 8, 7, .6), transparent 75%),
    linear-gradient(to bottom, rgba(8, 8, 7, .65), transparent 20%);
}
.hero--video .brasas { display: none; }

.hero-contenido {
  position: relative;
  max-width: 44rem;
}
.hero-pre {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.1rem;
  color: var(--marfil-2);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.hero-pre::before {
  content: "";
  width: 2rem;
  height: 1px;
  background: var(--brasa);
}
.hero-titulo { font-weight: inherit; }
.hero-nombre {
  display: block;
  margin-bottom: .5rem;
  font-family: var(--f-titulo);
  font-size: clamp(1.25rem, 1rem + 1.4vw, 1.9rem);
  font-weight: 400;
  font-variation-settings: "opsz" 36;
  letter-spacing: .01em;
  color: var(--marfil);
}
.hero-lema {
  display: block;
  font-size: clamp(3.1rem, 1.2rem + 10.5vw, 8.6rem);
  line-height: .92;
  color: var(--marfil);
}
.hero-lema > span { display: block; }
.hero-lema em {
  display: block;
  font-style: italic;
  font-weight: 300;
  color: var(--brasa);
}
.hero-sub {
  max-width: 30rem;
  margin-top: 1.6rem;
  color: var(--marfil-2);
  font-size: var(--t-l);
  line-height: 1.5;
}
.hero-botones {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2rem;
}
.hero-botones .btn { flex: 1 1 13rem; }
.hero-scroll { display: none; }

/* Distinciones: sellos pequeños (Guía Repsol e IGP Lechazo), sin fondo */
.distinciones {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-top: 1.6rem;
}
.distinciones img { display: block; width: auto; opacity: .92; }
.sello-repsol { height: 2.6rem; }
.sello-igp { height: 2.9rem; border-radius: 50%; }

/* Chispas que suben desde la brasa */
.brasas {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.brasas span {
  --x: 0px;
  position: absolute;
  bottom: -12px;
  left: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #FFC27A;
  box-shadow: 0 0 6px 2px rgba(233, 140, 60, .8);
  opacity: 0;
}
.brasas span:nth-child(1)  { left: 8%;  --x: 30px;  }
.brasas span:nth-child(2)  { left: 16%; --x: -20px; width: 2px; height: 2px; }
.brasas span:nth-child(3)  { left: 23%; --x: 45px;  }
.brasas span:nth-child(4)  { left: 31%; --x: -35px; width: 4px; height: 4px; }
.brasas span:nth-child(5)  { left: 38%; --x: 15px;  width: 2px; height: 2px; }
.brasas span:nth-child(6)  { left: 44%; --x: -50px; }
.brasas span:nth-child(7)  { left: 52%; --x: 25px;  width: 2px; height: 2px; }
.brasas span:nth-child(8)  { left: 59%; --x: -15px; }
.brasas span:nth-child(9)  { left: 65%; --x: 40px;  width: 4px; height: 4px; }
.brasas span:nth-child(10) { left: 72%; --x: -30px; width: 2px; height: 2px; }
.brasas span:nth-child(11) { left: 79%; --x: 20px;  }
.brasas span:nth-child(12) { left: 85%; --x: -40px; width: 2px; height: 2px; }
.brasas span:nth-child(13) { left: 91%; --x: 10px;  }
.brasas span:nth-child(14) { left: 4%;  --x: 55px;  width: 2px; height: 2px; }

@media (prefers-reduced-motion: no-preference) {
  .brasas span { animation: chispa 9s linear infinite; }
  .brasas span:nth-child(2n)  { animation-duration: 11s; animation-delay: -3s; }
  .brasas span:nth-child(3n)  { animation-duration: 8s;  animation-delay: -6s; }
  .brasas span:nth-child(4n)  { animation-duration: 12.5s; animation-delay: -1.5s; }
  .brasas span:nth-child(5n)  { animation-delay: -8s; }
  .brasas span:nth-child(7n)  { animation-delay: -4.5s; }
  .hero.fuera .brasas span { animation-play-state: paused; }

  .hero-pre, .hero-sub, .hero-botones, .hero-nombre, .distinciones {
    animation: entrar .9s var(--curva) both;
  }
  .hero-nombre { animation-delay: .05s; }
  .hero-sub { animation-delay: .2s; }
  .hero-botones { animation-delay: .3s; }
  .distinciones { animation-delay: .4s; }
}
@keyframes latido {
  0%, 100% { opacity: .55; }
  22% { opacity: .85; }
  40% { opacity: .62; }
  58% { opacity: .92; }
  80% { opacity: .68; }
}
@keyframes chispa {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  8%   { opacity: 1; }
  70%  { opacity: .7; }
  100% { transform: translate3d(var(--x), -78vh, 0); opacity: 0; }
}
@keyframes entrar {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

@media (min-width: 40em) {
  .hero-botones .btn { flex: 0 0 auto; }
}
@media (min-width: 48em) and (min-height: 40em) {
  .hero-scroll {
    position: absolute;
    left: var(--gutter);
    bottom: 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    min-height: 2.75rem;
    color: var(--gris);
    font-size: var(--t-xs);
    letter-spacing: .18em;
    text-transform: uppercase;
    text-decoration: none;
  }
  .hero-scroll i {
    position: relative;
    width: 1px;
    height: 2.5rem;
    background: rgba(241, 232, 218, .25);
    overflow: hidden;
  }
  .hero-scroll i::after {
    content: "";
    position: absolute;
    left: 0; top: 0;
    width: 1px; height: 40%;
    background: var(--brasa);
  }
  .hero { padding-bottom: 6rem; }
}
@media (min-width: 48em) and (min-height: 40em) and (prefers-reduced-motion: no-preference) {
  .hero-scroll i::after { animation: bajar 2.2s var(--curva) infinite; }
}
@keyframes bajar {
  from { transform: translateY(-100%); }
  to   { transform: translateY(250%); }
}

/* Escritorio: texto a la izquierda y la lumbre ENTERA a la derecha, con su
   forma vertical y casi a toda la altura, como una hoguera de la que salen
   las chispas. Así el vídeo se ve a su tamaño (sin estirarlo ni recortarlo). */
@media (min-width: 64em) {
  .hero {
    align-items: center;
    padding-bottom: clamp(4rem, 10vh, 7rem);
    padding-right: calc(min(40vw, 92svh * .706) + var(--gutter));
  }
  .hero-lumbre {
    inset: auto 3vw 0 auto;
    width: min(40vw, 92svh * .706);
    height: auto;
    aspect-ratio: 864 / 1224;
    -webkit-mask-image: radial-gradient(50% 88% at 50% 100%, #000 58%, transparent 100%);
    mask-image: radial-gradient(50% 88% at 50% 100%, #000 58%, transparent 100%);
  }
  .hero-lumbre img, .hero-lumbre video { object-position: 50% 50%; }
  .hero-velo {
    background:
      radial-gradient(55% 60% at 22% 55%, rgba(8, 8, 7, .6), transparent 80%),
      linear-gradient(to bottom, rgba(8, 8, 7, .6), transparent 20%);
  }
  .hero-contenido { max-width: 44rem; }
  .hero-lema { font-size: clamp(3.1rem, 7.6vw, 8.6rem); }
}
/* Escritorio con poca altura (portátiles): titular más bajo */
@media (min-width: 64em) and (max-height: 50em) {
  .hero-lema { font-size: clamp(3.1rem, min(7.6vw, 13vh), 8.6rem); }
  .hero-sub { margin-top: 1.4rem; }
}

/* ---------- Secciones ---------- */
.seccion {
  position: relative;
  padding-block: clamp(5rem, 3rem + 9vw, 10rem);
}

/* Aparición al hacer scroll (solo si hay JS y el usuario no pide menos movimiento) */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 1s var(--curva), transform 1.1s var(--curva);
  }
  .js [data-reveal].visible { opacity: 1; transform: none; }
  .js figure[data-reveal] img { transform: scale(1.06); transition: transform 1.6s var(--curva); }
  .js figure[data-reveal].visible img { transform: none; }
}

.arco { border-radius: var(--arco); overflow: hidden; }

/* ---------- 01 · La casa ---------- */
.casa { background: var(--carbon); }
.casa-grid {
  display: grid;
  gap: 3rem 1rem;
}
.casa-foto img { width: 100%; }
.casa-foto-alta { width: min(78%, 26rem); }
.casa-foto-ancha {
  width: 86%;
  margin-top: -18%;
  justify-self: end;
  border: .5rem solid var(--carbon);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8);
}
.sellos {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.4rem;
  margin-top: 2.2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--linea);
}
.sellos li {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--marfil);
  font-size: var(--t-s);
  letter-spacing: .03em;
}
.sellos li::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--brasa);
  transform: rotate(45deg);
}
@media (min-width: 64em) {
  .casa-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
    row-gap: 0;
  }
  .casa-texto { grid-column: 1 / 7; grid-row: 1; padding-top: 4rem; }
  .casa-foto-alta { grid-column: 8 / 13; grid-row: 1 / 3; width: 100%; }
  .casa-foto-ancha { grid-column: 2 / 9; grid-row: 2; width: 100%; margin-top: 3rem; justify-self: stretch; position: relative; z-index: 1; }
}

/* ---------- 02 · Historia ---------- */
.historia {
  background:
    radial-gradient(80% 50% at 100% 0%, rgba(138, 42, 30, .16), transparent 70%),
    var(--carbon-2);
}
.historia-cita {
  max-width: 62rem;
  padding: 0;
  font-family: var(--f-titulo);
}
.historia-cita p {
  font-size: clamp(2.3rem, 1.2rem + 6vw, 6rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.historia-cita p::before { content: "“"; }
.historia-cita p::after { content: "”"; }
.historia-cita p::before, .historia-cita p::after { color: var(--cobre); }
.historia-grid {
  display: grid;
  gap: 2.5rem;
  margin-top: clamp(3.5rem, 8vw, 7rem);
}
.historia-foto img { width: 100%; }
.historia-foto-alta { width: min(64%, 22rem); }
.historia-texto p + p, .historia-texto .titulo-l + p { margin-top: 1.2rem; }
.historia-texto p:not(.num) { color: var(--marfil-2); max-width: 36rem; }
.historia-texto .titulo-l { margin-bottom: 1.6rem; }
@media (min-width: 64em) {
  .historia-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 3rem 0;
    align-items: center;
  }
  .historia-foto-alta { grid-column: 1 / 5; grid-row: 1 / 3; width: 100%; align-self: start; }
  .historia-texto { grid-column: 6 / 12; grid-row: 1; }
  .historia-foto-ancha { grid-column: 6 / 13; grid-row: 2; }
}

/* ---------- 03 · La cocina y el fuego ---------- */
.cocina {
  background:
    radial-gradient(70% 40% at 50% 0%, rgba(209, 138, 66, .12), transparent 70%),
    var(--negro);
}
.cocina-cabecera { max-width: 54rem; }
.secuencia { margin-top: clamp(3rem, 8vw, 6rem); }
.secuencia-visual { display: none; }
.pasos { display: grid; gap: 4rem; counter-reset: paso; }
.paso-foto {
  margin-bottom: 1.6rem;
  overflow: hidden;
  border-radius: 2px;
}
.paso-foto img, .paso-foto video { display: block; width: 100%; height: auto; }
.paso-foto video { aspect-ratio: 576 / 816; object-fit: cover; }
.paso:first-child .paso-foto { width: min(82%, 24rem); border-radius: var(--arco); }
.paso-foto--alta { width: min(82%, 24rem); }
.paso-num {
  display: block;
  color: var(--cobre);
  font-family: var(--f-titulo);
  font-size: 1.1rem;
  font-style: italic;
  letter-spacing: .1em;
}
.paso h3 {
  margin: .4rem 0 .9rem;
  font-family: var(--f-titulo);
  font-size: clamp(2rem, 1.5rem + 2.5vw, 3.4rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.015em;
}
.paso p { max-width: 30rem; color: var(--marfil-2); font-size: var(--t-l); line-height: 1.55; }
.paso .enlace-flecha { margin-top: 1.6rem; }

@media (min-width: 64em) {
  .secuencia {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(3rem, 7vw, 8rem);
  }
  .secuencia-visual {
    display: block;
    position: sticky;
    top: calc(var(--cabecera) + 4vh);
    height: calc(100vh - var(--cabecera) - 10vh);
    max-height: 46rem;
  }
  .secuencia-marco {
    position: relative;
    height: 100%;
    max-width: 30rem;
    background: var(--carbon);
    box-shadow: 0 40px 120px -40px rgba(233, 140, 60, .3);
  }
  .secuencia-marco > * {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.05);
    transition: opacity 1s var(--curva), transform 1.6s var(--curva);
  }
  .secuencia-marco > .activa { opacity: 1; transform: none; }
  .pasos { gap: 0; }
  .paso {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 78vh;
    padding-block: 4rem;
    opacity: .35;
    transition: opacity .6s var(--curva);
  }
  .paso.activo { opacity: 1; }
  .paso-foto { display: none; }
}

/* ---------- 04 · La carta (sección clara, papel de carta) ---------- */
.carta {
  background: var(--marfil);
  color: var(--carbon);
}
.carta .num { color: var(--ladrillo); }
.carta .entradilla { color: var(--gris-papel); margin-top: 0; }
.carta-cabecera {
  display: grid;
  gap: 1.6rem;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}
.carta-encargo {
  max-width: 32rem;
  margin-top: 1rem;
  padding-left: 1rem;
  border-left: 2px solid var(--ladrillo);
  color: var(--carbon);
  font-size: var(--t-s);
}
@media (min-width: 56em) {
  .carta-cabecera { grid-template-columns: 1fr 1fr; align-items: end; }
}

.carta-tabs {
  position: relative;
  display: flex;
  gap: .25rem;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  border-bottom: 1px solid var(--linea-papel);
}
.carta-tabs::-webkit-scrollbar { display: none; }
.carta-tab {
  position: relative;
  flex: 0 0 auto;
  min-height: 3rem;
  padding: .6rem 1rem;
  border: 0;
  background: none;
  color: var(--gris-papel);
  font-family: var(--f-titulo);
  font-size: 1.15rem;
  font-weight: 400;
  scroll-snap-align: start;
  transition: color .25s;
}
.carta-tab::after {
  content: "";
  position: absolute;
  left: 1rem; right: 1rem; bottom: -1px;
  height: 2px;
  background: var(--ladrillo);
  transform: scaleX(0);
  transition: transform .35s var(--curva);
}
.carta-tab:hover { color: var(--carbon); }
.carta-tab[aria-selected="true"] { color: var(--ladrillo); }
.carta-tab[aria-selected="true"]::after { transform: scaleX(1); }
.carta-tab:focus-visible { outline-color: var(--ladrillo); outline-offset: -3px; }

.carta-panel { padding-top: 1rem; }
.carta-panel:focus-visible { outline-color: var(--ladrillo); }
.carta-lista { display: grid; column-gap: 4rem; }
@media (min-width: 56em) {
  .carta-lista { grid-template-columns: 1fr 1fr; }
}
.plato {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .2rem 1.25rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--linea-papel);
}
.plato-nombre {
  font-family: var(--f-titulo);
  font-size: 1.15rem;
  font-weight: 450;
  font-variation-settings: "opsz" 24;
  line-height: 1.3;
}
.plato.destacado .plato-nombre { color: var(--ladrillo); font-style: italic; }
.plato-desc {
  grid-column: 1;
  color: var(--gris-papel);
  font-size: var(--t-s);
  line-height: 1.45;
}
.plato-precios {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  align-content: start;
  justify-items: end;
  gap: .15rem;
  text-align: right;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.plato-precio { font-weight: 600; font-size: 1rem; }
.plato-precio small {
  margin-right: .4rem;
  color: var(--gris-papel);
  font-size: .8rem;
  font-weight: 400;
}
.carta-grupo + .carta-grupo { margin-top: 2.5rem; }
.carta-grupo h3 {
  margin-top: 1.5rem;
  font-family: var(--f-texto);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ladrillo);
}
.carta-pie {
  display: grid;
  gap: .6rem;
  margin-top: 2.5rem;
  color: var(--gris-papel);
  font-size: var(--t-s);
}
.carta-alergenos { color: var(--carbon); font-weight: 500; }
.carta-noscript a { color: var(--ladrillo); }

/* ---------- 05 · Reservas ---------- */
.reservas {
  background:
    radial-gradient(60% 60% at 85% 100%, rgba(209, 138, 66, .2), transparent 70%),
    radial-gradient(40% 40% at 0% 0%, rgba(138, 42, 30, .2), transparent 70%),
    var(--carbon);
}
.reservas-grid { display: grid; gap: 2.5rem; }
.reservas-datos .datos { margin-top: 0; }
@media (min-width: 64em) {
  .reservas-datos .datos { margin-top: 2.2rem; }
}
.datos {
  display: grid;
  gap: 1.25rem;
  margin-top: 2.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--linea);
}
.datos dt {
  margin-bottom: .3rem;
  color: var(--brasa);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.datos dd { color: var(--marfil); font-size: var(--t-l); line-height: 1.45; }
.datos dd a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  text-decoration: underline;
  text-decoration-color: rgba(241, 232, 218, .3);
  text-underline-offset: .25em;
}
.datos dd a:hover { text-decoration-color: var(--brasa); }
.horario span { display: block; }
.horario .horas { color: var(--marfil-2); font-size: var(--t-m); }
.horario span + span:not(.horas) { margin-top: .5rem; }
.reservas-encargo {
  max-width: 30rem;
  margin-top: 1.8rem;
  color: var(--marfil-2);
  font-size: var(--t-s);
}
.reserva-marco {
  position: relative;
  min-height: 26rem;
  padding: clamp(.6rem, 2vw, 1rem);
  border: 1px solid var(--linea);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(25, 22, 19, .92), rgba(8, 8, 7, .92));
  box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .9);
}
.reserva-portada {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  min-height: 24rem;
  padding: 2.5rem 1.25rem;
  text-align: center;
}
.reserva-arco {
  position: relative;
  width: 7.5rem;
  height: 8.5rem;
  margin-bottom: .6rem;
  border: 1px solid rgba(241, 232, 218, .3);
  border-bottom: 0;
  border-radius: var(--arco);
  overflow: hidden;
}
.reserva-arco::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -30%;
  width: 140%; height: 90%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 190, 110, .9), rgba(209, 138, 66, .45) 45%, transparent 75%);
  transform: translateX(-50%);
}
@media (prefers-reduced-motion: no-preference) {
  .reserva-arco::after { animation: latido 4.5s ease-in-out infinite; }
}
.reserva-aviso { max-width: 24rem; color: var(--gris); font-size: var(--t-s); }
.reserva-iframe {
  display: block;
  width: 100%;
  min-height: 34rem; /* el widget de DISH ocupa unos 410 px en sus dos pasos */
  border: 0;
  border-radius: 2px;
  background: #fff;
}
.reserva-cargando, .reserva-error {
  padding: 1rem;
  color: var(--marfil-2);
  font-size: var(--t-s);
  text-align: center;
}
.reserva-alternativas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  padding: .9rem .4rem .2rem;
  font-size: var(--t-s);
}
.reserva-alternativas a:not(.enlace-flecha) {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--marfil-2);
}
@media (min-width: 64em) {
  .reservas-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto 1fr;
    gap: 0 clamp(3rem, 6vw, 7rem);
    align-items: start;
  }
  .reservas-info { grid-column: 1; grid-row: 1; }
  .reservas-datos { grid-column: 1; grid-row: 2; }
  .reserva-marco { grid-column: 2; grid-row: 1 / 3; }
}

/* ---------- 06 · Galería (columnas tipo masonry: no recorta las fotos) ---------- */
.galeria { background: var(--carbon); padding-top: 0; }
.galeria-cabecera { margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.galeria-grid {
  columns: 2;
  column-gap: .75rem;
}
.galeria-grid li {
  break-inside: avoid;
  margin-bottom: .75rem;
}
.galeria-item {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--carbon-2);
  overflow: hidden;
  cursor: zoom-in;
}
.galeria-item img {
  width: 100%;
  transition: transform 1s var(--curva), filter .6s;
  filter: saturate(.92);
}
.galeria-item::after {
  content: "+";
  position: absolute;
  right: .6rem; bottom: .6rem;
  display: grid;
  place-items: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  background: rgba(8, 8, 7, .6);
  color: var(--marfil);
  font-size: 1.2rem;
  line-height: 1;
  opacity: .85;
  transition: background-color .3s, opacity .3s;
}
.galeria-item:hover img { transform: scale(1.04); filter: none; }
.galeria-item:hover::after { background: var(--ambar); color: var(--negro); opacity: 1; }
@media (min-width: 56em) {
  .galeria-grid { columns: 3; column-gap: 1.25rem; }
  .galeria-grid li { margin-bottom: 1.25rem; }
  .galeria-grid li:nth-child(3n + 2) { padding-top: 0; }
}

/* ---------- 07 · Opiniones ---------- */
.resenas {
  background: var(--carbon);
  border-top: 1px solid var(--linea);
}
.resenas-cabecera { max-width: 44rem; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.resenas-lista { display: grid; gap: 2.8rem; }
.resena {
  position: relative;
  padding-left: 1.4rem;
  border-left: 1px solid var(--cobre);
}
.resena p {
  font-family: var(--f-titulo);
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.38;
  color: var(--marfil);
}
.resena footer {
  margin-top: 1rem;
  color: var(--gris);
  font-size: var(--t-s);
  letter-spacing: .04em;
}
.resena cite { font-style: normal; color: var(--marfil-2); font-weight: 600; }
.resenas-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--linea);
}
.resenas-nota { color: var(--gris); font-size: var(--t-s); max-width: 34rem; }
@media (min-width: 56em) {
  .resenas-lista { grid-template-columns: 1fr 1fr; column-gap: clamp(3rem, 6vw, 6rem); row-gap: 3.5rem; }
  .resena:nth-child(even) { margin-top: 5rem; }
}

/* ---------- 08 · Contacto ---------- */
.contacto {
  background:
    radial-gradient(60% 50% at 0% 100%, rgba(209, 138, 66, .12), transparent 70%),
    var(--carbon-2);
}
.contacto-grid { display: grid; gap: 3rem; }
.contacto-visita { max-width: 32rem; margin-top: 1.8rem; color: var(--marfil-2); font-size: var(--t-s); }
.contacto-botones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.contacto-botones .btn { flex: 1 1 10rem; }
.mapa {
  position: relative;
  min-height: 22rem;
  border: 1px solid var(--linea);
  border-radius: 4px;
  overflow: hidden;
  background:
    repeating-linear-gradient(0deg, rgba(241, 232, 218, .04) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(241, 232, 218, .04) 0 1px, transparent 1px 48px),
    var(--carbon);
}
.mapa-portada {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  height: 100%;
  min-height: 22rem;
  padding: 2rem 1.25rem;
  text-align: center;
}
.mapa-titulo { font-family: var(--f-titulo); font-size: 1.5rem; font-weight: 300; }
.mapa-texto { max-width: 22rem; color: var(--gris); font-size: var(--t-s); }
.mapa iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 22rem;
  border: 0;
  filter: grayscale(.4) contrast(1.05);
}
@media (min-width: 64em) {
  .contacto-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(3rem, 6vw, 7rem); align-items: stretch; }
  .mapa, .mapa-portada, .mapa iframe { min-height: 32rem; }
  .contacto-botones .btn { flex: 0 0 auto; }
}

/* ---------- Pie ---------- */
.pie {
  position: relative;
  padding: clamp(4rem, 8vw, 6rem) 0 calc(2rem + env(safe-area-inset-bottom));
  background: var(--negro);
  color: var(--marfil-2);
  font-size: var(--t-s);
}
.pie::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cobre) 30%, var(--brasa) 50%, var(--cobre) 70%, transparent);
}
.pie-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--linea);
}
.pie-logo img { width: 200px; }
.pie-lema { flex: 1 1 14rem; color: var(--gris); }
.pie-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem 1.5rem;
  padding-block: 2.5rem;
}
.pie-titulo {
  margin-bottom: .9rem;
  color: var(--brasa);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.pie-cols li + li { margin-top: .15rem; }
.pie-cols a, .pie-cols button.enlace {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  min-width: 2.75rem;
  text-decoration: none;
  color: var(--marfil-2);
}
.pie-cols button.enlace { text-decoration: underline; text-decoration-color: rgba(241, 232, 218, .25); }
.pie-cols a:hover, .pie-cols button.enlace:hover { color: var(--marfil); }
.pie-cols li:not(:has(a, button)) { padding-block: .6rem; line-height: 1.45; }
.pie .idioma { flex-direction: column; align-items: flex-start; }
.pie .idioma button { padding-inline: 0; min-width: 0; border: 0; text-align: left; }
.pie .idioma button[aria-pressed="true"] { color: var(--marfil); text-decoration: underline; text-decoration-color: var(--brasa); text-underline-offset: .3em; }
.pie-base {
  display: grid;
  gap: .4rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--linea);
  color: var(--gris);
  font-size: .82rem;
}
.credito-dev { margin-top: .6rem; font-size: 12.5px; color: var(--gris); }
.credito-dev a { color: inherit; text-decoration: underline; }
.credito-dev a:hover { color: var(--marfil); }
.pie-arriba {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--marfil-2);
}
@media (min-width: 56em) {
  .pie-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pie-base { grid-template-columns: 1fr auto auto; align-items: center; gap: 2rem; }
  .credito-dev { margin-top: 0; }
}

/* ---------- Visor de la galería ---------- */
.visor {
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--marfil);
  overflow: hidden;
}
.visor::backdrop { background: rgba(8, 8, 7, .95); }
.visor[open] {
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
}
.visor-figura {
  display: grid;
  justify-items: center;
  gap: .9rem;
  width: 100%;
  padding: 4.5rem .75rem 6rem;
}
.visor-figura img {
  max-width: 100%;
  max-height: calc(100dvh - 11rem);
  width: auto;
  height: auto;
  object-fit: contain;
  touch-action: pan-y;
  user-select: none;
}
.visor-figura figcaption {
  max-width: 40rem;
  color: var(--marfil-2);
  font-size: var(--t-s);
  text-align: center;
}
.visor-cerrar, .visor-nav {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--linea);
  border-radius: 50%;
  background: rgba(17, 16, 14, .8);
  color: var(--marfil);
  font-size: 1.3rem;
  line-height: 1;
}
.visor-cerrar:hover, .visor-nav:hover { border-color: var(--brasa); color: var(--brasa); }
.visor-cerrar { top: max(1rem, env(safe-area-inset-top)); right: 1rem; font-size: 1.7rem; }
.visor-nav { bottom: max(1.25rem, env(safe-area-inset-bottom)); }
.visor-ant { left: calc(50% - 3.75rem); }
.visor-sig { right: calc(50% - 3.75rem); }
@media (min-width: 56em) {
  .visor-figura { padding: 4rem 6rem; }
  .visor-figura img { max-height: calc(100dvh - 9rem); }
  .visor-nav { top: 50%; bottom: auto; transform: translateY(-50%); }
  .visor-ant { left: 1.5rem; }
  .visor-sig { right: 1.5rem; }
}

/* ---------- Modales legales ---------- */
.modal {
  width: min(46rem, calc(100vw - 1.5rem));
  max-height: calc(100dvh - 1.5rem);
  padding: 0;
  border: 1px solid var(--linea);
  border-radius: 6px;
  background: var(--carbon-2);
  color: var(--marfil-2);
  overflow: hidden;
}
.modal::backdrop { background: rgba(8, 8, 7, .78); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal-cuerpo {
  max-height: calc(100dvh - 1.5rem);
  padding: 1.5rem clamp(1.1rem, 4vw, 2.5rem) 2.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  font-size: var(--t-s);
  line-height: 1.65;
}
.modal h2 {
  margin: .5rem 3rem 1.2rem 0;
  font-family: var(--f-titulo);
  font-size: clamp(1.7rem, 1.3rem + 2vw, 2.4rem);
  font-weight: 300;
  color: var(--marfil);
  line-height: 1.1;
}
.modal h3 {
  margin: 1.8rem 0 .5rem;
  color: var(--brasa);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.modal p + p { margin-top: .8rem; }
.modal ul { display: grid; gap: .6rem; margin-top: .8rem; padding-left: 1rem; list-style: disc; }
.modal .legal-datos { list-style: none; padding-left: 0; }
.modal strong { color: var(--marfil); font-weight: 600; }
.modal a { color: var(--brasa); overflow-wrap: anywhere; }
.modal-cerrar {
  position: sticky;
  top: 0;
  float: right;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  margin: -.25rem -.5rem 0 0;
  border: 1px solid var(--linea);
  border-radius: 50%;
  background: var(--carbon-3);
  color: var(--marfil);
  font-size: 1.6rem;
  line-height: 1;
}
.modal-cerrar:hover { border-color: var(--brasa); color: var(--brasa); }
.legal-nota {
  margin-bottom: 1rem;
  padding: .8rem 1rem;
  border-left: 2px solid var(--brasa);
  background: rgba(241, 232, 218, .04);
}
.pendiente {
  padding: .1rem .35rem;
  background: rgba(233, 165, 90, .15);
  color: var(--brasa);
}
.tabla-scroll { margin-top: 1rem; overflow-x: auto; }
.tabla-cookies { width: 100%; border-collapse: collapse; font-size: .85rem; }
.tabla-cookies th, .tabla-cookies td {
  padding: .6rem .5rem;
  border-bottom: 1px solid var(--linea);
  text-align: left;
  vertical-align: top;
}
.tabla-cookies th { color: var(--marfil); font-weight: 600; }
.tabla-cookies code { overflow-wrap: anywhere; color: var(--marfil); font-size: .8rem; }

/* ---------- Banner de cookies ---------- */
.cookie-banner {
  position: fixed;
  left: .75rem;
  right: .75rem;
  bottom: calc(.75rem + env(safe-area-inset-bottom));
  z-index: 150;
  max-width: 34rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--linea);
  border-radius: 6px;
  background: rgba(25, 22, 19, .97);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .9);
  font-size: .84rem;
  line-height: 1.45;
}
.cookie-titulo { margin-bottom: .4rem; color: var(--marfil); font-weight: 600; }
.cookie-texto { color: var(--marfil-2); }
.cookie-botones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1rem;
  margin-top: .8rem;
}
.btn-cookie {
  --alto: 2.75rem;
  flex: 1 1 7rem;
  padding: 0 1.2rem;
  border-color: rgba(241, 232, 218, .45);
  background: transparent;
  color: var(--marfil);
}
.btn-cookie:hover { border-color: var(--marfil); background: rgba(241, 232, 218, .08); }
.cookie-botones .enlace { min-height: 2.75rem; color: var(--marfil-2); font-size: .84rem; }
@media (min-width: 40em) {
  .cookie-banner { left: 1.25rem; right: auto; bottom: 1.25rem; }
  .btn-cookie { flex: 0 0 auto; }
}

/* Cambio de idioma: fundido corto */
@media (prefers-reduced-motion: no-preference) {
  main, .pie, .menu-movil-lista { transition: opacity .18s ease; }
  html.cambiando main, html.cambiando .pie { opacity: .35; }
}