/* Tela A2 — entrar ou criar conta.
 * No desktop é um cartão centrado sobre o fundo; no telefone ocupa a tela
 * inteira em branco, como no quadro do canvas. Desktop primeiro. */

.acesso { align-items: center; justify-content: center; padding: 48px var(--medianiz) }

.acesso__cartao {
  width: 100%;
  max-width: 440px;
  background: var(--sf);
  border-radius: var(--raio-cartao);
  box-shadow: var(--sombra);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.acesso__volta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 700;
  color: var(--t2);
  text-decoration: none;
}

.acesso__titulo { display: flex; flex-direction: column; gap: 6px }

.acesso__titulo h1 {
  margin: 0;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.acesso__titulo p { margin: 0; font-size: 15px; color: var(--t2) }

.acesso__campos { display: flex; flex-direction: column; gap: 12px }

.acesso__esqueci {
  align-self: flex-end;
  min-height: 32px;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--pr);
  text-decoration: none;
}

.acesso__ou {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--t2);
}

.acesso__ou::before,
.acesso__ou::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ln);
}

.acesso__acoes { display: flex; flex-direction: column; gap: 12px }

/* ------------------------------------------------------------ corte 899 --- */
@media (max-width: 899px) {
  .acesso { align-items: stretch; justify-content: flex-start; padding: 0; background: var(--sf) }

  .acesso__cartao {
    flex: 1;
    max-width: 480px;
    margin: 0 auto;
    border-radius: 0;
    box-shadow: none;
    padding: 12px var(--medianiz) calc(28px + env(safe-area-inset-bottom, 0px));
  }

  /* no telefone a decisão desce para o rodapé, como no quadro */
  .acesso__acoes { margin-top: auto }
}