/* --- Estilos Generales (Para Escritorio y Base) --- */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Montserrat', sans-serif; 
    color: #000;
    background-color: #f0f0f0;
    overflow: hidden;
    box-sizing: border-box;
}

body {
    background-image: url('assets/BgImageFitter.png'); 
    background-size: cover; 
    background-position: center center;
    background-repeat: no-repeat;
    
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 10vh;
}

body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(197, 197, 197, 0.3);
    z-index: 1;
}

.container {
    text-align: center;
    position: relative;
    z-index: 2;
    padding: 20px;
    width: 90%;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    align-items: center;
    top: 24px;
}

/* --- Estilos de los Elementos --- */
.logo-wrapper { width: 100%; }
.logo-image { max-width: 600px; width: 100%; height: auto; display: block; margin: 0 auto; }
.text-wrapper { width: 100%; margin-top: 16px; }
.coming-soon-text { font-size: 32px; font-weight: 400; letter-spacing: 0.1em; color: #000000; margin: 0; }
.loader-wrapper { width: 100%; margin-top: 16px; }

/* --- Animación del SVG --- */
.loader { transform-origin: center; animation: spin 2s linear infinite; }
.loader-circle { stroke: #7CFC00; stroke-linecap: round; stroke-dasharray: 100, 200; animation: draw 1.5s ease-in-out infinite; }
@keyframes spin { 100% { transform: rotate(360deg); } }
@keyframes draw { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 100, 200; stroke-dashoffset: -35; } 100% { stroke-dasharray: 100, 200; stroke-dashoffset: -124; } }

/* --- Estilos para los Iconos Sociales (Base para Escritorio) --- */
.social-icons {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 10;
    display: flex;
    gap: 15px;
}
.social-icons img { width: 35px; height: 35px; transition: transform 0.2s ease-in-out; }
.social-icons a:hover img { transform: scale(1.15); }


/* ======================================================= */
/*          ¡AQUÍ EMPIEZA LA MAGIA PARA MÓVILES!          */
/* ======================================================= */

@media (max-width: 768px) {

    body {
        /* Mantenemos la imagen de móvil y su posición */
        background-image: url('assets/BgImageMobile.png');
        background-position: center center;
    }

    .container {
        /* Centramos el contenido principal en la vista móvil */
        align-items: center;
        justify-content: center;
        top: 0; /* Reseteamos la posición para un mejor centrado */
        padding-bottom: 0;
    }

    .logo-image {
        max-width: 80%;
    }

    .coming-soon-text {
        font-size: 24px;
    }
    
    /* ======================================================= */
    /*   ¡CORREGIDO! Movemos los iconos a la esquina SUPERIOR  */
    /* ======================================================= */
    .social-icons {
        top: 20px;       /* Distancia desde arriba */
        right: 20px;     /* Distancia desde la derecha */
        bottom: auto;    /* Anulamos la posición inferior */
    }
}