/* Artigos — padrão visual do site sdesk (tema escuro, Inter, marca em gradiente).
   Reaproveita o mesmo vocabulário de classes das páginas de artigo. */
:root{
  --bg-dark:#0a0e1a; --bg-card:#111827; --bg-card2:#1a2236;
  --blue:#3b82f6; --blue-light:#60a5fa; --green:#10b981; --green-light:#34d399;
  --text:#f1f5f9; --text-muted:#94a3b8; --border:#1e293b;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg-dark);color:var(--text);font-family:'Inter','Segoe UI',sans-serif;line-height:1.7}
a{color:var(--blue-light);text-decoration:none}
a:hover{color:var(--green-light)}

/* header/nav no padrão do site (fixo, blur, marca em gradiente) */
header{position:sticky;top:0;z-index:100;display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;
  padding:1rem 2rem;background:rgba(10,14,26,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
header .brand{font-size:1.7rem;font-weight:800;background:linear-gradient(90deg,var(--blue),var(--green));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
header nav{margin-left:auto;display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
header nav a{color:var(--text-muted);font-size:.9rem;font-weight:600}
header nav a:hover{color:var(--text)}
header nav a.nav-cta{background:linear-gradient(135deg,var(--blue),var(--green));color:#fff;padding:.5rem 1.1rem;border-radius:8px}
header nav a.nav-cta:hover{opacity:.88;color:#fff}

main{max-width:760px;margin:0 auto;padding:34px 20px 60px}
.hero{text-align:center;padding:14px 0 6px}
.hero h1{font-size:34px;line-height:1.2;margin:0 0 10px}
.hero p{color:var(--text-muted);font-size:17px;max-width:580px;margin:0 auto}

article h1{font-size:30px;line-height:1.25;margin:6px 0 14px}
article h2{font-size:22px;margin-top:30px}
article h3{font-size:18px;margin-top:22px}
article p{margin:14px 0;color:#dbe3ee}
article ul,article ol{margin:14px 0;padding-left:22px}
article li{margin:6px 0;color:#dbe3ee}
blockquote{border-left:4px solid var(--blue);background:var(--bg-card);margin:18px 0;padding:12px 16px;color:var(--text-muted);border-radius:0 8px 8px 0}
code{background:var(--bg-card2);color:var(--green-light);padding:1px 6px;border-radius:4px;font-size:.92em}
pre{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:14px;overflow:auto}
pre code{background:none;color:inherit;padding:0}

.cta{display:inline-block;background:linear-gradient(135deg,var(--blue),var(--green));color:#fff;font-weight:700;padding:11px 20px;border-radius:9px;margin:4px 0}
.cta:hover{opacity:.9;color:#fff}
.ctabox{margin:32px 0 8px;padding:20px;border:1px solid var(--border);border-radius:14px;background:var(--bg-card);text-align:center}
.ctabox p{margin:0 0 12px;color:var(--text-muted)}

.grid{display:grid;gap:14px;margin-top:20px}
.card{display:block;border:1px solid var(--border);border-radius:12px;padding:16px 18px;background:var(--bg-card);color:inherit;transition:border-color .15s,transform .15s}
.card:hover{border-color:var(--blue);transform:translateY(-2px)}
.card b{color:var(--blue-light);font-size:16px}
.card span{color:var(--text-muted);font-size:13px;display:block;margin-top:5px}

.related{margin-top:36px;border-top:1px solid var(--border);padding-top:20px}
.related h3{margin:0 0 12px}

footer{border-top:1px solid var(--border);color:var(--text-muted);font-size:13px;padding:26px 20px;max-width:760px;margin:0 auto}
footer a{color:var(--text-muted)}
footer a:hover{color:var(--text)}

@media(max-width:640px){
  header{padding:.85rem 1.1rem;gap:6px 14px}
  header nav{gap:1rem}
  main{padding:24px 16px 50px}
  .hero h1{font-size:26px}
  article h1{font-size:25px}
}