/* ==========================================================================
   Trayectoria · p. 6
   Doce capítulos + seis hilos (≥1024: panel fijo a la izquierda · <1024: riel)
   ========================================================================== */

/* HILOS · trazos compartidos (leyenda, panel, cruce) ----------------------- */
.hilo-mu { width: 48px; height: 8px; overflow: visible; flex: none; }
.h-empresa, .h-tecnologia, .h-escritura, .h-humano, .h-kabbalah-a, .h-kabbalah-b, .h-musica { fill: none; }
.h-empresa    { stroke: var(--c-fuerte); stroke-width: 2; }
.h-tecnologia { stroke: var(--c-fuerte); stroke-width: 1.5; stroke-dasharray: 6 4; }
.h-escritura  { stroke: var(--c-sec); stroke-width: 1.5; stroke-dasharray: 9 3 1.5 3; }
.h-humano     { stroke: var(--c-sec); stroke-width: 2.2; stroke-dasharray: 0 5; stroke-linecap: round; }
.h-kabbalah-a { stroke: var(--c-acento); stroke-width: 4.6; }
.h-kabbalah-b { stroke: var(--c-fondo); stroke-width: 1.8; }
.h-musica     { stroke: var(--c-acento-texto); stroke-width: .9; }

/* PORTADILLA ----------------------------------------------------------------- */
.tr-portadilla__h { max-width: 12ch; }
.tr-intro .par__texto p { font-size: clamp(1.1875rem, 1.35vw, 1.3rem); }
.tr-leyenda-wrap { row-gap: 16px; align-items: start; }
.tr-leyenda {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--gutter);
  border-top: 1px solid var(--c-fuerte);
}
.tr-leyenda li {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; align-items: center;
  padding: 12px 0 11px; border-bottom: 1px solid var(--c-linea);
}
.tr-leyenda li .hilo-mu { grid-row: 1 / 3; }
.tr-leyenda__trazo { font-size: .625rem; line-height: 1.3; }
.tr-leyenda__prisa { margin-top: 4px; }
@media (min-width: 1024px) { .tr-leyenda__cab { padding-top: 14px; } }
@media (max-width: 1023px) { .tr-leyenda { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .tr-leyenda { grid-template-columns: 1fr; } }

/* CUERPO + PANEL / RIEL --------------------------------------------------- */
.tr { overflow-x: clip; }
.tr .filete { margin-bottom: clamp(48px, 6vw, 96px); }
.tr__cuerpo { position: relative; }
.tr__hilos { color: var(--c-texto); }
@media (min-width: 1024px) {
  .tr__cuerpo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .tr__hilos {
    grid-column: 1 / 4; grid-row: 1; position: sticky; top: calc(var(--cabecera) + 20px); z-index: 2;
    height: min(calc(100vh - var(--cabecera) - 40px), 900px);
  }
  .tr__caps { grid-column: 4 / 13; grid-row: 1; }
}
@media (max-width: 1023px) {
  .tr__cuerpo { padding-left: 54px; }
  .tr__hilos { position: absolute; left: 0; top: 0; bottom: 0; width: 42px; }
}
@media (max-width: 767px) {
  .tr__cuerpo { padding-left: 50px; }
  .tr__hilos { width: 38px; }
}
.hilos__svg--riel .h-empresa { stroke-width: 1.5; }
.hilos__svg--riel .h-tecnologia { stroke-dasharray: 4 3; }
.hilos__svg--riel .h-escritura { stroke-width: 1.2; stroke-dasharray: 6 2 1 2; }
.hilos__svg--riel .h-humano { stroke-width: 1.8; stroke-dasharray: 0 4; }
.hilos__svg--riel .h-kabbalah-a { stroke-width: 3.4; }
.hilos__svg--riel .h-kabbalah-b { stroke-width: 1.1; }
html:not(.js) .tr__hilos { display: none; }
html:not(.js) .tr__cuerpo { padding-left: 0; }
@media (min-width: 1024px) { html:not(.js) .tr__caps { grid-column: 1 / -1; } }

.hilos__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hilos__svg--fundido { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 70px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 70px), transparent); }
.hilos__base path { stroke: var(--regla); }
.hilos__base .h-kabbalah-b { stroke: var(--c-fondo); }
.hilos__latente { fill: none; stroke: var(--c-sec); stroke-width: .8; stroke-dasharray: 1 3; }
.hilos__base .hilos__latente { stroke: var(--regla); }
.hilos__puente { stroke: var(--regla); stroke-width: 1; transition: stroke .35s; }
.hilos__puente.is-luz { stroke: var(--c-fuerte); }
.hilos__nodo { fill: var(--c-fondo); stroke: var(--grafito); stroke-opacity: .45; stroke-width: 1; transition: fill .35s, stroke .35s, stroke-opacity .35s; }
.hilos__nodo.is-luz { fill: var(--c-fuerte); stroke: var(--c-fuerte); stroke-opacity: 1; }
.hilos__nodo--kabbalah.is-luz, .hilos__nodo--cruce.is-luz { fill: var(--c-acento); stroke: var(--c-acento); }
.hilos__nodo--musica.is-luz { fill: var(--c-acento-texto); stroke: var(--c-acento-texto); }
.hilos__nodo--abierto.is-luz { fill: var(--c-fondo); stroke: var(--c-fuerte); }
.hilos__nodo.is-aqui { stroke: var(--senal); stroke-opacity: 1; stroke-width: 2; }
.hilos__cursor { transition: opacity .3s; }
.hilos__cursor line { stroke: var(--senal); stroke-width: 1; }
.hilos__cursor circle { fill: var(--senal); }
.hilos__cursor .hilos__pulso { fill: none; stroke: var(--senal); stroke-width: 1; transform-box: fill-box; transform-origin: center; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .hilos__cursor .hilos__pulso { animation: hilos-pulso 2.4s var(--ease) infinite; }
}
@keyframes hilos-pulso { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }
.hilos__etq { font-family: var(--f-mono); font-size: 9.5px; font-stretch: 87.5%; letter-spacing: .08em; fill: var(--c-sec); transition: fill .35s; }
.hilos__etq.is-luz { fill: var(--c-texto); }
.hilos__saltos { position: absolute; left: 0; top: 0; bottom: 0; width: 64px; }
.hilos__saltos a {
  position: absolute; left: 0; transform: translateY(-50%); white-space: nowrap;
  font-family: var(--f-mono); font-size: .625rem; font-stretch: 87.5%; letter-spacing: .04em; text-transform: uppercase;
  color: var(--c-sec); text-decoration: none; padding: 3px 4px 3px 0; line-height: 1; transition: color .2s;
}
.hilos__saltos a:hover { color: var(--c-acento-texto); }
.hilos__saltos a.is-aqui { color: var(--c-texto); font-weight: 600; }
.hilos__pie { position: absolute; left: 0; bottom: 0; color: var(--c-sec); font-size: .625rem; }

/* CAPÍTULOS ---------------------------------------------------------------- */
.cap { position: relative; isolation: isolate; }
.cap + .cap { margin-top: clamp(96px, 11vw, 176px); }
.cap--vino + .cap--vino { margin-top: 0; }
.cap--vino { padding-block: clamp(44px, 5.5vw, 88px); padding-inline-start: clamp(20px, 3vw, 48px); }
.cap--vino::before { content: ""; position: absolute; inset: 0 -100vw 0 0; background: var(--vino); z-index: -1; }
.cap--vino + .cap:not(.cap--vino), .cap:not(.cap--vino) + .cap--vino { margin-top: clamp(72px, 9vw, 144px); }

.cap__cab {
  display: flex; justify-content: space-between; align-items: baseline; gap: 6px 20px; flex-wrap: wrap;
  border-top: 1px solid var(--c-fuerte); padding-top: 11px; margin-bottom: clamp(20px, 3vw, 40px);
}
.cap__num { transition: color .3s; }
.cap.is-activa .cap__num { color: var(--c-acento-texto); }
.cap__num::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 10px; background: var(--c-linea); transform: translateY(-1px); transition: background .3s; }
.cap.is-activa .cap__num::before { background: var(--senal); }
.cap__hilos { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px 16px; color: var(--c-sec); }
.cap__hilo { display: inline-flex; align-items: center; gap: 8px; }
.cap__hilo::before { content: ""; display: inline-block; width: 22px; height: 2px; background: var(--c-sec); opacity: .5; }
.cap__hilo--empresa::before    { height: 2px; background: var(--c-fuerte); opacity: 1; }
.cap__hilo--tecnologia::before { height: 1.5px; background: repeating-linear-gradient(90deg, var(--c-fuerte) 0 5px, transparent 5px 8px); opacity: 1; }
.cap__hilo--escritura::before  { height: 1.5px; background: repeating-linear-gradient(90deg, var(--c-sec) 0 7px, transparent 7px 9px, var(--c-sec) 9px 10px, transparent 10px 12px); opacity: 1; }
.cap__hilo--humano::before     { height: 4px; background: radial-gradient(circle, var(--c-sec) 1.1px, transparent 1.4px) 0 50% / 5px 4px repeat-x; opacity: 1; }
.cap__hilo--kabbalah::before   { height: 5px; background: none; border-block: 1.5px solid var(--c-acento); opacity: 1; }
.cap__hilo--musica::before     { height: 1px; background: var(--c-acento-texto); opacity: 1; }
.cap__cruz { font-family: var(--f-texto); font-size: 1.25rem; line-height: 1; color: var(--c-acento); text-transform: none; }

.cap__año {
  font-family: var(--f-display); font-size: clamp(4.5rem, 10.5vw, 10.5rem); line-height: .8; letter-spacing: -0.045em;
  font-variant-numeric: lining-nums; white-space: nowrap;
}
.cap__año-pre { display: block; line-height: 1.5; margin-bottom: 1.1em; color: var(--c-sec); letter-spacing: .06em; white-space: normal; }
.cap__año--sin { color: var(--c-sec); letter-spacing: -0.02em; }
.cap__año--abierto { color: var(--c-acento); }
.cap__h { font-size: var(--t-h2); margin-top: clamp(14px, 1.8vw, 26px); max-width: 17ch; }
.cap__texto { margin-top: clamp(20px, 2.4vw, 32px); max-width: none; }
.cap__texto > p { max-width: 58ch; }
.cap__texto .voz { font-size: 1.3rem; line-height: 1.35; }
.cap__lateral { margin-top: clamp(20px, 2.4vw, 32px); }
.cap__ficha { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; border-top: 1px solid var(--c-linea); padding-top: 10px; }
.cap__ficha .enlace-mono { text-transform: none; font-family: var(--f-texto); font-style: italic; font-size: 1.0625rem; letter-spacing: 0; line-height: 1.3; }
.cap__dato { color: var(--c-sec); }
.cap__enlaces { margin-top: 28px; }
.cap__dato-v { color: var(--c-texto); text-transform: none; letter-spacing: .02em; }
.cap__dato-v .enlace-mono { font-family: var(--f-mono); font-style: normal; font-size: inherit; letter-spacing: .04em; }

/* 05 · 10·10·2010 · la fecha que rima: Gloock enorme en dos líneas; los tres «10» se encienden */
.cap__año--fecha { white-space: normal; }
.cap__año--fecha time { display: flex; flex-direction: column; }
.cap__f1, .cap__f2 { display: block; white-space: nowrap; }
.cap__sep { display: inline-block; color: var(--c-sec); font-size: .42em; vertical-align: .62em; margin-inline: .06em; }
.cap__siglo { color: var(--c-texto); }
.cap__diez { color: var(--c-acento); }
html.js .cap__año--fecha[data-revela] .cap__diez { color: var(--c-texto); transition: color .7s var(--ease) calc(.6s + var(--k) * .4s); }
html.js .cap__año--fecha[data-revela].is-in .cap__diez { color: var(--c-acento); }

/* 10 · 2M = Martín y María */
.cap__dosm { display: flex; align-items: center; gap: .08em; font-family: var(--f-display); font-size: clamp(5rem, 9vw, 9rem); line-height: .8; letter-spacing: -0.03em; }
.cap__dosm-2 { color: var(--c-acento); }
.cap__dosm-ms { display: flex; flex-direction: column; gap: .08em; font-size: .46em; line-height: .9; }
.cap__dosm-m small { font-family: var(--f-texto); font-style: italic; font-weight: 400; font-size: .5em; letter-spacing: 0; color: var(--c-acento-texto); margin-left: .02em; }

.cap__discos { margin-top: 1.4em; border-top: 1px solid var(--c-fuerte); max-width: 46ch; }
.cap__discos .ledger__fila { padding-inline: 0; }
.cap__discos cite { font-style: italic; font-family: var(--f-texto); font-size: 1.0625rem; letter-spacing: 0; }

.cap__foto { max-width: 420px; }
.cap__foto .duo { aspect-ratio: 4 / 3; }
.cap__foto img { object-position: 45% 30%; }

.cap__cifras { display: flex; gap: clamp(24px, 3vw, 48px); margin-top: 20px; }
.cap__cifras dd { font-size: clamp(3.5rem, 6vw, 6.25rem); margin-top: 6px; }
.cap__cifras dt { border-top: 1px solid var(--c-fuerte); padding-top: 8px; }

.cap__portada { max-width: 240px; }
.cap__portada img { width: 100%; outline: 1px solid var(--c-linea); outline-offset: 0; }

.cap__diploma img { width: 100%; border: 8px solid var(--hueso); }
.cap__diploma .leyenda { margin-top: 12px; }
.cap__fecha { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; border-top: 1px solid var(--c-linea); padding-top: 14px; margin-top: 1.4em !important; }
.cap__fecha-he { font-size: clamp(1.9rem, 2.6vw, 2.5rem); line-height: 1.1; color: var(--c-acento-texto); }

.cap__kabbapp { display: grid; grid-template-columns: auto 1fr; column-gap: 20px; align-items: end; }
.cap__cruce-svg { grid-row: 1 / 3; width: 84px; height: auto; overflow: visible; }
@media (min-width: 1024px) {
  .cap__kabbapp { grid-template-columns: 1fr; border-top: 1px solid var(--c-linea); padding-top: 18px; }
  .cap__cruce-svg { grid-row: auto; width: 64px; margin-bottom: 18px; }
  .cap__kabbapp-n { font-size: clamp(3rem, 4.6vw, 4.6rem); }
}
.cap__cruce-nodo { fill: var(--c-acento); }
.cap__kabbapp-n { font-size: clamp(3.25rem, 5.4vw, 5.5rem); color: var(--hueso); }
.cap__kabbapp-etq { color: var(--c-sec); margin-top: 10px; }

.cap__cierre { font-family: var(--f-texto); font-style: italic; font-weight: 400; font-size: clamp(1.7rem, 3vw, 2.75rem); line-height: 1.2; color: var(--c-acento-texto); max-width: 24ch !important; }
.cap--siguiente .nota { margin-top: 24px; }

.cap--discreto .cap__año { font-size: clamp(3.25rem, 6vw, 5.5rem); }
.cap--discreto .cap__h { font-size: var(--t-h3); }

@media (min-width: 1024px) {
  .cap__rejilla { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .cap__rejilla > * { grid-column: 1 / 7; min-width: 0; }
  .cap__año { grid-row: 1; }
  .cap__h { grid-row: 2; }
  .cap__texto { grid-row: 3; position: relative; }
  .cap__enlaces { grid-row: 4; }
  .cap__lateral { grid-column: 7 / 10; grid-row: 3; }
  .cap__foto, .cap__portada, .cap__diploma, .cap__kabbapp, .cap__cifras, .cap__dosm { grid-column: 7 / 10; grid-row: 1 / 3; align-self: end; }
  /* notas al margen derecho, a la altura de su marca (trayectoria.js fija --nota-top) */
  .cap__texto > .nota {
    position: absolute; left: calc(100% + var(--gutter)); top: var(--nota-top, auto);
    width: calc((100% - 5 * var(--gutter)) / 2 + 2 * var(--gutter)); margin: 0;
  }
  .cap__cifras { align-self: end; margin-top: 0; }
  .cap--libro .cap__portada { grid-row: 1 / 4; align-self: start; justify-self: end; width: 100%; }
  .cap--libro-b .cap__portada { grid-column: 1 / 4; justify-self: start; }
  .cap--libro-b .cap__año, .cap--libro-b .cap__h, .cap--libro-b .cap__texto { grid-column: 4 / 10; }
  .cap--maestria .cap__año, .cap--maestria .cap__h { grid-column: 1 / 6; }
  .cap--maestria .cap__diploma { grid-column: 6 / 10; grid-row: 1 / 3; align-self: center; transform: rotate(1.5deg); }
  .cap--maestria .cap__texto { grid-column: 1 / 7; }
  .cap--cruce .cap__kabbapp { grid-row: 1 / 3; }
  .cap--siguiente .cap__texto { grid-column: 1 / 9; }
  .cap--despertar .cap__lateral { grid-row: 1 / 3; align-self: end; }
  .cap--siguiente .cap__texto > .nota { position: static; width: auto; max-width: 40ch; }
  .cap--musica .cap__foto { align-self: end; }
}
@media (max-width: 1023px) {
  .cap__rejilla { display: flex; flex-direction: column; align-items: flex-start; }
  .cap__rejilla > * { width: 100%; }
  .cap__año { font-size: clamp(4rem, 17vw, 7.5rem); }
  .cap__foto, .cap__portada, .cap__diploma, .cap__kabbapp, .cap__cifras, .cap__dosm { margin-top: 28px; }
  .cap__foto { max-width: 420px; }
  .cap__portada { max-width: 200px; }
  .cap__diploma { max-width: 460px; }
  .cap--libro-b .cap__portada { order: 4; }
  .cap__enlaces { order: 9; }
}
@media (max-width: 767px) {
  .cap__cab { flex-direction: column; gap: 6px; }
  .cap__hilos { justify-content: flex-start; }
  .cap__h { font-size: clamp(2rem, 9vw, 2.6rem); }
  .cap--vino { padding-inline-start: 16px; }
  .cap__año { font-size: clamp(3.75rem, 21vw, 6rem); }
  .cap__año-pre { margin-bottom: .6em; }
  .cap__kabbapp { column-gap: 14px; }
  .cap__cruce-svg { width: 64px; }
}

/* CV PARA PRISAS -------------------------------------------------------- */
.cv { border-bottom: 1px solid var(--c-linea); }
.cv-sec .filete { margin-bottom: 0; }
.cv-sec { padding-bottom: clamp(56px, 7vw, 104px); }
.cv__sum {
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: clamp(22px, 3vw, 40px) 0; cursor: pointer;
}
.cv__sum::-webkit-details-marker { display: none; }
.cv__sum::marker { content: ""; }
.cv__titulo { font-size: clamp(3rem, 8vw, 8rem); line-height: .9; letter-spacing: -0.035em; transition: color .25s; }
.cv__sum:hover .cv__titulo { color: var(--fucsia-luz); }
.cv__sum:focus-visible { outline-offset: 6px; }
.cv__pista { display: inline-flex; align-items: center; gap: 16px; color: var(--c-sec); white-space: nowrap; }
.cv__cerrar { display: none; }
.cv[open] .cv__abrir { display: none; }
.cv[open] .cv__cerrar { display: inline; }
.cv__signo { position: relative; width: 26px; height: 26px; color: var(--c-texto); }
.cv__signo::before, .cv__signo::after { content: ""; position: absolute; left: 0; top: 50%; width: 26px; height: 1px; background: currentColor; transition: transform .45s var(--ease); }
.cv__signo::after { transform: rotate(90deg); }
.cv[open] .cv__signo::after { transform: rotate(0); }
.cv__in { padding-block: 8px clamp(48px, 6vw, 88px); row-gap: 28px; align-items: start; }
.cv[open] .cv__in { animation: cv-in .55s var(--ease); }
@keyframes cv-in { from { opacity: 0; transform: translateY(-8px); } }
.cv__bloques { display: grid; gap: clamp(32px, 4vw, 52px); }
.cv__cab { color: var(--c-sec); margin-bottom: 10px; font-weight: 400; }
.cv .ledger__fila { grid-template-columns: 12ch minmax(0, 1fr) auto; }
.cv .ledger__d .por-confirmar { font-size: .625rem; }
@media (max-width: 767px) {
  .cv .ledger__fila { grid-template-columns: 1fr auto; }
  .cv__pista .cv__abrir, .cv__pista .cv__cerrar { display: none !important; }
}

.tr-salida { padding-top: clamp(56px, 7vw, 104px) !important; }

.tr-salida .caja { row-gap: 14px; }