@import url('https://fonts.googleapis.com/css2?family=Quintessential&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kings&display=swap');


:root{
    --fuente1:"Quintessential", serif;
    --fuente2:"Kings", cursive;

    --bgDark:#2C0901;
    --lightOrange:#F5AB13;
    --darkOrange:#F47D08;
}

@keyframes pendulo{
    0%{
        transform: rotate(-5deg);
    }
    50%{

        transform: rotate(5deg);
    }
    100%{
        transform: rotate(-5deg);
    }
}

@keyframes upanddown{
    0%{
        transform: translateY(-1rem) translateX(-1rem);
    }
    50%{
        transform: translateY(1rem) translateX(1rem);
    }
    75%{
        transform: translateY(-1rem) translateX(1rem);
    }
    100%{
        transform: translateY(-1rem) translateX(-1rem);
    }
}

@keyframes leftandright{
    0%{
        transform: translateX(0);
    }
    50%{
        transform: translateX(.5rem);
    }
    100%{
        transform: translateX(0);
    }
}


/*Bloquear Documento Empieza*/
.noScrollHTML{
    overflow-y: auto;
}

.noScrollHTML.lock{
    overflow: hidden;
}
/*Bloquear Documento Termina*/


/*Banner Halloween Empieza*/
.promoHalloween{
    position: relative;
    min-height: 40vh;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, var(--darkOrange), var(--lightOrange));
    overflow: hidden;
    cursor: default;
}
.promoHalloween svg{
    width: 5rem;
    fill: var(--bgDark);
    z-index: 1;
    filter: drop-shadow(0 0 15px #ffee00) opacity(50%) blur(2px);
}
.promoHalloween .calabazaz{
    position: absolute;
    top: 0;
    left: .5rem;
    animation: 5s pendulo infinite ease-in-out;
    height: 8rem;
    fill: #000;
}
.promoHalloween .ghost{
    width: calc(100% - 70%);
    position: absolute;
    top: 0;
    animation: 15s upanddown infinite ease-in-out;
    left:2%;
}
.promoHalloween .candle{
    position: absolute;
    bottom:0;
    right: 0;
}


.promoHalloween .luna{
    position: absolute;
    top: 1rem;
    right: 1rem;
    height: 5rem;
    animation: 3s leftandright infinite ease-in-out;
}  

.promoHalloween h1{
    font-family: var(--fuente1);
    font-size: clamp(2.5rem, 4vw, 4rem);
    color: #fff;
    z-index: 5;
    text-shadow: -4px 3px 0 #751f00;
}
.promoHalloween .contenedor{
    padding: .5rem;
    border-radius: 1rem;
    box-shadow: 0 8px 25px rgba(61, 20, 0, 0.842);
    background: rgba(44, 9, 1, 0.5);
    backdrop-filter: blur(13px);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    z-index: 5;
    border: 1px solid var(--darkOrange);
    position: relative;
}
.promoHalloween .contenedor h2{
    color: rgb(255, 244, 148);
    font-family: var(--fuente1);
    font-size: clamp(2rem, 3vw, 2.5rem);
}
.promoHalloween .contenedor h3{
    font-family: var(--fuente1);
    color: #ffffff;
    font-size: clamp(.8rem, 2vw, 1.2rem);
}
.promoHalloween .contenedor .imgCont{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-block:.5rem ;
}

.promoHalloween .contenedor .imgCont img{
    width: calc(100% - 85%);
    border-radius: 50%;
    box-shadow: 0 8px 15px rgba(44, 9, 1, 0.5);
    border: 2px solid var(--lightOrange);
}
@media(max-width:1200px){
    .promoHalloween .contenedor .imgCont img{
        
        width: calc(100% - 70%);
    }

}

.promoHalloween .contenedor a{
    font-size: clamp(.7rem, 2vw, 1rem);
    padding: .5rem 1rem;
    background: #cc00ff;
    color: #ffffff;
    width: max-content;
    margin-block: .5rem;
    font-weight: 900;
    border-radius: 50px;
}

.promoHalloween .contenedor .participar{
    padding: .5rem 1rem;
    border-radius: 50px;
    background: #3a78ff;
    width: max-content;
    cursor: pointer;
    color: #ffffff;
    font-weight: 600;
}
.promoHalloween .contenedor .participar:hover{
    background: #ffee00;
    color: #000;
}

/*Banner Halloween Termina*/




/*Seccion Bases Empieza*/
.basses{
    position: fixed;
    top:0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-height: 100dvh;
    z-index: 101;
    background:url(/images/resources/halloween/bannerCookie.jpg) no-repeat;
    background-position: center;
    background-size: cover;
    opacity: 0;
    padding: 2rem 5%;
    overflow-y:auto;
    cursor: default;
    pointer-events: none;
    visibility: hidden;
    scale: 0;
}
.basses.show{
    left: 0;
    opacity: 1;
    pointer-events: all;
    visibility: visible;
    scale: unset;
}

.basses h3{
    font-size: clamp(2rem, 3vw, 3.2rem);
    font-weight: 900;
    color: #ffffff;
    text-shadow: 2px 2px 3px #000;
    box-shadow: 0 5px 8px rgba(0,0,0, .580);
    padding: .5rem;
    border-radius: .5rem;
    background:rgba(63, 63, 63, 0.418);
    width: max-content;
    backdrop-filter: blur(5px);
    border: 2px solid rgba(219, 219, 219, 0.582);
}


@media(max-width:1200px){
    .basses{
        padding: 2rem 10% !important;
    }
}
.basses svg{
    z-index: 2;
    width: 5rem;
    fill: #555;
}
@media(max-width:1200px){
  .basses svg{
    width: 2.5rem;
  }  
}

.basses .booh{
    position: fixed;
    bottom: 3.5rem;
    right: 0;

}
.basses .cornerWeb{
    position: fixed;
    top:0;
    right: 0;
}
.basses .webFull{
    position: fixed;
    left: 0;
    bottom: 50%;
}
.basses .closeCont{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: .2rem .5rem;
    background: #fff;
    display: flex;
    z-index: 5;
    border-top: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .2rem;
}

.basses .closeCont .outBtn{
    padding: .5rem;
    cursor: pointer;
    font-weight: 600;
    text-align: center;
    color: #777;
    margin-left: auto;
}
.basses .closeCont .outBtn i{
    font-size: 2rem;
}


.basses .closeCont a{
    background: #06174e;
    padding: .3rem 1rem;
    border-radius: 50px;
    color: #fff;
    font-weight: 800;
}
.basses .closeCont a:hover{
    background: #001483;
}

.basses .cuerpo{
    padding: .5rem;
    border-radius: .8rem;
    background: #fff;
    box-shadow: 0 8px 15px rgba(0,0,0, .780);
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-bottom: 3rem;
}
.basses .cuerpo .divi{
    border-radius: .5rem;
}
.basses .cuerpo .divi h1{
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    font-weight: 800;
    color: #3a404d;
}
.basses .cuerpo .divi p{
    font-size: clamp(1rem, 2vw, 1.3rem);
    color: #444;
    font-weight: 400;
}




/*Seccion Bases Termina*/