/* ============================================================================
   INNER BANNER - ESTILOS MODULARIZADOS

   Componente: Banner interno para páginas (no home)
   Incluye: Slider de imágenes Swiper, video background, título animado,
            botón Book Now, navegación de slider e indicador de scroll

   Estructura HTML:
   - #innerBanner: Contenedor principal (fullscreen)
   - #innerBanner .container: Contenedor de contenido
   - #caption: Título animado
   - .bookBtnBox: Contenedor del botón Book Now
   - .inner-slider-video: Video background
   - .inner-slider: Slider Swiper
   - .swiperNav: Navegación (botones prev/next fullscreen)
   - .swiperCountDots: Contador y paginación
   - .scroll-indicator: Ícono para indicar scroll

   Responsivo:
   - Desktop >1920px: 100vh, tamaños grandes
   - Desktop 992px-1920px: Ajustes medios
   - Tablet/Mobile <992px: 80vh, tamaños reducidos

   Importado desde: can-salia-hotels.css (líneas 2205-2467)
   Fecha modularización: 2026-01-02
   ============================================================================ */

/* ============================================================================
   CONTENEDOR PRINCIPAL Y LAYOUT
   ============================================================================ */

#innerBanner {
  float: left;
  width: 100%;
  position: relative;
  z-index: 1;
}

#innerBanner > .container {
  max-width: calc(100% - 98px - 98px);
  height: 100%;
  padding: 0;
  position: absolute;
  right: 0;
  left: 0;
  z-index: 2;
}

/* ============================================================================
   CAPTION - TÍTULO ANIMADO
   ============================================================================ */

#innerBanner #caption {
  margin: 0;
}

#innerBanner #caption .title {
  text-align: left;
}

#innerBanner #caption .subtitle {
  text-align: left;
}

/* ============================================================================
   BOTÓN BOOK NOW
   ============================================================================ */

#innerBanner > .container .bookBtnBox {
  display: none;
  padding: 10px;
  width: 100%;
  background-color: transparent;
  text-align: center;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 4;
}

#innerBanner > .container .bookBtnBox:after {
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgb(107 107 108 / 40%);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

#innerBanner > .container .bookBtnBox .bookNowBtn {
  display: inline-block;
  width: auto;
  padding: 12px 25px;
  border: 1px solid #ffffff;
  background-color: #ffffff;
  border-radius: 0px;
  font-size: 1rem;
  color: #606060;
  font-weight: 500;
  line-height: 1.05rem;
  letter-spacing: 0.0313rem;
  text-transform: uppercase;
  text-decoration: none;
  transition: .8s cubic-bezier(.3, 1, .3, 1);
}

#innerBanner > .container .bookBtnBox .bookNowBtn:hover {
  border-color: #8C8275;
  background-color: #8C8275;
  color: #606060;
}

#innerBanner > .container .bookBtnBox .bookNowBtn .btnText {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  width: 100%;
  overflow: hidden;
}

#innerBanner > .container .bookBtnBox .bookNowBtn .btnText span {
  width: 100%;
  white-space: nowrap;
  text-shadow: 0px calc(20px * 1.25) transparent;
  transform: translateY(0);
  transition: text-shadow .8s cubic-bezier(.3, 1, .3, 1);
}

#innerBanner > .container .bookBtnBox .bookNowBtn:hover .btnText span {
  text-shadow: 0px 20px #ffffff;
  transform: translateY(calc(20px * -1));
  transition: all .8s cubic-bezier(.3, 1, .3, 1);
}

/* ============================================================================
   VIDEO BACKGROUND Y SLIDER
   ============================================================================ */

#innerBanner,
#innerBanner .inner-slider-video,
#innerBanner .inner-slider {
  width: 100vw;
  height: 100dvh;
}

#innerBanner .inner-slider-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

#innerBanner .inner-slider .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#innerBanner .inner-slider .swiper-slide picture,
#innerBanner .inner-slider .swiper-slide picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

#innerBanner .inner-slider .swiper-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

/* ============================================================================
   NAVEGACIÓN SWIPER - BOTONES PREV/NEXT (FULLSCREEN)

   Nota: Los botones ocupan el 50% del ancho cada uno (izquierda/derecha)
   para crear un área clickeable fullscreen. Los estilos base (tamaño,
   colores, iconos) están en swiper-bundle-controls.css
   ============================================================================ */

#innerBanner .inner-slider .swiperNav {
  display: flex;
  justify-content: space-between;
  gap: 0px;
  width: 100%;
  height: 100%;
  margin-top: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

#innerBanner .inner-slider .swiperNav [class*=swiper-button-] {
  width: 50%;
  height: 100%;
  background: none;
  border-radius: 0%;
}

#innerBanner .inner-slider .swiperNav .swiper-button-prev {
  cursor: url(../../images/swiper-prev-hero.svg) 28 28, auto;
}

#innerBanner .inner-slider .swiperNav .swiper-button-next {
  cursor: url(../../images/swiper-next-hero.svg) 28 28, auto;
  forced-color-adjust: none;
}

/* ============================================================================
   CONTADOR Y PAGINACIÓN SWIPER

   Nota: Muestra contador actual (ej: "1/8") y línea de progreso
   Los estilos base están en swiper-bundle-controls.css
   ============================================================================ */

#innerBanner .inner-slider .swiperCountDots {
  pointer-events: none;
  margin-top: 0;
  color: #FFFFFF;
  position: absolute;
  bottom: 30px;
  right: 15px;
  left: 15px;
}

#innerBanner .inner-slider .swiperCountDots [class*=swiper-button-] {
  display: none;
  width: 40px;
  height: 40px;
  background: #F3F1E7;
}

#innerBanner .inner-slider .swiperCountDots [class*=swiper-button-] img {
  width: 16px;
  filter: none;
}

#innerBanner .inner-slider .swiperCountDots .countline {
  display: inline-block;
  width: 64px;
  height: 1px;
  background: #ffffff;
  border-radius: 0px;
}

#innerBanner .inner-slider .swiperCountDots .swiper-pagination .swiper-pagination-bullet {
  background: #ffffff;
}

#innerBanner .inner-slider .swiperCountDots .swiper-pagination .swiper-pagination-bullet:hover,
#innerBanner .inner-slider .swiperCountDots .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #ffffff;
}

/* ============================================================================
   INDICADOR DE SCROLL - ANIMADO E INTERACTIVO

   Ícono que anima hacia arriba al cargar y bouncea continuamente.
   Es clickeable para llevar al siguiente scroll/sección.
   ============================================================================ */

@keyframes scrollIndicatorFadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes scrollIndicatorBounce {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(8px);
  }
}

#innerBanner .scroll-indicator {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  cursor: pointer;
  pointer-events: auto;
  opacity: 0;
  filter: brightness(0) invert(1);
  animation:
    scrollIndicatorFadeIn 0.6s ease-out 1.5s forwards,
    scrollIndicatorBounce 1.5s ease-in-out 2.1s infinite;
  transition: opacity 0.3s ease;
}

#innerBanner .scroll-indicator img {
  display: block;
  width: 40px;
  height: auto;
}

#innerBanner .scroll-indicator:hover {
  opacity: 0.7;
}