<!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:0 20px;display:flex;align-items:center;justify-content:space-between;height:76px;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: hidden; width: 730px; height: 26px; justify-content: space-between">
        <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 12px; 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" style-hover="filter:brightness(1.08);">Newsletter</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:#001A70;display:flex;align-items:center;gap:10px;"><span style="width:22px;height:1px;background:#001A70;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 #D3D7DE; border-radius: 999px; background: #FFFFFF; color: #212429; border-color: #00ADBB" style-hover="border-color:#001A70;color:#001A70;">Conheça o InfoBranding</a>
        </div>
      </div>

      <div ref="{{ registerCloud }}" onMouseMove="{{ onCloudMouseMove }}" onMouseLeave="{{ onCloudMouseLeave }}" aria-hidden="true" style="position:relative;width:100%;height:440px;">
        <svg style="position:absolute;inset:0;width:100%;height:100%;pointer-events:none;">
          <sc-for list="{{ cloudLines }}" as="ln" hint-placeholder-count="7">
            <line ref="{{ ln.ref }}" x1="0" y1="0" x2="0" y2="0" stroke="#D3D7DE" stroke-width="1"></line>
          </sc-for>
        </svg>
        <sc-for list="{{ cloudPoints }}" as="p" hint-placeholder-count="13">
          <span ref="{{ p.ref }}" style="{{ p.style }}">{{ p.text }}</span>
        </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:flex-end;gap:24px;margin-bottom:44px;flex-wrap:wrap;">
        <div>
          <span style="font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#001A70;display:flex;align-items:center;gap:10px;"><span style="width:22px;height:1px;background:#001A70;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;">Agora no InfoBranding</h2>
        </div>
        <p style="max-width:38ch;color:#6B7280;font-size:15px;line-height:1.6;text-align:right;">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.4fr 1fr 1fr;grid-template-rows:auto auto;gap:16px;">
        <article style="grid-row:span 2;background:#FFFFFF;border:1px solid #ECEEF2;border-radius:2px;padding:28px;display:flex;flex-direction:column;gap:16px;" style-hover="box-shadow:0 8px 24px rgba(33,36,41,.08);">
          <span style="font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#001A70;background:#E6ECF7;padding:4px 10px;border-radius:999px;align-self:flex-start;">Última notícia</span>
          <div style="width:100%;aspect-ratio:16/10;background:repeating-linear-gradient(135deg,#F7F8FA,#F7F8FA 10px,#ECEEF2 10px,#ECEEF2 20px);border-radius:2px;position:relative;overflow:hidden;"></div>
          <h3 style="font-weight:700;font-size:24px;line-height:1.25;margin-top:auto;letter-spacing:-0.01em;">Rebranding da Natura reacende debate sobre identidade regional em multinacionais</h3>
          <div style="display:flex;justify-content:space-between;font-size:12px;font-weight:500;color:#9BA2AD;margin-top:auto;"><span>Mercado</span><span>18 jul 2026</span></div>
        </article>
        <article style="background:#FFFFFF;border:1px solid #ECEEF2;border-radius:2px;padding:28px;display:flex;flex-direction:column;gap:14px;" style-hover="box-shadow:0 8px 24px rgba(33,36,41,.08);">
          <span style="font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#001A70;background:#E6ECF7;padding:4px 10px;border-radius:999px;align-self:flex-start;">Último case</span>
          <div style="width:100%;aspect-ratio:16/10;background:repeating-linear-gradient(135deg,#F7F8FA,#F7F8FA 10px,#ECEEF2 10px,#ECEEF2 20px);border-radius:2px;"></div>
          <h3 style="font-weight:700;font-size:17px;line-height:1.3;">Como a Nubank construiu percepção de marca sem depender de agência</h3>
          <p style="color:#6B7280;font-size:14px;line-height:1.55;">Brand equity, cultura interna e consistência como vantagem competitiva.</p>
        </article>
        <article style="background:#FFFFFF;border:1px solid #ECEEF2;border-radius:2px;padding:28px;display:flex;flex-direction:column;gap:14px;" style-hover="box-shadow:0 8px 24px rgba(33,36,41,.08);">
          <span style="font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#001A70;background:#E6ECF7;padding:4px 10px;border-radius:999px;align-self:flex-start;">Análise</span>
          <div style="width:100%;aspect-ratio:16/10;background:repeating-linear-gradient(135deg,#F7F8FA,#F7F8FA 10px,#ECEEF2 10px,#ECEEF2 20px);border-radius:2px;"></div>
          <h3 style="font-weight:700;font-size:17px;line-height:1.3;">O que os rebrandings de 2026 revelam sobre o consumidor pós-digital</h3>
          <p style="color:#6B7280;font-size:14px;line-height:1.55;">Leitura crítica das tendências de posicionamento do primeiro semestre.</p>
        </article>
        <article style="background:#FFFFFF;border:1px solid #ECEEF2;border-radius:2px;padding:28px;display:flex;flex-direction:column;gap:14px;" style-hover="box-shadow:0 8px 24px rgba(33,36,41,.08);">
          <span style="font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#001A70;background:#E6ECF7;padding:4px 10px;border-radius:999px;align-self:flex-start;">Evento</span>
          <div style="width:100%;aspect-ratio:16/10;background:repeating-linear-gradient(135deg,#F7F8FA,#F7F8FA 10px,#ECEEF2 10px,#ECEEF2 20px);border-radius:2px;"></div>
          <h3 style="font-weight:700;font-size:17px;line-height:1.3;">Fórum InfoBranding 2026: Marcas em tempos de incerteza</h3>
          <p style="color:#6B7280;font-size:14px;line-height:1.55;">São Paulo, 12 e 13 de setembro — inscrições abertas.</p>
        </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 #D3D7DE;border-radius:999px;background:transparent;color:#212429;" style-hover="border-color:#001A70;color:#001A70;background:#E6ECF7;">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:flex-end;gap:24px;margin-bottom:44px;flex-wrap:wrap;">
        <div>
          <span style="font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#001A70;display:flex;align-items:center;gap:10px;"><span style="width:22px;height:1px;background:#001A70;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;">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:#F7F8FA;border:1px solid #ECEEF2;border-radius:2px;padding:20px 16px 18px;min-height:150px;display:flex;flex-direction:column;justify-content:space-between;" style-hover="border-color:#001A70;background:#E6ECF7;">
            <span style="font-size:11px;font-weight:700;color:#9BA2AD;">{{ item.n }}</span>
            <h4 style="font-weight:700;font-size:15px;line-height:1.3;margin-top:16px;">{{ item.title }}</h4>
            <span style="align-self:flex-end;margin-top:14px;color:#001A70;">→</span>
          </a>
        </sc-for>
      </div>

      <div ref="{{ registerReveal }}" style="{{ revealStyle }}margin-top:52px;border:1px dashed #D3D7DE;border-radius:2px;padding:26px 30px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;">
        <div style="max-width:52ch;">
          <span style="font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9BA2AD;margin-bottom:8px;display:block;">Em construção</span>
          <h4 style="font-weight:700;font-size:18px;">A Enciclopédia de Branding do InfoBranding</h4>
          <p style="color:#6B7280;font-size:14px;margin-top:6px;">Conceitos, autores, modelos, artigos, pesquisas, livros, cases e ferramentas — organizados em um único corpo de conhecimento.</p>
        </div>
        <a href="#" style="display:inline-flex;align-items:center;gap:10px;padding:13px 24px;font-size:14px;font-weight:700;border:1px solid #D3D7DE;border-radius:999px;background:transparent;color:#212429;" style-hover="border-color:#001A70;color:#001A70;background:#E6ECF7;">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:flex-end;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:1px solid rgba(255,255,255,.3);border-radius:999px;color:#FFFFFF;" style-hover="background:#00ADBB;border-color:#00ADBB;color:#212429;">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:flex-end;gap:24px;margin-bottom:44px;flex-wrap:wrap;">
        <div>
          <span style="font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#001A70;display:flex;align-items:center;gap:10px;"><span style="width:22px;height:1px;background:#001A70;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;">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:2px;overflow:hidden;background:#FFFFFF;">
          <div style="aspect-ratio:4/3;background:repeating-linear-gradient(150deg,#F7F8FA,#F7F8FA 10px,#ECEEF2 10px,#ECEEF2 20px);"></div>
          <div style="padding:22px;">
            <span style="font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#001A70;">Estratégia de marca</span>
            <h4 style="font-weight:700;font-size:18px;margin:8px 0 12px;">Marina Costa</h4>
            <div style="display:flex;gap:8px;flex-wrap:wrap;">
              <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>
          </div>
        </article>
        <article style="border:1px solid #ECEEF2;border-radius:2px;overflow:hidden;background:#FFFFFF;">
          <div style="aspect-ratio:4/3;background:repeating-linear-gradient(150deg,#F7F8FA,#F7F8FA 10px,#ECEEF2 10px,#ECEEF2 20px);"></div>
          <div style="padding:22px;">
            <span style="font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#001A70;">Design &amp; identidade</span>
            <h4 style="font-weight:700;font-size:18px;margin:8px 0 12px;">Rafael Andrade</h4>
            <div style="display:flex;gap:8px;flex-wrap:wrap;">
              <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>
          </div>
        </article>
        <article style="border:1px solid #ECEEF2;border-radius:2px;overflow:hidden;background:#FFFFFF;">
          <div style="aspect-ratio:4/3;background:repeating-linear-gradient(150deg,#F7F8FA,#F7F8FA 10px,#ECEEF2 10px,#ECEEF2 20px);"></div>
          <div style="padding:22px;">
            <span style="font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#001A70;">Comportamento do consumidor</span>
            <h4 style="font-weight:700;font-size:18px;margin:8px 0 12px;">Luiza Prado</h4>
            <div style="display:flex;gap:8px;flex-wrap:wrap;">
              <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>
          </div>
        </article>
      </div>

      <div ref="{{ registerReveal }}" style="{{ revealStyle }}margin-top:40px;padding-top:24px;border-top:1px solid #ECEEF2;display:flex;gap:0;overflow-x:auto;">
        <sc-for list="{{ stripItems }}" as="p" hint-placeholder-count="6">
          <div style="flex:0 0 auto;padding:0 24px;border-right:1px solid #ECEEF2;display:flex;flex-direction:column;gap:4px;">
            <strong style="font-size:14px;font-weight:700;">{{ p.name }}</strong>
            <span style="font-size:11px;font-weight:500;color:#9BA2AD;text-transform:uppercase;">{{ p.area }}</span>
          </div>
        </sc-for>
      </div>

      <div ref="{{ registerReveal }}" style="{{ revealStyle }}margin-top:52px;padding:36px 40px;background:#E6ECF7;border-radius:2px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;">
        <h3 style="font-weight:800;font-size:22px;max-width:20ch;letter-spacing:-0.01em;">Você também tem algo a compartilhar?</h3>
        <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);">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:flex-end;gap:24px;margin-bottom:44px;flex-wrap:wrap;">
        <div>
          <span style="font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#001A70;display:flex;align-items:center;gap:10px;"><span style="width:22px;height:1px;background:#001A70;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;">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:flex-end;gap:24px;margin-bottom:44px;flex-wrap:wrap;">
        <div>
          <span style="font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#001A70;display:flex;align-items:center;gap:10px;"><span style="width:22px;height:1px;background:#001A70;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;">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:#001A70;display:flex;align-items:center;gap:10px;justify-content:center;"><span style="width:22px;height:1px;background:#001A70;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;">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: 10, top: 5.9, text: 'BRANDING', style: { fontSize: '36px', fontWeight: 800, color: '#212429', letterSpacing: '-0.01em' } },
    { id: 'node1', left: 46, top: 26.1, dot: true },
    { id: 'estrategia', left: 74, top: 2, text: 'estratégia', style: { fontSize: '20px', fontWeight: 500, fontStyle: 'italic', color: '#001A70' } },
    { id: 'marca', left: 34, top: 20.5, text: 'marca', style: { fontSize: '24px', fontWeight: 500, color: '#212429' } },
    { id: 'experiencia', left: 66, top: 18.2, text: 'experiência', style: { fontSize: '11px', fontWeight: 700, letterSpacing: '.12em', textTransform: 'uppercase', color: '#9BA2AD' } },
    { id: 'node2', left: 30, top: 45.5, dot: true },
    { id: 'cultura', left: 4, top: 39.8, text: 'cultura', style: { fontSize: '27px', fontWeight: 500, color: '#212429' } },
    { id: 'node3', left: 52, top: 52.3, dot: true },
    { id: 'consumo', left: 35, top: 46.6, text: 'consumo', style: { fontSize: '29px', fontWeight: 500, fontStyle: 'italic', color: '#001A70' } },
    { id: 'design', left: 70, top: 56.8, text: 'design', style: { fontSize: '11px', fontWeight: 700, letterSpacing: '.12em', textTransform: 'uppercase', color: '#9BA2AD' } },
    { id: 'negocios', left: 12, top: 68.2, text: 'negócios', style: { fontSize: '31px', fontWeight: 800, color: '#212429' } },
    { id: 'percepcao', left: 60, top: 80.7, text: 'percepção', style: { fontSize: '21px', fontWeight: 500, color: '#212429' } },
    { id: 'posicionamento', left: 34, top: 87.5, text: 'posicionamento', style: { fontSize: '11px', fontWeight: 700, letterSpacing: '.12em', textTransform: 'uppercase', color: '#9BA2AD' } }
  ];

  lineDefs = [
    { id: 'l1', aId: 'branding', bId: 'node1' },
    { id: 'l2', aId: 'node1', bId: 'experiencia' },
    { id: 'l3', aId: 'node1', bId: 'node2' },
    { id: 'l4', aId: 'node2', bId: 'node3' },
    { id: 'l5', aId: 'node3', bId: 'design' },
    { id: 'l6', aId: 'node2', bId: 'negocios' },
    { id: 'l7', aId: 'node3', bId: 'posicionamento' }
  ];

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

  registerCloud = (el) => { this.cloudEl = el; };
  registerPoint = (id) => (el) => { if (el) this.pointEls[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.3 + Math.random() * 0.4, ampX: 4 + Math.random() * 5, ampY: 5 + Math.random() * 6 };
        }
        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 = 130;
          if (dist < radius) {
            const force = 1 - dist / radius;
            targetX += (dx / dist) * force * 46;
            targetY += (dy / dist) * force * 46;
          }
        }
        st.curX += (targetX - st.curX) * 0.09;
        st.curY += (targetY - st.curY) * 0.09;
        el.style.transform = 'translate(' + st.curX.toFixed(2) + 'px,' + st.curY.toFixed(2) + 'px)';
      });
      this.lineDefs.forEach((ln) => {
        const lineEl = this.lineEls[ln.id];
        const a = this.pointEls[ln.aId], b = this.pointEls[ln.bId];
        if (!lineEl || !a || !b) return;
        const ra = a.getBoundingClientRect(), rb = b.getBoundingClientRect();
        const ax = ra.left - containerRect.left + ra.width / 2, ay = ra.top - containerRect.top + ra.height / 2;
        const bx = rb.left - containerRect.left + rb.width / 2, by = rb.top - containerRect.top + rb.height / 2;
        lineEl.setAttribute('x1', ax); lineEl.setAttribute('y1', ay);
        lineEl.setAttribute('x2', bx); lineEl.setAttribute('y2', by);
      });
    }
    this.rafId = requestAnimationFrame(this.tick);
  };

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

  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 = requestAnimationFrame(this.tick);
  }

  componentWillUnmount() {
    if (this.chapterObserver) this.chapterObserver.disconnect();
    if (this.revealObserver) this.revealObserver.disconnect();
    if (this.rafId) cancelAnimationFrame(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 ? '#001A70' : 'transparent'),
            width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '8px',
            transition: 'color .3s ease, border-color .3s ease'
          },
          numStyle: { color: isActive ? '#001A70' : '#9BA2AD', fontSize: '9.5px', fontWeight: 700, transition: 'color .3s ease' }
        };
      }),
      registerCloud: this.registerCloud,
      onCloudMouseMove: this.onCloudMouseMove,
      onCloudMouseLeave: this.onCloudMouseLeave,
      cloudPoints: this.pointDefs.map((def) => ({
        text: def.text || '',
        ref: this.registerPoint(def.id),
        style: def.dot
          ? { position: 'absolute', left: def.left + '%', top: def.top + '%', width: '7px', height: '7px', borderRadius: '50%', background: '#001A70' }
          : Object.assign({ position: 'absolute', left: def.left + '%', top: def.top + '%', whiteSpace: 'nowrap', userSelect: 'none' }, def.style)
      })),
      cloudLines: this.lineDefs.map((ln) => ({ ref: this.registerLine(ln.id) })),
      dcItems: this.dcTitles.map((title, i) => ({ n: String(i + 1).padStart(2, '0'), title })),
      stripItems: this.stripDefs.map(([name, area]) => ({ name, area })),
      intents: this.intentDefs.map(([verb, desc], i) => ({ n: String(i + 1).padStart(2, '0'), verb, desc }))
    };
  }
}

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