/* =========================================================
   ENS — Gestão de Tráfego Pago
   Estilos EXCLUSIVOS desta página.

   Tokens, header, rodapé, botões, abertura, aviso de cookies,
   .check-list e o componente de FAQ vêm de styles.css.

   Prefixo .tp- em tudo: as cinco páginas do site convivem no
   mesmo styles.css e nenhum seletor daqui alcança as outras.

   O vocabulário visual (arcos vermelhos no canto, cartões com
   ícone vermelho, fio ligando etapas) é o mesmo das páginas
   irmãs de propósito: elas precisam ler como um sistema.

   RESPONSIVO desde o começo, com o que a auditoria das páginas
   anteriores ensinou:
     · minmax(0,1fr) em toda grade larga — 1fr usa o min-content
       como mínimo, e uma palavra longa estica a coluna até vazar;
     · faixa 1025–1240, onde as grades de 5 colunas ficam com
       colunas estreitas demais;
     · faixa 561–768, onde uma coluna só desperdiça meia tela.
   ========================================================= */

/* ---------------------------------------------------------
   Peças comuns às dobras
   --------------------------------------------------------- */
.tp-eyebrow-claro { color: #6E93F2; }   /* o --blue da marca não passa em contraste sobre o preto do hero */
.tp-realce { color: var(--red); }
.tp-btn-seta .ico { width: 1.05rem; height: 1.05rem; transition: transform .25s var(--ease-out); }
.tp-btn-seta:hover .ico { transform: translateX(4px); }

/* =========================================================
   DOBRA 1 — HERO
   ========================================================= */
.tp-hero {
  position: relative;
  background: #05070E;
  color: #fff;
  padding-top: clamp(112px, 11vw, 168px);
  padding-bottom: clamp(44px, 5.4vw, 84px);
  overflow: hidden;
}
.tp-hero::before {
  content: "";
  position: absolute; top: -18%; right: -8%;
  width: 58%; height: 92%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(229,30,37,.19), transparent 70%);
  pointer-events: none;
}
/* os arcos do canto, iguais aos das páginas irmãs */
.tp-hero::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: repeating-radial-gradient(circle at 116% -12%,
    transparent 0 44px,
    rgba(229,30,37,.34) 44px 45.4px,
    transparent 45.4px 90px);
  -webkit-mask-image: linear-gradient(250deg, #000 0%, rgba(0,0,0,.5) 30%, transparent 58%);
          mask-image: linear-gradient(250deg, #000 0%, rgba(0,0,0,.5) 30%, transparent 58%);
  opacity: 0;
}
html:not(.intro-ativa) .tp-hero::after {
  animation: tp-arcos 1.5s var(--ease-out) .35s forwards;
}
@keyframes tp-arcos { to { opacity: 1; } }

.tp-hero-wrap {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(28px, 4.2vw, 64px);
  align-items: center;
}
.tp-hero-texto h1 {
  color: #fff;
  font-size: clamp(1.72rem, 2.62vw, 2.4rem);
  line-height: 1.18;
  letter-spacing: -.02em;
  margin-bottom: 18px;
  overflow-wrap: break-word;
}
.tp-hero-lead {
  color: #A0ABC4;
  font-size: clamp(.92rem, 1.02vw, 1.02rem);
  line-height: 1.66;
  max-width: 50ch;
}
.tp-hero-lead strong { color: #DCE4F5; font-weight: 700; }
.tp-hero-texto .btn { margin-top: 22px; }

/* ---------------------------------------------------------
   A CENA DO HERO — desenhada, não fotografada

   O artefato deste serviço é o anúncio no lugar onde ele
   aparece. Duas colocações, os dois canais do documento:
   um resultado patrocinado na busca (intenção) e um post
   patrocinado no feed (descoberta). O cartãozinho flutuante
   é a promessa da página: o anúncio existe para gerar
   oportunidade, não cliques.

   --m é o passo de medida. Segue a largura do PRÓPRIO bloco
   (cqw) onde houver suporte: no tablet o hero empilha e a arte
   dobra de largura — com vw ela não teria como saber.
   --------------------------------------------------------- */
.tp-hero-arte { position: relative; }
.tp-cena { --m: clamp(7px, .62vw, 10px); position: relative; padding-bottom: calc(var(--m) * 5.2); }
@supports (container-type: inline-size) {
  .tp-hero-arte { container-type: inline-size; }
  .tp-cena { --m: clamp(7px, 1.72cqw, 10.5px); }
}

/* ---- o painel de busca (atrás, à esquerda) ---- */
.tp-serp {
  width: 76%;
  border-radius: calc(var(--m) * 1.2);
  overflow: hidden;
  background: #0A0F18;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.95);
}
.tp-serp-barra {
  display: flex; align-items: center; gap: calc(var(--m) * .6);
  padding: calc(var(--m) * .9) calc(var(--m) * 1.1);
  background: rgba(255,255,255,.045);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.tp-busca {
  flex: 1;
  display: flex; align-items: center; gap: calc(var(--m) * .6);
  height: calc(var(--m) * 1.9);
  padding-inline: calc(var(--m) * .8);
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.08);
}
.tp-busca .ico { width: calc(var(--m) * .95); height: calc(var(--m) * .95); color: #6B7690; flex: none; stroke-width: 2.2; }
.tp-busca i { display: block; height: calc(var(--m) * .55); width: 58%; border-radius: 999px; background: #3A4258; }
.tp-serp-corpo { padding: calc(var(--m) * 1.15); display: grid; gap: calc(var(--m) * .95); }

/* o resultado patrocinado: é o único com selo e com a borda
   vermelha. Os outros dois são o entorno orgânico. */
.tp-res {
  display: grid; gap: calc(var(--m) * .42);
  padding: calc(var(--m) * .85) calc(var(--m) * .9);
  border-radius: calc(var(--m) * .65);
  border: 1px solid rgba(255,255,255,.06);
}
.tp-res--ads {
  border-color: rgba(229,30,37,.42);
  background: rgba(229,30,37,.07);
}
.tp-selo {
  justify-self: start;
  display: inline-flex; align-items: center; align-self: start;
  min-height: max(15px, calc(var(--m) * 1.25));
  padding-inline: calc(var(--m) * .55);
  border-radius: calc(var(--m) * .3);
  background: var(--red); color: #fff;
  font-size: max(10px, calc(var(--m) * .82)); font-weight: 800; letter-spacing: .06em;
  margin-bottom: calc(var(--m) * .2);
}
.tp-l { display: block; height: calc(var(--m) * .6); width: var(--w); border-radius: 999px; background: #333A49; }
.tp-res--ads .tp-l--t { background: #7E8DAE; height: calc(var(--m) * .78); }

/* ---- o post patrocinado (na frente, à direita) ---- */
.tp-feed {
  position: absolute; right: 0; top: 12%;
  width: 32%;
  border-radius: calc(var(--m) * 1);
  overflow: hidden;
  background: #0C111B;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 34px 70px -30px rgba(0,0,0,.95);
}
.tp-feed-topo {
  display: flex; align-items: center; gap: calc(var(--m) * .55);
  padding: calc(var(--m) * .75) calc(var(--m) * .8);
}
.tp-avatar {
  width: calc(var(--m) * 1.7); height: calc(var(--m) * 1.7); flex: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #33405C, #1E2634);
  border: 1px solid rgba(255,255,255,.1);
}
.tp-feed-nome { display: grid; gap: calc(var(--m) * .3); flex: 1; }
.tp-patrocinado {
  color: #97A2BC; font-size: max(10px, calc(var(--m) * .78)); font-weight: 700;
  letter-spacing: .04em;
}
.tp-feed-img {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #262C38, #171C25);
  border-block: 1px solid rgba(255,255,255,.07);
  position: relative;
}
/* a montanha e o sol da imagem-marcador: o mesmo desenho que as
   páginas irmãs usam, para os mockups lerem como um só sistema */
.tp-feed-img::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 30%; height: 26%; transform: translate(-50%,-50%);
  border-radius: calc(var(--m) * .25);
  background:
    radial-gradient(circle at 26% 32%, #4A5265 0 18%, transparent 19%),
    linear-gradient(to top right, transparent 44%, #4A5265 44% 62%, transparent 63%);
  border: 1px solid #4A5265;
}
.tp-feed-corpo { padding: calc(var(--m) * .8); display: grid; gap: calc(var(--m) * .45); }
.tp-acao {
  display: block; height: calc(var(--m) * 1.5); width: 100%;
  border-radius: calc(var(--m) * .38);
  background: var(--red);
  margin-top: calc(var(--m) * .35);
  box-shadow: 0 calc(var(--m)*.5) calc(var(--m)*1.4) calc(var(--m)*-.6) rgba(229,30,37,.85);
}

/* ---- o cartão de oportunidades (na frente, embaixo à esquerda)
   Sem números: as barras sobem, e é só isso que a ilustração
   tem o direito de afirmar. ---- */
.tp-cartao {
  position: absolute; left: 0; bottom: 0;
  width: 35%;
  display: grid; gap: calc(var(--m) * .7);
  padding: calc(var(--m) * 1) calc(var(--m) * 1.1);
  border-radius: calc(var(--m) * .9);
  background: rgba(12,17,27,.92);
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: 0 26px 56px -24px rgba(0,0,0,.95);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.tp-cartao-topo { display: flex; align-items: center; gap: calc(var(--m) * .5); }
.tp-cartao-topo .ico { width: calc(var(--m) * 1.15); height: calc(var(--m) * 1.15); color: var(--red); flex: none; }
.tp-cartao-rot {
  color: #97A2BC; font-size: max(10px, calc(var(--m) * .88)); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.tp-barras {
  display: flex; align-items: flex-end; gap: calc(var(--m) * .42);
  height: calc(var(--m) * 3.4);
}
.tp-barras span {
  flex: 1;
  height: var(--h);
  border-radius: calc(var(--m) * .16) calc(var(--m) * .16) 0 0;
  background: #2A3245;
  transform-origin: 50% 100%;
}
/* as três últimas são as que subiram: vermelhas */
.tp-barras span.tp-alta { background: var(--red); }
.js .tp-barras span { transform: scaleY(.12); transition: transform .6s var(--ease-out); }
.js .tp-cena.in .tp-barras span { transform: scaleY(1); }
.tp-cena.in .tp-barras span:nth-child(1) { transition-delay: .05s; }
.tp-cena.in .tp-barras span:nth-child(2) { transition-delay: .11s; }
.tp-cena.in .tp-barras span:nth-child(3) { transition-delay: .17s; }
.tp-cena.in .tp-barras span:nth-child(4) { transition-delay: .23s; }
.tp-cena.in .tp-barras span:nth-child(5) { transition-delay: .29s; }
.tp-cena.in .tp-barras span:nth-child(6) { transition-delay: .35s; }
.tp-cena.in .tp-barras span:nth-child(7) { transition-delay: .41s; }

/* =========================================================
   DOBRA 2 — ESTRATÉGIA
   A ilustração é a MIRA, não o acerto: a flecha ainda está a
   caminho. O texto fala do que precisa ser decidido ANTES de
   anunciar, e uma flecha já cravada contaria a outra história.
   ========================================================= */
.tp-estrategia { background: var(--paper); padding-block: clamp(26px, 3.1vw, 62px); }
.tp-estrategia-wrap {
  display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(26px, 4.2vw, 68px);
  align-items: center;
}
.tp-alvo-svg { width: 100%; max-width: 24rem; height: auto; display: block; margin-inline: auto; }
.tp-alvo-aneis, .tp-alvo-mira {
  fill: none; stroke: var(--t-dark); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.tp-alvo-aneis .tp-cheio { fill: var(--red); stroke: none; }
.tp-alvo-mira { stroke: #AFB9CA; stroke-width: 2; stroke-dasharray: 6 7; }
.tp-alvo-flecha { fill: none; stroke: var(--red); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
/* 900 é um comprimento com folga — só precisa ser MAIOR que o
   caminho real para o traço se desenhar do zero */
.js .tp-alvo-svg .tp-alvo-aneis,
.js .tp-alvo-svg .tp-alvo-mira {
  stroke-dasharray: 900; stroke-dashoffset: 900;
  transition: stroke-dashoffset 1.5s var(--ease-out);
}
.js .tp-alvo-svg .tp-alvo-mira { stroke-dasharray: 6 7; stroke-dashoffset: 0; opacity: 0; transition: opacity .5s ease .5s; }
.js .tp-alvo-svg.in .tp-alvo-aneis { stroke-dashoffset: 0; transition-delay: .1s; }
.js .tp-alvo-svg.in .tp-alvo-mira  { opacity: 1; }
/* a flecha chega depois dos anéis e da linha de mira */
.js .tp-alvo-svg .tp-alvo-flecha { opacity: 0; transform: translate(-14px, -14px); transition: opacity .45s ease .75s, transform .55s var(--ease-out) .75s; }
.js .tp-alvo-svg.in .tp-alvo-flecha { opacity: 1; transform: translate(0, 0); }

.tp-estrategia h2 { font-size: clamp(1.2rem, 2.08vw, 1.75rem); margin-bottom: 16px; }
.tp-estrategia-texto > p { color: var(--t-body); font-size: .92rem; line-height: 1.66; margin-bottom: .62rem; max-width: 62ch; }
.tp-estrategia-texto > p strong { color: var(--t-dark); font-weight: 700; }
/* o remate do documento, em destaque: ele é a tese da dobra.
   O seletor inclui o pai porque .tp-estrategia-texto > p viria
   depois e venceria por especificidade. */
.tp-estrategia-texto > .tp-estrategia-remate {
  margin-top: clamp(16px, 2vw, 22px);
  padding-left: 16px;
  border-left: 3px solid var(--red);
  color: var(--t-dark); font-weight: 700; font-size: .96rem; line-height: 1.6;
  max-width: 58ch;
}

/* =========================================================
   DOBRA 3 — COMO A ENS TRABALHA
   Cinco etapas em sequência. A numeração carrega informação
   (a ordem do trabalho), então ela fica. O fio é feito de
   SEGMENTOS, um por vão, e é ancorado no raio do ícone (--r):
   nasce e morre a 10px de cada círculo, em qualquer largura.
   ========================================================= */
.tp-metodo { background: var(--ink-900); color: #fff; padding-block: clamp(30px, 3.6vw, 70px); }
.tp-metodo-head { text-align: center; max-width: 58ch; margin: 0 auto clamp(28px, 3.4vw, 48px); }
.tp-metodo h2 { color: #fff; font-size: clamp(1.2rem, 2.08vw, 1.75rem); }

.tp-fluxo {
  --g: clamp(14px, 2vw, 30px);
  --r: 1.6rem;          /* metade do ícone: 3.2rem de diâmetro */
  --nh: 1.6rem;         /* faixa reservada ao número, acima do ícone */
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--g);
  list-style: none; padding: 0; margin: 0;
}
.tp-fluxo li {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding-inline: clamp(2px, .5vw, 8px);
}
.tp-fluxo-num {
  height: var(--nh);
  display: flex; align-items: center; justify-content: center;
  color: var(--red); font-weight: 800; font-size: 1rem; letter-spacing: .04em;
}
.tp-fluxo-ico {
  width: calc(var(--r) * 2); height: calc(var(--r) * 2); flex: none;
  border-radius: 999px;
  display: grid; place-items: center;
  color: var(--red);
  background: var(--ink-900);
  border: 1.5px solid rgba(229,30,37,.4);
  transition: transform .3s var(--ease-out), border-color .3s ease, background-color .3s ease;
}
.tp-fluxo-ico .ico { width: 1.5rem; height: 1.5rem; stroke-width: 1.7; }
.tp-fluxo li:hover .tp-fluxo-ico { transform: scale(1.09); border-color: var(--red); background: rgba(229,30,37,.1); }
.tp-fluxo h3 { color: #fff; font-size: .95rem; line-height: 1.3; margin: .85rem 0 .5rem; }
.tp-fluxo p { color: var(--t-dim); font-size: .81rem; line-height: 1.58; }

/* o fio tracejado entre um círculo e o próximo */
.tp-fluxo li:not(:last-child)::after {
  content: "";
  position: absolute; z-index: 0;
  top: calc(var(--nh) + var(--r) - 1px);
  left: calc(50% + var(--r) + 10px);
  width: calc(100% + var(--g) - var(--r) * 2 - 20px);
  height: 2px;
  background: repeating-linear-gradient(90deg,
    rgba(229,30,37,.55) 0 7px, transparent 7px 14px);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .45s var(--ease-out);
}
.js .tp-fluxo.in li::after,
html:not(.js) .tp-fluxo li::after { transform: scaleX(1); }
.tp-fluxo.in li:nth-child(1)::after { transition-delay: .18s; }
.tp-fluxo.in li:nth-child(2)::after { transition-delay: .32s; }
.tp-fluxo.in li:nth-child(3)::after { transition-delay: .46s; }
.tp-fluxo.in li:nth-child(4)::after { transition-delay: .60s; }

/* =========================================================
   DOBRA 4 — GOOGLE ADS + META ADS

   Marcas: não desenhamos os logotipos oficiais. Redesenhar uma
   marca registrada de memória é errar a proporção e a cor de
   alguém. Cada canal ganha o símbolo do que ele FAZ, que é o
   que o documento de fato diferencia: busca (intenção) de um
   lado, públicos (descoberta) do outro.
   ========================================================= */
.tp-canais { background: var(--paper); padding-block: clamp(26px, 3.1vw, 62px); }
.tp-canais-head { text-align: center; max-width: 56ch; margin: 0 auto clamp(24px, 3vw, 44px); }
.tp-canais h2 { font-size: clamp(1.2rem, 2.08vw, 1.75rem); }
.tp-canais-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .82fr) minmax(0, 1.1fr);
  gap: clamp(13px, 1.8vw, 24px);
  align-items: stretch;
}
.tp-canal {
  display: flex; flex-direction: column;
  padding: clamp(18px, 2.2vw, 27px);
  background: #fff;
  border: 1px solid var(--line-l);
  border-radius: 16px;
  transition: border-color .28s ease, box-shadow .28s ease, transform .28s var(--ease-out);
}
.tp-canal:hover { border-color: #C6CEDC; box-shadow: var(--shadow-s); transform: translateY(-4px); }
.tp-canal header {
  display: flex; align-items: center; gap: 13px;
  padding-bottom: 15px; margin-bottom: 15px;
  border-bottom: 1px solid var(--line-l);
}
.tp-canal-ico {
  width: 2.9rem; height: 2.9rem; flex: none; border-radius: 14px;
  display: grid; place-items: center;
  color: var(--red); background: rgba(229,30,37,.08);
  transition: background-color .25s ease, transform .25s var(--ease-out);
}
.tp-canal-ico .ico { width: 1.45rem; height: 1.45rem; stroke-width: 1.7; }
.tp-canal:hover .tp-canal-ico { background: rgba(229,30,37,.16); transform: scale(1.06); }
.tp-canal h3 { font-size: 1.1rem; }
.tp-canal-claim { color: var(--red); font-weight: 700; font-size: .92rem; line-height: 1.45; margin-bottom: .7rem; }
.tp-canal p { color: var(--t-muted); font-size: .88rem; line-height: 1.62; margin-bottom: .6rem; }
.tp-canal p:last-child { margin-bottom: 0; }

/* a citação do documento no meio, como no wireframe: é o que
   impede a dobra de virar uma comparação com vencedor */
.tp-citacao {
  margin: 0;                     /* blockquote traz margin: 1em 40px do navegador */
  display: flex; flex-direction: column; justify-content: center;
  text-align: center;
  padding: clamp(20px, 2.4vw, 30px) clamp(16px, 2vw, 24px);
  background: #EDEFF3;
  border: 1px solid var(--line-l);
  border-radius: 16px;
}
.tp-aspas {
  color: var(--red);
  font-size: 2.6rem; line-height: .8; font-weight: 800;
  margin-bottom: .5rem;
}
.tp-citacao p { color: var(--t-dark); font-weight: 700; font-size: .95rem; line-height: 1.55; }

/* =========================================================
   DOBRA 5 — DEPOIS DO CLIQUE
   ========================================================= */
.tp-clique { background: var(--ink-950); color: #fff; padding-block: clamp(30px, 3.6vw, 68px); }
.tp-clique-head { text-align: center; max-width: 62ch; margin: 0 auto clamp(24px, 3vw, 40px); }
.tp-clique h2 { color: #fff; font-size: clamp(1.2rem, 2.08vw, 1.75rem); margin-bottom: 14px; }
.tp-clique-head p { color: var(--t-light); font-size: .9rem; line-height: 1.62; margin-bottom: .5rem; }

.tp-destinos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(13px, 1.7vw, 22px); align-items: stretch; }
.tp-destino {
  display: flex; flex-direction: column;
  padding: clamp(20px, 2.3vw, 28px);
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  transition: border-color .3s ease, background-color .3s ease, transform .3s var(--ease-out);
}
.tp-destino:hover { border-color: rgba(229,30,37,.45); background: rgba(255,255,255,.06); transform: translateY(-4px); }
.tp-destino-ico {
  width: 3.1rem; height: 3.1rem; border-radius: 999px;
  display: grid; place-items: center; margin: 0 auto .9rem;
  color: var(--red);
  border: 1.5px solid rgba(229,30,37,.35);
  transition: transform .3s var(--ease-out), border-color .3s ease;
}
.tp-destino-ico .ico { width: 1.55rem; height: 1.55rem; stroke-width: 1.7; }
.tp-destino:hover .tp-destino-ico { transform: scale(1.08); border-color: var(--red); }
.tp-destino h3 { color: #fff; font-size: 1.02rem; text-align: center; margin-bottom: .7rem; }
.tp-destino p { color: var(--t-dim); font-size: .85rem; line-height: 1.62; margin-bottom: .55rem; }
.tp-destino p strong { color: var(--t-light); font-weight: 700; }
.tp-destino-link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: auto; padding-top: 14px; min-height: 44px;
  color: var(--red); font-weight: 700; font-size: .84rem;
  transition: gap .2s var(--ease-out);
}
.tp-destino-link .ico { width: 1rem; height: 1rem; flex: none; }
.tp-destino-link:hover { gap: 12px; }
.tp-destino-link:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 6px; }

.tp-clique-remate {
  max-width: 64ch; margin: clamp(20px, 2.4vw, 30px) auto 0;
  text-align: center;
  color: var(--t-light); font-size: .92rem; line-height: 1.65;
}
.tp-clique-remate strong { color: #fff; font-weight: 700; }

/* =========================================================
   DOBRA 6 — DADOS E RESULTADOS   (assinatura da página)

   A tese do documento inteiro mora aqui: as metricas de midia
   nao contam a historia toda. A dobra encena isso — o painel
   mostra em CINZA o que a plataforma entrega, e a cadeia
   Lead -> Oportunidade -> Venda aparece em VERMELHO, fora do
   painel. A informacao que decide fica onde o painel nao
   alcanca.
   ========================================================= */
.tp-dados { background: var(--paper-2); padding-block: clamp(26px, 3.1vw, 62px); }
.tp-dados-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.06fr);
  gap: clamp(20px, 2.8vw, 42px);
  align-items: start;
}
.tp-dados-head { grid-column: 1 / -1; max-width: 62ch; }
.tp-dados h2 { font-size: clamp(1.2rem, 2.08vw, 1.75rem); }
.tp-dados-col > p { color: var(--t-body); font-size: .88rem; line-height: 1.64; margin-bottom: .6rem; }
.tp-dados-col > p strong { color: var(--t-dark); font-weight: 700; }
.tp-dados-rot {
  color: var(--t-dark); font-weight: 700; font-size: .9rem; line-height: 1.5;
  margin-bottom: .9rem;
}

/* as quatro perguntas do documento */
.tp-perguntas { display: grid; gap: 11px; margin-top: 4px; list-style: none; padding: 0; }
.tp-perguntas li {
  display: flex; align-items: flex-start; gap: 11px;
  color: var(--t-dark); font-size: .88rem; line-height: 1.5; font-weight: 600;
  transition: transform .25s var(--ease-out);
}
.tp-perguntas li:hover { transform: translateX(5px); }
.tp-pq-ico {
  width: 1.5rem; height: 1.5rem; flex: none; margin-top: 1px;
  border-radius: 999px; display: grid; place-items: center;
  color: var(--red); border: 1.5px solid rgba(229,30,37,.32);
  transition: background-color .25s ease;
}
.tp-pq-ico .ico { width: .85rem; height: .85rem; stroke-width: 2.4; }
.tp-perguntas li:hover .tp-pq-ico { background: rgba(229,30,37,.1); }

/* a cadeia: Lead -> Oportunidade -> Venda */
.tp-cadeia {
  --gc: clamp(6px, 1vw, 12px);
  --rc: 1.15rem;                 /* metade do icone */
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gc);
  align-items: start;
  margin: clamp(14px, 1.8vw, 20px) 0 .9rem;
  padding: clamp(14px, 1.7vw, 20px) clamp(10px, 1.4vw, 16px);
  border-radius: 14px;
  background: var(--ink-900);
  list-style: none;
}
.tp-cadeia li {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  text-align: center;
  color: #fff; font-weight: 700; font-size: .8rem; line-height: 1.3;
}
.tp-cadeia-ico {
  width: calc(var(--rc) * 2); height: calc(var(--rc) * 2); flex: none; border-radius: 999px;
  display: grid; place-items: center;
  color: var(--red); border: 1.5px solid rgba(229,30,37,.42);
  transition: transform .3s var(--ease-out), border-color .3s ease;
}
.tp-cadeia-ico .ico { width: 1.15rem; height: 1.15rem; stroke-width: 1.8; }
.tp-cadeia li:hover .tp-cadeia-ico { transform: scale(1.1); border-color: var(--red); }
/* o fio entre um elo e o proximo, na altura do centro do icone */
.tp-cadeia li:not(:last-child)::after {
  content: "";
  position: absolute; top: calc(var(--rc) - 1px);
  left: calc(50% + var(--rc) + 6px);
  width: calc(100% + var(--gc) - var(--rc) * 2 - 12px);
  height: 2px;
  background: rgba(229,30,37,.7);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .4s var(--ease-out);
}
.js .tp-cadeia.in li::after,
html:not(.js) .tp-cadeia li::after { transform: scaleX(1); }
.tp-cadeia.in li:nth-child(1)::after { transition-delay: .2s; }
.tp-cadeia.in li:nth-child(2)::after { transition-delay: .38s; }

.tp-dados-remate {
  color: var(--t-dark); font-weight: 700; font-size: .95rem; line-height: 1.55;
  padding-left: 15px; border-left: 3px solid var(--red);
}

/* ---- o painel: o que a plataforma mostra ----
   Sem numero nenhum. As formas ilustram categorias e volume
   relativo; qualquer cifra aqui seria inventada. */
.tp-painel {
  border-radius: 16px; overflow: hidden;
  background: #080C15;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: var(--shadow);
}
.tp-painel-barra {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 14px;
  background: rgba(255,255,255,.045);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.tp-painel-barra i { width: 8px; height: 8px; border-radius: 999px; flex: none; background: #333A49; }
.tp-painel-barra i:first-child { background: var(--red); }
.tp-painel-rot {
  margin-left: 6px;
  color: #7E8DAE; font-size: .68rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
.tp-painel-svg { display: block; width: 100%; height: auto; padding: clamp(12px, 1.6vw, 20px); }
.tp-rosca-fundo { fill: none; stroke: rgba(255,255,255,.07); stroke-width: 13; }
.tp-rosca-arco  { fill: none; stroke-width: 13; stroke-linecap: butt; }
.tp-rosca-arco.a1 { stroke: var(--red); }
.tp-rosca-arco.a2 { stroke: #7E8DAE; }
.tp-rosca-arco.a3 { stroke: #46527A; }
.tp-rosca-arco.a4 { stroke: #2B334A; }
.tp-painel-eixo { stroke: rgba(255,255,255,.12); stroke-width: 1.5; }
.tp-painel-bar { fill: none; stroke-width: 9; stroke-linecap: round; stroke: #46527A; }
.tp-painel-bar.alta { stroke: var(--red); }
/* as barras se desenham de baixo para cima; 120 cobre a mais alta */
.js .tp-painel-svg .tp-painel-bar {
  stroke-dasharray: 120; stroke-dashoffset: 120;
  transition: stroke-dashoffset .7s var(--ease-out);
}
.js .tp-painel-svg.in .tp-painel-bar { stroke-dashoffset: 0; }
.tp-painel-svg.in .tp-painel-bar.b1 { transition-delay: .10s; }
.tp-painel-svg.in .tp-painel-bar.b2 { transition-delay: .17s; }
.tp-painel-svg.in .tp-painel-bar.b3 { transition-delay: .24s; }
.tp-painel-svg.in .tp-painel-bar.b4 { transition-delay: .31s; }
.tp-painel-svg.in .tp-painel-bar.b5 { transition-delay: .38s; }
.tp-painel-svg.in .tp-painel-bar.b6 { transition-delay: .45s; }
/* a rosca entra por opacidade, e nao desenhando: cada fatia traz o
   proprio stroke-dasharray no atributo, e uma regra CSS de dasharray
   venceria o atributo e apagaria a divisao das fatias. */
.js .tp-painel-svg .tp-rosca { opacity: 0; transition: opacity .55s ease .2s; }
.js .tp-painel-svg.in .tp-rosca { opacity: 1; }

/* =========================================================
   DOBRA 7 — GESTAO CONTINUA
   A engrenagem gira devagar e sem parar: e a unica animacao
   ambiente da pagina, e ela existe porque a dobra se chama
   "continua". Sob prefers-reduced-motion ela para.
   ========================================================= */
.tp-continua { background: var(--ink-900); color: #fff; padding-block: clamp(30px, 3.6vw, 68px); }
.tp-continua-wrap {
  display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr);
  gap: clamp(24px, 4vw, 62px);
  align-items: center;
}
.tp-engrenagem-svg { width: 100%; max-width: 17rem; height: auto; display: block; margin-inline: auto; }
.tp-eng-anel { fill: none; stroke: #fff; stroke-width: 11; }
.tp-eng-dente { fill: #fff; }
.tp-eng-hub { fill: var(--ink-900); stroke: #fff; stroke-width: 3; }
.tp-eng-ciclo {
  fill: none; stroke: var(--red); stroke-width: 3.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.js .tp-engrenagem-svg .tp-eng-ciclo {
  stroke-dasharray: 600; stroke-dashoffset: 600;
  transition: stroke-dashoffset 1.4s var(--ease-out) .2s;
}
.js .tp-engrenagem-svg.in .tp-eng-ciclo { stroke-dashoffset: 0; }
.tp-eng-gira { transform-box: view-box; transform-origin: 62px 62px; }
.tp-engrenagem-svg.in .tp-eng-gira { animation: tp-gira 26s linear infinite; }
@keyframes tp-gira { to { transform: rotate(360deg); } }

.tp-continua h2 { color: #fff; font-size: clamp(1.2rem, 2.08vw, 1.75rem); margin-bottom: 14px; }
.tp-continua-texto > p { color: var(--t-light); font-size: .92rem; line-height: 1.66; margin-bottom: .6rem; max-width: 60ch; }
/* os quatro verbos do documento sao um ciclo, nao uma lista:
   entram em sequencia e o ultimo devolve para o primeiro */
.tp-verbos {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  margin: clamp(16px, 2vw, 24px) 0;
  list-style: none; padding: 0;
}
.tp-verbos li {
  display: inline-flex; align-items: center; gap: 14px;
  color: #fff; font-weight: 800; font-size: clamp(.95rem, 1.25vw, 1.12rem);
  letter-spacing: -.01em;
}
.tp-verbos li:not(:last-child)::after {
  content: ""; width: 22px; height: 2px; flex: none;
  background: rgba(229,30,37,.75);
}
.js .tp-verbos li { opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s var(--ease-out); }
.js .tp-verbos.in li { opacity: 1; transform: none; }
.tp-verbos.in li:nth-child(1) { transition-delay: .05s; }
.tp-verbos.in li:nth-child(2) { transition-delay: .17s; }
.tp-verbos.in li:nth-child(3) { transition-delay: .29s; }
.tp-verbos.in li:nth-child(4) { transition-delay: .41s; }

.tp-continua-texto > .tp-continua-remate {
  margin-top: clamp(14px, 1.8vw, 20px);
  padding-left: 16px; border-left: 3px solid var(--red);
  color: #fff; font-weight: 700; font-size: .98rem; line-height: 1.55;
  max-width: 48ch;
}

/* =========================================================
   DOBRA 8 — GESTAO DE TRAFEGO OU ASSESSORIA?
   O quebra-cabeca diz o argumento do documento sem repeti-lo:
   trafego e UMA peca. Quando o encaixe do lado esta faltando,
   aumentar a peca nao fecha o desenho.
   ========================================================= */
.tp-escolha { background: var(--ink-850); color: #fff; padding-block: clamp(30px, 3.6vw, 68px); }
.tp-escolha-wrap {
  display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(0, .68fr);
  gap: clamp(24px, 4vw, 62px);
  align-items: center;
}
.tp-escolha h2 { color: #fff; font-size: clamp(1.2rem, 2.08vw, 1.75rem); margin-bottom: 16px; }
.tp-escolha-texto > p { color: var(--t-light); font-size: .92rem; line-height: 1.66; margin-bottom: .62rem; max-width: 62ch; }
.tp-escolha-texto > p strong { color: #fff; font-weight: 700; }
.tp-escolha-texto .btn { margin-top: 20px; }

.tp-peca-svg { width: 100%; max-width: 15rem; height: auto; display: block; margin-inline: auto; }
.tp-peca-fixa { fill: rgba(255,255,255,.05); stroke: rgba(255,255,255,.28); stroke-width: 2.4; stroke-linejoin: round; }
.tp-peca-vaga { fill: none; stroke: rgba(255,255,255,.22); stroke-width: 2.4; stroke-dasharray: 7 7; stroke-linejoin: round; }
.tp-peca-red  { fill: var(--red); stroke: none; }
/* a peca chega ao lugar quando a dobra entra na tela */
.js .tp-peca-svg .tp-peca-red { opacity: 0; transform: translate(20px, -18px); transition: opacity .45s ease .35s, transform .6s var(--ease-out) .35s; }
.js .tp-peca-svg.in .tp-peca-red { opacity: 1; transform: none; }

/* =========================================================
   DOBRA 9 — PARA QUEM E
   ========================================================= */
.tp-publico { background: var(--ink-950); color: #fff; padding-block: clamp(28px, 3.4vw, 64px); }
.tp-publico-wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .38fr);
  gap: clamp(22px, 3.4vw, 52px);
  align-items: center;
}
.tp-publico-head { grid-column: 1 / -1; text-align: center; max-width: 58ch; margin: 0 auto clamp(18px, 2.4vw, 30px); }
.tp-publico h2 { color: #fff; font-size: clamp(1.18rem, 2vw, 1.68rem); margin-bottom: 12px; }
.tp-publico-head p { color: var(--t-light); font-size: .9rem; line-height: 1.6; }
/* .check-list vem de styles.css; aqui so as duas colunas e a cor —
   la ela vive sobre fundo claro */
.tp-publico-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px clamp(22px, 3vw, 44px); }
.tp-publico-lista li { color: var(--t-light); font-size: .9rem; line-height: 1.5; }

.tp-mira-svg { width: 100%; max-width: 12rem; height: auto; display: block; margin-inline: auto; }
.tp-mira-aneis { fill: none; stroke: rgba(255,255,255,.3); stroke-width: 2.6; }
.tp-mira-centro { fill: var(--red); }
.tp-mira-flechas { fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.js .tp-mira-svg .tp-mira-flechas {
  stroke-dasharray: 400; stroke-dashoffset: 400;
  transition: stroke-dashoffset 1.1s var(--ease-out) .25s;
}
.js .tp-mira-svg.in .tp-mira-flechas { stroke-dashoffset: 0; }

/* =========================================================
   DOBRA 10 — FAQ
   Duas colunas, como no wireframe. align-items:start e o que
   impede um item aberto de esticar o vizinho da mesma linha.
   ========================================================= */
.tp-faq .faq-list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 10px 14px; }

/* =========================================================
   DOBRA 11 — CTA FINAL
   ========================================================= */
.tp-cta {
  color: #fff;
  padding-block: clamp(30px, 3.8vw, 68px);
  border-top: 1px solid rgba(255,255,255,.06);
  background:
    radial-gradient(72% 82% at 50% 0%, rgba(43,73,176,.16), transparent 60%),
    var(--ink-900);
}
.tp-cta-wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) auto;
  gap: clamp(22px, 3.4vw, 52px);
  align-items: center;
}
.tp-cta h2 { color: #fff; font-size: clamp(1.2rem, 2.08vw, 1.75rem); }
.tp-cta-meio p { color: var(--t-light); font-size: .9rem; line-height: 1.62; margin-bottom: .6rem; }
.tp-cta-acoes { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.tp-cta-acoes .btn { min-height: 52px; }

/* =========================================================
   RESPONSIVO
   ========================================================= */

/* ---- desktop apertado: 1025 a 1240 ----
   A grade de 5 colunas aqui ficaria com ~150px por coluna e o
   texto viraria uma palavra por linha. */
@media (min-width: 1025px) and (max-width: 1240px) {
  .tp-fluxo { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: clamp(22px, 2.6vw, 30px); }
  .tp-fluxo li::after { display: none; }   /* fio nao liga o que quebrou de linha */
  .tp-canais-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tp-citacao { grid-column: 1 / -1; order: 3; }
  .tp-dados-wrap { gap: clamp(18px, 2.2vw, 28px); }
}

/* ---- tablet e abaixo: <= 1024 ---- */
@media (max-width: 1024px) {
  .tp-hero { padding-top: clamp(96px, 14vw, 128px); }
  .tp-hero-wrap { grid-template-columns: 1fr; row-gap: clamp(26px, 4vw, 38px); }
  .tp-hero-texto h1 { font-size: clamp(1.7rem, 4.4vw, 2.2rem); }
  .tp-hero-lead { max-width: none; }
  .tp-hero-arte { order: 2; }

  .tp-estrategia-wrap { grid-template-columns: 1fr; row-gap: clamp(24px, 3.6vw, 34px); }
  .tp-alvo-svg { max-width: 20rem; }
  .tp-estrategia-texto > p,
  .tp-estrategia-texto > .tp-estrategia-remate { max-width: none; }

  .tp-fluxo { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: clamp(20px, 3vw, 28px); }
  .tp-fluxo li::after { display: none; }

  .tp-canais-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tp-citacao { grid-column: 1 / -1; order: 3; }

  .tp-dados-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tp-painel { grid-column: 1 / -1; }
  .tp-painel-svg { max-width: 34rem; margin-inline: auto; }

  .tp-continua-wrap { grid-template-columns: 1fr; row-gap: clamp(22px, 3.2vw, 32px); }
  .tp-engrenagem-svg { max-width: 12rem; }
  .tp-continua-texto > p,
  .tp-continua-texto > .tp-continua-remate { max-width: none; }

  .tp-escolha-wrap { grid-template-columns: 1fr; row-gap: clamp(24px, 3.4vw, 34px); }
  .tp-escolha-texto > p { max-width: none; }
  .tp-peca-svg { max-width: 12rem; order: 2; }

  .tp-publico-wrap { grid-template-columns: 1fr; row-gap: clamp(20px, 3vw, 28px); }
  .tp-mira-svg { max-width: 9rem; }

  .tp-faq .faq-list { grid-template-columns: 1fr; }

  .tp-cta-wrap { grid-template-columns: 1fr; row-gap: 22px; }
}

/* ---- tablet em pe e celular deitado: 561 a 768 ----
   Uma coluna so desperdica metade da tela nessa faixa. */
@media (min-width: 561px) and (max-width: 768px) {
  .tp-fluxo        { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tp-destinos     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tp-publico-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- celular: <= 768 ---- */
@media (max-width: 768px) {
  .tp-hero { padding-top: 104px; padding-bottom: 40px; }
  .tp-hero-texto h1 { font-size: 1.85rem; line-height: 1.18; }
  /* os arcos recuam: aqui o texto ocupa a largura toda */
  .tp-hero::after {
    background: repeating-radial-gradient(circle at 122% -8%,
      transparent 0 34px,
      rgba(229,30,37,.26) 34px 35.2px,
      transparent 35.2px 70px);
    -webkit-mask-image: linear-gradient(232deg, #000 0%, rgba(0,0,0,.42) 22%, transparent 44%);
            mask-image: linear-gradient(232deg, #000 0%, rgba(0,0,0,.42) 22%, transparent 44%);
  }

  .tp-estrategia, .tp-metodo, .tp-canais, .tp-clique,
  .tp-dados, .tp-continua, .tp-escolha, .tp-publico { padding-block: 46px; }

  .tp-estrategia h2, .tp-metodo h2, .tp-canais h2, .tp-clique h2,
  .tp-dados h2, .tp-continua h2, .tp-escolha h2, .tp-cta h2 { font-size: 1.42rem; line-height: 1.24; }
  .tp-publico h2 { font-size: 1.3rem; line-height: 1.26; }

  .tp-hero-lead, .tp-estrategia-texto > p, .tp-metodo-head p,
  .tp-canal p, .tp-clique-head p, .tp-destino p, .tp-clique-remate,
  .tp-dados-col > p, .tp-continua-texto > p, .tp-escolha-texto > p,
  .tp-publico-head p, .tp-cta-meio p, .tp-fluxo p { font-size: .95rem; }

  /* as etapas viram lista: numero + icone a esquerda, texto a direita */
  .tp-fluxo { grid-template-columns: 1fr; gap: 12px; }
  .tp-fluxo li {
    display: grid; grid-template-columns: auto auto 1fr;
    column-gap: 14px; align-items: center; text-align: left;
    padding: 15px 16px;
    border-radius: 14px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.09);
  }
  .tp-fluxo-num { grid-row: 1 / span 2; height: auto; }
  .tp-fluxo-ico { grid-row: 1 / span 2; }
  .tp-fluxo h3 { margin: 0 0 5px; }

  .tp-canais-grid { grid-template-columns: 1fr; }
  .tp-destinos { grid-template-columns: 1fr; }
  .tp-destino h3 { text-align: left; }
  .tp-destino-ico { margin-inline: 0; }

  .tp-dados-wrap { grid-template-columns: 1fr; }
  .tp-publico-lista { grid-template-columns: 1fr; }
  .tp-publico-lista li { font-size: .95rem; }
  .tp-perguntas li { font-size: .92rem; }
}

@media (max-width: 560px) {
  .tp-hero-texto .btn, .tp-cta-acoes .btn, .tp-escolha-texto .btn { width: 100%; }
  .tp-cta-acoes { align-items: stretch; }
  /* a cena do hero empilha: lado a lado o post ficaria com 120px */
  .tp-cena { padding-bottom: 0; }
  .tp-serp { width: 100%; }
  .tp-feed { position: static; width: 72%; margin: 14px 0 0 auto; }
  .tp-cartao { display: none; }
  /* a cadeia de tres elos nao cabe em linha nessa largura */
  .tp-cadeia { grid-template-columns: 1fr; gap: 14px; }
  .tp-cadeia li { flex-direction: row; gap: 12px; text-align: left; }
  .tp-cadeia li::after { display: none !important; }
  .tp-verbos li:not(:last-child)::after { width: 14px; }
}

@media (max-width: 480px) {
  .tp-hero-texto h1 { font-size: 1.62rem; }
  .tp-estrategia, .tp-metodo, .tp-canais, .tp-clique,
  .tp-dados, .tp-continua, .tp-escolha, .tp-publico { padding-block: 40px; }
}

/* quem pediu menos movimento nao ve a engrenagem girar */
@media (prefers-reduced-motion: reduce) {
  .tp-engrenagem-svg.in .tp-eng-gira { animation: none; }
}