/* Loader de pantalla completa */
#page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0.96;
    background: #252525;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

#page-loader.fade-out {
    opacity: 0;
    visibility: hidden;
}

.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 400px;
    width: 90%;
    margin-top: -100px;
}

.loader-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.logo-inner {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
}

/* Progress bar opcional */
.loader-progress {
    width: 50%;
    height: 3px;
    background-color: #f0f0f0;
    border-radius: 1px;
    overflow: hidden;
    margin-top: -50px;
    z-index: 2;
}

.loader-progress-bar {
    height: 100%;
    background: linear-gradient(90grad, #fbcf38, #0295b4);
    width: 0;
    border-radius: 1px;
    animation: loading 3s ease-out forwards;
}

.loader-video {
    width: 700px;
}

@keyframes loading {
    0% { width: 0%; }
    20% { width: 30%; }
    50% { width: 70%; }
    80% { width: 90%; }
    100% { width: 100%; }
}

/* Responsive */
@media (max-width: 768px) {
    .loader-progress {
        margin-top: 4px;
    }
}

/* Ocultar scroll mientras carga */
body.loading {
    overflow: hidden;
}