refactor(motion): extraer useEnVista, compartido por las ilustraciones

components/primitives/SimboloTresLineas.tsx

@@ -1,8 +1,7 @@
 'use client';
 
-import { useRef, useState, useEffect } from 'react';
 import { motion } from 'framer-motion';
-import { usePrefersReducedMotion } from '@/lib/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
@@ -20,25 +19,7 @@ const BARS = [
 ];
 
 export function SimboloTresLineas({ className = '' }: { className?: string }) {
-  const reduced = usePrefersReducedMotion();
-  const ref = useRef<SVGSVGElement>(null);
-  const [inView, setInView] = useState(false);
-
-  useEffect(() => {
-    const el = ref.current;
-    if (!el || reduced) return;
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry.isIntersecting) {
-          setInView(true);
-          observer.unobserve(el);
-        }
-      },
-      { threshold: 0.4 },
-    );
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, [reduced]);
+  const { ref, enVista, reduced } = useEnVista();
 
   return (
     <svg ref={ref} viewBox="0 0 64 64" className={className} aria-hidden="true" focusable="false">
@@ -51,7 +32,7 @@ export function SimboloTresLineas({ className = '' }: { className?: string }) {
             rx={1.5}
             fill="currentColor"
             initial={bar.from}
-            animate={inView ? bar.to : bar.from}
+            animate={enVista ? bar.to : bar.from}
             transition={{ duration: 0.7, delay: i * 0.08, ease: [0.22, 1, 0.36, 1] }}
           />
         ),