/* As telas de acesso: entrar, definir senha, esqueci.
 *
 * Herdam tudo de retorno.css (topo, faixa das madeiras, cartão e botões). Aqui
 * entra só o que essas três têm de diferente: campo de formulário, recados e a
 * conversa curta embaixo. O campo é o mesmo do cartão de assinatura da landing.
 *
 * Fonte de 16 px no campo de propósito: é o mínimo que o iPhone aceita sem dar
 * aquele zoom automático ao tocar no campo.
 */
main{max-width:480px}
main>p.sub{margin:0 0 24px}

form{margin:0}

.campo{margin:0 0 16px}
.campo label{display:block;margin:0 0 8px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--grafite)}
.campo input{width:100%;height:52px;padding:0 14px;font:inherit;font-size:16px;color:var(--preto);
  background:#fff;border:2px solid var(--hair);border-radius:0;outline:none;transition:border-color .2s}
.campo input::placeholder{color:#A9A69E}
.campo input:focus{border-color:var(--verde)}
.campo input.ruim{border-color:var(--vermelho)}

.dica{margin:7px 0 0;font-size:12.5px;color:var(--grafite);line-height:1.5}

.btn.bloco{width:100%;min-height:56px;margin-top:8px}
.btn[disabled]{opacity:.65;cursor:progress;transform:none}

/* o giro de espera dentro do botão */
.spin{width:15px;height:15px;display:none;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  border-radius:50%;animation:gira .7s linear infinite}
.btn.carregando .spin{display:inline-block}
@keyframes gira{to{transform:rotate(360deg)}}

.erro,.aviso,.feito{display:none;margin:14px 0 0;padding:12px 14px;font-size:13.5px;line-height:1.5;border-left:3px solid}
.erro{background:#F6E2DC;border-color:var(--vermelho);color:#8A3522}
.aviso{margin:0 0 20px;background:#F6EBDD;border-color:var(--laranja);color:#7A4608}
.feito{background:var(--verde-soft);border-color:var(--verde);color:#0B5A27}
.erro.on,.aviso.on,.feito.on{display:block}

.pes{margin-top:22px;font-size:13.5px;color:var(--grafite);text-align:center}
.pes a{color:var(--link,#007A2F);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.pes a:hover{color:var(--verde-h)}
.pes+.pes{margin-top:8px}