/* ═══════════════════════════════════════════════════════════
   FLUXO CONTÁBIL — projeto conceito Empusites
   Claro neutro · esmeralda + lima · Space Grotesk + Archivo
   Compartilhado por index.html, blog.html e artigo.html
   ═══════════════════════════════════════════════════════════ */

:root{
  --paper:   #F7F8F5;
  --paper-2: #EFF1EB;
  --paper-3: #E5E8E0;
  --white:   #FFFFFF;

  --ink:     #0F1512;
  --ink-2:   rgba(15,21,18,.66);
  --ink-3:   rgba(15,21,18,.44);

  --em:      #0B7A57;
  --em-dk:   #06553C;
  --em-lt:   #16A97A;
  --acid:    #CFF25B;

  --line:    rgba(15,21,18,.10);
  --line-2:  rgba(15,21,18,.2);

  --sh-1: 0 1px 2px rgba(15,21,18,.04), 0 6px 16px -8px rgba(15,21,18,.09);
  --sh-2: 0 2px 4px rgba(15,21,18,.04), 0 16px 36px -14px rgba(15,21,18,.16);
  --sh-3: 0 4px 8px rgba(15,21,18,.05), 0 32px 72px -26px rgba(15,21,18,.3);

  --fd: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --fs: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --wrap: 1200px;
  --pad:  clamp(20px, 5vw, 44px);
  --sec:  clamp(72px, 10vw, 140px);
  --r:    12px;
  --r-lg: 20px;
  --e:    cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--fs); font-size:16px; line-height:1.66; letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden;
}
img,svg{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
ul,ol{ list-style:none }
button,input,select,textarea{ font:inherit; color:inherit }
::selection{ background:var(--acid); color:var(--ink) }
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad) }

h1,h2,h3,h4{ font-family:var(--fd); font-weight:700; line-height:1.05; letter-spacing:-.035em }

/* marcador de destaque — a assinatura tipográfica deste projeto */
mark{ background:linear-gradient(transparent 56%, var(--acid) 56%, var(--acid) 94%, transparent 94%);
  color:inherit; padding:0 .06em }

.grain{ position:fixed; inset:0; z-index:800; pointer-events:none; opacity:.045; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E") }

/* ─────────── etiqueta ─────────── */
.tag{ display:inline-flex; align-items:center; gap:9px; font-size:11.5px; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:var(--em); margin-bottom:20px }
.tag span{ width:7px; height:7px; border-radius:2px; background:var(--acid);
  border:1px solid var(--em); flex:none }
.tag--lt{ color:var(--acid) }
.tag--lt span{ border-color:var(--acid) }

.sec{ padding-block:var(--sec) }
.sec--soft{ background:var(--paper-2) }
.sec--ink{ background:var(--ink); color:var(--paper) }
.sec--top{ padding-top:clamp(40px,5vw,60px) }
.sec__hd{ max-width:720px; margin-bottom:clamp(42px,5.5vw,68px) }
.sec__hd--c{ margin-inline:auto; text-align:center }
.sec__hd--c .tag{ justify-content:center }
.sec__hd--split{ display:flex; align-items:flex-end; justify-content:space-between;
  gap:28px; max-width:none; flex-wrap:wrap }
.sec__hd h2{ font-size:clamp(30px,4.6vw,54px) }
.link-all{ display:inline-flex; align-items:center; gap:8px; font-size:14.5px; font-weight:600;
  color:var(--em); border-bottom:1.5px solid rgba(11,122,87,.3); padding-bottom:3px;
  transition:gap .35s var(--e), border-color .3s ease; white-space:nowrap }
.link-all:hover{ gap:13px; border-bottom-color:var(--em) }

/* ─────────── header ─────────── */
.hd{ position:fixed; top:0; left:0; right:0; z-index:900; padding-block:16px;
  border-bottom:1px solid transparent; transition:background .35s ease, border-color .35s ease, padding .35s var(--e) }
.hd.stuck{ background:rgba(247,248,245,.88); backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%); border-bottom-color:var(--line); padding-block:11px }
.hd__row{ display:flex; align-items:center; justify-content:space-between; gap:22px }
.brand{ display:inline-flex; align-items:center; gap:11px; flex:none }
.brand svg{ transition:transform .5s var(--e) }
.brand:hover svg{ transform:rotate(-6deg) }
.brand__txt{ display:flex; flex-direction:column; line-height:1;
  font-family:var(--fd); font-size:19px; font-weight:700; letter-spacing:-.035em }
.brand__txt small{ font-family:var(--fs); font-size:9.5px; font-weight:500; letter-spacing:.19em;
  text-transform:uppercase; color:var(--ink-3); margin-top:3px }

.nav{ display:flex; align-items:center; gap:2px }
.nav a{ position:relative; padding:8px 13px; font-size:14.5px; color:var(--ink-2); transition:color .3s ease }
.nav a::after{ content:''; position:absolute; left:13px; right:13px; bottom:3px; height:6px;
  background:var(--acid); z-index:-1; transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--e) }
.nav a:hover{ color:var(--ink) }
.nav a:hover::after,.nav a.on::after{ transform:scaleX(1) }
.nav a.on{ color:var(--ink); font-weight:500 }
.hd__cta{ display:flex; align-items:center; gap:12px; flex:none }
.burger{ display:none; width:40px; height:40px; border:1px solid var(--line-2); border-radius:10px;
  background:none; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px }
.burger i{ width:16px; height:1.5px; background:var(--ink); transition:transform .4s var(--e) }
.burger[aria-expanded="true"] i:nth-child(1){ transform:translateY(3.2px) rotate(45deg) }
.burger[aria-expanded="true"] i:nth-child(2){ transform:translateY(-3.2px) rotate(-45deg) }

/* ─────────── botões ─────────── */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:13px 25px;
  border-radius:100px; font-size:14.5px; font-weight:600; border:1.5px solid transparent;
  cursor:pointer; white-space:nowrap;
  transition:background .3s ease, color .3s ease, border-color .3s ease, transform .4s var(--e), box-shadow .4s var(--e) }
.btn svg{ transition:transform .4s var(--e) }
.btn:hover svg{ transform:translateX(4px) }
.btn--sm{ padding:10px 18px; font-size:13.5px }
.btn--lg{ padding:16px 30px; font-size:15.5px }
.btn--block{ width:100% }
.btn--solid{ background:var(--em); color:var(--paper); box-shadow:0 6px 18px -8px rgba(11,122,87,.6) }
.btn--solid:hover{ background:var(--em-dk); transform:translateY(-2px); box-shadow:0 14px 30px -12px rgba(11,122,87,.7) }
.btn--ghost{ border-color:var(--line-2); color:var(--ink) }
.btn--ghost:hover{ border-color:var(--em); color:var(--em); background:rgba(11,122,87,.05); transform:translateY(-2px) }

/* ─────────── hero ─────────── */
.hero{ position:relative; padding-block:clamp(112px,15vh,178px) clamp(66px,8vw,104px); overflow:hidden }
.hero__mesh{ position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(560px circle at 82% 12%, rgba(22,169,122,.16), transparent 62%),
    radial-gradient(420px circle at 96% 62%, rgba(207,242,91,.28), transparent 66%) }
.hero__in{ position:relative; display:grid; grid-template-columns:1.04fr .96fr;
  gap:clamp(34px,4.5vw,64px); align-items:center }
.lines{ font-size:clamp(42px,6.8vw,86px); line-height:.98; letter-spacing:-.05em; margin-bottom:26px }
.lines > span{ display:block; overflow:hidden; padding-bottom:.08em }
.lines .ln{ display:block; transform:translateY(108%); transition:transform 1.05s var(--e) }
.lines.in .ln{ transform:none }
.lines > span:nth-child(1) .ln{ transition-delay:.06s }
.lines > span:nth-child(2) .ln{ transition-delay:.17s }
.lines > span:nth-child(3) .ln{ transition-delay:.28s }
.hero__sub{ font-size:clamp(16px,1.5vw,18.5px); color:var(--ink-2); max-width:46ch; margin-bottom:34px }
.hero__act{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:38px }
.hero__pts{ display:flex; flex-wrap:wrap; gap:10px }
.hero__pts li{ font-size:13px; color:var(--ink-2); background:var(--white);
  border:1px solid var(--line); border-radius:100px; padding:7px 15px; box-shadow:var(--sh-1) }
.hero__pts b{ color:var(--ink); font-weight:600 }

/* painel de conciliação */
/* o padding reserva as faixas onde os chips flutuam, para nao cobrirem o painel */
.hero__panel{ position:relative; padding:46px 26px 54px 22px }
.panel{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:24px 26px 22px; box-shadow:var(--sh-3) }
.panel__hd{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-bottom:16px; margin-bottom:14px; border-bottom:1px solid var(--line) }
.panel__t{ font-family:var(--fd); font-size:15px; font-weight:700; letter-spacing:-.02em }
.panel__mp{ font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--em); background:rgba(11,122,87,.09); padding:4px 10px; border-radius:100px }
.panel__row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding-block:7px; font-size:13.5px; color:var(--ink-2) }
.panel__row b{ font-family:var(--fd); font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums }
.panel__row.is-neg b{ color:#C0453C }
.panel__total{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin-top:14px; padding-top:16px; border-top:2px solid var(--ink) }
.panel__total span{ font-size:13px; font-weight:600; color:var(--ink-2); flex:1 }
.panel__total b{ font-family:var(--fd); font-size:27px; font-weight:700; letter-spacing:-.035em;
  background:linear-gradient(transparent 58%, var(--acid) 58%) }
.panel__total small{ width:100%; font-size:11.5px; color:var(--ink-3) }
.panel__bar{ height:6px; border-radius:6px; background:var(--paper-3); margin-top:14px; overflow:hidden }
.panel__bar i{ display:block; height:100%; border-radius:6px; background:var(--em);
  animation:barIn 1.3s var(--e) backwards .6s }
@keyframes barIn{ from{ width:0 } }

.pchip{ position:absolute; display:flex; align-items:center; gap:10px; padding:12px 16px;
  background:var(--white); border:1px solid var(--line); border-radius:14px; box-shadow:var(--sh-2);
  animation:bob 6.5s ease-in-out infinite }
.pchip b{ display:block; font-family:var(--fd); font-size:17px; font-weight:700; letter-spacing:-.03em; line-height:1.1 }
.pchip small{ font-size:11px; color:var(--ink-3) }
.pchip--a{ left:-16px; top:0 }
.pchip--b{ right:-12px; bottom:0; color:var(--em); animation-delay:1.4s }
.pchip--b b{ color:var(--ink) }
@keyframes bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-9px) } }

/* ─────────── ticker ─────────── */
.ticker{ background:var(--ink); color:var(--paper); padding-block:14px; overflow:hidden }
.ticker__t{ display:flex; align-items:center; gap:22px; width:max-content; animation:scrollx 40s linear infinite }
.ticker span{ font-family:var(--fd); font-size:15px; font-weight:600; letter-spacing:-.02em; white-space:nowrap }
.ticker i{ color:var(--acid); font-style:normal }
@keyframes scrollx{ to{ transform:translateX(-50%) } }

/* ─────────── números ─────────── */
.stats__in{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:clamp(22px,3vw,40px); padding-block:clamp(44px,5.5vw,64px); border-bottom:1px solid var(--line) }
.stat b{ display:block; font-family:var(--fd); font-size:clamp(34px,4.6vw,52px); font-weight:700;
  color:var(--em); line-height:1; letter-spacing:-.05em; margin-bottom:9px }
.stat span{ font-size:13.5px; color:var(--ink-2); max-width:22ch; line-height:1.5 }

/* ─────────── serviços ─────────── */
.svc{ display:grid; grid-template-columns:repeat(auto-fit,minmax(298px,1fr)); gap:clamp(13px,1.5vw,18px) }
.svc__i{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(26px,3vw,34px); box-shadow:var(--sh-1);
  transition:transform .5s var(--e), box-shadow .5s var(--e) }
.svc__i:hover{ transform:translateY(-6px); box-shadow:var(--sh-3) }
.svc__n{ display:inline-block; font-family:var(--fd); font-size:11.5px; font-weight:700;
  letter-spacing:.06em; color:var(--em); background:var(--acid); padding:3px 9px;
  border-radius:5px; margin-bottom:18px }
.svc__i h3{ font-size:21px; margin-bottom:11px }
.svc__i p{ font-size:14.5px; color:var(--ink-2) }

/* ─────────── público ─────────── */
.pub{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(34px,5vw,70px); align-items:start }
.pub__copy h2{ font-size:clamp(30px,4.2vw,50px); color:var(--paper); margin-bottom:22px }
.pub__copy p{ font-size:16px; color:rgba(247,248,245,.66); max-width:40ch }
.pub__list{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.pub__list li{ background:rgba(247,248,245,.05); border:1px solid rgba(247,248,245,.13);
  border-radius:var(--r); padding:20px; transition:background .35s ease, transform .5s var(--e) }
.pub__list li:hover{ background:rgba(247,248,245,.09); transform:translateY(-4px) }
.pub__list b{ display:block; font-family:var(--fd); font-size:15px; font-weight:700; margin-bottom:5px }
.pub__list span{ display:block; font-size:12.5px; color:rgba(247,248,245,.55); line-height:1.55 }

/* ─────────── capas geradas ─────────── */
.feat__cover--1,.card__cover,.bigpost__cover{ position:relative; overflow:hidden }
.feat__cover--1{ background:linear-gradient(135deg,#0B7A57,#16A97A 55%,#CFF25B) }
.card__cover.c1{ background:linear-gradient(140deg,#0F1512,#0B7A57) }
.card__cover.c2{ background:linear-gradient(140deg,#16A97A,#CFF25B) }
.card__cover.c3{ background:linear-gradient(140deg,#06553C,#16A97A) }
.card__cover.c4{ background:linear-gradient(140deg,#CFF25B,#16A97A) }
.card__cover.c5{ background:linear-gradient(140deg,#0B7A57,#0F1512) }
.card__cover.c6{ background:linear-gradient(140deg,#16A97A,#06553C) }
.card__cover.c7{ background:linear-gradient(140deg,#0F1512,#16A97A) }
.card__cover.c8{ background:linear-gradient(140deg,#CFF25B,#0B7A57) }
.card__cover.c9{ background:linear-gradient(140deg,#06553C,#CFF25B) }
.feat__cover--1::after,.card__cover::after,.bigpost__cover::after{
  content:''; position:absolute; inset:0; opacity:.5;
  background-image:repeating-linear-gradient(115deg, rgba(255,255,255,.14) 0 1px, transparent 1px 22px) }

.cat{ position:absolute; top:16px; left:16px; z-index:2; font-size:10.5px; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; background:var(--paper); color:var(--ink);
  padding:5px 11px; border-radius:100px }
.cat--sm{ top:12px; left:12px; font-size:9.5px; padding:4px 9px }

.post__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:7px;
  font-size:12px; color:var(--ink-3) }

/* ─────────── destaque de conteúdo (home) ─────────── */
.feat{ display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(18px,2.4vw,28px); align-items:stretch }
.feat__main{ display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-1);
  transition:transform .5s var(--e), box-shadow .5s var(--e) }
.feat__main:hover{ transform:translateY(-6px); box-shadow:var(--sh-3) }
.feat__cover--1{ aspect-ratio:16/8 }
.feat__body{ padding:clamp(24px,2.8vw,32px) }
.feat__body h3{ font-size:clamp(22px,2.6vw,30px); margin:12px 0 12px }
.feat__body p{ font-size:14.5px; color:var(--ink-2); margin-bottom:20px }
.feat__go{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--em) }
.feat__main:hover .feat__go svg{ transform:translateX(4px) }
.feat__go svg{ transition:transform .4s var(--e) }
.feat__side{ display:flex; flex-direction:column; gap:12px }
.post{ flex:1; display:flex; flex-direction:column; justify-content:center;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:22px 24px; box-shadow:var(--sh-1);
  transition:transform .45s var(--e), box-shadow .45s var(--e) }
.post:hover{ transform:translateX(5px); box-shadow:var(--sh-2) }
.post .cat--sm{ position:static; display:inline-block; align-self:flex-start; margin-bottom:10px;
  background:var(--acid); color:var(--ink) }
.post h4{ font-size:17px; line-height:1.24; margin-bottom:10px }

/* ─────────── fluxo (método) ─────────── */
.flow{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:clamp(16px,2vw,24px) }
.flow__i{ position:relative; padding-top:26px; border-top:2px solid var(--ink) }
.flow__n{ display:inline-block; font-family:var(--fd); font-size:12px; font-weight:700;
  color:var(--em); margin-bottom:12px }
.flow__i h3{ font-size:21px; margin-bottom:10px }
.flow__i p{ font-size:14px; color:var(--ink-2) }

/* ─────────── depoimentos ─────────── */
.quotes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(286px,1fr)); gap:clamp(16px,2vw,24px) }
.q{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(26px,3vw,34px); box-shadow:var(--sh-1);
  transition:transform .5s var(--e), box-shadow .5s var(--e) }
.q:hover{ transform:translateY(-6px); box-shadow:var(--sh-2) }
.q blockquote{ font-size:15.5px; line-height:1.7; color:var(--ink-2); margin-bottom:22px; border:0; padding:0 }
.q blockquote::before{ content:''; display:block; width:30px; height:4px; border-radius:4px;
  background:var(--acid); margin-bottom:18px }
.q figcaption{ display:flex; align-items:center; gap:12px; padding-top:18px; border-top:1px solid var(--line) }
.q__ph{ width:40px; height:40px; border-radius:11px; flex:none; display:grid; place-content:center;
  background:var(--acid); color:var(--em-dk); font-family:var(--fd); font-size:14px; font-weight:700 }
.q figcaption b{ display:block; font-size:14.5px; font-weight:600 }
.q figcaption small{ font-size:12px; color:var(--ink-3) }

/* ─────────── newsletter ─────────── */
.news{ background:var(--ink); color:var(--paper); padding-block:clamp(56px,7vw,90px) }
.news__in{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,4vw,56px); align-items:center }
.news h2{ font-size:clamp(26px,3.4vw,40px); color:var(--paper) }
.news__sub{ font-size:15px; color:rgba(247,248,245,.6); margin-top:14px; max-width:44ch }
.news__form{ display:flex; gap:10px; flex-wrap:wrap; position:relative }
.news__form input{ flex:1; min-width:210px; padding:15px 18px; border-radius:100px;
  border:1.5px solid rgba(247,248,245,.22); background:rgba(247,248,245,.06);
  color:var(--paper); font-size:14.5px; transition:border-color .3s ease }
.news__form input::placeholder{ color:rgba(247,248,245,.4) }
.news__form input:focus{ outline:none; border-color:var(--acid) }
.news__ok{ width:100%; font-size:12.5px; color:var(--acid) }

/* ─────────── contato ─────────── */
.cta{ padding-block:var(--sec); background:var(--em-dk); color:var(--paper) }
.cta__in{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(34px,5vw,68px); align-items:start }
.cta h2{ font-size:clamp(30px,4.2vw,50px); color:var(--paper); margin-bottom:22px }
.cta__copy > p{ font-size:16px; color:rgba(247,248,245,.72); max-width:44ch }
.cta__info{ display:flex; flex-direction:column; gap:18px; margin-top:36px; padding-top:28px;
  border-top:1px solid rgba(247,248,245,.18) }
.cta__info span{ display:block; font-size:11px; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:rgba(247,248,245,.45); margin-bottom:4px }
.cta__info b{ font-family:var(--fd); font-size:17px; font-weight:600 }
.cta__note{ margin-top:22px; font-size:12px; color:rgba(247,248,245,.4) }

.form{ background:var(--white); color:var(--ink); border-radius:var(--r-lg);
  padding:clamp(26px,3vw,36px); box-shadow:var(--sh-3) }
.form__row{ margin-bottom:16px }
.form label{ display:block; font-size:11.5px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:8px }
.form input,.form select{ width:100%; padding:13px 15px; border:1.5px solid var(--line-2);
  border-radius:11px; background:var(--paper); font-size:14.5px;
  transition:border-color .3s ease, box-shadow .3s ease }
.form input::placeholder{ color:var(--ink-3) }
.form input:focus,.form select:focus{ outline:none; border-color:var(--em);
  box-shadow:0 0 0 3px rgba(11,122,87,.12) }
.form__ok{ margin-top:13px; font-size:13px; color:var(--em); text-align:center }

/* ═══════════ BLOG — LISTAGEM ═══════════ */
.bloghero{ padding-block:clamp(112px,14vh,160px) clamp(30px,4vw,46px) }
.bloghero h1{ font-size:clamp(38px,6vw,74px); letter-spacing:-.05em; margin-bottom:20px }
.bloghero__sub{ font-size:clamp(15.5px,1.5vw,18px); color:var(--ink-2); max-width:52ch }

.filters{ position:sticky; top:58px; z-index:600; background:rgba(247,248,245,.9);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-block:1px solid var(--line) }
.filters__in{ display:flex; gap:9px; overflow-x:auto; padding-block:14px; scrollbar-width:none }
.filters__in::-webkit-scrollbar{ display:none }
.chipf{ display:inline-flex; align-items:center; gap:7px; padding:8px 15px; border-radius:100px;
  border:1.5px solid var(--line-2); background:transparent; font-size:13.5px; font-weight:500;
  white-space:nowrap; cursor:pointer; transition:all .3s ease }
.chipf b{ font-size:11px; font-weight:700; color:var(--ink-3) }
.chipf:hover{ border-color:var(--em); color:var(--em) }
.chipf.is-on{ background:var(--ink); border-color:var(--ink); color:var(--paper) }
.chipf.is-on b{ color:var(--acid) }

.bigpost{ display:grid; grid-template-columns:1fr 1fr; gap:0; background:var(--white);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--sh-1); margin-bottom:clamp(28px,3.4vw,44px);
  transition:transform .5s var(--e), box-shadow .5s var(--e) }
.bigpost:hover{ transform:translateY(-5px); box-shadow:var(--sh-3) }
.bigpost__cover{ background:linear-gradient(135deg,#0B7A57,#16A97A 55%,#CFF25B); min-height:300px }
.bigpost__body{ padding:clamp(28px,3.4vw,44px); display:flex; flex-direction:column; justify-content:center }
.bigpost__flag{ display:inline-block; align-self:flex-start; font-size:10.5px; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; background:var(--acid); color:var(--ink);
  padding:5px 11px; border-radius:100px; margin-bottom:16px }
.bigpost h2{ font-size:clamp(24px,3vw,38px); margin-bottom:14px }
.bigpost p{ font-size:15px; color:var(--ink-2); margin-bottom:20px }

.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(292px,1fr)); gap:clamp(16px,2vw,24px) }
.card{ display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-1);
  transition:transform .5s var(--e), box-shadow .5s var(--e) }
.card:hover{ transform:translateY(-6px); box-shadow:var(--sh-2) }
.card__cover{ aspect-ratio:16/9 }
.card h3{ font-size:18px; line-height:1.24; margin:20px 22px 10px }
.card p{ font-size:13.5px; color:var(--ink-2); margin:0 22px 16px }
.card .post__meta{ margin:auto 22px 22px }
.card[hidden]{ display:none }
.empty{ text-align:center; color:var(--ink-3); padding-block:60px; font-size:15px }

.pager{ display:flex; justify-content:center; gap:9px; margin-top:clamp(36px,4.5vw,56px) }
.pager__b{ min-width:42px; height:42px; padding-inline:15px; border-radius:100px;
  border:1.5px solid var(--line-2); background:transparent; font-size:14px; font-weight:600;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  transition:all .3s ease }
.pager__b:hover{ border-color:var(--em); color:var(--em) }
.pager__b.is-on{ background:var(--ink); border-color:var(--ink); color:var(--paper) }

/* ═══════════ ARTIGO ═══════════ */
.readbar{ position:fixed; top:0; left:0; right:0; height:3px; z-index:950; background:transparent }
.readbar i{ display:block; height:100%; width:0%; background:var(--acid) }

.ahead{ padding-top:clamp(104px,13vh,140px) }
.ahead__in{ max-width:820px }
.crumb{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:12.5px;
  color:var(--ink-3); margin-bottom:22px }
.crumb a:hover{ color:var(--em) }
.crumb b{ color:var(--ink-2); font-weight:500 }
.ahead .cat{ position:static; display:inline-block; background:var(--acid); color:var(--ink); margin-bottom:18px }
.ahead h1{ font-size:clamp(32px,5.2vw,60px); letter-spacing:-.045em; margin-bottom:20px }
.ahead__sub{ font-size:clamp(16px,1.6vw,19.5px); color:var(--ink-2); line-height:1.62; max-width:58ch }
.ahead__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:28px;
  font-size:13px; color:var(--ink-3) }
.ahead__dot{ width:3px; height:3px; border-radius:50%; background:var(--ink-3) }
.author{ display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap }
.author b{ font-size:13.5px; font-weight:600; color:var(--ink) }
.author small{ font-size:12px; color:var(--ink-3) }
.author__ph{ width:38px; height:38px; border-radius:11px; display:grid; place-content:center;
  background:var(--acid); color:var(--em-dk); font-family:var(--fd); font-size:13px; font-weight:700 }
.author__ph--lg{ width:58px; height:58px; font-size:19px; border-radius:15px; flex:none }
.ahead__cover{ aspect-ratio:21/8; border-radius:var(--r-lg); margin-top:clamp(32px,4vw,52px) }

.article{ display:grid; grid-template-columns:250px minmax(0,1fr); gap:clamp(32px,5vw,72px);
  padding-block:clamp(44px,6vw,76px) }
.toc{ position:sticky; top:96px; align-self:start }
.toc__t{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:16px }
.toc nav{ display:flex; flex-direction:column; border-left:2px solid var(--line) }
.toc nav a{ padding:9px 0 9px 16px; margin-left:-2px; font-size:13.5px; color:var(--ink-2);
  border-left:2px solid transparent; transition:all .3s ease }
.toc nav a:hover{ color:var(--ink) }
.toc nav a.on{ color:var(--em); font-weight:600; border-left-color:var(--em) }
.toc__cta{ margin-top:30px; padding:20px; border-radius:var(--r); background:var(--paper-2);
  border:1px solid var(--line) }
.toc__cta p{ font-size:13.5px; color:var(--ink-2); margin-bottom:14px; line-height:1.5 }

.body{ max-width:720px }
.body > * + *{ margin-top:22px }
.body p{ font-size:17px; line-height:1.78; color:var(--ink-2) }
.body p strong{ color:var(--ink); font-weight:600 }
.body .lead{ font-size:20px; line-height:1.65; color:var(--ink) }
.body h2{ font-size:clamp(24px,2.8vw,32px); margin-top:52px; scroll-margin-top:100px }
.body h3{ font-size:20px; margin-top:36px }
.body em{ font-style:italic }

.notice{ padding:16px 20px; border-radius:var(--r); background:rgba(207,242,91,.22);
  border:1px solid rgba(11,122,87,.22); font-size:13.5px; color:var(--ink-2); line-height:1.6 }
.notice b{ color:var(--ink) }

.callout{ padding:24px 26px; border-radius:var(--r-lg); background:var(--ink); color:var(--paper) }
.callout__k{ display:block; font-size:10.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--acid); margin-bottom:10px }
.callout p{ font-size:16px; color:rgba(247,248,245,.86); line-height:1.65 }

.calc{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--white) }
.calc__l{ display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:13px 20px; border-top:1px solid var(--line); font-size:14.5px; color:var(--ink-2) }
.calc__l:first-child{ border-top:0 }
.calc__l b{ font-family:var(--fd); font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums }
.calc__l.is-total{ background:var(--paper-2); border-top:2px solid var(--ink) }
.calc__l.is-total span{ font-weight:600; color:var(--ink) }
.calc__l.is-total b{ font-size:19px; background:linear-gradient(transparent 58%, var(--acid) 58%) }

.tablewrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--white) }
.body table{ width:100%; border-collapse:collapse; min-width:480px }
.body th,.body td{ padding:13px 18px; text-align:left; font-size:14px; border-top:1px solid var(--line) }
.body th{ font-family:var(--fd); font-size:12px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-3); border-top:0; background:var(--paper-2) }
.body td{ color:var(--ink-2); font-variant-numeric:tabular-nums }
.body td.up{ color:#C0453C; font-weight:600 }
.cap{ font-size:12.5px!important; color:var(--ink-3)!important; margin-top:12px!important }

.steps-list{ counter-reset:s; display:flex; flex-direction:column; gap:14px }
.steps-list li{ counter-increment:s; position:relative; padding-left:44px; font-size:16px;
  color:var(--ink-2); line-height:1.7 }
.steps-list li::before{ content:counter(s); position:absolute; left:0; top:2px; width:29px; height:29px;
  border-radius:9px; background:var(--acid); color:var(--em-dk); display:grid; place-content:center;
  font-family:var(--fd); font-size:13px; font-weight:700 }
.steps-list b{ color:var(--ink); font-weight:600 }

.body blockquote{ border-left:3px solid var(--em); padding:6px 0 6px 24px;
  font-family:var(--fd); font-size:20px; font-weight:500; line-height:1.5;
  letter-spacing:-.025em; color:var(--ink) }

.check{ display:flex; flex-direction:column; gap:12px }
.check li{ position:relative; padding-left:32px; font-size:16px; color:var(--ink-2); line-height:1.65 }
.check li::before{ content:''; position:absolute; left:0; top:6px; width:18px; height:18px;
  border-radius:6px; border:1.5px solid var(--em); background:rgba(207,242,91,.35) }
.check li::after{ content:''; position:absolute; left:5.5px; top:11px; width:8px; height:4.5px;
  border-left:2px solid var(--em); border-bottom:2px solid var(--em); transform:rotate(-45deg) }

.share{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:52px!important;
  padding-top:26px; border-top:1px solid var(--line) }
.share span{ font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); margin-right:4px }
.share button{ padding:9px 16px; border-radius:100px; border:1.5px solid var(--line-2);
  background:transparent; font-size:13.5px; font-weight:500; cursor:pointer; transition:all .3s ease }
.share button:hover{ border-color:var(--em); color:var(--em); background:rgba(11,122,87,.05) }

.authorbox{ display:flex; gap:18px; align-items:flex-start; padding:26px;
  border-radius:var(--r-lg); background:var(--paper-2); border:1px solid var(--line); margin-top:36px!important }
.authorbox b{ display:block; font-family:var(--fd); font-size:16px; font-weight:700; margin-bottom:6px }
.authorbox small{ font-size:14px; color:var(--ink-2); line-height:1.6 }

/* ─────────── assinatura Empusites ─────────── */
.sig{ position:fixed; right:22px; bottom:22px; z-index:850; display:flex; align-items:center;
  gap:11px; padding:9px 15px 9px 9px; border-radius:100px; background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line-2); box-shadow:var(--sh-2);
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .6s var(--e), transform .6s var(--e), padding .5s var(--e), box-shadow .5s var(--e) }
.sig.show{ opacity:1; transform:none; pointer-events:auto }
.sig:hover{ padding-right:21px; box-shadow:var(--sh-3) }
.sig__mark{ width:31px; height:31px; border-radius:9px; background:var(--ink); color:var(--paper);
  display:grid; place-content:center; font-family:var(--fd); font-size:16px; font-weight:700; flex:none }
.sig__id{ display:flex; flex-direction:column; line-height:1.06 }
.sig__id small{ font-size:8.5px; font-weight:700; letter-spacing:.17em; text-transform:uppercase; color:var(--ink-3) }
.sig__id b{ font-family:var(--fd); font-size:14px; font-weight:700; letter-spacing:-.03em }
.sig__cta{ display:inline-flex; align-items:center; gap:6px; max-width:0; overflow:hidden;
  white-space:nowrap; font-size:13px; font-weight:600; color:var(--em);
  transition:max-width .55s var(--e), margin-left .55s var(--e) }
.sig:hover .sig__cta{ max-width:210px; margin-left:5px }

/* ─────────── rodapé ─────────── */
.ft{ background:var(--ink); color:var(--paper); padding-block:clamp(48px,6vw,72px) 24px; overflow:hidden }
.ft__in{ display:grid; grid-template-columns:1.1fr 1.3fr; gap:clamp(30px,5vw,58px);
  padding-bottom:36px; border-bottom:1px solid rgba(247,248,245,.13) }
.ft .brand__txt small{ color:rgba(247,248,245,.45) }
.ft__brand p{ font-size:13.5px; color:rgba(247,248,245,.6); max-width:34ch; margin-top:16px }
.ft__nav{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px }
.ft__nav h4{ font-family:var(--fs); font-size:10.5px; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--acid); margin-bottom:14px }
.ft__nav a{ display:block; font-size:13.5px; color:rgba(247,248,245,.64); padding-block:5px;
  transition:color .3s ease, transform .35s var(--e) }
.ft__nav a:hover{ color:var(--paper); transform:translateX(3px) }
.ft__word{ font-family:var(--fd); font-size:clamp(88px,21vw,270px); font-weight:700; line-height:.8;
  text-align:center; color:transparent; -webkit-text-stroke:1px rgba(247,248,245,.15);
  letter-spacing:-.06em; margin-top:clamp(34px,5vw,60px); user-select:none }
.ft__bot{ display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; padding-top:22px;
  margin-top:clamp(22px,4vw,40px); border-top:1px solid rgba(247,248,245,.1);
  font-size:12px; color:rgba(247,248,245,.45) }
.ft__bot a{ color:var(--acid); border-bottom:1px solid rgba(207,242,91,.35) }

/* ─────────── reveal ─────────── */
.rv{ opacity:0; transform:translateY(20px); transition:opacity .8s var(--e), transform .8s var(--e) }
.rv.in{ opacity:1; transform:none }
.rv[data-d="1"]{ transition-delay:.09s } .rv[data-d="2"]{ transition-delay:.18s }
.rv[data-d="3"]{ transition-delay:.27s } .rv[data-d="4"]{ transition-delay:.36s }
.rv[data-d="5"]{ transition-delay:.45s }

/* ─────────── responsivo ─────────── */
@media (max-width:1040px){
  .hero__in,.pub,.cta__in,.news__in,.feat,.bigpost{ grid-template-columns:1fr }
  .hero__panel{ max-width:520px; margin-inline:auto }
  .article{ grid-template-columns:1fr }
  .toc{ position:static; border-bottom:1px solid var(--line); padding-bottom:24px }
  .toc nav{ flex-direction:row; flex-wrap:wrap; border-left:0; gap:8px }
  .toc nav a{ padding:7px 13px; margin-left:0; border:1px solid var(--line-2); border-radius:100px; font-size:12.5px }
  .toc nav a.on{ border-color:var(--em); background:rgba(11,122,87,.07) }
  .toc__cta{ display:none }
  .bigpost__cover{ min-height:200px }
}
@media (max-width:860px){
  .nav{ position:fixed; inset:0 0 auto; top:62px; flex-direction:column; align-items:stretch;
    gap:0; padding:12px var(--pad) 22px; background:var(--paper); border-bottom:1px solid var(--line);
    transform:translateY(-140%); transition:transform .5s var(--e); z-index:-1 }
  .nav.open{ transform:none }
  .nav a{ padding:14px 2px; font-size:16px; border-bottom:1px solid var(--line) }
  .nav a::after{ display:none }
  .burger{ display:flex }
  .hd__cta .btn{ display:none }
  .ft__in{ grid-template-columns:1fr }
  .ft__nav{ grid-template-columns:1fr 1fr }
  .filters{ top:54px }
}
@media (max-width:620px){
  .sig{ right:14px; bottom:14px; padding:8px 13px 8px 8px }
  .sig:hover .sig__cta{ max-width:0; margin-left:0 }
  .pub__list{ grid-template-columns:1fr }
  .hero__act .btn{ width:100% }
  .pchip--a{ left:-6px } .pchip--b{ right:-4px }
  .news__form input{ min-width:100% }
  .body .lead{ font-size:18px }
  .body p{ font-size:16px }
}

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

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important }
  .rv{ opacity:1; transform:none }
  .lines .ln{ transform:none }
}