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/layout/Header.tsx

@@ -1,16 +1,46 @@
+'use client';
+
+import { useEffect, useState } from 'react';
 import { Wordmark } from '@/components/primitives/Wordmark';
 import { CTA } from '@/components/primitives/CTA';
 import { Container } from '@/components/primitives/Container';
 import { header } from '@/lib/content';
 
 export function Header() {
+  // Sombra sutil cuando la página deja de estar arriba (concepto BenditaRed)
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    const onScroll = () => setScrolled(window.scrollY > 12);
+    onScroll();
+    window.addEventListener('scroll', onScroll, { passive: true });
+    return () => window.removeEventListener('scroll', onScroll);
+  }, []);
+
   return (
-    <header className="sticky top-0 z-50 border-b border-ink/10 bg-base/80 backdrop-blur">
+    <header
+      className={`sticky top-0 z-50 border-b bg-base/80 backdrop-blur transition-shadow duration-300 ${
+        scrolled ? 'border-ink/10 shadow-[0_6px_24px_-18px_rgba(10,31,68,0.5)]' : 'border-ink/5'
+      }`}
+    >
       <Container className="flex items-center justify-between py-3">
+        {/* #top: fragmento especial del navegador — scrollea al inicio sin necesitar un id */}
         <a href="#top" aria-label="creeer — inicio">
           <Wordmark size="md" />
         </a>
-        <nav aria-label="Principal">
+        <nav aria-label="Principal" className="flex items-center gap-8">
+          {/* Anchors solo en desktop; en mobile el CTA basta (sin hamburguesa) */}
+          <div className="hidden md:flex items-center gap-8">
+            {header.nav.map((link) => (
+              <a
+                key={link.href}
+                href={link.href}
+                className="text-xs tracking-[0.2em] uppercase font-semibold text-muted transition-colors hover:text-gold-deep"
+              >
+                {link.label}
+              </a>
+            ))}
+          </div>
           <CTA href="#contacto" label={header.cta} variant="light" />
         </nav>
       </Container>

components/primitives/CTA.tsx

@@ -8,7 +8,7 @@ export function CTA({ href, label, variant = 'light', className = '' }: { href:
   return (
     <a
       href={href}
-      className={`group 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-all duration-300 hover:-translate-y-0.5 motion-reduce:transform-none motion-reduce:transition-none ${styles[variant]} ${className}`}
     >
       {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>

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>

lib/content.ts

@@ -87,6 +87,11 @@ export const cierre = {
 
 export const header = {
   cta: 'Hablemos',   // short nav CTA → #contacto (the full CTA lives in Hero/Cierre)
+  nav: [
+    { href: '#metodo', label: 'Método' },
+    { href: '#disciplinas', label: 'Disciplinas' },
+    { href: '#estratega', label: 'La estratega' },
+  ],
 };
 
 export const footer = {