/* JadeIA v3 · base (claro). Sistema herdado dos mockups aprovados (jadeia/site/v3/mockups/_src/base.css).
   Leitura de design: página de produto B2B para donos de PME, linguagem clara tipo Stripe/Linear,
   placas isométricas em CSS 3D, Geist + Geist Mono, jade como único acento. Dials 6 / 6 / 4. */
@font-face { font-family: 'Geist'; src: url(../fonts/geist-vf.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url(../fonts/geist-mono-vf.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Geist Fallback'; src: local('Arial'); size-adjust: 104%; ascent-override: 92%; descent-override: 24%; }

:root {
  --pedra: #0D5E4C; --pedra-press: #0A4D3E; --profundo: #062A22; --vivo: #22B38A; --nevoa: #CFE8DD; --nevoa-2: #E7F3EE; --nevoa-3: #F3F9F6;
  --grafite: #171A19; --ink-2: #4B5451; --ink-3: #6B7572; --line: #E5E9E7; --line-2: #EEF1EF;
  --papel: #F4F2EC; --white: #FFFFFF; --bg: #FCFDFC; --ambar: #B7791F; --ambar-bg: #FBF1DF;
  --f-display: 'Geist', 'Geist Fallback', ui-sans-serif, system-ui, sans-serif;
  --f-text: 'Geist', 'Geist Fallback', ui-sans-serif, system-ui, sans-serif;
  --f-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --sh-1: 0 1px 2px rgba(16,40,33,.05), 0 8px 24px -12px rgba(16,40,33,.14);
  --sh-2: 0 1px 2px rgba(16,40,33,.06), 0 24px 56px -28px rgba(16,40,33,.28);
  --sh-3: 0 2px 4px rgba(16,40,33,.04), 0 40px 90px -40px rgba(13,94,76,.38);
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-io: cubic-bezier(.65,0,.35,1);
  --wrap: 1312px; --gut: 32px; --nav-h: 76px;
  --sec: 128px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--grafite); font: 400 16px/1.55 var(--f-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
@supports (overflow: clip) { body { overflow-x: clip; } }
p, h1, h2, h3, h4, ul, ol, figure, dl, dd, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
b, strong { font-weight: 600; }
s { text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
img, svg { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--pedra); outline-offset: 3px; border-radius: 8px; }
.ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; flex: none; }
.ico-xs { width: 14px; height: 14px; }
.ico-s { width: 16px; height: 16px; }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--grafite); color: #fff; font-size: 14px; }
.skip:focus { top: 12px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gut); }
.sec { position: relative; padding-block: var(--sec); overflow-x: clip; }
.sec.papel { background: var(--papel); }
.sec.tint { background: linear-gradient(180deg, var(--bg), var(--nevoa-3)); }

/* ---------- tipografia ---------- */
.h1 { font: 600 56px/1.02 var(--f-display); letter-spacing: -0.045em; color: var(--grafite); text-wrap: balance; }
.h1 em, .h2 em { font-style: normal; color: var(--pedra); }
.h2 { font: 600 36px/1.08 var(--f-display); letter-spacing: -0.035em; color: var(--grafite); text-wrap: balance; }
.h3 { font: 600 20px/1.25 var(--f-display); letter-spacing: -0.02em; }
.hook { font: 500 17px/1.45 var(--f-text); color: var(--pedra); letter-spacing: -0.01em; margin-bottom: 14px; max-width: 46ch; text-wrap: pretty; }
.lead { font-size: 18px; line-height: 1.55; color: var(--ink-2); letter-spacing: -0.008em; max-width: 60ch; margin-top: 18px; text-wrap: pretty; }
.sub { font-size: 18px; line-height: 1.55; color: var(--ink-2); letter-spacing: -0.008em; text-wrap: pretty; }
.sec-head { max-width: 760px; margin-bottom: 56px; }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head.center .hook, .sec-head.center .lead { margin-inline: auto; }
.micro { font-size: 14px; color: var(--ink-3); line-height: 1.45; }
.mono { font-family: var(--f-mono); }
.fecho { font: 500 20px/1.45 var(--f-display); letter-spacing: -0.02em; color: var(--grafite); max-width: 52ch; text-wrap: pretty; }
.soon { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font: 500 11px/1 var(--f-mono); color: var(--ambar); background: var(--ambar-bg); vertical-align: middle; white-space: nowrap; }

/* ---------- botões (mockup) ---------- */
.btn { display: inline-flex; align-items: center; gap: 12px; height: 52px; padding: 0 8px 0 24px; border-radius: 999px; font: 500 15.5px/1 var(--f-text); letter-spacing: -0.01em; white-space: nowrap; transition: transform .5s var(--ease), background-color .3s var(--ease), box-shadow .5s var(--ease); touch-action: manipulation; }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--pedra); color: var(--white); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 1px 2px rgba(13,94,76,.3), 0 12px 28px -14px rgba(13,94,76,.75); }
.btn-primary:hover { background: var(--pedra-press); }
.btn-ico { width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; flex: none; transition: transform .5s var(--ease); }
.btn-primary .btn-ico { background: rgba(255,255,255,.14); }
.btn-primary:hover .btn-ico { transform: translate(2px,-1px) scale(1.05); }
.btn-primary .btn-ico .ico { width: 16px; height: 16px; stroke-width: 1.8; }
.btn-ghost { background: var(--white); color: var(--grafite); padding: 0 22px 0 8px; box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(16,40,33,.04); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1px #D3DBD8, 0 6px 16px -10px rgba(16,40,33,.2); }
.btn-ghost .btn-ico { background: var(--nevoa-2); color: var(--pedra); }
.btn-ghost .btn-ico .ico { width: 13px; height: 13px; fill: currentColor; stroke: none; margin-left: 2px; }
.btn-ghost .btn-ico .ico.line { fill: none; stroke: currentColor; stroke-width: 1.8; margin: 0; width: 15px; height: 15px; }
.btn-sm { height: 44px; padding: 0 18px; font-size: 14px; }
.btn-sm.btn-primary { padding: 0 6px 0 16px; gap: 10px; }
.btn-sm.btn-primary .btn-ico { width: 32px; height: 32px; }
.btn-sm.btn-primary .btn-ico .ico { width: 13px; height: 13px; }
.btn-light { background: #fff; color: var(--profundo); box-shadow: 0 12px 28px -14px rgba(0,0,0,.5); }
.btn-light .btn-ico { background: var(--nevoa-2); color: var(--pedra); }
.btn-light .btn-ico .ico { width: 16px; height: 16px; stroke-width: 1.8; }
.btn-light:hover { background: var(--nevoa-3); }
.ctas { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.sec-cta { margin-top: 48px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.sec-cta.center { align-items: center; text-align: center; }

/* ---------- cartões ---------- */
.shell { padding: 6px; border-radius: 22px; background: rgba(255,255,255,.62); box-shadow: inset 0 0 0 1px rgba(16,40,33,.06), var(--sh-2); }
.core { border-radius: 16px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line-2); overflow: hidden; }
.card { border-radius: 18px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line), var(--sh-1); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 999px; font: 500 11px/1 var(--f-text); background: var(--nevoa-2); color: var(--pedra); white-space: nowrap; }
.chip .ico { width: 12px; height: 12px; stroke-width: 2; }
.chip-soft { background: var(--line-2); color: var(--ink-2); }
.chip-amber { background: var(--ambar-bg); color: var(--ambar); }
.chip-solid { background: var(--pedra); color: #fff; }
.av { width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; font: 600 11px/1 var(--f-text); color: var(--pedra); background: var(--nevoa-2); flex: none; }
.dots { display: inline-flex; gap: 3px; align-items: center; }
.dots i { width: 5px; height: 5px; border-radius: 9px; background: var(--ink-3); animation: dot 1s var(--ease-io) infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
.live-dot { width: 6px; height: 6px; border-radius: 99px; background: var(--vivo); box-shadow: 0 0 0 3px rgba(34,179,138,.18); flex: none; }

/* ---------- nav ---------- */
.nav { position: fixed; z-index: 50; left: 0; right: 0; top: 0; padding-top: env(safe-area-inset-top, 0px); transition: background-color .4s var(--ease), box-shadow .4s var(--ease); }
.nav.is-scrolled { background: rgba(252,253,252,.82); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 1px 0 rgba(16,40,33,.06); }
.nav-in { max-width: var(--wrap); margin: 0 auto; height: var(--nav-h); padding: 0 var(--gut); display: flex; align-items: center; gap: 48px; }
.nav .brand { display: flex; align-items: center; min-height: 44px; }
.nav .logo { height: 30px; width: auto; display: block; }
.nav ul { display: flex; gap: 32px; font-size: 14.5px; color: var(--ink-2); letter-spacing: -0.005em; margin-left: auto; }
.nav ul a { display: inline-flex; align-items: center; min-height: 44px; transition: color .2s; }
.nav ul a:hover { color: var(--grafite); }
.nav .nav-cta { margin-left: 8px; }
.burger { display: none; width: 44px; height: 44px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); background: var(--white); margin-left: auto; position: relative; }
.burger i { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--grafite); border-radius: 2px; transition: transform .45s var(--ease), top .45s var(--ease); }
.burger i:first-child { top: 18px; } .burger i:last-child { top: 25px; }
.menu-open .burger i:first-child { top: 21.5px; transform: rotate(45deg); }
.menu-open .burger i:last-child { top: 21.5px; transform: rotate(-45deg); }
.menu { position: fixed; inset: 0; z-index: 49; background: rgba(252,253,252,.97); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); padding: calc(var(--nav-h) + 24px + env(safe-area-inset-top, 0px)) 20px 32px; display: flex; flex-direction: column; gap: 28px; overflow-y: auto; }
.menu nav { display: flex; flex-direction: column; }
.menu nav a { display: flex; align-items: center; justify-content: space-between; min-height: 56px; font: 600 24px/1.2 var(--f-display); letter-spacing: -0.03em; border-bottom: 1px solid var(--line-2); }
.menu nav a .ico { color: var(--ink-3); }
.menu .btn { justify-content: space-between; height: 56px; }
.menu-open { overflow: hidden; }

/* ---------- reveal ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(24px); }
.js.rm [data-reveal], .js.no-gsap [data-reveal] { opacity: 1; transform: none; }

@media (max-width: 1100px) {
  .nav ul { gap: 22px; }
  .nav-in { gap: 28px; }
}
@media (max-width: 1023px) {
  .nav ul { display: none; }
  .nav .nav-cta { margin-left: auto; }
  .burger { display: block; margin-left: 0; }
}
@media (max-width: 767px) {
  :root { --gut: 20px; --nav-h: 64px; --sec: 88px; }
  .nav-in { gap: 12px; }
  .nav .logo { height: 26px; }
  .nav .nav-cta { display: none; }
  .burger { margin-left: auto; }
  .h1 { font-size: 32px; line-height: 1.06; letter-spacing: -0.04em; }
  .h2 { font-size: 28px; line-height: 1.1; letter-spacing: -0.03em; }
  .sub, .lead { font-size: 16px; }
  .hook { font-size: 16px; }
  .fecho { font-size: 18px; }
  .sec-head { margin-bottom: 36px; }
  .ctas { flex-direction: column; align-items: stretch; gap: 10px; }
  .btn { justify-content: space-between; height: 54px; }
  .btn-ghost { justify-content: flex-start; }
  .sec-cta { align-items: stretch; margin-top: 36px; }
  .sec-cta .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .dots i { animation: none; opacity: .6; }
  .btn, .btn-ico { transition: background-color .2s; }
}

/* ================= HERO A (mockup aprovado) ================= */
.hero { position: relative; padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); overflow: hidden; }
@supports (overflow: clip) { .hero { overflow: clip; } }
.hero-in { position: relative; min-height: calc(100dvh - var(--nav-h)); display: grid; grid-template-columns: 600px minmax(0, 1fr); align-items: center; gap: 24px; }
.hero-in::before { content: ""; position: absolute; inset: calc(var(--nav-h) * -1) -20vw 0 38%; background: radial-gradient(48% 52% at 52% 50%, rgba(207,232,221,.55), rgba(207,232,221,0) 70%); pointer-events: none; z-index: 0; }
.hero .copy { position: relative; z-index: 2; display: grid; gap: 28px; padding-bottom: 40px; }
.eyebrow { justify-self: start; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 10px; border-radius: 999px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); font: 500 12.5px/1 var(--f-mono); color: var(--ink-2); }
.eyebrow svg { width: 10px; height: 13px; fill: var(--pedra); }
.hero .h1 { margin-top: -4px; }
.hero .sub { max-width: 31em; }
.hero .ctas { margin-top: 8px; }
.sub-short { display: none; }

.scene { position: relative; z-index: 1; height: 720px; margin-right: -40px; }
.stage { position: absolute; left: 50%; top: 54%; width: 0; height: 0; transform: scale(var(--sc, .86)); }
.iso { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(58deg) rotateZ(-45deg); }
.floor { position: absolute; left: -520px; top: -520px; width: 1040px; height: 1040px; background-image: linear-gradient(rgba(13,94,76,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(13,94,76,.07) 1px, transparent 1px); background-size: 40px 40px; background-position: -1px -1px; -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); }
.slab { position: absolute; left: calc(var(--x) - var(--w) / 2); top: calc(var(--y) - var(--h) / 2); width: var(--w); height: var(--h); transform-style: preserve-3d; transform: translateZ(var(--z, 0px)); }
.slab > .sh { position: absolute; inset: 6%; border-radius: var(--r, 14px); background: rgba(13,94,76,.30); filter: blur(var(--blur, 16px)); transform: translate(var(--shx, 10px), var(--shy, 18px)); }
.slab > .ly { position: absolute; inset: 0; border-radius: var(--r, 14px); background: linear-gradient(90deg, var(--side-a, #D5E1DC), var(--side-b, #EAF1EE)); }
.slab > .top { position: absolute; inset: 0; border-radius: var(--r, 14px); transform: translateZ(var(--d)); background: var(--face, #fff); box-shadow: inset 0 0 0 1px rgba(13,94,76,.08); overflow: hidden; }
.platform { --w: 610px; --h: 610px; --d: 16px; --r: 28px; --side-a: #C9DDD5; --side-b: #E3EEEA; --blur: 34px; --shx: 18px; --shy: 30px; }
.platform > .sh { background: rgba(13,94,76,.22); }
.platform > .top { background: linear-gradient(135deg, #FFFFFF 0%, #F6FAF8 60%, #EEF6F2 100%); box-shadow: inset 0 0 0 1px rgba(13,94,76,.10); }
.platform .wire { position: absolute; inset: 22px; border-radius: 18px; border: 1.5px dashed rgba(13,94,76,.16); }
.platform .tag { position: absolute; left: 226px; top: 574px; white-space: nowrap; font: 600 15px/1 var(--f-display); letter-spacing: -0.01em; color: var(--pedra); }
.platform .tag small { font: 500 12px/1 var(--f-mono); color: rgba(13,94,76,.6); margin-left: 8px; }
.mod { --w: 196px; --h: 150px; --d: 12px; --r: 16px; --z: 16px; }
.mod .top { padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.mod .t { display: flex; align-items: center; gap: 7px; font: 600 14px/1 var(--f-display); letter-spacing: -0.015em; color: var(--grafite); }
.mod .t .ico { width: 15px; height: 15px; color: var(--pedra); }
.mod .big { font: 600 24px/1 var(--f-display); letter-spacing: -0.03em; color: var(--grafite); }
.mod .cap { font: 500 10.5px/1.2 var(--f-mono); color: var(--ink-3); }
.bub { height: 15px; border-radius: 8px; background: var(--nevoa-2); }
.bub.me { background: var(--pedra); opacity: .9; margin-left: auto; }
.cal { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; flex: 1; }
.cal i { border-radius: 4px; background: var(--nevoa-2); transition: background-color .6s var(--ease); }
.cal i.on { background: var(--vivo); opacity: .85; }
.cal i.pd { background: var(--pedra); }
.rows { display: grid; gap: 5px; }
.rows span { display: flex; align-items: center; gap: 6px; height: 16px; border-radius: 6px; background: var(--nevoa-3); padding: 0 6px; font: 500 10px/1 var(--f-mono); color: var(--ink-2); }
.rows span b { margin-left: auto; color: var(--pedra); font-weight: 600; }
.rows span .ico { width: 10px; height: 10px; stroke-width: 2.4; color: var(--vivo); }
.bars { display: flex; align-items: flex-end; gap: 6px; flex: 1; padding-top: 2px; }
.bars i { flex: 1; border-radius: 4px 4px 2px 2px; background: var(--nevoa); transition: height .9s var(--ease); }
.bars i:last-child { background: var(--vivo); }
.agent { --w: 190px; --h: 190px; --d: 26px; --r: 30px; --z: 16px; --side-a: #0A4A3C; --side-b: #11705A; --face: linear-gradient(135deg, #1B8C6E 0%, #0D5E4C 55%, #0B5242 100%); --blur: 22px; }
.agent > .sh { background: rgba(13,94,76,.45); }
.agent .top { box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 0 0 1px rgba(255,255,255,.08); }
.agent .top::after { content: ""; position: absolute; inset: 12px; border-radius: 22px; box-shadow: inset 0 0 0 1px rgba(207,232,221,.22); }
.agent .glowpad { position: absolute; inset: 34px; border-radius: 999px; background: radial-gradient(closest-side, rgba(111,211,178,.55), rgba(111,211,178,0)); animation: glow 4.8s var(--ease-io) infinite; }
@keyframes glow { 0%, 100% { opacity: .65; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.06); } }
.traces { position: absolute; left: -305px; top: -305px; width: 610px; height: 610px; transform: translateZ(17px); overflow: visible; }
.traces .tr { fill: none; stroke: rgba(13,94,76,.32); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.traces .fl { fill: none; stroke: var(--vivo); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 26 400; animation: flow 3.2s linear infinite; }
.traces .fl2 { animation-delay: -.8s; } .traces .fl3 { animation-delay: -1.6s; } .traces .fl4 { animation-delay: -2.4s; }
@keyframes flow { from { stroke-dashoffset: 26; } to { stroke-dashoffset: -400; } }
.pin { position: absolute; z-index: 5; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; }
.pin .card { display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 10px; border-radius: 14px; background: rgba(255,255,255,.92); box-shadow: inset 0 0 0 1px rgba(16,40,33,.07), 0 18px 40px -18px rgba(16,40,33,.32); white-space: nowrap; }
.pin .card .ic { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--nevoa-2); color: var(--pedra); }
.pin .card .ic .ico { width: 15px; height: 15px; stroke-width: 2; }
.pin .card b { display: block; font: 600 13.5px/1.2 var(--f-text); letter-spacing: -0.01em; }
.pin .card s { display: block; text-decoration: none; font: 500 11.5px/1.2 var(--f-mono); color: var(--ink-3); margin-top: 2px; }
.pin .stem { width: 1.5px; height: var(--stem, 34px); background: linear-gradient(rgba(13,94,76,.5), rgba(13,94,76,0)); }
.pin-l { transform: translate(-100%, -50%); flex-direction: row; }
.pin-l .stem { width: 64px; height: 1.5px; background: linear-gradient(90deg, rgba(13,94,76,.5), rgba(13,94,76,0)); }
.upright { position: absolute; left: -40px; top: -158px; width: 80px; height: 110px; z-index: 3; }
.upright svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.upright svg:last-child { filter: drop-shadow(0 10px 18px rgba(6,40,32,.28)); }
.up-sh { position: absolute; left: -46px; top: -58px; width: 92px; height: 26px; border-radius: 999px; background: rgba(4,36,28,.45); filter: blur(8px); z-index: 2; }

@media (max-width: 1279px) {
  .hero-in { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); }
  .scene { --sc: .7; height: 620px; }
}
@media (max-width: 1023px) {
  .hero-in { display: block; min-height: 0; padding-top: 48px; }
  .hero-in::before { inset: 420px -40px -60px -40px; }
  .hero .copy { max-width: 680px; padding-bottom: 0; }
  .scene { --sc: .66; height: 540px; margin: 8px calc(var(--gut) * -1) 0; }
  .stage { top: 52%; }
}
@media (max-width: 767px) {
  .hero-in { padding-top: 20px; }
  .hero-in::before { inset: 360px -40px -100px -40px; }
  .hero .copy { gap: 20px; }
  .hero .ctas { margin-top: 4px; }
  .sub-full { display: none; } .sub-short { display: block; }
  .scene { --sc: .44; height: 300px; margin: 0 -20px; }
  .stage { top: 50%; }
  .pin { display: none; }
}

/* ================= FAIXA DE PROVA ================= */
.prova { position: relative; background: var(--white); box-shadow: 0 -1px 0 var(--line-2), 0 1px 0 var(--line-2); }
.prova-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px; padding-block: 28px; }
.prova-t { display: flex; align-items: center; gap: 14px; font: 500 19px/1.35 var(--f-display); letter-spacing: -0.02em; color: var(--ink-2); max-width: 30em; }
.prova-t b { color: var(--grafite); font-weight: 600; }
.prova-t .ico { width: 22px; height: 28px; fill: var(--pedra); stroke: none; }
.prova-l { display: flex; gap: 28px; }
.prova-l li { display: flex; align-items: center; gap: 12px; }
.prova-l .pi { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--nevoa-2); color: var(--pedra); flex: none; }
.prova-l b { display: block; font: 600 14.5px/1.25 var(--f-text); letter-spacing: -0.01em; }
.prova-l em { display: block; font-style: normal; font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
@media (max-width: 1180px) { .prova-in { grid-template-columns: minmax(0, 1fr); gap: 20px; } }
@media (max-width: 767px) {
  .prova-in { padding-block: 24px; }
  .prova-t { font-size: 17px; align-items: flex-start; }
  .prova-l { flex-direction: column; gap: 14px; }
}

/* ================= VOCÊ PEDE, ELA FAZ (mockup C) ================= */
.pede-in { display: grid; grid-template-columns: 440px minmax(0, 1fr); gap: 56px; align-items: center; }
.pede-in::before { content: ""; position: absolute; inset: 0 0 0 44%; background: radial-gradient(46% 50% at 50% 50%, rgba(207,232,221,.6), rgba(207,232,221,0) 72%); pointer-events: none; }
.pede-copy { position: relative; z-index: 2; }
.pede-tabs { display: grid; gap: 6px; margin-top: 32px; }
.pt { position: relative; display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 10px 16px 12px; border-radius: 14px; text-align: left; color: var(--ink-2); transition: background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease); }
.pt:hover { background: rgba(255,255,255,.7); color: var(--grafite); }
.pt[aria-selected="true"] { background: var(--white); color: var(--grafite); box-shadow: inset 0 0 0 1px var(--line), var(--sh-1); }
.pt .pt-i { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--nevoa-2); color: var(--pedra); flex: none; transition: background-color .3s, color .3s; }
.pt[aria-selected="true"] .pt-i { background: var(--pedra); color: #fff; }
.pt .pt-x { font: 500 15.5px/1.3 var(--f-text); letter-spacing: -0.01em; }
.pt .pt-p { position: absolute; left: 16px; right: 16px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--line-2); overflow: hidden; opacity: 0; }
.pt[aria-selected="true"] .pt-p { opacity: 1; }
.pt .pt-p i { position: absolute; inset: 0; background: var(--vivo); transform-origin: 0 50%; transform: scaleX(0); }
.pede-note { margin-top: 18px; }

.ops { position: relative; z-index: 1; height: 600px; }
.chat { position: absolute; left: 0; top: 24px; width: 344px; }
.chat .core { background: #F6F9F7; }
.chat-h { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #fff; border-bottom: 1px solid var(--line-2); }
.chat-h .ag { width: 38px; height: 38px; border-radius: 999px; background: var(--pedra); display: grid; place-items: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.2); flex: none; }
.chat-h .ag svg { width: 12px; height: 17px; fill: #fff; }
.chat-h b { display: block; font: 600 14.5px/1.2 var(--f-text); letter-spacing: -0.01em; }
.chat-h s { display: flex; align-items: center; gap: 6px; text-decoration: none; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.chat-h s i { width: 6px; height: 6px; border-radius: 9px; background: var(--vivo); }
.chat-h .ch { margin-left: auto; font: 500 10.5px/1 var(--f-mono); color: var(--ink-3); padding: 6px 8px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line); }
.thread { height: 404px; padding: 18px 14px 14px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.day { align-self: center; font: 500 10.5px/1 var(--f-mono); color: var(--ink-3); padding: 5px 9px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); margin-bottom: 4px; }
.m { max-width: 86%; padding: 10px 12px 8px; font-size: 14px; line-height: 1.42; letter-spacing: -0.005em; position: relative; }
.m time { display: block; text-align: right; font: 500 10.5px/1 var(--f-mono); color: var(--ink-3); margin-top: 5px; }
.m.me { align-self: flex-end; background: #D9EEE5; border-radius: 16px 16px 4px 16px; color: #0E2C24; }
.m.me time { color: rgba(13,94,76,.7); }
.m.ag { align-self: flex-start; background: #fff; border-radius: 16px 16px 16px 4px; box-shadow: inset 0 0 0 1px var(--line-2), 0 1px 2px rgba(16,40,33,.04); }
.m.me.big { font: 600 17px/1.3 var(--f-display); letter-spacing: -0.02em; padding: 12px 14px 9px; }
.m b { font-weight: 600; color: var(--pedra); }
.m.typing { padding: 12px 14px; }
.compose { display: flex; align-items: center; gap: 8px; padding: 10px 12px 12px; }
.compose span { flex: 1; height: 38px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); display: flex; align-items: center; padding: 0 14px; font-size: 13px; color: var(--ink-3); }
.compose i { width: 38px; height: 38px; border-radius: 999px; background: var(--pedra); display: grid; place-items: center; color: #fff; }
.compose i .ico { width: 16px; height: 16px; }
.res-col { position: absolute; right: 0; top: 0; bottom: 0; width: 280px; }
.res { position: absolute; right: 0; width: 280px; }
.res .core { padding: 14px 16px; }
.res .hd { display: flex; align-items: center; gap: 10px; }
.res .ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--nevoa-2); color: var(--pedra); flex: none; }
.res .ic .ico { width: 16px; height: 16px; stroke-width: 1.9; }
.res .ic.solid { background: var(--pedra); color: #fff; }
.res .hd b { display: block; font: 600 15px/1.2 var(--f-display); letter-spacing: -0.02em; }
.res .hd s { display: block; text-decoration: none; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.res .hd .num-big { margin-left: auto; font: 600 22px/1 var(--f-display); letter-spacing: -0.03em; color: var(--pedra); }
.res ul { margin-top: 12px; display: grid; gap: 2px; }
.res li { display: flex; align-items: center; gap: 8px; height: 30px; font-size: 13px; color: var(--grafite); }
.res li + li { box-shadow: 0 -1px 0 var(--line-2); }
.res li .ico { width: 14px; height: 14px; color: var(--vivo); stroke-width: 2.4; }
.res li em { margin-left: auto; font: 500 12px/1 var(--f-mono); color: var(--ink-2); font-style: normal; }
.res .match { margin-top: 12px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.res .match span { padding: 8px 10px; border-radius: 10px; background: var(--nevoa-3); box-shadow: inset 0 0 0 1px var(--line-2); font: 500 11px/1.35 var(--f-mono); color: var(--ink-2); }
.res .match span b { display: block; font: 600 12px/1.3 var(--f-text); color: var(--grafite); }
.res .when { margin-top: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.res.r1 { top: 10px; }
.res.r2 { top: 244px; right: 30px; }
.res.r3 { top: 420px; }
.links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.links .ln { fill: none; stroke: rgba(13,94,76,.36); stroke-width: 1.5; }
.links .fl { fill: none; stroke: var(--vivo); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 22 600; animation: flow2 2.6s linear infinite; }
@keyframes flow2 { from { stroke-dashoffset: 22; } to { stroke-dashoffset: -600; } }
.links .nd { fill: #fff; stroke: var(--pedra); stroke-width: 1.8; }
.links .nd2 { fill: var(--pedra); }
@media (max-width: 1279px) {
  .pede-in { grid-template-columns: 380px minmax(0, 1fr); gap: 32px; }
  .chat { width: 320px; }
  .res, .res-col { width: 250px; }
  .res.r2 { right: 16px; }
}
@media (max-width: 1023px) {
  .pede-in { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .pede-in::before { inset: 40% -40px 0; }
  .pede-tabs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ops { height: 600px; max-width: 680px; width: 100%; margin: 0 auto; }
}
@media (max-width: 767px) {
  .pede-tabs { display: flex; overflow-x: auto; gap: 8px; margin: 24px -20px 0; padding: 2px 20px 8px; scrollbar-width: none; }
  .pede-tabs::-webkit-scrollbar { display: none; }
  .pt { flex: none; min-height: 48px; gap: 10px; padding: 6px 16px 8px 6px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
  .pt .pt-i { width: 34px; height: 34px; border-radius: 99px; }
  .pt .pt-x { font-size: 14.5px; white-space: nowrap; }
  .pt .pt-p { left: 18px; right: 18px; bottom: 3px; }
  .ops { height: auto; display: grid; gap: 12px; }
  .chat { position: relative; top: 0; width: 100%; }
  .chat-h .ch { display: none; }
  .thread { height: 330px; padding: 14px 12px 12px; }
  .m { font-size: 13.5px; }
  .m.me.big { font-size: 15.5px; }
  .compose { display: none; }
  .res-col { position: relative; width: 100%; display: grid; gap: 10px; }
  .res, .res.r1, .res.r2, .res.r3 { position: relative; top: auto; right: auto; width: 100%; }
  .links { display: none; }
}

/* ================= ENTREGA PRONTO x ENSINA A FAZER ================= */
.vs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 20px; max-width: 1080px; margin: 0 auto; align-items: stretch; }
.vs-col { border-radius: 24px; padding: 32px; }
.vs-col header { margin-bottom: 20px; }
.vs-k { display: flex; align-items: center; gap: 10px; font: 600 20px/1.2 var(--f-display); letter-spacing: -0.025em; }
.vs-k .ico { width: 15px; height: 20px; fill: var(--pedra); stroke: none; }
.vs-s { font: 500 12.5px/1.2 var(--f-mono); color: var(--ink-3); margin-top: 8px; }
.vs-col li { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 0; font-size: 15.5px; line-height: 1.4; letter-spacing: -0.008em; }
.vs-col li + li { box-shadow: 0 -1px 0 var(--line-2); }
.vs-col li em { font: 500 11px/1 var(--f-mono); font-style: normal; padding: 6px 8px; border-radius: 999px; white-space: nowrap; }
.vs-them { background: #ECE9E1; color: var(--ink-2); }
.vs-them .vs-k { color: var(--ink-2); }
.vs-them li { color: #5E6663; }
.vs-them li + li { box-shadow: 0 -1px 0 rgba(16,40,33,.07); }
.vs-them li .ico { color: #8E9693; }
.vs-them li em { background: rgba(16,40,33,.06); color: #6B7270; }
.vs-them li span { text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: transparent; transition: text-decoration-color .9s var(--ease); }
.vs.is-in .vs-them li span, .rm .vs-them li span { text-decoration-color: rgba(75,84,81,.6); }
.vs.is-in .vs-them li:nth-child(2) span { transition-delay: .14s; } .vs.is-in .vs-them li:nth-child(3) span { transition-delay: .28s; }
.vs.is-in .vs-them li:nth-child(4) span { transition-delay: .42s; } .vs.is-in .vs-them li:nth-child(5) span { transition-delay: .56s; }
.vs-us { background: var(--white); box-shadow: inset 0 0 0 1.5px rgba(34,179,138,.55), var(--sh-3); }
.vs-us .vs-k { color: var(--grafite); }
.vs-us li .ck { width: 22px; height: 22px; padding: 4px; border-radius: 99px; background: var(--pedra); color: #fff; stroke-width: 2.6; }
.vs-us li em { background: var(--nevoa-2); color: var(--pedra); }
.vs-you { margin-top: 18px; padding-top: 18px; box-shadow: 0 -1px 0 var(--line); font-size: 15px; color: var(--ink-2); }
.vs-you b { color: var(--pedra); }
@media (max-width: 900px) { .vs { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) {
  .vs-col { padding: 22px 18px; border-radius: 20px; }
  .vs-col li { grid-template-columns: 22px minmax(0, 1fr); gap: 12px; font-size: 15px; }
  .vs-col li em { grid-column: 2; justify-self: start; margin-top: -4px; }
  .vs-them li em { display: none; }
}

/* ================= O QUE VOCÊ PEDIR (central de pedidos) ================= */
.cons { border-radius: 26px; }
.cons-core { border-radius: 20px; display: grid; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr); }
.cmd { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 20px; border-bottom: 1px solid var(--line-2); background: #fff; }
.cmd > .ico { color: var(--ink-3); }
.cmd input { flex: 1; min-width: 0; height: 44px; border: 0; outline: 0; background: transparent; font: 400 16px/1 var(--f-text); color: var(--grafite); letter-spacing: -0.01em; }
.cmd input::placeholder { color: var(--ink-3); }
.cmd:focus-within { box-shadow: inset 0 -2px 0 var(--vivo); }
.cmd button { width: 44px; height: 44px; border-radius: 12px; background: var(--pedra); color: #fff; display: grid; place-items: center; flex: none; transition: background-color .2s, transform .3s var(--ease); }
.cmd button:hover { background: var(--pedra-press); }
.cmd button:active { transform: scale(.96); }
.cons-body { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); min-height: 560px; }
.cons-left { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--line-2); background: #FBFCFB; }
.ped-areas { display: flex; flex-wrap: wrap; gap: 6px; padding: 16px 18px 12px; }
.pa { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 12px; border-radius: 999px; font: 500 13.5px/1 var(--f-text); color: var(--ink-2); background: #fff; box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; transition: background-color .25s var(--ease), color .25s, box-shadow .25s; }
.pa:hover { color: var(--grafite); box-shadow: inset 0 0 0 1px #D3DBD8; }
.pa .ico { width: 14px; height: 14px; color: var(--pedra); }
.pa b { font: 500 11px/1 var(--f-mono); color: var(--ink-3); }
.pa[aria-checked="true"] { background: var(--pedra); color: #fff; box-shadow: none; }
.pa[aria-checked="true"] .ico, .pa[aria-checked="true"] b { color: rgba(255,255,255,.8); }
.ped-list { flex: 1; overflow-y: auto; padding: 4px 18px 18px; max-height: 470px; overscroll-behavior: contain; }
.pg + .pg { margin-top: 14px; }
.pg-h { font: 500 11.5px/1 var(--f-mono); color: var(--ink-3); padding: 8px 2px 8px; }
.pi-b { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 8px 12px; border-radius: 12px; text-align: left; font-size: 14.5px; line-height: 1.35; letter-spacing: -0.008em; color: var(--grafite); transition: background-color .2s var(--ease), box-shadow .2s; }
.pi-b + .pi-b { margin-top: 2px; }
.pi-b .ico { width: 15px; height: 15px; color: var(--pedra); }
.pi-b .go { margin-left: auto; color: var(--ink-3); opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .3s var(--ease); }
.pi-b:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.pi-b:hover .go { opacity: 1; transform: none; }
.pi-b[aria-pressed="true"] { background: var(--nevoa-2); box-shadow: inset 0 0 0 1px rgba(13,94,76,.18); }
.pi-b[aria-pressed="true"] .go { opacity: 1; transform: none; color: var(--pedra); }
.pi-b .demo { font: 500 10px/1 var(--f-mono); color: var(--pedra); padding: 4px 6px; border-radius: 6px; background: var(--nevoa-2); flex: none; }
.pg-more { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-size: 13.5px; font-weight: 500; color: var(--pedra); border-radius: 10px; }
.pg-more:hover { background: var(--nevoa-3); }
.cons-right { display: flex; flex-direction: column; min-width: 0; background: #F6F9F7; }
.con-h { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: #fff; border-bottom: 1px solid var(--line-2); }
.av-lia { width: 34px; height: 34px; background: var(--pedra); color: #fff; font-size: 13px; }
.con-h b { display: block; font: 600 14px/1.2 var(--f-text); }
.con-h em { display: block; font-style: normal; font: 500 11px/1.2 var(--f-mono); color: var(--ink-3); margin-top: 2px; }
.con-st { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px; border-radius: 999px; font: 500 12px/1 var(--f-text); background: var(--line-2); color: var(--ink-2); white-space: nowrap; }
.con-st i { width: 6px; height: 6px; border-radius: 9px; background: var(--ink-3); }
.con-st[data-kind="run"] { background: var(--ambar-bg); color: var(--ambar); }
.con-st[data-kind="run"] i { background: var(--ambar); animation: blink 1s infinite; }
.con-st[data-kind="done"] { background: var(--nevoa-2); color: var(--pedra); }
.con-st[data-kind="done"] i { background: var(--vivo); }
@keyframes blink { 50% { opacity: .2; } }
.con-chat { flex: 1; min-height: 220px; max-height: 300px; overflow-y: auto; padding: 16px 16px 8px; display: flex; flex-direction: column; gap: 8px; }
.con-empty { margin: auto; text-align: center; font-size: 14px; color: var(--ink-3); max-width: 24ch; }
.bb { max-width: 88%; padding: 9px 12px 7px; font-size: 14px; line-height: 1.45; border-radius: 16px; }
.bb time { display: block; text-align: right; font: 500 10px/1 var(--f-mono); color: var(--ink-3); margin-top: 4px; }
.bb-me { align-self: flex-end; background: #D9EEE5; color: #0E2C24; border-radius: 16px 16px 4px 16px; font-weight: 500; }
.bb-a { align-self: flex-start; background: #fff; border-radius: 16px 16px 16px 4px; box-shadow: inset 0 0 0 1px var(--line-2); }
.bb-who { display: block; font: 600 11px/1 var(--f-text); color: var(--pedra); margin-bottom: 4px; font-style: normal; }
.con-ev { padding: 10px 16px 6px; display: grid; gap: 6px; border-top: 1px solid var(--line-2); background: #fff; min-height: 64px; }
.con-ev:empty { display: none; }
.con-ev li { display: flex; align-items: center; gap: 10px; font: 500 11.5px/1.3 var(--f-mono); color: var(--ink-2); }
.con-ev li .st { width: 18px; height: 18px; border-radius: 99px; display: grid; place-items: center; flex: none; background: var(--line-2); }
.con-ev li .st svg { width: 11px; height: 11px; fill: none; stroke: #fff; stroke-width: 2.6; opacity: 0; }
.con-ev li.is-done .st { background: var(--vivo); }
.con-ev li.is-done .st svg { opacity: 1; }
.con-ev li.is-load .st { background: conic-gradient(var(--vivo) 0 25%, var(--line-2) 25%); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.con-f { padding: 8px 16px 14px; background: #fff; min-height: 14px; }
.con-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 13.5px; font-weight: 500; color: var(--pedra); text-decoration: underline; text-underline-offset: 3px; }
.ped-fecho { margin-top: 40px; }
@media (max-width: 1023px) {
  .cons-body { grid-template-columns: minmax(0, 1fr); }
  .cons-left { border-right: 0; border-bottom: 1px solid var(--line-2); }
  .ped-list { max-height: 360px; }
}
@media (max-width: 767px) {
  .cons { padding: 4px; border-radius: 22px; }
  .cons-core { border-radius: 18px; }
  .cmd { padding: 8px 8px 8px 14px; }
  .cmd input { font-size: 16px; }
  .cons-body { display: flex; flex-direction: column; min-height: 0; }
  .cons-left { display: contents; }
  .ped-areas { order: 1; flex-wrap: nowrap; overflow-x: auto; padding: 12px 12px 10px; scrollbar-width: none; background: #FBFCFB; border-bottom: 1px solid var(--line-2); -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .ped-areas::-webkit-scrollbar { display: none; }
  .pa { min-height: 44px; }
  .cons-right { order: 2; }
  .ped-list { order: 3; max-height: none; overflow: visible; padding: 8px 10px 14px; background: #FBFCFB; border-top: 1px solid var(--line-2); }
  .con-chat { min-height: 200px; max-height: 280px; }
  .pi-b { min-height: 48px; font-size: 14.5px; }
  .pi-b .go { opacity: 1; transform: none; }
}

/* ================= ANTES E DEPOIS ================= */
.ad-switch { display: none; }
.ad-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.ad-col { border-radius: 24px; padding: 30px 32px 22px; }
.ad-col header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ad-k { display: inline-flex; align-items: center; gap: 10px; font: 600 22px/1.2 var(--f-display); letter-spacing: -0.03em; }
.ad-k .ico { width: 15px; height: 20px; fill: var(--pedra); stroke: none; }
.ad-s { font: 500 12px/1 var(--f-mono); color: var(--ink-3); }
.ad-col li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; padding: 16px 0; font-size: 15.5px; line-height: 1.5; letter-spacing: -0.006em; }
.ad-col li + li { box-shadow: 0 -1px 0 var(--line-2); }
.ad-col time { font: 500 12.5px/1.5 var(--f-mono); padding-top: 2px; }
.ad-hoje { background: #ECE9E1; color: #5E6663; }
.ad-hoje li + li { box-shadow: 0 -1px 0 rgba(16,40,33,.07); }
.ad-hoje time { color: #7A817E; }
.ad-hoje b { color: #3E4542; }
.ad-hoje .ad-k { color: #4B5451; }
.ad-com { background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--sh-2); }
.ad-com time { color: var(--pedra); }
.ad-com b { color: var(--pedra); }
.ad-close { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px; margin-top: 48px; }
.ad-close .fecho b { color: var(--pedra); }
@media (max-width: 1023px) { .ad-col li { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; } .ad-close { grid-template-columns: minmax(0, 1fr); gap: 24px; } .ad-close .btn { justify-self: start; } }
@media (max-width: 767px) {
  .ad-switch { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 4px; border-radius: 999px; background: #E6E2D8; margin-bottom: 16px; }
  .ad-switch button { position: relative; z-index: 1; min-height: 44px; border-radius: 999px; font: 500 14.5px/1 var(--f-text); color: var(--ink-2); transition: color .3s; }
  .ad-switch button[aria-selected="true"] { color: var(--grafite); }
  .ad-ind { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: #fff; box-shadow: var(--sh-1); transition: transform .45s var(--ease); }
  .ad-switch[data-sel="1"] .ad-ind { transform: translateX(100%); }
  .ad-grid { grid-template-columns: minmax(0, 1fr); }
  .ad-col { padding: 20px 18px 10px; border-radius: 20px; }
  .ad-col li { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 14px 0; font-size: 15px; }
  .ad-close { margin-top: 32px; }
  .ad-close .btn { justify-self: stretch; }
}

/* ================= UM DIA DA SUA EMPRESA ================= */
.dia-grid { display: grid; grid-template-columns: minmax(0, 1fr) 540px; gap: 64px; align-items: start; }
.dia-panel-wrap { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--nav-h) + 28px); }
.dia-list { grid-column: 1; grid-row: 1; position: relative; padding-left: 36px; }
.dia-list::before { content: ""; position: absolute; left: 7px; top: 12px; bottom: 12px; width: 2px; border-radius: 2px; background: var(--line); }
.dia-list .rail-fill { position: absolute; left: 7px; top: 12px; bottom: 12px; width: 2px; border-radius: 2px; background: linear-gradient(var(--vivo), var(--pedra)); transform-origin: 50% 0; transform: scaleY(0); }
.dl { position: relative; min-height: 44vh; padding: 4px 0 56px; opacity: .32; transition: opacity .5s var(--ease); }
.dl:last-child { min-height: 0; padding-bottom: 8px; }
.dl.is-on, .rm .dl, .no-gsap .dl { opacity: 1; }
.dl::before { content: ""; position: absolute; left: -36px; top: 8px; width: 16px; height: 16px; border-radius: 99px; background: var(--bg); box-shadow: inset 0 0 0 2px var(--line); transition: box-shadow .4s, background-color .4s; }
.dl.is-on::before, .dl.is-past::before { background: var(--pedra); box-shadow: 0 0 0 4px rgba(34,179,138,.18); }
.dl-h { font: 500 30px/1 var(--f-mono); letter-spacing: -0.04em; color: var(--pedra); }
.dl-t { font: 600 22px/1.2 var(--f-display); letter-spacing: -0.025em; margin-top: 12px; }
.dl-p { font-size: 16.5px; line-height: 1.55; color: var(--ink-2); margin-top: 10px; max-width: 46ch; }
.dl-v { margin-top: 18px; font: 600 30px/1.1 var(--f-display); letter-spacing: -0.035em; color: var(--pedra); }
.dia-panel .core { padding: 0; }
.dp-top { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line-2); }
.dp-mark { width: 28px; height: 28px; border-radius: 9px; background: var(--pedra); display: grid; place-items: center; flex: none; }
.dp-mark svg { width: 10px; height: 14px; fill: #fff; }
.dp-org b { display: block; font: 600 13.5px/1.2 var(--f-text); }
.dp-org em { display: block; font-style: normal; font-size: 11.5px; color: var(--ink-3); }
.dp-clock { margin-left: auto; font: 500 26px/1 var(--f-mono); letter-spacing: -0.04em; color: var(--grafite); }
.dp-rail { position: relative; height: 3px; margin: 0 16px; background: var(--line-2); border-radius: 3px; }
.dp-rail > i { position: absolute; inset: 0; background: var(--vivo); border-radius: 3px; transform-origin: 0 50%; transform: scaleX(0); transition: transform .6s var(--ease); }
.dp-marks i { position: absolute; top: -3px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 2px var(--line); transition: box-shadow .3s; }
.dp-marks i.on { box-shadow: inset 0 0 0 2px var(--vivo); }
.dp-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding: 18px 16px 6px; }
.dp-kpis span { padding: 10px 10px 11px; border-radius: 12px; background: var(--nevoa-3); box-shadow: inset 0 0 0 1px var(--line-2); min-width: 0; }
.dp-kpis em { display: block; font-style: normal; font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-kpis b { display: block; font: 600 17px/1.15 var(--f-display); letter-spacing: -0.03em; margin-top: 4px; white-space: nowrap; }
.dp-kpis b.bump { color: var(--pedra); }
.dp-stage { position: relative; height: 196px; margin: 10px 16px 0; }
.ds { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 16px; border-radius: 16px; background: linear-gradient(135deg, #fff, var(--nevoa-3)); box-shadow: inset 0 0 0 1px var(--line-2); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .45s var(--ease), transform .6s var(--ease), visibility 0s .45s; }
.ds.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .45s var(--ease), transform .6s var(--ease), visibility 0s; }
.ds-h { display: flex; align-items: center; gap: 8px; font: 500 11.5px/1 var(--f-mono); color: var(--ink-3); }
.ds-h .ico { width: 14px; height: 14px; color: var(--pedra); }
.ds-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 13.5px; }
.ds-row b { font-weight: 600; }
.ds-row em { font-style: normal; color: var(--ink-3); font-size: 12px; }
.ds-row .r { margin-left: auto; }
.ds-row.hi { box-shadow: inset 0 0 0 1.5px var(--vivo); }
.ds-wave { display: flex; align-items: center; gap: 3px; height: 34px; }
.ds-wave i { flex: 1; border-radius: 3px; background: var(--nevoa); }
.ds-wave i.p { background: var(--pedra); }
.ds-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ds-nums span { padding: 8px 10px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); }
.ds-nums b { display: block; font: 600 16px/1.1 var(--f-display); letter-spacing: -0.02em; }
.ds-nums em { display: block; font-style: normal; font-size: 10.5px; color: var(--ink-3); margin-top: 2px; }
.ds-big { font: 600 26px/1.1 var(--f-display); letter-spacing: -0.035em; color: var(--pedra); }
.ds-btns { display: flex; gap: 6px; }
.ds-btns s { text-decoration: none; display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 500; background: var(--line-2); color: var(--ink-2); }
.ds-btns s.on { background: var(--pedra); color: #fff; }
.ds-fun { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ds-fun span { min-height: 70px; padding: 8px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); font: 500 10.5px/1.2 var(--f-mono); color: var(--ink-3); display: flex; flex-direction: column; gap: 6px; }
.ds-fun span i { display: block; font-style: normal; padding: 6px 7px; border-radius: 8px; background: var(--nevoa-2); color: var(--pedra); font: 600 11.5px/1.2 var(--f-text); }
.dp-feed { padding: 12px 16px 16px; display: grid; gap: 6px; min-height: 112px; }
.dp-feed li { display: flex; align-items: center; gap: 10px; font: 500 11.5px/1.3 var(--f-mono); color: var(--ink-2); }
.dp-feed li .st { width: 16px; height: 16px; border-radius: 99px; background: var(--vivo); display: grid; place-items: center; flex: none; }
.dp-feed li .st svg { width: 10px; height: 10px; fill: none; stroke: #fff; stroke-width: 2.6; }
.dia-close { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; margin-top: 64px; padding-top: 40px; box-shadow: 0 -1px 0 var(--line); }
.dia-close .fecho b { color: var(--pedra); }
@media (max-width: 1180px) { .dia-grid { grid-template-columns: minmax(0, 1fr) 460px; gap: 40px; } .dp-kpis { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 1023px) {
  .dia-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .dia-panel-wrap { grid-column: 1; position: sticky; top: var(--nav-h); z-index: 3; margin: 0 calc(var(--gut) * -1) 12px; padding: 8px var(--gut) 16px; background: linear-gradient(var(--bg) 78%, rgba(252,253,252,0)); }
  .dia-list { grid-row: 2; }
  .dp-kpis { grid-template-columns: repeat(5, minmax(0,1fr)); }
  .dp-feed { display: none; }
  .dl { min-height: 52vh; }
  .dia-close { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .dia-close .btn { justify-self: start; }
}
@media (max-width: 767px) {
  .dia-panel .shell, .dia-panel.shell { padding: 4px; border-radius: 18px; }
  .dia-panel .core { border-radius: 14px; }
  .dp-top { padding: 9px 12px; gap: 10px; }
  .dp-mark { width: 24px; height: 24px; }
  .dp-org em { display: none; }
  .dp-clock { font-size: 22px; }
  .dp-rail { margin: 0 12px; }
  .dp-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 10px 8px 4px; }
  .dp-kpis span:nth-child(4) { display: none; }
  .dp-kpis span { padding: 6px 6px 7px; border-radius: 9px; }
  .dp-kpis em { font-size: 9.5px; }
  .dp-kpis b { font-size: 12.5px; letter-spacing: -0.02em; }
  .dp-stage { height: 96px; margin: 6px 8px 8px; }
  .ds { padding: 10px; gap: 6px; border-radius: 12px; }
  .ds .ds-h { display: none; }
  .ds .m-hide { display: none; }
  .ds-row { padding: 7px 10px; font-size: 12.5px; }
  .ds-nums b { font-size: 13px; } .ds-nums span { padding: 6px 8px; }
  .ds-big { font-size: 20px; }
  .ds-wave { height: 22px; }
  .ds-fun span { min-height: 0; padding: 6px; }
  .dia-list { padding-left: 28px; }
  .dia-list::before, .dia-list .rail-fill { left: 5px; }
  .dl::before { left: -28px; width: 14px; height: 14px; }
  .dl { min-height: 58vh; padding-bottom: 40px; }
  .dl-h { font-size: 24px; }
  .dl-t { font-size: 19px; margin-top: 8px; }
  .dl-p { font-size: 15.5px; }
  .dl-v { font-size: 24px; }
  .dia-close { margin-top: 40px; }
  .dia-close .btn { justify-self: stretch; }
}

/* ================= CALCULADORA ================= */
.calc-box { border-radius: 26px; }
.calc-core { border-radius: 20px; display: grid; min-width: 0; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.calc-in { padding: 28px 32px 30px; }
.calc-presets { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px; border-radius: 16px; background: var(--nevoa-3); box-shadow: inset 0 0 0 1px var(--line-2); }
.calc-presets button { flex: 1 1 auto; min-height: 44px; padding: 0 14px; border-radius: 12px; font: 500 13.5px/1.2 var(--f-text); color: var(--ink-2); transition: background-color .25s, color .25s, box-shadow .25s; }
.calc-presets button[aria-checked="true"] { background: #fff; color: var(--grafite); box-shadow: var(--sh-1); }
.calc-fields { display: grid; gap: 4px; margin-top: 18px; }
.cf { padding: 12px 0 8px; }
.cf + .cf { box-shadow: 0 -1px 0 var(--line-2); }
.cf-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cf label { font: 500 14.5px/1.3 var(--f-text); color: var(--grafite); letter-spacing: -0.008em; }
.cf-v { width: 9ch; min-width: 0; height: 44px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font: 600 15px/1 var(--f-mono); color: var(--grafite); text-align: right; letter-spacing: -0.02em; }
.cf-v:focus { outline: 0; border-color: var(--vivo); box-shadow: 0 0 0 3px rgba(34,179,138,.2); }
.cf-v.is-err { border-color: #C2410C; }
.cf input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; --p: 50%; }
.cf input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--pedra) var(--p), var(--line) var(--p)); }
.cf input[type="range"]::-moz-range-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--pedra) var(--p), var(--line) var(--p)); }
.cf input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 99px; background: #fff; box-shadow: 0 0 0 1px rgba(16,40,33,.12), 0 2px 6px rgba(16,40,33,.2); border: 0; transition: transform .2s var(--ease); }
.cf input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 99px; background: #fff; box-shadow: 0 0 0 1px rgba(16,40,33,.12), 0 2px 6px rgba(16,40,33,.2); border: 0; }
.cf input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
.cf-h { font-size: 12.5px; color: var(--ink-3); margin-top: -4px; }
.cf-e { font-size: 12.5px; color: #C2410C; margin-top: 4px; }
.calc-out { padding: 32px; background: linear-gradient(180deg, var(--nevoa-3), #fff); border-left: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 14px; }
.co-k { font: 500 13px/1 var(--f-mono); color: var(--ink-3); }
.co-big { font: 600 76px/1 var(--f-display); letter-spacing: -0.055em; color: var(--pedra); }
.co-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.co-row span { padding: 12px 14px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); }
.co-row em { display: block; font-style: normal; font-size: 12.5px; color: var(--ink-3); line-height: 1.3; }
.co-row b { display: block; font: 600 24px/1.1 var(--f-display); letter-spacing: -0.035em; margin-top: 6px; }
.co-bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; gap: 5px; height: 84px; padding-top: 6px; }
.co-bars i { display: block; border-radius: 5px 5px 2px 2px; background: var(--nevoa); height: calc(var(--v, 0) * 100%); transition: height .5s var(--ease); min-height: 3px; }
.co-bars i:last-child { background: var(--vivo); }
.co-sent { font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.co-cta { align-self: flex-start; margin-top: 4px; }
.calc-prem { margin-top: 20px; max-width: 90ch; }
@media (max-width: 1023px) { .calc-core { grid-template-columns: minmax(0, 1fr); } .calc-out { border-left: 0; border-top: 1px solid var(--line-2); } }
@media (max-width: 767px) {
  .calc-box { padding: 4px; border-radius: 22px; }
  .calc-in, .calc-out { padding: 20px 16px; }
  .calc-presets { flex-direction: column; }
  .co-big { font-size: 52px; }
  .co-row b { font-size: 20px; }
  .co-cta { align-self: stretch; }
  .co-cta span:first-child { white-space: normal; text-align: left; }
}

/* ================= PAINEL DO PRODUTO (mockup B) ================= */
.painel { overflow-x: clip; }
.painel .sec-head { margin-bottom: 36px; }
.ptabs { position: relative; display: flex; width: max-content; max-width: 100%; margin: 0 auto 40px; padding: 4px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--sh-1); }
.ptabs button { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; font: 500 14px/1 var(--f-text); color: var(--ink-2); white-space: nowrap; transition: color .3s; }
.ptabs button .ico { width: 15px; height: 15px; }
.ptabs button[aria-selected="true"] { color: #fff; }
.pt-ind { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; background: var(--pedra); transition: transform .5s var(--ease), width .5s var(--ease); }
.pstage { position: relative; max-width: 1120px; margin: 0 auto; perspective: 1800px; perspective-origin: 50% 0%; }
.win { transform: rotateX(var(--tilt, 12deg)); transform-origin: 50% 0%; will-change: transform; }
.win > .shell { box-shadow: inset 0 0 0 1px rgba(16,40,33,.06), 0 60px 120px -50px rgba(13,94,76,.45), 0 20px 40px -24px rgba(16,40,33,.18); }
.app { display: grid; grid-template-columns: 208px minmax(0, 1fr); grid-template-rows: 52px 600px; }
.app-bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--line-2); min-width: 0; }
.app-bar .mark { width: 26px; height: 26px; border-radius: 8px; background: var(--pedra); display: grid; place-items: center; flex: none; }
.app-bar .mark svg { width: 10px; height: 14px; fill: #fff; }
.app-bar .org { font: 600 13.5px/1 var(--f-text); white-space: nowrap; }
.app-bar .org s { text-decoration: none; color: var(--ink-3); font-weight: 400; margin-left: 6px; }
.app-bar .search { margin-left: 28px; flex: 0 1 300px; height: 32px; border-radius: 10px; background: var(--nevoa-3); box-shadow: inset 0 0 0 1px var(--line-2); display: flex; align-items: center; gap: 8px; padding: 0 10px; font-size: 12.5px; color: var(--ink-3); min-width: 0; overflow: hidden; white-space: nowrap; }
.app-bar .search .ico { width: 14px; height: 14px; }
.app-bar .right { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.app-bar .live { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--nevoa-2); color: var(--pedra); font-weight: 500; }
.app-side { padding: 14px 10px; border-right: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 2px; background: #FCFDFC; }
.app-side .si { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 10px; border-radius: 9px; font-size: 13px; color: var(--ink-2); text-align: left; width: 100%; transition: background-color .25s, color .25s; }
.app-side .si .ico { width: 16px; height: 16px; color: var(--ink-3); }
.app-side .si em { margin-left: auto; font: 500 11px/1 var(--f-mono); color: var(--ink-3); font-style: normal; }
.app-side .si.on, .app-side .si[aria-current="true"] { background: var(--nevoa-2); color: var(--pedra); font-weight: 500; }
.app-side .si.on .ico, .app-side .si[aria-current="true"] .ico { color: var(--pedra); }
.app-side .si.mute { cursor: default; }
.app-side hr { border: 0; border-top: 1px solid var(--line-2); margin: 10px 4px; }
.app-side .lbl { font: 500 10.5px/1 var(--f-mono); color: var(--ink-3); padding: 8px 10px 6px; }
.app-main { position: relative; min-width: 0; background: #FBFCFB; overflow: hidden; }
.scr { position: absolute; inset: 0; padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.scr-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.scr-h h3 { font: 600 17px/1.2 var(--f-display); letter-spacing: -0.025em; margin-right: auto; }
.pnl { background: #fff; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line-2); min-width: 0; }
.pnl-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px 8px; font: 600 13px/1 var(--f-text); }
.pnl-h s { text-decoration: none; font-weight: 400; color: var(--ink-3); font-size: 11.5px; }
/* conversas */
.cv { display: grid; grid-template-columns: 290px minmax(0, 1fr) 210px; gap: 12px; flex: 1; min-height: 0; }
.cv-list { overflow: hidden; display: flex; flex-direction: column; }
.cv-ul { padding: 0 6px 6px; overflow: hidden; }
.cv-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 9px 8px; border-radius: 10px; }
.cv-row + .cv-row { box-shadow: 0 -1px 0 var(--line-2); }
.cv-row.sel { background: var(--nevoa-3); box-shadow: inset 0 0 0 1px rgba(13,94,76,.12); }
.cv-row b { display: block; font: 600 12.5px/1.2 var(--f-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-row em { display: block; font-style: normal; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-row time { font: 500 10.5px/1 var(--f-mono); color: var(--ink-3); align-self: start; padding-top: 3px; }
.cv-row .tag { grid-column: 2 / -1; font: 500 10px/1.2 var(--f-mono); color: var(--pedra); }
.cv-row.is-new { animation: rowin .8s var(--ease); }
@keyframes rowin { from { background: rgba(34,179,138,.18); } to { background: transparent; } }
.cv-th { display: flex; flex-direction: column; overflow: hidden; }
.cv-th .th-b { flex: 1; padding: 6px 14px 10px; display: flex; flex-direction: column; gap: 7px; overflow: hidden; }
.cv-th .bb { font-size: 12.5px; max-width: 86%; }
.cv-th .bb-c { align-self: flex-start; background: var(--nevoa-3); border-radius: 4px 14px 14px 14px; box-shadow: inset 0 0 0 1px var(--line-2); }
.cv-th .bb-a { align-self: flex-end; background: var(--pedra); color: #fff; border-radius: 14px 4px 14px 14px; box-shadow: none; }
.cv-th .bb-a time { color: rgba(255,255,255,.7); }
.cv-th .ev-line { align-self: center; font: 500 10px/1 var(--f-mono); color: var(--pedra); padding: 6px 10px; border-radius: 999px; background: var(--nevoa-2); }
.cv-th .th-f { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line-2); font-size: 12px; color: var(--ink-3); }
.cv-ctx { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.cv-ctx b { font: 600 13.5px/1.2 var(--f-text); }
.cv-ctx dl { display: grid; gap: 8px; font-size: 12px; }
.cv-ctx dt { font: 500 10.5px/1 var(--f-mono); color: var(--ink-3); }
.cv-ctx dd { color: var(--grafite); margin-top: 2px; }
.cv-ctx .sum { padding: 10px; border-radius: 10px; background: var(--nevoa-3); font-size: 12px; line-height: 1.45; color: var(--ink-2); }
.cv-ctx .take { margin-top: auto; display: grid; place-items: center; height: 34px; border-radius: 10px; background: var(--pedra); color: #fff; font-size: 12.5px; font-weight: 500; }
/* agenda */
.agd { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 12px; flex: 1; min-height: 0; }
.ag-grid { display: grid; grid-template-columns: 56px repeat(3, minmax(0, 1fr)); gap: 6px; padding: 12px; align-content: start; }
.ag-grid .th { font: 600 12px/1 var(--f-text); padding: 4px 4px 8px; display: flex; align-items: center; gap: 6px; }
.ag-grid .th i { width: 8px; height: 8px; border-radius: 3px; }
.ag-grid time { font: 500 11px/1 var(--f-mono); color: var(--ink-3); padding-top: 10px; }
.agc { min-height: 58px; padding: 8px 9px; border-radius: 10px; font-size: 11.5px; line-height: 1.3; }
.agc b { display: block; font-weight: 600; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agc em { display: block; font-style: normal; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agc s { display: inline-block; text-decoration: none; margin-top: 4px; font: 500 9.5px/1 var(--f-mono); color: var(--ink-3); }
.agc.p1 { background: #E3F2EC; } .agc.p2 { background: #E9EEF7; } .agc.p3 { background: #F6EEE3; }
.agc.free { background: transparent; box-shadow: inset 0 0 0 1px dashed var(--line); border: 1px dashed var(--line); color: var(--ink-3); display: grid; place-items: center; }
.agc.fit { box-shadow: inset 0 0 0 1.5px var(--vivo); background: #fff; }
.agc.fit s { color: var(--pedra); }
.agc.now { box-shadow: inset 0 0 0 1.5px var(--pedra); }
.ag-side { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.ag-side li { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; padding: 7px 0; }
.ag-side li + li { box-shadow: 0 -1px 0 var(--line-2); }
.ag-side li em { font-style: normal; color: var(--ink-3); }
.ag-conf { padding: 12px; border-radius: 12px; background: var(--nevoa-3); }
.ag-conf p { font-size: 11.5px; color: var(--ink-3); }
.ag-conf b { font: 600 26px/1.1 var(--f-display); letter-spacing: -0.03em; color: var(--pedra); }
.ag-conf span { font-size: 12px; color: var(--ink-3); margin-left: 4px; }
.ag-conf .bar { display: block; height: 4px; border-radius: 4px; background: var(--line); margin-top: 8px; overflow: hidden; }
.ag-conf .bar i { display: block; height: 100%; width: 95%; background: var(--vivo); border-radius: 4px; }
.ag-foot { font-size: 11.5px; color: var(--ink-3); }
/* financeiro */
.fk { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.fk span { padding: 12px 14px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); min-width: 0; }
.fk em { display: block; font-style: normal; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fk b { display: block; font: 600 19px/1.15 var(--f-display); letter-spacing: -0.03em; margin-top: 4px; white-space: nowrap; }
.fk b.amber { color: var(--ambar); }
.fk b small { font-size: 12px; color: var(--ink-3); font-weight: 500; }
.fb { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 12px; flex: 1; min-height: 0; }
.ext { display: flex; flex-direction: column; overflow: hidden; }
.ext table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.ext th { text-align: left; font: 500 10px/1 var(--f-mono); color: var(--ink-3); padding: 6px 10px; border-bottom: 1px solid var(--line-2); }
.ext td { padding: 7px 10px; white-space: nowrap; border-bottom: 1px solid var(--line-2); }
.ext td:nth-child(2) { font-family: var(--f-mono); font-size: 10.5px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.ext td.v { text-align: right; font-family: var(--f-mono); font-weight: 600; }
.ext tr.out td.v { color: var(--ink-2); }
.ext tr.is-new td { animation: rowin 1s var(--ease); }
.ext tr.is-new .chip { animation: pop .5s var(--ease); }
@keyframes pop { from { transform: scale(.7); } to { transform: scale(1); } }
.ext-f { margin-top: auto; padding: 9px 12px; font: 500 11px/1 var(--f-mono); color: var(--ink-2); border-top: 1px solid var(--line-2); background: #fff; }
.ext-f b { color: var(--pedra); }
.fs-side { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.fs-side .rc { padding: 10px; border-radius: 10px; background: var(--ambar-bg); font-size: 11.5px; line-height: 1.35; }
.fs-side .rc b { display: block; font-size: 12px; }
.fs-side .rc span { display: block; font: 600 13px/1.3 var(--f-mono); color: var(--ambar); }
.fs-side .rc em { font-style: normal; color: var(--ink-3); }
.fs-side .py { padding: 10px; border-radius: 10px; background: var(--nevoa-3); font-size: 12px; }
.fs-side .py b { display: block; }
.fs-side .py .btns { display: flex; gap: 6px; margin-top: 8px; }
.fs-side .py .btns s { text-decoration: none; flex: 1; display: grid; place-items: center; height: 28px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 11.5px; }
.fs-side .py .btns s.on { background: var(--pedra); color: #fff; box-shadow: none; }
.fs-side .lb { font: 500 10.5px/1 var(--f-mono); color: var(--ink-3); padding-top: 4px; }
/* métricas */
.mk { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.mk span { padding: 10px 12px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); min-width: 0; }
.mk em { display: block; font-style: normal; font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk b { display: block; font: 600 18px/1.15 var(--f-display); letter-spacing: -0.03em; margin-top: 3px; white-space: nowrap; }
.mk small { display: block; font-size: 10.5px; color: var(--ink-3); }
.mb { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 12px; flex: 1; min-height: 0; }
.mchart { padding-bottom: 10px; display: flex; flex-direction: column; }
.mchart svg { width: 100%; flex: 1; min-height: 0; display: block; }
.mchart .g { stroke: var(--line-2); stroke-width: 1; fill: none; }
.mchart rect { fill: var(--nevoa); }
.mchart rect.hi { fill: var(--vivo); }
.mchart .ln { fill: none; stroke: var(--pedra); stroke-width: 2; }
.mx { display: flex; justify-content: space-between; padding: 0 14px; font: 500 10px/1 var(--f-mono); color: var(--ink-3); }
.mside { display: flex; flex-direction: column; gap: 12px; }
.msum { padding: 12px; display: flex; gap: 10px; }
.msum .pl { width: 30px; height: 30px; border-radius: 99px; background: var(--pedra); color: #fff; display: grid; place-items: center; flex: none; }
.msum .pl .ico { width: 11px; height: 11px; fill: currentColor; stroke: none; margin-left: 2px; }
.msum p { font: 600 12.5px/1.2 var(--f-text); }
.msum em { display: block; font-style: normal; font-size: 11.5px; line-height: 1.4; color: var(--ink-2); margin-top: 4px; }
.mfun { padding: 12px; display: grid; gap: 8px; }
.mfun span { position: relative; display: flex; justify-content: space-between; padding: 7px 10px; border-radius: 8px; font-size: 11.5px; overflow: hidden; }
.mfun span::before { content: ""; position: absolute; inset: 0; width: var(--w); background: var(--nevoa-2); border-radius: 8px; z-index: 0; }
.mfun span > * { position: relative; z-index: 1; font-style: normal; }
.float { position: absolute; z-index: 5; }
.float > .shell { padding: 5px; border-radius: 20px; background: rgba(255,255,255,.72); box-shadow: inset 0 0 0 1px rgba(16,40,33,.06), 0 30px 60px -28px rgba(16,40,33,.35), 0 8px 18px -10px rgba(13,94,76,.18); }
.float .core { border-radius: 15px; padding: 14px 16px; }
.f-wa { left: -96px; top: 150px; width: 296px; }
.f-wa .who { display: flex; align-items: center; gap: 10px; }
.f-wa .who b { font: 600 13px/1.2 var(--f-text); }
.f-wa .who s { display: block; text-decoration: none; font: 500 11px/1.2 var(--f-mono); color: var(--ink-3); }
.f-wa .src { margin-left: auto; }
.f-wa .msg { margin-top: 12px; padding: 10px 12px; border-radius: 4px 14px 14px 14px; background: var(--nevoa-3); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 13px; line-height: 1.4; }
.f-wa .rep { margin: 8px 0 0 28px; padding: 10px 12px; border-radius: 14px 4px 14px 14px; background: var(--pedra); color: #fff; font-size: 13px; line-height: 1.4; }
.f-wa .rep s { display: block; text-decoration: none; margin-top: 4px; font: 500 10.5px/1 var(--f-mono); color: rgba(255,255,255,.7); text-align: right; }
.f-pix { right: -72px; top: -36px; width: 268px; }
.f-pix .row { display: flex; align-items: center; gap: 12px; }
.f-pix .ok { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--pedra); color: #fff; flex: none; }
.f-pix .ok .ico { width: 18px; height: 18px; stroke-width: 2.2; }
.f-pix b { display: block; font: 600 15px/1.2 var(--f-display); letter-spacing: -0.02em; }
.f-pix s { display: block; text-decoration: none; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.f-pix .match { margin-top: 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; font: 500 10.5px/1.3 var(--f-mono); color: var(--ink-2); }
.f-pix .match span { padding: 7px 8px; border-radius: 9px; background: var(--nevoa-3); box-shadow: inset 0 0 0 1px var(--line-2); }
.f-pix .match .ico { width: 14px; height: 14px; color: var(--vivo); stroke-width: 2.2; }
.f-grow { right: -64px; bottom: 70px; width: 236px; }
.f-grow .k { font-size: 12px; color: var(--ink-3); }
.f-grow .v { font: 600 24px/1.1 var(--f-display); letter-spacing: -0.03em; margin-top: 4px; display: flex; align-items: baseline; gap: 8px; }
.f-grow .v em { font: 500 12px/1 var(--f-text); color: var(--pedra); font-style: normal; }
.f-grow svg { display: block; width: 100%; height: 54px; margin-top: 8px; overflow: visible; }
.painel-note { text-align: center; margin-top: 40px; }
@media (max-width: 1279px) { .f-wa { left: -24px; } .f-pix { right: -16px; } .f-grow { right: -12px; } .cv { grid-template-columns: 250px minmax(0,1fr) 190px; } }
@media (max-width: 1100px) { .float { display: none; } .cv { grid-template-columns: 240px minmax(0, 1fr); } .cv-ctx { display: none; } }
@media (max-width: 1023px) { .pstage { padding-inline: 14px; } }
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: 52px 560px; }
  .app-side { display: none; }
  .app-bar .search { display: none; }
}
@media (max-width: 767px) {
  .ptabs { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 24px; border-radius: 16px; }
  .ptabs button { flex-direction: column; gap: 4px; padding: 6px 2px; min-height: 52px; font-size: 11.5px; border-radius: 12px; }
  .pt-ind { border-radius: 12px; }
  .win { --tilt: 6deg; }
  .win > .shell { padding: 4px; border-radius: 18px; }
  .win .core.app { border-radius: 14px; }
  .app { grid-template-rows: 46px 520px; }
  .app-bar { padding: 0 12px; gap: 8px; }
  .app-bar .org s, .app-bar .right .d { display: none; }
  .scr { padding: 12px; gap: 10px; }
  .scr-h h3 { font-size: 15px; }
  .scr-h .chip:nth-of-type(n+3) { display: none; }
  .cv { grid-template-columns: minmax(0, 1fr); }
  .cv-th { display: none; }
  .agd { grid-template-columns: minmax(0, 1fr); }
  .ext .pnl-h s { display: none; }
  .ext td:last-child .chip { font-size: 10px; padding: 0 6px; height: 20px; }
  .ag-side { display: none; }
  .ag-grid { grid-template-columns: 40px repeat(3, minmax(0, 1fr)); gap: 4px; padding: 8px; }
  .ag-grid .th { font-size: 10.5px; padding: 2px 2px 6px; }
  .agc { min-height: 52px; padding: 6px; font-size: 10.5px; }
  .agc b { font-size: 10.5px; } .agc em { font-size: 10px; } .agc s { display: none; }
  .fk { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
  .fk b { font-size: 16px; }
  .fb { grid-template-columns: minmax(0, 1fr); }
  .fs-side { display: none; }
  .ext th:nth-child(4), .ext td:nth-child(4), .ext th:nth-child(1), .ext td:nth-child(1) { display: none; }
  .ext td:nth-child(2) { max-width: 118px; font-size: 9.5px; }
  .ext td, .ext th { padding: 7px 6px; }
  .mk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk span:nth-child(n+7) { display: none; }
  .mb { grid-template-columns: minmax(0, 1fr); }
  .mside { display: none; }
  .painel-note { margin-top: 28px; }
}

/* ================= FINANCEIRO LIGADO AO BANCO ================= */
.flow { position: relative; margin-top: 8px; }
.flow-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.flow-line .fl-base { fill: none; stroke: rgba(13,94,76,.22); stroke-width: 2; stroke-dasharray: 4 6; }
.flow-line .fl-run { fill: none; stroke: var(--vivo); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 30 2000; animation: flow3 4.2s var(--ease-io) infinite; }
@keyframes flow3 { from { stroke-dashoffset: 30; } to { stroke-dashoffset: -1400; } }
.flow-steps { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.fs { display: flex; flex-direction: column; }
.fs-ui { height: 148px; padding: 14px; display: flex; flex-direction: column; justify-content: center; transition: box-shadow .5s var(--ease), transform .6s var(--ease); }
.fs.is-on .fs-ui { box-shadow: inset 0 0 0 1.5px rgba(34,179,138,.7), var(--sh-2); transform: translateY(-4px); }
.fs-n { margin-top: 22px; width: 28px; height: 28px; border-radius: 99px; display: grid; place-items: center; font: 600 12.5px/1 var(--f-mono); background: #fff; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); transition: background-color .4s, color .4s, box-shadow .4s; }
.fs.is-on .fs-n { background: var(--pedra); color: #fff; box-shadow: none; }
.fs-t { font: 600 18px/1.25 var(--f-display); letter-spacing: -0.02em; margin-top: 12px; }
.fs-p { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); margin-top: 6px; }
.inv-h { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 8px; }
.inv-h .ico { color: var(--pedra); }
.inv-h .chip, .inv-h em { margin-left: auto; }
.inv-h em { font-style: normal; font-size: 10px; color: var(--ink-3); }
.inv-r { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; padding: 4px 0; }
.inv-r em { font-style: normal; color: var(--ink-3); }
.inv-r b { font-size: 12.5px; }
.inv-bar { display: block; height: 6px; border-radius: 6px; margin-top: 8px; background: repeating-linear-gradient(90deg, var(--line-2) 0 18px, transparent 18px 22px); }
.ui-pix { display: flex; align-items: center; gap: 12px; }
.qr { width: 74px; height: 74px; flex: none; display: block; }
.qr svg { width: 100%; height: 100%; display: block; }
.pix-r { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pix-r b { font-size: 13px; }
.pix-r em { font-style: normal; font-size: 10.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pix-r .chip { align-self: flex-start; }
.ui-rec { position: relative; overflow: hidden; }
.scan { position: absolute; left: -14px; right: -14px; top: 0; height: 26px; background: linear-gradient(180deg, rgba(34,179,138,0), rgba(34,179,138,.22), rgba(34,179,138,0)); animation: scan 2.6s var(--ease-io) infinite; pointer-events: none; }
@keyframes scan { 0% { transform: translateY(-30px); } 60%, 100% { transform: translateY(130px); } }
.ext-r { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 6px; align-items: center; padding: 5px 6px; border-radius: 7px; font-size: 10.5px; }
.ext-r time { font: 500 10px/1 var(--f-mono); color: var(--ink-3); }
.ext-r em { display: block; min-width: 0; font-style: normal; font-family: var(--f-mono); font-size: 9.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ext-r b { font: 600 10.5px/1 var(--f-mono); }
.ext-r.is-hit { background: var(--nevoa-2); box-shadow: inset 0 0 0 1px rgba(34,179,138,.5); }
.ui-ok { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.ok-i { width: 34px; height: 34px; border-radius: 11px; background: var(--pedra); color: #fff; display: grid; place-items: center; margin-bottom: 4px; }
.ok-i .ico { stroke-width: 2.4; }
.ui-ok > b { font: 600 15px/1.2 var(--f-display); }
.ui-ok > em { font-style: normal; font-size: 12px; color: var(--ink-3); }
.ok-k { display: flex; justify-content: space-between; width: 100%; margin-top: 6px; padding-top: 6px; box-shadow: 0 -1px 0 var(--line-2); font-size: 11.5px; }
.ok-k em { font-style: normal; color: var(--ink-3); }
.ok-k b { color: var(--pedra); }
.regua { display: flex; align-items: center; gap: 10px; margin-top: 36px; font-size: 14.5px; color: var(--ink-2); }
.regua .ico { color: var(--pedra); }
.bens { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 64px; padding-top: 40px; box-shadow: 0 -1px 0 var(--line); }
.ben-n { display: block; font: 600 40px/1 var(--f-display); letter-spacing: -0.045em; color: var(--pedra); }
.ben-n span { font-size: 18px; letter-spacing: -0.02em; color: var(--ink-3); font-weight: 500; }
.bens h3 { font: 600 17px/1.3 var(--f-display); letter-spacing: -0.015em; margin-top: 14px; }
.bens p { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); margin-top: 8px; }
.aprova { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: center; margin-top: 64px; }
.apv { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.apv-i { width: 38px; height: 38px; border-radius: 12px; background: var(--nevoa-2); color: var(--pedra); display: grid; place-items: center; flex: none; }
.apv-t { min-width: 0; }
.apv-t b { display: block; font-size: 14px; white-space: nowrap; }
.apv-t em { display: block; font-style: normal; font-size: 12px; color: var(--ink-3); }
.apv-b { margin-left: auto; display: flex; gap: 6px; }
.apv-b s { text-decoration: none; display: grid; place-items: center; height: 32px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 500; background: var(--line-2); color: var(--ink-2); }
.apv-b s.on { background: var(--pedra); color: #fff; animation: breathe 2.4s var(--ease-io) infinite; }
@keyframes breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(34,179,138,.4); } 50% { box-shadow: 0 0 0 6px rgba(34,179,138,0); } }
@media (max-width: 1180px) { .flow-steps { gap: 12px; } .fs-ui { padding: 12px; } .ext-r { grid-template-columns: 30px minmax(0,1fr) auto; } }
@media (max-width: 1023px) {
  .flow-steps { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .fs { display: grid; grid-template-columns: 300px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 24px; align-items: start; }
  .fs-ui { grid-row: 1 / 4; }
  .fs-n { margin-top: 6px; }
  .bens { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .aprova { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 767px) {
  .fs { grid-template-columns: minmax(0, 1fr); }
  .fs-ui { grid-row: auto; height: 132px; }
  .fs-n { margin-top: 16px; }
  .bens { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 48px; padding-top: 32px; }
  .ben-n { font-size: 34px; }
  .regua { align-items: flex-start; }
  .apv { flex-wrap: wrap; }
  .apv-b { margin-left: 50px; }
}

/* ================= SISTEMA SOB MEDIDA ================= */
.sys-scene { position: relative; height: 600px; margin: -10px calc(var(--gut) * -1) 24px; overflow: hidden; }
@supports (overflow: clip) { .sys-scene { overflow: clip; } }
.sys-scene .stage { --sc: .8; top: 50%; }
.sysp { --w: 780px; --h: 780px; --d: 16px; --r: 30px; --side-a: #C9DDD5; --side-b: #E3EEEA; --blur: 34px; --shx: 18px; --shy: 30px; }
.sysp > .sh { background: rgba(13,94,76,.2); }
.sysp > .top { background: linear-gradient(135deg, #FFFFFF 0%, #F6FAF8 60%, #EEF6F2 100%); box-shadow: inset 0 0 0 1px rgba(13,94,76,.10); }
.sysp .wire { position: absolute; inset: 24px; border-radius: 20px; border: 1.5px dashed rgba(13,94,76,.15); }
.sysm { --w: 176px; --h: 120px; --d: 12px; --r: 16px; --z: 16px; }
.sysm .top { padding: 14px; display: flex; flex-direction: column; justify-content: space-between; transition: box-shadow .5s var(--ease); }
.sysm .top .ic { width: 30px; height: 30px; border-radius: 9px; background: var(--nevoa-2); color: var(--pedra); display: grid; place-items: center; transition: background-color .4s, color .4s; }
.sysm .top .ic .ico { width: 16px; height: 16px; }
.sysm .top b { font: 600 15px/1.15 var(--f-display); letter-spacing: -0.02em; color: var(--grafite); }
.sysm .top s { text-decoration: none; font: 500 10px/1 var(--f-mono); color: var(--ink-3); }
.sysm.on .top { box-shadow: inset 0 0 0 2px var(--vivo); }
.sysm.on .top .ic { background: var(--pedra); color: #fff; }
.sysa { --w: 200px; --h: 200px; --d: 28px; --r: 32px; --z: 16px; --side-a: #0A4A3C; --side-b: #11705A; --face: linear-gradient(135deg, #1B8C6E 0%, #0D5E4C 55%, #0B5242 100%); --blur: 22px; }
.sysa > .sh { background: rgba(13,94,76,.45); }
.sysa .top { box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.sysa .glowpad { position: absolute; inset: 36px; border-radius: 999px; background: radial-gradient(closest-side, rgba(111,211,178,.55), rgba(111,211,178,0)); animation: glow 4.8s var(--ease-io) infinite; }
.sys-up { top: -162px; }
.sys-upsh { top: -60px; }
.sysa .top::after { content: ""; position: absolute; inset: 12px; border-radius: 24px; box-shadow: inset 0 0 0 1px rgba(207,232,221,.22); }
.sys-traces { position: absolute; left: -390px; top: -390px; width: 780px; height: 780px; transform: translateZ(17px); overflow: visible; }
.sys-traces .tr { fill: none; stroke: rgba(13,94,76,.28); stroke-width: 2; stroke-linecap: round; }
.sys-traces .fl { fill: none; stroke: var(--vivo); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 24 500; animation: flow 3.6s linear infinite; }
.sys-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sl { display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 20px; border-radius: 18px; background: rgba(255,255,255,.66); box-shadow: inset 0 0 0 1px rgba(16,40,33,.06); transition: background-color .4s var(--ease), box-shadow .4s var(--ease), transform .5s var(--ease); }
.sl:hover, .sl.on { background: #fff; box-shadow: inset 0 0 0 1px rgba(34,179,138,.5), var(--sh-1); }
.sl .ic { width: 34px; height: 34px; border-radius: 10px; background: var(--nevoa-2); color: var(--pedra); display: grid; place-items: center; }
.sl b { font: 600 15.5px/1.25 var(--f-display); letter-spacing: -0.015em; margin-top: 4px; }
.sl p { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.sys-note { text-align: center; max-width: 64ch; margin: 24px auto 0; }
.ja { margin-top: 48px; padding: 28px 30px; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 36px; align-items: center; }
.ja-h p { font-size: 15px; color: var(--ink-2); margin-top: 8px; line-height: 1.5; }
.ja-l { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.ja-l li { display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.ja-l .ico { color: var(--pedra); width: 22px; height: 22px; }
.ja-l b { font: 600 14px/1.25 var(--f-text); color: var(--grafite); margin-top: 4px; }
@media (max-width: 1180px) { .sys-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ja { grid-template-columns: minmax(0, 1fr); gap: 20px; } }
@media (max-width: 1023px) { .sys-scene { height: 520px; } .sys-scene .stage { --sc: .62; } .ja-l { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .sys-scene { height: 300px; margin-bottom: 12px; }
  .sys-scene .stage { --sc: .34; }
  .sys-list { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .sl { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 12px; padding: 14px 16px; }
  .sl b { margin-top: 0; flex: 1; min-width: 0; }
  .sl p { flex-basis: 100%; }
  .ja { padding: 20px 18px; margin-top: 36px; }
  .ja-l { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ja-l li { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; }
  .ja-l li .ico { grid-row: 1 / 3; margin-top: 2px; }
  .ja-l b { margin-top: 0; }
}

/* ================= MÓDULOS ================= */
.mod-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.mg { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 24px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--sh-1); overflow: hidden; transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.mg:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(34,179,138,.4), var(--sh-2); }
.mg.feat { background: linear-gradient(160deg, #fff 30%, var(--nevoa-2)); }
.mg.feat-2 { background: linear-gradient(160deg, #fff 30%, #EEF3F6); }
.mg .ic { width: 40px; height: 40px; border-radius: 12px; background: var(--nevoa-2); color: var(--pedra); display: grid; place-items: center; }
.mg.feat .ic { background: var(--pedra); color: #fff; }
.mg h3 { font: 600 18px/1.25 var(--f-display); letter-spacing: -0.02em; margin-top: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mg > p { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.mg ul { margin-top: 6px; display: grid; gap: 8px; padding-top: 12px; box-shadow: 0 -1px 0 var(--line-2); }
.mg li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 8px; font-size: 13.5px; line-height: 1.4; color: var(--grafite); }
.mg li .ico { width: 14px; height: 14px; color: var(--vivo); stroke-width: 2.4; margin-top: 2px; }
@media (max-width: 1100px) { .mod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .mod-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; } .mg { padding: 18px; } }

/* ================= ESCALA ================= */
.stairs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: end; }
.stairs li { display: flex; flex-direction: column; }
.st-b { height: calc(56px + var(--h) * 52px); display: flex; align-items: flex-end; margin-bottom: 20px; }
.st-b i { display: block; width: 100%; height: 100%; border-radius: 16px 16px 6px 6px; background: linear-gradient(180deg, #fff, var(--nevoa-2)); box-shadow: inset 0 0 0 1px rgba(13,94,76,.12), 0 18px 40px -26px rgba(13,94,76,.5); transform-origin: 50% 100%; position: relative; overflow: hidden; }
.st-b i::after { content: ""; position: absolute; left: 14px; right: 14px; top: 14px; height: 8px; border-radius: 4px; background: repeating-linear-gradient(90deg, var(--vivo) 0 calc(25% - 4px), transparent calc(25% - 4px) 25%); -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--h) * 25%), transparent calc(var(--h) * 25%)); mask-image: linear-gradient(90deg, #000 calc(var(--h) * 25%), transparent calc(var(--h) * 25%)); }
.stairs li:last-child .st-b i { background: linear-gradient(180deg, #1B8C6E, var(--pedra)); box-shadow: 0 24px 48px -24px rgba(13,94,76,.7); }
.stairs li:last-child .st-b i::after { background: repeating-linear-gradient(90deg, #CFE8DD 0 calc(25% - 4px), transparent calc(25% - 4px) 25%); }
.st-n { font: 500 13px/1 var(--f-mono); color: var(--pedra); }
.stairs h3 { font: 600 18px/1.25 var(--f-display); letter-spacing: -0.02em; margin-top: 8px; }
.stairs p { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); margin-top: 6px; }
.conta { margin-top: 56px; padding: 28px 32px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.conta-t { font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }
.conta-bars { display: grid; gap: 14px; }
.cb { display: grid; grid-template-columns: 120px minmax(0, 1fr) 56px; gap: 12px; align-items: center; }
.cb-k { font-size: 13.5px; color: var(--ink-2); }
.cb-t { height: 14px; border-radius: 8px; overflow: hidden; }
.cb-t i { display: block; height: 100%; width: var(--w); border-radius: 8px; background: #CDD6D3; transform-origin: 0 50%; }
.cb-us .cb-t i { background: linear-gradient(90deg, var(--pedra), var(--vivo)); }
.cb b { font: 600 15px/1 var(--f-mono); text-align: right; }
.cb-us b { color: var(--pedra); }
@media (max-width: 1023px) { .stairs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 32px; } .conta { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
@media (max-width: 767px) {
  .stairs { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .stairs li { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; align-items: end; }
  .st-b { grid-row: 1 / 4; height: calc(30px + var(--h) * 22px); margin: 0; align-self: end; }
  .stairs h3 { margin-top: 4px; }
  .conta { padding: 20px 18px; margin-top: 40px; }
  .cb { grid-template-columns: 96px minmax(0, 1fr) 48px; gap: 8px; }
}

/* ================= PARA QUEM ================= */
.quem-box { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: stretch; }
.quem-tabs { display: grid; gap: 4px; align-content: start; }
.qt { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px; border-radius: 14px; text-align: left; font: 500 15px/1.25 var(--f-text); color: var(--ink-2); transition: background-color .3s var(--ease), color .3s, box-shadow .3s; }
.qt .ico { color: var(--ink-3); transition: color .3s; }
.qt:hover { color: var(--grafite); background: rgba(16,40,33,.03); }
.qt[aria-selected="true"] { background: #fff; color: var(--grafite); box-shadow: inset 0 0 0 1px var(--line), var(--sh-1); }
.qt[aria-selected="true"] .ico { color: var(--pedra); }
.quem-panel { padding: 36px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; min-height: 340px; }
.qp-dor { display: flex; flex-direction: column; gap: 14px; padding-right: 36px; box-shadow: 1px 0 0 var(--line-2); }
.qp-k { font: 500 12px/1 var(--f-mono); color: var(--ink-3); }
.qp-n { font: 600 56px/1 var(--f-display); letter-spacing: -0.05em; color: var(--grafite); }
.qp-dor p { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.qp-faz { display: flex; flex-direction: column; gap: 14px; }
.qp-faz h3 { font: 600 22px/1.25 var(--f-display); letter-spacing: -0.025em; }
.qp-faz p { font-size: 16px; line-height: 1.6; color: var(--grafite); }
.qp-faz .chip { align-self: flex-start; height: 26px; padding: 0 10px; font-size: 12px; }
.quem-note { margin-top: 20px; }
@media (max-width: 1023px) { .quem-box { grid-template-columns: minmax(0, 1fr); } .quem-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .quem-tabs { display: flex; overflow-x: auto; gap: 6px; scrollbar-width: none; margin: 0 -20px; padding: 2px 20px 4px; }
  .quem-tabs::-webkit-scrollbar { display: none; }
  .qt { flex: none; min-height: 44px; border-radius: 999px; font-size: 14px; padding: 0 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
  .qt[aria-selected="true"] { background: var(--pedra); color: #fff; box-shadow: none; }
  .qt[aria-selected="true"] .ico { color: rgba(255,255,255,.8); }
  .quem-panel { grid-template-columns: minmax(0, 1fr); padding: 22px 18px; gap: 20px; min-height: 0; }
  .qp-dor { padding-right: 0; padding-bottom: 20px; box-shadow: 0 1px 0 var(--line-2); }
  .qp-n { font-size: 44px; }
  .qp-faz h3 { font-size: 19px; }
}

/* ================= COMPARAÇÃO ================= */
.ctab { border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--sh-1); overflow: hidden; }
.ct-row { display: grid; grid-template-columns: 220px minmax(0, 1fr) minmax(0, 1.1fr); }
.ct-row > span { display: flex; align-items: flex-start; gap: 10px; padding: 16px 22px; font-size: 15px; line-height: 1.45; }
.ct-row + .ct-row > span { box-shadow: 0 -1px 0 var(--line-2); }
.ct-row > span:first-child { font-weight: 600; color: var(--grafite); }
.ct-row > span:nth-child(2) { color: var(--ink-3); }
.ct-row > span:nth-child(2) .ico { color: #B4BCB9; margin-top: 2px; }
.ct-row > span:nth-child(3) { background: var(--nevoa-3); color: var(--grafite); }
.ct-row > span:nth-child(3) .ico { color: var(--vivo); stroke-width: 2.2; margin-top: 2px; }
.ct-head > span { font: 500 12.5px/1 var(--f-mono) !important; color: var(--ink-3) !important; padding-block: 16px; align-items: center; }
.ct-head > span:nth-child(3) { color: var(--pedra) !important; font-weight: 600 !important; }
.ct-head .ico { width: 11px; height: 15px; fill: var(--pedra); stroke: none; margin: 0 !important; }
.comp-fecho { margin-top: 32px; }
@media (max-width: 767px) {
  .ctab { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; display: grid; gap: 10px; }
  .ct-head { display: none !important; }
  .ct-row { grid-template-columns: minmax(0, 1fr); border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
  .ct-row + .ct-row > span { box-shadow: none; }
  .ct-row > span { padding: 12px 16px; font-size: 14.5px; }
  .ct-row > span:first-child { padding-bottom: 4px; font-size: 15px; }
  .ct-row > span:nth-child(2) { padding-top: 6px; }
}

/* ================= SEGURANÇA ================= */
.seg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 40px; }
.seg-grid li { padding-top: 22px; box-shadow: 0 -1px 0 var(--line); }
.sg-i { width: 40px; height: 40px; border-radius: 12px; background: var(--nevoa-2); color: var(--pedra); display: grid; place-items: center; }
.seg-grid h3 { font: 600 18px/1.25 var(--f-display); letter-spacing: -0.02em; margin-top: 16px; }
.seg-grid p { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); margin-top: 8px; }
@media (max-width: 1023px) { .seg-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 767px) { .seg-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

/* ================= COMO A JADEIA ENTRA ================= */
.steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.steps-rail { position: absolute; left: 14px; right: 14px; top: 14px; height: 2px; background: var(--line); border-radius: 2px; }
.steps-rail i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--vivo), var(--pedra)); border-radius: 2px; transform-origin: 0 50%; transform: scaleX(0); }
.steps li { position: relative; display: flex; flex-direction: column; gap: 10px; }
.sp-n { width: 30px; height: 30px; border-radius: 99px; display: grid; place-items: center; background: var(--pedra); color: #fff; font: 600 11.5px/1 var(--f-mono); box-shadow: 0 0 0 6px var(--papel); }
.sp-who { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font: 500 11.5px/1 var(--f-text); background: var(--nevoa-2); color: var(--pedra); margin-top: 10px; }
.sp-who .ico { width: 11px; height: 14px; fill: var(--pedra); stroke: none; }
.sp-who.sp-you { background: #fff; color: var(--grafite); box-shadow: inset 0 0 0 1px var(--line); }
.sp-who.sp-you .ico { fill: none; stroke: currentColor; width: 13px; height: 13px; }
.steps h3 { font: 600 18px/1.25 var(--f-display); letter-spacing: -0.02em; }
.steps p { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.fmts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 72px; align-items: stretch; }
.fmt { position: relative; padding: 26px 26px 28px; display: flex; flex-direction: column; gap: 10px; }
.fmt h3 { font: 600 20px/1.2 var(--f-display); letter-spacing: -0.025em; }
.fmt-w { font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.fmt ul { display: grid; gap: 9px; margin-top: 8px; padding-top: 16px; box-shadow: 0 -1px 0 var(--line-2); }
.fmt li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px; font-size: 14px; line-height: 1.45; }
.fmt li .ico { color: var(--vivo); stroke-width: 2.4; margin-top: 3px; }
.fmt-top { box-shadow: inset 0 0 0 1.5px var(--vivo), var(--sh-3); }
.fmt-badge { position: absolute; top: -11px; left: 24px; height: 24px; padding: 0 10px; font-size: 11.5px; }
.fmt-addon { margin-top: 18px; }
.gar { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; }
.gar-main { padding: 32px; border-radius: 24px; background: linear-gradient(150deg, #fff 20%, var(--nevoa-2)); box-shadow: inset 0 0 0 1.5px rgba(34,179,138,.55), var(--sh-2); }
.gar-i { width: 44px; height: 44px; border-radius: 14px; background: var(--pedra); color: #fff; display: grid; place-items: center; }
.gar-main h3 { font: 600 26px/1.15 var(--f-display); letter-spacing: -0.035em; margin-top: 18px; }
.gar-main p { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); margin-top: 12px; }
.gar-main .gar-cond { font-size: 13.5px; color: var(--ink-3); }
.gar-side { display: grid; gap: 16px; }
.gar-side > div { padding: 24px 26px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.gar-side h3 { font: 600 18px/1.25 var(--f-display); letter-spacing: -0.02em; }
.gar-side p { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); margin-top: 8px; }
@media (max-width: 1023px) {
  .steps { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 36px; }
  .steps-rail { display: none; }
  .fmts { grid-template-columns: minmax(0, 1fr); }
  .gar { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .steps { grid-template-columns: minmax(0, 1fr); row-gap: 28px; padding-left: 0; }
  .steps li { padding-left: 46px; }
  .sp-n { position: absolute; left: 0; top: 0; }
  .sp-who { margin-top: 0; }
  .steps-rail { display: block; left: 14px; right: auto; top: 14px; bottom: 14px; width: 2px; height: auto; }
  .steps-rail i { transform-origin: 50% 0; }
  .fmts { margin-top: 48px; gap: 22px; }
  .fmt { padding: 24px 18px 20px; }
  .gar-main { padding: 22px 18px; }
  .gar-main h3 { font-size: 22px; }
  .gar-side > div { padding: 20px 18px; }
}

/* ================= PERGUNTAS ================= */
.faq-in { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 56px; align-items: start; }
.faq-h { position: sticky; top: calc(var(--nav-h) + 32px); }
.faq-h .lead { margin-top: 12px; }
.qa { box-shadow: 0 1px 0 var(--line); }
.qa:first-child { box-shadow: 0 -1px 0 var(--line), 0 1px 0 var(--line); }
.qa h3 { margin: 0; }
.qa button { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; min-height: 64px; padding: 18px 0; text-align: left; font: 600 17px/1.35 var(--f-display); letter-spacing: -0.015em; color: var(--grafite); }
.qa-i { position: relative; width: 28px; height: 28px; border-radius: 99px; background: var(--nevoa-3); box-shadow: inset 0 0 0 1px var(--line); flex: none; transition: background-color .3s, transform .5s var(--ease); }
.qa-i::before, .qa-i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.6px; margin: -.8px 0 0 -5.5px; background: var(--pedra); border-radius: 2px; transition: transform .5s var(--ease); }
.qa-i::after { transform: rotate(90deg); }
.qa.is-open .qa-i { background: var(--pedra); transform: rotate(180deg); }
.qa.is-open .qa-i::before, .qa.is-open .qa-i::after { background: #fff; }
.qa.is-open .qa-i::after { transform: rotate(0deg); }
.qa-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.qa-a > p { overflow: hidden; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); max-width: 68ch; }
.qa.is-open .qa-a { grid-template-rows: 1fr; }
.qa.is-open .qa-a > p { padding-bottom: 22px; }
@media (max-width: 1023px) { .faq-in { grid-template-columns: minmax(0, 1fr); gap: 24px; } .faq-h { position: static; } }
@media (max-width: 767px) { .qa button { font-size: 16px; min-height: 60px; padding: 14px 0; } }

/* ================= CTA FINAL (único bloco escuro) ================= */
.final { padding-block: 24px var(--sec); }
.final-box { position: relative; overflow: hidden; border-radius: 32px; background: radial-gradient(70% 90% at 85% 0%, #0E5A49 0%, rgba(14,90,73,0) 60%), linear-gradient(160deg, #0A3A2F, var(--profundo) 70%); color: #F4F2EC; padding: 88px 72px; box-shadow: 0 40px 100px -50px rgba(6,42,34,.7); }
.final-glow { position: absolute; right: -120px; top: -120px; width: 520px; height: 520px; border-radius: 999px; background: radial-gradient(closest-side, rgba(34,179,138,.28), rgba(34,179,138,0)); pointer-events: none; animation: glow 7s var(--ease-io) infinite; }
.final-copy { position: relative; max-width: 760px; }
.final-hook { font: 500 17px/1.45 var(--f-text); color: #9FD9C2; }
.player { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding: 10px 18px 10px 10px; border-radius: 999px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(207,232,221,.14); max-width: 520px; }
.pl-b { width: 44px; height: 44px; border-radius: 99px; background: #F4F2EC; color: var(--profundo); display: grid; place-items: center; flex: none; transition: transform .3s var(--ease); }
.pl-b:active { transform: scale(.95); }
.pl-b .ico { width: 15px; height: 15px; fill: currentColor; stroke: none; margin-left: 2px; }
.pl-b.is-on .ico { margin-left: 0; fill: none; stroke: currentColor; stroke-width: 2.6; }
.pl-w { flex: 1; display: flex; align-items: center; gap: 3px; height: 32px; min-width: 0; }
.pl-w i { flex: 1; min-width: 2px; border-radius: 3px; background: rgba(207,232,221,.28); height: var(--h, 40%); transform-origin: 50% 50%; transition: background-color .2s; }
.pl-w i.p { background: #6FD3B2; }
.pl-t { display: flex; flex-direction: column; font-size: 13px; white-space: nowrap; }
.pl-t em { font-style: normal; font-size: 11.5px; color: rgba(207,232,221,.6); }
.caption { margin-top: 26px; font: 500 22px/1.5 var(--f-display); letter-spacing: -0.02em; color: rgba(244,242,236,.36); max-width: 34em; }
.caption .w { transition: color .25s; }
.caption .w.on { color: #F4F2EC; }
.no-gsap .caption, .rm .caption { color: #F4F2EC; }
.final-t { color: #fff; margin-top: 40px; }
.final-sub { font-size: 17px; line-height: 1.6; color: rgba(244,242,236,.78); margin-top: 16px; max-width: 56ch; }
.final-ctas { margin-top: 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.final-ctas .micro { color: rgba(207,232,221,.66); }
@media (max-width: 767px) {
  .final { padding-block: 8px var(--sec); }
  .final .wrap { padding-inline: 12px; }
  .final-box { padding: 48px 20px; border-radius: 24px; }
  .caption { font-size: 18px; }
  .final-t { margin-top: 32px; }
  .final-sub { font-size: 16px; }
  .final-ctas .btn { width: 100%; justify-content: space-between; }
  .pl-t em { display: none; }
  .pl-w i:nth-child(n+27) { display: none; }
}

/* ================= RODAPÉ ================= */
.foot { background: var(--papel); padding: 64px 0 40px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr) minmax(0, .9fr) minmax(0, 1.6fr); gap: 40px; }
.foot-brand img { height: 30px; width: auto; display: block; }
.foot-brand p { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin-top: 16px; max-width: 30ch; }
.foot-col { display: flex; flex-direction: column; }
.foot-col h3 { font: 500 12px/1 var(--f-mono); color: var(--ink-3); margin-bottom: 8px; }
.foot-col a, .foot-col span { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--ink-2); }
.foot-col a:hover { color: var(--grafite); }
.foot-aviso p { font-size: 13px; line-height: 1.55; color: var(--ink-3); }
.foot-aviso p + p { margin-top: 10px; }
.foot-src { margin-top: 40px; padding-top: 24px; box-shadow: 0 -1px 0 rgba(16,40,33,.08); font-size: 12.5px; line-height: 1.55; color: var(--ink-3); max-width: 100ch; }
.foot-bar { margin-top: 18px; font-size: 13px; color: var(--ink-3); }
@media (max-width: 1023px) { .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 767px) {
  .foot { padding: 48px 0 32px; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .foot-col a, .foot-col span { min-height: 44px; }
}

/* portes: autônomo, PME, grande empresa */
.portes-g { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.porte { padding: 28px 26px 26px; display: flex; flex-direction: column; gap: 12px; }
.porte-i { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--nevoa); color: var(--pedra); }
.porte-k { margin: 6px 0 0; font: 500 12px/1.3 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--pedra); }
.porte h3 { margin: 0; font-size: 22px; line-height: 1.2; letter-spacing: -.01em; }
.porte ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px; }
.porte ul li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.porte ul .ico { color: var(--pedra); margin-top: 3px; }
.porte-top { box-shadow: inset 0 0 0 1.5px var(--pedra), var(--sh-1); }
.portes .sec-cta { margin-top: 40px; }
@media (max-width: 899px) { .portes-g { grid-template-columns: minmax(0, 1fr); gap: 14px; } .porte h3 { font-size: 20px; } }