feat(primitivas): capa gráfica y de movimiento reutilizable

Diez primitivas que dan a la landing el "gráfico y movimiento" que pidió
la dueña, todas con guarda de prefers-reduced-motion:

- FondoPuntos / PatronPuntos — el patrón de puntos del manual
- TarjetaSpotlight, TextoDesenfoque, ContadorNumero — realce y reveal
- Carrusel — deslizable, con contador, autoplay pausable
- Icono, SimboloTresLineas, IlustracionInflexion — línea, sin relleno
- FondoFoto — duotono azul/dorado sobre foto

useAutoStep en lib/motion.ts comparte la forma del autoplay del carrusel
para indicadores de paso que no son carrusel.

IlustracionInflexion documenta un detalle que muerde: motion.path aplica
su propio andamiaje de dasharray aunque no reciba initial/animate, así
que la rama de reduced motion renderiza <path> planos en vez de intentar
neutralizar los animados.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

lib/motion.ts

@@ -35,3 +35,25 @@ export const motionProps = (reduced: boolean) =>
   reduced
     ? { initial: 'visible' as const, animate: 'visible' as const, whileInView: undefined, viewport: undefined }
     : {};
+
+// Cycles through `count` steps on its own (Mecanismo, ComoEmpezar): each
+// manual change restarts the dwell timer, hovering pauses it, and it never
+// advances at all for reduced-motion users — same shape as the Carrusel
+// autoplay, for step indicators that aren't a carousel.
+export function useAutoStep(count: number, intervalMs = 3500) {
+  const reduced = usePrefersReducedMotion();
+  const [active, setActive] = useState(0);
+  const [paused, setPaused] = useState(false);
+
+  useEffect(() => {
+    if (reduced || paused || count <= 1) return;
+    const id = setTimeout(() => setActive((a) => (a + 1) % count), intervalMs);
+    return () => clearTimeout(id);
+  }, [active, reduced, paused, count, intervalMs]);
+
+  return {
+    active,
+    setActive,
+    hoverProps: { onMouseEnter: () => setPaused(true), onMouseLeave: () => setPaused(false) },
+  };
+}