/* BASE — reset enxuto, tipografia e acessibilidade.
   Sem normalize.css: o que precisa de reset aqui cabe em vinte linhas, e
   dependência que a gente não lê é dependência que a gente não audita. */

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

body, h1, h2, h3, p, ol, ul, dl, dd, figure {
  margin: 0;
  padding: 0;
}

body {
  background: var(--creme);
  color: var(--escuro);
  font-family: var(--fonte);
  font-size: var(--t-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--verde); }

h1, h2, h3 { line-height: 1.2; font-weight: 700; }

ol, ul { list-style: none; }

/* Foco visível é requisito de acessibilidade, não enfeite. Quem navega por
   teclado precisa saber onde está. Nunca remover sem substituir. */
:focus-visible {
  outline: 3px solid var(--verde);
  outline-offset: 3px;
}

/* Link de pular navegação: primeiro elemento focável da página, invisível
   até receber foco. Quem usa leitor de tela não repete o menu 99 vezes. */
.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--verde);
  color: var(--branco);
  padding: var(--e-3) var(--e-4);
  z-index: 100;
}
.pular:focus { left: 0; }

.interno,
.topo__interno, .rodape__interno, .capa__interno, .tese__interno,
.destaques__interno, .como__interno, .cat__interno, .produto__interno {
  max-width: var(--largura-max);
  margin: 0 auto;
  padding-left: var(--e-6);
  padding-right: var(--e-6);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}