/* Só o que é desta pesquisa e não existe na folha compartilhada.
   Cor, fonte, raio, sombra e espaço vêm todos de ds/odara-tokens.css: nada de
   valor cru aqui. A sincronização é do odara-os pra cá, e ds/ não se edita. */

/* O odara-ui.css não traz reset (é folha de componente, por desenho), e o
   .od-campo de lá é width:100% com padding: sem border-box o campo estoura a
   caixa no celular. O reset é responsabilidade de quem monta a página. */
*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--fg2);
  font-family: var(--font-body);
  font-weight: var(--w-light);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ---------- barra de progresso ---------- */
.progresso {
  position: sticky;
  top: 0;
  height: 4px;
  background: var(--line);
  z-index: 10;
}
.progresso-barra {
  height: 100%;
  width: 0;
  background: var(--od-amarelo);
  transition: width var(--dur-2) var(--ease);
}

.palco {
  flex: 1;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: var(--s-6) var(--s-4) var(--s-8);
  box-sizing: border-box;
}

.cartao {
  background: var(--od-branco);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow-sm);
}
@media (max-width: 560px) {
  .cartao { padding: var(--s-5) var(--s-4); border-radius: var(--radius-md); }
  .palco  { padding: var(--s-4) var(--s-3) var(--s-7); }
}

.marca { margin-bottom: var(--s-5); }
.marca .wordmark { height: 26px; width: auto; display: block; }
.marca span {
  display: block;
  margin-top: var(--s-2);
  font-family: var(--font-body);
  font-weight: var(--w-demibold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg3);
}

.titulo {
  font-family: var(--font-display);
  font-weight: var(--w-heavy);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--fg1);
  margin: 0 0 var(--s-4);
}
.intro { white-space: pre-line; color: var(--fg2); margin-bottom: var(--s-5); }

/* ---------- pergunta ---------- */
.pilar {
  font-family: var(--font-body);
  font-weight: var(--w-demibold);
  /* um degrau acima do eyebrow: no celular o nome da seção é a única pista de onde
     a pessoa está dentro das 44 perguntas, e a 11px ele sumia */
  font-size: var(--fs-body-s);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg3);
  margin-bottom: var(--s-2);
}
.passo-contador { color: var(--fg3); font-size: var(--fs-body-s); }

.pergunta {
  padding: var(--s-5) 0;
  border-top: 1px solid var(--line);
}
.pergunta:first-of-type { border-top: 0; padding-top: var(--s-2); }
.pergunta-texto {
  font-weight: var(--w-medium);
  color: var(--fg1);
  font-size: var(--fs-body);
  margin-bottom: var(--s-4);
}
.pergunta--faltando .pergunta-texto { color: var(--st-erro); }

/* escala: pills grandes o bastante pro dedo, número em tabular */
.escala { display: flex; gap: var(--s-2); }
.escala button {
  flex: 1;
  min-height: 52px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  font-family: var(--font-body);
  font-weight: var(--w-medium);
  font-size: var(--fs-body);
  font-variant-numeric: tabular-nums;
  color: var(--fg1);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.escala button:hover      { background: var(--bg-alt); }
.escala button[aria-pressed="true"] {
  background: var(--od-amarelo);
  border-color: var(--od-amarelo);
  color: var(--fg-on-sun);
  font-weight: var(--w-bold);
}
.escala--10 button { min-width: 0; padding: 0; font-size: var(--fs-body-s); }
@media (max-width: 560px) {
  .escala--10 { display: grid; grid-template-columns: repeat(5, 1fr); }
}

.escala-legenda {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-2);
  color: var(--fg3);
  font-size: var(--fs-caption);
}

/* escolha única: uma linha por opção, alvo cheio */
.opcoes { display: flex; flex-direction: column; gap: var(--s-2); }
.opcoes button {
  min-height: 52px;
  text-align: left;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: transparent;
  font-family: var(--font-body);
  font-weight: var(--w-light);
  font-size: var(--fs-body);
  color: var(--fg1);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease);
}
.opcoes button:hover { background: var(--bg-alt); }
.opcoes button[aria-pressed="true"] {
  background: var(--od-amarelo);
  border-color: var(--od-amarelo);
  font-weight: var(--w-medium);
}

textarea.od-campo { min-height: 120px; resize: vertical; font-family: var(--font-body); }

/* ---------- navegação ---------- */
.navegacao {
  display: flex;
  gap: var(--s-3);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.navegacao .od-btn { min-height: 52px; }
.navegacao .cresce { flex: 1; }

.aviso {
  margin-top: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius-md);
  background: var(--bg-alt);
  color: var(--fg2);
  font-size: var(--fs-body-s);
}
.aviso--erro { background: #FDE7E9; color: #8C1620; }

.rodape {
  text-align: center;
  padding: var(--s-5) var(--s-4) var(--s-6);
  color: var(--fg3);
  font-size: var(--fs-caption);
}

/* fim: o círculo é a forma da casa */
.selo-fim {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: var(--od-amarelo);
  margin: 0 auto var(--s-5);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: var(--w-heavy);
  font-size: var(--fs-h2);
  color: var(--fg-on-sun);
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}