/* --- Root grid --- */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 80px;
}

/* --- Card base --- */
.box {
  display: flex;
  border-radius: 20px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border: 1.5px solid var(--accent-color);
}

/* --- Span rules (match the image) --- */
.box-03 {
  grid-column: span 2;
  grid-row: span 2;
}

.box-04 {
  grid-column: span 2;
}

.box img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Mantiene la proporción */
}

.equipo-container {
  margin-top: 50px;
}
.comunidad-container {
  margin-top: 30px;
}

.equipo-container,
.comunidad-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 560px;
  gap: 16px;
}

.equipo-container p,
.comunidad-container p {
  column-count: 2;
}

.mision-vision-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 50px;
}

.mision-vision-tarjeta {
  flex: 1 0 335px;
  display: flex;
  flex-direction: column;
  padding: 30px 24px;
  justify-content: center;
  gap: 8px;
  border-radius: 12px;
  background: linear-gradient(93deg, #a2d123 10.4%, #c8ee60 101.06%);
}

.mision-vision-tarjeta:first-child {
  background: linear-gradient(-87deg, #a2d123 10.4%, #c8ee60 101.06%);
}

.floating-wrapper-testimonios {
  margin-top: 50px;
}

.contacto-container {
  margin-top: 20px;
}

/* **********************media queries****************** */
/* ===== MOBILE / TABLET (≤ 706 px) ===== */
@media (max-width: 706px) {
  .bento {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1rem;
  }
  .box-03 {
    display: none;
  }
  .box-04 {
    grid-column: span 2;
  }

  .equipo-container h2,
  .comunidad-container h2 {
    text-align: center;
  }

  .equipo-container p,
  .comunidad-container p {
    column-count: 1;
    text-align: center;
  }
}