/**
 * Estilos para el Slider de Encabezado (Swiper.js)
 */

/* ========================================
   SLIDER CONTAINER
   ======================================== */

.slider-container {
    width: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
    line-height: 0;
}

.swiper {
    width: 100%;
    height: auto;
}

.swiper-slide {
    width: 100%;
}

.slider-imagen {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* ========================================
   NAVEGACIÓN
   ======================================== */

.swiper-button-prev,
.swiper-button-next {
    color: white;
}

.swiper-button-prev {
    left: 50px;
}

.swiper-button-next {
    right: 50px;
}

.swiper-pagination-bullet {
    background: white;
    opacity: 0.7;
}

.swiper-pagination-bullet-active {
    background: var(--color-primary);
    opacity: 1;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .swiper-button-prev,
    .swiper-button-next {
        display: none;
    }
}