/* Cluster /para-quem-cria — páginas de comparação para programadores e designers.
   Reusa as variáveis de /style.css. Não redefine paleta. */

.nav-pages { display: flex; align-items: center; gap: 4px; }
.nav-pages a {
  white-space: nowrap; padding: 8px 12px; border-radius: 999px;
  color: var(--ink-soft); font-size: 0.93rem; font-weight: 500;
  transition: color 0.2s, background 0.2s;
}
.nav-pages a:hover { color: var(--ink); background: var(--surface-2); }
.nav-pages a.here { color: var(--cyan); }
@media (max-width: 1240px) { .nav-pages { display: none; } }

.pq-crumbs {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-bottom: 18px; color: var(--ink-dim); font-size: 0.86rem;
}
.pq-crumbs a { color: var(--ink-soft); }
.pq-crumbs a:hover { color: var(--cyan); }
.pq-crumbs span[aria-hidden] { color: var(--ink-dim); }

.pq-kicker {
  font-family: var(--font-code); font-size: 0.78rem; letter-spacing: 0.04em;
  color: var(--cyan); margin: 0 0 8px;
}

.pq-grid-2 { display: grid; grid-template-columns: 1fr; gap: 16px; }
.pq-grid-3 { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 760px) { .pq-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .pq-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.pq-card {
  padding: 22px; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-soft); font-size: 0.94rem;
}
.pq-card h3 { color: var(--ink); font-size: 1.08rem; margin: 0 0 8px; }
.pq-card p { margin: 0 0 10px; }
.pq-card p:last-child { margin-bottom: 0; }
.pq-card a { color: var(--cyan); }
.pq-card.fit { border-color: rgba(62, 232, 168, 0.32); background: rgba(62, 232, 168, 0.05); }
.pq-card.other { border-color: rgba(47, 217, 242, 0.28); }
.pq-card.gap { border-color: rgba(255, 196, 107, 0.35); background: rgba(255, 196, 107, 0.05); }

.pq-mark {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-code); font-size: 0.72rem; letter-spacing: 0.06em;
  text-transform: uppercase; margin-bottom: 10px;
}
.pq-card.fit .pq-mark { color: #3ee8a8; }
.pq-card.other .pq-mark { color: var(--cyan); }
.pq-card.gap .pq-mark { color: #ffc46b; }

.pq-table-wrap {
  margin-top: 8px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); overflow-x: auto;
}
.pq-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 720px; }
.pq-table th, .pq-table td {
  text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line);
  vertical-align: top; color: var(--ink-soft);
}
.pq-table tr:last-child td { border-bottom: 0; }
.pq-table th { color: var(--ink); font-family: var(--font-display); font-size: 0.84rem; font-weight: 600; }
.pq-table td b, .pq-table a { color: var(--ink); }
.pq-table a { color: var(--cyan); }
.pq-table code { color: var(--cyan); font-size: 0.84rem; }
.pq-table .here { color: var(--ink); font-weight: 600; }

.pq-steps { display: grid; gap: 12px; counter-reset: pq; }
@media (min-width: 900px) { .pq-steps.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .pq-steps.n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.pq-step {
  padding: 18px 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface);
}
.pq-step::before {
  counter-increment: pq; content: counter(pq);
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; margin-bottom: 10px;
  background: var(--grad); color: #05070d; font-weight: 700; font-size: 0.86rem;
}
.pq-step b { display: block; color: var(--ink); font-family: var(--font-display); font-size: 0.96rem; margin-bottom: 6px; }
.pq-step p { margin: 0; color: var(--ink-soft); font-size: 0.88rem; }

.pq-note {
  margin-top: 22px; padding: 16px 18px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); font-size: 0.94rem;
}
.pq-note.warn { border-color: rgba(255, 196, 107, 0.35); background: rgba(255, 196, 107, 0.07); color: #ffe2b4; }
.pq-note.tip { border-color: rgba(62, 232, 168, 0.3); background: rgba(62, 232, 168, 0.06); color: #bff5dd; }
.pq-note b { color: inherit; }
.pq-note a { color: var(--cyan); }

.pq-links { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 8px; }
@media (min-width: 760px) { .pq-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pq-links.wide { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pq-link {
  display: block; padding: 20px; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-soft); font-size: 0.92rem;
  transition: border-color 0.2s, transform 0.2s;
}
.pq-link:hover { border-color: rgba(47, 217, 242, 0.5); transform: translateY(-3px); }
.pq-link b { display: block; color: var(--ink); font-family: var(--font-display); font-size: 1rem; margin-bottom: 6px; }
.pq-link .pq-for { display: block; font-family: var(--font-code); font-size: 0.75rem; color: var(--cyan); margin-bottom: 8px; }

.pq-cta-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.pq-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.pq-list li { display: flex; gap: 8px; color: var(--ink-soft); font-size: 0.92rem; }
.pq-list svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; color: var(--mint); }

.hub-map { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 800px) { .hub-map { grid-template-columns: 220px 1fr; align-items: stretch; } }
.hub-need {
  padding: 18px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface);
}
.hub-need h3 { font-size: 1rem; margin: 0 0 6px; color: var(--ink); }
.hub-need p { margin: 0; color: var(--ink-soft); font-size: 0.9rem; }
.hub-need a { color: var(--cyan); font-weight: 600; }