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>