*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* border: 1px solid red; */
    font-family: Arial, Helvetica, sans-serif;
    /* transition: all .5s ease-in-out; */
}
html{
    scroll-behavior: smooth;
}
:root{
        --color1: #042799;
        --color2: #9F128E;
        --color3: #E43272;
        --color4: #FF7457;
        --color5: #FFB84D;
        --color6: #F9F871;
        --color7: #F4ECFF;
        --color8: #484554;

}
body{
    padding: 1px;
    position: relative;
    background-color:white;
}

.nav{
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    position: fixed;
    z-index: 99999999;
    border-bottom: 1px solid var(--color1);
    background-color: white;
    backdrop-filter: blur(9px);
    top: 0PX;
}
.section_containerLH{
    width: 15%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: 2px solid blue; */
    padding: 4px;
    gap: 10px;
    position: relative;
    left: 30px;
    /* background-color: red; */
}
.ham{
    width: 30px;
    height: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    /* background-color: blue; */
    cursor: pointer;
    transition: all .5s ease;
    /* border: 2px solid red; */
}
.tache{
    width: 30px;
    height: 15px;
    display: flex;
    flex-direction: column;
    /* position: absolute; */
    justify-content: space-between;
    cursor: pointer;
    transition: all .4s ease;
    display: none;
    /* border: 2px solid red; */


}
.tache span{
    width: 100%;
    height: 3px;
    background-color: var(--color1);
    transition: all .5s ease;

}
.tache span:nth-child(1){
    transform: rotate(45deg) translateY(3px);
    transform-origin: center;
    transition: .4s ease;
    /* border: 2px solid red; */


}
.tache span:nth-child(2){
    transform: rotate(-45deg) translateY(-2px);
    transform-origin:center ;
    transition: .4s ease;

}


.vertache{
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999999999;
    transition:all .4s ease;
    transform-origin: center;

}
.ocultar{
    display: none;
    /* background-color: red; */
}

.liMenu{
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--color1);

}
.logoB{
    display: flex;
    justify-content: center;
    text-decoration: none;
    text-align: center;
    /* color: var(--color1); */

}
.formula{
    color: black;
}
.logo_section{
    width: 45%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* overflow: hidden;  */
       /* border: 2px solid rgb(255, 116, 47); */
       font-size: 20%;
       cursor: pointer;
       /* background-color: #042799; */
       text-align: center;

}
.img_logo{
    max-width: 56%;
    position: relative;
    right: 5px;
    background: none;

}
.slogan_container{
    width: 40%;
    height: 90%;
    font-size: 1.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color1);
    opacity: .5;
    /* border: 2px solid red; */
}
.iconos_container{
    width: 40%;
    height: 90%;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-evenly;
    align-items: center;
}
.icono{
    width: 40px;
    height: 40px;

    /* border: 1px solid red; */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius:50% ;
    transition: all .3s ease-in-out;
}
/*
ontenedor de telefonos contenedor de telefonos contenedor de telefonos  contenedor de telefo nos contenedor de telefonos
*/


.telefonos_container{
    padding: 5px 15px;
    position: absolute;
    top: 60px;
    background-color: white;
    display: none;
    transition: all .3s;
    background-color: var(--color1);
    border-radius: 10px;
    
    
}
.telefonos_container:hover{
    display: block;
}
.telefonos_container p{
    color: var(--color7);
    text-align: center  ;
}
.telefonos_container ul {
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    /* background-color: var(--color1); */
    color: var(--color7);
    box-shadow: 0px 9px 19px 1px black;
    border-radius: 10px;

    text-align: center;
}

.telefonos_container ul{
    list-style: none;
}
.telefonos_container p{
    font-size: 1.3rem;
    padding: 9px 3px;
}

/*
contenedor de correos contenedor de correos contenedor de correos contenedor de correo
*/


.correos_container{
    width: 27%;
   padding: 20px;
    background-color: var(--color1);
    position: absolute;
    top: 60px;
    right: 15px;
    box-shadow: 4px 3px 19px 1px black;
    border-radius: 20px;
    display: none;
    
    

}
.correos_container .cta_correo{
    color: var(--color7);
    text-align: center;
    display: block;
    /* background-color: red; */
    transition: all .5s ease;
    margin: 20px auto;
    
}
@keyframes entrada{
    0%{
        transform: scale(0);
    }
    100%{
        transform: scale(1);
    }
}


.icono:hover{
    
    background-color: #6982d68a;
}
.fono{
    width: 25px;
    
    cursor: pointer;
    border-radius: 50%;
}


.buttons{
    width: 20%;
    height: 100vh;
    position: relative;
    top: 70px;
    /* left: -100%; */
    /* border: 2px solid red; */
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    transition: all 1s ease;
    padding-left: 20px;
    /* background-color: blue; */
    display: none;
    /* background-color: #f4ecff; */
    background-color: white;
    /* backdrop-filter: blur(20px); */
    /* backdrop-filter: blur(100px); */
}
.listaDeOpciones{
    width: 50%;
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    /* border: 2px solid red; */



    /* background-color: aquamarine */




}


.opcion{
    width: 100%;
    text-align:justify ;
    color: var(--color1);
    font-size: 1rem;
    cursor: pointer;
    font-weight: 900;
    text-decoration: none;
    text-align: center;
    padding: 10px;
    /* text-shadow: 3px 2px 6px black; */
    /* background-image: url("./assets/fondoMenu.svg"); */

}
.opcion:hover{
    border-bottom: 4px double var(--color1);
}
.menuActive{
    display: flex;
    left: 0px;
    transition: all 1s ease-in-out;
    border-right: 1px solid rgba(0, 0, 0, 0.452);
    animation: entradaMenu .3s ease;
    position: absolute;
    /* background-image: url("assets/fondoMenu.svg"); */





}






/* .s_container{
    width: 500%;
    height: 100%;
    display: flex;
    position: absolute;
    /* background-color: red; 

.texto{
    width: 400px;
    height: 70px;
    text-align: justify;
    text-size-adjust: 20;
}
.itemCarrera{
    width: 90%;
    height: 80%;
    /* border: 2px solid var(--color3); 
}
.oz{
    display: flex;
    z-index: 9999;
    width: 300px;
    height: 300px;
} */




.closse{
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 999;
    cursor: pointer;
    background-color: red;
    color: whitesmoke;
    font-weight: 800;
    /* padding: 5px; */
    display: none;
}
@keyframes entradaMenu {
    0%{
        transform: translateX(-100%);
    }
    100%{
        transform: translateX(0);
    }
    
}
/*       end menu      end menu      end menu end menu end menu */
/*       end menu      end menu      end menu end menu end menu */

/*       end menu      end menu      end menu end menu end menu */

/*       end menu      end menu      end menu end menu end menu */

/*       end menu      end menu      end menu end menu end menu */



/* cursos container */

.cursos_container{
    width: 100%;
    height: 80vh;
    
    margin-top: 90px;
}
.cursos_container h1{
    text-align: center;
    font-size: 4rem;
    color: #484554;
    opacity: .7;
}
.cursos_container h2{
    text-align: center;
}
.grid_cursos{
    width: 80%;
    height: 50%;
    margin: 10px auto;
    /* border: 2px solid red; */
    display: grid;
    align-items: center;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 30px;

}
.curso{
    width: 100%;
    height: 50px;
    background-color: var(--color2);
    color: var(--color7);
    text-align: center;
    line-height: 50px;
    cursor: pointer;
    transition: all .2  s ease;
    border-radius: 10px;
}
.curso:hover{
    background-color: var(--color3);
    box-shadow: 0px 4px 12px 1px rgba(0, 0, 0, 0.508);

}

/*

footer

*/

.footer{
    width: 100%;
    height: 60vh;
    background-image: linear-gradient(-45deg, blue, rgb(3, 3, 77));
    position: absolute;
    bottom: px;
    z-index: 9;
    position: relative;
    margin-top: 50px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    overflow: hidden;
}
.patron_container img{
    width: 100%;
    filter: drop-shadow(-5px 5px 12px rgba(0, 0, 0, 0.555));
    position: absolute;
    top: 0px;
    left: 0;
}
.item_footer{
    width: 25%;
    height: 90%;
    /* border: 2px solid red; */
    z-index: 999999999;
    /* backdrop-filter: blur(3px); */
    color: whitesmoke;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    /* border: 2px solid red ; */
    /* box-shadow: 3px 4px 9px 0px var(--color8);
    border-radius: 50px; */
}
.footer .item_footer:nth-child(2){
    justify-content: center;
    /* background-color: red; */
}
.foot_cta{
    color: whitesmoke;
}
.icon_redes_container{
    width: 100%;
    height: 70%;
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    align-items: flex-start;
    /* background-color: #484554; */
}
.icono_red{
    width: 50px;
    /* background-color: red; */
}
.cta_red{
    color: var(--color7);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}


/* footer */



/* lap lap lap lap lap lapa lap lap lap lap lap  */

@media screen and (max-width: 1550px) and (min-width: 1262px){
 
    .img_logo{
        width: 100%;
    }
    .slogan_container{
        font-size: .6rem;
        /* background-color: red; */
        
    }
    .buttons{
        width: 30%;
    }
    .listaDeOpciones{
        text-align: center;
        /* background-color: red; */

    }
    .correos_container{
        width: 40%;
    }

}

@media  (max-width: 1262px) and (min-width: 767px){

 
    .slogan_container h2{
        /* background-color: red; */
        font-size: 1.3rem;
        
    }
    .grid_cursos{
        grid-template-columns: 1fr 1fr;
    }
    .curso{
        height: 100px;
        /* background-color: red; */
    }


    


}
@media screen and (max-width: 767px){
   
    body{
        padding: 0;
        width: 100%;
        /* overflow: hidden; */
    }
.nav{
    /* background-color: red; */
    padding-top: 5px;
    position: fixed;
    /* width: 100%; */
}

.buttons{
    width: 70%;
}
.section_containerLH{
    width: 30%;
    border: 2px solid ridge;
}
.ham{
    width: 40px;
}
.logo_section{
    width: 110%;
    /* background-color: blue; */
}
.img_logo{
    
    /* background-color: red; */
}

.slogan_container{
    display: none;
}
.telefonos_container{
    width: 80%;
    font-size: 15px;
    right: 40px;
    

}
.correos_container{
   
    width: 80%;
    font-size: 14px;
}
/* navegador */

.grid_cursos{
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
    gap: 10px;
    
    padding: 5px;

}
.curso{
    width: 100%;
    height: 90%;
    /* border: 2px solid red; */
    font-size: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    
}








/* footer section */
.footer{
    margin-top: 80px;
    width: 100%;
    height: 100vh;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
    /* z-index: 999999999999; */

}
.item_footer{
    /* border:2px solid red; */
    width: 100%;
    
}

.icon_redes_container{
    width: 100%;
    height: 30vh;
    align-items: stretch;
}
.icon_redes_container a:nth-child(3){
    /* background-color: red; */
    
    margin-left: -35px;
}
.minimapa{
    padding: 10px;
    width: 90%;
}
.minimapa iframe{
    width: 100%;
    margin: 10px auto;
    
}
.minimapa h2{
    font-size: 1rem;
    margin: 5px auto;
}
.cta_aviso{
    display: none;
}

}