feat(recorrido): ParDialogo — la situación y la respuesta como un intercambio

Las dos voces se distinguen por tres cosas a la vez —etiqueta de quien
habla, columna y regla lateral—, nunca solo por color.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

components/primitives/__tests__/ParDialogo.test.tsx

@@ -0,0 +1,46 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { ParDialogo } from '../ParDialogo';
+
+const par = {
+  n: 1,
+  name: 'Crecer',
+  situacion: 'El siguiente salto no tiene mapa.',
+  respuesta: 'Me sumerjo hasta entender tu empresa desde dentro.',
+};
+
+describe('<ParDialogo />', () => {
+  it('renders both voices of the exchange', () => {
+    render(<ul><ParDialogo {...par} /></ul>);
+    expect(screen.getByText(/El siguiente salto no tiene mapa/)).toBeInTheDocument();
+    expect(screen.getByText(/Me sumerjo hasta entender tu empresa desde dentro/)).toBeInTheDocument();
+  });
+
+  it('attributes the answer to creeer, not to the reader', () => {
+    render(<ul><ParDialogo {...par} /></ul>);
+    // Without a speaker label the answer reads as more description of the
+    // problem. The wordmark is that label — and <Wordmark /> is the only thing
+    // allowed to draw cre≡er, never hand-typed in the JSX.
+    expect(screen.getByLabelText('creeer')).toBeInTheDocument();
+  });
+
+  it('labels the situation with its inflection point', () => {
+    render(<ul><ParDialogo {...par} /></ul>);
+    expect(screen.getByText(/01 · Crecer/)).toBeInTheDocument();
+  });
+
+  it('tells the two voices apart by more than colour', () => {
+    const { container } = render(<ul><ParDialogo {...par} /></ul>);
+    // A reader who cannot separate gold from navy still has the speaker label,
+    // the column, and the rule hanging off each block. Colour alone would fail
+    // the spec's accessibility criterion.
+    const bloques = container.querySelectorAll('li > div');
+    expect(bloques).toHaveLength(2);
+    bloques.forEach((b) => expect(b.className).toMatch(/border-l-2/));
+  });
+
+  it('is a list item, so the section can mount six of them as a list', () => {
+    render(<ul><ParDialogo {...par} /></ul>);
+    expect(screen.getAllByRole('listitem')).toHaveLength(1);
+  });
+});