/**
 * Hero con malla de partículas (v9.42.3) — ficha de producto, catálogo y
 * categorías. Sustituye al hero de esferas (v9.40.0), que se retiró.
 *
 * El dibujo lo hace assets/js/hero-particulas.js en un <canvas>; aquí viven
 * los TOKENS que ese script lee y el encuadre del título del catálogo.
 *
 * Colores: los del hero de inicio (starlink-animations.js). En oscuro, puntos
 * y líneas blancos con brillo rojo junto al cursor; en claro, todo rojo Fenix.
 * Van como «r, g, b» porque el script compone rgba() con su propia opacidad.
 */

/* ── Tokens (oscuro por defecto) ────────────────────────────────────── */

.fx-hero {
    --fx-hero-punto: 255, 255, 255;
    --fx-hero-linea: 255, 255, 255;
    --fx-hero-brillo: 227, 25, 55;
    --fx-hero-punto-alfa: .7;
    --fx-hero-linea-alfa: .12;
    --fx-hero-brillo-alfa: .05;
    --fx-hero-texto-sombra: 0 2px 28px rgba(0, 0, 0, .65);
    --fx-hero-pastilla: rgba(20, 20, 24, .55);
    --fx-hero-pastilla-borde: rgba(227, 25, 55, .45);
    --fx-hero-pastilla-texto: #ff5069;
}

@media (prefers-color-scheme: light) {
    .fx-hero {
        --fx-hero-punto: 200, 15, 45;
        --fx-hero-linea: 200, 15, 45;
        --fx-hero-brillo: 200, 15, 45;
        --fx-hero-punto-alfa: .55;
        --fx-hero-linea-alfa: .18;
        --fx-hero-brillo-alfa: .1;
        --fx-hero-texto-sombra: 0 1px 22px rgba(255, 255, 255, .85);
        --fx-hero-pastilla: rgba(255, 255, 255, .7);
        --fx-hero-pastilla-borde: rgba(200, 16, 46, .35);
        --fx-hero-pastilla-texto: #b30e28;
    }
}

[data-color-mode="dark"] .fx-hero {
    --fx-hero-punto: 255, 255, 255;
    --fx-hero-linea: 255, 255, 255;
    --fx-hero-brillo: 227, 25, 55;
    --fx-hero-punto-alfa: .7;
    --fx-hero-linea-alfa: .12;
    --fx-hero-brillo-alfa: .05;
    --fx-hero-texto-sombra: 0 2px 28px rgba(0, 0, 0, .65);
    --fx-hero-pastilla: rgba(20, 20, 24, .55);
    --fx-hero-pastilla-borde: rgba(227, 25, 55, .45);
    --fx-hero-pastilla-texto: #ff5069;
}

[data-color-mode="light"] .fx-hero {
    --fx-hero-punto: 200, 15, 45;
    --fx-hero-linea: 200, 15, 45;
    --fx-hero-brillo: 200, 15, 45;
    --fx-hero-punto-alfa: .55;
    --fx-hero-linea-alfa: .18;
    --fx-hero-brillo-alfa: .1;
    --fx-hero-texto-sombra: 0 1px 22px rgba(255, 255, 255, .85);
    --fx-hero-pastilla: rgba(255, 255, 255, .7);
    --fx-hero-pastilla-borde: rgba(200, 16, 46, .35);
    --fx-hero-pastilla-texto: #b30e28;
}

/* ── Encuadre ───────────────────────────────────────────────────────── */

.fx-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-bottom: 4.5rem;
}

/* En el catálogo el lienzo empieza debajo de la fila fija del navbar
   (--hada-bar-h): lo que tapa la barra no se ve ni se pinta. La ficha lo
   ajusta a su sección en ficha-vitrina.css. */
.fx-hero__lienzo {
    position: absolute;
    top: var(--hada-bar-h, 66px);
    left: 0;
    z-index: -1;
    display: block;
    width: 100%;
    height: calc(100% - var(--hada-bar-h, 66px));
    pointer-events: none;
    opacity: 0;
    transition: opacity .6s ease;
}

.fx-hero--listo .fx-hero__lienzo { opacity: 1; }

.fx-hero > .hik-container {
    position: relative;
    z-index: 1;
}

.fx-hero .hik-archive-header {
    max-width: 780px;
    padding-top: clamp(1rem, 4vh, 2.75rem);
}

.fx-hero .hik-archive-title {
    font-size: clamp(2.25rem, 1.35rem + 3.2vw, 3.9rem);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -.028em;
    text-shadow: var(--fx-hero-texto-sombra);
}

.fx-hero .hik-archive-subtitle {
    text-shadow: var(--fx-hero-texto-sombra);
}

/* La pastilla del conteo queda encima de la malla: vidrio esmerilado para
   que se lea pase lo que pase por detrás. */
.fx-hero .hik-archive-count-badge {
    border: 1px solid var(--fx-hero-pastilla-borde);
    background: var(--fx-hero-pastilla);
    color: var(--fx-hero-pastilla-texto);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.fx-hero .hik-scope-subcat {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

@media (max-width: 768px) {
    .fx-hero { padding-bottom: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
    .fx-hero__lienzo { transition: none; }
}