/* Hero de la portada.
   Mientras llega la lista, el hueco usa la proporcion del primer banner
   (o la del Mes Morado, si todavia no hay medidas). Asi los catalogos no
   saltan cuando aparece la foto. Sin diapositivas activas la seccion
   desaparece. */

.hero-slider {
  /* Mismo tope que la grilla de catalogos, con aire a los lados para el brillo. */
  width: min(770px, calc(100% - 36px));
  margin: 16px auto 12px;
  background: transparent;
  --hero-ratio: var(--hero-ratio-mobile, 1024 / 1536);
}

@media (min-width: 900px) {
  .hero-slider {
    width: min(1000px, calc(100% - 48px));
    margin-top: 22px;
  }
}

@media (min-width: 768px) {
  .hero-slider {
    --hero-ratio: var(--hero-ratio-pc, 1942 / 809);
  }
}

.hero-slider.is-pending .swiper {
  aspect-ratio: var(--hero-ratio);
  background: #f6eef8;
}

.hero-slider .swiper {
  width: 100%;
  border-radius: 18px;
  box-shadow: var(--lasak-glow);
}

@media (min-width: 900px) {
  .hero-slider .swiper {
    border-radius: 26px;
  }
}

.hero-slider.is-empty {
  display: none;
}


.hero-slider .swiper-slide a,
.hero-slider .swiper-slide picture,
.hero-slider .swiper-slide img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-slider .swiper-slide img {
  aspect-ratio: var(--hero-ratio);
  object-fit: cover;
  background: #f6eef8;
}

.hero-slider .swiper-button-prev,
.hero-slider .swiper-button-next {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #5578b8;
  box-shadow: 0 6px 16px rgba(34, 24, 58, 0.18);
}

.hero-slider .swiper-button-prev::after,
.hero-slider .swiper-button-next::after {
  font-size: 16px;
  font-weight: 700;
}

.hero-slider .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: #fff;
  opacity: 0.72;
}

.hero-slider .swiper-pagination-bullet-active {
  width: 22px;
  border-radius: 999px;
  opacity: 1;
  background: #fff;
}

/* Con una sola promocion Swiper marca los controles como lock. Sin esto
   quedarian los circulos vacios encima del banner. */
.hero-slider .swiper-button-lock,
.hero-slider .swiper-pagination-lock {
  display: none;
}

@media (max-width: 767px) {
  .hero-slider .swiper-button-prev,
  .hero-slider .swiper-button-next {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slider .swiper-wrapper {
    transition: none !important;
  }
}