/* Aldair Eduardo Ortiz Nuñez — hoja de estilo
   Una sola familia (Hanken Grotesk), dos tintas (el azul y el crema de la hoja de vida)
   y jerarquía solo por tamaño y peso. Modo claro siempre. */

:root {
  --ink: #0C0CE3;      /* azul de la hoja de vida, 8,7:1 sobre el crema */
  --paper: #FFF0E9;    /* crema de la hoja de vida */
  --muted: #3E3EB4;    /* texto secundario, 7,4:1 */
  --line: #CFC3E8;     /* filetes finos, decorativos */
  --ease: cubic-bezier(.2, .75, .15, 1);
  --fb: 12px;          /* grosor del marco */
  --fb-top: 44px;      /* banda superior del marco */
  --r: 26px;           /* radio interior del marco */
  --gutter: clamp(20px, 5vw, 72px);
  --rail: 15.5rem;
  --gap: 2.75rem;
  --measure: 42rem;
  color-scheme: only light;
}
@media (max-width: 640px) {
  :root { --fb: 7px; --fb-top: 38px; --r: 18px; --gutter: 16px; }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--fb-top) + 32px);
  scrollbar-color: #8A8AF2 var(--ink);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  padding: var(--fb-top) calc(var(--fb) + var(--gutter)) calc(var(--fb) + 28px);
  background: var(--paper);
  color: var(--ink);
  font-family: "Hanken Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--ink); color: var(--paper); }

h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-weight: 700; line-height: 1.15; text-wrap: balance; }
p, li, dd { text-wrap: pretty; }

a {
  color: inherit;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size .45s var(--ease);
}
a:hover { background-size: 100% 2px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 3px; }

/* ── Marco: el borde de la hoja de vida, fijo alrededor de la ventana ── */
.marco {
  position: fixed;
  inset: var(--fb-top) var(--fb) var(--fb) var(--fb);
  border-radius: var(--r);
  box-shadow: 0 0 0 100vmax var(--ink);
  pointer-events: none;
  z-index: 40;
}
.marco::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--line);
  border-radius: calc(var(--r) - 6px);
}

.cabecera {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--fb-top);
  z-index: 41;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 calc(var(--fb) + 16px);
  color: var(--paper);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1;
}
.cabecera a { background: none; white-space: nowrap; }
.cabecera a:focus-visible { outline-color: var(--paper); }
.rh-sec { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; opacity: .9; }
.rh-sec.cambio { animation: rh .6s var(--ease); }
.rh-corto { display: none; }
@media (max-width: 640px) {
  .cabecera { font-size: .625rem; letter-spacing: .12em; gap: 12px; }
  .rh-largo { display: none; }
  .rh-corto { display: inline; }
  .lugar { font-size: .6875rem; letter-spacing: .14em; }
}

.progreso {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 42;
  background: var(--paper);
  transform: scaleX(0);
  transform-origin: left;
}

.saltar {
  position: fixed;
  z-index: 60;
  top: 6px;
  left: calc(var(--fb) + 10px);
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: .8125rem;
  font-weight: 600;
  transform: translateY(-170%);
  transition: transform .25s var(--ease);
}
.saltar:focus { transform: none; }

/* ── Rótulos pequeños (una sola voz para todas las etiquetas) ── */
.rotulo, .lugar, .cap-n {
  display: block;
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

/* ── Portada ── */
.portada { text-align: center; padding: clamp(64px, 14vh, 150px) 0 clamp(52px, 9vh, 104px); }
.portada h1 {
  margin-top: 26px;
  font-size: clamp(2.25rem, .83rem + 6.3vw, 6.5rem);
  line-height: .95;
  letter-spacing: -.035em;
}
.ln { display: block; overflow: hidden; padding: .02em 0 .1em; }
.ln > span { display: block; }
.lema {
  margin-top: 24px;
  font-size: clamp(1.1rem, .95rem + .8vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -.012em;
  text-wrap: balance;
}
.garabato { display: block; width: clamp(180px, 20vw, 250px); height: auto; margin: 10px auto 0; overflow: visible; }
.garabato path { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.ejes { display: flex; justify-content: center; max-width: 54rem; margin: 30px auto 0; }
.ejes li { flex: 1 1 0; padding: 2px 22px; border-left: 1px solid var(--line); text-align: center; }
.ejes li:first-child { border-left: 0; }
.ejes strong { display: block; font-size: .75rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; line-height: 1.5; text-wrap: balance; }
.ejes span { display: block; margin-top: 7px; font-size: .875rem; line-height: 1.45; color: var(--muted); text-wrap: balance; }
@media (max-width: 640px) {
  .ejes { flex-direction: column; gap: 16px; }
  .ejes li { padding: 0; border-left: 0; }
}
.titular { max-width: 44rem; margin: 30px auto 0; font-size: .9375rem; line-height: 1.6; color: var(--muted); text-wrap: balance; }

/* ── Índice ── */
.indice { max-width: 48rem; margin: 0 auto; padding-bottom: clamp(64px, 11vh, 128px); }
.indice .rotulo { margin-bottom: 20px; }
.indice ol { border-top: 1px solid var(--ink); }
.indice li { border-bottom: 1px solid var(--line); }
.indice li:last-child { border-bottom-color: var(--ink); }
.indice a { display: flex; align-items: baseline; gap: 16px; padding: 14px 2px; background: none; }
.indice .n { flex: none; width: 1.75rem; font-size: .75rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--muted); transition: transform .45s var(--ease); }
.indice .t { font-size: 1.125rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.indice .puntos { flex: 1 1 2rem; min-width: 1.5rem; border-bottom: 2px dotted var(--line); transform-origin: left; transition: border-color .35s var(--ease); }
.indice .d { flex: none; font-size: .875rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.indice a:hover .n, .indice a:focus-visible .n { transform: translateX(5px); }
.indice a:hover .puntos, .indice a:focus-visible .puntos { border-bottom-color: var(--ink); }
@media (max-width: 640px) {
  .indice a { flex-wrap: wrap; column-gap: 12px; row-gap: 2px; }
  .indice .puntos { display: none; }
  .indice .t { flex: 1; font-size: 1.0625rem; }
  .indice .d { width: 100%; padding-left: calc(1.75rem + 12px); }
}

/* ── Capítulos ── */
.capitulo { padding: clamp(72px, 12vh, 140px) 0; border-top: 1px solid var(--line); }
.cap-cab { max-width: 56rem; margin: 0 auto clamp(40px, 7vh, 72px); text-align: center; }
.cap-cab h2 {
  margin-top: 16px;
  font-size: clamp(2.1rem, 1.15rem + 3.8vw, 4.1rem);
  line-height: 1;
  letter-spacing: -.035em;
}
.cap-fechas {
  margin-top: 16px;
  font-size: clamp(1.4rem, 1rem + 1.7vw, 2.4rem);
  font-weight: 200;
  line-height: 1.1;
  letter-spacing: -.015em;
  font-variant-numeric: lining-nums tabular-nums;
}
.cap-rol { margin-top: 12px; font-size: .9375rem; color: var(--muted); text-wrap: balance; }
.cap-web { margin-top: 4px; font-size: .9375rem; }

.lede {
  max-width: 42rem;
  margin: 0 auto clamp(40px, 7vh, 68px);
  text-align: center;
  font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem);
  line-height: 1.55;
  font-weight: 300;
  letter-spacing: -.005em;
  text-wrap: balance;
}
.cita {
  max-width: 22ch;
  margin: 0 auto clamp(28px, 5vh, 44px);
  text-align: center;
  font-size: clamp(1.7rem, 1rem + 2.8vw, 3.1rem);
  line-height: 1.12;
  font-weight: 200;
  letter-spacing: -.025em;
  text-wrap: balance;
}

/* Bloques: el rótulo en el margen, el texto a la derecha */
.bloques { max-width: calc(var(--rail) + var(--gap) + var(--measure)); margin-inline: auto; }
.bloque { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); column-gap: var(--gap); padding: 28px 0; border-top: 1px solid var(--line); }
.bloque:first-child { border-top-color: var(--ink); }
.bloque:last-child { border-bottom: 1px solid var(--line); }
.bloque h3 { font-size: 1.0625rem; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; }
.txt { max-width: var(--measure); font-size: 1rem; }
.guion > li { position: relative; padding-left: 1.25em; }
.guion > li + li { margin-top: .7em; }
.guion > li::before { content: "–"; position: absolute; left: 0; top: 0; color: var(--muted); }
@media (max-width: 960px) {
  .bloque { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
}

/* ── Perfil ── */
.entrada { max-width: var(--measure); margin: 0 auto; }
.entrada .rotulo { margin-bottom: 18px; }
.entrada p { font-size: 1.0625rem; line-height: 1.75; text-align: justify; -webkit-hyphens: auto; hyphens: auto; }
.entrada p::first-letter { float: left; font-size: 4.3em; line-height: .8; font-weight: 700; margin: .07em .08em -.05em 0; }
@media (max-width: 640px) { .entrada p { text-align: left; } }

/* Campos de trabajo: tres columnas, una por eje */
.campos { max-width: 72rem; margin: clamp(56px, 9vh, 96px) auto 0; }
.campos .rotulo { margin-bottom: 22px; }
.campos-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.campo { padding: 26px 30px 6px; border-left: 1px solid var(--line); }
.campo:first-child { border-left: 0; padding-left: 0; }
.campo:last-child { padding-right: 0; }
.campo h4 { margin-bottom: 8px; font-size: clamp(1.5rem, 1rem + 1.25vw, 2.1rem); font-weight: 200; line-height: 1.08; letter-spacing: -.025em; text-wrap: balance; }
.campo .apellido { margin-bottom: 18px; font-size: .9375rem; line-height: 1.45; color: var(--muted); }
.campo li { padding: 11px 0; border-top: 1px solid var(--line); font-size: .9375rem; line-height: 1.45; }
@media (min-width: 901px) {
  /* Alinea las reglas de las tres columnas aunque un título ocupe una sola línea */
  .campo h4 { min-height: 2.16em; }
  .campo .apellido { min-height: 2.9em; }
}
@media (max-width: 900px) {
  .campos-grid { grid-template-columns: minmax(0, 1fr); }
  .campo { padding: 26px 0 8px; border-left: 0; border-top: 1px solid var(--line); }
  .campo:first-child { border-top: 0; }
}

/* ── Proyectos: texto y, al margen, sus reconocimientos ── */
.proyectos { max-width: 68rem; margin: 0 auto; }
.proyecto { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; column-gap: 3.5rem; padding: 36px 0; border-top: 1px solid var(--line); }
.proyecto:first-child { border-top-color: var(--ink); }
.proyecto:last-child { border-bottom: 1px solid var(--line); }
.proyecto h3 { font-size: clamp(1.45rem, 1.1rem + 1.1vw, 2rem); line-height: 1.12; letter-spacing: -.025em; }
.proyecto .rol { margin-top: 10px; font-size: .9375rem; color: var(--muted); }
.cuerpo p + p { margin-top: 14px; }
.cuerpo .rol + p { margin-top: 18px; }
.nota { align-self: start; border-left: 2px solid var(--ink); padding: 2px 0 2px 18px; font-size: .9375rem; line-height: 1.55; }
.nota h4 { font-size: .6875rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.nota li + li { margin-top: 12px; }
@media (max-width: 960px) {
  .proyecto { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
}

/* ── Créditos musicales, como en la contraportada de un disco ── */
.creditos { max-width: 46rem; margin: 0 auto; }
.tema { padding: 36px 0; border-top: 1px solid var(--line); text-align: center; }
.tema:first-child { border-top-color: var(--ink); }
.tema:last-child { border-bottom: 1px solid var(--line); }
.tema h3 { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); font-weight: 200; letter-spacing: -.03em; line-height: 1.08; }
.sello { margin-top: 10px; font-size: .875rem; color: var(--muted); text-wrap: balance; }
.credito-lista { max-width: 40rem; margin: 22px auto 0; text-align: left; }
.credito { display: flex; align-items: baseline; gap: 12px; }
.credito + .credito { margin-top: 8px; }
.credito dt { flex: 1 1 auto; display: flex; align-items: baseline; gap: 12px; font-weight: 600; }
.credito dt::after { content: ""; flex: 1 1 1.5rem; min-width: 1.5rem; border-bottom: 2px dotted var(--line); }
.credito dd { flex: none; }
.aviso { margin-top: 14px; font-size: .8125rem; color: var(--muted); }
.enlace { margin-top: 16px; font-size: .9375rem; }
@media (max-width: 640px) {
  .credito-lista { text-align: center; }
  .credito { flex-direction: column; align-items: center; gap: 0; }
  .credito dt { justify-content: center; }
  .credito dt::after { display: none; }
  .credito + .credito { margin-top: 12px; }
}

/* ── Formación e idiomas ── */
.dos { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: 4rem; max-width: 64rem; margin: 0 auto; }
.dos .rotulo { text-align: left; margin-bottom: 16px; }
.educacion li { padding: 16px 0; border-top: 1px solid var(--line); }
.educacion li:first-child, .idiomas li:first-child { border-top-color: var(--ink); }
.educacion li:last-child, .idiomas li:last-child { border-bottom: 1px solid var(--line); }
.educacion strong { display: block; font-size: 1.0625rem; letter-spacing: -.01em; line-height: 1.35; }
.educacion span { display: block; margin-top: 4px; font-size: .9375rem; color: var(--muted); }
.idiomas li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.lengua { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.8rem); font-weight: 200; letter-spacing: -.02em; line-height: 1.1; }
.nivel { font-size: .875rem; color: var(--muted); }
@media (max-width: 860px) {
  .dos { grid-template-columns: minmax(0, 1fr); row-gap: 56px; }
}

/* ── Contacto ── */
.contacto-cuerpo { text-align: center; }
.contacto-cuerpo .rotulo { margin-bottom: 2px; }
.correo {
  display: inline-block;
  margin-top: 12px;
  font-size: clamp(1.45rem, .9rem + 2.8vw, 3rem);
  font-weight: 200;
  line-height: 1.2;
  letter-spacing: -.03em;
  overflow-wrap: anywhere;
}
.redes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 36px; margin-top: 30px; }
.redes li { display: flex; align-items: baseline; gap: 10px; }
.redes li > span { font-size: .6875rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.firma { margin-top: clamp(56px, 9vh, 96px); }
.firma .garabato { width: 170px; }
.firma p { margin-top: 6px; font-weight: 600; letter-spacing: -.01em; }

/* ── Ficha y colofón ── */
.pie { border-top: 1px solid var(--ink); padding: clamp(56px, 9vh, 88px) 0 8px; }
.pie > .rotulo { margin-bottom: 22px; }
.ficha { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 2.5rem; max-width: 64rem; margin: 0 auto; }
.ficha div { padding: 12px 0 14px; border-top: 1px solid var(--line); }
.ficha dt { font-size: .6875rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.ficha dd { margin-top: 4px; font-size: .9375rem; line-height: 1.5; overflow-wrap: anywhere; }
@media (max-width: 860px) { .ficha { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ficha { grid-template-columns: minmax(0, 1fr); } }
.colofon { max-width: 38rem; margin: clamp(48px, 8vh, 72px) auto 0; text-align: center; font-size: .8125rem; line-height: 1.6; color: var(--muted); }

/* ── Movimiento: solo si el sistema no pide menos ── */
@media (prefers-reduced-motion: no-preference) {
  /* Entrada de la portada */
  .ln > span { animation: subir 1.15s var(--ease) both; }
  .ln + .ln > span { animation-delay: .09s; }
  .lugar { animation: aparecer 1s var(--ease) .1s both; }
  .lema { animation: aparecer 1s var(--ease) .5s both; }
  .portada .garabato path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: trazo 1.6s var(--ease) .75s forwards; }
  .titular { animation: aparecer 1s var(--ease) 1s both; }
  .ejes { animation: aparecer 1s var(--ease) 1.15s both; }
  .indice .rotulo { animation: aparecer .9s var(--ease) 1.05s both; }
  .indice li { animation: aparecer .9s var(--ease) var(--d, 1.1s) both; }
  .indice .puntos { animation: trazar 1.2s var(--ease) calc(var(--d, 1.1s) + .2s) both; }
  .indice li:nth-child(1)  { --d: 1.10s; }
  .indice li:nth-child(2)  { --d: 1.16s; }
  .indice li:nth-child(3)  { --d: 1.22s; }
  .indice li:nth-child(4)  { --d: 1.28s; }
  .indice li:nth-child(5)  { --d: 1.34s; }
  .indice li:nth-child(6)  { --d: 1.40s; }
  .indice li:nth-child(7)  { --d: 1.46s; }
  .indice li:nth-child(8)  { --d: 1.52s; }
  .indice li:nth-child(9)  { --d: 1.58s; }
  .indice li:nth-child(10) { --d: 1.64s; }

  /* Revelado al llegar (lo activa el script; sin script, todo queda visible) */
  .js .rv { opacity: 0; transform: translateY(22px); transition: opacity 1s var(--ease), transform 1.15s var(--ease); }
  .js .rv.visto { opacity: 1; transform: none; }
  .js .cap-cab h2.rv { filter: blur(10px); transition: opacity 1s var(--ease), transform 1.2s var(--ease), filter 1.2s var(--ease); }
  .js .cap-cab h2.rv.visto { filter: none; }
  .js .firma .garabato path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--ease) .35s; }
  .js .firma.visto .garabato path { stroke-dashoffset: 0; }

  /* Progreso de lectura en el borde superior del marco */
  @supports (animation-timeline: scroll()) {
    .progreso { animation: progreso linear both; animation-timeline: scroll(root); }
  }
}

@keyframes subir { from { transform: translateY(108%); } to { transform: none; } }
@keyframes aparecer { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes trazo { to { stroke-dashoffset: 0; } }
@keyframes trazar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes progreso { to { transform: scaleX(1); } }
@keyframes rh { from { opacity: 0; transform: translateY(6px); } to { opacity: .9; transform: none; } }

/* ── Impresión: sale como una hoja de vida limpia ── */
@media print {
  .marco, .cabecera, .progreso, .saltar, .indice { display: none !important; }
  body { padding: 0; font-size: 10.5pt; }
  .portada { padding: 0 0 18pt; }
  .capitulo { padding: 20pt 0; }
  .bloque, .proyecto, .tema, .campo { break-inside: avoid; }
  .rv { opacity: 1 !important; transform: none !important; filter: none !important; }
  a { background: none; text-decoration: underline; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}