/* Etapa 13 — página de entrada. Provisória (sem cânone de login); só tokens da identidade. */
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--ally-gradiente-02, var(--ally-fundo));
  color: var(--ally-texto);
  font-family: var(--ally-fonte);
}
.entrar {
  max-width: 380px;
  margin: 0 auto;
  padding: 12vh 20px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.entrar-marca { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 500; }
.entrar-marca img { width: 28px; height: 28px; }
.entrar-cartao {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border: 1px solid var(--ally-traco-forte);
  border-radius: var(--ally-raio);
  background: var(--ally-elevado);
}
.entrar-cartao h1 { margin: 0; font-size: 18px; font-weight: 500; }
.entrar-cartao h2 { margin: 0; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ally-texto-suave); }
.entrar-cartao p { margin: 0; font-size: 13px; color: var(--ally-texto-suave); line-height: 1.5; }
.entrar-cartao label { font-size: 12px; color: var(--ally-texto-suave); }
.entrar-cartao input, .entrar-cartao select {
  padding: 8px;
  border: 1px solid var(--ally-traco-forte);
  border-radius: var(--ally-raio);
  background: var(--ally-abismo);
  color: var(--ally-texto);
  font: inherit;
  font-size: 14px;
}
.entrar-botao {
  padding: 9px 12px;
  border: 0;
  border-radius: var(--ally-raio);
  background: var(--ally-violeta);
  color: var(--ally-texto-em-violeta);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.entrar-botao:disabled { opacity: 0.6; cursor: default; }
.entrar-botao-sec { background: transparent; color: var(--ally-texto); border: 1px solid var(--ally-traco-forte); }
.entrar-msg:empty { display: none; }
a.entrar-botao { display: block; text-align: center; text-decoration: none; }
.entrar-cartao .entrar-email { color: var(--ally-texto); font-weight: 500; overflow-wrap: anywhere; }

/* Botão do Google: o "G" num disco claro (as cores do G só funcionam sobre branco), o texto ao lado. */
a.entrar-botao-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.entrar-g {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin: -2px 0;
  border-radius: 50%;
  background: #fff;
}
.entrar-g img { display: block; width: 15px; height: 15px; }

.entrar-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* A chegada (modo concluir): o lockup em movimento, sem a moldura do cartão. Proporções do lockup medidas
   no SVG (README §3.3), em função da altura do símbolo (--tam): o lettering ocupa y 56–437 de um artboard
   em que o símbolo tem 512, e o respiro símbolo → ALLY é 108,81. */
.entrar-cartao.entrar-chegada {
  align-items: center;
  gap: 6px;
  padding-top: 4vh;
  border-color: transparent;
  background: transparent;
  text-align: center;
}
.entrar-lockup {
  --tam: 80px;
  display: flex;
  align-items: flex-start;
  gap: calc(var(--tam) * 108.81 / 512);
  margin: 0 0 18px;
}
.entrar-lockup .ally-marca {
  --ally-marca-tam: var(--tam);
  --ally-marca-atraso: 0.9s;
  animation: entrar-chega 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.entrar-nome {
  display: block;
  flex: 0 0 auto;
  height: calc(var(--tam) * 381 / 512);
  aspect-ratio: 1129 / 381;
  margin-top: calc(var(--tam) * 56 / 512);
  fill: var(--ally-neutro);
  overflow: visible;
}
.entrar-letra {
  transform-box: fill-box;
  animation: entrar-letra 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(0.25s + var(--i) * 0.09s);
}
.entrar-nome-tagline { animation: entrar-tagline 0.8s ease-out 0.75s both; }
.entrar-chegada .entrar-msg { font-size: 13px; }
@keyframes entrar-chega {
  from { opacity: 0; transform: scale(0.88); }
  to { opacity: 1; transform: none; }
}
@keyframes entrar-letra {
  from { opacity: 0; transform: translateY(22%); }
  to { opacity: 1; transform: none; }
}
@keyframes entrar-tagline {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .entrar-lockup .ally-marca,
  .entrar-letra,
  .entrar-nome-tagline { animation: none; }
}
@media (max-width: 360px) {
  .entrar-lockup { --tam: 64px; }
}