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


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

.imagen{
    height: 500px;
}

.titulo {
    font-size: 28px;
}

.parrafo {
    font-size: 17px;
}

.subtitulo {
    font-size: 20px;
}


body{
    
  font-family: 'Roboto', sans-serif;
    font-weight: 500;
    background: #ffffff;
   
   
    
    
}

.grid {
   width: 100%;
    max-width: 1900px;
    margin: 0 auto; /* ✅ centrado automático */
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}


.contenedorprincipal {
    width: 100%;
     justify-content: center;
     padding: 5px;
}

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

    .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;
                    }
            }


        

}




.portada {
     background-image: url('imagenes/fluid4.png');
        background-repeat: no-repeat; 
        
   
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows:auto 1fr ;
    gap: 20px;
    text-align: center;
   
    .imagen{
     margin: auto;
    }

    .titulo{
        color: #8e8d8d;
        
        text-align: center;
    }

}


.somos {
    width: 80%;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    
    gap: 20px;  
    text-align: center;
    
   
    .caja {
        background: #f3f1f1;
        padding: 20px;
        margin: 20px;
        border-radius: 20px;
    }

    .titulo{
        color: #00b4ff;
        margin: 25px 0;
        text-align: center;
    }

    .avatar {
        width: 90px;
        margin: 25px 0;
    }   

    .parrafo {
        margin-bottom: 25px;
        color: #8e8d8d;
        
    }


          
    
}



.perfiles {
    width: 80%;
    margin: auto;
    display: grid;


       grid-template-columns: repeat(3, 400px );


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



    
    gap: 60px;  
    text-align: center;
   
    
    


    .titulo{
        color: #8e8d8d;
        text-align: center;
    }

    .menup {
        margin: 25px auto;

    }

   

    div{        
                        
                     .imagen {
                                transition: 0.3s ease-in all;
                                &:hover {
                                transform: scale(1.05);
                                                }
                                                
                                            }


                    a { 
                    display: flex;
                    justify-content: center;
                    
                    text-decoration: none;
                    color: #f2f2f2;
                    width: 180px;
                    text-decoration: none;
                    margin: auto;
                    

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

}
}


.modulos {
    width: 100%;  
    text-align: center;
    background: #f3f1f1;
    padding: 20px;

    display: grid;
    text-align: center;
    justify-content: center;
    justify-self: center;   
    gap: 20px;  

   

    grid-template-columns: repeat(5, 260px );


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



    .titulo{
      
       
        color: #8e8d8d;
        text-align: center;
        margin: 25px 0;

    .subtitulo {
        color: #f2f2f2;
        margin: 20px 0;
    }
        
            
       
    }

    .cajamod {  display: flex;
        flex-direction: column;
        background: #348fb6;
        border-radius: 100px;
        padding: 25PX;
        align-items: center;
        justify-content: center;
        width: 250px;
        height: 280px;
        margin: auto;

        transition: 0.3s ease-in all;
        &:hover{
            background: #7e3bb6;
            transform: scale(1.05);
        }
         box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
      
       h2{
        color: #f2f2f2;
        margin: 25px  0;
       }

       figcaption {
        color: #f2f2f2;
       }
       
       .avatar{
        width: 60px;
       }
 
       

    }   
    


                             
}


.cursos {
    width: 80%;
    margin: auto;
    display: grid;
    margin-top: 60px;


         grid-template-columns: repeat(3, 400px );


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


    gap: 60px;  
    text-align: center;
    
   
    


    .titulo{
        color: #8e8d8d;
        
        text-align: center;
       margin: 4 0px 0 ;
       
    }

    .imagen{
         transition: 0.3s ease-in all;
        &:hover{
                transform: scale(1.05);
        }
         
        
    }

    .subtitulo {
        color: #00b4ff;
        margin: 25px 0;
    }
    
}


.pqa {

    width: 80%;
    margin-top: 70px;
     margin-bottom: 60px;

  
    display: grid;   
    text-align: center;
    justify-content: center;
    justify-self: center;
    gap: 25px;

    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 3  ;

    

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

    .titulo{
        color: #fbbe0a; 
        font-size: 30px;
        text-align: center;
        
    }

    figure {
        
        width: 420px;
        border-radius: 25px;
       
        
         border-style: solid 4px; 
                border-color: #e1e6e6;
                margin: 25px auto;
                padding: 15px;

        transition: 0.3s ease-in all;
                &:hover {
                transform: scale(1.05);
                }
         
        box-shadow: rgba(99, 98, 98, 0.19) 0px 10px 20px, rgba(49, 49, 49, 0.23) 0px 6px 6px;


        .avatar {
            width: 70px;
            margin: 25px 0 ;
        }

        .subtitulo {
        color: #8e8d8d;
        margin-bottom: 25px;
    }

     .parrafo{
            margin-bottom: 25px;
            color: #6d6c6c;
        }
}

    }

    

.contactenos {
    width: 80%;
    margin: auto;
    margin-bottom: 60px;
    margin-top: 60px;
    
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    
    gap: 20px;  
    text-align: center;
    align-content: center;
    border-radius: 20px;
   
     background-image: url(./imagenes/blur.jpg);
    background-position: center;
  
    .contcon{
        
    display: flex;
    flex-direction: column;
    justify-content: center;
    
   
    .subtitulo {
        
        color: #8e8d8d;
        margin-bottom: 25px;
    }
    
    .titulo{
        color: #fbbe0a;
        text-align: center;
        align-items: center;
        margin-bottom: 25px;
    }

    figure {
       
        border-radius: 25px;
        padding:20PX ;
    }    

    figcaption {
        font-size: 20px;
        color: #6d6c6c;
    }

    .logo {
        margin:  25px auto;
    }

    
    }               
    
}


.footer {
    
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    
    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;
            }
            
    }        
    


    
            /**********************@media queeri/////////////////////////////////*/

.header {

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

                .menu{ font-size: 20px;}


            }
           }


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

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

                .logo{
                    margin: auto;
                    width: 300px ;
                    margin-bottom: 30px;
                    margin-top: 25px;

                }
            }
           }


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

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

                .logo{
                    margin: auto;
                    width: 300px ;
                    margin-bottom: 30px;
                    margin-top: 25px;

                }
            }
           }



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

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

                .logo{
                    margin: auto;
                    width: 400px ;
                    margin-bottom: 30px;
                    margin-top: 25px;

                }
            }
           }
}


.portada{
            height: 500px;
     @media screen and (max-width: 500px) {
            & {
                
                height: 500px;
                margin-top: 4opx;

             .titulo{
                font-size: 40px;
                margin-top: 50px;
             }

           

            }
           }
}


.cursos{


    @media screen and (max-width: 500px) {
            & {
                
                 
             grid-template-columns: repeat(1, 1fr );
             grid-template-rows: 4, 1fr;
             

             margin-top: 100px;

            .titulo{ font-size: 70px;}
            
            
            .subtitulo {
                font-size: 45px;
                
            }

           .menup{
            width: 500px;
            border-radius: 40px;
           }
                   
            .imagen{
                height: 1100px;
            }

            }
           }
}


.somos {

             @media screen and (max-width: 850px) {
            & {
                
                grid-template-columns: repeat(1, 1fr);


            }
           }



            @media screen and (max-width: 500px) {
            & {
                
                grid-template-columns: repeat(1, 1fr);


                margin-top: 100px;

                .titulo {
                    font-size: 50px;
                }

                .parrafo{
                    font-size: 40px;
                }

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





.perfiles {

             @media screen and (max-width: 500px) {
            & {
                
                 
             grid-template-columns: repeat(1, 1fr );
             grid-template-rows: 4, 1fr;
             

             margin-top: 100px;

            .titulo{ font-size: 70px;}
            
            
            .subtitulo {
                font-size: 45px;
                
            }

           .menup{
            width: 500px;
            border-radius: 40px;
           }
                   
            .imagen{
                height: 1100px;
            }

            }
           }
}




.modulos {
        
            @media screen and (max-width: 850px) {
            & {

                  grid-template-columns: repeat(3, 260px );


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


             @media screen and (max-width: 500px) {
            & {
                .modulos {
                    
                }

                  grid-template-columns: repeat(1, 700px );


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


                .cajamod{
                    gap: 40px;
                width: auto;
                height: auto;
                margin-bottom: 40px;

                 .avatar{
                    width:120px ;
                    
                    
                }
                }

                .titulo{
                    font-size: 70px;
                }

                .subtitulo{
                    font-size: 50px;
                }

                .parrafo{
                    font-size: 40px;
                }

               

                            
              }
            }

           }




.pqa {
           
             @media screen and (max-width: 850px) {
            & {
                
            width: 80%;

            grid-template-columns: repeat(2, 1fr);
             grid-template-rows: repeat(4 ) ;

             grid-template-areas: 'titulo titulo'
                          ;

                          .titulo{ grid-area: titulo;}
            }
           }


            @media screen and (max-width: 500px) {
            & {
                
                width: 90%;
            
                 grid-template-columns: 1fr ;
                  
                
                .titulo{
                    font-size: 70px;
                }
                
               .figure{

                    width: 800px;
                    grid-column: 1/-1;

                    .subtitulo {
                        font-size: 50px;
                    }

                     .parrafo {
                        font-size: 40px;
                    }

                    .avatar{
                        width: 140px;
                    }


                }
               }

               


            }
           }

            


.contactenos{

          @media screen and (max-width: 500px) {
            & {
              
                 grid-template-columns: repeat(1, 700px);
                
                 
                 .imagen{
                    margin: auto;
                    width: 700px;
                    margin-bottom: 40px;
                   
                 }

                 .contcon{
                    .logo{
                                        width: 500px;
                                        margin-bottom: 40px;
                                    }

                                    .titulo{
                                        font-size: 60px;
                                        color: #352e2e;
                                    }

                                    .subtitulo{
                                        font-size: 50px;
                                    }

                                    .parrafo{
                                        font-size: 40px;
                                        margin-bottom: 40px;
                                    }

                 }

                


                 




              }
            }
}


.footer{

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

                grid-template-columns: 1, 600px;
            


                }
               
                    }
                }