diff --git a/src/components/MetricsDashboard.tsx b/src/components/MetricsDashboard.tsx
index 583eb99..038b901 100644
--- a/src/components/MetricsDashboard.tsx
+++ b/src/components/MetricsDashboard.tsx
@@ -1,18 +1,22 @@
 'use client';
 
-import React, { useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 import Link from 'next/link';
 import {
   ArrowDownRight,
   ArrowUpRight,
   DollarSign,
+  GitCompare,
+  Globe,
+  Handshake,
+  Info,
+  Megaphone,
   Minus,
+  MousePointerClick,
+  Search,
   Target,
   TrendingUp,
   Users,
-  MousePointerClick,
-  Globe,
-  Search,
 } from 'lucide-react';
 import {
   AdDailyRow,
@@ -23,6 +27,7 @@ import {
   Delta,
   MetricTotals,
   formatEur,
+  formatEurCents,
   formatNum,
   formatPct,
   attributionCross,
@@ -36,7 +41,7 @@ import {
   withCohortFromDeals,
   KpiWeeklyRow,
 } from '@/lib/metrics';
-import { PageHeader } from '@/components/ui';
+import { PageHeader, Surface } from '@/components/ui';
 import SyncNowButton from '@/components/SyncNowButton';
 import { useDateRange } from '@/components/DateRangeContext';
 import { OrganicDailyRow } from '@/lib/organic';
@@ -48,11 +53,46 @@ type Card = {
   format: (v: number) => string;
   icon: React.ReactNode;
   invert?: boolean;
-  /** Business outcome from Clientify won deals. */
   cohort?: boolean;
 };
 
-function DeltaTriple({
+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';
+  const good = invert ? v < 0 : v > 0;
+  return good
+    ? 'text-emerald-800 bg-emerald-50 border-emerald-200'
+    : 'text-red-700 bg-red-50 border-red-200';
+}
+
+function DeltaChip({
+  label,
+  v,
+  invert,
+  title,
+}: {
+  label: string;
+  v: number | null;
+  invert?: boolean;
+  title?: string;
+}) {
+  const Icon =
+    v === null || v === 0 ? Minus : (invert ? v < 0 : v > 0) ? ArrowUpRight : ArrowDownRight;
+  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(
+        v,
+        invert
+      )}`}
+    >
+      <Icon className="h-3 w-3" />
+      {label} {formatPct(v)}
+    </span>
+  );
+}
+
+function DeltaRow({
   delta,
   invert,
   empty,
@@ -65,102 +105,197 @@ function DeltaTriple({
   empty?: boolean;
   format: (v: number) => string;
   current: number;
-  /** Hide WoW when selected range is longer than a week. */
   showWow: boolean;
 }) {
   if (empty) {
     return (
-      <p className="mt-3 text-[11px] text-gray-500 border border-dashed border-gray-200 rounded-md px-2 py-2 text-center">
-        Sin cierres en este rango — amplía el periodo o revisa oportunidades
-        ganadas en el CRM
+      <p className="mt-3 text-[11px] leading-snug text-gray-500">
+        Sin cierres en este rango. Amplía el periodo o revisa oportunidades
+        ganadas en el CRM.
       </p>
     );
   }
-  const cells: {
-    label: string;
-    v: number | null;
-    base: number | null;
-  }[] = [
-    ...(showWow
-      ? [{ label: 'WoW', v: delta.wow, base: delta.wowBase }]
-      : []),
-    { label: 'MoM', v: delta.mom, base: delta.momBase },
-    { label: 'YoY', v: delta.yoy, base: delta.yoyBase },
+  const items: { label: string; v: number | null; base: number | null }[] = [
+    ...(showWow ? [{ label: 'sem.', v: delta.wow, base: delta.wowBase }] : []),
+    { label: 'mes ant.', v: delta.mom, base: delta.momBase },
+    { label: 'año ant.', v: delta.yoy, base: delta.yoyBase },
   ];
   return (
-    <div
-      className={`mt-3 grid gap-1.5 ${
-        showWow ? 'grid-cols-3' : 'grid-cols-2'
-      }`}
-    >
-      {cells.map((c) => {
-        const good = c.v === null ? null : invert ? c.v < 0 : c.v > 0;
-        const color =
-          c.v === null
-            ? 'text-gray-500'
-            : good
-              ? 'text-emerald-700'
-              : c.v === 0
-                ? 'text-gray-600'
-                : 'text-red-600';
-        const Icon =
-          c.v === null || c.v === 0
-            ? Minus
-            : good
-              ? ArrowUpRight
-              : ArrowDownRight;
+    <div className="mt-3 flex flex-wrap gap-1.5">
+      {items.map((c) => {
         const hasBase =
           c.base !== null && Number.isFinite(c.base) && !(c.base === 0 && c.v === null);
-        const absDelta =
-          hasBase && c.base !== null ? current - c.base : null;
         return (
-          <div
+          <DeltaChip
             key={c.label}
-            className="rounded-md bg-gray-50 border border-gray-200 px-1.5 py-1.5 text-center"
-          >
-            <p className="text-[10px] font-semibold uppercase tracking-wider text-gray-600">
-              {c.label}
-            </p>
-            <p
-              className={`text-xs font-bold inline-flex items-center justify-center gap-0.5 ${color}`}
-            >
-              <Icon className="w-3.5 h-3.5" />
-              {formatPct(c.v)}
-            </p>
-            {hasBase ? (
-              <>
-                <p className="text-[11px] font-semibold text-gray-800 mt-1 tabular-nums leading-tight">
-                  prev {format(c.base ?? 0)}
-                </p>
-                {absDelta !== null && (
-                  <p
-                    className={`text-[10px] font-medium tabular-nums leading-tight ${color}`}
-                  >
-                    Δ{' '}
-                    {absDelta > 0
-                      ? `+${format(absDelta)}`
-                      : format(absDelta)}
-                  </p>
-                )}
-              </>
-            ) : (
-              <p className="text-[10px] text-gray-500 mt-1 leading-tight">
-                sin histórico
-              </p>
-            )}
-          </div>
+            label={c.label}
+            v={c.v}
+            invert={invert}
+            title={
+              hasBase
+                ? `Anterior: ${format(c.base ?? 0)} · ahora ${format(current)}`
+                : 'Sin histórico suficiente'
+            }
+          />
         );
       })}
     </div>
   );
 }
 
-function gapClass(gap: number): string {
-  if (gap === 0) return 'text-gray-600';
+function gapTone(gap: number): string {
+  if (gap === 0) return 'text-gray-700 bg-gray-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-700';
-  if (abs <= 25) return 'text-amber-700';
-  return 'text-red-600';
+  if (abs <= 5) return 'text-emerald-800 bg-emerald-50 border border-emerald-200';
+  return 'text-red-800 bg-red-50 border border-red-200';
+}
+
+function SparkBars({
+  points,
+  color,
+  formatValue,
+}: {
+  points: { date: string; value: number }[];
+  color: string;
+  formatValue: (v: number) => string;
+}) {
+  if (points.length === 0) {
+    return <p className="text-xs text-gray-500 py-8 text-center">Sin filas diarias.</p>;
+  }
+  const max = Math.max(1, ...points.map((p) => p.value));
+  const first = points[0]?.date;
+  const last = points[points.length - 1]?.date;
+  const fmtDay = (d?: string) =>
+    d
+      ? new Date(`${d}T00:00:00`).toLocaleDateString('es-ES', {
+          day: 'numeric',
+          month: 'short',
+        })
+      : '';
+
+  return (
+    <div>
+      <div className="flex items-end justify-between text-[10px] text-gray-500 mb-1 tabular-nums">
+        <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">
+        {points.map((d) => (
+          <div
+            key={d.date}
+            className="flex-1 min-w-0 h-full flex items-end"
+            title={`${d.date}: ${formatValue(d.value)}`}
+          >
+            <div
+              className={`w-full rounded-t ${color}`}
+              style={{ height: `${Math.max(6, (d.value / max) * 100)}%` }}
+            />
+          </div>
+        ))}
+      </div>
+      <div className="flex justify-between text-[10px] text-gray-500 mt-1.5 tabular-nums">
+        <span>{fmtDay(first)}</span>
+        <span>{fmtDay(last)}</span>
+      </div>
+    </div>
+  );
+}
+
+function SectionHead({
+  icon,
+  title,
+  hint,
+}: {
+  icon: React.ReactNode;
+  title: string;
+  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">
+        {icon}
+      </span>
+      <div>
+        <h2 className="text-base font-semibold text-gray-900 tracking-tight">
+          {title}
+        </h2>
+        <p className="text-xs text-gray-500 mt-0.5">{hint}</p>
+      </div>
+    </div>
+  );
+}
+
+function MetricTile({
+  label,
+  hint,
+  value,
+  icon,
+  delta,
+  invert,
+  empty,
+  format,
+  current,
+  showWow,
+}: {
+  label: string;
+  hint: string;
+  value: string;
+  icon: React.ReactNode;
+  delta: Delta;
+  invert?: boolean;
+  empty?: boolean;
+  format: (v: number) => string;
+  current: number;
+  showWow: boolean;
+}) {
+  return (
+    <div className="rounded-2xl border border-gray-200 bg-white p-4 md:p-5 shadow-sm h-full">
+      <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>
+      </div>
+      <p className="mt-2 text-3xl font-semibold tracking-tight text-gray-900 tabular-nums leading-none">
+        {value}
+      </p>
+      <p className="text-xs text-gray-500 mt-2 leading-snug">{hint}</p>
+      <DeltaRow
+        delta={delta}
+        invert={invert}
+        empty={empty}
+        format={format}
+        current={current}
+        showWow={showWow}
+      />
+    </div>
+  );
+}
+
+function StatMini({
+  label,
+  value,
+  hint,
+  icon,
+}: {
+  label: string;
+  value: string;
+  hint: string;
+  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">
+        {icon}
+        {label}
+      </p>
+      <p className="text-2xl font-semibold text-gray-900 mt-1.5 tabular-nums tracking-tight">
+        {value}
+      </p>
+      <p className="text-xs text-gray-500 mt-1">{hint}</p>
+    </div>
+  );
 }
 
 export default function MetricsDashboard({
@@ -203,6 +338,10 @@ export default function MetricsDashboard({
   integrations?: any[];
   cohortSource?: 'deals' | 'cliente_leads' | 'none';
 }) {
+  void tenantId;
+  void week;
+  void daily;
+
   const { since, until, label: rangeHint } = useDateRange();
 
   const rangedDaily = useMemo(() => {
@@ -235,7 +374,6 @@ export default function MetricsDashboard({
     return withCohortFromDeals(base, rangedDeals);
   }, [rangedDaily, rangedDeals, weeklyRows, since, until, month]);
 
-  /** Comparatives relative to the selected range (not “today”). */
   const rangeDeltas = useMemo(
     () => buildRangeDeltas(dailyRows, wonDeals, since, until),
     [dailyRows, wonDeals, since, until]
@@ -300,89 +438,73 @@ export default function MetricsDashboard({
   const revenueMissing =
     hasCohort && periodTotals.revenue <= 0 && cohortFromLeads;
   const showWow = rangeDaySpan(since, until) <= 7;
+  const cplCrm =
+    hasCrm && crmPeriodTotal > 0 ? periodTotals.spend / crmPeriodTotal : 0;
+  const gapAdsCrm = hasCrm ? crmPeriodTotal - periodTotals.leads : 0;
 
   const organicPeriod = useMemo(() => {
-    const rows = organicRows.filter((r) => {
-      const d = (r.day || r.date || '').slice(0, 10);
-      return d >= since && d <= until;
-    });
-    const gscClicks = rows.reduce((a, r) => a + (Number(r.gsc_clicks) || 0), 0);
-    const gscImpressions = rows.reduce(
-      (a, r) => a + (Number(r.gsc_impressions) || 0),
-      0
-    );
-    const ga4Sessions = rows.reduce(
-      (a, r) => a + (Number(r.ga4_sessions) || 0),
-      0
-    );
-    const ga4Conversions = rows.reduce(
-      (a, r) => a + (Number(r.ga4_conversions) || 0),
-      0
-    );
-    const denom = periodTotals.leads + ga4Conversions;
-    return {
-      gscClicks,
-      gscImpressions,
-      ga4Sessions,
-      ga4Conversions,
-      organicShare: denom > 0 ? (ga4Conversions / denom) * 100 : 0,
-    };
+    return organicPeriodSafe(organicRows, since, until, periodTotals.leads);
   }, [organicRows, since, until, periodTotals.leads]);
 
+  const seoCtr =
+    organicPeriod.gscImpressions > 0
+      ? (organicPeriod.gscClicks / organicPeriod.gscImpressions) * 100
+      : 0;
+
   const cards: Card[] = [
     {
       key: 'spend',
       label: 'Inversión ads',
       hint: 'Gasto Meta + Google del periodo',
       format: formatEur,
-      icon: <DollarSign className="w-4 h-4 text-brand-600" />,
+      icon: <DollarSign className="w-4 h-4" />,
     },
     {
       key: 'leads',
       label: 'Leads plataforma',
-      hint: 'Conversiones reportadas por ads (no CRM)',
+      hint: 'Conversiones que reportan los anuncios',
       format: formatNum,
-      icon: <Users className="w-4 h-4 text-blue-600" />,
+      icon: <Users className="w-4 h-4" />,
     },
     {
       key: 'cpl',
       label: 'CPL ads',
-      hint: 'Inversión ÷ leads plataforma',
-      format: (v) => `${formatNum(v)} €`,
-      icon: <MousePointerClick className="w-4 h-4 text-violet-600" />,
+      hint: 'Inversión ÷ leads de plataforma',
+      format: (v) => formatEurCents(v),
+      icon: <MousePointerClick className="w-4 h-4" />,
       invert: true,
     },
     {
       key: 'deals',
-      label: 'Ventas (CRM)',
+      label: 'Ventas CRM',
       hint: hasCohort
         ? cohortFromLeads
-          ? 'Contactos marcados cliente en el CRM (sin importe)'
-          : `Oportunidades ganadas · importe ${formatEur(periodTotals.revenue)}`
-        : 'Oportunidades ganadas en el CRM en el periodo',
+          ? 'Contactos marcados cliente (sin importe)'
+          : `Oportunidades ganadas · ${formatEur(periodTotals.revenue)}`
+        : 'Oportunidades ganadas en el periodo',
       format: formatNum,
-      icon: <TrendingUp className="w-4 h-4 text-emerald-600" />,
+      icon: <TrendingUp className="w-4 h-4" />,
       cohort: true,
     },
     {
       key: 'cac',
       label: 'CAC',
       hint: hasCohort
-        ? `Inversión ads ÷ ${formatNum(ventasCount)} ventas`
-        : 'Inversión ÷ deals ganados (no leads)',
-      format: (v) => `${formatNum(v)} €`,
-      icon: <Target className="w-4 h-4 text-amber-600" />,
+        ? `Inversión ÷ ${formatNum(ventasCount)} ventas`
+        : 'Inversión ÷ deals ganados',
+      format: (v) => formatEurCents(v),
+      icon: <Target className="w-4 h-4" />,
       invert: true,
       cohort: true,
     },
     {
       key: 'roas',
-      label: 'ROAS ventas',
+      label: 'ROAS',
       hint: revenueMissing
-        ? 'Falta importe en el CRM para calcular ROAS'
-        : `Importe CRM (${formatEur(periodTotals.revenue)}) ÷ inversión ads (${formatEur(periodTotals.spend)})`,
+        ? 'Falta importe en el CRM'
+        : `Importe CRM ÷ inversión ads`,
       format: (v) => `${formatNum(v)}x`,
-      icon: <TrendingUp className="w-4 h-4 text-emerald-700" />,
+      icon: <TrendingUp className="w-4 h-4" />,
       cohort: true,
     },
   ];
@@ -402,12 +524,9 @@ export default function MetricsDashboard({
       .map(([date, v]) => ({ date, ...v }));
   }, [rangedDaily]);
 
-  const maxSpend = Math.max(1, ...dailyChart.map((d) => d.spend));
-
   const channelInsight = useMemo(() => {
     if (!attributionRows.length) return null;
     const paid = attributionRows.filter((r) => r.spend > 0);
-    const top = paid[0] || attributionRows[0];
     const worstGap = [...attributionRows].sort(
       (a, b) => Math.abs(b.gap) - Math.abs(a.gap)
     )[0];
@@ -415,7 +534,7 @@ export default function MetricsDashboard({
     const crmTotal = attributionRows.reduce((a, r) => a + r.crmLeads, 0);
     const crmPaid = paid.reduce((a, r) => a + r.crmLeads, 0);
     const crmOther = crmTotal - crmPaid;
-    return { top, worstGap, platTotal, crmTotal, crmPaid, crmOther };
+    return { worstGap, platTotal, crmTotal, crmPaid, crmOther };
   }, [attributionRows]);
 
   const crmName = useMemo(() => {
@@ -437,480 +556,557 @@ export default function MetricsDashboard({
   const outcomeCards = cards.filter((c) =>
     ['deals', 'cac', 'roas'].includes(c.key)
   );
+  const spendMax = Math.max(1, ...attributionRows.map((r) => r.spend));
+  const heroRoasEmpty = !hasCohort;
+  const heroDeltas = rangeDeltas;
 
   return (
     <div className="space-y-8">
       <PageHeader
         eyebrow="Rendimiento"
         title="Métricas"
-        description={`${label}${portfolioWide ? ' · portafolio' : ''}. Un solo panel para el periodo ${rangeHint}.`}
+        description={`${label}${portfolioWide ? ' · portafolio' : ''} · ${rangeHint}`}
         actions={<SyncNowButton forceModule="metrics" />}
       />
 
-      {sparse && (
-        <p className="text-xs text-amber-800 border border-amber-300 bg-amber-50 rounded-lg px-3 py-2">
-          Histórico limitado: si faltan deltas o canales, el warehouse aún no
-          tiene semanas suficientes.
-        </p>
+      {(sparse || !hasCohort || (cohortFromLeads && hasCohort)) && (
+        <div className="space-y-2">
+          {sparse && (
+            <p className="text-xs text-amber-900 border border-amber-200 bg-amber-50 rounded-xl px-3 py-2">
+              Histórico limitado: el warehouse aún no tiene semanas suficientes
+              para algunos deltas.
+            </p>
+          )}
+          {!hasCohort && (
+            <p className="text-xs text-gray-700 border border-gray-200 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).`
+                : '.'}{' '}
+              El gasto de ads no cuenta como venta.
+            </p>
+          )}
+          {cohortFromLeads && hasCohort && (
+            <p className="text-xs text-amber-900 border border-amber-200 bg-amber-50 rounded-xl px-3 py-2">
+              Cohorte desde contactos «cliente» (no hay oportunidades ganadas
+              sincronizadas). El importe puede ir incompleto.
+            </p>
+          )}
+        </div>
       )}
 
-      {!hasCohort && (
-        <p className="text-xs text-gray-700 border border-gray-300 bg-gray-50 rounded-lg px-3 py-2">
-          Ventas / CAC / ROAS vacíos en <strong>{rangeHint}</strong>: no hay
-          deals ganados ni contactos con status «cliente» en este rango
-          {wonDeals.length
-            ? ` (sí hay ${formatNum(wonDeals.length)} en el histórico — prueba «30 días» o «Mes»).`
-            : '.'}{' '}
-          El gasto de ads no cuenta como venta.
-        </p>
-      )}
-      {cohortFromLeads && hasCohort && (
-        <p className="text-xs text-amber-900 border border-amber-300 bg-amber-50 rounded-lg px-3 py-2">
-          Cohorte desde contactos del CRM con status «cliente» (no hay oportunidades
-          ganadas sincronizadas). El importe puede ir incompleto.
-        </p>
-      )}
-
-      <div className="rounded-xl border border-gray-200 bg-gray-50 px-4 py-3 text-xs text-gray-700 space-y-1.5">
-        <p className="font-semibold text-gray-900 text-[11px] uppercase tracking-wider">
-          Cómo leer este panel
-        </p>
-        <p>
-          <strong>Publicidad:</strong> lo que Meta y Google dicen (gasto,
-          conversiones, CPL). No es el listado de clientes.
-        </p>
-        <p>
-          <strong>{crmName}:</strong> personas y ventas reales en el CRM. Un
-          lead de ads y un alta CRM casi nunca coinciden 1 a 1 (el gap lo
-          explica).
-        </p>
-        <p>
-          <strong>Web y SEO:</strong> visitas y clics orgánicos (Search Console
-          y Analytics). No se suman a los leads de anuncios.
+      <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">
+          Resumen del periodo
         </p>
+        <div className="grid grid-cols-2 lg:grid-cols-5 gap-4 md:gap-6">
+          <HeroStat
+            label="Inversión"
+            value={formatEur(periodTotals.spend)}
+            chip={
+              <DeltaChip
+                label="mes"
+                v={heroDeltas.spend.mom}
+                title="Vs mes anterior"
+              />
+            }
+          />
+          <HeroStat
+            label="CPL ads"
+            value={formatEurCents(periodTotals.cpl)}
+            chip={
+              <DeltaChip
+                label="mes"
+                v={heroDeltas.cpl.mom}
+                invert
+                title="Vs mes anterior · más bajo es mejor"
+              />
+            }
+          />
+          <HeroStat
+            label={`Leads ${crmName}`}
+            value={hasCrm ? formatNum(crmPeriodTotal) : '—'}
+            chip={
+              <span className="text-[11px] text-gray-500">
+                {formatNum(periodTotals.leads)} plat.
+              </span>
+            }
+          />
+          <HeroStat
+            label="Ventas"
+            value={hasCohort ? formatNum(periodTotals.deals) : '—'}
+            chip={
+              hasCohort ? (
+                <DeltaChip label="mes" v={heroDeltas.deals.mom} />
+              ) : (
+                <span className="text-[11px] text-gray-500">sin cierres</span>
+              )
+            }
+          />
+          <HeroStat
+            label="ROAS"
+            value={heroRoasEmpty ? '—' : `${formatNum(periodTotals.roas)}x`}
+            chip={
+              heroRoasEmpty ? (
+                <span className="text-[11px] text-gray-500">pendiente CRM</span>
+              ) : (
+                <DeltaChip label="mes" v={heroDeltas.roas.mom} />
+              )
+            }
+          />
+        </div>
       </div>
 
-      <section className="space-y-3">
-        <div>
-          <h2 className="text-sm font-semibold text-gray-900">
-            1. Publicidad
-          </h2>
-          <p className="text-xs text-gray-600 mt-0.5">
-            Inversión y conversiones de las plataformas de ads · {rangeHint}
+      <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">
+          <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="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">
+          <p>
+            <strong className="text-gray-800">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
+            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
+            y Analytics. No se suman a los leads de anuncios.
           </p>
         </div>
-        <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-4">
-          {adsCards.map((c) => {
-            const emptyCohort = Boolean(c.cohort) && !hasCohort;
-            const value = emptyCohort ? '—' : c.format(periodTotals[c.key]);
-            return (
-              <div
-                key={c.key}
-                className="bg-white border border-gray-200 rounded-xl p-5 shadow-sm"
-              >
-                <div className="flex items-center justify-between text-gray-700 mb-2">
-                  <span className="text-xs font-semibold uppercase tracking-wider">
-                    {c.label}
-                  </span>
-                  {c.icon}
-                </div>
-                <p className="text-2xl font-bold text-gray-900 tabular-nums">
-                  {value}
-                </p>
-                <p className="text-xs text-gray-600 mt-1">{c.hint}</p>
-                <DeltaTriple
-                  delta={rangeDeltas[c.key] ?? deltas[c.key]}
-                  invert={c.invert}
-                  empty={emptyCohort}
-                  format={c.format}
-                  current={periodTotals[c.key]}
-                  showWow={showWow}
-                />
-              </div>
-            );
-          })}
+      </details>
+
+      <section>
+        <SectionHead
+          icon={<Megaphone className="w-4 h-4" />}
+          title="Publicidad"
+          hint={`Meta + Google Ads · ${rangeHint}`}
+        />
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+          {adsCards.map((c) => (
+            <MetricTile
+              key={c.key}
+              label={c.label}
+              hint={c.hint}
+              value={c.format(periodTotals[c.key])}
+              icon={c.icon}
+              delta={rangeDeltas[c.key] ?? deltas[c.key]}
+              invert={c.invert}
+              format={c.format}
+              current={periodTotals[c.key]}
+              showWow={showWow}
+            />
+          ))}
+        </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">
+              Inversión por día
+            </p>
+            <SparkBars
+              points={dailyChart.map((d) => ({ date: d.date, value: d.spend }))}
+              color="bg-brand-500 hover:bg-brand-600"
+              formatValue={formatEur}
+            />
+          </Surface>
+          <Surface>
+            <p className="text-[11px] font-semibold uppercase tracking-[0.12em] text-gray-500 mb-3">
+              Leads de plataforma por día
+            </p>
+            <SparkBars
+              points={dailyChart.map((d) => ({ date: d.date, value: d.leads }))}
+              color="bg-sky-500 hover:bg-sky-600"
+              formatValue={formatNum}
+            />
+          </Surface>
         </div>
       </section>
 
-      <section className="space-y-3">
-        <div>
-          <h2 className="text-sm font-semibold text-gray-900">
-            2. Negocio ({crmName})
-          </h2>
-          <p className="text-xs text-gray-600 mt-0.5">
-            Altas y ventas del CRM · no uses estos números como si fueran los de
-            ads
-          </p>
-        </div>
-        <div className="grid grid-cols-2 lg:grid-cols-3 gap-3">
-        <div className="rounded-xl border border-gray-200 bg-white px-4 py-3 shadow-sm">
-          <p className="text-[11px] font-semibold uppercase tracking-wider text-gray-600">
-            Leads CRM
-          </p>
-          <p className="text-xl font-bold text-gray-900 mt-1 tabular-nums">
-            {hasCrm ? formatNum(crmPeriodTotal) : '—'}
-          </p>
-          <p className="text-xs text-gray-500 mt-1">
-            Altas en {crmName} en el periodo
-          </p>
-        </div>
-        <div className="rounded-xl border border-gray-200 bg-white px-4 py-3 shadow-sm">
-          <p className="text-[11px] font-semibold uppercase tracking-wider text-gray-600">
-            CPL CRM
-          </p>
-          <p className="text-xl font-bold text-gray-900 mt-1 tabular-nums">
-            {hasCrm && crmPeriodTotal > 0
-              ? `${formatNum(periodTotals.spend / crmPeriodTotal)} €`
-              : '—'}
-          </p>
-          <p className="text-xs text-gray-500 mt-1">
-            Inversión ads ÷ leads CRM
-          </p>
-        </div>
-        <div className="rounded-xl border border-gray-200 bg-white px-4 py-3 shadow-sm">
-          <p className="text-[11px] font-semibold uppercase tracking-wider text-gray-600">
-            Gap ads vs CRM
-          </p>
-          <p
-            className={`text-xl font-bold mt-1 tabular-nums ${
-              hasCrm ? gapClass(crmPeriodTotal - periodTotals.leads) : 'text-gray-400'
-            }`}
-          >
-            {hasCrm
-              ? `${crmPeriodTotal - periodTotals.leads > 0 ? '+' : ''}${formatNum(crmPeriodTotal - periodTotals.leads)}`
-              : '—'}
-          </p>
-          <p className="text-xs text-gray-500 mt-1">
-            CRM − conversiones ads · detalle por canal abajo
-          </p>
-        </div>
-        </div>
-        <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-4">
-          {outcomeCards.map((c) => {
-            const emptyCohort = Boolean(c.cohort) && !hasCohort;
-            const value = emptyCohort ? '—' : c.format(periodTotals[c.key]);
-            return (
-              <div
-                key={c.key}
-                className="bg-white border border-gray-200 rounded-xl p-5 shadow-sm"
-              >
-                <div className="flex items-center justify-between text-gray-700 mb-2">
-                  <span className="text-xs font-semibold uppercase tracking-wider">
-                    {c.label}
-                  </span>
-                  {c.icon}
-                </div>
-                <p className="text-2xl font-bold text-gray-900 tabular-nums">
-                  {value}
-                </p>
-                <p className="text-xs text-gray-600 mt-1">{c.hint}</p>
-                <DeltaTriple
-                  delta={rangeDeltas[c.key] ?? deltas[c.key]}
-                  invert={c.invert}
-                  empty={emptyCohort}
-                  format={c.format}
-                  current={periodTotals[c.key]}
-                  showWow={showWow}
-                />
-              </div>
-            );
-          })}
-        </div>
-      </section>
-
-      <section className="space-y-3">
-        <div>
-          <h2 className="text-sm font-semibold text-gray-900">3. Web y SEO</h2>
-          <p className="text-xs text-gray-600 mt-0.5">
-            Tráfico del sitio · mismo periodo · no es publicidad
-          </p>
-        </div>
-        <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
-        <div className="rounded-xl border border-gray-200 bg-white px-4 py-3 shadow-sm">
-          <p className="text-[11px] font-semibold uppercase tracking-wider text-gray-600 inline-flex items-center gap-1">
-            <Search className="w-3.5 h-3.5" /> Clics SEO
-          </p>
-          <p className="text-xl font-bold text-gray-900 mt-1 tabular-nums">
-            {formatNum(organicPeriod.gscClicks)}
-          </p>
-          <p className="text-xs text-gray-500 mt-1">Search Console</p>
-        </div>
-        <div className="rounded-xl border border-gray-200 bg-white px-4 py-3 shadow-sm">
-          <p className="text-[11px] font-semibold uppercase tracking-wider text-gray-600">
-            Impresiones SEO
-          </p>
-          <p className="text-xl font-bold text-gray-900 mt-1 tabular-nums">
-            {formatNum(organicPeriod.gscImpressions)}
-          </p>
-          <p className="text-xs text-gray-500 mt-1">Apariciones en Google</p>
-        </div>
-        <div className="rounded-xl border border-gray-200 bg-white px-4 py-3 shadow-sm">
-          <p className="text-[11px] font-semibold uppercase tracking-wider text-gray-600 inline-flex items-center gap-1">
-            <Globe className="w-3.5 h-3.5" /> Sesiones web
-          </p>
-          <p className="text-xl font-bold text-gray-900 mt-1 tabular-nums">
-            {formatNum(organicPeriod.ga4Sessions)}
-          </p>
-          <p className="text-xs text-gray-500 mt-1">Analytics (GA4)</p>
-        </div>
-        <div className="rounded-xl border border-gray-200 bg-white px-4 py-3 shadow-sm">
-          <p className="text-[11px] font-semibold uppercase tracking-wider text-gray-600">
-            Conv. web
-          </p>
-          <p className="text-xl font-bold text-gray-900 mt-1 tabular-nums">
-            {formatNum(organicPeriod.ga4Conversions)}
-          </p>
-          <p className="text-xs text-gray-500 mt-1">
-            Eventos GA4 · cuota {formatPct(organicPeriod.organicShare)}
-          </p>
-        </div>
-        </div>
-      </section>
-
-      <section className="bg-white border border-gray-200 rounded-xl p-5 space-y-4 shadow-sm">
-        <div className="flex flex-col sm:flex-row sm:items-start justify-between gap-2">
-          <div>
-            <h3 className="text-sm font-semibold text-gray-900">
-              4. Cruce por canal · ads vs {crmName}
-            </h3>
-            <p className="text-xs text-gray-600 mt-0.5">
-              Leads plat = conversiones que reporta el anuncio. Leads CRM =
-              altas en {crmName} según la fuente del contacto. Ventas =
-              oportunidades ganadas (importe {'>'} 0). Gap = CRM − plat.
+      <section>
+        <SectionHead
+          icon={<Handshake className="w-4 h-4" />}
+          title={`Negocio · ${crmName}`}
+          hint="Altas y ventas reales · no uses estos números como si fueran los de ads"
+        />
+        <div className="grid grid-cols-2 lg:grid-cols-3 gap-3 mb-3">
+          <StatMini
+            label="Leads CRM"
+            value={hasCrm ? formatNum(crmPeriodTotal) : '—'}
+            hint={`Altas en ${crmName}`}
+          />
+          <StatMini
+            label="CPL CRM"
+            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">
+              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
+                ? `${gapAdsCrm > 0 ? '+' : ''}${formatNum(gapAdsCrm)}`
+                : '—'}
+            </p>
+            <p className="text-xs text-gray-500 mt-1.5">
+              CRM − conversiones ads. Positivo = más altas en CRM que las que
+              reporta el anuncio.
             </p>
           </div>
-          <p className="text-xs text-gray-600 shrink-0 font-medium">
-            Gap = CRM − plat
-          </p>
         </div>
-        {channelInsight && (
-          <p className="text-xs text-gray-800 bg-gray-50 border border-gray-100 rounded-lg px-3 py-2">
-            <strong>Resumen:</strong> plat {formatNum(channelInsight.platTotal)}{' '}
-            vs CRM {formatNum(channelInsight.crmTotal)} (gap{' '}
-            {channelInsight.crmTotal - channelInsight.platTotal > 0 ? '+' : ''}
-            {formatNum(channelInsight.crmTotal - channelInsight.platTotal)}). De
-            los CRM, {formatNum(channelInsight.crmPaid)} en canales con gasto
-            ads y {formatNum(channelInsight.crmOther)} en otras fuentes
-            (integrations, ecommerce, messenger…). Mayor desfase en{' '}
-            <span className="capitalize font-semibold">
-              {channelInsight.worstGap.channel}
-            </span>
-            .
-          </p>
-        )}
-        {attributionRows.length === 0 ? (
-          <p className="text-sm text-gray-600 py-6 text-center">
-            Sin series de canal en el periodo.
-          </p>
-        ) : (
-          <div className="overflow-x-auto">
-            <table className="w-full text-left text-sm">
-              <thead className="text-gray-600 border-b border-gray-200">
-                <tr>
-                  <th className="py-2 pr-3 font-semibold">Canal</th>
-                  <th className="py-2 pr-3 font-semibold">Inversión</th>
-                  <th className="py-2 pr-3 font-semibold">Leads plat</th>
-                  <th className="py-2 pr-3 font-semibold">Leads CRM</th>
-                  <th className="py-2 pr-3 font-semibold">Gap</th>
-                  <th className="py-2 pr-3 font-semibold">Ventas</th>
-                  <th className="py-2 pr-3 font-semibold">Importe</th>
-                  <th className="py-2 pr-3 font-semibold">ROAS</th>
-                  <th className="py-2 pr-3 font-semibold">CPL plat</th>
-                  <th className="py-2 font-semibold">CPL CRM</th>
-                </tr>
-              </thead>
-              <tbody>
-                {attributionRows.map((row) => (
-                  <tr
-                    key={row.channel}
-                    className="border-b border-gray-100 hover:bg-gray-50"
-                  >
-                    <td className="py-2.5 pr-3">
-                      {row.spend > 0 ? (
-                        <Link
-                          href={`/dashboard/kpis/canal/${encodeURIComponent(row.channel)}`}
-                          className="text-brand-700 hover:text-brand-600 font-semibold capitalize"
-                        >
-                          {row.channel}
-                        </Link>
-                      ) : (
-                        <span className="text-gray-700 font-semibold capitalize">
-                          {row.channel}
-                        </span>
-                      )}
-                    </td>
-                    <td className="py-2.5 pr-3 text-gray-800 tabular-nums">
-                      {row.spend ? formatEur(row.spend) : '—'}
-                    </td>
-                    <td className="py-2.5 pr-3 text-gray-800 tabular-nums">
-                      {formatNum(row.platformLeads)}
-                    </td>
-                    <td className="py-2.5 pr-3 text-gray-800 tabular-nums">
-                      {hasCrm ? formatNum(row.crmLeads) : '—'}
-                    </td>
-                    <td
-                      className={`py-2.5 pr-3 font-semibold tabular-nums ${
-                        hasCrm ? gapClass(row.gap) : 'text-gray-500'
-                      }`}
-                    >
-                      {hasCrm
-                        ? `${row.gap > 0 ? '+' : ''}${formatNum(row.gap)}`
-                        : '—'}
-                    </td>
-                    <td className="py-2.5 pr-3 text-gray-900 font-semibold tabular-nums">
-                      {row.ventas > 0 ? formatNum(row.ventas) : '—'}
-                    </td>
-                    <td className="py-2.5 pr-3 text-gray-800 tabular-nums">
-                      {row.importe > 0 ? formatEur(row.importe) : '—'}
-                    </td>
-                    <td className="py-2.5 pr-3 text-gray-800 tabular-nums">
-                      {row.roas > 0 ? `${formatNum(row.roas)}x` : '—'}
-                    </td>
-                    <td className="py-2.5 pr-3 text-gray-800 tabular-nums">
-                      {row.cplPlatform
-                        ? `${formatNum(row.cplPlatform)} €`
-                        : '—'}
-                    </td>
-                    <td className="py-2.5 text-gray-800 tabular-nums">
-                      {hasCrm && row.cplCrm
-                        ? `${formatNum(row.cplCrm)} €`
-                        : '—'}
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-              {attributionRows.length > 0 && (
-                <tfoot>
-                  <tr className="border-t-2 border-gray-300 bg-gray-50 font-semibold">
-                    <td className="py-2.5 pr-3 text-gray-900">Total</td>
-                    <td className="py-2.5 pr-3 tabular-nums text-gray-900">
-                      {attributionTotals.spend
-                        ? formatEur(attributionTotals.spend)
-                        : '—'}
-                    </td>
-                    <td className="py-2.5 pr-3 tabular-nums">
-                      {formatNum(attributionTotals.platformLeads)}
-                    </td>
-                    <td className="py-2.5 pr-3 tabular-nums">
-                      {hasCrm ? formatNum(attributionTotals.crmLeads) : '—'}
-                    </td>
-                    <td
-                      className={`py-2.5 pr-3 tabular-nums ${
-                        hasCrm
-                          ? gapClass(attributionTotals.gap)
-                          : 'text-gray-500'
-                      }`}
-                    >
-                      {hasCrm
-                        ? `${attributionTotals.gap > 0 ? '+' : ''}${formatNum(attributionTotals.gap)}`
-                        : '—'}
-                    </td>
-                    <td className="py-2.5 pr-3 tabular-nums text-gray-900">
-                      {formatNum(
-                        attributionTotals.ventas || ventasCount
-                      )}
-                    </td>
-                    <td className="py-2.5 pr-3 tabular-nums text-gray-900">
-                      {attributionTotals.importe > 0 || periodTotals.revenue > 0
-                        ? formatEur(
-                            attributionTotals.importe || periodTotals.revenue
-                          )
-                        : '—'}
-                    </td>
-                    <td className="py-2.5 pr-3 tabular-nums">
-                      {attributionTotals.spend > 0 &&
-                      (attributionTotals.importe || periodTotals.revenue) > 0
-                        ? `${formatNum(
-                            (attributionTotals.importe ||
-                              periodTotals.revenue) / attributionTotals.spend
-                          )}x`
-                        : '—'}
-                    </td>
-                    <td className="py-2.5 pr-3 tabular-nums">
-                      {attributionTotals.platformLeads > 0
-                        ? `${formatNum(
-                            attributionTotals.spend /
-                              attributionTotals.platformLeads
-                          )} €`
-                        : '—'}
-                    </td>
-                    <td className="py-2.5 tabular-nums">
-                      {hasCrm && attributionTotals.crmLeads > 0
-                        ? `${formatNum(
-                            attributionTotals.spend /
-                              attributionTotals.crmLeads
-                          )} €`
-                        : '—'}
-                    </td>
-                  </tr>
-                </tfoot>
-              )}
-            </table>
-          </div>
-        )}
-
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 pt-1">
-          <div>
-            <h4 className="text-xs font-semibold uppercase tracking-wider text-gray-600 mb-2">
-              Ads · inversión / día
-            </h4>
-            {dailyChart.length === 0 ? (
-              <p className="text-xs text-gray-500">Sin filas diarias.</p>
-            ) : (
-              <div className="flex items-end gap-0.5 h-20 w-full">
-                {dailyChart.map((d) => (
-                  <div
-                    key={`s-${d.date}`}
-                    className="flex-1 min-w-0 h-full flex items-end"
-                    title={`${d.date}: ${formatEur(d.spend)}`}
-                  >
-                    <div
-                      className="w-full rounded-t bg-brand-400/80 hover:bg-brand-500"
-                      style={{
-                        height: `${Math.max(4, (d.spend / maxSpend) * 80)}px`,
-                      }}
-                    />
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
-          <div>
-            <h4 className="text-xs font-semibold uppercase tracking-wider text-gray-600 mb-2">
-              Ads · leads plat. / día
-            </h4>
-            {dailyChart.length === 0 ? (
-              <p className="text-xs text-gray-500">Sin filas diarias.</p>
-            ) : (
-              <div className="flex items-end gap-0.5 h-20 w-full">
-                {dailyChart.map((d) => (
-                  <div
-                    key={`l-${d.date}`}
-                    className="flex-1 min-w-0 h-full flex items-end"
-                    title={`${d.date}: ${formatNum(d.leads)} leads`}
-                  >
-                    <div
-                      className="w-full rounded-t bg-sky-400/80 hover:bg-sky-500"
-                      style={{
-                        height: `${Math.max(
-                          4,
-                          (d.leads /
-                            Math.max(1, ...dailyChart.map((x) => x.leads))) *
-                            80
-                        )}px`,
-                      }}
-                    />
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+          {outcomeCards.map((c) => {
+            const emptyCohort = Boolean(c.cohort) && !hasCohort;
+            return (
+              <MetricTile
+                key={c.key}
+                label={c.label}
+                hint={c.hint}
+                value={emptyCohort ? '—' : c.format(periodTotals[c.key])}
+                icon={c.icon}
+                delta={rangeDeltas[c.key] ?? deltas[c.key]}
+                invert={c.invert}
+                empty={emptyCohort}
+                format={c.format}
+                current={periodTotals[c.key]}
+                showWow={showWow}
+              />
+            );
+          })}
         </div>
-        <p className="text-[10px] text-gray-500">
-          Barras por día · mismo periodo del header
-        </p>
       </section>
 
+      <section>
+        <SectionHead
+          icon={<Globe className="w-4 h-4" />}
+          title="Web y SEO"
+          hint="Tráfico orgánico · mismo periodo · no es publicidad"
+        />
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
+          <StatMini
+            label="Clics SEO"
+            value={formatNum(organicPeriod.gscClicks)}
+            hint={`CTR ${seoCtr.toFixed(1)}% · Search Console`}
+            icon={<Search className="w-3.5 h-3.5" />}
+          />
+          <StatMini
+            label="Impresiones"
+            value={formatNum(organicPeriod.gscImpressions)}
+            hint="Apariciones en Google"
+          />
+          <StatMini
+            label="Sesiones web"
+            value={formatNum(organicPeriod.ga4Sessions)}
+            hint="Analytics (GA4)"
+            icon={<Globe className="w-3.5 h-3.5" />}
+          />
+          <StatMini
+            label="Conv. web"
+            value={formatNum(organicPeriod.ga4Conversions)}
+            hint={`Cuota vs ads ${organicPeriod.organicShare.toFixed(0)}%`}
+          />
+        </div>
+      </section>
+
+      <section>
+        <SectionHead
+          icon={<GitCompare className="w-4 h-4" />}
+          title={`Cruce por canal · ads vs ${crmName}`}
+          hint="Leads plat = el anuncio. Leads CRM = fuente del contacto. Gap = CRM − plat."
+        />
+        {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">
+                Plat.
+              </p>
+              <p className="text-lg font-semibold tabular-nums text-gray-900">
+                {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">
+                CRM
+              </p>
+              <p className="text-lg font-semibold tabular-nums text-gray-900">
+                {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">
+                Con gasto ads
+              </p>
+              <p className="text-lg font-semibold tabular-nums text-gray-900">
+                {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">
+                Otras fuentes
+              </p>
+              <p className="text-lg font-semibold tabular-nums text-gray-900">
+                {formatNum(channelInsight.crmOther)}
+              </p>
+            </div>
+          </div>
+        )}
+        {channelInsight && (
+          <p className="text-xs text-gray-500 mb-3">
+            Mayor desfase en{' '}
+            <span className="capitalize font-semibold text-gray-800">
+              {channelInsight.worstGap.channel}
+            </span>
+            . Ecommerce, messenger e integrations no son fallos de ads.
+          </p>
+        )}
+        <Surface padded={false}>
+          {attributionRows.length === 0 ? (
+            <p className="text-sm text-gray-600 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">
+                    <th className="py-3 px-4 font-semibold">Canal</th>
+                    <th className="py-3 pr-4 font-semibold min-w-[160px]">
+                      Inversión
+                    </th>
+                    <th className="py-3 pr-4 font-semibold">Plat.</th>
+                    <th className="py-3 pr-4 font-semibold">CRM</th>
+                    <th className="py-3 pr-4 font-semibold">Gap</th>
+                    <th className="py-3 pr-4 font-semibold">Ventas</th>
+                    <th className="py-3 pr-4 font-semibold">Importe</th>
+                    <th className="py-3 pr-4 font-semibold">ROAS</th>
+                    <th className="py-3 pr-4 font-semibold">CPL plat</th>
+                    <th className="py-3 pr-4 font-semibold">CPL CRM</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {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'
+                      }`}
+                    >
+                      <td className="py-3 px-4">
+                        {row.spend > 0 ? (
+                          <Link
+                            href={`/dashboard/kpis/canal/${encodeURIComponent(row.channel)}`}
+                            className="text-brand-700 hover:text-brand-600 font-semibold capitalize"
+                          >
+                            {row.channel}
+                          </Link>
+                        ) : (
+                          <span className="text-gray-600 font-medium capitalize">
+                            {row.channel}
+                          </span>
+                        )}
+                      </td>
+                      <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]">
+                              {formatEur(row.spend)}
+                            </span>
+                            <div className="h-1.5 flex-1 rounded-full bg-gray-100">
+                              <div
+                                className="h-1.5 rounded-full bg-brand-500"
+                                style={{
+                                  width: `${Math.max(
+                                    4,
+                                    (row.spend / spendMax) * 100
+                                  )}%`,
+                                }}
+                              />
+                            </div>
+                          </div>
+                        ) : (
+                          <span className="text-gray-400">—</span>
+                        )}
+                      </td>
+                      <td className="py-3 pr-4 tabular-nums text-gray-800">
+                        {formatNum(row.platformLeads)}
+                      </td>
+                      <td className="py-3 pr-4 tabular-nums text-gray-800">
+                        {hasCrm ? formatNum(row.crmLeads) : '—'}
+                      </td>
+                      <td className="py-3 pr-4">
+                        {hasCrm ? (
+                          <span
+                            className={`inline-flex rounded-full px-2 py-0.5 text-xs font-semibold tabular-nums ${gapTone(
+                              row.gap
+                            )}`}
+                          >
+                            {row.gap > 0 ? '+' : ''}
+                            {formatNum(row.gap)}
+                          </span>
+                        ) : (
+                          '—'
+                        )}
+                      </td>
+                      <td className="py-3 pr-4 tabular-nums font-semibold text-gray-900">
+                        {row.ventas > 0 ? formatNum(row.ventas) : '—'}
+                      </td>
+                      <td className="py-3 pr-4 tabular-nums text-gray-800">
+                        {row.importe > 0 ? formatEur(row.importe) : '—'}
+                      </td>
+                      <td className="py-3 pr-4 tabular-nums text-gray-800">
+                        {row.roas > 0 ? `${formatNum(row.roas)}x` : '—'}
+                      </td>
+                      <td className="py-3 pr-4 tabular-nums text-gray-800">
+                        {row.cplPlatform
+                          ? formatEurCents(row.cplPlatform)
+                          : '—'}
+                      </td>
+                      <td className="py-3 pr-4 tabular-nums text-gray-800">
+                        {hasCrm && row.cplCrm
+                          ? formatEurCents(row.cplCrm)
+                          : '—'}
+                      </td>
+                    </tr>
+                  ))}
+                </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">
+                        {attributionTotals.spend
+                          ? formatEur(attributionTotals.spend)
+                          : '—'}
+                      </td>
+                      <td className="py-3 pr-4 tabular-nums">
+                        {formatNum(attributionTotals.platformLeads)}
+                      </td>
+                      <td className="py-3 pr-4 tabular-nums">
+                        {hasCrm ? formatNum(attributionTotals.crmLeads) : '—'}
+                      </td>
+                      <td className="py-3 pr-4">
+                        {hasCrm ? (
+                          <span
+                            className={`inline-flex rounded-full px-2 py-0.5 text-xs font-semibold tabular-nums ${gapTone(
+                              attributionTotals.gap
+                            )}`}
+                          >
+                            {attributionTotals.gap > 0 ? '+' : ''}
+                            {formatNum(attributionTotals.gap)}
+                          </span>
+                        ) : (
+                          '—'
+                        )}
+                      </td>
+                      <td className="py-3 pr-4 tabular-nums text-gray-900">
+                        {formatNum(attributionTotals.ventas || ventasCount)}
+                      </td>
+                      <td className="py-3 pr-4 tabular-nums text-gray-900">
+                        {attributionTotals.importe > 0 ||
+                        periodTotals.revenue > 0
+                          ? formatEur(
+                              attributionTotals.importe || periodTotals.revenue
+                            )
+                          : '—'}
+                      </td>
+                      <td className="py-3 pr-4 tabular-nums">
+                        {attributionTotals.spend > 0 &&
+                        (attributionTotals.importe || periodTotals.revenue) > 0
+                          ? `${formatNum(
+                              (attributionTotals.importe ||
+                                periodTotals.revenue) / attributionTotals.spend
+                            )}x`
+                          : '—'}
+                      </td>
+                      <td className="py-3 pr-4 tabular-nums">
+                        {attributionTotals.platformLeads > 0
+                          ? formatEurCents(
+                              attributionTotals.spend /
+                                attributionTotals.platformLeads
+                            )
+                          : '—'}
+                      </td>
+                      <td className="py-3 pr-4 tabular-nums">
+                        {hasCrm && attributionTotals.crmLeads > 0
+                          ? formatEurCents(
+                              attributionTotals.spend /
+                                attributionTotals.crmLeads
+                            )
+                          : '—'}
+                      </td>
+                    </tr>
+                  </tfoot>
+                )}
+              </table>
+            </div>
+          )}
+        </Surface>
+      </section>
     </div>
   );
 }
+
+function HeroStat({
+  label,
+  value,
+  chip,
+}: {
+  label: string;
+  value: string;
+  chip: React.ReactNode;
+}) {
+  return (
+    <div className="min-w-0">
+      <p className="text-[11px] font-semibold uppercase tracking-[0.12em] text-gray-500">
+        {label}
+      </p>
+      <p className="mt-1.5 text-2xl md:text-3xl font-semibold tracking-tight text-gray-900 tabular-nums leading-none">
+        {value}
+      </p>
+      <div className="mt-2">{chip}</div>
+    </div>
+  );
+}
+
+function organicPeriodSafe(
+  organicRows: OrganicDailyRow[],
+  since: string,
+  until: string,
+  adsLeads = 0
+) {
+  const rows = organicRows.filter((r) => {
+    const d = (r.day || r.date || '').slice(0, 10);
+    return d >= since && d <= until;
+  });
+  const gscClicks = rows.reduce((a, r) => a + (Number(r.gsc_clicks) || 0), 0);
+  const gscImpressions = rows.reduce(
+    (a, r) => a + (Number(r.gsc_impressions) || 0),
+    0
+  );
+  const ga4Sessions = rows.reduce(
+    (a, r) => a + (Number(r.ga4_sessions) || 0),
+    0
+  );
+  const ga4Conversions = rows.reduce(
+    (a, r) => a + (Number(r.ga4_conversions) || 0),
+    0
+  );
+  const denom = adsLeads + ga4Conversions;
+  return {
+    gscClicks,
+    gscImpressions,
+    ga4Sessions,
+    ga4Conversions,
+    organicShare: denom > 0 ? (ga4Conversions / denom) * 100 : 0,
+  };
+}