/* ===================================================================
   OYE — estilos del menú
   Temas claro/oscuro mediante tokens semánticos y [data-theme].
=================================================================== */
:root {
  --radius: 1rem;
  --max-w: 72rem;
  --font-sans: "Satoshi", "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-display: "Causten Round", "Satoshi", "Inter", system-ui, sans-serif;

  /* =========================================================
     Paleta cálida unificada (atmósfera del bar)
     - Rojo  = "hero": precios, tab activo, foco
     - Ámbar = secundario: badge, leyenda, resaltado de búsqueda
     - Neutros entibiados (no gris frío)
  ========================================================= */

  /* ---- Tema claro (papel cálido) ---- */
  --bg: #faf8f5;
  --surface: #ffffff;
  --surface-2: #f4f1ec;
  --text: #1c1815;
  --text-muted: #6a615a;
  --text-faint: #a99f96;
  --border: #e9e3db;
  --border-strong: #d9d1c6;

  --primary: #bf3434;            /* rojo de marca: precios, tab activo, foco */
  --tab-active-text: #ffffff;
  --on-primary: #ffffff;         /* texto sobre el rojo lleno (botones de compra) */

  --accent: #d98b3f;             /* ámbar: fondo del badge "Nuevo" */
  --badge-text: #2a1c12;         /* texto oscuro sobre ámbar (look etiqueta) */

  --legend-text: #9a5c20;        /* ámbar-tostado, reemplaza el celeste */

  --header-bg: rgba(250, 248, 245, 0.95);
  --shadow-soft: 0 10px 30px rgba(40, 25, 12, 0.07);
  --match-bg: rgba(197, 116, 43, 0.28);
  --watermark-color: #1c1815;
  --watermark-opacity: 0.10;
}

[data-theme="dark"] {
  /* Neutros cálidos (charcoal con un toque marrón, no gris azulado) */
  --bg: #161311;
  --surface: #211c19;
  --surface-2: #2b2521;
  --text: #f0ebe4;
  --text-muted: #a89e93;
  --text-faint: #786e65;
  --border: #322b25;
  --border-strong: #3f372f;

  --primary: #e8675d;            /* rojo cálido aclarado para contraste */
  --tab-active-text: #ffffff;
  --on-primary: #2a0f0c;         /* sobre el rojo claro, texto oscuro (mejor contraste) */

  --accent: #df9b48;             /* ámbar dorado para fondos oscuros */
  --badge-text: #221c17;         /* texto oscuro sobre el ámbar */

  --legend-text: #df9b48;        /* dorado tenue, glow cálido */

  --header-bg: rgba(22, 19, 17, 0.88);
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.45);
  --match-bg: rgba(223, 155, 72, 0.30);
  --watermark-color: #f0ebe4;
  --watermark-opacity: 0.12;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  position: relative;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* Logo de fondo fijo (marca de agua vectorial, recoloreable por tema) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-color: var(--watermark-color);
  /* Un lazo gigante cubriendo todo el canvas */
  -webkit-mask: url("../img/lazo.svg") center / cover no-repeat;
  mask: url("../img/lazo.svg") center / cover no-repeat;
  opacity: var(--watermark-opacity);
  z-index: 0;
  pointer-events: none;
  transition: background-color 0.25s ease;
}

header, main, footer { position: relative; z-index: 1; }

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1rem;
}

.font-display { font-family: var(--font-display); letter-spacing: 0.02em; }

/* ---------- Header sticky ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--border);
}

.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
}

.brand { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
/* Solo el lazo (parte superior del logo) */
.brand-logo {
  height: 2.6rem; aspect-ratio: 824 / 800; flex-shrink: 0;
  background-color: var(--text);
  -webkit-mask: url("../img/lazo.svg") center / contain no-repeat;
  mask: url("../img/lazo.svg") center / contain no-repeat;
  transition: background-color 0.25s ease;
}
/* El "oYE" dibujado, reemplaza al texto */
.brand-wordmark {
  display: block;
  height: 1.35rem; aspect-ratio: 828 / 296;
  background-color: var(--text);
  -webkit-mask: url("../img/oye.svg") left center / contain no-repeat;
  mask: url("../img/oye.svg") left center / contain no-repeat;
  transition: background-color 0.25s ease;
}
.brand .tagline { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.25rem; }

.header-controls {
  display: flex; align-items: center; gap: 0.5rem;
  flex-shrink: 0;
}

/* Mobile: el buscador pasa a su propia fila a todo el ancho y se oculta el tagline */
@media (max-width: 600px) {
  .header-top { flex-wrap: wrap; }
  .brand .tagline { display: none; }
  .header-controls { order: 2; margin-left: auto; }
  .search { order: 3; flex-basis: 100%; max-width: none; }
}

/* ---------- Buscador ---------- */
.search { position: relative; flex: 1 1 auto; min-width: 0; max-width: 26rem; }
.search input {
  width: 100%;
  padding: 0.5rem 2.25rem 0.5rem 0.85rem;
  font-size: 0.9rem;
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 9999px;
  background: var(--surface);
  outline: none;
  transition: box-shadow 0.15s, border-color 0.15s, background-color 0.25s, color 0.25s;
}
.search input::placeholder { color: var(--text-faint); }
.search input:focus {
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--primary);
}
.search .clear {
  position: absolute;
  right: 0.35rem; top: 50%; transform: translateY(-50%);
  display: none;
  align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem;
  border: none; border-radius: 9999px;
  background: transparent; color: var(--text-faint);
  cursor: pointer;
}
.search .clear:hover { background: var(--surface-2); color: var(--text); }
.search .clear svg { width: 1rem; height: 1rem; }

/* ---------- Botones pill (lupa + idioma + tema) ---------- */
.lang-menu { position: relative; flex-shrink: 0; }
.lang-btn, .theme-btn, .lang-trigger, .search-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.3rem 0.5rem;
  min-width: 2rem; height: 2rem;
  border: 1px solid var(--border-strong);
  border-radius: 9999px;
  background: var(--surface);
  color: var(--text);
  font-size: 1.05rem; line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.2s;
}
.lang-btn:hover, .theme-btn:hover, .lang-trigger:hover, .search-toggle:hover { border-color: var(--text-faint); }
.lang-btn.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent);
}
.theme-btn { flex-shrink: 0; }
.lang-trigger svg { width: 1.15rem; height: 1.15rem; }
.lang-trigger[aria-expanded="true"] { border-color: var(--primary); }
.search-toggle { flex-shrink: 0; }
.search-toggle svg { width: 1.15rem; height: 1.15rem; }
.search-toggle[aria-expanded="true"] { border-color: var(--primary); }

/* Popover con las 3 banderas */
.lang-options {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  z-index: 60;
  display: flex; gap: 0.3rem;
  padding: 0.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  box-shadow: var(--shadow-soft);
}

/* ---------- Tabs de categorías ---------- */
.tabs-bar { border-top: 1px solid var(--border); }

/* Selector Comidas | Bebidas (segmented control). Filtra qué mitad de la carta
   se ve; las reglas de data-view/data-mtype de abajo hacen el ocultado. */
.menu-switch {
  display: flex;
  gap: 0.25rem;
  width: fit-content;
  margin: 0.6rem auto 0.35rem;
  padding: 0.25rem;
  border: 1px solid var(--border);
  border-radius: 9999px;
  background: var(--surface-2);
  transition: opacity 0.2s;
}
.menu-switch-btn {
  border: 0;
  padding: 0.4rem 1.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  border-radius: 9999px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.menu-switch-btn:hover { color: var(--text); }
.menu-switch-btn.active { background: var(--primary); color: var(--tab-active-text); }

/* Filtro por grupo: .off-view oculta las secciones que no pertenecen al grupo
   activo (la maneja app.js). Mientras se busca (body.searching) el filtro se
   anula —la búsqueda es sobre TODA la carta— y el selector queda atenuado.
   :not([hidden]) preserva el ocultado de secciones sin resultados de search(). */
#menu-root .menu-section.off-view { display: none; }
body.searching #menu-root .menu-section.off-view:not([hidden]) { display: block; }
body.searching .menu-switch { opacity: 0.4; pointer-events: none; }

/* ---------- Performance ---------- */
/* Solo se pinta lo visible: las secciones fuera del viewport se saltan layout y
   paint (content-visibility) reservando un alto estimado que el navegador
   reemplaza por el real al renderizarlas. Acelera el primer pintado y el scroll
   en móviles; en navegadores viejos se ignora sin efecto. */
.menu-section { content-visibility: auto; contain-intrinsic-size: auto 900px; }
/* Reservas anti-CLS: la tira de tabs y el menú llegan tras el fetch de la carta;
   sin esto, el footer y el contenido saltan cuando aparecen. */
.tabs { min-height: 2.4rem; }
#menu-root:empty { min-height: 70vh; }

/* Con 4 grupos el selector ocupa el ancho completo en pantallas chicas:
   botones flexibles y sin desborde. */
@media (max-width: 480px) {
  .menu-switch { width: 100%; }
  .menu-switch-btn { flex: 1; padding: 0.4rem 0.5rem; font-size: 0.85rem; }
}
/* Nivel 2: tabs de categoría como tira continua con subrayado (sin burbujas),
   parte del mismo bloque de navegación que el selector de grupos (nivel 1,
   pills llenas) pero de rango menor. La línea base corre a todo lo ancho
   (inset shadow: no scrollea con el contenido) y el subrayado de la tab
   activa se apoya sobre ella. */
.tabs {
  display: flex; gap: 0.35rem;
  overflow-x: auto;
  padding: 0.15rem 0 0;
  scroll-behavior: smooth;
  scrollbar-width: none;
  box-shadow: inset 0 -1px 0 var(--border);
}
.tabs::-webkit-scrollbar { display: none; }
.tab-link {
  position: relative;
  white-space: nowrap;
  padding: 0.5rem 0.55rem 0.6rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s;
}
.tab-link::after {
  content: '';
  position: absolute; left: 0.45rem; right: 0.45rem; bottom: 0;
  height: 3px; border-radius: 3px 3px 0 0;
  background: transparent;
  transition: background 0.15s;
}
.tab-link:hover { color: var(--text); }
.tab-link.active { color: var(--primary); }
.tab-link.active::after { background: var(--primary); }

/* Pista de scroll en los tabs: degradé + chevron en el borde derecho mientras
   haya secciones ocultas hacia la derecha (clase .more, la maneja app.js).
   Tocar el chevron también avanza el carrusel. */
.tabs-wrap { position: relative; }
.tabs-wrap::after {
  content: '';
  position: absolute; top: 0; bottom: 0; right: 0; width: 4rem;
  background: linear-gradient(to right, transparent, var(--header-bg) 78%);
  pointer-events: none;
  opacity: 0; transition: opacity 0.25s;
}
.tabs-wrap.more::after { opacity: 1; }
.tabs-more {
  position: absolute; right: 0.1rem; top: 50%; transform: translateY(-50%);
  z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem;
  background: none; border: none; cursor: pointer;
  color: var(--text-muted);
  opacity: 0; pointer-events: none; transition: opacity 0.25s;
}
.tabs-wrap.more .tabs-more {
  opacity: 1; pointer-events: auto;
  animation: tabs-nudge 2.2s ease-in-out infinite;
}
@keyframes tabs-nudge {
  0%, 70%, 100% { transform: translateY(-50%) translateX(0); }
  80% { transform: translateY(-50%) translateX(3px); }
  90% { transform: translateY(-50%) translateX(0); }
}

/* ---------- Leyenda flotante plegable ---------- */
.legend {
  position: fixed;
  right: 1rem; bottom: 1rem;
  z-index: 40;
  display: flex; flex-direction: column;       /* body arriba, toggle abajo */
  width: max-content;
  max-width: min(22rem, calc(100vw - 2rem));
  background: var(--surface);                   /* sólido, como las cards */
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.legend-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  width: 100%;
  padding: 0.7rem 1rem;
  background: none; border: none; cursor: pointer;
  font: inherit; font-weight: 600; font-size: 0.85rem;
  color: var(--legend-text);
  text-align: left;
}
.legend-chevron { width: 1rem; height: 1rem; flex-shrink: 0; transition: transform 0.2s ease; }
.legend.open .legend-chevron { transform: rotate(180deg); }
.legend-body {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
}
.legend-symbols { display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.85rem; }
.legend-symbols div { display: flex; align-items: center; gap: 0.5rem; }
.legend-note {
  margin: 0.85rem 0 0; padding-top: 0.85rem;
  border-top: 1px solid var(--border);
  font-size: 0.78rem; color: var(--text-muted);
}

/* ---------- Secciones y cards ---------- */
main { padding-bottom: 6rem; }
#menu-root { margin-top: 2rem; display: flex; flex-direction: column; gap: 3.5rem; }

.menu-section { scroll-margin-top: 8rem; }
.menu-section > h2 {
  font-family: var(--font-display);
  font-size: 1.6rem; margin: 0 0 1.25rem;
}
@media (min-width: 768px) { .menu-section > h2 { font-size: 1.9rem; } }
.menu-section > .section-note {
  margin: -0.75rem 0 1.5rem;
  color: var(--legend-text);
  font-size: 0.9rem; font-style: italic;
}
.group > .group-note {
  margin: 0.6rem 0 0;
  color: var(--legend-text);
  font-size: 0.78rem; font-style: italic;
}
/* Maridaje: botón alineado a la derecha del título del grupo. Es sticky dentro
   del grupo: al scrollear queda flotando arriba a la derecha (debajo del header)
   hasta que el grupo termina. La sugerencia se abre en un popover bajo el botón. */
.pairing-sticky {
  position: sticky;
  /* Despeja el header sticky midiendo su altura real (la setea app.js);
     fallback por si JS no corrió todavía. */
  top: calc(var(--header-h, 7.25rem) + 0.5rem);
  z-index: 30;             /* sobre las cards, debajo del header (50) */
  height: 0;               /* no ocupa lugar: el botón se superpone a la fila del título */
  display: flex;
  justify-content: flex-end;
}
/* Mismo lenguaje visual que el botón "Símbolos de dieta" (sólido, redondeado,
   texto semibold ámbar), para que flote con presencia y sin transparentarse. */
.pairing-toggle {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 0.95rem;
  font-size: 0.8rem; font-weight: 600; font-family: var(--font-sans);
  color: var(--legend-text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--shadow-soft);
  transition: background-color 0.2s, border-color 0.2s;
}
.pairing-toggle svg { width: 16px; height: 16px; }
.pairing-toggle svg { display: block; }
.pairing-toggle .wine { fill: var(--primary); }
.pairing-toggle:hover { border-color: var(--accent); }
.pairing-toggle[aria-expanded="true"] {
  background: var(--match-bg);
  border-color: var(--accent);
}
.pairing-pop {
  position: absolute;
  right: 0; top: 2.9rem;
  width: min(20rem, 80vw);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 0.7rem;
  padding: 0.6rem 0.8rem;
  box-shadow: var(--shadow-soft);
  font-size: 0.8rem; font-style: italic;
  color: var(--legend-text);
}

/* ---------- Glosario japonés: término tocable + burbuja ---------- */
/* Subrayado punteado ámbar = pista de "tocá para ver qué significa". */
.jp-term {
  cursor: pointer;
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.18em;
  border-radius: 3px;
  transition: background-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.jp-term:hover,
.jp-term.jp-open { background: var(--match-bg); }
.jp-term:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.jp-bubble {
  position: fixed;
  z-index: 80;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 0.7rem;
  padding: 0.6rem 0.75rem;
  box-shadow: var(--shadow-soft);
  font-size: 0.82rem;
  line-height: 1.42;
  color: var(--text-muted);
  animation: jp-pop 0.12s ease-out;
}
.jp-bubble-term {
  display: block;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  text-transform: capitalize;
  color: var(--legend-text);
  margin-bottom: 0.18rem;
}
.jp-bubble-caret {
  position: absolute;
  top: -6px;
  width: 11px; height: 11px;
  background: var(--surface);
  border-left: 1px solid var(--border-strong);
  border-top: 1px solid var(--border-strong);
  transform: translateX(-50%) rotate(45deg);
}
.jp-bubble.above .jp-bubble-caret {
  top: auto; bottom: -6px;
  border-left: none; border-top: none;
  border-right: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
}
@keyframes jp-pop { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

/* ---------- Hint de onboarding del glosario (una sola vez) ---------- */
/* Pulso suave sobre el primer término para llamar la atención. */
@keyframes jp-hint-glow {
  0%, 100% { background-color: transparent; }
  50% { background-color: var(--match-bg); }
}
.jp-term.jp-hint-pulse {
  animation: jp-hint-glow 1.4s ease-in-out infinite;
  border-radius: 4px;
}
.jp-hint {
  position: fixed;
  left: 50%;
  bottom: 1.1rem;
  transform: translateX(-50%);
  z-index: 70;
  width: min(23rem, calc(100vw - 2rem));
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 0.9rem;
  box-shadow: var(--shadow-soft);
  padding: 0.85rem 1rem 0.9rem;
  animation: jp-hint-in 0.25s ease-out;
}
@keyframes jp-hint-in {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.jp-hint-badge {
  display: inline-block;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--badge-text); background: var(--accent);
  padding: 0.1rem 0.5rem; border-radius: 9999px; margin-bottom: 0.45rem;
}
.jp-hint p { margin: 0 0 0.75rem; font-size: 0.9rem; line-height: 1.42; color: var(--text); }
.jp-hint-cta {
  font-size: 0.82rem; font-weight: 600; font-family: var(--font-sans);
  color: var(--badge-text); background: var(--primary);
  border: none; border-radius: 0.6rem; padding: 0.42rem 0.95rem; cursor: pointer;
}
.jp-hint-cta:hover { filter: brightness(1.06); }
.jp-hint-close {
  position: absolute; top: 0.35rem; right: 0.5rem;
  background: none; border: none; cursor: pointer;
  color: var(--text-faint); font-size: 0.85rem; line-height: 1; padding: 0.2rem;
}
.jp-hint-close:hover { color: var(--text); }

/* Grupos de extras/adicionales: compactos, una línea por item, todos juntos
   dentro de una caja igual a la de los platos para que se lean como agregado. */
.group.extras {
  margin-top: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: var(--shadow-soft);
  transition: background-color 0.25s, border-color 0.25s;
}
.group.extras > h3 { font-size: 1rem; margin: 0 0 0.4rem; }
.extras-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; column-gap: 2rem; row-gap: 0.1rem;
}
@media (min-width: 700px) {
  .extras-list { grid-template-columns: 1fr 1fr; }
}
.extras-list .card {
  background: none; border: none; border-radius: 0; box-shadow: none;
  padding: 0.28rem 0.1rem;
  display: flex; align-items: baseline; gap: 0.45rem;
  font-size: 0.92rem;
}
.extras-list .x-name { font-weight: 500; }
.extras-list .x-desc { color: var(--text-muted); font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.extras-list .x-leader { flex: 1; min-width: 1.2rem; border-bottom: 1px dotted var(--border-strong); transform: translateY(-0.22em); }
.extras-list .x-price { color: var(--primary); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.group { margin-bottom: 2rem; }
.group > h3 { font-size: 1.15rem; font-weight: 600; margin: 0 0 0.75rem; }

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cards { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: var(--shadow-soft);
  transition: background-color 0.25s, border-color 0.25s;
}
.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.card .body { flex: 1; min-width: 0; }
.item-name {
  font-weight: 600; letter-spacing: 0.01em;
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  margin: 0;
}
.item-desc { margin: 0.3rem 0 0; font-size: 0.85rem; color: var(--text-muted); line-height: 1.45; }
.item-price { flex-shrink: 0; font-weight: 700; color: var(--primary); white-space: nowrap; }
.price-note { display: block; font-size: 0.7rem; font-weight: 500; color: var(--text-faint); }

/* Badges e iconos */
.new-badge {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--badge-text); background: var(--accent);
  padding: 0.1rem 0.45rem; border-radius: 9999px;
}
.diet-icons { display: flex; align-items: center; gap: 0.25rem; margin-top: 0.5rem; font-size: 0.95rem; }
.diet-icon { cursor: default; }

/* Badge "Agotado": etiqueta llena y bien visible para crear urgencia */
.sold-out-badge {
  font-size: 0.64rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff; background: var(--primary);
  padding: 0.14rem 0.55rem; border-radius: 9999px; white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Item agotado: el contenido se apaga (vía color, no opacity, para que el badge
   siga resaltando) y el precio queda tachado: refuerza que no se puede pedir. */
.card.sold-out .item-name .i-name,
.card.sold-out .item-desc { color: var(--text-faint); }
.card.sold-out .item-price { color: var(--text-faint); text-decoration: line-through; }
.card.sold-out .diet-icons { opacity: 0.45; }
.extras-list .card.sold-out .x-name,
.extras-list .card.sold-out .x-desc { color: var(--text-faint); }
.extras-list .card.sold-out .x-price { text-decoration: line-through; color: var(--text-faint); }

/* ---------- Buscador: resaltado y vacío ---------- */
.search-match { background: var(--match-bg); border-radius: 3px; padding: 0 1px; }
.no-results {
  text-align: center; color: var(--text-muted);
  padding: 3rem 1rem; font-size: 0.95rem;
}
[hidden] { display: none !important; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); }
.footer-grid {
  display: grid; grid-template-columns: 1fr; gap: 1.5rem;
  padding: 2.5rem 0; font-size: 0.88rem;
}
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } }
.site-footer .name { font-family: var(--font-display); font-size: 1.1rem; }
.site-footer p { color: var(--text-muted); margin: 0.25rem 0 0; }
.site-footer .h { font-weight: 600; margin-bottom: 0.4rem; }

/* ===================================================================
   Comprar en mostrador
   Elegir bebidas de la misma carta, pagar y retirar en la barra.

   Usa los tokens de arriba y nada más: el rojo de marca para lo que se
   toca, --surface para las superficies, --radius para las esquinas. Si
   mañana cambia la paleta, esto cambia con ella.

   Todo lo de acá aparece SOLO si el bot dice que la compra está abierta
   (assets/js/carrito.js). Con la compra cerrada, el menú se ve como
   siempre.
=================================================================== */

/* --- Los botones sobre cada tarjeta ---
   VAN EN LA COLUMNA DEL PRECIO, debajo del precio. Colgados de la tarjeta
   sumaban una fila entera a cada una y con el modo prendido la carta casi
   duplicaba el alto. El hueco de abajo del precio ya estaba vacío: en las
   tarjetas con descripción de dos líneas —la mayoría de los cócteles— el
   botón entra ahí y no agrega NADA de alto.

   Por eso `.card-top` pasa a grid, pero solo en las tarjetas comprables: la
   carta sin el modo de venta sigue siendo el flex de siempre. */
.card[data-mostrador] .card-top {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 0.75rem; row-gap: 0.4rem;
  align-items: start;
}
/* El cuerpo ocupa las dos filas: es lo que hace que el botón caiga DENTRO del
   alto que la descripción ya ocupaba, en vez de empujarlo hacia abajo. */
.card[data-mostrador] .body { grid-column: 1; grid-row: 1 / span 2; }

/* EL PRECIO ES EL BOTÓN. La tarjeta comprable no muestra el precio-texto y un
   botón «Agregar» aparte: muestra UNA pill roja con el precio adentro. Es el
   elemento que ya se estaba mirando para decidir, convertido en el lugar donde
   se toca — un solo target de ~48px, que se ve con una mano y poca luz. Al
   apagar el modo la tarjeta pierde data-mostrador y el precio-texto vuelve. */
.card[data-mostrador] .item-price { display: none; }

.mos-acciones {
  display: flex; align-items: center; justify-content: flex-end;
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
}

.mos-add {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  font: inherit; font-size: 0.95rem; font-weight: 800; font-variant-numeric: tabular-nums;
  cursor: pointer; white-space: nowrap;
  min-height: 3rem; padding: 0 1.1rem;
  border: 0; border-radius: 9999px;
  background: var(--primary); color: var(--on-primary);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--primary) 25%, transparent);
  transition: transform 0.06s ease, filter 0.15s;
  touch-action: manipulation;
}
.mos-add:active { transform: scale(0.96); }
.mos-add:hover { filter: brightness(1.06); }
.mos-add .mos-add-mas { font-size: 1.2rem; line-height: 1; opacity: 0.75; }

/* Con el item ya en el pedido, la pill se vuelve stepper: mismos ~48px de
   alto, − y + con su propia zona de toque cada uno. */
.mos-step {
  display: inline-flex; align-items: center;
  min-height: 3rem; border-radius: 9999px;
  border: 1.5px solid var(--primary);
  background: color-mix(in srgb, var(--primary) 13%, transparent);
}
.mos-step-btn {
  font: inherit; font-size: 1.25rem; font-weight: 700; line-height: 1;
  min-width: 2.6rem; align-self: stretch; padding: 0;
  border: 0; background: none; color: var(--primary); cursor: pointer;
  touch-action: manipulation; transition: transform 0.06s ease;
}
.mos-step-btn:active { transform: scale(0.88); }
.mos-n {
  min-width: 1.4rem; text-align: center; font-weight: 800;
  font-variant-numeric: tabular-nums; color: var(--text);
}

/* --- La barra de abajo ---
   En modo venta está SIEMPRE: vacía es la promesa («tocá el precio, retirás
   en la barra»), con items es total + pagar. Que apareciera y desapareciera
   con cada cambio del carrito movía la carta y mareaba. El resumen va a la
   izquierda y el botón llena el resto: una fila, alcanzable con el pulgar. */
.mos-barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; gap: 1rem;
  padding: 0.8rem 1.1rem calc(0.8rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
}
.mos-barra.vacia { justify-content: center; }
.mos-barra-hint { color: var(--text-muted); font-size: 0.9rem; text-align: center; }
.mos-barra-info {
  display: flex; flex-direction: column; gap: 0.1rem;
  line-height: 1.2; flex-shrink: 0; min-width: 0;
}
.mos-barra-n {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted); white-space: nowrap;
}
.mos-barra-total {
  font-family: var(--font-display); font-size: 1.45rem; font-weight: 800;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.mos-comprar {
  width: 100%; flex: 1; font: inherit; font-weight: 800; cursor: pointer;
  border: 0; border-radius: 9999px; min-height: 3.4rem; padding: 0.6rem 1.15rem;
  background: var(--primary); color: var(--on-primary);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--primary) 28%, transparent);
  transition: transform 0.06s ease, opacity 0.2s;
  touch-action: manipulation;
}
.mos-comprar:active { transform: scale(0.97); }
/* Con la barra puesta, el final de la carta queda tapado. */
body.con-carrito { padding-bottom: 6.5rem; }

/* --- La hoja del checkout --- */
.mos-capa {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0, 0, 0, 0.5);
}
@media (min-width: 640px) { .mos-capa { align-items: center; } }
.mos-hoja {
  position: relative; width: 100%; max-width: 28rem;
  max-height: 88vh; overflow-y: auto;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
}
@media (min-width: 640px) { .mos-hoja { border-radius: var(--radius); } }
.mos-hoja h2 { font-family: var(--font-display); font-size: 1.4rem; margin: 0 0 1rem; }
.mos-cerrar {
  position: absolute; top: 0.9rem; right: 0.9rem;
  font: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer;
  background: none; border: 0; color: var(--text-muted); padding: 0.4rem;
}
/* El asa de la hoja: dice «esto se desliza» sin ocupar un botón. */
.mos-asa {
  width: 44px; height: 4px; border-radius: 9999px;
  background: var(--border-strong); margin: -0.4rem auto 0.9rem;
}
.mos-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
/* Cada renglón trae su stepper: las cantidades se corrigen ACÁ, sin volver a
   la carta a buscar la tarjeta. */
.mos-lista li {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.55rem 0.7rem; background: var(--surface-2); border-radius: 0.7rem;
}
.mos-lista-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.mos-lista-nom { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mos-lista-cu { font-size: 0.78rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.mos-lista-p {
  min-width: 4.4rem; text-align: right; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* Dentro de la hoja el stepper afloja un poco: los renglones son angostos. */
.mos-lista .mos-step { min-height: 2.7rem; }
.mos-lista .mos-step-btn { min-width: 2.3rem; font-size: 1.1rem; }
.mos-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--border);
  font-size: 1.05rem;
}
.mos-total strong {
  font-family: var(--font-display); font-size: 2rem; font-weight: 800;
  color: var(--primary); font-variant-numeric: tabular-nums;
}

/* El checkout ya no pide nombre: se va del carrito derecho a pagar. El QR
   identifica el pedido, así que el campo era un paso de más. */

.mos-aviso { margin: 0.9rem 0 0; color: var(--primary); font-size: 0.9rem; }
.mos-pagar {
  width: 100%; margin-top: 1.25rem; font: inherit; font-size: 1.05rem; font-weight: 800;
  cursor: pointer; border: 0; border-radius: 9999px; min-height: 3.6rem; padding: 0.95rem;
  background: var(--primary); color: var(--on-primary);
  box-shadow: 0 12px 34px color-mix(in srgb, var(--primary) 30%, transparent);
  transition: transform 0.06s ease, opacity 0.2s;
  touch-action: manipulation;
}
.mos-pagar:active { transform: scale(0.99); }
.mos-pagar:disabled { opacity: 0.6; cursor: default; }
.mos-letra-chica { margin: 0.9rem 0 0; color: var(--text-muted); font-size: 0.8rem; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .mos-add, .mos-step-btn, .mos-comprar, .mos-pagar { transition: none; }
}

/* --- La hoja del QR ---
   El pedido pagado, sin salir del menú: antes era un link a /pedido.html y
   sacaba a la persona de la carta justo cuando lo más probable es que quiera
   seguir pidiendo. La página suelta sigue existiendo (es a donde devuelve
   Mercado Pago y a donde apunta el link de WhatsApp); esto es la versión de
   adentro. */
.mos-qr-hoja { text-align: center; }
.mos-qr-hoja h2 { font-family: var(--font-display); font-size: 1.35rem; margin: 0 0 0.4rem; }
.mos-qr-badge {
  display: inline-flex; align-items: center;
  border: 1px solid var(--accent); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  font-weight: 700; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.3rem 0.8rem; border-radius: 999px; margin-bottom: 1rem;
}
.mos-qr-prueba {
  display: inline-block; margin: 0 0 0.6rem; padding: 0.3rem 0.8rem;
  border: 2px solid var(--accent); border-radius: 999px;
  color: var(--accent); font-weight: 700; font-size: 0.8rem;
}
/* EL PANEL DEL QR — las reglas de acá se pagan en la barra, no en la pantalla.
   Son las mismas que ya se aprendieron con los QR de preventa
   (oye-whatsapp-bot, public/mi-ingreso.html): ahí hubo códigos que se veían
   perfectos y no los leía nadie.

   · BLANCO PURO, no el crema de la marca: el escáner binariza la imagen, y
     cada punto de contraste que se le regala se paga con el teléfono a bajo
     brillo, la pantalla rayada y la luz del bar. Es el único lugar donde se
     invierte la paleta, en los dos temas.
   · PADDING 0: la zona tranquila la pone el propio SVG (`margin: 32` en
     createSvgTag, ver carrito.js). Si además la pusiera el contenedor, el
     margen se contaría dos veces y el QR quedaría chico. */
.mos-qr-panel {
  width: min(64vw, 15rem); max-width: 100%; aspect-ratio: 1;
  margin: 0 auto; padding: 0; overflow: hidden;
  display: grid; place-items: center;
  background: #fff; border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.mos-qr-panel svg {
  width: 100%; height: 100%; display: block;
  /* Sin esto el navegador suaviza el borde de cada módulo. A 8 px por módulo
     el difuminado se come una franja de cada cuadrado, y lo que la cámara ve
     deja de ser blanco y negro: es gris contra gris. */
  shape-rendering: crispEdges;
  /* Que ningún modo de alto contraste del sistema le toque los colores. */
  forced-color-adjust: none;
}
/* Afuera del panel: adentro le comería zona tranquila al código. */
.mos-qr-cap {
  margin: 0.7rem 0 0.25rem; font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted);
}
/* El visor a pantalla completa (assets/js/qr-visor.js). El botón queda a la
   vista aunque el panel también se toque —nadie descubre un gesto que nadie
   le contó— y el consejo del brillo va ACÁ, antes de la barra: un aviso
   adentro del visor es invisible hasta después de haber hecho lo que
   aconseja (la lección del caso Baez, en las reservas). */
.mos-qr-grande {
  display: block; margin: 0.8rem auto 0;
  font: inherit; font-size: 0.85rem; font-weight: 700;
  padding: 0.55rem 1.1rem; border-radius: 9999px; cursor: pointer;
  border: 1px solid var(--text-muted); background: transparent; color: var(--text);
}
.mos-qr-brillo { margin: 0.55rem 0 0.8rem; font-size: 0.8rem; color: var(--text-muted); }
/* Sobre el panel blanco, texto oscuro fijo: el token del tema sería ilegible. */
.mos-qr-sinlib { margin: 0; padding: 1rem; color: #211c16; font-size: 0.85rem; }
.mos-qr-cod {
  font-family: ui-monospace, Menlo, monospace; letter-spacing: 0.08em;
  color: var(--text-faint); font-size: 0.72rem; margin: 0 0 1.1rem;
}
/* «No lo pierdas»: en el ámbar de aviso y con su fondo, para que se lea como
   una advertencia y no como un pie de página. Va pegado al QR porque ese es el
   único momento en que la persona lo está mirando — y perderlo significa volver
   a la barra sin nada que mostrar. */
.mos-qr-guardalo {
  margin: 0 0 1.1rem; padding: 0.7rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 0.7rem;
  color: var(--legend-text); font-size: 0.85rem; line-height: 1.4;
}
.mos-qr-guardalo strong { color: var(--legend-text); font-weight: 800; }
.mos-qr-lista { text-align: left; margin-bottom: 0.25rem; }
.mos-qr-wa {
  display: block; width: 100%; margin-top: 1rem;
  font: inherit; font-size: 1rem; font-weight: 700;
  text-decoration: none; text-align: center;
  border-radius: 9999px; padding: 0.9rem;
  background: #25d366; color: #08301a;
}
/* El disco girando mientras el pago acredita: el rato muerto del flujo. */
.rpm-espera-hoja { --rpm-d: min(48vw, 9rem); margin: 0.5rem auto 1.25rem; }

/* ===================================================================
   «Pedí sin fila» — el switch que enciende la compra desde la carta
   -------------------------------------------------------------------
   Los dos nombres anteriores no se tocaron: «45 RPM» era un chiste que
   solo cierra para quien sabe que 45 es la velocidad del single, y «oYE
   Live» se entendía como palabra pero no prometía nada. Este dice el
   beneficio con el verbo adelante. El ícono queda: la bola de espejos,
   que gira cuando el modo está al aire.

   APAGADO es EXACTAMENTE el mismo pill que la lupa, el idioma y el tema:
   mismo fondo, mismo borde, mismo alto. Antes era ámbar y era el único
   naranja del header — saltaba, sí, pero no entonaba con nada. Neutro no
   pierde nada: lo que hace que se mire es la bola, no el color, y es el
   único de los cuatro con texto al lado.

   ENCENDIDO deja de ser un control y pasa a ser LA CABINA: fondo casi
   negro y la bola girando y destellando adentro. El negro no es
   decoración — los destellos NECESITAN fondo oscuro, sobre cualquier
   color claro se pierden. Y contra el neutro de al lado el cambio se ve
   más que cuando el apagado ya venía coloreado.

   La bola no gira para llamar la atención: girando quiere decir una sola
   cosa. Antes del primer uso late el filete, en el rojo de la marca —
   que es el mismo idioma que el foco y la categoría activa.

   Vive en el header, pegado a la lupa: es lo primero que se ve al abrir
   la carta.
=================================================================== */
.mos-modo-btn {
  --live-placa: #14100e;
  display: inline-flex; align-items: center; gap: 0.3rem;
  height: 2rem; padding: 0 0.75rem 0 0.4rem;
  border: 1px solid var(--border-strong); border-radius: 9999px; cursor: pointer;
  font: inherit; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.02em;
  white-space: nowrap; flex-shrink: 0;
  background: var(--surface); color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.2s, color 0.2s,
    transform 0.12s ease;
}
.mos-modo-btn[hidden] { display: none; }
.mos-modo-btn:hover { border-color: var(--text-faint); }
.mos-modo-btn:active { transform: scale(0.96); }
.mos-modo-btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* LA BOLA ES UN OBJETO, no una luz detrás de un vidrio: la dibuja
   assets/js/bola.js sobre un canvas —esfera, espejos, dos luces de sala y
   destellos especulares— y el canvas es MÁS GRANDE que la bola para que los
   destellos tengan a dónde salir. Por eso acá no hay ni fondo ni bisel: solo
   la caja.

   El degradado es el PLAN B, para cuando bola.js no cargó: una esfera quieta.
   Se apaga solo si el canvas terminó dibujando algo encima. */
.mos-modo-bola {
  width: 1.35rem; height: 1.35rem; flex: none; display: block;
  background:
    radial-gradient(circle 0.3rem at 40% 36%, rgba(255, 238, 214, 0.28), transparent 72%),
    radial-gradient(circle 0.48rem at 50% 50%, #2a2420 0 100%, transparent 100%);
}

/* Antes del primer uso respira el filete, en el rojo de la marca: es el mismo
   recurso que ya usan el foco y el idioma elegido, así que no estrena nada.
   El pill no se pinta — sigue siendo uno más de la fila hasta que lo tocan. */
.mos-modo-btn.nuevo {
  border-color: var(--primary);
  animation: mos-modo-respirar 2.8s ease-in-out infinite;
}
/* Un pulso que sale y se disuelve, no un latido: al volver ya está en cero, así
   que se expande UNA vez por ciclo y no dos. */
@keyframes mos-modo-respirar {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 34%, transparent); }
  70% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 0%, transparent); }
}

/* AL AIRE: la cabina a oscuras y la bola trabajando adentro. El filete y el
   halo son cálidos — la luz que tira una bola de espejos es la de la sala. */
.mos-modo-btn.on {
  background: var(--live-placa); color: #fff1e2;
  border-color: rgba(255, 196, 130, 0.38);
  box-shadow: 0 0 16px rgba(255, 178, 104, 0.28);
}
.mos-modo-btn.on:hover { border-color: rgba(255, 210, 160, 0.6); }

[data-theme="dark"] .mos-modo-btn {
  /* Sobre el header oscuro (#161311) la cabina tiene que ser MÁS clara que el
     fondo, no más oscura, o desaparece. */
  --live-placa: #241c17;
}

@media (prefers-reduced-motion: reduce) {
  .mos-modo-btn { transition: none; animation: none !important; }
}

/* La misma bola, dentro del texto del instructivo: es donde se aprende qué
   significa. Más grande, porque compite con el cuerpo del texto. */
.mos-ex-bola {
  display: inline-block; vertical-align: -0.42em;
  width: 1.7rem; height: 1.7rem;
}

/* ===================================================================
   El single girando — la pieza de marca del modo de venta
   -------------------------------------------------------------------
   Lo que hace que se lea como un OBJETO y no como un ícono girando:
   LA LUZ NO GIRA. El reflejo se queda quieto y el disco pasa por
   abajo, que es lo que hace un vinilo real bajo la luz de una sala.
   Un brillo que rota pegado al disco delata el truco enseguida.

   Por eso son capas apiladas y no un SVG: `.rpm-disco` gira,
   `.rpm-luz` no, y las dos comparten la misma inclinación del plato.

   Los surcos existen solo entre el sello y el canto — donde hay
   música. El agujero es grande a propósito: es LA firma visual del
   single de 45 contra el LP, y el disco tiene que decir su nombre sin
   que haya que leerlo.

   Gira a 45 RPM de verdad: 60/45 = 1,3333 s por vuelta. Ese dato ya no
   está en el nombre del modo, pero sigue siendo el que hace que el
   movimiento se lea bien: más lento parece un LP, más rápido, un truco.
=================================================================== */
.rpm-escena {
  --rpm-d: 13rem;             /* el diámetro; cada pantalla lo pisa */
  --rpm-vinilo: #100c09;      /* negro CÁLIDO: el neutro se ve a plástico */
  position: relative;
  width: var(--rpm-d);
  /* Inclinado, el círculo proyecta una elipse de cos(54°) ≈ 0,59 de alto.
     El resto es aire para la sombra. */
  height: calc(var(--rpm-d) * 0.68);
  margin-inline: auto;
  perspective: 900px;
  perspective-origin: 50% 42%;
}
/* La sombra de ambiente, apoyada en el piso y no en el plano del disco. */
.rpm-escena::before {
  content: "";
  position: absolute; z-index: 0;
  left: 10%; right: 10%; bottom: -2%; height: 20%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.45), transparent 72%);
  filter: blur(7px);
}
.rpm-plato {
  position: absolute; z-index: 1;
  left: 0; right: 0;
  /* La caja es más baja que el cuadrado del disco: se recentra a mano. */
  top: calc(var(--rpm-d) * -0.16);
  height: var(--rpm-d);
  transform: rotateX(54deg);
}
.rpm-disco {
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    /* el canto, apenas más claro que la masa */
    radial-gradient(circle at 50% 50%,
      transparent 0 95.5%, rgba(255, 255, 255, 0.11) 96% 98%, transparent 98.6%),
    /* la masa del vinilo, que se oscurece hacia el borde */
    radial-gradient(circle at 50% 50%, #1a1510 0%, var(--rpm-vinilo) 55%, #070504 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  animation: rpm-girar 1.3333s linear infinite;
  will-change: transform;
}
@keyframes rpm-girar { to { transform: rotate(360deg); } }

.rpm-surcos {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: repeating-radial-gradient(circle at 50% 50%,
    rgba(0, 0, 0, 0.40) 0 0.9px,
    rgba(255, 255, 255, 0.05) 0.9px 1.9px);
  /* Solo la zona de púa. Antes del primer surco y después del último el
     disco es liso, y esa diferencia es la que se nota. */
  -webkit-mask: radial-gradient(circle at 50% 50%,
    transparent 0 27%, #000 33% 92%, transparent 96%);
  mask: radial-gradient(circle at 50% 50%,
    transparent 0 27%, #000 33% 92%, transparent 96%);
}

/* El sello. Es lo ÚNICO asimétrico del disco: todo lo demás son círculos
   concéntricos, iguales en cualquier ángulo, y sin esto girar no se ve. */
.rpm-sello {
  position: absolute; inset: 27%;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.28);
}
.rpm-sello::before {
  content: "";
  position: absolute;
  left: 28%; right: 28%; top: 11%;
  aspect-ratio: 828 / 296;
  background-color: rgba(0, 0, 0, 0.66);
  -webkit-mask: url("/assets/img/oye.svg") center / contain no-repeat;
  mask: url("/assets/img/oye.svg") center / contain no-repeat;
}
/* El filete impreso del sello. Antes acá había un renglón horizontal y se
   leía como un rayón en el disco, no como parte de la etiqueta. */
.rpm-sello::after {
  content: "";
  position: absolute; inset: 9%;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.16);
}

/* Oscuro fijo en los dos temas: lo que se ve por el agujero es la bandeja,
   no la página. Con el fondo claro quedaba un punto blanco que se leía como
   una luz encendida en el medio del disco. */
.rpm-hueco {
  position: absolute; inset: 41.5%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 32%, #2b241e, #0c0908 78%);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(0, 0, 0, 0.3);
}

/* El reflejo. NO gira: es la sala, no el disco. */
.rpm-luz {
  position: absolute; inset: 0;
  border-radius: 50%;
  /* Dos lóbulos casi opuestos, como cualquier superficie brillante bajo una
     luz cálida: uno fuerte y uno de rebote. */
  background: conic-gradient(from 196deg,
    transparent 0deg,
    rgba(255, 236, 208, 0.17) 18deg,
    rgba(255, 246, 232, 0.38) 38deg,
    rgba(255, 236, 208, 0.15) 58deg,
    transparent 88deg,
    transparent 170deg,
    rgba(255, 236, 208, 0.10) 194deg,
    rgba(255, 246, 232, 0.22) 214deg,
    transparent 248deg,
    transparent 360deg);
  -webkit-mask: radial-gradient(circle at 50% 50%,
    transparent 0 28%, #000 38% 91%, transparent 96%);
  mask: radial-gradient(circle at 50% 50%,
    transparent 0 28%, #000 38% 91%, transparent 96%);
  mix-blend-mode: screen;
  filter: blur(1.5px);
  pointer-events: none;
}

/* Sobre fondo claro el disco sigue siendo negro —un vinilo es negro— pero la
   sombra tiene que aflojar o se ve un manchón. */
[data-theme="light"] .rpm-escena::before {
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.22), transparent 72%);
}

/* Quieto sigue siendo el mismo objeto: se congela el giro, no se esconde. */
@media (prefers-reduced-motion: reduce) {
  .rpm-disco { animation: none; }
}

/* El rescate: alguien pagó y no volvió. Va ARRIBA de todo y en el ámbar de
   aviso, no abajo con la barra del carrito — es lo que tiene que ver apenas
   abre el menú, no algo que se descubre scrolleando.

   PEGAJOSO, y esto no es un detalle: mientras haya un pedido en juego, este
   banner es la ÚNICA forma de volver al QR después de cerrar la hoja. Estático
   se iba con el scroll, así que quien cerraba el QR y bajaba dos pantallas se
   quedaba sin manera de recuperarlo salvo recargar la página — algo que a
   alguien no técnico no se le ocurre, y menos con un trago en la mano.

   Se apoya arriba de todo (z-index 60, sobre el header que está en 50) y el
   header pasa a pegarse DEBAJO suyo: los dos quedan a la vista, sin taparse. La
   altura la mide carrito.js, porque depende de cuánto texto entre. */
.mos-pendiente {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.7rem 1rem; background: var(--accent); color: var(--badge-text);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}
.mos-pendiente[hidden] { display: none; }
/* Con el banner puesto, el header se pega abajo de él en vez de en el borde. */
body.con-pendiente .site-header { top: var(--pend-alto, 0px); }
/* Y lo que ya se despejaba del header —el botón de maridaje— suma el banner:
   si no, queda escondido detrás cuando los dos están pegados arriba. */
body.con-pendiente .pairing-sticky {
  top: calc(var(--header-h, 7.25rem) + var(--pend-alto, 0px) + 0.5rem);
}
.mos-pend-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.mos-pend-txt strong { font-size: 0.92rem; }
.mos-pend-txt span { font-size: 0.8rem; opacity: 0.85; }
.mos-pend-btn {
  flex: none; text-decoration: none; white-space: nowrap;
  background: var(--badge-text); color: var(--accent);
  font-weight: 800; font-size: 0.85rem;
  padding: 0.5rem 0.9rem; border-radius: 9999px;
}

/* "Ver mi QR" es un <a>, no un <button>: hay que darle la misma pinta que el
   botón de pagar para que no se lea como un link suelto. */
a.mos-pagar { display: block; text-decoration: none; text-align: center; box-sizing: border-box; }

/* El modal que explica la mecánica la primera vez. */
.mos-explica { text-align: left; }
/* El disco arriba del todo: el objeto primero, el nombre después, y recién
   ahí los tres pasos. Es la única vez que alguien ve esta pantalla. */
.mos-explica .rpm-escena { --rpm-d: min(56vw, 11.5rem); margin-bottom: 1.1rem; }
.mos-explica h2 { font-family: var(--font-display); font-size: 1.5rem; margin: 0 0 .3rem; }
.mos-ex-sub { color: var(--text-muted); margin: 0 0 1.25rem; line-height: 1.45; }
.mos-pasos { margin: 0 0 1.25rem; padding-left: 1.2rem; display: grid; gap: .6rem; }
.mos-pasos li { line-height: 1.45; }
.mos-ex-nota { color: var(--text-muted); font-size: .85rem; margin: 0 0 1.25rem; }
.mos-ex-no {
  display: block; width: 100%; margin-top: .6rem; padding: .8rem;
  font: inherit; font-weight: 600; color: var(--text-muted);
  background: none; border: 0; cursor: pointer;
}

/* ===================================================================
   Pedí sin fila — la franja del modo venta
   -------------------------------------------------------------------
   Debajo del header, mientras el modo está prendido: dice qué es esto
   y cómo termina (retirás en la barra) sin abrir ningún modal. Es el
   instructivo hecho estado permanente — quien llega por el QR de la
   barra entra con el modo prendido y no ve el modal nunca.
=================================================================== */
/* En modo venta la carta ES la tienda de la barra: Comidas se va entera —
   botón del selector y secciones— porque no se compra por acá y solo estorba
   entre el QR y el trago. Vuelve tal cual al apagar el modo. El display:none
   del section le gana también al modo búsqueda (que revive las .off-view). */
body.mos-on .menu-switch-btn[data-view="food"] { display: none; }
body.mos-on .menu-section[data-mtype="food"] { display: none !important; }

.mos-franja {
  display: flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.55rem 1rem;
  background: color-mix(in srgb, var(--primary) 10%, var(--bg));
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem; line-height: 1.35; text-align: center;
}
.mos-franja[hidden] { display: none; }
.mos-franja strong { color: var(--primary); }
/* La bola chica de la franja: canvas de bola.js, con el mismo plan B quieto
   que la del header por si el script no cargó. */
.mos-franja-bola {
  width: 18px; height: 18px; flex: none; display: block; border-radius: 50%;
  background:
    radial-gradient(circle 4px at 40% 36%, rgba(255, 238, 214, 0.28), transparent 72%),
    radial-gradient(circle 7px at 50% 50%, #2a2420 0 100%, transparent 100%);
}

/* El QR del cartel promete comprar: si se escaneó con la compra cerrada (o el
   bot caído), lo honesto es decirlo — no mostrar una carta idéntica a la de
   siempre y dejar a la persona buscando botones que no van a aparecer. */
.mos-cerrado {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.7rem 1rem;
  background: var(--surface-2); border-bottom: 1px solid var(--border);
  color: var(--text-muted); font-size: 0.85rem; line-height: 1.35; text-align: center;
}
.mos-cerrado button {
  font: inherit; background: none; border: 0; color: var(--text-faint);
  cursor: pointer; padding: 0.3rem; flex: none;
}