/*
 * 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;
}

.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;
}

/* ---------------------------------------------------------------------------
   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;
}

.sumario {
    padding: 1rem 1.25rem;
    border-left: 3px solid var(--naranja, #e8622a);
    background: var(--hueso, #f7f3ee);
    border-radius: 0 8px 8px 0;
}

.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;
}