.formulario-pagina {
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--fundo);
}

.formulario-app {
  min-height: 100vh;
  color: var(--texto);
}

.formulario-topo {
  position: sticky;
  z-index: 40;
  top: 0;
  min-height: 64px;
  border-bottom: 1px solid var(--acento-ui);
  background: linear-gradient(90deg, var(--superficie), var(--superficie-alta));
  box-shadow: 0 8px 30px #0002;
}

.formulario-topo-conteudo,
.formulario-demo-conteudo,
.formulario-main,
.formulario-rodape-global {
  width: min(1240px, calc(100% - 32px));
  margin-inline: auto;
}

.formulario-topo-conteudo {
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.formulario-logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.formulario-logo-imagem {
  display: block;
  width: auto;
  height: 34px;
}

.formulario-logo-claro { display: none; }
:root[data-tema="claro"] .formulario-logo-escuro { display: none; }
:root[data-tema="claro"] .formulario-logo-claro { display: block; }

.formulario-topo-contexto {
  min-width: 0;
  padding-left: 18px;
  border-left: 1px solid var(--borda);
  display: grid;
  gap: 1px;
}

.formulario-topo-contexto span {
  color: var(--texto-fraco);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.formulario-topo-contexto strong {
  color: var(--texto);
  font-size: var(--t-base);
}

.formulario-botao-icone {
  width: 44px;
  height: 44px;
  margin-left: auto;
  border: 1px solid var(--borda-forte);
  border-radius: 11px;
  background: var(--tile);
  color: var(--texto);
  font: 700 18px/1 var(--fonte);
  cursor: pointer;
}

.formulario-demo {
  position: sticky;
  z-index: 35;
  top: 64px;
  border-bottom: 1px solid var(--demo);
  background: var(--demo-fundo);
  color: var(--demo);
}

.formulario-demo-conteudo {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 6px;
  font-size: var(--t-peq);
}

.formulario-demo-conteudo > strong {
  padding: 3px 8px;
  border: 1px solid currentcolor;
  border-radius: 999px;
  font-family: var(--fonte-num);
  font-size: var(--t-micro);
  letter-spacing: .12em;
}

.formulario-demo-seletor {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
}

.formulario-demo-seletor select {
  min-height: 34px;
  max-width: 180px;
  padding: 5px 30px 5px 9px;
  border: 1px solid currentcolor;
  border-radius: 8px;
  background: var(--superficie);
  color: var(--texto);
  font: 600 var(--t-peq)/1.2 var(--fonte);
}

.formulario-demo-acoes {
  margin-left: auto;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.formulario-link-botao {
  min-height: 36px;
  padding: 5px 0;
  border: 0;
  background: transparent;
  color: var(--acento-ui);
  font: 700 var(--t-peq)/1.3 var(--fonte);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.formulario-demo .formulario-link-botao { color: var(--demo); }
.formulario-link-botao:hover { text-decoration: none; }

.formulario-main {
  display: grid;
  gap: 28px;
  padding-block: 28px 46px;
}

.formulario-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 330px);
  align-items: end;
  gap: 32px;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid var(--borda-forte);
  border-top: 2px solid var(--acento-ui);
  border-radius: 14px;
  background:
    radial-gradient(circle at 86% 0, var(--acento-ui-fraco), transparent 34%),
    linear-gradient(145deg, var(--superficie), var(--superficie-alta));
  box-shadow: var(--sombra-alta);
}

.formulario-hero::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -110px;
  bottom: -140px;
  border: 1px solid var(--foco);
  border-radius: 50%;
  opacity: .24;
}

.formulario-eyebrow {
  display: block;
  margin-bottom: 7px;
  color: var(--acento-ui);
  font: 700 var(--t-micro)/1.3 var(--fonte-num);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.formulario-hero h1 {
  max-width: 18ch;
  margin: 0;
  color: var(--texto);
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1.02;
  letter-spacing: -.055em;
  text-shadow: 0 0 26px var(--acento-ui-fraco);
}

.formulario-hero-texto > p {
  max-width: 68ch;
  margin: 16px 0 0;
  color: var(--texto-suave);
  font-size: clamp(14px, 1.5vw, 17px);
  line-height: 1.65;
}

.formulario-hero-progresso {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--borda);
  border-radius: 12px;
  background: color-mix(in srgb, var(--tile) 88%, transparent);
  box-shadow: inset 3px 0 0 var(--acento-ui);
}

.formulario-hero-numero {
  display: block;
  color: var(--texto);
  font: 800 clamp(38px, 5vw, 52px)/1 var(--fonte);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.055em;
}

.formulario-hero-rotulo {
  display: block;
  margin: 4px 0 16px;
  color: var(--texto-fraco);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.formulario-progresso {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.formulario-progresso-trilha {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--preench-vazio);
}

.formulario-progresso-trilha > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--acento-ui), var(--foco));
  box-shadow: 0 0 12px var(--acento-ui);
  transition: width var(--movimento-padrao) var(--easing-ui);
}

.formulario-progresso-texto {
  color: var(--texto-suave);
  font-size: var(--t-nota, 12px);
}

.formulario-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  align-items: start;
  gap: 24px;
}

.formulario-lateral {
  position: sticky;
  top: 124px;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--borda);
  border-radius: 12px;
  background: linear-gradient(145deg, var(--superficie), var(--superficie-alta));
  box-shadow: var(--sombra-baixa);
}

.formulario-etapas {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
  list-style: none;
}

.formulario-etapa {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--texto-suave);
  text-align: left;
  cursor: pointer;
}

.formulario-etapa:hover { background: var(--tile); color: var(--texto); }
.formulario-etapa.atual {
  border-color: var(--ativo-borda);
  background: var(--ativo-gradiente);
  color: var(--texto);
  box-shadow: 0 0 18px var(--acento-ui-fraco);
}

.formulario-etapa-indice {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: none;
  clip-path: polygon(25% 7%, 75% 7%, 100% 50%, 75% 93%, 25% 93%, 0 50%);
  background: var(--chip-fundo);
  color: var(--texto-suave);
  font: 700 11px/1 var(--fonte-num);
}

.formulario-etapa.atual .formulario-etapa-indice,
.formulario-etapa.completa .formulario-etapa-indice {
  background: var(--acento-ui);
  color: var(--texto-inverso);
}

.formulario-etapa-texto { min-width: 0; display: grid; gap: 2px; }
.formulario-etapa-texto strong { color: inherit; font-size: var(--t-peq); }
.formulario-etapa-texto small { color: var(--texto-fraco); font-size: var(--t-micro); }

.formulario-lateral-ajuda {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--borda);
  color: var(--texto-suave);
  font-size: var(--t-micro);
}

.formulario-lateral-ajuda strong { color: var(--texto); }
.formulario-lateral-ajuda p { margin: 5px 0 0; }
.formulario-conteudo { min-width: 0; }

.formulario-painel {
  min-width: 0;
  overflow: clip;
  border: 1px solid var(--borda);
  border-top: 2px solid var(--acento-ui);
  border-radius: 12px;
  background: linear-gradient(145deg, var(--superficie), var(--superficie-alta));
  box-shadow: var(--sombra-alta);
}

.formulario-secao-cabecalho {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 290px);
  gap: 24px;
  align-items: end;
  padding: 24px 26px;
  border-bottom: 1px solid var(--borda);
  background: radial-gradient(circle at 92% 0, var(--acento-ui-fraco), transparent 42%);
}

.formulario-secao-cabecalho > div { min-width: 0; }
.formulario-secao-cabecalho h2 {
  margin: 0;
  color: var(--texto);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.1;
  letter-spacing: -.04em;
}

.formulario-secao-cabecalho p {
  max-width: 68ch;
  margin: 9px 0 0;
  color: var(--texto-suave);
  font-size: var(--t-peq);
}

.formulario-perguntas {
  display: grid;
  gap: 14px;
  padding: 20px;
}

.formulario-pergunta {
  min-width: 0;
  margin: 0;
  padding: 20px;
  border: 1px solid var(--borda);
  border-radius: 11px;
  background: var(--tile);
  transition: border-color var(--movimento-rapido) var(--easing-ui), box-shadow var(--movimento-rapido) var(--easing-ui);
}

.formulario-pergunta:focus-within {
  border-color: var(--acento-ui);
  box-shadow: inset 3px 0 0 var(--acento-ui), 0 0 18px var(--acento-ui-fraco);
}

.formulario-pergunta.com-erro {
  border-color: var(--erro);
  box-shadow: inset 3px 0 0 var(--erro);
}

.formulario-pergunta.travada {
  background: var(--superficie-alta);
}

.formulario-pergunta-legenda {
  width: 100%;
  min-width: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: start;
  color: var(--texto);
}

.formulario-pergunta-numero {
  width: 32px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--borda-forte);
  border-radius: 7px;
  background: var(--superficie);
  color: var(--acento-ui);
  font: 700 10px/1 var(--fonte-num);
  letter-spacing: .08em;
}

.formulario-pergunta-titulo {
  white-space: pre-line;
  font-size: clamp(14px, 1.4vw, 16px);
  font-weight: 700;
  line-height: 1.5;
}

.formulario-obrigatoriedade {
  margin-top: 3px;
  padding: 3px 7px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  color: var(--texto-fraco);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.formulario-obrigatoriedade.obrigatorio {
  border-color: var(--acento-ui);
  color: var(--acento-ui);
  background: var(--acento-ui-fraco);
}

.formulario-ajuda,
.formulario-nota-campo,
.formulario-nota-fonte {
  margin: 10px 0;
  color: var(--texto-suave);
  font-size: var(--t-nota, 12px);
  line-height: 1.5;
}

.formulario-nota-fonte {
  padding: 8px 10px;
  border-left: 2px solid var(--demo);
  background: var(--demo-fundo);
  color: var(--demo);
}

.formulario-prefill {
  margin: 10px 0;
  padding: 9px 11px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  border: 1px solid var(--info);
  border-radius: 8px;
  background: var(--info-fundo);
  color: var(--info);
  font-size: var(--t-nota, 12px);
}

.formulario-campo,
.formulario-select {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--borda-forte);
  border-radius: 9px;
  background: var(--superficie);
  color: var(--texto);
  font: var(--t-base)/1.45 var(--fonte);
}

.formulario-select { appearance: auto; }
.formulario-select option { background: var(--superficie); color: var(--texto); }
.formulario-textarea { min-height: 132px; resize: vertical; }
.formulario-textarea-curta { min-height: 92px; }

.formulario-campo::placeholder { color: var(--texto-fraco); opacity: 1; }
.formulario-campo:disabled,
.formulario-select:disabled {
  cursor: not-allowed;
  opacity: .76;
  background: var(--superficie-alta);
}

.formulario-campo[aria-invalid="true"],
.formulario-select[aria-invalid="true"] { border-color: var(--erro); }

.formulario-campo-complemento {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
}

.formulario-campo-complemento .formulario-campo { margin-top: 0; }
.formulario-campo-complemento > span { color: var(--texto-suave); font-size: var(--t-peq); }

.formulario-selecao-grupo,
.formulario-controle-aberto { display: grid; gap: 9px; }
.formulario-selecao-grupo .formulario-campo + .formulario-campo { margin-top: 0; }

.formulario-radio-grupo,
.formulario-checkbox-grade,
.formulario-escala {
  margin-top: 12px;
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}

.formulario-radio,
.formulario-checkbox,
.formulario-escala-opcao {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--borda-forte);
  border-radius: 9px;
  background: var(--superficie);
  color: var(--texto-suave);
  font-size: var(--t-peq);
  cursor: pointer;
}

.formulario-radio:has(input:checked),
.formulario-checkbox:has(input:checked),
.formulario-escala-opcao:has(input:checked) {
  border-color: var(--acento-ui);
  background: var(--ativo-gradiente);
  color: var(--texto);
  box-shadow: 0 0 14px var(--acento-ui-fraco);
}

.formulario-radio input,
.formulario-checkbox input,
.formulario-escala-opcao input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--acento-ui);
}

.formulario-escala-opcao {
  width: 48px;
  justify-content: center;
  padding-inline: 6px;
  font: 700 var(--t-base)/1 var(--fonte-num);
}

.formulario-escala-opcao input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.formulario-escala-opcao:focus-within {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
}

.formulario-endereco {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.formulario-subcampo { min-width: 0; }
.formulario-subcampo.amplo { grid-column: span 4; }
.formulario-subcampo.medio { grid-column: span 2; }
.formulario-subcampo.curto { grid-column: span 1; }
.formulario-subcampo > :is(label, legend) {
  color: var(--texto-suave);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .04em;
}

.formulario-subcampo > :is(label, legend) span { color: var(--texto-fraco); font-weight: 400; }
.formulario-subcampo .formulario-campo { margin-top: 5px; }
.formulario-subcampo-boolean { margin: 0; padding: 0; border: 0; }

.formulario-arquivo { margin-top: 4px; }
.formulario-dropzone {
  min-height: 128px;
  margin-top: 14px;
  padding: 20px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  border: 1px dashed var(--borda-forte);
  border-radius: 10px;
  background:
    radial-gradient(var(--grade-grafico) 1px, transparent 1px),
    linear-gradient(145deg, var(--superficie), var(--superficie-alta));
  background-size: 18px 18px, auto;
  color: var(--texto-suave);
  text-align: center;
}

.formulario-dropzone strong { color: var(--texto); }
.formulario-dropzone span { font-size: var(--t-nota, 12px); }
.formulario-dropzone-icone { color: var(--acento-ui); font-size: 26px !important; }

.formulario-repetidor { margin-top: 12px; display: grid; gap: 10px; }
.formulario-repetidor-lista { display: grid; gap: 10px; }
.formulario-repetidor-item {
  min-width: 0;
  margin: 0;
  padding: 13px;
  border: 1px solid var(--borda);
  border-radius: 9px;
  background: var(--superficie);
}

.formulario-repetidor-item > legend {
  padding-inline: 6px;
  color: var(--acento-ui);
  font: 700 var(--t-micro)/1.3 var(--fonte-num);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.formulario-repetidor-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 10px;
}

.formulario-radio-grupo.compacto { margin-top: 5px; }
.formulario-radio-grupo.compacto .formulario-radio { min-height: 42px; }

.formulario-remover,
.formulario-botao-adicionar {
  min-height: 42px;
  border-radius: 8px;
  font: 700 var(--t-peq)/1.3 var(--fonte);
  cursor: pointer;
}

.formulario-remover {
  margin-top: 10px;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: var(--erro);
}

.formulario-botao-adicionar {
  justify-self: start;
  padding: 8px 12px;
  border: 1px solid var(--acento-ui);
  background: var(--acento-ui-fraco);
  color: var(--acento-ui);
}

.formulario-remover:disabled,
.formulario-botao-adicionar:disabled { opacity: .55; cursor: not-allowed; }

.formulario-limite { color: var(--texto-fraco); font-size: var(--t-micro); }
.formulario-vazio {
  padding: 15px;
  display: grid;
  gap: 3px;
  border: 1px dashed var(--borda);
  border-radius: 8px;
  color: var(--texto-fraco);
  font-size: var(--t-nota, 12px);
}
.formulario-vazio strong { color: var(--texto-suave); }

.formulario-erro-campo {
  min-height: 18px;
  margin-top: 8px;
  color: var(--erro);
  font-size: var(--t-nota, 12px);
  font-weight: 700;
}

.formulario-indisponivel {
  margin-top: 12px;
  padding: 14px;
  display: grid;
  gap: 4px;
  border: 1px dashed var(--atencao);
  border-radius: 9px;
  background: var(--atencao-fundo);
  color: var(--atencao);
}

.formulario-rodape-acao {
  position: sticky;
  z-index: 12;
  bottom: 0;
  min-height: 76px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid var(--borda);
  background: color-mix(in srgb, var(--superficie) 94%, transparent);
  backdrop-filter: blur(12px);
}

.formulario-status-salvamento {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--texto-suave);
  font-size: var(--t-nota, 12px);
}

.formulario-status-ponto {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--texto-fraco);
}

.formulario-status-salvamento.salvando .formulario-status-ponto { background: var(--atencao); animation: formulario-pulso 1s infinite; }
.formulario-status-salvamento.salvo .formulario-status-ponto { background: var(--ok); }
.formulario-status-salvamento.falha { color: var(--erro); }
.formulario-status-salvamento.falha .formulario-status-ponto { background: var(--erro); }

.formulario-botoes { display: flex; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.formulario-botao {
  min-height: 44px;
  padding: 10px 15px;
  border: 1px solid var(--borda-forte);
  border-radius: 9px;
  font: 700 var(--t-peq)/1.3 var(--fonte);
  cursor: pointer;
}

.formulario-botao.secundario { background: var(--tile); color: var(--texto); }
.formulario-botao.primario {
  border-color: var(--acento-ui);
  background: var(--acento-ui);
  color: var(--texto-inverso);
  box-shadow: 0 0 20px var(--acento-ui-fraco);
}

.formulario-botao:hover:not(:disabled),
.formulario-botao-icone:hover,
.formulario-botao-adicionar:hover:not(:disabled) { filter: brightness(1.08); }
.formulario-botao:disabled { opacity: .56; cursor: not-allowed; box-shadow: none; }

.formulario-revisao-status {
  margin: 20px 20px 0;
  padding: 14px 16px;
  display: grid;
  gap: 3px;
  border: 1px solid currentcolor;
  border-radius: 10px;
  font-size: var(--t-nota, 12px);
}
.formulario-revisao-status.completo { color: var(--ok); background: var(--ok-fundo); }
.formulario-revisao-status.pendente { color: var(--atencao); background: var(--atencao-fundo); }

.formulario-revisao-secoes { padding: 20px; display: grid; gap: 14px; }
.formulario-revisao-secao {
  overflow: hidden;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: var(--tile);
}

.formulario-revisao-secao > header {
  min-height: 54px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--borda);
}
.formulario-revisao-secao h3 { margin: 0; font-size: var(--t-med); }
.formulario-revisao-secao dl { margin: 0; }
.formulario-resumo-item {
  padding: 12px 14px;
  display: grid;
  grid-template-columns: minmax(180px, .75fr) minmax(0, 1.25fr);
  gap: 16px;
  border-bottom: 1px solid var(--borda-tabela);
}
.formulario-resumo-item:last-child { border-bottom: 0; }
.formulario-resumo-item dt { color: var(--texto-suave); font-size: var(--t-nota, 12px); }
.formulario-resumo-item dd { min-width: 0; margin: 0; color: var(--texto); font-size: var(--t-peq); overflow-wrap: anywhere; }
.formulario-resumo-item.pendente dd { color: var(--atencao); font-weight: 700; }

.formulario-conclusao {
  margin: 0 20px 20px;
  padding: 18px;
  display: grid;
  gap: 5px;
  border: 1px solid var(--ok);
  border-radius: 10px;
  background: var(--ok-fundo);
  color: var(--ok);
}

.formulario-rodape-global {
  min-height: 68px;
  padding-block: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid var(--borda);
  color: var(--texto-fraco);
  font-size: var(--t-micro);
}

.formulario-mensagem-central,
.formulario-carregando {
  width: min(520px, calc(100% - 32px));
  min-height: 100vh;
  margin-inline: auto;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  color: var(--texto-suave);
  text-align: center;
}

.formulario-mensagem-central .formulario-logo { margin-bottom: 20px; }
.formulario-mensagem-central h1 { margin: 0; color: var(--texto); font-size: clamp(26px, 6vw, 38px); letter-spacing: -.04em; }
.formulario-mensagem-central p { max-width: 48ch; margin: 0; }
.formulario-mensagem-icone {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid currentcolor;
  border-radius: 50%;
  font: 800 22px/1 var(--fonte);
}
.formulario-mensagem-icone-erro { color: var(--erro); background: var(--erro-fundo); }
.formulario-mensagem-icone-atencao { color: var(--atencao); background: var(--atencao-fundo); }

.formulario-carregando-marca { color: var(--acento-ui); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.formulario-esqueleto {
  width: min(360px, 80vw);
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--preench-vazio);
}
.formulario-esqueleto::after {
  content: "";
  display: block;
  width: 40%;
  height: 100%;
  background: var(--acento-ui);
  animation: formulario-carregar 1.2s infinite ease-in-out;
}

.formulario-app :is(button, input, textarea, select, a):focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
}

@keyframes formulario-pulso { 50% { opacity: .35; } }
@keyframes formulario-carregar { from { transform: translateX(-110%); } to { transform: translateX(260%); } }

@media (max-width: 920px) {
  .formulario-layout { grid-template-columns: minmax(0, 1fr); }
  .formulario-lateral { position: static; }
  .formulario-etapas { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .formulario-etapa { grid-template-columns: 30px minmax(0, 1fr); padding: 8px; }
  .formulario-lateral-ajuda { display: none; }
}

@media (max-width: 720px) {
  .formulario-topo-conteudo,
  .formulario-demo-conteudo,
  .formulario-main,
  .formulario-rodape-global { width: min(100% - 24px, 1240px); }
  .formulario-demo-conteudo { align-items: flex-start; flex-wrap: wrap; padding-block: 9px; }
  .formulario-demo-seletor { margin-left: auto; }
  .formulario-demo-acoes { width: 100%; margin-left: 0; }
  .formulario-main { padding-top: 18px; gap: 18px; }
  .formulario-hero { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 24px 20px; }
  .formulario-hero-progresso { padding: 16px; }
  .formulario-etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .formulario-secao-cabecalho { grid-template-columns: minmax(0, 1fr); padding: 21px 18px; }
  .formulario-perguntas { padding: 12px; }
  .formulario-pergunta { padding: 16px 14px; }
  .formulario-pergunta-legenda { grid-template-columns: 32px minmax(0, 1fr); }
  .formulario-obrigatoriedade { grid-column: 2; justify-self: start; margin-top: 0; }
  .formulario-endereco { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .formulario-subcampo.amplo,
  .formulario-subcampo.medio { grid-column: span 2; }
  .formulario-subcampo.curto { grid-column: span 1; }
  .formulario-rodape-acao { position: static; align-items: stretch; flex-direction: column; }
  .formulario-botoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .formulario-botao.primario { grid-column: 1 / -1; }
  .formulario-resumo-item { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

@media (max-width: 440px) {
  .formulario-topo-contexto { display: none; }
  .formulario-logo-imagem { height: 29px; }
  .formulario-demo-conteudo > span { flex: 1 1 170px; }
  .formulario-demo-seletor { width: 100%; margin-left: 0; }
  .formulario-demo-seletor select { flex: 1; max-width: none; }
  .formulario-demo-acoes { gap: 8px 14px; }
  .formulario-hero h1 { font-size: 36px; }
  .formulario-etapa { min-height: 54px; }
  .formulario-etapa-texto small { display: none; }
  .formulario-radio,
  .formulario-checkbox { flex: 1 1 120px; }
  .formulario-endereco { grid-template-columns: minmax(0, 1fr); }
  .formulario-subcampo.amplo,
  .formulario-subcampo.medio,
  .formulario-subcampo.curto { grid-column: span 1; }
  .formulario-botoes { grid-template-columns: minmax(0, 1fr); }
  .formulario-botao.primario { grid-column: auto; }
  .formulario-rodape-global { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .formulario-app *,
  .formulario-app *::before,
  .formulario-app *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}