/**
 * Hero slider — fondo legible sin romper ResponsiveSlides (#slider4)
 */

/* Hero estático (sin .banner-slider): altura la define bodas-perf.css */

.banner-slider,
.hero-slider {
  position: relative;
  min-height: 520px;
  padding: 4rem 1rem 5rem;
  overflow: hidden;
  background-color: #1e2a2b;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.banner-slider::before,
.hero-slider::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(30, 42, 43, 0.5) 0%,
    rgba(30, 42, 43, 0.78) 100%
  );
}

.hero-slider--barcelona,
.banner .banner-slider,
.banner + .banner-slider {
  background-image: url("../images/fotomaton-barcelona.webp");
}

.hero-slider--tarragona,
.bannerTarragona .banner-slider,
.bannerTarragona + .banner-slider,
#home.bannerTarragona .banner-slider,
#home.bannerTarragona + .banner-slider {
  background-image: url("../images/fotomaton-tarragona.webp");
}

.hero-slider--lleida,
.bannerLleida .banner-slider,
.bannerLleida + .banner-slider,
#home.bannerLleida .banner-slider,
#home.bannerLleida + .banner-slider {
  background-image: url("../images/fotomaton-lleida.webp");
}

.hero-slider--girona,
.bannerGirona .banner-slider,
.bannerGirona + .banner-slider,
#home.bannerGirona .banner-slider,
#home.bannerGirona + .banner-slider {
  background-image: url("../images/fotomaton-girona.webp");
}

.hero-slider--andorra,
.bannerAndorra .banner-slider,
.bannerAndorra + .banner-slider,
#home.bannerAndorra .banner-slider,
#home.bannerAndorra + .banner-slider {
  background-image: url("../images/fotomaton-andorra.webp");
}

.banner-slider .callbacks_container,
.hero-slider .callbacks_container {
  position: relative;
  z-index: 2;
}

.banner-slider .rslides,
.hero-slider .rslides {
  position: relative;
  z-index: 2;
  overflow: hidden;
  width: 100%;
  min-height: 400px;
  margin: 0;
  padding: 0;
}

/* Restaurar carrusel: un solo slide visible (ResponsiveSlides usa clase *_on) */
.banner-slider .rslides li,
.hero-slider .rslides li {
  position: absolute !important;
  display: none !important;
  float: none !important;
  width: 100% !important;
  left: 0 !important;
  top: 0 !important;
  background: transparent !important;
}

.banner-slider .rslides li[class*="_on"],
.hero-slider .rslides li[class*="_on"] {
  position: relative !important;
  display: block !important;
  float: left !important;
  opacity: 1 !important;
  z-index: 2 !important;
}

/* Antes de que ResponsiveSlides inicialice el ul */
.banner-slider .rslides:not([class*="callbacks"]) li,
.hero-slider .rslides:not([class*="callbacks"]) li {
  display: none !important;
}

.banner-slider .rslides:not([class*="callbacks"]) li:first-child,
.hero-slider .rslides:not([class*="callbacks"]) li:first-child {
  display: block !important;
  position: relative !important;
  opacity: 1 !important;
  z-index: 2 !important;
}

.banner-slider .banner-info,
.hero-slider .banner-info {
  position: relative;
  z-index: 2;
  width: 92%;
  max-width: 920px;
  margin: 8% auto 0;
  padding: 1.75rem 1.5rem;
  text-align: center;
  background: rgba(30, 42, 43, 0.55);
  border-radius: 14px;
}

.banner-slider .banner-info h1,
.banner-slider .banner-info h2,
.banner-slider .banner-info h3,
.hero-slider .banner-info h1,
.hero-slider .banner-info h2,
.hero-slider .banner-info h3 {
  color: #fff !important;
}

.banner-slider .banner-info h3,
.hero-slider .banner-info h3 {
  color: #8ec9cd !important;
}

.banner-slider .banner-info p,
.hero-slider .banner-info p {
  color: rgba(255, 255, 255, 0.95) !important;
}

.banner-slider .banner-info a,
.banner-slider .banner-info a.hvr-bounce-to-bottom,
.hero-slider .banner-info a,
.hero-slider .banner-info a.hvr-bounce-to-bottom {
  color: #fff !important;
  border-color: #fff !important;
  margin-left: 0 !important;
  margin-top: 1.25rem;
  display: inline-block;
}

/* Flechas laterales + puntos centrados abajo (sin solapar) */
.banner-slider .callbacks_container,
.hero-slider .callbacks_container {
  padding-bottom: 3.25rem;
}

.banner-slider .callbacks_nav,
.hero-slider .callbacks_nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-top: 0 !important;
  width: 48px;
  height: 48px;
  background-size: auto 48px;
  z-index: 6;
  opacity: 0.9;
}

.banner-slider .callbacks_nav.prev,
.hero-slider .callbacks_nav.prev {
  left: 0.75rem;
  right: auto;
  background-position: left center;
}

.banner-slider .callbacks_nav.next,
.hero-slider .callbacks_nav.next {
  right: 0.75rem;
  left: auto;
  background-position: right center;
}

.banner-slider .callbacks_tabs,
.hero-slider .callbacks_tabs {
  position: absolute;
  bottom: 0.85rem;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  margin: 0;
  padding: 0;
  z-index: 6;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  width: auto;
  list-style: none;
}

.banner-slider .callbacks_tabs li,
.hero-slider .callbacks_tabs li {
  margin: 0;
  display: inline-block;
}

@media (max-width: 768px) {
  .banner-slider .callbacks_nav,
  .hero-slider .callbacks_nav {
    width: 40px;
    height: 40px;
    background-size: auto 40px;
  }

  .banner-slider .callbacks_nav.prev,
  .hero-slider .callbacks_nav.prev {
    left: 0.35rem;
  }

  .banner-slider .callbacks_nav.next,
  .hero-slider .callbacks_nav.next {
    right: 0.35rem;
  }

  .banner-slider .callbacks_tabs,
  .hero-slider .callbacks_tabs {
    bottom: 0.5rem;
  }
}

.banner-slider .wow,
.hero-slider .wow {
  visibility: visible !important;
  opacity: 1 !important;
  animation: none !important;
}