/* --- ESTILOS BASE --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.slider-container {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.slides {
    display: flex;
    height: 100%;
    transition: transform 0.5s ease-in-out;
}

/* Estilos comunes para todos los slides */
.slide {
    min-width: 100vw;
    height: 100vh;
    background-size: cover; /* Asegura que la imagen cubra todo el slide */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat;
}

/* --- IMÁGENES PARA DESKTOP (Ancho por defecto) --- */

.slide-1 {
    background-image: url('imagen2.jpg'); /* Imagen de escritorio 1 */
}

.slide-2 {
    background-image: url('imagen1.jpg'); /* Imagen de escritorio 2 */
}



/* --- IMÁGENES PARA MOBILE (Media Query) --- */
@media (max-width: 768px) {
    .slide-1 {
        background-image: url('mobile-imagen1.jpg'); /* Imagen de móvil 1 */
    }

    .slide-2 {
        background-image: url('mobile-imagen2.jpg'); /* Imagen de móvil 2 */
    }

    
}