/* ============================================================
   base.css · reset, tipografia e estrutura da página
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte-corpo);
  font-size: var(--t-base);
  line-height: 1.55;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  /* Evita o realce azul do toque no Android/iOS, que dá a
     impressão de que o app travou ao tocar num botão.        */
  -webkit-tap-highlight-color: transparent;
}

img, svg { display: block; max-width: 100%; }

/* Todo elemento tocável reduz o atraso de 300ms do navegador */
button, a, label, input, select, [role="button"] { touch-action: manipulation; }

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
  color: var(--texto);
}
h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }

p { margin: 0; }
ul, ol { padding-left: 1.25rem; }

/* ── Foco visível ──────────────────────────────────────────
   Nunca removido. É a única pista de posição para quem navega
   por teclado, e ajuda quem usa o portal com o teclado virtual
   cobrindo metade da tela.                                     */
:focus-visible {
  outline: 3px solid var(--verde-fsj);
  outline-offset: 2px;
  border-radius: var(--raio-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* ── Estrutura ─────────────────────────────────────────── */
.app {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  max-width: 34rem;          /* ~544px: uma coluna, confortável no desktop */
  margin-inline: auto;
  background: var(--fundo);
  position: relative;
}

.conteudo {
  flex: 1;
  padding: var(--e-5) var(--e-5) var(--e-16);
  /* Reserva espaço para a barra de ação fixa na base */
  padding-bottom: calc(var(--toque) + var(--e-12) + env(safe-area-inset-bottom, 0px));
}

/* ── Utilitários ───────────────────────────────────────── */
.pilha    { display: flex; flex-direction: column; gap: var(--e-5); }
.pilha-sm { display: flex; flex-direction: column; gap: var(--e-3); }
.pilha-lg { display: flex; flex-direction: column; gap: var(--e-8); }
.linha    { display: flex; align-items: center; gap: var(--e-3); }

.oculto { display: none !important; }

/* O atributo `hidden` precisa vencer qualquer classe.
   Sem esta regra, `.pilha-lg`, `.campo`, `.aviso` e `.arquivo`
   declaram `display: flex` e anulam o `display: none` que o
   navegador aplica a [hidden] — o elemento continua na tela
   mesmo com `el.hidden = true`. Foi o que empilhou a tela
   inicial e o formulário um sobre o outro. */
[hidden] { display: none !important; }

/* Visível apenas para leitores de tela */
.so-leitor {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.rotulo-seçao, .rotulo-secao {
  font-family: var(--fonte-titulo);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texto-3);
}

.texto-aux { font-size: var(--t-sm); color: var(--texto-2); }

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