/* css/styles.css */

/* Fuente Global */
body {
    font-family: 'Outfit', sans-serif;
    scroll-behavior: smooth;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Scrollbar personalizado (Toque Morado) */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #1e1b4b; 
}
::-webkit-scrollbar-thumb {
    background: #7c3aed; /* Morado base */
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
    background: #d946ef; /* Fuchsia neón al hover */
}

/* --- BARRA DE NAVEGACIÓN (CRISTAL MORADO) --- */

/* MODO CLARO */
.glass-nav {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(124, 58, 237, 0.1); /* Borde sutil morado */
    transition: all 0.3s ease;
}

/* MODO OSCURO (Aura Morada) */
.dark .glass-nav {
    background: rgba(10, 5, 20, 0.85) !important; /* Fondo casi negro morado */
    border-bottom: 1px solid rgba(139, 92, 246, 0.2);
    box-shadow: 0 0 15px rgba(124, 58, 237, 0.15); /* El Aura */
}

/* --- FONDOS Y GRADIENTES --- */

/* Hero Gradient: De blanco a un morado muy suave */
.hero-gradient {
    background: linear-gradient(135deg, #f5f3ff 0%, #ffffff 100%);
}

/* Hero Dark: De negro profundo a morado cósmico */
.dark .hero-gradient {
    background: radial-gradient(circle at 50% 0%, #2e1065 0%, #020005 70%);
}

/* --- EFECTOS VISUALES --- */

/* Tarjetas flotantes con resplandor */
.card-hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
    transform: translateY(-5px);
}

/* En modo oscuro, el hover brilla */
.dark .card-hover:hover {
    box-shadow: 0 0 20px rgba(167, 139, 250, 0.15);
    border-color: rgba(139, 92, 246, 0.5);
}

.no-scroll {
    overflow: hidden;
}

/* Animaciones suaves */
.animate-fade-in-down { animation: fadeInDown 0.5s ease-out; }
.animate-fade-in-up { animation: fadeInUp 0.5s ease-out; }

@keyframes fadeInDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }