/* ──────────────────────────────────────────────────────────────────────────
   Sitio personal de Santiago Barclay.
   Consume los tokens y componentes del design system Industry
   (_ds/industry-…/styles.css). Toda medida, color y tipografía sale de
   var(--color-*), var(--font-*), var(--space-*) — nunca un hex suelto.
   ────────────────────────────────────────────────────────────────────────── */

body { margin: 0; text-wrap: pretty; }
a { color: var(--color-accent-700); }
a:hover { color: var(--color-accent-800); }

/* El ancho de la caja de contenido, compartido por el shell y la nav para que
   los enlaces queden alineados con el texto de la página. */
:root {
  --page-max: 1160px;
  --page-pad: clamp(20px, 5vw, 72px);
}

.shell {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-pad);
}
.shell-narrow { --page-max: 900px; padding-bottom: 72px; }

/* — navegación ─────────────────────────────────────────────────────────── */

.nav {
  flex-wrap: wrap;
  row-gap: var(--space-2);
  padding-inline: max(var(--page-pad), calc((100% - var(--page-max)) / 2 + var(--page-pad)));
}
.nav-brand a { color: inherit; text-decoration: none; }
.nav .nav-cv {
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
/* .btn-primary ya define su color; el reset de .nav a lo pisaría. */
.nav a.btn-primary { color: var(--color-bg); }
.nav a.btn-primary:hover { color: var(--color-bg); }

.nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}

/* En pantallas angostas los seis enlaces no entran en una línea junto a la
   marca. Se reordena en dos filas: marca y CV arriba (la acción principal
   queda a mano), la navegación completa abajo. */
@media (max-width: 760px) {
  .nav {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-3) var(--space-4);
  }
  /* Posiciones explícitas: en orden de DOM el CV cae en una tercera fila. */
  .nav-brand { grid-area: 1 / 1; margin-right: 0; }
  .nav .nav-cv { grid-area: 1 / 2; justify-self: end; }
  .nav-links { grid-area: 2 / 1 / auto / -1; }
}

/* — enlaces con marco blueprint (proyectos, tools) ──────────────────────── */

.card-link {
  position: relative;
  display: block;
  padding: 24px;
  border: 1px solid var(--color-divider);
  text-decoration: none;
  color: var(--color-text);
  transition: background 0.15s ease;
}
.card-link:hover {
  background: color-mix(in srgb, var(--color-accent) 6%, transparent);
  color: var(--color-text);
}
.card-link-kicker {
  display: block;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-700);
  font-weight: 600;
}
.card-link-title {
  font-size: 22px;
  line-height: 26px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 10px 0 0;
}
.card-link-title-sm { font-size: 20px; line-height: 24px; margin: 0; }
.card-link-desc {
  font-size: 14px;
  line-height: 22px;
  margin: 10px 0 0;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

/* — encabezados de sección numerados ───────────────────────────────────── */

.section { padding: 48px 0; }
.section-kicker {
  display: block;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-accent-700);
  margin: 0 0 12px;
}
.section-rule { margin: 0 0 32px; }

.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(20px, 3vw, 40px);
}
.grid-auto-sm { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid-auto-xs {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}

/* — portada ────────────────────────────────────────────────────────────── */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: 48px clamp(32px, 6vw, 96px);
  align-items: center;
  padding: 72px 0 24px;
}
.hero h1 {
  font-size: clamp(48px, 7vw, 96px);
  line-height: 1.04;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  /* compensa el sidebearing izquierdo de la condensada para que la caja
     óptica del título arranque a ras del margen */
  margin: 0 0 0 -0.052em;
}
.hero h1 span { display: block; }
/* Las imágenes declaran width/height en el HTML para reservar su lugar antes
   de cargar; height:auto libera esa altura una vez que manda el CSS. */
.hero-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.hero-role { font-size: 15px; line-height: 24px; margin: 16px 0 0; }

.scroll-cue {
  display: flex;
  justify-content: center;
  padding: 4px 0 20px;
}
.scroll-cue svg { animation: scroll-bounce 1.6s ease-in-out infinite; }
@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(9px); }
}

.page-header { padding: 56px 0 40px; }
.page-header h1 {
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.04;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0 0 0 -0.052em;
}
.page-header p {
  font-size: 15px;
  line-height: 24px;
  margin: 16px 0 0;
  max-width: 60ch;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

/* — trayectoria (el árbol) ─────────────────────────────────────────────── */

.lane-heads {
  position: sticky;
  top: 0;
  z-index: 5;
  height: 62px;
  background: color-mix(in srgb, var(--color-bg) 90%, transparent);
  backdrop-filter: blur(3px);
  border-bottom: 1px solid var(--color-divider);
}
.lane-head, .lane-cur {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
}
.lane-head {
  top: 10px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-accent-700);
}
.lane-cur {
  top: 30px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
  opacity: 0;
  transition: opacity 0.25s ease;
}

#tree-wrap { position: relative; overflow: hidden; }
#tree-canvas { position: relative; width: 1100px; transform-origin: 0 0; }
#tree-canvas svg { position: absolute; inset: 0; }

.tree-year {
  position: absolute;
  left: 30px;
  width: 56px;
  text-align: right;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
  font-feature-settings: "tnum" 1;
}
.tree-marker { position: absolute; opacity: 0; transition: opacity 0.5s ease 0.1s; }
.tree-label, .tree-total {
  position: absolute;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.tree-label-year {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-accent-700);
  font-feature-settings: "tnum" 1;
}
.tree-label-title {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  line-height: 19px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-top: 2px;
}
.tree-label-sub {
  display: block;
  font-size: 12.5px;
  line-height: 17px;
  margin-top: 2px;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
.tree-total { width: 180px; text-align: center; }
.tree-total-value {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 34px;
  line-height: 36px;
  letter-spacing: 0.02em;
  font-feature-settings: "tnum" 1;
}
.tree-total-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  margin-top: 4px;
}

/* Dos presentaciones para los mismos hechos: el árbol dibujado y la lista
   cronológica. El árbol necesita JS y unos 900px de ancho — abajo de eso el
   lienzo de 1100px se encoge hasta que el texto deja de leerse. Se muestra
   siempre una sola de las dos. */
#lane-heads, #tree-wrap { display: none; }
.js #lane-heads, .js #tree-wrap { display: block; }
.js #tree-events, .js #tree-totals { display: none; }

@media (max-width: 900px) {
  .js #lane-heads, .js #tree-wrap { display: none; }
  .js #tree-events { display: block; }
  .js #tree-totals { display: flex; }
}

.tree-list {
  list-style: none;
  margin: 0;
  padding: 8px 0 0;
  border-top: 1px solid var(--color-divider);
}
.tree-list li {
  display: grid;
  grid-template-columns: 4.5ch 1fr;
  gap: 4px 20px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.tl-year {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-accent-700);
  font-feature-settings: "tnum" 1;
}
.tree-src-title {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 17px;
  line-height: 20px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.tree-src-sub {
  display: block;
  font-size: 12.5px;
  line-height: 17px;
  margin-top: 2px;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
/* El carril del hecho es una etiqueta derivada de data-lane: se escribe una
   sola vez acá en lugar de repetirla en cada <li>. */
.tree-list li .tl-body::after {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}
.tree-list li[data-lane="work"] .tl-body::after { content: "Experiencia laboral"; }
.tree-list li[data-lane="trunk"] .tl-body::after { content: "Educación"; }
.tree-list li[data-lane="par"] .tl-body::after { content: "Estudios paralelos"; }

/* Mismo cierre que al pie del árbol: la cifra arriba, qué mide abajo. */
.tree-totals-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
  margin: 0;
  padding: 24px 0 0;
}
.tree-totals-list .tree-src-value {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 30px;
  line-height: 32px;
  letter-spacing: 0.02em;
  font-feature-settings: "tnum" 1;
}
.tree-totals-list .tree-src-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  margin-top: 4px;
}

/* Quien pidió menos movimiento ve el árbol completo, sin animación. */
@media (prefers-reduced-motion: reduce) {
  .scroll-cue svg { animation: none; }
  .tree-marker, .tree-label, .tree-total { transition: none; }
}

/* — libro ──────────────────────────────────────────────────────────────── */

.book {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: 24px clamp(24px, 5vw, 96px);
  align-items: center;
}
.book h3 {
  font-size: 32px;
  line-height: 36px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0;
}
.book p {
  font-size: 15px;
  line-height: 24px;
  margin: 16px 0 0;
  max-width: 60ch;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
.book-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.book-actions .btn { text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.book-cover img { width: 100%; height: auto; display: block; }

/* En mobile el hero y el libro pasan a una sola columna: a dos columnas la
   foto y la portada quedan en miniatura y el título se parte en cada palabra. */
@media (max-width: 720px) {
  .hero, .book { grid-template-columns: minmax(0, 1fr); }
  .hero { padding-top: 40px; gap: 32px; }
  .hero-photo { max-width: 320px; }
  .book-cover { max-width: 320px; }
}

/* — resumen de trainings en la portada ─────────────────────────────────── */

.training-chip {
  border: 1px solid var(--color-divider);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.training-chip-name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.training-chip-desc {
  font-size: 13px;
  line-height: 19px;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
}

/* — índice de trainings ────────────────────────────────────────────────── */

.index-head {
  display: flex;
  border-bottom: 1px solid var(--color-divider);
}
.index-head span {
  padding: 12px 24px;
  font-size: 13px;
  line-height: 24px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
.index-head span:first-child { flex: 1; }
.index-head-count {
  border-left: 1px solid var(--color-divider);
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  white-space: nowrap;
}
.index-rows { display: flex; flex-direction: column; }
.row-link {
  display: grid;
  grid-template-columns: 3ch 1fr;
  gap: 20px;
  align-items: baseline;
  padding: 14px 24px;
  text-decoration: none;
  color: var(--color-text);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
  transition: background 0.15s ease;
}
.row-link:hover {
  background: color-mix(in srgb, var(--color-accent) 6%, transparent);
  color: var(--color-text);
}
.row-num {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-accent-700);
}
.row-name {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.row-desc {
  display: block;
  font-size: 13px;
  line-height: 19px;
  margin-top: 2px;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
}
.index-foot {
  margin: 0;
  padding: 12px 24px;
  font-size: 13px;
  line-height: 24px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

/* — tools ──────────────────────────────────────────────────────────────── */

.tool {
  position: relative;
  border: 1px solid var(--color-divider);
  padding: 24px;
  margin: 0 0 44px;
  /* Al llegar desde /tools#hash la caja no queda pegada al borde. */
  scroll-margin-top: 20px;
}
.tool:last-of-type { margin-bottom: 0; }
.tool-kicker {
  display: block;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-accent-700);
}
.tool .field { margin-top: 16px; }
.tool textarea.input, .tool input.input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.tool-note {
  font-size: 12.5px;
  margin: 16px 0 0;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
.tool-error { font-size: 13px; margin: 12px 0 0; color: var(--color-accent-800); }
.tool-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.tool-out-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
.tool-out {
  margin: 6px 0 0;
  padding: 12px;
  border: 1px solid var(--color-divider);
  background: var(--color-surface);
  font-size: 12.5px;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.tool-ip {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.tool-ip-value {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: 0.02em;
}
/* Pares clave/valor: la clave se dimensiona sola, el valor toma el resto. */
.kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 24px;
  margin-top: 16px;
  font-size: 14px;
  line-height: 22px;
}
.kv dt {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  line-height: 22px;
}
.kv dd { margin: 0; word-break: break-word; }
.kv-mono { font-size: 13px; }
.kv-mono dt { line-height: 20px; }
.kv-mono dd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  line-height: 20px;
  word-break: break-all;
}
@media (max-width: 520px) {
  .kv { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .kv dd { margin-bottom: 10px; }
}

/* — pie ────────────────────────────────────────────────────────────────── */

.site-footer {
  padding: 32px 0 48px;
  border-top: 1px solid var(--color-divider);
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.site-footer-links {
  display: flex;
  gap: 16px;
  margin-left: auto;
}

/* — 404 ────────────────────────────────────────────────────────────────── */

.notfound { padding: clamp(64px, 14vh, 140px) 0; }
.notfound-code {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(72px, 14vw, 160px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color-accent-700);
  margin: 0;
}