/**
 * Header: fondo oscuro para que la barra se lea bien sobre fondos claros
 */
.header-area.header-2.header-absolute .header-wrapper {
  background-color: rgba(12, 30, 33, 0.92);
  backdrop-filter: blur(12px);
}
.header-area.header-2.header-absolute .search_popup {
  background-color: rgba(12, 30, 33, 0.95);
  backdrop-filter: blur(12px);
}

/**
 * Ajustes para el slider Hero: evita que al cambiar de slide
 * se vea parte de la imagen anterior. Forzamos apilado total.
 */
.tj-slider-section .hero-slider {
  overflow: hidden;
}

.hero-slider .swiper-wrapper {
  position: relative;
  height: 92.5vh;
  min-height: 400px;
  overflow: hidden;
}

/* Todos los slides en la misma posición (apilados) */
.hero-slider .swiper-slide {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden;
  z-index: 1;
  margin: 0 !important;
}

.hero-slider .swiper-slide-active {
  z-index: 2;
}

/* Imagen de fondo cubre todo el slide */
.hero-slider .tj-slider-item .slider-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

@media (max-width: 575px) {
  .hero-slider .swiper-wrapper {
    height: 100vh;
    min-height: 360px;
  }
}

/* Navegación del hero: asegurar que los botones prev/next sean clickeables */
.hero-slider .hero-navigation {
  z-index: 10;
  pointer-events: none;
}

.hero-slider .hero-navigation .slider-prev,
.hero-slider .hero-navigation .slider-next {
  pointer-events: auto;
  cursor: pointer;
}

/* Carga progresiva: las secciones aparecen al hacer scroll */
.progressive-sections > section,
.progressive-sections > .tj-slider-section {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.45s ease-out, transform 0.45s ease-out;
}
.progressive-sections > section.is-visible,
.progressive-sections > .tj-slider-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Primera sección (hero) visible de inmediato */
.progressive-sections > .tj-slider-section:first-child {
  opacity: 1;
  transform: none;
}
.progressive-sections > .tj-slider-section:first-child.is-visible {
  opacity: 1;
  transform: none;
}