/* =========================================================
   B2 Rocket Layout — Distribuidora Paris
   home.css: carrossel de banners, vantagens, mix de marcas, tecnologia e notícias.
   ========================================================= */

.brl-home section{max-width:none}

/* ---------- carrossel de banners ---------- */
/* A arte é 1920x500 (3,84:1). No desktop ela entra inteira; no celular isso
   daria ~100px de altura e ficaria ilegível, então a faixa ganha altura fixa e
   a imagem é recortada pelas laterais com object-fit. O lado do recorte vem do
   campo "foco" de cada banner, que o Super Plugin entrega em object-position. */

.brl-banners{
  position:relative;
  background:var(--paris-fundo-claro);
  overflow:hidden;
}
/* A altura vem do trilho, não do slide ativo. Antes o slide ativo virava
   'relative' e os outros ficavam 'absolute': a troca reposicionava o elemento
   e provocava o pisca. Agora todos ficam empilhados no mesmo lugar e só a
   opacidade cruza — um aparece enquanto o outro some, sem nenhum quadro em
   branco no meio. */
.brl-banners-trilho{
  position:relative;
  aspect-ratio:1920 / 500;
}

.brl-banner{
  display:block;
  position:absolute;inset:0;
  opacity:0;
  visibility:hidden;
  /* A visibilidade só muda DEPOIS do cruzamento terminar. */
  transition:opacity .9s ease,visibility 0s linear .9s;
}
.brl-banner.e-ativo{
  opacity:1;
  visibility:visible;
  transition:opacity .9s ease,visibility 0s linear 0s;
}
.brl-banner img{width:100%;height:100%;object-fit:cover}
.brl-banner img{width:100%;height:auto;display:block}

/* Os controles não têm caixa, moldura nem fundo: são desenhados em branco com
   sombra, para servirem a qualquer banner que a coordenadora subir sem que ela
   possa cadastrar uma arte que apague a navegação.

   O mix-blend-mode: difference que fazia esse papel SAIU. Ele resolvia o
   contraste invertendo a cor do fundo, e sobre o vermelho saturado de um banner
   de perfumaria o branco invertido vira ciano: a seta e os pontos apareciam
   numa cor que não existe na marca. Sombra é menos elegante no código e muito
   mais previsível na tela. */

.brl-banners .brl-seta{
  position:absolute;top:50%;transform:translateY(-50%);
  z-index:2;
  width:56px;height:56px;
  color:#FFFFFF;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));
  opacity:.9;
  transition:opacity .25s ease,transform .25s ease;
}
.brl-banners .brl-seta svg{width:30px;height:30px;stroke-width:1}
.brl-banners .brl-seta:hover{opacity:1}
.brl-banners .brl-seta-ant{left:26px}
.brl-banners .brl-seta-prox{right:26px}
.brl-banners .brl-seta-ant:hover{transform:translateY(-50%) translateX(-3px)}
.brl-banners .brl-seta-prox:hover{transform:translateY(-50%) translateX(3px)}

/* SEM mix-blend-mode. Ele existia para o ponto se manter visível sobre
   qualquer banner, e faz isso invertendo a cor do fundo: sobre o vermelho
   saturado de um banner de perfumaria, branco invertido vira CIANO. A navegação
   aparecia em cores que não existem na marca e deixava de parecer navegação.
   O contraste agora vem de sombra, que é previsível em qualquer fundo. */
.brl-pontos{
  position:absolute;left:0;right:0;bottom:20px;
  display:flex;justify-content:center;gap:10px;
  z-index:2;
}
/* O traço continua com 1px, mas o BOTÃO tem 22px de altura: o alvo de toque era
   o traço, e dedo nenhum acerta 1px. O padding cria a área clicável e o traço
   mora no ::before, então nada muda na tela. */
.brl-ponto-nav{
  width:26px;height:22px;
  padding:0;
  cursor:pointer;
  background:transparent !important;
  display:flex;align-items:center;
}
.brl-ponto-nav::before{
  content:"";
  display:block;width:100%;height:1px;
  background:#FFFFFF;
  box-shadow:0 0 2px rgba(0,0,0,.55);
  opacity:.5;
  transition:opacity .25s ease,height .25s ease;
}
.brl-ponto-nav.e-ativo::before{opacity:1;height:2px}

/* ---------- vantagens ---------- */

.brl-vantagens{
  padding:88px var(--paris-pad) 0;
  max-width:var(--paris-larg);
  margin:0 auto;
  text-align:center;
}
.brl-vantagens-grade{
  list-style:none;margin:58px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:44px;
  text-align:left;
}
.brl-vantagens-grade li{padding-top:0}
.brl-vantagens-grade svg{width:34px;height:34px;color:var(--paris-vermelho)}
.brl-vantagens-grade h3{
  margin:12px 0 0;
  font-size:13px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
}
.brl-vantagens-grade p{
  margin:14px 0 0;
  font-size:16px;line-height:1.75;color:var(--paris-tinta-2);
}

/* ---------- sobre nós ---------- */
/* Não são duas colunas lado a lado. É uma faixa escura de ponta a ponta com o
   vídeo à direita, e o painel de texto avançando por cima dele — os dois se
   encaixam em vez de dividir a tela ao meio. O painel tem o mesmo fundo da
   faixa, então recorta o vídeo em vez de flutuar sobre ele. */

.brl-sobre{
  max-width:var(--paris-larg);
  margin:64px auto 0;
  padding:0;
  background:var(--paris-azul);
  color:#FFFFFF;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  align-items:stretch;
}
/* O painel de texto avança sobre o vídeo — é essa sobreposição que une os
   dois. O que NÃO pode é recortar o quadro: o vídeo é institucional, tem gente
   enquadrada e o logo no fim, e qualquer object-fit:cover corta cabeça. Então
   ele entra na proporção original e só o painel avança por cima. */
.brl-sobre-arte{
  grid-column:1 / 5;
  grid-row:1;
  display:flex;align-items:center;
}
.brl-sobre-arte video,
.brl-sobre-arte img{
  width:100%;
  height:auto;
  display:block;
  background:#0C1631;
}
.brl-sobre-texto{
  grid-column:5 / -1;
  grid-row:1;
  z-index:2;
  background:var(--paris-azul);
  padding:44px 56px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

/* Um fio curto antes do rótulo: dá início à coluna e amarra o texto à faixa. */
/* Credenciais: fecham a coluna com o que a empresa tem de concreto, em vez de
   o texto simplesmente parar. */
.brl-credenciais{
  list-style:none;margin:42px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
}
.brl-credenciais li{
  border-left:1px solid rgba(255,255,255,.16);
  padding:4px 0 4px 20px;
}
.brl-credenciais li:first-child{border-left:0;padding-left:0}
.brl-credenciais strong{
  display:block;
  font-family:var(--fonte-titulo);
  font-size:26px;font-weight:600;line-height:1;color:#FFFFFF;
}
.brl-credenciais span{
  display:block;margin-top:8px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#A9B2C6;
}
.brl-sobre-texto .brl-rotulo{color:var(--rotulo-cor-escuro);font-weight:var(--rotulo-peso-escuro)}
.brl-sobre-texto .brl-titulo{color:#FFFFFF}
.brl-sobre-texto p:not([class]){
  margin:18px 0 0;
  font-size:17px;line-height:1.8;color:#C8CEDB;
}
.brl-sobre-texto .brl-titulo + p:not([class]){margin-top:30px}

/* Sem vídeo nem foto, o texto ocupa a faixa inteira. */
.brl-sobre:not(:has(.brl-sobre-arte)) .brl-sobre-texto{
  grid-column:1 / -1;
  max-width:820px;
  margin:0 auto;
  padding-left:var(--paris-pad);
  padding-right:var(--paris-pad);
}

/* ---------- grande mix de marcas ---------- */

.brl-mix{
  max-width:var(--paris-larg);
  margin:0 auto;
  padding:96px var(--paris-pad) 0;
  text-align:center;
}
.brl-mix-texto p:not([class]){margin:18px auto 0;max-width:620px;font-size:17px;line-height:1.8;color:var(--paris-tinta-2)}
.brl-mix-texto .brl-titulo + p:not([class]){margin-top:28px}
.brl-mix-cta{margin-top:40px}

/* A faixa de produtos sangra de ponta a ponta e a arte é mais larga que a
   tela: é essa sobra que permite a deriva lateral na rolagem. A altura é
   calculada a partir da largura da arte (proporção 4,89:1) para o corte
   vertical ser zero — nenhum frasco fica cortado em cima ou embaixo. */
.brl-mix-faixa{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-top:0;
  overflow:hidden;
  /* Exatamente a altura da arte em 112vw (proporção 5,54:1). Qualquer valor
     acima disto vira faixa cinza vazia acima dos frascos. */
  height:20.2vw;
  min-height:160px;
  background:#FAFAFA;
}
.brl-mix-faixa img{
  position:absolute;
  bottom:0;left:50%;
  /* 112vw e não mais: a arte tem 2200px de largura e, numa tela de 1920,
     112vw dá 2150px — abaixo do tamanho nativo, então ela nunca é ampliada.
     Era a ampliação que estava borrando os frascos. Com arte mais larga dá
     para aumentar este número e ganhar mais curso de deriva. */
  width:112vw;
  max-width:none;
  height:auto;
  transform:translateX(-50%);
  will-change:transform;
}
/* ---------- inovação em tecnologia ---------- */
/* Fundo escuro e largura menor que o resto do conteúdo: o bloco recua das
   laterais e as duas colunas ficam mais próximas uma da outra, o que é o que
   faz texto e gráfico lerem juntos. A lista tem quatro itens e o gráfico é
   quase quadrado, então as duas colunas ficam com alturas parecidas e quase
   não sobra vão. */

.brl-tec{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:clamp(40px, 4vw, 72px);
  align-items:center;
  /* Em notebook fica nos ~1060px que funcionaram; em monitor grande cresce
     até 1340, senão o bloco vira uma ilha estreita no meio da tela e o
     gráfico encolhe junto. */
  max-width:clamp(1060px, 78vw, 1340px);
  margin:96px auto 0;
  /* A margem interna cresce com a tela, para o texto não nascer colado na
     borda esquerda do bloco quando ele fica largo. */
  padding:clamp(48px, 4vw, 72px) clamp(48px, 5vw, 96px);
  background:var(--paris-azul);
  color:#FFFFFF;
}
.brl-tec .brl-rotulo{color:var(--rotulo-cor-escuro);font-weight:var(--rotulo-peso-escuro)}
.brl-tec .brl-titulo{color:#FFFFFF}

.brl-tec-lista{margin:40px 0 0;display:grid;gap:28px}
.brl-tec-lista div{padding-top:0}
.brl-tec-lista dt{
  font-size:13px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:#FFFFFF;
}
.brl-tec-lista dd{
  margin:8px 0 0;
  font-size:15px;line-height:1.7;color:#C8CEDB;
}

/* ---------- o fluxo até o pedido ---------- */
/* Serpentina com nós circulares e ícones. A rota se desenha, um pulso corre
   por cima e cada nó acende na passagem. Sobre fundo escuro os nós acesos
   ficam brancos com o ícone escuro: é a inversão que garante contraste nos
   dois estados. */

/* O gráfico é medido pela LARGURA da coluna, não pela altura do texto. É a
   diferença entre encolher e escalar: coluna maior, gráfico maior, sempre —
   num monitor de 22 polegadas ele cresce junto em vez de sobrar espaço ao
   lado. Como o desenho é quase quadrado, a altura resultante fica perto da
   altura do texto sem eu precisar forçar nenhuma das duas. */
.brl-fluxo{position:relative;aspect-ratio:620 / 600}
.brl-fluxo-svg{
  position:absolute;inset:0;
  width:100%;height:100%;display:block;
}

.brl-fluxo-svg .brl-trilho{fill:none;stroke:rgba(255,255,255,.3);stroke-width:2}
.brl-fluxo-svg .brl-avanco{
  fill:none;stroke:#C8524F;stroke-width:2;stroke-linecap:round;
  stroke-dasharray:1000;stroke-dashoffset:1000;
}
.brl-fluxo-svg .brl-ramo{
  fill:none;stroke:rgba(224,120,116,.7);stroke-width:1.4;
  stroke-dasharray:100;stroke-dashoffset:100;
}
.brl-fluxo-svg .brl-anel{
  fill:none;stroke:#C8524F;stroke-width:1;
  opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.5);
}
.brl-fluxo-svg .brl-bolha{
  fill:var(--paris-azul);stroke:rgba(255,255,255,.5);stroke-width:1.5;
}
.brl-fluxo-svg .brl-icone{
  fill:none;stroke:rgba(255,255,255,.72);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}
.brl-fluxo-svg .brl-rot{
  font-family:var(--fonte-texto);
  font-size:18px;font-weight:600;fill:#FFFFFF;opacity:.7;
}
.brl-fluxo-svg .brl-sub{
  font-family:var(--fonte-texto);
  font-size:14.5px;font-weight:400;fill:#B6BECF;opacity:.8;
}
.brl-fluxo-svg .brl-extra circle{fill:#E7C3C0;opacity:0}
.brl-fluxo-svg .brl-extra text{
  font-family:var(--fonte-texto);
  font-size:13.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;fill:#E7C3C0;opacity:0;
}
.brl-fluxo-svg .brl-pulso{
  fill:#F0A7A4;opacity:0;
  offset-path:path("M80,80 L500,80 C524,80 540,96 540,120 L540,250 C540,274 524,290 500,290 L200,290 C176,290 160,306 160,330 L160,398 C160,422 144,438 120,438 L104,438 C92,438 80,450 80,462 L80,520");
  offset-distance:0%;
}

/* ---- em movimento ---- */
.brl-fluxo.e-ativo .brl-avanco{animation:brl-desenha 8s linear infinite}
@keyframes brl-desenha{
  0%{stroke-dashoffset:1000}
  66%{stroke-dashoffset:0}
  100%{stroke-dashoffset:0}
}
.brl-fluxo.e-ativo .brl-pulso{animation:brl-corre 8s linear infinite}
@keyframes brl-corre{
  0%{offset-distance:0%;opacity:0}
  3%{opacity:1}
  66%{offset-distance:100%;opacity:1}
  72%{offset-distance:100%;opacity:0}
  100%{offset-distance:100%;opacity:0}
}
.brl-fluxo.e-ativo .brl-bolha{animation:brl-preenche 8s linear infinite;animation-delay:var(--atraso)}
@keyframes brl-preenche{
  0%,1%{fill:var(--paris-azul);stroke:rgba(255,255,255,.5)}
  3%,93%{fill:#FFFFFF;stroke:#FFFFFF}
  100%{fill:var(--paris-azul);stroke:rgba(255,255,255,.5)}
}
.brl-fluxo.e-ativo .brl-icone{animation:brl-icone-acende 8s linear infinite;animation-delay:var(--atraso)}
@keyframes brl-icone-acende{
  0%,1%{stroke:rgba(255,255,255,.72)}
  3%,93%{stroke:var(--paris-azul)}
  100%{stroke:rgba(255,255,255,.72)}
}
.brl-fluxo.e-ativo .brl-anel{animation:brl-pulsa 8s linear infinite;animation-delay:var(--atraso)}
@keyframes brl-pulsa{
  0%,1%{opacity:0;transform:scale(.5)}
  4%{opacity:.95;transform:scale(1)}
  10%{opacity:.35;transform:scale(1.22)}
  14%,93%{opacity:.35;transform:scale(1)}
  100%{opacity:0;transform:scale(.5)}
}
.brl-fluxo.e-ativo .brl-rot,
.brl-fluxo.e-ativo .brl-sub{animation:brl-texto 8s linear infinite;animation-delay:var(--atraso)}
@keyframes brl-texto{
  0%,1%{opacity:.7}
  4%,93%{opacity:1}
  100%{opacity:.7}
}
.brl-fluxo.e-ativo .brl-ramo{animation:brl-ramifica 8s ease-out infinite}
.brl-fluxo.e-ativo .brl-ramo-1{animation-delay:4.32s}
.brl-fluxo.e-ativo .brl-ramo-2{animation-delay:4.42s}
@keyframes brl-ramifica{
  0%{stroke-dashoffset:100}
  7%,90%{stroke-dashoffset:0}
  100%{stroke-dashoffset:100}
}
.brl-fluxo.e-ativo .brl-extra circle,
.brl-fluxo.e-ativo .brl-extra text{animation:brl-surge 8s linear infinite;animation-delay:var(--atraso)}
@keyframes brl-surge{
  0%,1%{opacity:0}
  4%,93%{opacity:1}
  100%{opacity:0}
}

@media (prefers-reduced-motion:reduce){
  .brl-fluxo-svg .brl-avanco,.brl-fluxo-svg .brl-ramo{stroke-dashoffset:0}
  .brl-fluxo-svg .brl-bolha{fill:#FFFFFF;stroke:#FFFFFF}
  .brl-fluxo-svg .brl-icone{stroke:var(--paris-azul)}
  .brl-fluxo-svg .brl-anel{opacity:.35;transform:scale(1)}
  .brl-fluxo-svg .brl-rot,.brl-fluxo-svg .brl-sub,
  .brl-fluxo-svg .brl-extra circle,.brl-fluxo-svg .brl-extra text{opacity:1}
  .brl-fluxo-svg .brl-pulso{display:none}
}

/* ---------- notícias ---------- */
/* Grade de revista: uma matéria de capa à esquerda, com arte grande, categoria
   e chamada; a lista numerada à direita, com miniatura e fio separando. Quatro
   cartões iguais lado a lado não criam hierarquia nenhuma — tudo tem o mesmo
   peso e o olho não sabe por onde começar. */

.brl-noticias{
  padding:104px var(--paris-pad) 0;
  max-width:var(--paris-larg);
  margin:0 auto;
  text-align:center;
}
.brl-noticias-grade{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:64px;
  margin-top:76px;
  text-align:left;
  align-items:start;
}

.brl-capa-arte{overflow:hidden;background:var(--paris-fundo-claro)}
.brl-capa-arte img{
  /* Sem recorte: a arte do post entra na proporção em que foi publicada. */
  width:100%;height:auto;display:block;
  transition:transform .5s ease;
}
.brl-capa a:hover .brl-capa-arte img{transform:scale(1.04)}
.brl-capa-info{padding-top:24px}
.brl-capa-info h3{
  margin:0;
  font-family:var(--fonte-titulo);
  font-size:43px;font-weight:600;line-height:1.14;letter-spacing:-.015em;
}
.brl-capa-info p{
  margin:16px 0 0;
  font-size:16px;line-height:1.75;color:var(--paris-tinta-2);
}
.brl-capa-info time{
  display:block;margin-top:20px;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--paris-cinza);
}

/* Esticar a lista para casar com a capa foi o erro anterior: com quatro itens
   ela ganhava vãos internos enormes. Agora são CINCO chamadas em altura
   natural, que é o que faz as duas colunas terminarem juntas. */
.brl-noticias-col{
  display:flex;
  flex-direction:column;
}
.brl-noticias-lista{
  list-style:none;margin:0;padding:0;
}
.brl-noticias-lista li{
  border-bottom:1px solid var(--paris-linha);
}
/* Fios só ENTRE as chamadas: o de cima e o de baixo fechavam a lista numa
   caixa que não existe. */
.brl-noticias-lista li:last-child{border-bottom:0}
.brl-noticias-lista a{
  width:100%;
  display:grid;
  grid-template-columns:116px minmax(0,1fr);
  gap:20px;
  align-items:center;
  padding:14px 0;
  transition:padding-left .25s ease;
}
.brl-noticias-lista a:hover{padding-left:10px}
.brl-mini{display:block;overflow:hidden;background:var(--paris-fundo-claro)}
.brl-mini img{width:116px;height:80px;object-fit:cover;display:block;transition:transform .5s ease}
.brl-noticias-lista a:hover .brl-mini img{transform:scale(1.05)}
.brl-item-titulo{
  display:block;
  font-size:17px;font-weight:600;line-height:1.35;
}
.brl-noticias-lista time{
  display:block;margin-top:9px;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--paris-cinza);
}
/* O link fecha a coluna, alinhado ao fio da última chamada — em vez de ficar
   solto e centralizado no fim da seção. */
.brl-noticias-mais{
  margin:0;
  padding-top:20px;
  text-align:right;
}

/* Acima de 1500px mostramos seis: a sétima passava do fim da matéria de capa
   e ficava sobrando embaixo. */
.brl-noticias-lista li:nth-child(n+7){display:none}

/* Quantas chamadas cabem depende da largura: quanto mais estreita a tela,
   mais alta fica a matéria de capa e menos itens a coluna ao lado comporta
   sem sobrar vão. O HTML sempre traz sete; aqui decidimos quantas aparecem.
   Assim o equilíbrio das duas colunas se mantém em qualquer monitor. */
@media (max-width:1500px){
  .brl-noticias-lista li:nth-child(n+6){display:none}
}
@media (max-width:1240px){
  .brl-noticias-lista li:nth-child(n+5){display:none}
  .brl-tec{max-width:calc(100vw - 2 * var(--paris-pad))}
}
@media (max-width:1100px){
  .brl-noticias-lista li:nth-child(n+4){display:none}
}
@media (max-width:860px){
  .brl-noticias-lista li:nth-child(n+4){display:none}
}

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

@media (max-width:1100px){
  .brl-vantagens-grade{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px}
  .brl-noticias-grade{gap:44px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}

@media (max-width:1100px){
}

@media (max-width:860px){
  .brl-tec{grid-template-columns:minmax(0,1fr);row-gap:32px;padding:40px 28px;margin-left:var(--paris-pad);margin-right:var(--paris-pad)}
  .brl-fluxo{aspect-ratio:620 / 600}
  .brl-mix{padding-top:64px}
  .brl-mix-faixa{margin-top:0;height:27.4vw}
  .brl-mix-faixa img{width:152vw}
  /* No celular não há espaço para sobreposição: o vídeo vem inteiro em cima e
     o texto embaixo. */
  .brl-sobre{grid-template-columns:minmax(0,1fr);margin-top:64px}
  .brl-sobre-arte{grid-column:1;grid-row:1}
  .brl-sobre-texto{margin-left:0;padding-left:var(--paris-pad);padding-right:var(--paris-pad)}
  .brl-credenciais{grid-template-columns:minmax(0,1fr);gap:18px}
  .brl-credenciais li{border-left:0;border-top:1px solid rgba(255,255,255,.16);padding:14px 0 0}
  .brl-credenciais li:first-child{border-top:0;padding-top:0}
  .brl-sobre-arte video,.brl-sobre-arte img{object-position:center}
  .brl-sobre-texto{grid-column:1;grid-row:2;padding:36px var(--paris-pad) 44px;display:block}
  .brl-tec-lista{gap:22px}

  /* Sem recorte: a arte aparece inteira, na proporção original. Numa tela de
     375px isso dá uma faixa de ~98px de altura — baixa, mas completa. Recortar
     escondia quase metade da peça, e peça de banner vem fechada da marca:
     texto, frasco e assinatura são pensados para o quadro todo.
     Os controles encolhem junto, senão dominam uma faixa desta altura. */
  .brl-banners{height:auto}
  .brl-banners .brl-seta{width:36px;height:36px}
  .brl-banners .brl-seta svg{width:20px;height:20px}
  .brl-banners .brl-seta-ant{left:2px}
  .brl-banners .brl-seta-prox{right:2px}
  .brl-pontos{bottom:4px;gap:7px}
  .brl-ponto-nav{width:20px}


  .brl-vantagens{padding-top:64px}

  /* No celular as quatro vantagens viram uma fita que se arrasta com o dedo.
     É rolagem nativa com encaixe — sem JS, então funciona com inércia, com
     teclado e com leitor de tela, e não quebra se o script falhar.
     A fita sangra até as bordas da tela para o próximo item aparecer
     espiando: é esse pedaço cortado que avisa que há mais para o lado. */
  .brl-vantagens-grade{
    display:flex;
    grid-template-columns:none;
    gap:18px;
    margin:46px calc(-1 * var(--paris-pad)) 0;
    padding:0 var(--paris-pad);
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-left:var(--paris-pad);
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }
  .brl-vantagens-grade::-webkit-scrollbar{display:none}
  .brl-vantagens-grade li{
    flex:0 0 78%;
    scroll-snap-align:start;
  }
  .brl-noticias{padding-top:64px}
  .brl-noticias-grade{grid-template-columns:minmax(0,1fr);gap:40px;margin-top:48px}
  .brl-capa-info h3{font-size:35px}
  .brl-noticias-col{height:auto}
  .brl-noticias-lista a{grid-template-columns:104px minmax(0,1fr);gap:16px}
  .brl-mini img{width:104px;height:72px}
  .brl-item-titulo{font-size:16px}
}