/* =========================================================
   Menú Digital Básico (Opción 1) — demo
   CSS3 mobile-first, sin frameworks. Sin nada de admin: es un
   menú de solo lectura, a propósito.
   ========================================================= */

:root {
  --masa: #fdf8f1; --masa-2: #f6ecdf;
  --corteza: #7a4a21; --corteza-osc: #563318;
  --miel: #e0a02c; --miel-claro: #fbe9c6;
  --carbon: #2c2119; --gris: #7d6f63; --gris-claro: #e6dcd0; --blanco: #ffffff;
  --ok: #2e7d4f; --ok-bg: #e3f4e9;
  --horno: #c2410c; --horno-bg: #ffedd5;
  --off: #9b2c2c; --off-bg: #fdeaea;

  --fs-xs: .75rem; --fs-sm: .875rem; --fs-md: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem;
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem;
  --radio: 14px; --radio-sm: 8px;
  --sombra: 0 1px 2px rgba(44,33,25,.06), 0 4px 14px rgba(44,33,25,.07);
  --max-ancho: 1080px;
  --transicion: 160ms ease;
}

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }

body {
  min-height: 100dvh;
  background: var(--masa);
  color: var(--carbon);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: var(--fs-md);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
}

.container { width: 100%; max-width: var(--max-ancho); margin-inline: auto; padding-inline: var(--sp-4); }
main { flex: 1 0 auto; padding-block: var(--sp-5) var(--sp-6); }

/* Header */
.site-header { background: linear-gradient(135deg, var(--corteza), var(--corteza-osc)); color: var(--masa); padding-block: var(--sp-5); }
.site-header .container { display: flex; }
.brand { display: flex; align-items: center; gap: var(--sp-3); }
.brand__logo { font-size: 2rem; background: rgba(255,255,255,.12); border-radius: 50%; width: 3rem; height: 3rem; display: grid; place-items: center; flex-shrink: 0; }
.brand__name { font-size: var(--fs-xl); font-weight: 700; }
.brand__tagline { font-size: var(--fs-sm); opacity: .78; }

/* Filtros */
.filters { position: sticky; top: 0; z-index: 10; background: rgba(253,248,241,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--gris-claro); }
.filters__inner { display: flex; gap: var(--sp-2); overflow-x: auto; padding-block: var(--sp-3); scrollbar-width: none; }
.filters__inner::-webkit-scrollbar { display: none; }

.chip {
  flex: 0 0 auto; padding: var(--sp-2) var(--sp-4); border-radius: 999px;
  background: var(--blanco); border: 1px solid var(--gris-claro); color: var(--gris);
  font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}
.chip:hover { border-color: var(--corteza); color: var(--corteza); }
.chip[aria-selected="true"] { background: var(--corteza); border-color: var(--corteza); color: var(--masa); }

/* Grid de productos */
.menu-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width: 640px) { .menu-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .menu-grid { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--blanco); border: 1px solid var(--gris-claro); border-radius: var(--radio);
  box-shadow: var(--sombra); overflow: hidden; display: flex;
}
.card.is-sold-out { opacity: .68; }
.card.is-sold-out .card__thumb { filter: grayscale(.85); }

.card__body, .card { display: flex; gap: var(--sp-4); padding: var(--sp-4); align-items: flex-start; }
.card__thumb {
  flex: 0 0 auto; width: 68px; height: 68px; border-radius: var(--radio-sm);
  background: linear-gradient(140deg, var(--miel-claro), var(--masa-2));
  display: grid; place-items: center; font-size: 2rem;
}
.card__info { flex: 1 1 auto; min-width: 0; }
.card__name { font-size: var(--fs-md); font-weight: 700; margin-bottom: 2px; }
.card__desc { font-size: var(--fs-sm); color: var(--gris); margin-bottom: var(--sp-2); }
.card__meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }
.card__price { font-size: var(--fs-lg); font-weight: 700; color: var(--corteza); white-space: nowrap; }
.card__unit { font-size: var(--fs-xs); color: var(--gris); font-weight: 500; }

.badge {
  display: inline-flex; align-items: center; gap: var(--sp-1); padding: 3px var(--sp-2);
  border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; white-space: nowrap;
}
.badge--disponible { background: var(--ok-bg); color: var(--ok); }
.badge--horno { background: var(--horno-bg); color: var(--horno); }
.badge--agotado { background: var(--off-bg); color: var(--off); }

/* Footer */
.site-footer { background: var(--corteza-osc); color: var(--masa-2); padding-block: var(--sp-5); font-size: var(--fs-sm); margin-top: auto; }
.site-footer__name { font-weight: 700; color: var(--blanco); }
.site-footer__inner p { opacity: .82; margin-bottom: 2px; }
.site-footer__legal { font-size: var(--fs-xs); opacity: .55; margin-top: var(--sp-2); }