/* Estilos generales para ambos sliders */
.slider-container {
    position: relative;
    max-width: 1110px;
    margin: 0 auto;
    overflow: hidden;
}

/* Slider principal */
.slider-container-principal {
    height: 450px;
}

.slider-container-principal .slider-item {
    height: 450px;
}

/* Slider pequeño */
.slider-container-secundario {
    height: 155px;
}

.slider-container-secundario .slider-item {
    height: 155px;
}

/* Configuración común para cada slider-item */
.slider-item {
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 0;
    left: 100%;
    opacity: 0;
    transition: all 0.5s ease;
}

/* Slider-item activo */
.slider-item.active {
    left: 0;
    opacity: 1;
}

/* Controles del slider */
.slider-controls {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
}

.slider-controls span {
    cursor: pointer;
}

/* Responsivo: ajustar el tamaño en pantallas pequeñas */
@media (max-width: 768px) {
    .slider-container-principal {
        height: 250px;
    }

    .slider-container-principal .slider-item {
        height: 250px;
    }

    .slider-container-secundario {
        height: 125px;
    }

    .slider-container-secundario .slider-item {
        height: 125px;
    }
}