/**
 * CLP DARK PREMIUM — NYXIVO
 * Transforma la Category Landing Page al tema oscuro premium
 * idéntico al home (index-tech.php).
 *
 * Paleta base: #080d1a (home bg) · --cat-clr (accent dinámico por categoría)
 * Glassmorphism, gradientes, glow — igual que navbar-tech y moderno.css
 *
 * Carga DESPUÉS de todos los otros CSS de la CLP para máxima prioridad.
 */

/* ============================================================
   1. VARIABLES GLOBALES — redefine el sistema de colores al modo oscuro
   ============================================================ */
body.clp-theme {
    --clp-bg:           #080d1a;
    --clp-surface:      #0f172a;
    --clp-surface-2:    #1e293b;
    --clp-surface-3:    #0d1525;
    --clp-border:       rgba(255,255,255,0.07);
    --clp-border-soft:  rgba(255,255,255,0.04);
    --clp-border-input: rgba(255,255,255,0.14);
    --clp-text:         #f1f5f9;
    --clp-text-soft:    #94a3b8;
    --clp-text-mute:    #64748b;
    --clp-text-dim:     #475569;
    --clp-shadow-sm:    0 1px 3px rgba(0,0,0,0.5);
    --clp-shadow-md:    0 10px 30px rgba(0,0,0,0.55);
    --clp-shadow-lg:    0 24px 60px rgba(0,0,0,0.65);

    /* Tokens light → dark */
    --clp-ink-1:    #f1f5f9;
    --clp-ink-2:    #cbd5e1;
    --clp-ink-3:    #94a3b8;
    --clp-ink-4:    #64748b;
    --clp-line:     rgba(255,255,255,0.07);
    --clp-line-2:   rgba(255,255,255,0.04);
    --clp-bg-soft:  #0f172a;

    background: var(--clp-bg) !important;
    color: var(--clp-text) !important;

    /* Override --prem-negro y otras custom props light-mode */
    --prem-negro:   #e2e8f0;
    --prem-gris:    #94a3b8;
    --prem-gris-2:  #64748b;
    --tech-text-primary: #f1f5f9;
    --tech-text-light:   #cbd5e1;
}

/* ============================================================
   2. FONDO DE PÁGINA — copia exacta del gradiente de .cat-bento-card del home
   Fórmula idéntica: base navy 145deg + tinte diagonal 135deg + halos radiales
   ============================================================ */

/* Body entero: azul polar limpio */
body.clp-theme {
    background: linear-gradient(160deg, #f0f4ff 0%, #f8faff 40%, #f5f7ff 100%) !important;
    background-attachment: fixed !important;
    color: #0f172a !important;
}

/* .clp-main hereda — sin re-declarar background para no anular el body */
body.clp-theme .clp-main {
    background: transparent !important;
}

/* ============================================================
   3. WAVE — eliminar ola blanca, hacer coincidir con fondo oscuro
   ============================================================ */
.clp-hero-wave {
    background: none !important;
    height: 0 !important;
    margin: 0 !important;
    display: none !important;
}

/* ============================================================
   4. HERO — refuerzo de color de categoría en el fondo del hero
   ============================================================ */
body.clp-theme .clp-hero {
    position: relative !important;
    padding-top: calc(var(--sticky-offset, 64px) + 1.5rem) !important;
    background:
        radial-gradient(ellipse 120% 80% at 60% 50%,
            color-mix(in srgb, var(--cat-clr, #3b82f6) 22%, transparent) 0%,
            transparent 70%),
        radial-gradient(ellipse 80% 100% at 0% 50%,
            color-mix(in srgb, var(--cat-clr, #3b82f6) 12%, #080d1a) 0%,
            #080d1a 100%) !important;
}

/* Borde inferior del hero con acento de categoría */
body.clp-theme .clp-hero::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 1px !important;
    background: linear-gradient(90deg,
        transparent 0%,
        color-mix(in srgb, var(--cat-clr, #3b82f6) 50%, transparent) 50%,
        transparent 100%) !important;
}

/* ============================================================
   5. SORTBAR — dark glassmorphism igual que el navbar
   ============================================================ */
body.clp-theme .clp-sortbar,
body.clp-theme .clp-sortbar.is-stuck {
    background: rgba(8, 13, 26, 0.75) !important;
    backdrop-filter: blur(20px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    box-shadow: 0 4px 24px -8px rgba(0,0,0,0.5) !important;
    padding-top: 0.9rem !important;
    padding-bottom: 0.5rem !important;
    position: static !important;
    top: unset !important;
    z-index: auto !important;
}

/* ============================================================
   6. FILTER TOGGLE BUTTON — dark
   ============================================================ */
body.clp-theme .clp-filter-toggle {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: #f1f5f9 !important;
    box-shadow: none !important;
}
body.clp-theme .clp-filter-toggle:hover {
    background: rgba(255,255,255,0.12) !important;
    border-color: var(--cat-clr, #3b82f6) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--cat-clr, #3b82f6) 40%, transparent) !important;
}
body.clp-theme .clp-filter-toggle i,
body.clp-theme .clp-filter-toggle i.fa-sliders {
    color: var(--cat-clr, #3b82f6) !important;
}

/* ============================================================
   7. SEARCH INPUT — dark
   (selector doble para ganar a .clp-search--enhanced .clp-search-input
   de clp-toolbar-premium-v2.css)
   ============================================================ */
body.clp-theme .clp-search-input,
body.clp-theme .clp-search--enhanced .clp-search-input {
    background: rgba(255,255,255,0.06) !important;
    border: 1.5px solid rgba(255,255,255,0.12) !important;
    color: #f1f5f9 !important;
    box-shadow: none !important;
}
body.clp-theme .clp-search-input::placeholder,
body.clp-theme .clp-search--enhanced .clp-search-input::placeholder {
    color: rgba(241,245,249,0.4) !important;
}
body.clp-theme .clp-search-input:hover,
body.clp-theme .clp-search--enhanced .clp-search-input:hover {
    background: rgba(255,255,255,0.09) !important;
    transform: none !important;
    box-shadow: none !important;
}
body.clp-theme .clp-search-input:focus,
body.clp-theme .clp-search--enhanced .clp-search-input:focus,
body.clp-theme .clp-search-input:not(:placeholder-shown),
body.clp-theme .clp-search--enhanced .clp-search-input:not(:placeholder-shown) {
    background: rgba(255,255,255,0.08) !important;
    border-color: var(--cat-clr, #3b82f6) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cat-clr, #3b82f6) 20%, transparent) !important;
}
body.clp-theme .clp-search-ic {
    color: rgba(241,245,249,0.5) !important;
}
body.clp-theme .clp-search-kbd {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.14) !important;
    color: rgba(241,245,249,0.5) !important;
    box-shadow: none !important;
}
body.clp-theme .clp-search-clear {
    background: rgba(255,255,255,0.1) !important;
    color: rgba(241,245,249,0.6) !important;
}

/* ============================================================
   8. SELECT DE ORDEN — dark
   ============================================================ */
body.clp-theme .clp-select,
body.clp-theme .clp-select-wrap .clp-select {
    background: rgba(255,255,255,0.06) !important;
    border: 1.5px solid rgba(255,255,255,0.12) !important;
    color: #f1f5f9 !important;
    box-shadow: none !important;
}
body.clp-theme .clp-select option {
    background: #0f172a !important;
    color: #f1f5f9 !important;
}
body.clp-theme .clp-select:hover,
body.clp-theme .clp-select:focus {
    border-color: var(--cat-clr, #3b82f6) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cat-clr, #3b82f6) 18%, transparent) !important;
}
body.clp-theme .clp-select-caret {
    color: rgba(241,245,249,0.4) !important;
}

/* ============================================================
   9. RESULTS COUNT — dark
   ============================================================ */
body.clp-theme .clp-results-count {
    color: rgba(241,245,249,0.6) !important;
}
body.clp-theme .clp-results-count strong {
    color: #f1f5f9 !important;
}
body.clp-theme .clp-sort-label {
    color: rgba(241,245,249,0.5) !important;
}

/* ============================================================
   10. ACTIVE CHIPS — dark
   ============================================================ */
body.clp-theme .clp-activechips-title {
    color: rgba(241,245,249,0.5) !important;
}
body.clp-theme .clp-activechip {
    background: color-mix(in srgb, var(--cat-clr, #3b82f6) 10%, rgba(255,255,255,0.04)) !important;
    border: 1px solid color-mix(in srgb, var(--cat-clr, #3b82f6) 30%, rgba(255,255,255,0.08)) !important;
    color: #e2e8f0 !important;
}
body.clp-theme .clp-activechip:hover {
    background: color-mix(in srgb, var(--cat-clr, #3b82f6) 20%, rgba(255,255,255,0.06)) !important;
    border-color: var(--cat-clr, #3b82f6) !important;
}
body.clp-theme .clp-activechip i {
    color: rgba(241,245,249,0.5) !important;
}
body.clp-theme .clp-activechip-clear,
body.clp-theme .clp-share-filters {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: rgba(241,245,249,0.5) !important;
}
body.clp-theme .clp-activechip-clear:hover,
body.clp-theme .clp-share-filters:hover {
    color: #ef4444 !important;
    border-color: rgba(239,68,68,0.35) !important;
}

/* ============================================================
   11. PRESET PILLS — dark
   ============================================================ */
body.clp-theme .clp-preset {
    background: rgba(255,255,255,0.05) !important;
    border: 1.5px solid rgba(255,255,255,0.09) !important;
    color: rgba(241,245,249,0.65) !important;
}
body.clp-theme .clp-preset:hover {
    background: rgba(255,255,255,0.09) !important;
    border-color: var(--cat-clr, #3b82f6) !important;
    color: var(--cat-clr, #3b82f6) !important;
    transform: translateY(-1px) !important;
}
body.clp-theme .clp-preset[aria-pressed="true"] {
    background: var(--cat-clr, #3b82f6) !important;
    border-color: var(--cat-clr, #3b82f6) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--cat-clr, #3b82f6) 55%, transparent) !important;
}

/* ============================================================
   12. PRESETS ROW — dark
   ============================================================ */
body.clp-theme .clp-presets-row {
    background: transparent !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
}

/* ============================================================
   13. SUBCAT STRIP — dark
   ============================================================ */
body.clp-theme .clp-subcat-strip {
    background: rgba(8,13,26,0.80) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-top: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    box-shadow: none !important;
}
/* Fade de scroll: #ffffff → dark navy */
body.clp-theme .clp-subcat-strip .clp-container::after,
.clp-subcat-strip .clp-container::after {
    background: linear-gradient(to right, transparent 0%, #080d1a 85%) !important;
}
body.clp-theme .clp-subcat-pill {
    background: rgba(255,255,255,0.05) !important;
    border: 1.5px solid rgba(255,255,255,0.09) !important;
    color: rgba(241,245,249,0.65) !important;
}
body.clp-theme .clp-subcat-pill:hover {
    background: rgba(255,255,255,0.09) !important;
    border-color: var(--cat-clr, #3b82f6) !important;
    color: var(--cat-clr, #3b82f6) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--cat-clr, #3b82f6) 40%, transparent) !important;
}
body.clp-theme .clp-subcat-pill.active {
    background: var(--cat-clr, #3b82f6) !important;
    border-color: var(--cat-clr, #3b82f6) !important;
    color: #fff !important;
    box-shadow: 0 6px 18px -4px color-mix(in srgb, var(--cat-clr, #3b82f6) 55%, transparent) !important;
}
body.clp-theme .clp-subcat-count {
    background: rgba(255,255,255,0.1) !important;
    color: rgba(241,245,249,0.55) !important;
}
body.clp-theme .clp-subcat-pill.active .clp-subcat-count {
    background: rgba(255,255,255,0.25) !important;
    color: #fff !important;
}

/* ============================================================
   14. LAYOUT — fondo oscuro con glow de categoría
   ============================================================ */
body.clp-theme .clp-layout {
    background: transparent !important;
    padding: 2rem 0 5rem !important;
}
body.clp-theme .clp-layout-inner {
    grid-template-columns: 296px 1fr !important;
    gap: 2rem !important;
}

/* ============================================================
   15. SIDEBAR — dark navy glassmorphism premium
   ============================================================ */
@media (min-width: 1024px) {
    body.clp-theme .clp-sidebar,
    body.clp-theme .clp-filters {
        background: linear-gradient(
            180deg,
            color-mix(in srgb, var(--cat-clr, #3b82f6) 8%, #0d1525) 0%,
            #0d1525 40%,
            #0b1220 100%
        ) !important;
        border: 1px solid color-mix(in srgb, var(--cat-clr, #3b82f6) 18%, rgba(255,255,255,0.06)) !important;
        border-radius: 20px !important;
        box-shadow:
            0 0 0 1px rgba(255,255,255,0.03),
            0 8px 32px -8px rgba(0,0,0,0.6),
            0 0 60px -20px color-mix(in srgb, var(--cat-clr, #3b82f6) 15%, transparent) !important;
    }
}

/* Sidebar header */
body.clp-theme .clp-sidebar .clp-sheet-head,
body.clp-theme .clp-sheet-head {
    background: color-mix(in srgb, var(--cat-clr, #3b82f6) 12%, rgba(255,255,255,0.04)) !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}
body.clp-theme .clp-sheet-title {
    color: #f1f5f9 !important;
}
body.clp-theme .clp-sheet-title i {
    color: var(--cat-clr, #3b82f6) !important;
    filter: drop-shadow(0 0 6px var(--cat-clr, #3b82f6)) !important;
}

/* Filter groups */
body.clp-theme .clp-filter-group {
    border-top: 1px solid rgba(255,255,255,0.06) !important;
}
body.clp-theme .clp-filter-legend {
    color: rgba(241,245,249,0.45) !important;
}
body.clp-theme .clp-filter-legend::before {
    background: var(--cat-clr, #3b82f6) !important;
}

/* ============================================================
   16. SIDEBAR — CHECKBOXES dark
   ============================================================ */
body.clp-theme .clp-check:hover {
    background: rgba(255,255,255,0.05) !important;
}
body.clp-theme .clp-check-box {
    background: rgba(255,255,255,0.06) !important;
    border: 1.5px solid rgba(255,255,255,0.15) !important;
}
body.clp-theme .clp-check input:checked ~ .clp-check-box {
    background: var(--cat-clr, #3b82f6) !important;
    border-color: var(--cat-clr, #3b82f6) !important;
}
body.clp-theme .clp-check-label {
    color: #e2e8f0 !important;
}
body.clp-theme .clp-check-count {
    color: rgba(241,245,249,0.3) !important;
}

/* ============================================================
   17. SIDEBAR — RATING dark
   ============================================================ */
body.clp-theme .clp-rating:hover {
    background: rgba(255,255,255,0.05) !important;
}
body.clp-theme .clp-rating-stars i.empty {
    color: rgba(255,255,255,0.12) !important;
}
body.clp-theme .clp-rating-stars em {
    color: rgba(241,245,249,0.5) !important;
}

/* ============================================================
   18. SIDEBAR — RANGE SLIDER dark
   ============================================================ */
body.clp-theme .clp-price-values strong {
    color: #f1f5f9 !important;
    font-family: 'Space Grotesk', system-ui, sans-serif !important;
}
body.clp-theme .clp-price-values {
    color: rgba(241,245,249,0.45) !important;
}
body.clp-theme .clp-price-sep {
    color: rgba(241,245,249,0.2) !important;
}
body.clp-theme .clp-price-track {
    background: rgba(255,255,255,0.1) !important;
}
body.clp-theme .clp-price-fill {
    background: linear-gradient(90deg,
        var(--cat-clr, #3b82f6) 0%,
        color-mix(in srgb, var(--cat-clr, #3b82f6) 70%, #fff) 100%
    ) !important;
    box-shadow: 0 0 8px color-mix(in srgb, var(--cat-clr, #3b82f6) 50%, transparent) !important;
}
body.clp-theme .clp-hist-bar {
    background: color-mix(in srgb, var(--cat-clr, #3b82f6) 22%, rgba(255,255,255,0.05)) !important;
}
body.clp-theme .clp-hist-bar:hover {
    background: var(--cat-clr, #3b82f6) !important;
}
body.clp-theme .clp-price-inputs input {
    background: rgba(255,255,255,0.06) !important;
    border: 1.5px solid rgba(255,255,255,0.12) !important;
    color: #f1f5f9 !important;
    font-family: 'Space Grotesk', system-ui, sans-serif !important;
}
body.clp-theme .clp-price-inputs input:focus {
    background: rgba(255,255,255,0.08) !important;
    border-color: var(--cat-clr, #3b82f6) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cat-clr, #3b82f6) 18%, transparent) !important;
}
body.clp-theme .clp-price-inputs label > span {
    color: rgba(241,245,249,0.4) !important;
}
body.clp-theme .clp-price-sliders input[type="range"]::-webkit-slider-thumb {
    background: #0f172a !important;
    border: 2px solid var(--cat-clr, #3b82f6) !important;
}

/* ============================================================
   19. SIDEBAR — STORAGE CHIPS dark
   ============================================================ */
body.clp-theme .clp-storage-chip {
    background: rgba(255,255,255,0.05) !important;
    border: 1.5px solid rgba(255,255,255,0.09) !important;
    color: rgba(241,245,249,0.65) !important;
}
body.clp-theme .clp-storage-chip:hover {
    background: rgba(255,255,255,0.09) !important;
    border-color: var(--cat-clr, #3b82f6) !important;
    color: var(--cat-clr, #3b82f6) !important;
}
body.clp-theme .clp-storage-chip.is-active {
    background: var(--cat-clr, #3b82f6) !important;
    border-color: var(--cat-clr, #3b82f6) !important;
    color: #fff !important;
}

/* ============================================================
   20. SIDEBAR — COLOR SWATCHES dark
   ============================================================ */
body.clp-theme .clp-color-swatch:hover {
    background: rgba(255,255,255,0.06) !important;
}
body.clp-theme .clp-color-swatch__name {
    color: rgba(241,245,249,0.55) !important;
}
body.clp-theme .clp-color-swatch__circle {
    border: 2px solid rgba(255,255,255,0.15) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 2px 6px -2px rgba(0,0,0,0.4) !important;
}

/* ============================================================
   21. TOPSTRIP — dark cards
   ============================================================ */
body.clp-theme .clp-topstrip-head,
body.clp-theme .clp-topstrip-title {
    color: #f1f5f9 !important;
}
body.clp-theme .clp-topstrip-hint {
    color: rgba(241,245,249,0.4) !important;
}
body.clp-theme .clp-topstrip-title i {
    color: var(--cat-clr, #3b82f6) !important;
}
body.clp-theme .clp-topstrip-card {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--cat-clr, #3b82f6) 5%, #1a2235) 0%,
        #111827 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    box-shadow:
        0 1px 3px rgba(0,0,0,0.4),
        0 4px 14px -6px rgba(0,0,0,0.5) !important;
}
body.clp-theme .clp-topstrip-card:hover {
    transform: translateY(-4px) !important;
    border-color: color-mix(in srgb, var(--cat-clr, #3b82f6) 35%, rgba(255,255,255,0.07)) !important;
    box-shadow:
        0 16px 40px -10px color-mix(in srgb, var(--cat-clr, #3b82f6) 30%, rgba(0,0,0,0.4)),
        0 0 0 1px color-mix(in srgb, var(--cat-clr, #3b82f6) 20%, transparent) !important;
}
body.clp-theme .clp-topstrip-img {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--cat-clr, #3b82f6) 8%, #0f172a) 0%,
        #1e293b 100%
    ) !important;
}
body.clp-theme .clp-topstrip-card:hover .clp-topstrip-img {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--cat-clr, #3b82f6) 14%, #0f172a) 0%,
        #263347 100%
    ) !important;
}
body.clp-theme .clp-topstrip-img img {
    filter: drop-shadow(0 4px 16px rgba(0,0,0,0.5)) !important;
}
body.clp-theme .clp-topstrip-brand {
    color: var(--cat-clr, #3b82f6) !important;
}
body.clp-theme .clp-topstrip-name {
    color: #e2e8f0 !important;
}
body.clp-theme .clp-topstrip-name a {
    color: inherit !important;
}
body.clp-theme .clp-topstrip-name a:hover {
    color: var(--cat-clr, #3b82f6) !important;
}
body.clp-theme .clp-topstrip-price {
    color: #f1f5f9 !important;
}
body.clp-theme .clp-topstrip-cta {
    background: linear-gradient(135deg,
        var(--cat-clr, #3b82f6) 0%,
        color-mix(in srgb, var(--cat-clr, #3b82f6) 75%, #818cf8) 100%
    ) !important;
    border: 1px solid color-mix(in srgb, var(--cat-clr, #3b82f6) 60%, #fff) !important;
    color: #fff !important;
    box-shadow:
        0 4px 16px -4px color-mix(in srgb, var(--cat-clr, #3b82f6) 55%, transparent),
        inset 0 1px 0 rgba(255,255,255,0.22) !important;
    transition: all 0.25s ease !important;
}
body.clp-theme .clp-topstrip-cta:hover {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--cat-clr, #3b82f6) 85%, #fff) 0%,
        color-mix(in srgb, var(--cat-clr, #3b82f6) 80%, #818cf8) 100%
    ) !important;
    box-shadow:
        0 8px 28px -4px color-mix(in srgb, var(--cat-clr, #3b82f6) 70%, transparent),
        0 0 20px color-mix(in srgb, var(--cat-clr, #3b82f6) 35%, transparent),
        inset 0 1px 0 rgba(255,255,255,0.35) !important;
    transform: translateY(-2px) !important;
}

/* ============================================================
   22. FAMILIES / CATÁLOGO POR MODELO — dark
   ============================================================ */

/* Section header */
body.clp-theme .clp-families-title {
    color: #f1f5f9 !important;
}
body.clp-theme .clp-families-sub {
    color: rgba(241,245,249,0.5) !important;
}
body.clp-theme .clp-families-eyebrow {
    color: var(--cat-clr, #3b82f6) !important;
}
body.clp-theme .clp-grid-sep {
    color: rgba(241,245,249,0.35) !important;
}
body.clp-theme .clp-grid-sep span {
    color: rgba(241,245,249,0.35) !important;
}
body.clp-theme .clp-grid-sep::before,
body.clp-theme .clp-grid-sep::after {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,0.1) 50%,
        transparent 100%
    ) !important;
}

/* ── .fam-card — misma fórmula que cat-bento-card + product-card-tech ── */
body.clp-theme .fam-card {
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--cat-clr, #3b82f6) 18%, transparent) 0%,
            transparent 55%),
        radial-gradient(ellipse 55% 60% at 10% 85%,
            color-mix(in srgb, var(--cat-clr, #3b82f6) 28%, transparent) 0%,
            transparent 65%),
        radial-gradient(ellipse 45% 40% at 12% 10%,
            color-mix(in srgb, var(--cat-clr, #3b82f6) 18%, transparent) 0%,
            transparent 70%),
        linear-gradient(145deg,
            #0f1d35 0%, #0b1526 35%, #090f1e 65%, #060b17 100%) !important;
    border: 1px solid color-mix(in srgb, var(--cat-clr, #3b82f6) 28%, rgba(255,255,255,0.08)) !important;
    box-shadow:
        0 8px 32px rgba(0,0,0,0.45),
        0 2px 8px rgba(0,0,0,0.30),
        0 0 0 1px color-mix(in srgb, var(--cat-clr, #3b82f6) 12%, transparent),
        inset 0 1px 0 rgba(255,255,255,0.08) !important;
    color: #f1f5f9 !important;
    transition: border-color 0.3s ease, box-shadow 0.4s ease, background 0.4s ease,
                transform 0.4s cubic-bezier(0.22,1.2,0.36,1) !important;
}
body.clp-theme .fam-card:hover {
    border-color: color-mix(in srgb, var(--cat-clr, #3b82f6) 80%, transparent) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 40%),
        linear-gradient(135deg,
            color-mix(in srgb, var(--cat-clr, #3b82f6) 38%, transparent) 0%,
            transparent 65%),
        radial-gradient(ellipse 90% 90% at 50% 50%,
            color-mix(in srgb, var(--cat-clr, #3b82f6) 22%, transparent) 0%,
            transparent 70%),
        radial-gradient(ellipse 70% 70% at 50% 100%,
            color-mix(in srgb, var(--cat-clr, #3b82f6) 45%, transparent) 0%,
            transparent 65%),
        linear-gradient(145deg,
            #1a2f50 0%, #142338 35%, #0f1b2d 65%, #0b1525 100%) !important;
    box-shadow:
        0 28px 56px rgba(0,0,0,0.45),
        0 10px 24px rgba(0,0,0,0.30),
        0 0 100px color-mix(in srgb, var(--cat-clr, #3b82f6) 50%, transparent),
        0 0 50px color-mix(in srgb, var(--cat-clr, #3b82f6) 35%, transparent),
        0 0 0 2px color-mix(in srgb, var(--cat-clr, #3b82f6) 80%, transparent),
        inset 0 0 50px color-mix(in srgb, var(--cat-clr, #3b82f6) 14%, transparent),
        inset 0 1px 0 rgba(255,255,255,0.22) !important;
    transform: translateY(-5px) !important;
}

/* Image wrapper — dark + transición */
body.clp-theme .fam-card .product-image-wrapper {
    position: relative !important;
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--cat-clr, #3b82f6) 12%, #0f1d35) 0%,
        #0b1526 100%
    ) !important;
    transition: background 0.4s ease, box-shadow 0.4s ease !important;
}
/* Overlay glow sobre imagen en hover */
body.clp-theme .fam-card .product-image-wrapper::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: radial-gradient(ellipse 85% 85% at 50% 50%,
        color-mix(in srgb, var(--cat-clr, #3b82f6) 0%, transparent) 0%,
        transparent 70%) !important;
    pointer-events: none !important;
    transition: opacity 0.4s ease, background 0.4s ease !important;
    opacity: 0 !important;
    z-index: 1 !important;
    mix-blend-mode: screen !important;
    border-radius: inherit !important;
}
body.clp-theme .fam-card:hover .product-image-wrapper::after {
    background: radial-gradient(ellipse 85% 85% at 50% 50%,
        color-mix(in srgb, var(--cat-clr, #3b82f6) 28%, transparent) 0%,
        transparent 70%) !important;
    opacity: 1 !important;
}
body.clp-theme .fam-card:hover .product-image-wrapper {
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--cat-clr, #3b82f6) 25%, #0f1d35) 0%,
        color-mix(in srgb, var(--cat-clr, #3b82f6) 12%, #0b1526) 100%
    ) !important;
    box-shadow: inset 0 0 30px color-mix(in srgb, var(--cat-clr, #3b82f6) 20%, transparent) !important;
}

/* Badge counter (+3 modelos) */
body.clp-theme .fam-card .fam-card__badge {
    background: color-mix(in srgb, var(--cat-clr, #3b82f6) 18%, rgba(8,13,26,0.80)) !important;
    border: 1px solid color-mix(in srgb, var(--cat-clr, #3b82f6) 35%, rgba(255,255,255,0.1)) !important;
    color: color-mix(in srgb, var(--cat-clr, #3b82f6) 85%, #fff) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

/* Brand */
body.clp-theme .fam-card .product-brand {
    color: var(--cat-clr, #3b82f6) !important;
    font-family: 'DM Sans', system-ui, sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

/* Product name / title — Urbanist */
body.clp-theme .fam-card .product-name,
body.clp-theme .fam-card .fam-card__name {
    font-family: 'Urbanist', 'DM Sans', system-ui, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #e2e8f0 !important;
    line-height: 1.35 !important;
}
body.clp-theme .fam-card .product-name a,
body.clp-theme .fam-card .fam-card__name a {
    color: #e2e8f0 !important;
}
body.clp-theme .fam-card .product-name a:hover,
body.clp-theme .fam-card .fam-card__name a:hover {
    color: var(--cat-clr, #3b82f6) !important;
}

/* Description — soft muted text */
body.clp-theme .fam-card .fam-card__desc {
    color: #94a3b8 !important;
    font-size: 12px !important;
    font-family: 'DM Sans', system-ui, sans-serif !important;
    line-height: 1.5 !important;
}

/* Color swatches */
body.clp-theme .fam-card .fam-card__swatch-more {
    color: rgba(241,245,249,0.4) !important;
    font-size: 10px !important;
}

/* Price block */
body.clp-theme .fam-card .fam-card__price-label {
    color: rgba(241,245,249,0.45) !important;
    font-size: 11px !important;
    font-family: 'DM Sans', system-ui, sans-serif !important;
}
body.clp-theme .fam-card .product-price-current {
    font-family: 'Space Grotesk', 'DM Sans', system-ui, sans-serif !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #f1f5f9 !important;
    letter-spacing: -0.02em !important;
}

/* Variant chips (storage/model chips) */
body.clp-theme .fam-card .fam-card__chip {
    background: rgba(255,255,255,0.07) !important;
    color: rgba(241,245,249,0.7) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    font-size: 10px !important;
    font-family: 'DM Sans', system-ui, sans-serif !important;
}
body.clp-theme .fam-card .fam-card__chip:hover {
    background: rgba(255,255,255,0.12) !important;
    border-color: var(--cat-clr, #3b82f6) !important;
    color: var(--cat-clr, #3b82f6) !important;
}
body.clp-theme .fam-card .fam-card__chip--more {
    color: rgba(241,245,249,0.4) !important;
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.06) !important;
}

/* CTA button — vibrante con acento de categoría */
body.clp-theme .fam-card .btn-add-cart,
body.clp-theme .fam-card .fam-card__cta {
    background: linear-gradient(135deg,
        var(--cat-clr, #3b82f6) 0%,
        color-mix(in srgb, var(--cat-clr, #3b82f6) 75%, #818cf8) 100%
    ) !important;
    color: #fff !important;
    border: 1px solid color-mix(in srgb, var(--cat-clr, #3b82f6) 60%, #fff) !important;
    font-family: 'DM Sans', system-ui, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    transition: all 0.25s ease !important;
    box-shadow:
        0 4px 16px -4px color-mix(in srgb, var(--cat-clr, #3b82f6) 60%, transparent),
        inset 0 1px 0 rgba(255,255,255,0.25) !important;
}
body.clp-theme .fam-card .btn-add-cart:hover,
body.clp-theme .fam-card .fam-card__cta:hover {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--cat-clr, #3b82f6) 85%, #fff) 0%,
        color-mix(in srgb, var(--cat-clr, #3b82f6) 80%, #818cf8) 100%
    ) !important;
    border-color: color-mix(in srgb, var(--cat-clr, #3b82f6) 80%, #fff) !important;
    box-shadow:
        0 8px 28px -4px color-mix(in srgb, var(--cat-clr, #3b82f6) 70%, transparent),
        0 0 20px color-mix(in srgb, var(--cat-clr, #3b82f6) 40%, transparent),
        inset 0 1px 0 rgba(255,255,255,0.35) !important;
    transform: translateY(-2px) !important;
}
body.clp-theme .fam-card .fam-card__cta-arrow {
    color: rgba(255,255,255,0.75) !important;
}

/* ============================================================
   23. PRODUCT CARDS — dark glassmorphism (selectores exactos del HTML real)
   ============================================================ */

/* — Card base — misma fórmula que cat-bento-card del home — */
body.clp-theme .product-card-tech,
body.clp-theme .clp-card.product-card-tech {
    background:
        /* Tinte diagonal de categoría — 18% igual que cat-bento-card */
        linear-gradient(135deg,
            color-mix(in srgb, var(--cat-clr, #3b82f6) 18%, transparent) 0%,
            transparent 55%),
        /* Halos radiales izquierdos — categoría visible donde está el texto */
        radial-gradient(ellipse 55% 60% at 10% 85%,
            color-mix(in srgb, var(--cat-clr, #3b82f6) 28%, transparent) 0%,
            transparent 65%),
        radial-gradient(ellipse 45% 40% at 12% 10%,
            color-mix(in srgb, var(--cat-clr, #3b82f6) 18%, transparent) 0%,
            transparent 70%),
        /* Base navy exacta del cat-bento-card */
        linear-gradient(145deg,
            #0f1d35 0%,
            #0b1526 35%,
            #090f1e 65%,
            #060b17 100%) !important;
    /* Borde con tinte de categoría — igual que cat-bento-card */
    border: 1px solid color-mix(in srgb, var(--cat-clr, #3b82f6) 28%, rgba(255,255,255,0.08)) !important;
    box-shadow:
        0 8px 32px rgba(0,0,0,0.45),
        0 2px 8px rgba(0,0,0,0.30),
        0 0 0 1px color-mix(in srgb, var(--cat-clr, #3b82f6) 12%, transparent),
        inset 0 1px 0 rgba(255,255,255,0.08) !important;
    color: #f1f5f9 !important;
    transition: border-color 0.3s ease, box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.22,1.2,0.36,1) !important;
}
body.clp-theme .product-card-tech:hover {
    border-color: color-mix(in srgb, var(--cat-clr, #3b82f6) 80%, transparent) !important;
    background:
        /* Shine superior */
        linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 40%),
        /* Tinte diagonal más fuerte */
        linear-gradient(135deg,
            color-mix(in srgb, var(--cat-clr, #3b82f6) 38%, transparent) 0%,
            transparent 65%),
        /* Halo central que cubre todo el fondo */
        radial-gradient(ellipse 90% 90% at 50% 50%,
            color-mix(in srgb, var(--cat-clr, #3b82f6) 22%, transparent) 0%,
            transparent 70%),
        radial-gradient(ellipse 70% 70% at 50% 100%,
            color-mix(in srgb, var(--cat-clr, #3b82f6) 45%, transparent) 0%,
            transparent 65%),
        radial-gradient(ellipse 60% 50% at 50% 0%,
            color-mix(in srgb, var(--cat-clr, #3b82f6) 30%, transparent) 0%,
            transparent 70%),
        /* Base navy más clara para notarse debajo de la imagen */
        linear-gradient(145deg,
            #1a2f50 0%,
            #142338 35%,
            #0f1b2d 65%,
            #0b1525 100%) !important;
    box-shadow:
        0 28px 56px rgba(0,0,0,0.45),
        0 10px 24px rgba(0,0,0,0.30),
        /* Glow externo grande — ilumina todo el contorno */
        0 0 100px color-mix(in srgb, var(--cat-clr, #3b82f6) 50%, transparent),
        0 0 50px color-mix(in srgb, var(--cat-clr, #3b82f6) 35%, transparent),
        /* Borde interior luminoso */
        0 0 0 2px color-mix(in srgb, var(--cat-clr, #3b82f6) 80%, transparent),
        /* Inset glow — tinta interior todo el card */
        inset 0 0 50px color-mix(in srgb, var(--cat-clr, #3b82f6) 14%, transparent),
        inset 0 1px 0 rgba(255,255,255,0.22) !important;
    transform: translateY(-5px) !important;
}

/* — Image wrapper: iluminación completa en hover — */
body.clp-theme .product-card-tech .product-image-wrapper {
    position: relative !important;
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--cat-clr, #3b82f6) 12%, #0f1d35) 0%,
        #0b1526 100%
    ) !important;
    transition: background 0.4s ease, box-shadow 0.4s ease !important;
}
/* Overlay de color sobre la imagen en hover — ilumina la zona de imagen */
body.clp-theme .product-card-tech .product-image-wrapper::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: radial-gradient(ellipse 85% 85% at 50% 50%,
        color-mix(in srgb, var(--cat-clr, #3b82f6) 0%, transparent) 0%,
        transparent 70%) !important;
    pointer-events: none !important;
    transition: opacity 0.4s ease, background 0.4s ease !important;
    opacity: 0 !important;
    z-index: 1 !important;
    mix-blend-mode: screen !important;
    border-radius: inherit !important;
}
body.clp-theme .product-card-tech:hover .product-image-wrapper::after {
    background: radial-gradient(ellipse 85% 85% at 50% 50%,
        color-mix(in srgb, var(--cat-clr, #3b82f6) 30%, transparent) 0%,
        transparent 70%) !important;
    opacity: 1 !important;
}
body.clp-theme .product-card-tech:hover .product-image-wrapper {
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--cat-clr, #3b82f6) 25%, #0f1d35) 0%,
        color-mix(in srgb, var(--cat-clr, #3b82f6) 12%, #0b1526) 100%
    ) !important;
    box-shadow: inset 0 0 30px color-mix(in srgb, var(--cat-clr, #3b82f6) 20%, transparent) !important;
}

/* — Compare toggle/box — dark glassmorphism — */
body.clp-theme .product-card-tech .clp-compare-toggle {
    background: rgba(15, 23, 42, 0.85) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    backdrop-filter: blur(8px) !important;
}
body.clp-theme .product-card-tech .clp-compare-box {
    background: rgba(30, 41, 59, 0.9) !important;
    border-color: rgba(255,255,255,0.15) !important;
}
body.clp-theme .product-card-tech .clp-compare-label {
    color: #94a3b8 !important;
    font-family: 'DM Sans', system-ui, sans-serif !important;
    font-size: 10px !important;
}

/* — Favorite button — dark — */
body.clp-theme .product-card-tech .product-favorite {
    background: rgba(15, 23, 42, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: #94a3b8 !important;
}
body.clp-theme .product-card-tech .product-favorite:hover {
    background: rgba(30, 41, 59, 0.95) !important;
    color: #f43f5e !important;
    border-color: rgba(244, 63, 94, 0.4) !important;
}

/* — Overlay buttons — dark glassmorphism — */
body.clp-theme .product-card-tech .product-overlay {
    background: linear-gradient(to top, rgba(8,13,26,0.85) 0%, transparent 100%) !important;
}
body.clp-theme .product-card-tech .overlay-btn {
    background: rgba(15, 23, 42, 0.88) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    color: #e2e8f0 !important;
}
body.clp-theme .product-card-tech .overlay-btn:hover {
    background: linear-gradient(135deg,
        var(--cat-clr, #3b82f6) 0%,
        color-mix(in srgb, var(--cat-clr, #3b82f6) 75%, #818cf8) 100%
    ) !important;
    border-color: var(--cat-clr, #3b82f6) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px -4px color-mix(in srgb, var(--cat-clr, #3b82f6) 60%, transparent) !important;
    transform: scale(1.1) !important;
}

/* ── TIPOGRAFÍA DE CARDS — igual al home (Urbanist títulos, Space Grotesk precios) ── */

/* Marca/Brand — acento de categoría */
body.clp-theme .product-card-tech .product-brand {
    color: var(--cat-clr, #3b82f6) !important;
    font-family: 'DM Sans', system-ui, sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

/* Nombre del producto — Urbanist como el home */
body.clp-theme .product-card-tech .product-name,
body.clp-theme .product-card-tech .product-name a,
body.clp-theme .clp-card .product-name a {
    font-family: 'Urbanist', 'DM Sans', system-ui, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.01em !important;
    color: #e2e8f0 !important;
}
body.clp-theme .product-card-tech .product-name a:hover,
body.clp-theme .clp-card .product-name a:hover {
    color: var(--cat-clr, #3b82f6) !important;
}

/* Descripción corta (si existe) */
body.clp-theme .product-card-tech .product-desc,
body.clp-theme .product-card-tech .product-description,
body.clp-theme .product-card-tech p {
    font-family: 'DM Sans', system-ui, sans-serif !important;
    color: #94a3b8 !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
}

/* Rating */
body.clp-theme .product-card-tech .product-rating,
body.clp-theme .product-card-tech .product-rating--empty {
    color: rgba(148, 163, 184, 0.7) !important;
    font-size: 11px !important;
}

/* Precio actual — Space Grotesk como el home */
body.clp-theme .product-card-tech .product-price-current,
body.clp-theme .clp-card .product-price-current {
    font-family: 'Space Grotesk', 'DM Sans', system-ui, sans-serif !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #f1f5f9 !important;
    letter-spacing: -0.02em !important;
}

/* Precio original (tachado) */
body.clp-theme .product-card-tech .product-price-original,
body.clp-theme .product-card-tech .product-price-old,
body.clp-theme .clp-card [class*="price-orig"],
body.clp-theme .clp-card [class*="price-old"] {
    color: rgba(148, 163, 184, 0.5) !important;
    font-family: 'DM Sans', system-ui, sans-serif !important;
    font-size: 12px !important;
}

/* Botón agregar al carrito — acento de categoría vibrante */
body.clp-theme .product-card-tech .btn-add-cart {
    background: linear-gradient(135deg,
        var(--cat-clr, #3b82f6) 0%,
        color-mix(in srgb, var(--cat-clr, #3b82f6) 75%, #818cf8) 100%
    ) !important;
    color: #fff !important;
    border: 1px solid color-mix(in srgb, var(--cat-clr, #3b82f6) 60%, #fff) !important;
    font-family: 'DM Sans', system-ui, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    transition: all 0.25s ease !important;
    box-shadow:
        0 4px 16px -4px color-mix(in srgb, var(--cat-clr, #3b82f6) 60%, transparent),
        inset 0 1px 0 rgba(255,255,255,0.25) !important;
}
body.clp-theme .product-card-tech .btn-add-cart:hover {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--cat-clr, #3b82f6) 85%, #fff) 0%,
        color-mix(in srgb, var(--cat-clr, #3b82f6) 80%, #818cf8) 100%
    ) !important;
    border-color: color-mix(in srgb, var(--cat-clr, #3b82f6) 80%, #fff) !important;
    box-shadow:
        0 8px 28px -4px color-mix(in srgb, var(--cat-clr, #3b82f6) 70%, transparent),
        0 0 20px color-mix(in srgb, var(--cat-clr, #3b82f6) 40%, transparent),
        inset 0 1px 0 rgba(255,255,255,0.35) !important;
    transform: translateY(-2px) !important;
}

/* ============================================================
   24. LOAD MORE BUTTON — dark
   ============================================================ */
body.clp-theme .clp-btn-loadmore {
    background: rgba(255,255,255,0.05) !important;
    border: 1.5px solid rgba(255,255,255,0.1) !important;
    color: #e2e8f0 !important;
    box-shadow: none !important;
}
body.clp-theme .clp-btn-loadmore:hover {
    background: rgba(255,255,255,0.09) !important;
    border-color: var(--cat-clr, #3b82f6) !important;
    color: var(--cat-clr, #3b82f6) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--cat-clr, #3b82f6) 35%, transparent) !important;
}

/* ============================================================
   25. PAGINACIÓN — dark
   ============================================================ */
body.clp-theme .clp-page-link {
    background: rgba(255,255,255,0.05) !important;
    border: 1.5px solid rgba(255,255,255,0.09) !important;
    color: rgba(241,245,249,0.6) !important;
}
body.clp-theme .clp-page-link:hover {
    background: rgba(255,255,255,0.09) !important;
    border-color: var(--cat-clr, #3b82f6) !important;
    color: var(--cat-clr, #3b82f6) !important;
    transform: translateY(-1px) !important;
}
body.clp-theme .clp-page-link.active,
body.clp-theme .clp-page-link[aria-current="page"] {
    background: var(--cat-clr, #3b82f6) !important;
    border-color: var(--cat-clr, #3b82f6) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--cat-clr, #3b82f6) 55%, transparent) !important;
}

/* ============================================================
   26. SCROLL PROGRESS BAR — accent de categoría
   ============================================================ */
body.clp-theme .scroll-progress,
#scrollProgress {
    background: linear-gradient(90deg,
        var(--cat-clr, #3b82f6) 0%,
        color-mix(in srgb, var(--cat-clr, #3b82f6) 60%, #6366f1) 100%
    ) !important;
}

/* ============================================================
   27. EMPTY STATE — dark
   ============================================================ */
body.clp-theme .clp-empty,
body.clp-theme .clp-no-results {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    color: rgba(241,245,249,0.6) !important;
    border-radius: 20px !important;
}
body.clp-theme .clp-empty h3,
body.clp-theme .clp-no-results h3 {
    color: #f1f5f9 !important;
}

/* ============================================================
   28. FOOTER en la CLP — dark override
   ============================================================ */
body.clp-theme footer {
    background: #060b16 !important;
    border-top: 1px solid rgba(255,255,255,0.07) !important;
}

/* ============================================================
   29. SCROLL REVEAL — mantener visibilidad en dark
   ============================================================ */
body.clp-theme .scroll-reveal-card {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

/* ============================================================
   30. BREADCRUMB TOP BAR — dark
   ============================================================ */
body.clp-theme .clp-btn-back {
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: #f1f5f9 !important;
}
body.clp-theme .clp-btn-back:hover {
    background: rgba(255,255,255,0.12) !important;
    border-color: rgba(255,255,255,0.25) !important;
}

/* ============================================================
   31. HERO — estado "hover" del cat-bento-card (más luminoso, tinte reforzado)
   Usa la misma fórmula de hover: brillo blanco + tinte 20% + navy claro
   ============================================================ */
body.clp-theme .clp-hero {
    background:
        /* Brillo blanco sutil (igual que hover del card) */
        linear-gradient(180deg,
            rgba(255,255,255,0.055) 0%,
            transparent 45%),
        /* Tinte de categoría más fuerte (igual que hover) */
        linear-gradient(135deg,
            color-mix(in srgb, var(--cat-clr, #3b82f6) 20%, transparent) 0%,
            transparent 55%),
        /* Halos radiales del card en hover */
        radial-gradient(ellipse 75% 65% at 80% 90%,
            color-mix(in srgb, var(--cat-clr, #3b82f6) 40%, transparent) 0%,
            transparent 65%),
        radial-gradient(ellipse 45% 45% at 15% 15%,
            color-mix(in srgb, var(--cat-clr, #3b82f6) 15%, transparent) 0%,
            transparent 70%),
        /* Base navy más clara (hover state del card) */
        linear-gradient(145deg,
            #1a2f50 0%,
            #142338 35%,
            #0f1b2d 65%,
            #0b1525 100%) !important;
}

/* Barra de acento superior — copia exacta del cat-bento-card::before */
body.clp-theme .clp-hero::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important; left: 5% !important; right: 5% !important;
    height: 1px !important;
    background: linear-gradient(90deg,
        transparent 0%,
        color-mix(in srgb, var(--cat-clr, #3b82f6) 60%, transparent) 30%,
        color-mix(in srgb, var(--cat-clr, #3b82f6) 90%, transparent) 50%,
        color-mix(in srgb, var(--cat-clr, #3b82f6) 60%, transparent) 70%,
        transparent 100%) !important;
    border-radius: 0 0 4px 4px !important;
    z-index: 2 !important;
}

/* ============================================================
   32. REDUCED MOTION — a11y
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    body.clp-theme .clp-hero-dot,
    body.clp-theme .clp-families-eyebrow::before {
        animation: none !important;
    }
    body.clp-theme .clp-topstrip-card:hover,
    body.clp-theme .fam-row:hover,
    body.clp-theme .product-card-tech:hover,
    body.clp-theme .clp-btn-loadmore:hover {
        transform: none !important;
    }
}