feat(header): progreso de lectura y compactado al bajar

components/primitives/ProgresoLectura.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { motion, useScroll, useSpring } from 'framer-motion';
+import { usePrefersReducedMotion } from '@/lib/motion';
+
+// Reading progress along the bottom edge of the header. Pure motion feedback:
+// under reduced motion it renders nothing at all, because a static progress
+// bar communicates nothing — unlike an illustration, there is no meaningful
+// still frame of it.
+export function ProgresoLectura({ className = '' }: { className?: string }) {
+  const reduced = usePrefersReducedMotion();
+  const { scrollYProgress } = useScroll();
+  const avance = useSpring(scrollYProgress, { stiffness: 120, damping: 30, restDelta: 0.001 });
+
+  if (reduced) return null;
+
+  return (
+    <motion.div
+      aria-hidden="true"
+      className={`absolute bottom-0 left-0 right-0 h-0.5 origin-left bg-dorado ${className}`}
+      style={{ scaleX: avance }}
+    />
+  );
+}

components/primitives/__tests__/ProgresoLectura.test.tsx

@@ -0,0 +1,17 @@
+import { render } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { ProgresoLectura } from '../ProgresoLectura';
+
+describe('<ProgresoLectura />', () => {
+  it('is decorative: hidden from assistive tech', () => {
+    const { container } = render(<ProgresoLectura />);
+    expect(container.firstElementChild).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  it('renders as a gold rule anchored to the bottom edge', () => {
+    const { container } = render(<ProgresoLectura />);
+    const cls = container.firstElementChild?.className ?? '';
+    expect(cls).toContain('bg-dorado');
+    expect(cls).toContain('absolute');
+  });
+});