/* Peças comuns às telas dos passos */
.tela-cabeca .lead { margin-top: var(--e1); }

/* Aviso de erro: vermelho e parado (sem animação) */
.aviso-erro {
  color: var(--errado);
  font-size: var(--t-ui);
  font-weight: 600;
  line-height: 1.4;
}

/* Frase de apoio no fim de um bloco, com um fio terracota à esquerda */
.nota-fixa {
  max-width: 34rem;
  padding-left: var(--e4);
  border-left: 2px solid var(--terracota);
  font-family: var(--f-display);
  font-size: 1.375rem;
  line-height: 1.25;
  color: var(--grafite);
  text-wrap: pretty;
}

/* Bloco com título (h2) e texto, usado nas seções internas dos passos */
.bloco { display: grid; gap: var(--e4); }
.bloco-cabeca { display: grid; gap: var(--e2); }
.bloco-cabeca p { max-width: 36rem; }

/* Bloco que abre e fecha */
.abrir-fechar {
  display: inline-flex;
  align-items: center;
  gap: var(--e3);
  min-height: 3rem;
  padding: 0 var(--e5) 0 var(--e4);
  border: 1.5px solid var(--grafite);
  border-radius: var(--r-pilula);
  background: var(--papel);
  color: var(--grafite);
  font-size: var(--t-ui);
  font-weight: 600;
  text-align: left;
  transition: background-color 200ms var(--ease-suave), color 200ms var(--ease-suave), transform 160ms var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.abrir-fechar-icone { display: grid; place-items: center; }
.abrir-fechar-icone svg { width: 1.125rem; height: 1.125rem; transition: transform 360ms var(--ease); }
.abrir-fechar[aria-expanded="true"] .abrir-fechar-icone svg { transform: rotate(135deg); }
@media (hover: hover) { .abrir-fechar:hover { background: var(--grafite); color: var(--papel); } }
.abrir-fechar:active { transform: scale(.98); }
.abrir-fechar-bloco { display: grid; gap: var(--e4); justify-items: start; }
.painel-aberto { width: 100%; }

/* No celular o botão do passo ocupa a largura toda: alvo grande, sem sobrar canto */
@media (max-width: 29.99em) {
  .tela-rodape { justify-items: stretch; }
  .tela-rodape .acoes { display: grid; gap: var(--e2); }
  .tela-rodape .btn { width: 100%; }
  .tela-rodape .btn-texto { justify-self: start; }
}