feat(disciplinas): la tarjeta y su hebra pasan a ser la misma cosa

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>

components/primitives/__tests__/IlustracionConvergencia.test.tsx

@@ -21,4 +21,29 @@ describe('<IlustracionConvergencia />', () => {
     expect(anchos.length).toBeGreaterThan(0);
     anchos.forEach((a) => expect(['1.5', '2', '3']).toContain(a));
   });
-});
+
+  it('lights one strand and dims the rest when a discipline is pointed at', () => {
+    const { container } = render(<IlustracionConvergencia activa={1} />);
+    const hebras = Array.from(container.querySelectorAll('[data-hebra]'));
+    expect(hebras).toHaveLength(3);
+    // The point of the highlight is the pairing: the reader has to be able to
+    // tell WHICH strand belongs to the card under the cursor. One gold, two
+    // faded — if all three stayed grey the drawing would still be decoration.
+    const doradas = hebras.filter((h) => (h.getAttribute('class') ?? '').includes('text-dorado'));
+    expect(doradas).toHaveLength(1);
+    expect(doradas[0].getAttribute('data-hebra')).toBe('1');
+    hebras
+      .filter((h) => h.getAttribute('data-hebra') !== '1')
+      .forEach((h) => expect(h.getAttribute('class') ?? '').toMatch(/text-gris-medio\/35/));
+  });
+
+  it('keeps the three strands equal when nothing is pointed at', () => {
+    const { container } = render(<IlustracionConvergencia />);
+    const hebras = Array.from(container.querySelectorAll('[data-hebra]'));
+    hebras.forEach((h) => {
+      const cls = h.getAttribute('class') ?? '';
+      expect(cls).toContain('text-gris-medio');
+      expect(cls).not.toContain('text-dorado');
+    });
+  });
+});