header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  background-color: #c6e0f7;
}
.logowalia img {
  margin:5%;
  max-width: 25%; /* Hace que la imagen sea responsive */
  height: auto;  
}

.cita {
  color: #31466D;
  text-align: center;
  background-color: #FFFFFF;
  border-radius: 25px;
  padding: 20px;
}

.cita h3{
  font-style: oblique;
  padding: 10px;
}
.centradas{
  display: flex;
  align-items: center;
  justify-content: center;
}
h2 {
  text-align: center;
  color: #31466D;
  margin: 10px;
}
section{
  margin: 30px;
}
.problemas {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 100%;
  margin: 0 auto;
}

.problem {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  width: 100%;
  max-width: 600px; /* Ajusta según necesidad */
  margin-bottom: 20px;
  color: #31466D;
  background-color: #FFFFFF;
  padding: 20px;
  border-radius: 25px;

}
.redondel{
  background-color: #31466D;
  max-width: 70px;
  padding: 10px;
  border-radius: 100%;
  max-height: 70px;
  margin: 10px;
}

.redondel svg{
  width: 50px;
  height: 50px;;
  padding: 5px;
}
@media (min-width: 768px) {
  .problemas {
      grid-template-columns: repeat(2, 1fr);
  }
  .problem:last-child {
      grid-column: span 2;
      justify-self: center;
      width: 50%;
  }
}
@media (max-width: 767px) {
  .problemas {
      grid-template-columns: 1fr;
  }
}

.contenedor{
  background-color: #FFFFFF;

}
.estructura{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.esquema_estruct {
  display: flex;
  flex-direction: row; 
  align-items: center;
  justify-content: center; 
  text-align: left !important; 
  gap: 20px; 
  background-color: #FFFFFF;
  max-width: 90%;
  color:#31466D;
  padding: 30px;
  border-radius: 25px;
}

.esquema_estruct h3{
  margin-bottom: 20px;
}

.esquema_estruct img {
  max-width: 200px; /* Tamaño máximo de la imagen */
  height: auto;
}

.esquema_estruct h3,
.esquema_estruct p {
  max-width: 400px; /* Para limitar el ancho del texto */
}

/* Ajuste para pantallas pequeñas */
@media (max-width: 768px) {
  .esquema_estruct {
      flex-direction: column; /* Apila los elementos en pantallas pequeñas */
      text-align: center; /* Centra el texto */
  }
}