/* Telas de entrada (entrar, começar o teste, criar senha e assinar): o fundo da página, a marca no alto e um cartão
   no meio com o formulário. Visual do docs/design.md: só tokens do base.css, peça no chão sem sombra.
   No computador, entrar e começar ganham ao lado um cartão de destaque (o bloco vinho do sistema) com o Zero e o
   que tem lá dentro; no celular fica só o formulário. Onde o Zero aparece sozinho (criar senha, "olhe o seu
   e-mail", Pix pago ou vencido), ele fica EM CIMA do cartão. Um Zero por tela. Nada de rolagem lateral em 375 px. */

.porta {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  padding: env(safe-area-inset-top) 0 calc(20px + env(safe-area-inset-bottom));
}
.porta-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.porta-topo-acoes { display: flex; flex: none; align-items: center; gap: 8px; }
/* no celular mais estreito (320 px) a marca e a pílula ocupam a linha: o botão de tema fica pro site e pro app */
@media (max-width: 359px) { .porta-topo-acoes [data-tema-alternar] { display: none; } }
/* "Voltar ao site" / "Já tenho conta": pílula de contorno, sem a borda gorda (pesa menos que o botão do cartão) */
.porta-volta {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 15px;
  border: var(--bw) solid var(--linha-media);
  border-radius: var(--raio-pilula);
  color: var(--texto);
  font-family: var(--fonte-titulo);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .15s;
}
.porta-volta .ic { width: 18px; height: 18px; stroke-width: 2.4; }
@media (hover: hover) { .porta-volta:hover { background: var(--superficie-2); } }

.porta-miolo { display: grid; grid-template-columns: minmax(0, 1fr); flex: 1; align-content: center; justify-items: center; gap: 18px; padding: 14px 0 8px; }
.porta-cartao { display: grid; align-content: center; gap: 22px; width: 100%; padding: 26px 20px 24px; }
@media (min-width: 480px) { .porta-cartao { padding: 34px 32px 32px; } }
.porta-cabeca { display: grid; gap: 8px; }
/* h2.titulo: o título do cartão quando o do alto sai de cena (pedir link novo, "Olhe o seu e-mail") */
.porta-cabeca h1, .porta-cabeca h2.titulo { font-size: clamp(25px, 6.4vw, 29px); letter-spacing: -.02em; line-height: 1.12; }
.porta-cabeca h2 { font-size: 21px; letter-spacing: -.015em; }
/* a frase pode trazer o e-mail da pessoa (comprido, sem espaço): quebra onde precisar; as linhas saem equilibradas,
   sem uma palavra sozinha no fim */
.porta-cabeca p { color: var(--texto-2); font-size: 15.5px; line-height: 1.5; overflow-wrap: anywhere; text-wrap: balance; }
.porta-cabeca .etiqueta { justify-self: start; margin-bottom: 4px; }

/* o Zero em cima do cartão (criar senha, "olhe o seu e-mail", Pix pago ou vencido). .porta-kamurinha é o nome
   antigo, que a tela de assinar ainda usa. */
.porta-zero, .porta-kamurinha { width: 112px; margin-bottom: -6px; }
@media (min-width: 480px) { .porta-zero, .porta-kamurinha { width: 128px; } }

.porta form { display: grid; gap: 16px; }
.porta form > .btn { margin-top: 4px; }
.porta .rodape { color: var(--texto-3); font-size: 15px; text-align: center; }
.porta .rodape a { color: var(--acento); font-weight: 700; text-decoration-color: var(--acento-linha); }
/* quando o formulário dá lugar ao aviso ("Olhe o seu e-mail") não há mais botão em cima do link: ele acompanha o
   texto, à esquerda (no meio ficava solto embaixo de um título alinhado à esquerda) */
.porta form:has(> [role="status"]) + .rodape { text-align: left; }
.porta form:has(> [role="status"]) + .rodape .link-botao { margin-left: -4px; } /* o botão tem 4px de respiro de cada lado */
/* aviso no lugar do formulário ("Olhe o seu e-mail"): título, a mensagem e uma nota pequena, alinhados como o resto */
.porta-aviso { display: grid; gap: 16px; }
.porta-nota { color: var(--texto-3); font-size: 15px; }
.porta-nota a { color: var(--acento); font-weight: 700; text-decoration-color: var(--acento-linha); }
/* a frase embaixo do cartão (quebra equilibrada: no celular não sobra uma palavra sozinha na última linha) */
.porta-rodape { max-width: 36em; color: var(--texto-2); font-size: 15px; text-align: center; text-wrap: balance; }
.porta-rodape a { color: var(--acento); font-weight: 700; white-space: nowrap; text-decoration: underline; text-decoration-color: var(--acento-linha); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
@media (hover: hover) { .porta-rodape a:hover { text-decoration-color: currentColor; } }

/* regras da senha (o criar-senha.js troca a classe de cada linha pra "ok") */
.porta .dica { display: grid; gap: 4px; margin-top: -6px; color: var(--texto-3); font-size: 14px; }
.porta .dica .ok { color: var(--bom-texto); font-weight: 600; }
.porta .dica > span { display: flex; align-items: center; gap: 6px; }
.porta .dica > span > .ic { width: 16px; height: 16px; stroke-width: 2.2; }

/* estados (link vencido, "olhe o seu e-mail", pago): texto no meio; quem ilustra é o Zero em cima do cartão */
.porta .estado { display: grid; justify-items: center; gap: 12px; text-align: center; }
.porta .estado h2 { font-size: 22px; letter-spacing: -.015em; }
.porta .estado p { color: var(--texto-2); }
.porta .estado .btn { margin-top: 4px; }

/* ===== entrar e começar no computador: o formulário e, ao lado, o cartão de destaque com o Zero ===== */
/* sem o cartão ao lado (abaixo de 900px) o formulário fica na largura de sempre, a mesma do criar senha: sem isto
   ele esticava até a página inteira no tablet e na janela estreita do computador (campo de e-mail de 760px) */
.porta-miolo.largo { --wrap: 480px; }
.porta-dupla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; width: 100%; }
.porta-conteudo { display: grid; gap: 22px; }
/* (dois nomes de classe a mais: o .cartao.destaque do base.css tem display: grid e ganharia de um .porta-lado só) */
.porta-lado.cartao.destaque { display: none; }
@media (min-width: 900px) {
  .porta-miolo.largo { --wrap: 960px; }
  .porta-dupla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .porta-dupla > .porta-cartao { padding: 44px 44px 42px; }
  /* o destaque do sistema deitado vira coluna: o Zero em cima, o texto embaixo */
  .porta-lado.cartao.destaque {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    justify-items: start;
    gap: 18px;
    padding: 40px 40px 42px;
    /* os rabiscos do destaque (balança, livro, martelo) foram postos pro cartão deitado, com o Zero à direita;
       aqui o Zero fica em cima, à esquerda, e eles caíam na cabeça e na mão dele: vão pro canto livre, à direita */
    background-position: right 16px top 14px, 0 0;
    background-size: 230px auto, auto;
  }
  .porta-lado .destaque-mascote { width: 148px; }
  .porta-lado .destaque-texto { gap: 10px; }
  .porta-lado .destaque-texto h2 { font-size: 26px; }
  .porta-lado .destaque-texto > p { font-size: 15.5px; }
  /* com o Zero ao lado, o de cima do cartão não aparece (um por tela) */
  .porta-miolo.largo > .porta-zero { display: none; }
}

.lado-lista { display: grid; gap: 14px; margin: 8px 0 0; padding: 0; list-style: none; }
.lado-lista li { display: flex; align-items: center; gap: 12px; color: var(--texto-2); font-size: 14.5px; line-height: 1.4; text-wrap: pretty; }
.lado-lista .caixa-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--superficie-2); color: var(--texto); }
.lado-lista .caixa-ic .ic { width: 20px; height: 20px; }
.lado-lista b { display: block; color: var(--texto); font-family: var(--fonte-titulo); font-size: 15.5px; font-weight: 600; }