<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./support.js"></script>
</head>
<body>
<x-dc>
<helmet>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="true">
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;0,800;1,400&amp;display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet">
<style>
body{margin:0;background:#F7F8FA;color:#212429;font-family:'DM Sans',sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;}
a{text-decoration:none;color:inherit;}
a:hover{color:#001A70;}
::selection{background:#CDEEF0;color:#000F42;}
:focus-visible{outline:2px solid #001A70;outline-offset:3px;}
</style>
</helmet>

<div style="position:relative;">

  <div style="position:fixed;top:0;left:0;width:52px;height:100vh;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:24px 0;border-right:1px solid #ECEEF2;background:#FFFFFF;">
    <span style="width:8px;height:8px;border-radius:50%;background:#00ADBB;display:block;"></span>
    <span style="writing-mode:vertical-rl;transform:rotate(180deg);font-size:10px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:#001A70;">BDM · Guia</span>
    <span style="width:1px;height:44px;background:#ECEEF2;display:block;"></span>
  </div>

  <header style="position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid #ECEEF2;margin-left:52px;">
    <div style="max-width:1360px;margin:0 auto;padding:10px 20px;display:flex;flex-wrap:wrap;row-gap:8px;align-items:center;justify-content:space-between;gap:10px;">
      <a href="./InfoBranding - Ajustes V6.dc.html" style="display:flex;align-items:center;flex-shrink:0;"><img src="./assets/infobranding-logo.png" alt="InfoBranding" style="height:52px;width:262px;display:block;"></a>
      <nav style="display:flex;align-items:center;gap:34px;flex-wrap:nowrap;min-width:0;">
        <div onMouseEnter="{{ openUniverso }}" onMouseLeave="{{ closeUniverso }}" style="position:relative;">
          <a href="./InfoBranding - Ajustes V6.dc.html#ecossistema" style="display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#001A70;white-space:nowrap;" style-hover="color:#00ADBB;">Universo IB
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#00ADBB" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" style="flex:none;"><polyline points="5 9 12 16 19 9"></polyline></svg>
          </a>
          <div style="{{ universoStyle }}">
            <a href="./InfoBranding - Ajustes V6.dc.html#pessoas" style="display:block;padding:11px 18px;font-size:13.5px;color:#5C6470;white-space:nowrap;" style-hover="color:#001A70;background:#F4F7FB;">Quem somos</a>
            <a href="./InfoBranding - Ajustes V6.dc.html#ecossistema" style="display:block;padding:11px 18px;font-size:13.5px;color:#5C6470;white-space:nowrap;" style-hover="color:#001A70;background:#F4F7FB;">Produtos</a>
            <a href="./InfoBranding - Ajustes V6.dc.html#participacao" style="display:block;padding:11px 18px;font-size:13.5px;color:#5C6470;white-space:nowrap;" style-hover="color:#001A70;background:#F4F7FB;">Trabalhe conosco</a>
          </div>
        </div>
        <a href="./InfoBranding - Blog.dc.html" style="font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#001A70;white-space:nowrap;" style-hover="color:#00ADBB;">Portal</a>
        <a href="#guia" style="position:relative;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#00ADBB;white-space:nowrap;">BDM
          <span style="position:absolute;left:0;right:0;bottom:-7px;height:2px;background:#00ADBB;border-radius:2px;display:block;"></span>
        </a>
      </nav>
      <div style="display:flex;align-items:center;gap:8px;flex-shrink:0;">
        <button aria-label="Buscar" style="width:37px;height:37px;border-radius:999px;display:flex;align-items:center;justify-content:center;border:1px solid #D3D7DE;background:transparent;flex-shrink:0;cursor:pointer;color:#212429;" style-hover="border-color:#001A70;background:#E6ECF7;">
          <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="11" cy="11" r="7"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
        </button>
        <button style="padding:6px 14px;font-size:11.5px;font-weight:700;background:linear-gradient(90deg,#001A70,#00ADBB);color:#FFFFFF;border:none;border-radius:999px;white-space:nowrap;flex-shrink:0;width:116px;height:34px;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:inherit;cursor:pointer;" style-hover="filter:brightness(1.08);">Newsletter <span>→</span></button>
      </div>
    </div>
  </header>

  <section style="position:relative;margin-left:52px;background:linear-gradient(160deg,#010b17 0%,#04122b 62%,#061a3d 100%);color:#FFFFFF;overflow:hidden;padding:64px 0 72px;">
    <div style="position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);background-size:64px 64px;pointer-events:none;"></div>
    <div style="position:relative;z-index:2;max-width:1360px;margin:0 auto;padding:0 48px;">
      <div style="display:flex;align-items:center;gap:12px;font-size:12px;color:rgba(255,255,255,.55);margin-bottom:36px;">
        <a href="./InfoBranding - Ajustes V6.dc.html#conhecimento" style="color:rgba(255,255,255,.75);" style-hover="color:#FFFFFF;">Descomplicando Branding</a>
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#00ADBB" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 5 16 12 9 19"></polyline></svg>
        <span style="color:#FFFFFF;">Branding pessoal</span>
      </div>

      <div style="display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:clamp(32px,5vw,72px);align-items:end;">
        <div>
          <span style="font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#00ADBB;display:flex;align-items:center;gap:10px;"><span style="width:22px;height:1px;background:#00ADBB;display:inline-block;"></span>Guia · Conceito</span>
          <h1 style="margin:20px 0 0;font-weight:800;font-size:clamp(32px,4.2vw,58px);line-height:1.06;letter-spacing:-0.03em;color:#FFFFFF;">Branding pessoal</h1>
          <p style="margin:22px 0 0;max-width:54ch;font-size:clamp(16px,1.4vw,19px);line-height:1.65;color:#B9CBE0;font-style:italic;">Transformar quem você é, no que entrega e no que defende, em uma marca reconhecível.</p>
        </div>
        <div style="display:flex;flex-direction:column;gap:14px;">
          <div style="padding:22px 24px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.045);backdrop-filter:blur(20px);">
            <span style="display:block;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#31C8E0;margin-bottom:12px;">Outros temas do guia</span>
            <div style="display:flex;flex-wrap:wrap;gap:8px;">
              <sc-for list="{{ otherTopics }}" as="t" hint-placeholder-count="4">
                <a href="#" style="font-size:12.5px;font-weight:600;color:#EAF6F8;border:1px solid rgba(255,255,255,.16);border-radius:100px;padding:8px 15px;transition:border-color .2s ease,background .2s ease;" style-hover="border-color:#00ADBB;background:rgba(0,173,187,.16);color:#FFFFFF;">{{ t.label }}</a>
              </sc-for>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section id="guia" style="margin-left:52px;padding:72px 0 96px;border-bottom:1px solid #ECEEF2;">
    <div style="max-width:1360px;margin:0 auto;padding:0 48px;display:grid;grid-template-columns:minmax(230px,280px) minmax(0,1fr);gap:clamp(36px,5vw,76px);align-items:start;">

      <aside style="position:sticky;top:104px;">
        <div style="padding:24px 20px;border-radius:14px;border:1px solid #ECEEF2;background:#FFFFFF;">
          <span style="display:block;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#00ADBB;padding:0 10px;margin-bottom:8px;">Neste guia</span>
          <span style="display:block;width:26px;height:2px;background:#00ADBB;margin:0 10px 16px;"></span>
          <nav style="display:flex;flex-direction:column;gap:3px;">
            <sc-for list="{{ toc }}" as="item" hint-placeholder-count="10">
              <span style="display:contents;">
                <sc-if value="{{ item.on }}" hint-placeholder-val="{{ true }}">
                  <button type="button" onClick="{{ item.select }}" style="display: flex; align-items: center; gap: 11px; text-align: left; font-family: inherit; font-size: 13.5px; font-weight: 700; line-height: 1.4; padding: 11px 14px; border-radius: 100px; border: none; cursor: pointer; background: #00ADBB; color: #fff"><i class="{{ item.icon }}" style="font-size:13px;width:16px;text-align:center;flex:none;"></i>{{ item.label }}</button>
                </sc-if>
                <sc-if value="{{ item.off }}" hint-placeholder-val="{{ false }}">
                  <button type="button" onClick="{{ item.select }}" style="display:flex;align-items:center;gap:11px;text-align:left;font-family:inherit;font-size:13.5px;font-weight:500;line-height:1.4;padding:11px 14px;border-radius:100px;border:none;cursor:pointer;background:transparent;color:#5C6470;transition:background .2s ease,color .2s ease;" style-hover="background:#F1FAFB;color:#001A70;"><i class="{{ item.icon }}" style="font-size:13px;width:16px;text-align:center;flex:none;color:#00ADBB;"></i>{{ item.label }}</button>
                </sc-if>
              </span>
            </sc-for>
          </nav>
        </div>
      </aside>

      <div style="min-width:0;display:flex;flex-direction:column;gap:64px;">

        <section ref="{{ reg0 }}" style="scroll-margin-top:110px;">
          <span style="font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#00ADBB;display:flex;align-items:center;gap:10px;"><span style="width:22px;height:1px;background:#00ADBB;display:inline-block;"></span>O que é</span>
          <h2 style="font-weight:800;font-size:clamp(26px,3vw,38px);margin-top:14px;letter-spacing:-0.01em;color:#001A70;">Definição</h2>
          <p style="margin:22px 0 0;font-size:19px;line-height:1.75;color:#33475C;font-weight:500;">Branding pessoal é o processo de alinhar reputação, valores e presença para que as pessoas certas lembrem de você pelos motivos certos.</p>
          <p style="margin:20px 0 0;font-size:17px;line-height:1.85;color:#3C4B5C;">Não se trata de criar um personagem. Trata-se de tornar visível — e coerente — aquilo que você já é e entrega. A marca pessoal existe mesmo quando não é gerenciada: a diferença é que, sem intenção, ela é construída pelos outros.</p>
          <p style="margin:20px 0 0;font-size:17px;line-height:1.85;color:#3C4B5C;">Por isso o trabalho começa com escolhas, não com estética: qual território de conhecimento você quer ocupar, para quem, e o que você não vai defender em hipótese alguma.</p>
        </section>

        <section ref="{{ reg1 }}" style="scroll-margin-top:110px;">
          <h2 style="margin:0;font-size:clamp(24px,2.4vw,32px);font-weight:800;letter-spacing:-0.02em;color:#001A70;line-height:1.2;">Conceitos correlatos</h2>
          <div style="display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:26px;">
            <sc-for list="{{ concepts }}" as="c" hint-placeholder-count="3">
              <div style="padding:30px 26px 28px;border-radius:14px;border:1px solid #ECEEF2;background:#FFFFFF;">
                <span style="width:58px;height:58px;border-radius:50%;background:#E8F7F9;display:flex;align-items:center;justify-content:center;color:#00ADBB;"><i class="{{ c.icon }}" style="font-size:22px;"></i></span>
                <span style="display:block;margin-top:22px;font-size:17px;font-weight:700;color:#001A70;letter-spacing:-0.01em;">{{ c.title }}</span>
                <span style="display:block;margin-top:10px;font-size:14.5px;line-height:1.65;color:#6B7280;">{{ c.desc }}</span>
              </div>
            </sc-for>
          </div>
        </section>

        <section ref="{{ reg2 }}" style="scroll-margin-top:110px;">
          <h2 style="margin:0;font-size:clamp(24px,2.4vw,32px);font-weight:800;letter-spacing:-0.02em;color:#001A70;line-height:1.2;">Aplicação prática</h2>
          <div style="display:flex;flex-direction:column;gap:14px;margin-top:26px;">
            <sc-for list="{{ steps }}" as="s" hint-placeholder-count="4">
              <div style="display:flex;gap:18px;align-items:flex-start;padding:22px 24px;border-radius:12px;border:1px solid #ECEEF2;background:#FFFFFF;">
                <span style="width:38px;height:38px;border-radius:50%;background:#00ADBB;color:#FFFFFF;font-size:12.5px;font-weight:700;letter-spacing:.02em;display:flex;align-items:center;justify-content:center;flex:none;">{{ s.num }}</span>
                <span style="font-size:16px;line-height:1.7;color:#3C4B5C;">{{ s.text }}</span>
              </div>
            </sc-for>
          </div>
          <div style="position:relative;margin-top:26px;padding:30px 34px;border-radius:14px;border:1px solid rgba(0,173,187,.3);background:linear-gradient(100deg,#D9F2F6 0%,#EAF9FB 46%,#F7FDFE 100%);display:flex;align-items:center;gap:clamp(20px,2.6vw,34px);overflow:hidden;">
            <span style="position:absolute;top:0;right:0;bottom:0;width:190px;background-image:radial-gradient(rgba(0,173,187,.28) 1.4px,transparent 1.4px);background-size:14px 14px;pointer-events:none;"></span>
            <img src="./assets/aplique-alvo.png" alt="" style="width:88px;height:88px;object-fit:contain;flex:none;display:block;" />
            <span style="position:relative;z-index:2;min-width:0;">
              <span style="display:block;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#00ADBB;">Aplique hoje</span>
              <span style="display:block;margin-top:12px;font-size:17px;font-weight:700;line-height:1.5;color:#001A70;">Escreva sua frase-âncora: "sou a referência de ______ para ______."</span>
              <span style="display:block;margin-top:10px;font-size:15px;line-height:1.65;color:#5C6C82;">Ela deve caber em um cartão e sobreviver a seis meses sem ajustes.</span>
            </span>
          </div>
        </section>

        <section ref="{{ reg3 }}" style="scroll-margin-top:110px;">
          <h2 style="margin:0;font-size:clamp(24px,2.4vw,32px);font-weight:800;letter-spacing:-0.02em;color:#001A70;line-height:1.2;">Principais dúvidas</h2>
          <div style="margin-top:26px;border-radius:14px;border:1px solid #ECEEF2;background:#FFFFFF;overflow:hidden;">
            <sc-for list="{{ faqs }}" as="q" hint-placeholder-count="4">
              <div>
                <sc-if value="{{ q.notFirst }}" hint-placeholder-val="{{ false }}">
                  <span style="display:block;height:1px;background:#ECEEF2;margin:0 26px;"></span>
                </sc-if>
                <button type="button" onClick="{{ q.toggle }}" style="width:100%;display:flex;align-items:center;gap:18px;text-align:left;padding:24px 26px;background:transparent;border:none;font-family:inherit;cursor:pointer;">
                  <span style="width:38px;height:38px;border-radius:50%;background:#00ADBB;color:#FFFFFF;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;">?</span>
                  <span style="flex:1;min-width:0;font-size:16.5px;font-weight:700;color:#001A70;letter-spacing:-0.01em;line-height:1.4;">{{ q.q }}</span>
                  <sc-if value="{{ q.open }}" hint-placeholder-val="{{ true }}">
                    <span style="flex:none;color:#00ADBB;display:flex;transform:rotate(180deg);"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="5 9 12 16 19 9"></polyline></svg></span>
                  </sc-if>
                  <sc-if value="{{ q.closed }}" hint-placeholder-val="{{ false }}">
                    <span style="flex:none;color:#9BA6B4;display:flex;"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="5 9 12 16 19 9"></polyline></svg></span>
                  </sc-if>
                </button>
                <sc-if value="{{ q.open }}" hint-placeholder-val="{{ true }}">
                  <p style="margin:0;padding:0 60px 26px 82px;font-size:15.5px;line-height:1.75;color:#6B7280;">{{ q.a }}</p>
                </sc-if>
              </div>
            </sc-for>
          </div>
        </section>

        <section ref="{{ reg4 }}" style="scroll-margin-top:110px;">
          <div style="display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;">
            <h2 style="margin:0;font-size:clamp(24px,2.4vw,32px);font-weight:800;letter-spacing:-0.02em;color:#001A70;line-height:1.2;">Últimos artigos do IB</h2>
            <a href="./InfoBranding - Blog.dc.html" style="display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#00ADBB;" style-hover="color:#001A70;">Ver todos
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="12" x2="19" y2="12"></line><polyline points="13 6 19 12 13 18"></polyline></svg>
            </a>
          </div>
          <div style="display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:26px;">
            <sc-for list="{{ articles }}" as="a" hint-placeholder-count="3">
              <a href="./InfoBranding - Artigo.dc.html" style="display:flex;flex-direction:column;background:#FFFFFF;border:1px solid #ECEEF2;border-radius:12px;overflow:hidden;transition:box-shadow .25s ease,transform .25s ease;" style-hover="box-shadow:0 10px 26px rgba(33,36,41,.09);transform:translateY(-2px);">
                <span style="position:relative;display:block;width:100%;aspect-ratio:16/9;">
                  <img src="{{ a.image }}" alt="" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;">
                  <span style="position:absolute;top:14px;left:14px;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#001A70;background:#FFFFFF;padding:6px 14px;border-radius:100px;">{{ a.kicker }}</span>
                </span>
                <span style="padding:20px 22px 22px;display:flex;flex-direction:column;flex:1;">
                  <span style="display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#00ADBB;">{{ a.date }}</span>
                  <span style="display:block;margin-top:10px;font-size:16px;font-weight:700;line-height:1.35;letter-spacing:-0.01em;color:#001A70;">{{ a.title }}</span>
                  <span style="display:block;margin-top:10px;font-size:14px;line-height:1.6;color:#8A94A3;">{{ a.excerpt }}</span>
                  <span style="margin-top:auto;padding-top:18px;display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700;color:#001A70;">{{ a.cta }}
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="12" x2="19" y2="12"></line><polyline points="13 6 19 12 13 18"></polyline></svg>
                  </span>
                </span>
              </a>
            </sc-for>
          </div>
        </section>

        <section ref="{{ reg5 }}" style="scroll-margin-top:110px;">
          <h2 style="margin:0;font-size:clamp(24px,2.4vw,32px);font-weight:800;letter-spacing:-0.02em;color:#001A70;line-height:1.2;">Sugestões de livros</h2>
          <div style="display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:26px;">
            <sc-for list="{{ books }}" as="b" hint-placeholder-count="3">
              <a href="#" style="display:flex;flex-wrap:wrap;gap:clamp(12px,1.6vw,24px);align-items:center;padding:clamp(16px,2vw,28px);border-radius:14px;background:#FFFFFF;box-shadow:0 1px 3px rgba(33,36,41,.05);transition:box-shadow .25s ease,transform .25s ease;" style-hover="box-shadow:0 12px 30px rgba(0,26,112,.1);transform:translateY(-2px);">
                <img src="{{ b.cover }}" alt="" style="flex:0 1 44%;min-width:72px;width:100%;height:auto;display:block;" />
                <span style="display:flex;flex-direction:column;min-width:0;flex:1 1 120px;">
                  <span style="display:block;font-size:clamp(17px,1.6vw,21px);font-weight:800;color:#001A70;line-height:1.25;letter-spacing:-0.015em;">{{ b.title }}</span>
                  <span style="display:block;margin-top:12px;font-size:15px;color:#8A94A3;">{{ b.author }}</span>
                  <span style="margin-top:clamp(24px,3vw,44px);align-self:flex-end;width:40px;height:40px;border-radius:50%;border:1px solid #9BDCE4;display:flex;align-items:center;justify-content:center;color:#00ADBB;transition:background .2s ease,border-color .2s ease;">
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="12" x2="19" y2="12"></line><polyline points="13 6 19 12 13 18"></polyline></svg>
                  </span>
                </span>
              </a>
            </sc-for>
          </div>
        </section>

        <section ref="{{ reg6 }}" style="scroll-margin-top:110px;">
          <h2 style="margin:0;font-size:clamp(24px,2.4vw,32px);font-weight:800;letter-spacing:-0.02em;color:#001A70;line-height:1.2;">Vídeos sugeridos</h2>
          <div style="display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:26px;">
            <sc-for list="{{ videos }}" as="v" hint-placeholder-count="3">
              <a href="#" style="display:flex;flex-direction:column;border-radius:12px;border:1px solid #ECEEF2;background:#FFFFFF;overflow:hidden;transition:box-shadow .25s ease,transform .25s ease;" style-hover="box-shadow:0 10px 26px rgba(33,36,41,.09);transform:translateY(-2px);">
                <span style="position:relative;display:block;width:100%;aspect-ratio:16/9;background:#010b17;">
                  <img src="{{ v.image }}" alt="" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;" />
                  <span style="position:absolute;inset:0;background:linear-gradient(0deg,rgba(1,11,23,.62) 0%,rgba(1,11,23,.12) 60%,rgba(1,11,23,.3) 100%);"></span>
                  <span style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.95);display:flex;align-items:center;justify-content:center;color:#001A70;box-shadow:0 8px 22px rgba(1,11,23,.35);"><i class="fa-solid fa-play" style="font-size:17px;margin-left:3px;"></i></span>
                  <span style="position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:100px;background:rgba(255,255,255,.94);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#001A70;"><i class="{{ v.icon }}" style="font-size:13px;color:#00ADBB;"></i>{{ v.badge }}</span>
                  <span style="position:absolute;bottom:12px;right:12px;padding:5px 11px;border-radius:6px;background:rgba(1,11,23,.78);font-size:11.5px;font-weight:600;color:#FFFFFF;">{{ v.meta }}</span>
                </span>
                <span style="padding:20px 22px 22px;display:flex;flex-direction:column;flex:1;">
                  <span style="font-size:16px;font-weight:700;line-height:1.35;letter-spacing:-0.01em;color:#001A70;">{{ v.title }}</span>
                  <span style="margin-top:auto;padding-top:14px;display:flex;align-items:center;gap:9px;font-size:12.5px;color:#8A94A3;"><i class="{{ v.icon }}" style="font-size:13px;color:#00ADBB;"></i>{{ v.channel }}</span>
                </span>
              </a>
            </sc-for>
          </div>
        </section>

        <section ref="{{ reg7 }}" style="scroll-margin-top:110px;">
          <h2 style="margin:0;font-size:clamp(24px,2.4vw,32px);font-weight:800;letter-spacing:-0.02em;color:#001A70;line-height:1.2;">Diálogo IB</h2>
          <a href="#" style="display:flex;align-items:center;gap:22px;margin-top:26px;padding:26px 28px;border-radius:14px;background:#001A70;color:#FFFFFF;flex-wrap:wrap;transition:box-shadow .25s ease;" style-hover="box-shadow:0 14px 34px rgba(0,26,112,.24);color:#FFFFFF;">
            <span style="width:62px;height:62px;border-radius:14px;background:rgba(0,173,187,.22);display:flex;align-items:center;justify-content:center;color:#31C8E0;flex:none;"><i class="fa-solid fa-microphone" style="font-size:24px;"></i></span>
            <span style="flex:1;min-width:220px;">
              <span style="display:block;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#31C8E0;">Podcast · Episódio completo</span>
              <span style="display:block;margin-top:8px;font-size:clamp(18px,1.7vw,23px);font-weight:800;letter-spacing:-0.015em;color:#FFFFFF;line-height:1.25;">Construindo marca pessoal sem se perder</span>
              <span style="display:block;margin-top:8px;font-size:13.5px;color:#8FA3BC;">42 min · com Marina Costa</span>
            </span>
            <span style="width:52px;height:52px;border-radius:50%;background:#00ADBB;display:flex;align-items:center;justify-content:center;color:#00252A;flex:none;"><i class="fa-solid fa-play" style="font-size:17px;"></i></span>
          </a>
        </section>

        <section ref="{{ reg8 }}" style="scroll-margin-top:110px;">
          <h2 style="margin:0;font-size:clamp(24px,2.4vw,32px);font-weight:800;letter-spacing:-0.02em;color:#001A70;line-height:1.2;">Dados</h2>
          <div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:26px;">
            <sc-for list="{{ stats }}" as="s" hint-placeholder-count="2">
              <div style="position:relative;display:flex;align-items:center;gap:clamp(20px,2.4vw,30px);padding:clamp(24px,2.4vw,32px);border-radius:14px;border:1px solid rgba(0,173,187,.28);background:#F1FAFB;overflow:hidden;">
                <span style="position:absolute;top:22px;right:24px;width:76px;height:56px;background-image:radial-gradient(rgba(0,173,187,.32) 1.4px,transparent 1.4px);background-size:9px 9px;pointer-events:none;"></span>
                <span style="width:clamp(74px,7vw,92px);height:clamp(74px,7vw,92px);border-radius:50%;background:#0F9CAE;display:flex;align-items:center;justify-content:center;color:#FFFFFF;flex:none;"><i class="{{ s.icon }}" style="font-size:clamp(28px,2.6vw,34px);"></i></span>
                <span style="min-width:0;position:relative;z-index:2;">
                  <span style="display:block;font-size:clamp(34px,3.6vw,48px);font-weight:800;letter-spacing:-0.03em;color:#001A70;line-height:1;">{{ s.value }}</span>
                  <span style="display:block;margin-top:14px;font-size:15px;line-height:1.75;color:#33475C;max-width:34ch;">{{ s.label }}</span>
                </span>
              </div>
            </sc-for>
          </div>
        </section>

        <section ref="{{ reg9 }}" style="scroll-margin-top:110px;">
          <h2 style="margin:0;font-size:clamp(24px,2.4vw,32px);font-weight:800;letter-spacing:-0.02em;color:#001A70;line-height:1.2;">Cursos</h2>
          <div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:26px;">
            <sc-for list="{{ courses }}" as="c" hint-placeholder-count="2">
              <a href="#" style="display:flex;flex-wrap:wrap;gap:clamp(14px,2vw,28px);align-items:center;padding:clamp(20px,2.2vw,30px);border-radius:14px;border:1px solid #ECEEF2;background:#FFFFFF;transition:box-shadow .25s ease,transform .25s ease;" style-hover="box-shadow:0 10px 26px rgba(33,36,41,.09);transform:translateY(-2px);">
                <span style="display:flex;flex-direction:column;min-width:0;flex:1 1 150px;">
                  <span style="font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#00ADBB;">Formação IB</span>
                  <span style="margin-top:14px;font-size:clamp(17px,1.7vw,20px);font-weight:800;letter-spacing:-0.015em;color:#001A70;line-height:1.3;">{{ c.title }}</span>
                  <span style="margin-top:12px;font-size:13.5px;color:#8A94A3;">{{ c.meta }}</span>
                  <span style="margin-top:clamp(20px,2.4vw,32px);width:40px;height:40px;border-radius:50%;border:1px solid #9BDCE4;display:flex;align-items:center;justify-content:center;color:#00ADBB;flex:none;">
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="12" x2="19" y2="12"></line><polyline points="13 6 19 12 13 18"></polyline></svg>
                  </span>
                </span>
                <img src="{{ c.image }}" alt="" style="flex:0 1 39%;min-width:101px;max-width:193px;width:100%;height:auto;border-radius:12px;display:block;" />
              </a>
            </sc-for>
          </div>
        </section>

      </div>
    </div>
  </section>

  <section style="position:relative;margin-left:52px;padding:clamp(90px,10vw,150px) 0;text-align:center;overflow:hidden;background:#FCFDFE;">
    <img src="./assets/participacao-bg.webp" alt="" style="position:absolute;top:0;right:0;height:100%;width:auto;max-width:none;">
    <div style="position:relative;z-index:2;max-width:1360px;margin:0 auto;padding:0 48px;">
      <span style="font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#00ADBB;display:flex;align-items:center;gap:12px;justify-content:center;"><span style="width:26px;height:1px;background:#00ADBB;display:inline-block;"></span>Participação</span>
      <h2 style="font-weight:800;font-size:clamp(30px,4vw,52px);max-width:15ch;margin:26px auto 22px;line-height:1.1;letter-spacing:-0.025em;color:#001A70;">O Radar IB na sua caixa de entrada</h2>
      <p style="color:#5C6C82;max-width:44ch;margin:0 auto 44px;font-size:clamp(15px,1.2vw,17px);line-height:1.6;">Uma curadoria de ideias, tendências, pesquisas e movimentos que estão transformando o mundo das marcas.</p>
      <form style="display:flex;align-items:stretch;gap:0;max-width:560px;margin:0 auto;background:#FFFFFF;border-radius:999px;overflow:hidden;box-shadow:0 10px 30px rgba(0,26,112,.09),0 1px 3px rgba(0,26,112,.06);">
        <input type="email" placeholder="seu@email.com" aria-label="E-mail" style="flex:1;min-width:0;border:none;background:transparent;padding:22px 16px 22px 34px;font-family:inherit;font-size:16px;color:#212429;outline:none;">
        <button type="submit" style="border:none;background:linear-gradient(100deg,#0B4EA2 0%,#0E7EB5 55%,#12B8B0 100%);color:#FFFFFF;padding:0 clamp(24px,3vw,40px);font-family:inherit;font-size:16px;font-weight:700;white-space:nowrap;cursor:pointer;transition:filter .2s ease;" style-hover="filter:brightness(1.08);">Quero receber</button>
      </form>
      <p style="margin-top:22px;font-size:13.5px;color:#8494A8;">Envio quinzenal. Cancele quando quiser.</p>
    </div>
  </section>

  <footer style="padding:64px 0 32px;background:#FFFFFF;margin-left:52px;">
    <div style="max-width:1360px;margin:0 auto;padding:0 48px;">
      <div style="display:grid;grid-template-columns:minmax(215px,1.15fr) repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,38px);padding-bottom:52px;border-bottom:1px solid #ECEEF2;">
        <div>
          <a href="./InfoBranding - Ajustes V6.dc.html" style="display:flex;align-items:center;margin-bottom:16px;"><img src="./assets/infobranding-logo.png" alt="InfoBranding" style="height:auto;width:171px;max-width:100%;display:block;"></a>
          <span style="display:block;width:38px;height:2px;background:#00ADBB;margin-bottom:20px;"></span>
          <p style="font-size:13px;color:#8A94A3;max-width:26ch;line-height:1.75;margin:0 0 30px;">O ecossistema de conhecimento sobre branding que conecta teoria, prática e mercado.</p>
          <div style="display:flex;align-items:center;flex-wrap:nowrap;gap:7px;font-size:8.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#001A70;white-space:nowrap;">
            <span>Conhecer</span><span style="width:4px;height:4px;border-radius:50%;background:#00ADBB;"></span>
            <span>Conectar</span><span style="width:4px;height:4px;border-radius:50%;background:#00ADBB;"></span>
            <span>Transformar</span>
          </div>
        </div>
        <sc-for list="{{ footerCols }}" as="col" hint-placeholder-count="4">
          <div>
            <h5 style="font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#001A70;margin:6px 0 20px;">{{ col.title }}</h5>
            <span style="display:block;width:26px;height:2px;background:#00ADBB;margin-bottom:22px;"></span>
            <ul style="margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:16px;">
              <sc-for list="{{ col.links }}" as="link" hint-placeholder-count="4">
                <li>
                  <a href="{{ link.href }}" style="display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;color:#5C6470;" style-hover="color:#001A70;">
                    <span>{{ link.label }}</span>
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#00ADBB" stroke-width="2.2" style="flex:none;"><polyline points="9 5 16 12 9 19"></polyline></svg>
                  </a>
                </li>
              </sc-for>
            </ul>
          </div>
        </sc-for>
      </div>
      <div style="display:flex;justify-content:space-between;align-items:center;padding-top:34px;flex-wrap:wrap;gap:clamp(14px,2vw,28px);">
        <p style="font-size:clamp(11px,1.1vw,12.5px);color:#8A94A3;margin:0;">© 2026 InfoBranding. Todos os direitos reservados.</p>
        <div style="display:flex;align-items:center;gap:clamp(9px,1.2vw,14px);">
          <a href="#" style="font-size:clamp(11px,1.1vw,12.5px);color:#5C6470;white-space:nowrap;" style-hover="color:#001A70;">Política de Privacidade</a>
          <span style="width:4px;height:4px;border-radius:50%;background:#00ADBB;"></span>
          <a href="#" style="font-size:clamp(11px,1.1vw,12.5px);color:#5C6470;white-space:nowrap;" style-hover="color:#001A70;">Termos de Uso</a>
          <span style="width:4px;height:4px;border-radius:50%;background:#00ADBB;"></span>
          <a href="#" style="font-size:clamp(11px,1.1vw,12.5px);color:#5C6470;white-space:nowrap;" style-hover="color:#001A70;">Mapa do site</a>
        </div>
        <div style="display:flex;gap:12px;">
          <a href="#" aria-label="Instagram" style="width:38px;height:38px;border:1px solid #E4E8EF;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#00ADBB;box-shadow:0 2px 8px rgba(0,26,112,.08);" style-hover="border-color:#001A70;background:#E6ECF7;"><i class="fa-brands fa-instagram" style="font-size:16px;"></i></a>
          <a href="#" aria-label="LinkedIn" style="width:38px;height:38px;border:1px solid #E4E8EF;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#00ADBB;box-shadow:0 2px 8px rgba(0,26,112,.08);" style-hover="border-color:#001A70;background:#E6ECF7;"><i class="fa-brands fa-linkedin-in" style="font-size:15px;"></i></a>
          <a href="#" aria-label="YouTube" style="width:38px;height:38px;border:1px solid #E4E8EF;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#00ADBB;box-shadow:0 2px 8px rgba(0,26,112,.08);" style-hover="border-color:#001A70;background:#E6ECF7;"><i class="fa-brands fa-youtube" style="font-size:15px;"></i></a>
        </div>
      </div>
    </div>
  </footer>

</div>

</x-dc>
<script type="text/x-dc" data-dc-script>
class Component extends DCLogic {
  state = { universoOpen: false, active: 0, faqOpen: 0 };

  toggleFaq = (i) => () => this.setState((s) => ({ faqOpen: s.faqOpen === i ? null : i }));

  tocDefs = [
    ['Definição', 'fa-solid fa-circle-info'],
    ['Conceitos correlatos', 'fa-solid fa-diagram-project'],
    ['Aplicação prática', 'fa-solid fa-screwdriver-wrench'],
    ['Principais dúvidas', 'fa-solid fa-circle-question'],
    ['Últimos artigos do IB', 'fa-solid fa-newspaper'],
    ['Sugestões de livros', 'fa-solid fa-book'],
    ['Vídeos sugeridos', 'fa-solid fa-play'],
    ['Diálogo IB', 'fa-solid fa-microphone'],
    ['Dados', 'fa-solid fa-chart-simple'],
    ['Cursos', 'fa-solid fa-graduation-cap']
  ];

  otherTopics = ['Estratégia de marca', 'Design e identidade', 'Comportamento e consumo', 'Gestão de marca', 'Arquitetura de marca'];

  concepts = [
    { title: 'Reputação', icon: 'fa-solid fa-shield-halved', desc: 'O que dizem sobre você quando você não está na sala — o resultado acumulado das suas entregas.' },
    { title: 'Propósito', icon: 'fa-solid fa-bullseye', desc: 'A causa que organiza suas escolhas e explica por que você faz o que faz.' },
    { title: 'Presença', icon: 'fa-solid fa-user-group', desc: 'Onde e como você aparece: canais, frequência e a coerência entre eles.' }
  ];

  steps = [
    { num: '01', text: 'Defina em uma frase no que sua marca acredita — e escreva também o que ela recusa.' },
    { num: '02', text: 'Garanta que sua presença online reflita essa escolha de ponta a ponta: bio, portfólio, tom das respostas.' },
    { num: '03', text: 'Escolha dois ou três territórios de conteúdo e evite se dispersar fora deles.' },
    { num: '04', text: 'Seja consistente por tempo suficiente para virar lembrança — pense em trimestres, não em posts.' }
  ];

  faqs = [
    { q: 'Branding pessoal é só para influenciadores?', a: 'Não. Vale para qualquer profissional, executivo ou fundador cuja marca nasce ligada a um rosto e a uma trajetória.' },
    { q: 'Preciso aparecer o tempo todo?', a: 'Consistência importa mais que frequência. Poucos e bons pontos de contato constroem mais reputação do que presença diária sem direção.' },
    { q: 'Marca pessoal atrapalha a marca da empresa?', a: 'Só quando as duas contam histórias diferentes. Bem alinhadas, a pessoal amplifica a corporativa e encurta o caminho da confiança.' },
    { q: 'Como medir se está funcionando?', a: 'Observe a qualidade dos convites que chegam: temas, contextos e o vocabulário que os outros usam para descrever você.' }
  ];

  articles = [
    { title: 'A IA pode fazer seu marketing, mas não seu branding pessoal', kicker: 'Análise', date: '18 AGO 2026', excerpt: 'O que continua insubstituivelmente humano na construção de uma marca pessoal.', cta: 'Leia mais', image: './assets/hero-slide2.webp' },
    { title: 'Marca pessoal na odontologia: o caso Alessandra Martinelli', kicker: 'Case', date: '04 AGO 2026', excerpt: 'Como uma especialista transformou reputação clínica em marca reconhecida.', cta: 'Leia mais', image: './assets/atualidade-analise.jpg' },
    { title: 'Autenticidade x estratégia: onde fica o limite', kicker: 'Opinião', date: '21 JUL 2026', excerpt: 'Ser você mesmo não dispensa escolhas — e escolher não significa fingir.', cta: 'Leia mais', image: './assets/hero-slide3.webp' }
  ];

  books = [
    { title: 'Marca pessoal na prática', author: 'Ana Ribeiro', cover: './assets/livro1.png' },
    { title: 'Reputação e confiança', author: 'Carlos Menezes', cover: './assets/livro2.png' },
    { title: 'O poder da presença', author: 'Amy Cuddy', cover: './assets/livro3.png' }
  ];

  videos = [
    { title: 'Marca pessoal em 6 minutos', channel: 'InfoBranding no YouTube', meta: '6:12 · YouTube', icon: 'fa-brands fa-youtube', badge: 'YouTube', image: './assets/hero-slide2.webp', isYt: true, isIg: false, isLi: false },
    { title: 'Três erros comuns na marca pessoal', channel: '@infobranding', meta: '1:30 · Reels', icon: 'fa-brands fa-instagram', badge: 'Instagram', image: './assets/atualidade-analise.jpg', isYt: false, isIg: true, isLi: false },
    { title: 'Live: reputação na prática', channel: 'InfoBranding · LinkedIn', meta: '48:05 · Live', icon: 'fa-brands fa-linkedin-in', badge: 'LinkedIn', image: './assets/hero-slide3.webp', isYt: false, isIg: false, isLi: true }
  ];

  stats = [
    { value: '70%', icon: 'fa-solid fa-user-group', label: 'dos recrutadores pesquisam a presença digital do candidato antes de uma decisão.' },
    { value: '5x', icon: 'fa-solid fa-chart-simple', label: 'mais engajamento em conteúdo publicado por pessoas do que por perfis de marca.' }
  ];

  courses = [
    { title: 'Branding pessoal do zero à presença', meta: '4 módulos · online · com certificado', image: './assets/curso1.png' },
    { title: 'Reputação para lideranças', meta: '6 módulos · online · turmas trimestrais', image: './assets/curso2.png' }
  ];

  footerColDefs = [
    ['Conhecimento', [['Descomplicando Branding', '#'], ['Radar IB', '#'], ['Enciclopédia de Branding', '#'], ['Pesquisas', '#']]],
    ['InfoBranding', [['Sobre', '#'], ['Colaboradores', '#'], ['Publicações', '#'], ['Trabalhe conosco', '#']]],
    ['Experiências', [['Cursos & workshops', '#'], ['Palestras & talks', '#'], ['Eventos', '#'], ['Projetos especiais', '#']]],
    ['Participe', [['Torne-se colaborador', '#'], ['Newsletter', '#'], ['Fale conosco', '#'], ['Anuncie', '#']]]
  ];

  sections = [];

  openUniverso = () => this.setState({ universoOpen: true });
  closeUniverso = () => this.setState({ universoOpen: false });

  register = (i) => (el) => { this.sections[i] = el; };

  goTo = (i) => () => {
    const el = this.sections[i];
    if (!el) return;
    const y = el.getBoundingClientRect().top + window.scrollY - 108;
    window.scrollTo({ top: y, behavior: 'smooth' });
  };

  onScroll = () => {
    if (this.ticking) return;
    this.ticking = true;
    requestAnimationFrame(() => {
      let idx = 0;
      this.sections.forEach((el, i) => {
        if (el && el.getBoundingClientRect().top - 130 <= 0) idx = i;
      });
      if (idx !== this.state.active) this.setState({ active: idx });
      this.ticking = false;
    });
  };

  componentDidMount() {
    window.addEventListener('scroll', this.onScroll, { passive: true });
    this.onScroll();
  }

  componentWillUnmount() { window.removeEventListener('scroll', this.onScroll); }

  renderVals() {
    const vals = {
      openUniverso: this.openUniverso,
      closeUniverso: this.closeUniverso,
      universoStyle: 'position:absolute;top:calc(100% + 12px);left:-14px;min-width:196px;background:#FFFFFF;border:1px solid #ECEEF2;border-radius:12px;box-shadow:0 16px 40px rgba(0,26,112,.13);padding:8px 0;z-index:70;transition:opacity .2s ease,transform .2s ease;' + (this.state.universoOpen ? 'opacity:1;transform:translateY(0);pointer-events:auto;' : 'opacity:0;transform:translateY(-6px);pointer-events:none;'),
      toc: this.tocDefs.map(([label, icon], i) => {
        const on = i === this.state.active;
        return { label, icon, on, off: !on, select: this.goTo(i) };
      }),
      otherTopics: this.otherTopics.map((label) => ({ label })),
      concepts: this.concepts,
      steps: this.steps,
      faqs: this.faqs.map((f, i) => ({
        q: f.q, a: f.a,
        num: String(i + 1).padStart(2, '0'),
        notFirst: i > 0,
        open: this.state.faqOpen === i,
        closed: this.state.faqOpen !== i,
        toggle: this.toggleFaq(i)
      })),
      articles: this.articles,
      books: this.books,
      videos: this.videos,
      stats: this.stats,
      courses: this.courses,
      footerCols: this.footerColDefs.map(([title, links]) => ({ title, links: links.map(([label, href]) => ({ label, href })) }))
    };
    for (let i = 0; i < this.tocDefs.length; i++) vals['reg' + i] = this.register(i);
    return vals;
  }
}
</script>
</body>
</html>
