/* 🛡️ RESPALDO CSS - ANIMACIÓN ESFERA DORADA STUDIO 1827 
   📅 Creado: Septiembre 26, 2024
   🎯 Respaldo completo del loader perfecto */

/* Variables CSS necesarias */
:root {
    --studio-white: #FFFFFF;
    --studio-black: #1A1A1A;
    --studio-gold: #C5A349;
}

/* ===== HERO LOADER CON PALETA SIMPLIFICADA ===== */
#hero-loader {
    background: radial-gradient(circle at center, var(--studio-black) 0%, #000000 100%);
    z-index: 9999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aperture-ring {
    position: relative;
    width: 200px;
    height: 200px;
    border: 3px solid var(--studio-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: apertureFocus 2s ease-in-out infinite;
}

@keyframes apertureFocus {
    0%, 100% {
        transform: scale(1);
        border-color: var(--studio-gold);
    }
    50% {
        transform: scale(1.05);
        border-color: var(--studio-gold);
    }
}

.aperture-center {
    width: 60px;
    height: 60px;
    background: var(--studio-black);
    border-radius: 50%;
    border: 2px solid var(--studio-gold);
    position: relative;
    animation: centerPulse 2s ease-in-out infinite;
}

@keyframes centerPulse {
    0%, 100% {
        transform: scale(1);
        background: var(--studio-black);
    }
    50% {
        transform: scale(0.9);
        background: var(--studio-gold);
    }
}

.loader-fadeout {
    opacity: 0;
    transition: opacity 1s ease-out;
}

/* Estilo para el contenido principal */
#main-content {
    opacity: 0;
    transition: opacity 0.8s ease;
}