/* Variables Globales */
:root {
    --navy-kepch: #003399;
    --dark-navy: #050A30;
    --tech-cyan: #00A8E8;
    --glass-white: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.1);
}

/* Estilos de Estructura */
body { font-family: 'Inter', sans-serif; color: #333; overflow-x: hidden; }

/* Navbar con Blur */
.navbar { 
    background: rgba(255, 255, 255, 0.95); 
    border-bottom: 3px solid var(--navy-kepch); 
    backdrop-filter: blur(10px);
}
.nav-link { font-weight: 600; color: var(--dark-navy) !important; text-transform: uppercase; font-size: 0.85rem; }

/* Hero Modernizado */
.hero {
    background: linear-gradient(rgba(5, 10, 48, 0.85), rgba(5, 10, 48, 0.85)), 
                url('https://images.unsplash.com/photo-1558494949-ef010cbdcc51?auto=format&fit=crop&q=80&w=2000');
    background-size: cover;
    background-position: center;
    height: 90vh;
    display: flex;
    align-items: center;
    color: white;
}

/* Sectores con Glassmorphism */
.sectores-bg { background-color: var(--dark-navy); }
.sector-card {
    background: var(--glass-white);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: blur(10px);
}
.sector-card:hover {
    transform: translateY(-12px);
    background: rgba(0, 51, 153, 0.15);
    border-color: var(--tech-cyan);
    box-shadow: 0 15px 35px rgba(0, 168, 232, 0.2);
}
.icon-box { font-size: 2.2rem; color: var(--tech-cyan); margin-bottom: 1.5rem; }

/* Títulos con Acento */
.section-title-navy::after {
    content: ''; display: block; width: 60px; height: 4px; 
    background: var(--navy-kepch); margin-top: 15px;
}
.section-title-cyan::after {
    content: ''; display: block; width: 60px; height: 4px; 
    background: var(--tech-cyan); margin-top: 15px;
}

/* Tablas Premium */
.table-premium { border-radius: 15px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.table-premium thead { background-color: var(--navy-kepch); color: white; }

/* Talento Card */
.talento-card {
    background: var(--glass-white);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    transition: 0.3s ease;
}
.talento-card i { font-size: 2.5rem; color: var(--tech-cyan); }
.talento-card:hover {
    background: rgba(0, 168, 232, 0.1);
    border-color: var(--tech-cyan);
}

/* Animación de Revelado */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}