/* ============================================================
   NEXXUS — Blog (tema branco)
   ============================================================ */
:root{
  --ink:#1c1033; --ink-2:#2a1054; --muted:#5b5170; --muted-2:#8b83a3;
  --line:#e9e5f2; --bg:#ffffff; --soft:#f6f3fb;
  --purple:#7c3aed; --magenta:#d6249f;
  --ig:linear-gradient(120deg,#7c3aed 0%,#a634c0 38%,#d6249f 66%,#f77737 100%);
  --ease:cubic-bezier(.4,.14,.2,1);
  --ff-display:'Space Grotesk',system-ui,sans-serif;
  --ff-body:'Inter',system-ui,sans-serif;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ font-family:var(--ff-body); background:var(--bg); color:var(--ink); line-height:1.7; -webkit-font-smoothing:antialiased; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
.container{ width:100%; max-width:1120px; margin-inline:auto; padding-inline:26px; }
.grad{ background:var(--ig); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* Header */
.b-header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.9); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.b-header .inner{ display:flex; align-items:center; justify-content:space-between; height:66px; }
.b-brand img{ height:30px; width:auto; }
.b-brand{ display:flex; align-items:center; gap:10px; }
.b-back{ font-family:var(--ff-display); font-weight:600; font-size:.9rem; color:var(--purple); display:inline-flex; align-items:center; gap:7px; padding:9px 18px; border:1px solid var(--line); border-radius:100px; transition:background .2s,border-color .2s; }
.b-back:hover{ background:var(--soft); border-color:#d9d2ec; }

/* Hero do blog */
.b-hero{ padding:70px 0 44px; text-align:center; background:radial-gradient(70% 120% at 50% 0%, #f4eefe, transparent 70%); }
.b-hero .eyebrow{ font-family:var(--ff-display); font-weight:600; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--purple); }
.b-hero h1{ font-family:var(--ff-display); font-weight:700; font-size:clamp(2.2rem,5vw,3.4rem); line-height:1.08; letter-spacing:-.02em; color:var(--ink); margin-top:14px; }
.b-hero p{ color:var(--muted); font-size:1.12rem; max-width:40em; margin:18px auto 0; }

/* Grid de posts */
.b-main{ padding:30px 0 90px; }
.b-toolbar{ display:flex; justify-content:flex-end; margin-bottom:18px; }
.b-refresh{ display:inline-flex; align-items:center; gap:7px; font-family:var(--ff-display); font-weight:600; font-size:.86rem; color:var(--purple); background:#fff; border:1px solid var(--line); border-radius:100px; padding:9px 18px; cursor:pointer; transition:background .2s,border-color .2s; }
.b-refresh:hover{ background:var(--soft); border-color:#d9d2ec; }
.b-refresh .b-refresh-ico{ font-size:1.05rem; display:inline-block; }
.b-refresh.spinning{ opacity:.6; pointer-events:none; }
.b-refresh.spinning .b-refresh-ico{ animation:spin .7s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.b-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.card:hover{ transform:translateY(-6px); box-shadow:0 30px 50px -30px rgba(60,20,110,.35); }
.card-thumb{ position:relative; aspect-ratio:16/10; overflow:hidden; display:grid; place-items:center; }
.card-thumb img{ width:100%; height:100%; object-fit:cover; }
.card-thumb .ph{ position:absolute; inset:0; }
.card-thumb .ph svg{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:52px; height:52px; color:rgba(255,255,255,.92); }
.card-tag{ position:absolute; top:12px; left:12px; z-index:2; font-family:var(--ff-display); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:rgba(0,0,0,.34); border:1px solid rgba(255,255,255,.25); padding:5px 12px; border-radius:100px; backdrop-filter:blur(3px); }
.card-body{ padding:20px 22px 24px; display:flex; flex-direction:column; flex:1; }
.card-date{ font-size:.82rem; color:var(--muted-2); margin-bottom:9px; }
.card-body h2{ font-family:var(--ff-display); font-weight:600; font-size:1.14rem; line-height:1.3; color:var(--ink-2); }
.card-body p{ color:var(--muted); font-size:.95rem; margin-top:10px; flex:1; }
.card-more{ margin-top:16px; font-family:var(--ff-display); font-weight:600; font-size:.86rem; color:var(--magenta); display:inline-flex; align-items:center; gap:6px; }

.b-empty,.b-loading{ text-align:center; color:var(--muted); padding:60px 0; font-size:1.05rem; }

/* Post (artigo) */
.article{ padding:44px 0 90px; }
.article-wrap{ max-width:760px; margin-inline:auto; }
.article .a-tag{ font-family:var(--ff-display); font-weight:600; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:var(--ig); padding:6px 14px; border-radius:100px; display:inline-block; }
.article h1{ font-family:var(--ff-display); font-weight:700; font-size:clamp(2rem,4.6vw,3rem); line-height:1.12; letter-spacing:-.02em; color:var(--ink); margin:18px 0 12px; }
.article .a-date{ color:var(--muted-2); font-size:.92rem; margin-bottom:26px; }
.article .a-cover{ width:100%; border-radius:16px; margin-bottom:32px; aspect-ratio:16/9; object-fit:cover; }
.article .a-cover.ph{ display:grid; place-items:center; }
.article .a-cover.ph svg{ width:74px; height:74px; color:rgba(255,255,255,.92); }
.article .a-body p{ font-size:1.14rem; color:#39304f; margin-bottom:22px; }
.article .a-body{ font-family:var(--ff-body); }

/* Footer */
.b-footer{ background:var(--soft); border-top:1px solid var(--line); padding:34px 0; text-align:center; color:var(--muted-2); font-size:.88rem; }
.b-footer a{ color:var(--purple); font-weight:600; }

/* Placeholders gradientes (quando não há imagem) */
.g0{ background:linear-gradient(135deg,#7c3aed,#a634c0); }
.g1{ background:linear-gradient(135deg,#d6249f,#f7602f); }
.g2{ background:linear-gradient(135deg,#6d28d9,#0e9bb8); }
.g3{ background:linear-gradient(135deg,#a634c0,#e1306c); }

@media (max-width:900px){ .b-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .b-grid{ grid-template-columns:1fr; } .b-hero{ padding:50px 0 30px; } }