/**
 * Seção "Performance / Tráfego Pago" — estilos isolados sob o prefixo `tp-`.
 * Escala fluida via container query units (cqw), relativa à própria largura
 * do palco (.tp-stage), calibrada contra referência visual aprovada em
 * viewport 1922px (palco de 1360px de largura / ~850px de altura).
 * Não reutiliza nem sobrescreve seletores globais.
 */

.tp-section {
  --tp-navy: var(--color-ink, #1c1e3c);
  --tp-blue: var(--color-brand, #48a0d9);
  --tp-lilac: #ece9f6;
  --tp-lilac-gray: #e4e1ee;
  --tp-blue-mid: #4f9fe0;
  --tp-line: #68bde8;
  --tp-body: #34364f;

  position: relative;
  width: 100%;
  overflow: visible;
  background: #fff;
  color: var(--tp-navy);
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tp-section *,
.tp-section *::before,
.tp-section *::after {
  box-sizing: border-box;
}

.tp-section a {
  text-decoration: none;
}

/* ---------- Palco (>=1024px) ----------
   Largura própria da composição (menor que o .container do site — é uma
   peça de infográfico central, não o grid de página); altura fixa própria,
   independente da altura do viewport (a seção não precisa mais caber
   inteira numa única tela). */

.tp-stage {
  position: relative;
  width: min(calc(100% - 80px), 1346px); /* 110% de 1224px (90% de 1360px) */
  min-height: 842px; /* 110% de 765px */
  margin-inline: auto;
  container-type: inline-size;
}

.tp-section {
  min-height: 1087px; /* 110% de 988px */
}

.tp-circle {
  position: absolute;
  z-index: 1;
  width: 54.0625cqw; /* 735px */
  aspect-ratio: 1 / 1;
  left: 22.3125cqw; /* 303.5px */
  top: 0.5cqw;
  border-radius: 50%;
  background: #e0f2fc;
  pointer-events: none;
}

.tp-center-copy {
  position: absolute;
  z-index: 3;
  top: 8.125cqw; /* 110.5px */
  left: 35.3125cqw; /* 480px */
  width: 30.875cqw; /* 420px */
}

.tp-title {
  margin: 0;
  color: var(--tp-navy);
  font-size: clamp(56px, 5.9cqw, 84px);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.02em;
}

.tp-subtitle {
  margin: 6cqw 0 0;
  font-size: clamp(40px, 4.05cqw, 58px);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.tp-center-description {
  width: 26.875cqw; /* 365px */
  max-width: 100%;
  margin-top: 3.4cqw;
  font-size: clamp(15px, 1.5cqw, 22px);
  line-height: 1.2;
  color: var(--tp-navy);
}

.tp-rocket {
  position: absolute;
  z-index: 4;
  top: 6.25cqw; /* 85px */
  left: 58cqw; /* 789px */
  width: 20.6cqw; /* 280px */
  height: auto;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
}

/* ---------- Blocos laterais ---------- */

.tp-feature {
  position: absolute;
  z-index: 5;
  width: 20.6cqw; /* 280px */
  min-width: 220px;
}

.tp-feature--left-top {
  top: 7.35cqw; /* 100px */
  left: 0;
}

.tp-feature--left-bottom {
  top: 33.1cqw; /* 450px */
  left: 0;
}

.tp-feature--right-top {
  top: 7.35cqw;
  right: 0;
  text-align: right;
}

.tp-feature--right-bottom {
  top: 33.1cqw;
  right: 0;
  text-align: right;
}

.tp-feature--right-top .tp-feature-icon,
.tp-feature--right-bottom .tp-feature-icon {
  margin-left: auto;
  margin-right: 0;
}

.tp-feature-icon {
  display: grid;
  place-items: center;
  width: clamp(58px, 5.9cqw, 82px);
  height: clamp(58px, 5.9cqw, 82px);
  border-radius: 9px;
}

.tp-feature-icon svg {
  display: block;
  width: clamp(32px, 3.3cqw, 48px);
  height: clamp(32px, 3.3cqw, 48px);
  max-width: clamp(32px, 3.3cqw, 48px);
  max-height: clamp(32px, 3.3cqw, 48px);
  overflow: visible;
}

/* Paleta por bloco — nenhum SVG fica preto */
.tp-feature-icon--analise {
  background: var(--tp-navy);
}
.tp-feature-icon--analise svg {
  fill: var(--tp-blue);
  stroke: none;
}

.tp-feature-icon--tagueamento {
  background: var(--tp-lilac);
}
.tp-feature-icon--tagueamento svg {
  fill: var(--tp-navy);
  stroke: none;
}

.tp-feature-icon--reunioes {
  background: var(--tp-lilac-gray);
}
.tp-feature-icon--reunioes svg {
  fill: none;
  stroke: var(--tp-blue);
}

.tp-feature-icon--relatorios {
  background: var(--tp-blue-mid);
}
.tp-feature-icon--relatorios svg {
  fill: #fff;
  stroke: none;
}

.tp-feature-title {
  margin: 1.03cqw 0 0; /* ~14px */
  color: var(--tp-navy);
  font-size: clamp(18px, 1.84cqw, 27px);
  line-height: 1;
  text-transform: uppercase;
}

.tp-feature-description {
  margin-top: 1.47cqw; /* ~20px */
  font-size: clamp(14px, 1.4cqw, 20px);
  line-height: 1.22;
  color: var(--tp-body);
}

/* ---------- Linhas conectoras ----------
   Traço longo horizontal ligando a coluna lateral à composição central,
   com um pequeno segmento vertical descendo até o ícone. */

.tp-connector {
  position: absolute;
  z-index: 2;
  top: -2.7cqw;
  height: 2.7cqw;
  width: 26.1cqw; /* 355px */
  pointer-events: none;
}

.tp-connector::before,
.tp-connector::after {
  content: '';
  position: absolute;
  background: var(--tp-line);
}

/* Traço horizontal: topo do conector, comprimento total */
.tp-connector::after {
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
}

/* Traço vertical: curto, próximo do ícone, descendo até ele */
.tp-connector::before {
  top: 0;
  width: 1px;
  height: 100%;
}

.tp-feature--left-top .tp-connector,
.tp-feature--left-bottom .tp-connector {
  left: 2.57cqw; /* ~35px, alinhado ao ícone */
}
.tp-feature--left-top .tp-connector::before,
.tp-feature--left-bottom .tp-connector::before {
  left: 0;
}

.tp-feature--right-top .tp-connector,
.tp-feature--right-bottom .tp-connector {
  right: 2.94cqw; /* alinhado ao centro do ícone (agora à direita do bloco) */
  width: 24.3cqw; /* 330px */
}
.tp-feature--right-top .tp-connector::before,
.tp-feature--right-bottom .tp-connector::before {
  right: 0;
}

.tp-feature--left-bottom .tp-connector {
  width: 16.5cqw; /* 225px */
}

.tp-feature--right-bottom .tp-connector {
  width: 16.2cqw; /* 220px */
}

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

.tp-cta {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 0.5cqw;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38.24cqw; /* 520px */
  min-width: 300px;
  height: 5.6cqw; /* 76px */
  min-height: 60px;
  border-radius: 8px;
  background: var(--tp-navy);
  color: #fff;
  transition: background-color 0.2s ease;
}

.tp-cta:hover {
  background: var(
    --tp-navy-hover,
    color-mix(in oklab, var(--tp-navy) 88%, black)
  );
}

.tp-cta-text {
  font-size: clamp(18px, 1.65cqw, 24px);
  letter-spacing: 0.01em;
}

.tp-cta-highlight {
  color: var(--tp-blue);
  font-weight: 800;
  margin-right: 4px;
}

.tp-cta-arrow {
  margin-left: 16px;
  font-size: 0.8em;
  color: #fff;
  transition: transform 0.2s ease;
}

.tp-cta:hover .tp-cta-arrow {
  transform: translateX(3px);
}

/* ---------- Ajustes de tablet (1024–1439px) ---------- */

@media (max-width: 1439.98px) and (min-width: 1024px) {
  .tp-stage {
    min-height: 770px; /* 110% de 700px */
  }

  .tp-connector {
    display: none;
  }
}

/* ---------- Mobile/tablet estreito (<1024px): grade 2 colunas ---------- */

@media (max-width: 1023.98px) {
  .tp-section {
    min-height: 0;
    padding: 48px 20px;
  }

  .tp-stage {
    position: relative;
    width: 100%;
    max-width: 720px;
    min-height: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    text-align: center;
    row-gap: 32px;
    column-gap: 24px;
    margin-inline: auto;
    container-type: normal;
  }

  .tp-circle {
    position: absolute;
    z-index: 1;
    width: 320px;
    height: 320px;
    left: 50%;
    top: -40px;
    transform: translateX(-50%);
  }

  .tp-center-copy,
  .tp-rocket,
  .tp-feature,
  .tp-cta {
    position: relative;
    z-index: 2;
    transform: none;
    inset: auto;
    min-width: 0;
  }

  .tp-center-copy {
    order: 1;
    flex: 0 0 100%;
    max-width: 420px;
    margin-inline: auto;
  }

  .tp-rocket {
    order: 2;
    flex: 0 0 auto;
    width: 140px;
    margin-inline: auto;
  }

  /* Os 4 itens ficam em grade de 2 colunas via flex-wrap — não dependem
     de estarem adjacentes no DOM, cada um mantém sua ordem de leitura. */
  .tp-feature {
    flex: 0 0 calc(50% - 12px);
    max-width: none;
    text-align: center;
  }

  .tp-feature--left-top {
    order: 3;
  }

  .tp-feature--left-bottom {
    order: 4;
  }

  .tp-feature--right-top {
    order: 5;
  }

  .tp-feature--right-bottom {
    order: 6;
  }

  .tp-feature .tp-feature-icon {
    margin-inline: auto;
  }

  .tp-connector {
    display: none;
  }

  .tp-cta {
    order: 7;
    flex: 0 0 100%;
    width: 100%;
    max-width: none;
    height: 56px;
  }

  .tp-title {
    font-size: 48px;
  }

  .tp-subtitle {
    margin-top: 16px;
    font-size: 30px;
  }

  .tp-center-description {
    width: 100%;
    margin: 20px auto 0;
    font-size: 16px;
  }
}

@media (max-width: 599.98px) {
  .tp-feature {
    flex-basis: 100%;
  }
}