/* --- CONFIGURACIÓN GLOBAL (FONDO Y TEXTO) --- */
body {
    background-color: #050505 !important; /* Negro profundo como el espacio */
    color: #e0e0e0 !important; /* Texto gris claro para no cansar la vista */
}

/* Bordes decorativos del sitio */
#site-border-left, #site-border-right, #site-border-top, #site-border-bottom {
    background: #1a1a1a !important;
    box-shadow: 0 0 15px rgba(255, 51, 153, 0.2); /* Sutil resplandor fucsia */
}

/* --- NAVEGACIÓN (NAVBAR) --- */
.navbar-default {
    background-color: rgba(5, 5, 5, 0.9) !important;
    backdrop-filter: blur(10px); /* Efecto cristal esmerilado */
    border: none !important;
}

.navbar-default .navbar-nav > li > a {
    color: #00e5ff !important; /* Azul cian del astronauta */
    transition: 0.3s;
}

.navbar-default .navbar-nav > li > a:hover, 
.navbar-default .navbar-nav > li > a.active {
    color: #ff3399 !important; /* Fucsia vibrante */
    text-shadow: 0 0 8px #ff3399;
}

/* --- TÍTULOS Y DECORACIÓN --- */
h1, h2, h3, h4, .h1, .h2, .h3 {
    color: #00e5ff !important; /* Cian para títulos */
}

/* Las líneas verticales al lado del título "Projects" o "About me" */
.h2:after, .h2:before, h2:after, h2:before {
    background-color: #ff3399 !important; /* Fucsia para las líneas */
    box-shadow: 0 0 10px #ff3399;
}

/* --- TARJETAS DE PROYECTOS --- */
.card-container {
    background-color: #111 !important; /* Fondo gris muy oscuro para las tarjetas */
    color: #ccc !important;
    border: 1px solid #222 !important;
    padding: 2.5rem !important;
    margin-top: -8em !important;
    transition: all 0.4s ease;
}

.card-container:hover {
    border-color: #ff3399 !important;
    box-shadow: 0 10px 30px rgba(255, 51, 153, 0.2) !important;
    transform: translateY(-5px);
}

/* Eliminar el filtro blanco y negro de las imágenes */
.black-image-project-hover img {
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 0.8;
    transition: 0.3s;
}

.black-image-project-hover img:hover {
    opacity: 1;
    transform: scale(1.02);
}

/* --- BOTONES --- */
.btn-default {
    color: #ff3399 !important;
    background-color: transparent !important;
    border: 2px solid #ff3399 !important;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 2px;
}

.btn-default:hover {
    background-color: #ff3399 !important;
    color: #fff !important;
    box-shadow: 0 0 15px #ff3399;
}

/* --- SECCIÓN SOBRE MÍ Y REDES --- */
.fa-icon {
    color: #00e5ff !important;
    font-size: 20px !important;
    transition: 0.3s;
}

.fa-icon:hover {
    color: #ff3399 !important;
    transform: translateY(-3px);
}

/* Enlaces generales */
a {
    color: #00e5ff;
}

/* Footer */
footer p {
    color: #444 !important;
}