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:

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.
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".
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:

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.
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 sere-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.

10 KiB Raw Blame History Unescape Escape