/* ==========================================================================
   W Fintechs — paginas de report
   --------------------------------------------------------------------------
   Camada editorial sobre site.css. Coluna de leitura estreita, figura
   sangrando para fora dela, indice fixo na lateral, numero sempre em mono.
   O report e para ser LIDO: a largura de linha manda, e o grafico entra
   como ilustracao de um argumento, nao como painel.
   ========================================================================== */

/* ------------------------------------------------------------ cabecalho */
.rp-capa{position:relative;background:var(--ink);color:var(--on-dark);overflow:hidden;
  padding-top:calc(var(--nav-h) + 72px);padding-bottom:clamp(48px,6vw,80px)}
.rp-capa__malha{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line-dark-2) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line-dark-2) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 30% 20%,#000,transparent 72%);
  mask-image:radial-gradient(ellipse 80% 80% at 30% 20%,#000,transparent 72%)}
.rp-capa__in{position:relative;z-index:2;max-width:1000px}
/* A capa era toda em mono e caixa alta. Passou para a fonte do site em
   caixa normal: a mesma informacao, sem o ar de terminal. */
.rp-migalha{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:var(--s5);
  font-size:.8125rem;color:var(--on-dark-3)}
.rp-migalha a{color:var(--on-dark-2)}
.rp-migalha a:hover{color:#fff}
.rp-migalha span.sep{opacity:.5}
.rp-capa h1{font-size:clamp(2.25rem,5.6vw,4.25rem);font-weight:600;letter-spacing:-.042em;
  line-height:1.02;max-width:17ch}
.rp-capa .rp-sub{font-size:clamp(1.0625rem,1.6vw,1.375rem);line-height:1.5;font-weight:300;
  color:var(--on-dark-2);max-width:60ch;margin-top:var(--s5)}
.rp-meta{display:flex;flex-wrap:wrap;gap:var(--s5);margin-top:var(--s6);padding-top:var(--s5);
  border-top:1px solid var(--line-dark);font-size:.8125rem;color:var(--on-dark-3)}
.rp-meta b{display:block;color:var(--on-dark);font-weight:600;font-size:1.0625rem;margin-top:4px}
.rp-idiomas{display:flex;gap:6px;margin-left:auto}
/* Cada idioma e a sua bandeira, sem sigla ao lado. O botao vira redondo e
   do tamanho do alvo de toque recomendado (36px), com a bandeira centrada;
   o idioma em uso ganha o anel verde em vez de fundo cheio, que sobre uma
   bandeira colorida so faria sujeira. */
.rp-idiomas a{display:grid;place-items:center;width:36px;height:36px;
  border:1px solid var(--line-dark);border-radius:50%;
  transition:border-color .25s,transform .25s var(--ease-out),box-shadow .25s}
.rp-idiomas a:hover{border-color:rgba(255,255,255,.4);transform:translateY(-1px)}
.rp-idiomas a[aria-current="true"]{border-color:var(--green);
  box-shadow:0 0 0 1px var(--green)}
.rp-idiomas .wf-flag{display:block}

/* numeros de abertura, logo abaixo do titulo */
.rp-chamada{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line-dark);background:var(--ink-2)}
.rp-chamada__c{padding:var(--s5) var(--s5) var(--s5) 0;border-right:1px solid var(--line-dark)}
.rp-chamada__c:last-child{border-right:0}
.rp-chamada .v{font-family:var(--mono);font-size:clamp(1.5rem,3vw,2.25rem);font-weight:500;
  letter-spacing:-.05em;color:#fff;line-height:1;display:flex;align-items:baseline;gap:3px}
.rp-chamada .v .su{font-size:.5em;color:var(--green)}
.rp-chamada .k{font-size:.8125rem;color:var(--on-dark-2);margin-top:10px;line-height:1.4}
.rp-chamada .f{font-family:var(--mono);font-size:.5938rem;letter-spacing:.08em;
  color:var(--on-dark-3);margin-top:6px}

/* ------------------------------------------------------------- corpo */
.rp-corpo{display:grid;grid-template-columns:216px minmax(0,1fr);gap:clamp(28px,5vw,72px);
  align-items:start;padding-block:clamp(48px,6vw,88px)}
.rp-indice{position:sticky;top:110px;font-size:.875rem}
.rp-indice__tt{font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--txt-3);padding-bottom:var(--s3);border-bottom:1px solid var(--line);margin-bottom:var(--s3)}
.rp-indice a{display:block;padding:7px 0 7px 14px;color:var(--txt-3);line-height:1.35;
  border-left:2px solid var(--line);transition:color .3s,border-color .3s,padding-left .3s}
.rp-indice a:hover{color:var(--txt-2);border-color:var(--line-3)}
.rp-indice a.on{color:var(--txt);border-color:var(--navy);font-weight:500}
.rp-indice a i{display:none}
.rp-indice__pe{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line)}

.rp-texto{max-width:74ch;min-width:0}
.rp-sec{scroll-margin-top:110px;padding-bottom:clamp(40px,5vw,72px)}
.rp-sec__n{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);margin-bottom:var(--s3)}
.rp-sec h2{font-size:clamp(1.625rem,3vw,2.25rem);font-weight:600;letter-spacing:-.034em;
  line-height:1.1;margin-bottom:var(--s4)}
.rp-sec h3{font-size:1.25rem;font-weight:600;letter-spacing:-.026em;margin:var(--s6) 0 var(--s3)}
.rp-texto p{font-size:1.0625rem;line-height:1.68;color:var(--txt-2);margin-bottom:var(--s4)}
.rp-texto p:last-child{margin-bottom:0}
.rp-texto p b,.rp-texto p strong{color:var(--txt);font-weight:600}
.rp-texto p.destaque{font-size:1.25rem;line-height:1.5;color:var(--txt);font-weight:400;
  border-left:2px solid var(--green);padding-left:var(--s5);margin:var(--s6) 0}
.rp-texto ul.lista{margin:var(--s4) 0}
.rp-texto ul.lista li{position:relative;padding-left:var(--s5);margin-bottom:var(--s3);
  font-size:1.0625rem;line-height:1.6;color:var(--txt-2)}
.rp-texto ul.lista li::before{content:'';position:absolute;left:0;top:.62em;width:9px;height:1px;
  background:var(--blue)}
.rp-texto ul.lista li b{color:var(--txt);font-weight:600}

/* figura: sangra para fora da coluna de leitura, ate a margem da secao */
.rp-fig{margin:var(--s6) 0;width:min(100%,1000px)}
@media (min-width:1200px){.rp-fig--larga{width:calc(100% + 180px)}}
.rp-fig__cab{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:var(--s4);padding-bottom:var(--s3);border-bottom:1px solid var(--line);margin-bottom:var(--s4)}
.rp-fig__tt{font-size:.9375rem;font-weight:600;letter-spacing:-.015em;color:var(--txt)}
.rp-fig__fonte{font-family:var(--mono);font-size:.625rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--txt-3)}
.rp-fig__nota{font-size:.8125rem;line-height:1.5;color:var(--txt-3);margin-top:var(--s3)}
.rp-fig .g-svg{width:100%;height:auto;display:block;overflow:visible}
.rp-rosca{max-width:280px;margin-inline:auto}

/* tipografia dos graficos */
.g-eixo{font-family:var(--mono);font-size:10px;fill:var(--txt-3);letter-spacing:.03em}
.g-rot{font-family:var(--sans);font-size:13px;fill:var(--txt-2)}
.g-num{font-family:var(--mono);font-size:12px;fill:var(--txt);font-weight:500;letter-spacing:-.02em}
.g-centro{font-family:var(--mono);font-size:22px;fill:var(--txt);font-weight:500;letter-spacing:-.04em}
.g-legenda{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);margin-top:var(--s4)}
.g-legenda span{display:flex;align-items:center;gap:7px;font-size:.8125rem;color:var(--txt-2)}
.g-legenda i{width:9px;height:9px;border-radius:2px;flex:none}

/* animacao de entrada das formas */
.g-linha{stroke-dasharray:2600;stroke-dashoffset:2600}
.vis .g-linha{stroke-dashoffset:0;transition:stroke-dashoffset 1.8s var(--ease-out)}
.g-area{opacity:0}
.vis .g-area{opacity:1;transition:opacity 1s var(--ease-out) .3s}
.g-barra{transform:scaleY(0);transform-origin:bottom;transform-box:fill-box}
.g-svg--h .g-barra{transform:scaleX(0);transform-origin:left}
/* `.vis` depois das duas regras de repouso, e com o seletor mais especifico
   na variante horizontal: com a mesma especificidade e vindo antes, a barra
   horizontal ficava presa em scaleX(0), ou seja, invisivel. */
.vis .g-barra,.vis .g-svg--h .g-barra{transform:none;transition:transform .8s var(--ease-out)}
.g-fatia{opacity:0}
.vis .g-fatia{opacity:1;transition:opacity .7s var(--ease-out)}
@media (prefers-reduced-motion:reduce){
  .g-linha{stroke-dashoffset:0}.g-area,.g-fatia{opacity:1}
  .g-barra,.g-svg--h .g-barra{transform:none}
}

/* linha do tempo de marcos */
.g-marcos{margin-top:var(--s5);border-left:1px solid var(--line);padding-left:var(--s5)}
.g-marco{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--s4);
  padding-bottom:var(--s5)}
.g-marco:last-child{padding-bottom:0}
.g-marco .d{font-family:var(--mono);font-size:.75rem;color:var(--blue);letter-spacing:.02em;padding-top:2px}
.g-marco .p{position:absolute;left:calc(var(--s5) * -1 - 4.5px);top:6px;width:8px;height:8px;
  border-radius:50%;background:var(--paper);border:2px solid var(--blue)}
.g-marco .c b{display:block;font-size:1rem;font-weight:600;letter-spacing:-.02em;line-height:1.3}
.g-marco .c span{display:block;font-size:.9375rem;line-height:1.55;color:var(--txt-2);margin-top:5px}

/* tabela editorial */
.rp-tab{width:100%;border-collapse:collapse;font-size:.9375rem;margin:var(--s5) 0}
.rp-tab th{font-family:var(--mono);font-size:.625rem;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--txt-3);text-align:left;padding:9px 12px 9px 0;
  border-bottom:1px solid var(--line-3)}
.rp-tab td{padding:11px 12px 11px 0;border-bottom:1px solid var(--line-2);color:var(--txt-2)}
.rp-tab td:first-child{color:var(--txt);font-weight:450}
.rp-tab .num{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums;
  padding-right:0;letter-spacing:-.02em}
.rp-tab th.num{text-align:right}
.rp-rola{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* caixa de metodo e fontes */
.rp-metodo{background:var(--white);border:1px solid var(--line);border-radius:var(--raio);
  padding:var(--s5);margin-top:var(--s6)}
.rp-metodo h3{margin-top:0;font-size:1.0625rem}
.rp-metodo ul{margin-top:var(--s4)}
.rp-metodo li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s4);
  padding:10px 0;border-top:1px solid var(--line-2);font-size:.875rem;color:var(--txt-2)}
.rp-metodo li:first-of-type{border-top:0}
.rp-metodo li b{color:var(--txt);font-weight:500}
.rp-metodo li span{font-family:var(--mono);font-size:.6875rem;color:var(--txt-3);text-align:right;
  white-space:nowrap}

/* pe do report: proximo, newsletter */
.rp-pe{border-top:1px solid var(--line);padding-block:clamp(40px,5vw,72px)}
.rp-proximo{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.rp-proximo a{display:block;padding:var(--s5);background:var(--paper);transition:background-color .35s}
.rp-proximo a:hover{background:var(--white)}
.rp-proximo .k{font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--txt-3)}
.rp-proximo b{display:block;font-size:1.125rem;font-weight:600;letter-spacing:-.024em;margin-top:8px}
.rp-proximo span.d{display:block;font-size:.875rem;color:var(--txt-2);margin-top:6px;line-height:1.5}

/* biblioteca de reports */
.rp-lista{padding-block:clamp(40px,5vw,72px)}

/* ------------------------------------------------------------ responsivo */
@media (max-width:1024px){
  .rp-corpo{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  .rp-indice{position:static;display:flex;gap:6px;overflow-x:auto;padding-bottom:var(--s3);
    border-bottom:1px solid var(--line);scrollbar-width:none;
    margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);scroll-snap-type:x mandatory}
  .rp-indice::-webkit-scrollbar{display:none}
  .rp-indice__tt,.rp-indice__pe{display:none}
  .rp-indice a{flex:none;border-left:0;border-bottom:2px solid var(--line);padding:8px 2px;
    margin-right:var(--s4);white-space:nowrap;scroll-snap-align:start}
  .rp-indice a.on{border-color:var(--navy)}
  .rp-chamada{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rp-chamada__c{padding-left:var(--s4)}
  .rp-chamada__c:nth-child(2n){border-right:0}
  .rp-chamada__c:nth-child(-n+2){border-bottom:1px solid var(--line-dark)}
}
@media (max-width:760px){
  .rp-capa{padding-top:calc(var(--nav-h) + 40px)}
  .rp-meta{gap:var(--s4)}
  .rp-idiomas{margin-left:0;width:100%;margin-top:var(--s3)}
  .rp-texto p{font-size:1rem}
  .rp-fig{margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut)}
  .rp-fig .g-svg{min-width:0}
  .g-marco{grid-template-columns:minmax(0,1fr);gap:4px}
  .rp-metodo li{grid-template-columns:minmax(0,1fr)}
  .rp-metodo li span{text-align:left}
}
@media (max-width:420px){
  .rp-chamada{grid-template-columns:minmax(0,1fr)}
  .rp-chamada__c{border-right:0;border-bottom:1px solid var(--line-dark)}
}