/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

body {
    font-family: 'Arial', sans-serif;
    background-color: #fff; /* Fondo negro para cuando la imagen no cubra todo */
}

.background-container {
    width: 100vw;
    height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Background para móviles (SM.jpg) */
    background-image: url('SM.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll; /* Cambiado de fixed para mejor performance */
}

/* Media queries optimizadas para mejor visualización */

/* Tablets y Desktop - usar XL.jpg */
@media (min-width: 768px) {
    .background-container {
        background-image: url('XL.jpg');
        background-position: center center;
        background-size: contain;
    }
}

/* Desktop mediano y grande */
@media (min-width: 1200px) {
    .background-container {
        background-image: url('XL.jpg');
        background-position: center center;
        background-size: contain;
    }
}

/* Pantallas ultra anchas y 4K */
@media (min-width: 1920px) {
    .background-container {
        background-image: url('XL.jpg');
        background-position: center center;
        background-size: contain;
    }
}

/* Orientación landscape en móviles - mantener SM.jpg */
@media (max-width: 767px) and (orientation: landscape) {
    .background-container {
        background-image: url('SM.jpg');
        background-position: center center;
        background-size: cover;
    }
}

/* Dispositivos muy pequeños */
@media (max-width: 480px) {
    .background-container {
        background-image: url('SM.jpg');
        background-position: center center;
        background-size: cover;
    }
}

/* Overlay muy sutil para no afectar la visualización de la imagen */
.background-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.02); /* Overlay mínimo */
    z-index: 1;
    pointer-events: none;
}

/* Optimizaciones para diferentes ratios de aspecto en desktop */
@media (min-width: 768px) and (min-aspect-ratio: 16/9) {
    .background-container {
        background-size: contain;
        background-position: center center;
    }
}

@media (min-width: 768px) and (max-aspect-ratio: 4/3) {
    .background-container {
        background-size: contain;
        background-position: center center;
    }
}

/* Para pantallas ultra anchas en desktop */
@media (min-width: 768px) and (min-aspect-ratio: 21/9) {
    .background-container {
        background-size: contain;
        background-position: center center;
    }
}

/* Optimización para pantallas de alta densidad en desktop */
@media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 2), 
       (min-width: 768px) and (min-resolution: 192dpi) {
    .background-container {
        background-size: contain;
        background-position: center center;
    }
}