/* Mobile Background Fix CSS - Team Ruscitti */
/* Soluciones para problemas de fondos en dispositivos móviles */

/* Fix para background-attachment: fixed en iOS y dispositivos móviles */
@media screen and (max-width: 768px) {
    body {
        background-attachment: scroll !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;
        background-position: center center !important;
    }
    
    /* Fix para elementos con fondos fijos */
    .bg-textura, 
    [style*="background-attachment: fixed"] {
        background-attachment: scroll !important;
    }
}

/* Optimizaciones de rendimiento para fondos en móviles */
@media screen and (max-width: 480px) {
    /* Reducir calidad de imagen en móviles muy pequeños */
    body {
        background-size: cover !important;
        min-height: 100vh;
    }
    
    /* Asegurar que los contenedores ocupen todo el espacio */
    html, body {
        height: 100%;
        overflow-x: hidden;
    }
}

/* Fix para Safari y WebKit */
@supports (-webkit-appearance: none) {
    body {
        background-attachment: scroll !important;
    }
}

/* Fix para problemas de viewport en móviles */
@media screen and (orientation: landscape) and (max-height: 500px) {
    body {
        background-size: cover !important;
        background-position: center center !important;
    }
}

/* Asegurar que los overlays no interfieran con el fondo */
.bg-black.bg-opacity-40 {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}