@charset "UTF-8";

/* Estado inicial: fondo transparente */
.initial-navbar {
  background-color: transparent;
  transition: background-color 0.3s ease;
  height: 80px;
  border-bottom: solid 1px rgba(255, 255, 255, 0.15);
}

/* Estado scrolled: fondo blanco */
.initial-navbar.scrolled-navbar {
  background-color: #fff;
}

/*.initial-navbar .navbar-brand,*/
.initial-navbar .navbar-toggler,
.initial-navbar .navbar-toggler * {
  filter: drop-shadow(0px 1000px 0 #fff);
  transform: translateY(-1000px);
}
@media (min-width: 1200px) {
  .initial-navbar:not(.scrolled-navbar) ul.navbar-nav > li.nav-item > a{
    color: rgba(255,255,255,0.55);
  }
} /* navbar-expand-xl */

.initial-navbar .navbar-brand .logo-light {
  display: block;
}
.initial-navbar .navbar-brand .logo-color {
  display: none;
}
.initial-navbar.scrolled-navbar .navbar-brand .logo-light {
  display: none;
}
.initial-navbar.scrolled-navbar .navbar-brand .logo-color {
  display: block;
}

.initial-navbar.scrolled-navbar .navbar-brand,
.initial-navbar.scrolled-navbar .navbar-toggler > * {
  filter: revert;
  transform: revert;
}

.initial-navbar .navbar-toggler {
  animation: navbarSlideDown 0.5s ease forwards;
}

.initial-navbar.scrolled-navbar .offcanvas-body {
  animation: navbarSlideDown 0.5s ease forwards;
}

@keyframes navbarSlideDown {
  0% {
    transform: translateY(0px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}


#mainBanner .swiper[class*=swiper-header] {
  --swiper-theme-color: #fff;
  --swiper-navigation-sides-offset: 0;
}

#mainBanner .swiper-thumbs .swiper-slide {
  transform: translateY(0);
  transition: transform 0.3s;
}

#mainBanner .swiper-thumbs .swiper-slide-thumb-active {
  transform: translateY(-0.3333333333rem);
}

#mainBanner .swiper-thumbs .swiper-slide .card {
  border: 1px solid rgba(255, 255, 255, 0.15);
}

#mainBanner .swiper-thumbs .swiper-slide .card-body {
  opacity: 0.25;
  transition: opacity 0.3s;
  pointer-events: none;
}

#mainBanner .swiper-thumbs .swiper-slide.swiper-slide-thumb-active .card-body {
  opacity: 1;
  pointer-events: auto;
}

#mainBanner #swiperArrowOverlay {
  opacity: 0.99;
  transition: opacity 1s ease;
}

#mainBanner .swiper-slide-thumb-active  .card {
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}