/* ═══════════════════════════════════════════════════════════════════════════
   Blog do Seu Pedido com IA (spec 0004, 06/11/2026).

   Os MESMOS tokens da landing (site/index.html), copiados e não reinventados:
   fundo com tinta violeta, texto com contraste medido, âmbar/brasa de marca.
   A landing tem o CSS dentro do próprio HTML (uma página só, um pedido só);
   aqui são várias páginas, então o estilo mora num arquivo que o navegador
   guarda depois do primeiro artigo.

   ⚠️ Mudou um token na landing? Mude aqui também. São duas cópias de propósito
   (a landing não pode depender deste arquivo pra abrir), e cópia envelhece.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#080711; --surface:#141121; --surface-2:#1C1830; --borda:#272138;
  --txt:#F4F2FA;         /* ~17:1  títulos       */
  --txt-muted:#B5B0C6;   /* ~9:1   texto corrido */
  --txt-subtle:#8B8598;  /* ~5:1   legendas      */
  --brasa:#FF6A3D; --brasa-hover:#FF8A64; --zap:#25D366;
  --sans:"Inter",system-ui,-apple-system,sans-serif;
  --display:"Space Grotesk","Inter",system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --r-xl:1.125rem;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--txt);font-family:var(--sans);
  font-size:1rem;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--brasa);text-underline-offset:3px}
a:hover{color:var(--brasa-hover)}
img{max-width:100%;height:auto;display:block}

.wrap{width:100%;max-width:1200px;margin-inline:auto;padding-inline:16px}
@media(min-width:640px){.wrap{padding-inline:32px}}

/* ── topo (igual ao da landing) ─────────────────────────────────────────── */
header{position:sticky;top:0;z-index:40;border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(8,7,17,.86);backdrop-filter:blur(14px)}
.topo{display:flex;align-items:center;gap:1rem;height:64px}
.marca{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--display);
  font-weight:700;font-size:1.02rem;letter-spacing:-.02em;text-decoration:none;
  white-space:nowrap;color:var(--txt)}
.marca:hover{color:var(--txt)}
.marca .ponto{width:9px;height:9px;border-radius:50%;background:var(--brasa);
  box-shadow:0 0 14px 2px rgba(255,106,61,.8)}
.topo nav{display:flex;align-items:center;gap:1.4rem;margin-left:auto;font-size:.9rem}
/* :not(.btn): sem isso a cor do menu vence a do botão (seletor mais forte) e o
   "Criar conta" fica com texto claro em cima do laranja. */
.topo nav a:not(.btn){color:var(--txt-muted);text-decoration:none}
.topo nav a:not(.btn):hover{color:var(--txt)}
@media(max-width:560px){.topo nav .so-largo{display:none}}

/* ── botões ─────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border-radius:999px;padding:.8rem 1.4rem;font-weight:600;font-size:.9375rem;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:transform .15s var(--ease),background .18s}
.btn:active{transform:scale(.97)}
.btn-brasa{background:var(--brasa);color:#20100A;box-shadow:0 0 40px -12px rgba(255,106,61,.75)}
.btn-brasa:hover{background:var(--brasa-hover);color:#20100A}
.btn-sm{padding:.5rem .95rem;font-size:.85rem}
.btn:focus-visible,a:focus-visible{outline:2px solid var(--brasa);outline-offset:3px}

/* ── artigo ─────────────────────────────────────────────────────────────── */
/* 68ch: a linha que se lê sem perder o começo da próxima. */
.artigo{max-width:68ch;margin-inline:auto;padding-block:clamp(2rem,6vw,3.5rem) 3rem}
.trilha{font-size:.82rem;color:var(--txt-subtle);margin-bottom:1.2rem}
.trilha a{color:var(--txt-subtle)}
h1,h2,h3{font-family:var(--display);font-weight:600;color:var(--txt);margin:0}
h1{font-size:clamp(1.9rem,5vw,2.75rem);line-height:1.1;letter-spacing:-.03em}
.artigo h2{font-size:clamp(1.35rem,3.4vw,1.75rem);line-height:1.2;letter-spacing:-.02em;
  margin:2.6rem 0 .9rem;scroll-margin-top:80px}
.artigo h3{font-size:1.1rem;line-height:1.35;margin:1.8rem 0 .6rem}
.artigo p,.artigo li{color:var(--txt-muted)}
.artigo p{margin:0 0 1.1rem}
.artigo strong{color:var(--txt);font-weight:600}
.artigo ul,.artigo ol{padding-left:1.25rem;margin:0 0 1.2rem}
.artigo li{margin-bottom:.45rem}
.meta{display:flex;flex-wrap:wrap;gap:.35rem 1rem;margin:1rem 0 0;font-size:.85rem;color:var(--txt-subtle)}

/* A resposta direta logo no começo: é o trecho que o Google põe em destaque e
   que as IAs citam. Vem antes de qualquer contexto. */
.resposta{margin:1.8rem 0 2rem;padding:1.1rem 1.25rem;border-left:3px solid var(--brasa);
  background:rgba(255,106,61,.07);border-radius:0 .75rem .75rem 0}
.resposta p{color:var(--txt);margin:0}
.resposta p+p{margin-top:.6rem}

/* ── tabela ─────────────────────────────────────────────────────────────── */
/* Rola sozinha no celular: tabela larga não pode empurrar a página pro lado. */
.tabela{overflow-x:auto;margin:0 0 1.4rem;border:1px solid rgba(255,255,255,.08);border-radius:.75rem}
table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:420px}
th,td{padding:.65rem .85rem;text-align:left;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:top}
th{color:var(--txt);font-weight:600;background:rgba(255,255,255,.03)}
td{color:var(--txt-muted)}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;white-space:nowrap}
caption{caption-side:bottom;text-align:left;padding:.6rem .85rem;font-size:.8rem;color:var(--txt-subtle)}

.nota{font-size:.85rem;color:var(--txt-subtle)}
.fonte{font-size:.82rem;color:var(--txt-subtle)}

/* ── chamada pro cadastro ───────────────────────────────────────────────── */
.cta{margin:2.6rem 0;padding:1.5rem;border:1px solid rgba(255,255,255,.08);border-radius:var(--r-xl);
  background-image:linear-gradient(180deg,rgba(255,106,61,.10) 0%,rgba(255,255,255,.02) 100%)}
.cta h2,.cta .titulo{font-family:var(--display);font-size:1.25rem;font-weight:600;color:var(--txt);margin:0 0 .5rem}
.cta p{color:var(--txt-muted);margin:0 0 1.1rem}
.cta .sob{margin:.8rem 0 0;font-size:.82rem;color:var(--txt-subtle)}

/* ── perguntas frequentes ───────────────────────────────────────────────── */
details{border:1px solid rgba(255,255,255,.08);border-radius:.75rem;padding:.85rem 1rem;margin-bottom:.6rem;
  background:rgba(255,255,255,.02)}
summary{cursor:pointer;color:var(--txt);font-weight:600;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";float:right;color:var(--brasa);font-weight:700}
details[open] summary::after{content:"–"}
details p{margin:.7rem 0 0}

/* ── autor ──────────────────────────────────────────────────────────────── */
.autor{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.08);
  font-size:.9rem;color:var(--txt-subtle)}
.autor strong{color:var(--txt)}

/* ── lista do blog ──────────────────────────────────────────────────────── */
.lista{max-width:68ch;margin-inline:auto;padding-block:clamp(2rem,6vw,3.5rem) 3rem}
.lista>p{color:var(--txt-muted);margin:.9rem 0 2rem}
.cartao{display:block;text-decoration:none;padding:1.2rem 1.25rem;margin-bottom:.9rem;
  border:1px solid rgba(255,255,255,.08);border-radius:var(--r-xl);
  background-image:linear-gradient(180deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.015) 100%);
  transition:border-color .18s}
.cartao:hover{border-color:rgba(255,106,61,.5)}
.cartao h2{font-size:1.15rem;line-height:1.3;margin:0 0 .4rem}
.cartao p{color:var(--txt-muted);margin:0;font-size:.92rem}

/* ── rodapé ─────────────────────────────────────────────────────────────── */
footer{border-top:1px solid rgba(255,255,255,.06);padding-block:1.6rem;font-size:.82rem;color:var(--txt-subtle)}
.rodape{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between}
.rodape a{color:var(--txt-subtle);text-decoration:none}
.rodape a:hover{color:var(--txt)}
.rodape span{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}