/* ==========================================================================
   Central de conteúdo do Fluv Hub — folha única do /blog.
   Usada por blog/_chrome.php, index.php, post.php e autor.php.

   Tema claro fixo, de propósito: o blog é área de leitura e de ajuda, e o
   claro é o que funciona aqui. Não existe botão de claro/escuro no topo.

   Cores: o indigo da marca é o único acento; o verde-azulado sai do próprio
   símbolo da Fluv Hub e só aparece no bloco "Comece por aqui". Categoria não
   vira cor — quem diz o assunto é o título da seção.
   ========================================================================== */

:root{
  --paper:#FAFBFD;
  --paper-2:#F1F4FA;
  --surface:#FFFFFF;

  --ink:#0F172A;
  --ink-2:#26314A;
  --body:#4A5670;
  --muted:#77839B;

  --line:#E3E8F1;
  --line-soft:#EDF1F7;

  --accent:#4338CA;
  --accent-hi:#372FB0;
  --accent-soft:#EEF0FF;
  --accent-ring:rgba(67,56,202,.18);

  --teal:#13707C;
  --teal-soft:#E6F2F3;

  --ink-deep:#0B1120;

  --r-sm:10px;
  --r:14px;
  --r-lg:20px;
  --r-pill:999px;

  --sh-1:0 1px 2px rgba(15,23,42,.05);
  --sh-2:0 12px 30px -18px rgba(15,23,42,.35);
  --sh-3:0 26px 60px -30px rgba(15,23,42,.45);

  --maxw:1140px;
  --nav-h:66px;

  --sans:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

/* Classe com display próprio vence o [hidden] do navegador; como a busca e o
   "ver os outros" escondem cartões por esse atributo, ele precisa ganhar. */
[hidden]{display:none!important;}

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 18px);
  -webkit-text-size-adjust:100%;
}

body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--body);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{color:inherit;text-decoration:none;}
img{max-width:100%;height:auto;display:block;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
input{font:inherit;}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--accent);color:#fff;padding:12px 18px;border-radius:0 0 var(--r-sm) 0;
  font-weight:700;
}
.skip:focus{left:0;}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ==========================================================================
   Barra de navegação
   ========================================================================== */

.bnav{
  position:sticky;top:0;z-index:60;
  background:rgba(250,251,253,.88);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}

.bnav-in{
  max-width:var(--maxw);margin:0 auto;padding:0 24px;
  height:var(--nav-h);
  display:flex;align-items:center;gap:20px;
}

.bnav-logo{display:flex;align-items:center;gap:10px;flex:0 0 auto;}
.bnav-logo img{height:30px;width:30px;}
.bnav-logo b{
  font-weight:800;font-size:1.12rem;letter-spacing:-.025em;color:var(--ink);
}
.bnav-logo b i{font-style:normal;color:var(--accent);}

.bnav-links{
  display:flex;align-items:center;gap:2px;list-style:none;
  margin-left:auto;
}
.bnav-links a{
  display:block;padding:9px 13px;border-radius:var(--r-sm);
  font-size:.925rem;font-weight:600;color:var(--ink-2);
  transition:background .16s ease,color .16s ease;
}
.bnav-links a:hover{background:var(--paper-2);color:var(--ink);}
.bnav-links a[aria-current]{color:var(--accent);background:var(--accent-soft);}

.bnav-cta{
  flex:0 0 auto;
  display:inline-flex;align-items:center;gap:8px;
  background:var(--accent);color:#fff;
  padding:10px 20px;border-radius:var(--r-pill);
  font-size:.92rem;font-weight:700;letter-spacing:-.01em;
  box-shadow:0 8px 20px -10px rgba(67,56,202,.9);
  transition:background .16s ease,transform .16s ease;
}
.bnav-cta:hover{background:var(--accent-hi);transform:translateY(-1px);}

.bnav-burger{
  display:none;flex:0 0 auto;margin-left:auto;
  width:40px;height:40px;border-radius:var(--r-sm);
  align-items:center;justify-content:center;
  color:var(--ink);font-size:1.15rem;
}
.bnav-burger:hover{background:var(--paper-2);}

.bnav-panel{display:none;}

@media(max-width:920px){
  .bnav-links{display:none;}
  .bnav-cta{display:none;}
  .bnav-burger{display:flex;}

  .bnav-panel{
    display:block;
    border-top:1px solid var(--line);
    background:var(--surface);
    max-height:0;overflow:hidden;
    transition:max-height .22s ease;
  }
  .bnav-panel[data-open="1"]{max-height:460px;}
  .bnav-panel ul{list-style:none;padding:10px 24px 18px;}
  .bnav-panel a{
    display:block;padding:11px 2px;font-weight:600;color:var(--ink-2);
    border-bottom:1px solid var(--line-soft);
  }
  .bnav-panel li:last-child a{border-bottom:0;}
  .bnav-panel .bnav-panel-cta{
    margin-top:12px;background:var(--accent);color:#fff;
    text-align:center;border-radius:var(--r-pill);padding:12px;border:0;
  }
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;}
}

/* ==========================================================================
   Topo da central de conteúdo (listagem)
   ========================================================================== */

.hub-hero{
  background:
    radial-gradient(52rem 24rem at 50% -14%,rgba(67,56,202,.10) 0%,transparent 64%),
    linear-gradient(180deg,#FFFFFF 0%,var(--paper) 100%);
  border-bottom:1px solid var(--line);
  padding:56px 0 54px;
  text-align:center;
}
.hub-hero .wrap > *{margin-left:auto;margin-right:auto;}
.hub-hero .crumbs{justify-content:center;}

.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:.85rem;color:var(--muted);margin-bottom:22px;
}
.crumbs a{color:var(--muted);text-decoration:none;}
.crumbs a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px;}
.crumbs span[aria-hidden]{opacity:.5;}

.hub-hero h1{
  font-size:clamp(2.05rem,4.4vw,2.95rem);
  font-weight:800;letter-spacing:-.035em;line-height:1.08;
  color:var(--ink);max-width:19ch;
}

.hub-lead{
  margin-top:16px;max-width:54ch;
  font-size:clamp(1.02rem,1.5vw,1.14rem);
  color:var(--body);line-height:1.6;
}

.hub-search{
  margin-top:30px;max-width:620px;position:relative;text-align:left;
}
.hub-search i{
  position:absolute;left:20px;top:50%;transform:translateY(-50%);
  color:var(--muted);font-size:1rem;pointer-events:none;
}
.hub-search input{
  width:100%;
  padding:17px 20px 17px 50px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  font-size:1rem;color:var(--ink);
  box-shadow:var(--sh-2);
  transition:border-color .16s ease,box-shadow .16s ease;
}
.hub-search input::placeholder{color:var(--muted);}
.hub-search input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 4px var(--accent-ring),var(--sh-2);
}

.hub-suggest{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;max-width:660px;
  justify-content:center;
}
.hub-suggest button{
  padding:7px 15px;border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--line);
  font-size:.86rem;font-weight:600;color:var(--ink-2);
  transition:border-color .16s ease,color .16s ease,background .16s ease;
}
.hub-suggest button:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);}

.hub-stats{
  margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;
  justify-content:center;
  font-size:.88rem;color:var(--muted);
}
.hub-stats b{color:var(--ink-2);font-weight:700;}
.hub-stats span{display:inline-flex;align-items:center;gap:7px;}

/* ==========================================================================
   Comece por aqui — o painel dos guias de base, ao lado da busca.
   Sem miniatura: captura de painel encolhida para 300px não informa nada,
   e era o que deixava a listagem com cara de amontoado.
   ========================================================================== */

.sec-head{margin-bottom:24px;max-width:58ch;}
.sec-head h2{
  font-size:clamp(1.35rem,2.6vw,1.65rem);
  font-weight:800;letter-spacing:-.025em;color:var(--ink);line-height:1.2;
}
.sec-head p{margin-top:8px;color:var(--muted);font-size:.97rem;}

.starter{
  padding:48px 0 0;
}
.pick-badge{
  display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  padding:5px 12px;border-radius:var(--r-pill);
  background:var(--teal-soft);color:#0C5A64;
  font-size:.76rem;font-weight:700;
}
.gcard.is-pick > a{
  background:linear-gradient(180deg,#FCFDFF 0%,var(--surface) 100%);
  border-color:#CFE2E4;
}
.gcard.is-pick > a:hover{border-color:var(--teal);}

/* ==========================================================================
   Assuntos e guias — quem chega é lojista, então cada assunto tem ícone e
   cor, e cada guia é um cartão com resumo. Nada de listinha de documentação.
   ========================================================================== */

.hub-body{padding:48px 0 64px;}

/* --- quadro de assuntos ------------------------------------------------- */

.topics{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr));}
@media(min-width:620px){.topics{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(min-width:900px){.topics{grid-template-columns:repeat(4,minmax(0,1fr));}}
.topic{
  display:flex;align-items:center;gap:14px;
  padding:16px 18px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--sh-1);
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.topic:hover{
  border-color:#C9D2E8;box-shadow:var(--sh-2);transform:translateY(-2px);
}
.topic .ico{
  flex:0 0 auto;width:44px;height:44px;border-radius:13px;
  display:grid;place-items:center;font-size:1.05rem;
}
.topic b{
  display:block;font-size:.99rem;font-weight:700;
  color:var(--ink);letter-spacing:-.015em;line-height:1.25;
}
.topic span{display:block;margin-top:3px;font-size:.83rem;color:var(--muted);}

/* --- seções por assunto ------------------------------------------------- */

.cat-sec{scroll-margin-top:calc(var(--nav-h) + 26px);}
.cat-sec + .cat-sec{margin-top:52px;}

.cat-head{display:flex;align-items:center;gap:13px;margin-bottom:20px;}
.cat-head .ico{
  flex:0 0 auto;width:40px;height:40px;border-radius:12px;
  display:grid;place-items:center;font-size:.98rem;
}
.cat-head h2{
  font-size:1.3rem;font-weight:800;letter-spacing:-.025em;color:var(--ink);
  line-height:1.2;
}
.cat-head em{
  font-style:normal;font-size:.86rem;color:var(--muted);font-weight:600;
  margin-top:2px;display:block;
}

.gcards{
  display:grid;gap:16px;list-style:none;
  grid-template-columns:repeat(auto-fit,minmax(288px,1fr));
}
.gcard{display:flex;}
.gcard > a{
  display:flex;flex-direction:column;gap:10px;flex:1;
  padding:22px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--sh-1);
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.gcard > a:hover{
  border-color:#C6CFEA;box-shadow:var(--sh-3);transform:translateY(-3px);
}
.gcard h3{
  font-size:1.06rem;font-weight:700;line-height:1.36;
  letter-spacing:-.018em;color:var(--ink);
  transition:color .16s ease;
}
.gcard > a:hover h3{color:var(--accent);}
.gcard p{font-size:.92rem;line-height:1.58;color:var(--muted);flex:1;}
.gcard footer{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-top:4px;
  font-size:.85rem;font-weight:700;color:var(--accent);
}
.gcard footer em{font-style:normal;font-weight:600;color:#9AA5BC;}
.gcard footer i{transition:transform .18s ease;}
.gcard > a:hover footer i{transform:translateX(3px);}

.more-row{margin-top:18px;}
.more-btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 20px;border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--line);
  font-size:.9rem;font-weight:700;color:var(--ink-2);
  transition:border-color .16s ease,color .16s ease,background .16s ease;
}
.more-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);}

/* --- lista enxuta (usada no fim do guia e no 404) ----------------------- */

.plist{list-style:none;display:grid;gap:10px;}
.prow > a{
  display:grid;gap:4px 18px;
  grid-template-columns:minmax(0,1fr) auto;align-items:baseline;
  padding:16px 18px;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.prow > a:hover{border-color:#C6CFEA;box-shadow:var(--sh-2);}
.prow-title{
  font-size:1rem;font-weight:700;letter-spacing:-.015em;color:var(--ink);line-height:1.35;
}
.prow > a:hover .prow-title{color:var(--accent);}
.prow-sum{grid-column:1/2;font-size:.9rem;color:var(--muted);line-height:1.55;}
.prow-min{
  grid-row:1/2;grid-column:2/3;
  font-size:.82rem;font-weight:600;color:#9AA5BC;white-space:nowrap;
}
@media(max-width:620px){
  .prow > a{grid-template-columns:minmax(0,1fr);}
  .prow-min{grid-row:auto;grid-column:1/2;}
}

/* --- quando a busca não acha nada --------------------------------------- */

.hub-empty{
  margin-top:8px;padding:44px 26px;text-align:center;
  background:var(--surface);border:1px dashed #CBD5E6;border-radius:var(--r-lg);
}
.hub-empty .ico{
  width:54px;height:54px;margin:0 auto 16px;border-radius:16px;
  display:grid;place-items:center;font-size:1.3rem;
  background:var(--accent-soft);color:var(--accent);
}
.hub-empty h2{font-size:1.2rem;font-weight:800;color:var(--ink);margin-bottom:10px;}
.hub-empty p{color:var(--muted);max-width:48ch;margin:0 auto;}
.hub-empty button,.hub-empty a{
  display:inline-block;margin-top:18px;
  color:var(--accent);font-weight:700;
  text-decoration:underline;text-underline-offset:4px;
}

/* ==========================================================================
   Faixa de chamada (fim das páginas)
   ========================================================================== */

.band{
  border-top:1px solid var(--line);
  background:
    radial-gradient(48rem 18rem at 50% 0%,rgba(67,56,202,.08) 0%,transparent 65%),
    var(--paper-2);
  padding:56px 0;
}
.band-in{
  max-width:640px;margin:0 auto;text-align:center;
}
.band h2{
  font-size:clamp(1.4rem,3vw,1.85rem);font-weight:800;
  letter-spacing:-.03em;color:var(--ink);line-height:1.2;
}
.band p{margin-top:12px;color:var(--body);font-size:1.02rem;}
.band-actions{
  margin-top:24px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
}

.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:14px 26px;border-radius:var(--r-pill);
  font-size:.97rem;font-weight:700;letter-spacing:-.01em;
  transition:background .16s ease,transform .16s ease,border-color .16s ease,color .16s ease;
}
.btn-primary{
  background:var(--accent);color:#fff;
  box-shadow:0 14px 30px -16px rgba(67,56,202,.95);
}
.btn-primary:hover{background:var(--accent-hi);transform:translateY(-2px);}
.btn-ghost{
  background:var(--surface);color:var(--ink-2);border:1px solid var(--line);
}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);}

/* ==========================================================================
   Artigo
   ========================================================================== */

.progress{
  position:fixed;top:0;left:0;height:3px;width:0;
  background:var(--accent);z-index:70;
  transition:width .08s linear;
}

.post-head{
  background:
    radial-gradient(56rem 20rem at 20% -20%,rgba(67,56,202,.08) 0%,transparent 62%),
    linear-gradient(180deg,#FFFFFF 0%,var(--paper) 100%);
  border-bottom:1px solid var(--line);
  padding:42px 0 40px;
}
.post-cat{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 15px;border-radius:var(--r-pill);
  font-size:.87rem;font-weight:700;
  transition:filter .16s ease;
}
.post-cat:hover{filter:brightness(.96);}
.post-cat i{font-size:.82rem;}

.post-h1{
  margin:14px 0 0;max-width:20ch;
  font-size:clamp(1.85rem,4vw,2.65rem);
  font-weight:800;letter-spacing:-.035em;line-height:1.1;color:var(--ink);
}

.post-meta{
  margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
  font-size:.88rem;color:var(--muted);
}
.post-meta span{display:inline-flex;align-items:center;gap:7px;}
.post-meta a{color:var(--ink-2);font-weight:600;text-decoration:underline;text-underline-offset:3px;}
.post-meta a:hover{color:var(--accent);}
.post-meta img{
  width:26px;height:26px;border-radius:50%;
  background:var(--surface);border:1px solid var(--line);padding:3px;
}

.post-grid{
  display:grid;gap:44px;padding:44px 0 10px;
  grid-template-columns:minmax(0,1fr);
}
@media(min-width:1040px){
  .post-grid{grid-template-columns:minmax(0,1fr) 258px;gap:64px;}
}

.post-main{min-width:0;max-width:44rem;}

.lead-fig{margin:0 0 30px;}
.lead-fig img{
  width:100%;border-radius:var(--r-lg);
  border:1px solid var(--line);box-shadow:var(--sh-2);
}

/* --- texto do artigo ---------------------------------------------------- */

.prose{
  font-family:var(--serif);
  font-size:1.125rem;line-height:1.78;color:#3C4760;
}
@media(max-width:560px){
  .prose{font-size:1.06rem;line-height:1.72;}
  .prose > p:first-child{font-size:1.12rem;}
}
.prose > p{margin:0 0 20px;}
.prose > p:first-child{font-size:1.2rem;color:var(--ink-2);}

.prose h2,.prose h3,.prose h4{
  font-family:var(--sans);color:var(--ink);letter-spacing:-.025em;
  scroll-margin-top:calc(var(--nav-h) + 24px);
}
.prose h2{
  font-size:clamp(1.42rem,2.6vw,1.72rem);font-weight:800;line-height:1.22;
  margin:46px 0 16px;padding-top:6px;
}
.prose h3{font-size:1.2rem;font-weight:700;line-height:1.3;margin:32px 0 12px;}
.prose h4{font-size:1.04rem;font-weight:700;margin:26px 0 10px;}

.prose ul,.prose ol{margin:0 0 22px;padding-left:1.35em;}
.prose li{margin:0 0 10px;padding-left:.2em;}
.prose li::marker{color:var(--accent);font-weight:600;}

.prose a{
  color:var(--accent);font-weight:600;
  text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;
  text-decoration-color:rgba(67,56,202,.35);
  transition:text-decoration-color .16s ease;
}
.prose a:hover{text-decoration-color:var(--accent);}

.prose strong,.prose b{color:var(--ink);font-weight:600;}
.prose em{font-style:italic;}

.prose figure{margin:30px 0;}
.prose figure img{
  width:100%;border-radius:var(--r);
  border:1px solid var(--line);box-shadow:var(--sh-2);
}
.prose figcaption{
  margin-top:10px;font-family:var(--sans);
  font-size:.85rem;color:var(--muted);line-height:1.5;
}

.prose blockquote{
  margin:28px 0;padding:6px 0 6px 24px;
  border-left:3px solid var(--accent);
  font-size:1.18rem;line-height:1.6;color:var(--ink-2);
}
.prose blockquote p:last-child{margin-bottom:0;}

.prose .callout{
  margin:30px 0;padding:20px 22px;
  background:var(--accent-soft);
  border:1px solid #DCE0FB;
  border-radius:var(--r);
  font-family:var(--sans);font-size:.98rem;line-height:1.62;color:var(--ink-2);
}
.prose .callout strong{color:var(--accent);}

.prose table{
  width:100%;border-collapse:collapse;margin:28px 0;
  font-family:var(--sans);font-size:.93rem;
  display:block;overflow-x:auto;white-space:nowrap;
}
@media(min-width:760px){
  .prose table{display:table;white-space:normal;}
}
.prose th,.prose td{
  border-bottom:1px solid var(--line);
  padding:12px 14px;text-align:left;vertical-align:top;
}
.prose thead th,.prose tr:first-child th{
  background:var(--paper-2);color:var(--ink);font-weight:700;
  border-bottom:1px solid var(--line);
}
.prose tbody tr:hover{background:#FBFCFE;}

.prose code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.9em;background:var(--paper-2);
  padding:2px 6px;border-radius:6px;color:var(--ink-2);
}

.prose hr{border:0;border-top:1px solid var(--line);margin:38px 0;}

/* As calculadoras embutidas nos posts trazem estilo próprio (#fh-*).
   Só devolvemos a fonte sem serifa — o resto é delas. */
.prose [id^="fh-"]{font-family:var(--sans);}

/* --- perguntas frequentes ---------------------------------------------- */

.faq{margin-top:52px;}
.faq h2{
  font-size:clamp(1.35rem,2.6vw,1.6rem);font-weight:800;
  letter-spacing:-.025em;color:var(--ink);margin-bottom:18px;
}
.faq details{
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);margin-bottom:10px;
  transition:border-color .16s ease;
}
.faq details[open]{border-color:#CBD3E8;box-shadow:var(--sh-1);}
.faq summary{
  display:flex;align-items:flex-start;gap:12px;
  padding:16px 18px;cursor:pointer;list-style:none;
  font-weight:700;color:var(--ink);line-height:1.45;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"\f067";font-family:"Font Awesome 6 Free";font-weight:900;
  margin-left:auto;flex:0 0 auto;
  font-size:.78rem;color:var(--accent);
  transition:transform .18s ease;
}
.faq details[open] summary::after{content:"\f068";}
.faq details > p{
  padding:0 18px 18px;color:var(--body);line-height:1.68;
}

/* --- etiquetas, autor, relacionados ------------------------------------- */

.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:38px;}
.tags a,.tags span{
  padding:6px 14px;border-radius:var(--r-pill);
  background:var(--paper-2);border:1px solid var(--line);
  font-size:.83rem;font-weight:600;color:var(--ink-2);
}

.authorbox{
  margin-top:40px;padding:22px;
  display:flex;gap:18px;align-items:flex-start;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
}
.authorbox img{
  width:54px;height:54px;flex:0 0 auto;border-radius:50%;
  border:1px solid var(--line);padding:6px;background:var(--surface);
}
.authorbox h3{font-size:1.02rem;font-weight:800;color:var(--ink);}
.authorbox .role{font-size:.85rem;color:var(--teal);font-weight:700;margin-top:2px;}
.authorbox p{margin-top:9px;font-size:.93rem;color:var(--muted);line-height:1.6;}
.authorbox a{
  display:inline-block;margin-top:10px;
  color:var(--accent);font-weight:700;font-size:.9rem;
  text-decoration:underline;text-underline-offset:3px;
}

.share{
  margin-top:34px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
}
.share strong{font-size:.9rem;color:var(--ink-2);font-weight:700;margin-right:4px;}
.share button,.share a{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--surface);
  font-size:.87rem;font-weight:600;color:var(--ink-2);
  transition:border-color .16s ease,color .16s ease;
}
.share button:hover,.share a:hover{border-color:var(--accent);color:var(--accent);}

.related{margin-top:52px;padding-top:34px;border-top:1px solid var(--line);}
.related h2{
  font-size:clamp(1.3rem,2.6vw,1.55rem);font-weight:800;
  letter-spacing:-.025em;color:var(--ink);margin-bottom:6px;
}

/* --- coluna lateral do artigo ------------------------------------------- */

.post-side{align-self:start;}
@media(min-width:1040px){
  .post-side{position:sticky;top:calc(var(--nav-h) + 26px);}
}
@media(max-width:1039px){
  .post-side .toc{display:none;}
}

.toc h2{font-size:.92rem;font-weight:700;color:var(--ink);margin-bottom:14px;}
.toc ul{list-style:none;border-left:1px solid var(--line);}
.toc a{
  display:block;padding:7px 0 7px 15px;margin-left:-1px;
  border-left:2px solid transparent;
  font-size:.89rem;line-height:1.45;font-weight:500;color:var(--muted);
  transition:color .16s ease,border-color .16s ease;
}
.toc a:hover{color:var(--ink);}
.toc a.is-active{color:var(--accent);border-left-color:var(--accent);font-weight:600;}

.side-cta{
  margin-top:28px;padding:22px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-1);
}
.side-cta h3{font-size:1rem;font-weight:800;color:var(--ink);line-height:1.35;}
.side-cta p{margin-top:8px;font-size:.89rem;color:var(--muted);line-height:1.6;}
.side-cta .btn{margin-top:16px;width:100%;justify-content:center;padding:12px 18px;font-size:.92rem;}

/* ==========================================================================
   Página de autor e 404
   ========================================================================== */

.au-head{
  display:flex;gap:20px;align-items:center;flex-wrap:wrap;
  justify-content:center;text-align:left;margin-top:6px;
}
.au-avatar{
  width:76px;height:76px;flex:0 0 auto;border-radius:50%;
  background:var(--surface);border:1px solid var(--line);padding:10px;
  object-fit:contain;
}
.au-head h1{
  font-size:clamp(1.6rem,3.4vw,2.15rem);font-weight:800;
  letter-spacing:-.03em;color:var(--ink);line-height:1.15;
}
.au-role{color:var(--teal);font-weight:700;font-size:.9rem;margin-top:4px;}
.au-bio{margin-top:20px;max-width:62ch;color:var(--body);line-height:1.68;}

.nf{padding:80px 0 70px;text-align:center;}
.nf h1{
  font-size:clamp(1.8rem,4vw,2.4rem);font-weight:800;
  letter-spacing:-.03em;color:var(--ink);line-height:1.15;
}
.nf p{margin:14px auto 0;max-width:46ch;color:var(--body);}
.nf .band-actions{margin-top:26px;}

/* ==========================================================================
   Rodapé
   ========================================================================== */

.bfoot{
  background:var(--ink-deep);color:rgba(255,255,255,.62);
  padding:52px 0 26px;
}
.bfoot-in{
  display:grid;gap:36px;
  grid-template-columns:minmax(0,1fr);
}
@media(min-width:620px){
  .bfoot-in{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(min-width:900px){
  .bfoot-in{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));}
}
.bfoot-brand a{display:inline-flex;align-items:center;gap:10px;}
.bfoot-brand img{height:28px;width:28px;}
.bfoot-brand b{font-size:1.06rem;font-weight:800;color:#fff;letter-spacing:-.025em;}
.bfoot-brand b i{font-style:normal;color:#A5B4FC;}
.bfoot-brand p{margin-top:14px;max-width:34ch;font-size:.9rem;line-height:1.65;}

.bfoot h3{
  font-size:.86rem;font-weight:700;color:rgba(255,255,255,.95);margin-bottom:14px;
}
.bfoot ul{list-style:none;display:grid;gap:10px;}
.bfoot li a{font-size:.9rem;color:rgba(255,255,255,.62);transition:color .16s ease;}
.bfoot li a:hover{color:#fff;}

.bfoot-copy{
  margin-top:40px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;
  font-size:.84rem;color:rgba(255,255,255,.45);
}

/* ==========================================================================
   Impressão — o leitor imprime o guia e leva para a bancada
   ========================================================================== */

@media print{
  .bnav,.bfoot,.post-side,.band,.share,.progress,.hub-search,.hub-suggest{display:none!important;}
  body{background:#fff;color:#000;}
  .post-head{background:none;border-bottom:1px solid #ccc;padding:0 0 18px;}
  .post-grid{display:block;padding:18px 0 0;}
  .post-main{max-width:none;}
  .prose{font-size:11.5pt;line-height:1.55;color:#000;}
  .prose a{color:#000;text-decoration:underline;}
  .prose figure,.faq details{break-inside:avoid;}
}