:root {
    --bg-color: #f7f5ef;
    --bg-color-rgb: 247, 245, 239;
    --heading-color: #736C61;
    --text-color: #31302e;
    --accent-color: #e65c83;
    --accent-rgb: 230, 92, 131;
}

.dark {
    --bg-color: #151a21; 
    --bg-color-rgb: 13, 17, 23;
    --heading-color: #e6edf3;
    --text-color: #8b949e;
    --accent-color: #00ff41; 
    --accent-rgb: 0, 255, 65;
}

body { 
    background-color: var(--bg-color); 
    color: var(--text-color); 
    overflow-x: hidden; 
    transition: background-color 0.4s ease, color 0.4s ease;
}
html { scroll-behavior: smooth; }

/* Aura inicial animada */
@keyframes float-aura {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    33% { transform: translate(-45%, -55%) scale(1.1); opacity: 0.8; }
    66% { transform: translate(-55%, -45%) scale(1.05); opacity: 0.7; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
}
.hero-aura {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60vw;
    height: 60vw;
    max-width: 800px;
    max-height: 800px;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.3) 0%, rgba(var(--bg-color-rgb), 0) 70%);
    border-radius: 50%;
    filter: blur(60px);
    animation: float-aura 10s infinite ease-in-out;
    z-index: -1;
    pointer-events: none;
    transition: background 0.4s ease;
}

@keyframes pulse-slow {
    0% { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(1.1); opacity: 0.8; }
}
.section-aura {
    position: absolute;
    width: 40vw;
    height: 40vw;
    max-width: 600px;
    max-height: 600px;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.15) 0%, rgba(var(--bg-color-rgb), 0) 70%);
    border-radius: 50%;
    filter: blur(50px);
    z-index: -1;
    pointer-events: none;
    animation: pulse-slow 6s infinite alternate ease-in-out;
    transition: background 0.4s ease;
}

.icon-hover-aura { transition: all 0.3s ease; filter: grayscale(100%) opacity(80%); }
.group:hover .icon-hover-aura {
    transform: scale(1.1);
    filter: grayscale(0%) opacity(100%) drop-shadow(0 0 12px rgba(var(--accent-rgb), 0.6));
}

.icon-active {
    box-shadow: 0 0 20px 5px rgba(var(--accent-rgb), 0.4);
    border-color: var(--accent-color) !important;
    transition: box-shadow 0.5s ease, border-color 0.5s ease;
}

.header-glass {
    background-color: rgba(var(--bg-color-rgb), 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(128, 128, 128, 0.1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
}
.lang-active { color: var(--accent-color); font-weight: bold; }