/**
 * CÍRCULO ESCARLATA — FIESTAS PATRIAS
 * Versión reforzada y proporcional Desktop / Mobile
 */


/* =========================================================
   1. VARIABLES
   ========================================================= */

body.ce-fiestas-patrias {
    --ce-fp-rojo: #d52b1e;
    --ce-fp-azul: #0039a6;
    --ce-fp-blanco: #ffffff;

    /* Más presencia visual */
    --ce-fp-banderines-desktop: 19px;
    --ce-fp-banderines-mobile: 16px;

    --ce-fp-escarapela-desktop: 48px;
    --ce-fp-escarapela-mobile: 40px;
}


/* =========================================================
   2. HEADER / BANDERINES
   ========================================================= */

body.ce-fiestas-patrias #header-container,
body.ce-fiestas-patrias header#header-container,
body.ce-fiestas-patrias .header-container {
    position: relative;
    overflow: visible;
}

body.ce-fiestas-patrias #header-container::after,
body.ce-fiestas-patrias header#header-container::after,
body.ce-fiestas-patrias .header-container::after {
    content: "";
    position: absolute;

    left: 0;
    right: 0;

    bottom: -14px;

    width: 100%;
    height: var(--ce-fp-banderines-desktop);

    background-image:
        url("../images/fiestas-patrias/banderines.svg");

    background-repeat: repeat-x;
    background-position: center top;
    background-size: auto 100%;

    pointer-events: none;

    opacity: 1;

    z-index: 999;
}


/* =========================================================
   3. H1 + ESCARAPELA
   ========================================================= */

body.ce-fiestas-patrias h1 {
    position: relative;

    padding-bottom: 12px;
    margin-bottom: 17px;

    border-bottom: 3px solid transparent;

    border-image:
        linear-gradient(
            90deg,
            var(--ce-fp-azul) 0 33.333%,
            var(--ce-fp-blanco) 33.333% 66.666%,
            var(--ce-fp-rojo) 66.666% 100%
        ) 1;
}

body.ce-fiestas-patrias h1::after {
    content: "";

    display: inline-block;

    width: var(--ce-fp-escarapela-desktop);
    height: var(--ce-fp-escarapela-desktop);

    margin-left: 14px;

    vertical-align: middle;

    background:
        url("../images/fiestas-patrias/escarapela.svg")
        center / contain no-repeat;

    opacity: 1;

    transform: translateY(-2px);
}


/* =========================================================
   4. BADGE HOME
   ========================================================= */

body.home.ce-fiestas-patrias h1::before {
    content: "Edición Fiestas Patrias";

    display: block;
    width: max-content;
    max-width: 100%;

    margin: 0 0 14px 0;

    padding:
        8px 14px 8px 38px;

    border:
        1px solid rgba(255, 255, 255, 0.16);

    border-radius: 999px;

    background-color:
        rgba(7, 13, 27, 0.74);

    background-image:
        url("../images/fiestas-patrias/escarapela.svg");

    background-repeat: no-repeat;

    background-position:
        10px center;

    background-size:
        20px 20px;

    box-shadow:
        inset 0 0 0 1px rgba(0, 57, 166, 0.15),
        0 5px 18px rgba(0, 0, 0, 0.22);

    color:
        rgba(255, 255, 255, 0.94);

    font-family: inherit;

    font-size: 13px;
    font-weight: 600;

    line-height: 1.2;

    letter-spacing: 0.02em;
}


/* =========================================================
   5. H2
   ========================================================= */

body.ce-fiestas-patrias h2::after {
    content: "";

    display: block;

    width: 68px;
    height: 3px;

    margin-top: 10px;

    border-radius: 99px;

    background:
        linear-gradient(
            90deg,
            var(--ce-fp-azul) 0 33.333%,
            var(--ce-fp-blanco) 33.333% 66.666%,
            var(--ce-fp-rojo) 66.666% 100%
        );

    opacity: 0.96;
}


/* =========================================================
   6. FOOTER
   ========================================================= */

body.ce-fiestas-patrias #footer,
body.ce-fiestas-patrias footer#footer,
body.ce-fiestas-patrias footer.site-footer {
    position: relative;
    overflow: hidden;
}


/* Línea superior */
body.ce-fiestas-patrias #footer::before,
body.ce-fiestas-patrias footer#footer::before,
body.ce-fiestas-patrias footer.site-footer::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(--ce-fp-azul) 0 33.333%,
            var(--ce-fp-blanco) 33.333% 66.666%,
            var(--ce-fp-rojo) 66.666% 100%
        );

    pointer-events: none;

    z-index: 4;
}


/* Copihues */
body.ce-fiestas-patrias #footer::after,
body.ce-fiestas-patrias footer#footer::after,
body.ce-fiestas-patrias footer.site-footer::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 155px;

    background-image:
        url("../images/fiestas-patrias/copihue.svg"),
        url("../images/fiestas-patrias/copihue.svg");

    background-repeat:
        no-repeat,
        no-repeat;

    background-position:
        left -12px bottom -8px,
        right -12px bottom -8px;

    background-size:
        105px auto,
        105px auto;

    opacity: 0.57;

    pointer-events: none;

    z-index: 0;
}


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


/* =========================================================
   7. HOME BUTTONS
   ========================================================= */

body.home.ce-fiestas-patrias .button,
body.home.ce-fiestas-patrias .btn,
body.home.ce-fiestas-patrias a.button {
    transition:
        box-shadow 0.22s ease,
        transform 0.22s ease;
}

body.home.ce-fiestas-patrias .button:hover,
body.home.ce-fiestas-patrias .btn:hover,
body.home.ce-fiestas-patrias a.button:hover {
    box-shadow:
        0 5px 20px rgba(213, 43, 30, 0.15);
}


/* =========================================================
   8. MOBILE
   Misma estética, sólo reducida proporcionalmente
   ========================================================= */

@media (max-width: 767px) {

    body.ce-fiestas-patrias #header-container::after,
    body.ce-fiestas-patrias header#header-container::after,
    body.ce-fiestas-patrias .header-container::after {
        height:
            var(--ce-fp-banderines-mobile);

        bottom:
            -12px;

        opacity:
            1;
    }


    body.ce-fiestas-patrias #header-container,
    body.ce-fiestas-patrias header#header-container,
    body.ce-fiestas-patrias .header-container {
        margin-bottom:
            12px;
    }


    body.ce-fiestas-patrias h1 {
        padding-bottom:
            10px;

        margin-bottom:
            15px;

        border-bottom-width:
            3px;
    }


    body.ce-fiestas-patrias h1::after {
        width:
            var(--ce-fp-escarapela-mobile);

        height:
            var(--ce-fp-escarapela-mobile);

        margin-left:
            9px;

        transform:
            translateY(-1px);
    }


    body.home.ce-fiestas-patrias h1::before {
        margin-bottom:
            12px;

        padding:
            7px 12px 7px 34px;

        background-position:
            9px center;

        background-size:
            18px 18px;

        font-size:
            12px;
    }


    body.ce-fiestas-patrias h2::after {
        width:
            58px;

        height:
            3px;

        margin-top:
            9px;
    }


    body.ce-fiestas-patrias #footer::after,
    body.ce-fiestas-patrias footer#footer::after,
    body.ce-fiestas-patrias footer.site-footer::after {
        height:
            125px;

        background-position:
            left -10px bottom -8px,
            right -10px bottom -8px;

        background-size:
            86px auto,
            86px auto;

        opacity:
            0.54;
    }


    body.ce-fiestas-patrias #footer::before,
    body.ce-fiestas-patrias footer#footer::before,
    body.ce-fiestas-patrias footer.site-footer::before {
        height:
            4px;
    }
}


/* =========================================================
   9. MOBILE PEQUEÑO
   ========================================================= */

@media (max-width: 420px) {

    body.ce-fiestas-patrias h1::after {
        width:
            36px;

        height:
            36px;

        margin-left:
            7px;
    }

    body.ce-fiestas-patrias #footer::after,
    body.ce-fiestas-patrias footer#footer::after,
    body.ce-fiestas-patrias footer.site-footer::after {
        background-size:
            76px auto,
            76px auto;
    }
}


/* =========================================================
   10. ACCESIBILIDAD
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    body.ce-fiestas-patrias *,
    body.ce-fiestas-patrias *::before,
    body.ce-fiestas-patrias *::after {
        scroll-behavior:
            auto !important;

        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;
    }
}