/* Sistema de design dos formulários públicos.
   Vem do handoff "Formulários Marco Lima" — tokens, medidas e estados estão
   definidos lá, não estimados aqui. Três registros deliberados: capa ousada
   (navy), telas de pergunta quietas (off-white), conclusão calorosa (navy).
   Radius 0 em tudo, exceto 2px nos botões primários. */

:root{
  --navy:#162240; --navy-hover:#1E2D4F;
  --off-white:#F6F7F7; --branco:#fff;
  /* Dourado claro SO sobre navy (6,89:1). Sobre fundo claro ele da 2,28:1 e
     reprova — ali entra a variante escura, 4,85:1. */
  --dourado:#E29E45; --dourado-hover:#EDAC57;
  --dourado-escuro:#9C6618; --dourado-escuro-hover:#B0741B;
  --tinta-clara:#C6CBD6; --tinta-clara-2:#AEB6C4;
  --cinza-rotulo:#9AA3B4; --cinza-texto:#646C7D;
  /* O contador era #7A8395, valor que o handoff pede e que da 3,55:1 sobre
     o off-white — reprova para texto de 10px. O proprio handoff exige
     4,5:1 em texto: as duas coisas nao cabiam juntas, e a regra ganha do
     valor. Este da 4,91:1. */
  --cinza-contador:#646C7D;
  --borda:#C2C6CD; --borda-botao:#D3D6DB; --trilha:#DFE1E4;
  --divisor-navy:rgba(246,247,247,.16);
  --serifa:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sem-serifa:"Questrial","Segoe UI",system-ui,-apple-system,sans-serif;
  --gutter:28px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--navy);color:var(--navy);
  font-family:var(--sem-serifa);font-size:16px;-webkit-font-smoothing:antialiased}

/* A tela ocupa a altura real do aparelho. dvh porque a barra do navegador do
   celular entra e sai: com vh o rodape fica atras dela. */
.tela{display:flex;flex-direction:column;height:100dvh;max-width:430px;
  margin:0 auto;position:relative;overflow:hidden}
.tela--clara{background:var(--off-white)}
.tela--escura{background:var(--navy)}

/* ---------- gestos da marca ---------- */
.rotulo-secao{font-size:10px;line-height:1;letter-spacing:.24em;
  text-transform:uppercase;color:var(--dourado-escuro)}
.rotulo-navy{font-size:9px;line-height:1;letter-spacing:.24em;
  text-transform:uppercase;color:var(--dourado)}
.rotulo-dado{font-size:9px;line-height:1;letter-spacing:.20em;
  text-transform:uppercase;color:var(--cinza-rotulo)}
.contador{font-size:10px;line-height:1;letter-spacing:.16em;
  color:var(--cinza-contador)}

/* ---------- capa ---------- */
.capa-topo{display:flex;align-items:center;justify-content:space-between;
  padding:40px var(--gutter) 0;flex:none}
/* contain + flex:none sao obrigatorios: sem eles a logo estica. */
.marca{height:30px;width:94px;flex:none;object-fit:contain;
  object-position:left center}
.capa-meio{flex:1;min-height:0;display:flex;flex-direction:column;
  justify-content:center;gap:22px;padding:0 var(--gutter);overflow-y:auto}
.filete{width:44px;height:1px;background:var(--dourado);flex:none}
.capa-meio h1{margin:0;font-family:var(--serifa);font-weight:300;
  font-size:50px;line-height:1;letter-spacing:-.02em;color:var(--off-white);
  text-wrap:balance}
.capa-meio h1 i{font-style:italic;color:var(--dourado)}
.capa-meio p{margin:0;font-size:14px;line-height:1.6;color:var(--tinta-clara);
  max-width:290px;text-wrap:pretty}
.capa-dados{display:grid;grid-template-columns:1fr 1fr;margin:0 var(--gutter);
  border-top:1px solid var(--divisor-navy);padding:17px 0;flex:none}
.capa-dados > div + div{border-left:1px solid var(--divisor-navy);
  padding-left:18px}
.capa-dados b{display:block;margin-top:9px;font-family:var(--serifa);
  font-weight:300;font-size:23px;line-height:1;color:var(--off-white)}
.capa-pe{padding:20px var(--gutter) 34px;flex:none}

/* ---------- cabecalho das telas de pergunta ---------- */
.cabecalho{padding:34px var(--gutter) 0;display:flex;flex-direction:column;
  gap:13px;flex:none}
.cabecalho .linha{display:flex;align-items:center;justify-content:space-between}
.progresso{height:2px;background:var(--trilha)}
/* A fracao vem de scaleX, nao de width: largura mexe no layout, escala nao.
   Sem transicao de proposito — a tela inteira e redesenhada a cada passo,
   entao a barra nasce ja no valor certo. Tentei anima-la a partir do valor
   anterior num requestAnimationFrame e o resultado foi pior: aba em segundo
   plano nao recebe quadro, e a barra ficava presa no passo de tras. O estado
   mostrado nao pode depender de a animacao ter rodado. */
.progresso > i{display:block;height:2px;width:100%;background:var(--dourado-escuro);
  transform-origin:left}

/* ---------- corpo das perguntas ----------
   Rolagem interna e valvula de seguranca, nao layout: o desenho cabe em
   375x667. Quem estiver num aparelho menor, ou com a fonte do sistema
   aumentada, rola dentro do corpo em vez de perder o rodape. */
.corpo{flex:1;min-height:0;overflow-y:auto;padding:36px var(--gutter) 0;
  display:flex;flex-direction:column;gap:34px}
.corpo.denso{padding-top:32px;gap:30px}
.corpo.arejado{padding-top:44px}
.pergunta{display:flex;flex-direction:column;gap:14px;min-height:0}
.pergunta > h2{margin:0;font-family:var(--serifa);font-weight:300;
  font-size:28px;line-height:1.15;color:var(--navy);text-wrap:balance}
.corpo.duas .pergunta > h2{font-size:22px;line-height:1.2}
.aux{margin:0;font-size:12px;line-height:1.5;color:var(--cinza-texto)}

/* ---------- controles ---------- */
.linha-unica{width:100%;border:0;border-bottom:1px solid var(--borda);
  background:transparent;padding:12px 2px;font-family:var(--sem-serifa);
  font-size:17px;line-height:1.3;color:var(--navy);border-radius:0}
.linha-unica::placeholder{color:var(--cinza-texto)}
.linha-unica.preenchido{border-bottom-color:var(--navy)}

.caixa-texto{width:100%;border:1px solid var(--borda);background:var(--branco);
  padding:14px;font-family:var(--sem-serifa);font-size:16px;line-height:1.55;
  color:var(--navy);min-height:88px;resize:none;border-radius:0}
.caixa-texto::placeholder{color:var(--cinza-texto)}
.caixa-texto.preenchido{border-color:var(--navy)}
.caixa-texto.alta{flex:1;min-height:120px;max-height:230px}

.lista{display:flex;flex-direction:column;gap:9px}
.opcao{display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;min-height:50px;padding:12px 16px;text-align:left;
  border:1px solid var(--borda);background:transparent;color:var(--navy);
  font-family:var(--sem-serifa);font-size:16px;line-height:1.2;
  border-radius:0;cursor:pointer}
.opcao:hover{border-color:var(--navy)}
.opcao[aria-checked="true"]{
  background:var(--navy);border-color:var(--navy);color:var(--off-white)}
.opcao small{display:block;margin-top:5px;font-size:12px;line-height:1.35;
  color:var(--cinza-texto)}
.opcao[aria-checked="true"] small{
  color:var(--tinta-clara-2)}
.opcao.com-sub{min-height:76px;align-items:flex-start}
.opcao.com-sub > span{flex:1}
/* O marcador so aparece na opcao escolhida; reservar o espaco dele em todas
   deslocaria o texto de cada linha por causa de uma. */
.marca-sel{width:7px;height:7px;flex:none;background:var(--dourado);
  opacity:0;transition:opacity .12s}
.opcao[aria-checked="true"] .marca-sel{opacity:1}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:0 15px;
  border:1px solid var(--borda);background:transparent;color:var(--navy);
  font-family:var(--sem-serifa);font-size:14px;border-radius:0;cursor:pointer}
.chip:hover{border-color:var(--navy)}
.chip[aria-checked="true"]{background:var(--navy);border-color:var(--navy);
  color:var(--off-white)}

.trio{display:flex;gap:8px}
.trio .opcao{flex:1;min-height:48px;padding:12px 8px;justify-content:center;
  text-align:center;font-size:15px}

.escala{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}
.escala .opcao{min-height:46px;padding:0;justify-content:center;font-size:16px}
.escala .opcao:last-child{grid-column:span 2}
.escala-pes{display:flex;justify-content:space-between;margin-top:10px}

.caixa-marcar{display:flex;align-items:center;gap:12px;width:100%;
  min-height:56px;padding:0 14px;border:1px solid var(--borda);
  background:transparent;color:var(--navy);font-family:var(--sem-serifa);
  font-size:14px;line-height:1.35;text-align:left;border-radius:0;cursor:pointer}
.caixa-marcar:hover{border-color:var(--navy)}
.quadro{width:18px;height:18px;flex:none;border:1px solid var(--navy);
  display:flex;align-items:center;justify-content:center}
.caixa-marcar[aria-checked="true"] .quadro{background:var(--navy)}
.quadro i{width:6px;height:6px;background:var(--dourado);opacity:0}
.caixa-marcar[aria-checked="true"] .quadro i{opacity:1}

.atalho{display:inline-flex;align-items:center;align-self:flex-start;
  min-height:44px;padding:0 14px;border:1px solid var(--dourado-escuro);
  background:transparent;color:var(--dourado-escuro);
  font-family:var(--sem-serifa);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;border-radius:0;cursor:pointer}
.atalho:hover{background:var(--dourado-escuro);color:var(--off-white)}
.atalho[disabled]{opacity:.45;cursor:default}
.atalho[disabled]:hover{background:transparent;color:var(--dourado-escuro)}

.salvo{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cinza-texto);opacity:0;transition:opacity .3s}
.salvo.visivel{opacity:1}

/* ---------- botoes ---------- */
.btn{font-family:var(--sem-serifa);font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;border:0;border-radius:2px;cursor:pointer;
  text-decoration:none;display:inline-flex;align-items:center;
  justify-content:center}
.btn-dourado{width:100%;min-height:54px;background:var(--dourado);
  color:var(--navy)}
.btn-dourado:hover{background:var(--dourado-hover)}
.btn-navy{flex:1;min-height:54px;background:var(--navy);color:var(--off-white)}
.btn-navy:hover{background:var(--navy-hover)}
.btn-enviar{flex:1;min-height:54px;background:var(--dourado-escuro);
  color:var(--off-white)}
.btn-enviar:hover{background:var(--dourado-escuro-hover)}
.btn-voltar{width:54px;height:54px;flex:none;border:1px solid var(--borda-botao);
  background:transparent;color:var(--navy);font-size:17px;letter-spacing:0}
.btn-voltar:hover{border-color:var(--navy)}
.btn-pular{min-height:54px;padding:0 18px;flex:none;
  border:1px solid var(--borda-botao);background:transparent;
  color:var(--cinza-texto);font-size:11px;letter-spacing:.18em}
.btn-pular:hover{border-color:var(--navy);color:var(--navy)}
.btn[disabled]{opacity:.6;cursor:progress}
.rodape{display:flex;gap:10px;padding:18px var(--gutter) 34px;flex:none}

/* ---------- conclusao ---------- */
.fim-topo{padding:40px var(--gutter) 0;display:flex;justify-content:center;
  flex:none}
.fim-topo .marca{height:32px;width:100px;object-position:center}
.fim-meio{flex:1;min-height:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:22px;padding:0 var(--gutter);
  text-align:center;overflow-y:auto}
.filete-v{width:1px;height:52px;background:var(--dourado);flex:none}
.fim-meio h1{margin:0;font-family:var(--serifa);font-weight:300;font-size:44px;
  line-height:1.04;letter-spacing:-.02em;color:var(--off-white);
  text-wrap:balance}
.fim-meio h1 i{font-style:italic;color:var(--dourado)}
.fim-meio p{margin:0;font-size:14px;line-height:1.7;color:var(--tinta-clara);
  max-width:300px;text-wrap:pretty}
.fim-pe{margin:0 var(--gutter);border-top:1px solid var(--divisor-navy);
  padding:20px 0 40px;display:flex;justify-content:space-between;
  align-items:center;gap:12px;flex:none}

/* ---------- mensagens ---------- */
.erro-campo{margin:0;font-size:12px;line-height:1.4;color:var(--dourado-escuro)}
.linha-unica.invalido,.caixa-texto.invalido{border-color:var(--dourado-escuro)}
.recado{margin:0 0 12px;padding:12px 14px;border:1px solid var(--borda);
  background:var(--branco);font-size:13px;line-height:1.5;
  color:var(--cinza-texto)}
.recado a{color:var(--dourado-escuro)}
.consentimento{margin:0;font-size:11px;line-height:1.5;color:var(--cinza-texto)}
.consentimento a{color:var(--dourado-escuro)}

/* ---------- superficies que o navegador desenha por padrao ---------- */
::selection{background:var(--dourado);color:var(--navy)}
input,textarea{caret-color:var(--dourado-escuro)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--dourado-escuro);outline-offset:2px}
.tela--escura :focus-visible{outline-color:var(--dourado)}
*{scrollbar-width:thin;scrollbar-color:var(--borda) transparent}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--borda)}

/* ---------- movimento ---------- */
@keyframes entra{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:none}}
.anima{animation:entra .19s cubic-bezier(.16,1,.3,1) both}
@media (prefers-reduced-motion:reduce){
  .anima{animation:none}
  *{transition-duration:.01ms!important}
}

body.fundo-claro{background:var(--off-white)}
body.fundo-escuro{background:var(--navy)}

/* ---------- computador ----------
   O formulario nasceu para o celular e continua com medida estreita: linha de
   texto longa demais e pior de ler, e um campo de 1400px nao ajuda ninguem. O
   que muda e o enquadramento — a coluna cresce um pouco, o respiro aumenta e
   o fundo passa a ser da mesma cor dos dois lados, para a pagina parecer uma
   pagina e nao um aparelho no meio da tela. */
@media (min-width:700px){
  :root{--gutter:36px}
  .tela{max-width:520px}
  .rodape{padding-bottom:40px}
}
/* O corpo tem valvula de rolagem, mas so vale crescer a tipografia quando a
   janela e alta de verdade. Numa janela baixa o texto maior empurraria o
   rodape para fora antes de qualquer ganho. */
@media (min-width:700px) and (min-height:760px){
  .capa-meio h1{font-size:58px}
  .capa-meio p{font-size:15px;max-width:330px}
  .fim-meio h1{font-size:50px}
  .fim-meio p{font-size:15px;max-width:340px}
  .cabecalho{padding-top:44px}
  .corpo{padding-top:48px;gap:38px}
  .pergunta > h2{font-size:31px}
  .corpo.duas .pergunta > h2{font-size:24px}
}

/* Aparelho mais baixo que o iPhone SE (667px): encolhe o display antes de
   deixar a tela rolar. */
@media (max-height:640px){
  .capa-meio h1{font-size:42px}
  .fim-meio h1{font-size:38px}
  .capa-topo{padding-top:30px}
  .capa-pe{padding-bottom:26px}
  .cabecalho{padding-top:26px}
  .corpo{padding-top:28px;gap:26px}
  .rodape{padding-bottom:24px}
  .fim-pe{padding-bottom:28px}
}