<!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">
<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;}
::selection{background:#CDEEF0;color:#000F42;}
:focus-visible{outline:2px solid #001A70;outline-offset:3px;}
@keyframes radarSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@keyframes radarPulse{0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.14),0 0 30px rgba(0,173,187,.35),0 30px 60px rgba(0,0,0,.4);}50%{box-shadow:0 0 0 1px rgba(255,255,255,.2),0 0 55px rgba(0,173,187,.6),0 30px 60px rgba(0,0,0,.4);}}
@keyframes radarBlink{0%,100%{opacity:.35;transform:translate(-50%,-50%) scale(1);}50%{opacity:1;transform:translate(-50%,-50%) scale(1.6);}}
</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;">
    
    <nav style="display:flex;flex-direction:column;gap:0;flex:1;justify-content:center;width:100%;">
      <sc-for list="{{ tabs }}" as="tab" hint-placeholder-count="6">
        <a href="{{ tab.href }}" style="{{ tab.style }}">
          <span style="{{ tab.numStyle }}">{{ tab.num }}</span>{{ tab.label }}
        </a>
      </sc-for>
    </nav>
    
  </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="#top" 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; gap: 12px; flex-wrap: nowrap; min-width: 0; overflow: visible; height: 21px; justify-content: space-between; width: 767px">
        <a href="#atualidade" style="font-size: 14px; font-weight: 500; color: #6B7280; white-space: nowrap" style-hover="color:#001A70;">Conteúdos</a>
        <a href="#conhecimento" style="font-size: 14px; font-weight: 500; color: #6B7280; white-space: nowrap" style-hover="color:#001A70;">Descomplicando Branding</a>
        <a href="#inteligencia" style="font-size: 14px; font-weight: 500; color: #6B7280; white-space: nowrap" style-hover="color:#001A70;">Radar IB</a>
        <a href="#pessoas" style="font-size: 14px; font-weight: 500; color: #6B7280; white-space: nowrap" style-hover="color:#001A70;">Colaboradores</a>
        <a href="#ecossistema" style="font-size: 14px; font-weight: 500; color: #6B7280; white-space: nowrap" style-hover="color:#001A70;">Universo InfoBranding</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; font-size: 17px" style-hover="border-color:#001A70;background:#E6ECF7;">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" style="width: 19px; height: 19px"><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;" style-hover="filter:brightness(1.08);">Newsletter <span>→</span></button>
      </div>
    </div>
  </header>

  <section id="top" style="margin-left:52px;padding:96px 0 88px;border-bottom:1px solid #ECEEF2;">
    <div style="max-width:1360px;margin:0 auto;padding:0 48px;display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;">
      <div>
        <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>Ecossistema de Branding</span>
        <h1 style="font-weight: 800; letter-spacing: -0.02em; font-size: clamp(38px,4.6vw,56px); line-height: 1.08; margin: 20px 0 24px; max-width: 15ch; color: #001A70">O conhecimento que <span style="color: #001A70">transforma</span> marcas.</h1>
        <p style="font-size:18px;color:#6B7280;max-width:46ch;margin-bottom:36px;line-height:1.6;">O ecossistema de conhecimento sobre Branding que conecta teoria, prática e mercado — conteúdo, pesquisa, livros, cursos e pessoas em um só lugar.</p>
        <div style="display:flex;gap:16px;flex-wrap:wrap;">
          <a href="#conhecimento" style="display:inline-flex;align-items:center;gap:10px;padding:14px 26px;font-size:14px;font-weight:700;border:none;border-radius:999px;background:linear-gradient(90deg,#001A70,#00ADBB);color:#FFFFFF;" style-hover="filter:brightness(1.08);">Explorar o conhecimento <span>→</span></a>
          <a href="#ecossistema" style="display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; font-size: 14px; font-weight: 700; border: 1px solid #00ADBB; border-radius: 999px; background: transparent; color: #212429;" style-hover="border-color:#001A70;color:#001A70;">Conheça o InfoBranding <span>→</span></a>
        </div>
      </div>

      <div ref="{{ registerCloud }}" onMouseMove="{{ onCloudMouseMove }}" onMouseLeave="{{ onCloudMouseLeave }}" aria-hidden="true" style="position:relative;width:100%;aspect-ratio:520/440;margin:0 auto;transform:scale(1.1);transform-origin:center center;">
        <svg style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;">
            <sc-for list="{{ cloudLines }}" as="ln" hint-placeholder-count="5">
              <line ref="{{ ln.ref }}" x1="0" y1="0" x2="0" y2="0" stroke="#D8DEDE" stroke-width="1"></line>
            </sc-for>
          </svg>

        <div ref="{{ registerCenter }}" style="position:absolute;left:41.92%;top:40.45%;width:16.15%;height:19.09%;border-radius:50%;background:#FFFFFF;box-shadow:0 0 0 1px #ECEEF2,0 12px 30px rgba(33,36,41,.10);display:flex;align-items:center;justify-content:center;z-index:2;">
            <img src="./assets/simbolo.png" alt="InfoBranding" style="width:62%;height:62%;object-fit:contain;display:block;">
          </div>

          <sc-for list="{{ cloudPoints }}" as="p" hint-placeholder-count="11">
            <div ref="{{ p.ref }}" style="{{ p.wrapStyle }}">
              <sc-if value="{{ p.hasDot }}" hint-placeholder-val="{{ false }}">
                <span ref="{{ p.dotRef }}" style="width:7px;height:7px;border-radius:50%;background:#00ADBB;display:block;margin-bottom:6px;"></span>
              </sc-if>
              <span style="{{ p.textStyle }}">{{ p.text }}</span>
            </div>
          </sc-for>
        </div>
    </div>
  </section>

  <section id="atualidade" ref="{{ registerSection_atualidade }}" style="margin-left:52px;padding:88px 0;border-bottom:1px solid #ECEEF2;">
    <div style="max-width:1360px;margin:0 auto;padding:0 48px;">
      <div ref="{{ registerReveal }}" style="{{ revealStyle }}display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:44px;flex-wrap:wrap;">
        <div style="width: 426px; height: 82px">
          <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>01 · Atualidade</span>
          <h2 style="font-weight:800;font-size:clamp(26px,3vw,38px);margin-top:14px;max-width:16ch;letter-spacing:-0.01em;color:#001A70;">Agora no InfoBranding</h2>
        </div><p style="max-width: 38ch; color: #6B7280; font-size: 15px; line-height: 1.6; text-align: right; width: 347px; height: 71px">Uma curadoria editorial do que está em movimento no mundo das marcas — notícias, cases, análises e eventos.</p>
        
      </div>

      <div ref="{{ registerReveal }}" style="{{ revealStyle }}display:grid;grid-template-columns:1.15fr 1fr 1fr;grid-template-rows:auto auto;gap:16px;">
        <article style="grid-row:span 2;background:#FFFFFF;border:1px solid #ECEEF2;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;" style-hover="box-shadow:0 8px 24px rgba(33,36,41,.08);">
          <div style="position:relative;width:100%;aspect-ratio:16/12;">
            <img src="./assets/atualidade-natura.jpg" alt="Rebranding da Natura" style="width:100%;height:100%;object-fit:cover;display:block;">
            <span style="position:absolute;top:16px;left:16px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#212429;background:#FFFFFF;padding:6px 12px;border-radius:999px;">Última notícia</span>
          </div>
          <div style="padding:24px;display:flex;flex-direction:column;gap:8px;flex:1;">
            <span style="font-size:12px;font-weight:700;color:#00ADBB;">08 MAI 2026</span>
            <h3 style="font-weight:800;font-size:22px;line-height:1.25;letter-spacing:-0.01em;color:#001A70;margin:0;">Rebranding da Natura reacende debate sobre identidade regional em multinacionais</h3>
            <p style="color:#6B7280;font-size:14px;line-height:1.55;margin:0;">Especialistas analisam como a nova identidade visual da marca reforça conexões locais sem perder relevância global.</p>
            <span style="margin-top:auto;font-size:13.5px;font-weight:700;color:#001A70;display:inline-flex;align-items:center;gap:6px;">Ler notícia <span>→</span></span>
          </div>
        </article>
        <article style="background:#FFFFFF;border:1px solid #ECEEF2;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;" style-hover="box-shadow:0 8px 24px rgba(33,36,41,.08);">
          <div style="position:relative;width:100%;aspect-ratio:16/10;">
            <img src="./assets/atualidade-case.jpg" alt="Último case" style="width:100%;height:100%;object-fit:cover;display:block;">
            <span style="position:absolute;top:14px;left:14px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#FFFFFF;background:rgba(0,26,112,.85);padding:5px 10px;border-radius:999px;">Último case</span>
          </div>
          <div style="padding:20px;display:flex;flex-direction:column;gap:8px;flex:1;">
            <span style="font-size:11.5px;font-weight:700;color:#00ADBB;">06 MAI 2026</span>
            <h3 style="font-weight:700;font-size:16px;line-height:1.3;color:#001A70;margin:0;">Como a Nubank construiu percepção de marca sem depender de agência</h3>
            <p style="color:#6B7280;font-size:13.5px;line-height:1.55;margin:0;">Brand equity, cultura interna e consistência como vantagem competitiva.</p>
            <span style="margin-top:auto;font-size:13px;font-weight:700;color:#001A70;display:inline-flex;align-items:center;gap:6px;">Ver case <span>→</span></span>
          </div>
        </article>
        <article style="background:#FFFFFF;border:1px solid #ECEEF2;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;" style-hover="box-shadow:0 8px 24px rgba(33,36,41,.08);">
          <div style="position:relative;width:100%;aspect-ratio:16/10;">
            <img src="./assets/atualidade-analise.jpg" alt="Análise" style="width:100%;height:100%;object-fit:cover;display:block;">
            <span style="position:absolute;top:14px;left:14px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#001A70;background:#FFFFFF;padding:5px 10px;border-radius:999px;">Análise</span>
          </div>
          <div style="padding:20px;display:flex;flex-direction:column;gap:8px;flex:1;">
            <span style="font-size:11.5px;font-weight:700;color:#00ADBB;">04 MAI 2026</span>
            <h3 style="font-weight:700;font-size:16px;line-height:1.3;color:#001A70;margin:0;">O que os rebrandings de 2026 revelam sobre o consumidor pós-digital</h3>
            <p style="color:#6B7280;font-size:13.5px;line-height:1.55;margin:0;">Leitura crítica das tendências de posicionamento do primeiro semestre.</p>
            <span style="margin-top:auto;font-size:13px;font-weight:700;color:#001A70;display:inline-flex;align-items:center;gap:6px;">Ler análise <span>→</span></span>
          </div>
        </article>
        <article style="grid-column:2 / span 2;position:relative;border-radius:12px;overflow:hidden;min-height:180px;display:flex;align-items:flex-end;" style-hover="box-shadow:0 8px 24px rgba(33,36,41,.08);">
          <img src="./assets/atualidade-evento.jpg" alt="Evento" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;">
          <div style="position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,26,112,.88) 0%,rgba(0,26,112,.55) 45%,rgba(0,26,112,.05) 80%);"></div>
          <span style="position:absolute;top:16px;left:20px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#FFFFFF;background:#00ADBB;padding:5px 12px;border-radius:999px;">Evento</span>
          <button aria-label="Ver evento" style="position:absolute;top:16px;right:20px;width:40px;height:40px;border-radius:999px;background:#FFFFFF;border:none;display:flex;align-items:center;justify-content:center;color:#001A70;">
            <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="5" width="18" height="16" rx="2"></rect><line x1="16" y1="3" x2="16" y2="7"></line><line x1="8" y1="3" x2="8" y2="7"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
          </button>
          <div style="position:relative;padding:56px 24px 24px;display:flex;flex-direction:column;gap:8px;max-width:60%;">
            <span style="font-size:11.5px;font-weight:700;color:#7FE0E5;">15 MAI 2026</span>
            <h3 style="font-weight:800;font-size:18px;line-height:1.3;color:#FFFFFF;margin:0;">Brand Experience Summit 2026: inovação, propósito e conexão</h3>
            <p style="color:rgba(255,255,255,.8);font-size:13.5px;line-height:1.5;margin:0;">O principal evento sobre marcas e experiência do cliente está com inscrições abertas.</p>
            <span style="font-size:13px;font-weight:700;color:#FFFFFF;display:inline-flex;align-items:center;gap:6px;">Ver evento <span>→</span></span>
          </div>
        </article>
      </div>

      <div ref="{{ registerReveal }}" style="{{ revealStyle }}display:flex;justify-content:center;margin-top:40px;">
        <a href="#" style="display:inline-flex;align-items:center;gap:10px;padding:13px 24px;font-size:14px;font-weight:700;border:1px solid #00ADBB;border-radius:999px;background:transparent;color:#212429;" style-hover="border-color:#001A70;color:#001A70;">Ver todos os conteúdos <span>→</span></a>
      </div>
    </div>
  </section>

  <section id="conhecimento" ref="{{ registerSection_conhecimento }}" style="margin-left:52px;padding:96px 0;background:#FFFFFF;border-bottom:1px solid #ECEEF2;">
    <div style="max-width:1360px;margin:0 auto;padding:0 48px;">
      <div ref="{{ registerReveal }}" style="{{ revealStyle }}display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:44px;flex-wrap:wrap;">
        <div>
          <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>02 · Conhecimento</span>
          <h2 style="font-weight:800;font-size:clamp(26px,3vw,38px);margin-top:14px;max-width:16ch;letter-spacing:-0.01em;color:#001A70;">Descomplicando Branding</h2>
        </div>
        <p style="max-width:38ch;color:#6B7280;font-size:15px;line-height:1.6;text-align:right;">Comece por aqui. Explore conceitos, teorias e práticas para entender como as marcas são construídas, percebidas e gerenciadas.</p>
      </div>

      <div ref="{{ registerReveal }}" style="{{ revealStyle }}display:grid;grid-template-columns:repeat(5,1fr);gap:12px;">
        <sc-for list="{{ dcItems }}" as="item" hint-placeholder-count="10">
          <a href="#" style="background:#FFFFFF;border:1px solid #ECEEF2;border-radius:12px;padding:20px;min-height:180px;display:flex;flex-direction:column;gap:14px;box-shadow:0 1px 3px rgba(33,36,41,.04);" style-hover="border-color:#00ADBB;box-shadow:0 8px 20px rgba(33,36,41,.08);">
            <span style="font-size:14px;font-weight:800;color:#00ADBB;">{{ item.n }}</span>
            <div style="width:56px;height:56px;border-radius:10px;border:1px solid #ECEEF2;background:transparent;display:flex;align-items:center;justify-content:center;">
              <img src="{{ item.iconSrc }}" alt="" style="width:32px;height:32px;object-fit:contain;display:block;" />
            </div>
            <div style="display:flex;align-items:flex-end;justify-content:space-between;gap:8px;flex:1;">
              <h4 style="font-weight:800;font-size:21px;line-height:1.3;color:#001A70;margin:0;">{{ item.titleLine1 }}<br>{{ item.titleLine2 }}</h4>
              <span style="width:28px;height:28px;border-radius:999px;background:#F0F9FA;color:#00ADBB;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px;">→</span>
            </div>
          </a>
        </sc-for>
      </div>

      <div ref="{{ registerReveal }}" style="{{ revealStyle }}margin-top:52px;background:linear-gradient(90deg,#EAF7F8,#F2F9FA);border-radius:12px;padding:0 40px;display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;min-height:200px;overflow:hidden;">
        <div style="max-width:40ch;padding:32px 0;">
          <span style="font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#00ADBB;margin-bottom:8px;display:block;">Em construção</span>
          <h4 style="font-weight:800;font-size:22px;color:#001A70;margin:0;white-space:nowrap;">A Enciclopédia de Branding do InfoBranding</h4>
          <p style="color:#6B7280;font-size:14px;margin-top:8px;">Conceitos, autores, modelos, artigos, pesquisas, livros, cases e ferramentas — organizados em um único corpo de conhecimento.</p>
        </div>
        <img src="./assets/livros-banner.png" alt="Livros InfoBranding" style="height:200px;width:auto;object-fit:contain;flex-shrink:0;align-self:stretch;">
        <a href="#" style="display:inline-flex;align-items:center;gap:10px;padding:13px 24px;font-size:14px;font-weight:700;border:none;border-radius:999px;background:linear-gradient(90deg,#001A70,#00ADBB);color:#FFFFFF;flex-shrink:0;" style-hover="filter:brightness(1.08);">Explorar todos os conceitos <span>→</span></a>
      </div>
    </div>
  </section>

  <section id="inteligencia" ref="{{ registerSection_inteligencia }}" style="margin-left:52px;padding:96px 0;border-bottom:1px solid #ECEEF2;background:#212429;color:#FFFFFF;">
    <div style="max-width:1360px;margin:0 auto;padding:0 48px;">
      <div ref="{{ registerReveal }}" style="{{ revealStyle }}display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:44px;flex-wrap:wrap;">
        <div>
          <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>03 · Inteligência</span>
          <h2 style="font-weight:800;font-size:clamp(26px,3vw,38px);margin-top:14px;max-width:16ch;letter-spacing:-0.01em;color:#FFFFFF;">Radar IB</h2>
        </div>
        <p style="max-width:38ch;color:#9BA2AD;font-size:15px;line-height:1.6;text-align:right;">O que está acontecendo no universo das marcas? Quatro frentes monitoradas continuamente.</p>
      </div>

      <div ref="{{ registerReveal }}" style="{{ revealStyle }}position:relative;height:560px;display:flex;align-items:center;justify-content:center;margin-top:20px;">
        <div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:460px;height:460px;border-radius:50%;overflow:hidden;">
          <div style="position:absolute;inset:0;background:conic-gradient(from 0deg, rgba(0,173,187,.4), transparent 30%, transparent 100%);animation:radarSpin 5s linear infinite;"></div>
        </div>
        <div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:460px;height:460px;border:1px solid rgba(255,255,255,.14);border-radius:50%;"></div>
        <div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:300px;height:300px;border:1px solid rgba(255,255,255,.14);border-radius:50%;"></div>
        <span style="position:absolute;top:50%;left:calc(50% - 230px);transform:translate(-50%,-50%);width:6px;height:6px;border-radius:50%;background:#00ADBB;animation:radarBlink 2.4s ease-in-out infinite;"></span>
        <span style="position:absolute;top:calc(50% - 230px);left:50%;transform:translate(-50%,-50%);width:6px;height:6px;border-radius:50%;background:#00ADBB;animation:radarBlink 2.4s ease-in-out infinite .6s;"></span>
        <span style="position:absolute;top:50%;left:calc(50% + 230px);transform:translate(-50%,-50%);width:6px;height:6px;border-radius:50%;background:#00ADBB;animation:radarBlink 2.4s ease-in-out infinite 1.2s;"></span>
        <span style="position:absolute;top:calc(50% + 230px);left:50%;transform:translate(-50%,-50%);width:6px;height:6px;border-radius:50%;background:#00ADBB;animation:radarBlink 2.4s ease-in-out infinite 1.8s;"></span>
        <div style="width:158px;height:158px;border-radius:50%;background:radial-gradient(circle at 35% 30%, #00ADBB, #001A70 75%);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;z-index:5;animation:radarPulse 2.4s ease-in-out infinite;">
          <span style="font-family:inherit;font-size:10px;font-weight:700;letter-spacing:.14em;color:#FFFFFF;text-transform:uppercase;">Radar</span>
          <strong style="font-size:19px;font-weight:800;margin-top:6px;color:#FFFFFF;">IB</strong>
        </div>

        <div style="position:absolute;width:210px;padding:18px 20px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.03);border-radius:2px;top:0;left:50%;transform:translate(-50%,-40%);" style-hover="border-color:#00ADBB;background:rgba(255,255,255,.06);">
          <span style="font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#00ADBB;">Marcas</span>
          <h4 style="color:#FFFFFF;font-weight:700;font-size:17px;margin:8px 0 6px;">Posicionamento &amp; rebranding</h4>
          <p style="font-size:13px;color:#9BA2AD;line-height:1.5;">Campanhas, inovação e movimentos de reposicionamento estratégico.</p>
        </div>
        <div style="position:absolute;width:210px;padding:18px 20px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.03);border-radius:2px;top:50%;right:2%;transform:translateY(-50%);" style-hover="border-color:#00ADBB;background:rgba(255,255,255,.06);">
          <span style="font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#00ADBB;">Mercado</span>
          <h4 style="color:#FFFFFF;font-weight:700;font-size:17px;margin:8px 0 6px;">Investimentos &amp; categorias</h4>
          <p style="font-size:13px;color:#9BA2AD;line-height:1.5;">Concorrência, fusões e aquisições que redesenham setores inteiros.</p>
        </div>
        <div style="position:absolute;width:210px;padding:18px 20px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.03);border-radius:2px;bottom:0;left:50%;transform:translate(-50%,40%);" style-hover="border-color:#00ADBB;background:rgba(255,255,255,.06);">
          <span style="font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#00ADBB;">Consumidor</span>
          <h4 style="color:#FFFFFF;font-weight:700;font-size:17px;margin:8px 0 6px;">Comportamento &amp; comunidades</h4>
          <p style="font-size:13px;color:#9BA2AD;line-height:1.5;">Hábitos, desejos e novas formas de relação com as marcas.</p>
        </div>
        <div style="position:absolute;width:210px;padding:18px 20px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.03);border-radius:2px;top:50%;left:2%;transform:translateY(-50%);" style-hover="border-color:#00ADBB;background:rgba(255,255,255,.06);">
          <span style="font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#00ADBB;">Cultura</span>
          <h4 style="color:#FFFFFF;font-weight:700;font-size:17px;margin:8px 0 6px;">Sociedade &amp; tecnologia</h4>
          <p style="font-size:13px;color:#9BA2AD;line-height:1.5;">Movimentos culturais que antecipam o próximo ciclo de marcas.</p>
        </div>
      </div>

      <div ref="{{ registerReveal }}" style="{{ revealStyle }}display:flex;justify-content:center;margin-top:40px;">
        <a href="#" style="display:inline-flex;align-items:center;gap:10px;padding:13px 24px;font-size:14px;font-weight:700;border:none;border-radius:999px;background:linear-gradient(90deg,#001A70,#00ADBB);color:#FFFFFF;" style-hover="filter:brightness(1.08);">Explorar o Radar IB <span>→</span></a>
      </div>
    </div>
  </section>

  <section id="pessoas" ref="{{ registerSection_pessoas }}" style="margin-left:52px;padding:96px 0;border-bottom:1px solid #ECEEF2;">
    <div style="max-width:1360px;margin:0 auto;padding:0 48px;">
      <div ref="{{ registerReveal }}" style="{{ revealStyle }}display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:44px;flex-wrap:wrap;">
        <div>
          <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>04 · Pessoas</span>
          <h2 style="font-weight:800;font-size:clamp(26px,3vw,38px);margin-top:14px;max-width:16ch;letter-spacing:-0.01em;color:#001A70;">Quem pensa o Branding com a gente</h2>
        </div>
        <p style="max-width:38ch;color:#6B7280;font-size:15px;line-height:1.6;text-align:right;">Conheça as pessoas que compartilham conhecimento, experiências e diferentes perspectivas sobre marcas.</p>
      </div>

      <div ref="{{ registerReveal }}" style="{{ revealStyle }}display:grid;grid-template-columns:repeat(3,1fr);gap:24px;">
        <article style="border:1px solid #ECEEF2;border-radius:12px;overflow:hidden;background:#FFFFFF;" style-hover="box-shadow:0 8px 24px rgba(33,36,41,.08);">
          <div style="position:relative;aspect-ratio:16/10;">
            <img src="./assets/pessoas-card3.jpeg" alt="Estratégia de marca" style="width:100%;height:100%;object-fit:cover;display:block;">
            <span style="position:absolute;top:14px;left:14px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#00ADBB;background:#FFFFFF;padding:5px 12px;border-radius:999px;">Estratégia de marca</span>
          </div>
          <div style="padding:24px;">
            <h4 style="font-weight:800;font-size:19px;margin:0 0 8px;color:#001A70;">Marina Costa</h4>
            <p style="color:#6B7280;font-size:13.5px;line-height:1.55;margin:0 0 14px;">Especialista em estratégia de marca e construção de valor sustentável para negócios.</p>
            <div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;">
              <span style="font-size:11.5px;font-weight:500;padding:5px 10px;background:#F7F8FA;border-radius:999px;color:#6B7280;">Brand equity</span>
              <span style="font-size:11.5px;font-weight:500;padding:5px 10px;background:#F7F8FA;border-radius:999px;color:#6B7280;">Posicionamento</span>
              <span style="font-size:11.5px;font-weight:500;padding:5px 10px;background:#F7F8FA;border-radius:999px;color:#6B7280;">Arquitetura de marcas</span>
            </div>
            <a href="#" style="font-size:13.5px;font-weight:700;color:#001A70;display:inline-flex;align-items:center;gap:6px;">Ver perfil <span>→</span></a>
          </div>
        </article>
        <article style="border:1px solid #ECEEF2;border-radius:12px;overflow:hidden;background:#FFFFFF;" style-hover="box-shadow:0 8px 24px rgba(33,36,41,.08);">
          <div style="position:relative;aspect-ratio:16/10;">
            <img src="./assets/pessoas-card1.png" alt="Design &amp; identidade" style="width:100%;height:100%;object-fit:cover;display:block;">
            <span style="position:absolute;top:14px;left:14px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#00ADBB;background:#FFFFFF;padding:5px 12px;border-radius:999px;">Design &amp; identidade</span>
          </div>
          <div style="padding:24px;">
            <h4 style="font-weight:800;font-size:19px;margin:0 0 8px;color:#001A70;">Rafael Andrade</h4>
            <p style="color:#6B7280;font-size:13.5px;line-height:1.55;margin:0 0 14px;">Designer de marcas com foco em identidade visual e sistemas de marca consistentes.</p>
            <div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;">
              <span style="font-size:11.5px;font-weight:500;padding:5px 10px;background:#F7F8FA;border-radius:999px;color:#6B7280;">Identidade visual</span>
              <span style="font-size:11.5px;font-weight:500;padding:5px 10px;background:#F7F8FA;border-radius:999px;color:#6B7280;">Sistemas de marca</span>
              <span style="font-size:11.5px;font-weight:500;padding:5px 10px;background:#F7F8FA;border-radius:999px;color:#6B7280;">Naming</span>
            </div>
            <a href="#" style="font-size:13.5px;font-weight:700;color:#001A70;display:inline-flex;align-items:center;gap:6px;">Ver perfil <span>→</span></a>
          </div>
        </article>
        <article style="border:1px solid #ECEEF2;border-radius:12px;overflow:hidden;background:#FFFFFF;" style-hover="box-shadow:0 8px 24px rgba(33,36,41,.08);">
          <div style="position:relative;aspect-ratio:16/10;">
            <img src="./assets/pessoas-card2.png" alt="Comportamento do consumidor" style="width:100%;height:100%;object-fit:cover;display:block;">
            <span style="position:absolute;top:14px;left:14px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#00ADBB;background:#FFFFFF;padding:5px 12px;border-radius:999px;">Comportamento do consumidor</span>
          </div>
          <div style="padding:24px;">
            <h4 style="font-weight:800;font-size:19px;margin:0 0 8px;color:#001A70;">Luiza Prado</h4>
            <p style="color:#6B7280;font-size:13.5px;line-height:1.55;margin:0 0 14px;">Pesquisadora de comportamento do consumidor e experiência de marca.</p>
            <div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;">
              <span style="font-size:11.5px;font-weight:500;padding:5px 10px;background:#F7F8FA;border-radius:999px;color:#6B7280;">Cultura</span>
              <span style="font-size:11.5px;font-weight:500;padding:5px 10px;background:#F7F8FA;border-radius:999px;color:#6B7280;">Pesquisa</span>
              <span style="font-size:11.5px;font-weight:500;padding:5px 10px;background:#F7F8FA;border-radius:999px;color:#6B7280;">Experiência de marca</span>
            </div>
            <a href="#" style="font-size:13.5px;font-weight:700;color:#001A70;display:inline-flex;align-items:center;gap:6px;">Ver perfil <span>→</span></a>
          </div>
        </article>
      </div>

      <div ref="{{ registerReveal }}" style="{{ revealStyle }}margin-top:24px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;">
        <sc-for list="{{ stripItems }}" as="p" hint-placeholder-count="6">
          <a href="#" style="min-width:0;background:#FFFFFF;border:1px solid #ECEEF2;border-radius:999px;padding:10px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 1px 3px rgba(33,36,41,.04);" style-hover="border-color:#00ADBB;box-shadow:0 6px 16px rgba(33,36,41,.08);">
            <img src="{{ p.photo }}" alt="{{ p.name }}" style="width:34px;height:34px;border-radius:999px;flex-shrink:0;object-fit:cover;" />
            <span style="flex:1;min-width:0;">
              <strong style="display:block;font-size:13px;font-weight:700;color:#212429;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ p.name }}</strong>
              <span style="display:block;font-size:10px;font-weight:600;color:#9BA2AD;text-transform:uppercase;letter-spacing:.04em;">{{ p.area }}</span>
            </span>
            <span style="color:#001A70;font-size:13px;flex-shrink:0;">→</span>
          </a>
        </sc-for>
      </div>

      <div ref="{{ registerReveal }}" style="{{ revealStyle }}margin-top:52px;padding:32px 40px;background:linear-gradient(90deg,#F0F4FA,#E9F6F7);border-radius:12px;display:flex;align-items:center;gap:32px;flex-wrap:wrap;">
        <div style="display:flex;align-items:center;gap:20px;flex:1 1 0;min-width:280px;">
          <div style="width:67px;height:67px;border-radius:999px;background:#FFFFFF;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
            <img src="./assets/ico-chat.webp" alt="" style="width:34px;height:34px;object-fit:contain;">
          </div>
          <h3 style="font-weight:800;font-size:26px;letter-spacing:-0.01em;color:#001A70;margin:0;">Você também tem algo<br>a <span style="color:#00ADBB;">compartilhar?</span></h3>
        </div>
        <p style="color:#6B7280;font-size:13.5px;line-height:1.55;margin:0;flex:1 1 0;min-width:220px;">Contribua com o InfoBranding e ajude a fortalecer o ecossistema de conhecimento sobre marcas.</p>
        <a href="#" style="display:inline-flex;align-items:center;gap:10px;padding:13px 24px;font-size:14px;font-weight:700;border:none;border-radius:999px;background:linear-gradient(90deg,#001A70,#00ADBB);color:#FFFFFF;flex-shrink:0;align-self:center;" style-hover="filter:brightness(1.08);">Torne-se um colaborador <span>→</span></a>
      </div>
    </div>
  </section>

  <section id="ecossistema" ref="{{ registerSection_ecossistema }}" style="margin-left:52px;padding:96px 0;border-bottom:1px solid #ECEEF2;background:#FFFFFF;">
    <div style="max-width:1360px;margin:0 auto;padding:0 48px;">
      <div ref="{{ registerReveal }}" style="{{ revealStyle }}display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:44px;flex-wrap:wrap;">
        <div>
          <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>05 · Ecossistema</span>
          <h2 style="font-weight:800;font-size:clamp(26px,3vw,38px);margin-top:14px;max-width:16ch;letter-spacing:-0.01em;color:#001A70;">O universo InfoBranding</h2>
        </div>
        <p style="max-width:38ch;color:#6B7280;font-size:15px;line-height:1.6;text-align:right;">O Branding não acontece em um único lugar. Atuamos em diferentes frentes para produzir, compartilhar e transformar conhecimento em experiências, projetos e conexões.</p>
      </div>

      <div ref="{{ registerReveal }}" style="{{ revealStyle }}display:grid;grid-template-columns:repeat(3,1fr);gap:16px;">
        <div style="background:#F7F8FA;border:1px solid #ECEEF2;border-radius:2px;padding:24px;" style-hover="border-color:#001A70;background:#E6ECF7;">
          <span style="font-size:11px;font-weight:700;letter-spacing:.08em;color:#001A70;text-transform:uppercase;">Publicações</span>
          <h5 style="font-weight:700;font-size:16px;margin:8px 0 6px;">Livros &amp; e-books</h5>
          <p style="font-size:13px;color:#6B7280;line-height:1.5;">Projetos editoriais sobre marcas.</p>
        </div>
        <div style="background:#F7F8FA;border:1px solid #ECEEF2;border-radius:2px;padding:24px;" style-hover="border-color:#001A70;background:#E6ECF7;">
          <span style="font-size:11px;font-weight:700;letter-spacing:.08em;color:#001A70;text-transform:uppercase;">Educação</span>
          <h5 style="font-weight:700;font-size:16px;margin:8px 0 6px;">Cursos &amp; workshops</h5>
          <p style="font-size:13px;color:#6B7280;line-height:1.5;">Formação prática e aprofundada.</p>
        </div>
        <div style="background:#F7F8FA;border:1px solid #ECEEF2;border-radius:2px;padding:24px;" style-hover="border-color:#001A70;background:#E6ECF7;">
          <span style="font-size:11px;font-weight:700;letter-spacing:.08em;color:#001A70;text-transform:uppercase;">Experiências</span>
          <h5 style="font-weight:700;font-size:16px;margin:8px 0 6px;">Palestras &amp; talks</h5>
          <p style="font-size:13px;color:#6B7280;line-height:1.5;">Eventos que aproximam pessoas e ideias.</p>
        </div>
        <div style="background:#F7F8FA;border:1px solid #ECEEF2;border-radius:2px;padding:24px;" style-hover="border-color:#001A70;background:#E6ECF7;">
          <span style="font-size:11px;font-weight:700;letter-spacing:.08em;color:#001A70;text-transform:uppercase;">Projetos</span>
          <h5 style="font-weight:700;font-size:16px;margin:8px 0 6px;">Especiais &amp; parcerias</h5>
          <p style="font-size:13px;color:#6B7280;line-height:1.5;">Projetos editoriais sob medida.</p>
        </div>
        <div style="background:#F7F8FA;border:1px solid #ECEEF2;border-radius:2px;padding:24px;" style-hover="border-color:#001A70;background:#E6ECF7;">
          <span style="font-size:11px;font-weight:700;letter-spacing:.08em;color:#001A70;text-transform:uppercase;">Pesquisa</span>
          <h5 style="font-weight:700;font-size:16px;margin:8px 0 6px;">Estudos &amp; dados</h5>
          <p style="font-size:13px;color:#6B7280;line-height:1.5;">Inteligência produzida com rigor.</p>
        </div>
        <div style="background:#F7F8FA;border:1px solid #ECEEF2;border-radius:2px;padding:24px;" style-hover="border-color:#001A70;background:#E6ECF7;">
          <span style="font-size:11px;font-weight:700;letter-spacing:.08em;color:#001A70;text-transform:uppercase;">Conexões</span>
          <h5 style="font-weight:700;font-size:16px;margin:8px 0 6px;">Rede de especialistas</h5>
          <p style="font-size:13px;color:#6B7280;line-height:1.5;">Autores, empresas e instituições.</p>
        </div>
      </div>
    </div>
  </section>

  <section style="margin-left:52px;padding:96px 0;border-bottom:1px solid #ECEEF2;">
    <div style="max-width:1360px;margin:0 auto;padding:0 48px;">
      <div ref="{{ registerReveal }}" style="{{ revealStyle }}display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:44px;flex-wrap:wrap;">
        <div>
          <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>Trilhas</span>
          <h2 style="font-weight:800;font-size:clamp(26px,3vw,38px);margin-top:14px;max-width:16ch;letter-spacing:-0.01em;color:#001A70;">O que você quer construir?</h2>
        </div>
        <p style="max-width:38ch;color:#6B7280;font-size:15px;line-height:1.6;text-align:right;">Escolha um caminho — o ecossistema InfoBranding se organiza a partir do que você busca.</p>
      </div>

      <div ref="{{ registerReveal }}" style="{{ revealStyle }}border-top:1px solid #ECEEF2;">
        <sc-for list="{{ intents }}" as="it" hint-placeholder-count="5">
          <a href="#" style="display:grid;grid-template-columns:60px 1fr 1.6fr 44px;align-items:center;gap:24px;padding:24px 0;border-bottom:1px solid #ECEEF2;" style-hover="background:#F7F8FA;">
            <span style="font-size:12px;font-weight:700;color:#9BA2AD;">{{ it.n }}</span>
            <h4 style="font-weight:700;font-size:20px;letter-spacing:-0.01em;">Quero <span style="color:#001A70;">{{ it.verb }}</span></h4>
            <p style="color:#6B7280;font-size:14px;">{{ it.desc }}</p>
            <span style="justify-self:end;color:#001A70;">→</span>
          </a>
        </sc-for>
      </div>
    </div>
  </section>

  <section style="margin-left:52px;padding:96px 0;border-bottom:1px solid #ECEEF2;background:#212429;color:#FFFFFF;">
    <div style="max-width:1360px;margin:0 auto;padding:0 48px;">
      <div ref="{{ registerReveal }}" style="{{ revealStyle }}display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:56px;flex-wrap:wrap;">
        <div>
          <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>Percurso</span>
          <h2 style="font-weight:800;font-size:clamp(26px,3vw,38px);margin-top:14px;max-width:16ch;letter-spacing:-0.01em;color:#FFFFFF;">Do conhecimento à prática</h2>
        </div>
        <p style="max-width:38ch;color:#9BA2AD;font-size:15px;line-height:1.6;text-align:right;">Um percurso real, do primeiro contato com um conceito até a construção de um projeto.</p>
      </div>

      <div ref="{{ registerReveal }}" style="{{ revealStyle }}display:grid;grid-template-columns:repeat(3,1fr);gap:32px;position:relative;">
        <div style="position:absolute;top:20px;left:calc(100%/6);right:calc(100%/6);height:1px;background:rgba(255,255,255,.16);"></div>
        <div style="position:relative;">
          <div style="width:40px;height:40px;border-radius:50%;background:#001A70;color:#FFFFFF;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;position:relative;z-index:2;">1</div>
          <span style="font-size:11px;font-weight:700;letter-spacing:.08em;color:#00ADBB;text-transform:uppercase;margin-top:18px;display:block;">Aprender</span>
          <h4 style="color:#FFFFFF;font-weight:700;font-size:20px;margin:10px 0 10px;letter-spacing:-0.01em;">Artigos, conceitos e pesquisas</h4>
          <p style="color:#9BA2AD;font-size:14px;line-height:1.6;">A base teórica para entender como as marcas se constroem e se sustentam ao longo do tempo.</p>
        </div>
        <div style="position:relative;">
          <div style="width:40px;height:40px;border-radius:50%;background:#001A70;color:#FFFFFF;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;position:relative;z-index:2;">2</div>
          <span style="font-size:11px;font-weight:700;letter-spacing:.08em;color:#00ADBB;text-transform:uppercase;margin-top:18px;display:block;">Experimentar</span>
          <h4 style="color:#FFFFFF;font-weight:700;font-size:20px;margin:10px 0 10px;letter-spacing:-0.01em;">Cursos, workshops e ferramentas</h4>
          <p style="color:#9BA2AD;font-size:14px;line-height:1.6;">Aplicação prática guiada por quem constrói marcas todos os dias.</p>
        </div>
        <div style="position:relative;">
          <div style="width:40px;height:40px;border-radius:50%;background:#001A70;color:#FFFFFF;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;position:relative;z-index:2;">3</div>
          <span style="font-size:11px;font-weight:700;letter-spacing:.08em;color:#00ADBB;text-transform:uppercase;margin-top:18px;display:block;">Construir</span>
          <h4 style="color:#FFFFFF;font-weight:700;font-size:20px;margin:10px 0 10px;letter-spacing:-0.01em;">Projetos, livros, eventos e experiências</h4>
          <p style="color:#9BA2AD;font-size:14px;line-height:1.6;">O conhecimento vira produção real — dentro e fora do ecossistema InfoBranding.</p>
        </div>
      </div>
    </div>
  </section>

  <section id="participacao" ref="{{ registerSection_participacao }}" style="margin-left:52px;padding:104px 0;text-align:center;border-bottom:1px solid #ECEEF2;">
    <div style="max-width:1360px;margin:0 auto;padding:0 48px;">
      <span style="font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#00ADBB;display:flex;align-items:center;gap:10px;justify-content:center;"><span style="width:22px;height:1px;background:#00ADBB;display:inline-block;"></span>06 · Participação</span>
      <h2 style="font-weight:800;font-size:clamp(28px,3.6vw,42px);max-width:18ch;margin:18px auto 14px;letter-spacing:-0.02em;color:#001A70;">O Radar IB na sua caixa de entrada</h2>
      <p style="color:#6B7280;max-width:48ch;margin:0 auto 36px;font-size:16px;">Uma curadoria de ideias, tendências, pesquisas e movimentos que estão transformando o mundo das marcas.</p>
      <form style="display:flex;justify-content:center;gap:0;max-width:460px;margin:0 auto;border:1px solid #D3D7DE;border-radius:999px;overflow:hidden;">
        <input type="email" placeholder="seu@email.com" aria-label="E-mail" style="flex:1;border:none;background:transparent;padding:15px 16px 15px 24px;font-family:inherit;font-size:14.5px;color:#212429;">
        <button type="submit" style="border:none;background:linear-gradient(90deg,#001A70,#00ADBB);color:#FFFFFF;padding:0 26px;font-size:14px;font-weight:700;" style-hover="filter:brightness(1.08);">Quero receber</button>
      </form>
      <p style="margin-top:16px;font-size:12px;color:#9BA2AD;">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:1.2fr repeat(4,1fr);gap:32px;padding-bottom:48px;border-bottom:1px solid #ECEEF2;">
        <div>
          <a href="#top" style="display:flex;align-items:center;margin-bottom:14px;"><img src="./assets/infobranding-logo.png" alt="InfoBranding" style="height:34px;width:auto;display:block;"></a>
          <p style="font-size:13px;color:#9BA2AD;max-width:28ch;line-height:1.6;">O ecossistema de conhecimento sobre Branding que conecta teoria, prática e mercado.</p>
        </div>
        <div>
          <h5 style="font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9BA2AD;margin-bottom:16px;">Conhecimento</h5>
          <ul style="margin:0;padding:0;list-style:none;">
            <li style="margin-bottom:10px;"><a href="#conhecimento" style="font-size:14px;color:#6B7280;" style-hover="color:#001A70;">Descomplicando Branding</a></li>
            <li style="margin-bottom:10px;"><a href="#inteligencia" style="font-size:14px;color:#6B7280;" style-hover="color:#001A70;">Radar IB</a></li>
            <li style="margin-bottom:10px;"><a href="#" style="font-size:14px;color:#6B7280;" style-hover="color:#001A70;">Enciclopédia de Branding</a></li>
            <li style="margin-bottom:10px;"><a href="#" style="font-size:14px;color:#6B7280;" style-hover="color:#001A70;">Pesquisas</a></li>
          </ul>
        </div>
        <div>
          <h5 style="font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9BA2AD;margin-bottom:16px;">InfoBranding</h5>
          <ul style="margin:0;padding:0;list-style:none;">
            <li style="margin-bottom:10px;"><a href="#" style="font-size:14px;color:#6B7280;" style-hover="color:#001A70;">Sobre</a></li>
            <li style="margin-bottom:10px;"><a href="#pessoas" style="font-size:14px;color:#6B7280;" style-hover="color:#001A70;">Colaboradores</a></li>
            <li style="margin-bottom:10px;"><a href="#" style="font-size:14px;color:#6B7280;" style-hover="color:#001A70;">Publicações</a></li>
            <li style="margin-bottom:10px;"><a href="#" style="font-size:14px;color:#6B7280;" style-hover="color:#001A70;">Trabalhe conosco</a></li>
          </ul>
        </div>
        <div>
          <h5 style="font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9BA2AD;margin-bottom:16px;">Experiências</h5>
          <ul style="margin:0;padding:0;list-style:none;">
            <li style="margin-bottom:10px;"><a href="#" style="font-size:14px;color:#6B7280;" style-hover="color:#001A70;">Cursos &amp; workshops</a></li>
            <li style="margin-bottom:10px;"><a href="#" style="font-size:14px;color:#6B7280;" style-hover="color:#001A70;">Palestras &amp; talks</a></li>
            <li style="margin-bottom:10px;"><a href="#" style="font-size:14px;color:#6B7280;" style-hover="color:#001A70;">Eventos</a></li>
            <li style="margin-bottom:10px;"><a href="#" style="font-size:14px;color:#6B7280;" style-hover="color:#001A70;">Projetos especiais</a></li>
          </ul>
        </div>
        <div>
          <h5 style="font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9BA2AD;margin-bottom:16px;">Participe</h5>
          <ul style="margin:0;padding:0;list-style:none;">
            <li style="margin-bottom:10px;"><a href="#" style="font-size:14px;color:#6B7280;" style-hover="color:#001A70;">Torne-se colaborador</a></li>
            <li style="margin-bottom:10px;"><a href="#participacao" style="font-size:14px;color:#6B7280;" style-hover="color:#001A70;">Newsletter</a></li>
            <li style="margin-bottom:10px;"><a href="#" style="font-size:14px;color:#6B7280;" style-hover="color:#001A70;">Fale conosco</a></li>
            <li style="margin-bottom:10px;"><a href="#" style="font-size:14px;color:#6B7280;" style-hover="color:#001A70;">Anuncie</a></li>
          </ul>
        </div>
      </div>
      <div style="display:flex;justify-content:space-between;align-items:center;padding-top:28px;flex-wrap:wrap;gap:16px;">
        <p style="font-size:12.5px;color:#9BA2AD;">© 2026 InfoBranding. Todos os direitos reservados.</p>
        <div style="display:flex;gap:12px;">
          <a href="#" aria-label="Instagram" style="width:34px;height:34px;border:1px solid #ECEEF2;border-radius:999px;display:flex;align-items:center;justify-content:center;" style-hover="border-color:#001A70;background:#E6ECF7;"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="3" width="18" height="18" rx="5"></rect><circle cx="12" cy="12" r="4"></circle><circle cx="17.5" cy="6.5" r="1"></circle></svg></a>
          <a href="#" aria-label="LinkedIn" style="width:34px;height:34px;border:1px solid #ECEEF2;border-radius:999px;display:flex;align-items:center;justify-content:center;" style-hover="border-color:#001A70;background:#E6ECF7;"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="3" width="18" height="18" rx="3"></rect><line x1="7" y1="10" x2="7" y2="17"></line><circle cx="7" cy="7" r="1"></circle><path d="M11 17v-4a2 2 0 0 1 4 0v4"></path><line x1="11" y1="13" x2="11" y2="17"></line></svg></a>
          <a href="#" aria-label="YouTube" style="width:34px;height:34px;border:1px solid #ECEEF2;border-radius:999px;display:flex;align-items:center;justify-content:center;" style-hover="border-color:#001A70;background:#E6ECF7;"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="6" width="18" height="12" rx="3"></rect><polygon points="10,9.5 15,12 10,14.5" fill="currentColor" stroke="none"></polygon></svg></a>
        </div>
      </div>
    </div>
  </footer>

</div>

</x-dc>
<script type="text/x-dc" data-dc-script>
class Component extends DCLogic {
  state = { activeSection: 'atualidade' };

  tabDefs = [
    { id: 'atualidade', num: '01', label: 'Atualidade' },
    { id: 'conhecimento', num: '02', label: 'Conhecimento' },
    { id: 'inteligencia', num: '03', label: 'Inteligência' },
    { id: 'pessoas', num: '04', label: 'Pessoas' },
    { id: 'ecossistema', num: '05', label: 'Ecossistema' },
    { id: 'participacao', num: '06', label: 'Participação' }
  ];

  pointDefs = [
    { id: 'branding', left: 30, top: 20, hasDot: false, text: 'BRANDING', textStyle: 'font-weight:800;font-size:29px;color:#001A70;letter-spacing:-0.01em;white-space:nowrap;' },
    { id: 'marca', left: 44, top: 5, hasDot: true, text: 'marca', textStyle: 'font-weight:700;font-size:20px;color:#001A70;white-space:nowrap;' },
    { id: 'consumo', left: 66, top: 33, hasDot: true, text: 'consumo', textStyle: 'font-weight:700;font-size:24px;font-style:italic;color:#001A70;white-space:nowrap;' },
    { id: 'percepcao', left: 64, top: 72, hasDot: true, text: 'percepção', textStyle: 'font-weight:500;font-size:18px;color:#001A70;white-space:nowrap;' },
    { id: 'negocios', left: 14, top: 72, hasDot: true, text: 'negócios', textStyle: 'font-weight:800;font-size:26px;color:#001A70;white-space:nowrap;' },
    { id: 'cultura', left: 12, top: 33, hasDot: true, text: 'cultura', textStyle: 'font-weight:500;font-size:22px;color:#001A70;white-space:nowrap;' },
    { id: 'experiencia', left: 67.69, top: 7.73, hasDot: false, text: 'Experiência', textStyle: 'font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#00ADBB;background:#E6F8F9;padding:5px 10px;border-radius:999px;white-space:nowrap;' },
    { id: 'design', left: 78, top: 62, hasDot: false, text: 'Design', textStyle: 'font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#00ADBB;background:#E6F8F9;padding:5px 10px;border-radius:999px;white-space:nowrap;' },
    { id: 'posicionamento', left: 55.38, top: 89.77, hasDot: false, text: 'Posicionamento', textStyle: 'font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#00ADBB;background:#E6F8F9;padding:5px 10px;border-radius:999px;white-space:nowrap;' },
    { id: 'identidade', left: 2, top: 24, hasDot: false, text: 'Identidade', textStyle: 'font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#00ADBB;background:#E6F8F9;padding:5px 10px;border-radius:999px;white-space:nowrap;' },
    { id: 'estrategia', left: 0, top: 52, hasDot: false, text: 'Estratégia', textStyle: 'font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#00ADBB;background:#E6F8F9;padding:5px 10px;border-radius:999px;white-space:nowrap;' }
  ];

  lineDefs = [
    { id: 'l1', aId: 'center', bId: 'marca' },
    { id: 'l2', aId: 'center', bId: 'consumo' },
    { id: 'l3', aId: 'center', bId: 'percepcao' },
    { id: 'l4', aId: 'center', bId: 'negocios' },
    { id: 'l5', aId: 'center', bId: 'cultura' }
  ];

  pointEls = {};
  dotEls = {};
  lineEls = {};
  centerEl = null;
  cloudEl = null;
  cloudState = {};
  mouse = null;

  registerCloud = (el) => { this.cloudEl = el; };
  registerCenter = (el) => { this.centerEl = el; };
  registerPoint = (id) => (el) => { if (el) this.pointEls[id] = el; };
  registerDot = (id) => (el) => { if (el) this.dotEls[id] = el; };
  registerLine = (id) => (el) => { if (el) this.lineEls[id] = el; };
  onCloudMouseMove = (e) => {
    if (!this.cloudEl) return;
    const r = this.cloudEl.getBoundingClientRect();
    this.mouse = { x: e.clientX - r.left, y: e.clientY - r.top };
  };
  onCloudMouseLeave = () => { this.mouse = null; };

  tick = (ts) => {
    if (this.cloudEl) {
      const containerRect = this.cloudEl.getBoundingClientRect();
      const t = ts / 1000;
      this.pointDefs.forEach((def) => {
        const el = this.pointEls[def.id];
        if (!el) return;
        if (!this.cloudState[def.id]) {
          this.cloudState[def.id] = { curX: 0, curY: 0, phase: Math.random() * Math.PI * 2, freq: 0.35 + Math.random() * 0.5, ampX: 3 + Math.random() * 3, ampY: 3 + Math.random() * 4 };
        }
        const st = this.cloudState[def.id];
        let targetX = Math.sin(t * st.freq + st.phase) * st.ampX;
        let targetY = Math.cos(t * st.freq * 1.3 + st.phase) * st.ampY;
        if (this.mouse) {
          const rect = el.getBoundingClientRect();
          const cx = rect.left - containerRect.left + rect.width / 2;
          const cy = rect.top - containerRect.top + rect.height / 2;
          const dx = cx - this.mouse.x, dy = cy - this.mouse.y;
          const dist = Math.hypot(dx, dy) || 1;
          const radius = 150;
          if (dist < radius) {
            const force = 1 - dist / radius;
            targetX += (dx / dist) * force * 60;
            targetY += (dy / dist) * force * 60;
          }
        }
        st.curX += (targetX - st.curX) * 0.16;
        st.curY += (targetY - st.curY) * 0.16;
        el.style.transform = 'translate(' + st.curX.toFixed(2) + 'px,' + st.curY.toFixed(2) + 'px)';
      });
      const getCenter = (id) => {
        const el = id === 'center' ? this.centerEl : (this.dotEls[id] || this.pointEls[id]);
        if (!el) return null;
        const r = el.getBoundingClientRect();
        const scale = 1.1;
        return { x: (r.left - containerRect.left + r.width / 2) / scale, y: (r.top - containerRect.top + r.height / 2) / scale };
      };
      this.lineDefs.forEach((ln) => {
        const lineEl = this.lineEls[ln.id];
        const a = getCenter(ln.aId), b = getCenter(ln.bId);
        if (!lineEl || !a || !b) return;
        lineEl.setAttribute('x1', a.x); lineEl.setAttribute('y1', a.y);
        lineEl.setAttribute('x2', b.x); lineEl.setAttribute('y2', b.y);
      });
    }
  };

  dcTitles = [
    ['O que é', 'Branding?'], ['Brand', 'Equity'], ['Brand', 'Identity'], ['Brand', 'Positioning'], ['Brand', 'Purpose'],
    ['Brand', 'Awareness'], ['Brand', 'Architecture'], ['Brand', 'Experience'], ['Brand', 'Strategy'], ['Brand', 'Management']
  ];

  dcIconFiles = [
    'ico-o-que-e.webp', 'ico-equity.webp', 'ico-identity.webp', 'ico-brand-positioning.webp', 'ico-purpose.webp',
    'ico-awareness.webp', 'ico-architecture.webp', 'ico-experience.webp', 'ico-strategy.webp', 'ico-managemente.webp'
  ];

  dcIconPaths = [
    [['circle', { cx: 12, cy: 12, r: 9 }], ['path', { d: 'M9.1 9a2.9 2.9 0 0 1 5.7 1c0 1.8-2.4 2-2.4 3.7' }], ['line', { x1: 12, y1: 17, x2: 12.01, y2: 17 }]],
    [['path', { d: 'M6 3h12l3 5-9 13L3 8z' }], ['path', { d: 'M3 8h18' }], ['path', { d: 'M9 3l3 5 3-5' }], ['path', { d: 'M12 8l-2.5 10L12 21l2.5-3L12 8z' }]],
    [['path', { d: 'M12 3a5 5 0 0 1 5 5c0 4-2 6-2 9' }], ['path', { d: 'M9 8a3 3 0 0 1 6 0c0 4-2.5 5.5-2.5 8.5' }], ['path', { d: 'M6 10a6 6 0 0 0 3 8' }], ['path', { d: 'M15 11c0 3-1.5 5-1.5 7' }], ['line', { x1: 12, y1: 21, x2: 12, y2: 21.01 }]],
    [['circle', { cx: 12, cy: 12, r: 9 }], ['circle', { cx: 12, cy: 12, r: 5 }], ['circle', { cx: 12, cy: 12, r: 1 }]],
    [['path', { d: 'M12 3l2.6 6.2L21 10l-5 4.3L17.4 21 12 17.3 6.6 21 8 14.3 3 10l6.4-.8z' }]],
    [['path', { d: 'M4 10v4h3l5 4V6l-5 4H4z' }], ['path', { d: 'M16 9a4 4 0 0 1 0 6' }], ['path', { d: 'M19 6a8 8 0 0 1 0 12' }]],
    [['path', { d: 'M12 3l9 5-9 5-9-5z' }], ['path', { d: 'M3 13l9 5 9-5' }], ['path', { d: 'M3 18l9 5 9-5' }]],
    [['circle', { cx: 12, cy: 12, r: 9 }], ['path', { d: 'M8 14s1.5 2 4 2 4-2 4-2' }], ['line', { x1: 9, y1: 9, x2: 9.01, y2: 9 }], ['line', { x1: 15, y1: 9, x2: 15.01, y2: 9 }]],
    [['path', { d: 'M19 21V10a7 7 0 0 0-14 0v11' }], ['path', { d: 'M4 15h5' }], ['path', { d: 'M15 15h5' }], ['circle', { cx: 12, cy: 6, r: 1.5 }]],
    [['line', { x1: 4, y1: 20, x2: 20, y2: 20 }], ['rect', { x: 6, y: 13, width: 3, height: 7 }], ['rect', { x: 11, y: 9, width: 3, height: 11 }], ['rect', { x: 16, y: 5, width: 3, height: 15 }]]
  ];

  makeIcon(shapes) {
    return React.createElement('svg', { width: 22, height: 22, viewBox: '0 0 24 24', fill: 'none', stroke: '#001A70', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' },
      shapes.map((s, i) => React.createElement(s[0], { key: i, ...s[1] })));
  }

  stripDefs = [
    ['Tiago Bruno', 'Naming'], ['Carla Nunes', 'Pesquisa'], ['Diego Ramos', 'Arquitetura'],
    ['Bianca Freitas', 'Cultura'], ['Otávio Lima', 'Experiência'], ['Renata Sales', 'Posicionamento']
  ];

  intentDefs = [
    ['aprender', 'cursos, workshops e conteúdos que constroem base de conhecimento.'],
    ['publicar', 'livros e projetos editoriais que colocam sua voz no ecossistema.'],
    ['inspirar', 'palestras e talks para compartilhar sua visão sobre marcas.'],
    ['conectar', 'eventos e encontros com quem também pensa Branding.'],
    ['desenvolver', 'projetos e parcerias construídos junto ao InfoBranding.']
  ];

  sectionRefs = {};
  revealRefs = [];

  registerSection = (id) => (el) => { if (el) this.sectionRefs[id] = el; };
  registerReveal = (el) => {
    if (el && !this.revealRefs.includes(el)) {
      el.style.opacity = '0';
      el.style.transform = 'translateY(18px)';
      el.style.transition = 'opacity .6s ease, transform .6s ease';
      this.revealRefs.push(el);
      if (this.revealObserver) this.revealObserver.observe(el);
    }
  };

  componentDidMount() {
    this.chapterObserver = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) this.setState({ activeSection: entry.target.id });
      });
    }, { threshold: 0.3, rootMargin: '-10% 0px -60% 0px' });
    Object.values(this.sectionRefs).forEach((el) => this.chapterObserver.observe(el));

    this.revealObserver = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.style.opacity = '1';
          entry.target.style.transform = 'translateY(0)';
          this.revealObserver.unobserve(entry.target);
        }
      });
    }, { threshold: 0.12 });
    this.revealRefs.forEach((el) => this.revealObserver.observe(el));

    this.rafId = setInterval(() => this.tick(performance.now()), 16);
  }

  componentWillUnmount() {
    if (this.chapterObserver) this.chapterObserver.disconnect();
    if (this.revealObserver) this.revealObserver.disconnect();
    if (this.rafId) clearInterval(this.rafId);
  }

  renderVals() {
    const active = this.state.activeSection;
    return {
      registerSection_atualidade: this.registerSection('atualidade'),
      registerSection_conhecimento: this.registerSection('conhecimento'),
      registerSection_inteligencia: this.registerSection('inteligencia'),
      registerSection_pessoas: this.registerSection('pessoas'),
      registerSection_ecossistema: this.registerSection('ecossistema'),
      registerSection_participacao: this.registerSection('participacao'),
      registerReveal: this.registerReveal,
      tabs: this.tabDefs.map((t) => {
        const isActive = t.id === active;
        return {
          id: t.id, num: t.num, label: t.label, href: '#' + t.id,
          style: {
            writingMode: 'vertical-rl', transform: 'rotate(180deg)', fontSize: '10.5px', fontWeight: 700,
            letterSpacing: '.1em', textTransform: 'uppercase',
            color: isActive ? '#212429' : '#9BA2AD', padding: '13px 0',
            borderLeft: '2px solid ' + (isActive ? '#00ADBB' : 'transparent'),
            width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '8px',
            transition: 'color .3s ease, border-color .3s ease'
          },
          numStyle: { color: isActive ? '#00ADBB' : '#9BA2AD', fontSize: '9.5px', fontWeight: 700, transition: 'color .3s ease' }
        };
      }),
      registerCloud: this.registerCloud,
      registerCenter: this.registerCenter,
      onCloudMouseMove: this.onCloudMouseMove,
      onCloudMouseLeave: this.onCloudMouseLeave,
      cloudPoints: this.pointDefs.map((def) => ({
        text: def.text,
        hasDot: def.hasDot,
        ref: this.registerPoint(def.id),
        dotRef: this.registerDot(def.id),
        textStyle: def.textStyle,
        wrapStyle: 'position:absolute;left:' + def.left + '%;top:' + def.top + '%;display:flex;flex-direction:column;align-items:center;'
      })),
      cloudLines: this.lineDefs.map((ln) => ({ ref: this.registerLine(ln.id) })),
      dcItems: this.dcTitles.map(([l1, l2], i) => ({ n: String(i + 1).padStart(2, '0'), titleLine1: l1, titleLine2: l2, iconSrc: './assets/' + this.dcIconFiles[i] })),
      stripItems: this.stripDefs.map(([name, area], i) => ({
        name, area,
        photo: './assets/autor' + (i + 1) + '.webp'
      })),
      intents: this.intentDefs.map(([verb, desc], i) => ({ n: String(i + 1).padStart(2, '0'), verb, desc }))
    };
  }
}

</script>
</body>
</html>
