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

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

/* Grid bento: 6 columnas, 2 filas principales para 5 ítems */
.promo-grid {
  display: grid;
  transition: opacity 0.6s ease;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 165px); /* Corregido: Solo 2 filas para 5 ítems */
  gap: 10px;
  max-width: 1100px;
  margin: 0 auto;
}

.promo-grid__item {
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), 
              box-shadow 0.5s ease, 
              opacity 0.6s ease,
              filter 0.6s ease;
  opacity: 1;
  filter: blur(0);
}

/* Estado durante la transición */
.promo-grid.is-fading .promo-grid__item {
  opacity: 0;
  filter: blur(8px);
  transform: scale(0.95);
}

.promo-grid__item:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  z-index: 2;
  position: relative;
}

/* ── Posicionamiento bento (para 5 ítems) ──────────────────── */
.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; }

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

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

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