/* ============================================== */
/* VARIABLES CSS GLOBALES (:root) */
/* ============================================== */
/* :root permite definir variables CSS globales, que podemos reutilizar en todo el archivo.
   Esto es una excelente práctica para mantener la consistencia en la paleta de colores y facilitar cambios futuros. */
:root {
  --primary: #3b82f6;      /* Color principal (azul brillante) - Usado para botones, iconos, enlaces. */
  --primary-dark: #1d4ed8; /* Versión oscura del primario - Usado para estados hover. */
  --secondary: #64748b;    /* Color secundario (gris) - Usado para subtítulos o texto suave. */
  --dark: #0f172a;         /* Color principal del texto (casi negro). */
  --light: #f8fafc;        /* Color de fondo claro o blanco roto. */
  --accent: #06d6a0;       /* Color de acento (verde) - Reservado para posibles alertas o énfasis. */
}

/* ============================================== */
/* RESET Y ESTILOS BASE */
/* ============================================== */
/* Selector universal (*): Eliminamos márgenes y paddings por defecto de todos los elementos.
   box-sizing: border-box; hace que el padding y el borde se incluyan en el ancho y alto total del elemento,
   lo que facilita mucho el cálculo de los layouts (modelado de caja más intuitivo). */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  /* Aplicamos la fuente importada ('Inter') a todo el cuerpo. */
  font-family: "Inter", sans-serif;
  /* Usamos las variables definidas en :root para mantener la consistencia. */
  color: var(--dark);
  background-color: var(--light);
  /* line-height: Mejora la legibilidad del texto aumentando el espacio entre líneas. */
  line-height: 1.6;
}

/* Estilos para los encabezados. */
h1,
h2,
h3,
h4,
h5 {
  /* Establecemos una fuente más gruesa para destacar los títulos. */
  font-weight: 700;
  color: var(--dark);
}

/* ============================================== */
/* ESTILOS DE LA BARRA DE NAVEGACIÓN (NAVBAR) */
/* ============================================== */
.navbar {
  /* Aplicamos un fondo ligeramente transparente (opacidad 0.95) para un efecto 'glassmorphism' suave. */
  background-color: rgba(255, 255, 255, 0.95);
  padding: 1rem 0;
}

.navbar-brand {
  font-weight: 700;
  font-size: 1.5rem;
  /* Usamos !important para asegurar que nuestro color primario sobrescriba los estilos de Bootstrap por defecto. */
  color: var(--primary) !important; 
}

.nav-link {
  font-weight: 500;
  color: var(--dark) !important;
  margin: 0 0.5rem;
  position: relative; /* Necesario si se añade un efecto visual al active/hover. */
}

/* Estado al pasar el ratón por encima (hover). */
.nav-link:hover {
  color: var(--primary) !important;
}

/* Estilo para el enlace activo (que indica en qué sección estamos). */
.nav-link.active {
  color: var(--primary) !important;
}

/* ============================================== */
/* SECCIÓN HERO (INICIO) */
/* ============================================== */
.hero {
  /* Añadimos padding superior e inferior para el espaciado. */
  padding: 8rem 0 5rem;
  /* Fondo con un gradiente suave para darle profundidad visual. */
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 800;
  margin-bottom: 1rem;
  line-height: 1.1; /* Línea más ajustada para títulos grandes. */
}

.hero-subtitle {
  font-size: 1.25rem;
  color: var(--secondary);
  margin-bottom: 2rem;
}

/* Estilos de Botones Personalizados (override de Bootstrap) */
.btn-primary {
  background-color: var(--primary);
  border: none;
  padding: 0.75rem 2rem;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease; /* Transición para un efecto de hover suave. */
}

.btn-primary:hover {
  background-color: var(--primary-dark);
  /* Efecto de elevación al pasar el ratón. */
  transform: translateY(-2px); 
  box-shadow: 0 10px 20px rgba(59, 130, 246, 0.2);
}

.btn-outline-primary {
  /* Botón con borde: mantiene el color primario, pero el fondo es transparente. */
  border: 2px solid var(--primary);
  color: var(--primary);
  padding: 0.75rem 2rem;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-outline-primary:hover {
  /* Invierte los colores al hacer hover (fondo primario, texto blanco). */
  background-color: var(--primary);
  color: white;
  transform: translateY(-2px);
}

/* ============================================== */
/* ESTILOS DE SECCIONES GENERALES */
/* ============================================== */
section {
  /* Padding uniforme para todas las secciones. */
  padding: 5rem 0;
}

.section-title {
  font-size: 2.5rem;
  margin-bottom: 3rem;
  text-align: center;
}

/* ============================================== */
/* ABOUT SECTION */
/* ============================================== */
.about {
  /* Fondo blanco para contraste con la sección Hero. */
  background-color: white;
}

.profile-img {
  border-radius: 12px;
  /* Sombra para dar profundidad a la imagen del perfil. */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* ============================================== */
/* SKILLS SECTION */
/* ============================================== */
.skills {
  /* Usamos el color de fondo claro 'light' para diferenciarlo. */
  background-color: var(--light);
}

.skill-card {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  height: 100%;
  text-align: center;
  /* Borde de color primario en la parte superior para destacar. */
  border-top: 4px solid var(--primary);
}

.skill-card:hover {
  /* Efecto de elevación sutil en hover. */
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.skill-icon {
  font-size: 3rem;
  margin-bottom: 1.5rem;
  color: var(--primary);
}

/* ============================================== */
/* PROJECTS SECTION */
/* ============================================== */
.projects {
  background-color: white;
}

.project-card {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  background: white;
  /* Configuración Flexbox: asegura que el botón quede siempre abajo. */
  display: flex;
  flex-direction: column;
  height: 100%;
}

.project-card:hover {
  /* Efecto de elevación más notable en hover. */
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.project-img {
  height: 200px;
  /* Asegura que la imagen cubra el área sin distorsionarse. */
  object-fit: cover;
  width: 100%;
}

.project-content {
  padding: 1.5rem;
  /* Flexbox para manejar el espacio verticalmente. */
  flex: 1; 
  display: flex;
  flex-direction: column;
}

.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
  justify-content: center;
}

.project-tag {
  /* Estilos específicos para las etiquetas de tecnología. */
  background-color: #eff6ff;
  color: var(--primary);
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 500;

}

.project-btn {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.card-text {
   /* Propiedad clave para igualar la altura de todas las tarjetas de proyecto. */
  min-height: 90px; 
  flex-grow: 1; /* Ocupa el espacio disponible. */
}


/* ============================================== */
/* CONTACT SECTION */
/* ============================================== */
.contact {
  background-color: var(--light);
}

.contact-form {
  background: white;
  border-radius: 12px;
  padding: 2.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.form-control {
  border-radius: 8px;
  padding: 0.75rem 1rem;
  border: 1px solid #e2e8f0;
  margin-bottom: 1.5rem;
}

.form-control:focus {
  /* Estilo al seleccionar el campo: sombra de enfoque con color primario. */
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
  border-color: var(--primary);
}

/* ============================================== */
/* FOOTER */
/* ============================================== */
footer {
  /* Fondo oscuro para contraste. */
  background-color: var(--dark);
  color: white;
  padding: 4rem 0 2rem;
}

.footer-content {
  /* Centrado de los elementos del footer. */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.footer-logo {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: white;
}

.footer-text {
  max-width: 500px;
  margin-bottom: 2rem;
  /* Texto más suave con baja opacidad. */
  color: rgba(255, 255, 255, 0.8);
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 2rem 0;
}

.social-icon {
  /* Estilo circular de los iconos sociales. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: white;
  transition: all 0.3s ease;
}

.social-icon:hover {
  /* El color primario se usa en hover para destacar. */
  background-color: var(--primary);
  transform: translateY(-3px);
}

.footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 2rem;
}

.footer-link {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-link:hover {
  color: white;
}

/* ============================================== */
/* MEDIA QUERIES (RESPONSIVE DESIGN) */
/* ============================================== */
/* Reglas que se aplican cuando el ancho de la pantalla es igual o menor a 768px (tablets y móviles). */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2.5rem; /* Reduce el tamaño del título principal en móviles. */
  }

  .section-title {
    font-size: 2rem; /* Reduce el tamaño de los títulos de sección. */
  }

  section {
    padding: 3rem 0; /* Reduce el padding vertical de las secciones. */
  }

  .footer-links {
    /* En móviles, los enlaces del footer se apilan verticalmente. */
    flex-direction: column;
    gap: 1rem;
  }
}