/* Página do blog (lista completa) */
.blog-cab { padding-top: clamp(40px, 7vw, 88px); padding-bottom: clamp(24px, 3vw, 36px); }
.selo { font-size: .9375rem; font-weight: 700; letter-spacing: -.01em; }
.blog-cab h1 {
  margin-top: 14px; max-width: 12em;
  font-size: clamp(2.4rem, 1.3rem + 5vw, 4.5rem); line-height: 1; letter-spacing: -.04em; font-weight: 700; text-wrap: balance;
}
.blog-cab p.lead { margin-top: 16px; color: var(--cinza); font-size: 1.125rem; max-width: 32em; }

.ferramentas { display: grid; gap: 16px; padding-bottom: 28px; }
.linha-busca { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.busca { position: relative; flex: 1 1 280px; max-width: 520px; }
.busca svg { position: absolute; left: 16px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--cinza); pointer-events: none; }
.busca input {
  width: 100%; font: inherit; font-size: 1rem; color: var(--tinta);
  background: var(--painel); border: 1px solid var(--linha); border-radius: 999px; padding: 14px 44px 14px 46px;
  transition: border-color .25s, background-color .45s;
}
.busca input::placeholder { color: var(--cinza); }
.busca input:focus { outline: none; border-color: var(--tinta); }
.busca .limpar {
  position: absolute; right: 8px; top: 50%; translate: 0 -50%;
  width: 30px; height: 30px; border: 0; border-radius: 50%; cursor: pointer;
  background: transparent; color: var(--cinza); font-size: 1.1rem; display: none;
}
.busca.tem-texto .limpar { display: block; }
.busca .limpar:hover { background: var(--linha); color: var(--tinta); }

.vis { margin-left: auto; display: inline-flex; border: 1px solid var(--linha-forte); border-radius: 999px; padding: 3px; gap: 2px; }
.vis button {
  display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: .875rem; font-weight: 600;
  color: var(--tinta); background: transparent; border: 0; border-radius: 999px; padding: 8px 14px; cursor: pointer;
  transition: background-color .3s, color .3s;
}
.vis button svg { width: 16px; height: 16px; }
.vis button[aria-pressed="true"] { background: var(--tinta); color: var(--fundo); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip small { opacity: .55; margin-left: 4px; font-size: .75rem; }
.contagem { color: var(--cinza); font-size: .9375rem; min-height: 1.4em; }

.vazio { text-align: center; padding: 72px 20px; border: 1px dashed var(--linha-forte); border-radius: 18px; color: var(--cinza); }
.vazio strong { display: block; color: var(--tinta); font-size: 1.25rem; margin-bottom: 8px; }
.vazio button { margin-top: 18px; }

@media (max-width: 640px) { .vis { margin-left: 0; } .vis button .rot { display: none; } .vis button { padding: 9px 12px; } }