/* Clube Belovers · cadastro em etapas (celular, fila da loja)
   Tokens copiados da landing (styles.css): creme + tinta, rosa como CTA,
   tiffany como acento secundário. Plus Jakarta Sans (perguntas) + Inter (texto).
   Uma pergunta por tela, barra fina de progresso no topo, transições suaves. */

:root {
  --creme: 38 58% 96%;          /* #FBF7F0 fundo */
  --creme-2: 36 45% 93%;        /* #F4EEE3 */
  --tinta: 18 14% 15%;          /* #2A2320 texto */
  --tinta-80: 17 9% 27%;        /* #4A423E */
  --tinta-70: 20 5% 41%;        /* #6E6863 texto secundário (5,1:1 sobre creme) */
  --tinta-40: 20 6% 49%;        /* #847C76 borda de controle (3,1:1) */
  --linha: 36 24% 87%;          /* #E7E1D8 divisórias */
  --branco: 0 0% 100%;

  --rosa-ink: 338 84% 46%;      /* #D71264 CTA e texto de marca */
  --rosa-hover: 338 85% 40%;
  --rosa-soft: 338 70% 95%;
  --tiffany: 182 45% 60%;       /* #7EC8CB acento secundário */
  --tiffany-ink: 182 55% 28%;

  --erro: 4 71% 41%;            /* #B3261E */
  --erro-bg: 6 70% 95%;
  --sucesso: 154 46% 34%;

  --font-display: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --ease-ios: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-entra: 420ms;
  --dur-sai: 320ms;
  --gutter: 1.5rem;
  --topo-h: 3.5rem;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  min-height: 100%;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

body {
  min-height: 100%;
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.5;
  color: hsl(var(--tinta));
  background-color: hsl(var(--creme));
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

img, svg { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }
fieldset { border: 0; min-width: 0; }
ol[role="list"] { list-style: none; }

:focus-visible {
  outline: 2px solid hsl(var(--tinta));
  outline-offset: 3px;
  border-radius: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- App: ocupa a altura visível, nada rola fora das telas ---------- */
.app {
  /* Em fluxo normal (não fixo): com o teclado aberto no iPhone, a página rola e os campos continuam
     visíveis. Altura mínima da tela para o botão ficar embaixo quando o conteúdo é curto. */
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background-color: hsl(var(--creme));
}

/* ---------- Topo ---------- */
.topo {
  flex: none;
  padding-top: env(safe-area-inset-top);
}

.progresso {
  height: 3px;
  background-color: hsl(var(--linha));
}

.progresso-barra {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 0 2px 2px 0;
  background-color: hsl(var(--rosa-ink));
  transition: width 520ms var(--ease-ios);
}

.topo-linha {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--topo-h);
  padding: 0 0.5rem;
}

.btn-voltar {
  grid-column: 1;
  justify-self: start;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  color: hsl(var(--tinta));
  transition: background-color 0.15s ease, opacity 0.2s ease;
}

.btn-voltar:hover { background-color: hsl(var(--tinta) / 0.06); }
.btn-voltar:active { background-color: hsl(var(--tinta) / 0.1); }
.btn-voltar[hidden] { display: none; }

.topo-logo {
  grid-column: 2;
  height: 1.625rem;
  width: auto;
}

.topo-etapa {
  grid-column: 3;
  justify-self: end;
  padding-right: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: hsl(var(--tinta-70));
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---------- Palco e telas ---------- */
.palco {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-x: clip; /* esconde o deslize lateral da transição sem criar rolagem interna */
}

.tela {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* A tela que está saindo fica sobreposta só durante a animação */
.tela.is-saindo {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.tela[hidden] { display: none; }

.tela-corpo {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.75rem var(--gutter) 1rem;
}

.tela-corpo--centro {
  justify-content: center;
  padding-bottom: 3rem;
}

.tela-acoes {
  flex: none;
  display: grid;
  gap: 0.25rem;
  padding: 0.75rem var(--gutter) calc(1rem + env(safe-area-inset-bottom));
}

/* Transições estilo iPhone: a atual sai levemente para a esquerda, a próxima entra da direita */
@keyframes tela-entra {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes tela-sai {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-16px); }
}
@keyframes tela-entra-volta {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes tela-sai-volta {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(16px); }
}

.tela.is-entrando { animation: tela-entra var(--dur-entra) var(--ease-ios) both; }
.tela.is-saindo { animation: tela-sai var(--dur-sai) var(--ease-ios) both; pointer-events: none; }
.palco[data-dir="voltar"] .tela.is-entrando { animation-name: tela-entra-volta; }
.palco[data-dir="voltar"] .tela.is-saindo { animation-name: tela-sai-volta; }

/* ---------- Tipografia das telas ---------- */
.pergunta {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.625rem, 6.5vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: hsl(var(--tinta));
  text-wrap: balance;
  outline: none;
}

.pergunta--grande {
  font-size: clamp(2rem, 9vw, 2.625rem);
  font-weight: 800;
}

.apoio {
  margin-top: 0.625rem;
  font-size: 1rem;
  line-height: 1.5;
  color: hsl(var(--tinta-70));
  text-wrap: pretty;
}

.link {
  display: inline;
  padding: 0;
  color: hsl(var(--rosa-ink));
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}

.link:hover { color: hsl(var(--rosa-hover)); }

/* ---------- Campo ---------- */
.campo { margin-top: 1.75rem; }

.entrada {
  width: 100%;
  height: 3.5rem;
  padding: 0 1rem;
  border: 1px solid hsl(var(--tinta-40));
  border-radius: 0.875rem;
  background-color: hsl(var(--branco));
  color: hsl(var(--tinta));
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.entrada::placeholder {
  color: hsl(var(--tinta-40));
  font-weight: 400;
}

.entrada:focus {
  outline: none;
  border-color: hsl(var(--rosa-ink));
  box-shadow: 0 0 0 3px hsl(var(--rosa-ink) / 0.18);
}

.entrada[aria-invalid="true"] {
  border-color: hsl(var(--erro));
}

.entrada[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px hsl(var(--erro) / 0.16);
}

/* Movimento sutil ao errar (sem exagero) */
@keyframes toque {
  20% { transform: translateX(-3px); }
  60% { transform: translateX(3px); }
  100% { transform: translateX(0); }
}
.is-toque { animation: toque 0.28s ease-out; }

/* Sugestões de domínio no e-mail: pílulas que completam o endereço com um toque */
.sugestoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.sugestao {
  height: 2.25rem;
  padding: 0 0.875rem;
  border: 1px solid hsl(var(--linha));
  border-radius: 9999px;
  background-color: hsl(var(--branco));
  color: hsl(var(--tinta));
  font-family: var(--font-text);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.sugestao:hover,
.sugestao:focus-visible {
  border-color: hsl(var(--rosa-ink));
  color: hsl(var(--rosa-ink));
  outline: none;
}

.sugestao:active { transform: scale(0.97); }

.erro {
  margin-top: 0.5rem;
  min-height: 1.3125rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: hsl(var(--erro));
}

.estado {
  margin-top: 0.25rem;
  min-height: 1.3125rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: hsl(var(--tinta-70));
}

/* ---------- Botões ---------- */
.btn-primario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: 100%;
  height: 3.25rem;
  padding: 0 1.5rem;
  border-radius: 9999px;
  background-color: hsl(var(--rosa-ink));
  color: hsl(var(--branco));
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, opacity 0.2s ease, transform 0.15s var(--ease-ios);
}

.btn-primario:hover { background-color: hsl(var(--rosa-hover)); }
.btn-primario:active { transform: scale(0.98); }
.btn-primario:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.btn-primario[hidden] { display: none; }

.btn-primario.is-carregando { pointer-events: none; }
.btn-primario.is-carregando::before {
  content: "";
  width: 1rem;
  height: 1rem;
  border: 2px solid hsl(var(--branco) / 0.35);
  border-top-color: hsl(var(--branco));
  border-radius: 50%;
  animation: girar 0.8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.btn-texto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 2.75rem;
  border-radius: 9999px;
  color: hsl(var(--tinta));
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.2s ease;
}

.btn-texto:hover { background-color: hsl(var(--tinta) / 0.05); }
.btn-texto:disabled { color: hsl(var(--tinta-70)); cursor: default; background: none; }
.btn-texto--leve { color: hsl(var(--tinta-70)); font-weight: 400; }

/* ---------- Nascimento: dia, mês e ano ---------- */
.data {
  display: grid;
  grid-template-columns: 1fr 1fr 1.5fr;
  gap: 0.5rem;
}

/* Campos da data um pouco menores que os outros: três lado a lado têm que caber com folga em 360 px */
.data .entrada {
  height: 3.25rem;
  padding: 0 0.75rem;
  font-size: 1.25rem;
  text-align: center;
}

.data label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: hsl(var(--tinta-70));
}

.data .entrada {
  padding: 0 0.5rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ---------- Termo (mesmo comportamento da landing: libera ao chegar no fim) ---------- */
.termo-box {
  flex: 1 1 10rem;
  min-height: 10rem;
  margin-top: 1.25rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 1rem 1.125rem;
  border: 1px solid hsl(var(--tinta-40));
  border-radius: 0.875rem;
  background-color: hsl(var(--branco));
  font-size: 0.875rem;
  line-height: 1.55;
  color: hsl(var(--tinta-80));
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--tinta-40)) transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.termo-box:focus-visible {
  outline: none;
  border-color: hsl(var(--rosa-ink));
  box-shadow: 0 0 0 3px hsl(var(--rosa-ink) / 0.18);
}

.termo-box.is-read { border-color: hsl(var(--tiffany-ink) / 0.6); }

.termo-box.is-attention {
  border-color: hsl(var(--erro));
  box-shadow: 0 0 0 3px hsl(var(--erro) / 0.18);
}

.termo-box h2 {
  font-family: var(--font-text);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  color: hsl(var(--tinta));
}

.termo-versao {
  margin-top: 0.125rem;
  font-size: 0.75rem;
  color: hsl(var(--tinta-70));
}

.termo-box p + p { margin-top: 0.75rem; }

.termo-box h3 {
  margin-top: 1rem;
  font-family: var(--font-text);
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(var(--tinta));
}

.termo-box h3 + p { margin-top: 0.25rem; }

.termo-hint {
  flex: none;
  margin-top: 0.625rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: hsl(var(--tinta-70));
  transition: color 0.2s ease;
}

.termo-hint.is-ok { color: hsl(var(--tiffany-ink)); }

/* Checkbox acessível: input nativo escondido, caixa desenhada ao lado */
.check {
  position: relative;
  flex: none;
  display: grid;
  grid-template-columns: 1.375rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  margin-top: 0.875rem;
  cursor: pointer;
}

.check input {
  position: absolute;
  width: 1.375rem;
  height: 1.375rem;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.check input:disabled { cursor: not-allowed; }

.check-box {
  display: grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  margin-top: 0.125rem;
  border: 1px solid hsl(var(--tinta-40));
  border-radius: 0.375rem;
  background-color: hsl(var(--branco));
  color: hsl(var(--branco));
  transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.check-box svg { opacity: 0; transition: opacity 0.15s ease; }

.check input:checked + .check-box {
  background-color: hsl(var(--rosa-ink));
  border-color: hsl(var(--rosa-ink));
}

.check input:checked + .check-box svg { opacity: 1; }

.check input:focus-visible + .check-box {
  outline: 2px solid hsl(var(--tinta));
  outline-offset: 3px;
}

.check input:disabled + .check-box { opacity: 0.4; }
.check input:disabled ~ .check-text { color: hsl(var(--tinta-70)); }

.check-text {
  font-size: 0.875rem;
  line-height: 1.5;
  color: hsl(var(--tinta));
  transition: color 0.15s ease;
}

#erro-termo { flex: none; }

/* ---------- Código de 6 números ---------- */
.codigo {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.5rem;
}

.codigo .entrada {
  padding: 0;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  caret-color: hsl(var(--rosa-ink));
}

.codigo.is-ok .entrada { border-color: hsl(var(--sucesso)); }

/* ---------- Sucesso ---------- */
.marca-ok {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 1.25rem;
  border-radius: 50%;
  color: hsl(var(--rosa-ink));
  background-color: hsl(var(--rosa-soft));
}

.passos {
  margin-top: 1.75rem;
  counter-reset: passo;
}

.passos li {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.875rem 0;
  border-top: 1px solid hsl(var(--linha));
  font-size: 1rem;
  line-height: 1.5;
  color: hsl(var(--tinta-80));
}

.passos li:last-child { border-bottom: 1px solid hsl(var(--linha)); }

.passos li::before {
  counter-increment: passo;
  content: counter(passo);
  font-family: var(--font-display);
  font-weight: 700;
  color: hsl(var(--rosa-ink));
  font-variant-numeric: tabular-nums;
}

/* ---------- Telas largas (desktop abre a página também) ---------- */
@media (min-width: 40rem) {
  .tela-corpo,
  .tela-acoes {
    width: min(100%, 26rem);
    margin-inline: auto;
  }
  .tela-corpo { padding-top: 3rem; }
  .topo-linha {
    width: min(100%, 28rem);
    margin-inline: auto;
  }
}

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  .tela.is-entrando,
  .tela.is-saindo,
  .is-toque { animation: none; }
  .progresso-barra,
  .btn-primario,
  .btn-voltar { transition: none; }
}