/* =============================================================
   Menú digital · estilos
   Un solo tema cálido, mobile-first (360-430 px).
   Idea visual: carta impresa de fonda. Filetes y punteados en vez
   de tarjetas; el bloque "Hoy" es lo único enmarcado.
   ============================================================= */

:root {
  color-scheme: light;

  /* Colores (contraste medido sobre --fondo salvo que se indique) */
  --fondo: #F4EDE1;
  --superficie: #FBF8F2;
  --superficie-2: #EDE5D8;
  --tinta: #1E1A16;           /* 14.9:1 */
  --tinta-2: #574D44;         /* 7.1:1 */
  --tinta-3: #6E6359;         /* 5.0:1 · 4.7:1 sobre --superficie-2 */
  --linea: #DCD0BE;           /* filetes decorativos */
  --punteado: #BDAF9B;        /* punteados decorativos */
  --linea-campo: #8C7F72;     /* borde de campos: 3.4:1 (mín. 3:1) */
  --acento: #B04A25;          /* blanco sobre él: 5.4:1 */
  --acento-oscuro: #8F3A1A;
  --acento-texto: #9C401E;    /* 5.7:1 */
  --acento-suave: #F3E0D4;
  --verde: #2F5D3A;           /* 6.6:1 · 6.2:1 sobre --verde-suave */
  --verde-suave: #E2EADB;
  --ambar: #7A4B00;           /* 5.9:1 sobre --ambar-suave */
  --ambar-suave: #F4E4C4;
  --error: #9E2A19;           /* 6.4:1 */

  /* Tipografía (2 familias) */
  --fuente-titulo: "Zilla Slab", Rockwell, "Roboto Slab", Georgia, serif;
  --fuente-texto: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Escala de espacios */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 24px;
  --e6: 32px;
  --e7: 48px;
  --e8: 64px;

  /* Radios: discretos, nada de pastillas por todos lados */
  --radio: 6px;
  --radio-chico: 4px;
  --radio-pastilla: 999px;

  --toque: 44px;
  --alto-chip: 48px;
  /* alto real de la barra de categorías: 4 (arriba) + 48 (chip) + 1 (filete) */
  --alto-barra: 53px;
  /* alto de la barra de pedido sin el área segura: 10 + 48 + 10 */
  --alto-pedido: 68px;
  --ancho: 680px;
  --ancho-panel: 560px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* lo que se desplaza (anclas, foco, scrollIntoView) queda justo bajo la barra fija */
  scroll-padding-top: var(--alto-barra);
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

/* que la barra de pedido nunca tape el pie */
body.con-pedido { padding-bottom: calc(var(--alto-pedido) + env(safe-area-inset-bottom)); }
body.panel-abierto { overflow: hidden; }

[hidden] { display: none !important; }

h1, h2, h3 {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }

a { color: var(--acento-texto); text-underline-offset: 3px; }

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

button, input, textarea, select { font: inherit; color: inherit; }

button { cursor: pointer; }

:focus-visible {
  outline: 2.5px solid var(--acento);
  outline-offset: 2px;
}

.precio {
  font-family: var(--fuente-texto);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 600;
  white-space: nowrap;
}

.icono { flex: none; width: 20px; height: 20px; }

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

.saltar {
  position: absolute;
  left: var(--e4);
  top: -60px;
  z-index: 50;
  padding: 10px var(--e4);
  background: var(--tinta);
  color: var(--fondo);
  border-radius: var(--radio-chico);
}
.saltar:focus { top: var(--e2); }

.columna {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 var(--e4);
}

/* ---------- Botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: var(--toque);
  padding: 10px 18px;
  border-radius: var(--radio);
  border: 1.5px solid transparent;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  transition: background-color .15s, border-color .15s, color .15s;
}

.boton-primario {
  background: var(--acento);
  color: #F5EFE4;
  border-color: var(--acento);
}
.boton-primario:hover { background: var(--acento-oscuro); border-color: var(--acento-oscuro); }

.boton-secundario {
  background: transparent;
  color: var(--tinta);
  border-color: var(--tinta-2);
}
.boton-secundario:hover { background: var(--superficie-2); border-color: var(--tinta); }

.boton-ancho { width: 100%; }

.boton-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--toque);
  height: var(--toque);
  padding: 0;
  border: 1.5px solid var(--linea);
  border-radius: var(--radio);
  background: transparent;
  color: var(--tinta);
}
.boton-icono:hover { border-color: var(--tinta-2); }
.boton-icono .icono { width: 22px; height: 22px; }

/* ---------- Encabezado ---------- */
.encabezado {
  border-top: 4px double var(--tinta);
  padding-top: var(--e2);
}

.encabezado-enlaces {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0 var(--e1);
  margin: 0 -10px;
}

.enlace-icono {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--toque);
  padding: 0 10px;
  color: var(--tinta);
  font-size: .9375rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radio);
}
.enlace-icono:hover { background: var(--superficie-2); }
.enlace-icono .icono { width: 18px; height: 18px; color: var(--tinta-2); }

.encabezado-pueblo {
  margin-top: var(--e4);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--acento-texto);
}

.encabezado-nombre {
  margin-top: var(--e1);
  font-size: clamp(2.25rem, 10.5vw, 3.25rem);
  line-height: 1.02;
  letter-spacing: -.015em;
}

.encabezado-subtitulo {
  margin-top: var(--e2);
  color: var(--tinta-2);
  font-size: 1rem;
  max-width: 34ch;
}

.estado {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  margin-top: var(--e4);
  padding: 5px 12px 5px 10px;
  border-radius: var(--radio-chico);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.35;
  background: var(--superficie-2);
  color: var(--tinta-2);
}
.estado-punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.estado[data-abierto="si"] { background: var(--verde-suave); color: var(--verde); }
.estado[data-abierto="si"].pronto { background: var(--ambar-suave); color: var(--ambar); }

/* Tira de papel picado: hilo fino con banderitas chicas, a dos tintas */
.papel-picado {
  height: 12px;
  margin-top: var(--e5);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='12' viewBox='0 0 40 12'%3E%3Cpath d='M0 .75h40' stroke='%231E1A16' stroke-opacity='.55' stroke-width='.75'/%3E%3Cpath d='M5 1h9v7l-1.5 2-1.5-2-1.5 2L8 8l-1.5 2L5 8z' fill='%23B04A25'/%3E%3Cpath d='M25 1h9v7l-1.5 2-1.5-2-1.5 2L28 8l-1.5 2L25 8z' fill='%232F5D3A'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center top;
}

/* ---------- Bloque "Hoy" (el protagonista) ---------- */
.hoy {
  margin-top: var(--e5);
  padding: var(--e5) var(--e4) var(--e4);
  background: var(--superficie);
  border: 3px double var(--tinta);
  border-radius: var(--radio-chico);
}

.hoy-fecha {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--acento-texto);
}

.hoy-cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e3);
  margin-top: var(--e1);
}

.hoy-titulo {
  margin-top: var(--e1);
  font-size: clamp(1.5rem, 1rem + 2vw, 2rem);
  line-height: 1.1;
}
.hoy-cabeza .hoy-titulo { margin-top: 0; min-width: 0; text-wrap: pretty; }

.precio-grande { font-size: clamp(1.5rem, 1rem + 2vw, 2rem); line-height: 1.1; }

.hoy-corrida {
  margin: var(--e4) 0 0;
  border-top: 1px solid var(--tinta);
}
.hoy-corrida > div {
  display: grid;
  grid-template-columns: 5.25rem minmax(0, 1fr);
  gap: var(--e3);
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px dotted var(--punteado);
}
.hoy-corrida dt {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.hoy-corrida dd {
  margin: 0;
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.35;
}

.hoy-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3) var(--e4);
  margin-top: var(--e4);
  flex-wrap: wrap;
}
.hoy-incluye { flex: 1 1 14rem; color: var(--tinta-2); font-size: .9375rem; line-height: 1.45; }

.hoy-texto { margin-top: var(--e2); color: var(--tinta-2); line-height: 1.45; }

.hoy-lista {
  list-style: none;
  margin: var(--e4) 0 0;
  padding: 0;
  border-top: 1px solid var(--tinta);
}
.hoy-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  min-height: 64px;
  padding: 10px 0;
  border-bottom: 1px dotted var(--punteado);
}
.hoy-item:last-child { border-bottom: 0; padding-bottom: 0; }
.hoy-item-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}
.hoy-item-nombre { font-weight: 500; font-size: 1.0625rem; }
.hoy-item .precio { margin-top: 2px; font-size: 1rem; color: var(--tinta); }
.hoy-item.agotado .hoy-item-nombre,
.hoy-item.agotado .precio { color: var(--tinta-3); }
.hoy-item.agotado .precio { text-decoration: line-through; text-decoration-thickness: 1px; }

/* La comida corrida es la acción principal de la página: botón relleno.
   En la lista del fin de semana se quedan delineados para no hacer un muro naranja. */
.hoy-pie .btn-agregar { background: var(--acento); color: #F5EFE4; padding: 0 20px 0 16px; }
.hoy-pie .btn-agregar:hover { background: var(--acento-oscuro); border-color: var(--acento-oscuro); }
.hoy-item .btn-agregar { padding: 0 14px 0 10px; }

/* ---------- Buscador ---------- */
.buscador-caja { margin-top: var(--e7); }

.buscador-etiqueta {
  display: block;
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.2;
  margin-bottom: var(--e2);
}

.buscador-campo { position: relative; }

.buscador-lupa {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--tinta-2);
  display: flex;
  pointer-events: none;
}

#buscador {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px 12px 44px;
  font-size: 1rem;
  background: var(--superficie);
  border: 1.5px solid var(--linea-campo);
  border-radius: var(--radio);
  -webkit-appearance: none;
  appearance: none;
}
#buscador::placeholder { color: var(--tinta-3); opacity: 1; }
#buscador:focus-visible { outline-offset: 0; border-color: var(--acento); }
/* La "x" nativa del buscador, en color tinta (sin el azul del navegador) */
#buscador::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: var(--e2, 0.5rem);
  cursor: pointer;
  background: var(--tinta-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Barra de categorías (fija al hacer scroll) ---------- */
.barra-categorias {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 20;
  margin-top: var(--e3);
  background: var(--fondo);
  border-bottom: 1px solid var(--linea);
}

.barra-categorias-interior {
  display: flex;
  align-items: center;
  padding-top: var(--e1);
  padding-right: 0;
  height: calc(var(--alto-barra) - 1px);
}

/* La lupa queda fija y separada por un filete: así el chip que se
   asoma por la izquierda se corta en una línea limpia y no contra la lupa */
.chip.chip-lupa {
  flex: none;
  width: var(--toque);
  height: var(--toque);
  min-height: 0;
  margin-left: -10px;
  margin-right: var(--e1);
  padding: 0;
  justify-content: center;
  color: var(--tinta-2);
  border-radius: var(--radio);
}
.chip.chip-lupa:hover { color: var(--tinta); background: var(--superficie-2); }

.chips {
  display: flex;
  align-self: stretch;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex: 1 1 auto;
  min-width: 0;
  padding-right: var(--e2);
  border-left: 1px solid var(--linea);
  scroll-padding: 0 var(--e4);
}
.chips::-webkit-scrollbar { display: none; }

/* Las categorías se leen como pestañas de una carta: texto y subrayado */
.chip {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: var(--alto-chip);
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: var(--tinta-2);
  font-size: .9375rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: inset 0 -3px 0 transparent;
  transition: color .15s, box-shadow .15s;
}
.chips .chip:first-child { margin-left: var(--e1); }
.chip:hover { color: var(--tinta); }
.chip.activa {
  color: var(--tinta);
  box-shadow: inset 0 -3px 0 var(--acento);
}
/* dentro del carril con scroll el contorno se recortaría: va por dentro */
.chips .chip:focus-visible { outline-offset: -4px; }

/* ---------- Menú ---------- */
.menu:focus { outline: none; }

.categoria {
  padding-top: var(--e6);
}

.categoria-titulo {
  display: flex;
  align-items: center;
  gap: var(--e3);
  font-size: 1.625rem;
  margin-bottom: var(--e2);
}
/* filete doble fino a la derecha del título, como carta impresa */
.categoria-titulo::after {
  content: "";
  flex: 1;
  height: 4px;
  margin-top: 4px;
  border-top: 1px solid var(--tinta);
  border-bottom: 1px solid var(--tinta);
  opacity: .45;
}

.categoria-lista {
  display: grid;
  gap: 0;
}

/* Cada platillo es un renglón de la carta, no una tarjeta */
.platillo {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 0 14px;
  padding: var(--e4) 0;
  border-bottom: 1px dotted var(--punteado);
}

.platillo-foto {
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: var(--radio-chico);
  background: var(--superficie-2);
}

.platillo-cuerpo {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.platillo-cabeza {
  display: flex;
  align-items: baseline;
  gap: var(--e2);
}
/* puntos guía entre el nombre y el precio */
.platillo-cabeza::after {
  content: "";
  order: 1;
  flex: 1 1 var(--e3);
  min-width: var(--e3);
  border-bottom: 2px dotted var(--punteado);
  transform: translateY(-4px);
}

.platillo-nombre {
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.2;
  min-width: 0;
  text-wrap: pretty;
}

.platillo-precio {
  order: 2;
  font-size: 1.1875rem;
  text-align: right;
}

.platillo-descripcion {
  margin-top: var(--e1);
  color: var(--tinta-2);
  font-size: .9375rem;
  line-height: 1.45;
  max-width: 46ch;
}

.etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--e3);
  list-style: none;
  margin: var(--e2) 0 0;
  padding: 0;
}
.etiqueta {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--tinta-2);
}
.etiqueta-picante { color: var(--acento-texto); }
.etiqueta-vegetariano { color: var(--verde); }
.etiqueta-del-dia {
  padding: 0 6px;
  background: var(--tinta);
  color: var(--fondo);
  border-radius: 2px;
}

.platillo-accion {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
  padding-top: var(--e3);
}

/* "Se acabó por hoy" / "Solo domingos": aviso de texto, no botón */
.estado-platillo {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--tinta-2);
}

/* Agotado: sin controles, atenuado pero legible (≥4.5:1) */
.platillo.agotado .platillo-foto { filter: grayscale(1); opacity: .5; }
.platillo.agotado .platillo-nombre,
.platillo.agotado .platillo-precio,
.platillo.agotado .platillo-descripcion { color: var(--tinta-3); }
.platillo.agotado .platillo-precio { text-decoration: line-through; text-decoration-thickness: 1px; }
.platillo.agotado .etiqueta { color: var(--tinta-3); background: transparent; padding: 0; }

/* No se vende hoy: atenuado más leve */
.platillo.no-hoy .platillo-foto { opacity: .6; }
.platillo.no-hoy .platillo-nombre,
.platillo.no-hoy .platillo-precio { color: var(--tinta-2); }

/* ---------- Controles + / − ---------- */
.control-cantidad { display: inline-flex; flex: none; }

.btn-agregar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--toque);
  padding: 0 16px 0 12px;
  border: 1.5px solid var(--acento);
  border-radius: var(--radio);
  background: transparent;
  color: var(--acento-texto);
  font-weight: 600;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn-agregar:hover { background: var(--acento); color: #F5EFE4; }

.control-cantidad[data-cantidad]:not([data-cantidad="0"]) {
  align-items: center;
  border: 1.5px solid var(--acento);
  border-radius: var(--radio);
  background: var(--acento);
  color: #F5EFE4;
}

.btn-menos,
.btn-mas {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--toque);
  height: var(--toque);
  padding: 0;
  border: 0;
  border-radius: var(--radio-chico);
  background: transparent;
  color: #F5EFE4;
}
.btn-menos:hover,
.btn-mas:hover { background: var(--acento-oscuro); }
.btn-menos:focus-visible,
.btn-mas:focus-visible { outline-color: var(--tinta); outline-offset: 1px; }

.cantidad {
  min-width: 2ch;
  text-align: center;
  font-weight: 600;
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
}

/* ---------- Sin resultados ---------- */
.sin-resultados {
  margin-top: var(--e5);
  padding: var(--e5) var(--e4);
  text-align: center;
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}
.sin-resultados p { margin-bottom: var(--e3); }

/* ---------- Secciones ---------- */
.seccion {
  margin-top: var(--e7);
  padding-top: var(--e5);
  border-top: 4px double var(--tinta);
}
.seccion:focus { outline: none; }

.seccion-titulo { font-size: 1.625rem; }
.seccion-nota { margin-top: var(--e1); color: var(--tinta-2); font-size: .9375rem; }

.vacio {
  margin-top: var(--e3);
  color: var(--tinta-2);
}

/* Mis pedidos */
.lista-pedidos {
  list-style: none;
  margin: var(--e3) 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.pedido-anterior {
  padding: var(--e4) 0;
  border-bottom: 1px dotted var(--punteado);
}
.pedido-anterior-cabeza {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--e3);
}
.pedido-anterior-fecha { font-weight: 600; }
.pedido-anterior-cabeza .precio { font-size: 1.125rem; }
.pedido-anterior-resumen { margin-top: var(--e1); color: var(--tinta-2); font-size: .9375rem; }
.pedido-anterior-entrega { margin-top: 2px; color: var(--tinta-3); font-size: .875rem; }
.pedido-anterior .repetir { margin-top: var(--e3); }
.aviso-saltados {
  margin-top: var(--e2);
  font-size: .9375rem;
  color: var(--verde);
  font-weight: 500;
}

/* Dónde estamos */
.info-direccion { margin-top: var(--e3); font-size: 1.0625rem; max-width: 36ch; }

.info-botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin-top: var(--e4);
}
.info-botones .boton { flex: 1 1 13rem; }

.info-subtitulo {
  margin-top: var(--e6);
  font-size: 1.25rem;
}

.horario {
  width: 100%;
  margin-top: var(--e2);
  border-collapse: collapse;
  border-top: 1px solid var(--tinta);
  font-variant-numeric: tabular-nums;
}
.horario th,
.horario td {
  padding: 10px var(--e2);
  border-bottom: 1px dotted var(--punteado);
  text-align: left;
  font-weight: 400;
}
.horario td { text-align: right; white-space: nowrap; }
.horario .hoy-fila th,
.horario .hoy-fila td {
  font-weight: 600;
  background: var(--superficie);
}
.horario .hoy-fila th { box-shadow: inset 3px 0 0 var(--acento); }

.info-envio { margin-top: var(--e4); color: var(--tinta-2); max-width: 46ch; }
.redes { margin-top: var(--e3); font-weight: 500; }
.redes a {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque);
}

/* ---------- Pie ---------- */
.pie {
  margin-top: var(--e7);
  padding: var(--e5) 0 var(--e6);
  border-top: 1px solid var(--linea);
  text-align: center;
  font-size: .875rem;
  color: var(--tinta-2);
}
.pie a {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque);
  font-weight: 600;
  color: var(--tinta);
}

/* ---------- Barra inferior del pedido ---------- */
.barra-pedido {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  background: var(--tinta);
  color: var(--fondo);
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
}
.barra-pedido-interior {
  display: flex;
  align-items: center;
  gap: var(--e3);
}
.barra-bolsa { display: flex; }
.barra-bolsa .icono { width: 24px; height: 24px; }
.barra-resumen {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
  flex: 1;
}
#barra-cantidad { font-size: .875rem; color: #F5EFE4; } /* 11.6:1 sobre la tinta */
#barra-total { font-size: 1.3125rem; }
.barra-pedido .boton-primario { flex: none; min-height: 48px; padding-inline: 20px; }
.barra-pedido :focus-visible { outline-color: var(--fondo); }

/* ---------- Panel "Mi pedido" ---------- */
.panel {
  width: 100%;
  max-width: var(--ancho-panel);
  max-height: 92vh;
  max-height: 92dvh;
  margin: auto auto 0;
  padding: 0;
  border: 0;
  border-radius: 12px 12px 0 0;
  background: var(--fondo);
  color: var(--tinta);
  overflow: hidden;
}
.panel::backdrop { background: rgba(30, 26, 22, .55); }

/* Respaldo sin <dialog> modal */
.panel.sin-modal[open] {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  box-shadow: 0 -1px 0 var(--linea);
}

.panel-form {
  display: flex;
  flex-direction: column;
  max-height: 92vh;
  max-height: 92dvh;
}

.panel-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--linea);
}
.panel-cabeza h2 { font-size: 1.5rem; }

.panel-cuerpo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--e2) var(--e4) var(--e5);
}

.panel-pie {
  padding: var(--e3) var(--e4) calc(var(--e3) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linea);
  background: var(--superficie);
}

.panel-letra-chica {
  margin-top: var(--e2);
  font-size: .8125rem;
  color: var(--tinta-2);
  text-align: center;
}

.aviso-cerrado {
  margin: var(--e2) 0 var(--e2);
  padding: var(--e3) var(--e4);
  background: var(--ambar-suave);
  color: var(--ambar);
  border-radius: var(--radio);
  font-weight: 500;
}

.pedido-enviado {
  display: grid;
  gap: var(--e3);
  justify-items: start;
  padding: var(--e3) 0 var(--e4);
}
.pedido-enviado-titulo {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.2;
  color: var(--verde);
}

/* Líneas del pedido */
.lineas-pedido {
  list-style: none;
  margin: 0;
  padding: 0;
}
.linea-pedido {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "texto texto"
    "control subtotal";
  align-items: center;
  gap: var(--e2) var(--e3);
  padding: var(--e3) 0;
  border-bottom: 1px dotted var(--punteado);
}
.linea-texto { grid-area: texto; display: flex; flex-direction: column; min-width: 0; }
.linea-nombre { font-weight: 600; }
.linea-detalle { font-size: .875rem; color: var(--tinta-2); }
.linea-unitario { font-size: .875rem; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.linea-pedido .control-cantidad { grid-area: control; justify-self: start; }
.linea-subtotal { grid-area: subtotal; font-size: 1.125rem; text-align: right; }

@media (min-width: 420px) {
  .linea-pedido {
    grid-template-columns: minmax(0, 1fr) auto 5rem;
    grid-template-areas: "texto control subtotal";
  }
}

/* Campos */
.campo {
  margin: var(--e5) 0 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.campo label,
.campo legend {
  display: block;
  margin-bottom: 6px;
  padding: 0;
  font-weight: 600;
}
.opcional { font-weight: 400; color: var(--tinta-3); }

.campo input[type="text"],
.campo textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 11px 12px;
  font-size: 1rem;
  background: #F5EFE4;
  border: 1.5px solid var(--linea-campo);
  border-radius: var(--radio);
  -webkit-appearance: none;
  appearance: none;
}
.campo input::placeholder,
.campo textarea::placeholder { color: var(--tinta-3); opacity: 1; }
.campo textarea { resize: vertical; min-height: 72px; }
.campo input:focus-visible,
.campo textarea:focus-visible { outline-offset: 0; border-color: var(--acento); }
.campo [aria-invalid="true"] { border-color: var(--error); }

.opciones-lista { display: grid; gap: var(--e2); }

.campo .opcion {
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-height: 56px;
  margin: 0;
  padding: 10px 14px;
  background: var(--superficie);
  border: 1.5px solid var(--linea);
  border-radius: var(--radio);
  cursor: pointer;
  font-weight: 400;
}
.campo .opcion:hover { border-color: var(--linea-campo); }
.opcion input {
  width: 20px;
  height: 20px;
  margin: 0;
  flex: none;
  accent-color: var(--acento);
}
.campo .opcion:has(input:checked) { border-color: var(--acento); background: var(--acento-suave); }
.opcion:has(input:focus-visible) { outline: 2.5px solid var(--acento); outline-offset: 2px; }
.opcion-texto { display: flex; flex-direction: column; line-height: 1.3; }
.opcion-titulo { font-weight: 600; }
.opcion-detalle { font-size: .875rem; color: var(--tinta-2); }
.con-error .opcion { border-color: var(--error); }

.subcampos {
  margin-top: var(--e3);
  padding: 0 0 0 var(--e4);
  border-left: 3px solid var(--linea);
}
.subcampos > .campo:first-child { margin-top: 0; }
.subcampos > .nota + .campo { margin-top: var(--e3); }

.nota { color: var(--tinta-2); font-size: .9375rem; }
.nota-destacada {
  padding: var(--e2) var(--e3);
  background: var(--verde-suave);
  color: var(--verde);
  border-radius: var(--radio);
  font-weight: 600;
}

.error {
  margin-top: 6px;
  color: var(--error);
  font-size: .9375rem;
  font-weight: 500;
}

/* Transferencia */
.transferencia { display: grid; gap: var(--e3); justify-items: start; }
.transferencia .nota-destacada { width: 100%; }
.datos-banco { margin: 0; width: 100%; }
.datos-banco > div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: var(--e2);
  align-items: baseline;
  padding: var(--e2) 0;
  border-bottom: 1px dotted var(--punteado);
}
.datos-banco dt { color: var(--tinta-2); font-size: .9375rem; }
.datos-banco dd { margin: 0; font-weight: 500; min-width: 0; }
.datos-banco > .fila-clabe { grid-template-columns: minmax(0, 1fr); gap: 2px; }

.clabe {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0 .45em;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: .02em;
}
.clabe-bloque { white-space: nowrap; }

#copiar-clabe.copiado { border-color: var(--verde); color: var(--verde); }

.copiar-oculto {
  position: fixed;
  top: 0;
  left: -9999px;
  opacity: 0;
}

/* Totales */
.totales { margin: 0 0 var(--e3); }
.totales > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--e3);
  padding: 2px 0;
}
.totales dt { color: var(--tinta-2); }
.totales dd { margin: 0; }
.totales > div:not([hidden]) ~ .total {
  margin-top: var(--e1);
  padding-top: var(--e1);
  border-top: 1px solid var(--linea);
}
.totales .total dt {
  color: var(--tinta);
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 1.25rem;
}
.totales .total dd { font-size: 1.5rem; }

/* El botón de mandar es la acción principal: más alto y más pesado */
#mandar-whatsapp {
  min-height: 54px;
  font-size: 1.0625rem;
}

/* ---------- Aviso (toast) ---------- */
.aviso {
  position: fixed;
  left: 50%;
  bottom: calc(var(--e4) + env(safe-area-inset-bottom));
  z-index: 60;
  max-width: calc(100% - 32px);
  width: max-content;
  padding: 10px 16px;
  background: var(--tinta);
  color: var(--fondo);
  border-radius: var(--radio);
  font-size: .9375rem;
  font-weight: 500;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 6px);
  pointer-events: none;
  transition: opacity .18s, transform .18s;
}
.aviso.visible { opacity: 1; transform: translate(-50%, 0); }
body.con-pedido .aviso { bottom: calc(var(--alto-pedido) + var(--e3) + env(safe-area-inset-bottom)); }
.panel .aviso { bottom: calc(160px + env(safe-area-inset-bottom)); }

/* ---------- Pantallas más grandes ---------- */
@media (min-width: 720px) {
  .encabezado { padding-top: var(--e3); }
  .encabezado-pueblo { margin-top: var(--e5); }
  .hoy { padding: var(--e5) var(--e6) var(--e5); }
  .platillo { grid-template-columns: 88px minmax(0, 1fr); gap: 0 var(--e4); }
  .platillo-foto { width: 88px; height: 88px; }

  .panel {
    margin: auto;
    border-radius: var(--radio);
    max-height: 88vh;
    max-height: 88dvh;
  }
  .panel-form { max-height: 88vh; max-height: 88dvh; }
}

/* Escritorio: carta a dos columnas, centrada */
@media (min-width: 1024px) {
  :root { --ancho: 1008px; }

  .encabezado-nombre { font-size: 3.5rem; }

  .hoy { margin-top: var(--e6); }
  /* la corrida se lee como pizarrón: sopa | guisado | agua */
  .hoy-corrida {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    border-bottom: 1px dotted var(--punteado);
  }
  .hoy-corrida > div {
    display: block;
    padding: var(--e3) var(--e4) var(--e3) 0;
    border-bottom: 0;
  }
  .hoy-corrida > div + div { padding-left: var(--e4); border-left: 1px dotted var(--punteado); }
  .hoy-corrida dt { margin-bottom: 2px; }
  .hoy-corrida dd { font-size: 1.125rem; }
  .hoy-lista {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--e7);
  }
  .hoy-item:last-child { border-bottom: 1px dotted var(--punteado); padding-bottom: 10px; }

  .buscador-caja { max-width: 36rem; }

  .categoria { padding-top: var(--e7); }
  .categoria-lista {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--e7);
  }

  .lista-pedidos { grid-template-columns: 1fr 1fr; column-gap: var(--e7); }

  /* Dónde estamos: datos a la izquierda, horario a la derecha */
  .info {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto 1fr;
    column-gap: var(--e7);
    align-items: start;
  }
  .info > .seccion-titulo { grid-column: 1 / -1; }
  .info-direccion { grid-column: 1; grid-row: 2; }
  .info-botones { grid-column: 1; grid-row: 3; }
  .info-botones .boton { flex: 0 1 auto; white-space: nowrap; }
  .info-envio { grid-column: 1; grid-row: 4; }
  .redes { grid-column: 1; grid-row: 5; }
  .info-subtitulo { grid-column: 2; grid-row: 2; margin-top: var(--e3); }
  .horario { grid-column: 2; grid-row: 3 / 6; }
}

/* ---------- Movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}


/* FA Studio ? identidad editorial */
:root{--fondo:#F5EFE4;--tinta:#1C1A17;--acento:#C0532F;--fuente-titulo:"Fraunces",Georgia,serif;--fuente-texto:"Inter",Arial,sans-serif;--ancho:1200px}
body{background:var(--fondo);color:var(--tinta);padding-bottom:42px}h1,h2,h3{font-weight:400}.encabezado.hero{position:relative;min-height:min(780px,88vh);padding:34px max(24px,calc((100vw - 1200px)/2));display:flex;align-items:center;overflow:hidden;background:#1C1A17;color:#F5EFE4;border:0}.hero-image{position:absolute;inset:0 0 0 38%;background:linear-gradient(90deg,#1C1A17 0%,rgba(28,26,23,.65) 28%,rgba(28,26,23,.1) 75%),url('img/portada.jpg') center/cover}.hero-copy{position:relative;z-index:1;max-width:600px;padding:90px 0}.hero-nav{position:absolute;z-index:2;right:max(24px,calc((100vw - 1200px)/2));top:24px;display:flex;gap:28px}.hero-nav a{color:#F5EFE4;text-decoration:none;min-height:44px;display:flex;align-items:center}.hero .encabezado-pueblo{color:#F5EFE4;opacity:.78;font-size:12px;letter-spacing:.14em}.hero .encabezado-nombre{font-size:clamp(3rem,6vw,5rem);line-height:1.02;letter-spacing:-.035em}.hero .encabezado-subtitulo{font-size:18px;color:#F5EFE4;max-width:34ch;margin-top:18px}.hero .estado{background:transparent;color:#F5EFE4;padding:0}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.boton-claro{background:transparent;border-color:#F5EFE4;color:#F5EFE4}.hero .papel-picado{display:none}.boton{border-radius:2px;min-height:48px}.columna{max-width:1200px}.buscador-caja{margin:72px 0 38px}.seccion{padding-block:80px}.buffet{padding-top:90px}.eyebrow{font:500 11px/1.4 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#574D44}.seccion-titulo,.categoria-titulo{font-size:clamp(2rem,4vw,3.5rem);letter-spacing:-.03em}.buffet-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:30px}.buffet-card{background:#1C1A17;color:#F5EFE4;overflow:hidden}.buffet-card img{width:100%;height:260px;object-fit:cover}.buffet-card>div{padding:24px}.buffet-card .eyebrow{color:#F5EFE4;opacity:.8}.buffet-card h3{font-size:28px;margin:10px 0}.buffet-card p:not(.eyebrow){color:#F5EFE4;line-height:1.55}.buffet-card strong{display:block;color:#C0532F;font-size:24px;margin:18px 0}.buffet-card .boton{display:inline-flex}.menu{max-width:none}.categoria{padding-block:52px;border:0}.categoria-titulo{margin-bottom:24px}.categoria-titulo::after{display:none}.categoria-lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.platillo{display:block;border:0;padding:0;background:transparent}.platillo-foto{width:100%;height:250px;object-fit:cover;border-radius:0}.platillo-cuerpo{padding:16px 0}.platillo-cabeza{align-items:baseline}.platillo-cabeza::after{display:none}.platillo-nombre{font-family:var(--fuente-titulo);font-weight:400;font-size:22px}.platillo-precio{color:#C0532F;font-size:18px}.platillo-descripcion{font-size:16px}.platillo-accion{margin-top:12px}.pie{background:#1C1A17;color:#F5EFE4;padding:58px 0 76px;border:0}.pie a{color:#F5EFE4}.pie .columna{max-width:1200px}.demo-bar{position:fixed;z-index:30;bottom:0;left:0;right:0;background:#1C1A17;color:#F5EFE4;text-align:center;padding:11px 16px;font-size:12px;letter-spacing:.02em}.barra-pedido{bottom:42px}.panel{max-height:calc(100dvh - 48px)}
@media(max-width:700px){.encabezado.hero{min-height:660px;padding:24px}.hero-image{inset:0;background:linear-gradient(90deg,rgba(28,26,23,.84),rgba(28,26,23,.44)),url('img/portada.jpg') center/cover}.hero-copy{padding:110px 0 70px}.hero-nav{left:24px;right:24px;justify-content:space-between;gap:8px;top:18px}.hero-nav a{font-size:14px}.hero .encabezado-nombre{font-size:clamp(2.7rem,12vw,4rem)}.seccion{padding-block:56px}.buffet-grid,.categoria-lista{grid-template-columns:1fr}.buffet-card img{height:220px}.buscador-caja{margin:56px 0 30px}.platillo-foto{height:230px}.categoria{padding-block:36px}.pie{padding-bottom:90px}}
@media(min-width:1024px){.platillo-foto{height:260px}.hero-copy{padding-left:0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* Paleta cerrada y pizarr?n del d?a */
:root{--superficie:var(--fondo);--superficie-2:var(--fondo);--tinta:#1C1A17;--tinta-2:#1C1A17;--tinta-3:#1C1A17;--linea:#1C1A17;--punteado:#1C1A17;--linea-campo:#1C1A17;--acento-oscuro:#C0532F;--acento-texto:#C0532F;--acento-suave:#F5EFE4;--verde:#1C1A17;--verde-suave:#F5EFE4;--ambar:#1C1A17;--ambar-suave:#F5EFE4;--error:#C0532F}
.boton-primario,.btn-agregar,.hoy-pie .btn-agregar{color:#F5EFE4}.hoy{background:#1C1A17;color:#F5EFE4;border:1px solid #1C1A17;border-radius:0;padding:32px}.hoy-fecha,.hoy-cabeza .precio,.hoy-corrida dt,.hoy-incluye,.hoy-texto,.hoy-item-nombre,.hoy-item .precio{color:#F5EFE4}.hoy-corrida,.hoy-corrida>div,.hoy-lista,.hoy-item{border-color:rgba(245,239,228,.46)}.hoy-item .btn-agregar{background:#C0532F;color:#F5EFE4}

.platillo .btn-agregar{background:transparent;color:#C0532F;border:1.5px solid #C0532F}.platillo .btn-agregar:hover{background:#C0532F;color:#FFFFFF}
.platillo-foto[src=""]{display:none}