/**
 * Halloween season — soft / sexy-nocturno (cambio REAL, no tint).
 * Activado con html.season-halloween (ver season-theme.js).
 * Mood: noche de altar / linternas / vino-rosa — no horror, no calabazas stock.
 *
 * Señales fuertes (1er viewport):
 *  1) Fondo-hw-altar.webp (sustituye Fondo-v2)
 *  2) Brand seasonal (glow ember + underline wine→ember + halo)
 *  3) Featured stage con marco ornamental grueso + corners dedicados
 * + Marcos visibles en fichas catálogo / recomendados
 */

html.season-halloween {
    --hw-bg: #10060e;
    --hw-bg-elevated: #1a0c16;
    --hw-ink: #f8f1ef;
    --hw-ink-muted: rgba(236, 216, 220, 0.78);

    --hw-wine: #c43b5c;
    --hw-wine-soft: #e86a8a;
    --hw-wine-deep: #8a2440;
    --hw-wine-glow: rgba(196, 59, 92, 0.42);
    --hw-ember: #e8a24a;
    --hw-ember-hot: #f0c27a;
    --hw-ember-dim: rgba(232, 162, 74, 0.35);
    --hw-ember-soft: rgba(232, 162, 74, 0.55);
    --hw-mist: #6b4a7a;
    --hw-mist-glow: rgba(107, 74, 122, 0.28);

    --hw-frame: rgba(232, 162, 74, 0.72);
    --hw-frame-inner: rgba(232, 122, 150, 0.55);
    --hw-frame-glow: rgba(232, 162, 74, 0.28);

    --hw-aurora-top: rgba(196, 59, 92, 0.22);
    --hw-aurora-bottom: rgba(90, 40, 70, 0.28);
    --hw-vignette: rgba(4, 1, 8, 0.72);

    --hw-selection: rgba(232, 162, 74, 0.38);
    --hw-focus-ring: rgba(232, 162, 74, 0.6);

    background-color: var(--hw-bg);
    color: var(--hw-ink);
}

/* ══════════════════════════════════════════════
   1) FONDO NUEVO REAL — tapa Fondo-v2 por completo
   ══════════════════════════════════════════════ */
html.season-halloween::before {
    background-color: var(--hw-bg);
    background-image:
        /* velo wine superior */
        radial-gradient(
            130% 70% at 50% -12%,
            rgba(196, 59, 92, 0.32) 0%,
            transparent 58%
        ),
        /* bruma inferior tipo linternas */
        radial-gradient(
            110% 80% at 50% 118%,
            rgba(232, 162, 74, 0.16) 0%,
            transparent 52%
        ),
        /* viñeta de escena */
        radial-gradient(
            140% 120% at 50% 40%,
            rgba(8, 2, 12, 0) 42%,
            var(--hw-vignette) 100%
        ),
        /* tinte cálido global */
        linear-gradient(
            168deg,
            rgba(28, 6, 20, 0.55) 0%,
            rgba(12, 4, 14, 0.42) 45%,
            rgba(18, 8, 10, 0.5) 100%
        ),
        /* ASSET NUEVO — no Fondo-v2 */
        url("images/Fondo-hw-altar.webp");
    background-position:
        center top,
        center bottom,
        center center,
        center center,
        center center;
    background-size:
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        cover;
    background-repeat: no-repeat;
    /* Estático: sin breathe/filter — evita jank al scroll (capas fixed) */
    animation: none;
    filter: none;
    transform: none;
}

/* Móvil/tablet angosto: anclar Fondo-hw-altar.webp para centrar silueta chica.
   max-width 799px (no 720) — cubre iPad mini / ventanas ~768.
   5º layer = imagen; 40% 22% verificado en 390×844 (chica al centro, más arriba). */
@media (max-width: 799px) {
    html.season-halloween::before {
        background-position:
            center top,
            center bottom,
            center center,
            center center,
            40% 22% !important;
    }

    html.season-halloween.vip-site::before {
        background-position:
            center top,
            center center,
            center bottom,
            center center,
            40% 22% !important;
    }
}

/* Capa de linternas / orbes (atmósfera CSS — visibles ya en 1er viewport) */
html.season-halloween::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 1;
    mix-blend-mode: screen;
    background-image:
        radial-gradient(circle at 8% 22%, rgba(232, 162, 74, 0.28) 0%, transparent 6%),
        radial-gradient(circle at 92% 18%, rgba(232, 122, 150, 0.22) 0%, transparent 7%),
        radial-gradient(circle at 18% 48%, rgba(240, 194, 122, 0.18) 0%, transparent 5%),
        radial-gradient(circle at 78% 42%, rgba(196, 59, 92, 0.2) 0%, transparent 6%),
        radial-gradient(circle at 12% 78%, rgba(232, 162, 74, 0.32) 0%, transparent 9%),
        radial-gradient(circle at 88% 72%, rgba(232, 122, 150, 0.26) 0%, transparent 10%),
        radial-gradient(circle at 28% 88%, rgba(240, 194, 122, 0.2) 0%, transparent 8%),
        radial-gradient(circle at 70% 84%, rgba(196, 59, 92, 0.22) 0%, transparent 9%),
        radial-gradient(circle at 50% 6%, rgba(232, 122, 150, 0.16) 0%, transparent 22%),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
    background-size:
        auto, auto, auto, auto, auto, auto, auto, auto, auto,
        200px 200px;
    background-repeat:
        no-repeat, no-repeat, no-repeat, no-repeat, no-repeat,
        no-repeat, no-repeat, no-repeat, no-repeat, repeat;
    /* Estático: sin drift/translateY — evita bug de scroll en móvil */
    animation: none;
    transform: none;
    filter: none;
}

@keyframes hw-scene-breathe {
    0%, 100% { filter: brightness(1) saturate(1.05); }
    50% { filter: brightness(1.04) saturate(1.12); }
}

@keyframes hw-lantern-drift {
    0%, 100% { opacity: 0.88; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
    html.season-halloween::before,
    html.season-halloween::after,
    html.season-halloween .vip-plan-card-featured::after,
    html.season-halloween .page-grid--home .page-grid-featured-stage::before {
        animation: none !important;
    }
}

html.season-halloween body {
    color: var(--hw-ink);
}

html.season-halloween ::selection {
    background: var(--hw-selection);
    color: #fff;
}

/* ══════════════════════════════════════════════
   2) BRAND seasonal — señal clara en 1er viewport
   ══════════════════════════════════════════════ */
html.season-halloween .titulo {
    letter-spacing: 0.2em;
    text-shadow:
        0 0 12px rgba(232, 122, 150, 0.65),
        0 0 28px rgba(232, 162, 74, 0.4),
        0 0 56px rgba(196, 59, 92, 0.35),
        0 2px 4px rgba(20, 4, 16, 0.7),
        0 6px 28px rgba(0, 0, 0, 0.55);
}

html.season-halloween .titulo::after {
    height: 5px;
    width: min(300px, 92%);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(196, 59, 92, 0.45) 8%,
        #e86a8a 28%,
        #e8a24a 52%,
        #c43b5c 72%,
        rgba(107, 74, 122, 0.45) 90%,
        transparent
    );
    box-shadow:
        0 0 14px rgba(232, 162, 74, 0.65),
        0 0 32px rgba(196, 59, 92, 0.45),
        0 4px 18px rgba(232, 162, 74, 0.25);
}

html.season-halloween .titulo::before {
    width: min(340px, 96%);
    height: 2px;
    bottom: -2px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(240, 194, 122, 0.7),
        transparent
    );
    opacity: 1;
    box-shadow: 0 0 12px rgba(232, 162, 74, 0.45);
}

html.season-halloween .home-downloads-count {
    color: var(--hw-ember-hot);
    text-shadow: 0 0 16px var(--hw-ember-dim);
}

html.season-halloween .home-downloads-banner-text,
html.season-halloween .home-downloads-rest {
    color: var(--hw-ink-muted);
}

/* ══════════════════════════════════════════════
   3) FEATURED STAGE — marco fuerte + corners HW
   ══════════════════════════════════════════════ */
html.season-halloween .page-grid--home .page-grid-featured-stage {
    padding: 28px 18px 22px;
    background:
        radial-gradient(120% 80% at 50% -10%, rgba(196, 59, 92, 0.28), transparent 55%),
        radial-gradient(90% 70% at 100% 100%, rgba(232, 162, 74, 0.12), transparent 50%),
        linear-gradient(165deg, rgba(36, 10, 28, 0.94) 0%, rgba(10, 4, 14, 0.92) 100%);
    border: 3px solid rgba(232, 162, 74, 0.7);
    box-shadow:
        0 0 0 2px rgba(196, 59, 92, 0.55),
        0 0 0 8px rgba(196, 59, 92, 0.16),
        0 0 36px rgba(232, 162, 74, 0.18),
        0 22px 50px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 220, 180, 0.22),
        inset 0 0 48px rgba(196, 59, 92, 0.1);
}

html.season-halloween .page-grid--home .page-grid-featured-stage::before {
    padding: 2.5px;
    background: conic-gradient(
        from var(--featured-angle, 0deg),
        rgba(196, 59, 92, 0.08),
        rgba(232, 162, 74, 0.95),
        rgba(232, 122, 150, 0.85),
        rgba(196, 59, 92, 0.08),
        rgba(240, 194, 122, 0.9),
        rgba(196, 59, 92, 0.08)
    );
}

html.season-halloween .page-grid--home .page-grid-featured-corner {
    width: 72px;
    height: 72px;
    opacity: 1;
    filter: drop-shadow(0 0 10px rgba(232, 162, 74, 0.55));
}

html.season-halloween .page-grid--home .page-grid-featured-corner--tl,
html.season-halloween .page-grid--home .page-grid-featured-corner--bl {
    background-image: url("images/hw-frame-corner-tl.svg") !important;
}

html.season-halloween .page-grid--home .page-grid-featured-corner--tr,
html.season-halloween .page-grid--home .page-grid-featured-corner--br {
    background-image: url("images/hw-frame-corner-tr.svg") !important;
}

@media (min-width: 800px) {
    html.season-halloween .page-grid--home .page-grid-featured-corner {
        width: 96px;
        height: 96px;
    }
}

html.season-halloween .page-grid--home .page-grid-featured h2 {
    color: #ffe8d4;
    letter-spacing: 0.14em;
    text-shadow:
        0 0 18px rgba(232, 162, 74, 0.5),
        0 0 28px rgba(196, 59, 92, 0.35),
        0 2px 8px rgba(0, 0, 0, 0.4);
}

html.season-halloween .featured-carousel-dot-pill {
    background: linear-gradient(90deg, var(--hw-wine-soft), var(--hw-ember));
    box-shadow: 0 0 14px var(--hw-ember-dim);
    height: 9px;
    width: 26px;
}

html.season-halloween .featured-carousel-dot {
    border-color: rgba(232, 170, 120, 0.55);
}

html.season-halloween .featured-carousel-dot:hover,
html.season-halloween .featured-carousel-dot:focus-visible {
    background: rgba(232, 162, 74, 0.4);
}

/* ══════════════════════════════════════════════
   FICHAS — acento ámbar SOLO en hover/focus (como rosa en main).
   Reposo: borde sutil/neutro (styles-part1). Sin oro fijo.
   Ámbar soft Halloween: #b8860b / #c9a227 — no #f0c14b ni #ffe08a.
   Portada curva + fade + hover scale = main. Sin marcos.
   ══════════════════════════════════════════════ */
html.season-halloween .tarjeta-descargas {
    color: #c9a227;
}

/* Reposo: anula cualquier oro fijo previo; deja el borde neutro de main */
html.season-halloween .lista-juegos .tarjeta,
html.season-halloween .tarjeta.detalle-reco-card,
html.season-halloween .detalle-reco-card,
html.season-halloween .page-grid--home .page-grid-featured .tarjeta-destacado,
html.season-halloween .tarjeta {
    border-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow:
        0 14px 40px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

/* Hover/focus/active: mismo patrón que rosa main → ámbar ember soft */
html.season-halloween .tarjeta:hover,
html.season-halloween .tarjeta:focus-visible,
html.season-halloween .lista-juegos .tarjeta:hover,
html.season-halloween .lista-juegos .tarjeta:focus-visible,
html.season-halloween .lista-juegos .tarjeta:active,
html.season-halloween .page-grid--home .lista-juegos .tarjeta:hover,
html.season-halloween .page-grid--home .lista-juegos .tarjeta:focus-visible,
html.season-halloween .page-grid--home .lista-juegos .tarjeta:active,
html.season-halloween .detalle-reco-card:hover,
html.season-halloween .detalle-reco-card:focus-visible,
html.season-halloween .detalle-reco-card:active,
html.season-halloween .page-grid--home .page-grid-featured .tarjeta-destacado:hover,
html.season-halloween .page-grid--home .page-grid-featured .tarjeta-destacado:focus-visible {
    border-color: rgba(184, 134, 11, 0.55) !important;
    box-shadow:
        0 26px 56px rgba(0, 0, 0, 0.48),
        0 0 0 1px rgba(184, 134, 11, 0.28),
        0 0 22px rgba(201, 162, 39, 0.2) !important;
}

/* Filtros género → wine; ámbar solo en hover/selected (no oro fijo) */
html.season-halloween .filtro-boton:not(.filtro-boton--vip) {
    background: linear-gradient(145deg, #d45578, #a83252);
    border-color: rgba(196, 59, 92, 0.55);
    box-shadow: 0 2px 10px rgba(196, 59, 92, 0.25);
}

html.season-halloween .filtro-boton:not(.filtro-boton--vip):hover,
html.season-halloween .filtro-boton:not(.filtro-boton--vip).selected {
    background: linear-gradient(145deg, #e86a8a, #c43b5c);
    border-color: rgba(184, 134, 11, 0.65);
    box-shadow: 0 4px 16px rgba(184, 134, 11, 0.22);
}

/* ══════════════════════════════════════════════
   NAV — wine / ember coherente
   ══════════════════════════════════════════════ */
html.season-halloween .menu-inferior-panel {
    background: linear-gradient(165deg, rgba(52, 18, 36, 0.98), rgba(18, 8, 18, 0.99));
    border: 2px solid rgba(232, 162, 74, 0.4);
    box-shadow: 0 0 0 1px rgba(196, 59, 92, 0.3);
}

html.season-halloween .menu-inferior-drawer-link {
    border-color: rgba(232, 162, 74, 0.45);
    background: linear-gradient(145deg, rgba(196, 59, 92, 0.42), rgba(138, 36, 64, 0.5));
}

html.season-halloween .menu-inferior-drawer-link:hover,
html.season-halloween .menu-inferior-drawer-link:focus-visible,
html.season-halloween .menu-inferior-drawer-link:active {
    background: linear-gradient(145deg, rgba(232, 106, 138, 0.55), rgba(196, 59, 92, 0.55));
    border-color: rgba(240, 194, 122, 0.7);
    box-shadow: 0 4px 18px rgba(232, 162, 74, 0.22);
}

html.season-halloween .menu-inferior-toggle,
html.season-halloween .menu-inferior-toggle:hover,
html.season-halloween .menu-inferior-toggle:focus-visible,
html.season-halloween .menu-inferior-toggle:active,
html.season-halloween .menu-inferior--dragging .menu-inferior-toggle {
    border-color: rgba(232, 162, 74, 0.55);
    background: linear-gradient(145deg, rgba(196, 59, 92, 0.45), rgba(138, 36, 64, 0.55));
    box-shadow: 0 0 14px rgba(232, 162, 74, 0.2);
}

@media (min-width: 800px) {
    html.season-halloween .topnav-link {
        border: 1.5px solid rgba(232, 162, 74, 0.45);
        background: linear-gradient(145deg, rgba(196, 59, 92, 0.32), rgba(80, 24, 48, 0.4));
    }

    html.season-halloween .topnav-link:hover,
    html.season-halloween .topnav-link:focus-visible {
        background: linear-gradient(145deg, rgba(232, 106, 138, 0.5), rgba(196, 59, 92, 0.5));
        border-color: rgba(240, 194, 122, 0.75);
        box-shadow: 0 4px 18px rgba(232, 162, 74, 0.25);
    }

    html.season-halloween .topnav-link[aria-current="page"] {
        background: linear-gradient(145deg, rgba(196, 59, 92, 0.65), rgba(138, 36, 64, 0.7));
        border-color: rgba(240, 194, 122, 0.8);
        box-shadow: 0 4px 20px rgba(232, 162, 74, 0.3);
    }

    html.season-halloween .topnav-social-menu {
        border: 1.5px solid rgba(232, 162, 74, 0.4);
        background: linear-gradient(180deg, rgba(36, 12, 28, 0.98), rgba(14, 6, 16, 0.97));
    }
}

/* ══════════════════════════════════════════════
   DETAILS — bloque recomendados (sin marco overlay en cards)
   ══════════════════════════════════════════════ */
html.season-halloween .detalle-recomendados.detalle-bloque {
    margin-top: 22px;
    padding: 16px 12px 12px;
    border: 2px solid rgba(232, 162, 74, 0.35);
    border-radius: 18px;
    background: linear-gradient(165deg, rgba(36, 12, 28, 0.45), rgba(12, 6, 16, 0.32));
    box-shadow:
        0 0 0 1px rgba(196, 59, 92, 0.2),
        0 12px 32px rgba(0, 0, 0, 0.2);
}

html.season-halloween .detalle-reco-head h3 {
    color: #ffe8d4;
    text-shadow: 0 0 14px rgba(232, 162, 74, 0.3);
}

html.season-halloween .detalle-reco-head-line {
    height: 3px;
    background: linear-gradient(
        90deg,
        rgba(196, 59, 92, 0.9),
        rgba(232, 162, 74, 0.85),
        transparent
    );
    box-shadow: 0 0 10px rgba(232, 162, 74, 0.3);
}

html.season-halloween .detalle-reco-grid {
    scrollbar-color: rgba(232, 162, 74, 0.45) transparent;
}

html.season-halloween .detalle-reco-grid::-webkit-scrollbar-thumb {
    background: rgba(232, 162, 74, 0.45);
}

/* Reco cards: sin overlay; hover scale como main */
html.season-halloween .detalle-reco-card::before,
html.season-halloween .detalle-reco-card::after {
    content: none !important;
    display: none !important;
    background-image: none !important;
}

html.season-halloween :focus-visible {
    outline-color: var(--hw-focus-ring);
}

/* ══════════════════════════════════════════════
   VIP — tokens + fondo seasonal + featured marco
   ══════════════════════════════════════════════ */
html.season-halloween.vip-site {
    --vip-bg: var(--hw-bg);
    --vip-pink: var(--hw-wine-soft);
    --vip-pink-soft: rgba(232, 106, 138, 0.55);
    --vip-pink-glow: var(--hw-ember-dim);
    --vip-violet: var(--hw-mist);
    --vip-violet-soft: var(--hw-mist-glow);
    --vip-surface: rgba(26, 10, 22, 0.88);
    --vip-border: rgba(232, 162, 74, 0.28);
    --vip-text: var(--hw-ink);
    --vip-muted: var(--hw-ink-muted);
}

html.season-halloween.vip-site::before {
    background-color: var(--hw-bg);
    background-image:
        radial-gradient(ellipse 90% 55% at 50% -8%, rgba(196, 59, 92, 0.28), transparent 55%),
        radial-gradient(ellipse 70% 45% at 100% 40%, rgba(232, 162, 74, 0.12), transparent 50%),
        radial-gradient(ellipse 60% 40% at 0% 70%, rgba(107, 74, 122, 0.14), transparent 48%),
        linear-gradient(165deg, rgba(28, 6, 20, 0.72) 0%, rgba(8, 3, 12, 0.85) 50%, #0a040c 100%),
        url("images/Fondo-hw-altar.webp");
    background-position: center top, center center, center bottom, center center, center center;
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, cover;
    background-repeat: no-repeat;
}

html.season-halloween.vip-site::after {
    opacity: 1;
    mix-blend-mode: screen;
    background-image:
        radial-gradient(circle at 18% 80%, rgba(232, 162, 74, 0.2) 0%, transparent 10%),
        radial-gradient(circle at 82% 75%, rgba(232, 122, 150, 0.16) 0%, transparent 10%),
        radial-gradient(circle at 50% 0%, rgba(196, 59, 92, 0.12), transparent 40%);
    background-size: auto;
    animation: none;
    transform: none;
    filter: none;
}

html.season-halloween.vip-site .header .titulo {
    text-shadow:
        0 0 14px rgba(232, 122, 150, 0.55),
        0 0 32px rgba(232, 162, 74, 0.35),
        0 2px 4px rgba(20, 4, 16, 0.65);
}

html.season-halloween.vip-site .header .titulo::after {
    height: 5px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(196, 59, 92, 0.45) 8%,
        #e86a8a 28%,
        #e8a24a 52%,
        #c43b5c 72%,
        transparent
    );
    box-shadow:
        0 0 14px rgba(232, 162, 74, 0.6),
        0 0 28px rgba(196, 59, 92, 0.4);
}

html.season-halloween.vip-site .vip-plan-card {
    border: 2px solid rgba(232, 162, 74, 0.28);
    box-shadow:
        0 0 0 1px rgba(196, 59, 92, 0.2),
        0 18px 40px rgba(0, 0, 0, 0.35);
}

html.season-halloween.vip-site .vip-plan-card-featured {
    border: 2px solid rgba(232, 162, 74, 0.65);
    background:
        radial-gradient(ellipse 90% 60% at 50% -18%, rgba(232, 162, 74, 0.22), transparent 58%),
        linear-gradient(165deg, rgba(196, 59, 92, 0.16) 0%, rgba(22, 8, 24, 0.92) 55%, rgba(10, 4, 14, 0.96) 100%);
    box-shadow:
        0 0 0 1px rgba(196, 59, 92, 0.4),
        0 0 0 5px rgba(232, 162, 74, 0.1),
        0 22px 52px rgba(0, 0, 0, 0.42),
        inset 0 0 40px rgba(232, 162, 74, 0.06);
}

html.season-halloween.vip-site .vip-plan-card-featured::before {
    background: radial-gradient(circle, rgba(232, 162, 74, 0.4), transparent 68%);
}

html.season-halloween.vip-site .vip-plan-card-featured::after {
    box-shadow:
        0 0 40px rgba(232, 162, 74, 0.4),
        0 0 72px rgba(196, 59, 92, 0.28),
        0 0 100px rgba(232, 162, 74, 0.12);
    animation: hw-vip-featured-pulse 12s ease-in-out infinite;
}

html.season-halloween.vip-site .vip-plan-card-featured:hover::after {
    box-shadow:
        0 0 52px rgba(232, 162, 74, 0.5),
        0 0 80px rgba(196, 59, 92, 0.32),
        0 0 110px rgba(232, 162, 74, 0.16);
}

@keyframes hw-vip-featured-pulse {
    0%, 100% { opacity: 0.75; }
    50% { opacity: 1; }
}

/* Buscador / inputs sutiles en season */
html.season-halloween .buscador {
    border-color: rgba(232, 162, 74, 0.35);
    box-shadow: 0 0 0 1px rgba(196, 59, 92, 0.15);
}

html.season-halloween .buscador:focus {
    border-color: rgba(240, 194, 122, 0.65);
    box-shadow: 0 0 0 2px rgba(232, 162, 74, 0.25);
}