/* ==========================================================================
   BASE — reset + fundamentos tipográficos
   ========================================================================== */

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

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--marrom);
  font-family: var(--fonte-corpo);
  font-size: var(--fs-corpo);
  font-weight: 400;
  line-height: var(--lh-corpo);
  letter-spacing: var(--tracking-corpo);
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--fonte-display);
  font-weight: 500;
  line-height: var(--lh-titulo);
  text-transform: uppercase;
}

p {
  margin: 0;
}

/* O `ol` estava FORA deste reset, e isso desalinhava a seção Processo.

   O `<ol class="processo">` ficava com o `padding-inline-start: 40px` e o
   `margin-block: 1em` da folha do agente do usuário. Medido em 375px: o
   texto da seção (sigla, título e apoio) começava em x=20, na margem da
   viewport, e os cinco cartões de etapa em x=60 — 40px para dentro, com
   295px de largura em vez de 335. No desktop o mesmo recuo encolhia as cinco
   colunas do grid e empurrava a fileira inteira para a direita.

   Não aparecia como transbordo em nenhuma conferência de largura, porque o
   recuo é para DENTRO: nada estourava a tela, só nada se alinhava. */
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Foco visível — 2px em magenta, nunca removido. */
:focus-visible {
  outline: 2px solid var(--magenta);
  outline-offset: 3px;
}

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--margem-viewport);
}

.kicker {
  display: block;
  font-family: var(--fonte-display);
  font-weight: 300;
  font-size: var(--fs-kicker);
  letter-spacing: var(--tracking-titulo-curto);
  text-transform: uppercase;
  color: var(--magenta);
}

.titulo-secao {
  font-size: var(--fs-titulo-secao);
  /* Caixa alta com tracking largo é assinatura da marca, mas o tracking de
     seção foi calibrado para 2rem. Nos tamanhos grandes de agora ele abriria
     demais as palavras, então o título usa o tracking de capa. */
  letter-spacing: var(--tracking-titulo-capa);
  text-wrap: balance;
}

/* Segunda cor dentro do título. Magenta sobre creme dá 5,28:1 — aprovado
   a partir de 16px, e todo título de seção passa disso com folga. */
.acento {
  color: var(--magenta);
}

/* Sobre marrom, o rosa-antigo dá 3,16:1 — passaria raspando na régua de texto
   grande. O rosa-tinte dá 8,8:1 e não depende do tamanho. */
.secao-cabecalho--claro .acento {
  color: var(--rosa-tinte);
}

/* O `display: none` que o navegador dá a [hidden] vem da folha de estilo do
   agente do usuário, e QUALQUER `display` declarado por nós vence — inclusive
   por especificidade mínima, como `.bloco { display: grid }`. Resultado
   medido: uma seção com `hidden` continuava ocupando 183px, e um link de
   índice escondido seguia clicável com 136px de largura.

   Esta regra devolve a `[hidden]` a autoridade que ele deveria ter. É o único
   `!important` do projeto, e existe porque a alternativa é repetir
   `seletor[hidden] { display: none }` para cada componente que já declara
   display — uma dívida que só cresce. */
[hidden] {
  display: none !important;
}

.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;
}

.pular-para-conteudo {
  position: absolute;
  left: var(--espaco-sm);
  top: -100%;
  z-index: 100;
  background: var(--marrom);
  color: var(--creme);
  padding: var(--espaco-2xs) var(--espaco-sm);
  font-family: var(--fonte-display);
  letter-spacing: var(--tracking-titulo-curto);
  text-transform: uppercase;
  font-size: var(--fs-legenda);
  transition: top var(--dur-fast) var(--ease-out);
}

.pular-para-conteudo:focus-visible {
  top: var(--espaco-sm);
}

/* --------------------------------------------------------------------------
   Contrato de segurança: se o JS falhar, TUDO precisa estar visível.
   Os estados "escondido para animar depois" só existem quando <html> ganha
   .js-enabled via script no <head>. Sem essa classe, nada usa opacity:0.
   -------------------------------------------------------------------------- */
.js-enabled [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
}

.js-enabled [data-reveal].em-vista {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

.js-enabled [data-reveal-linha] .linha__inner {
  transform: translateY(100%);
}

.js-enabled [data-reveal-linha].em-vista .linha__inner {
  transform: translateY(0);
  transition: transform var(--dur-base) var(--ease-out);
}