/* =========================================================
   B2 Rocket Layout — Distribuidora Paris
   common.css: tokens, tipografia, cabeçalho e rodapé.
   Nada de border-radius: o desenho é todo em ângulo reto.
   ========================================================= */

:root{
  --paris-azul:#111D38;
  --paris-vermelho:#972120;
  --paris-branco:#FFFFFF;
  --paris-tinta-2:#3A4256;
  --paris-linha:#EAEAEA;
  --paris-linha-forte:#C9C9C9;
  --paris-cinza:#5E5E5E;
  --paris-fundo-claro:#F7F7F7;

  /* Cor do marcador de texto dos títulos, tirada das duas cores da marca.
     Vermelho claro: #EBCCC9 (o #972120 clareado).
     Azul claro:     #C9D6EC (o #111D38 clareado).
     Trocar aqui muda o site inteiro. Precisa ser clara — o texto por cima
     continua azul. */
  --paris-marcador:#EBCCC9;

  /* Largura do conteúdo. A faixa de marcas e o banner sangram de ponta a
     ponta; da faixa para baixo, tudo respeita esta medida. Texto em linha de
     1440px fica largo demais para ler. */
  --paris-larg:1200px;
  /* Medida para grades e galerias. Texto tem teto de legibilidade por volta
     de 70 caracteres e os 1200px já chegam lá; grade não tem esse limite e
     sufoca na mesma medida. São necessidades opostas, não inconsistência. */
  --paris-larg-grade:1380px;
  --paris-pad:56px;

  /* Os títulos são de UMA família serifada, variando só peso, corpo e
     itálico. A interface — menu, rótulos, botões, corpo de texto — fica na
     sem-serifa, que é legível nos 10 e 11px em caixa alta espaçada. */
  --fonte-texto:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* Rótulo de seção: o "Grande mix de marcas", "Vantagens", "Sobre nós", e
     também os títulos de coluna do rodapé. Um único par de medidas para todos
     — mudar aqui muda o site inteiro. */
  --rotulo-corpo:16px;
  --rotulo-espaco:.3em;
  --rotulo-peso:600;
  /* Sobre fundo escuro, texto claro parece maior e mais gordo do que é — é o
     olho, não o CSS. Tom menos luminoso e um peso abaixo compensam, sem mexer
     no corpo da letra. */
  --rotulo-cor-escuro:#D9B4B1;
  --rotulo-peso-escuro:500;

  /* Título de seção. Era clamp(30px, 3.6vw, 46px): o corpo variava conforme a
     largura da janela, então o mesmo título aparecia em tamanhos diferentes
     em capturas feitas em janelas diferentes. Agora é fixo — igual em toda
     seção, em qualquer largura, até a quebra de celular. */
  --titulo-corpo:42px;
  --fonte-titulo:'Playfair Display',Georgia,'Times New Roman',serif;
}

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

/* O wp_head() do motor continua carregando a folha do tema e a de outros
   plugins, que estilizam input, ul e li por seletor de elemento. Sem estes
   três resets, o campo de busca aparece com a moldura do tema e as listas
   voltam a ter marcador e recuo. */
body[class*="brl-"] input{
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  outline:0;
  padding:0 !important;
  margin:0 !important;
  height:auto !important;
  min-height:0;
  line-height:normal;
  -webkit-appearance:none;
  appearance:none;
}
/* Mesma história no BOTÃO, e foi o que fez o seletor de região do calendário
   aparecer como uma caixa branca vazia: o tema pinta `button` por seletor de
   elemento — fundo, cor e borda —, e no tema atual o texto sai branco. O
   `button{font:inherit;color:inherit}` lá de baixo tem especificidade 0,0,1 e
   perde para qualquer `.algo button` do tema.
   Este reset tem 0,2,2 e ganha do tema, mas por isso mesmo só pode valer para
   botão SEM CLASSE: `font:inherit` e `color:inherit` em 0,2,2 atropelariam o
   `font-size` e o `background` que `.brl-filtro`, `.brl-letra`, `.brl-assunto`,
   `.brl-faq-p` e companhia declaram em 0,1,0 — e os estados ativos, em 0,2,0.
   Botão com classe se pinta sozinho e nunca precisou deste reset; quem
   precisava era só o seletor de região do calendário, que não tem classe. */
body[class*="brl-"] button:not([class]){
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:inherit;
  font:inherit;
  cursor:pointer;
}

/* Zera lista e recuo, mas NÃO a margem. Este seletor tem especificidade
   0,1,1 — maior que .brl-vantagens-grade (0,1,0) —, então um margin:0 aqui
   vencia a margem declarada na própria classe e nenhum ajuste de espaçamento
   naquela seção surtia efeito. A folha do tema mexe em 'ul' por seletor de
   elemento (0,0,1), que perde para qualquer classe: o margin:0 nunca foi
   necessário para nos defender dela. */
body[class*="brl-"] ul{
  list-style:none;
  padding:0;
}
/* Só o que o tema de fato estraga. Zerar padding e borda aqui seria pior que
   o problema: este seletor tem especificidade maior que uma classe de
   componente, então um 'border:0' nele apaga a borda que a grade de marcas
   declara na própria célula. */
body[class*="brl-"] li{
  list-style:none;
  background:none;
}
/* O tema desenha moldura, fundo e preenchimento em todo <button>. É isso que
   estava deixando as setas do banner e os pontinhos com cara de caixa. */
/* O reset cuida SÓ do que o tema estraga: moldura, fundo, sombra e aparência
   nativa. Nada de padding, margem, cor ou fonte aqui — este seletor tem
   especificidade maior que uma classe de componente, então cada propriedade
   que ele toca é uma que o componente perde o direito de declarar. Foi assim
   que a sanfona das perguntas ficou sem recheio.
   As quatro pseudoclasses entram juntas porque o tema pinta button:focus:
   depois do clique o botão fica com o foco e mudava de cara sozinho. */
body[class*="brl-"] button,
body[class*="brl-"] button:hover,
body[class*="brl-"] button:focus,
body[class*="brl-"] button:active{
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  text-shadow:none;
  -webkit-appearance:none;
  appearance:none;
}

/* O Chrome desenha um X dentro de input[type=search]. */
body[class*="brl-"] input[type=search]::-webkit-search-decoration,
body[class*="brl-"] input[type=search]::-webkit-search-cancel-button{
  -webkit-appearance:none;
  appearance:none;
}

body.brl-home,
body[class*="brl-"]{
  margin:0;
  background:var(--paris-branco);
  color:var(--paris-azul);
  font-family:var(--fonte-texto);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.brl-hdr a,.brl-gaveta a,.brl-rodape a,.brl-home a{color:var(--paris-azul);text-decoration:none}
.brl-hdr a:hover,.brl-gaveta a:hover,.brl-home a:hover{color:var(--paris-vermelho)}
button{font:inherit;color:inherit}

.brl-oculto{
  position:absolute !important;
  width:1px !important;height:1px !important;
  padding:0 !important;margin:-1px !important;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.brl-pular{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--paris-azul);color:#fff;padding:12px 20px;
}
.brl-pular:focus{left:0}

:focus-visible{outline:2px solid var(--paris-vermelho);outline-offset:2px}

/* ---------- rótulo e título ---------- */

.brl-rotulo{
  margin:0;
  font-size:var(--rotulo-corpo);
  font-weight:var(--rotulo-peso);
  letter-spacing:var(--rotulo-espaco);
  text-transform:uppercase;
  color:var(--paris-vermelho);
  padding-left:var(--rotulo-espaco);
}

.brl-titulo{
  margin:22px 0 0;
  font-family:var(--fonte-titulo);
  font-weight:600;
  font-size:var(--titulo-corpo);
  line-height:1.02;
  letter-spacing:-.01em;
  /* A segunda linha é 1,2em dentro de uma entrelinha de 1,02: as hastes e a
     tarja passam do fundo da caixa. Sem esta folga, o título encosta no que
     vem abaixo por mais margem que a seção tenha. */
  padding-bottom:.34em;
}
.brl-titulo-l1,.brl-titulo-l2{display:block}
.brl-titulo-l2{margin-top:2px}

/* A segunda linha do título: itálica, mais pesada e maior que a primeira.
   Mesma família — o contraste vem de peso e corpo, nunca de trocar de fonte. */
.brl-titulo-l2{
  font-style:italic;
  font-weight:900;
  font-size:1.2em;
  line-height:1.06;
  letter-spacing:-.02em;
}

/* O marcador de texto. Não é uma tarja cheia: é uma faixa que cobre só a
   altura-x, deixando ascendentes e descendentes para fora, como caneta
   marca-texto de verdade. O texto continua azul por cima.
   Só um marcador por seção — se aparecer em todo título, vira papel de
   parede e deixa de marcar coisa nenhuma. */
.brl-marcador{
  background-image:linear-gradient(var(--paris-marcador),var(--paris-marcador));
  background-repeat:no-repeat;
  background-size:100% .58em;
  background-position:0 .74em;
  padding:0 .16em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}

.brl-lnk-sub{
  display:inline-block;
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
  padding-bottom:6px;
  border-bottom:1px solid var(--paris-vermelho);
}

/* O traço que se estende no hover dá movimento ao botão sem enfeite: é a mesma
   linguagem de traço reto do resto do site. */
.brl-btn{
  display:inline-flex;
  align-items:center;
  gap:14px;
  background:var(--paris-azul);
  color:var(--paris-branco) !important;
  padding:18px 30px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  transition:background .22s ease;
}
.brl-btn::after{
  content:"";
  width:16px;height:1px;
  background:currentColor;
  transition:width .22s ease;
}
.brl-btn:hover{background:var(--paris-vermelho);color:var(--paris-branco) !important}
.brl-btn:hover::after{width:28px}

/* Variante para FUNDO ESCURO. Não é luxo: o .brl-btn trava a cor do texto em
   branco com !important, para derrotar a folha do tema, então sobre o azul da
   marca ele some — botão branco com texto branco. Qualquer seção escura
   (rodapé, captação, blocos de newsletter) usa esta variante. */
.brl-btn-claro{
  background:var(--paris-branco);
  color:var(--paris-azul) !important;
}
.brl-btn-claro:hover{
  background:var(--paris-marcador);
  color:var(--paris-azul) !important;
}

/* ---------- campos de formulário ---------- */
/* O reset de input lá em cima zera borda e padding com !important, porque
   precisa derrotar a folha do tema. Consequência: todo campo DE VERDADE do
   layout precisa reativar o que usa, também com !important. Isto é componente,
   não remendo de uma página: a captação do calendário e os blocos de newsletter
   da home e do blog usam os mesmos campos.
   O select não entra naquele reset, então aqui os dois são igualados — sem
   isso, input sai sem traço e select sai com, no mesmo formulário. */
.brl-campo{display:block}
.brl-campo label{
  display:block;margin-bottom:8px;
  font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--paris-cinza);
}
.brl-campo input,
.brl-campo select{
  width:100%;
  border:0 !important;
  border-bottom:1px solid var(--paris-linha-forte) !important;
  border-radius:0 !important;
  background:transparent !important;
  padding:10px 0 !important;
  color:inherit;
  font-family:var(--fonte-texto);
  font-size:17px;font-weight:300;line-height:1.5;
  -webkit-appearance:none;appearance:none;
}
.brl-campo input:focus,
.brl-campo select:focus{
  outline:0;
  border-bottom-color:var(--paris-vermelho) !important;
}
.brl-campo .brl-campo-dica{
  display:block;margin-top:8px;
  font-size:13px;line-height:1.5;color:var(--paris-cinza);
}

/* Sobre fundo escuro: traço e rótulo precisam clarear, senão somem no azul. */
.brl-campo-escuro label{color:#C7B0AE}
.brl-campo-escuro input,
.brl-campo-escuro select{
  border-bottom-color:#4A5570 !important;
  color:var(--paris-branco);
}
.brl-campo-escuro input::placeholder{color:#7D89A3}
.brl-campo-escuro input:focus,
.brl-campo-escuro select:focus{border-bottom-color:var(--paris-branco) !important}
.brl-campo-escuro select option{color:var(--paris-azul)}
.brl-campo-escuro .brl-campo-dica{color:#9AA4BA}

/* Era fino e pequeno demais para um link que leva à loja — é o segundo destino
   mais importante do cabeçalho, depois do cadastro. */
.brl-lnk-acao{
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--paris-azul);
  border-bottom:1px solid rgba(17,29,56,.28);
  padding-bottom:5px;
  transition:border-color .22s ease,color .22s ease;
}
.brl-lnk-acao:hover{border-bottom-color:var(--paris-vermelho)}

/* ---------- cabeçalho ---------- */
/* Uma linha só. Em notebook, duas linhas de cabeçalho fixo comiam quase um
   quinto da altura útil da tela. A busca saiu da barra e virou um botão que
   abre um painel por cima do conteúdo — não custa altura nenhuma. */

html{overflow-x:clip}
body[class*="brl-"]{overflow-x:clip}

.brl-hdr{
  position:sticky;top:0;z-index:80;
  background:var(--paris-branco);
  border-bottom:1px solid var(--paris-linha);
}
body.admin-bar .brl-hdr{top:32px}
@media screen and (max-width:782px){
  body.admin-bar .brl-hdr{top:46px}
}

.brl-hdr-linha{
  height:84px;
  display:flex;align-items:center;gap:28px;
  padding:0 var(--paris-pad);
  transition:height .2s ease;
}
.brl-logo{flex:0 0 auto}
.brl-logo img{height:56px;width:auto;display:block;transition:height .2s ease}

.brl-nav{flex:1 1 auto;min-width:0}
.brl-nav-lista{
  list-style:none;margin:0;padding:0;
  display:flex;align-items:center;justify-content:center;gap:30px;
}
.brl-nav-lista a{
  position:relative;
  display:block;
  padding:0 0 4px .14em;
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--paris-azul);
}
.brl-nav-lista a::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;
}
.brl-nav-lista a:hover::after,
.brl-nav-lista .current-menu-item > a::after{transform:scaleX(1)}
.brl-nav-lista .current-menu-item > a{color:var(--paris-vermelho)}

.brl-hdr-acoes{
  flex:0 0 auto;
  display:flex;align-items:center;gap:22px;
}
.brl-busca-botao{
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  border:0;background:transparent;cursor:pointer;
  color:var(--paris-azul);
}
.brl-busca-botao svg{width:19px;height:19px}
.brl-busca-botao:hover{color:var(--paris-vermelho)}

/* compacta ao rolar */
.brl-hdr.e-rolado .brl-hdr-linha{height:64px}
.brl-hdr.e-rolado .brl-logo img{height:42px}

/* ---------- painel da busca ---------- */
.brl-busca-painel{
  position:absolute;left:0;right:0;top:100%;
  background:var(--paris-branco);
  border-bottom:1px solid var(--paris-linha);
  padding:22px var(--paris-pad);
  box-shadow:0 12px 24px -18px rgba(17,29,56,.35);
}
.brl-busca-painel[hidden]{display:none}
.brl-busca{
  display:flex;align-items:center;gap:14px;
  max-width:var(--paris-larg);
  margin:0 auto;
  border-bottom:1px solid var(--paris-linha-forte);
  padding-bottom:10px;
}
.brl-busca-ic{width:18px;height:18px;flex:0 0 auto}
.brl-busca input{
  border:0;background:transparent;width:100%;
  font-family:var(--fonte-texto);
  font-size:17px;color:var(--paris-azul);
}
.brl-busca input:focus{outline:none}
.brl-busca input::placeholder{color:var(--paris-cinza)}

.brl-hamburguer{
  display:none !important;
  width:44px;height:44px;
  border:0;background:transparent;cursor:pointer;
  flex-direction:column;justify-content:center;gap:5px;
}
.brl-hamburguer span{
  display:block;height:1px;width:22px;
  background:var(--paris-azul);
  transition:transform .22s ease,opacity .18s ease;
}
.brl-hamburguer[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.brl-hamburguer[aria-expanded="true"] span:nth-child(2){opacity:0}
.brl-hamburguer[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- gaveta (celular) ---------- */

.brl-gaveta{
  position:fixed;inset:0;z-index:60;
  background:var(--paris-branco);
  padding:94px var(--paris-pad) 40px;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.brl-gaveta[hidden]{display:none}
.brl-gaveta-lista{list-style:none;margin:0;padding:0}
.brl-gaveta-lista li{border-bottom:1px solid var(--paris-linha)}
.brl-gaveta-lista a{
  display:block;padding:18px 0;
  font-size:13px;letter-spacing:.2em;text-transform:uppercase;
}
.brl-gaveta-acoes{
  margin-top:32px;display:flex;flex-direction:column;gap:20px;align-items:flex-start;
}

/* ---------- setas dos carrosséis ---------- */

.brl-seta{
  width:44px;height:44px;
  border:0;background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:var(--paris-azul);
  flex:0 0 auto;
}
.brl-seta svg{width:22px;height:22px}
.brl-seta:hover{color:var(--paris-vermelho)}

/* ---------- marcas ---------- */
/* Fita contínua, não carrossel de slides: a lista sai duplicada no HTML e a
   faixa anda metade da própria largura, então o loop não tem emenda. Sem
   setas e sem pontinhos — nada para clicar, nada para errar.

   A arte é uma silhueta azul transparente. Aqui, sobre o fundo escuro, o
   filtro a transforma em branco: brightness(0) achata tudo para preto e
   invert(1) devolve branco, preservando a transparência. Um arquivo só serve
   à faixa escura e à clara. */

.brl-marcas{
  background:#F5F5F5;
  padding:52px 0 56px;
  overflow:hidden;
  /* Desvanece nas duas pontas: a marca entra e sai da faixa em vez de
     aparecer e sumir cortada na borda. */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.brl-marcas .brl-rotulo{text-align:center}

.brl-marcas-faixa{
  display:flex;
  width:max-content;
  margin-top:30px;
  animation:brl-desliza 56s linear infinite;
}
.brl-marcas:hover .brl-marcas-faixa{animation-play-state:paused}

@keyframes brl-desliza{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

.brl-marcas-trilho{
  list-style:none;margin:0;padding:0;
  display:flex;align-items:center;
}
/* A ALTURA DE REFERÊNCIA da fita. Acompanha a tela: num monitor grande, medida
   fixa deixava a fita rala. É a unidade em que o PHP devolve a altura de cada
   logo, e é o único número daqui que decide o tamanho da fita inteira. */
.brl-marcas-trilho{--u:clamp(30px, 2.6vw, 46px)}

.brl-marcas-trilho li{
  flex:0 0 auto;
  /* Sem largura fixa: quem define é a altura do logo, e ela vem do PHP. Caixa
     de largura fixa era a causa do desequilíbrio — logo comprido encostava na
     largura e sobrava altura, logo quadrado encostava na altura e sobrava
     largura. Ver BRL_Page_Home::altura_logo(). */
  height:calc(var(--u) * 1.2);
  margin:0 clamp(26px, 2.8vw, 52px);
  display:flex;align-items:center;justify-content:center;
}
.brl-marcas-trilho img{
  /* --alt vem do style do próprio <img>, calculado por marca. O 0.6 é só rede
     de proteção para quando o PHP não consegue ler o arquivo. */
  height:calc(var(--u) * var(--alt, .6));
  width:auto;
  max-width:none;
  opacity:.85;
  transition:opacity .3s ease,transform .3s ease;
}
.brl-marcas-trilho li:hover img{opacity:1;transform:scale(1.08)}

@media (max-width:1100px){
  /* Nada a fazer: a largura de cada item já vem da altura do logo. */
}
@media (max-width:860px){
  .brl-marcas{padding:34px 0 38px}
  .brl-marcas-trilho li{margin:0 26px}
  .brl-marcas-faixa{animation-duration:42s}
}
@media (prefers-reduced-motion:reduce){
  .brl-marcas-faixa{animation:none}
}

/* ---------- campo de busca de conteúdo ---------- */
/* Usado pela página de Marcas e pela de Notícias. Linha inteira, serifada
   grande: é o atalho de quem já sabe o que quer, então ocupa o lugar e o
   tamanho de quem manda. */

/* ---- busca ---- */
.brl-busca{
  position:relative;
  display:flex;align-items:center;gap:16px;
  padding:26px 2px;
  border-bottom:1px solid var(--paris-linha);
  color:var(--paris-cinza);
}
.brl-busca svg{width:22px;height:22px;flex:0 0 auto}
.brl-busca:focus-within{color:var(--paris-vermelho)}
.brl-busca input{
  flex:1 1 auto;
  border:0;background:transparent;
  font-family:var(--fonte-titulo);
  font-size:clamp(22px, 2.4vw, 30px);
  line-height:1.2;
  color:var(--paris-azul);
}
.brl-busca input:focus{outline:none}
.brl-busca input::placeholder{color:#B9BCC6;opacity:1}
.brl-busca-limpa{
  flex:0 0 auto;
  width:34px;height:34px;
  border:0;background:transparent;cursor:pointer;
  font-size:26px;line-height:1;
  color:var(--paris-cinza);
}
.brl-busca-limpa,
.brl-busca-limpa:focus{color:var(--paris-cinza) !important}
.brl-busca-limpa:hover{color:var(--paris-vermelho) !important}
.brl-busca-limpa[hidden]{display:none}

/* ---------- rodapé ---------- */
/* Fundo escuro de ponta a ponta. Rodapé claro se confunde com o fim do
   conteúdo e parece sobra de página; escuro, ele fecha. E resolve a sensação
   de "jogado para a esquerda": antes havia uma coluna vazia reservando o
   canto onde o atendimento se abre, e coluna vazia em fundo branco é um
   buraco. No escuro, com as quatro colunas ocupando a largura inteira, o
   espaço que sobra embaixo à direita vira respiro, não falha.

   O logo entra na versão clara — o mesmo arquivo com o azul em branco e o
   vermelho em rosa, para o "22 Anos" não sumir. */

.brl-rodape{
  margin-top:clamp(80px, 8vw, 128px);
  background:var(--paris-azul);
  color:#C8CEDB;
}
.brl-rodape-topo{
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1.15fr) minmax(0,1.15fr);
  gap:clamp(36px, 4vw, 72px);
  max-width:1560px;
  margin:0 auto;
  padding:clamp(56px, 5.5vw, 84px) var(--paris-pad) clamp(44px, 4vw, 64px);
}

.brl-rodape-logo{height:60px;width:auto;display:block}
.brl-rodape-marca p{
  margin:24px 0 0;
  max-width:42ch;
  font-size:15.5px;line-height:1.8;
  color:#A9B2C6;
}

.brl-redes{display:flex;align-items:center;gap:10px;margin-top:28px;flex-wrap:wrap}
.brl-redes a{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;
  border:1px solid rgba(255,255,255,.22);
  color:#FFFFFF;
  transition:background .22s ease,border-color .22s ease,color .22s ease;
}
.brl-redes a svg{width:19px;height:19px}
.brl-redes a:hover{background:#FFFFFF;border-color:#FFFFFF;color:var(--paris-azul)}
.brl-redes-blog{
  width:auto !important;
  padding:0 18px;
  font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
}

/* O selo desce para a coluna da marca. No canto direito ele era coberto pelo
   atendimento; aqui fica visível e fecha a coluna. */
.brl-selo{
  display:flex;align-items:center;gap:16px;
  margin-top:32px;
  max-width:360px;
}
.brl-selo img{width:64px;height:auto;flex:0 0 auto}
.brl-selo p{margin:0;font-size:13.5px;line-height:1.6;color:#A9B2C6}

.brl-rodape-col h2{
  margin:0 0 20px;
  font-size:var(--rotulo-corpo);
  font-weight:var(--rotulo-peso);
  letter-spacing:var(--rotulo-espaco);
  text-transform:uppercase;
  color:var(--rotulo-cor-escuro);
  padding-left:var(--rotulo-espaco);
}
.brl-rodape-lista{display:grid;gap:13px;margin:0}
.brl-rodape-lista a{
  font-size:15.5px;
  color:#C8CEDB;
  transition:color .2s ease;
}
.brl-rodape-lista a:hover{color:#FFFFFF}
.brl-rodape-base{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:0 16px;
  max-width:1560px;
  margin:0 auto;
  padding:24px var(--paris-pad);
  border-top:1px solid rgba(255,255,255,.12);
  font-size:11.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#7F8AA3;
}
.brl-rodape-base a{color:#C8CEDB;border-bottom:1px solid rgba(255,255,255,.3)}
.brl-rodape-base a:hover{color:#FFFFFF;border-bottom-color:#FFFFFF}
.brl-sep{
  width:3px;height:3px;
  background:currentColor;
  display:inline-block;
  opacity:.6;
}

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

/* Medida real: com as regras cheias o cabeçalho pede ~1600px; com a primeira
   compactação, ~1363px — ou seja, ainda estourava num notebook de 1366, que
   é o que fazia o logo entrar por cima do menu.

   São duas réguas agora. A primeira alivia; a segunda aperta de verdade e
   cabe em ~1194px, com folga real no 1366. O que mais economiza não é o corpo
   da letra, é o espaçamento entre elas: 20 caracteres em caixa alta com
   0,10em de tracking carregam 2 caracteres de largura só em ar. */
@media (max-width:1560px){
  .brl-nav-lista{gap:20px}
  .brl-nav-lista a{font-size:11.5px;letter-spacing:.1em}
  .brl-hdr-acoes{gap:16px}
  .brl-btn{padding:15px 20px;font-size:11px;letter-spacing:.12em}
  .brl-lnk-acao{font-size:11px;letter-spacing:.1em}
}

@media (max-width:1400px){
  .brl-hdr-linha{gap:20px}
  .brl-logo img{height:48px}
  .brl-hdr.e-rolado .brl-logo img{height:40px}
  .brl-nav-lista{gap:16px}
  .brl-nav-lista a{font-size:11px;letter-spacing:.06em}
  .brl-hdr-acoes{gap:14px}
  .brl-lnk-acao{font-size:10.5px;letter-spacing:.06em}
  .brl-btn{padding:14px 16px;font-size:10.5px;letter-spacing:.1em}
  /* O traço do botão é enfeite: some antes de o texto apertar. */
  .brl-btn::after{display:none}
  /* 32px era alvo de toque pequeno demais; o ícone continua com 19px. */
  .brl-busca-botao{width:40px;height:40px}
}

@media (max-width:1240px){
  :root{--paris-pad:32px}
}

/* Mais estreito que isso o menu não cabe de jeito nenhum: vai para a gaveta e
   sobram a lupa, o login e o botão. */
@media (max-width:1260px){
  .brl-nav{display:none}
  .brl-hamburguer{display:flex !important}
}

@media (max-width:1100px){
  .brl-rodape-topo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px}
  .brl-rodape-topo > :last-child{display:block}
}

@media (max-width:860px){
  :root{--titulo-corpo:30px}
  .brl-hdr-linha{height:70px}
  .brl-nav{display:none}
  .brl-hamburguer{display:flex !important}
  .brl-so-desktop{display:none}
  .brl-hdr-acoes{gap:0}
  .brl-logo img{height:44px}
  .brl-hdr.e-rolado .brl-hdr-linha{height:70px}
  .brl-hdr.e-rolado .brl-logo img{height:44px}
  .brl-rodape-topo{grid-template-columns:minmax(0,1fr);gap:40px}
  .brl-rodape-logo{height:54px}
  .brl-rodape{margin-top:64px}
  .brl-rodape-base{gap:12px}
  .brl-rodape-base .brl-sep{display:none}
}

/* O rótulo é caixa alta com .3em de espaçamento, o que o torna o texto mais
   largo da página sem ser o maior. "CALENDÁRIO COMERCIAL" a 16px pede 294px, e
   numa tela de 360px com 32px de respiro de cada lado sobram 296px: estourava
   por um fio, e a 320px estourava de vez. Como o html usa overflow-x:clip, o
   excesso não virava barra de rolagem — virava letra cortada, que é pior,
   porque não dá sintoma. */
@media (max-width:560px){
  :root{
    --rotulo-corpo:13px;
    --rotulo-espaco:.22em;
  }
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}