body{
    background: #740924;
    
}
.letraMenu{
    font-family: 'Comfortaa', cursive;
    color:white;
}
.encabezado h2{
    margin-left: 8vw;
    font-size: 1.5rem;
    color:white;
}
.encabezado p{
    margin-top: -1rem;
    margin-left: 8.2vw;
    font-size: 1.1rem; 
}
.datos h5{
    font-size: 1.2rem; 
    margin-top: 10px;
    margin-left: 2vw;  
    margin-right: 2.5vw;
}

.datos p{
    text-align: justify;
    font-size: .9rem; 
    margin-left: 2.2vw;  
    margin-right: 2.2vw;
    line-height: 130%;
}

.pruebaTodo{
    
    width: 95%;
	max-width: 1190px; /*cambia el ancho del contenido completo*/
	/*border: 5px solid #000; es el borde negro, ancho y color*/
	margin: auto;
	font-size: .9rem;
	line-height: 50px;
	text-align: center;

	display: grid;
	grid-gap: 20px;	
	grid-template-columns: 2.5fr 1fr;     
	grid-template-rows: 370px 320px 370px; /*cambia la altura del renglón*/
}

.pruebaTodo > div /*Accede a los div que estan adentro de Princial1*/
{ 
	display: block;
	padding: 0px;
	color: #fff;
	
	box-shadow: 2px 2px 10px rgba(0, 0, 0, .25);
	border-radius: 20px;
}

.div1{
    background: #740924;
    grid-column: 1/2; 
	grid-row: 1/3;
    overflow: auto;
}
.div2{
    background: #740924;
    grid-column: 1/2; /*estas 2 lineas fueron para que el carrusel ocupara el alto de las 2 fila*/
	grid-row: 3/6;
    padding-top:1vw;
    padding-left: 10vw;
    padding-right: 10vw;
    padding-bottom: 10vw;
}

.div2 img{
    height: 400px;
}

.div3{
    
    grid-column: 2/-1; /*estas 2 lineas fueron para que el carrusel ocupara el alto de las 2 fila*/
	grid-row: 1/-1;
    padding-top:vw;
    padding-left: 10vw;
    padding-right: 10vw;
    padding-bottom: 0vw;  
}

.div3 img{
    
    width: 300px;
    padding: 10px;
    border-radius: 20px;
}

.divA img{
    width: 300px;
    border-radius: 20px;   
}
.divB img{
    width: 300px;
    border-radius: 20px;
}
.divC img{
    width: 300px;
    border-radius: 20px;
}
.divD img{
    width: 300px;
    border-radius: 20px;
}


.pruebaTodo .div2{ /* es para los bordes del div del carrusel y se vea bien*/
    padding-top:2vw;
    padding-left: 10vw;
    padding-right: 10vw;
    padding-bottom: 1vw;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .pruebaTodo{
    
        width: 95%;
        max-width: 1200px; /*cambia el ancho del contenido completo*/
        /*border: 5px solid #000; es el borde negro, ancho y color*/
        margin: auto;
        font-size: .7rem;
        line-height: 50px;
        text-align: center;
    
        display: grid;
        grid-gap: 20px;	
        grid-template-columns: 2.5fr 1fr;     
        grid-template-rows: 200px 150px 270px; /*cambia la altura del renglón*/
    }
    .pruebaTodo .div2{
        padding-top:3vw;
        padding-left: 5vw;
        padding-right: 5vw;
        padding-bottom: 1vw;
    }
    .div2 img{
        height: 350px;
        width: 20px;
       
        padding-bottom: 0px;
    } 
    .div3 img{
    
        width: 190px;
        padding: 10px;
        border-radius: 20px;
    }

    .divA {
        width: 190px;
    }
    .divB {
        width: 190px;
    }
    .divC {
        width: 190px;
    }
    .divD {
        width: 190px;
    }

    .divA img{
        
        width: 190px;
        border-radius: 20px;
    }
    .divB img{
        width: 190px;
        border-radius: 20px;
    }
    .divC img{
        width: 190px;
        border-radius: 20px;
    }
    .divD img{
        width: 190px;
        border-radius: 20px;
    }
}
@media (min-width: 320px) and (max-width: 480px) {
    
    .pruebaTodo{
        grid-template-columns: 1fr 1fr; /*cambia el ancho de la columna*/
        grid-template-rows: minmax(220px,auto) 270px;; /*cambia la altura del renglón*/      
    }

    .datos h5{    
        margin-right: 10px;
        margin-right: 10px;
        font-size: .9rem;
        text-align: center;
    }
    .datos p{
        padding:10px;
        hyphens: auto;
    }

    .div1{      
        grid-column: 1/-1; 
	    grid-row: 1/2;
    }
    .div2{
        grid-column: 1/-1; /*estas 2 lineas fueron para que el carrusel ocupara el alto de las 2 fila*/
	    grid-row: 2/3;
    }
    .div3{
        grid-column: 1/-1; 
	    grid-row: 3/-1;  
             
    }

    .div2 img{ /*el carrusel de fotos*/     
        height: 230px;
        width: 150px;
        padding-bottom: 20px;
    }

    .div3 img{      
       float:left;
                 
        gap: 10px;
        border-radius: 20px;
        height: 50%;

        margin: auto;
        width: 50%;
        padding: 10px;
    }

    
  
    .divA img{
        
        width: 170px;
        height: 170px;
        border-radius: 20px;
        padding-left: 10px;       
    }
    .divB img{
        
        width: 170px;
        height: 170px;
        border-radius: 20px;
        padding-right: 8px;
    }
    .divC img{
        
        width: 170px;
        height: 170px;
        border-radius: 20px;
        padding-left: 10px;
    }
    .divD img{
       
        width: 170px;
        height: 170px;
        border-radius: 20px;
        padding-right: 8px;
    }
}