/* Entrada: a marca no alto, o cartão no centro e duas barrinhas mostrando a etapa (o mesmo desenho de percurso do Faro Quati). */
.entrada-pagina { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e5); padding: var(--e5) var(--e4); }
.entrada-marca { display: flex; align-items: center; gap: var(--e3); max-width: 26rem; width: 100%; }
.entrada-marca img { border-radius: 12px; flex: none; }
.entrada-marca strong { display: block; font-size: var(--t3); color: var(--marca); line-height: 1.15; }
.entrada-marca span { display: block; font-size: var(--t-1); color: var(--apoio); margin-top: 0.15rem; }

.entrada-cartao { width: 100%; max-width: 26rem; padding: var(--e5); }
.entrada-cartao h1 { font-size: var(--t3); margin-bottom: var(--e2); }
.entrada-cartao .lide { color: var(--apoio); font-size: var(--t0); margin-bottom: var(--e4); }
.entrada-cartao form { margin: 0; }
.entrada-cartao .acoes { display: flex; flex-direction: column; gap: var(--e2); margin-top: var(--e4); }
.entrada-cartao .aviso { margin: 0 0 var(--e4); }

.entrada-etapas { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--e2); margin: 0 0 var(--e4); padding: 0; }
.entrada-etapas li { padding-top: var(--e2); border-top: 4px solid var(--fio); font-size: var(--t-1); font-weight: 600; color: var(--apoio); transition: border-color var(--medio) var(--curva), color var(--medio) var(--curva); }
.entrada-etapas li.feita { border-color: var(--ok); color: var(--ok); }
.entrada-etapas li.atual { border-color: var(--botao); color: var(--marca); }

.codigo-do-app {
  font-family: var(--mono); font-size: 1.75rem; letter-spacing: 0.35em; text-align: center; padding-left: 0.35em;
}
.entrada-qr { display: grid; justify-items: center; gap: var(--e3); margin: var(--e4) 0; }
.entrada-qr > svg.qr { width: 12.5rem; height: 12.5rem; background: #fff; border: 1px solid var(--fio); border-radius: var(--raio); padding: var(--e2); }
.entrada-qr .botao svg { width: 1rem; height: 1rem; }
.chave-do-app { display: flex; align-items: center; gap: var(--e2); width: 100%; padding: var(--e2) var(--e3); background: var(--rebaixo); border: 1px dashed var(--fio-forte); border-radius: var(--raio); }
.chave-do-app code { flex: 1; font-family: var(--mono); font-size: var(--t-1); word-break: break-all; color: var(--marca); }

.passos { margin: 0 0 var(--e4); padding-left: 1.2rem; font-size: var(--t0); color: var(--tinta); }
.passos li { margin-bottom: var(--e2); }

.codigos-de-recuperacao { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--e2); margin: 0 0 var(--e4); padding: var(--e4); background: var(--rebaixo); border: 1px solid var(--fio); border-radius: var(--raio); }
.codigos-de-recuperacao li { font-family: var(--mono); font-size: var(--t1); text-align: center; color: var(--marca); letter-spacing: 0.04em; }
.linha-de-botoes { display: flex; gap: var(--e2); flex-wrap: wrap; margin-bottom: var(--e4); }
.linha-de-botoes .botao { flex: 1; }

.contagem { font-family: var(--mono); font-size: var(--t4); text-align: center; color: var(--marca); margin: var(--e4) 0; }
.entrada-rodape { max-width: 26rem; text-align: center; font-size: var(--t-1); color: var(--apoio); margin: 0; }

@media (max-width: 30rem) {
  .entrada-cartao { padding: var(--e4); }
  .codigos-de-recuperacao { grid-template-columns: 1fr; }
}