/* ============================================================================
   Pie del sitio
   ========================================================================= */

/* ── Franja de compromisos ──────────────────────────────────────────────── */

.footer-trust {
    background: var(--color-brand-tint);
    border-top: 1px solid var(--color-border);
    padding-block: var(--space-3);
}

.footer-trust__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2);
}

.footer-trust__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: var(--fs-xs);
    line-height: 1.45;
    color: var(--color-text-muted);
}

.footer-trust__list svg { color: var(--color-brand); flex: none; margin-top: 1px; }
.footer-trust__list strong { color: var(--color-text); font-size: var(--fs-sm); }

@media (min-width: 640px) {
    .footer-trust__list { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .footer-trust__list { grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
}

/* ── Cuerpo ─────────────────────────────────────────────────────────────── */

/* El pie es la superficie más grande de la web y era tinta plana. Con el
   degradado, el lila del logotipo entra por abajo a la derecha —donde acaba
   la página— y cierra con los dos colores de la marca. El punto más claro del
   degradado da 15,93:1 con texto blanco: no hay ningún sitio del pie donde el
   texto pierda contraste. */
.site-footer {
    background: var(--gradient-duo-deep);
    color: var(--color-text-invert);
    padding-block: var(--space-5) var(--space-3);
}

/* ── Banda de conversión ─────────────────────────────────────────────────
   Va ANTES del mapa del sitio y a todo el ancho. Es la última oportunidad de
   la página: quien ha bajado hasta aquí o busca un dato de contacto o se está
   yendo. */

.footer-cta {
    display: grid;
    gap: var(--space-2);
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.footer-cta__title {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: 1.25;
    color: #ffffff;
    margin: 0 0 6px;
}

.footer-cta__lead {
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.94);
    margin: 0;
    max-width: 54ch;
}

.footer-cta__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px var(--space-2);
}

@media (min-width: 900px) {
    .footer-cta {
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: var(--space-4);
    }
    /* Los botones a la derecha, alineados con el borde del contenido: es la
       vertical donde acaba todo lo demás de la página. */
    .footer-cta__actions { justify-content: flex-end; }
}

/* ── Rejilla ─────────────────────────────────────────────────────────────
   `start`, no `stretch`: la columna de la izquierda —logotipo, texto, NAP y
   horarios— es tres veces más alta que las de enlaces, y con el estiramiento
   por defecto las cuatro listas cortas se separaban de su título hasta el
   fondo de la fila. */

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: var(--space-3);
}

.footer-col { min-width: 0; }

.footer-claim {
    font-family: var(--font-display);
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--color-brand-bright);
    margin: 0 0 var(--space-1);
}

.footer-about {
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.94);
    margin: 0 0 var(--space-3);
    max-width: 42ch;
}

/* NAP: nombre, dirección y teléfono. En <address> por semántica, sin cursiva
   porque el navegador la aplica por defecto y aquí estorba. */
.footer-nap {
    font-style: normal;
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: var(--space-2);
}

.footer-nap strong { color: var(--color-text-invert); }
.footer-nap a { color: var(--color-brand-bright); text-decoration: none; }
.footer-nap a:hover { text-decoration: underline; text-underline-offset: 3px; }

.footer-hours {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--fs-xs);
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: var(--space-2);
}

.footer-hours strong { color: rgba(255, 255, 255, 0.92); font-weight: 600; }

.footer-maps {
    display: inline-block;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--color-brand-bright);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── Columnas de enlaces ─────────────────────────────────────────────────
   En móvil son <details> plegables para que el pie no sea una pared de
   sesenta enlaces; a partir de tablet se abren y el triángulo desaparece. */

/* `.footer-col__title` se ha borrado de aquí: era el encabezado de la columna
   de contacto, que ya no existe como columna. Su equivalente ahora es
   `.footer-cta__title`, que se declara arriba con la banda. */
.footer-col > summary {
    font-family: var(--font-display);
    /* Mas grande y sin espaciar las letras. El color ya era blanco puro y aun
       asi costaba leerlos: el problema no era el contraste -15,3:1- sino que
       eran 14 px en mayusculas con letter-spacing, y sobre fondo oscuro eso
       adelgaza el trazo y lo hace parecer gris. */
    font-size: var(--fs-base);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: #ffffff;
    padding: 12px 0 10px;
    cursor: pointer;
    list-style: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.20);
    margin: 0;
}

.footer-col > summary::-webkit-details-marker { display: none; }

.footer-col > summary::after {
    content: '+';
    float: right;
    font-weight: 400;
    color: var(--color-brand-bright);
}

.footer-col[open] > summary::after { content: '−'; }

.footer-links {
    list-style: none;
    margin: 0;
    padding: var(--space-1) 0 0;
}

/* Blanco puro, no un blanco al 94 %.
   
   Sobre este verde casi negro la diferencia se nota: el 94 % ya se lee como
   un gris muy claro, y con letras de 15 px el trazo adelgaza y parece
   apagado. Los enlaces del pie son navegación, no texto de apoyo. */
.footer-links a {
    display: block;
    padding: 6px 0;
    font-size: var(--fs-sm);
    color: #ffffff;
    text-decoration: none;
}

.footer-links a:hover,
.footer-links a:focus-visible {
    color: var(--color-brand-bright);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── Newsletter ──────────────────────────────────────────────────────────
   En el pie no hay formulario: estas reglas las usan los dos popups, que son
   los únicos sitios donde vive `.newsletter-form`. Se quedan aquí porque es
   donde estaban y moverlas es cambiarles el orden de carga.

   Se han borrado `.footer-newsletter__lead`, `.footer-contact__lead` y
   `.footer-col--contact`: ninguna vista las usaba desde que el bloque de
   contacto pasó a ser la banda `.footer-cta` de arriba. */

.newsletter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.newsletter-form .input {
    flex: 1 1 180px;
    font-size: 16px;
    padding: 11px 14px;
    border: 1px solid rgba(244, 246, 242, 0.22);
    border-radius: var(--radius-md);
    background: rgba(244, 246, 242, 0.06);
    color: var(--color-text-invert);
}

.newsletter-form .input::placeholder { color: rgba(244, 246, 242, 0.45); }

.newsletter-form .input:focus-visible {
    outline: none;
    border-color: var(--color-brand-bright);
    box-shadow: 0 0 0 3px rgba(67, 211, 67, 0.22);
}

.newsletter-msg { flex: 1 0 100%; font-size: var(--fs-xs); margin: 0; }

/* ── Aviso legal ────────────────────────────────────────────────────────── */

.footer-legal {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid rgba(244, 246, 242, 0.12);
    font-size: var(--fs-xs);
    color: rgba(255, 255, 255, 0.86);
}

.footer-legal p { margin: 0 0 6px; }
.footer-legal__copy { color: rgba(255, 255, 255, 0.94); }
.footer-legal__note { line-height: 1.6; max-width: var(--measure-wide); margin: 0; }

/* En escritorio el copyright y el aviso de cumplimiento van a dos columnas.
   A todo el ancho, el párrafo legal se quedaba en una tira de tres líneas de
   1 240 px que nadie sigue con la vista de un extremo al otro; y el
   copyright, solo en su fila, dejaba un hueco muerto a la derecha. */
@media (min-width: 1024px) {
    .footer-legal {
        display: grid;
        grid-template-columns: minmax(0, 22ch) minmax(0, 1fr);
        gap: var(--space-2) var(--space-4);
        align-items: start;
    }

    .footer-legal__copy { margin: 0; }
    .footer-legal__note { max-width: none; }
}

/* ── A partir de tablet ─────────────────────────────────────────────────── */

/* ── Tablet ──────────────────────────────────────────────────────────────
   La ficha del negocio ocupa la fila entera: en media columna de 350 px la
   dirección y los horarios se parten en dos líneas cada uno y el NAP —que es
   la señal de negocio local— se lee como un churro. Debajo, los enlaces en
   dos por dos. */

@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3) var(--space-4);
    }

    .footer-col--about {
        grid-column: 1 / -1;
        padding-bottom: var(--space-3);
        margin-bottom: var(--space-1);
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }
}

/* ── Escritorio ──────────────────────────────────────────────────────────
   Cinco columnas en UNA fila: la ficha del negocio y los cuatro bloques de
   enlaces. Antes eran dos filas —la de contacto colgaba de `2 / -1`— y la
   segunda quedaba medio vacía porque la columna de la izquierda ya había
   crecido lo suyo. Con una sola fila el pie tiene un solo borde superior,
   una sola línea de títulos y un solo cierre. */

@media (min-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1.4fr repeat(4, 1fr);
        gap: var(--space-4);
    }

    .footer-col--about {
        grid-column: auto;
        padding-bottom: 0;
        margin-bottom: 0;
        border-bottom: 0;
    }

    /* Fuera del móvil las columnas están siempre abiertas y el desplegable
       no aporta nada: solo el ruido visual del signo. */
    .footer-col > summary { cursor: default; pointer-events: none; }
    .footer-col > summary::after { display: none; }

    /* Los cuatro títulos arrancan en la MISMA horizontal que el borde de
       arriba de la placa del logotipo. Con los 12 px de padding que necesitan
       como zona táctil en el móvil, en escritorio caían descolgados y la
       línea de subrayados no cuadraba con nada. */
    .footer-col > summary { padding-top: 0; padding-bottom: 12px; }
}


/* ── Contraste del pie ────────────────────────────────────────────────────
   Sobre el fondo #12211a, con estos valores:
     encabezados  #ffffff        -> 15,3:1
     enlaces      blanco al 86 % -> 11,4:1
     NAP          blanco al 92 % -> 13,1:1
     aviso legal  blanco al 78 % ->  9,3:1
   Antes el aviso legal se quedaba por debajo de 4:1, que es incumplir AA en
   el unico sitio donde por ley tiene que poder leerse.
   ───────────────────────────────────────────────────────────────────────── */

/* Encabezados y enlaces del pie, en blanco puro y con especificidad
   suficiente para que no vuelva a ganarles ninguna regla heredada. Las tres
   copias que competían por esto —layout.css y editorial.css— están borradas,
   pero este refuerzo se queda: es el sitio donde mirar si algún día vuelven a
   verse grises. */
.site-footer .footer-col > summary,
.site-footer .footer-links a,
.site-footer .footer-col ul li a {
    color: #ffffff;
}

.site-footer .footer-links a:hover,
.site-footer .footer-links a:focus-visible,
.site-footer .footer-col ul li a:hover {
    color: var(--color-brand-bright);
}

/* El título de la banda de conversión, con la misma especificidad que los
   encabezados de columna para que no le gane ninguna regla heredada. */
.site-footer .footer-cta__title { color: #ffffff; }

/* ── Volver arriba ────────────────────────────────────────────────────────
   Borrado de aquí. Era la cuarta copia del mismo botón y la única que se
   veía, por ser footer.css el último <link> del <head>. Ahora la declaración
   única está en components.css, que es donde vive el resto de componentes.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Logotipo ─────────────────────────────────────────────────────────────
   Aquí había una SEGUNDA declaración de `.logo__img` con sus propias alturas
   —42 px y 52 en escritorio— y, como footer.css es la última hoja del <head>,
   ganaba a la de header.css. O sea que el tamaño del logotipo de la CABECERA
   lo decidía el fichero del PIE.

   Se nota al intentar agrandarlo: se sube en header.css, se despliega y no
   cambia nada. Es la misma enfermedad que el botón de volver arriba y la
   paginación —el mismo componente declarado en dos sitios y ganando el orden
   de carga—, así que se trata igual: la declaración vive en header.css y aquí
   solo queda el modificador del pie.
   ───────────────────────────────────────────────────────────────────────── */

/* ── El logotipo sobre el pie oscuro ──────────────────────────────────────
   El logotipo es un rótulo ILUSTRADO, dibujado para fondo claro: tiene una
   nube gris pálida detrás, contornos casi negros en las letras y dos textos
   —«GROW SHOP» arriba y «PORRÓN Y CUENTA NUEVA» abajo— en gris oscuro y
   morado. Sobre el verde casi negro del pie esos dos textos desaparecen, los
   contornos se funden con el fondo y la nube se convierte en un manchurrón.
   El fichero «-oscuro» no arregla nada: es el mismo dibujo.

   Recolorear la ilustración no es cosa de CSS y tampoco es mía: es la marca.
   Así que se le pone debajo la superficie para la que fue dibujada. Queda
   como una placa, que además es como se resuelve esto en cualquier marca con
   logotipo detallado, y respeta el dibujo exactamente como está.
   ───────────────────────────────────────────────────────────────────────── */

.footer-logo {
    display: inline-block;
    background: var(--color-bg);
    padding: 14px 20px;
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-3);
    /* Un pelo de sombra hacia dentro del pie: sin ella la placa flota como un
       recorte pegado. */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}

.logo__img--footer {
    height: 64px;
    margin-bottom: 0;
}

@media (max-width: 600px) {
    .footer-logo { padding: 12px 16px; }
    .logo__img--footer { height: 46px; }
}

/* ── Lila de marca ────────────────────────────────────────────────────────
   El logotipo es verde Y lila a partes iguales, pero la web solo usaba el
   verde: se veía coherente pero incompleta. El lila entra donde ya tenía su
   papel asignado en el sistema —oferta, novedad, acento— y NO en los botones
   de comprar, que siguen en verde. Dos colores compitiendo por la acción
   principal es la forma más rápida de que ninguno signifique nada.
   ───────────────────────────────────────────────────────────────────────── */

.topbar__item--store svg { color: var(--color-magenta-bright); }

/* «Porrón y cuenta nueva» iba en el magenta del logotipo, #d937be, y sobre la
   tinta del pie eso da 4,17:1: por debajo de AA, y es el lema de la casa en
   negrita de 16 px. Un punto más claro y sube a 5,33:1 sin dejar de ser el
   rosa de la marca. */
.logo__tag,
.footer-claim {
    color: #dd63c9;
}

/* Acento superior de la franja de compromisos y del pie: el degradado del
   logotipo, verde a lila. */
.footer-trust {
    border-top: 3px solid transparent;
    border-image: linear-gradient(90deg,
        var(--color-brand) 0%,
        var(--color-brand-bright) 45%,
        var(--color-magenta-bright) 100%) 1;
}

.filter-group__count,
.cat-branch__n { color: var(--color-magenta); }

.megamenu__foot a:last-child { color: var(--color-magenta); }

/* ── Botón de WhatsApp ────────────────────────────────────────────────────
   Estaba en verde sobre el verde del pie: el texto se perdía en el fondo.
   En blanco destaca y además lo separa del verde de "comprar", que es una
   acción distinta.
   ───────────────────────────────────────────────────────────────────────── */

.footer-whatsapp,
a.footer-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* El `margin-top` fijo se va: los dos botones viven en un flex con `gap`,
       y ahí el margen solo servía para descuadrarlos entre sí. */
    min-height: 46px;
    padding: 11px 22px;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--color-brand-deep) !important;
    background: #ffffff;
    border: 2px solid #ffffff;
    border-radius: var(--radius-pill);
    text-decoration: none;
    transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}

.footer-whatsapp:hover,
a.footer-whatsapp:hover {
    background: var(--color-brand-bright);
    border-color: var(--color-brand-bright);
    color: #0a2818 !important;
}

/* Llamar es la acción SECUNDARIA: mismo tamaño y misma zona táctil, pero en
   contorno. Antes los dos eran el mismo botón blanco, uno encima del otro, y
   dos primarios idénticos es lo mismo que no tener ninguno. */
.footer-call,
a.footer-call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 11px 22px;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: #ffffff;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-radius: var(--radius-pill);
    text-decoration: none;
    transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease;
}

.footer-call:hover,
.footer-call:focus-visible,
a.footer-call:hover {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.10);
    color: #ffffff;
}


/* ── Objetivos táctiles ───────────────────────────────────────────────────
   Tres botones se quedaban por debajo de los 44 px que necesita un dedo para
   acertar sin ampliar: cerrar el menú (28 px), cerrar el aviso superior
   (26 px) y las flechas de la galería (42 px). Van aquí, en la última hoja
   que carga, para no depender del orden de los demás ficheros.
   ───────────────────────────────────────────────────────────────────────── */

.offcanvas__close,
.announcement-bar__close {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
}

.product-gallery__nav { width: 44px; height: 44px; }

/* El teléfono de la barra superior es un click-to-call: tiene que ser cómodo
   de tocar, no una línea de 4 px de padding. */
.topbar__item--phone { padding: 10px 0; }

@media (max-width: 600px) {
    .topbar__inner { min-height: 44px; }
}

/* La red de seguridad del ancho también se va: `max-width: 62vw` desde aquí
   pisaba el `max-width: none` que header.css pone en escritorio, y en móvil
   competía con el suyo. El límite de ancho está donde tiene que estar, junto
   a la altura. */


/* ── .back-to-top y los restos del tema oscuro ────────────────────────────
   Aquí estaba el refuerzo con doble clase (`.back-to-top.back-to-top`) que
   hacía falta para ganarle a las otras tres declaraciones sin depender del
   orden de carga. Ya no hace falta: las otras tres se han borrado y solo
   queda la de components.css, así que la especificidad puede volver a ser la
   normal. Un componente, una regla, un sitio donde tocarlo.
   ───────────────────────────────────────────────────────────────────────── */

/* La lupa de la galería se arregla ya en components.css, donde se declara,
   así que aquí sobra el parche. Queda el del botón de comparar, que sí vive
   solo en polish-components.css. */
.card-product__compare { color: var(--color-text-invert); }

/* ── Titular del hero: blanco y opaco ─────────────────────────────────────
   El H1 sale con la clase .reveal, que lo anima desde opacity:0. Si el JS
   tarda, falla o el navegador respeta "reducir movimiento" a medias, el
   titular se queda translúcido sobre la foto. Un H1 no puede depender de
   que corra un script para verse: es el elemento más importante de la
   página y además lo que lee el buscador.
   ───────────────────────────────────────────────────────────────────────── */

.hero .hero__title,
.hero--home .hero__title,
.hero--parallax .hero__title,
.hero--no-image .hero__title {
    color: #ffffff;
    opacity: 1;
    transform: none;
}

/* Los heroes sin foto y con fondo claro son la excepción: ahí el blanco no
   se vería. Se dejan con su texto oscuro. */
.hero--legal .hero__title,
.hero--search .hero__title {
    color: var(--color-text);
    opacity: 1;
}

/* ── Estados seleccionados ────────────────────────────────────────────────
   Barrido de todo lo que cambia a fondo oscuro al seleccionarse y hereda el
   color de texto del tema claro. Es la misma familia de fallos que el resto:
   un elemento que se ve bien en reposo y se vuelve ilegible justo cuando el
   usuario lo activa, que es cuando más falta hace que se lea.

   La paginación se ha movido a shop.css, que es su fichero. Aquí quedan solo
   los estados que no tienen una hoja propia donde vivir.
   ───────────────────────────────────────────────────────────────────────── */

/* Puntos del carrusel, pasos del checkout y barra de progreso: todos pintan
   fondo de marca al activarse sin declarar el color de lo que va encima. */
.hero-slider__dot.is-active,
.seg-progress__segment.is-current,
.stepper__item.is-current::before {
    color: #ffffff;
}

.cookie-prefs__toggle input:checked ~ .cookie-prefs__slider {
    color: #ffffff;
}

/* Rama de catálogo seleccionada: ya iba en blanco, se refuerza aquí para que
   no dependa del orden de carga como le pasó a la paginación. */
.cat-branch.is-current,
.cat-branch[aria-current="page"] {
    background: var(--color-brand);
    border-color: var(--color-brand);
    color: #ffffff;
}

/* Al 75 % daba 4,23:1 sobre el verde de marca, con letra de 13 px en negrita:
   por debajo de AA. Es el numero de productos de la familia que estas viendo,
   o sea un dato, no un adorno. Al 88 % sube a 5,16:1 y sigue leyendose como
   secundario. */
.cat-branch.is-current .cat-branch__n { color: rgba(255, 255, 255, 0.88); }

/* La recogida en tienda se destaca: es gratis, es inmediata y es lo único
   que un competidor nacional no puede ofrecer. */
.checkout-option--pickup {
    border-color: var(--color-brand);
    background: var(--color-brand-tint);
}

.text-brand { color: var(--color-brand-deep); }

/* Índice de marcas agrupado por tipo. */
.brand-group { margin-bottom: var(--space-4); }

.brand-group__title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 700;
    margin: 0 0 var(--space-2);
    padding-bottom: 8px;
    border-bottom: 2px solid var(--color-brand);
    color: var(--color-text);
}

.brand-group__n {
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--color-magenta);
}

.brand-group__list { display: flex; flex-wrap: wrap; gap: 8px; }