<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<title>Slide — {{NOME}}</title>
<!--
  TEMPLATE-BASE (1080×1350) — PREENCHER: {{NOME}}, {{ESPECIALIDADE}}, {{ARROBA}}, cores no :root, fontes no @import
  Como usar: copie este arquivo pra pasta de saída (1 cópia por slide),
  troque a classe do <body> pro layout desejado e preencha os slots.

  Layouts (classe no body):
    layout-l1  capa escura: texto esquerda + foto direita (foto = .photo img)
    layout-l2  só texto, alinhado à esquerda (adicione .light ou .dark)
    layout-l2c só texto centralizado (manifesto)  (.light ou .dark)
    layout-l3  foto direita + headline/corpo esquerda, fundo escuro
    layout-l5  fechamento manifesto claro, tipografia centralizada

  Fundos: classe .dark ou .light no body (L1/L3 já são dark).
  Bold cirúrgico: use <b> só nas palavras-âncora (máx. 3 por headline).
  Foto: PNG/JPG com fundo já grafite (dark) ou cinza-claro (light) —
  gerar a foto IA no fundo certo evita recorte. Cobre a metade direita.
-->
<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;
    --gold:#C9A96A;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{width:1080px;height:1350px;overflow:hidden}
  body{
    font-family:'DM Sans','Helvetica Neue',-apple-system,sans-serif;
    position:relative;
    -webkit-font-smoothing:antialiased;
  }
  /* ---------- fundos ---------- */
  body.dark,body.layout-l1,body.layout-l3{
    background:radial-gradient(ellipse 120% 90% at 50% 40%,var(--bg-dark-hi) 0%,var(--bg-dark-lo) 100%);
    color:var(--text-dark);
  }
  body.dark::before,body.layout-l1::before,body.layout-l3::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)}

  /* ---------- estrutura comum ---------- */
  .kicker{
    position:absolute;top:110px;left:80px;z-index:4;max-width:46%;line-height:1.6;
    font-size:24px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;
  }
  .dark .kicker,.layout-l1 .kicker,.layout-l3 .kicker{color:var(--muted-dark)}
  .light .kicker{color:var(--muted-light)}
  .handle{
    position:absolute;bottom:90px;left:80px;z-index:4;
    font-size:26px;letter-spacing:.12em;
  }
  .dark .handle,.layout-l1 .handle,.layout-l3 .handle{color:var(--muted-dark)}
  .light .handle{color:var(--muted-light)}

  .headline{font-weight:300;line-height:1.12;letter-spacing:-.01em}
  .headline b{font-weight:700}
  /* destaque de elegância (usar com parcimônia — 1 palavra por arte): <i class="brand"> */
  i.brand{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:500}
  .body-text{font-weight:400;line-height:1.35;margin-top:48px}
  .body-text b{font-weight:700}

  /* ---------- L1 capa / L3 interno com foto (FULL-BLEED + SCRIM) ----------
     A foto cobre o canvas INTEIRO (sem emenda de fundo). O texto senta sobre
     um scrim (escurecimento gradual) na metade esquerda — arquitetura dos
     carrosséis aprovados. Ajuste object-position pra doutora ficar à direita. */
  .layout-l1 .content,.layout-l3 .content{
    position:absolute;left:80px;top:220px;width:490px;max-width:46%;z-index:3;
  }
  .layout-l1 .headline{font-size:104px}
  .layout-l3 .headline{font-size:76px}
  .layout-l3 .body-text{font-size:36px;color:var(--muted-dark)}
  .photo{position:absolute;inset:0;z-index:1;overflow:hidden}
  /* REGRA DURA: o rosto deve cair na zona DIREITA (x > 60% do canvas), NUNCA sob o texto.
     Foto com a doutora centralizada? Ajuste no elemento .photo:
     style="--foto-zoom:1.5; --foto-x:225px; --foto-y:190px"
     (--foto-x positivo empurra a doutora pra direita; --foto-y positivo desce a foto).
     SEMPRE renderizar e conferir visualmente antes de entregar. */
  .photo img{width:100%;height:100%;object-fit:cover;object-position:center 15%;
    transform:translate(var(--foto-x,0px),var(--foto-y,0px)) scale(var(--foto-zoom,1))}
  .photo .scrim{position:absolute;inset:0;z-index:2;background:
    linear-gradient(90deg,rgba(16,16,16,.94) 0%,rgba(16,16,16,.86) 30%,rgba(16,16,16,.42) 52%,rgba(16,16,16,0) 72%),
    linear-gradient(0deg,rgba(16,16,16,.35) 0%,rgba(16,16,16,0) 22%)}
  /* L1/L3 não usam a textura ::before (a textura real vem da própria foto) */
  body.layout-l1::before,body.layout-l3::before{content:none}

  /* notificações mockup (opcional na capa — remova se não usar) */
  .notifs{position:absolute;top:100px;left:80px;z-index:3;display:flex;flex-direction:column;gap:20px;width:560px}
  .notifs .notif{
    background:rgba(240,240,240,.92);color:#111;border-radius:22px;padding:22px 26px;
    font-size:24px;line-height:1.3;box-shadow:0 12px 40px rgba(0,0,0,.35);
  }
  .notifs .notif:nth-child(2){margin-left:120px}
  .notifs .notif .from{font-weight:700;font-size:23px;margin-bottom:4px}
  .notifs .notif .when{float:right;color:#8a8a8a;font-weight:400}
  .notifs + .content{top:420px}

  /* ---------- L2 texto esquerda / L2C centrado / L5 manifesto ---------- */
  .layout-l2 .content{position:absolute;left:80px;top:300px;width:900px}
  .layout-l2 .headline{font-size:84px}
  .layout-l2 .body-text{font-size:38px}
  .layout-l2.light .body-text{color:#3a3936}
  .layout-l2.dark .body-text{color:var(--muted-dark)}

  .layout-l2c .content,.layout-l5 .content{
    position:absolute;left:80px;right:80px;top:50%;transform:translateY(-50%);text-align:center;
  }
  .layout-l2c .kicker,.layout-l5 .kicker{left:0;right:0;text-align:center}
  .layout-l2c .handle,.layout-l5 .handle{left:0;right:0;text-align:center}
  .layout-l2c .headline,.layout-l5 .headline{font-size:88px}
  .layout-l2c .body-text,.layout-l5 .body-text{font-size:40px;margin-top:56px}
  .layout-l5{background:var(--bg-light);color:var(--text-light)}
  .layout-l5 .kicker{color:var(--muted-light)}
  .layout-l5 .handle{color:var(--muted-light)}

  /* linhas geométricas sutis (opcional, fundo escuro) */
  .geo{position:absolute;top:0;right:0;width:420px;height:420px;opacity:.08;z-index:0}
  .geo line,.geo path{stroke:#fff;stroke-width:2;fill:none}
</style>
</head>
<body class="layout-l1">

  <!-- OPCIONAL (só capa com contexto de conversa): -->
  <!--
  <div class="notifs">
    <div class="notif"><div class="from">Paciente <span class="when">agora</span></div>Oi, Dra. Mayara. Tudo bem? Queria entender melhor como funciona a consulta.</div>
    <div class="notif"><div class="from">Paciente <span class="when">agora</span></div>Oi, Dra., gostaria de agendar uma consulta. Como eu faço?</div>
  </div>
  -->

  <div class="kicker">{{NOME}} &nbsp;•&nbsp; {{ESPECIALIDADE}}</div>

  <div class="content">
    <div class="headline">Como<br>funciona<br>uma<br><b>consulta</b><br><b>comigo?</b></div>
    <!-- L2/L3: <div class="body-text">Texto de apoio com <b>bold cirúrgico</b>.</div> -->
  </div>

  <!-- L1/L3: foto full-bleed + scrim (ajuste object-position no CSS se o rosto não cair à direita) -->
  <div class="photo">
    <img src="FOTO.jpg" alt="">
    <div class="scrim"></div>
  </div>

  <div class="handle">{{ARROBA}}</div>

  <!-- OPCIONAL (só em fundo CLARO, no lugar do .handle — logo oficial).
       Trocar CAMINHO-DA-SKILL pelo Base directory desta skill (URL-encoded):
  <img class="logo" src="file://CAMINHO-DA-SKILL/assets/logo/logo-dra-mayara-horizontal-transparente.png"
       style="position:absolute;bottom:80px;left:50%;transform:translateX(-50%);width:330px;z-index:4">
  -->
</body>
</html>
