/* Page Specific Styles Only (Globals moved to components.css) */
        
/* Highlight Utilities */
.highlight-ia-yellow {
    background: linear-gradient(120deg, #fbbf24 0%, #d97706 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
}

.highlight-metodologia { color: white; font-weight: 900; font-size: 1.1em; }
.highlight-ia-premium {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FF8C00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 900;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
    font-size: 1.05em;
}

.text-gradient-gold {
    background: linear-gradient(to right, #FFD700, #FFA000);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Nav Extras */
.nav-tagline-modern { display: none; align-items: center; gap: 1rem; }
@media (min-width: 768px) { .nav-tagline-modern { display: flex; } }
.tagline-separator { width: 1px; height: 24px; background: linear-gradient(180deg, transparent, rgba(255, 215, 0, 0.5), transparent); }
.tagline-text { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: #94a3b8; }

/* Mobile Menu Button */
.mobile-menu-btn { display: flex; padding: 0.5rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0.5rem; color: white; cursor: pointer; }
@media (min-width: 1024px) { .mobile-menu-btn { display: none; } }

/* Specific Page Styles */
.container-max { max-width: 80rem; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; }

/* Champions Icosahedron (Green/Indigo Matrix Theme) */
.champions-icosahedron-container { perspective: 1200px; width: 350px; height: 350px; position: relative; }
@media (max-width: 640px) { .champions-icosahedron-container { transform: scale(0.75); width: 280px; height: 280px; } }
.champions-icosahedron-shape { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; animation: rotate-champions 15s linear infinite; }
.champions-face { position: absolute; width: 180px; height: 180px; left: 50%; top: 50%; margin-left: -90px; margin-top: -90px; border: 2px solid rgba(34, 197, 94, 0.4); background: linear-gradient(135deg, rgba(34, 197, 94, 0.05), rgba(99, 102, 241, 0.05)); transform-style: preserve-3d; box-shadow: 0 0 20px rgba(34, 197, 94, 0.1), inset 0 0 30px rgba(99, 102, 241, 0.05); backface-visibility: visible; }
.champions-face1 { transform: rotateY(0deg) translateZ(120px); }
.champions-face2 { transform: rotateY(60deg) translateZ(120px); }
.champions-face3 { transform: rotateY(120deg) translateZ(120px); }
.champions-face4 { transform: rotateY(180deg) translateZ(120px); }
.champions-face5 { transform: rotateY(240deg) translateZ(120px); }
.champions-face6 { transform: rotateY(300deg) translateZ(120px); }
@keyframes rotate-champions { 0% { transform: rotateX(15deg) rotateY(0deg); } 100% { transform: rotateX(15deg) rotateY(-360deg); } }

/* Footer Micro-Interactions (Overrides/Additions) */
.footer-link { position: relative; color: #94a3b8; transition: color 0.25s ease, transform 0.25s ease; }
.footer-link:hover { color: #fbbf24; transform: translateX(4px); }
.footer-link-active { color: #FFD700 !important; font-weight: 600; }
.footer-link-active::before { content: '›'; margin-right: 0.5rem; color: #FFD700; font-weight: 700; }
.footer-glow-line { height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(255, 215, 0, 0.1) 20%, rgba(255, 215, 0, 0.4) 50%, rgba(255, 215, 0, 0.1) 80%, transparent 100%); position: absolute; top: 0; width: 100%; opacity: 0.5; }
.footer-section-title { position: relative; display: inline-block; }
.footer-section-title::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 2rem; height: 2px; background: linear-gradient(90deg, #FFD700, transparent); opacity: 0.5; }

/* HERO REDESIGN: SIGNAL CORE (Personal Growth - Emerald/Blue/Purple) */
.neural-core-container { position: relative; width: 600px; height: 600px; perspective: 1000px; transform-style: preserve-3d; pointer-events: none; }
@media (max-width: 768px) { .neural-core-container { transform: scale(0.5); width: 300px; height: 300px; margin-left: -20px; } }
.neural-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; transform-style: preserve-3d; box-shadow: 0 0 15px rgba(16, 185, 129, 0.05); }
.n-ring-1 { width: 500px; height: 500px; border: 1px solid rgba(16, 185, 129, 0.15); animation: neural-spin 40s linear infinite; }
.n-ring-1::before { content: ''; position: absolute; top: -2px; left: 50%; width: 6px; height: 6px; background: #10b981; border-radius: 50%; box-shadow: 0 0 10px #10b981; }
.n-ring-2 { width: 350px; height: 350px; border: 2px solid rgba(99, 102, 241, 0.3); animation: neural-spin-rev 25s linear infinite; }
.n-ring-2::after { content: ''; position: absolute; bottom: 10%; left: 10%; width: 8px; height: 8px; background: #6366f1; border-radius: 50%; box-shadow: 0 0 12px #6366f1; }
.n-ring-3 { width: 200px; height: 200px; border: 1px dashed rgba(255, 255, 255, 0.2); animation: neural-spin 15s linear infinite; }
.neural-nucleus { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; background: radial-gradient(circle, rgba(16,185,129,0.4) 0%, rgba(59,130,246,0.2) 60%, transparent 100%); border-radius: 50%; filter: blur(10px); animation: pulse-core 5s ease-in-out infinite; }
@keyframes neural-spin { 0% { transform: translate(-50%, -50%) rotateX(60deg) rotateZ(0deg); } 100% { transform: translate(-50%, -50%) rotateX(60deg) rotateZ(360deg); } }
@keyframes neural-spin-rev { 0% { transform: translate(-50%, -50%) rotateX(60deg) rotateY(20deg) rotateZ(0deg); } 100% { transform: translate(-50%, -50%) rotateX(60deg) rotateY(20deg) rotateZ(-360deg); } }
@keyframes pulse-core { 0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.1); } }

/* Animations for Rich Layouts */
@keyframes scan-y { 0% { transform: translateY(-100%); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateY(100%); opacity: 0; } }
.animate-scan-y { animation: scan-y 3s linear infinite; }