/* Estilos solo para el primer slider-principal */
.slider-principal:first-of-type {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.slider-principal:first-of-type img {
    width: 100%;
    height: auto;
}

/* Ocultar todas las imágenes de escritorio y móvil por defecto solo en el primer slider */
.slider-principal:first-of-type .img-escritorio, 
.slider-principal:first-of-type .img-movil {
    display: none !important;
}

/* Solo mostrar la imagen activa */
.slider-principal:first-of-type .img-escritorio.active, 
.slider-principal:first-of-type .img-movil.active {
    display: block !important;
    width: 100%; /* Ajustar para que ocupe todo el contenedor */
    height: auto;
}

/* Para escritorio: Solo mostrar las imágenes de escritorio en pantallas más grandes */
@media (min-width: 768px) {
    .slider-principal:first-of-type .img-escritorio.active {
        display: block !important;
    }

    .slider-principal:first-of-type .img-movil {
        display: none !important; /* Ocultar las imágenes móviles en escritorio */
    }
}

/* Para móvil: Solo mostrar las imágenes de móvil en pantallas más pequeñas */
@media (max-width: 767px) {
    .slider-principal:first-of-type .img-movil.active {
        display: block !important;
    }

    .slider-principal:first-of-type .img-escritorio {
        display: none !important;  /* Asegurarse de ocultar las imágenes de escritorio en móviles */
    }
}