/* 1. El contenedor principal ocupa toda la pantalla */
#home {
    position: relative;
    width: 100%; 
    overflow: hidden;
}

/* 2. El slider de imágenes de fondo cubre el 100% absoluto */
.home-slider {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 1;
}

.home-slider .slide-bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

/* 3. La capa de textos cubre todo el ancho y alto, centrando el contenido */
.fixed-hero-content {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* Permite deslizar el slider de fondo */
}

/* Habilitar clics en los botones */
.fixed-hero-content a, 
.fixed-hero-content button {
    pointer-events: auto;
}

/* Fondo del slide */
.slide-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

/* Asegura que el contenido quede arriba */
.home-slider .container,
.welcome-intro {
    position: relative;
    z-index: 5;
}

/* Flechas */
.swiper-button-next,
.swiper-button-prev {
    color: #fff;
}

/* Bullets */
.swiper-pagination-bullet-active {
    background: #fff;
}

/* Para que el slider tome todo el alto del home */
.home-slider,
.home-slider .swiper-slide {
    height: 100%;
}