/* ===========================================================================
   MEZCALTITLÁN — CANTINA & GRILL
   ---------------------------------------------------------------------------
   Cartel de feria mexicana: papel crema, tinta azul petróleo, banderines de
   papel picado y confeti cayendo al fondo. Todo lo que se puede tocar es una
   calcomanía: borde grueso, sombra dura desplazada y, al apretarlo, se hunde
   sobre su propia sombra.

   ESTE TEMA ES CASI TODO CSS. Solo trae un PHP —el confeti—, que en el tema
   base está vacío. Ninguna plantilla del sistema se copió, así que este
   restaurante sigue recibiendo cada corrección del carrito, del checkout y de
   la carta sin que nadie vuelva a tocar su tema.

   NO SE INCLUYE js/theme.js A PROPÓSITO. El sistema carga UNA sola copia del
   script —la del tema si existe, si no la de default—, de modo que traer una
   propia congelaría el carrito y el checkout en la versión de hoy.

   Los tres colores del panel (primario, secundario, fondo) NO se redefinen
   aquí: se usan con var() y su respaldo, para que el dueño los siga cambiando
   desde su panel. Lo que sí fija el tema son sus propios tonos —el crema, el
   petróleo, el turquesa— y el redondeo, porque el aspecto de calcomanía
   depende de tener las esquinas casi rectas.
   =========================================================================== */

/* ===========================================================================
   0. LA TIPOGRAFÍA DE LOS RÓTULOS
   ---------------------------------------------------------------------------
   Lilita One, servida DESDE EL PROPIO TEMA. Son 11 KB en el mismo dominio: ni
   una conexión más que abrir a mitad de la calle, y llega antes que la que el
   panel pide a Google.

   POR QUÉ NO SALE DEL PANEL. El catálogo de tipografías del sistema —Sistema,
   Inter, Poppins, Montserrat, Bebas Neue, Playfair, Lora, Nunito— no tiene
   ninguna de cartel de feria, y esta cantina se sostiene sobre esa letra. La
   alternativa limpia es agregarla a `fuentes_disponibles()` en /core, que está
   fuera de la carpeta del tema: ahí NO se toca nada.

   Y NO SE PISA `--fuente-titulos`. El rótulo se pide con `--mz-rotulos`, que
   lleva la del panel de respaldo: si algún día se quitan estos dos archivos,
   la carta vuelve sola a la tipografía que el dueño tenga elegida en vez de
   quedarse en Times New Roman.
   =========================================================================== */

@font-face {
    font-family: 'Lilita One';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fuentes/lilita-one-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Lilita One';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fuentes/lilita-one-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --mz-rotulos: 'Lilita One', var(--fuente-titulos, Impact, sans-serif);

    /* --- La paleta propia del cartel --------------------------------------
       El panel manda en primario, secundario y fondo. Estos son los tonos que
       el panel no tiene y que hacen la identidad de la cantina. */
    --mz-petroleo:      #0A2E3A;   /* el azul de la tinta y de los paneles */
    --mz-petroleo-hondo:#05202A;
    --mz-crema:         #FDF4D6;   /* el crema de las fichas */
    --mz-crema-claro:   #FFFBEE;
    --mz-turquesa:      #00BCD4;
    --mz-turquesa-claro:#3FE0F5;   /* sobre petróleo: 8:1 de contraste */
    --mz-turquesa-hondo:#046A78;   /* sobre crema:    5.5:1 de contraste */
    --mz-rosa-claro:    #FF6D96;   /* el rosa de marca, aclarado para el fondo oscuro */

    /* --- Redondeo y sombras ------------------------------------------------
       La sombra no se difumina: es una mancha dura desplazada, como la tinta
       corrida de un cartel mal registrado. */
    --mz-radio:         5px;
    --mz-borde:         3px;
    --mz-sombra:        5px 5px 0 var(--mz-petroleo);
    --mz-sombra-chica:  3px 3px 0 var(--mz-petroleo);
    --mz-foto:          88px;

    /* --- Las cuatro que el tema base fija y el del cliente cambia ---------- */
    --color-superficie:  #0A2E3A;
    --color-borde:       #17495A;
    --color-texto:       #0C2731;
    --color-texto-suave: #55707B;
}

/* Obligatoria: de aquí depende el ajuste de tamaño de texto del panel. */
html { font-size: var(--escala-texto, 100%); }

/* Los títulos que el tema base pinta con la tipografía del panel pasan al
   rótulo del cartel. El cuerpo del texto NO se toca: ese sigue siendo del
   dueño y se cambia desde su panel. */
h1, h2, h3,
.cabecera__nombre,
.categoria__titulo,
.platillo__nombre,
.aviso-vacio__titulo { font-family: var(--mz-rotulos); }

/* El papel de estraza: crema con motitas grises, como el de las cartas
   impresas en papel reciclado.

   La misma imagen va DOS VECES, a distinto tamaño y corrida de sitio. Con una
   sola se alcanza a ver la cuadrícula del mosaico en cuanto la pantalla es más
   ancha que el dibujo; con las dos desfasadas, el patrón no se repite a la
   vista en toda la página. Son 10 KB de SVG, no una foto de papel. */
body {
    background-color: var(--color-fondo, #FFF7D3);
    background-image:
        url('../img/papel-moteado.svg'),
        url('../img/papel-moteado.svg');
    background-size: 240px 240px, 167px 167px;
    background-position: 0 0, 61px 97px;
    background-repeat: repeat, repeat;
}

/* ===========================================================================
   1. EL CONFETI DEL FONDO
   ---------------------------------------------------------------------------
   Lo pinta templates/partials/decoracion.php, que va al final del <body>.

   `z-index: -1` y no un z-index positivo en la cabecera y el contenido: si a
   <main> se le pusiera z-index, la hoja de sucursales que vive dentro quedaría
   encerrada en esa capa y la barra del pedido —que está fuera— acabaría
   tapándola. Así el confeti se pinta encima del fondo de la página, debajo de
   todo lo demás, y no hace falta tocar el apilado de nada.
   =========================================================================== */

.decoracion {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
}

.confeti { position: absolute; inset: 0; }

.confeti__papel {
    position: absolute;
    top: -8vh;
    /* El carril y el retraso salen de `--i`, que la plantilla imprime en cada
       papelito. La medida y la velocidad van por grupos de :nth-child porque
       dentro de calc() el signo % es un porcentaje y no un resto: no hay forma
       de sacar un valor «al azar» de un número. */
    left: calc(var(--i) * 4.05% + 1.5%);
    width: 8px;
    height: 13px;
    background: var(--mz-turquesa);
    opacity: 0.7;
    border-radius: 1px;
}

.confeti__papel:nth-child(5n + 2) { width: 6px;  height: 6px;  }
.confeti__papel:nth-child(5n + 3) { width: 12px; height: 7px;  }
.confeti__papel:nth-child(5n + 4) { width: 7px;  height: 16px; }

.confeti__papel:nth-child(4n + 1) { background: var(--color-primario, #E91E63); }
.confeti__papel:nth-child(4n + 2) { background: var(--color-secundario, #FFD600); }
.confeti__papel:nth-child(4n + 3) { background: var(--mz-turquesa); }
.confeti__papel:nth-child(4n + 4) { background: var(--mz-petroleo); opacity: 0.34; }

/* Uno de cada tres es redondo: papelitos y serpentinas mezclados. */
.confeti__papel:nth-child(3n) { border-radius: 50%; }

@media (prefers-reduced-motion: no-preference) {
    .confeti__papel {
        /* Solo transform y opacity: el navegador las mueve sin repintar. */
        animation: mz-confeti linear infinite;
        animation-duration: 13s;
        /* El retraso negativo arranca a cada papelito en un punto distinto de
           su caída: al cargar la página ya está lloviendo confeti, no empieza
           a llover. */
        animation-delay: calc(var(--i) * -1.7s);
    }

    .confeti__papel:nth-child(3n + 1) { animation-duration: 17s; }
    .confeti__papel:nth-child(3n + 2) { animation-duration: 10s; }
}

@keyframes mz-confeti {
    from { transform: translate3d(0, 0, 0) rotate(0deg); }
    50%  { transform: translate3d(22px, 60vh, 0) rotate(220deg); }
    to   { transform: translate3d(-10px, 122vh, 0) rotate(540deg); }
}

/* Quien pidió menos movimiento se queda con el confeti quieto y más discreto:
   la decoración sigue, el mareo no. */
@media (prefers-reduced-motion: reduce) {
    .confeti__papel { top: calc(var(--i) * 4% + 2%); opacity: 0.30; }
}

/* ===========================================================================
   2. LA CABECERA
   ---------------------------------------------------------------------------
   Barra de petróleo con la cinta tricolor debajo: rosa, amarillo y turquesa,
   los tres colores de la marca en el sitio donde se leen antes que nada.
   =========================================================================== */

.cabecera {
    position: relative;
    background: var(--mz-petroleo);
    border-bottom: 0;
    padding-bottom: 14px;
    /* Dentro de la barra oscura mandan estos: así todo lo que herede el color
       del texto —los iconos incluidos— se ve claro sin repetir reglas. */
    --color-texto:       var(--mz-crema);
    --color-texto-suave: #9FC2CC;
    --color-borde:       #1B5062;
    color: var(--mz-crema);
}

/* La cinta tricolor. Va en un ::after y no en un borde porque un borde no
   admite tres colores. */
.cabecera::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 6px;
    background: linear-gradient(
        to right,
        var(--color-primario, #E91E63) 0 33.33%,
        var(--color-secundario, #FFD600) 33.33% 66.66%,
        var(--mz-turquesa) 66.66% 100%);
}

.cabecera__nombre {
    color: var(--color-secundario, #FFD600);
    font-size: 1.45rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
}

.cabecera__sucursal {
    color: var(--mz-turquesa-claro);
    letter-spacing: 0.04em;
}

.cabecera__logo {
    border: var(--mz-borde) solid var(--color-secundario, #FFD600);
    border-radius: var(--mz-radio);
    background: transparent;
}

/* Los tres atajos: cuadritos de calcomanía sobre el petróleo. */
.accion {
    width: 44px;
    height: 44px;
    background: transparent;
    border: 2px solid #2C6577;
    border-radius: var(--mz-radio);
    color: var(--mz-crema);
}

.accion:hover {
    background: var(--color-primario, #E91E63);
    border-color: var(--color-primario, #E91E63);
    color: #fff;
}

/* ===========================================================================
   3. EL CUERPO: EL RÓTULO «MENÚ» Y EL ORDEN DE LA PÁGINA
   ---------------------------------------------------------------------------
   El rótulo grande del cartel no existe en ninguna plantilla, así que se pinta
   con un ::before del propio <main>. Para que caiga DESPUÉS de la tira de
   promociones y ANTES de las categorías, <main> se vuelve una columna flexible
   y cada pieza lleva su `order`: así no hace falta ni copiar menu.php ni
   depender de que el navegador entienda :has().
   =========================================================================== */

.contenido {
    display: flex;
    flex-direction: column;
    gap: 34px;
    padding-bottom: 30px;
}

/* Los hijos de un contenedor flexible no se encogen por debajo de su
   contenido: sin esto, una barra de ocho categorías ensancharía la página
   entera en vez de desplazarse de lado. */
.chips,
.categoria,
.promos,
.aviso-vacio { min-width: 0; }

.cerrado          { order: 0; }
.promos           { order: 1; }
.contenido::before{ order: 2; }
.chips            { order: 3; }
.categoria        { order: 4; }
.aviso-vacio      { order: 4; }

.contenido::before {
    content: "Menú";
    display: block;
    margin: 6px auto -2px;
    font-family: var(--mz-rotulos);
    font-size: clamp(2.6rem, 14vw, 4rem);
    line-height: 0.9;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-align: center;
    color: var(--color-primario, #E91E63);
    /* El contorno crema separa la palabra del confeti que pasa por detrás. */
    text-shadow:
        2px 2px 0 var(--mz-crema-claro),
        5px 5px 0 var(--mz-petroleo);
}

/* ===========================================================================
   4. LOS CHIPS DE CATEGORÍAS
   ---------------------------------------------------------------------------
   Siguen siendo enlaces a #cat-slug, como en el tema base: si el JavaScript no
   corre, la carta se recorre igual. Aquí solo cambian de aspecto.
   =========================================================================== */

.chips {
    gap: 10px;
    padding: 6px 2px 10px;
    margin: 0 calc(var(--espacio, 16px) * -1);
    padding-left: var(--espacio, 16px);
    padding-right: var(--espacio, 16px);
}

.chip {
    background: var(--mz-petroleo);
    color: var(--mz-crema);
    border: var(--mz-borde) solid var(--mz-petroleo);
    border-radius: var(--mz-radio);
    box-shadow: var(--mz-sombra-chica);
    padding: 9px 15px;
    min-height: 44px;                       /* el mínimo para no fallar el toque */
    font-family: var(--mz-rotulos);
    font-size: 1rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.chip--activo {
    background: var(--color-primario, #E91E63);
    border-color: var(--mz-petroleo);
    color: #fff;
}

/* Se hunde sobre su propia sombra: la respuesta al toque en 140 ms. */
.chip:active {
    transform: translate(3px, 3px);
    box-shadow: 0 0 0 var(--mz-petroleo);
}

.chip__icono { width: 20px; height: 20px; }

/* ===========================================================================
   5. LAS CATEGORÍAS: PANELES ALTERNOS
   ---------------------------------------------------------------------------
   Cada categoría es un cartel pegado sobre el papel: borde de petróleo, sombra
   dura y un rótulo torcido asomando por arriba, como una etiqueta engomada.

   Se alternan crema y petróleo. En el panel oscuro NO se reescribe el color de
   cada texto: se redefinen las variables del tema DENTRO del panel, y todas
   las reglas del sistema que ya usan var(--color-texto) se dan la vuelta
   solas. Es la razón por la que el tema base las usa en todas partes.
   =========================================================================== */

.categoria {
    margin: 0;
    /* Sitio arriba para el rótulo, que se sube a caballo del borde. */
    padding: 34px 15px 18px;
    border: var(--mz-borde) solid var(--mz-petroleo);
    border-radius: var(--mz-radio);
    box-shadow: var(--mz-sombra);
    background: var(--mz-crema);
    scroll-margin-top: 18px;
}

/* Una de cada dos, sobre petróleo. Las variables cambian aquí dentro y con
   ellas cambia todo lo que cuelga: nombres, descripciones, líneas y precios.

   SE CUENTA DESDE EL FINAL, no desde el principio. `nth-of-type` cuenta todas
   las <section> hermanas, y el aviso de «ahora estamos cerrados» también lo
   es: con él, la carta entera se daba la vuelta de color a la hora de cerrar.
   La última categoría, en cambio, es siempre la última <section> de <main>. */
.categoria:nth-last-of-type(odd) {
    background: var(--mz-petroleo);
    --color-texto:       var(--mz-crema);
    --color-texto-suave: #9FC2CC;
    --color-borde:       #1B5062;
    color: var(--mz-crema);
}

/* EL RÓTULO, CENTRADO Y A CABALLO DEL BORDE
   ------------------------------------------
   `width: fit-content` + `margin auto` lo centra midiendo lo que mide el
   nombre, no la ficha: un rótulo de ancho completo dejaría de ser una etiqueta
   engomada y pasaría a ser una barra.

   El margen de arriba negativo lo saca por encima del borde del panel, que es
   de donde cuelga. */
.categoria__titulo {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: -52px auto 18px;
    text-align: center;
    /* El torcido de calcomanía, en reposo. Cuando el letrero se mece, la
       animación manda sobre este `transform`; cuando el sistema pide menos
       movimiento, esto es lo que queda, y queda torcido en vez de recto. */
    transform: rotate(-1.4deg);
    padding: 8px 20px 7px;
    background: var(--color-secundario, #FFD600);
    color: var(--mz-petroleo);
    border: var(--mz-borde) solid var(--mz-petroleo);
    border-radius: var(--mz-radio);
    box-shadow: var(--mz-sombra-chica);
    font-size: 1.5rem;
    line-height: 1.05;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* EL BAMBOLEO DE LETRERO DE CÓMIC
   --------------------------------
   El punto de giro está DIEZ PÍXELES ARRIBA del rótulo, o sea fuera de él:
   así el letrero pivota sobre un clavo imaginario y se mece de verdad, en vez
   de girar sobre su propio centro, que se lee como un tambaleo raro.

   Va lento —3.6 s de ida— porque un adorno permanente que se mueve rápido
   cansa a los tres minutos, y cada categoría entra con un retraso distinto
   para que no se columpien todas al mismo compás. Es `transform` puro: el
   navegador lo mueve sin repintar nada. */
@media (prefers-reduced-motion: no-preference) {
    .categoria__titulo {
        transform-origin: 50% -10px;
        animation: mz-letrero 3.6s ease-in-out infinite alternate;
    }

    .categoria:nth-of-type(2n)     .categoria__titulo { animation-delay: -0.9s; }
    .categoria:nth-of-type(3n)     .categoria__titulo { animation-delay: -1.8s; }
    .categoria:nth-of-type(4n + 1) .categoria__titulo { animation-delay: -2.7s; }
}

@keyframes mz-letrero {
    from { transform: rotate(-2.2deg); }
    to   { transform: rotate(2.2deg);  }
}

/* En el panel oscuro el rótulo va turquesa: el amarillo sobre petróleo se
   pelea con el amarillo del botón de la barra del pedido. */
.categoria:nth-last-of-type(odd) .categoria__titulo {
    background: var(--mz-turquesa);
    box-shadow: 3px 3px 0 var(--mz-petroleo-hondo);
}

.categoria__descripcion {
    margin: -8px 0 14px;
    font-style: italic;
}

/* Modo pestañas (una categoría a la vez). La clase la pone el JavaScript;
   estas dos líneas son las que la hacen efecto y son obligatorias. */
.carta--pestanas .categoria { display: none; }
.carta--pestanas .categoria--visible { display: block; }

/* ===========================================================================
   6. LOS PLATILLOS
   ---------------------------------------------------------------------------
   Un renglón por platillo, con la foto al lado —nunca arriba— y en formato de
   polaroid ladeada. Da igual si la instalación pide 'cuadricula' o 'lista':
   las dos se pintan igual, así que el ajuste de config/theme.php no puede
   descuadrar el diseño.

   El nombre y el precio comparten renglón, la descripción va debajo y el botón
   ocupa todo el ancho. Eso se consigue SIN copiar la plantilla: a
   .platillo__pie se le da `display: contents`, con lo que el precio y el botón
   pasan a ser hijos directos de la rejilla de .platillo__datos y se colocan
   donde haga falta.
   =========================================================================== */

:is(.platillos--cuadricula, .platillos--lista) {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

/* `min-width: 0` NO SOBRA
   ------------------------
   Un elemento dentro de una rejilla no se encoge por debajo de lo que mide su
   contenido, y el precio va en una sola línea: con una tipografía ancha,
   «$185.00» empujaba la tarjeta entera y la foto se salía por el filo derecho
   de la ficha. Esta línea deja que la columna del texto ceda primero, que es
   lo que tiene que ceder. */
:is(.platillos--cuadricula, .platillos--lista) > .platillo {
    min-width: 0;
    display: flex;
    flex-direction: row-reverse;         /* texto primero, foto al final */
    align-items: flex-start;
    gap: 14px;
    padding: 16px 0;
    background: transparent;
    border: 0;
    border-bottom: 2px dashed var(--color-borde);
    border-radius: 0;
    overflow: visible;                   /* la polaroid asoma fuera del renglón */
}

:is(.platillos--cuadricula, .platillos--lista) > .platillo:last-child {
    border-bottom: 0;
    padding-bottom: 4px;
}

/* --- La foto: una polaroid ladeada --------------------------------------- */
/* Cuadrada y con el MISMO recorte que al abrir el platillo (v1.3). El marco es
   un borde, no un fondo: un fondo de color asomaría por detrás de los PNG sin
   fondo y les dibujaría una silueta alrededor. */
:is(.platillos--cuadricula, .platillos--lista) .platillo__foto {
    flex: 0 0 auto;
    width: var(--mz-foto);
    height: var(--mz-foto);
    aspect-ratio: 1 / 1;
    background: transparent;
    border: 4px solid var(--mz-crema-claro);
    border-radius: 2px;
    box-shadow: var(--mz-sombra-chica);
    transform: rotate(2.2deg);
    /* Visible y no recortado: la etiqueta cuelga por fuera de la esquina. La
       foto no se sale igualmente —mide justo el hueco de dentro del marco—, así
       que no hace falta recortar nada. */
    overflow: visible;
}

:is(.platillos--cuadricula, .platillos--lista) .platillo__foto img { border-radius: 1px; }

/* Las nones al otro lado: una pared de fotos todas torcidas igual se lee como
   un error de imprenta. */
:is(.platillos--cuadricula, .platillos--lista) > .platillo:nth-child(even) .platillo__foto {
    transform: rotate(-2.4deg);
}

/* --- El texto ------------------------------------------------------------ */
:is(.platillos--cuadricula, .platillos--lista) .platillo__datos {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 5px 10px;
}

/* Con `contents`, .platillo__pie deja de ser una caja: sus dos hijos —precio y
   botón— se colocan directamente en la rejilla de arriba. */
:is(.platillos--cuadricula, .platillos--lista) .platillo__pie { display: contents; }

:is(.platillos--cuadricula, .platillos--lista) .platillo__nombre {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    /* MEDIDA PENSADA, NO ELEGIDA A OJO
       ---------------------------------
       El nombre y el precio se reparten un renglón de unos 230 px en un
       celular de 390. Con el nombre a 1.15 y el precio a 1.35, «MEZCALTITLÁN»
       ya no cabía en su columna y el navegador lo partía a media palabra:
       «MEZCALTITL / ÁN». Un punto menos en cada uno y la palabra más larga de
       esta carta entra entera. */
    font-size: 1.05rem;
    font-weight: 400;
    letter-spacing: 0.03em;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--mz-turquesa-hondo);
}

.categoria:nth-last-of-type(odd) .platillo__nombre { color: var(--mz-turquesa-claro); }

:is(.platillos--cuadricula, .platillos--lista) .platillo__precio {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    display: flex;
    align-items: baseline;
    gap: 5px;
    white-space: nowrap;
    font-family: var(--mz-rotulos);
    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    /* El rosa de marca tal cual se queda en 3.9:1 sobre el papel crema, y a
       este tamaño todavía no cuenta como texto grande. Se oscurece un punto
       SIN salirse del color del panel: sigue siendo el rosa que el dueño
       eligió, solo que un tono más hondo. La primera línea es el respaldo para
       el navegador que no entienda color-mix. */
    color: var(--color-primario, #E91E63);
    color: color-mix(in srgb, var(--color-primario, #E91E63) 78%, #3B0016);
}

/* Sobre el panel oscuro el rosa de marca se queda corto de contraste: se
   aclara lo justo para pasar de 3:1 a 5:1 sin dejar de ser el mismo rosa. */
.categoria:nth-last-of-type(odd) .platillo__precio { color: var(--mz-rosa-claro); }

:is(.platillos--cuadricula, .platillos--lista) .platillo__descripcion {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 0.86rem;
    -webkit-line-clamp: 3;
}

.platillo__desde { text-transform: uppercase; letter-spacing: 0.06em; }

/* --- El botón de agregar ------------------------------------------------- */
/* En la plantilla es una sola «+». Aquí se le añade el texto con `content`,
   que es cosa de aspecto: el `aria-label` de la plantilla sigue diciendo
   «Agregar <platillo>», que es lo que se lee en voz alta. */
:is(.platillos--cuadricula, .platillos--lista) .platillo__agregar {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: start;
    width: auto;
    height: auto;
    min-height: 44px;
    margin-top: 6px;
    padding: 8px 16px;
    background: var(--color-primario, #E91E63);
    color: #fff;
    border: var(--mz-borde) solid var(--mz-petroleo);
    border-radius: var(--mz-radio);
    box-shadow: var(--mz-sombra-chica);
    font-family: var(--mz-rotulos);
    font-size: 0.95rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.platillo__agregar::after { content: " Añadir al ring"; }

.platillo__agregar:active {
    transform: translate(3px, 3px);
    box-shadow: 0 0 0 var(--mz-petroleo);
}

/* La etiqueta sobre la foto: engomada en la esquina y torcida al revés que la
   polaroid, para que se lea aunque la foto esté inclinada. */
/* Engomada en la esquina de abajo y torcida al revés que la polaroid, para
   que se lea derecha aunque la foto esté ladeada. */
.etiqueta {
    top: auto;
    left: auto;
    right: -8px;
    bottom: -8px;
    transform: rotate(-4deg);
    padding: 3px 7px;
    border: 2px solid var(--mz-petroleo);
    border-radius: 3px;
    box-shadow: 2px 2px 0 var(--mz-petroleo);
    font-family: var(--mz-rotulos);
    font-size: 0.66rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.etiqueta--destacado { background: var(--color-secundario, #FFD600); color: var(--mz-petroleo); }
.etiqueta--agotado   { background: var(--mz-petroleo); color: var(--mz-crema); }

.platillo--agotado { opacity: 0.5; }

/* --- El platillo sin foto ------------------------------------------------ */
/* Sin foto NO se dibuja marco: eso lo decide la plantilla base y está bien.
   Aquí solo se recupera el ancho completo del texto. */
.platillo--sinmarco .platillo__datos { padding-top: 0; }
:is(.platillos--cuadricula, .platillos--lista) > .platillo--sinmarco { padding-left: 0; }

/* --- El último de la fila ------------------------------------------------ */
/* El tema base le da un trato aparte al platillo que se queda solo en su
   renglón: le pone la foto al lado y le cambia la medida. Aquí TODAS las
   tarjetas ya son así, de modo que esas reglas solo hace falta empatarlas para
   que el último no cambie de redondeo ni de tamaño. Se repite la clase
   .platillos para igualarles el peso. */
.platillos.platillos--cuadricula > .platillo:last-child > .platillo__foto,
.platillos.platillos--lista > .platillo:last-child > .platillo__foto {
    width: var(--mz-foto);
    height: var(--mz-foto);
    border-radius: 2px;
}

.platillos.platillos--cuadricula > .platillo:last-child,
.platillos.platillos--lista > .platillo:last-child {
    align-items: flex-start;
    gap: 14px;
    padding: 16px 0 4px;
}

/* --- Celular angosto: el precio baja de renglón --------------------------- */
/* Por debajo de 380 px el nombre y el precio ya no caben lado a lado: al
   nombre le quedan unos 70 px y una palabra como «MEZCALTITLÁN» se parte a la
   mitad. Antes de llegar a eso, el precio se pasa al renglón de abajo y el
   nombre se queda con la ficha entera. La foto también se achica un punto. */
@media (max-width: 379px) {
    :root { --mz-foto: 78px; }

    :is(.platillos--cuadricula, .platillos--lista) .platillo__datos {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    :is(.platillos--cuadricula, .platillos--lista) .platillo__precio {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
    }

    :is(.platillos--cuadricula, .platillos--lista) .platillo__descripcion {
        grid-column: 1;
        grid-row: 3;
        margin-top: 3px;
    }

    :is(.platillos--cuadricula, .platillos--lista) .platillo__agregar {
        grid-column: 1;
        grid-row: 4;
    }
}

/* --- Pantalla ancha ------------------------------------------------------ */
@media (min-width: 860px) {
    :is(.platillos--cuadricula, .platillos--lista) {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 26px;
    }

    /* El último, si queda solo en su renglón, lo ocupa entero: media columna
       vacía al lado se lee como un error de armado. */
    :is(.platillos--cuadricula, .platillos--lista) > .platillo:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    /* Con dos columnas, el penúltimo también pierde su línea de abajo. */
    :is(.platillos--cuadricula, .platillos--lista) > .platillo:nth-last-child(2):nth-child(odd) {
        border-bottom: 0;
    }

    .categoria { padding: 34px 24px 22px; }
    :root { --mz-foto: 112px; }
}

/* ===========================================================================
   7. BOTONES
   =========================================================================== */

.boton {
    background: var(--mz-crema-claro);
    color: var(--mz-petroleo);
    border: var(--mz-borde) solid var(--mz-petroleo);
    border-radius: var(--mz-radio);
    box-shadow: var(--mz-sombra-chica);
    min-height: 46px;
    font-family: var(--mz-rotulos);
    font-size: 1.05rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.15s ease;
}

.boton--primario {
    background: var(--color-primario, #E91E63);
    color: #fff;
}

.boton--ancho { box-shadow: var(--mz-sombra); }

/* Se hunde sobre su sombra en vez de encogerse. Dura 140 ms y no bloquea. */
.boton:active {
    transform: translate(3px, 3px);
    box-shadow: 0 0 0 var(--mz-petroleo);
}

.boton--ancho:active { box-shadow: 0 0 0 var(--mz-petroleo); transform: translate(5px, 5px); }

/* ===========================================================================
   8. LA TIRA DE PROMOCIONES
   =========================================================================== */

.promos { margin: 14px 0 0; }

.promo {
    border: var(--mz-borde) solid var(--mz-petroleo);
    border-radius: var(--mz-radio);
    box-shadow: var(--mz-sombra);
    background: transparent;
    overflow: hidden;
}

.promos__punto { background: var(--mz-petroleo); opacity: 0.28; }
.promos__punto--activo { background: var(--color-primario, #E91E63); opacity: 1; }

/* ===========================================================================
   9. LA BARRA DEL PEDIDO
   ---------------------------------------------------------------------------
   Es lo único que se queda fijo en pantalla, así que lleva la cinta tricolor
   arriba: se reconoce de un vistazo aunque el pulgar la tape a medias.
   =========================================================================== */

/* SIN EL DEGRADADO DE ABAJO
   --------------------------
   El tema base desvanece la carta por debajo de la barra con un degradado al
   color del fondo. Con el papel moteado eso deja una franja lisa y sucia justo
   donde el papel tiene grano, y se nota más que lo que resuelve. La barra es
   una calcomanía flotando sobre la carta y se separa con su propio borde y su
   sombra, que para eso están. */
.bolsa {
    background: none;
    padding: 0 10px 10px;
}

/* QUE QUEPA EN UN CELULAR ANGOSTO
   -------------------------------
   Iba apretada: el alfiler comía 44 px, el nombre del local se cortaba a la
   mitad y el total quedaba por debajo del botón. El alfiler se va —el nombre
   del local ya dice dónde se está pidiendo, y repetirlo con un dibujo cuesta
   justo el espacio que le falta al total—, y el resto se aprieta. */
.bolsa__caja {
    position: relative;
    gap: 10px;
    padding: 10px 11px;
    background: var(--mz-petroleo);
    border: var(--mz-borde) solid var(--mz-petroleo-hondo);
    border-radius: var(--mz-radio);
    box-shadow: var(--mz-sombra-chica);
    --color-texto:       var(--mz-crema);
    --color-texto-suave: #9FC2CC;
    color: var(--mz-crema);
    overflow: hidden;
}

.bolsa__caja::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 5px;
    background: linear-gradient(
        to right,
        var(--color-primario, #E91E63) 0 33.33%,
        var(--color-secundario, #FFD600) 33.33% 66.66%,
        var(--mz-turquesa) 66.66% 100%);
}

.bolsa__marca { display: none; }

.bolsa__sucursal {
    color: var(--color-secundario, #FFD600);
    font-family: var(--mz-rotulos);
    font-size: 0.88rem;
    line-height: 1.15;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* El total NO se parte ni se corta: es el dato por el que se mira la barra. */
.bolsa__resumen {
    color: var(--mz-crema);
    font-size: 0.9rem;
    white-space: nowrap;
}

.bolsa__resumen [data-bolsa-total] { font-weight: 800; }

/* En un celular de 320 —los que siguen llegando— el nombre del local, el
   total y el botón no caben con estas medidas. Todo baja un punto: nada se
   esconde y el total, que es el dato de la barra, se sigue leyendo entero. */
@media (max-width: 359px) {
    .bolsa__caja     { gap: 7px; padding: 9px 8px; }
    .bolsa__sucursal { font-size: 0.8rem; }
    .bolsa__resumen  { font-size: 0.8rem; }
    .bolsa__boton    { padding: 0 8px; font-size: 0.84rem; letter-spacing: 0.01em; }
}

.bolsa__boton {
    flex: 0 0 auto;
    background: var(--color-primario, #E91E63);
    color: #fff;
    border: 2px solid var(--mz-crema);
    border-radius: var(--mz-radio);
    min-height: 44px;
    padding: 0 13px;
    font-family: var(--mz-rotulos);
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ===========================================================================
   10. LAS VENTANAS: POPUP, PEDIDO Y CHECKOUT
   ---------------------------------------------------------------------------
   Todas de petróleo, con las variables dadas vuelta por dentro para que el
   texto que el sistema pinta con var(--color-texto) salga claro sin tener que
   listar cada regla.
   =========================================================================== */

.modal__caja,
.carrito__caja {
    background: var(--mz-petroleo);
    border: var(--mz-borde) solid var(--mz-petroleo-hondo);
    --color-texto:       var(--mz-crema);
    --color-texto-suave: #9FC2CC;
    --color-borde:       #1B5062;
    --color-superficie:  var(--mz-petroleo-hondo);
    color: var(--mz-crema);
}

.modal__fondo { background: rgba(5, 32, 42, 0.72); }

/* La ✕ del popup cae sobre la foto del platillo, que puede ser de cualquier
   color: se le pone fondo propio y filo crema para que se vea sobre todas. */
.modal__cerrar {
    background: var(--mz-petroleo);
    border: 2px solid var(--mz-crema);
    width: 38px;
    height: 38px;
}

.carrito__titulo,
.modal__titulo,
.enviado__titulo {
    color: var(--color-secundario, #FFD600);
    font-size: 1.35rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.carrito__cabecera { border-bottom: 2px dashed #1B5062; }

/* EL RECUADRO AMARILLO DE «TU PEDIDO»
   ------------------------------------
   Solo en el cajón del pedido: las hojas de sucursales y de horario comparten
   esta clase y ahí el recuadro no pinta nada.

   El «¿Listo para el festín?» no existe en el HTML —el sistema solo escribe el
   título— y entra por CSS. Es adorno, no información: si algún día molesta, se
   borra esta regla y no se rompe nada. */
#panel-carrito .carrito__cabecera {
    margin: 14px 14px 4px;
    padding: 9px 12px;
    background: var(--mz-petroleo-hondo);
    border: 3px solid var(--color-secundario, #FFD600);
    border-bottom: 3px solid var(--color-secundario, #FFD600);
    border-radius: var(--mz-radio);
    align-items: flex-start;
}

#panel-carrito .carrito__titulo {
    text-align: left;
    line-height: 1.05;
}

/* EL PIE DEL CAJÓN, TAMBIÉN EN PAPEL
   -----------------------------------
   El mismo ticket crema que el «Resumen» del checkout, para que la cuenta se
   vea igual en las dos pantallas por las que pasa el pedido. Las variables se
   dan la vuelta aquí dentro y con ellas se va todo el texto a tinta oscura. */
#panel-carrito .carrito__pie {
    margin: 0 14px 14px;
    padding: 15px 15px 14px;
    background: var(--mz-crema);
    border: var(--mz-borde) solid var(--mz-petroleo-hondo);
    border-radius: var(--mz-radio);
    box-shadow: var(--mz-sombra-chica);
    --color-texto:       var(--mz-petroleo);
    --color-texto-suave: #55707B;
    --color-borde:       #C9B79A;
    color: var(--mz-petroleo);
}

#panel-carrito .carrito__renglon {
    font-family: var(--mz-rotulos);
    font-size: 1.2rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding-bottom: 10px;
    margin-bottom: 4px;
    border-bottom: 3px solid var(--mz-petroleo);
}

#panel-carrito .carrito__renglon strong {
    color: var(--color-primario, #E91E63);
    color: color-mix(in srgb, var(--color-primario, #E91E63) 78%, #3B0016);
    font-size: 1.35rem;
}

#panel-carrito .carrito__titulo::after {
    content: "¿Listo para el festín?";
    display: block;
    margin-top: 3px;
    font-family: var(--fuente-textos, sans-serif);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--mz-rosa-claro);
}

.carrito__lineas { padding: 12px 14px 4px; }

/* CADA PLATILLO, UNA FICHA
   -------------------------
   El tema base pinta los renglones separados por una línea. Aquí cada uno es
   su propia tarjeta, y dentro se reparte así:

       ┌──────┬─────────────────────────┬───┐
       │      │ NOMBRE                  │ 🗑 │
       │ foto ├─────────────────────────┴───┤
       │      │  [− 2 +]              $650  │
       └──────┴─────────────────────────────┘

   Con rejilla y no con flex porque el HTML que escribe el sistema tiene la
   ✕ colgando del <article>, fuera de las dos columnas de texto: colocando
   cada pieza por su fila y su columna se arma el dibujo de arriba sin tocar
   una línea de theme.js.

   El separador de la fila de abajo va como `border-top` de .linea__derecha,
   que es la que cruza de la foto al filo derecho de la ficha. */
.linea {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 0;
    margin-bottom: 12px;
    padding: 12px;
    background: var(--mz-petroleo-hondo);
    border: 2px solid #1B5062;
    border-radius: var(--mz-radio);
}

.linea:last-child { border-bottom: 2px solid #1B5062; margin-bottom: 4px; }

.linea__mini  { grid-column: 1; grid-row: 1 / span 2; margin-right: 12px; }
.linea__datos { grid-column: 2; grid-row: 1; min-width: 0; }

/* De lado, y al revés que el HTML: el contador se escribe después del precio
   y aquí va antes, que es donde lo busca el pulgar. */
.linea__derecha {
    grid-column: 2 / -1;
    grid-row: 2;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 9px;
    padding-top: 9px;
    border-top: 2px dashed #2C6577;
}

.linea__nombre {
    color: var(--mz-crema);
    font-size: 1.05rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.linea__opciones,
.linea__nota { color: #9FC2CC; font-size: 0.82rem; }

.linea__precio {
    color: var(--mz-rosa-claro);
    font-size: 1.15rem;
    font-family: var(--mz-rotulos);
    letter-spacing: 0.02em;
}

/* LA ✕ SE VUELVE UN BOTE DE BASURA
   ---------------------------------
   El sistema escribe una «✕» dentro del botón. Se apaga con `font-size: 0` y
   el dibujo entra como imagen de fondo; el `aria-label` de theme.js sigue
   diciendo «Quitar <platillo> del pedido», que es lo que se lee en voz alta,
   así que esto es solo aspecto. */
.linea__quitar {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    margin-left: 10px;
    width: 38px;
    height: 38px;
    font-size: 0;
    border: 2px solid #2C6577;
    border-radius: var(--mz-radio);
    background-color: transparent;
    background-image: url('../img/basura.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 19px 19px;
    opacity: 1;
}

.linea__quitar:hover {
    background-color: var(--color-primario, #E91E63);
    border-color: var(--color-primario, #E91E63);
}

/* El contador se estiraba a todo lo ancho: .linea__datos es un bloque normal
   y el contador es `display: flex`, así que ocupaba la línea entera. Con
   `max-content` mide lo que miden sus tres piezas. */
.contador--chico { width: max-content; }

.linea__mini {
    background: transparent;
    border: 3px solid var(--mz-crema-claro);
    border-radius: 2px;
    transform: rotate(-2deg);
}

/* --- La cuenta: el papel dentro de la ventana ---------------------------- */
/* En crema y con las variables dadas vuelta otra vez: es el ticket. */
.cuenta {
    background: var(--mz-crema);
    border: var(--mz-borde) solid var(--mz-petroleo-hondo);
    border-radius: var(--mz-radio);
    box-shadow: var(--mz-sombra-chica);
    padding: 16px 16px 12px;
    margin-top: 20px;
    --color-texto:       var(--mz-petroleo);
    --color-texto-suave: #55707B;
    --color-borde:       #C9B79A;
    color: var(--mz-petroleo);
}

.cuenta::before {
    content: "Resumen";
    display: block;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 3px solid var(--mz-petroleo);
    font-family: var(--mz-rotulos);
    font-size: 1.2rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--mz-petroleo);
}

.carrito__renglon--total {
    border-top: 3px solid var(--mz-petroleo);
    padding-top: 10px;
    margin-top: 6px;
    font-family: var(--mz-rotulos);
    font-size: 1.25rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.carrito__renglon--total strong { color: var(--color-primario, #E91E63); font-size: 1.5rem; }

.carrito__caja .boton--primario,
.modal__caja .boton--primario { border-color: var(--mz-crema); }

/* Salvo cuando el botón ya está sobre el ticket crema: ahí el filo crema se
   pierde contra el papel y el que hace falta es el de tinta. */
#panel-carrito .carrito__pie .boton--primario { border-color: var(--mz-petroleo-hondo); }

.carrito__pie {
    background: var(--mz-petroleo);
    border-top: 3px solid var(--mz-petroleo-hondo);
}

.carrito__pie--solo-boton {
    background: linear-gradient(to top, var(--mz-petroleo) 74%, transparent);
    border-top: 0;
}

/* --- Los grupos de opciones del popup ------------------------------------ */
.grupo__titulo {
    color: var(--mz-rosa-claro);
    font-family: var(--mz-rotulos);
    font-size: 1.1rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.grupo + .grupo { border-top: 2px dashed #1B5062; }

/* Cada opción, una casilla de calcomanía. `:has()` es lo que permite pintar la
   casilla ENTERA según su radio: sin él la opción se sigue viendo y se sigue
   pudiendo marcar, solo que sin el relleno amarillo. */
.opcion {
    border: 2px solid #2C6577;
    border-bottom: 2px solid #2C6577;
    border-radius: var(--mz-radio);
    margin-bottom: 8px;
    padding: 12px 14px;
    min-height: 46px;
}

.opcion:last-child { border-bottom: 2px solid #2C6577; }

.opcion:has(input:checked) {
    background: var(--color-secundario, #FFD600);
    border-color: var(--mz-petroleo-hondo);
    box-shadow: var(--mz-sombra-chica);
    color: var(--mz-petroleo);
}

.opcion:has(input:checked) .opcion__nombre,
.opcion:has(input:checked) .opcion__precio { color: var(--mz-petroleo); font-weight: 700; }

.opcion__nombre {
    font-family: var(--mz-rotulos);
    font-size: 1.02rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.opcion__precio { color: var(--mz-rosa-claro); }

/* --- La foto al abrir el platillo ---------------------------------------- */
/* Mismo recorte cuadrado y mismo fondo transparente que en la carta (v1.3). */
/* El mismo marco de polaroid que en la carta, sin ladear: a este tamaño una
   foto torcida se lee como un error, no como un adorno. El marco es un borde y
   no un fondo, para que no asome por detrás de los PNG sin fondo. */
.modal__foto {
    background: transparent;
    border: 5px solid var(--mz-crema-claro);
    border-radius: 3px;
    box-shadow: var(--mz-sombra-chica);
}

/* --- Campos del checkout -------------------------------------------------- */
/* 16 px de letra o más: por debajo de eso, el iPhone acerca la pantalla al
   tocar el campo y la persona pierde de vista el formulario. */
.campo-c__control,
.nota__campo {
    background: var(--mz-crema-claro);
    color: var(--mz-petroleo);
    border: 2px solid var(--mz-petroleo-hondo);
    border-radius: var(--mz-radio);
    font-size: 1rem;
    min-height: 46px;
}

.campo-c__control:focus,
.nota__campo:focus {
    outline: 3px solid var(--color-secundario, #FFD600);
    outline-offset: 1px;
}

.campo-c__etiqueta {
    font-family: var(--mz-rotulos);
    font-size: 1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    /* El rosa de marca sobre petróleo se queda en 3:1, y una etiqueta de
       formulario no cuenta como texto grande. Aquí dentro va el rosa aclarado,
       que pasa de 5:1 sin dejar de ser el mismo rosa. */
    color: var(--mz-rosa-claro);
}

.segmentado {
    background: transparent;
    border: 0;
    gap: 10px;
    padding: 0;
}

.segmentado__opcion span {
    background: var(--mz-crema-claro);
    color: var(--mz-petroleo);
    border: var(--mz-borde) solid var(--mz-petroleo-hondo);
    border-radius: var(--mz-radio);
    min-height: 46px;
    font-family: var(--mz-rotulos);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.segmentado__opcion input:checked + span {
    background: var(--color-secundario, #FFD600);
    color: var(--mz-petroleo);
    box-shadow: var(--mz-sombra-chica);
}

.contador {
    background: var(--mz-petroleo-hondo);
    border: var(--mz-borde) solid var(--mz-crema);
    border-radius: var(--mz-radio);
}

.contador--chico { border-width: 2px; border-color: #2C6577; }

/* CÍRCULO CHICO, BOTÓN GRANDE
   ----------------------------
   El círculo rosa mide 28 px, que es lo que se pidió; el botón mide 40, que es
   lo que se toca. Los 6 px de diferencia son relleno transparente:
   `background-clip: content-box` recorta el color al hueco de dentro y deja el
   resto invisible pero pulsable.

   Por eso el color se escribe SIEMPRE como `background-color` y nunca con el
   atajo `background`: el atajo reinicia el recorte y el círculo volvería a
   llenar el botón entero.

   40 Y NO 44. Es lo único del tema por debajo de los 44 px del cuaderno, y va
   a propósito por lo que pasa al fallar: subir de más se deshace con el botón
   de al lado, que está pegado, y quitar del todo tiene su propio bote de
   basura, lejos de estos dos. El mínimo de la norma WCAG 2.2 son 24. Con 44,
   el recuadro del contador quedaba enorme y medio vacío alrededor de un
   círculo de 28, y en el popup empujaba el «Agregar $650.00» a dos renglones. */
.contador__boton {
    width: 40px;
    height: 40px;
    padding: 6px;
    background-color: var(--color-primario, #E91E63);
    background-clip: content-box;
    color: #fff;
    border: 0;
    border-radius: 50%;
    font-size: 1.05rem;
}

.contador--chico { padding: 0; }

.contador__valor {
    color: var(--mz-turquesa-claro);
    font-family: var(--mz-rotulos);
    font-size: 1.2rem;
    min-width: 1.4rem;
}

/* --- El aviso flotante y el de cerrado ------------------------------------ */
.aviso {
    background: var(--mz-petroleo);
    border: var(--mz-borde) solid var(--color-secundario, #FFD600);
    border-radius: var(--mz-radio);
    color: var(--mz-crema);
}

.cerrado {
    background: var(--color-secundario, #FFD600);
    color: var(--mz-petroleo);
    border: var(--mz-borde) solid var(--mz-petroleo);
    border-radius: var(--mz-radio);
    box-shadow: var(--mz-sombra-chica);
}

/* El titular en su propio renglón: pegado al detalle se leía como una sola
   frase corrida —«ahora mismo estamos cerrados abrimos mañana a las 13:00»—. */
.cerrado__titulo {
    display: block;
    font-family: var(--mz-rotulos);
    font-size: 1.1rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.sucursal-op { border-bottom: 2px dashed #1B5062; }
.sucursal-op__nombre {
    font-family: var(--mz-rotulos);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 1.05rem;
}

.horario-dia { border-bottom: 2px dashed #1B5062; }

/* ===========================================================================
   11. EL PIE, CON SU PAPEL PICADO
   ---------------------------------------------------------------------------
   Los banderines son una imagen de fondo repetida en horizontal: un SVG de
   1.5 KB que escala sin pixelarse y no añade ni un elemento al HTML.
   =========================================================================== */

.pie {
    position: relative;
    background: var(--mz-petroleo);
    border-top: 0;
    padding-top: 62px;
    background-image: url('../img/papel-picado.svg');
    background-repeat: repeat-x;
    background-position: top left;
    background-size: 160px 50px;
    --color-texto:       var(--mz-crema);
    --color-texto-suave: #9FC2CC;
    --color-borde:       #1B5062;
    color: var(--mz-crema);
}

.pie__marca-nombre,
.pie__subtitulo {
    font-family: var(--mz-rotulos);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-secundario, #FFD600);
}

.pie__marca-nombre { font-size: 1.6rem; }

.pie__logo {
    border: var(--mz-borde) solid var(--color-secundario, #FFD600);
    border-radius: var(--mz-radio);
    padding: 6px;
}

.pie__lema { font-style: italic; }

.pie__linea { border-top: 2px dashed #1B5062; }

.pie__red {
    background: transparent;
    border: 2px solid #2C6577;
    border-radius: var(--mz-radio);
    color: var(--mz-crema);
}

.pie__red:hover {
    background: var(--color-primario, #E91E63);
    border-color: var(--color-primario, #E91E63);
    color: #fff;
}

.pie__enlace { color: var(--mz-turquesa-claro); }

.pie__estado--abierto { color: #5BE38B; }

/* Los créditos del desarrollador: cambian de color, no desaparecen. */
.creditos-dev { color: #7FA3AE; }
.creditos-dev:hover { color: var(--color-secundario, #FFD600); }

/* ===========================================================================
   12. MENOS MOVIMIENTO, SI EL SISTEMA LO PIDE
   ---------------------------------------------------------------------------
   Mucha gente lo activa por mareo o migraña. No es una preferencia estética.
   =========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .chip,
    .boton,
    .platillo__agregar { transition: none; }

    .chip:active,
    .boton:active,
    .boton--ancho:active,
    .platillo__agregar:active { transform: none; }
}

/* ===========================================================================
   13. EL ROSA QUE LLEVA LETRA BLANCA
   ---------------------------------------------------------------------------
   Blanco sobre el rosa de marca da 4.34:1, un pelo por debajo del 4.5 que hace
   falta para leer una carta al sol. En vez de cambiar el color de la marca o
   de renunciar al blanco, se oscurece el rosa un 14% SOLO donde lleva letra
   encima: sigue siendo el color que el dueño eligió en su panel, un tono más
   hondo, y pasa a 5.3:1.

   Va al final para pisar a las reglas de arriba, y con dos declaraciones: el
   navegador que no entienda `color-mix` se queda con la primera y el botón
   sigue siendo rosa.
   =========================================================================== */

.chip--activo,
:is(.platillos--cuadricula, .platillos--lista) .platillo__agregar,
.boton--primario,
.bolsa__boton,
.contador__boton {
    background-color: var(--color-primario, #E91E63);
    background-color: color-mix(in srgb, var(--color-primario, #E91E63) 86%, #2A0010);
}

/* ===========================================================================
   14. EL CANDADO
   ---------------------------------------------------------------------------
   Va al final y no es negociable. El popup, el carrito y el checkout son
   `position: fixed` a pantalla completa: si cualquier regla de arriba les
   ganara un `display`, seguirían capturando todos los toques estando
   invisibles y la carta se vería perfecta sin responder a nada.
   =========================================================================== */

[hidden] { display: none !important; }