feat: Cierre section (07, dark) — closing quote + contact links

app/page.tsx

@@ -4,6 +4,7 @@ import { ParaQuien } from '@/components/sections/ParaQuien';
 import { Mecanismo } from '@/components/sections/Mecanismo';
 import { Disciplinas } from '@/components/sections/Disciplinas';
 import { Estratega } from '@/components/sections/Estratega';
+import { Cierre } from '@/components/sections/Cierre';
 
 export default function Home() {
   return (
@@ -14,6 +15,7 @@ export default function Home() {
       <Mecanismo />
       <Disciplinas />
       <Estratega />
+      <Cierre />
     </main>
   );
 }

components/sections/Cierre.tsx

@@ -0,0 +1,35 @@
+'use client';
+import { motion } from 'framer-motion';
+import { Container } from '@/components/primitives/Container';
+import { CTA } from '@/components/primitives/CTA';
+import { Wordmark } from '@/components/primitives/Wordmark';
+import { cierre } from '@/lib/content';
+import { fadeInUp, staggerContainer, viewportOnce } from '@/lib/motion';
+
+export function Cierre() {
+  const { whatsapp, email, linkedin } = cierre.contact;
+  return (
+    <section id="contacto" className="bg-bg-dark text-cream">
+      <Container className="py-24 md:py-32 text-center">
+        <motion.div variants={staggerContainer} initial="hidden" whileInView="visible" viewport={viewportOnce}
+          className="flex flex-col items-center">
+          <motion.div variants={fadeInUp}><Wordmark size="lg" onDark /></motion.div>
+          <motion.blockquote variants={fadeInUp}
+            className="mt-10 font-serif italic text-2xl md:text-4xl font-bold leading-snug max-w-3xl">
+            <span className="text-gold-bright">"</span>{cierre.quote}<span className="text-gold-bright">"</span>
+          </motion.blockquote>
+          <motion.div variants={fadeInUp} className="mt-10">
+            <CTA href={whatsapp.href} label={cierre.cta} variant="dark" />
+          </motion.div>
+          <motion.ul variants={fadeInUp} className="mt-12 flex flex-wrap justify-center gap-6 text-sm">
+            <li><a href={whatsapp.href} className="hover:text-gold-bright transition-colors">{whatsapp.label}</a></li>
+            <li aria-hidden="true" className="text-muted-dark">·</li>
+            <li><a href={email.href} className="hover:text-gold-bright transition-colors">{email.label}</a></li>
+            <li aria-hidden="true" className="text-muted-dark">·</li>
+            <li><a href={linkedin.href} className="hover:text-gold-bright transition-colors">{linkedin.label}</a></li>
+          </motion.ul>
+        </motion.div>
+      </Container>
+    </section>
+  );
+}

components/sections/__tests__/Cierre.test.tsx

@@ -0,0 +1,19 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { Cierre } from '../Cierre';
+
+describe('<Cierre />', () => {
+  it('renders the closing quote', () => {
+    render(<Cierre />);
+    expect(screen.getByText(/Devuélvele claridad/i)).toBeInTheDocument();
+  });
+  it('renders 3 contact links with correct hrefs', () => {
+    render(<Cierre />);
+    const wa = screen.getByRole('link', { name: /whatsapp/i });
+    const mail = screen.getByRole('link', { name: /email/i });
+    const li = screen.getByRole('link', { name: /linkedin/i });
+    expect(wa.getAttribute('href')).toMatch(/^https:\/\/wa\.me\//);
+    expect(mail.getAttribute('href')).toMatch(/^mailto:/);
+    expect(li.getAttribute('href')).toMatch(/^https:\/\/(www\.)?linkedin\./);
+  });
+});