/* ==========================================================================
   W Fintechs — site publico
   --------------------------------------------------------------------------
   O produto e um terminal de mercado: Outfit para texto, IBM Plex Mono para
   numero e rotulo. O site herda essa divisao de proposito. E o que faz a
   pagina publica e a plataforma parecerem a mesma casa, e o que tira do
   site a cara de template: o numero nunca e desenhado com a fonte do texto.

   Regras da folha:
   . cor so pelos tokens abaixo, nunca hex solto;
   . caixa e a excecao, nao a regra — o padrao e filete, regua e espaco;
   . verde e sinal, nao decoracao: marca o dado vivo e o acento da marca;
   . toda animacao tem correspondente estatico em prefers-reduced-motion.
   ========================================================================== */

/* Outfit — fonte da marca, servida local. So os pesos que a pagina usa. */
@font-face{font-family:'Outfit';font-style:normal;font-weight:300;font-display:swap;
  src:url('../fonts/webfonts/Outfit-Light.woff2') format('woff2'),url('../fonts/webfonts/Outfit-Light.woff') format('woff')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/webfonts/Outfit-Regular.woff2') format('woff2'),url('../fonts/webfonts/Outfit-Regular.woff') format('woff')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/webfonts/Outfit-Medium.woff2') format('woff2'),url('../fonts/webfonts/Outfit-Medium.woff') format('woff')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/webfonts/Outfit-SemiBold.woff2') format('woff2'),url('../fonts/webfonts/Outfit-SemiBold.woff') format('woff')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/webfonts/Outfit-Bold.woff2') format('woff2'),url('../fonts/webfonts/Outfit-Bold.woff') format('woff')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:800;font-display:swap;
  src:url('../fonts/webfonts/Outfit-ExtraBold.woff2') format('woff2'),url('../fonts/webfonts/Outfit-ExtraBold.woff') format('woff')}

:root{
  /* marca — os tres hex do media kit, sem variacao inventada */
  --navy:#12305F;
  --green:#2FF08A;
  --blue:#0A9FF5;

  /* tinta e papel. O escuro nao e preto: e o navy da marca puxado para
     baixo, senao a marca some do proprio fundo. */
  --ink:#0A1729;
  --ink-2:#0E2140;
  --ink-3:#16304f;
  --paper:#F7F6F2;
  --white:#fff;

  --txt:#14161a;
  --txt-2:#4a5058;
  --txt-3:#7a7f88;
  --on-dark:#EDF1F7;
  --on-dark-2:rgba(237,241,247,.62);
  /* O ALFA E .55, E NAO .38, POR CONTRASTE.
     Com .38 esta cor dava 3.28 sobre o fundo escuro, abaixo dos 4.5 que a
     WCAG pede para texto pequeno, e ela veste justamente texto pequeno:
     datas, rotulos, notas de rodape. Com .55 sobe para 5.50 sobre o fundo
     e 4.90 sobre os cartoes de `--ink-2`, que e o pior caso real. */
  --on-dark-3:rgba(237,241,247,.55);

  /* Sinal de leitura atrasada. Unico tom quente da folha, e existe porque a
     peca de antecipacao precisa marcar o bloco em que a informacao chega
     tarde. Mesma familia do vermelho que a replica da plataforma ja usa em
     status negativo, so que menos saturado. */
  --tarde:#A8402F;

  --line:#E2E0D9;
  --line-2:#EDEBE4;
  --line-3:#BCB8AC;
  --line-dark:rgba(255,255,255,.13);
  --line-dark-2:rgba(255,255,255,.07);

  /* escala de espaco de 4px, a mesma do produto */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:'Outfit',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --nav-h:76px;
  --raio:14px;
  --gut:clamp(20px,5vw,72px);
  --max:1320px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--paper);color:var(--txt);
  font-family:var(--sans);font-size:1rem;line-height:1.6;
  font-weight:400;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
/* o corte lateral fica no html: `overflow-x` no body muda qual elemento
   rola e quebra `position:sticky` e a rolagem programatica em alguns
   motores, sem aviso nenhum */
html{overflow-x:clip}
/* `hidden` no HTML tem de ganhar de qualquer `display` declarado em classe.
   A regra do navegador e `[hidden]{display:none}`, com especificidade menor
   que a de uma classe: a mensagem de sucesso do formulario de contato tem
   `display:flex` e aparecia na tela mesmo com o atributo posto. */
[hidden]{display:none!important}
img,svg{max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5{margin:0;font-weight:600;letter-spacing:-.028em;line-height:1.08}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--green);color:var(--ink)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:3px}

/* ============================================================ primitivos */
.wf-wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.wf-wrap--narrow{max-width:900px}

.wf-sec{position:relative;padding-block:clamp(72px,10vw,140px)}
.wf-sec--dark{background:var(--ink);color:var(--on-dark)}
.wf-sec--paper{background:var(--paper)}
.wf-sec--white{background:var(--white)}
.wf-sec--tight{padding-block:clamp(56px,7vw,92px)}

/* rotulo de secao: numero em mono + titulo + filete que corre ate a margem.
   Substitui o "cabecalho centralizado" que faz toda pagina parecer igual. */
/* Cabecalho de seccao centrado: numero e nome do capitulo numa pastilha,
   titulo grande por baixo e o lead centrado sob ele. A regua que corria ate
   a margem saiu, porque uma linha so de um lado desalinha o centro. */
.wf-eyebrow{
  display:flex;align-items:center;justify-content:center;gap:9px;width:fit-content;
  font-family:var(--mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3);
  margin:0 auto var(--s5);padding:6px 14px;border-radius:999px;
  border:1px solid var(--line);background:var(--white);
}
.wf-cabeca{text-align:center}
.wf-eyebrow b{color:var(--txt);font-weight:500}
.wf-eyebrow .n{color:var(--blue);font-weight:600}
.wf-sec--dark .wf-eyebrow{color:var(--on-dark-3);border-color:var(--line-dark);
  background:rgba(255,255,255,.04)}
.wf-sec--dark .wf-eyebrow b{color:var(--on-dark)}
.wf-sec--dark .wf-eyebrow .n{color:var(--green)}

.wf-h2{font-size:clamp(2rem,4.4vw,3.4rem);font-weight:600;letter-spacing:-.035em;line-height:1.04;
  text-align:center;max-width:min(900px,100%);margin-inline:auto;text-wrap:balance}
.wf-h3{font-size:clamp(1.375rem,2.4vw,1.875rem);font-weight:600;letter-spacing:-.03em;line-height:1.12}
.wf-lead{font-size:clamp(1.0625rem,1.5vw,1.25rem);line-height:1.55;color:var(--txt-2);font-weight:300;
  max-width:62ch;text-align:center;margin:20px auto 48px;text-wrap:pretty}
/* O espaco entre o cabecalho e o conteudo vinha da margem de baixo do lead.
   Numa seccao sem lead (reports), o titulo colava no conteudo: aqui ele
   recupera a mesma folga. */
.wf-h2 + :not(.wf-lead){margin-top:48px}
.wf-sec--dark .wf-lead{color:var(--on-dark-2)}
.wf-body{font-size:1rem;line-height:1.65;color:var(--txt-2)}
.wf-sec--dark .wf-body{color:var(--on-dark-2)}
.wf-mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.wf-micro{font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3)}
.wf-sec--dark .wf-micro{color:var(--on-dark-3)}

/* filete horizontal, o separador padrao da pagina */
.wf-rule{height:1px;background:var(--line);border:0;margin:0}
.wf-sec--dark .wf-rule{background:var(--line-dark)}

/* pastilha de dado ao vivo — o ponto verde piscando so aparece onde o
   numero vem de sincronizacao real, nunca como enfeite */
@keyframes pulso{0%{box-shadow:0 0 0 0 rgba(47,240,138,.55)}70%{box-shadow:0 0 0 7px rgba(47,240,138,0)}100%{box-shadow:0 0 0 0 rgba(47,240,138,0)}}

/* ================================================================ botoes */
.wf-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 22px;border-radius:999px;font-size:.9375rem;font-weight:500;
  letter-spacing:-.01em;white-space:nowrap;position:relative;overflow:hidden;
  transition:transform .3s var(--ease),background-color .25s,color .25s,border-color .25s,box-shadow .3s;
}
.wf-btn svg{flex:none;transition:transform .35s var(--ease-out)}
.wf-btn:hover svg{transform:translateX(3px)}
.wf-btn--primary{background:var(--navy);color:#fff}
.wf-btn--primary:hover{background:var(--ink);box-shadow:0 10px 30px -12px rgba(18,48,95,.65)}
.wf-btn--green{background:var(--green);color:var(--ink)}
.wf-btn--green:hover{background:#4df6a0;box-shadow:0 10px 34px -12px rgba(47,240,138,.75)}
.wf-btn--ghost{border:1px solid var(--line);color:var(--txt);background:transparent}
.wf-btn--ghost:hover{border-color:var(--txt);background:var(--white)}
.wf-btn--ghost-dark{border:1px solid var(--line-dark);color:var(--on-dark);background:transparent}
.wf-btn--ghost-dark:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.06)}
.wf-btn--sm{padding:9px 17px;font-size:.875rem}

/* link editorial com sublinhado que cresce */
.wf-link{display:inline-flex;align-items:center;gap:8px;font-weight:500;
  color:var(--navy);position:relative;padding-bottom:2px}
.wf-link::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease-out)}
.wf-link:hover::after{transform:scaleX(1);transform-origin:left}
.wf-link svg{transition:transform .35s var(--ease-out)}
.wf-link:hover svg{transform:translateX(4px)}
.wf-sec--dark .wf-link{color:var(--green)}

/* ============================================================ navegacao
   Comportamento: no topo a barra e larga e transparente sobre o hero. A
   partir do primeiro scroll ela encolhe para uma pilula flutuante com
   desfoque. E a mesma barra, com uma classe a mais — nao duas barras
   trocando de lugar, que e o que costuma provocar salto de layout. */
.wf-nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  padding:14px var(--gut);
  transition:padding .5s var(--ease-out),background-color .4s;
}
.wf-nav__in{
  max-width:calc(var(--max) - 40px);margin-inline:auto;
  display:flex;align-items:center;gap:var(--s5);
  height:var(--nav-h);padding:0 var(--s5);
  border-radius:999px;border:1px solid transparent;
  transition:height .5s var(--ease-out),background-color .45s var(--ease),
    border-color .45s,box-shadow .5s var(--ease),backdrop-filter .4s,padding .5s var(--ease-out);
}
.wf-nav.is-stuck{padding-top:10px}
.wf-nav.is-stuck .wf-nav__in{
  height:60px;background:rgba(247,246,242,.82);
  border-color:var(--line);
  box-shadow:0 12px 40px -22px rgba(10,23,41,.5),0 2px 8px -4px rgba(10,23,41,.12);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
}
/* sobre secao escura a pilula inverte, senao ela some ou berra */
.wf-nav.is-stuck.on-dark .wf-nav__in{
  background:rgba(10,23,41,.72);border-color:var(--line-dark);
  box-shadow:0 12px 44px -20px rgba(0,0,0,.7);
}
.wf-nav.is-hidden{transform:translateY(-130%)}
.wf-nav{transition:transform .55s var(--ease-out),padding .5s var(--ease-out)}

.wf-nav__logo{display:flex;align-items:center;flex:none;height:100%}
.wf-nav__logo .lk{height:24px;width:auto;display:block;transition:height .5s var(--ease-out)}
.wf-nav.is-stuck .wf-nav__logo .lk{height:21px}
.wf-nav__logo .lk--claro{display:none}
.wf-nav.on-dark .wf-nav__logo .lk--claro{display:block}
.wf-nav.on-dark .wf-nav__logo .lk--escuro{display:none}
.wf-nav__so-marca{display:none}
.wf-nav__so-marca svg{height:24px;width:auto;display:block}
.wf-nav__so-marca .mk--claro{display:none}
.wf-nav.on-dark .wf-nav__so-marca .mk--claro{display:block}
.wf-nav.on-dark .wf-nav__so-marca .mk--escuro{display:none}
@media (max-width:560px){
  .wf-nav__logo .lk{display:none!important}
  .wf-nav__so-marca{display:block}
}

/* O item ocupa a ALTURA INTEIRA da barra, nao so a do botao.

   Antes o botao media 42px dentro de uma barra de 76: sobravam 17px acima e
   abaixo que ja contavam como "fora do menu", e descer um pouco em direcao
   ao painel, ainda dentro da barra, ja disparava o mouseleave que fechava
   tudo. */
.wf-nav__menu{display:flex;align-items:stretch;align-self:stretch;gap:2px;margin-left:auto}
.wf-nav__item{position:relative;display:flex;align-items:center}
.wf-nav__link{
  display:flex;align-items:center;gap:6px;padding:9px 14px;border-radius:999px;
  font-size:.9375rem;font-weight:450;color:var(--txt-2);
  transition:color .2s,background-color .25s;
}
.wf-nav__link:hover,.wf-nav__item.is-open .wf-nav__link{color:var(--txt);background:rgba(18,48,95,.06)}
.wf-nav__link .caret{width:9px;height:9px;transition:transform .3s var(--ease)}
.wf-nav__item.is-open .caret{transform:rotate(180deg)}
.wf-nav.on-dark .wf-nav__link{color:var(--on-dark-2)}
.wf-nav.on-dark .wf-nav__link:hover,.wf-nav.on-dark .wf-nav__item.is-open .wf-nav__link{color:#fff;background:rgba(255,255,255,.1)}

/* painel de submenu — abre por hover no desktop e por clique/teclado */
/* PONTE SOBRE O VAO.

   O painel abre com um respiro abaixo da barra. Esse respiro nao pertencia
   nem ao item nem ao painel: era um corredor morto de 12px sobre o hero, e
   atravessa-lo disparava o `mouseleave` do item. Resultado: mesmo descendo
   em linha reta do botao ate o primeiro link do painel, o painel fechava no
   meio do caminho e nao dava para clicar em nada.

   O `::before` ocupa esse corredor. E transparente, nao muda o desenho, e
   faz o cursor continuar dentro da arvore do item durante a travessia. */
.wf-nav__panel::before{content:'';position:absolute;left:0;right:0;top:-14px;height:14px}
.wf-nav__panel{
  position:absolute;top:calc(100% + 6px);left:50%;transform:translate(-50%,8px);
  min-width:330px;padding:10px;border-radius:18px;
  background:rgba(255,255,255,.94);border:1px solid var(--line);
  box-shadow:0 30px 60px -28px rgba(10,23,41,.5);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .28s var(--ease),transform .38s var(--ease-out),visibility .28s;
}
.wf-nav__item.is-open .wf-nav__panel{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.wf-nav__panel a{display:flex;gap:12px;align-items:flex-start;padding:11px 13px;border-radius:12px;transition:background-color .2s}
.wf-nav__panel a:hover{background:var(--paper)}
.wf-nav__panel .ic{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:rgba(10,159,245,.1);color:var(--navy);margin-top:1px}
.wf-nav__panel .ic svg{width:15px;height:15px}
.wf-nav__panel .tt{display:block;font-size:.9375rem;font-weight:500;color:var(--txt);line-height:1.3}
.wf-nav__panel .dd{display:block;font-size:.8125rem;color:var(--txt-3);line-height:1.42;margin-top:2px}

/* seletor de idioma */
.wf-lang{position:relative;flex:none}
.wf-lang__btn{display:flex;align-items:center;gap:6px;padding:7px 9px;border-radius:999px;
  border:1px solid var(--line);font-family:var(--mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--txt-2);transition:all .25s}
.wf-lang__btn:hover{border-color:var(--txt-3);color:var(--txt)}
.wf-nav.on-dark .wf-lang__btn{border-color:var(--line-dark);color:var(--on-dark-2)}
.wf-nav.on-dark .wf-lang__btn:hover{border-color:rgba(255,255,255,.4);color:#fff}
.wf-lang__btn .caret{width:8px;height:8px;transition:transform .3s}
.wf-lang.is-open .caret{transform:rotate(180deg)}
.wf-lang__list{position:absolute;top:calc(100% + 10px);right:0;min-width:132px;padding:6px;
  border-radius:14px;background:rgba(255,255,255,.96);border:1px solid var(--line);
  box-shadow:0 26px 54px -26px rgba(10,23,41,.5);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  opacity:0;visibility:hidden;transform:translateY(8px);transition:all .3s var(--ease-out)}
.wf-lang.is-open .wf-lang__list{opacity:1;visibility:visible;transform:translateY(0)}
.wf-lang__list a{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 12px;border-radius:10px;font-size:.875rem;color:var(--txt-2)}
.wf-lang__list a:hover{background:var(--paper);color:var(--txt)}
.wf-lang__list a[aria-current="true"]{color:var(--txt);font-weight:500}
.wf-lang__list a[aria-current="true"]::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--green)}
/* O <svg> do sprite so guarda as definicoes: fica fora do fluxo para nao
   abrir uma linha em branco no topo da barra. */
.wf-sprite{position:absolute;width:0;height:0;overflow:hidden}
.wf-flag{width:19px;height:13.3px;flex:none;display:block}
.wf-lang__n{display:flex;align-items:center;gap:9px;font-size:.8125rem;font-weight:500;
  letter-spacing:0}

.wf-nav__cta{flex:none}
/* O "Entrar" e o irmao discreto do CTA: mesma altura, sem preenchimento.
   Some junto com o CTA abaixo de 1024px e reaparece dentro da folha, senao
   a barra do telemovel fica com tres alvos de toque disputando a largura.

   A cor tem de virar com a barra: `wf-btn--ghost` pinta o texto com --txt,
   que e a tinta escura, e sobre o hero escuro o botao aparecia vazio. */
.wf-nav__login{flex:none}
.wf-nav.on-dark .wf-nav__login{border-color:var(--line-dark);color:var(--on-dark-2)}
.wf-nav.on-dark .wf-nav__login:hover{border-color:rgba(255,255,255,.4);color:#fff}
.wf-nav__burger{display:none;flex:none;width:42px;height:42px;border-radius:999px;
  border:1px solid var(--line);align-items:center;justify-content:center;
  /* coluna, e nao linha: sem isto os tres tracos ficam lado a lado e o
     botao vira um risco unico */
  flex-direction:column}
.wf-nav__burger span{display:block;width:16px;height:1.5px;background:var(--txt);border-radius:2px;
  transition:transform .4s var(--ease-out),opacity .25s}
.wf-nav__burger span+span{margin-top:4px}
.wf-nav.on-dark .wf-nav__burger{border-color:var(--line-dark)}
.wf-nav.on-dark .wf-nav__burger span{background:var(--on-dark)}
body.menu-aberto .wf-nav__burger span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
body.menu-aberto .wf-nav__burger span:nth-child(2){opacity:0}
body.menu-aberto .wf-nav__burger span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* menu mobile em folha inteira */
.wf-sheet{
  position:fixed;inset:0;z-index:99;background:var(--ink);color:var(--on-dark);
  padding:calc(var(--nav-h) + 34px) var(--gut) var(--s7);
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transform:translateY(-14px);
  transition:opacity .4s var(--ease),transform .5s var(--ease-out),visibility .4s;
}
body.menu-aberto .wf-sheet{opacity:1;visibility:visible;transform:none}
body.menu-aberto{overflow:hidden}
.wf-sheet__grupo{border-top:1px solid var(--line-dark);padding:var(--s5) 0}
.wf-sheet__grupo:first-child{border-top:0}
.wf-sheet__tt{font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--on-dark-3);margin-bottom:var(--s4)}
.wf-sheet a.item{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);
  padding:11px 0;font-size:1.375rem;font-weight:500;letter-spacing:-.02em;color:var(--on-dark)}
.wf-sheet a.item .dd{font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--on-dark-3);text-align:right;max-width:44%}
.wf-sheet__pe{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s5)}
.wf-sheet__pe .wf-btn{flex:1 1 190px}

/* ================================================================== hero */
.wf-hero{position:relative;background:var(--ink);color:var(--on-dark);overflow:hidden;
  padding-top:calc(var(--nav-h) + 78px);padding-bottom:clamp(56px,7vw,92px)}
/* malha fina de terminal, nao gradiente decorativo */
.wf-hero__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:76px 76px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 22%,#000 20%,transparent 78%);
  mask-image:radial-gradient(ellipse 90% 70% at 50% 22%,#000 20%,transparent 78%)}
.wf-hero__brilho{position:absolute;left:50%;top:-24%;width:min(1180px,120vw);aspect-ratio:1.5;
  transform:translateX(-50%);pointer-events:none;opacity:.85;
  background:radial-gradient(ellipse at 50% 50%,rgba(10,159,245,.2),rgba(47,240,138,.07) 42%,transparent 68%)}
.wf-hero__in{position:relative;z-index:2}

.wf-hero__grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(28px,4vw,64px);align-items:center}

.wf-hero h1{font-size:clamp(2.6rem,6.6vw,5.1rem);font-weight:600;letter-spacing:-.045em;line-height:.98;
  margin-bottom:var(--s5)}
/* ESTADO DE REPOUSO = ESTADO VISIVEL. A primeira versao guardava o texto em
   `translateY(102%)` e contava com a animacao para traze-lo; quando a
   animacao nao roda, e ela nao roda em mais casos do que parece, a chamada
   principal do site simplesmente nao aparecia. O deslocamento agora vive no
   `from` do keyframe, com `both`. */
.wf-hero h1 .lin{display:block;overflow:hidden}
.wf-hero h1 .lin>span{display:block;animation:sobe .95s var(--ease-out) both}
.wf-hero h1 .lin:nth-child(2)>span{animation-delay:.08s}
.wf-hero h1 .lin:nth-child(3)>span{animation-delay:.16s}
@keyframes sobe{from{transform:translateY(102%)}to{transform:none}}

/* WHAT / WHERE / WHO no h1 — cada palavra com a cor do seu eixo */
.w-what{color:var(--green)}
.w-where{color:var(--blue)}
.w-who{color:#fff}

.wf-hero__sub{font-size:clamp(1.0625rem,1.55vw,1.3125rem);line-height:1.5;font-weight:300;
  color:var(--on-dark-2);max-width:54ch;margin-bottom:var(--s6);
  animation:aparece .8s var(--ease-out) .34s both}
@keyframes aparece{from{opacity:0}to{opacity:1}}
.wf-hero__sub b{color:var(--on-dark);font-weight:500}

.wf-hero__acoes{display:flex;flex-wrap:wrap;gap:var(--s3);
  animation:aparece .8s var(--ease-out) .44s both}

/* ---------------------------------------------- marca viva (coluna direita)
   O simbolo da W Fintechs desenhado em SVG, com as sete hastes separadas: as
   quatro do W em navy claro, a haste e os dois bracos do F em verde e azul.
   As pecas do F se deslocam conforme a pagina rola e voltam ao lugar — a
   marca se monta enquanto o visitante desce, em vez de ficar parada num
   canto. */
/* A marca do hero: o simbolo grande, solto, com dois aneis de contorno em
   volta. O W agora e BRANCO, que e a cor do arquivo oficial da marca para
   fundo escuro (mark_color-on-dark_transparent.svg), no lugar do azul-aco
   que uma versao anterior tinha inventado. */
.wf-marca{position:relative;display:grid;place-items:center;min-height:min(52vw,440px)}
.wf-marca svg{width:min(100%,470px);height:auto;overflow:visible}
.wf-marca .haste{transform-box:fill-box;transform-origin:center;
  transition:transform .12s linear,opacity .5s}
.wf-marca__anel{position:absolute;inset:auto;width:min(112%,540px);aspect-ratio:1;border-radius:50%;
  border:1px solid var(--line-dark);pointer-events:none}
.wf-marca__anel:nth-of-type(2){width:min(86%,410px);border-style:dashed;opacity:.55}
/* ============================================================ revelacoes */
/* `.rv` so esconde sob `.js`, classe que app.js poe em <html> na primeira
   linha: sem script, a pagina chega inteira em vez de em branco. */
.rv{transition:opacity .85s var(--ease-out),transform .85s var(--ease-out)}
.js .rv{opacity:0;transform:translateY(24px)}
.js .rv.vis{opacity:1;transform:none}
.rv-d1{transition-delay:.07s}.rv-d2{transition-delay:.14s}.rv-d3{transition-delay:.21s}
.rv-d4{transition-delay:.28s}.rv-d5{transition-delay:.35s}.rv-d6{transition-delay:.42s}

/* ================================================================= demo
   --------------------------------------------------------------------
   Replica da plataforma dentro de uma moldura. Tudo aqui e desenho: nao
   ha <a>, <button> nem <input> na arvore congelada, e ela recebe `inert`.
   E por isso que o demo nao "quebra por JS": nao existe comportamento
   para acionar, so DOM parado com dado publico. Ver assets/js/demo.js.
   -------------------------------------------------------------------- */

/* trilhos das 6 funcionalidades */

/* moldura: janela de aplicacao, sem barra de navegador falsa com URL */

/* a area congelada */

/* legenda de valor sob a moldura */
/* a legenda acompanha a troca da tela: sem isto o texto pulava de uma
   funcionalidade para a outra antes de a imagem terminar de virar */

/* rodape do demo: escala e aviso honesto de que a tela e uma amostra */

/* ------------------------------------------------ replica da plataforma */
.p{--pl:#e6e5e1;--pl2:#efeeea;--pt:#14161a;--pt2:#4a5058;--pt3:#8b8f96;
  display:flex;flex-direction:column;width:100%;height:100%;font-size:12.5px;line-height:1.42;
  color:var(--pt);background:#f7f7f5;font-family:var(--sans)}
/* a barra fica em cima e o rail comeca por baixo dela */
.p-corpo{flex:1;min-height:0;display:flex}
.p *{box-sizing:border-box}
/* Rail com rotulo por baixo do icone, item ativo em bloco claro com o icone
   em verde, separador entre os dois grupos e Config no fim, como o produto. */
.p-rail{flex:none;width:66px;background:var(--navy);display:flex;flex-direction:column;
  align-items:center;padding:9px 0;gap:2px}
.p-rail .it{width:56px;padding:7px 0 5px;border-radius:9px;display:flex;flex-direction:column;
  align-items:center;gap:4px;color:rgba(255,255,255,.62)}
.p-rail .it svg{width:15px;height:15px}
.p-rail .it i{font-style:normal;font-size:8.5px;line-height:1;letter-spacing:-.01em}
.p-rail .it.on{background:rgba(255,255,255,.1);color:#fff}
.p-rail .it.on svg{color:var(--green)}
.p-rail .sep{width:36px;height:1px;background:rgba(255,255,255,.15);margin:7px 0}
.p-rail .espaco{flex:1}
.p-rail .recolher{color:rgba(255,255,255,.4)}

.p-main{flex:1;min-width:0;display:flex;flex-direction:column;background:#fff}
/* Barra azul de largura inteira, com a marca no canto, a busca em pilula
   translucida e o grupo do utilizador a direita. */
.p-top{flex:none;display:flex;align-items:center;gap:13px;padding:0 14px;height:40px;
  background:var(--blue);color:#fff}
.p-top__lg{flex:none;width:26px;display:grid;place-items:center}
.p-top__lg svg{width:24px;height:auto}
.p-busca{flex:1;max-width:420px;display:flex;align-items:center;gap:7px;padding:5px 12px;
  border-radius:999px;background:rgba(255,255,255,.24);color:rgba(255,255,255,.9);font-size:11px}
.p-busca svg{width:12px;height:12px;flex:none}
.p-top__dir{margin-left:auto;display:flex;align-items:center;gap:11px}
.p-top__dir .lk{font-size:11px;color:rgba(255,255,255,.94);white-space:nowrap}
.p-top__dir .lg2{display:flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;
  background:rgba(255,255,255,.22);font-size:10px;color:#fff}
.p-top__dir .lg2 svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.4}
.p-top__dir .aj{flex:none;width:15px;height:15px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.65);font-size:9px;line-height:1}
.p-top__dir .av{width:21px;height:21px;border-radius:50%;display:grid;place-items:center;
  background:#fff;color:var(--navy);font-family:var(--mono);font-size:9px;font-weight:600;flex:none}

/* pilulas dentro do canvas, e nao abas sublinhadas por baixo da barra */
.p-abas{flex:none;display:flex;flex-wrap:wrap;gap:6px;margin-bottom:11px}
.p-abas .pl{padding:4px 12px;border-radius:999px;border:1px solid var(--pl);background:#fff;
  font-size:11px;color:var(--pt2);white-space:nowrap}
.p-abas .pl.on{background:var(--green);border-color:var(--green);color:var(--ink);font-weight:500}

/* cabecalho de pagina */
.p-cabp{display:flex;align-items:flex-start;gap:9px;margin-bottom:11px}
.p-cabp__ic{flex:none;margin-top:2px;color:var(--blue)}
.p-cabp__ic svg{width:15px;height:15px;fill:currentColor;stroke:none}
.p-cabp__tx{min-width:0;flex:1}
.p-cabp__tx h2{margin:0;font-size:17px;font-weight:600;letter-spacing:-.03em;color:var(--pt)}
.p-cabp__tx p{margin:3px 0 0;font-size:11px;color:var(--pt3)}
.p-cabp__bt{flex:none;display:flex;gap:7px}
.p-cabp__bt .b{display:flex;align-items:center;gap:5px;padding:6px 12px;border-radius:7px;
  font-size:11px;font-weight:500;white-space:nowrap}
.p-cabp__bt .b svg{width:12px;height:12px}
.p-cabp__bt .b--out{border:1px solid var(--pl);color:var(--pt2);background:#fff}
.p-cabp__bt .b--on{background:var(--green);color:var(--ink)}

/* linha de resultados, entre as pilulas e a tabela */
.p-res{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-bottom:9px}
.p-res b{font-size:12px;font-weight:600;color:var(--pt)}

/* coluna flex, e nao bloco: e o que permite ao ultimo cartao de cada tela
   crescer ate o pe da moldura. Como bloco, `flex:1` nos filhos nao valia
   nada e as telas mais curtas terminavam com um terco de vazio branco. */
.p-canvas{flex:1;min-height:0;overflow:hidden;background:#f7f7f5;padding:15px;
  display:flex;flex-direction:column}
.p-cresce{flex:1;min-height:0}
/* o cartao que cresce vira coluna: o corpo ocupa a sobra e o que vem depois
   dele (a barra de digitar, na tela Pergunte) encosta no pe do cartao */
.p-cx.p-cresce{display:flex;flex-direction:column}
.p-cx.p-cresce>.p-cx__corpo{flex:1;min-height:0;overflow:hidden}
.p-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:13px}
.p-h1{font-size:19px;font-weight:600;letter-spacing:-.028em;line-height:1.15}
.p-h1 small{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--pt3);font-weight:400;margin-bottom:5px}
.p-sub{font-size:11.5px;color:var(--pt2);margin-top:5px;max-width:64ch}

.p-cx{background:#fff;border:1px solid var(--pl);border-radius:9px;overflow:hidden}
.p-cx__cab{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 12px;border-bottom:1px solid var(--pl2)}
.p-cx__tt{font-size:11.5px;font-weight:600;letter-spacing:-.01em}
.p-cx__mt{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--pt3)}
.p-cx__corpo{padding:12px}

.p-grid{display:grid;gap:11px}
.p-g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.p-g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.p-g4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* metrica: rotulo micro em mono, numero grande em mono */
.p-met{padding:10px 12px;background:#fff;border:1px solid var(--pl);border-radius:9px}
.p-met .k{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--pt3)}
.p-met .v{font-family:var(--mono);font-size:20px;font-weight:500;letter-spacing:-.035em;
  margin-top:5px;font-variant-numeric:tabular-nums;line-height:1.05}
.p-met .d{font-size:10.5px;color:var(--pt2);margin-top:3px}
.p-met .d.up{color:#14724f}.p-met .d.dn{color:#b03a2b}

/* tabela densa, cabecalho em mono */
.p-tab{width:100%;border-collapse:collapse;font-size:11.5px}
.p-tab th{font-family:var(--mono);font-size:8.5px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--pt3);text-align:left;padding:7px 9px;
  border-bottom:1px solid var(--pl);white-space:nowrap}
.p-tab td{padding:7px 9px;border-bottom:1px solid var(--pl2);white-space:nowrap;vertical-align:middle}
.p-tab tr:last-child td{border-bottom:0}
.p-tab .num{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.p-tab .destaque td{background:rgba(10,159,245,.05)}
/* Tabela dentro de coluna estreita: sem largura fixa, `white-space:nowrap`
   empurra as colunas da direita para fora do cartao e o que some e o
   status, nao o texto longo que causou o problema. */
.p-tab--fixa{table-layout:fixed}
.p-tab--fixa td,.p-tab--fixa th{overflow:hidden;text-overflow:ellipsis}

.p-emp{display:flex;align-items:center;gap:8px;min-width:0}
.p-emp .mk{position:relative;flex:none;width:21px;height:21px;border-radius:6px;display:grid;
  place-items:center;overflow:hidden;
  font-family:var(--mono);font-size:8.5px;font-weight:600;color:#fff;letter-spacing:-.02em}
/* o logotipo real cobre as iniciais; se o arquivo falhar, o `onerror` do
   demo.js remove a <img> e o circulo de cor volta a aparecer sozinho */
.p-emp .mk img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* colunas que o screener do produto tem e este nao tinha */
.p-sel{width:22px}
.p-sel .cx{display:block;width:11px;height:11px;border:1px solid #c8c6c0;border-radius:3px;
  background:#fff}
.p-band{width:26px;font-size:13px;line-height:1}
.p-fraco{color:var(--pt2)}
.p-min{font-size:10px}
.p-score-c{font-weight:600;color:var(--blue)}
.p-est{width:24px;text-align:right;color:#c2c0ba}
.p-est svg{display:inline-block;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linejoin:round}
.p-emp .nm{font-weight:500;overflow:hidden;text-overflow:ellipsis}
.p-emp .sb{font-size:9.5px;color:var(--pt3);font-weight:400}

.p-chip{display:inline-flex;align-items:center;gap:5px;padding:2.5px 8px;border-radius:999px;
  border:1px solid var(--pl);font-size:9.5px;color:var(--pt2);white-space:nowrap;background:#fff}
.p-chip.on{background:var(--green);border-color:var(--green);color:var(--ink);font-weight:500}
/* as pastilhas do filtro respiram mais que os chips de dado */
.p-filtros .p-chip{padding:4px 9px;font-size:10px}
.p-filtros .p-chips{gap:5px}
.p-chip.ok{background:#eaf7f0;border-color:#c8e8d8;color:#14724f}
.p-chip.al{background:#fbf4e6;border-color:#f0e0bd;color:#97681a}
.p-chip.rj{background:#fdeeec;border-color:#f6d3ce;color:#b03a2b}
.p-chip.bl{background:#e9f4fe;border-color:#c9e4fb;color:#0b5fa5}
.p-chips{display:flex;flex-wrap:wrap;gap:5px}

.p-barra{height:5px;border-radius:3px;background:var(--pl2);overflow:hidden}
.p-barra i{display:block;height:100%;border-radius:3px;background:var(--navy)}
.p-barra i.g{background:var(--green)}
.p-barra i.b{background:var(--blue)}

.p-lista{display:flex;flex-direction:column}
.p-lista .it{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--pl2)}
.p-lista .it:last-child{border-bottom:0}
.p-lista .dt{font-family:var(--mono);font-size:9px;color:var(--pt3);flex:none;width:48px;padding-top:2px;
  letter-spacing:-.01em}
.p-lista .it>span:last-child{min-width:0}
.p-lista .tt{display:block;font-size:11.5px;font-weight:500;line-height:1.35}
.p-lista .tx{display:block;font-size:10.5px;color:var(--pt2);margin-top:2px;line-height:1.4}
.p-lista .fn{font-family:var(--mono);font-size:9px;color:var(--pt3);margin-top:4px}

/* Coluna de filtros como no produto: cartao branco, cabecalho com Filtros e
   Limpar, campo de texto livre e depois os grupos de pastilhas, cada um com
   o rotulo sublinhado por um filete. */
.p-filtros{flex:none;width:196px;align-self:flex-start;max-height:100%;overflow:hidden;
  background:#fff;border:1px solid var(--pl);border-radius:10px;padding:13px;
  display:flex;flex-direction:column;gap:13px}
.p-filtros__cab{display:flex;align-items:center;justify-content:space-between;
  padding-bottom:11px;border-bottom:1px solid var(--pl2)}
.p-filtros__cab b{font-size:13px;font-weight:600;color:var(--pt)}
.p-filtros__cab span{font-size:11px;color:var(--pt2)}
.p-filtros .gr .k{font-size:10px;color:var(--pt3);margin-bottom:7px;padding-bottom:5px;
  border-bottom:1px solid var(--pl2)}
.p-inp{display:block;padding:7px 10px;border:1px solid var(--pl);border-radius:7px;
  font-size:10.5px;color:#b6b4ae;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-fx{display:flex;gap:13px;flex:1;min-height:0}
.p-fx>.corpo{flex:1;min-width:0;display:flex;flex-direction:column;gap:11px}

.p-score{display:flex;align-items:center;gap:12px}
.p-score .num{font-family:var(--mono);font-size:34px;font-weight:500;letter-spacing:-.05em;line-height:1;
  font-variant-numeric:tabular-nums}
.p-score .esc{flex:1;display:flex;flex-direction:column;gap:5px}
.p-score .lin{display:grid;grid-template-columns:64px 1fr 30px;gap:7px;align-items:center;
  font-family:var(--mono);font-size:9px;color:var(--pt3);letter-spacing:.02em}
.p-score .lin b{color:var(--pt2);font-weight:500;text-align:right}

.p-quad{position:relative;height:100%;min-height:150px;background:
  linear-gradient(var(--pl2) 1px,transparent 1px) 0 0/100% 25%,
  linear-gradient(90deg,var(--pl2) 1px,transparent 1px) 0 0/25% 100%;
  border:1px solid var(--pl);border-radius:7px}
.p-quad .pt{position:absolute;width:20px;height:20px;border-radius:6px;display:grid;place-items:center;
  font-family:var(--mono);font-size:8px;font-weight:600;color:#fff;transform:translate(-50%,50%);
  box-shadow:0 2px 7px rgba(0,0,0,.16)}
.p-quad .eixo{position:absolute;font-family:var(--mono);font-size:8px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--pt3)}
.p-quad .eixo.x{bottom:5px;right:8px}
.p-quad .eixo.y{top:6px;left:8px}

.p-cita{border-left:2px solid var(--green);padding:7px 0 7px 10px;margin-top:9px}
.p-cita .q{font-size:11px;color:var(--pt2);line-height:1.45}
.p-cita .f{font-family:var(--mono);font-size:8.5px;color:var(--pt3);margin-top:5px;letter-spacing:.04em}

.p-msg{display:flex;gap:9px;padding:10px 0}
.p-msg .av{flex:none;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;
  font-family:var(--mono);font-size:8.5px;font-weight:600}
.p-msg .av.u{background:var(--pl2);color:var(--pt2)}
.p-msg .av.w{background:var(--navy);color:#fff}
.p-msg .co{flex:1;min-width:0;font-size:11.5px;line-height:1.5;color:var(--pt2)}
.p-msg .co b{color:var(--pt);font-weight:500}

.p-spark{display:flex;align-items:flex-end;gap:2px;height:34px}
.p-spark i{flex:1;background:var(--pl2);border-radius:1.5px 1.5px 0 0;min-height:2px}
.p-spark i.on{background:var(--navy)}
.p-spark i.g{background:var(--green)}

.p-mapa{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:6px}
.p-mapa .cel{border:1px solid var(--pl);border-radius:6px;padding:6px 7px;background:#fff}
.p-mapa .cel .n{font-size:10px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-mapa .cel .v{font-family:var(--mono);font-size:9px;color:var(--pt3);margin-top:2px}

/* ========================================================= funcionalidades
   Livro-razao, nao grade de cartoes: numero, nome, o que resolve e a prova.
   A linha inteira reage; o indicador da esquerda cresce quando ela entra. */

/* ================================================================ escala */
.wf-num__c{padding:var(--s6) var(--s5) var(--s6) 0;border-right:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark)}
.wf-num__c:nth-child(4n){border-right:0}
.wf-num__v{font-family:var(--mono);font-size:clamp(2rem,4.1vw,3.25rem);font-weight:500;
  letter-spacing:-.055em;color:#fff;line-height:1;font-variant-numeric:tabular-nums;
  display:flex;align-items:baseline;gap:3px}
.wf-num__v .su{font-size:.44em;letter-spacing:-.02em;color:var(--green)}
.wf-num__k{font-size:.9375rem;color:var(--on-dark);margin-top:var(--s3);font-weight:450;letter-spacing:-.01em}
.wf-num__f{font-family:var(--mono);font-size:.625rem;letter-spacing:.07em;color:var(--on-dark-3);
  margin-top:7px;line-height:1.5}

/* barras de composicao do sistema financeiro, dado real do Unicad */
@media (max-width:1024px){.wf-comp>div:first-child{position:static}}
.wf-comp__lin{display:grid;grid-template-columns:minmax(0,1fr) 54px;gap:var(--s4);align-items:center;
  padding:9px 0;border-bottom:1px solid var(--line-dark-2)}
.wf-comp__lin .nm{font-size:.875rem;color:var(--on-dark-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wf-comp__lin .qt{font-family:var(--mono);font-size:.8125rem;color:#fff;text-align:right;
  font-variant-numeric:tabular-nums}
.wf-comp__lin .tr{grid-column:1/-1;height:3px;border-radius:2px;background:rgba(255,255,255,.09);overflow:hidden;margin-top:7px}
.wf-comp__lin .tr i{display:block;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--blue),var(--green));
  transition:width 1.3s var(--ease-out)}

/* ============================================== grafo de inteligencia */
.wf-grafo{position:relative;border:1px solid var(--line);border-radius:var(--raio);
  background:var(--white);overflow:hidden}
.wf-grafo__janela{position:relative}
.wf-grafo__rolo{position:relative}
.wf-grafo svg{display:block;width:100%;height:auto}
/* orbitas e setores: o fundo diz "dois saltos, quatro familias" */
.wf-grafo__orb{fill:none;stroke:var(--line);stroke-dasharray:3 5}
.wf-grafo__setor{fill:none;stroke-width:1.5;stroke-opacity:.35;stroke-linecap:round}
.wf-grafo__grupo{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:-.01em;fill-opacity:.9}
.wf-grafo__grupo[fill="#2FF08A"]{fill:#17B865}
/* as ligacoes se desenham quando a secao entra: a leitura e "isto se
   conecta", nao "isto e um desenho". Os nos chegam por anel, de dentro
   para fora, na mesma logica da consulta. */
.wf-grafo .wf-grafo__ar{stroke-dasharray:1400;stroke-dashoffset:1400}
.wf-grafo.vis .wf-grafo__ar{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s var(--ease-out)}
.wf-grafo .wf-grafo__corpo{opacity:0;transform:scale(.55);transform-box:fill-box;transform-origin:center}
.wf-grafo.vis .wf-grafo__corpo{opacity:1;transform:none;
  transition:opacity .55s var(--ease-out),transform .7s var(--ease-out);
  transition-delay:calc(var(--anel)*.28s + var(--i)*.018s)}
@media (prefers-reduced-motion:reduce){
  .wf-grafo .wf-grafo__ar{stroke-dashoffset:0}
  .wf-grafo .wf-grafo__corpo{opacity:1;transform:none}
}
.wf-grafo__no{--i:0;--anel:0;cursor:default;outline:none;transition:opacity .3s}
.wf-grafo__no circle{stroke-width:2;transition:fill-opacity .3s,stroke-width .3s}
.wf-grafo__no text{font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:-.01em;
  fill:var(--txt-2);transition:fill .3s,opacity .3s}
.wf-grafo__no text.rot--centro{fill:#fff}
.wf-grafo__no .rot--num{font-size:20px;font-weight:600;letter-spacing:-.025em}
.wf-grafo__no .rot--sub{font-size:11.5px;font-weight:500;fill-opacity:.82}
.wf-grafo__no.on circle{stroke-width:3.2;fill-opacity:.22}
.wf-grafo__no.on text{fill:var(--txt);font-weight:600}
.wf-grafo__no:focus-visible circle{stroke-width:3.2}
.wf-grafo__no.off{opacity:.2}
.wf-grafo__ar{stroke:var(--line-3);stroke-width:1.3;fill:none;
  transition:stroke .3s,stroke-width .3s,opacity .3s}
.wf-grafo__ar.on{stroke:var(--blue);stroke-width:2.2}
.wf-grafo__ar.off{opacity:.14}
/* a barra de baixo: ficha do no em foco a esquerda, legenda a direita */
/* ==================================================== what / where / who */


/* ============================================================== reports */
.wf-rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.wf-rel__c{display:flex;flex-direction:column;background:var(--white);
  transition:background-color .4s;min-width:0}
.wf-rel__c:hover{background:var(--paper)}
.wf-rel__capa{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--ink)}
.wf-rel__capa img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease-out),filter .6s;filter:saturate(.85)}
/* capa de livro (retrato) dentro da moldura 16:9: cabe inteira em vez de
   ser recortada, com uma folga em cima e em baixo para nao encostar */
.wf-rel__capa img.e-retrato{object-fit:contain;padding:14px 0;
  background:linear-gradient(140deg,var(--ink),var(--ink-3))}
.wf-rel__c:hover .wf-rel__capa img{transform:scale(1.045);filter:saturate(1)}
.wf-rel__corpo{padding:var(--s5);display:flex;flex-direction:column;flex:1;gap:var(--s3)}
.wf-rel__meta{display:flex;flex-wrap:wrap;gap:var(--s3);font-size:.8125rem;color:var(--txt-3)}
.wf-rel__c h3{font-size:1.25rem;font-weight:600;letter-spacing:-.03em;line-height:1.2}
.wf-rel__c p{font-size:.9375rem;line-height:1.55;color:var(--txt-2)}
.wf-rel__c .wf-link{margin-top:auto;padding-top:var(--s3)}
.wf-rel__idiomas{display:flex;gap:7px;align-items:center}
.wf-rel__idiomas span{display:grid;place-items:center;line-height:0}

/* =========================================================== newsletter */
/* Dois blocos: a banda de assinatura e tres edicoes com capa. Era uma
   grelha de duas colunas, com o campo espremido ao lado de cinco titulos. */
.wf-nl{display:flex;flex-direction:column;gap:clamp(40px,5vw,60px)}

/* ------------------------------------------------ banda de assinatura */
.wf-nl__assina{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(22px,4vw,48px);align-items:center;
  padding:clamp(26px,3.2vw,38px);border-radius:var(--raio);
  border:1px solid var(--line-dark);
  background:linear-gradient(135deg,rgba(47,240,138,.08),rgba(10,159,245,.05) 52%,transparent 78%),var(--ink-2)}
.wf-nl__assina h3{font-size:clamp(1.1875rem,2.1vw,1.5rem);font-weight:600;
  letter-spacing:-.03em;line-height:1.18;color:var(--on-dark)}
.wf-nl__assina p{margin-top:10px;font-size:.9375rem;line-height:1.6;color:var(--on-dark-2);max-width:44ch}

/* O EMBED DO SUBSTACK, RECORTADO. Ver o comentario longo em home.js.

   A LARGURA E FIXA EM 340px, E ISSO NAO E ESTETICA SO. O embed muda de
   layout com a largura: acima de ~360px a descricao cabe numa linha a
   menos e o formulario sobe 10px. Enquanto a caixa era elastica, o
   deslocamento certo dependia da largura da coluna, e a media query que
   tentava adivinha-lo olhava para a janela, nao para a caixa. Fixando a
   largura, o deslocamento passa a ser um numero so.

   340px tambem e onde o preto fica justo: o formulario ocupa quase toda a
   caixa, com uma margem estreita e simetrica, em vez da tarja larga que
   sobrava numa coluna de 550px. */
.wf-nl__caixa{position:relative;width:100%;max-width:340px;height:60px;
  overflow:hidden;border-radius:14px;background:#000;
  box-shadow:0 0 0 1px rgba(47,240,138,.28),0 16px 34px -18px rgba(0,0,0,.9)}
/* O iframe acompanha a largura da caixa, que nunca passa de 340px. Assim o
   embed fica SEMPRE no layout estreito, e o deslocamento e um numero so,
   valido no telemovel e no computador. Fixar 340px no iframe e deixar a
   caixa encolher no telemovel punha o formulario a transbordar por fora da
   moldura preta, com a borda do campo cortada dos dois lados. */
.wf-nl__sub{position:absolute;left:0;top:-336px;
  width:100%;height:500px;border:0;background:transparent;display:block;
  /* DUAS COISAS NUM FILTRO SO, porque conteudo de outra origem nao se
     estiliza de outro jeito.

     `invert(1)` escurece: o embed sai sempre em claro (o Substack ignora
     `color-scheme`, e o `transparent=1` da URL nao faz nada, testado), e
     sem inverter sobraria uma tarja branca no meio da seccao escura.

     `hue-rotate(88deg)` pinta o botao deles de verde. Invertido, o roxo
     #4f46e5 cai num matiz de ~64 graus; somando 88 chega aos ~152 do verde
     da marca. Como so o botao tem cor depois do recorte (campo e texto sao
     neutros, e matiz nao mexe com neutro), o giro atinge o botao e mais
     nada. O `saturate(1.4)` recupera o brilho que a inversao come.

     Os angulos foram escolhidos a olho, comparando com o verde da marca ao
     lado: `hue-rotate` do CSS e uma aproximacao por matriz, nao uma rotacao
     de matiz de verdade, entao a conta acima da a direccao, nao o valor. */
  filter:invert(1) hue-rotate(88deg) saturate(1.4)}
.wf-nl__nota{margin-top:12px;max-width:340px;font-size:.75rem;line-height:1.5;color:var(--on-dark-3)}
.wf-nl__nota a{color:var(--on-dark-2);text-decoration:underline;text-underline-offset:3px}
.wf-nl__nota a:hover{color:var(--green)}

/* ------------------------------------------------ cabecalho do bloco */
.wf-nl__cab{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s4);padding-bottom:var(--s4);margin-bottom:var(--s5);
  border-bottom:1px solid var(--line-dark)}
.wf-nl__cab h3{font-size:1.0625rem;font-weight:600;letter-spacing:-.02em;color:var(--on-dark)}
.wf-nl__cab .wf-link{flex:none}

/* ---------------------------------------------- destaques, com a capa */
.wf-nl__dest{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
.wf-nl__dc{display:flex;flex-direction:column;border:1px solid var(--line-dark);
  border-radius:var(--raio);overflow:hidden;background:var(--ink-2);
  transition:border-color .35s,transform .45s var(--ease-out)}
.wf-nl__dc:hover{border-color:rgba(255,255,255,.22);transform:translateY(-3px)}
.wf-nl__dc__capa{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--ink)}
.wf-nl__dc__capa img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1s var(--ease-out)}
.wf-nl__dc:hover .wf-nl__dc__capa img{transform:scale(1.04)}
.wf-nl__dc__corpo{display:flex;flex-direction:column;flex:1;gap:9px;padding:var(--s5)}
.wf-nl__dc__meta{display:flex;align-items:center;gap:9px;font-size:.8125rem;
  font-weight:500;color:var(--green)}
.wf-nl__dc__meta i{width:3px;height:3px;border-radius:50%;background:var(--on-dark-3);flex:none}
.wf-nl__dc h4{font-size:1.0625rem;font-weight:600;letter-spacing:-.022em;
  line-height:1.34;color:var(--on-dark)}
.wf-nl__dc__lg{font-size:.75rem;line-height:1.45;color:var(--on-dark-3)}
.wf-nl__dc .lk{display:inline-flex;align-items:center;gap:7px;margin-top:auto;
  padding-top:var(--s3);font-size:.8125rem;font-weight:500;color:var(--on-dark-2);
  transition:color .3s}
.wf-nl__dc:hover .lk{color:var(--green)}

/* ================================================================== cta */
.wf-cta{position:relative;overflow:hidden;background:var(--ink);color:var(--on-dark);
  padding-block:clamp(76px,10vw,148px);text-align:center}
.wf-cta__malha{position:absolute;inset:0;pointer-events:none;opacity:.45;
  background-image:linear-gradient(var(--line-dark-2) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line-dark-2) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 70% 90% at 50% 50%,#000,transparent 72%);
  mask-image:radial-gradient(ellipse 70% 90% at 50% 50%,#000,transparent 72%)}
.wf-cta h2{font-size:clamp(2.125rem,5vw,3.75rem);font-weight:600;letter-spacing:-.04em;
  line-height:1.03;max-width:19ch;margin-inline:auto;position:relative}
.wf-cta p{margin:var(--s5) auto 0;max-width:56ch;position:relative}
.wf-cta__acoes{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:center;
  margin-top:var(--s6);position:relative}

/* =============================================================== rodape */
.wf-pe{background:var(--ink);color:var(--on-dark-2);border-top:1px solid var(--line-dark);
  padding-block:var(--s7) var(--s5)}
.wf-pe__grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:var(--s6) var(--s5);padding-bottom:var(--s7)}
.wf-pe__marca svg{height:26px;width:auto;margin-bottom:var(--s4)}
.wf-pe__marca p{font-size:.875rem;line-height:1.6;color:var(--on-dark-3);max-width:34ch}
.wf-pe__tt{font-size:.8125rem;font-weight:600;letter-spacing:-.005em;
  color:var(--on-dark-3);margin-bottom:var(--s4)}
.wf-pe a{display:block;padding:6px 0;font-size:.875rem;color:var(--on-dark-2);transition:color .25s}
.wf-pe a:hover{color:#fff}
/* sans, como o resto da pagina: mono com tracking no rodape era o mesmo
   tique visual que ja saiu dos meses do grafico e dos termos do metodo */
.wf-pe__fim{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s4);
  padding-top:var(--s5);border-top:1px solid var(--line-dark);
  font-size:.8125rem;color:var(--on-dark-3)}
.wf-pe__soc{display:flex;gap:var(--s3)}
.wf-pe__soc a{width:34px;height:34px;border-radius:999px;border:1px solid var(--line-dark);
  display:grid;place-items:center;padding:0}
.wf-pe__soc a:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.06)}
.wf-pe__soc svg{width:15px;height:15px}

/* ======================================================== barra de progresso */
.wf-progresso{position:fixed;top:0;left:0;height:2px;z-index:101;width:0;
  background:linear-gradient(90deg,var(--blue),var(--green));transition:width .1s linear}

/* ============================================== escala do palco do demo
   A replica e desenhada numa tela LOGICA de tamanho fixo e depois reduzida
   por `transform: scale()`. Isso mantem proporcao, espessura de filete e
   tamanho relativo de fonte identicos em qualquer largura — reflow faria a
   tabela de 9 colunas virar outra coisa a cada quebra, e o demo deixaria
   de parecer a plataforma. O fator vem do JS (`--k`). */
/* --lw e --lh sem unidade de proposito: `aspect-ratio` so aceita numero
   puro, e o comprimento sai de `calc(var(--lw) * 1px)` onde e preciso. */

/* No celular a replica troca de forma, nao de escala: e o layout que a
   propria plataforma usa abaixo de 900px (rail vira barra inferior, coluna
   unica, tabela rola). Encolher a tela de 1240px para 340 deixaria o texto
   em 3px, o que nao demonstra nada. */
.p--m{flex-direction:column}
.p--m .p-rail{flex-direction:row;width:100%;height:52px;padding:0 8px;gap:2px;
  order:3;justify-content:space-around;align-items:center}
.p--m .p-rail .lg,.p--m .p-rail .sep,.p--m .p-rail .av{display:none}
.p--m .p-rail .ic{width:42px;height:38px}
.p--m .p-rail .ic svg{width:17px;height:17px}
.p--m .p-main{order:1;flex:1;min-height:0}
.p--m .p-busca{max-width:none}
.p--m .p-abas{overflow:hidden}
.p--m .p-fx{flex-direction:column}
.p--m .p-filtros{width:100%;padding-right:0;padding-bottom:11px;border-right:0;
  border-bottom:1px solid var(--pl);flex-direction:row;flex-wrap:wrap;gap:9px}
.p--m .p-g4{grid-template-columns:repeat(2,minmax(0,1fr))}
.p--m .p-g3{grid-template-columns:repeat(2,minmax(0,1fr))}
.p--m .p-g2{grid-template-columns:minmax(0,1fr)}

/* ========================================================= responsivo */
@media (max-width:1180px){
  .wf-hero__grid{grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);gap:var(--s6)}
  .wf-num__c:nth-child(2n){border-right:0}
  .wf-pe__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wf-pe__marca{grid-column:1/-1}
}

/* A BARRA TROCA PELO BOTAO DE MENU ANTES DO RESTO DO LAYOUT, e por isso
   tem media query propria em vez de dividir a de 1024.

   Com a entrada de "Contato" o menu passou a pedir 925px, e a 1025px a
   barra so oferece 906: os itens comecavam a se espremer. Medido, nao
   estimado. A 1100px sobram 56px, folga suficiente para o EN e o ES, que
   nao tem exatamente a mesma largura do PT.

   Entre 1025 e 1100 nao se perde nada: a folha lateral tem os mesmos
   quatro grupos, mais o "Entrar" e o "Comecar agora". */
@media (max-width:1100px){
  .wf-nav__menu,.wf-nav__cta,.wf-nav__login{display:none}
  .wf-nav__burger{display:flex}
  .wf-nav__in{gap:var(--s3)}
  .wf-lang{margin-left:auto}
}

@media (max-width:1024px){
  .wf-hero{padding-top:calc(var(--nav-h) + 46px)}
  .wf-hero__grid{grid-template-columns:minmax(0,1fr);gap:var(--s7)}
  .wf-marca{min-height:min(74vw,380px);order:2}
  .wf-nl__assina{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  .wf-nl__dest{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wf-nl__assina{padding-inline:clamp(16px,4vw,26px)}
}

@media (max-width:760px){
  :root{--nav-h:62px}
  .wf-hero h1{font-size:clamp(2.25rem,10vw,3rem);letter-spacing:-.038em}
  .wf-hero__acoes .wf-btn{flex:1 1 100%}
  .wf-sec{padding-block:clamp(56px,11vw,84px)}
  .wf-num__c{border-right:0;padding-right:0;padding-block:var(--s5)}
  .wf-rel{grid-template-columns:minmax(0,1fr)}
  .wf-nl__dest{grid-template-columns:minmax(0,1fr)}
  /* Num ecra de 375px a caixa fica com 301px e o formulario do Substack,
     que tem largura propria, encosta nas duas bordas. O campo avanca 6px
     para cada lado do preenchimento do cartao, e so ele: o texto acima
     mantem a margem. */
  .wf-nl__caixa{width:auto;margin-inline:-6px}
  .wf-pe__grid{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  .wf-pe__fim{flex-direction:column;align-items:flex-start;gap:var(--s4)}
  /* os trilhos viram tira rolavel; a barra de rolagem some, o gesto fica */
  /* o grafo nao encolhe ate ficar ilegivel: vira uma tira que se arrasta
     de lado, e a barra de baixo empilha */
  .wf-grafo__rolo{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .wf-grafo__rolo::-webkit-scrollbar{display:none}
  /* o esbatimento diz que ha mais desenho a direita; `pointer-events:none`
     para nao roubar o arrasto de quem toca justamente ali */
  .wf-grafo__janela::after{content:'';position:absolute;top:0;right:0;bottom:0;width:56px;
    pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,0),var(--white))}
  .wf-grafo__rolo svg{min-width:860px}
}

@media (max-width:420px){
  .wf-sheet a.item{font-size:1.1875rem}
  .wf-sheet a.item .dd{display:none}
}

/* toque: hover nao existe, entao o que dependia dele vira estado padrao */
@media (hover:none){
  .wf-rel__c:hover .wf-rel__capa img{transform:none}
}

/* ================================================= movimento reduzido
   Nada some: o que era animado passa a nascer no estado final. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js .rv{opacity:1;transform:none}
  .wf-hero h1 .lin>span{transform:none}
  .wf-hero__sub,.wf-hero__acoes{opacity:1}
  .wf-marca .haste{transform:none!important}
}

/* impressao: o site vira documento, sem moldura escura nem elemento so de tela */
@media print{
  .wf-nav,.wf-sheet,.wf-progresso,.wf-cta__acoes{display:none}
  body,.wf-sec--dark,.wf-hero,.wf-cta,.wf-pe{background:#fff!important;color:#000!important}
  .wf-sec{padding-block:24px;page-break-inside:avoid}
}

/* lista de perguntas ao lado do grafo */
.wf-perg{margin-top:var(--s6);display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4)}
/* o titulo da lista em caixa normal: e uma frase, nao uma etiqueta */
.wf-perg .wf-micro{font-family:var(--sans);text-transform:none;letter-spacing:0;font-size:.9375rem;font-weight:500}
.wf-perg ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;
  background:var(--line);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.wf-perg li{display:flex;gap:12px;align-items:flex-start;padding:var(--s5);background:var(--paper);
  font-size:.9375rem;line-height:1.45;color:var(--txt-2);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  transition:background-color .35s,color .35s}
.wf-perg li:hover{background:var(--white);color:var(--txt)}
.wf-perg li span{flex:none;color:var(--blue);margin-top:2px}

/* capa de report ausente: bloco tipografico, nunca imagem esticada */
.wf-rel__semcapa{width:100%;height:100%;display:grid;place-items:center;
  /* sobre o extremo claro deste gradiente nem o alfa novo passa de 4.5,
     entao aqui a tinta e a de apoio, mais forte */
  background:linear-gradient(140deg,var(--ink),var(--ink-3));color:var(--on-dark-2);
  font-family:var(--mono);font-size:.75rem;letter-spacing:.2em;text-transform:uppercase}

/* atalho de teclado para pular a navegacao */
.wf-pular{position:absolute;left:-9999px;top:0;z-index:200;padding:12px 18px;border-radius:0 0 10px 0;
  background:var(--ink);color:#fff;font-size:.875rem}
.wf-pular:focus{left:0}

/* ========================================================== antecipacao
   Composicao no formato da referencia: eixo de tempo comum, metade de cima
   escura e metade de baixo clara, nuvem que estreita, faixa em seta com o
   rotulo dentro, bloco terminal.

   AS FORMAS SAO `clip-path`, e nao SVG. A nuvem e um trapezio que afina para
   a direita, com desvanecimento a esquerda; a faixa e um retangulo com a
   ponta direita cortada em seta; o bloco terminal e reto. Assim o texto
   continua sendo texto de verdade: quebra linha sozinho, herda a tipografia
   do site e e lido por leitor de tela sem rotulo inventado.

   Cor com significado: cinza e o mercado que ve o fato sem nome, azul e o
   sinal publico que a plataforma le, verde e o alerta, e o unico tom quente
   e o `--tarde`, no momento em que o assunto vira comunicado. */
.cb{position:relative}


/* regua de meses, sem ano: as marcas sao trimestrais e o ano repetia-se de
   tres em tres sem informar nada */
.cb-eixo{position:relative;height:16px;margin-bottom:7px}
.cb-eixo span{position:absolute;transform:translateX(-50%);white-space:nowrap;
  /* sans em minuscula, sem tracking: mono minusculo com letra espacada e o
     tique visual que faz uma legenda parecer gerada */
  font-family:var(--sans);font-size:.6875rem;font-weight:400;letter-spacing:0;
  color:var(--on-dark-3)}
.cb-eixo span.e-inicio{transform:none}
.cb-eixo span.e-fim{transform:translateX(-100%)}
.cb-quadro{position:relative;isolation:isolate}
.cb-grade{position:absolute;inset:0;pointer-events:none;z-index:3}
.cb-grade i{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.09)}
/* A pista preditiva deixou de ser uma placa branca. A inversao continua a
   existir, mas dentro da paleta: navy um degrau acima do fundo da seccao,
   com um halo azul por baixo do cometa. A placa clara era o unico ponto da
   pagina que cortava o escuro, e era tambem o que mais lembrava a
   referencia em vez da W Fintechs. */
.cb-metade--clara~.cb-grade i{background:rgba(255,255,255,.07)}

.cb-metade{position:relative}
.cb-metade--escura{background:var(--ink);padding:var(--s5) 0 var(--s4)}
.cb-metade--clara{background:var(--navy);padding:var(--s4) 0 var(--s5);
  border-top:1px solid rgba(10,159,245,.28);
  /* sangra ate as bordas da secao, como a divisao da referencia */
  margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut)}
/* o halo: diz "esta metade enxerga", sem precisar de mudar de cor de fundo */
.cb-metade--clara::before{content:'';position:absolute;left:0;top:0;width:46%;height:100%;
  background:radial-gradient(120% 80% at 0% 50%,rgba(10,159,245,.22),transparent 70%);
  pointer-events:none}
.cb-metade--escura{margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut)}

.cb-varre{position:relative;height:150px}
.cb-metade--clara .cb-varre{height:132px}

/* nuvem que estreita: trapezio com desvanecimento a esquerda */
.cb-cometa{position:absolute;left:0;top:0;bottom:0;
  clip-path:polygon(0 0,100% 36%,100% 64%,0 100%)}
.cb-cometa--escuro{background:linear-gradient(90deg,rgba(255,255,255,.02),rgba(255,255,255,.07))}
.cb-cometa--claro{background:linear-gradient(90deg,rgba(10,159,245,.14),rgba(124,207,232,.78))}
/* Os pontos vivem FORA da nuvem, numa camada irma de mesma largura. Dentro
   dela, o `clip-path` que da a forma de cometa cortava os rotulos de texto
   pela metade. */
.cb-pontos{position:absolute;left:0;top:0;bottom:0;z-index:2}
.cb-pt{position:absolute;width:9px;height:9px;border-radius:50%;transform:translate(-50%,-50%);
  background:var(--on-dark-3)}
.cb-pt u{position:absolute;left:15px;top:50%;transform:translateY(-50%);text-decoration:none;
  font-family:var(--mono);font-size:.75rem;color:var(--on-dark-3)}
.cb-pt--nome{background:var(--blue)}
.cb-pt--nome u{font-family:var(--sans);font-size:.8125rem;font-weight:500;color:var(--on-dark-2);
  white-space:nowrap}

/* faixa em seta, com a ponta cortada a direita */
.cb-banda{position:absolute;top:50%;height:44px;transform:translateY(-50%);
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 50%,calc(100% - 18px) 100%,0 100%);
  display:flex;align-items:center;justify-content:center}
.cb-banda span{font-family:var(--sans);font-size:.9375rem;font-weight:600;letter-spacing:-.01em;
  padding-right:18px;white-space:nowrap}
.cb-banda--escura{background:#1b2534}
.cb-banda--escura span{color:var(--on-dark)}
.cb-banda--reage{background:#4a5464}
.cb-banda--reage span{color:#fff}
.cb-banda--le{background:#7ccfe8}
.cb-banda--le span{color:var(--ink)}

/* bloco terminal, reto */
.cb-bloco{position:absolute;top:50%;height:44px;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center}
.cb-bloco span{font-family:var(--sans);font-size:.9375rem;font-weight:600;letter-spacing:-.01em;
  white-space:nowrap}
.cb-bloco--tarde{background:var(--tarde)}
.cb-bloco--tarde span{color:#fff}
.cb-bloco--alerta{background:var(--green)}
.cb-bloco--alerta span{color:var(--ink)}

/* o momento em que o assunto vira comunicado */
.cb-sinal{position:absolute;top:50%;transform:translateY(-50%);z-index:2}
.cb-sinal em{position:absolute;right:16px;bottom:14px;text-align:right;white-space:nowrap;
  font-style:normal;font-family:var(--sans);font-size:.8125rem;font-weight:500;line-height:1.45;
  color:#d99a8f}
.cb-sinal i{position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;
  background:var(--tarde);box-shadow:0 0 0 5px rgba(168,64,47,.2)}
.cb-sinal b{position:absolute;left:50%;top:32px;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-dark-2)}

/* rotulo de cada inteligencia, junto da fronteira */
.cb-faixa{display:block;font-family:var(--sans);font-size:.9375rem;font-weight:600;
  letter-spacing:-.012em}
/* a esquerda, e nao ao centro: centradas, colidiam com o rotulo da medida */
.cb-faixa--escura{color:var(--on-dark);margin-top:var(--s3)}
.cb-faixa--clara{color:var(--on-dark);margin-bottom:var(--s3)}

/* a medida entre o alerta e o comunicado */
.cb-medida{position:absolute;left:0;top:50%;height:104px;transform:translateY(-50%);z-index:4;
  border-left:1.5px solid var(--green);border-right:1.5px solid var(--green)}
.cb-medida::before{content:'';position:absolute;left:0;right:0;top:50%;border-top:1.5px dashed var(--green)}
.cb-medida span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:var(--ink);padding:3px 12px;white-space:nowrap;font-family:var(--mono);
  font-size:.8125rem;font-weight:600;letter-spacing:-.01em;color:var(--green)}


/* ENTRADA: DUAS VARREDURAS, EM SEQUENCIA E NA MESMA VELOCIDADE.

   Primeiro a metade de cima, inteira. Depois a de baixo, percorrendo o mesmo
   eixo no mesmo ritmo, e parando bem antes porque o alerta acontece em
   dezembro de 2024. E a ordem da referencia, em que a metade reativa entra
   em cena antes da preditiva.

   Linear, sem suavizacao: a varredura representa tempo passando, e tempo nao
   acelera no fim. */
:root{--cb-dur:2.2s;--cb-i-cima:.35s;--cb-i-baixo:2.75s}
.cb .cb-eixo span,.cb .cb-grade,.cb .cb-faixa{opacity:0;transition:opacity .5s var(--ease-out)}
.cb.vis .cb-eixo span,.cb.vis .cb-grade,.cb.vis .cb-faixa{opacity:1}
.cb .cb-varre{clip-path:inset(0 100% 0 0)}
.cb.vis .cb-metade--escura .cb-varre{clip-path:inset(0 -30% 0 0);
  transition:clip-path var(--cb-dur) linear var(--cb-i-cima)}
/* para em 47%, que e onde o bloco de alerta acaba: a velocidade e a mesma,
   o percurso e que e mais curto */
.cb.vis .cb-metade--clara .cb-varre{clip-path:inset(0 53% 0 0);
  transition:clip-path calc(var(--cb-dur) * .47) linear var(--cb-i-baixo)}
.cb .cb-medida{opacity:0}
.cb.vis .cb-medida{opacity:1;transition:opacity .6s var(--ease-out) 4.2s}

@media (prefers-reduced-motion:reduce){
  .cb .cb-varre{clip-path:none}
  .cb .cb-eixo span,.cb .cb-grade,.cb .cb-faixa,.cb .cb-medida{opacity:1}
}

@media (max-width:900px){
  .cb-varre{height:126px}
  .cb-metade--clara .cb-varre{height:118px}
  .cb-banda,.cb-bloco{height:38px}
  .cb-banda span,.cb-bloco span{font-size:.8125rem}
  .cb-pt--nome u{font-size:.6875rem}
  .cb-sinal em{font-size:.6875rem;bottom:10px}
  .cb-medida span{font-size:.6875rem;padding:3px 8px}
}
/* A lista de momentos so existe no telemovel: la a linha do tempo continua a
   ser desenhada, mas quem le os nomes e a lista, nao a pista. */
.cb-passos{display:none;list-style:none;margin:var(--s3) 0 0;padding:0}
.cb-passo{position:relative;padding-left:18px;font-size:.8125rem;line-height:1.5;
  color:var(--txt-2)}
.cb-passo + .cb-passo{margin-top:5px}
.cb-passo::before{content:'';position:absolute;left:0;top:.55em;width:7px;height:7px;
  border-radius:50%;background:currentColor}
.cb-metade--escura .cb-passo{color:var(--on-dark-2)}
.cb-passo--sinal{color:var(--on-dark)}
.cb-passo--tarde{color:var(--tarde)}
.cb-passo--lido,.cb-passo--le{color:var(--blue)}
.cb-passo--alerta{color:var(--green);font-weight:600}
.cb-metade--clara .cb-passo{color:var(--on-dark-2)}

@media (max-width:600px){
  .cb-varre{height:118px}
  .cb-metade--clara .cb-varre{height:118px}
  .cb-passos{display:block}
  .cb-banda span,.cb-bloco span,.cb-pt u,.cb-sinal em,.cb-sinal b{display:none}
  .cb-medida span{font-size:.625rem;padding:2px 6px}
}

/* ================================================================== tira
   Faixa de marcas entre o hero e o primeiro capitulo.

   Fundo claro de proposito: duas das marcas (Itau, Mercado Pago) sao desenhos
   em negativo, com o nome vazado dentro do bloco de cor. Viradas a silhueta
   branca sobre navy viravam um bloco solido ilegivel, e em cinza escuro
   sumiam no fundo. Em papel, um `grayscale` unico serve as sete, e o hover
   devolve a cor original. */
.wf-tira{background:var(--paper);padding:var(--s7) 0 var(--s7)}
.wf-tira__tt{margin:0 0 var(--s6);text-align:center;font-size:.9375rem;font-weight:600;
  color:var(--txt)}
.wf-tira__lista{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:var(--s5) 34px;margin:0 auto;padding:0;list-style:none}
.wf-tira__c{display:flex;flex-direction:column;align-items:center;gap:11px}
.wf-tira__p{display:grid;place-items:center;height:52px}
.wf-tira__p img{max-width:138px;max-height:52px;width:auto;height:auto;display:block;
  filter:grayscale(1) contrast(.35) brightness(1.25);opacity:.9;
  transition:filter .35s var(--ease-out),opacity .35s var(--ease-out)}
.wf-tira__n{max-width:170px;font-size:.75rem;line-height:1.3;text-align:center;
  color:var(--txt-3);transition:color .35s var(--ease-out)}
.wf-tira__c:hover .wf-tira__p img{filter:none;opacity:1}
.wf-tira__c:hover .wf-tira__n{color:var(--txt-2)}

/* Sem rato nao ha como revelar a cor: no telemovel as marcas ja entram
   coloridas em vez de ficarem presas no cinza. */
@media (hover:none){
  .wf-tira__p img{filter:none;opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .wf-tira__p img,.wf-tira__n{transition:none}
}

/* Quatro por linha quando a fila deixa de caber. Limitar a largura da lista
   nao servia: como as marcas tem larguras muito diferentes, o mesmo limite
   dava 4+4 com oito marcas e 5+2 com sete. A grelha fixa a contagem em vez
   da largura, e a quebra passa a ser a mesma seja qual for o conjunto. */
@media (max-width:1180px){
  .wf-tira__lista{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    justify-items:center;max-width:660px}
}

@media (max-width:640px){
  .wf-tira{padding:var(--s6) 0}
  /* duas colunas na mesma grelha do desktop estreito: manter a largura em
     percentagem aqui dentro atirava as marcas para linhas de uma so */
  .wf-tira__lista{grid-template-columns:repeat(2,minmax(0,1fr));max-width:330px;gap:20px 18px}
  .wf-tira__c{width:100%;max-width:170px}
  /* numero impar de marcas: a ultima ficaria encostada a coluna da esquerda
     em vez de centrada por baixo das outras */
  .wf-tira__c:last-child:nth-child(odd){grid-column:1 / -1}
  .wf-tira__p{height:42px}
  .wf-tira__p img{max-width:100%;max-height:42px}
  .wf-tira__n{font-size:.6875rem}
}

/* ================================================================== tour
   Cartaz sob o hero e a camada guiada que ele abre. */
.wf-tour-sec{background:var(--ink);padding:0 0 var(--s7)}
/* sem `text-align:center` aqui: ele descia por heranca ate dentro da tela da
   aplicacao e centrava o titulo do screener, que la e alinhado a esquerda.
   O botao ja se centra sozinho pelo `left:50%` mais `translateX(-50%)`. */
.wf-tour-cartaz{position:relative}

/* A moldura corta a tela por baixo e desvanece para o fundo: e um cartaz,
   nao um recorte de ecra inteiro. */
.wf-tour-cartaz__moldura{position:relative;max-width:1040px;margin:0 auto;
  border:1px solid var(--line-dark);border-bottom:0;border-radius:14px 14px 0 0;
  background:#fff;overflow:hidden;box-shadow:0 -1px 60px rgba(10,159,245,.09)}
.wf-tour-cartaz__barra{display:flex;gap:6px;align-items:center;height:30px;padding:0 13px;
  background:#f2f1ee;border-bottom:1px solid #e6e4df}
.wf-tour-cartaz__barra i{width:8px;height:8px;border-radius:50%;background:#d3d0c9;flex:none}
.wf-tour-cartaz__palco{position:relative;width:100%;height:calc(var(--lh) * var(--k, 1) * 1px);
  max-height:376px;overflow:hidden}
.wf-tour-cartaz__tela{position:absolute;inset:0 auto auto 0;
  width:calc(var(--lw) * 1px);height:calc(var(--lh) * 1px);
  transform:scale(var(--k,1));transform-origin:0 0}
.wf-tour-cartaz__moldura::after{content:'';position:absolute;left:0;right:0;bottom:0;height:118px;
  background:linear-gradient(to bottom,transparent,var(--ink));pointer-events:none}

.wf-tour-cartaz__cta{position:absolute;left:50%;bottom:56px;transform:translateX(-50%);z-index:3;
  padding:15px 30px;font-size:1rem;box-shadow:0 14px 40px rgba(10,23,41,.5)}

/* ------------------------------------------------------ camada aberta */
/* o fundo e o papel da propria aplicacao, e nao o navy do site: a tela tem
   altura fixa e sobra uma faixa por baixo dela quando a janela e mais alta.
   Com a faixa de rodape removida, essa sobra ficava a mostrar uma tira
   escura por baixo de uma interface clara. */
/* O aviso que substitui o tour no telemovel (ver tour.js). Cartao curto e
   centrado, com o mesmo papel e a mesma tinta do resto do site. */
.wf-so-desktop{width:min(400px,calc(100vw - 40px));max-width:none;border:0;padding:26px;
  margin:auto;border-radius:18px;background:var(--paper);color:var(--txt);
  box-shadow:0 40px 80px -30px rgba(6,14,26,.5)}
.wf-so-desktop::backdrop{background:rgba(6,14,26,.72);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.wf-so-desktop h3{font-size:1.1875rem;font-weight:600;letter-spacing:-.022em;line-height:1.25}
.wf-so-desktop p{margin:12px 0 20px;font-size:.9375rem;line-height:1.6;color:var(--txt-2)}
.wf-so-desktop .wf-btn{width:100%;justify-content:center}

.wf-tour{position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;
  margin:0;padding:0;border:0;background:#f7f7f5;overflow:hidden;color:var(--txt)}
.wf-tour::backdrop{background:rgba(6,14,26,.92)}
body.tour-aberto{overflow:hidden}

.wf-tour__palco{position:absolute;inset:0;overflow:hidden}
.wf-tour__tela{position:absolute;left:0;top:0;width:calc(var(--lw) * 1px);height:calc(var(--lh) * 1px);
  transform:translateY(var(--desl,0px)) scale(var(--k,1));transform-origin:0 0;
  transition:transform .55s var(--ease-out)}

/* O realce sao duas camadas irmas, em coordenadas de janela. O veu cobre
   tudo e abre um furo retangular; o poligono desenha a moldura de fora e
   volta por dentro do furo, que e como se recorta um buraco sem `mask`. */
.wf-tour__veu{position:absolute;inset:0;z-index:4;background:rgba(8,18,33,.76);pointer-events:none;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 var(--hy0,0px),
    var(--hx0,0px) var(--hy0,0px),var(--hx0,0px) var(--hy1,0px),
    var(--hx1,0px) var(--hy1,0px),var(--hx1,0px) var(--hy0,0px),0 var(--hy0,0px));
  transition:clip-path .5s var(--ease-out)}
.wf-tour.sem-alvo .wf-tour__veu{clip-path:none}
.wf-tour__anel{position:absolute;z-index:5;border:2px solid var(--blue);border-radius:11px;
  pointer-events:none;box-shadow:0 0 0 1px rgba(10,159,245,.28),0 0 26px rgba(10,159,245,.3);
  transition:left .5s var(--ease-out),top .5s var(--ease-out),
    width .5s var(--ease-out),height .5s var(--ease-out)}

.wf-tour__x{position:absolute;right:18px;top:18px;z-index:6;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.1);
  color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background-color .25s,border-color .25s}
.wf-tour__x:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.5)}
.wf-tour__x svg{width:15px;height:15px}

.wf-tour__cartao{position:absolute;z-index:7;width:min(330px,calc(100% - 32px));
  background:var(--white);border-radius:12px;padding:18px 20px 15px;
  box-shadow:0 24px 70px rgba(6,14,26,.42);
  transition:top .45s var(--ease-out),left .45s var(--ease-out)}
.wf-tour__tt{margin:0 0 7px;font-size:1rem;font-weight:600;letter-spacing:-.02em;line-height:1.25;
  color:var(--txt)}
.wf-tour__d{margin:0;font-size:.875rem;line-height:1.5;color:var(--txt-2)}
.wf-tour__pe{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  margin-top:var(--s4);padding-top:12px;border-top:1px solid var(--line)}
.wf-tour__cont{font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;color:var(--txt-3)}
.wf-tour__bt{display:flex;gap:8px}
.wf-tour__pe button{padding:8px 15px;border-radius:999px;font-size:.8125rem;font-weight:500;
  cursor:pointer;border:1px solid transparent;transition:background-color .25s,color .25s,opacity .25s}
.wf-tour__ant{background:transparent;border-color:var(--line);color:var(--txt-2)}
.wf-tour__ant:hover:not(:disabled){background:var(--paper);color:var(--txt)}
.wf-tour__ant:disabled{opacity:0;pointer-events:none}
.wf-tour__prox{background:var(--navy);color:#fff}
.wf-tour__prox:hover{background:var(--blue)}

@media (max-width:760px){
  .wf-tour-cartaz__palco{max-height:300px}
  .wf-tour-cartaz__cta{bottom:34px;padding:13px 22px;font-size:.9375rem;width:calc(100% - 48px);
    max-width:330px}
  .wf-tour__cartao{left:16px;right:16px;bottom:18px;top:auto;width:auto}
  .wf-tour__x{right:12px;top:12px;width:34px;height:34px}
}
@media (prefers-reduced-motion:reduce){
  .wf-tour__tela,.wf-tour__cartao,.wf-tour__veu,.wf-tour__anel{transition:none}
}

/* ------------------------------------------------- o que o intervalo vale
   Entra depois do grafico, dentro da mesma seccao. Tres colunas de texto
   corrido separadas por filete, sem cartao e sem icone: o bloco explica uma
   consequencia, e nao e mais um inventario de recursos. */
.cb-benef{margin-top:clamp(56px,7vw,96px)}
.cb-benef .wf-h2{margin-bottom:var(--s6)}

/* ================================================================= casos
   Quatro mesas em placas escuras sobre o papel. O texto e longo, entao a
   placa alinha a esquerda: icone, nome da mesa e o paragrafo que diz o que
   ela ganha. Cada placa e um link para o produto. Entram em escada quando a
   seccao aparece. */
.wf-casos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;
  margin-top:clamp(40px,5vw,64px);text-align:left}
.wf-caso{--i:0;position:relative;display:flex;flex-direction:column;align-items:flex-start;
  gap:14px;padding:26px 24px 30px;border-radius:18px;color:#fff;text-decoration:none;
  background:linear-gradient(165deg,#173463 0%,var(--ink) 74%);
  border:1px solid rgba(255,255,255,.08);
  opacity:0;transform:translateY(12px);
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out),
    border-color .3s,box-shadow .45s var(--ease-out);
  transition-delay:calc(var(--i)*.08s)}
.wf-casos.vis .wf-caso{opacity:1;transform:none}
.wf-casos.vis .wf-caso:hover{transform:translateY(-4px);transition-delay:0s;
  border-color:rgba(47,240,138,.45);box-shadow:0 30px 50px -30px rgba(10,23,41,.65)}
.wf-caso .ic{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;
  background:rgba(255,255,255,.06);color:var(--green);transition:background-color .3s,color .3s}
.wf-caso:hover .ic{background:var(--green);color:var(--ink)}
.wf-caso .ic svg{width:19px;height:19px}
.wf-caso b{font-size:1.125rem;font-weight:600;letter-spacing:-.025em;line-height:1.2}
.wf-caso p{margin:0;font-size:.875rem;line-height:1.55;color:var(--on-dark-2)}
.wf-caso .seta{position:absolute;right:18px;top:22px;color:var(--green);opacity:0;
  transform:translate(-4px,4px);transition:opacity .3s,transform .3s}
.wf-caso:hover .seta{opacity:1;transform:none}
@media (max-width:1080px){
  .wf-casos{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .wf-casos{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .wf-caso{opacity:1;transform:none;transition:none}
  .wf-casos.vis .wf-caso:hover{transform:none}
}

/* ------------------------------------------------- telas do demo, detalhes
   Pecas que existem no produto e faltavam aqui: o cabecalho da ficha, o
   cartao de cadastro em duas colunas e a linha rotulo/valor. */
.p-fichacab{display:flex;align-items:flex-start;gap:12px;margin-bottom:13px}
.p-fichacab__lg{flex:none}
/* o simbolo aqui vive fora de `.p-emp`, entao nao herda o `position` nem o
   `overflow` daquela regra e a imagem escapava da caixa */
.p-fichacab__lg .mk{position:relative;display:grid;place-items:center;overflow:hidden;
  width:36px;height:36px;border-radius:10px;flex:none;
  font-family:var(--mono);font-size:11px;font-weight:600;color:#fff;letter-spacing:-.02em}
.p-fichacab__lg .mk img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block}
.p-fichacab__tx{flex:1;min-width:0}
.p-fichacab__tx .nm{display:flex;align-items:center;gap:8px;font-size:19px;font-weight:600;
  letter-spacing:-.03em;color:var(--pt)}
.p-fichacab__tx .id{margin-top:3px;font-size:10.5px;color:var(--pt3)}
.p-geral{font-size:11px;font-weight:600;color:var(--blue);margin-bottom:5px}
.p-score .num small{font-family:var(--sans);font-size:12px;font-weight:400;color:var(--pt3);
  letter-spacing:0;margin-left:3px}
.p-2col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px}
.p-2col__k{font-size:10px;color:var(--pt3);margin-bottom:7px;padding-bottom:5px;
  border-bottom:1px solid var(--pl2)}
.p-campo{display:flex;align-items:baseline;justify-content:space-between;gap:11px;
  padding:5px 0;font-size:11px;color:var(--pt3);border-bottom:1px solid var(--pl2)}
.p-campo:last-child{border-bottom:0}
.p-campo b{font-weight:500;color:var(--pt);text-align:right;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.p-cabp__tx small{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--pt3);margin-bottom:2px}

/* --------------------------------------------- ficha da empresa, 2 colunas */
.p-2up{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:11px;min-height:0}
.p-2up__c{display:flex;flex-direction:column;gap:11px;min-height:0}
.p--m .p-2up{grid-template-columns:minmax(0,1fr)}
.p-sobre{margin:0;font-size:11.5px;line-height:1.5;color:var(--pt2)}
.p-nota2{margin:0 0 11px;font-size:10.5px;line-height:1.5;color:var(--pt2)}
.p-nota2 b{color:var(--blue);font-weight:500}
.p-total{font-family:var(--mono);font-size:32px;font-weight:500;letter-spacing:-.05em;line-height:1;
  color:var(--pt);font-variant-numeric:tabular-nums}
.p-total small{font-family:var(--sans);font-size:12px;font-weight:400;color:var(--pt3);
  letter-spacing:0;margin-left:3px}
.p-topo{margin-top:5px;font-size:10.5px;color:var(--pt3)}
.p-sfs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:13px}
.p-sf{border:1px solid var(--pl);border-radius:9px;padding:11px}
.p-sf__tt{font-size:11.5px;font-weight:600;color:var(--blue)}
.p-sf__d{margin-top:3px;font-size:9.5px;line-height:1.4;color:var(--pt3);min-height:26px}
.p-sf__n{margin-top:7px;font-family:var(--mono);font-size:14px;font-weight:600;color:var(--pt)}
.p-sf__n small{font-family:var(--sans);font-size:9px;font-weight:400;color:var(--pt3);margin-left:2px}
.p-sf__par{display:flex;align-items:flex-end;justify-content:center;gap:16px;height:64px;margin-top:9px}
.p-sf__par span{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  height:100%;width:34px}
.p-sf__par i{display:block;width:100%;background:#c9f2dd;border-radius:3px 3px 0 0}
.p-sf__par .on i{background:var(--green)}
.p-sf__par b{order:-1;font-family:var(--mono);font-size:10px;font-weight:600;color:var(--pt);
  margin-bottom:3px}
.p-sf__par u{margin-top:4px;font-size:9px;text-decoration:none;color:var(--pt3);white-space:nowrap}
.p-hl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-bottom:13px}
.p-hl span{display:block;font-size:9.5px;color:var(--pt3)}
.p-hl b{display:block;margin-top:3px;font-family:var(--mono);font-size:16px;font-weight:500;
  letter-spacing:-.03em;color:var(--pt)}
.p-barras{display:flex;align-items:flex-end;justify-content:space-around;gap:12px;height:118px;
  border-top:1px solid var(--pl2);padding-top:11px}
.p-bar{flex:1;max-width:96px;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-end;height:100%}
.p-bar b{font-family:var(--mono);font-size:9.5px;font-weight:600;color:var(--pt);margin-bottom:4px}
.p-bar i{display:block;width:100%;background:var(--green);border-radius:3px 3px 0 0}
.p-bar u{margin-top:5px;font-size:9px;line-height:1.3;text-align:center;text-decoration:none;
  color:var(--pt3)}
/* barra de progresso da solidez regulatoria */
.p-prog{display:block;height:4px;border-radius:2px;background:var(--pl2);margin-top:9px;overflow:hidden}
.p-prog i{display:block;height:100%;background:var(--blue);border-radius:2px}

/* ================================================================ metodo
   "A marca e o metodo". As sete pecas do simbolo respondem as tres perguntas;
   cada estado isola as que respondem a uma delas. Ver metodo.js. */
.mt{margin-top:clamp(40px,5vw,64px)}
/* O quadro tem exatamente a proporcao do viewBox (225.5 x 100). Sem isso o
   SVG centrava o desenho dentro de uma caixa mais larga por causa do
   preserveAspectRatio, e os rotulos, posicionados em percentagem da caixa,
   caiam dezenas de pixeis ao lado dos pontos. */
.mt-palco{position:relative;max-width:820px;margin:0 auto;padding:56px 0 48px}
.mt-quadro{position:relative;width:100%}
.mt-palco .mt-marca{display:block;width:100%;height:auto;overflow:visible}
.mt-palco .mt-marca .haste{transition:opacity .55s var(--ease-out),filter .55s var(--ease-out),
  transform .75s var(--ease-out);transform-box:fill-box;transform-origin:center}

/* ---- montagem: as pecas chegam de tres lados e encaixam, uma vez */
.mt:not(.is-montada) .haste.g-w{opacity:0;transform:translateX(-40px)}
.mt:not(.is-montada) .haste.g-f{opacity:0;transform:translateY(-40px)}
.mt:not(.is-montada) .haste.g-f2{opacity:0;transform:translateX(40px)}
.mt.is-montada .haste.h0{transition-delay:0s}
.mt.is-montada .haste.h1{transition-delay:.08s}
.mt.is-montada .haste.h2{transition-delay:.16s}
.mt.is-montada .haste.h3{transition-delay:.24s}
.mt.is-montada .haste.h4{transition-delay:.38s}
.mt.is-montada .haste.h5{transition-delay:.52s}
.mt.is-montada .haste.h6{transition-delay:.6s}

/* ---- estados: as pecas que nao respondem recuam, as que respondem acendem */
.mt.is-viva .haste{transition-delay:0s}
/* What acende o W branco, Where a haste azul, Who os bracos verdes */
.mt.is-viva[data-estado="what"] .haste.g-f,
.mt.is-viva[data-estado="what"] .haste.g-f2{opacity:.12}
.mt.is-viva[data-estado="where"] .haste.g-w,
.mt.is-viva[data-estado="where"] .haste.g-f2{opacity:.12}
.mt.is-viva[data-estado="who"] .haste.g-w,
.mt.is-viva[data-estado="who"] .haste.g-f{opacity:.12}
.mt.is-viva[data-estado="what"] .haste.g-w{filter:drop-shadow(0 0 6px rgba(255,255,255,.35))}
.mt.is-viva[data-estado="where"] .haste.g-f{filter:drop-shadow(0 0 7px rgba(10,159,245,.6))}
.mt.is-viva[data-estado="who"] .haste.g-f2{filter:drop-shadow(0 0 7px rgba(47,240,138,.55))}

/* ---- gestos proprios de cada estado */
@keyframes mtPulsa{from{transform:translateX(0)}to{transform:translateX(4px)}}
.mt.is-viva[data-estado="who"] .haste.h5{animation:mtPulsa 1.4s var(--ease-out) infinite alternate}
.mt.is-viva[data-estado="who"] .haste.h6{animation:mtPulsa 1.4s var(--ease-out) .35s infinite alternate}
/* o ponto que desce a haste: a haste vai de (162,5) a (139,95) no viewBox */
@keyframes mtDesce{0%{transform:translate(0,0);opacity:0}8%{opacity:1}92%{opacity:1}
  100%{transform:translate(-23px,90px);opacity:0}}
.mt-viaja{fill:#fff;opacity:0;filter:drop-shadow(0 0 4px rgba(10,159,245,.9))}
.mt.is-viva[data-estado="where"] .mt-viaja{animation:mtDesce 2.6s cubic-bezier(.4,0,.2,1) infinite}
/* nos e guias: a linha que prende o rotulo a peca */
.mt-guia{stroke:rgba(255,255,255,.55);stroke-width:.6;opacity:0;
  transition:opacity .35s var(--ease-out);transition-delay:calc(var(--i,0) * .07s + .1s)}
.mt-no{fill:#fff;opacity:0;transform-box:fill-box;transform-origin:center;
  transition:opacity .35s var(--ease-out);transition-delay:calc(var(--i,0) * .07s + .1s)}
.mt-guia--what{stroke:rgba(255,255,255,.75)} .mt-no--what{fill:#fff}
.mt-guia--where{stroke:rgba(10,159,245,.9)}  .mt-no--where{fill:var(--blue)}
.mt-guia--who{stroke:rgba(47,240,138,.8)}    .mt-no--who{fill:var(--green)}
.mt.is-viva[data-estado="what"] .mt-guia--what,.mt.is-viva[data-estado="what"] .mt-no--what,
.mt.is-viva[data-estado="where"] .mt-guia--where,.mt.is-viva[data-estado="where"] .mt-no--where,
.mt.is-viva[data-estado="who"] .mt-guia--who,.mt.is-viva[data-estado="who"] .mt-no--who{opacity:1}
@keyframes mtNo{from{transform:scale(1)}to{transform:scale(1.7)}}
.mt.is-viva[data-estado="what"] .mt-no--what{animation:mtNo 1.2s var(--ease-out) infinite alternate;
  animation-delay:calc(var(--i,0) * .25s)}

/* ---- rotulos, em HTML por cima do SVG, presos aos mesmos pontos */
.mt-rotulos{position:absolute;inset:0;pointer-events:none}
.mt-chip{position:absolute;opacity:0;white-space:nowrap;padding:5px 11px;border-radius:999px;
  font-size:.8125rem;font-weight:500;line-height:1;color:var(--on-dark);
  background:rgba(255,255,255,.05);border:1px solid var(--line-dark);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  transition:opacity .4s var(--ease-out),transform .5s var(--ease-out);
  transition-delay:calc(var(--i,0) * .07s + .18s)}
.mt-chip--dir{transform:translate(4px,-50%)}
.mt-chip--cima{transform:translate(-50%,calc(-100% + 4px))}
.mt-chip--baixo{transform:translate(-50%,-4px)}
.mt-rotulos--what .mt-chip{border-color:rgba(255,255,255,.4)}
.mt-rotulos--where .mt-chip{border-color:rgba(10,159,245,.6)}
.mt-rotulos--who .mt-chip{border-color:rgba(47,240,138,.5)}
.mt.is-viva[data-estado="what"] .mt-rotulos--what .mt-chip,
.mt.is-viva[data-estado="where"] .mt-rotulos--where .mt-chip,
.mt.is-viva[data-estado="who"] .mt-rotulos--who .mt-chip{opacity:1}
.mt.is-viva[data-estado="where"] .mt-rotulos--where .mt-chip--dir,
.mt.is-viva[data-estado="who"] .mt-rotulos--who .mt-chip--dir{transform:translate(0,-50%)}
.mt.is-viva[data-estado="what"] .mt-rotulos--what .mt-chip--cima{transform:translate(-50%,-100%)}
.mt.is-viva[data-estado="what"] .mt-rotulos--what .mt-chip--baixo{transform:translate(-50%,0)}

/* ---- as tres perguntas, como abas */
.mt-abas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:var(--s5);
  border-top:1px solid var(--line-dark)}
.mt-aba{position:relative;display:block;text-align:left;padding:22px 22px 26px;background:none;
  border:0;border-left:1px solid var(--line-dark);cursor:pointer;color:var(--on-dark-3);
  font-family:inherit;transition:background-color .3s var(--ease-out),color .3s var(--ease-out)}
.mt-aba:first-child{border-left:0}
.mt-aba:hover{background:rgba(255,255,255,.025)}
.mt-aba .w{display:block;font-size:clamp(1.75rem,3vw,2.25rem);font-weight:600;letter-spacing:-.04em;
  line-height:1;color:var(--on-dark-3);transition:color .3s var(--ease-out)}
.mt-aba .q{display:block;margin-top:12px;font-size:.9375rem;line-height:1.4;color:var(--on-dark-3);
  transition:color .3s var(--ease-out)}
/* sans em caixa normal: mono minusculo com caixa alta e tracking largo e o
   mesmo tique visual que ja tinha saido dos meses do grafico */
/* sem `opacity` aqui: ela multiplicava o alfa da cor e devolvia o texto
   para 4.4 de contraste, desfazendo o ajuste de `--on-dark-3` */
.mt-aba .m{display:block;margin-top:10px;font-size:.75rem;color:var(--on-dark-3)}
.mt-aba.is-on{background:rgba(255,255,255,.035)}
.mt-aba.is-on .w{color:var(--cor)}
.mt-aba.is-on .q{color:var(--on-dark)}
.mt-aba:focus-visible{outline:2px solid var(--cor);outline-offset:-2px}
/* a barra fina que conta o tempo ate a proxima pergunta */
.mt-prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--cor);
  transform:scaleX(0);transform-origin:left;opacity:0}
@keyframes mtProg{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.mt.is-contando .mt-aba.is-on .mt-prog{opacity:1;animation:mtProg 5.5s linear forwards}

/* Telemovel: nao ha lado da marca para prender rotulos, e o que sobra a
   direita cai fora do ecra. Os rotulos do estado ativo passam a uma fila
   por baixo da marca e as linhas-guia saem; a marca continua a acender e a
   recuar por estado. */
@media (max-width:760px){
  .mt-palco{padding:8px 0 0}
  .mt-guia,.mt-no{display:none}
  .mt-rotulos{position:relative;inset:auto;display:none;flex-wrap:wrap;justify-content:center;
    gap:7px;margin-top:22px}
  .mt.is-viva[data-estado="what"] .mt-rotulos--what,
  .mt.is-viva[data-estado="where"] .mt-rotulos--where,
  .mt.is-viva[data-estado="who"] .mt-rotulos--who{display:flex}
  /* o seletor precisa de empatar com o do desktop, que tem [data-estado] e
     duas classes de estado; com menos peso, o `transform` de posicionamento
     continuava aplicado e empurrava os chips por cima da marca */
  .mt-chip,
  .mt.is-viva[data-estado] .mt-rotulos .mt-chip{position:static;opacity:1;transform:none;
    font-size:.75rem;padding:5px 10px;transition:none}
  .mt-abas{grid-template-columns:minmax(0,1fr)}
  .mt-aba{border-left:0;border-top:1px solid var(--line-dark);padding:16px 4px 20px}
  .mt-aba:first-child{border-top:0}
}
@media (prefers-reduced-motion:reduce){
  .mt-palco .mt-marca .haste,.mt-chip,.mt-guia,.mt-no{transition:none;animation:none !important}
  .mt-viaja{display:none}
  .mt-prog{display:none}
}

/* ======================================================= forma de contato
   Fica dentro da seccao final, sobre o fundo escuro. Duas colunas no
   desktop para nome e e-mail, uma coluna no telemovel, e a mensagem sempre
   inteira. Largura presa a 620px: campo de texto muito largo e dificil de
   ler e de mirar. */
.wf-forma{max-width:620px;margin:clamp(40px,6vw,64px) auto 0;text-align:left;
  padding:clamp(24px,4vw,36px);border-radius:20px;
  border:1px solid var(--line-dark);background:rgba(255,255,255,.035)}
.wf-forma__tt{margin:0;font-size:clamp(1.25rem,2.4vw,1.5rem);font-weight:600;
  letter-spacing:-.03em;line-height:1.2;color:#fff}
/* `p.` NAO E ENFEITE. O formulario vive dentro de `.wf-cta`, que declara
   `.wf-cta p{margin:var(--s5) auto 0}`. Isso e (0,0,1,1) e ganha de uma
   classe sozinha, entao a margem de baixo destes paragrafos era zerada e o
   texto de apoio encostava no rotulo do primeiro campo. Somando o tipo, os
   dois empatam em especificidade e o que vem depois vence. */
p.wf-forma__lead{margin:8px 0 22px;font-size:.9375rem;line-height:1.5;color:var(--on-dark-2)}
.wf-forma__grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.wf-campo{display:block;margin-bottom:14px}
.wf-campo > span{display:block;margin-bottom:6px;font-size:.8125rem;font-weight:600;color:var(--on-dark-2)}
.wf-campo input,.wf-campo textarea{width:100%;box-sizing:border-box;padding:12px 14px;border-radius:11px;
  border:1px solid var(--line-dark);background:rgba(255,255,255,.06);color:#fff;
  font-family:inherit;font-size:1rem;line-height:1.45;
  transition:border-color .25s,background-color .25s}
.wf-campo textarea{resize:vertical;min-height:104px}
.wf-campo input::placeholder,.wf-campo textarea::placeholder{color:var(--on-dark-3)}
.wf-campo input:focus,.wf-campo textarea:focus{outline:none;border-color:var(--green);background:rgba(255,255,255,.09)}
.wf-forma__grade .wf-campo{margin-bottom:0}
/* honeypot */
.wf-forma__mel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
p.wf-forma__erro{margin:0 0 14px;font-size:.8125rem;line-height:1.45;color:#FF9A8B}
.wf-forma__enviar{width:100%;justify-content:center;margin-top:8px}
.wf-forma__ok{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
  padding:clamp(16px,3vw,28px) 0;color:var(--green)}
.wf-forma__ok strong{font-size:1.125rem;font-weight:600;letter-spacing:-.02em;color:#fff}
.wf-forma__ok span{font-size:.9375rem;line-height:1.5;color:var(--on-dark-2);max-width:44ch}
@media (max-width:620px){
  .wf-forma__grade{grid-template-columns:minmax(0,1fr);gap:0}
  .wf-forma__grade .wf-campo{margin-bottom:14px}
}

/* ==================================================== W Fintechs na midia
   Tres cartoes, um por veiculo. O logotipo vai numa placa clara com altura
   fixa: as marcas tem proporcoes muito diferentes (o Forbes e largo e baixo,
   o Finsiders quase quadrado), e so a altura igual faz a fila parecer uma
   fila. Cartao inteiro clicavel. */
.wf-midia{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;
  margin-top:clamp(32px,4vw,48px)}
.wf-midia__c{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;padding:26px 20px;border-radius:18px;
  border:1px solid var(--line);background:var(--white);text-decoration:none;color:inherit;
  transition:border-color .3s,transform .4s var(--ease-out),box-shadow .4s var(--ease-out)}
.wf-midia__c:hover{border-color:var(--txt-3);transform:translateY(-3px);
  box-shadow:0 24px 44px -28px rgba(10,23,41,.35)}
.wf-midia__logo{display:grid;place-items:center;height:64px;padding:8px 14px;border-radius:12px;
  box-sizing:border-box;overflow:hidden;background:var(--paper)}
.wf-midia__logo img{height:40px;width:auto;max-width:100%;object-fit:contain}
.wf-midia__c .wf-link{margin-top:0}
@media (max-width:860px){
  .wf-midia{grid-template-columns:minmax(0,1fr);gap:12px}
  /* na coluna unica o cartao vira linha: logotipo a esquerda, texto ao lado.
     A coluna do logotipo tem largura FIXA de proposito: encolher a placa ao
     conteudo (`justify-self:start`) torna o `max-width:100%` da imagem
     circular, porque a caixa passa a ser dimensionada pela propria imagem,
     e a largura resolvia para zero. */
  .wf-midia__c{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;justify-items:stretch;padding:18px 20px}
  .wf-midia__logo{height:64px}
  .wf-midia__logo img{height:34px}
  .wf-midia__c .wf-link{grid-column:2}
}
@media (max-width:420px){
  /* abaixo disto o texto nao cabe ao lado do logotipo: volta a empilhar,
     com a placa ocupando a largura inteira do cartao */
  .wf-midia__c{grid-template-columns:minmax(0,1fr);gap:14px;justify-items:center}
  .wf-midia__logo{width:100%;height:64px}
}
@media (prefers-reduced-motion:reduce){ .wf-midia__c:hover{transform:none} }

/* ==========================================================================
   N15 (sprint 18.7) — a seccao de preco da home e da /precos.html.

   Tres cartoes, e o do meio em destaque: com tres iguais o olho nao sabe
   onde parar, e a escada de preco deixa de se ler. O destaque e discreto de
   proposito — borda e um degrau de elevacao — porque quem chega aqui ja
   decidiu olhar preco e esta escolhendo quanto, nao sendo convencido.
   ========================================================================== */
.wf-precos__ciclos {
  display: flex; gap: 4px; margin: 0 0 28px; padding: 4px;
  background: var(--paper, #f4f5f7); border-radius: 999px; width: fit-content;
}
.wf-precos__ciclos button {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: transparent; cursor: pointer;
  padding: 8px 16px; border-radius: 999px;
  font: inherit; font-size: 13px; color: var(--ink-2, #5b6472);
  transition: background .16s, color .16s;
}
.wf-precos__ciclos button.is-on { background: #fff; color: var(--ink, #10151c); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.wf-precos__ciclos .off {
  font-size: 11px; font-weight: 650; color: var(--wf-up, #1a7f5a);
  background: rgba(26,127,90,.1); padding: 2px 6px; border-radius: 999px;
}

.wf-precos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .wf-precos { grid-template-columns: 1fr; } }

.wf-preco {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line, #e6e8ec); border-radius: 14px;
  padding: 24px 22px; height: 100%;
}
.wf-preco.is-destaque { border-color: var(--line-3, #c9cdd4); box-shadow: 0 6px 20px rgba(0,0,0,.07); }
.wf-preco .tag {
  position: absolute; top: -11px; left: 22px;
  background: var(--ink, #10151c); color: #fff;
  font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
}
.wf-preco .nome { font-size: 15px; font-weight: 700; }
.wf-preco .publico { font-size: 12.5px; color: var(--ink-2, #5b6472); margin: 6px 0 18px; min-height: 34px; }
.wf-preco .valor { font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
/* "Sob consulta" e texto, nao numero — sem o corpo menor ele fica do mesmo
   peso visual de um preco, e o cartao passa a parecer que tem um. */
.wf-preco .valor--consulta { font-size: 21px; }
.wf-preco .periodo { font-size: 12px; color: var(--ink-2, #5b6472); margin-top: 2px; }
.wf-preco .equiv { font-size: 11.5px; color: var(--ink-2, #5b6472); margin-top: 6px; }
/* Desconto NO CARTAO: aparece so quando os planos discordam entre si e o
   selo do toggle sai. Ver a nota em tools/gerar-plataforma.js. */
.wf-preco .equiv .off {
  display: inline-block; font-size: 11px; font-weight: 650;
  color: var(--wf-up, #1a7f5a); background: rgba(26,127,90,.1);
  padding: 2px 6px; border-radius: 999px;
}
.wf-preco .itens { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 8px; }
.wf-preco .itens li { font-size: 12.5px; padding-left: 18px; position: relative; }
.wf-preco .itens li::before {
  content: ''; position: absolute; left: 0; top: 6px; width: 8px; height: 5px;
  border-left: 1.6px solid var(--accent, #1a7f5a); border-bottom: 1.6px solid var(--accent, #1a7f5a);
  transform: rotate(-45deg);
}
.wf-preco .cta {
  margin-top: auto; display: block; text-align: center; text-decoration: none;
  border: 1px solid var(--line-3, #c9cdd4); border-radius: 10px;
  padding: 11px 16px; font-size: 13px; font-weight: 600; color: var(--ink, #10151c);
  margin-top: 24px; transition: background .16s, border-color .16s;
}
.wf-preco.is-destaque .cta { background: var(--ink, #10151c); border-color: var(--ink, #10151c); color: #fff; }
.wf-preco .cta:hover { border-color: var(--ink, #10151c); }
.wf-precos__nota { font-size: 12px; color: var(--ink-2, #5b6472); margin-top: 20px; }