"""
Piloto Meta Ads - Angulo 3 (Bonus Fisico) - VERSAO 2 (correcao Renato)
Cliente: Prof. Francisco Borrello - Mesas Radionicas Quanticas 2.0 Plus
Campanha: Aniversario 7 anos
Formato: 1080x1080 (feed Meta Ads)

CORRECAO CRITICA vs V1:
A mecanica da oferta precisa ficar VISUALMENTE evidente na peca:
  "Inscreva-se no CURSO Mesas Radionicas Quanticas 2.0 Plus este mes
   e RECEBA de presente 10 Mesas fisicas + livro + estagios + Selo CCFB"

Hierarquia nova:
  1. CURSO = matriz da oferta (dominante)
  2. Inscricao ESTE MES = janela de decisao
  3. Bonus (10 mesas + livro + estagios + Selo) = presente subordinado
  4. Preco = ancora, nao a estrela

Gera 2 direcoes:
  V1 (piloto_angulo3_v2_v1) - editorial elegante centralizado
  V2 (piloto_angulo3_v2_v2) - impacto direto split
"""

import base64
from pathlib import Path
from playwright.sync_api import sync_playwright

BASE_DIR = Path("/opt/mia/workspace/clientes/borrello")
OUT_DIR = BASE_DIR / "criativos_meta_aniversario"
OUT_DIR.mkdir(parents=True, exist_ok=True)

FOTO_MESAS = BASE_DIR / "imagens_referencia" / "mesas-radionicas-1024x1024.png"
foto_b64 = base64.b64encode(FOTO_MESAS.read_bytes()).decode("ascii")
FOTO_DATA_URI = f"data:image/png;base64,{foto_b64}"


# ============================================================================
# V1 - EDITORIAL ELEGANTE
# Composicao: kicker topo -> CURSO como headline -> mecanica com seta ->
#             foto do bonus -> lista de bonus -> preco ancora
# ============================================================================
HTML_V1 = f"""<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Montserrat:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<style>
  * {{ margin: 0; padding: 0; box-sizing: border-box; }}
  html, body {{ margin: 0; overflow: hidden; }}
  body {{
    width: 1080px; height: 1080px;
    background:
      radial-gradient(ellipse at 50% 25%, #1a3358 0%, #0b1a30 55%, #050b18 100%);
    font-family: 'Montserrat', sans-serif;
    color: #f4e6c1;
    position: relative;
    overflow: hidden;
  }}
  body::before {{
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 12% 92%, rgba(212, 175, 92, 0.12) 0%, transparent 42%),
      radial-gradient(circle at 92% 10%, rgba(212, 175, 92, 0.10) 0%, transparent 42%);
    pointer-events: none;
  }}
  .frame {{
    position: absolute;
    inset: 26px;
    border: 1px solid rgba(212, 175, 92, 0.30);
    pointer-events: none;
  }}
  .frame::before, .frame::after {{
    content: '';
    position: absolute;
    width: 52px; height: 52px;
    border: 2px solid #d4af5c;
  }}
  .frame::before {{ top: -6px; left: -6px; border-right: none; border-bottom: none; }}
  .frame::after {{ bottom: -6px; right: -6px; border-left: none; border-top: none; }}

  /* KICKER TOPO - deixa claro que e o CURSO e a janela */
  .kicker {{
    position: absolute;
    top: 62px; left: 50%;
    transform: translateX(-50%);
    display: flex; align-items: center; gap: 18px;
    color: #d4af5c;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 4.5px;
    text-transform: uppercase;
    white-space: nowrap;
  }}
  .kicker::before, .kicker::after {{
    content: '';
    width: 60px; height: 1px;
    background: linear-gradient(90deg, transparent, #d4af5c, transparent);
  }}

  /* HEADLINE: o curso e a matriz */
  .curso {{
    position: absolute;
    top: 110px; left: 50%;
    transform: translateX(-50%);
    width: 950px;
    text-align: center;
  }}
  .curso .over {{
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 6px;
    color: #d9c894;
    text-transform: uppercase;
    margin-bottom: 8px;
  }}
  .curso .nome {{
    font-family: 'Cormorant Garamond', serif;
    font-size: 62px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
    letter-spacing: -1px;
  }}
  .curso .versao {{
    display: inline-block;
    margin-top: 10px;
    padding: 5px 18px;
    background: linear-gradient(135deg, #e6c069 0%, #b8892a 100%);
    color: #0b1a30;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
    border-radius: 2px;
  }}

  /* MECANICA: inscricao ESTE MES  -> ganhe */
  .mecanica {{
    position: absolute;
    top: 300px; left: 50%;
    transform: translateX(-50%);
    display: flex; align-items: center; gap: 28px;
    color: #f4e6c1;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
  }}
  .mecanica .parte {{
    text-align: center;
  }}
  .mecanica .p1 .top {{
    font-size: 12px; font-weight: 700; letter-spacing: 3.5px;
    color: #d9c894; margin-bottom: 4px;
  }}
  .mecanica .p1 .big {{
    font-family: 'Cormorant Garamond', serif;
    font-size: 34px; font-weight: 700; color: #ffffff;
    font-style: italic;
    letter-spacing: 1px;
    text-transform: none;
  }}
  .mecanica .seta {{
    font-family: 'Montserrat', sans-serif;
    font-size: 46px; font-weight: 300; color: #e6c069;
    line-height: 1;
  }}
  .mecanica .p2 .top {{
    font-size: 12px; font-weight: 700; letter-spacing: 3.5px;
    color: #d9c894; margin-bottom: 4px;
  }}
  .mecanica .p2 .big {{
    font-family: 'Montserrat', sans-serif;
    font-size: 34px; font-weight: 900; color: #e6c069;
    letter-spacing: 3px;
  }}

  /* FOTO do bonus - reduzida pra caber a copy nova */
  .produto-wrap {{
    position: absolute;
    top: 400px; left: 50%;
    transform: translateX(-50%);
    width: 460px; height: 300px;
    display: flex; align-items: center; justify-content: center;
  }}
  .produto-wrap::before {{
    content: '';
    position: absolute;
    width: 400px; height: 280px;
    background: radial-gradient(ellipse, rgba(212, 175, 92, 0.38) 0%, transparent 65%);
    filter: blur(28px);
    z-index: 0;
  }}
  .produto {{
    max-width: 100%; max-height: 100%;
    filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.55));
    position: relative; z-index: 1;
  }}

  /* BONUS PRINCIPAL - o "10 Mesas Radionicas Quanticas" */
  .bonus-hero {{
    position: absolute;
    top: 720px; left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 900px;
  }}
  .bonus-hero .selo-bonus {{
    display: inline-block;
    padding: 4px 14px;
    background: #d4af5c;
    color: #0b1a30;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px; font-weight: 900;
    letter-spacing: 3px; text-transform: uppercase;
    margin-bottom: 12px;
    border-radius: 2px;
  }}
  .bonus-hero .num-lin {{
    display: flex; align-items: baseline; justify-content: center; gap: 18px;
    line-height: 1;
  }}
  .bonus-hero .num {{
    font-family: 'Cormorant Garamond', serif;
    font-size: 108px;
    font-weight: 700;
    color: #e6c069;
    line-height: 0.85;
  }}
  .bonus-hero .txt {{
    font-family: 'Montserrat', sans-serif;
    font-size: 32px;
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: left;
    line-height: 1;
  }}
  .bonus-hero .txt small {{
    display: block;
    font-size: 22px;
    font-weight: 600;
    color: #f4e6c1;
    letter-spacing: 4px;
    margin-top: 2px;
  }}
  .bonus-hero .fis {{
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    font-style: italic;
    color: #d9c894;
    margin-top: 6px;
    letter-spacing: 1px;
  }}
  .bonus-hero .fis b {{ color: #ffffff; font-weight: 700; font-style: normal; }}

  /* LISTA de bonus complementares */
  .bonus-lista {{
    position: absolute;
    top: 900px; left: 50%;
    transform: translateX(-50%);
    display: flex; gap: 18px;
    color: #d9c894;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    white-space: nowrap;
  }}
  .bonus-lista span {{ opacity: 0.95; }}
  .bonus-lista .plus {{
    color: #e6c069; font-weight: 900; opacity: 1;
  }}

  /* PRECO / RODAPE - subordinado */
  .preco-rodape {{
    position: absolute;
    bottom: 55px; left: 50%;
    transform: translateX(-50%);
    display: flex; align-items: center; gap: 18px;
    color: #a89870;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 1px;
    white-space: nowrap;
  }}
  .preco-rodape .de {{ text-decoration: line-through; opacity: 0.7; }}
  .preco-rodape .por {{ color: #ffffff; font-weight: 800; font-size: 18px; }}
  .preco-rodape .por b {{ color: #e6c069; font-weight: 900; }}
  .preco-rodape .sep {{ opacity: 0.4; }}
  .preco-rodape .parc {{ color: #d9c894; }}
</style>
</head>
<body>
  <div class="frame"></div>

  <div class="kicker">Aniversário 7 anos · Inscrições este mês</div>

  <div class="curso">
    <div class="over">Curso completo</div>
    <div class="nome">Mesas Radiônicas Quânticas</div>
    <div class="versao">2.0 Plus</div>
  </div>

  <div class="mecanica">
    <div class="parte p1">
      <div class="top">Inscreva-se</div>
      <div class="big">este mês</div>
    </div>
    <div class="seta">→</div>
    <div class="parte p2">
      <div class="top">e receba</div>
      <div class="big">de presente</div>
    </div>
  </div>

  <div class="produto-wrap">
    <img class="produto" src="{FOTO_DATA_URI}" alt="Kit Mesas Radiônicas Quânticas físico">
  </div>

  <div class="bonus-hero">
    <div class="selo-bonus">Bônus físico</div>
    <div class="num-lin">
      <div class="num">10</div>
      <div class="txt">Mesas Radiônicas<small>QUÂNTICAS</small></div>
    </div>
    <div class="fis">chegando <b>na sua casa</b></div>
  </div>

  <div class="bonus-lista">
    <span>Livro físico</span>
    <span class="plus">+</span>
    <span>Estágios ao vivo</span>
    <span class="plus">+</span>
    <span>Certificado Selo CCFB</span>
  </div>

  <div class="preco-rodape">
    <span class="de">De R$ 1.397</span>
    <span class="sep">·</span>
    <span class="por">por <b>R$ 890</b></span>
    <span class="sep">·</span>
    <span class="parc">12x R$ 92,05</span>
  </div>
</body>
</html>
"""


# ============================================================================
# V2 - IMPACTO DIRETO / SPLIT
# Esquerda: foto do bonus + carimbo "BONUS FISICO"
# Direita: mecanica curso->bonus com hierarquia MUITO clara
# ============================================================================
HTML_V2 = f"""<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Montserrat:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<style>
  * {{ margin: 0; padding: 0; box-sizing: border-box; }}
  html, body {{ margin: 0; overflow: hidden; }}
  body {{
    width: 1080px; height: 1080px;
    background: #0a1729;
    font-family: 'Montserrat', sans-serif;
    color: #f4e6c1;
    position: relative;
    overflow: hidden;
  }}

  /* ---- ESQUERDA: foto do bonus fisico ---- */
  .esquerda {{
    position: absolute;
    top: 0; left: 0;
    width: 460px; height: 1080px;
    background:
      radial-gradient(ellipse at 45% 50%, #1a3358 0%, #0a1729 72%),
      #0a1729;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
  }}
  .esquerda::before {{
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 45% 50%, rgba(212, 175, 92, 0.32) 0%, transparent 55%);
    pointer-events: none;
  }}
  .esquerda::after {{
    content: '';
    position: absolute;
    top: 0; right: -1px; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, transparent 0%, #d4af5c 22%, #d4af5c 78%, transparent 100%);
  }}
  .produto {{
    width: 400px;
    height: auto;
    filter: drop-shadow(0 30px 40px rgba(0,0,0,0.6));
    position: relative; z-index: 2;
  }}

  /* selo circular "7 anos" no topo esq */
  .selo-anos {{
    position: absolute;
    top: 58px; left: 58px;
    width: 120px; height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e6c069 0%, #b8892a 100%);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: #0a1729;
    text-align: center;
    border: 2px solid #f4e6c1;
    box-shadow: 0 8px 20px rgba(0,0,0,0.5);
    z-index: 5;
  }}
  .selo-anos .num {{
    font-family: 'Cormorant Garamond', serif;
    font-size: 50px; font-weight: 700; line-height: 1;
  }}
  .selo-anos .lbl {{
    font-family: 'Montserrat', sans-serif;
    font-size: 10px; font-weight: 800;
    letter-spacing: 2px; text-transform: uppercase; margin-top: 2px;
  }}
  .selo-anos .lbl2 {{
    font-family: 'Montserrat', sans-serif;
    font-size: 9px; font-weight: 700;
    letter-spacing: 1.5px; text-transform: uppercase; opacity: 0.85;
  }}

  /* carimbo "BONUS FISICO" na foto */
  .carimbo-bonus {{
    position: absolute;
    bottom: 80px; left: 0;
    background: linear-gradient(90deg, #e6c069 0%, #b8892a 100%);
    color: #0a1729;
    padding: 14px 24px 14px 58px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    z-index: 4;
    box-shadow: 0 6px 20px rgba(0,0,0,0.45);
    line-height: 1.15;
  }}
  .carimbo-bonus small {{
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    opacity: 0.75;
    margin-top: 3px;
  }}

  /* ---- DIREITA: mecanica curso -> bonus ---- */
  .direita {{
    position: absolute;
    top: 0; right: 0;
    width: 620px; height: 1080px;
    background: linear-gradient(180deg, #0f2542 0%, #0a1729 100%);
    padding: 68px 55px 55px;
    display: flex; flex-direction: column;
  }}
  .direita::before {{
    content: '';
    position: absolute;
    top: 68px; left: 55px;
    width: 48px; height: 3px;
    background: #d4af5c;
  }}

  /* kicker: contexto CURSO */
  .kicker-direita {{
    color: #d4af5c;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    margin-top: 22px;
    margin-bottom: 14px;
  }}

  /* NOME DO CURSO - dominante */
  .curso-nome {{
    font-family: 'Cormorant Garamond', serif;
    font-size: 50px;
    font-weight: 700;
    color: #ffffff;
    line-height: 0.98;
    letter-spacing: -0.5px;
  }}
  .curso-versao {{
    display: inline-block;
    margin-top: 10px;
    padding: 4px 14px;
    background: linear-gradient(135deg, #e6c069 0%, #b8892a 100%);
    color: #0a1729;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    border-radius: 2px;
  }}

  /* MECANICA "faca sua inscricao este mes" */
  .mecanica-caixa {{
    margin-top: 30px;
    padding: 20px 22px;
    background: rgba(212, 175, 92, 0.08);
    border-left: 3px solid #d4af5c;
  }}
  .mecanica-caixa .l1 {{
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #d4af5c;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 6px;
  }}
  .mecanica-caixa .l2 {{
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.5px;
    line-height: 1.15;
  }}
  .mecanica-caixa .l2 b {{ color: #e6c069; }}

  /* seta e "ganhe" */
  .ganhe-row {{
    display: flex; align-items: center; gap: 14px;
    margin-top: 20px;
    margin-bottom: 12px;
  }}
  .ganhe-row .seta {{
    font-family: 'Montserrat', sans-serif;
    font-size: 34px; font-weight: 300; color: #e6c069;
    line-height: 1;
  }}
  .ganhe-row .txt {{
    font-family: 'Montserrat', sans-serif;
    font-size: 14px; font-weight: 800;
    color: #d9c894; letter-spacing: 4px; text-transform: uppercase;
  }}

  /* BONUS 10 mesas - a estrela do presente */
  .bonus-linha {{
    display: flex; align-items: baseline; gap: 16px;
    line-height: 1;
  }}
  .bonus-linha .num {{
    font-family: 'Cormorant Garamond', serif;
    font-size: 130px;
    font-weight: 700;
    color: #e6c069;
    line-height: 0.82;
    letter-spacing: -3px;
  }}
  .bonus-linha .txt {{
    font-family: 'Montserrat', sans-serif;
    font-size: 26px;
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    line-height: 1;
  }}
  .bonus-linha .txt small {{
    display: block;
    font-size: 20px;
    font-weight: 600;
    color: #f4e6c1;
    letter-spacing: 3.5px;
    margin-top: 3px;
  }}
  .bonus-destino {{
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    font-style: italic;
    color: #d9c894;
    letter-spacing: 0.5px;
    margin-top: 6px;
  }}
  .bonus-destino b {{ color: #ffffff; font-weight: 700; font-style: normal; }}

  /* mini-lista dos outros bonus */
  .mini-bonus {{
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid rgba(212, 175, 92, 0.28);
    display: flex; flex-direction: column; gap: 6px;
  }}
  .mini-bonus .item {{
    display: flex; align-items: center; gap: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #f4e6c1;
    letter-spacing: 1px;
  }}
  .mini-bonus .item .p {{
    color: #e6c069; font-weight: 900; font-size: 16px;
  }}

  /* PRECO no rodape - subordinado */
  .preco-caixa {{
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid rgba(212, 175, 92, 0.3);
    display: flex; align-items: baseline; justify-content: space-between;
  }}
  .preco-caixa .lbl {{
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: #a89870;
    letter-spacing: 2.5px;
    text-transform: uppercase;
  }}
  .preco-caixa .de {{
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: #a89870;
    text-decoration: line-through;
    margin-top: 2px;
  }}
  .preco-caixa .por {{
    font-family: 'Montserrat', sans-serif;
    font-size: 30px;
    font-weight: 900;
    color: #ffffff;
    line-height: 1;
  }}
  .preco-caixa .por span {{ color: #e6c069; }}
  .preco-caixa .parcela {{
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    color: #d9c894;
    letter-spacing: 1px;
    margin-top: 4px;
  }}
  .preco-caixa .right {{ text-align: right; }}
  .preco-caixa .left {{ text-align: left; }}

  .assinatura {{
    margin-top: 14px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 14px;
    font-style: italic;
    color: #d4af5c;
    letter-spacing: 1.2px;
    text-align: right;
    opacity: 0.9;
  }}
</style>
</head>
<body>
  <!-- ESQUERDA: foto do bonus -->
  <div class="esquerda">
    <div class="selo-anos">
      <div class="num">7</div>
      <div class="lbl">Anos</div>
      <div class="lbl2">Aniversário</div>
    </div>
    <img class="produto" src="{FOTO_DATA_URI}" alt="Kit Mesas Radiônicas Quânticas físico">
    <div class="carimbo-bonus">
      Bônus físico
      <small>chega na sua casa</small>
    </div>
  </div>

  <!-- DIREITA: mecanica curso -> bonus -->
  <div class="direita">
    <div class="kicker-direita">Inscrições abertas · este mês</div>

    <div class="curso-nome">Mesas Radiônicas Quânticas</div>
    <div><span class="curso-versao">2.0 Plus</span></div>

    <div class="mecanica-caixa">
      <div class="l1">Faça sua inscrição</div>
      <div class="l2">no <b>curso este mês</b> e receba de presente</div>
    </div>

    <div class="ganhe-row">
      <span class="seta">→</span>
      <span class="txt">Você ganha</span>
    </div>

    <div class="bonus-linha">
      <div class="num">10</div>
      <div class="txt">Mesas Radiônicas<small>QUÂNTICAS</small></div>
    </div>
    <div class="bonus-destino">físicas, <b>na sua casa</b></div>

    <div class="mini-bonus">
      <div class="item"><span class="p">+</span> Livro físico do Prof. Borrello</div>
      <div class="item"><span class="p">+</span> Estágios ao vivo com o professor</div>
      <div class="item"><span class="p">+</span> Certificado com Selo CCFB</div>
    </div>

    <div class="preco-caixa">
      <div class="left">
        <div class="lbl">Investimento no curso</div>
        <div class="de">De R$ 1.397</div>
      </div>
      <div class="right">
        <div class="por">R$ <span>890</span></div>
        <div class="parcela">ou 12x R$ 92,05</div>
      </div>
    </div>

    <div class="assinatura">Prof. Francisco Borrello</div>
  </div>
</body>
</html>
"""


def render(html: str, destino: Path, w: int = 1080, h: int = 1080) -> Path:
    with sync_playwright() as p:
        browser = p.chromium.launch()
        page = browser.new_page(viewport={"width": w, "height": h})
        page.set_content(html, wait_until="networkidle")
        page.evaluate("document.fonts.ready")
        page.wait_for_timeout(500)
        page.screenshot(path=str(destino), clip={"x": 0, "y": 0, "width": w, "height": h})
        browser.close()
    return destino


if __name__ == "__main__":
    v1 = OUT_DIR / "piloto_angulo3_v2_v1.png"
    v2 = OUT_DIR / "piloto_angulo3_v2_v2.png"
    print("Renderizando V1 (editorial elegante refeito)...")
    render(HTML_V1, v1)
    print(f"  OK -> {v1}")
    print("Renderizando V2 (impacto direto refeito)...")
    render(HTML_V2, v2)
    print(f"  OK -> {v2}")
    print("\nConcluido.")
