:root {
  --gap: 20px;       /* Espacio entre las cards */
  --card-height: 355px;
  --radius: 18px;    /* Borde redondeado */
}

.bento {
  margin: 0 auto; /* Centra horizontalmente */
  width: fit-content; /* Evita que ocupe todo el ancho */
}

.row {
  display: grid;
  gap: var(--gap);
  align-items: stretch;
  margin-bottom: var(--gap);
}

.row.top {
  grid-template-columns: 280px 570px 280px; /* Más ancho */
}

.row.bottom {
  grid-template-columns: 280px 495px 355px;
}

.card {
  position: relative; /* Necesario para ubicar el título */
  height: var(--card-height);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 0 0 4px rgba(20,120,255,0.06) inset;
}

.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Efecto glassmorphism para los títulos */
.card .title {
  position: absolute;
  white-space: normal;
  top: 12px;
  left: 12px;
  padding: 4px 14px;
  font-size: 14px;
  font-weight: 500;
  color: white;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.25);
}



@media (max-width:700px) {
  .row.top, .row.bottom { 
    grid-template-columns: repeat(2, 1fr); /* 2 columnas */
    grid-auto-flow: dense; /* Llena huecos automáticamente */
  }

  /* Primera card ocupa ancho completo */
  .row.top .card:first-child {
    grid-column: span 2;
  }

  /* Aula Inicial baja a siguiente fila */
  .row.top .card:nth-child(2) {
    order: 2;
  }

  /* Altura base */
  .card { 
    height: 180px;
  }

  /* Asimetría */
  .row.top .card:nth-child(3) { /* Exploración */
    height: 250px;
  }

  .row.bottom .card:nth-child(1) { /* Paisaje */
    height: 140px;
  }

  .row.top .card:nth-child(2) { /* Aula Inicial */
    height: 140px;
  }

  .row.bottom .card:nth-child(2) { /* Ciencia */
    height: 250px;
    margin-top: -110px
  }

  /* Ocultar Aula Secundaria */
  .hide-mobile {
    display: none !important;
  }
}