/* Hallmark · macrostructure: Marquee Hero (landing) + flujo app full-screen (pedido) · tone: editorial (55% editorial / 30% retro-sonorense / 15% brasa) · anchor hue: brasa (warm 47°)
 * Landing: hero limpio + footer Ft1 · nav N6 masthead · theme: custom (Opción B — Gloock + DM Sans)
 * Pedido: modal a pantalla completa estilo DiDi/Uber — top fijo (4 pasos) · cuerpo scrolleable · bottom fijo (acciones contextuales) · paso 4 = desglose/checkout
 * pre-emit critique: P5 H5 E4 S5 R5 V5
 * Chuyitas Prime — capa propia sobre Tailwind CDN. Mobile-first. Catering y variante en modales aparte.
 */

/* ====== TOKENS (perfil de marca Prism) ====== */
:root {
  --color-paper:     oklch(14% 0.012 60);
  --color-paper-2:   oklch(18% 0.016 55);
  --color-paper-3:   oklch(22% 0.018 52);
  --color-ink:       oklch(92% 0.02 70);
  --color-ink-muted: oklch(66% 0.02 65);
  /* Acento unificado en el rojo del logo (antes naranja brasa). Se mantienen los nombres
     --color-brasa* por compatibilidad; ahora apuntan a tonos rojos. */
  --color-brasa:     oklch(52% 0.21 27);    /* rojo "Prime" (keylines, estructura) */
  --color-brasa-2:   oklch(62% 0.21 27);    /* rojo más brillante (texto/precios/hover legibles) */
  --color-rojo:      oklch(52% 0.21 27);    /* rojo "Prime" acción */
  --color-rojo-2:    oklch(44% 0.19 26);    /* sombra del rojo (extrudado) */
  --color-wood:      oklch(30% 0.035 40);   /* placa (superficie de acento, tono cálido rojizo) */
  --color-line:      oklch(92% 0.02 70 / .13);
  --color-line-2:    oklch(92% 0.02 70 / .22);
  /* Texto sobre fondos de acento (rojo/brasa sólido). --color-paper es oscuro (fondo de página),
     por eso hace falta un blanco real dedicado para no repetir el bug de contraste bajo. */
  --color-on-brasa:  oklch(98% 0 0);

  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-body:    'Barlow', system-ui, sans-serif;
  --font-brush:   'Pacifico', cursive;

  --space-xs: .5rem;  --space-sm: .75rem; --space-md: 1rem;
  --space-lg: 1.5rem; --space-xl: 2.5rem; --space-2xl: 4rem; --space-3xl: 6rem;

  --text-display: clamp(2.8rem, 11vw, 5.6rem);
  --text-2xl: clamp(2rem, 6.5vw, 3.2rem);
  --text-xl: 1.5rem;

  --radius: 6px;
  --shadow-hard: 4px 4px 0 var(--color-rojo-2);
  --rule: 1px solid var(--color-line);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}

/* ====== BASE ====== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; }
body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* Bloqueo real del scroll de fondo (móvil incluido) cuando hay modal/drawer. */
body.no-scroll { position: fixed; inset: 0; width: 100%; overflow: hidden; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--color-brasa); color: var(--color-paper); }

.wrap { width: 100%; max-width: 1080px; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.display { font-family: var(--font-display); font-weight: 400; line-height: 1; letter-spacing: .01em; text-transform: uppercase; overflow-wrap: anywhere; }
/* Acento tipo "Prime": brochazo rojo, minúsculas, quiebra el bloque de Anton. */
.brush { font-family: var(--font-brush); color: var(--color-rojo); text-transform: none; font-weight: 400; letter-spacing: 0; }
.eyebrow {
  font-family: var(--font-body);
  font-size: .72rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--color-brasa-2); font-weight: 700;
}
.eyebrow--star { display: inline-flex; align-items: center; gap: .6rem; }
.eyebrow--star::before, .eyebrow--star::after { content: '★'; color: var(--color-rojo); font-size: .8em; letter-spacing: 0; }
.muted { color: var(--color-ink-muted); }

/* Divisor de marca: estrellas rojas (placa "TACOS Y BURROS" del logo). */
.star-rule { display: flex; align-items: center; justify-content: center; gap: .8rem; color: var(--color-rojo); margin-block: var(--space-lg); }
.star-rule span { font-size: .7rem; }
.star-rule::before, .star-rule::after { content: ''; height: 1px; width: min(28vw, 120px); background: linear-gradient(90deg, transparent, var(--color-brasa)); }
.star-rule::after { background: linear-gradient(90deg, var(--color-brasa), transparent); }

/* ====== NAV · N6 newspaper masthead ====== */
.masthead {
  position: sticky; top: 0; z-index: 50;
  background: oklch(14% 0.012 60 / .9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-line);
}
.masthead__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-sm); padding-block: .5rem;
}
.masthead__issue { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--color-ink-muted); text-decoration: none; }
a.masthead__issue:hover { color: var(--color-brasa); }
.masthead__right { display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; text-align: right; }
.masthead__brand {
  display: inline-flex; align-items: center;
  font-family: var(--font-display); font-size: 1.45rem; letter-spacing: -.01em;
  white-space: nowrap; color: var(--color-ink);
}
.masthead__brand b { color: var(--color-brasa); font-weight: 400; }
.masthead__logo { height: 64px; width: auto; display: block; }
.masthead__rule { height: 0; border-top: 1px solid var(--color-line-2); }
.masthead__volver { color: var(--color-ink-muted); font-weight: 600; font-size: .9rem; }
.masthead__volver:hover { color: var(--color-brasa); }
@media (max-width: 640px) {
  .masthead__logo { height: 48px; }
  .masthead__issue { font-size: .6rem; }
}

/* ====== HERO ====== */
.hero { position: relative; overflow: hidden; border-bottom: 2px solid var(--color-brasa); }
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; opacity: .35; z-index: 0;
  transform: scale(1.18); transform-origin: center 40%;
}
.hero::after { content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, oklch(14% 0.012 60 / .35), oklch(14% 0.012 60 / .94)); }
/* Grano sutil de piedra/papel (textura del logo), muy tenue para no dañar legibilidad. */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__inner { position: relative; z-index: 2; padding-block: clamp(3.5rem, 14vh, 8rem); }
.hero__eyebrow { margin-bottom: var(--space-md); }
.hero__title { font-size: var(--text-display); max-width: 15ch; }
.hero__title .brush { display: block; font-size: .8em; line-height: 1.05; margin-top: .12em; }
.hero__lede {
  margin-top: var(--space-lg); max-width: 46ch; font-size: 1.05rem; font-weight: 500;
  color: var(--color-ink); border-left: 4px solid var(--color-rojo); padding-left: var(--space-md);
}
.hero__cta { margin-top: var(--space-xl); display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; }
/* horario anclado abajo en el hero */
.hero__horario {
  flex: none; margin-top: var(--space-xl); padding-top: var(--space-md);
  border-top: 1px solid var(--color-line); color: var(--color-ink-muted);
  font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
}

/* ====== Botones / links ====== */
/* Botón-bloque roadhouse: esquinas duras, MAY, sombra dura offset (extrudado 3D del logo).
   .btn-brasa = naranja (estructura/secundaria) · .btn-rojo = rojo (acción caliente/primaria). */
.btn-brasa, .btn-rojo {
  color: var(--color-on-brasa);
  font-family: var(--font-body); font-weight: 800; font-size: 1rem;
  text-transform: uppercase; letter-spacing: .05em;
  border: none; border-radius: var(--radius);
  padding: .9rem 1.7rem; min-height: 48px;
  display: inline-flex; align-items: center; gap: .5rem;
  transition: transform .12s var(--ease-out), box-shadow .12s var(--ease-out), background .2s var(--ease-out);
}
/* Primario: rojo sólido + sombra dura. Secundario (.btn-brasa): rojo outline (jerarquía). */
.btn-rojo  { background: var(--color-rojo); box-shadow: var(--shadow-hard); }
.btn-rojo:hover  { background: oklch(56% 0.21 27); transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--color-rojo-2); }
.btn-rojo:active { transform: translate(4px, 4px); box-shadow: 0 0 0 transparent; }
.btn-brasa {
  background: transparent; color: var(--color-brasa-2);
  border: 2px solid var(--color-rojo); box-shadow: none;
}
.btn-brasa:hover { background: var(--color-rojo); color: var(--color-on-brasa); }
.btn-brasa:active { transform: translateY(1px); }
.btn-brasa:focus-visible, .btn-rojo:focus-visible { outline: 3px solid var(--color-brasa-2); outline-offset: 3px; }

.link-cta {
  background: none; border: none; color: var(--color-ink);
  font-family: var(--font-body); font-weight: 600; font-size: 1rem;
  display: inline-flex; align-items: center; gap: .5rem; padding: .4rem 0; min-height: 44px;
  border-bottom: 1px solid var(--color-brasa); border-radius: 0; align-self: flex-start;
  transition: gap .2s var(--ease-out), color .2s var(--ease-out);
}
.link-cta:hover { color: var(--color-brasa-2); gap: .85rem; }
.link-cta span { color: var(--color-brasa); }
.link-cta:focus-visible { outline: 2px solid var(--color-brasa-2); outline-offset: 4px; }

/* ====== SECTION HEAD (landing) ====== */
.sec-head { padding-block: var(--space-xl) var(--space-md); }
.sec-head h2 { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.02; letter-spacing: .01em; text-transform: uppercase; }
.sec-head p { margin-top: .5rem; color: var(--color-ink-muted); max-width: 50ch; }

/* ====== MODAL PEDIDO · flujo app a pantalla completa ====== */
.pedido {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column;
  background: var(--color-paper);
  transform: translateY(100%); transition: transform .35s var(--ease-in-out);
  visibility: hidden;
}
.pedido.is-open { transform: translateY(0); visibility: visible; }

/* top fijo: cerrar + barra de pasos */
.pedido__top {
  flex: none; padding: calc(env(safe-area-inset-top) + .6rem) var(--space-md) .5rem;
  border-bottom: 1px solid var(--color-line); background: var(--color-paper-2);
  display: grid; grid-template-columns: 1fr; gap: .5rem;
}
.pedido__cerrar {
  justify-self: end; width: 38px; height: 38px; border-radius: 50%;
  background: var(--color-paper-3); color: var(--color-ink); border: none; font-size: 1.4rem; line-height: 1;
}
.pedido__cerrar:hover { color: var(--color-brasa); }

/* centro scrolleable */
.pedido__cuerpo {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: var(--space-md) var(--space-md) var(--space-lg);
  scrollbar-width: thin; scrollbar-color: var(--color-brasa) transparent;
}
.pedido__cuerpo::-webkit-scrollbar { width: 8px; }
.pedido__cuerpo::-webkit-scrollbar-track { background: transparent; }
.pedido__cuerpo::-webkit-scrollbar-thumb { background: var(--color-brasa); border-radius: 40px; }
.pedido__cuerpo::-webkit-scrollbar-thumb:hover { background: var(--color-brasa-2); }
.pedido__cuerpo > .wrap, .pedido__cuerpo .paso { max-width: 680px; margin-inline: auto; }
.paso__head { margin-bottom: var(--space-md); }
.paso__head h2 { font-family: var(--font-display); font-size: clamp(1.6rem, 6vw, 2.2rem); line-height: 1.02; letter-spacing: .01em; text-transform: uppercase; }
.paso__head p { margin-top: .35rem; color: var(--color-ink-muted); font-size: .9rem; }

/* bottom fijo: acciones contextuales */
.pedido__bottom {
  flex: none; display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md) calc(env(safe-area-inset-bottom) + var(--space-sm));
  border-top: 1px solid var(--color-line); background: var(--color-paper-2);
}
.bnav {
  border: none; border-radius: 40px; font-family: var(--font-body); font-weight: 600;
  font-size: .95rem; min-height: 48px; padding: 0 1.2rem; display: inline-flex; align-items: center; gap: .4rem;
  transition: background .2s var(--ease-out), transform .12s var(--ease-out), opacity .2s;
}
.bnav:active { transform: scale(.97); }
.bnav__spacer { flex: none; }
.bnav--ghost { background: transparent; color: var(--color-ink-muted); border: 1px solid var(--color-line-2); padding: 0 1rem; }
.bnav--ghost:hover { color: var(--color-ink); border-color: var(--color-brasa); }
.bnav--sec { background: transparent; color: var(--color-brasa-2); border: 1px solid var(--color-brasa); }
.bnav--sec:hover { background: oklch(64% 0.17 47 / .12); }
.bnav--primary { background: var(--color-brasa); color: var(--color-on-brasa); margin-left: auto; }
.bnav--primary:hover { background: var(--color-brasa-2); }
.bnav--primary[disabled] { opacity: .4; pointer-events: none; }
.bnav--wpp { flex: 1; justify-content: center; }
.bnav:focus-visible { outline: 3px solid var(--color-brasa-2); outline-offset: 2px; }
@media (max-width: 380px) {
  .bnav { font-size: .88rem; padding: 0 .9rem; }
  .bnav--sec { display: none; } /* en pantallas muy chicas, el atajo a pagar se omite para no saturar */
}

/* ====== Desktop: el modal full-screen se vuelve un panel centrado tipo diálogo ====== */
@media (min-width: 760px) {
  /* el contenedor es un scrim; el panel (las 3 zonas) se centra dentro */
  .pedido {
    inset: 0; padding: var(--space-xl);
    background: oklch(8% 0.01 60 / .62); backdrop-filter: blur(4px);
    align-items: center; justify-content: center;
    transform: none; transition: opacity .25s var(--ease-out), visibility .25s;
    opacity: 0;
  }
  .pedido.is-open { transform: none; opacity: 1; }

  /* las tres zonas comparten ancho de panel y se ven como una sola tarjeta */
  .pedido__top, .pedido__cuerpo, .pedido__bottom {
    width: 100%; max-width: 720px; margin-inline: auto;
    border-inline: 1px solid var(--color-line-2);
    background: var(--color-paper-2);
    animation: pop .28s var(--ease-out);
  }
  .pedido__top {
    border-top: 1px solid var(--color-line-2);
    border-radius: var(--radius) var(--radius) 0 0;
    padding: var(--space-md) var(--space-lg) var(--space-sm);
  }
  .pedido__cuerpo {
    flex: 0 1 auto; max-height: min(68vh, 560px);
    padding: var(--space-lg) var(--space-xl);
  }
  .pedido__cuerpo .paso { max-width: none; }
  .pedido__bottom {
    border-bottom: 1px solid var(--color-line-2);
    border-radius: 0 0 var(--radius) var(--radius);
    padding: var(--space-md) var(--space-lg);
  }

  /* pasos compactos alineados a la izquierda, no estirados al ancho */
  .pasos { gap: var(--space-md); justify-content: flex-start; }
  .pasos__item { flex: 0 0 auto; }

  /* carta a 3 columnas dentro del panel */
  .pedido .carta { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); padding-top: 0; }
  .pedido .plato { aspect-ratio: 4 / 5; }

  /* bottom: botones a tamaño natural, agrupados (no estirados) */
  .pedido__bottom .bnav--wpp { flex: 0 1 auto; min-width: 220px; }
}

/* ====== CARTA · 3 fotos-platillo (menú visual; precios viven en el modal) ====== */
.carta {
  display: grid; grid-template-columns: 1fr; gap: var(--space-sm);
  padding-top: var(--space-xs);
}
.plato {
  position: relative; display: block; width: 100%; padding: 0;
  aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden;
  background: var(--color-paper-3); border: 1px solid var(--color-line);
  cursor: pointer; text-align: left;
  transition: transform .25s var(--ease-out), border-color .25s var(--ease-out);
}
.plato:hover { transform: translateY(-3px); border-color: var(--color-brasa); }
.plato:focus-visible { outline: 3px solid var(--color-brasa-2); outline-offset: 3px; }
.plato__img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease-out); }
.plato:hover .plato__img { transform: scale(1.04); }
.plato.sin-img::before {
  content: 'Foto en camino'; position: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center; color: var(--color-ink-muted); font-size: .85rem; letter-spacing: .1em;
}
.plato::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, oklch(14% 0.012 60 / 0) 35%, oklch(10% 0.01 60 / .9) 100%);
}
.plato__info { position: absolute; left: 1rem; right: 1rem; bottom: .9rem; z-index: 2; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.plato__nombre { font-family: var(--font-display); font-size: clamp(1.5rem, 5.5vw, 2.2rem); line-height: 1; color: var(--color-ink); letter-spacing: .01em; text-shadow: 0 2px 14px oklch(10% 0.01 60 / .9); }
.plato__rango { font-size: .85rem; letter-spacing: .04em; color: var(--color-brasa-2); white-space: nowrap; font-weight: 600; text-shadow: 0 1px 8px oklch(10% 0.01 60 / .9); }
.plato__badge {
  position: absolute; top: .7rem; left: .7rem; z-index: 2;
  background: var(--color-rojo); color: var(--color-ink);
  font-family: var(--font-body); font-weight: 800; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
  padding: .28rem .55rem; border-radius: var(--radius); box-shadow: 2px 2px 0 var(--color-rojo-2);
}

@media (min-width: 760px) {
  .carta { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
  .plato { aspect-ratio: 3 / 4; }
  .plato__info { flex-direction: column; align-items: flex-start; gap: .25rem; }
}

/* ====== Indicador de pasos (en el top fijo del modal pedido) ====== */
.pasos { display: flex; gap: .4rem; list-style: none; }
.pasos__item {
  display: flex; align-items: center; gap: .4rem; flex: 1; min-width: 0;
  font-size: .78rem; letter-spacing: .02em; color: var(--color-ink-muted);
  cursor: pointer; white-space: nowrap; overflow: hidden;
  transition: color .2s var(--ease-out);
}
.pasos__n {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px;
  border-radius: 50%; border: 1px solid var(--color-line-2);
  font-family: var(--font-display); font-size: .9rem; color: var(--color-ink-muted);
  transition: all .2s var(--ease-out);
}
.pasos__item.is-active { color: var(--color-ink); }
.pasos__item.is-active .pasos__n { background: var(--color-brasa); border-color: var(--color-brasa); color: var(--color-on-brasa); }
.pasos__item.is-done { color: var(--color-brasa-2); }
.pasos__item.is-done .pasos__n { border-color: var(--color-brasa); color: var(--color-brasa-2); }
/* En móvil: el paso activo muestra su label (círculo + texto);
   los inactivos centran solo el número en su espacio. */
@media (max-width: 560px) {
  .pasos__item { justify-content: center; }      /* inactivos: número centrado */
  .pasos__txt { display: none; }
  .pasos__item.is-active { flex: 1 1 auto; justify-content: flex-start; }
  .pasos__item.is-active .pasos__txt { display: inline; }
}

/* ====== Bebidas / extras (items simples) ====== */
.extras-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-sm); }
@media (min-width: 600px) { .extras-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); } }
.xitem {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding: var(--space-md); border: 1px solid var(--color-line); border-radius: var(--radius);
  background: var(--color-paper-2);
}
.xitem__nombre { font-family: var(--font-display); font-size: 1.4rem; line-height: 1; letter-spacing: .01em; }
.xitem__desc { color: var(--color-ink-muted); font-size: .85rem; margin-top: .25rem; }
.xitem__accion { display: flex; align-items: center; gap: var(--space-md); flex: none; }
.xitem__precio { font-family: var(--font-display); color: var(--color-brasa); font-size: 1.15rem; }
.xitem__ctrl { display: flex; align-items: center; }
.xitem__add {
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: var(--color-brasa); color: var(--color-on-brasa); font-size: 1.4rem; line-height: 1;
  transition: background .2s var(--ease-out), transform .12s var(--ease-out);
}
.xitem__add:hover { background: var(--color-brasa-2); }
.xitem__add:active { transform: scale(.92); }
.xitem__add--ok { background: var(--color-ink); color: var(--color-paper); }
.xitem__add:focus-visible { outline: 3px solid var(--color-brasa-2); outline-offset: 2px; }

/* ====== STEPPER ====== */
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--color-line-2); border-radius: 40px; overflow: hidden; }
.stepper__btn {
  background: var(--color-paper-2); color: var(--color-ink); border: none;
  width: 44px; height: 44px; font-size: 1.3rem; line-height: 1;
  transition: background .15s var(--ease-out);
}
.stepper__btn:hover { background: var(--color-paper-3); color: var(--color-brasa); }
.stepper input { width: 56px; height: 44px; text-align: center; background: transparent; color: var(--color-ink); border: none; font-family: var(--font-body); font-size: 1.05rem; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.stepper--sm .stepper__btn { width: 36px; height: 36px; font-size: 1.1rem; }
.stepper--sm .stepper__n { min-width: 32px; text-align: center; font-weight: 600; }

/* ====== MODAL ====== */
.modal {
  position: fixed; inset: 0; z-index: 100; display: none;
  align-items: flex-end; justify-content: center;
  background: oklch(8% 0.01 60 / .65); backdrop-filter: blur(3px);
  padding: 0;
}
.modal.is-open { display: flex; }
.modal__card {
  background: var(--color-paper-2); width: 100%; max-width: 480px;
  border-radius: var(--radius) var(--radius) 0 0; border: 1px solid var(--color-line-2);
  padding: var(--space-lg) var(--space-lg) calc(var(--space-lg) + env(safe-area-inset-bottom));
  position: relative; max-height: 88dvh; overflow-y: auto;
  animation: sheet-up .32s var(--ease-out); -webkit-overflow-scrolling: touch;
}
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.modal__close {
  position: absolute; top: .7rem; right: .8rem; width: 36px; height: 36px;
  background: var(--color-paper-3); color: var(--color-ink); border: none; border-radius: 50%; font-size: 1.4rem; line-height: 1;
}
.modal__close:hover { color: var(--color-brasa); }
.modal__eyebrow { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--color-brasa-2); }
.modal__title { font-family: var(--font-display); font-size: 1.7rem; line-height: 1.05; margin: .15rem 0 .3rem; letter-spacing: .01em; }
.modal__desc { color: var(--color-ink-muted); margin-bottom: var(--space-md); font-size: .88rem; }
.modal__vdesc { color: var(--color-ink-muted); font-size: .82rem; margin: -.2rem 0 var(--space-sm); font-style: italic; }
.modal__add { width: 100%; justify-content: center; margin-top: var(--space-sm); font-size: 1rem; }

/* Sheet de confirmación "¡Pedido enviado!" */
.modal__card--exito { text-align: center; }
.modal__exito {
  width: 72px; height: 72px; margin: .2rem auto var(--space-sm); border-radius: 50%;
  display: grid; place-items: center; font-size: 2.4rem; line-height: 1;
  background: var(--color-rojo); color: var(--color-ink); box-shadow: var(--shadow-hard);
}
.modal__card--exito .modal__title { text-align: center; }
.modal__card--exito .modal__desc { margin-inline: auto; max-width: 34ch; }
.modal__reenviar { justify-content: center; margin: 0 auto var(--space-md); }
.exito__acciones { display: flex; gap: var(--space-sm); }
.exito__acciones .btn-brasa, .exito__acciones .btn-rojo { flex: 1; justify-content: center; }

.campo { display: block; margin-bottom: var(--space-sm); }
.campo > span { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-ink-muted); margin-bottom: .3rem; }
.campo > span small { text-transform: none; letter-spacing: 0; }
.campo select, .campo input[type="text"] {
  width: 100%; background: var(--color-paper); color: var(--color-ink);
  border: 1px solid var(--color-line-2); border-radius: 10px; padding: .65rem .8rem;
  font-family: var(--font-body); font-size: 1rem; min-height: 44px;
}
.campo select:focus, .campo input:focus { outline: none; border-color: var(--color-brasa); }
.campo input.shake { animation: shake .4s; border-color: var(--color-rojo); }
.campo--cantidad { display: flex; flex-direction: column; }

@media (min-width: 540px) {
  .modal { align-items: center; }
  .modal__card { border-radius: var(--radius); animation: pop .28s var(--ease-out); }
  @keyframes pop { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
}

/* ====== Resumen / desglose (Paso 4) — comparte clases ditem/seg/etc. ====== */
.drawer__vacio { color: var(--color-ink-muted); text-align: center; padding-block: var(--space-2xl); line-height: 1.8; }

.ditem { display: flex; gap: var(--space-md); justify-content: space-between; padding: var(--space-md) 0; border-bottom: 1px solid var(--color-line); }
.ditem__nombre { font-weight: 500; }
.ditem__nota { font-size: .82rem; color: var(--color-ink-muted); font-style: italic; margin-top: .15rem; }
.ditem__sub { font-family: var(--font-display); color: var(--color-brasa); margin-top: .35rem; }
.ditem__ctrl { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.ditem__quitar { background: none; border: none; color: var(--color-ink-muted); font-size: .8rem; text-decoration: underline; }
.ditem__quitar:hover { color: var(--color-rojo); }
.ditem--regalo { opacity: .9; }
.ditem__regalo { align-self: center; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-brasa-2); border: 1px solid var(--color-brasa); border-radius: 40px; padding: .25rem .7rem; height: fit-content; }

.promo-nudge { font-size: .88rem; color: var(--color-ink-muted); background: var(--color-paper); border: 1px dashed var(--color-line-2); border-radius: 10px; padding: .7rem .9rem; margin-bottom: var(--space-md); }
.promo-nudge b { color: var(--color-brasa-2); }
.promo-nudge--ok { border-color: var(--color-brasa); color: var(--color-ink); }

.drawer__entrega { margin-bottom: var(--space-md); }
.seg { display: flex; gap: .5rem; }
.seg__op { flex: 1; display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .6rem; border: 1px solid var(--color-line-2); border-radius: 40px; font-size: .9rem; cursor: pointer; transition: border-color .2s; }
.seg__op:has(input:checked) { border-color: var(--color-brasa); color: var(--color-brasa-2); }
.seg__op input { accent-color: var(--color-brasa); }
.d-direccion { width: 100%; margin-top: .6rem; background: var(--color-paper); color: var(--color-ink); border: 1px solid var(--color-line-2); border-radius: 10px; padding: .7rem .9rem; min-height: 44px; font-family: var(--font-body); }
.d-direccion:focus { outline: none; border-color: var(--color-brasa); }
.d-direccion.shake { animation: shake .4s; border-color: var(--color-rojo); }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }

.drawer__total { display: flex; justify-content: space-between; align-items: baseline; margin: var(--space-md) 0; }
.drawer__total b { font-family: var(--font-display); font-size: 1.8rem; color: var(--color-brasa); }
.btn-enviar { width: 100%; justify-content: center; }

/* Opción "hacerlo doble" (checkbox) en el modal de variante. */
.campo--check { display: flex; align-items: center; gap: .6rem; cursor: pointer; }
.campo--check input { width: 20px; height: 20px; accent-color: var(--color-rojo); flex: none; margin: 0; }
.campo--check > span { margin: 0; text-transform: none; letter-spacing: 0; font-size: .95rem; color: var(--color-ink); }

/* ====== MENÚ (botón que abre la imagen del menú completo) ====== */
.menu-adultos { border-top: 1px solid var(--color-line); padding-bottom: var(--space-3xl); text-align: center; }
.menu-adultos .sec-head { text-align: left; max-width: 46ch; margin-inline: auto; }

/* Lightbox del menú: overlay full-screen con la imagen, scrolleable en móvil. */
.menu-lightbox {
  position: fixed; inset: 0; z-index: 120; display: none;
  background: oklch(6% 0.01 40 / .95); padding: var(--space-lg);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.menu-lightbox.is-open { display: block; }
.menu-lightbox__img {
  display: block; margin: var(--space-xl) auto; width: 100%; max-width: min(900px, 100%);
  height: auto; border-radius: var(--radius); border: 2px solid var(--color-brasa);
}
.menu-lightbox__close {
  position: fixed; top: calc(env(safe-area-inset-top) + .8rem); right: .9rem; z-index: 121;
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: var(--color-rojo); color: var(--color-ink); font-size: 1.6rem; line-height: 1;
}
.menu-lightbox__close:hover { background: oklch(56% 0.21 27); }

/* ====== EVENTOS (página independiente) ====== */
.eventos { padding-block: var(--space-2xl) var(--space-3xl); min-height: 70svh; }

/* ====== CATERING (grid de paquetes, reusado por eventos.html) ====== */
.catering { border-top: 1px solid var(--color-line); padding-bottom: var(--space-3xl); }
.catering-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
.paquete { border: 1px solid var(--color-line); border-radius: var(--radius); padding: var(--space-lg); background: var(--color-paper-2); }
.paquete__personas { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-brasa-2); }
.paquete__precio { font-family: var(--font-display); font-size: 2rem; color: var(--color-ink); margin: .3rem 0 var(--space-md); }
.paquete__precio small { font-family: var(--font-body); font-size: .85rem; color: var(--color-ink-muted); }
.paquete__incluye { list-style: none; margin-bottom: var(--space-md); }
.paquete__incluye li { padding: .45rem 0; border-bottom: 1px solid var(--color-line); font-size: .92rem; color: var(--color-ink); padding-left: 1.2rem; position: relative; }
.paquete__incluye li::before { content: '·'; position: absolute; left: .3rem; color: var(--color-brasa); font-weight: 700; }
.paquete__incluye li:last-child { border-bottom: none; }
.paquete .btn-brasa { width: 100%; justify-content: center; }
@media (min-width: 760px) { .catering-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); } }

/* ====== FOOTER · Ft1 mast-headed ====== */
.footer { border-top: 2px solid var(--color-brasa); background: var(--color-paper); padding-block: var(--space-2xl) var(--space-xl); }
.footer__logo { height: 72px; width: auto; }
.footer__meta { margin-top: var(--space-md); display: grid; gap: .5rem; color: var(--color-ink-muted); font-size: .95rem; }
.footer__meta a { color: var(--color-ink); text-decoration: none; }
.footer__meta a:hover { color: var(--color-brasa); }
.footer__brand { font-family: var(--font-display); font-size: clamp(2.2rem, 9vw, 3.5rem); line-height: 1; letter-spacing: -.02em; }
.footer__brand b { color: var(--color-brasa); font-weight: 400; }
.footer__catering { justify-self: start; margin-top: .3rem; background: none; border: none; color: var(--color-rojo); font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .9rem; padding: .3rem 0; }
.footer__catering:hover { color: var(--color-brasa); }
.footer__bottom { margin-top: var(--space-xl); padding-top: var(--space-md); border-top: 1px solid var(--color-line); font-size: .8rem; color: var(--color-ink-muted); display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }

/* ====== Barra inferior fija · CTA persistente ====== */
.cta-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  padding: var(--space-sm) var(--space-md) calc(env(safe-area-inset-bottom) + var(--space-sm));
  background: oklch(14% 0.012 60 / .92); backdrop-filter: blur(10px);
  border-top: 1px solid var(--color-line);
  transform: translateY(110%); transition: transform .3s var(--ease-out);
}
.cta-bar.is-visible { transform: translateY(0); }
.cta-bar.is-hidden { transform: translateY(110%); }
.cta-bar__btn { width: 100%; justify-content: center; font-size: 1.05rem; min-height: 52px; }
@media (min-width: 760px) {
  .cta-bar { display: none; left: auto; right: var(--space-lg); bottom: 5em; padding: 0; background: none; backdrop-filter: none; border: none; }
  .cta-bar__btn { width: auto; box-shadow: 0 10px 30px oklch(64% 0.17 47 / .35); }
}

/* ====== Reduced motion ====== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .hero__video { display: none; }
}