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/Icono.tsx

@@ -0,0 +1,122 @@
+import type { ReactNode } from 'react';
+
+// Set of simple line icons — one per concept used across Mecanismo,
+// ComoEmpezar and Disciplinas. Same stroke weight and geometric language as
+// the manual's own iconography guidance ("líneas simples, geométricas,
+// consistentes en grosor"), hand-drawn to match each step's specific idea
+// rather than generic stock glyphs.
+
+export type IconoNombre =
+  | 'inmersion'
+  | 'desafiar'
+  | 'estrategia'
+  | 'escribeme'
+  | 'diagnostico'
+  | 'plan'
+  | 'comunicacion'
+  | 'digital'
+  | 'experiencias';
+
+const PATHS: Record<IconoNombre, ReactNode> = {
+  // A line dives through two layers down to a core point — "me sumerjo
+  // hasta comprenderla desde dentro".
+  inmersion: (
+    <>
+      <path d="M12 3v11" />
+      <path d="M7 8h10" />
+      <path d="M9 12h6" />
+      <path d="m8 14 4 4 4-4" />
+      <circle cx="12" cy="20.5" r="0.75" fill="currentColor" stroke="none" />
+    </>
+  ),
+  // A circle (the assumption) cracked by a bolt — "cuestiono lo que todos
+  // dan por hecho".
+  desafiar: (
+    <>
+      <circle cx="12" cy="12" r="8.5" />
+      <path d="m13 6-4 6h4l-2 6 5-7.5h-4z" fill="currentColor" stroke="none" />
+    </>
+  ),
+  // A path rising to a flag — "una estrategia que puedas ejecutar".
+  estrategia: (
+    <>
+      <path d="M4 20 10 12 14 15 20 6" strokeDasharray="1.5 3" />
+      <path d="M20 6v6" />
+      <path d="M20 6h-5l2.5-3.5L20 6" fill="currentColor" stroke="none" />
+    </>
+  ),
+  // A speech bubble mid-thought — "cuéntame dónde está tu negocio hoy".
+  escribeme: (
+    <>
+      <path d="M4 5.5h16v10H10l-4 3.5v-3.5H4z" />
+      <path d="M8 9.5h8" />
+      <path d="M8 12.5h5" />
+    </>
+  ),
+  // A magnifying glass over a short list — "una conversación para ubicar tu
+  // punto de inflexión".
+  diagnostico: (
+    <>
+      <path d="M5 4h9v9.5" />
+      <path d="M8 8h5" />
+      <path d="M8 11h2.5" />
+      <circle cx="15.5" cy="15.5" r="4" />
+      <path d="m18.6 18.6 2.4 2.4" />
+    </>
+  ),
+  // A short checklist — "sales con claridad y tu siguiente movimiento
+  // definido".
+  plan: (
+    <>
+      <rect x="5" y="3.5" width="14" height="17" rx="1.5" />
+      <path d="m8.3 8.5 1.2 1.2L11.7 7.5" />
+      <path d="M14 8.5h5" />
+      <path d="m8.3 14 1.2 1.2 2.2-2.2" />
+      <path d="M14 14h5" />
+    </>
+  ),
+  // Two overlapping bubbles — mensaje que alinea a tu equipo y tu mercado.
+  comunicacion: (
+    <>
+      <path d="M3 6.5h11v7.5H9l-3 2.5v-2.5H3z" />
+      <path d="M12 6.5A2.5 2.5 0 0 1 14.5 4H20v6.5h-3v2.5l-2.7-2.5" />
+    </>
+  ),
+  // A screen with a signal — presencia y procesos que escalan.
+  digital: (
+    <>
+      <rect x="3.5" y="5" width="17" height="12" rx="1.2" />
+      <path d="M9 20.5h6" />
+      <path d="M12 17v3.5" />
+      <path d="M8.5 12.5a3.6 3.6 0 0 1 7 0" strokeDasharray="0.1 3" />
+      <circle cx="12" cy="12.5" r="0.9" fill="currentColor" stroke="none" />
+    </>
+  ),
+  // A ripple from a single touch — cada toque con tu marca construye
+  // confianza.
+  experiencias: (
+    <>
+      <circle cx="12" cy="12" r="1.3" fill="currentColor" stroke="none" />
+      <circle cx="12" cy="12" r="5" />
+      <circle cx="12" cy="12" r="9" strokeOpacity={0.55} />
+    </>
+  ),
+};
+
+export function Icono({ nombre, className = '' }: { nombre: IconoNombre; className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.6}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      aria-hidden="true"
+      focusable="false"
+    >
+      {PATHS[nombre]}
+    </svg>
+  );
+}