Primitivas y contenido del rediseño (escala tipográfica, Revelar,
MarcaSeccion, Seccion, Antetitulo, SimboloMarca, Resplandor, ClaridadHero,
sección Proceso de ocho etapas, lib/content.ts reestructurado en seis
secciones con alias para las viejas). Mecanismo y FormaTrabajar se retiran.
Encima, lo de esta sesión:
- recorrido: creeer vuelve a responder cada situación en vez de repetirla
(el alias apuntaba respuesta a situacion); respuestas en plural. Créditos
de las seis fotos de México.
- contacto: WhatsApp, email (con mailto:) y LinkedIn reales; iconos de las
redes en el cierre y el footer (IconoRed, trazos de Simple Icons, CC0).
- enlaces: lo externo abre en otra pestaña con noopener y aviso para
lectores de pantalla (lib/enlaces.ts); mailto y anclas se quedan.
- Proceso: las ocho tarjetas no aparecían nunca en móvil (amount 0.3 sobre
una lista de ~3000px); ahora cada una se revela sola. El ≡ de la 08 ya no
tapa un entregable, título equilibrado, etiqueta a 12px, sin elevar al
hover lo que no es clicable.
- Disciplinas: la frase «No son la promesa — son los medios» gana peso y
se agrupa con título e ilustración; sin cortes huérfanos en móvil.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Misma temática por fotograma, ahora en México: la Torre Mitikah con su
grúa (crecer), una oficina montada a prisa (consolidarse), piñas de agave
en Tequila (rentabilidad), el Distribuidor Vial San Antonio (simplificar),
las puertas de embarque de Cancún (expandirse) y el skyline de Monterrey
(portafolio). Todas de Wikimedia Commons, CC BY-SA 4.0, recortadas a
1600px y sin marcas ni personas identificables. Los créditos llegan con
lib/content.ts en el commit siguiente.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Fuera las directrices, los finalistas del hero, el branding en jpeg, los
specs y planes ya ejecutados o sustituidos, y la skill react-doctor.
CLAUDE.md pasa a docs/CLAUDE.md. Todo sigue en la historia de git.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
La página deja de hablar sobre la claridad y pasa a comportarse como el
entregable que creeer vende: un documento estratégico. Diez secciones a
seis, cinco roles tipográficos, navy exactamente dos veces, el ≡ como
mobiliario del documento en vez de como ilustración, y un solo gesto de
movimiento montado al revés del actual — sin JS la página se lee entera.
Conserva la paleta, el wordmark y Open Sans por decisión del usuario.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Nueva sección FormaTrabajar con 5 tarjetas: Metodología, Quién participa,
De dónde partimos, Qué te llevas y Duración. Inspirada en la estructura
de en-ti.com, adaptada a la identidad creeer.
- Nuevo componente FormaTrabajar.tsx (grid de tarjetas con TarjetaSpotlight)
- Nuevo ícono 'reloj' en Icono.tsx
- Contenido en lib/content.ts (copy derivado de fuentes aprobadas)
- Insertada entre Mecanismo y Disciplinas en page.tsx
Con el recorrido en segundo lugar, esa franja clara quedaba como una
lasca entre el azul del hero y el escenario oscuro. Se va: la sección
arranca directamente en la secuencia anclada, y su fondo pasa a azul para
que cualquier costura sea oscura.
Quitarla dejaba la sección sin ningún encabezado, que en una pieza de
5.400px es un agujero en el esquema del documento — para un lector de
pantalla las seis parejas colgarían de nada. El rótulo «¿Te reconoces?»,
que ya estaba en el escenario, pasa a ser el <h2>. Hay una prueba que
exige que exista y que sea h2.
Actualizado también el comentario de orden en page.tsx, que describía una
disposición que ya no es la del archivo.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Prometí en la vista previa que entrarían «de una en una al bajar» y lo
que monté las traía a las cuatro a la vez: un stagger de contenedor se
dispara con la sección al 30% en pantalla, y la sección mide 1.200px, así
que el lector veía aparecer todas las frases mucho antes de llegar a
ellas.
Ahora cada cita usa TextoDesenfoque, que lleva su propio observador: cada
una espera su turno y entonces se resuelve desde un desenfoque, palabra a
palabra. Es el dolor entrando en foco, y es el mismo recurso que ya usan
el hero y la frase ancla — vocabulario del proyecto, no un invento nuevo.
Verificado midiendo la opacidad de la palabra animada de cada cita: al
asomar la sección, las dos primeras están resueltas y las dos últimas a
cero; a media sección, las cuatro. Antes de corregir el selector medía el
span envoltorio y daba unos en todas, que no significaba nada.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Wordmark en negativo, CTA en dorado y borde inferior en blanco al 10%.
Con el hero en azul, una barra blanca encima partía la apertura en dos;
ahora la parte de arriba de la página es un bloque.
Sobre las secciones claras de más abajo deja de leerse como cromo del
navegador y pasa a leerse como la barra de la marca, con el dorado del
CTA sosteniendo el contraste sobre cualquiera de los tres fondos.
Verificado sobre los tres: el hero azul, una sección blanca y el
escenario fotográfico del recorrido.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Fondo azul, wordmark en negativo con el ≡ dorado, titular en blanco
manteniendo «más esfuerzo» y el subrayado de «más claridad» en dorado,
la secuencia de líneas al 70% de blanco y el campo de puntos invertido.
CTA gana una variante `ghostDark`. Los nombres de las variantes dicen
sobre qué fondo se apoya el botón, no de qué color es: `light` y `ghost`
son para secciones claras, `dark` y `ghostDark` para azul profundo.
Dejar el hero con `light` habría pintado azul sobre azul.
El header no se toca: ya flota como barra blanca sobre FraseAncla,
Mecanismo y Cierre, así que sobre el hero hace lo que ya hacía en media
página.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
El rótulo en bucle era idea mía y era peor que las tarjetas que sustituía.
Medido contra el tono bloqueado de la marca —«seguridad + cercanía»,
«simple, directo, limpio»— un marquee es lo contrario de los tres:
arrastra la asociación con banner de rebajas y teletipo. Y cortaba cada
frase por los dos bordes, así que ninguna llegaba entera.
Ahora entran de una en una al bajar y se quedan. El peso lo da el montón,
no el recorrido: cada una cae con una sangría distinta —irregular a
propósito, una regular se lee como lista y una irregular como cuatro
voces en la misma habitación— y al llegar la cuarta el lector las ve
todas juntas. Debajo, el remate alineado a la izquierda y quieto.
Se acabó la duplicación: el bucle necesitaba pintar cada frase cuatro
veces y esconder tres de los lectores de pantalla. Una frase, una vez.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
El recorrido dejó de ser una lista de seis puntos: ahora contesta cada
uno con la voz de creeer, seis veces, a lo largo de seis pantallas. En la
posición 3 eso significaba entregar la solución entera antes de que
Dolores hubiera dado un motivo para que importara, y antes de que
Mecanismo explicara el método. El dolor llegaba después de la respuesta.
Dolores pasa delante: corto, en primera persona. El recorrido lo contesta
punto por punto. Mecanismo, detrás, deja de sonar a repetición y pasa a
leerse como el método que hay detrás de las respuestas que el lector
acaba de oír — y continúa el azul de creeer desde el último fotograma de
la secuencia, sin corte.
El recorrido arranca ahora a 2.453px: el lector llega con gancho, tesis y
dolor ya puestos.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Medido sobre el export estático: la página pedía 2.067 kB antes de que el
visitante moviera un dedo, y 1.243 de ellos eran las seis fotografías del
recorrido. `loading="lazy"` no salvaba nada, porque el umbral de distancia
de Chrome se traga una sección que empieza por debajo de los 2.000px.
Ahora la escena solo monta su fotografía cuando el escenario está a menos
de pantalla y cuarto, y solo la de la escena activa y sus vecinas. La
siguiente entra en el documento una escena antes de hacer falta, que da
tiempo de sobra a llegar.
Carga inicial: 2.067 kB → 821 kB, con cero imágenes del recorrido. El
resto llega repartido según avanzas. Verificado escena por escena en el
export: 2 o 3 imágenes montadas a la vez, todas cargadas.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
El escenario anclado arranca justo donde termina el Container de la
cabecera, y ese Container solo llevaba padding arriba. El fondo oscuro
empezaba a tres píxeles de la última línea del titular, así que la
entrada a la sección se leía como una franja clara estrujada entre dos
bloques oscuros en vez de como su apertura.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
El dibujo de convergencia llevaba desde el principio al lado de las tres
tarjetas sin relación con ellas: tres objetos sueltos en una página. Al
señalar una disciplina, su hebra se enciende en dorado y engorda, y las
otras dos se apagan al 35%.
Es mejora solo con puntero, y a propósito: no esconde nada. Las tres
tarjetas y las tres hebras están completas sin tocar el ratón, así que
quien no lo tenga no pierde nada.
Verificado en navegador, no solo en jsdom: al señalar «Digital» la hebra
central queda en rgb(196,148,46) —el dorado de marca— a 3,5px, y las
otras en rgba(170,170,170,0.35) a 2px.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Eran cuatro tarjetas alineadas describiendo desorden — lo contrario de lo
que dicen. Ahora cruzan la sección en dos filas lentas y en direcciones
opuestas, a sangre, mientras el remate en dorado no se mueve. Ese
contraste es el argumento de la sección.
Siguen legibles a propósito. Bajarlas a un susurro habría dado mejor
textura y habría tirado a la basura la voz del cliente: son palabras
suyas, verbatim de la diapositiva 3. El murmullo lo hace el movimiento.
Cada frase se pinta cuatro veces —dos por fila para que el bucle no tenga
costura, y dos filas— pero solo una llega a los lectores de pantalla. Sin
eso recitarían la lista entera de dolores y luego la recitarían otra vez.
Hay una prueba que lo exige.
Con prefers-reduced-motion no hay rótulo: las cuatro frases se leen
quietas a dos columnas.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Las dos secciones de pasos toman prestado el recurso del recorrido: la
cifra enorme y casi transparente. En Mecanismo sigue al paso activo del
autoplay, así que la sección respira sin pedirle atención a nadie. En
ComoEmpezar el numeral pequeño en dorado crece y se apaga, y el acento
dorado se queda en el icono, para que no compitan dos marcadores.
El objetivo no es añadir efectos: es que el recorrido no parezca de otra
página. Mismo lenguaje, distinto contenido.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Cinco de las seis imágenes cambian a un registro corporativo, cada una
atada a lo que dice su fotograma: un distrito financiero todavía en obra
para «el siguiente salto no tiene mapa»; una sala de reuniones vacía para
ordenar antes de escalar; una pantalla de bolsa demasiado densa para
leerse, para la operación más compleja que el negocio; un panel de
salidas para los mercados a los que aún no has volado; y un skyline de
torres para los frentes abiertos.
La cosechadora se queda en rentabilidad: Commons no tiene nada de
registro empresarial y libre de marcas para «tu esfuerzo dejó de
traducirse en resultado», y la cosecha sigue siendo la mejor metáfora
disponible de esfuerzo convertido en resultado.
Descartadas por riesgo, no por estética: el parqué del NYSE (marca
enorme, banderas y gente identificable) y el panel de Ginebra sin
recortar (rótulo de Rolex). El panel va recortado.
Contraste verificado sobre página hidratada: peor punto 7,34:1.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
El fotograma de la pregunta pasa de velo claro a negro al 66%, y su
titular de azul profundo a blanco. La respuesta conserva el azul de
marca, así que las dos mitades siguen distinguiéndose —negro neutro
frente a azul— además de por quién habla.
Con ellas se van al blanco la cifra de fondo y los puntos del patrón, que
sobre negro eran invisibles.
Contraste medido sobre página verificada como hidratada: el peor punto de
los ocho fotogramas es 7,23:1, por encima del 7:1 de AAA incluso para
texto normal. Al 58% bajaba a 5,33:1 —válido para titular, escaso— y de
ahí el 66%.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
El velo claro baja de 0,90 a 0,72 y el azul de 0,93 a 0,80. La carretera,
los andamios y el trigo pasan de insinuarse a leerse, sin que la foto
llegue nunca a mandar sobre el color de marca.
Medido, no estimado: ocultando el texto y fotografiando solo el fondo que
queda detrás de cada titular, el peor contraste de los ocho fotogramas es
7,62:1 — por encima del 7:1 que pide AAA incluso para texto normal, y
este es de titular. A 0,66/0,76 bajaba a 6,32:1, que sigue siendo válido
para texto grande pero deja poco margen; de ahí el punto intermedio.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Cada punto de inflexión trae su imagen de fondo, relacionada con lo que
plantea: una carretera de montaña sin final visible para «el siguiente
salto no tiene mapa», un edificio a medio construir, la cosecha —el
esfuerzo convertido en resultado—, cables cruzando el cielo, un puerto de
contenedores, una ciudad entera a la vez.
Pasan por FondoFoto, que las funde en luminosidad sobre el degradado azul
→ dorado: ninguna aporta color propio. Encima, el velo claro sostiene la
pregunta en azul y el velo azul se lleva el fotograma entero para la
respuesta. La foto da grano, nunca manda.
Todas de Wikimedia Commons con licencia de reuso, acreditadas en
creditosFotos. Descarté la del enredo de cables sobre una calle: bajo el
velo seguía leyéndose el rótulo de un bar ajeno.
El test del footer fijaba dos créditos a mano; ahora cuenta contra la
propia lista, que es el único sitio donde se hace cumplir la atribución.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Firmar debajo dejaba la respuesta sonando a voz de la propia página hasta
la última línea. Ahora cre≡er va delante de la frase y a tamaño lg (260px
en escritorio): antes de leer, ya sabes quién contesta.
md eran 87px —la escala del logotipo compuesto, más pequeña que el propio
texto de la respuesta— y se leía como pie de foto.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Fuera tarjetas: la situación va a tamaño de titular sobre el fondo claro,
y al bajar el escenario entero se vuelve azul profundo para la respuesta
de creeer, en blanco y del mismo tamaño. No es una tarjeta sobre la
página del lector, es el terreno de creeer.
El rótulo del punto se repite en la respuesta a propósito: como solo hay
una cosa en pantalla, es lo único que la ata a la pregunta que contesta.
El test lo fija con esa razón escrita.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
La pregunta y la respuesta compartían fotograma: la tarjeta de creeer
entraba debajo de la del lector y se veían las dos a la vez. El flujo que
pidió la dueña es pregunta → scroll → respuesta → scroll → pregunta, con
una sola cosa en pantalla cada vez.
Las dos tarjetas pasan a ocupar la misma celda de la rejilla, así que la
segunda toma el escenario que deja la primera en vez de apilarse bajo
ella, y entran desde márgenes opuestos para que el cambio se lea como un
relevo. Verificado tiempo a tiempo: los doce muestran exactamente una.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Las tarjetas iban atadas a la posición del scroll, así que cualquier
punto intermedio era un fotograma válido: parando a media rueda, la
tarjeta de creeer se quedaba como una losa gris translúcida y parecía un
fallo de render.
Ahora el scroll solo elige el tiempo —doce: pregunta, respuesta,
pregunta…— y las tarjetas animan hacia ese tiempo por duración. Pares
donde pares, aterrizan. Verificado en 41 paradas repartidas por la
sección: cero opacidades a medias.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
La sección se ancla una pantalla y avanza con el scroll: llega la
tarjeta de la pregunta, se te devuelve la de creeer, y al seguir bajando
entra la siguiente. Cifra fantasma, raíl de posición y barra de avance
para saber dónde estás. Con prefers-reduced-motion no hay anclaje ni
escenas: las seis parejas se leen seguidas.
Dos fallos corregidos en el camino:
- las escenas se cruzaban superpuestas y quedaban ilegibles las dos;
entrada y salida ya no se solapan.
- el rótulo se posicionaba con left-0 dentro de Container, que resuelve
contra la caja de padding e ignora su px-6; en móvil cortaba la
primera letra.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Cada respuesta llega cuando su par alcanza el centro de la pantalla: la
regla dorada se dibuja y el bloque entra. El estado solo avanza, así que
nada se apaga por detrás del lector. El scroll no es el único mando —
hover y foco de teclado llevan al mismo sitio.
Corrige un fallo que las pruebas no podían ver: Framer resuelve la
variante escribiendo `opacity: 1` en el style inline, que gana a la clase
opacity-0 de Tailwind. El revelado no ocurría; solo se animaba la regla,
que es un transform que Framer no toca. La entrada y el revelado viven
ahora en elementos distintos, con una prueba que lo fija.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
PuntosInflexion era el único que lo montaba. Se va también la referencia
que le quedaba colgando en el comentario de useAutoStep.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Cada punto de inflexión enuncia ahora la situación en segunda persona y
creeer responde qué hace al respecto. 01 y 05 son los dos intercambios
que la dueña improvisó en la llamada del 31/jul, redactados.
El test de segunda persona cazó cuatro situaciones impersonales que yo
había escrito ("El esfuerzo dejó de traducirse en resultado" no
interpela a nadie). Se corrigió el copy, no el test.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Las dos voces se distinguen por tres cosas a la vez —etiqueta de quien
habla, columna y regla lateral—, nunca solo por color.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Sale de la llamada del 31/jul: "te va contestando y te va como llevando
de uno a otro". Los seis puntos de inflexión dejan de ser tarjetas mudas
y pasan a ser una conversación.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
La dueña pidió quitarlo. Con él se van las dos cosas que solo existían
para sostenerlo: el `relative` de <main> —ninguna sección lo necesita,
todas son relative por su cuenta salvo Disciplinas, que no tiene hijos
absolutos— y el export RADIO_BARRA, sin consumidores.
BARRAS_SIMBOLO se queda como forma canónica del ≡ aunque ya nadie dibuje
las barras: LINEAS_SIMBOLO se deriva de ella y el test que obliga a las
dos representaciones a coincidir es lo que mantiene honesta la geometría
frente al Manual.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Revisada la página con Chromium a 1440x900 y 390x844 en nueve alturas de
scroll, y verificado cada cambio contra capturas nuevas.
- El ≡ deja de leerse como icono de menú. lib/simbolo.ts se anunciaba como
single source of truth pero no coincidía con Wordmark.tsx, que traza la
marca con las proporciones medidas del Manual: barra de largo 5.919× su
grosor, hueco de 2×, extremos de píldora. Ahora se derivan de ahí. De
paso, las líneas se meten medio grosor por cada extremo: el remate
redondo alargaba el trazo un grosor entero sobre la barra que debía
reproducir.
- Banda: 12px en escritorio y 7px en móvil vía CSS (14px era el 3,6% de
una pantalla de 390px y partía los párrafos), opacidad al 18%, y muelle
de 90/30 a 210/40 — sobreamortiguado tardaba ~2s en asentar y la punta
se arrastraba a media pantalla. El punto suelto que aparecía centrado
arriba al cargar era el remate redondo pintándose en el origen con
longitud cero: ahora la opacidad sigue al avance.
- Ritmo vertical un 25-30% más apretado en las diez secciones. La página
pasa de 8.061 a 7.457px sin tocar contenido.
- Números 01-06: de marca de agua de 48px al 6% (que chocaba con títulos
y reglas) a índice dorado sentado sobre la regla.
- Hero: los dos CTA al mismo ancho en móvil, el patrón de puntos fuera
del logotipo, y la secuencia visible en todos los tamaños — oculta bajo
lg dejaba el hero del móvil sin ninguna pieza gráfica. La convergencia
de la variante "hero" se cierra más para que se lea como líneas
buscando su eje y no como un garabato tachado.
- Estratega: fuera la retícula de puntos del retrato, que parecía el
recuadro de imagen rota del navegador; la etiqueta del 30+ cabía en
menos de lo que mide "construyendo" y salía en tres líneas.
- El nudo de Dolores, más pequeño y con algo más de contraste.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Un <svg> con viewBox es un elemento reemplazado con proporción intrínseca
(100:1200). Al dimensionarlo con top-0 + bottom-20 y dejar la altura en
auto, el navegador la resolvía desde el ancho — 1152 × 12 = 13.824px — y
esa altura ganaba silenciosamente a `bottom`.
Consecuencias, todas visibles en el navegador y ninguna en los tests:
- 5.840px de blanco vacío scrolleable por debajo del footer.
- scrollYProgress repartido sobre 13.901px en vez de 8.061, así que el
trazo nunca terminaba sobre contenido real.
- la onda estirada 1,8x de más, otra vez casi recta.
Altura explícita con h-[calc(100%-5rem)], y test que lo fija: jsdom no
hace layout, así que el guardián es la clase.
El trazo pasa a completarse a mitad de scroll (FIN 0.85 → 0.5). Con 0.85
la punta se quedaba a media pantalla durante el 42% de la página, que es
justo lo que se leía como "sin terminar".
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Sólo comprobaba que hubiera algún svg, así que seguía en verde aunque
SecuenciaClaridad desapareciera del hero: los campos de puntos bastaban.
Ahora exige las líneas de la secuencia (18, y ninguna viene de otra
parte — FondoPuntos dibuja círculos) y que ninguna lleve data-resolucion:
el hero plantea la tensión, resolverla es cosa de FraseAncla.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
SimboloTresLineas se quedó sin consumidores cuando SecuenciaClaridad
ocupó sus dos sitios (hero y FraseAncla). Sólo lo usaba su propio test.
La geometría del ≡ ya vive en lib/simbolo.ts, así que no se pierde nada.
Los cinco comentarios de código que quedaban en español pasan a inglés,
como pide CLAUDE.md. Los créditos de foto se quedan en español: son
atribución, y el footer que los recoge está en español.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
El grosor nunca se decidió: la primera versión ocupaba toda la columna,
así que el viewBox se estiraba por 11.5 y un strokeWidth de 1.5 se
pintaba a ~17px reales. Al mudar el hilo a una banda de 56px el mismo
valor quedó en 0.84px, y con eso dejó de leerse.
- Grosor fijado en 14px reales con non-scaling-stroke, ya no heredado
del escalado del viewBox.
- Banda de vuelta a toda la columna: ±184px de recorrido lateral.
- Cuatro ondulaciones largas en vez de una sola (que se aplanaba) o
diez cortas (que se leían inquietas).
- El trazo termina al 85% del scroll: colgado del scroll de página sólo
llegaba al 100% pasado el footer, así que el final no se veía nunca.
- Remata en el ≡ del wordmark, con la geometría de lib/simbolo.ts. Es
lo que pedía el spec y era lo que faltaba.
Test nuevo que exige stroke-width >= 10: el grosor ya se había perdido
dos veces por accidente.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
El nudo vivía arriba a la derecha, donde el hilo conductor no lo tocaba.
Centrado, el hilo lo atraviesa: el dolor cosido por lo mismo que lo va a
desatar, y el remate "se resuelve con una estrategia clara" queda justo
debajo.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
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).
El scan previo a la ejecución encontró que el plan mandaba repetir el
bloque del IntersectionObserver en las cuatro ilustraciones nuevas, sobre
las dos copias que ya existen. Se añade la Task 1b, que lo extrae a un
hook y migra las dos existentes.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Cada tarea trae test primero, código completo y commit propio.
En el self-review salieron tres cosas que se corrigieron en el plan: el
spread de las líneas dispersas mandaba `barra` al DOM como atributo SVG
inválido; el paso de parallax decía "mismo tratamiento para Mecanismo" en
vez de mostrar el código (FondoFoto no acepta style, necesita envoltorio);
y el compactado del header que pide el spec no tenía tarea asignada.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
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>
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>
Incorpora los mensajes verbatim del 28–30/jul (tipografía Open Sans, el ≡
que debe leerse como E, "claridad estratégica" como oferta, estructura de
en-ti.com) y el material del deck "Rumbo Estratégico": los 6 puntos de
inflexión y los 4 dolores en primera persona.
Corrige Azul Profundo a #0A1D3D según el manual, y añade CLAUDE.md.
Quedan abiertas dos preguntas para la dueña, anotadas en el doc: si el ≡
lleva espina vertical, y si la "Generación Fundadora" puede vivir fuera
del hero.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
settings.local.json es configuración por máquina; .claude/skills/ sí se
comparte porque react-doctor es parte del flujo del proyecto.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Aptos descartada para web: su EULA (Microsoft) prohíbe distribuirla o
servirla públicamente. Open Sans (OFL) es la open-source más cercana —
comparte diseñador con Aptos (Steve Matteson). Cargada vía next/font/google,
autoalojada en el build estático (cero requests externos en runtime).
- app/layout.tsx: Inter → Open_Sans (pesos 400/600/700/800 + itálicas)
- tailwind.config.ts: sans → var(--font-open-sans); token 'narrow' eliminado
- app/globals.css: body font-family
- docs (AGENTS, dueña-directrices, spec): Open Sans documentado,
decisión registrada (28/jul/2026)
Typecheck, lint, 27/27 tests y build verdes.
Reemplaza el favicon viejo (e. en navy+gold-bright, Georgia) por el símbolo
≡ (tres líneas) en Dorado #C4942E sobre Azul Profundo #0A1D5D, según la
versión 'Ícono' del Manual de Identidad Visual v1.0.
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>
Replaces the default Next favicon.ico and the solid-navy og-image
placeholder. All generated from the brand tokens (ink bg, gold-bright
accents, Georgia italic):
- app/icon.svg — vector favicon "e." for modern browsers
- app/favicon.ico — 48/32/16 raster fallback
- app/apple-icon.png — 180x180 apple-touch-icon (auto-linked by Next)
- public/og-image.png — 1200x630 wordmark + tagline for link previews
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>
'Estrategia ejecutable' appeared verbatim as step 03 in both Mecanismo
(her method) and ComoEmpezar (client on-ramp), reading repetitive on
scroll. Mecanismo keeps the term; the on-ramp now names the client
outcome.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Last leftover npm reference after the pnpm migration (3f0a15e);
README.md was already migrated. Also states pnpm as the required
package manager.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Expands app/layout.tsx metadata (openGraph, twitter, canonical),
adds ProfessionalService JSON-LD to app/page.tsx, focus-visible
styles in globals.css, robots.txt/sitemap.xml, and a placeholder
og-image.png (navy background, no wordmark text — needs a real
design asset before launch).
Also adds .eslintrc.json (next/core-web-vitals) so next lint runs
non-interactively, and decouples ESLint from next build via
next.config.mjs (eslint.ignoreDuringBuilds) so a pre-existing,
out-of-scope lint issue in Cierre.tsx doesn't block the static
export.
erikghandClaude Opus 5.5