/* ============================================================
   ARCHIVO: styles.css
   DESCRIPCIÓN: Hoja de estilos principal del portafolio de Angel JASG.
   
   ESTRUCTURA:
   1. Variables CSS (tokens de diseño)
   2. Reset y estilos base
   3. Cursor personalizado
   4. Navegación lateral
   5. Menú móvil
   6. Contenido principal y secciones
   7. Hero (presentación)
   8. Biografía
   9. Habilidades
   10. Proyectos Web
   11. Programas
   12. Servicios
   13. Otros
   14. Redes Sociales
   15. Footer
   16. Botón "Volver arriba"
   17. Animaciones de revelado (scroll)
   18. Keyframes
   19. Media queries (responsive)
   ============================================================ */


/* ============================================================
   1. VARIABLES CSS (Custom Properties / Tokens de diseño)
   ----------------------------------------------------------
   Centralizamos todos los colores, tamaños y valores reutilizables.
   Esto facilita cambiar el tema entero modificando solo estas variables.
   ============================================================ */
:root {
  /* Colores principales */
  --color-bg: #0a0f1c;              /* Fondo principal oscuro (azul muy oscuro) */
  --color-bg-secondary: #111827;    /* Fondo de tarjetas y elementos elevados */
  --color-bg-tertiary: #1a2236;     /* Fondo de elementos hover/activos */
  --color-surface: #1e293b;         /* Superficie de cards */
  --color-border: #1e3a5f;          /* Bordes sutiles */

  /* Textos */
  --color-text: #e2e8f0;            /* Texto principal (gris claro) */
  --color-text-secondary: #94a3b8;  /* Texto secundario (gris medio) */
  --color-text-muted: #64748b;      /* Texto muy tenue */

  /* Color de acento (verde-cian tipo terminal) */
  --color-accent: #22d3ee;          /* Acento principal */
  --color-accent-dim: rgba(34, 211, 238, 0.15); /* Acento con opacidad baja */
  --color-accent-glow: rgba(34, 211, 238, 0.3); /* Brillo del acento */

  /* Tipografía */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Espaciado y bordes */
  --radius: 12px;                   /* Radio de bordes redondeados */
  --radius-sm: 8px;                 /* Radio más pequeño */
  --nav-width: 260px;               /* Ancho de la barra lateral */

  /* Transiciones */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
}


/* ============================================================
   2. RESET Y ESTILOS BASE
   ----------------------------------------------------------
   Eliminamos márgenes, padding y configuramos box-sizing.
   Establecemos la tipografía base y el scroll suave.
   ============================================================ */

/* Reset universal: todos los elementos usan border-box
   para que padding y border se incluyan en el ancho total */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Scroll suave cuando se hace clic en enlaces de ancla (#) */
html {
  scroll-behavior: smooth;
  /* Evita el salón horizontal */
  overflow-x: hidden;
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  /* Previene scroll horizontal en móviles */
  overflow-x: hidden;
  /* Anti-aliasing para textos más nítidos */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Estilos base para enlaces */
a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-text);
}

/* Tipografía para textos en monoespaciado (código) */
code, .font-mono {
  font-family: var(--font-mono);
}

/* Quitar estilos por defecto de listas */
ul, ol {
  list-style: none;
}

/* Imágenes responsive por defecto */
img {
  max-width: 100%;
  display: block;
}


/* ============================================================
   3. CURSOR PERSONALIZADO (solo desktop)
   ----------------------------------------------------------
   Un halo luminoso que sigue al ratón. Se posiciona con JS
   y solo es visible en pantallas grandes donde hay mouse.
   ============================================================ */
.cursor-glow {
  position: fixed;
  width: 600px;
  height: 600px;
  /* Degradado radial que simula luz */
  background: radial-gradient(
    circle,
    rgba(34, 211, 238, 0.07) 0%,
    rgba(34, 211, 238, 0.03) 30%,
    transparent 70%
  );
  border-radius: 50%;
  pointer-events: none;   /* No interfiere con clics */
  z-index: 9999;
  /* Centrar el halo en el cursor */
  transform: translate(-50%, -50%);
  /* Invisible al inicio hasta que JS lo active */
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Solo mostramos el cursor custom en pantallas grandes */
@media (min-width: 1024px) {
  .cursor-glow.active {
    opacity: 1;
  }
}


/* ============================================================
   4. NAVEGACIÓN LATERAL
   ----------------------------------------------------------
   Barra fija a la izquierda con links a cada sección.
   Se muestra solo en desktop (>= 1024px).
   En móvil se oculta y se controla con el menú hamburguesa.
   ============================================================ */
.side-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--nav-width);
  height: 100vh;            /* Ocupa toda la altura de la ventana */
  background-color: var(--color-bg-secondary);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  padding: 2rem 1.5rem;
  z-index: 100;
  /* En móvil empieza fuera de pantalla (a la izquierda) */
  transform: translateX(-100%);
  transition: transform var(--transition-slow);
}

/* Cuando el menú está abierto en móvil, lo deslizamos */
.side-nav.open {
  transform: translateX(0);
}

/* Marca / logotipo en la navegación */
.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
}

/* Círculo con la inicial "A" */
.brand-logo {
  width: 36px;
  height: 36px;
  /* background: var(--color-accent); */
  color: var(--color-bg);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
}

.brand-text {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text);
}

/* Lista de enlaces de navegación */
.nav-links {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;          /* Ocupa todo el espacio disponible */
}

/* Cada enlace de navegación */
.nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  transition: all var(--transition-base);
}

.nav-link:hover {
  color: var(--color-text);
  background-color: var(--color-bg-tertiary);
}

/* El indicador es una línea horizontal que se expande cuando está activo */
.nav-indicator {
  display: inline-block;
  width: 16px;
  height: 2px;
  background-color: var(--color-text-muted);
  border-radius: 1px;
  transition: all var(--transition-base);
}

/* Estado activo: línea más larga y texto brillante */
.nav-link.active {
  color: var(--color-text);
}

.nav-link.active .nav-indicator {
  width: 32px;
  background-color: var(--color-accent);
}

/* Iconos sociales en la parte inferior de la nav */
.nav-socials {
  display: flex;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

.nav-socials a {
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}

.nav-socials a:hover {
  color: var(--color-accent);
}


/* ============================================================
   5. MENÚ MÓVIL (Hamburguesa y Overlay)
   ----------------------------------------------------------
   Botón con 3 líneas que abre/cierra la nav en móvil.
   El overlay oscurece el fondo cuando el menú está abierto.
   ============================================================ */

/* Botón hamburguesa: visible solo en móvil */
.mobile-menu-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  position: fixed;
  top: 1.25rem;
  left: 1.25rem;
  z-index: 200;
  width: 44px;
  height: 44px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px;
  cursor: pointer;
  align-items: center;
  transition: background var(--transition-fast);
}

.mobile-menu-btn:hover {
  background: var(--color-bg-tertiary);
}

/* Las 3 líneas del hamburguesa */
.hamburger-line {
  display: block;
  width: 20px;
  height: 2px;
  background-color: var(--color-text);
  border-radius: 1px;
  transition: all var(--transition-base);
  transform-origin: center;
}

/* Animación: cuando está abierto, las líneas forman una X */
.mobile-menu-btn.active .hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.mobile-menu-btn.active .hamburger-line:nth-child(2) {
  opacity: 0;
}

.mobile-menu-btn.active .hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Overlay semitransparente detrás del menú */
.mobile-overlay {
  position: fixed;
  inset: 0;               /* top: 0; right: 0; bottom: 0; left: 0; */
  background: rgba(0, 0, 0, 0.6);
  z-index: 50;
  opacity: 0;
  pointer-events: none;    /* No bloquea clics cuando está oculto */
  transition: opacity var(--transition-slow);
  backdrop-filter: blur(4px);
}

.mobile-overlay.active {
  opacity: 1;
  pointer-events: auto;
}


/* ============================================================
   6. CONTENIDO PRINCIPAL Y SECCIONES
   ----------------------------------------------------------
   El contenido se desplaza a la derecha de la nav en desktop.
   Cada sección tiene padding consistente.
   ============================================================ */
.main-content {
  /* En móvil ocupa todo el ancho */
  width: 100%;
  min-height: 100vh;
}

/* Cada sección tiene padding vertical generoso */
.section {
  padding: 5rem 1.5rem;
  max-width: 900px;
  margin: 0 auto;
}

/* Encabezado de cada sección (número + título + línea) */
.section-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 3rem;
}

/* Número de sección en monoespaciado y color acento */
.section-number {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--color-accent);
  font-weight: 500;
}

/* Título de sección */
.section-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
}

/* Línea decorativa que se extiende a la derecha */
.section-line {
  flex: 1;
  height: 1px;
  background: var(--color-border);
}


/* ============================================================
   7. HERO (Sección de presentación)
   ----------------------------------------------------------
   La primera sección que ve el usuario. Contiene nombre,
   subtítulo, descripción, botones de acción y estadísticas.
   ============================================================ */
.hero-section {
  display: flex;
  align-items: center;
  min-height: 100vh;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.hero-content {
  width: 100%;
}

/* Etiqueta "Disponible para proyectos" */
.hero-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 1rem;
  background: var(--color-accent-dim);
  border: 1px solid rgba(34, 211, 238, 0.2);
  border-radius: 9999px;   /* Pill shape */
  font-size: 0.8rem;
  color: var(--color-accent);
  font-weight: 500;
  margin-bottom: 2rem;
  /* Animación de entrada */
  animation: fadeInUp 0.6s ease both;
}

/* Punto verde pulsante */
.label-dot {
  width: 8px;
  height: 8px;
  background: #22c55e;     /* Verde */
  border-radius: 50%;
  animation: pulse 2s infinite;
}

/* Título principal con dos líneas */
.hero-title {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 1rem;
  animation: fadeInUp 0.6s ease 0.1s both;
}

.title-line {
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--color-text-secondary);
}

.title-name {
  font-size: clamp(2.5rem, 6vw, 4rem);  /* Tamaño responsive */
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* Texto con color de acento */
.text-accent {
  color: var(--color-accent);
}

.hero-subtitle {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--color-accent);
  margin-bottom: 1.5rem;
  animation: fadeInUp 0.6s ease 0.2s both;
}

.hero-description {
  font-size: 1.05rem;
  color: var(--color-text-secondary);
  max-width: 540px;
  line-height: 1.7;
  margin-bottom: 2rem;
  animation: fadeInUp 0.6s ease 0.3s both;
}

/* Botones de acción */
.hero-actions {
  display: flex;
  gap: 1rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
  animation: fadeInUp 0.6s ease 0.4s both;
}

/* Botón base */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all var(--transition-base);
  text-decoration: none;
}

/* Botón principal relleno */
.btn-primary {
  background: var(--color-accent);
  color: var(--color-bg);
}

.btn-primary:hover {
  background: #06b6d4;
  color: var(--color-bg);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px var(--color-accent-glow);
}

/* Botón con solo borde */
.btn-outline {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.btn-outline:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-2px);
}

/* Estadísticas rápidas del hero */
.hero-stats {
  display: flex;
  gap: 3rem;
  animation: fadeInUp 0.6s ease 0.5s both;
}

.stat {
  display: flex;
  flex-direction: column;
}

.stat-number {
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-text);
  font-family: var(--font-mono);
  line-height: 1;
}

.stat-plus {
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-accent);
  font-family: var(--font-mono);
  line-height: 1;
}

.stat-label {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: 0.25rem;
}


/* ============================================================
   8. BIOGRAFÍA
   ----------------------------------------------------------
   Layout de dos columnas: texto a la izquierda y tarjetas
   de hobbies/metas a la derecha.
   ============================================================ */
.bio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.bio-text h3 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  color: var(--color-text);
}

.bio-text p {
  color: var(--color-text-secondary);
  margin-bottom: 1rem;
  line-height: 1.7;
}

.bio-text strong {
  color: var(--color-text);
}

/* Grid de tarjetas de hobbies */
.bio-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

/* Cada tarjeta de hobby/meta */
.bio-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  transition: all var(--transition-base);
}

.bio-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 24px rgba(34, 211, 238, 0.08);
}

/* Icono dentro de la tarjeta */
.card-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-dim);
  border-radius: var(--radius-sm);
  color: var(--color-accent);
  margin-bottom: 1rem;
}

.bio-card h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.bio-card p {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* Tarjeta de metas: ocupa todo el ancho */
.card-goals {
  grid-column: 1 / -1;
}

.goals-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.goals-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

/* Punto antes de cada meta */
.goals-list li::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--color-accent);
  border-radius: 50%;
  flex-shrink: 0;
}


/* ============================================================
   9. HABILIDADES
   ----------------------------------------------------------
   Grid de grupos de habilidades con "tags" estilo badge.
   ============================================================ */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.skill-group {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem;
}

.skill-group-title {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin-bottom: 1rem;
  font-weight: 600;
}

/* Contenedor de tags con flexbox y wrap */
.skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Cada tag individual */
.skill-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  background: var(--color-accent-dim);
  color: var(--color-accent);
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 500;
  font-family: var(--font-mono);
  transition: all var(--transition-base);
  border: 1px solid transparent;
}

.skill-tag:hover {
  border-color: var(--color-accent);
  transform: scale(1.05);
}


/* ============================================================
   10. PROYECTOS WEB
   ----------------------------------------------------------
   Grid de tarjetas de proyectos con estado (en línea/privado),
   título, descripción y enlace.
   ============================================================ */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

.project-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  transition: all var(--transition-base);
}

.project-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(34, 211, 238, 0.08);
}

/* Cabecera de la tarjeta con icono y estado */
.project-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.project-icon {
  color: var(--color-text-muted);
}

/* Badge de estado */
.project-status {
  font-size: 0.7rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Estado: En línea (verde) */
.status-live {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

/* Estado: No publicado (amarillo) */
.status-private {
  background: rgba(234, 179, 8, 0.15);
  color: #facc15;
}

/* Estado: Escolar (azul) */
.status-school {
  background: rgba(96, 165, 250, 0.15);
  color: #60a5fa;
}

.project-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.project-desc {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  flex: 1;                /* Empuja el enlace hacia abajo */
}

/* Enlace "Visitar" con flecha */
.project-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-accent);
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  transition: gap var(--transition-fast);
}

.project-link:hover {
  gap: 0.625rem;      /* La flecha se aleja un poco al hover */
  color: var(--color-text);
}


/* ============================================================
   11. PROGRAMAS
   ----------------------------------------------------------
   Lista de programas con estilo de timeline (borde izquierdo).
   ============================================================ */
.programs-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.program-item {
  padding: 1.5rem;
  padding-left: 2rem;
  /* Borde izquierdo que simula una línea de timeline */
  border-left: 2px solid var(--color-border);
  position: relative;
  transition: all var(--transition-base);
}

.program-item:hover {
  border-left-color: var(--color-accent);
  background: var(--color-bg-secondary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Punto en la línea del timeline */
.program-item::before {
  content: '';
  position: absolute;
  left: -5px;           /* Centrado sobre el borde de 2px */
  top: 1.75rem;
  width: 8px;
  height: 8px;
  background: var(--color-border);
  border-radius: 50%;
  transition: background var(--transition-base);
}

.program-item:hover::before {
  background: var(--color-accent);
  box-shadow: 0 0 8px var(--color-accent-glow);
}

/* Metadatos del programa (lenguaje) */
.program-meta {
  margin-bottom: 0.5rem;
}

.program-lang {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-accent);
  padding: 0.2rem 0.5rem;
  background: var(--color-accent-dim);
  border-radius: 4px;
  font-weight: 500;
}

.program-item h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.375rem;
}

.program-item p {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
}


/* ============================================================
   12. SERVICIOS
   ----------------------------------------------------------
   Tarjetas grandes para cada servicio ofrecido.
   ============================================================ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.service-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 2rem;
  text-align: center;
  transition: all var(--transition-base);
}

.service-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(34, 211, 238, 0.08);
}

/* Círculo con icono del servicio */
.service-icon-wrap {
  width: 64px;
  height: 64px;
  background: var(--color-accent-dim);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  margin: 0 auto 1.25rem;
}

.service-card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.75rem;
}

.service-card p {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

.service-link {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-accent);
  transition: color var(--transition-fast);
}

.service-link:hover {
  color: var(--color-text);
}


/* ============================================================
   13. OTROS (Temas variados)
   ----------------------------------------------------------
   Grid de tarjetas informativas.
   ============================================================ */
.others-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

.other-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  transition: all var(--transition-base);
}

.other-card:hover {
  border-color: var(--color-text-muted);
  transform: translateY(-2px);
}

.other-card h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.75rem;
}

.other-card p {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
}


/* ============================================================
   14. REDES SOCIALES
   ----------------------------------------------------------
   Tarjetas para cada red con icono de color, metas, etc.
   ============================================================ */
.social-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.social-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 2rem;
  transition: all var(--transition-base);
}

.social-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

/* Ícono de la red social con colores propios */
.social-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}

/* Colores específicos de cada red */
.social-youtube {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.social-twitter {
  background: rgba(148, 163, 184, 0.15);
  color: var(--color-text);
}

.social-instagram {
  background: rgba(236, 72, 153, 0.15);
  color: #ec4899;
}

/* Hover: cambia el borde al color de la red */
.social-card:has(.social-youtube):hover {
  border-color: rgba(239, 68, 68, 0.4);
}

.social-card:has(.social-twitter):hover {
  border-color: rgba(148, 163, 184, 0.4);
}

.social-card:has(.social-instagram):hover {
  border-color: rgba(236, 72, 153, 0.4);
}

.social-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.75rem;
}

.social-card p {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

.social-card strong {
  color: var(--color-text);
}

/* Bloque de metas dentro de la tarjeta */
.social-goals {
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

.social-goals h4 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: 0.625rem;
  font-weight: 600;
}

.social-goals ul {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.social-goals li {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  padding-left: 1rem;
  position: relative;
}

/* Flecha antes de cada meta */
.social-goals li::before {
  content: '>';
  font-family: var(--font-mono);
  color: var(--color-accent);
  position: absolute;
  left: 0;
  font-size: 0.75rem;
}


/* ============================================================
   15. FOOTER
   ----------------------------------------------------------
   Pie de página simple y centrado.
   ============================================================ */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding: 3rem 1.5rem;
  text-align: center;
}

.footer-text {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  margin-bottom: 0.25rem;
}

.footer-text strong {
  color: var(--color-text);
}

.footer-sub {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}


/* ============================================================
   16. BOTÓN "VOLVER ARRIBA"
   ----------------------------------------------------------
   Botón circular fijo en la esquina inferior derecha.
   Aparece al hacer scroll hacia abajo.
   ============================================================ */
.scroll-top-btn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 44px;
  height: 44px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 90;
  /* Oculto por defecto */
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: all var(--transition-base);
}

.scroll-top-btn.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.scroll-top-btn:hover {
  background: var(--color-accent);
  color: var(--color-bg);
  border-color: var(--color-accent);
  transform: translateY(-2px);
}


/* ============================================================
   17. ANIMACIONES DE REVELADO (Scroll)
   ----------------------------------------------------------
   Los elementos con clase "reveal" empiezan ocultos y se
   animan cuando entran en el viewport (controlado por JS).
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Cuando JS detecta que el elemento es visible, agrega "revealed" */
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================================
   18. KEYFRAMES (Definiciones de animaciones)
   ============================================================ */

/* Animación de entrada: sube y aparece */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Pulso suave (para el punto verde) */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.3);
  }
}


/* ============================================================
   19. MEDIA QUERIES (Responsive Design)
   ----------------------------------------------------------
   Adaptamos el diseño para diferentes tamaños de pantalla.
   Enfoque mobile-first: los estilos base son para móvil y
   luego agregamos reglas para pantallas más grandes.
   ============================================================ */

/* --- Tablets y pantallas medianas (>= 768px) --- */
@media (min-width: 768px) {
  .bio-grid {
    grid-template-columns: 1fr 1fr;
  }

  .section {
    padding: 6rem 2rem;
  }
}

/* --- Desktop (>= 1024px) --- */
@media (min-width: 1024px) {
  /* En desktop, mostramos la navegación lateral siempre */
  .side-nav {
    transform: translateX(0);
  }

  /* Ocultamos el botón hamburguesa y el overlay */
  .mobile-menu-btn {
    display: none;
  }

  .mobile-overlay {
    display: none;
  }

  /* El contenido se desplaza a la derecha del nav */
  .main-content {
    margin-left: var(--nav-width);
  }

  /* Más padding en las secciones */
  .section {
    padding: 6rem 3rem;
  }
}

/* --- Pantallas pequeñas: ajustes para móvil --- */
@media (max-width: 640px) {
  /* Hero: stats en una sola columna */
  .hero-stats {
    flex-direction: column;
    gap: 1.5rem;
  }

  /* Tarjetas de bio en 1 columna */
  .bio-cards {
    grid-template-columns: 1fr;
  }

  /* Skills en 1 columna */
  .skills-grid {
    grid-template-columns: 1fr;
  }

  /* Proyectos en 1 columna */
  .projects-grid {
    grid-template-columns: 1fr;
  }

  /* Otros en 1 columna */
  .others-grid {
    grid-template-columns: 1fr;
  }

  /* Ajustes de tamaño de título */
  .section-title {
    font-size: 1.35rem;
  }
}

/* --- Accesibilidad: Reduce movimiento si el usuario lo prefiere --- */
@media (prefers-reduced-motion: reduce) {
  /* Desactivamos todas las animaciones y transiciones */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}