/* ==========================================================================
   W Fintechs — a página "Bre-B em dados" (16/10/2026)
   --------------------------------------------------------------------------
   A estrutura é a das páginas de dados (relatorio.css + research.css): índice
   à esquerda, figuras, notas. O que este arquivo acrescenta é a CARA do
   assunto, como a página do Pix faz com o verde-água do Pix:

     a paleta oficial do sello Bre-B (Manual de Identidad Visual do Banco de
     la República): violeta #32005E, azul #00C4FF, verde elétrico #00FF6D e o
     degradê horizontal azul → verde. Só a paleta; o selo em si é dos
     participantes do sistema e não aparece aqui.

   Regras da casa que valem também aqui: a fonte do site (Outfit) em tudo,
   número com algarismos alinhados, nada em caixa alta.

   O verde elétrico não passa no contraste sobre papel: no fundo claro ele é
   só preenchimento (barra, faixa); texto e linha fina em fundo claro usam o
   violeta. No fundo violeta é o contrário.
   ========================================================================== */

.pg-breb{
  --bb-v:#32005E;
  --bb-v2:#4A1A85;
  --bb-fundo:#1F003D;
  --bb-a:#00C4FF;
  --bb-g:#00FF6D;
  --bb-grad:linear-gradient(90deg,#00C4FF,#00FF6D);
}
.pg-breb .bb-n{font-family:var(--sans);font-variant-numeric:tabular-nums;font-feature-settings:'tnum'}

/* ------------------------------------------------------------------ capa */
.bb-capa{position:relative;overflow:hidden;color:#fff;background:var(--bb-v);
  padding-top:calc(var(--nav-h) + 56px)}
/* dois focos de luz nas cores do degradê, bem apagados, e a malha fina do site */
.bb-capa::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 70% at 88% 18%,rgba(0,196,255,.22),transparent 60%),
    radial-gradient(50% 60% at 70% 100%,rgba(0,255,109,.16),transparent 65%),
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px) 0 0/64px 64px,
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px) 0 0/64px 64px}
.bb-capa__in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(24px,5vw,72px);align-items:end}
.bb-capa .rp-migalha{color:rgba(255,255,255,.6)}
.bb-capa .rp-migalha a{color:rgba(255,255,255,.75)}
.bb-capa .rp-migalha a:hover{color:#fff}
.bb-capa__pais{font-size:.9375rem;color:rgba(255,255,255,.72);margin-bottom:var(--s3);display:flex;align-items:center;gap:10px}
.bb-capa__pais::before{content:'';width:28px;height:4px;border-radius:2px;background:var(--bb-grad)}
.bb-capa h1{font-size:clamp(2.6rem,7vw,5.25rem);font-weight:600;letter-spacing:-.045em;line-height:.98;margin:0;color:#fff}
.bb-capa h1 span{background:var(--bb-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.bb-capa .rp-sub{font-size:clamp(1.0625rem,1.5vw,1.3125rem);line-height:1.5;font-weight:300;color:rgba(255,255,255,.78);
  max-width:46ch;margin-top:var(--s5)}

/* o número grande do lado direito */
.bb-total{padding-bottom:var(--s2)}
.bb-total__v{font-size:clamp(3rem,8.4vw,6.5rem);font-weight:600;letter-spacing:-.05em;line-height:.9;
  background:var(--bb-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.bb-total__u{font-size:clamp(1.25rem,2.4vw,2rem);font-weight:500;color:#fff;letter-spacing:-.02em;margin-top:6px}
.bb-total__k{font-size:.9375rem;color:rgba(255,255,255,.72);margin-top:var(--s2)}
.bb-total__dinheiro{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid rgba(255,255,255,.16)}
.bb-total__dinheiro .v{font-size:clamp(1.5rem,2.6vw,2.125rem);font-weight:600;letter-spacing:-.03em;color:#fff}
.bb-total__dinheiro .k{font-size:.875rem;color:rgba(255,255,255,.66);margin-top:2px}

.bb-capa .rp-meta{border-top-color:rgba(255,255,255,.16);color:rgba(255,255,255,.62);margin-top:var(--s6)}
.bb-capa .rp-assina{color:#fff}
.bb-capa .rp-idiomas a{border-color:rgba(255,255,255,.22)}
.bb-capa .rp-idiomas a[aria-current="true"]{border-color:var(--bb-g);box-shadow:0 0 0 1px var(--bb-g)}

/* a onda: todos os dias desde o lançamento, de ponta a ponta da capa */
.bb-onda{position:relative;z-index:1;margin-top:clamp(28px,4vw,48px);height:clamp(120px,16vw,200px)}
.bb-onda svg{display:block;width:100%;height:100%}
.bb-onda__dica{position:absolute;left:var(--gut);bottom:10px;font-size:.75rem;color:rgba(255,255,255,.55)}
.bb-onda__ponto{position:absolute;transform:translate(-50%,-100%);font-size:.8125rem;color:#fff;white-space:nowrap;
  padding-bottom:10px;pointer-events:none}
.bb-onda__ponto b{display:block;font-weight:600;font-size:1rem}
.bb-onda__ponto::after{content:'';position:absolute;left:50%;bottom:0;width:9px;height:9px;margin-left:-4.5px;
  border-radius:50%;background:var(--bb-g);box-shadow:0 0 0 4px rgba(0,255,109,.25)}
@media (prefers-reduced-motion:no-preference){
  .bb-onda .bb-onda__linha{stroke-dasharray:4000;stroke-dashoffset:4000;animation:bb-traco 2.4s cubic-bezier(.2,.7,.2,1) .2s forwards}
  .bb-onda .bb-onda__area{opacity:0;animation:bb-surge 1.2s ease 1.2s forwards}
}
@keyframes bb-traco{to{stroke-dashoffset:0}}
@keyframes bb-surge{to{opacity:1}}

/* ------------------------------------------------- a faixa de 4 números */
.bb-faixa{background:var(--bb-fundo);color:#fff;position:relative}
.bb-faixa::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--bb-grad)}
.bb-faixa__leg{font-size:.8125rem;color:rgba(255,255,255,.6);padding:var(--s5) 0 var(--s3);margin:0}
.bb-faixa__grade{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding-bottom:var(--s6)}
.bb-faixa__c{padding:var(--s3) var(--s5) 0 0;border-right:1px solid rgba(255,255,255,.12)}
.bb-faixa__c + .bb-faixa__c{padding-left:var(--s5)}
.bb-faixa__c:last-child{border-right:0}
.bb-faixa__c .v{font-size:clamp(1.75rem,3.4vw,2.75rem);font-weight:600;letter-spacing:-.035em;line-height:1}
.bb-faixa__c .k{font-size:.875rem;line-height:1.4;color:rgba(255,255,255,.7);margin-top:var(--s3)}
.bb-faixa__c .d{font-size:.8125rem;color:var(--bb-g);margin-top:6px}
.bb-faixa__c .d--desce{color:#FFB4A8}
@media (max-width:900px){
  .bb-faixa__grade{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--s5)}
  .bb-faixa__c:nth-child(2){border-right:0}
  .bb-faixa__c:nth-child(3){padding-left:0}
}
@media (max-width:760px){
  .bb-capa__in{grid-template-columns:1fr;align-items:start}
  .bb-total{padding-bottom:0}
}

/* --------------------------------------------------------------- o corpo */
/* flow-root: a margem da caixa "Nesta leitura" vazava para fora e deixava
   uma faixa da cor do papel entre os números e o corpo */
.pg-breb .rs-papel{background:#fff;display:flow-root}
.pg-breb .rp-sec h2{display:flex;align-items:center;gap:12px}
.pg-breb .rp-sec h2::before{content:'';flex:none;width:6px;height:1em;border-radius:3px;background:linear-gradient(180deg,var(--bb-a),var(--bb-g))}
.pg-breb .rp-indice a.on{border-color:var(--bb-v);color:var(--bb-v)}
.pg-breb .rs-rodada{border-left:4px solid transparent;border-image:linear-gradient(180deg,var(--bb-a),var(--bb-g)) 1}
.pg-breb .rs-rodada__k{color:var(--bb-v)}
.pg-breb .rs-periodo button[aria-pressed="true"]{color:var(--bb-v)}
.pg-breb .g-anota__p{stroke:var(--bb-v)}
.bb-txt{font-size:1.0625rem;line-height:1.6;color:var(--txt-2);max-width:62ch;margin:0 0 var(--s5)}
.bb-txt b{color:var(--txt);font-weight:600}

/* número grande dentro de uma seção */
.bb-destaque{display:flex;flex-wrap:wrap;gap:var(--s5) var(--s7);margin:0 0 var(--s5)}
.bb-destaque__c .v{font-size:clamp(2rem,4vw,2.75rem);font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--bb-v)}
.bb-destaque__c .k{font-size:.875rem;color:var(--txt-2);margin-top:6px;max-width:24ch}

/* duas réguas de 100%: número de pagamentos × valor, nas 7 faixas */
.bb-regua{margin:0 0 var(--s4)}
.bb-regua__t{font-size:.875rem;font-weight:500;color:var(--txt);margin-bottom:8px}
.bb-regua__b{display:flex;height:44px;border-radius:8px;overflow:hidden;background:var(--line-2)}
.bb-regua__s{position:relative;min-width:2px;display:flex;align-items:center;justify-content:center;
  font-size:.8125rem;font-weight:600;color:#fff;transition:filter .2s}
.bb-regua__s:hover{filter:brightness(1.12)}
.bb-regua__s.claro{color:var(--bb-v)}
.bb-legenda{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:var(--s4);font-size:.8125rem;color:var(--txt-2)}
.bb-legenda span{display:inline-flex;align-items:center;gap:7px}
.bb-legenda i{width:12px;height:12px;border-radius:3px;display:inline-block}

/* barras horizontais em HTML (tipos de chave, contas) */
/* nome e número em cima, barra inteira embaixo: cabe em meia coluna */
.bb-barras{display:grid;gap:14px;margin:0}
.bb-barras__l{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;align-items:baseline}
.bb-barras__k{font-size:.9375rem;color:var(--txt-2)}
.bb-barras__t{display:block;grid-column:1 / -1;order:3;height:12px;border-radius:6px;background:var(--line-2);overflow:hidden}
.bb-barras__f{display:block;height:100%;border-radius:7px;background:var(--bb-grad)}
.bb-barras__l:first-child .bb-barras__f{background:linear-gradient(90deg,var(--bb-v),var(--bb-v2))}
.bb-barras__v{font-size:.9375rem;font-weight:600;color:var(--txt);text-align:right;min-width:7ch}
.bb-barras__v small{font-weight:400;color:var(--txt-3);margin-left:6px}

/* dois lados: pessoas × empresas, mesma rede × entre redes */
.bb-lados{display:flex;height:16px;border-radius:8px;overflow:hidden;margin:var(--s2) 0 var(--s2)}
.bb-lados span{display:block;height:100%}
.bb-lados__leg{display:flex;justify-content:space-between;font-size:.875rem;color:var(--txt-2)}
.bb-lados__leg b{color:var(--txt);font-weight:600}

/* a comparação com o Pix */
.bb-par{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--s6)}
.bb-par .rp-fig{margin:0}
.bb-linha-pix svg{display:block;width:100%;height:auto;overflow:visible}
.bb-linha-pix text{font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:12px;fill:var(--txt-3)}
.bb-linha-pix .fim{font-size:13px;font-weight:600}

/* faixa final, violeta */
.pg-breb .wf-cta{background:var(--bb-v)}
.pg-breb .wf-cta h2 span{background:var(--bb-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.pg-breb .wf-cta .wf-btn--green{background:var(--bb-g);color:var(--bb-v)}