El nudo, la bifurcación y la convergencia usaban 2.5 y 3.5 sueltos, así que
las tres se veían de pesos distintos puestas una al lado de otra.
Un test de contrato por ilustración exige ahora que todo trazo pertenezca a
{1.5, 2, 3}, de modo que la escala no se pueda romper en silencio más
adelante. SecuenciaClaridad queda fuera a propósito: resuelve en las barras
reales del ≡ y su grosor lo manda LINEAS_SIMBOLO.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
ComoEmpezar deja de rotar pasos: las tres anotaciones se leen de una, sin
botones ni opacidad. Mecanismo conserva su autoplay pero distingue el paso
activo por borde y elevación, no apagando los demás. Las dos fotos
(fondo del Mecanismo y panel del ComoEmpezar) reciben un parallax suave
ligado al scroll de página.
El test de autoplay que Comompezar tenía se retira: afirmaba el
comportamiento que este cambio borra, y choca con el test nuevo que pide
cero botones.
La ruta del 'no' se revela por opacidad (no por pathLength): el stroke
dasharray '1 8' sobrevive y el camino queda realmente punteado, en lugar
de que framer-motion lo pise con el dasharray que usa para dibujar el
trazo. El test afina la aserción al valor '1 8' para no contar la
inyección de pathLength en las dos rutas sólidas.
El hilo pintaba encima del texto en las secciones sin position:relative
(Dolores, Disciplinas, Estratega, ComoEmpezar) y detrás del texto en las
que sí la tienen, por el orden de pintado del navegador. Se mueve a la
banda vacía a la izquierda de la columna max-w-content (oculto bajo 2xl,
donde no hay margen seguro) y gana un z-index explícito por debajo del
header.
Cada línea resuelta tomaba el grosor de LINEAS_SIMBOLO[0] sin importar a
qué barra pertenecía; funcionaba por coincidencia porque las tres barras
del manual comparten height: 8. Se indexa ahora por DISPERSAS[i].barra, y
se agrega una prueba de regresión que fija el grosor de cada línea al de
su propia barra (derivado de LINEAS_SIMBOLO, no hardcodeado).
Dos secciones nuevas tomadas del deck de la dueña, verbatim y sin
reescribir: los 6 puntos de inflexión y los 4 dolores en primera persona.
El resto de las secciones incorpora la capa gráfica: fondos de puntos,
duotono sobre foto en Mecanismo y Cómo empezar, pantalla partida sí/no en
Para quién, y pasos conectados con línea de progreso.
Las fotos son CC BY-SA 4.0 y llevan crédito en el footer, como exige la
licencia al haberlas modificado.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
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>
El wordmark deja de depender del glifo tipográfico ≡ y pasa a un trazado
SVG propio (SimboloTresLineas), que es lo que permite cumplir la
instrucción de la dueña: que se lea como E, no como tres líneas sueltas.
Incluye las tres versiones del logotipo (principal, negativa, secundaria)
y alinea los tokens de color con el Manual de Identidad Visual v1.0.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Migra todo el sitio a la marca oficial aprobada por la dueña:
- Logotipo cre≡er (el símbolo ≡ reemplaza la 'e' central, en dorado)
- Paleta: Azul Profundo #0A1D5D + Dorado Estratégico #C4942E + Blanco + neutros
- Tipografía: Aptos (Inter como fallback web), fin del sistema híbrido Georgia/Inter
- Tagline 'CLARIDAD · DIRECCIÓN · CRECIMIENTO' + eslogan 'Estrategia que transforma.'
Componentes, tokens de Tailwind, lib/content.ts, docs (dueña-directrices + spec)
y tests actualizados. Typecheck, lint, 27/27 tests y build estática verdes.
Basado en docs/branding.jpeg (Manual v1.0, mayo 2026).
- Hero: subtle ink grid texture (radial-masked) + gold glow blob
- Hero kicker: small gold dot before the eyebrow
- Header: desktop anchor nav (Método/Disciplinas/La estratega) with
scroll-elevation shadow; mobile keeps wordmark + CTA only
- Sections gain ids + scroll-mt-24 as anchor targets
- CTA: subtle hover lift, gated with motion-reduce
Concepts studied from ~/dev/BenditaRed (grid+glow hero background,
kicker-with-dot, scrolled navbar state, pill hover lift). Animated
stats were skipped — no real metrics from the owner to show.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Disciplinas cards and Mecanismo/ComoEmpezar steps get a subtle lift +
border intensify on hover; the CTA arrow slides right. All gated with
motion-reduce so prefers-reduced-motion users see no movement.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
erikghandClaude Opus 5