/* 
 * Estilos para la Landing Page de OPPO Reno13 F 5G
 * Refactorizado para mantener código limpio y organizado
 */

/* Reset y configuración base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Asegurar que no haya scroll horizontal en ningún dispositivo */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
        position: relative;
    }
    
    .main-content {
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
    }
    
    /* Asegurar que todos los elementos tengan ancho correcto */
    * {
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* Prevenir scroll horizontal en imágenes */
    img, picture, source {
        max-width: 100%;
        height: auto;
    }
}

/* Main content container - ajustar para navbar fijo */
.main-content {
    width: 100%;
    margin: 0 auto;
    overflow-x: hidden;
}

/* Secciones de imágenes principales */
.image-section {
    width: 100%;
    position: relative;
    overflow: hidden;
    opacity: 1;
    transition: opacity 0.6s ease-in-out;
}

.responsive-image {
    width: 100%;
    object-fit: contain;
    display: block;
}

/* Configuración de visibilidad para diferentes dispositivos */
.mobile-image {
    display: none;
}

.desktop-image {
    display: block;
}

/* Estados de carga */
.loading {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

/* Animación de carga */
@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Media Queries para dispositivos móviles */
@media (max-width: 768px) {
    .main-content {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 128px 0 0 0;
        overflow-x: hidden;
    }
    
    .mobile-image {
        display: block;
    }
    
    .desktop-image {
        display: none;
    }
}

/* Media Queries para dispositivos móviles pequeños */
@media (max-width: 480px) {
    .main-content {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 128px 0 0 0;
        overflow-x: hidden;
    }
    
    .image-section {
        width: 100%;
        overflow: hidden;
    }
    
    .responsive-image {
        width: 100%;
        max-width: 100%;
        height: auto;
    }
}

/* Media Queries para dispositivos móviles muy pequeños */
@media (max-width: 375px) {
    .main-content {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 128px 0 0 0;
        overflow-x: hidden;
    }
    
    body {
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
    }
    
    html {
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
    }
}

/* Optimizaciones para pantallas muy grandes */
@media (min-width: 1920px) {
    .image-section {
        height: 100vh;
    }
    
    .responsive-image {
        object-position: center;
    }
}