/* secao
   O cabecalho que abre qualquer bloco da pagina: contexto, titulo e nota. Depende de tokens.css e base.css. */

.secao {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 26px;
}

/* a linha miuda com o losango, que diz de que bloco se trata */
.secao__contexto {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-family: var(--fonte-mono);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
}

.secao__contexto::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--accent);
  transform: rotate(45deg);
}

.secao h2 {
  margin: 0;
  font-family: var(--fonte-serif);
  font-size: clamp(1.9rem, 4.4vw, 2.9rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.secao__nota {
  margin: 0;
  max-width: 68ch;
  font-size: .96rem;
  color: var(--ink-soft);
}