feat(dolores): cada frase se resuelve al llegar, palabra a palabra

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>

components/sections/__tests__/Dolores.test.tsx

@@ -5,9 +5,16 @@ import { dolores } from '@/lib/content';
 
 describe('<Dolores />', () => {
   it('renders the four pains verbatim, in the client\'s first person', () => {
-    render(<Dolores />);
+    const { container } = render(<Dolores />);
+    // The quotes resolve word by word, so each word is its own span and no
+    // single element holds the whole sentence as its own text — getByText
+    // would never find it. The blockquote's textContent is what the reader
+    // ends up with, and that is what has to be verbatim.
+    const citas = Array.from(container.querySelectorAll('blockquote')).map((b) =>
+      (b.textContent ?? '').replace(/\s+/g, ' '),
+    );
     for (const dolor of dolores.quotes) {
-      expect(screen.getAllByText(new RegExp(dolor.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))).length).toBeGreaterThan(0);
+      expect(citas.some((c) => c.includes(dolor))).toBe(true);
     }
   });