/* ============================================================
   Blog IA EAD — mesma identidade visual da plataforma
   (tokens espelhados de /css/site.css do site principal)
   ============================================================ */
:root{
  --bg:#12162B; --bg-alt:#171C38; --surface:#20264A; --surface-2:#262d57;
  --line: rgba(244,241,232,0.10); --text:#F4F1E8; --text-muted:#9AA3C7;
  --amber:#F2A93C; --amber-soft: rgba(242,169,60,0.14);
  --violet:#8D7FE0; --violet-soft: rgba(141,127,224,0.16);
  --radius:14px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{ background:var(--bg); color:var(--text); font-family:'Inter',sans-serif; line-height:1.7; -webkit-font-smoothing:antialiased; }
h1,h2,h3,.display{ font-family:'Fraunces',serif; font-weight:600; letter-spacing:-0.01em; }
.wrap{ max-width:760px; margin:0 auto; padding:0 24px; }
.wrap-wide{ max-width:1080px; margin:0 auto; padding:0 24px; }
a{ color:var(--amber); text-decoration:none; }
img{ max-width:100%; display:block; }
::selection{ background:var(--amber); color:#12162B; }

.social-links{ display:flex; justify-content:center; align-items:center; gap:18px; margin-bottom:16px; }
.social-links a{ color:var(--text-muted); display:inline-flex; transition:color .15s; }
.social-links a:hover{ color:var(--amber); }
.social-links svg{ width:20px; height:20px; display:block; }

/* Busca */
.site-header-inner{ position:relative; }
.site-header nav{ display:flex; align-items:center; gap:22px; }
#search-toggle{ background:none; border:none; cursor:pointer; color:var(--text-muted); display:inline-flex; padding:4px; }
#search-toggle:hover{ color:var(--amber); }
#search-toggle svg{ width:19px; height:19px; }
.search-panel{ position:absolute; top:100%; right:0; margin-top:10px; width:340px; max-width:90vw; background:var(--surface); border-radius:10px; box-shadow:0 18px 40px -12px rgba(0,0,0,.5); border:1px solid var(--line); padding:14px; display:none; z-index:50; }
.search-panel.open{ display:block; }
.search-panel input{ width:100%; padding:10px 12px; background:var(--bg-alt); border:1px solid var(--line); border-radius:8px; font-family:'Inter',sans-serif; font-size:.92rem; color:var(--text); }
.search-panel input:focus{ outline:none; border-color:var(--amber); }
.search-results{ margin-top:10px; max-height:340px; overflow-y:auto; }
.search-result{ display:block; padding:10px 8px; border-radius:6px; text-decoration:none; }
.search-result:hover{ background:var(--bg-alt); }
.search-result .sr-tag{ display:block; font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--amber); margin-bottom:2px; }
.search-result .sr-title{ display:block; font-size:.88rem; color:var(--text); font-weight:600; line-height:1.35; }
.search-empty{ font-size:.85rem; color:var(--text-muted); padding:10px 8px; }
@media(max-width:480px){
  .search-panel{ position:fixed; top:64px; left:12px; right:12px; width:auto; }
}

/* header */
.site-header{ background:rgba(18,22,43,0.88); backdrop-filter:blur(10px); padding:16px 0; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; }
.site-header-inner{ display:flex; align-items:center; justify-content:space-between; }
.site-logo{ display:flex; align-items:center; gap:9px; font-family:'Fraunces',serif; font-weight:600; font-size:18px; color:var(--text); text-decoration:none; }
.site-logo svg{ display:block; }
.site-header nav a{ color:var(--text-muted); text-decoration:none; font-size:.88rem; font-weight:600; }
.site-header nav a:hover{ color:var(--text); }
.site-header nav a.btn-amber{ color:#1b1204; }

.btn{ display:inline-block; padding:10px 18px; border-radius:9px; font-weight:600; font-size:.85rem; text-decoration:none; border:1px solid transparent; }
.btn-amber{ background:var(--amber); color:#1b1204; }
.btn-outline{ border-color:var(--line); color:var(--text); }
.btn-outline:hover{ border-color:var(--amber); }

/* blog index hero */
.blog-hero{ padding:70px 0 56px; text-align:center; border-bottom:1px solid var(--line); }
.blog-hero .eyebrow{ color:var(--amber); text-transform:uppercase; letter-spacing:.12em; font-size:.78rem; font-weight:700; font-family:'IBM Plex Mono',monospace; }
.blog-hero h1{ font-size:2.4rem; margin-top:14px; }
.blog-hero p{ color:var(--text-muted); margin-top:14px; max-width:560px; margin-left:auto; margin-right:auto; }

/* article cards */
.post-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; padding:56px 0; }
.post-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; text-decoration:none; color:var(--text); display:flex; flex-direction:column; box-shadow:0 12px 30px -18px rgba(0,0,0,.5); transition:transform .15s ease, border-color .15s ease; }
.post-card:hover{ transform:translateY(-3px); border-color:var(--amber); }
.post-card .tag{ background:var(--amber-soft); color:var(--amber); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:4px 10px; border-radius:20px; display:inline-block; margin-bottom:12px; }
.post-card-body{ padding:22px; }
.post-card h3{ font-size:1.12rem; color:var(--text); margin-bottom:10px; line-height:1.35; }
.post-card p{ font-size:.9rem; color:var(--text-muted); }
.post-card .meta{ font-size:.78rem; color:var(--text-muted); margin-top:14px; font-family:'IBM Plex Mono',monospace; }

/* article page */
.article-head{ background:linear-gradient(160deg,var(--bg),var(--bg-alt)); padding:52px 0 40px; border-bottom:1px solid var(--line); }
.breadcrumb{ font-size:.8rem; color:var(--text-muted); margin-bottom:18px; }
.breadcrumb a{ color:var(--text-muted); }
.article-head .tag{ display:inline-block; background:var(--amber-soft); border:1px solid var(--amber); color:var(--amber); font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:5px 12px; border-radius:20px; margin-bottom:16px; }
.article-head h1{ font-size:2.05rem; line-height:1.2; }
.article-head .meta{ color:var(--text-muted); font-size:.85rem; margin-top:16px; font-family:'IBM Plex Mono',monospace; }

.article-body{ padding:46px 0 24px; font-size:1.03rem; }
.article-body h2{ font-size:1.45rem; color:var(--text); margin:36px 0 14px; }
.article-body h3{ font-size:1.18rem; color:var(--text); margin:26px 0 10px; }
.article-body p{ margin-bottom:18px; color:var(--text-muted); }
.article-body ul, .article-body ol{ margin:0 0 18px 22px; color:var(--text-muted); }
.article-body li{ margin-bottom:8px; }
.article-body strong{ color:var(--text); }
.pull-note{ border-left:3px solid var(--amber); background:var(--surface); padding:16px 20px; border-radius:6px; margin:24px 0; font-size:.96rem; color:var(--text); }

/* inline CTA boxes — variam entre curso relacionado (âmbar) e plataforma (contorno violeta) */
.cta-box{ background:var(--surface); border:1px solid var(--violet); color:var(--text); border-radius:var(--radius); padding:28px 30px; margin:36px 0; text-align:center; }
.cta-box.gold{ background:linear-gradient(135deg, var(--amber-soft), var(--violet-soft)); border:1px solid var(--amber); }
.cta-box h4{ font-size:1.2rem; margin-bottom:10px; color:var(--text); }
.cta-box p{ color:var(--text-muted); font-size:.92rem; margin-bottom:18px; }
.cta-btn{ display:inline-block; background:var(--amber); color:#1b1204; font-weight:700; padding:12px 26px; border-radius:9px; text-decoration:none; font-size:.94rem; }
.cta-btn:hover{ opacity:.9; }
.cta-box:not(.gold) .cta-btn{ background:var(--violet); color:#12162B; }

/* related posts */
.related{ background:var(--bg-alt); padding:48px 0 56px; border-top:1px solid var(--line); }
.related h3{ font-size:1.08rem; color:var(--text); margin-bottom:22px; }
.related.recent{ background:var(--violet-soft); border-top:3px solid var(--violet); border-bottom:1px solid var(--line); }
.related.recent h3{ color:var(--violet); display:inline-flex; align-items:center; gap:8px; }
.related.recent h3::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--violet); display:inline-block; }

/* plataforma teaser (compacto, no final dos artigos) */
.platform-teaser{ padding:40px 0; }
.platform-teaser-card{ display:flex; gap:20px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px 28px; box-shadow:0 12px 30px -18px rgba(0,0,0,.5); }
.platform-teaser-icon{ width:54px; height:54px; min-width:54px; border-radius:50%; background:var(--amber-soft); display:flex; align-items:center; justify-content:center; font-size:1.4rem; border:2px solid var(--amber); }
.platform-teaser-name{ font-family:'Fraunces',serif; font-weight:700; color:var(--text); font-size:1.1rem; margin-bottom:5px; line-height:1.3; }
.platform-teaser-role{ font-size:.9rem; color:var(--text-muted); line-height:1.6; }
.platform-teaser-more{ display:inline-flex; align-items:center; gap:4px; background:var(--amber); color:#1b1204; font-weight:700; font-size:.78rem; padding:6px 13px; border-radius:20px; text-decoration:none; margin-left:8px; white-space:nowrap; vertical-align:middle; }
@media(max-width:600px){
  .platform-teaser-card{ flex-direction:column; align-items:flex-start; text-align:left; }
}

/* badge (usado em páginas institucionais, ex.: catálogo) */
.badge{ display:inline-block; background:var(--violet-soft); color:var(--violet); font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:5px 12px; border-radius:20px; }

footer{ background:var(--bg); color:var(--text-muted); text-align:center; padding:36px 0; font-size:.85rem; border-top:1px solid var(--line); }
footer a{ color:var(--text-muted); }
footer a:hover{ color:var(--amber); }

@media(max-width:860px){
  .post-grid{ grid-template-columns:1fr; }
}