<!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 heroZoom{from{transform:scale(1.02);}to{transform:scale(1.13);}}
@keyframes heroTextIn{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:translateY(0);}}
@keyframes heroTextInB{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:translateY(0);}}
@keyframes heroProgA{from{transform:scaleX(0);}to{transform:scaleX(1);}}
@keyframes heroProgB{from{transform:scaleX(0);}to{transform:scaleX(1);}}
@keyframes radarPulse{0%,100%{box-shadow:0 0 34px 4px rgba(0,173,187,.24),inset 0 0 34px 2px rgba(0,173,187,.14);}50%{box-shadow:0 0 52px 8px rgba(0,173,187,.42),inset 0 0 44px 4px rgba(0,173,187,.22);}}
@keyframes radarPulseOld{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 radarCardIn{from{opacity:0;transform:translateX(-50%) translateY(-10px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}
@keyframes radarNodePulse{0%,100%{filter:brightness(1);}50%{filter:brightness(1.5);}}
@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;align-items:center;gap:34px;flex-wrap:nowrap;min-width:0;">
        <div onMouseEnter="{{ openUniverso }}" onMouseLeave="{{ closeUniverso }}" style="position:relative;">
          <a href="#ecossistema" style="display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#001A70;white-space:nowrap;" style-hover="color:#00ADBB;">Universo IB
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#00ADBB" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" style="flex:none;"><polyline points="5 9 12 16 19 9"></polyline></svg>
          </a>
          <div style="{{ universoStyle }}">
            <a href="#pessoas" style="display:block;padding:11px 18px;font-size:13.5px;color:#5C6470;white-space:nowrap;" style-hover="color:#001A70;background:#F4F7FB;">Quem somos</a>
            <a href="#ecossistema" style="display:block;padding:11px 18px;font-size:13.5px;color:#5C6470;white-space:nowrap;" style-hover="color:#001A70;background:#F4F7FB;">Produtos</a>
            <a href="#participacao" style="display:block;padding:11px 18px;font-size:13.5px;color:#5C6470;white-space:nowrap;" style-hover="color:#001A70;background:#F4F7FB;">Trabalhe conosco</a>
          </div>
        </div>
        <a href="#atualidade" style="font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#001A70;white-space:nowrap;" style-hover="color:#00ADBB;">Portal</a>
        <a href="#conhecimento" style="font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#001A70;white-space:nowrap;" style-hover="color:#00ADBB;">BDM</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 style="position:relative;margin-left:52px;height:min(78vh,660px);min-height:520px;overflow:hidden;background:#010b17;">
    <sc-for list="{{ heroSlides }}" as="slide" hint-placeholder-count="3">
      <div style="{{ slide.layerStyle }}">
        <img src="{{ slide.image }}" alt="" style="{{ slide.imgStyle }}" />
      </div>
    </sc-for>
    <div style="position:absolute;inset:0;z-index:2;background:linear-gradient(100deg,rgba(1,11,23,.78) 0%,rgba(1,11,23,.52) 40%,rgba(1,11,23,.1) 74%,rgba(1,11,23,.28) 100%);pointer-events:none;"></div>
    <div style="position:absolute;inset:0;z-index:2;background:linear-gradient(0deg,rgba(1,11,23,.72) 0%,rgba(1,11,23,0) 52%);pointer-events:none;"></div>

    <div style="position:relative;z-index:3;height:100%;max-width:1360px;margin:0 auto;padding:0 48px;display:flex;flex-direction:column;justify-content:space-between;">
      <div style="{{ heroTextStyle }}">
        <div style="display:flex;align-items:center;gap:14px;">
          <span style="font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#FFFFFF;background:#00ADBB;padding:7px 16px;border-radius:100px;">{{ heroActive.tag }}</span>
        </div>
        <h1 style="margin:20px 0 0;font-weight:800;font-size:clamp(30px,3.9vw,54px);line-height:1.1;letter-spacing:-0.025em;color:#FFFFFF;max-width:19ch;text-wrap:pretty;">{{ heroActive.title }}</h1>
        <div style="display:flex;align-items:center;gap:12px;margin-top:26px;">
          <img src="{{ heroActive.avatar }}" alt="" style="width:38px;height:38px;border-radius:50%;object-fit:cover;border:1.5px solid rgba(255,255,255,.35);" />
          <span style="font-size:13.5px;font-weight:700;color:#FFFFFF;">{{ heroActive.author }}</span>
          <span style="width:4px;height:4px;border-radius:50%;background:#00ADBB;"></span>
          <span style="font-size:13px;color:rgba(255,255,255,.7);">{{ heroActive.date }}</span>
        </div>
      </div>

      <div style="overflow:hidden;padding-bottom:30px;">
        <div style="{{ heroTrackStyle }}">
        <sc-for list="{{ heroThumbs }}" as="slide" hint-placeholder-count="6">
          <button type="button" onClick="{{ slide.select }}" style="{{ slide.thumbStyle }}">
            <span style="{{ slide.progressTrackStyle }}"><span style="{{ slide.progressBarStyle }}"></span></span>
            <img src="{{ slide.image }}" alt="" style="width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none;" />
            <span style="min-width:0;text-align:left;">
              <span style="{{ slide.thumbTitleStyle }}">{{ slide.title }}</span>
              <span style="display:block;margin-top:7px;font-size:11.5px;color:rgba(255,255,255,.6);">{{ slide.date }}</span>
            </span>
          </button>
        </sc-for>
        </div>
      </div>
    </div>
  </section>

  <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="position:relative;margin-left:52px;padding:96px 0;background:linear-gradient(160deg,#010b17 0%,#04122b 62%,#061a3d 100%);color:#FFFFFF;overflow:hidden;">
    <div style="position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);background-size:64px 64px;pointer-events:none;"></div>
    <div style="position:relative;z-index:2;max-width:1360px;margin:0 auto;padding:0 48px;">
      <div 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 }}" onClick="{{ closeRadar }}" style="{{ revealStyle }}position:relative;height:660px;display:flex;align-items:center;justify-content:center;margin-top:20px;">
        <div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:517px;height:517px;border-radius:50%;overflow:hidden;pointer-events:none;">
          <div style="position:absolute;inset:0;background:conic-gradient(from 0deg, rgba(0,173,187,.16), rgba(0,173,187,.05) 14%, transparent 34%, transparent 100%);animation:radarSpin 6s linear infinite;"></div>
        </div>
        <div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:517px;height:517px;border:1px solid rgba(255,255,255,.1);border-radius:50%;pointer-events:none;"></div>
        <div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:466px;height:466px;border:1px solid rgba(0,173,187,.16);border-radius:50%;pointer-events:none;"></div>
        <div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:363px;height:363px;border:1px solid rgba(255,255,255,.07);border-radius:50%;pointer-events:none;"></div>
        <div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:260px;height:260px;border:1px solid rgba(255,255,255,.05);border-radius:50%;pointer-events:none;"></div>

        <div style="width:167px;height:167px;border-radius:50%;background:#010b17;border:1.5px solid rgba(0,173,187,.7);box-shadow:0 0 34px 4px rgba(0,173,187,.28),inset 0 0 34px 2px rgba(0,173,187,.16);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;pointer-events:none;">
          <span style="font-size:10.5px;font-weight:700;letter-spacing:.26em;color:#00ADBB;text-transform:uppercase;">Radar</span>
          <strong style="font-size:36px;font-weight:800;margin-top:6px;color:#FFFFFF;letter-spacing:-0.01em;">IB</strong>
        </div>

        <sc-for list="{{ radarNodes }}" as="node" hint-placeholder-count="4">
          <div style="{{ node.wrapStyle }}" onClick="{{ node.onToggle }}">
            <div style="{{ node.dotStyle }}">
              <sc-if value="{{ node.isMarcas }}" hint-placeholder-val="{{ true }}">
                <svg width="23" height="23" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,.9)" stroke-width="1.6" stroke-linecap="round"><circle cx="12" cy="12" r="8"></circle><circle cx="12" cy="12" r="3"></circle><line x1="12" y1="1.5" x2="12" y2="4.5"></line><line x1="12" y1="19.5" x2="12" y2="22.5"></line><line x1="1.5" y1="12" x2="4.5" y2="12"></line><line x1="19.5" y1="12" x2="22.5" y2="12"></line></svg>
              </sc-if>
              <sc-if value="{{ node.isMercado }}" hint-placeholder-val="{{ false }}">
                <svg width="23" height="23" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,.9)" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 17 9 11 13 15 21 7"></polyline><polyline points="15 7 21 7 21 13"></polyline></svg>
              </sc-if>
              <sc-if value="{{ node.isConsumidor }}" hint-placeholder-val="{{ false }}">
                <svg width="23" height="23" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,.9)" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="8" r="3.2"></circle><path d="M3.5 19c0-3 2.5-5 5.5-5s5.5 2 5.5 5"></path><path d="M16 6.2a3 3 0 0 1 0 5.6"></path><path d="M17.5 14.4c1.9.7 3 2.4 3 4.6"></path></svg>
              </sc-if>
              <sc-if value="{{ node.isCultura }}" hint-placeholder-val="{{ false }}">
                <svg width="23" height="23" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,.9)" stroke-width="1.6" stroke-linecap="round"><circle cx="12" cy="12" r="8.5"></circle><ellipse cx="12" cy="12" rx="3.6" ry="8.5"></ellipse><line x1="3.5" y1="12" x2="20.5" y2="12"></line></svg>
              </sc-if>
            </div>
            <span style="{{ node.labelStyle }}"><span style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;font-weight:700;color:#00ADBB;">{{ node.num }}</span>{{ node.tag }}</span>
            <sc-if value="{{ node.cardOpen }}" hint-placeholder-val="{{ false }}">
              <div style="position:absolute;top:86px;left:50%;transform:translateX(-50%);width:264px;padding:20px 22px 22px;border:1px solid rgba(0,173,187,.4);border-radius:4px;background:rgba(4,17,31,.94);backdrop-filter:blur(10px);box-shadow:0 24px 60px rgba(0,0,0,.55);text-align:left;animation:radarCardIn .45s cubic-bezier(.2,.7,.3,1) both;">
                <span style="position:absolute;top:-24px;left:50%;transform:translateX(-50%);width:1px;height:24px;background:rgba(0,173,187,.5);display:block;"></span>
                <span style="font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#00ADBB;">{{ node.tag }}</span>
                <h4 style="color:#FFFFFF;font-weight:700;font-size:17px;margin:8px 0 8px;letter-spacing:-0.01em;">{{ node.title }}</h4>
                <p style="font-size:13px;color:#9BA2AD;line-height:1.6;margin:0;">{{ node.desc }}</p>
              </div>
            </sc-if>
          </div>
        </sc-for>

      </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:#f9fafd;">
    <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 }}position:relative;display:grid;grid-template-columns:1fr 220px 1fr;grid-template-rows:repeat(3,1fr);gap:16px;align-items:stretch;">
        <img src="./assets/eco-central.webp" alt="" style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:280px;height:auto;max-width:none;z-index:1;pointer-events:none;">

        <sc-for list="{{ ecoItems }}" as="it" hint-placeholder-count="6">
          <a href="#" style="grid-column:{{ it.col }};grid-row:{{ it.row }};position:relative;z-index:3;background:#FFFFFF;border-radius:12px;overflow:hidden;display:flex;align-items:stretch;box-shadow:0 1px 3px rgba(33,36,41,.06);" style-hover="box-shadow:0 10px 26px rgba(33,36,41,.10);">
            <div style="width:42%;flex-shrink:0;position:relative;">
              <img src="{{ it.img }}" alt="{{ it.title }}" style="width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0;">
            </div>
            <div style="flex:1;min-width:0;padding:22px 22px 20px;display:flex;flex-direction:column;">
              <span style="font-size:12px;font-weight:800;color:#00ADBB;">{{ it.n }}</span>
              <h5 style="font-weight:800;font-size:18px;margin:6px 0 2px;color:#001A70;letter-spacing:-0.01em;">{{ it.title }}</h5>
              <span style="font-size:13px;color:#6B7280;font-weight:500;">{{ it.subtitle }}</span>
              <span style="width:20px;height:1px;background:#ECEEF2;display:block;margin:12px 0;"></span>
              <p style="font-size:13px;color:#6B7280;line-height:1.5;margin:0;flex:1;">{{ it.desc }}</p>
              <span style="margin-top:10px;color:#001A70;font-size:14px;">→</span>
            </div>
          </a>
        </sc-for>
      </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 }}display:flex;flex-direction:column;gap:18px;">
        <sc-for list="{{ intents }}" as="it" hint-placeholder-count="5">
          <a href="#" style="position:relative;display:block;height:152px;border-radius:14px;overflow:hidden;background:#FFFFFF;box-shadow:0 1px 3px rgba(33,36,41,.05);transition:box-shadow .25s ease,transform .25s ease;" style-hover="box-shadow:0 12px 30px rgba(0,26,112,.10);transform:translateY(-2px);">
            <img src="{{ it.bg }}" alt="" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;" />
            <div style="position:absolute;inset:0;display:grid;grid-template-columns:clamp(78px,7vw,105px) clamp(190px,21vw,290px) clamp(118px,12.5vw,172px) clamp(102px,9vw,120px) minmax(0,1fr) clamp(74px,7vw,104px);align-items:center;column-gap:clamp(12px,1.7vw,24px);">
              <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;height:100%;background:#FFFFFF;margin-right:calc(-1 * clamp(12px,1.7vw,24px));">
                <span style="font-size:26px;font-weight:700;color:#001A70;letter-spacing:-0.01em;">{{ it.n }}</span>
                <span style="width:5px;height:5px;border-radius:50%;background:#00ADBB;display:block;"></span>
              </div>
              <div style="position:relative;height:100%;min-width:0;overflow:hidden;border-left:1px solid #EEF1F6;">
                <img src="{{ it.photo }}" alt="" style="position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:bottom center;mix-blend-mode:multiply;" />
              </div>
              <h4 style="font-weight:800;font-size:clamp(19px,1.9vw,26px);line-height:1.14;letter-spacing:-0.015em;color:#001A70;white-space:nowrap;">Quero<br /><span style="color:#00ADBB;">{{ it.verb }}</span></h4>
              <span style="justify-self:start;font-size:clamp(9px,.75vw,10px);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#00ADBB;border:1px solid #9BDCE4;border-radius:999px;padding:6px clamp(9px,1vw,13px);white-space:nowrap;">{{ it.tag }}</span>
              <p style="color:#6B7280;font-size:clamp(12px,1.05vw,14px);line-height:1.6;min-width:0;padding-right:8px;">{{ it.desc }}</p>
              <span style="justify-self:center;width:42px;height:42px;border-radius:50%;background:#FFFFFF;box-shadow:0 2px 8px rgba(0,26,112,.10);display:flex;align-items:center;justify-content:center;color:#001A70;font-size:16px;">→</span>
            </div>
          </a>
        </sc-for>
      </div>
    </div>
  </section>

  <section style="position:relative;margin-left:52px;padding:104px 0 112px;background:#04101F;color:#FFFFFF;overflow:hidden;">
    <img src="./assets/percurso-bg.webp" alt="" style="position:absolute;inset:0;width:100%;height:100%;object-fit:fill;" />
    <div style="position:relative;z-index:2;max-width:1360px;margin:0 auto;padding:0 48px;">
      <div ref="{{ registerReveal }}" style="{{ revealStyle }}display:flex;justify-content:space-between;align-items:flex-start;gap:40px;margin-bottom:88px;flex-wrap:wrap;">
        <div>
          <span style="font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#31C8E0;display:flex;align-items:center;gap:12px;"><span style="width:26px;height:1px;background:#31C8E0;display:inline-block;"></span>Percurso</span>
          <h2 style="font-weight:800;font-size:clamp(28px,3.2vw,42px);margin-top:18px;max-width:14ch;line-height:1.14;letter-spacing:-0.02em;color:#FFFFFF;">Do conhecimento à prática</h2>
        </div>
        <p style="max-width:36ch;color:#8FA3BC;font-size:15px;line-height:1.7;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 }}">
        <div style="position:relative;height:56px;margin-bottom:56px;">
          <div style="position:absolute;top:50%;left:26px;right:0;height:1px;background:linear-gradient(90deg,rgba(120,175,225,.42) 0%,rgba(120,175,225,.42) 88%,rgba(120,175,225,0) 100%);"></div>
          <div style="position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(32px,5vw,90px);align-items:center;">
            <div>
              <div style="position:relative;width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 50% 35%,#1B4FD8 0%,#0C2E9E 62%,#071D6B 100%);border:1px solid rgba(90,190,235,.85);box-shadow:0 0 0 5px rgba(10,40,120,.35),0 0 22px 3px rgba(35,150,230,.55),inset 0 1px 3px rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;color:#FFFFFF;">1</div>
            </div>
            <div>
              <div style="position:relative;width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 50% 35%,#1B4FD8 0%,#0C2E9E 62%,#071D6B 100%);border:1px solid rgba(90,190,235,.85);box-shadow:0 0 0 5px rgba(10,40,120,.35),0 0 22px 3px rgba(35,150,230,.55),inset 0 1px 3px rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;color:#FFFFFF;">2</div>
            </div>
            <div>
              <div style="position:relative;width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 50% 35%,#1B4FD8 0%,#0C2E9E 62%,#071D6B 100%);border:1px solid rgba(90,190,235,.85);box-shadow:0 0 0 5px rgba(10,40,120,.35),0 0 22px 3px rgba(35,150,230,.55),inset 0 1px 3px rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;color:#FFFFFF;">3</div>
            </div>
          </div>
        </div>
        <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(32px,5vw,90px);">
          <div>
            <span style="font-size:11px;font-weight:700;letter-spacing:.14em;color:#31C8E0;text-transform:uppercase;display:block;">Aprender</span>
            <h4 style="color:#FFFFFF;font-weight:700;font-size:clamp(17px,1.5vw,21px);margin:14px 0 14px;letter-spacing:-0.01em;">Artigos, conceitos e pesquisas</h4>
            <p style="color:#8FA3BC;font-size:14px;line-height:1.75;">A base teórica para entender como as marcas se constroem e se sustentam ao longo do tempo.</p>
          </div>
          <div>
            <span style="font-size:11px;font-weight:700;letter-spacing:.14em;color:#31C8E0;text-transform:uppercase;display:block;">Experimentar</span>
            <h4 style="color:#FFFFFF;font-weight:700;font-size:clamp(17px,1.5vw,21px);margin:14px 0 14px;letter-spacing:-0.01em;">Cursos, workshops e ferramentas</h4>
            <p style="color:#8FA3BC;font-size:14px;line-height:1.75;">Aplicação prática guiada por quem constrói marcas todos os dias.</p>
          </div>
          <div>
            <span style="font-size:11px;font-weight:700;letter-spacing:.14em;color:#31C8E0;text-transform:uppercase;display:block;">Construir</span>
            <h4 style="color:#FFFFFF;font-weight:700;font-size:clamp(17px,1.5vw,21px);margin:14px 0 14px;letter-spacing:-0.01em;">Projetos, livros, eventos e experiências</h4>
            <p style="color:#8FA3BC;font-size:14px;line-height:1.75;">O conhecimento vira produção real — dentro e fora do ecossistema InfoBranding.</p>
          </div>
        </div>
      </div>
    </div>
  </section>

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

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

  heroDefs = [
    ['Rebranding', 'Natura reposiciona sua marca para a próxima década', '11 de setembro de 2025', 'Por Marina Alves', './assets/hero-slide1.webp', './assets/autor1.webp'],
    ['Mercado', 'O que a nova onda de fusões revela sobre as categorias', '2 de setembro de 2025', 'Por Rafael Costa', './assets/hero-slide2.webp', './assets/autor2.webp'],
    ['Cultura', 'Marcas que constroem comunidade antes de construir campanha', '30 de junho de 2025', 'Por Juliana Reis', './assets/hero-slide3.webp', './assets/autor3.webp']
  ];

  heroDuration = 7000;

  goHero = (step) => {
    const n = this.heroDefs.length;
    if (this.heroSnapTimer) clearTimeout(this.heroSnapTimer);
    this.heroStepVal = step;
    this.setState((s) => ({ heroStep: step, heroSnap: false, heroIndex: ((step % n) + n) % n, heroTick: s.heroTick + 1 }));
    if (step >= n) {
      this.heroSnapTimer = setTimeout(() => {
        this.heroStepVal = step - n;
        this.setState({ heroSnap: true, heroStep: step - n });
      }, 720);
    }
  };

  startHero = () => {
    if (this.heroTimer) clearInterval(this.heroTimer);
    this.heroTimer = setInterval(() => this.goHero((this.heroStepVal || 0) + 1), this.heroDuration);
  };

  selectHero = (i) => () => {
    const n = this.heroDefs.length;
    if (i === this.state.heroIndex) return;
    const cur = this.heroStepVal || 0;
    const base = cur - (((cur % n) + n) % n);
    let target = base + i;
    if (target <= cur) target += n;
    this.goHero(target);
    this.startHero();
  };

  buildHero() {
    const idx = this.state.heroIndex;
    const anim = this.state.heroTick % 2 === 0 ? 'heroProgA' : 'heroProgB';
    return this.heroDefs.map(([tag, title, date, author, image, avatar], i) => {
      const on = i === idx;
      return {
        tag, title, date, author, image, avatar,
        select: this.selectHero(i),
        layerStyle: `position:absolute;inset:0;overflow:hidden;opacity:${on ? 1 : 0};transition:opacity 1.1s cubic-bezier(.4,0,.2,1);z-index:${on ? 1 : 0};`,
        imgStyle: `width:100%;height:100%;object-fit:cover;display:block;transform-origin:center;`,
        thumbStyle: `position:relative;display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:12px;border:1px solid ${on ? 'rgba(0,173,187,.5)' : '#FFFFFF1F'};background:#FFF0;backdrop-filter:blur(20px);overflow:hidden;cursor:pointer;font-family:inherit;text-align:left;transition:border-color .3s ease,background .3s ease,transform .3s ease;`,
        progressTrackStyle: `position:absolute;top:0;left:0;right:0;height:3px;background:rgba(255,255,255,.12);overflow:hidden;opacity:${on ? 1 : 0};`,
        progressBarStyle: `display:block;height:100%;width:100%;background:linear-gradient(90deg,#001A70,#00ADBB);transform-origin:left center;transform:scaleX(0);${on ? `animation:${anim} ${this.heroDuration}ms linear both;` : ''}`,
        thumbTitleStyle: `display:block;font-size:13.5px;font-weight:700;line-height:1.35;color:${on ? '#FFFFFF' : 'rgba(255,255,255,.82)'};`
      };
    });
  }

  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' }
  ];

  radarDefs = [
    ['marcas', 'Marcas', 'Posicionamento & rebranding', 'Campanhas, inovação e movimentos de reposicionamento estratégico.', 92, ['mercado', 'cultura'], 'ico-brand-positioning.webp'],
    ['mercado', 'Mercado', 'Investimentos & categorias', 'Concorrência, fusões e aquisições que redesenham setores inteiros.', 78, ['marcas', 'consumidor'], 'ico-strategy.webp'],
    ['consumidor', 'Consumidor', 'Comportamento & comunidades', 'Hábitos, desejos e novas formas de relação com as marcas.', 85, ['mercado', 'cultura'], 'ico-experience.webp'],
    ['cultura', 'Cultura', 'Sociedade & tecnologia', 'Movimentos culturais que antecipam o próximo ciclo de marcas.', 70, ['marcas', 'consumidor'], 'ico-awareness.webp']
  ];

  radarRadius = 233;

  startRadar = () => {
    if (this.radarTimer) clearInterval(this.radarTimer);
    this.radarTimer = setInterval(() => {
      if (this.state.radarActive) return;
      this.setState((s) => ({ radarAngle: ((s.radarAngle || 0) + 0.22) % 360 }));
    }, 50);
  };

  toggleRadarNode = (id) => (e) => {
    e.stopPropagation();
    if (this.radarCardTimer) clearTimeout(this.radarCardTimer);
    if (this.state.radarActive === id) {
      this.setState({ radarActive: null, radarCard: null });
      return;
    }
    const i = this.radarDefs.findIndex((d) => d[0] === id);
    this.setState({ radarActive: id, radarCard: null, radarAngle: (270 - (i / this.radarDefs.length) * 360 + 360) % 360 });
    this.radarCardTimer = setTimeout(() => {
      if (this.state.radarActive === id) this.setState({ radarCard: id });
    }, 700);
  };

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

  closeRadar = () => {
    if (this.radarCardTimer) clearTimeout(this.radarCardTimer);
    if (this.state.radarActive) this.setState({ radarActive: null, radarCard: null });
  };

  buildRadarNodes() {
    const total = this.radarDefs.length;
    const active = this.state.radarActive;
    const activeDef = active ? this.radarDefs.find((d) => d[0] === active) : null;
    const related = activeDef ? activeDef[5] : [];
    return this.radarDefs.map(([id, tag, title, desc, energy, rel, icon], i) => {
      const angle = ((i / total) * 360 + (this.state.radarAngle || 0)) % 360;
      const rad = (angle * Math.PI) / 180;
      const x = Math.round(this.radarRadius * Math.cos(rad) * 10) / 10;
      const y = Math.round(this.radarRadius * Math.sin(rad) * 10) / 10;
      const expanded = active === id;
      const cardOpen = this.state.radarCard === id;
      const isRelated = related.indexOf(id) !== -1;
      const z = expanded ? 300 : Math.round(100 + 50 * Math.cos(rad));
      const opacity = expanded || isRelated ? 1 : Math.max(0.55, 0.55 + 0.45 * ((1 + Math.sin(rad)) / 2));
      const ring = expanded
        ? 'background:#00ADBB;border:2px solid #FFFFFF;box-shadow:0 0 0 8px rgba(0,173,187,.18),0 0 26px 6px rgba(0,173,187,.55);'
        : isRelated
        ? 'background:rgba(0,173,187,.35);border:2px solid #00ADBB;box-shadow:0 0 18px 3px rgba(0,173,187,.4);animation:radarNodePulse 1.6s ease-in-out infinite;'
        : 'background:rgba(4,17,31,.9);border:2px solid rgba(255,255,255,.34);box-shadow:0 0 20px 4px rgba(0,173,187,.3),0 0 0 5px rgba(0,173,187,.09);';
      return {
        id, tag, title, desc, energy, expanded, cardOpen,
        isMarcas: id === 'marcas', isMercado: id === 'mercado', isConsumidor: id === 'consumidor', isCultura: id === 'cultura',
        onToggle: this.toggleRadarNode(id),
        wrapStyle: `position:absolute;top:50%;left:50%;transform:translate(calc(-50% + ${x}px),calc(-50% + ${y}px));z-index:${z};opacity:${opacity};transition:transform .7s cubic-bezier(.4,0,.2,1),opacity .7s ease;`,
        dotStyle: `width:51px;height:51px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .3s ease,border-color .3s ease,box-shadow .3s ease,transform .3s ease;transform:scale(${expanded ? 1.14 : 1});${ring}`,
        num: String(i + 1).padStart(2, '0'),
        labelStyle: `position:absolute;top:50%;${Math.cos(rad) >= 0 ? 'left:66px' : 'right:66px'};transform:translateY(-50%);display:flex;align-items:center;gap:9px;white-space:nowrap;padding:8px 17px;border-radius:999px;border:1px solid ${expanded ? 'rgba(0,173,187,.55)' : 'rgba(255,255,255,.13)'};background:${expanded ? 'rgba(0,173,187,.14)' : 'rgba(4,17,31,.9)'};backdrop-filter:blur(6px);font-size:12.5px;font-weight:600;transition:border-color .3s ease,background .3s ease,color .3s ease;font-size:13.5px;color:${expanded ? '#FFFFFF' : 'rgba(255,255,255,.75)'};`,
        barStyle: `height:100%;width:${energy}%;background:linear-gradient(90deg,#001A70,#00ADBB);border-radius:999px;`
      };
    });
  }

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

  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']
  ];

  ecoDefs = [
    ['01', 'Publicações', 'Livros & e-books', 'Projetos editoriais que aprofundam conceitos e provocam novas ideias.', './assets/eco-livros.webp', 1, 1],
    ['03', 'Experiências', 'Palestras & talks', 'Eventos que aproximam pessoas, inspiram e geram impacto real.', './assets/eco-experiencias.webp', 3, 1],
    ['02', 'Educação', 'Cursos & workshops', 'Formação prática e aprofundada para quem transforma marcas.', './assets/eco-educacao.webp', 1, 2],
    ['04', 'Projetos', 'Especiais & parcerias', 'Projetos sob medida que geram valor e amplificam resultados.', './assets/eco-projetos.webp', 3, 2],
    ['05', 'Pesquisa', 'Estudos & dados', 'Inteligência produzida com rigor para orientar decisões e estratégias.', './assets/eco-dados.webp', 1, 3],
    ['06', 'Conexões', 'Rede de especialistas', 'Autores, empresas e instituições que compartilham conhecimento e constroem o futuro.', './assets/eco-conexoes.webp', 3, 3]
  ];

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

  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.startHero();
    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);
    this.startRadar();
  }

  componentWillUnmount() {
    if (this.heroTimer) clearInterval(this.heroTimer);
    if (this.heroSnapTimer) clearTimeout(this.heroSnapTimer);
    if (this.chapterObserver) this.chapterObserver.disconnect();
    if (this.revealObserver) this.revealObserver.disconnect();
    if (this.rafId) clearInterval(this.rafId);
    if (this.radarTimer) clearInterval(this.radarTimer);
    if (this.radarCardTimer) clearTimeout(this.radarCardTimer);
  }

  renderVals() {
    const active = this.state.activeSection;
    return {
      heroSlides: this.buildHero(),
      heroThumbs: (() => { const all = this.buildHero(); return all.concat(all.map((t, k) => Object.assign({}, t, { key: 'b' + k }))); })(),
      heroTrackStyle: 'display:grid;grid-template-columns:repeat(6,1fr);gap:18px;width:calc(200% + 18px);margin-left:calc((100% + 18px) / -3 * ' + (this.state.heroStep || 0) + ');' + (this.state.heroSnap ? 'transition:none;' : 'transition:margin-left .7s cubic-bezier(.4,0,.2,1);'),
      heroActive: this.heroDefs[this.state.heroIndex] ? {
        tag: this.heroDefs[this.state.heroIndex][0],
        title: this.heroDefs[this.state.heroIndex][1],
        date: this.heroDefs[this.state.heroIndex][2],
        author: this.heroDefs[this.state.heroIndex][3],
        avatar: this.heroDefs[this.state.heroIndex][5]
      } : {},
      heroTextStyle: 'padding-top:clamp(56px,8vh,96px);animation:' + (this.state.heroTick % 2 === 0 ? 'heroTextIn' : 'heroTextInB') + ' .8s cubic-bezier(.2,.7,.3,1) both;',
      openUniverso: this.openUniverso,
      closeUniverso: this.closeUniverso,
      universoStyle: 'position:absolute;top:calc(100% + 12px);left:-14px;min-width:196px;background:#FFFFFF;border:1px solid #ECEEF2;border-radius:12px;box-shadow:0 16px 40px rgba(0,26,112,.13);padding:8px 0;z-index:70;transition:opacity .2s ease,transform .2s ease;' + (this.state.universoOpen ? 'opacity:1;transform:translateY(0);pointer-events:auto;' : 'opacity:0;transform:translateY(-6px);pointer-events:none;'),
      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, tag], i) => ({
        n: String(i + 1).padStart(2, '0'), verb, desc, tag,
        photo: './assets/trilha-' + verb + '.webp',
        bg: './assets/trilha-' + verb + '-bg.webp'
      })),
      ecoItems: this.ecoDefs.map(([n, title, subtitle, desc, img, col, row]) => ({ n, title, subtitle, desc, img, col, row })),
      radarNodes: this.buildRadarNodes(),
      closeRadar: this.closeRadar,
      footerCols: this.footerColDefs.map(([title, links]) => ({ title, links: links.map(([label, href]) => ({ label, href })) }))
    };
  }
}

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