
:root{
  --bg:#0b0f15; --surface:#0f1623; --surface-2:#111c2b; --text:#e9edf3; --muted:#9aa3b2;
  --primary:#60a5fa; --accent:#10b981; --border:#23324a; --danger:#ef4444; --link:#7cb8ff;
  --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box} html,body{height:100%} body{margin:0;background:var(--bg);color:var(--text);font:500 16px/1.6 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}

/* Header (fixed) */
.header{position:sticky;top:0;z-index:1000;background:linear-gradient(180deg,rgba(14,20,31,.9),rgba(14,20,31,.86));backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border)}
.container{max-width:1100px;margin:0 auto;padding:0 16px}
.nav{display:flex;gap:14px;align-items:center;height:64px}
.brand{display:flex;gap:10px;align-items:center;font-weight:800}
.brand .logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--primary))}
.nav a{color:var(--text);text-decoration:none;opacity:.9}
.nav a:hover{opacity:1}
.searchbar{display:flex;gap:10px;align-items:center;margin-left:auto;min-width:280px;flex:1}
.searchbar input{flex:1;min-width:140px;border:1px solid var(--border);background:linear-gradient(180deg,#0f172a,#0d1627);
  color:var(--text);border-radius:12px;padding:10px 12px;outline:none}
.searchbar button{white-space:nowrap}
.btn{display:inline-block;border:1px solid var(--border);background:linear-gradient(180deg,rgba(17,24,39,.92),rgba(17,24,39,.78));color:var(--text);
  padding:10px 14px;border-radius:12px;text-decoration:none;font-weight:700}
.btn.primary{background:linear-gradient(135deg,var(--accent),#4ade80);color:#042316;border-color:transparent}
.btn.link{background:transparent;border-color:transparent;color:var(--link);padding:8px 10px}
.btn.ghost{background:transparent}
.cta-small{margin-top:14px;padding:12px 14px;border-radius:14px;background:linear-gradient(90deg,#0ea5e9, #22c55e);
  color:#05252a;font-weight:800;border:0;display:inline-block}

/* Hero */
.hero{padding:28px 0 8px 0;border-bottom:1px dashed var(--border)}
.kicker{letter-spacing:.12em;color:var(--muted);text-transform:uppercase;font-weight:800}
.hero h1{font-size:clamp(1.4rem,1.2rem + 1.6vw,2.2rem);line-height:1.25;margin:.3rem 0 1rem}
.lead{color:#b9c3d4}

/* Grid + cards */
.grid{display:grid;gap:14px}
.cols-4{grid-template-columns:repeat(4,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-2{grid-template-columns:repeat(2,1fr)}
.card{border:1px solid var(--border);background:linear-gradient(180deg,rgba(16,24,39,.92),rgba(16,24,39,.82));border-radius:16px;box-shadow:var(--shadow)}
.card .header{position:static;background:none;border-bottom:1px dashed var(--border);backdrop-filter:none}
.card .content{padding:16px}

/* Category chips */
.cat-card{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--border);
  background:linear-gradient(180deg,rgba(17,24,39,.65),rgba(17,24,39,.5));border-radius:14px;text-decoration:none;color:var(--text)}
.cat-card:hover{border-color:#31507c}
.cat-card img{width:28px;height:28px}
.cat-card .name{font-weight:700}

/* Recent posts list */
.list{display:grid;gap:14px}
.post-item{border:1px solid var(--border);background:linear-gradient(180deg,rgba(17,24,39,.66),rgba(17,24,39,.52));border-radius:14px;padding:14px;display:grid;grid-template-columns:64px 1fr;gap:12px}
.post-thumb{width:64px;height:64px;border-radius:12px;border:1px solid var(--border);display:grid;place-items:center;background:#0e1a2b}
.post-thumb img{width:36px;height:36px;opacity:.95}
.post-title{font-size:1.08rem;margin:0 0 4px;font-weight:800}
.meta{color:var(--muted);font-size:.9rem;margin-bottom:6px}
.excerpt{color:#d5deeb}
a{color:var(--link)}
a:hover{opacity:.95}

/* Company */
.company{display:grid;grid-template-columns:1fr 280px;gap:16px}
.badge-niche{display:flex;gap:10px;align-items:center;justify-content:center;border:1px solid var(--border);
  background:linear-gradient(180deg,rgba(120,86,255,.2),rgba(120,86,255,.14));border-radius:14px;height:140px}
.badge-niche img{width:34px;height:34px}

/* Footer */
.footer{border-top:1px dashed var(--border);color:var(--muted);padding:20px 0;margin-top:26px}

/* Responsive */
@media (max-width:980px){
  .cols-4{grid-template-columns:repeat(2,1fr)}
  .company{grid-template-columns:1fr}
}
@media (max-width:720px){
  .nav{flex-wrap:wrap;height:auto;padding:10px 0;gap:10px}
  .searchbar{order:3;flex-basis:100%}
  .cta-top{order:2;margin-left:auto}
}
.post-body {
    display: grid;
    gap: 12px;
}

.post-header {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 14px;
    align-items: center;
}
.post-content {
    color: var(--text);
}
    .post-header .post-thumb {
        width: 80px;
        height: 80px;
        border-radius: 12px;
        background: #f4f6f8;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

        .post-header .post-thumb img {
            width: 64px;
            height: 64px;
            object-fit: contain;
            opacity: .9;
        }

    .post-header h1 {
        margin: .2rem 0 6px;
        font-size: 1.6rem;
        line-height: 1.2;
    }

    .post-header .meta {
        color: #64748b;
        font-size: .95rem;
    }

.post-content h2 {
    margin: 18px 0 8px;
    font-size: 1.25rem;
    line-height: 1.3;
}

.post-content p {
    margin: 10px 0;
    line-height: 1.7;
    color: #0f172a;
}

.post-content ul {
    margin: 10px 0 10px 1.2rem;
    padding: 0;
}

.post-content li {
    margin: 6px 0;
    line-height: 1.6;
    list-style: disc;
}
.post-title {
    margin: .2rem 0 6px;
    font-size: 1.7rem;
    line-height: 1.2;
}

.post-meta-top {
    margin: .35rem 0 1rem;
    color: #64748b;
    font-size: .95rem;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

    .post-meta-top a {
        text-decoration: underline;
        color: inherit;
    }

.post-content h2 {
    margin: 18px 0 8px;
    font-size: 1.25rem;
    line-height: 1.3;
}

.post-content p {
    margin: 10px 0;
    line-height: 1.7;
    color: #0f172a;
}

.post-content ul {
    margin: 10px 0 10px 1.2rem;
    padding: 0;
}

.post-content li {
    margin: 6px 0;
    line-height: 1.6;
    list-style: disc;
}
.post-cta {
    margin: 18px 0 4px;
    padding: 12px 14px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: .95rem;
    color: #0f172a;
}

    .post-cta a {
        text-decoration: underline;
    }
.post-content p,
.post-content li {
    color: inherit; /* usa a cor clara definida acima */
}

.post-content a {
    color: var(--link);
    text-decoration: underline;
}
.post-cta {
    background: rgba(255,255,255,0.03) !important; /* bem sutil, nada de branco */
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    margin-top: 14px;
    color: var(--text);
}

    .post-cta a {
        color: var(--link);
        text-decoration: underline;
    }