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

html, body {
    height: 100dvh;
    width: 100%;
    overflow: hidden; /* Evita scrollbars */
    background-color: #050505; /* Fondo negro por defecto */
}

/* Contenedor principal */
.container {
    height: 100vh;
    height: 100dvh; /* Altura dinámica del viewport para móviles */
    width: 100vw;
    display: flex;
    align-items: center; /* Centrado vertical */
    justify-content: center; /* Centrado horizontal */
    background-color: #050505; /* Fondo negro por defecto */
    position: relative;
}

/* Imagen principal */
.main-image {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Mantiene la proporción de la imagen */
    object-position: center; /* Centra la imagen */
    display: block;
}

/* Responsive design - Móviles */
@media (max-width: 768px) {
    .container {
        padding: 0;
        height: 100vh;
        height: 100dvh;
        min-height: 100vh;
        min-height: 100dvh;
        position: relative;
    }
    
    .main-image {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: auto;
        height: auto;
        max-width: 95vw;
        max-height: 95vh;
        max-height: 95dvh;
        object-fit: contain;
        object-position: center;
        display: block;
    }
}

/* Pantallas muy pequeñas en altura */
@media (max-height: 600px) {
    .container {
        padding: 0;
        height: 100vh;
        height: 100dvh;
        position: relative;
    }
    
    .main-image {
        position: absolute;
        top: 45%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-height: 90vh;
        max-height: 90dvh;
        max-width: 95vw;
        width: auto;
        height: auto;
    }
}

/* Corrección específica para iOS Safari */
@supports (-webkit-touch-callout: none) {
    .container {
        height: -webkit-fill-available;
        min-height: -webkit-fill-available;
    }
    
    @media (max-width: 768px) {
        .container {
            height: -webkit-fill-available;
            min-height: -webkit-fill-available;
            position: relative;
        }
        
        .main-image {
            position: absolute;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }
}

/* Corrección para Android Chrome */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    @media (max-width: 768px) {
        .container {
            height: 100vh;
            height: calc(var(--vh, 1vh) * 100);
            position: relative;
        }
        
        .main-image {
            position: absolute;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }
}