/* Questionário mrstb: papel, tinta e malva, como o site. Uma coluna, pensado primeiro para o celular. */
:root {
  --papel: #f2efe9; --branco: #fbfaf7; --tinta: #161616; --cinza: #6f6c64; --linha: #d8d4cb;
  --malva: #6a4459; --malva-claro: #f5edf2; --ok: #2f6b4f; --ok-claro: #e6f0ea;
  --fonte: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--fonte); font-size: 17px; line-height: 1.5; }
.topo { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: calc(10px + env(safe-area-inset-top, 0px)) 18px 10px; background: color-mix(in srgb, var(--papel) 92%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--linha); }
.logo { height: 22px; width: auto; display: block; color: var(--tinta); }
.estado { font-size: 13px; color: var(--cinza); }
main { max-width: 640px; margin: 0 auto; padding: 28px 18px 120px; display: grid; gap: 34px; }
h1 { font-size: clamp(30px, 7vw, 42px); line-height: 1.08; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
h2 { font-size: 23px; line-height: 1.2; margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }
.intro { display: grid; gap: 14px; }
.intro .leve { color: var(--cinza); }
.progresso { display: grid; gap: 6px; font-size: 14px; color: var(--cinza); }
.barra { height: 6px; background: var(--linha); border-radius: 99px; overflow: hidden; }
.barra i { display: block; height: 100%; width: 0; background: var(--malva); transition: width .3s; }

section.secao { display: grid; gap: 16px; }
.secao > .sub { color: var(--cinza); margin-top: -8px; }
.cartao { background: var(--branco); border: 1px solid var(--linha); border-radius: 12px; padding: 16px; display: grid; gap: 10px; }
.cartao.feito { border-color: color-mix(in srgb, var(--ok) 45%, var(--linha)); }
.rotulo { font-weight: 700; }
.ajuda { font-size: 15px; color: var(--cinza); }
.valor { background: var(--papel); border-radius: 8px; padding: 10px 12px; white-space: pre-line; }
.botoes { display: flex; flex-wrap: wrap; gap: 8px; }
button, .botao { font: inherit; font-size: 15px; border-radius: 99px; padding: 9px 16px; border: 1.5px solid var(--linha); background: var(--branco); color: var(--tinta); cursor: pointer; }
button:hover { border-color: var(--tinta); }
button[aria-pressed="true"].sim { background: var(--ok); border-color: var(--ok); color: #fff; }
button[aria-pressed="true"].nao { background: var(--malva); border-color: var(--malva); color: #fff; }
button[aria-pressed="true"].op { background: var(--malva-claro); border-color: var(--malva); color: var(--malva); font-weight: 700; }
button:focus-visible, textarea:focus-visible, label.subir:focus-within { outline: 2px solid var(--malva); outline-offset: 2px; }
textarea { width: 100%; font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--linha); border-radius: 8px; background: #fff; color: var(--tinta); resize: vertical; min-height: 72px; }
.fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.foto { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--papel); }
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto button { position: absolute; top: 4px; right: 4px; padding: 2px 9px; font-size: 13px; background: rgba(255,255,255,.92); }
label.subir { display: inline-flex; align-items: center; gap: 8px; justify-self: start; border: 1.5px dashed var(--malva); color: var(--malva); border-radius: 99px; padding: 9px 16px; cursor: pointer; font-size: 15px; }
label.subir input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.enviando { font-size: 14px; color: var(--cinza); }
.fim { display: grid; gap: 12px; padding: 20px; border-radius: 12px; background: var(--malva-claro); }
.fim button { justify-self: start; background: var(--malva); color: #fff; border-color: var(--malva); font-size: 16px; padding: 11px 20px; }
.assinatura { color: var(--cinza); font-size: 15px; }
.erro { color: var(--malva); font-size: 14px; }
.vazio { max-width: 520px; margin: 0 auto; padding: 18vh 18px; display: grid; gap: 14px; }
.sel { user-select: all; }
.carregando { color: var(--cinza); }
@media (prefers-reduced-motion: reduce) { .barra i { transition: none; } }