/* -- PALETA DE COLORES 'ACERO DE MEDIANOCHE Y NEÓN AZUL' -- */
:root {
  --background-blue:  #1a202c;  /* El azul pizarra oscuro que te gustó */
  --steel-gray:       #2D3748;  /* El 'plateado': un gris frío con tonos azules */
  --card-background:  #262d3a;  /* Un tono intermedio para las tarjetas */
  --accent-neon-blue: #49C8FF;  /* El nuevo azul neón vibrante */
  --text-light:       #EDEDED;  /* Blanco roto, perfecto para la legibilidad */
  --text-muted:       #888;     /* Gris para textos secundarios */
  --border-color:     #4a5568;  /* Un borde sutil para las tarjetas */
}

/* --- ESTILOS GLOBALES --- */
html, body {
  /* Color de fondo por si el gradiente no carga */
  background-color: var(--background-blue); 
  
  /* El gradiente que combina el azul y el 'plateado' */
  background-image: linear-gradient(to bottom right, var(--background-blue), var(--steel-gray));
  
  /* Mantiene el gradiente estático al hacer scroll */
  background-attachment: fixed; 
  
  /* El color de texto se mantiene */
  color: var(--text-light);
}

h1, h2, h3, h4, h5, h6,
.uk-light,
.uk-logo.uk-light,
p {
  color: var(--text-light) !important;
}

/* El titular principal en el nuevo azul neón */
section.uk-margin-xlarge-top h2 b {
    color: var(--accent-neon-blue);
}

hr.uk-margin-xlarge-left {
    border-top: 1px solid var(--border-color);
}


/* --- COMPONENTES --- */

/* Barra de Navegación con el color 'plateado' */
.uk-navbar-container:not(.uk-navbar-transparent) {
    background: var(--steel-gray) !important;
}

.uk-navbar-nav > li > a {
    color: var(--text-light);
    transition: color 0.2s ease-in-out;
}
.uk-navbar-nav > li > a:hover,
.uk-navbar-nav > li.uk-active > a {
    color: var(--accent-neon-blue);
}

/* Botón principal "Sobre Mí" */
.uk-button-secondary {
    background-color: transparent;
    color: var(--accent-neon-blue);
    border: 1px solid var(--accent-neon-blue);
    transition: all 0.2s ease-in-out;
}
.uk-button-secondary:hover {
    background-color: var(--accent-neon-blue);
    color: var(--background-blue);
    border-color: var(--accent-neon-blue);
}

/* Tarjetas de Proyecto */
.uk-card-secondary {
    background-color: var(--card-background);
    border: 1px solid var(--border-color);
    transition: border-color 0.2s ease-in-out, transform 0.2s ease-in-out;
}
.uk-card-secondary:hover {
    border-color: var(--accent-neon-blue);
    transform: translateY(-5px);
}

/* Enlaces dentro de las tarjetas */
a.uk-button-text {
    color: var(--text-light);
    text-transform: none;
}
a.uk-button-text::before {
    border-bottom: 1px solid var(--accent-neon-blue) !important;
}
a.uk-button-text:hover {
    color: var(--accent-neon-blue);
}

/* Iconos de Redes Sociales (GitHub/LinkedIn) */
section#about a[uk-icon] {
    color: var(--text-light);
    transition: color 0.2s ease-in-out;
}
section#about a[uk-icon]:hover {
    color: var(--accent-neon-blue);
}

/* Estilos para la Foto de Perfil */
/* Estilos para la Foto de Perfil en la sección Home */
.profile-image-home {
    width: 180px;
    height: 180px;
    border-radius: 50%; /* La hace redonda */
    object-fit: cover; /* Asegura que la imagen llene el círculo sin deformarse */
    border: 3px solid var(--accent-neon-blue);
    box-shadow: 0 0 15px rgba(73, 200, 255, 0.3); /* Un brillo sutil del azul neón */
    margin-bottom: 20px; /* Añade un espacio debajo de la foto */
}
section.uk-section h2 b {
    color: var(--accent-neon-blue);
}
/* --- Ajuste para el botón de idioma --- */
.language-button {
    border-color: var(--border-color);
    color: var(--text-muted) !important;
    padding: 0 12px;
    height: 30px;
    line-height: 28px;
    margin-left: 15px;
    transition: all 0.2s ease-in-out;
}

.language-button:hover {
    border-color: var(--accent-neon-blue);
    color: var(--accent-neon-blue) !important;
}

/* --- Estilo para el botón secundario 'fantasma' --- */
.uk-button-ghost {
    background-color: transparent !important;
    color: var(--text-muted) !important;
    border: 1px solid var(--border-color);
    transition: all 0.2s ease-in-out;
}

.uk-button-ghost:hover {
    background-color: transparent !important;
    color: var(--accent-neon-blue) !important;
    border-color: var(--accent-neon-blue);
}
.uk-offcanvas-bar {
    background: var(--steel-gray) !important;
}