/* ===========================================================================
   WILKIN'S — Wings · Pub · Sports
   ---------------------------------------------------------------------------
   Hoja del tema. NO trae la del sistema: layout.php pide las dos por separado
   —primero la de `default`, después esta— justamente para que aquí solo se
   escriba lo que cambia. Nada de @import.

   La idea: un pub irlandés de noche. Madera oscura, cuero, pan de oro y un
   trébol verde. El oro y el verde NO están escritos aquí: son
   --color-primario y --color-secundario, los que el dueño elige en el panel.
   El día que cambie el dorado, cambia todo el tema con él.

   Cómo está ordenado:

       1. Materiales del pub          los tonos de madera, cuero y oro
       2. Las tres reglas de la casa  escala, [hidden] y el aire de la barra
       3. El fondo                    madera, viñeta y la lluvia de monedas
       4. La cabecera                 la barra del pub
       5. Las categorías              chips de posavasos y rótulos de pizarrón
       6. La carta                    tarjetas de cuero con marco dorado
       7. Botones y monedas           la acción principal, acuñada
       8. Promociones                 el marco dorado del banner
       9. La barra del pedido         siempre a la vista, abajo
      10. Ventanas                    popup, carrito y checkout
      11. El pie                      el tablón de la entrada
      12. Estados                     cerrado, agotado, vacío
      13. Movimiento                  y su interruptor
   =========================================================================== */


/* ===========================================================================
   1. MATERIALES DEL PUB
   ---------------------------------------------------------------------------
   El panel manda tres colores: primario, secundario y fondo. Lo que el panel
   NO manda —superficie, borde y los dos tonos de texto— lo pone cada tema, y
   es donde se decide de qué está hecho el sitio. Aquí, de madera y cuero.
   =========================================================================== */

:root {
    /* --- Lo que el sistema deja a cargo del tema -------------------------- */
    --color-texto:        #F6ECD4;   /* crema de barril, no blanco de oficina */
    --color-texto-suave:  #BFAC8C;
    --color-superficie:   #241C13;   /* cuero de los gabinetes */
    --color-borde:        #4A3925;
    --espacio:            16px;

    /* --- El oro. SALE DEL PANEL ------------------------------------------- */
    /* Un solo color de marca y, a partir de él, el reflejo y la sombra que
       convierten una superficie plana en pan de oro. Los valores escritos son
       el respaldo para el navegador que no sepa calcular; dos líneas más abajo
       se recalculan desde --color-primario. */
    --wk-oro:        var(--color-primario, #D6A22E);
    --wk-oro-luz:    #F7E2A2;
    --wk-oro-sombra: #7A5310;
    --wk-brillo:     rgba(214, 162, 46, 0.16);
    --wk-brillo-2:   rgba(214, 162, 46, 0.09);
    --wk-canto:      rgba(214, 162, 46, 0.34);

    /* El trébol, también del panel. */
    --wk-trebol:     var(--color-secundario, #4B9B3F);

    /* Tinta oscura para el texto que va ENCIMA del oro. Un dorado con letras
       blancas no se lee ni a la sombra de una sombrilla; con letras casi
       negras pasa los 4.5:1 de contraste con cualquier dorado razonable. */
    --wk-tinta:      #16100A;

    /* LA TEXTURA DEL FONDO — sin una sola línea.
       Aquí había una veta de madera hecha con un degradado repetido, y a rayas
       se veía: en una pantalla de celular, un patrón que se repite cada quince
       píxeles deja de leerse como madera y se lee como una persiana detrás de
       la carta. Ahora son tres manchas grandes y muy tenues, cada una en un
       sitio distinto y sin repetirse nunca: la penumbra de un local, que es lo
       que se buscaba. Sigue pesando cero y sigue escalando a cualquier
       pantalla. */
    --wk-penumbra:
        radial-gradient(58% 42% at 16% 20%, rgba(255, 238, 205, 0.030), transparent 62%),
        radial-gradient(52% 38% at 84% 40%, rgba(255, 238, 205, 0.020), transparent 64%),
        radial-gradient(68% 48% at 38% 76%, rgba(0, 0, 0, 0.22),        transparent 66%);

    /* El trébol dibujado, una sola vez, para reusarlo de máscara donde haga
       falta: el rótulo de cada categoría, el chip activo, la lluvia del fondo.
       Va como máscara y no como imagen de color para que el verde lo siga
       poniendo el panel y no este archivo. */
    --wk-trebol-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M15.1 16.8h1.8c0 5.2-1.3 9.5-3.9 12.9l-1.4-1.1c2.3-3 3.5-6.9 3.5-11.8z'/%3E%3Ccircle cx='16' cy='8.4' r='6.4'/%3E%3Ccircle cx='10.3' cy='17.7' r='6.4'/%3E%3Ccircle cx='21.7' cy='17.7' r='6.4'/%3E%3C/svg%3E");
}

/* El oro de verdad: reflejo y sombra CALCULADOS desde el color del panel.
   Va dentro de @supports para que el navegador viejo se quede con los valores
   escritos de arriba en vez de con una declaración que no entiende. */
@supports (color: color-mix(in srgb, white, black)) {
    :root {
        --wk-oro-luz:    color-mix(in srgb, var(--color-primario, #D6A22E) 40%, #FFF7DE);
        --wk-oro-sombra: color-mix(in srgb, var(--color-primario, #D6A22E) 60%, #170D01);
        --wk-brillo:     color-mix(in srgb, var(--color-primario, #D6A22E) 16%, transparent);
        --wk-brillo-2:   color-mix(in srgb, var(--color-primario, #D6A22E)  9%, transparent);
        --wk-canto:      color-mix(in srgb, var(--color-primario, #D6A22E) 34%, transparent);
    }
}

/* El pan de oro. Un degradado con el reflejo corrido hacia arriba: es lo que
   diferencia una pastilla amarilla de una lámina de metal. Se usa en el botón
   principal, en el chip activo, en las etiquetas y en los rótulos. */
:root {
    --wk-pan-oro: linear-gradient(
        152deg,
        var(--wk-oro-sombra)  0%,
        var(--wk-oro)        16%,
        var(--wk-oro-luz)    38%,
        var(--wk-oro)        58%,
        var(--wk-oro-sombra) 84%,
        var(--wk-oro)       100%
    );
}


/* ===========================================================================
   2. LAS TRES REGLAS DE LA CASA
   =========================================================================== */

/* El tamaño general del texto se controla desde el panel. Todo el tema mide en
   rem, así que mover esto agranda o achica el sitio entero de forma pareja. */
html { font-size: var(--escala-texto, 100%); }

/* `hidden` le gana a cualquier `display` de este archivo. El popup, el carrito
   y el checkout son pantalla completa: si una regla de aquí los dejara
   visibles se tragarían todos los toques y la carta se vería perfecta sin
   responder a nada. Se repite aunque `default` ya la traiga, porque el día que
   alguien mueva el orden de las hojas esta línea es el seguro. */
[hidden] { display: none !important; }

body {
    /* El fondo plano lo sigue poniendo el panel (--color-fondo). La madera, la
       viñeta y la lluvia van encima, en la capa de decoración. */
    background-color: var(--color-fondo, #12100C);
}

/* Las tres franjas de la página se levantan sobre el fondo. Es lo que mantiene
   la lluvia de monedas DETRÁS de la carta pase lo que pase. */
.cabecera,
.contenido,
.pie {
    position: relative;
    z-index: 1;
}


/* ===========================================================================
   3. EL FONDO — la madera y la lluvia
   ---------------------------------------------------------------------------
   Todo el ambiente vive en `partials/decoracion.php`, que se pinta al final
   del menú. Fijo a la pantalla, sin eventos y por debajo de todo: nunca tapa
   un botón ni se roba un toque.
   =========================================================================== */

.decoracion {
    position: fixed;
    inset: 0;
    z-index: -1;             /* detrás de la carta, delante del color de fondo */
    overflow: hidden;        /* una moneda que se sale de lado no ensancha nada */
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

/* --- La madera, el farol y la viñeta -------------------------------------- */
/*
   Cuatro capas de degradado, de arriba abajo del listado:
     · la luz cálida que cuelga sobre la barra
     · el resplandor del caldero, al pie de la página
     · la viñeta que oscurece las esquinas y empuja la vista al centro
     · la veta de la madera
*/
.decoracion__ambiente {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 58% at 50% -8%,  var(--wk-brillo),   transparent 62%),
        radial-gradient(90% 40% at 50% 108%,  var(--wk-brillo-2), transparent 72%),
        radial-gradient(130% 95% at 50% 42%,  transparent 38%, rgba(0, 0, 0, 0.58) 100%),
        var(--wk-penumbra);
}

/* --- La lluvia ------------------------------------------------------------ */
/*
   APAGADA DE FÁBRICA, encendida solo para quien no pidió menos movimiento.
   Es al revés de como suele escribirse a propósito: si el navegador no
   entiende la consulta, se queda sin lluvia y la carta se ve igual de bien.
   Al revés —encender siempre y apagar en `reduce`— el que no la entiende se
   queda con el movimiento, que es justo lo que no puede pasar.
*/
.decoracion__campo { display: none; }

@media (prefers-reduced-motion: no-preference) {
    .decoracion__campo {
        display: block;
        position: absolute;
        inset: 0;
    }
}

/* La caída. Nace arriba de la pantalla y sale por abajo, con una deriva
   lateral propia para que ninguna baje en línea recta. */
.chispa {
    position: absolute;
    top: 0;
    left: var(--x, 50%);
    width: var(--w, 14px);
    height: var(--w, 14px);
    perspective: 90px;      /* para que el volteo de la moneda tenga fuga */
    animation: wk-caer var(--t, 20s) linear var(--r, 0s) infinite;
}

@keyframes wk-caer {
    0%   { transform: translate3d(0, -16vh, 0);            opacity: 0; }
    9%   {                                                 opacity: 1; }
    87%  {                                                 opacity: 1; }
    100% { transform: translate3d(var(--dx, 0), 116vh, 0); opacity: 0; }
}

/* El vaivén. Va en su propia etiqueta porque la caída ya ocupó el `transform`
   del padre, y dos animaciones sobre la misma propiedad no se suman: gana la
   última y la otra desaparece. */
.chispa i {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    animation: wk-vaiven var(--tv, 5s) ease-in-out var(--r, 0s) infinite alternate;
}

@keyframes wk-vaiven {
    from { transform: translateX(calc(var(--v, 8px) * -1)); }
    to   { transform: translateX(var(--v, 8px)); }
}

/* Y el giro, en el pseudo-elemento: la tercera capa, el tercer `transform`. */
.chispa i::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
}

/* La moneda. El volteo es un `rotateY`: el disco se aplasta y se vuelve a
   abrir, que es exactamente lo que hace una moneda girando en el aire. El
   degradado corrido hace el resto —el reflejo pasa por encima solo—, así que
   no hace falta animar ningún `filter`, que sí obligaría a repintar. */
.chispa--moneda i::before {
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 28%, var(--wk-oro-luz), transparent 60%),
        linear-gradient(150deg, var(--wk-oro-luz), var(--wk-oro) 44%, var(--wk-oro-sombra));
    box-shadow: inset 0 0 0 1px var(--wk-oro-sombra);
    animation: wk-voltear var(--tg, 7s) linear var(--r, 0s) infinite;
}

@keyframes wk-voltear { to { transform: rotateY(360deg); } }

/* El trébol. Rueda sobre tres ejes a la vez: cae dando tumbos, como una hoja
   de verdad, y no girando plano como una manecilla de reloj. */
.chispa--trebol i::before {
    background: var(--wk-trebol);
    -webkit-mask-image: var(--wk-trebol-svg);
            mask-image: var(--wk-trebol-svg);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    animation: wk-tumbar var(--tg, 7s) linear var(--r, 0s) infinite;
}

@keyframes wk-tumbar { to { transform: rotate3d(1, 0.55, 0.25, 360deg); } }

/* Las del fondo: más tenues y desenfocadas. Es lo que separa una lluvia con
   profundidad de una calcomanía pegada sobre la pantalla. El desenfoque es
   fijo, no animado: se dibuja una vez y ya. */
.chispa--fondo i {
    opacity: 0.22;
    filter: blur(1.1px);
}

/* Un destello de vez en cuando. Cada cuarta moneda, no todas: un cielo entero
   brillando deja de ser un detalle y pasa a ser un adorno de fiesta. */
.chispa--moneda:nth-child(4n) i::before {
    box-shadow:
        inset 0 0 0 1px var(--wk-oro-sombra),
        0 0 7px var(--wk-canto);
}

/* En pantalla angosta cae una de cada cuatro menos. El celular de gama baja
   tiene que gastar la batería en desplazar el menú, no en el adorno; quitando
   una de cada tres la lluvia se veía deshilachada, y con una de cada cuatro
   sigue leyéndose como lluvia. */
@media (max-width: 430px) {
    .chispa:nth-child(4n) { display: none; }
}


/* ===========================================================================
   4. LA CABECERA — la barra del pub
   ---------------------------------------------------------------------------
   Se desplaza con la página, igual que en el tema base. Se pensó dejarla
   pegada arriba y no: en un celular son 70 de los 660 píxeles de alto
   ocupados para siempre por el nombre, que es justo lo que ya se leyó al
   entrar. Lo que sí se queda fijo abajo es la barra del pedido, que es la que
   hace falta a cada momento.
   =========================================================================== */

.cabecera {
    position: relative;
    padding: 16px var(--espacio) 18px;
    border-bottom: 0;               /* la línea la pone el ::after, con oro */

    /* El color plano va primero: si el navegador no sabe calcular el degradado
       —color-mix es reciente— se queda con esta línea y la barra sigue siendo
       de cuero en vez de quedarse transparente. */
    background: var(--color-superficie);
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--color-superficie) 82%, #000) 0%,
            var(--color-superficie) 100%);
    box-shadow: 0 14px 30px -22px #000;
}

/* La cenefa dorada del canto de abajo. Tres píxeles: un hilo de oro vivo entre
   dos de sombra, que es como se ve el filo de una barra bien barnizada. */
.cabecera::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(180deg,
        var(--wk-oro-luz) 0 1px,
        var(--wk-oro) 1px 2px,
        var(--wk-oro-sombra) 2px 3px);
    opacity: 0.85;
}

/* El logo, montado en un aro de oro. `contain` lo sigue poniendo el tema base:
   un logo se ve completo, no recortado. */
.cabecera__logo {
    width: 46px;
    height: 46px;
    padding: 3px;
    background: var(--color-fondo, #12100C);
    box-shadow:
        0 0 0 2px var(--wk-oro),
        0 0 14px -2px var(--wk-canto);
}

/* El nombre, en pan de oro. Con `background-clip: text` el degradado se ve
   DENTRO de las letras; el navegador que no lo entienda se queda con el
   dorado plano de la línea de arriba, que también se ve bien. */
.cabecera__nombre {
    font-family: var(--fuente-titulos);
    font-size: 1.12rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wk-oro);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .cabecera__nombre {
        background: var(--wk-pan-oro);
        -webkit-background-clip: text;
                background-clip: text;
        color: transparent;
    }
}

/* Un trébol antes del nombre, SOLO cuando no hay logo cargado. Con logo sería
   una segunda marca compitiendo con la primera; sin logo, es lo que evita que
   el nombre a secas se vea como un título de documento. */
.cabecera__nombre::before {
    content: "";
    display: inline-block;
    width: 0.95em;
    height: 0.95em;
    margin-right: 0.4em;
    vertical-align: -0.14em;
    background: var(--wk-trebol);
    -webkit-mask-image: var(--wk-trebol-svg);
            mask-image: var(--wk-trebol-svg);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
}

.cabecera__logo + .cabecera__textos .cabecera__nombre::before { display: none; }

/* En 390 px, el nombre en mayúsculas espaciadas se queda sin sitio y termina
   en puntos suspensivos. Se le quita un punto de tamaño y algo de espaciado:
   se sigue leyendo como rótulo y cabe entero. */
@media (max-width: 430px) {
    .cabecera__nombre {
        font-size: 1rem;
        letter-spacing: 0.035em;
    }
}

@media (max-width: 380px) {
    .cabecera__nombre {
        font-size: 0.94rem;
        letter-spacing: 0.02em;
    }
}

.cabecera__sucursal {
    font-size: 0.76rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-texto-suave);
}

/* --- Los atajos: compartir, WhatsApp, sucursal ---------------------------- */
/* Botones redondos con canto de oro, como fichas sobre la barra. Siguen
   midiendo 40 px de lado —la medida a la que un pulgar no falla— y en pantalla
   ancha se estiran para dejar sitio a la palabra. */

/* 44 px de lado, no los 40 del tema base. Cuatro píxeles suenan a nada y son
   la diferencia entre acertar y volver a intentar: es la medida mínima que
   recomienda cualquier guía de interfaz táctil, y aquí de paso hace que los
   tres atajos se lean como fichas de la barra. */
.accion {
    min-width: 44px;
    height: 44px;
    border-color: var(--wk-canto);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--color-superficie) 88%, #FFF) 0%, var(--color-superficie) 100%);
    color: var(--wk-oro);
    box-shadow: inset 0 1px 0 rgba(255, 244, 214, 0.07);
    transition: color 0.16s ease, border-color 0.16s ease, transform 0.14s ease;
}

.accion:hover,
.accion:focus-visible {
    color: var(--wk-oro-luz);
    border-color: var(--wk-oro);
}

.accion:active { transform: scale(0.94); }


/* ===========================================================================
   5. LAS CATEGORÍAS — posavasos y rótulo de pizarrón
   =========================================================================== */

/* Los chips siguen siendo enlaces a `#cat-algo`, como en el tema base: sin
   JavaScript llevan a la categoría igual. Aquí solo cambian de material. */
/* Un chip de 36 px se falla con el pulgar en marcha. Con este relleno pasa de
   42, que es lo que se pide de un área tocable. */
.chip {
    padding: 12px 18px;
    border-color: var(--wk-canto);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--color-superficie) 88%, #FFF) 0%, var(--color-superficie) 100%);
    color: var(--color-texto-suave);
    font-family: var(--fuente-titulos);
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: inset 0 1px 0 rgba(255, 244, 214, 0.06);
    transition: color 0.16s ease, border-color 0.16s ease, transform 0.14s ease;
}

.chip:active { transform: scale(0.96); }

/* El activo se acuña en oro. Letra oscura encima: un dorado con letras blancas
   no se lee al sol, y esta barra se mira parado en la calle. */
.chip--activo {
    border-color: var(--wk-oro-sombra);
    background: var(--wk-pan-oro);
    color: var(--wk-tinta);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        0 4px 14px -8px var(--wk-oro);
}

/* --- El rótulo de la categoría -------------------------------------------- */
/*
   Mayúsculas espaciadas en pan de oro, con un trébol delante y un filo dorado
   que se desvanece debajo. Es el rótulo de las pizarras del local, que es de
   donde tenía que salir el diseño de esta parte.
*/
.categoria__titulo,
.destacados__titulo {
    font-family: var(--fuente-titulos);
    font-size: 1.3rem;
    line-height: 1.15;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--wk-oro);
    margin-bottom: 14px;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .categoria__titulo,
    .destacados__titulo {
        background: var(--wk-pan-oro);
        -webkit-background-clip: text;
                background-clip: text;
        color: transparent;
    }
}

.categoria__titulo::before,
.destacados__titulo::before {
    content: "";
    display: inline-block;
    width: 0.82em;
    height: 0.82em;
    margin-right: 0.45em;
    vertical-align: -0.08em;
    background: var(--wk-trebol);
    -webkit-mask-image: var(--wk-trebol-svg);
            mask-image: var(--wk-trebol-svg);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
}

/* El filo. Se desvanece hacia la derecha en vez de cruzar la pantalla entera:
   una línea de borde a borde parte la página en dos, esta agrupa lo de abajo
   con su título. */
.categoria__titulo::after,
.destacados__titulo::after {
    content: "";
    display: block;
    width: min(100%, 210px);
    height: 2px;
    margin-top: 9px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--wk-oro), var(--wk-canto) 45%, transparent);
}

.categoria__descripcion {
    font-size: 0.85rem;
    color: var(--color-texto-suave);
}


/* ===========================================================================
   5-bis. LA TIRA DE FAVORITOS
   ---------------------------------------------------------------------------
   Los tres o cuatro platillos que la casa quiere enseñar primero, arriba de
   todo y en grande. Las tarjetas son LAS MISMAS del menú —las mueve aquí
   `js/destacados.js`, no se copian—, así que lo único que hay aquí es cuánto
   miden y cómo se deslizan.

   Se mueve con el dedo y nada más: `scroll-snap` del navegador encuadra cada
   tarjeta sola. No avanza sola a propósito, igual que el carrusel de
   promociones del tema base: un carrusel que cambia mientras alguien lo está
   leyendo es de lo que más molesta en un celular, y encima cambia justo cuando
   la persona iba a tocarlo.
   =========================================================================== */

.destacados { margin: 4px 0 26px; }

.destacados__titulo { margin: 0 0 14px; }

.destacados__tira {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 2px 2px 6px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;

    /* Al llegar al tope, el navegador continúa el gesto en la página de atrás
       y la carta entera se va de lado. `contain` corta esa cadena: el
       deslizamiento se queda dentro de la tira. */
    overscroll-behavior-x: contain;
}

.destacados__tira::-webkit-scrollbar { display: none; }

/* 78 % y no 100 %: que ASOME la siguiente. Una tarjeta que ocupa el ancho
   entero no se ve como una tira —se ve como un banner— y nadie sabe que hay
   más si no aparece el borde de la que viene. */
.destacados .platillo {
    flex: 0 0 74%;
    scroll-snap-align: center;
    padding: 12px;
    gap: 12px;
    border-color: var(--wk-oro-sombra);
    box-shadow:
        inset 0 1px 0 rgba(255, 244, 214, 0.1),
        0 0 0 1px var(--wk-canto),
        0 18px 34px -22px #000,
        0 0 30px -18px var(--wk-oro);
}

@media (min-width: 640px) {
    .destacados .platillo { flex-basis: 300px; }
}

/* LA FOTO NO LLENA LA TARJETA — se centra y se queda en 180 px.
   A todo lo ancho, una foto cuadrada de 290 px dejaba la tarjeta en medio
   millar de píxeles de alto: el nombre y el precio caían fuera de la pantalla y
   había que desplazar para ver de qué platillo era la foto. Centrada y más
   chica, la tarjeta entera cabe de un vistazo — que es para lo que existe una
   tira de recomendados.

   Y SIGUE SIENDO CUADRADA. Recortarla a 4:3 aquí habría sido lo fácil, pero
   entonces la foto de la tira y la del popup enseñarían encuadres distintos del
   mismo platillo, que es justo lo que el recorte cuadrado vino a resolver. */
.destacados .platillo__foto {
    width: 100%;
    max-width: 180px;
    margin: 0 auto;
}

/* Dentro de la tira la etiqueta «Favorito» sobra: la tira ENTERA son los
   favoritos, y repetirlo en cada tarjeta es ruido sobre la foto. */
.destacados .etiqueta--destacado { display: none; }

/* Aquí la tarjeta tiene sitio, así que se le da: nombre más grande, la
   descripción en tres renglones en vez de dos y el precio como pieza
   principal. Es la misma tarjeta del menú, con aire. */
.destacados .platillo__nombre {
    font-size: 1.12rem;
    letter-spacing: 0.02em;
}

.destacados .platillo__descripcion {
    font-size: 0.82rem;
    -webkit-line-clamp: 3;
}

.destacados .platillo__pie {
    padding-top: 8px;
    align-items: flex-end;
}

.destacados .platillo__precio {
    font-size: 1.42rem;
    line-height: 1.05;
}

/* El rótulo «Precio» encima de la cifra, como en el diseño. */
.destacados .platillo__precio::before {
    content: "Precio";
    display: block;
    font-family: var(--fuente-textos);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-texto-suave);
    margin-bottom: 2px;
}

/* Salvo cuando el platillo ya dice «desde»: dos rótulos apilados encima de la
   misma cifra son uno de más. */
.destacados .platillo__precio:has(.platillo__desde)::before { display: none; }

.destacados .platillo__agregar {
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
}

/* --- Los puntitos --------------------------------------------------------- */

.destacados__puntos {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
}

.destacados__punto {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--color-borde);
    transition: width 0.2s ease, background 0.2s ease;
}

.destacados__punto--activo {
    width: 18px;
    background: var(--wk-oro);
    box-shadow: 0 0 8px -1px var(--wk-canto);
}

@media (prefers-reduced-motion: reduce) {
    .destacados__punto { transition: none; }
}


/* ===========================================================================
   6. LA CARTA — tarjetas de cuero con marco dorado
   ---------------------------------------------------------------------------
   La tarjeta lleva un relleno propio y la foto va METIDA dentro, con su marco,
   en vez de pegada al borde de arriba. Es la diferencia entre una ficha de
   catálogo y una pieza enmarcada, y no cuesta nada.

   Todo lo que hace la tarjeta —abrir el popup, marcar el agotado, ocupar el
   renglón entero cuando se queda sola— sigue siendo del tema base. Aquí solo
   cambia el material.
   =========================================================================== */

.platillos { gap: 14px; }

.platillo {
    position: relative;             /* de aquí cuelga la costura */
    padding: 10px;
    gap: 10px;
    border-color: var(--wk-canto);
    background:
        linear-gradient(168deg,
            color-mix(in srgb, var(--color-superficie) 88%, #FFF) 0%,
            var(--color-superficie) 55%,
            color-mix(in srgb, var(--color-superficie) 82%, #000) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 244, 214, 0.07),
        0 14px 26px -20px #000;
    transition: transform 0.16s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

/* La costura. Un hilo punteado por dentro del canto, como el cuero de los
   gabinetes. Sin eventos: jamás se roba el toque que iba al platillo. */
.platillo::before {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px dashed var(--wk-canto);
    border-radius: calc(var(--radio, 14px) - 5px);
    opacity: 0.45;
    pointer-events: none;
}

.platillo:hover {
    border-color: var(--wk-oro);
    box-shadow:
        inset 0 1px 0 rgba(255, 244, 214, 0.1),
        0 18px 30px -20px #000,
        0 0 0 1px var(--wk-canto);
}

/* --- La foto, enmarcada --------------------------------------------------- */
/* Sigue siendo cuadrada y con el MISMO recorte que al abrir el platillo. El
   fondo sigue siendo transparente: un color propio más oscuro que la tarjeta
   asoma por detrás de los PNG sin fondo y dibuja una silueta alrededor. */
.platillo__foto {
    border-radius: var(--radio-chico, 10px);
    box-shadow:
        inset 0 0 0 1px var(--wk-canto),
        0 4px 12px -8px #000;
}

/* El reflejo que cruza la foto al pasar por encima. Es de escritorio —en un
   celular no hay «pasar por encima»— y por eso no se le encarga ningún trabajo
   importante: es un brillo, no una señal. */
.platillo__foto::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(112deg,
        transparent 38%,
        rgba(255, 244, 214, 0.20) 50%,
        transparent 62%);
    transform: translateX(-130%);
    transition: transform 0.55s ease;
    pointer-events: none;
}

.platillo:hover .platillo__foto::after { transform: translateX(130%); }

/* --- Las etiquetas --------------------------------------------------------- */

.etiqueta {
    font-family: var(--fuente-titulos);
    letter-spacing: 0.07em;
    border-radius: var(--radio-boton, 999px);
}

/* «Favorito» se acuña en oro: es la recomendación de la casa. */
.etiqueta--destacado {
    background: var(--wk-pan-oro);
    color: var(--wk-tinta);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 3px 10px -6px #000;
}

/* «Agotado» NO se acuña: es una mala noticia y no debe verse como un premio. */
.etiqueta--agotado {
    background: color-mix(in srgb, var(--color-fondo, #12100C) 82%, #FFF);
    color: var(--color-texto-suave);
    box-shadow: inset 0 0 0 1px var(--color-borde);
}

/* --- El texto -------------------------------------------------------------- */

.platillo__datos { padding: 2px 3px 1px; }

.platillo__nombre {
    font-family: var(--fuente-titulos);
    font-size: 0.97rem;
    letter-spacing: 0.015em;
    color: var(--color-texto);
}

.platillo__descripcion {
    font-size: 0.79rem;
    line-height: 1.45;
}

/* El precio, en oro y con cifras de ancho fijo: una columna de precios que no
   baila al cambiar de platillo se lee de un vistazo. */
.platillo__precio {
    font-family: var(--fuente-titulos);
    font-size: 1.06rem;
    color: var(--wk-oro);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
}

.platillo__desde { color: var(--color-texto-suave); }

/* En la vista de lista la tarjeta se disuelve en renglones: ahí la costura
   sobra, porque ya no hay cuero que coser. */
.platillos--lista .platillo::before { display: none; }

.platillos--lista .platillo,
.platillos--lista .platillo:hover {
    padding: 14px 0;
    border-bottom-color: var(--wk-canto);
    box-shadow: none;
}

/* El resalte de un platillo compartido por enlace, con el oro de la casa. */
.platillo--senalado {
    outline-color: var(--wk-oro);
    box-shadow: 0 0 22px -6px var(--wk-canto);
}


/* ===========================================================================
   7. BOTONES Y MONEDAS
   ---------------------------------------------------------------------------
   El botón de agregar es una MONEDA acuñada: el canto estriado, el reflejo
   arriba y la sombra abajo. Es el gesto del tema —lo que el cliente hace todo
   el rato es echar monedas al botín— y de paso resuelve un problema real: un
   `+` de 34 px se falla con el pulgar, y este mide 44.
   =========================================================================== */

.platillo__agregar {
    position: relative;
    width: 44px;
    height: 44px;
    background: var(--wk-pan-oro);
    color: var(--wk-tinta);
    font-family: var(--fuente-titulos);
    font-size: 1.35rem;
    font-weight: 700;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        inset 0 0 0 1px var(--wk-oro-sombra),
        0 5px 14px -8px #000;
    transition: transform 0.14s ease, box-shadow 0.16s ease;
}

/* El canto estriado. Un degradado cónico repetido, recortado con una máscara
   al anillo de fuera: se ven las muescas del borde y el centro queda limpio
   para el `+`. Cero imágenes, cero peticiones. */
.platillo__agregar::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: repeating-conic-gradient(
        from 0deg,
        rgba(0, 0, 0, 0.34)          0deg 3deg,
        rgba(255, 250, 230, 0.22)    3deg 6deg
    );
    -webkit-mask-image: radial-gradient(circle, transparent 0 71%, #000 74% 100%);
            mask-image: radial-gradient(circle, transparent 0 71%, #000 74% 100%);
    opacity: 0.6;
    pointer-events: none;
}

.platillo__agregar:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 0 0 1px var(--wk-oro-sombra),
        0 6px 18px -8px var(--wk-oro);
}

.platillo__agregar:active { transform: scale(0.9); }

/* --- El botón principal ---------------------------------------------------- */
/* «Agregar», «Continuar con el pedido», «Enviar por WhatsApp». Un lingote. */

.boton--primario {
    position: relative;
    overflow: hidden;
    background: var(--wk-pan-oro);
    border-color: var(--wk-oro-sombra);
    color: var(--wk-tinta);
    font-family: var(--fuente-titulos);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        0 8px 22px -14px var(--wk-oro);
}

/* El reflejo que lo cruza al pasar por encima. Escritorio otra vez: en celular
   el botón ya se hunde al tocarlo, que es la respuesta que hace falta. */
.boton--primario::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 45%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.42), transparent);
    transform: translateX(-160%);
    transition: transform 0.5s ease;
    pointer-events: none;
}

.boton--primario:hover::after { transform: translateX(340%); }

/* El secundario es de cuero con canto de oro: se ve, se toca, y no le compite
   al principal. */
.boton {
    font-family: var(--fuente-titulos);
    letter-spacing: 0.04em;
    border-color: var(--wk-canto);
}

.boton--chico {
    background: var(--color-superficie);
    color: var(--wk-oro);
}

.creditos-dev:hover { color: var(--wk-oro); }


/* ===========================================================================
   8. PROMOCIONES — el banner, enmarcado
   =========================================================================== */

.promo {
    border: 1px solid var(--wk-canto);
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.5),
        0 12px 26px -18px #000;
}

.promos__punto { background: var(--color-borde); }

.promos__punto--activo {
    background: var(--wk-oro);
    box-shadow: 0 0 8px -1px var(--wk-canto);
}


/* ===========================================================================
   9. LA BARRA DEL PEDIDO
   ---------------------------------------------------------------------------
   Lo único que se queda fijo en la pantalla. Dice siempre en qué local se está
   pidiendo, cuánto se lleva y cómo seguir.
   =========================================================================== */

.bolsa__caja {
    border-color: var(--wk-oro-sombra);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--color-superficie) 86%, #FFF) 0%, var(--color-superficie) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 244, 214, 0.1),
        0 0 0 1px var(--wk-canto),
        0 14px 34px -14px #000,
        0 0 26px -14px var(--wk-oro);
}

.bolsa__marca {
    background: var(--wk-brillo);
    box-shadow: inset 0 0 0 1px var(--wk-canto);
}

.bolsa__sucursal {
    color: var(--color-texto);
    letter-spacing: 0.03em;
}

.bolsa__boton {
    background: var(--wk-pan-oro);
    color: var(--wk-tinta);
    font-family: var(--fuente-titulos);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        inset 0 0 0 1px var(--wk-oro-sombra);
}


/* ===========================================================================
   10. VENTANAS — popup, carrito y checkout
   ---------------------------------------------------------------------------
   Las hojas que suben desde abajo. Cuero con un filo de oro arriba: es lo que
   dice «esto es una hoja que se abrió», no «la página cambió».
   =========================================================================== */

.modal__caja,
.carrito__caja {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--color-superficie) 86%, #FFF) 0%,
            var(--color-superficie) 34%,
            var(--color-superficie) 100%);
    border-top: 2px solid var(--wk-oro);
}

@media (min-width: 700px) {
    .modal__caja,
    .carrito__caja {
        border: 1px solid var(--wk-canto);
        border-top: 2px solid var(--wk-oro);
        box-shadow: 0 30px 70px -30px #000;
    }
}

.modal__fondo { background: rgba(10, 7, 3, 0.72); }

/* La ✕ y el ← , como fichas de la barra. */
.modal__cerrar {
    border: 1px solid var(--wk-canto);
    background: color-mix(in srgb, var(--color-fondo, #12100C) 70%, transparent);
    color: var(--wk-oro);
    transition: transform 0.14s ease, color 0.16s ease;
}

.modal__cerrar:hover { color: var(--wk-oro-luz); }

.carrito__cabecera {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--color-superficie) 88%, #FFF) 0%, var(--color-superficie) 100%);
    border-bottom: 1px solid var(--wk-canto);
}

.carrito__titulo,
.modal__titulo {
    font-family: var(--fuente-titulos);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-texto);
}

/* La foto del popup va ENMARCADA dentro de la hoja, no pegada al borde. Es la
   misma pieza que en la tarjeta —foto cuadrada con su filo de oro— y así el
   platillo se ve igual antes y después de abrirlo, que es de lo que se trata
   el recorte cuadrado. Pegada al borde, además, sus esquinas redondeadas
   chocaban con el filo dorado del canto de arriba y parecía un error. */
.modal__foto {
    margin: 12px 12px 0;
    border-radius: var(--radio-chico, 10px);
    box-shadow:
        inset 0 0 0 1px var(--wk-canto),
        0 6px 18px -12px #000;
}

/* El botón de compartir que el JavaScript del tema base inyecta en el popup.
   No se agrega al HTML: solo se le cambia el traje. */
.modal__compartir {
    border: 1px solid var(--wk-canto);
    color: var(--wk-oro);
}

/* --- Grupos de opciones ---------------------------------------------------- */

.grupo + .grupo { border-top-color: var(--wk-canto); }

.grupo__titulo {
    font-family: var(--fuente-titulos);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* «Obligatorio», «Hasta 2». Es una regla, no un adorno: se lee o el cliente
   elige mal. Letra clara sobre el oro apagado, con su canto. */
.grupo__regla {
    background: var(--wk-brillo);
    border: 1px solid var(--wk-canto);
    color: var(--wk-oro-luz);
    letter-spacing: 0.05em;
}

.opcion { border-bottom-color: color-mix(in srgb, var(--wk-canto) 55%, transparent); }

.opcion input { accent-color: var(--wk-oro); }

.opcion__precio { color: var(--wk-oro); }
.opcion__precio--libre { color: var(--wk-trebol); }

.opcion:not(.opcion--agotada):not(.opcion--bloqueada):hover {
    background: var(--wk-brillo-2);
}

/* --- Contador y renglones del carrito -------------------------------------- */

.contador {
    border: 1px solid var(--wk-canto);
    border-radius: var(--radio-boton, 999px);
}

.contador__boton { color: var(--wk-oro); }
.contador__boton:hover { background: var(--wk-brillo); }
.contador__valor { font-family: var(--fuente-titulos); font-variant-numeric: tabular-nums; }

.linea { border-bottom-color: color-mix(in srgb, var(--wk-canto) 55%, transparent); }

.linea__mini {
    border-radius: var(--radio-chico, 10px);
    box-shadow: inset 0 0 0 1px var(--wk-canto);
}

.linea__nombre { letter-spacing: 0.02em; }
.linea__precio { color: var(--wk-oro); }

.carrito__pie { border-top: 1px solid var(--wk-canto); }

/* El total: lo más grande y lo más dorado de la hoja. Es el número por el que
   se abrió el carrito. */
.carrito__renglon--total strong {
    font-family: var(--fuente-titulos);
    font-size: 1.15rem;
    color: var(--wk-oro);
}

/* --- Checkout -------------------------------------------------------------- */

.campo-c__etiqueta {
    font-family: var(--fuente-titulos);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.78rem;
    color: var(--color-texto-suave);
}

.campo-c__control {
    background: color-mix(in srgb, var(--color-fondo, #12100C) 78%, #000);
    border-color: var(--wk-canto);
    color: var(--color-texto);
}

.campo-c__control:focus {
    border-color: var(--wk-oro);
    box-shadow: 0 0 0 3px var(--wk-brillo-2);
}

.campo-c__control::placeholder { color: color-mix(in srgb, var(--color-texto-suave) 65%, transparent); }

.segmentado {
    background: color-mix(in srgb, var(--color-fondo, #12100C) 78%, #000);
    border-color: var(--wk-canto);
}

.segmentado__opcion span {
    font-family: var(--fuente-titulos);
    letter-spacing: 0.03em;
}

.segmentado__opcion input:checked + span {
    background: var(--wk-pan-oro);
    color: var(--wk-tinta);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.cupon__exito { color: var(--wk-trebol); }

.checkout__aviso,
.carrito__avisos {
    background: var(--wk-brillo-2);
    border-radius: var(--radio-chico, 10px);
}

/* El pedido enviado: la paloma en verde trébol, que es la señal de que todo
   salió bien, y el folio en oro. */
.enviado__icono {
    background: var(--wk-trebol);
    color: var(--wk-tinta);
}

.enviado__titulo {
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.enviado__folio strong {
    font-family: var(--fuente-titulos);
    color: var(--wk-oro);
}


/* ===========================================================================
   11. EL PIE — el tablón de la entrada
   =========================================================================== */

.pie {
    border-top: 0;
    background:
        linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.55));
}

/* La cenefa de oro que lo separa de la carta, desvanecida en los extremos:
   así el tablón parece apoyado y no pegado con cinta. */
.pie::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--wk-oro) 50%, transparent);
    opacity: 0.7;
}

.pie__marca-nombre {
    font-family: var(--fuente-titulos);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wk-oro);
}

.pie__linea {
    border-top-color: var(--wk-canto);
}

.pie__subtitulo {
    font-family: var(--fuente-titulos);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wk-oro);
}

.pie__dato--fuerte { color: var(--color-texto); }

.pie__dato a:hover { color: var(--wk-oro); }

.pie__estado--abierto { color: var(--wk-trebol); }

.pie__enlace { color: var(--wk-oro); }

/* Las redes, como fichas de la barra. */
.pie__red {
    border: 1px solid var(--wk-canto);
    background: color-mix(in srgb, var(--color-superficie) 70%, transparent);
    color: var(--color-texto-suave);
}

.pie__red:hover {
    border-color: var(--wk-oro);
    color: var(--wk-oro);
}


/* ===========================================================================
   12. ESTADOS — cerrado, agotado, vacío
   =========================================================================== */

/* Cerrado. Se dice arriba del todo y con el color del trébol apagado: es un
   aviso, no una alarma. */
.cerrado {
    border-radius: var(--radio, 14px);
    border: 1px solid var(--wk-canto);
    border-left: 4px solid var(--wk-oro);
    background: var(--wk-brillo-2);
}

.cerrado__titulo {
    display: block;          /* el detalle va DEBAJO, no pegado al título */
    font-family: var(--fuente-titulos);
    letter-spacing: 0.03em;
    margin-bottom: 2px;
}

.aviso-vacio__titulo {
    font-family: var(--fuente-titulos);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--wk-oro);
}

/* El aviso flotante de «agregado»: cuero y canto de oro, igual que todo lo
   demás que flota. */
.aviso {
    border-color: var(--wk-canto);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--color-superficie) 88%, #FFF) 0%, var(--color-superficie) 100%);
    box-shadow: 0 14px 34px -16px #000;
}

.aviso__accion { color: var(--wk-oro); }

.sucursal-op { border-bottom-color: color-mix(in srgb, var(--wk-canto) 55%, transparent); }
.sucursal-op__nombre { font-family: var(--fuente-titulos); letter-spacing: 0.03em; }
.sucursal-op--activa .sucursal-op__nombre { color: var(--wk-oro); }
.sucursal-op__paloma { color: var(--wk-trebol); }

.horario-dia { border-bottom-color: color-mix(in srgb, var(--wk-canto) 55%, transparent); }
.horario-dia--hoy span,
.horario-dia--hoy strong { color: var(--wk-oro); }


/* ===========================================================================
   13. MOVIMIENTO — y su interruptor
   ---------------------------------------------------------------------------
   Las tres reglas del sistema siguen valiendo: nada de lo que responde a un
   toque pasa de 260 ms, todo es `transform` y `opacity`, y nada bloquea.

   Los brillos que cruzan la foto y el botón son la excepción declarada: duran
   medio segundo porque son ambiente de escritorio, no la respuesta a un toque.
   Nadie espera a que terminen para seguir usando la carta.
   =========================================================================== */

/* Y aquí se apaga TODO. Mucha gente activa «reducir movimiento» por mareo o
   por migraña: no es una preferencia estética. La lluvia ni siquiera llega a
   dibujarse (ver la sección 3); lo que queda es la madera quieta. */
@media (prefers-reduced-motion: reduce) {
    .chispa,
    .chispa i,
    .chispa i::before,
    .platillo,
    .platillo__foto::after,
    .boton--primario::after,
    .platillo__agregar,
    .accion,
    .chip {
        animation: none !important;
        transition: none !important;
    }

    .platillo__foto::after,
    .boton--primario::after { display: none; }
}