::-webkit-scrollbar{
    width:10px;
    height:10px;
}
::-webkit-scrollbar-track{
    background: var(--color-oscuro);
}
::-webkit-scrollbar-thumb{
    background:#d4a713;
    border-radius:20px;
}
::-webkit-scrollbar-thumb:hover{
    background:#b89110;
}

*{
    margin: 0px;
    padding: 0px;
    text-decoration: none;
    font-family:"Montserrat", sans-serif;
}
.body{
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-content: start;
}
.main{
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-content: start;
}
:root{
    /* Tamaños | Inicio */
    --ancho-secciones-encabezados: calc(100% - clamp(40px, 10vw, 100px)) ;
    --ancho-secciones-genericos: calc(100% - clamp(40px, 10vw, 100px)) ;
    /* Tamaños | Final */

    /* Colores | Inicio */
    --color-amarillo-prinipal: #f5c400;
    --color-oscuro-principal: #111111;
    --color-azulado-principal: #e7e4e4;
    /* Colores | Final */

    /* Paddings, margins y gaps | Inicio */
    --padding-botones-genericos: clamp(5px, 0.3vw, 8px) clamp(11px, 1.3vw, 16px);
    --padding-botones-encabezado: clamp(10px, 0.6vw, 16px) clamp(22px, 2.6vw, 32px);
    --padding-secciones-encabezados: clamp(40px, 10vw, 100px) clamp(20px, 5vw, 50px);
    --padding-secciones-genericos: clamp(20px, 5vw, 50px);
    --padding-tarjetas-genericos: clamp(10px, 1.25vw, 15px);

    --gap-secciones-genericos: clamp(15px, 2vw, 25px);
    --gap-catalogos-genericos: clamp(15px, 1.5vw, 20px);
    /* Paddings, margins y gaps | Final */

    /* Textos | Inicio */
    --h1-secciones-genericos: clamp(35px, 5vw, 45px);
    --parrafo-genericos: clamp(13px, 1.5vw, 16px);
    --h2-secciones-genericos: clamp(25px, 3vw, 35px);
    --parrafo-secciones-genericos: clamp(18px, 1.5vw, 25px);
    --h3-tarjetas-secciones-genericos: clamp(18px, 1.5vw, 20px);
    --parrafo-tarjetas-genericos: clamp(15px, 1vw, 17px);
    /* Textos | Final */
}





/* HEADER | INICIO */
.header{
    width: 100%;
    z-index: 5;
    backdrop-filter: blur(14px);
    background:rgba(15,15,15,.95);
    border-bottom: 1px solid rgba(255,255,255,.08);
    transition: var(--transicion);
    border-bottom: var(--color-amarillo-prinipal) 4px solid;
    display: flex;
    justify-content: end;
}
.header-activo{
    position: fixed;
    top: 0px;
    left: 0px;
}



/* Contenedores | Inicio */
.contenedor-menu-header{
    display: flex;
    justify-content: end;
    align-items:center;
    width: calc(100% - clamp(20px, 2.5vw, 30px));
    padding: clamp(10px, 1.25vw, 15px);
}
.contenedor-menu-header ul{
    display: flex;
    list-style:none;
    gap: 2rem;
    align-items:center;
}
.contenedor-menu-header li{
    position:relative;
}
.contenedor-menu-header a{
    font-weight:600;
    color:#ffffff;
    position:relative;
    font-size: 15px;
    transition:var(--transicion);
}
.contenedor-menu-header a:hover{
    color:var(--color-principal);
}
.contenedor-menu-header a:hover::after{
    width:100%;
}
/* Contenedores | Final */



/* Tarjetas | Inicio */
.tarjeta-cuenta-regresiva-header{
    background: var(--color-amarillo-prinipal);
    color: var(--color-oscuro-principal);
    padding: clamp(5px, 0.3vw, 8px) clamp(10px, 1.5vw, 15px);
    gap: 5px;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}
.tarjeta-cuenta-regresiva-header strong{
    font-size: clamp(10px, 1.5vw, 15px);
    font-weight: 800;
}
.tarjeta-cuenta-regresiva-header small{
    font-size: clamp(10px, 1.5vw, 15px);
    font-weight: 600;
}
/* Tarjetas | Final */



/* Botones | Inicio */
.boton-destacado-header{
    background:var(--color-amarillo-prinipal);
    color: var(--color-oscuro-principal);
    padding: var(--padding-botones-genericos) !important;
    border-radius: 30px;
    font-weight: 800;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    /*animation: botonparpadeo 3s linear infinite;*/
}
.boton-destacado-header a{
    color: var(--color-oscuro-principal) !important;
}
.boton-menu {
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: transparent;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}
.boton-menu span {
    width: 25px;
    height: 3px;
    background-color: #ffffff;
    border-radius: 5px;
    transition: all 0.3s ease;
}
.boton-menu.activo span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.boton-menu.activo span:nth-child(2) {
    opacity: 0;
}
.boton-menu.activo span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}
.nav-activo{
    display: flex !important;
}
/* Botones | Final */



/* Imágenes | Inicio*/
.imagen-logo-header{
    width: auto;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    object-fit: cover;
    cursor: pointer;
}
/* Imágenes | Final*/



/* Textos | Inicio */
.parrafo-cuenta-regresiva-header{
    color: #ffffff;
    font-weight: 600;
}
/* Textos | Final */



/* Responsivo | Inicio */
@media screen and (min-width: 0px) and (max-width: 700px) {
    .header{
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        align-items: center;
        justify-content: space-between;
    }



    /* Contenedores | Inicio */
    .contenedor-menu-header{
        display: none;
    }
    .contenedor-menu-header ul{
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        width: 100%;
        padding-top: 20px;
        padding-bottom: 10px;
    }
    .contenedor-menu-header li{
        display: flex;
        flex-wrap: wrap;
        width: auto;
        text-align: center;
        justify-content: center;
        padding: 0px 25px;
    }
    /* Contenedores | Final */



    /* Botones | Inicio */
    .boton-menu{
        display: flex;
    }
    /* Botones | Final */



    /* Imágenes | Inicio*/
    .imagen-logo-header{
        width: 150px;
        height: auto;
        position: relative;
    }
    /* Imágenes | Final*/
}
/* Responsivo | Final */

/* HEADER | FINAL */





/* FOOTER | FINAL */
.footer{
    width: 100%;
    display: flex;
    background-color: var(--color-oscuro-principal);
    padding: clamp(18px, 2vw, 25px);
}
/* FOOTER | FINAL */