/* ==========================================================================
   STHEFANY — confirmação da newsletter
   confirmacao.css · v0.1.0
   --------------------------------------------------------------------------
   Vinda do protótipo 0.96.0 sem alteração de regra. O que muda no tema é quem
   escolhe o estado: lá era um atributo trocado pelo painel do protótipo, aqui
   é o PHP que desenha só o caso da vez — por isso os seletores de `data-estado`
   não vieram junto. Um seletor que nenhum HTML aciona é regra morta, e regra
   morta é o que a verificação de classes órfãs existe para pegar.
   --------------------------------------------------------------------------
   A página onde o link do e-mail aterrissa.

   Até aqui ela não existia: o clique no link de confirmação levava para a home
   com `?news=confirmado` na barra de endereço e NENHUMA tela lia esse
   parâmetro. Quem confirmava caía na página inicial sem uma palavra — e a
   pessoa que fecha a aba antes de a home carregar não sabe se assinou.

   São cinco desfechos, não um. Confirmado é o bom; os outros quatro existem
   porque link de e-mail é clicado dias depois, duas vezes, ou por engano:

     confirmado      acabou de confirmar
     ja-confirmado   já tinha confirmado antes — clicou de novo
     expirado        passou dos sete dias
     invalido        token usado, trocado ou adulterado
     descadastrado   saiu da lista pelo link do rodapé

   TODOS eles terminam com um caminho de saída. Tela de erro sem saída
   transfere para o visitante um problema que é nosso: ele não tem como saber
   se o defeito foi o link, o prazo ou o site.

   A página é um TOPO, e não um cartão escuro sobre papel branco. A razão está
   escrita em topo.css desde a 0.71.0: o cabeçalho é fixo, escuro e flutuante,
   e sobre papel branco ele vira uma barra solta no alto da tela, com a marca
   branca invisível. A fotografia não é enfeite aqui — é o chão do cabeçalho.

   Só que este topo não é abertura de nada: ele É a página. Por isso o conteúdo
   fica centrado na vertical, e não encostado na base como nos demais.
   ========================================================================== */

/* Nos outros topos o conteúdo encosta na base, porque abaixo dele vem a
   lista. Aqui não vem nada: centrado, o desfecho fica na altura dos olhos em
   vez de no rodapé de um bloco alto e vazio. */
.sp-topo--confirma {
  align-items: center;
  min-height: min(76svh, 40rem);
  padding-block: calc(var(--sp-cabecalho) + var(--sp-e-7)) var(--sp-e-8);
  text-align: center;
}

.sp-confirma {
  inline-size: min(100%, 46rem);
  margin-inline: auto;
}

.sp-confirma__selo {
  display: grid;
  place-items: center;
  inline-size: 4.5rem;
  block-size: 4.5rem;
  margin-inline: auto;
  margin-block-end: var(--sp-e-5);
  border-radius: 50%;
  border: 1px solid var(--sp-linha);
  font-size: 1.75rem;
  line-height: 0;
  color: var(--sp-acento-texto);
}

/* O selo animado já tem desenho próprio e dispensa a moldura: dois círculos
   concêntricos viram alvo de tiro. */
.sp-confirma__selo--certo { border: 0; }

/* Neutro para o que não é erro nem sucesso — já estava confirmado, já saiu.
   Pintar de vermelho um desfecho que não é problema faz a pessoa procurar um
   problema que não existe. */
.sp-confirma__selo--neutro { color: var(--sp-texto-2); }

.sp-confirma__titulo {
  font-family: var(--sp-fonte-titulo);
  font-size: var(--sp-t-h2);
  font-weight: 700;
  line-height: var(--sp-lh-titulo);
  letter-spacing: -.01em;
}

.sp-confirma__texto {
  max-inline-size: 46ch;
  margin-inline: auto;
  margin-block-start: var(--sp-e-5);
  color: var(--sp-texto-2);
  line-height: var(--sp-lh-corpo);
}

.sp-confirma__texto b { color: var(--sp-texto); font-weight: 600; }

.sp-confirma__acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-e-4);
  margin-block-start: var(--sp-e-6);
}

.sp-confirma__nota {
  max-inline-size: 52ch;
  margin-inline: auto;
  margin-block-start: var(--sp-e-6);
  padding-block-start: var(--sp-e-5);
  border-block-start: 1px solid var(--sp-linha);
  color: var(--sp-texto-3);
  font-size: var(--sp-t-peq);
  line-height: 1.6;
}

.sp-confirma__nota a { color: var(--sp-texto-2); }

@media (max-width: 48rem) {
  .sp-topo--confirma {
    min-height: min(70svh, 32rem);
    padding-block: calc(var(--sp-cabecalho-min) + var(--sp-e-7)) var(--sp-e-7);
  }
  .sp-confirma__acoes .sp-botao { inline-size: 100%; justify-content: center; }
}