/* ============================================================
   FORJA — COMPONENTES DAS PÁGINAS DE pSEO (arquétipo A1)
   ------------------------------------------------------------
   Usa só os tokens já definidos em forja-theme.css. Nenhuma cor,
   fonte ou espaçamento novo — só a composição é nova.
   ============================================================ */

.ps-hero { padding-block: clamp(48px, 6vw, 80px) clamp(32px, 4vw, 48px); }
.ps-hero .eyebrow { margin-bottom: 14px; }
.ps-hero h1 { max-width: 20ch; margin-bottom: 20px; }

/* Resposta direta: pensada para ser extraída por IA Overview / PAA.
   Fica logo abaixo do H1, sem depender de rolagem. */
.ps-resposta {
  background: var(--forja-surface);
  border: 1px solid var(--forja-border);
  border-left: 4px solid var(--forja-copper);
  border-radius: var(--radius);
  padding: 20px 24px;
  max-width: 68ch;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--forja-ink);
  box-shadow: var(--shadow-sm);
}

.ps-secao { padding-block: clamp(40px, 5vw, 64px); }
.ps-secao__titulo {
  font-family: var(--font-title);
  font-size: var(--fs-h3);
  font-weight: 700;
  margin-bottom: 16px;
}

/* Atrito / norma: o bloco central do arquétipo A1. */
.ps-atrito {
  background: var(--forja-bg-alt);
  border: 1px solid var(--forja-border);
  border-radius: var(--radius);
  padding: 24px 28px;
  max-width: 74ch;
}
.ps-atrito p { color: var(--forja-ink-soft); line-height: 1.7; }
.ps-atrito p + p { margin-top: 12px; }

/* Prova: a citação da norma, com fonte e data visíveis. */
.ps-prova {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed var(--forja-border);
}
.ps-prova__item { font-size: var(--fs-small); color: var(--forja-ink-soft); }
.ps-prova__item strong { color: var(--forja-ink); }
.ps-prova__item a { color: var(--forja-copper-deep); text-decoration: underline; text-underline-offset: 2px; }

/* Escopo aplicado: duas colunas, entra / não entra. */
.ps-escopo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 74ch; }
@media (max-width: 640px) { .ps-escopo { grid-template-columns: 1fr; } }
.ps-escopo__col h3 { font-size: var(--fs-body); font-weight: 600; margin-bottom: 10px; }
.ps-escopo__col--aplica h3 { color: var(--forja-success); }
.ps-escopo__col--nao-aplica h3 { color: var(--forja-error); }
.ps-escopo__lista { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ps-escopo__lista li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: var(--fs-small); line-height: 1.55; color: var(--forja-ink-soft);
}
.ps-escopo__lista svg { flex-shrink: 0; width: 15px; height: 15px; margin-top: 3px; }
.ps-escopo__col--aplica svg { color: var(--forja-success); }
.ps-escopo__col--nao-aplica svg { color: var(--forja-error); }

/* Quando não usar: honestidade sobre limite, nunca escondida. */
.ps-quando-nao {
  background: var(--forja-surface);
  border: 1px solid var(--forja-border);
  border-radius: var(--radius);
  padding: 20px 24px;
  max-width: 74ch;
}
.ps-quando-nao__lista { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ps-quando-nao__lista li { display: flex; gap: 10px; font-size: var(--fs-small); line-height: 1.6; color: var(--forja-ink-soft); }
.ps-quando-nao__lista svg { flex-shrink: 0; width: 16px; height: 16px; margin-top: 3px; color: var(--forja-copper-deep); }

/* Cluster de páginas relacionadas — o grafo de link do pSEO. */
.ps-cluster { display: flex; flex-wrap: wrap; gap: 10px; max-width: 90ch; }
.ps-cluster__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px;
  background: var(--forja-surface);
  border: 1px solid var(--forja-border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  color: var(--forja-ink);
  text-decoration: none;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.ps-cluster__link:hover { border-color: var(--forja-copper); background: var(--forja-surface-2); }
.ps-cluster__grupo { margin-bottom: 20px; }
.ps-cluster__grupo:last-child { margin-bottom: 0; }
.ps-cluster__rotulo { display: block; font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: 0.06em; color: var(--forja-ink-soft); margin-bottom: 10px; }

/* Índice de nichos (página estrutural para-o-seu-negocio.html). */
.ps-indice__grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.ps-indice__card {
  background: var(--forja-surface);
  border: 1px solid var(--forja-border);
  border-radius: var(--radius);
  padding: 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.ps-indice__card h3 { font-size: var(--fs-body); font-weight: 700; }
.ps-indice__card p { font-size: var(--fs-small); color: var(--forja-ink-soft); line-height: 1.55; }
.ps-indice__card .ps-cluster { margin-top: auto; }

/* Método em passos (arquétipo A3). */
.ps-metodo { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 18px; max-width: 74ch; }
.ps-metodo__item { display: flex; gap: 16px; }
.ps-metodo__numero {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  background: var(--forja-surface); border: 1px solid var(--forja-border);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--forja-copper-deep); font-size: var(--fs-small);
}
.ps-metodo__corpo h3 { font-size: var(--fs-body); font-weight: 600; margin-bottom: 4px; }
.ps-metodo__corpo p { font-size: var(--fs-small); color: var(--forja-ink-soft); line-height: 1.6; margin: 0; }

/* Lista simples com ícone (composição de custo, comparação — A13). */
.ps-lista-simples { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; max-width: 74ch; }
.ps-lista-simples li { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-small); line-height: 1.55; color: var(--forja-ink-soft); }
.ps-lista-simples svg { flex-shrink: 0; width: 15px; height: 15px; margin-top: 3px; color: var(--forja-copper-deep); }

@media (prefers-reduced-motion: reduce) {
  .ps-cluster__link { transition: none; }
}