/* ═══════════════════════════════════════════════════════════
   primeira-posicao.css — Seção 4 ("Por que não prometemos a 1ª
   posição") de /seo. Único, não reaproveitado de outra página:
   2 colunas (esquerda: H2 + círculos Fazemos/Não fazemos + fecho;
   direita: H2 + 3 itens "o que você pode fazer" + imagem plates).
   Mobile empilha em ordem própria (H2 → lead → círculos → H2-2 →
   itens → imagem → fecho) via display:contents + order, mesmo
   mecanismo já validado em home.css (.confianca-first) — não usar
   grid-template-areas aqui (ver histórico em project_site_progresso).
═══════════════════════════════════════════════════════════ */

.pp {
  padding: 104px 0;
}

.pp-wrap {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 var(--pad);
  display: flex;
  gap: 96px;
}

.pp-left,
.pp-right {
  flex: 1;
  min-width: 0;
}

/* ── H2 esquerdo: peso light, exceto os spans .pp-bold ── */
.pp-h2 {
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.18;
  color: var(--text);
  text-wrap: balance;
  margin-bottom: 28px;
}

.pp-h2 .pp-bold {
  font-weight: 800;
}

.pp-lead {
  font-size: 16px;
  line-height: 1.68;
  color: var(--text2);
  max-width: 480px;
  margin-bottom: 56px;
}

/* ── Círculos Fazemos / Não fazemos ── */
.pp-circles {
  position: relative;
  width: clamp(300px, 32vw, 440px);
  height: clamp(300px, 32vw, 440px);
  margin-bottom: 40px;
}

.pp-circle {
  position: absolute;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* container-type: cada círculo vira sua própria "unidade de medida"
   (cqw = % da LARGURA DO PRÓPRIO CÍRCULO). Fonte/gap escalam junto
   com o círculo em qualquer tamanho — vw/clamp não fazem isso porque
   são relativos à viewport, não ao elemento; se o círculo encolhe
   mais que a viewport (coluna estreita, breakpoint intermediário),
   o texto com vw/px fixo não acompanha e vaza pra fora do círculo. */
.pp-circle--fazemos,
.pp-circle--nao {
  container-type: inline-size;
}

/* Padding 15% em todos os lados = a "caixa segura" inscrita no
   círculo (matematicamente, um retângulo a até ~14,64% de margem
   de cada lado sempre cabe dentro do círculo — 15% arredonda pra
   cima, com folga). Enquanto o conteúdo não ultrapassar essa caixa,
   fica garantidamente dentro da curva, em qualquer tamanho. */
.pp-circle--fazemos {
     top: 0;
    left: 0;
    width: 94%;
    height: 94%;
    z-index: 1;
    background: var(--text);
    color: #fff;
    padding: 15%;
}

.pp-circle--fazemos h3 {
  font-size: clamp(14px, 9cqw, 21px);
  font-weight: 700;
  margin-bottom: clamp(8px, 6cqw, 16px);
}

.pp-circle--fazemos ul {
  list-style: none;
}

.pp-circle--fazemos li {
 /*  font-size: clamp(9.5px, 5.6cqw, 13.5px); */
  font-size: 13px;
  line-height: 1.42;
  color: rgba(255, 255, 255, .82);
}

.pp-circle--fazemos li + li {
  margin-top: clamp(4px, 3cqw, 8px);
}

.pp-circle--nao {
 top: 40%;
    left: 76%;
    width: 80%;
    height: 80%;
    z-index: 2;
    padding: 15%;
    background: rgba(255, 255, 255, .38);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, .55);
    box-shadow: 0 8px 32px rgba(26, 26, 26, .12);
}


.pp-circle--nao h3 {
  font-size: clamp(13px, 8.6cqw, 18px);
  font-weight: 700;
  color: var(--text);
  margin-bottom: clamp(6px, 5cqw, 12px);
}

.pp-circle--nao ul {
  list-style: none;
}

.pp-circle--nao li {
  /* font-size: clamp(9px, 5.2cqw, 13px); */
  font-size: 13px;
  line-height: 1.4;
  color: var(--text2);
}

.pp-circle--nao li + li {
  margin-top: clamp(3px, 2.4cqw, 6px);
}

.pp-circle li::before {
  content: "- ";
}

.pp-close {
    font-size: 15px;
    line-height: 1.68;
    color: var(--text2);
    max-width: 520px;
    padding-top: 5rem;
}

/* ── Coluna direita: H2 + itens + imagem ── */
.pp-h2-right {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.25;
  color: var(--text);
  text-wrap: balance;
  margin-bottom: 36px;
}

.pp-items {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-bottom: 48px;
}

.pp-item h3 {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.pp-item p {
  font-size: 15px;
  line-height: 1.68;
  color: var(--text2);
}

.pp-item a {
  color: var(--text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pp-plates {
  display: block;
  width: clamp(240px, 26vw, 340px);
  height: auto;
  margin-left: auto;
}


@media (max-width: 987px) {
.pp-circle--nao li {
  font-size: clamp(9px, 5.2cqw, 13px); 
  
  line-height: 1.4;
  color: var(--text2);
}

.pp-circle--fazemos li {
 font-size: clamp(9.5px, 5.6cqw, 13.5px);
  
  line-height: 1.42;
  color: rgba(255, 255, 255, .82);
}
}


/* ══════════ MOBILE — reordena via display:contents + order ══════════ */
@media (max-width: 860px) {
  .pp {
    padding: 64px 0;
  }

  .pp-wrap {
    flex-direction: column;
    gap: 16px;
  }

  .pp-left,
  .pp-right {
    display: contents;
  }

  .pp-h2 {
    order: 1;
  }

  .pp-lead {
    order: 2;
    margin-bottom: 40px;
    max-width: 100%;
  }

  .pp-circles {
    order: 3;
    width: clamp(290px, 84vw, 380px);
    height: clamp(290px, 84vw, 380px);
    margin: 0 auto 48px;
  }

  .pp-h2-right {
            order: 4;
        margin-top: 18rem;
  }

  .pp-circle--fazemos {
    left: -52px;
        width: 118%;
        height: 118%;
  }

  .pp-circle--nao {
          top: 100%;
        left: 36%;
        width: 83%;
        height: 83%;
  }

  .pp-circle--fazemos li, .pp-circle--nao li  {
    font-size: 12px;
  }

  .pp-items {
    order: 5;
  }

  .pp-plates {
    order: 6;
    width: 60%;
    margin: 8px auto 40px;
  }

  .pp-close {
    order: 7;
    max-width: 100%;
    padding-top: unset;
  }
}