/* --- Estilos del Preloader --- */

#preloader {
    /* Cubre toda la pantalla */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Elige el color de fondo (por ejemplo, el color principal de tu marca) */
    background-color: white; 
    z-index: 9999; /* Asegura que esté por encima de todo */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Define la transición para una desaparición suave */
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

/* Oculta el preloader después de la animación */
.preloader-hidden {
    opacity: 0;
    visibility: hidden;
}

/* --- Estilos del Logo --- */

.logo-animado {
    /* Ajusta el tamaño de tu logo. Por ejemplo, 200px. */
    width: 40rem; 
    height: auto;
    /* Aplica la animación */
    animation: zoomInOut 3.5s ease-in-out forwards; 
    /* El tiempo de la animación es clave (3.5s es el total antes de que se oculte) */
}

/* --- Definición de la Animación (Keyframes) --- */

@keyframes zoomInOut {
    0% {
        transform: scale(0.5); /* Empieza pequeño */
        opacity: 0;
    }
    25% {
        transform: scale(1.2); /* Crece un poco */
        opacity: 1;
    }
    75% {
        transform: scale(1.0); /* Se mantiene */
        opacity: 1;
    }
    100% {
        transform: scale(1.5); /* Termina un poco grande */
        opacity: 0; /* Desaparece suavemente */
    }
}

/* --- Estilos del Contenido Principal --- */

#contenido-principal {
    /* Asegúrate de que el contenido principal sea invisible o esté listo para mostrarse */
    padding-top: 50px; 
    text-align: center;
    /* Estilos normales de tu página */
}