/* ═══════════════════════════════════════════════════════════
   STRATO AI — BLOG no design novo
   O HTML dos posts não é tocado: só a camada visual muda.
   Por isso há !important pontual — os posts trazem estilos
   inline do tema claro antigo que precisam ser sobrescritos.
   ═══════════════════════════════════════════════════════════ */
:root{
  --paper:#F7F8FA; --paper-2:#FFFFFF;
  --ink:#0E1219; --ink-2:#33404F; --ink-3:#5A6675;
  --blue:#3B82F6; --blue-deep:#2563EB; --baby:#7DD3FC; --cyan:#22D3EE;
  --white:#FFFFFF; --muted:#5A6675; --soft:#33404F;
  --line:rgba(14,18,25,.16); --line-2:rgba(14,18,25,.08);
  --display:'Sora',system-ui,sans-serif;
  --body:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --gut:clamp(20px,5vw,56px);
}
*{box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:16.5px;line-height:1.75;
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(80% 44% at 50% -6%,rgba(37,99,235,.07),transparent 62%);
  background-attachment:fixed;background-repeat:no-repeat;
}
img,svg{max-width:100%;height:auto}
a{color:var(--blue-deep);text-decoration:none;transition:color .2s}
a:hover{color:#0891B2}

.wrap{width:min(100%,860px);margin:0 auto;padding:0 var(--gut) 80px}

/* ── topo: a navegação antiga vira o header novo ── */
.top{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:20px 0;margin-bottom:8px;border-bottom:1px solid var(--line-2);
  position:relative;
}
.brand img{height:30px;width:auto;filter:none}
.mnav,.menu-btn,.drawer{display:none!important}
.nav{display:flex!important;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.nav .btn,.top .btn{
  padding:8px 13px!important;border:1px solid transparent!important;border-radius:999px!important;
  background:transparent!important;color:var(--muted)!important;box-shadow:none!important;
  font:500 12.5px var(--body)!important;
}
.nav .btn:hover{color:var(--ink)!important;background:rgba(37,99,235,.07)!important}
.nav .btn-primary,.top .btn-primary{
  border-color:var(--line)!important;color:var(--white)!important;
  background:linear-gradient(96deg,var(--blue-deep),var(--cyan))!important;color:#04121A!important;
}

/* ── o artigo ── */
article.card,.card{
  background:transparent!important;border:0!important;box-shadow:none!important;
  padding:0!important;margin:0 0 26px!important;border-radius:0!important;
  color:var(--white)!important;
}
/* blocos que no tema antigo eram caixas claras viram painéis escuros */
.card .card,.card[style*="rgba(255,255,255"]{
  background:var(--paper-2)!important;
  border:1px solid var(--line)!important;box-shadow:0 14px 40px rgba(14,18,25,.05)!important;
  padding:22px 24px!important;margin:26px 0!important;
}
.kicker{
  display:flex;align-items:center;gap:12px;
  font:600 10px/1 var(--mono)!important;letter-spacing:.26em!important;
  text-transform:uppercase;color:var(--blue-deep)!important;margin-top:34px;
}
.kicker:after{content:"";height:1px;flex:1;background:linear-gradient(90deg,var(--blue-deep),transparent)}

h1{
  font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.06;
  font-size:clamp(2.1rem,4.6vw,3.4rem)!important;color:var(--ink)!important;
  margin:18px 0 0!important;
}
h2{
  font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.15;
  font-size:clamp(1.5rem,2.8vw,2.1rem);color:var(--ink);margin:52px 0 14px;
}
h3{font-family:var(--display);font-weight:600;font-size:1.18rem;color:var(--ink);margin:30px 0 10px}
.title{
  font-family:var(--display)!important;font-weight:700!important;
  font-size:clamp(1.45rem,2.7vw,2rem)!important;color:var(--ink)!important;
  letter-spacing:-.02em!important;margin:48px 0 12px!important;line-height:1.18!important;
}
.title:before{
  content:"";display:block;width:44px;height:2px;margin-bottom:16px;
  background:linear-gradient(90deg,var(--blue-deep),transparent);
}

p,.sub,li{color:var(--soft)!important}
.sub{font-size:16px!important;line-height:1.78!important;margin:14px 0!important;opacity:1!important}
p{margin:14px 0}
strong,b{color:var(--ink);font-weight:600}
em,i{color:var(--blue-deep);font-style:normal}

ul,ol{padding-left:22px;margin:16px 0}
li{margin:9px 0}
ul li::marker{color:var(--blue-deep)}
ol li::marker{color:var(--blue-deep);font-family:var(--mono);font-size:.85em}

blockquote{
  margin:28px 0;padding:4px 0 4px 22px;
  border-left:2px solid var(--blue-deep);color:var(--ink);font-size:1.05em;
}
code,kbd,samp{
  font-family:var(--mono);font-size:.88em;
  background:rgba(37,99,235,.08);border:1px solid var(--line);
  padding:2px 6px;color:var(--blue-deep);
}
pre{
  background:#0E1219!important;border:1px solid var(--line);
  padding:18px 20px;overflow-x:auto;margin:24px 0;
}
pre code{background:none;border:0;padding:0;color:#C9D3E0}
hr{border:0;height:1px;background:var(--line-2);margin:44px 0}

table{width:100%;border-collapse:collapse;margin:26px 0;font-size:14.5px}
th,td{padding:12px 14px;border:1px solid var(--line);text-align:left}
th{background:rgba(37,99,235,.07);color:var(--ink);font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase}
td{color:var(--soft)}

/* grades de destaque do tema antigo */
.grid2,.grid3{display:grid;gap:14px!important;margin:24px 0}
.grid2{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.grid3{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.feat{
  background:var(--paper-2)!important;
  border:1px solid var(--line)!important;border-radius:0!important;
  padding:18px 18px!important;color:var(--soft)!important;box-shadow:none!important;
}
.feat b{display:block;color:var(--ink);margin-bottom:6px;font-size:14.5px}
.feat span{font-size:13.5px;line-height:1.6;color:var(--muted)}
.tag{
  display:inline-block;font:600 9px var(--mono);letter-spacing:.16em;text-transform:uppercase;
  padding:5px 9px;border:1px solid var(--line);color:var(--blue-deep);background:rgba(37,99,235,.06);
}
.section{padding:0!important;margin:0!important}

/* botões dentro do conteúdo */
.cta{display:flex;flex-wrap:wrap;gap:11px;margin:26px 0}
.cta .btn,a.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 20px!important;border-radius:999px!important;
  font:600 13.5px var(--body)!important;border:1px solid var(--line)!important;
  background:var(--paper-2)!important;color:var(--ink)!important;box-shadow:none!important;
}
.cta .btn-primary,a.btn-primary{
  background:linear-gradient(96deg,var(--blue-deep),var(--cyan))!important;
  color:#04121A!important;border-color:transparent!important;
  box-shadow:0 8px 30px rgba(34,211,238,.22)!important;
}

/* FAQ */
details,.qa{
  border:1px solid var(--line);background:var(--paper-2);
  margin:10px 0;padding:0;
}
summary{
  padding:15px 18px;cursor:pointer;list-style:none;
  font-weight:600;font-size:14.5px;color:var(--ink);
  display:flex;justify-content:space-between;gap:14px;align-items:center;
}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";color:var(--blue-deep);font-family:var(--mono);font-size:17px}
details[open] summary:after{content:"–"}
details .a,details p{padding:0 18px 16px;margin:0;color:var(--muted)!important;font-size:14px}

.foot,.footer{
  margin-top:60px;padding:26px 0;border-top:1px solid var(--line-2);
  font:500 9.5px/1.7 var(--mono)!important;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3)!important;text-align:left!important;
}

@media(max-width:720px){
  body{font-size:16px}
  .top{flex-direction:column;align-items:flex-start;gap:12px}
  .nav{justify-content:flex-start}
  .grid2,.grid3{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}