/* ===========================================================================
   GO WINGS GO — hoja de estilos del tema
   ---------------------------------------------------------------------------
   Solo lo que CAMBIA respecto del tema base: el layout carga primero la hoja
   del sistema y después esta, que pisa lo que necesita. No se importa nada.

   LA MARCA
   --------
   Naranja 165 C (#E84B20) · Café 7595 C (#531D11) · crema de papel (#FFF4E8).
   Los tres entran desde el panel (Configuración › Apariencia) y de ellos sale
   todo lo demás con color-mix(): ningún color de marca está escrito aquí.

       Color principal   #E84B20
       Color de acento   #531D11
       Color de fondo    #FFF4E8
       Tipografía        Montserrat (títulos y textos), origen Google

   LA TIPOGRAFÍA DE LA MARCA: «SPEEDAY»
   ------------------------------------
   El logo usa una letra llamada Speeday. Todavía no tenemos el archivo, así que
   mientras tanto los títulos salen en Montserrat 800 inclinada y en mayúsculas,
   que es lo más parecido que el panel ofrece.

   Cuando llegue el archivo (necesita licencia para web):
     1. Ponerlo en  themes/go-wings-go/fonts/speeday.woff2
     2. Quitar los comentarios del @font-face de abajo.
     3. Ajustar --marca-peso y --marca-estilo a lo que ya traiga la letra (si
        ya viene en negritas e inclinada, 400 y normal: así el navegador no la
        engorda ni la inclina otra vez).
   Nada más: los títulos, precios y botones ya piden 'Speeday' primero.

   Si no existe, el navegador salta a la siguiente de la lista sin pedir nada.
   =========================================================================== */

/*
@font-face {
    font-family: 'Speeday';
    src: url('../fonts/speeday.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
*/

:root {
    /* Todo derivado de los tres colores del panel. */
    --color-texto:        var(--color-secundario);
    --color-texto-suave:  color-mix(in srgb, var(--color-secundario) 74%, var(--color-fondo));
    --color-superficie:   #fff;
    --color-borde:        color-mix(in srgb, var(--color-secundario) 14%, var(--color-fondo));

    /* El naranja de marca (3.9:1 sobre blanco) solo pasa el contraste en letra
       GRANDE. Para texto chico se usa este, más cerrado. */
    --naranja-texto:      color-mix(in srgb, var(--color-primario) 68%, var(--color-secundario));

    /* La letra «de velocidad». Ver la nota de Speeday arriba. */
    --marca-fuente: 'Speeday', var(--fuente-titulos);
    --marca-peso:   800;
    --marca-estilo: italic;

    --corte:  polygon(18px 0, 100% 0, calc(100% - 18px) 100%, 0 100%);  /* la inclinación del logo */
    --rebote: cubic-bezier(.2, .9, .3, 1.25);
    --suave:  cubic-bezier(.22, .8, .3, 1);
}

/* Solo para lector de pantalla: el nombre del restaurante, que el logo (una
   imagen) no dice en voz alta. */
.solo-lector {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* La letra de la marca: inclinada, pesada y en mayúsculas, como el logo. */
.categoria__titulo, .platillo__nombre, .chip__nombre, .chip__precio, .platillo__precio,
.modal__titulo, .grupo__titulo, .carrito__titulo, .linea__nombre, .enviado__titulo,
.sucursal-op__nombre, .boton--primario, .bolsa__boton, .modal__precio {
    font-family: var(--marca-fuente);
    font-weight: var(--marca-peso);
    font-style: var(--marca-estilo);
    text-transform: uppercase;
}

/* Lo que va POR ENCIMA del fondo de partículas de toda la página. */
.cabecera, .contenido, .pie, .decoracion { position: relative; z-index: 1; }

/* ===========================================================================
   PARTÍCULAS — el fondo con vida
   ---------------------------------------------------------------------------
   Dibujitos del papel de la charola (chiles, flamas, rayos, vasitos) y brasas
   que suben flotando. Son <span> vacíos con aria-hidden (partials/particulas):
   no reciben toques, y solo se mueven con transform y opacity.
   =========================================================================== */
.particulas { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; --alto: 260px; }
.particulas--pagina { position: fixed; --alto: 100vh; }

.part {
    position: absolute; left: var(--x); bottom: -50px;
    width: var(--s); height: var(--s);
    opacity: 0;
    will-change: transform, opacity;
}
.part::before { content: ""; position: absolute; inset: 0; background: center / contain no-repeat; }
.part--chile::before  { background-image: url('../img/particulas/chile.svg'); }
.part--flama::before  { background-image: url('../img/particulas/flama.svg'); }
.part--rayo::before   { background-image: url('../img/particulas/rayo.svg'); }
.part--vasito::before { background-image: url('../img/particulas/vasito.svg'); }
.part--chispa::before { background-image: url('../img/particulas/chispa.svg'); }
.part--brasa::before  {
    border-radius: 50%;
    background: radial-gradient(circle, var(--color-primario) 0 42%, transparent 72%);
}

/* ===========================================================================
   CABECERA — logo arriba, atajos en un solo renglón
   ---------------------------------------------------------------------------
   Celular: el logo centrado y, debajo, la sucursal + WhatsApp + Compartir
   centrados en un renglón. Desde 760 px: el logo a la izquierda y los atajos
   a la derecha, en el mismo renglón.
   =========================================================================== */
.cabecera {
    display: block;
    overflow: hidden;
    isolation: isolate;
    padding: 14px var(--espacio) 16px;
    border: 0;
    background: var(--color-fondo);
}

/* El papel de la charola, que se desliza despacito. */
.cabecera::before {
    content: ""; position: absolute; inset: -240px; z-index: -1;
    background: url('../img/papel-claro.svg') 0 0 / 240px 240px;
}

.cabecera__caja { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; }
.cabecera__marca { display: flex; justify-content: center; min-width: 0; }
.cabecera__enlace { display: block; border-radius: var(--radio-chico, 12px); }

.cabecera__logo {
    width: min(76vw, 310px);
    height: auto;
    aspect-ratio: 754 / 207;
    border-radius: 0;
    object-fit: contain;
    /* Un halo del color del fondo: el logo se lee limpio sobre los dibujitos. */
    filter: drop-shadow(0 0 5px var(--color-fondo)) drop-shadow(0 0 11px var(--color-fondo));
    transform-origin: 50% 60%;
}

.cabecera__acciones {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: nowrap; gap: 8px;
    margin-top: 10px;
}

.cabecera__sucursal {
    position: relative;
    display: inline-flex; align-items: center; gap: 8px;
    flex: 0 1 auto; min-width: 0; min-height: 44px; margin: 0;
    padding: 0 14px 0 12px;
    background: var(--color-superficie);
    border: 2px solid var(--color-borde);
    border-radius: 999px;
    color: var(--color-texto);
    font: inherit; font-size: .84rem; font-weight: 600; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    -webkit-appearance: none; appearance: none;
}
.cabecera__sucursal--cambiar { cursor: pointer; transition: border-color .16s ease, transform .16s ease; }
.cabecera__sucursal--cambiar:hover { border-color: var(--color-primario); }
.cabecera__sucursal--cambiar:active { transform: scale(.96); }

.cabecera .punto { position: relative; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: #2f9e5b; }
.cabecera .punto::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #2f9e5b; opacity: 0; }

.cabecera .accion {
    position: relative; flex: 0 0 auto;
    width: 44px; min-width: 44px; height: 44px; padding: 0;
    border: 2px solid var(--color-borde);
    border-radius: 50%;
    background: var(--color-superficie);
    color: var(--color-secundario);
    transition: transform .16s ease, border-color .16s ease;
}
.cabecera .accion:hover { color: var(--color-secundario); border-color: var(--color-primario); transform: translateY(-2px); }
.cabecera .accion:active { transform: scale(.92); }
.cabecera .accion::after {   /* el aro que late alrededor de WhatsApp */
    content: ""; position: absolute; inset: -2px; border-radius: inherit;
    border: 2px solid var(--color-primario); opacity: 0; pointer-events: none;
}
.cabecera .accion__texto { display: none; }

@media (min-width: 760px) {
    .cabecera { padding: 18px var(--espacio); }
    .cabecera__caja { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
    .cabecera__marca { justify-content: flex-start; }
    .cabecera__logo { width: 400px; transform-origin: 30% 60%; }
    .cabecera__acciones { justify-content: flex-end; margin-top: 0; }
    .cabecera .accion { width: auto; padding: 0 18px; gap: 8px; border-radius: 999px; }
    .cabecera .accion__texto { display: inline; font-size: .88rem; font-weight: 600; }
}

/* ===========================================================================
   BANNERS — justo después del logo (2:1, 1200 × 600 px)
   =========================================================================== */
.contenido { max-width: 1100px; padding: 0 var(--espacio) 28px; }
.contenido > .cerrado:first-child { margin-top: 16px; }

.promos { margin: 16px calc(var(--espacio) * -1) 20px; }
.promo  { position: relative; border-radius: var(--radio); }
.promo::after {   /* un brillo que cruza el banner, de vez en cuando */
    content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 28%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
    transform: translateX(-120%) skewX(-14deg); opacity: 0; pointer-events: none;
}
.promos__punto--activo { background: var(--color-primario); }

/* ===========================================================================
   PESTAÑAS — los dos tamaños, grandes y con su precio
   =========================================================================== */
.chips {
    position: sticky; top: 0; z-index: 30;
    display: flex; justify-content: center; gap: 8px;
    /* Dentro de <main> (como en el sistema): se queda pegada solo mientras dura
       la carta. Se sale del margen para pintar el naranja de lado a lado. */
    margin: 0 calc(50% - 50vw);
    padding: 10px calc(50vw - 50% + var(--espacio));
    background: var(--color-primario);
    box-shadow: 0 8px 16px -10px rgba(83, 29, 17, .7);
}
.chips::after {   /* el destello que cruza la franja */
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 22%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
    transform: translateX(-130%) skewX(-18deg); opacity: 0; pointer-events: none;
}

.chip {
    position: relative;
    flex: 1 1 0; max-width: 270px; min-height: 56px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: 6px 14px;
    border: 0; border-radius: 0;
    background: var(--color-secundario);
    color: #fff;
    clip-path: var(--corte);
    text-align: center;
    white-space: nowrap;
    transition: background .16s ease, color .16s ease, transform .16s ease;
}
.chip:hover  { transform: translateY(-2px); }
.chip:active { transform: scale(.97); }

.chip__nombre { font-size: clamp(.72rem, 3.3vw, .84rem); line-height: 1.1; letter-spacing: .02em; }
.chip__precio { font-size: 1.3rem; line-height: 1; }
.chip__desde  { font-size: .62rem; font-weight: 600; letter-spacing: .06em; vertical-align: middle; }

.chip--activo { border-color: transparent; background: #fff; color: var(--color-secundario); }
.chip--activo .chip__precio { color: var(--naranja-texto); }
.chip:focus-visible { outline: 3px dashed #fff; outline-offset: -7px; }
.chip--activo:focus-visible { outline-color: var(--color-primario); }

/* ===========================================================================
   CATEGORÍAS
   =========================================================================== */
.categoria { margin: 36px 0 12px; scroll-margin-top: 92px; }

.categoria__titulo {
    display: flex; align-items: center; gap: 14px;
    margin: 0 0 6px;
    font-size: clamp(1.7rem, 7.4vw, 2.5rem);
    line-height: 1; letter-spacing: -.01em;
}
.categoria__titulo::after {   /* las tres rayas de velocidad del logo */
    content: ""; flex: 1 1 40px; min-width: 40px; height: 18px;
    background: url('../img/rayas.svg') left center / auto 18px no-repeat;
}
.categoria__descripcion { margin: 0 0 18px; font-size: .9rem; font-weight: 600; color: var(--color-texto-suave); }

/* ===========================================================================
   TARJETAS
   =========================================================================== */
.platillos { gap: 12px; }
@media (min-width: 700px)  { .platillos { gap: 16px; } }

/* Cinco sabores por tamaño: en pantalla ancha, cinco columnas = un renglón. */
@media (min-width: 1000px) { .platillos { grid-template-columns: repeat(5, 1fr); } }

.platillo {
    border: 2px solid var(--color-borde);
    border-radius: var(--radio);
    background: var(--color-superficie);
    transition: transform .2s var(--suave), border-color .16s ease, box-shadow .2s ease;
}
.platillo:hover { transform: translateY(-4px); border-color: var(--color-primario); box-shadow: 0 14px 24px -14px rgba(83, 29, 17, .6); }
.platillo:not(.platillo--agotado):active { transform: scale(.975); }
.platillo--solo-lectura:hover { transform: none; box-shadow: none; border-color: var(--color-borde); }
.platillo:focus-visible { outline: 3px solid var(--color-primario); outline-offset: 2px; }

.platillo__foto { border-radius: calc(var(--radio) - 2px) calc(var(--radio) - 2px) 0 0; }
.platillo__foto img { transition: scale .26s var(--suave); }
.platillo:hover .platillo__foto img { scale: 1.08; }

.platillo__datos { gap: 6px; padding: 10px 12px 12px; }
.platillo__nombre { font-size: .94rem; line-height: 1.12; text-wrap: balance; }
.platillo__descripcion { font-weight: 600; }

.platillo__precio { font-size: 1.35rem; line-height: 1; color: var(--color-primario); }
.platillo__desde  { font-style: normal; font-weight: 600; }

.platillo__agregar {
    display: grid; place-items: center; padding: 0;
    width: 44px; height: 44px;
    font-size: 1.7rem; font-weight: 600;
    transition: scale .2s var(--rebote), rotate .2s var(--rebote);
}
.platillo:hover .platillo__agregar { scale: 1.1; rotate: 90deg; }
.platillo__agregar:active { scale: .88; }

/* ===========================================================================
   LA ESPECIALIDAD DE LA CASA Y EL QUE QUEDA SOLO
   ---------------------------------------------------------------------------
   Dos clases de tarjeta ocupan un renglón entero, con la foto al lado:

     · LOS FAVORITOS (`.platillo--destacado`): los que el dueño marca como
       «Favorito» en el panel. Son la especialidad de la casa: renglón propio,
       más grandes, con su cinta y más movimiento, y SIEMPRE los primeros de su
       categoría (order: -1), estén donde estén en el panel. Los demás siguen
       en dos columnas.
     · El que sobra cuando los demás son impares: si no, quedaría solo en media
       columna con un hueco al lado.

   El sistema trae su propia regla del que queda solo, que cuenta posiciones y
   no sabe de favoritos: con un favorito de por medio contaría mal y dejaría a
   otra tarjeta huérfana. Por eso aquí (1) se desarma la del sistema y (2) se
   vuelve a escribir contando solo las tarjetas que NO son favoritas
   (:nth-child(… of S)). Un navegador que no entienda ese selector se queda con
   las tarjetas normales: se pierde el adorno, nada se rompe.
   =========================================================================== */

/* (1) Se desarma la regla del sistema: mismos selectores, tarjeta normal. */
@media (max-width: 699px) {
    .platillos--cuadricula > .platillo:last-child:nth-child(odd) { grid-column: auto; flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
    .platillos--cuadricula > .platillo:last-child:nth-child(odd) > .platillo__foto { flex: none; width: auto; height: auto; aspect-ratio: 1 / 1; border-radius: calc(var(--radio) - 2px) calc(var(--radio) - 2px) 0 0; }
    .platillos--cuadricula > .platillo:last-child:nth-child(odd) > .platillo__datos { flex: 1; padding: 10px 12px 12px; justify-content: flex-start; }
}
@media (min-width: 700px) and (max-width: 999px) {
    .platillos--cuadricula > .platillo:last-child:nth-child(3n + 1) { grid-column: auto; flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
    .platillos--cuadricula > .platillo:last-child:nth-child(3n + 1) > .platillo__foto { flex: none; width: auto; height: auto; aspect-ratio: 1 / 1; border-radius: calc(var(--radio) - 2px) calc(var(--radio) - 2px) 0 0; }
    .platillos--cuadricula > .platillo:last-child:nth-child(3n + 1) > .platillo__datos { flex: 1; padding: 10px 12px 12px; justify-content: flex-start; }
}
@media (min-width: 1000px) {
    .platillos--cuadricula > .platillo:last-child:nth-child(4n + 1) { grid-column: auto; flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
    .platillos--cuadricula > .platillo:last-child:nth-child(4n + 1) > .platillo__foto { flex: none; width: auto; height: auto; aspect-ratio: 1 / 1; border-radius: calc(var(--radio) - 2px) calc(var(--radio) - 2px) 0 0; }
    .platillos--cuadricula > .platillo:last-child:nth-child(4n + 1) > .platillo__datos { flex: 1; padding: 10px 12px 12px; justify-content: flex-start; }
}

/* (2) El que sobra: la última tarjeta que NO es favorita, si cae sola en su fila. */
@media (max-width: 699px) {
    .platillos--cuadricula > .platillo:nth-last-child(1 of :not(.platillo--destacado)):nth-child(odd of :not(.platillo--destacado)) {
        grid-column: 1 / -1; flex-direction: row; align-items: stretch; gap: 0; padding: 0;
    }
    .platillos--cuadricula > .platillo:nth-last-child(1 of :not(.platillo--destacado)):nth-child(odd of :not(.platillo--destacado)) > .platillo__foto {
        flex: 0 0 44%; width: auto; height: auto; aspect-ratio: auto;
        border-radius: calc(var(--radio) - 2px) 0 0 calc(var(--radio) - 2px);
    }
    .platillos--cuadricula > .platillo:nth-last-child(1 of :not(.platillo--destacado)):nth-child(odd of :not(.platillo--destacado)) > .platillo__datos { padding: 14px; justify-content: center; }
    .platillos--cuadricula > .platillo:nth-last-child(1 of :not(.platillo--destacado)):nth-child(odd of :not(.platillo--destacado)) .platillo__nombre { font-size: 1.15rem; }
}
@media (min-width: 700px) and (max-width: 999px) {
    .platillos--cuadricula > .platillo:nth-last-child(1 of :not(.platillo--destacado)):nth-child(3n + 1 of :not(.platillo--destacado)) {
        grid-column: 1 / -1; flex-direction: row; align-items: stretch; gap: 0; padding: 0;
    }
    .platillos--cuadricula > .platillo:nth-last-child(1 of :not(.platillo--destacado)):nth-child(3n + 1 of :not(.platillo--destacado)) > .platillo__foto {
        flex: 0 0 34%; width: auto; height: auto; aspect-ratio: auto;
        border-radius: calc(var(--radio) - 2px) 0 0 calc(var(--radio) - 2px);
    }
    .platillos--cuadricula > .platillo:nth-last-child(1 of :not(.platillo--destacado)):nth-child(3n + 1 of :not(.platillo--destacado)) > .platillo__datos { padding: 16px; justify-content: center; }
}
@media (min-width: 1000px) {
    .platillos--cuadricula > .platillo:nth-last-child(1 of :not(.platillo--destacado)):nth-child(5n + 1 of :not(.platillo--destacado)) {
        grid-column: 1 / -1; flex-direction: row; align-items: stretch;
    }
    .platillos--cuadricula > .platillo:nth-last-child(1 of :not(.platillo--destacado)):nth-child(5n + 1 of :not(.platillo--destacado)) > .platillo__foto {
        flex: 0 0 22%; aspect-ratio: auto;
        border-radius: calc(var(--radio) - 2px) 0 0 calc(var(--radio) - 2px);
    }
    .platillos--cuadricula > .platillo:nth-last-child(1 of :not(.platillo--destacado)):nth-child(5n + 1 of :not(.platillo--destacado)) > .platillo__datos { padding: 18px; justify-content: center; }
}

/* (3) LA ESPECIALIDAD DE LA CASA.
   El `:nth-child(n)` de cada selector no cambia nada: solo le suma peso para
   empatar con las reglas de arriba y ganarles por ir después. */
.platillo { position: relative; }

.platillos--cuadricula > .platillo.platillo--destacado:nth-child(n) {
    order: -1;
    grid-column: 1 / -1; flex-direction: row; align-items: stretch; gap: 0; padding: 0;
    min-height: 190px;
    border-color: var(--color-primario);
    background: linear-gradient(135deg, #fff 55%, color-mix(in srgb, var(--color-primario) 10%, #fff));
    box-shadow: 0 14px 30px -16px rgba(232, 75, 32, .6);
}
.platillos--cuadricula > .platillo.platillo--destacado:nth-child(n) > .platillo__foto {
    flex: 0 0 44%; width: auto; height: auto; aspect-ratio: auto;
    border-radius: calc(var(--radio) - 2px) 0 0 calc(var(--radio) - 2px);
}
.platillos--cuadricula > .platillo.platillo--destacado:nth-child(n) > .platillo__datos { flex: 1; min-width: 0; padding: 16px 14px 14px; gap: 8px; justify-content: center; }
/* El nombre se acomoda al ancho que le toca para que «GO WINGS GO» quepa en un
   solo renglón (el «1 KG» baja si hace falta, nunca el último «GO»). El ancho
   sale de la columna de datos, no de la pantalla, así que sirve igual con foto
   (columna angosta) que sin ella. */
.platillos--cuadricula > .platillo.platillo--destacado:nth-child(n) > .platillo__datos { container-type: inline-size; }
.platillos--cuadricula > .platillo.platillo--destacado:nth-child(n) .platillo__nombre {
    font-size: 1.1rem; font-size: clamp(.8rem, 11.4cqw, 1.3rem);
    text-wrap: wrap; overflow-wrap: normal;
}
.platillos--cuadricula > .platillo.platillo--destacado:nth-child(n) .platillo__precio {
    display: inline-block; transform-origin: left center;
    /* Lo que sobra al lado del «+»: en pantallas angostas el precio se achica
       en vez de montarse encima del botón. */
    font-size: 1.2rem; font-size: clamp(.8rem, calc((100cqw - 58px) / 5.6), 1.4rem);
}
.platillos--cuadricula > .platillo.platillo--destacado:nth-child(n) .platillo__agregar { position: relative; }
@media (min-width: 700px) {
    .platillos--cuadricula > .platillo.platillo--destacado:nth-child(n) > .platillo__foto { flex-basis: 34%; }
    .platillos--cuadricula > .platillo.platillo--destacado:nth-child(n) > .platillo__datos { padding: 22px 24px; }
    .platillos--cuadricula > .platillo.platillo--destacado:nth-child(n) .platillo__nombre { font-size: 1.6rem; font-size: clamp(.8rem, 11.4cqw, 1.6rem); }
    .platillos--cuadricula > .platillo.platillo--destacado:nth-child(n) .platillo__precio { font-size: 1.7rem; }
}
@media (min-width: 1000px) {
    .platillos--cuadricula > .platillo.platillo--destacado:nth-child(n) { min-height: 230px; }
    .platillos--cuadricula > .platillo.platillo--destacado:nth-child(n) > .platillo__foto { flex-basis: 30%; }
}

/* La cinta «Especialidad de la casa»: dentro de la foto en celular (por eso se
   parte en dos renglones), en uno solo cuando hay sitio. */
.platillo__cinta {
    position: absolute; top: 12px; left: 0; z-index: 3;
    display: inline-flex; align-items: center; gap: 6px;
    max-width: calc(44% - 6px);
    padding: 6px 18px 6px 10px;
    overflow: hidden;
    background: var(--color-secundario); color: #fff;
    font-family: var(--marca-fuente); font-weight: var(--marca-peso); font-style: var(--marca-estilo);
    font-size: .66rem; line-height: 1.12; letter-spacing: .04em; text-transform: uppercase;
    clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
    transform-origin: left center;
}
.platillo__cinta::before {   /* la flama del papel */
    content: ""; flex: none; width: 16px; height: 16px;
    background: url('../img/particulas/flama.svg') center / contain no-repeat;
}
.platillo__cinta::after {    /* el brillo que la cruza */
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 30%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: translateX(-130%) skewX(-18deg); opacity: 0; pointer-events: none;
}
@media (min-width: 700px) {
    .platillo__cinta { max-width: none; white-space: nowrap; font-size: .76rem; padding: 7px 22px 7px 12px; }
}
/* Sin foto, la cinta no tiene dónde ir encima: se pone arriba del nombre. */
/* La cinta es hija directa de la tarjeta: sin foto, la tarjeta pasa a columna
   para que la cinta quede arriba y no se coma una columna entera. */
.platillos--cuadricula > .platillo.platillo--destacado.platillo--sinmarco:nth-child(n) { flex-direction: column; min-height: 0; }
.platillo--destacado.platillo--sinmarco .platillo__cinta { position: relative; top: auto; align-self: flex-start; margin: 14px 0 0; max-width: none; white-space: nowrap; }
.platillos--cuadricula > .platillo.platillo--destacado.platillo--sinmarco:nth-child(n) > .platillo__datos { padding: 12px 16px 16px; }

/* El marco brillante por dentro, y las chispas de la foto. */
.platillo--destacado::after {
    content: ""; position: absolute; inset: 0; z-index: 2;
    border-radius: inherit; pointer-events: none;
    box-shadow: inset 0 0 0 3px var(--color-primario), inset 0 0 26px rgba(232, 75, 32, .28);
    opacity: .65;
}
.platillo--destacado .platillo__foto::before,
.platillo--destacado .platillo__foto::after {
    content: ""; position: absolute; z-index: 2; pointer-events: none;
    background: url('../img/particulas/chispa.svg') center / contain no-repeat;
}
.platillo--destacado .platillo__foto::before { top: 14px; right: 12px; width: 20px; height: 20px; }
.platillo--destacado .platillo__foto::after  { bottom: 16px; right: 28px; width: 13px; height: 13px; }

/* Por si la etiqueta «Favorito» del sistema llegara a salir (otro parcial). */
.platillo--destacado .etiqueta--destacado { display: none; }

/* ===========================================================================
   POPUP DEL PLATILLO
   =========================================================================== */
.modal__fondo { background: rgba(43, 15, 8, .62); backdrop-filter: none; }
.modal__caja, .carrito__caja { background: var(--color-fondo); }

.modal__cerrar {
    top: 12px; right: 12px; width: 44px; height: 44px;
    border: 2px solid var(--color-borde);
    background: #fff; color: var(--color-secundario);
    font-size: 1.05rem; font-weight: 800;
    transition: rotate .2s var(--rebote), scale .16s ease;
}
.modal__cerrar:hover  { rotate: 90deg; }
.modal__cerrar:active { scale: .9; }
.modal__compartir { top: 12px; left: 12px; width: 44px; height: 44px; border: 2px solid var(--color-borde); background: #fff; color: var(--color-secundario); }

.modal__foto { position: relative; border-radius: 0; }
.modal__foto::after {   /* las rayas de velocidad, por encima de la foto */
    content: ""; position: absolute; left: 14px; bottom: 14px; width: 84px; height: 16px;
    background: url('../img/rayas.svg') left center / contain no-repeat;
    pointer-events: none;
}

.modal__texto { padding: 16px 62px 4px 20px; }
.modal__titulo { font-size: 1.55rem; line-height: 1.05; }
.modal__descripcion { font-weight: 600; }
.modal__precio { margin: 10px 0 0; font-size: 1.5rem; color: var(--color-primario); }

.grupo {
    margin: 12px 20px 0; padding: 14px 14px 4px;
    background: #fff; border: 2px solid var(--color-borde); border-radius: var(--radio);
}
.grupo + .grupo { border-top: 2px solid var(--color-borde); }
.grupo__titulo { font-size: 1.05rem; }
.grupo__regla {
    padding: 3px 10px; border-radius: 999px;
    background: var(--color-fondo); border: 1px solid var(--color-borde);
    font-size: .68rem; font-weight: 800; letter-spacing: .06em; color: var(--color-texto-suave);
}
.grupo__descripcion { font-weight: 600; }

.opcion { padding: 10px 0; border-bottom: 1px solid var(--color-borde); }
.opcion__nombre { font-weight: 600; }
.opcion__precio { font-weight: 800; }
.opcion__precio--libre { color: var(--naranja-texto); }
.opcion input { width: 22px; height: 22px; }
.opcion--elegida .opcion__nombre { font-weight: 800; }

.extra-cantidad { padding: 0; border: 2px solid var(--color-borde); background: #fff; transition: border-color .16s ease; }
.extra-cantidad__boton { width: 40px; height: 40px; font-size: 1.35rem; font-weight: 800; transition: background .14s ease, scale .14s ease; }
.extra-cantidad__boton:hover:not(:disabled) { background: var(--color-fondo); }
.extra-cantidad__boton:active:not(:disabled) { scale: .86; }
.extra-cantidad__valor { font-weight: 800; }

.nota { padding: 14px 20px 18px; }

/* Pantalla ancha: la foto a la izquierda (fija mientras se baja por las
   opciones) y todo lo demás a la derecha. */
@media (min-width: 760px) {
    .modal__caja { max-width: 940px; }
    .modal__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-content: start; align-items: start; }
    .modal__cuerpo > .modal__foto { grid-column: 1; grid-row: 1 / span 6; position: sticky; top: 0; max-width: none; margin: 0; }
    .modal__cuerpo > :not(.modal__foto) { grid-column: 2; }
    .modal__texto { padding-top: 62px; }
}
.nota__etiqueta { font-weight: 800; color: var(--color-texto); }
.nota__campo {
    min-height: 48px; font-size: 1rem; font-weight: 600;
    background: #fff; border: 2px solid var(--color-borde);
}
.nota__campo:focus { outline: 3px solid color-mix(in srgb, var(--color-primario) 40%, transparent); outline-offset: 0; border-color: var(--color-primario); }

.modal__aviso, .checkout__aviso {
    background: rgba(179, 38, 30, .08); border: 1px solid rgba(179, 38, 30, .45); color: #8f1d17; font-weight: 600;
}
.campo-c__error { color: #b3261e; }
.modal__pausa, .categoria__pausa, .carrito__avisos { font-weight: 600; }

.modal__pie { background: #fff; border-top: 2px solid var(--color-borde); }
.contador { padding: 0; border: 2px solid var(--color-borde); background: var(--color-fondo); }
.contador__boton { width: 44px; height: 46px; font-size: 1.5rem; font-weight: 800; transition: background .14s ease, scale .14s ease; }
.contador--chico .contador__boton { width: 34px; height: 36px; font-size: 1.15rem; }
.modal__pie .contador__boton { width: 40px; }
.contador__boton:hover  { background: #fff; }
.contador__boton:active { scale: .86; }
.contador__valor { font-weight: 800; }

/* ===========================================================================
   BOTONES
   =========================================================================== */
.boton { min-height: 48px; font-weight: 700; border: 2px solid var(--color-borde); }
.boton--primario {
    position: relative; overflow: hidden;
    min-height: 52px; padding-inline: 22px;
    border: 0; border-radius: 0;
    background: var(--color-primario); color: #fff;
    /* 1.17rem = 18.7 px: el mínimo para que el blanco sobre este naranja
       (3.9:1) cuente como letra grande. */
    font-size: 1.17rem; letter-spacing: 0; line-height: 1.15;
    text-wrap: balance;
    clip-path: var(--corte);
}
.boton--primario::after {   /* el brillo que cruza el botón */
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 30%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
    transform: translateX(-160%) skewX(-18deg); opacity: 0; pointer-events: none;
}
.boton--primario:focus-visible { outline: 3px dashed #fff; outline-offset: -7px; }
.boton--chico { background: #fff; }

/* ===========================================================================
   BARRA DEL PEDIDO
   =========================================================================== */
.bolsa .bolsa__caja {
    max-width: 560px;
    padding: 8px 8px 8px 14px;
    border: 0;
    border-radius: var(--radio);
    background: var(--color-secundario);
    color: #fff;
    box-shadow: 0 14px 30px -10px rgba(83, 29, 17, .75);
}

/* El 📍 del sistema se cambia por la mascota. */
.bolsa .bolsa__marca {
    width: 38px; height: 38px; font-size: 0;
    border-radius: 50%;
    background: #fff url('../img/icono.png') center / 80% no-repeat;
}

.bolsa .bolsa__datos { display: flex; flex-direction: column; line-height: 1.15; }
.bolsa .bolsa__sucursal { margin: 0; font-family: var(--fuente-textos); font-size: .7rem; font-weight: 600; color: #fff; opacity: .85; }
.bolsa .bolsa__resumen {
    display: grid; grid-template-columns: auto 1fr; column-gap: .3em;
    margin: 0; font-size: .8rem; font-weight: 600; color: #fff;
}
.bolsa .bolsa__separador { display: none; }
.bolsa .bolsa__resumen [data-bolsa-total] { grid-column: 1 / -1; font-size: 1.25rem; font-weight: 800; font-style: italic; }

.bolsa .bolsa__boton {
    position: relative; overflow: hidden;
    min-height: 52px; padding: 0 22px;
    border-radius: 0;
    background: var(--color-primario); color: #fff;
    font-size: 1.2rem;
    clip-path: var(--corte);
    transition: transform .14s ease;
}
.bolsa .bolsa__boton::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
    transform: translateX(-150%) skewX(-18deg); opacity: 0;
}
.bolsa .bolsa__boton:active { transform: scale(.95); }
.bolsa .bolsa__boton:focus-visible { outline: 3px dashed #fff; outline-offset: -6px; }

/* ===========================================================================
   AVISO FLOTANTE, PEDIDO Y CHECKOUT (lo del sistema, vestido de marca)
   =========================================================================== */
.aviso { border: 0; background: var(--color-secundario); color: #fff; font-weight: 700; }
.aviso__accion { color: #ffb48f; }
.aviso__accion:hover { background: rgba(255, 255, 255, .1); }

.carrito__cabecera { border-bottom: 2px solid var(--color-borde); }
.carrito__cabecera .modal__cerrar { width: 44px; height: 44px; background: #fff; color: var(--color-secundario); }
.carrito__titulo { font-size: 1.5rem; }
.carrito__pie { background: #fff; border-top: 2px solid var(--color-borde); }
.carrito__pie--solo-boton { border-top: 0; background: linear-gradient(to top, #fff 72%, transparent); }
.carrito__renglon--total strong { color: var(--naranja-texto); }
.carrito__renglon strong { font-weight: 800; }
.linea { border-bottom: 1px solid var(--color-borde); }
.linea__nombre { font-size: .95rem; line-height: 1.15; }
.linea__precio { font-weight: 800; font-style: italic; color: var(--naranja-texto); }
.linea__mini { border: 2px solid var(--color-borde); background: #fff; }
.linea__quitar:hover, .linea__quitar:focus-visible { color: #b3261e; background: rgba(179, 38, 30, .1); }

.campo-c__etiqueta { font-weight: 700; }
.campo-c__control { min-height: 48px; font-size: 1rem; font-weight: 600; background: #fff; border: 2px solid var(--color-borde); }
.campo-c__control:focus { border-color: var(--color-primario); outline: 3px solid color-mix(in srgb, var(--color-primario) 35%, transparent); }
.segmentado { background: #fff; border: 2px solid var(--color-borde); }
.segmentado__opcion span { padding: 12px 10px; font-weight: 700; }
.segmentado__opcion input:checked + span { background: var(--color-secundario); color: #fff; }
.mapa-c { border: 2px solid var(--color-borde); }
.enviado__icono { background: color-mix(in srgb, var(--color-primario) 16%, transparent); color: var(--naranja-texto); }
.enviado__folio strong { color: var(--color-texto); }
.sucursal-op__paloma { background: var(--color-secundario); }
.sucursal-op--activa .sucursal-op__nombre { color: var(--naranja-texto); }
.horario-dia--hoy span, .horario-dia--hoy strong { color: var(--naranja-texto); }
.cerrado { background: rgba(232, 75, 32, .1); border-color: rgba(232, 75, 32, .4); font-weight: 600; }
.cerrado--aviso { background: color-mix(in srgb, var(--color-texto-suave) 12%, transparent); border-color: var(--color-borde); }

/* ===========================================================================
   LA PROMOCIÓN EN EL CARRITO (v4.38) Y EL BANNER QUE VENCE (v4.44)
   ---------------------------------------------------------------------------
   Esto lo pinta el sistema (partials del tema base + theme.js) y aquí solo se
   viste de marca. Tres reglas del documento de temas que se respetan:

     · EL AHORRO VA EN VERDE, no en el naranja de la marca: un naranja junto a
       un precio se lee como aviso o como error, y el cliente tiene que ver «me
       ahorro $235» como una buena noticia. El verde es fijo a propósito.
     · No se esconde ni se calcula nada: el cartel, el pie tachado y la barra
       se quedan, solo cambian de letra, de forma y de color de fondo.
     · La pista («agrega 1 más y aplica tu 3x2») queda en amarillo, de otro color
       que el cartel, para que no se confunda con una promoción YA aplicada.
   =========================================================================== */
.carrito__promo {
    --promo: #16A34A;
    margin-bottom: 10px;
    border-width: 2px;
    box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--promo) 70%, transparent);
}
.carrito__promo-titulo {
    font-family: var(--marca-fuente); font-weight: var(--marca-peso); font-style: var(--marca-estilo);
    text-transform: uppercase; font-size: 1rem; line-height: 1.12;
    color: color-mix(in srgb, var(--promo) 45%, var(--color-secundario));
}
.carrito__promo-detalle { font-weight: 600; color: var(--color-texto); }
.carrito__promo-ahorro {
    padding: 7px 18px 7px 16px; border-radius: 0; clip-path: var(--corte);
    font-family: var(--marca-fuente); font-style: var(--marca-estilo);
}
.carrito__promo-ahorro strong { font-weight: var(--marca-peso); font-size: 1.2rem; }

.carrito__pista {
    border-radius: var(--radio); border-width: 2px; color: var(--color-texto); font-weight: 700;
    background: color-mix(in srgb, #E8B923 16%, #fff);
}

.carrito__renglon--original s { color: var(--color-texto-suave); }
.carrito__renglon--promo { font-family: var(--marca-fuente); font-style: var(--marca-estilo); font-weight: 800; text-transform: uppercase; font-size: .92rem; }

/* La barra de abajo: el chip del ahorro cabe en la columna angosta de los
   datos (el botón «Ver pedido» se queda con lo demás), así que va compacto. */
.bolsa .bolsa__promo {
    align-self: flex-start; max-width: 100%;
    margin-top: 4px; padding: 1px 8px 1px 7px;
    font-size: .68rem; line-height: 1.55;
}
@media (max-width: 440px) {
    .bolsa .bolsa__promo > [aria-hidden="true"] { display: none; }
}

/* La cuenta regresiva del banner: una pastilla café con su flama, en la letra
   de la marca, con borde crema para que se lea sobre cualquier banner. */
.promo__cuenta {
    gap: 7px; align-items: center;
    padding: 6px 14px 6px 10px;
    border: 2px solid var(--color-fondo);
    background: var(--color-secundario); color: #fff;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    font-family: var(--marca-fuente); font-weight: var(--marca-peso); font-style: var(--marca-estilo);
    text-transform: uppercase; letter-spacing: .02em; line-height: 1.1;
    box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .6);
}
.promo__cuenta::before {
    content: ""; flex: none; width: 17px; height: 17px;
    background: url('../img/particulas/flama.svg') center / contain no-repeat;
    transform-origin: 50% 90%;
}
.promo__cuenta-etiqueta { font-weight: 600; opacity: .9; font-size: .7rem; }

/* ===========================================================================
   PIE — café, con el papel en versión noche
   =========================================================================== */
.pie {
    position: relative; overflow: hidden; isolation: isolate;
    margin-top: 40px; padding: 44px var(--espacio) 26px;
    border-top: 0;
    background: var(--color-secundario);
    color: #fbe6d4;
}
.pie::after {   /* el papel, deslizándose */
    content: ""; position: absolute; inset: -240px; z-index: -1;
    background: url('../img/papel-noche.svg') 0 0 / 240px 240px;
}
.pie::before {   /* corte inclinado en la parte de arriba */
    content: ""; position: absolute; left: 0; right: 0; top: -1px; z-index: 1; height: 22px;
    background: var(--color-fondo);
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 100%);
}
body.con-bolsa .pie { padding-bottom: 26px; }

/* El logo, dentro de una etiqueta blanca (su «WINGS GO» es café y se perdería
   sobre el pie). Se dibuja aquí, así que no depende del logo que se suba al
   panel: ese y el nombre en texto se esconden. */
.pie__logo, .pie__marca-nombre { display: none; }
.pie__marca::before {
    content: ""; display: block; flex: none;
    width: 230px; height: 82px;
    border-radius: var(--radio);
    background: #fff url('../img/logo.png') center / 190px auto no-repeat;
    transition: transform .2s var(--rebote);
}
.pie__marca:hover::before { transform: rotate(-2deg) scale(1.04); }
.pie__lema { color: #fbe6d4; font-weight: 600; }

.pie__linea { border-top: 2px dashed rgba(255, 233, 214, .25); }
.pie__subtitulo {
    border-bottom: 0; padding-bottom: 0; margin-bottom: 6px;
    color: #ffb48f; font-size: .78rem; font-weight: 800; letter-spacing: .14em; font-style: italic;
}
.pie__dato { color: #fbe6d4; font-weight: 600; }
.pie__dato--fuerte { color: #fff; font-weight: 800; font-size: 1.05rem; }
.pie__dato--suave { color: #e9c9b4; }
.pie__icono { color: #e9c9b4; }
.pie__dato a:hover { color: #ffb48f; }
.pie__estado--abierto { color: #55d68b; }
.pie__estado--cerrado { color: #e9c9b4; }
.pie__enlace { color: #ffb48f; font-weight: 800; padding: 8px 0; }

.pie__red {
    width: 46px; height: 46px;
    border: 2px solid rgba(255, 233, 214, .35); background: transparent; color: #fff;
    transition: background .16s ease, border-color .16s ease, color .16s ease, transform .2s var(--rebote);
}
.pie__red:hover { background: var(--color-primario); border-color: var(--color-primario); color: #fff; transform: translateY(-5px) rotate(-8deg); }

.pie .creditos-dev, .pie__firma { color: #e9c9b4; }
.pie .creditos-dev { opacity: .9; }
.pie .creditos-dev:hover { color: #ffb48f; opacity: 1; }

/* ===========================================================================
   DECORACIÓN — el repartidor que corre por la calle
   =========================================================================== */
.decoracion { height: 118px; overflow: hidden; background: var(--color-secundario); pointer-events: none; user-select: none; }
body.con-bolsa .decoracion { height: 214px; }

.decoracion__calle {   /* la raya de la calle */
    position: absolute; left: -40px; right: 0; top: 104px; height: 5px;
    background: repeating-linear-gradient(90deg, var(--color-primario) 0 20px, transparent 20px 40px);
}

.corredor { position: absolute; left: 0; top: 18px; width: 104px; aspect-ratio: 240 / 181; }
.corredor__bote { position: absolute; inset: 0; }
.c { position: absolute; inset: 0; display: block; }
.c img, .c-tobillo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; }

/* Los puntos de giro: la cadera (muslo y zapato) y el tobillo (solo el zapato). */
.c-muslo-a, .c-zapato-a { transform-origin: 80% 65.19%; }
.c-muslo-b, .c-zapato-b { transform-origin: 50.83% 80.11%; }
.c-zapato-a .c-tobillo  { transform-origin: 84.58% 83.43%; }
.c-zapato-b .c-tobillo  { transform-origin: 34.58% 78.45%; }
.c-rayas { transform-origin: 19% 50%; }

/* Sin movimiento, el repartidor se queda parado en una esquina. */
@media (prefers-reduced-motion: reduce) { .corredor { left: auto; right: 24px; } }

/* ===========================================================================
   MOVIMIENTO
   ---------------------------------------------------------------------------
   Las reglas del documento de temas:
     · Solo transform y opacity (y las propiedades individuales scale/rotate).
     · Lo que responde a un toque dura 260 ms o menos.
     · Nada bloquea: todo se puede tocar mientras se mueve.
     · Todo va dentro de prefers-reduced-motion: no-preference.
   Las animaciones de LLEGADA usan «backwards» (no «both»): al terminar dejan
   de mandar, y el hover y el toque vuelven a funcionar.
   =========================================================================== */
@media (prefers-reduced-motion: no-preference) {

    /* ---- Llegada: todo entra en cascada ----------------------------------- */
    @keyframes entra-izq    { from { opacity: 0; transform: translateX(-34px); } }
    @keyframes entra-arriba { from { opacity: 0; transform: translateY(14px); } }
    @keyframes entra-abajo  { from { opacity: 0; transform: translateY(-12px); } }
    @keyframes crece        { from { opacity: 0; transform: scale(.9); } }
    @keyframes aparece      { from { opacity: 0; } }
    @keyframes sube-hoja    { from { opacity: 0; transform: translateY(32px); } }
    @keyframes entra-der    { from { opacity: 0; transform: translateX(18px); } }
    @keyframes asienta      { from { transform: scale(1.1); } }

    .cabecera__logo { animation: entra-izq .26s var(--rebote) backwards, flota 5s ease-in-out .5s infinite alternate; }
    .cabecera__acciones > * { animation: crece .24s var(--rebote) backwards; }
    .cabecera__acciones > :nth-child(1) { animation-delay: .06s; }
    .cabecera__acciones > :nth-child(2) { animation-delay: .12s; }
    .cabecera__acciones > :nth-child(3) { animation-delay: .18s; }
    .promos { animation: crece .26s var(--suave) .1s backwards; }
    .chips  { animation: entra-abajo .26s var(--suave) .16s backwards; }
    .categoria__titulo      { animation: entra-izq .26s var(--suave) .22s backwards; }
    .categoria__descripcion { animation: entra-arriba .26s var(--suave) .26s backwards; }
    .platillo { animation: entra-arriba .26s var(--suave) backwards; animation-delay: calc(.28s + var(--i, 0) * 45ms); }
    .platillo:nth-child(2) { --i: 1; } .platillo:nth-child(3) { --i: 2; } .platillo:nth-child(4) { --i: 3; }
    .platillo:nth-child(5) { --i: 4; } .platillo:nth-child(n+6) { --i: 5; }

    /* Lo que está abajo de la pantalla espera su turno: lo marca js/animaciones.js. */
    .revelar { opacity: 0; transform: translateY(18px); }
    .revelar.revelado {
        opacity: 1; transform: none;
        transition: opacity .26s ease, transform .26s var(--suave);
        transition-delay: var(--retraso, 0ms);
    }
    .platillo.revelar.revelado {
        transition: opacity .26s ease, transform .26s var(--suave), border-color .16s ease, box-shadow .2s ease;
        transition-delay: var(--retraso, 0ms), var(--retraso, 0ms), 0ms, 0ms;
    }

    /* ---- Ambiente: lo que nunca se queda quieto ---------------------------- */
    @keyframes flota   { to { transform: translateY(-4px) rotate(-.8deg); } }
    @keyframes deriva  { to { transform: translate3d(240px, 240px, 0); } }
    @keyframes ping    { 0% { transform: scale(1); opacity: .65; } 70%, 100% { transform: scale(1.55); opacity: 0; } }
    @keyframes ping-ancho { 0% { transform: scale(1, 1); opacity: .65; } 70%, 100% { transform: scale(1.1, 1.5); opacity: 0; } }
    @keyframes ping-punto { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2.8); opacity: 0; } }
    @keyframes brillo { 0%, 62% { transform: translateX(-130%) skewX(-18deg); opacity: 0; } 66% { opacity: 1; } 100% { transform: translateX(560%) skewX(-18deg); opacity: 0; } }
    @keyframes brillo-banner { 0%, 60% { transform: translateX(-120%) skewX(-14deg); opacity: 0; } 64% { opacity: 1; } 100% { transform: translateX(520%) skewX(-14deg); opacity: 0; } }
    @keyframes respira { to { transform: scale(1.06); } }
    @keyframes estela  { 0%, 100% { transform: translateX(0); opacity: 1; } 50% { transform: translateX(12px); opacity: .55; } }
    @keyframes sube-particula {
        0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
        10%  { opacity: var(--o, .5); }
        85%  { opacity: var(--o, .5); }
        100% { transform: translate3d(var(--dx), calc(var(--alto) * -1 - 80px), 0) rotate(var(--r)); opacity: 0; }
    }
    @keyframes vaiven { from { transform: translateX(-9px) rotate(-12deg); } to { transform: translateX(9px) rotate(12deg); } }
    @keyframes late   { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

    .cabecera::before, .pie::after { animation: deriva 44s linear infinite; }

    .part { animation: sube-particula var(--t) linear infinite; animation-delay: var(--d); }
    .part::before { animation: vaiven 3.2s ease-in-out infinite alternate; animation-delay: var(--d); }

    .cabecera .accion--whatsapp::after { animation: ping 3.2s ease-out 1.2s infinite; }
    .cabecera .punto::after { animation: ping-punto 2.2s ease-out infinite; }
    @media (min-width: 760px) { .cabecera .accion--whatsapp::after { animation-name: ping-ancho; } }

    .promo::after { animation: brillo-banner 7s ease-in-out 1.4s infinite; }
    /* La flama de la cuenta regresiva arde. */
    @keyframes arde { 0%, 100% { transform: scale(1) rotate(-3deg); } 50% { transform: scale(1.18, 1.3) rotate(4deg); } }
    .promo__cuenta::before { animation: arde 1.1s ease-in-out infinite; }
    .chips::after { animation: brillo 6s ease-in-out 2s infinite; }
    .categoria__titulo::after { animation: estela 2.4s ease-in-out infinite; }
    .platillo__foto img { animation: respira 7s ease-in-out infinite alternate; transform-origin: 50% 62%; }
    .platillo:nth-child(2n) .platillo__foto img { animation-delay: -2.6s; }
    .platillo:nth-child(3n) .platillo__foto img { animation-delay: -4.1s; }
    .chip--activo { animation: late .22s var(--rebote); }

    /* La barra del pedido llega rebotando; su icono flota y el botón brilla. */
    .bolsa:not([hidden]) .bolsa__caja { animation: sube-hoja .3s var(--rebote) backwards; }
    .bolsa .bolsa__marca { animation: flota 2.6s ease-in-out infinite alternate; }
    .bolsa .bolsa__boton::after { animation: brillo 3.6s ease-in-out 1s infinite; }
    .boton--primario::after { animation: brillo 4.4s ease-in-out 1.2s infinite; }

    /* Popup y pedido: la hoja sube, la foto se asienta y las filas entran una a una. */
    .modal:not([hidden]) .modal__fondo { animation: aparece .2s ease backwards; }
    .modal:not([hidden]) .modal__caja,
    .carrito:not([hidden]) .carrito__caja { animation: sube-hoja .26s var(--rebote) backwards; }
    .modal:not([hidden]) .modal__foto img { animation: asienta .3s var(--suave) backwards; }
    .modal:not([hidden]) .modal__titulo,
    .modal:not([hidden]) .modal__descripcion,
    .modal:not([hidden]) .modal__precio { animation: entra-der .24s var(--suave) backwards; }
    .modal:not([hidden]) .modal__descripcion { animation-delay: .04s; }
    .modal:not([hidden]) .modal__precio { animation-delay: .08s; }
    .modal:not([hidden]) .grupo { animation: entra-arriba .24s var(--suave) .08s backwards; }
    .modal:not([hidden]) .opcion { animation: entra-der .22s var(--suave) backwards; animation-delay: calc(.12s + var(--k, 0) * 36ms); }
    .opcion:nth-child(2) { --k: 1; } .opcion:nth-child(3) { --k: 2; } .opcion:nth-child(4) { --k: 3; } .opcion:nth-child(5) { --k: 4; }
    .carrito:not([hidden]) .linea { animation: entra-der .24s var(--suave) backwards; animation-delay: calc(.1s + var(--k, 0) * 50ms); }
    .linea:nth-child(2) { --k: 1; } .linea:nth-child(3) { --k: 2; } .linea:nth-child(4) { --k: 3; }

    /* LA ESPECIALIDAD DE LA CASA: la que más se mueve. Entra con un salto más
       grande, el marco respira, la foto se mece, las chispas titilan, la cinta
       late y brilla, el precio late y el «+» lanza un aro que invita a tocar. */
    @keyframes especial-entra { from { opacity: 0; transform: translateY(22px) scale(.94); } }
    @keyframes especial-marco { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
    @keyframes especial-foto  { from { transform: scale(1.04) rotate(-1.2deg); } to { transform: scale(1.13) rotate(1.2deg); } }
    @keyframes cinta-late     { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.07) rotate(-1.6deg); } }
    @keyframes cinta-brillo   { 0%, 55% { transform: translateX(-130%) skewX(-18deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: translateX(520%) skewX(-18deg); opacity: 0; } }
    @keyframes chispea        { 0%, 100% { transform: scale(0) rotate(0deg); opacity: 0; } 35% { transform: scale(1) rotate(60deg); opacity: 1; } 70% { transform: scale(.55) rotate(110deg); opacity: .8; } }
    @keyframes precio-late    { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
    @keyframes aro-boton      { 0% { transform: scale(1); opacity: .75; } 80%, 100% { transform: scale(1.75); opacity: 0; } }

    .platillos--cuadricula > .platillo.platillo--destacado:nth-child(n) { animation: especial-entra .3s var(--rebote) .2s backwards; }
    .platillo--destacado::after { animation: especial-marco 2.4s ease-in-out infinite; }
    .platillo--destacado .platillo__foto img { animation: especial-foto 4.6s ease-in-out infinite alternate; transform-origin: 50% 60%; }
    .platillo--destacado .platillo__foto::before { animation: chispea 2.6s ease-in-out .3s infinite; }
    .platillo--destacado .platillo__foto::after  { animation: chispea 2.6s ease-in-out 1.4s infinite; }
    .platillo__cinta { animation: cinta-late 2.4s ease-in-out infinite; }
    .platillo__cinta::after { animation: cinta-brillo 3.2s ease-in-out .8s infinite; }
    .platillos--cuadricula > .platillo.platillo--destacado:nth-child(n) .platillo__precio { animation: precio-late 2s ease-in-out infinite; }
    .platillo--destacado .platillo__agregar::after {
        content: ""; position: absolute; inset: 0; border-radius: 50%;
        border: 3px solid var(--color-primario); pointer-events: none;
        opacity: 0; animation: aro-boton 1.8s ease-out infinite;
    }

    /* El repartidor: la calle pasa hacia atrás y el corredor mueve piernas, zapatos y cuerpo. */
    @keyframes calle    { to { transform: translateX(40px); } }
    @keyframes correr   { from { transform: translateX(-150px); } to { transform: translateX(calc(100vw + 50px)); } }
    @keyframes bote     { 0%, 50%, 100% { transform: translateY(0); } 25%, 75% { transform: translateY(-5px); } }
    @keyframes pierna-a { 0%, 100% { transform: rotate(30deg); }  50% { transform: rotate(-30deg); } }
    @keyframes pierna-b { 0%, 100% { transform: rotate(-42deg); } 50% { transform: rotate(20deg); } }
    @keyframes zapato-a { 0%, 100% { transform: rotate(26deg); }  50% { transform: rotate(-14deg); } }
    @keyframes zapato-b { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(28deg); } }
    @keyframes estira   { from { transform: scaleX(1); opacity: 1; } to { transform: scaleX(1.4); opacity: .55; } }

    .decoracion__calle { animation: calle .5s linear infinite; }
    .corredor { animation: correr 9s linear infinite; }
    .corredor__bote { animation: bote .62s ease-in-out infinite; }
    .c-muslo-a, .c-zapato-a { animation: pierna-a .62s ease-in-out infinite; }
    .c-muslo-b, .c-zapato-b { animation: pierna-b .62s ease-in-out infinite; }
    .c-zapato-a .c-tobillo { animation: zapato-a .62s ease-in-out infinite; }
    .c-zapato-b .c-tobillo { animation: zapato-b .62s ease-in-out infinite; }
    .c-rayas { animation: estira .31s ease-in-out infinite alternate; }
    @media (min-width: 760px) { .corredor { animation-duration: 13s; } }
}

/* Menos movimiento, si el sistema lo pide: sin partículas y todo quieto. */
@media (prefers-reduced-motion: reduce) {
    .particulas { display: none; }
    .cabecera::before, .pie::after { animation: none; }
}