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>

components/primitives/TarjetaSpotlight.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { useRef, type ReactNode } from 'react';
+
+// Adapted from React Bits' SpotlightCard (reactbits.dev, MIT) — a soft glow
+// that follows the cursor, recoloured to the brand's dorado instead of the
+// original's plain white. Pure CSS custom properties + a `before:` pseudo
+// element, so no separate stylesheet is needed.
+export function TarjetaSpotlight({
+  children,
+  className = '',
+  spotlightColor = 'rgba(196, 148, 46, 0.16)', // dorado, low alpha
+}: {
+  children: ReactNode;
+  className?: string;
+  spotlightColor?: string;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+    const el = ref.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    el.style.setProperty('--spot-x', `${e.clientX - rect.left}px`);
+    el.style.setProperty('--spot-y', `${e.clientY - rect.top}px`);
+  };
+
+  return (
+    <div
+      ref={ref}
+      onMouseMove={handleMouseMove}
+      style={{ ['--spot-color' as string]: spotlightColor }}
+      className={`group relative overflow-hidden
+        before:absolute before:inset-0 before:pointer-events-none before:opacity-0 before:transition-opacity before:duration-500
+        before:[background:radial-gradient(circle_at_var(--spot-x,50%)_var(--spot-y,50%),var(--spot-color),transparent_70%)]
+        hover:before:opacity-100 focus-within:before:opacity-100 motion-reduce:before:hidden
+        ${className}`}
+    >
+      {children}
+    </div>
+  );
+}