/* ============================================================
   Follower Brands — Logo (componente reutilizável)
   ------------------------------------------------------------
   Markup:
     <a class="fb-logo">f<span class="o"></span>ll<span class="o"></span>wer<span class="brands">brands</span></a>

   Cor: defina --fb-accent (a palavra "brands" + o miolo dos "o").
   Tinta: --fb-ink (preto no claro; off-white no escuro).
   Tamanho: font-size no .fb-logo.

   Rodízio de cor: use scripts/logo.js (sorteia --fb-accent por visita).
   Fonte: Poppins SemiBold (carregar via Google Fonts). Aproximação da
   fonte original — trocar aqui se receber o vetor oficial.
   ============================================================ */

.fb-logo {
  --fb-ink: #101014;
  --fb-accent: var(--accent, #ff5722);
  font-family: 'Poppins', -apple-system, sans-serif;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--fb-ink);
  display: inline-flex;
  align-items: baseline;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
}
.fb-logo .brands { color: var(--fb-accent); }

/* "o" vira alvo: anel na cor da tinta + miolo na cor de acento */
.fb-logo .o {
  display: inline-block;
  width: 0.60em;
  height: 0.60em;
  border-radius: 50%;
  border: 0.155em solid var(--fb-ink);
  box-sizing: border-box;
  position: relative;
  margin: 0 0.014em;
  transform: translateY(0.045em);
}
.fb-logo .o::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0.17em;
  height: 0.17em;
  border-radius: 50%;
  background: var(--fb-accent);
}