/*
==============================================================
 WinCarsCR.com
 RESPONSIVE GENERAL
==============================================================
*/

html{
    width:100%;
    overflow-x:hidden;
    -webkit-text-size-adjust:100%;
}

body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}

img,
video,
svg,
canvas{
    max-width:100%;
    height:auto;
}

button,
input,
select,
textarea{
    max-width:100%;
}

body,
button,
input,
select,
textarea{
    -webkit-font-smoothing:antialiased;
}


/*
==============================================================
 HEADER GENERAL
==============================================================
*/

.wc-mobile-toggle{
    display:none;
    width:44px;
    height:44px;
    border-radius:10px;
    border:1px solid #303741;
    background:#11151b;
    color:white;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px;
    cursor:pointer;
    flex:0 0 44px;
}

.wc-mobile-toggle span{
    display:block;
    width:20px;
    height:2px;
    background:white;
    border-radius:5px;
    transition:.2s;
}

body.wc-menu-open{
    overflow:hidden;
}


/*
==============================================================
 TABLET
==============================================================
*/

@media(max-width:1100px){

    .wc-header{
        padding-left:24px;
        padding-right:24px;
    }

    .wc-nav{
        gap:17px;
    }

    .real-container{
        width:100%;
    }

    .real-section{
        padding-left:30px;
        padding-right:30px;
    }

    .ticket-shell{
        width:100%;
    }

}


/*
==============================================================
 MOVIL GENERAL
==============================================================
*/

@media(max-width:900px){

    /*
    ----------------------------------------------------------
    HEADER
    ----------------------------------------------------------
    */

    .wc-header{
        min-height:68px;
        height:auto;
        padding:
            10px
            max(
                14px,
                env(safe-area-inset-right)
            )
            10px
            max(
                14px,
                env(safe-area-inset-left)
            );
        gap:10px;
        flex-wrap:nowrap;
        position:sticky;
        top:0;
        z-index:3000;
    }

    .wc-brand{
        font-size:20px;
        letter-spacing:-1px;
        gap:8px;
        min-width:0;
        white-space:nowrap;
    }

    .wc-brand small{
        font-size:10px;
    }

    .wc-mark{
        width:38px;
        height:38px;
        border-radius:9px;
        flex:0 0 38px;
    }

    .wc-mobile-toggle{
        display:flex;
        margin-left:auto;
    }

    .wc-header > .wc-btn{
        min-height:42px;
        padding:0 13px;
        font-size:11px;
        white-space:nowrap;
    }

    .wc-nav{
        display:none !important;
        position:absolute;
        left:12px;
        right:12px;
        top:calc(100% + 7px);
        padding:12px;
        background:
            rgba(
                11,
                14,
                18,
                .98
            );
        border:
            1px solid
            #303640;
        border-radius:14px;
        box-shadow:
            0 20px 60px
            rgba(0,0,0,.6);
        flex-direction:column;
        align-items:stretch;
        gap:3px;
        backdrop-filter:blur(20px);
    }

    .wc-nav.mobile-open{
        display:flex !important;
    }

    .wc-nav a{
        display:block;
        width:100%;
        padding:13px 14px;
        border-radius:8px;
        color:white;
        font-size:14px;
    }

    .wc-nav a:hover{
        background:#191e25;
    }


    /*
    ----------------------------------------------------------
    SECCIONES
    ----------------------------------------------------------
    */

    .wc-section,
    .real-section{
        width:100%;
        padding:
            52px
            18px;
    }

    .real-container{
        width:100%;
        max-width:100%;
    }

    .wc-section-title,
    .real-title{
        max-width:100%;
        overflow-wrap:break-word;
    }


    /*
    ----------------------------------------------------------
    HERO HOME
    ----------------------------------------------------------
    */

    .real-hero{
        width:100%;
        min-height:650px;
        height:auto;
        align-items:flex-end;
    }

    .real-hero-inner{
        width:100%;
        padding:
            80px
            20px
            55px;
        margin:0;
    }

    .real-hero::before{
        background-position:
            center center
            !important;
    }

    .real-hero.has-image{
        background-position:
            center center
            !important;
    }

    .real-badge{
        font-size:9px;
        letter-spacing:1.2px;
        padding:8px 11px;
    }

    .real-hero h1{
        font-size:
            clamp(
                40px,
                12vw,
                58px
            );
        line-height:.92;
        letter-spacing:-3px;
        margin-top:18px;
        max-width:100%;
    }

    .real-hero-copy{
        font-size:15px;
        line-height:1.55;
        margin-top:20px;
        max-width:100%;
    }

    .hero-price-line{
        margin:
            20px
            0;
        gap:10px;
    }

    .hero-price{
        font-size:34px;
    }

    .hero-mini{
        font-size:12px;
    }

    .hero-actions{
        display:grid;
        grid-template-columns:1fr;
        width:100%;
        gap:9px;
    }

    .hero-actions .wc-btn{
        width:100%;
        min-height:48px;
    }


    /*
    ----------------------------------------------------------
    HERO ANTIGUO DE 4 SLIDES
    ----------------------------------------------------------
    */

    .hero{
        min-height:620px;
        width:100%;
    }

    .hero-slide{
        padding:
            80px
            20px
            80px;
        align-items:flex-end;
        background-position:
            center center
            !important;
    }

    .hero-content{
        width:100%;
        max-width:100%;
    }

    .hero h1{
        font-size:
            clamp(
                39px,
                11vw,
                56px
            );
        line-height:.94;
        letter-spacing:-3px;
    }

    .hero p{
        font-size:15px;
        line-height:1.55;
        margin:
            18px
            0
            22px;
    }

    .hero-dots{
        left:20px;
        bottom:25px;
    }


    /*
    ----------------------------------------------------------
    FRANJA PROMO
    ----------------------------------------------------------
    */

    .promo-strip-inner{
        display:grid;
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
        gap:0;
        padding:0;
        text-align:center;
    }

    .promo-strip-inner span{
        display:flex;
        align-items:center;
        justify-content:center;
        min-height:50px;
        padding:8px;
        border:
            1px solid
            rgba(255,255,255,.12);
        font-size:9px;
        line-height:1.25;
    }


    /*
    ----------------------------------------------------------
    ESTADISTICAS
    ----------------------------------------------------------
    */

    .live-stats,
    .stats{
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
        gap:9px;
    }

    .live-stat,
    .stat{
        padding:17px 14px;
        min-width:0;
    }

    .live-stat strong,
    .stat-value{
        font-size:24px;
        overflow-wrap:anywhere;
    }


    /*
    ----------------------------------------------------------
    EVENTO
    ----------------------------------------------------------
    */

    .event-master,
    .event-inner{
        grid-template-columns:1fr;
    }

    .event-master{
        border-radius:18px;
    }

    .event-master-copy,
    .event-info{
        padding:25px 20px;
    }

    .event-master-side,
    .event-side{
        min-height:auto;
        padding:27px 20px;
    }

    .event-master-copy h2{
        font-size:35px !important;
    }

    .draw-box{
        padding:16px;
    }

    .draw-box strong{
        font-size:18px;
        overflow-wrap:anywhere;
    }


    /*
    ----------------------------------------------------------
    PREMIOS
    ----------------------------------------------------------
    */

    .prize-grid,
    .event-prizes{
        grid-template-columns:1fr;
    }

    .prize-card{
        min-height:0;
        border-radius:18px;
    }

    .prize-card-media{
        height:
            min(
                68vw,
                330px
            );
        background-position:
            center center
            !important;
    }

    .prize-card-media img{
        object-position:
            center center
            !important;
    }

    .vehicle-placeholder{
        padding:20px;
    }

    .prize-content{
        padding:21px 18px;
    }

    .prize-content h3{
        font-size:25px;
    }


    /*
    ----------------------------------------------------------
    MECANICA
    ----------------------------------------------------------
    */

    .mechanic-grid,
    .milestone-wrap{
        grid-template-columns:1fr;
    }

    .mechanic-card,
    .milestone{
        padding:23px 18px;
    }

    .mechanic-number{
        font-size:52px;
        letter-spacing:-3px;
    }

    .example-row{
        width:100%;
        gap:5px;
        flex-wrap:wrap;
    }

    .example-ticket{
        padding:8px;
        font-size:12px;
    }

    .milestone-percent{
        font-size:48px;
    }


    /*
    ----------------------------------------------------------
    PASOS
    ----------------------------------------------------------
    */

    .steps-real,
    .features{
        grid-template-columns:1fr;
    }

    .step-real{
        padding:
            18px
            0
            4px;
    }


    /*
    ----------------------------------------------------------
    CTA FINAL
    ----------------------------------------------------------
    */

    .final-cta{
        padding:
            40px
            20px;
        border-radius:18px;
    }

    .final-cta h2{
        font-size:42px;
        letter-spacing:-2.5px;
    }


    /*
    ----------------------------------------------------------
    FOOTER
    ----------------------------------------------------------
    */

    .footer{
        padding:
            35px
            20px
            calc(
                35px +
                env(safe-area-inset-bottom)
            );
    }


    /*
    ==========================================================
    SELECTOR DE NUMEROS
    ==========================================================
    */

    .ticket-shell{
        width:100%;
        max-width:100%;
        padding:
            25px
            12px
            150px;
    }

    .ticket-top{
        display:block;
        margin-bottom:18px;
    }

    .ticket-title h1{
        font-size:
            clamp(
                34px,
                10vw,
                47px
            );
        letter-spacing:-2px;
    }

    .ticket-title p{
        font-size:14px;
    }

    .ticket-tools{
        display:grid;
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
        gap:7px;
        width:100%;
        margin-top:18px;
    }

    .ticket-search{
        grid-column:1/-1;
        width:100%;
        min-width:0;
        height:48px;
        font-size:16px;
    }

    .ticket-tools .tool-btn{
        width:100%;
        padding:0 7px;
        font-size:11px;
    }

    .range-tabs{
        width:
            calc(
                100% + 24px
            );
        margin-left:-12px;
        padding:
            4px
            12px
            12px;
        overflow-x:auto;
        scrollbar-width:none;
        -webkit-overflow-scrolling:touch;
    }

    .range-tabs::-webkit-scrollbar{
        display:none;
    }

    .range-btn{
        flex:0 0 auto;
        height:40px;
        padding:0 12px;
        font-size:10px;
    }

    .ticket-legend{
        gap:
            8px
            13px;
        font-size:10px;
        margin:
            10px
            0
            15px;
    }

    .ticket-grid{
        grid-template-columns:
            repeat(
                4,
                minmax(0,1fr)
            );
        gap:6px;
        width:100%;
    }

    .ticket{
        width:100%;
        min-width:0;
        min-height:44px;
        padding:4px 2px;
        font-size:11px;
        border-radius:7px;
    }

    .ticket.inverse-ok::after{
        display:none;
    }

    .inverse-box.show{
        display:block;
        padding:16px;
    }

    .inverse-box .wc-btn{
        width:100%;
        margin-top:12px;
    }

    .bottom-cart{
        width:
            calc(
                100% - 16px
            );
        left:8px;
        right:8px;
        bottom:
            max(
                8px,
                env(
                    safe-area-inset-bottom
                )
            );
        transform:none;
        border-radius:14px;
        padding:11px;
        gap:9px;
        display:grid;
        grid-template-columns:1fr;
    }

    .cart-summary{
        width:100%;
        display:flex;
        justify-content:space-between;
        gap:15px;
    }

    .cart-summary strong{
        font-size:18px;
    }

    .bottom-cart > .wc-btn{
        width:100%;
        min-height:46px;
    }

    .random-card{
        max-height:
            calc(
                100vh - 30px
            );
        overflow-y:auto;
        padding:21px 16px;
    }

    .random-buttons{
        grid-template-columns:
            repeat(
                3,
                1fr
            );
    }

    .toast{
        top:78px;
        left:12px;
        right:12px;
        width:auto;
        transform:
            translateY(-180%);
    }

    .toast.show{
        transform:
            translateY(0);
    }


    /*
    ==========================================================
    CHECKOUT
    ==========================================================
    */

    .checkout-wrap{
        width:
            calc(
                100% - 24px
            ) !important;
        margin:
            20px
            auto
            70px
            !important;
    }

    .checkout-timer{
        top:72px !important;
        padding:
            12px
            14px !important;
        border-radius:12px !important;
        gap:10px !important;
    }

    .checkout-timer strong{
        font-size:12px;
    }

    .timer-value{
        font-size:
            22px
            !important;
        white-space:nowrap;
    }

    .steps{
        grid-template-columns:
            repeat(
                3,
                minmax(0,1fr)
            ) !important;
        gap:5px !important;
    }

    .step{
        padding:
            10px
            6px
            !important;
        text-align:center;
        font-size:
            9px
            !important;
        min-width:0;
    }

    .checkout-grid{
        grid-template-columns:
            1fr
            !important;
        gap:12px !important;
    }

    .checkout-card{
        padding:
            20px
            15px
            !important;
        border-radius:
            14px
            !important;
        min-width:0;
    }

    .checkout-card h2{
        font-size:21px;
    }

    .field input,
    .field select,
    .field textarea{
        font-size:16px !important;
    }

    .checkout-numbers{
        gap:5px !important;
    }

    .checkout-number{
        padding:
            7px
            8px !important;
        font-size:11px;
    }

    .total-big{
        font-size:
            27px
            !important;
    }


    /*
    ==========================================================
    GANADORES
    ==========================================================
    */

    .winners{
        width:100%;
        max-width:100%;
    }

    .winner-grid{
        grid-template-columns:
            1fr
            !important;
        gap:12px !important;
    }

    .winner-card{
        padding:
            23px
            17px
            !important;
    }

    .winner-number{
        font-size:
            47px
            !important;
        letter-spacing:-2px !important;
    }


    /*
    ==========================================================
    MIS NUMEROS
    ==========================================================
    */

    .lookup{
        width:100%;
        max-width:100%;
    }

    .lookup-box{
        padding:
            20px
            15px
            !important;
    }

    .lookup-field input{
        font-size:16px;
    }

    .lookup-order{
        padding:
            18px
            14px
            !important;
        overflow-wrap:anywhere;
    }

    .lookup-numbers{
        font-size:
            17px
            !important;
        line-height:1.6;
    }


    /*
    ==========================================================
    BANNERS INTERNOS
    ==========================================================
    */

    .wc-page-banner{
        height:160px !important;
        background-position:
            center center
            !important;
    }


    /*
    ==========================================================
    ADMIN
    ==========================================================
    */

    .wca-sidebar{
        position:relative !important;
        width:100% !important;
        height:auto !important;
        min-height:0 !important;
        padding:
            13px
            12px
            10px
            !important;
        overflow:visible !important;
    }

    .wca-logo{
        padding:
            3px
            3px
            12px
            !important;
        font-size:
            19px
            !important;
    }

    .wca-label{
        display:none !important;
    }

    .wca-nav{
        display:flex !important;
        flex-direction:row !important;
        width:
            calc(
                100% + 24px
            );
        margin-left:-12px;
        padding:
            0
            12px
            8px;
        gap:5px;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
    }

    .wca-nav::-webkit-scrollbar{
        display:none;
    }

    .wca-nav a{
        flex:0 0 auto;
        white-space:nowrap;
        padding:
            10px
            12px
            !important;
        margin:0 !important;
        font-size:
            11px
            !important;
    }

    .wca-icon{
        width:auto !important;
    }

    .wca-bottom{
        margin-top:7px !important;
        padding:
            10px
            3px
            0
            !important;
        display:flex;
        justify-content:space-between;
        gap:10px;
        align-items:center;
    }

    .wca-bottom .wca-actions{
        margin-top:
            0
            !important;
    }

    .wca-bottom .wca-btn{
        min-height:34px;
        padding:0 9px;
        font-size:9px;
    }

    .wca-shell{
        margin-left:0 !important;
        width:100%;
    }

    .wca-top{
        min-height:54px !important;
        height:auto !important;
        position:sticky !important;
        top:0 !important;
        padding:
            8px
            13px
            !important;
        gap:10px;
    }

    .wca-top-actions{
        gap:8px !important;
        font-size:9px !important;
        white-space:nowrap;
    }

    .wca-content{
        width:100%;
        max-width:100%;
        padding:
            18px
            11px
            40px
            !important;
    }

    .wca-head{
        display:block !important;
        margin-bottom:
            17px
            !important;
    }

    .wca-head h1{
        font-size:
            29px
            !important;
    }

    .wca-head > .wca-btn{
        margin-top:12px;
        width:100%;
    }

    .wca-cards{
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            ) !important;
        gap:
            8px
            !important;
    }

    .wca-card{
        padding:
            14px
            11px
            !important;
        min-width:0;
    }

    .wca-card strong{
        font-size:
            22px
            !important;
        overflow-wrap:anywhere;
    }

    .wca-grid{
        grid-template-columns:
            1fr
            !important;
        gap:
            11px
            !important;
    }

    .wca-panel{
        padding:
            17px
            12px
            !important;
        margin-bottom:
            12px
            !important;
        border-radius:
            11px
            !important;
        min-width:0;
    }

    .wca-form{
        grid-template-columns:
            1fr
            !important;
        gap:
            12px
            !important;
    }

    .wca-form .full{
        grid-column:auto !important;
    }

    .wca-field input,
    .wca-field textarea,
    .wca-field select{
        font-size:
            16px
            !important;
        width:100%;
    }

    .wca-table-wrap{
        width:100%;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

    .wca-table{
        min-width:700px;
    }

    .wca-search{
        display:grid !important;
        grid-template-columns:
            1fr
            1fr;
        gap:7px !important;
    }

    .wca-search input{
        grid-column:1/-1;
        font-size:16px;
    }

    .wca-search select{
        font-size:14px;
        width:100%;
    }

    .wca-search .wca-btn{
        width:100%;
    }

    .media-grid{
        grid-template-columns:
            1fr
            !important;
    }

    .media-preview{
        height:
            min(
                58vw,
                270px
            ) !important;
    }

    .media-body{
        padding:
            17px
            14px
            !important;
    }

}


/*
==============================================================
 TELEFONOS PEQUEÑOS
==============================================================
*/

@media(max-width:430px){

    .wc-header{
        min-height:64px;
    }

    .wc-brand{
        font-size:17px;
    }

    .wc-mark{
        width:34px;
        height:34px;
        flex-basis:34px;
    }

    .wc-header > .wc-btn{
        padding:0 9px;
        font-size:9px;
    }

    .wc-mobile-toggle{
        width:40px;
        height:40px;
        flex-basis:40px;
    }

    .real-hero{
        min-height:620px;
    }

    .real-hero-inner{
        padding:
            70px
            16px
            45px;
    }

    .real-hero h1{
        font-size:
            clamp(
                37px,
                11.7vw,
                49px
            );
    }

    .real-hero-copy{
        font-size:14px;
    }

    .real-section,
    .wc-section{
        padding:
            45px
            14px;
    }

    .real-title{
        font-size:
            36px;
        letter-spacing:-2px;
    }

    .live-stats,
    .stats{
        gap:6px;
    }

    .live-stat,
    .stat{
        padding:
            14px
            10px;
    }

    .live-stat strong,
    .stat-value{
        font-size:20px;
    }

    .promo-strip-inner span{
        font-size:8px;
    }

    .ticket-shell{
        padding-left:9px;
        padding-right:9px;
    }

    .ticket-grid{
        gap:5px;
    }

    .ticket{
        min-height:42px;
        font-size:10px;
    }

    .ticket-tools{
        gap:5px;
    }

    .checkout-wrap{
        width:
            calc(
                100% - 14px
            ) !important;
    }

    .checkout-card{
        padding:
            17px
            12px
            !important;
    }

    .wca-content{
        padding-left:
            8px
            !important;
        padding-right:
            8px
            !important;
    }

}


/*
==============================================================
 TELEFONOS MUY ESTRECHOS
==============================================================
*/

@media(max-width:360px){

    .wc-brand{
        font-size:15px;
    }

    .wc-brand small{
        font-size:8px;
    }

    .wc-header > .wc-btn{
        display:none;
    }

    .ticket-grid{
        grid-template-columns:
            repeat(
                3,
                minmax(0,1fr)
            );
    }

    .promo-strip-inner{
        grid-template-columns:1fr;
    }

    .wca-cards{
        grid-template-columns:1fr !important;
    }

}


/*
==============================================================
 LANDSCAPE MOVIL
==============================================================
*/

@media(
    max-width:900px
)
and
(
    orientation:landscape
)
and
(
    max-height:500px
){

    .real-hero{
        min-height:520px;
    }

    .real-hero-inner{
        padding-top:70px;
    }

    .real-hero h1{
        font-size:45px;
    }

}


/*
==============================================================
 SAFE AREA iPHONE
==============================================================
*/

@supports(
    padding:
    max(
        0px
    )
){

    .bottom-cart{
        padding-bottom:
            max(
                11px,
                env(
                    safe-area-inset-bottom
                )
            );
    }

}