feat: design tokens (palette, Inter font, content + motion libs)

app/globals.css

@@ -2,26 +2,13 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
-body {
-  color: var(--foreground);
-  background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
-}
-
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
+@layer base {
+  html { scroll-behavior: smooth; }
+  body {
+    background-color: #FBFAF7;
+    color: #0A1F44;
+    font-family: var(--font-inter), system-ui, sans-serif;
+    -webkit-font-smoothing: antialiased;
   }
+  ::selection { background: #D4AF37; color: #0A1F44; }
 }

app/layout.tsx

@@ -1,35 +1,19 @@
-import type { Metadata } from "next";
-import localFont from "next/font/local";
-import "./globals.css";
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import './globals.css';
 
-const geistSans = localFont({
-  src: "./fonts/GeistVF.woff",
-  variable: "--font-geist-sans",
-  weight: "100 900",
-});
-const geistMono = localFont({
-  src: "./fonts/GeistMonoVF.woff",
-  variable: "--font-geist-mono",
-  weight: "100 900",
-});
+const inter = Inter({ subsets: ['latin'], weight: ['400', '600', '700', '900'], variable: '--font-inter', display: 'swap' });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: 'creeer · tu estratega de crecimiento',
+  description: 'Claridad estratégica para empresarios con tracción en punto de inflexión.',
+  // (SEO task expands this later)
 };
 
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
+export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
-      </body>
+    <html lang="es" className={inter.variable}>
+      <body>{children}</body>
     </html>
   );
 }

lib/content.ts

@@ -0,0 +1,70 @@
+// Source of truth for all copy. Edit here, not in JSX.
+
+export const wordmark = {
+  // cre[e]er. — 'cre' + gold 'e' + 'er' + gold '.'
+  parts: { before: 'cre', accent: 'e', after: 'er', dot: '.' },
+};
+
+export const hero = {
+  eyebrow: '— tu estratega de crecimiento —',
+  // Headline broken into segments for emphasis styling
+  headline: {
+    line1: 'Tu negocio no necesita',
+    effort: 'más esfuerzo.',   // gold (HV-1) or gold italic (V-a)
+    line3: 'Necesita',
+    clarity: 'más claridad.',   // underlined gold
+  },
+  cta: 'Define tu siguiente movimiento',
+};
+
+export const fraseAncla = {
+  quote: 'Las empresas no dejan de crecer por falta de talento; dejan de crecer por falta de claridad.',
+};
+
+export const paraQuien = {
+  title: '¿Llegaste a tu punto de inflexión?',
+  lead: 'Esto es para ti si…',
+  criteria: [
+    'tienes tracción y ya demostraste que sabes crecer',
+    'trabajar más ya no rinde como antes',
+    'necesitas claridad para decidir el siguiente movimiento',
+  ],
+};
+
+export const mecanismo = {
+  eyebrow: 'el mecanismo único',
+  title: 'Cómo trabajo',
+  steps: [
+    { n: '01', name: 'Inmersión', desc: 'Me sumerjo en tu empresa hasta comprenderla desde dentro.' },
+    { n: '02', name: 'Desafiar supuestos', desc: 'Cuestiono lo que todos dan por hecho y frenan el crecimiento.' },
+    { n: '03', name: 'Estrategia ejecutable', desc: 'Construimos, juntos, una estrategia que puedas ejecutar.' },
+  ],
+};
+
+export const disciplinas = {
+  eyebrow: 'las herramientas',
+  title: 'Las disciplinas que uso',
+  lead: 'No son la promesa — son los medios.',
+  items: [
+    { name: 'Comunicación', desc: 'Mensaje que alinea a tu equipo y a tu mercado.' },
+    { name: 'Digital', desc: 'Presencia y procesos que escalan sin ti.' },
+    { name: 'Experiencias', desc: 'Cada toque con tu marca construye confianza.' },
+  ],
+};
+
+export const estratega = {
+  eyebrow: 'la mente detrás de creeer',
+  title: 'Sobre la estratega',
+  bio: 'Más de 30 años construyendo marcas. Hoy acompaño a empresarios que ya lograron tracción y necesitan claridad para su siguiente movimiento.',
+  quote: 'El tiempo no se compra, se invierte.',
+};
+
+export const cierre = {
+  quote: 'Devuélvele claridad al rumbo de tu empresa.',
+  cta: 'Define tu siguiente movimiento',
+  contact: {
+    whatsapp: { label: 'WhatsApp', href: 'https://wa.me/520000000000' },   // TODO dueña: real number
+    email: { label: 'Email', href: 'mailto:hola@creeer.com' },             // TODO dueña: real email
+    linkedin: { label: 'LinkedIn', href: 'https://linkedin.com/in/...' },  // TODO dueña: real URL
+  },
+};

lib/motion.ts

@@ -0,0 +1,21 @@
+import type { Variants } from 'framer-motion';
+
+// EaseOutExpo — smooth editorial deceleration
+export const easeOutExpo = [0.22, 1, 0.36, 1] as const;
+
+export const fadeInUp: Variants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: easeOutExpo } },
+};
+
+export const fadeIn: Variants = {
+  hidden: { opacity: 0 },
+  visible: { opacity: 1, transition: { duration: 0.4, ease: easeOutExpo } },
+};
+
+export const staggerContainer: Variants = {
+  hidden: {},
+  visible: { transition: { staggerChildren: 0.1 } },
+};
+
+export const viewportOnce = { once: true, amount: 0.3 } as const;

tailwind.config.ts

@@ -1,16 +1,28 @@
-import type { Config } from "tailwindcss";
+import type { Config } from 'tailwindcss';
 
 const config: Config = {
-  content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
+  content: ['./app/**/*.{ts,tsx}', './components/**/*.{ts,tsx}', './lib/**/*.{ts,tsx}'],
   theme: {
     extend: {
       colors: {
-        background: "var(--background)",
-        foreground: "var(--foreground)",
+        base: '#FBFAF7',       // blanco cálido (fondo base)
+        'bg-pure': '#FFFFFF',  // blanco puro (hero)
+        'bg-dark': '#0A1F44',  // navy (secciones oscuras)
+        ink: '#0A1F44',        // texto principal
+        cream: '#F5EBD0',      // texto sobre oscuro (marfil)
+        gold: {
+          DEFAULT: '#B8901f',  // dorado tostado (sobre claro)
+          bright: '#D4AF37',   // dorado (sobre oscuro)
+        },
+        muted: '#5a5168',
+        'muted-dark': '#9aa6c2',
+      },
+      fontFamily: {
+        sans: ['var(--font-inter)', 'system-ui', 'sans-serif'],
+        serif: ['Georgia', 'Cambria', 'Times New Roman', 'serif'],
+      },
+      maxWidth: {
+        content: '1152px',
       },
     },
   },