/* ============================================
   CARRUSEL PROMOS LUZ
   Todos los selectores scopeados bajo
   #seccion-carrusel-promos para evitar
   interferencias con otros componentes
   ============================================ */

/* ✅ FIX: scopeado — antes afectaba a todos los h3 de la página */
#seccion-carrusel-promos h3 {
  margin-bottom: 4px;
}

#ofertas_carrusel {
  display: flex;
  padding: var(--size-space-20, 20px) var(--360-575-page-margin, 16px) var(--size-space-40, 40px) var(--360-575-page-margin, 16px);
  flex-direction: column;
  align-items: center;
  gap: var(--size-space-24, 24px);
}

/* ✅ FIX: scopeado — antes colisionaba con .header del carrusel de pasos */
#ofertas_carrusel .header {
  display: flex;
  padding: var(--size-space-0, 0);
  flex-direction: column;
  align-items: center;
  gap: var(--size-space-16, 16px);
  align-self: stretch;
  text-align: center;
}

/* ============================================
   TARJETAS
   ============================================ */

.cards_container_promos {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.contenedor_tarjetas {
  display: flex;
  align-items: flex-start;
  align-self: stretch;
  flex-grow: 1;
}

.swiper-promos {
  flex-grow: 1;
}

.card_promo {
  display: flex;
  width: 304px;
  padding-bottom: var(--size-space-24, 24px);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: var(--border-radius-l, 16px);
  background: var(--Color-Surface-General-3, #F9F9F9);
  flex-grow: 1;
}

.discount {
  border-radius: 16px 16px 0 0;
  background-color: var(--Color-Semantic-Info-1, #007ACB);
  display: flex;
  height: 36px;
  padding: var(--size-space-0, 0);
  justify-content: center;
  align-items: center;
  gap: var(--size-space-8, 8px);
  align-self: stretch;
  color: #FFF;
  margin-bottom: 0;
}

.header_card_promo {
  display: flex;
  padding: 24px 16px 0 16px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  text-align: center;
}

.bubble {
  display: flex;
  padding: var(--size-space-12, 12px);
  justify-content: center;
  gap: var(--size-space-0, 0);
  align-self: stretch;
  border-radius: var(--border-radius-l, 16px);
  background: var(--Color-Surface-General-2, #DCEBE1);
  align-items: baseline;
}

.body_card_promo {
  display: flex;
  padding: var(--size-space-16, 16px) var(--size-space-16, 16px) var(--size-space-0, 0) var(--size-space-16, 16px);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--size-space-16, 16px);
  align-self: stretch;
}

.txtG {
  padding-right: 8px;
}

.ibd_button {
  height: 56px;
  min-width: 200px;
  align-self: stretch;
  border-radius: var(--border-radius-xxl, 100px);
  background: var(--Color-Button-Background-Active-1, #2F6852);
  color: var(--Color-Button-Content-Active-1, #FFFAF6);
  text-align: center;
  border: 0;
}

.navigation__container--promos {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 14px 0 32px;
}

#seccion-carrusel-promos .navigation-prev__container,
#seccion-carrusel-promos .navigation-next__container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  border-radius: var(--border-radius-xxl, 100px);
  border: var(--border-width-s, 1px) solid var(--Color-Button-Border-Active, #2F6852);
  background-color: var(--Color-Surface-General-1, #FFF);
}

.navigation__prev.swiper-button-prev-promos {
  background-image: url("/documents/20122/21755674/Left.svg");
  background-size: cover;
  width: 27px;
  height: 27px;
}

.navigation__next.swiper-button-next-promos {
  background-image: url("/documents/20122/21755674/Right.svg");
  background-size: cover;
  width: 27px;
  height: 27px;
}

#seccion-carrusel-promos .navigation__prev.swiper-button-disabled {
  background-image: url("/documents/20122/21755674/Left-Disabled.svg");
}

#seccion-carrusel-promos .navigation__next.swiper-button-disabled {
  background-image: url("/documents/20122/21755674/Right-Disabled.svg");
}

#seccion-carrusel-promos .navigation-prev__container:has(.swiper-button-disabled),
#seccion-carrusel-promos .navigation-next__container:has(.swiper-button-disabled) {
  border: var(--border-width-s, 1px) solid var(--Color-Button-Border-Disabled, #BFBFBF);
}

.navigation__paginate.swiper-pagination-promos {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border-radius: var(--border-radius-xxl, 100px);
  border: var(--border-width-s, 1px) solid var(--Color-Button-Border-Active, #2F6852);
  background-color: var(--Color-Surface-General-1, #FFF);
  padding: 8px;
  margin: 0 16px;
  width: 96px !important;
  top: 0 !important;
  height: 40px;
}

/* Bullets de paginación */
.navigation__paginate.swiper-pagination-promos .swiper-pagination-bullet {
  background: #ccc;
  opacity: 1;
}

.navigation__paginate.swiper-pagination-promos .swiper-pagination-bullet-active {
  background: #2F6852;
}

#seccion-carrusel-promos .swiper-button-prev:after,
#seccion-carrusel-promos .swiper-button-next:after {
  content: '' !important;
}

/* Evitar margin-right extra en slides */
#seccion-carrusel-promos .swiper-slide {
  margin-right: 0;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (min-width: 576px) {
  #ofertas_carrusel {
    padding: var(--size-space-20, 20px) var(--576-767-page-margin, 42px) var(--size-space-40, 40px) var(--576-767-page-margin, 42px);
  }
}

@media (min-width: 768px) {
  #ofertas_carrusel {
    padding: var(--size-space-40, 40px) var(--768-991-page-margin, 48px) var(--size-space-64, 64px) var(--768-991-page-margin, 48px);
  }
}

@media (min-width: 992px) {
  #ofertas_carrusel {
    padding: var(--size-space-40, 40px) var(--992-1199-page-margin, 82px) var(--size-space-64, 64px) var(--992-1199-page-margin, 82px);
  }

  .card_promo {
    width: 316px;
  }
}

@media (min-width: 1200px) {
  #ofertas_carrusel {
    padding: var(--size-space-40, 40px) var(--1200-1399-page-margin, 102px) var(--size-space-64, 64px) var(--1200-1399-page-margin, 102px);
  }

  /* ✅ FIX: usa --promos para no ocultar el carrusel de pasos */
  .navigation__container--promos {
    display: none !important;
  }
}

@media (min-width: 1920px) {
  #ofertas_carrusel {
    padding: 40px 324px 64px 324px;
  }
}