/* ==========================================================
   CV INTERACTIVO — FABRICIO GALINDO
   css/styles.css
   ========================================================== */

/* ----------------------------------------------------------
   MÓDULO 1 — Variables globales

   ¿Por qué usar variables?
   Si quieres cambiar el color neón de verde a azul,
   solo cambias UNA línea aquí y todo el sitio se actualiza.

   :root → hace las variables accesibles en TODO el documento.
---------------------------------------------------------- */
:root {
  /* Colores */
  --bg: #0a0a0f; /* fondo principal            */
  --bg-alt: #0f0f18; /* fondo de secciones alternas*/
  --surface: #13131e; /* fondo de tarjetas          */
  --accent: #00ffaa; /* verde neón — énfasis       */
  --accent2: #00b8ff; /* azul neón  — secundario    */
  --accent-glow: rgba(0, 255, 170, 0.25);
  --border: rgba(0, 255, 170, 0.12);
  --text: #e8e8f0; /* texto principal            */
  --text-muted: #6b6b88; /* texto secundario           */

  /* Tipografía */
  --font-display: "Syne", sans-serif; /* títulos y cuerpo  */
  --font-mono: "Space Mono", monospace; /* código y etiquetas */

  /* Medidas */
  --nav-h: 68px; /* altura del navbar                  */
  --radius: 12px; /* radio de bordes de tarjetas        */
  --transition: 0.3s ease;
}

/* ----------------------------------------------------------
   MÓDULO 1 — Reset CSS

   Elimina los estilos por defecto del navegador para que
   Chrome, Firefox y Safari partan del mismo punto cero.
---------------------------------------------------------- */

/* box-sizing: border-box → padding y border se cuentan
   DENTRO del ancho declarado, no se suman encima.         */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* scroll-behavior: smooth → los links #ancla desplazan
   suavemente en lugar de saltar de golpe.                 */
html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-display);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
}

/* ----------------------------------------------------------
   MÓDULO 1 — Utilidades globales

   No pertenecen a ningún bloque BEM — son clases
   reutilizables en cualquier parte del documento.
---------------------------------------------------------- */

/* Colorea cualquier texto con el color acento */
.accent {
  color: var(--accent);
}

/* Contenedor centrado con ancho máximo */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* ----------------------------------------------------------
   MÓDULO 2 — Bloque: navbar

   BEM aplicado:
     .navbar                 → Bloque
     .navbar__logo           → Elemento
     .navbar__links          → Elemento
     .navbar__link           → Elemento
     .navbar__link--cta      → Modificador de elemento
     .navbar__link--active   → Modificador de elemento (JS)
     .navbar__hamburger      → Elemento
     .navbar__hamburger-line → Elemento
     .navbar--scrolled       → Modificador de bloque (JS)
     .navbar__links--open    → Modificador de elemento (JS)
---------------------------------------------------------- */

/* Bloque ------------------------------------------------- */
.navbar {
  position: fixed; /* flota sobre el contenido        */
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000; /* encima de todo — número alto gana */
  height: var(--nav-h);

  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2.5rem;

  background: rgba(10, 10, 15, 0.85); /* semitransparente  */
  backdrop-filter: blur(12px); /* efecto vidrio     */
  border-bottom: 1px solid var(--border);
  transition: var(--transition);
}

/* Modificador de bloque — agrega JS al hacer scroll */
.navbar--scrolled {
  background: rgba(10, 10, 15, 0.97);
  border-bottom-color: rgba(0, 255, 170, 0.2);
}

/* Elemento: logo ---------------------------------------- */
.navbar__logo {
  font-family: var(--font-mono);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -1px;
  cursor: default;
}

/* Elemento: lista de links ------------------------------ */
.navbar__links {
  display: flex;
  align-items: center;
  gap: 2rem;
}

/* Elemento: link individual ----------------------------- */
.navbar__link {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  transition: color var(--transition);
  position: relative; /* necesario para posicionar el ::after */
}

/* Línea animada que aparece bajo el link al hacer hover  */
.navbar__link::after {
  content: ""; /* pseudo-elemento vacío             */
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0; /* empieza invisible                 */
  height: 1px;
  background: var(--accent);
  transition: width var(--transition); /* anima el crecimiento */
}

/* Estado hover y modificador --active (lo pone el JS)    */
.navbar__link:hover,
.navbar__link--active {
  color: var(--text);
}

.navbar__link:hover::after {
  width: 100%; /* la línea crece de 0 a 100%        */
}

/* Modificador de elemento: variante CTA (botón Contacto) */
.navbar__link--cta {
  padding: 0.4rem 1rem;
  border: 1px solid var(--accent);
  border-radius: 4px;
  color: var(--accent) !important;
  transition:
    background var(--transition),
    color var(--transition) !important;
}

.navbar__link--cta:hover {
  background: var(--accent);
  color: var(--bg) !important;
}

.navbar__link--cta::after {
  display: none !important; /* el botón no lleva línea animada */
}

/* Elemento: botón hamburguesa (oculto en escritorio) ---- */
.navbar__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

/* Elemento: cada línea del ícono ☰ */
.navbar__hamburger-line {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: var(--transition);
}

/* Responsive -------------------------------------------- */
@media (max-width: 640px) {
  .navbar {
    padding: 0 1.5rem;
  }
  .navbar__links {
    display: none;
  }
  .navbar__hamburger {
    display: flex;
  }

  /* Modificador de elemento: menú desplegado en móvil     */
  .navbar__links--open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    background: rgba(10, 10, 15, 0.98);
    padding: 2rem;
    gap: 1.5rem;
    border-bottom: 1px solid var(--border);
  }
}

/* ----------------------------------------------------------
   MÓDULO 3 — Bloque: hero
---------------------------------------------------------- */

/* Bloque ------------------------------------------------- */
.hero {
  position: relative; /* contexto para hijos con position absolute */
  min-height: 100vh; /* siempre ocupa toda la pantalla            */
  display: flex;
  align-items: center;
  padding-top: var(--nav-h); /* empuja el contenido bajo el navbar    */
  overflow: hidden;
}

/* Elemento: cuadrícula de fondo (decorativo) ------------ */
.hero__bg-grid {
  position: absolute;
  inset: 0; /* shorthand: top:0; right:0; bottom:0; left:0 */

  /* Dos gradientes superpuestos forman la cuadrícula:
     uno crea líneas horizontales, el otro verticales */
  background-image:
    linear-gradient(rgba(0, 255, 170, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 170, 0.04) 1px, transparent 1px);
  background-size: 60px 60px;

  pointer-events: none; /* el mouse lo ignora, no interfiere con clicks */
  z-index: 0;
}

/* Pseudo-elemento: vignette (oscurece los bordes)
   Va ENCIMA del grid para crear profundidad          */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 60% 50%,
    transparent 30%,
    /* centro transparente */ var(--bg) 80% /* bordes opacos       */
  );
  pointer-events: none;
  z-index: 1; /* encima del grid (z:0) */
}

/* Elemento: contenedor principal (layout flex) ---------- */
.hero__content {
  position: relative;
  z-index: 2; /* encima del grid (z:0) y el vignette (z:1) */
  max-width: 1100px;
  margin: 0 auto;
  padding: 4rem 2rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
}

/* Elemento: bloque de texto ----------------------------- */
.hero__text {
  flex: 1; /* ocupa todo el espacio disponible */
  animation: fadeUp 0.9s ease both;
}

/* Elemento: etiqueta técnica */
.hero__tag {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--accent);
  margin-bottom: 1.2rem;
  letter-spacing: 0.05em;
}

/* Elemento: nombre */
.hero__name {
  /* clamp(min, preferido, max):
     escala con el viewport pero nunca sale de los límites */
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -2px;
  margin-bottom: 1.5rem;
}

/* Modificador: apellido con efecto contorno */
.hero__name--outline {
  -webkit-text-stroke: 2px var(--accent); /* trazo verde neón  */
  color: transparent; /* relleno invisible */
}

/* Elemento: descripción */
.hero__desc {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-muted);
  max-width: 480px;
  margin-bottom: 1.8rem;
  animation: fadeUp 0.9s ease 0.15s both; /* 150ms de retraso */
}

/* Elemento: contenedor de badges */
.hero__badges {
  display: flex;
  flex-wrap: wrap; /* bajan de línea si no caben */
  gap: 0.6rem;
  margin-bottom: 2rem;
  animation: fadeUp 0.9s ease 0.25s both;
}

/* Elemento: badge individual */
.hero__badge {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 50px; /* forma "pill" */
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.03);
  transition:
    border-color var(--transition),
    color var(--transition);
}

.hero__badge:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Elemento: contenedor de botones */
.hero__actions {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  animation: fadeUp 0.9s ease 0.35s both;
  flex-wrap: wrap;
}

/* Elemento: clase base compartida por ambos botones */
.hero__btn {
  padding: 0.75rem 1.8rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 6px;
  letter-spacing: 0.04em;
  display: inline-block; /* padding funciona correctamente en <a> */
  transition:
    box-shadow var(--transition),
    transform var(--transition),
    background var(--transition),
    color var(--transition),
    border-color var(--transition);
}

/* Modificador: botón sólido */
.hero__btn--primary {
  background: var(--accent);
  color: var(--bg);
}

.hero__btn--primary:hover {
  box-shadow: 0 0 24px var(--accent-glow);
  transform: translateY(-2px); /* sube 2px al hacer hover */
}

/* Modificador: botón con borde */
.hero__btn--secondary {
  border: 1px solid var(--border);
  color: var(--text);
}

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

/* Elemento: contenedor de links sociales */
.hero__links {
  display: flex;
  gap: 1.5rem;
  animation: fadeUp 0.9s ease 0.45s both;
}

/* Elemento: link social individual */
.hero__social {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  transition: color var(--transition);
  position: relative;
}

/* Línea animada bajo el link social */
.hero__social::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width var(--transition);
}

.hero__social:hover {
  color: var(--accent);
}
.hero__social:hover::after {
  width: 100%;
}

/* Elemento: contenedor de la foto ----------------------- */
.hero__photo-wrap {
  position: relative;
  flex-shrink: 0; /* no se encoge cuando el texto necesita espacio */
  animation: fadeIn 1.1s ease 0.3s both;
}

/* Elemento: marco de la foto */
.hero__photo-frame {
  width: 300px;
  height: 360px;
  border-radius: 16px;
  overflow: hidden; /* recorta la imagen a los bordes redondeados */
  border: 1px solid var(--border);
  background: var(--surface);
  position: relative;
  z-index: 2;
}

/* Elemento: imagen */
.hero__photo {
  width: 100%;
  height: 100%;
  object-fit: cover; /* rellena el frame sin deformar */
  object-position: center top; /* ancla la imagen arriba → muestra la cara */
  transition: filter var(--transition);
}

/* Elemento: placeholder cuando no hay foto */
.hero__photo-placeholder {
  display: none; /* onerror en el HTML lo cambia a flex */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--text-muted);
  text-align: center;
  padding: 1.5rem;
  font-size: 0.85rem;
  line-height: 1.8;
}

.hero__photo-placeholder code {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent);
}

/* Elemento: mancha de luz detrás de la foto (decorativo) */
.hero__photo-glow {
  position: absolute;
  width: 300px;
  height: 300px;
  top: 30px;
  left: 20px; /* desplazado de la foto para el efecto */
  background: var(--accent);
  border-radius: 50%;
  filter: blur(80px); /* desenfoque extremo = mancha difusa */
  opacity: 0.08;
  z-index: 1; /* detrás del frame (z:2) */
  pointer-events: none;
}

/* Elemento: indicador de scroll ------------------------- */
.hero__scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%); /* centrado horizontal */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  opacity: 0.6;
  animation: fadeIn 2s ease 1s both; /* aparece último */
}

.hero__scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--accent), transparent);
  animation: scrollPulse 2s ease infinite;
}

/* Animaciones ------------------------------------------- */

/* Aparece subiendo desde abajo */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px); /* empieza 24px más abajo */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Aparece desde transparente */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* La línea del scroll pulsa */
@keyframes scrollPulse {
  0%,
  100% {
    opacity: 0.3;
    transform: scaleY(1);
  }
  50% {
    opacity: 1;
    transform: scaleY(1.1);
  }
}

/* Responsive -------------------------------------------- */
@media (max-width: 900px) {
  .hero__content {
    flex-direction: column-reverse; /* foto arriba, texto abajo */
    text-align: center;
    padding: 3rem 1.5rem;
  }

  .hero__desc {
    max-width: 100%;
  }

  .hero__badges,
  .hero__actions,
  .hero__links {
    justify-content: center;
  }

  .hero__photo-frame {
    width: 220px;
    height: 264px;
  }
  .hero__photo-glow {
    width: 220px;
    height: 220px;
  }
}

/* ----------------------------------------------------------
   MÓDULO 4 — Bloque: skills
---------------------------------------------------------- */

/* Bloque ------------------------------------------------- */
.skills {
  padding: 6rem 0;
  background: var(--bg-alt);
}

/* Elemento: contenedor centrado */
.skills__container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Elemento: encabezado de sección */
.skills__header {
  margin-bottom: 3.5rem;
}

.skills__title {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -1px;
  margin-bottom: 0.5rem;
}

.skills__subtitle {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Elemento: grid de dos columnas (Frontend + Backend) */
.skills__groups {
  display: grid;
  grid-template-columns: 1fr 1fr; /* dos columnas iguales */
  gap: 3rem;
}

/* Elemento: grupo individual */
.skills__group {
  display: flex;
  flex-direction: column;
}

/* Elemento: título del grupo (FRONTEND / BACKEND) */
.skills__group-title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

/* Elemento: lista de habilidades */
.skills__list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Elemento: fila de una habilidad
   Estado inicial: invisible y desplazada hacia abajo
   La transición se dispara cuando el JS agrega --visible */
.skills__item {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}

/* Modificador: item visible — JS lo agrega al entrar al viewport */
.skills__item--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Elemento: fila con nombre y porcentaje */
.skills__info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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

.skills__percent {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent);
}

/* Elemento: riel de la barra (fondo gris) */
.skills__bar-track {
  height: 4px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  overflow: hidden; /* recorta el fill para que no desborde */
}

/* Elemento: relleno animado
   Empieza en width: 0% — el JS lo lleva al valor de data-level
   La transition hace el crecimiento suave durante 1 segundo   */
.skills__bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius: 2px;
  transition: width 1s ease;
}

/* Responsive -------------------------------------------- */
@media (max-width: 700px) {
  .skills__groups {
    grid-template-columns: 1fr; /* una columna en móvil */
  }
}

/* ----------------------------------------------------------
   MÓDULO 5 — Bloque: projects

   Layout:
     1. Tarjeta destacada: flex row (imagen | info)
     2. Grid de 2x2 para proyectos menores

   Animación:
     Las tarjetas del grid empiezan invisibles.
     JS agrega .projects__card--visible cuando entran
     al viewport via IntersectionObserver.
---------------------------------------------------------- */

/* Bloque ------------------------------------------------- */
.projects {
  padding: 6rem 0;
  background: var(--bg); /* alterna con --bg-alt del módulo 4 */
}

/* Elemento: contenedor centrado */
.projects__container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Elemento: encabezado — mismo patrón que .skills__header */
.projects__header {
  margin-bottom: 3.5rem;
}

.projects__title {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -1px;
  margin-bottom: 0.5rem;
}

.projects__subtitle {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ── TARJETA DESTACADA ─────────────────────────────────── */

.projects__featured {
  display: flex; /* imagen izquierda, texto derecha */
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden; /* recorta hijos al borde redondeado */
  margin-bottom: 2.5rem;
  background: var(--surface);
  transition: border-color var(--transition);
}

.projects__featured:hover {
  border-color: rgba(0, 255, 170, 0.3);
}

/* Elemento: lado izquierdo — imagen real del proyecto */
.projects__featured-img {
  flex: 0 0 340px; /* ancho fijo */
  min-height: 300px;
  border-right: 1px solid var(--border);
  overflow: hidden; /* recorta la imagen al contenedor */
  position: relative;
}

/* La imagen ocupa todo el contenedor sin deformarse */
.projects__featured-img img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* recorta y centra — no estira */
  object-position: center top; /* ancla arriba para mostrar lo más importante */
  display: block;
  transition: transform 0.4s ease;
}

/* Zoom sutil al hacer hover sobre la tarjeta destacada */
.projects__featured:hover .projects__featured-img img {
  transform: scale(1.04);
}

/* Nombre del proyecto en grande como fondo decorativo */
.projects__featured-img-label {
  font-family: var(--font-mono);
  font-size: 4rem;
  font-weight: 700;
  color: rgba(0, 255, 170, 0.08);
  user-select: none; /* no se puede seleccionar con el mouse */
  letter-spacing: -2px;
}

/* Elemento: lado derecho — información */
.projects__featured-body {
  flex: 1;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Elemento: etiqueta "// Proyecto destacado" */
.projects__featured-tag {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent);
  letter-spacing: 0.05em;
}

/* Elemento: nombre del proyecto */
.projects__featured-name {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.5px;
}

/* Elemento: descripción */
.projects__featured-desc {
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--text-muted);
  max-width: 480px;
}

/* Elemento: lista de tecnologías (compartida con tarjetas) */
.projects__featured-tech,
.projects__card-tech {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
}

/* Elemento: badge de tecnología — mismo estilo que .hero__badge */
.projects__tech-badge {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 0.25rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 50px;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.03);
  transition:
    border-color var(--transition),
    color var(--transition);
}

.projects__tech-badge:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Elemento: contenedor de links de la tarjeta destacada */
.projects__featured-links {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

/* Elemento: clase base compartida por ambos tipos de link */
.projects__link {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.55rem 1.4rem;
  border-radius: 6px;
  letter-spacing: 0.04em;
  display: inline-block;
  transition:
    background var(--transition),
    color var(--transition),
    border-color var(--transition),
    box-shadow var(--transition),
    transform var(--transition);
}

/* Modificador: link sólido — mismo patrón que .hero__btn--primary */
.projects__link--primary {
  background: var(--accent);
  color: var(--bg);
}

.projects__link--primary:hover {
  box-shadow: 0 0 20px var(--accent-glow);
  transform: translateY(-2px);
}

/* Modificador: link con borde — mismo patrón que .hero__btn--secondary */
.projects__link--secondary {
  border: 1px solid var(--border);
  color: var(--text-muted);
}

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

/* ── GRID DE TARJETAS MENORES ──────────────────────────── */

.projects__grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 columnas iguales */
  gap: 1.5rem;
}

/* Elemento: tarjeta menor
   Estado inicial: invisible y desplazada hacia abajo
   JS agrega --visible cuando entra al viewport          */
.projects__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition:
    border-color var(--transition),
    transform var(--transition),
    opacity 0.5s ease,
    translate 0.5s ease;

  /* Estado inicial para la animación de entrada */
  opacity: 0;
  translate: 0 20px;
}

/* Modificador: tarjeta visible — JS lo agrega */
.projects__card--visible {
  opacity: 1;
  translate: 0 0;
}

.projects__card:hover {
  border-color: rgba(0, 255, 170, 0.25);
  transform: translateY(-4px);
}

/* Elemento: cabecera de tarjeta (ícono + links) */
.projects__card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Elemento: ícono emoji decorativo */
.projects__card-icon {
  font-size: 1.6rem;
  line-height: 1;
}

/* Elemento: nombre del proyecto */
.projects__card-name {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.3px;
}

/* Elemento: descripción breve */
.projects__card-desc {
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--text-muted);
  flex: 1; /* empuja el tech al fondo de la tarjeta */
}

/* Responsive -------------------------------------------- */
@media (max-width: 900px) {
  .projects__featured {
    flex-direction: column; /* imagen arriba, texto abajo */
  }

  .projects__featured-img {
    flex: 0 0 180px;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .projects__featured-img-label {
    font-size: 3rem;
  }
}

@media (max-width: 640px) {
  .projects__grid {
    grid-template-columns: 1fr; /* una columna en móvil */
  }

  .projects__featured-body {
    padding: 1.5rem;
  }
}

/* ----------------------------------------------------------
   MÓDULO 6 — Bloque: experience

   Layout:
     Timeline horizontal con tres puntos sobre una línea.
     Cada punto al hacer clic expande su tarjeta de detalle
     hacia abajo.

   Animación:
     1. La línea crece de izquierda a derecha al entrar
        al viewport (JS + transition en width)
     2. Cada item aparece con fadeUp escalonado
     3. El punto activo pulsa con el anillo animado
---------------------------------------------------------- */

/* Bloque ------------------------------------------------- */
.experience {
  padding: 6rem 0;
  background: var(--bg-alt);
}

/* Elemento: contenedor centrado */
.experience__container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Elemento: encabezado */
.experience__header {
  margin-bottom: 4rem;
}

.experience__title {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -1px;
  margin-bottom: 0.5rem;
}

.experience__subtitle {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ── TIMELINE ─────────────────────────────────────────── */

/* Elemento: contenedor general del timeline */
.experience__timeline {
  position: relative;
}

/* Elemento: línea horizontal de fondo */
.experience__track {
  position: relative;
  height: 2px;
  background: var(--border);
  margin: 0 2rem;
  border-radius: 2px;
}

/* Elemento: relleno animado de la línea
   Empieza en width:0 — JS lo lleva a 100% al entrar al viewport */
.experience__track-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius: 2px;
  transition: width 1.2s ease;
}

/* Elemento: contenedor flex de los items */
.experience__items {
  display: flex;
  justify-content: space-between;
  position: relative;
  /* Sube los items para que los puntos queden sobre la línea */
  margin-top: -8px;
}

/* Elemento: item individual
   Estado inicial: invisible y desplazado hacia abajo    */
.experience__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}

/* Modificador: item visible — JS lo agrega con delay escalonado */
.experience__item--visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── PUNTO ──────────────────────────────────────────── */

/* Elemento: punto sobre la línea */
.experience__dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg-alt);
  border: 2px solid var(--accent);
  position: relative;
  z-index: 2;
  transition:
    background var(--transition),
    transform var(--transition);
}

/* Elemento: anillo pulsante alrededor del punto activo */
.experience__dot-ring {
  position: absolute;
  inset: -6px; /* más grande que el punto */
  border-radius: 50%;
  border: 1px solid var(--accent);
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity var(--transition),
    transform var(--transition);
}

/* Hover y estado activo del punto */
.experience__item:hover .experience__dot,
.experience__item--active .experience__dot {
  background: var(--accent);
  transform: scale(1.2);
}

/* El anillo aparece al hacer hover o cuando está activo */
.experience__item:hover .experience__dot-ring,
.experience__item--active .experience__dot-ring {
  opacity: 0.5;
  transform: scale(1);
  /* Pulsa solo en el item activo */
  animation: none;
}

.experience__item--active .experience__dot-ring {
  animation: ringPulse 1.8s ease infinite;
}

/* ── FECHA ──────────────────────────────────────────── */

.experience__date {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent);
  margin-top: 0.75rem;
  letter-spacing: 0.05em;
}

/* ── TARJETA DE DETALLE ─────────────────────────────── */

/* Elemento: tarjeta — oculta por defecto
   Al hacer clic JS agrega --active al item padre
   y la tarjeta se expande con max-height          */
.experience__card {
  margin-top: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0;
  width: 100%;
  max-width: 320px;
  max-height: 0; /* oculta */
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 0.5s ease,
    opacity 0.4s ease,
    padding 0.4s ease,
    border-color var(--transition);
}

/* Cuando el item tiene --active, la tarjeta se abre */
.experience__item--active .experience__card {
  max-height: 600px; /* valor alto para que quepa el contenido */
  opacity: 1;
  padding: 1.5rem;
}

.experience__item--active .experience__card,
.experience__item:hover .experience__card {
  border-color: rgba(0, 255, 170, 0.25);
}

/* Elemento: cabecera de la tarjeta */
.experience__card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

/* Elemento: puesto */
.experience__role {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.2px;
  margin-bottom: 0.2rem;
}

/* Elemento: empresa */
.experience__company {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--accent);
}

/* Elemento: periodo */
.experience__period {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-muted);
  white-space: nowrap; /* no parte el texto en dos líneas */
  flex-shrink: 0;
}

/* Elemento: descripción */
.experience__desc {
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

/* ── PROYECTOS DENTRO DE LA TARJETA ─────────────────── */

.experience__projects {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 0.5rem;
}

/* Elemento: proyecto individual */
.experience__project {
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* Elemento: nombre del proyecto */
.experience__project-name {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--accent2); /* azul neón para diferenciar de los títulos */
  letter-spacing: 0.03em;
}

/* Elemento: lista de tecnologías */
.experience__project-tech {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
}

/* Elemento: tag de tecnología — más pequeño que .projects__tech-badge */
.experience__tech-tag {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 50px;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.02);
}

/* Animación del anillo pulsante */
@keyframes ringPulse {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0.15;
    transform: scale(1.4);
  }
}

/* Responsive -------------------------------------------- */
@media (max-width: 900px) {
  /* En móvil el timeline se convierte en lista vertical */
  .experience__track {
    display: none; /* ocultamos la línea horizontal */
  }

  .experience__items {
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 0;
  }

  .experience__item {
    align-items: flex-start; /* alineación a la izquierda */
    flex-direction: row; /* punto + contenido en fila */
    gap: 1rem;
  }

  .experience__dot {
    margin-top: 0.2rem;
    flex-shrink: 0;
  }

  .experience__date {
    display: none; /* la fecha ya está en la tarjeta */
  }

  .experience__card {
    max-height: none; /* siempre visible en móvil */
    opacity: 1;
    padding: 1.25rem;
    max-width: 100%;
  }

  /* En móvil no hay interacción de clic — todo siempre abierto */
  .experience__item--active .experience__card {
    max-height: none;
  }
}
/* ----------------------------------------------------------
   MÓDULO 7 — Bloque: contact

   Layout:
     Encabezado centrado + lista vertical de tres links.
     Cada link es una fila con ícono, texto y flecha.

   Animación:
     Los links entran desde la izquierda con delay
     escalonado via IntersectionObserver.
---------------------------------------------------------- */

/* Bloque ------------------------------------------------- */
.contact {
  padding: 6rem 0 4rem;
  background: var(--bg);
}

/* Elemento: contenedor centrado */
.contact__container {
  max-width: 700px; /* más estrecho — sección de cierre */
  margin: 0 auto;
  padding: 0 2rem;
}

/* Elemento: encabezado */
.contact__header {
  margin-bottom: 3.5rem;
}

.contact__title {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 800;
  letter-spacing: -2px;
  margin-bottom: 0.5rem;
}

.contact__subtitle {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}

.contact__desc {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--text-muted);
  max-width: 480px;
}

/* ── LISTA DE LINKS ─────────────────────────────────── */

.contact__links {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 4rem;
}

/* Elemento: link individual
   Estado inicial: invisible y desplazado a la izquierda */
.contact__link {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  opacity: 0;
  transform: translateX(-24px); /* entra desde la izquierda */
  transition:
    border-color var(--transition),
    transform var(--transition),
    background var(--transition),
    opacity 0.5s ease;
}

/* Modificador: visible — JS lo agrega con delay escalonado */
.contact__link--visible {
  opacity: 1;
  transform: translateX(0);
}

.contact__link:hover {
  border-color: rgba(0, 255, 170, 0.3);
  background: rgba(0, 255, 170, 0.03);
}

/* Mueve la flecha a la derecha al hacer hover */
.contact__link:hover .contact__link-arrow {
  transform: translateX(4px);
  color: var(--accent);
}

/* Elemento: ícono decorativo */
.contact__link-icon {
  font-size: 1.4rem;
  color: var(--accent);
  flex-shrink: 0;
  width: 2rem;
  text-align: center;
}

/* Elemento: cuerpo del link (label + value) */
.contact__link-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
}

/* Elemento: etiqueta // Email, // GitHub, etc. */
.contact__link-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

/* Elemento: valor — el link real */
.contact__link-value {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  transition: color var(--transition);
}

.contact__link:hover .contact__link-value {
  color: var(--accent);
}

/* Elemento: flecha decorativa */
.contact__link-arrow {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--text-muted);
  flex-shrink: 0;
  transition:
    transform var(--transition),
    color var(--transition);
}

/* ── PIE DE SECCIÓN ─────────────────────────────────── */

.contact__footer {
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  text-align: center;
}

.contact__footer-text {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

/* Responsive -------------------------------------------- */
@media (max-width: 640px) {
  .contact__link {
    padding: 1rem 1.25rem;
    gap: 1rem;
  }

  .contact__link-value {
    font-size: 0.85rem;
  }
}