/* ===========================================================================
   KRONCH FRIED CHICKEN — hoja del tema
   ---------------------------------------------------------------------------
   Solo lo que CAMBIA respecto del tema base. La hoja del sistema entra sola y
   antes que esta (lo hace layout.php); aquí no se importa nada.

   De dónde sale cada color y cada tipografía
   ------------------------------------------
   De las variables que el panel imprime en :root. Este tema no escribe ni un
   color de marca a mano: define sus propios nombres —más cortos de leer— a
   partir de los del panel, y con valor de respaldo por si alguno faltara.

       --kr-rojo  ← --color-primario     los trazos de brocha, los botones
       --kr-oro   ← --color-secundario   los acentos, "los más pedidos"

   Así el dueño cambia su rojo desde Apariencia y la carta entera lo sigue:
   los trazos, los chips, el botón de pedir y las brasas del fondo.

   Mobile-first: 390 px primero, después se ensancha.
   =========================================================================== */

:root {
    --kr-rojo:       var(--color-primario, #E01B22);
    --kr-oro:        var(--color-secundario, #F2B705);
    --kr-negro:      var(--color-fondo, #0A0A0A);
    --kr-carbon:     var(--color-superficie, #131313);

    /* La línea punteada que lleva del nombre al precio, como en una carta
       impresa. Se saca del color de borde del panel para que en una paleta
       clara no quede una línea negra sobre blanco. */
    --kr-guia:       var(--color-borde, #2A2A2A);

    /* El aire del tema. Un poco más apretado que el base: esta carta tiene
       muchos renglones cortos y el espacio de sobra los separa de más. */
    --espacio:       15px;
}

/* Obligatorias, las dos. La primera hace que el ajuste de tamaño de letra del
   panel mueva TODO el sitio de forma pareja; la segunda es la que impide que
   el popup y el carrito se queden capturando toques estando invisibles. */
html { font-size: var(--escala-texto, 100%); }
[hidden] { display: none !important; }

body {
    background: var(--kr-negro);
    letter-spacing: 0.005em;
}

/* Los títulos de esta carta son de pizarra de pollería: mayúsculas, muy
   gruesos y apretados. La familia sigue siendo la que el dueño eligió. */
h1, h2, h3,
.cabecera__nombre,
.categoria__titulo,
.platillo__nombre,
.carrito__titulo,
.modal__titulo,
.aviso-vacio__titulo {
    font-family: var(--fuente-titulos, inherit);
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 0.015em;
    font-stretch: 87.5%;
}

/* ---------------------------------------------------------------------------
   LAS CAPAS
   ---------------------------------------------------------------------------
   Las brasas del fondo son una capa fija a pantalla completa. Para que se
   queden DETRÁS de la carta sin recurrir a z-index negativo —que se cuela por
   debajo del fondo de la página en cuanto un navegador decide crear un
   contexto de apilado— se hace al revés: la capa se queda en 0 y el contenido
   sube a 1. Explícito y sin sorpresas.

   Los flotantes del sistema (barra 50, popup 60, aviso 70) quedan por encima
   de todo esto sin tocar nada.
   --------------------------------------------------------------------------- */
.cabecera,
.contenido,
.pie { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------------
   CABECERA
   --------------------------------------------------------------------------- */
.cabecera {
    padding: 12px var(--espacio);
    border-bottom: 1px solid var(--kr-guia);
    background: var(--kr-negro);
}

/* El logo va en un disco claro. Un logotipo con letras blancas sobre el negro
   de la página se pierde; el disco lo despega y es además como se usa la marca
   en su rotulación. El color sale del texto del panel para que en una paleta
   clara el disco no quede blanco sobre blanco. */
.cabecera__logo {
    width: 46px; height: 46px;
    background: var(--color-texto, #FFF);
    padding: 3px;
    border: 2px solid var(--kr-rojo);
}

/* EL NOMBRE SE PARTE EN DOS RENGLONES EN VEZ DE CORTARSE
   ------------------------------------------------------
   El base lo deja en un renglón con puntos suspensivos, y con el botón rojo de
   WhatsApp al lado eso deja "KRONCH F..." en una pantalla de 390 px. Un
   restaurante cuyo nombre no cabe entero en su propia carta se ve mal, así que
   aquí se parte en dos renglones y se recorta solo si hiciera falta un tercero.
   Desde 480 px vuelve a su tamaño de siempre. */
.cabecera { gap: 10px; }
.cabecera__marca { gap: 10px; }

.cabecera__nombre {
    font-size: 0.84rem;
    line-height: 1.1;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (min-width: 480px) {
    .cabecera__nombre { font-size: 1.05rem; }
}

/* EN BLOQUE, NO EN FLEX
   ----------------------
   El base la deja en `display: flex` con `text-overflow: ellipsis`, y esos dos
   no se llevan: en un contenedor flex los puntos suspensivos no salen, así que
   un nombre largo —"Colonia Proterritorio"— se cortaba a hachazo contra el
   botón de WhatsApp. En bloque vuelven a aparecer. */
.cabecera__sucursal {
    display: block;
    text-transform: uppercase;
    font-size: 0.62rem;
    letter-spacing: 0.09em;
    color: var(--kr-oro);
    padding-right: 4px;
}
.cabecera__sucursal .punto {
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
    background: var(--kr-oro);
}

/* --- Los atajos ---------------------------------------------------------- */

.accion {
    border-color: var(--kr-guia);
    background: var(--kr-carbon);
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    font-weight: 800;
}
.accion:hover { color: var(--kr-oro); border-color: var(--kr-oro); }

/* EL WHATSAPP ES EL BOTÓN ROJO, TAMBIÉN EN CELULAR
   ------------------------------------------------
   En el diseño del cliente, "Pedir por WhatsApp" es lo único que compite con
   el logo, y con razón: es a donde va el 90% de la gente que entra por un
   enlace compartido. Los otros dos atajos se quedan como icono; este se pinta
   entero desde la primera pantalla.

   Se reconoce por su dirección y no por una clase nueva, así el header lo
   sigue pintando el tema base y este cliente sigue recibiendo sus
   correcciones. */
.cabecera__acciones .accion[href*="wa.me"] {
    background: var(--kr-rojo);
    border-color: var(--kr-rojo);
    color: #FFF;
    padding: 0 12px;
    width: auto;
    box-shadow: 0 6px 18px -8px var(--kr-rojo);
}
.cabecera__acciones .accion[href*="wa.me"]:hover {
    color: #FFF;
    border-color: var(--kr-rojo);
    filter: brightness(1.08);
}
.cabecera__acciones .accion[href*="wa.me"] .accion__texto {
    display: inline;
    margin-left: 6px;
    font-size: 0.66rem;
    letter-spacing: 0.05em;
}

@media (min-width: 480px) {
    .cabecera__acciones .accion[href*="wa.me"] .accion__texto { font-size: 0.74rem; }
}

/* ---------------------------------------------------------------------------
   PROMOCIONES — la portada de la carta
   ---------------------------------------------------------------------------
   En el diseño, la foto de arriba no es un banner dentro de una caja: llena la
   pantalla de orilla a orilla y el negro de la página se la come por abajo.
   Eso es lo que hace el degradado: no hay que retocar ninguna foto.
   --------------------------------------------------------------------------- */
.promos {
    margin: 0 calc(var(--espacio) * -1) 18px;
    position: relative;
}

.promo {
    border-radius: 0;
    background: transparent;
    /* Más alto que el 2:1 del panel: la foto de portada de una pollería es
       vertical y con el 2:1 se queda en una tira. La foto no se deforma
       —sigue con object-fit: cover—, se ve más de ella. */
    aspect-ratio: 4 / 3;
}

.promos__tira { padding: 0; }

@media (min-width: 700px) {
    .promo { flex-basis: 100%; aspect-ratio: 21 / 9; }
}

/* El fundido a negro del pie de la portada. Va sobre la tira y no dentro de
   cada banner para que no se corte al deslizar de uno a otro. */
.promos::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 45%;
    background: linear-gradient(to bottom, transparent, var(--kr-negro) 92%);
    pointer-events: none;
}

.promos__puntos {
    position: relative;
    margin-top: -18px;
    z-index: 1;
}
.promos__punto          { background: rgba(255, 255, 255, 0.28); }
.promos__punto--activo  { background: var(--kr-oro); }

/* ===========================================================================
   LOS MÁS PEDIDOS
   ---------------------------------------------------------------------------
   La franja de arriba, justo después de la portada y antes de las categorías.
   Lleva los platillos que el dueño marcó como FAVORITOS en su panel: alitas y
   boneless hoy, lo que él quiera mañana, sin que nadie toque un archivo.

   Es una tira que se desliza con el dedo, no una cuadrícula: en un celular una
   cuadrícula de seis favoritos empuja las categorías fuera de la pantalla, y
   entonces lo destacado deja de ser un atajo y se vuelve un estorbo.
   =========================================================================== */

.destacados {
    margin: 0 calc(var(--espacio) * -1) 22px;
    padding: 16px 0 18px;
    background:
        radial-gradient(120% 90% at 50% 0%,
            color-mix(in srgb, var(--kr-rojo) 16%, transparent), transparent 70%);
    border-top: 1px solid color-mix(in srgb, var(--kr-oro) 22%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--kr-oro) 22%, transparent);
}

.destacados__cabecera {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 var(--espacio) 12px;
}

.destacados__titulo {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1;
    color: var(--color-texto, #FFF);
}

.destacados__llama {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    color: var(--kr-oro);
}

.destacados__nota {
    margin: 0;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--kr-oro);
    font-weight: 800;
    margin-left: auto;
    white-space: nowrap;
}

.destacados__tira {
    display: flex;
    gap: 10px;
    padding: 0 var(--espacio);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    /* Igual que las otras dos tiras del sitio: sin esto, al llegar al tope el
       gesto se encadena y la página entera se va de lado. */
    overscroll-behavior-x: contain;
}
.destacados__tira::-webkit-scrollbar { display: none; }

.destacados .platillo {
    flex: 0 0 47%;
    scroll-snap-align: start;
    background: var(--kr-carbon);
    border: 1px solid color-mix(in srgb, var(--kr-oro) 30%, transparent);
    border-radius: var(--radio, 14px);
}

@media (min-width: 700px)  { .destacados .platillo { flex-basis: 30%; } }
@media (min-width: 1000px) { .destacados .platillo { flex-basis: 23%; } }

/* Un favorito sin foto se queda al lado de los que sí la tienen, y en una tira
   todas las tarjetas miden lo mismo de alto: sin nada que poner arriba, se le
   ve el hueco. En vez de inventarle un recuadro gris —eso no se hace nunca— se
   le pone un fondo de la casa y el texto se acomoda abajo, junto al precio,
   que es lo que se viene a ver. */
/* El pie del platillo trae `margin-top: auto` del base —así el precio siempre
   queda abajo—, y ese margen se come todo el hueco: sin quitarlo, el nombre se
   queda pegado arriba por más `justify-content` que se le ponga. */
.destacados .platillo--sinmarco .platillo__datos { justify-content: flex-end; }
.destacados .platillo--sinmarco .platillo__pie   { margin-top: 6px; }

.destacados .platillo--sinmarco {
    justify-content: flex-end;
    background:
        radial-gradient(90% 70% at 50% 15%,
            color-mix(in srgb, var(--kr-rojo) 30%, transparent), transparent 72%),
        var(--kr-carbon);
}

.destacados .platillo__nombre { font-size: 0.88rem; }
.destacados .platillo__precio { font-size: 1.05rem; }

/* En la tira, la etiqueta "Favorito" sobra: la franja entera se llama "los más
   pedidos". Se cambia por el número de orden, que sí dice algo — y lo cuenta
   el CSS, así que el dueño puede marcar tres favoritos o siete sin que nadie
   renumere nada.

   El número va sobre la TARJETA y no sobre la foto a propósito: un favorito
   sin foto no dibuja el marco (esa regla no se toca), y si el número colgara
   de ahí sería el único de la tira sin numerar. */
.destacados__tira { counter-reset: kr-top; }

.destacados .platillo {
    position: relative;
    counter-increment: kr-top;
}

.destacados .etiqueta--destacado { display: none; }

.destacados .platillo::before {
    content: counter(kr-top);
    position: absolute;
    top: 0; left: 0;
    z-index: 2;
    min-width: 26px;
    padding: 3px 7px 4px;
    border-radius: var(--radio, 14px) 0 var(--radio-chico, 10px) 0;
    background: var(--kr-oro);
    color: var(--kr-negro);
    font-family: var(--fuente-titulos, inherit);
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1;
    text-align: center;
}

.destacados .platillo__foto::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 3px;
    background: var(--kr-oro);
}

/* ===========================================================================
   CHIPS DE CATEGORÍAS
   ---------------------------------------------------------------------------
   Se quedan pegados arriba. En el tema base no lo están porque una carta corta
   no lo necesita; esta tiene ocho categorías y ochenta renglones, y sin la
   barra a la vista hay que subir hasta el principio cada vez que se quiere
   cambiar de sección.

   `scroll-margin-top` de .categoria queda igual de alto que la barra: es de
   donde el JavaScript del sistema saca cuánto aire dejar al llegar (lo lee del
   CSS a propósito, para que un tema con barra pegada no tenga que tocar nada
   más).
   =========================================================================== */

.chips {
    position: sticky;
    top: 0;
    z-index: 5;
    gap: 7px;
    margin: 0 calc(var(--espacio) * -1) 6px;
    padding: 11px var(--espacio) 11px;
    background: var(--kr-negro);
    border-bottom: 1px solid var(--kr-guia);
}

.chip {
    background: var(--kr-carbon);
    border-color: var(--kr-guia);
    text-transform: uppercase;
    font-size: 0.74rem;
    letter-spacing: 0.07em;
    font-weight: 800;
    padding: 9px 15px;
}

.chip--activo {
    background: var(--kr-rojo);
    border-color: var(--kr-rojo);
    color: #FFF;
}


/* ===========================================================================
   CATEGORÍAS — la placa del título
   ---------------------------------------------------------------------------
   El nombre va sobre una placa inclinada, como una etiqueta estampada. Antes
   era un brochazo dibujado en SVG: la idea estaba bien pero el resultado se
   leía como una mancha, y arrastraba un trazo suelto debajo que parecía un
   error de impresión más que un adorno.

   Esto es lo mismo pero limpio, y encima sin ningún archivo: la placa es un
   pseudo-elemento con tres capas de degradado, así que no hay una imagen más
   que descargar y escala perfecta a cualquier tamaño de letra.

     1. El filo de color del lado izquierdo, que es lo que le da el aire de
        etiqueta impresa. En las placas rojas es oro y en las oro es rojo.
     2. Un rayado diagonal casi imperceptible. Es lo que evita que un
        rectángulo de color plano se vea como un botón de formulario.
     3. El degradado de arriba abajo, que le da volumen: la luz cae encima.

   Van alternando rojo y oro, como en la carta impresa del cliente. Y el color
   sigue saliendo de las variables del panel: el día que cambie su rojo,
   cambian las ocho placas.

   El `isolation: isolate` es lo que mantiene el z-index negativo DENTRO del
   título; sin él, en algunos navegadores la placa se va detrás del fondo de la
   página y el título se queda sin nada debajo.
   =========================================================================== */

.categoria__titulo {
    position: relative;
    isolation: isolate;
    display: inline-block;
    margin: 0 0 14px;
    padding: 10px 26px 11px 24px;
    font-size: 1.32rem;
    line-height: 1.12;
    color: var(--color-texto, #FFF);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

.categoria__titulo::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    /* La inclinación es lo que la despega de un recuadro cualquiera. Ocho
       grados: se nota que está inclinada y todavía se lee de un golpe. */
    transform: skewX(-8deg);
    border-radius: 2px;
    background:
        linear-gradient(90deg, var(--kr-oro) 0 7px, transparent 7px),
        repeating-linear-gradient(112deg,
            rgba(255, 255, 255, 0.06) 0 3px, transparent 3px 11px),
        linear-gradient(180deg,
            color-mix(in srgb, #FFF 15%, var(--kr-rojo)) 0%,
            var(--kr-rojo) 46%,
            color-mix(in srgb, #000 20%, var(--kr-rojo)) 100%);
    box-shadow:
        0 12px 26px -14px #000,
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Las pares en oro. Con el texto en negro, que es lo único que se lee sobre
   amarillo a pleno sol. */
.categoria:nth-of-type(even) .categoria__titulo {
    color: var(--kr-negro);
    text-shadow: none;
}

.categoria:nth-of-type(even) .categoria__titulo::before {
    background:
        linear-gradient(90deg, var(--kr-rojo) 0 7px, transparent 7px),
        repeating-linear-gradient(112deg,
            rgba(0, 0, 0, 0.06) 0 3px, transparent 3px 11px),
        linear-gradient(180deg,
            color-mix(in srgb, #FFF 18%, var(--kr-oro)) 0%,
            var(--kr-oro) 46%,
            color-mix(in srgb, #000 15%, var(--kr-oro)) 100%);
}

.categoria__descripcion {
    margin: 0 0 14px;
    font-size: 0.82rem;
    font-style: italic;
    color: var(--color-texto-suave);
}

/* LA SECCIÓN, EN REJILLA
   ----------------------
   Tres renglones: la placa del nombre arriba con todo el ancho para ella, la
   imagen de la categoría en grande debajo con la descripción al lado, y la
   lista de platillos abajo de orilla a orilla.

   La imagen va a la IZQUIERDA, debajo de la placa y alineada con ella. A la
   derecha dejaba un agujero en cuanto una categoría no traía descripción: la
   mitad izquierda del renglón vacía y la imagen sola en la esquina. Además es
   como está en la carta impresa del cliente — la foto a un lado y los precios
   al otro.

   Es rejilla y no una imagen flotando en posición absoluta porque así el alto
   se reserva SOLO: la imagen empuja hacia abajo lo que haga falta y ningún
   renglón de la carta le pasa por debajo. Con posición absoluta habría que
   adivinar cuánto espacio dejar arriba, y ese cálculo se rompe en cuanto una
   categoría no trae descripción.

   Sin imagen, el pseudo-elemento no existe (display: none), la segunda columna
   se queda en cero y esto se ve exactamente igual que antes. */
.categoria {
    margin: 30px 0;
    scroll-margin-top: 74px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "titulo titulo"
        "imagen desc"
        "lista  lista";
    align-items: start;
    column-gap: 16px;
}

/* En modo pestañas, el JavaScript del sistema enseña la categoría con
   `display: block`. Sin esta línea, al cambiar de pestaña la rejilla se
   desarmaría y la imagen se iría a un renglón suelto. */
.carta--pestanas .categoria--visible { display: grid; }

/* Centrados contra la imagen. Cuando la imagen es más alta que el nombre y su
   descripción —una categoría sin descripción, por ejemplo— el hueco que sobra
   se reparte arriba y abajo en vez de quedar todo debajo del texto, que es lo
   que se ve como un agujero. */
/* EL TÍTULO OCUPA SU PROPIO RENGLÓN
   ---------------------------------
   Compartía renglón con la imagen, y al agrandar la imagen le quedaban 160 px:
   "Queques & Postres" se partía en tres líneas dentro de su placa. Con el
   renglón entero para él, el nombre nunca se parte por culpa del adorno — y la
   imagen puede ser tan grande como haga falta, que es de lo que se trataba.

   `justify-self: start` es lo que hace que la placa siga midiendo lo que mide
   el nombre: sin eso, al ser elemento de la rejilla se estiraría de orilla a
   orilla y dejaría de ser una etiqueta. */
.categoria__titulo      { grid-area: titulo; justify-self: start; }
/* A media altura de la imagen, que es su vecina. Una descripción de un renglón
   pegada al techo de un bloque de 190 px se lee como suelta. */
.categoria__descripcion { grid-area: desc; align-self: center; }
.platillos              { grid-area: lista; min-width: 0; }

/* ===========================================================================
   LA IMAGEN DE LA CATEGORÍA
   ---------------------------------------------------------------------------
   Grande y junto al nombre, como en la carta impresa. La dirección se la manda
   partials/categorias.php en `--kr-cat-img`, y `--kr-cat-hay` es el
   interruptor: sin él —la categoría no tiene imagen— esto no se dibuja y no
   ocupa nada.

   `contain` y no `cover`: la imagen de una categoría suele ser un dibujo o un
   producto recortado, no una fotografía de fondo. Recortarla le comería
   justamente lo que se quiso enseñar. Se ve completa, ocupe lo que ocupe.
   =========================================================================== */

:root {
    /* Grande de verdad: casi la mitad del ancho de un celular. Crece con la
       pantalla y lleva tope arriba y abajo para que ni desaparezca en un
       teléfono angosto ni se vuelva un cartel en un monitor. */
    --kr-cat-tam: clamp(160px, 47vw, 215px);
}

.categoria::before {
    content: '';
    grid-area: imagen;
    display: var(--kr-cat-hay, none);
    align-self: start;
    justify-self: start;
    margin-bottom: 8px;
    width: var(--kr-cat-tam);
    height: var(--kr-cat-tam);
    margin-top: -4px;
    background: var(--kr-cat-img) center / contain no-repeat;
    /* La sombra sigue el contorno del dibujo, no su caja: un PNG recortado
       sobre negro se despega sin que se le vea un rectángulo detrás. */
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.65));
    pointer-events: none;
}

/* EN PANTALLA ANCHA, LA IMAGEN NO SE VA A LA ORILLA
   -------------------------------------------------
   Con la carta a 1100 px, dejar la imagen pegada al borde derecho la separa
   tanto del nombre que dejan de leerse como una sola cosa, y entre medias
   queda una franja vacía. Se le pone tope al ancho del texto —que además se
   lee mejor: una descripción de 1100 px de largo no la sigue nadie— y la
   imagen se queda justo al lado. La tercera columna se lleva lo que sobre. */
@media (min-width: 700px) {
    :root { --kr-cat-tam: 240px; }

    .categoria {
        column-gap: 28px;
        grid-template-columns: auto minmax(0, 28rem) minmax(0, 1fr);
        grid-template-areas:
            "titulo titulo titulo"
            "imagen desc   resto"
            "lista  lista  lista";
    }
}

/* ===========================================================================
   LOS RENGLONES DE LA CARTA
   ---------------------------------------------------------------------------
   El tema entrega la carta en LISTA (lo pide theme.json). Es lo que corresponde
   a esta carta: setenta renglones cortos —"10 piezas", "8 piezas", "6 piezas"—
   donde lo que se compara es el precio, no la foto. Una cuadrícula obligaría a
   una foto por renglón, y de la mitad no hay.

   La guía punteada del nombre al precio es de la carta impresa del cliente y
   hace un trabajo real: en un renglón de "TIRAS CRISPY (3 salsas) ... $389" el
   ojo no se pierde entre el nombre y su número.

   La reordenación es solo del CSS. La plantilla del platillo sigue siendo la
   del sistema, con su nombre, su descripción y su pie tal cual: aquí se
   acomodan, no se reescriben.
   =========================================================================== */

.platillos--lista .platillo {
    padding: 13px 0;
    border-bottom: 1px dashed var(--kr-guia);
    gap: 13px;
}

.platillos--lista .platillo__foto {
    width: 70px;
    height: 70px;
    border-radius: var(--radio-chico, 10px);
    border: 1px solid var(--kr-guia);
}

/* EL RENGLÓN: nombre · · · · · precio. Y la descripción debajo.
   ---------------------------------------------------------------------------
   Rejilla de TRES columnas: el nombre, la guía y el precio. Cada una con su
   sitio, y por eso aguanta lo que le echen:

     · La del precio se mide por su contenido y nunca se parte. Un precio
       cortado en dos renglones no se lee, y es el dato por el que la gente
       vino.
     · La de la guía tiene un mínimo de 34 px —los 18 de márgenes más un tramo
       de puntos que se vea—, así que la guía existe siempre y nunca queda
       reducida a nada en un renglón de nombre largo.
     · La del nombre es la que cede. Un nombre largo —"Papas a la francesa"—
       se parte en dos renglones y se acomoda debajo de sí mismo, mientras la
       guía y el precio se quedan alineados con el PRIMER renglón. Es como se
       ve en una carta impresa.

   Antes esto era flex con salto de línea y el precio se caía al renglón de
   abajo en cuanto el nombre crecía: quedaba el nombre solo arriba y
   "· · · $366" debajo, que no se parece a nada.

   Todo es CSS: la plantilla del platillo sigue siendo la del sistema. */
.platillos--lista .platillo__datos {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(34px, 1fr) auto;
    grid-template-areas:
        "nombre guia precio"
        "desc   desc desc";
    align-items: baseline;
    gap: 0;
    padding: 0;
}

.platillos--lista .platillo__nombre {
    grid-area: nombre;
    min-width: 0;
    font-size: 0.95rem;
    line-height: 1.25;
}

/* La guía. Es un pseudo-elemento del contenedor y no del nombre: así vive en su
   propia columna y no depende de cuánto ocupe el texto de al lado. */
.platillos--lista .platillo__datos::before {
    content: '';
    grid-area: guia;
    height: 0;
    margin: 0 9px 5px;
    border-bottom: 2px dotted var(--kr-guia);
}

.platillos--lista .platillo__pie {
    grid-area: precio;
    margin-top: 0;
    padding-top: 0;
    justify-content: flex-end;
    gap: 8px;
}

.platillos--lista .platillo__descripcion {
    grid-area: desc;
    margin-top: 5px;
    font-size: 0.78rem;
    line-height: 1.45;
}

/* Sin foto no hay marco —esa regla del sistema no se toca—, pero tampoco hace
   falta el respiro de arriba que el base le pone: aquí el renglón ya trae el
   suyo. */
.platillos--lista .platillo--sinmarco .platillo__datos { padding-top: 0; }

/* En lista, la pastilla de "Favorito" no cabe sobre una foto de 78 px: se
   convierte en una esquina dorada. El platillo agotado SÍ conserva su
   pastilla, porque eso hay que poder leerlo. */
.platillos--lista .etiqueta--destacado {
    top: 0; left: 0;
    padding: 0;
    width: 0; height: 0;
    overflow: hidden;
    /* Sin fondo: el color lo ponen los bordes. Con `background` puesto se
       pinta la caja del borde ENTERA y en vez de una esquina sale un
       cuadrado amarillo tapando la foto. */
    background: none;
    border-top: 20px solid var(--kr-oro);
    border-right: 20px solid transparent;
    border-radius: 0;
    text-indent: -999px;
}

.platillos--lista .etiqueta--agotado {
    top: 4px; left: 4px;
    font-size: 0.58rem;
    padding: 2px 6px;
}

/* --- Nombre y precio ------------------------------------------------------ */

.platillo__nombre { font-size: 0.9rem; }

.platillo__precio {
    /* Blanco y no rojo. En el diseño el rojo es de los brochazos y del botón
       de pedir; si además fuera el de los ochenta precios, dejaría de señalar
       nada. Los números en versalita tabular para que las columnas de precios
       de una misma categoría queden alineadas solas. */
    color: var(--color-texto, #FFF);
    font-family: var(--fuente-titulos, inherit);
    font-size: 1.05rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.platillo__desde {
    color: var(--kr-oro);
    text-transform: uppercase;
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    font-weight: 800;
}

.platillo__agregar {
    background: var(--kr-rojo);
    border-radius: var(--radio-boton, 999px);
    font-weight: 700;
    box-shadow: 0 5px 14px -6px var(--kr-rojo);
}

.etiqueta--destacado { background: var(--kr-oro); color: var(--kr-negro); }

/* --- La tarjeta, cuando la carta va en cuadrícula -------------------------- */
/* El dueño puede cambiar la disposición desde el panel; si lo hace, la
   cuadrícula tiene que verse igual de suya que la lista. */

.platillo {
    background: var(--kr-carbon);
    border-color: var(--kr-guia);
}

.platillos--cuadricula .platillo__pie { padding-top: 6px; }

/* --- El resalte de un platillo compartido --------------------------------- */
/* Lo pone el JavaScript del sistema al llegar por /platillo/<algo> en una carta
   sin pedidos. El base lo pinta con su color; aquí, con el oro de la casa. */
.platillo--senalado {
    outline: 2px solid var(--kr-oro);
    outline-offset: 3px;
}

/* ===========================================================================
   BOTONES, POPUP, PEDIDO Y CHECKOUT
   ---------------------------------------------------------------------------
   Aquí solo se cambia la ropa. Los ganchos del sistema (data-*), la estructura
   y el comportamiento son los del tema base y no se tocan: es lo que hace que
   este cliente siga recibiendo cada arreglo del carrito y del checkout sin que
   nadie vuelva a abrir su tema.
   =========================================================================== */

.boton {
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 800;
    font-family: var(--fuente-titulos, inherit);
}

.boton--primario {
    background: var(--kr-rojo);
    color: #FFF;
    box-shadow: 0 8px 22px -12px var(--kr-rojo);
}

.modal__caja,
.carrito__caja {
    background: var(--kr-carbon);
    border-top: 3px solid var(--kr-rojo);
}

.modal__cerrar { background: rgba(0, 0, 0, 0.55); }

.modal__titulo   { font-size: 1.2rem; }
.grupo__titulo   { text-transform: uppercase; letter-spacing: 0.05em; }
.opcion__precio  { font-variant-numeric: tabular-nums; }
.opcion__precio--libre { color: var(--kr-oro); }

.nota__campo,
.campo-c__control {
    background: var(--kr-negro);
    border-color: var(--kr-guia);
    /* 16 px o más. Menos que eso y el iPhone acerca la pantalla al tocar el
       campo, y ya no se ve el resto del formulario. */
    font-size: 1rem;
}

.segmentado__opcion input:checked + span {
    background: var(--kr-rojo);
    color: #FFF;
}

.carrito__renglon--total strong { color: var(--kr-oro); }
.cupon__exito { color: var(--kr-oro); }

/* --- La barra del pedido -------------------------------------------------- */

.bolsa__caja {
    background: var(--kr-carbon);
    border: 1px solid color-mix(in srgb, var(--kr-oro) 30%, transparent);
}

.bolsa__sucursal {
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    color: var(--kr-oro);
}

/* EL BOTÓN, MÁS ANGOSTO QUE EN EL BASE
   ------------------------------------
   "VER PEDIDO" en mayúsculas y con la tipografía de títulos mide bastante más
   que "Ver pedido", y en una pantalla de 360 px lo que se comía era el total:
   quedaba "2 productos — $58…" tapado por el botón. Se le baja el cuerpo y el
   espaciado, y el resumen recupera su sitio. */
.bolsa__boton {
    background: var(--kr-rojo);
    color: #FFF;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    padding: 12px 15px;
    font-family: var(--fuente-titulos, inherit);
}

.bolsa__marca { width: 34px; height: 34px; }

.bolsa--unica .bolsa__resumen { font-size: 0.86rem; }

/* Red por si acaso: con un pedido de cinco cifras el resumen se recorta antes
   que meterse debajo del botón. */
.bolsa__resumen { overflow: hidden; text-overflow: ellipsis; }

/* --- Aviso de cerrado y de servicio --------------------------------------- */

.cerrado {
    background: color-mix(in srgb, var(--kr-rojo) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--kr-rojo) 45%, transparent);
}
.cerrado__titulo { text-transform: uppercase; letter-spacing: 0.04em; }

/* ===========================================================================
   EL PIE
   ---------------------------------------------------------------------------
   Se despega de la carta con un borde rasgado, como el impreso. El rasgado es
   el mismo truco del brochazo: un SVG de máscara pintado con la variable de
   superficie del panel. Si el dueño cambia su paleta, el papel se rasga en su
   color nuevo.
   =========================================================================== */

.pie {
    background: var(--kr-carbon);
    border-top: 0;
    margin-top: 56px;
    padding-top: 40px;
}

/* EL FILO ROJO DEL RASGADO
   ------------------------
   Dos capas con el MISMO recorte, una 3 px más arriba que la otra. La de abajo
   es roja y la de arriba del color del pie; lo único que se ve de la roja son
   esos 3 px asomando, y como el recorte es el mismo, la línea roja sigue el
   rasgón curva por curva. Dibujar esa línea a mano habría sido un SVG más,
   otra descarga y un archivo que mantener sincronizado con este. */
.pie::before,
.pie::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 26px;
    -webkit-mask: url('../img/rasgado.svg') repeat-x bottom / 1200px 100%;
            mask: url('../img/rasgado.svg') repeat-x bottom / 1200px 100%;
    pointer-events: none;
}

.pie::after {
    top: -25px;
    z-index: -1;
    background: var(--kr-rojo);
}

.pie::before {
    top: -22px;
    background: var(--kr-carbon);
}

.pie__logo {
    width: 92px; height: 92px;
    background: var(--color-texto, #FFF);
    border-radius: 50%;
    padding: 6px;
    object-fit: contain;
    border: 3px solid var(--kr-rojo);
}

.pie__lema {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.72rem;
    color: var(--kr-oro);
}

.pie__subtitulo {
    color: var(--kr-oro);
    letter-spacing: 0.13em;
}

.pie__dato--fuerte { text-transform: uppercase; letter-spacing: 0.04em; }

/* El teléfono es lo más grande del pie después del logo. En el impreso del
   cliente ocupa un renglón entero, y con razón: mucha gente entra a la carta,
   ve lo que quiere y llama. */
.pie__bloque .pie__dato a {
    text-decoration: none;
    font-weight: 700;
}
.pie__bloque .pie__dato a:hover { color: var(--kr-oro); }

/* El teléfono, del tamaño que tiene en el impreso: mucha gente entra a la
   carta, ve lo que quiere y llama. Se reconoce por `tel:` y no por una clase
   nueva, así el pie lo sigue pintando el tema base. */
.pie__dato a[href^="tel:"] {
    font-family: var(--fuente-titulos, inherit);
    font-size: 1.4rem;
    font-weight: 900;
    letter-spacing: 0.01em;
    color: var(--color-texto, #FFF);
}

/* Rojo y subrayado, un enlace suelto en el pie se lee como un error. En oro se
   lee como lo que es: algo más que se puede abrir. Y con aire alrededor: en el
   base es un renglón de 20 px de alto y con el pulgar se falla. */
.pie__enlace {
    color: var(--kr-oro);
    padding: 9px 6px;
    display: inline-block;
}

.pie__red {
    border-color: var(--kr-guia);
    background: var(--kr-negro);
}
.pie__red:hover { border-color: var(--kr-oro); color: var(--kr-oro); }

.pie__estado--abierto { color: var(--kr-oro); }

/* ===========================================================================
   LAS BRASAS DEL FONDO
   ---------------------------------------------------------------------------
   Chispas que bajan despacio, como las que saltan del pollo recién frito en la
   foto de la portada. Es lo único que se mueve solo en toda la carta, y está
   medido para que no se note más de la cuenta: son adorno, no un espectáculo.

   Las cuatro reglas del adorno, cumplidas:
     · La capa es `fixed`, `pointer-events: none` y `aria-hidden` en el HTML:
       jamás se roba un toque destinado a un botón.
     · Va en z-index 0 y la carta en 1, así que nunca tapa un precio.
     · Solo se animan `transform` y `opacity`. El navegador las mueve sin
       repintar nada; animar `top` daría el arrastre a tirones de siempre.
     · TODO el movimiento vive dentro de `prefers-reduced-motion: no-preference`
       y las chispas nacen invisibles. Quien pidió menos movimiento en su
       teléfono —por mareo o por migraña— no ve ninguna, ni quieta ni en
       movimiento: la carta le queda limpia.

   Son 18 y no cuarenta. Cada una es un elemento compuesto en la GPU; en un
   teléfono de gama baja, cuarenta capas se notan al desplazar la carta, que es
   exactamente lo contrario de lo que busca un adorno.
   =========================================================================== */

.kr-brasas {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    contain: strict;
}

.kr-brasa {
    position: absolute;
    top: -8vh;
    width: var(--kr-tam, 6px);
    height: var(--kr-tam, 6px);
    /* Nacen apagadas. Sin la animación —porque el sistema pidió menos
       movimiento— no se ve ni una, que es justo lo que se quiere. */
    opacity: 0;
}

.kr-brasa::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%,
                var(--kr-oro) 0%,
                var(--kr-rojo) 62%,
                color-mix(in srgb, var(--kr-rojo) 0%, transparent) 74%);
    box-shadow: 0 0 7px 1px color-mix(in srgb, var(--kr-oro) 40%, transparent);
}

/* Una de cada cuatro es una migaja del empanizado en vez de una brasa: se cae
   más despacio, no brilla y da variedad sin agregar ni un elemento más. */
.kr-brasa:nth-child(4n)::before {
    border-radius: 40% 55% 45% 60%;
    background: color-mix(in srgb, var(--kr-oro) 62%, #7A4A12);
    box-shadow: none;
}

@keyframes kr-caer {
    0%   { transform: translate3d(0, 0, 0); opacity: 0; }
    8%   { opacity: var(--kr-brillo, 0.85); }
    88%  { opacity: var(--kr-brillo, 0.85); }
    100% { transform: translate3d(0, 116vh, 0); opacity: 0; }
}

/* El vaivén va en el hijo para poder sumarlo a la caída: dos `transform` en el
   mismo elemento se pisan, en dos elementos anidados se componen. De paso le
   pone el parpadeo, que es lo que hace que parezca lumbre y no confeti. */
@keyframes kr-vaiven {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(var(--kr-deriva, 14px), 0, 0) scale(0.72); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
}

@media (prefers-reduced-motion: no-preference) {
    .kr-brasa {
        animation: kr-caer var(--kr-dur, 16s) linear var(--kr-tar, 0s) infinite;
    }
    .kr-brasa::before {
        animation: kr-vaiven var(--kr-vai, 4s) ease-in-out var(--kr-tar, 0s) infinite;
    }
}

/* La llama de "los más pedidos" respira. Muy poco y muy despacio: es un guiño,
   no un aviso parpadeante. */
@keyframes kr-latir {
    0%, 100% { transform: scale(1);    opacity: 0.9; }
    50%      { transform: scale(1.09); opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
    .destacados__llama { animation: kr-latir 2.6s ease-in-out infinite; }
}

/* Y el candado de siempre, por si alguna regla de arriba se escapara. */
@media (prefers-reduced-motion: reduce) {
    .kr-brasas { display: none; }
    .destacados__llama { animation: none; }
}

/* --- Cada chispa con su sitio, su tamaño y su paso ------------------------- */
.kr-brasa:nth-child(1)  { left: 1.0%; --kr-tam: 8px; --kr-dur: 22.8s; --kr-tar: 9.5s; --kr-deriva: -18px; --kr-vai: 4.1s; --kr-brillo: 0.57; }
.kr-brasa:nth-child(2)  { left: 9.5%; --kr-tam: 8px; --kr-dur: 18.8s; --kr-tar: 8.4s; --kr-deriva: 34px; --kr-vai: 4.5s; --kr-brillo: 0.8; }
.kr-brasa:nth-child(3)  { left: 12.1%; --kr-tam: 5px; --kr-dur: 24.3s; --kr-tar: 5.7s; --kr-deriva: 34px; --kr-vai: 4.0s; --kr-brillo: 0.81; }
.kr-brasa:nth-child(4)  { left: 20.1%; --kr-tam: 5px; --kr-dur: 15.1s; --kr-tar: 12.0s; --kr-deriva: -12px; --kr-vai: 3.7s; --kr-brillo: 0.74; }
.kr-brasa:nth-child(5)  { left: 23.2%; --kr-tam: 5px; --kr-dur: 13.4s; --kr-tar: 4.9s; --kr-deriva: 34px; --kr-vai: 6.3s; --kr-brillo: 0.63; }
.kr-brasa:nth-child(6)  { left: 32.9%; --kr-tam: 6px; --kr-dur: 24.7s; --kr-tar: 1.7s; --kr-deriva: 26px; --kr-vai: 5.4s; --kr-brillo: 0.5; }
.kr-brasa:nth-child(7)  { left: 36.5%; --kr-tam: 8px; --kr-dur: 17.7s; --kr-tar: 15.6s; --kr-deriva: 26px; --kr-vai: 6.0s; --kr-brillo: 0.68; }
.kr-brasa:nth-child(8)  { left: 40.2%; --kr-tam: 6px; --kr-dur: 21.1s; --kr-tar: 8.7s; --kr-deriva: -12px; --kr-vai: 4.8s; --kr-brillo: 0.5; }
.kr-brasa:nth-child(9)  { left: 48.7%; --kr-tam: 4px; --kr-dur: 16.6s; --kr-tar: 2.1s; --kr-deriva: -18px; --kr-vai: 5.6s; --kr-brillo: 0.5; }
.kr-brasa:nth-child(10)  { left: 52.9%; --kr-tam: 4px; --kr-dur: 18.5s; --kr-tar: 17.5s; --kr-deriva: -18px; --kr-vai: 4.9s; --kr-brillo: 0.65; }
.kr-brasa:nth-child(11)  { left: 58.3%; --kr-tam: 6px; --kr-dur: 18.4s; --kr-tar: 14.9s; --kr-deriva: -12px; --kr-vai: 4.7s; --kr-brillo: 0.56; }
.kr-brasa:nth-child(12)  { left: 65.6%; --kr-tam: 6px; --kr-dur: 13.9s; --kr-tar: 2.6s; --kr-deriva: 26px; --kr-vai: 4.1s; --kr-brillo: 0.65; }
.kr-brasa:nth-child(13)  { left: 71.0%; --kr-tam: 6px; --kr-dur: 25.3s; --kr-tar: 7.6s; --kr-deriva: -12px; --kr-vai: 5.5s; --kr-brillo: 0.62; }
.kr-brasa:nth-child(14)  { left: 74.9%; --kr-tam: 5px; --kr-dur: 16.9s; --kr-tar: 3.4s; --kr-deriva: 26px; --kr-vai: 5.0s; --kr-brillo: 0.81; }
.kr-brasa:nth-child(15)  { left: 78.6%; --kr-tam: 4px; --kr-dur: 13.5s; --kr-tar: 5.6s; --kr-deriva: -26px; --kr-vai: 5.1s; --kr-brillo: 0.58; }
.kr-brasa:nth-child(16)  { left: 88.2%; --kr-tam: 5px; --kr-dur: 25.9s; --kr-tar: 2.0s; --kr-deriva: -18px; --kr-vai: 5.7s; --kr-brillo: 0.45; }
.kr-brasa:nth-child(17)  { left: 90.5%; --kr-tam: 7px; --kr-dur: 16.4s; --kr-tar: 4.5s; --kr-deriva: 18px; --kr-vai: 5.4s; --kr-brillo: 0.6; }
.kr-brasa:nth-child(18)  { left: 97.0%; --kr-tam: 5px; --kr-dur: 13.4s; --kr-tar: 16.6s; --kr-deriva: 26px; --kr-vai: 6.2s; --kr-brillo: 0.79; }

/* ===========================================================================
   PANTALLA ANCHA — la carta a dos columnas
   ---------------------------------------------------------------------------
   En un monitor, un renglón de lado a lado deja mil píxeles de puntitos entre
   "Boneless 1 kilo" y su precio: la guía deja de guiar y se vuelve un adorno
   que estorba. A dos columnas mide lo que mide en el impreso del cliente, y de
   paso la carta entera cabe casi de una vista.

   El 90% de los pedidos llegan del celular, así que esto entra tarde a
   propósito: por debajo de 900 px no cambia nada.
   =========================================================================== */

@media (min-width: 900px) {
    .platillos--lista {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 46px;
    }

    /* En una sola columna el último renglón no lleva línea abajo porque cierra
       la categoría. En dos, el "último" es el de la columna derecha y quitarle
       la línea dejaría la izquierda con una raya suelta. */
    .platillos--lista .platillo:last-child { border-bottom: 1px dashed var(--kr-guia); }
}