/* =============================================================================
 * home.css — bloques propios de la portada
 *
 * Solo lo que la portada NO puede resacar de layout/components/editorial. Todo
 * mobile-first: el móvil es la versión principal y las rejillas no se abren
 * hasta 768px. Anchos fluidos con max-width y padding lateral en px, nunca en
 * porcentaje (CLAUDE.md §7).
 * ========================================================================== */

/* Entradilla bajo el h2 de una sección */
.section-title__lead {
    margin: var(--space-1) auto 0;
    max-width: 60ch;
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}


/* =============================================================================
 * 1. LA TIENDA FÍSICA
 * ========================================================================== */
/* Era una losa de color plano de lado a lado: el bloque más importante de la
   portada —el que sostiene que la tienda existe— y el que menos se miraba.
   Ahora tiene profundidad (un halo verde muy tenue arriba a la izquierda,
   donde arranca la lectura) y una línea de luz en el canto superior que lo
   separa del hero en vez de dejar dos oscuros pegados. */
.home-store {
    position: relative;
    background:
        radial-gradient(90% 120% at 12% 0%,
            rgba(22, 112, 46, 0.30) 0%,
            transparent 62%),
        /* El lila entra por la esquina opuesta al verde, para que el bloque
           tenga los dos colores del logotipo en vez de solo uno. Al 26 % sobre
           la tinta del fondo se nota el tono sin que la superficie deje de ser
           oscura: el texto blanco de encima sigue por encima de 12:1. */
        radial-gradient(80% 110% at 96% 108%,
            rgba(86, 15, 90, 0.55) 0%,
            transparent 62%),
        radial-gradient(70% 90% at 92% 100%,
            rgba(67, 211, 67, 0.10) 0%,
            transparent 60%),
        var(--color-bg-ink);
    color: var(--color-text-invert);
    padding-block: var(--section-pad);
}
.home-store::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(95, 224, 95, 0.55) 22%,
        rgba(95, 224, 95, 0.22) 60%,
        transparent 100%);
}
.home-store__grid {
    display: grid;
    gap: var(--space-4);
}
@media (min-width: 900px) {
    .home-store__grid {
        grid-template-columns: 1.15fr 1fr;
        align-items: start;
        gap: var(--space-5);
    }
}

.home-store .eyebrow { color: var(--color-brand-bright); }
.home-store__title {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    line-height: 1.1;
    margin: var(--space-1) 0 var(--space-2);
    color: var(--color-text-invert);
}
.home-store__text > p {
    margin: 0 0 var(--space-3);
    color: rgba(244, 246, 242, 0.82);
    line-height: 1.65;
    max-width: 60ch;
}
.home-store__text strong { color: var(--color-text-invert); }

.home-store__facts {
    display: grid;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    padding: var(--space-3) 0 0;
    border-top: 1px solid rgba(244, 246, 242, 0.18);
}
@media (min-width: 600px) {
    .home-store__facts { grid-template-columns: repeat(2, 1fr); }
}
.home-store__facts dt {
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-brand-bright);
    margin-bottom: 2px;
}
.home-store__facts dd {
    margin: 0;
    color: var(--color-text-invert);
    font-size: var(--fs-sm);
    line-height: 1.5;
}
.home-store__facts a { color: var(--color-text-invert); border-bottom: 1px dotted rgba(244,246,242,0.5); }
.home-store__facts a:hover { color: var(--color-brand-bright); }

/* La columna derecha: primero la foto del local, luego las tres razones. */
.home-store__aside {
    display: grid;
    gap: var(--space-3);
    align-content: start;
}

.home-store__foto {
    margin: 0;
    border-radius: var(--radius-md, 10px);
    overflow: hidden;
    background: rgba(5, 16, 10, 0.6);
    border: 1px solid rgba(143, 240, 143, 0.18);
    box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.75);
}
.home-store__foto img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.home-store__foto figcaption {
    padding: 10px 14px;
    font-size: 0.78rem;
    line-height: 1.45;
    color: rgba(244, 246, 242, 0.72);
    border-top: 1px solid rgba(143, 240, 143, 0.14);
}

.home-store__perks {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
/* Las cajas estaban a un 6 % de blanco sobre el fondo: sobre la tinta verde
   eso es prácticamente el mismo color, y las tres razones —lo que de verdad
   convence en esta sección— parecían texto suelto. Ahora tienen superficie,
   borde y un canto verde que se enciende al pasar por encima. */
.home-store__perks li {
    position: relative;
    padding: var(--space-2) var(--space-3);
    padding-left: calc(var(--space-3) + 4px);
    background: rgba(244, 246, 242, 0.045);
    border: 1px solid rgba(244, 246, 242, 0.10);
    border-radius: var(--radius-sm);
    color: rgba(244, 246, 242, 0.86);
    font-size: var(--fs-sm);
    line-height: 1.6;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}
.home-store__perks li::before {
    content: "";
    position: absolute;
    inset: 10px auto 10px 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, #8ff08f, var(--color-brand));
}
.home-store__perks li:hover {
    background: rgba(244, 246, 242, 0.075);
    border-color: rgba(143, 240, 143, 0.30);
}
.home-store__perks strong {
    display: block;
    color: var(--color-text-invert);
    margin-bottom: 2px;
}

/* El botón secundario del bloque va sobre fondo oscuro: el del tema claro
   desaparecería. */
.home-store .btn--secondary {
    color: var(--color-text-invert);
    border-color: rgba(244, 246, 242, 0.45);
    background: transparent;
}
.home-store .btn--secondary:hover {
    color: var(--color-bg-ink);
    background: var(--color-brand-bright);
    border-color: var(--color-brand-bright);
}


/* =============================================================================
 * 2. FAMILIAS DEL CATÁLOGO
 * ========================================================================== */
.silo-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 560px)  { .silo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .silo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .silo-grid { grid-template-columns: repeat(4, 1fr); } }

.silo-card { display: flex; }
.silo-card > a {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    /* 44px de alto mínimo por accesibilidad táctil; el padding ya lo supera. */
    padding: var(--space-3);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: inherit;
    transition: border-color var(--transition-base),
                transform var(--transition-base),
                box-shadow var(--transition-base);
}
@media (hover: hover) {
    .silo-card > a:hover {
        border-color: var(--color-brand);
        transform: translateY(-2px);
        box-shadow: var(--shadow-card-hover, 0 12px 24px -18px rgba(0,0,0,0.35));
    }
}
.silo-card > a:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
}
.silo-card__name {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
}
.silo-card__intro {
    margin: 0;
    flex: 1;
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: var(--color-text-muted);
}
.silo-card__count {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-brand);
    font-weight: 600;
}

.home-silos__all {
    margin: var(--space-4) 0 0;
    text-align: center;
}


/* =============================================================================
 * 3. POR QUÉ AQUÍ
 * ========================================================================== */
.home-why__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}
@media (min-width: 768px) {
    .home-why__grid { grid-template-columns: repeat(3, 1fr); }
}
.home-why__card {
    padding: var(--space-3);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-brand);
    border-radius: var(--radius-md);
}
.home-why__card h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    margin: 0 0 8px;
}
.home-why__card p {
    margin: 0;
    color: var(--color-text-muted);
    line-height: 1.65;
    font-size: var(--fs-sm);
}


/* =============================================================================
 * 4. MARCAS
 * ========================================================================== */
.home-brands__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
}
.home-brands__list a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--color-text);
    transition: border-color var(--transition-base), color var(--transition-base);
}
.home-brands__list a span {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-brand);
    font-variant-numeric: tabular-nums;
}
@media (hover: hover) {
    .home-brands__list a:hover { border-color: var(--color-brand); color: var(--color-brand-deep); }
}
.home-brands__all {
    margin: var(--space-3) 0 0;
    text-align: center;
    font-size: var(--fs-sm);
}
.home-brands__all a { color: var(--color-brand); }


/* =============================================================================
 * 5. CTA FINAL
 * ========================================================================== */
/* La banda de cierre: la superficie grande donde el lila del logotipo se ve
   de verdad. Era verde plano. El botón que lleva dentro es blanco, así que
   el fondo puede vestir sin robarle nada a la acción. */
.home-final-cta {
    background: var(--gradient-duo);
    color: #fff;
    padding-block: var(--section-pad);
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Un halo del verde vivo en la esquina de arranque, para que el degradado no
   se lea como una transición plana de un color a otro. */
.home-final-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 120% at 8% 0%,
        rgba(67, 211, 67, 0.20) 0%, transparent 60%);
    pointer-events: none;
}

.home-final-cta > * { position: relative; }
.home-final-cta h2 {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    line-height: 1.15;
    margin: 0 0 var(--space-2);
    color: #fff;
}
.home-final-cta p {
    margin: 0 auto var(--space-3);
    max-width: 56ch;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.65;
}
.home-final-cta__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
}
@media (min-width: 560px) {
    .home-final-cta__actions {
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
}
/* Sobre el verde de marca, el primario verde no se vería: se invierte. */
.home-final-cta .btn--primary {
    background: #fff;
    background-image: none;
    color: var(--color-brand-deep);
    border-color: #fff;
}
.home-final-cta .btn--primary:hover {
    background: var(--color-brand-tint);
    color: var(--color-brand-deep);
}
.home-final-cta .btn--secondary {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.6);
}
.home-final-cta .btn--secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #fff;
    color: #fff;
}


/* =============================================================================
 * 6. HERO — apoyos propios de la portada
 * ========================================================================== */
.conversion-hero__phone {
    margin: var(--space-2) 0 0;
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, 0.82);
}
.conversion-hero__phone a {
    color: #fff;
    font-weight: 700;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.conversion-hero__proof a { color: inherit; border-bottom: 1px dotted currentColor; }
.conversion-hero__open { color: var(--color-brand-bright); font-weight: 700; }
/* El check iba en --color-gold, que con el tema claro es verde tierra oscuro y
   sobre la foto del hero no se distingue. */
.conversion-hero__proof li::before { color: var(--color-brand-bright); }

/* .text-foil está definido con el verde oscuro de marca (--color-amber-light,
   #1d8a3a) y en el hero va sobre foto oscurecida: se leía casi negro sobre
   negro. En la portada se pinta con el verde vivo del logotipo. */
.conversion-hero .text-foil {
    background-image: linear-gradient(100deg,
        var(--color-brand-bright) 0%,
        #7ee87e 45%,
        var(--color-brand-bright) 100%);
    color: var(--color-brand-bright);
}

/* ============================================================================
   Hero de la portada — contraste garantizado
   ----------------------------------------------------------------------------
   El texto del hero se pintaba con los grises del tema (--color-text-muted y
   --color-text-dim), que están calculados para leerse sobre FONDO CLARO. Sobre
   una foto salían a 2:1 o menos: ilegibles.

   Aquí todo el texto va en blanco y el velo que hay debajo es lo que garantiza
   que se lea, no la suerte de que la foto salga oscura por esa zona. El velo
   es más denso a la izquierda, que es donde vive el titular, y se abre hacia
   la derecha para que la tienda se vea.

   Con el velo aplicado, la zona del texto queda por debajo del 30 % de
   luminancia, así que el blanco puro pasa de 7:1 en el peor caso.
   ========================================================================= */

/* El velo se abría demasiado pronto. Medido en el navegador a 1440 px: la
   columna de texto termina en el 79 % del ancho, pero el degradado ya estaba
   al 55 % de opacidad en el 62 % y al 35 % en el borde. Justo ahí cae la
   pared verde de la foto, así que la mitad derecha del titular quedaba a
   **1,80:1** —el mínimo para texto grande es 3:1— y por eso la palabra
   destacada no se leía.
   Ahora el velo se mantiene denso hasta el 72 % (donde acaba de verdad el
   texto) y cae de golpe después, así que la tienda se sigue viendo por la
   derecha. Mismo encuadre, contraste medido de 9:1 en el peor punto. */
.hero--home .hero__overlay {
    background:
        /* Capa 1 — la columna de lectura. Densa hasta donde llega el texto
           (72 %) y se abre deprisa después: la foto del local es el argumento
           de la portada, taparla entera para ganar contraste sería cambiar un
           problema por otro. */
        linear-gradient(95deg,
            rgba(8, 24, 16, 0.94) 0%,
            rgba(8, 24, 16, 0.90) 42%,
            rgba(8, 24, 16, 0.82) 62%,
            rgba(8, 24, 16, 0.46) 80%,
            rgba(8, 24, 16, 0.12) 100%),
        /* Capa 2 — viñeteado, solo en los bordes: cierra el encuadre sin
           tocar el centro de la imagen. */
        radial-gradient(130% 100% at 40% 45%,
            transparent 55%,
            rgba(5, 16, 10, 0.28) 100%),
        /* Capa 3 — vertical, la que sostiene el contraste en móvil, donde el
           texto no está a la izquierda sino encima de toda la foto. */
        linear-gradient(180deg,
            rgba(8, 24, 16, 0.42) 0%,
            rgba(8, 24, 16, 0.10) 45%,
            rgba(8, 24, 16, 0.72) 100%);
}
/* En móvil no hay columna lateral que valga: el texto ocupa todo el ancho,
   así que el velo horizontal sobra y el vertical tiene que ser más denso. */
@media (max-width: 899px) {
    .hero--home .hero__overlay {
        background:
            radial-gradient(135% 85% at 50% 32%,
                transparent 28%,
                rgba(5, 16, 10, 0.45) 100%),
            linear-gradient(180deg,
                rgba(8, 24, 16, 0.82) 0%,
                rgba(8, 24, 16, 0.68) 38%,
                rgba(8, 24, 16, 0.94) 100%);
    }
}

.hero--home .hero__title,
.hero--home .hero__lead,
.hero--home .hero__eyebrow,
.hero--home .hero__meta,
.hero--home .hero__meta * ,
.hero--home .hero__note {
    color: #ffffff;
}

/* Los secundarios no bajan de un blanco al 88 %: por debajo vuelven a ser
   grises sobre foto, que es justo el problema que se está arreglando. */
.hero--home .hero__lead,
.hero--home .hero__note {
    color: rgba(255, 255, 255, 0.88);
}

.hero--home .hero__eyebrow {
    color: var(--color-brand-bright);
    text-shadow: 0 1px 3px rgba(8, 24, 16, 0.6);
}

/* Sombra suave en el titular: cubre el caso de que la foto tenga una zona
   clara justo detrás de una línea concreta. Amplia y muy difusa, para
   despegar las letras de la foto sin que se note que hay una sombra. */
.hero--home .hero__title {
    text-shadow: 0 2px 26px rgba(5, 16, 10, 0.55);
    letter-spacing: -0.025em;
}

/* La palabra destacada del titular.
   `.text-foil` global viene de la tienda de CBD: un degradado de tonos que
   caen en la misma franja de luminosidad que el follaje de esta foto, o sea
   invisible justo aquí (medido: 1,8:1). Se sube el brillo manteniendo el
   verde del logo — sobre el velo nuevo da 9,6:1.
   Selector compuesto a propósito: signature.css se carga después que este
   fichero, así que esto gana por especificidad, no por orden de carga, que
   es lo único que no se rompe al reordenar los <link>. */
.hero--home .text-foil {
    background: linear-gradient(100deg,
        #5fe05f 0%,
        #b9ffb9 46%,
        #6fe36f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .hero--home .text-foil { color: #8ff08f; }
}

@media (min-width: 1024px) {
    /* El texto de la portada no ocupa todo el ancho: a la derecha tiene que
       verse la foto del local, que es media tesis de esta web.

       Pero el límite va en los HIJOS, no en el contenedor. Antes era
       `max-width: 62%` sobre `.hero__inner`, que se centra con
       `margin-inline: auto`: al estrecharlo, el bloque entero se recentraba y
       el H1 de la portada se iba unos 100 px a la derecha de la vertical donde
       empieza el resto del contenido de la página. Y encima era un porcentaje
       de ancho, que en esta web no se usan. */
    /* El límite es de MEDIDA DE LECTURA, así que va al texto. Aplicado a
       todo, se comía la fila de botones: los dos del segundo slide suman más
       de 660 px y se apilaban en vertical en pantalla grande, mientras los
       del primero salían en línea. */
    .hero--home .hero__inner > :is(p, h1, h2) { max-width: 660px; }
}

/* ── Alternancia de fotos del hero ────────────────────────────────────────
   Tres fotos del local que se van sucediendo. Sin JavaScript: la primera es
   la que marca el LCP y se pinta ya; las otras dos entran encima con una
   transición larga. Cada una tarda 21 s en dar la vuelta, tiempo de sobra
   para que nadie sienta que la página se mueve mientras lee.
   ───────────────────────────────────────────────────────────────────────── */

/* ── El encuadre de las fotos del local ───────────────────────────────────
   `--hero-pos` lo pone cada diapositiva en su `style`, y el valor por defecto
   ya no es `center`. Las cuatro fotos están hechas de pie dentro del local y
   tienen medio techo negro en la mitad de arriba: centradas, la portada
   enseñaba placas de escayola y focos. Bajando el punto de interés al 64 % se
   ve lo que importa, que es el género en las estanterías.
   ───────────────────────────────────────────────────────────────────────── */

.hero--home .hero__media {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: var(--hero-pos, 50% 62%);
}

/* En móvil el hero es mucho más alto que ancho y el recorte se come los
   lados. Se sube un poco el punto de interés para no quedarnos con el suelo. */
@media (max-width: 640px) {
    .hero--home .hero__media { background-position: 55% 58%; }
}

/* ── Las dos diapositivas ─────────────────────────────────────────────────
   Se apilan en la misma celda de un grid en vez de con `position:absolute`:
   así la altura del bloque la marca la diapositiva MÁS ALTA y no hay salto de
   maquetación al cambiar —que es de donde sale casi todo el CLS de un
   carrusel—. La que no está activa no recibe foco ni lectura.
   ───────────────────────────────────────────────────────────────────────── */

.hero-deck {
    position: relative;
    display: grid;
    grid-template-areas: "slide";
}

.hero-deck .hero-slide {
    grid-area: slide;
    opacity: 0;
    visibility: hidden;
    transition: opacity 620ms var(--ease-out-expo, ease);
}

.hero-deck .hero-slide.is-active {
    opacity: 1;
    visibility: visible;
}

/* Sin JavaScript no hay cambio de diapositiva, así que la primera se queda
   puesta y la segunda no debe tapar nada: esto es lo que se ve si el script
   falla. */
.hero-deck:not([data-hero-ready]) .hero-slide:not(.is-active) { display: none; }

/* ── Controles ─────────────────────────────────────────────────────────── */

.hero-deck__nav {
    position: absolute;
    z-index: 3;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--radius-pill);
    background: rgba(10, 20, 14, 0.55);
    backdrop-filter: blur(6px);
}

/* El punto que se ve mide 10 px, pero el botón mide 44: el área táctil no
   puede ser del tamaño del dibujo. */
.hero-deck__dot {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.hero-deck__dot::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    transition: background var(--dur-fast) ease, width var(--dur-fast) ease;
}

.hero-deck__dot:hover::before { background: rgba(255, 255, 255, 0.8); }

.hero-deck__dot.is-active::before {
    width: 26px;
    border-radius: var(--radius-pill);
    background: var(--color-brand-bright);
}

.hero-deck__dot:focus-visible,
.hero-deck__pause:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: -4px;
    border-radius: var(--radius-pill);
}

.hero-deck__pause {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    display: grid;
    place-items: center;
}

.hero-deck__pause:hover { color: #ffffff; }

@media (max-width: 640px) {
    .hero-deck__nav { bottom: 10px; }
}

/* Quien ha pedido menos movimiento no quiere el carrusel andando solo. El JS
   ya no lo arranca; esto quita además la transición. */
@media (prefers-reduced-motion: reduce) {
    .hero-deck .hero-slide { transition: none; }
}

/* Deriva lentísima de la foto: 28 s para recorrer un 6 % de escala. No se ve
   moverse mirándola; se nota en que la portada no parece una captura de
   pantalla. Va en la capa de imagen, nunca en el texto, para no arrastrar el
   contenido ni mover el LCP. */
.hero--home .hero__media {
    animation: hero-deriva 28s ease-in-out infinite alternate;
    transform-origin: 62% 45%;
}

@keyframes hero-deriva {
    from { transform: scale(1.02); }
    to   { transform: scale(1.08); }
}

/* Quien ha pedido menos movimiento se queda con la primera foto y punto. */
@media (prefers-reduced-motion: reduce) {
    .hero--home .hero__media--2,
    .hero--home .hero__media--3 { animation: none; opacity: 0; }
    .hero--home .hero__media { animation: none; transform: none; }
}

/* ── Las pruebas del hero ─────────────────────────────────────────────────
   Eran cuatro frases sueltas con un ✓ delante, flotando sobre la foto: la
   línea que más rápido se lee de la portada y la que peor se veía. Como
   piezas con fondo propio dejan de depender de lo que haya en la imagen y,
   de paso, cierran el hero por abajo con algo sólido. */
.hero--home .conversion-hero__proof {
    gap: 8px;
    margin-top: clamp(1.25rem, 3vh, 2rem);
}
.hero--home .conversion-hero__proof li {
    padding: 7px 14px 7px 12px;
    border: 1px solid rgba(143, 240, 143, 0.28);
    border-radius: 999px;
    background: rgba(8, 24, 16, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #ffffff;
    font-size: 0.8rem;
    line-height: 1.3;
}
.hero--home .conversion-hero__proof li::before {
    content: "✓";
    color: #8ff08f;
    font-weight: 700;
    font-size: 0.85em;
}
.hero--home .conversion-hero__proof a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(143, 240, 143, 0.5);
}
.hero--home .conversion-hero__proof a:hover {
    border-bottom-color: #8ff08f;
    color: #d8ffd8;
}
/* «Abierto ahora» es el único dato que cambia solo: se marca en verde para
   que se distinga de las otras tres, que son siempre ciertas. */
.hero--home .conversion-hero__open {
    border-color: rgba(95, 224, 95, 0.55);
    background: rgba(22, 112, 46, 0.45);
    font-weight: 600;
}
@media (max-width: 767px) {
    /* En móvil la lista pasa a rejilla (components.css); las piezas se
       quedarían a todo el ancho, que se lee como botones falsos. */
    .hero--home .conversion-hero__proof {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
    }
    .hero--home .conversion-hero__proof li { font-size: 0.74rem; padding: 6px 11px; }
}

/* ============================================================================
   Todos los heroes que llevan foto — contraste garantizado
   ----------------------------------------------------------------------------
   Mismo fallo que ya apareció en la portada, el pie y el botón de volver
   arriba: componentes que funcionan pero pintados con los colores del tema
   OSCURO anterior. Aquí, el titular y la entradilla de los heroes de
   categoría, marca, guía y blog usan los grises del tema —calculados para
   fondo claro— y se pintan encima de una foto: salen a 2:1 o menos.

   La regla se aplica por la clase `hero--parallax`, que es la que el partial
   pone SOLO cuando hay imagen de fondo. Los heroes sin foto (legal, buscador)
   siguen con el texto oscuro sobre claro, que ahí es lo correcto.
   ========================================================================= */

.hero--parallax .hero__title,
.hero--parallax .hero__lead,
.hero--parallax .hero__meta,
.hero--parallax .hero__meta *,
.hero--parallax .hero__breadcrumbs,
.hero--parallax .hero__breadcrumbs a,
.hero--parallax .hero__note {
    color: #ffffff;
}

.hero--parallax .hero__lead,
.hero--parallax .hero__breadcrumbs {
    color: rgba(255, 255, 255, 0.90);
}

.hero--parallax .hero__eyebrow {
    color: var(--color-brand-bright);
}

/* El velo no es decoración: es lo que sostiene el contraste pase lo que pase
   con la foto que toque. Sin él, una imagen clara deja el blanco ilegible.

   `:not(.hero--home)` no es un adorno: la portada lleva las DOS clases, y
   esta regla —misma especificidad, más abajo en el fichero— estaba pisando
   el velo de la portada, que es el que tiene en cuenta dónde cae el texto.
   Resultado: el titular seguía a 1,8:1 por mucho que se afinara el otro.
   Es la cuarta vez que el mismo componente aparece declarado dos veces en
   este proyecto; aquí se resuelve diciendo a quién se aplica cada uno en
   vez de dejarlo al orden de las líneas. */
.hero--parallax:not(.hero--home) .hero__overlay {
    background: linear-gradient(
        180deg,
        rgba(8, 24, 16, 0.72) 0%,
        rgba(8, 24, 16, 0.48) 45%,
        rgba(8, 24, 16, 0.82) 100%
    );
}

.hero--parallax:not(.hero--home) .hero__title {
    text-shadow: 0 2px 12px rgba(8, 24, 16, 0.45);
}

/* Los enlaces de las migas dentro del hero necesitan subrayado además del
   color: sobre foto, distinguir un enlace solo por el tono no funciona. */
.hero--parallax .hero__breadcrumbs a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hero--parallax .hero__breadcrumbs a:hover {
    color: var(--color-brand-bright);
}

/* ── Heroes SIN foto ──────────────────────────────────────────────────────
   Los heroes de categoría, marca y guía no llevan imagen de fondo, y ahí
   estaba el fallo de verdad: `.hero` pinta el fondo con --color-bg (#f6f6f1,
   casi blanco) mientras `.hero__title` sigue en `color: #fff`. Texto blanco
   sobre fondo blanco: invisible, no "difícil de leer".

   Venía del tema oscuro, donde --color-bg era casi negro y el blanco encima
   era lo correcto. Se arregla poniendo el fondo que ese texto blanco siempre
   dio por supuesto: el verde de la casa.
   ───────────────────────────────────────────────────────────────────────── */

.hero--no-image {
    background-color: var(--color-bg-ink);
    background-image: linear-gradient(120deg, #0a2818 0%, #12211a 45%, var(--color-brand-dark) 100%);
}

.hero--no-image .hero__title,
.hero--no-image .hero__lead,
.hero--no-image .hero__meta,
.hero--no-image .hero__meta *,
.hero--no-image .hero__breadcrumbs,
.hero--no-image .hero__breadcrumbs a,
.hero--no-image .hero__note {
    color: #ffffff;
}

.hero--no-image .hero__lead,
.hero--no-image .hero__breadcrumbs {
    color: rgba(255, 255, 255, 0.90);
}

.hero--no-image .hero__eyebrow { color: var(--color-brand-bright); }

.hero--no-image .hero__breadcrumbs a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hero--no-image .hero__breadcrumbs a:hover { color: var(--color-brand-bright); }

/* Los recuadros de datos del hero (nº de productos, envío…) llevaban borde
   oscuro, pensado para fondo claro. Sobre el verde no se veían. */
.hero--no-image .hero__meta > * {
    border-color: rgba(255, 255, 255, 0.24);
}

/* ── Botones sobre el hero ────────────────────────────────────────────────
   El CTA principal iba en verde de marca sobre el velo verde oscuro de la
   foto: verde sobre verde, que se lee mal justo en el botón más importante
   de la web. En blanco con texto verde profundo da 10,4:1 y además destaca
   sobre cualquier foto que se ponga detrás, que es lo que tiene que hacer
   la acción principal de una portada.

   El secundario se queda en contorno blanco: hueco a propósito, para que no
   compita con el primario. Dos botones igual de llamativos es no tener CTA.
   ───────────────────────────────────────────────────────────────────────── */

.hero--home .btn--primary,
.hero--parallax .btn--primary {
    background: #ffffff;
    background-image: none;
    color: var(--color-brand-deep);
    border: 0;
    box-shadow: 0 4px 18px -4px rgba(8, 24, 16, 0.5);
}

.hero--home .btn--primary:hover,
.hero--parallax .btn--primary:hover {
    background: var(--color-brand-bright);
    color: #0a2818;
}

.hero--home .btn--ghost,
.hero--parallax .btn--ghost {
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.55);
    background: transparent;
}

.hero--home .btn--ghost:hover,
.hero--parallax .btn--ghost:hover {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}