:root {
            --bg-deep: #01040a;
            --glow-gold: #edbe50;
            --accent-blue: #0047ab;
            --accent-blue2: #4cb3f7;
            --glass: rgba(255, 255, 255, 0.03);
            --border-glow: rgba(249, 200, 81, 0.2);
        }

        @font-face {
            font-family: 'Alumini';
            src: url(../fuentes/AlumniSansPinstripe-Regular.ttf);
          
        }

        body {
            font-family: 'Alumini';
            background-color: var(--bg-deep);
            color: #ffffff;
            overflow-x: hidden;
            scroll-behavior: smooth;
              letter-spacing: 2px;
            font-size: 1.2em;
            font-weight: 700;
            
        }



/* dropsdown */

/* ==========================================================================
   --- NAVEGACIÓN HIGH-TECH UNIFICADA (EXPERTIS & CORE TECH) ---
   ========================================================================== */

/* --- 1. ESTILOS SÓLO PARA ESCRITORIO (Media Query min-width: 992px) --- */
/* Agrupamos aquí todo lo que SÓLO debe verse en PC para no chocar con el móvil */
@media (min-width: 992px) {
    /* Definimos la animación de Slide Down */
    @keyframes dropdownSlideIn {
        0% { opacity: 0; transform: translateY(-15px) scale(0.95); }
        100% { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* Clase unificada para el dropdown-menu en ESCRITORIO */
    .dropdown-menu-dark.dropdown-unified-high-tech {
        background-color: rgba(10, 10, 15, 0.9) !important;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(249, 200, 81, 0.25);
        border-radius: 8px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6), 0 0 10px rgba(249, 200, 81, 0.1);
        
        /* Imagen de circuito luminoso de fondo (imagen 2) */
        background-image: url('../imagenes/circuito-glow.png'); /* Ruta a tu imagen */
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: contain;
        
        padding: 15px 0;
        min-width: 280px;
        
        /* --- ACTIVACIÓN DE ANIMACIÓN SÓLO EN PC --- */
        display: block !important; 
        opacity: 0; 
        visibility: hidden; 
        transition: visibility 0s linear 0.4s; 
    }

    /* .show activa la animación al abrir en PC */
    .dropdown-menu-dark.dropdown-unified-high-tech.show {
        animation: dropdownSlideIn 0.4s ease-out forwards; 
        visibility: visible;
        opacity: 1;
        transition-delay: 0s; 
    }

    /* Alineación para pantallas grandes */
    .dropdown-menu-dark.dropdown-unified-high-tech {
        right: 0;
        left: auto;
    }
}

/* --- 2. ESTILOS UNIFICADOS (PC y Móvil) --- */
/* Estilo de los ítems del menú (subopciones) */
.dropdown-menu-dark.dropdown-unified-high-tech .dropdown-item {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 1.1rem; /* Unificado y legible */
    padding: 12px 25px;
    transition: all 0.3s ease;
    text-transform: none; 
    display: flex;
    align-items: center; 
    gap: 15px; 
    font-weight: bold;
}

/* Iconos unificados (dorados) */
.dropdown-menu-dark.dropdown-unified-high-tech .dropdown-item i {
    color: var(--accent-blue2) !important;
    font-size: 1.1rem;
    width: 25px;
    text-align: center;
}

/* Efecto hover dorado para los ítems */
.dropdown-menu-dark.dropdown-unified-high-tech .dropdown-item:hover {
    background-color: rgba(249, 200, 81, 0.1) !important;
    color: var(--glow-gold) !important;
    padding-left: 32px; /* Pequeño desplazamiento */
}

/* Línea divisoria unificada */
.dropdown-menu-dark.dropdown-unified-high-tech .dropdown-divider {
    border-color: rgba(249, 200, 81, 0.1);
    margin: 10px 0;
}

/* ---AJUSTES ESPECÍFICOS PARA MÓVIL (Media Query max-width: 991.98px) --- */

/* --- HOVER PARA ESCRITORIO --- */
@media (min-width: 992px) {
    /* Muestra el menú al posicionar el mouse sobre el elemento padre */
    .nav-item.dropdown:hover > .dropdown-menu-dark.dropdown-unified-high-tech {
        display: block !important;
        opacity: 1;
        visibility: visible;
        animation: dropdownSlideIn 0.4s ease-out forwards;
    }

    /* Pequeño ajuste para que no se cierre el menú si hay un espacio entre el link y el dropdown */
    .nav-item.dropdown {
        padding-bottom: 5px;
    }
}

/* --- AJUSTE DE COLAPSO EN MÓVIL --- */
@media (max-width: 991.98px) {
    /* Aseguramos que el menú colapsable tenga un z-index alto para no quedar bajo otros elementos */
    .navbar-collapse {
        position: relative;
        z-index: 1050;
    }
}

@media (max-width: 991.98px) {
    /* El contenedor colapsable de la navbar */
    .navbar-collapse {
        background: rgba(1, 4, 10, 0.98); 
        border-radius: 15px;
        padding: 15px;
        margin-top: 10px;
        border: 1px solid rgba(255,255,255,0.1);
        position: relative;
        z-index: 1050;
    }

    /* Modificamos el dropdown-menu para que se integre verticalmente */
    .dropdown-menu-dark.dropdown-unified-high-tech {
        background-image: none !important; /* Quitamos circuito para limpiar */
        background-color: transparent !important; /* El fondo lo da la navbar-collapse */
        border: none;
        border-left: 2px solid var(--glow-gold); /* Línea guía lateral de tu imagen */
        border-radius: 0;
        margin: 5px 15px;
        padding: 0;
        box-shadow: none;
        max-height: none; 
        
        /* --- ELIMINAMOS ANIMACIONES DE CSS QUE CAUSAN CONGELAMIENTO --- */
        display: none; /* Bootstrap controla esto nativamente con .show */
        opacity: 1 !important; 
        visibility: visible !important;
        transform: none !important;
        animation: none !important;
    }

    /* Bootstrap añade .show para abrir, permitimos que funcione nativamente */
    .dropdown-menu-dark.dropdown-unified-high-tech.show {
        display: block !important;
    }

    /* Ajuste de los items para touch targets más grandes */
    .dropdown-menu-dark.dropdown-unified-high-tech .dropdown-item {
        padding: 15px 20px;
        font-size: 1.1rem; 
        border-bottom: 1px solid rgba(255,255,255,0.05); /* Separador sutil */
    }
}

.dropdown-toggle{
    pointer-events: none;
}

/**/
        

        

        .text-warning{
            font-weight: bold!important;
        }

        .tab-pane{
            
                background: rgba(29, 30, 31, 0.4)!important;
                backdrop-filter: blur(9px);
                -webkit-backdrop-filter: blur(9px);
                border-radius: 15px;
                border: 1px solid rgba(244, 241, 241, 0.2);
                padding: 40px 20px!important;
                text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
                 transition: 0.4s;
            height: 100%;
       
        }

        .t01{
            font-size: 1.4em;
            text-align: left;
            font-weight: bold;
        }

        h4{
            color:var(--glow-gold);
            border-bottom: 1px solid var(--glow-gold);
            margin-bottom: 20px;
            padding-bottom: 18px;
              font-size: 1.6em!important;
        }
        .tit01{
            color:var(--accent-blue2)
        }
         .tit02{
            color:var(--glow-gold);
            font-size: 2em;
            line-height: 1em;
        }
        .iconos01{
            vertical-align: middle;
            color: var(--accent-blue2)!important; font-size: 2.6em;
        }
        .iconos02{
            vertical-align: middle;
            color: var(--accent-blue2)!important; font-size: 3.5em;
            margin-right:20px;
        }

        /* --- NAVEGACIÓN --- */
        .navbar {
            background: rgba(1, 4, 10, 0.95);
            backdrop-filter: blur(15px);
            border-bottom: 1px solid var(--border-glow);
            padding: 12px 0;
            transition: 0.3s;
        }
        .logo-divider { width: 3px; height: 35px; background: var(--accent-blue); margin: 0 15px; }
        .nav-link { font-size: 0.85rem; letter-spacing: 1px; font-weight: 600; color: #fff !important; }
        .nav-link:hover { color: var(--glow-gold) !important; }

        /* --- PARALLAX HERO --- */
        .parallax-wrap {
            position: relative;
            height: 100vh;
            overflow: hidden;
         
            align-items: center;
            padding:40px;
       
        }
        .parallax-bg {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 140%;
            background-image: url('../imagenes/fondo01.png'); /* Asegúrate de que el archivo esté en la misma carpeta */
            background-size: cover;
            background-position: center;
            z-index: -1;
            will-change: transform;
        }

        .expertis{

            background-image: 

                linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), 

                url('../imagenes/fondo_g.jpg'); 


            background-size: cover;
            background-position: center;
            /* (Opcional, si quieres que se quede fija al hacer scroll) */
            background-attachment: fixed;
        

        }

        .software{
            
            background-image: 

                linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 

                url('../imagenes/fondo01.png'); 

            background-size:cover;
            background-position: center;
            /* (Opcional, si quieres que se quede fija al hacer scroll) */
            background-attachment:fixed;
        }

          .ceo{

            background-image: 

                linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)), 

                url('../imagenes/fondo02.jpg'); 


            background-size: cover;
            background-position: center;
            /* (Opcional, si quieres que se quede fija al hacer scroll) */
            background-attachment: fixed;
        

        }

        .nav-link{
            font-size: 1.2em!important;
            text-align: center;

        }

        /* --- ESPECIALISTAS --- */
        .spec-card {
                background: rgba(29, 30, 31, 0.4);
                backdrop-filter: blur(9px);
                -webkit-backdrop-filter: blur(9px);
                border-radius: 15px;
                border: 1px solid --accent-blue2;
                padding: 40px 20px;
                text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
                 transition: 0.4s;
            height: 100%;
        }
        .spec-card:hover { border-color: var(--glow-gold); transform: translateY(-10px); }

        .spec-icon { font-size: 3rem; color: var(--glow-gold); margin-bottom: 20px; }


           /* --- ESPECIALISTAS --- */
        .spec-card2 {
                background: rgba(29, 30, 31, 0.4);
                backdrop-filter: blur(9px);
                -webkit-backdrop-filter: blur(9px);
                border-radius: 15px;
                border: 1px solid rgba(244, 241, 241, 0.2);
                padding: 40px 20px;
                text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
         

        }
        .spec-card2:hover { border-color: var(--glow-gold); }



         .spec-card3 {
                 background: rgb(14 46 78 / 20%);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    border-radius: 15px;
    border: 1px solid rgba(244, 241, 241, 0.2);
    padding: 30px 20px;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
    transition: 0.4s;
    margin: 15px;
    text-align: center;
        }
        .spec-card3:hover { border-color: var(--glow-gold); transform: translateY(-10px); }

         .spec-card4 {
            background: rgba(8, 44, 69, 0.4);
            padding: 30px 20px;
            text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
            transition: 0.4s;
            margin: 15px;
            border-left: 7px solid var(--glow-gold);
        }
        .spec-card4:hover { border-color: var(--glow-gold); transform: translateY(-10px); }

        
        /* --- PORTAFOLIO FILTRABLE --- */
        .filter-btn {
            background: transparent;
            border: 1px solid var(--border-glow);
            color: white;
            border-radius: 50px;
            padding: 8px 25px;
            margin: 5px;
            transition: 0.3s;
        }

        .proyectos{
            color:var(--glow-gold);
            font-size: 1.45em;
        }
        .subproyectos{
            font-size: 1.3em;
        }
        .filter-btn.active, .filter-btn:hover { background: var(--glow-gold); color: black; }
        
        .gallery-item { transition: 0.5s; position: relative; overflow: hidden; border-radius: 15px; }
        .img-card { border: 1px solid var(--border-glow); position: relative; }
        .img-card img { width: 100%; height: 260px; object-fit: cover; opacity: 0.7; transition: 0.5s; }
        .img-card:hover img { opacity: 1; transform: scale(1.08); }
        .img-caption { padding: 15px; background: rgba(0,0,0,0.8); text-align: center; }

        /* --- CEO INTERACTIVO (BASADO EN TU INDEX.HTML) --- */
        #ceo .ceo-tabs .nav-link {
            background: var(--glass);
            border: 1px solid var(--border-glow);
            color: var(--glow-gold) !important;
            margin-bottom: 10px;
            text-align: left;
            border-radius: 12px;
            padding: 15px;
        }
        #ceo .nav-link.active { background: var(--accent-blue); border-color: var(--glow-gold); }
        .ceo-img { border: 5px solid var(--accent-blue); padding: 5px; border-radius: 20px; max-width: 320px; }

        .btn-gold {
            background: linear-gradient(45deg, var(--accent-blue2), #d4af37);
            color: #000; font-weight: 700; border-radius: 50px; padding: 15px 40px; border: none;
            width: fit-content;
        }
        .section-title { font-size: 2.5rem; font-weight: 800; text-transform: uppercase; margin-bottom: 60px; }

        .glass-card {
            background: var(--glass-white);
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
            overflow: auto;
        }

        /* --- SOMBREADO DE TEXTO PARA LEGIBILIDAD --- */
        .text-shadow-legible {
            text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.9);
            color: #ffffff;
        }




        .biography-expert {
    background-color: #050505;
    color: #ffffff;
    padding: 60px 20px;
}

/* Hero Section */
.bio-hero {
    text-align: center;
    margin-bottom: 80px;
}

.glitch-title {
    font-size: clamp(2.5rem, 8vw, 5rem);
    font-weight: 900;
    color: #c9a555; /* Dorado */
    letter-spacing: -2px;
}

.subtitle {
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 3px;
}

/* Secciones de Texto Alternadas */
.bio-section {
    display: flex;
    align-items: center;
    gap: 50px;
    max-width: 1100px;
    margin: 0 auto 100px;
}

.bio-section.reverse {
    flex-direction: row-reverse;
}

.bio-text {
    flex: 2;
}

.bio-text h2 {
    color: #c9a555;
    font-size: 2rem;
    margin-bottom: 20px;
}

.bio-text p {


    color: #cccccc;
    margin-bottom: 15px;
}

/* Stats */
.bio-stats {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.stat-item {
    background: rgba(201, 165, 85, 0.1);
    border: 1px solid #c9a555;
    padding: 30px;
    text-align: center;
    border-radius: 20px;
}

.stat-item span {


    display: block;
}

/* Grid de Innovación */
.innovation-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto 100px;
}

.inn-card {
    background: #111;
    padding: 40px;
    border-radius: 30px;
    border: 1px solid rgba(255,255,255,0.1);
}

.gold-border {
    border-color: #c9a555;
    background: linear-gradient(145deg, #111, #1a150a);
}

.inn-card h3 {
    color: #c9a555;
    margin-bottom: 20px;
}

/* Frase Final */
.final-quote {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.5rem;
    color: #c9a555;
    font-style: italic;
    border-top: 1px solid rgba(201, 165, 85, 0.3);
    padding-top: 40px;
}

@media (max-width: 768px) {
    .bio-section, .bio-section.reverse, .innovation-grid {
        flex-direction: column;
        grid-template-columns: 1fr;
    }
}