diff --git a/src/app/api/brandbook/route.ts b/src/app/api/brandbook/route.ts
index 7d5fd52..4ccaa2e 100644
--- a/src/app/api/brandbook/route.ts
+++ b/src/app/api/brandbook/route.ts
@@ -1,10 +1,12 @@
 /**
  * GET / PUT brandbook for active tenant (documents type=brandbook).
+ * Sincronización bidireccional permanente con tenants.creative_style.
  */
 import { NextRequest, NextResponse } from 'next/server';
 import { createClient } from '@/lib/supabase/server';
 import { resolveActiveTenant, restGet } from '@/lib/tenant-context';
 import { isAgencyRole, serviceHeaders, supabaseUrl, userRole } from '@/lib/agency';
+import { createClient as createAdminClient } from '@supabase/supabase-js';
 import {
   BRANDBOOK_DOC_TITLE,
   BRANDBOOK_DOC_TYPE,
@@ -17,6 +19,12 @@ import {
 
 export const dynamic = 'force-dynamic';
 
+function getAdmin() {
+  const url = supabaseUrl();
+  const key = process.env.SUPABASE_SERVICE_ROLE_KEY!;
+  return createAdminClient(url, key);
+}
+
 async function loadDoc(tenantId: string): Promise<{
   id: string | null;
   book: Brandbook | null;
@@ -31,7 +39,7 @@ async function loadDoc(tenantId: string): Promise<{
   return { id: row.id, book: parseBrandbook(row.content) };
 }
 
-export async function GET() {
+export async function GET(req: NextRequest) {
   const supabase = await createClient();
   const {
     data: { user },
@@ -39,22 +47,48 @@ export async function GET() {
   if (!user) {
     return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
   }
-  const ctx = await resolveActiveTenant(user);
-  if (!ctx.tenantId || ctx.portfolioWide) {
-    return NextResponse.json(
-      { error: 'Selecciona un cliente en Contexto.' },
-      { status: 400 }
-    );
+
+  const isAgency = isAgencyRole(userRole(user));
+  const queryTenantId = req.nextUrl.searchParams.get('tenant_id') || req.nextUrl.searchParams.get('tenantId');
+
+  let tenantId: string | null = null;
+  let label = 'Cliente';
+  let slug = 'cliente';
+
+  if (isAgency && queryTenantId) {
+    const admin = getAdmin();
+    const { data: tenant } = await admin
+      .from('tenants')
+      .select('id, name, slug')
+      .eq('id', queryTenantId)
+      .maybeSingle();
+
+    if (tenant) {
+      tenantId = tenant.id;
+      label = tenant.name || 'Cliente';
+      slug = tenant.slug || 'cliente';
+    }
   }
 
-  let slug = 'cliente';
-  const t = await restGet<{ slug?: string }[]>(
-    `/rest/v1/tenants?id=eq.${encodeURIComponent(ctx.tenantId)}&select=slug`
-  );
-  slug = t.data?.[0]?.slug || slug;
+  if (!tenantId) {
+    const ctx = await resolveActiveTenant(user);
+    if (!ctx.tenantId || ctx.portfolioWide) {
+      return NextResponse.json(
+        { error: 'Selecciona un cliente en Contexto.' },
+        { status: 400 }
+      );
+    }
+    tenantId = ctx.tenantId;
+    label = ctx.label;
 
-  const { id, book } = await loadDoc(ctx.tenantId);
-  const current = book || emptyBrandbook(ctx.label);
+    const t = await restGet<{ slug?: string }[]>(
+      `/rest/v1/tenants?id=eq.${encodeURIComponent(tenantId)}&select=slug`
+    );
+    slug = t.data?.[0]?.slug || slug;
+  }
+
+  const { id, book } = await loadDoc(tenantId);
+  const current = book || emptyBrandbook(label);
   const completeness = brandbookCompleteness(current);
 
   return NextResponse.json({
@@ -62,7 +96,7 @@ export async function GET() {
     id,
     brandbook: current,
     slug,
-    label: ctx.label,
+    label,
     completeness,
     exists: !!book,
   });
@@ -79,28 +113,59 @@ export async function PUT(req: NextRequest) {
   if (!isAgencyRole(userRole(user))) {
     return NextResponse.json({ error: 'Solo agencia' }, { status: 403 });
   }
-  const ctx = await resolveActiveTenant(user);
-  if (!ctx.tenantId || ctx.portfolioWide) {
-    return NextResponse.json(
-      { error: 'Selecciona un cliente en Contexto.' },
-      { status: 400 }
-    );
-  }
 
   const body = (await req.json().catch(() => ({}))) as {
     brandbook?: unknown;
     seed?: boolean;
+    tenant_id?: string;
+    tenantId?: string;
   };
 
+  const queryTenantId =
+    req.nextUrl.searchParams.get('tenant_id') ||
+    req.nextUrl.searchParams.get('tenantId') ||
+    body.tenant_id ||
+    body.tenantId;
+
+  let tenantId: string | null = null;
+  let label = 'Cliente';
   let slug = 'cliente';
-  const t = await restGet<{ slug?: string }[]>(
-    `/rest/v1/tenants?id=eq.${encodeURIComponent(ctx.tenantId)}&select=slug`
-  );
-  slug = t.data?.[0]?.slug || slug;
+
+  if (queryTenantId) {
+    const admin = getAdmin();
+    const { data: tenant } = await admin
+      .from('tenants')
+      .select('id, name, slug')
+      .eq('id', queryTenantId)
+      .maybeSingle();
+
+    if (tenant) {
+      tenantId = tenant.id;
+      label = tenant.name || 'Cliente';
+      slug = tenant.slug || 'cliente';
+    }
+  }
+
+  if (!tenantId) {
+    const ctx = await resolveActiveTenant(user);
+    if (!ctx.tenantId || ctx.portfolioWide) {
+      return NextResponse.json(
+        { error: 'Selecciona un cliente en Contexto.' },
+        { status: 400 }
+      );
+    }
+    tenantId = ctx.tenantId;
+    label = ctx.label;
+
+    const t = await restGet<{ slug?: string }[]>(
+      `/rest/v1/tenants?id=eq.${encodeURIComponent(tenantId)}&select=slug`
+    );
+    slug = t.data?.[0]?.slug || slug;
+  }
 
   let book: Brandbook | null = null;
   if (body.seed) {
-    book = seedBrandbook(slug, ctx.label);
+    book = seedBrandbook(slug, label);
   } else {
     book = parseBrandbook(body.brandbook);
   }
@@ -108,68 +173,118 @@ export async function PUT(req: NextRequest) {
     return NextResponse.json({ error: 'brandbook inválido' }, { status: 400 });
   }
   book.updated_at = new Date().toISOString();
-  book.brand_name = book.brand_name || ctx.label;
+  book.brand_name = book.brand_name || label;
 
-  const headers = serviceHeaders();
-  const base = supabaseUrl();
-  if (!headers || !base) {
-    return NextResponse.json({ error: 'No service role' }, { status: 500 });
-  }
+  const admin = getAdmin();
+  const { id } = await loadDoc(tenantId);
 
-  const { id } = await loadDoc(ctx.tenantId);
+  let docId = id;
   if (id) {
-    const patch = await fetch(`${base}/rest/v1/documents?id=eq.${id}`, {
-      method: 'PATCH',
-      headers: {
-        ...headers,
-        'Content-Type': 'application/json',
-        Prefer: 'return=representation',
-      },
-      body: JSON.stringify({
+    const { error: patchErr } = await admin
+      .from('documents')
+      .update({
         content: book,
         title: BRANDBOOK_DOC_TITLE,
         updated_at: book.updated_at,
-      }),
-    });
-    if (!patch.ok) {
-      return NextResponse.json(
-        { error: await patch.text() },
-        { status: 500 }
-      );
+      })
+      .eq('id', id);
+
+    if (patchErr) {
+      return NextResponse.json({ error: patchErr.message }, { status: 500 });
     }
-    const rows = (await patch.json()) as { id: string }[];
-    return NextResponse.json({
-      ok: true,
-      id: rows[0]?.id || id,
-      brandbook: book,
-      completeness: brandbookCompleteness(book),
-    });
+  } else {
+    const { data: insRow, error: insErr } = await admin
+      .from('documents')
+      .insert({
+        tenant_id: tenantId,
+        type: BRANDBOOK_DOC_TYPE,
+        title: BRANDBOOK_DOC_TITLE,
+        status: 'approved',
+        content: book,
+        updated_at: book.updated_at,
+      })
+      .select('id')
+      .single();
+
+    if (insErr) {
+      return NextResponse.json({ error: insErr.message }, { status: 500 });
+    }
+    docId = insRow.id;
   }
 
-  const ins = await fetch(`${base}/rest/v1/documents`, {
-    method: 'POST',
-    headers: {
-      ...headers,
-      'Content-Type': 'application/json',
-      Prefer: 'return=representation',
-    },
-    body: JSON.stringify({
-      tenant_id: ctx.tenantId,
-      type: BRANDBOOK_DOC_TYPE,
-      title: BRANDBOOK_DOC_TITLE,
-      status: 'approved',
-      content: book,
-    }),
-  });
-  if (!ins.ok) {
-    return NextResponse.json({ error: await ins.text() }, { status: 500 });
+  // Sincronizar simultáneamente con tenants.creative_style para consistencia 100%
+  const { data: tenantRow } = await admin
+    .from('tenants')
+    .select('creative_style, settings')
+    .eq('id', tenantId)
+    .maybeSingle();
+
+  if (tenantRow) {
+    const existingStyle = (tenantRow.creative_style && typeof tenantRow.creative_style === 'object') ? tenantRow.creative_style : {};
+    const updatedStyle = {
+      ...existingStyle,
+      identity: {
+        ...(existingStyle.identity || {}),
+        summary: book.elevator_pitch || existingStyle.identity?.summary || '',
+        website: book.website || existingStyle.identity?.website || '',
+        b2b_offering: book.b2b_offering || existingStyle.identity?.b2b_offering || '',
+        b2c_offering: book.b2c_offering || existingStyle.identity?.b2c_offering || '',
+        usp_differentiators: book.usp_differentiators || existingStyle.identity?.usp_differentiators || '',
+        current_priorities: book.current_priorities || existingStyle.identity?.current_priorities || '',
+        price_and_offer_framing: book.price_and_offer_framing || existingStyle.identity?.price_and_offer_framing || '',
+      },
+      voice: {
+        ...(existingStyle.voice || {}),
+        tone: book.tone || existingStyle.voice?.tone || '',
+        copy_structure_rules: book.copy_structure_rules || existingStyle.voice?.copy_structure_rules || '',
+        english_terms_policy: book.english_terms_policy || existingStyle.voice?.english_terms_policy || '',
+        power_words: book.power_words?.length ? book.power_words : existingStyle.voice?.power_words || [],
+        allowed_ctas: book.allowed_ctas?.length ? book.allowed_ctas : existingStyle.voice?.allowed_ctas || [],
+      },
+      visual: {
+        ...(existingStyle.visual || {}),
+        surface_rules: book.surface_rules || existingStyle.visual?.surface_rules || '',
+        image_text_rules: book.image_text_rules || existingStyle.visual?.image_text_rules || '',
+        typography_headline: book.typography_headline || existingStyle.visual?.typography_headline || '',
+        typography_body: book.typography_body || existingStyle.visual?.typography_body || '',
+      },
+      audiences: {
+        ...(existingStyle.audiences || {}),
+        b2b_personas: book.b2b_personas?.length ? book.b2b_personas : existingStyle.audiences?.b2b_personas || [],
+        b2c_personas: book.b2c_personas?.length ? book.b2c_personas : existingStyle.audiences?.b2c_personas || [],
+        customer_frustrations: book.customer_frustrations || existingStyle.audiences?.customer_frustrations || '',
+        desired_transformation: book.desired_transformation || existingStyle.audiences?.desired_transformation || '',
+      },
+      arguments: {
+        ...(existingStyle.arguments || {}),
+        objections: book.objections?.length ? book.objections : existingStyle.arguments?.objections || [],
+        winning_hooks: book.winning_hooks?.length ? book.winning_hooks : existingStyle.arguments?.winning_hooks || [],
+        preferred_angles: book.preferred_angles?.length ? book.preferred_angles : existingStyle.arguments?.preferred_angles || [],
+      },
+      prohibitions: {
+        ...(existingStyle.prohibitions || {}),
+        emoji_policy: book.emoji_policy || existingStyle.prohibitions?.emoji_policy || '',
+        testimonials_policy: book.testimonials_policy || existingStyle.prohibitions?.testimonials_policy || '',
+        competitors_never_mention: book.competitors_never_mention?.length ? book.competitors_never_mention : existingStyle.prohibitions?.competitors_never_mention || [],
+      },
+    };
+
+    await admin
+      .from('tenants')
+      .update({
+        creative_style: updatedStyle,
+        settings: {
+          ...(tenantRow.settings || {}),
+          creative_style: updatedStyle,
+        },
+      })
+      .eq('id', tenantId);
   }
-  const rows = (await ins.json()) as { id: string }[];
+
   return NextResponse.json({
     ok: true,
-    id: rows[0]?.id,
+    id: docId,
     brandbook: book,
     completeness: brandbookCompleteness(book),
-    created: true,
   });
 }
diff --git a/src/app/api/creatives/style/route.ts b/src/app/api/creatives/style/route.ts
index 02be8ef..58ad152 100644
--- a/src/app/api/creatives/style/route.ts
+++ b/src/app/api/creatives/style/route.ts
@@ -241,10 +241,10 @@ export async function PUT(req: NextRequest) {
     return NextResponse.json({ error: updErr.message }, { status: 500 });
   }
 
-  // Cargar brandbook de documents para compilar skill actualizado
+  // Cargar brandbook de documents para compilar skill actualizado y mantener sincronización
   const { data: brandDoc } = await admin
     .from('documents')
-    .select('content')
+    .select('id, content')
     .eq('tenant_id', tenantId)
     .eq('type', 'brandbook')
     .order('updated_at', { ascending: false })
@@ -267,6 +267,60 @@ export async function PUT(req: NextRequest) {
     brandbook = seedBrandbook(existing.slug || 'cliente', existing.name || 'Cliente');
   }
 
+  // Sincronizar campos de normalizedStyle hacia brandbook
+  if (normalizedStyle.identity) {
+    if (normalizedStyle.identity.summary) brandbook.elevator_pitch = normalizedStyle.identity.summary;
+    if (normalizedStyle.identity.website) brandbook.website = normalizedStyle.identity.website;
+    if (normalizedStyle.identity.b2b_offering) brandbook.b2b_offering = normalizedStyle.identity.b2b_offering;
+    if (normalizedStyle.identity.b2c_offering) brandbook.b2c_offering = normalizedStyle.identity.b2c_offering;
+    if (normalizedStyle.identity.usp_differentiators) brandbook.usp_differentiators = normalizedStyle.identity.usp_differentiators;
+    if (normalizedStyle.identity.current_priorities) brandbook.current_priorities = normalizedStyle.identity.current_priorities;
+    if (normalizedStyle.identity.price_and_offer_framing) brandbook.price_and_offer_framing = normalizedStyle.identity.price_and_offer_framing;
+  }
+  if (normalizedStyle.voice) {
+    if (normalizedStyle.voice.tone) brandbook.tone = normalizedStyle.voice.tone;
+    if (normalizedStyle.voice.copy_structure_rules) brandbook.copy_structure_rules = normalizedStyle.voice.copy_structure_rules;
+    if (normalizedStyle.voice.english_terms_policy) brandbook.english_terms_policy = normalizedStyle.voice.english_terms_policy;
+    if (normalizedStyle.voice.power_words?.length) brandbook.power_words = normalizedStyle.voice.power_words;
+    if (normalizedStyle.voice.allowed_ctas?.length) brandbook.allowed_ctas = normalizedStyle.voice.allowed_ctas;
+  }
+  if (normalizedStyle.visual) {
+    if (normalizedStyle.visual.surface_rules) brandbook.surface_rules = normalizedStyle.visual.surface_rules;
+    if (normalizedStyle.visual.image_text_rules) brandbook.image_text_rules = normalizedStyle.visual.image_text_rules;
+    if (normalizedStyle.visual.typography_headline) brandbook.typography_headline = normalizedStyle.visual.typography_headline;
+    if (normalizedStyle.visual.typography_body) brandbook.typography_body = normalizedStyle.visual.typography_body;
+  }
+  if (normalizedStyle.audiences) {
+    if (normalizedStyle.audiences.b2b_personas?.length) brandbook.b2b_personas = normalizedStyle.audiences.b2b_personas;
+    if (normalizedStyle.audiences.b2c_personas?.length) brandbook.b2c_personas = normalizedStyle.audiences.b2c_personas;
+    if (normalizedStyle.audiences.customer_frustrations) brandbook.customer_frustrations = normalizedStyle.audiences.customer_frustrations;
+    if (normalizedStyle.audiences.desired_transformation) brandbook.desired_transformation = normalizedStyle.audiences.desired_transformation;
+  }
+  if (normalizedStyle.arguments) {
+    if (normalizedStyle.arguments.objections?.length) brandbook.objections = normalizedStyle.arguments.objections;
+    if (normalizedStyle.arguments.winning_hooks?.length) brandbook.winning_hooks = normalizedStyle.arguments.winning_hooks;
+    if (normalizedStyle.arguments.preferred_angles?.length) brandbook.preferred_angles = normalizedStyle.arguments.preferred_angles;
+  }
+  if (normalizedStyle.prohibitions) {
+    if (normalizedStyle.prohibitions.emoji_policy) brandbook.emoji_policy = normalizedStyle.prohibitions.emoji_policy;
+    if (normalizedStyle.prohibitions.testimonials_policy) brandbook.testimonials_policy = normalizedStyle.prohibitions.testimonials_policy;
+    if (normalizedStyle.prohibitions.competitors_never_mention?.length) brandbook.competitors_never_mention = normalizedStyle.prohibitions.competitors_never_mention;
+  }
+  if (normalizedStyle.image_ai?.photo_style) {
+    brandbook.photography_style = normalizedStyle.image_ai.photo_style;
+  }
+  brandbook.updated_at = new Date().toISOString();
+
+  if (brandDoc?.id) {
+    await admin
+      .from('documents')
+      .update({
+        content: brandbook,
+        updated_at: brandbook.updated_at,
+      })
+      .eq('id', brandDoc.id);
+  }
+
   const compiledMarkdown = compileClientSkillFromBrandbook(
     brandbook,
     {
diff --git a/src/app/dashboard/marca/page.tsx b/src/app/dashboard/marca/page.tsx
index 2d33ec2..4d884e3 100644
--- a/src/app/dashboard/marca/page.tsx
+++ b/src/app/dashboard/marca/page.tsx
@@ -32,5 +32,5 @@ export default async function MarcaPage() {
     );
   }
 
-  return <BrandZone tenantLabel={ctx.label} />;
+  return <BrandZone tenantId={ctx.tenantId || ''} tenantLabel={ctx.label} />;
 }
diff --git a/src/components/BrandZone.tsx b/src/components/BrandZone.tsx
index 1670cf6..bb79d31 100644
--- a/src/components/BrandZone.tsx
+++ b/src/components/BrandZone.tsx
@@ -97,7 +97,15 @@ function KitThumb({ assetFileId, alt }: { assetFileId: string; alt: string }) {
   );
 }
 
-export default function BrandZone({ tenantLabel }: { tenantLabel: string }) {
+export default function BrandZone({
+  tenantId,
+  tenantLabel,
+  tenantSlug,
+}: {
+  tenantId?: string;
+  tenantLabel: string;
+  tenantSlug?: string;
+}) {
   const [viewMode, setViewMode] = useState<'overview' | 'edit'>('overview');
   const [section, setSection] = useState<BrandbookSectionId>('identidad');
   const [book, setBook] = useState<Brandbook>(() => emptyBrandbook(tenantLabel));
@@ -120,11 +128,12 @@ export default function BrandZone({ tenantLabel }: { tenantLabel: string }) {
     setLoading(true);
     setErr(null);
     try {
-      const r = await fetch('/api/brandbook');
+      const query = tenantId ? `?tenant_id=${encodeURIComponent(tenantId)}` : '';
+      const r = await fetch(`/api/brandbook${query}`);
       const j = await r.json();
       if (!r.ok) throw new Error(j.error || 'No se pudo cargar');
       setBook(j.brandbook || emptyBrandbook(tenantLabel));
-      setSlug(j.slug || '');
+      setSlug(j.slug || tenantSlug || '');
       setScore(j.completeness?.score ?? 0);
       setMissing(j.completeness?.missing || []);
       setExists(!!j.exists);
@@ -133,7 +142,7 @@ export default function BrandZone({ tenantLabel }: { tenantLabel: string }) {
     } finally {
       setLoading(false);
     }
-  }, [tenantLabel]);
+  }, [tenantId, tenantLabel, tenantSlug]);
 
   useEffect(() => {
     void load();
@@ -149,10 +158,11 @@ export default function BrandZone({ tenantLabel }: { tenantLabel: string }) {
     setErr(null);
     setOkMsg(null);
     try {
-      const r = await fetch('/api/brandbook', {
+      const query = tenantId ? `?tenant_id=${encodeURIComponent(tenantId)}` : '';
+      const r = await fetch(`/api/brandbook${query}`, {
         method: 'PUT',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ brandbook: book }),
+        body: JSON.stringify({ brandbook: book, tenant_id: tenantId }),
       });
       const j = await r.json();
       if (!r.ok) throw new Error(j.error || 'No se pudo guardar');
@@ -160,7 +170,7 @@ export default function BrandZone({ tenantLabel }: { tenantLabel: string }) {
       setScore(j.completeness?.score ?? 0);
       setMissing(j.completeness?.missing || []);
       setExists(true);
-      setOkMsg('Brand kit guardado');
+      setOkMsg('Brand kit guardado correctamente y sincronizado');
     } catch (e) {
       setErr(e instanceof Error ? e.message : 'Error al guardar');
     } finally {
@@ -172,10 +182,11 @@ export default function BrandZone({ tenantLabel }: { tenantLabel: string }) {
     setSeeding(true);
     setErr(null);
     try {
-      const r = await fetch('/api/brandbook', {
+      const query = tenantId ? `?tenant_id=${encodeURIComponent(tenantId)}` : '';
+      const r = await fetch(`/api/brandbook${query}`, {
         method: 'PUT',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ seed: true }),
+        body: JSON.stringify({ seed: true, tenant_id: tenantId }),
       });
       const j = await r.json();
       if (!r.ok) throw new Error(j.error || 'No se pudo sembrar');
diff --git a/src/components/ClientCreativeStylePanel.tsx b/src/components/ClientCreativeStylePanel.tsx
index 3a87264..10c2538 100644
--- a/src/components/ClientCreativeStylePanel.tsx
+++ b/src/components/ClientCreativeStylePanel.tsx
@@ -2,8 +2,14 @@
 
 import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import {
-  Camera,
+  ExternalLink,
+  Building2,
+  Users,
+  MessageSquare,
+  Trophy,
+  ShieldAlert,
   Palette,
+  Camera,
   Settings2,
   FileCode2,
   Plus,
@@ -13,9 +19,6 @@ import {
   Loader2,
   Copy,
   Sparkles,
-  Building2,
-  Sliders,
-  ExternalLink,
 } from 'lucide-react';
 import {
   ClientCreativeStyle,
@@ -23,42 +26,70 @@ import {
   createEmptyCreativeStyle,
 } from '@/lib/creative-style';
 
-type SectionId = 'image_ai' | 'canva' | 'campaigns' | 'overrides' | 'preview';
+type SectionId =
+  | 'identity'
+  | 'audiences'
+  | 'voice'
+  | 'arguments'
+  | 'prohibitions'
+  | 'visual'
+  | 'image_ai'
+  | 'technical'
+  | 'preview';
 
-const SECTIONS: {
-  id: SectionId;
-  label: string;
-  subtitle: string;
-  icon: React.ComponentType<any>;
-}[] = [
+const SECTIONS: { id: SectionId; label: string; subtitle: string; icon: React.ComponentType<any> }[] = [
   {
-    id: 'image_ai',
-    label: '1. Dirección de Arte IA (Freepik)',
-    subtitle: 'Estilo fotográfico, regla 1,5s, personas y espacio negativo',
-    icon: Camera,
+    id: 'identity',
+    label: '1. Quién es y Necesidades',
+    subtitle: 'Líneas B2B/B2C, diferenciación y foco actual',
+    icon: Building2,
   },
   {
-    id: 'canva',
-    label: '2. Plantillas Canva & Conexiones',
-    subtitle: 'Brand Templates 4:5, 9:16 y 1.91:1, IDs Meta, Slack y Drive',
+    id: 'audiences',
+    label: '2. A quién hablamos',
+    subtitle: 'Buyer personas B2B/B2C, dolores y transformación',
+    icon: Users,
+  },
+  {
+    id: 'voice',
+    label: '3. Cómo habla (Copy)',
+    subtitle: 'Tono, postura, estructura, anglicismos y CTAs',
+    icon: MessageSquare,
+  },
+  {
+    id: 'arguments',
+    label: '4. Argumentos y Hooks',
+    subtitle: 'Argumentos ganadores, objeciones, pruebas y ángulos',
+    icon: Trophy,
+  },
+  {
+    id: 'prohibitions',
+    label: '5. Prohibido (Líneas rojas)',
+    subtitle: 'Promesas vetadas, competencia, emojis y testimonios',
+    icon: ShieldAlert,
+  },
+  {
+    id: 'visual',
+    label: '6. Identidad Visual',
+    subtitle: 'Paleta HEX, superficies, tipografía, logo y layout',
     icon: Palette,
   },
   {
-    id: 'campaigns',
-    label: '3. Meta Ads & Campañas',
-    subtitle: 'Reglas de detección B2B/B2C y diccionario de campañas',
+    id: 'image_ai',
+    label: '7. Dirección de Arte IA',
+    subtitle: 'Estilo Freepik, regla 1,5 s, roles, personas y aire',
+    icon: Camera,
+  },
+  {
+    id: 'technical',
+    label: '8. Campañas y Canva',
+    subtitle: 'Mapeo B2B/B2C por campaña, plantillas Canva e IDs',
     icon: Settings2,
   },
-  {
-    id: 'overrides',
-    label: '4. Overrides Ads (Opcional)',
-    subtitle: 'Instrucciones específicas para Claude en relevos de Ads',
-    icon: Sliders,
-  },
   {
     id: 'preview',
-    label: '5. Skill Claude (WF3 Live)',
-    subtitle: 'Markdown compilado desde Brandbook + Operativa',
+    label: '9. Skill Markdown (Claude)',
+    subtitle: 'Documento final que recibe Claude en el WF3',
     icon: FileCode2,
   },
 ];
@@ -77,7 +108,7 @@ export default function ClientCreativeStylePanel({
   tenantId: string;
   clientName: string;
 }) {
-  const [activeSection, setActiveSection] = useState<SectionId>('image_ai');
+  const [activeSection, setActiveSection] = useState<SectionId>('identity');
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
   const [saveSuccess, setSaveSuccess] = useState(false);
@@ -102,7 +133,6 @@ export default function ClientCreativeStylePanel({
   }>({});
   const [campaignRows, setCampaignRows] = useState<CampaignRow[]>([]);
   const [detectedCampaigns, setDetectedCampaigns] = useState<string[]>([]);
-  const [compiledSkillFromApi, setCompiledSkillFromApi] = useState<string>('');
 
   const [style, setStyle] = useState<ClientCreativeStyle>(() =>
     createEmptyCreativeStyle(clientName, 'bps')
@@ -112,12 +142,9 @@ export default function ClientCreativeStylePanel({
     setLoading(true);
     setError(null);
     try {
-      const res = await fetch(
-        `/api/creatives/style?tenant_id=${encodeURIComponent(tenantId)}`
-      );
+      const res = await fetch(`/api/creatives/style?tenant_id=${encodeURIComponent(tenantId)}`);
       const data = await res.json();
-      if (!res.ok)
-        throw new Error(data.error || 'Error al cargar estilo creativo');
+      if (!res.ok) throw new Error(data.error || 'Error al cargar estilo creativo');
 
       setSlug(data.slug || 'cliente');
       setCreativesEnabled(Boolean(data.creatives_enabled));
@@ -128,15 +155,10 @@ export default function ClientCreativeStylePanel({
       setDriveFolderId(data.drive_folder_id || '');
       setDefaultLandingUrl(data.default_landing_url || '');
       setCanvaTemplates(data.canva_templates || {});
-      setDetectedCampaigns(
-        Array.isArray(data.detected_campaigns) ? data.detected_campaigns : []
-      );
+      setDetectedCampaigns(Array.isArray(data.detected_campaigns) ? data.detected_campaigns : []);
       if (data.style) {
         setStyle(data.style);
       }
-      if (data.compiled_skill) {
-        setCompiledSkillFromApi(data.compiled_skill);
-      }
 
       // Combinar campaign_audience y campaign_products en filas editables
       const audMap: Record<string, string> = data.campaign_audience || {};
@@ -151,8 +173,8 @@ export default function ClientCreativeStylePanel({
           typeof pEntry === 'string'
             ? pEntry
             : pEntry && typeof pEntry === 'object'
-            ? pEntry.product || ''
-            : '';
+              ? pEntry.product || ''
+              : '';
         const landing =
           pEntry && typeof pEntry === 'object' ? pEntry.landing_url || '' : '';
         return {
@@ -174,10 +196,10 @@ export default function ClientCreativeStylePanel({
     void loadStyle();
   }, [loadStyle]);
 
-  const liveMarkdown = useMemo(() => {
-    if (compiledSkillFromApi) return compiledSkillFromApi;
-    return compileClientSkillMarkdown(style, clientName, slug);
-  }, [compiledSkillFromApi, style, clientName, slug]);
+  const liveMarkdown = useMemo(
+    () => compileClientSkillMarkdown(style, clientName, slug),
+    [style, clientName, slug]
+  );
 
   const handleSaveAll = async () => {
     setSaving(true);
@@ -186,10 +208,7 @@ export default function ClientCreativeStylePanel({
 
     try {
       const campaignAudience: Record<string, 'b2b' | 'b2c'> = {};
-      const campaignProducts: Record<
-        string,
-        { product: string; landing_url: string }
-      > = {};
+      const campaignProducts: Record<string, { product: string; landing_url: string }> = {};
 
       for (const r of campaignRows) {
         const key = r.campaign_name.trim();
@@ -223,10 +242,6 @@ export default function ClientCreativeStylePanel({
       const data = await res.json();
       if (!res.ok) throw new Error(data.error || 'Error al guardar');
 
-      if (data.compiled_skill) {
-        setCompiledSkillFromApi(data.compiled_skill);
-      }
-
       setSaveSuccess(true);
       setTimeout(() => setSaveSuccess(false), 4000);
     } catch (err: any) {
@@ -240,39 +255,37 @@ export default function ClientCreativeStylePanel({
     return (
       <div className="flex items-center justify-center rounded-2xl border border-gray-200 bg-white p-12 text-sm text-gray-500">
         <Loader2 className="mr-2 h-4 w-4 animate-spin text-brand-600" />
-        Cargando configuración operativa de {clientName}…
+        Cargando estilo creativo y brief maestro de {clientName}…
       </div>
     );
   }
 
   return (
     <div className="space-y-6">
-      {/* Banner Callout centralizado en Zona de Marca */}
-      <div className="rounded-2xl border border-blue-200 bg-gradient-to-r from-blue-50/90 via-indigo-50/60 to-blue-50/90 p-4 sm:p-5 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 shadow-xs">
-        <div className="flex items-start gap-3.5">
-          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-blue-600 text-white shadow-xs">
-            <Building2 className="h-5 w-5" />
+      {/* BANNER DE SINCRONIZACIÓN CON ZONA DE MARCA */}
+      <div className="rounded-xl border border-brand-200 bg-brand-50/70 p-4 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 shadow-xs">
+        <div className="flex items-start gap-3">
+          <div className="rounded-lg bg-brand-600 p-2 text-white shrink-0 mt-0.5">
+            <Building2 className="w-5 h-5" />
           </div>
           <div>
-            <h3 className="text-sm font-bold text-gray-900">
-              ADN de Marca, Voz, Audiencias y Estilo Centralizados en Zona de Marca
-            </h3>
-            <p className="text-xs text-gray-600 mt-1 max-w-2xl leading-relaxed">
-              La identidad corporativa, el tono verbal, los buyer personas (B2B/B2C), las objeciones con refutación, la paleta de colores y las líneas rojas de compliance se gestionan en la{' '}
-              <strong>Zona de Marca</strong>. Este panel gestiona exclusivamente los parámetros técnicos y operativos de generación (Freepik Mystic AI, Canva, cuentas de Meta y automatizaciones n8n).
+            <h4 className="text-sm font-bold text-gray-900 flex items-center gap-2">
+              Estilo Creativo & ADN Centralizado
+              <span className="rounded-full bg-emerald-100 text-emerald-800 text-[10px] font-semibold px-2 py-0.5">Sincronizado</span>
+            </h4>
+            <p className="text-xs text-gray-600 mt-0.5">
+              Todo lo que configures aquí (Identidad, Audiencias, Voz, Argumentos, Visual y Operativa) se sincroniza automáticamente con la <strong>Zona de Marca</strong> y alimenta a Claude en tiempo real.
             </p>
           </div>
         </div>
         <a
           href="/dashboard/marca"
-          className="inline-flex items-center gap-1.5 whitespace-nowrap rounded-xl bg-blue-600 px-4 py-2.5 text-xs font-bold text-white shadow-sm hover:bg-blue-700 transition-colors shrink-0"
+          className="inline-flex items-center gap-1.5 rounded-lg bg-brand-600 px-3.5 py-2 text-xs font-semibold text-white hover:bg-brand-700 shrink-0 shadow-xs transition-colors"
         >
-          <Building2 className="w-4 h-4" />
           Ir a Zona de Marca
-          <ExternalLink className="w-3.5 h-3.5 opacity-80" />
+          <ExternalLink className="w-3.5 h-3.5" />
         </a>
       </div>
-
       {/* Barra superior de estado y guardado */}
       <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between rounded-2xl border border-brand-200 bg-brand-50/50 p-4">
         <div className="flex items-start gap-3">
@@ -281,10 +294,10 @@ export default function ClientCreativeStylePanel({
           </div>
           <div>
             <h2 className="text-base font-bold text-gray-900">
-              Operativa Ads & Conexiones · {clientName}
+              Estilo Creativo & Brief Maestro · {clientName}
             </h2>
             <p className="text-xs text-gray-600 mt-0.5">
-              Parámetros técnicos inyectados en <strong>Claude (WF3)</strong>, generación fotográfica en <strong>Freepik Mystic</strong> y composición automática en <strong>Canva (WF5)</strong>.
+              Todo lo que configures aquí alimenta en tiempo real a <strong>Claude (WF3)</strong> para el copy y estrategia, a <strong>Freepik Mystic</strong> para la escena fotográfica y a <strong>Canva (WF5)</strong> para el montaje automático.
             </p>
           </div>
         </div>
@@ -302,12 +315,8 @@ export default function ClientCreativeStylePanel({
             disabled={saving}
             className="inline-flex items-center gap-2 rounded-xl bg-brand-600 px-4 py-2.5 text-xs font-bold text-white shadow-sm hover:bg-brand-700 disabled:opacity-50 transition-colors"
           >
-            {saving ? (
-              <Loader2 className="w-4 h-4 animate-spin" />
-            ) : (
-              <Save className="w-4 h-4" />
-            )}
-            {saving ? 'Guardando…' : 'Guardar operativa ads'}
+            {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
+            {saving ? 'Guardando…' : 'Guardar configuración creativa'}
           </button>
         </div>
       </div>
@@ -358,15 +367,1215 @@ export default function ClientCreativeStylePanel({
 
         {/* Contenido de la sección activa */}
         <div className="lg:col-span-9 rounded-2xl border border-gray-200 bg-white p-6 shadow-xs space-y-6">
-          {/* SECCIÓN 1: DIRECCIÓN DE ARTE IA (FREEPIK MYSTIC) */}
+          {/* SECCIÓN 1: QUIÉN ES Y NECESIDADES */}
+          {activeSection === 'identity' && (
+            <div className="space-y-5">
+              <div>
+                <h3 className="text-base font-bold text-gray-900">
+                  1. Quién es el cliente, líneas de negocio y prioridades
+                </h3>
+                <p className="text-xs text-gray-500 mt-0.5">
+                  Explica con detalle qué vende el cliente en B2B y B2C, qué le hace único frente a sus competidores y qué campañas o necesidades comerciales son prioritarias ahora mismo.
+                </p>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div className="md:col-span-2">
+                  <label className="block text-xs font-bold text-gray-700 mb-1">
+                    Resumen de quién es (Sedes, modalidades, actividad principal)
+                  </label>
+                  <textarea
+                    rows={2}
+                    value={style.identity.summary}
+                    onChange={(e) =>
+                      setStyle({
+                        ...style,
+                        identity: { ...style.identity, summary: e.target.value },
+                      })
+                    }
+                    className="w-full rounded-xl border border-gray-300 px-3 py-2 text-xs focus:border-brand-500 focus:outline-none"
+                    placeholder="Ej: Academia de idiomas con sede en Madrid y Málaga, clases presenciales, online e in-company."
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-xs font-bold text-gray-700 mb-1">
+                    Dominio web principal
+                  </label>
+                  <input
+                    type="text"
+                    value={style.identity.website}
+                    onChange={(e) =>
+                      setStyle({
+                        ...style,
+                        identity: { ...style.identity, website: e.target.value },
+                      })
+                    }
+                    className="w-full rounded-xl border border-gray-300 px-3 py-2 text-xs"
+                    placeholder="blueparrotschool.com"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-xs font-bold text-gray-700 mb-1">
+                    URL de Landing por defecto (Meta Ads)
+                  </label>
+                  <input
+                    type="text"
+                    value={defaultLandingUrl}
+                    onChange={(e) => setDefaultLandingUrl(e.target.value)}
+                    className="w-full rounded-xl border border-gray-300 px-3 py-2 text-xs"
+                    placeholder="https://blueparrotschool.com"
+                  />
+                </div>
+
+                <div className="md:col-span-2">
+                  <label className="block text-xs font-bold text-gray-700 mb-1">
+                    Línea B2B (Empresas) — Qué ofrecemos y por qué ganamos a la competencia
+                  </label>
+                  <textarea
+                    rows={3}
+                    value={style.identity.b2b_offering}
+                    onChange={(e) =>
+                      setStyle({
+                        ...style,
+                        identity: { ...style.identity, b2b_offering: e.target.value },
+                      })
+                    }
+                    className="w-full rounded-xl border border-gray-300 px-3 py-2 text-xs"
+                    placeholder="Programas para equipos, profesor fijo, sesiones 60 min, Entidad Organizadora FUNDAE..."
+                  />
+                </div>
+
+                <div className="md:col-span-2">
+                  <label className="block text-xs font-bold text-gray-700 mb-1">
+                    Línea B2C (Particulares) — Productos, cursos y modalidades
+                  </label>
+                  <textarea
+                    rows={2}
+                    value={style.identity.b2c_offering}
+                    onChange={(e) =>
+                      setStyle({
+                        ...style,
+                        identity: { ...style.identity, b2c_offering: e.target.value },
+                      })
+                    }
+                    className="w-full rounded-xl border border-gray-300 px-3 py-2 text-xs"
+                    placeholder="Cursos de inglés para adultos, preparación de exámenes oficiales (Cambridge, Aptis, IELTS), intensivos..."
+                  />
+                </div>
+
+                <div className="md:col-span-2">
+                  <label className="block text-xs font-bold text-gray-700 mb-1">
+                    Diferenciadores únicos (USP) frente a alternativas del mercado
+                  </label>
+                  <textarea
+                    rows={2}
+                    value={style.identity.usp_differentiators}
+                    onChange={(e) =>
+                      setStyle({
+                        ...style,
+                        identity: { ...style.identity, usp_differentiators: e.target.value },
+                      })
+                    }
+                    className="w-full rounded-xl border border-gray-300 px-3 py-2 text-xs"
+                  />
+                </div>
+
+                <div className="md:col-span-2">
+                  <label className="block text-xs font-bold text-gray-700 mb-1">
+                    Necesidades actuales del cliente, foco comercial y estacionalidad
+                  </label>
+                  <textarea
+                    rows={2}
+                    value={style.identity.current_priorities}
+                    onChange={(e) =>
+                      setStyle({
+                        ...style,
+                        identity: { ...style.identity, current_priorities: e.target.value },
+                      })
+                    }
+                    className="w-full rounded-xl border border-gray-300 px-3 py-2 text-xs"
+                    placeholder="Qué necesita vender prioritariamente este mes/trimestre..."
+                  />
+                </div>
+
+                <div className="md:col-span-2">
+                  <label className="block text-xs font-bold text-gray-700 mb-1">
+                    Enfoque de precios, bonificaciones o condiciones comerciales
+                  </label>
+                  <textarea
+                    rows={2}
+                    value={style.identity.price_and_offer_framing}
+                    onChange={(e) =>
+                      setStyle({
+                        ...style,
+                        identity: { ...style.identity, price_and_offer_framing: e.target.value },
+                      })
+                    }
+                    className="w-full rounded-xl border border-gray-300 px-3 py-2 text-xs"
+                  />
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* SECCIÓN 2: AUDIENCIAS Y BUYER PERSONAS */}
+          {activeSection === 'audiences' && (
+            <div className="space-y-6">
+              <div>
+                <h3 className="text-base font-bold text-gray-900">
+                  2. A quién le hablamos (Buyer Personas B2B y B2C)
+                </h3>
+                <p className="text-xs text-gray-500 mt-0.5">
+                  Define los perfiles exactos de comprador, qué dolor tienen, por qué han fracasado con otras opciones y qué les hace tomar acción.
+                </p>
+              </div>
+
+              {/* Buyer Personas B2B */}
+              <div className="space-y-3">
+                <div className="flex items-center justify-between">
+                  <h4 className="text-xs font-bold uppercase tracking-wider text-gray-700">
+                    Perfiles B2B (Empresas / Decisores)
+                  </h4>
+                  <button
+                    type="button"
+                    onClick={() =>
+                      setStyle({
+                        ...style,
+                        audiences: {
+                          ...style.audiences,
+                          b2b_personas: [
+                            ...style.audiences.b2b_personas,
+                            { name: '', role: '', goal: '', pain_point: '', buying_trigger: '' },
+                          ],
+                        },
+                      })
+                    }
+                    className="inline-flex items-center gap-1 rounded-lg bg-brand-50 px-2.5 py-1 text-xs font-semibold text-brand-700 hover:bg-brand-100"
+                  >
+                    <Plus className="w-3.5 h-3.5" />
+                    Añadir Persona B2B
+                  </button>
+                </div>
+
+                {style.audiences.b2b_personas.map((p, idx) => (
+                  <div
+                    key={idx}
+                    className="rounded-xl border border-gray-200 bg-gray-50/60 p-4 space-y-3"
+                  >
+                    <div className="flex items-center justify-between gap-2">
+                      <input
+                        type="text"
+                        value={p.name}
+                        onChange={(e) => {
+                          const next = [...style.audiences.b2b_personas];
+                          next[idx] = { ...next[idx], name: e.target.value };
+                          setStyle({
+                            ...style,
+                            audiences: { ...style.audiences, b2b_personas: next },
+                          });
+                        }}
+                        placeholder="Nombre / Arquetipo (ej: Marta — RRHH / Formación)"
+                        className="flex-1 rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-xs font-bold"
+                      />
+                      <button
+                        type="button"
+                        onClick={() => {
+                          const next = style.audiences.b2b_personas.filter((_, i) => i !== idx);
+                          setStyle({
+                            ...style,
+                            audiences: { ...style.audiences, b2b_personas: next },
+                          });
+                        }}
+                        className="text-gray-400 hover:text-red-600 p-1"
+                        title="Eliminar perfil"
+                      >
+                        <Trash2 className="w-4 h-4" />
+                      </button>
+                    </div>
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-2.5">
+                      <div>
+                        <label className="text-[10px] font-semibold text-gray-500 uppercase">
+                          Cargo / Rol
+                        </label>
+                        <input
+                          type="text"
+                          value={p.role}
+                          onChange={(e) => {
+                            const next = [...style.audiences.b2b_personas];
+                            next[idx] = { ...next[idx], role: e.target.value };
+                            setStyle({
+                              ...style,
+                              audiences: { ...style.audiences, b2b_personas: next },
+                            });
+                          }}
+                          className="w-full mt-0.5 rounded-lg border border-gray-300 bg-white px-2.5 py-1.5 text-xs"
+                        />
+                      </div>
+                      <div>
+                        <label className="text-[10px] font-semibold text-gray-500 uppercase">
+                          Qué busca / Objetivo
+                        </label>
+                        <input
+                          type="text"
+                          value={p.goal}
+                          onChange={(e) => {
+                            const next = [...style.audiences.b2b_personas];
+                            next[idx] = { ...next[idx], goal: e.target.value };
+                            setStyle({
+                              ...style,
+                              audiences: { ...style.audiences, b2b_personas: next },
+                            });
+                          }}
+                          className="w-full mt-0.5 rounded-lg border border-gray-300 bg-white px-2.5 py-1.5 text-xs"
+                        />
+                      </div>
+                      <div>
+                        <label className="text-[10px] font-semibold text-gray-500 uppercase">
+                          Dolor principal / Frustración
+                        </label>
+                        <input
+                          type="text"
+                          value={p.pain_point}
+                          onChange={(e) => {
+                            const next = [...style.audiences.b2b_personas];
+                            next[idx] = { ...next[idx], pain_point: e.target.value };
+                            setStyle({
+                              ...style,
+                              audiences: { ...style.audiences, b2b_personas: next },
+                            });
+                          }}
+                          className="w-full mt-0.5 rounded-lg border border-gray-300 bg-white px-2.5 py-1.5 text-xs"
+                        />
+                      </div>
+                      <div>
+                        <label className="text-[10px] font-semibold text-gray-500 uppercase">
+                          Disparador de compra (Qué le convence)
+                        </label>
+                        <input
+                          type="text"
+                          value={p.buying_trigger}
+                          onChange={(e) => {
+                            const next = [...style.audiences.b2b_personas];
+                            next[idx] = { ...next[idx], buying_trigger: e.target.value };
+                            setStyle({
+                              ...style,
+                              audiences: { ...style.audiences, b2b_personas: next },
+                            });
+                          }}
+                          className="w-full mt-0.5 rounded-lg border border-gray-300 bg-white px-2.5 py-1.5 text-xs"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+
+              {/* Buyer Personas B2C */}
+              <div className="space-y-3 pt-2 border-t border-gray-200">
+                <div className="flex items-center justify-between">
+                  <h4 className="text-xs font-bold uppercase tracking-wider text-gray-700">
+                    Perfiles B2C (Particulares / Alumnos)
+                  </h4>
+                  <button
+                    type="button"
+                    onClick={() =>
+                      setStyle({
+                        ...style,
+                        audiences: {
+                          ...style.audiences,
+                          b2c_personas: [
+                            ...style.audiences.b2c_personas,
+                            { name: '', age_range: '', situation: '', pain_point: '', goal: '' },
+                          ],
+                        },
+                      })
+                    }
+                    className="inline-flex items-center gap-1 rounded-lg bg-brand-50 px-2.5 py-1 text-xs font-semibold text-brand-700 hover:bg-brand-100"
+                  >
+                    <Plus className="w-3.5 h-3.5" />
+                    Añadir Persona B2C
+                  </button>
+                </div>
+
+                {style.audiences.b2c_personas.map((p, idx) => (
+                  <div
+                    key={idx}
+                    className="rounded-xl border border-gray-200 bg-gray-50/60 p-4 space-y-3"
+                  >
+                    <div className="flex items-center justify-between gap-2">
+                      <input
+                        type="text"
+                        value={p.name}
+                        onChange={(e) => {
+                          const next = [...style.audiences.b2c_personas];
+                          next[idx] = { ...next[idx], name: e.target.value };
+                          setStyle({
+                            ...style,
+                            audiences: { ...style.audiences, b2c_personas: next },
+                          });
+                        }}
+                        placeholder="Nombre del perfil B2C (ej: Adultos 25-45 años)"
+                        className="flex-1 rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-xs font-bold"
+                      />
+                      <input
+                        type="text"
+                        value={p.age_range}
+                        onChange={(e) => {
+                          const next = [...style.audiences.b2c_personas];
+                          next[idx] = { ...next[idx], age_range: e.target.value };
+                          setStyle({
+                            ...style,
+                            audiences: { ...style.audiences, b2c_personas: next },
+                          });
+                        }}
+                        placeholder="Edad (ej: 25-45 años)"
+                        className="w-36 rounded-lg border border-gray-300 bg-white px-2.5 py-1.5 text-xs"
+                      />
+                      <button
+                        type="button"
+                        onClick={() => {
+                          const next = style.audiences.b2c_personas.filter((_, i) => i !== idx);
+                          setStyle({
+                            ...style,
+                            audiences: { ...style.audiences, b2c_personas: next },
+                          });
+                        }}
+                        className="text-gray-400 hover:text-red-600 p-1"
+                      >
+                        <Trash2 className="w-4 h-4" />
+                      </button>
+                    </div>
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-2.5">
+                      <div>
+                        <label className="text-[10px] font-semibold text-gray-500 uppercase">
+                          Situación actual
+                        </label>
+                        <input
+                          type="text"
+                          value={p.situation}
+                          onChange={(e) => {
+                            const next = [...style.audiences.b2c_personas];
+                            next[idx] = { ...next[idx], situation: e.target.value };
+                            setStyle({
+                              ...style,
+                              audiences: { ...style.audiences, b2c_personas: next },
+                            });
+                          }}
+                          className="w-full mt-0.5 rounded-lg border border-gray-300 bg-white px-2.5 py-1.5 text-xs"
+                        />
+                      </div>
+                      <div>
+                        <label className="text-[10px] font-semibold text-gray-500 uppercase">
+                          Frustración previa / Dolor
+                        </label>
+                        <input
+                          type="text"
+                          value={p.pain_point}
+                          onChange={(e) => {
+                            const next = [...style.audiences.b2c_personas];
+                            next[idx] = { ...next[idx], pain_point: e.target.value };
+                            setStyle({
+                              ...style,
+                              audiences: { ...style.audiences, b2c_personas: next },
+                            });
+                          }}
+                          className="w-full mt-0.5 rounded-lg border border-gray-300 bg-white px-2.5 py-1.5 text-xs"
+                        />
+                      </div>
+                      <div>
+                        <label className="text-[10px] font-semibold text-gray-500 uppercase">
+                          Objetivo concreto
+                        </label>
+                        <input
+                          type="text"
+                          value={p.goal}
+                          onChange={(e) => {
+                            const next = [...style.audiences.b2c_personas];
+                            next[idx] = { ...next[idx], goal: e.target.value };
+                            setStyle({
+                              ...style,
+                              audiences: { ...style.audiences, b2c_personas: next },
+                            });
+                          }}
+                          className="w-full mt-0.5 rounded-lg border border-gray-300 bg-white px-2.5 py-1.5 text-xs"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 pt-2 border-t border-gray-200">
+                <div>
+                  <label className="block text-xs font-bold text-gray-700 mb-1">
+                    Frustración principal con soluciones anteriores (Apps, academias tradicionales...)
+                  </label>
+                  <textarea
+                    rows={3}
+                    value={style.audiences.customer_frustrations}
+                    onChange={(e) =>
+                      setStyle({
+                        ...style,
+                        audiences: { ...style.audiences, customer_frustrations: e.target.value },
+                      })
+                    }
+                    className="w-full rounded-xl border border-gray-300 px-3 py-2 text-xs"
+                  />
+                </div>
+                <div>
+                  <label className="block text-xs font-bold text-gray-700 mb-1">
+                    Transformación deseada (Antes vs Después)
+                  </label>
+                  <textarea
+                    rows={3}
+                    value={style.audiences.desired_transformation}
+                    onChange={(e) =>
+                      setStyle({
+                        ...style,
+                        audiences: { ...style.audiences, desired_transformation: e.target.value },
+                      })
+                    }
+                    className="w-full rounded-xl border border-gray-300 px-3 py-2 text-xs"
+                  />
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* SECCIÓN 3: CÓMO HABLA (VOZ Y COPYWRITING) */}
+          {activeSection === 'voice' && (
+            <div className="space-y-5">
+              <div>
+                <h3 className="text-base font-bold text-gray-900">
+                  3. Cómo habla el cliente (Voz, Tono y Reglas de Copywriting)
+                </h3>
+                <p className="text-xs text-gray-500 mt-0.5">
+                  Reglas para Claude: Meta pide 5 primary_text (≤120), 5 headline (≤30) y 1 description (info + bullets + CTA).
+                </p>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-xs font-bold text-gray-700 mb-1">
+                    Tono de voz
+                  </label>
+                  <textarea
+                    rows={2}
+                    value={style.voice.tone}
+                    onChange={(e) =>
+                      setStyle({ ...style, voice: { ...style.voice, tone: e.target.value } })
+                    }
+                    className="w-full rounded-xl border border-gray-300 px-3 py-2 text-xs"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-xs font-bold text-gray-700 mb-1">
+                    Postura de marca
+                  </label>
+                  <textarea
+                    rows={2}
+                    value={style.voice.posture}
+                    onChange={(e) =>
+                      setStyle({ ...style, voice: { ...style.voice, posture: e.target.value } })
+                    }
+                    className="w-full rounded-xl border border-gray-300 px-3 py-2 text-xs"
+                  />
+                </div>
+
+                <div className="md:col-span-2">
+                  <label className="block text-xs font-bold text-gray-700 mb-1">
+                    Idioma, variante regional y pronombres (tú vs usted en B2C/B2B)
+                  </label>
+                  <input
+                    type="text"
+                    value={style.voice.language_and_pronoun}
+                    onChange={(e) =>
+                      setStyle({
+                        ...style,
+                        voice: { ...style.voice, language_and_pronoun: e.target.value },
+                      })
+                    }
+                    className="w-full rounded-xl border border-gray-300 px-3 py-2 text-xs"
+                  />
+                </div>
+
+                <div className="md:col-span-2">
+                  <label className="block text-xs font-bold text-gray-700 mb-1">
+                    Reglas de estructura y longitud de frases (Hook y Primary Text)
+                  </label>
+                  <textarea
+                    rows={3}
+                    value={style.voice.copy_structure_rules}
+                    onChange={(e) =>
+                      setStyle({
+                        ...style,
+                        voice: { ...style.voice, copy_structure_rules: e.target.value },
+                      })
+                    }
+                    className="w-full rounded-xl border border-gray-300 px-3 py-2 text-xs"
+                  />
+                </div>
+
+                <div className="md:col-span-2">
+                  <label className="block text-xs font-bold text-gray-700 mb-1">
+                    Política de anglicismos y términos en inglés dentro del copy
+                  </label>
+                  <textarea
+                    rows={2}
+                    value={style.voice.english_terms_policy}
+                    onChange={(e) =>
+                      setStyle({
+                        ...style,
+                        voice: { ...style.voice, english_terms_policy: e.target.value },
+                      })
+                    }
+                    className="w-full rounded-xl border border-gray-300 px-3 py-2 text-xs"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-xs font-bold text-gray-700 mb-1">
+                    Conceptos fuerza / Palabras clave (separadas por coma)
+                  </label>
+                  <input
+                    type="text"
+                    value={style.voice.power_words.join(', ')}
+                    onChange={(e) =>
+                      setStyle({
+                        ...style,
+                        voice: {
+                          ...style.voice,
+                          power_words: e.target.value
+                            .split(',')
+                            .map((s) => s.trim())
+                            .filter(Boolean),
+                        },
+                      })
+                    }
+                    className="w-full rounded-xl border border-gray-300 px-3 py-2 text-xs"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-xs font-bold text-gray-700 mb-1">
+                    CTAs permitidos en Meta Ads (separados por coma)
+                  </label>
+                  <input
+                    type="text"
+                    value={style.voice.allowed_ctas.join(', ')}
+                    onChange={(e) =>
+                      setStyle({
+                        ...style,
+                        voice: {
+                          ...style.voice,
+                          allowed_ctas: e.target.value
+                            .split(',')
+                            .map((s) => s.trim())
+                            .filter(Boolean),
+                        },
+                      })
+                    }
+                    className="w-full rounded-xl border border-gray-300 px-3 py-2 text-xs"
+                  />
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* SECCIÓN 4: ARGUMENTOS, OBJECIONES, PRUEBAS Y HOOKS */}
+          {activeSection === 'arguments' && (
+            <div className="space-y-6">
+              <div>
+                <h3 className="text-base font-bold text-gray-900">
+                  4. Argumentos que funcionan, Objeciones y Hooks de referencia
+                </h3>
+                <p className="text-xs text-gray-500 mt-0.5">
+                  Las palancas persuasivas reales que Claude debe utilizar para relevar anuncios fatigados.
+                </p>
+              </div>
+
+              {/* Argumentos ganadores */}
+              <div className="space-y-2.5">
+                <div className="flex items-center justify-between">
+                  <label className="text-xs font-bold text-gray-700">
+                    Argumentos que funcionan (en orden de prioridad)
+                  </label>
+                  <button
+                    type="button"
+                    onClick={() =>
+                      setStyle({
+                        ...style,
+                        arguments: {
+                          ...style.arguments,
+                          winning_arguments: [...style.arguments.winning_arguments, ''],
+                        },
+                      })
+                    }
+                    className="inline-flex items-center gap-1 rounded-lg bg-brand-50 px-2.5 py-1 text-xs font-semibold text-brand-700 hover:bg-brand-100"
+                  >
+                    <Plus className="w-3.5 h-3.5" />
+                    Añadir argumento
+                  </button>
+                </div>
+                {style.arguments.winning_arguments.map((arg, idx) => (
+                  <div key={idx} className="flex items-center gap-2">
+                    <span className="w-6 text-center text-xs font-bold text-brand-600">
+                      {idx + 1}.
+                    </span>
+                    <input
+                      type="text"
+                      value={arg}
+                      onChange={(e) => {
+                        const next = [...style.arguments.winning_arguments];
+                        next[idx] = e.target.value;
+                        setStyle({
+                          ...style,
+                          arguments: { ...style.arguments, winning_arguments: next },
+                        });
+                      }}
+                      className="flex-1 rounded-xl border border-gray-300 px-3 py-1.5 text-xs"
+                    />
+                    <button
+                      type="button"
+                      onClick={() => {
+                        const next = style.arguments.winning_arguments.filter((_, i) => i !== idx);
+                        setStyle({
+                          ...style,
+                          arguments: { ...style.arguments, winning_arguments: next },
+                        });
+                      }}
+                      className="text-gray-400 hover:text-red-600 p-1"
+                    >
+                      <Trash2 className="w-4 h-4" />
+                    </button>
+                  </div>
+                ))}
+              </div>
+
+              {/* Objeciones */}
+              <div className="space-y-2.5 pt-3 border-t border-gray-200">
+                <div className="flex items-center justify-between">
+                  <label className="text-xs font-bold text-gray-700">
+                    Objeciones a desactivar (Objeción → Cómo rebatirla en la creatividad)
+                  </label>
+                  <button
+                    type="button"
+                    onClick={() =>
+                      setStyle({
+                        ...style,
+                        arguments: {
+                          ...style.arguments,
+                          objections: [
+                            ...style.arguments.objections,
+                            { objection: '', rebuttal: '' },
+                          ],
+                        },
+                      })
+                    }
+                    className="inline-flex items-center gap-1 rounded-lg bg-brand-50 px-2.5 py-1 text-xs font-semibold text-brand-700 hover:bg-brand-100"
+                  >
+                    <Plus className="w-3.5 h-3.5" />
+                    Añadir objeción
+                  </button>
+                </div>
+                {style.arguments.objections.map((obj, idx) => (
+                  <div key={idx} className="grid grid-cols-1 md:grid-cols-12 gap-2 items-center">
+                    <input
+                      type="text"
+                      value={obj.objection}
+                      onChange={(e) => {
+                        const next = [...style.arguments.objections];
+                        next[idx] = { ...next[idx], objection: e.target.value };
+                        setStyle({
+                          ...style,
+                          arguments: { ...style.arguments, objections: next },
+                        });
+                      }}
+                      placeholder="Objeción (ej: Ya usamos una app)"
+                      className="md:col-span-4 rounded-xl border border-gray-300 px-3 py-1.5 text-xs font-semibold"
+                    />
+                    <input
+                      type="text"
+                      value={obj.rebuttal}
+                      onChange={(e) => {
+                        const next = [...style.arguments.objections];
+                        next[idx] = { ...next[idx], rebuttal: e.target.value };
+                        setStyle({
+                          ...style,
+                          arguments: { ...style.arguments, objections: next },
+                        });
+                      }}
+                      placeholder="Rebatimiento (ej: La app mantiene, no avanza)"
+                      className="md:col-span-7 rounded-xl border border-gray-300 px-3 py-1.5 text-xs"
+                    />
+                    <button
+                      type="button"
+                      onClick={() => {
+                        const next = style.arguments.objections.filter((_, i) => i !== idx);
+                        setStyle({
+                          ...style,
+                          arguments: { ...style.arguments, objections: next },
+                        });
+                      }}
+                      className="md:col-span-1 flex justify-center text-gray-400 hover:text-red-600 p-1"
+                    >
+                      <Trash2 className="w-4 h-4" />
+                    </button>
+                  </div>
+                ))}
+              </div>
+
+              {/* Hooks de referencia */}
+              <div className="space-y-2.5 pt-3 border-t border-gray-200">
+                <div className="flex items-center justify-between">
+                  <label className="text-xs font-bold text-gray-700">
+                    Ejemplos de hooks que han funcionado (referencia de registro para Claude)
+                  </label>
+                  <button
+                    type="button"
+                    onClick={() =>
+                      setStyle({
+                        ...style,
+                        arguments: {
+                          ...style.arguments,
+                          winning_hooks: [...style.arguments.winning_hooks, ''],
+                        },
+                      })
+                    }
+                    className="inline-flex items-center gap-1 rounded-lg bg-brand-50 px-2.5 py-1 text-xs font-semibold text-brand-700 hover:bg-brand-100"
+                  >
+                    <Plus className="w-3.5 h-3.5" />
+                    Añadir hook
+                  </button>
+                </div>
+                {style.arguments.winning_hooks.map((hook, idx) => (
+                  <div key={idx} className="flex items-center gap-2">
+                    <input
+                      type="text"
+                      value={hook}
+                      onChange={(e) => {
+                        const next = [...style.arguments.winning_hooks];
+                        next[idx] = e.target.value;
+                        setStyle({
+                          ...style,
+                          arguments: { ...style.arguments, winning_hooks: next },
+                        });
+                      }}
+                      className="flex-1 rounded-xl border border-gray-300 px-3 py-1.5 text-xs italic"
+                    />
+                    <button
+                      type="button"
+                      onClick={() => {
+                        const next = style.arguments.winning_hooks.filter((_, i) => i !== idx);
+                        setStyle({
+                          ...style,
+                          arguments: { ...style.arguments, winning_hooks: next },
+                        });
+                      }}
+                      className="text-gray-400 hover:text-red-600 p-1"
+                    >
+                      <Trash2 className="w-4 h-4" />
+                    </button>
+                  </div>
+                ))}
+              </div>
+
+              {/* Ángulos y Pruebas */}
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 pt-3 border-t border-gray-200">
+                <div>
+                  <label className="block text-xs font-bold text-gray-700 mb-1">
+                    Ángulos creativos preferidos para rotar (separados por coma)
+                  </label>
+                  <textarea
+                    rows={3}
+                    value={style.arguments.preferred_angles.join(', ')}
+                    onChange={(e) =>
+                      setStyle({
+                        ...style,
+                        arguments: {
+                          ...style.arguments,
+                          preferred_angles: e.target.value
+                            .split(',')
+                            .map((s) => s.trim())
+                            .filter(Boolean),
+                        },
+                      })
+                    }
+                    className="w-full rounded-xl border border-gray-300 px-3 py-2 text-xs"
+                  />
+                </div>
+                <div>
+                  <label className="block text-xs font-bold text-gray-700 mb-1">
+                    Pruebas y datos reales verificados (uno por línea)
+                  </label>
+                  <textarea
+                    rows={3}
+                    value={style.arguments.proof_points.join('\n')}
+                    onChange={(e) =>
+                      setStyle({
+                        ...style,
+                        arguments: {
+                          ...style.arguments,
+                          proof_points: e.target.value
+                            .split('\n')
+                            .map((s) => s.trim())
+                            .filter(Boolean),
+                        },
+                      })
+                    }
+                    className="w-full rounded-xl border border-gray-300 px-3 py-2 text-xs"
+                  />
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* SECCIÓN 5: PROHIBICIONES */}
+          {activeSection === 'prohibitions' && (
+            <div className="space-y-5">
+              <div>
+                <h3 className="text-base font-bold text-gray-900">
+                  5. Prohibido (Líneas rojas de copy, competencia e imagen)
+                </h3>
+                <p className="text-xs text-gray-500 mt-0.5">
+                  Restricciones innegociables que Claude y Freepik deben respetar siempre.
+                </p>
+              </div>
+
+              <div className="space-y-2.5">
+                <div className="flex items-center justify-between">
+                  <label className="text-xs font-bold text-gray-700">
+                    Lista de prohibiciones estrictas
+                  </label>
+                  <button
+                    type="button"
+                    onClick={() =>
+                      setStyle({
+                        ...style,
+                        prohibitions: {
+                          ...style.prohibitions,
+                          forbidden_items: [...style.prohibitions.forbidden_items, ''],
+                        },
+                      })
+                    }
+                    className="inline-flex items-center gap-1 rounded-lg bg-red-50 px-2.5 py-1 text-xs font-semibold text-red-700 hover:bg-red-100"
+                  >
+                    <Plus className="w-3.5 h-3.5" />
+                    Añadir prohibición
+                  </button>
+                </div>
+
+                {style.prohibitions.forbidden_items.map((item, idx) => (
+                  <div key={idx} className="flex items-center gap-2">
+                    <input
+                      type="text"
+                      value={item}
+                      onChange={(e) => {
+                        const next = [...style.prohibitions.forbidden_items];
+                        next[idx] = e.target.value;
+                        setStyle({
+                          ...style,
+                          prohibitions: { ...style.prohibitions, forbidden_items: next },
+                        });
+                      }}
+                      className="flex-1 rounded-xl border border-gray-300 px-3 py-1.5 text-xs"
+                    />
+                    <button
+                      type="button"
+                      onClick={() => {
+                        const next = style.prohibitions.forbidden_items.filter((_, i) => i !== idx);
+                        setStyle({
+                          ...style,
+                          prohibitions: { ...style.prohibitions, forbidden_items: next },
+                        });
+                      }}
+                      className="text-gray-400 hover:text-red-600 p-1"
+                    >
+                      <Trash2 className="w-4 h-4" />
+                    </button>
+                  </div>
+                ))}
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 pt-3 border-t border-gray-200">
+                <div className="md:col-span-2">
+                  <label className="block text-xs font-bold text-gray-700 mb-1">
+                    Competidores que nunca se deben nombrar (separados por coma)
+                  </label>
+                  <input
+                    type="text"
+                    value={style.prohibitions.competitors_never_mention.join(', ')}
+                    onChange={(e) =>
+                      setStyle({
+                        ...style,
+                        prohibitions: {
+                          ...style.prohibitions,
+                          competitors_never_mention: e.target.value
+                            .split(',')
+                            .map((s) => s.trim())
+                            .filter(Boolean),
+                        },
+                      })
+                    }
+                    className="w-full rounded-xl border border-gray-300 px-3 py-2 text-xs"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-xs font-bold text-gray-700 mb-1">
+                    Política de Emojis (Imagen vs Copy B2B/B2C)
+                  </label>
+                  <textarea
+                    rows={2}
+                    value={style.prohibitions.emoji_policy}
+                    onChange={(e) =>
+                      setStyle({
+                        ...style,
+                        prohibitions: { ...style.prohibitions, emoji_policy: e.target.value },
+                      })
+                    }
+                    className="w-full rounded-xl border border-gray-300 px-3 py-2 text-xs"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-xs font-bold text-gray-700 mb-1">
+                    Política de Testimonios y Casos de Éxito
+                  </label>
+                  <textarea
+                    rows={2}
+                    value={style.prohibitions.testimonials_policy}
+                    onChange={(e) =>
+                      setStyle({
+                        ...style,
+                        prohibitions: {
+                          ...style.prohibitions,
+                          testimonials_policy: e.target.value,
+                        },
+                      })
+                    }
+                    className="w-full rounded-xl border border-gray-300 px-3 py-2 text-xs"
+                  />
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* SECCIÓN 6: IDENTIDAD VISUAL Y LAYOUT */}
+          {activeSection === 'visual' && (
+            <div className="space-y-5">
+              <div>
+                <h3 className="text-base font-bold text-gray-900">
+                  6. Identidad Visual, Paleta Exacta, Tipografía y Layout
+                </h3>
+                <p className="text-xs text-gray-500 mt-0.5">
+                  Define la paleta oficial, cómo se aplican los colores, las fuentes y la jerarquía de texto en imagen.
+                </p>
+              </div>
+
+              {/* Paleta de colores */}
+              <div className="space-y-2.5">
+                <div className="flex items-center justify-between">
+                  <label className="text-xs font-bold text-gray-700">
+                    Paleta de colores exacta y única
+                  </label>
+                  <button
+                    type="button"
+                    onClick={() =>
+                      setStyle({
+                        ...style,
+                        visual: {
+                          ...style.visual,
+                          colors: [
+                            ...style.visual.colors,
+                            { name: 'Nuevo color', hex: '#2A4D9C', usage: '' },
+                          ],
+                        },
+                      })
+                    }
+                    className="inline-flex items-center gap-1 rounded-lg bg-brand-50 px-2.5 py-1 text-xs font-semibold text-brand-700 hover:bg-brand-100"
+                  >
+                    <Plus className="w-3.5 h-3.5" />
+                    Añadir color
+                  </button>
+                </div>
+
+                {style.visual.colors.map((c, idx) => (
+                  <div key={idx} className="grid grid-cols-1 md:grid-cols-12 gap-2 items-center">
+                    <div className="md:col-span-2 flex items-center gap-2">
+                      <input
+                        type="color"
+                        value={c.hex}
+                        onChange={(e) => {
+                          const next = [...style.visual.colors];
+                          next[idx] = { ...next[idx], hex: e.target.value.toUpperCase() };
+                          setStyle({
+                            ...style,
+                            visual: { ...style.visual, colors: next },
+                          });
+                        }}
+                        className="h-8 w-10 rounded border border-gray-300 cursor-pointer"
+                      />
+                      <input
+                        type="text"
+                        value={c.hex}
+                        onChange={(e) => {
+                          const next = [...style.visual.colors];
+                          next[idx] = { ...next[idx], hex: e.target.value };
+                          setStyle({
+                            ...style,
+                            visual: { ...style.visual, colors: next },
+                          });
+                        }}
+                        className="w-24 rounded-lg border border-gray-300 px-2 py-1.5 text-xs font-mono"
+                      />
+                    </div>
+                    <input
+                      type="text"
+                      value={c.name}
+                      onChange={(e) => {
+                        const next = [...style.visual.colors];
+                        next[idx] = { ...next[idx], name: e.target.value };
+                        setStyle({
+                          ...style,
+                          visual: { ...style.visual, colors: next },
+                        });
+                      }}
+                      placeholder="Nombre (ej: Azul Principal)"
+                      className="md:col-span-3 rounded-lg border border-gray-300 px-2.5 py-1.5 text-xs font-semibold"
+                    />
+                    <input
+                      type="text"
+                      value={c.usage}
+                      onChange={(e) => {
+                        const next = [...style.visual.colors];
+                        next[idx] = { ...next[idx], usage: e.target.value };
+                        setStyle({
+                          ...style,
+                          visual: { ...style.visual, colors: next },
+                        });
+                      }}
+                      placeholder="Regla de uso (ej: Solo para resaltar una palabra o CTA)"
+                      className="md:col-span-6 rounded-lg border border-gray-300 px-2.5 py-1.5 text-xs"
+                    />
+                    <button
+                      type="button"
+                      onClick={() => {
+                        const next = style.visual.colors.filter((_, i) => i !== idx);
+                        setStyle({
+                          ...style,
+                          visual: { ...style.visual, colors: next },
+                        });
+                      }}
+                      className="md:col-span-1 flex justify-center text-gray-400 hover:text-red-600 p-1"
+                    >
+                      <Trash2 className="w-4 h-4" />
+                    </button>
+                  </div>
+                ))}
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 pt-3 border-t border-gray-200">
+                <div className="md:col-span-2">
+                  <label className="block text-xs font-bold text-gray-700 mb-1">
+                    Uso de superficies y fondos
+                  </label>
+                  <textarea
+                    rows={2}
+                    value={style.visual.surface_rules}
+                    onChange={(e) =>
+                      setStyle({
+                        ...style,
+                        visual: { ...style.visual, surface_rules: e.target.value },
+                      })
+                    }
+                    className="w-full rounded-xl border border-gray-300 px-3 py-2 text-xs"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-xs font-bold text-gray-700 mb-1">
+                    Tipografía de Titulares (Hook)
+                  </label>
+                  <input
+                    type="text"
+                    value={style.visual.typography_headline}
+                    onChange={(e) =>
+                      setStyle({
+                        ...style,
+                        visual: { ...style.visual, typography_headline: e.target.value },
+                      })
+                    }
+                    className="w-full rounded-xl border border-gray-300 px-3 py-2 text-xs"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-xs font-bold text-gray-700 mb-1">
+                    Tipografía de Cuerpo / Apoyo (Support)
+                  </label>
+                  <input
+                    type="text"
+                    value={style.visual.typography_body}
+                    onChange={(e) =>
+                      setStyle({
+                        ...style,
+                        visual: { ...style.visual, typography_body: e.target.value },
+                      })
+                    }
+                    className="w-full rounded-xl border border-gray-300 px-3 py-2 text-xs"
+                  />
+                </div>
+
+                <div className="md:col-span-2">
+                  <label className="block text-xs font-bold text-gray-700 mb-1">
+                    Reglas de aplicación del Logo
+                  </label>
+                  <textarea
+                    rows={2}
+                    value={style.visual.logo_rules}
+                    onChange={(e) =>
+                      setStyle({
+                        ...style,
+                        visual: { ...style.visual, logo_rules: e.target.value },
+                      })
+                    }
+                    className="w-full rounded-xl border border-gray-300 px-3 py-2 text-xs"
+                  />
+                </div>
+
+                <div className="md:col-span-2">
+                  <label className="block text-xs font-bold text-gray-700 mb-1">
+                    Reglas de Texto en Imagen (Niveles, máximo de palabras y márgenes de seguridad)
+                  </label>
+                  <textarea
+                    rows={2}
+                    value={style.visual.image_text_rules}
+                    onChange={(e) =>
+                      setStyle({
+                        ...style,
+                        visual: { ...style.visual, image_text_rules: e.target.value },
+                      })
+                    }
+                    className="w-full rounded-xl border border-gray-300 px-3 py-2 text-xs"
+                  />
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* SECCIÓN 7: DIRECCIÓN DE ARTE IA (FREEPIK MYSTIC) */}
           {activeSection === 'image_ai' && (
             <div className="space-y-5">
               <div>
                 <h3 className="text-base font-bold text-gray-900">
-                  1. Dirección de Arte para Fotografía e IA (Freepik Mystic)
+                  7. Dirección de Arte para Fotografía e IA (Freepik Mystic)
                 </h3>
                 <p className="text-xs text-gray-500 mt-0.5">
-                  Instrucciones técnicas inyectadas en Claude para construir el <code>image_prompt</code> de cada variante fotográfica en Freepik Mystic.
+                  Instrucciones exactas para construir el <code>image_prompt</code> de cada variante y evitar imágenes genéricas o ambiguas.
                 </p>
               </div>
 
@@ -385,13 +1594,12 @@ export default function ClientCreativeStylePanel({
                       })
                     }
                     className="w-full rounded-xl border border-gray-300 px-3 py-2 text-xs"
-                    placeholder="Fotografía realista con luz natural, personas reales en contexto del servicio, sin poses forzadas..."
                   />
                 </div>
 
                 <div>
                   <label className="block text-xs font-bold text-gray-700 mb-1">
-                    Regla de los 1,5 segundos (Qué elementos deben verse sin texto para identificar el servicio)
+                    Regla de los 1,5 segundos (Qué objetos y roles deben verse sin texto para entender el servicio)
                   </label>
                   <textarea
                     rows={3}
@@ -403,13 +1611,12 @@ export default function ClientCreativeStylePanel({
                       })
                     }
                     className="w-full rounded-xl border border-gray-300 px-3 py-2 text-xs"
-                    placeholder="La escena debe mostrar claramente el producto o servicio en menos de 1,5 segundos..."
                   />
                 </div>
 
                 <div>
                   <label className="block text-xs font-bold text-gray-700 mb-1">
-                    Escenas ambiguas a evitar (ej. firma de documentos, consulta médica, banco, catálogo genérico)
+                    Escenas ambiguas a evitar (ej: firma de documentos, entrevista, banco...)
                   </label>
                   <textarea
                     rows={2}
@@ -421,13 +1628,12 @@ export default function ClientCreativeStylePanel({
                       })
                     }
                     className="w-full rounded-xl border border-gray-300 px-3 py-2 text-xs"
-                    placeholder="Nada que parezca firma de documentos, entrevista, banco o fotos de catálogo sonriendo vacías..."
                   />
                 </div>
 
                 <div>
                   <label className="block text-xs font-bold text-gray-700 mb-1">
-                    Regla de número de personas en escena (Individual vs Profesor-Alumno / Interacción)
+                    Regla de número de personas en escena (Individual vs Profesor-Alumno)
                   </label>
                   <textarea
                     rows={2}
@@ -439,13 +1645,12 @@ export default function ClientCreativeStylePanel({
                       })
                     }
                     className="w-full rounded-xl border border-gray-300 px-3 py-2 text-xs"
-                    placeholder="1 persona si el mensaje es individual; 2 personas si muestra relación cliente-profesional..."
                   />
                 </div>
 
                 <div>
                   <label className="block text-xs font-bold text-gray-700 mb-1">
-                    Instrucción en inglés de espacio negativo y cierre técnico del prompt
+                    Instrucción en inglés de espacio negativo y cierre obligatorio del prompt
                   </label>
                   <textarea
                     rows={2}
@@ -453,29 +1658,25 @@ export default function ClientCreativeStylePanel({
                     onChange={(e) =>
                       setStyle({
                         ...style,
-                        image_ai: {
-                          ...style.image_ai,
-                          negative_space_prompt: e.target.value,
-                        },
+                        image_ai: { ...style.image_ai, negative_space_prompt: e.target.value },
                       })
                     }
                     className="w-full rounded-xl border border-gray-300 px-3 py-2 text-xs font-mono"
-                    placeholder="the upper third of the frame is empty wall or sky. no text, no logos, no watermarks, photorealistic, vertical 4:5 composition with clear negative space for a headline."
                   />
                 </div>
               </div>
             </div>
           )}
 
-          {/* SECCIÓN 2: PLANTILLAS CANVA Y CONEXIONES */}
-          {activeSection === 'canva' && (
+          {/* SECCIÓN 8: CAMPAÑAS, PLANTILLAS CANVA Y CONEXIONES */}
+          {activeSection === 'technical' && (
             <div className="space-y-6">
               <div>
                 <h3 className="text-base font-bold text-gray-900">
-                  2. Plantillas de Marca en Canva & Conexiones Técnicas
+                  8. Plantillas Canva, Reglas de Audiencia y Mapeo por Campaña
                 </h3>
                 <p className="text-xs text-gray-500 mt-0.5">
-                  Brand Templates de Canva (con los campos autofill vinculados <code>foto</code>, <code>hook</code> y <code>support</code>) y credenciales de integración.
+                  Configura los Brand Templates de Canva (con los campos <code>foto</code>, <code>hook</code> y <code>support</code>), los IDs de Meta/Slack/Drive y el diccionario de campañas.
                 </p>
               </div>
 
@@ -487,7 +1688,7 @@ export default function ClientCreativeStylePanel({
                       Módulo de Creatividades Automáticas (n8n + Claude + Canva)
                     </div>
                     <div className="text-[11px] text-gray-500">
-                      Si está activo, n8n detecta fatiga diaria y procesa peticiones de relevo para este cliente.
+                      Si está activo, n8n sincroniza métricas diarias, detecta fatiga y genera relevos para este cliente.
                     </div>
                   </div>
                   <input
@@ -513,7 +1714,7 @@ export default function ClientCreativeStylePanel({
 
                 <div>
                   <label className="block text-[11px] font-bold text-gray-700 mb-1">
-                    Slack Channel ID (Avisos de relevo)
+                    Slack Channel ID (Aprobaciones/Avisos)
                   </label>
                   <input
                     type="text"
@@ -526,26 +1727,13 @@ export default function ClientCreativeStylePanel({
 
                 <div>
                   <label className="block text-[11px] font-bold text-gray-700 mb-1">
-                    Google Drive Folder ID (Exportación)
+                    Google Drive Folder ID
                   </label>
                   <input
                     type="text"
                     value={driveFolderId}
                     onChange={(e) => setDriveFolderId(e.target.value)}
-                    placeholder="ID de carpeta en Google Drive"
-                    className="w-full rounded-lg border border-gray-300 bg-white px-2.5 py-1.5 text-xs font-mono"
-                  />
-                </div>
-
-                <div className="md:col-span-3">
-                  <label className="block text-[11px] font-bold text-gray-700 mb-1">
-                    URL de Destino por Defecto para Anuncios
-                  </label>
-                  <input
-                    type="text"
-                    value={defaultLandingUrl}
-                    onChange={(e) => setDefaultLandingUrl(e.target.value)}
-                    placeholder="https://tuempresa.com/landing"
+                    placeholder="ID carpeta en Drive"
                     className="w-full rounded-lg border border-gray-300 bg-white px-2.5 py-1.5 text-xs font-mono"
                   />
                 </div>
@@ -553,14 +1741,9 @@ export default function ClientCreativeStylePanel({
 
               {/* Plantillas de Canva */}
               <div className="space-y-3 pt-2 border-t border-gray-200">
-                <div className="flex items-center justify-between">
-                  <h4 className="text-xs font-bold uppercase tracking-wider text-gray-700">
-                    Plantillas de Marca en Canva (Brand Template IDs para WF5 · Feed 4:5, Stories 9:16 y 1.91:1)
-                  </h4>
-                  <span className="text-[11px] text-gray-500 font-medium">
-                    Campos requeridos: <code>foto</code>, <code>hook</code>, <code>support</code>
-                  </span>
-                </div>
+                <h4 className="text-xs font-bold uppercase tracking-wider text-gray-700">
+                  Plantillas Canva WF5 · 4:5 feed + 9:16 Stories + 1.91:1 landscape
+                </h4>
                 <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-6 gap-3">
                   <div>
                     <label className="block text-[11px] font-semibold text-gray-600 mb-1">
@@ -666,29 +1849,15 @@ export default function ClientCreativeStylePanel({
                   </div>
                 </div>
               </div>
-            </div>
-          )}
 
-          {/* SECCIÓN 3: META ADS Y CAMPAÑAS */}
-          {activeSection === 'campaigns' && (
-            <div className="space-y-6">
-              <div>
-                <h3 className="text-base font-bold text-gray-900">
-                  3. Meta Ads: Reglas de Detección y Mapeo por Campaña
-                </h3>
-                <p className="text-xs text-gray-500 mt-0.5">
-                  Define cómo deduce Claude si una campaña es B2B o B2C a partir del nombre, y personaliza el producto y URL de destino de cada campaña.
-                </p>
-              </div>
-
-              {/* Reglas de detección automática */}
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              {/* Reglas de audiencia por campaña */}
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 pt-3 border-t border-gray-200">
                 <div>
                   <label className="block text-xs font-bold text-gray-700 mb-1">
-                    Reglas y palabras clave para detectar campaña B2C
+                    Reglas y enfoque cuando la campaña es B2C
                   </label>
                   <textarea
-                    rows={3}
+                    rows={2}
                     value={style.campaign_rules.b2c_detection_rules}
                     onChange={(e) =>
                       setStyle({
@@ -700,15 +1869,14 @@ export default function ClientCreativeStylePanel({
                       })
                     }
                     className="w-full rounded-xl border border-gray-300 px-3 py-2 text-xs"
-                    placeholder="Campañas B2C (Matrículas, Adultos, Certificaciones): dolor individual, apps que no avanzan. Habla de 'tu inglés'..."
                   />
                 </div>
                 <div>
                   <label className="block text-xs font-bold text-gray-700 mb-1">
-                    Reglas y palabras clave para detectar campaña B2B
+                    Reglas y enfoque cuando la campaña es B2B
                   </label>
                   <textarea
-                    rows={3}
+                    rows={2}
                     value={style.campaign_rules.b2b_detection_rules}
                     onChange={(e) =>
                       setStyle({
@@ -720,40 +1888,39 @@ export default function ClientCreativeStylePanel({
                       })
                     }
                     className="w-full rounded-xl border border-gray-300 px-3 py-2 text-xs"
-                    placeholder="Campañas B2B (Empresas, FUNDAE, In-company): coste bonificado, solución para equipos. Habla de 'tu equipo'..."
                   />
                 </div>
                 <div className="md:col-span-2">
                   <label className="block text-xs font-bold text-gray-700 mb-1">
-                    Regla de audiencia por defecto (Fallback)
+                    Instrucciones adicionales específicas para Claude (Opcional)
                   </label>
-                  <input
-                    type="text"
-                    value={style.campaign_rules.fallback_audience_rule}
+                  <textarea
+                    rows={2}
+                    value={style.campaign_rules.extra_claude_instructions}
                     onChange={(e) =>
                       setStyle({
                         ...style,
                         campaign_rules: {
                           ...style.campaign_rules,
-                          fallback_audience_rule: e.target.value,
+                          extra_claude_instructions: e.target.value,
                         },
                       })
                     }
+                    placeholder="Cualquier matiz extra de temporada, oferta puntual o directriz que quieras inyectar al final de la skill..."
                     className="w-full rounded-xl border border-gray-300 px-3 py-2 text-xs"
-                    placeholder="Si el brief no trae audience y no se puede deducir del nombre de campaña, se pregunta en notes y se genera en B2C."
                   />
                 </div>
               </div>
 
-              {/* Diccionario de campañas */}
+              {/* Mapeo de Campañas (Audiencia, Producto y Landing) */}
               <div className="space-y-3 pt-3 border-t border-gray-200">
                 <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
                   <div>
                     <h4 className="text-xs font-bold uppercase tracking-wider text-gray-700">
-                      Diccionario de Campañas (Audiencia, Producto y Landing URL)
+                      Diccionario de Campañas de Meta Ads (Audiencia, Producto y Landing URL)
                     </h4>
                     <p className="text-[11px] text-gray-500">
-                      Se inyecta automáticamente en el <code>brief</code> cuando entra en fatiga una creatividad de esa campaña.
+                      Se inyecta automáticamente en el <code>brief</code> cuando una creatividad de esa campaña entra en fatiga o pide relevo.
                     </p>
                   </div>
                   <div className="flex items-center gap-2">
@@ -762,23 +1929,20 @@ export default function ClientCreativeStylePanel({
                         type="button"
                         onClick={() => {
                           const existingNames = new Set(
-                            campaignRows.map((r) =>
-                              r.campaign_name.trim().toLowerCase()
-                            )
+                            campaignRows.map((r) => r.campaign_name.trim().toLowerCase())
                           );
                           const newRows: CampaignRow[] = [];
                           for (const cName of detectedCampaigns) {
                             if (!existingNames.has(cName.trim().toLowerCase())) {
-                              const isB2B =
-                                /fundae|empresa|in-company|b2b|equipo|sector/i.test(
-                                  cName
-                                );
+                              const isB2B = /fundae|empresa|in-company|b2b|equipo|sector/i.test(
+                                cName
+                              );
                               newRows.push({
                                 campaign_name: cName,
                                 audience: isB2B ? 'b2b' : 'b2c',
                                 product: isB2B
-                                  ? 'Programas de formación para empresas'
-                                  : 'Cursos y programas individuales',
+                                  ? 'Programas de inglés para empresas (FUNDAE)'
+                                  : 'Cursos de inglés para adultos',
                                 landing_url: defaultLandingUrl || '',
                               });
                             }
@@ -786,9 +1950,7 @@ export default function ClientCreativeStylePanel({
                           if (newRows.length > 0) {
                             setCampaignRows([...campaignRows, ...newRows]);
                           } else {
-                            alert(
-                              'Todas las campañas detectadas en Meta ya están en la tabla.'
-                            );
+                            alert('Todas las campañas detectadas en Meta ya están en la tabla.');
                           }
                         }}
                         className="inline-flex items-center gap-1 rounded-lg border border-indigo-200 bg-indigo-50 px-2.5 py-1 text-xs font-semibold text-indigo-700 hover:bg-indigo-100"
@@ -819,170 +1981,99 @@ export default function ClientCreativeStylePanel({
                 </div>
 
                 <div className="space-y-2">
-                  {campaignRows.length === 0 ? (
-                    <p className="text-xs text-gray-400 italic py-2">
-                      No hay campañas configuradas. Haz clic en «Detectar campañas de Meta» o añade una manualmente.
-                    </p>
-                  ) : (
-                    campaignRows.map((row, idx) => (
-                      <div
-                        key={idx}
-                        className="grid grid-cols-1 md:grid-cols-12 gap-2 items-center rounded-xl border border-gray-200 bg-gray-50/50 p-2.5"
+                  {campaignRows.map((row, idx) => (
+                    <div
+                      key={idx}
+                      className="grid grid-cols-1 md:grid-cols-12 gap-2 items-center rounded-xl border border-gray-200 bg-gray-50/50 p-2.5"
+                    >
+                      <input
+                        type="text"
+                        value={row.campaign_name}
+                        onChange={(e) => {
+                          const next = [...campaignRows];
+                          next[idx] = { ...next[idx], campaign_name: e.target.value };
+                          setCampaignRows(next);
+                        }}
+                        placeholder="Nombre campaña Meta"
+                        className="md:col-span-3 rounded-lg border border-gray-300 bg-white px-2.5 py-1.5 text-xs font-semibold"
+                      />
+                      <select
+                        value={row.audience}
+                        onChange={(e) => {
+                          const next = [...campaignRows];
+                          next[idx] = {
+                            ...next[idx],
+                            audience: e.target.value as 'b2b' | 'b2c',
+                          };
+                          setCampaignRows(next);
+                        }}
+                        className="md:col-span-2 rounded-lg border border-gray-300 bg-white px-2 py-1.5 text-xs font-bold uppercase"
                       >
-                        <input
-                          type="text"
-                          value={row.campaign_name}
-                          onChange={(e) => {
-                            const next = [...campaignRows];
-                            next[idx] = {
-                              ...next[idx],
-                              campaign_name: e.target.value,
-                            };
-                            setCampaignRows(next);
-                          }}
-                          placeholder="Nombre exacto en Meta Ads"
-                          className="md:col-span-3 rounded-lg border border-gray-300 bg-white px-2.5 py-1.5 text-xs font-semibold"
-                        />
-                        <select
-                          value={row.audience}
-                          onChange={(e) => {
-                            const next = [...campaignRows];
-                            next[idx] = {
-                              ...next[idx],
-                              audience: e.target.value as 'b2b' | 'b2c',
-                            };
-                            setCampaignRows(next);
-                          }}
-                          className="md:col-span-2 rounded-lg border border-gray-300 bg-white px-2 py-1.5 text-xs font-bold uppercase"
-                        >
-                          <option value="b2c">B2C (Particular)</option>
-                          <option value="b2b">B2B (Empresa)</option>
-                        </select>
-                        <input
-                          type="text"
-                          value={row.product}
-                          onChange={(e) => {
-                            const next = [...campaignRows];
-                            next[idx] = {
-                              ...next[idx],
-                              product: e.target.value,
-                            };
-                            setCampaignRows(next);
-                          }}
-                          placeholder="Producto / Servicio anunciado"
-                          className="md:col-span-3 rounded-lg border border-gray-300 bg-white px-2.5 py-1.5 text-xs"
-                        />
-                        <input
-                          type="text"
-                          value={row.landing_url}
-                          onChange={(e) => {
-                            const next = [...campaignRows];
-                            next[idx] = {
-                              ...next[idx],
-                              landing_url: e.target.value,
-                            };
-                            setCampaignRows(next);
-                          }}
-                          placeholder="https://..."
-                          className="md:col-span-3 rounded-lg border border-gray-300 bg-white px-2.5 py-1.5 text-xs font-mono"
-                        />
-                        <button
-                          type="button"
-                          onClick={() =>
-                            setCampaignRows(
-                              campaignRows.filter((_, i) => i !== idx)
-                            )
-                          }
-                          className="md:col-span-1 flex justify-center text-gray-400 hover:text-red-600 p-1"
-                        >
-                          <Trash2 className="w-4 h-4" />
-                        </button>
-                      </div>
-                    ))
-                  )}
+                        <option value="b2c">B2C (Particular)</option>
+                        <option value="b2b">B2B (Empresa)</option>
+                      </select>
+                      <input
+                        type="text"
+                        value={row.product}
+                        onChange={(e) => {
+                          const next = [...campaignRows];
+                          next[idx] = { ...next[idx], product: e.target.value };
+                          setCampaignRows(next);
+                        }}
+                        placeholder="Producto / Servicio anunciado"
+                        className="md:col-span-3 rounded-lg border border-gray-300 bg-white px-2.5 py-1.5 text-xs"
+                      />
+                      <input
+                        type="text"
+                        value={row.landing_url}
+                        onChange={(e) => {
+                          const next = [...campaignRows];
+                          next[idx] = { ...next[idx], landing_url: e.target.value };
+                          setCampaignRows(next);
+                        }}
+                        placeholder="https://..."
+                        className="md:col-span-3 rounded-lg border border-gray-300 bg-white px-2.5 py-1.5 text-xs font-mono"
+                      />
+                      <button
+                        type="button"
+                        onClick={() =>
+                          setCampaignRows(campaignRows.filter((_, i) => i !== idx))
+                        }
+                        className="md:col-span-1 flex justify-center text-gray-400 hover:text-red-600 p-1"
+                      >
+                        <Trash2 className="w-4 h-4" />
+                      </button>
+                    </div>
+                  ))}
                 </div>
               </div>
             </div>
           )}
 
-          {/* SECCIÓN 4: OVERRIDES ADS (OPCIONAL) */}
-          {activeSection === 'overrides' && (
-            <div className="space-y-5">
-              <div>
-                <h3 className="text-base font-bold text-gray-900">
-                  4. Overrides & Instrucciones Adicionales para Claude (WF3)
-                </h3>
-                <p className="text-xs text-gray-500 mt-0.5">
-                  Directrices puntuales o excepciones de temporada que se anexan al final del skill inyectado a Claude en cada relevo de anuncios.
-                </p>
-              </div>
-
-              <div>
-                <label className="block text-xs font-bold text-gray-700 mb-1">
-                  Instrucciones adicionales para Claude en generación de relevos
-                </label>
-                <textarea
-                  rows={6}
-                  value={style.campaign_rules.extra_claude_instructions}
-                  onChange={(e) =>
-                    setStyle({
-                      ...style,
-                      campaign_rules: {
-                        ...style.campaign_rules,
-                        extra_claude_instructions: e.target.value,
-                      },
-                    })
-                  }
-                  placeholder="Ej: Durante este mes priorizar el claim de bonificación antes del 31 de diciembre. Si la campaña es Cambridge, enfatizar convocatoria intensiva de verano..."
-                  className="w-full rounded-xl border border-gray-300 px-3 py-2 text-xs"
-                />
-              </div>
-
-              <div className="rounded-xl border border-amber-200 bg-amber-50/70 p-3.5 text-xs text-amber-800 space-y-1">
-                <div className="font-bold flex items-center gap-1.5">
-                  <Sparkles className="w-4 h-4 text-amber-600" />
-                  ¿Buscas editar el tono, las líneas rojas o los buyer personas?
-                </div>
-                <p className="text-[11px] leading-relaxed">
-                  Los valores permanentes de la marca (propuesta de valor, buyer personas B2B/B2C, objeciones y refutaciones, tipografías, colores y disclaimers legales) deben configurarse en la{' '}
-                  <a
-                    href="/dashboard/marca"
-                    className="font-bold underline text-amber-900 hover:text-amber-950"
-                  >
-                    Zona de Marca (/dashboard/marca)
-                  </a>{' '}
-                  para que se sincronicen de manera unificada entre Ads, RRSS, Blog y Pipeline.
-                </p>
-              </div>
-            </div>
-          )}
-
-          {/* SECCIÓN 5: VISTA PREVIA SKILL MARKDOWN */}
+          {/* SECCIÓN 9: VISTA PREVIA SKILL MARKDOWN */}
           {activeSection === 'preview' && (
             <div className="space-y-4">
-              <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
+              <div className="flex items-center justify-between">
                 <div>
                   <h3 className="text-base font-bold text-gray-900">
-                    5. Vista Previa de la Skill Markdown Unificada para Claude (WF3)
+                    9. Vista Previa de la Skill Markdown que recibe Claude (WF3)
                   </h3>
                   <p className="text-xs text-gray-500 mt-0.5">
-                    Este documento se compila en vivo a partir de la <strong>Zona de Marca</strong> + la operativa de este panel. Se entrega a n8n en <code>GET /api/integrations/skills?client_id={tenantId}</code>.
+                    Este documento se genera automáticamente a partir de las 8 secciones anteriores y se entrega en vivo por <code>GET /api/integrations/skills?client_id={tenantId}</code>.
                   </p>
                 </div>
-                <div className="flex items-center gap-2">
-                  <button
-                    type="button"
-                    onClick={() => {
-                      navigator.clipboard.writeText(liveMarkdown);
-                      setCopied(true);
-                      setTimeout(() => setCopied(false), 2000);
-                    }}
-                    className="inline-flex items-center gap-1.5 rounded-xl border border-gray-300 bg-white px-3 py-1.5 text-xs font-semibold text-gray-700 hover:bg-gray-50 shadow-xs"
-                  >
-                    <Copy className="w-3.5 h-3.5" />
-                    {copied ? 'Copiado al portapapeles' : 'Copiar Markdown'}
-                  </button>
-                </div>
+                <button
+                  type="button"
+                  onClick={() => {
+                    navigator.clipboard.writeText(liveMarkdown);
+                    setCopied(true);
+                    setTimeout(() => setCopied(false), 2000);
+                  }}
+                  className="inline-flex items-center gap-1.5 rounded-xl border border-gray-300 bg-white px-3 py-1.5 text-xs font-semibold text-gray-700 hover:bg-gray-50"
+                >
+                  <Copy className="w-3.5 h-3.5" />
+                  {copied ? 'Copiado' : 'Copiar Markdown'}
+                </button>
               </div>
 
               <pre className="max-h-[600px] overflow-y-auto rounded-2xl border border-gray-800 bg-gray-950 p-5 text-xs leading-relaxed text-gray-100 font-mono whitespace-pre-wrap">