/* ==========================================================
   Clube Síndicos — Blog (CSS próprio, leve, server-side)
   Identidade: dourado #C9A227 / preto #0D0D0D
   ========================================================== */
:root{
  --gold:#C9A227; --gold-dark:#9A7B12; --ink:#0D0D0D; --paper:#ffffff;
  --text:#2b2b2b; --muted:#6b6b6b; --line:#ececec; --soft:#f7f5ef;
  --maxw:760px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:18px; line-height:1.7; font-weight:400; -webkit-font-smoothing:antialiased;
}
a{color:var(--gold-dark); text-decoration:underline; text-underline-offset:2px}
a:hover{color:var(--ink)}
img{max-width:100%; height:auto}

/* Header */
.bl-header{
  position:sticky; top:0; z-index:20; background:var(--ink);
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 22px; box-shadow:0 2px 14px rgba(0,0,0,.18);
}
.bl-header a{text-decoration:none}
.bl-logo img{height:46px; width:auto; display:block}
.bl-nav a{color:#fff; font-weight:600; font-size:15px; letter-spacing:.3px}
.bl-nav a:hover{color:var(--gold)}

/* Container */
.bl-wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
.bl-wide{max-width:1080px; margin:0 auto; padding:0 22px}

/* Breadcrumb */
.bl-crumb{font-size:14px; color:var(--muted); margin:26px 0 10px}
.bl-crumb a{color:var(--muted)}
.bl-crumb a:hover{color:var(--gold-dark)}

/* Article */
.bl-article{padding-bottom:40px}
.bl-article h1{
  font-size:34px; line-height:1.22; color:var(--ink); font-weight:800;
  margin:8px 0 10px; letter-spacing:-.01em;
}
.bl-meta{color:var(--muted); font-size:14px; margin-bottom:26px}
.bl-article h2{
  font-size:25px; line-height:1.3; color:var(--ink); font-weight:700;
  margin:38px 0 12px; padding-top:6px;
}
.bl-article h3{font-size:20px; color:var(--ink); font-weight:700; margin:26px 0 8px}
.bl-article p{margin:0 0 18px}
.bl-article ul,.bl-article ol{margin:0 0 18px; padding-left:22px}
.bl-article li{margin:6px 0}
.bl-lead{font-size:20px; color:#333}
.bl-article strong{color:var(--ink)}

/* Tabela */
.bl-table-wrap{overflow-x:auto; margin:0 0 22px}
.bl-article table{border-collapse:collapse; width:100%; font-size:16px}
.bl-article th,.bl-article td{border:1px solid var(--line); padding:10px 12px; text-align:left}
.bl-article th{background:var(--soft); color:var(--ink); font-weight:700}

/* Caixa de destaque / resposta rápida */
.bl-key{
  background:var(--soft); border-left:4px solid var(--gold);
  padding:16px 18px; border-radius:8px; margin:0 0 24px; font-size:17px;
}

/* CTA pra LP */
.bl-cta{
  background:var(--ink); color:#fff; border-radius:14px;
  padding:26px 24px; margin:34px 0; text-align:center;
}
.bl-cta h3{color:#fff; margin:0 0 6px; font-size:21px}
.bl-cta p{color:#d7d7d7; margin:0 0 16px; font-size:16px}
.bl-btn{
  display:inline-block; background:var(--gold); color:var(--ink) !important;
  text-decoration:none; font-weight:700; padding:13px 26px; border-radius:30px;
  font-size:16px; transition:background .2s;
}
.bl-btn:hover{background:#fff; color:var(--ink) !important}

/* FAQ */
.bl-faq{margin:34px 0}
.bl-faq h2{margin-bottom:14px}
.bl-faq details{border:1px solid var(--line); border-radius:10px; padding:4px 16px; margin:10px 0; background:#fff}
.bl-faq summary{cursor:pointer; font-weight:700; color:var(--ink); padding:12px 0; list-style:none}
.bl-faq summary::-webkit-details-marker{display:none}
.bl-faq summary::after{content:"+"; float:right; color:var(--gold-dark); font-weight:700}
.bl-faq details[open] summary::after{content:"–"}
.bl-faq details p{margin:0 0 14px}

/* Relacionados */
.bl-related{border-top:1px solid var(--line); margin-top:34px; padding-top:22px}
.bl-related h2{font-size:20px; margin:0 0 12px}
.bl-related ul{list-style:none; padding:0; margin:0}
.bl-related li{margin:8px 0}

/* Índice (hub) */
.bl-hero{background:var(--ink); color:#fff; padding:54px 22px; text-align:center}
.bl-hero h1{max-width:780px; margin:0 auto 12px; font-size:34px; line-height:1.25; color:#fff}
.bl-hero p{max-width:680px; margin:0 auto; color:#cfcfcf; font-size:18px}
.bl-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin:38px 0 10px}
.bl-card{border:1px solid var(--line); border-radius:14px; padding:22px; background:#fff; display:flex; flex-direction:column; transition:box-shadow .2s,transform .2s}
.bl-card:hover{box-shadow:0 12px 34px rgba(0,0,0,.10); transform:translateY(-2px)}
.bl-tag{display:inline-block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--gold-dark); margin-bottom:8px}
.bl-card h2{font-size:19px; line-height:1.3; color:var(--ink); margin:0 0 8px}
.bl-card h2 a{color:var(--ink); text-decoration:none}
.bl-card h2 a:hover{color:var(--gold-dark)}
.bl-card p{font-size:15px; color:var(--muted); margin:0 0 14px; flex-grow:1}
.bl-card .bl-more{font-weight:700; font-size:14px; color:var(--gold-dark); text-decoration:none}

/* Footer */
.bl-footer{background:var(--ink); color:#cdcdcd; margin-top:40px; padding:36px 22px; font-size:14.5px}
.bl-footer .bl-wide{display:flex; flex-wrap:wrap; gap:26px; justify-content:space-between}
.bl-footer h4{color:#fff; font-size:15px; margin:0 0 10px}
.bl-footer a{color:#cdcdcd}
.bl-footer a:hover{color:var(--gold)}
.bl-footer .bl-sub{border-top:1px solid #2a2a2a; margin-top:24px; padding-top:16px; text-align:center; color:#9a9a9a; font-size:13px}

@media (max-width:900px){ .bl-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){
  .bl-grid{grid-template-columns:1fr}
  .bl-article h1{font-size:27px}
  .bl-hero h1{font-size:26px}
  body{font-size:17px}
}
@media (prefers-reduced-motion: reduce){ *{transition:none !important; scroll-behavior:auto !important} }