/* ==========================================================================
   A CATRACA DO APLICATIVO — a tela onde o gabinete passa para a versão nova.

   Arquivo próprio, e pequeno de propósito. O que o CSS acrescenta aqui não é
   enfeite: é LEGIBILIDADE DE UM CONSENTIMENTO. A decisão é irreversível para
   quem trabalha no gabinete, e a tela só funciona se as quatro frases forem
   lidas até o fim.

   Duas medidas, e as duas foram tomadas olhando a tela renderizada:

     1. LARGURA DE LEITURA. No painel aberto num monitor de 27", o cartão
        esticava até a borda e cada aviso virava uma linha de 160 caracteres —
        a distância que o olho percorre para voltar ao começo da linha seguinte
        é onde se perde a leitura. 68ch é a medida de texto corrido.
     2. A CONFIRMAÇÃO TEM MOLDURA. Sem ela, a caixa de marcar ficava colada no
        fim da lista, como se fosse o quinto item — e o último degrau antes do
        irreversível não pode parecer mais um parágrafo.
   ========================================================================== */
.virada { max-width: 68ch; }

.virada__avisos {
  display: grid;
  gap: var(--esp-4);
  margin: 0 0 var(--esp-5);
  padding-left: var(--esp-5);
}

.virada__avisos > li { line-height: 1.55; }

.virada__confirmacao {
  /* FLEX, e não block: `.marcacao` é inline-flex, e sobrescrever para block
     quebrava a linha entre a caixa de marcar e o texto — a caixa ficava
     sozinha em cima da frase que ela confirma. */
  display: flex;
  align-items: flex-start;
  margin-bottom: var(--esp-4);
  padding: var(--esp-4);
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-sm);
  background: var(--cor-fundo-sutil, var(--cor-fundo-elevado));
}