/* =========================================================
   ELAS EM CAMPO / pagina de lista de materias
   (tambem traz o topo de pagina usado em Quem faz)
   ========================================================= */

.pagina {
  max-width: 1200px;
  margin: 0 auto;
  padding: calc(var(--altura-menu) + 40px) var(--gutter) 64px;
}
.pagina__topo {
  margin-bottom: 28px;
}
/* Adesivo do titulo: so do tamanho do texto, com margem curta */
.pagina__titulo {
  width: fit-content;
  padding: 0.3em 0.5em 0.22em;
  font-size: clamp(2.4rem, 11vw, 4rem);
}
.pagina__sub {
  margin: 18px 0 0;
  color: var(--creme);
  font-size: 1.05rem;
}

/* ---------- Filtros ---------- */
/* Todas as categorias numa linha so. Se nao couber (celular), a linha rola para o lado */
.filtros {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 0 -8px 34px;
  padding: 10px 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.filtros::-webkit-scrollbar {
  display: none;
}
.filtro {
  flex: none;
  min-height: 40px;
  padding: 0.35em 0.65em;
  border: 0;
  background: none;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
  transition: transform 0.2s ease;
}
.filtro:nth-child(odd) { --giro: -1.8deg; }
.filtro:nth-child(even) { --giro: 1.6deg; }
.filtro:hover {
  transform: rotate(0deg) scale(1.05);
}
/* Filtro ativo: papel com contorno preto, bem visivel */
.filtro[aria-pressed="true"] {
  transform: rotate(0deg) scale(1.06);
}
.filtro[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid var(--preto);
  box-shadow: 0 0 0 2px var(--creme);
  pointer-events: none;
}