Creeer-Web/docs/superpowers/specs/2026-07-31-coherencia-ilustraciones-hilo-design.md

# Coherencia de las ilustraciones + hilo conductor al centro

**Fecha:** 31/jul/2026
**Estado:** aprobado en brainstorming, pendiente de plan de implementación
**Origen:** petición de la dueña — *"que las imágenes tengan coherencia con el topic de la página, lo que es el marketing, todos los mensajes que vienen en todos los textos de la página y el branding… además de que el hilo sea en medio."*
**Continúa:** `docs/superpowers/specs/2026-07-31-hilo-conductor-sistema-visual-design.md` (cuyas primitivas ya están implementadas en la rama `feat/hilo-conductor-visual`).

---

## 1. Problema

Las ilustraciones de línea existen, pero **no cuentan una sola historia con la página**. Tres fallas concretas:

1. **Dos secciones dibujan lo mismo.** `IlustracionInflexion` (PuntosInflexión) y `IlustracionBifurcacion` (ParaQuien) son casi el mismo diagrama: una línea que crece, llega a un punto marcado, y se parte en un camino dorado (el bueno) y uno gris (el malo). Pero sus secciones dicen cosas distintas — PuntosInflexión enumera *seis contextos* de inflexión; ParaQuien plantea un *sí/no*-. Que ambas se ilustren igual diluye el mensaje de cada una.
2. **El hilo dorado no se ve.** `HiloConductor` está montado detrás de las secciones, que tienen fondos opacos (`bg-white`, `bg-azul-profundo`…), así que lo tapan por completo. La marca gira toda alrededor de **Complejidad → Enfoque → Claridad** y el `≡`, pero en la página no hay columna visual que una una sección con la siguiente. De ahí el pedido *"que el hilo sea en medio"*.
3. **El nudo de `Dolores` no apunta a la claridad.** El copy va del dolor a *"se resuelve con una estrategia clara"*, pero la ilustración es un nudo estático, desconectado del arco "hacia la claridad" y del hilo.

Y dos fallas de oficio que refuerzan la sensación de incoherencia:

4. **Lenguaje visual suelto.** Cada ilustración usa su propio viewbox (`64×64`, `100×100`, `190×140`, `220×120`, `320×180`) y sus propios grosores (`1.5`, `2`, `2.5`, `3`, `3.5`, `8`). No se leen como un set.
5. **Bug del punteado.** La "deriva" gris de `IlustracionInflexion` lleva `strokeDasharray="1 9"` pero se anima con `pathLength`, y framer-motion pisa ese dasharray con el suyo — por lo que hoy se renderiza sólida, no punteada. (Mismo bug ya corregido en `IlustracionBifurcacion`.)

## 2. Concepto rector: el hilo como columna vertebral

El hilo dorado se vuelve **visible** y baja por el **centro vertical** de toda la página. Cada ilustración se ancla al centro sobre él y es una **estación** del recorrido: el hilo "entra" y "sale" de cada dibujo. Las ilustraciones dejan de ser adornos sueltos y pasan a ser los momentos donde el hilo cobra forma.

Cada estación **encarna el mensaje de su sección** y, en conjunto, refuerzan la narrativa de marca (Complejidad → Enfoque → Claridad; claridad estratégica; el punto de inflexión). No es decoración: es *claridad · dirección · crecimiento* literalmente dibujado, como pide el Manual de Identidad Visual v1.0.

## 3. Decisiones por estación

Orden de la página (no se reordena). Se lista el estado nuevo de cada ilustración:

| Sección | Mensaje que debe expresar | Ilustración | Estado |
|---|---|---|---|
| Hero | "necesitas más claridad, no más esfuerzo" | `SecuenciaClaridad variant="hero"` | **Sin cambios** — 18 líneas cruzadas, *sin* resolver. |
| FraseAncla | "dejan de crecer por falta de claridad" | `SecuenciaClaridad variant="completa"` | **Sin cambios** — las líneas *sí* resuelven en el `≡`. Es el corazón de marca; queda perfecto. |
| PuntosInflexión | "llegas a un punto de inflexión" | `IlustracionInflexion` | **REHACER** — pasa a ser *una curva que se dobla* en el punto de inflexión marcado, **sin fork**. Cuenta el concepto de "punto de inflexión", deja de duplicar a ParaQuien. |
| Dolores | dolor → "se resuelve con una estrategia clara" | `IlustracionNudo` | **AJUSTAR** — el nudo se queda, pero el hilo dorado lo atraviesa (es lo que lo va a desatar). Conecta el dolor con la resolución. |
| Mecanismo | "cómo trabajo" (inmersión → desafiar → estrategia) | — (sin nueva ilustración) | El hilo pasa por la sección; su "dibujo" ya son los conectores de pasos. No sumar ruido. |
| Disciplinas | "son los medios, no la promesa" | `IlustracionConvergencia` | **Sin cambios** — 3 hebras → 1 estrategia dorada. |
| ParaQuien | "¿sí es para ti?" | `IlustracionBifurcacion` | **Sin cambios** — fork dorado/gris en el punto de decisión (ahora único). |
| Estratega | "sobre la estratega" | `MarcoRetrato` | **Sin cambios** — arco dorado, marco neutral. |
| ComoEmpezar / Cierre | — | — | El hilo los atraviesa; no llevan ilustración de línea. |

**Principio de la reutilización:** no se crean ilustraciones nuevas. Se rehace `IlustracionInflexion` y se ajusta el montaje de `IlustracionNudo`; el resto se queda. Esto mantiene el scope pequeño y centrado en *coherencia*, no en suma de piezas.

## 4. Lenguaje visual unificado

Para que las siete piezas se lean como un mismo set reflejando al `≡`:

- **Color por regla fija (no por gusto):**
  - `text-azul-profundo` = la base, el presente, el tronco.
  - `text-gris-medio` + trazo punteado = deriva, sin dirección, el camino que no.
  - `text-dorado` = la resolución, la claridad, la estrategia — **y es el color del hilo conductor**.
- **Escala de grosores fija:** base `2`, énfasis `3`, detalle fino `1.5`. Desaparecen los `2.5`/`3.5` (y el `8` suelto de las hebras del nudo). **Excepción intencional y documentada:** `SecuenciaClaridad` resuelve en las barras reales del `≡` (grosor de `LINEAS_SIMBOLO`), porque ahí *está* dibujando el símbolo de marca, no una ilustración.
- **ViewBox:** las escenas horizontales convergen a un mismo lienzo `0 0 220 120` (`IlustracionInflexion`, `IlustracionNudo` ya reentran; `Bifurcacion`/`Convergencia` ya lo usan). `SecuenciaClaridad` mantiene `0 0 64 64` (lienzo del `≡`) y `MarcoRetrato` mantiene `0 0 100 100` (marco circular) — son cajas conceptuales distintas y se explicita por qué.
- **Revelado:** todas siguen usando `useEnVista` + `pathLength` (dibujo al entrar al viewport). **Bug del punteado arreglado:** las rutas punteadas se revelan por *opacidad* (no por `pathLength`), igual que la corrección ya aplicada en `IlustracionBifurcacion`. Esto aplica a la deriva de la nueva `IlustracionInflexion` y, si aplica, al nudo.

## 5. El hilo conductor, visible al centro

Hoy invisible; debe verse bajando por el medio:

- **Posicionamiento:** sigue `position: absolute` dentro de `<main className="relative">` (no `fixed`), centrado horizontalmente (`left-1/2 -translate-x-1/2`). Ya está así; se conserva.
- **Capa:** renderizado **por encima de los fondos de sección** pero **por debajo del texto**. Así ya no lo tapan los `bg-*` opacos, pero tampoco cruza/compite con la lectura.
- **Tenuidad:** dorado a baja opacidad (`text-dorado/20`–`/30`) y `pointer-events-none`. Se lee como una marca de agua que cose, no como una línea que cruza el texto.
- **Dibujo al hacer scroll:** conserva el `pathLength` ligado al `useScroll` de página.
- **Anclaje de estaciones:** las ilustraciones con estación se alinean al centro de modo que el hilo entre y salga de cada dibujo. Cuando la ilustración viva hoy a un costado del título (`PuntosInflexión`, `Disciplinas`), se decide en el plan si se**re-centra** o si el **hilo se desvía suavemente para tocarla** — ambas son válidas; la segunda respeta más el layout actual.

**Riesgo de layout (a resolver en el plan):** que el hilo, al pasar por el centro, reste legibilidad a títulos anchos. Mitigaciones candidatas: (a) capa tenue tras el texto, como se describe; (b) el hilo sólo "asoma" en los huecos entre secciones y dentro de cada ilustración, y se oculta bajo el texto. El plan debe prototipar y elegir.

## 6. Alcance (qué cambia y qué no)

**Cambia:**
- `HiloConductor.tsx`: pasa a una capa visible al centro (z-index/orden de capas + opacidad).
- `IlustracionInflexion.tsx`: se rehace como curva de inflexión sin fork, en lienzo `220×120`, con grosores de la escala y la deriva revelándose por opacidad.
- `IlustracionNudo.tsx`: grosores unificados a la escala; montaje en `Dolores` para que el hilo lo atraviese.
- Ajustes menores de grosores en `IlustracionBifurcacion` y `IlustracionConvergencia` para entrar en la escala (`2`/`3`).
- Tests co-locados: se actualizan los contratos que cambien (p. ej. número de trazos de la nueva `Inflexion`) y se añade un test que afirme la regla de color/grosor si aporta valor.

**No se toca (restricciones heredadas del plan anterior y de `AGENTS.md`):**
- **El copy de `lib/content.ts`** — ninguna decisión de este spec edita texto.
- **El orden de las secciones** de `app/page.tsx`.
- **Las primitivas que no cambian** (`SecuenciaClaridad`, `MarcoRetrato`, `HiloConductor` en su mecánica de scroll).
- **Sin escasez** en el hero (sigue pasando el test negativo `cupos|cohorte|generación fundadora`).
- **Colores por token**, nunca hex suelto. Wordmark `cre≡er` siempre minúsculo y vía `<Wordmark/>`.

## 7. Verificación de aceptación

- Cada ilustración expresa el mensaje de su sección ( revisión manual contra la tabla del §3).
- `IlustracionInflexion` y `IlustracionBifurcacion` ya **no** dibujan lo mismo.
- El hilo dorado es **visible** bajando por el centro en `pnpm dev`, sin restar legibilidad a los títulos.
- La deriva gris de `Inflexion` se ve **punteada** en runtime.
- Las siete piezas comparten grosores (`2`/`3`/`1.5`) y la regla de color azul/gris/dorado.
- `pnpm test`, `pnpm lint`, `npx tsc --noEmit` y `pnpm build` en verde.
- Con `prefers-reduced-motion: reduce`: ninguna ilustración queda invisible, el hilo se ve estático, la página se lee completa.

## 8. Notas para quien implemente

- **No reabrir** las decisiones bloqueadas del `AGENTS.md` (paleta, wordmark, voz, "simple, directo, limpio").
- **Si el hilo al centro pelea con la legibilidad** y ninguna mitigación del §5 funciona, **parar y consultar**: "hilo visible al centro" es un pedido explícito de la dueña; no se abandona sin su visto bueno, pero tampoco se entrega a costa de la lectura.
- La contradicción abierta sobre si el `≡` lleva espina vertical (`docs/dueña-directrices.md`) **no se resuelve aquí**: las ilustraciones usan el símbolo tal como lo sirve `SimboloTresLineas`/`lib/simbolo.ts` hoy.