@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


:root {
    --color-01: #81152A;  /*** COLOR PRINCIPAL ***/
    --color-02: #F7B790;  /*** COLOR SECUNDARIO ***/
    --color-03: #F0E6D6;  /*** COLOR TTERCIARIO ***/
    --color-04: #e17341;  /*** COLOR BACKGROUNDGENERAL ***/
}

*{
  font-family: "Poppins", sans-serif !important;
}

html{
    font-size: 14px;
    scroll-behavior: smooth;
}


/* VARIOS ==========================================
====================================================*/

.btn-primary{
    background: var(--color-01) !important;
    color: rgba(var(--bs-light-rgb)) !important;
    font-weight: 600;
    border-color: var(--color-01) !important;
    border-radius: 0;
}
.btn-primary:hover{
    background: color-mix(in srgb, var(--color-01) 95%, black) !important;
    border-color: color-mix(in srgb, var(--color-01) 95%, black) !important;
    opacity: 0.8;
}


.btn-outline-primary{
    color: var(--color-01) !important;
    border-color: var(--color-01) !important;

}
.btn-outline-primary:hover{
    color: #ffffff !important;
    background: var(--color-01) !important;
    border-color: var(--color-01) !important;
}



.border-20px{
    border-radius: 20px;
}


.border-sorteo{
    border: 1.5px dashed #81152A;
}

/* FUENTES ==========================================
====================================================*/

.text-small{
    font-size: 0.8rem;
}


.text-primary{
    color: var(--color-01) !important;
}

.link-light{
    color:#ffffff;
    font-weight: 600;
}

/* BACKGROUNDS =====================================
====================================================*/

.bg-primary{
    background: #EF794B !important;
}
.bg-secondary{
    background: var(--color-02) !important;
}
.bg-tertiary{
    background: var(--color-03) !important;
}



.bg-banner-principal{
    background: linear-gradient(to bottom, #F5A472 50%, #EF794B);
    background-size: cover;
    background-position: center center;
}


.bg-sorteo{
    background: #FBEB82 !important;
}

.wrap-down{
    background-color: #fff5ed;
}

.w-40{
    width: 40%;
}

.w-75{
    width: 75%;
}

.bdl-2{
    border: solid 2px #81152a !important;
    font-weight: 600;
}

@media (max-width: 768px){
.btn-clarel-mv{
        font-size: 14px !important;
    }
}

@media (min-width: 768px){

    html{
        font-size: 16px;
    }

}

@media (max-width: 1200px){
    .display-3{
        font-size:46px !important;
    }
    
}

@media (min-width: 992px){

    .bg-banner-principal{
        max-height: 750px;
    }
    
}