.contenedor {
  width: 90%; 
  margin: 0 auto;
  background-color: lightblue;
  text-align: center;
  display: flex;
  flex-direction: column; 
  gap: 10px; 
  min-height: 100vh;      
  overflow-y: auto;
  align-items: center;     
}

.contenedor h1 {
  margin: 10px 0;
  text-align: left;
  width: 100%;
}

.caja {
  width: 33.3%;      
  height: 20vh;
  display: flex;
  justify-content: flex-start; 
  align-items: flex-start;     
  box-sizing: border-box;
}

.caja1 {
  background-color: lightgreen;
  display: flex;              
  justify-content: center;    
  align-items: flex-start;    
  text-align: center;         
  padding-top: 10px;          
}

@media (max-width: 1080px) and (min-width: 600px) {
  .caja1 {
    background-color: pink;
  }
}

@media (max-width: 600px) {
  .caja1 {
    background-color: burlywood;
  }
}


.caja2 {
  background: radial-gradient(circle, lightyellow, orange, red);
  color: white;
  font-weight: bold;
}

.caja3 {
  background: linear-gradient(to right, skyblue, navy);
  overflow: hidden;
}
.caja3 img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; 
}

.caja4 {
  background: linear-gradient(to right, lightcoral, purple);
  color: white;
  padding: 20px;
  box-sizing: border-box;
}

.caja5 {
  background: linear-gradient(to right, lightgray, black);
  color: white;
  padding: 0; 
}