chore: retira SimboloTresLineas y pasa los comentarios a inglés

SimboloTresLineas se quedó sin consumidores cuando SecuenciaClaridad
ocupó sus dos sitios (hero y FraseAncla). Sólo lo usaba su propio test.
La geometría del ≡ ya vive en lib/simbolo.ts, así que no se pierde nada.

Los cinco comentarios de código que quedaban en español pasan a inglés,
como pide CLAUDE.md. Los créditos de foto se quedan en español: son
atribución, y el footer que los recoge está en español.

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

components/primitives/SimboloTresLineas.tsx

@@ -1,42 +0,0 @@
-'use client';
-
-import { motion } from 'framer-motion';
-import { useEnVista } 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 = BARRAS_SIMBOLO;
-
-const BARS = [
-  { from: { x: 6, y: 9, width: 22, height: 6, opacity: 0.9 }, to: FINAL[0] },
-  { from: { x: 36, y: 15, width: 16, height: 5, opacity: 0.45 }, to: { x: 44, y: 17, width: 8, height: 5, opacity: 0 } },
-  { from: { x: 16, y: 25, width: 30, height: 7, opacity: 0.9 }, to: FINAL[1] },
-  { from: { x: 8, y: 37, width: 14, height: 5, opacity: 0.45 }, to: { x: 12, y: 39, width: 8, height: 5, opacity: 0 } },
-  { from: { x: 20, y: 45, width: 26, height: 6, opacity: 0.9 }, to: FINAL[2] },
-];
-
-export function SimboloTresLineas({ className = '' }: { className?: string }) {
-  const { ref, enVista, reduced } = useEnVista();
-
-  return (
-    <svg ref={ref} viewBox="0 0 64 64" className={className} aria-hidden="true" focusable="false">
-      {BARS.map((bar, i) =>
-        reduced ? (
-          <rect key={i} {...bar.to} opacity={i === 1 || i === 3 ? 0 : 1} rx={1.5} fill="currentColor" />
-        ) : (
-          <motion.rect
-            key={i}
-            rx={1.5}
-            fill="currentColor"
-            initial={bar.from}
-            animate={enVista ? bar.to : bar.from}
-            transition={{ duration: 0.7, delay: i * 0.08, ease: [0.22, 1, 0.36, 1] }}
-          />
-        ),
-      )}
-    </svg>
-  );
-}

components/primitives/__tests__/SimboloTresLineas.test.tsx

@@ -1,22 +0,0 @@
-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/sections/FraseAncla.tsx

@@ -14,8 +14,8 @@ export function FraseAncla() {
       <Container className="relative py-28 md:py-40 text-center max-w-5xl">
         <motion.div variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
           className="flex justify-center">
-          {/* El pago de la tensión abierta en el hero: aquí las líneas sí
-              resuelven en el ≡, justo cuando el copy nombra la claridad. */}
+          {/* Payoff for the tension the hero leaves open: here the lines do
+              resolve into the ≡, right as the copy names clarity. */}
           <SecuenciaClaridad className="pointer-events-none select-none w-28 md:w-36 text-dorado" />
         </motion.div>
         <motion.p

components/sections/Hero.tsx

@@ -49,8 +49,8 @@ export function Hero({ variant = 'editorial' }: { variant?: Variant }) {
               <CTA href="#mecanismo" label={hero.ctaSecundario} variant="ghost" className="md:whitespace-nowrap" />
             </motion.div>
           </motion.div>
-          {/* Complejidad → Enfoque, sin resolver: el hero plantea la tensión y
-              FraseAncla la paga resolviendo en el ≡. */}
+          {/* Complexity → focus, left unresolved: the hero poses the tension
+              and FraseAncla pays it off by resolving into the ≡. */}
           <motion.div variants={fadeInUp} initial="hidden" animate="visible" {...motionProps(reduced)}
             className="hidden lg:block min-w-0">
             <SecuenciaClaridad variant="hero" className="w-full max-w-md mx-auto text-azul-profundo" />

components/sections/Mecanismo.tsx

@@ -30,9 +30,9 @@ export function Mecanismo() {
         <motion.h2 variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
           className="mt-4 font-sans font-black text-seccion">{mecanismo.title}</motion.h2>
 
-        {/* Conector de pasos: avanza solo cada ~3s (se pausa con hover o si el
-            usuario elige un paso), y adelanta la línea de progreso — el mismo
-            lenguaje de "proceso conectado" de en-ti.com. */}
+        {/* Step connector: advances on its own every ~3s (paused on hover or
+            once the reader picks a step) and pulls the progress line along with
+            it — the same "connected process" language as en-ti.com. */}
         <div {...hoverProps} className="mt-14 hidden md:flex items-center" role="tablist" aria-label="Pasos del mecanismo">
           {mecanismo.steps.map((step, i) => (
             <div key={step.n} className="flex items-center flex-1 last:flex-none">

components/sections/ParaQuien.tsx

@@ -18,9 +18,9 @@ export function ParaQuien() {
           <IlustracionBifurcacion className="w-56 md:w-72 h-auto mx-auto" />
         </motion.div>
       </Container>
-      {/* Pantalla partida: luz contra oscuridad, para dramatizar la bifurcación
-          "sí es para ti / no es para ti" — sale del ancho del Container a
-          propósito, a todo lo ancho de la ventana. */}
+      {/* Split screen, light against dark, to dramatise the "this is for you /
+          this isn't" fork — deliberately breaking out of the Container's width
+          to run the full width of the window. */}
       <motion.div variants={staggerContainer} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
         className="grid md:grid-cols-2">
         <motion.div variants={fadeInUp} className="bg-white px-6 md:px-16 py-16 md:py-20 border-t-4 border-dorado">

components/sections/PuntosInflexion.tsx

@@ -40,7 +40,7 @@ export function PuntosInflexion() {
           </motion.div>
         </div>
 
-        {/* Carrusel táctil en móvil (contador "01 / 06", como en-ti.com); grid fijo desde md. */}
+        {/* Swipeable carousel on mobile ("01 / 06" counter, as on en-ti.com); fixed grid from md up. */}
         <div className="mt-12 md:hidden">
           <Carrusel
             ariaLabel="Los seis puntos de inflexión"

lib/simbolo.ts

@@ -1,7 +1,7 @@
-// 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.
+// Single source of truth for the ≡ glyph geometry. Everything that draws the
+// mark reads from here — HiloConductor and SecuenciaClaridad resolve into it,
+// the former with <rect>, the latter with <line> — so the symbol they produce
+// is provably the same one and not a lookalike.
 
 export const VIEWBOX_SIMBOLO = '0 0 64 64';