/* ===================================================================
   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;

  --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;

  --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 oYE Live 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 oYE Live 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; }
.card[data-mostrador] .item-price { grid-column: 2; grid-row: 1; }

/* PEGADO A LA DERECHA, y esta línea es la que importa.
   En flex el precio mide lo que mide su texto y queda contra el borde. En la
   grilla la celda se estira al ancho del botón —que es mayor: "Agregar" mide
   82px y "− 1 +" 100px, contra 60-71px del precio— y el texto se quedaba
   alineado a la izquierda DENTRO de la celda. Eso era lo que corría los
   precios al prender oYE Live, y distinto en cada tarjeta según si tenía
   cantidad o no. Alineado a la derecha, la columna puede crecer sin que el
   precio se mueva un pixel. */
.card[data-mostrador] .item-price { text-align: right; }

.mos-acciones {
  display: flex; align-items: center; justify-content: flex-end; gap: 0.4rem;
  grid-column: 2; grid-row: 2; align-self: end;
}
.mos-btn {
  font: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text);
  border-radius: 999px; min-height: 2.1rem; padding: 0 0.8rem;
  transition: transform 0.06s ease, background-color 0.2s, border-color 0.2s;
  touch-action: manipulation;
}
.mos-btn:active { transform: scale(0.96); }
.mos-add { border-color: var(--primary); color: var(--primary); }
/* Compactos, pero sin bajar de ~34px: se tocan con el pulgar y en un bar
   oscuro. Lo que se recorta es el ancho, que es lo que le sacaba lugar a la
   descripción ahora que comparten columna. */
.mos-mas, .mos-menos { min-width: 2.1rem; padding: 0; font-size: 1.1rem; line-height: 1; }
.mos-n {
  min-width: 1.25rem; text-align: center; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--primary);
}

/* --- La barra de abajo ---
   Apilada en el teléfono: en 375 px el resumen y el botón lado a lado partían
   "2 bebidas" en dos líneas y dejaban el botón sin aire. A partir de 480 va en
   una sola fila, que es donde entra. */
.mos-barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; flex-direction: column; gap: 0.6rem;
  padding: 0.8rem 1rem calc(0.8rem + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--border);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
}
.mos-barra-info {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem;
  line-height: 1.25;
}
.mos-barra-info span { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.mos-comprar {
  width: 100%; font: inherit; font-weight: 700; cursor: pointer;
  border: 0; border-radius: 999px; padding: 0.85rem 1.15rem;
  background: var(--primary); color: #fff;
  transition: transform 0.06s ease, opacity 0.2s;
  touch-action: manipulation;
}
@media (min-width: 480px) {
  .mos-barra { flex-direction: row; align-items: center; gap: 1rem; }
  .mos-barra-info { flex: 1; min-width: 0; flex-direction: column; align-items: flex-start; gap: 0; }
  .mos-comprar { width: auto; white-space: nowrap; }
}
.mos-comprar:active { transform: scale(0.97); }
/* Con la barra puesta, el final de la carta queda tapado. */
body.con-carrito { padding-bottom: 5.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;
}
.mos-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.mos-lista li { display: flex; align-items: baseline; gap: 0.6rem; }
.mos-lista-n { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--primary); }
.mos-lista-nom { flex: 1; min-width: 0; }
.mos-lista-p { font-variant-numeric: tabular-nums; color: var(--text-muted); }
.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-size: 1.25rem; color: var(--primary); }

/* 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: 700;
  cursor: pointer; border: 0; border-radius: 0.75rem; padding: 0.95rem;
  background: var(--primary); color: #fff;
  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-btn, .mos-comprar, .mos-pagar { transition: none; }
}

/* ===================================================================
   oYE Live — el switch que enciende la compra desde la carta
   -------------------------------------------------------------------
   Antes se llamaba «45 RPM» y en dos noches no lo tocó nadie: el chiste
   solo cerraba para quien sabe que 45 es la velocidad del single. «Live»
   se entiende sin explicación, y trae su propio ícono — 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-live-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-live-btn[hidden] { display: none; }
.mos-live-btn:hover { border-color: var(--text-faint); }
.mos-live-btn:active { transform: scale(0.96); }
.mos-live-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-live-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-live-btn.nuevo {
  border-color: var(--primary);
  animation: mos-live-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-live-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-live-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-live-btn.on:hover { border-color: rgba(255, 210, 160, 0.6); }

[data-theme="dark"] .mos-live-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-live-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 de oYE Live
   -------------------------------------------------------------------
   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. */
.mos-pendiente {
  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; }
.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;
}