/* =============================================================================
 * editorial.css — capa visual editorial premium
 * Heroes por tipo de página + componentes reutilizables (drop-cap, pullquote,
 * data-sheet, divider-decor, editorial-prose, product-card--premium).
 * Cargado globalmente desde layouts/main.php.
 * ========================================================================== */

/* === Container ==============================================================
 * Aquí había un override de `.container` con `width: 90%` comentado como
 * "regla de marca". No lo es: es justo lo contrario. Un ancho en % hace que el
 * padding lateral cambie con la pantalla — 16px a 320px, 21px a 414px, 38px a
 * 767px — que es exactamente la deriva que la regla de anchos prohíbe.
 *
 * Y como editorial.css carga DESPUÉS de layout.css, este bloque pisaba al
 * `.container` correcto en las 68 plantillas del sitio.
 *
 * El único `.container` vive ahora en layout.css: ancho fluido + max-width +
 * padding lateral fijo en px. No volver a declararlo aquí.
 * ========================================================================== */

/* =============================================================================
 * HERO — sistema unificado por tipo de página
 * ========================================================================== */
.hero {
    position: relative;
    /* Antes 56vh. Bajado para dejar más espacio al catálogo. */
    min-height: 42vh;
    display: flex;
    align-items: flex-end;
    padding: clamp(2.5rem, 6vh, 4.5rem) 0 clamp(2rem, 5vh, 3.5rem);
    overflow: hidden;
    isolation: isolate;
    background-color: var(--color-bg);
}
.hero--home     { min-height: 60vh; } /* antes 72vh */

/* === Hero slider (solo home) ==========================================
   Aproximación con CSS Grid: todos los slides ocupan LA MISMA CELDA del
   grid (grid-column: 1 / grid-row: 1), así nunca se apilan verticalmente
   ni en el flujo del documento. Independiente de position:absolute, que
   en algunos cases puede fallar por z-index / parent quirks.
   Solo uno visible a la vez controlado por opacity + pointer-events.
   ===================================================================== */
.hero-slider {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
}
.hero-slider > .hero-slide {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 600ms var(--ease-editorial), visibility 0s linear 600ms;
}
.hero-slider > .hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 1;
    transition: opacity 600ms var(--ease-editorial), visibility 0s linear 0s;
}

/* Controles (dots) por encima de todos los slides */
.hero-slider__controls {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 5;
}
.hero-slider__dot {
    width: 36px;
    height: 4px;
    background: rgba(245, 241, 232, 0.3);
    border: 0;
    border-radius: 2px;
    cursor: pointer;
    transition: background 0.3s ease, width 0.3s ease;
    padding: 0;
}
.hero-slider__dot:hover,
.hero-slider__dot:focus-visible {
    background: rgba(245, 241, 232, 0.6);
    outline: none;
}
.hero-slider__dot.is-active {
    background: var(--color-amber);
    width: 56px;
    box-shadow: 0 0 10px rgba(247, 200, 59, 0.5);
}

/* Scroll hint global del slider */
.hero-slider > .hero__scroll-hint {
    position: absolute;
    bottom: 52px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    pointer-events: none;
}

/* H2 estilizado como H1 — un solo <h1> real en la página por SEO */
.hero__title--as-h1 {
    /* hereda todo de .hero__title — browsers modernos ya le dan el mismo
       tamaño al usar la misma clase. Regla por si un UA aplica h2 default. */
    font-size: inherit;
    line-height: inherit;
    margin: inherit;
}
.hero--legal    { min-height: 22vh; align-items: center; padding-block: clamp(1.5rem, 4vh, 2.75rem); }
.hero--search   { min-height: 20vh; align-items: center; padding-block: clamp(1.5rem, 3.5vh, 2.5rem); }
/* ── El hero de una categoría ─────────────────────────────────────────────
   Medido en el navegador: en un móvil de 805 px de alto había que bajar
   746 px para ver el PRIMER producto. Casi una pantalla entera de portada
   antes de enseñar nada de lo que se vende, en la página a la que llega
   alguien que ya ha buscado «semillas feminizadas» en Google y sabe
   perfectamente lo que quiere.

   El hero de la portada tiene que impresionar; el de una categoría tiene que
   quitarse de en medio. Se queda en lo justo para el título, las migas y los
   tres datos —lo que da contexto— y en móvil, donde cada píxel de alto es una
   pantalla, baja más. */
.hero--category {
    min-height: 24vh;
    padding-block: clamp(1.5rem, 3vh, 2.25rem);
}

@media (max-width: 700px) {
    .hero--category {
        min-height: 0;
        padding-block: 1.25rem 1.5rem;
    }
}

.hero__media {
    position: absolute;
    inset: -8% 0 -8% 0;
    z-index: -2;
    background-image: var(--hero-bg, linear-gradient(135deg, var(--color-bg-ink) 0%, #163325 60%, #1d4030 100%));
    background-size: cover;
    background-position: center 38%;
    transform: scale(1.05);
    will-change: transform;
    transition: transform var(--dur-slow, 700ms) var(--ease-editorial, ease);
}
.hero--parallax .hero__media {
    transition: none;
    transform: translate3d(0, 0, 0) scale(1.12);
}
@media (prefers-reduced-motion: reduce) {
    .hero--parallax .hero__media { transform: none !important; }
}
.hero--legal .hero__media,
.hero--search .hero__media {
    background-image: radial-gradient(ellipse at 70% 20%, rgba(226,190,101,0.08), transparent 55%),
                      linear-gradient(180deg, var(--color-bg), var(--color-bg-soft));
}
.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--overlay-hero-side);
}
.hero--home .hero__overlay { background: var(--overlay-hero-dark); }
.hero--legal .hero__overlay,
.hero--search .hero__overlay { background: transparent; }

/* El hero es un contenedor más, no un sistema aparte.
   -------------------------------------------------------------------------
   Tenía su propio ancho —1 240 px— y su propia escala de padding —16/24/32—,
   distintos de los del resto del sitio. Resultado: en un portátil de 1440 el
   H1 del hero arrancaba unos 30 px más adentro que el primer párrafo de la
   sección de debajo. Es de esos desajustes que no se saben nombrar pero se
   ven: el ojo lee la vertical izquierda de la página y ahí había un escalón.
   Ahora comparte tope y aire lateral con `.container`. */
.hero__inner {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
    box-sizing: border-box;
    position: relative;
}

/* Breadcrumbs dentro del hero */
.hero__breadcrumbs { margin-bottom: clamp(1.25rem, 3vh, 2rem); }
.hero__breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.58);
    font-family: var(--font-body);
}
.hero__breadcrumbs li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.hero__breadcrumbs li + li::before {
    content: "·";
    color: var(--color-gold);
    opacity: 0.6;
    margin-right: 0.25rem;
}
/* El último tramo —el que dice dónde estás— iba en `--color-gold`, que en la
   paleta verde de esta tienda es un verde grisáceo oscuro. Sobre un hero con
   foto, o sobre la banda oscura de /aprende, quedaba a poco más de 2:1: el
   resto de la ruta se leía y justo el tramo importante no. Los heroes sobre
   fondo claro (legal, buscador) tienen su propio color más abajo. */
.hero__breadcrumbs li:last-child,
.hero__breadcrumbs li[aria-current="page"] {
    color: #ffffff;
    font-family: var(--font-display);
    letter-spacing: 0.04em;
    text-transform: none;
    font-size: 0.92rem;
}
.hero__breadcrumbs a {
    color: inherit;
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-editorial);
}
.hero__breadcrumbs a:hover { color: #fff; }

/* Eyebrow */
.hero__eyebrow {
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-amber);
    font-weight: 500;
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.hero__eyebrow::before {
    content: "";
    display: inline-block;
    width: 32px;
    height: 1px;
    background: linear-gradient(to right, var(--color-amber), transparent);
    opacity: 0.9;
}

/* Title */
.hero__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.2rem, 6vw, 4.5rem); /* tamaño bajado un punto */
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin: 0 0 clamp(0.75rem, 1.8vh, 1.25rem);
    color: #fff;
    /* Antes 16ch — muy estrecho, el texto rompía en 3-4 líneas.
       Ahora permite 24-28ch para que quepa en 1-2 líneas cómodamente. */
    max-width: 26ch;
}
.hero--home .hero__title {
    font-size: clamp(2.6rem, 7.5vw, 5.5rem);
    max-width: 28ch;
}
.hero--legal .hero__title,
.hero--search .hero__title {
    font-size: clamp(1.85rem, 4.5vw, 3rem);
    max-width: 34ch;
}

/* ── Heros sobre fondo CLARO ─────────────────────────────────────────────
   Los heros de tipo legal y search no llevan foto: su .hero__media es un
   degradado de --color-bg a --color-bg-soft, o sea casi blanco. Todo el
   bloque .hero__* está escrito para foto oscura y pinta en blanco, así que
   el H1 salía blanco sobre blanco —invisible— en las 26 vistas que usan
   page-hero con esos tipos (cuenta, legales, FAQ, guías, buscador…).
   Aquí se invierten los colores; el resto del hero se queda como está. */
.hero--legal .hero__title,
.hero--search .hero__title { color: var(--color-text); }

.hero--legal .hero__lead,
.hero--search .hero__lead { color: var(--color-text-muted); }

.hero--legal .hero__eyebrow,
.hero--search .hero__eyebrow { color: var(--color-brand-deep); }
.hero--legal .hero__eyebrow::before,
.hero--search .hero__eyebrow::before {
    background: linear-gradient(to right, var(--color-brand), transparent);
}

.hero--legal .hero__breadcrumbs ol,
.hero--search .hero__breadcrumbs ol { color: var(--color-text-muted); }
.hero--legal .hero__breadcrumbs li:last-child,
.hero--legal .hero__breadcrumbs li[aria-current="page"],
.hero--search .hero__breadcrumbs li:last-child,
.hero--search .hero__breadcrumbs li[aria-current="page"] { color: var(--color-text); }
.hero--legal .hero__breadcrumbs li + li::before,
.hero--search .hero__breadcrumbs li + li::before { color: var(--color-brand); }
.hero--legal .hero__breadcrumbs a:hover,
.hero--search .hero__breadcrumbs a:hover { color: var(--color-brand-deep); }

.hero--legal .hero__meta,
.hero--search .hero__meta { border-top-color: var(--color-border); }
.hero--legal .hero__meta dt,
.hero--search .hero__meta dt { color: var(--color-text-dim); }
.hero--legal .hero__meta dd,
.hero--search .hero__meta dd { color: var(--color-text); }

/* Lead */
.hero__lead {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.15vw, 1.15rem);
    line-height: 1.55;
    color: rgba(255,255,255,0.82);
    /* Antes 52ch — ahora 72ch para que el lead quepa en 2 líneas máx. */
    max-width: 72ch;
    margin: 0 0 clamp(1rem, 2vh, 1.5rem);
    font-weight: 300;
}

/* Meta */
.hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    margin: 0;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(226,190,101,0.25);
    max-width: 680px;
}
.hero__meta > div {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.hero__meta dt {
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    font-weight: 500;
}
.hero__meta dd {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: #fff;
    margin: 0;
    font-feature-settings: "onum";
}

/* CTA row */
.hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: clamp(1.25rem, 2vh, 2rem) 0 clamp(1.5rem, 3vh, 2.5rem);
}

/* ── Botón secundario dentro de un hero oscuro ────────────────────────────
   Mismo fallo que el titular y las migas, y el último que quedaba: en
   components.css el botón secundario es `--color-amber-light`, que tras el
   cambio de identidad ya no es ámbar sino VERDE (#1d8a3a). Sobre el velo del
   hero —verde casi negro— eso da 4,1:1: se lee a duras penas y encima el
   verde sobre verde no se distingue como botón.

   Sobre foto y sobre verde, lo único que siempre funciona es el blanco. Se
   le da borde blanco al 70 %, texto blanco puro y un fondo translúcido que
   lo despega de la imagen sin taparla.
   ───────────────────────────────────────────────────────────────────────── */

.hero--home .btn--secondary,
.hero--parallax .btn--secondary,
.hero--no-image .btn--secondary {
    background: rgba(255, 255, 255, 0.10);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.72);
    border-width: 2px;
    font-weight: 600;
    backdrop-filter: blur(2px);
}

.hero--home .btn--secondary:hover,
.hero--parallax .btn--secondary:hover,
.hero--no-image .btn--secondary:hover {
    background: rgba(255, 255, 255, 0.20);
    border-color: #ffffff;
    color: #ffffff;
}

.hero--home .btn--secondary:focus-visible,
.hero--parallax .btn--secondary:focus-visible,
.hero--no-image .btn--secondary:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
}

/* El subrayado que polish.css revela al pasar el cursor hereda currentColor,
   que aquí ya es blanco. Se sube la opacidad porque al 40 % sobre foto no se
   ve nada. */
.hero--home .btn--secondary::after,
.hero--parallax .btn--secondary::after,
.hero--no-image .btn--secondary::after {
    opacity: 0.75;
}

/* Icono de WhatsApp dentro del botón: se reconoce antes por la silueta que
   por leer el rótulo. */
.btn__icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    fill: currentColor;
    margin-right: 8px;
    vertical-align: -3px;
}

/* Scroll hint */
.hero__scroll-hint {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 44px;
    background: linear-gradient(to bottom, transparent, rgba(247,200,59,0.45));
    overflow: hidden;
    z-index: 1;
}
.hero__scroll-hint span {
    display: block;
    width: 100%;
    height: 40%;
    background: var(--color-amber);
    animation: hero-scroll 2.4s var(--ease-editorial, ease) infinite;
}
@keyframes hero-scroll {
    0%   { transform: translateY(-110%); }
    100% { transform: translateY(250%); }
}

/* Línea fina dorada decorativa para heroes sobrios (legal, search) */
.hero__rule {
    display: block;
    width: 72px;
    height: 2px;
    background: linear-gradient(to right, var(--color-amber), var(--color-amber-dark));
    margin: 1.5rem 0 0;
    opacity: 0.9;
}

/* === Móvil === */
@media (max-width: 768px) {
    .hero {
        min-height: 52vh;
        padding: 4rem 0 2.5rem;
    }
    .hero--home     { min-height: 62vh; }
    .hero--category { min-height: 34vh; }
    .hero--legal    { min-height: 22vh; }
    .hero--search   { min-height: 18vh; }
    .hero__meta { gap: 1rem; padding-top: 1rem; }
    .hero__meta dt { font-size: 0.58rem; }
    .hero__meta dd { font-size: 0.95rem; }
    .hero__scroll-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hero__media, .hero__scroll-hint span { animation: none; transition: none; }
}


/* =============================================================================
 * EDITORIAL PROSE — contenedor de texto largo con medidas de lectura
 * ========================================================================== */
.editorial-prose {
    max-width: var(--measure-wide, 86ch);
    margin-inline: auto;
    font-family: var(--font-body);
    /* Párrafos de lectura larga: 1.18-1.32rem (19-21px) para comodidad real */
    font-size: var(--fs-base);
    line-height: 1.75;
    color: var(--color-text);
}

/* === Parallax break: sección con imagen de fondo fija, overlay y contenido
      centrado. Rompe el patrón dark uniforme entre secciones. ============= */
.parallax-break {
    position: relative;
    min-height: 62vh;
    max-height: 720px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-6) var(--space-3);
}
.parallax-break__img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    z-index: 0;
    transform: scale(1.05);
    will-change: transform;
}
@media (max-width: 768px) {
    /* iOS Safari no soporta background-attachment: fixed de forma fiable */
    .parallax-break__img { background-attachment: scroll; }
    .parallax-break { min-height: 52vh; }
}
.parallax-break__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        180deg,
        rgba(10,10,10,0.88) 0%,
        rgba(10,10,10,0.65) 45%,
        rgba(10,10,10,0.92) 100%
    );
}
.parallax-break__content {
    position: relative;
    z-index: 2;
    max-width: 720px;
    color: var(--color-text);
}
.parallax-break__eyebrow {
    margin: 0 0 var(--space-2);
    font-size: 0.82rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-gold);
}
.parallax-break__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    margin: 0 0 var(--space-3);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--color-text);
    font-weight: 500;
}
.parallax-break__lead {
    margin: 0 auto var(--space-4);
    max-width: 560px;
    font-size: var(--fs-base);
    line-height: 1.7;
    color: var(--color-text-muted);
}
.editorial-prose p {
    margin: 0 0 1.35em;
    color: var(--color-text-muted);
    font-weight: 400;
}
.editorial-prose p + p { margin-top: 0; }
.editorial-prose ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5em;
}
.editorial-prose ul li {
    position: relative;
    padding-left: 1.6em;
    margin-bottom: 0.55em;
    color: var(--color-text-muted);
    line-height: 1.65;
}
.editorial-prose ul li::before {
    content: "";
    position: absolute;
    left: 0.35em;
    top: 0.7em;
    width: 7px;
    height: 1.5px;
    background: var(--color-gold);
}
.editorial-prose h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    letter-spacing: -0.015em;
    line-height: 1.15;
    margin: 2.5em 0 0.6em;
    color: var(--color-text);
}
.editorial-prose h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.35rem;
    margin: 2em 0 0.5em;
}
.editorial-prose strong { color: var(--color-gold); font-weight: 500; }
.editorial-prose a {
    color: var(--color-amber);
    border-bottom: 1px solid var(--color-amber-dark);
    text-decoration: none;
    transition: border-color var(--dur-fast) var(--ease-editorial), color var(--dur-fast) ease;
}
.editorial-prose a:hover { border-color: var(--color-amber); color: var(--color-amber-light); }


/* =============================================================================
 * DROP-CAP — capitular en primer párrafo
 * ========================================================================== */
.dropcap::first-letter,
.editorial-prose > p:first-of-type.has-dropcap::first-letter {
    font-family: var(--font-display);
    font-size: 5.2em;
    line-height: 0.82;
    float: left;
    padding: 0.1em 0.12em 0 0;
    color: var(--color-gold);
    font-weight: 500;
}


/* =============================================================================
 * PULLQUOTE — destacado editorial
 * ========================================================================== */
.pullquote {
    max-width: var(--measure, 65ch);
    margin: clamp(2rem, 5vh, 3rem) auto;
    padding: 0.5rem 0 0.5rem 1.75rem;
    border-left: 2px solid var(--color-gold);
}
.pullquote__text {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2.2vw, 1.85rem);
    line-height: 1.32;
    color: rgba(245, 241, 232, 0.94);
    margin: 0;
}
.pullquote__citation {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-gold);
    font-style: normal;
    font-family: var(--font-body);
}


/* =============================================================================
 * DIVIDER DECORATIVO
 * ========================================================================== */
.divider-editorial {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: clamp(3rem, 7vh, 5rem) auto;
    max-width: 360px;
    opacity: 0.7;
}
.divider-editorial__line {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--color-amber));
    transform-origin: right center;
    transform: scaleX(0);
    transition: transform var(--dur-slow, 700ms) var(--ease-editorial, ease);
}
.divider-editorial__line:last-child {
    background: linear-gradient(to left, transparent, var(--color-amber));
    transform-origin: left center;
}
.divider-editorial.is-visible .divider-editorial__line { transform: scaleX(1); }
.divider-editorial__mark {
    color: var(--color-gold);
    font-size: 0.95rem;
    letter-spacing: 0.15em;
    font-family: var(--font-display);
}


/* =============================================================================
 * DATA SHEET — tabla tipo laboratorio
 * ========================================================================== */
/* La ficha técnica se quedó con los colores del tema OSCURO de la tienda de
   CBD: bordes en el dorado ámbar de aquella paleta y las etiquetas en blanco
   al 58 %. Sobre el fondo claro de esta web, ese blanco da 1,05:1 —o sea,
   invisible— y afecta a «Unidades», «Marca» y «Referencia», que es toda la
   ficha técnica del producto. Detectado recorriendo el DOM real, no el CSS. */
.data-sheet {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    /* Caja propia, no dos líneas sueltas. La ficha técnica de un extractor o
       de un balastro es media decisión de compra: si se lee como una nota al
       pie, nadie la mira. Fondo claro, esquinas y aire por dentro. */
    padding: 4px 18px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.data-sheet__titulo {
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 14px 0 2px;
}
/* La línea separadora iba en blanco al 4 % —del tema oscuro— y sobre fondo
   claro no existía: las filas se leían como un bloque de texto sin rejilla.
   Y las filas alternas en gris muy suave hacen que el ojo siga la horizontal
   de la etiqueta a su valor sin perderse, que es de lo que va una tabla. */
.data-sheet__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    padding: 0.62rem 10px;
    margin-inline: -10px;
    border-radius: var(--radius-sm);
    border-bottom: 1px solid var(--color-border-soft);
    align-items: baseline;
}

.data-sheet__row:nth-child(even) { background: var(--color-bg); }

/* En móvil, etiqueta arriba y valor debajo: con dos columnas, un valor como
   «Original Diesel x (Northern light x Shiva)» se parte en cinco líneas
   contra el borde derecho. */
@media (max-width: 520px) {
    .data-sheet__row {
        grid-template-columns: 1fr;
        gap: 2px;
    }
    .data-sheet__row dd { text-align: left; }
}
.data-sheet__row:last-child { border-bottom: 0; }
.data-sheet__row dt {
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    /* 5,93:1. Era blanco al 58 %: 1,05:1 sobre el fondo de la página. */
    color: var(--color-text-muted);
    font-weight: 500;
    font-family: var(--font-body);
    margin: 0;
}
.data-sheet__row dd {
    font-family: var(--font-display);
    font-size: 1.05rem;
    /* El valor manda sobre la etiqueta: en el color de texto normal, 16,60:1.
       `--color-gold` es el alias de tierra y aquí lo dejaba en gris verdoso. */
    color: var(--color-text);
    font-weight: 600;
    margin: 0;
    font-feature-settings: "onum";
    text-align: right;
}


/* =============================================================================
 * CARD PRODUCT PREMIUM — versión mejorada (override del .product-card)
 * ========================================================================== */
.card-product {
    position: relative;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: 2px;
    overflow: hidden;
    transition: transform var(--dur-med) var(--ease-editorial),
                box-shadow var(--dur-med) var(--ease-editorial),
                border-color var(--dur-med) var(--ease-editorial);
    box-shadow: var(--shadow-card-idle);
    display: flex;
    flex-direction: column;
}
.card-product__link {
    color: inherit;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.card-product__media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--color-bg-elevated);
    margin: 0;
    /* Un contenedor de rejilla se estira con su contenido si no se le dice que
       no. Sin esto, una tarjeta cuya foto falta empuja a las de al lado y la
       fila entera se descuadra. */
    min-width: 0;
}

/* ── Cuando la foto no está ───────────────────────────────────────────────
   Faltan unos 33 ficheros de 13.097, y con el mayorista sirviendo imágenes
   siempre habrá alguno. Cuando eso pasa, el navegador pinta el TEXTO
   ALTERNATIVO dentro del hueco de la imagen, y ese texto —«Galaxy 7 u. Reg.
   Pyramid Seeds de Pyramid Seeds Regular»— se sale de la tarjeta por arriba
   y se superpone a la de al lado, con el tamaño de letra que herede.

   No se puede evitar que falle una imagen; sí que un fallo así rompa la
   rejilla. Con estas cuatro líneas, el alt cae dentro del cuadro, centrado y
   pequeño, y la tarjeta conserva su sitio. */
.card-product__media img {
    font-size: 11px;
    line-height: 1.3;
    color: var(--color-text-dim);
    text-align: center;
    /* Sin `padding`: en un <img> con `object-fit: cover` el padding recorta la
       foto de verdad, y se estaría encogiendo las 13.000 que sí cargan para
       maquetar mejor las treinta que no. */
}
.card-product__media img,
.card-product__media picture {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-editorial);
}

/* === Botón "Comparar" en card de producto =============================== */
.card-product__compare {
    position: absolute;
    top: 48px;
    right: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: rgba(10, 10, 10, 0.75);
    backdrop-filter: blur(4px);
    border: 1px solid var(--color-border);
    color: var(--color-text-invert);
    cursor: pointer;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 2px;
    transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.card-product__compare:hover,
.card-product__compare:focus-visible {
    color: var(--color-gold);
    border-color: var(--color-gold);
    outline: none;
}
.card-product__compare.is-active {
    color: var(--color-gold);
    border-color: var(--color-gold);
    background: rgba(226, 190, 101, 0.12);
}
.card-product__compare-label { display: none; }
@media (min-width: 768px) {
    .card-product:hover .card-product__compare-label,
    .card-product__compare.is-active .card-product__compare-label { display: inline; }
}

/* === Barra flotante del comparador ================================== */
.compare-bar {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%) translateY(calc(100% + 40px));
    z-index: 180;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-gold-dark);
    box-shadow: 0 16px 40px rgba(0,0,0,0.5);
    transition: transform 280ms var(--ease-editorial);
    max-width: calc(100vw - 32px);
}
.compare-bar.is-visible { transform: translateX(-50%) translateY(0); }
.compare-bar__label {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}
.compare-bar__count {
    color: var(--color-gold);
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
}

/* === Swatches de imágenes alternativas: hover/tap para previsualizar ===== */
.card-product__swatches {
    padding: 8px 10px 10px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.card-product__swatch {
    display: block;
    width: 36px;
    height: 36px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-elevated);
    cursor: pointer;
    transition: border-color var(--dur-fast) ease, transform var(--dur-fast) ease;
    overflow: hidden;
    border-radius: 2px;
}
.card-product__swatch img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.card-product__swatch:hover,
.card-product__swatch:focus-visible {
    border-color: var(--color-gold);
    outline: none;
    transform: translateY(-1px);
}
.card-product__swatch.is-active {
    border-color: var(--color-gold);
    box-shadow: 0 0 0 1px var(--color-gold);
}
.card-product__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 10px;
    background: var(--color-gold);
    color: var(--color-bg);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    z-index: 1;
}
.card-product__body {
    padding: var(--space-3) var(--space-3) var(--space-3);
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.card-product__eyebrow {
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-dim);
    margin: 0;
    font-weight: 500;
}
.card-product__title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--color-text);
    margin: 0;
    letter-spacing: -0.005em;

    /* Dos lineas y punto. Los nombres de semillas son largos de verdad
       ("Pyramid Seeds Auto Blueberry Fem 5 u.") y sin este tope una tarjeta
       de tres lineas empuja su precio mas abajo que el de las vecinas y
       descuadra la fila entera —justo lo que se arreglo a mano mas arriba.
       Con `min-height` reservado, la fila cuadra tenga el nombre que tenga. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    min-height: 2.5em;
}
.card-product__meta {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin: 0;
    font-variant-numeric: oldstyle-nums;
}
.card-product__price {
    margin-top: auto;
    padding-top: var(--space-2);
    font-family: var(--font-mono, monospace);
    font-feature-settings: "tnum", "onum";
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--color-gold);
    letter-spacing: 0.02em;
}
.card-product__price-from {
    font-size: 0.68rem;
    color: var(--color-text-dim);
    margin-right: 6px;
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0.15em;
}
.card-product__stock-low {
    display: inline-block;
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-brand);
    margin-top: 4px;
}

/* "Hoy en tienda" — el argumento de venta que un competidor nacional no puede
   copiar. Va en verde vivo sobre relleno claro (9,1:1) y con icono de local
   para que se distinga de un aviso de stock cualquiera. */
.card-product__store-today {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    padding: 3px 8px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-brand-deep);
    background: var(--color-brand-tint);
    border: 1px solid var(--color-brand);
    border-radius: var(--radius-pill);
}
.card-product__store-today svg { flex-shrink: 0; }

/* Misma señal en la ficha, con más peso porque ahí es donde se decide. */
.badge-store-today {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    padding: 8px 14px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-brand-deep);
    background: var(--color-brand-tint);
    border: 1px solid var(--color-brand);
    border-radius: var(--radius-pill);
}
.badge-store-today svg { flex-shrink: 0; }
.badge-store-today__note {
    margin: 0 0 var(--space-2);
    font-size: 0.82rem;
    color: var(--color-text-muted);
}
.badge-store-today__note a {
    color: var(--color-brand);
    border-bottom: 1px dotted var(--color-brand);
}
@media (hover: hover) {
    .card-product:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-card-hover);
        border-color: var(--color-gold-dark);
    }
    .card-product:hover .card-product__media img,
    .card-product:hover .card-product__media picture { transform: scale(1.04); }
}


/* =============================================================================
 * REVEAL ON SCROLL
 * ========================================================================== */
/*
 * La animación de entrada solo se aplica si JavaScript está vivo.
 *
 * `.reveal` arranca en `opacity: 0` y es main.js quien le pone `is-visible`
 * al entrar en pantalla. Si el script no llega —bloqueado, error en otro
 * script, red que se corta a medias—, todo lo marcado con `.reveal` se queda
 * invisible para siempre. Y eso incluye la entradilla de los heroes y varias
 * secciones enteras de la portada.
 *
 * Ya pasó con el H1, que se arregló forzándole opacidad en footer.css. Esto
 * lo resuelve de raíz para todos: la clase `js` la pone main.js en el <html>
 * nada más ejecutarse, así que sin JavaScript el contenido se pinta y punto.
 */
.js .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--dur-slow) var(--ease-editorial),
                transform var(--dur-slow) var(--ease-editorial);
}
.js .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal[data-reveal-delay="1"] { transition-delay: 120ms; }
.reveal[data-reveal-delay="2"] { transition-delay: 240ms; }
.reveal[data-reveal-delay="3"] { transition-delay: 360ms; }
.reveal[data-reveal-delay="4"] { transition-delay: 480ms; }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}


/* =============================================================================
 * SPLIT de ficha de producto
 * ========================================================================== */
.product-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}
@media (min-width: 1024px) {
    .product-split {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
        gap: clamp(2rem, 4vw, 4rem);
        align-items: start;
    }
    .product-split__aside {
        position: sticky;
        top: 96px;
    }
}


/* =============================================================================
 * STICKY CTA móvil (ficha producto)
 * ========================================================================== */
.mobile-cta-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 120;
    padding: 12px 7vw calc(12px + env(safe-area-inset-bottom));
    background: rgba(10, 10, 10, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--color-gold-dark);
    transform: translateY(100%);
    transition: transform var(--dur-med) var(--ease-editorial);
    display: flex;
    gap: 10px;
    align-items: center;
}
.mobile-cta-dock.is-visible { transform: translateY(0); }
.mobile-cta-dock__info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* Texto INVERTIDO: el dock pinta el fondo casi negro y estos dos venian con
   los colores del tema claro. El nombre daba 1,01:1 -invisible- y el precio
   1,9:1. Septima victima del mismo patron; ver footer.css y header.css. */
.mobile-cta-dock__name {
    font-size: 0.8rem;
    color: var(--color-text-invert);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mobile-cta-dock__price {
    font-family: var(--font-mono, monospace);
    font-feature-settings: "tnum", "onum";
    color: var(--color-brand-bright);
    font-size: 0.95rem;
}
.mobile-cta-dock .btn { flex-shrink: 0; padding: 14px 24px; }
@media (min-width: 1024px) {
    .mobile-cta-dock { display: none; }
}


/* =============================================================================
 * EMPTY CATEGORY editorial (reemplaza el box plano)
 * ========================================================================== */
.empty-category-editorial {
    padding: clamp(3rem, 8vh, 5rem) 0;
    text-align: center;
    border-top: 1px solid var(--color-border-soft);
    border-bottom: 1px solid var(--color-border-soft);
}
.empty-category-editorial h3 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    color: var(--color-text);
    margin: 0 0 1rem;
}
.empty-category-editorial p {
    max-width: 52ch;
    margin: 0 auto 1.5rem;
    color: var(--color-text-muted);
    line-height: 1.65;
}
.empty-category-editorial__rule {
    display: block;
    width: 64px;
    height: 1px;
    background: var(--color-gold);
    margin: 1.5rem auto;
    opacity: 0.7;
}
.empty-category-editorial__newsletter {
    display: flex;
    gap: 8px;
    max-width: 420px;
    margin: 0 auto;
    flex-wrap: wrap;
}
.empty-category-editorial__newsletter input {
    flex: 1;
    min-width: 200px;
    padding: 12px 16px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: 1rem;
}
@media (max-width: 480px) {
    .empty-category-editorial__newsletter { flex-direction: column; }
    .empty-category-editorial__newsletter .btn { width: 100%; }
}


/* =============================================================================
 * HEADER SHRINK ON SCROLL
 * ========================================================================== */
.site-header {
    transition: padding var(--dur-med) var(--ease-editorial),
                background var(--dur-med) var(--ease-editorial);
}
.site-header.is-scrolled {
    background: rgba(10, 10, 10, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.site-header.is-scrolled .header__inner { min-height: 56px; }


/* =============================================================================
 * FOOTER editorial ajustes
 * ========================================================================== */
/* El fondo lo pone footer.css; aquí solo queda el filo superior, que es lo
   único que esta hoja aporta al pie. Repetir el `background` no cambiaba nada
   y hacía creer que el pie se define en dos sitios. */
.site-footer {
    border-top: 1px solid var(--color-gold-dark);
}
.site-footer .eyebrow {
    color: var(--color-gold);
    opacity: 0.85;
}
.site-footer details {
    border-bottom: 1px solid var(--color-border-soft);
}
/* TERCERA copia del encabezado de columna del pie, y la que ganaba: con dos
   clases y un elemento (`.site-footer details summary`) le sacaba
   especificidad a `.footer-col > summary` de footer.css, así que el color de
   los encabezados lo decidía este bloque —`--color-gold`, que en esta paleta
   es un verde grisáceo casi invisible sobre el pie—.

   Es el mismo patrón del botón de volver arriba y de la paginación: el mismo
   componente declarado en tres ficheros. Aquí se quedan solo la disposición y
   el signo +/−; el color y el cuerpo son de footer.css. */
.site-footer details summary {
    padding: 16px 0;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.site-footer details summary::-webkit-details-marker { display: none; }
.site-footer details[open] summary::after { content: "−"; }
@media (min-width: 768px) {
    .site-footer details summary { pointer-events: none; }
    .site-footer details summary::after { display: none; }
    .site-footer details { border-bottom: 0; }
    .site-footer details > ul,
    .site-footer details > div { display: block !important; }
}


/* =============================================================================
 * HOME — secciones editoriales
 * ========================================================================== */
.home-values {
    padding: clamp(3rem, 8vh, 5rem) 0;
}
.home-values__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}
@media (min-width: 768px) {
    .home-values__grid { grid-template-columns: repeat(3, 1fr); }
}
.home-value {
    text-align: center;
    padding: var(--space-3);
}
.home-value__icon {
    color: var(--color-gold);
    margin: 0 auto var(--space-2);
    width: 48px;
    height: 48px;
}
.home-value__title {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 500;
    margin: 0 0 0.5rem;
}
.home-value__text {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Hero de categoría con imagen fondo — grid de categorías tipo tarjeta */
.home-cats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
@media (min-width: 640px) {
    .home-cats { gap: var(--space-2); }
}
@media (min-width: 768px) {
    /* Desktop y tablet: 3 columnas fijas (con 6 categorías = 2 filas limpias) */
    .home-cats { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
}
.home-cat {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    padding: 14px;
    border: 1px solid var(--color-border);
    text-decoration: none;
    color: #fff;
    transition: transform var(--dur-med) var(--ease-editorial);
}
@media (min-width: 768px) {
    .home-cat { aspect-ratio: 16 / 10; padding: var(--space-4); }
}
.home-cat__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-size: cover;
    background-position: center;
    transform: scale(1.02);
    transition: transform var(--dur-slow) var(--ease-editorial);
}
.home-cat__icon-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(circle at 70% 30%, rgba(226, 190, 101, 0.18), transparent 55%),
        linear-gradient(135deg, #163325 0%, #1d4030 50%, var(--color-bg-ink) 100%);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 12%;
    transition: transform var(--dur-slow) var(--ease-editorial);
}
.home-cat__icon {
    width: clamp(120px, 22vw, 200px);
    height: clamp(120px, 22vw, 200px);
    color: var(--color-gold);
    opacity: 0.22;
    transition: opacity var(--dur-med) var(--ease-editorial),
                transform var(--dur-slow) var(--ease-editorial);
}
.home-cat__icon svg { width: 100%; height: 100%; }
@media (hover: hover) {
    .home-cat:hover .home-cat__icon-bg { transform: scale(1.04); }
    .home-cat:hover .home-cat__icon { opacity: 0.38; transform: rotate(-4deg); }
}
/* En móvil el ícono va centrado en vez de a la derecha */
@media (max-width: 640px) {
    .home-cat__icon-bg {
        justify-content: center;
        padding-right: 0;
    }
    .home-cat__icon {
        width: 140px;
        height: 140px;
        opacity: 0.18;
    }
}
.home-cat__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(10,10,10,0.15) 0%, rgba(10,10,10,0.85) 100%);
}
.home-cat__body { position: relative; z-index: 1; }
.home-cat__eyebrow {
    font-size: 0.58rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin: 0 0 0.3rem;
}
@media (min-width: 768px) {
    .home-cat__eyebrow { font-size: 0.66rem; letter-spacing: 0.18em; margin-bottom: 0.5rem; }
}
.home-cat__title {
    font-family: var(--font-display);
    font-size: clamp(0.95rem, 2.5vw, 2rem);
    font-weight: 600;
    color: #fff;
    margin: 0 0 0.4rem;
    line-height: 1.15;
    letter-spacing: -0.015em;
}
.home-cat__cta {
    font-family: var(--font-body);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-gold);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: gap var(--dur-fast) var(--ease-editorial);
}
@media (min-width: 768px) {
    .home-cat__cta { font-size: 0.78rem; gap: 0.5rem; letter-spacing: 0.15em; }
}
.home-cat__cta::after { content: "→"; transition: transform var(--dur-fast); }
@media (hover: hover) {
    .home-cat:hover .home-cat__media { transform: scale(1.06); }
    .home-cat:hover .home-cat__cta::after { transform: translateX(4px); }
}

/* === DESCUENTO TEMPORAL en card y ficha === */
.card-product__badge--sale {
    background: var(--gradient-offer);
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.08em;
}
.card-product__price-strike {
    color: var(--color-text-dim);
    text-decoration: line-through;
    font-size: 0.82em;
    margin-right: 6px;
    font-weight: 400;
}
.card-product__price-sale {
    color: var(--color-magenta);
    font-weight: 600;
}
.product-price-sale-block {
    display: inline-flex;
    align-items: baseline;
    gap: 12px;
}
.product-price-sale-block .strike {
    text-decoration: line-through;
    color: var(--color-text-dim);
    font-size: 0.7em;
}
.product-price-sale-block .sale {
    color: var(--color-magenta);
}
.product-sale-countdown {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 6px 12px;
    background: rgba(233, 69, 96, 0.08);
    border: 1px solid var(--color-magenta);
    color: var(--color-magenta);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
}
.product-sale-countdown strong {
    font-family: var(--font-mono);
    font-weight: 600;
}

/* === QUICK-ADD button sobre la card (hover desktop, siempre mobile) === */
.card-product { position: relative; }
.card-product__quick-add {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--color-amber);
    color: #ffffff;
    border: 0;
    border-radius: 2px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    z-index: 4;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--dur-fast) var(--ease-editorial),
                transform var(--dur-fast) var(--ease-editorial),
                background-color var(--dur-fast) ease;
    pointer-events: none;
}
@media (hover: hover) {
    .card-product:hover .card-product__quick-add,
    .card-product:focus-within .card-product__quick-add {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
}
/* En móvil/touch siempre visible pero más discreto */
@media (hover: none) {
    .card-product__quick-add {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        background: var(--color-amber);
        font-size: 0.72rem;
        padding: 8px 10px;
    }
}
.card-product__quick-add:hover { background: var(--color-amber-light); }
.card-product__quick-add.is-adding { opacity: 0.7; pointer-events: none; }
.card-product__quick-add.is-added {
    background: var(--color-success);
    color: var(--color-bg);
}
.card-product__quick-add.is-added svg { display: none; }

/* === CARD: botón Quick-view (icono ojo, contraparte del fav) =========== */
.card-product__quickview {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 10, 10, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(245, 241, 232, 0.18);
    border-radius: 50%;
    color: #f5f1e8;
    cursor: pointer;
    padding: 0;
    opacity: 0;
    transition: opacity var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
@media (hover: hover) {
    .card-product:hover .card-product__quickview { opacity: 1; }
}
@media (hover: none) {
    .card-product__quickview { opacity: 0.85; }
}
.card-product__quickview:hover { color: var(--color-gold); border-color: var(--color-gold); }

/* === QUICK-VIEW MODAL ================================================== */
.qv-overlay {
    position: fixed; inset: 0;
    background: rgba(10, 10, 10, 0.78);
    backdrop-filter: blur(6px);
    z-index: 300;
    animation: qvFade 180ms var(--ease-editorial);
}
.qv-modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 310;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    max-width: 860px;
    width: min(92vw, 860px);
    max-height: 88vh;
    overflow-y: auto;
    animation: qvIn 240ms var(--ease-editorial);
}
@keyframes qvFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes qvIn { from { opacity: 0; transform: translate(-50%, -48%); } to { opacity: 1; transform: translate(-50%, -50%); } }
.qv-close {
    position: absolute;
    top: 14px; right: 14px;
    width: 36px; height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: var(--color-text-muted);
    font-size: 1.4rem;
    cursor: pointer;
    z-index: 2;
    line-height: 1;
}
.qv-close:hover { color: var(--color-gold); }
.qv-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}
@media (min-width: 720px) {
    .qv-content { grid-template-columns: 1fr 1fr; }
}
.qv-media {
    background: var(--color-bg);
    aspect-ratio: 1 / 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.qv-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qv-body { padding: clamp(20px, 4vw, 32px); display: flex; flex-direction: column; gap: 12px; }
.qv-brand {
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin: 0;
}
.qv-title { font-family: var(--font-display); font-size: clamp(1.25rem, 2.5vw, 1.6rem); margin: 0; line-height: 1.2; font-weight: 600; letter-spacing: -0.015em; }
.qv-desc { font-size: 0.92rem; color: var(--color-text-muted); line-height: 1.65; margin: 0; }
.qv-price { font-family: var(--font-display); font-size: 1.4rem; color: var(--color-gold); font-weight: 500; margin: 8px 0 4px; }
.qv-variants {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 8px;
}
.qv-variant {
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text);
    font-size: 0.82rem;
    cursor: pointer;
    transition: all var(--dur-fast) ease;
}
.qv-variant:hover { border-color: var(--color-gold); }
.qv-variant.is-selected { border-color: var(--color-gold); color: var(--color-gold); background: rgba(226, 190, 101, 0.08); }
.qv-variant .qv-variant__price { display: block; font-size: 0.72rem; color: var(--color-text-muted); margin-top: 2px; font-feature-settings: "tnum"; }
.qv-variant.is-selected .qv-variant__price { color: var(--color-gold); }
.qv-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 16px; }
.qv-actions .btn { flex: 1; min-width: 140px; }
body.qv-open { overflow: hidden; }

/* Badge "Nuevo" — verde, indica producto publicado en últimos 30 días */
.card-product__badge--new {
    background: var(--color-success);
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.08em;
}

/* === IMAGEN ZOOM FULLSCREEN (ficha producto, tap/click) ================ */
body.img-zoom-open { overflow: hidden; }
.img-zoom-overlay {
    position: fixed; inset: 0;
    z-index: 400;
    background: rgba(5, 5, 5, 0.97);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: qvFade 180ms var(--ease-editorial);
}
.img-zoom-overlay__img {
    max-width: 96vw;
    max-height: 92vh;
    object-fit: contain;
    transform-origin: center center;
    transition: transform 120ms ease;
    touch-action: none;
    user-select: none;
    -webkit-user-drag: none;
}
.img-zoom-overlay__close {
    position: fixed;
    top: 18px; right: 18px;
    width: 42px; height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 10, 10, 0.7);
    border: 1px solid rgba(245, 241, 232, 0.3);
    color: #f5f1e8;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    padding: 0;
}
.img-zoom-overlay__close:hover { border-color: var(--color-gold); color: var(--color-gold); }

/* === POPUP PRIMER PEDIDO 10% ============================================ */
.first-pop[hidden] { display: none; }
.first-pop {
    position: fixed; inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 240ms var(--ease-editorial);
}
.first-pop.is-in { opacity: 1; }
.first-pop__overlay {
    position: absolute; inset: 0;
    background: rgba(5, 5, 5, 0.88);
    backdrop-filter: blur(6px);
}
.first-pop__card {
    position: relative;
    max-width: 460px;
    width: 100%;
    background: linear-gradient(180deg, #1a2f24 0%, var(--color-bg-ink) 100%);
    border: 1px solid var(--color-gold-dark);
    padding: clamp(24px, 5vw, 40px);
    transform: translateY(12px);
    transition: transform 280ms var(--ease-editorial);
}
.first-pop.is-in .first-pop__card { transform: translateY(0); }
.first-pop__close {
    position: absolute;
    top: 10px; right: 10px;
    width: 34px; height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: var(--color-text-muted);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}
.first-pop__close:hover { color: var(--color-gold); }
.first-pop__eyebrow {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--color-gold);
    margin-bottom: 10px;
}
.first-pop__title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text);
    margin: 0 0 14px;
    line-height: 1.05;
}
.first-pop__lead {
    color: var(--color-text-muted);
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0 0 18px;
}
.first-pop__form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.first-pop__form .input {
    padding: 12px 14px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: 0.95rem;
}
.first-pop__form .input:focus { border-color: var(--color-gold); outline: none; }
.first-pop__msg { font-size: 0.78rem; min-height: 18px; margin: 4px 0 0; }
.first-pop__fine {
    font-size: 0.7rem;
    color: var(--color-text-dim);
    text-align: center;
    margin: 12px 0 0;
    line-height: 1.5;
}