*,
*::after,
*::before{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.avatar {
    width: 80px;
}
 
.logo {
    width: 200px;
}

.imagen{
    height: 500px;
}

.titulo {
    font-size: 25px;
}

.subtitulo {
    font-size: 22px;
}


body{
    
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    display: flex;
    justify-content: center;
    
    
}

.grid {
width: 100%;
max-width: 1900px;
margin: 0;
padding: 0;
min-height: 90vh;
gap: 25px;


display: grid;
grid-template-columns:1, 1fr;
grid-template-rows: minmax(70px, auto) auto auto ;

.header{
    grid-column: 1/ -1;
}


.contenescudos{
    grid-column: 1/ -1;
}


.footer{
    grid-column: 1/ -1;
}


}



.header{
    z-index: 1;
     display: flex;
     justify-content: space-between;
     background:#64b4d6;

    .contenedormenu {
    width: 100%;
    
     display: flex;
     justify-content: center;
     padding: 5px;

     
}


    .logo{
        margin: 0 40px;
        padding: 5px;
    }
     .menu {display: inline-block;
                padding: 5px 0px;
                height: 50px;
                margin: 0 30px;
                    
                a { color: #f2f2f2;
                    display: inline-block;
                    text-decoration: none;
                    margin-left: 10px;
                    

                    background: #fa6400;
                    padding: 9px 9px;
                
                    border-radius: 7px;
                    cursor: pointer;
                    transition: 0.3s ease-in all;
                    &:hover {
                        background: #00b4ff;
                        transform: scale(1.1);
                            }
                    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
                    }

                    .colegios {
                    background: #af5df3;
                    }
            }

}


.contenescudos {
    .escudos{
    height: 120px;
}

    
   width: 90%;
   

   margin: auto;
    display: grid;
    grid-template-columns: repeat(6, auto);
    grid-template-rows:  60px 200px 200px 200px ;
    gap: 20px;
    text-align: center;

.titleuno{
    grid-column: 1/-1;
}
    

                           

                          
    .imagen{
     margin: auto;
     margin: auto;
    }

    .titulo{
        color: #8e8d8d;
        font-size: 35px;
        text-align: center;
    }

/* Contenedor principal */

.boton-contenedor{  
  position: relative;
  display: inline-block;
  margin: 20px;
   display: flex;
    justify-content: center;
   margin: auto;
    
}

/* Botón principal */

.boton-principal {
  border: none;
  border-radius: 10px;
  cursor: pointer;
  }



.boton-principal img {
  object-fit: contain;
  display: block;



  
}


/* Menú desplegable (oculto por defecto) */
.submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 1px;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

/* Botones del submenu */
.submenu button  {
  width: 110px;
  background: #00b4ff;
   border: none;
  padding: 4px auto;
  border-radius: 3px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  transition: background 0.2s ease;
}

a {
    text-decoration: none;
    color: aliceblue;
    font-size: 16px;
}

.submenu button:hover {
  background: #ee6323;
}

/* Mostrar el submenu al pasar el puntero */
.boton-contenedor:hover .submenu {
  opacity: 1;
  pointer-events: auto;
  transition: background 0.2s ease;
}


        }
    

.footer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr auto;
    text-align: center;
    justify-content: center;
    

    grid-template-areas: 'logofooter menufooter infofooter '
                          'derechos derechos derechos';                
     .logofooter{
                grid-area: logofooter ;
            }

     .menufooter{
                grid-area: menufooter ;
            }

    .infofooter{
                grid-area: infofooter ;
            }

            
    .derechos{
                grid-area: derechos ;
            }


            .caja {


                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                height: 250px;
                width: 100%;


            .subtitulo{
                color: #e1e6e6;
                margin: 25px;
            }

            h3{
                color: #e1e6e6;
                font-size: 15px;
            }

                 ul {
        list-style: none;
        line-height: 30px;
    }

    a {  
      color: #e1e6e6;
        margin: 3px;
        text-decoration: none;
        margin: auto;
        font-size: 17px;
         cursor: pointer;
                    transition: 0.3s ease-in all;
                    &:hover {
                     border: solid  1px;
                      border-radius: 6px;
                      padding: 3px;
                            }
                           
    }
            }

            .imgasisto{
                width: 200px;
                padding: 20px;
            }

            .logofooter {
                background: #64b4d6;
            }

            .menufooter {
                background: #348fb6;
            }

             .infofooter {
                background: #1e85b1;
            }

             .derechos {
                background: #075f85;
                color: #e1e6e6;
                font-size: 14px;
                padding: 8px;
            }
            
    }        

/*°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°*/


.header{

            @media screen and (max-width: 1000px) {
            & { 
                


                flex-direction: column;
                text-align: center;

                .menu{ 
                    margin-bottom: 25px;
                    font-size: 16px;
                    
                    }

                .logo{
                    margin: auto;
                    width: 200px ;
                    margin-bottom: 20px;
                    margin-top: 25px;

                }
            }
           }


           @media screen and (max-width: 685px) {
            & {
                flex-direction: column;
                text-align: center;

                .menu{ 
                    margin-bottom: 25px;
                    font-size: 12px;
                    
                    .colegios{font-size: 13px;
                    padding: 6px;}
                    }

                .logo{
                    margin: auto;
                    width: 200px ;
                    margin-bottom: 20px;
                    margin-top: 25px;

                }
            }
           }
    
            

           @media screen and (max-width: 560px) {


            & {
              

                .menu{
                    grid-row: 1/-1;
                }
                
               

                .menu{ 
                                
                    gap: 5px;
                    font-size: 15px;
                    
                    .colegios{font-size: 12px;
                    padding: 6px;}

                    a{
                        gap: 20px;
                        margin-bottom: 10px;
                    }
                    }

                .logo{
                    margin: auto;
                    width: 200px ;
                    margin-bottom: 20px;
                    margin-top: 25px;

                }
            }
           }


            }


.contenescudos{


    
            @media screen and (max-width: 1000px) {
            & {

                
                    display: grid;
                    grid-template-columns: repeat(4, auto);
                    grid-template-rows:  40px 150px 150px 150px 150px 150px ;
                    gap: 20px;
                    text-align: center;

               
                    .titleuno{
                     grid-column: 1/-1;
                }                          

                }
            }





             @media screen and (max-width: 700px) {
            & {

                
                    display: grid;
                    grid-template-columns: repeat(3, auto);
                    grid-template-rows:  40px 150px 150px 150px 150px 150px 150px ;
                    gap: 20px;
                    text-align: center;
                
                    .titleuno{
                     grid-column: 1/-1;
                     font-size: 17px;

                     
                     }
                     }
                       
                                                


                }



                  @media screen and (max-width: 560px) {
            & {

                
                    display: grid;
                    grid-template-columns: repeat(2, auto);
                    grid-template-rows:  40px 150px 150px 150px 150px 150px 150px 150px ;
                    gap: 20px;
                    text-align: center;
                
                    .titleuno{
                     grid-column: 1/-1;
                     font-size: 17px;

                     
                     }
                     }
                       
                                                


                }
            }