From 532ce55558f609c2a23adeed3af6e7890daa992c Mon Sep 17 00:00:00 2001
From: erikgh <erikguzh@outlook.es>
Date: Tue, 21 Jul 2026 11:13:38 -0600
Subject: [PATCH] =?UTF-8?q?feat:=20Estratega=20section=20(06)=20=E2=80=94?=
 =?UTF-8?q?=20portrait=20+=20bio=20+=20quote?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 app/page.tsx                                  |  2 ++
 components/sections/Estratega.tsx             | 32 +++++++++++++++++++
 .../sections/__tests__/Estratega.test.tsx     | 14 ++++++++
 3 files changed, 48 insertions(+)
 create mode 100644 components/sections/Estratega.tsx
 create mode 100644 components/sections/__tests__/Estratega.test.tsx

diff --git a/app/page.tsx b/app/page.tsx
index c2b01f5..bc6722f 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -3,6 +3,7 @@ import { FraseAncla } from '@/components/sections/FraseAncla';
 import { ParaQuien } from '@/components/sections/ParaQuien';
 import { Mecanismo } from '@/components/sections/Mecanismo';
 import { Disciplinas } from '@/components/sections/Disciplinas';
+import { Estratega } from '@/components/sections/Estratega';
 
 export default function Home() {
   return (
@@ -12,6 +13,7 @@ export default function Home() {
       <ParaQuien />
       <Mecanismo />
       <Disciplinas />
+      <Estratega />
     </main>
   );
 }
diff --git a/components/sections/Estratega.tsx b/components/sections/Estratega.tsx
new file mode 100644
index 0000000..667339b
--- /dev/null
+++ b/components/sections/Estratega.tsx
@@ -0,0 +1,32 @@
+'use client';
+import { motion } from 'framer-motion';
+import { Container } from '@/components/primitives/Container';
+import { estratega } from '@/lib/content';
+import { fadeInUp, staggerContainer, viewportOnce } from '@/lib/motion';
+
+export function Estratega() {
+  return (
+    <section className="bg-base">
+      <Container className="py-24 md:py-32">
+        <motion.div variants={staggerContainer} initial="hidden" whileInView="visible" viewport={viewportOnce}
+          className="grid gap-12 md:grid-cols-[auto_1fr] md:items-center">
+          {/* Portrait — placeholder gradient until dueña provides a photo */}
+          <motion.div variants={fadeInUp}
+            className="w-40 h-40 md:w-56 md:h-56 rounded-full flex-shrink-0"
+            style={{ background: 'linear-gradient(135deg, #0A1F44 0%, #B8901f 100%)' }}
+            aria-label="Retrato de la estratega"
+            role="img"
+          />
+          <div>
+            <motion.p variants={fadeInUp} className="text-xs tracking-[0.3em] uppercase font-semibold text-gold">{estratega.eyebrow}</motion.p>
+            <motion.h2 variants={fadeInUp} className="mt-4 font-serif italic font-bold text-3xl md:text-5xl text-ink">{estratega.title}</motion.h2>
+            <motion.p variants={fadeInUp} className="mt-6 text-lg text-muted leading-relaxed max-w-2xl">{estratega.bio}</motion.p>
+            <motion.blockquote variants={fadeInUp} className="mt-6 font-serif italic text-xl md:text-2xl text-ink border-l-4 border-gold pl-4">
+              {estratega.quote}
+            </motion.blockquote>
+          </div>
+        </motion.div>
+      </Container>
+    </section>
+  );
+}
diff --git a/components/sections/__tests__/Estratega.test.tsx b/components/sections/__tests__/Estratega.test.tsx
new file mode 100644
index 0000000..88d142f
--- /dev/null
+++ b/components/sections/__tests__/Estratega.test.tsx
@@ -0,0 +1,14 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { Estratega } from '../Estratega';
+
+describe('<Estratega />', () => {
+  it('renders the bio', () => {
+    render(<Estratega />);
+    expect(screen.getByText(/30 años/i)).toBeInTheDocument();
+  });
+  it('renders the institutional quote', () => {
+    render(<Estratega />);
+    expect(screen.getByText(/El tiempo no se compra/i)).toBeInTheDocument();
+  });
+});