feat(dolores): el nudo que no se deshace

components/primitives/IlustracionNudo.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { useEnVista } from '@/lib/motion';
+
+// Four strands looping over each other into a knot that never opens — the
+// section's own subject drawn: effort that folds back on itself instead of
+// going anywhere. The strands draw themselves in sequence, which reads as the
+// knot tightening rather than as decoration appearing.
+const HEBRAS = [
+  { d: 'M30 90 C 60 20, 130 20, 140 70 C 148 112, 78 118, 70 78 C 63 44, 120 38, 150 66', ancho: 2.5 },
+  { d: 'M20 60 C 70 110, 120 110, 160 60', ancho: 2 },
+  { d: 'M40 110 C 80 40, 110 130, 155 95', ancho: 2 },
+  { d: 'M25 40 C 90 70, 100 100, 165 40', ancho: 1.5 },
+];
+
+export function IlustracionNudo({ className = '' }: { className?: string }) {
+  const { ref, enVista, reduced } = useEnVista();
+
+  // Plain <path> under reduced motion — motion.path would hide the drawing.
+  if (reduced) {
+    return (
+      <svg ref={ref} viewBox="0 0 190 140" className={className} aria-hidden="true" focusable="false">
+        {HEBRAS.map((h) => (
+          <path key={h.d} d={h.d} fill="none" stroke="currentColor" strokeWidth={h.ancho} strokeLinecap="round" />
+        ))}
+      </svg>
+    );
+  }
+
+  return (
+    <svg ref={ref} viewBox="0 0 190 140" className={className} aria-hidden="true" focusable="false">
+      {HEBRAS.map((h, i) => (
+        <motion.path
+          key={h.d}
+          d={h.d}
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={h.ancho}
+          strokeLinecap="round"
+          initial={{ pathLength: 0 }}
+          animate={enVista ? { pathLength: 1 } : { pathLength: 0 }}
+          transition={{ duration: 1.3, delay: i * 0.18, ease: [0.22, 1, 0.36, 1] }}
+        />
+      ))}
+    </svg>
+  );
+}