/* paginas.css · Nunn&Sander · Páginas de texto (FAQ, Privacidade, Termos) */

.doc { background: var(--bone-100); padding-top: 76px; }

/* Cabeçalho da página */
.doc-hd { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 56px; align-items: start; padding: 120px 80px 64px; border-bottom: 1px solid var(--ink-100); }
.doc-eyebrow { padding-top: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-500); display: flex; align-items: center; gap: 12px; margin: 0; }
.doc-eyebrow::before { content: '\25C6'; color: var(--oxblood-500); font-family: var(--font-sans); }
.doc-title { font-family: var(--font-sans); font-weight: 500; font-size: clamp(40px, 6vw, 88px); line-height: 0.98; letter-spacing: -0.03em; text-transform: uppercase; color: var(--ink-900); margin: 0 0 32px; text-wrap: balance; }
.doc-title em { display: block; font-family: var(--font-serif); font-style: italic; font-weight: 700; text-transform: none; color: var(--oxblood-500); letter-spacing: -0.01em; font-size: 1.08em; line-height: 1; }
.doc-lead { font-size: 19px; line-height: 1.6; color: var(--ink-600); max-width: 60ch; margin: 0; }
.doc-meta { margin: 40px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; border-top: 1px solid var(--ink-100); padding-top: 24px; max-width: 760px; }
.doc-meta dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-500); margin-bottom: 6px; }
.doc-meta dd { margin: 0; font-size: 15px; color: var(--ink-900); }

/* Corpo: índice lateral + texto */
.doc-body { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 56px; padding: 72px 80px 120px; }
.doc-toc { position: sticky; top: 108px; align-self: start; }
.doc-toc-hd { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-500); margin: 0 0 16px; }
.doc-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.doc-toc li { counter-increment: toc; border-top: 1px solid var(--ink-100); }
.doc-toc li:last-child { border-bottom: 1px solid var(--ink-100); }
.doc-toc a { display: flex; gap: 14px; padding: 10px 0; font-size: 14px; line-height: 1.4; color: var(--ink-600); text-decoration: none; background-image: none; }
.doc-toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--font-mono); font-size: 11px; color: var(--ink-400); padding-top: 2px; }
.doc-toc a:hover { color: var(--oxblood-500); }

.doc-text { max-width: 760px; }
.doc-text section { padding: 0 0 48px; margin: 0 0 48px; border-bottom: 1px solid var(--ink-100); scroll-margin-top: 108px; }
.doc-text section:last-child { border-bottom: 0; margin-bottom: 0; }
.doc-text h2 { font-family: var(--font-sans); font-weight: 600; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.2; letter-spacing: -0.015em; text-transform: none; color: var(--ink-900); margin: 0 0 20px; display: flex; gap: 18px; align-items: baseline; }
.doc-text h2 .n { font-family: var(--font-mono); font-size: 12px; font-weight: 400; letter-spacing: 0.1em; color: var(--oxblood-500); flex: none; }
.doc-text p, .doc-text li { font-size: 17px; line-height: 1.7; color: var(--ink-700); }
.doc-text p { margin: 0 0 16px; max-width: 66ch; }
.doc-text ul { margin: 0 0 16px; padding-left: 20px; max-width: 64ch; }
.doc-text li { margin-bottom: 8px; }
.doc-text li::marker { color: var(--oxblood-500); }
.doc-text strong { color: var(--ink-900); font-weight: 600; }
.doc-text a { color: var(--ink-900); }

/* Chamada final */
.doc-cta { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; padding: 56px 80px; background: var(--ink-900); color: var(--bone-50); }
.doc-cta p { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.3; max-width: 32ch; color: var(--bone-50); }
.doc-cta .btn--primary { background: var(--bone-50); color: var(--ink-900); border-color: var(--bone-50); }
.doc-cta .btn--primary:hover { background: var(--oxblood-500); color: var(--bone-50); border-color: var(--oxblood-500); }

@media (max-width: 1024px) {
  .doc-hd, .doc-body { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-left: 40px; padding-right: 40px; }
  .doc-hd { padding-top: 88px; }
  .doc-toc { position: static; }
  .doc-eyebrow { padding-top: 0; }
  .doc-cta { padding: 48px 40px; }
}
@media (max-width: 767px) {
  .doc-hd, .doc-body { padding-left: 16px; padding-right: 16px; }
  .doc-hd { padding-top: 64px; padding-bottom: 40px; }
  .doc-body { padding-top: 40px; padding-bottom: 72px; }
  .doc-lead { font-size: 17px; }
  .doc-text p, .doc-text li { font-size: 16px; }
  .doc-cta { padding: 40px 16px; }
}