/* Burger House — sistema visual.
 * Gobernado por brand-profile-burger-house.md
 * Tesis: In-N-Out ejecutado con la disciplina de Apple. Calidez con restricción.
 * Mobile-first. Un solo acento. Contraste por peso y escala, no por acumular.
 */

/* ═══════════ TIPOGRAFÍA (auto-alojada) ═══════════
 * Servidas desde el propio dominio para que la página cargue sólida en datos
 * móviles (sin depender de fonts.googleapis.com, que bloquea el render si la
 * señal está mala). Subset latin: cubre acentos y ñ del español. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/archivo-black-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═══════════ TOKENS ═══════════ */
:root {
  /* 60-30-10 */
  --papel:    #F5F0E6;   /* dominante */
  --papel-2:  #FCF9F3;   /* elevado */
  --papel-3:  #EBE3D4;   /* inset */
  --tinta:    #1E1A17;   /* secundario */
  --tinta-2:  #6E6358;   /* texto apagado */
  --brasa:    #C0342A;   /* acento único */
  --brasa-2:  #9E2A22;   /* acento presionado */
  --sobre-brasa: #FCF9F3;

  --linea:    rgba(30,26,23,.14);
  --linea-2:  rgba(30,26,23,.28);
  --exito:    #3F6B45;

  --f-display: "Archivo Black", "Archivo", system-ui, sans-serif;
  --f-cuerpo:  "Archivo", system-ui, -apple-system, sans-serif;

  /* escala 1.250 */
  --t-xs: .75rem; --t-sm: .875rem; --t-b: 1rem; --t-md: 1.25rem;
  --t-lg: 1.563rem; --t-xl: 1.953rem; --t-2xl: 2.441rem; --t-3xl: 3.052rem;

  /* espacio base 4 */
  --e1:.25rem; --e2:.5rem; --e3:.75rem; --e4:1rem; --e5:1.5rem;
  --e6:2rem; --e7:3rem; --e8:4rem; --e9:6rem;

  --wrap: 1120px;
  --r: 6px;                       /* radio único; la píldora es la excepción */
  --ease: cubic-bezier(.2,.7,.2,1);
  --barra-h: 76px;

  /* Alturas del encabezado pegajoso. Se usan para el offset de scroll:
     si cambian aquí, el ancla de las categorías se ajusta sola. */
  --nav-h: 60px;
  --tabs-h: 61px;
  --sticky-h: calc(var(--nav-h) + var(--tabs-h));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel:   #17130F;
    --papel-2: #211C17;
    --papel-3: #2B241D;
    --tinta:   #F2EBE0;
    --tinta-2: #A2988A;
    --brasa:   #F0705F;
    --brasa-2: #FF8B78;
    --sobre-brasa: #17130F;
    --linea:   rgba(242,235,224,.16);
    --linea-2: rgba(242,235,224,.30);
    --exito:   #7FB287;
  }
}
:root[data-theme="dark"] {
  --papel:#17130F; --papel-2:#211C17; --papel-3:#2B241D;
  --tinta:#F2EBE0; --tinta-2:#A2988A;
  --brasa:#F0705F; --brasa-2:#FF8B78; --sobre-brasa:#17130F;
  --linea:rgba(242,235,224,.16); --linea-2:rgba(242,235,224,.30); --exito:#7FB287;
}

/* ═══════════ BASE ═══════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--f-cuerpo);
  font-size: var(--t-b);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body.con-barra { padding-bottom: var(--barra-h); }

h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 400; line-height: 1.02; letter-spacing: -.03em; text-wrap: balance; }
img { max-width: 100%; display: block; }
a { color: var(--brasa); text-underline-offset: 3px; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }

:focus-visible { outline: 2.5px solid var(--brasa); outline-offset: 3px; border-radius: 3px; }

/* [hidden] debe ganarle a cualquier `display` que declaremos después. */
[hidden] { display: none !important; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--e4); }
@media (min-width: 720px) { .wrap { padding-inline: var(--e6); } }

/* ═══════════ BOTONES ═══════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: 48px; padding: var(--e3) var(--e5);
  border-radius: var(--r);
  font-weight: 600; font-size: var(--t-b); letter-spacing: -.01em;
  text-decoration: none;
  transition: background .16s var(--ease), transform .12s var(--ease), opacity .16s var(--ease);
}
.btn--rojo { background: var(--brasa); color: var(--sobre-brasa); }
.btn--rojo:hover { background: var(--brasa-2); }
.btn--rojo:active { transform: translateY(1px); }
.btn--rojo:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn--ghost { border: 1.5px solid var(--linea-2); color: var(--tinta); }
.btn--ghost:hover { background: var(--papel-3); }
.btn--xl { min-height: 56px; font-size: var(--t-md); padding-inline: var(--e6); }
.btn--full { width: 100%; }
/* La única píldora del sistema: la acción final. */
.btn--pill { border-radius: 999px; min-height: 56px; font-size: var(--t-md); }

/* ═══════════ NAV ═══════════ */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--papel) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
}
.nav__in { display: flex; align-items: center; justify-content: space-between; gap: var(--e4); min-height: 60px; }
.marca { display: inline-flex; align-items: center; gap: var(--e2); text-decoration: none; color: var(--tinta); min-height: 44px; }
.marca__ico { width: 32px; height: 24px; color: var(--brasa); flex: none; }
.marca__txt { font-family: var(--f-display); font-size: var(--t-b); letter-spacing: -.03em; }
.marca__txt b { color: var(--brasa); font-weight: 400; }
.nav__der { display: flex; align-items: center; gap: var(--e3); min-width: 0; }
.horario { font-size: var(--t-xs); color: var(--tinta-2); font-weight: 500; text-align: right; line-height: 1.25; display: none; }
@media (min-width: 560px) { .horario { display: block; } }
.horario--off { color: var(--brasa); }

/* Atajo permanente al pedido. Sin nada en el carrito lleva al menú;
   con algo dentro abre el resumen y muestra cuántos artículos van. */
.nav__cta {
  display: inline-flex; align-items: center; gap: var(--e2);
  min-height: 44px; padding-inline: var(--e4);
  background: var(--brasa); color: var(--sobre-brasa);
  border-radius: 999px; text-decoration: none;
  font-size: var(--t-sm); font-weight: 700; white-space: nowrap;
  transition: background .16s var(--ease);
}
.nav__cta:hover { background: var(--brasa-2); }
.nav__n {
  min-width: 22px; height: 22px; padding-inline: 5px; border-radius: 999px;
  background: rgba(252,249,243,.24);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--t-xs); font-variant-numeric: tabular-nums;
}

/* ═══════════ HERO ═══════════ */
.hero { position: relative; min-height: 70svh; display: flex; align-items: flex-end; overflow: hidden; background: var(--tinta); }
/* El encuadre baja el foco: la hamburguesa vive arriba, el texto abajo. */
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transform: scale(1.3); transform-origin: 50% 62%; }
/* Velo solo donde vive el texto: la foto es el héroe, no el fondo de un cartel. */
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, transparent 34%, rgba(18,13,10,.42) 58%, rgba(18,13,10,.86) 100%);
}
.hero__in { position: relative; z-index: 1; padding-block: var(--e8) var(--e7); color: #FCF9F3; }
.hero__ojo { font-size: var(--t-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(252,249,243,.72); margin-bottom: var(--e3); }
.hero__t { font-size: clamp(2.2rem, 10vw, var(--t-3xl)); margin-bottom: var(--e4); }
.hero__t span { color: #FF8B78; }
.hero__d { font-size: var(--t-md); max-width: 26ch; color: rgba(252,249,243,.86); margin-bottom: var(--e5); }

/* Desktop: el texto toma la mitad izquierda y la foto se corre a la derecha.
   Así el producto se ve completo en vez de quedar debajo del titular. */
@media (min-width: 900px) {
  .hero { min-height: min(760px, 82svh); align-items: center; }
  .hero__bg { object-position: 72% 42%; transform: none; }
  .hero::after {
    background:
      linear-gradient(90deg, rgba(18,13,10,.86) 0%, rgba(18,13,10,.58) 42%, transparent 68%),
      linear-gradient(180deg, transparent 55%, rgba(18,13,10,.55) 100%);
  }
  .hero__in { padding-block: var(--e8); width: 100%; }
  .hero__texto { max-width: 30rem; margin-right: auto; }
}

/* ═══════════ BANDA DE MAQUILA ═══════════
   El descuento se pierde si se lee como un aviso más. La cifra en display lo
   convierte en argumento: se ve antes de leerse. */
.banda { background: var(--brasa); color: var(--sobre-brasa); }
.banda__in {
  padding-block: var(--e5);
  display: flex; align-items: center; justify-content: center;
  gap: var(--e4); text-align: left;
}
.banda__cifra {
  font-family: var(--f-display); font-size: var(--t-2xl);
  line-height: .9; letter-spacing: -.04em; flex: none;
}
.banda__txt { font-size: var(--t-sm); line-height: 1.4; }
.banda__txt b { font-weight: 700; display: block; font-size: var(--t-b); }
.banda__txt span { opacity: .88; }

/* ═══════════ MENÚ ═══════════ */
.menu { padding-block: var(--e7) var(--e8); }
.menu__head { margin-bottom: var(--e5); }
.menu__head h2 { font-size: var(--t-2xl); margin-bottom: var(--e2); }

/* ═══ Galería / carrusel ═══ */
.galeria { padding-block: var(--e7) var(--e6); overflow: hidden; }
.galeria__head { margin-bottom: var(--e4); }
.galeria__head h2 { font-size: var(--t-2xl); }
.galeria__head p { color: var(--tinta-2); margin-top: var(--e2); font-size: var(--t-sm); }
.galeria__wrap { position: relative; }
.galeria__track { display: flex; gap: var(--e3); overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; padding-inline: var(--e4); scroll-padding-inline: var(--e4); scrollbar-width: none; }
.galeria__track::-webkit-scrollbar { display: none; }
.slide { position: relative; flex: 0 0 auto; width: min(78vw, 320px); margin: 0; border-radius: var(--r); overflow: hidden; background: var(--papel-3); scroll-snap-align: center; }
.slide img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.slide figcaption { position: absolute; inset: auto 0 0 0; padding: var(--e5) var(--e3) var(--e3); color: #FCF9F3; font-family: var(--f-display); font-size: var(--t-md); letter-spacing: -.02em; background: linear-gradient(transparent, rgba(0,0,0,.72)); }

/* Pedir directo desde la foto: la galería es un punto caliente, así que cada
   platillo trae su acción. Botón arriba-derecha para no chocar con el título. */
.slide__add {
  position: absolute; top: var(--e3); right: var(--e3); z-index: 3;
  display: inline-flex; align-items: center; gap: 5px; line-height: 1;
  min-height: 38px; padding: 0 15px; border-radius: 999px;
  font-weight: 700; font-size: var(--t-sm);
  background: var(--brasa); color: var(--sobre-brasa); text-decoration: none;
  box-shadow: 0 3px 12px rgba(0,0,0,.30);
  transition: transform .14s var(--ease), background .16s var(--ease);
}
.slide__add::before { content: "+"; font-size: 1.15em; font-weight: 800; }
.slide__add:hover { transform: translateY(-1px); }
.slide__add:active { transform: scale(.93); }
.slide__add--ok { background: #2F8F4E; color: #fff; }
.slide__add--ok::before { content: ""; }

/* Tarjeta final: marca el fin del carrusel e invita a armar el pedido. */
.slide--fin { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e1); text-align: center; aspect-ratio: 1 / 1; background: var(--brasa); color: var(--sobre-brasa); text-decoration: none; }
.slide--fin__ic { font-size: 2.4rem; line-height: 1; }
.slide--fin__t { font-family: var(--f-display); font-size: var(--t-lg); letter-spacing: -.02em; }
.slide--fin__c { font-size: var(--t-sm); border: 1.5px solid currentColor; border-radius: 999px; padding: 5px 15px; margin-top: var(--e2); }

/* Flechas discretas. Se ocultan en el extremo al que ya llegaste. */
.galeria__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; background: var(--papel-2); background: color-mix(in srgb, var(--papel) 80%, transparent); color: var(--tinta); border: 1px solid var(--linea); box-shadow: 0 2px 10px rgba(0,0,0,.16); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); cursor: pointer; opacity: .85; transition: opacity .18s var(--ease), transform .18s var(--ease); }
.galeria__nav:hover { opacity: 1; }
.galeria__nav:active { transform: translateY(-50%) scale(.9); }
.galeria__nav--prev { left: var(--e3); }
.galeria__nav--next { right: var(--e3); }

/* Difuminado en los bordes: pista de que hay más — desaparece al terminar. */
.galeria__wrap::before, .galeria__wrap::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40px; z-index: 2; pointer-events: none; transition: opacity .18s var(--ease); }
.galeria__wrap::before { left: 0; background: linear-gradient(90deg, var(--papel), transparent); }
.galeria__wrap::after { right: 0; background: linear-gradient(270deg, var(--papel), transparent); }

.galeria__wrap[data-pos="start"] .galeria__nav--prev,
.galeria__wrap[data-pos="end"] .galeria__nav--next,
.galeria__wrap[data-pos="solo"] .galeria__nav { opacity: 0; pointer-events: none; }
.galeria__wrap[data-pos="start"]::before,
.galeria__wrap[data-pos="end"]::after,
.galeria__wrap[data-pos="solo"]::before,
.galeria__wrap[data-pos="solo"]::after { opacity: 0; }

@media (min-width: 720px) { .galeria__track { padding-inline: var(--e6); scroll-padding-inline: var(--e6); } .slide { width: 340px; } }

/* ═══ Bebidas (desplegable compacto) ═══ */
.beb { border: 1.5px solid var(--linea); border-radius: var(--r); background: var(--papel-2); overflow: hidden; }
.beb__sum { display: flex; align-items: center; gap: var(--e3); padding: var(--e4); min-height: 60px; cursor: pointer; list-style: none; }
.beb__sum::-webkit-details-marker { display: none; }
.beb__ico { width: 28px; height: 28px; color: var(--brasa); flex: none; }
.beb__lbl { flex: 1; font-weight: 600; }
.beb__lbl small { display: block; color: var(--tinta-2); font-weight: 400; font-size: var(--t-xs); }
.beb__n { min-width: 24px; height: 24px; display: inline-grid; place-items: center; padding: 0 .4rem; background: var(--brasa); color: var(--sobre-brasa); border-radius: 999px; font-size: var(--t-xs); font-weight: 700; }
.beb__chev { width: 18px; height: 18px; color: var(--tinta-2); flex: none; transition: transform .2s ease; }
.beb[open] .beb__chev { transform: rotate(180deg); }
.beb__lista { border-top: 1px solid var(--linea); padding: 0 var(--e4) var(--e3); }
.beb__row { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); padding: var(--e3) 0; border-bottom: 1px solid var(--linea); }
.beb__row:last-child { border-bottom: none; }
.beb__nom { font-weight: 600; }
.beb__nom small { color: var(--brasa); font-weight: 700; margin-left: var(--e2); }
.beb__row--on .beb__nom { color: var(--brasa); }
.qty--beb { flex: none; }
.menu__head p { color: var(--tinta-2); max-width: 40ch; }
.menu__head--claro h2, .menu__head--claro p { color: var(--papel); }
.menu__head--claro p { opacity: .75; }

.tabs-wrap {
  position: sticky; top: var(--nav-h); z-index: 50;
  background: color-mix(in srgb, var(--papel) 92%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-block: 1px solid var(--linea);
  margin-bottom: var(--e5);
}
.tabs-row { display: flex; align-items: center; gap: var(--e4); }
.tabs { display: flex; gap: var(--e2); overflow-x: auto; scrollbar-width: none; padding-block: var(--e2); min-width: 0; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none; min-height: 44px; padding: var(--e2) var(--e4);
  border-radius: 999px; font-weight: 600; font-size: var(--t-sm);
  background: var(--papel-3); border: 1.5px solid var(--linea);
  color: var(--tinta); white-space: nowrap;
  transition: background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.tab:hover { border-color: var(--linea-2); }
.tab--on {
  background: var(--brasa); border-color: var(--brasa);
  color: var(--sobre-brasa); font-weight: 700;
}

.cerrado {
  margin-bottom: var(--e5); padding: var(--e3) var(--e4);
  background: var(--papel-3); border-left: 3px solid var(--brasa);
  border-radius: var(--r); font-size: var(--t-sm); color: var(--tinta-2);
}

/* Panel de categoría: solo una visible; al cambiar de tab entra deslizando. */
.cat { display: none; margin-bottom: var(--e7); }
.cat--on { display: block; }
.cat--der { animation: catEntra-der .26s var(--ease); }
.cat--izq { animation: catEntra-izq .26s var(--ease); }
@keyframes catEntra-der { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
@keyframes catEntra-izq { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: none; } }
.cat__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e3); padding-bottom: var(--e3); border-bottom: 2px solid var(--tinta); margin-bottom: var(--e2); }
.cat__tit { min-width: 0; }
.cat__head h3 { font-size: var(--t-xl); }
.cat__head p { font-size: var(--t-sm); color: var(--tinta-2); margin-top: var(--e1); }
.cat__deco { width: 76px; height: auto; flex: none; align-self: flex-end; margin-bottom: -2px; pointer-events: none; user-select: none; }
@media (min-width: 640px) { .cat__deco { width: 96px; } }
@media (prefers-color-scheme: dark) { .cat__deco { opacity: .92; } }

/* ── Selector de vista (solo desktop: en móvil la lista es la única sensata) ── */
.vista { display: none; }
@media (min-width: 900px) {
  .vista {
    display: inline-flex; gap: 2px; padding: 3px;
    background: var(--papel-3); border-radius: var(--r); margin-left: auto;
  }
  .vista__b {
    display: inline-flex; align-items: center; gap: var(--e2);
    min-height: 38px; padding-inline: var(--e3);
    border-radius: 4px; font-size: var(--t-xs); font-weight: 600;
    color: var(--tinta-2);
    transition: background .16s var(--ease), color .16s var(--ease);
  }
  .vista__b svg { width: 16px; height: 16px; }
  .vista__b[aria-pressed="true"] { background: var(--papel-2); color: var(--tinta); }
}

/* Fila de producto — el corazón del menú.
   BASE = lista (móvil, y desktop cuando el usuario la elige).
   La cuadrícula se declara DESPUÉS para ganar la cascada en desktop. */
.filas { display: grid; gap: 0; }
.fila {
  display: grid; grid-template-columns: 1fr auto; gap: var(--e4);
  align-items: start; padding-block: var(--e4);
  border-bottom: 1px solid var(--linea);
}

/* CUADRÍCULA — desktop por defecto. La ficha entera es la unidad. */
@media (min-width: 900px) {
  #menu-cats[data-vista="cuadricula"] .filas {
    grid-template-columns: repeat(auto-fill, minmax(min(272px, 100%), 1fr));
    gap: var(--e4);
  }
  #menu-cats[data-vista="cuadricula"] .fila {
    display: flex; flex-direction: column; gap: 0;
    padding: 0; border: 1px solid var(--linea); border-radius: var(--r);
    background: var(--papel-2); overflow: hidden;
    transition: border-color .16s var(--ease), transform .16s var(--ease);
  }
  #menu-cats[data-vista="cuadricula"] .fila:hover { border-color: var(--linea-2); transform: translateY(-2px); }
  #menu-cats[data-vista="cuadricula"] .fila:has(.add--activo) { border-color: var(--brasa); }

  #menu-cats[data-vista="cuadricula"] .fila__media { order: -1; width: 100%; display: block; }
  #menu-cats[data-vista="cuadricula"] .fila__img { width: 100%; height: 168px; border-radius: 0; }
  #menu-cats[data-vista="cuadricula"] .fila__img.ph { font-size: 3.4rem; }

  #menu-cats[data-vista="cuadricula"] .fila__txt {
    padding: var(--e4); display: flex; flex-direction: column; flex: 1 1 auto;
  }
  #menu-cats[data-vista="cuadricula"] .fila__txt p { flex: 1 1 auto; }
  #menu-cats[data-vista="cuadricula"] .fila__precio { font-size: var(--t-md); margin-top: var(--e2); }
  #menu-cats[data-vista="cuadricula"] .fila .add { margin: 0 var(--e4) var(--e4); width: calc(100% - var(--e4) * 2); }

  /* Sin foto en cuadrícula: sin hueco de imagen; el botón cae bajo el texto. */
  #menu-cats[data-vista="cuadricula"] .fila--sinfoto .fila__media { order: 0; }
  #menu-cats[data-vista="cuadricula"] .fila--sinfoto .fila__txt { padding-bottom: var(--e3); }

  /* LISTA en desktop: más aire lateral que en móvil. */
  #menu-cats[data-vista="lista"] .fila { grid-template-columns: 1fr auto; gap: var(--e5); }
}

.fila__txt { min-width: 0; }
.fila__txt h4 {
  font-family: var(--f-cuerpo); font-weight: 600; font-size: var(--t-b);
  letter-spacing: -.01em; line-height: 1.3; margin-bottom: var(--e1);
  display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap;
}
.fila__badge {
  font-size: .625rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--brasa); border: 1px solid currentColor; border-radius: 3px; padding: 1px 5px;
}
.fila__txt p { font-size: var(--t-sm); color: var(--tinta-2); line-height: 1.45; margin-bottom: var(--e2); }
.fila__precio { font-weight: 700; font-size: var(--t-b); font-variant-numeric: tabular-nums; }

.fila__media { display: flex; flex-direction: column; align-items: center; gap: var(--e2); width: 88px; flex: none; }
.fila__img { width: 88px; height: 88px; object-fit: cover; border-radius: var(--r); background: var(--papel-3); }
.fila__img.ph {
  display: grid; place-items: center;
  background: var(--papel-3); color: var(--linea-2);
  font-family: var(--f-display); font-size: 2.2rem; line-height: 1;
}
.add {
  width: 100%; min-height: 44px; padding-inline: var(--e2);
  border: 1.5px solid var(--linea-2); border-radius: var(--r);
  font-weight: 600; font-size: var(--t-sm); color: var(--tinta);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e1);
  transition: background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);
}
.add:hover { background: var(--papel-3); }
.add--activo { background: var(--brasa); border-color: var(--brasa); color: var(--sobre-brasa); }
.add__n { font-variant-numeric: tabular-nums; font-weight: 700; }

@media (min-width: 640px) {
  .fila__media { width: 108px; }
  .fila__img { width: 108px; height: 108px; }
}

/* ═══════════ EVENTOS ═══════════ */
.eventos { background: var(--tinta); color: var(--papel); padding-block: var(--e8); }
.packs { display: grid; gap: var(--e4); }
@media (min-width: 760px) { .packs { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.pack {
  position: relative; background: rgba(252,249,243,.05);
  border: 1px solid rgba(252,249,243,.16); border-radius: var(--r);
  padding: var(--e5);
}
.pack--on { border-color: var(--brasa); }
.pack__badge {
  position: absolute; top: calc(-1 * var(--e2)); left: var(--e5);
  background: var(--brasa); color: var(--sobre-brasa);
  font-size: .625rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 3px;
}
.pack h3 { font-size: var(--t-lg); margin-bottom: var(--e1); }
.pack__gente { font-size: var(--t-sm); opacity: .65; }
.pack__precio { font-family: var(--f-display); font-size: var(--t-xl); color: #FF8B78; margin-block: var(--e3); font-variant-numeric: tabular-nums; }
.pack ul { list-style: none; margin-bottom: var(--e4); }
.pack li { font-size: var(--t-sm); padding-block: var(--e1); opacity: .8; }
.pack li::before { content: "· "; color: var(--brasa); }
.pack .btn--ghost { color: var(--papel); border-color: rgba(252,249,243,.3); width: 100%; }
.pack .btn--ghost:hover { background: rgba(252,249,243,.08); }

/* ═══════════ PIE ═══════════ */
.pie { background: var(--papel-3); padding-block: var(--e7); }
.pie__in { display: grid; gap: var(--e5); }
.pie__cols { display: grid; gap: var(--e5); }
@media (min-width: 640px) { .pie__cols { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.pie__cols h3 { font-family: var(--f-cuerpo); font-weight: 700; font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2); margin-bottom: var(--e2); }
.pie__cols p { font-size: var(--t-sm); }
.pie__cols a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.pie__abajo { font-size: var(--t-xs); color: var(--tinta-2); padding-top: var(--e4); border-top: 1px solid var(--linea); }

/* ═══════════ BARRA FIJA ═══════════ */
.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--papel-2);
  border-top: 1px solid var(--linea);
  box-shadow: 0 -8px 24px -12px rgba(30,26,23,.35);
  padding-bottom: env(safe-area-inset-bottom);
}
/* Recordatorio del descuento pegado sobre la barra: el cliente lo lee en el
   mismo golpe de vista que su total, que es cuando decide. */
.barra__promo {
  background: var(--brasa); color: var(--sobre-brasa);
  font-size: var(--t-xs); font-weight: 500; text-align: center;
  padding: var(--e2) var(--e4);
}
.barra__promo b { font-weight: 700; font-variant-numeric: tabular-nums; }
.barra__in { padding-block: var(--e3); }
.barra__b {
  width: 100%; min-height: 56px; border-radius: 999px;
  background: var(--brasa); color: var(--sobre-brasa);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--e3);
  padding-inline: var(--e4); font-weight: 600; font-size: var(--t-b);
  transition: background .16s var(--ease);
}
.barra__b:hover { background: var(--brasa-2); }
.barra__n {
  min-width: 26px; height: 26px; border-radius: 999px;
  background: rgba(252,249,243,.22); display: grid; place-items: center;
  font-size: var(--t-sm); font-weight: 700; font-variant-numeric: tabular-nums;
}
.barra__txt { text-align: left; }
.barra__total { font-weight: 700; font-variant-numeric: tabular-nums; }
.barra--pulso .barra__b { animation: pulso .32s var(--ease); }
@keyframes pulso { 50% { transform: scale(1.02); } }

/* ═══════════ SCRIM ═══════════ */
.scrim { position: fixed; inset: 0; z-index: 90; background: rgba(20,14,11,.55); animation: fade .18s var(--ease); }
@keyframes fade { from { opacity: 0; } }

/* ═══════════ HOJA (bottom sheet) ═══════════ */
.hoja {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
  display: flex; flex-direction: column;
  max-height: 92svh;
  background: var(--papel-2);
  border-radius: 16px 16px 0 0;
  transform: translateY(100%);
  transition: transform .24s var(--ease);
}
.hoja--on { transform: translateY(0); }
@media (min-width: 640px) {
  .hoja { left: 50%; right: auto; bottom: auto; top: 50%; width: min(520px, 94vw);
          transform: translate(-50%,-50%) scale(.97); opacity: 0; border-radius: 12px; max-height: 88svh;
          transition: opacity .2s var(--ease), transform .2s var(--ease); }
  .hoja--on { transform: translate(-50%,-50%) scale(1); opacity: 1; }
}
.hoja__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
  padding: var(--e4); border-bottom: 1px solid var(--linea); flex: none;
}
.hoja__head h2 { font-size: var(--t-md); }
.cerrar { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r); color: var(--tinta-2); flex: none; }
.cerrar:hover { background: var(--papel-3); }
.cerrar svg { width: 22px; height: 22px; }

.hoja__body { flex: 1 1 auto; overflow-y: auto; padding: var(--e4); -webkit-overflow-scrolling: touch; }
.hoja__top { display: flex; gap: var(--e4); margin-bottom: var(--e5); }
.hoja__img { width: 84px; height: 84px; object-fit: cover; border-radius: var(--r); flex: none; background: var(--papel-3); }
.hoja__img.ph { display: grid; place-items: center; background: var(--papel-3); color: var(--linea-2); font-family: var(--f-display); font-size: 2rem; }
.hoja__desc { font-size: var(--t-sm); color: var(--tinta-2); margin-bottom: var(--e2); }
.hoja__base { font-weight: 700; font-variant-numeric: tabular-nums; }

.grupo { border: none; margin-bottom: var(--e5); }
.grupo legend {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-2); margin-bottom: var(--e2);
  display: flex; align-items: center; gap: var(--e2); width: 100%;
}
.grupo__req { color: var(--brasa); letter-spacing: .04em; }

.op {
  display: flex; align-items: center; gap: var(--e3);
  min-height: 52px; padding: var(--e2) var(--e3);
  border-bottom: 1px solid var(--linea); cursor: pointer;
}
.op:last-of-type { border-bottom: none; }
.op input { width: 22px; height: 22px; accent-color: var(--brasa); flex: none; cursor: pointer; }
.op__t { flex: 1 1 auto; font-size: var(--t-sm); }
.op__precio { font-size: var(--t-sm); font-weight: 600; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.op__step { display: inline-flex; align-items: center; gap: var(--e2); }
.op__b {
  width: 44px; height: 44px; border-radius: var(--r); border: 1.5px solid var(--linea-2);
  display: grid; place-items: center; font-size: var(--t-md); line-height: 1;
}
.op__b:hover { background: var(--papel-3); }
.op__step b { min-width: 18px; text-align: center; font-variant-numeric: tabular-nums; }

.hoja__body textarea {
  width: 100%; padding: var(--e3);
  background: var(--papel); color: var(--tinta);
  border: 1.5px solid var(--linea-2); border-radius: var(--r);
  font-family: inherit; font-size: var(--t-sm); resize: vertical;
}
.hoja__foot { flex: none; padding: var(--e4); padding-bottom: calc(var(--e4) + env(safe-area-inset-bottom)); border-top: 1px solid var(--linea); }

/* ═══════════ PEDIDO ═══════════ */
.pedido {
  position: fixed; inset: 0; z-index: 110;
  display: flex; flex-direction: column;
  background: var(--papel);
  transform: translateY(100%); transition: transform .24s var(--ease);
}
.pedido--on { transform: translateY(0); }
@media (min-width: 640px) {
  .pedido { inset: auto; left: 50%; top: 50%; width: min(560px, 94vw); max-height: 90svh;
            transform: translate(-50%,-50%) scale(.97); opacity: 0; border-radius: 12px; overflow: hidden;
            transition: opacity .2s var(--ease), transform .2s var(--ease); }
  .pedido--on { transform: translate(-50%,-50%) scale(1); opacity: 1; }
}
.pedido__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--e4); padding-top: calc(var(--e4) + env(safe-area-inset-top));
  border-bottom: 1px solid var(--linea); flex: none;
}
.pedido__head h2 { font-size: var(--t-lg); margin-right: auto; }
.pedido__nuevo { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; margin-right: var(--e2); border: 1px solid var(--linea-2); border-radius: 999px; font-size: var(--t-sm); font-weight: 600; color: var(--tinta-2); flex: none; transition: color .16s var(--ease), border-color .16s var(--ease); }
.pedido__nuevo:hover { color: var(--brasa); border-color: var(--brasa); }
.pedido__nuevo[hidden] { display: none; }
.pedido__body { flex: 1 1 auto; overflow-y: auto; padding: var(--e4); }

.li { display: grid; grid-template-columns: auto 1fr auto; gap: var(--e3); align-items: start; padding-block: var(--e4); border-bottom: 1px solid var(--linea); }
.li__img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--r); flex: none; background: var(--papel-3); }
.li__img.ph { display: grid; place-items: center; background: var(--papel-3); color: var(--linea-2); font-family: var(--f-display); font-size: 1.4rem; }
.li__txt { min-width: 0; }
.li__txt h4 { font-family: var(--f-cuerpo); font-weight: 600; font-size: var(--t-sm); letter-spacing: -.01em; }
.li__det { font-size: var(--t-xs); color: var(--tinta-2); margin-top: var(--e1); line-height: 1.45; }
.li__edit { font-size: var(--t-xs); font-weight: 600; color: var(--brasa); margin-top: var(--e2); min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: 3px; }
.li__der { display: flex; flex-direction: column; align-items: flex-end; gap: var(--e2); }
.li__precio { font-weight: 700; font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.qty { display: inline-flex; align-items: center; gap: var(--e1); border: 1.5px solid var(--linea-2); border-radius: var(--r); }
.qty button { width: 44px; height: 44px; display: grid; place-items: center; font-size: var(--t-md); line-height: 1; color: var(--tinta); }
.qty button:hover { background: var(--papel-3); }
.qty b { min-width: 22px; text-align: center; font-size: var(--t-sm); font-variant-numeric: tabular-nums; }

.mas { width: 100%; min-height: 48px; margin-top: var(--e4); border: 1.5px dashed var(--linea-2); border-radius: var(--r); font-weight: 600; font-size: var(--t-sm); color: var(--tinta-2); }
.mas:hover { background: var(--papel-3); color: var(--tinta); }

.entrega { margin-top: var(--e5); display: grid; gap: var(--e3); }
.entrega__fijo { display: flex; align-items: center; gap: var(--e2); padding: var(--e3); background: var(--papel-3); border-radius: var(--r); font-size: var(--t-sm); font-weight: 600; }
.entrega__fijo svg { width: 20px; height: 20px; color: var(--brasa); flex: none; }
.campo { display: grid; gap: var(--e1); }
.campo__lbl { font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); }
.campo__lbl em { font-style: normal; font-weight: 500; text-transform: none; letter-spacing: 0; opacity: .8; }
.campo input {
  width: 100%; min-height: 48px; padding: var(--e3);
  background: var(--papel-2); color: var(--tinta);
  border: 1.5px solid var(--linea-2); border-radius: var(--r);
  font-family: inherit; font-size: var(--t-b);
}
.check { display: flex; align-items: center; gap: var(--e3); min-height: 52px; padding: var(--e2) var(--e3); background: var(--papel-2); border: 1.5px solid var(--linea); border-radius: var(--r); cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--brasa); flex: none; }
.check small { display: block; font-size: var(--t-xs); color: var(--tinta-2); }

/* Casilla de maquila — es una oferta, no una condición al pie.
   Borde en acento y cifra visible: se ve antes de leerse. */
.maquila {
  display: flex; align-items: center; gap: var(--e3);
  min-height: 64px; padding: var(--e3);
  background: var(--papel-2);
  border: 1.5px solid var(--brasa); border-radius: var(--r);
  cursor: pointer;
  transition: background .16s var(--ease);
}
.maquila:hover { background: color-mix(in srgb, var(--brasa) 6%, var(--papel-2)); }
.maquila:has(:checked) { background: color-mix(in srgb, var(--brasa) 10%, var(--papel-2)); }
.maquila input { width: 24px; height: 24px; accent-color: var(--brasa); flex: none; }
.maquila__txt { flex: 1 1 auto; min-width: 0; }
.maquila__txt b { display: block; font-size: var(--t-sm); font-weight: 700; }
.maquila__txt small { display: block; font-size: var(--t-xs); color: var(--tinta-2); margin-top: 1px; }
.maquila__txt small b { display: inline; color: var(--brasa); font-variant-numeric: tabular-nums; }
.maquila__pct {
  flex: none; font-family: var(--f-display); font-size: var(--t-md);
  color: var(--brasa); letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.vaciar { display: block; margin: var(--e5) auto 0; min-height: 44px; padding-inline: var(--e4); font-size: var(--t-sm); font-weight: 600; color: var(--tinta-2); text-decoration: underline; text-underline-offset: 3px; }
.vaciar:hover { color: var(--brasa); }

.pedido__foot { flex: none; padding: var(--e4); padding-bottom: calc(var(--e4) + env(safe-area-inset-bottom)); border-top: 1px solid var(--linea); background: var(--papel-2); }
.tot { display: flex; justify-content: space-between; align-items: baseline; padding-block: var(--e1); font-size: var(--t-sm); }
.tot b { font-variant-numeric: tabular-nums; }
.tot--desc { color: var(--exito); }
.tot--grande { font-size: var(--t-md); padding-bottom: var(--e3); }
.tot--grande b { font-family: var(--f-display); font-size: var(--t-lg); }
.pedido__nota { font-size: var(--t-xs); color: var(--tinta-2); text-align: center; margin-top: var(--e2); }

/* Vacío / éxito */
.vacio, .exito { text-align: center; padding: var(--e8) var(--e4); display: grid; gap: var(--e4); justify-items: center; }
.vacio__ico, .exito__ico { width: 48px; height: 48px; color: var(--linea-2); }
.exito__ico { color: var(--exito); }
.exito h3 { font-size: var(--t-lg); }
.exito p { font-size: var(--t-sm); color: var(--tinta-2); max-width: 34ch; }
.exito__nota { font-size: var(--t-xs); }
.exito--alerta .exito__ico { color: var(--brasa); }
.link { color: var(--brasa); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; min-height: 44px; }

/* ═══════════ AVISO (pedido restaurado) ═══════════ */
.aviso {
  position: fixed; left: var(--e4); right: var(--e4);
  bottom: calc(var(--barra-h, 76px) + var(--e3) + env(safe-area-inset-bottom));
  z-index: 120;
  background: var(--tinta); color: var(--papel);
  border: 1px solid var(--linea-2);
  border-radius: var(--r); padding: var(--e3) var(--e4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--e3); flex-wrap: wrap;
  box-shadow: 0 12px 32px -16px rgba(0,0,0,.6);
  transform: translateY(16px); opacity: 0;
  transition: transform .22s var(--ease), opacity .22s var(--ease);
}
.aviso--on { transform: translateY(0); opacity: 1; }
.aviso p { font-size: var(--t-sm); font-weight: 500; }
.aviso__b { display: flex; gap: var(--e2); }
.aviso__b button { min-height: 44px; padding-inline: var(--e3); border-radius: var(--r); font-size: var(--t-sm); font-weight: 600; }
.aviso__b [data-aviso-ver] { background: var(--brasa); color: var(--sobre-brasa); }
.aviso__b [data-aviso-no] { border: 1.5px solid rgba(252,249,243,.3); color: var(--papel); }
@media (min-width: 640px) { .aviso { left: auto; right: var(--e5); max-width: 420px; } }

/* ═══════════ MOTION ═══════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .hoja, .pedido { transition: none; }
}