docs(spec): el hilo conductor — sistema visual, ilustración y movimiento

Diseño aprobado para la siguiente tanda visual, en respuesta al mensaje de
la dueña del 30/jul ("sólo le falta algo de gráfico y movimiento").

Concepto rector: una línea dorada continua atraviesa la landing y se
dibuja con el scroll, cosiendo las secciones y resolviendo en el ≡ del
wordmark. Aporta ilustración, movimiento y continuidad de una sola vez.

Además, rebalancea el movimiento existente en vez de sumarle encima: sale
el carrusel del hero (duplica la sección Dolores), sale el autoplay
repetido de Cómo empezar, y sale el opacity-40 que hoy deja ilegibles dos
de cada tres pasos.

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

docs/superpowers/specs/2026-07-31-hilo-conductor-sistema-visual-design.md

@@ -0,0 +1,185 @@
+# El hilo conductor — sistema visual, ilustración y movimiento
+
+**Fecha:** 31/jul/2026
+**Estado:** aprobado en brainstorming, pendiente de plan de implementación
+**Origen:** mensaje de la dueña del 30/jul/2026 — *"súper, sólo le falta algo de gráfico y movimiento"*
+
+---
+
+## 1. Problema
+
+La landing ya tiene contenido correcto y una primera capa de gráfico y movimiento (fondos de puntos, blur-in de títulos, spotlight en tarjetas, carrusel, ilustración de inflexión). Aun así, tres cosas la mantienen por debajo del nivel que la marca merece:
+
+1. **No hay hilo visual.** Es una pila de diez secciones con cortes duros entre fondos. Nada conecta una sección con la siguiente.
+2. **Casi no hay ilustración.** Existe una sola pieza dibujada (`IlustracionInflexion`); el resto es iconografía de línea y patrones de puntos. La metáfora gráfica central del Manual de Identidad Visual — **Complejidad → Enfoque → Claridad** — no está dibujada en ninguna parte de la página.
+3. **El movimiento compite consigo mismo.** Tres elementos se animan solos al mismo tiempo (carrusel del hero, `useAutoStep` en `Mecanismo` y en `ComoEmpezar`), y dos de ellos usan la misma interacción. El resultado se lee como ruido, no como movimiento.
+
+## 2. Concepto rector: el hilo
+
+**Una línea dorada continua atraviesa la landing verticalmente**, dibujándose conforme el usuario hace scroll. Entra por el hero, cose sección con sección, se transforma en la ilustración de cada bloque y **resuelve en el `≡` del wordmark en el cierre**.
+
+No es decoración. Es *claridad · dirección · crecimiento* dibujado: el hilo **es** la dirección. Resuelve simultáneamente los tres problemas de arriba — aporta ilustración, aporta movimiento con sentido, y elimina los cortes duros.
+
+**Lenguaje gráfico (decidido):** line-art geométrico. Trazo fino sin relleno (1.5–3px), derivado del `≡` y del patrón de puntos del manual. Dorado `#C4942E` sobre azul profundo, azul profundo sobre claro. Sin degradados, sin formas rellenas, sin sombras suaves — ese vocabulario se lee como plantilla y contradice "simple, directo, limpio".
+
+## 3. Componentes nuevos
+
+Todos son primitivas en `components/primitives/`, con test co-locado en `__tests__/`.
+
+### 3.1 `HiloConductor`
+
+SVG de altura completa del documento, con `pathLength` ligado a `useScroll` de Framer Motion. Se dibuja de arriba hacia abajo conforme baja el usuario.
+
+- **Posicionamiento:** `position: absolute` sobre el flujo de la página, **no** `fixed` — el hilo pertenece al documento y se desplaza con él; una capa fija se leería como un adorno pegado a la ventana.
+
+- **Interfaz:** sin props obligatorias. Se monta una sola vez, en `app/page.tsx`, entre `<Header/>` y `<main>`.
+- **Depende de:** `framer-motion` (`useScroll`, `useTransform`), `usePrefersReducedMotion`.
+- **Reduced motion:** renderiza el trazo completo, estático, sin `motion.path`.
+- **Riesgo conocido:** `motion.path` aplica su propio andamiaje de `dasharray` incluso sin `initial`/`animate`, lo que dejó líneas invisibles para reduced-motion en `IlustracionInflexion`. La rama reducida debe renderizar `<path>` planos, no `motion.path` neutralizados. Es el mismo bug ya documentado en ese archivo.
+
+### 3.2 `SecuenciaClaridad` — la pieza central
+
+La metáfora del manual, por fin dibujada. Unas 20 líneas cruzadas y desordenadas que convergen progresivamente y se resuelven en el `≡` dorado.
+
+- **Interfaz:** `{ variant?: 'completa' | 'hero'; className?: string }` (por defecto `'completa'`).
+- **Dónde, y por qué en dos lugares:** la narrativa se parte en dos actos deliberadamente.
+  - **Hero** → `variant="hero"`: sólo las fases de dispersión y convergencia, **sin resolver** en el `≡`. Plantea la complejidad y deja la tensión abierta. Ocupa el lugar que hoy tiene el `Carrusel`.
+  - **`FraseAncla`** → `variant="completa"`: las tres fases, resolviendo en el `≡` dorado justo cuando el copy dice *"dejan de crecer por falta de claridad"*. Es el pago de la tensión abierta en el hero.
+- **Animación:** fases encadenadas por `staggerChildren` al entrar en viewport — dispersión → convergencia → (sólo en `completa`) resolución en `≡`.
+- **Nota de marca:** el `≡` que produce debe leerse como **E**, per instrucción de la dueña del 28/jul. Reutiliza el trazado de `SimboloTresLineas`, no dibuja uno nuevo.
+
+### 3.3 `IlustracionNudo`
+
+Líneas enredadas formando un nudo que no se deshace. `Dolores` es hoy la única sección sin ninguna pieza gráfica, y es la de mayor carga emocional.
+
+- **Dónde:** `Dolores`, como elemento lateral o de fondo tenue.
+- **Interfaz:** `{ className?: string }`.
+
+### 3.4 `IlustracionBifurcacion`
+
+Dos caminos divergiendo desde un punto único: uno dorado y continuo, otro gris y punteado.
+
+- **Dónde:** `ParaQuien`, reforzando el split screen sí/no que ya existe.
+- **Interfaz:** `{ className?: string }`.
+
+### 3.5 `IlustracionConvergencia`
+
+Tres trazos que confluyen en uno solo — comunicación, digital y experiencias sirviendo a una sola estrategia.
+
+- **Dónde:** `Disciplinas`. Refuerza el lead ya escrito: *"No son la promesa — son los medios."*
+- **Interfaz:** `{ className?: string }`.
+
+### 3.6 `MarcoRetrato`
+
+Marco line-art para el retrato de la estratega.
+
+- **Dónde:** `Estratega`, sustituyendo el placeholder de círculo con patrón de puntos.
+- **Requisito de diseño:** debe verse intencional **hoy**, con el placeholder dentro, y aceptar la foto real de la dueña cuando llegue **sin rehacer nada**. El hueco de contenido no debe verse como un hueco.
+- **Interfaz:** `{ children: ReactNode; className?: string }`.
+
+### 3.7 `ProgresoLectura`
+
+Barra dorada de 2px en el borde inferior del header, ligada a `useScroll`.
+
+- **Dónde:** `components/layout/Header.tsx`.
+- **Reduced motion:** se oculta por completo (es puro feedback de movimiento; estática no comunica nada).
+
+## 4. Cambios en secciones existentes
+
+### 4.1 Ritmo de fondos
+
+Hoy `Disciplinas → ParaQuien → Estratega` son tres secciones blancas seguidas.
+
+| Sección | Fondo hoy | Fondo nuevo |
+|---|---|---|
+| Hero | blanco | blanco |
+| FraseAncla | azul profundo | azul profundo |
+| PuntosInflexion | gris claro | gris claro |
+| Dolores | blanco | blanco |
+| Mecanismo | azul + foto | azul + foto |
+| Disciplinas | blanco | blanco |
+| ParaQuien | split blanco/azul | split blanco/azul |
+| **Estratega** | **blanco** | **gris claro** |
+| **ComoEmpezar** | **gris claro** | **blanco** |
+| Cierre | azul profundo | azul profundo |
+
+Dos cambios, cero fondos iguales consecutivos.
+
+### 4.2 Rebalanceo del movimiento
+
+**Se quita:**
+
+- **El `Carrusel` de dolores en el hero.** Rota verbatim las cuatro frases de `dolores.quotes`, que vuelven a aparecer completas tres secciones más abajo. Duplica contenido, adelanta el golpe emocional y le compite atención al headline. **Lo reemplaza `SecuenciaClaridad variant="hero"`** (§3.2) como pieza derecha del hero.
+- **El `useAutoStep` de `ComoEmpezar`.** Tener `Mecanismo` y `ComoEmpezar` avanzando solos es la misma interacción dos veces en la misma página. `Mecanismo` la conserva; `ComoEmpezar` pasa a estado estático con realce por hover/focus.
+- **El `md:opacity-40` sobre pasos no activos** (`Mecanismo` y `ComoEmpezar`). Hoy dos de cada tres pasos quedan ilegibles hasta que el usuario interactúa. Es un problema de contraste, no de estética. Se sustituye por un realce del paso activo (borde dorado, elevación) dejando los tres legibles.
+- **Uno de los dos `FondoPuntos interactivo` del hero.** Dos capas siguiendo el cursor a la vez es ruido; queda una.
+
+**Se conserva** el `Carrusel` en `PuntosInflexion` (móvil): ahí sí resuelve un problema real de espacio y replica el patrón de `en-ti.com`.
+
+**Se suma:**
+
+- `HiloConductor` con scroll (§3.1).
+- Line-drawing en las cinco ilustraciones nuevas.
+- Parallax suave (±20px) en las dos fotos duotono de `Mecanismo` y `ComoEmpezar`.
+- `ProgresoLectura` en el header, y compactado del wordmark al bajar.
+
+### 4.3 Jerarquía tipográfica
+
+Las ocho secciones usan hoy el mismo tratamiento exacto: `font-black text-4xl md:text-6xl tracking-tight`. Nada distingue una declaración de marca de un encabezado de sección.
+
+Se introducen dos niveles:
+
+- **Momento-ancla** — `FraseAncla`, el remate de `Dolores`, `Cierre`. Más grande, más aire arriba y abajo, `leading` más cerrado.
+- **Sección normal** — el resto. Un escalón por debajo, con más peso en el contenido que en el título.
+
+La escala vive en `tailwind.config.ts` como tokens, no como cadenas de clases repetidas en cada sección.
+
+## 5. Accesibilidad
+
+- Toda animación nueva pasa por `usePrefersReducedMotion()` + `motionProps(reduced)`, y las ilustraciones renderizan una rama estática con `<path>` planos (no `motion.path` neutralizados) cuando `reduced` es `true`.
+- Las ilustraciones son decorativas: `aria-hidden="true"` y `focusable="false"`.
+- Eliminar `md:opacity-40` **mejora** el contraste actual; ningún cambio lo empeora.
+- Los pasos de `Mecanismo` siguen siendo `role="tab"` navegables por teclado; `ComoEmpezar` deja de necesitar botones al perder el autoplay, y sus pasos vuelven a ser contenido estático.
+- El `focus-visible` dorado global de `app/globals.css` se mantiene; ningún componente nuevo redefine focus.
+
+## 6. Rendimiento
+
+- Todas las ilustraciones son SVG inline. Cero peticiones de red, cero imágenes nuevas.
+- Se anima únicamente `pathLength`, `opacity` y `transform` — propiedades compuestas, sin layout thrashing.
+- `HiloConductor` usa un solo `useScroll` a nivel de página, no uno por sección.
+- El hero pierde el `Carrusel` y una capa interactiva de puntos: **menos** JS ejecutándose en el LCP que hoy.
+
+## 7. Fuera de alcance
+
+- **No se toca el copy** de `lib/content.ts`.
+- **No se inventan casos ni métricas.** Los 2 casos de la dueña siguen pendientes.
+- **No se agrega escasez al hero.** El test negativo de `Hero.test.tsx` (`cupos|cohorte|generación fundadora`) sigue vivo.
+- **No se reordenan las secciones.** El orden actual cuenta bien la historia y la dueña lo aprobó el 30/jul.
+- **No se resuelve** la contradicción pendiente entre el manual y la espina del `≡` (documentada en `docs/dueña-directrices.md`). Eso lo decide la dueña.
+
+## 8. Huecos de contenido pendientes de la dueña
+
+Ambos se diseñan para verse intencionales hoy y aceptar el material real sin rehacer nada:
+
+| Hueco | Estado | Tratamiento |
+|---|---|---|
+| Retrato de la estratega | placeholder | `MarcoRetrato` (§3.6) |
+| 2 casos de claridad estratégica | no entregados | no se maqueta sección fantasma; se añadirá cuando llegue el material |
+
+## 9. Pruebas
+
+Cada primitiva nueva lleva test co-locado en `__tests__/`, siguiendo el patrón vigente — se verifica **contrato y marca, no estilos**:
+
+- Renderiza y es `aria-hidden`.
+- Rama de reduced motion produce trazos visibles (regresión directa del bug de `motion.path` documentado en `IlustracionInflexion`).
+- `SecuenciaClaridad` resuelve en el símbolo de `SimboloTresLineas`, no en un trazado propio.
+
+Los tests existentes de secciones deben seguir pasando sin cambios de copy. Los de `Hero` y `ComoEmpezar` requieren ajuste **estructural** por la salida del carrusel y del autoplay — no de copy.
+
+## 10. Criterios de éxito
+
+1. Un usuario que hace scroll percibe la página como **un recorrido continuo**, no como diez bloques apilados.
+2. La metáfora Complejidad → Enfoque → Claridad del manual es **visible**, no sólo textual.
+3. Hay **más movimiento percibido** y **menos elementos compitiendo** que hoy.
+4. Con `prefers-reduced-motion: reduce` la página se ve completa y legible, sin trazos invisibles.
+5. `pnpm test`, `pnpm lint` y `npx tsc --noEmit` pasan limpios.