body {
    font-family: Arial, sans-serif;
    padding: 0;    
    margin: 0; /* Elimina el margen por defecto del body */    
       
}

.imgFondo{
	  position:fixed;
      height: 100%; /* Toda la altura de la ventana */
      width: 100%;	
      top: 0; /* Elimina el margen por defecto del body */
      left: 0;
      z-index: 0;
}


    .grid-container {
      margin: 0;
      height: 100%; /* Toda la altura de la ventana */
      width: 100%;
      display: grid;
      grid-template-areas:
        'header header header'
        'widget-anima widget-anima widget-anima'
        'widget-carrusel widget-carrusel widget-carrusel'
        'widget-oferta widget-oferta widget-oferta'
        'widget-curso1 widget-curso1 img-intensivo'
        'img-fin widget-curso2 widget-curso2'
        'widget-curso3 img-aprendiz img-aprendiz'
        'widget-cursos widget-cursos widget-cursos'
        'reseña1 reseña2 reseña3'
        'logo contacto cursos'
        'footer footer footer'
        ;
 
      grid-template-rows: auto; /* Alturas de las filas */
      grid-template-columns: auto; /* Anchos de las columnas */
    }

    
    
   	.grid-container > div,
	.grid-container .header,
	.grid-container .footer {
		padding: 0px;
	
	}
	
	
	    .grid-container .header {
	    grid-area: header;
	    height: 300px;
        display: flex;
        border: none;
        overflow: hidden;
        background-color: none;
        justify-content: space-between;
        z-index: 1;
    } 
  .grid-container .header .img{
			width: 170px; 
			height:170px;	
      } 
    
	    .grid-container .widget-carrusel {
	    grid-area: widget-carrusel;
        border: none;
        overflow: hidden;
        background-color: white;
        text-align: center;
        color: #6194b7 ;
        z-index: 2;
        height: 250px;                
    } 

	    .grid-container .widget-oferta {
	    grid-area: widget-oferta;
        border: none;
        overflow: hidden;
        background-color: #6194b7 ;
        text-align: center;
        height: 250px;
        z-index: 2;        
    } 

	    .grid-container .widget-oferta p{
        font-family: "Courier New", monospace;
        letter-spacing: 3px;
        font-size: 18px;
        
    } 
	    .grid-container .widget-oferta h1{
        
         align-items: center;
        
        
    } 

	    .grid-container .widget-cursos{
	    grid-area: widget-cursos;
	    padding-top: 15px;
        border: none;
        background-color: white;
        color: #6194b7 ;
        text-align: center;
        z-index: 2;                
	    }
    
	    .grid-container .widget-curso1{
	    grid-area: widget-curso1;
        border: none;
        height: 450px;
        overflow: hidden;
        background-color: white;
        z-index: 2;        
    }     

	    .grid-container .widget-curso2{
	    grid-area: widget-curso2;
        border: none;
        overflow: hidden;
        background-color: white;
        z-index: 2;                
    }     


	    .grid-container .widget-curso3{
	    grid-area: widget-curso3;
        border: none;
        overflow: hidden;
        background-color: white;
        padding-top: 50px;
        z-index: 2;        
    }     


    .grid-container .widget-cursos h2{
        padding-top: 60px;
        font-size: 40px; 
  }


	    .grid-container .widget-curso2 img{
	    
	    margin: 100px;
	    height: 350px;
	    box-shadow: 8px 8px 16px 8px rgba(0,0,0,0.4);   
    }

	    .grid-container .widget-curso3 img{
	        width: 500px;
	        height: 400px;
	        border-radius: 20%;
	        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
         }

	    .grid-container .img-intensivo {
	    grid-area: img-intensivo;
        border: none;
        overflow: hidden;
        background-color: white;
 	    padding-right: 80px;     
 	    padding-top: 80px;     
        z-index: 2;         	      
    }     
    
    
     .grid-container .img-aprendiz {
	    grid-area: img-aprendiz;
        border: none;
        overflow: hidden;
        background-color: white;
        padding: 50px;
        z-index: 2;   
        height: 370px;
                     
    }     
    

	    .grid-container .img-fin {   /* texto */
	    grid-area: img-fin;
        border: none;
        overflow: hidden;
        background-color: white;
 	    padding: 50px;
        z-index: 2;                        
    }     


    
 	    .grid-container .img-intensivo,.img-aprendiz,.img-fin h3,p{
        letter-spacing: 3px;        
        font-family: "Courier New", monospace;
 	  
 	    }
 	    
.btnCursos{
	
	background-color: rgb(97, 148, 183,0.4 );
	text-decoration: none;
	color: #FFFFFF;
	font-size: 17px;
	padding: 8px 14px; 
	border-radius: 30px;
	transition: background-color 0.3s ease;
	z-index: 2;        
} 	    

.btnCursos:hover {
	
	background-color: #6194b7;
}

 	    
.widget-anima{
	grid-area: widget-anima;
	z-index: 2;
	color: white;
	font-size: 30px;
	text-align: center;
}

.titulo2{
	
		font-size: 30px;
    	text-align: center;
		text-shadow: 2px 8px 16px rgba(0,0,0,0.7);
}


.titulo1{
	    text-shadow: 2px 8px 16px rgba(0,0,0,0.7); 
		font-size: 50px;
    	text-align: center;
        display: inline-block;
        border-right: 2px solid black; /* Cursor de la máquina de escribir */
        white-space: nowrap; /* Evita que el texto se divida en varias líneas */
        overflow: hidden; /* Oculta el texto que no se ha escrito aún */
        animation: escribir 4s steps(43, end), parpadeo 0.75s infinite step-end alternate; /* Animación de escritura y parpadeo del cursor */
  	
}    




    .grid-container .reseña1{
        grid-area: reseña1;
        background-color: white;
        z-index: 2;   
        border: 1px solid black; /* Asegúrate de especificar el tipo de borde */
    	margin:20px;
        padding: 20px;
  	    text-align: center;
             
  }

    .grid-container .reseña2{
	    grid-area: reseña2;
        background-color: white;
        z-index: 2;
        border: 1px solid black; /* Asegúrate de especificar el tipo de borde */
    	margin:20px;
        padding: 20px; 	
   	    text-align: center;
        
      }
      
      
    .grid-container .reseña3{
        grid-area: reseña3;
        background-color: white;
    	z-index: 2;
    	border: 1px solid black; /* Asegúrate de especificar el tipo de borde */
    	margin:20px;
        padding: 20px;
  	    text-align: center;

     }


    .grid-container .logo{
        grid-area: logo;
        padding-top: 60px;
        text-align: center;
        z-index: 2;
        background-color: white;
        
    }
    
  .grid-container .logo .img{
			width: 170px; 
			height:170px;	
      }    
    
    .grid-container .contacto{
        grid-area: contacto;
        padding-top: 40px;
        padding-left: 80px;
    	z-index: 2;       
        background-color: white;

    }
    
    .grid-container .contacto ul{
            list-style: none;    	 
}    

    .grid-container .cursos{
        grid-area: cursos;
        padding-top: 40px;
        padding-left: 80px;
    	z-index: 2;        
        background-color: white;
        list-style: none;
    }

    .grid-container .cursos ul{
            list-style: none;    	 
}    





.img-res{
	width: 70px;
	height: 70px;
    border-radius: 60px;
}



        @keyframes escribir {
            from {
                width: 0; /* Comienza con ancho 0 */
            }
            to {
                width: 100%; /* Termina con el ancho completo del texto */
            }
        }

        @keyframes parpadeo {
            0%, 100% {
                border-color: transparent; /* Cursor invisible al principio y al final */
            }
        } 
    
    
        .imagen {
            position: absolute; /* Posicionamiento absoluto para la imagen */
            animation: desplazar 10s ease-in-out infinite; /* Aplicar la animación */
        }

        @keyframes desplazar {
            0% {
                transform: translateX(-100%); /* Comienza fuera de la pantalla a la izquierda */
            }
            50% {
                transform: translateX(calc(5vw - 50px)); /* Se mueve al centro de la pantalla */
            }
            100% {
                transform: translateX(-100%); /* Termina fuera de la pantalla a la derecha */
            }
        }    
    
    
         .imagen2 {
            position: absolute; /* Posicionamiento absoluto para la imagen */
            animation: desplazar2 7s ease-in-out infinite; /* Aplicar la animación */
        }   
    
        @keyframes desplazar2 {
            0% {
                transform: translateX(150%); /* Comienza fuera de la pantalla a la izquierda */
            }
            50% {
                transform: translateX(calc(2vw - 40px)); /* Se mueve al centro de la pantalla */
            }
            100% {
                transform: translateX(150%); /* Termina fuera de la pantalla a la derecha */
            }
        }    
    
    
    
.imgFace, .imgInsta{
	cursor: pointer;
   } 
.imgWhats{
	
	position: fixed;
	background-color: none;
	z-index: 3;
    width: 70px;
	height: 70px;
	bottom: 30px;
	right: 30px;
	border-radius: 20px;
	cursor: pointer;
}    

        .estrella {
            width: 30px; /* Ancho de la estrella */
            height: 30px; /* Alto de la estrella */
            background-color: yellow; /* Color de la estrella */
            clip-path: polygon(
                50% 0%, 
                61% 35%, 
                98% 35%, 
                68% 57%, 
                79% 91%, 
                50% 70%, 
                21% 91%, 
                32% 57%, 
                2% 35%, 
                39% 35%
            ); /* Forma de la estrella */
        }


.estrellas{
            display: flex; /* Usar flexbox para alinear los elementos en línea */
            justify-content: center; /* Centrar los elementos horizontalmente */
            margin: 20px; /* Margen alrededor del contenedor */
        }
        
.grid-container .footer{
	grid-area: footer;
	bottom: 0;
	height: 150px;
    z-index: 2;
    background-color: #6194b7 ;
    text-align: center;   
}        
        
 @media(max-width: 768px){

         @keyframes desplazar2 {
            0% {
                transform: translateX(150%); /* Comienza fuera de la pantalla a la izquierda */
            }
            50% {
                transform: translateX(-50%); /* Se mueve al centro de la pantalla */
            }
            100% {
                transform: translateX(150%); /* Termina fuera de la pantalla a la derecha */
            }
        }    
 		
  .grid-container  .widget-oferta{
        position: absolute;
   		display: flex;
   		flex-direction: column;
   		gap: 0;
   	    height: 370px;
   	    width: 100%;
   		
   }
 
     .grid-container  .widget-carrusel{
       position: absolute;
}  	     
   
   
     .grid-container  .widget-anima{
       position: absolute;
}  	    
	
     .grid-container  .widget-anima .titulo1{
 
 	font-size: 17px;
 
   }
   
     .grid-container  .widget-anima .titulo2{
 
 	font-size: 20px;
 
   }


  .grid-container  .widget-oferta h1{
		padding:0;
	}  
    .grid-container  .widget-oferta p{
		padding:0;
	}  
  .grid-container .widget-curso1{
  		position: absolute;	
        top: 1460px; 
        width: 100%;
  
  }
  .grid-container .img-intensivo {
        position: absolute;
        top: 1900px; 
        height: 350px;
        padding: 50px;
  	    text-align: center;
  }	        
  
    .grid-container .widget-curso2{
       position: absolute;
        top: 2300px;
        width: 100%;
	    height: 430px;  
        text-align: center;
        
  }
  
	    .grid-container .widget-curso2 img{	        
	        margin:20px;
	        text-align: center;
	        width: 390px;
	        height: 310px;  
	    }
	    
	    
      .grid-container .img-fin{
        position: absolute;
        top: 2680px; 
        height: 300px;
        text-align: center;
         
        }

    .grid-container .widget-curso3{
        position: absolute;
        top: 3050px; 
        height: 420px;
        width:100%;
        text-align: center; 
       }
  
  
  
      .grid-container .img-aprendiz{
        position: absolute;
        top: 3520px; 
	    text-align: center;
	    height: 300px;
}

    .grid-container .widget-cursos{
        position: absolute;
        top: 3770px; 
  	    height: 300px;
  	    text-align: center;
        width: 100%; 	    
  }


 	
  .grid-container .header {
   		display: flex;
   		flex-direction: column;
	    align-items: center;
  	    height: 530px;
     	z-index: 3;
  	
   } 

  .grid-container .header .img{
			width: 270px; 
			height:270px;	
      } 

  .grid-container .header .navbar{
       top: 0px;
	
   } 
   .widget-anima{
       top: 400px;
       background-color: #6194b7 ;
   	   height: 450px; /* Toda la altura de la ventana */
	    
   }

   .widget-anima .titulo1{
       padding-top: 120px;
	    
   }
 
   .grid-container .widget-carrusel {
      top:850px;	      
      width: 100%;
   } 
   .grid-container .widget-oferta {
      top:1090px;	      
   } 


   .grid-container .reseña1 {
   top: 4100px;
  position: absolute;
  height: 400px;	
} 
   .grid-container .reseña2 {
   top: 4570px;
  position: absolute;	
    height: 300px;	
} 
   .grid-container .reseña3 {
   top: 4950px;
  position: absolute;
    height: 300px;		
} 



.imgFondo{
      height: 100%; /* Toda la altura de la ventana */
      width: 100%;
      	
}



   .grid-container .logo {
     top: 5380px;
     width: 100%;
     position: absolute;
     height: 300px;		    
     text-align: center; 
} 

   .grid-container .contacto {
     top: 5700px;
     position: absolute;
     height: 300px;
     padding: 0px;		
     width: 100%;
     text-align: center;     
} 

   .grid-container .cursos {
     top: 6000px;
     position: absolute;
     height: 300px;		
     padding: 0;		
     width: 100%;
     text-align: center;
} 





.grid-container .footer{
	position:absolute;
	top: 6300px;

}  

  
 }