/* ==========================================================================
   [BLOG_SEO] blog.css — estilos do blog do portal Agilizei Notas
   Escopado em .blg-* para nao interferir em styles2.css.
   Marca: dourado #fcb40c / ambar #f0a818. Suporta body.dark-theme.
   ========================================================================== */

.blg-wrap{
  --blg-gold:#fcb40c; --blg-gold-dark:#b07a00; --blg-ink:#14213d; --blg-txt:#39414f;
  --blg-mut:#6b7280; --blg-bg:#f6f7f9; --blg-card:#ffffff; --blg-line:#e6e8ec;
  margin-top:74px; background:var(--blg-bg); color:var(--blg-txt);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  padding-bottom:10px;
}
.blg-wrap *{box-sizing:border-box}
.blg-wrap a{text-decoration:none}

/* ---------------------------------------------------------------- HERO -- */
.blg-hero{
  background:linear-gradient(135deg,#14213d 0%,#1e3a5f 55%,#20507f 100%);
  color:#fff; padding:64px 0 74px; position:relative; overflow:hidden;
}
.blg-hero::after{
  content:""; position:absolute; right:-120px; top:-120px; width:420px; height:420px;
  border-radius:50%; background:radial-gradient(circle,rgba(252,180,12,.28),transparent 68%);
}
.blg-hero .container{position:relative; z-index:2}
.blg-hero-eyebrow{
  display:inline-block; margin:0 0 14px; padding:6px 14px; border-radius:999px;
  background:rgba(252,180,12,.16); color:var(--blg-gold);
  font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}
.blg-hero h1{
  margin:0 0 14px; font-size:42px; line-height:1.15; font-weight:800; color:#fff;
  max-width:820px; letter-spacing:-.02em;
}
.blg-hero-sub{margin:0; font-size:18px; line-height:1.6; color:#c9d4e4; max-width:680px}

/* ATENCAO: o styles2.css do site tem `form button{width:100%}` — sem o
   width/flex explicitos abaixo o botao estica e engole o campo de busca. */
.blg-busca{
  margin-top:26px; max-width:530px; position:relative; display:flex; align-items:stretch;
  background:#fff; border-radius:14px; box-shadow:0 14px 34px rgba(0,0,0,.2); overflow:hidden;
  padding:5px 5px 5px 0;
}
.blg-busca .fa-search{position:absolute; left:18px; top:50%; transform:translateY(-50%); color:#9aa3b2; font-size:15px; z-index:2}
.blg-busca input{
  flex:1 1 auto; width:auto; min-width:0; border:0; outline:0; background:transparent;
  padding:13px 12px 13px 44px; font-size:15px; color:#222; border-radius:10px 0 0 10px;
}
.blg-busca input::placeholder{color:#9aa3b2}
.blg-busca input:focus{background:#fcfcfd}
.blg-busca button{
  flex:0 0 auto; width:auto; min-width:118px; border:0; border-radius:10px;
  padding:0 24px; font-weight:800; font-size:14px; letter-spacing:.01em; cursor:pointer;
  background:var(--blg-gold); color:#4a3200; white-space:nowrap;
  transition:background .18s, transform .12s;
}
.blg-busca button:hover{background:#f0a818; transform:translateY(-1px)}
.blg-busca button:active{transform:none}
.blg-hero-404{padding:56px 0 64px}

/* -------------------------------------------------------------- CHIPS -- */
.blg-chips{display:flex; flex-wrap:wrap; gap:10px; margin:-26px 0 30px; position:relative; z-index:3}
.blg-chip{
  display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border-radius:999px;
  background:#fff; border:1px solid var(--blg-line); color:var(--blg-ink);
  font-size:13.5px; font-weight:600; box-shadow:0 4px 14px rgba(20,33,61,.06);
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
.blg-chip:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(20,33,61,.12); color:var(--blg-ink)}
.blg-chip span{
  background:#f1f3f7; color:var(--blg-mut); border-radius:999px;
  padding:1px 8px; font-size:11.5px; font-weight:700;
}
.blg-chip.ativo{background:var(--blg-ink); border-color:var(--blg-ink); color:#fff}
.blg-chip.ativo span{background:rgba(252,180,12,.22); color:var(--blg-gold)}

/* --------------------------------------------------------------- GRID -- */
.blg-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:46px;
}
.blg-card{
  display:flex; flex-direction:column; background:var(--blg-card);
  border:1px solid var(--blg-line); border-radius:16px; overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
}
.blg-card:hover{transform:translateY(-4px); box-shadow:0 18px 40px rgba(20,33,61,.13)}
.blg-card-capa{
  display:block; height:186px; position:relative;
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.blg-card-cat{
  position:absolute; left:14px; bottom:12px; background:rgba(255,255,255,.92);
  color:var(--blg-ink); font-size:11.5px; font-weight:700; letter-spacing:.03em;
  padding:5px 11px; border-radius:999px; text-transform:uppercase;
}
.blg-card-corpo{padding:20px 20px 18px; display:flex; flex-direction:column; flex:1 1 auto}
.blg-card-titulo{margin:0 0 10px; font-size:18.5px; line-height:1.32; font-weight:750}
.blg-card-titulo a{color:var(--blg-ink)}
.blg-card-titulo a:hover{color:var(--blg-gold-dark)}
.blg-card-resumo{margin:0 0 14px; font-size:14.5px; line-height:1.62; color:var(--blg-txt); flex:1 1 auto}
.blg-card-meta{font-size:12.5px; color:var(--blg-mut); margin-bottom:12px}
.blg-dot{margin:0 6px}
.blg-card-link{font-size:14px; font-weight:700; color:var(--blg-gold-dark)}
.blg-card-link .fa{transition:transform .18s; margin-left:4px}
.blg-card-link:hover{color:var(--blg-gold-dark)}
.blg-card-link:hover .fa{transform:translateX(4px)}

/* card em destaque ocupa a linha inteira */
.blg-card-destaque{grid-column:1 / -1; flex-direction:row}
.blg-card-destaque .blg-card-capa{width:42%; height:auto; min-height:230px; flex:0 0 42%}
.blg-card-destaque .blg-card-corpo{padding:30px 34px; justify-content:center}
.blg-card-destaque .blg-card-titulo{font-size:27px; line-height:1.24}
.blg-card-destaque .blg-card-resumo{font-size:16px}

.blg-vazio{
  background:#fff; border:1px dashed var(--blg-line); border-radius:16px;
  padding:56px 24px; text-align:center; margin-bottom:40px;
}
.blg-vazio .fa{font-size:34px; color:var(--blg-gold); margin-bottom:12px}
.blg-vazio h2{margin:0 0 8px; font-size:21px; color:var(--blg-ink); font-weight:750}
.blg-vazio p{margin:0; color:var(--blg-mut)}
.blg-vazio a{color:var(--blg-gold-dark); font-weight:700}

/* --------------------------------------------------------- PAGINACAO -- */
.blg-paginacao{display:flex; justify-content:center; gap:8px; margin:0 0 50px; flex-wrap:wrap}
.blg-paginacao a{
  min-width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; background:#fff; border:1px solid var(--blg-line);
  color:var(--blg-ink); font-weight:700; font-size:14px;
}
.blg-paginacao a:hover{border-color:var(--blg-gold); color:var(--blg-gold-dark)}
.blg-paginacao a.ativo{background:var(--blg-ink); border-color:var(--blg-ink); color:#fff}

/* ---------------------------------------------------------------- CTA -- */
.blg-cta{
  display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap;
  background:linear-gradient(135deg,#14213d 0%,#23406b 100%); color:#fff;
  border-radius:18px; padding:32px 36px; margin:0 0 56px;
}
.blg-cta h2{margin:0 0 8px; font-size:24px; font-weight:800; color:#fff}
.blg-cta p{margin:0; color:#c6d2e3; font-size:15px; line-height:1.6; max-width:620px}
.blg-cta-btns{display:flex; gap:12px; flex-wrap:wrap}
.blg-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 24px; border-radius:11px; font-weight:700; font-size:14.5px;
  border:2px solid transparent; transition:transform .15s, background .18s, color .18s; white-space:nowrap;
}
.blg-btn:hover{transform:translateY(-2px)}
.blg-btn-primario{background:var(--blg-gold); color:#4a3200}
.blg-btn-primario:hover{background:#f0a818; color:#3b2800}
.blg-btn-outline{border-color:rgba(255,255,255,.55); color:#fff}
.blg-btn-outline:hover{background:#fff; color:var(--blg-ink)}
.blg-btn-ghost{border-color:var(--blg-line); color:var(--blg-ink); background:#fff}
.blg-btn-ghost:hover{border-color:var(--blg-ink)}
.blg-btn-wa{background:#25D366; color:#fff}
.blg-btn-wa:hover{background:#1eb257; color:#fff}
.blg-btn-bloco{display:flex; width:100%; margin-top:10px}

/* ------------------------------------------------------------- ARTIGO -- */
.blg-artigo-wrap{padding-bottom:0}
.blg-preview-aviso{
  background:#fff3cd; color:#7a5a00; text-align:center; padding:11px 16px;
  font-size:13.5px; font-weight:700; border-bottom:1px solid #f0d78a;
}
.blg-artigo-topo{color:#fff; padding:52px 0 58px; position:relative}
.blg-artigo-topo::before{content:""; position:absolute; inset:0; background:rgba(12,20,38,.42)}
.blg-artigo-topo .container{position:relative; z-index:2}
.blg-breadcrumb{font-size:13px; color:rgba(255,255,255,.82); margin-bottom:14px}
.blg-breadcrumb a{color:rgba(255,255,255,.88)}
.blg-breadcrumb a:hover{color:var(--blg-gold)}
.blg-breadcrumb span{margin:0 7px; opacity:.6}
.blg-artigo-topo h1{
  margin:0 0 16px; font-size:38px; line-height:1.2; font-weight:800; color:#fff;
  max-width:880px; letter-spacing:-.02em;
}
.blg-artigo-meta{display:flex; flex-wrap:wrap; gap:18px; font-size:13.5px; color:rgba(255,255,255,.86)}
.blg-artigo-meta .fa{margin-right:6px; opacity:.85}

.blg-artigo-grid{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:44px; padding:42px 0 60px; align-items:start}
.blg-artigo{min-width:0}

.blg-resposta{
  background:#fff8e6; border:1px solid #f4d98c; border-left:5px solid var(--blg-gold);
  border-radius:12px; padding:20px 24px; margin:0 0 30px;
}
.blg-resposta h2{
  margin:0 0 8px; font-size:12.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--blg-gold-dark); font-weight:800;
}
.blg-resposta p{margin:0; font-size:16.5px; line-height:1.68; color:#4a3b14; font-weight:500}

.blg-toc-mobile{display:none; background:#fff; border:1px solid var(--blg-line); border-radius:12px; padding:14px 18px; margin-bottom:26px}
.blg-toc-mobile summary{font-weight:750; color:var(--blg-ink); cursor:pointer; font-size:15px}
.blg-toc-mobile ol{margin:12px 0 4px; padding-left:20px}
.blg-toc-mobile li{margin:6px 0; font-size:14.5px}
.blg-toc-mobile a{color:var(--blg-txt)}
.blg-toc-mobile a:hover{color:var(--blg-gold-dark)}

/* corpo do texto */
.blg-conteudo{font-size:17px; line-height:1.78; color:#333a46}
.blg-conteudo > *:first-child{margin-top:0}
.blg-conteudo h2{
  margin:40px 0 14px; font-size:26px; line-height:1.28; font-weight:800; color:var(--blg-ink);
  scroll-margin-top:100px; letter-spacing:-.01em;
}
.blg-conteudo h3{
  margin:30px 0 10px; font-size:20px; line-height:1.35; font-weight:750; color:var(--blg-ink);
  scroll-margin-top:100px;
}
.blg-conteudo p{margin:0 0 18px}
.blg-conteudo ul,.blg-conteudo ol{margin:0 0 20px; padding-left:24px}
.blg-conteudo li{margin:8px 0}
.blg-conteudo strong{color:var(--blg-ink); font-weight:700}
.blg-conteudo a{color:#1a6fc4; font-weight:600; border-bottom:1px solid rgba(26,111,196,.28)}
.blg-conteudo a:hover{color:#0f4d8c; border-bottom-color:#0f4d8c}
.blg-conteudo blockquote{
  margin:24px 0; padding:16px 22px; background:#fff; border-left:4px solid var(--blg-gold);
  border-radius:0 10px 10px 0; color:#4b5563; font-style:italic;
}
.blg-conteudo code{
  background:#eef1f6; color:#9a3412; padding:2px 7px; border-radius:5px;
  font-size:14.5px; font-family:Consolas,Monaco,monospace;
}
.blg-conteudo pre{background:#14213d; color:#e6edf6; padding:16px 18px; border-radius:10px; overflow:auto; margin:0 0 20px}
.blg-conteudo pre code{background:transparent; color:inherit; padding:0}
.blg-conteudo table{width:100%; border-collapse:collapse; margin:0 0 24px; font-size:15px; background:#fff; border-radius:10px; overflow:hidden}
.blg-conteudo th{background:var(--blg-ink); color:#fff; text-align:left; padding:12px 14px; font-weight:700; font-size:14px}
.blg-conteudo td{padding:11px 14px; border-top:1px solid var(--blg-line)}
.blg-conteudo tbody tr:nth-child(even){background:#fafbfc}
.blg-conteudo img{max-width:100%; height:auto; border-radius:10px; margin:6px 0 20px}

/* FAQ */
.blg-faq{margin:46px 0 0}
.blg-faq h2{margin:0 0 16px; font-size:25px; font-weight:800; color:var(--blg-ink)}
.blg-faq details{background:#fff; border:1px solid var(--blg-line); border-radius:12px; margin-bottom:10px; overflow:hidden}
.blg-faq summary{
  padding:16px 44px 16px 20px; font-weight:700; color:var(--blg-ink); cursor:pointer;
  font-size:16px; position:relative; list-style:none;
}
.blg-faq summary::-webkit-details-marker{display:none}
.blg-faq summary::after{
  content:"+"; position:absolute; right:18px; top:50%; transform:translateY(-50%);
  font-size:22px; color:var(--blg-gold); font-weight:400; line-height:1;
}
.blg-faq details[open] summary::after{content:"\2212"}
.blg-faq details > div{padding:0 20px 18px; color:var(--blg-txt); font-size:16px; line-height:1.72}

.blg-cta-artigo{margin:46px 0 0}

/* relacionados */
.blg-relacionados{margin:52px 0 0}
.blg-relacionados h2{margin:0 0 18px; font-size:25px; font-weight:800; color:var(--blg-ink)}
.blg-rel-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.blg-rel-card{
  display:flex; flex-direction:column; gap:8px; background:#fff; border:1px solid var(--blg-line);
  border-radius:13px; padding:18px; transition:transform .16s, box-shadow .16s;
}
.blg-rel-card:hover{transform:translateY(-3px); box-shadow:0 12px 26px rgba(20,33,61,.12)}
.blg-rel-tag{
  align-self:flex-start; color:#fff; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.03em; padding:3px 9px; border-radius:999px;
}
.blg-rel-card strong{color:var(--blg-ink); font-size:15.5px; line-height:1.38; font-weight:700}
.blg-rel-card small{color:var(--blg-mut); font-size:12.5px}

/* lateral */
.blg-lateral{position:sticky; top:96px; display:flex; flex-direction:column; gap:18px}
.blg-toc{background:#fff; border:1px solid var(--blg-line); border-radius:14px; padding:20px}
.blg-toc h3{margin:0 0 12px; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--blg-mut); font-weight:800}
.blg-toc ol{list-style:none; margin:0; padding:0; max-height:52vh; overflow:auto}
.blg-toc li{margin:0; border-left:2px solid var(--blg-line)}
.blg-toc li a{display:block; padding:7px 0 7px 14px; font-size:14px; line-height:1.45; color:var(--blg-txt)}
.blg-toc li a:hover{color:var(--blg-gold-dark)}
.blg-toc li.blg-toc-n3 a{padding-left:26px; font-size:13.2px; color:var(--blg-mut)}
.blg-toc li a.ativo{color:var(--blg-gold-dark); font-weight:700}
.blg-toc li:has(a.ativo){border-left-color:var(--blg-gold)}

.blg-box-lateral{background:#fff; border:1px solid var(--blg-line); border-radius:14px; padding:22px}
.blg-box-lateral h3{margin:0 0 8px; font-size:18px; font-weight:800; color:var(--blg-ink)}
.blg-box-lateral p{margin:0; font-size:14.5px; line-height:1.6; color:var(--blg-txt)}
.blg-box-ajuda{background:linear-gradient(135deg,#0b3b2e 0%,#12694f 100%); border-color:transparent}
.blg-box-ajuda h3,.blg-box-ajuda p{color:#fff}
.blg-box-ajuda p strong{color:#9df0c0}

/* ------------------------------------------------------- TEMA ESCURO -- */
body.dark-theme .blg-wrap{
  --blg-ink:#e8eaf0; --blg-txt:#c2c8d4; --blg-mut:#98a1b3; --blg-bg:#161616;
  --blg-card:#232323; --blg-line:#3a3a3a; --blg-gold-dark:#f0a818;
}
body.dark-theme .blg-busca{background:#2b2b2b}
body.dark-theme .blg-busca input{color:#eee}
body.dark-theme .blg-chip{background:#232323}
body.dark-theme .blg-chip span{background:#333; color:#b9c0cc}
body.dark-theme .blg-chip.ativo{background:var(--blg-gold); border-color:var(--blg-gold); color:#3b2800}
body.dark-theme .blg-chip.ativo span{background:rgba(0,0,0,.18); color:#3b2800}
body.dark-theme .blg-card-cat{background:rgba(20,20,20,.86); color:#fff}
body.dark-theme .blg-vazio,
body.dark-theme .blg-paginacao a,
body.dark-theme .blg-faq details,
body.dark-theme .blg-rel-card,
body.dark-theme .blg-toc,
body.dark-theme .blg-box-lateral,
body.dark-theme .blg-toc-mobile,
body.dark-theme .blg-conteudo table,
body.dark-theme .blg-conteudo blockquote,
body.dark-theme .blg-btn-ghost{background:var(--blg-card); color:var(--blg-txt)}
body.dark-theme .blg-paginacao a.ativo{background:var(--blg-gold); border-color:var(--blg-gold); color:#3b2800}
body.dark-theme .blg-conteudo{color:#c9cfdb}
body.dark-theme .blg-conteudo tbody tr:nth-child(even){background:#282828}
body.dark-theme .blg-conteudo code{background:#33383f; color:#ffb86b}
body.dark-theme .blg-conteudo a{color:#6cb6ff; border-bottom-color:rgba(108,182,255,.3)}
body.dark-theme .blg-resposta{background:#2e2611; border-color:#5a4a1c; }
body.dark-theme .blg-resposta p{color:#f0e0bb}
body.dark-theme .blg-box-ajuda{background:linear-gradient(135deg,#0b3b2e 0%,#12694f 100%)}

/* ---------------------------------------------------------- RESPONSIVO -- */
@media (max-width:1199px){
  .blg-artigo-grid{grid-template-columns:minmax(0,1fr) 270px; gap:34px}
}
@media (max-width:991px){
  .blg-grid{grid-template-columns:repeat(2,1fr)}
  .blg-artigo-grid{grid-template-columns:1fr; gap:0}
  .blg-lateral{position:static; flex-direction:row; flex-wrap:wrap; margin-top:34px}
  .blg-lateral .blg-toc{display:none}
  .blg-lateral .blg-box-lateral{flex:1 1 280px}
  .blg-toc-mobile{display:block}
  .blg-rel-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){
  /* o .menu-mobile do site transborda 75px do header fixo (80px);
     por isso o conteudo do blog so pode comecar depois de ~160px. */
  .blg-wrap{margin-top:80px}
  .blg-hero{padding:88px 0 50px}
  .blg-hero h1{font-size:29px}
  .blg-hero-sub{font-size:16px}
  .blg-grid{grid-template-columns:1fr; gap:18px}
  .blg-card-destaque{flex-direction:column}
  .blg-card-destaque .blg-card-capa{width:100%; flex:none; min-height:0; height:180px}
  .blg-card-destaque .blg-card-corpo{padding:20px}
  .blg-card-destaque .blg-card-titulo{font-size:21px}
  .blg-card-destaque .blg-card-resumo{font-size:15px}
  .blg-artigo-topo{padding:88px 0 38px}
  .blg-artigo-topo h1{font-size:27px}
  .blg-artigo-grid{padding:28px 0 44px}
  .blg-conteudo{font-size:16.5px}
  .blg-conteudo h2{font-size:22px; margin-top:32px}
  .blg-conteudo h3{font-size:18.5px}
  .blg-cta{padding:26px 22px; text-align:center; justify-content:center}
  .blg-cta p{text-align:center}
  .blg-cta-btns{width:100%; flex-direction:column}
  .blg-btn{width:100%}
  .blg-rel-grid{grid-template-columns:1fr}
  .blg-chips{margin-top:-20px}
  .blg-conteudo table{display:block; overflow-x:auto}
}