/* ═══════════════════════════════════════════════════════════
   seo-ajustes.css: ajustes de layout só de /auditoria-e-correcao-de-seo-tecnico
   sobre CSS compartilhado (dor-contexto, solucao, como-funciona,
   primeira-posicao), que não são editados. Carregado depois deles.
     1. Dor: parágrafo de fechamento
     2. Solução: 5 itens (3 + 2) e a linha de confiança no 6º encaixe
     3. Processo: 6 etapas (3 colunas x 2 linhas; 2 colunas no tablet)
     4. Por que não prometemos: coluna única, círculo único
═══════════════════════════════════════════════════════════ */

/* ── 1. Dor: fechamento ── */
.dor-close {
  max-width: 620px;
  margin: 56px auto 0;
  text-align: center;
  font-size: 16px;
  line-height: 1.68;
  color: var(--text2);
}

/* ── 2. Solução: título + abertura, 5 itens ── */
.solucao-h2--lead {
  margin-bottom: 20px;
}

.solucao-lead {
  max-width: 540px;
  margin-bottom: 64px;
  font-size: 17px;
  line-height: 1.68;
  color: var(--text2);
}

/* 2ª linha: item 4 abre a linha, item 5 e a linha de confiança seguem com divisor */
.solucao-grid--5 .solucao-item:nth-child(3) {
  padding-right: 32px;
}

.solucao-grid--5 .solucao-item:nth-child(4) {
  padding-left: 0;
  border-left: 0;
}

.solucao-grid--5 .solucao-item:nth-child(5) {
  padding: 0 32px;
  border-left: 1px solid var(--border);
}

.solucao-trust {
  align-self: center;
  padding-left: 32px;
  border-left: 1px solid var(--border);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--text);
}

@media (max-width: 720px) {
  .solucao-lead {
    margin-bottom: 40px;
  }

  .solucao-grid--5 .solucao-item:nth-child(n) {
    padding: 0;
    border-left: 0;
  }

  .solucao-trust {
    padding-left: 0;
    border-left: 0;
  }
}

/* ── 3. Processo: 6 etapas ── */
@media (min-width: 861px) {
  .cf-grid--6 {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 56px;
  }

  .cf-grid--6 .cf-step:nth-child(3) .cf-rail::after {
    display: none;
  }

  .cf-grid--6 .cf-step:nth-child(4) .cf-rail::before {
    display: none;
  }
}

@media (min-width: 721px) and (max-width: 860px) {
  .cf-grid--6 .cf-step:nth-child(3) .cf-rail::after {
    display: block;
  }

  .cf-grid--6 .cf-step:nth-child(4) .cf-rail::before {
    display: block;
  }

  .cf-grid--6 .cf-step:nth-child(4) .cf-rail::after,
  .cf-grid--6 .cf-step:nth-child(5) .cf-rail::before {
    display: none;
  }
}

/* ── 4. Por que não prometemos: coluna única, 1 círculo ── */
.pp .pp-wrap {
  display: block;
}

.pp .pp-left {
  display: block;
}

.pp .pp-lead {
  max-width: 640px;
  margin-bottom: 20px;
}

.pp .pp-lead:last-of-type {
  margin-bottom: 48px;
}

.pp .pp-circles {
  width: clamp(300px, 34vw, 440px);
  height: clamp(300px, 34vw, 440px);
  margin: 0;
  order: unset;
}

.pp .pp-circle--fazemos {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* sem o "- " que primeira-posicao.css põe antes de cada item */
.pp .pp-circle li::before {
  content: none;
}

@media (max-width: 860px) {
  .pp .pp-wrap {
    display: block;
  }

  .pp .pp-lead {
    order: unset;
    max-width: 640px;
    margin-bottom: 20px;
  }

  .pp .pp-lead:last-of-type {
    margin-bottom: 40px;
  }

  .pp .pp-circles {
    width: clamp(300px, 88vw, 400px);
    height: clamp(300px, 88vw, 400px);
    margin: 0 auto;
  }

  .pp .pp-circle--fazemos {
    left: 0;
    width: 100%;
    height: 100%;
  }
}