/* ===========================================================================
   CHIVIRICOS MARISQUERÍA — hoja del tema
   ---------------------------------------------------------------------------
   Se carga DESPUÉS de la del sistema (lo hace layout.php), así que aquí solo
   va lo que cambia. No se importa la base: ya viene por su cuenta.

   LA IDEA
   -------
   Agua clara. El fondo es un azul lavado con burbujas subiendo detrás de todo;
   encima flotan tarjetas blancas, y cada categoría entra en un rótulo de letra
   manuscrita que se mece despacio, como un cartel colgado bajo el agua.

   Los rótulos van alternando azul y coral, que es lo que hace que una carta de
   trece categorías no se lea como una lista sino como secciones.

   LOS COLORES NO SE ESCRIBEN AQUÍ
   -------------------------------
   --color-primario, --color-secundario y --color-fondo los manda el panel.
   Todo lo demás se calcula a partir de ellos con color-mix, así que el día que
   el dueño cambie su azul cambian con él la ola del pie, las burbujas, los
   rótulos y los precios. Solo se escriben a mano los neutros del tema (texto,
   superficie, borde), que es lo que también hace la hoja base.

   Valores que hay que dejar puestos en el panel (Apariencia del sitio):
       Color primario    #005D90   azul náutico
       Color secundario  #FC9487   coral
       Color de fondo    #F7FAFB   agua clara
       Tipografía        Nunito en títulos y en textos

   Los tres colores y Nunito salen de la maqueta de Stitch del cliente. El
   fondo es lo único que se separa de ella: allí es arena (#FAF8F5) y aquí un
   blanco con una gota de azul. Con la arena las burbujas volvían a no verse,
   que es justo lo que había que arreglar; a este blanco no se le nota el tono
   y a las burbujas sí.
   =========================================================================== */


/* ===========================================================================
   1. LA LETRA MANUSCRITA
   ===========================================================================
   El único archivo que no sale del panel, y va explicado en fonts/LEEME.txt:
   la lista de tipografías del panel no tiene ninguna cursiva y el diseño
   aprobado lleva los títulos de categoría a mano. Viaja DENTRO del tema, sin
   pedirle nada a ningún servidor de fuera.

   `font-display: swap` para que el rótulo se lea con la tipografía del panel
   mientras llegan los 25 KB, en vez de quedarse en blanco.
   =========================================================================== */

@font-face {
    font-family: 'Chiviricos Manuscrita';
    src: url('../fonts/caveat-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    /* Solo lo que se usa: acentos y eñe entran aquí. */
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}


/* ===========================================================================
   2. LOS NEUTROS Y LOS TONOS DEL TEMA
   ===========================================================================
   La hoja base es oscura de fábrica: texto casi blanco sobre superficie
   #171717. Esta carta es clara, así que los cuatro neutros se dan la vuelta.
   Estas cuatro NO las manda el panel —la base también las escribe a mano—, así
   que pisarlas aquí no le quita nada al dueño.
   =========================================================================== */

:root {
    --color-texto:        #123A52;
    --color-texto-suave:  #5A6B78;   /* 5.2:1 sobre el agua: se lee al sol */
    --color-superficie:   #FFFFFF;
    --color-borde:        #DFEAF2;
    --espacio:            16px;

    /* LOS DOS TONOS HONDOS
       --------------------
       El coral de la marca es precioso de fondo y pésimo para escribir encima:
       blanco sobre él da 2.4:1 y no llega ni al mínimo del texto grande. Lo
       mismo pasa al revés con el coral como TEXTO sobre blanco.

       Así que el coral se usa en dos intensidades: el del panel para rellenos
       grandes y manchas, y este otro —el mismo coral, quemado— para cuando hay
       que escribir. Los dos salen de la variable del panel, así que siguen
       siendo el color del cliente. */
    --chv-coral-hondo: color-mix(in srgb, var(--color-secundario) 62%, #8E1F08);
    --chv-coral-tinta: color-mix(in srgb, var(--color-secundario) 34%, #6E1605);

    /* El azul del pie y de los rótulos: el del panel, un punto más hondo, para
       que el blanco encima pase de sobra. */
    --chv-azul-hondo:  color-mix(in srgb, var(--color-primario) 92%, #04202F);

    /* El coral aclarado, para escribir SOBRE el pie oscuro. */
    /* Al 74% daba 4.04:1 contra el azul del pie, justo por debajo del mínimo.
       Al 60% llega a 4.6:1 y sigue leyéndose como coral. */
    --chv-coral-claro: color-mix(in srgb, var(--color-secundario) 60%, #fff);
}

/* Obligatoria: sin esto el ajuste de tamaño de texto del panel no hace nada. */
html { font-size: var(--escala-texto, 100%); }

/* Y esta es la que no se toca nunca. El popup, el carrito y el checkout son
   `position: fixed` a pantalla completa: si una regla de este archivo les diera
   `display: flex`, le ganaría al atributo `hidden` y seguirían capturando todos
   los toques estando invisibles. La carta se vería perfecta y no respondería a
   nada. Está anotado en el contrato porque ya pasó una vez. */
[hidden] { display: none !important; }


/* ===========================================================================
   3. EL AGUA Y LAS BURBUJAS
   ===========================================================================
   Sobre fondo claro las burbujas de la primera versión no se veían: eran un
   aro azul al 24% sobre papel casi blanco. Tres cambios:

     · el fondo deja de ser papel liso y pasa a ser agua —un azul lavado que se
       ahonda hacia abajo—, así hay algo contra lo que recortarse;
     · el aro sube al 55% y la burbuja lleva relleno de verdad, no solo borde;
     · se les pone sombra propia, que es lo que las despega del fondo.

   Todo sigue detrás de la página: `z-index: -1` las deja encima del fondo del
   <body> y debajo de todo el contenido.
   =========================================================================== */

.cabecera,
.contenido,
.pie { position: relative; }

.mar {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;   /* que jamás se robe un toque destinado a un botón */
    user-select: none;
}

/* La luz de la superficie y el fondo del mar. Arriba entra la luz; abajo el
   agua se ahonda. Es lo que hace que la carta se lea como vista desde dentro
   del agua y no como un fondo con pelotas. */
.mar__luz {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(140% 60% at 50% -12%,
            color-mix(in srgb, #fff 78%, transparent), transparent 68%),
        linear-gradient(to bottom,
            transparent 30%,
            color-mix(in srgb, var(--color-primario) 10%, transparent) 78%,
            color-mix(in srgb, var(--color-primario) 17%, transparent));
}

.burbuja {
    position: absolute;
    left: var(--x, 50%);
    bottom: -10vh;
    width: var(--s, 12px);
    height: var(--s, 12px);
    border-radius: 50%;

    /* Una burbuja es un aro brillante con casi nada dentro. El relleno es un
       lavado del azul, el volumen lo dan las dos sombras interiores, y la
       sombra de fuera es la que la despega del agua. */
    background:
        radial-gradient(circle at 32% 26%,
            rgba(255, 255, 255, 0.95) 0 18%,
            color-mix(in srgb, var(--color-primario) 10%, transparent) 55%,
            color-mix(in srgb, var(--color-primario) 20%, transparent) 100%);
    border: 1.5px solid color-mix(in srgb, var(--color-primario) 55%, transparent);
    box-shadow:
        inset -2px -3px 6px color-mix(in srgb, var(--color-primario) 22%, transparent),
        0 2px 6px color-mix(in srgb, var(--color-primario) 16%, transparent);

    /* Quietas de fábrica. El movimiento se enciende abajo, y solo para quien no
       pidió menos movimiento en su teléfono. */
    opacity: var(--o, 0.5);
}

/* El punto de luz. Es lo que la vuelve una burbuja y no un aro. */
.burbuja::before {
    content: '';
    position: absolute;
    top: 15%;
    left: 19%;
    width: 29%;
    height: 29%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
}

/* SUBEN SOLO SI SE PUEDE
   ----------------------
   Mucha gente activa "reducir movimiento" por mareo o migraña. Con la
   preferencia puesta las burbujas se quedan donde están —siguen dando textura
   de agua, pero ninguna se mueve—; desaparecer dejaría el fondo plano sin
   motivo.

   Solo se anima `transform` y `opacity`: las dos las mueve el compositor sin
   repintar la página, así que catorce burbujas no le cuestan nada al celular. */
@media (prefers-reduced-motion: no-preference) {
    .burbuja {
        opacity: 0;
        animation: burbuja-sube var(--t, 18s) linear var(--d, 0s) infinite;
    }
}

@keyframes burbuja-sube {
    0%   { transform: translate3d(0, 0, 0) scale(0.85);               opacity: 0; }
    10%  {                                                            opacity: var(--o, 0.5); }
    50%  { transform: translate3d(var(--dx, 14px), -55vh, 0) scale(1); }
    90%  {                                                            opacity: var(--o, 0.5); }
    100% { transform: translate3d(0, -115vh, 0) scale(1.08);          opacity: 0; }
}


/* ===========================================================================
   4. CABECERA
   ===========================================================================
   El logotipo de Chiviricos es apaisado —el pez, el nombre y la ola— y la base
   lo mete en un círculo de 44 px, donde el nombre se vuelve ilegible. Aquí se
   le deja su forma: alto fijo, ancho libre.
   =========================================================================== */

.cabecera {
    padding: 14px var(--espacio);
    border-bottom: 0;
    background: var(--color-superficie);
}

.cabecera__logo {
    width: auto;
    height: 42px;
    max-width: 170px;
    border-radius: 0;
}

.cabecera__nombre {
    font-family: 'Chiviricos Manuscrita', var(--fuente-titulos), cursive;
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1.1;
    letter-spacing: 0.01em;
    color: var(--color-primario);
}

.accion {
    border-color: color-mix(in srgb, var(--color-primario) 20%, transparent);
    color: var(--color-primario);
    background: var(--color-superficie);
}


/* ===========================================================================
   5. CHIPS DE CATEGORÍAS
   ===========================================================================
   Rectángulos de esquina suave, no pastillas: es lo que trae el diseño y de
   paso caben más nombres a lo ancho. El activo se rellena de azul, que con
   trece categorías es lo único que se ve de un vistazo.
   =========================================================================== */

.chips {
    padding-bottom: 12px;
    margin-bottom: 6px;
}

.chip {
    padding: 9px 17px;
    border-radius: var(--radio-chico, 10px);
    border-color: color-mix(in srgb, var(--color-primario) 22%, transparent);
    background: var(--color-superficie);
    color: var(--color-primario);
    font-size: 0.84rem;
    font-weight: 600;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

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


/* ===========================================================================
   6. EL RÓTULO DE CATEGORÍA — la pieza del diseño
   ===========================================================================
   Letra manuscrita en blanco sobre un rótulo de esquina redonda, alternando
   azul y coral. Va en `inline-block` para que el rótulo mida lo que mide el
   nombre: a todo lo ancho se convertiría en una barra de menú y dejaría de
   leerse como el título de una sección.

   POR QUÉ LOS TONOS HONDOS Y NO LOS DEL PANEL
   -------------------------------------------
   Blanco sobre el coral del panel da 2.4:1. El rótulo es texto grande, y ni
   siquiera llega al 3:1 que se le pide al texto grande. Con el coral quemado
   sube a 4.7:1 y pasa hasta el listón del texto normal. Se ve igual de coral.
   =========================================================================== */

.categoria { margin: 40px 0 24px; }
.categoria:first-of-type { margin-top: 20px; }

.categoria__titulo {
    display: inline-block;
    margin: 0 0 18px;
    padding: 0.3em 0.85em 0.36em;
    background: var(--chv-azul-hondo);
    color: #fff;
    border-radius: 999px;

    font-family: 'Chiviricos Manuscrita', var(--fuente-titulos), cursive;
    font-weight: 700;
    font-size: 1.62rem;
    line-height: 1.25;
    letter-spacing: 0.01em;

    box-shadow: 0 6px 16px color-mix(in srgb, var(--color-primario) 26%, transparent);

    /* El rótulo se mece: el punto de giro va abajo, como un cartel colgado. */
    transform-origin: 50% 100%;
}

/* Las categorías PARES en coral.

   `:nth-child(even of .categoria)` cuenta solo entre las categorías, así que no
   se descuadra porque antes haya un banner de promoción o el aviso de cerrado
   —que también son <section> y sí desordenarían a `nth-of-type`—.

   El navegador que no entienda el selector se salta la regla entera y deja
   todos los rótulos azules: se pierde la alternancia, no se rompe nada. */
.categoria:nth-child(even of .categoria) > .categoria__titulo {
    background: var(--chv-coral-hondo);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--color-secundario) 40%, transparent);
}

/* FLOTAR BAJO EL AGUA
   -------------------
   El rótulo sube, baja y se ladea despacio, como si colgara de una boya.

   Los 260 ms de la hoja base son para las animaciones que RESPONDEN a un toque:
   ahí lo que importa es contestar rápido. Esta no responde a nada —es ambiente,
   igual que las burbujas—, y a 260 ms un vaivén sería un tic nervioso. Seis
   segundos es lo que hace que se lea como agua y no como un parpadeo.

   Cada rótulo va a su ritmo: si los trece subieran a la vez se vería la página
   entera latiendo, que es exactamente lo contrario del efecto. Los retrasos son
   negativos para que al cargar ya estén repartidos y no arranquen todos juntos.

   Solo `transform`: no empuja el texto de al lado ni obliga a recalcular nada. */
@media (prefers-reduced-motion: no-preference) {
    .categoria__titulo {
        animation: rotulo-flota 6.5s ease-in-out infinite;
    }

    .categoria:nth-child(3n + 2) > .categoria__titulo {
        animation-duration: 7.8s;
        animation-delay: -2.6s;
    }

    .categoria:nth-child(3n) > .categoria__titulo {
        animation-duration: 5.9s;
        animation-delay: -4.1s;
    }
}

@keyframes rotulo-flota {
    0%, 100% { transform: translate3d(0, 0, 0)     rotate(-1.1deg); }
    50%      { transform: translate3d(0, -7px, 0)  rotate(1.1deg); }
}

.categoria__descripcion {
    margin: -10px 0 16px;
    padding-left: 4px;
    font-size: 0.86rem;
}

/* El destello de llegada, en coral: sobre agua clara el azul al 14% de la base
   casi no se ve, y esa señal existe justo para verse. */
@keyframes categoria-llegada {
    0%   { background-color: transparent; }
    22%  { background-color: color-mix(in srgb, var(--color-secundario) 20%, transparent); }
    100% { background-color: transparent; }
}


/* ===========================================================================
   7. LA TARJETA DEL PLATILLO
   ===========================================================================
   Una tarjeta blanca por platillo, en columna. La foto —cuando la hay— va
   arriba a la derecha, REDONDA, y el botón de agregar abajo a la derecha.

   La carta de Chiviricos son más de sesenta renglones y casi ninguno tiene
   fotografía. Por eso la foto es un adorno de la esquina y no el protagonista:
   en cuadrícula, con foto grande, esta carta serían treinta tarjetas medio
   vacías. Y el platillo sin foto no deja hueco: la tarjeta es la misma, solo
   que el texto ocupa todo el ancho y en la esquina queda la mancha de agua.
   =========================================================================== */

.platillos--lista {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.platillos--lista .platillo {
    position: relative;
    display: flex;
    flex-direction: column;      /* la base la pone en fila; aquí manda la columna */

    /* La base trae `align-items: center` para centrar la foto contra el texto
       cuando van en fila. Puesta en columna, eso centra el bloque entero y deja
       los nombres y los precios a media tarjeta. Hay que devolverla a `stretch`
       expresamente: no basta con cambiar la dirección. */
    align-items: stretch;
    padding: 15px 16px;
    background-color: var(--color-superficie);
    border: 1.5px solid color-mix(in srgb, var(--color-primario) 9%, transparent);
    border-radius: var(--radio, 16px);
    box-shadow: 0 3px 14px color-mix(in srgb, var(--color-primario) 10%, transparent);
    overflow: hidden;

    /* CONTEXTO DE APILADO PROPIO
       --------------------------
       Con esto la mancha puede irse a `z-index: -1` y quedar encima del fondo
       de la tarjeta pero DEBAJO del texto, sin que el bloque de datos tenga que
       posicionarse. Y eso importa: cuando `.platillo__datos` era `relative`, el
       botón de agregar se colgaba de ÉL en vez de la tarjeta, y como el bloque
       de datos no llega al borde, el botón subía 33 px y se montaba encima de
       la foto. */
    isolation: isolate;

    /* Lo que se enciende al tocar. `transform` lo anima la hoja base; el resto
       se declara aquí para que el encendido entre y salga suave y no de golpe. */
    transition:
        transform 0.16s ease,
        border-color 0.18s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease;
}

/* LA MANCHA DE AGUA DE LA ESQUINA
   -------------------------------
   Va donde va la foto, arriba a la derecha: con foto queda de fondo, y sin foto
   es lo que ocupa esa esquina para que la tarjeta no se vea coja. Es la pieza
   que hace que un platillo con foto y uno sin foto se parezcan.

   POR QUÉ ES UN DEGRADADO Y NO UN ::before
   ----------------------------------------
   Antes era un círculo absoluto recortado por el `overflow: hidden` de la
   tarjeta. Pero la ficha CON foto ya no puede recortar nada —la foto tiene que
   asomar por el borde—, y sin recorte ese círculo se salía por la esquina.

   Un degradado del fondo no necesita recorte: lo recorta sola la caja al
   pintarse, y respeta el redondeo de la esquina. Misma mancha, sin depender
   del `overflow`. */
.platillos--lista .platillo {
    background-image: radial-gradient(
        circle 92px at calc(100% - 4px) -4px,
        var(--chv-aguada, color-mix(in srgb, var(--color-secundario) 13%, transparent)) 0 100%,
        transparent 100%);
}

/* Y alterna INVERTIDA respecto al rótulo: la categoría de rótulo azul lleva la
   aguada coral, y la de rótulo coral la lleva azul. Así cada sección se
   distingue de la de al lado por los dos lados a la vez.

   Mismo selector que los rótulos —`:nth-child(even of .categoria)`— para que no
   se descuadren entre sí. El navegador que no lo entienda se salta la regla y
   deja todas las aguadas en coral: se pierde la alternancia, no se rompe nada. */
.categoria:nth-child(even of .categoria) .platillos--lista .platillo {
    --chv-aguada: color-mix(in srgb, var(--color-primario) 10%, transparent);
}

/* LA FOTO, REDONDA Y EN LA ESQUINA
   --------------------------------
   Fuera del flujo, para que el texto no tenga que rodearla: se le deja sitio
   con un `padding-right` en el nombre y la descripción, y solo cuando hay foto
   que esquivar. Sin foto no hay marco ni hueco —regla del contrato—: la clase
   `platillo--sinmarco` la pone /core y aquí se aprovecha tal cual. */
/* LA FICHA CON FOTO DEJA DE RECORTAR
   ----------------------------------
   La foto asoma por el borde derecho, así que esta ficha no puede llevar
   `overflow: hidden`. Solo la que tiene foto: la que no la tiene no gana nada
   y mejor se queda recortando. */
.platillos--lista .platillo:not(.platillo--sinmarco) {
    overflow: visible;

    /* Con foto arriba y botón abajo, los dos a la derecha, la tarjeta necesita
       alto para que no se toquen. Sin foto no hace falta y queda compacta. */
    min-height: 144px;
}

/* LA FOTO: REDONDA, CON ARO BLANCO Y ASOMANDO
   -------------------------------------------
   El aro blanco es lo que la despega de la tarjeta y hace que se lea como una
   foto puesta encima y no como un hueco recortado. Y el giro de tres grados es
   lo que le quita el aire de plantilla: una foto perfectamente a escuadra
   parece un marcador de posición.

   Asoma por la esquina, pero poco: con 10 px de desplazamiento el borde de la
   foto acababa a TRES píxeles del canto de la pantalla en un celular de 390 —
   no desbordaba, pero se veía apretujado, y en un teléfono de esquinas
   redondeadas se habría comido. Con 2 px asoma igual y respira.

   El alto mínimo de la ficha (144) sale de aquí: la foto GIRADA ocupa más caja
   que su diámetro, y al tocarla gira más y crece un 5%. Con 138 el botón de
   agregar le quedaba a 3 px en reposo y se le montaba encima al tocar. */
.platillos--lista .platillo__foto {
    position: absolute;
    top: -6px;
    right: -2px;
    width: 82px;
    height: 82px;
    aspect-ratio: auto;
    border: 4px solid #fff;
    border-radius: 50%;
    overflow: hidden;
    z-index: 2;
    box-shadow: 0 5px 16px color-mix(in srgb, var(--color-primario) 26%, transparent);
    transform: rotate(3deg);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* El texto nunca se mete debajo de la foto. En la maqueta la descripción pasa
   por detrás y se queda a medias ("con finas ..."), y una descripción cortada
   por un adorno es una descripción que no se puede leer: se le deja su sitio. */
.platillos--lista .platillo:not(.platillo--sinmarco) .platillo__nombre,
.platillos--lista .platillo:not(.platillo--sinmarco) .platillo__descripcion {
    padding-right: 86px;
}

/* EL PRECIO SE VA AL FONDO DE LA TARJETA
   --------------------------------------
   Un platillo con foto y sin descripción —los hay— dejaba un hueco entre el
   precio y el borde de abajo, porque la tarjeta con foto tiene alto mínimo para
   que la foto y el botón no se toquen. Con `margin-top: auto` el precio baja a
   emparejarse con el botón y el hueco desaparece: precio a la izquierda, botón
   a la derecha, foto arriba. Que es como está en el diseño.

   Solo `.platillo__datos` es hijo de flujo de la tarjeta: la foto, el botón y
   la mancha son absolutos y no cuentan como elementos flex. */
.platillos--lista .platillo__datos {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 0;
}

.platillos--lista .platillo__pie { margin-top: auto; }

/* EL PLATILLO CON FOTO Y SIN DESCRIPCIÓN
   --------------------------------------
   La ficha con foto tiene alto mínimo para que la foto y el botón no se toquen.
   Si además el platillo no lleva descripción —los hay—, entre el nombre y el
   precio queda un vacío del alto de dos renglones que no es de nadie.

   Cuando no hay descripción que colocar, el bloque se centra en vez de
   repartirse a los extremos. Se detecta con `:has()`, que es lo que sabe si
   dentro hay descripción o no; el navegador que no lo entienda se salta la
   regla y se queda con el reparto de antes, que tampoco está roto. */
.platillos--lista .platillo__datos:not(:has(.platillo__descripcion)) {
    justify-content: center;
}

.platillos--lista .platillo__datos:not(:has(.platillo__descripcion)) .platillo__pie {
    margin-top: 0;
    padding-top: 14px;
}

.platillos--lista .platillo__nombre {
    margin: 0 0 3px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-primario);
    transition: color 0.18s ease;
}

.platillos--lista .platillo__descripcion {
    margin: 0;
    font-size: 0.83rem;
    line-height: 1.45;
    -webkit-line-clamp: 3;
}

.platillos--lista .platillo__pie {
    padding-top: 10px;
    padding-right: 46px;        /* el sitio del botón de agregar */
    justify-content: flex-start;
    align-items: flex-end;
}

/* EL PRECIO, EN SU PASTILLA
   -------------------------
   El coral del panel como TEXTO sobre blanco da 2.4:1 y el precio es lo último
   que uno puede permitirse que no se lea. Con la pastilla de coral lavado
   detrás y el coral quemado delante se ve igual de coral y llega a 5:1. */
.platillo__precio {
    display: inline-block;
    padding: 5px 13px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-secundario) 17%, #fff);
    color: var(--chv-coral-tinta);
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: background-color 0.18s ease, color 0.18s ease;
}

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

/* "VER OPCIONES" EN LUGAR DEL PRECIO
   ---------------------------------
   El platillo que obliga a elegir ya no enseña el precio de la opción más
   barata: enseña esto. Va en la misma pastilla y en el mismo sitio para que la
   carta no baile cuando unos platillos tienen opciones y otros no.

   Un punto más chico que un precio —"Ver opciones" es el doble de largo que
   "$195.00"— y con su flechita, que es lo que dice que ahí se abre algo. La
   flecha va dibujada con dos bordes girados y no con un ">" de texto: un
   carácter cambia de forma con cada tipografía y no se puede alinear fino. */
.platillo__precio--opciones {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.83rem;
    letter-spacing: 0.03em;
}

.platillo__precio--opciones::after {
    content: '';
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
}

/* El botón de agregar, en la esquina de abajo. Círculo de coral lavado con el
   signo en coral quemado; al tocar la tarjeta se rellena. */
.platillos--lista .platillo__agregar {
    position: absolute;
    right: 13px;
    bottom: 13px;
    z-index: 2;
}

.platillo__agregar {
    width: 38px;
    height: 38px;
    background: color-mix(in srgb, var(--color-secundario) 24%, #fff);
    color: var(--chv-coral-tinta);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.14s ease;
}


/* ---------------------------------------------------------------------------
   AL TOCAR LA FICHA: SE ENCIENDE
   ---------------------------------------------------------------------------
   La tarjeta se tiñe de coral, el nombre pasa a coral, el botón se rellena de
   azul y la foto gira un poco. Es la respuesta al toque: sin ella la persona no
   sabe si el sistema la escuchó, vuelve a tocar, y termina pidiendo dos veces
   lo mismo.

   POR QUÉ `:active` Y EL `:hover` APARTE
   --------------------------------------
   En un celular el `:hover` se queda PEGADO después de tocar: la ficha se
   quedaría encendida hasta que se toque otra cosa, y con dos o tres encendidas
   a la vez el encendido deja de significar nada. `@media (hover: hover)` lo
   deja solo donde hay un ratón de verdad; en el celular manda `:active`, que
   dura lo que dura el dedo encima.

   Nada de esto se aplica al platillo agotado: encenderlo sería prometer que se
   puede pedir. */
.platillo:not(.platillo--agotado):active,
.platillo:not(.platillo--agotado):focus-visible {
    border-color: color-mix(in srgb, var(--color-primario) 55%, transparent);
    background-color: color-mix(in srgb, var(--color-secundario) 9%, #fff);
    box-shadow: 0 6px 22px color-mix(in srgb, var(--color-secundario) 38%, transparent);
}

.platillo:not(.platillo--agotado):active .platillo__nombre,
.platillo:not(.platillo--agotado):focus-visible .platillo__nombre {
    color: var(--chv-coral-tinta);
}

.platillo:not(.platillo--agotado):active .platillo__agregar,
.platillo:not(.platillo--agotado):focus-visible .platillo__agregar {
    background: var(--color-primario);
    color: #fff;
}

.platillo:not(.platillo--agotado):active .platillo__precio,
.platillo:not(.platillo--agotado):focus-visible .platillo__precio {
    background: color-mix(in srgb, var(--color-primario) 12%, #fff);
    color: var(--color-primario);
}

/* La foto gira apenas y crece un pelo. Cuatro grados: se nota que algo
   respondió y no se lee como que la foto se torció. */
/* Al tocar, la foto se ladea un poco más y crece un pelo. De 3 a 7 grados: se
   nota que algo respondió y no se lee como que la foto se torció. */
.platillo:not(.platillo--agotado):active .platillo__foto,
.platillo:not(.platillo--agotado):focus-visible .platillo__foto {
    transform: rotate(7deg) scale(1.05);
}

@media (hover: hover) {
    .platillo:not(.platillo--agotado):hover {
        border-color: color-mix(in srgb, var(--color-primario) 55%, transparent);
        background-color: color-mix(in srgb, var(--color-secundario) 9%, #fff);
        box-shadow: 0 6px 22px color-mix(in srgb, var(--color-secundario) 38%, transparent);
    }

    .platillo:not(.platillo--agotado):hover .platillo__nombre { color: var(--chv-coral-tinta); }

    .platillo:not(.platillo--agotado):hover .platillo__agregar {
        background: var(--color-primario);
        color: #fff;
    }

    .platillo:not(.platillo--agotado):hover .platillo__precio {
        background: color-mix(in srgb, var(--color-primario) 12%, #fff);
        color: var(--color-primario);
    }

    .platillo:not(.platillo--agotado):hover .platillo__foto {
        transform: rotate(7deg) scale(1.05);
    }
}

.platillo--agotado { opacity: 0.55; }
.platillo--agotado { background-image: none; }
.platillo--agotado .platillo__precio {
    background: color-mix(in srgb, var(--color-texto-suave) 14%, #fff);
    color: var(--color-texto-suave);
}

.etiqueta--destacado { background: var(--color-primario); color: #fff; }
.etiqueta--agotado   { background: #5A6672; color: #fff; }


/* ===========================================================================
   7-bis. LA CARTA EN CUADRÍCULA
   ===========================================================================
   El tema viene en LISTA, que es lo que pide esta carta. La cuadrícula queda
   resuelta por si un día fotografían los platillos: se cambia con una línea en
   config/theme.php, sin tocar el tema.
   =========================================================================== */

.platillos--cuadricula { gap: 14px; }

.platillos--cuadricula .platillo {
    position: relative;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--color-primario) 10%, transparent);
    box-shadow: 0 3px 14px color-mix(in srgb, var(--color-primario) 10%, transparent);
}

.platillos--cuadricula .platillo::before {
    content: '';
    position: absolute;
    right: -34px;
    bottom: -34px;
    width: 108px;
    height: 108px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-secundario) 14%, transparent);
    pointer-events: none;
}

.platillos--cuadricula .platillo__foto,
.platillos--cuadricula .platillo__datos { position: relative; z-index: 1; }

.platillos--cuadricula .platillo__nombre {
    color: var(--color-primario);
    font-size: 0.96rem;
    font-weight: 600;
}

/* EL PLATILLO QUE SE QUEDA SOLO EN SU RENGLÓN
   -------------------------------------------
   Lo resuelve la hoja base: ocupa el renglón entero y se pone la foto al lado.

   Aquí había una regla que le mandaba la mancha al extremo IZQUIERDO, con la
   idea de que a la derecha caería debajo del precio. Estaba al revés: en esa
   forma apaisada el precio queda a la IZQUIERDA —el texto va a ese lado y la
   foto al otro—, así que moverla ahí es justo lo que la metía detrás del
   precio y lo dejaba sobre una mancha rosa.

   Se quita la regla. En su sitio de siempre, abajo a la derecha, la mancha cae
   del lado de la foto, que es donde no estorba a nada. */


/* ===========================================================================
   8. BOTONES Y PROMOCIONES
   =========================================================================== */

.boton--primario {
    background: var(--color-primario);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 3px 12px color-mix(in srgb, var(--color-primario) 26%, transparent);
}

.promo {
    border-radius: var(--radio, 16px);
    overflow: hidden;
    box-shadow: 0 4px 18px color-mix(in srgb, var(--color-primario) 16%, transparent);
}

.promos__punto { background: color-mix(in srgb, var(--color-primario) 24%, transparent); }
.promos__punto--activo { background: var(--color-primario); }


/* ===========================================================================
   9. "TU PESCA" — la barra del pedido
   ===========================================================================
   Barra azul flotando sobre la carta, con el velero a la izquierda, el total
   despegado en coral y el botón en blanco. Es la única pieza oscura de la
   pantalla: no hay forma de perderla de vista, y es la que hace falta a cada
   momento.

   El HTML es propio (templates/partials/barra-bolsa.php): el rótulo "Tu pesca"
   y el total en su columna no salen de la plantilla base.
   =========================================================================== */

.bolsa__caja {
    gap: 10px;
    padding: 10px 10px 10px 14px;
    background: var(--chv-azul-hondo);
    border-color: transparent;
    box-shadow: 0 8px 28px color-mix(in srgb, var(--color-primario) 38%, transparent);
    color: #fff;
}

/* El velero y su punto de aviso. */
.bolsa__marca {
    position: relative;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.bolsa__velero { display: block; }

/* El punto de coral. No lleva número a propósito —está explicado en la
   plantilla—: el JS del tema base solo rellena el PRIMER `data-bolsa-articulos`
   que encuentra, y el número se lee mucho mejor en "3 productos" que en un
   globito de 10 px. Aquí basta con avisar de que hay algo. */
.bolsa__punto {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-secundario);
    border: 2px solid var(--chv-azul-hondo);
}

.bolsa__datos { min-width: 0; }

/* "Tu pesca". Va en versalitas y no en manuscrita: es una etiqueta, y la
   manuscrita a 11 px se emborrona. */
.bolsa__sucursal,
.bolsa--unica .bolsa__sucursal {
    font-family: var(--fuente-textos);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: #fff;
}

.bolsa__resumen,
.bolsa--unica .bolsa__resumen,
.bolsa--sin-sucursal .bolsa__resumen {
    font-size: 0.78rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.78);
}

.bolsa__local {
    display: block;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* EL TOTAL, EN SU COLUMNA
   -----------------------
   Despegado del resumen y en coral, como en el diseño. `flex: 0 0 auto` para
   que no lo encoja nadie y `tabular-nums` para que no baile al cambiar de
   cifra. Es el dato que la gente mira antes de decidir. */
.bolsa__total {
    flex: 0 0 auto;
    font-family: var(--fuente-titulos);
    font-size: 1.15rem;
    font-weight: 800;

    /* El coral del panel sobre el azul de la barra da 3.53:1, por debajo del
       mínimo. Y de todos los números de la carta, este es el que menos puede
       costar leer: es por el que la gente decide si sigue o no. Con el coral
       aclarado sube a 4.8:1 y a simple vista es el mismo coral. */
    color: var(--chv-coral-claro);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.bolsa__boton {
    flex: 0 0 auto;
    background: #fff;
    color: var(--chv-azul-hondo);
    font-weight: 700;
    padding: 11px 16px;
    border-radius: var(--radio-chico, 10px);
}

/* LA BARRA TAMBIÉN FLOTA
   ----------------------
   Es la pieza que de verdad está flotando: no la sujeta nada, se queda encima
   de la carta mientras todo lo demás se desplaza por debajo. Un vaivén muy
   corto la termina de asentar como algo que está sobre el agua.

   TRES PASOS ARRIBA Y TRES ABAJO, NO MÁS. Aquí dentro está el botón de ver el
   pedido, y un botón que se mueve es un botón que se falla: a 3 px el dedo ni
   se entera —el área que se toca sigue midiendo lo mismo— y el ojo sí. Por eso
   este vaivén es la mitad de grande y bastante más lento que el de los rótulos.

   Se anima la CAJA y no `.bolsa`, que es la que lleva el degradado que funde
   la carta por debajo: moviendo el degradado se vería el borde subir y bajar. */
@media (prefers-reduced-motion: no-preference) {
    .bolsa__caja { animation: bolsa-flota 5.4s ease-in-out infinite; }
}

@keyframes bolsa-flota {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(0, -3px, 0); }
}

/* QUE QUEPA TODO, Y QUE EL TOTAL NUNCA SE CORTE
   ---------------------------------------------
   La barra tiene que meter cinco cosas: el velero, "Tu pesca", "3 productos",
   el total y el botón. En 390 px —el ancho de celular más común— van justas,
   así que se aprieta un poco todo antes que quitar nada.

   EL VELERO SOLO SE VA POR DEBAJO DE 340 px, que es territorio de teléfonos
   viejos. Es la pieza que el cliente pidió por su nombre; esconderla en el
   ancho más común sería quitar justo lo que se vino a poner. */
@media (max-width: 430px) {
    .bolsa__caja { gap: 8px; padding: 9px 9px 9px 12px; }
    .bolsa__marca { width: 36px; height: 36px; }
    .bolsa__velero { width: 23px; height: 23px; }
    .bolsa__total { font-size: 1.02rem; }
    .bolsa__boton { padding: 10px 12px; font-size: 0.83rem; }
}

@media (max-width: 340px) {
    .bolsa__marca { display: none; }
}


/* ===========================================================================
   10. VENTANAS: POPUP, CARRITO Y CHECKOUT
   ===========================================================================
   Todo esto se hereda de la hoja base, que está pensada para fondo oscuro.
   Sobre blanco hay cuatro cosas que se vuelven invisibles y hay que darles la
   vuelta: los realces en blanco translúcido, los rojos claros de los avisos de
   error, el velo del fondo y las sombras.
   =========================================================================== */

/* El velo de las ventanas. El de la base es negro al 60%, que sobre una carta
   clara es un apagón; este es el azul del mar y se ve como agua honda. */
.modal__fondo {
    background: color-mix(in srgb, var(--color-primario) 64%, rgba(0, 0, 0, 0.5));
}

.modal__caja,
.carrito__caja {
    box-shadow: 0 -8px 40px color-mix(in srgb, var(--color-primario) 24%, transparent);
}

/* El botón de cerrar del popup. La base lo pinta como un círculo negro al 55%,
   pensado para despegarse de la FOTO del platillo. Casi ningún platillo de
   Chiviricos tiene foto: ese círculo cae sobre el blanco del popup y se ve como
   una mancha gris pegada. Sólido y del azul de la marca queda intencionado. */
.modal__cerrar,
.modal__compartir { background: var(--chv-azul-hondo); }

.modal__titulo,
.carrito__titulo,
.grupo__titulo,
.linea__nombre { color: var(--color-primario); }

.modal__titulo {
    font-family: 'Chiviricos Manuscrita', var(--fuente-titulos), cursive;
    font-size: 1.75rem;
    line-height: 1.2;
}

/* Realces que en la base son blanco translúcido: sobre blanco no existen. */
.opcion:not(.opcion--agotada):not(.opcion--bloqueada):hover {
    background: color-mix(in srgb, var(--color-primario) 5%, transparent);
}

.carrito__cabecera .modal__cerrar {
    background: color-mix(in srgb, var(--color-primario) 8%, transparent);
    color: var(--color-primario);
}

.aviso__accion:hover,
.contador__boton:hover {
    background: color-mix(in srgb, var(--color-primario) 10%, transparent);
}

/* Los avisos de error. El #FCA5A5 de la base es un rosa pensado para fondo
   oscuro: sobre blanco da 2.1:1 y no se lee. Este rojo da 5.9:1. */
.modal__aviso,
.checkout__aviso,
.campo-c__error,
.linea__quitar:hover,
.linea__quitar:focus-visible { color: #B02318; }

.opcion__precio--libre { color: var(--chv-coral-tinta); }
.linea__precio { color: var(--chv-coral-tinta); }

/* Los campos del formulario. 16 px o más de letra: por debajo de eso el iPhone
   acerca la pantalla al tocarlos y el checkout se descoloca. */
.campo-c__control,
.nota__campo {
    background: var(--color-superficie);
    font-size: 1rem;
}

.campo-c__control:focus,
.nota__campo:focus { border-color: var(--color-primario); }

.segmentado__opcion input:checked + span {
    background: var(--color-primario);
    color: #fff;
}


/* ===========================================================================
   11. EL PIE
   ===========================================================================
   Fondo casi negro con reflejo azul, logotipo en blanco, una lista de
   renglones y la vieira antes de las redes. La carta cae en él por una ola en
   lugar de por una línea recta: es el mismo trazo que lleva el logotipo debajo
   del nombre, y se mece despacio.

   POR QUÉ EL PIE ES CASI NEGRO Y NO EL AZUL DE LA MARCA
   -----------------------------------------------------
   El diseño pide el acento en AZUL sobre el pie: el guion de cada renglón, la
   flecha, la vieira, los separadores. Con el pie del mismo azul de la marca,
   ese acento sería azul sobre azul y no existiría. Con el fondo casi negro el
   azul del panel se enciende y hace de acento.

   Sigue saliendo de la variable del panel —es el primario rebajado casi a
   negro—, así que si el dueño cambia su azul, el pie cambia con él.
   =========================================================================== */

:root {
    --chv-pie-fondo: color-mix(in srgb, var(--color-primario) 16%, #05080C);

    /* El azul del panel sobre casi negro da 2.5:1: sirve de acento gráfico
       —guiones, flechas, líneas— pero NO para escribir. Para el texto azul va
       este otro, aclarado, que pasa de sobra. */
    --chv-pie-azul: color-mix(in srgb, var(--color-primario) 45%, #fff);
}

.pie {
    margin-top: 60px;
    padding: 78px var(--espacio) 34px;   /* 40 de la ola + el aire de siempre */
    border-top: 0;
    background: var(--chv-pie-fondo);
    color: rgba(255, 255, 255, 0.72);
    text-align: center;
    overflow: hidden;
}

/* --- La ola ---------------------------------------------------------------
   Son dos capas de la MISMA máscara (img/ola.svg): la de atrás 5 px más abajo
   y en azul, lo que deja un hilo azul siguiendo la curva. Los dos colores
   salen de las variables del panel, así que la ola cambia con la paleta.

   Se salen 16 px por cada lado A PROPÓSITO: es el margen que necesitan para
   mecerse sin que asome el borde de la máscara por ninguna punta. */
.pie::before,
.pie::after {
    content: '';
    position: absolute;
    left: -16px;
    right: -16px;
    height: 40px;
    pointer-events: none;
    -webkit-mask: url('../img/ola.svg') 0 0 / 100% 100% no-repeat;
            mask: url('../img/ola.svg') 0 0 / 100% 100% no-repeat;
}

/* La capa de atrás: el hilo azul. */
.pie::before {
    top: 5px;
    background: var(--color-primario);
}

/* La de delante: el agua de la carta bajando dentro del pie.

   Si un navegador no entendiera `mask`, esta capa sería una barra lisa del
   color del fondo pegada al borde de arriba del pie: no se vería la ola, pero
   tampoco se rompería nada. */
.pie::after {
    top: 0;
    background: var(--color-fondo);
}

/* LA OLA SE MECE
   --------------
   Las dos capas van y vienen unos pocos píxeles, y a ritmos distintos: al no
   ir sincronizadas, el hilo azul se ensancha y se afina despacio a lo largo de
   la curva, que es lo que hace que parezca agua y no una imagen deslizándose.

   Diez y trece segundos: tan lento que no se ve moverse, solo se nota que
   nunca está igual. Y solo `transform`, que no repinta nada. */
@media (prefers-reduced-motion: no-preference) {
    .pie::after  { animation: ola-mece 10s ease-in-out infinite; }
    .pie::before { animation: ola-mece 13s ease-in-out infinite reverse; }
}

@keyframes ola-mece {
    0%, 100% { transform: translate3d(-7px, 0, 0); }
    50%      { transform: translate3d(7px, 0, 0); }
}

/* --- La marca -------------------------------------------------------------- */

.pie__marca {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

/* EL LOGOTIPO, EN BLANCO Y SIN PLACA
   ----------------------------------
   Antes llevaba detrás una placa del color del papel, porque el logotipo de
   Chiviricos es negro y sobre un pie oscuro desaparecía. Se quita: el archivo
   que se sube trae SU PROPIO fondo blanco, así que quedaba un recuadro duro
   dentro de la placa redondeada — dos blancos distintos con una costura a la
   vista, que es la línea que se veía.

   En su lugar, el filtro: `brightness(0)` lo aplasta todo a negro y `invert(1)`
   lo pasa a blanco. Sale un logotipo blanco liso sobre el pie oscuro, que es
   como está en el diseño y como cualquier marca resuelve su pie.

   OJO: NECESITA UN PNG CON FONDO TRANSPARENTE. Si el archivo trae fondo
   blanco, el filtro lo convierte en un recuadro negro. Está avisado en la
   entrega. */
.pie__logo {
    height: 92px;
    width: auto;
    max-width: 260px;
    object-fit: contain;
    border-radius: 0;
    padding: 0;
    background: none;
    filter: brightness(0) invert(1);
}

.pie__marca-nombre {
    font-family: 'Chiviricos Manuscrita', var(--fuente-titulos), cursive;
    font-weight: 700;
    font-size: 2.4rem;
    line-height: 1.15;
    color: #fff;
}

/* El lema, con su guion a cada lado. */
.pie__lema {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0;
    max-width: 100%;
    color: var(--chv-pie-azul);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.pie__lema::before,
.pie__lema::after {
    content: '';
    flex: 0 0 auto;
    width: 26px;
    height: 2px;
    background: var(--color-primario);
}

/* --- Los renglones --------------------------------------------------------- */

.pie__menu {
    max-width: 460px;
    margin: 38px auto 0;
    display: flex;
    flex-direction: column;
    text-align: left;
}

/* Cada renglón: el guion azul, el rótulo y la flecha. Todos miden lo mismo y
   se separan con una línea finísima, como en el diseño. */
.pie__fila {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 15px 4px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: none;
    font: inherit;
    color: #fff;
    text-align: left;
    cursor: pointer;
    transition: color 0.16s ease, padding-left 0.16s ease;
}

.pie__fila:last-child { border-bottom: 0; }

/* El guion de la izquierda. Es adorno, así que va en el pseudoelemento y no
   ocupa un hueco propio en el HTML. */
.pie__fila::before {
    content: '';
    flex: 0 0 auto;
    width: 22px;
    height: 2px;
    background: var(--color-primario);
    transition: width 0.16s ease;
}

.pie__fila-texto {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

/* La segunda línea de un renglón: la dirección, el horario de hoy. En minúscula
   y más suave, para que no compita con el rótulo. */
.pie__fila-nota {
    display: block;
    margin-top: 4px;
    font-size: 0.74rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: none;
    color: rgba(255, 255, 255, 0.62);
}

/* La flecha. Dibujada con dos bordes girados en vez de con un carácter: un ">"
   de texto cambia de forma con cada tipografía y no se puede alinear fino. */
.pie__fila-flecha {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-top: 2px solid var(--color-primario);
    border-right: 2px solid var(--color-primario);
    transform: rotate(45deg);
    transition: transform 0.16s ease;
}

/* El renglón del estado no lleva a ningún lado: no es un enlace y no se
   comporta como uno. */
.pie__fila--estado { cursor: default; }
.pie__fila--estado .pie__fila-texto { letter-spacing: 0.1em; }

.pie__estado { display: inline-flex; align-items: center; gap: 8px; }

.pie__estado::before {
    content: '';
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: currentColor;
}

.pie__estado--abierto { color: #6EE7A8; }
.pie__estado--cerrado { color: rgba(255, 255, 255, 0.55); }

@media (hover: hover) {
    .pie__fila:not(.pie__fila--estado):hover { padding-left: 10px; }
    .pie__fila:not(.pie__fila--estado):hover::before { width: 30px; }
    .pie__fila:not(.pie__fila--estado):hover .pie__fila-flecha { transform: rotate(45deg) translate(2px, -2px); }
}

/* EL RENGLÓN DE PROMOCIONES, SOLO SI HAY PROMOCIONES
   --------------------------------------------------
   Es lo único del tema que se decide desde el CSS, y está explicado en la
   plantilla: menu.php no le pasa $banners a este parcial, así que desde PHP no
   hay manera de saberlo, y copiar menu.php entero para arrastrar una variable
   costaría mucho más de lo que arregla.

   `:has()` mira si la página trae banners. El navegador que no lo entienda se
   salta la regla y deja el renglón puesto: lleva al principio de la página,
   que tampoco es ir a ninguna parte. */
body:not(:has(.promos)) .pie__fila--promos { display: none; }

/* --- La vieira ------------------------------------------------------------- */

/* Separa los renglones de las redes. En la maqueta era un icono de 24 px y a
   ese tamaño no se distinguía qué era: parecía una mota. A 40 px se lee la
   vieira, que es de lo que va la marca.

   Va en máscara y no como imagen de color fijo para que siga la paleta: si el
   dueño cambia su azul en el panel, la concha cambia con él. */
.pie__concha {
    display: block;
    width: 40px;
    height: 40px;
    margin: 30px auto 26px;
    background: var(--color-primario);
    -webkit-mask: url('../img/concha.svg') center / contain no-repeat;
            mask: url('../img/concha.svg') center / contain no-repeat;
}

/* --- Las redes ------------------------------------------------------------- */

/* Sin recuadro: solo el icono, separados por una raya, como en el diseño. Los
   botones blancos de antes pesaban más que el propio nombre del restaurante. */
.pie__redes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.pie__red {
    width: 56px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #fff;
    transition: color 0.16s ease;
}

.pie__red + .pie__red { border-left: 1px solid rgba(255, 255, 255, 0.16); }
.pie__red:hover { color: var(--chv-pie-azul); }

/* --- La firma -------------------------------------------------------------- */

/* La firma va CENTRADA a cualquier ancho. La hoja base la pone en fila con
   `space-between` a partir de 760 px —el año a la izquierda y los créditos a la
   derecha, de punta a punta del pie—, que era coherente con su pie de tres
   columnas pero no con este, donde todo cae por el centro en una sola columna.
   Hay que devolver la dirección y la alineación expresamente: cambiar solo el
   `text-align` no deshace un `flex-direction: row`. */
.pie__firma {
    max-width: 460px;
    margin: 30px auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}

.pie__creditos {
    margin: 0 0 10px;
    font-size: 0.76rem;
    line-height: 1.7;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.68);
}

/* Los créditos del desarrollador son obligatorios en el pie: pueden cambiar de
   color, de tamaño y de sitio, pero no pueden desaparecer. */
.creditos-dev { color: rgba(255, 255, 255, 0.55); }
.creditos-dev:hover { color: var(--chv-pie-azul); }


/* ===========================================================================
   12. PANTALLAS GRANDES
   ===========================================================================
   El diseño es de celular —de ahí llegan nueve de cada diez pedidos— y desde
   la tablet crece.
   =========================================================================== */

@media (min-width: 700px) {
    .categoria__titulo { font-size: 1.95rem; }
    .categoria { margin: 50px 0 28px; }
    .platillos--lista .platillo { padding: 18px 20px; }
    .platillos--lista .platillo__nombre { font-size: 1.05rem; }
}

/* Con trece categorías la barra se salía por la derecha en el escritorio y la
   última quedaba cortada a media palabra. Con sitio de sobra se ven todas.
   `centrarChip()` de la hoja base sigue funcionando: al no haber desplazamiento
   que hacer, su `scrollTo` se queda en cero y no mueve nada. */
@media (min-width: 1000px) {
    .chips {
        flex-wrap: wrap;
        overflow-x: visible;
        row-gap: 10px;
    }
}


/* ===========================================================================
   13. MENOS MOVIMIENTO
   ===========================================================================
   La salida obligatoria. Quien lo pidió en su teléfono suele hacerlo por mareo
   o migraña, y no es una preferencia estética. Las burbujas y los rótulos ya se
   quedan quietos por las reglas de arriba: aquí se apaga todo lo demás.
   =========================================================================== */

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}