<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<title>Capa de Reels — {{NOME}}</title>
<!--
  CAPA DE REELS 1080×1920 — PREENCHER: {{NOME}}, {{ESPECIALIDADE}}, {{ARROBA}}, cores, fontes
  Zona de segurança: o feed corta pra 4:5 (aparece só a faixa central de
  1080×1350, entre y=285 e y=1635). TODO texto essencial fica dentro
  do .safe. Foto pode ocupar a altura inteira.
  Variantes: body.dark (com foto) ou body.light (frase-corte tipográfica).
-->
<style>
  @import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,700&family=Playfair+Display:ital,wght@1,400;1,500&display=swap');
  :root{
    --bg-dark-hi:#2A2A2A; --bg-dark-lo:#161616; --bg-light:#F4F3F1;
    --text-dark:#F5F5F3; --text-light:#1A1A1A;
    --muted-dark:#B8B6B2; --muted-light:#6E6C68;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{width:1080px;height:1920px;overflow:hidden}
  body{font-family:'DM Sans','Helvetica Neue',-apple-system,sans-serif;position:relative;-webkit-font-smoothing:antialiased}
  body.dark{background:radial-gradient(ellipse 120% 90% at 50% 40%,var(--bg-dark-hi),var(--bg-dark-lo));color:var(--text-dark)}
  body.dark::before{content:"";position:absolute;inset:0;opacity:.55;pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.06'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E")}
  body.light{background:var(--bg-light);color:var(--text-light)}

  .photo{position:absolute;inset:0;z-index:1}
  .photo img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
  .photo .fade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,22,22,.72) 18%,rgba(22,22,22,.15) 45%,rgba(22,22,22,.25) 100%)}

  .safe{position:absolute;left:80px;right:80px;top:285px;height:1350px;z-index:2}
  .kicker{position:absolute;top:120px;left:0;font-size:26px;font-weight:500;letter-spacing:.28em;text-transform:uppercase}
  .dark .kicker{color:var(--muted-dark)} .light .kicker{color:var(--muted-light)}
  .headline{position:absolute;top:280px;left:0;right:60px;font-weight:300;font-size:110px;line-height:1.1;letter-spacing:-.01em}
  .headline b{font-weight:700}
  .handle{position:absolute;bottom:110px;left:0;font-size:28px;letter-spacing:.12em}
  .dark .handle{color:var(--muted-dark)} .light .handle{color:var(--muted-light)}
  .light .safe .headline{text-align:center;left:0;right:0;top:50%;transform:translateY(-50%)}
  .light .kicker,.light .handle{left:0;right:0;text-align:center}
</style>
</head>
<body class="dark">
  <div class="photo">
    <img src="FOTO.jpg" alt="">
    <div class="fade"></div>
  </div>
  <div class="safe">
    <div class="kicker">{{NOME}} &nbsp;•&nbsp; {{ESPECIALIDADE}}</div>
    <div class="headline">O rosto muda na <b>menopausa</b>?</div>
    <div class="handle">{{ARROBA}}</div>
  </div>
</body>
</html>
