/* ============================================================
   MY LITTLE DINER — hoja de estilos
   Motivo único: el cuadro del suelo ajedrezado del diner.
   Un fondo, una tinta, un acento rojo. Menta, mostaza y rosa
   sólo donde el local los tiene (paredes, queso, neón).
   ============================================================ */

/* Fuentes servidas desde la propia web (sin llamadas a Google) */
/* latin */
@font-face {
  font-family: 'Bowlby One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/bowlbyone-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../assets/fonts/rubik-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../assets/fonts/rubik-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ground: #ffffff;
  --paper: #f2efea;
  --mustard-light: #ffd978;
  --ink: #141212;
  --muted: #4a4443;
  --black: #141212;        /* siempre negro: ajedrez, neón, texto sobre colores */
  --panel: #141212;        /* bloques oscuros: para llevar, pie, fichas negras */
  --accent-text: #e0262e;  /* rojo para texto pequeño */
  --check-w: #ffffff;
  --red: #e0262e;
  --red-deep: #b4161d;
  --mint: #3cc9c0;
  --mint-deep: #1f9b94;
  --mustard: #ffc43d;
  --pink: #ff4d9d;
  --white: #ffffff;

  --font-display: "Bowlby One", "Arial Black", Impact, sans-serif;
  --font-text: "Rubik", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --step-small: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
  --step-body: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.8vw, 1.625rem);
  --step-head: clamp(2rem, 1.4rem + 3.2vw, 3.6rem);
  --step-display: clamp(2.4rem, 0.6rem + 5vw, 5.6rem);

  --margin: clamp(16px, 2.4vw, 32px);
  --gap-section: clamp(96px, 12vw, 200px);
  --check: 56px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --bar-h: 44px;
  --top-h: 72px;
  color-scheme: light;
}

/* Modo oscuro: sólo cambian fondo, superficies y tinta; los colores del local se quedan */
html[data-theme="oscuro"] {
  --ground: #121011;
  --paper: #231e1f;
  --ink: #f4efe8;
  --muted: #b9aeaa;
  --panel: #2b2425;
  --accent-text: #ff4d55;
  --check-w: #ece5db;      /* el blanco del ajedrez deslumbra menos de noche */
  --mustard-light: #ffd978;
  color-scheme: dark;
}

[hidden] { display: none !important; }
html.i18n-wait body { opacity: 0; }
/* El cambio de tema se hace con View Transitions: el nuevo modo se abre en círculo desde el botón */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { z-index: 2; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; background: var(--ground); scroll-padding-top: calc(var(--bar-h) + var(--top-h)); }
@media (max-width: 760px) { :root { --top-h: 60px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--step-body);
  line-height: 1.55;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
a, button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
/* En pantallas táctiles no hay teclado que usar con las flechas */
@media (hover: none) { .juke__hint { display: none; } }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 400; line-height: 0.95; letter-spacing: 0; text-wrap: balance; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--red); color: var(--white); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

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

.wrap { width: min(100% - 2 * var(--margin), 1440px); margin-inline: auto; }

/* El motivo: el cuadro del suelo */
/* taste-skill-ignore: el ajedrezado es un patrón plano de dos colores, no un degradado */
.checker {
  background: repeating-conic-gradient(var(--black) 0 25%, var(--check-w) 0 50%); /* taste-skill-ignore: patrón ajedrezado plano */
  background-size: var(--check) var(--check);
}
/* taste-skill-ignore: mismo patrón plano */
.check-dot {
  display: inline-block;
  width: 0.9em; height: 0.9em;
  flex: none;
  background: repeating-conic-gradient(var(--black) 0 25%, var(--check-w) 0 50%); /* taste-skill-ignore: patrón ajedrezado plano */
  background-size: 50% 50%;
  outline: 2px solid var(--ink);
  outline-offset: -1px;
}

/* Botones: cuadrados, un relleno */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 26px;
  background: var(--red); color: var(--white);
  font-weight: 700; font-size: var(--step-body); text-decoration: none;
  border: 0; border-radius: 0;
  transition: transform var(--t-press) var(--ease-out), background var(--t-hover) ease;
  touch-action: manipulation;
}
.btn:hover { background: var(--red-deep); }
.btn:active { transform: translateY(2px) scale(0.98); }
.btn--ink { background: var(--ink); color: var(--ground); }
.btn--ink:hover { background: var(--muted); }
.btn--ghost { background: var(--ground); color: var(--ink); outline: 3px solid var(--ink); outline-offset: -3px; }
.btn--ghost:hover { background: var(--paper); }
.btn--mustard { background: var(--mustard); color: var(--black); }
.btn--mustard:hover { background: #f5b41e; }

/* ------------------------------------------------------------
   Barra superior: idiomas y modo oscuro
   ------------------------------------------------------------ */
.skip { position: absolute; left: 16px; top: -120px; z-index: 100; background: var(--red); color: var(--white); padding: 12px 16px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 8px; }
.bar { position: sticky; top: 0; z-index: 51; background: var(--panel); color: var(--white); font-size: var(--step-small); }
.bar__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--bar-h); }
.bar__addr { color: #d9d1cb; white-space: nowrap; }
.bar__tools { display: flex; align-items: center; gap: clamp(8px, 2vw, 24px); margin-left: auto; }
.langs { display: flex; gap: 2px; }
.langs__btn { position: relative; height: var(--bar-h); line-height: 1; padding: 0 10px; background: none; border: 0; color: #d9d1cb; font-weight: 500; transition: color var(--t-hover) ease; }
.langs__btn:hover { color: var(--white); }
.langs__btn[aria-pressed="true"] { color: var(--mustard); }
.langs__btn::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 8px; height: 2px; background: var(--mustard); transform: scaleX(0); transition: transform var(--t-ui) var(--ease-out); }
.langs__btn[aria-pressed="true"]::after { transform: scaleX(1); }
.langs__short { display: none; }
.theme { display: inline-flex; align-items: center; gap: 8px; height: var(--bar-h); line-height: 1; white-space: nowrap; padding: 0 4px 0 10px; background: none; border: 0; color: #d9d1cb; font-weight: 500; transition: color var(--t-hover) ease; }
.theme:hover { color: var(--white); }
.theme[aria-pressed="true"] { color: var(--mustard); }
.theme__icon { flex: none; }
.theme__sun { display: none; }
html[data-theme="oscuro"] .theme__sun { display: inline; }
html[data-theme="oscuro"] .theme__moon { display: none; }
/* Por debajo de 760px no caben dirección, idiomas y modo: la dirección ya está en la portada y en "Dónde" */
@media (max-width: 760px) {
  .bar__addr { display: none; }
  .bar__tools { margin-left: 0; width: 100%; justify-content: space-between; }
}
@media (max-width: 640px) {
  .langs__long, .theme__txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .langs__short { display: inline; }
  .langs__btn { padding: 0 12px; min-width: 44px; }
  .theme { padding: 0 8px; min-width: 44px; justify-content: center; }
  .langs__btn::after { left: 12px; right: 12px; }
}

/* ------------------------------------------------------------
   Cabecera
   ------------------------------------------------------------ */
.top {
  position: sticky; top: calc(var(--bar-h) - 1px); z-index: 50;
  background: var(--ground);
  transition: background 300ms ease, color 300ms ease;
}
.top.is-over-foot { background: var(--panel); color: var(--white); }
.top__in {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: var(--top-h);
}
.wordmark {
  font-family: var(--font-display); font-size: 1.5rem; line-height: 1; text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 10px;
}
.wordmark .check-dot { width: 20px; height: 20px; }
@media (max-width: 900px) { .wordmark { min-height: 44px; } }
.wordmark em { font-style: normal; color: var(--accent-text); }
.top__nav { display: flex; gap: clamp(14px, 2vw, 32px); align-items: center; }
.top__nav a { text-decoration: none; font-weight: 500; font-size: var(--step-body); white-space: nowrap; }
.top__nav a:not(.btn) { position: relative; padding: 6px 0; }
.top__nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--red); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-ui) var(--ease-out);
}
.top__nav a:not(.btn):hover::after, .top__nav a.is-active::after { transform: scaleX(1); }
.top__nav .btn { min-height: 44px; padding: 0 18px; }
@media (max-width: 1023px) {
  .top__nav a:not(.btn):not([href="#carta"]):not([href="#donde"]) { display: none; }
}
@media (max-width: 760px) {
  .top__nav a:not(.btn):not([href="#carta"]) { display: none; }
  .top__nav { gap: 12px; }
}
@media (max-width: 480px) {
  .top__nav a:not(.btn) { display: none; }
  .top__in { gap: 12px; }
}
@media (max-width: 420px) {
  .wordmark { font-size: 1.25rem; gap: 8px; }
  .wordmark .check-dot { width: 17px; height: 17px; }
  .top__nav .btn { padding: 0 14px; }
}

/* ------------------------------------------------------------
   Hero: el suelo ajedrezado entra por la derecha
   ------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: calc(100svh - var(--top-h) - var(--bar-h));
  display: grid; align-items: center;
  overflow: hidden; /* Safari 15 no entiende clip */
  overflow: clip;
}
.hero__floor {
  position: absolute; z-index: 0;
  right: -18vw; top: -18vh;
  width: 78vw; height: 128vh;
  transform: perspective(1200px) rotateY(-26deg) rotateX(8deg);
  transform-origin: right center;
  outline: 14px solid var(--red); outline-offset: -14px;
}
.hero__in { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: center; min-height: inherit; padding-block: 48px; }
.hero__copy { max-width: 840px; }
.hero__title { font-size: var(--step-display); }
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line > span { display: block; }
.hero__lead { margin-top: clamp(20px, 3vw, 36px); max-width: 44ch; font-size: var(--step-lead); line-height: 1.35; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 3vw, 40px); }

.status {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 28px; padding: 10px 16px 10px 12px;
  background: var(--white); outline: 3px solid var(--ink); outline-offset: -3px;
  font-weight: 500; font-size: var(--step-small);
}
/* Versión neón: panel negro, tubo encendido en rojo cuando está abierto, apagado cuando cierra */
.status.neon { background: var(--black); color: var(--white); outline: none; padding: 10px 18px 10px 16px; gap: 16px; }
html[data-theme="oscuro"] .status.neon { outline: 2px solid #3a3132; outline-offset: 0; }
.neon__tube { font-family: var(--font-display); font-size: 1.5rem; line-height: 1; color: #c48d93; } /* tubo apagado: cristal rosado sin luz */
.status.is-open .neon__tube { color: #fff; -webkit-text-stroke: 0; text-shadow: /* taste-skill-ignore: tubo de neón real, el rótulo del diner */ 0 0 5px #fff, 0 0 12px var(--red), 0 0 26px var(--red), 0 0 44px var(--red); }
/* El cartel tiene vida: al pasar el ratón se enciende, con halo rojo alrededor del panel */
.status.neon { cursor: default; transition: box-shadow 350ms ease, transform 350ms var(--ease-expo), background 350ms ease; }
.status.neon:hover, .status.neon:focus-visible { transform: translateY(-2px); background: #1c0d10; box-shadow: /* taste-skill-ignore: halo del tubo de neón al pasar por el cartel */ 0 0 0 2px var(--red), 0 0 18px rgba(224,38,46,0.55), 0 0 42px rgba(224,38,46,0.3); }
.status.neon:hover .neon__tube, .status.neon:focus-visible .neon__tube { color: #fff; text-shadow: /* taste-skill-ignore: tubo encendido al pasar */ 0 0 5px #fff, 0 0 12px var(--red), 0 0 26px var(--red), 0 0 44px var(--red); }
.status.neon #estado-texto { transition: color 300ms ease; }
.status.neon:hover #estado-texto { color: #fff; }

.hero__art { position: relative; z-index: 2; justify-self: center; width: min(100%, 560px); aspect-ratio: 1; display: grid; place-items: center; }
.hero__burger { width: 100%; filter: drop-shadow(/* taste-skill-ignore: sombra de contacto bajo objetos 3D que flotan */0 22px 14px rgba(0,0,0,0.22)); will-change: transform; }
.hero__burger img { width: 100%; }
.hero__shadow { position: absolute; bottom: 4%; left: 14%; width: 72%; height: 10%; background: /* taste-skill-ignore: sombra de contacto */ radial-gradient(closest-side, rgba(20,18,18,0.45), transparent 70%); z-index: -1; }
/* Detrás de la burger: la Estatua de la Libertad y un Cadillac del 59, a menor escala, para la profundidad */
.hero__burger { position: relative; z-index: 1; }
.hero__usa { position: absolute; inset: 0; z-index: 0; pointer-events: none; will-change: transform; }
.hero__usa img { position: absolute; filter: drop-shadow(/* taste-skill-ignore: sombra de contacto bajo objetos 3D */0 22px 18px rgba(0,0,0,0.28)); }
.hero__liberty { left: -28%; bottom: 30%; height: 80%; width: auto; }
.hero__caddy { left: -34%; bottom: -15%; width: 82%; height: auto; }
.hero__elvis { left: -44%; bottom: -19%; height: 56%; width: auto; }

@media (max-width: 900px) {
  .hero { min-height: auto; }
  .hero__in { grid-template-columns: 1fr; padding-block: 36px 28px; }
  .hero__floor {
    /* Atado al ancho de pantalla, como la escena: los pies de la fila de atrás quedan sobre el suelo */
    right: -30vw; top: auto; bottom: -14vw; width: 150vw; height: 120vw;
    transform: perspective(900px) rotateX(40deg);
    transform-origin: center bottom;
  }
  /* Móvil y tableta: escena con profundidad y sin solapes.
     Fila de atrás, con los pies a la misma altura: Elvis | burger | Estatua.
     Delante, más cerca y por eso más grande: el Cadillac centrado sobre el suelo.
     Medidas en % del ancho (left, width, margin) o del alto de la escena (top, height). */
  .hero__art { width: min(100%, 460px); aspect-ratio: 10 / 9; place-items: start center; margin-top: 20px; }
  .hero__burger { width: 56%; margin-top: 7.5%; }
  .hero__shadow { bottom: auto; top: 54%; left: 26%; width: 48%; height: 6%; }
  .hero__elvis { left: 1%; right: auto; top: 14.8%; bottom: auto; height: 43%; scale: -1 1; }
  .hero__liberty { left: auto; right: 1%; top: 8.8%; bottom: auto; height: 49%; }
  .hero__caddy { left: 7%; right: auto; top: 65%; bottom: auto; width: 86%; }
  .hero__title { font-size: 9vw; }
}
@media (max-width: 600px) {
  .hero__actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .hero__actions .btn { width: 100%; }
  .status.neon { display: flex; width: 100%; }
}

/* ------------------------------------------------------------
   Secciones comunes
   ------------------------------------------------------------ */
.section { padding-block: var(--gap-section) 0; }
.section:last-of-type { padding-bottom: 0; }
.section__head { font-size: var(--step-head); max-width: 16ch; }
.lead { font-size: var(--step-lead); line-height: 1.35; max-width: 46ch; }

/* ------------------------------------------------------------
   El sitio: panel menta con la jukebox
   ------------------------------------------------------------ */
.place { padding-top: var(--gap-section); }
.place__panel {
  position: relative; overflow: hidden; overflow: clip;
  background: var(--mint); color: var(--black);
  margin-inline: calc(-1 * var(--margin) + 16px);
  padding: clamp(32px, 5vw, 64px);
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px);
  min-height: 100svh;
}
.place__statement { font-size: clamp(2.4rem, 1.5rem + 3.4vw, 4.4rem); max-width: 12ch; }
.place__figure { position: relative; margin-top: clamp(32px, 5vw, 64px); width: min(100%, 38vw); align-self: end; }
.place__stage { width: 100%; aspect-ratio: 1; padding: 6%; display: grid; place-items: center; }
.place__stage img { width: 78%; filter: drop-shadow(/* taste-skill-ignore: sombra de contacto bajo objetos 3D que flotan */0 30px 24px rgba(0,0,0,0.35)); }
.place__blocks { display: grid; gap: 48px; align-content: start; padding-top: clamp(0px, 4vw, 56px); max-width: 420px; }
.place__blocks h3 { font-size: var(--step-lead); margin-bottom: 12px; }
.place__blocks p + p { margin-top: 10px; }
.place__list { display: grid; gap: 10px; margin-top: 12px; }
.place__list li { display: flex; gap: 12px; align-items: baseline; }
.place__panel .check-dot { outline-color: var(--black); }
.place__panel .btn--ink { background: var(--black); color: var(--white); }
.place__panel .btn--ink:hover { background: #3a3132; }
@media (max-width: 900px) {
  .place { padding-top: clamp(56px, 10vw, 96px); }
  .place__panel { grid-template-columns: minmax(0, 1fr); min-height: auto; margin-inline: calc(-1 * var(--margin) + 10px); }
  .place__figure { width: min(86vw, 420px); max-width: 100%; margin: 32px auto 0; }
  .place__blocks { padding-top: 0; }
}

/* ------------------------------------------------------------
   La jukebox: eliges, el objeto cambia
   ------------------------------------------------------------ */
.juke__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: end; min-height: 90svh; }
.juke__head { font-size: var(--step-head); margin-bottom: 24px; }
.juke__list { display: grid; gap: 6px; }
.juke__item {
  display: grid; grid-template-columns: 3.2ch 1fr; align-items: baseline; gap: 14px;
  width: 100%; text-align: left; padding: 8px 0; background: none; border: 0;
  font-family: var(--font-display); font-size: clamp(1.6rem, 1rem + 2.4vw, 2.8rem); line-height: 1.1;
  color: var(--muted);
  transition: color var(--t-hover) ease, transform var(--t-ui) var(--ease-out);
}
.juke__item .code { font-family: var(--font-text); font-weight: 700; font-size: 0.5em; padding: 4px 6px; background: var(--paper); color: var(--ink); text-align: center; }
.juke__item:hover { color: var(--ink); transform: translateX(6px); }
.juke__item[aria-pressed="true"] { color: var(--ink); }
.juke__item[aria-pressed="true"] .code { background: var(--red); color: var(--white); }

.juke__stage { position: relative; aspect-ratio: 1; width: min(100%, 64svh); justify-self: center; display: grid; place-items: center; }
.juke__disc { position: absolute; inset: 8%; background: var(--red); transition: background 300ms ease; outline: 10px solid var(--ink); outline-offset: -10px; }
/* taste-skill-ignore: patrón plano */
.juke__disc::after { content: ""; position: absolute; inset: 0; background: repeating-conic-gradient(var(--ink) 0 25%, transparent 0 50%); /* taste-skill-ignore: patrón plano */ background-size: 40px 40px; opacity: 0.10; }
.juke__disc[data-color="mostaza"] { background: var(--mustard); }
.juke__disc[data-color="menta"] { background: var(--mint); }
.juke__disc[data-color="rosa"] { background: var(--pink); }
.juke__disc[data-color="negro"] { background: var(--black); }
.juke__obj { position: relative; width: 86%; height: 86%; display: grid; place-items: center; }
.juke__obj img { position: absolute; max-width: 100%; max-height: 100%; width: auto; height: auto; opacity: 0; transition: opacity 300ms ease, transform 500ms var(--ease-expo); transform: translateY(16px) scale(0.96); filter: drop-shadow(/* taste-skill-ignore: sombra de contacto bajo objetos 3D que flotan */0 30px 30px rgba(0,0,0,0.38)); }
.juke__obj img.is-on { opacity: 1; transform: none; }
.juke__fact { margin-top: 24px; max-width: 46ch; font-size: var(--step-body); display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; }
.juke__price { font-family: var(--font-display); font-size: var(--step-lead); color: var(--accent-text); white-space: nowrap; }
.juke__hint { margin-top: 16px; font-size: var(--step-small); color: var(--muted); }
@media (max-width: 900px) {
  .juke__grid { grid-template-columns: minmax(0, 1fr); min-height: auto; gap: 20px; }
  /* La columna de texto se deshace para poder ordenar: título, máquina, lista, dato */
  .juke__grid > div:first-child { display: contents; }
  .juke__head { order: 1; margin-bottom: 0; }
  .juke__stage { order: 2; width: min(78vw, 360px); }
  .juke__list { order: 3; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .juke__fact { order: 4; margin-top: 0; }
  .juke__hint { order: 5; margin-top: 0; }
  .juke__item { width: 100%; min-height: 48px; font-size: var(--step-lead); grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 4px 0; align-items: center; }
  .juke__item .code { font-size: 12px; }
  .juke__item:hover { transform: none; }
  .juke__fact { flex-direction: column; align-items: flex-start; }
}

/* ------------------------------------------------------------
   La carta
   ------------------------------------------------------------ */
.menu__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; }
.menu__top .lead { margin-top: 20px; }
.menu__legend { font-size: var(--step-small); color: var(--muted); max-width: 32ch; }
.menu__nav {
  position: sticky; top: calc(var(--bar-h) + var(--top-h) - 2px); z-index: 40;
  margin-top: 40px; padding: 10px 0;
  background: var(--ground);
}
.menu__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.menu__nav a { text-decoration: none; font-weight: 500; font-size: var(--step-small); padding: 8px 12px; background: var(--paper); transition: background var(--t-hover) ease, color var(--t-hover) ease; }
.menu__nav a:hover, .menu__nav a.is-active { background: var(--ink); color: var(--ground); }
@media (max-width: 1023px) {
  /* En móvil y tableta las categorías van en una fila que se desliza.
     La activa se centra; las fichas encajan al soltar el dedo; y donde hay
     más fichas el borde se difumina en vez de cortar una ficha en seco.
     El fondo de la barra llega a los dos bordes de la pantalla para que
     la carta que pasa por debajo no asome por los márgenes. */
  .menu__nav { margin-inline: calc(-1 * var(--margin)); padding-inline: var(--margin); }
  .menu__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
  .menu__chips::-webkit-scrollbar { display: none; }
  .menu__nav a { flex: none; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; scroll-snap-align: center; }
  .menu__chips.has-left { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 44px); mask-image: linear-gradient(to right, transparent 0, #000 44px); } /* taste-skill-ignore: máscara de desvanecido para indicar que hay más fichas, no un fondo degradado */
  .menu__chips.has-right { -webkit-mask-image: linear-gradient(to left, transparent 0, #000 44px); mask-image: linear-gradient(to left, transparent 0, #000 44px); } /* taste-skill-ignore: máscara de desvanecido */
  .menu__chips.has-left.has-right { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%); } /* taste-skill-ignore: máscara de desvanecido */
}

.cat { padding-top: clamp(80px, 8vw, 112px); scroll-margin-top: 64px; }
.cat__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.cat__head h3 { font-size: var(--step-head); display: flex; align-items: center; gap: 18px; }
.cat__head h3 img { width: clamp(56px, 7vw, 96px); height: auto; filter: drop-shadow(/* taste-skill-ignore: sombra de contacto bajo objetos 3D que flotan */0 10px 10px rgba(0,0,0,0.25)); }
#cat-extras h3 img { width: clamp(42px, 5.2vw, 72px); } /* los botes son verticales: mismo alto que los demás iconos */
.cat__count { font-size: var(--step-body); color: var(--muted); white-space: nowrap; }
.cat__note { margin-top: 12px; color: var(--muted); max-width: 60ch; }
.cat__items { display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; row-gap: 32px; margin-top: 36px; }
.dish { display: grid; grid-template-columns: 22px 1fr; gap: 16px; align-items: start; }
.dish .check-dot { margin-top: 0.35em; width: 22px; height: 22px; }
.dish__row { display: flex; gap: 16px; align-items: baseline; justify-content: space-between; }
.dish__name { font-weight: 700; }
.dish__price { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dish__desc { color: var(--muted); max-width: 38ch; margin-top: 4px; font-size: 1rem; }
.dish__tag { color: var(--accent-text); font-weight: 700; font-size: var(--step-small); margin-left: 8px; }
.dish__je { color: var(--accent-text); margin-left: 1px; }
.dish__al { margin-top: 6px; font-size: var(--step-small); color: var(--muted); max-width: 42ch; }
.cat__vacia { margin-top: 28px; padding: 18px 22px; background: var(--paper); max-width: 60ch; }

/* Filtro de alérgenos */
.alfiltro { margin-top: 36px; padding: clamp(18px, 2.4vw, 28px); background: var(--paper); }
.alfiltro__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.alfiltro__label { font-weight: 700; }
.alfiltro__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.alfiltro__btn {
  min-height: 44px; padding: 0 16px; border: 0;
  background: var(--ground); color: var(--ink); font-weight: 500; font-size: var(--step-small);
  outline: 2px solid var(--ink); outline-offset: -2px;
  transition: background var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.alfiltro__btn:hover { background: var(--paper); }
.alfiltro__btn:active { transform: scale(0.97); }
.alfiltro__btn[aria-pressed="true"] { background: var(--red); color: var(--white); outline-color: var(--red); text-decoration: line-through; text-decoration-thickness: 2px; }
.alfiltro__clear { min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--ink); font-weight: 700; font-size: var(--step-small); text-decoration: underline; text-underline-offset: 4px; }
.alfiltro__status { margin-top: 12px; font-size: var(--step-small); font-weight: 500; }
.alfiltro__note { margin-top: 6px; font-size: var(--step-small); color: var(--muted); max-width: 80ch; }
@media (max-width: 760px) {
  .menu__top { grid-template-columns: minmax(0, 1fr); }
  .cat__items { grid-template-columns: 1fr; }
  /* El título de cada categoría usa todo el ancho; el número de platos va debajo */
  .cat__head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .cat__head h3 { gap: 12px; }
  .cat__head h3 img { width: 46px; }
  #cat-extras h3 img { width: 34px; }
}

.takeaway { margin-top: clamp(56px, 7vw, 96px); background: var(--panel); color: var(--white); padding: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: 24px; align-items: center; }
.takeaway h3 { font-size: var(--step-head); }
.takeaway p { margin-top: 8px; color: #e8e2dc; }
.takeaway__prices { display: flex; gap: 28px; }
.takeaway__prices div { text-align: right; }
.takeaway__prices strong { display: block; font-family: var(--font-display); font-size: var(--step-head); color: var(--mustard); line-height: 1; }
.takeaway__prices span { font-size: var(--step-small); color: #e8e2dc; }
@media (max-width: 900px) { .takeaway { grid-template-columns: minmax(0, 1fr); } .takeaway__prices div { text-align: left; } }

/* ------------------------------------------------------------
   Especial del mes + pared de fichas
   ------------------------------------------------------------ */
.special__band { background: var(--red); color: var(--white); margin-inline: calc(-1 * var(--margin)); padding: clamp(40px, 6vw, 88px) var(--margin); }
.special__in { width: min(100%, 1440px); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(24px, 5vw, 80px); align-items: center; }
.special__name { font-size: clamp(2.6rem, 1.6rem + 5vw, 6rem); margin-top: 8px; }
.special__price { font-family: var(--font-display); font-size: clamp(2.6rem, 1.6rem + 5vw, 6rem); color: var(--mustard-light); line-height: 1; margin-top: 12px; }
.special__aside { align-self: end; }
.special__text { margin-top: 20px; max-width: 48ch; color: var(--white); }
.special__text strong { color: var(--mustard-light); }
.special__text a { color: var(--white); }
.special__cta { margin-top: 28px; }
@media (max-width: 760px) { .special__in { grid-template-columns: minmax(0, 1fr); } }

.wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 8px calc(-1 * var(--margin) + 8px) 0; }
.tile { aspect-ratio: 1; display: grid; place-items: center; position: relative; padding: 12px; overflow: hidden; overflow: clip; min-height: 0; }
.tile__big { font-family: var(--font-display); font-size: clamp(1.3rem, 0.3rem + 3vw, 3.4rem); line-height: 0.95; text-align: center; max-width: 100%; text-wrap: balance; overflow-wrap: anywhere; }
.tile__cap { position: absolute; bottom: 18px; left: 16px; right: 16px; text-align: center; font-size: var(--step-small); font-weight: 500; }
.tile--pic img { position: absolute; inset: 10% 15% 24%; margin: auto; width: auto; height: auto; max-width: 70%; max-height: 66%; filter: drop-shadow(/* taste-skill-ignore: sombra de contacto bajo objetos 3D que flotan */0 18px 16px rgba(0,0,0,0.3)); }
.tile[data-c="ink"] { background: var(--panel); color: var(--white); }
.tile[data-c="red"] { background: var(--red); color: var(--white); }
.tile[data-c="mustard"] { background: var(--mustard); color: var(--black); }
.tile[data-c="mint"] { background: var(--mint); color: var(--black); }
.tile[data-c="paper"] { background: var(--paper); color: var(--ink); }
.tile[data-c="pink"] { background: var(--pink); color: var(--black); }
@media (max-width: 1023px) {
  .wall { grid-template-columns: 1fr 1fr; gap: 6px; }
  .tile__big { font-size: clamp(1.3rem, 6vw, 2.6rem); }
  /* En dos columnas el pie va en el flujo, debajo del texto grande:
     con pies largos (o en francés) ya no se montan uno sobre otro */
  .tile { display: flex; flex-direction: column; align-items: center; }
  .tile__big { margin-block: auto; }
  .tile__cap { position: static; margin: 6px 0 6px; }
  .tile--pic img { position: static; flex: 1 1 0; min-height: 0; width: 76%; max-width: none; max-height: none; margin: 4% 0 0; object-fit: contain; }
}

/* ------------------------------------------------------------
   Opiniones
   ------------------------------------------------------------ */
.reviews__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.reviews__portrait { grid-column: 2 / span 4; aspect-ratio: 3 / 4; background: var(--mustard); display: grid; place-items: center; position: relative; }
.reviews__portrait img { width: 70%; filter: drop-shadow(/* taste-skill-ignore: sombra de contacto bajo objetos 3D que flotan */0 30px 24px rgba(0,0,0,0.35)); }
.reviews__score { position: absolute; left: 20px; top: 20px; background: var(--black); color: var(--white); padding: 10px 14px; font-weight: 700; display: flex; gap: 10px; align-items: baseline; }
.reviews__score strong { font-family: var(--font-display); font-size: var(--step-lead); line-height: 1; }
.coin { position: absolute; left: 20px; bottom: 20px; display: inline-flex; align-items: center; gap: 10px; }
.coin::before { content: ""; width: 5px; height: 18px; background: var(--black); }
.hiscore { position: absolute; inset: 12% 10% 18% 10%; background: var(--black); color: var(--mustard); display: grid; align-content: center; justify-items: center; gap: 14px; text-align: center; padding: 24px; font-family: var(--font-display); transform-origin: center; }
.hiscore[hidden] { display: none; }
.hiscore::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: /* taste-skill-ignore: líneas de barrido de la pantalla CRT */ repeating-linear-gradient(transparent 0 2px, rgba(0,0,0,0.35) 2px 4px); }
.hiscore__title { font-size: var(--step-lead); color: var(--white); }
.hiscore__num { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.8rem); line-height: 1; display: grid; justify-items: center; }
.hiscore__num small { font: 500 var(--step-small) var(--font-text); color: var(--white); margin-top: 8px; }
.hiscore__press { color: var(--white); font: 500 var(--step-small) var(--font-text); margin-top: 6px; }
.reviews__quotes { grid-column: 7 / span 6; margin-top: clamp(40px, 8vw, 120px); display: grid; gap: clamp(40px, 5vw, 72px); }
.quote { margin: 0; }
.quote p { font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem); line-height: 1.3; max-width: 38ch; }
.quote footer { margin-top: 20px; font-size: var(--step-body); }
.quote footer span { color: var(--muted); }
.quote:nth-child(2) { margin-left: clamp(0px, 6vw, 96px); }
.reviews__words { grid-column: 2 / span 5; margin-top: clamp(24px, 4vw, 56px); display: flex; flex-wrap: wrap; gap: 8px; align-content: start; }
.reviews__words li { background: var(--paper); padding: 8px 12px; font-weight: 500; font-size: var(--step-small); }
.reviews__words li b { color: var(--red-deep); margin-left: 6px; }
html[data-theme="oscuro"] .reviews__words li b { color: var(--accent-text); }
.reviews__small { grid-column: 10 / span 2; aspect-ratio: 1; background: var(--mint); display: grid; place-items: center; margin-top: 48px; }
.reviews__small img { width: 80%; filter: drop-shadow(/* taste-skill-ignore: sombra de contacto bajo objetos 3D que flotan */0 16px 14px rgba(0,0,0,0.3)); }
@media (max-width: 900px) {
  .reviews__portrait { grid-column: 1 / span 9; }
  .hiscore { inset: 14px 14px 92px; }
  .reviews__quotes { grid-column: 1 / -1; margin-top: 32px; }
  .quote:nth-child(2) { margin-left: 0; }
  .reviews__words { grid-column: 1 / -1; }
  .reviews__small { grid-column: 8 / span 5; margin-top: 0; }
}
@media (max-width: 760px) {
  .reviews__portrait { grid-column: 1 / -1; }
  .reviews__words { grid-column: 1 / span 7; }
  .reviews__small { grid-column: 8 / span 5; align-self: start; margin-top: clamp(24px, 4vw, 56px); }
}

.reviews__portrait .hiscore { z-index: 2; }
.reviews__portrait .coin { z-index: 3; }

/* ------------------------------------------------------------
   Marquesina: las reseñas de Google corren como un letrero
   ------------------------------------------------------------ */
.ticker { background: var(--red); color: var(--white); margin-top: clamp(64px, 8vw, 120px); padding: 22px 0; overflow: hidden; }
.ticker__track { display: flex; width: max-content; will-change: transform; }
.ticker__copy { display: flex; }
.ticker__item { display: inline-flex; align-items: center; gap: 14px; white-space: nowrap; padding-right: 64px; font-size: clamp(1.1rem, 1rem + 0.6vw, 1.5rem); font-weight: 500; }
.ticker__stars { color: var(--mustard); display: inline-flex; gap: 2px; }
.ticker__item b { font-weight: 700; }
.ticker__item--score { font-family: var(--font-display); font-weight: 400; }
.faq.section { padding-top: clamp(80px, 9vw, 150px); }
@media (prefers-reduced-motion: reduce) {
  .ticker__track, .ticker__copy { width: auto; flex-wrap: wrap; gap: 12px 0; }
  .ticker__track { padding-inline: 32px; }
  .ticker__item { white-space: normal; padding-right: 48px; }
}

/* ------------------------------------------------------------
   Preguntas: fichas con pestaña
   ------------------------------------------------------------ */
.faq__in { width: min(100%, 980px); margin-inline: auto; }
.faq__head { font-size: var(--step-head); margin-bottom: 40px; }
.cards { display: grid; }
.card { position: relative; margin-top: 40px; }
.card:first-child { margin-top: 0; }
.card__tab {
  position: relative; display: inline-flex; align-items: center;
  height: 42px; padding: 0 22px; margin-left: calc(var(--i) * clamp(32px, 10vw, 150px));
  font-weight: 700; font-size: var(--step-small);
  clip-path: polygon(0 100%, 8% 0, 92% 0, 100% 100%);
}
.card__body { padding: 0; }
.card__q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; text-align: left; border: 0; background: none;
  padding: 22px 28px; font-weight: 500; font-size: clamp(1.1rem, 1rem + 0.6vw, 1.35rem);
}
.card__body h3 { font-family: var(--font-text); font-weight: 500; line-height: 1.3; }
.card__q::after { content: "+"; font-family: var(--font-display); font-size: var(--step-lead); line-height: 1; transition: transform var(--t-ui) var(--ease-out); }
.card.is-open .card__q::after { transform: rotate(45deg); }
.card__tab { cursor: pointer; }
.card__a { padding: 0 28px 28px; max-width: 54ch; }
.card__a p { line-height: 1.55; }
.card[data-c="red"] .card__tab, .card[data-c="red"] .card__body { background: var(--red); color: var(--white); }
.card[data-c="mustard"] .card__tab, .card[data-c="mustard"] .card__body { background: var(--mustard); color: var(--black); }
.card[data-c="mint"] .card__tab, .card[data-c="mint"] .card__body { background: var(--mint); color: var(--black); }
.card[data-c="pink"] .card__tab, .card[data-c="pink"] .card__body { background: var(--pink); color: var(--black); }
.card[data-c="paper"] .card__tab, .card[data-c="paper"] .card__body { background: var(--paper); color: var(--ink); }
.card[data-c="ink"] .card__tab, .card[data-c="ink"] .card__body { background: var(--panel); color: var(--white); }
@media (max-width: 760px) { .card__q { padding: 18px 20px; } .card__a { padding: 0 20px 22px; } }

/* ------------------------------------------------------------
   Dónde: cupón + mapa
   ------------------------------------------------------------ */
.where__head { font-size: var(--step-head); margin-bottom: 40px; }
.coupon {
  position: relative;
  width: min(100%, 1240px); margin-inline: auto;
  background: var(--red); color: var(--white);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}
.coupon::before, .coupon::after {
  content: ""; position: absolute; left: calc(41.6% - 14px); width: 28px; height: 28px; border-radius: 50%; background: var(--ground);
}
.coupon::before { top: -14px; } .coupon::after { bottom: -14px; }
.coupon__left { padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.coupon__left h3 { font-size: var(--step-head); max-width: 12ch; }
.coupon__left address { font-style: normal; font-size: var(--step-body); line-height: 1.5; }
.coupon__left address strong { display: block; font-size: 1.1em; }
.coupon__right { position: relative; padding: clamp(28px, 4vw, 48px); border-left: 5px dotted var(--ground); }
.hours { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hours th, .hours td { text-align: left; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.35); }
.hours th { font-weight: 500; }
.hours td { text-align: right; white-space: nowrap; }
.hours td span { display: inline-block; }
.hours td span + span::before { content: " · "; }
.hours tr.is-today th, .hours tr.is-today td { color: var(--mustard-light); font-weight: 700; }
.hours tr.is-closed td { color: #ffe3e4; }
.coupon__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.coupon__status { margin-top: 16px; font-weight: 500; }
@media (max-width: 760px) {
  .coupon { grid-template-columns: minmax(0, 1fr); }
  .coupon::before, .coupon::after { left: auto; top: auto; }
  .coupon::before { left: -14px; top: 50%; }
  .coupon::after { right: -14px; top: 50%; }
  .coupon__right { border-left: 0; border-top: 5px dotted var(--ground); }
  .coupon__actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .coupon__actions .btn { width: 100%; }
  .hours td { white-space: normal; }
  .hours td span { display: block; }
  .hours td span + span::before { content: none; }
}
.map { position: relative; margin-top: 24px; width: min(100%, 1240px); margin-inline: auto; aspect-ratio: 16 / 7; background: var(--paper); }
.map:not(.is-loaded) { aspect-ratio: auto; min-height: clamp(340px, 40vw, 540px); }
.map__gate { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; background-size: 48px 48px; }
.map__card { background: var(--ground); color: var(--ink); padding: clamp(22px, 3vw, 36px); max-width: 540px; text-align: center; outline: 4px solid var(--red); outline-offset: -4px; }
.map__title { font-family: var(--font-display); font-size: var(--step-lead); line-height: 1.05; }
.map__txt { margin-top: 10px; color: var(--muted); font-size: var(--step-small); }
.map__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 20px; }
.map iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(0.9); }
html[data-theme="oscuro"] .map iframe { filter: invert(0.9) hue-rotate(180deg) saturate(0.8) brightness(0.95); }
@media (max-width: 760px) { .map { aspect-ratio: 4 / 3; } }

/* ------------------------------------------------------------
   Pie: el nombre construido en bloques
   ------------------------------------------------------------ */
.foot { background: var(--panel); color: var(--white); padding: clamp(40px, 6vw, 80px) 0 32px; margin-top: var(--gap-section); }
.blocks { display: flex; gap: 4px; align-items: flex-end; height: clamp(120px, 34svh, 300px); }
.blocks__row { display: flex; gap: 4px; align-items: flex-end; height: 100%; flex: 1; }
.blocks__row:first-child { flex: 9; }
.blocks__row:last-child { flex: 5; }
.blocks span::before { content: attr(data-letter); }
.blocks span {
  flex: 1; display: grid; place-items: end center; padding-bottom: 6%;
  font-family: var(--font-display); font-size: clamp(1.2rem, 0.3rem + 4.4vw, 5rem); line-height: 1;
  background: var(--red); color: var(--black);
}
.blocks span:nth-child(3n) { background: var(--mustard); }
.blocks span:nth-child(3n+1) { background: var(--white); }
.blocks span:nth-child(4n+2) { background: var(--mint); }
.blocks span:nth-child(5n) { background: var(--pink); }
.blocks span:nth-child(odd) { height: 100%; }
.blocks span:nth-child(even) { height: 78%; }
.blocks span:nth-child(3n) { height: 64%; }
.blocks span:nth-child(7n) { height: 90%; }
.foot__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; margin-top: 56px; }
.foot__links { grid-column: span 2; display: grid; gap: 10px; align-content: start; }
.foot__links a { text-decoration: none; font-size: var(--step-small); }
.foot__links a:hover { color: var(--mustard); }
.foot__contact { grid-column: 9 / span 4; display: grid; gap: 12px; font-size: var(--step-small); }
.foot__contact a { text-decoration: none; }
.foot__bottom { margin-top: 40px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: var(--step-small); color: #cfc7c0; }
.foot__bottom .btn { min-height: 44px; padding: 0 16px; font-size: var(--step-small); }
@media (max-width: 760px) {
  .blocks { flex-direction: column; height: auto; gap: 8px; align-items: stretch; }
  .blocks__row { height: 22svh; min-height: 96px; width: 100%; flex: none; }
  .blocks span { font-size: 9vw; }
  .foot__links { grid-column: span 6; gap: 0; }
  .foot__links a, .foot__contact a { padding-block: 11px; }
  .foot__contact { gap: 4px; }
  .foot__contact { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------
   Movimiento: sólo transform y opacity. Sin JS, todo visible.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  html.js .hero__title .line > span { transform: translateY(110%); animation: rise 900ms var(--ease-expo) forwards; animation-delay: calc(var(--i) * 90ms + 80ms); }
  html.js .hero__lead, html.js .hero__actions, html.js .status { opacity: 0; transform: translateY(18px); animation: fadeUp 700ms var(--ease-expo) forwards; }
  html.js .hero__lead { animation-delay: 320ms; }
  html.js .status { animation-delay: 420ms; }
  html.js .hero__actions { animation-delay: 520ms; }
  html.js .hero__burger { clip-path: inset(-30% -30% 100% -30%); animation: shutter 1200ms var(--ease-in-out) 200ms forwards; }
  html.js .hero__burger img { transform: scale(1.12); animation: settle 1400ms var(--ease-expo) 200ms forwards; }
  html.js .hero__liberty { opacity: 0; transform: translateY(40px); animation: fadeUp 900ms var(--ease-expo) 760ms forwards; }
  html.js .hero__caddy { opacity: 0; transform: translateX(-70px); animation: fadeUp 900ms var(--ease-expo) 940ms forwards; }
  html.js .hero__elvis { opacity: 0; transform: translateY(30px); animation: fadeUp 900ms var(--ease-expo) 1120ms forwards; }
  html.js .status.is-open .neon__tube { animation: neonOn 1.8s steps(1) 600ms both, neonHum 2.8s ease-in-out 2.4s infinite; }
  .status.is-closed .neon__tube { animation: neonBuzz 7s steps(1) 3s infinite; }
  .status.neon:hover .neon__tube, .status.neon:focus-visible .neon__tube { animation: neonOn 1.1s steps(1) both; }
  .status.neon.is-open:hover .neon__tube { animation: neonHum 1.4s ease-in-out infinite; }
  .coin:not(.is-played) { animation: attract 1.6s steps(1) infinite; }
  .hiscore.is-on { animation: crtOn 420ms var(--ease-expo); }
  .hiscore__press { animation: blink 1s steps(1) infinite; }
  .ticker__track { animation: ticker 75s linear infinite; }
  .ticker:hover .ticker__track, .ticker.is-paused .ticker__track { animation-play-state: paused; }
  html.js .hero__floor { opacity: 0; transform: perspective(1200px) rotateY(-26deg) rotateX(8deg) translateX(80px); animation: floorIn 1100ms var(--ease-expo) forwards; }
  html.js [data-reveal] { opacity: 0; transform: translateY(24px); }
  html.js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity 800ms var(--ease-expo), transform 800ms var(--ease-expo); transition-delay: calc(var(--d, 0) * 70ms); }
  .hero__burger.is-floating { animation: float 5s ease-in-out infinite; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 900px) {
  html.js .hero__floor { transform: perspective(900px) rotateX(40deg) translateY(60px); animation-name: floorInMobile; }
  html.js .hero__burger { clip-path: none; animation: fadeIn 600ms var(--ease-out) 120ms both; }
  html.js .hero__burger img { transform: none; animation: none; }
  /* En el móvil el Cadillac entra por la derecha, hacia donde mira su morro, sin pasar por encima de Elvis */
  html.js .hero__caddy { transform: translateX(70px); }
}
@keyframes rise { to { transform: none; } }
@keyframes neonOn { 0%, 18%, 22%, 48%, 52% { opacity: 0.25; text-shadow: /* taste-skill-ignore: parpadeo del neón al encender */ none; } 20%, 50%, 100% { opacity: 1; } }
@keyframes attract { 50% { opacity: 0.55; } }
@keyframes neonHum { 0%, 100% { text-shadow: /* taste-skill-ignore: respiración del neón encendido */ 0 0 5px #fff, 0 0 12px var(--red), 0 0 26px var(--red), 0 0 44px var(--red); } 50% { text-shadow: /* taste-skill-ignore: respiración del neón encendido */ 0 0 3px #fff, 0 0 8px var(--red), 0 0 16px var(--red), 0 0 24px var(--red); } }
@keyframes neonBuzz { 0%, 91%, 100% { color: #c48d93; text-shadow: /* taste-skill-ignore: chispazo del tubo apagado */ none; } 92%, 94.5% { color: #fff; text-shadow: /* taste-skill-ignore: chispazo del tubo apagado */ 0 0 6px #fff, 0 0 14px var(--red), 0 0 28px var(--red); } 93.5% { color: #c48d93; text-shadow: /* taste-skill-ignore: chispazo del tubo apagado */ none; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes crtOn { from { transform: scaleY(0.04); filter: brightness(3); } to { transform: none; filter: none; } }
@keyframes ticker { to { transform: translateX(-50%); } }
@keyframes fadeUp { to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes shutter { to { clip-path: inset(-30% -30% -40% -30%); } }
@keyframes settle { to { transform: none; } }
@keyframes floorIn { to { opacity: 1; transform: perspective(1200px) rotateY(-26deg) rotateX(8deg); } }
@keyframes floorInMobile { to { opacity: 1; transform: perspective(900px) rotateX(40deg); } }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-18px) rotate(2deg); } }

/* ------------------------------------------------------------
   Repaso de móvil (31-10-2026)
   ------------------------------------------------------------ */
/* Saltos desde el menú: el título cae justo bajo las barras fijas, sin el hueco del relleno de la sección */
@media (max-width: 900px) {
  .section[id] { scroll-margin-top: calc(16px - var(--gap-section)); }
  .faq.section { scroll-margin-top: calc(16px - clamp(80px, 9vw, 150px)); }
  .place { scroll-margin-top: calc(16px - clamp(56px, 10vw, 96px)); }
  .cat { scroll-margin-top: 0; }
}
/* Móviles estrechos (iPhone SE y similares): la cabecera cabe y los títulos van en dos líneas */
@media (max-width: 380px) {
  :root { --step-head: 1.8rem; }
  .place__panel { padding: 24px 22px; }
  .place__statement { font-size: 1.8rem; }
}
@media (max-width: 360px) {
  .top__in { gap: 8px; }
  .wordmark { font-size: 1.08rem; gap: 6px; }
  .wordmark .check-dot { width: 15px; height: 15px; }
  .top__nav .btn { padding: 0 12px; font-size: 1rem; }
}
/* Móvil en horizontal: hay muy poco alto, así que la barra de idiomas no se queda fija
   y la cabecera se estrecha; si no, las barras taparían casi media pantalla */
@media (max-height: 500px) and (orientation: landscape) {
  :root { --top-h: 56px; }
  html { scroll-padding-top: var(--top-h); }
  .bar { position: relative; }
  .top { top: 0; }
  .menu__nav { top: calc(var(--top-h) - 2px); padding-block: 6px; }
}
/* En horizontal, la jukebox pone la máquina al lado de la lista (al tocar una
   canción se ve el cambio) y la recreativa cabe entera junto a las opiniones */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  .juke__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 28px; align-items: start; }
  .juke__head { grid-column: 1 / -1; }
  .juke__stage { grid-column: 1; grid-row: 2 / span 3; width: min(100%, calc(100svh - var(--top-h) - 32px)); }
  .juke__list { grid-column: 2; grid-row: 2; }
  .juke__fact { grid-column: 2; grid-row: 3; }
  .juke__hint { grid-column: 2; grid-row: 4; }
  .reviews__portrait { grid-column: 1 / span 5; width: min(100%, calc((100svh - var(--top-h) - 24px) * 0.75)); }
  .reviews__quotes { grid-column: 6 / -1; margin-top: 0; }
  .reviews__score { left: 10px; top: 10px; right: 10px; padding: 8px 10px; }
  .hiscore { inset: 10px 10px 76px; padding: 10px; gap: 6px; }
  .hiscore__title { font-size: 1rem; }
  .hiscore__num { font-size: 1.9rem; }
  .hiscore__num small { margin-top: 2px; }
}
/* Compartir el especial (sólo aparece si el teléfono tiene menú de compartir) */
.special__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.btn--light { background: transparent; color: var(--white); outline: 3px solid var(--white); outline-offset: -3px; }
.btn--light:hover { background: var(--red-deep); }
@media (hover: none) {
  /* En pantallas táctiles el :hover se queda pegado tras tocar: se anula donde confunde.
     Va al final de la hoja para ganar a las reglas :hover de arriba, que pesan lo mismo. */
  .menu__nav a:hover:not(.is-active) { background: var(--paper); color: inherit; }
  .alfiltro__btn:hover:not([aria-pressed="true"]) { background: var(--ground); }
  .btn:hover { background: var(--red); }
  .btn--ink:hover { background: var(--ink); }
  .place__panel .btn--ink:hover { background: var(--black); }
  .btn--ghost:hover { background: var(--ground); }
  .btn--mustard:hover { background: var(--mustard); }
  .btn--light:hover { background: transparent; }
}
@media (max-width: 600px) {
  .special__cta { display: grid; grid-template-columns: minmax(0, 1fr); }
  .special__cta .btn { width: 100%; }
}

/* ------------------------------------------------------------
   Lo que llega desde el panel de control
   ------------------------------------------------------------ */
/* Aviso de la barra: "Hoy cerramos a las 22", vacaciones... */
.aviso { background: var(--mustard); color: var(--black); font-weight: 500; text-align: center; padding: 10px var(--margin); width: auto; margin-inline: 0; font-size: var(--step-small); }
/* Plato agotado hoy: se queda en la carta, pero apagado */
.dish.is-agotado .dish__name, .dish.is-agotado .dish__price, .dish.is-agotado .dish__desc { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.dish.is-agotado .dish__tag { text-decoration: none; }
/* Plato con foto subida desde el panel */
.dish.has-pic { grid-template-columns: 64px 1fr; }
.dish__pic { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(/* taste-skill-ignore: sombra de contacto bajo la foto recortada */0 8px 8px rgba(0,0,0,0.22)); }
/* Foto del especial del mes */
.special__img img { width: min(100%, 320px); height: auto; filter: drop-shadow(/* taste-skill-ignore: sombra de contacto bajo la foto recortada */0 24px 20px rgba(0,0,0,0.35)); }
@media (max-width: 760px) { .special__img img { width: min(70vw, 320px); } }
/* Vista previa del panel: sello fijo para no confundirla con la web publicada */
html.is-preview::after { content: "Vista previa · sin publicar"; position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 100; background: var(--black); color: var(--mustard); font: 700 0.85rem var(--font-text); padding: 8px 14px; pointer-events: none; }