/* 4brand_blog.css — Blog institucional da 4Brand (/blog/). Identidade oficial.
   Usado em 2+ páginas (home + artigo) → compartilhado. Mobile-first, cantos uniformes. */

:root{
  --blue:#2D4A7C; --blue-deep:#1a2d4d; --blue-ink:#0f1b33;
  --gold:#D4A84B; --text:#1a1a2e; --text2:#555; --text3:#8a8fa3;
  --bg:#f7f8fc; --card:#fff; --line:rgba(15,27,51,.08);
  --r-panel:24px; --r-card:16px; --r-img:16px;
  --shadow:0 6px 24px rgba(15,27,51,.06); --shadow-h:0 14px 40px rgba(15,27,51,.12);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',system-ui,sans-serif;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit}

/* ---- Top nav (chrome oficial, reaproveita padrão do /about) ---- */
.blog-nav{position:sticky;top:0;z-index:50;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;
  background:rgba(255,255,255,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.blog-nav .logo img{height:26px;display:block}
.blog-nav .nav-actions{display:flex;gap:8px;align-items:center}
.blog-nav a.nlink{color:var(--text2);text-decoration:none;font-size:13px;font-weight:600;padding:8px 14px;border-radius:10px;transition:.18s}
.blog-nav a.nlink:hover{color:var(--blue);background:rgba(45,74,124,.06)}
.blog-nav a.nbtn{background:var(--blue);color:#fff;font-size:13px;font-weight:700;padding:9px 18px;border-radius:10px;text-decoration:none;transition:.18s}
.blog-nav a.nbtn:hover{background:var(--blue-deep)}

.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.wrap-narrow{max-width:720px;margin:0 auto;padding:0 20px}

/* ---- Home header ---- */
.blog-head{padding:56px 20px 28px;text-align:center;background:linear-gradient(165deg,var(--blue-ink) 0%,var(--blue-deep) 55%,var(--blue) 100%);color:#fff}
.blog-head .eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.blog-head h1{font-family:'Poppins',sans-serif;font-weight:800;font-size:clamp(28px,5vw,44px);line-height:1.1;margin-bottom:14px}
.blog-head p{max-width:560px;margin:0 auto;color:rgba(255,255,255,.72);font-size:15px}

/* ---- Feed / grid ---- */
.feed{padding:36px 20px 56px}
.feed-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.feed-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.feed-grid{grid-template-columns:1fr}}

.pcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;box-shadow:var(--shadow);transition:transform .2s, box-shadow .2s}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-h)}
.pcard .thumb{aspect-ratio:16/10;background:#e9edf6 center/cover no-repeat;position:relative}
.pcard .cat{position:absolute;left:12px;top:12px;background:rgba(15,27,51,.72);color:#fff;font-size:11px;font-weight:700;padding:5px 10px;border-radius:999px;letter-spacing:.02em}
.pcard .body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.pcard h2{font-family:'Poppins',sans-serif;font-size:18px;font-weight:700;line-height:1.3;color:var(--text)}
.pcard .excerpt{font-size:14px;color:var(--text2);line-height:1.55;flex:1}
.pcard .meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text3);margin-top:4px}
.pcard .meta .dot{width:3px;height:3px;border-radius:50%;background:var(--text3)}

/* destaque do 1º post (span full em desktop) */
.feed-grid .pcard.featured{grid-column:1 / -1;flex-direction:row}
.feed-grid .pcard.featured .thumb{flex:0 0 52%;aspect-ratio:auto}
.feed-grid .pcard.featured .body{justify-content:center;padding:28px}
.feed-grid .pcard.featured h2{font-size:26px}
@media(max-width:700px){.feed-grid .pcard.featured{flex-direction:column}.feed-grid .pcard.featured .thumb{flex:none;aspect-ratio:16/10}.feed-grid .pcard.featured h2{font-size:20px}.feed-grid .pcard.featured .body{padding:16px}}

.empty{text-align:center;padding:60px 20px;color:var(--text3)}
.empty i{font-size:34px;color:var(--line);margin-bottom:12px;display:block}

/* ---- Article ---- */
.art-hero{position:relative;min-height:clamp(280px,44vw,440px);display:flex;align-items:flex-end;
  background:var(--blue-ink) center/cover no-repeat;color:#fff}
.art-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,27,51,.25) 0%,rgba(15,27,51,.86) 100%)}
.art-hero .inner{position:relative;z-index:2;width:100%;max-width:820px;margin:0 auto;padding:40px 20px}
.art-hero .cat{display:inline-block;background:var(--gold);color:var(--blue-ink);font-size:12px;font-weight:800;padding:6px 12px;border-radius:999px;margin-bottom:14px}
.art-hero h1{font-family:'Poppins',sans-serif;font-weight:800;font-size:clamp(26px,4.6vw,40px);line-height:1.14;max-width:16ch}
.art-hero .meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px;font-size:13px;color:rgba(255,255,255,.82)}
.art-hero .meta .dot{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.6)}

.article{padding:40px 20px 24px}
.article .excerpt{font-size:18px;color:var(--text2);line-height:1.7;font-weight:500;margin-bottom:24px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.article-body{font-size:17px;color:#2b2b3a;line-height:1.8}
.article-body h2{font-family:'Poppins',sans-serif;font-size:24px;font-weight:700;color:var(--blue);margin:34px 0 12px}
.article-body h3{font-family:'Poppins',sans-serif;font-size:19px;font-weight:700;color:var(--text);margin:26px 0 10px}
.article-body p{margin:0 0 18px}
.article-body ul,.article-body ol{margin:0 0 18px 22px}
.article-body li{margin-bottom:8px}
.article-body a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.article-body img{border-radius:var(--r-img);margin:22px 0}
.article-body blockquote{border-left:4px solid var(--gold);background:#fff;border-radius:0 var(--r-card) var(--r-card) 0;
  padding:16px 20px;margin:22px 0;color:var(--text2);font-style:italic;box-shadow:var(--shadow)}
.article-body figure{margin:22px 0}
.article-body figcaption{font-size:13px;color:var(--text3);text-align:center;margin-top:6px}
/* Tabela do artigo (#340): tabela no desktop; no celular cada linha vira cartão com o rótulo da coluna (data-label do blogSanitizeHtml) */
.article-body table{width:100%;border-collapse:separate;border-spacing:0;margin:22px 0;font-size:15px;line-height:1.55;background:#fff;border:1px solid #e6e8ef;border-radius:var(--r-card);overflow:hidden}
.article-body th{background:var(--blue);color:#fff;text-align:left;font-weight:600;padding:12px 14px}
.article-body td{padding:12px 14px;border-top:1px solid #eef0f5;vertical-align:top}
@media(max-width:640px){
.article-body table,.article-body tbody,.article-body tr,.article-body td{display:block;width:100%}
.article-body table{background:none;border:0;border-radius:0}
.article-body thead{display:none}
.article-body tr{background:#fff;border:1px solid #e6e8ef;border-radius:var(--r-card);margin:0 0 12px;padding:6px 0}
.article-body td{border:0;padding:6px 16px}
.article-body td[data-label]::before{content:attr(data-label);display:block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text2)}
}

/* CTA institucional (posicionamento fechado — "peça convite", nunca "grátis") */
.blog-cta{background:linear-gradient(150deg,var(--blue-deep),var(--blue));color:#fff;border-radius:var(--r-panel);
  padding:32px 28px;margin:36px 0;text-align:center;box-shadow:var(--shadow-h)}
.blog-cta h3{font-family:'Poppins',sans-serif;font-size:22px;font-weight:800;margin-bottom:8px}
.blog-cta p{color:rgba(255,255,255,.8);font-size:14px;max-width:460px;margin:0 auto 18px}
.blog-cta a{display:inline-block;background:var(--gold);color:var(--blue-ink);font-weight:800;font-size:14px;padding:12px 26px;border-radius:999px;text-decoration:none;transition:.18s}
.blog-cta a:hover{filter:brightness(1.06);transform:translateY(-1px)}

/* Relacionados */
.related{padding:20px 0 56px}
.related h4{font-family:'Poppins',sans-serif;font-size:15px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px}

.footer{text-align:center;padding:28px 20px;font-size:12px;color:var(--text3);border-top:1px solid var(--line);background:#fff}
.footer a{color:var(--blue);text-decoration:none;font-weight:600}

/* reveal-on-scroll (leve) */
.reveal{transform:translateY(14px);transition:transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}