/* ═══════════════════════════════════════════════════════════
   VÉRTICE CONTABILIDADE — projeto conceito Empusites
   Claro editorial · petróleo + areia + terracota
   Fraunces + DM Sans
   ═══════════════════════════════════════════════════════════ */

:root{
  --paper:    #FBFAF7;
  --paper-2:  #F4F1EA;
  --paper-3:  #EDE8DD;
  --sand:     #E9E0D1;
  --sand-dp:  #D6C7AC;

  --ink:      #0E2B2D;
  --ink-2:    rgba(14,43,45,.66);
  --ink-3:    rgba(14,43,45,.42);

  --petrol:   #12565C;
  --petrol-dk:#092F33;
  --petrol-lt:#3A868C;
  --terra:    #C46A45;
  --terra-lt: #E0A183;

  --line:     rgba(14,43,45,.10);
  --line-2:   rgba(14,43,45,.19);

  --sh-1: 0 1px 2px rgba(14,43,45,.04), 0 6px 16px -8px rgba(14,43,45,.10);
  --sh-2: 0 2px 4px rgba(14,43,45,.04), 0 14px 34px -12px rgba(14,43,45,.16);
  --sh-3: 0 4px 8px rgba(14,43,45,.05), 0 30px 70px -24px rgba(14,43,45,.28);

  --fd: 'Fraunces', Georgia, 'Times New Roman', serif;
  --fs: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --wrap: 1200px;
  --pad:  clamp(20px, 5vw, 44px);
  --sec:  clamp(78px, 11vw, 152px);
  --r:    14px;
  --r-lg: 24px;
  --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.68;
  letter-spacing:-.008em;
  -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(--petrol); color:var(--paper) }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad) }

h1,h2,h3{ font-family:var(--fd); font-weight:500; line-height:1.08; letter-spacing:-.024em }
em{ font-style:italic; color:var(--petrol) }

/* ─────────── textura ─────────── */
.grain{
  position:fixed; inset:0; z-index:800; pointer-events:none; opacity:.05; 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");
}

/* ─────────── intro ─────────── */
.intro{
  position:fixed; inset:0; z-index:1200; background:var(--paper);
  display:grid; place-content:center;
  transition:opacity .8s var(--e), visibility .8s;
}
.intro.done{ opacity:0; visibility:hidden }
.intro__mark{
  width:74px; height:74px; border-radius:20px; background:var(--petrol); color:var(--paper);
  display:grid; place-content:center; font-family:var(--fd); font-size:38px; font-weight:600;
  animation:markIn .9s var(--e);
}
@keyframes markIn{ from{ transform:scale(.75); opacity:0 } to{ transform:none; opacity:1 } }

/* ─────────── tipografia auxiliar ─────────── */
.kicker{
  display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.19em;
  text-transform:uppercase; color:var(--petrol); padding-bottom:11px; margin-bottom:20px; position:relative;
}
.kicker::after{ content:''; position:absolute; left:0; bottom:0; width:28px; height:2px; background:var(--terra) }
.kicker--lt{ color:var(--sand) }

.sec{ padding-block:var(--sec) }
.sec--sand{ background:var(--paper-2) }
.sec--deep{ background:var(--petrol-dk); color:var(--paper) }
.sec__hd{ max-width:700px; margin-bottom:clamp(46px,6vw,74px) }
.sec__hd--c{ margin-inline:auto; text-align:center }
.sec__hd--c .kicker::after{ left:50%; transform:translateX(-50%) }
.sec__hd h2{ font-size:clamp(31px,4.6vw,54px) }
.sec__lead{ font-size:16.5px; color:var(--ink-2); margin-top:20px; max-width:52ch }
.sec__hd--c .sec__lead{ margin-inline:auto }
.sec--deep .sec__hd h2{ color:var(--paper) }
.sim .sec__hd h2{ color:var(--paper) }
.sim .sec__lead{ color:rgba(251,250,247,.68) }

/* ─────────── assinatura Empusites (crédito de estúdio) ─────────── */
.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(251,250,247,.93);
  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:17px; font-weight:600; 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-size:14px; font-weight:700; letter-spacing:-.012em }
.sig__cta{ display:inline-flex; align-items:center; gap:6px; max-width:0; overflow:hidden;
  white-space:nowrap; font-size:13px; font-weight:500; color:var(--petrol);
  transition:max-width .55s var(--e), margin-left .55s var(--e) }
.sig:hover .sig__cta{ max-width:210px; margin-left:5px }

/* ─────────── header ─────────── */
.hd{ position:fixed; top:0; left:0; right:0; z-index:900; padding-block:17px;
  border-bottom:1px solid transparent; transition:background .35s ease, border-color .35s ease, padding .35s var(--e) }
.hd.stuck{ background:rgba(251,250,247,.86); 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:12px; flex:none }
.brand svg{ transition:transform .6s var(--e) }
.brand:hover svg{ transform:rotate(-7deg) scale(1.05) }
.brand__txt{ display:flex; flex-direction:column; line-height:1.02;
  font-family:var(--fd); font-size:20px; font-weight:600; letter-spacing:-.022em }
.brand__txt small{ font-family:var(--fs); font-size:9.5px; font-weight:500; letter-spacing:.18em;
  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:1.5px;
  background:var(--terra); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--e) }
.nav a:hover{ color:var(--ink) }
.nav a:hover::after{ transform:scaleX(1) }
.nav a.on{ color:var(--petrol) }

.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:11px;
  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:14px 26px; border-radius:100px; font-size:14.5px; font-weight:500;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:background .3s ease, color .3s ease, border-color .3s ease, transform .45s var(--e), box-shadow .45s var(--e) }
.btn svg{ transition:transform .4s var(--e) }
.btn:hover svg{ transform:rotate(90deg) }
.btn--sm{ padding:10px 19px; font-size:13.5px }
.btn--lg{ padding:17px 32px; font-size:15.5px }
.btn--block{ width:100% }
.btn--solid{ background:var(--petrol); color:var(--paper); box-shadow:0 6px 20px -8px rgba(18,86,92,.55) }
.btn--solid:hover{ background:var(--petrol-dk); transform:translateY(-2px); box-shadow:0 16px 34px -12px rgba(18,86,92,.65) }
.btn--line{ border-color:var(--line-2); color:var(--ink) }
.btn--line:hover{ border-color:var(--petrol); color:var(--petrol); background:rgba(18,86,92,.05); transform:translateY(-2px) }

/* ─────────── hero ─────────── */
.hero{ position:relative; padding-block:clamp(112px,15vh,180px) clamp(74px,9vw,120px); overflow:hidden }
.hero__blob{ position:absolute; top:-320px; right:-220px; width:900px; height:900px; pointer-events:none;
  background:radial-gradient(circle, rgba(18,86,92,.11), rgba(196,106,69,.05) 42%, transparent 68%);
  animation:float 12s ease-in-out infinite }
@keyframes float{ 0%,100%{ transform:translate(0,0) scale(1) } 50%{ transform:translate(-30px,26px) scale(1.06) } }
.hero__in{ position:relative; display:grid; grid-template-columns:1.02fr .98fr;
  gap:clamp(36px,5vw,70px); align-items:center }

.lines{ font-size:clamp(40px,6.4vw,82px); line-height:1.02; letter-spacing:-.034em; margin-bottom:28px }
.lines > span{ display:block; overflow:hidden; padding-bottom:.05em }
.lines .ln{ display:block; font-style:normal; transform:translateY(106%); 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,19px); color:var(--ink-2); max-width:45ch; margin-bottom:36px }
.hero__act{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:40px }
.hero__pts{ display:flex; flex-direction:column; gap:10px }
.hero__pts li{ position:relative; padding-left:26px; font-size:14px; color:var(--ink-2) }
.hero__pts li::before{ content:''; position:absolute; left:0; top:8px; width:12px; height:7px;
  border-left:1.9px solid var(--terra); border-bottom:1.9px solid var(--terra); transform:rotate(-45deg) }

/* composição do hero */
.hero__art{ position:relative }
/* o padding reserva a faixa onde os chips flutuam, para nao cobrirem texto do card */
.art{ position:relative; padding:40px 30px 58px 46px }
.doc{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px 28px 24px; box-shadow:var(--sh-3); transform:rotate(-1.1deg);
  transition:transform .7s var(--e) }
.hero__art:hover .doc{ transform:rotate(0) translateY(-4px) }
.doc__hd{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-bottom:18px; margin-bottom:20px; border-bottom:1px solid var(--line) }
.doc__eyebrow{ font-size:10.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3) }
.doc__badge{ font-size:11px; font-weight:700; color:var(--petrol); background:rgba(18,86,92,.09);
  padding:4px 11px; border-radius:100px }
.doc__label{ font-size:12.5px; color:var(--ink-3); margin-bottom:5px }
.doc__value{ display:block; font-family:var(--fd); font-size:31px; font-weight:600;
  color:var(--petrol); margin-bottom:26px; letter-spacing:-.02em }
.doc__chart{ display:flex; align-items:flex-end; gap:10px; height:124px; margin-bottom:22px }
.doc__chart i{ flex:1; height:var(--h); border-radius:7px 7px 3px 3px;
  background:linear-gradient(180deg,var(--petrol-lt),var(--petrol));
  transform-origin:bottom; animation:grow 1.2s var(--e) backwards }
.doc__chart i:nth-child(1){ animation-delay:.5s } .doc__chart i:nth-child(2){ animation-delay:.6s }
.doc__chart i:nth-child(3){ animation-delay:.7s } .doc__chart i:nth-child(4){ animation-delay:.8s }
.doc__chart i:nth-child(5){ animation-delay:.9s }
.doc__chart i.hi{ animation-delay:1s; background:linear-gradient(180deg,var(--terra-lt),var(--terra)) }
@keyframes grow{ from{ transform:scaleY(0); opacity:0 } to{ transform:scaleY(1); opacity:1 } }
.doc__foot{ display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding-top:18px; border-top:1px solid var(--line); font-size:12.5px; color:var(--ink-2) }
.doc__foot b{ font-family:var(--fd); font-size:20px; font-weight:600; color:var(--terra) }

.chip{ position:absolute; display:flex; align-items:center; gap:11px; padding:13px 17px;
  background:var(--paper); border:1px solid var(--line); border-radius:15px;
  box-shadow:var(--sh-2); animation:bob 6.5s ease-in-out infinite }
.chip strong{ display:block; font-size:14px; font-weight:700; line-height:1.2 }
.chip small{ font-size:11.5px; color:var(--ink-3) }
.chip--a{ left:-4px; bottom:4px }
.chip--b{ right:2px; top:-26px; animation-delay:1.1s }
.chip--b strong{ font-family:var(--fd); font-size:23px; color:var(--petrol) }
/* sobre a area do grafico, nunca sobre o texto */
.chip--c{ left:-26px; top:228px; animation-delay:2.2s; color:var(--petrol) }
.chip--c strong{ color:var(--ink) }
.chip__dot{ width:9px; height:9px; border-radius:50%; background:#2FA36B; flex:none;
  box-shadow:0 0 0 4px rgba(47,163,107,.15) }
@keyframes bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-10px) } }

.scroll-cue{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  width:24px; height:38px; border:1px solid var(--line-2); border-radius:100px;
  display:grid; justify-items:center; padding-top:7px }
.scroll-cue span{ width:3px; height:7px; border-radius:3px; background:var(--terra);
  animation:cue 1.9s var(--e) infinite }
@keyframes cue{ 0%{ opacity:0; transform:translateY(0) } 35%{ opacity:1 } 100%{ opacity:0; transform:translateY(15px) } }

/* ─────────── marquee ─────────── */
.mq{ border-block:1px solid var(--line); background:var(--paper-2); padding-block:18px; overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent) }
.mq__t{ display:flex; align-items:center; gap:26px; width:max-content; animation:scrollx 46s linear infinite }
.mq span{ font-size:16px; color:var(--ink-2); white-space:nowrap }
.mq em{ font-family:var(--fd); font-style:italic; color:var(--petrol); font-size:19px }
.mq i{ color:var(--terra); font-style:normal }
@keyframes scrollx{ to{ transform:translateX(-50%) } }

/* ─────────── números ─────────── */
.stats{ border-bottom:1px solid var(--line) }
.stats__in{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:clamp(24px,3vw,42px); padding-block:clamp(44px,5.5vw,68px) }
.stat{ display:flex; flex-direction:column; gap:8px }
.stat b{ font-family:var(--fd); font-size:clamp(36px,4.8vw,54px); font-weight:600;
  color:var(--petrol); line-height:1; letter-spacing:-.03em }
.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(300px,1fr)); gap:clamp(14px,1.6vw,20px) }
.svc__i{ position:relative; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:clamp(28px,3.2vw,38px); box-shadow:var(--sh-1);
  transition:transform .55s var(--e), box-shadow .55s var(--e), border-color .35s ease }
.svc__i:hover{ transform:translateY(-6px); box-shadow:var(--sh-3); border-color:var(--line-2) }
.svc__n{ display:block; font-size:12px; font-weight:700; letter-spacing:.12em; color:var(--terra); margin-bottom:18px }
.svc__i h3{ font-size:22px; margin-bottom:12px }
.svc__i p{ font-size:14.5px; color:var(--ink-2) }
.svc__go{ position:absolute; right:26px; bottom:26px; width:36px; height:36px; border-radius:50%;
  border:1px solid var(--line); display:grid; place-content:center; color:var(--petrol);
  opacity:0; transform:translateX(-6px); transition:all .5s var(--e) }
.svc__i:hover .svc__go{ opacity:1; transform:none; background:var(--petrol); color:var(--paper); border-color:var(--petrol) }

/* ─────────── simulador ─────────── */
.sim{ background:var(--petrol-dk); color:var(--paper); padding-block:var(--sec) }
.simbox{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,2.6vw,32px); align-items:stretch }
.simbox__ctrl{ background:rgba(251,250,247,.055); border:1px solid rgba(251,250,247,.13);
  border-radius:var(--r-lg); padding:clamp(28px,3.2vw,40px) }
.ctrl{ margin-bottom:32px }
.ctrl__hd{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:16px }
.ctrl label{ font-size:13px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:rgba(251,250,247,.6) }
.ctrl label small{ display:block; font-size:10.5px; font-weight:400; letter-spacing:.04em;
  text-transform:none; color:rgba(251,250,247,.38); margin-top:3px }
.ctrl output{ font-family:var(--fd); font-size:26px; font-weight:600; color:var(--paper); letter-spacing:-.02em }
.ctrl__scale{ display:flex; justify-content:space-between; margin-top:9px;
  font-size:11px; color:rgba(251,250,247,.35) }

input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:5px; border-radius:5px;
  background:rgba(251,250,247,.16); cursor:pointer; outline:none }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none;
  width:22px; height:22px; border-radius:50%; background:var(--terra); border:3px solid var(--petrol-dk);
  box-shadow:0 0 0 1px var(--terra), 0 4px 12px rgba(0,0,0,.4); transition:transform .25s var(--e) }
input[type=range]::-webkit-slider-thumb:hover{ transform:scale(1.16) }
input[type=range]::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:var(--terra);
  border:3px solid var(--petrol-dk); box-shadow:0 0 0 1px var(--terra); cursor:pointer }

.fator{ padding-top:26px; border-top:1px solid rgba(251,250,247,.13) }
.fator__bar{ position:relative; height:6px; border-radius:6px; background:rgba(251,250,247,.14);
  overflow:visible; margin-bottom:16px }
.fator__bar i{ display:block; height:100%; width:0%; border-radius:6px;
  background:linear-gradient(90deg,var(--terra),#5FBF8C); transition:width .35s var(--e) }
.fator__mark{ position:absolute; left:28%; top:-5px; width:1.5px; height:16px; background:rgba(251,250,247,.5) }
.fator__mark::after{ content:'28%'; position:absolute; top:-16px; left:50%; transform:translateX(-50%);
  font-size:9.5px; color:rgba(251,250,247,.5) }
.fator p{ font-size:14.5px; color:rgba(251,250,247,.72); display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.fator p b{ font-family:var(--fd); font-size:20px; color:var(--paper) }
.fator__tag{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  background:var(--terra); color:#fff; padding:4px 11px; border-radius:100px }
.fator__tag.is-good{ background:#2FA36B }
.fator small{ display:block; margin-top:11px; font-size:12.5px; color:rgba(251,250,247,.45); line-height:1.55 }

.simbox__res{ display:flex; flex-direction:column; gap:14px }
.res{ background:rgba(251,250,247,.055); border:1px solid rgba(251,250,247,.13);
  border-radius:var(--r); padding:22px 24px; transition:border-color .4s ease, background .4s ease }
.res.is-best{ border-color:rgba(95,191,140,.55); background:rgba(95,191,140,.09) }
.res__name{ display:block; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(251,250,247,.55); margin-bottom:7px }
.res__val{ display:block; font-family:var(--fd); font-size:clamp(28px,3.4vw,38px); font-weight:600;
  color:var(--paper); line-height:1; letter-spacing:-.025em }
.res__aliq{ display:block; font-size:12.5px; color:rgba(251,250,247,.5); margin-top:8px }
.res__aliq b{ color:var(--sand); font-weight:700 }
.res__bar{ height:5px; border-radius:5px; background:rgba(251,250,247,.12); margin-top:16px; overflow:hidden }
.res__bar i{ display:block; height:100%; width:0%; border-radius:5px; background:var(--sand-dp);
  transition:width .45s var(--e) }
.res.is-best .res__bar i{ background:#5FBF8C }

.verdict{ margin-top:auto; background:var(--paper); color:var(--ink); border-radius:var(--r-lg);
  padding:26px; box-shadow:var(--sh-3) }
.verdict__k{ display:block; font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--terra); margin-bottom:9px }
.verdict strong{ display:block; font-family:var(--fd); font-size:27px; font-weight:600;
  color:var(--petrol); margin-bottom:9px; letter-spacing:-.02em }
.verdict p{ font-size:14px; color:var(--ink-2); margin-bottom:20px }
.verdict p b{ color:var(--terra); font-weight:700 }

.sim__disc{ margin-top:26px; font-size:12px; color:rgba(251,250,247,.4); max-width:70ch; line-height:1.6 }

/* ─────────── público ─────────── */
.pub{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(36px,5vw,74px); align-items:start }
.pub__copy h2{ font-size:clamp(30px,4.2vw,48px); margin-bottom:22px }
.pub__copy p{ font-size:16px; color:var(--ink-2); margin-bottom:30px; max-width:42ch }
.pub__list{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
.pub__list li{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:22px 22px; box-shadow:var(--sh-1); transition:transform .5s var(--e), box-shadow .5s var(--e) }
.pub__list li:hover{ transform:translateY(-4px); box-shadow:var(--sh-2) }
.pub__list b{ display:block; font-size:15px; font-weight:700; margin-bottom:6px }
.pub__list span{ display:block; font-size:13px; color:var(--ink-2); line-height:1.55 }

/* ─────────── método (scrollytelling) ─────────── */
.method{ padding-block:var(--sec); background:var(--paper) }
.method__in{ display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(36px,6vw,88px); align-items:start }
.method__side{ position:sticky; top:112px }
.method__side h2{ font-size:clamp(30px,4.2vw,50px); margin-bottom:18px }
.method__side p{ font-size:15.5px; color:var(--ink-2); max-width:32ch }
.method__prog{ height:3px; border-radius:3px; background:var(--line); margin-top:34px; overflow:hidden }
.method__prog i{ display:block; height:100%; width:0%; border-radius:3px;
  background:linear-gradient(90deg,var(--petrol),var(--terra)); transition:width .2s linear }

.method__list{ display:flex; flex-direction:column; gap:clamp(18px,2.6vw,28px) }
.mstep{ position:relative; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(28px,3.4vw,42px); box-shadow:var(--sh-1); opacity:.4;
  transform:translateY(16px); transition:opacity .7s var(--e), transform .7s var(--e), box-shadow .7s var(--e), border-color .5s ease }
.mstep.on{ opacity:1; transform:none; box-shadow:var(--sh-2); border-color:var(--line-2) }
.mstep__n{ display:inline-block; font-family:var(--fd); font-size:14px; font-weight:600;
  color:var(--paper); background:var(--petrol); padding:5px 13px; border-radius:100px; margin-bottom:18px }
.mstep h3{ font-size:clamp(23px,2.6vw,30px); margin-bottom:12px }
.mstep p{ font-size:15px; color:var(--ink-2); margin-bottom:20px; max-width:52ch }
.mstep ul{ display:flex; flex-wrap:wrap; gap:8px }
.mstep li{ font-size:12.5px; color:var(--petrol); background:rgba(18,86,92,.07);
  border:1px solid rgba(18,86,92,.13); padding:5px 13px; border-radius:100px }

/* ─────────── comparativo ─────────── */
.cmp{ border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-1) }
.cmp__row{ display:grid; grid-template-columns:1.1fr 1.3fr 1.5fr; gap:0; border-top:1px solid var(--line) }
.cmp__row:first-child{ border-top:0 }
.cmp__row > span{ padding:18px 22px; font-size:14px; color:var(--ink-2); display:flex; align-items:center }
.cmp__row > span:first-child{ font-weight:700; color:var(--ink); background:var(--paper-2) }
.cmp__row .is-us{ background:rgba(18,86,92,.055); color:var(--ink); font-weight:500; position:relative }
.cmp__row .is-us::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--petrol) }
.cmp__row--hd > span{ font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); padding-block:14px }
.cmp__row--hd .is-us{ color:var(--petrol) }

/* ─────────── depoimentos ─────────── */
.quotes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(288px,1fr)); gap:clamp(18px,2.4vw,28px) }
.q{ background:rgba(251,250,247,.05); border:1px solid rgba(251,250,247,.13); border-radius:var(--r-lg);
  padding:clamp(28px,3.2vw,36px); transition:background .4s ease, transform .55s var(--e) }
.q:hover{ background:rgba(251,250,247,.09); transform:translateY(-6px) }
.q blockquote{ font-size:15.5px; line-height:1.74; color:rgba(251,250,247,.84); margin-bottom:24px }
.q blockquote::before{ content:'“'; display:block; font-family:var(--fd); font-size:52px;
  color:var(--terra); line-height:.5; margin-bottom:16px }
.q figcaption{ display:flex; align-items:center; gap:13px; padding-top:20px;
  border-top:1px solid rgba(251,250,247,.12) }
.q__ph{ width:42px; height:42px; border-radius:50%; flex:none; display:grid; place-content:center;
  background:linear-gradient(140deg,var(--sand),var(--sand-dp)); color:var(--petrol-dk);
  font-family:var(--fd); font-size:15px; font-weight:600 }
.q figcaption b{ display:block; font-size:14.5px; font-weight:700; color:var(--paper) }
.q figcaption small{ font-size:12px; color:rgba(251,250,247,.5) }

/* ─────────── equipe ─────────── */
.team{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,74px); align-items:center }
.team__copy h2{ font-size:clamp(30px,4.2vw,50px); margin-bottom:22px }
.team__copy p{ font-size:15.5px; color:var(--ink-2); margin-bottom:16px; max-width:44ch }
.team__facts{ display:flex; flex-wrap:wrap; gap:28px; margin-top:32px; padding-top:28px; border-top:1px solid var(--line) }
.team__facts dt{ font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:5px }
.team__facts dd{ font-size:14.5px; font-weight:500 }
.team__grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
.member{ background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px 20px; text-align:center; box-shadow:var(--sh-1);
  transition:transform .55s var(--e), box-shadow .55s var(--e) }
.member:hover{ transform:translateY(-6px); box-shadow:var(--sh-2) }
.member__ph{ width:60px; height:60px; margin:0 auto 15px; border-radius:50%;
  background:linear-gradient(140deg,var(--sand),var(--sand-dp)); color:var(--petrol);
  display:grid; place-content:center; font-family:var(--fd); font-size:20px; font-weight:600 }
.member b{ display:block; font-size:14.5px; font-weight:700 }
.member small{ display:block; font-size:12px; color:var(--ink-3); margin-top:3px }

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

.form{ background:var(--paper); border-radius:var(--r-lg); padding:clamp(28px,3.2vw,38px); box-shadow:var(--sh-3) }
.form__row{ margin-bottom:17px }
.form label{ display:block; font-size:12px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:8px }
.form input,.form select,.form textarea{ width:100%; padding:14px 16px; border:1px solid var(--line-2);
  border-radius:12px; background:var(--paper); font-size:14.5px; color:var(--ink); resize:vertical;
  transition:border-color .3s ease, box-shadow .3s ease }
.form input::placeholder,.form textarea::placeholder{ color:var(--ink-3) }
.form input:focus,.form select:focus,.form textarea:focus{ outline:none; border-color:var(--petrol);
  box-shadow:0 0 0 3px rgba(18,86,92,.12) }
.form__ok{ margin-top:14px; font-size:13px; color:var(--petrol); text-align:center }

/* ─────────── rodapé ─────────── */
.ft{ background:var(--ink); color:var(--paper); padding-block:clamp(52px,6vw,76px) 26px; overflow:hidden }
.ft__in{ display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(32px,5vw,60px);
  padding-bottom:38px; border-bottom:1px solid rgba(251,250,247,.13) }
.ft .brand__txt small{ color:rgba(251,250,247,.45) }
.ft__brand p{ font-size:13.5px; color:rgba(251,250,247,.6); max-width:36ch; margin-top:18px }
.ft__nav{ display:grid; grid-template-columns:1fr 1fr; gap:26px }
.ft__nav h4{ font-size:10.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--sand); margin-bottom:15px }
.ft__nav a{ display:block; font-size:13.5px; color:rgba(251,250,247,.66); 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-style:italic; font-size:clamp(84px,19vw,250px); line-height:.82;
  text-align:center; color:transparent; -webkit-text-stroke:1px rgba(251,250,247,.15);
  letter-spacing:-.035em; margin-top:clamp(36px,5vw,64px); user-select:none }
.ft__bot{ display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between;
  padding-top:24px; margin-top:clamp(24px,4vw,44px); border-top:1px solid rgba(251,250,247,.1);
  font-size:12px; color:rgba(251,250,247,.45) }
.ft__bot a{ color:var(--sand); border-bottom:1px solid rgba(233,224,209,.35) }

/* ─────────── reveal ─────────── */
.rv{ opacity:0; transform:translateY(22px); transition:opacity .85s var(--e), transform .85s 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,.team,.cta__in,.simbox,.method__in{ grid-template-columns:1fr }
  .hero__art{ max-width:520px; margin-inline:auto }
  .team__grid{ max-width:520px }
  .method__side{ position:static }
  .method__prog{ display:none }
}
@media (max-width:860px){
  .nav{ position:fixed; inset:0 0 auto; top:64px; 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 }
  .cmp__row{ grid-template-columns:1fr }
  .cmp__row > span{ padding:12px 18px }
  .cmp__row > span:first-child{ padding-top:16px }
  .cmp__row--hd{ display:none }
}
@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{ flex-direction:column }
  .hero__act .btn{ width:100% }

  /* três chips flutuando num card estreito viram bagunça: o terceiro sai.
     Os outros dois encostam na borda, sem cobrir texto (o padding reserva a faixa). */
  .chip--a{ left:-6px } .chip--b{ right:-4px }
  .chip--c{ display:none }

  .ctrl__hd{ flex-direction:column; align-items:flex-start; gap:6px }
  .ctrl output{ font-size:22px }
  .res__val{ font-size:26px }
  .verdict strong{ font-size:22px }
  .step__n{ font-size:12px }
  .qa summary{ font-size:15.5px; padding-right:36px }
}

@media (max-width:430px){
  /* dois cards de 160px deixam "Sócio-fundador · contador" em três linhas */
  .team__grid{ grid-template-columns:1fr }
  .member{ display:flex; align-items:center; gap:16px; text-align:left; padding:18px }
  .member__ph{ margin:0; flex:none }
}

:focus-visible{ outline:2px solid var(--terra); 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 }
  .mstep{ opacity:1; transform:none }
}