<!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>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="true"></link>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,450;0,9..144,600;0,9..144,700;1,9..144,450&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet"></link>
<style>
body{margin:0;background:#F5F2EA;color:#15171C;font-family:'IBM Plex Sans',sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;}
a{text-decoration:none;color:inherit;}
::selection{background:#FFC22E;color:#15171C;}
:focus-visible{outline:2px solid #711F2A;outline-offset:3px;}
@keyframes wcIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
</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:22px 0;border-right:1px solid #CFC8B4;background:#F5F2EA;">
    <span style="writing-mode:vertical-rl;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.18em;color:#8B8A7E;text-transform:uppercase;">INFOBRANDING — ÍNDICE</span>
    <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 }}" ref="{{ registerTab }}" style="{{ tab.style }}">
          <span style="{{ tab.numStyle }}">{{ tab.num }}</span>{{ tab.label }}
        </a>
      </sc-for>
    </nav>
    <span style="writing-mode:vertical-rl;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.18em;color:#8B8A7E;text-transform:uppercase;">EST. BRANDING</span>
  </div>

  <header style="position:sticky;top:0;z-index:50;background:rgba(245,242,234,.92);backdrop-filter:blur(8px);border-bottom:1px solid #CFC8B4;margin-left:52px;">
    <div style="max-width:1360px;margin:0 auto;padding:0 48px;display:flex;align-items:center;justify-content:space-between;height:76px;">
      <a href="#top" style="font-family:'Fraunces',serif;font-weight:700;font-size:21px;display:flex;align-items:baseline;gap:2px;color:#15171C;">Info<span style="color:#711F2A;">Branding</span></a>
      <nav style="display:flex;gap:34px;">
        <a href="#atualidade" style="font-size:14px;font-weight:500;color:#54564F;" style-hover="color:#15171C;">Conteúdos</a>
        <a href="#conhecimento" style="font-size:14px;font-weight:500;color:#54564F;" style-hover="color:#15171C;">Descomplicando Branding</a>
        <a href="#inteligencia" style="font-size:14px;font-weight:500;color:#54564F;" style-hover="color:#15171C;">Radar IB</a>
        <a href="#pessoas" style="font-size:14px;font-weight:500;color:#54564F;" style-hover="color:#15171C;">Colaboradores</a>
        <a href="#ecossistema" style="font-size:14px;font-weight:500;color:#54564F;" style-hover="color:#15171C;">Universo InfoBranding</a>
      </nav>
      <div style="display:flex;align-items:center;gap:18px;">
        <button aria-label="Buscar" style="width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid #CFC8B4;background:transparent;" style-hover="border-color:#15171C;background:#FFFCF6;">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="11" cy="11" r="7"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
        </button>
        <button style="padding:10px 20px;font-size:13px;font-weight:600;background:#15171C;color:#FFFCF6;border:none;border-radius:2px;" style-hover="background:#711F2A;">Newsletter</button>
      </div>
    </div>
  </header>

  <section id="top" style="margin-left:52px;padding:96px 0 84px;border-bottom:1px solid #CFC8B4;position:relative;overflow:hidden;">
    <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-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#711F2A;display:flex;align-items:center;gap:10px;"><span style="width:22px;height:1px;background:#711F2A;display:inline-block;"></span>Ecossistema de Branding</span>
        <h1 style="font-family:'Fraunces',serif;font-weight:600;letter-spacing:-0.01em;font-size:clamp(38px,5.2vw,64px);line-height:1.04;margin:20px 0 26px;max-width:14ch;">O conhecimento que <em style="font-style:italic;color:#711F2A;">transforma</em> marcas.</h1>
        <p style="font-size:18px;color:#54564F;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:500;border:1px solid #15171C;border-radius:2px;background:#15171C;color:#FFFCF6;" style-hover="background:#711F2A;border-color:#711F2A;">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:500;border:1px solid #15171C;border-radius:2px;background:transparent;color:#15171C;" style-hover="background:#15171C;color:#FFFCF6;">Conheça o InfoBranding</a>
        </div>
      </div>

      <div style="position:relative;height:440px;" aria-hidden="true">
        <span style="position:absolute;top:6%;left:10%;font-size:40px;font-family:'Fraunces',serif;font-weight:700;color:#15171C;white-space:nowrap;opacity:0;animation:wcIn .8s ease forwards;animation-delay:.05s;">BRANDING</span>
        <span style="position:absolute;top:2%;right:4%;font-size:22px;font-family:'Fraunces',serif;font-weight:450;color:#711F2A;font-style:italic;white-space:nowrap;opacity:0;animation:wcIn .8s ease forwards;animation-delay:.15s;">estratégia</span>
        <span style="position:absolute;top:24%;left:44%;font-size:26px;font-family:'Fraunces',serif;font-weight:450;color:#15171C;white-space:nowrap;opacity:0;animation:wcIn .8s ease forwards;animation-delay:.1s;">marca</span>
        <span style="position:absolute;top:20%;right:14%;font-size:12px;font-family:'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:#8B8A7E;white-space:nowrap;opacity:0;animation:wcIn .8s ease forwards;animation-delay:.25s;">experiência</span>
        <span style="position:absolute;top:42%;left:6%;font-size:30px;font-family:'Fraunces',serif;font-weight:450;color:#15171C;white-space:nowrap;opacity:0;animation:wcIn .8s ease forwards;animation-delay:.2s;">cultura</span>
        <span style="position:absolute;top:48%;left:38%;font-size:34px;font-family:'Fraunces',serif;font-weight:450;color:#711F2A;font-style:italic;white-space:nowrap;opacity:0;animation:wcIn .8s ease forwards;animation-delay:.3s;">consumo</span>
        <span style="position:absolute;top:58%;right:6%;font-size:12px;font-family:'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:#8B8A7E;white-space:nowrap;opacity:0;animation:wcIn .8s ease forwards;animation-delay:.35s;">design</span>
        <span style="position:absolute;top:70%;left:16%;font-size:30px;font-family:'Fraunces',serif;font-weight:700;color:#15171C;white-space:nowrap;opacity:0;animation:wcIn .8s ease forwards;animation-delay:.4s;">negócios</span>
        <span style="position:absolute;top:82%;right:20%;font-size:22px;font-family:'Fraunces',serif;font-weight:450;color:#15171C;white-space:nowrap;opacity:0;animation:wcIn .8s ease forwards;animation-delay:.45s;">percepção</span>
        <span style="position:absolute;top:88%;left:44%;font-size:12px;font-family:'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:#8B8A7E;white-space:nowrap;opacity:0;animation:wcIn .8s ease forwards;animation-delay:.5s;">posicionamento</span>
        <svg width="100%" height="100%" viewBox="0 0 500 440" style="position:absolute;top:0;left:0;" preserveAspectRatio="none">
          <line x1="90" y1="45" x2="230" y2="115" stroke="#CFC8B4" stroke-width="1"></line>
          <line x1="230" y1="115" x2="320" y2="95" stroke="#CFC8B4" stroke-width="1"></line>
          <line x1="230" y1="115" x2="150" y2="200" stroke="#CFC8B4" stroke-width="1"></line>
          <line x1="150" y1="200" x2="260" y2="230" stroke="#CFC8B4" stroke-width="1"></line>
          <line x1="260" y1="230" x2="380" y2="270" stroke="#CFC8B4" stroke-width="1"></line>
          <line x1="150" y1="200" x2="110" y2="320" stroke="#CFC8B4" stroke-width="1"></line>
          <line x1="260" y1="230" x2="220" y2="390" stroke="#CFC8B4" stroke-width="1"></line>
          <circle cx="230" cy="115" r="3.5" fill="#711F2A"></circle>
          <circle cx="150" cy="200" r="3.5" fill="#711F2A"></circle>
          <circle cx="260" cy="230" r="3.5" fill="#711F2A"></circle>
        </svg>
      </div>
    </div>
  </section>

  <section id="atualidade" ref="{{ registerSection_atualidade }}" style="margin-left:52px;padding:88px 0;border-bottom:1px solid #CFC8B4;">
    <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:46px;flex-wrap:wrap;">
        <div>
          <span style="font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#711F2A;display:flex;align-items:center;gap:10px;"><span style="width:22px;height:1px;background:#711F2A;display:inline-block;"></span>01 · Atualidade</span>
          <h2 style="font-family:'Fraunces',serif;font-weight:600;font-size:clamp(28px,3.4vw,42px);margin-top:14px;max-width:16ch;">Agora no InfoBranding</h2>
        </div>
        <p style="max-width:38ch;color:#54564F;font-size:15.5px;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:1px;background:#CFC8B4;border:1px solid #CFC8B4;">
        <article style="grid-row:span 2;background:#F5F2EA;padding:30px;display:flex;flex-direction:column;gap:16px;" style-hover="background:#FFFCF6;">
          <span style="font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#711F2A;">Última notícia</span>
          <div style="width:100%;aspect-ratio:16/10;background:linear-gradient(135deg,#ECE6D6,#CFC8B4);border-radius:2px;position:relative;overflow:hidden;"></div>
          <h3 style="font-family:'Fraunces',serif;font-weight:600;font-size:26px;line-height:1.2;margin-top:auto;">Rebranding da Natura reacende debate sobre identidade regional em multinacionais</h3>
          <div style="display:flex;justify-content:space-between;font-family:'IBM Plex Mono',monospace;font-size:11px;color:#8B8A7E;margin-top:auto;"><span>Mercado</span><span>18 jul 2026</span></div>
        </article>
        <article style="background:#F5F2EA;padding:30px;display:flex;flex-direction:column;gap:16px;" style-hover="background:#FFFCF6;">
          <span style="font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#711F2A;">Último case</span>
          <div style="width:100%;aspect-ratio:16/10;background:linear-gradient(135deg,#ECE6D6,#CFC8B4);border-radius:2px;"></div>
          <h3 style="font-family:'Fraunces',serif;font-weight:600;font-size:18px;line-height:1.3;">Como a Nubank construiu percepção de marca sem depender de agência</h3>
          <p style="color:#54564F;font-size:14px;line-height:1.55;">Brand equity, cultura interna e consistência como vantagem competitiva.</p>
        </article>
        <article style="background:#F5F2EA;padding:30px;display:flex;flex-direction:column;gap:16px;" style-hover="background:#FFFCF6;">
          <span style="font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#711F2A;">Análise</span>
          <div style="width:100%;aspect-ratio:16/10;background:linear-gradient(135deg,#ECE6D6,#CFC8B4);border-radius:2px;"></div>
          <h3 style="font-family:'Fraunces',serif;font-weight:600;font-size:18px;line-height:1.3;">O que os rebrandings de 2026 revelam sobre o consumidor pós-digital</h3>
          <p style="color:#54564F;font-size:14px;line-height:1.55;">Leitura crítica das tendências de posicionamento do primeiro semestre.</p>
        </article>
        <article style="background:#F5F2EA;padding:30px;display:flex;flex-direction:column;gap:16px;" style-hover="background:#FFFCF6;">
          <span style="font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#711F2A;">Evento</span>
          <div style="width:100%;aspect-ratio:16/10;background:linear-gradient(135deg,#ECE6D6,#CFC8B4);border-radius:2px;"></div>
          <h3 style="font-family:'Fraunces',serif;font-weight:600;font-size:18px;line-height:1.3;">Fórum InfoBranding 2026: Marcas em tempos de incerteza</h3>
          <p style="color:#54564F;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:44px;">
        <a href="#" style="display:inline-flex;align-items:center;gap:10px;padding:14px 26px;font-size:14px;font-weight:500;border:1px solid #15171C;border-radius:2px;background:transparent;color:#15171C;" style-hover="background:#15171C;color:#FFFCF6;">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:#ECE6D6;border-bottom:1px solid #CFC8B4;">
    <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:46px;flex-wrap:wrap;">
        <div>
          <span style="font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#711F2A;display:flex;align-items:center;gap:10px;"><span style="width:22px;height:1px;background:#711F2A;display:inline-block;"></span>02 · Conhecimento</span>
          <h2 style="font-family:'Fraunces',serif;font-weight:600;font-size:clamp(28px,3.4vw,42px);margin-top:14px;max-width:16ch;">Descomplicando Branding</h2>
        </div>
        <p style="max-width:38ch;color:#54564F;font-size:15.5px;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:14px;">
        <sc-for list="{{ dcItems }}" as="item" hint-placeholder-count="10">
          <a href="#" style="background:#F5F2EA;border:1px solid #CFC8B4;border-radius:2px;padding:22px 18px 20px;min-height:150px;display:flex;flex-direction:column;justify-content:space-between;position:relative;" style-hover="border-color:#711F2A;background:#FFFCF6;">
            <span style="font-family:'IBM Plex Mono',monospace;font-size:11px;color:#8B8A7E;">{{ item.n }}</span>
            <h4 style="font-family:'Fraunces',serif;font-weight:600;font-size:15.5px;line-height:1.28;margin-top:16px;">{{ item.title }}</h4>
            <span style="align-self:flex-end;margin-top:14px;">→</span>
          </a>
        </sc-for>
      </div>

      <div ref="{{ registerReveal }}" style="{{ revealStyle }}margin-top:56px;border:1px dashed #8B8A7E;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-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#8B8A7E;margin-bottom:8px;display:block;">Em construção</span>
          <h4 style="font-family:'Fraunces',serif;font-weight:600;font-size:18px;">A Enciclopédia de Branding do InfoBranding</h4>
          <p style="color:#54564F;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:14px 26px;font-size:14px;font-weight:500;border:1px solid #15171C;border-radius:2px;background:transparent;color:#15171C;" style-hover="background:#15171C;color:#FFFCF6;">Explorar todos os conceitos <span>→</span></a>
      </div>
    </div>
  </section>

  <section id="inteligencia" ref="{{ registerSection_inteligencia }}" style="margin-left:52px;padding:104px 0;border-bottom:1px solid #CFC8B4;background:#15171C;color:#FFFCF6;">
    <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:46px;flex-wrap:wrap;">
        <div>
          <span style="font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#FFC22E;display:flex;align-items:center;gap:10px;"><span style="width:22px;height:1px;background:#FFC22E;display:inline-block;"></span>03 · Inteligência</span>
          <h2 style="font-family:'Fraunces',serif;font-weight:600;font-size:clamp(28px,3.4vw,42px);margin-top:14px;max-width:16ch;color:#FFFCF6;">Radar IB</h2>
        </div>
        <p style="max-width:38ch;color:#B9B7AE;font-size:15.5px;line-height:1.6;text-align:right;">O que está acontecendo no universo das marcas?</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;border:1px solid rgba(255,255,255,.14);border-radius:50%;width:460px;height:460px;"></div>
        <div style="position:absolute;border:1px solid rgba(255,255,255,.14);border-radius:50%;width:300px;height:300px;"></div>
        <div style="width:158px;height:158px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#8C3440,#711F2A 70%);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;z-index:5;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 30px 60px rgba(0,0,0,.4);">
          <span style="font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;color:#FFC22E;text-transform:uppercase;">Radar</span>
          <strong style="font-family:'Fraunces',serif;font-size:19px;margin-top:6px;">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%);">
          <span style="font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.12em;color:#FFC22E;">Marcas</span>
          <h4 style="font-family:'Fraunces',serif;font-weight:600;color:#FFFCF6;font-size:17px;margin:8px 0 6px;">Posicionamento &amp; rebranding</h4>
          <p style="font-size:13px;color:#B9B7AE;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%);">
          <span style="font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.12em;color:#FFC22E;">Mercado</span>
          <h4 style="font-family:'Fraunces',serif;font-weight:600;color:#FFFCF6;font-size:17px;margin:8px 0 6px;">Investimentos &amp; categorias</h4>
          <p style="font-size:13px;color:#B9B7AE;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%);">
          <span style="font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.12em;color:#FFC22E;">Consumidor</span>
          <h4 style="font-family:'Fraunces',serif;font-weight:600;color:#FFFCF6;font-size:17px;margin:8px 0 6px;">Comportamento &amp; comunidades</h4>
          <p style="font-size:13px;color:#B9B7AE;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%);">
          <span style="font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.12em;color:#FFC22E;">Cultura</span>
          <h4 style="font-family:'Fraunces',serif;font-weight:600;color:#FFFCF6;font-size:17px;margin:8px 0 6px;">Sociedade &amp; tecnologia</h4>
          <p style="font-size:13px;color:#B9B7AE;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:8px;">
        <a href="#" style="display:inline-flex;align-items:center;gap:10px;padding:14px 26px;font-size:14px;font-weight:500;border:1px solid rgba(255,255,255,.4);border-radius:2px;color:#FFFCF6;" style-hover="background:#FFC22E;color:#15171C;border-color:#FFC22E;">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 #CFC8B4;">
    <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:46px;flex-wrap:wrap;">
        <div>
          <span style="font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#711F2A;display:flex;align-items:center;gap:10px;"><span style="width:22px;height:1px;background:#711F2A;display:inline-block;"></span>04 · Pessoas</span>
          <h2 style="font-family:'Fraunces',serif;font-weight:600;font-size:clamp(28px,3.4vw,42px);margin-top:14px;max-width:16ch;">Quem pensa o Branding com a gente</h2>
        </div>
        <p style="max-width:38ch;color:#54564F;font-size:15.5px;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:28px;">
        <article style="border:1px solid #CFC8B4;border-radius:2px;overflow:hidden;background:#FFFCF6;">
          <div style="aspect-ratio:4/3;background:linear-gradient(150deg,#ECE6D6,#CFC8B4);"></div>
          <div style="padding:22px 22px 26px;">
            <span style="font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#711F2A;">Estratégia de marca</span>
            <h4 style="font-family:'Fraunces',serif;font-weight:600;font-size:19px;margin:8px 0 12px;">Marina Costa</h4>
            <div style="display:flex;gap:8px;flex-wrap:wrap;">
              <span style="font-size:11.5px;padding:5px 10px;border:1px solid #CFC8B4;border-radius:20px;color:#54564F;">Brand equity</span>
              <span style="font-size:11.5px;padding:5px 10px;border:1px solid #CFC8B4;border-radius:20px;color:#54564F;">Posicionamento</span>
              <span style="font-size:11.5px;padding:5px 10px;border:1px solid #CFC8B4;border-radius:20px;color:#54564F;">Arquitetura de marcas</span>
            </div>
          </div>
        </article>
        <article style="border:1px solid #CFC8B4;border-radius:2px;overflow:hidden;background:#FFFCF6;">
          <div style="aspect-ratio:4/3;background:linear-gradient(150deg,#ECE6D6,#CFC8B4);"></div>
          <div style="padding:22px 22px 26px;">
            <span style="font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#711F2A;">Design &amp; identidade</span>
            <h4 style="font-family:'Fraunces',serif;font-weight:600;font-size:19px;margin:8px 0 12px;">Rafael Andrade</h4>
            <div style="display:flex;gap:8px;flex-wrap:wrap;">
              <span style="font-size:11.5px;padding:5px 10px;border:1px solid #CFC8B4;border-radius:20px;color:#54564F;">Identidade visual</span>
              <span style="font-size:11.5px;padding:5px 10px;border:1px solid #CFC8B4;border-radius:20px;color:#54564F;">Sistemas de marca</span>
              <span style="font-size:11.5px;padding:5px 10px;border:1px solid #CFC8B4;border-radius:20px;color:#54564F;">Naming</span>
            </div>
          </div>
        </article>
        <article style="border:1px solid #CFC8B4;border-radius:2px;overflow:hidden;background:#FFFCF6;">
          <div style="aspect-ratio:4/3;background:linear-gradient(150deg,#ECE6D6,#CFC8B4);"></div>
          <div style="padding:22px 22px 26px;">
            <span style="font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#711F2A;">Comportamento do consumidor</span>
            <h4 style="font-family:'Fraunces',serif;font-weight:600;font-size:19px;margin:8px 0 12px;">Luiza Prado</h4>
            <div style="display:flex;gap:8px;flex-wrap:wrap;">
              <span style="font-size:11.5px;padding:5px 10px;border:1px solid #CFC8B4;border-radius:20px;color:#54564F;">Cultura</span>
              <span style="font-size:11.5px;padding:5px 10px;border:1px solid #CFC8B4;border-radius:20px;color:#54564F;">Pesquisa</span>
              <span style="font-size:11.5px;padding:5px 10px;border:1px solid #CFC8B4;border-radius:20px;color:#54564F;">Experiência de marca</span>
            </div>
          </div>
        </article>
      </div>

      <div ref="{{ registerReveal }}" style="{{ revealStyle }}margin-top:40px;padding-top:24px;border-top:1px solid #CFC8B4;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 26px;border-right:1px solid #CFC8B4;display:flex;flex-direction:column;gap:4px;">
            <strong style="font-family:'Fraunces',serif;font-size:14px;">{{ p.name }}</strong>
            <span style="font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:#8B8A7E;text-transform:uppercase;">{{ p.area }}</span>
          </div>
        </sc-for>
      </div>

      <div ref="{{ registerReveal }}" style="{{ revealStyle }}margin-top:56px;padding:40px;background:#ECE6D6;border-radius:2px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;">
        <h3 style="font-family:'Fraunces',serif;font-weight:600;font-size:24px;max-width:20ch;">Você também tem algo a compartilhar?</h3>
        <a href="#" style="display:inline-flex;align-items:center;gap:10px;padding:14px 26px;font-size:14px;font-weight:500;border:1px solid #15171C;border-radius:2px;background:#15171C;color:#FFFCF6;" style-hover="background:#711F2A;border-color:#711F2A;">Torne-se um colaborador <span>→</span></a>
      </div>
    </div>
  </section>

  <section id="ecossistema" ref="{{ registerSection_ecossistema }}" style="margin-left:52px;padding:104px 0;border-bottom:1px solid #CFC8B4;background:#ECE6D6;">
    <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:46px;flex-wrap:wrap;">
        <div>
          <span style="font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#711F2A;display:flex;align-items:center;gap:10px;"><span style="width:22px;height:1px;background:#711F2A;display:inline-block;"></span>05 · Ecossistema</span>
          <h2 style="font-family:'Fraunces',serif;font-weight:600;font-size:clamp(28px,3.4vw,42px);margin-top:14px;max-width:16ch;">O universo InfoBranding</h2>
        </div>
        <p style="max-width:38ch;color:#54564F;font-size:15.5px;line-height:1.6;text-align:right;">O Branding não acontece em um único lugar. Por isso, 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;max-width:900px;margin:20px auto 0;aspect-ratio:1/0.82;">
        <div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:1px dashed #8B8A7E;border-radius:50%;opacity:.5;width:600px;height:600px;"></div>
        <div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:1px dashed #8B8A7E;border-radius:50%;opacity:.5;width:420px;height:420px;"></div>
        <div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:150px;height:150px;border-radius:50%;background:#15171C;color:#FFFCF6;display:flex;align-items:center;justify-content:center;text-align:center;font-family:'Fraunces',serif;font-weight:600;font-size:15px;line-height:1.2;padding:10px;z-index:4;box-shadow:0 26px 50px rgba(21,23,28,.18);">INFO<br></br>BRANDING</div>

        <div style="position:absolute;width:168px;padding:16px 18px;background:#F5F2EA;border:1px solid #CFC8B4;border-radius:2px;top:-6%;left:50%;transform:translateX(-50%);">
          <span style="font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;color:#711F2A;text-transform:uppercase;">Publicações</span>
          <h5 style="font-family:'Fraunces',serif;font-weight:600;font-size:15px;margin:6px 0 4px;">Livros &amp; e-books</h5>
          <p style="font-size:12px;color:#54564F;line-height:1.45;">Projetos editoriais sobre marcas.</p>
        </div>
        <div style="position:absolute;width:168px;padding:16px 18px;background:#F5F2EA;border:1px solid #CFC8B4;border-radius:2px;top:16%;right:-4%;">
          <span style="font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;color:#711F2A;text-transform:uppercase;">Educação</span>
          <h5 style="font-family:'Fraunces',serif;font-weight:600;font-size:15px;margin:6px 0 4px;">Cursos &amp; workshops</h5>
          <p style="font-size:12px;color:#54564F;line-height:1.45;">Formação prática e aprofundada.</p>
        </div>
        <div style="position:absolute;width:168px;padding:16px 18px;background:#F5F2EA;border:1px solid #CFC8B4;border-radius:2px;bottom:16%;right:-4%;">
          <span style="font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;color:#711F2A;text-transform:uppercase;">Experiências</span>
          <h5 style="font-family:'Fraunces',serif;font-weight:600;font-size:15px;margin:6px 0 4px;">Palestras &amp; talks</h5>
          <p style="font-size:12px;color:#54564F;line-height:1.45;">Eventos que aproximam pessoas e ideias.</p>
        </div>
        <div style="position:absolute;width:168px;padding:16px 18px;background:#F5F2EA;border:1px solid #CFC8B4;border-radius:2px;bottom:-6%;left:50%;transform:translateX(-50%);">
          <span style="font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;color:#711F2A;text-transform:uppercase;">Projetos</span>
          <h5 style="font-family:'Fraunces',serif;font-weight:600;font-size:15px;margin:6px 0 4px;">Especiais &amp; parcerias</h5>
          <p style="font-size:12px;color:#54564F;line-height:1.45;">Projetos editoriais sob medida.</p>
        </div>
        <div style="position:absolute;width:168px;padding:16px 18px;background:#F5F2EA;border:1px solid #CFC8B4;border-radius:2px;bottom:16%;left:-4%;">
          <span style="font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;color:#711F2A;text-transform:uppercase;">Pesquisa</span>
          <h5 style="font-family:'Fraunces',serif;font-weight:600;font-size:15px;margin:6px 0 4px;">Estudos &amp; dados</h5>
          <p style="font-size:12px;color:#54564F;line-height:1.45;">Inteligência produzida com rigor.</p>
        </div>
        <div style="position:absolute;width:168px;padding:16px 18px;background:#F5F2EA;border:1px solid #CFC8B4;border-radius:2px;top:16%;left:-4%;">
          <span style="font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;color:#711F2A;text-transform:uppercase;">Conexões</span>
          <h5 style="font-family:'Fraunces',serif;font-weight:600;font-size:15px;margin:6px 0 4px;">Rede de especialistas</h5>
          <p style="font-size:12px;color:#54564F;line-height:1.45;">Autores, empresas e instituições.</p>
        </div>
      </div>
    </div>
  </section>

  <section style="margin-left:52px;padding:96px 0;border-bottom:1px solid #CFC8B4;">
    <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:46px;flex-wrap:wrap;">
        <div>
          <span style="font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#711F2A;display:flex;align-items:center;gap:10px;"><span style="width:22px;height:1px;background:#711F2A;display:inline-block;"></span>Trilhas</span>
          <h2 style="font-family:'Fraunces',serif;font-weight:600;font-size:clamp(28px,3.4vw,42px);margin-top:14px;max-width:16ch;">O que você quer construir?</h2>
        </div>
        <p style="max-width:38ch;color:#54564F;font-size:15.5px;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 #CFC8B4;">
        <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:26px 0;border-bottom:1px solid #CFC8B4;" style-hover="background:#ECE6D6;">
            <span style="font-family:'IBM Plex Mono',monospace;font-size:12px;color:#8B8A7E;">{{ it.n }}</span>
            <h4 style="font-family:'Fraunces',serif;font-weight:600;font-size:22px;">Quero <em style="color:#711F2A;font-style:normal;">{{ it.verb }}</em></h4>
            <p style="color:#54564F;font-size:14.5px;">{{ it.desc }}</p>
            <span style="justify-self:end;">→</span>
          </a>
        </sc-for>
      </div>
    </div>
  </section>

  <section style="margin-left:52px;padding:96px 0;border-bottom:1px solid #CFC8B4;background:#15171C;color:#FFFCF6;">
    <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:46px;flex-wrap:wrap;">
        <div>
          <span style="font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#FFC22E;display:flex;align-items:center;gap:10px;"><span style="width:22px;height:1px;background:#FFC22E;display:inline-block;"></span>Percurso</span>
          <h2 style="font-family:'Fraunces',serif;font-weight:600;font-size:clamp(28px,3.4vw,42px);margin-top:14px;max-width:16ch;color:#FFFCF6;">Do conhecimento à prática</h2>
        </div>
        <p style="max-width:38ch;color:#B9B7AE;font-size:15.5px;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:0;margin-top:56px;">
        <div style="padding:0 32px;">
          <span style="font-family:'Fraunces',serif;font-size:52px;color:rgba(255,255,255,.16);line-height:1;">01</span>
          <span style="font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;color:#FFC22E;text-transform:uppercase;margin-top:18px;display:block;">Aprender</span>
          <h4 style="font-family:'Fraunces',serif;font-weight:600;color:#FFFCF6;font-size:22px;margin:10px 0 12px;">Artigos, conceitos e pesquisas</h4>
          <p style="color:#B9B7AE;font-size:14.5px;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="padding:0 32px;border-left:1px solid rgba(255,255,255,.16);">
          <span style="font-family:'Fraunces',serif;font-size:52px;color:rgba(255,255,255,.16);line-height:1;">02</span>
          <span style="font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;color:#FFC22E;text-transform:uppercase;margin-top:18px;display:block;">Experimentar</span>
          <h4 style="font-family:'Fraunces',serif;font-weight:600;color:#FFFCF6;font-size:22px;margin:10px 0 12px;">Cursos, workshops e ferramentas</h4>
          <p style="color:#B9B7AE;font-size:14.5px;line-height:1.6;">Aplicação prática guiada por quem constrói marcas todos os dias.</p>
        </div>
        <div style="padding:0 32px;border-left:1px solid rgba(255,255,255,.16);">
          <span style="font-family:'Fraunces',serif;font-size:52px;color:rgba(255,255,255,.16);line-height:1;">03</span>
          <span style="font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;color:#FFC22E;text-transform:uppercase;margin-top:18px;display:block;">Construir</span>
          <h4 style="font-family:'Fraunces',serif;font-weight:600;color:#FFFCF6;font-size:22px;margin:10px 0 12px;">Projetos, livros, eventos e experiências</h4>
          <p style="color:#B9B7AE;font-size:14.5px;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:110px 0;text-align:center;border-bottom:1px solid #CFC8B4;">
    <div style="max-width:1360px;margin:0 auto;padding:0 48px;">
      <span style="font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#711F2A;display:flex;align-items:center;gap:10px;justify-content:center;"><span style="width:22px;height:1px;background:#711F2A;display:inline-block;"></span>06 · Participação</span>
      <h2 style="font-family:'Fraunces',serif;font-weight:600;font-size:clamp(30px,4vw,48px);max-width:18ch;margin:18px auto 14px;">O Radar IB na sua caixa de entrada</h2>
      <p style="color:#54564F;max-width:48ch;margin:0 auto 40px;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:480px;margin:0 auto;border:1px solid #15171C;border-radius:2px;overflow:hidden;">
        <input type="email" placeholder="seu@email.com" aria-label="E-mail" style="flex:1;border:none;background:transparent;padding:16px 18px;font-family:inherit;font-size:14.5px;color:#15171C;"></input>
        <button type="submit" style="border:none;background:#15171C;color:#FFFCF6;padding:0 26px;font-size:14px;font-weight:600;" style-hover="background:#711F2A;">Quero receber</button>
      </form>
      <p style="margin-top:16px;font-size:12px;color:#8B8A7E;">Envio quinzenal. Cancele quando quiser.</p>
    </div>
  </section>

  <footer style="padding:70px 0 34px;background:#ECE6D6;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:56px;border-bottom:1px solid #CFC8B4;">
        <div>
          <a href="#top" style="font-family:'Fraunces',serif;font-weight:700;font-size:21px;display:flex;align-items:baseline;gap:2px;color:#15171C;margin-bottom:14px;">Info<span style="color:#711F2A;">Branding</span></a>
          <p style="font-size:13.5px;color:#8B8A7E;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-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#8B8A7E;margin-bottom:18px;">Conhecimento</h5>
          <ul style="margin:0;padding:0;list-style:none;">
            <li style="margin-bottom:11px;"><a href="#conhecimento" style="font-size:14px;color:#54564F;" style-hover="color:#15171C;">Descomplicando Branding</a></li>
            <li style="margin-bottom:11px;"><a href="#inteligencia" style="font-size:14px;color:#54564F;" style-hover="color:#15171C;">Radar IB</a></li>
            <li style="margin-bottom:11px;"><a href="#" style="font-size:14px;color:#54564F;" style-hover="color:#15171C;">Enciclopédia de Branding</a></li>
            <li style="margin-bottom:11px;"><a href="#" style="font-size:14px;color:#54564F;" style-hover="color:#15171C;">Pesquisas</a></li>
          </ul>
        </div>
        <div>
          <h5 style="font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#8B8A7E;margin-bottom:18px;">InfoBranding</h5>
          <ul style="margin:0;padding:0;list-style:none;">
            <li style="margin-bottom:11px;"><a href="#" style="font-size:14px;color:#54564F;" style-hover="color:#15171C;">Sobre</a></li>
            <li style="margin-bottom:11px;"><a href="#pessoas" style="font-size:14px;color:#54564F;" style-hover="color:#15171C;">Colaboradores</a></li>
            <li style="margin-bottom:11px;"><a href="#" style="font-size:14px;color:#54564F;" style-hover="color:#15171C;">Publicações</a></li>
            <li style="margin-bottom:11px;"><a href="#" style="font-size:14px;color:#54564F;" style-hover="color:#15171C;">Trabalhe conosco</a></li>
          </ul>
        </div>
        <div>
          <h5 style="font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#8B8A7E;margin-bottom:18px;">Experiências</h5>
          <ul style="margin:0;padding:0;list-style:none;">
            <li style="margin-bottom:11px;"><a href="#" style="font-size:14px;color:#54564F;" style-hover="color:#15171C;">Cursos &amp; workshops</a></li>
            <li style="margin-bottom:11px;"><a href="#" style="font-size:14px;color:#54564F;" style-hover="color:#15171C;">Palestras &amp; talks</a></li>
            <li style="margin-bottom:11px;"><a href="#" style="font-size:14px;color:#54564F;" style-hover="color:#15171C;">Eventos</a></li>
            <li style="margin-bottom:11px;"><a href="#" style="font-size:14px;color:#54564F;" style-hover="color:#15171C;">Projetos especiais</a></li>
          </ul>
        </div>
        <div>
          <h5 style="font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#8B8A7E;margin-bottom:18px;">Participe</h5>
          <ul style="margin:0;padding:0;list-style:none;">
            <li style="margin-bottom:11px;"><a href="#" style="font-size:14px;color:#54564F;" style-hover="color:#15171C;">Torne-se colaborador</a></li>
            <li style="margin-bottom:11px;"><a href="#participacao" style="font-size:14px;color:#54564F;" style-hover="color:#15171C;">Newsletter</a></li>
            <li style="margin-bottom:11px;"><a href="#" style="font-size:14px;color:#54564F;" style-hover="color:#15171C;">Fale conosco</a></li>
            <li style="margin-bottom:11px;"><a href="#" style="font-size:14px;color:#54564F;" style-hover="color:#15171C;">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:#8B8A7E;">© 2026 InfoBranding. Todos os direitos reservados.</p>
        <div style="display:flex;gap:14px;">
          <a href="#" aria-label="Instagram" style="width:34px;height:34px;border:1px solid #CFC8B4;border-radius:50%;display:flex;align-items:center;justify-content:center;" style-hover="border-color:#15171C;background:#FFFCF6;"><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 #CFC8B4;border-radius:50%;display:flex;align-items:center;justify-content:center;" style-hover="border-color:#15171C;background:#FFFCF6;"><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 #CFC8B4;border-radius:50%;display:flex;align-items:center;justify-content:center;" style-hover="border-color:#15171C;background:#FFFCF6;"><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' }
  ];

  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 .7s ease, transform .7s 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));
  }

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

  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,
      registerTab: () => {},
      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)', fontFamily: "'IBM Plex Mono',monospace",
            fontSize: '10.5px', letterSpacing: '.14em', textTransform: 'uppercase',
            color: isActive ? '#15171C' : '#8B8A7E', padding: '13px 0',
            borderLeft: '2px solid ' + (isActive ? '#711F2A' : 'transparent'),
            width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '8px',
            transition: 'color .3s ease, border-color .3s ease'
          },
          numStyle: { color: isActive ? '#711F2A' : '#8B8A7E', fontSize: '9.5px', transition: 'color .3s ease' }
        };
      }),
      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>
