/* Páginas de guia (SEO) — mesmos tokens "marca-texto" da página de vendas. */
:root { --paper:#f5f6f3; --surface:#fff; --ink:#15171c; --ink-2:#585e6b; --rule:#dfe2dc; --pen:#2a3cc0; --pen-hover:#1f2d99; --pen-soft:#e6e9fb; --on-pen:#fff; --mark:#ffe34f; --mark-ink:#2e2700; --ok:#17864f;
  --f-display:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif; --f-ui:"Inter","Segoe UI",system-ui,-apple-system,sans-serif; --f-read:"Literata",Georgia,serif; color-scheme:light; }
@media (prefers-color-scheme: dark) { :root { --paper:#111317; --surface:#191b20; --ink:#eceef1; --ink-2:#a2a8b4; --rule:#2a2e36; --pen:#8d9bff; --pen-hover:#a9b4ff; --pen-soft:#242a52; --on-pen:#111317; --mark:#f0d33f; --mark-ink:#1c1800; --ok:#4cc38a; color-scheme:dark; } }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.65 var(--f-ui); -webkit-font-smoothing:antialiased; }
a { color:var(--pen); }
.wrap { max-width:760px; margin-inline:auto; padding-inline:20px; }
.top { border-bottom:1px solid var(--rule); }
.top .wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px; max-width:1040px; }
.brand { display:flex; align-items:center; gap:10px; font:800 1.1rem/1 var(--f-display); text-decoration:none; color:var(--ink); }
.brand img { width:30px; height:30px; border-radius:8px; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 22px; border-radius:12px; font:600 1rem/1 var(--f-ui); text-decoration:none; background:var(--pen); color:var(--on-pen); }
.btn:hover { background:var(--pen-hover); }
.btn.ghost { background:var(--surface); color:var(--ink); border:1px solid var(--rule); }
.top .btn { min-height:40px; padding:0 16px; font-size:.92rem; }
:focus-visible { outline:3px solid var(--pen); outline-offset:2px; border-radius:6px; }
.crumbs { font-size:.85rem; color:var(--ink-2); padding-block:20px 0; }
.crumbs a { color:var(--ink-2); }
h1,h2,h3 { font-family:var(--f-display); letter-spacing:-.02em; line-height:1.12; margin:0; text-wrap:balance; }
h1 { font-size:clamp(2rem,5.5vw,3.2rem); font-weight:800; margin-block:12px 18px; }
h2 { font-size:clamp(1.5rem,3.2vw,2rem); font-weight:800; margin-block:48px 14px; }
h3 { font-size:1.15rem; font-weight:700; }
.hl { background:linear-gradient(transparent 58%,var(--mark) 58% 92%,transparent 92%); padding:0 .08em; }
.lead { font:400 1.15rem/1.65 var(--f-read); color:var(--ink-2); }
main p { margin:0 0 14px; }
main ul, main ol { padding-left:22px; margin:0 0 14px; }
main li { margin-bottom:6px; }
.cta { display:flex; flex-wrap:wrap; gap:12px; margin-block:24px; align-items:center; }
.fine { font-size:.88rem; color:var(--ink-2); }
.card { background:var(--surface); border:1px solid var(--rule); border-radius:16px; padding:20px 22px; margin-block:16px; }
.card h3 { margin-bottom:6px; }
.card p { color:var(--ink-2); margin:0; }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-block:16px; }
@media (max-width:640px) { .grid { grid-template-columns:1fr; } }
.grid .card { margin:0; }
.prompt { font:500 .9rem/1.55 ui-monospace,Menlo,monospace; background:var(--pen-soft); border-radius:10px; padding:10px 12px; margin:10px 0 0; color:var(--ink); }
details { background:var(--surface); border:1px solid var(--rule); border-radius:14px; padding:4px 20px; margin-bottom:10px; }
summary { cursor:pointer; font-weight:600; padding:14px 0; list-style:none; display:flex; justify-content:space-between; gap:12px; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"+"; color:var(--ink-2); font-size:1.3rem; line-height:1; }
details[open] summary::after { content:"−"; }
details p { color:var(--ink-2); font:400 1rem/1.65 var(--f-read); }
.final { margin-block:56px 0; background:var(--ink); color:var(--paper); border-radius:20px; padding:clamp(24px,5vw,44px); }
.final h2 { margin:0 0 10px; color:var(--paper); }
.final p { color:color-mix(in srgb,var(--paper) 80%,transparent); font-family:var(--f-read); }
.final .btn { background:var(--mark); color:var(--mark-ink); }
.related { display:flex; flex-wrap:wrap; gap:8px 18px; padding:0; list-style:none; }
footer { margin-top:56px; border-top:1px solid var(--rule); padding-block:24px 32px; font-size:.88rem; color:var(--ink-2); }
footer a { color:var(--ink-2); }
footer .wrap { display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between; }