/* ═══════════════════════════════════════════════════════════════════════════
   Bar Yesca · base — tokens, tipografía y piezas compartidas por las 3 páginas.
   ═══════════════════════════════════════════════════════════════════════════
   Dirección de arte: verde botella FRÍO + amarillo de señalética pintada a
   mano. Se separa a propósito de los seis demos ya entregados (El Reventón es
   negro/magenta neón, Costa Porcón chocolate/vino cálido) y también del chrome
   de VerCarta (#12100d + ámbar #cda574): si la carta del local usara la paleta
   del producto parecería plantilla, y lo que hay que vender es justamente
   "te la dejamos con los colores de TU local".

   Contrastes WCAG 2.1 medidos sobre --fondo / --superficie:
     texto      #F2EFE3   15,45:1 / 13,81:1   ✓ AAA
     textoSuave #9DAF9F    7,69:1 /  6,87:1   ✓ AAA
     acento     #F2C744   11,04:1 /  9,87:1   ✓ AAA
     fondo sobre acento relleno                11,04:1   ✓ AAA
     borde      #54755F    3,46:1 /  3,10:1   ✓ 3:1 no textual (controles)

   Tipografía: serif de sistema para los títulos y sans de sistema para todo lo
   demás. El arte pedía autohospedar Instrument Serif; se resolvió con el stack
   del sistema por lo mismo que esa nota argumentaba — una carta QR se abre con
   la señal del local, no con fibra — y así el demo no descarga ni un byte de
   fuente. La jerarquía se arma por TAMAÑO, nunca por peso: eso es lo que la
   mantiene sobria y la aleja del titular gordo de plantilla.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --fondo: #0f1a16;
  --superficie: #17251e;
  --borde: #54755f;
  --texto: #f2efe3;
  --texto-suave: #9daf9f;
  --acento: #f2c744;
  --acento-texto: #0f1a16;
  --pizarra: #0b120f;

  --serif: Georgia, "Times New Roman", "Nimbus Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
    sans-serif;

  --wrap: 720px;
  --radio: 10px;
  /* Alto de las dos barras pegajosas. Los chips se cuelgan de la primera y el
     scroll a cada sección tiene que esquivar las dos: escrito a mano en tres
     lugares se descuadra al primer cambio de tamaño del logo. */
  --h-topbar: 52px;
  --h-chips: 53px;
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 400;
  margin: 0;
  letter-spacing: 0.01em;
}

/* ⚠️ Los márgenes por defecto de <p> sumaban 127 px de alto invisible y hacían
   que la portada NO cupiera en un teléfono de 640 px, que es justo lo que su
   comentario prometía. Se resetean acá y no pieza por pieza: así no vuelve a
   colarse en lo próximo que se agregue. */
p {
  margin: 0;
}

a {
  color: var(--acento);
}

img {
  max-width: 100%;
  display: block;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 16px;
}

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

/* ── Botones ───────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 52px;
  padding: 0 1.25rem;
  border: 1px solid transparent;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.btn-lleno {
  background: var(--acento);
  color: var(--acento-texto);
}

.btn-fantasma {
  background: transparent;
  border-color: var(--acento);
  color: var(--acento);
}

.btn:active {
  transform: translateY(1px);
}

/* El ícono de WhatsApp va en crema y NO en el verde #25d366 de la marca: dos
   verdes brillantes sobre una base verde se pelean y matan la jerarquía. */
.btn svg {
  width: 20px;
  height: 20px;
  flex: none;
  fill: currentColor;
}

.btn-fantasma svg {
  fill: var(--texto);
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}

/* ── Banda de honestidad ───────────────────────────────────────────────── */
/* Va en las TRES páginas y siempre visible. Bar Yesca no existe: el demo que
   vercarta.cl tenía antes se eliminó el 17-08-2026 justamente por publicar un
   local ficticio sin decir que lo era. */

.banda-demo {
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  color: var(--texto-suave);
  font-size: 12px;
  text-align: center;
  padding: 6px 12px;
  line-height: 1.35;
}

.banda-demo a {
  color: var(--acento);
}

/* ── Barra superior (carta y pedido) ───────────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--superficie) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid color-mix(in srgb, var(--borde) 45%, transparent);
}

.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--h-topbar);
}

.topbar-marca {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: 0.06em;
  color: var(--texto);
  text-decoration: none;
}

.topbar-marca img {
  height: 30px;
  width: auto;
  object-fit: contain;
}

.topbar-link {
  font-size: 14px;
  color: var(--acento);
  text-decoration: none;
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 6px 14px;
  white-space: nowrap;
}

/* ── Chips de categoría ────────────────────────────────────────────────── */

.chips {
  position: sticky;
  top: var(--h-topbar);
  z-index: 25;
  background: var(--fondo);
  border-bottom: 1px solid color-mix(in srgb, var(--borde) 45%, transparent);
}

.chips .wrap {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  padding-block: 10px;
  /* Aviso de que hay más chips a la derecha, sin flecha ni script. */
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
}

.chips .wrap::-webkit-scrollbar {
  display: none;
}

.chip {
  flex: none;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  color: var(--texto);
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}

.chip.activo {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--acento-texto);
}

/* ── La pizarra: el elemento firma ─────────────────────────────────────── */
/* El plato agotado sale de la carta; este pizarrón es el modo del bar de
   contar por qué. La textura de tiza se hace con dos radial-gradients de baja
   opacidad —ni una imagen, ni una fuente externa— y desde el 21-08-2026
   aparece SOLO acá: el trazo del tachado, que era el otro lugar donde se
   usaba, se eliminó junto con los platos tachados. */

.pizarra {
  background: var(--pizarra);
  background-image: radial-gradient(circle at 18% 30%, rgba(242, 239, 227, 0.05) 0, transparent 45%),
    radial-gradient(circle at 78% 70%, rgba(242, 239, 227, 0.04) 0, transparent 40%);
  border-bottom: 1px solid color-mix(in srgb, var(--borde) 50%, transparent);
}

.pizarra .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  padding-block: 12px;
}

.pizarra p {
  margin: 0;
  font-size: 14px;
  color: var(--texto);
}

.pizarra b {
  font-weight: 400;
  color: var(--texto-suave);
  letter-spacing: 0.08em;
  font-size: 11px;
  text-transform: uppercase;
  display: block;
}

/* ── Secciones y fotos ─────────────────────────────────────────────────── */

.seccion {
  scroll-margin-top: calc(var(--h-topbar) + var(--h-chips) + 16px);
  padding-top: 32px;
}

.seccion-t {
  font-size: 26px;
}

.seccion-gancho {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--texto-suave);
}

.foto {
  width: 76px;
  height: 76px;
  flex: none;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--superficie);
}

.foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Marcador para el plato al que todavía no le sacan foto. Nunca una foto de
   stock ni la de otro local. */
.foto--vacia {
  border: 1px dashed color-mix(in srgb, var(--borde) 70%, transparent);
  background: repeating-linear-gradient(
    -45deg,
    var(--superficie),
    var(--superficie) 6px,
    var(--fondo) 6px,
    var(--fondo) 12px
  );
}

/* ── Agotado: se tacha, no se borra ────────────────────────────────────── */
/* Es la columna `disponible` que ya existe en la base del producto. El plato
   sigue en la carta —el comensal ve que existe y vuelve por él— con un trazo
   de tiza cruzándolo. Nunca text-decoration: line-through: eso se ve a software
   y no a pizarra. */

/* ── Pie ───────────────────────────────────────────────────────────────── */

.pie {
  margin-top: 48px;
  padding: 20px 0 40px;
  background: var(--superficie);
  border-top: 1px solid color-mix(in srgb, var(--borde) 50%, transparent);
  color: var(--texto-suave);
  font-size: 12px;
  line-height: 1.6;
}

.pie p {
  margin: 0 0 6px;
}

.pie a {
  color: var(--acento);
}

/* ⚠️ Acá vivían .agotado, .tachado y .etiqueta-agotado — el plato agotado se
   dibujaba en gris y con el precio tachado. Se eliminaron el 21-08-2026 junto
   con su marcado: un plato agotado ya no se muestra (decisión de César), igual
   que en el producto, donde `carta_publica` filtra por `i.disponible`. */