#preloader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: white;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
        transition: opacity 0.5s ease;
    }
    
    #preloader img {
        max-width: 300px; /* Ajusta según el tamaño de tu logo */
        width: auto;
        height: auto;
        animation: fadeIn 1s ease;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; transform: scale(0.9); }
        to { opacity: 1; transform: scale(1); }
    }
    
    body.loaded #preloader {
        opacity: 0;
        pointer-events: none;
    }
    
    /* Ocultar el contenido inicialmente */
    body:not(.loaded) > *:not(#preloader) {
        visibility: hidden;
    }