/* ==========================================================================
   BLOG — índice, arquivo de categoria e post.
   Conteúdo migrado do blog.prohunters.com.br (ver MIGRACAO-BLOG.md); aqui é só a
   apresentação.

   Direção: o blog fala a MESMA língua do resto do site — hero escuro com o tigre (o
   mesmo componente do institucional, definido no style.css), fundo cinza na listagem,
   moldura hairline nos cards, caps pequenas com tracking.
   ========================================================================== */

/* ---------- topo ----------
   Não tem regra aqui: o índice e o arquivo emitem `.ph-hero`, o MESMO hero escuro das
   páginas institucionais, cujas regras moram no `style.css` (global).
   Uma primeira versão tinha um topo claro próprio (`.bl-topo`) — recusado em 09/09 por
   ficar sem graça, e com razão: o hero escuro com o tigre já é o topo de toda página do
   site que não é de compra, e o blog é uma delas. */

/* Fundo cinza na área de conteúdo, como o `.ph-wrap` do institucional: é o que dá
   contraste para os cards brancos e emenda com o hero escuro. */
.bl-wrap { background: var(--cinza-50); padding: var(--sp-6) 0 var(--sp-9); }

/* ---------- layout com coluna lateral ----------
   Mesma proporção da sidebar institucional (268px): o blog não inventa uma medida
   própria para o mesmo papel. */
.bl-layout { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
@media (min-width: 900px) {
  .bl-layout { grid-template-columns: 268px 1fr; gap: var(--sp-6); align-items: start; }
}
.bl-main { min-width: 0; }
/* ⚠️ `min-width: 0` obrigatório: item de grid trava no min-content e a grade de cards
   estoura a coluna (a mesma armadilha do CLAUDE.md §4b com flex). */

.bl-side { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
@media (min-width: 900px) { .bl-side { position: sticky; top: 88px; } }

/* ---------- busca ----------
   Mesma geometria da busca do cabeçalho: altura 40px e `--raio` (12px), não pílula.
   ⚠️ A 1ª versão usava `border-radius: 999px`. O tema evita a pílula de propósito na
   busca — o comentário no `style.css` é explícito: "12px — geometria firme, sem bolha".
   Duas buscas na mesma tela com formatos diferentes leem como dois sistemas. */
.bl-busca { position: relative; }
.bl-busca input[type="search"] {
  width: 100%; height: 40px; padding: 0 44px 0 var(--sp-4);
  font-family: inherit; font-size: var(--fs-sm); color: var(--cor-texto);
  background: #fff; border: 1px solid var(--cinza-200); border-radius: var(--raio);
  outline: none;
  transition: border-color var(--t-rapida);
}
.bl-busca input[type="search"]:focus { border-color: var(--marca-primaria); }
.bl-busca button {
  position: absolute; top: 2px; right: 2px;
  display: grid; place-items: center; width: 36px; height: 36px;
  border: 0; background: none; color: var(--cor-texto-suave); cursor: pointer;
  border-radius: var(--raio-sm);
}
.bl-busca button:hover { color: var(--marca-primaria); }
.bl-busca svg { width: 17px; height: 17px; }

/* ---------- navegação por assunto ----------
   Cabeçalho escuro + lista, o mesmo idioma do `.ph-nav` das páginas institucionais.
   O histórico das tentativas no celular está na media query mais abaixo. */
.bl-nav {
  background: #fff;
  border: 1px solid var(--cor-borda); border-radius: var(--raio);
  overflow: hidden;
}
/* O cabeçalho é um <button> para funcionar como gatilho no celular. No desktop ele é
   só rótulo: `pointer-events: none` evita o cursor de mão e o foco num controle que
   ali não controla nada. */
.bl-nav__head {
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%; text-align: left;
  background: var(--marca-primaria); color: var(--marca-sobre-primaria);
  border: 0; padding: var(--sp-3) var(--sp-4);
  font-family: inherit; font-size: var(--fs-xs); font-weight: var(--peso-heavy);
  text-transform: uppercase; letter-spacing: .1em;
  cursor: pointer;
}
.bl-nav__head-rot { flex: 1; min-width: 0; }
.bl-nav__head-rot--curto { display: none; }
/* Fechado, o botão precisa dizer em QUE assunto a pessoa está — senão vira uma gaveta
   anônima. Some no desktop, onde a lista inteira está à vista. */
.bl-nav__head-atual { display: none; }
.bl-nav__seta { width: 18px; height: 18px; flex: none; display: none; transition: transform var(--t-rapida); }

.bl-nav__painel { display: block; }
.bl-nav__lista { list-style: none; margin: 0; padding: 0; }
/* ⚠️ Sem barra colorida à esquerda no item ativo. O `.ph-nav` institucional usa uma, mas
   ali a lista é de links soltos; aqui cada linha já tem a pastilha de contagem à direita,
   e a barra virava um terceiro elemento colorido competindo na mesma linha.
   O ativo se distingue por peso, fundo e pela pastilha invertida — que é o suficiente. */
.bl-nav__link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: 11px var(--sp-4);
  border-top: 1px solid var(--cor-borda);
  font-size: var(--fs-sm); color: var(--cor-texto-suave); text-decoration: none;
  transition: color var(--t-rapida), background var(--t-rapida);
}
.bl-nav__lista li:first-child .bl-nav__link { border-top: 0; }
.bl-nav__link:hover { color: var(--marca-secundaria); background: var(--cinza-50); }
.bl-nav__link.is-on {
  color: var(--marca-secundaria); font-weight: var(--peso-bold);
  background: var(--cinza-50);
}
.bl-nav__n {
  flex: none;
  min-width: 26px; padding: 2px 7px;
  background: var(--cor-fundo-alt); border-radius: 999px;
  font-size: 11px; font-weight: var(--peso-semibold); text-align: center;
  color: var(--cor-texto-suave);
}
.bl-nav__link.is-on .bl-nav__n { background: var(--marca-primaria); color: var(--marca-sobre-primaria); }

/* Desktop: o cabeçalho é rótulo, não controle. */
@media (min-width: 900px) {
  .bl-nav__head { cursor: default; pointer-events: none; }
}

/* Celular: cabeçalho vira botão e a lista, painel recolhível.
   ⚠️ Duas tentativas antes desta, e as duas estão registradas no PHP: pílulas com
   rolagem horizontal (metade fora da tela) e lista em duas colunas (rótulo quebrando ao
   lado da contagem — ilegível). Uma coluna resolveria a leitura, mas seriam 6 linhas
   ocupando a primeira tela inteira antes de qualquer matéria.
   `0fr → 1fr` anima até a altura AUTOMÁTICA — mesma técnica do painel de filtro da PLP,
   sem `max-height` chutado e sem medir nada por JS. */
@media (max-width: 899px) {
  .bl-nav__head-atual {
    display: inline-flex; align-items: center; gap: 6px;
    text-transform: none; letter-spacing: 0;
    font-size: var(--fs-sm); font-weight: var(--peso-semibold);
    opacity: .85;
  }
  .bl-nav__head-atual .bl-nav__n { background: rgba(255, 255, 255, .16); color: inherit; }
  .bl-nav__head-rot { display: none; }
  .bl-nav__head-rot--curto { display: inline; flex: none; }
  .bl-nav__seta { display: block; margin-left: auto; }
  .bl-nav__head[aria-expanded="true"] .bl-nav__seta { transform: rotate(180deg); }
  .bl-nav__head[aria-expanded="true"] .bl-nav__head-atual { display: none; }

  .bl-nav__painel {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows var(--dur-media) var(--ease-assenta);
  }
  .bl-nav__lista { overflow: hidden; min-height: 0; }
  .bl-nav__head[aria-expanded="true"] + .bl-nav__painel { grid-template-rows: 1fr; }
}

/* ---------- grade de cards ---------- */
.bl-grade {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-5);
}
@media (min-width: 640px) { .bl-grade { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .bl-grade { grid-template-columns: repeat(3, 1fr); } }
/* ⚠️ 1280 e nao 992: com a coluna lateral de 268px, tres cards a 992 ficariam com ~215px
   cada — foto ilegivel e titulo em cinco linhas. */

/* ---------- card ----------
   Não herda `.card-produto`: card de produto fecha uma venda (preço, selo de frete,
   botão) e card de matéria abre uma leitura. Só o vocabulário é o mesmo. */
.bl-card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--cor-borda); border-radius: var(--raio);
  overflow: hidden;
  transition: border-color var(--t-rapida), box-shadow var(--t-rapida);
}
.bl-card:hover { border-color: var(--marca-acento); box-shadow: var(--sombra-sm); }

/* 16/9 medido, não escolhido no olho: das 42 capas migradas, **30 estão entre 1,5:1 e
   1,85:1** e a mediana é 1,71:1 — 16/9 (1,78) é o que menos corta o acervo real.
   ⚠️ Uma primeira tentativa usou 2/1 porque a capa do DESTAQUE tem 2,11:1. Era otimizar a
   grade inteira para uma imagem: nas outras 30 o box 2/1 passava a comer topo e base. */
.bl-card__foto {
  display: block; aspect-ratio: 16 / 9; background: var(--cinza-50);
  overflow: hidden;
}
.bl-card__foto img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease;
}
.bl-card:hover .bl-card__foto img { transform: scale(1.03); }

.bl-card__corpo {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-4);
  flex: 1;
}
.bl-card__cat {
  align-self: flex-start;
  font-size: var(--fs-xs); font-weight: var(--peso-heavy);
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--marca-acento); text-decoration: none;
}
.bl-card__cat:hover { text-decoration: underline; }
.bl-card__titulo {
  margin: 0;
  font-size: 1.0625rem; font-weight: var(--peso-heavy); line-height: 1.3;
  /* ⚠️ break-word, nunca `anywhere`: o catálogo tem título com barra sem espaço e
     `anywhere` ignora a dica de quebra, cortando no meio da palavra (CLAUDE.md §4b). */
  overflow-wrap: break-word;
}
.bl-card__titulo a { color: inherit; text-decoration: none; }
.bl-card__titulo a:hover { color: var(--marca-primaria); }
.bl-card__resumo {
  margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--cor-texto-suave);
}
.bl-card__meta {
  margin: auto 0 0; padding-top: var(--sp-2);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: var(--fs-xs); color: var(--cor-texto-suave);
}

/* Destaque: no desktop vira duas colunas (foto | texto) e ocupa a largura toda. */
.bl-card--destaque { margin-bottom: var(--sp-5); }
@media (min-width: 768px) {
  .bl-card--destaque { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; }
  /* ⚠️ O DESTAQUE não recorta: a capa entra na proporção que tem.
     Ele é grande e é o primeiro que se lê — 4 das 42 capas são banners largos com o
     TÍTULO dentro da arte, e ali qualquer corte lateral come a primeira palavra
     ("O QUE É ESPINGARDA" virava "QUE É ESPINGARDA"). Na grade o corte se aceita porque
     o card é pequeno e o título vem escrito logo abaixo; aqui, não.
     Mesma razão pela qual a capa dentro do post também não é recortada. */
  .bl-card--destaque .bl-card__foto { aspect-ratio: auto; }
  .bl-card--destaque .bl-card__foto img { height: auto; object-fit: contain; }
  .bl-card--destaque .bl-card__corpo { padding: var(--sp-6); gap: var(--sp-3); }
  .bl-card--destaque .bl-card__titulo { font-size: clamp(1.25rem, 2.2vw, 1.75rem); }
}

/* ---------- post ----------
   O post NÃO usa o hero escuro. Índice e categoria são telas de seção — o hero diz onde
   você está. Aqui o título É o conteúdo, e ele já ocupa esse papel: repetir a banda
   escura só empurraria a leitura para baixo. */
.bl-post__topo {
  padding-block: var(--sp-6) var(--sp-5);
  background: #fff;
}
.bl-post__crumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2);
  font-size: var(--fs-sm); color: var(--cor-texto-suave);
  margin-bottom: var(--sp-3);
}
.bl-post__crumb a { color: inherit; text-decoration: none; }
.bl-post__crumb a:hover { color: var(--cor-texto); text-decoration: underline; }
.bl-post__titulo {
  margin: 0; max-width: 22ch;
  font-size: clamp(1.75rem, 4.6vw, 2.75rem); font-weight: var(--peso-heavy);
  text-transform: uppercase; line-height: 1.04; letter-spacing: -0.015em;
}
/* ⚠️ 22ch é medida de TÍTULO, não de texto: o do blog vem em caixa alta e uma linha
   corrida de 90 caracteres em caps é ilegível. O corpo tem a sua, mais adiante. */
.bl-post__meta {
  margin: var(--sp-4) 0 0;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: var(--fs-sm); color: var(--cor-texto-suave);
}
.bl-post__atualizado { font-style: italic; }

/* ---------- cabeçalho em 2 colunas (desktop) ----------
   Texto à esquerda, capa à direita. Antes a capa vinha ABAIXO do título, com
   900px de largura: ocupava a tela toda e empurrava a primeira linha do artigo
   para fora da dobra. Lado a lado, título e capa cabem juntos e a leitura começa
   sem rolar.
   ⚠️ `minmax(0, …)` nas DUAS colunas: `1fr` é `minmax(auto, 1fr)`, e o `auto`
   trava no min-content — um título em caixa alta com palavra longa esticaria a
   coluna e empurraria a página para a rolagem horizontal.
   ⚠️ Só com capa. Sem imagem, a grade tem uma coluna e o texto ocupa a largura
   inteira, como antes — senão sobraria metade da faixa vazia. */
.bl-post__cabeca { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
@media (min-width: 1024px) {
  .bl-post__cabeca--capa {
    grid-template-columns: minmax(0, 1fr) minmax(0, 44%);
    gap: var(--sp-7);
    align-items: center;
  }
}

/* ⚠️ Sem recorte por altura (`object-fit: cover`): as capas do blog são BANNERS
   com texto dentro — cortar a altura decapitaria a chamada da própria arte. Por
   isso a capa nunca tem altura fixa; quem manda na medida é a coluna. */
.bl-post__capa { margin: 0; }
.bl-post__capa img {
  width: 100%; height: auto; display: block;
  border-radius: var(--raio); border: 1px solid var(--cor-borda);
}
/* No mobile ela volta a ser uma faixa abaixo do texto, com o respiro que a grade
   de uma coluna não dá sozinha no fim do cabeçalho. */
@media (max-width: 1023px) {
  .bl-post__capa img { max-width: 900px; }
}

.bl-post__corpo { padding-bottom: var(--sp-8); }

/* ---------- sumário "Neste artigo" ----------
   O post é coluna única de propósito (ver o cabeçalho do single.php: lateral de
   navegação disputa atenção de quem está lendo). O sumário é a exceção que
   confirma: ele não leva para fora do artigo, leva para dentro dele.

   ⚠️ `minmax(0, 1fr)` na coluna da prosa, nunca `1fr`: `1fr` é `minmax(auto, 1fr)`
   e o `auto` trava a coluna no min-content do conteúdo — tabela ou imagem larga
   herdada do blog antigo empurraria a página para a rolagem horizontal. */
.bl-post__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
@media (min-width: 1024px) {
  .bl-post__layout--sumario {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: var(--sp-7);
    align-items: start;
  }
}

.bl-sumario {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  overflow: hidden;
  background: #fff;
  /* ⚠️ SEM teto de altura no mobile. A primeira versão limitava a 210px com rolagem
     própria, para a caixa não virar uma parede de links entre o título e a primeira
     linha. Só que o corte cai no meio de um item e a caixa lê como quebrada, não
     como rolável — some o fim da palavra e não há nada indicando que continua.
     Lista inteira, mesmo custando altura. O teto existe só no desktop, onde ele é
     relativo à janela e a caixa é uma coluna fixa ao lado do texto. */
  display: flex; flex-direction: column;
}
.bl-sumario__tit {
  flex: none; margin: 0;
  padding: 11px var(--sp-4);
  background: var(--marca-primaria); color: var(--marca-sobre-primaria);
  font-size: var(--fs-xs); font-weight: var(--peso-heavy);
  text-transform: uppercase; letter-spacing: .08em; text-align: center;
}
.bl-sumario__lista {
  margin: 0; padding: var(--sp-3) var(--sp-4);
  overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--cinza-300) transparent;
  list-style: none; counter-reset: sumario;
  font-size: var(--fs-sm); line-height: 1.4;
}
.bl-sumario__lista li { counter-increment: sumario; display: flex; gap: .45rem; }
.bl-sumario__lista li + li { margin-top: 11px; }
/* ⚠️ O número fica na PRIMÁRIA, não no acento. O acento (#78B981) é o único tom
   claro da marca e seria o candidato natural para "o verde", mas sobre branco ele
   dá ~2,2:1 de contraste — reprovado para texto pequeno. Quem separa o número do
   título aqui é o peso, não a cor. */
.bl-sumario__lista li::before {
  content: counter( sumario, decimal-leading-zero ) ".";
  flex: none; font-weight: var(--peso-heavy); color: var(--marca-primaria);
}
.bl-sumario__lista a {
  color: var(--cor-texto); text-decoration: none;
  transition: color var(--t-rapida);
}
.bl-sumario__lista a:hover { color: var(--marca-primaria); text-decoration: underline; text-underline-offset: 2px; }

@media (min-width: 1024px) {
  .bl-sumario {
    position: sticky;
    /* acompanha o topo fixo; --h-topo é medido pelo header.js */
    top: calc(var(--h-topo, 130px) + var(--sp-4));
    max-height: calc(100vh - var(--h-topo, 130px) - var(--sp-6));
  }
}

/* ---------- prosa ----------
   Medida de leitura limitada: linha longa demais faz o olho perder o começo da
   seguinte. O conteúdo veio de outro tema e traz HTML variado (h2/h3, listas, tabelas,
   imagens soltas), então tudo aqui é estilizado por elemento, sem depender de classe. */
.bl-prosa { max-width: 68ch; font-size: 1.0625rem; line-height: 1.75; color: var(--cor-texto); }
.bl-prosa > * + * { margin-top: var(--sp-4); }
.bl-prosa h2 {
  margin-top: var(--sp-7);
  font-size: clamp(1.25rem, 2.6vw, 1.625rem); font-weight: var(--peso-heavy);
  text-transform: uppercase; line-height: 1.15; letter-spacing: -0.01em;
}
.bl-prosa h3 {
  margin-top: var(--sp-6);
  font-size: 1.1875rem; font-weight: var(--peso-heavy); line-height: 1.25;
}
.bl-prosa h4 { margin-top: var(--sp-5); font-size: 1.0625rem; font-weight: var(--peso-heavy); }
.bl-prosa p { margin: 0; }
.bl-prosa a { color: var(--marca-primaria); text-decoration: underline; text-underline-offset: 2px; }
.bl-prosa a:hover { color: var(--marca-primaria-escura); }
.bl-prosa ul, .bl-prosa ol { padding-left: 1.25rem; }
.bl-prosa li + li { margin-top: 6px; }
.bl-prosa img {
  max-width: 100%; height: auto; display: block;
  border-radius: var(--raio-sm); border: 1px solid var(--cor-borda);
}
.bl-prosa figure { margin: var(--sp-5) 0; }
.bl-prosa figcaption {
  margin-top: 8px; font-size: var(--fs-xs); color: var(--cor-texto-suave); text-align: center;
}
.bl-prosa blockquote {
  margin: var(--sp-5) 0; padding: var(--sp-3) 0 var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--marca-acento);
  font-size: 1.125rem; line-height: 1.6; color: var(--cor-texto-suave);
}
.bl-prosa blockquote p { margin: 0; }
.bl-prosa iframe, .bl-prosa video {
  max-width: 100%; width: 100%; aspect-ratio: 16 / 9; height: auto;
  border: 0; border-radius: var(--raio-sm); display: block;
}
/* Tabela herdada de outro tema estoura em telas estreitas — rola dentro da própria
   caixa em vez de empurrar a página inteira para a rolagem horizontal. */
.bl-prosa table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); display: block; overflow-x: auto; }
.bl-prosa th, .bl-prosa td { border: 1px solid var(--cor-borda); padding: 8px 10px; text-align: left; }
.bl-prosa th { background: var(--cor-fundo-alt); font-weight: var(--peso-heavy); }

/* ---------- assuntos no pé do post ---------- */
.bl-post__tags {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  max-width: 68ch;
  margin-top: var(--sp-7); padding-top: var(--sp-4);
  border-top: 1px solid var(--cor-borda);
}
.bl-post__tags-rot {
  font-size: var(--fs-xs); font-weight: var(--peso-heavy);
  text-transform: uppercase; letter-spacing: .1em; color: var(--cor-texto-suave);
}
.bl-tag {
  padding: 5px 12px;
  border: 1px solid var(--cor-borda); border-radius: 999px;
  font-size: var(--fs-sm); color: var(--cor-texto); text-decoration: none;
}
.bl-tag:hover { border-color: var(--marca-primaria); }

/* ---------- leia também ---------- */
.bl-leia { padding-block: var(--sp-7); background: var(--cor-fundo-alt); border-top: 1px solid var(--cor-borda); }
.bl-leia__tit {
  margin: 0 0 var(--sp-5);
  font-size: 1.25rem; font-weight: var(--peso-heavy);
  text-transform: uppercase; letter-spacing: .02em;
}

/* ---------- paginação / vazio ---------- */
.bl-vazio { padding: var(--sp-7) 0; color: var(--cor-texto-suave); }
.bl-vazio a { color: var(--marca-primaria); }

.pagination { margin-top: var(--sp-7); display: flex; justify-content: center; }
.pagination .nav-links { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 12px;
  border: 1px solid var(--cor-borda); border-radius: var(--raio-sm);
  font-size: var(--fs-sm); font-weight: var(--peso-semibold);
  color: var(--cor-texto); text-decoration: none;
}
.pagination .page-numbers:hover { border-color: var(--marca-primaria); }
.pagination .page-numbers.current {
  background: var(--marca-primaria); border-color: var(--marca-primaria);
  color: var(--marca-sobre-primaria);
}
.pagination .page-numbers.dots { border: 0; }

@media (prefers-reduced-motion: reduce) {
  .bl-card__foto img { transition: none; }
  .bl-card:hover .bl-card__foto img { transform: none; }
}

/* ---------- AJAX: troca de assunto sem recarregar ----------
   Mesmo comportamento da PLP (categoria.css): o miolo esmaece enquanto carrega e o
   conteúdo novo entra com um fade curto. Sem o fade, a lista saía apagada e os cards
   novos apareciam de uma vez, em opacidade cheia — o corte lê como "pulo". */
.bl-main.is-carregando [data-bl-resultados] {
  opacity: .45; pointer-events: none;
  transition: opacity var(--t-rapida);
}
@keyframes bl-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
[data-bl-resultados].is-entrando { animation: bl-entra var(--dur-media) var(--ease-assenta) both; }

@media (prefers-reduced-motion: reduce) {
  [data-bl-resultados].is-entrando { animation: none; }
  .bl-nav__painel, .bl-nav__seta { transition: none; }
}