feat: BenditaRed-inspired concepts adapted to creeer tokens

- Hero: subtle ink grid texture (radial-masked) + gold glow blob
- Hero kicker: small gold dot before the eyebrow
- Header: desktop anchor nav (Método/Disciplinas/La estratega) with
  scroll-elevation shadow; mobile keeps wordmark + CTA only
- Sections gain ids + scroll-mt-24 as anchor targets
- CTA: subtle hover lift, gated with motion-reduce

Concepts studied from ~/dev/BenditaRed (grid+glow hero background,
kicker-with-dot, scrolled navbar state, pill hover lift). Animated
stats were skipped — no real metrics from the owner to show.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

components/sections/Disciplinas.tsx

@@ -7,7 +7,7 @@ import { fadeInUp, staggerContainer, viewportOnce, usePrefersReducedMotion, moti
 export function Disciplinas() {
   const reduced = usePrefersReducedMotion();
   return (
-    <section className="bg-base">
+    <section id="disciplinas" className="bg-base scroll-mt-24">
       <Container className="py-24 md:py-32">
         <motion.p variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
           className="text-xs tracking-[0.3em] uppercase font-semibold text-gold-deep">{disciplinas.eyebrow}</motion.p>

components/sections/Estratega.tsx

@@ -7,7 +7,7 @@ import { fadeInUp, staggerContainer, viewportOnce, usePrefersReducedMotion, moti
 export function Estratega() {
   const reduced = usePrefersReducedMotion();
   return (
-    <section className="bg-base">
+    <section id="estratega" className="bg-base scroll-mt-24">
       <Container className="py-24 md:py-32">
         <motion.div variants={staggerContainer} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
           className="grid gap-12 md:grid-cols-[auto_1fr] md:items-center">

components/sections/Hero.tsx

@@ -18,11 +18,28 @@ export function Hero({ variant = 'editorial' }: { variant?: Variant }) {
   const headlineSize = 'text-4xl md:text-6xl leading-[1.1]';
 
   return (
-    <section className="bg-bg-pure">
+    <section className="relative overflow-hidden bg-bg-pure">
+      {/* Fondo: retícula sutil + resplandor dorado (conceptos BenditaRed, en tokens creeer) */}
+      <div
+        aria-hidden
+        className="pointer-events-none absolute inset-0 -z-10"
+        style={{
+          backgroundImage:
+            'linear-gradient(to right, rgba(10,31,68,0.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(10,31,68,0.045) 1px, transparent 1px)',
+          backgroundSize: '56px 56px',
+          maskImage: 'radial-gradient(120% 80% at 50% 0%, #000 40%, transparent 100%)',
+          WebkitMaskImage: 'radial-gradient(120% 80% at 50% 0%, #000 40%, transparent 100%)',
+        }}
+      />
+      <div
+        aria-hidden
+        className="pointer-events-none absolute -right-40 -top-40 -z-10 h-[32rem] w-[32rem] rounded-full bg-gold/10 blur-3xl"
+      />
       <Container className="min-h-[88vh] flex flex-col items-center justify-center text-center py-24">
         <motion.div variants={staggerContainer} initial="hidden" animate="visible" {...motionProps(reduced)} className="flex flex-col items-center">
           <motion.div variants={fadeInUp}><Wordmark size="xl" /></motion.div>
-          <motion.p variants={fadeInUp} className="mt-6 text-xs md:text-sm tracking-[0.3em] uppercase font-semibold text-gold-deep">
+          <motion.p variants={fadeInUp} className="mt-6 inline-flex items-center gap-2 text-xs md:text-sm tracking-[0.3em] uppercase font-semibold text-gold-deep">
+            <span aria-hidden className="h-1.5 w-1.5 rounded-full bg-gold" />
             {hero.eyebrow}
           </motion.p>
           <motion.h1 variants={fadeInUp} className={`mt-8 ${headlineBase} ${headlineSize} text-ink`}>

components/sections/Mecanismo.tsx

@@ -8,7 +8,7 @@ import { fadeInUp, staggerContainer, viewportOnce, usePrefersReducedMotion, moti
 export function Mecanismo() {
   const reduced = usePrefersReducedMotion();
   return (
-    <section className="bg-bg-dark text-cream">
+    <section id="metodo" className="bg-bg-dark text-cream scroll-mt-24">
       <Container className="py-24 md:py-32">
         <motion.p variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
           className="text-xs tracking-[0.3em] uppercase font-semibold text-gold-bright">{mecanismo.eyebrow}</motion.p>