h1, h2, h3, h4, .navbar-brand {
    font-family: 'Orbitron', sans-serif; /* Fuente Sci-Fi para títulos */
    letter-spacing: 1px;
}

/* --- NAVBAR ESTILO "CABINA DE MANDO" --- */
.navbar {
    background-color: var(--glass-bg) !important;
    backdrop-filter: blur(10px); /* Efecto cristal borroso */
    border-bottom: 1px solid rgba(0, 243, 255, 0.2);
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.1);
}

.navbar-brand {
    color: var(--kernel-blue) !important;
    font-weight: 700;
    text-shadow: 0 0 5px var(--kernel-blue); /* Glow sutil */
}

.nav-link {
    color: rgba(255, 255, 255, 0.8) !important;
    transition: all 0.3s ease;
}

.nav-link:hover, .nav-link.active {
    color: var(--kernel-green) !important; /* Hover verde Melissa */
    text-shadow: 0 0 8px var(--kernel-green);
}

/* --- FOOTER --- */
footer {
    background-color: #020408 !important; /* Más oscuro que el fondo */
    border-top: 1px solid rgba(0, 243, 255, 0.1);
    font-size: 0.9rem;
}

/* --- CLASES DE UTILIDAD PARA TU CONTENIDO --- */
.text-neon-blue {
    color: var(--kernel-blue);
    text-shadow: 0 0 10px var(--kernel-blue);
}

.text-neon-green {
    color: var(--kernel-green);
    text-shadow: 0 0 10px var(--kernel-green);
}

.btn-kernel {
    background: transparent;
    border: 1px solid var(--kernel-blue);
    color: var(--kernel-blue);
    font-family: 'Orbitron', sans-serif;
    transition: 0.3s;
}

.btn-kernel:hover {
    background: var(--kernel-blue);
    color: black;
    box-shadow: 0 0 15px var(--kernel-blue);
}

/* --- FORZAR MODO OSCURO (STARFIELD OVERRIDES) --- */

/* 1. Hacer transparentes los fondos blancos de Bootstrap */
.bg-light, .bg-white, .card {
    background-color: rgba(5, 10, 20, 0.7) !important; /* Oscuro semitransparente */
    color: #e0e0e0 !important; /* Texto claro */
    border: 1px solid rgba(0, 243, 255, 0.15) !important; /* Borde sutil azul */
}

/* 2. Arreglar las Tarjetas (Cards) de proyectos */
.card {
    backdrop-filter: blur(5px); /* Efecto cristal */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px); /* Que flote un poco al pasar el ratón */
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.2) !important; /* Resplandor azul */
    border-color: var(--kernel-blue) !important;
}

/* 3. Arreglar textos que se hayan quedado oscuros */
h1, h2, h3, h4, h5, h6, p, span, li {
    color: #e0e0e0;
}

/* 4. El bloque de "Hola Soy Jose" (Hero Section) */
/* Si usaste un jumbotron o un div container, esto lo oscurece */
.container, .jumbotron, section {
    background-color: transparent !important;
}

/* 5. Botones: Transformarlos a estilo Neon */
.btn-primary, .btn-dark {
    background-color: transparent !important;
    border: 1px solid var(--kernel-blue) !important;
    color: var(--kernel-blue) !important;
    font-family: 'Orbitron', sans-serif;
    box-shadow: 0 0 5px rgba(0, 243, 255, 0.2);
}

.btn-primary:hover, .btn-dark:hover {
    background-color: var(--kernel-blue) !important;
    color: #000 !important; /* Texto negro sobre fondo azul brillante */
    box-shadow: 0 0 20px var(--kernel-blue);
}
/* Forzar que CUALQUIER contenedor dentro de main sea transparente/oscuro */
main div[class*="bg-"], main div[class*="shadow"] {
    background-color: rgba(5, 10, 20, 0.5) !important;
    box-shadow: none !important;
    border: none !important;
    color: #e0e0e0 !important;
}

/* Específico para el título de la sección intermedia */
h2, h3 {
    color: var(--kernel-blue) !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: 'Orbitron', sans-serif;
}