/* Reset mínimo e estilos de base — sem biblioteca, só o que o CSS resolve sozinho. */

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

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
}

/* Fundo em degradê contínuo (direção "opção B") — cobre a página inteira
   de uma vez só (sem seções com cor sólida própria no meio do caminho).
   Isso é proposital: uma div separada por seção, cada uma com sua cor
   sólida e só uma emenda curta na borda, foi testada e gerava linhas
   visíveis na exportação de referência — um único degradê no body evita
   esse problema de raiz. A cor de texto (claro em cima, escuro embaixo)
   é definida em cada componente conforme a posição no degradê. */
body {
  /* Garante que o degradê cubra a tela inteira mesmo em páginas curtas
     (ex: FAQ ou Blog com pouco conteúdo ainda) — sem isso, o body para
     onde o conteúdo termina e sobra um vão sem cor abaixo dele. */
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--degrade-marca);
  font-family: var(--fonte-corpo);
  font-size: var(--tam-corpo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, picture, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3 {
  font-family: var(--fonte-titulo);
  line-height: 1.25;
}

/* Foco visível em todo elemento focável — requisito WCAG 2.1 AA (regra 4).
   Cor clara por padrão: a maior parte da página (cabeçalho, hero, blocos
   1-2) ainda está na zona escura do degradê, onde --cor-foco (laranja)
   quase não aparece — contraste insuficiente. Em .zona-clara e no rodapé,
   onde o fundo já clareou, troca pra um contorno escuro. */
:focus-visible {
  outline: var(--foco-largura) solid var(--cor-superficie);
  outline-offset: var(--foco-offset);
}
.zona-clara :focus-visible,
.rodape :focus-visible {
  outline-color: var(--cor-texto-sobre-claro);
}

/* Link "pular para o conteúdo" — primeiro elemento focável da página, some
   visualmente até receber foco por teclado. */
.pular-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--cor-superficie);
  color: var(--cor-texto-principal);
  padding: var(--space-2) var(--space-3);
  z-index: 100;
  border-radius: var(--raio-pequeno);
  border: 1px solid var(--cor-borda);
}
.pular-conteudo:focus {
  left: var(--space-3);
  top: var(--space-3);
}

/* Visível só para leitor de tela — uso geral de acessibilidade. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.container {
  max-width: var(--largura-container);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.leitura {
  max-width: var(--largura-leitura);
}

/* Revelação discreta ao rolar — exceção pontual aprovada pelo cliente à
   regra de "sem animação de entrada" da Etapa 3. Só existe quando o JS
   roda (classe .js-reveal aplicada por scripts/reveal.js); sem JS a
   página fica inteiramente visível, sem depender do efeito. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease, transform .5s ease;
}
.js-reveal .reveal.reveal--visivel {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}