/* ═══ /formulario — versão corrida ═══════════════════════════════════
   Reaproveita as variáveis e os componentes de style.css (.opcao, .chip,
   .campo, .btn). Aqui ficam só as diferenças de uma página que rola.    */

.pagina-form { overflow-x: hidden; }

/* a moldura do quiz em etapas não se aplica aqui */
.pagina-form #app { display: none; }

/* barra fina de leitura, presa no topo */
#barra-scroll {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: 4px; background: var(--linha);
}
#barra-scroll i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--ac-1), var(--ac-2) 40%, var(--ac-3) 70%, var(--ac-4));
  transition: width .4s ease-out;
}

#form-app {
  max-width: 720px; margin: 0 auto; padding: 4px 20px 60px;
}

/* ─── capa ───────────────────────────────────────────────────────── */
.form-capa { padding: 22px 0 10px; }
.form-foto {
  width: 100%; height: clamp(180px, 30vw, 300px);
  object-fit: cover; object-position: 50% 38%;
  border-radius: var(--raio-img); display: block;
  border: 1px solid var(--linha);
}
.form-capa-txt { padding-top: 22px; }
.form-capa .marca { margin: 0; }
.form-capa .tagline { margin-top: 12px; }
.form-capa .ajuda { margin-top: 10px; }

/* ─── capítulos ──────────────────────────────────────────────────── */
.form-cap {
  margin: 44px 0 0; padding-top: 26px;
  border-top: 1px solid var(--linha);
}
.form-cap:first-of-type { border-top: 0; }
.form-cap-cab { display: flex; align-items: baseline; gap: 14px; }
.form-cap-num {
  font-size: 40px; font-weight: 200; line-height: 1;
  color: var(--ac); font-variant-numeric: tabular-nums;
}
.form-cap-tit { font-size: clamp(20px, 3.4vw, 26px); }
.form-cap-linha { color: var(--apoio); font-size: 13.5px; margin: 8px 0 0; }

.form-cap[data-cap='1'] { --ac: var(--ac-1); }
.form-cap[data-cap='2'] { --ac: var(--ac-2); }
.form-cap[data-cap='3'] { --ac: var(--ac-3); }
.form-cap[data-cap='4'] { --ac: var(--ac-4); }

/* ─── bloco de pergunta ──────────────────────────────────────────── */
.bloco {
  margin: 30px 0 0; scroll-margin-top: 26px;
  padding: 20px; border-radius: 16px;
  background: var(--bege-2);
  border: 1px solid var(--linha);
  transition: border-color .2s, background .2s;
}
.bloco:focus-within { border-color: var(--linha-f); }
.bloco.respondido { background: #fff; border-color: color-mix(in srgb, var(--ac) 30%, var(--linha)); }
.bloco.invalido { border-color: var(--erro); }
.bloco[hidden] { display: none; }

.bloco-num {
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ac); margin-bottom: 6px; font-weight: 500;
}
.bloco .pergunta { font-size: clamp(17px, 2.6vw, 20px); margin-bottom: 4px; }
.bloco .ajuda { margin-bottom: 0; }
.bloco .opcoes, .bloco .chips { margin-top: 14px; }
.bloco .campo { margin-top: 12px; }
.bloco .slider-wrap { margin-top: 16px; }
.bloco .erro { margin-top: 8px; }

/* opções dentro do card ficam sobre o branco */
.bloco .opcao { background: #fff; }
.bloco.respondido .opcao { background: var(--bege-2); }
.bloco.respondido .opcao[aria-checked='true'],
.bloco.respondido .opcao[aria-pressed='true'] { background: #fff; }

/* ─── contato ────────────────────────────────────────────────────── */
.form-contato-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.form-contato-grid .campo.largo { grid-column: 1 / -1; }
@media (max-width: 560px) {
  .form-contato-grid { grid-template-columns: 1fr; }
}

/* ─── envio ──────────────────────────────────────────────────────── */
.form-envio { margin: 34px 0 0; }
.form-envio .btn { width: 100%; min-height: 54px; font-size: 16px; }
.form-envio .lgpd { margin-bottom: 16px; }
.form-resumo {
  margin: 0 0 14px; font-size: 13px; color: var(--apoio);
  display: flex; align-items: center; gap: 8px;
}
.form-resumo b { color: var(--tinta); font-weight: 500; }

/* ─── rodapé ─────────────────────────────────────────────────────── */
.form-rodape {
  margin: 46px 0 0; padding-top: 20px; border-top: 1px solid var(--linha);
  display: flex; align-items: center; gap: 12px;
}
.form-rodape img { width: 120px; height: auto; opacity: .6; }
.form-rodape span { font-size: 10.5px; color: var(--apoio); line-height: 1.45; }

/* ─── análise e diagnóstico ──────────────────────────────────────── */
.form-analise { padding: 70px 0; text-align: center; }
.form-analise .spinner { margin: 0 auto 18px; }

.form-diag { padding: 20px 0 0; }
.form-diag .foto-diag {
  width: 100%; height: clamp(170px, 26vw, 260px);
  object-fit: cover; object-position: 50% 38%;
  border-radius: var(--raio-img); display: block; margin-bottom: 24px;
  border: 1px solid var(--linha);
}
.form-diag .barras { margin-top: 24px; }
.form-diag .acoes { margin-top: 26px; }
.form-diag .acoes .btn { width: 100%; min-height: 54px; font-size: 16px; }

/* ─── rodapé fixo: progresso + próxima pendente ──────────────────── */
.pagina-form #form-app { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }

#form-fixo {
  position: fixed; inset: auto 0 0 0; z-index: 40;
  background: color-mix(in srgb, var(--bege) 92%, #fff);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--linha);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
#fx-barra { height: 5px; background: var(--linha); }
#fx-barra i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--ac-1), var(--ac-2) 40%, var(--ac-3) 70%, var(--ac-4));
  transition: width .4s ease-out;
}
.fx-linha {
  max-width: 720px; margin: 0 auto; padding: 8px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
#fx-pct { font-size: 13px; color: var(--apoio); white-space: nowrap; }
#fx-pct b { color: var(--tinta); font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
.fx-prox {
  min-height: var(--toque); padding: 8px 16px;
  border: 1px solid var(--linha-f); border-radius: var(--raio-pill);
  background: var(--bege-2); color: var(--tinta);
  font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer;
  white-space: nowrap; transition: background .18s, color .18s, border-color .18s;
}
.fx-prox:hover { border-color: var(--terra); }
.fx-prox.pronto { background: var(--terra); border-color: var(--terra); color: #fff; }
.fx-prox:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

/* ─── toast de marco ─────────────────────────────────────────────── */
#form-toast {
  position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 12px); z-index: 41;
  max-width: min(92vw, 480px); padding: 10px 18px;
  border-radius: var(--raio-pill);
  background: var(--tinta); color: var(--bege);
  font-size: 13.5px; line-height: 1.4; text-align: center;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
#form-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ─── selo de capítulo concluído ─────────────────────────────────── */
.form-cap-cab { flex-wrap: wrap; }
.form-cap-selo {
  margin-left: auto; align-self: center;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500;
  color: var(--ac); border: 1px solid var(--ac);
  padding: 4px 10px; border-radius: var(--raio-pill);
}

/* blocos param acima do rodapé fixo ao rolar */
.bloco { scroll-margin-top: 18px; scroll-margin-bottom: 110px; }
.form-envio { scroll-margin-top: 24px; }

@media (prefers-reduced-motion: reduce) {
  #fx-barra i, #form-toast { transition: none; }
}