/* =========================================================
   Lockup da marca — símbolo + wordmark + assinatura.
   Usado no cabeçalho e no rodapé; o modificador --footer só muda escala.

   Por que a assinatura é texto e não parte da imagem:
   na arte oficial a linha "TECNOLOGIA & CONSULTORIA" é preta. Sobre o
   fundo escuro do site ela mede 1,5:1 de contraste — ilegível. Composta
   em HTML, os filetes dourados acompanham a largura exata do wordmark.
   ========================================================= */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Halo dourado discreto: destaca o chevron preto do fundo escuro. */
.brand__symbol {
  display: block;
  width: auto;
  height: 40px;
  filter: drop-shadow(0 0 16px rgba(245, 168, 0, .32));
}

.brand__text {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.brand__wordmark {
  display: block;
  width: auto;
  height: 24px;
  filter: drop-shadow(0 0 14px rgba(245, 168, 0, .22));
}

.brand__tagline {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #e9e8e3;
  font-size: 7.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* flex:1 faz os filetes preencherem exatamente a sobra do wordmark. */
.brand__tagline::before,
.brand__tagline::after {
  content: "";
  flex: 1 1 auto;
  min-width: 8px;
  height: 1px;
  background: var(--gold);
}

/* --- Variante do rodapé: mesmo lockup, escala menor --- */
.brand--footer .brand__symbol {
  height: 34px;
}

.brand--footer .brand__wordmark {
  height: 20px;
}

.brand--footer .brand__text {
  gap: 5px;
}

.brand--footer .brand__tagline {
  gap: 5px;
  font-size: 6.4px;
  letter-spacing: .08em;
}

@media (max-width: 620px) {
  .brand {
    gap: 10px;
  }

  .brand__symbol {
    height: 33px;
  }

  .brand__wordmark {
    height: 20px;
  }

  .brand__text {
    gap: 5px;
  }

  .brand__tagline {
    gap: 5px;
    font-size: 6.4px;
    letter-spacing: .08em;
  }
}