/* ==========================================================================
   Base — tipografia e elementos globais
   ========================================================================== */

body {
  font-family: var(--fonte);
  font-size: var(--fs-body);
  color: var(--tinta);
  background-color: var(--fundo);

  /* Dois elementos ficam legitimamente fora da viewport à direita:
     as animações de entrada, que deslocam o elemento 32px antes de revelá-lo,
     e o painel do menu mobile, estacionado em translateX(100%) enquanto fechado.
     Ambos ampliam a área rolável e criam scroll horizontal na página inteira.

     `clip` corta esse excesso sem criar um scroll container — diferente de
     `hidden`, que transformaria o body em scrollport e quebraria
     `position: sticky` de qualquer descendente. `hidden` fica só como
     fallback para navegadores sem suporte a `clip`. */
  overflow-x: hidden;
  overflow-x: clip;
}

h1 {
  font-size: var(--fs-h1);
  font-weight: 800;
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -0.015em;
}

h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -0.01em;
}

strong,
b {
  font-weight: 700;
}

/* Foco visível em qualquer elemento interativo. Nunca remover. */
:focus-visible {
  outline: 3px solid var(--verde-escuro);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Some o outline apenas para quem usa mouse — teclado sempre vê. */
:focus:not(:focus-visible) {
  outline: none;
}

::selection {
  background-color: var(--verde);
  color: var(--tinta);
}

/* --------------------------------------------------------------------------
   Utilitários
   -------------------------------------------------------------------------- */

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

/* Link de pular para o conteúdo: aparece só ao receber foco. */
.pular-para-conteudo {
  position: absolute;
  top: var(--espaco-3);
  left: var(--espaco-3);
  z-index: calc(var(--z-menu) + 10);
  padding: var(--espaco-3) var(--espaco-5);
  background-color: var(--tinta);
  color: #fff;
  border-radius: var(--raio);
  font-weight: 600;
  transform: translateY(-150%);
  transition: transform var(--t-media) var(--easing-entrada);
}

.pular-para-conteudo:focus {
  transform: translateY(0);
}

.container {
  width: var(--container);
  margin-inline: auto;
}

.container-estreito {
  width: var(--container-estreito);
  margin-inline: auto;
}

.secao {
  padding-block: var(--espaco-secao);
  scroll-margin-top: var(--altura-header);
}

.secao--suave {
  background-color: var(--fundo-suave);
}

.secao--escura {
  background-color: var(--escuro);
  color: #fff;
}

.secao--escura h2,
.secao--escura h3 {
  color: #fff;
}

.secao__cabecalho {
  max-width: 44rem;
  margin-bottom: var(--espaco-bloco);
}

.secao__cabecalho--centro {
  margin-inline: auto;
  text-align: center;
}

.secao__etiqueta {
  display: inline-block;
  margin-bottom: var(--espaco-3);
  padding: var(--espaco-1) var(--espaco-3);
  border-radius: var(--raio-pilula);
  background-color: var(--verde-suave);
  color: var(--verde-mais-escuro);
  font-size: var(--fs-mini);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.secao--escura .secao__etiqueta {
  background-color: var(--verde-vidro);
  color: var(--verde);
}

.secao__descricao {
  margin-top: var(--espaco-4);
  font-size: var(--fs-grande);
  color: var(--tinta-media);
}

.secao--escura .secao__descricao {
  color: rgb(255 255 255 / 0.72);
}

.texto-verde {
  color: var(--verde-escuro);
}

.secao--escura .texto-verde {
  color: var(--verde);
}