/* ═══════════════════════════════════════════════════════════
   investimento-seo.css: complementos da seção Investimento de
   /auditoria-e-correcao-de-seo-tecnico. Reaproveita tiers.css sem
   editá-lo; aqui só entram o que ele não tem: o par de preços do
   card 1 e a lista "Não incluído" (marcador × em vez de check).
═══════════════════════════════════════════════════════════ */

.tier-prices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 20px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.tier-prices .tier-price {
  margin: 0;
  padding: 16px 0;
}

.tier-prices .tier-price + .tier-price {
  padding-left: 20px;
  border-left: 1px solid var(--border);
}

.tier-prices .tier-price-label {
  margin-bottom: 4px;
  font-size: 13px;
  color: var(--text2);
}

.tier-prices .tier-price-value {
  font-size: 28px;
}

.tier-list-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
}

.tier-list + .tier-list-title {
  margin-top: 28px;
}

.tier-list--excluded .tier-x {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 4px;
  border: 1.5px solid var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text2);
}

.tier-list--excluded p {
  color: var(--text2);
}

.tier-card .tier-cta + .tier-list-title {
  margin-top: 0;
}

/* Cards um abaixo do outro; em cada um, identidade e preço à esquerda, detalhes à direita */
.tiers-grid {
  grid-template-columns: 1fr;
}

.tiers-grid .tier-card {
  display: grid;
  grid-template-columns: 1fr 2fr;
  column-gap: 56px;
  align-items: start;
}

.tiers-grid .tier-cta {
  margin-bottom: 0;
}

.tiers-grid .tier-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.tiers-grid .tier-card:not(.tier-card--primary) .tier-detail {
  grid-template-columns: 1fr;
}

.tiers-grid .tier-detail .tier-desc {
  margin-bottom: 0;
  font-size: 15.5px;
}

@media (max-width: 860px) {
  .tiers-grid .tier-card {
    display: flex;
  }

  .tiers-grid .tier-main {
    margin-bottom: 28px;
  }

  .tiers-grid .tier-detail {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .tier-prices .tier-price-value {
    font-size: 24px;
  }
}