.contenedor {
  display: flex;
  flex-wrap: wrap; /* Permite que las cajas se ajusten a varias líneas */
  justify-content: center; /* Centra las cajas horizontalmente */
  gap: 20px; /* Espacio entre las cajas */
  padding: 20px;
  padding-top: 100px; /* el espacio entre el menu y el contenedor*/
}

.caja {
  border-radius: 20%;
  border: 10px solid #23ec5f; /* Borde verde */
  padding: 10px;
  text-align: center; /* Centra el texto dentro de la caja */
  width: 200px; /* Ancho fijo para las cajas */
  margin-bottom: 20px; /* Margen inferior para separar las cajas */
  flex-basis: calc(27% - 30px); /* Ancho para 3 columnas menos el gap */
  box-sizing: border-box; /* Incluye el padding y el border en el ancho */
  margin-bottom: 20px;
}

.caja:hover {
  background-color: #d0f0d0;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
  transform: scale(1.03);
}
.caja img {
  max-width: 100%; /* Asegura que la imagen no se desborde de la caja */
  height: auto;
  display: block; /* Evita espacios adicionales debajo de la imagen */
  margin: 0 auto; /* Centra la imagen horizontalmente */
  margin-bottom: 10px;
}
.caja img {
  /* ... otros estilos ... */
  border: 4px solid #9c9c9c;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1); /* Sombra suave */
  border-radius: 10%;
}

.caja h3 {
  margin-bottom: 10px;
  font-size: 16px;
  font-family: "Montserrat", sans-serif;
}

.boton {
  background-color: #23ec5f; /* Fondo verde */
  border: none;
  color: white;
  padding: 8px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  cursor: pointer;
  border-radius: 5px; /* Bordes redondeados */
  transition: background-color 0.3s ease; /* Transición suave para el hover */
  font-family: "Roboto", sans-serif;
}

.boton:hover {
  background-color: #006400; /* Verde más oscuro al pasar el mouse */
}
/* Media queries */
@media (max-width: 768px) {
  .caja {
    flex-basis: calc(50% - 20px);
  }
}

@media (max-width: 480px) {
  .caja {
    flex-basis: 100%;
  }
}