/* Marca Melhor Processo — lockup reutilizável (símbolo "mp" + nome em texto).
 *
 * Uso:
 *   <div class="mp-lockup">            → fundo claro (nome charcoal + cinza)
 *   <div class="mp-lockup mp-escuro">  → fundo escuro (nome branco + cinza claro)
 *     <img src="img/mp-logo-dark.svg"> (claro) ou "img/mp-logo.svg" (escuro)
 *     <div class="mp-nome"><span class="mp-n1">MELHOR</span><span class="mp-n2">PROCESSO</span></div>
 *   </div>
 *
 * Tudo é medido em "em": para aumentar ou diminuir o lockup em cada tela basta
 * mudar o font-size do .mp-lockup (o padrão equivale ao exemplo do manual em
 * 24px; o símbolo acompanha a altura das duas linhas do nome).
 */
.mp-lockup {
  display: inline-flex;
  align-items: center;
  gap: .62em;
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.05;
  color: #23262d;
  text-decoration: none;
  white-space: nowrap;
}
.mp-lockup img {
  display: block;
  height: 2.35em;
  width: auto;
  flex-shrink: 0;
}
.mp-nome { display: flex; flex-direction: column; gap: .08em; }
.mp-n1 {
  font-weight: 900;
  font-size: 1em;
  letter-spacing: .17em;    /* ~4px a 24px */
  color: #23262d;
}
.mp-n2 {
  font-weight: 400;
  font-size: .875em;
  letter-spacing: .33em;    /* ~7px a 21px */
  color: #6b7179;
}

/* versão para fundo escuro */
.mp-escuro .mp-n1 { color: #ffffff; }
.mp-escuro .mp-n2 { color: #c9ced6; }