/* ═══════════════════════════════════════════════════════════
   aparece-google.css — Seção 4 ("Meu Site vai aparecer no Google?")
   de /criacao-de-sites. Seção-ponte, propositalmente de baixo peso
   visual: prosa centralizada, sem numeral/card/ícone — a página já
   tem 3 sequências numeradas (Dor, Solução, Como Funciona), um 4º
   dispositivo repetiria o padrão. Fechamento reaproveita o mesmo
   botão pill (.dor-link, definido em dor-contexto.css) que já leva
   pra /seo na Seção 2 — mesmo destino, mesmo componente visual.
═══════════════════════════════════════════════════════════ */

.aparece {
  padding: 80px 0;
}

.aparece-wrap {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 var(--pad);
}

.aparece-head {
  max-width: 620px;
  margin: 0 auto 48px;
  text-align: center;
}

.aparece-head h2 {
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.15;
  margin-bottom: 16px;
  text-wrap: balance;
}

.aparece-head p {
  font-size: 16px;
  line-height: 1.68;
  color: var(--text2);
}

.aparece-list {
  max-width: 640px;
  margin: 0 auto;
}

.aparece-item + .aparece-item {
  border-top: 1px solid var(--border);
}

.aparece-item {
  padding: 32px 0;
}

.aparece-item h3 {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
  margin-bottom: 8px;
  text-wrap: balance;
}

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

.aparece-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 620px;
  margin: 48px auto 0;
  text-align: center;
}

.aparece-foot p {
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--text2);
}

@media (max-width: 720px) {
  .aparece {
    padding: 56px 0;
  }

  .aparece-head {
    margin-bottom: 32px;
  }

  .aparece-item {
    padding: 24px 0;
  }

  .aparece-foot {
    margin-top: 32px;
  }
}