/* =============================================
   PROMO GRID – Bento estático
   Componente autónomo para index.html
   ============================================= */

.promo-slider-section {
  width: 100%;
  padding: 32px 20px;
}

/* Grid bento: 6 columnas, 5 filas */
.promo-grid {
  display: grid;
  transition: opacity 0.6s ease;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(5, 155px);
  gap: 8px;
  max-width: 1100px;
  margin: 0 auto;
}

.promo-grid__item {
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.promo-grid__item:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  z-index: 1;
  position: relative;
}

/* ── Posicionamiento bento ──────────────────── */
.promo-grid__item:nth-child(1)  { grid-column: 1 / 4; grid-row: 1 / 3; }
.promo-grid__item:nth-child(2)  { grid-column: 4 / 6; grid-row: 1 / 2; }
.promo-grid__item:nth-child(3)  { grid-column: 6 / 7; grid-row: 1 / 2; }
.promo-grid__item:nth-child(4)  { grid-column: 4 / 5; grid-row: 2 / 3; }
.promo-grid__item:nth-child(5)  { grid-column: 5 / 7; grid-row: 2 / 3; }
.promo-grid__item:nth-child(6)  { grid-column: 1 / 3; grid-row: 3 / 4; }
.promo-grid__item:nth-child(7)  { grid-column: 3 / 5; grid-row: 3 / 5; }
.promo-grid__item:nth-child(8)  { grid-column: 5 / 7; grid-row: 3 / 4; }
.promo-grid__item:nth-child(9)  { grid-column: 1 / 3; grid-row: 4 / 5; }
.promo-grid__item:nth-child(10) { grid-column: 5 / 7; grid-row: 4 / 5; }
.promo-grid__item:nth-child(11) { grid-column: 1 / 4; grid-row: 5 / 6; }
.promo-grid__item:nth-child(12) { grid-column: 4 / 7; grid-row: 5 / 6; }

/* ── Responsive ─────────────────────────────── */
@media (max-width: 768px) {
  .promo-slider-section {
    padding: 20px 12px;
  }

  .promo-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: none;
    gap: 6px;
  }

  .promo-grid__item {
    grid-column: unset !important;
    grid-row: unset !important;
    aspect-ratio: 1 / 1;
  }
}