/* =========================================================
   Benetti Sistemas — sistema "A Linha" · v2 (movimento)
   ========================================================= */

@property --bg      { syntax: '<color>'; inherits: true; initial-value: #F5F3EE; }
@property --fg      { syntax: '<color>'; inherits: true; initial-value: #0B2545; }
@property --muted   { syntax: '<color>'; inherits: true; initial-value: #5B6472; }
@property --rule    { syntax: '<color>'; inherits: true; initial-value: #D5D8DD; }
@property --link    { syntax: '<color>'; inherits: true; initial-value: #0B7A57; }
@property --surface { syntax: '<color>'; inherits: true; initial-value: #FFFFFF; }

:root {
  --navy: #0B2545; --navy-2: #11305A; --navy-3: #1B3F6E;
  --mint: #66F1C2; --mint-2: #8AF5D2; --mint-ink: #0B7A57;
  --paper: #F5F3EE; --white: #FFFFFF;
  --graphite: #5B6472; --steel: #9AA3B2; --line: #D5D8DD;
  --sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --wrap: 1280px;
  --gutter: clamp(20px, 4vw, 56px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --r-lg: 28px; --r-md: 20px; --r-sm: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; font-family: var(--sans); font-size: 18px; line-height: 1.6;
  background: var(--bg); color: var(--fg); -webkit-font-smoothing: antialiased; overflow-x: clip;
  transition: --bg .8s var(--ease), --fg .8s var(--ease), --muted .8s var(--ease),
              --rule .8s var(--ease), --link .8s var(--ease), --surface .8s var(--ease);
}
body[data-scene="navy"] {
  --bg: #0B2545; --fg: #FFFFFF; --muted: #A9B2C1; --rule: rgba(255,255,255,.14);
  --link: #66F1C2; --surface: #11305A;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--link); }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 999px; font-weight: 600; }
.skip:focus { top: 12px; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* ---------- Tipografia ---------- */
h1, h2, h3 { margin: 0; letter-spacing: -0.03em; font-weight: 800; }
.display { font-size: clamp(3rem, 1.4rem + 5.4vw, 6.25rem); line-height: .94; }
.h2 { font-size: clamp(2.25rem, 1.2rem + 3.4vw, 4.5rem); line-height: .98; }
.h3 { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; }
.light { font-weight: 200; }
.mint-text { color: var(--mint); }
body:not([data-scene="navy"]) .mint-text { color: var(--mint-ink); }
.lead { font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); color: var(--muted); max-width: 34em; }
.tag { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--muted); }
.tag i { width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; font: 500 11px/1 var(--mono); font-style: normal; box-shadow: inset 0 0 0 1.5px var(--rule); color: var(--fg); }
.mono { font-family: var(--mono); }
.caption { font-family: var(--mono); font-size: 12px; color: var(--muted); }

.tbd { text-decoration: underline dashed; text-decoration-color: currentColor; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-skip-ink: none; }
html[data-draft="off"] .tbd { text-decoration: none; }

/* Linhas que se revelam (SplitText) */
.split-line { overflow: clip; padding-bottom: .06em; margin-bottom: -.06em; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 0 8px 0 24px; border-radius: 999px; border: 0; cursor: pointer;
  font: 600 16px/1 var(--sans); text-decoration: none; transition: background-color .3s, color .3s, transform .3s var(--ease);
}
.btn .arrow { width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center; transition: transform .4s var(--ease); }
.btn .arrow svg { width: 15px; height: 15px; }
.btn:hover .arrow { transform: rotate(-45deg); }
.btn--primary { background: var(--navy); color: #fff; }
.btn--primary .arrow { background: var(--mint); color: var(--navy); }
.btn--primary:hover { background: var(--navy-2); }
body[data-scene="navy"] .btn--primary, .on-navy .btn--primary { background: var(--mint); color: var(--navy); }
body[data-scene="navy"] .btn--primary .arrow, .on-navy .btn--primary .arrow { background: var(--navy); color: var(--mint); }
.btn--ghost { padding: 0 24px; background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--rule); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--fg); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- A Linha ---------- */
.linha { display: flex; height: 3px; width: 100%; }
.linha i { display: block; }
.linha i:first-child { flex: 4; background: var(--fg); }
.linha i:last-child { flex: 1; background: var(--mint); }

/* ---------- Abertura ---------- */
.intro { display: none; }
html.has-intro .intro { display: grid; place-items: center; position: fixed; inset: 0; z-index: 150; background: var(--navy); }
.intro__mark { display: grid; justify-items: center; gap: 28px; }
.intro__b { width: 72px; height: auto; overflow: visible; }
.intro__b path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.intro__line { width: 200px; height: 3px; display: flex; }
.intro__line i { display: block; transform: scaleX(0); transform-origin: left; }
.intro__line i:first-child { flex: 4; background: #fff; }
.intro__line i:last-child { flex: 1; background: var(--mint); }
.intro__word { font: 500 13px/1 var(--mono); letter-spacing: .5em; color: var(--steel); opacity: 0; padding-left: .5em; }
html.has-intro .hero-anim { visibility: hidden; }

/* ---------- Menu claro em pílula ---------- */
.nav {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 100;
  width: min(1040px, calc(100% - 24px)); display: flex; align-items: center; gap: 8px;
  padding: 6px 6px 6px 20px; border-radius: 999px;
  background: rgba(255, 255, 255, .9); color: var(--navy);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 0 0 1px rgba(11, 37, 69, .08), 0 14px 34px -18px rgba(11, 37, 69, .45);
  transition: transform .5s var(--ease), box-shadow .3s;
}
.nav.is-hidden { transform: translate(-50%, -140%); }
.nav__brand { display: flex; align-items: center; flex-shrink: 0; }
.nav__brand img { height: 36px; width: auto; }
.nav__links { position: relative; display: flex; align-items: center; gap: 2px; margin: 0 auto; padding: 4px; list-style: none; border-radius: 999px; background: rgba(11, 37, 69, .045); }
.nav__links a {
  position: relative; z-index: 1; display: block; padding: 9px 16px; border-radius: 999px;
  color: var(--graphite); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: color .35s;
}
.nav__links a:hover { color: var(--navy); }
.nav__links a[aria-current="true"] { color: #fff; }
.nav__pill { position: absolute; z-index: 0; top: 4px; left: 0; height: calc(100% - 8px); width: 0; border-radius: 999px; background: var(--navy); opacity: 0; pointer-events: none; }
.nav__cta {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 6px 0 18px;
  border-radius: 999px; background: var(--mint); color: var(--navy); font-weight: 700; font-size: 14px; text-decoration: none; transition: background-color .25s;
}
.nav__cta .arrow { width: 34px; height: 34px; border-radius: 999px; background: var(--navy); color: var(--mint); display: grid; place-items: center; transition: transform .4s var(--ease); }
.nav__cta .arrow svg { width: 13px; height: 13px; }
.nav__cta:hover { background: var(--mint-2); }
.nav__cta:hover .arrow { transform: rotate(-45deg); }
.nav__cta .short { display: none; }
.nav__toggle { display: none; margin-left: auto; min-height: 44px; padding: 0 16px; border-radius: 999px; background: rgba(11, 37, 69, .06); border: 0; color: var(--navy); font: 600 14px/1 var(--sans); cursor: pointer; }
.nav__progress { position: absolute; left: 28px; right: 28px; bottom: -1px; height: 2px; pointer-events: none; border-radius: 2px; overflow: hidden; }
.nav__progress i { display: block; height: 100%; background: var(--navy); transform-origin: left; transform: scaleX(0); }
@media (max-width: 960px) {
  .nav { padding-left: 16px; }
  .nav__links, .nav__progress { display: none; }
  .nav__toggle { display: inline-flex; align-items: center; }
}
@media (max-width: 520px) {
  .nav__cta .long { display: none; } .nav__cta .short { display: inline; }
  .nav__cta .arrow { display: none; } .nav__cta { padding: 0 16px; }
  .nav__brand img { height: 30px; }
}

.sheet {
  position: fixed; inset: 0; z-index: 90; background: var(--paper); color: var(--navy);
  padding: 104px var(--gutter) 28px; display: flex; flex-direction: column;
  clip-path: circle(0% at calc(100% - 60px) 40px); visibility: hidden;
  transition: clip-path .7s var(--ease), visibility 0s .7s;
}
.sheet.is-open { clip-path: circle(150% at calc(100% - 60px) 40px); visibility: visible; transition: clip-path .7s var(--ease); }
.sheet ul { list-style: none; margin: 0; padding: 0; }
.sheet li a { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--navy); text-decoration: none; font-size: 32px; font-weight: 200; letter-spacing: -0.02em; }
.sheet li a small { font: 500 12px/1 var(--mono); color: var(--graphite); }
.sheet li a[aria-current="true"] { font-weight: 800; }
.sheet__foot { margin-top: auto; display: grid; gap: 12px; }
.sheet__foot .btn { width: 100%; justify-content: space-between; }

/* ---------- Seções ---------- */
.section { position: relative; padding-block: clamp(96px, 13vw, 180px); }
.section--tight { padding-top: 0; }
.head { display: grid; gap: 20px; margin-bottom: clamp(44px, 6vw, 80px); }
.head--center { text-align: center; justify-items: center; }
.head--row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; }
.split { display: grid; gap: 40px; }
@media (min-width: 960px) {
  .split { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .c5 { grid-column: span 5; } .c6 { grid-column: span 6; } .c7 { grid-column: span 7; }
  .c6e { grid-column: 7 / span 6; } .c7e { grid-column: 6 / span 7; }
}
.glow { position: absolute; pointer-events: none; z-index: 0; width: 70vw; height: 70vw; max-width: 1000px; max-height: 1000px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(102, 241, 194, .22), rgba(102, 241, 194, .06) 55%, transparent 72%); filter: blur(10px); }
.section > .wrap, .section > .hpin__sticky { position: relative; z-index: 1; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; padding: 148px 0 72px; display: flex; align-items: center; overflow: clip; }
.hero__grid { display: grid; gap: 64px; align-items: center; }

@media (min-width: 1080px) { .hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } }
.hero__text { display: grid; gap: 28px; }
.hero__facts { display: flex; flex-wrap: wrap; gap: 36px; padding-top: 10px; }
.hero__facts div { display: grid; gap: 2px; }
.hero__facts strong { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.hero__facts span { font-size: 14px; color: var(--muted); }

/* Mosaico do hero */
.mosaic { position: relative; aspect-ratio: 1 / 1.02; width: min(100%, 620px); margin-inline: auto; }
.mosaic > * { position: absolute; }
.m-tile { border-radius: var(--r-lg); overflow: hidden; }
.m-brand { left: 0; top: 2%; width: 44%; height: 46%; background: var(--navy); display: grid; place-items: center; }
.m-brand svg { width: 52%; height: auto; overflow: visible; }
.m-brand svg path { fill: none; stroke: var(--mint); stroke-width: 1.6px; vector-effect: non-scaling-stroke; }
.m-brand .linha { position: absolute; left: 12%; right: 12%; bottom: 12%; }
.m-brand .linha i:first-child { background: #fff; }
.m-mint { right: 0; top: 6%; width: 50%; height: 34%; background: var(--mint); color: var(--navy); padding: 22px; display: flex; flex-direction: column; justify-content: space-between; }
.m-paper { right: 0; bottom: 0; width: 40%; height: 42%; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); padding: 22px; display: flex; flex-direction: column; justify-content: space-between; color: var(--navy); }
.m-small { font: 500 11px/1.2 var(--mono); opacity: .75; }
.m-big { font-size: clamp(28px, 3vw, 40px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.m-app { left: 2%; top: 46%; width: 57%; z-index: 2; }
.toast {
  z-index: 3; display: flex; gap: 10px; align-items: center; padding: 10px 14px 10px 10px; border-radius: 16px;
  background: #fff; color: var(--navy); font-size: 14px; line-height: 1.25; white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(11, 37, 69, .08), 0 18px 34px -16px rgba(11, 37, 69, .5);
}
.toast b { font-weight: 700; }
.toast__icon { width: 34px; height: 34px; border-radius: 10px; background: var(--navy); color: var(--mint); display: grid; place-items: center; flex-shrink: 0; }
.toast__icon svg { width: 14px; height: 14px; }
.toast small { display: block; font: 500 11px/1.2 var(--mono); color: var(--graphite); }
.t1 { left: 26%; top: -2%; } .t2 { right: -4%; top: 44%; } .t3 { left: 30%; bottom: -3%; }
.mosaic__note { position: static !important; margin-top: 14px; text-align: center; }
@media (max-width: 600px) { .t1 { left: 0; } .t2 { right: 0; } .toast { font-size: 12px; } }

/* Barras animadas */
.bars { display: flex; align-items: flex-end; gap: 6px; height: 64px; }
.bars i { flex: 1; border-radius: 4px 4px 0 0; background: var(--navy); transform-origin: bottom; }
.bars i.hi { background: var(--mint-ink); }

/* ---------- Ilustração do ERP (app) ---------- */
.app {
  border-radius: 18px; background: #fff; color: var(--navy); overflow: hidden; font-size: 13px; line-height: 1.35;
  box-shadow: 0 0 0 1px rgba(11, 37, 69, .1), 0 40px 80px -40px rgba(4, 16, 32, .6);
}
.app__bar { height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 14px; background: #F1F3F6; border-bottom: 1px solid #E3E6EB; }
.app__bar i { width: 9px; height: 9px; border-radius: 50%; background: #D3D8E0; }
.app__bar span { margin-left: 10px; font: 500 11px/1 var(--mono); color: var(--graphite); }
.app__body { display: grid; grid-template-columns: 132px minmax(0, 1fr); min-height: 300px; }
.app__side { background: var(--navy); color: #C9D0DA; padding: 14px 10px; display: grid; align-content: start; gap: 2px; }
.app__logo { display: flex; align-items: center; gap: 8px; padding: 2px 8px 14px; color: #fff; font-weight: 700; font-size: 13px; }
.app__logo svg { width: 14px; height: auto; }
.app__logo svg path { fill: none; stroke: var(--mint); stroke-width: 18; }
.app__nav { display: block; padding: 7px 10px; border-radius: 8px; font-size: 12px; font-weight: 500; transition: background-color .4s, color .4s; }
.app__nav.is-on { background: rgba(102, 241, 194, .14); color: var(--mint); }
.app__main { position: relative; padding: 16px; background: #FAFBFC; }
.view { display: grid; gap: 12px; align-content: start; }
.app[data-cycle] .view, .app[data-steps] .view { position: absolute; inset: 16px; opacity: 0; visibility: hidden; }
.app[data-cycle] .view.is-on, .app[data-steps] .view.is-on { position: relative; inset: auto; opacity: 1; visibility: visible; }
.v-title { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 14px; }
.v-title small { font: 500 10px/1 var(--mono); color: var(--graphite); font-weight: 400; }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kpi { background: #fff; border-radius: 10px; padding: 10px; box-shadow: inset 0 0 0 1px #E6E9EE; display: grid; gap: 4px; }
.kpi small { font-size: 10px; color: var(--graphite); }
.kpi b { font-size: 15px; letter-spacing: -0.01em; }
.kpi--navy { background: var(--navy); color: #fff; box-shadow: none; }
.kpi--navy small { color: var(--steel); }
.panel { background: #fff; border-radius: 10px; padding: 12px; box-shadow: inset 0 0 0 1px #E6E9EE; }
.rows { display: grid; }
.row { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid #EEF0F3; font-size: 12px; }
.row:last-child { border-bottom: 0; }
.row .id { font-family: var(--mono); color: var(--graphite); font-size: 11px; }
.row .val { font-family: var(--mono); font-weight: 500; }
.pillx { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: #EEF1F5; color: var(--graphite); }
.pillx--ok { background: rgba(102, 241, 194, .3); color: var(--mint-ink); }
.pillx--wait { background: #FFF1D6; color: #8A5A00; }
.app .bars { height: 74px; }
.app .bars i { background: #D7DDE6; } .app .bars i.hi { background: var(--navy); }
.cart { display: grid; gap: 6px; }
.cart div { display: flex; justify-content: space-between; font-size: 12px; }
.total { display: flex; justify-content: space-between; align-items: center; padding-top: 8px; border-top: 1px dashed #C9CFD8; font-weight: 700; }
.total b { font-family: var(--mono); font-size: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 11px; font-weight: 600; padding: 6px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px #D9DEE6; }
.chip.is-on { background: var(--navy); color: #fff; box-shadow: none; }
.nfe { display: grid; gap: 8px; }
.nfe__status { display: flex; align-items: center; gap: 10px; }
.nfe__check { width: 30px; height: 30px; border-radius: 50%; background: var(--mint); color: var(--navy); display: grid; place-items: center; }
.nfe__key { font: 500 10px/1.5 var(--mono); color: var(--graphite); word-break: break-all; }
.spark { width: 100%; height: 70px; }
.spark path.l { fill: none; stroke: var(--navy); stroke-width: 2; }
.spark path.a { fill: rgba(102, 241, 194, .25); stroke: none; }
.app__note { margin-top: 10px; font: 500 11px/1 var(--mono); color: var(--muted); }
@media (max-width: 600px) {
  .app__body { grid-template-columns: 1fr; } .app__side { display: none; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpis .kpi:nth-child(3) { display: none; }
}

/* ---------- Índice (soluções, mobile) ---------- */
.index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.index li { border-bottom: 1px solid var(--rule); }
.index a { display: grid; gap: 6px; padding: 24px 0; color: var(--fg); text-decoration: none; }
.index b { font-size: 24px; letter-spacing: -0.02em; }
.index span { color: var(--muted); font-size: 16px; }

/* ---------- Seção fixada com cartão 3D ---------- */
.orbit { position: relative; }
.orbit__sticky { position: relative; height: 100svh; display: grid; grid-template-rows: auto 1fr auto; padding: 110px 0 36px; overflow: hidden; }
.orbit__stage { position: relative; width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; perspective: 1400px; }
.card3d { position: absolute; left: 50%; top: 50%; width: clamp(260px, 30vw, 420px); aspect-ratio: 1.586; transform: translate(-50%, -50%); transform-style: preserve-3d; z-index: 2; }
.card3d__face { position: absolute; inset: 0; border-radius: 22px; backface-visibility: hidden; -webkit-backface-visibility: hidden; padding: 24px 26px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;
  box-shadow: 0 50px 90px -40px rgba(3, 12, 26, .7), inset 0 0 0 1px rgba(255,255,255,.08); transition: background-color .5s, color .5s; }
.card3d__front { background: var(--card-bg, #0B2545); color: var(--card-fg, #fff); }
.card3d__back { background: var(--card-alt, #66F1C2); color: var(--card-alt-fg, #0B2545); transform: rotateY(180deg); }
.card3d__front img { height: 30px; width: auto; align-self: flex-start; }
.card3d__b { position: absolute; right: -6%; bottom: -26%; width: 56%; height: auto; overflow: visible; opacity: .9; }
.card3d__b path { fill: none; stroke: var(--card-accent, #66F1C2); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.card3d__foot { display: flex; justify-content: space-between; align-items: end; position: relative; z-index: 1; font: 500 12px/1.4 var(--mono); }
.card3d .linha { width: 46%; } .card3d .linha i:first-child { background: currentColor; }
.card3d__back ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-weight: 700; font-size: clamp(15px, 1.4vw, 19px); }
.card3d[data-tone="menta"] { --card-bg: #66F1C2; --card-fg: #0B2545; --card-accent: #0B2545; --card-alt: #0B2545; --card-alt-fg: #fff; }
.card3d[data-tone="papel"] { --card-bg: #F5F3EE; --card-fg: #0B2545; --card-accent: #0B7A57; --card-alt: #0B2545; --card-alt-fg: #fff; }
.orbit__card { position: absolute; z-index: 3; width: min(280px, 26vw); padding: 18px; border-radius: var(--r-md); background: var(--surface); color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--rule), 0 24px 40px -30px rgba(3, 12, 26, .55); text-decoration: none; display: grid; gap: 8px; transition: transform .4s var(--ease); }
.orbit__card:hover { transform: translateY(-4px); }
.orbit__card .ic { width: 36px; height: 36px; border-radius: 10px; background: var(--navy); color: var(--mint); display: grid; place-items: center; }
.orbit__card .ic svg { width: 18px; height: 18px; }
.orbit__card b { font-size: 18px; letter-spacing: -0.01em; }
.orbit__card span { font-size: 14px; color: var(--muted); line-height: 1.45; }
.orbit__card .more { font: 600 13px/1 var(--sans); color: var(--link); }
.oc1 { left: 0; top: 4%; } .oc2 { left: 2%; bottom: 4%; } .oc3 { right: 0; top: 0; } .oc4 { right: 2%; bottom: 6%; }
.orbit__lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; pointer-events: none; }
.orbit__lines path { fill: none; stroke: var(--fg); stroke-opacity: .35; stroke-width: 1; }
.orbit__lines circle { fill: var(--mint); }
.tones { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; }
.tones span { font: 500 12px/1 var(--mono); color: var(--muted); }
.tones__set { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--rule); background: var(--surface); }
.tones button { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 0; background: transparent; color: var(--fg); font: 600 13px/1 var(--sans); cursor: pointer; transition: background-color .3s, color .3s; }
.tones button i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(11,37,69,.3); }
.tones button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
@media (max-width: 899px) {
  .orbit__sticky { height: auto; padding: 96px 0 72px; grid-template-rows: auto auto auto; gap: 28px; }
  .orbit__stage { height: auto; display: grid; gap: 14px; perspective: none; }
  .card3d { position: relative; left: auto; top: auto; transform: none; margin: 10px auto 24px; width: min(340px, 86vw); }
  .orbit__card { position: relative; inset: auto; width: 100%; }
  .orbit__lines { display: none; }
}

/* ---------- Bento ---------- */
.bento { display: grid; gap: 16px; }
@media (min-width: 820px) { .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(240px, auto); } }
.tile { position: relative; overflow: hidden; border-radius: var(--r-lg); padding: 28px; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; min-height: 240px;
  background: var(--surface); color: var(--fg); box-shadow: inset 0 0 0 1px var(--rule); }
.tile--navy { background: var(--navy); color: #fff; box-shadow: none; }
.tile--mint { background: var(--mint); color: var(--navy); box-shadow: none; }
.tile__k { font: 500 12px/1 var(--mono); opacity: .7; }
.tile h3 { font-size: clamp(1.375rem, 1.1rem + .9vw, 2rem); line-height: 1.05; letter-spacing: -0.025em; }
.tile p { font-size: 15px; opacity: .8; max-width: 28em; }
.tile__huge { font-size: clamp(120px, 15vw, 220px); line-height: .8; font-weight: 800; letter-spacing: -0.06em; color: var(--mint); }
@media (min-width: 820px) {
  .b1 { grid-column: span 5; grid-row: span 2; } .b2 { grid-column: span 7; } .b3 { grid-column: span 4; }
  .b4 { grid-column: span 3; } .b5 { grid-column: span 4; } .b6 { grid-column: span 4; } .b7 { grid-column: span 4; }
}
.flow { display: flex; align-items: center; gap: 0; position: relative; }
.flow span { flex: 1; text-align: center; font: 600 12px/1 var(--sans); padding: 10px 6px; border-radius: 10px; box-shadow: inset 0 0 0 1px currentColor; }
.flow em { flex: .5; height: 1px; background: currentColor; opacity: .4; }
.flow .dot { position: absolute; top: 50%; left: 0; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--mint-ink); box-shadow: 0 0 0 4px rgba(102,241,194,.35); }
.chat { display: grid; gap: 8px; }
.chat p { max-width: 82%; padding: 9px 12px; border-radius: 14px; font-size: 13px; line-height: 1.35; opacity: 1; }
.chat .them { background: rgba(11,37,69,.06); justify-self: start; border-bottom-left-radius: 4px; }
.chat .us { background: var(--navy); color: #fff; justify-self: end; border-bottom-right-radius: 4px; }
body[data-scene="navy"] .chat .them { background: rgba(255,255,255,.08); }
.live { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/1 var(--sans); }
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--mint-ink); animation: pulse 1.6s infinite; }
.tile--navy .live i { background: var(--mint); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(102,241,194,.6); } 100% { box-shadow: 0 0 0 10px rgba(102,241,194,0); } }
.meter { display: grid; gap: 10px; }
.meter div { display: grid; gap: 6px; font-size: 13px; }
.meter div span { display: flex; justify-content: space-between; }
.meter s { display: block; height: 6px; border-radius: 6px; background: rgba(255,255,255,.14); overflow: hidden; text-decoration: none; }
.meter s b { display: block; height: 100%; background: var(--mint); border-radius: 6px; transform-origin: left; }
.tile .spark path.l { stroke: currentColor; }

/* ---------- Galeria lateral (horizontal) ---------- */
.hpin { position: relative; }
.hpin__sticky { height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: 96px 0 40px; }
.hpin__track { display: flex; align-items: stretch; gap: 22px; padding-inline: max(var(--gutter), (100vw - var(--wrap)) / 2); width: max-content; will-change: transform; }
.hpin__intro { flex: 0 0 min(440px, 82vw); display: flex; flex-direction: column; justify-content: center; gap: 22px; padding-right: 40px; }
.hpin__item { flex: 0 0 auto; width: clamp(280px, 30vw, 420px); display: grid; grid-template-rows: 1fr auto; gap: 16px; }
.hpin__item--wide { width: clamp(300px, 40vw, 560px); }
.hpin__media { position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: clamp(320px, 48vh, 480px); display: grid; place-items: center; padding: 28px; }
.hpin__media.is-navy { background: var(--navy-2); color: #fff; }
.hpin__media.is-mint { background: var(--mint); color: var(--navy); }
.hpin__media.is-white { background: #fff; color: var(--navy); box-shadow: inset 0 0 0 1px var(--rule); }
.hpin__media.is-paper { background: var(--paper); color: var(--navy); }
.hpin__cap { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: baseline; }
.hpin__cap .n { font: 500 13px/1 var(--mono); color: var(--muted); grid-row: span 2; }
.hpin__cap b { font-size: 20px; letter-spacing: -0.015em; }
.hpin__cap span { font-size: 15px; color: var(--muted); line-height: 1.45; }
.hpin__end { flex: 0 0 auto; display: grid; place-items: center; padding: 0 6vw 0 4vw; }
.hpin__meta { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin: 28px auto 0; display: flex; align-items: center; gap: 20px; }
.hpin__count { font: 500 13px/1 var(--mono); color: var(--muted); white-space: nowrap; }
.hpin__bar { flex: 1; height: 3px; background: var(--rule); position: relative; overflow: hidden; border-radius: 3px; }
.hpin__bar i { position: absolute; inset: 0; background: var(--fg); transform-origin: left; transform: scaleX(0); }
.circle-cta { width: clamp(220px, 24vw, 320px); aspect-ratio: 1; border-radius: 50%; background: var(--mint); color: var(--navy); text-decoration: none;
  display: grid; place-items: center; align-content: center; gap: 10px; text-align: center; transition: transform .5s var(--ease), background-color .3s; }
.circle-cta small { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.circle-cta b { font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.02em; line-height: 1.05; }
.circle-cta svg { width: 22px; height: 22px; transition: transform .4s var(--ease); }
.circle-cta:hover { transform: scale(1.05) rotate(-3deg); background: var(--mint-2); }
.circle-cta:hover svg { transform: rotate(-45deg); }
/* ilustrações dentro da galeria */
.ill { width: 100%; max-width: 340px; display: grid; gap: 10px; }
.ill .card { background: #fff; color: var(--navy); border-radius: 14px; padding: 14px; box-shadow: 0 16px 30px -22px rgba(3,12,26,.6), inset 0 0 0 1px rgba(11,37,69,.06); display: grid; gap: 8px; font-size: 13px; }
.ill .card small { font: 500 10px/1 var(--mono); color: var(--graphite); }
.ill .big { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.ill .bars { height: 56px; } .ill .bars i { background: #D7DDE6; } .ill .bars i.hi { background: var(--navy); }
.ill .tilt-l { transform: rotate(-4deg); } .ill .tilt-r { transform: rotate(3deg); margin-left: 18%; }
.step-num { font-size: clamp(110px, 12vw, 180px); font-weight: 800; line-height: .8; letter-spacing: -0.06em; }


/* ---------- Grade numerada (escuro) ---------- */
.grid6 { display: grid; border-radius: var(--r-lg); overflow: hidden; box-shadow: inset 0 0 0 1px var(--rule); }
@media (min-width: 700px) { .grid6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .grid6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.grid6 > div { padding: 30px; display: grid; gap: 12px; align-content: start; box-shadow: inset -1px -1px 0 0 var(--rule); background: rgba(255,255,255,.02); min-height: 220px; transition: background-color .4s; }
.grid6 > div:hover { background: rgba(102,241,194,.06); }
.grid6 .top { display: flex; justify-content: space-between; align-items: center; }
.grid6 .ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(102,241,194,.14); color: var(--mint); }
.grid6 .ic svg { width: 20px; height: 20px; }
.grid6 .n { font: 500 12px/1 var(--mono); color: var(--muted); }
.grid6 b { font-size: 20px; letter-spacing: -0.015em; }
.grid6 p { font-size: 15px; color: var(--muted); }

/* ---------- Preço (cupom) ---------- */
.receipt-slot { position: relative; padding-top: 16px; max-width: 480px; margin-left: auto; }
.receipt-slot::before { content: ""; position: absolute; left: -14px; right: -14px; top: 0; height: 16px; border-radius: 10px; background: var(--navy-3); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.receipt { position: relative; margin-inline: 10px; padding: 34px 30px 30px; background: #fff; color: var(--navy); font-family: var(--mono); font-size: 15px; display: grid; gap: 14px; clip-path: inset(0 0 100% 0); }
.receipt__row { display: flex; justify-content: space-between; gap: 16px; }
.receipt__row--muted { color: var(--graphite); }
.receipt hr { border: 0; border-top: 1px dashed var(--graphite); margin: 2px 0; width: 100%; }
.receipt__title { text-align: center; letter-spacing: .3em; font-weight: 500; }
.receipt__total strong { font-size: 24px; font-weight: 500; }
.receipt .btn { font-family: var(--sans); margin-top: 12px; justify-content: space-between; }
.receipt::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px; background: radial-gradient(circle at 10px 0, transparent 7px, #fff 7.5px) 0 0 / 20px 10px repeat-x; }

/* ---------- Comparativo / passos ---------- */
.compare { width: 100%; border-collapse: collapse; font-size: 17px; }
.compare th, .compare td { text-align: left; padding: 18px 12px 18px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.compare thead th { border-bottom: 2px solid var(--fg); font-size: 15px; }
.compare td:last-child, .compare thead th:last-child { color: var(--muted); }
.compare td:nth-child(2) { font-weight: 600; }
.table-scroll { overflow-x: auto; }
.steps3 { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 760px) { .steps3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.steps3 li { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: var(--r-sm); background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); }
.steps3 .n { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: var(--mint); display: grid; place-items: center; font: 600 12px/1 var(--mono); }
.steps3 b { display: block; font-size: 15px; }
.steps3 span { font-size: 14px; color: var(--muted); line-height: 1.4; }

/* ---------- Dúvidas ---------- */
.faq { border-top: 1px solid var(--rule); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__q { width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr) 40px; gap: 14px; align-items: center; padding: 24px 0; background: none; border: 0; color: var(--fg); cursor: pointer; text-align: left;
  font: 600 clamp(1.0625rem, 1rem + .45vw, 1.375rem)/1.3 var(--sans); }
.faq__q .n { font: 500 12px/1 var(--mono); color: var(--muted); }
.faq__icon { width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--rule); transition: transform .5s var(--ease), background-color .3s, box-shadow .3s, color .3s; }
.faq__icon svg { width: 14px; height: 14px; }
.faq__q[aria-expanded="true"] .faq__icon { transform: rotate(135deg); background: var(--navy); color: var(--mint); box-shadow: none; }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.faq__a > div { overflow: hidden; }
.faq__a p { padding: 0 54px 24px 48px; color: var(--muted); max-width: 44em; }
.faq__q[aria-expanded="true"] + .faq__a { grid-template-rows: 1fr; }

/* ---------- Formulário ---------- */
.form { display: grid; gap: 16px; padding: clamp(22px, 3vw, 36px); border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); }
@media (min-width: 640px) { .form { grid-template-columns: 1fr 1fr; } .form .full { grid-column: 1 / -1; } }
.field { display: grid; gap: 8px; }
.field label { font-size: 14px; font-weight: 600; }
.field input, .field textarea, .field select { width: 100%; min-height: 52px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--rule); background: var(--bg); color: var(--fg); font: 400 17px/1.4 var(--sans); transition: border-color .25s, box-shadow .25s; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--fg); box-shadow: 0 0 0 4px rgba(102,241,194,.35); }
.form__note { font-size: 13px; color: var(--muted); }
.form__status { font-size: 15px; font-weight: 600; color: var(--link); min-height: 1.4em; }
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.contact-list a { color: var(--fg); font-weight: 600; text-decoration: none; }

/* ---------- Faixa de fatos ---------- */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
@media (min-width: 860px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.facts > div { padding: 24px 20px 0 0; display: grid; gap: 4px; }
.facts strong { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.facts span { color: var(--muted); font-size: 14px; }

/* ---------- Operação fixada ---------- */
.ops { position: relative; }
.ops__sticky { height: 100svh; padding: 104px 0 32px; display: grid; grid-template-rows: auto 1fr; overflow: hidden; }
.ops__stage { position: relative; width: min(var(--wrap), 100% - 2 * var(--gutter)); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); gap: 28px; align-items: center; }
.ops__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ops__steps li { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; color: var(--muted); font-weight: 600; transition: background-color .4s, color .4s; }
.ops__steps li .n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 500 11px/1 var(--mono); box-shadow: inset 0 0 0 1px var(--rule); transition: background-color .4s, color .4s, box-shadow .4s; }
.ops__steps li.is-on { background: var(--surface); color: var(--fg); box-shadow: inset 0 0 0 1px var(--rule); }
.ops__steps li.is-on .n { background: var(--navy); color: var(--mint); box-shadow: none; }
.ops__callouts { display: grid; gap: 14px; }
.callout { padding: 16px 18px; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); display: grid; gap: 6px; }
.callout .ic { width: 32px; height: 32px; border-radius: 9px; background: var(--navy); color: var(--mint); display: grid; place-items: center; }
.callout .ic svg { width: 15px; height: 15px; }
.callout b { font-size: 16px; }
.callout .d { font-size: 14px; color: var(--muted); line-height: 1.4; }
.ops__desc { margin-top: 18px; text-align: center; color: var(--muted); font-size: 16px; min-height: 3em; }
.ops__lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 2; }
.ops__lines path { fill: none; stroke: var(--fg); stroke-opacity: .45; stroke-width: 1; }
.ops__lines circle { fill: var(--mint); stroke: var(--navy); stroke-width: 1.5; }
.ops__bar { height: 3px; background: var(--rule); border-radius: 3px; overflow: hidden; margin-top: 18px; }
.ops__bar i { display: block; height: 100%; background: var(--fg); transform-origin: left; transform: scaleX(0); }
@media (max-width: 1023px) {
  .ops__stage { grid-template-columns: 1fr; gap: 16px; }
  .ops__steps { grid-auto-flow: column; overflow-x: auto; order: -1; }
  .ops__steps li { white-space: nowrap; padding: 8px 12px; }
  .ops__callouts, .ops__lines { display: none; }
}

/* ---------- CTA final ---------- */
.final { position: relative; }
.final__card { position: relative; overflow: hidden; border-radius: 36px; padding: clamp(32px, 6vw, 80px); background: linear-gradient(135deg, #E9FCF5, #F5F3EE 60%); box-shadow: inset 0 0 0 1px var(--rule); }
body[data-scene="navy"] .final__card { background: var(--navy-2); }

/* ---------- Rodapé ---------- */
.footer { position: relative; overflow: hidden; background: var(--navy); color: #fff; border-radius: 40px 40px 0 0; margin-top: 64px; padding: 84px 0 32px; }
.footer a { color: #C9D0DA; text-decoration: none; transition: color .25s; }
.footer a:hover { color: var(--mint); }
.footer__grid { display: grid; gap: 40px; position: relative; z-index: 1; }
@media (min-width: 860px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.footer__brand img { height: 46px; width: auto; }
.footer h2 { font: 500 12px/1 var(--mono); letter-spacing: .08em; color: var(--steel); margin-bottom: 16px; text-transform: uppercase; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 16px; }
.footer__big { position: relative; z-index: 1; margin-top: 72px; font-size: clamp(64px, 15vw, 220px); font-weight: 800; letter-spacing: -0.06em; line-height: .8; color: rgba(255,255,255,.06); white-space: nowrap; user-select: none; }
.footer__legal { position: relative; z-index: 1; margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--steel); }

/* ---------- Aviso de rascunho ---------- */
.draft { position: fixed; right: 12px; bottom: 12px; z-index: 80; max-width: 290px; display: flex; gap: 12px; align-items: center; padding: 10px 10px 10px 16px; border-radius: 16px; background: #fff; color: var(--navy); font-size: 12.5px; line-height: 1.4; box-shadow: 0 0 0 1px var(--line), 0 10px 26px -12px rgba(11,37,69,.4); }
.draft button { flex-shrink: 0; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 0; background: var(--navy); color: #fff; font: 600 12px/1 var(--sans); cursor: pointer; }
html[data-draft="off"] .draft { display: none; }
@media (max-width: 640px) { .draft { max-width: 210px; font-size: 11.5px; } }

/* ---------- Movimento reduzido (só quando o site decide respeitar: html.rm) ---------- */
html.rm *, html.rm *::before, html.rm *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
html.rm .intro { display: none !important; }
html.rm .hero-anim { visibility: visible !important; }
html.rm .receipt { clip-path: none; }
html.rm .orbit__sticky, html.rm .ops__sticky { height: auto; }
html.rm .hpin__sticky { height: auto; padding-block: 96px; }
html.rm .hpin__track { flex-wrap: wrap; width: auto; }
html.rm .hpin__meta { display: none; }


/* =========================================================
   v3 — mais movimento
   ========================================================= */
[data-tilt] { transform-style: preserve-3d; will-change: transform; }

/* Cartões que viram */
.flip { perspective: 1000px; }
.flip__inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1s cubic-bezier(.7, 0, .2, 1); }
.flip.is-flipped .flip__inner { transform: rotateY(180deg); }
.flip__face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: inherit; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.flip__back { transform: rotateY(180deg); }
.m-mint.flip, .m-paper.flip { padding: 0; background: none; box-shadow: none; overflow: visible; }
.m-mint .flip__face { background: var(--mint); color: var(--navy); }
.m-mint .flip__back { background: var(--navy-2); color: #fff; }
.m-paper .flip__face { background: #fff; box-shadow: inset 0 0 0 1px var(--line); color: var(--navy); }
.m-paper .flip__back { background: var(--navy); color: #fff; box-shadow: none; }
.m-paper .flip__back .spark path.l { stroke: var(--mint); }
.m-mint .flip__back .bars i { background: rgba(255,255,255,.25); } .m-mint .flip__back .bars i.hi { background: var(--mint); }

/* Faixa de texto corrida */
.marquee { position: relative; z-index: 2; overflow: hidden; background: var(--navy); color: #fff; padding: 26px 0; border-block: 1px solid rgba(255,255,255,.08); }
.marquee--mint { background: var(--mint); color: var(--navy); }
.marquee__track { display: flex; width: max-content; will-change: transform; }
.marquee__group { display: flex; align-items: center; gap: 44px; padding-right: 44px; flex-shrink: 0; }
.marquee__group span { font-size: clamp(36px, 5vw, 76px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; white-space: nowrap; }
.marquee__group span.light { font-weight: 200; }
.marquee__group svg { width: clamp(26px, 3vw, 44px); height: auto; flex-shrink: 0; overflow: visible; }
.marquee__group svg path { fill: none; stroke: var(--mint); stroke-width: 18; }
.marquee--mint .marquee__group svg path { stroke: var(--navy); }

/* Cartões empilhados */
.stack { display: grid; gap: 28px; }
.stack__card { position: sticky; top: 120px; min-height: min(560px, 70vh); border-radius: 36px; padding: clamp(28px, 4vw, 56px); display: grid; gap: 32px; align-items: center; transform-origin: 50% 0;
  box-shadow: 0 -20px 60px -40px rgba(3,12,26,.6); overflow: hidden; }
@media (min-width: 900px) { .stack__card { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.stack__card:nth-child(1) { top: 110px; background: var(--navy); color: #fff; }
.stack__card:nth-child(2) { top: 130px; background: var(--mint); color: var(--navy); }
.stack__card:nth-child(3) { top: 150px; background: #fff; color: var(--navy); box-shadow: inset 0 0 0 1px var(--line), 0 -20px 60px -40px rgba(3,12,26,.5); }
.stack__card:nth-child(4) { top: 170px; background: var(--navy-2); color: #fff; }
.stack__n { font: 500 13px/1 var(--mono); opacity: .7; }
.stack__card h3 { font-size: clamp(2rem, 1.2rem + 2.8vw, 4rem); line-height: .98; letter-spacing: -0.035em; margin: 14px 0 18px; }
.stack__card p { font-size: clamp(1rem, .95rem + .3vw, 1.2rem); opacity: .82; max-width: 30em; }
.stack__art { display: grid; place-items: center; }
.stack__art .ill { max-width: 420px; }

/* Anel de texto girando no CTA circular */
.circle-cta { position: relative; }
.circle-cta .ring { position: absolute; inset: -8%; width: 116%; height: 116%; animation: spin 18s linear infinite; pointer-events: none; }
.circle-cta .ring text { font: 600 9.5px/1 var(--mono); letter-spacing: .3em; fill: var(--fg); text-transform: uppercase; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Brilho que segue o cursor nos cards */
.tile, .orbit__card, .grid6 > div { --mx: 50%; --my: 50%; }
.tile::after, .orbit__card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(102,241,194,.22), transparent 60%); }
.tile:hover::after, .orbit__card:hover::after { opacity: 1; }
.orbit__card { overflow: hidden; }

/* ---------- Ajustes de composição (restaurados) ---------- */
.app--compact { font-size: 11px; border-radius: 14px; }
.app--compact .app__body { grid-template-columns: 92px minmax(0, 1fr); min-height: 220px; }
.app--compact .app__side { padding: 10px 6px; }
.app--compact .app__nav { padding: 5px 7px; font-size: 10.5px; }
.app--compact .app__logo { font-size: 11px; padding-bottom: 10px; }
.app--compact .app__main { padding: 10px; }
.app--compact .kpi b { font-size: 12.5px; }
.app--compact .kpi { padding: 8px; }
.app--compact .bars { height: 52px; }
.app--compact[data-cycle] .view { inset: 10px; }
.app--compact .row { grid-template-columns: 40px minmax(0, 1fr) auto; font-size: 10.5px; }
.app--compact .row .pillx { display: none; }
.hero__visual { position: relative; }
.erp-app-wrap { position: relative; }
.erp-app-wrap .toast.t1 { left: -6%; top: -4%; }
.erp-app-wrap .toast.t2 { right: -5%; top: 40%; }
.erp-app-wrap .toast.t3 { left: 6%; bottom: -5%; }
.erp-app-wrap .toast { position: absolute; }
.mosaic .toast { position: absolute; }
.fact-tbd { font-size: 20px !important; }
.ill .row { grid-template-columns: minmax(0, 1fr) auto; font-size: 12px; }
.files { display: grid; gap: 8px; }
.files div { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(11,37,69,.05); font-size: 13px; font-weight: 600; }
.files div em { margin-left: auto; font: 500 11px/1 var(--mono); font-style: normal; color: var(--mint-ink); }
body[data-scene="navy"] .files div { background: rgba(255,255,255,.07); }
.files svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ---------- v4 — componentes da nova direção de textos ---------- */
.orbit__card { width: min(300px, 24vw); gap: 6px; padding: 16px 18px; }
.orbit__card .oc-k { font: 500 11px/1 var(--mono); color: var(--muted); letter-spacing: .02em; }
.orbit__card b { font-size: 16px; line-height: 1.25; }
.orbit__card span:not(.ic):not(.more) { font-size: 13px; }
.orbit__intro { font-size: 16px !important; }
.photo-slot { margin-top: 12px; aspect-ratio: 4 / 5; max-width: 340px; border-radius: var(--r-lg); background: repeating-linear-gradient(135deg, rgba(11,37,69,.04) 0 12px, transparent 12px 24px), var(--surface); box-shadow: inset 0 0 0 1px var(--rule); display: grid; place-items: center; }
.photo-slot span { font: 500 12px/1.4 var(--mono); color: var(--muted); text-align: center; padding: 20px; }
.segs { display: flex; flex-wrap: wrap; gap: 8px; }
.segs span { padding: 9px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); }
.fit { display: grid; gap: 16px; }
@media (min-width: 760px) { .fit { grid-template-columns: 1fr 1fr; } .fit__close { grid-column: 1 / -1; } }
.fit__card { padding: 28px; border-radius: var(--r-lg); display: grid; gap: 16px; align-content: start; }
.fit__card--yes { background: var(--navy); color: #fff; }
.fit__card--no { background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); }
.fit__card b { font-size: 18px; letter-spacing: -0.01em; }
.fit__card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 15px; line-height: 1.45; }
.fit__card li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; }
.fi { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; }
.fi svg { width: 12px; height: 12px; }
.fit__card--yes .fi { background: var(--mint); color: var(--navy); }
.fit__card--no .fi { background: rgba(11,37,69,.08); color: var(--graphite); }
.fit__card--yes li { color: #E6EBF2; }
.fit__card--no li { color: var(--muted); }
.fit__close { font-size: 17px; color: var(--muted); padding: 8px 4px 0; }
.receipt__big { text-align: center; font-size: 15px; color: var(--graphite); }
.receipt__big strong { display: block; font-size: 40px; color: var(--navy); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
.receipt__note { font-family: var(--sans); font-size: 13px; color: var(--graphite); text-align: center; }
.orbit__card { width: min(350px, 27vw); }
.orbit__card span:not(.ic):not(.more) { font-size: 12.5px; line-height: 1.4; }
.orbit__card .ic { width: 30px; height: 30px; border-radius: 9px; }
.orbit__card .ic svg { width: 15px; height: 15px; }
.oc1 { left: 0; top: 0; } .oc2 { left: 0; bottom: 0; } .oc3 { right: 0; top: 0; } .oc4 { right: 0; bottom: 0; }
.orbit__sticky { padding-top: 96px; }
@media (max-height: 820px) and (min-width: 900px) { .orbit__intro { display: none; } }
@media (max-height: 820px) and (min-width: 900px) { .orbit .tones { display: none; } }

/* ---------- v5 — institucional ---------- */
.page-home .nav__cta { background: var(--navy); color: #fff; }
.page-home .nav__cta:hover { background: var(--navy-2); }
.page-home .nav__cta .arrow { background: var(--mint); color: var(--navy); }
.mint-logo { color: #66F1C2 !important; }

/* Bola com o B no centro da órbita */
.orb { position: absolute; left: 50%; top: 50%; width: clamp(180px, 17vw, 240px); aspect-ratio: 1; transform: translate(-50%, -50%); z-index: 2; }
.orb__ball { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 32% 28%, #24548C 0%, #0B2545 52%, #05121F 100%);
  box-shadow: 0 50px 90px -30px rgba(3, 12, 26, .75), inset -20px -26px 50px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.orb__ball::after { content: ""; position: absolute; left: 16%; top: 12%; width: 34%; height: 24%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .22), transparent); filter: blur(2px); }
.orb__ball svg { width: 34%; height: auto; overflow: visible; }
.orb__ball svg path { fill: none; stroke: #66F1C2; stroke-width: 18; }
.orb__ring { position: absolute; inset: -14%; border-radius: 50%; border: 1.5px dashed rgba(102, 241, 194, .55); animation: spin 28s linear infinite; }
.orb__ring--2 { inset: -32%; border: 1px solid var(--rule); animation-duration: 46s; animation-direction: reverse; }
.orb__ring--2::before { content: ""; position: absolute; top: 50%; left: -5px; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #66F1C2; box-shadow: 0 0 0 5px rgba(102, 241, 194, .2); }
.orbit__path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.orbit__path ellipse { fill: none; stroke: var(--fg); stroke-opacity: .18; stroke-width: 1; stroke-dasharray: 3 7; }
@media (min-width: 900px) {
  .orbit .orbit__card { left: 50%; top: 50%; right: auto; bottom: auto; }
}
@media (max-width: 899px) {
  .orb { position: relative; left: auto; top: auto; transform: none; margin: 40px auto 56px; width: 200px; }
  .orbit__path { display: none; }
}
@media (max-width: 899px) { .orbit .orbit__card { width: 100%; } }

/* ---------- Globo 3D (substitui o B na bola) ---------- */
.orb__ball { background: radial-gradient(circle at 34% 30%, #2A5F9E 0%, #123A6A 38%, #0B2545 62%, #040E1A 100%); }
.orb__globe { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; }
.orb__ball::before { content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: 1; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(102, 241, 194, .25), inset -14px -18px 40px rgba(0, 0, 0, .45), inset 8px 10px 24px rgba(160, 220, 255, .12); }
.orb__ball::after { z-index: 2; }
.orb { width: clamp(200px, 19vw, 260px); }

/* ---------- v6 — institucional enxuto ---------- */
.diffs { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.diffs li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; padding: 18px 0; border-top: 1px solid var(--rule); }
.diffs .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(102, 241, 194, .14); color: var(--mint); }
.diffs .ic svg { width: 20px; height: 20px; }
.diffs b { font-size: 19px; letter-spacing: -0.015em; }
.diffs p { color: var(--muted); font-size: 16px; margin-top: 4px; }
.about { display: grid; gap: 28px; }
@media (min-width: 700px) { .about { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
.about .photo-slot { margin-top: 0; max-width: none; }
.hpin__spacer { flex: 0 0 max(24px, 4vw); }
/* Globo terrestre: bola azul-escura */
.orb__ball { background: radial-gradient(circle at 35% 30%, #1A4677 0%, #0F3158 40%, #0B2545 65%, #071A31 100%); }
/* Título de Soluções centralizado em duas linhas */
.orbit .head--center { text-align: center; justify-items: center; }
.orbit .h2 { max-width: 20em; margin-inline: auto; text-align: center; }
.orbit .h2 .light { display: block; }
/* Diferenciais lado a lado */
.diffs--row { margin-top: clamp(40px, 5vw, 64px); }
@media (min-width: 900px) {
  .diffs--row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .diffs--row li { padding-top: 24px; }
}

/* ---------- v7 — mosaico sem o B, globo arrastável, galeria lateral ---------- */
.mosaic .m-mint { left: 0; top: 6%; right: auto; width: 46%; height: 34%; }
.mosaic .m-paper { right: 0; top: 0; bottom: auto; width: 50%; height: 40%; }
.mosaic .m-app { left: 4%; top: 45%; width: 84%; }
.mosaic .t1 { left: 34%; top: -3%; } .mosaic .t2 { right: -3%; top: 50%; } .mosaic .t3 { left: 0; top: auto; bottom: 4%; }
@media (max-width: 760px) {
  .mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; aspect-ratio: auto; width: 100%; }
  .mosaic > * { position: relative !important; inset: auto !important; left: auto !important; top: auto !important; right: auto !important; width: auto !important; }
  .mosaic .m-mint, .mosaic .m-paper { height: 168px !important; }
  .mosaic .m-app { grid-column: 1 / -1; }
  .mosaic > [data-depth="2.2"] { display: none; }
  .m-big { font-size: 26px; }
}
.app__note--below { margin-top: 44px; }
.erp-app-wrap--demo .toast.t3 { bottom: -7%; }
.orb__globe { cursor: grab; touch-action: pan-y; pointer-events: auto; }
.orb__globe:active { cursor: grabbing; }
.orb { pointer-events: none; } .orb__ball { pointer-events: auto; }
@media (max-width: 760px) {
  .hpin__intro { flex-basis: 84vw; padding-right: 8px; }
  .hpin__item, .hpin__item--wide { width: 80vw; }
  .hpin__media { min-height: 300px; }
  .hpin__spacer { display: none; }
}
.hpin__track { touch-action: pan-y; }
@media (max-width: 600px) { .app--compact .app__body { grid-template-columns: 1fr; } .app--compact .kpi b { font-size: 14px; } }

/* ---------- v8 — bloco escuro fixo e galeria lateral maior ---------- */
.section--dark { --bg: #0B2545; --fg: #FFFFFF; --muted: #A9B2C1; --rule: rgba(255,255,255,.14); --link: #66F1C2; --surface: #11305A;
  background: var(--bg); color: var(--fg); overflow: clip; }
.section--dark .btn--primary { background: var(--mint); color: var(--navy); }
@media (min-width: 761px) {
  .hpin__item { width: clamp(320px, 34vw, 500px); }
  .hpin__item--wide { width: clamp(360px, 42vw, 620px); }
  .hpin__media { min-height: clamp(340px, 52vh, 520px); }
  .hpin__intro { flex-basis: min(400px, 30vw); }
}
/* Logo maior no menu */
.nav__brand img { height: 50px; }
.nav { padding-left: 16px; }
@media (max-width: 520px) { .nav__brand img { height: 40px; } }
/* Abertura com o logo completo */
.intro__logo { width: clamp(220px, 30vw, 380px); height: auto; clip-path: inset(0 100% 0 0); }

/* v9 foto do fundador */
.about .founder { margin: 0; aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden; background: #E2DFD9; box-shadow: inset 0 0 0 1px var(--rule); }
.about .founder img { width: 100%; height: 100%; object-fit: cover; display: block; }

.about.about--text { grid-template-columns: 1fr; max-width: 62ch; }