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