/* =====================================================================
   Formulário público — uma pergunta por tela, estilo conversacional.
   ===================================================================*/
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

/* ---------- Barra de progresso ---------- */
.progress {
  position: fixed; inset: 0 0 auto 0;
  height: 4px; z-index: 50;
  background: rgba(127,127,127,.18);
}
.progress > div {
  height: 100%; width: 0;
  background: var(--primary);
  transition: width .35s cubic-bezier(.22,.61,.36,1);
}

.brand-logo {
  position: fixed; top: 22px; left: 24px;
  max-height: 34px; max-width: 150px;
  z-index: 40; opacity: .95;
}

/* ---------- Palco ---------- */
.stage {
  min-height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 88px 24px 132px;
}

.screen {
  width: 100%; max-width: 680px;
  animation: slide-in .42s cubic-bezier(.22,.61,.36,1) both;
}
.screen.leaving { animation: slide-out .26s ease-in forwards; }
.screen.back    { animation: slide-in-back .42s cubic-bezier(.22,.61,.36,1) both; }

@keyframes slide-in      { from { opacity:0; transform: translateY(38px); } to { opacity:1; transform:none; } }
@keyframes slide-in-back { from { opacity:0; transform: translateY(-38px);} to { opacity:1; transform:none; } }
@keyframes slide-out     { to   { opacity:0; transform: translateY(-26px); } }

@media (prefers-reduced-motion: reduce) {
  .screen, .screen.leaving, .screen.back { animation: none; }
  .progress > div { transition: none; }
}

/* ---------- Tipografia da pergunta ---------- */
.q-index {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--primary); font-size: 15px; font-weight: 600;
  margin-bottom: 12px;
}
.q-index svg { width: 11px; height: 11px; }

.q-title {
  font-size: clamp(23px, 3.6vw, 33px);
  font-weight: 600; line-height: 1.28;
  margin: 0 0 10px;
  letter-spacing: -.015em;
}
.q-required { color: var(--primary); margin-left: 3px; }

.q-help {
  font-size: 16px; opacity: .62;
  margin: 0 0 26px;
}
.q-title + .q-field, .q-help + .q-field { margin-top: 26px; }

/* ---------- Campos de texto ---------- */
.f-input, .f-textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 2px solid rgba(127,127,127,.35);
  color: var(--text);
  font-size: clamp(19px, 2.4vw, 25px);
  font-family: inherit;
  padding: 10px 2px;
  outline: none;
  transition: border-color .2s;
}
.f-input::placeholder, .f-textarea::placeholder { color: currentColor; opacity: .3; }
.f-input:focus, .f-textarea:focus { border-bottom-color: var(--primary); }
.f-textarea { resize: none; min-height: 108px; line-height: 1.5; }

/* Autofill do Chrome não pode pintar o fundo de branco */
.f-input:-webkit-autofill,
.f-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  transition: background-color 9999s ease-in-out 0s;
}

/* ---------- Opções (radio / checkbox / select) ---------- */
.f-options { display: flex; flex-direction: column; gap: 11px; }

.opt {
  display: flex; align-items: center; gap: 13px;
  width: 100%; text-align: left;
  padding: 15px 17px;
  border: 1.5px solid rgba(127,127,127,.42);
  border-radius: 10px;
  background: rgba(127,127,127,.06);
  color: inherit;
  font: inherit; font-size: 17px;
  cursor: pointer;
  transition: border-color .16s, background-color .16s, transform .1s;
}
.opt:hover  { border-color: var(--primary); background: rgba(127,127,127,.12); }
.opt:active { transform: scale(.99); }
.opt.selected {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 16%, transparent);
}
.opt:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.opt-key {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 1.5px solid rgba(127,127,127,.5);
  border-radius: 5px;
  font-size: 12.5px; font-weight: 600;
  opacity: .8;
}
.opt.selected .opt-key {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff; opacity: 1;
}
.opt-label { flex: 1; }
.opt-check { opacity: 0; flex: 0 0 auto; }
.opt.selected .opt-check { opacity: 1; }

/* ---------- Escalas: NPS, 1-10, estrelas ---------- */
.f-scale { display: flex; flex-wrap: wrap; gap: 8px; }
.f-scale .opt {
  width: 54px; height: 54px;
  justify-content: center;
  padding: 0; font-size: 17px; font-weight: 600;
}
.scale-legend {
  display: flex; justify-content: space-between;
  font-size: 13.5px; opacity: .55; margin-top: 11px;
}

.f-stars { display: flex; gap: 9px; }
.star {
  background: none; border: none; cursor: pointer;
  font-size: 40px; line-height: 1;
  color: rgba(127,127,127,.4);
  padding: 0; transition: color .15s, transform .12s;
}
.star:hover { transform: scale(1.12); }
.star.on { color: var(--primary); }

/* ---------- Prefixo (telefone / dinheiro) ---------- */
.f-prefixed { display: flex; align-items: baseline; gap: 9px; }
.f-prefix {
  font-size: clamp(18px, 2.2vw, 23px);
  opacity: .5; flex: 0 0 auto;
}

/* ---------- Botões ---------- */
.btn-ok {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 28px;
  padding: 13px 26px;
  background: var(--primary);
  color: #fff;
  border: none; border-radius: 9px;
  font: inherit; font-size: 17px; font-weight: 600;
  cursor: pointer;
  transition: filter .16s, transform .1s;
}
.btn-ok:hover  { filter: brightness(1.1); }
.btn-ok:active { transform: scale(.98); }
.btn-ok[disabled] { opacity: .55; cursor: not-allowed; }
.btn-ok kbd {
  font: inherit; font-size: 12.5px; opacity: .8;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 4px; padding: 1px 6px;
}

/* ---------- Erro ---------- */
.f-error {
  display: flex; align-items: center; gap: 8px;
  margin-top: 14px;
  color: #ff5f56; font-size: 15px; font-weight: 500;
}

/* ---------- Rodapé de navegação ---------- */
.nav-bar {
  position: fixed; inset: auto 0 0 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 15px 24px;
  padding-bottom: calc(15px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 62%, transparent);
  z-index: 45;
}
.nav-hint { font-size: 13.5px; opacity: .5; }
.nav-hint kbd {
  border: 1px solid rgba(127,127,127,.45);
  border-radius: 4px; padding: 1px 5px;
  font-family: inherit; font-size: 12px;
}
.nav-btns { display: flex; gap: 7px; margin-left: auto; }
.nav-arrow {
  width: 38px; height: 36px;
  display: grid; place-items: center;
  background: var(--primary); color: #fff;
  border: none; border-radius: 7px;
  font-size: 15px; cursor: pointer;
  transition: filter .16s;
}
.nav-arrow:hover { filter: brightness(1.12); }
.nav-arrow[disabled] { opacity: .3; cursor: not-allowed; }

/* ---------- Telas de abertura e agradecimento ---------- */
.hero-title {
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 700; line-height: 1.18;
  letter-spacing: -.02em;
  margin: 0 0 16px;
}
.hero-text { font-size: 18px; opacity: .72; margin: 0 0 32px; white-space: pre-line; }

.thanks-icon {
  width: 66px; height: 66px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 20%, transparent);
  color: var(--primary);
  font-size: 33px;
  margin-bottom: 24px;
}

.saving {
  position: fixed; bottom: 68px; left: 24px;
  font-size: 13px; opacity: 0;
  transition: opacity .25s;
}
.saving.on { opacity: .55; }

@media (max-width: 560px) {
  .stage { padding: 74px 20px 124px; }
  .f-scale .opt { width: 46px; height: 46px; font-size: 15.5px; }
  .nav-hint { display: none; }
}