/* Justyloki del Mercat — hoja única.
   Anclas de identidad: rock (cartel de concierto, setlist, entrada), oro (barra
   y estantería doradas, marcos de los pósters), Mercat (pizarra de precios). */

/* ---------- Fuentes (locales, swap) ---------- */
/* Cinzel: la tipografía del logo (variable 400–900, licencia OFL en assets/fonts/OFL-cinzel.txt) */
@font-face { font-family: "Cinzel"; src: url("../assets/fonts/cinzel-var.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("../assets/fonts/switzer-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("../assets/fonts/switzer-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("../assets/fonts/switzer-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  --negro: #0b0a08;
  --negro-2: #12100c;
  --negro-3: #1a1712;
  --oro: #c9a14a;
  --oro-claro: #e2c27a;
  --oro-oscuro: #7d6430;
  --hueso: #ece4d2;
  --apagado: #a39a88;
  --linea: rgb(201 161 74 / 0.22);
  --linea-fuerte: rgb(201 161 74 / 0.5);

  --f-display: "Cinzel", "Trajan Pro", Georgia, "Times New Roman", serif;
  --f-texto: "Switzer", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --margen: clamp(1.25rem, 4vw, 3rem);
  --ancho: 76rem;
  --seccion: clamp(4.5rem, 10vw, 8.5rem);
  --alto-cabecera: 4.5rem;

  --curva: cubic-bezier(0.2, 0.7, 0.2, 1);
  --rapido: 0.2s;
  --lento: 0.7s;

  color-scheme: dark;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--alto-cabecera) + 1rem); }
body, h1, h2, h3, p, figure, dl, dd, ul, ol, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
address { font-style: normal; }
[hidden] { display: none !important; }
/* Lo que gira o se desplaza al entrar (entrada de almuerzo) nunca crea scroll lateral; clip no rompe el sticky */
main { overflow-x: clip; }

body {
  background: var(--negro);
  color: var(--hueso);
  font-family: var(--f-texto);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
  overflow-x: clip;
}
h1, h2, h3 { font-weight: 400; }

/* Grano de película: textura de póster impreso, muy por debajo del umbral de lectura */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

::selection { background: var(--oro); color: var(--negro); }

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

.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.saltar {
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  background: var(--oro); color: var(--negro); padding: 0.7rem 1rem; font-weight: 600; text-decoration: none;
  transition: top var(--rapido);
}
.saltar:focus { top: 1rem; }

.envoltorio { width: min(100% - 2 * var(--margen), var(--ancho)); margin-inline: auto; }
.envoltorio--estrecho { width: min(100% - 2 * var(--margen), 46rem); margin-inline: auto; }

/* ---------- Tipografía ---------- */
.antetitulo {
  display: flex; align-items: center; gap: 0.85rem;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--oro);
}
.antetitulo::before { content: ""; width: 2.25rem; height: 1px; background: currentColor; flex: none; }

.titulo-seccion {
  font-family: var(--f-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.4rem, 6.2vw, 2.6rem); line-height: 1.1; letter-spacing: 0.01em;
  margin-top: 1rem; text-wrap: balance;
}
/* En escritorio los títulos viven en columnas: el tamaño garantiza que cada línea (blanca / dorada) quepa entera */
@media (min-width: 56rem) { .titulo-seccion { font-size: clamp(2rem, 3.6vw, 3rem); } }
.titulo-seccion em, .pagina-titulo em { display: block; font-style: normal; color: var(--oro); }

.seccion-entradilla, .pagina-entradilla {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--apagado); max-width: 38rem; margin-top: 1.25rem; text-wrap: pretty;
}

p { text-wrap: pretty; }

.enlace-flecha {
  display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 2rem;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--oro); text-decoration: none;
  padding-block: 0.5rem; border-bottom: 1px solid var(--linea-fuerte);
  transition: color var(--rapido), border-color var(--rapido);
}
.enlace-flecha::after { content: "→"; font-size: 1.1em; transition: transform 0.3s var(--curva); }
.enlace-flecha:hover { color: var(--oro-claro); border-color: var(--oro-claro); }
.enlace-flecha:hover::after { transform: translateX(0.35rem); }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 3.25rem; padding: 0.85rem 1.6rem;
  font-size: 0.85rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
  border: 1px solid var(--oro); border-radius: 2px;
  transition: transform var(--rapido) var(--curva), background-color var(--rapido), color var(--rapido), box-shadow var(--rapido);
}
.boton:hover { transform: translateY(-2px); box-shadow: 0 0.75rem 1.75rem -0.75rem rgb(201 161 74 / 0.55); }
.boton:active { transform: translateY(0); box-shadow: none; }
.boton--oro { background: var(--oro); color: var(--negro); }
.boton--oro:hover { background: var(--oro-claro); border-color: var(--oro-claro); }
.boton--linea { color: var(--hueso); background: transparent; border-color: var(--linea-fuerte); }
.boton--linea:hover { border-color: var(--oro); color: var(--oro-claro); }
.boton--peq { min-height: 2.6rem; padding: 0.55rem 1.1rem; font-size: 0.75rem; }
.boton .i { width: 1.15rem; height: 1.15rem; flex: none; }

.i { width: 1.25rem; height: 1.25rem; fill: currentColor; }

/* ---------- Aviso (datos/actualizable.json) ---------- */
.aviso { display: block; background: var(--oro); color: var(--negro); font-size: 0.8rem; font-weight: 500; text-decoration: none; transition: background-color var(--rapido); }
a.aviso:hover { background: var(--oro-claro); }
.aviso-texto { display: block; padding-block: 0.55rem; text-align: center; text-wrap: balance; }
.aviso-cta { display: none; margin-left: 0.75rem; font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }
.aviso-cta::after { content: " →"; }
@media (min-width: 40rem) { .aviso { font-size: 0.85rem; } .aviso-cta { display: inline; } }

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 70;
  background: rgb(11 10 8 / 0.92);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s, background-color 0.25s;
}
@supports (backdrop-filter: blur(1px)) {
  .cabecera { background: rgb(11 10 8 / 0.78); backdrop-filter: blur(10px) saturate(1.2); }
}
.cabecera.compacta { border-color: var(--linea); }
.cabecera-fila { display: flex; align-items: center; gap: 1.5rem; min-height: var(--alto-cabecera); transition: min-height 0.25s; }
.cabecera.compacta .cabecera-fila { min-height: 3.75rem; }

.marca { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; margin-right: auto; }
.marca-pez {
  width: 2.6rem; height: 2.6rem; object-fit: contain; padding: 0.3rem;
  border: 1px solid var(--linea-fuerte); border-radius: 50%;
  transition: transform 0.5s var(--curva);
}
.marca:hover .marca-pez { transform: rotate(-12deg); }
.marca-textos { display: grid; justify-items: center; gap: 0.2rem; }
.marca-nombre { font-family: var(--f-display); font-weight: 700; font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1; }
.marca-del { font-family: var(--f-display); font-weight: 600; font-size: 0.56rem; text-transform: uppercase; letter-spacing: 0.34em; margin-right: -0.34em; color: var(--oro); line-height: 1; }

.nav { display: none; }
.nav-lista { display: flex; gap: 2rem; }
.nav-lista a {
  position: relative; display: block; padding-block: 0.5rem;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none;
  color: var(--hueso); transition: color var(--rapido);
}
.nav-lista a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.1rem; height: 1px; background: var(--oro);
  transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--curva);
}
.nav-lista a:hover { color: var(--oro-claro); }
.nav-lista a:hover::after, .nav-lista a[aria-current="page"]::after { transform: scaleX(1); }
.nav-lista a[aria-current="page"] { color: var(--oro); }

.estado {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--apagado);
  opacity: 0; transition: opacity 0.5s;
}
.estado.listo { opacity: 1; }
.estado-punto { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--apagado); flex: none; position: relative; }
.estado.abierto { color: var(--hueso); }
.estado.abierto .estado-punto { background: #7bc47f; }
.estado.abierto .estado-punto::after {
  content: ""; position: absolute; inset: -0.3rem; border-radius: 50%; border: 1px solid #7bc47f;
  animation: latido 2.4s ease-out infinite;
}
.cabecera .estado { display: none; min-width: 9.5rem; }
.cabecera-cta { display: none; }

.menu-boton { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; margin-right: -0.5rem; }
.menu-boton-barras, .menu-boton-barras::before, .menu-boton-barras::after {
  display: block; width: 1.6rem; height: 2px; background: var(--hueso); transition: transform 0.3s var(--curva), opacity 0.2s;
}
.menu-boton-barras { position: relative; }
.menu-boton-barras::before, .menu-boton-barras::after { content: ""; position: absolute; left: 0; }
.menu-boton-barras::before { top: -0.45rem; }
.menu-boton-barras::after { top: 0.45rem; width: 1.05rem; }
.menu-boton[aria-expanded="true"] .menu-boton-barras { background: transparent; }
.menu-boton[aria-expanded="true"] .menu-boton-barras::before { transform: translateY(0.45rem) rotate(45deg); }
.menu-boton[aria-expanded="true"] .menu-boton-barras::after { width: 1.6rem; transform: translateY(-0.45rem) rotate(-45deg); }

.menu-movil {
  position: fixed; inset: 0; z-index: 65;
  display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
  padding: calc(var(--alto-cabecera) + 2rem) var(--margen) calc(5.6rem + env(safe-area-inset-bottom));
  background: var(--negro); overflow-y: auto;
}
.menu-movil-lista a {
  display: flex; align-items: baseline; gap: 1rem; padding-block: 0.35rem;
  font-family: var(--f-display); font-weight: 700; font-size: clamp(1.9rem, 9vw, 3rem); line-height: 1.2; text-transform: uppercase; text-decoration: none;
}
.menu-movil-lista a[aria-current="page"] { color: var(--oro); }
.menu-movil-lista .n { font-family: var(--f-display); font-weight: 400; font-size: 0.95rem; color: var(--oro); min-width: 1.8rem; }
.menu-movil-pie { display: grid; gap: 0.35rem; color: var(--apagado); font-size: 0.95rem; border-top: 1px solid var(--linea); padding-top: 1.5rem; }
.menu-movil-pie a { color: var(--hueso); text-decoration: none; }
html.menu-abierto { overflow: hidden; }

@media (min-width: 56rem) {
  .nav { display: block; }
  .cabecera .estado { display: inline-flex; }
  .cabecera-cta { display: inline-flex; }
  .menu-boton, .menu-movil { display: none !important; }
}
@media (min-width: 56rem) and (max-width: 68rem) {
  .cabecera .estado { display: none; }
  .nav-lista { gap: 1.4rem; }
}

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding-top: clamp(2.5rem, 6vw, 4.5rem); }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60rem 40rem at 82% 40%, rgb(201 161 74 / 0.13), transparent 60%),
    radial-gradient(40rem 30rem at 0% 100%, rgb(201 161 74 / 0.06), transparent 70%);
}
.hero-rejilla { display: grid; }

.hero-texto { container-type: inline-size; min-width: 0; }
.hero-marca { --fm: clamp(2.6rem, 14.5vw, 7.5rem); display: inline-grid; margin-top: 1.4rem; line-height: 1; }
@supports (font-size: 1cqi) {
  .hero-marca { --fm: clamp(2.6rem, 16.2cqi, 8rem); }
}
.hero-marca-nombre {
  display: block; overflow: hidden; padding-block: 0.06em 0.02em;
  font-family: var(--f-display); font-weight: 700; text-transform: uppercase;
  font-size: var(--fm); line-height: 1; letter-spacing: 0.02em;
}
/* Oro metalizado como el logo: degradado recortado al texto, estático */
.hero-marca-nombre > span {
  display: block;
  background: linear-gradient(180deg, #f7e5ad 0%, #e6c67c 28%, #b98d3b 50%, #e9cb84 68%, #f3dd9d 80%, #a47c2e 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-marca-del {
  justify-self: end; margin-top: 0.08em;
  font-family: var(--f-display); font-weight: 600; text-transform: uppercase; color: var(--hueso);
  font-size: calc(var(--fm) * 0.4); letter-spacing: 0.14em; margin-right: -0.14em; line-height: 1;
}

.hero-titulo {
  margin-top: clamp(1.75rem, 4vw, 2.5rem); max-width: 30rem;
  font-family: var(--f-texto); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.45; color: var(--oro-claro);
}
.hero-entradilla { margin-top: 0.75rem; max-width: 30rem; font-size: clamp(1.1rem, 1.7vw, 1.3rem); color: var(--hueso); }
.hero .estado { margin-top: 1.25rem; min-height: 1.5rem; }
.sello-celiaco {
  display: flex; align-items: center; gap: 0.55rem; width: fit-content;
  margin-top: 1.25rem; padding: 0.5rem 0.95rem 0.5rem 0.7rem;
  border: 1px solid var(--oro); border-radius: 999px; background: rgb(201 161 74 / 0.08);
  color: var(--oro-claro); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.3;
}
.sello-celiaco .i { width: 1.15rem; height: 1.15rem; flex: none; }
.pie-marca .sello-celiaco { margin-top: 1.5rem; }
/* En móvil reservar ya está en la barra fija: el hero solo tiene un botón, la guitarra */
.hero-acciones { display: none; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.75rem; }
@media (min-width: 56rem) { .hero-acciones { display: flex; } }

/* Escenario de la guitarra: el mástil se corta por arriba con un fundido; el cuerpo y el logo mandan */
.hero-visual {
  --w: min(86vw, 25rem);
  position: relative; height: calc(var(--w) * 1.42); margin-top: -2rem;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 34%);
  mask-image: linear-gradient(to bottom, transparent, #000 34%);
}
/* Guitarra del cliente en trazo dorado (hero y 404) */
.guitarra-trazo { fill: none; stroke: var(--oro); stroke-width: 12; stroke-linejoin: round; opacity: 0.75; }
.guitarra-relleno { fill: var(--oro); fill-rule: evenodd; stroke: none; opacity: 0.05; }
@media (prefers-reduced-motion: no-preference) {
  .guitarra-trazo { stroke-dasharray: 1; stroke-dashoffset: 1; animation: dibuja 4.6s cubic-bezier(0.65, 0, 0.35, 1) 0.6s forwards; }
  .guitarra-relleno { opacity: 0; animation: aparece 2s ease 4.2s forwards; }
}
@keyframes dibuja { to { stroke-dashoffset: 0; } }
@keyframes aparece { to { opacity: 0.05; } }

/* La guitarra de la mesa: el modelo impreso del cliente, de pie, con el logo NFC en el cuerpo */
.mesa { position: absolute; left: 50%; bottom: 1.75rem; width: var(--w); aspect-ratio: var(--proporcion); transform: translateX(-50%); }
.mesa::before {
  content: ""; position: absolute; left: 6%; right: 6%; bottom: -3%; height: 9%; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(0 0 0 / 0.75), transparent); filter: blur(6px);
}
.mesa-guitarra { position: relative; width: 100%; height: 100%; overflow: visible; }
.mesa-base { fill: url(#mesa-cuerpo); stroke: none; }
.mesa-hueco { fill: url(#mesa-luz); stroke: none; }
.mesa .guitarra-trazo { stroke-width: 14; opacity: 0.9; }

.mesa-logo {
  position: absolute; left: var(--x); top: var(--y); width: 66%; aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%; text-decoration: none; color: var(--oro);
}
.mesa-logo-in { position: absolute; inset: 0; display: block; }
/* Fondo del sello: el aro de texto no se cruza con las líneas de la guitarra */
.mesa-logo-in::before {
  content: ""; position: absolute; inset: -16%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(11 10 8 / 0.97) 0%, rgb(11 10 8 / 0.94) 64%, rgb(11 10 8 / 0.6) 80%, rgb(11 10 8 / 0) 100%);
}
.mesa-anillo { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mesa-anillo { fill: currentColor; transition: transform 0.6s var(--curva); }
.mesa-anillo text { font-family: var(--f-display); text-transform: uppercase; }
.mesa-anillo-sup { font-size: 17px; font-weight: 700; letter-spacing: 0.2em; }
.mesa-anillo-inf { font-size: 10px; font-weight: 600; letter-spacing: 0.22em; opacity: 0.8; }
.mesa-disco {
  position: absolute; inset: 17%; display: grid; place-items: center; border-radius: 50%;
  border: max(3px, 0.32rem) solid transparent;
  background:
    radial-gradient(circle at 38% 30%, #2a241b, #0a0907 62%) padding-box,
    conic-gradient(from 200deg, #7d6430, #f1d995, #a8823a, #e9c878, #6f5528, #f1d995, #7d6430) border-box;
  box-shadow: 0 0.75rem 1.75rem -0.5rem rgb(0 0 0 / 0.85), inset 0 0 0 1px rgb(0 0 0 / 0.6);
  transition: transform 0.35s var(--curva), box-shadow 0.35s var(--curva);
}
.mesa-disco img { width: 72%; height: auto; }
.mesa-disco::after {
  content: ""; position: absolute; inset: -9%; border-radius: 50%; border: 1px solid var(--oro); opacity: 0;
}
.mesa-logo:hover .mesa-disco, .mesa-logo:focus-visible .mesa-disco {
  transform: scale(1.06);
  box-shadow: 0 0 0 1px var(--oro-claro), 0 0 2.5rem -0.25rem rgb(201 161 74 / 0.55), 0 0.75rem 1.75rem -0.5rem rgb(0 0 0 / 0.85);
}
.mesa-logo:hover, .mesa-logo:focus-visible { color: var(--oro-claro); }
.mesa-logo:hover .mesa-anillo, .mesa-logo:focus-visible .mesa-anillo { transform: rotate(-6deg) scale(1.03); }
.mesa-logo:active .mesa-disco { transform: scale(0.97); transition-duration: 0.1s; }
.mesa-logo:focus-visible { outline-offset: 6px; }


@media (min-width: 56rem) {
  .hero { min-height: calc(100svh - var(--alto-cabecera) - 2.25rem); padding: 0; display: grid; }
  .hero-rejilla { grid-template-columns: 1.05fr 0.95fr; column-gap: 2rem; }
  .hero-texto { align-self: center; padding-block: 3rem 4rem; }
  .hero-visual { --w: min(36vw, 34rem, 64svh); height: auto; margin-top: 0; }
  .mesa { bottom: 2.5rem; }
}

/* Coreografía de entrada */
@media (prefers-reduced-motion: no-preference) {
  .hero .antetitulo, .hero-marca-del, .hero-titulo, .hero-entradilla, .hero-acciones {
    animation: sube 0.9s var(--curva) both;
  }
  .hero-marca-nombre > span { animation: emerge 1.1s var(--curva) 0.15s both; }
  .hero .antetitulo { animation-delay: 0.05s; }
  .hero-marca-del { animation-delay: 0.55s; }
  .hero-titulo { animation-delay: 0.75s; }
  .hero-entradilla { animation-delay: 0.85s; }
  .hero-acciones { animation-delay: 1s; }
  .mesa-base, .mesa-hueco { animation: aparece-entero 1.4s ease 0.2s both; }
  .mesa-logo-in { animation: entra-logo 0.9s var(--curva) 1.1s both; }
  .mesa-disco::after { animation: pulso 2.6s ease-out 1.8s infinite; }
}

/* ---------- Secciones ---------- */
.seccion { position: relative; padding-block: var(--seccion); }
.seccion--alt { background: var(--negro-2); }
.seccion--alt::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--linea-fuerte), transparent); }
.seccion-cabecera { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

/* Almuerzos + entrada de concierto */
.almuerzos-rejilla { display: grid; gap: clamp(3rem, 6vw, 5rem); align-items: center; }
.almuerzos-texto p:not(.antetitulo) { margin-top: 1.4rem; max-width: 34rem; color: var(--apagado); font-size: 1.12rem; }
.almuerzos-texto p strong { color: var(--hueso); font-weight: 500; }
@media (min-width: 56rem) { .almuerzos-rejilla { grid-template-columns: 0.85fr 1.15fr; } }

.ticket {
  --hueco: var(--negro-2);
  --giro: -1.5deg;
  position: relative; display: grid; grid-template-columns: 1fr; overflow: hidden;
  transform: rotate(var(--giro)); transition: transform 0.9s cubic-bezier(0.34, 1.4, 0.64, 1);
  background: var(--oro); color: var(--negro);
  background-image: linear-gradient(115deg, rgb(255 255 255 / 0.16), transparent 38%, transparent 62%, rgb(0 0 0 / 0.1));
  box-shadow: 0 2.5rem 4rem -2rem rgb(0 0 0 / 0.9);
}
.ticket-cuerpo { position: relative; padding: clamp(1.5rem, 4vw, 2.25rem); display: grid; gap: 0.35rem; }
.ticket-sello {
  position: absolute; bottom: clamp(1.25rem, 3vw, 1.75rem); right: clamp(1.25rem, 3vw, 1.75rem);
  display: grid; place-items: center; width: 4.6rem; aspect-ratio: 1; padding: 0.4rem; border-radius: 50%;
  border: 2px solid rgb(11 10 8 / 0.7); box-shadow: inset 0 0 0 3px var(--oro), inset 0 0 0 4px rgb(11 10 8 / 0.55);
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.12em; line-height: 1.2; text-align: center; text-transform: uppercase;
  color: rgb(11 10 8 / 0.82); transform: rotate(14deg);
}
.ticket-cuerpo::before { content: ""; position: absolute; inset: 0.6rem; border: 1px solid rgb(11 10 8 / 0.35); pointer-events: none; }
.ticket-presenta { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; }
.ticket-titulo { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.55rem, 4vw, 2.45rem); line-height: 1.02; margin-top: 0.4rem; text-wrap: balance; }
.ticket-incluye { font-size: 1.05rem; font-weight: 500; line-height: 1.3; }
.ticket-datos { display: flex; flex-wrap: wrap; margin-top: 1rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.ticket-datos span { padding: 0.35rem 0.75rem; border: 1px solid rgb(11 10 8 / 0.45); margin: 0 -1px -1px 0; }
.ticket-precio { font-family: var(--f-display); font-weight: 700; font-size: clamp(2.4rem, 6vw, 3.8rem); line-height: 1; margin-top: 0.75rem; }
.ticket-talon {
  position: relative; display: grid; gap: 0.3rem; align-content: start;
  padding: clamp(1.5rem, 4vw, 2.25rem); border-top: 2px dashed rgb(11 10 8 / 0.5);
}
.ticket-talon .ticket-titulo { font-size: clamp(1.2rem, 2.6vw, 1.45rem); margin-top: 0; }
.ticket-talon .ticket-incluye { font-size: 0.95rem; }
.ticket-talon .ticket-precio { font-size: clamp(1.9rem, 4vw, 2.4rem); }
.ticket-talon::after {
  content: ""; height: 2.6rem; margin-top: 1rem;
  background: repeating-linear-gradient(90deg, var(--negro) 0 2px, transparent 2px 4px, var(--negro) 4px 5px, transparent 5px 8px, var(--negro) 8px 11px, transparent 11px 13px);
  opacity: 0.8;
}
.ticket-cuerpo::after, .ticket-talon::before {
  content: ""; position: absolute; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--hueco);
}
/* muescas en los extremos del trepado (horizontal en móvil) */
.ticket-cuerpo::after { left: -0.85rem; bottom: -0.85rem; }
.ticket-talon::before { right: -0.85rem; top: -0.85rem; }

@media (min-width: 40rem) {
  .ticket { grid-template-columns: 1fr minmax(11rem, 0.42fr); }
  .ticket-talon { border-top: 0; border-left: 2px dashed rgb(11 10 8 / 0.5); }
  .ticket-cuerpo::after { left: auto; right: -0.85rem; top: -0.85rem; bottom: auto; }
  .ticket-talon::before { right: auto; left: -0.85rem; top: auto; bottom: -0.85rem; }
}
@media (min-width: 56rem) {
  .ticket { --giro: -2.2deg; }
  .ticket:hover { transform: rotate(0deg) translateY(-0.25rem); }
}
/* Brillo que recorre la entrada: da vida también en móvil, donde no hay hover */
.ticket::after {
  content: ""; position: absolute; top: -30%; bottom: -30%; left: 0; width: 35%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgb(255 248 220 / 0.38), transparent);
  transform: translateX(-160%) skewX(-14deg);
}
@media (prefers-reduced-motion: no-preference) {
  .js [data-revela]:not(.visible) .ticket { transform: rotate(-8deg) translateY(1.5rem) scale(0.94); }
  .visible .ticket::after { animation: brillo 6s ease-in-out 0.9s infinite; }
}
@keyframes brillo { 0% { transform: translateX(-160%) skewX(-14deg); } 22%, 100% { transform: translateX(420%) skewX(-14deg); } }

/* Los grandes éxitos (setlist) */
.seccion--exitos { overflow: hidden; }
.exitos-cabecera { display: grid; gap: 1rem; align-items: end; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
@media (min-width: 56rem) { .exitos-cabecera { grid-template-columns: 1fr auto; } .exitos-cabecera .enlace-flecha { margin-top: 0; } }
.exitos-lista { border-top: 1px solid var(--linea); counter-reset: exito; }
.exito-enlace {
  display: grid; grid-template-columns: 2.75rem 1fr auto; grid-template-areas: "n nombre precio" "n cat precio";
  column-gap: clamp(0.75rem, 2.5vw, 2rem); align-items: baseline;
  padding-block: clamp(1.1rem, 2.5vw, 1.75rem); border-bottom: 1px solid var(--linea);
  text-decoration: none; color: inherit;
}
.exito-n { grid-area: n; font-family: var(--f-display); font-weight: 400; font-size: clamp(1.1rem, 2.2vw, 1.7rem); color: var(--oro); line-height: 1; }
.exito-nombre {
  grid-area: nombre; font-family: var(--f-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.3rem, 3.4vw, 2.7rem); line-height: 1.1; text-wrap: balance;
  transition: transform 0.45s var(--curva), color var(--rapido);
}
.exito-cat { grid-area: cat; margin-top: 0.5rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--apagado); transition: transform 0.45s var(--curva); }
.exito-precio { grid-area: precio; align-self: center; font-family: var(--f-display); font-weight: 700; font-size: clamp(1.1rem, 2.2vw, 1.7rem); color: var(--oro); font-variant-numeric: tabular-nums; white-space: nowrap; }
.exito-enlace:hover .exito-nombre { color: var(--oro-claro); transform: translateX(0.5rem); }
.exito-enlace:hover .exito-cat { transform: translateX(0.5rem); }
@media (min-width: 56rem) { .exito-enlace { grid-template-columns: 5rem 1fr auto; } }

/* El local */
.local-rejilla { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); }
.local-texto p:not(.antetitulo) { margin-top: 1.25rem; color: var(--apagado); font-size: 1.12rem; max-width: 34rem; }
.local-texto p strong { color: var(--hueso); font-weight: 500; }
.foto { position: relative; isolation: isolate; }
.foto img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.86) saturate(0.85) sepia(0.12); }
.foto::before {
  content: ""; position: absolute; inset: 0.9rem -0.9rem -0.9rem 0.9rem; z-index: -1;
  border: 1px solid var(--linea-fuerte);
}
.foto figcaption {
  position: absolute; left: 0; bottom: 0; padding: 0.5rem 0.85rem;
  background: var(--negro); color: var(--oro);
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
}
.foto--barra { aspect-ratio: 7 / 5; }
.foto--pared { aspect-ratio: 4 / 5; width: min(100%, 26rem); justify-self: end; }
.foto--pared img { object-position: 50% 30%; }
@media (min-width: 56rem) {
  .local-rejilla { grid-template-columns: repeat(12, 1fr); grid-template-rows: auto auto; column-gap: 1.5rem; row-gap: 3.5rem; }
  .foto--barra { grid-column: 1 / 8; grid-row: 1; }
  .foto--pared { grid-column: 9 / 13; grid-row: 1 / 3; width: 100%; aspect-ratio: 1 / 2; margin-top: 6rem; }
  .local-texto { grid-column: 1 / 9; grid-row: 2; }
}

/* Bodega (portada) */
.seccion--bodega { overflow: hidden; isolation: isolate; }
.seccion--bodega .fondo {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%;
  filter: saturate(0.85);
}
.seccion--bodega::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgb(11 10 8 / 0.97) 0%, rgb(11 10 8 / 0.9) 45%, rgb(11 10 8 / 0.62) 100%);
}
.bodega-rejilla { display: grid; gap: 3rem; align-items: end; }
.bodega-rejilla p:not(.antetitulo) { margin-top: 1.25rem; color: var(--hueso); font-size: 1.12rem; max-width: 32rem; }
.cifras { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 3rem); }
.cifras li { display: grid; }
.cifra-n { font-family: var(--f-display); font-weight: 700; font-size: clamp(3rem, 7vw, 5.5rem); line-height: 1; color: var(--oro); }
.cifra-t { margin-top: 0.6rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--hueso); max-width: 9rem; }
@media (min-width: 56rem) { .bodega-rejilla { grid-template-columns: 1fr auto; } }

/* Horario (la gira semanal) */
.horario-rejilla { display: grid; gap: clamp(3rem, 6vw, 5rem); }
@media (min-width: 56rem) { .horario-rejilla { grid-template-columns: 1.15fr 0.85fr; align-items: start; } }
.horario { margin-top: 2rem; border-top: 1px solid var(--linea); }
.horario-fila {
  display: grid; grid-template-columns: minmax(8rem, 11rem) 1fr; gap: 1rem; align-items: baseline;
  padding-block: 0.9rem; border-bottom: 1px solid var(--linea);
}
.horario dt { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: clamp(0.98rem, 1.7vw, 1.15rem); letter-spacing: 0.04em; line-height: 1.2; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.horario dd { font-size: clamp(1rem, 1.8vw, 1.15rem); font-variant-numeric: tabular-nums; }
.horario-sep { color: var(--oro); }
.horario-fila--cerrado { color: var(--apagado); }
.horario-fila.es-hoy { color: var(--oro-claro); }
.hoy {
  font-family: var(--f-texto); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.18em;
  padding: 0.2rem 0.5rem; background: var(--oro); color: var(--negro); border-radius: 2px;
}
.nota { margin-top: 1.25rem; color: var(--apagado); font-size: 0.95rem; }
.nota strong { color: var(--oro); font-weight: 600; }

.tarjeta-reserva {
  position: relative; padding: clamp(1.75rem, 4vw, 2.75rem);
  border: 1px solid var(--linea-fuerte); background: var(--negro);
}
.tarjeta-reserva::before { content: ""; position: absolute; inset: 0.5rem; border: 1px solid var(--linea); pointer-events: none; }
.tarjeta-titulo { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1.1; }
.tarjeta-reserva > p { margin-top: 0.85rem; color: var(--apagado); }
.acciones-col { display: grid; gap: 0.75rem; margin-top: 1.75rem; position: relative; }
.tarjeta-dir { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--linea); font-size: 1.05rem; }
.tarjeta-dir .enlace-flecha { margin-top: 0.75rem; }

/* ---------- Páginas interiores ---------- */
.pagina-cabecera { position: relative; overflow: hidden; padding-block: clamp(3rem, 8vw, 6rem) clamp(2.5rem, 6vw, 4.5rem); border-bottom: 1px solid var(--linea); }
.pagina-cabecera::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(50rem 30rem at 85% 0%, rgb(201 161 74 / 0.12), transparent 65%);
}
.pagina-titulo {
  margin-top: 1rem; font-family: var(--f-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.9rem, 8.2vw, 6rem); line-height: 1.06; letter-spacing: 0.01em; text-wrap: balance;
}
.pagina-cabecera--foto { padding-block: clamp(5rem, 14vw, 10rem) clamp(2.5rem, 6vw, 4.5rem); isolation: isolate; }
.pagina-cabecera--foto .fondo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.pagina-cabecera--foto::before { z-index: -1; background: linear-gradient(180deg, rgb(11 10 8 / 0.55), rgb(11 10 8 / 0.94) 85%); }
.pagina-cabecera .pez-deco {
  position: absolute; right: var(--margen); bottom: -8%; width: clamp(8rem, 22vw, 17rem); opacity: 0.16; z-index: -1; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .pagina-cabecera .antetitulo, .pagina-titulo, .pagina-entradilla { animation: sube 0.9s var(--curva) both; }
  .pagina-titulo { animation-delay: 0.1s; }
  .pagina-entradilla { animation-delay: 0.25s; }
}

/* Índice de capítulos (carta y bodega) */
.indice {
  position: sticky; top: var(--alto-cabecera); z-index: 50;
  background: rgb(11 10 8 / 0.94); border-bottom: 1px solid var(--linea);
}
.cabecera.compacta ~ main .indice { top: 3.75rem; }
.indice-lista { display: flex; gap: 0.5rem; overflow-x: auto; scrollbar-width: none; padding-block: 0.7rem; }
.indice-lista::-webkit-scrollbar { display: none; }
.indice-lista a {
  display: block; white-space: nowrap; padding: 0.5rem 0.95rem; border: 1px solid var(--linea); border-radius: 2px;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--hueso);
  transition: background-color var(--rapido), color var(--rapido), border-color var(--rapido);
}
.indice-lista a:hover { border-color: var(--oro); color: var(--oro-claro); }
.indice-lista a.activo { background: var(--oro); border-color: var(--oro); color: var(--negro); }
.indice-lista .externo { color: var(--apagado); border-style: dashed; }

/* Capítulos y platos */
.capitulos { padding-block: clamp(3rem, 7vw, 5.5rem); display: grid; gap: clamp(3.5rem, 8vw, 6rem); }
.capitulo, .bodega-seccion { display: grid; gap: 1.75rem; scroll-margin-top: calc(var(--alto-cabecera) + 4.5rem); }
.capitulo-cabecera { display: flex; align-items: baseline; gap: 1rem; }
.capitulo-n { font-family: var(--f-display); font-weight: 400; color: var(--oro); font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1; }
.capitulo-titulo { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.45rem, 3.2vw, 2.3rem); line-height: 1.1; }
@media (min-width: 56rem) {
  .capitulo, .bodega-seccion { grid-template-columns: 0.75fr 1.6fr; gap: 3rem; align-items: start; }
  .capitulo-cabecera { position: sticky; top: calc(var(--alto-cabecera) + 5.5rem); flex-direction: column; gap: 0.75rem; }
  .capitulo-titulo { font-size: clamp(1.3rem, 2vw, 1.75rem); text-wrap: balance; }
}

.platos { display: grid; border-top: 1px solid var(--linea); }
.plato { padding-block: 1.05rem; border-bottom: 1px solid var(--linea); scroll-margin-top: calc(var(--alto-cabecera) + 5rem); }
.plato:target { background: linear-gradient(90deg, rgb(201 161 74 / 0.12), transparent); }
.plato-linea { display: flex; align-items: baseline; gap: 0.75rem; }
.plato-nombre { font-family: var(--f-texto); font-weight: 500; font-size: 1.12rem; line-height: 1.35; }
.plato-lider { flex: 1; min-width: 1.5rem; border-bottom: 1px dotted var(--linea-fuerte); transform: translateY(-0.3rem); }
.plato-precio { font-weight: 600; color: var(--oro); font-variant-numeric: tabular-nums; white-space: nowrap; }
.plato-desc { margin-top: 0.2rem; font-size: 0.95rem; color: var(--apagado); line-height: 1.4; }
.plato-medio { margin-top: 0.3rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--apagado); }
.plato-medio span { color: var(--oro); letter-spacing: 0.04em; margin-left: 0.25rem; }
.plato-alergenos { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.55rem; }
.plato-alergenos img { width: 1.25rem; height: 1.25rem; }

.capitulos--bocadillos { grid-template-columns: 1fr; }
.capitulo--bocadillos { grid-template-columns: 1fr !important; gap: 1.25rem; }
@media (min-width: 56rem) { .capitulos--bocadillos { grid-template-columns: 1fr 1fr; column-gap: 4rem; } }

.fuera-carta {
  display: grid; gap: 0.4rem; padding: 1.5rem 1.75rem; margin-top: 2rem;
  border: 1px solid var(--oro); background: rgb(201 161 74 / 0.06);
}
.fuera-carta .antetitulo { margin-bottom: 0.25rem; }
.fuera-carta-plato { font-family: var(--f-display); font-weight: 700; font-size: 1.45rem; text-transform: uppercase; line-height: 1.1; }

.leyenda { padding-block: clamp(2.5rem, 6vw, 4rem); border-top: 1px solid var(--linea); }
.leyenda-titulo { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--oro); }
.leyenda-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 0.75rem 1.5rem; margin-top: 1.25rem; font-size: 0.92rem; color: var(--apagado); }
.leyenda-lista li { display: flex; align-items: center; gap: 0.6rem; }
.leyenda-texto { margin-top: 1.5rem; font-size: 0.92rem; color: var(--apagado); max-width: 48rem; }

.notas { display: grid; gap: 0.4rem; margin-top: 1.5rem; color: var(--apagado); font-size: 0.95rem; }
.notas li { display: flex; gap: 0.6rem; }
.notas li::before { content: "✦"; color: var(--oro); font-size: 0.75em; transform: translateY(0.2em); }

.franja-enlace {
  display: grid; gap: 1.25rem; align-items: center; padding: clamp(1.5rem, 4vw, 2.25rem);
  border: 1px solid var(--linea-fuerte); text-decoration: none;
  transition: border-color var(--rapido), background-color var(--rapido);
}
.franja-enlace:hover { border-color: var(--oro); background: rgb(201 161 74 / 0.05); }
.franja-enlace strong { display: block; font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.15rem, 2.4vw, 1.6rem); line-height: 1.15; margin-bottom: 0.3rem; }
.franja-enlace span { color: var(--apagado); }
.franja-enlace .enlace-flecha { margin-top: 0; justify-self: start; }
@media (min-width: 40rem) { .franja-enlace { grid-template-columns: 1fr auto; } }

/* Almuerzos (página) */
.almuerzo-oferta { display: grid; gap: clamp(2.5rem, 5vw, 4rem); padding-block: clamp(3rem, 7vw, 5rem); align-items: center; }
.almuerzo-oferta .ticket { --hueco: var(--negro); }
@media (min-width: 56rem) { .almuerzo-oferta { grid-template-columns: 1.2fr 0.8fr; } }

/* Bodega (página) */
.bodega-grupos { display: grid; gap: 2rem 3rem; }
@media (min-width: 40rem) { .bodega-grupos { grid-template-columns: 1fr 1fr; } }
.bodega-origen { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--oro); padding-bottom: 0.6rem; border-bottom: 1px solid var(--linea-fuerte); }
.vino { display: flex; align-items: baseline; gap: 0.6rem; padding-block: 0.7rem; border-bottom: 1px solid var(--linea); }
.vino-nombre { font-weight: 500; }
.vino-nota { display: block; font-size: 0.9rem; color: var(--apagado); font-weight: 400; line-height: 1.35; }
.vino-precio { font-weight: 600; color: var(--oro); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Visítanos */
.acciones-grandes { display: grid; gap: 1rem; }
@media (min-width: 40rem) { .acciones-grandes { grid-template-columns: 1fr 1fr; } }
.accion-grande {
  position: relative; display: grid; gap: 0.6rem; padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--linea-fuerte); text-decoration: none;
  transition: transform var(--rapido) var(--curva), border-color var(--rapido), background-color var(--rapido);
}
.accion-grande:hover { transform: translateY(-3px); border-color: var(--oro); background: rgb(201 161 74 / 0.05); }
.accion-grande--oro { background: var(--oro); color: var(--negro); border-color: var(--oro); }
.accion-grande--oro:hover { background: var(--oro-claro); }
.accion-etiqueta { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
.accion-valor { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.5rem, 4vw, 2.4rem); line-height: 1.05; }
.accion-grande .i { position: absolute; right: 1.5rem; top: 1.5rem; width: 1.75rem; height: 1.75rem; }

.direccion-gigante { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.9rem, 6vw, 4.6rem); line-height: 1.05; margin-top: 1rem; }
.direccion-gigante span { display: block; font-weight: 600; color: var(--oro); font-size: 0.34em; letter-spacing: 0.3em; line-height: 1.3; margin-top: 0.7rem; }
.botonera { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }
.datos-contacto { display: grid; gap: 1.5rem; margin-top: 2.5rem; }
@media (min-width: 40rem) { .datos-contacto { grid-template-columns: repeat(3, 1fr); } }
.dato-etiqueta { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--oro); }
.dato-valor { margin-top: 0.35rem; overflow-wrap: anywhere; }
.dato-valor a { text-decoration-color: var(--linea-fuerte); text-underline-offset: 0.25em; }
.dato-valor a:hover { color: var(--oro-claro); }

/* Legal */
.pagina-legal { padding-block: clamp(3rem, 7vw, 5rem); }
.pagina-legal h2 { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: 1.2rem; margin-top: 2.5rem; color: var(--oro); }
.pagina-legal p, .pagina-legal ul { margin-top: 0.9rem; color: var(--apagado); }
.pagina-legal ul { list-style: disc; padding-left: 1.25rem; }
.pagina-legal strong { color: var(--hueso); font-weight: 500; }
.pagina-legal a { color: var(--hueso); text-underline-offset: 0.2em; }

/* 404 */
.error { position: relative; overflow: hidden; min-height: 70svh; display: grid; align-items: center; padding-block: 4rem; isolation: isolate; }
.error .guitarra { position: absolute; z-index: -1; width: 120%; max-width: none; left: -10%; top: 50%; transform: translateY(-50%) rotate(-10deg); opacity: 0.6; }
.error .botonera { margin-top: 2.5rem; }

/* ---------- Pie ---------- */
.pie { position: relative; overflow: hidden; background: var(--negro-2); border-top: 1px solid var(--linea); padding-top: clamp(3.5rem, 8vw, 5.5rem); }
.pie-rejilla { display: grid; gap: 2.5rem; }
@media (min-width: 40rem) { .pie-rejilla { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .pie-rejilla { grid-template-columns: 1.2fr 1fr 1fr 0.8fr; } }
.pie-marca img { width: 5.5rem; }
.pie-lema { margin-top: 1.25rem; font-size: 1.05rem; line-height: 1.45; max-width: 16rem; color: var(--hueso); }
.pie-titulo { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--oro); margin-bottom: 1rem; }
.pie-dir, .pie-horario, .pie-nav { display: grid; gap: 0.4rem; color: var(--apagado); font-size: 0.95rem; }
.pie a { text-decoration: none; transition: color var(--rapido); }
.pie a:hover { color: var(--oro-claro); }
.pie-dir a, .pie-nav a { color: var(--hueso); }
.pie-legal-fila {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  margin-top: 3.5rem; padding-block: 1.5rem; border-top: 1px solid var(--linea);
  font-size: 0.82rem; color: var(--apagado);
}
.pie-legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.pie-gigante {
  font-family: var(--f-display); font-weight: 700; text-transform: uppercase; text-align: center; white-space: nowrap;
  font-size: 15.5vw; line-height: 0.8; letter-spacing: 0.02em; color: var(--negro-3);
  margin-bottom: -0.1em; user-select: none; pointer-events: none;
}

/* ---------- Barra de acciones (móvil) ---------- */
.barra-movil {
  position: fixed; inset: auto 0 0; z-index: 80;
  display: grid; grid-template-columns: 1.15fr 1fr 1fr;
  background: rgb(11 10 8 / 0.96); border-top: 1px solid var(--linea-fuerte);
  padding-bottom: env(safe-area-inset-bottom);
}
.barra-movil a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem;
  min-height: 3.6rem; padding: 0.5rem; text-decoration: none;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
}
.barra-movil a + a { border-left: 1px solid var(--linea); }
.barra-movil a:first-child { background: var(--oro); color: var(--negro); }
body { padding-bottom: calc(3.6rem + env(safe-area-inset-bottom)); }
@media (min-width: 56rem) {
  .barra-movil { display: none; }
  body { padding-bottom: 0; }
}

/* ---------- Revelado al hacer scroll ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-revela] { opacity: 0; transform: translateY(1.5rem); transition: opacity var(--lento) var(--curva), transform var(--lento) var(--curva); }
  .js [data-revela].visible { opacity: 1; transform: none; }
}

/* ---------- Animaciones ---------- */
@keyframes sube { from { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: none; } }
@keyframes emerge { from { transform: translateY(105%); } to { transform: none; } }
@keyframes aparece-entero { from { opacity: 0; } to { opacity: 1; } }
@keyframes entra-logo { from { opacity: 0; transform: scale(0.6) rotate(-40deg); } to { opacity: 1; transform: none; } }
@keyframes pulso { 0% { opacity: 0.8; transform: scale(0.92); } 100% { opacity: 0; transform: scale(1.3); } }
@keyframes giro { to { transform: rotate(360deg); } }
@keyframes latido { from { transform: scale(0.6); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Secciones de páginas interiores */
.seccion-interior { padding-block: clamp(3rem, 7vw, 5rem); border-bottom: 1px solid var(--linea); }
.seccion-interior:last-child { border-bottom: 0; }
.seccion-interior .acciones-grandes { margin-top: 2rem; }
.seccion-interior.horario-rejilla { display: grid; }
.pagina-cabecera .estado { margin-top: 1.5rem; }
.nota-final { margin-top: 0; padding-bottom: 2rem; }
.franja-enlace + .leyenda { margin-top: clamp(2.5rem, 6vw, 4rem); }
.capitulos + .franja-enlace, .nota-final + .franja-enlace { margin-bottom: clamp(3rem, 7vw, 5rem); }