/* doFreela Blog 2.0 — estilo leve, próprio (sem framework pesado) */
:root{
  --p:#7367F0; --p-dark:#5a4fd6; --ink:#2f2b3d; --muted:#6e6b7b;
  --line:#ece9f1; --bg:#faf9fc; --card:#fff; --ok:#28c76f;
  --radius:14px; --shadow:0 6px 24px rgba(115,103,240,.08);
  --font:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.65;font-size:17px}
img{max-width:100%;height:auto;display:block}
a{color:var(--p-dark);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1140px;margin:0 auto;padding:0 18px}
.container-narrow{max-width:760px;margin:0 auto;padding:0 18px}

/* topo */
.bhead{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.bhead .wrap{display:flex;align-items:center;gap:18px;height:64px}
.bhead .brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--ink)}
.bhead .brand img{width:34px;height:34px}
.bhead nav{margin-left:auto;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.bhead nav a{color:var(--muted);font-weight:600;font-size:15px}
.bhead nav a:hover{color:var(--p);text-decoration:none}
.bhead .btn-cta{background:var(--p);color:#fff;padding:9px 16px;border-radius:10px}
.bhead .btn-cta:hover{background:var(--p-dark);text-decoration:none}

/* hero/listas */
.bhero{padding:38px 0 10px}
.bhero h1{font-size:34px;line-height:1.2;margin:0 0 10px}
.bhero p{color:var(--muted);max-width:680px;margin:0}
.cats-row{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.chip{background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:14px;font-weight:600;color:var(--muted)}
.chip:hover,.chip.active{background:var(--p);color:#fff;border-color:var(--p);text-decoration:none}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:24px 0}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid{grid-template-columns:1fr}}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:.18s}
.pcard:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.pcard .thumb{aspect-ratio:16/9;background:linear-gradient(135deg,#efeafe,#e6f7ee);overflow:hidden}
.pcard .thumb img{width:100%;height:100%;object-fit:cover}
.pcard .body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.pcard .tag{font-size:12px;font-weight:700;color:var(--p);text-transform:uppercase;letter-spacing:.4px}
.pcard h2,.pcard h3{font-size:18px;margin:0;line-height:1.35}
.pcard h2 a,.pcard h3 a{color:var(--ink)}
.pcard .ex{color:var(--muted);font-size:14.5px;margin:0}
.pcard .meta{margin-top:auto;color:var(--muted);font-size:13px;display:flex;gap:10px;align-items:center}

/* artigo */
.article{background:#fff;border:1px solid var(--line);border-radius:18px;padding:34px;margin:22px 0;box-shadow:var(--shadow)}
@media(max-width:600px){.article{padding:22px 18px}}
.crumb{font-size:13px;color:var(--muted);margin-bottom:14px}
.crumb a{color:var(--muted)}
.article h1{font-size:33px;line-height:1.22;margin:6px 0 14px}
.amETA,.ameta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:14px;margin-bottom:18px}
.ameta img{width:40px;height:40px;border-radius:50%}
.ameta .au{font-weight:700;color:var(--ink)}
.feat{border-radius:14px;overflow:hidden;margin:6px 0 22px;aspect-ratio:16/9;background:linear-gradient(135deg,#efeafe,#e6f7ee)}
.feat img{width:100%;height:100%;object-fit:cover}
.lead{font-size:19px;color:#4b475c;margin:0 0 22px}

.toc{background:#f7f5ff;border:1px solid #e7e2fb;border-radius:12px;padding:16px 20px;margin:0 0 26px}
.toc strong{display:block;margin-bottom:8px;font-size:15px}
.toc ol{margin:0;padding-left:18px}
.toc li{margin:4px 0;font-size:15px}
.toc a{color:var(--p-dark)}
.toc .l3{margin-left:14px;list-style:circle}

.prose h2{font-size:25px;margin:34px 0 12px;line-height:1.3;scroll-margin-top:80px}
.prose h3{font-size:20px;margin:26px 0 10px;scroll-margin-top:80px}
.prose h4{font-size:17px;margin:20px 0 8px}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{margin:0 0 16px;padding-left:22px}
.prose li{margin:6px 0}
.prose img{border-radius:10px;margin:18px 0}
.prose blockquote{border-left:4px solid var(--p);background:#f7f5ff;margin:18px 0;padding:12px 18px;border-radius:0 10px 10px 0;color:#4b475c}
.prose table{width:100%;border-collapse:collapse;margin:18px 0;font-size:15px}
.prose th,.prose td{border:1px solid var(--line);padding:10px 12px;text-align:left}
.prose th{background:#f7f5ff}
.prose code{background:#f1eefc;padding:2px 6px;border-radius:6px;font-size:14px}
.prose pre{background:#2f2b3d;color:#eee;padding:16px;border-radius:10px;overflow:auto;margin:18px 0}
.prose pre code{background:none;color:inherit}
.prose a{color:var(--p-dark);text-decoration:underline}

/* FAQ */
.faq{margin:34px 0}
.faq h2{font-size:24px;margin:0 0 14px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:4px 18px;margin:0 0 10px}
.faq summary{cursor:pointer;font-weight:700;padding:12px 0;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';float:right;color:var(--p);font-size:22px;line-height:1}
.faq details[open] summary::after{content:'–'}
.faq details p{margin:0 0 14px;color:var(--muted)}

/* tags / share / cta */
.tagline{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0}
.tagline a{background:#f1eefc;color:var(--p-dark);padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600}
.tagline a:hover{background:var(--p);color:#fff;text-decoration:none}
.share{display:flex;gap:10px;align-items:center;margin:20px 0;flex-wrap:wrap}
.share span{font-weight:700;font-size:14px}
.share a{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:#f1eefc;color:var(--p-dark);font-weight:700}
.share a:hover{background:var(--p);color:#fff;text-decoration:none}

.cta-box{background:linear-gradient(135deg,var(--p),#9e88ff);color:#fff;border-radius:16px;padding:28px;margin:30px 0;text-align:center}
.cta-box h3{margin:0 0 6px;font-size:22px;color:#fff}
.cta-box p{margin:0 0 16px;opacity:.92}
.cta-box .b{display:inline-flex;gap:10px;flex-wrap:wrap;justify-content:center}
.cta-box a{background:#fff;color:var(--p-dark);font-weight:700;padding:11px 20px;border-radius:10px}
.cta-box a.ghost{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.5)}
.cta-box a:hover{text-decoration:none;opacity:.92}

/* layout post c/ sidebar */
.post-wrap{display:grid;grid-template-columns:1fr 320px;gap:30px;align-items:start}
@media(max-width:980px){.post-wrap{grid-template-columns:1fr}}
.side .box{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin:0 0 20px}
.side .box h4{margin:0 0 12px;font-size:16px}
.side .box ul{list-style:none;margin:0;padding:0}
.side .box li{padding:8px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.side .box li:last-child{border:0}
.side .author-card{text-align:center}
.side .author-card img{width:70px;height:70px;border-radius:50%;margin:0 auto 8px}
.side .nl input{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;margin:6px 0;font-family:inherit}
.side .nl button{width:100%;background:var(--p);color:#fff;border:0;padding:11px;border-radius:10px;font-weight:700;cursor:pointer}

/* paginação */
.pager{display:flex;gap:8px;justify-content:center;margin:28px 0;flex-wrap:wrap}
.pager a,.pager span{padding:9px 14px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--muted);font-weight:600}
.pager a:hover{background:var(--p);color:#fff;border-color:var(--p);text-decoration:none}
.pager .cur{background:var(--p);color:#fff;border-color:var(--p)}

/* rodapé */
.bfoot{background:#2f2b3d;color:#c9c6d6;margin-top:50px;padding:40px 0 26px}
.bfoot a{color:#c9c6d6}
.bfoot .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}
@media(max-width:700px){.bfoot .cols{grid-template-columns:1fr}}
.bfoot h5{color:#fff;margin:0 0 12px;font-size:15px}
.bfoot ul{list-style:none;margin:0;padding:0}
.bfoot li{margin:6px 0;font-size:14px}
.bfoot .copy{border-top:1px solid #443f57;margin-top:26px;padding-top:18px;font-size:13px;opacity:.8}
