<!DOCTYPE html>
<!--
  TEMPLATE DO DASHBOARD DE CAMPANHA — design Painel da Tata.
  Substitua todos os tokens {{...}} pelos dados reais da campanha.
  Para blocos repetíveis (cards, linhas), duplique o elemento exemplo.
  Mantenha a paleta e as fontes — é o sistema de design oficial.
-->
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Campanha {{LOJA}} — {{COLECAO}}</title>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
  :root{
    --creme:#F5F0E8; --creme-2:#EDE6DA; --navy:#1B2A4A; --navy-2:#2C3E63;
    --purpura:#6B4E9E; --purpura-claro:#9B7FC4; --texto:#2A2A2A; --suave:#6E6A63;
    --borda:#DDD3C4; --branco:#FFFDFA;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:'Montserrat',sans-serif;background:var(--creme);color:var(--texto);line-height:1.6}
  .wrap{max-width:1080px;margin:0 auto;padding:48px 24px}
  header{text-align:center;padding:48px 24px;background:var(--navy);color:var(--branco);border-radius:18px;margin-bottom:40px}
  header .eyebrow{font-size:.8rem;letter-spacing:.28em;text-transform:uppercase;color:var(--purpura-claro);margin-bottom:14px}
  header h1{font-family:'Cormorant Garamond',serif;font-size:2.9rem;font-weight:700;line-height:1.1}
  header p{margin-top:14px;color:#C9D0DE;font-weight:300}
  .section{margin-bottom:40px}
  .section > h2{font-family:'Cormorant Garamond',serif;font-size:2rem;color:var(--navy);margin-bottom:6px}
  .section > h2 .num{color:var(--purpura);font-size:1.1rem;font-weight:600;font-family:'Montserrat';vertical-align:super;margin-right:8px}
  .section > .sub{color:var(--suave);font-size:.95rem;margin-bottom:22px}
  .card{background:var(--branco);border:1px solid var(--borda);border-radius:14px;padding:26px;margin-bottom:18px;box-shadow:0 1px 0 rgba(0,0,0,.02)}
  .card h3{font-size:1.05rem;color:var(--navy);margin-bottom:10px;font-weight:600}
  .card h3 .tag{font-size:.68rem;background:var(--purpura);color:#fff;padding:3px 10px;border-radius:20px;margin-left:8px;letter-spacing:.06em;vertical-align:middle}
  .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
  .pill{display:inline-block;background:var(--creme-2);border:1px solid var(--borda);color:var(--navy);
    padding:6px 14px;border-radius:20px;font-size:.85rem;margin:4px 4px 0 0}
  .kw{background:#EEE7F5;border-color:#D9CBEC;color:var(--purpura)}
  table{width:100%;border-collapse:collapse;font-size:.9rem}
  th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--borda);vertical-align:top}
  th{background:var(--creme-2);color:var(--navy);font-weight:600;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase}
  .msg{background:var(--creme);border-left:3px solid var(--purpura);padding:14px 16px;border-radius:0 10px 10px 0;margin:10px 0;white-space:pre-wrap;font-size:.92rem}
  .muted{color:var(--suave);font-size:.85rem}
  footer{text-align:center;color:var(--suave);font-size:.8rem;padding:30px 0 10px}
  footer b{color:var(--navy)}
</style>
</head>
<body>
<div class="wrap">

  <header>
    <div class="eyebrow">Campanha Multicanal · Moda</div>
    <h1>{{LOJA}} — {{COLECAO}}</h1>
    <p>{{ESTACAO_OU_OCASIAO}} · gerado em {{DATA}}</p>
  </header>

  <!-- 1. PÚBLICO-ALVO -->
  <div class="section">
    <h2><span class="num">01</span>Público-Alvo da Coleção</h2>
    <div class="sub">Inferido das fotos da coleção + persona profunda.</div>
    <div class="card">
      <h3>{{NOME_PERSONA}}</h3>
      <p>{{DESCRICAO_PERSONA_ESTILO_DE_VIDA}}</p>
      <p style="margin-top:12px"><b>Compra dispara quando:</b> {{GATILHO}}</p>
      <p><b>Quer sentir:</b> {{IDENTIDADE_DESEJADA}}</p>
      <p><b>Objeções:</b> {{OBJECOES}}</p>
      <div style="margin-top:12px">{{PILLS_GATILHOS}}<!-- <span class="pill">gatilho</span> --></div>
    </div>
  </div>

  <!-- 2. WHATSAPP -->
  <div class="section">
    <h2><span class="num">02</span>WhatsApp — Disparo em Massa</h2>
    <div class="sub">Sequência de toques por segmento da base.</div>
    <div class="card">
      <h3>{{TOQUE_NOME}} <span class="tag">{{SEGMENTO}}</span></h3>
      <div class="msg">{{MENSAGEM_WHATSAPP}}</div>
      <p class="muted">Fotos sugeridas: {{FOTOS}}</p>
    </div>
  </div>

  <!-- 3. INSTAGRAM / TIKTOK -->
  <div class="section">
    <h2><span class="num">03</span>Instagram & TikTok — Roteiro + Legenda + SEO</h2>
    <div class="sub">Keyword-mãe: <b>{{KEYWORD_MAE}}</b> · Secundárias embarcadas no roteiro e legenda.</div>
    <div class="card">
      <h3>{{TITULO_ROTEIRO}} <span class="tag">Reels/TikTok</span></h3>
      <table>
        <thead><tr><th>Tempo</th><th>Fala (com keyword)</th><th>Cena</th><th>Texto na tela</th></tr></thead>
        <tbody>
          <tr><td>{{T}}</td><td>{{FALA}}</td><td>{{CENA}}</td><td>{{TELA}}</td></tr>
        </tbody>
      </table>
      <h3 style="margin-top:18px">Legenda</h3>
      <div class="msg">{{LEGENDA}}</div>
      <div style="margin-top:10px">{{HASHTAGS_PILLS}}<!-- <span class="pill kw">#hashtag</span> --></div>
    </div>
  </div>

  <!-- 4. FACEBOOK ADS -->
  <div class="section">
    <h2><span class="num">04</span>Facebook/Meta Ads — Interesses Estratégicos</h2>
    <div class="sub">3 conjuntos de público + funil. Concorrentes diretos em destaque.</div>
    <div class="grid">
      <div class="card">
        <h3>{{CONJUNTO_NOME}}</h3>
        <div>{{INTERESSES_PILLS}}<!-- <span class="pill">interesse</span> --></div>
      </div>
    </div>
    <p class="muted" style="margin-top:10px">Pixel isolado por loja · pausar só no nível do anúncio · testar Advantage+ em paralelo.</p>
  </div>

  <!-- 5. GOOGLE -->
  <div class="section">
    <h2><span class="num">05</span>Google — Palavras-Chave Reais</h2>
    <div class="sub">Como o público realmente busca. Organizado por intenção.</div>
    <div class="card">
      <h3>Transacional / Comercial</h3>
      <div>{{KEYWORDS_PILLS}}<!-- <span class="pill kw">termo exato</span> --></div>
      <p class="muted" style="margin-top:12px"><b>Negativas:</b> {{NEGATIVAS}}</p>
    </div>
  </div>

  <footer>
    Campanha gerada pela skill <b>/campanha-loja-roupa</b> · Método Imperatriz<br>
    Toda copy validada com voz-humana-br
  </footer>

</div>
</body>
</html>
