<!DOCTYPE html>
<!--
  TEMPLATE — Dossiê IA na Rotina (padrão Luxe)
  Preencher todos os {{PLACEHOLDERS}} e duplicar os blocos marcados com
  "REPETIR" conforme a quantidade de itens da pessoa.
  Design system: Painel da Tata — creme + navy + púrpura, Montserrat + Cormorant.
  Princípios Luxe aplicados: o entregável é um DOSSIÊ sob medida com edição
  numerada; copy afirma (não justifica); luxo respira (espaço em branco);
  convite no fechamento (nunca empurrão). {{NUMERO_EDICAO}} = 001, 002...
-->
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dossiê IA na Rotina — {{NOME_DA_PESSOA}}</title>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500;1,600&family=Montserrat:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
  :root{
    --creme:#F5EFE0; --creme-2:#EFE6D2; --navy:#2D2A5E; --navy-2:#3D3878;
    --purpura:#6B4FA0; --purpura-2:#8B7AB8; --dourado:#C9A227;
    --tinta:#2B2540; --suave:#6E6787; --branco:#FFFDF8;
    --ok:#3E7C4F; --alerta:#B4552D;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  body{font-family:'Montserrat',sans-serif;background:var(--creme);color:var(--tinta);line-height:1.7}
  .wrap{max-width:1060px;margin:0 auto;padding:32px 24px}

  /* CAPA */
  .capa{background:linear-gradient(150deg,var(--navy) 0%,var(--purpura) 100%);color:var(--creme);border-radius:26px;padding:72px 56px 64px;margin-bottom:40px;position:relative;overflow:hidden}
  .capa::after{content:"";position:absolute;top:-80px;right:-80px;width:260px;height:260px;border:1px solid rgba(201,162,39,.35);border-radius:50%}
  .capa::before{content:"";position:absolute;top:-40px;right:-40px;width:260px;height:260px;border:1px solid rgba(245,239,224,.12);border-radius:50%}
  .edicao{display:flex;justify-content:space-between;align-items:center;font-size:.68rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;opacity:.85;margin-bottom:44px}
  .edicao .fio{flex:1;height:1px;background:rgba(245,239,224,.25);margin:0 20px}
  .capa h1{font-family:'Cormorant Garamond',serif;font-size:clamp(2.2rem,5.5vw,3.6rem);font-weight:500;line-height:1.12}
  .capa h1 em{color:var(--dourado);font-style:italic}
  .capa .tese{margin-top:28px;max-width:560px;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.25rem;line-height:1.5;color:rgba(245,239,224,.92)}
  .capa .selo{margin-top:40px;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--dourado)}

  /* PLACAR */
  .placar{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-bottom:40px}
  .placar .card{background:var(--branco);border:1px solid var(--creme-2);border-radius:18px;padding:28px 22px;text-align:center}
  .placar .num{font-family:'Cormorant Garamond',serif;font-size:2.8rem;font-weight:500;color:var(--navy);line-height:1}
  .placar .num.destaque{color:var(--purpura)}
  .placar .lbl{margin-top:10px;font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--suave)}

  section{background:var(--branco);border:1px solid var(--creme-2);border-radius:22px;padding:48px 44px;margin-bottom:32px}
  .num-secao{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:.95rem;color:var(--dourado);letter-spacing:.1em;margin-bottom:6px}
  h2{font-family:'Cormorant Garamond',serif;font-size:2rem;font-weight:500;color:var(--navy);margin-bottom:8px}
  .sub{font-size:.9rem;color:var(--suave);margin-bottom:28px;max-width:620px}
  .fio-h{height:1px;background:var(--creme-2);margin:0 0 28px;max-width:80px}

  /* TABELA ROTINA */
  .tabela-scroll{overflow-x:auto}
  table{width:100%;border-collapse:collapse;font-size:.88rem;min-width:640px}
  th{background:var(--navy);color:var(--creme);text-align:left;padding:11px 16px;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
  th:first-child{border-radius:10px 0 0 10px}th:last-child{border-radius:0 10px 10px 0}
  td{padding:14px 16px;border-bottom:1px solid var(--creme-2)}
  .pill{display:inline-block;padding:3px 13px;border-radius:999px;font-size:.7rem;font-weight:700;letter-spacing:.03em}
  .pill.agente{background:#E9E2F5;color:var(--purpura)}
  .pill.skill{background:#E3ECE5;color:var(--ok)}
  .pill.app{background:#FBEED2;color:#8a6a10}
  .pill.humano{background:#F7E3D8;color:var(--alerta)}
  .dor{font-weight:700;color:var(--alerta)}

  /* FICHAS */
  .grid-fichas{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}
  .ficha{border:1px solid var(--creme-2);border-left:4px solid var(--purpura);border-radius:14px;padding:26px 24px;background:var(--creme)}
  .ficha.f-skill{border-left-color:var(--ok)}
  .ficha.f-app{border-left-color:var(--dourado)}
  .ficha.f-humano{border-left-color:var(--alerta)}
  .ficha h3{font-size:1rem;font-weight:700;color:var(--navy);margin-bottom:10px}
  .ficha ul{list-style:none;font-size:.84rem}
  .ficha li{padding:5px 0;border-bottom:1px dashed var(--creme-2)}
  .ficha li:last-child{border-bottom:none}
  .ficha li b{color:var(--suave);font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}
  .onda{float:right;font-size:.68rem;font-weight:800;letter-spacing:.1em;color:var(--purpura)}

  /* ESCADA */
  .escada{display:flex;flex-direction:column;gap:10px}
  .degrau{display:flex;align-items:center;gap:18px;background:var(--creme);border-radius:12px;padding:16px 22px;border:1px solid var(--creme-2)}
  .degrau .n{font-family:'Cormorant Garamond',serif;font-size:1.6rem;font-weight:500;color:var(--purpura);min-width:28px;text-align:center}
  .degrau .t{font-weight:700;font-size:.9rem;color:var(--navy)}
  .degrau .d{font-size:.82rem;color:var(--suave)}
  .degrau.topo{background:linear-gradient(135deg,var(--navy),var(--purpura));border:none}
  .degrau.topo .t,.degrau.topo .d{color:var(--creme)}
  .degrau.topo .n{color:var(--dourado)}

  /* ORGANOGRAMA */
  .org{display:flex;flex-direction:column;align-items:center}
  .org .no{border-radius:14px;padding:16px 30px;text-align:center;font-weight:700;font-size:.9rem}
  .org .pessoa{background:var(--navy);color:var(--creme)}
  .org .ceo{background:var(--purpura);color:var(--creme)}
  .org .linha{width:1px;height:26px;background:var(--purpura-2)}
  .org .gerentes{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
  .org .coluna{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:220px}
  .org .gerente{background:var(--purpura-2);color:var(--creme);border-radius:12px;padding:11px 18px;font-weight:700;font-size:.84rem;text-align:center;width:100%}
  .org .itens{display:flex;flex-direction:column;gap:6px;width:100%}
  .org .item{background:var(--creme);border:1px solid var(--creme-2);border-radius:10px;padding:9px 12px;font-size:.78rem;text-align:center}

  /* BRIEFING */
  .zap{background:#E7F6EC;border-radius:18px;padding:26px;max-width:520px;margin:0 auto;border:1px solid #cde8d6}
  .zap .bolha{background:var(--branco);border-radius:4px 16px 16px 16px;padding:20px;font-size:.86rem;white-space:pre-line;box-shadow:0 1px 3px rgba(0,0,0,.08)}
  .zap .hora{font-size:.7rem;color:var(--suave);text-align:right;margin-top:6px}

  /* ROADMAP */
  .ondas{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
  .onda-card{border-radius:16px;padding:28px 24px;background:var(--creme);border:1px solid var(--creme-2)}
  .onda-card.o1{background:linear-gradient(135deg,var(--navy),var(--purpura));color:var(--creme);border:none}
  .onda-card h3{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:500;margin-bottom:4px}
  .onda-card .prazo{font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;opacity:.75;margin-bottom:14px}
  .onda-card ol{padding-left:20px;font-size:.86rem}
  .onda-card li{margin-bottom:7px}

  /* FECHAMENTO */
  .fecho{background:linear-gradient(150deg,var(--navy),var(--purpura));color:var(--creme);border-radius:22px;padding:56px 44px;text-align:center;margin-bottom:32px}
  .fecho p{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.5rem;max-width:560px;margin:0 auto;line-height:1.4}
  .fecho .convite{font-family:'Montserrat',sans-serif;font-style:normal;font-size:.82rem;margin-top:22px;letter-spacing:.06em;color:var(--dourado)}

  footer{text-align:center;padding:32px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--suave)}
  footer em{font-family:'Cormorant Garamond',serif;font-size:1.05rem;text-transform:none;letter-spacing:0;display:block;margin-bottom:6px}
</style>
</head>
<body>
<div class="wrap">

  <div class="capa">
    <div class="edicao"><span>Método IA na Rotina™</span><span class="fio"></span><span>Dossiê Nº {{NUMERO_EDICAO}}</span></div>
    <h1>A rotina de <em>{{NOME_DA_PESSOA}}</em>,<br>com a IA no centro.</h1>
    <p class="tese">"O tempo que você acha normal gastar — o ideal era você nem precisar gastar. O ideal era chegar pronto no seu WhatsApp."</p>
    <div class="selo">✦ Feito sob medida. Nenhum outro igual existe.</div>
  </div>

  <div class="placar">
    <div class="card"><div class="num destaque">{{N_HORAS}}h</div><div class="lbl">devolvidas por semana</div></div>
    <div class="card"><div class="num">{{N_SKILLS}}</div><div class="lbl">⚡ skills</div></div>
    <div class="card"><div class="num">{{N_AGENTES}}</div><div class="lbl">🤖 agentes autônomos</div></div>
    <div class="card"><div class="num">{{N_APPS}}</div><div class="lbl">📱 apps</div></div>
    <div class="card"><div class="num">{{N_HUMANOS}}</div><div class="lbl">🧑‍✈️ momentos seus</div></div>
  </div>

  <section>
    <div class="num-secao">I · O Raio-X da Segunda-Feira™</div>
    <h2>O retrato da sua semana</h2>
    <div class="fio-h"></div>
    <p class="sub">O mapa que você aprovou. Cada bloco, um destino.</p>
    <div class="tabela-scroll">
    <table>
      <thead><tr><th>#</th><th>Bloco de rotina</th><th>Quando</th><th>Tempo/sem</th><th>Dor</th><th>Vira</th></tr></thead>
      <tbody>
        <!-- REPETIR por bloco. Classe do pill: agente | skill | app | humano -->
        <tr><td>1</td><td>{{BLOCO}}</td><td>{{QUANDO}}</td><td>{{TEMPO}}</td><td class="dor">{{DOR}}/10</td><td><span class="pill agente">🤖 Agente</span></td></tr>
      </tbody>
    </table>
    </div>
  </section>

  <section>
    <div class="num-secao">II · A Escada de Automação</div>
    <h2>Cinco degraus. Um destino.</h2>
    <div class="fio-h"></div>
    <p class="sub">Todo bloco da sua rotina sobe. No topo, você nem precisa pedir.</p>
    <div class="escada">
      <div class="degrau"><span class="n">0</span><div><div class="t">Você faz</div><div class="d">Manual, na mão, do seu tempo</div></div></div>
      <div class="degrau"><span class="n">1</span><div><div class="t">IA ajuda</div><div class="d">Você faz com uma skill do lado — metade do tempo</div></div></div>
      <div class="degrau"><span class="n">2</span><div><div class="t">IA faz, você aprova</div><div class="d">O agente prepara tudo, você só dá o OK</div></div></div>
      <div class="degrau"><span class="n">3</span><div><div class="t">IA faz sozinha</div><div class="d">Roda no horário certo, você nem vê acontecer</div></div></div>
      <div class="degrau topo"><span class="n">4</span><div><div class="t">Chega pronto no WhatsApp 👑</div><div class="d">O trabalho deixou de existir na sua rotina</div></div></div>
    </div>
  </section>

  <section>
    <div class="num-secao">III · A Tradução da Rotina</div>
    <h2>Suas peças, sob medida</h2>
    <div class="fio-h"></div>
    <p class="sub">Cada ficha nasceu de um bloco da sua rotina — com o seu nome, no seu vocabulário.</p>
    <div class="grid-fichas">
      <!-- REPETIR por item. Classes da ficha: (agente = padrão) | f-skill | f-app | f-humano -->
      <div class="ficha">
        <span class="onda">🔥 ONDA 1</span>
        <h3>🤖 {{NOME_DO_AGENTE}}</h3>
        <ul>
          <li><b>Faz sozinho:</b> {{O_QUE_FAZ}}</li>
          <li><b>Roda:</b> {{QUANDO_RODA}}</li>
          <li><b>Entrega:</b> {{ONDE_ENTREGA}}</li>
          <li><b>Devolve:</b> ~{{HORAS}}h/semana</li>
        </ul>
      </div>
    </div>
  </section>

  <section>
    <div class="num-secao">IV · A Coroação</div>
    <h2>O ERP Vivo — quem cuida de quê</h2>
    <div class="fio-h"></div>
    <p class="sub">Você no comando. A IA no centro. Um gerente por área, um CEO que responde só a você.</p>
    <div class="org">
      <div class="no pessoa">👑 {{NOME_DA_PESSOA}}<br><small style="font-weight:400">recebe tudo pronto no WhatsApp</small></div>
      <div class="linha"></div>
      <div class="no ceo">🎩 {{NOME_DO_CEO_IA}} — CEO de IA<br><small style="font-weight:400">Bom-Dia Pronto às {{HORA_BRIEFING}}</small></div>
      <div class="linha"></div>
      <div class="gerentes">
        <!-- REPETIR por macroprocesso -->
        <div class="coluna">
          <div class="gerente">👔 Gerente — {{MACROPROCESSO}}</div>
          <div class="itens">
            <div class="item">🤖 {{AGENTE}}</div>
            <div class="item">⚡ {{SKILL}}</div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section>
    <div class="num-secao">V · O Bom-Dia Pronto</div>
    <h2>Todo dia, antes de você pedir</h2>
    <div class="fio-h"></div>
    <p class="sub">O briefing que o seu CEO de IA entrega — assim, exatamente assim.</p>
    <div class="zap">
      <div class="bolha">☀️ Bom dia, {{PRIMEIRO_NOME}}! Seu império hoje:

📊 ONTEM: {{EXEMPLO_NUMEROS}}
✅ RODOU SOZINHO: {{EXEMPLO_AGENTES}}
⚠️ PRECISA DE VOCÊ: {{EXEMPLO_DECISOES}}
🎯 SUGESTÃO DO DIA: {{EXEMPLO_SUGESTAO}}</div>
      <div class="hora">{{HORA_BRIEFING}} ✓✓</div>
    </div>
  </section>

  <section>
    <div class="num-secao">VI · O Caminho</div>
    <h2>Três ondas até o trono</h2>
    <div class="fio-h"></div>
    <p class="sub">Na primeira quinzena, você sente o tempo voltando.</p>
    <div class="ondas">
      <div class="onda-card o1">
        <h3>Onda 1</h3><div class="prazo">Primeiros 15 dias</div>
        <ol><li>{{ITEM_ONDA_1}}</li></ol>
      </div>
      <div class="onda-card">
        <h3>Onda 2</h3><div class="prazo">30–60 dias</div>
        <ol><li>{{ITEM_ONDA_2}}</li></ol>
      </div>
      <div class="onda-card">
        <h3>Onda 3</h3><div class="prazo">60–90 dias · ERP Vivo completo</div>
        <ol><li>{{ITEM_ONDA_3}}</li></ol>
      </div>
    </div>
  </section>

  <div class="fecho">
    <p>"Você construiu esse negócio com as suas mãos.<br>Agora ele aprendeu a trabalhar para você."</p>
    <div class="convite">Se faz sentido para você, o primeiro passo da Onda 1 já está pronto para começar.</div>
  </div>

  <footer>
    <em>Método IA na Rotina™</em>
    Dossiê Nº {{NUMERO_EDICAO}} · {{DATA}} · Sob medida para {{NOME_DA_PESSOA}} · Método Imperatriz
  </footer>
</div>
</body>
</html>
