/* O visual das quatro telas da porta: entrar, assinar, aguardando e criar senha.
   Mesmas cores da plataforma, para quem paga nao achar que mudou de lugar. */
:root{
  --fundo:#0E1620; --fundo2:#131F2C; --fundo3:#1A2A3A;
  --linha:#243849; --linha2:#33506A;
  --texto:#F3F0E9; --texto2:#B9C4CF; --texto3:#87949F;
  --acento:#E0A140; --verde:#5FBE92; --vermelho:#DE7F63;
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:24px;background:var(--fundo);color:var(--texto);
  font:15px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif}
.caixa{width:100%;max-width:440px;background:var(--fundo2);border:1px solid var(--linha);
  border-radius:14px;padding:32px}
.marca{font-weight:800;letter-spacing:-.02em;font-size:1.05rem;margin-bottom:22px}
.marca span{color:var(--acento)}
h1{margin:0 0 6px;font-size:1.5rem;letter-spacing:-.02em}
p.lede{margin:0 0 22px;color:var(--texto2)}
label{display:block;margin:0 0 6px;color:var(--texto2);font-size:.9rem}
input[type=text],input[type=email],input[type=password]{width:100%;padding:11px 13px;margin-bottom:16px;
  background:var(--fundo3);border:1px solid var(--linha);border-radius:9px;color:var(--texto);font:inherit}
input:focus{outline:none;border-color:var(--linha2)}
button.acao{width:100%;padding:13px;background:var(--acento);color:#17120A;border:none;
  border-radius:9px;font:inherit;font-weight:700;cursor:pointer}
button.acao:disabled{opacity:.55;cursor:default}
.planos{display:grid;gap:10px;margin-bottom:18px}
.plano{display:flex;align-items:center;gap:12px;padding:13px;background:var(--fundo3);
  border:1px solid var(--linha);border-radius:10px;cursor:pointer}
.plano.escolhido{border-color:var(--acento)}
.plano b{display:block}
.plano small{color:var(--texto3)}
.plano .preco{margin-left:auto;font-weight:700;color:var(--acento)}
.termos{display:flex;gap:9px;align-items:flex-start;margin-bottom:18px;
  color:var(--texto2);font-size:.88rem}
.recado{margin-top:16px;padding:11px 13px;border-radius:9px;font-size:.9rem;display:none}
.recado.ruim{display:block;background:#3A1F1A;color:var(--vermelho)}
.recado.bom{display:block;background:#16302A;color:var(--verde)}
.pe{margin-top:20px;text-align:center;color:var(--texto3);font-size:.88rem}
.pe a{color:var(--acento)}
.girando{width:34px;height:34px;margin:26px auto;border:3px solid var(--linha);
  border-top-color:var(--acento);border-radius:50%;animation:gira 1s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}