/* =========================================================
   proyecto.css · José Fernando Vasco Alzate
   Ruta A «Lo implícito, a la vista». Idea madre: hacer visible lo que el aula naturaliza.
   Motivo: el renglón (la página del cuaderno, el aula como escena) y el subrayado
   (la marca del lector que vuelve visible lo implícito).
   Aquí viven: la firma del subrayado, las variantes de las piezas del catálogo,
   la pieza propia (.jf-constructos), el índice de la plataforma y la galería con huecos.
   Colapso móvil declarado en cada bloque.
   ========================================================= */

/* ---------- Firma: el subrayado del lector ----------
   Solo en la palabra que importa de cada titular. Nunca en texto de lectura. */
.t-titulo em, .t-display em, .jf-declaracion em {
  text-decoration-line: underline;
  text-decoration-thickness: .05em;
  text-underline-offset: .16em;
  text-decoration-color: color-mix(in oklab, var(--acento) 60%, transparent);
  text-decoration-skip-ink: auto;
}
.numeros, .jf-obra__ano, .t-cifra, .p-pista__cifra { font-variant-numeric: lining-nums tabular-nums; }

/* Navegación: la marca en la voz display */
.jf-marca { font-family: var(--f-display); font-size: 1.08rem; letter-spacing: -.005em; line-height: 1; }
.jf-marca em { color: var(--nav-fg, var(--fg)); }

/* =========================================================
   1 · HÉROE · variante propia: el nombre manda sobre la página rayada; el retrato real es una pieza
   del héroe (arriba a la derecha, como la foto de autor de una solapa), tratado en duotono tinta/papel.
   Una barra de acento bajo el retrato repite el subrayado del apellido.
   Celular: retrato pequeño arriba a la izquierda con su leyenda al lado; el texto abajo.
   ========================================================= */
.p-heroe--jf { --retrato-w: clamp(13rem, 21vw, 23rem); }
/* El retrato es una parte del héroe, no su fondo: la foto original es pequeña y se muestra
   a un tamaño en el que conserva la nitidez (≤ 23rem de ancho, fuente de 1100 px). */
.jf-retrato {
  position: absolute; z-index: 1; margin: 0;
  top: calc(var(--nav-h) + clamp(1rem, 5vh, 3.5rem)); right: var(--gutter);
  width: var(--retrato-w); aspect-ratio: 4 / 5;
}
.jf-retrato__marco {
  position: absolute; inset: 0; overflow: hidden; border-radius: var(--r-1); background: #1B1721;
  box-shadow: 0 2px 6px rgba(31, 26, 38, .08), 0 48px 90px -56px rgba(31, 26, 38, .6);
}
.jf-retrato__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transform-origin: 50% 28%; }
.jf-retrato__leyenda { position: absolute; left: 0; right: 0; top: calc(100% + 2.2rem); display: grid; gap: .15rem; font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; line-height: 1.5; color: var(--acento); }
.jf-retrato__leyenda span { display: block; }
.jf-retrato::after {
  content: ""; position: absolute; left: -1.4rem; bottom: -1.1rem; width: 44%; height: max(.3rem, 4px);
  background: var(--acento); transform-origin: 0 50%; transform: scaleX(var(--b, 1));
}
.p-heroe--jf .p-heroe__contenido { inset: auto calc(var(--retrato-w) + var(--gutter) * 2) 0 0; padding-bottom: calc(var(--legal-h) + clamp(2rem, 8vh, 5.5rem)); }
.p-heroe--jf .t-heroe { font-size: calc(clamp(3rem, calc((100vw - var(--retrato-w) - var(--gutter) * 4) / 7.05), 10.5rem) * var(--escala)); max-width: 100%; }
.jf-apellido { position: relative; display: inline-block; color: var(--acento); padding-bottom: .15em; }
.jf-apellido::after {                       /* el subrayado (pseudo-elemento: no altera la medición de líneas) */
  content: ""; position: absolute; left: .02em; right: .04em; bottom: .035em; height: max(.04em, 3px);
  background: var(--acento); transform-origin: 0 50%; transform: scaleX(var(--s, 1));
}
.jf-heroe__pie { flex-direction: column; align-items: flex-start; gap: 1.5rem; width: 100%; }
.jf-heroe__sub { font-size: clamp(1.05rem, 1.3vw, 1.3rem); line-height: 1.45; max-width: 34ch; color: var(--muted); }
.jf-heroe__acciones { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (max-width: 899px) {
  .jf-retrato { top: calc(var(--nav-h) + 1rem); left: var(--gutter); right: auto; width: auto;
    height: clamp(8.5rem, min(34svh, calc(100svh - 29rem)), 19rem); }
  .jf-retrato::after { left: 0; bottom: -.75rem; width: 46%; }
  .jf-retrato__leyenda { left: calc(100% + 1.1rem); right: auto; top: auto; bottom: 0; width: calc(100vw - var(--gutter) * 2 - 100% - 1.1rem); max-width: 12rem; font-size: .72rem; }
  .p-heroe--jf .p-heroe__contenido { inset: auto 0 0 0; padding-bottom: calc(var(--legal-h) + 1.6rem); }
  .p-heroe--jf .t-heroe { font-size: calc(clamp(2.5rem, 12.4vw, 4.4rem) * var(--escala)); }
  .jf-heroe__pie { gap: 1.1rem; }
}
@media (max-width: 420px) {
  .jf-heroe__acciones { width: 100%; }
  .jf-heroe__acciones .boton { flex: 1 1 100%; }
}

/* Barra de lectura: un subrayado que avanza con la página (se activa desde proyecto.js) */
.jf-lectura { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 51; pointer-events: none; display: none; }
.jf-lectura--viva { display: block; }
.jf-lectura__barra { display: block; height: 100%; background: var(--acento); transform-origin: 0 50%; transform: scaleX(0); }

/* =========================================================
   2 · DECLARACIÓN · sobre tinta; la fuente debajo, en nota.
   Celular: igual, una columna.
   ========================================================= */
.jf-declaracion .t-declaracion { max-width: 22em; }
.jf-declaracion em { color: var(--acento); font-style: normal; }
.jf-declaracion__fuente { margin-top: var(--e-6); max-width: 60ch; }

/* =========================================================
   3 · EDITORIAL · la foto real completa y en color (3:2), la tarjeta la invade; debajo, la trayectoria.
   Celular: foto 3:4 recortada sobre él y la tarjeta sube sobre su borde inferior; trayectoria vertical.
   ========================================================= */
.jf-bio { padding-bottom: var(--e-7); }
.jf-bio .p-editorial__rejilla { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.jf-bio .p-editorial__img { aspect-ratio: 3 / 2; }
.jf-bio .p-editorial__img img { height: 116%; object-position: 60% 40%; }
.jf-bio .p-editorial__texto p { max-width: 38ch; font-size: clamp(1.02rem, 1.15vw, 1.15rem); }
.jf-bio .p-editorial__texto .t-titulo { font-size: clamp(2.2rem, 4.2vw, 4.4rem); }
.jf-bio__pie { margin-top: 1rem; }
.jf-trayectoria { margin-top: var(--e-8); }
.jf-trayectoria__lista { --t: 1; position: relative; list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0 clamp(.8rem, 1.4vw, 1.6rem); margin-top: var(--e-5); }
.jf-trayectoria__lista::before, .jf-trayectoria__lista::after { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: var(--linea); }
.jf-trayectoria__lista::after { top: 4.5px; height: 2px; background: var(--acento); transform-origin: 0 50%; transform: scaleX(var(--t)); }
.jf-hito { position: relative; z-index: 1; display: grid; gap: .45rem; align-content: start; padding-top: 1.7rem; }
.jf-hito::before { content: ""; position: absolute; top: 0; left: 0; width: 11px; height: 11px; background: var(--bg); border: 1.5px solid var(--acento); }
.jf-hito--hoy::before { background: var(--acento); }
.jf-hito__ano { font-family: var(--f-display); font-size: clamp(1.15rem, 1.5vw, 1.55rem); line-height: 1.1; color: var(--acento); font-variant-numeric: lining-nums tabular-nums; }
.jf-hito p { font-size: .92rem; line-height: 1.45; color: var(--muted); }
.jf-trayectoria__temas { margin-top: var(--e-7); padding-top: var(--e-4); border-top: 1px solid var(--linea); font-size: .98rem; color: var(--muted); }
.jf-trayectoria__rotulo { font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--acento); margin-right: .9rem; }
@media (max-width: 1099px) {
  .jf-trayectoria__lista { grid-template-columns: 1fr; gap: 1.3rem; padding-left: 1.8rem; }
  .jf-trayectoria__lista::before, .jf-trayectoria__lista::after { left: 5px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .jf-trayectoria__lista::after { left: 4.5px; width: 2px; transform-origin: 50% 0; transform: scaleY(var(--t)); }
  .jf-hito { padding-top: 0; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: baseline; gap: 1rem; }
  .jf-hito::before { left: -1.8rem; top: .45em; }
}
@media (max-width: 520px) {
  .jf-hito { grid-template-columns: 1fr; gap: .25rem; }
}
@media (max-width: 899px) {
  .jf-bio .p-editorial__rejilla { grid-template-columns: 1fr; }
  .jf-bio .p-editorial__img { aspect-ratio: 3 / 4; }
  .jf-bio .p-editorial__img img { object-position: 50% 30%; }
}

/* =========================================================
   4 · LISTA · publicaciones como libro de registro: año · obra · tipo.
   Celular: el año arriba a la izquierda, el tipo debajo de la ficha.
   ========================================================= */
.jf-obras__cabeza { display: grid; gap: 1rem; }
.jf-obra { grid-template-columns: 5.5rem minmax(0, 1fr) minmax(8rem, auto); align-items: start; gap: .6rem 2rem; }
.jf-obra__ano { font-family: var(--f-display); font-size: 1.15rem; line-height: 1.5; color: var(--acento); }
.jf-obra__cuerpo { display: grid; gap: .5rem; }
.jf-obras .p-lista__nombre { font-size: clamp(1.3rem, 2.05vw, 1.95rem); line-height: 1.2; letter-spacing: -.012em; text-wrap: balance; }
.jf-obra__ficha { color: var(--muted); font-size: .95rem; max-width: 70ch; }
.jf-obras .p-lista__meta { font-size: .9rem; padding-top: .35rem; }
@media (hover: hover) and (pointer: fine) {
  .jf-obras .p-lista__fila:hover .jf-obra__ficha { color: var(--muted); }
}
@media (max-width: 899px), (hover: none) {
  .jf-obra { grid-template-columns: 3.6rem minmax(0, 1fr); }
  .jf-obras .p-lista__meta { grid-column: 2; text-align: left; padding-top: 0; }
}

/* =========================================================
   5 · PIEZA PROPIA · «La sintaxis de la exclusión»
   Qué hace: la frase de la tesis se subraya en sus tres nodos, en orden, y la cadena se enciende.
   Qué la dispara: el scroll (en escritorio la sección se fija; en celular cada nodo al pasar).
   Versión quieta y sin JS: --p = 1, todo subrayado. El texto nunca cambia de color ni de opacidad:
   solo crecen el subrayado y la barra de cada paso.
   Celular: una columna; la cadena en tres filas bajo la frase.
   ========================================================= */
.jf-constructos { position: relative; --subrayado: #8163B0; }
.jf-constructos__pin { padding: var(--e-9) 0 var(--e-7); }
.jf-constructos__rejilla { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 7rem); align-items: start; }
.jf-constructos__cabeza { display: grid; gap: 1.4rem; }
.jf-constructos__cabeza .t-entrada { max-width: 34ch; }
.jf-sintaxis__nombre, .jf-constructo__nombre, .jf-indice__nombre, .jf-trayectoria__titulo {
  font-family: var(--f-display); font-style: italic; font-weight: 400; letter-spacing: -.005em;
  font-size: clamp(1.15rem, 1.5vw, 1.45rem); line-height: 1.25; color: var(--acento);
}
.jf-sintaxis__frase {
  margin-top: 1.4rem; font-family: var(--f-display); font-weight: 350;
  font-size: clamp(1.6rem, 2.95vw, 3.15rem); line-height: 1.24; letter-spacing: -.014em; max-width: 21em;
}
.jf-nodo {
  --p: 1;
  background-image: linear-gradient(var(--subrayado, var(--acento)), var(--subrayado, var(--acento)));
  background-repeat: no-repeat; background-position: 0 96%;
  background-size: calc(var(--p) * 100%) max(.075em, 3px);
  padding-bottom: .05em;
}
.jf-cadena { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: var(--e-7); max-width: 46rem; }
.jf-cadena__paso {
  --p: 1; position: relative; display: flex; align-items: center; gap: .7rem;
  padding-top: 1rem; border-top: 1px solid var(--linea); font-size: .95rem; color: var(--muted);
}
.jf-cadena__paso::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
  background: var(--acento); transform-origin: 0 50%; transform: scaleX(var(--p));
}
.jf-cadena__punto { position: relative; flex: none; width: 10px; height: 10px; border: 1.5px solid var(--acento); }
.jf-cadena__punto::after { content: ""; position: absolute; inset: 1.5px; background: var(--acento); opacity: var(--p); }
.jf-constructos__otros { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 7rem); padding-bottom: var(--e-9); }
.jf-constructos__par { grid-column: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-6) clamp(1.5rem, 3vw, 3.5rem); }
.jf-constructo { border-top: 1px solid var(--linea); padding-top: var(--e-5); display: grid; gap: 1rem; align-content: start; }
.jf-constructo p { color: var(--muted); max-width: 46ch; }
@media (min-width: 900px) {
  .pines .jf-constructos__pin { min-height: 100svh; display: grid; align-content: center; padding: calc(var(--nav-h) + 2rem) 0 2rem; }
}
@media (max-width: 899px) {
  .jf-constructos__rejilla { grid-template-columns: 1fr; }
  .jf-constructos__otros { grid-template-columns: 1fr; }
  .jf-constructos__par { grid-column: 1; grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .jf-cadena { grid-template-columns: 1fr; gap: .9rem; }
}

/* =========================================================
   6 · CIFRAS · el policy brief sobre su violeta. Titular, entrada, dos llamadas y tres cifras.
   Celular: todo en una columna; las llamadas se apilan.
   ========================================================= */
.jf-brief { position: relative; overflow-x: clip; padding: var(--e-9) 0 calc(var(--e-9) + 4rem); }
/* Aguada: el guiño a la acuarela del policy brief. Dos manchas de pigmento que derivan muy despacio,
   sin texto encima de su zona más cargada (el techo lo pone qa.py). Quieta con movimiento reducido. */
.jf-brief::before, .jf-brief::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none; border-radius: 50%;
  width: min(62vw, 54rem); aspect-ratio: 1; will-change: transform;
}
.jf-brief::before { top: -12%; right: -18%; background: radial-gradient(closest-side, color-mix(in srgb, var(--acento) 16%, transparent), color-mix(in srgb, var(--acento) 5%, transparent) 62%, transparent); animation: aguada-a 71s var(--ease-io) infinite alternate; }
.jf-brief::after { bottom: -10%; left: -22%; width: min(48vw, 40rem); background: radial-gradient(closest-side, color-mix(in srgb, #0f0a18 30%, transparent), transparent 70%); animation: aguada-b 97s var(--ease-io) infinite alternate; }
.jf-brief > .marco { position: relative; z-index: 1; }
@keyframes aguada-a { to { transform: translate3d(-9%, 7%, 0); } }
@keyframes aguada-b { to { transform: translate3d(8%, -6%, 0); } }
@media (prefers-reduced-motion: reduce) { .jf-brief::before, .jf-brief::after { animation: none; } }
.jf-brief__rotulo { color: var(--acento); margin-bottom: var(--e-5); }
.jf-brief__titulo { max-width: 13em; }
.jf-brief__entrada { margin-top: var(--e-5); max-width: 46ch; }
.jf-brief__acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: var(--e-6); }
.jf-brief__cifras { margin-top: var(--e-8); }
.jf-brief .t-cifra { font-size: calc(clamp(3.2rem, 7vw, 7.4rem) * var(--escala)); }
.jf-brief .p-cifras__unidad { font-size: max(.3em, 1.35rem); }
.jf-brief__fuente { margin-top: var(--e-6); max-width: 80ch; }
@media (max-width: 480px) { .jf-brief__acciones .boton { flex: 1 1 100%; } }

/* =========================================================
   7 · PISTA · ocho decisiones sin tarjetas: tipografía sobre una línea.
   Celular y movimiento reducido: lista vertical.
   ========================================================= */
.jf-decisiones .p-pista__pin { padding: var(--e-8) 0; }
.jf-decisiones .p-pista__titulo { max-width: 16em; }
.jf-decisiones .p-pista__item { border-top: 1px solid var(--linea); padding-top: 1.2rem; }
.jf-decisiones .p-pista__cifra { font-size: clamp(2.8rem, 5vw, 5.4rem); line-height: .9; letter-spacing: -.03em; }
.jf-decisiones .p-pista__item h3 { margin-top: 1rem; font-family: var(--f-display); font-size: clamp(1.2rem, 1.55vw, 1.55rem); line-height: 1.22; letter-spacing: -.01em; max-width: 22ch; }
.jf-decisiones .p-pista__item p { margin-top: .7rem; font-size: .92rem; }
.jf-decisiones__mas { padding: var(--e-6) var(--gutter) 0; }
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .pines .jf-decisiones .p-pista__pin { padding: calc(var(--nav-h) + 1rem) 0 2rem; }
  .pines .jf-decisiones .p-pista__item { width: clamp(16rem, 24vw, 23rem); }
}

/* =========================================================
   8 · ÍNDICE · las quince vistas de la plataforma en cuatro columnas; Herramientas lleva filete de acento.
   Tableta: dos columnas. Celular: una.
   ========================================================= */
.jf-indice__entrada { margin-top: 1.2rem; max-width: 48ch; }
.jf-indice__rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-6) var(--e-5); margin-top: var(--e-7); }
.jf-indice__grupo { border-top: 1px solid var(--linea); padding-top: 1.1rem; }
.jf-indice__grupo--herramientas { border-top: 2px solid var(--acento); padding-top: calc(1.1rem - 1px); }
.jf-indice__grupo ul { list-style: none; margin-top: 1rem; display: grid; gap: 1.1rem; }
.jf-indice__grupo a { font-weight: 500; text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--fg) 30%, transparent); text-underline-offset: .25em; transition: text-decoration-color var(--d-2) var(--ease); }
.jf-indice__grupo a:hover { text-decoration-color: var(--acento); }
.jf-indice__grupo li span { display: block; margin-top: .25rem; font-size: .9rem; line-height: 1.45; color: var(--muted); }
@media (max-width: 1099px) { .jf-indice__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .jf-indice__rejilla { grid-template-columns: 1fr; } }

/* =========================================================
   10 · PERFILES · canales sin formulario: filas grandes y la cita para copiar.
   Celular: una columna; los perfiles debajo de la cita.
   ========================================================= */
.jf-perfiles { padding: var(--e-9) 0; }
.jf-conclusion { margin-bottom: var(--e-8); padding-bottom: var(--e-7); border-bottom: 1px solid var(--linea); }
.jf-conclusion__cita { margin: 0; }
.jf-conclusion__cita p { font-family: var(--f-display); font-weight: 350; font-size: clamp(2rem, 4.3vw, 4.5rem); line-height: 1.1; letter-spacing: -.02em; max-width: 19em; text-wrap: balance; }
.jf-conclusion__cita em { color: var(--acento); }
.jf-conclusion__fuente { margin-top: var(--e-5); font-size: .92rem; color: var(--muted); max-width: 62ch; }
.jf-perfiles__entrada { margin-top: 1.2rem; }
.jf-perfiles__lista { list-style: none; border-top: 1px solid var(--linea); }
.jf-perfil {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: .4rem 1.5rem;
  padding: clamp(1.1rem, 2vw, 1.6rem) 0; border-bottom: 1px solid var(--linea); text-decoration: none;
}
.jf-perfil__nombre { font-family: var(--f-display); font-size: clamp(1.7rem, 3vw, 2.8rem); line-height: 1.05; letter-spacing: -.02em; }
.jf-perfil__dato { color: var(--muted); font-size: .92rem; text-align: right; }
.jf-perfil:hover .jf-perfil__nombre { color: var(--acento); }
.jf-cita { margin-top: var(--e-7); padding-top: var(--e-5); border-top: 1px solid var(--linea); display: grid; gap: .9rem; justify-items: start; max-width: 36rem; }
.jf-cita__rotulo { font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--acento); }
.jf-cita__texto { font-size: .98rem; line-height: 1.55; }
.jf-cita__boton { min-height: 44px; padding: .6rem 1.2rem; }
.jf-cita__boton[hidden] { display: none; }
.jf-cita__estado:empty { display: none; }
@media (max-width: 599px) {
  .jf-perfil { grid-template-columns: 1fr; }
  .jf-perfil__dato { text-align: left; }
}

/* ---------- Pie ---------- */
.jf-pie__nombre { font-family: var(--f-display); font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1.05; letter-spacing: -.02em; }
.jf-pie__nombre em { color: var(--acento); }

/* =========================================================
   6b · ESCENA DE DATOS «Lo que la norma no alcanza a ver»
   316 marcas en un lienzo, como renglones de un texto. Con JS y movimiento: la sección se fija
   y los cuatro pasos se relevan en el mismo lugar (subtítulos). Sin JS o quieto: lista normal.
   Paleta validada (dataviz, modo oscuro sobre #1B1721): implícita #9C7FD0 · emergente #C57A40;
   la explícita usa la tinta del texto (#F0EAE1).
   Celular: texto arriba, lienzo debajo; los pasos se relevan igual.
   ========================================================= */
.jf-evidencia { position: relative; --c-implicito: #9C7FD0; --c-emergente: #C57A40; --c-explicito: #F0EAE1; }
.jf-evidencia__pin { padding: var(--e-9) 0; }
.jf-evidencia__rejilla { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 6rem); align-items: center; }
.jf-evidencia__texto { display: grid; gap: var(--e-6); align-content: center; }
.jf-pasos { list-style: none; display: grid; gap: var(--e-6); }
.jf-paso { display: grid; gap: .6rem; max-width: 34rem; }
.jf-paso p { color: var(--muted); font-size: clamp(1.02rem, 1.2vw, 1.2rem); line-height: 1.5; }
.jf-paso__cifra { font-family: var(--f-display); font-size: calc(clamp(3rem, 6.2vw, 6.6rem) * var(--escala)); line-height: .9; letter-spacing: -.03em; font-variant-numeric: lining-nums tabular-nums; }
.jf-paso__cifra--implicito { color: var(--acento); }
.jf-evidencia__figura { margin: 0; display: grid; gap: 1rem; }
.jf-evidencia__lienzo { width: 100%; height: clamp(20rem, 62svh, 40rem); }
.sin-js .jf-evidencia__lienzo { display: none; }
.jf-evidencia__leyenda { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; align-items: center; }
.jf-clave { display: inline-flex; align-items: center; gap: .5rem; color: var(--fg); }
.jf-clave::before { content: ""; width: 1.4rem; height: 5px; border-radius: 1px; background: var(--c); }
.jf-clave--explicito { --c: var(--c-explicito); }
.jf-clave--implicito { --c: var(--c-implicito); }
.jf-clave--emergente { --c: var(--c-emergente); }
.jf-evidencia__fuente { flex-basis: 100%; }
/* Relevo de pasos (lo activa proyecto.js con .jf-evidencia--vivo) */
.jf-evidencia--vivo .jf-pasos { display: grid; grid-template-areas: "paso"; gap: 0; }
.jf-evidencia--vivo .jf-paso { grid-area: paso; opacity: 0; visibility: hidden; transform: translateY(18px);
  transition: opacity .55s var(--ease), transform .8s var(--ease), visibility 0s linear .55s; }
.jf-evidencia--vivo .jf-paso.activo { opacity: 1; visibility: visible; transform: none; transition: opacity .55s var(--ease), transform .8s var(--ease), visibility 0s; }
@media (min-width: 900px) {
  .jf-evidencia--vivo .jf-evidencia__pin { min-height: 100svh; display: grid; align-content: center; padding: calc(var(--nav-h) + 1rem) 0 1.5rem; }
}
@media (max-width: 899px) {
  .jf-evidencia__rejilla { grid-template-columns: 1fr; gap: var(--e-5); }
  .jf-evidencia--vivo .jf-evidencia__pin { min-height: 100svh; display: grid; align-content: center; padding: calc(var(--nav-h) + .5rem) 0 1rem; }
  .jf-evidencia--vivo .jf-evidencia__texto { gap: var(--e-4); }
  .jf-evidencia--vivo .jf-paso__cifra { font-size: 2.6rem; }
  .jf-evidencia--vivo .jf-paso p { font-size: .98rem; }
  .jf-evidencia__lienzo { height: clamp(15rem, 40svh, 24rem); }
  .jf-evidencia--vivo .t-titulo { font-size: 2rem; }
  .jf-evidencia__fuente { display: none; }
  .jf-evidencia--vivo .jf-evidencia__fuente { display: none; }
}

/* =========================================================
   6c · GRÁFICAS · cuatro hallazgos, cuatro formas (barras, pila 100 %, norma contra realidad, pares).
   Barras finas con extremo redondeado de 4 px anclado a la base; 2 px de aire entre rellenos;
   los valores y rótulos van en tinta de texto, nunca en el color de la serie.
   Paleta validada (dataviz, modo claro sobre #F2EEE7): serie 1 #6A45A0 · serie 2 #B8622E;
   secuencia ordinal (vinculación, de lo estable a lo frágil) #45286E · #6A45A0 · #8C6CBE.
   Tableta y celular: una columna.
   ========================================================= */
.jf-datos { --s1: #6A45A0; --s2: #B8622E; --q1: #45286E; --q2: #6A45A0; --q3: #8C6CBE; --pista: color-mix(in oklab, var(--fg) 7%, transparent); }
.jf-datos__entrada { margin-top: 1.2rem; max-width: 52ch; }
.jf-datos__rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-8) clamp(2rem, 6vw, 6.5rem); margin-top: var(--e-7); }
.jf-grafica { margin: 0; display: grid; gap: 1.4rem; align-content: start; border-top: 1px solid var(--linea); padding-top: var(--e-5); }
.jf-grafica__cabeza { display: grid; gap: .6rem; }
.jf-grafica__titulo { font-family: var(--f-display); font-size: clamp(1.35rem, 2vw, 1.9rem); line-height: 1.18; letter-spacing: -.012em; max-width: 24ch; }
.jf-grafica__nota { max-width: 56ch; }
.jf-barras { list-style: none; display: grid; gap: 1.1rem; }
.jf-barras__fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "etiqueta valor" "pista pista"; gap: .45rem 1rem; align-items: baseline; }
.jf-barras__etiqueta { font-size: .95rem; }
.jf-barras__fila > .jf-barras__etiqueta { grid-area: etiqueta; }
.jf-barras__fila > .jf-barras__valor { grid-area: valor; }
.jf-barras__fila > .jf-barras__pista { grid-area: pista; }
.jf-barras__ano { color: var(--muted); font-size: .85rem; margin-left: .35rem; }
.jf-barras__valor { font-family: var(--f-display); font-size: 1.25rem; font-variant-numeric: lining-nums tabular-nums; }
.jf-barras__pista { position: relative; display: block; height: 10px; background: var(--pista); border-radius: 0 4px 4px 0; }
.jf-barras__barra { position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%); background: var(--s1); border-radius: 0 4px 4px 0; transform-origin: 0 50%; }
.jf-barras__barra--2 { background: var(--s2); }
.jf-barras__barra--norma { background: transparent; box-shadow: inset 0 0 0 1.5px var(--s1);
  background-image: repeating-linear-gradient(135deg, color-mix(in oklab, var(--s1) 55%, transparent) 0 2px, transparent 2px 7px); }
.jf-barras__origen { position: absolute; left: 0; top: -5px; bottom: -5px; width: 2px; background: var(--fg); }
.jf-barras__fila--cero .jf-barras__valor { color: var(--acento); }
@media (hover: hover) and (pointer: fine) {
  .jf-barras:hover .jf-barras__barra { opacity: .45; transition: opacity var(--d-2) var(--ease); }
  .jf-barras .jf-barras__fila:hover .jf-barras__barra, .jf-barras .jf-barras__grupo:hover .jf-barras__barra { opacity: 1; }
}
/* Pares (denuncia) */
.jf-leyenda { display: flex; gap: 1.4rem; font-size: .9rem; }
.jf-leyenda__item { display: inline-flex; align-items: center; gap: .5rem; }
.jf-leyenda__item::before { content: ""; width: 1.4rem; height: 10px; border-radius: 0 4px 4px 0; background: var(--c); }
.jf-leyenda__item--1 { --c: var(--s1); }
.jf-leyenda__item--2 { --c: var(--s2); }
.jf-barras--pares { gap: 1.3rem; }
.jf-barras__grupo { display: grid; grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr); gap: .35rem 1rem; align-items: center; }
.jf-barras__grupo .jf-barras__etiqueta { grid-row: span 2; }
.jf-barras__par { display: grid; grid-template-columns: minmax(0, 1fr) 3.6rem; gap: .8rem; align-items: center; }
.jf-barras__par .jf-barras__pista { height: 9px; }
.jf-barras__par .jf-barras__valor { font-size: 1.05rem; text-align: right; }
.jf-barras__valor--sin { font-family: var(--f-texto); font-size: .8rem !important; color: var(--muted); }
/* Pila 100 % (vinculación) */
.jf-pila { display: flex; gap: 2px; height: 44px; }
.jf-pila__tramo { flex: 0 0 calc(var(--v) * 1% - 2px); transform-origin: 0 50%; }
.jf-pila__tramo--1 { background: var(--q1); border-radius: 2px 0 0 2px; }
.jf-pila__tramo--2 { background: var(--q2); }
.jf-pila__tramo--3 { background: var(--q3); border-radius: 0 4px 4px 0; }
.jf-pila__claves { list-style: none; display: flex; gap: 2px; }
.jf-pila__clave { flex: 0 0 calc(var(--v) * 1% - 2px); display: grid; gap: .2rem; font-size: .9rem; padding-top: .6rem; border-top: 3px solid var(--c); min-width: 0; }
.jf-pila__clave--1 { --c: var(--q1); }
.jf-pila__clave--2 { --c: var(--q2); }
.jf-pila__clave--3 { --c: var(--q3); }
.jf-pila__cifra { font-family: var(--f-display); font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
@media (max-width: 1099px) { .jf-datos__rejilla { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .jf-barras__grupo { grid-template-columns: 1fr; }
  .jf-barras__grupo .jf-barras__etiqueta { grid-row: auto; }
  .jf-pila__claves { flex-direction: column; gap: .8rem; }
  .jf-pila__clave { flex-basis: auto; }
}