/*Tipo de fuente*/
body{
    font-family: 'Montserrat', sans-serif;
}

header{
    font-family: 'Montserrat', sans-serif;
}

section{
    font-family: 'Montserrat', sans-serif;
}

h1, h2, h3, h4, a{
    font-family: 'Montserrat', sans-serif;
}

/*____________________________________________________________________*/

/*HEADER, BOTONERA. ubicación y colores*/

header{
    display: flex;
}

header {           
    *width: 450%;    /*Tamaño del <a>(link que esta dentro del header)*/
    *background-color: #0bb94e;
}

header nav div{
    display: flex;
    justify-content: flex-end;  /* Centrar horizontalmente */
    align-items: center;        /* Centrar verticalmente */

    padding-top: 20px;
    padding-left: 20px;
    
}

/*nav*/
.boton-REDES{
    display: flex;
    *justify-content: flex-end;
    margin-bottom: 50px;
    
}

.div-REDES{                       /*posicionamiento de logos de redes */
    *background-color: blueviolet;

    display: flex;
    padding: 5px;

    *margin-left:20px;
    
    *margin-top: 50px;
    *margin-right: 0%;
}

section{
    *background-color: #446536;
    background-color: #196F3D;
}

.contenedor-logo-colegio {
    width: 1175px;
}

/*___________________________________________________________________________________________________________*/

/*HEADER, BOTONERA*/

.logoColegio{           /*tamaño de logo colegio*/
    width: 230px;       /*ancho logo*/
    height: 180x;       /*alto logo*/

    margin-left: 50px;

    transition: filter 0.5s ease; /* Añadimos una transición suave para el cambio de color */
}
.logoColegio:hover{
    filter:  invert(25%); /* Cambia el color de la imagen a saturado */
}

.logoRedes{         /*tamaño de logos de redes*/
    width: 55px;     
    *height:70px;
    *display: flex;
    *justify-content: end;

    margin-right: 40px;
    margin-top: 50px;

    transition: filter 0.1s ease; /* Añadimos una transición suave para el cambio de color */
}
.logoRedes:hover{
    filter: saturate(250%); /* Cambia el color de la imagen a saturado */
}

.div-BotonesInfo {          /* Botones Nosotros-El colegio-NIveles */
    text-align: center;
    color: whitesmoke;    
    *padding: 5px;  
}

.listado-Botones {
    display: inline-block;
    list-style: none;
    padding: 0;
    margin: 10px;
}

.button {
    display: inline-block;
    margin: 0 5px;
}

.link-boton{
    color: white;         /*color de fuente*/
    text-decoration: none; /*Linea debajo del link*/

    padding: 15px 20px;
}
.link-boton:hover{
    color: #333;
}

/*____________________________________________________________________________________________________________*/

/*MENU DESPLEGABLE en botonera, PRUEBA*/
nav {
    *background-color: #333;
    
}

.listado-Botones {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.listado-Botones li {
    display: inline-block;
    position: relative;
}

.listado-Botones li a {
    display: block;
    color: white;
    text-decoration: none;
    padding: 15px 20px;
}

.listado-Botones li:hover {
    *background-color: #555;
}

/* Estilos para el submenú */
.submenu {
    display: none;
    position: absolute;
    background-color:  #196F3D;
    width: 200px;
    left: 0;
    top: 100%;
}

.submenu li {
    display: flex;    

}

.listado-Botones li:hover .submenu {
    display: block;
}


/*____________________________________________________________________________________________________________*/

/*IMAGEN NIVEL CORRESPONDIENTE*/

.imagen-nivel{
    display: flex;
    justify-content: center;
    align-items: center;

    margin: auto;
}

.imagen-nivel img{
    height: 530px;
    width: 100%;
}

/*____________________________________________________________________________________________________________*/

/*Texto informativo*/

.div-texto-informativo{
    *background-color: #a0c38e;

    max-width: 70%;
    margin: 0 auto;
}

.div-texto-informativo h1, .div-texto-informativo p{
    display: flex;
    justify-content: center;
    align-items: center;

    text-align: justify;
}

.div-texto-informativo h1, .div-texto-informativo h2{
    color: #446536;
    *color: #196F3D;
}

/*______________________________________________________________________________________________________________*/
/*MODALIDADES*/

.modalidades{
    background-color: #729462;

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

    margin: auto;           /*centra el contenedor div, una vez que se achica el ancho de estev*/

    padding: 40px;
    max-width: 70%;

    border-radius: 10px;
}



/*____________________________________________________________________________________________________________*/
/*JORNADAS*/


.div-modalidad{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    *justify-content: space-around;
} 

.div-modalidad-interno i{
    width: 50%;
    height: 50%;
}


.div-modalidad-interno{
    width: 465px;
    height: 75px;

    margin-left: 75px;
    margin-right: 75px;

    background-color: #89ac78;

    border-radius: 10px;

    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/*____________________________________________________________________________________________________________*/
/*Tituto alumnos*/
.nuestros-alum{
    margin-left: 15%;
}



/*____________________________________________________________________________________________________________*/

/*edicion de linea de separación <hr> */
.linea-separadora {
    *border: none; /* Elimina el borde predeterminado */
    border-top: 5px solid rgb(36, 109, 26); /* Establece un borde superior personalizado */
    margin: 20px 0; /* Agrega un margen para separar la línea de los elementos circundantes */

    border-style: dotted; /* Establece el estilo punteado */

    display: flex;
    justify-content: center;
    align-items: center;

    width: 71%;
    margin: auto;

}

/*____________________________________________________________________________________________________________*/

/*ICONOS MATERIAS*/

.iconos{
    margin-right: 35px;
    }

.texto-materia #texto-tecnologia{
    margin-left: 45px;
}

.iconos i{
    font-size: 100px;   /*tamaño de icono*/
    margin: 20px;
}


.materias{

    display: flex;
    padding-left: 205px;    /*sangria izquierda, para centrar el contenido*/
}

.texto-materia{
    align-items: center;

}

#tecnologia, #artistica{
    align-items: center;
    display: flex;
}

/*_____________________________________________________________________________________________________________________*/
/*BANNER INSCRIPCIÓN*/

.banner-inscripcion{
    background-color: #729462;

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

    margin: auto;           /*centra el contenedor div, una vez que se achica el ancho de estev*/

    padding: 40px;
    max-width: 85%;

    border-radius: 10px;
}

.boton-form{
    text-decoration: none;
    color: #333;
}

/*__________________________________________________________________________________________*/
/*ICONOS INFERIORES*/
.iconos-inferiores{
    display: flex;
    margin: 0 auto;
    justify-content: center;
}

.iconos-inferiores div{
    margin: 20px;
}

.iconos-inferiores div i, .iconos-inferiores div h3{
    display: flex;
    margin: 0 auto;
    justify-content: space-around;
}

.iconos-inferiores div i{
    font-size: 100px;   /*tamaño de icono*/
    margin: 20px;
    *margin-left: 60px;
    justify-content: center;
}



/*_____________________________________________________________________________________________________________________*/

/*Footer*/

footer{
    display: flex;
    justify-content: center;
    padding: 10px;
    background-color: #196F3D;
    color: whitesmoke;
}