refactor(simbolo): extraer la geometría del ≡ a lib/simbolo.ts

components/primitives/SimboloTresLineas.tsx

@@ -3,16 +3,13 @@
 import { useRef, useState, useEffect } from 'react';
 import { motion } from 'framer-motion';
 import { usePrefersReducedMotion } from '@/lib/motion';
+import { BARRAS_SIMBOLO } from '@/lib/simbolo';
 
 // The manual's own description of the ≡ symbol, made literal: "las líneas van
 // de muchas/desordenadas (complejidad) a pocas/alineadas (claridad)". Five
 // uneven bars resolve, once in view, into the three clean aligned bars of the
 // official icon (see app/icon.svg) — decorative, one-shot, never loops.
-const FINAL = [
+const FINAL = BARRAS_SIMBOLO;
-  { x: 13, y: 13, width: 38, height: 8 },
-  { x: 13, y: 28, width: 38, height: 8 },
-  { x: 13, y: 43, width: 38, height: 8 },
-];
 
 const BARS = [
   { from: { x: 6, y: 9, width: 22, height: 6, opacity: 0.9 }, to: FINAL[0] },

components/primitives/__tests__/simbolo.test.ts

@@ -0,0 +1,19 @@
+import { describe, it, expect } from 'vitest';
+import { BARRAS_SIMBOLO, LINEAS_SIMBOLO } from '@/lib/simbolo';
+
+describe('geometría del ≡', () => {
+  it('define exactly the three bars of the mark', () => {
+    expect(BARRAS_SIMBOLO).toHaveLength(3);
+  });
+
+  it('keeps the three bars aligned and equal in width', () => {
+    const anchos = new Set(BARRAS_SIMBOLO.map((b) => b.width));
+    const izquierdas = new Set(BARRAS_SIMBOLO.map((b) => b.x));
+    expect(anchos.size).toBe(1);
+    expect(izquierdas.size).toBe(1);
+  });
+
+  it('derives stroke lines through each bar centre', () => {
+    expect(LINEAS_SIMBOLO.map((l) => l.y1)).toEqual([17, 32, 47]);
+  });
+});

lib/simbolo.ts

@@ -0,0 +1,22 @@
+// Single source of truth for the ≡ glyph geometry. Both SimboloTresLineas
+// (which draws it with <rect>) and SecuenciaClaridad (which resolves into it
+// with <line>) read from here, so the symbol they produce is provably the
+// same one and not a lookalike.
+
+export const VIEWBOX_SIMBOLO = '0 0 64 64';
+
+export const BARRAS_SIMBOLO = [
+  { x: 13, y: 13, width: 38, height: 8 },
+  { x: 13, y: 28, width: 38, height: 8 },
+  { x: 13, y: 43, width: 38, height: 8 },
+] as const;
+
+// Same three bars as strokes: a horizontal line through each bar's centre,
+// with the bar's height as stroke width.
+export const LINEAS_SIMBOLO = BARRAS_SIMBOLO.map((b) => ({
+  x1: b.x,
+  y1: b.y + b.height / 2,
+  x2: b.x + b.width,
+  y2: b.y + b.height / 2,
+  grosor: b.height,
+}));