/*
  Estilos da página /trafego-pago.

  Escopo: tudo que redefine classe global pende de `.page-trafego` (no
  <body>), pela mesma razão de css/ativos.css — a página reaproveita
  .btn, .site-header, .site-footer e .faq__item e não pode mudar como
  eles se comportam na home ou em /ativos.

  Ritmo e tokens vêm de css/variables.css. Os valores locais abaixo são
  os mesmos de ativos.css, para as duas páginas internas terem a mesma
  medida de respiro, linha e contraste.

  Composição: preto no topo (hero), grafite nos blocos de conteúdo,
  preto de novo no FAQ, e um bloco de destaque no CTA final — todos
  escuros, como pede o briefing.
*/

.page-trafego {
  --sec-y: clamp(4.5rem, 9vw, 8rem);
  --line: rgba(255, 255, 255, 0.08);
  /* Piso de contraste do corpo de texto sobre preto: 0.78 passa AA com
     folga em 16px. Mesmo valor de ativos.css. */
  --muted: rgba(255, 255, 255, 0.78);
  --panel: #161616;
  --panel-soft: #121212;
  background-color: var(--absolute-black);
}

html {
  scroll-padding-top: 96px;
}

.page-trafego .site-header {
  background-color: var(--absolute-black);
}

/* Entrada padrão — o observador de [data-animate] do main.js adiciona
   .in-view. */
.page-trafego [data-animate]:not(.tp-track) {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease-default), transform 0.6s var(--ease-default);
}

.page-trafego [data-animate].in-view:not(.tp-track) {
  opacity: 1;
  transform: none;
}

.tp-section {
  padding-block: var(--sec-y);
}

.tp-section__head {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.tp-section__title {
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--white);
  text-align: center;
}

/*
  DESTAQUE POR SCROLL (barra branca)
  ==================================
  Na referência uma barra branca corre pela frase e o texto que ela
  cobre fica preto — texto invertido, não texto colorido.

  Implementação: cada palavra tem um ::before que é o retângulo branco,
  e a palavra em si fica ACIMA dele (z-index). A inversão vem de
  `color`, trocada junto com a largura do retângulo. Dois estados por
  palavra, controlados por uma classe que o JS acende em ordem.

  O retângulo cresce de `scaleX(0)` a `scaleX(1)` com origem à esquerda:
  é o que dá a leitura de "varredura", em vez de a palavra simplesmente
  piscar de branco para preto.
*/

.tp-reveal__w {
  position: relative;
  display: inline-block;
  /*
    `isolation` cria um contexto de empilhamento na própria palavra, para
    o ::before (z-index negativo) ficar atrás do texto mas À FRENTE do
    fundo da seção. Sem isso ele atravessa para trás do <section> e a
    barra simplesmente não aparece.
  */
  isolation: isolate;
  /* O branco de partida: a frase é legível antes de qualquer scroll. */
  color: var(--white);
  transition: color 0.18s linear;
}

.tp-reveal__w::before {
  content: "";
  position: absolute;
  /*
    Folga vertical e lateral. A lateral precisa ser METADE DO ESPAÇO
    entre palavras (0.5 × ~0.26em da fonte) para que o retângulo de uma
    encoste no da seguinte: com uma folga menor sobrava uma costura preta
    em cada espaço e a frase lia como caixas soltas, não como a faixa
    contínua da referência.
  */
  inset: -0.1em -0.14em -0.14em;
  z-index: -1;
  background-color: var(--white);
  transform: scaleX(0);
  transform-origin: left center;
  /*
    Só três palavras são destacadas, então a varredura avança em três
    passos. Uma transição um pouco mais longa que a original (0.26s)
    costura esses passos: cada retângulo ainda está crescendo quando o
    seguinte começa, e o conjunto lê como uma barra única atravessando a
    linha, não como três blocos piscando em sequência.
  */
  transition: transform 0.38s var(--ease-default);
}

.tp-reveal__w.is-lit {
  /* Texto invertido sob a barra. */
  color: var(--absolute-black);
}

.tp-reveal__w.is-lit::before {
  transform: scaleX(1);
}

.tp-section__lead {
  margin-top: 1.25rem;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.7;
}

/* ---------------------------------------------------------------- */
/* HERO                                                              */
/* ---------------------------------------------------------------- */

/*
  Mesma montagem da hero da home: centralizada, com o gradiente preto
  -> verde-escuro e o canto inferior arredondado. O recurso visual fica
  ABAIXO do texto, como lá.
*/
/* ---------------------------------------------------------------- */
/* HERO: trilha de barras                                            */
/* ---------------------------------------------------------------- */

/*
  Reprodução do efeito da hero de sui.io/defi. A estrutura, a geometria
  (alturas e deslocamentos em svh) e o percurso do scroll são os mesmos
  da referência; o que muda é a paleta:

    #298DFF (azul)       -> #E06819 (laranja da marca)
    #121315 (preto)      -> #0E0E0E (preto da marca)
    #6C788C -> #7C7872   (reflexo médio)
    #C3C8D0 -> #CCC8C3   (reflexo claro)

  Os dois reflexos são CINZAS na referência, não azul: a saturação deles
  é ~30, contra ~214 do azul. Só o azul carrega a cor da marca. Numa
  primeira versão traduzi os três para laranja e o resultado foi uma
  parede de laranja chapado — na referência o pico de cor é estreito e o
  resto da barra é preto com um reflexo.

  Mantive o papel e a LUMINOSIDADE deles (118.9 -> 120.4 e 199.5 ->
  200.5), tirando só o viés azul do Sui, que destoava do laranja.

  A referência prende a hero com ScrollTrigger (pin + scrub) e anima as
  barras numa timeline. Aqui o pin é `position: sticky` e o percurso vem
  de uma custom property escrita pelo JS — mesmo resultado, sem trazer o
  GSAP para o projeto.
*/

.tp-hero {
  position: relative;
  /*
    Altura = curso da cena. Os primeiros 100svh ficam presos; o resto é
    o quanto a pessoa rola antes de soltar.
  */
  height: 200svh;
  background-color: var(--absolute-black);
}

/* O bloco que gruda: equivale ao .background-track_sticky da referência
   (height: 100svh; position: sticky; top: 0; overflow: hidden). */
.tp-hero__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  /*
    `display: block` e não flex: o .tp-hero__content agora é um grid de
    altura cheia que posiciona título e parágrafo sozinho. Centralizar
    por fora, como antes, colapsava esse grid na altura do conteúdo e
    jogava os dois de volta grudados no meio da tela.
  */
  display: block;
  text-align: center;
  overflow: hidden;
  background-color: var(--absolute-black);
}

.tp-track {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/*
  Grade de pontos do fundo. A referência usa um PNG; aqui é
  radial-gradient repetido — um arquivo a menos para servir e a cor
  acompanha os tokens.
*/
/*
  Mesma grade de pontos da hero de /ativos: lá ela é o assets/hero-grid.png,
  um tile de 14x14 com um ponto de 2x2 na cor rgba(45, 45, 48, 222/255).
  Os valores abaixo são os daquele arquivo, lidos dele — o mesmo tom e o
  mesmo passo, só que desenhados em CSS em vez de servidos como imagem.
*/
.tp-track__pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    rgba(45, 45, 48, 0.87) 1px,
    transparent 1px
  );
  background-size: 14px 14px;
}

/* .background-track_holder: flex com as barras alinhadas na base. */
/*
  Mesmo retângulo da tela: as barras se alinham na base dele e sobem
  conforme a própria altura, e o --y0 desloca cada uma a partir daí.

  Já tentei alongar o holder para "dar folga" ao percurso e foi pior: com
  align-items:flex-end, a base de referência desce junto e sete das dez
  barras foram parar abaixo do quadro visível. O transbordo de quem sobe
  é resolvido pelo overflow:hidden do sticky, não por altura extra aqui.
*/
.tp-track__holder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
}

.tp-track__bar {
  /*
    Cada barra ocupa uma fração igual da largura. `min-width: 0` impede
    que uma barra alta force a coluna a crescer.

    A referência mostra colunas separadas, com preto entre elas — não uma
    faixa contínua de laranja. Sem essa borda, barras vizinhas de altura
    parecida se fundiam num bloco só e o desenho de gráfico se perdia.
    A borda é transparente e o fundo não a cobre (background-clip), então
    o preto da cena aparece no vão sem custar um pixel de layout.
  */
  flex: 1 1 0;
  min-width: 0;
  /*
    `box-sizing: border-box` é obrigatório aqui: com `content-box`, os
    3px de cada lado das dez barras somam 60px ALÉM da largura do flex,
    o holder fica mais largo que a tela e a página inteira ganha rolagem
    horizontal — o que empurrava título e parágrafo para fora no celular.
  */
  box-sizing: border-box;
  border-inline: 3px solid transparent;
  background-clip: padding-box;
  /*
    --y0 é a posição de partida e --y1 o fim do percurso; --t (0 a 1) é
    escrito pelo JS conforme o scroll e interpola entre as duas. É o
    equivalente ao `scrub` do ScrollTrigger.
  */
  transform: translate3d(
    0,
    calc(var(--y0) + (var(--y1) - var(--y0)) * var(--t, 0)),
    0
  );
  /*
    Sem `will-change: transform` de propósito. Com ele, as dez barras
    viram camadas de GPU permanentes — e como várias passam de 70svh de
    altura, isso corrompia a textura em algumas placas (bloco de cor
    errada e recortes duros na tela). O translate já é composto sem
    ajuda, então não havia ganho a defender.
  */
}

/* Geometria exata da referência. */
/*
  Geometria exata da referência: altura de cada barra e o percurso que
  ela faz durante a cena (--y0 -> --y1), nos mesmos valores em svh que
  o site original declara.
*/
.tp-track__bar--first {
  height: 33.3svh;
  --y0: 1.6svh;
  --y1: -22.67svh;
}

.tp-track__bar--second {
  height: 76.2svh;
  --y0: 29.6svh;
  --y1: 6.33svh;
}

.tp-track__bar--third {
  height: 42.4svh;
  --y0: 12.3svh;
  --y1: -11.56svh;
}

.tp-track__bar--forth {
  height: 62.9svh;
  --y0: -4svh;
  --y1: -28.56svh;
}

.tp-track__bar--sixth {
  height: 37.6svh;
  --y0: -16.3svh;
  --y1: -40.63svh;
}

.tp-track__bar--seventh {
  height: 47.2svh;
  --y0: -28svh;
  --y1: -53.56svh;
}

.tp-track__bar--eight {
  height: 47.2svh;
  --y0: -30.1svh;
  --y1: -4svh;
}

.tp-track__bar--tenth {
  height: 62.9svh;
  --y0: -38.6svh;
  --y1: 6.44svh;
}

.tp-track__bar--eleventh {
  height: 42.4svh;
  --y0: -75.2svh;
  --y1: -31.33svh;
}

.tp-track__bar--twelve {
  height: 76.2svh;
  --y0: -60.5svh;
  --y1: -14.56svh;
}

/*
  COR DAS BARRAS
  ==============
  Laranja chapado em cima, apagando para preto embaixo — é o que a
  referência mostra: o pico de cor fica no topo da barra e ela se
  dissolve no fundo antes de encostar na base do quadro.

  A versão anterior terminava as barras em cinza claro (#ccc8c3), herdado
  do reflexo metálico do site de origem. Sobre o preto da marca aquilo
  lia como uma segunda barra clara em cima da laranja, e não como uma
  barra sumindo. Saiu.

  O ponto em que cada gradiente vira preto muda de barra para barra: as
  mais altas apagam mais cedo (em proporção da própria altura), o que dá
  a sensação de profundidade do original — as da direita somem no fundo.
*/

.tp-track__bar {
  background-image: linear-gradient(
    180deg,
    var(--tp-bar-top, #f0894a) 0%,
    #e06819 var(--tp-bar-mid, 34%),
    #8d3f0d var(--tp-bar-fade, 62%),
    rgba(14, 14, 14, 0) var(--tp-bar-out, 88%)
  );
}

/* Barras curtas da esquerda: cor até bem perto da base. */
.tp-track__bar--first,
.tp-track__bar--third {
  --tp-bar-mid: 46%;
  --tp-bar-fade: 78%;
  --tp-bar-out: 100%;
}

/* Barras médias. */
.tp-track__bar--second,
.tp-track__bar--forth,
.tp-track__bar--sixth {
  --tp-bar-mid: 34%;
  --tp-bar-fade: 62%;
  --tp-bar-out: 92%;
}

/* Barras altas: apagam mais cedo, afundando no preto. */
.tp-track__bar--seventh,
.tp-track__bar--eight {
  --tp-bar-mid: 24%;
  --tp-bar-fade: 56%;
  --tp-bar-out: 96%;
}

/*
  As da direita são as que mais se perdem no fundo.

  O --tp-bar-out fica em 100%: com um valor menor, o gradiente terminava
  no meio da barra e o resto dela virava preto chapado — o que desenhava
  uma linha horizontal dura exatamente onde a cor acabava. Indo até a
  base, a barra chega transparente e a transição é contínua.
*/
.tp-track__bar--tenth,
.tp-track__bar--eleventh,
.tp-track__bar--twelve {
  --tp-bar-top: #f4a06a;
  --tp-bar-mid: 18%;
  --tp-bar-fade: 50%;
  --tp-bar-out: 100%;
}

/* .background-track-holder_overlay: fade para preto no pé da cena. */
/*
  Fica na .tp-track (tamanho da tela), e não no holder, que agora
  transborda: ancorado no holder, o fade cairia 80svh abaixo do quadro.
*/
.tp-track__overlay {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: 100%;
  height: 35.67svh;
  background-image: linear-gradient(rgba(0, 0, 0, 0), #000);
}

/*
  SEM VÉU ATRÁS DO TEXTO
  ======================
  Havia aqui um radial escuro sob o título. Na referência não existe: o
  texto branco cai direto sobre as barras e o contraste vem do próprio
  gradiente delas, que já é escuro na faixa central onde o título passa.

  O véu apagava justamente as barras do meio — as que mais aparecem
  atrás do título — e entregava um borrão cinza no centro da tela.

  Não há sombra no texto: o contraste vem do próprio gradiente das
  barras, que é escuro na faixa central por onde o título passa.
*/

/*
  LAYOUT DO TEXTO
  ===============
  Na referência o título fica no centro óptico da tela e o parágrafo
  desce para perto do pé, separado dele — não é um bloco único
  centralizado. O grid abaixo faz isso: título no meio, parágrafo na
  última faixa.
*/
.tp-hero__content {
  position: relative;
  /* Acima das barras. */
  z-index: 2;
  width: 100%;
  height: 100%;
  display: grid;
  /*
    UMA ÚNICA FAIXA, do topo ao pé da tela.

    Antes eram três (1fr auto 1fr) com o título na do meio. O problema é
    que a faixa de baixo carrega o parágrafo e a de cima está vazia: com
    o padding simétrico, o centro da faixa do meio NÃO é o centro da
    tela, e o título subia alguns pixels.

    Agora título e parágrafo dividem a mesma célula e cada um se alinha
    sozinho (center / end). O título passa a ser centralizado contra a
    altura cheia do sticky — o centro real da tela — sem que o parágrafo
    tenha qualquer influência sobre onde ele cai.
  */
  grid-template-rows: 1fr;
  padding-block: clamp(4rem, 10svh, 7rem);
  /*
    A referência move o bloco de texto em yPercent:-70 durante a cena.
    --tc é o mesmo progresso do scroll, escrito pelo JS.
  */
  transform: translate3d(0, calc(-70% * var(--tc, 0)), 0);
}

/*
  Eyebrow, botão e micro-copy não aparecem na referência: lá a hero tem
  só título e parágrafo, e a conversão fica nas seções seguintes.
  Continuam no HTML porque o link para o quiz é o caminho principal da
  página — o botão volta a aparecer assim que a cena solta, na seção de
  desafios. Aqui ficam fora do fluxo visual da cena.
*/
.tp-hero__eyebrow,
.tp-hero__actions,
.tp-hero__micro {
  display: none;
}

.tp-hero__title {
  /* Mesma célula do parágrafo; centralizado na altura toda. */
  grid-area: 1 / 1;
  align-self: center;
  margin: 0;
  margin-inline: auto;
  /*
    ~18ch quebra a frase em duas linhas ("Coloque sua marca na" /
    "frente de quem compra"), como na referência — com 14ch ela caía em
    três.

    O `min()` com 100% é o que impede o estouro: 18ch de uma fonte de
    ~2.3rem é mais largo que um celular, e sem o limite de 100% a frase
    saía pelos dois lados da tela. Onde não couber, ela quebra em mais
    linhas, que é o certo.
  */
  max-width: min(100%, 18ch);
  /*
    Sentence case e peso 700: na referência o título é uma frase, não um
    letreiro em caixa alta. O `text-transform: none` é explícito porque o
    HTML está escrito em maiúsculas.
  */
  text-transform: none;
  font-size: clamp(2.3rem, 6.4vw, 5rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--white);
}

.tp-hero__text {
  /* Mesma célula do título, encostado no pé — como na referência. */
  grid-area: 1 / 1;
  align-self: end;
  margin: 0;
  margin-inline: auto;
  /*
    A medida acompanha o corpo maior: em `ch` o limite é de caracteres
    por linha, então aumentar a fonte sem mexer aqui alargaria o bloco
    em pixels e ele passaria a competir com o título.
  */
  max-width: 32ch;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  line-height: 1.5;
}

/*
  Entrada: cada barra entra de uma ponta, alternando (é o revealTl da
  referência, yPercent 100/-100). Lá há também um wipe de clipPath; aqui
  é opacidade, porque clip-path animado sobre camadas deste tamanho
  corrompia a textura na GPU — aparecia bloco de cor errada no canto da
  tela. O efeito lido é o mesmo.
*/
.tp-track__bar {
  animation: tp-bar-in 0.9s var(--ease-default) backwards;
}

.tp-track__bar:nth-child(odd) {
  animation-name: tp-bar-in-up;
}

.tp-track__bar:nth-child(even) {
  animation-name: tp-bar-in-down;
}

.tp-track__bar:nth-child(1) { animation-delay: 0s; }
.tp-track__bar:nth-child(2) { animation-delay: 0.08s; }
.tp-track__bar:nth-child(3) { animation-delay: 0.16s; }
.tp-track__bar:nth-child(4) { animation-delay: 0.24s; }
.tp-track__bar:nth-child(5) { animation-delay: 0.32s; }
.tp-track__bar:nth-child(6) { animation-delay: 0.4s; }
.tp-track__bar:nth-child(7) { animation-delay: 0.48s; }
.tp-track__bar:nth-child(8) { animation-delay: 0.56s; }
.tp-track__bar:nth-child(9) { animation-delay: 0.64s; }
.tp-track__bar:nth-child(10) { animation-delay: 0.72s; }

@keyframes tp-bar-in-up {
  from {
    opacity: 0;
    transform: translate3d(0, calc(var(--y0) + 100%), 0);
  }
}

@keyframes tp-bar-in-down {
  from {
    opacity: 0;
    transform: translate3d(0, calc(var(--y0) - 100%), 0);
  }
}

@media (max-width: 767px) {
  /*
    A referência encurta estas quatro e esconde as duas últimas no
    mobile. Mesmos valores.
  */
  .tp-track__bar--sixth {
    height: 30.3svh;
    --y0: -20.57svh;
  }

  .tp-track__bar--seventh {
    height: 38.05svh;
    --y0: -30.05svh;
  }

  .tp-track__bar--eight {
    height: 38.05svh;
    --y0: -31.77svh;
  }

  .tp-track__bar--tenth {
    height: 27.33svh;
    --y0: -49.01svh;
  }

  .tp-track__bar--eleventh,
  .tp-track__bar--twelve {
    display: none;
  }

  /*
    A grade não muda de passo no celular: 14px é o tile da hero de
    /ativos e é o que mantém as duas páginas iguais. O valor que havia
    aqui (18px) foi calculado quando a base era 26px — mantido agora,
    deixaria os pontos MAIORES no celular que no desktop.
  */

  /*
    No celular as duas linhas do título chegam quase na borda. Reduzir
    um pouco o corpo devolve a margem lateral sem jogar a frase para
    três linhas.
  */
  .tp-hero__title {
    /*
      6.4vw (o valor base) em 430px dá ~27px e a frase ainda encosta nas
      bordas. 5.9vw com teto de 2.1rem mantém as duas linhas da
      referência e devolve a margem lateral.
    */
    font-size: clamp(1.5rem, 5.9vw, 2.1rem);
    letter-spacing: -0.02em;
  }

  /* Barras mais estreitas pedem um vão menor entre elas. */
  .tp-track__bar {
    border-inline-width: 2px;
  }
}

/*
  Menos movimento: a cena perde a altura extra (sem scroll preso), as
  barras ficam na posição inicial e nada entra animado.
*/
@media (prefers-reduced-motion: reduce) {
  .page-trafego .tp-hero {
    height: auto;
  }

  .page-trafego .tp-hero__sticky {
    position: relative;
    min-height: 100svh;
    height: auto;
  }

  .tp-track__bar {
    animation: none;
  }

  .page-trafego .tp-hero__content {
    transform: none;
    /*
      Sem a cena presa, a hero tem min-height e não height: o grid de
      altura cheia perde a referência. Volta a ser um bloco simples, com
      o parágrafo logo abaixo do título.
    */
    display: block;
    height: auto;
  }

  .page-trafego .tp-hero__text {
    margin-top: 1.5rem;
  }
}

/* ---------------------------------------------------------------- */
/* DESAFIOS                                                          */
/* ---------------------------------------------------------------- */

.tp-pains {
  background-color: var(--absolute-black);
}

.tp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(2.5rem, 6vw, 4rem);
}

.tp-card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2rem);
  border-radius: clamp(16px, 2vw, 22px);
  background-color: var(--panel);
  border: 1px solid var(--line);
}

.tp-card__icon {
  display: inline-flex;
  align-self: flex-start;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
  color: var(--light-green);
}

.tp-card__icon svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
}

.tp-card__title {
  color: var(--white);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
}

.tp-card__text {
  margin-top: 0.75rem;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}

@media (max-width: 720px) {
  .tp-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------- */
/* SOLUÇÕES                                                          */
/* ---------------------------------------------------------------- */

.tp-solutions {
  background-color: var(--panel-soft);
}

/*
  CANAIS — linhas full-bleed com preenchimento no hover
  =====================================================
  Mesmo efeito do catálogo de /ativos ("O que entregamos"): um ::before
  branco desce sobre a linha (scaleY com origem no topo) e o texto
  inverte para escuro, com o CTA virando laranja.

  As classes são próprias (.tp-channel) em vez de reaproveitar .catalog:
  aquele CSS mora em css/ativos.css, que esta página não carrega. Os
  valores de transição e as curvas são os mesmos, para as duas páginas
  se moverem igual.
*/

/*
  A lista é full-bleed: mora fora do .container e o recuo vem do padding
  de cada linha. É o que faz o traço ir de borda a borda.
*/
.tp-channels {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  border-top: 1px solid var(--line);
}

/*
  A grade de 3 colunas com largura fixa nas laterais é o que mantém os
  CTAs alinhados: em todas as linhas o botão começa na mesma coordenada
  X e fica centrado na altura da linha, qualquer que seja o tamanho do
  texto.

  `isolation: isolate` cria o contexto de empilhamento que deixa o
  ::before usar z-index: -1 e ficar atrás do texto sem sumir atrás do
  fundo da seção.
*/
.tp-channel {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(0, 2.4fr) auto;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
  padding-inline: clamp(1.25rem, 8vw, 7rem);
  border-bottom: 1px solid var(--line);
}

/*
  O preenchimento branco. scaleY com origem no topo roda no compositor,
  em vez de animar `height` e disparar layout a cada quadro.
*/
.tp-channel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--white);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s cubic-bezier(0, 0.4, 0.25, 1);
}

.tp-channel__name {
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--white);
  transition: color 0.3s cubic-bezier(0, 0.4, 0.25, 1);
}

.tp-channel__copy {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  /* Limite de medida, não de coluna: a grade continua igual (os CTAs
     não saem do lugar) e só o texto quebra antes. */
  max-width: 58ch;
}

.tp-channel__desc,
.tp-channel__detail {
  font-size: 0.9375rem;
  line-height: 1.6;
  transition: color 0.3s cubic-bezier(0, 0.4, 0.25, 1);
}

.tp-channel__desc {
  color: var(--muted);
}

.tp-channel__detail {
  color: rgba(255, 255, 255, 0.72);
}

.tp-channel__cta {
  justify-self: end;
  /* Mais rápido que o resto, como em /ativos. */
  transition: background-color 0.15s cubic-bezier(0, 0.485, 0.25, 1),
    color 0.15s cubic-bezier(0, 0.485, 0.25, 1);
}

/*
  Só em ponteiro fino: no toque o :hover "gruda" depois do tap e a linha
  ficaria branca até a pessoa tocar em outro lugar. O :focus-within
  cobre a navegação por teclado, que é como o CTA é alcançado sem mouse.
*/
@media (hover: hover) and (pointer: fine) {
  .tp-channel:hover::before {
    transform: scaleY(1);
  }

  .tp-channel:hover .tp-channel__name {
    /*
      --black (#0E0E0E) é exatamente o valor que /ativos usa no --ink
      daquela página. Não dá para usar `var(--ink)` aqui: aquele token é
      declarado dentro de css/ativos.css, que esta página não carrega —
      o nome herdava o branco e sumia no preenchimento branco do hover.
    */
    color: var(--black);
  }

  .tp-channel:hover .tp-channel__desc,
  .tp-channel:hover .tp-channel__detail {
    color: #55585e;
  }

  .tp-channel:hover .tp-channel__cta {
    background-color: var(--orange);
    color: var(--white);
  }
}

.tp-channel:focus-within::before {
  transform: scaleY(1);
}

.tp-channel:focus-within .tp-channel__name {
  color: var(--black);
}

.tp-channel:focus-within .tp-channel__desc,
.tp-channel:focus-within .tp-channel__detail {
  color: #55585e;
}

.tp-channel:focus-within .tp-channel__cta {
  background-color: var(--orange);
  color: var(--white);
}

@media (max-width: 900px) {
  .tp-channel {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .tp-channel__cta {
    justify-self: start;
    margin-top: 0.25rem;
  }

  /*
    O <br> do nome existe para a coluna estreita do desktop. Numa coluna
    só ele deixaria "Meta" e "Ads" em linhas separadas sem necessidade.
  */
  .tp-channel__name br {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* A troca de estado continua; só o movimento sai. */
  .tp-channel::before,
  .tp-channel__name,
  .tp-channel__desc,
  .tp-channel__detail,
  .tp-channel__cta {
    transition: none;
  }
}

/* ---------------------------------------------------------------- */
/* MÉTODO                                                            */
/* ---------------------------------------------------------------- */

/*
  MÉTODO — ROLAGEM HORIZONTAL COM A SEÇÃO PRESA
  =============================================
  A seção é alta (várias telas); dentro dela o .tp-method__sticky prende
  uma tela e a .tp-method__track desliza para a esquerda. O scroll
  vertical vira avanço horizontal.

  O percurso é escrito pelo JS em --mt (0 a 1) e o CSS interpola: a
  trilha anda de 0 até -(largura da trilha - 100vw). Esse valor é
  medido pelo JS e guardado em --mt-dist, porque só ele conhece a
  largura real do conteúdo depois que a fonte carrega.
*/

.tp-method {
  position: relative;
  /*
    Altura = curso da cena. O percurso horizontal é o mesmo em qualquer
    valor daqui (ele vem da largura da trilha), então esta altura regula
    só QUANTA ROLAGEM cobre a cena: menos altura, cena mais rápida e
    página presa por menos tempo.

    150svh é meia tela de rolagem por etapa. Abaixo disso a trilha anda
    rápido demais para a leitura acompanhar.
  */
  height: 150svh;
  padding-block: 0;
  background-color: var(--absolute-black);
}

/*
  O QUADRO DA CENA
  ================
  Não é 100svh. Com uma tela cheia, o conteúdo (que é uma faixa de
  texto de poucas linhas) ficava no meio de um vazio preto enorme em
  cima e embaixo, e a seção lia como comprida demais.

  Aqui a altura acompanha o conteúdo: o suficiente para a faixa de texto
  e o fio de progresso, com respiro. `top` centra o que sobra da tela,
  para a cena não grudar no topo enquanto está presa.
*/
.tp-method__sticky {
  position: sticky;
  height: clamp(26rem, 58svh, 34rem);
  top: calc((100svh - clamp(26rem, 58svh, 34rem)) / 2);
  display: flex;
  align-items: center;
  /* A trilha transborda à direita; é esse corte que a esconde. */
  overflow: hidden;
}

/*
  A trilha: largura automática (soma dos painéis) e deslocamento
  horizontal preso ao scroll.
*/
.tp-method__track {
  display: flex;
  align-items: center;
  /* Não encolher os painéis para caber: eles DEVEM transbordar. */
  flex: none;
  gap: clamp(3rem, 10vw, 11rem);
  padding-inline: var(--section-padding-x);
  transform: translate3d(calc(var(--mt-dist, 0px) * var(--mt, 0) * -1), 0, 0);
}

/* Painel de abertura: título grande à esquerda, chamada à direita. */
.tp-method__intro {
  flex: none;
  display: flex;
  align-items: flex-start;
  gap: clamp(3rem, 10vw, 11rem);
}

.tp-method__title {
  flex: none;
  max-width: 11ch;
  margin: 0;
  font-size: clamp(2.2rem, 5.2vw, 4.2rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--white);
}

.tp-method__lead {
  flex: none;
  width: clamp(20rem, 34vw, 30rem);
  margin: 0;
  color: var(--muted);
  font-size: clamp(0.95rem, 1.25vw, 1.15rem);
  font-weight: 500;
  line-height: 1.5;
}

/*
  As quatro etapas, lado a lado na mesma trilha. `list-style: none` e
  margem zerada porque continua sendo um <ol> — a ordem é informação,
  não só desenho.
*/
.tp-method__list {
  flex: none;
  display: flex;
  align-items: flex-start;
  gap: clamp(3rem, 10vw, 11rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tp-step {
  flex: none;
  width: clamp(16rem, 24vw, 22rem);
  /* Sem borda no topo: na referência o fio é único, na base da cena. */
  padding-top: 0;
  border-top: 0;
}

.tp-step__num {
  display: block;
  color: var(--orange);
  font-size: clamp(1.1rem, 1.6vw, 1.5rem);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.tp-step__title {
  margin-top: 0.35rem;
  color: var(--white);
  font-size: clamp(1.8rem, 3.4vw, 2.9rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.015em;
}

.tp-step__text {
  margin-top: 1.1rem;
  color: var(--muted);
  font-size: clamp(0.9rem, 1.15vw, 1.05rem);
  font-weight: 500;
  line-height: 1.5;
}

/*
  O fio da base, de borda a borda, com o trecho laranja de progresso —
  é a barra de rolagem da cena.
*/
.tp-method__rule {
  position: absolute;
  left: var(--section-padding-x);
  right: var(--section-padding-x);
  /* Colado na base do quadro, que agora é do tamanho do conteúdo. */
  bottom: clamp(2rem, 5svh, 3.5rem);
  height: 1px;
  background-color: var(--line);
}

.tp-method__progress {
  position: absolute;
  inset: 0 auto 0 0;
  /* Nunca some: começa com um traço visível e cresce até a largura toda. */
  width: calc(5% + 95% * var(--mt, 0));
  background-color: var(--orange);
  /* 2px para o laranja ler sobre o fio de 1px. */
  height: 2px;
  top: -0.5px;
}

/*
  TELAS ESTREITAS E SEM MOVIMENTO
  ===============================
  Abaixo de 900px a cena horizontal sai: numa tela estreita cada painel
  ocuparia quase a largura toda e o percurso ficaria longo demais para
  ler. Volta a ser o que sempre foi — uma lista vertical, que é também
  o fallback de `prefers-reduced-motion`.
*/
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .page-trafego .tp-method {
    height: auto;
    padding-block: var(--sec-y);
  }

  .page-trafego .tp-method__sticky {
    position: relative;
    height: auto;
    display: block;
    overflow: visible;
  }

  .page-trafego .tp-method__track {
    display: block;
    transform: none;
    padding-inline: 0;
    /* Devolve a medida do .container, que a cena não usava. */
    width: 100%;
    max-width: var(--container-width);
    margin-inline: auto;
    padding-inline: var(--section-padding-x);
  }

  .page-trafego .tp-method__intro {
    display: block;
  }

  .page-trafego .tp-method__title {
    max-width: 18ch;
  }

  .page-trafego .tp-method__lead {
    width: auto;
    max-width: 60ch;
    margin-top: 1.25rem;
  }

  .page-trafego .tp-method__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(2rem, 5vw, 3rem);
    margin-top: clamp(2.5rem, 6vw, 4rem);
  }

  .page-trafego .tp-step {
    width: auto;
    padding-top: 1.25rem;
    border-top: 2px solid var(--line);
  }

  .page-trafego .tp-step:first-child {
    border-top-color: var(--orange);
  }

  /* O fio de progresso não tem o que medir fora da cena. */
  .page-trafego .tp-method__rule {
    display: none;
  }
}

@media (max-width: 560px) {
  .page-trafego .tp-method__list {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------- */
/* DIFERENCIAIS                                                      */
/* ---------------------------------------------------------------- */

.tp-edge {
  background-color: var(--absolute-black);
}

/*
  DIFERENCIAIS — painéis
  ======================
  Na referência cada item é um painel escuro solto sobre o preto, em
  duas colunas com folga entre eles. A versão anterior era uma grade de
  traços (bordas de 1px entre as células); o desenho agora é de blocos.

  A ordem de leitura é por COLUNA na imagem, mas um grid preenche por
  LINHA — por isso a sequência no HTML alterna entre as colunas, para o
  resultado bater com a referência sem precisar de grid-auto-flow:
  column, que exigiria fixar o número de linhas.
*/

.tp-edge__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.75rem, 1.6vw, 1.1rem);
  margin-top: clamp(2.5rem, 6vw, 4rem);
  /*
    Os painéis passam do limite do .container (1200px) para alcançar a
    largura que a referência mostra, em que eles ocupam quase toda a
    tela. A margem negativa é limitada pelo recuo da página, então em
    telas estreitas ela some sozinha e nada vaza.
  */
  margin-inline: calc(var(--section-padding-x) * -1);
  /* A lista perdeu as bordas da versão em grade. */
  border-top: 0;
  padding: 0;
  list-style: none;
}

.tp-edge__item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.85rem;
  padding: clamp(1.4rem, 3vw, 2rem) clamp(1.25rem, 2.5vw, 2rem);
  border-bottom: 0;
  background-color: var(--panel);
  color: var(--white);
  font-size: clamp(0.95rem, 1.25vw, 1.15rem);
  font-weight: 500;
  line-height: 1.4;
}

/* O quadrado laranja. */
.tp-edge__mark {
  width: 0.7em;
  height: 0.7em;
  background-color: var(--orange);
}

@media (max-width: 720px) {
  .tp-edge__list {
    grid-template-columns: 1fr;
  }

  /*
    O <br> do título existe para reproduzir a quebra da referência no
    desktop. No celular ele forçaria uma linha mais larga que a tela, com
    a frase saindo pelos dois lados; aqui a quebra volta a ser natural.
  */
  .tp-edge .tp-section__title br {
    display: none;
  }
}

/* ---------------------------------------------------------------- */
/* FAQ                                                               */
/* ---------------------------------------------------------------- */

/*
  Reaproveita o acordeão de js/faq.js pelas classes .faq__item /
  .faq__question / .faq__answer, e o visual escuro de duas colunas da
  página /ativos. Como css/ativos.css não é carregado aqui, as regras do
  .faq--dark são repetidas neste arquivo — é a mesma escolha que
  ativos.css fez em relação a css/faq.css (painel branco da home).
*/

.faq--dark {
  background-color: var(--absolute-black);
}

.faq--dark .faq__inner {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.faq--dark .faq__title {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--white);
}

.faq--dark .faq__intro {
  margin-top: 1rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.875rem;
  line-height: 1.6;
}

.faq--dark .faq__list {
  display: flex;
  flex-direction: column;
}

.faq--dark .faq__item {
  border-bottom: 1px solid var(--line);
}

.faq--dark .faq__item:first-child {
  border-top: 1px solid var(--line);
}

.faq--dark .faq__question {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding-block: 1.35rem;
  text-align: left;
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--white);
  transition: color var(--duration-default) var(--ease-default);
}

.faq--dark .faq__question:hover {
  color: var(--orange);
}

.faq--dark .faq__index {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.faq--dark .faq__icon {
  position: relative;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.faq--dark .faq__icon::before,
.faq--dark .faq__icon::after {
  content: "";
  position: absolute;
  background-color: currentColor;
  transition: transform 0.35s var(--ease-default);
}

.faq--dark .faq__icon::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  transform: translateY(-50%);
}

.faq--dark .faq__icon::after {
  left: 50%;
  top: 0;
  width: 1.5px;
  height: 100%;
  transform: translateX(-50%);
}

.faq--dark .faq__item.is-open .faq__icon::after {
  transform: translateX(-50%) rotate(90deg);
}

/* Abertura por grid-template-rows 0fr -> 1fr: anima a altura real sem
   precisar medir nada em JS. */
.faq--dark .faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.4s var(--ease-default),
    opacity 0.4s var(--ease-default);
}

.faq--dark .faq__item.is-open .faq__answer {
  grid-template-rows: 1fr;
  opacity: 1;
}

.faq--dark .faq__answer-inner {
  overflow: hidden;
  min-height: 0;
}

.faq--dark .faq__answer-text {
  padding: 0 3rem 1.4rem;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.7;
}

/*
  FUNDO CLARO COM A GRADE DE PONTOS
  =================================
  Só o FUNDO muda em relação à referência: o acordeão, a grade de duas
  colunas, os tamanhos e o comportamento continuam os mesmos — as regras
  de .faq--dark acima seguem valendo, e o que vem abaixo troca apenas
  cores.

  A inversão das cores do texto não é escolha de desenho: sobre o claro,
  o branco das regras acima ficaria ilegível. Os valores são os mesmos
  que a grade de pontos da hero usa, só que em negativo.

  A grade é radial-gradient repetido, como em .tp-track__pattern — um
  arquivo a menos para servir, e a cor acompanha os tokens.
*/

.faq--light {
  position: relative;
  background-color: #f4f4f2;
  background-image: radial-gradient(
    rgba(14, 14, 14, 0.13) 1px,
    transparent 1px
  );
  background-size: 26px 26px;
}

/* O conteúdo fica acima da grade. */
.faq--light .faq__inner {
  position: relative;
  z-index: 1;
}

.faq--light .faq__title,
.faq--light .faq__question {
  color: var(--black);
}

.faq--light .faq__intro {
  color: rgba(14, 14, 14, 0.66);
}

.faq--light .faq__index {
  color: rgba(14, 14, 14, 0.5);
}

/*
  Os fios do acordeão. --line é claro (desenhado para o fundo preto) e
  sobre o claro ele sumiria; este é o mesmo peso de traço, invertido.
*/
.faq--light .faq__item,
.faq--light .faq__item:first-child {
  border-color: rgba(14, 14, 14, 0.14);
}

.faq--light .faq__answer-text {
  color: rgba(14, 14, 14, 0.66);
}

@media (max-width: 860px) {
  .faq--dark .faq__inner {
    grid-template-columns: 1fr;
  }

  .faq--dark .faq__answer-text {
    padding-inline: 0;
  }

  .faq--dark .faq__question {
    grid-template-columns: 1.75rem 1fr auto;
    gap: 0.75rem;
  }
}

/* ---------------------------------------------------------------- */
/* CTA FINAL                                                         */
/* ---------------------------------------------------------------- */

/*
  Bloco de destaque com o mesmo gradiente e o mesmo recuo lateral
  (.section-inset) da CTA final da home — é o padrão pedido no
  briefing.
*/
/*
  CTA FINAL
  =========
  Faixa inteira com gradiente vertical: preto no topo, laranja na base.
  A versão anterior era um painel verde arredondado no meio da seção;
  aqui a cor vai de borda a borda, como na referência.

  O gradiente para em 95% e não em 100% para o laranja chegar cheio na
  base, sem a faixa esmaecida que um `to bottom` puro deixa no último
  trecho.
*/

.tp-closing {
  background-image: linear-gradient(
    180deg,
    var(--absolute-black) 0%,
    #7a3a12 48%,
    var(--orange) 78%,
    #f0894a 100%
  );
  padding-block: clamp(5rem, 12vw, 9rem);
  text-align: center;
}

.tp-closing__inner {
  max-width: 980px;
}

.tp-closing__title {
  margin-inline: auto;
  max-width: 18ch;
  font-size: clamp(2rem, 5.2vw, 3.9rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--white);
}

.tp-closing__text {
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  margin-inline: auto;
  max-width: 34ch;
  /*
    Branco esmaecido e não --muted: aquele token é cinza, pensado para o
    fundo preto, e sobre o laranja ele ficava sujo em vez de discreto.
  */
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.5;
}

.tp-closing__action {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.75rem, 1.6vw, 1.1rem);
  margin-top: clamp(2.5rem, 6vw, 4rem);
}

.tp-closing__btn {
  padding: 1.05rem 2.25rem;
  font-size: 1.02rem;
}

/*
  Os dois botões da referência. Não dá para usar .btn--primary (laranja
  sobre laranja some) nem .btn--secondary (cinza translúcido, pensado
  para o fundo preto), por isso o par abaixo é próprio desta faixa.
*/
.tp-closing__btn--solid {
  background-color: var(--absolute-black);
  color: var(--white);
}

.tp-closing__btn--solid:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

.tp-closing__btn--ghost {
  /* `inset` para a borda não somar à caixa e desalinhar a altura dos
     dois botões, que têm o mesmo padding. */
  box-shadow: inset 0 0 0 1.5px var(--white);
  color: var(--white);
}

.tp-closing__btn--ghost:hover {
  transform: translateY(-2px);
  background-color: rgba(255, 255, 255, 0.12);
}

@media (max-width: 560px) {
  .tp-closing__action {
    flex-direction: column;
    align-items: center;
  }

  .page-trafego .tp-closing__btn {
    width: 100%;
    max-width: 280px;
  }
}


/* ---------------------------------------------------------------- */
/* Correções de acessibilidade em componentes compartilhados         */
/* ---------------------------------------------------------------- */

/*
  Os dois ajustes abaixo são os mesmos que css/ativos.css aplica, pelas
  mesmas razões — os problemas vêm de css/footer.css e de js/main.js +
  css/style.css, compartilhados com a home. Ficam escopados em
  .page-trafego para não alterar as outras páginas.
*/

/* 1. Contraste do rodapé: #313131 sobre preto dá 1.61:1, muito abaixo
      do mínimo AA de 4.5:1. #8A8A8A dá 6.1:1 e mantém o tom discreto. */
.page-trafego .site-footer__link,
.page-trafego .site-footer__address,
.page-trafego .site-footer__cnpj,
.page-trafego .site-footer__copy {
  color: #8a8a8a;
}

/* 2. Nome acessível dos botões: o efeito cascata de js/main.js quebra o
      rótulo em um <span> por letra com `display: block`, o que faz o
      texto visível ser computado letra a letra e deixar de bater com o
      aria-label. `inline-block` mantém a animação e devolve o rótulo a
      uma linha só. */
.page-trafego .btn__char-inner {
  display: inline-block;
}