/* ============================================================
   TRIAT · estilos do blog (índice de artigos + leitor)
   Reaproveita a paleta TRIAT Tech Blue do site principal.
   ============================================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#061421;--surface:#0B2239;--surface-2:#073358;
  --primary:#0067E8;--accent:#00B8F0;--border:#24415B;
  --text:#F7FBFF;--muted:#9BB0C2;
  --glass:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.028));
  --glass-brd:rgba(255,255,255,.10);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.14);
  --glass-shadow:0 18px 50px -18px rgba(0,0,0,.6);
  --grad:linear-gradient(135deg,#0067E8 0%,#00B8F0 100%);
  --shell:min(1200px,92vw);
  --disp:'Sora',sans-serif;--body:'Inter',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'Courier New',monospace;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* cores por categoria */
  --c-linux:#F5A623;--c-ubuntu:#E95420;--c-truenas:#00B8F0;
  --c-proxmox:#E4572E;--c-zabbix:#E11D48;--c-tecnologia:#3B82F6;--c-seguranca:#22C55E;
}

html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;min-height:100vh;background:linear-gradient(135deg,#061421 0%,#0B2239 55%,#073358 100%)}
.bg-glow{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(680px 680px at 88% -6%, rgba(0,184,240,.20), rgba(0,103,232,.06) 45%, transparent 72%),
    radial-gradient(620px 620px at -10% 40%, rgba(0,103,232,.16), rgba(0,184,240,.05) 50%, transparent 72%),
    radial-gradient(640px 640px at 82% 108%, rgba(0,184,240,.14), transparent 70%)}
::selection{background:var(--accent);color:var(--bg)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--disp);line-height:1.12;letter-spacing:-.02em;font-weight:700}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:5px}
.shell{width:var(--shell);margin-inline:auto;position:relative;z-index:1}
.grad-txt{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.glass{background:var(--glass);border:1px solid var(--glass-brd);box-shadow:var(--glass-shadow),var(--glass-hi)}

/* eyebrow */
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-size:.72rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent);
  padding:.5rem .9rem;border-radius:100px;background:rgba(0,184,240,.10);border:1px solid rgba(0,184,240,.22)}
.eyebrow i{font-size:.5rem}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.6rem;font-size:.94rem;font-weight:600;
  padding:.85rem 1.4rem;border-radius:12px;transition:transform .2s var(--ease),box-shadow .2s,border-color .2s,color .2s}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 10px 26px rgba(0,103,232,.35)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(0,103,232,.5)}
.btn-ghost{background:rgba(255,255,255,.06);border:1px solid var(--glass-brd);color:var(--text)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}

/* nav */
header.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .35s,border-color .35s}
header.nav.scrolled{background:rgba(6,20,33,.72);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.07)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand img{height:34px;width:auto;filter:brightness(0) invert(1)}
.nav-links{display:flex;gap:2rem;list-style:none;font-size:.92rem;font-weight:500}
.nav-links a{color:var(--muted);transition:color .2s;position:relative;padding:.35rem 0}
.nav-links a:hover,.nav-links a.active{color:var(--text)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-3px;height:2px;width:0;background:var(--grad);border-radius:2px;transition:width .25s var(--ease)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-cta{font-size:.9rem;font-weight:600;background:var(--grad);color:#fff;padding:.62rem 1.15rem;border-radius:10px;
  transition:transform .2s,box-shadow .2s;box-shadow:0 8px 22px rgba(0,103,232,.32)}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,103,232,.45)}
.burger{display:none;background:var(--glass);border:1px solid var(--glass-brd);color:var(--text);
  width:44px;height:44px;border-radius:11px;font-size:1.1rem;cursor:pointer}

/* ---------- índice de artigos ---------- */
.blog-hero{padding-top:calc(74px + clamp(2.5rem,6vw,4.5rem));padding-bottom:clamp(2rem,4vw,3rem)}
.blog-hero h1{font-size:clamp(2.4rem,5.5vw,4rem);font-weight:800;margin:1.2rem 0 .8rem}
.blog-hero p{color:var(--muted);font-size:1.12rem;max-width:56ch}

.filters{display:flex;flex-wrap:wrap;gap:.6rem;margin:2rem 0 2.5rem}
.chip{font-size:.82rem;font-weight:600;padding:.5rem 1rem;border-radius:100px;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid var(--glass-brd);color:var(--muted);transition:all .2s}
.chip:hover{color:var(--text);border-color:var(--accent)}
.chip.active{background:var(--grad);color:#fff;border-color:transparent}

.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;padding-bottom:clamp(3rem,6vw,5rem)}
.post{border-radius:18px;padding:1.7rem;display:flex;flex-direction:column;gap:.9rem;
  transition:transform .25s var(--ease),border-color .25s}
.post:hover{transform:translateY(-6px);border-color:rgba(0,184,240,.4)}
.post .cat{align-self:flex-start;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:.35rem .7rem;border-radius:100px;color:var(--cat,#00B8F0);background:color-mix(in srgb,var(--cat,#00B8F0) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--cat,#00B8F0) 35%,transparent)}
.post h3{font-size:1.22rem;line-height:1.25}
.post .excerpt{color:var(--muted);font-size:.94rem;flex:1}
.post .meta{display:flex;align-items:center;gap:.6rem;font-size:.8rem;color:var(--muted);
  padding-top:.9rem;border-top:1px solid rgba(255,255,255,.08)}
.post .meta .dot{width:4px;height:4px;border-radius:50%;background:var(--muted)}
.post .more{color:var(--accent);font-weight:600;font-size:.86rem;display:inline-flex;align-items:center;gap:.4rem;margin-top:.2rem}
.empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:3rem 0}

/* ---------- leitor de artigo ---------- */
.progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:60;background:var(--grad);box-shadow:0 0 10px rgba(0,184,240,.6)}
.reader{padding-top:calc(74px + clamp(2rem,5vw,3.5rem));padding-bottom:clamp(3rem,6vw,5rem)}
.reader-wrap{width:min(760px,92vw);margin-inline:auto}
.back{display:inline-flex;align-items:center;gap:.5rem;color:var(--muted);font-size:.88rem;font-weight:500;margin-bottom:1.6rem;transition:color .2s}
.back:hover{color:var(--accent)}
.art-head .cat{display:inline-flex;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:.4rem .8rem;border-radius:100px;color:var(--cat,#00B8F0);background:color-mix(in srgb,var(--cat,#00B8F0) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--cat,#00B8F0) 35%,transparent)}
.art-head h1{font-size:clamp(2rem,4.6vw,3.1rem);font-weight:800;margin:1.1rem 0 1rem;line-height:1.1}
.art-head .meta{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;color:var(--muted);font-size:.9rem}
.art-head .meta .dot{width:4px;height:4px;border-radius:50%;background:var(--muted)}
.art-rule{height:1px;background:linear-gradient(90deg,var(--accent),transparent);margin:1.8rem 0 2.2rem}

/* tipografia de leitura */
.prose{font-size:1.09rem;line-height:1.78;color:#DCE6EF}
.prose>*+*{margin-top:1.25rem}
.prose h2{font-size:1.65rem;color:var(--text);margin-top:2.6rem;margin-bottom:.2rem;padding-left:.9rem;
  border-left:3px solid var(--accent)}
.prose h3{font-size:1.25rem;color:var(--text);margin-top:1.8rem}
.prose p{color:#CDD9E5}
.prose strong{color:var(--text);font-weight:600}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose ul,.prose ol{padding-left:1.3rem;color:#CDD9E5}
.prose li{margin-top:.55rem}
.prose li::marker{color:var(--accent)}
.prose blockquote{border-left:3px solid var(--primary);padding:.4rem 0 .4rem 1.3rem;color:var(--muted);font-style:italic;font-size:1.12rem}
.prose hr{border:none;height:1px;background:rgba(255,255,255,.1);margin:2.4rem 0}
.prose code{font-family:var(--mono);font-size:.86em;background:rgba(0,184,240,.12);color:#9fe4ff;
  padding:.15em .45em;border-radius:6px;border:1px solid rgba(0,184,240,.18)}
.prose pre{background:#04101b;border:1px solid var(--border);border-radius:14px;padding:1.1rem 1.2rem;overflow-x:auto;
  font-family:var(--mono);font-size:.86rem;line-height:1.7;position:relative}
.prose pre code{background:none;border:none;color:#cfe8f5;padding:0}
.prose pre::before{content:attr(data-lang);position:absolute;top:0;right:0;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);background:rgba(255,255,255,.05);padding:.25rem .7rem;border-bottom-left-radius:8px}
/* callout */
.prose .callout{border-radius:14px;padding:1.1rem 1.3rem;border:1px solid;display:flex;gap:.85rem;align-items:flex-start;font-size:1rem}
.prose .callout i{margin-top:.15rem}
.prose .callout.dica{background:rgba(34,197,94,.08);border-color:rgba(34,197,94,.28)}
.prose .callout.dica i{color:#22C55E}
.prose .callout.atencao{background:rgba(245,166,35,.08);border-color:rgba(245,166,35,.3)}
.prose .callout.atencao i{color:#F5A623}
.prose .callout.info{background:rgba(0,184,240,.08);border-color:rgba(0,184,240,.28)}
.prose .callout.info i{color:var(--accent)}

/* CTA no fim do artigo */
.art-cta{margin-top:3rem;border-radius:18px;padding:2rem;text-align:center;background:var(--grad);position:relative;overflow:hidden}
.art-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 10%,rgba(255,255,255,.25),transparent 45%)}
.art-cta>*{position:relative;z-index:1}
.art-cta h3{color:#fff;font-size:1.4rem;margin-bottom:.5rem}
.art-cta p{color:rgba(255,255,255,.9);margin-bottom:1.3rem}
.art-cta .btn-primary{background:#fff;color:var(--primary)}

/* relacionados */
.related{margin-top:3.5rem}
.related h4{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:1.2rem}
.related-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.rel{border-radius:14px;padding:1.2rem;transition:border-color .2s,transform .2s}
.rel:hover{border-color:var(--accent);transform:translateY(-3px)}
.rel .cat{font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cat,#00B8F0)}
.rel h5{font-family:var(--disp);font-size:1rem;margin-top:.4rem;line-height:1.3}

/* footer */
footer{border-top:1px solid rgba(255,255,255,.07);padding:clamp(2.5rem,5vw,4rem) 0 2rem;margin-top:2rem}
.foot-grid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2rem;align-items:flex-start}
.foot-brand img{height:34px;filter:brightness(0) invert(1);margin-bottom:1rem}
.foot-brand p{color:var(--muted);font-size:.9rem;max-width:32ch}
.foot-links{display:flex;gap:.6rem;flex-wrap:wrap}
.foot-links a{color:var(--muted);font-size:.9rem;padding:.4rem .8rem;border-radius:8px;transition:color .2s,background .2s}
.foot-links a:hover{color:var(--accent);background:rgba(255,255,255,.05)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.07);margin-top:2.5rem;padding-top:1.5rem;
  color:var(--muted);font-size:.82rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}

/* responsivo */
@media(max-width:900px){.posts{grid-template-columns:1fr 1fr}}
@media(max-width:640px){
  .nav-links,.nav-cta{display:none}
  .burger{display:grid;place-items:center}
  .nav-links.open{display:flex;position:absolute;top:74px;right:0;left:0;flex-direction:column;
    background:rgba(6,20,33,.96);backdrop-filter:blur(18px);border-block:1px solid rgba(255,255,255,.08);padding:1.3rem 4vw;gap:1.1rem}
  .posts,.related-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important}html{scroll-behavior:auto};.post:hover,.rel:hover{transform:none}}