/* SuperHumanos — estilos de componentes. Carga después de tokens.css; todo valor viene de un token. */

.sh, .sh *, .sh *::before, .sh *::after { box-sizing: border-box; }
.sh {
  font-family: var(--font-headline);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums tabular-nums;
  margin: 0;
}
.sh p { margin: 0; }
.caps { text-transform: uppercase; }
.c-ink { color: var(--ink); }
.c-2 { color: var(--ink-2); }
.c-3 { color: var(--ink-3); }

/* ── Marca: logos que cambian solos con el fondo ─────────────── */
.sh-logo-blanco { display: none !important; }
[data-theme="negativo"] .sh-logo-negro { display: none !important; }
[data-theme="negativo"] .sh-logo-blanco { display: block !important; }

/* ── Pieza negra: para lo importante. Remapea los tokens adentro ─ */
.sh-negro {
  --paper: var(--negro-fondo); --paper-2: var(--negro-foto); --ink: var(--negro-tinta);
  --ink-2: var(--negro-tinta-2); --ink-3: var(--negro-tinta-3); --line: var(--negro-linea);
  --rule: var(--negro-filete); --guide: var(--negro-guia);
  background: var(--paper); color: var(--ink);
}
.sh-negro .sh-logo-negro { display: none !important; }
.sh-negro .sh-logo-blanco { display: block !important; }

/* ── Lámina: el marco de toda pieza ───────────────────────────── */
.sh-lamina { padding: var(--space-7); background: var(--paper); }
.sh-lamina__head {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: var(--stroke-hair) solid var(--rule);
  margin-bottom: var(--space-6);
}
.sh-lamina__head .indice { color: var(--ink-3); text-transform: uppercase; }
.sh-lamina__title { margin: 0 0 var(--space-6); max-width: 22ch; text-wrap: balance; }
.sh-epigrafe { display: flex; gap: var(--space-3); align-items: baseline; margin-top: var(--space-4); max-width: 60ch; }
.sh-epigrafe .fig { flex: none; }
.sh-epigrafe .epigrafe { color: var(--ink-2); }

/* ── Rótulo de nivel de evidencia: el tipo de línea ES el nivel ── */
.sh-evidencia { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink-3); }
.sh-evidencia .indice { text-transform: uppercase; color: var(--ink-2); }
.sh-evidencia::before { content: ""; flex: none; width: 24px; height: 2px; }
.sh-evidencia[data-nivel="consenso"]::before   { background: var(--ink); }
.sh-evidencia[data-nivel="prometedor"]::before { background: repeating-linear-gradient(90deg, var(--ink) 0 6px, transparent 6px 10px); width: 26px; }
.sh-evidencia[data-nivel="hipotesis"]::before  { background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 5px); width: 22px; }

/* ── Cota horizontal: ticks en los extremos, cifra arriba ─────── */
.sh-cota {
  position: relative; height: var(--stroke-tick);
  border-left: var(--stroke-hair) solid var(--line);
  border-right: var(--stroke-hair) solid var(--line);
  background: linear-gradient(var(--line), var(--line)) center / 100% var(--stroke-hair) no-repeat;
}
.sh-cota > .cota {
  position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%);
  padding: 0 var(--space-2) var(--space-1); color: var(--ink-3); white-space: nowrap; background: var(--paper);
}

/* ── SVG de diagramas: clases compartidas ─────────────────────── */
.sh-svg { display: block; width: 100%; height: auto; overflow: visible; }
.sh-svg text { fill: var(--ink); font-family: var(--font-headline); }
.sh-svg text.t2 { fill: var(--ink-2); }
.sh-svg text.t3 { fill: var(--ink-3); }
.sh-svg .ln   { fill: none; stroke: var(--line); stroke-width: var(--stroke-hair); vector-effect: non-scaling-stroke; }
.sh-svg .ln-r { fill: none; stroke: var(--ink); stroke-width: var(--stroke-restriccion); vector-effect: non-scaling-stroke; }
.sh-svg .ln-ink { fill: none; stroke: var(--ink); stroke-width: var(--stroke-hair); vector-effect: non-scaling-stroke; }
.sh-svg .ln-g { fill: none; stroke: var(--guide); stroke-width: var(--stroke-hair); vector-effect: non-scaling-stroke; }
.sh-svg .ln-rule { fill: none; stroke: var(--rule); stroke-width: var(--stroke-hair); vector-effect: non-scaling-stroke; }
.sh-svg .prom { stroke-dasharray: 6 4; }
.sh-svg .hip  { stroke-dasharray: 1.5 3.5; }
.sh-svg .zona { fill: var(--guide); stroke: none; }
.sh-svg .pt   { fill: var(--ink); }
.sh-svg .pt-l { fill: var(--line); }
.sh-svg .pt-o { fill: var(--paper); stroke: var(--ink); stroke-width: var(--stroke-hair); vector-effect: non-scaling-stroke; }

/* Trazado en vivo: los diagramas se dibujan línea por línea */
@keyframes sh-trazo { to { stroke-dashoffset: 0; } }
@keyframes sh-aparece { from { opacity: 0; } to { opacity: 1; } }
.sh-trazar .tr { stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); animation: sh-trazo var(--dur, 600ms) cubic-bezier(.4, 0, .2, 1) var(--d, 0ms) forwards; }
.sh-trazar .ap { opacity: 0; animation: sh-aparece 240ms linear var(--d, 0ms) forwards; }
@media (prefers-reduced-motion: reduce) {
  .sh-trazar .tr { animation: none; stroke-dashoffset: 0; stroke-dasharray: none; }
  .sh-trazar .ap { animation: none; opacity: 1; }
}

/* ── Ecuación conceptual ──────────────────────────────────────── */
.sh-ecuacion { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-4); }
.sh-ecuacion .op { font-weight: 200; color: var(--ink-3); }
.sh-ecuacion .term { display: inline-flex; flex-direction: column; }
.sh-ecuacion .term .indice { margin-top: var(--space-2); color: var(--ink-3); text-transform: uppercase; }

/* ── Slide 16:9: escala de slide = escala base llevada a 1920 px ─ */
.sh-slide {
  position: relative; aspect-ratio: 16 / 9; container-type: inline-size; overflow: hidden;
  background: var(--paper); color: var(--ink); font-family: var(--font-headline);
  font-variant-numeric: lining-nums tabular-nums;
}
.sh-slide__in { position: absolute; inset: 5cqw; }
.sh-slide__head, .sh-slide__foot {
  position: absolute; left: 5cqw; right: 5cqw; display: flex; justify-content: space-between; align-items: baseline;
  font-size: .94cqw; line-height: 1.2; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.sh-slide__head { top: 3.2cqw; }
.sh-slide__head .fig-ref { text-transform: none; letter-spacing: 0; font-weight: 700; color: var(--ink); font-size: 1.1cqw; }
.sh-slide__foot { bottom: 3.2cqw; }
.s-dato  { font-size: 24.3cqw; line-height: .82; font-weight: 700; letter-spacing: -.045em; }
.s-xl    { font-size: 15cqw; line-height: .86; font-weight: 700; letter-spacing: -.04em; }
.s-t1    { font-size: 5.73cqw; line-height: .95; font-weight: 700; letter-spacing: -.025em; }
.s-t1l   { font-size: 5.73cqw; line-height: .95; font-weight: 200; letter-spacing: -.025em; }
.s-t2    { font-size: 3.54cqw; line-height: 1.02; font-weight: 700; letter-spacing: -.015em; }
.s-lead  { font-size: 2.19cqw; line-height: 1.3; font-weight: 300; }
.s-body  { font-size: 1.35cqw; line-height: 1.5; font-weight: 300; font-family: var(--font-text); }
.s-fig   { font-size: 1.1cqw; line-height: 1.3; font-weight: 700; }
.s-epi   { font-size: 1.1cqw; line-height: 1.45; font-weight: 300; color: var(--ink-2); }
.s-idx   { font-size: .94cqw; line-height: 1.2; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

/* ── Galería de plantillas (solo para mostrar piezas en el sistema) ─ */
.sh-galeria { display: grid; gap: var(--space-6); padding: var(--space-5); background: var(--paper-2); }
.sh-galeria > figure { margin: 0; }
.sh-galeria figcaption { display: flex; gap: var(--space-3); align-items: baseline; margin-top: var(--space-2); }
.sh-galeria figcaption .indice { text-transform: uppercase; color: var(--ink-3); }
.sh-galeria figcaption .epigrafe { color: var(--ink-2); }
.sh-pieza { box-shadow: 0 0 0 var(--stroke-hair) var(--rule); }

/* Lugar de una foto: la calidez la pone la fotografía, no el diseño */
.sh-foto {
  background: var(--paper-2); display: flex; align-items: flex-end; justify-content: flex-start;
  color: var(--ink-3); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}