/* =========================================================
   B2 Rocket Layout — Distribuidora Paris
   marcas.css: a lista completa, com filtro por tipo e busca.

   A grade é desenhada em fio de 1px, sem caixa nem sombra: com cem células, o
   que organiza é o alinhamento, não o enfeite. Os logos entram em silhueta
   azul, todos no mesmo peso óptico — é isso que faz a página parecer uma
   coleção e não uma pasta de imagens.
   ========================================================= */

.brl-marcas-topo{
  max-width:var(--paris-larg);
  margin:0 auto;
  padding:clamp(56px, 6vw, 92px) var(--paris-pad) 0;
  text-align:center;
}
.brl-marcas-intro{
  margin:30px auto 0;
  max-width:620px;
  font-size:17px;line-height:1.8;color:var(--paris-tinta-2);
}

/* ---------- painel de filtros ---------- */
/* Três faixas empilhadas e separadas por fio: busca, tipo, inicial. A busca
   vem primeiro e ocupa a largura inteira — é o atalho de quem já sabe o que
   quer. Nada tem moldura: com cem logos abaixo, caixa em volta de botão
   compete com a grade, que é o assunto da página. */

.brl-grade-bloco{
  max-width:var(--paris-larg-grade);
  margin:0 auto;
  padding:clamp(44px, 4.5vw, 68px) var(--paris-pad) 0;
}

.brl-filtros{
  border-top:1px solid var(--paris-linha);
  border-bottom:1px solid var(--paris-linha);
}

/* ---- tipo ---- */
.brl-filtros-cats{
  display:flex;flex-wrap:wrap;
  gap:4px 30px;
  padding:18px 0;
  border-bottom:1px solid var(--paris-linha);
}
.brl-filtro{
  position:relative;
  border:0;background:transparent;cursor:pointer;
  padding:6px 0 9px;
  font-family:var(--fonte-texto);
  font-size:12.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--paris-cinza);
  transition:color .22s ease;
}
/* Fio que cresce da esquerda, o mesmo gesto do menu do cabeçalho. */
.brl-filtro::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--paris-vermelho);
  transform:scaleX(0);transform-origin:left;
  transition:transform .25s ease;
}
/* O !important aqui não é preguiça: o tema declara a cor de button:hover e
   button:focus com !important, e só !important vence !important. Fica
   restrito à COR dos nossos botões de texto — nada mais. */
.brl-filtro,
.brl-filtro:focus,
.brl-filtro:active{color:var(--paris-cinza) !important;background:none}
.brl-filtro:hover,
.brl-filtro.e-ativo,
.brl-filtro.e-ativo:focus,
.brl-filtro.e-ativo:hover{color:var(--paris-azul) !important}
.brl-filtro:hover::after,.brl-filtro.e-ativo::after{transform:scaleX(1)}

/* ---- inicial ---- */
/* Largura fixa por letra: o alfabeto vira uma régua, e régua com passo
   irregular lê como lista solta. */
.brl-letras{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:2px;
  padding:14px 0;
}
.brl-letra{
  min-width:34px;height:34px;
  border:0;background:transparent;cursor:pointer;
  font-family:var(--fonte-texto);
  font-size:12.5px;font-weight:600;
  letter-spacing:.06em;
  color:var(--paris-cinza);
  transition:color .2s ease,background .2s ease;
}
.brl-letra:first-child{
  min-width:0;
  padding:0 16px 0 2px;
  letter-spacing:.14em;text-transform:uppercase;
}
.brl-letra,
.brl-letra:focus,
.brl-letra:active{color:var(--paris-cinza) !important;background:none}
.brl-letra:hover{color:var(--paris-azul) !important}
.brl-letra.e-ativo,
.brl-letra.e-ativo:focus,
.brl-letra.e-ativo:hover{background:var(--paris-azul);color:var(--paris-branco) !important}
.brl-letra:first-child.e-ativo,
.brl-letra:first-child.e-ativo:focus{
  background:none;
  color:var(--paris-azul) !important;
  box-shadow:inset 0 -1px 0 var(--paris-vermelho);
}

/* ---------- a grade ---------- */
/* Os fios saem de um lado só de cada célula e a grade fecha as bordas de fora:
   assim não há fio dobrado entre vizinhas, que é o que engrossa a linha e
   denuncia grade montada às pressas. */

.brl-grade{
  list-style:none;
  margin:40px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  border-top:1px solid var(--paris-linha);
  border-left:1px solid var(--paris-linha);
}
.brl-celula{
  position:relative;
  margin:0;
  border-right:1px solid var(--paris-linha);
  border-bottom:1px solid var(--paris-linha);
  aspect-ratio:4 / 3;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:30px 26px 38px;
}
/* O teto de altura é o que mantém os logos pequenos e iguais: sem ele, um
   logo de uma linha só cresce até a largura da célula e esmaga os vizinhos.
   O ar em volta é a metade do trabalho — numa grade de cem, o espaço vazio é
   o que faz cada marca ser lida sozinha. */
.brl-celula img{
  max-width:100%;
  max-height:46px;
  width:auto;
  opacity:.9;
  transition:opacity .25s ease,transform .35s ease;
}
.brl-celula:hover img{opacity:1;transform:scale(1.04)}

/* O nome fica no HTML sempre — serve à busca, ao leitor de tela e ao Google —
   e aparece só no hover, para a grade ser de logos e não de legendas. */
.brl-celula-nome{
  position:absolute;
  left:0;right:0;bottom:12px;
  text-align:center;
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--paris-cinza);
  opacity:0;
  transition:opacity .25s ease;
  pointer-events:none;
}
.brl-celula:hover .brl-celula-nome{opacity:1}

.brl-celula[hidden]{display:none}

.brl-sem-resultado{
  margin:40px 0 0;
  text-align:center;
  font-size:17px;color:var(--paris-tinta-2);
}
.brl-sem-resultado[hidden]{display:none}

/* ---------- chamada final ---------- */

.brl-chamada{
  max-width:var(--paris-larg);
  margin:clamp(72px, 7vw, 110px) auto 0;
  padding:0 var(--paris-pad);
  text-align:center;
}
.brl-chamada p{margin:36px 0 0}

/* ---------- telas menores ---------- */

@media (max-width:1100px){
  .brl-grade{grid-template-columns:repeat(5, minmax(0, 1fr))}
  .brl-filtros-cats{gap:6px 20px}
  .brl-filtro{font-size:12px}
}

@media (max-width:860px){
  .brl-grade{grid-template-columns:repeat(3, minmax(0, 1fr))}
  .brl-celula{padding:20px 18px 30px}
  .brl-celula img{max-height:36px}
  .brl-busca{padding:20px 2px}

  /* Com muitas categorias e pouca largura, a régua de tipos vira fita
     arrastável em vez de quebrar em quatro linhas. */
  .brl-filtros-cats{
    flex-wrap:nowrap;
    gap:24px;
    margin:0 calc(-1 * var(--paris-pad));
    padding:8px var(--paris-pad);
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .brl-filtros-cats::-webkit-scrollbar{display:none}
  /* No toque o alvo é o BOTÃO, não o respiro em volta dele: 12,5px de texto com
     6px de padding dá 31px de altura, e dedo não acerta 31px com precisão. O
     chip cresce por dentro e a fita cede a altura, então nada se mexe na tela.
     O sublinhado do estado ativo acompanha, porque está preso ao bottom. */
  .brl-filtro{white-space:nowrap;padding:14px 0 15px}
  .brl-letra{min-width:40px;height:40px;font-size:12px}

  /* No toque não existe hover: o nome fica visível de uma vez.
     11px em vez dos 9,5px de antes, que eram o menor texto do site inteiro e
     ficavam ilegíveis justamente onde a tela é pior. Cabe: com três colunas a
     520px a célula tem uns 150px, e "DOLCE & GABBANA" quebra em duas linhas. */
  .brl-celula-nome{opacity:1;font-size:11px}
  .brl-celula{padding-bottom:30px}
}

@media (max-width:520px){
  .brl-grade{grid-template-columns:repeat(2, minmax(0, 1fr))}
}