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/__tests__/TarjetaSpotlight.test.tsx

@@ -0,0 +1,35 @@
+import { render, fireEvent } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { TarjetaSpotlight } from '../TarjetaSpotlight';
+
+describe('<TarjetaSpotlight />', () => {
+  it('renders its children', () => {
+    const { getByText } = render(
+      <TarjetaSpotlight>
+        <p>Contenido de la tarjeta</p>
+      </TarjetaSpotlight>,
+    );
+    expect(getByText('Contenido de la tarjeta')).toBeInTheDocument();
+  });
+
+  it('disables the glow for reduced-motion users via a motion-reduce guard', () => {
+    const { container } = render(<TarjetaSpotlight>hola</TarjetaSpotlight>);
+    expect(container.firstElementChild?.className).toContain('motion-reduce:before:hidden');
+  });
+
+  it('tracks the cursor position as CSS custom properties on mouse move', () => {
+    const { container } = render(<TarjetaSpotlight>hola</TarjetaSpotlight>);
+    const card = container.firstElementChild as HTMLDivElement;
+    fireEvent.mouseMove(card, { clientX: 40, clientY: 20 });
+    expect(card.style.getPropertyValue('--spot-x')).toMatch(/px$/);
+    expect(card.style.getPropertyValue('--spot-y')).toMatch(/px$/);
+  });
+
+  it('accepts a custom spotlight colour', () => {
+    const { container } = render(
+      <TarjetaSpotlight spotlightColor="rgba(0,0,0,0.5)">hola</TarjetaSpotlight>,
+    );
+    const card = container.firstElementChild as HTMLDivElement;
+    expect(card.style.getPropertyValue('--spot-color')).toBe('rgba(0,0,0,0.5)');
+  });
+});