/* =========================================================
   Portafolio de Carlos Mario Hoyos Ríos — estilos
   Diseño "Hero + pipeline" (ver CLAUDE.md sección 5).
   Mobile-first: los estilos base son para móvil y las media
   queries (min-width) agregan cambios para pantallas grandes.
   Nombres de clases: BEM (bloque__elemento--modificador) y estados is-*.
   ========================================================= */

/* ---------- 0. Fuentes alojadas en el sitio (sin Google Fonts) ----------
   Licencia SIL OFL 1.1 (ver assets/fonts/OFL-*.txt). Solo el subconjunto "latin":
   cubre español e inglés. font-display: swap muestra el texto de inmediato con
   la fuente del sistema y la cambia cuando termina de cargar. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700; /* fuente variable: un solo archivo para todos los grosores */
  font-display: swap;
  src: url("../assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 1. Variables (paleta, tipografía, medidas) ---------- */
:root {
  /* Colores: grises neutros casi negros + el azul del banner como único acento */
  --color-bg-start: #0f1012;
  --color-bg-end: #141519;
  --color-surface: #16171b;
  --color-text: #e8e9ee;
  --color-text-secondary: #b3b6c2;
  --color-text-muted: #8a8e9c;
  --color-accent: #4fc3f7;
  --color-border: #2a2c32;
  --color-border-soft: rgba(58, 60, 68, 0.7);
  --color-border-strong: #3d4048;            /* borde al pasar el mouse */
  --color-glow: rgba(79, 195, 247, 0.12);   /* brillo azul del banner, suave sobre el gris */
  --color-bar: rgba(15, 16, 18, 0.92);      /* barra de navegación móvil, casi opaca */
  --color-success: #6ee7b7;                 /* estado "Terminado" */
  --color-warning: #fcd34d;                 /* estado "En desarrollo" */

  /* Tipografía: Inter para el texto, JetBrains Mono para detalles técnicos (chips, fechas, etiquetas) */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Consolas, "Liberation Mono", Menlo, monospace;

  /* Medidas */
  --gutter: 1rem;          /* margen lateral en móvil (16 px) */
  --bar-height: 3.5rem;    /* alto de la barra fija en móvil */
  --content-width: 64rem;  /* ancho máximo del contenido en escritorio (deja espacio a las rejillas) */
  --text-width: 46rem;     /* ancho máximo de los párrafos: líneas cómodas de leer */
  --nav-width: 12rem;      /* ancho del índice pipeline en escritorio */
  --node-size: 0.625rem;   /* diámetro de los nodos del índice */
  --radius: 0.5rem;
}

/* ---------- 2. Reset mínimo ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* El degradado va en <html> para cubrir toda la ventana */
  background: var(--color-bg-start) linear-gradient(180deg, var(--color-bg-start), var(--color-bg-end));
  min-height: 100%;
  -webkit-text-size-adjust: 100%;
  /* Al saltar a una sección, que la barra fija no tape el título */
  scroll-padding-top: calc(var(--bar-height) + 1rem);
}

/* Scroll suave al saltar a una sección, solo si la persona no pidió menos movimiento */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
  overflow-wrap: break-word; /* evita que URLs largas causen scroll horizontal */
}

img,
picture {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ---------- 3. Tipografía ---------- */
h1,
h2,
h3 {
  color: var(--color-text);
  line-height: 1.2;
  margin: 0 0 0.75rem;
}

h1 {
  font-size: clamp(2.5rem, 9vw, 5rem); /* crece con la pantalla, con mínimo y máximo */
  font-weight: 700;
  letter-spacing: -0.03em;
}

h2 {
  font-size: 1.5rem;
  font-weight: 700;
}

h3 {
  font-size: 1.125rem;
  font-weight: 600;
}

p {
  margin: 0 0 1rem;
}

strong {
  color: var(--color-text);
  font-weight: 600;
}

/* Detalles técnicos en monoespaciada */
.project__meta,
.timeline__date,
.chips,
.profiles__label,
.stack__title,
.credential__meta,
.project__more > summary,
.status {
  font-family: var(--font-mono);
  font-size: 0.875rem;
}

/* ---------- 4. Enlaces y foco ---------- */
a {
  color: var(--color-accent);
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

/* Foco visible solo al navegar con teclado (no al hacer clic) */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Enlace "Saltar al contenido": oculto hasta que recibe el foco */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--gutter);
  z-index: 100;
  padding: 0.5rem 1rem;
  background: var(--color-accent);
  color: var(--color-bg-start);
  font-weight: 600;
  border-radius: var(--radius);
}

.skip-link:focus {
  top: 0.5rem;
}

/* ---------- 4b. Utilidades y componentes reutilizables ---------- */

/* Oculta un texto a la vista pero lo deja disponible para lectores de pantalla */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* El sprite de iconos no ocupa espacio (no se usa display:none para que <use> funcione en todos los navegadores) */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  width: 1.125em;
  height: 1.125em;
  flex-shrink: 0;
}

/* Botones (son enlaces con apariencia de botón) */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px; /* área táctil mínima recomendada */
  padding: 0.5rem 1rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.btn:hover {
  background: rgba(79, 195, 247, 0.1);
  border-color: var(--color-accent);
}

.btn--primary {
  color: var(--color-bg-start);
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.btn--primary:hover {
  background: #81d4fa;
}

/* Chips (píldoras con borde, como en el banner) */
.chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chips > li {
  padding: 0.25rem 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
  background: rgba(22, 23, 27, 0.6);
  border: 1px solid var(--color-border-soft);
  border-radius: 999px;
}

/* "Aprendiendo": borde punteado, como algo que aún está en construcción */
.chips--learning > li {
  border-style: dashed;
}

/* Etiqueta de estado de un proyecto */
.status {
  display: inline-block;
  padding: 0.125rem 0.625rem;
  font-size: 0.75rem;
  line-height: 1.6;
  border: 1px solid currentColor;
  border-radius: 999px;
}

.status--done {
  color: var(--color-success);
}

.status--wip {
  color: var(--color-warning);
}

.status--soon {
  color: var(--color-text-secondary);
}

/* ---------- 5. Hero: primera pantalla completa ---------- */
.hero {
  position: relative;
  overflow: hidden; /* la red de nodos y las ondas no generan scroll horizontal */
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh; /* alto real de la pantalla en móvil (sin la barra del navegador) */
  padding: 4rem var(--gutter) 6rem;
  /* Brillo azul arriba a la derecha, como en el banner */
  background: radial-gradient(ellipse at 90% 0%, var(--color-glow), transparent 60%);
}

.hero__inner {
  position: relative; /* queda por encima de la red de nodos */
  z-index: 1;
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
}

.hero__title {
  font-size: clamp(1.25rem, 3.5vw, 1.75rem);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.hero__subtitle {
  font-size: 1.125rem;
  max-width: 36ch; /* líneas cortas se leen mejor */
}

.hero__location {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

/* Red de nodos decorativa */
.hero__network {
  position: absolute;
  top: 3rem;
  right: -6rem;
  width: min(110vw, 560px);
  height: auto;
  opacity: 0.35; /* tenue en móvil para no competir con el texto */
  pointer-events: none;
}

.hero__lines line {
  stroke: var(--color-border);
  stroke-width: 1;
  opacity: 0.6;
}

.hero__nodes circle {
  fill: var(--color-accent);
}

/* Ondas inferiores */
.hero__waves {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 5rem;
  pointer-events: none;
}

.hero__waves path {
  fill: none;
  stroke: var(--color-border-soft);
  stroke-width: 1.5;
}

/* Bloque "dos perfiles" */
.profiles {
  display: grid;
  gap: 1rem;
  margin: 2rem 0 1.5rem;
}

.profiles__label {
  margin: 0;
  font-weight: 400;
  color: var(--color-text-muted);
}

.profile {
  padding: 1.25rem;
  background: rgba(22, 23, 27, 0.7); /* superficie semitransparente sobre el hero */
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
}

.profile__skills {
  margin: 0 0 1.25rem;
  padding-left: 1.25rem;
}

/* Enlaces sociales: iconos en círculo */
.social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-soft);
  border-radius: 50%;
  transition: color 0.2s ease, border-color 0.2s ease;
}

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

.social__link .icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* ---------- 6. Índice pipeline (navegación) ---------- */

/* Sin JS: la lista se muestra completa y no hace falta el botón */
.site-nav {
  padding: 1rem var(--gutter);
}

.site-nav__brand,
.site-nav__toggle {
  display: none;
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

.site-nav ul a {
  color: var(--color-text-secondary);
  text-decoration: none;
  font-weight: 600;
}

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

/* Con JS (móvil): barra fija arriba con nombre corto y botón "Menú" */
.js body {
  padding-top: var(--bar-height);
}

.js .site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--bar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  background: var(--color-bar);
  border-bottom: 1px solid var(--color-border-soft);
}

.js .site-nav__brand {
  display: block;
  color: var(--color-text);
  font-weight: 700;
  text-decoration: none;
}

.js .site-nav__toggle {
  display: block;
  padding: 0.4rem 0.9rem;
  font: inherit;
  font-weight: 600;
  color: var(--color-accent);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
}

/* Lista desplegable: oculta hasta que se abre el menú */
.js .site-nav ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 0.5rem var(--gutter) 1rem;
  flex-direction: column;
  gap: 0;
  background: var(--color-bar);
  border-bottom: 1px solid var(--color-border-soft);
}

/* Selector de idioma ES | EN: oculto sin JS (no podría cambiar nada) */
.lang-switch {
  display: none;
}

.js .lang-switch {
  display: inline-flex;
  margin-left: auto;    /* en la barra móvil queda junto al botón Menú */
  margin-right: 0.75rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  overflow: hidden;
}

.lang-switch__btn {
  min-width: 2.5rem;
  padding: 0.35rem 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.lang-switch__btn:hover {
  color: var(--color-text);
}

/* El idioma activo: fondo de acento (texto oscuro sobre #4fc3f7 cumple AA) */
.lang-switch__btn[aria-pressed="true"] {
  color: var(--color-bg-start);
  background: var(--color-accent);
}

.js .site-nav.is-open ul {
  display: flex;
}

.js .site-nav ul a {
  display: block;
  padding: 0.75rem 0; /* área táctil cómoda (≥ 44 px) */
}

/* Sección activa en el menú desplegable (en escritorio se enciende el nodo, ver sección 9) */
.js .site-nav ul a.is-active {
  color: var(--color-accent);
}

/* ---------- 7. Contenido ---------- */
main {
  padding: 0 var(--gutter);
}

.section {
  padding: 2.5rem 0;
}

/* El contenido es ancho para las rejillas, pero los párrafos no pasan de --text-width */
main p {
  max-width: var(--text-width);
}

/* Título de sección con un nodo encendido, como en el índice pipeline */
.section__title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.section__title::before {
  content: "";
  flex-shrink: 0;
  width: var(--node-size);
  height: var(--node-size);
  background: var(--color-accent);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(79, 195, 247, 0.2);
}

.subsection__title {
  margin: 2rem 0 0.5rem;
  font-size: 1rem;
}

/* Sobre mí */
.about__body {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}

/* La foto tiene fondo blanco: en círculo y con borde de acento no se ve como un recuadro */
.about__photo img {
  width: 160px;
  border: 2px solid var(--color-accent);
  border-radius: 50%;
}

.facts {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.facts__item {
  padding: 1rem 1.25rem;
  font-size: 0.9375rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
}

.facts__value {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 1.5rem;
  color: var(--color-accent);
}

/* Stack */
.stack {
  display: grid;
  gap: 1.75rem;
}

.stack__title {
  margin-bottom: 0.625rem;
  font-weight: 400;
  color: var(--color-text-muted);
}

/* Proyectos: rejilla de tarjetas (1 columna en móvil, 2 desde tablet) */
.projects {
  display: grid;
  gap: 1.25rem;
}

/* Columna flexible: los botones quedan abajo aunque las tarjetas tengan distinto alto */
.project {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  transition: border-color 0.2s ease;
}

.project:hover {
  border-color: var(--color-border-strong);
}

.project > :last-child {
  margin-bottom: 0;
}

.project__header {
  margin-bottom: 1rem;
}

.project__title {
  margin-bottom: 0.5rem;
}

.project__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  color: var(--color-text-muted);
}

/* "Ver detalles": <details> nativo, se abre con clic o con Enter/Espacio sin JS */
.project__more {
  margin-bottom: 1.25rem;
}

.project__more > summary {
  width: fit-content;
  padding: 0.25rem 0;
  color: var(--color-accent);
  cursor: pointer;
}

.project__more > summary:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.project__details {
  margin: 0.75rem 0 0;
  padding-left: 1.25rem;
}

.project__details li + li {
  margin-top: 0.375rem;
}

.project .chips {
  margin-bottom: 1.25rem;
}

.project__actions {
  margin-top: auto; /* empuja los botones al fondo de la tarjeta */
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* "Próximamente": sin fondo y con borde punteado (atenuada pero con buen contraste) */
.project--upcoming {
  background: transparent;
  border-style: dashed;
}

/* Experiencia: línea de tiempo con nodos */
.timeline {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.75rem;
}

.timeline::before {
  content: "";
  position: absolute;
  left: calc(var(--node-size) / 2 - 0.5px);
  top: 0.5rem;
  bottom: 0.5rem;
  width: 1px;
  background: var(--color-border);
}

.timeline__item {
  position: relative;
  padding-bottom: 2rem;
}

.timeline__item:last-child {
  padding-bottom: 0;
}

.timeline__item::before {
  content: "";
  position: absolute;
  left: -1.75rem;
  top: 0.45rem;
  width: var(--node-size);
  height: var(--node-size);
  background: var(--color-bg-start);
  border: 1px solid var(--color-accent);
  border-radius: 50%;
}

/* El trabajo actual tiene el nodo encendido */
.timeline__item--current::before {
  background: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(79, 195, 247, 0.2);
}

.timeline__date {
  margin: 0 0 0.25rem;
  color: var(--color-text-muted);
}

.timeline__role {
  font-size: 1.0625rem;
}

.timeline__company {
  font-weight: 400;
  color: var(--color-accent);
}

/* Educación, certificaciones e idiomas */
.credentials-layout {
  display: grid;
  gap: 0 2.5rem;
}

.credentials-layout__col:first-child > .subsection__title:first-child {
  margin-top: 0;
}

.credentials {
  list-style: none;
  margin: 0;
  padding: 0;
}

.credential {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-border);
}

.credential__name {
  flex: 1 1 14rem;
  color: var(--color-text);
}

.credential__meta,
.status {
  color: var(--color-text-muted);
}

.credential__link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
}

/* Contacto */
.contact__links {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Footer */
.site-footer {
  margin-top: 2rem;
  padding: 2rem var(--gutter) 3rem;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
}

.site-footer p {
  margin: 0;
}

/* Página 404: una sola columna centrada (anula la rejilla de escritorio del body) */
body.notfound-page {
  display: grid;
  grid-template-columns: 1fr; /* en escritorio el body tiene 4 columnas: aquí solo una */
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 2rem var(--gutter);
}

.notfound {
  grid-column: auto; /* en escritorio main va a la columna 3; aquí no hay columnas */
  max-width: 32rem;
  padding: 0;
  text-align: center;
}

.notfound__code {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(4rem, 20vw, 7rem);
  line-height: 1;
  color: var(--color-accent);
}

.notfound__title {
  margin: 1rem 0;
  font-size: clamp(1.5rem, 6vw, 2rem);
}

/* El texto en inglés va debajo, más tenue */
.notfound__alt {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.85em;
  font-weight: 400;
  color: var(--color-text-muted);
}

.notfound .btn {
  margin-top: 1rem;
}

/* ---------- 8. Tablet: perfiles lado a lado ---------- */
@media (min-width: 640px) {
  .profiles {
    grid-template-columns: 1fr 1fr;
  }

  .profiles__label {
    grid-column: 1 / -1; /* la etiqueta ocupa las dos columnas */
  }

  .hero__network {
    opacity: 0.6;
  }

  .about__body {
    grid-template-columns: 160px 1fr;
    gap: 2rem;
  }

  .facts {
    grid-template-columns: repeat(3, 1fr);
  }

  .stack {
    grid-template-columns: 1fr 1fr;
  }
}

/* Tablet ancha: proyectos y credenciales en 2 columnas */
@media (min-width: 768px) {
  .projects,
  .credentials-layout {
    grid-template-columns: 1fr 1fr;
  }

  /* Lado a lado, la columna de certificaciones también empieza sin margen (en móvil sí lo necesita) */
  .credentials-layout__col + .credentials-layout__col > .subsection__title:first-child {
    margin-top: 0;
  }
}

/* ---------- 9. Escritorio: índice pipeline + contenido ---------- */
@media (min-width: 1024px) {
  html {
    scroll-padding-top: 2rem;
  }

  /* Rejilla: margen | índice | contenido | margen. El hero y el footer ocupan lo que necesiten */
  body,
  .js body {
    display: grid;
    grid-template-columns: 1fr var(--nav-width) minmax(0, var(--content-width)) 1fr;
    column-gap: 3rem;
    padding: 0;
  }

  .hero {
    grid-column: 1 / -1; /* ancho completo */
    padding: 5rem 3rem 7rem;
  }

  .hero__network {
    top: 4rem;
    right: 4%;
    width: 520px;
  }

  main,
  .site-footer {
    grid-column: 3;
    padding-left: 0;
    padding-right: 0;
  }

  main {
    padding-top: 2rem;
  }

  /* El índice se queda fijo (sticky) mientras el contenido avanza */
  .site-nav,
  .js .site-nav {
    grid-column: 2;
    grid-row: 2 / span 2; /* acompaña al contenido y al footer */
    align-self: start;    /* sin esto se estira y sticky no funciona */
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    padding: 0;
    background: none;
    border: 0;
  }

  .js .site-nav__brand,
  .js .site-nav__toggle {
    display: none;
  }

  /* Selector de idioma fijo arriba a la derecha: visible desde la primera pantalla */
  .js .lang-switch {
    position: fixed;
    top: 1.25rem;
    right: 1.5rem;
    z-index: 50;
    margin: 0;
    background: var(--color-bar);
  }

  /* Lista vertical con una línea que conecta los nodos */
  .site-nav ul,
  .js .site-nav ul {
    position: relative;
    inset: auto; /* anula el top: 100% del menú desplegable móvil */
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    padding: 0 0 0 1.5rem;
    background: none;
    border: 0;
  }

  .site-nav ul::before {
    content: "";
    position: absolute;
    left: calc(var(--node-size) / 2 - 0.5px);
    top: 0.5rem;
    bottom: 0.5rem;
    width: 1px;
    background: var(--color-border);
  }

  .site-nav ul a,
  .js .site-nav ul a {
    position: relative;
    display: block;
    padding: 0;
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--color-text-muted);
  }

  /* El nodo de cada sección */
  .site-nav ul a::before {
    content: "";
    position: absolute;
    left: -1.5rem;
    top: 50%;
    width: var(--node-size);
    height: var(--node-size);
    transform: translateY(-50%);
    border: 1px solid var(--color-accent);
    border-radius: 50%;
    background: var(--color-bg-start);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
  }

  /* Nodo encendido: al pasar el mouse o en la sección activa (initActiveSection en main.js) */
  .site-nav ul a:hover,
  .site-nav ul a.is-active,
  .js .site-nav ul a.is-active {
    color: var(--color-text);
  }

  .site-nav ul a:hover::before,
  .site-nav ul a.is-active::before {
    background: var(--color-accent);
    box-shadow: 0 0 0 4px rgba(79, 195, 247, 0.2);
  }
}

/* ---------- 10. Pantallas anchas: stack en 3 columnas ---------- */
@media (min-width: 1280px) {
  .stack {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- 11. Movimiento reducido ---------- */
/* Si la persona pidió menos animaciones en su sistema, las desactivamos */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}