/* ============================================================
   Nexo · Home web — capa "diagrama anotado" (ACENTO) · casa clara 4.x
   La mano humana ALREDEDOR de la evidencia, nunca encima.
   Dos manos: tinta = método · lápiz = escucha.
   Toda marca carga información — nunca textura decorativa.
   ============================================================ */

/* ── Rejilla de margen: contenido + nota al margen ── */
.annotated{display:grid;grid-template-columns:minmax(0,1fr) 232px;gap:46px;align-items:start;}
.annotated>.anno{align-self:start;}

/* ── Nota base ── */
.anno{font-family:var(--font-mono);}

/* ── TINTA · la mano del método (firme, alineada, azul) ── */
.anno.tinta{display:flex;flex-direction:column;gap:6px;padding-top:11px;border-top:1px solid rgba(26,58,143,0.38);}
.anno.tinta .fl-eyebrow{font-size:10.5px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;color:var(--blue);}
.anno.tinta .fl-detail{font-size:12.5px;line-height:1.55;color:var(--ink2);}
.anno.tinta .k{color:var(--ink);}

/* ── LÁPIZ · la mano que escucha (tentativa, ligeramente torcida, grafito) ── */
.anno.lapiz{font-family:var(--font-mono);font-size:13px;line-height:1.55;letter-spacing:0.01em;color:var(--ink2);transform:rotate(-1.3deg);transform-origin:left center;}

/* ── Figura del hero: el campo leído como diagrama, no como aura ── */
.hero-sym{flex-direction:column;gap:18px;}
.fig-label{max-width:380px;align-self:center;text-align:left;}

/* ── Subrayado del hallazgo · trazo irregular dorado, dibujado al revelar ── */
.mark-finding{position:relative;display:inline-block;white-space:nowrap;}
.mark-finding .uh{position:absolute;left:-3px;right:-3px;bottom:-0.26em;width:calc(100% + 6px);height:0.46em;overflow:visible;pointer-events:none;}
.mark-finding .uh path{fill:none;stroke:var(--gold);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:330;stroke-dashoffset:330;}
.reveal.in .mark-finding .uh path{animation:drawOn 860ms cubic-bezier(0.16,1,0.3,1) 320ms forwards;}
.mark-finding .uh.auto path{animation:drawOn 860ms cubic-bezier(0.16,1,0.3,1) 480ms forwards;} /* subpáginas: se dibuja al cargar */
@keyframes drawOn{to{stroke-dashoffset:0;}}

/* ── Diagnóstico · cambia el adorno plano por la marca dibujada ── */
.diag .gap-line{justify-content:center;}
.diag .gap-line .ln{display:none;}
.diag .gap-line .txt{white-space:nowrap;font-size:20px;}

/* ── Método · nota a lápiz que repite el número que importa ── */
.field-note{margin-top:22px;text-align:center;transform-origin:center;transform:rotate(-1deg);}

/* ── Cadena · el núcleo, circulado a mano (alguien decidió que esto importa) ── */
.cstep.nucleo{position:relative;}
.node-ring{position:absolute;top:-20px;left:50%;transform:translateX(-50%);width:66px;height:66px;overflow:visible;pointer-events:none;z-index:3;}
.node-ring path{fill:none;stroke:rgba(15,15,15,0.5);stroke-width:2;stroke-linecap:round;stroke-dasharray:300;stroke-dashoffset:300;}
.reveal.in .node-ring path{animation:drawOn 980ms cubic-bezier(0.16,1,0.3,1) 420ms forwards;}
.node-ring-label{position:absolute;top:-6px;left:calc(50% + 30px);white-space:nowrap;font-size:12px;color:var(--ink3,#6B6B73);transform:rotate(-4deg);transform-origin:left center;z-index:3;}

/* ── Quieto / reduce: las marcas aparecen ya dibujadas, sin trazo animado ── */
[data-motion="quieto"] .mark-finding .uh path,[data-motion="quieto"] .mark-finding .uh.auto path,
[data-motion="quieto"] .node-ring path{stroke-dashoffset:0;animation:none;}
@media (prefers-reduced-motion:reduce){
  .mark-finding .uh path,.node-ring path{stroke-dashoffset:0 !important;animation:none !important;}
  .anno.lapiz{transform:rotate(-1.3deg);}
}

/* ── Responsive: la nota al margen baja bajo el texto ── */
@media(max-width:900px){
  .annotated{grid-template-columns:1fr;gap:18px;}
  .node-ring,.node-ring-label{display:none;}
  .diag .gap-line .txt{white-space:normal;font-size:16px;}
}

/* ── Niveles de la mano · 10 → 15 → 20% ──
   Las marcas extra se ocultan en niveles bajos; nunca reservan espacio. */
[data-anno="10"] .t15,[data-anno="10"] .t20{display:none !important;}
[data-anno="15"] .t20{display:none !important;}

/* Notas sueltas (no en rejilla de margen) */
.anno.note-block{margin-top:20px;}
.anno.tinta.note-block{max-width:440px;}
.ramas .anno.note-block{display:inline-block;}

/* La mano sobre superficie clara (paper) */
.sec-paper .anno.tinta{border-top-color:rgba(26,58,143,0.38);}
.sec-paper .anno.tinta .fl-eyebrow{color:var(--blue);}
.sec-paper .anno.tinta .fl-detail{color:var(--ink2);}
.sec-paper .anno.tinta .k{color:var(--ink);}
.sec-paper .anno.lapiz{color:#8A8A90;}