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>
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>
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 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>
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>
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>
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>
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>
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.
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>
erikghandClaude Opus 5.5