/* ===== #missao — nao vaza para fora de .bl-missao ===== */
/* Lista NUMERADA de verdade (<ol>), e nao quatro cartoes: a ordem aqui
   significa alguma coisa. O item 1 e a regra de que todo numero e medido, e
   os tres seguintes so fazem sentido depois dela. O `01` fica em
   aria-hidden porque o <ol> ja numera para o leitor de tela, e ler "um. um.
   o numero que aparece" e ruido. */
.bl-missao__linha { font-size: 1.125rem; max-width: 54ch; }

.bl-missao__lista {
  list-style: none; margin: var(--bl-e6) 0 0; padding: 0;
  counter-reset: missao;
}
/* `--bl-regua-y` saiu em 07/09/2026: nenhum .bl-missao__item usa .bl-regua,
   entao nao ha pseudo-elemento nenhum para deslocar. Conferido:
   `grep -rn bl-regua site/parciais/` so volta investimento.html. O
   padding-block fica, que e ele quem separa um item do outro. */
.bl-missao__item { padding-block: var(--bl-e4); }
.bl-missao__linhas { display: grid; gap: var(--bl-e2); }
@media (min-width: 720px) {
  .bl-missao__linhas {
    grid-template-columns: 3.5rem minmax(0, 1fr);
    column-gap: var(--bl-e4); align-items: start;
  }
  .bl-missao__ordem { grid-row: 1 / span 2; }
}
.bl-missao__ordem {
  margin: 0;
  font-family: var(--bl-fonte-mono); font-size: 1.5rem; line-height: 1;
  /* Ambar-500 como TEXTO no claro da 2,17:1 e reprova. Aqui ele e forma
     preenchida de baixa carga semantica, mas ainda assim e glifo: fica no
     ambar-700, 4,80:1, que passa AA. */
  color: var(--bl-ambar-700);
  font-variant-numeric: tabular-nums;
}
.bl-missao__item h2 { margin: 0; font-size: 1.375rem; max-width: 26ch; }
.bl-missao__item p { margin: 0; color: var(--bl-texto-fraco); max-width: 58ch; }

/* O recorte negativo fecha a pagina. Ele nao e um item da lista de proposito:
   dizer onde a casa NAO serve nao e o quinto principio, e uma resposta a
   outra pergunta. Por isso muda de forma, e nao so de texto. */
.bl-missao__recorte {
  margin-top: var(--bl-e6);
  padding: var(--bl-e4);
  border: 1px solid var(--bl-borda); border-radius: 10px;
  background: var(--bl-fundo-alt);
  display: grid; gap: var(--bl-e3);
}
.bl-missao__recorte h2 { margin: 0; font-size: 1.25rem; max-width: 30ch; }
.bl-missao__recorte p { margin: 0; color: var(--bl-texto-fraco); max-width: 62ch; }