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