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

/* Sem isto, qualquer classe que defina `display` (ex. `.btn{display:inline-flex}`)
   vence a regra do próprio navegador para `[hidden]` — o atributo continua
   `true`, mas o elemento aparece na tela do mesmo jeito, ainda ocupando
   espaço. Achado real: o botão "Limpar filtros" (`.btn` + `hidden`) nunca
   desaparecia de verdade depois de limpar os filtros. O padrão do projeto é
   alternar visibilidade via `.hidden`/`hidden:true`, não `style.display` —
   esta regra é o que garante que esse padrão funcione em qualquer elemento,
   não só nos que não têm `display` definido por classe. */
[hidden] { display: none !important; }

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

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }

ul[role="list"], ol[role="list"] { list-style: none; padding: 0; margin: 0; }

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

input, button, textarea, select { font: inherit; color: inherit; }

button { cursor: pointer; background: none; border: none; padding: 0; }

table { border-collapse: collapse; }

:focus-visible { outline: 2px solid var(--azul-500); outline-offset: 2px; }

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