/* ============================================================
   /trafego/ — estilos exclusivos da página (body.page-trafego)

   Direção editorial: títulos e números na fonte do sistema (a mesma
   dos sites da Apple e da Microsoft: SF Pro no iPhone e no Mac, Segoe UI
   no Windows, Roboto no Android), com o destaque na cor da faixa (nunca
   em itálico). O resto é General Sans. Cores da marca
   em tom mais quente: verde profundo (#091105) e verde (#00392f) nas
   faixas escuras, marfim nas claras e latão (#c89c4f) só no detalhe,
   no destaque dos títulos escuros e no botão principal.

   Pouca coisa por tela, muito respiro, filetes finos no lugar de
   caixas. O movimento é um só, repetido com calma: as palavras dos
   títulos sobem de dentro de uma máscara quando entram na tela.

   Reaproveita de site.css o reset, as fontes General Sans/Clash e o
   rodapé. Todo o resto usa o prefixo `tf-`.
   ============================================================ */

body.page-trafego {
  --bg: #091105;
  --bg-2: #12261c;
  --green: #00392f;
  --green-2: #0a4436;
  --ivory: #f3f0e9;
  --mist: #e8e5dc;
  --card: #fbf9f4;
  --ink: #0d1a12;
  --ink-2: #455049;
  --ink-3: #5f6861;
  --fg: #f3f0e9;
  --fg-1: #d3d6cd;
  --fg-2: #a9b0a6;
  --fg-3: #8b938b;
  --line: rgba(243, 240, 233, 0.14);
  --line-2: rgba(243, 240, 233, 0.26);
  --line-ink: rgba(13, 26, 18, 0.14);
  --accent: #c89c4f;
  --accent-hover: #d6ad63;
  --accent-ink: #7d5f28;
  --bar-track: #1d2c21;
  --bar-soft: #2a3b2f;
  --bar-fill: #46695a;
  --tf-head: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tf-pad: clamp(64px, 7vw, 96px);
  --tf-ease: cubic-bezier(0.16, 1, 0.3, 1);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}
body.page-trafego::before {
  display: none;
}
.page-trafego ::selection {
  background: var(--accent);
  color: var(--bg);
}

/* ---------- base ---------- */
.tf-wrap {
  width: min(1200px, calc(100% - 80px));
  margin: 0 auto;
}
.tf-section {
  padding: var(--tf-pad) 0;
}
.tf-ivory,
.tf-mist {
  color: var(--ink);
}
.tf-ivory {
  background: var(--ivory);
}
.tf-mist {
  background: var(--mist);
}
.tf-green {
  --fg-1: #d6e3da;
  background: #01251e;
}

.page-trafego h1,
.page-trafego h2 {
  margin: 0;
  font-family: var(--tf-head);
  font-weight: 600;
  text-wrap: balance;
}
.page-trafego h1 em,
.page-trafego h2 em {
  font-style: normal;
  color: var(--accent);
}
.tf-ivory h2 em,
.tf-mist h2 em {
  color: var(--green);
}
.tf-h2 {
  font-size: clamp(2.3rem, 3.9vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.page-trafego h3 {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1.25rem, 1.6vw, 1.4rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
:where(.page-trafego) p {
  margin: 0;
  text-wrap: pretty;
}
.tf-lead {
  max-width: 27em;
  font-size: clamp(1.08rem, 1.3vw, 1.18rem);
  line-height: 1.6;
  color: var(--ink-2);
}
.tf-green .tf-lead,
.tf-closing p {
  color: var(--fg-1);
}

/* título em duas colunas: o título à esquerda, a frase de apoio à direita */
.tf-split-head {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: 28px clamp(40px, 7vw, 120px);
  align-items: end;
  margin-bottom: clamp(40px, 4.4vw, 60px);
}

/* ---------- botões e links ---------- */
.tf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 56px;
  padding: 0 30px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.005em;
  line-height: 1.2;
  text-align: center;
  transition: background 0.3s var(--tf-ease), color 0.3s var(--tf-ease);
}
.tf-arrow {
  display: inline-block;
  font-size: 1.1rem;
  transition: transform 0.4s var(--tf-ease);
}
.tf-btn:hover {
  background: var(--accent-hover);
}
.tf-btn:hover .tf-arrow {
  transform: translateX(4px);
}
.tf-ivory .tf-btn,
.tf-mist .tf-btn {
  background: var(--green);
  color: var(--fg);
}
.tf-ivory .tf-btn:hover,
.tf-mist .tf-btn:hover {
  background: var(--green-2);
}
.page-trafego .tf-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.page-trafego :is(.tf-ivory, .tf-mist) .tf-btn:focus-visible {
  outline-color: var(--ink);
}
.tf-link {
  display: inline-block;
  padding: 10px 0;
  font-weight: 500;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
  transition: text-underline-offset 0.3s var(--tf-ease), color 0.3s var(--tf-ease);
}
.tf-link:hover {
  text-underline-offset: 4px;
}
.page-trafego .tf-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
.tf-hero .tf-link:hover {
  color: var(--accent);
}

/* ============================================================
   Abertura
   ============================================================ */
.tf-hero {
  position: relative;
  overflow: clip;
  padding: 28px 0 clamp(48px, 5vw, 72px);
  background: var(--bg);
}
.brand {
  font-family: "Clash Display", system-ui, sans-serif;
}
a.brand {
  padding-block: 9px;
  margin-block: -9px;
}
.tf-hero-brand {
  display: inline-block;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}
.tf-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  padding: clamp(24px, 2.6vw, 34px) 0 clamp(36px, 3.6vw, 52px);
}
.tf-hero h1 {
  font-size: clamp(2.7rem, 5vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
}
.tf-hero-sub {
  max-width: 30em;
  margin-top: clamp(24px, 2.6vw, 34px);
  font-size: clamp(1.08rem, 1.35vw, 1.2rem);
  line-height: 1.6;
  color: var(--fg-1);
}
.tf-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
  margin-top: clamp(32px, 3.4vw, 44px);
}

/* o símbolo da Datta se desenha uma vez ao abrir, de uma ponta à outra
   num traço só; cada nó aparece quando a linha chega nele */
.tf-mark {
  justify-self: end;
  width: min(100%, 340px);
}
.tf-mark svg {
  display: block;
  width: 100%;
  height: auto;
}
.tf-mark-sym {
  fill: var(--fg);
}
.tf-mark-m {
  fill: none;
  stroke: #fff;
  stroke-width: 64;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: tf-draw 2.6s linear 0.25s forwards;
}
.tf-mark-node {
  fill: #fff;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transform: scale(0);
  animation: tf-node 0.35s var(--tf-ease) 1.32s forwards;
}
.tf-mark-node:nth-of-type(2) {
  animation-delay: 1.51s;
}
.tf-mark-node:nth-of-type(3) {
  animation-delay: 1.69s;
}
@keyframes tf-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes tf-node {
  to {
    transform: scale(1);
  }
}

/* números da operação: numerais grandes sobre um filete */
.tf-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px clamp(24px, 4vw, 64px);
  margin: 0;
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--line);
}
.tf-facts dt {
  font-family: var(--tf-head);
  font-size: clamp(2.4rem, 3.7vw, 3.3rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums;
  white-space: nowrap;
}
.tf-unit {
  margin: 0 0.03em;
  color: var(--accent);
}
.tf-facts dd {
  max-width: 13em;
  margin: 12px 0 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--fg-2);
}

/* ============================================================
   Tráfego — três passos ilustrados
   ============================================================ */
.tf-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 44px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.tf-flow h3 {
  margin: 28px 0 10px;
}
.tf-flow li > p {
  max-width: 24em;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-2);
}
/* o quadro escuro de cada passo: mesma altura nos três */
.tf-flow-art {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  height: 248px;
  padding: 28px;
  border-radius: 16px;
  background: var(--bg);
  color: var(--fg);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(13, 26, 18, 0.08), 0 24px 48px -28px rgba(13, 26, 18, 0.5);
}

/* 1. a busca e o anúncio no topo dos resultados */
.tf-demo-search {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--ivory);
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 500;
}
.tf-demo-search svg {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 1.8;
  stroke-linecap: round;
}
.tf-demo-search span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tf-demo-ad {
  display: grid;
  gap: 2px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px rgba(200, 156, 79, 0.45);
}
.tf-demo-ad small {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
}
.tf-demo-ad strong {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.tf-demo-rest {
  display: grid;
  gap: 8px;
  padding: 6px 16px 0;
}
.tf-demo-rest i {
  height: 7px;
  border-radius: 999px;
  background: var(--bar-track);
}
.tf-demo-rest i:first-child {
  width: 46%;
  background: var(--bar-soft);
}
.tf-demo-rest i:last-child {
  width: 78%;
}

/* 2. a conversa que chega pelo anúncio */
.tf-chat-from {
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--fg-3);
}
.tf-demo-msg,
.tf-chat-reply {
  max-width: 15em;
  padding: 11px 16px;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.4;
}
.tf-demo-msg {
  align-self: flex-start;
  border-radius: 16px 16px 16px 4px;
  background: var(--accent);
  color: var(--bg);
}
.tf-chat-reply {
  align-self: flex-end;
  border-radius: 16px 16px 4px 16px;
  background: var(--bg-2);
  color: var(--fg);
}

/* 3. investimento, contatos e vendas medidos (ilustrativo, sem valores) */
.tf-art-bars {
  gap: 18px;
}
.tf-bar span {
  display: block;
  margin-bottom: 7px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--fg-2);
}
.tf-bar i {
  position: relative;
  display: block;
  height: 10px;
  border-radius: 999px;
  background: var(--bar-track);
  overflow: hidden;
}
.tf-bar i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  border-radius: inherit;
  background: var(--bar-fill);
  transform-origin: 0 50%;
}
.tf-bar-key i::after {
  background: var(--accent);
}

/* com JS: os três passos se montam um depois do outro */
.tf-js .tf-flow li {
  transition: opacity 0.8s ease-out, transform 1s var(--tf-ease);
}
.tf-js .tf-flow li:nth-child(2) {
  transition-delay: 0.15s;
}
.tf-js .tf-flow li:nth-child(3) {
  transition-delay: 0.3s;
}
.tf-js .tf-flow:not(.is-in) li {
  opacity: 0;
  transform: translateY(24px);
}
.tf-js .tf-demo-search span {
  transition: clip-path 1s steps(26, end) 0.6s;
}
.tf-js .tf-flow:not(.is-in) .tf-demo-search span {
  clip-path: inset(0 100% 0 0);
}
.tf-js .tf-demo-ad,
.tf-js .tf-demo-rest,
.tf-js .tf-chat-from,
.tf-js .tf-demo-msg,
.tf-js .tf-chat-reply {
  transition: opacity 0.5s ease-out, transform 0.7s var(--tf-ease);
}
.tf-js .tf-demo-ad {
  transition-delay: 1.6s;
}
.tf-js .tf-demo-rest {
  transition-delay: 1.75s;
}
.tf-js .tf-chat-from {
  transition-delay: 2s;
}
.tf-js .tf-demo-msg {
  transform-origin: 0 100%;
  transition-delay: 2.1s;
}
.tf-js .tf-chat-reply {
  transform-origin: 100% 100%;
  transition-delay: 2.7s;
}
.tf-js .tf-flow:not(.is-in) :is(.tf-demo-ad, .tf-demo-rest, .tf-chat-from) {
  opacity: 0;
  transform: translateY(10px);
}
.tf-js .tf-flow:not(.is-in) :is(.tf-demo-msg, .tf-chat-reply) {
  opacity: 0;
  transform: scale(0.85);
}
.tf-js .tf-bar i::after {
  transition: transform 1s var(--tf-ease);
}
.tf-js .tf-bar:nth-child(1) i::after {
  transition-delay: 3.1s;
}
.tf-js .tf-bar:nth-child(2) i::after {
  transition-delay: 3.3s;
}
.tf-js .tf-bar:nth-child(3) i::after {
  transition-delay: 3.5s;
}
.tf-js .tf-flow:not(.is-in) .tf-bar i::after {
  transform: scaleX(0);
}

.tf-why-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  margin-top: clamp(40px, 4.4vw, 60px);
  padding-top: clamp(24px, 2.6vw, 32px);
  border-top: 1px solid var(--line-ink);
}
.tf-fit {
  max-width: 34em;
  font-size: clamp(1.05rem, 1.3vw, 1.15rem);
  line-height: 1.5;
  color: var(--ink-2);
}
.tf-fit span {
  font-weight: 500;
  color: var(--ink);
  scroll-margin-top: 96px;
}

/* ============================================================
   Método — título à esquerda, etapas em linhas à direita
   ============================================================ */
.tf-method {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 56px clamp(48px, 8vw, 128px);
  align-items: start;
}
.tf-method-head {
  position: sticky;
  top: 48px;
}
.tf-method-head .tf-lead {
  margin-top: 28px;
}
.tf-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}
.tf-steps > li {
  position: relative;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 24px;
  padding: clamp(28px, 3vw, 40px) 0;
  border-top: 1px solid var(--line-2);
}
.tf-steps > li:last-child {
  border-bottom: 1px solid var(--line-2);
}
/* filete de latão que corre sobre cada etapa, uma depois da outra */
.tf-steps > li::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform-origin: 0 50%;
}
.tf-step-n {
  font-family: var(--tf-head);
  font-size: clamp(2rem, 2.8vw, 2.6rem);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--accent);
}
.tf-steps h3 {
  font-size: clamp(1.3rem, 1.8vw, 1.5rem);
}
.tf-steps p {
  max-width: 30em;
  margin-top: 10px;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--fg-1);
}
.tf-js .tf-steps > li {
  transition: opacity 0.8s ease-out, transform 1s var(--tf-ease);
}
.tf-js .tf-steps > li::after {
  transition: transform 1.1s var(--tf-ease);
}
.tf-js .tf-steps > li:nth-child(2),
.tf-js .tf-steps > li:nth-child(2)::after {
  transition-delay: 0.35s;
}
.tf-js .tf-steps > li:nth-child(3),
.tf-js .tf-steps > li:nth-child(3)::after {
  transition-delay: 0.7s;
}
.tf-js .tf-steps:not(.is-in) > li {
  opacity: 0;
  transform: translateY(20px);
}
.tf-js .tf-steps:not(.is-in) > li::after {
  transform: scaleX(0);
}

.tf-platforms {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  color: var(--fg-2);
  font-size: 0.95rem;
}
.tf-platforms p {
  width: 100%;
  font-weight: 500;
  color: var(--fg-1);
}
.tf-platforms ul {
  display: contents;
  list-style: none;
}
.tf-platforms li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--fg);
}
.tf-platforms svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  opacity: 0.85;
}

/* ============================================================
   Serviços — um cartão por serviço, cada um com um desenho do que
   ele faz, em duas fileiras de três. O traqueamento, que sustenta
   os demais, é o cartão escuro.
   ============================================================ */
.tf-svcs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tf-svcs li {
  --il-line: rgba(13, 26, 18, 0.3);
  --il-soft: #d6d3c9;
  --il-key: var(--green);
  --il-bg: var(--card);
  padding: clamp(26px, 2.6vw, 36px);
  border-radius: 16px;
  background: var(--il-bg);
  box-shadow: 0 1px 2px rgba(13, 26, 18, 0.05), 0 18px 40px -30px rgba(13, 26, 18, 0.35);
  scroll-margin-top: 80px;
}
.tf-svcs #traqueamento {
  --il-line: rgba(243, 240, 233, 0.42);
  --il-soft: #3a4a3f;
  --il-key: var(--accent);
  --il-bg: var(--bg);
  color: var(--fg);
}
.tf-svcs h3 {
  margin: 26px 0 10px;
}
.tf-svcs p {
  max-width: 30em;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-2);
}
.tf-svcs #traqueamento p {
  color: var(--fg-2);
}

#servicos .tf-split-head {
  grid-template-columns: auto minmax(0, 22em);
  justify-content: space-between;
}

/* os desenhos: traço fino, um tom neutro e a cor da marca no que importa */
.tf-il {
  display: block;
  width: min(100%, 260px);
  height: auto;
  overflow: visible;
  fill: none;
  stroke: var(--il-line);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.tf-il .il-soft {
  fill: var(--il-soft);
  stroke: none;
}
.tf-il .il-key {
  fill: var(--il-key);
  stroke: none;
}
.tf-il .il-dot {
  fill: var(--il-line);
  stroke: none;
}
.tf-il .il-hole {
  fill: var(--il-bg);
}
.tf-il .il-ring {
  stroke: var(--il-key);
  opacity: 0.45;
}
.tf-il .il-draw {
  stroke-dasharray: 1;
}
.tf-il .il-pop,
.tf-il .il-bar,
.tf-il .il-rise,
.tf-il .il-move {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.tf-il .il-bar {
  transform-origin: 50% 100%;
}

/* com JS, cada desenho começa desmontado e se monta ao entrar na tela */
.tf-js .tf-il .il-draw {
  transition: stroke-dashoffset 1.1s var(--tf-ease);
}
.tf-js .tf-il .il-pop,
.tf-js .tf-il .il-bar,
.tf-js .tf-il .il-rise {
  transition: opacity 0.4s ease-out, transform 0.7s var(--tf-ease);
  transition-delay: calc(var(--i, 0) * 110ms + 120ms);
}
.tf-js .tf-il .il-move {
  transition: transform 0.9s var(--tf-ease) 0.4s;
}
.tf-js li:not(.is-in) .il-draw {
  stroke-dashoffset: 1;
}
.tf-js li:not(.is-in) .il-pop {
  opacity: 0;
  transform: scale(0.2);
}
.tf-js li:not(.is-in) .il-bar {
  transform: scaleY(0);
}
.tf-js li:not(.is-in) .il-rise {
  opacity: 0;
  transform: translateY(8px);
}
/* o contato sai da primeira coluna do funil e chega à última */
.tf-js li:not(.is-in) .il-move {
  transform: translate(-160px, 44px);
}

/* ============================================================
   Sobre
   ============================================================ */
.tf-about {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(48px, 9vw, 140px);
  align-items: center;
}
/* moldura deslocada: um bloco verde atrás da foto, empurrado para baixo e para a direita */
.tf-about-photo {
  position: relative;
  margin: 0 22px 22px 0;
}
.tf-about-photo::before {
  content: "";
  position: absolute;
  inset: 22px -22px -22px 22px;
  border-radius: 8px;
  background: var(--green);
  box-shadow: 0 2px 8px rgba(36, 39, 26, 0.18), 0 26px 46px -16px rgba(36, 39, 26, 0.55);
}
.tf-about img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(36, 39, 26, 0.12), 0 20px 38px -18px rgba(36, 39, 26, 0.45);
}
.tf-about-copy .tf-h2 {
  font-size: clamp(2.5rem, 4.4vw, 3.9rem);
}
.tf-about-role {
  margin-bottom: 14px;
  font-size: clamp(1.05rem, 1.3vw, 1.15rem);
  font-weight: 500;
  color: var(--green);
}
.tf-about-lead {
  max-width: 26em;
  margin-top: 24px;
  font-size: clamp(1.2rem, 1.6vw, 1.375rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
}
.tf-about-text {
  max-width: 32em;
  margin: 16px 0 22px;
  font-size: clamp(1.06rem, 1.3vw, 1.16rem);
  line-height: 1.7;
  color: var(--ink-2);
}
.tf-about .tf-link {
  color: var(--green);
}

/* ============================================================
   Fechamento — centralizado, com bastante respiro
   ============================================================ */
.tf-closing {
  background: var(--bg);
}
#contato {
  padding-block: clamp(64px, 6.5vw, 88px);
}
.tf-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.tf-cta .tf-h2 {
  max-width: 12em;
}
.tf-cta p {
  max-width: 30em;
  margin: 28px 0 40px;
  font-size: clamp(1.1rem, 1.4vw, 1.22rem);
  line-height: 1.6;
}

/* rodapé: mesmos componentes do site, nas cores desta página */
.page-trafego .site-footer {
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.page-trafego .foot-aurora {
  display: none;
}
.page-trafego .site-footer .container {
  width: min(1200px, calc(100% - 80px));
}
.page-trafego .foot-brand p {
  color: var(--fg-1);
}
.page-trafego .foot-col h2 {
  margin-bottom: 12px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg);
}
.page-trafego .foot-social a {
  min-height: 44px;
}
.page-trafego .foot-col a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.page-trafego .foot-social a,
.page-trafego .foot-meta,
.page-trafego .foot-base {
  font-size: 0.875rem;
}
@media (min-width: 901px) {
  .page-trafego .foot-inner {
    grid-template-columns: 1.6fr 1fr 1fr;
  }
}

/* ============================================================
   Entradas
   - títulos: cada palavra sobe de dentro de uma máscara
   - blocos [data-tf-in]: os filhos sobem em sequência
   ============================================================ */
.tf-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.04em 0.06em 0.16em;
  margin: -0.04em -0.06em -0.16em;
}
.tf-w > span {
  display: inline-block;
}
.tf-js [data-tf-words] .tf-w > span {
  transition: transform 1.1s var(--tf-ease), opacity 0.9s ease-out;
  transition-delay: calc(var(--i) * 55ms + 80ms);
}
.tf-js [data-tf-words]:not(.is-in) .tf-w > span {
  opacity: 0;
  transform: translateY(105%);
}
.tf-js [data-tf-in] > * {
  transition: opacity 0.8s ease-out, transform 1s var(--tf-ease);
}
.tf-js [data-tf-in] > :nth-child(2) {
  transition-delay: 0.12s;
}
.tf-js [data-tf-in]:not(.is-in) > * {
  opacity: 0;
  transform: translateY(20px);
}
/* a abertura entra junto com o título: subtítulo, botões e números */
.tf-js .tf-hero-sub,
.tf-js .tf-actions,
.tf-js .tf-facts {
  animation: tf-rise 1s var(--tf-ease) both;
}
.tf-js .tf-hero-sub {
  animation-delay: 0.7s;
}
.tf-js .tf-actions {
  animation-delay: 0.85s;
}
.tf-js .tf-facts {
  animation-delay: 1s;
}
@keyframes tf-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

/* ============================================================
   Responsivo
   ============================================================ */
@media (max-width: 1020px) {
  .tf-wrap,
  .page-trafego .site-footer .container {
    width: calc(100% - 56px);
  }
  .tf-split-head,
  #servicos .tf-split-head,
  .tf-method {
    grid-template-columns: minmax(0, 1fr);
  }
  .tf-method-head {
    position: static;
  }
  .tf-platforms {
    grid-column: 1;
  }
  .tf-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 36px;
  }
  .tf-flow {
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
    gap: 56px;
  }
  .tf-svcs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body.page-trafego {
    --tf-pad: 60px;
  }
  .tf-wrap,
  .page-trafego .site-footer .container {
    width: calc(100% - 40px);
  }
  .tf-hero {
    padding-top: 24px;
  }
  /* no celular o símbolo fica no canto, ao lado da marca */
  .tf-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    padding: 52px 0 48px;
  }
  .tf-mark {
    position: absolute;
    top: 5px;
    right: 20px;
    width: 64px;
  }
  .tf-hero h1 {
    font-size: clamp(2.3rem, 10.4vw, 2.9rem);
    line-height: 1.02;
  }
  .tf-actions .tf-btn,
  .tf-why-foot .tf-btn,
  .tf-cta .tf-btn {
    width: 100%;
  }
  .tf-facts {
    column-gap: 20px;
  }
  .tf-facts dt {
    font-size: clamp(2rem, 9vw, 2.5rem);
  }
  .tf-h2,
  .tf-about-copy .tf-h2 {
    font-size: clamp(1.95rem, 8.6vw, 2.4rem);
  }
  .tf-split-head {
    margin-bottom: 36px;
  }
  .tf-flow {
    gap: 40px;
  }
  .tf-flow-art {
    height: auto;
    min-height: 196px;
    padding: 24px;
  }
  .tf-steps > li {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 16px;
  }
  .tf-step-n {
    font-size: 1.8rem;
  }
  .tf-svcs {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .tf-svcs li {
    padding: 22px;
  }
  .tf-svcs h3 {
    margin-top: 18px;
  }
  .tf-il {
    width: min(100%, 168px);
  }
  .page-trafego .foot-inner {
    grid-template-columns: 1fr 1fr;
    row-gap: 28px;
  }
  .page-trafego .foot-brand {
    grid-column: 1 / -1;
  }
  .tf-about {
    grid-template-columns: minmax(0, 1fr);
  }
  .tf-about-photo {
    max-width: 240px;
    margin: 0 16px 16px 0;
  }
  .tf-about-photo::before {
    inset: 16px -16px -16px 16px;
  }
}

@media (max-width: 360px) {
  .tf-hero h1 {
    font-size: 2.15rem;
  }
  .page-trafego .tf-btn {
    gap: 10px;
    padding: 0 20px;
    font-size: 0.9375rem;
  }
  .tf-demo-search {
    padding: 0 12px;
    font-size: 0.875rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tf-mark-m,
  .tf-mark-node {
    animation: none;
    stroke-dashoffset: 0;
    transform: none;
  }
  .tf-btn:hover .tf-arrow {
    transform: none;
  }
}