/* ---------------------------------------- */
/* || SECCION DE IMPORTACION DE ELEMENTOS */
/* */
@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
@import url('./styles-index/navbar.css');



/* ---------------------------------------- */
/* || SECCION DE ESTILOS GENERALES */
/* */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Oswald', sans-serif;
}

body {
    background-color: #FEFEFE;
    width: 80%;
    margin: 10px auto;

    position: relative;
}

:root {
    /* Color Theme Swatches in Hex */
    --fk_a: #F0F01B;
    --fk_v: #46DB2B;
    --fk_az: #80EBC8;
    --fk_r: #F56601;
    --fk_ros: #EB475B;
}



/* ---------------------------------------- */
/* || SECCION DE LA BARRA DE NAVEGACIÓN */
/* 
    * IMAGEN DEL LOGO
    * BARRA DE NAVEGACION
*/
/* || LOGOTIPO DE ADELAMOTA EN LA PARTE SUPERIOR */

/* || BARRA DE NAVEGACION */
.icono {
    display: none;
    cursor: pointer;
    color: #FEFEFE;
    font-size: 2rem;
}

/* ---------------------------------------- */
/* || SECCION DE PROMOS */
/* */
.main {
    margin-top: 4vh;
    width: 100%;
}

.slide-contenedor {
    max-width: 100%;
    max-height: 750px;
    width: 100%;
    height: auto;

    background-color: antiquewhite;
    position: relative;
    margin: auto;
    overflow: hidden;
}

.miSlider {
    display: none;
    transition: 2s;
    max-height: 100vh;
}


.miSlider img {
    width: 100%;
    max-height: 100%;
    object-fit: cover;
    vertical-align: middle;
    transition: 2s;
}

.direcciones {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10vh;
}

.direcciones i {
    color: #fafafa75;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: 0.3s ease-in-out;
}

.direcciones i:hover {
    color: var(--fk_az);
    opacity: 0.6;
}

.barras {
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.barra {
    cursor: pointer;
    height: 0.7vh;
    width: 4vw;
    margin: 0 2px;
    background-color: aliceblue;
    display: inline-block;
    margin-left: 2vw;
}

.active {
    background-color: var(--fk_ros);
}

.fade {
    animation-name: fade;
    animation-duration: 1s;
}

@keyframes fade {
    from {
        opacity: 0.4;
    }

    to {
        opacity: 1;
    }
}



/* ---------------------------------------- */
/* || SECCION INVITACIÓN A VER EL MENÚ */
/* *** */
.menu-sect {
    width: 100%;
    height: 350px;
    margin-top: 2rem;
    display: flex;
}

.menu-sect__block,
.menu-sect__img {
    flex-grow: 1;
}

.menu-sect__img {
    height: 100%;
    display: flex;
    justify-content: center;
}

.menu-sect__img img {
    max-height: 100%;
    margin: 0 auto;
    transform: rotate(0deg);
    transition: all 0.4s ease-in-out;
}

.menu-sect__block {
    width: 20%;
    flex-grow: 2;
    background-color: rgb(240, 240, 240);
    border-bottom-left-radius: 8rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.menu-sect__blockcontainer {
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
}

.menu-sect__block h2,
p {
    width: 100%;
    color: black;
}

.menu-sect__block h2 {
    color: var(--fk_r);
    font-size: clamp(1.5vw, 2.5vw, 3.5vw);
}

.menu-sect__block p {
    font-size: clamp(1vw, 1.5vw, 2.5vw);
}

.button--menu {
    padding: 20px 20px 20px 20px;
    font-size: clamp(1.5rem, 2rem, 4rem);
    color: #FEFEFE;
    background-color: var(--fk_r);
    border-radius: 2rem;
    cursor: pointer;
    transition: 0.5s ease-in-out;
}

.button--menu:hover {
    background-color: var(--fk_ros);
    border-radius: 2.5rem;

}

.menu-sect__block:hover~.menu-sect__img img {
    transform: rotate(-15deg);
}

.button--menu a {
    text-decoration: none;
    color: #fafafa;
}



/* ---------------------------------------- */
/* || SECCION DE contnt */
/* *** */

.info {
    padding: 5vh 5vh;

    margin-top: 5vh;

    background-color: rgb(241, 241, 241);
    /* height: 70vh; */
    max-height: 80vh;
    min-height: max-content;
    display: flex;

    flex-wrap: wrap;

    justify-content: center;
    align-items: center;
}

.info h2 {
    /* font-size: 4rem; */
    color: #F37335;
    font-size: clamp(3vh, 3.2vh, 3.5vh);

    flex-basis: 1;


}

.info--content p {
    font-size: clamp(1.5vh, 2vh, 2.5vh);
    margin: 2vh 2vh;
}

.info--content p span {
    color: #EB475B;
}

.info--content ul {
    margin-top: 2vh;
    margin-bottom: 2vh;


    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    flex-basis: 60%;
}

.info--content ul li {

    flex-basis: 80%;
    font-size: clamp(1.5vh, 2vh, 2.5vh);
}

.info--menu__btn {
    width: 100%;
    flex-basis: 1;

    display: flex;
    justify-content: center;
}

.btn-info {

    margin-left: 0;
}


/* ---------------------------------------- */
/* || SECCION DE REDES SOCIALES */
/* *** */
.redes-sociales {
    height: 200px;
    margin-top: 5vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2vh;
}

.redes-sociales>p {
    font-size: clamp(1vw, 2vw, 3vw);
    flex-basis: 100%;
    text-align: center;
}

.redes-sociales img {
    max-height: 30%;
}



/* ---------------------------------------- */
/* || FOOTER SECTIION */
/* *** */
footer {
    height: 7vh;
    background-color: var(--fk_a);
    margin-top: 10vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

footer p {
    width: auto;
    font-size: 2vh;
    color: #ffffff;
}



/* ---------------------------------------- */
/* || SECCION DEL RESONSIVE - MEDIA QUERIES */
/* *** */

@media screen and (max-width: 990px) {
    #navmenu-principal {
        display: none;
    }

    .menu__lista {
        /* display: none; */
        position: fixed;
        top: 80px;

        height: 100vh;
        width: 80vw;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;

        transition: all 0.5s ease-in-out;

        /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #F37335, #FDC830);
        /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to right, #F37335, #FDC830);
        /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    }

    .menu__lista li {
        list-style: none;
        color: #FEFEFE;
        font-size: 10vh;
        margin-left: 3ch;
        margin-right: 3ch;

        margin: auto;


        flex-basis: 1;

    }

    .menu__lista li a {
        list-style: none;
        color: #FEFEFE;
        font-size: 6vh;
        margin-left: 3ch;
        margin-right: 3ch;

        margin: auto;


        flex-basis: 1;
    }

    .menu__logo {
        max-height: 150px;
        display: flex;
        justify-content: center;
    }

    .icono {
        display: flex;


        cursor: pointer;
        color: #FEFEFE;
        font-size: 2rem;
    }

    .promociones>figure {
        width: 100%;
        height: 300px;
        object-fit: fill;
    }

    .menu-sect {
        width: 100%;
        height: 1000px;
        display: flex;
        flex-direction: column-reverse;
    }

    .menu-sect {
        width: 100%;
        height: 450px;
        margin-top: 2rem;
        display: flex;
    }

    .menu-sect__block {
        width: 100%;
        border-bottom-left-radius: 4rem;
        background-color: #fafafa;
    }

    .menu-sect__img {
        height: 40%;
        display: flex;
        justify-content: center;
    }

    .button--menu {
        margin: 0 auto;
        padding: 10px 10px 10px 10px;
        font-size: clamp(1.5rem, 1.2rem, 2rem);
        color: #FEFEFE;
        background-color: rgb(194, 126, 0);
        border-radius: 1rem;
    }

    .menu-sect__block h2 {
        color: rgb(194, 126, 0);
        font-size: clamp(2vw, 3vw, 3.5vw);
    }

    .menu-sect__block p {
        font-size: clamp(1.5vw, 2.5vw, 3vw);
    }
}