From 43644355eab92ca7ff81a2a32c311e8902abd50e Mon Sep 17 00:00:00 2001
From: erikgh <erikguzh@outlook.es>
Date: Wed, 22 Jul 2026 10:30:32 -0600
Subject: [PATCH] feat: hover micro-interactions on cards, steps and CTA arrow

Disciplinas cards and Mecanismo/ComoEmpezar steps get a subtle lift +
border intensify on hover; the CTA arrow slides right. All gated with
motion-reduce so prefers-reduced-motion users see no movement.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 components/primitives/CTA.tsx       | 5 +++--
 components/sections/ComoEmpezar.tsx | 3 ++-
 components/sections/Disciplinas.tsx | 3 ++-
 components/sections/Mecanismo.tsx   | 3 ++-
 4 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/components/primitives/CTA.tsx b/components/primitives/CTA.tsx
index defe1ed..81ef72b 100644
--- a/components/primitives/CTA.tsx
+++ b/components/primitives/CTA.tsx
@@ -8,9 +8,10 @@ export function CTA({ href, label, variant = 'light', className = '' }: { href:
   return (
     <a
       href={href}
-      className={`inline-block font-sans font-bold uppercase tracking-wider px-7 py-3.5 text-sm transition-colors ${styles[variant]} ${className}`}
+      className={`group inline-block font-sans font-bold uppercase tracking-wider px-7 py-3.5 text-sm transition-colors ${styles[variant]} ${className}`}
     >
-      {label} <span aria-hidden="true">→</span>
+      {label}{' '}
+      <span aria-hidden="true" className="inline-block transition-transform duration-300 ease-out group-hover:translate-x-1 motion-reduce:transform-none motion-reduce:transition-none">→</span>
     </a>
   );
 }
diff --git a/components/sections/ComoEmpezar.tsx b/components/sections/ComoEmpezar.tsx
index da016e7..cd61c3a 100644
--- a/components/sections/ComoEmpezar.tsx
+++ b/components/sections/ComoEmpezar.tsx
@@ -19,7 +19,8 @@ export function ComoEmpezar() {
         <motion.ol variants={staggerContainer} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
           className="mt-12 grid gap-10 md:grid-cols-3">
           {comoEmpezar.steps.map((step) => (
-            <motion.li key={step.n} variants={fadeInUp} className="border-t border-gold/30 pt-6">
+            <motion.li key={step.n} variants={fadeInUp}
+              className="border-t border-gold/30 pt-6 transition-all duration-300 ease-out hover:-translate-y-1.5 hover:border-gold/70 motion-reduce:transform-none motion-reduce:transition-none">
               <div className="font-serif italic font-black text-5xl md:text-6xl text-gold leading-none">{step.n}</div>
               <h3 className="mt-4 font-sans font-bold text-xl text-ink">{step.name}</h3>
               <p className="mt-3 text-muted leading-relaxed">{step.desc}</p>
diff --git a/components/sections/Disciplinas.tsx b/components/sections/Disciplinas.tsx
index b645111..5b84b70 100644
--- a/components/sections/Disciplinas.tsx
+++ b/components/sections/Disciplinas.tsx
@@ -18,7 +18,8 @@ export function Disciplinas() {
         <motion.ul variants={staggerContainer} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
           className="mt-12 grid gap-8 md:grid-cols-3 list-none p-0">
           {disciplinas.items.map((item) => (
-            <motion.li key={item.name} variants={fadeInUp} className="border-t-2 border-gold pt-5">
+            <motion.li key={item.name} variants={fadeInUp}
+              className="border-t-2 border-gold pt-5 transition-all duration-300 ease-out hover:-translate-y-1.5 hover:border-gold-deep motion-reduce:transform-none motion-reduce:transition-none">
               <h3 className="font-serif italic font-bold text-2xl text-ink">{item.name}</h3>
               <p className="mt-3 text-muted leading-relaxed">{item.desc}</p>
             </motion.li>
diff --git a/components/sections/Mecanismo.tsx b/components/sections/Mecanismo.tsx
index 5f430e5..2a45fdf 100644
--- a/components/sections/Mecanismo.tsx
+++ b/components/sections/Mecanismo.tsx
@@ -17,7 +17,8 @@ export function Mecanismo() {
         <motion.ol variants={staggerContainer} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
           className="mt-12 grid gap-10 md:grid-cols-3">
           {mecanismo.steps.map((step) => (
-            <motion.li key={step.n} variants={fadeInUp} className="border-t border-gold-bright/30 pt-6">
+            <motion.li key={step.n} variants={fadeInUp}
+              className="border-t border-gold-bright/30 pt-6 transition-all duration-300 ease-out hover:-translate-y-1.5 hover:border-gold-bright/70 motion-reduce:transform-none motion-reduce:transition-none">
               <div className="font-serif italic font-black text-5xl md:text-6xl text-gold-bright leading-none">{step.n}</div>
               <h3 className="mt-4 font-sans font-bold text-xl">{step.name}</h3>
               <p className="mt-3 text-muted-dark leading-relaxed">{step.desc}</p>