/* Veltys Blog — Identidade Visual */
:root{
  --bg:#0b1220;
  --bg-2:#0f1a2e;
  --bg-3:#13243f;
  --navy:#0f1a2e;
  --surface:#11203a;
  --surface-2:#152a4a;
  --border:rgba(255,255,255,.08);
  --text:#e6ecf5;
  --muted:#9aa7bd;
  --hero-fg:#e6ecf5;
  --hero-muted:#9aa7bd;
  --primary:#3aa9ff;
  --primary-2:#22d3ee;
  --accent:#22d3ee;
  --gold:#f5c451;
  --gold-2:#e0a83a;
  --grad-blue:linear-gradient(135deg,#3aa9ff 0%,#22d3ee 100%);
  --grad-gold:linear-gradient(135deg,#f5c451 0%,#e0a83a 100%);
  --grad-hero:radial-gradient(1200px 600px at 20% 0%,#1a3360 0%,#0b1220 60%);
  --shadow-lg:0 20px 60px -20px rgba(0,0,0,.6);
  --radius:14px;
  --radius-lg:20px;
  --container:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--text);font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--primary);text-decoration:none;transition:.2s}
a:hover{color:var(--primary-2)}
img{max-width:100%;display:block}
.container{max-width:var(--container);margin:0 auto;padding:0 24px}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(11,18,32,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.logo{display:flex;align-items:center;gap:12px;font-weight:800;font-size:24px;color:#fff;letter-spacing:.5px}
.logo-img{display:block;max-width:14rem;height:auto}
.logo-mark{width:38px;height:38px;border-radius:50%;background:var(--grad-blue);display:grid;place-items:center;color:#0b1220;font-weight:900;box-shadow:0 0 30px rgba(58,169,255,.35)}
.logo small{display:block;font-size:9px;letter-spacing:3px;font-weight:600;color:var(--muted);margin-top:-4px}
.nav-links{display:flex;gap:28px;list-style:none}
.nav-links a{color:#cfd7e6;font-weight:500;font-size:15px}
.nav-links a:hover,.nav-links a.active{color:#fff}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;font-weight:600;font-size:14px;border:none;cursor:pointer;transition:.25s;white-space:nowrap}
.btn-primary{background:var(--grad-blue);color:#0b1220}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 30px -10px rgba(58,169,255,.6);color:#0b1220}
.btn-gold{background:var(--grad-gold);color:#1a1404}
.btn-gold:hover{transform:translateY(-1px);box-shadow:0 10px 30px -10px rgba(245,196,81,.5);color:#1a1404}
.btn-outline{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.2)}
.btn-outline:hover{border-color:var(--primary)}
.menu-toggle{display:none;background:transparent;border:0;color:#fff;font-size:24px;cursor:pointer}

/* Hero */
.blog-hero{background:var(--grad-hero);padding:80px 0 60px;border-bottom:1px solid var(--border)}
.badge{display:inline-block;padding:6px 14px;border-radius:999px;background:rgba(58,169,255,.12);color:var(--primary-2);font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;border:1px solid rgba(58,169,255,.25)}
.blog-hero h1{font-size:clamp(32px,5vw,52px);font-weight:800;line-height:1.1;margin:18px 0 16px;letter-spacing:-1px}
.text-gradient{background:var(--grad-blue);-webkit-background-clip:text;background-clip:text;color:transparent}
.text-gold{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.blog-hero p{color:var(--muted);font-size:18px;max-width:680px}

/* Layout */
.blog-layout{display:grid;grid-template-columns:1fr 340px;gap:48px;padding:60px 0}
@media(max-width:980px){.blog-layout{grid-template-columns:1fr}}

/* Cards */
.posts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
@media(max-width:680px){.posts-grid{grid-template-columns:1fr}}
.post-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:.3s;display:flex;flex-direction:column}
.post-card:hover{transform:translateY(-4px);border-color:rgba(58,169,255,.4);box-shadow:var(--shadow-lg)}
.post-card .thumb{aspect-ratio:16/10;background:var(--grad-hero);position:relative;overflow:hidden}
.post-card .thumb .post-cover-image,
.featured .thumb .post-cover-image{width:100%;height:100%;object-fit:cover;display:block}
.post-card .thumb svg{width:100%;height:100%}
.post-card .body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.post-card .cat{font-size:11px;font-weight:700;letter-spacing:1.5px;color:var(--primary-2);text-transform:uppercase;margin-bottom:10px}
.post-card h3{font-size:19px;font-weight:700;line-height:1.3;color:#fff;margin-bottom:10px}
.post-card p{color:var(--muted);font-size:14px;flex:1}
.post-card .meta{margin-top:16px;display:flex;justify-content:space-between;font-size:12px;color:var(--muted);padding-top:14px;border-top:1px solid var(--border)}
.post-card a.cover{display:block;color:inherit}
.post-card a.cover:hover h3{color:var(--primary-2)}

/* Featured */
.featured{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;display:grid;grid-template-columns:1.1fr 1fr;align-items:stretch;margin-bottom:36px;transition:.3s}
.featured:hover{border-color:rgba(58,169,255,.4);box-shadow:var(--shadow-lg)}
@media(max-width:780px){.featured{grid-template-columns:1fr}}
.featured .cover{display:block;height:100%}
.featured .thumb{background:var(--grad-hero);height:100%;min-height:0}
.featured .thumb .post-cover-image{width:100%;height:100%;object-fit:cover;display:block}
.featured .body{padding:36px;display:flex;flex-direction:column;justify-content:center}
.featured .cat{font-size:11px;font-weight:700;letter-spacing:1.5px;color:var(--primary-2);text-transform:uppercase;margin-bottom:12px}
.featured h2{font-size:28px;font-weight:800;line-height:1.2;color:#fff;margin-bottom:14px}
.featured p{color:var(--muted);margin-bottom:20px}
.featured .meta{font-size:13px;color:var(--muted)}

/* Sidebar */
.sidebar{display:flex;flex-direction:column;gap:24px;position:sticky;top:100px;align-self:start}
.widget{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px}
.widget h4{font-size:13px;font-weight:700;letter-spacing:1.5px;color:var(--primary-2);text-transform:uppercase;margin-bottom:16px}
.widget ul{list-style:none}
.widget li{padding:10px 0;border-bottom:1px solid var(--border)}
.widget li:last-child{border:0}
.widget li a{color:#cfd7e6;font-size:14px;font-weight:500;display:flex;justify-content:space-between;gap:10px}
.widget li a:hover{color:var(--primary-2)}
.widget .count{color:var(--muted);font-size:12px;background:rgba(255,255,255,.05);padding:2px 10px;border-radius:999px}
.search-box{display:flex;gap:8px}
.search-box input{flex:1;padding:12px 14px;background:var(--bg-2);border:1px solid var(--border);border-radius:10px;color:#fff;font-size:14px;outline:none}
.search-box input:focus{border-color:var(--primary)}
.search-box button{padding:0 16px;background:var(--grad-blue);border:0;border-radius:10px;cursor:pointer;color:#0b1220;font-weight:700}

/* Ad cards (Acelera360 + Cursos) */
.ad{position:relative;border-radius:var(--radius-lg);padding:28px;overflow:hidden;border:1px solid var(--border)}
.ad-acelera{background:linear-gradient(160deg,#0d2240 0%,#1a3a6b 60%,#22d3ee 180%)}
.ad-cursos{background:linear-gradient(160deg,#2a1d05 0%,#5c4012 60%,#f5c451 180%)}
.ad::after{content:"";position:absolute;inset:0;background:radial-gradient(400px 200px at 100% 0%,rgba(255,255,255,.1),transparent);pointer-events:none}
.ad .tag{display:inline-block;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.12);font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:14px;color:#fff}
.ad-cursos .tag{background:rgba(0,0,0,.25);color:var(--gold)}
.ad h5{font-size:22px;font-weight:800;color:#fff;line-height:1.2;margin-bottom:10px;position:relative}
.ad p{color:rgba(255,255,255,.85);font-size:14px;margin-bottom:18px;position:relative}
.ad-cursos h5,.ad-cursos p{color:#fff8e6}
.ad ul{list-style:none;margin-bottom:20px;position:relative}
.ad ul li{padding:6px 0;font-size:13px;color:rgba(255,255,255,.85);display:flex;align-items:center;gap:8px}
.ad ul li::before{content:"✓";color:var(--primary-2);font-weight:900}
.ad-cursos ul li::before{color:var(--gold)}
.ad .btn{position:relative;width:100%;justify-content:center}

/* Article page */
.article-hero{background:var(--grad-hero);padding:60px 0 40px;border-bottom:1px solid var(--border)}
.crumb{font-size:13px;color:var(--muted);margin-bottom:18px}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--primary-2)}
.article-hero h1{font-size:clamp(28px,4vw,44px);font-weight:800;line-height:1.15;margin:14px 0 18px;letter-spacing:-.5px}
.article-meta{display:flex;flex-wrap:wrap;gap:18px;color:var(--muted);font-size:14px;align-items:center}
.author{display:flex;align-items:center;gap:10px}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--grad-blue);display:grid;place-items:center;color:#0b1220;font-weight:800;font-size:14px}
.cover-img{aspect-ratio:16/8;background:var(--grad-hero);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:36px;border:1px solid var(--border)}
.cover-img svg{width:100%;height:100%}
.article-body{font-size:17px;color:#d8e0ee}
.article-body h2{font-size:28px;color:#fff;margin:36px 0 14px;font-weight:700;letter-spacing:-.3px}
.article-body h3{font-size:22px;color:#fff;margin:28px 0 12px;font-weight:700}
.article-body p{margin-bottom:18px}
.article-body ul,.article-body ol{margin:0 0 20px 22px;color:#d8e0ee}
.article-body li{margin-bottom:8px}
.article-body blockquote{border-left:3px solid var(--primary);padding:14px 22px;margin:24px 0;background:var(--surface);border-radius:0 12px 12px 0;color:#cfd7e6;font-style:italic}
.article-body strong{color:#fff}
.article-body a{color:var(--primary-2);text-decoration:underline;text-decoration-color:rgba(34,211,238,.4)}
.tags{margin:36px 0;display:flex;flex-wrap:wrap;gap:8px}
.tag-chip{padding:6px 14px;background:var(--surface);border:1px solid var(--border);border-radius:999px;font-size:12px;color:var(--muted);font-weight:500}
.share{margin:32px 0;padding:24px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.share span{font-weight:600;color:#fff}
.share-btns{display:flex;gap:8px}
.share-btns button{width:38px;height:38px;border-radius:50%;background:var(--bg-2);border:1px solid var(--border);color:#cfd7e6;cursor:pointer;display:grid;place-items:center;transition:.2s}
.share-btns button:hover{background:var(--primary);color:#0b1220;border-color:var(--primary)}

/* Pagination */
.pagination{display:flex;gap:8px;justify-content:center;margin-top:40px}
.pagination a,.pagination span{width:42px;height:42px;border-radius:10px;background:var(--surface);border:1px solid var(--border);display:grid;place-items:center;color:#cfd7e6;font-weight:600;font-size:14px}
.pagination a.active,.pagination a:hover{background:var(--grad-blue);color:#0b1220;border-color:transparent}

/* Mobile nav */
@media(max-width:780px){
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--bg-2);padding:20px;gap:12px;border-bottom:1px solid var(--border)}
  .nav-links.open{display:flex}
  .menu-toggle{display:block}
  .nav-cta{display:none}
  .blog-hero{padding:50px 0 40px}
  .blog-layout{padding:40px 0}
}

.article-hero-container {
  max-width: 920px;
}

.post-title {
  margin: 0;
}

.post-title--featured {
  font-size: 30px;
  line-height: 1.1;
}

.post-title-link {
  color: inherit;
}

.ad-thumb {
  margin-bottom: 14px;
}

.ad-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 16px;
}

.avatar--image {
  padding: 0;
  overflow: hidden;
}

.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.author-name {
  color: #fff;
}

.author-name--block {
  display: block;
}

.author-title {
  font-size: 12px;
}

.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.related-title {
  font-size: 24px;
  margin: 40px 0 20px;
  color: #fff;
}

.author-panel {
  display: flex;
  gap: 14px;
  align-items: center;
}

.avatar--small {
  width: 54px;
  height: 54px;
  font-size: 18px;
}

.author-role {
  color: var(--muted);
  font-size: 13px;
}

.search-box--spaced {
  margin-bottom: 24px;
}

.blog-empty {
  margin: 24px 0;
}