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