/*
==============================================================
 WinCarsCR.com
 Archivo generado automáticamente desde Administración > Imágenes
 NO EDITAR MANUALMENTE
==============================================================
*/

:root{

    --wc-hero-intro: url("/uploads/wincars/site-media/wc-media-20261015-060933-8d5dd3a9c878.png");

    --wc-hero-1: url("/uploads/wincars/site-media/wc-media-20261011-002332-18dc4b387d8d.png");
    --wc-hero-2: url("/uploads/wincars/site-media/wc-media-20260924-095539-622b686a13f9.png");
    --wc-hero-3: url("/uploads/wincars/site-media/wc-media-20260924-095617-2a95b1cb027b.png");
    --wc-hero-4: url("/uploads/wincars/site-media/wc-media-20260924-095647-0bc2c7ca34be.png");

    --wc-prize-1: none;
    --wc-prize-2: none;

    --wc-participar-banner: url("/uploads/wincars/site-media/wc-media-20261015-000711-7dd2d0ef1149.jpg");
    --wc-checkout-banner: url("/uploads/wincars/site-media/wc-media-20261013-213428-c5dde4db5107.png");
    --wc-ganadores-banner: none;
    --wc-mis-numeros-banner: url("/uploads/wincars/site-media/wc-media-20261015-002618-d3aa71f3a89a.png");

}


/*
==============================================================
 HOME ANTIGUO DE 4 SLIDES
==============================================================
*/

.hero-slide{

    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;

}


.hero-slide:nth-child(1){

    background-image:
        linear-gradient(
            90deg,
            rgba(3,4,6,.93) 0%,
            rgba(3,4,6,.76) 37%,
            rgba(3,4,6,.20) 72%,
            rgba(3,4,6,.10) 100%
        ),
        var(--wc-hero-1)
        !important;

}


.hero-slide:nth-child(2){

    background-image:
        linear-gradient(
            90deg,
            rgba(3,4,6,.93) 0%,
            rgba(3,4,6,.74) 38%,
            rgba(3,4,6,.18) 73%
        ),
        var(--wc-hero-2)
        !important;

}


.hero-slide:nth-child(3){

    background-image:
        linear-gradient(
            90deg,
            rgba(3,4,6,.93) 0%,
            rgba(3,4,6,.74) 38%,
            rgba(3,4,6,.18) 73%
        ),
        var(--wc-hero-3)
        !important;

}


.hero-slide:nth-child(4){

    background-image:
        linear-gradient(
            90deg,
            rgba(3,4,6,.94) 0%,
            rgba(3,4,6,.72) 38%,
            rgba(3,4,6,.16) 75%
        ),
        var(--wc-hero-4)
        !important;

}


/*
==============================================================
 HOME NUEVO / REAL-HERO
 Si el home actual utiliza .real-hero,
 las mismas cuatro imágenes rotan automáticamente.
==============================================================
*/

.real-hero{

    background:
        #07090c !important;

}


.real-hero::before{

    content:"" !important;

    position:absolute !important;

    inset:0 !important;

    z-index:0 !important;

    background-size:
        cover !important;

    background-position:
        center center !important;

    background-repeat:
        no-repeat !important;

    animation:
        wcHeroImages
        24s
        infinite;

}


.real-hero-inner{

    position:relative !important;
    z-index:3 !important;

}


@keyframes wcHeroImages{

    0%,
    23%{

        background-image:
            linear-gradient(
                90deg,
                rgba(3,4,6,.95),
                rgba(3,4,6,.72) 38%,
                rgba(3,4,6,.18) 75%
            ),
            var(--wc-hero-1);

    }


    25%,
    48%{

        background-image:
            linear-gradient(
                90deg,
                rgba(3,4,6,.95),
                rgba(3,4,6,.72) 38%,
                rgba(3,4,6,.18) 75%
            ),
            var(--wc-hero-2);

    }


    50%,
    73%{

        background-image:
            linear-gradient(
                90deg,
                rgba(3,4,6,.95),
                rgba(3,4,6,.72) 38%,
                rgba(3,4,6,.18) 75%
            ),
            var(--wc-hero-3);

    }


    75%,
    98%{

        background-image:
            linear-gradient(
                90deg,
                rgba(3,4,6,.95),
                rgba(3,4,6,.72) 38%,
                rgba(3,4,6,.18) 75%
            ),
            var(--wc-hero-4);

    }


    100%{

        background-image:
            linear-gradient(
                90deg,
                rgba(3,4,6,.95),
                rgba(3,4,6,.72) 38%,
                rgba(3,4,6,.18) 75%
            ),
            var(--wc-hero-1);

    }

}


/*
==============================================================
 TARJETAS PREMIOS
==============================================================
*/

.prize-card:nth-child(1)
.prize-card-media{

    background-image:
        var(--wc-prize-1),
        radial-gradient(
            circle at 50% 80%,
            rgba(225,6,24,.25),
            transparent 35%
        );

    background-size:
        cover;

    background-position:
        center center;

}


.prize-card:nth-child(2)
.prize-card-media{

    background-image:
        var(--wc-prize-2),
        radial-gradient(
            circle at 50% 80%,
            rgba(225,6,24,.25),
            transparent 35%
        );

    background-size:
        cover;

    background-position:
        center center;

}


/*
==============================================================
 BANNERS PAGINAS INTERNAS
==============================================================
*/

.wc-page-banner{

    width:100%;

    height:230px;

    background-color:#0d1015;

    background-size:cover;

    background-position:center center;

    background-repeat:no-repeat;

    position:relative;

    border-bottom:
        1px solid
        rgba(255,255,255,.07);

}


.wc-page-banner::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(5,7,10,.76),
            rgba(5,7,10,.20),
            rgba(5,7,10,.56)
        );

}


.wc-page-banner-participar{

    background-image:
        var(--wc-participar-banner);

}


.wc-page-banner-checkout{

    background-image:
        var(--wc-checkout-banner);

}


.wc-page-banner-ganadores{

    background-image:
        var(--wc-ganadores-banner);

}


.wc-page-banner-mis-numeros{

    background-image:
        var(--wc-mis-numeros-banner);

}


/*
==============================================================
 MOVIL
 Mantener siempre el centro de la imagen.
==============================================================
*/

@media(max-width:700px){

    .hero-slide,
    .real-hero::before{

        background-position:
            center center !important;

    }


    .wc-page-banner{

        height:145px;

        background-position:
            center center;

    }

}