/* =====================================================================
   Master ERP · Landing Page B (variante com Quiz de Diagnóstico)
   Styleguide herdado da LP atual: roxo da marca, marca-texto amarelo,
   CTA verde e Figtree em peso black nos títulos.
   Regras de forma: botões 12px, cartões 24px, chips/selos em pílula, inputs 12px.
   Tema único (claro/roxo) por decisão de marca e para não introduzir
   uma variável extra no teste A/B.
   ===================================================================== */

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;

  /* Marca */
  --purple-950: #13033f;
  --purple-900: #1d015a;
  --purple-800: #2a0f7a;
  --purple-700: #3d1a9e;
  --purple-600: #5328b4;
  --purple-500: #5f31c2;
  --purple-400: #6b3cce;
  --purple-300: #8b66de;
  --purple-200: #c9b6f5;
  --purple-100: #e4d7ff;
  --purple-50: #f4efff;
  --yellow-500: #feca4d;
  --yellow-400: #ffd972;
  --yellow-100: #fff3cf;
  --green-600: #218838;
  --green-700: #1c7a32;
  --green-400: #28a745;
  --peach-100: #ffe5d0;
  --orange-500: #f26a2e;

  /* Neutros (frios, puxados para o roxo) */
  --ink: #1d015a;
  --text: #3e3361;
  --text-muted: #564480;
  --line: #d9d3ea;
  --surface: #ffffff;
  --surface-gray: #ecebf0;
  --surface-gray-2: #e2e0ea;
  --whatsapp: #128c4a;

  /* Sistema */
  --radius-btn: 12px;
  --radius-card: 24px;
  --radius-input: 12px;
  --shadow-card: 0 1px 0 rgb(255 255 255 / .6) inset, 0 18px 50px -18px rgb(45 15 122 / .35), 0 4px 14px -6px rgb(45 15 122 / .18);
  --shadow-float: 0 24px 60px -20px rgb(19 3 63 / .55);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --header-h: 72px;
  --container: 1200px;
  --gutter: clamp(16px, 4vw, 40px);

  /* Camadas (z-index) */
  --z-header: 50;
  --z-mobile-cta: 45;
  --z-consent: 60;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0;
  font-family: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 450;
  color: var(--text);
  background: var(--purple-950);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 900; line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--yellow-500); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 100; background: var(--yellow-500); color: var(--ink); font-weight: 800; padding: 10px 16px; border-radius: var(--radius-btn); text-decoration: none; transition: top .2s; }
.skip-link:focus { top: 12px; }

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }

/* ---------- Ícones (Tabler, injetados por JS) ---------- */
.ic { display: inline-block; width: 1em; height: 1em; flex: none; vertical-align: -0.125em; }
svg.ic { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
svg.ic.is-filled { fill: currentColor; stroke: none; }
/* Ícones animados: o traço "se desenha" quando entra na tela */
.draw svg.ic * { stroke-dasharray: 1; stroke-dashoffset: 1; }
.draw.is-in svg.ic * { animation: ic-draw 1.1s var(--ease-out) forwards; animation-delay: var(--draw-delay, .1s); }
@keyframes ic-draw { to { stroke-dashoffset: 0; } }

/* ---------- Marca-texto ---------- */
.hl {
  color: var(--ink);
  background-image: linear-gradient(100deg, var(--yellow-500), var(--yellow-400));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-radius: 12px;
  padding: 0 .16em;
  margin: 0 -.04em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.js .reveal-hl .hl, .js .hl.reveal-hl { background-size: 0% 100%; transition: background-size 1s var(--ease-out) .25s; }
.js .reveal-hl.is-in .hl, .js .hl.reveal-hl.is-in { background-size: 100% 100%; }
.ul { text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .14em; }

/* ---------- Botões ---------- */
.btn {
  --btn-bg: var(--green-600);
  --btn-bg-hover: var(--green-700);
  --btn-fg: #fff;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 56px;
  padding: .9em 1.6em;
  border: 0;
  border-radius: var(--radius-btn);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: .005em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  box-shadow: 0 1px 0 rgb(255 255 255 / .22) inset, 0 12px 28px -12px rgb(28 122 50 / .75);
  transition: transform .25s var(--ease-out), background-color .25s, box-shadow .25s;
}
.btn::after { /* brilho que atravessa o botão no hover */
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / .28) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .7s var(--ease-out);
}
.btn:hover { background: var(--btn-bg-hover); transform: translateY(-2px); box-shadow: 0 1px 0 rgb(255 255 255 / .22) inset, 0 18px 34px -14px rgb(28 122 50 / .85); }
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(0) scale(.985); }
.btn .ic { font-size: 1.15em; transition: transform .3s var(--ease-out); }
.btn:hover .ic-arrow { transform: translateX(4px); }
.btn[disabled], .btn[aria-disabled='true'] { opacity: .5; pointer-events: none; box-shadow: none; }
.btn--lg { min-height: 62px; font-size: 1.125rem; padding-inline: 1.9em; }
.btn--ghost { --btn-bg: transparent; --btn-bg-hover: rgb(255 255 255 / .1); --btn-fg: #fff; box-shadow: inset 0 0 0 2px rgb(255 255 255 / .55); }
.btn--ghost:hover { box-shadow: inset 0 0 0 2px #fff; }
.btn--outline { --btn-bg: #fff; --btn-bg-hover: var(--purple-50); --btn-fg: var(--purple-600); box-shadow: inset 0 0 0 2px var(--purple-500), 0 10px 24px -14px rgb(45 15 122 / .5); }
.btn--outline:hover { box-shadow: inset 0 0 0 2px var(--purple-600), 0 16px 30px -14px rgb(45 15 122 / .55); }
.btn--sm { min-height: 44px; font-size: .95rem; padding: .6em 1.1em; }
.link-arrow { display: inline-flex; align-items: center; gap: .45em; font-weight: 800; text-decoration: none; color: inherit; }
.link-arrow:hover { text-decoration: underline; text-underline-offset: .2em; }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background-color .35s, box-shadow .35s;
}
/* Fundo quase opaco em vez de backdrop-filter: o desfoque sobre a página em movimento pesa na rolagem. */
.site-header.is-scrolled {
  background: rgb(42 15 122 / .96);
  box-shadow: 0 1px 0 rgb(255 255 255 / .08), 0 10px 30px -18px rgb(0 0 0 / .6);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; min-height: 44px; }
.brand img { width: 118px; height: auto; }
.header-cta { min-height: 46px; font-size: .98rem; padding: .6em 1.2em; }

/* ---------- Seções ----------
   Fluxo normal, sem sobreposição: cada seção rola por inteiro. */
main { position: relative; }
.sheet { position: relative; padding-block: clamp(88px, 10vw, 140px); overflow-x: clip; }
.sheet--purple { background: radial-gradient(120% 90% at 85% 0%, var(--purple-400) 0%, var(--purple-600) 45%, var(--purple-700) 100%); color: rgb(255 255 255 / .86); }
.sheet--purple h1, .sheet--purple h2, .sheet--purple h3 { color: #fff; }
.sheet--deep { background: radial-gradient(90% 80% at 15% 10%, var(--purple-700) 0%, var(--purple-800) 45%, var(--purple-900) 100%); color: rgb(255 255 255 / .82); }
.sheet--deep h2, .sheet--deep h3 { color: #fff; }
.sheet--light { background: var(--surface-gray); color: var(--text-muted); }
.sheet--light h2 { color: var(--ink); }
.sheet--white { background: #f7f6fb; color: var(--text-muted); }

/* Animações contínuas ficam pausadas enquanto a seção está fora da tela (main.js marca .is-offscreen).
   As animações ligadas à rolagem (view()) continuam, para acompanharem a posição real. */
.is-offscreen, .is-offscreen *, .is-offscreen *::before, .is-offscreen *::after { animation-play-state: paused !important; }
.is-offscreen .phone, .is-offscreen .laptop { animation-play-state: running !important; }

/* ---------- Revelação ao rolar ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
.js [data-reveal='left'] { transform: translateX(-36px); }
.js [data-reveal='right'] { transform: translateX(36px); }
.js [data-reveal='scale'] { transform: scale(.94); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Títulos de seção ---------- */
.section-head { max-width: 860px; margin-inline: auto; text-align: center; }
.section-head h2 { font-size: clamp(2rem, 1.15rem + 2.6vw, 3.1rem); }
.section-head p { margin-top: 18px; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); max-width: 62ch; margin-inline: auto; }
.h2 { font-size: clamp(2rem, 1.15rem + 2.6vw, 3.1rem); }

/* =====================================================================
   1. HERO · "central de comando": telas do Master ERP ganhando vida
   Camadas: fundo (aurora + piso em grade), texto centralizado e palco 3D com
   telas reais (BI, Financeiro, app Master Dashboard). Os gráficos foram apagados
   das imagens e redesenhados em SVG nas mesmas posições para animarem ao vivo.
   ===================================================================== */
.hero {
  padding-top: calc(var(--header-h) + clamp(28px, 5vw, 64px));
  padding-bottom: clamp(56px, 7vw, 112px);
  overflow: hidden;
  background: linear-gradient(180deg, #4a1fb0 0%, var(--purple-600) 38%, var(--purple-800) 100%);
}
.hero .sheet-inner { position: relative; z-index: 1; }
.hero-net { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .9; pointer-events: none; }

.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero-aurora { position: absolute; inset: -20% -10% auto; height: 90%; background:
  radial-gradient(40% 50% at 22% 40%, rgb(139 102 222 / .55), transparent 70%),
  radial-gradient(35% 45% at 80% 30%, rgb(254 202 77 / .16), transparent 70%),
  radial-gradient(45% 55% at 55% 70%, rgb(95 49 194 / .65), transparent 70%); }
.hero-floor { position: absolute; left: -25%; right: -25%; bottom: -8%; height: 62%; overflow: hidden;
  transform: perspective(700px) rotateX(64deg);
  transform-origin: 50% 100%;
  mask-image: linear-gradient(to top, #000 10%, transparent 85%);
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%); }
/* A grade corre com transform (no compositor), sem repintar o fundo a cada quadro. */
.hero-floor::before { content: ''; position: absolute; inset: -64px 0 0;
  background-image:
    linear-gradient(rgb(255 255 255 / .09) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / .09) 1px, transparent 1px);
  background-size: 64px 64px;
  animation: floor-run 6s linear infinite; }
@keyframes floor-run { to { transform: translateY(64px); } }
.hero-beam { position: absolute; left: 50%; top: 34%; width: min(1100px, 92vw); height: 60%; translate: -50% 0;
  background: radial-gradient(50% 50% at 50% 50%, rgb(254 202 77 / .2), transparent 72%); }

.hero-head { text-align: center; display: grid; justify-items: center; }
.hero-title { font-size: clamp(2.3rem, 1rem + 3.4vw, 3.9rem); line-height: 1.05; color: #fff; max-width: 17.5em; text-wrap: balance; }
.hero-title .hl { line-height: 1.3; padding-bottom: .02em; }
.hw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.hw > span { display: inline-block; }
.js .hw > span { transform: translateY(105%); animation: word-up .95s var(--ease-out) forwards; animation-delay: calc(.08s + var(--i, 0) * 55ms); }
@keyframes word-up { to { transform: none; } }
.js .hero-title .hl { background-size: 0% 100%; animation: hl-sweep 1s var(--ease-out) forwards .85s; }
@keyframes hl-sweep { to { background-size: 100% 100%; } }
.hero-lead { margin-top: 22px; font-size: clamp(1.06rem, 1rem + .35vw, 1.24rem); color: rgb(255 255 255 / .88); max-width: 40em; }
.hero-actions { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 28px; }
.social-proof { display: flex; align-items: center; gap: 12px; color: rgb(255 255 255 / .9); font-size: .95rem; line-height: 1.3; text-align: left; }
.social-proof img { width: 92px; height: auto; }
.social-proof strong { color: var(--yellow-500); font-weight: 900; }
.hero-auth { margin-top: 18px; display: inline-flex; gap: 8px; align-items: center; font-size: .92rem; color: rgb(255 255 255 / .74); }
.hero-auth .ic { color: var(--yellow-500); font-size: 1.15rem; flex: none; }
.js .hero-head > :not(h1) { animation: rise .9s var(--ease-out) both; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
.js .hero-head > .hero-lead { animation-delay: .45s; }
.js .hero-head > .hero-actions { animation-delay: .58s; }
.js .hero-head > .hero-auth { animation-delay: .7s; }

/* ---------- Palco 3D ---------- */
.stage-wrap { position: relative; width: min(100% - 2 * clamp(14px, 9vw, 140px), 1160px); margin: clamp(40px, 5vw, 64px) auto 0; perspective: 1900px; perspective-origin: 50% 0%; container-type: inline-size; }
.stage-scroll, .stage-tilt { transform-style: preserve-3d; }
.stage-scroll { transform: rotateX(8deg); transform-origin: 50% 0; }
.stage-tilt { transform: rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)); transition: transform .8s var(--ease-out); }
.stage { position: relative; aspect-ratio: 1160 / 640; transform-style: preserve-3d; }
.js .stage { opacity: 0; }
.js .hero.is-ready .stage { animation: stage-in 1.5s var(--ease-out) .25s both; }
@keyframes stage-in { from { opacity: 0; transform: translateY(90px) rotateX(28deg) scale(.9); } to { opacity: 1; transform: none; } }

.layer { position: absolute; transform: translateZ(var(--z, 0px)); }
.js .layer { opacity: 0; }
.js .hero.is-ready .layer { animation: layer-in 1.1s var(--ease-out) both; animation-delay: var(--d, .4s); }
/* Só os cartões pequenos flutuam; as telas grandes ficam paradas (flutuar camadas grandes pesa no compositor). */
/* A entrada anima translate/opacity e a flutuação anima transform: propriedades diferentes, para o
   navegador manter a flutuação no compositor (na mesma propriedade ela caía na thread principal). */
.js .hero.is-ready .live, .js .hero.is-ready .hero-selo { animation: layer-in 1.1s var(--ease-out) both, layer-float 7s ease-in-out infinite; animation-delay: var(--d, .4s), calc(var(--d, .4s) + 1.1s); }
@keyframes layer-in { from { opacity: 0; translate: 0 50px; } to { opacity: 1; translate: 0 0; } }
@keyframes layer-float { 0%, 100% { transform: translateZ(var(--z, 0px)); } 50% { transform: translateZ(var(--z, 0px)) translateY(var(--fy, -8px)); } }

/* Janela de tela (celular com o app real) */
.scr { margin: 0; border-radius: 16px; background: #fff; overflow: hidden; box-shadow: 0 1px 0 rgb(255 255 255 / .5) inset, 0 50px 90px -40px rgb(13 2 50 / .85), 0 0 0 1px rgb(255 255 255 / .25); }
.scr-body { position: relative; }
.scr-body > img { width: 100%; height: auto; display: block; }
.scr-fx { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.scr-glare { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .55) 48%, transparent 60%); transform: translateX(-120%); }
.js .hero.is-ready .scr-glare { animation: glare 1.6s var(--ease-out) both; animation-delay: calc(var(--d, .4s) + .5s); }
@keyframes glare { to { transform: translateX(120%); } }
.js .scr-body > img { clip-path: inset(0 0 100% 0); }
.js .hero.is-ready .scr-body > img { animation: screen-on .9s var(--ease-out) both; animation-delay: calc(var(--d, .4s) + .25s); }
@keyframes screen-on { to { clip-path: inset(0 0 0 0); } }
.scr--phone { right: 3%; top: 9%; width: 19%; --z: 130px; --d: .85s; --fy: -12px; border-radius: 32px; padding: 7px; background: linear-gradient(150deg, #2c2442, #0d0920); box-shadow: 0 0 0 1.5px #4a4166 inset, 0 60px 90px -36px rgb(8 1 30 / .9); }
.scr--phone .scr-body { border-radius: 26px; overflow: hidden; background: #fff; }
.ph-bar { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); transition: transform 1s var(--ease-out); }

/* ---------- Telas do sistema recriadas (Master Dashboard e Master ERP) ----------
   Recriadas em HTML/SVG a partir das telas reais, com dados de demonstração. As medidas
   usam cqi (1% da largura da janela), então a tela escala inteira com o palco. */
.app { margin: 0; container-type: inline-size; overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 1px 0 rgb(255 255 255 / .6) inset, 0 50px 90px -40px rgb(13 2 50 / .85), 0 0 0 1px rgb(255 255 255 / .22); }
.app-ui { position: relative; color: #3f4752; line-height: 1.25; text-align: left; }
.js .app .md-top, .js .app .md-side, .js .app .md-tools, .js .app .md-card, .js .app .erp-grid, .js .app .erp-legend, .js .app .erp-actions { opacity: 0; translate: 0 1.6cqi; }
.js .hero.is-ready .app :is(.md-top, .md-side, .md-tools, .md-card, .erp-grid, .erp-legend, .erp-actions) { animation: ui-in .7s var(--ease-out) both; animation-delay: calc(var(--d, .4s) + .35s + var(--k, 0) * 80ms); }
.md-side { --k: 1; } .md-tools { --k: 2; } .md-card:nth-child(1) { --k: 3; } .md-card:nth-child(2) { --k: 4; } .md-card:nth-child(3) { --k: 5; }
.erp-grid { --k: 1; } .erp-legend { --k: 2; } .erp-actions { --k: 3; }
@keyframes ui-in { to { opacity: 1; translate: 0 0; } }

/* Master Dashboard (web) */
.app--dash { left: 14%; top: 0; width: 62%; --z: 0px; --d: .45s; }
.app--dash .app-ui { display: grid; grid-template-columns: 6.8cqi minmax(0, 1fr); grid-template-rows: 7.2cqi minmax(0, 1fr); aspect-ratio: 16 / 10; background: #fff; }
.md-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 1.3cqi; padding: 0 2cqi 0 1.3cqi; background: #fff; }
.md-logo { width: 4.2cqi; height: 4.2cqi; border-radius: 1cqi; display: grid; place-items: center; background: linear-gradient(135deg, #8c97cf, #3c4980); box-shadow: 0 .4cqi 1cqi -.3cqi rgb(60 73 128 / .7); }
.md-logo svg { width: 72%; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.md-name { font-size: 2.3cqi; font-weight: 600; color: #3a4049; letter-spacing: -.01em; }
.md-search { margin-left: auto; width: 4.4cqi; height: 4.4cqi; border-radius: 50%; background: #f1f3f7; display: grid; place-items: center; color: #4d5154; font-size: 2.2cqi; }
.md-user { display: flex; align-items: center; gap: .9cqi; }
.md-avatar { width: 4.4cqi; height: 4.4cqi; border-radius: 50%; display: grid; place-items: center; background: #e3e7f4; color: #4e63b6; font-size: 2.2cqi; box-shadow: inset 0 0 0 .2cqi #c9d0ea; }
.md-user b { display: block; font-size: 1.45cqi; font-weight: 700; color: #3a4049; }
.md-user small { display: block; font-size: 1.3cqi; color: #6b7280; }
.md-side { display: flex; flex-direction: column; align-items: center; gap: 1.5cqi; padding-top: 1cqi; background: #fff; }
.md-side span { width: 4.6cqi; height: 4.6cqi; display: grid; place-items: center; border-radius: 50%; color: #4d5154; font-size: 2.6cqi; }
.md-side .is-on { background: #4e63b6; color: #fff; box-shadow: 0 .6cqi 1.4cqi -.4cqi rgb(78 99 182 / .75); }
.md-main { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 1.4cqi; min-height: 0; padding: 1.8cqi 2cqi; background: #edf0f5; border-top-left-radius: 2.4cqi; box-shadow: inset .3cqi .3cqi 1cqi rgb(40 50 90 / .06); }
.md-tools { display: flex; align-items: flex-end; gap: .9cqi; }
.md-period { margin-right: auto; display: grid; gap: .45cqi; }
.md-period small { font-size: 1cqi; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #5b6170; }
.md-select { display: inline-flex; align-items: center; justify-content: space-between; gap: 3cqi; min-width: 15cqi; padding: .7cqi 1.1cqi; background: #fff; border: .12cqi solid #d5dae3; border-radius: .6cqi; font-size: 1.4cqi; color: #333; }
.md-select .ic { font-size: 1.6cqi; }
.md-btn { display: inline-flex; align-items: center; gap: .6cqi; padding: .75cqi 1.2cqi; background: #fff; border: .12cqi solid #5b6170; border-radius: .6cqi; font-size: 1.3cqi; font-weight: 600; color: #4b5160; }
.md-btn .ic { font-size: 1.6cqi; }
.md-btn em { font-style: normal; font-size: 1.05cqi; font-weight: 700; color: #fff; background: #5b6170; border-radius: 99px; padding: .1cqi .7cqi; }
.md-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 1.4cqi; min-height: 0; }
.md-card { min-height: 0; padding: 1.5cqi 1.7cqi; text-align: center; background: #fff; border-radius: 1.4cqi; box-shadow: 0 .3cqi 1.2cqi rgb(40 50 90 / .08); }
.md-card h4 { font-size: 1.75cqi; font-weight: 600; line-height: 1.2; color: #3f4752; }
.md-card p { margin-top: .4cqi; font-size: 1.1cqi; color: #6b7280; }
.md-card--line { grid-row: 1 / span 2; display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
.md-chart { width: 100%; height: 100%; margin-top: .6cqi; overflow: visible; }
.md-grid-y line { stroke: #e5e6e8; stroke-width: 1; }
.md-key rect { fill: #4e63b6; }
.md-key text { font-size: 8px; fill: #4b5160; }
.md-axis text { font-size: 8.5px; fill: #5b6170; text-anchor: end; }
.md-axis--x text { font-size: 8px; text-anchor: middle; }
.md-line { fill: none; stroke: #4e63b6; stroke-width: 2.4; stroke-linecap: round; }
.md-dots circle { fill: #4e63b6; stroke: #fff; stroke-width: 1; transform-box: fill-box; transform-origin: center; }
.md-live circle { fill: #4e63b6; stroke: #fff; stroke-width: 1.4; }
.md-live .md-live-ring { fill: rgb(78 99 182 / .28); stroke: none; transform-box: fill-box; transform-origin: center; opacity: 0; }
.md-live.is-ping .md-live-ring { animation: md-ping 1.2s ease-out 2; }
@keyframes md-ping { from { transform: scale(.5); opacity: 1; } 75%, to { transform: scale(1.9); opacity: 0; } }
.md-live, .md-tip { transition: transform .9s var(--ease-in-out); }
.md-line--live { transition: d .9s var(--ease-in-out); }
.md-tip rect { fill: #2f3542; }
.md-tip text { font-size: 8.5px; fill: #fff; }
.md-tip .md-tip-k { fill: #b9c0d4; font-size: 7.5px; }
.md-tip .md-tip-v { font-weight: 700; font-variant-numeric: tabular-nums; }
.md-tip-in { opacity: 0; transform: translateY(4px); transition: opacity .35s var(--ease-out), transform .35s var(--ease-out); }
.md-tip.is-on .md-tip-in { opacity: 1; transform: none; }
/* Entrada dos gráficos: a linha se desenha e os pontos acendem no mesmo ritmo */
.js .md-line:not(.md-line--live) { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .md-area, .js .md-line--live, .js .md-live { opacity: 0; transition: opacity .6s ease; }
.js .md-dots circle { opacity: 0; }
.stage.is-live .md-line:not(.md-line--live) { animation: draw-line 1.8s var(--ease-in-out) forwards; }
.stage.is-live .md-dots circle { animation: dot-in .45s var(--ease-out) both; animation-delay: calc(.12s + var(--i) * 55ms); }
.stage.is-live .md-area { opacity: 1; transition-delay: .9s; }
.stage.is-live :is(.md-line--live, .md-live) { opacity: 1; transition-delay: 1.7s; }
@keyframes draw-line { to { stroke-dashoffset: 0; } }
@keyframes dot-in { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }

.md-card--kpi { display: grid; align-content: center; justify-items: center; }
.md-kpi { display: block; height: 1.25em; margin-top: 1cqi; overflow: hidden; font-size: 3.6cqi; font-weight: 700; letter-spacing: -.02em; color: #3f4752; font-variant-numeric: tabular-nums; }
.md-roll { display: grid; }
.md-roll > span { grid-area: 1 / 1; transition: transform .6s var(--ease-out), opacity .5s ease; }
.md-roll > span.is-out { transform: translateY(-80%); opacity: 0; }
.md-roll > span.is-in { transform: translateY(80%); opacity: 0; }
.md-delta { margin-top: .5cqi; padding: .25cqi .9cqi; font-size: 1.3cqi; font-weight: 700; color: #1e7a45; background: #e2f4e8; border-radius: 99px; font-variant-numeric: tabular-nums; }
.md-card--donut { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.md-donut-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 1.2cqi; min-height: 0; margin-top: .8cqi; }
.md-donut { width: 100%; max-height: 100%; overflow: visible; transform: rotate(-90deg); }
.md-donut circle { fill: none; stroke: var(--c); stroke-width: 22; stroke-dasharray: 0 100; transition: stroke-dasharray 1.3s var(--ease-out), stroke-width .45s var(--ease-out); }
.md-donut .md-donut-track { stroke: #eef0f4; stroke-dasharray: none; }
.md-donut circle.is-hot { stroke-width: 28; }
.md-legend { display: grid; gap: .55cqi; font-size: 1.15cqi; color: #4b5160; }
.md-legend li { display: flex; align-items: center; gap: .6cqi; transition: color .3s ease; }
.md-legend li::before { content: ''; flex: none; width: 1.1cqi; height: 1.1cqi; border-radius: 50%; background: var(--c); transition: transform .35s var(--ease-out); }
.md-legend li.is-hot { color: #1d2433; font-weight: 700; }
.md-legend li.is-hot::before { transform: scale(1.45); }

/* Master ERP · Vendas - Gerenciamento (desktop) */
.app--erp { left: -2%; top: 59%; width: 42%; --z: 90px; --d: .7s; border-radius: 8px; background: #f0f0f0; }
.app--erp .app-ui { background: #f0f0f0; color: #1f1f1f; padding-bottom: 1.2cqi; }
.erp-title { display: flex; align-items: center; gap: 1cqi; height: 5.6cqi; padding: 0 1.2cqi 0 1.6cqi; background: #7b62a3; color: #fff; font-size: 1.95cqi; }
.erp-title .ic { font-size: 2.3cqi; }
.erp-win { margin-left: auto; display: flex; gap: .6cqi; }
.erp-win i { width: 3.4cqi; height: 2.7cqi; border: .16cqi solid rgb(255 255 255 / .75); border-radius: .3cqi; }
.erp-grid { margin: 1.1cqi 1.1cqi 0; overflow: hidden; background: #fff; border: .16cqi solid #c6c6c6; font-size: 1.6cqi; }
.erp-row { display: grid; grid-template-columns: 12% 25% 21% 25% 17%; height: 4.3cqi; align-items: center; }
.erp-row > span { overflow: hidden; padding: 0 .9cqi; white-space: nowrap; border-right: .1cqi solid rgb(0 0 0 / .1); }
.erp-row > span:is(:nth-child(1), :nth-child(3), :nth-child(5)) { text-align: right; font-variant-numeric: tabular-nums; }
.erp-row--head { background: #f0f0f0; border-bottom: .16cqi solid #c6c6c6; font-weight: 600; }
.erp-rows { position: relative; height: calc(4.3cqi * 6); }
.erp-rows .erp-row { position: absolute; inset: 0 0 auto; background: var(--bg, #fff); border-bottom: .1cqi solid rgb(0 0 0 / .08); transform: translateY(calc(var(--i) * 100%)); transition: transform .6s var(--ease-in-out), background-color .4s ease, opacity .45s ease; }
.erp-rows .erp-row.is-new { opacity: 0; transform: translateY(-70%); }
.erp-rows .erp-row.is-gone { opacity: 0; }
.erp-rows .erp-row.is-active { box-shadow: inset .45cqi 0 0 #5f31c2, inset 0 0 0 .14cqi rgb(95 49 194 / .5); }
:is(.erp-row, .erp-legend span)[data-st="avista"], .erp-legend [data-k="avista"] { --bg: #fff; }
:is(.erp-row)[data-st="faturada"], .erp-legend [data-k="faturada"] { --bg: #a8caf0; }
:is(.erp-row)[data-st="nfe"], .erp-legend [data-k="nfe"] { --bg: #ffa851; }
:is(.erp-row)[data-st="enviado"], .erp-legend [data-k="enviado"] { --bg: #c1dbc2; }
.erp-legend [data-k="cancelado"] { --bg: #ff8486; }
.erp-legend { display: grid; grid-template-columns: repeat(5, 1fr); gap: .9cqi; margin: 1.1cqi 1.1cqi 0; font-size: 1.35cqi; }
.erp-legend span { padding: .5cqi 0; text-align: center; background: var(--bg); border: .1cqi solid rgb(0 0 0 / .1); transition: box-shadow .3s ease, transform .3s var(--ease-out); }
.erp-legend span.is-hot { transform: translateY(-.25cqi); box-shadow: 0 0 0 .28cqi #5f31c2; }
.erp-actions { display: grid; grid-template-columns: repeat(5, 1fr); gap: .9cqi; margin: 1.3cqi 1.1cqi 0; }
.erp-actions span { display: grid; justify-items: center; gap: .55cqi; padding: 1.1cqi .3cqi .9cqi; font-size: 1.3cqi; font-weight: 700; background: linear-gradient(#fdfdfd, #eeeeee); border: .13cqi solid #b5b5b5; border-radius: .35cqi; transition: transform .14s ease-out, background-color .2s ease, box-shadow .2s ease; }
.erp-actions .ic { font-size: 2.9cqi; color: #7b62a3; }
.erp-actions span.is-press { transform: scale(.94); background: #e9e2f5; box-shadow: inset 0 .25cqi .7cqi rgb(0 0 0 / .18); }
.erp-cursor { position: absolute; left: 0; top: 0; width: 3.6cqi; height: 3.6cqi; opacity: 0; transition: transform .75s var(--ease-in-out), opacity .3s ease, scale .14s ease-out; pointer-events: none; }
.erp-cursor path { fill: #fff; stroke: #1d015a; stroke-width: 1.6; stroke-linejoin: round; }
.erp-cursor.is-on { opacity: 1; }
.erp-cursor.is-click { scale: .82; }

/* Cartões "ao vivo" */
.live { border-radius: 18px; background: rgb(255 255 255 / .96); color: var(--ink); box-shadow: 0 40px 70px -30px rgb(8 1 30 / .8), 0 0 0 1px rgb(255 255 255 / .6) inset; font-size: clamp(10px, 1.2cqi, 14px); }
.live--stock { left: 45%; top: 64%; width: 27%; padding: 1.15em 1.2em 1.05em; --z: 170px; --d: 1.05s; --fy: -9px; }
.stock-head { display: grid; grid-template-columns: auto 1fr auto; gap: .8em; align-items: center; }
.stock-icon { width: 2.6em; height: 2.6em; border-radius: .8em; display: grid; place-items: center; background: var(--purple-50); color: var(--purple-500); font-size: 1em; }
.stock-icon .ic { width: 1.4em; height: 1.4em; }
.live.is-syncing .stock-icon .ic { animation: spin 1s linear infinite; }
.stock-head strong { display: block; font-weight: 900; font-size: 1.08em; line-height: 1.2; }
.stock-head div span { display: block; font-size: .86em; color: var(--text-muted); font-weight: 600; }
.stock-ring { width: 2.4em; height: 2.4em; transform: rotate(-90deg); }
.stock-ring circle { fill: none; stroke-width: 4; }
.stock-ring .t { stroke: var(--purple-50); }
.stock-ring .p { stroke: var(--purple-500); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.live.is-syncing .stock-ring .p { animation: ring 1.4s linear forwards; }
.live.is-synced .stock-ring .p { stroke: var(--green-600); stroke-dashoffset: 0; }
.stock-rows { margin-top: .9em; display: grid; gap: .45em; }
.stock-rows li { display: grid; grid-template-columns: 1.6em 1fr auto; align-items: center; gap: .55em; padding: .5em .7em; border-radius: .7em; background: #f4f2fa; font-weight: 700; font-size: .95em; transition: background-color .4s, color .4s; }
.stock-rows li .ic { width: 1.25em; height: 1.25em; color: var(--purple-500); }
.stock-rows b { font-variant-numeric: tabular-nums; font-weight: 900; }
.stock-rows li.is-off { background: #fdecea; color: #a1261b; }
.stock-rows li.is-off .ic { color: #c0392b; }
.live.is-synced .stock-rows li { background: #e6f6ea; color: #17692c; }
.live.is-synced .stock-rows li .ic { color: var(--green-600); }
.stock-foot { margin-top: .7em; font-size: .82em; font-weight: 700; color: var(--text-muted); display: flex; gap: .4em; align-items: center; }
.stock-foot .ic { width: 1.2em; height: 1.2em; color: var(--green-600); }

.live--feed { right: -3%; top: -10%; width: 25%; --z: 190px; --d: 1.2s; --fy: -7px; background: none; box-shadow: none; display: grid; gap: .6em; }
.toast { display: grid; grid-template-columns: 2.5em 1fr auto; gap: .7em; align-items: center; padding: .75em .9em; border-radius: 14px; background: rgb(255 255 255 / .95); box-shadow: 0 24px 50px -24px rgb(8 1 30 / .8); animation: toast-in .6s var(--ease-spring) both; }
.toast.is-out { animation: toast-out .45s var(--ease-out) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-14px) scale(.94); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(14px) scale(.96); } }
.toast-icon { width: 2.5em; height: 2.5em; border-radius: 50%; display: grid; place-items: center; background: var(--purple-500); color: #fff; }
.toast-icon .ic { width: 1.3em; height: 1.3em; }
.toast strong { display: block; font-weight: 900; line-height: 1.2; }
.toast div span { display: block; font-size: .85em; color: var(--text-muted); font-weight: 600; }
.toast time { font-size: .78em; color: var(--text-muted); font-weight: 700; align-self: start; }

/* Selos do briefing, flutuando no palco */
.hero-selos { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.hero-selo { pointer-events: auto; display: inline-flex; align-items: center; gap: .7em; padding: .55em 1.1em .55em .55em; border-radius: 999px; background: #fff; color: var(--purple-800); font-weight: 800; font-size: clamp(10.5px, 1.15cqi, 14px); line-height: 1.2; white-space: nowrap; box-shadow: 0 30px 50px -22px rgb(8 1 30 / .85); }
.hero-selo .selo-icon { width: 2.7em; height: 2.7em; border-radius: 50%; display: grid; place-items: center; background: var(--purple-50); color: var(--purple-500); box-shadow: inset 0 0 0 2px var(--purple-100); }
.hero-selo .selo-icon .ic { width: 1.5em; height: 1.5em; }
.hero-selo img { width: 2.7em; height: 2.7em; border-radius: 50%; box-shadow: 0 0 0 2px var(--yellow-500); }
.hero-selo--1 { left: -2%; top: 36%; --z: 220px; --d: 1.35s; --fy: -10px; }
.hero-selo--2 { right: -1%; bottom: 10%; --z: 230px; --d: 1.5s; --fy: -8px; }
.hero-selo--3 { left: 0; top: -4%; --z: 200px; --d: 1.25s; --fy: -11px; }

/* =====================================================================
   2. QUIZ
   ===================================================================== */
.quiz-section { background: var(--surface-gray) url('../img/net-light.webp') center / cover; }
.quiz-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.quiz-intro { position: sticky; top: calc(var(--header-h) + 32px); }
.quiz-intro h2 { font-size: clamp(2rem, 1.15rem + 2.4vw, 3rem); }
.quiz-intro .lead { margin-top: 18px; font-size: 1.15rem; color: var(--text-muted); }
.quiz-check { margin-top: 18px; display: flex; gap: 12px; align-items: flex-start; color: var(--text); font-weight: 600; }
.quiz-check .ic { flex: none; font-size: 1.4rem; color: var(--green-600); margin-top: .1em; }
.flow-steps { margin-top: 32px; display: grid; gap: 0; position: relative; }
.flow-steps::before { content: ''; position: absolute; left: 23px; top: 24px; bottom: 24px; width: 2px; background: linear-gradient(var(--purple-300), var(--yellow-500)); border-radius: 2px; transform-origin: top; }
.js .flow-steps::before { transform: scaleY(0); transition: transform 1.4s var(--ease-out) .2s; }
.js .flow-steps.is-in::before { transform: scaleY(1); }
.flow-step { display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: center; padding: 10px 0; position: relative; }
.flow-step-icon { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--purple-500); font-size: 1.4rem; box-shadow: 0 0 0 4px var(--surface-gray), 0 6px 16px -8px rgb(45 15 122 / .5); }
.flow-step strong { display: block; color: var(--ink); font-weight: 800; line-height: 1.25; }
.flow-step span { font-size: .95rem; }

.quiz-card {
  position: relative;
  background: #fff;
  border-radius: var(--radius-card);
  border: 2px solid var(--purple-500);
  box-shadow: var(--shadow-card), 0 40px 80px -40px rgb(45 15 122 / .55);
  overflow: hidden;
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.quiz-card::before { /* faixa superior com brilho em movimento (transform, no compositor) */
  content: '';
  position: absolute;
  inset: 0 auto auto 0;
  width: 300%;
  height: 4px;
  background: repeating-linear-gradient(90deg, var(--purple-500) 0, var(--yellow-500) 16.667%, var(--purple-500) 33.333%);
  animation: shimmer 4s linear infinite;
}
@keyframes shimmer { to { transform: translateX(-33.333%); } }
.quiz-stage { position: relative; transition: height .45s var(--ease-out); }
.quiz-step { padding: clamp(24px, 3.4vw, 44px); }
.quiz-step.is-leaving { position: absolute; inset: 0 0 auto; pointer-events: none; }
.quiz-step h3 { font-size: clamp(1.45rem, 1.1rem + 1vw, 1.9rem); line-height: 1.15; outline: none; }
.quiz-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--purple-50); color: var(--purple-600); font-size: .85rem; font-weight: 800; }
.chip .ic { font-size: 1.05rem; }
.chip--yellow { background: var(--yellow-100); color: #6b4a00; }
.chip--green { background: #e3f6e8; color: #17692c; }
.quiz-bullets { margin-top: 20px; display: grid; gap: 12px; }
.quiz-bullets li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; color: var(--text); }
.quiz-bullets .ic { color: var(--purple-500); font-size: 1.3rem; margin-top: .15em; }
.quiz-footnote { margin-top: 16px; font-size: .9rem; color: var(--text-muted); }
.quiz-step .btn { margin-top: 26px; width: 100%; }

.quiz-progress { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.quiz-back { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--purple-50); color: var(--purple-600); font-size: 1.2rem; transition: background-color .2s, transform .2s; }
.quiz-back:hover { background: var(--purple-100); transform: translateX(-2px); }
.quiz-back[hidden] { display: none; }
.quiz-meta { flex: 1; min-width: 0; }
.quiz-meta-label { font-size: .85rem; font-weight: 800; color: var(--purple-600); letter-spacing: .01em; }
.quiz-segments { margin-top: 8px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.quiz-segments i { display: block; height: 6px; border-radius: 6px; background: var(--purple-50); overflow: hidden; position: relative; }
.quiz-segments i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--purple-500), var(--purple-400)); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out); }
.quiz-segments i.is-done::after { transform: scaleX(1); }
.quiz-helper { margin-top: 10px; font-size: .97rem; font-style: italic; color: var(--text-muted); }

.options { margin: 22px 0 0; padding: 0; border: 0; display: grid; gap: 12px; }
.options legend { padding: 0; }
.option { position: relative; display: block; }
.option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.option-card {
  display: grid;
  grid-template-columns: 48px 1fr 24px;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 2px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.3;
  transition: border-color .2s, background-color .2s, transform .25s var(--ease-out), box-shadow .25s;
}
.option-icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--purple-50); color: var(--purple-500); font-size: 1.5rem; transition: background-color .2s, color .2s, transform .35s var(--ease-spring); }
.option-check { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; color: #fff; font-size: .9rem; transition: background-color .2s, border-color .2s, transform .3s var(--ease-spring); }
.option-check .ic { opacity: 0; transform: scale(.4); transition: opacity .2s, transform .3s var(--ease-spring); }
.option input:hover + .option-card { border-color: var(--purple-300); transform: translateY(-2px); box-shadow: 0 12px 24px -16px rgb(45 15 122 / .45); }
.option input:hover + .option-card .option-icon { transform: rotate(-6deg) scale(1.06); }
.option input:focus-visible + .option-card { outline: 3px solid var(--yellow-500); outline-offset: 3px; }
.option input:checked + .option-card { border-color: var(--purple-500); background: var(--purple-50); box-shadow: 0 0 0 4px rgb(95 49 194 / .12); }
.option input:checked + .option-card .option-icon { background: var(--purple-500); color: #fff; }
.option input:checked + .option-card .option-check { background: var(--purple-500); border-color: var(--purple-500); }
.option input:checked + .option-card .option-check .ic { opacity: 1; transform: none; }
.quiz-next { margin-top: 18px; display: flex; justify-content: flex-end; }
.quiz-next .btn { margin-top: 0; width: auto; }

/* Captura */
.form-grid { margin-top: 22px; display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field label, .field legend { font-size: .92rem; font-weight: 800; color: var(--ink); padding: 0; }
.field .req { color: #b42318; }
.input {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border-radius: var(--radius-input);
  border: 2px solid #c9c1de;
  background: #fff;
  color: var(--ink);
  font-weight: 600;
  transition: border-color .2s, box-shadow .2s;
}
.input::placeholder { color: #6f6590; font-weight: 500; }
.input:hover { border-color: var(--purple-300); }
.input:focus { outline: none; border-color: var(--purple-500); box-shadow: 0 0 0 4px rgb(95 49 194 / .16); }
.input[aria-invalid='true'] { border-color: #b42318; box-shadow: 0 0 0 4px rgb(180 35 24 / .1); }
.field-help { font-size: .82rem; color: var(--text-muted); }
.field-error { font-size: .85rem; font-weight: 700; color: #b42318; display: flex; gap: 6px; align-items: center; }
.field-error:empty { display: none; }
.erp-chips { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.erp-chips .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.erp-chip { position: relative; }
.erp-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.erp-chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 2px solid #c9c1de; font-weight: 700; color: var(--ink); background: #fff; transition: all .2s; }
.erp-chip input:hover + span { border-color: var(--purple-300); }
.erp-chip input:focus-visible + span { outline: 3px solid var(--yellow-500); outline-offset: 2px; }
.erp-chip input:checked + span { background: var(--purple-500); border-color: var(--purple-500); color: #fff; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lgpd { margin-top: 12px; font-size: .85rem; color: var(--text-muted); display: flex; gap: 8px; align-items: center; justify-content: center; }
.lgpd a { font-weight: 700; }
.form-alert { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: #fef3f2; color: #912018; font-weight: 600; font-size: .92rem; }
.form-alert:empty { display: none; }

/* Análise (carregando) */
.analysis { display: grid; gap: 18px; padding-block: 8px; }
.analysis-ring { width: 84px; height: 84px; margin-inline: auto; position: relative; }
.analysis-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.analysis-ring circle { fill: none; stroke-width: 6; }
.analysis-ring .track { stroke: var(--purple-50); }
.analysis-ring .bar { stroke: var(--purple-500); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ring 1.5s var(--ease-out) forwards; }
@keyframes ring { to { stroke-dashoffset: 0; } }
.analysis-ring .ic { position: absolute; inset: 0; margin: auto; font-size: 2rem; color: var(--purple-500); }
.analysis h3 { text-align: center; }
.analysis-list { display: grid; gap: 10px; max-width: 360px; margin-inline: auto; width: 100%; }
.analysis-list li { display: flex; gap: 10px; align-items: center; font-weight: 700; color: var(--text); opacity: .35; transition: opacity .3s; }
.analysis-list li .ic { color: var(--green-600); font-size: 1.25rem; transform: scale(.5); opacity: 0; transition: transform .4s var(--ease-spring), opacity .2s; }
.analysis-list li.is-done { opacity: 1; }
.analysis-list li.is-done .ic { transform: none; opacity: 1; }

/* Resultado */
.result-head { display: grid; gap: 14px; }
.result-bullets { margin-top: 18px; display: grid; gap: 12px; }
.result-bullets li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; color: var(--text); }
.result-bullets .ic { font-size: 1.3rem; color: var(--purple-500); margin-top: .12em; }
.score-card { margin-top: 24px; border-radius: 20px; background: linear-gradient(150deg, var(--purple-600), var(--purple-800)); color: #fff; padding: clamp(20px, 3vw, 28px); display: grid; grid-template-columns: 180px 1fr; gap: 22px; align-items: center; position: relative; overflow: hidden; }
.score-card::before { content: ''; position: absolute; width: 260px; height: 260px; right: -90px; top: -120px; border-radius: 50%; background: radial-gradient(circle, rgb(254 202 77 / .28), transparent 65%); }
.gauge { position: relative; width: 180px; }
.gauge svg { width: 100%; height: auto; overflow: visible; }
.gauge .g-track { fill: none; stroke: rgb(255 255 255 / .16); stroke-width: 14; stroke-linecap: round; }
.gauge .g-bar { fill: none; stroke: url(#gaugeGrad); stroke-width: 14; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease-out) .2s; }
.gauge .g-tick { fill: rgb(255 255 255 / .6); font-size: 10px; font-weight: 700; font-family: inherit; }
.gauge-value { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; line-height: 1; }
.gauge-value strong { font-size: 3rem; font-weight: 900; color: var(--yellow-500); font-variant-numeric: tabular-nums; }
.gauge-value span { display: block; font-size: .85rem; font-weight: 700; color: rgb(255 255 255 / .8); margin-top: 4px; }
.score-text h4 { color: #fff; font-size: 1.2rem; line-height: 1.25; }
.score-text h4 em { font-style: normal; color: var(--yellow-500); }
.score-text p { margin-top: 6px; color: rgb(255 255 255 / .85); font-size: .97rem; }
.faixas { margin-top: 18px; display: grid; gap: 8px; }
.faixas-title { margin-top: 22px; font-weight: 900; color: var(--ink); font-size: 1.05rem; }
.faixa { display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: start; padding: 12px 14px; border-radius: 14px; border: 2px solid transparent; background: #f6f4fb; font-size: .93rem; color: var(--text-muted); transition: all .3s; }
.faixa b { color: var(--ink); font-weight: 800; }
.faixa-range { font-weight: 900; color: var(--purple-600); font-size: .9rem; }
.faixa.is-current { background: var(--yellow-100); border-color: var(--yellow-500); color: var(--text); }
.faixa.is-current .faixa-range { color: #6b4a00; }
.result-extra { margin-top: 16px; display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 14px 16px; border-radius: 14px; background: var(--purple-50); color: var(--purple-800); font-weight: 700; }
.result-extra .ic { color: var(--purple-500); font-size: 1.3rem; }
.result-cta { margin-top: 24px; padding-top: 22px; border-top: 2px dashed var(--line); }
.result-cta p { font-weight: 800; color: var(--ink); font-size: 1.08rem; }
.result-cta .btn { margin-top: 16px; }
.result-secondary { margin-top: 14px; display: flex; justify-content: center; }
.text-btn { border: 0; background: none; padding: 6px 4px; color: var(--purple-600); font-weight: 800; display: inline-flex; gap: 6px; align-items: center; }
.text-btn:hover { text-decoration: underline; text-underline-offset: .2em; }

/* =====================================================================
   3. EFICIÊNCIA + EXPLORADOR DE RECURSOS
   ===================================================================== */
.efficiency .section-head p { color: rgb(255 255 255 / .82); }
.flow-title { margin-top: clamp(48px, 6vw, 72px); text-align: center; font-size: clamp(1.3rem, 1.05rem + .8vw, 1.75rem); font-weight: 900; color: #fff; }
.pipeline-wrap { position: relative; margin-top: 36px; }
.pipeline { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.pipeline-line { position: absolute; left: 12.5%; right: 12.5%; top: 34px; height: 2px; background: rgb(255 255 255 / .2); overflow: hidden; border-radius: 2px; }
.pipeline-line::after { content: ''; position: absolute; inset: 0; width: 22%; background: linear-gradient(90deg, transparent, var(--yellow-500), transparent); animation: packet 2.8s linear infinite; }
@keyframes packet { from { transform: translateX(-100%); } to { transform: translateX(460%); } }
.pipe-node { position: relative; text-align: center; display: grid; justify-items: center; gap: 14px; }
.pipe-icon { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--purple-500); font-size: 1.8rem; box-shadow: 0 0 0 8px rgb(255 255 255 / .1), 0 18px 30px -14px rgb(19 3 63 / .7); position: relative; }
.pipe-icon::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--yellow-500); opacity: 0; animation: pulse-ring 2.8s var(--ease-out) infinite; animation-delay: calc(var(--i, 0) * .7s); }
@keyframes pulse-ring { 0% { opacity: .9; transform: scale(.9); } 70%, 100% { opacity: 0; transform: scale(1.35); } }
.pipe-node p { color: rgb(255 255 255 / .9); font-weight: 600; max-width: 22ch; line-height: 1.45; }
.center-cta { margin-top: 44px; display: flex; justify-content: center; }

.explorer { margin-top: clamp(56px, 7vw, 96px); display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: stretch; }
.explorer-tabs { display: grid; gap: 6px; align-content: start; }
.tab {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: rgb(255 255 255 / .78);
  text-align: left;
  font-weight: 700;
  line-height: 1.25;
  overflow: hidden;
  transition: background-color .25s, color .25s;
}
.tab-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgb(255 255 255 / .1); color: #fff; font-size: 1.3rem; transition: background-color .25s, color .25s; }
.tab:hover { background: rgb(255 255 255 / .08); color: #fff; }
.tab[aria-selected='true'] { background: #fff; color: var(--purple-800); box-shadow: 0 16px 30px -18px rgb(19 3 63 / .8); }
.tab[aria-selected='true'] .tab-icon { background: var(--purple-500); color: #fff; }
.tab-timer { position: absolute; left: 14px; right: 14px; bottom: 6px; height: 3px; border-radius: 3px; background: var(--purple-100); overflow: hidden; opacity: 0; }
.tab[aria-selected='true'] .tab-timer { opacity: 1; }
.tab-timer::after { content: ''; position: absolute; inset: 0; background: var(--yellow-500); transform: scaleX(0); transform-origin: left; }
.explorer.is-playing .tab[aria-selected='true'] .tab-timer::after { animation: timer var(--dur, 6s) linear forwards; }
.explorer.is-paused .tab[aria-selected='true'] .tab-timer::after { animation-play-state: paused; }
@keyframes timer { to { transform: scaleX(1); } }
.explorer-stage { position: relative; min-height: 470px; border-radius: var(--radius-card); background: #fff; box-shadow: var(--shadow-float); overflow: hidden; border: 3px solid rgb(255 255 255 / .9); }
.panel { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.panel[hidden] { display: none; }
.panel-media { position: relative; overflow: hidden; order: 2; }
.panel-media img { width: 100%; height: 100%; object-fit: cover; }
.panel-body { padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; justify-content: center; color: var(--text); }
.panel-icon { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--purple-50); color: var(--purple-500); font-size: 1.9rem; }
.panel h3 { margin-top: 18px; font-size: clamp(1.35rem, 1.1rem + .7vw, 1.7rem); color: var(--purple-500); line-height: 1.15; }
.panel-sub { margin-top: 6px; font-weight: 600; color: var(--text-muted); }
.panel-rule { width: 120px; height: 4px; border-radius: 4px; background: var(--purple-300); margin: 18px 0; }
.panel ul { display: grid; gap: 10px; }
.panel li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; font-size: .98rem; }
.panel li::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--yellow-500); margin-top: .55em; }
.panel li b { color: var(--ink); font-weight: 800; }
.panel.is-entering .panel-media { animation: media-wipe .9s var(--ease-out) both; }
.panel.is-entering .panel-media img { animation: media-zoom 1.4s var(--ease-out) both; }
.panel.is-entering .panel-body > * { animation: rise .7s var(--ease-out) both; }
.panel.is-entering .panel-body > :nth-child(2) { animation-delay: .06s; }
.panel.is-entering .panel-body > :nth-child(3) { animation-delay: .12s; }
.panel.is-entering .panel-body > :nth-child(5) { animation-delay: .18s; }
.panel.is-leaving { z-index: 0; }
.panel.is-entering { z-index: 1; }
@keyframes media-wipe { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes media-zoom { from { transform: scale(1.15); } }
.explorer-controls { display: none; }

/* =====================================================================
   4. ERP PARA E-COMMERCE (palco de dispositivos com dashboards reais)
   ===================================================================== */
.ecom-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.ecom-copy h2 { font-size: clamp(2rem, 1.15rem + 2.4vw, 3rem); }
.ecom-copy p { margin-top: 20px; font-size: 1.15rem; max-width: 34em; }
.ecom-copy .btn { margin-top: 30px; }
.device-stage { position: relative; aspect-ratio: 1.12 / 1; perspective: 1400px; }
.device-glow { position: absolute; inset: 6% 4% 10%; border-radius: 50%; background: radial-gradient(closest-side, rgb(139 102 222 / .5), rgb(139 102 222 / 0)); }
.device-orbit { position: absolute; inset: 4%; border-radius: 50%; border: 2px dashed rgb(95 49 194 / .25); animation: spin 60s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Notebook com o Portal do Cliente do Master Dashboard (recriado da tela real) */
.laptop { position: absolute; left: 0; top: 13%; width: 90%; margin: 0; }
.laptop-screen { position: relative; padding: 2.4% 2.4% 3.2%; background: linear-gradient(160deg, #2c2838, #0f0d16 60%); border-radius: 18px 18px 6px 6px; box-shadow: 0 0 0 1.5px #3f3b4d inset, 0 50px 70px -40px rgb(30 10 80 / .65); }
.laptop-screen::before { content: ''; position: absolute; top: 1%; left: 50%; width: 1.2%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: #1f2a3a; box-shadow: inset 0 0 0 1px #3b4a60; }
.laptop-display { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; container-type: inline-size; background: #284773; color: #3f4752; line-height: 1.25; }
.laptop-base { position: relative; height: 0; padding-top: 3.4%; margin: 0 -6%; background: linear-gradient(#f1f0f6, #c6c4d1 70%, #a9a7b6); border-radius: 2px 2px 40% 40% / 2px 2px 100% 100%; box-shadow: 0 22px 30px -16px rgb(30 10 80 / .5); }
.laptop-base::before { content: ''; position: absolute; top: 0; left: 50%; width: 16%; height: 40%; translate: -50% 0; border-radius: 0 0 10px 10px; background: linear-gradient(#bdbbc9, #d9d8e2); }

/* Tela de login do portal */
.pt-login, .pt-dash { position: absolute; inset: 0; }
.pt-login { display: grid; place-items: center; overflow: hidden; background: radial-gradient(70% 90% at 20% 10%, #24527a 0%, transparent 60%), radial-gradient(80% 90% at 90% 100%, #4a4b9a 0%, transparent 65%), linear-gradient(160deg, #203f68, #2b497b 45%, #394784); transition: opacity .5s ease, scale .6s var(--ease-out); }
.pt-grid { position: absolute; inset: 0; background-image: linear-gradient(rgb(255 255 255 / .05) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .05) 1px, transparent 1px); background-size: 4cqi 4cqi; mask-image: radial-gradient(closest-side, #000, transparent); -webkit-mask-image: radial-gradient(closest-side, #000, transparent); }
.pt-w { position: absolute; border-radius: 1.4cqi; background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .1); animation: pt-float 6s ease-in-out infinite alternate; }
@keyframes pt-float { to { transform: translateY(-1.2cqi); } }
.pt-w--bars { left: 6%; top: 16%; width: 13%; height: 20%; display: flex; align-items: flex-end; gap: 7%; padding: 1.4cqi 1.2cqi 1.2cqi; }
.pt-w--bars i { flex: 1; height: calc(var(--h) * 100%); border-radius: .4cqi .4cqi 0 0; background: linear-gradient(#2fb8d8, #2c6fd0); opacity: .75; }
.pt-w--ring { right: 9%; top: 18%; width: 11%; aspect-ratio: 1; border-radius: 50%; border: none; background: conic-gradient(#c49a3a 0 30%, #b44a6a 0 45%, #5b4fbf 0 75%, rgb(255 255 255 / .12) 0); display: grid; place-items: center; animation-duration: 7s; }
.pt-w--ring b { width: 64%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: #2d4b7d; color: #d6e2f2; font-size: 1.7cqi; font-weight: 700; }
.pt-w--pie { left: 7%; bottom: 14%; width: 10%; aspect-ratio: 1; border-radius: 50%; border: none; background: conic-gradient(#2c6fd0 0 45%, #1f8fb4 0 80%, #2a8a5c 0); opacity: .75; animation-duration: 8s; }
.pt-w--kpis { right: 6%; bottom: 15%; display: flex; gap: .8cqi; background: none; border: none; animation-duration: 6.5s; }
.pt-w--kpis span { display: grid; justify-items: center; gap: .2cqi; padding: .8cqi 1cqi; border-radius: 1cqi; background: rgb(255 255 255 / .1); border: 1px solid rgb(140 170 255 / .35); color: #8fb6ff; font-size: 1.7cqi; font-weight: 800; }
.pt-w--kpis small { font-size: .95cqi; font-weight: 600; color: #b5c3dc; }
.pt-card { position: relative; width: 38%; display: grid; justify-items: center; padding: 2.4cqi 2.6cqi 1.8cqi; text-align: center; background: linear-gradient(#e3e9f1, #d6dee9); border-radius: 2.6cqi; box-shadow: 0 0 0 1px rgb(255 255 255 / .55) inset, 0 2cqi 5cqi -1.5cqi rgb(5 15 40 / .7), 0 0 6cqi rgb(80 150 255 / .25); transition: opacity .4s ease, scale .5s var(--ease-out); }
.pt-pill { display: inline-flex; align-items: center; gap: .6cqi; padding: .45cqi 1.1cqi; border-radius: 99px; background: #eef1ff; border: 1px solid #b9c6f2; color: #2d55b8; font-size: 1cqi; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.pt-pill .ic { font-size: 1.2cqi; }
.pt-brand { display: flex; align-items: center; gap: 1cqi; margin-top: 1.3cqi; text-align: left; }
.pt-logo { width: 5cqi; height: 5cqi; border-radius: 1cqi; display: grid; place-items: center; background: linear-gradient(140deg, #21b1e6, #347fc2 60%, #3b5fb0); box-shadow: 0 .6cqi 1.2cqi -.4cqi rgb(33 120 200 / .8); }
.pt-logo svg { width: 76%; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pt-logo circle { fill: #2f86c9; }
.pt-brand b { display: block; font-size: 2.6cqi; font-weight: 800; color: #4b4f58; line-height: 1; }
.pt-brand small { display: block; font-size: 1.55cqi; letter-spacing: .08em; color: #5d6370; }
.pt-tag { margin-top: 1.3cqi; font-size: 1.3cqi; font-weight: 700; color: #1d2433; }
.pt-tag span { font-weight: 500; color: #3d4250; }
.pt-tag em { font-style: normal; font-weight: 800; color: #1f6fd1; }
.pt-chips { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: .6cqi; margin-top: 1.4cqi; }
.pt-chips > span { display: grid; justify-items: center; gap: .3cqi; padding: .7cqi .2cqi; border-radius: .9cqi; background: #dfe5ee; border: 1px solid #c4cedc; font-size: .82cqi; font-weight: 700; color: #2b3240; }
.pt-chips .ic { font-size: 1.3cqi; color: #2d6fd1; }
.pt-label { justify-self: start; margin-top: 1.2cqi; font-size: 1.05cqi; font-weight: 800; color: #24406e; }
.pt-field { width: 100%; display: flex; align-items: center; gap: .7cqi; height: 3.3cqi; margin-top: .45cqi; padding: 0 1cqi; border-radius: .9cqi; background: #fdfdff; border: 1px solid #c9d6ea; font-size: 1.3cqi; color: #1d2433; transition: box-shadow .25s ease, border-color .25s ease; }
.pt-field--pw { background: #e8f0fd; letter-spacing: .12em; }
.pt-field .ic { font-size: 1.4cqi; color: #6b7280; }
.pt-field.is-focus { border-color: #4a8be0; box-shadow: 0 0 0 .3cqi rgb(74 139 224 / .25); }
.pt-caret { width: 1px; height: 55%; background: #1d2433; opacity: 0; margin-left: -.4cqi; }
.pt-field.is-focus .pt-caret { animation: pt-caret 1s steps(1) infinite; }
@keyframes pt-caret { 50% { opacity: 1; } }
.pt-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: .8cqi; height: 3.5cqi; margin-top: 1.5cqi; border-radius: .9cqi; background: linear-gradient(90deg, #679ddb, #8288e6); color: #fff; font-size: 1.4cqi; font-weight: 800; box-shadow: 0 .8cqi 1.6cqi -.8cqi rgb(80 100 200 / .8); transition: transform .15s ease-out, filter .2s ease; }
.pt-btn .ic { display: none; font-size: 1.5cqi; }
.pt-btn.is-press { transform: scale(.96); filter: brightness(.95); }
.pt-btn.is-loading .ic { display: block; animation: spin .8s linear infinite; }
.pt-foot { margin-top: 1.2cqi; font-size: .85cqi; color: #6b7280; }
.pt-login.is-out { opacity: 0; scale: 1.04; }
.pt-login.is-out .pt-w { animation-play-state: paused; }
.pt-login.is-out .pt-card { scale: .94; opacity: 0; }

/* Painel depois do login (Contas a Receber e Venda por UF) */
.pt-dash { display: grid; grid-template-columns: 6.8cqi minmax(0, 1fr); grid-template-rows: 7.2cqi minmax(0, 1fr); background: #fff; clip-path: circle(0% at 50% 76%); opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s .5s, clip-path 0s .5s; }
/* Entra abrindo a partir do botão "Entrar"; sai com um fade e só então volta ao estado inicial */
.pt-dash.is-on { clip-path: circle(150% at 50% 76%); opacity: 1; visibility: visible; transition: clip-path .9s var(--ease-in-out), opacity 0s, visibility 0s; }
.pt-dash .md-main { grid-template-rows: auto minmax(0, 1fr); }
.pt-cards { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.6cqi; min-height: 0; }
.pt-cards .md-card { display: grid; grid-template-rows: auto auto minmax(0, 1fr); opacity: 0; translate: 0 2cqi; transition: opacity .6s ease, translate .7s var(--ease-out); }
.pt-dash.is-on .pt-cards .md-card { opacity: 1; translate: 0 0; transition-delay: .55s; }
.pt-dash.is-on .pt-cards .md-card + .md-card { transition-delay: .65s; }
.pt-chart { width: 100%; height: 100%; margin-top: .8cqi; overflow: visible; }
.pt-bar { fill: #cfd6e9; stroke: #7185c2; stroke-width: 1.6; transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); transition: transform 1s var(--ease-out); transition-delay: calc(.8s + var(--i) * 110ms); }
.pt-dash.is-on .pt-bar { transform: none; }
.pt-dash:not(.is-on) .pt-bar { transition: transform 0s .5s; }
.pt-dash:not(.is-on) .pt-cards .md-card { transition: opacity 0s .5s, translate 0s .5s; }
.pt-legend { grid-template-columns: 1fr 1fr; column-gap: 1cqi; }
.pt-dash .md-donut circle { transition-delay: calc(.9s + var(--i, 0) * 90ms); }
.pt-dash:not(.is-on) .md-donut circle { transition: stroke-dasharray 0s .5s; }
.phone {
  position: absolute;
  right: -1%;
  bottom: 3%;
  width: 25%;
  aspect-ratio: 252 / 540;
  border-radius: 34px;
  padding: 7px;
  background: linear-gradient(145deg, #2b2440, #0e0a1c);
  box-shadow: 0 0 0 1.5px #4a4166 inset, 0 40px 60px -24px rgb(19 3 63 / .7);
  transform: rotateY(-14deg) rotateX(4deg) rotateZ(2deg);
  transform-style: preserve-3d;
}
.phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 28px; }
.phone::after { content: ''; position: absolute; inset: 7px; border-radius: 28px; background: linear-gradient(120deg, rgb(255 255 255 / .22), transparent 35%); pointer-events: none; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .phone { animation: phone-tilt linear both; animation-timeline: view(); animation-range: entry 10% cover 60%; }
    .laptop { animation: devices-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
  }
}
@keyframes phone-tilt { from { transform: translateY(18%) rotateY(-28deg) rotateX(10deg) rotateZ(6deg); } to { transform: translateY(0) rotateY(-14deg) rotateX(4deg) rotateZ(2deg); } }
@keyframes devices-rise { from { transform: translateY(10%) scale(.95); } to { transform: none; } }
.check-pill {
  position: absolute;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  padding: 10px 16px 10px 12px;
  border-radius: 999px;
  background: var(--purple-500);
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  line-height: 1.2;
  border: 2px solid var(--yellow-500);
  box-shadow: 0 16px 30px -14px rgb(45 15 122 / .7);
  max-width: 250px;
}
.check-pill .ic { color: var(--yellow-500); font-size: 1.35rem; }
.check-pill--1 { top: 1%; right: 4%; }
.check-pill--2 { bottom: 12%; left: -4%; }
.check-pill--3 { bottom: 0; left: 30%; }

/* =====================================================================
   5. INTEGRAÇÕES (hub orbital)
   ===================================================================== */
.integr-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.big-number { display: inline-block; font-size: clamp(3.4rem, 2rem + 4vw, 5.5rem); font-weight: 900; line-height: 1; letter-spacing: -0.03em; color: var(--ink); background: linear-gradient(100deg, var(--yellow-500), var(--yellow-400)); padding: .06em .18em .02em; border-radius: 18px; font-variant-numeric: tabular-nums; }
.integr-copy h2 { margin-top: 14px; font-size: clamp(2rem, 1.15rem + 2.4vw, 3rem); }
.integr-copy p { margin-top: 18px; font-size: 1.15rem; max-width: 30em; }
.integr-copy .btn { margin-top: 30px; }
.hub-wrap { container-type: inline-size; }
.hub { --size: min(560px, 90cqi); position: relative; width: var(--size); aspect-ratio: 1; margin-inline: auto; }
.hub-ring { position: absolute; border-radius: 50%; border: 1.5px solid rgb(255 255 255 / .16); inset: var(--inset); }
.hub-ring--1 { --inset: 22%; }
.hub-ring--2 { --inset: 3%; }
.hub-orbit { position: absolute; inset: var(--inset); border-radius: 50%; animation: spin var(--dur) linear infinite; animation-direction: var(--dir, normal); }
.hub-orbit--1 { --inset: 22%; --dur: 70s; }
.hub-orbit--2 { --inset: 3%; --dur: 110s; --dir: reverse; }
.hub:hover .hub-orbit, .hub:hover .hub-logo-inner { animation-play-state: paused; }
/* Logos em círculos: a órbita gira e só o logo gira ao contrário (fica sempre de pé);
   como o fundo é um círculo, a rotação dele não aparece. */
.hub-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--chip, 96px);
  height: var(--chip, 96px);
  margin: calc(var(--chip, 96px) * -.5) 0 0 calc(var(--chip, 96px) * -.5);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 calc(var(--chip, 96px) * .06) rgb(255 255 255 / .1), 0 12px 24px -12px rgb(0 0 0 / .55);
  transform: rotate(var(--a)) translate(var(--r)) rotate(calc(var(--a) * -1));
}
.hub-logo img { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.hub-logo-inner { display: grid; place-items: center; width: 100%; height: 100%; padding: 19%; animation: spin var(--dur) linear infinite; animation-direction: var(--counter, reverse); }
.hub-orbit--1 .hub-logo { --r: calc(var(--size) * .28); --chip: calc(var(--size) * .165); }
.hub-orbit--2 .hub-logo { --r: calc(var(--size) * .47); --chip: calc(var(--size) * .155); }
.hub-orbit--1 .hub-logo-inner { --dur: 70s; }
.hub-orbit--2 .hub-logo-inner { --dur: 110s; --counter: normal; }
.hub-core { position: absolute; inset: 39%; border-radius: 28%; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 10px rgb(255 255 255 / .08), 0 0 0 22px rgb(255 255 255 / .04), 0 24px 50px -20px rgb(0 0 0 / .7); }
.hub-core img { width: 64%; }
.hub-core::before, .hub-core::after { content: ''; position: absolute; inset: -18%; border-radius: 34%; border: 2px solid var(--yellow-500); opacity: 0; animation: pulse-ring 3.2s var(--ease-out) infinite; }
.hub-core::after { animation-delay: 1.6s; }
.hub-caption { margin-top: 20px; text-align: center; font-size: .92rem; font-weight: 700; color: rgb(255 255 255 / .7); }

/* =====================================================================
   6. DEPOIMENTO
   ===================================================================== */
.testimonial { text-align: center; }
.quote-mark { width: 84px; height: 84px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 26px; background: var(--yellow-500); color: var(--ink); font-size: 2.8rem; box-shadow: 0 18px 30px -16px rgb(184 133 0 / .7); rotate: -6deg; }
.quote-text { max-width: 22em; margin-inline: auto; font-size: clamp(1.6rem, 1.05rem + 1.9vw, 2.6rem); line-height: 1.25; font-weight: 800; letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; }
.quote-text b { font-weight: 900; }
.quote-text b .w { background: linear-gradient(transparent 62%, var(--yellow-400) 62%); }
.js .quote-text .w { color: rgb(29 1 90 / .22); transition: color .4s; }
.js .quote-text .w.is-lit { color: var(--ink); }
.quote-author { margin-top: 32px; display: inline-flex; flex-direction: column; align-items: center; gap: 10px; }
.quote-author img { width: 88px; height: auto; }
.quote-author strong { color: var(--ink); font-weight: 900; font-size: 1.05rem; line-height: 1.2; }
.quote-author span { font-size: .95rem; }
.quote-rule { width: 160px; height: 2px; margin: 28px auto 0; background: var(--purple-300); border-radius: 2px; }

/* =====================================================================
   7. AVALIAÇÕES
   ===================================================================== */
.reviews-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
.review {
  position: relative;
  background: #fff;
  color: var(--text);
  border-radius: var(--radius-card);
  padding: 28px 26px 30px;
  box-shadow: var(--shadow-float);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .5s var(--ease-out), box-shadow .3s;
}
.review:nth-child(2) { margin-top: 40px; }
.review:nth-child(3) { margin-top: 12px; }
.review:hover { box-shadow: 0 34px 70px -28px rgb(19 3 63 / .75); }
.review-head { display: grid; grid-template-columns: 56px 1fr 26px; gap: 14px; align-items: center; }
.review-avatar { width: 56px; height: 56px; border-radius: 50%; box-shadow: 0 0 0 3px var(--yellow-500); }
.review-head strong { display: block; color: var(--purple-500); font-weight: 900; font-size: 1.1rem; line-height: 1.2; }
.stars { display: flex; gap: 2px; color: #f5b70a; font-size: 1rem; margin-top: 4px; }
.review-google { width: 24px; height: 24px; }
.review p { margin-top: 18px; font-size: .97rem; line-height: 1.6; }

/* =====================================================================
   8. PRODUTOS
   ===================================================================== */
.products-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); max-width: 1000px; margin-inline: auto; }
.product { border-radius: var(--radius-card); overflow: hidden; border: 2px solid var(--purple-500); box-shadow: var(--shadow-card); display: flex; flex-direction: column; transition: transform .5s var(--ease-out), box-shadow .4s; }
.product:hover { transform: translateY(-6px); box-shadow: 0 40px 70px -30px rgb(45 15 122 / .6); }
.product--erp { background: var(--purple-100); }
.product--pdv { background: var(--peach-100); }
.product-media { aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 2px solid var(--purple-500); background: var(--purple-500); }
.product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.product:hover .product-media img { transform: scale(1.05); }
.product-body { padding: clamp(22px, 3vw, 34px); display: grid; gap: 16px; justify-items: center; text-align: left; }
.product-logo { height: 52px; width: auto; }
.product-body p { color: #4b3f6b; font-size: 1rem; }
.product-body p strong { color: var(--ink); }

/* =====================================================================
   9. TRAJETÓRIA (prêmios)
   ===================================================================== */
.trajetoria-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.trajetoria h2 { font-size: clamp(2rem, 1.15rem + 2.4vw, 3rem); }
.team-photo { margin-top: 28px; border-radius: var(--radius-card); overflow: hidden; border: 3px solid var(--yellow-500); box-shadow: var(--shadow-float); aspect-ratio: 578 / 336; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
.awards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.award { position: relative; background: #fff; border-radius: 20px; padding: 22px 18px; text-align: center; display: grid; justify-items: center; gap: 8px; color: var(--text-muted); box-shadow: var(--shadow-float); overflow: hidden; transition: transform .45s var(--ease-out); }
.award:nth-child(even) { transform: translateY(28px); }
.award:hover { transform: translateY(-4px); }
.award:nth-child(even):hover { transform: translateY(22px); }
.award::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgb(254 202 77 / .35) 50%, transparent 65%); transform: translateX(-120%); transition: transform .9s var(--ease-out); pointer-events: none; }
.award:hover::after { transform: translateX(120%); }
.award img { height: 76px; width: auto; }
.award strong { color: var(--purple-500); font-weight: 900; font-size: 1.05rem; line-height: 1.2; }
.award span { font-size: .9rem; line-height: 1.35; }
.award .year { font-weight: 800; color: var(--purple-800); }

/* =====================================================================
   10. RESULTADOS + CTA FINAL
   ===================================================================== */
.billion { text-align: center; }
.billion h2 { font-size: clamp(2rem, 1.15rem + 2.6vw, 3.1rem); color: var(--text-muted); }
.billion h2 .hl { font-variant-numeric: tabular-nums; }
.client-logos { margin: 36px auto 0; max-width: 760px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; align-items: center; padding: 24px 36px; border-radius: 999px; border: 2px solid var(--yellow-500); background: rgb(255 255 255 / .55); }
.client-logos img { max-height: 54px; width: auto; margin-inline: auto; filter: grayscale(1); opacity: .8; transition: filter .3s, opacity .3s, transform .3s var(--ease-out); }
.client-logos img:hover { filter: none; opacity: 1; transform: scale(1.06); }
.final-cta {
  position: relative;
  margin-top: clamp(56px, 7vw, 96px);
  border-radius: 32px;
  overflow: hidden;
  padding: clamp(32px, 5vw, 64px);
  background: radial-gradient(90% 120% at 100% 0%, var(--purple-400), var(--purple-600) 50%, var(--purple-800));
  color: #fff;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 32px;
  align-items: center;
  box-shadow: 0 40px 80px -40px rgb(45 15 122 / .8);
}
.final-cta { text-align: left; }
.final-cta .hero-net { opacity: .55; }
.final-cta > :not(canvas) { position: relative; z-index: 1; }
.final-cta h2 { color: #fff; font-size: clamp(1.8rem, 1.1rem + 2vw, 2.7rem); }
.final-cta .btn { margin-top: 28px; }
.final-cta img { width: 100%; max-width: 440px; justify-self: center; filter: drop-shadow(0 30px 40px rgb(19 3 63 / .5)); }
.alt-paths { text-align: left; margin-top: 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.alt-path { background: #fff; border-radius: var(--radius-card); padding: 26px 28px; display: grid; gap: 14px; align-content: start; box-shadow: var(--shadow-card); border: 1.5px solid var(--line); }
.alt-path h3 { font-size: 1.25rem; }
.alt-path p { color: var(--text-muted); }
.alt-path .btn { justify-self: start; }
.wa-link { display: inline-flex; align-items: center; gap: 10px; color: var(--whatsapp); font-weight: 800; text-decoration: none; font-size: 1.05rem; }
.wa-link .ic { font-size: 1.5rem; }
.wa-link:hover { text-decoration: underline; text-underline-offset: .2em; }

/* ---------- Rodapé ---------- */
.site-footer { position: relative; z-index: 2; background: #0e0627; color: rgb(255 255 255 / .78); font-size: .88rem; padding: 26px 0 calc(26px + env(safe-area-inset-bottom)); }
.site-footer .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.site-footer strong { color: #fff; }
.site-footer a { color: #fff; }
.footer-credit { display: inline-flex; align-items: center; gap: 8px; }
.footer-credit img { height: 22px; width: auto; }

/* ---------- CTA fixo no mobile ---------- */
.mobile-cta { display: none; }

/* ---------- Consentimento de cookies ---------- */
.consent {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: var(--z-consent);
  max-width: 420px;
  padding: 16px 18px;
  border-radius: 18px;
  background: #fff;
  color: var(--text);
  font-size: .9rem;
  box-shadow: 0 24px 60px -20px rgb(19 3 63 / .55);
  border: 1px solid var(--line);
  display: grid;
  gap: 12px;
}
.consent[hidden] { display: none; }
.consent-actions { display: flex; gap: 8px; justify-content: flex-end; }
.consent .btn { min-height: 44px; font-size: .9rem; padding: .5em 1em; }

/* =====================================================================
   Responsivo
   ===================================================================== */
@media (max-width: 1080px) {
  .explorer { grid-template-columns: 1fr; }
  .explorer-tabs { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; }
  .explorer-tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; width: auto; grid-template-columns: 34px auto; scroll-snap-align: start; padding: 10px 14px; }
  .tab-icon { width: 34px; height: 34px; font-size: 1.1rem; }
}
@media (max-width: 900px) {
  :root { --header-h: 64px; }
  .quiz-grid, .ecom-grid, .integr-grid, .trajetoria-grid, .final-cta { grid-template-columns: 1fr; }
  .quiz-intro { position: static; }
  .flow-steps { display: none; }
  .pipeline { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .pipeline-line { display: none; }
  .reviews-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .review:nth-child(n) { margin-top: 0; }
  .ecom-visual { order: 2; }
  .device-stage { max-width: 560px; margin-inline: auto; width: 100%; }
  .award:nth-child(even) { transform: none; }
  .award:nth-child(even):hover { transform: translateY(-4px); }
  .final-cta img { max-width: 340px; }
  .alt-paths { grid-template-columns: 1fr; }
}
@media (max-width: 1080px) {
  .live--feed { right: 0; top: -9%; width: 30%; }
  .hero-selo--1 { left: 0; }
}
@media (max-width: 767px) {
  /* Rótulos longos quebram em duas linhas em vez de serem cortados */
  .btn { white-space: normal; text-wrap: balance; text-align: center; }
  .hero-title { font-size: clamp(2rem, 1rem + 4.6vw, 2.5rem); }
  .hero-actions { flex-direction: column; gap: 14px; }
  .hero-auth { font-size: .85rem; align-items: flex-start; text-align: left; max-width: 34em; }
  .stage-wrap { width: calc(100% - 24px); margin-top: 34px; perspective: 1100px; }
  .stage { aspect-ratio: 360 / 388; }
  .app--dash { left: 0; top: 0; width: 100%; }
  .app--erp { display: none; }
  .scr--phone { right: 1%; top: 31%; width: 33%; border-radius: 24px; padding: 5px; }
  .scr--phone .scr-body { border-radius: 20px; }
  .live { font-size: 11px; }
  .live--stock { left: 0; top: 48%; width: 62%; padding: .9em; }
  .live--feed { display: none; }
  .hero-selos { position: static; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; transform: none; }
  .hero-selo { position: static; transform: none; font-size: 12px; }
}
@media (max-width: 767px) {
  body { font-size: 1rem; }
  .header-cta { display: none; }
  .brand img { width: 104px; }
  .hero-actions .btn { width: 100%; }
  .panel { position: relative; grid-template-columns: 1fr; }
  .explorer-stage { min-height: 0; }
  .panel-media { order: 0; aspect-ratio: 16 / 11; }
  .panel.is-leaving { position: absolute; inset: 0; }
  .products-grid { grid-template-columns: 1fr; }
  .client-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 28px; padding: 20px; }
  .score-card { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .faixa { grid-template-columns: 1fr; gap: 2px; }
  .check-pill { font-size: .78rem; padding: 7px 12px 7px 9px; max-width: 200px; }
  .check-pill--1 { right: -2%; }
  .check-pill--2 { left: -2%; bottom: 7%; }
  .check-pill--3 { left: auto; right: -2%; bottom: -10%; }
  .device-stage { margin-bottom: 40px; }
  .option-card { grid-template-columns: 42px 1fr 22px; padding: 12px; gap: 12px; }
  .option-icon { width: 42px; height: 42px; font-size: 1.3rem; }
  .awards { gap: 12px; }
  .award { padding: 18px 12px; }
  .award img { height: 60px; }
  .mobile-cta {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-mobile-cta);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgb(255 255 255 / .97);
    box-shadow: 0 -10px 30px -16px rgb(19 3 63 / .5);
    transform: translateY(110%);
    transition: transform .45s var(--ease-out);
  }
  .mobile-cta.is-visible { transform: none; }
  .mobile-cta .btn { width: 100%; min-height: 52px; }
  .consent { left: 12px; right: 12px; bottom: 12px; max-width: none; }
  .site-footer { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
}

/* Movimento reduzido: tudo estático e imediato */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .layer, .js .stage, .js .hw > span { opacity: 1; transform: none; translate: none; scale: none; }
  .js .layer, .js .stage, .js .hw > span, .js .scr-body > img, .js .scr-glare, .js .hero-title .hl, .js .hero-head > * { animation: none !important; }
  .js .app :is(.md-top, .md-side, .md-tools, .md-card, .erp-grid, .erp-legend, .erp-actions) { opacity: 1; translate: none; animation: none !important; }
  .js .md-line:not(.md-line--live) { stroke-dashoffset: 0; }
  .js .md-dots circle, .js .md-area, .js .md-line--live, .js .md-live { opacity: 1; animation: none !important; }
  .js .hero-title .hl { background-size: 100% 100%; }
  .js .scr-body > img { clip-path: none; }
  .hero-floor::before { animation: none; }
  .hub-orbit, .hub-logo-inner, .device-orbit { animation: none; }
  .draw svg.ic * { stroke-dashoffset: 0; }
}