feat(identidad): logos SVG oficiales, wordmark trazado y tokens del manual

El wordmark deja de depender del glifo tipográfico ≡ y pasa a un trazado
SVG propio (SimboloTresLineas), que es lo que permite cumplir la
instrucción de la dueña: que se lea como E, no como tres líneas sueltas.

Incluye las tres versiones del logotipo (principal, negativa, secundaria)
y alinea los tokens de color con el Manual de Identidad Visual v1.0.

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

components/primitives/__tests__/CTA.test.tsx

@@ -11,4 +11,22 @@ describe('<CTA />', () => {
     render(<CTA href="#contacto" label="x" />);
     expect(screen.getByRole('link').getAttribute('href')).toBe('#contacto');
   });
+  it('renders the ghost variant outlined, so it reads as secondary', () => {
+    render(<CTA href="#mecanismo" label="Ver cómo trabajo" variant="ghost" />);
+    const classes = screen.getByRole('link').className.split(/\s+/);
+    expect(classes).toContain('border-azul-profundo');
+    expect(classes).not.toContain('bg-azul-profundo'); // sólo se rellena en hover
+    expect(classes).toContain('hover:bg-azul-profundo');
+  });
+  it('keeps every variant the same height', () => {
+    const { container } = render(
+      <>
+        <CTA href="#a" label="a" variant="light" />
+        <CTA href="#b" label="b" variant="ghost" />
+      </>,
+    );
+    const [light, ghost] = Array.from(container.querySelectorAll('a'));
+    expect(light.className).toContain('border-2');
+    expect(ghost.className).toContain('border-2');
+  });
 });

components/primitives/__tests__/SimboloTresLineas.test.tsx

@@ -0,0 +1,22 @@
+import { render } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { SimboloTresLineas } from '../SimboloTresLineas';
+
+describe('<SimboloTresLineas />', () => {
+  it('is decorative: hidden from assistive tech', () => {
+    const { container } = render(<SimboloTresLineas />);
+    expect(container.querySelector('svg')).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  it('renders five bars resolving toward the three-line symbol', () => {
+    const { container } = render(<SimboloTresLineas />);
+    expect(container.querySelectorAll('rect')).toHaveLength(5);
+  });
+
+  it('takes its colour from currentColor, like the other brand graphics', () => {
+    const { container } = render(<SimboloTresLineas />);
+    container.querySelectorAll('rect').forEach((rect) => {
+      expect(rect).toHaveAttribute('fill', 'currentColor');
+    });
+  });
+});

components/primitives/__tests__/Wordmark.test.tsx

@@ -3,20 +3,33 @@ import { describe, it, expect } from 'vitest';
 import { Wordmark } from '../Wordmark';
 
 describe('<Wordmark />', () => {
-  it('renders the wordmark in lowercase', () => {
+  it('exposes the brand name in lowercase as its accessible name', () => {
     render(<Wordmark />);
-    const text = screen.getByText(/cre/).closest('span')?.textContent;
-    expect(text?.toLowerCase()).toBe('cre≡er');
+    expect(screen.getByRole('img', { name: 'creeer' })).toBeInTheDocument();
   });
-  it('renders the accent "≡" symbol separately for dorado styling', () => {
+  it('renders the "≡" as three separate bars for dorado styling', () => {
     const { container } = render(<Wordmark />);
     const accent = container.querySelector('[data-accent="true"]');
     expect(accent).not.toBeNull();
-    expect(accent?.textContent).toBe('≡');
+    expect(accent?.classList.contains('fill-dorado')).toBe(true);
+    expect(accent?.querySelectorAll('rect')).toHaveLength(3);
   });
   it('never renders uppercase CREEER', () => {
-    const { container } = render(<Wordmark />);
+    const { container } = render(<Wordmark showTagline />);
     expect(container.textContent).not.toMatch(/CREEER/);
     expect(container.textContent).not.toMatch(/Creeer/);
+    expect(screen.getByRole('img').getAttribute('aria-label')).toMatch(/^creeer\b/);
+  });
+  it('renders the tagline pillars with dorado separators, justified to the mark', () => {
+    const { container } = render(<Wordmark showTagline />);
+    const tagline = container.querySelector('text');
+    expect(tagline?.textContent).toBe('CLARIDAD · DIRECCIÓN · CRECIMIENTO');
+    expect(tagline?.getAttribute('textLength')).toBe('1000');
+    expect(tagline?.querySelectorAll('.fill-dorado')).toHaveLength(2);
+  });
+  it('omits the tagline unless asked, and shortens the viewBox accordingly', () => {
+    const { container } = render(<Wordmark />);
+    expect(container.querySelector('text')).toBeNull();
+    expect(container.querySelector('svg')?.getAttribute('viewBox')).toBe('0 0 1000 153.14');
   });
 });