/* ============================================================
   Telas de dado corporal: altura, peso, meta e nascimento.
   O app usa UIPickerView; na web é campo digitado com teclado
   numérico, como os concorrentes fazem — validação de faixa só
   existe porque o valor pode ser digitado.
   Faixas do app: 100-250 cm · 3-8 ft · 30-250 kg · 66-500 lb.
   ============================================================ */

/* seletor de unidade (equivale ao UISegmentedControl) */
.unidades {
  display: flex; gap: 4px;
  background: var(--opt-bg);
  border-radius: 12px;
  padding: 4px;
  margin-top: 24px;
}
.unidades button {
  flex: 1; padding: 9px 12px;
  border: 0; border-radius: 9px;
  background: transparent; color: var(--ink-2);
  font: 600 14px/1 var(--font); cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.unidades button.is-on { background: var(--brand); color: var(--brand-ink); }

/* campo numérico: estreito e centralizado na tela */
.campos { display: flex; gap: 12px; margin-top: 28px; justify-content: center; }
.campo { position: relative; width: 200px; max-width: 100%; }
.campos.e-duplo .campo { width: 132px; }
.campo input {
  width: 100%;
  text-align: center;
  padding: 18px 44px 18px 16px;
  background: var(--opt-bg);
  border: 1px solid var(--opt-bg);
  border-radius: 16px;
  color: var(--ink);
  font: 700 28px/1.1 var(--font);
  letter-spacing: -.02em;
  -moz-appearance: textfield;
  transition: border-color .18s ease;
}
.campo input::-webkit-outer-spin-button,
.campo input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.campo input::placeholder { color: var(--ink-3); font-weight: 600; font-size: 18px; }
.campo input:focus { outline: 0; border-color: var(--brand); }
.campo.e-invalido input { border-color: #ff453a; }
.campo-unidade {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  font-size: 16px; font-weight: 600; color: var(--ink-2); pointer-events: none;
}

.aviso { margin: 12px 0 0; font-size: 14px; line-height: 1.35; color: #ff453a;
          min-height: 19px; text-align: center; }

/* seletor de unidade centralizado e do tamanho do conteúdo */
.unidades { width: fit-content; margin-left: auto; margin-right: auto; }
.unidades button { min-width: 88px; }

@media (max-height: 700px) {
  .campo input { font-size: 24px; padding: 15px 56px 15px 18px; }
  .campos, .unidades { margin-top: 18px; }
}

/* ---------- captura de e-mail ---------- */

.email-campo { margin-top: 28px; }
.email-campo input {
  width: 100%;
  padding: 18px 20px;
  background: var(--opt-bg);
  border: 1px solid var(--opt-bg);
  border-radius: 16px;
  color: var(--ink);
  font: 400 17px/1.2 var(--font);
  transition: border-color .18s ease;
}
.email-campo input::placeholder { color: var(--ink-3); }
.email-campo input:focus { outline: 0; border-color: var(--brand); }
.email-campo.e-invalido input { border-color: #ff453a; }

/* aceite de promoções — separado do campo, e desmarcado por padrão */
.optin {
  display: flex; align-items: flex-start; gap: 12px;
  margin-top: 20px; padding: 4px 2px;
  background: none; border: 0; text-align: left; cursor: pointer;
  color: var(--ink-2); font: 400 14px/1.4 var(--font);
}
.optin .check-box {
  flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px;
  border: 2px solid var(--ink-3); border-radius: 6px;
  display: grid; place-items: center;
  transition: background .18s ease, border-color .18s ease;
}
.optin.is-on .check-box { background: var(--brand); border-color: var(--brand); }
.optin .check-box svg { width: 13px; height: 13px; opacity: 0; transition: opacity .18s ease; }
.optin.is-on .check-box svg { opacity: 1; }