/* ============================================================
   Bia Hub
   Roxo afirma, papel comprova. O documento corre contínuo,
   ancorado numa coluna de rótulos que acompanha a leitura.
   ============================================================ */

:root{
  --violeta:      #4F00CF;
  --violeta-esc:  #2E0079;
  --papel:        #F5F4F7;
  --papel-fundo:  #EDEBF1;
  --tinta:        #17131F;
  --tinta-fraca:  #5B5468;
  --tinta-tenue:  rgba(23,19,31,.13);
  --ouro:         #C8A951;
  --ouro-esc:     #8E7226;

  --display: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --corpo:   Georgia, "Iowan Old Style", "Times New Roman", serif;
  --mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --col: 70rem;
  --rotulo: 12rem;
  --vao: 3.5rem;

  /* escala: dado, título, frase, corpo, rótulo.
     o degrau de frase e o de dado não existiam e é o que faltava de amplitude */
  --t-dado:  clamp(2.4rem,4.6vw,3.5rem);
  --t-frase: clamp(1.2rem,1.9vw,1.5rem);

  /* superfície única: mesma borda, mesmo raio, mesma sombra em toda a página */
  --sup-borda: 1px solid var(--tinta-tenue);
  --sup-raio: 16px;
  --sup-sombra: 0 1px 2px rgba(23,19,31,.05), 0 14px 34px -18px rgba(23,19,31,.28);
  --sup-sombra-alta: 0 1px 2px rgba(23,19,31,.06), 0 22px 46px -20px rgba(23,19,31,.34);
  --sup-borda-clara: 1px solid rgba(255,255,255,.16);
  --sup-fundo-claro: rgba(255,255,255,.055);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--corpo);
  font-size:1.0625rem;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}

img,svg{ max-width:100%; display:block; }
a{ color:inherit; }

:focus-visible{ outline:3px solid var(--ouro); outline-offset:3px; }

.pular{ position:absolute; left:-9999px; background:var(--tinta); color:#fff; padding:.7rem 1rem; z-index:20; }
.pular:focus{ left:1rem; top:1rem; }

/* ---------- estrutura ---------- */

.wrap{ width:100%; max-width:var(--col); margin-inline:auto; padding-inline:1.5rem; }

.band{ padding-block:clamp(3.2rem,8vw,6rem); }
.band--violeta{ background:var(--violeta); color:#fff; }
.band--papel{ background:var(--papel); }
.band--colada{ padding-top:0; }

.regua{ border:0; border-top:1px solid var(--tinta-tenue); margin:0 0 clamp(2.6rem,6vw,4.2rem); }

/* grade assimétrica: rótulo à esquerda, conteúdo à direita */
.linha{ display:grid; grid-template-columns:var(--rotulo) minmax(0,1fr); gap:0 var(--vao); }
.linha__rotulo{ padding-top:.28rem; }
.linha__rotulo .olho{ position:sticky; top:1.6rem; display:block; margin:0; }
.linha__corpo{ min-width:0; }

.texto{ max-width:40rem; }

/* ---------- tipografia ---------- */

/* rótulo de seção: pende de um traço curto, como a régua que abre cada faixa */
.olho{
  display:block;
  font-family:var(--mono); font-weight:600;
  font-size:.83rem; letter-spacing:.07em; line-height:1.42;
  text-transform:uppercase; color:rgba(255,255,255,.94); margin:0 0 1.35rem;
}
.olho::before{
  content:""; display:block; width:2.6rem; height:2px;
  background:var(--ouro); margin-bottom:.72rem;
}
.olho--escuro{ color:var(--tinta); }
.olho--escuro::before{ background:var(--ouro-esc); }
/* na coluna estreita o traço atravessa o rótulo inteiro e ancora a coluna */
.linha__rotulo .olho::before{ width:100%; }

.titulo{
  font-family:var(--display); font-weight:800; letter-spacing:-.022em; line-height:1.08;
  font-size:clamp(1.6rem,3.7vw,2.4rem); margin:0 0 1.3rem; text-wrap:balance;
}
.titulo--claro{ color:#fff; }

p{ margin:0 0 1.1rem; }
p:last-child{ margin-bottom:0; }
strong{ font-weight:700; }
.claro{ color:rgba(255,255,255,.88); }

/* ---------- topo ---------- */

.topo{ background:var(--violeta); padding-block:1.4rem .2rem; }
.topo__linha{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.topo__logo{ height:46px; width:auto; }

/* ---------- botões ---------- */

.btn{
  display:inline-block; font-family:var(--display); font-weight:700; font-size:.95rem;
  text-decoration:none; padding:.85rem 1.5rem; border-radius:2px;
  transition:transform .15s ease, background-color .15s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn--ouro{ background:var(--ouro); color:#1B1405; box-shadow:0 1px 0 rgba(0,0,0,.18); }
.btn--ouro:hover{ background:#D8BC6A; }
.btn--fantasma{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.42); padding:.6rem 1.05rem; font-size:.82rem; }
.btn--fantasma:hover{ background:rgba(255,255,255,.1); }
.btn--grande{ font-size:1.05rem; padding:1.05rem 2rem; }

/* ---------- hero ---------- */

.hero{ padding-top:clamp(2.2rem,5vw,3.4rem); }
/* o h1 carrega o rótulo e a equação: o rótulo dá a palavra-chave, a equação dá a tese */
.hero__h{ margin:0; font-weight:400; }
.hero .olho{ margin-bottom:2rem; }

.eqg{
  display:grid; grid-template-columns:repeat(5,auto);
  gap:.26em .44em; align-items:baseline;
  width:max-content; max-width:100%;
  margin:0 0 clamp(2rem,4vw,3rem);
  font-family:var(--display); font-weight:800; letter-spacing:-.023em; line-height:1.1;
  font-size:clamp(1.35rem,3.6vw,3rem);
}
.eql{ display:contents; }
/* nenhum termo da equação pode partir no meio */
.eqg > .eql > *{ white-space:nowrap; }
.eqg .o{ color:var(--ouro); font-weight:400; font-size:.7em; }
.eqg .ia{ color:var(--ouro); }
.eql--ruim{ color:rgba(255,255,255,.6); }

/* roleta: o resultado ruim troca de nome, o resto da equação não muda */
.roleta{ position:relative; display:inline-block; line-height:1.28; clip-path:inset(0); }
/* o vão só reserva a largura da frase mais longa. o texto vem do CSS
   pra não duplicar palavra dentro do h1 que o rastreador lê */
.roleta__vao{ display:block; visibility:hidden; white-space:nowrap; }
.roleta__vao::before{ content:"desperdício de dinheiro"; }
.roleta__fita{ position:absolute; top:0; left:0; }
.roleta__fita > span{ display:block; white-space:nowrap; line-height:1.28; }
.soleitura{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

.hero__base{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1.6rem 3rem;
  align-items:end; border-top:1px solid rgba(255,255,255,.28); padding-top:1.8rem;
}
.hero__texto{ font-size:1.08rem; line-height:1.64; max-width:34rem; color:rgba(255,255,255,.9); margin:0; }
.hero__acao{ display:flex; flex-direction:column; align-items:flex-start; gap:.7rem; }
.nota{ font-family:var(--mono); font-size:.72rem; color:rgba(255,255,255,.8); }

/* ---------- faixa de opinião ---------- */

.faixa__frase{
  font-family:var(--display); font-weight:800; letter-spacing:-.024em; line-height:1.14;
  font-size:clamp(1.45rem,3.7vw,2.4rem); margin:0 0 1.4rem; max-width:26ch; text-wrap:balance;
}
.faixa__apoio{ font-size:1.05rem; color:rgba(255,255,255,.86); max-width:34rem; }

/* ---------- o mapa ---------- */

.mapa{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(22rem,100%),1fr));
  gap:1.6rem; margin-top:clamp(2rem,4vw,3rem);
}

.painel{ margin:0; background:#fff; border:1px solid var(--tinta-tenue); border-radius:4px; padding:1.4rem 1.4rem 1.1rem; }
.painel--depois{ background:var(--violeta); border-color:var(--violeta); color:#fff; }

.painel__titulo{
  font-family:var(--display); font-weight:700; font-size:1.02rem; letter-spacing:-.012em;
  display:flex; align-items:center; gap:.7rem; margin-bottom:1rem;
}
.painel__marca{
  font-family:var(--mono); font-weight:400; font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; border:1px solid var(--tinta-tenue); border-radius:2px;
  padding:.2rem .5rem; color:var(--tinta-fraca); flex:none;
}
.painel__marca--ok{ border-color:rgba(255,255,255,.5); color:rgba(255,255,255,.9); }

.painel__svg{ width:100%; height:auto; }

/* traços do diagrama */
.d-lig path{ fill:none; stroke:#B9B3C6; stroke-width:1.4; }
.d-lig--manual path{ stroke:#C8A951; stroke-dasharray:4 4; }
.d-cx rect{ fill:#F5F4F7; stroke:#B9B3C6; stroke-width:1.2; }
.d-tx text{ font-family:var(--mono); font-size:11px; fill:var(--tinta-fraca); text-anchor:middle; }
.d-tx--claro text{ fill:#fff; font-size:12px; text-anchor:start; }

.d-caixa{ fill:rgba(255,255,255,.07); stroke:rgba(255,255,255,.42); stroke-width:1.3; }
.d-trilho{ fill:none; stroke:var(--ouro); stroke-width:1.6; }
.d-etapa circle{ fill:var(--ouro); }
.d-etapa rect{ fill:rgba(255,255,255,.13); }

.legenda{
  display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; margin:1rem 0 0;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.02em; color:var(--tinta-fraca);
}
.painel--depois .legenda{ color:rgba(255,255,255,.82); }
.legenda__item{ display:flex; align-items:center; gap:.45rem; }
.amostra{ width:1.4rem; height:0; border-top:1.4px solid #B9B3C6; flex:none; }
.amostra--man{ border-top-style:dashed; border-top-color:var(--ouro-esc); }

/* ---------- método: IA nas quatro etapas, analisando e depois executando ---------- */

.metodo{ margin-top:clamp(2.2rem,4vw,3rem); }

.metodo__grupos{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
}
.grupo{
  position:relative; padding-bottom:.85rem; color:var(--ouro-esc);
  border-left:1px solid rgba(142,114,38,.3); border-right:1px solid rgba(142,114,38,.3);
  border-top:1px solid rgba(142,114,38,.3);
  border-radius:6px 6px 0 0; padding-top:.55rem; text-align:center;
}
.metodo__grupos .grupo:first-child{ grid-column:1 / 4; }
.grupo--ia{
  grid-column:4 / 5; border-color:rgba(142,114,38,.55);
  background:linear-gradient(rgba(200,169,81,.16), rgba(200,169,81,0));
}

.trilho{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0 1.25rem;
  height:2.4rem; align-items:center; margin-top:.15rem;
}
.no{ position:relative; display:flex; align-items:center; justify-content:center; height:11px; }
.no::before{
  content:""; width:11px; height:11px; border-radius:50%;
  background:var(--papel); border:2px solid var(--ouro); box-sizing:border-box; z-index:1;
}
.no::after{
  content:""; position:absolute; left:50%; top:50%; margin-top:-1px;
  width:calc(100% + 1.25rem); height:2px; background:rgba(200,169,81,.55);
  transform-origin:left center;
}
.no:last-child::after{ display:none; }
.no--ia::before{ border-color:var(--ouro); background:var(--ouro); box-shadow:0 0 0 5px rgba(200,169,81,.22); }

.etapas{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem;
}
.etapa{
  background:#fff; border:var(--sup-borda); border-radius:var(--sup-raio);
  padding:1.3rem 1.25rem 1.5rem;
  box-shadow:0 1px 2px rgba(23,19,31,.04), 0 12px 26px -18px rgba(23,19,31,.24);
  transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease;
}
.etapa:hover{ transform:translateY(-3px); box-shadow:0 1px 2px rgba(23,19,31,.05), 0 20px 38px -20px rgba(23,19,31,.3); }
.etapa--ia{
  color:#fff; border-color:transparent;
  background:
    radial-gradient(110% 80% at 88% 0%, #6E1DEB 0%, rgba(110,29,235,0) 62%),
    var(--violeta);
  box-shadow:0 1px 2px rgba(40,0,110,.28), 0 16px 34px -18px rgba(60,0,170,.55);
}

.etapa__num{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.12em;
  color:var(--ouro-esc); display:block; margin-bottom:.7rem;
}
.etapa--ia .etapa__num{ color:var(--ouro); }
.etapa__titulo{ font-family:var(--display); font-weight:800; font-size:1.18rem; line-height:1.22; letter-spacing:-.015em; margin:0 0 .55rem; }
.etapa__txt{ font-size:.95rem; line-height:1.58; margin:0; }
.etapa--ia .etapa__txt{ color:rgba(255,255,255,.9); }

.regra{
  margin:1.5rem 0 0; padding:1.5rem 1.6rem;
  border-left:3px solid var(--ouro); background:rgba(200,169,81,.09);
  border-radius:0 12px 12px 0;
}
.regra blockquote{
  margin:0; font-family:var(--display); font-weight:800; letter-spacing:-.018em;
  font-size:clamp(1.15rem,2.3vw,1.5rem); line-height:1.28;
}
.regra figcaption{
  margin-top:.6rem; font-family:var(--mono); font-size:.7rem; letter-spacing:.06em;
  color:var(--tinta-fraca);
}

/* ---------- tabela de números ---------- */

/* o número é o argumento, então ele é que tem corpo de display.
   quatro blocos em grade, não uma lista, pra não repetir o ritmo das outras seções */
.tabela{
  margin:clamp(2.2rem,4vw,3rem) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.1rem;
}
.tabela__ln{
  display:block; padding:1.6rem 1.5rem 1.5rem;
  border:var(--sup-borda-clara); border-radius:var(--sup-raio);
  background:var(--sup-fundo-claro);
  transition:background-color .25s ease, border-color .25s ease;
}
.tabela__ln:hover{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.28); }
.tabela__num{
  font-family:var(--display); font-weight:800; font-size:var(--t-dado);
  letter-spacing:-.035em; line-height:1.02; margin:0 0 .9rem;
  text-shadow:0 0 34px rgba(200,169,81,.22);
}
.tabela__num--txt{ color:var(--ouro); font-size:clamp(1.7rem,3vw,2.3rem); }
.nb{ white-space:nowrap; }
.un{ font-size:.42em; font-weight:600; opacity:.7; letter-spacing:0; }
.seta{ color:var(--ouro); font-weight:400; font-size:.72em; }
.tabela__txt{
  margin:0; font-size:.97rem; line-height:1.62; color:rgba(255,255,255,.82);
  padding-top:.9rem; border-top:1px solid rgba(255,255,255,.16);
}

/* ---------- frentes ---------- */

/* "não é um cardápio, é um caminho": então o desenho é um caminho,
   uma linha vertical contínua que liga as cinco frentes na ordem */
.frentes{
  list-style:none; margin:clamp(1.8rem,3vw,2.4rem) 0 0; padding:0 0 0 2.6rem;
  position:relative; counter-reset:frente;
}
/* o traço liga um ponto ao próximo, e por isso ele para no último */
.frentes li:not(:last-child)::after{
  content:""; position:absolute; left:calc(-2.05rem - 1px); top:1.62rem; bottom:-.52rem;
  width:2px; background:rgba(142,114,38,.42);
}
.frentes li{
  position:relative; counter-increment:frente;
  padding:.05rem 0 1.55rem; font-size:1.0625rem; line-height:1.6;
}
.frentes li:last-child{ padding-bottom:0; }
.frentes li::before{
  content:""; position:absolute; left:-2.6rem; top:.52rem;
  width:1.1rem; height:1.1rem; border-radius:50%;
  background:var(--ouro-esc); border:2px solid var(--ouro-esc); box-sizing:border-box;
  box-shadow:0 0 0 4px rgba(142,114,38,.14);
}
.frentes strong{ font-family:var(--display); font-weight:700; }
.fecho{
  margin-top:clamp(1.8rem,3vw,2.4rem); font-family:var(--display); font-weight:700;
  font-size:var(--t-frase); line-height:1.36; letter-spacing:-.015em; max-width:32rem;
}

/* ---------- passos ---------- */

/* a primeira conversa é uma linha do tempo, então corre na horizontal.
   é o que diferencia esta seção da lista vertical de frentes */
.passos{
  list-style:none; margin:clamp(2rem,3.5vw,2.8rem) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(5,1fr); gap:0 1.1rem;
}
.passo{ position:relative; padding-top:2.1rem; }
.passo::before{
  content:""; position:absolute; top:.34rem; left:0; right:-1.1rem;
  height:1px; background:var(--tinta-tenue);
}
.passo:last-child::before{ right:0; }
.passo::after{
  content:""; position:absolute; top:0; left:0;
  width:.7rem; height:.7rem; border-radius:50%;
  background:var(--papel); border:2px solid var(--ouro-esc); box-sizing:border-box;
}
.passo--fim::after{ background:var(--ouro-esc); box-shadow:0 0 0 4px rgba(142,114,38,.16); }
.passo__marca{
  display:block; font-family:var(--mono); font-weight:600; font-size:.68rem;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ouro-esc);
  margin-bottom:.5rem;
}
.passo p{ margin:0; font-size:.93rem; line-height:1.56; color:var(--tinta-fraca); }
.passo--fim p{ font-family:var(--display); font-weight:700; font-size:.97rem; color:var(--tinta); }

/* ---------- faq ---------- */

.faq{ margin-top:1.6rem; }
.q{ border-top:1px solid var(--tinta-tenue); padding:1.05rem 0; }
.q:last-child{ border-bottom:1px solid var(--tinta-tenue); }
.q summary{
  font-family:var(--display); font-weight:700; font-size:1.08rem; line-height:1.34; letter-spacing:-.014em;
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
}
.q summary::-webkit-details-marker{ display:none; }
/* o sinal gira de mais pra menos em vez de trocar de caractere */
.q summary::after{
  content:""; flex:none; position:relative; align-self:center;
  width:.8rem; height:.8rem;
  background:
    linear-gradient(var(--ouro-esc),var(--ouro-esc)) center/100% 2px no-repeat,
    linear-gradient(var(--ouro-esc),var(--ouro-esc)) center/2px 100% no-repeat;
  transition:transform .32s cubic-bezier(.4,0,.2,1);
}
.q[open] summary::after{ transform:rotate(135deg); background-size:100% 2px, 0 100%; }
.q p{ margin:.8rem 0 0; color:var(--tinta-fraca); max-width:40rem; }
.q[open] p{ animation:abre .38s cubic-bezier(.2,.75,.3,1); }
@keyframes abre{ from{ opacity:0; transform:translateY(-.35rem); } }

/* ---------- trajetória ---------- */

.vida{ margin-top:clamp(2rem,4vw,2.6rem); display:grid; gap:0; }
.fase{
  display:grid; grid-template-columns:var(--rotulo) minmax(0,1fr); gap:0 var(--vao);
  padding:1.8rem 0; border-top:1px solid var(--tinta-tenue);
}
.fase:last-child{ border-bottom:1px solid var(--tinta-tenue); }
.fase__quando{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ouro-esc); margin:0; padding-top:.35rem; grid-row:span 4;
}
.fase__onde{ font-family:var(--display); font-weight:800; font-size:1.22rem; letter-spacing:-.015em; margin:0 0 .6rem; grid-column:2; }
.fase__txt{ grid-column:2; font-size:1rem; line-height:1.68; max-width:38rem; }
.fase__nota{
  grid-column:2; font-size:.93rem; line-height:1.6; color:var(--tinta-fraca);
  border-left:3px solid var(--ouro); padding-left:.85rem; max-width:38rem; margin-top:.3rem;
}

/* ---------- final ---------- */

.final__titulo{
  font-family:var(--display); font-weight:800; letter-spacing:-.024em; line-height:1.1;
  font-size:clamp(1.6rem,3.7vw,2.4rem); margin:0 0 1rem; max-width:20ch; text-wrap:balance;
}
.final__texto{ font-size:1.05rem; color:rgba(255,255,255,.88); max-width:33rem; margin-bottom:1.9rem; }

/* ---------- rodapé ---------- */

.rodape{
  color:rgba(255,255,255,.72);
  padding-block:clamp(2.8rem,5vw,3.8rem) 1.5rem;
}
.rodape__grade{
  display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,.65fr) minmax(0,.8fr);
  gap:2.6rem var(--vao); align-items:start;
}
/* símbolo, não a assinatura completa: a marca já apareceu no cabeçalho */
.rodape__logo{ height:54px; width:auto; display:block; margin-bottom:1.25rem; }
.rodape__frase{
  font-size:.97rem; line-height:1.62; max-width:25rem; margin:0;
  color:rgba(255,255,255,.78);
}
.rodape__col{ display:flex; flex-direction:column; align-items:flex-start; gap:.6rem; }
.rodape__ch{
  font-family:var(--mono); font-weight:600; font-size:.74rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ouro); margin:0 0 .3rem;
}
.rodape__col a{
  color:rgba(255,255,255,.82); text-decoration:none; font-size:.95rem;
  border-bottom:1px solid transparent; padding-bottom:1px;
  transition:color .2s ease, border-color .2s ease;
}
.rodape__col a:hover{ color:#fff; border-bottom-color:var(--ouro); }
.rodape__nota{
  font-family:var(--mono); font-size:.72rem; line-height:1.5; letter-spacing:.02em;
  color:rgba(255,255,255,.55); margin:.5rem 0 0; max-width:14rem;
}
.rodape__base{
  margin-top:clamp(2.4rem,4vw,3.2rem); padding-top:1.35rem;
  border-top:1px solid rgba(255,255,255,.15);
  display:flex; flex-wrap:wrap; gap:.5rem 1.6rem; align-items:baseline;
}
.rodape__txt{ font-family:var(--mono); font-size:.74rem; letter-spacing:.05em; margin:0; }
.rodape__data{ color:rgba(255,255,255,.5); }
.rodape__volta{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.05em;
  color:var(--ouro); text-decoration:none; margin-left:auto;
}
.rodape__volta::after{ content:" ↑"; }
.rodape__volta:hover{ text-decoration:underline; }

/* ---------- entrada ---------- */

@media (prefers-reduced-motion:no-preference){
  /* a equação se monta termo a termo. o IA entra com peso nas duas linhas,
     porque é o mesmo multiplicador, e só o resultado é que diverge */
  .hero .olho::before{ transform:scaleX(0); transform-origin:left center;
    animation:risca .55s cubic-bezier(.2,.75,.3,1) .05s forwards; }
  .hero .olho{ opacity:0; animation:sobe-hero .45s ease .2s forwards; }

  .eqg > .eql > *{ opacity:0; animation:eq-termo .5s cubic-bezier(.2,.75,.3,1) forwards; }
  .eqg > .eql:first-child > *:nth-child(1){ animation-delay:.34s; }
  .eqg > .eql:first-child > *:nth-child(2){ animation-delay:.46s; }
  .eqg > .eql:first-child > *:nth-child(3){ animation-delay:.54s; }
  .eqg > .eql:first-child > *:nth-child(4){ animation-delay:.66s; }
  .eqg > .eql:first-child > *:nth-child(5){ animation-delay:.74s; }
  .eqg > .eql--ruim > *:nth-child(1){ animation-delay:.90s; }
  .eqg > .eql--ruim > *:nth-child(2){ animation-delay:1.00s; }
  .eqg > .eql--ruim > *:nth-child(3){ animation-delay:1.06s; }
  .eqg > .eql--ruim > *:nth-child(4){ animation-delay:1.16s; }
  .eqg > .eql--ruim > *:nth-child(5){ animation-delay:1.22s; }

  /* o multiplicador chega batendo, não deslizando */
  .eqg .ia{ animation-name:eq-ia; animation-duration:.56s; }
  /* e o resultado ruim custa a assentar */
  .eqg .eql--ruim > .r{ animation-name:eq-bagunca; animation-duration:.78s; }

  .hero__base{ opacity:0; animation:sobe-hero .5s cubic-bezier(.2,.7,.3,1) 1.34s forwards; }

  /* a roleta engata logo depois da equação entrar */
  .roleta__fita{ animation:roleta 9s cubic-bezier(.76,0,.24,1) 1.4s infinite; }
}
@keyframes roleta{
  0%,  20% { transform:translateY(0); }
  25%, 45% { transform:translateY(-1.28em); }
  50%, 70% { transform:translateY(-2.56em); }
  75%, 95% { transform:translateY(-3.84em); }
  100%     { transform:translateY(-5.12em); }
}
@keyframes sobe{ to{ opacity:1; transform:none; } }
@keyframes sobe-hero{ from{ opacity:0; transform:translateY(.4rem); } to{ opacity:1; transform:none; } }
@keyframes risca{ to{ transform:scaleX(1); } }
@keyframes eq-termo{
  from{ opacity:0; transform:translateY(.24em); }
  to  { opacity:1; transform:none; }
}
@keyframes eq-ia{
  0%  { opacity:0; transform:translateY(.16em) scale(.82); }
  58% { opacity:1; transform:translateY(0) scale(1.07); }
  100%{ opacity:1; transform:none; }
}
@keyframes eq-bagunca{
  0%  { opacity:0; transform:translateY(.24em); }
  46% { opacity:1; transform:translateY(0); }
  58% { opacity:1; transform:translateX(.055em) skewX(-1.4deg); }
  70% { opacity:1; transform:translateX(-.045em) skewX(1.1deg); }
  82% { opacity:1; transform:translateX(.025em) skewX(-.5deg); }
  100%{ opacity:1; transform:none; }
}

/* ---------- telas médias ---------- */

@media (max-width:60rem){
  .linha,.fase{ grid-template-columns:1fr; gap:0; }
  .linha__rotulo{ padding-top:0; }
  .linha__rotulo .olho{ position:static; margin-bottom:1rem; }
  .fase__quando{ grid-row:auto; padding-top:0; margin-bottom:.5rem; }
  .fase__onde,.fase__txt,.fase__nota{ grid-column:1; }
  .metodo__grupos,.trilho{ display:none; }
  .etapas{ grid-template-columns:repeat(2,1fr); }
  /* fora da coluna estreita o traço volta a ser curto */
  .linha__rotulo .olho::before{ width:2.6rem; }
  .rodape__grade{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:2.2rem var(--vao); }
  .rodape__marca{ grid-column:1 / -1; }
  /* a trilha horizontal não cabe em cinco colunas: vira duas fileiras */
  .passos{ grid-template-columns:repeat(3,1fr); row-gap:2.2rem; }
}

/* ---------- telas pequenas ---------- */

@media (max-width:38rem){
  .btn--fantasma{ font-size:.74rem; padding:.48rem .8rem; }
  .hero__base{ grid-template-columns:1fr; align-items:start; }
  .passos{ grid-template-columns:1fr; row-gap:1.8rem; }
  .passo::before{ right:0; }
  .tabela__ln{ padding:1.3rem 1.2rem 1.2rem; }
  .rodape__grade{ grid-template-columns:1fr; gap:2rem; }
  .rodape__volta{ margin-left:0; }
}

/* ============================================================
   MOVIMENTO E PROFUNDIDADE
   O roxo deixa de ser chapado e ganha luz. O diagrama passa a
   se comportar: a cópia manual pinga sem parar, o trilho único
   se desenha uma vez e para.
   ============================================================ */

/* ---------- fundo com luz, no lugar do roxo chapado ---------- */

.band--violeta{
  background:
    radial-gradient(115% 80% at 12% -10%, #7B2BF0 0%, rgba(123,43,240,0) 58%),
    radial-gradient(90% 70% at 98% 108%, #2B0080 0%, rgba(43,0,128,0) 62%),
    var(--violeta);
  position:relative;
  overflow:hidden;
}

/* malha técnica com uma fonte de luz definida no canto superior esquerdo.
   a máscara diagonal faz a grade existir perto da luz e sumir longe dela.
   é isso que separa "roxo com textura" de "roxo iluminado" */
.band--violeta::before{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(72% 92% at 8% -6%, #000 0%, rgba(0,0,0,.5) 42%, transparent 82%);
  -webkit-mask-image:radial-gradient(72% 92% at 8% -6%, #000 0%, rgba(0,0,0,.5) 42%, transparent 82%);
}
.band--violeta::after{
  content:"";
  position:absolute; left:-6%; top:-32%; width:52%; padding-top:52%;
  pointer-events:none; z-index:0;
  background:radial-gradient(circle at center, rgba(168,120,255,.42) 0%, rgba(168,120,255,0) 66%);
  filter:blur(6px);
}
.band--violeta > .wrap{ position:relative; z-index:1; }

.rodape{
  background:linear-gradient(180deg, #35008C 0%, var(--violeta-esc) 100%);
}

/* ---------- cabeçalho que reage ao scroll ---------- */

.topo{
  position:fixed; top:0; left:0; right:0; z-index:15;
  background:transparent;
  padding-block:1rem;
  transition:background-color .28s ease, padding .28s ease, box-shadow .28s ease;
}
.topo--preso{
  background:rgba(45,0,120,.82);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px);
  padding-block:.55rem;
  box-shadow:0 1px 0 rgba(255,255,255,.14), 0 12px 30px rgba(20,0,60,.28);
}
.topo__logo{ height:70px; transition:height .28s ease; }
.topo--preso .topo__logo{ height:44px; }

/* régua de leitura: só aparece depois que o cabeçalho gruda */
.progresso{
  position:absolute; left:0; right:0; bottom:0; height:2px;
  background:rgba(255,255,255,.1); opacity:0;
  transition:opacity .3s ease;
}
.topo--preso .progresso{ opacity:1; }
.progresso__barra{
  display:block; height:100%; width:100%;
  transform:scaleX(0); transform-origin:left center;
  background:linear-gradient(90deg, var(--ouro-esc), var(--ouro));
}
.hero{ padding-top:clamp(7.5rem,13vw,9.5rem); }
#conteudo{ scroll-margin-top:6rem; }

/* ---------- geometria menos dura ---------- */

.painel{
  border-radius:var(--sup-raio);
  box-shadow:var(--sup-sombra);
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
}
.painel:hover{ transform:translateY(-3px); box-shadow:var(--sup-sombra-alta); }
.painel--depois{
  background:
    radial-gradient(100% 80% at 85% 0%, #6E1DEB 0%, rgba(110,29,235,0) 60%),
    var(--violeta);
  box-shadow:0 1px 2px rgba(40,0,110,.3), 0 18px 40px -18px rgba(60,0,170,.5);
}
.painel__marca{ border-radius:999px; }

.btn{ border-radius:999px; }
.btn--ouro{ box-shadow:0 8px 20px -10px rgba(200,169,81,.9); }
.btn--ouro:hover{ transform:translateY(-2px); box-shadow:0 14px 26px -10px rgba(200,169,81,.95); }
.btn--fantasma{ backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }


.q{ transition:background-color .2s ease; border-radius:8px; }
.q:hover{ background:rgba(23,19,31,.035); }
.q summary{ padding-inline:.5rem; }
.q p{ padding-inline:.5rem; }

/* IA com brilho, porque é o termo que a página inteira discute */
.eq__ia{
  background:linear-gradient(180deg, #F0D98C 0%, var(--ouro) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
@supports not (-webkit-background-clip: text){ .eq__ia{ -webkit-text-fill-color:var(--ouro); } }

/* ---------- o diagrama se comporta ---------- */

@media (prefers-reduced-motion:no-preference){
  /* a cópia manual nunca para: é isso que acontece na operação */
  .d-lig--manual path{ animation:pinga 1.6s linear infinite; }
  @keyframes pinga{ to{ stroke-dashoffset:-8; } }

  /* o trilho único se desenha uma vez e para */
  .js .d-trilho{ stroke-dasharray:100; stroke-dashoffset:100; }
  .painel--depois.vis .d-trilho{ animation:tracar 1.1s cubic-bezier(.4,0,.2,1) .25s forwards; }
  @keyframes tracar{ to{ stroke-dashoffset:0; } }

  .js .d-etapa circle,.js .d-etapa rect{ opacity:0; }
  .painel--depois.vis .d-etapa circle,
  .painel--depois.vis .d-etapa rect{ animation:aparece .45s ease forwards; }
  .painel--depois.vis .d-etapa circle:nth-of-type(1),.painel--depois.vis .d-etapa rect:nth-of-type(1){ animation-delay:.45s; }
  .painel--depois.vis .d-etapa circle:nth-of-type(2),.painel--depois.vis .d-etapa rect:nth-of-type(2){ animation-delay:.6s; }
  .painel--depois.vis .d-etapa circle:nth-of-type(3),.painel--depois.vis .d-etapa rect:nth-of-type(3){ animation-delay:.75s; }
  .painel--depois.vis .d-etapa circle:nth-of-type(4),.painel--depois.vis .d-etapa rect:nth-of-type(4){ animation-delay:.9s; }
  .painel--depois.vis .d-etapa circle:nth-of-type(5),.painel--depois.vis .d-etapa rect:nth-of-type(5){ animation-delay:1.05s; }
  .js .d-tx--claro text{ opacity:0; }
  .painel--depois.vis .d-tx--claro text{ animation:aparece .45s ease forwards; }
  .painel--depois.vis .d-tx--claro text:nth-of-type(1){ animation-delay:.5s; }
  .painel--depois.vis .d-tx--claro text:nth-of-type(2){ animation-delay:.65s; }
  .painel--depois.vis .d-tx--claro text:nth-of-type(3){ animation-delay:.8s; }
  .painel--depois.vis .d-tx--claro text:nth-of-type(4){ animation-delay:.95s; }
  .painel--depois.vis .d-tx--claro text:nth-of-type(5){ animation-delay:1.1s; }
  @keyframes aparece{ to{ opacity:1; } }

  /* ---------- entrada de blocos no scroll ---------- */
  .js [data-rev]{ opacity:0; transform:translateY(1.1rem); }
  .js [data-rev].vis{
    opacity:1; transform:none;
    transition:opacity .6s ease, transform .7s cubic-bezier(.2,.7,.3,1);
  }
  .metodo.vis .etapa{ animation:sobe-hero .55s cubic-bezier(.2,.7,.3,1) backwards; }
  .metodo.vis .etapa:nth-child(1){ animation-delay:.14s; }
  .metodo.vis .etapa:nth-child(2){ animation-delay:.24s; }
  .metodo.vis .etapa:nth-child(3){ animation-delay:.34s; }
  .metodo.vis .etapa:nth-child(4){ animation-delay:.44s; }
  .js .no::after{ transform:scaleX(0); }
  .js .metodo.vis .no::after{ transform:scaleX(1); transition:transform .5s cubic-bezier(.4,0,.2,1); }
  .js .metodo.vis .no:nth-child(1)::after{ transition-delay:.22s; }
  .js .metodo.vis .no:nth-child(2)::after{ transition-delay:.44s; }
  .js .metodo.vis .no:nth-child(3)::after{ transition-delay:.66s; }
  .js .no::before{ opacity:0; }
  .js .metodo.vis .no::before{ animation:aparece .35s ease forwards; }
  .js .metodo.vis .no:nth-child(1)::before{ animation-delay:.16s; }
  .js .metodo.vis .no:nth-child(2)::before{ animation-delay:.4s; }
  .js .metodo.vis .no:nth-child(3)::before{ animation-delay:.62s; }
  .js .metodo.vis .no:nth-child(4)::before{ animation-delay:.9s; }
  .tabela.vis .tabela__ln{ animation:sobe-hero .55s cubic-bezier(.2,.7,.3,1) backwards; }
  .tabela.vis .tabela__ln:nth-child(1){ animation-delay:.05s; }
  .tabela.vis .tabela__ln:nth-child(2){ animation-delay:.14s; }
  .tabela.vis .tabela__ln:nth-child(3){ animation-delay:.23s; }
  .tabela.vis .tabela__ln:nth-child(4){ animation-delay:.32s; }

  /* o número se revela por baixo, como dado chegando no painel.
     tudo aqui é keyframe com fill backwards: se a animação não rodar,
     o conteúdo aparece inteiro em vez de ficar preso invisível */
  .js .tabela.vis .tabela__num{ animation:num-revela .72s cubic-bezier(.2,.75,.25,1) backwards; }
  .js .tabela.vis .tabela__ln:nth-child(1) .tabela__num{ animation-delay:.24s; }
  .js .tabela.vis .tabela__ln:nth-child(2) .tabela__num{ animation-delay:.33s; }
  .js .tabela.vis .tabela__ln:nth-child(3) .tabela__num{ animation-delay:.42s; }
  .js .tabela.vis .tabela__ln:nth-child(4) .tabela__num{ animation-delay:.51s; }

  /* ---------- o caminho das frentes se pinta ponto a ponto ---------- */
  /* o ponto acende, o traço desce até o próximo, o próximo acende */
  .js .frentes.vis li{ animation:frente-txt .45s ease backwards; }
  .js .frentes.vis li::before{ animation:frente-ponto .34s ease backwards; }
  .js .frentes.vis li:not(:last-child)::after{ animation:frente-traco .3s cubic-bezier(.4,0,.2,1) backwards; }

  .js .frentes.vis li:nth-child(1){ animation-delay:.14s; }
  .js .frentes.vis li:nth-child(1)::before{ animation-delay:.10s; }
  .js .frentes.vis li:nth-child(1)::after{ animation-delay:.30s; }
  .js .frentes.vis li:nth-child(2){ animation-delay:.62s; }
  .js .frentes.vis li:nth-child(2)::before{ animation-delay:.58s; }
  .js .frentes.vis li:nth-child(2)::after{ animation-delay:.78s; }
  .js .frentes.vis li:nth-child(3){ animation-delay:1.10s; }
  .js .frentes.vis li:nth-child(3)::before{ animation-delay:1.06s; }
  .js .frentes.vis li:nth-child(3)::after{ animation-delay:1.26s; }
  .js .frentes.vis li:nth-child(4){ animation-delay:1.58s; }
  .js .frentes.vis li:nth-child(4)::before{ animation-delay:1.54s; }
  .js .frentes.vis li:nth-child(4)::after{ animation-delay:1.74s; }
  .js .frentes.vis li:nth-child(5){ animation-delay:2.06s; }
  .js .frentes.vis li:nth-child(5)::before{ animation-delay:2.02s; }

  /* ---------- a trilha da primeira conversa cresce até o orçamento ---------- */
  .js .passos.vis .passo::before{ animation:passo-linha .42s cubic-bezier(.4,0,.2,1) backwards; }
  .js .passos.vis .passo::after{ animation:passo-ponto .38s cubic-bezier(.2,.8,.3,1.4) backwards; }
  .js .passos.vis .passo__marca,
  .js .passos.vis .passo p{ animation:surge .45s ease backwards; }

  .js .passos.vis .passo:nth-child(1)::after{ animation-delay:.12s; }
  .js .passos.vis .passo:nth-child(1)::before{ animation-delay:.20s; }
  .js .passos.vis .passo:nth-child(1) .passo__marca,
  .js .passos.vis .passo:nth-child(1) p{ animation-delay:.20s; }
  .js .passos.vis .passo:nth-child(2)::after{ animation-delay:.54s; }
  .js .passos.vis .passo:nth-child(2)::before{ animation-delay:.62s; }
  .js .passos.vis .passo:nth-child(2) .passo__marca,
  .js .passos.vis .passo:nth-child(2) p{ animation-delay:.62s; }
  .js .passos.vis .passo:nth-child(3)::after{ animation-delay:.96s; }
  .js .passos.vis .passo:nth-child(3)::before{ animation-delay:1.04s; }
  .js .passos.vis .passo:nth-child(3) .passo__marca,
  .js .passos.vis .passo:nth-child(3) p{ animation-delay:1.04s; }
  .js .passos.vis .passo:nth-child(4)::after{ animation-delay:1.38s; }
  .js .passos.vis .passo:nth-child(4)::before{ animation-delay:1.46s; }
  .js .passos.vis .passo:nth-child(4) .passo__marca,
  .js .passos.vis .passo:nth-child(4) p{ animation-delay:1.46s; }
  .js .passos.vis .passo:nth-child(5)::after{ animation-delay:1.80s; }
  .js .passos.vis .passo:nth-child(5)::before{ animation-delay:1.88s; }
  .js .passos.vis .passo:nth-child(5) .passo__marca,
  .js .passos.vis .passo:nth-child(5) p{ animation-delay:1.88s; }

  /* as credenciais do fundador entram uma a uma */
  .js .sobre.vis .cred__ln{ animation:sobe-hero .5s ease backwards; }
  .js .sobre.vis .cred__ln:nth-child(1){ animation-delay:.22s; }
  .js .sobre.vis .cred__ln:nth-child(2){ animation-delay:.32s; }
  .js .sobre.vis .cred__ln:nth-child(3){ animation-delay:.42s; }
  .js .sobre.vis .cred__ln:nth-child(4){ animation-delay:.52s; }
}

@media (max-width:48rem){
  .eqg{ display:flex; flex-direction:column; gap:.34em; width:auto; }
  .eql{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.24em; }
}

@media (max-width:38rem){
  .topo__logo{ height:52px; }
  .topo--preso .topo__logo{ height:38px; }
  .hero{ padding-top:6.5rem; }
}

@media (max-width:38rem){
  .etapas{ grid-template-columns:1fr; }
  .regra{ padding:1.2rem 1.2rem; }
}

/* ---------- quem está por trás: um objeto só ---------- */

.sobre{
  display:grid; grid-template-columns:25rem minmax(0,1fr);
  margin-top:clamp(1.4rem,3vw,2rem);
  background:#fff; border:var(--sup-borda); border-radius:var(--sup-raio);
  overflow:hidden;
  box-shadow:0 2px 4px rgba(23,19,31,.04), 0 22px 50px -28px rgba(23,19,31,.35);
}

.sobre__foto{
  margin:0; position:relative; min-height:24rem;
  background:
    radial-gradient(120% 80% at 78% 0%, #7B2BF0 0%, rgba(123,43,240,0) 62%),
    var(--violeta);
}
/* o filete pendura do bloco do nome, então acompanha o texto e nunca cruza a foto */
.sobre__id::after{
  content:""; display:block; width:3.4rem; height:2px;
  background:var(--ouro); margin-top:1rem;
}
.sobre__img{
  position:absolute; bottom:0; left:0;
  width:110%; max-width:none; height:auto;
}
.sobre__id{ position:absolute; z-index:2; top:1.6rem; left:1.5rem; right:1.2rem; }
.sobre__nome{
  font-family:var(--display); font-weight:800; letter-spacing:-.022em; line-height:1.05;
  font-size:1.65rem; color:#fff; margin:0 0 .5rem;
}
.sobre__papel{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ouro); margin:0; padding-top:.5rem; border-top:1px solid rgba(200,169,81,.5);
  display:inline-block;
}

.sobre__texto{ padding:2.3rem 2.4rem 2.4rem 3.6rem; }

.sobre__lead{
  font-size:1.1rem; line-height:1.6; max-width:35rem;
  margin:0 0 1.5rem; padding-bottom:1.4rem;
  border-bottom:1px solid var(--tinta-tenue);
}

.cred{ margin:0; }
.cred__ln{
  display:grid; grid-template-columns:6.4rem minmax(0,1fr); gap:.3rem 1.3rem;
  padding:.95rem 0; border-bottom:1px solid var(--tinta-tenue);
}
.cred__ln:last-child{ border-bottom:0; padding-bottom:0; }
.cred__ch{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ouro-esc); margin:0; padding-top:.28rem;
}
.cred__vl{ margin:0; font-size:.97rem; line-height:1.58; max-width:30rem; }
.cred__vl strong{ font-family:var(--display); font-weight:700; }

.sobre__fecho{
  margin:1.5rem 0 0; padding-top:1.3rem; border-top:1px solid var(--tinta-tenue);
  font-family:var(--display); font-weight:700;
  font-size:1.02rem; line-height:1.45; max-width:34rem;
}

@media (max-width:60rem){
  .sobre{ grid-template-columns:1fr; }
  .sobre__foto{ min-height:28rem; }
  .sobre__img{ left:50%; transform:translateX(-50%); width:auto; height:21rem; }
  .sobre__texto{ padding:1.8rem 1.6rem 2rem; }
}
@media (max-width:38rem){
  .cred__ln{ grid-template-columns:1fr; gap:.35rem; }
  .cred__ch{ padding-top:0; }
}

/* ---------- menu de seções ---------- */

.topo__linha{ gap:1.5rem; }
.topo__marca{ display:block; flex:none; }
.topo__logo{ height:58px; }
.topo--preso .topo__logo{ height:40px; }

.menu{
  display:flex; align-items:center; gap:.35rem;
  margin-left:auto; margin-right:.4rem;
}
.menu a{
  font-family:var(--display); font-weight:600; font-size:.86rem;
  text-decoration:none; color:rgba(255,255,255,.82);
  padding:.5rem .8rem; border-radius:999px; white-space:nowrap;
  transition:color .18s ease, background-color .18s ease;
}
.menu a:hover{ color:#fff; background:rgba(255,255,255,.12); }

.topo__linha .btn--fantasma{ flex:none; }

/* âncoras não podem parar embaixo do cabeçalho fixo */
#mapa,#metodo,#resultados,#quem{ scroll-margin-top:6.5rem; }

@media (prefers-reduced-motion:no-preference){
  html{ scroll-behavior:smooth; }
}

@media (max-width:64rem){
  .menu a{ font-size:.8rem; padding:.45rem .6rem; }
  .topo__logo{ height:50px; }
}

@media (max-width:52rem){
  .menu{ display:none; }
}

/* ---------- keyframes das entradas por scroll ---------- */
@keyframes surge{ from{ opacity:0; } }
@keyframes num-revela{
  from{ clip-path:inset(0 0 100% 0); transform:translateY(.14em); }
  to  { clip-path:inset(0 0 -14% 0); transform:none; }
}
@keyframes frente-txt{ from{ color:transparent; } }
@keyframes frente-ponto{
  from{ background:var(--papel); border-color:rgba(142,114,38,.28); box-shadow:0 0 0 0 rgba(142,114,38,0); }
}
@keyframes frente-traco{ from{ transform:scaleY(0); } }
@keyframes passo-linha{ from{ transform:scaleX(0); } }
@keyframes passo-ponto{ from{ opacity:0; transform:scale(.4); } }