diff --git a/src/app/globals.css b/src/app/globals.css
index 61f28d8..9bce86b 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -2,14 +2,52 @@
 @tailwind components;
 @tailwind utilities;
 
+/* ---------------------------------------------------------------------------
+   Tipografía de marca.
+   Canela (titulares y cifras) y FH Oscar (texto) son fuentes comerciales:
+   coloca los .woff2 en /public/fonts y se activan solos. Mientras tanto se
+   usan Instrument Serif y Geist, cargadas en layout.tsx.
+--------------------------------------------------------------------------- */
+@font-face {
+  font-family: 'Canela';
+  src: url('/fonts/Canela-Medium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'FH Oscar';
+  src: url('/fonts/FHOscar-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'FH Oscar';
+  src: url('/fonts/FHOscar-Medium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
 :root {
-  --background: #ffffff;
-  --foreground: #111827;
+  --font-sans: 'FH Oscar', 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-display: 'Canela', 'Instrument Serif', Georgia, serif;
+
+  /* Marca */
+  --midnight: #07101e;
+  --orange: #ff5d00;
+  --mint: #f0fcf0;
+  --mist: #b1c3cd;
+
+  /* Roles */
+  --background: #f6f8f7;      /* lienzo, ligeramente frío */
   --card: #ffffff;
-  --sidebar: #ffffff;
-  --border: #e5e7eb;
-  --brand: #e58a3c;
-  --muted: #6b7280;
+  --sidebar: var(--midnight);
+  --border: #dce4e8;
+  --brand: var(--orange);
+  --foreground: var(--midnight);
+  --muted: #5b6b78;           /* secundario teñido, no gris plano */
 }
 
 html {
@@ -19,18 +57,47 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  font-family: var(--font-sans);
+  font-feature-settings: 'ss01', 'cv11';
   min-height: 100vh;
+  text-rendering: optimizeLegibility;
+}
+
+/* Trama de puntos del brandbook, apenas perceptible, sobre el lienzo */
+.canvas-dots {
+  background-image: radial-gradient(rgba(7, 16, 30, 0.07) 1px, transparent 1px);
+  background-size: 22px 22px;
+  background-position: 0 0;
+}
+
+/* Cifras y titulares en Canela */
+.display {
+  font-family: var(--font-display);
+  font-weight: 500;
+  letter-spacing: -0.01em;
 }
 
 * {
   scrollbar-width: thin;
-  scrollbar-color: #d1d5db transparent;
+  scrollbar-color: var(--mist) transparent;
 }
 
 ::selection {
-  background: rgba(229, 138, 60, 0.25);
-  color: #111827;
+  background: rgba(255, 93, 0, 0.22);
+  color: var(--midnight);
+}
+
+:focus-visible {
+  outline: 2px solid var(--orange);
+  outline-offset: 2px;
+  border-radius: 8px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
 }
 
 @layer utilities {
@@ -43,20 +110,20 @@ input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type=
 select,
 textarea {
   color-scheme: light !important;
-  color: #111827;
+  color: var(--midnight);
 }
 
 /* Evitar que el autofill del navegador pinte campos en oscuro */
 input:-webkit-autofill,
-input:-webkit-autofill:hover, 
-input:-webkit-autofill:focus, 
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
 textarea:-webkit-autofill,
 textarea:-webkit-autofill:hover,
 textarea:-webkit-autofill:focus,
 select:-webkit-autofill,
 select:-webkit-autofill:hover,
 select:-webkit-autofill:focus {
-  -webkit-text-fill-color: #111827 !important;
+  -webkit-text-fill-color: var(--midnight) !important;
   -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
   transition: background-color 5000s ease-in-out 0s;
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 4b28e8a..6ed9b22 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -25,11 +25,11 @@ export default function RootLayout({
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
         <link
-          href="https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,300..900;1,300..900&display=swap"
+          href="https://fonts.googleapis.com/css2?family=Instrument+Serif&family=Geist:wght@400;500;600&display=swap"
           rel="stylesheet"
         />
       </head>
-      <body className="bg-background text-gray-900 min-h-screen antialiased">
+      <body className="bg-background text-ink min-h-screen antialiased">
         {children}
       </body>
     </html>
diff --git a/src/components/DashboardShell.tsx b/src/components/DashboardShell.tsx
index a4ffb35..fbf5539 100644
--- a/src/components/DashboardShell.tsx
+++ b/src/components/DashboardShell.tsx
@@ -140,13 +140,17 @@ function NavLink({
     <Link
       href={item.href}
       onClick={onNavigate}
-      className={`flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all ${
+      aria-current={active ? 'page' : undefined}
+      className={`group relative flex items-center gap-3 rounded-md px-3 py-2 text-[14px] font-medium transition-colors ${
         active
-          ? 'bg-brand-50 text-gray-900 border border-brand-200'
-          : 'text-gray-600 border border-transparent hover:text-gray-900 hover:bg-gray-50'
+          ? 'bg-white/[0.07] text-white'
+          : 'text-mist-300 hover:bg-white/[0.05] hover:text-white'
       }`}
     >
-      <Icon className={`w-4 h-4 shrink-0 ${item.iconClass}`} />
+      {active ? (
+        <span aria-hidden className="absolute left-0 top-1/2 h-5 w-0.5 -translate-y-1/2 rounded-r bg-brand-500" />
+      ) : null}
+      <Icon className={`h-4 w-4 shrink-0 ${active ? 'text-brand-500' : 'text-mist-400 group-hover:text-mist-300'}`} />
       {item.label}
     </Link>
   );
@@ -203,7 +207,7 @@ export default function DashboardShell({
 
   const sidebar = (
     <div className="flex h-full flex-col">
-      <div className="flex items-center gap-3 px-2 py-3 border-b border-gray-200 mb-5">
+      <div className="mb-6 flex items-center gap-3 border-b border-white/10 px-2 pb-4 pt-2">
         {clientLogoUrl ? (
           // eslint-disable-next-line @next/next/no-img-element
           <img
@@ -211,7 +215,7 @@ export default function DashboardShell({
             alt={title}
             width={40}
             height={40}
-            className="rounded-lg object-contain shrink-0 w-10 h-10 bg-white border border-gray-100"
+            className="h-10 w-10 shrink-0 rounded-md bg-white object-contain p-1"
           />
         ) : (
           <Image
@@ -219,21 +223,21 @@ export default function DashboardShell({
             alt="4Ventures"
             width={40}
             height={40}
-            className="rounded-lg object-cover shrink-0"
+            className="h-10 w-10 shrink-0 rounded-md object-cover"
             priority
           />
         )}
         <div className="min-w-0">
-          <p className="font-bold text-sm tracking-wide text-gray-900 leading-tight truncate">
+          <p className="truncate text-[15px] font-medium leading-tight text-white">
             {title}
           </p>
-          <p className="text-xs text-gray-500 font-medium leading-tight">
+          <p className="mt-0.5 text-[12px] leading-tight text-mist-400">
             {subtitle}
           </p>
         </div>
         <button
           type="button"
-          className="ml-auto md:hidden rounded-lg p-2 text-gray-500 hover:bg-gray-100"
+          className="ml-auto rounded-md p-2 text-mist-400 hover:bg-white/10 hover:text-white md:hidden"
           onClick={close}
           aria-label="Cerrar menú"
         >
@@ -241,15 +245,15 @@ export default function DashboardShell({
         </button>
       </div>
 
-      <nav className="flex-1 overflow-y-auto space-y-1.5 pr-1">
+      <nav className="flex-1 space-y-0.5 overflow-y-auto pr-1">
         {visibleNav.map((item) => {
           // Sub-enlaces de Social: siempre que Social esté en el menú.
           const underSocial = item.moduleId === 'social';
           const subLinkCls = (href: string) =>
-            `ml-4 flex items-center gap-2.5 px-3 py-2 rounded-lg text-xs font-medium transition-all ${
+            `ml-7 flex items-center gap-2.5 rounded-md px-3 py-1.5 text-[13px] font-medium transition-colors ${
               isActive(pathname, href)
-                ? 'bg-brand-50 text-gray-900 border border-brand-200'
-                : 'text-gray-500 border border-transparent hover:text-gray-900 hover:bg-gray-50'
+                ? 'bg-white/[0.07] text-white'
+                : 'text-mist-400 hover:bg-white/[0.05] hover:text-white'
             }`;
           return (
             <div key={item.href} className="space-y-0.5">
@@ -262,7 +266,7 @@ export default function DashboardShell({
                       onClick={close}
                       className={subLinkCls('/dashboard/calendario')}
                     >
-                      <CalendarDays className="w-3.5 h-3.5 shrink-0 text-pink-500" />
+                      <CalendarDays className="h-3.5 w-3.5 shrink-0" />
                       Calendario editorial
                     </Link>
                   ) : null}
@@ -272,7 +276,7 @@ export default function DashboardShell({
                       onClick={close}
                       className={subLinkCls('/dashboard/creatives')}
                     >
-                      <Images className="w-3.5 h-3.5 shrink-0 text-fuchsia-500" />
+                      <Images className="h-3.5 w-3.5 shrink-0" />
                       Pipeline RRSS
                     </Link>
                   ) : null}
@@ -283,9 +287,9 @@ export default function DashboardShell({
         })}
 
         {isAgency ? (
-          <div className="pt-4 mt-4 border-t border-gray-200">
-            <span className="px-3 text-[10px] font-bold uppercase tracking-wider text-gray-500">
-              Agencia OS
+          <div className="mt-5 border-t border-white/10 pt-4">
+            <span className="px-3 text-[12px] font-medium text-mist-400">
+              Agencia
             </span>
             <div className="mt-1 space-y-0.5">
               <NavLink
@@ -311,18 +315,18 @@ export default function DashboardShell({
         ) : null}
       </nav>
 
-      <div className="pt-4 mt-4 border-t border-gray-200 space-y-3">
-        <div className="px-2 py-2 rounded-xl bg-gray-50 border border-gray-200">
-          <div className="flex items-center gap-2 mb-1">
-            <UserCheck className="w-3.5 h-3.5 text-brand-500 shrink-0" />
-            <p className="text-xs font-medium text-gray-900 truncate">{email}</p>
+      <div className="mt-4 space-y-3 border-t border-white/10 pt-4">
+        <div className="rounded-md bg-white/[0.05] px-3 py-2.5">
+          <div className="mb-1 flex items-center gap-2">
+            <UserCheck className="h-3.5 w-3.5 shrink-0 text-mist-400" />
+            <p className="truncate text-[13px] font-medium text-white">{email}</p>
           </div>
           <div className="flex items-center justify-between gap-2">
-            <span className="text-[10px] text-gray-500 capitalize truncate">
+            <span className="truncate text-[12px] capitalize text-mist-400">
               {company}
             </span>
             <span
-              className="text-[9px] uppercase tracking-wider font-semibold px-1.5 py-0.5 rounded bg-brand-50 text-brand-600 shrink-0"
+              className="shrink-0 rounded-sm bg-brand-500/15 px-1.5 py-0.5 text-[11px] font-medium capitalize text-brand-400"
               title={role}
             >
               {role === 'admin'
@@ -337,16 +341,16 @@ export default function DashboardShell({
         <form action={logoutAction}>
           <button
             type="submit"
-            className="w-full flex items-center justify-center gap-2 px-3 py-2 rounded-lg text-xs font-medium text-gray-500 hover:text-red-600 hover:bg-red-50 border border-transparent hover:border-red-100 transition-all"
+            className="flex w-full items-center justify-center gap-2 rounded-md px-3 py-2 text-[13px] font-medium text-mist-400 transition-colors hover:bg-white/[0.06] hover:text-white"
           >
             <LogOut className="w-3.5 h-3.5" />
             Cerrar Sesión
           </button>
         </form>
 
-        <div className="flex items-center justify-between px-2 pt-1 text-[11px] text-gray-400">
-          <span className="flex items-center gap-1 text-emerald-600">
-            <ShieldCheck className="w-3 h-3" /> RLS Activo
+        <div className="flex items-center justify-between px-2 pt-1 text-[12px] text-mist-400">
+          <span className="flex items-center gap-1.5">
+            <ShieldCheck className="h-3 w-3 text-mint-200" /> Datos aislados por cliente
           </span>
         </div>
       </div>
@@ -354,8 +358,8 @@ export default function DashboardShell({
   );
 
   return (
-    <div className="flex min-h-screen bg-background text-gray-900">
-      <aside className="hidden md:flex w-64 shrink-0 flex-col border-r border-gray-200 bg-sidebar p-4">
+    <div className="flex min-h-screen bg-background text-ink">
+      <aside className="hidden w-[248px] shrink-0 flex-col bg-sidebar p-4 text-white md:flex">
         {sidebar}
       </aside>
 
@@ -363,29 +367,29 @@ export default function DashboardShell({
         <div className="fixed inset-0 z-50 md:hidden">
           <button
             type="button"
-            className="absolute inset-0 bg-black/40"
+            className="absolute inset-0 bg-ink/50"
             aria-label="Cerrar menú"
             onClick={close}
           />
-          <aside className="absolute left-0 top-0 h-full w-[280px] bg-sidebar border-r border-gray-200 p-4 shadow-xl">
+          <aside className="absolute left-0 top-0 h-full w-[280px] bg-sidebar p-4 text-white shadow-xl">
             {sidebar}
           </aside>
         </div>
       ) : null}
 
       <div className="flex min-w-0 flex-1 flex-col">
-        <header className="sticky top-0 z-30 border-b border-gray-200 bg-white/95 backdrop-blur-md px-4 md:px-8 py-2.5 space-y-2">
+        <header className="sticky top-0 z-30 space-y-2 border-b border-border bg-background/90 px-4 py-2.5 backdrop-blur-md md:px-8">
           <div className="flex items-center gap-3 min-h-10">
             <button
               type="button"
-              className="md:hidden rounded-lg p-2 text-gray-600 hover:bg-gray-100"
+              className="rounded-md p-2 text-ink-muted hover:bg-mist-100 md:hidden"
               onClick={() => setOpen(true)}
               aria-label="Abrir menú"
             >
               <Menu className="w-5 h-5" />
             </button>
 
-            <div className="flex min-w-0 items-center gap-2 text-sm text-gray-500">
+            <div className="flex min-w-0 items-center gap-2 text-sm text-ink-muted">
               <span className="hidden sm:inline shrink-0">
                 {isAgency ? 'Contexto:' : 'Cliente / Portal:'}
               </span>
@@ -410,8 +414,8 @@ export default function DashboardShell({
           </div>
         </header>
 
-        <main className="flex-1 overflow-y-auto">
-          <div className="mx-auto w-full max-w-7xl px-4 py-6 md:px-8 md:py-8">
+        <main className="canvas-dots flex-1 overflow-y-auto">
+          <div className="mx-auto w-full max-w-7xl px-4 py-6 md:px-8 md:py-9">
             {children}
           </div>
         </main>
diff --git a/src/components/MetricsDashboard.tsx b/src/components/MetricsDashboard.tsx
index 2ee671a..4b2fe63 100644
--- a/src/components/MetricsDashboard.tsx
+++ b/src/components/MetricsDashboard.tsx
@@ -57,11 +57,11 @@ type Card = {
 };
 
 function toneForDelta(v: number | null, invert?: boolean): string {
-  if (v === null) return 'text-gray-500 bg-gray-50 border-gray-200';
-  if (v === 0) return 'text-gray-600 bg-gray-50 border-gray-200';
+  if (v === null) return 'text-ink-faint bg-mist-50 border-mist-200';
+  if (v === 0) return 'text-ink-muted bg-mist-50 border-mist-200';
   const good = invert ? v < 0 : v > 0;
   return good
-    ? 'text-emerald-800 bg-emerald-50 border-emerald-200'
+    ? 'text-emerald-800 bg-mint border-mint-200'
     : 'text-red-700 bg-red-50 border-red-200';
 }
 
@@ -81,7 +81,7 @@ function DeltaChip({
   return (
     <span
       title={title}
-      className={`inline-flex items-center gap-0.5 rounded-full border px-2 py-0.5 text-[11px] font-semibold tabular-nums ${toneForDelta(
+      className={`inline-flex items-center gap-0.5 rounded-full border px-2 py-0.5 text-[12px] font-medium tabular-nums ${toneForDelta(
         v,
         invert
       )}`}
@@ -109,7 +109,7 @@ function DeltaRow({
 }) {
   if (empty) {
     return (
-      <p className="mt-3 text-[11px] leading-snug text-gray-500">
+      <p className="mt-3 text-[12px] leading-snug text-ink-muted">
         Sin cierres en este rango. Amplía el periodo o revisa oportunidades
         ganadas en el CRM.
       </p>
@@ -144,7 +144,7 @@ function DeltaRow({
 }
 
 function gapTone(gap: number): string {
-  if (gap === 0) return 'text-gray-700 bg-gray-100';
+  if (gap === 0) return 'text-ink-soft bg-mist-100';
   if (gap > 0) return 'text-amber-900 bg-amber-50 border border-amber-200';
   const abs = Math.abs(gap);
   if (abs <= 5) return 'text-emerald-800 bg-emerald-50 border border-emerald-200';
@@ -161,7 +161,7 @@ function SparkBars({
   formatValue: (v: number) => string;
 }) {
   if (points.length === 0) {
-    return <p className="text-xs text-gray-500 py-8 text-center">Sin filas diarias.</p>;
+    return <p className="text-xs text-ink-muted py-8 text-center">Sin filas diarias.</p>;
   }
   const max = Math.max(1, ...points.map((p) => p.value));
   const first = points[0]?.date;
@@ -176,11 +176,11 @@ function SparkBars({
 
   return (
     <div>
-      <div className="flex items-end justify-between text-[10px] text-gray-500 mb-1 tabular-nums">
+      <div className="mb-1 flex items-end justify-between text-[11px] tabular-nums text-ink-muted">
         <span>{formatValue(max)}</span>
         <span>máx.</span>
       </div>
-      <div className="flex items-end gap-px h-28 w-full rounded-lg bg-gray-50 px-1 pt-2 pb-0 border border-gray-100">
+      <div className="flex h-28 w-full items-end gap-px rounded-md border border-mist-200 bg-mist-50 px-1 pb-0 pt-2">
         {points.map((d) => (
           <div
             key={d.date}
@@ -194,7 +194,7 @@ function SparkBars({
           </div>
         ))}
       </div>
-      <div className="flex justify-between text-[10px] text-gray-500 mt-1.5 tabular-nums">
+      <div className="mt-1.5 flex justify-between text-[11px] tabular-nums text-ink-muted">
         <span>{fmtDay(first)}</span>
         <span>{fmtDay(last)}</span>
       </div>
@@ -212,15 +212,15 @@ function SectionHead({
   hint: string;
 }) {
   return (
-    <div className="flex items-start gap-3 mb-4">
-      <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-brand-50 text-brand-700 border border-brand-200/60">
+    <div className="mb-5 flex items-start gap-3">
+      <span className="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-ink text-white">
         {icon}
       </span>
       <div>
-        <h2 className="text-base font-semibold text-gray-900 tracking-tight">
+        <h2 className="text-[17px] font-medium leading-tight text-ink">
           {title}
         </h2>
-        <p className="text-xs text-gray-500 mt-0.5">{hint}</p>
+        <p className="mt-1 text-[13px] text-ink-muted">{hint}</p>
       </div>
     </div>
   );
@@ -250,17 +250,15 @@ function MetricTile({
   showWow: boolean;
 }) {
   return (
-    <div className="rounded-2xl border border-gray-200 bg-white p-4 md:p-5 shadow-sm h-full">
+    <div className="h-full rounded-xl border border-border bg-card p-5">
       <div className="flex items-start justify-between gap-2">
-        <p className="text-[11px] font-semibold uppercase tracking-[0.12em] text-gray-500">
-          {label}
-        </p>
-        <span className="text-gray-400">{icon}</span>
+        <p className="text-[13px] font-medium text-ink-muted">{label}</p>
+        <span className="text-mist-400">{icon}</span>
       </div>
-      <p className="mt-2 text-3xl font-semibold tracking-tight text-gray-900 tabular-nums leading-none">
+      <p className="display mt-3 text-[2.5rem] leading-none tabular-nums text-ink">
         {value}
       </p>
-      <p className="text-xs text-gray-500 mt-2 leading-snug">{hint}</p>
+      <p className="mt-2.5 text-[13px] leading-snug text-ink-muted">{hint}</p>
       <DeltaRow
         delta={delta}
         invert={invert}
@@ -285,15 +283,15 @@ function StatMini({
   icon?: React.ReactNode;
 }) {
   return (
-    <div className="rounded-xl border border-gray-200 bg-white px-4 py-3.5">
-      <p className="text-[11px] font-semibold uppercase tracking-[0.12em] text-gray-500 inline-flex items-center gap-1.5">
+    <div className="rounded-xl border border-border bg-card px-4 py-3.5">
+      <p className="inline-flex items-center gap-1.5 text-[13px] font-medium text-ink-muted">
         {icon}
         {label}
       </p>
-      <p className="text-2xl font-semibold text-gray-900 mt-1.5 tabular-nums tracking-tight">
+      <p className="display mt-1.5 text-[1.75rem] leading-none tabular-nums text-ink">
         {value}
       </p>
-      <p className="text-xs text-gray-500 mt-1">{hint}</p>
+      <p className="mt-1.5 text-[13px] text-ink-muted">{hint}</p>
     </div>
   );
 }
@@ -580,7 +578,7 @@ export default function MetricsDashboard({
             </p>
           )}
           {!hasCohort && (
-            <p className="text-xs text-gray-700 border border-gray-200 bg-white rounded-xl px-3 py-2">
+            <p className="text-xs text-ink-soft border border-border bg-white rounded-xl px-3 py-2">
               Sin ventas en {rangeHint}
               {wonDeals.length
                 ? ` (hay ${formatNum(wonDeals.length)} en el histórico — prueba 30 días o Mes).`
@@ -597,8 +595,8 @@ export default function MetricsDashboard({
         </div>
       )}
 
-      <div className="rounded-2xl border border-gray-200 bg-gradient-to-br from-white via-white to-brand-50/70 p-4 md:p-6 shadow-sm">
-        <p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-brand-700 mb-4">
+      <div className="rounded-2xl border border-border bg-gradient-to-br from-white via-white to-brand-50/70 p-4 md:p-6 ">
+        <p className="text-[13px] font-medium text-brand-600 mb-4">
           Resumen del periodo
         </p>
         <div className="grid grid-cols-2 lg:grid-cols-5 gap-4 md:gap-6">
@@ -629,7 +627,7 @@ export default function MetricsDashboard({
             label={`Leads ${crmName}`}
             value={hasCrm ? formatNum(crmPeriodTotal) : '—'}
             chip={
-              <span className="text-[11px] text-gray-500">
+              <span className="text-[11px] text-ink-muted">
                 {formatNum(periodTotals.leads)} plat.
               </span>
             }
@@ -641,7 +639,7 @@ export default function MetricsDashboard({
               hasCohort ? (
                 <DeltaChip label="mes" v={heroDeltas.deals.mom} />
               ) : (
-                <span className="text-[11px] text-gray-500">sin cierres</span>
+                <span className="text-[11px] text-ink-muted">sin cierres</span>
               )
             }
           />
@@ -650,7 +648,7 @@ export default function MetricsDashboard({
             value={heroRoasEmpty ? '—' : `${formatNum(periodTotals.roas)}x`}
             chip={
               heroRoasEmpty ? (
-                <span className="text-[11px] text-gray-500">pendiente CRM</span>
+                <span className="text-[11px] text-ink-muted">pendiente CRM</span>
               ) : (
                 <DeltaChip label="mes" v={heroDeltas.roas.mom} />
               )
@@ -659,26 +657,26 @@ export default function MetricsDashboard({
         </div>
       </div>
 
-      <details className="group rounded-xl border border-gray-200 bg-white">
-        <summary className="cursor-pointer list-none flex items-center gap-2 px-4 py-2.5 text-xs font-medium text-gray-600 hover:text-gray-900">
+      <details className="group rounded-xl border border-border bg-white">
+        <summary className="cursor-pointer list-none flex items-center gap-2 px-4 py-2.5 text-xs font-medium text-ink-muted hover:text-ink">
           <Info className="w-3.5 h-3.5 text-brand-600" />
           Cómo leer ads, CRM y web
-          <span className="ml-auto text-gray-400">
+          <span className="ml-auto text-ink-faint">
             <span className="group-open:hidden">mostrar</span>
             <span className="hidden group-open:inline">ocultar</span>
           </span>
         </summary>
-        <div className="px-4 pb-3 text-xs text-gray-600 space-y-1.5 border-t border-gray-100 pt-2">
+        <div className="px-4 pb-3 text-xs text-ink-muted space-y-1.5 border-t border-mist-100 pt-2">
           <p>
-            <strong className="text-gray-800">Publicidad:</strong> lo que Meta y
+            <strong className="text-ink-soft">Publicidad:</strong> lo que Meta y
             Google reportan. No es el listado de clientes.
           </p>
           <p>
-            <strong className="text-gray-800">{crmName}:</strong> altas y ventas
+            <strong className="text-ink-soft">{crmName}:</strong> altas y ventas
             reales. Un lead de ads y un alta CRM casi nunca coinciden 1 a 1.
           </p>
           <p>
-            <strong className="text-gray-800">Web y SEO:</strong> Search Console
+            <strong className="text-ink-soft">Web y SEO:</strong> Search Console
             y Analytics. No se suman a los leads de anuncios.
           </p>
         </div>
@@ -708,7 +706,7 @@ export default function MetricsDashboard({
         </div>
         <div className="grid grid-cols-1 md:grid-cols-2 gap-3 mt-3">
           <Surface>
-            <p className="text-[11px] font-semibold uppercase tracking-[0.12em] text-gray-500 mb-3">
+            <p className="text-[13px] font-medium text-ink-muted mb-3">
               Inversión por día
             </p>
             <SparkBars
@@ -718,7 +716,7 @@ export default function MetricsDashboard({
             />
           </Surface>
           <Surface>
-            <p className="text-[11px] font-semibold uppercase tracking-[0.12em] text-gray-500 mb-3">
+            <p className="text-[13px] font-medium text-ink-muted mb-3">
               Leads de plataforma por día
             </p>
             <SparkBars
@@ -747,20 +745,20 @@ export default function MetricsDashboard({
             value={cplCrm ? formatEurCents(cplCrm) : '—'}
             hint="Inversión ads ÷ leads CRM"
           />
-          <div className="rounded-xl border border-gray-200 bg-white px-4 py-3.5 col-span-2 lg:col-span-1">
-            <p className="text-[11px] font-semibold uppercase tracking-[0.12em] text-gray-500">
+          <div className="rounded-xl border border-border bg-white px-4 py-3.5 col-span-2 lg:col-span-1">
+            <p className="text-[13px] font-medium text-ink-muted">
               Gap ads vs CRM
             </p>
             <p
               className={`mt-1.5 inline-flex items-center rounded-full px-2.5 py-0.5 text-xl font-semibold tabular-nums ${
-                hasCrm ? gapTone(gapAdsCrm) : 'text-gray-400'
+                hasCrm ? gapTone(gapAdsCrm) : 'text-ink-faint'
               }`}
             >
               {hasCrm
                 ? `${gapAdsCrm > 0 ? '+' : ''}${formatNum(gapAdsCrm)}`
                 : '—'}
             </p>
-            <p className="text-xs text-gray-500 mt-1.5">
+            <p className="text-xs text-ink-muted mt-1.5">
               CRM − conversiones ads. Positivo = más altas en CRM que las que
               reporta el anuncio.
             </p>
@@ -828,44 +826,44 @@ export default function MetricsDashboard({
         />
         {channelInsight && (
           <div className="grid grid-cols-2 sm:grid-cols-4 gap-2 mb-4">
-            <div className="rounded-xl bg-gray-50 border border-gray-200 px-3 py-2.5">
-              <p className="text-[10px] uppercase tracking-wider text-gray-500 font-semibold">
+            <div className="rounded-xl bg-mist-50 border border-border px-3 py-2.5">
+              <p className="text-[12px] font-medium text-ink-muted">
                 Plat.
               </p>
-              <p className="text-lg font-semibold tabular-nums text-gray-900">
+              <p className="text-lg font-semibold tabular-nums text-ink">
                 {formatNum(channelInsight.platTotal)}
               </p>
             </div>
-            <div className="rounded-xl bg-gray-50 border border-gray-200 px-3 py-2.5">
-              <p className="text-[10px] uppercase tracking-wider text-gray-500 font-semibold">
+            <div className="rounded-xl bg-mist-50 border border-border px-3 py-2.5">
+              <p className="text-[12px] font-medium text-ink-muted">
                 CRM
               </p>
-              <p className="text-lg font-semibold tabular-nums text-gray-900">
+              <p className="text-lg font-semibold tabular-nums text-ink">
                 {formatNum(channelInsight.crmTotal)}
               </p>
             </div>
-            <div className="rounded-xl bg-gray-50 border border-gray-200 px-3 py-2.5">
-              <p className="text-[10px] uppercase tracking-wider text-gray-500 font-semibold">
+            <div className="rounded-xl bg-mist-50 border border-border px-3 py-2.5">
+              <p className="text-[12px] font-medium text-ink-muted">
                 Con gasto ads
               </p>
-              <p className="text-lg font-semibold tabular-nums text-gray-900">
+              <p className="text-lg font-semibold tabular-nums text-ink">
                 {formatNum(channelInsight.crmPaid)}
               </p>
             </div>
-            <div className="rounded-xl bg-gray-50 border border-gray-200 px-3 py-2.5">
-              <p className="text-[10px] uppercase tracking-wider text-gray-500 font-semibold">
+            <div className="rounded-xl bg-mist-50 border border-border px-3 py-2.5">
+              <p className="text-[12px] font-medium text-ink-muted">
                 Otras fuentes
               </p>
-              <p className="text-lg font-semibold tabular-nums text-gray-900">
+              <p className="text-lg font-semibold tabular-nums text-ink">
                 {formatNum(channelInsight.crmOther)}
               </p>
             </div>
           </div>
         )}
         {channelInsight && (
-          <p className="text-xs text-gray-500 mb-3">
+          <p className="text-xs text-ink-muted mb-3">
             Mayor desfase en{' '}
-            <span className="capitalize font-semibold text-gray-800">
+            <span className="capitalize font-semibold text-ink-soft">
               {channelInsight.worstGap.channel}
             </span>
             . Ecommerce, messenger e integrations no son fallos de ads.
@@ -873,14 +871,14 @@ export default function MetricsDashboard({
         )}
         <Surface padded={false}>
           {attributionRows.length === 0 ? (
-            <p className="text-sm text-gray-600 py-10 text-center">
+            <p className="text-sm text-ink-muted py-10 text-center">
               Sin series de canal en el periodo.
             </p>
           ) : (
             <div className="overflow-x-auto">
               <table className="w-full text-left text-sm">
                 <thead>
-                  <tr className="border-b border-gray-200 bg-gray-50/80 text-[11px] uppercase tracking-wider text-gray-500">
+                  <tr className="border-b border-border bg-mist-50 text-[12px] font-medium text-ink-muted">
                     <th className="py-3 px-4 font-semibold">Canal</th>
                     <th className="py-3 pr-4 font-semibold min-w-[160px]">
                       Inversión
@@ -900,8 +898,8 @@ export default function MetricsDashboard({
                   {attributionRows.map((row) => (
                     <tr
                       key={row.channel}
-                      className={`border-b border-gray-100 hover:bg-brand-50/40 ${
-                        row.spend > 0 ? 'bg-white' : 'bg-gray-50/40'
+                      className={`border-b border-mist-100 hover:bg-brand-50/40 ${
+                        row.spend > 0 ? 'bg-white' : 'bg-mist-50/40'
                       }`}
                     >
                       <td className="py-3 px-4">
@@ -913,7 +911,7 @@ export default function MetricsDashboard({
                             {row.channel}
                           </Link>
                         ) : (
-                          <span className="text-gray-600 font-medium capitalize">
+                          <span className="text-ink-muted font-medium capitalize">
                             {row.channel}
                           </span>
                         )}
@@ -921,10 +919,10 @@ export default function MetricsDashboard({
                       <td className="py-3 pr-4">
                         {row.spend ? (
                           <div className="flex items-center gap-2 min-w-[140px]">
-                            <span className="tabular-nums text-gray-900 w-[4.5rem]">
+                            <span className="tabular-nums text-ink w-[4.5rem]">
                               {formatEur(row.spend)}
                             </span>
-                            <div className="h-1.5 flex-1 rounded-full bg-gray-100">
+                            <div className="h-1.5 flex-1 rounded-full bg-mist-100">
                               <div
                                 className="h-1.5 rounded-full bg-brand-500"
                                 style={{
@@ -937,13 +935,13 @@ export default function MetricsDashboard({
                             </div>
                           </div>
                         ) : (
-                          <span className="text-gray-400">—</span>
+                          <span className="text-ink-faint">—</span>
                         )}
                       </td>
-                      <td className="py-3 pr-4 tabular-nums text-gray-800">
+                      <td className="py-3 pr-4 tabular-nums text-ink-soft">
                         {formatNum(row.platformLeads)}
                       </td>
-                      <td className="py-3 pr-4 tabular-nums text-gray-800">
+                      <td className="py-3 pr-4 tabular-nums text-ink-soft">
                         {hasCrm ? formatNum(row.crmLeads) : '—'}
                       </td>
                       <td className="py-3 pr-4">
@@ -960,24 +958,24 @@ export default function MetricsDashboard({
                           '—'
                         )}
                       </td>
-                      <td className="py-3 pr-4 tabular-nums font-semibold text-gray-900">
+                      <td className="py-3 pr-4 tabular-nums font-semibold text-ink">
                         {row.ventas > 0 ? formatNum(row.ventas) : '—'}
                       </td>
-                      <td className="py-3 pr-4 tabular-nums text-gray-800">
+                      <td className="py-3 pr-4 tabular-nums text-ink-soft">
                         {row.cac > 0 ? formatEurCents(row.cac) : '—'}
                       </td>
-                      <td className="py-3 pr-4 tabular-nums text-gray-800">
+                      <td className="py-3 pr-4 tabular-nums text-ink-soft">
                         {row.importe > 0 ? formatEur(row.importe) : '—'}
                       </td>
-                      <td className="py-3 pr-4 tabular-nums text-gray-800">
+                      <td className="py-3 pr-4 tabular-nums text-ink-soft">
                         {row.roas > 0 ? `${formatNum(row.roas)}x` : '—'}
                       </td>
-                      <td className="py-3 pr-4 tabular-nums text-gray-800">
+                      <td className="py-3 pr-4 tabular-nums text-ink-soft">
                         {row.cplPlatform
                           ? formatEurCents(row.cplPlatform)
                           : '—'}
                       </td>
-                      <td className="py-3 pr-4 tabular-nums text-gray-800">
+                      <td className="py-3 pr-4 tabular-nums text-ink-soft">
                         {hasCrm && row.cplCrm
                           ? formatEurCents(row.cplCrm)
                           : '—'}
@@ -987,9 +985,9 @@ export default function MetricsDashboard({
                 </tbody>
                 {attributionRows.length > 0 && (
                   <tfoot>
-                    <tr className="bg-gray-50 font-semibold border-t border-gray-200">
-                      <td className="py-3 px-4 text-gray-900">Total</td>
-                      <td className="py-3 pr-4 tabular-nums text-gray-900">
+                    <tr className="bg-mist-50 font-semibold border-t border-border">
+                      <td className="py-3 px-4 text-ink">Total</td>
+                      <td className="py-3 pr-4 tabular-nums text-ink">
                         {attributionTotals.spend
                           ? formatEur(attributionTotals.spend)
                           : '—'}
@@ -1014,10 +1012,10 @@ export default function MetricsDashboard({
                           '—'
                         )}
                       </td>
-                      <td className="py-3 pr-4 tabular-nums text-gray-900">
+                      <td className="py-3 pr-4 tabular-nums text-ink">
                         {formatNum(attributionTotals.ventas || ventasCount)}
                       </td>
-                      <td className="py-3 pr-4 tabular-nums text-gray-900">
+                      <td className="py-3 pr-4 tabular-nums text-ink">
                         {(attributionTotals.ventas || ventasCount) > 0 &&
                         attributionTotals.spend > 0
                           ? formatEurCents(
@@ -1028,7 +1026,7 @@ export default function MetricsDashboard({
                             ? formatEurCents(periodTotals.cac)
                             : '—'}
                       </td>
-                      <td className="py-3 pr-4 tabular-nums text-gray-900">
+                      <td className="py-3 pr-4 tabular-nums text-ink">
                         {attributionTotals.importe > 0 ||
                         periodTotals.revenue > 0
                           ? formatEur(
@@ -1084,10 +1082,10 @@ function HeroStat({
 }) {
   return (
     <div className="min-w-0">
-      <p className="text-[11px] font-semibold uppercase tracking-[0.12em] text-gray-500">
+      <p className="text-[13px] font-medium text-ink-muted">
         {label}
       </p>
-      <p className="mt-1.5 text-2xl md:text-3xl font-semibold tracking-tight text-gray-900 tabular-nums leading-none">
+      <p className="mt-1.5 text-2xl md:text-3xl font-semibold tracking-tight text-ink tabular-nums leading-none">
         {value}
       </p>
       <div className="mt-2">{chip}</div>
diff --git a/src/components/ui.tsx b/src/components/ui.tsx
index 4f9510d..c7cbb0e 100644
--- a/src/components/ui.tsx
+++ b/src/components/ui.tsx
@@ -1,6 +1,12 @@
 import React from 'react';
 
-/** Título de página unificado para todo el Centro de Mando. */
+/**
+ * Primitivas del Centro de Mando.
+ * Reglas: un acento (naranja), etiquetas en frase normal, radio 12px,
+ * jerarquía por tono de fondo y no por sombras.
+ */
+
+/** Título de página unificado. El eyebrow se dibuja con la regla naranja del brandbook. */
 export function PageHeader({
   eyebrow,
   title,
@@ -13,24 +19,25 @@ export function PageHeader({
   actions?: React.ReactNode;
 }) {
   return (
-    <div className="mb-6 md:mb-8 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
-      <div className="min-w-0 space-y-1.5">
+    <div className="mb-7 md:mb-9 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+      <div className="min-w-0">
         {eyebrow ? (
-          <p className="text-[10px] font-semibold uppercase tracking-[0.16em] text-brand-600">
+          <p className="mb-2 flex items-center gap-2 text-[13px] font-medium text-ink-muted">
+            <span aria-hidden className="h-px w-5 bg-brand-500" />
             {eyebrow}
           </p>
         ) : null}
-        <h1 className="text-2xl md:text-3xl font-semibold tracking-tight text-gray-900 text-balance">
+        <h1 className="display text-[2rem] leading-[1.05] md:text-[2.5rem] text-ink text-balance">
           {title}
         </h1>
         {description ? (
-          <p className="text-sm text-gray-600 max-w-2xl leading-relaxed">
+          <p className="mt-2.5 max-w-[62ch] text-[15px] leading-relaxed text-ink-muted">
             {description}
           </p>
         ) : null}
       </div>
       {actions ? (
-        <div className="flex flex-wrap items-center gap-2 shrink-0">{actions}</div>
+        <div className="flex shrink-0 flex-wrap items-center gap-2">{actions}</div>
       ) : null}
     </div>
   );
@@ -48,8 +55,8 @@ export function Surface({
 }) {
   return (
     <div
-      className={`rounded-2xl border border-gray-200 bg-white shadow-sm ${
-        padded ? 'p-4 md:p-5' : ''
+      className={`rounded-xl border border-border bg-card ${
+        padded ? 'p-5 md:p-6' : ''
       } ${className}`}
     >
       {children}
@@ -65,15 +72,16 @@ export function SectionTitle({
   description?: string;
 }) {
   return (
-    <div className="mb-3">
-      <h2 className="text-base font-semibold text-gray-900">{title}</h2>
+    <div className="mb-4">
+      <h2 className="text-[17px] font-medium leading-tight text-ink">{title}</h2>
       {description ? (
-        <p className="text-xs text-gray-500 mt-0.5">{description}</p>
+        <p className="mt-1 text-[13px] text-ink-muted">{description}</p>
       ) : null}
     </div>
   );
 }
 
+/** Estado vacío: dice qué pasa y qué hacer, sin decorar. */
 export function EmptyState({
   title,
   description,
@@ -82,10 +90,10 @@ export function EmptyState({
   description?: string;
 }) {
   return (
-    <div className="rounded-2xl border border-dashed border-gray-300 bg-gray-50 px-6 py-10 text-center">
-      <p className="text-sm font-medium text-gray-800">{title}</p>
+    <div className="rounded-xl border border-dashed border-mist-300 bg-mist-50 px-6 py-12 text-center">
+      <p className="text-[15px] font-medium text-ink">{title}</p>
       {description ? (
-        <p className="text-xs text-gray-600 mt-1.5 max-w-md mx-auto leading-relaxed">
+        <p className="mx-auto mt-1.5 max-w-md text-[13px] leading-relaxed text-ink-muted">
           {description}
         </p>
       ) : null}
@@ -93,7 +101,7 @@ export function EmptyState({
   );
 }
 
-/** Selector de periodo / pestañas — contraste alto sobre fondo blanco. */
+/** Selector de periodo / pestañas. Activo en tinta sobre blanco; el naranja se reserva para acciones. */
 export function SegmentedControl<T extends string>({
   value,
   options,
@@ -105,18 +113,19 @@ export function SegmentedControl<T extends string>({
   onChange: (id: T) => void;
   size?: 'sm' | 'md';
 }) {
-  const pad = size === 'sm' ? 'px-2.5 py-1 text-xs' : 'px-3 py-1.5 text-sm';
+  const pad = size === 'sm' ? 'px-2.5 py-1 text-[13px]' : 'px-3 py-1.5 text-sm';
   return (
-    <div className="flex gap-1 rounded-lg border border-gray-200 p-0.5 bg-gray-100">
+    <div className="inline-flex gap-0.5 rounded-md border border-border bg-mist-100 p-0.5">
       {options.map((o) => (
         <button
           key={o.id}
           type="button"
           onClick={() => onChange(o.id)}
-          className={`${pad} rounded-md font-semibold transition-colors ${
+          aria-pressed={value === o.id}
+          className={`${pad} rounded-sm font-medium transition-colors ${
             value === o.id
-              ? 'bg-brand-500 text-white shadow-sm'
-              : 'text-gray-600 hover:text-gray-900 hover:bg-white'
+              ? 'bg-ink text-white'
+              : 'text-ink-muted hover:bg-white hover:text-ink'
           }`}
         >
           {o.label}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 33f7d0e..7e19d9a 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,5 +1,10 @@
 import type { Config } from "tailwindcss";
 
+/**
+ * Tokens de marca 4Ventures (brandbook):
+ *  Midnight #07101E · Burnt Orange #FF5D00 · Mint #F0FCF0 · Mist #B1C3CD
+ * Un solo acento (naranja). La jerarquía se construye con tono, no con sombras.
+ */
 const config: Config = {
   darkMode: ["class"],
   content: [
@@ -10,21 +15,57 @@ const config: Config = {
   theme: {
     extend: {
       fontFamily: {
-        sans: ['var(--font-sans)', 'ui-sans-serif', 'system-ui', 'sans-serif'],
+        sans: ["var(--font-sans)", "ui-sans-serif", "system-ui", "sans-serif"],
+        display: ["var(--font-display)", "Georgia", "serif"],
       },
       colors: {
-        background: "#FFFFFF",
-        card: "#FFFFFF",
-        sidebar: "#FFFFFF",
-        border: "#E5E7EB",
+        background: "var(--background)",
+        card: "var(--card)",
+        sidebar: "var(--sidebar)",
+        border: "var(--border)",
+        ink: {
+          DEFAULT: "#07101E",
+          soft: "#2B3744",
+          muted: "#5B6B78",
+          faint: "#8A99A6",
+        },
+        mist: {
+          50: "#F6F8F7",
+          100: "#EEF2F1",
+          200: "#DCE4E8",
+          300: "#B1C3CD",
+          400: "#8FA4B1",
+        },
+        mint: {
+          DEFAULT: "#F0FCF0",
+          200: "#D9F3DA",
+        },
         brand: {
-          50: "#FFF8F0",
-          200: "#F5C796",
-          400: "#EDA05A",
-          500: "#E58A3C",
-          600: "#D07528",
-          700: "#B35E1B"
-        }
+          50: "#FFF1E8",
+          100: "#FFE0CC",
+          200: "#FFC4A0",
+          400: "#FF7A2E",
+          500: "#FF5D00",
+          600: "#E04F00",
+          700: "#B84100",
+        },
+      },
+      borderRadius: {
+        DEFAULT: "12px",
+        sm: "8px",
+        md: "10px",
+        lg: "12px",
+        xl: "12px",
+        "2xl": "16px",
+        "3xl": "20px",
+      },
+      boxShadow: {
+        sm: "0 1px 0 0 rgba(7, 16, 30, 0.04)",
+        DEFAULT: "0 1px 2px 0 rgba(7, 16, 30, 0.06)",
+        md: "0 2px 8px -2px rgba(7, 16, 30, 0.10)",
+        lg: "0 12px 32px -12px rgba(7, 16, 30, 0.18)",
+        xl: "0 24px 48px -16px rgba(7, 16, 30, 0.24)",
+        brand: "0 8px 24px -8px rgba(255, 93, 0, 0.45)",
       },
     },
   },