/*
 * La tienda pública.
 *
 * Los colores salen del logo, no de una paleta inventada: se sacaron contando
 * los píxeles de img/anguzsan-logo-web.png. El logo es alegre —naranjas, rojo,
 * rosa, ámbar sobre pizarra— y una tienda en blanco y gris al lado de ese logo
 * parece de otra empresa.
 *
 * La pizarra es el fondo del propio logo, así que la cabecera y el pie lo
 * llevan: el logo se asienta encima sin recorte que se note.
 */

:root {
    /* Del logo, tal cual */
    --pizarra: #363B4E;
    --fuego: #ED5A26;
    --frambuesa: #FC1D3F;
    --ambar: #FC9D1D;
    --arena: #F8CE86;
    --rosa: #F1ACBE;
    --salmon: #F4AE94;

    /* Derivados para el papel y los bordes */
    --crema: #FDF7EF;
    --crema-honda: #F6EADA;
    --pizarra-clara: #4A5165;
    --texto-suave: #6B7280;

    --curva: 14px;
    --sombra: 0 1px 2px rgba(54, 59, 78, .06), 0 8px 24px rgba(54, 59, 78, .08);
    --sombra-alta: 0 4px 8px rgba(54, 59, 78, .10), 0 16px 40px rgba(54, 59, 78, .14);
}

body {
    background-color: var(--crema);
    color: var(--pizarra);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

a {
    color: var(--fuego);
    text-decoration: none;
}

a:hover {
    color: var(--frambuesa);
}

/* -- Cabecera ----------------------------------------------------------- */

.cabecera {
    background: var(--pizarra);
    color: #fff;
}

.cabecera .logo {
    height: 46px;
    display: block;
}

/*
 * La cinta de colores del logo, de lado a lado bajo la cabecera. Es lo que
 * ata la página al logo sin tener que llenarla de color.
 */
.cinta {
    height: 5px;
    background: linear-gradient(
        to right,
        var(--fuego) 0 20%,
        var(--ambar) 20% 40%,
        var(--frambuesa) 40% 60%,
        var(--rosa) 60% 80%,
        var(--arena) 80% 100%
    );
}

.buscador .form-control {
    border: 0;
    border-radius: 999px;
    padding: .6rem 1.1rem;
    background: #fff;
}

.buscador .form-control::placeholder {
    color: var(--texto-suave);
}

.buscador .form-control:focus {
    box-shadow: 0 0 0 .25rem rgba(252, 157, 29, .35);
}

/* -- Botones ------------------------------------------------------------ */

.btn-tienda {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--fuego);
    --bs-btn-border-color: var(--fuego);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #D64A18;
    --bs-btn-hover-border-color: #D64A18;
    --bs-btn-active-bg: #C24314;
    --bs-btn-active-border-color: #C24314;
    --bs-btn-focus-shadow-rgb: 237, 90, 38;
    --bs-btn-disabled-bg: var(--salmon);
    --bs-btn-disabled-border-color: var(--salmon);
    border-radius: 999px;
    font-weight: 600;
    padding: .55rem 1.4rem;
}

.btn-tienda-suave {
    --bs-btn-color: var(--pizarra);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--crema-honda);
    --bs-btn-hover-color: var(--fuego);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: var(--fuego);
    --bs-btn-focus-shadow-rgb: 237, 90, 38;
    border-radius: 999px;
    font-weight: 600;
}

/* La burbuja con cuántos artículos hay en el carrito. */
.cuantos-carrito {
    display: inline-block;
    min-width: 1.5em;
    background: #fff;
    color: var(--fuego);
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 800;
    padding: 0 .35em;
    margin-left: .25rem;
}

/* -- Portada ------------------------------------------------------------ */

.presentacion {
    background: linear-gradient(135deg, var(--arena), var(--rosa));
    border-radius: var(--curva);
    padding: 2.5rem 2rem;
    color: var(--pizarra);
}

.presentacion h1 {
    font-weight: 800;
    letter-spacing: -.02em;
}

/* La presentación de una categoría, cuando la hay escrita. */
.presentacion-categoria {
    background: #fff;
    border: 1px solid var(--crema-honda);
    border-left: 5px solid var(--ambar);
    border-radius: 10px;
    padding: 1rem 1.2rem;
    font-size: .95rem;
}

/* -- Categorías --------------------------------------------------------- */

.categoria {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    background: #fff;
    border: 1px solid var(--crema-honda);
    border-left: 5px solid var(--fuego);
    border-radius: 10px;
    padding: .7rem .9rem;
    color: var(--pizarra);
    font-weight: 600;
    font-size: .92rem;
    height: 100%;
    transition: transform .12s ease, box-shadow .12s ease;
}

.categoria:hover {
    color: var(--pizarra);
    transform: translateY(-2px);
    box-shadow: var(--sombra);
}

/*
 * El borde de cada categoría va rotando por los cinco colores del logo. Con
 * 133 categorías, uno solo sería una pared de rayas iguales.
 */
.categoria:nth-child(5n+2) { border-left-color: var(--ambar); }
.categoria:nth-child(5n+3) { border-left-color: var(--frambuesa); }
.categoria:nth-child(5n+4) { border-left-color: var(--rosa); }
.categoria:nth-child(5n+5) { border-left-color: var(--arena); }

.categoria .cuantos {
    background: var(--crema);
    color: var(--texto-suave);
    border-radius: 999px;
    padding: .1rem .6rem;
    font-size: .78rem;
    font-weight: 700;
    flex: none;
}

/* -- Tarjeta de producto ------------------------------------------------ */

.ficha {
    background: #fff;
    border: 1px solid var(--crema-honda);
    border-radius: var(--curva);
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform .12s ease, box-shadow .12s ease;
}

.ficha:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra-alta);
}

.ficha .retrato {
    background: #fff;
    padding: 1rem;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ficha .retrato img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.ficha .cuerpo {
    padding: .9rem 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    border-top: 1px solid var(--crema-honda);
}

.ficha .nombre {
    color: var(--pizarra);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: .25rem;
}

.ficha .marca {
    color: var(--texto-suave);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.precio {
    color: var(--frambuesa);
    font-weight: 800;
    font-size: 1.25rem;
    line-height: 1.1;
}

.precio-grande {
    font-size: 2rem;
}

.letra-chica {
    color: var(--texto-suave);
    font-size: .78rem;
}

/* -- Ficha grande ------------------------------------------------------- */

.retrato-grande {
    background: #fff;
    border: 1px solid var(--crema-honda);
    border-radius: var(--curva);
    padding: 1.5rem;
    /*
     * El hueco reservado antes de que llegue la foto.
     *
     * Sin esto la ficha se pinta con la caja a cero y da un salto cuando carga
     * la imagen: el precio y el botón de comprar se mueven bajo el dedo. Google
     * lo mide —es la parte de «estabilidad visual» de Core Web Vitals— y las
     * fotos de producto son cuadradas o casi, así que el cuadrado no deforma
     * nada.
     */
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.retrato-grande img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/*
 * El pase de fotos de la ficha.
 *
 * Sin un solo guion: la tira se desplaza con `scroll-snap`, que lo trae el
 * navegador, y las miniaturas de debajo son enlaces a un ancla. Pulsar una
 * lleva a su foto porque el navegador salta al ancla, y `scroll-behavior`
 * hace que el salto se vea como un pase.
 *
 * Se eligió así porque las fotos son lo que decide una compra: no pueden
 * depender de que cargue un guion.
 */
.pase-de-fotos {
    background: #fff;
    border: 1px solid var(--crema-honda);
    border-radius: var(--curva);
    padding: 1.5rem;
}

.pase {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 1rem;
    /* La barra de desplazamiento estorba: la tira ya se entiende por las
       miniaturas y por la foto cortada del borde. */
    scrollbar-width: none;
}

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

.pase-foto {
    flex: 0 0 100%;
    scroll-snap-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    /*
     * El ancla se para donde empieza la tira y no arriba del todo de la
     * página: sin esto, pulsar una miniatura mandaba el pase al principio del
     * documento y la ficha se iba de la pantalla.
     */
    scroll-margin-top: 0;
}

.pase-foto {
    /* El mismo hueco reservado que en la foto suelta, por lo mismo. */
    aspect-ratio: 1;
}

.pase-foto img {
    max-height: 100%;
    object-fit: contain;
}

.pase-miniaturas {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 1rem;
}

.pase-miniatura {
    display: block;
    border: 1px solid var(--crema-honda);
    border-radius: 8px;
    padding: 2px;
    background: #fff;
    line-height: 0;
}

.pase-miniatura:hover,
.pase-miniatura:focus-visible {
    border-color: var(--fuego);
}

.pase-miniatura img {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.panel {
    background: #fff;
    border: 1px solid var(--crema-honda);
    border-radius: var(--curva);
    padding: 1.5rem;
}

.migas {
    font-size: .85rem;
    color: var(--texto-suave);
}

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

.migas a:hover {
    color: var(--fuego);
}

/* Sin existencias. Avisa, no prohíbe: se puede comprar igual. */
.agotado {
    color: var(--fuego);
    font-size: .76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* -- Paginador ---------------------------------------------------------- */

.paginador .page-link {
    color: var(--pizarra);
    border-color: var(--crema-honda);
}

.paginador .page-link:hover {
    color: var(--fuego);
    background: #fff;
}

.paginador .active .page-link {
    background: var(--fuego);
    border-color: var(--fuego);
    color: #fff;
}

/* -- Pie ---------------------------------------------------------------- */

.pie {
    background: var(--pizarra);
    color: rgba(255, 255, 255, .75);
    font-size: .88rem;
}

.pie a {
    color: var(--arena);
}

.pie a:hover {
    color: #fff;
}

.pie h2 {
    color: #fff;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: .6rem;
}

/* -- WhatsApp ----------------------------------------------------------- */

/*
 * El botón de atención al cliente, fijo abajo a la derecha.
 *
 * Se queda por encima de todo salvo de los avisos, y se aparta del borde lo
 * suficiente para no taparle a nadie el botón de comprar en el móvil.
 */
.whatsapp {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .3);
    transition: transform .15s ease-in-out;
}

.whatsapp:hover,
.whatsapp:focus {
    color: #fff;
    transform: scale(1.08);
}

.whatsapp svg {
    width: 2rem;
    height: 2rem;
    fill: currentColor;
}

/* A quien tenga puesto que no quiere animaciones, no se le mueve. */
@media (prefers-reduced-motion: reduce) {
    .whatsapp {
        transition: none;
    }

    .whatsapp:hover,
    .whatsapp:focus {
        transform: none;
    }
}

/* -- Después de pagar --------------------------------------------------- */

/*
 * El sello de que ha salido bien. Es lo primero que se mira al volver de la
 * pasarela, y hasta ahora lo primero era una lista de importes.
 */
.marca-de-pagado {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: .75rem;
    border-radius: 50%;
    background: #1f8a4c;
    color: #fff;
    font-size: 2rem;
    line-height: 1;
}

/* Mientras el aviso de la pasarela no ha entrado: ni bien ni mal, esperando. */
.marca-en-espera {
    background: var(--arena, #e8c39e);
    color: var(--pizarra, #363b4e);
}

/* -- Aviso de cookies --------------------------------------------------- */

.aviso-cookies {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 1040;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    max-width: 62rem;
    margin: 0 auto;
    padding: 1rem 1.25rem;
    border-radius: 10px;
    background: var(--pizarra, #363b4e);
    color: rgba(255, 255, 255, .9);
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .3);
    font-size: .9rem;
}

.aviso-cookies a {
    color: var(--arena, #e8c39e);
}

/* Con el aviso puesto, el botón de WhatsApp se sube para no taparse. */
.aviso-cookies:not([hidden]) ~ .whatsapp {
    bottom: 6.5rem;
}

/*
 * En el móvil el aviso se come dos filas de resultados.
 *
 * El texto en pantalla estrecha ocupa cuatro renglones y con los botones deja
 * el aviso en 200 px de alto, fijo abajo: quien busca algo ve la primera fila
 * de productos y el resto tapado hasta que lo cierra. Se acorta el texto —el
 * detalle sigue a un toque, en la página de privacidad—, se aprieta el
 * espaciado y los botones se ponen en línea con él.
 */
@media (max-width: 575.98px) {
    .aviso-cookies {
        left: .5rem;
        right: .5rem;
        bottom: .5rem;
        padding: .7rem .85rem;
        font-size: .85rem;
        gap: .4rem;
    }

    .aviso-cookies .btn {
        padding: .3rem .7rem;
        font-size: .8rem;
    }

    /* Lo que solo está para explicar se queda fuera en pantalla estrecha. */
    .aviso-cookies .de-sobra-en-movil {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
   Guías

   Contenido, no catálogo. Van a dos columnas: el texto a la izquierda y el
   índice a la derecha.

   Una columna de prosa no puede ser ancha —pasados unos ochenta caracteres se
   pierde el renglón—, así que en una pantalla de 1320 px sobra sitio por
   fuerza. En vez de dejarlo vacío, que se lee como un fallo de maquetación, lo
   ocupa el índice: dice dónde estás, deja saltar de apartado y lleva a las
   categorías, que es el enlace que interesa que se pulse.

   Del ancho del texto se encarga la columna. Aquí NO se le pone max-width al
   artículo: fue el error de la primera versión, porque se lleva por delante
   también la parrilla de fichas.
   --------------------------------------------------------------------------- */
.guia p {
    line-height: 1.7;
}

/*
   En pantalla ancha, la prosa se para en su medida de lectura.

   La columna de la guía mide ahí unos 856 px, que son ciento y pico
   caracteres por línea: demasiados, se pierde el renglón al volver. Los
   120 px que sobran quedan DENTRO de la columna, al lado del índice, y no se
   notan; lo que no se puede es capar también la parrilla de fichas, que fue
   el error de la primera versión.

   Por debajo de 992 px no hace falta: la columna ya es estrecha y el índice
   no sale.
*/
@media (min-width: 992px) {
    .guia > header,
    .guia > p,
    .guia > .alert,
    .guia .seccion-guia > h2,
    .guia .seccion-guia > p {
        max-width: 46rem;
    }
}

/*
   Dentro de la columna de la guía caben tres fichas, no cuatro.

   Las clases de la tarjeta (col-lg-3) miran el ancho de la VENTANA y no el del
   sitio donde caen; en una columna de dos tercios eso deja fichas de 175 px con
   la foto ilegible. Se sobreescribe solo aquí.
*/
@media (min-width: 992px) {
    .guia .seccion-guia .row > [class*='col-'] {
        width: 33.3333%;
    }
}

/* La portada: apaisada y recortada, para que las diez den la misma altura
   aunque el generador devuelva proporciones distintas. */
.portada-guia {
    display: block;
    width: 100%;
    height: auto;
    max-height: 20rem;
    object-fit: cover;
    border-radius: 10px;
}

.portada-tarjeta {
    display: block;
    width: calc(100% + 2.2rem);
    height: 9rem;
    margin: -1rem -1.1rem .35rem;
    object-fit: cover;
    border-radius: 10px 10px 0 0;
}

.indice-guia {
    position: sticky;
    top: 1.5rem;
    padding: 1.25rem 1.4rem;
    border: 1px solid rgba(54, 59, 78, .12);
    border-radius: 10px;
    background: var(--hueso, #f7f3ee);
}

.lista-indice {
    margin: .5rem 0 0;
    padding-left: 1.1rem;
    font-size: .92rem;
    line-height: 1.5;
}

.lista-indice li + li {
    margin-top: .4rem;
}

.lista-categorias {
    list-style: none;
    padding-left: 0;
}

.guia .lead-guia {
    font-size: 1.05rem;
    line-height: 1.6;
}

.seccion-guia {
    scroll-margin-top: 1.5rem;
}

/* El sumario de una guía. Sin el filete de la izquierda: se ve en media
   internet y apunta a un sitio donde no hay nada que mirar. El color va por
   arriba, que es por donde empieza a leerse. */
.sumario {
    padding: 1rem 1.25rem;
    border: 1px solid rgba(54, 59, 78, .1);
    border-top: 2px solid var(--naranja, #e8622a);
    border-radius: 2px 2px 10px 10px;
    background: var(--hueso, #f7f3ee);
}

.sumario ol {
    padding-left: 1.1rem;
}

.tarjeta-guia {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    height: 100%;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(54, 59, 78, .12);
    border-radius: 10px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, transform .15s ease;
}

.tarjeta-guia:hover {
    border-color: var(--naranja, #e8622a);
    transform: translateY(-2px);
}

.tarjeta-guia .emoji-guia {
    font-size: 1.5rem;
    line-height: 1;
}

.tarjeta-guia .titulo-guia {
    font-weight: 600;
    line-height: 1.35;
}

.tarjeta-guia-grande .lead-guia {
    font-size: .9rem;
    color: #6b7280;
    line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   Secciones de la portada y tarjetas de categoría

   La foto es la de un artículo de dentro, no una imagen inventada: junto a
   «Cápsulas» se ve una cápsula que se vende. Ver App\Service\CategoryImages.
   --------------------------------------------------------------------------- */
.categoria-tarjeta {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid rgba(54, 59, 78, .12);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, transform .15s ease;
}

.categoria-tarjeta:hover {
    border-color: var(--naranja, #e8622a);
    transform: translateY(-2px);
}

.categoria-foto {
    display: block;
    width: 100%;
    height: 8.5rem;
    object-fit: contain;
    background: var(--hueso, #f7f3ee);
    padding: .5rem;
}

.categoria-sin-foto {
    height: 8.5rem;
}

.categoria-cuerpo {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .7rem .8rem .8rem;
}

.categoria-nombre {
    font-weight: 600;
    line-height: 1.3;
}

.categoria-texto {
    font-size: .82rem;
    color: #6b7280;
    line-height: 1.45;
}

.categoria-tarjeta .cuantos {
    margin-top: auto;
    padding-top: .35rem;
    font-size: .78rem;
    color: #9ca3af;
}

.seccion-tienda h2 {
    border-bottom: 2px solid var(--naranja, #e8622a);
    padding-bottom: .35rem;
}

/* La casilla trampa para robots: fuera de la vista pero no display:none, que
   algunos la detectan y la saltan. */
.tapada {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.aviso-campana {
    padding: 1rem 1.1rem;
    border: 1px dashed rgba(54, 59, 78, .25);
    border-radius: 10px;
    background: var(--hueso, #f7f3ee);
}

/* ---------------------------------------------------------------------------
   Opiniones

   Las estrellas de elegir van en orden inverso en el HTML para poder pintar de
   la 1 a la que se marca usando solo CSS (~), sin una línea de JavaScript.
   --------------------------------------------------------------------------- */
.opinar-articulo {
    padding: 1rem 0;
    border-top: 1px solid rgba(54, 59, 78, .12);
}

.estrellas-elegir {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: .15rem;
    font-size: 1.8rem;
    line-height: 1;
}

.estrellas-elegir input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.estrellas-elegir label {
    color: #d5d8e0;
    cursor: pointer;
    transition: color .1s ease;
}

.estrellas-elegir input:checked ~ label,
.estrellas-elegir label:hover,
.estrellas-elegir label:hover ~ label {
    color: #f0a500;
}

.estrellas-elegir input:focus-visible + label {
    outline: 2px solid var(--naranja, #e8622a);
    outline-offset: 2px;
}

.estrellas {
    color: #f0a500;
    letter-spacing: .05em;
}

.opinion {
    padding: .9rem 0;
    border-top: 1px solid rgba(54, 59, 78, .1);
}

.opinion .quien {
    font-size: .85rem;
    color: #6b7280;
}

/* ---------------------------------------------------------------------------
   Sugerencias del buscador
   ---------------------------------------------------------------------------
   La lista va en posición absoluta sobre el contenido y no empujándolo: si al
   escribir la página diera un salto, el usuario perdería de vista lo que
   estaba leyendo. El contenedor es relativo para que cuelgue justo del campo.
*/

.buscador-campo {
    position: relative;
    flex: 1 1 auto;
    /* Sin esto el campo no limita a la lista y el desplegable se sale por la
       derecha, como se veía en la captura. */
    min-width: 0;
}

.sugerencias {
    position: absolute;
    z-index: 1080;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    max-height: 60vh;
    overflow-y: auto;
    background: var(--bs-body-bg, #fff);
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .18);

    /*
     * El color se fija aquí y NO se hereda, que es lo que rompía el
     * desplegable: la lista cuelga de la cabecera de la tienda, que tiene su
     * propio color de texto, así que el nombre y el precio salían en claro
     * sobre el fondo blanco de la lista. Las sugerencias estaban ahí, y no se
     * veía ninguna.
     */
    color: #212529;
}

@media (prefers-color-scheme: dark) {
    .sugerencias {
        color: #f8f9fa;
    }
}

.sugerencia {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    /* Sin `inherit`: ver el comentario de arriba. */
    color: inherit;
    text-decoration: none;
    /* Que la fila no crezca con la foto: el alto lo manda el texto. */
    min-height: 0;
}

.sugerencias li.senalada .sugerencia,
.sugerencia:hover,
.sugerencia:focus {
    background: rgba(0, 0, 0, .06);
    text-decoration: none;
}

.sugerencia img {
    width: 44px;
    height: 44px;
    /* Las tres a la vez: sin max-height, una foto alta estira la fila y la
       lista de ocho ocupa media pantalla, que es como se veía. */
    max-width: 44px;
    max-height: 44px;
    object-fit: contain;
    flex: 0 0 auto;
}

/* El nombre se corta con puntos suspensivos en vez de partirse en tres
   líneas: así todas las sugerencias miden lo mismo y la lista se lee de un
   vistazo. */
.sugerencia-nombre {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sugerencia-precio {
    flex: 0 0 auto;
    font-weight: 600;
    white-space: nowrap;
}

/* Qué se lleva el cliente: caja o unidad. Va encima del precio porque es lo
   que hay que leer antes de mirar la cifra. */
.lo-que-lleva {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .82rem;
    opacity: .75;
}

.venta-suelta {
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 10px;
    padding: 12px 14px;
    background: rgba(0, 0, 0, .03);
}

/* Reordenar el carrito arrastrando. El cursor y la opacidad son la única
   señal de que la línea se puede mover: no se añade ningún asa para no meter
   un elemento más en una fila que ya lleva cantidad, precio y quitar. */
.linea-carrito {
    cursor: grab;
}

.linea-carrito.arrastrando {
    opacity: .45;
    cursor: grabbing;
}

.linea-carrito:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

/*
 * El semáforo del almacén de una ficha.
 *
 * Cuatro tramos en vez de un número: quien compra por cajas no sabe si «3» es
 * mucho o poco, pero sí ve de un vistazo cuántos tramos están encendidos.
 *
 * El color va acompañado SIEMPRE de un texto —«Quedan pocas», «Sin
 * existencias»— y no al revés. Un semáforo a secas no lo lee quien no
 * distingue el rojo del verde, que es un 8 % de los hombres.
 */
.almacen {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
}

.almacen-barra {
    display: flex;
    gap: 3px;
    flex: 0 0 auto;
    margin-top: .25rem;
}

.almacen-barra span {
    width: 14px;
    height: 6px;
    border-radius: 3px;
    background: #e3e1dc;
}

.almacen-verde    .almacen-barra .lleno { background: #2e7d32; }
.almacen-amarillo .almacen-barra .lleno { background: #d99400; }
.almacen-rojo     .almacen-barra .lleno { background: #c62828; }
.almacen-gris     .almacen-barra .lleno { background: #9a958c; }

.almacen-verde    strong { color: #2e7d32; }
.almacen-amarillo strong { color: #a06e00; }
.almacen-rojo     strong { color: #c62828; }
.almacen-gris     strong { color: #6f6a62; }

/* Lo que dice la ficha técnica del fabricante: datos sueltos, en lista. */
.caracteristicas {
    list-style: none;
    padding: 0;
    margin: 0;
    color: #5c574f;
}

.caracteristicas li {
    padding: .15rem 0 .15rem 1.1rem;
    position: relative;
}

.caracteristicas li::before {
    content: "·";
    position: absolute;
    left: .35rem;
    font-weight: 700;
}

/* ---------------------------------------------------------------------------
   Ofertas

   El precio de antes va tachado al lado del de ahora, no debajo: en una tarjeta
   de listado, dos líneas de precio descuadran la altura de la fila entera y las
   tarjetas dejan de alinearse.

   Y el porcentaje solo sale en la ficha. En el listado sobra: ahí lo que se
   compara es una tarjeta con otra, no un precio con su pasado.
   --------------------------------------------------------------------------- */
.precio-antes {
    margin-left: .4rem;
    font-size: .85em;
    font-weight: 400;
    color: #6b7280;
    text-decoration: line-through;
}

.etiqueta-oferta {
    display: inline-block;
    margin-left: .5rem;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: var(--frambuesa, #fc1d3f);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    vertical-align: middle;
}

/* La foto de reserva de una guía es cuadrada —es una miniatura de producto— y
   la portada compuesta es apaisada. Se recorta para que las tarjetas de una
   fila midan lo mismo, que si no la del artículo estira su fila entera. */
.portada-de-articulo {
    aspect-ratio: 2 / 1;
    object-fit: contain;
    background: #fff;
}

/* ---------------------------------------------------------------------------
   La tira de marcas

   Se arrastra en horizontal y **no lleva JavaScript**: es desbordamiento con
   scroll-snap, que trae el navegador. Es la misma técnica del pase de fotos de
   la ficha y por el mismo motivo — un carrusel que depende de un guion se queda
   quieto el día que el guion falla.

   La barra se deja a la vista en móvil, que es donde hace de aviso de que hay
   más a la derecha; en escritorio se afina.
   --------------------------------------------------------------------------- */
.tira-marcas {
    display: flex;
    gap: .75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: .25rem;
    padding-bottom: .75rem;
    -webkit-overflow-scrolling: touch;
}

.tira-marcas::-webkit-scrollbar { height: 6px; }
.tira-marcas::-webkit-scrollbar-thumb { background: rgba(54, 59, 78, .25); border-radius: 3px; }

.tira-marcas:focus-visible {
    outline: 2px solid var(--naranja, #e8622a);
    outline-offset: 3px;
}

.marca-tarjeta {
    flex: 0 0 auto;
    width: 8.5rem;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: .75rem .5rem;
    border: 1px solid rgba(54, 59, 78, .12);
    border-radius: 10px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    text-align: center;
    transition: border-color .15s ease, transform .15s ease;
}

.marca-tarjeta:hover {
    border-color: var(--naranja, #e8622a);
    transform: translateY(-2px);
}

.marca-tarjeta img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    border-radius: 6px;
}

/* Sin foto, la inicial. Mejor que un hueco: la tarjeta mantiene su altura y la
   fila no se descuadra. */
.marca-sin-foto {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 6px;
    background: var(--crema, #fdf7ef);
    color: #6b7280;
    font-size: 2rem;
    font-weight: 700;
}

.marca-nombre {
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.25;
}

.marca-cuantos {
    font-size: .72rem;
    color: #6b7280;
}

@media (prefers-reduced-motion: reduce) {
    .marca-tarjeta { transition: none; }
    .tira-marcas { scroll-behavior: auto; }
}

/* La llamada del final de cada sección de guías. Va en línea, no como bloque
   grande: entre dos secciones tiene que separar, no cortar la lectura. */
.cta-seccion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.25rem;
    padding: .9rem 1.1rem;
    border: 1px dashed rgba(54, 59, 78, .22);
    border-radius: 10px;
    background: var(--crema, #fdf7ef);
}


/* ---------------------------------------------------------------------------
   La rejilla que no deja huecos

   Elegir bien el número de columnas no basta y por eso se añadió esto: con once
   tarjetas en filas de cuatro sale 4+4+3, y ese hueco de la última fila se ve.
   Con diecinueve, igual. No hay número de columnas que reparta bien cualquier
   cantidad.

   Lo que sí funciona es dejar que **la última fila estire**: las filas llenas
   salen con las columnas que se pidan y la que queda coja reparte el sitio
   sobrante entre las suyas. Tres tarjetas un poco más anchas no se notan; tres
   huecos al lado de una, sí.

   `--columnas` la pone la plantilla con `columnas_para()`, que sigue eligiendo
   el reparto que deja la última fila lo más llena posible: estirar cuatro
   tarjetas para llenar el hueco de una queda raro, y estirar tres para llenar
   el de una no.
   --------------------------------------------------------------------------- */
.rejilla {
    --columnas: 4;
    --hueco: 1rem;

    display: flex;
    flex-wrap: wrap;
    gap: var(--hueco);
}

.rejilla > * {
    flex: 1 1 calc((100% - (var(--columnas) - 1) * var(--hueco)) / var(--columnas));
    /* Sin esto, una fila coja de una sola tarjeta la deja del ancho de la
       pantalla, que es peor que el hueco. */
    max-width: calc(1.6 * (100% - (var(--columnas) - 1) * var(--hueco)) / var(--columnas));
    min-width: 0;
}

/* En pantalla pequeña mandan las columnas de siempre, pasen las que pasen: dos
   en el teléfono y tres en la tableta. Cinco tarjetas de ancho no se leen. */
@media (max-width: 575.98px) {
    .rejilla { --columnas: 2; }
    .rejilla > * { max-width: none; }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .rejilla { --columnas: 3; }
    .rejilla > * { max-width: none; }
}

/* El logotipo va con aire alrededor y sin recortar: un logotipo recortado deja
   de ser el logotipo. La foto de producto, en cambio, sí llena la tarjeta. */
.marca-tarjeta .marca-logo {
    object-fit: contain;
    padding: .5rem;
    background: #fff;
}

/* En el listado conviven grupos y categorías sueltas. El grupo lleva su marca
   para que se sepa qué se está mirando antes de pinchar. */
.marca-grupo {
    display: inline-block;
    padding: .05rem .4rem;
    border-radius: 4px;
    background: rgba(31, 92, 110, .1);
    color: #1f5c6e;
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Aparecer al bajar

   La clase `por-aparecer` la pone el guion, no la plantilla, y eso importa:
   **sin JavaScript no hay nada oculto**. Si se marcara desde el HTML y el guion
   fallara, media portada se quedaría invisible.
   --------------------------------------------------------------------------- */
.por-aparecer {
    opacity: 0;
    transform: translateY(12px);
}

.por-aparecer.ya-esta {
    opacity: 1;
    transform: none;
    transition: opacity .45s ease, transform .45s cubic-bezier(.22, .61, .36, 1);
}

@media (prefers-reduced-motion: reduce) {
    .por-aparecer,
    .por-aparecer.ya-esta {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ---------------------------------------------------------------------------
   Las flechas de la tira de marcas

   Van ocultas en el HTML y las enseña el guion: sin él no harían nada, y un
   botón que no hace nada es peor que no tener botón.
   --------------------------------------------------------------------------- */
.mandos-tira {
    display: flex;
    gap: .35rem;
}

.mandos-tira button {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(54, 59, 78, .18);
    border-radius: 50%;
    background: #fff;
    color: inherit;
    line-height: 1;
    cursor: pointer;
    transition: border-color .15s ease, opacity .15s ease;
}

.mandos-tira button:hover:not(:disabled) { border-color: var(--naranja, #e8622a); }
.mandos-tira button:disabled { opacity: .35; cursor: default; }
.mandos-tira button:focus-visible { outline: 2px solid var(--naranja, #e8622a); outline-offset: 2px; }

/* ---------------------------------------------------------------------------
   La fila de «lo que más se vende»

   Aquí no se destaca por tamaño y se llegó por descarte. Se probó con las tres
   primeras a doble ancho y a ancho y medio, y las dos veces pasó lo mismo: la
   foto de la tarjeta es cuadrada, así que **más ancho es más alto**, y la
   sección se comía media pantalla para enseñar doce cosas.

   Lo que se hace ahora es al revés: todas iguales, la foto más baja que en un
   listado —lo que se compara aquí es qué es y cuánto vale, no el detalle— y lo
   que destaca se dice con el distintivo, que no ocupa nada.

   Y las filas se llenan enteras. `flex-grow` reparte lo que sobre entre las de
   la última fila, así que **no queda hueco a la derecha**: si no cabe otro
   producto, el sitio se lo quedan los que hay.
   --------------------------------------------------------------------------- */
.mosaico {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: stretch;
}

.mosaico > * {
    flex: 1 1 calc((100% - 5rem) / 6);
    min-width: 0;
}

/* La foto, más baja. En un listado se mira el producto; aquí se recorre. */
.mosaico .retrato { aspect-ratio: 3 / 2; }

@media (max-width: 991.98px) {
    .mosaico > * { flex-basis: calc((100% - 2rem) / 3); }
}

@media (max-width: 575.98px) {
    .mosaico > * { flex-basis: calc((100% - 1rem) / 2); }
}

/* ---------------------------------------------------------------------------
   Los distintivos

   Salen de datos —el puesto en ventas, la fecha de la oferta, si está
   descatalogado— y por eso ninguno se queda puesto de más. Van arriba a la
   izquierda, encima de la foto y sin taparla.
   --------------------------------------------------------------------------- */
.ficha { position: relative; }

.distintivos {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .25rem;
    pointer-events: none;
}

.distintivo {
    padding: .1rem .45rem;
    border-radius: 999px;
    background: rgba(54, 59, 78, .88);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .01em;
}

.distintivo-uno { background: var(--pizarra, #363b4e); }
.distintivo-oferta { background: var(--frambuesa, #fc1d3f); }
.distintivo-ultimas { background: var(--ambar, #b8730a); }

/* ---------------------------------------------------------------------------
   El menú del catálogo

   Un solo menú para el móvil y para el ordenador. En pantalla ancha los grupos
   van en fila y el panel se abre a todo lo largo; en el teléfono la fila se
   desplaza en horizontal y el panel se abre debajo del grupo.

   Es un <details>, así que **abre y cierra sin JavaScript**. El atributo `name`
   hace que solo pueda haber uno abierto, y eso también lo resuelve el navegador
   en los que lo entienden.
   --------------------------------------------------------------------------- */
.menu-tienda {
    position: relative;
    background: #fff;
    border-bottom: 1px solid rgba(54, 59, 78, .1);
    box-shadow: 0 1px 2px rgba(54, 59, 78, .04);
}

.menu-tira {
    display: flex;
    align-items: stretch;
    gap: .25rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.menu-tira::-webkit-scrollbar { display: none; }

.menu-grupo { position: static; }

.menu-grupo > summary,
.menu-suelto {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .7rem .8rem;
    white-space: nowrap;
    font-size: .92rem;
    font-weight: 600;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    list-style: none;
}

.menu-grupo > summary::-webkit-details-marker { display: none; }

.menu-grupo > summary:hover,
.menu-suelto:hover,
.menu-grupo[open] > summary {
    border-bottom-color: var(--naranja, #e8622a);
}

.menu-grupo > summary:focus-visible,
.menu-suelto:focus-visible {
    outline: 2px solid var(--naranja, #e8622a);
    outline-offset: -2px;
}

/* El panel. En pantalla ancha va absoluto y a todo lo largo; en el teléfono se
   queda en el flujo, debajo del grupo, para que no tape lo que hay detrás. */
.menu-panel {
    padding: 1rem 0 1.25rem;
    background: var(--crema, #fdf7ef);
    border-top: 1px solid rgba(54, 59, 78, .08);
}

.menu-columnas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: .15rem 1.5rem;
}

.menu-columnas a {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .4rem .5rem;
    border-radius: 6px;
    color: inherit;
    text-decoration: none;
    font-size: .9rem;
}

.menu-columnas a:hover { background: #fff; }

.menu-cuantos { color: #6b7280; font-size: .8rem; font-variant-numeric: tabular-nums; }

.menu-todo {
    display: inline-block;
    margin-top: .9rem;
    font-size: .88rem;
    font-weight: 600;
}

@media (min-width: 992px) {
    .menu-panel {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        z-index: 30;
        box-shadow: 0 12px 24px rgba(54, 59, 78, .12);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .menu-grupo[open] > .menu-panel { animation: menu-baja .18s ease-out; }

    @keyframes menu-baja {
        from { opacity: 0; transform: translateY(-6px); }
        to { opacity: 1; transform: none; }
    }
}

/* ---------------------------------------------------------------------------
   El semáforo del almacén en la tarjeta

   Cuatro rayitas al lado de la marca. Es el mismo semáforo de la ficha en
   pequeño: un número suelto —«quedan 3»— no le dice nada a quien compra por
   cajas, y el color se entiende sin leer.

   Va con `title` y `aria-label` porque el color solo no es información: quien
   no distingue el verde del rojo, y quien usa lector de pantalla, tienen que
   poder saber lo mismo.
   --------------------------------------------------------------------------- */
.linea-marca {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    min-height: 1.2rem;
}

.almacen-mini {
    display: inline-flex;
    gap: 2px;
    flex: 0 0 auto;
}

.almacen-mini > span {
    width: 6px;
    height: 10px;
    border-radius: 1px;
    background: rgba(54, 59, 78, .14);
}

.almacen-verde    .lleno { background: #2e7d32; }
.almacen-amarillo .lleno { background: #d99400; }
.almacen-rojo     .lleno { background: #c62828; }
.almacen-gris     .lleno { background: #9a958c; }

/* ---------------------------------------------------------------------------
   Compartir

   Va al final de la ficha y de la guía, que es donde se decide compartir algo:
   arriba nadie ha leído todavía nada que merezca la pena mandar.

   Los botones son del mismo tamaño y del mismo color, sin los colores de cada
   red: una fila de siete botones de colores tira más de la vista que el propio
   producto, y aquí lo que se vende es el producto.
   --------------------------------------------------------------------------- */
.compartir {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(54, 59, 78, .12);
}

/* Una fila para compartir y otra para preguntar. En una sola, once botones
   seguidos se leen como una tira y no se distingue mandarle esto a alguien de
   preguntarle a una máquina, que son dos cosas distintas. */
.compartir-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
}

.compartir-rotulo {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6b7280;
}

.compartir-botones { display: flex; flex-wrap: wrap; gap: .4rem; }

.compartir-boton {
    position: relative;
    width: 2.2rem;
    height: 2.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(54, 59, 78, .16);
    border-radius: 50%;
    background: #fff;
    color: var(--pizarra, #363b4e);
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

.compartir-boton svg { width: 1rem; height: 1rem; display: block; }

.compartir-boton:hover { border-color: var(--naranja, #e8622a); color: var(--naranja, #e8622a); }
.compartir-boton:focus-visible { outline: 2px solid var(--naranja, #e8622a); outline-offset: 2px; }
.compartir-boton.ha-copiado { border-color: #2e7d32; color: #2e7d32; }

/* El «Copiado» sale encima del botón y no al lado: al lado empujaría los demás
   y la fila entera se movería justo al pulsar. */
.compartir-copiado {
    position: absolute;
    bottom: calc(100% + .3rem);
    left: 50%;
    transform: translateX(-50%);
    padding: .1rem .45rem;
    border-radius: 4px;
    background: #2e7d32;
    color: #fff;
    font-size: .7rem;
    white-space: nowrap;
}

.compartir-ia {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .75rem .25rem .45rem;
    border: 1px solid rgba(54, 59, 78, .16);
    border-radius: 999px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    font-size: .8rem;
    font-weight: 600;
}

/* El logotipo de cada uno. Con `contain` y una caja cuadrada porque no todos
   tienen la misma proporción —el de Perplexity es más alto que ancho— y
   estirarlos para que cuadren es deformarle a alguien su marca. */
.compartir-ia-marca {
    flex: 0 0 auto;
    width: 1.3rem;
    height: 1.3rem;
    object-fit: contain;
}

.compartir-ia:hover { border-color: var(--naranja, #e8622a); color: var(--naranja, #e8622a); }

/* El listado entero de marcas, con su logotipo. Rejilla propia y no columnas de
   Bootstrap: las tarjetas son estrechas y con `auto-fill` caben las que quepan
   en cada pantalla en vez de cuatro siempre. */
.rejilla-marcas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: .75rem;
}

.marca-ficha {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: .75rem .5rem;
    border: 1px solid rgba(54, 59, 78, .12);
    border-radius: 10px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    text-align: center;
    transition: border-color .15s ease, transform .15s ease;
}

.marca-ficha:hover {
    border-color: var(--naranja, #e8622a);
    transform: translateY(-2px);
}

/* Caja de altura fija: con logotipo o con inicial, todas las tarjetas de una
   fila miden lo mismo y el nombre queda a la misma altura. */
.marca-ficha-imagen {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 4.5rem;
}

/* Sin recortar y con aire: un logotipo recortado deja de ser el logotipo. */
.marca-ficha-imagen img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.marca-ficha-inicial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 8px;
    background: var(--crema, #fdf7ef);
    color: #6b7280;
    font-size: 1.6rem;
    font-weight: 700;
}

.marca-ficha-nombre {
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.25;
}

.marca-ficha-cuantos {
    font-size: .72rem;
    color: #6b7280;
}

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


/* Las formas de pago, en tarjetas. Quien entra en esa página busca «la suya»,
   no lee las cuatro: con el rótulo grande y el cuándo debajo se encuentra de un
   vistazo. */
.formas-de-pago {
    display: grid;
    gap: 1.1rem;
    margin: 1.5rem 0;
}

@media (min-width: 768px) {
    .formas-de-pago { grid-template-columns: 1fr 1fr; }
}

.forma-de-pago {
    position: relative;
    overflow: hidden;
    padding: 1.4rem 1.5rem 1.5rem;
    border: 1px solid rgba(54, 59, 78, .1);
    border-radius: 14px;
    background: #fff;
}

/* El aire de color va en la esquina y se apaga hacia dentro. Es lo que le da
   carácter a la tarjeta sin la barrita de la izquierda, que se ve en media
   internet y que además apunta a un sitio donde no hay nada que mirar. */
.forma-de-pago::before {
    content: "";
    position: absolute;
    top: -55%;
    right: -30%;
    width: 16rem;
    height: 16rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232, 98, 42, .11), rgba(232, 98, 42, 0) 68%);
    pointer-events: none;
}

.forma-de-pago > * { position: relative; }

/* El titular y el «cuándo vale esto» en el mismo renglón: es la pareja que se
   compara de una a otra, y separada en dos líneas obliga a leerlas todas. */
.forma-de-pago h2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .65rem;
    margin: 0 0 .9rem;
    padding-bottom: .7rem;
    /* La raya se apaga por la derecha en vez de cortarse a plomo. */
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(to right, rgba(54, 59, 78, .18), rgba(54, 59, 78, 0)) 1;
}

/* El titular empuja al «cuándo» hasta el borde, y cuando no cabe se lo lleva a
   la línea de abajo entero en vez de partirlo. */
.forma-de-pago .forma-titulo { flex: 1 1 auto; }

.forma-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 9px;
    background: rgba(232, 98, 42, .1);
    color: var(--naranja, #e8622a);
}

.forma-icono svg { width: 1.2rem; height: 1.2rem; }

.forma-de-pago .cuando {
    flex: 0 0 auto;
    padding: .18rem .6rem;
    border-radius: 999px;
    background: rgba(31, 92, 110, .09);
    color: #1f5c6e;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.forma-de-pago p { margin: 0 0 .55rem; }

/* Las marcas admitidas. Cada logotipo tiene su proporción y ninguno se estira:
   se le fija la altura y el ancho sale solo. */
.marcas-de-pago {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    margin: 0 0 .8rem;
    padding: 0;
    list-style: none;
}

.marcas-de-pago li {
    display: flex;
    align-items: center;
    padding: .25rem .45rem;
    border: 1px solid rgba(54, 59, 78, .1);
    border-radius: 6px;
    background: #fff;
}

.marcas-de-pago img {
    height: 1.15rem;
    width: auto;
}

.forma-de-pago p:last-child { margin-bottom: 0; }

/* -- Pregúntanos ------------------------------------------------------ */

/* El motivo, como fichas y no como desplegable: se ven las cinco de golpe y se
   marca de un toque, que en el móvil es la diferencia entre rellenarlo y no. */
.motivos {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .35rem;
}

.motivo input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.motivo span {
    display: inline-block;
    padding: .35rem .8rem;
    border: 1px solid rgba(54, 59, 78, .18);
    border-radius: 999px;
    background: #fff;
    font-size: .85rem;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.motivo input:checked + span {
    border-color: var(--naranja, #e8622a);
    background: var(--crema, #fdf7ef);
    font-weight: 600;
}

/* Sin esto, quien va con el teclado no sabe dónde está: el radio de verdad es
   invisible, así que el foco tiene que verse en la ficha. */
.motivo input:focus-visible + span {
    outline: 2px solid var(--naranja, #e8622a);
    outline-offset: 2px;
}

.formulario-contacto legend {
    float: none;
    width: auto;
    font-size: inherit;
}

/* Lo que se estaba mirando cuando se pulsó «pregúntanos por esto». Va como
   pastilla y no como caja con filete: es un dato suelto, no un apartado. */
.sobre-que {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .4rem;
    padding: .35rem .85rem;
    border: 1px solid rgba(232, 98, 42, .3);
    border-radius: 999px;
    background: var(--crema, #fdf7ef);
    font-size: .88rem;
}

.sobre-que span {
    color: #6b7280;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.panel-contacto hr {
    margin: 1.1rem 0;
    border-color: rgba(54, 59, 78, .12);
}

/* Teléfono, WhatsApp y correo. Quien tiene prisa no rellena un formulario:
   llama. Esconderle el teléfono no hace que escriba, hace que se vaya. */
.via-de-contacto {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem .5rem;
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
    transition: background .15s ease;
}

.via-de-contacto:hover { background: var(--crema, #fdf7ef); }

.via-de-contacto strong { display: block; font-size: .95rem; }

.via-de-contacto small { display: block; color: #6b7280; font-size: .78rem; }

.via-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: var(--crema, #fdf7ef);
    color: var(--naranja, #e8622a);
}

.via-icono svg { width: 1.15rem; height: 1.15rem; }

.antes-de-escribir {
    margin: 0;
    padding-left: 1.1rem;
}

.antes-de-escribir li { margin-bottom: .3rem; }

@media (prefers-reduced-motion: reduce) {
    .motivo span,
    .via-de-contacto { transition: none; }
}

/* El horario, en tabla: son dos filas de «esto, a estas horas» y una lista de
   guiones se lee peor que dos columnas alineadas. */
.horario {
    width: 100%;
    margin-bottom: .5rem;
    border-collapse: collapse;
}

.horario th {
    padding: .3rem 0;
    font-weight: 600;
    text-align: left;
}

.horario td {
    padding: .3rem 0;
    color: #4b5563;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.horario tr + tr th,
.horario tr + tr td { border-top: 1px solid rgba(54, 59, 78, .08); }