/* ===================== HOME BANNERS ===================== */

/* CONTENEDOR PRINCIPAL */
#home-banners-container {
  padding: 0 0 0 0 !important;
  width: auto;
  margin: 0 auto;
}

/* SECCIÓN INTERNA */
#index-banners-section {
  margin: 0;
  box-sizing: border-box;
}

/* FILA QUE CONTIENE TODOS LOS BANNERS */
.index-banners-row {
  display: flex;
  flex-wrap: wrap;          /* permite varias filas */
  justify-content: center;  /* centra la última fila si solo tiene 1 banner */
  gap: 40px;

  /* Espacio inferior global debajo de los banners */
  margin-bottom: 30px !important;
  margin-top: 0 !important; /* Sin espacio arriba */
}

/* CADA BANNER – 2 COLUMNAS EN DESKTOP */
.index-banner-col {
  flex: 0 0 48%;            /* ~2 por fila */
  max-width: 48%;
  box-sizing: border-box;
}

/* IMÁGENES RESPONSIVE */
.index-banner-image,
.index-banners-row img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
}

/* LINK CLICKABLE */
.index-banner-link {
  display: block;
}

/* Hover */
.index-banner-link .index-banner-image {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.index-banner-link:hover .index-banner-image {
  transform: scale(1.02);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

/* Imagen estática */
.index-banner-static {
  display: block;
}


/* =========================
   1200px
========================= */
@media (max-width: 1200px) {

  .index-banners-row {
    gap: 30px;
    margin-bottom: 25px !important;
  }

  .index-banner-col {
    flex: 0 0 48%;
    max-width: 48%;
  }

  .index-banner-image {
    border-radius: 18px;
  }
}


/* =========================
   1100px
========================= */
@media (max-width: 1100px) {

  .index-banners-row {
    gap: 25px;
  }

  .index-banner-col {
    flex: 0 0 48%;
    max-width: 48%;
  }

  .index-banner-image {
    border-radius: 16px;
  }
}


/* =========================
   900px (tablet)
========================= */
@media (max-width: 900px) {

  .index-banners-row {
    gap: 20px;
    margin-bottom: 20px !important;
  }

  .index-banner-col {
    flex: 0 0 100%;   /* 🔥 1 por fila */
    max-width: 100%;
  }

  .index-banner-image {
    border-radius: 14px;
  }
}


/* =========================
   600px (mobile)
========================= */
@media (max-width: 600px) {

  #home-banners-container {
    padding: 0 10px !important; /* 🔥 respiración lateral */
  }

  .index-banners-row {
    gap: 15px;
    margin-bottom: 15px !important;
  }

  .index-banner-col {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .index-banner-image {
    border-radius: 12px;
  }

  .index-banner-link:hover .index-banner-image {
    transform: none; /* 🔥 evita zoom incómodo en mobile */
    box-shadow: none;
  }
}