/**
 * CÍRCULO ESCARLATA — HALLOWEEN ESCARLATA
 * Capa estacional independiente para Listeo.
 *
 * Se activa únicamente cuando <body> contiene .ce-halloween.
 * No cambia el texto ni la estructura real de H1/H2, botones o imágenes.
 *
 * Assets relativos:
 * ../images/halloween/murcielagos-guirnalda.svg
 * ../images/halloween/calabaza.svg
 * ../images/halloween/bruja-realista.webp
 * ../images/halloween/telaranas.svg
 */

body.ce-halloween {
    --ce-hw-noche: #160d1b;
    --ce-hw-vino: #6f182d;
    --ce-hw-naranja: #d8752d;
    --ce-hw-marfil: #f1e8dc;
    --ce-hw-guirnalda-desktop: 30px;
    --ce-hw-guirnalda-mobile: 28px;
    --ce-hw-adorno-h1-desktop: 48px;
    --ce-hw-adorno-h1-mobile: 42px;
}

/*
 * Guirnalda anclada al menú visible (#header).
 * En páginas SEO y Home, #header-container mide sólo 1px porque #header es
 * absoluto; usar el contenedor exterior colocaba el adorno arriba de la página.
 */
body.ce-halloween #header {
    overflow: visible;
}

body.ce-halloween #header::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -22px;
    left: 0;
    width: 100%;
    height: var(--ce-hw-guirnalda-desktop);
    background: url("../images/halloween/murcielagos-guirnalda.svg") center top / auto 100% repeat-x;
    opacity: 0.94;
    pointer-events: none;
    z-index: 999;
}

/* Evita superponer la guirnalda patria durante una vista previa en septiembre. */
body.ce-halloween.ce-fiestas-patrias #header-container::after {
    content: none;
}

/* El H1 conserva su contenido real; la bruja aparece al final del título. */
body.ce-halloween h1 {
    position: relative;
    margin-bottom: 17px;
    padding-bottom: 12px;
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(
        90deg,
        var(--ce-hw-vino) 0 42%,
        var(--ce-hw-naranja) 42% 68%,
        rgba(241, 232, 220, 0.78) 68% 100%
    ) 1;
}

body.ce-halloween h1::after {
    content: "";
    display: inline-block;
    width: var(--ce-hw-adorno-h1-desktop);
    height: var(--ce-hw-adorno-h1-desktop);
    margin-left: 13px;
    vertical-align: middle;
    background: url("../images/halloween/bruja-realista.webp") center / contain no-repeat;
    opacity: 0.96;
    transform: translateY(-2px);
    pointer-events: none;
}

/* Insignia visual sólo en portada; no agrega contenido al DOM ni al SEO. */
body.home.ce-halloween h1::before {
    content: "Halloween Escarlata";
    display: block;
    width: max-content;
    max-width: 100%;
    margin: 0 0 13px;
    padding: 8px 14px 8px 39px;
    border: 1px solid rgba(216, 117, 45, 0.35);
    border-radius: 999px;
    background-color: rgba(22, 13, 27, 0.84);
    background-image: url("../images/halloween/calabaza.svg");
    background-position: 10px center;
    background-repeat: no-repeat;
    background-size: 22px auto;
    box-shadow: 0 5px 18px rgba(22, 13, 27, 0.22);
    color: rgba(255, 250, 244, 0.96);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.025em;
}

/*
 * Subrayado vivo bajo el H2. La calabaza se mantiene separada para aparecer
 * inmediatamente después de la última palabra del título.
 */
body.ce-halloween h2 {
    padding-bottom: 9px;
    background-image: linear-gradient(90deg, #c91f4a 0%, #ff791f 58%, #ffd166 100%);
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size: 88px 4px;
}

body.ce-halloween h2::after {
    content: "";
    display: inline-block;
    width: 40px;
    height: 40px;
    margin-left: 10px;
    vertical-align: middle;
    background: url("../images/halloween/calabaza.svg") center / contain no-repeat;
    opacity: 1;
    filter: saturate(1.14);
    transform: translateY(-2px);
    pointer-events: none;
}

/* Footer: telarañas en las esquinas y línea superior temática. */
body.ce-halloween #footer,
body.ce-halloween footer#footer,
body.ce-halloween footer.site-footer {
    position: relative;
    overflow: hidden;
}

body.ce-halloween #footer::before,
body.ce-halloween footer#footer::before,
body.ce-halloween footer.site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--ce-hw-vino), var(--ce-hw-naranja), var(--ce-hw-vino));
    pointer-events: none;
    z-index: 4;
}

body.ce-halloween #footer::after,
body.ce-halloween footer#footer::after,
body.ce-halloween footer.site-footer::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 158px;
    background-image:
        url("../images/halloween/telaranas.svg"),
        url("../images/halloween/telaranas.svg");
    background-position:
        left -8px bottom -8px,
        right -8px bottom -8px;
    background-repeat: no-repeat, no-repeat;
    background-size: 118px auto, 118px auto;
    opacity: 0.34;
    pointer-events: none;
    z-index: 0;
}

body.ce-halloween #footer > *,
body.ce-halloween footer#footer > *,
body.ce-halloween footer.site-footer > * {
    position: relative;
    z-index: 1;
}

/* Misma composición en mobile, reducida proporcionalmente. */
@media (max-width: 767px) {
    body.ce-halloween #header::after {
        bottom: -21px;
        height: var(--ce-hw-guirnalda-mobile);
        opacity: 1;
    }

    body.ce-halloween h1 {
        margin-bottom: 15px;
        padding-bottom: 10px;
    }

    body.ce-halloween h1::after {
        width: var(--ce-hw-adorno-h1-mobile);
        height: var(--ce-hw-adorno-h1-mobile);
        margin-left: 9px;
        transform: translateY(-1px);
    }

    body.home.ce-halloween h1::before {
        margin-bottom: 12px;
        padding: 7px 12px 7px 35px;
        background-position: 9px center;
        background-size: 20px auto;
        font-size: 12px;
    }

    body.ce-halloween h2 {
        padding-bottom: 8px;
        background-size: 78px 4px;
    }

    body.ce-halloween h2::after {
        width: 36px;
        height: 36px;
        margin-left: 8px;
        transform: translateY(-1px);
    }

    body.ce-halloween #footer::after,
    body.ce-halloween footer#footer::after,
    body.ce-halloween footer.site-footer::after {
        height: 128px;
        background-position:
            left -8px bottom -8px,
            right -8px bottom -8px;
        background-size: 94px auto, 94px auto;
        opacity: 0.32;
    }
}

@media (max-width: 420px) {
    body.ce-halloween h1::after {
        width: 38px;
        height: 38px;
        margin-left: 7px;
    }

    body.ce-halloween #footer::after,
    body.ce-halloween footer#footer::after,
    body.ce-halloween footer.site-footer::after {
        background-size: 82px auto, 82px auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.ce-halloween *,
    body.ce-halloween *::before,
    body.ce-halloween *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}