feat(estratega): marco line-art listo para el retrato real

components/primitives/MarcoRetrato.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { motion } from 'framer-motion';
+import { usePrefersReducedMotion } from '@/lib/motion';
+
+// Line-art frame for the strategist's portrait. Built so it reads as
+// deliberate with today's placeholder inside and accepts the real photograph
+// when it arrives without any rework: the frame never assumes what it wraps.
+//
+// The gold arc traces roughly three quarters of the circle and draws itself in
+// — an open frame, not a closed badge.
+export function MarcoRetrato({ children, className = '' }: { children: ReactNode; className?: string }) {
+  const reduced = usePrefersReducedMotion();
+
+  return (
+    <div className={`relative w-44 h-44 md:w-64 md:h-64 shrink-0 ${className}`}>
+      <svg viewBox="0 0 100 100" className="absolute -inset-3 w-[calc(100%+1.5rem)] h-[calc(100%+1.5rem)] text-dorado" aria-hidden="true" focusable="false">
+        {reduced ? (
+          <circle
+            cx={50}
+            cy={50}
+            r={47}
+            fill="none"
+            stroke="currentColor"
+            strokeWidth={1.5}
+            strokeLinecap="round"
+            strokeDasharray="220 295"
+            transform="rotate(-120 50 50)"
+          />
+        ) : (
+          <motion.circle
+            cx={50}
+            cy={50}
+            r={47}
+            fill="none"
+            stroke="currentColor"
+            strokeWidth={1.5}
+            strokeLinecap="round"
+            strokeDasharray="220 295"
+            transform="rotate(-120 50 50)"
+            initial={{ pathLength: 0, opacity: 0 }}
+            whileInView={{ pathLength: 1, opacity: 1 }}
+            viewport={{ once: true, amount: 0.4 }}
+            transition={{ duration: 1.2, ease: [0.22, 1, 0.36, 1] }}
+          />
+        )}
+      </svg>
+      <div className="relative w-full h-full rounded-full overflow-hidden">{children}</div>
+    </div>
+  );
+}

components/primitives/__tests__/MarcoRetrato.test.tsx

@@ -0,0 +1,20 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { MarcoRetrato } from '../MarcoRetrato';
+
+describe('<MarcoRetrato />', () => {
+  it('renders whatever portrait it is given', () => {
+    render(<MarcoRetrato><span>retrato</span></MarcoRetrato>);
+    expect(screen.getByText('retrato')).toBeInTheDocument();
+  });
+
+  it('keeps the frame decorative: the portrait carries the meaning', () => {
+    const { container } = render(<MarcoRetrato><span>retrato</span></MarcoRetrato>);
+    expect(container.querySelector('svg')).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  it('draws the arc that will survive the real photograph landing', () => {
+    const { container } = render(<MarcoRetrato><span>retrato</span></MarcoRetrato>);
+    expect(container.querySelectorAll('circle').length).toBeGreaterThanOrEqual(1);
+  });
+});