/* Static SEO pages (entrevista/guias/ferramenta). Mobile-first, no JS. Brand tokens match src/styles/base.css. */
:root { --ink:#19202d; --muted:#5d6779; --line:#e7eaf0; --canvas:#f7f8fb; --blue:#3559e8; --blue-2:#eef1ff; --green:#16835a; }
* { box-sizing:border-box }
body { margin:0; font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--ink); background:var(--canvas); line-height:1.65; font-size:17px }
a { color:var(--blue) }
.site-header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; padding:14px 16px; background:white; border-bottom:1px solid var(--line) }
.brand { display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:20px; color:var(--ink); text-decoration:none; letter-spacing:-.02em }
.brand-mark { display:grid; place-items:center; width:30px; height:30px; border-radius:9px; background:var(--blue); color:white; font-size:14px }
.site-header nav { display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; font-size:15px; font-weight:600 }
.site-header nav a { text-decoration:none; color:var(--muted) }
.site-header nav a.header-cta { color:white; background:var(--blue); padding:8px 14px; border-radius:10px }
.breadcrumbs { max-width:760px; margin:0 auto; padding:14px 16px 0; font-size:14px; color:var(--muted) }
.breadcrumbs a { color:var(--muted) }
main { max-width:760px; margin:0 auto; padding:8px 16px 40px }
h1 { font-size:30px; line-height:1.2; letter-spacing:-.02em; margin:14px 0 12px }
h2 { font-size:22px; line-height:1.3; margin:34px 0 10px }
h3 { font-size:18px; line-height:1.35; margin:0 0 8px; display:flex; gap:10px; align-items:flex-start }
.lead { font-size:18px; color:#364052 }
.question { background:white; border:1px solid var(--line); border-radius:14px; padding:16px; margin:12px 0 }
.question p { margin:6px 0; color:#364052 }
.q-number { flex:0 0 auto; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--blue-2); color:var(--blue); font-size:14px; font-weight:800; margin-top:1px }
.cta { background:var(--blue-2); border:1px solid #d9e0ff; border-radius:16px; padding:18px; margin:24px 0 }
.cta h2 { margin:0 0 6px; font-size:20px }
.cta p { margin:0 0 12px; color:#2a3a6b }
.cta-button { display:inline-block; background:var(--blue); color:white; text-decoration:none; font-weight:700; padding:12px 18px; border-radius:12px }
.cta .cta-note { margin:10px 0 0; font-size:14px; color:var(--muted) }
.example { margin:12px 0; background:white; border:1px solid var(--line); border-left:4px solid var(--green); border-radius:12px; padding:12px 16px }
.example figcaption { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--green) }
.example blockquote { margin:6px 0 0; color:#364052; font-style:italic }
.see-also { border-top:1px solid var(--line); margin-top:24px }
.index-list { list-style:none; padding:0; display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)) }
.index-list li { background:white; border:1px solid var(--line); border-radius:12px; padding:12px 14px }
.index-list a { font-weight:700; text-decoration:none }
.index-list.guides { grid-template-columns:1fr }
.index-list.guides p { margin:4px 0 0; font-size:15px; color:var(--muted) }
.site-footer { border-top:1px solid var(--line); background:white; padding:18px 16px; text-align:center; font-size:14px; color:var(--muted) }
.site-footer p { margin:4px 0 }
.tool textarea { width:100%; min-height:220px; padding:12px; border:1px solid #d5dbe6; border-radius:12px; font:inherit; font-size:16px; resize:vertical }
.tool button { margin-top:10px; background:var(--blue); color:white; border:0; font:inherit; font-weight:700; padding:12px 18px; border-radius:12px; cursor:pointer }
.tool button:disabled { opacity:.6; cursor:default }
.tool-status { margin:12px 0; color:var(--muted) }
.tool-status.error { color:#b23b3b }
@media (min-width:800px) { h1 { font-size:38px } body { font-size:18px } }