:root {
    --bg-primary: #07070f;
    --bg-secondary: #0d0d1a;
    --bg-card: #0f0f1e;
    --border: rgba(88, 101, 242, 0.15);
    --accent: #5865f2;
    --accent-glow: rgba(88, 101, 242, 0.3);
    --text-primary: #f0f0ff;
    --text-secondary: #8888aa;
    --nav-bg: rgba(7, 7, 15, 0.9);
    --discord-dark: #313338;
    --discord-msg: #2b2d31;
}

.theme-light {
    --bg-primary: #f8fafc;
    --bg-secondary: #f1f5f9;
    --bg-card: #ffffff;
    --border: rgba(88, 101, 242, 0.2);
    --accent: #5865f2;
    --accent-glow: rgba(88, 101, 242, 0.15);
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --nav-bg: rgba(248, 250, 252, 0.9);
    --discord-dark: #ffffff;
    --discord-msg: #f2f3f5;
}

body { background-color: var(--bg-primary); color: var(--text-primary); transition: background-color 0.3s, color 0.3s; font-family: 'Inter', sans-serif; overflow-x: hidden; }

body.lang-en .es-only { display: none !important; }
body.lang-es .en-only { display: none !important; }

.text-gradient { background: linear-gradient(135deg, #ffffff 0%, #a5aff8 50%, #5865f2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.theme-light .text-gradient { background: linear-gradient(135deg, #0f172a 0%, #334155 50%, #5865f2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.glow-border { border: 1px solid var(--border); box-shadow: 0 0 0 1px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.02); }
.card-hover { transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.card-hover:hover { transform: translateY(-2px); border-color: rgba(88, 101, 242, 0.4); box-shadow: 0 8px 32px var(--accent-glow); }

.reveal { opacity: 0; transform: scale(0.95) translateY(15px); transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.reveal.active { opacity: 1; transform: scale(1) translateY(0); }

/* Filtro automático para oscurecer el logo blanco en Modo Claro */
.theme-light .site-logo { filter: brightness(0.15) contrast(1.2) drop-shadow(0 2px 4px rgba(0,0,0,0.1)); transition: filter 0.3s ease; }

@keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0px); } }
.animate-float { animation: float 4s ease-in-out infinite; }

.sync-text { opacity: 0; }
@keyframes slideWrite { 0% { transform: translateX(-20px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
.page-loaded .animate-slide-write { animation: slideWrite 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes revealWrite { 0% { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); opacity: 1; } 100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: 1; } }
.page-loaded .animate-reveal-write { animation: revealWrite 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards; opacity: 1; }
@keyframes subtlePulse { 0%, 100% { filter: drop-shadow(0 0 0px rgba(88,101,242,0)); } 50% { filter: drop-shadow(0 0 8px rgba(88,101,242,0.6)); } }
.animate-subtle-pulse { animation: subtlePulse 3s infinite ease-in-out; }

.faq-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }

.tooltip-content { visibility: hidden; opacity: 0; transform: translateY(4px) scale(0.97); transition: all 0.2s cubic-bezier(0.34, 1.4, 0.64, 1); pointer-events: none; z-index: 50;}
.group:hover .tooltip-content { visibility: visible; opacity: 1; transform: translateY(0) scale(1); }
.tooltip-box { background-color: var(--bg-card); border: 1px solid var(--border); box-shadow: 0 10px 40px rgba(0,0,0,0.3); }

#loader { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bg-primary); transition: opacity 0.5s ease-out; }
.loader-ring { width: 120px; height: 120px; border: 4px solid rgba(88,101,242,0.15); border-top: 4px solid var(--accent); border-radius: 50%; animation: spin 1s linear infinite; position: absolute;}
@keyframes spin { to { transform: rotate(360deg); } }
.grid-bg { background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 60px 60px; }