/* Sorten — site institucional (versão 2, out/2026). Um arquivo, sem dependências além da fonte Manrope. */
:root {
  --navy: #0f1513;
  --navy-2: #161e1b;
  --ink: #101318;
  --ink-2: #2a313b;
  --muted: #5d6b79;
  --paper: #f5f3ee;
  --white: #fcfbf8;
  --line: #e4e0d6;
  --blue: #1e7457;
  --blue-dark: #155c45;
  --cyan: #d2b36f;
  --gold: #d2b36f;
  --ivory: #f3eee3;
  --green: #1e7457;
  --shell: min(1180px, calc(100% - 40px));
  --radius: 18px;
  --shadow: 0 1px 2px rgb(20 24 22 / 6%), 0 14px 34px rgb(20 24 22 / 9%);

  /* um matiz por sistema, mesma saturação e luminosidade do verde do total. */
  --c-total: hsl(160 59% 29%);
  --c-folha: hsl(214 59% 36%);
  --c-portal: hsl(36 78% 38%);
  --c-atos: hsl(268 45% 42%);
  --c-sana: hsl(350 59% 40%);
  --c-saber: hsl(12 66% 44%);
  --c-carta: hsl(320 40% 38%);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }
body {
  margin: 0;
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  font-size: 17px;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { line-height: 1.15; margin: 0; letter-spacing: -0.02em; }
p { margin: 0; }
.shell { width: var(--shell); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 16px; top: -60px; background: var(--white); color: var(--ink); padding: 10px 14px; border-radius: 8px; z-index: 100; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

/* ---------- cabeçalho ---------- */
.site-header { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .25s, box-shadow .25s; }
.site-header.is-scrolled, .site-header.is-solid { background: rgb(15 21 19 / 92%); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgb(255 255 255 / 8%); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 24px; }
.brand img { height: 30px; width: auto; }
.main-nav { display: flex; align-items: center; gap: 28px; }
.main-nav a { color: rgb(255 255 255 / 82%); text-decoration: none; font-weight: 600; font-size: 15px; }
.main-nav a:hover { color: var(--white); }
.main-nav .nav-cta { color: var(--navy); background: var(--ivory); padding: 10px 18px; border-radius: 999px; }
.main-nav .nav-cta:hover { background: var(--white); color: var(--navy); }
.menu-button { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.menu-button span:not(.sr-only) { display: block; width: 24px; height: 2px; background: var(--white); margin: 5px 0; border-radius: 2px; }

/* ---------- botões ---------- */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 24px; border-radius: 999px; font-weight: 700; font-size: 16px; text-decoration: none; border: 2px solid transparent; transition: transform .15s, background .15s, color .15s; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--ivory); color: var(--navy); }
.btn-primary:hover { background: var(--white); }
.btn-ghost { color: var(--ivory); border-color: rgb(243 238 227 / 28%); }
.btn-ghost:hover { border-color: var(--white); }
.btn-dark { background: var(--navy); color: var(--white); }
.btn-dark:hover { background: var(--navy-2); }
.btn svg { width: 20px; height: 20px; flex: none; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; color: var(--white); background: linear-gradient(180deg, #0f1513 0%, #121a17 100%); padding: 150px 0 96px; }
.hero::after { content: none; }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.eyebrow.dark { color: var(--blue); }
.hero h1 { font-size: clamp(38px, 5.4vw, 64px); font-weight: 800; }
.hero h1 span { color: var(--gold); }
.hero-lead { margin-top: 22px; font-size: 19px; color: rgb(243 238 227 / 74%); max-width: 560px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero-checks { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 34px; padding: 0; list-style: none; color: rgb(255 255 255 / 78%); font-size: 15px; font-weight: 600; }
.hero-checks li { display: flex; align-items: center; gap: 8px; }
.hero-checks li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: rgb(210 179 111 / 16%) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d2b36f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/12px no-repeat; }

/* painel ilustrativo do hero (mock de tela, sem dados reais) */
.mock { background: rgb(255 255 255 / 4%); border: 1px solid rgb(243 238 227 / 12%); border-radius: 22px; padding: 18px; box-shadow: 0 30px 80px rgb(0 0 0 / 35%); }
.mock-bar { display: flex; gap: 6px; margin-bottom: 14px; }
.mock-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgb(255 255 255 / 20%); }
.mock-body { background: var(--white); color: var(--ink); border-radius: 14px; overflow: hidden; display: grid; grid-template-columns: 150px 1fr; min-height: 330px; }
.mock-side { background: #0b3328; color: rgb(255 255 255 / 85%); padding: 16px 12px; font-size: 12.5px; }
.mock-side b { display: block; color: var(--white); font-size: 18px; margin: 0 0 14px 4px; }
.mock-side span { display: block; padding: 7px 8px; border-radius: 8px; }
.mock-side span.on { background: rgb(255 255 255 / 12%); color: var(--white); }
.mock-main { padding: 18px; }
.mock-main h4 { font-size: 15px; margin-bottom: 12px; }
.mock-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.mock-kpis div { border: 1px solid var(--line); border-radius: 10px; padding: 10px; font-size: 11px; color: var(--muted); }
.mock-kpis strong { display: block; color: var(--ink); font-size: 15px; margin-top: 2px; }
.mock-row { display: grid; grid-template-columns: 1.6fr 1fr .8fr; gap: 8px; align-items: center; font-size: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.mock-row em { font-style: normal; justify-self: start; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: hsl(160 59% 92%); color: var(--c-total); }
.mock-row em.wait { background: hsl(36 90% 92%); color: var(--c-portal); }
.mock-note { margin-top: 10px; font-size: 11px; color: var(--muted); }

/* ---------- faixa de conformidade ---------- */
.compliance { background: var(--navy-2); color: rgb(243 238 227 / 82%); }
.compliance ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 34px; list-style: none; margin: 0 auto; padding: 22px 0; font-weight: 700; font-size: 14.5px; }
.compliance li { display: flex; align-items: center; gap: 8px; }
.compliance li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }

/* ---------- seções ---------- */
.section { padding: 104px 0; }
.section.alt { background: var(--paper); }
.section-head { max-width: 760px; margin-bottom: 52px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: clamp(30px, 3.6vw, 44px); font-weight: 800; }
.section-head p { margin-top: 16px; color: var(--muted); font-size: 18px; }

/* produtos */
.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.product { --c: var(--c-total); position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 14px; transition: transform .2s, box-shadow .2s, border-color .2s; }
.product:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--c) 35%, var(--line)); }
.product.big { grid-column: span 2; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 7%, white), white 60%); }
.product-top { display: flex; align-items: center; gap: 14px; }
.sym { width: 46px; height: 42px; background: var(--c); -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; flex: none; }
.product-name { font-size: 26px; font-weight: 800; color: var(--c); letter-spacing: -0.03em; }
.product-kind { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.product p { color: var(--ink-2); }
.product ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; font-size: 15px; color: var(--ink-2); }
.product.big ul { grid-template-columns: 1fr 1fr; column-gap: 24px; }
.product li { position: relative; padding-left: 15px; }
.product li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 2px; background: var(--c); }
.product-more { text-decoration: none; border-style: dashed; background: transparent; justify-content: center; }
.product-more .product-name { font-size: 22px; }
.tag { align-self: flex-start; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--c) 12%, white); color: var(--c); }
.p-total { --c: var(--c-total); --m: url(/produtos/total-simbolo.svg); }
.p-folha { --c: var(--c-folha); --m: url(/produtos/verba-simbolo.svg); }
.p-portal { --c: var(--c-portal); --m: url(/produtos/portal-simbolo.svg); }
.p-atos { --c: var(--c-atos); --m: url(/produtos/atos-simbolo.svg); }
.p-sana { --c: var(--c-sana); --m: url(/produtos/sana-simbolo.svg); }
.p-saber { --c: var(--c-saber); --m: url(/produtos/saber-simbolo.svg); }
.p-carta { --c: var(--c-carta); --m: url(/produtos/carta-simbolo.svg); }

/* destaque escritórios */
.partner { background: linear-gradient(135deg, #17533f 0%, var(--navy) 72%); color: var(--white); border-radius: 28px; padding: 56px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; position: relative; overflow: hidden; }
.partner::before { content: none; }
.partner h2 { font-size: clamp(28px, 3.2vw, 40px); font-weight: 800; position: relative; }
.partner p { color: rgb(255 255 255 / 80%); margin-top: 16px; font-size: 18px; position: relative; }
.partner .hero-actions { position: relative; }
.partner-list { position: relative; display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.partner-list li { background: rgb(255 255 255 / 6%); border: 1px solid rgb(255 255 255 / 12%); border-radius: 14px; padding: 16px 18px; }
.partner-list strong { display: block; font-size: 16px; }
.partner-list span { color: rgb(255 255 255 / 72%); font-size: 15px; }

/* diferenciais */
.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.feature { padding: 26px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); }
.feature .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: hsl(160 35% 92%); color: var(--blue); margin-bottom: 16px; }
.feature .ico svg { width: 22px; height: 22px; }
.feature h3 { font-size: 18px; margin-bottom: 8px; }
.feature p { color: var(--muted); font-size: 15.5px; }

/* passos */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: s; list-style: none; padding: 0; margin: 0; }
.steps li { counter-increment: s; position: relative; padding: 26px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); }
.steps li::before { content: counter(s, decimal-leading-zero); font-weight: 800; color: var(--blue); font-size: 14px; letter-spacing: .1em; }
.steps h3 { font-size: 19px; margin: 10px 0 8px; }
.steps p { color: var(--muted); font-size: 15.5px; }

/* sobre */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.about p + p { margin-top: 16px; }
.about-card { background: var(--paper); border: 1px solid var(--line); border-radius: 24px; padding: 32px; display: grid; gap: 18px; }
.about-card div { display: flex; gap: 14px; align-items: flex-start; }
.about-card b { display: block; font-size: 16px; }
.about-card span { color: var(--muted); font-size: 15px; }
.about-card .ico { width: 40px; height: 40px; flex: none; border-radius: 10px; background: var(--white); border: 1px solid var(--line); display: grid; place-items: center; color: var(--blue); }
.about-card .ico svg { width: 20px; height: 20px; }

/* FAQ */
.faq { max-width: 860px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 4px 22px; }
.faq summary { cursor: pointer; font-weight: 700; padding: 16px 0; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--blue); }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 0 18px; color: var(--ink-2); }

/* contato */
.cta { background: linear-gradient(160deg, #17533f 0%, var(--navy) 70%); color: var(--ivory); text-align: center; padding: 96px 0; }
.cta h2 { font-size: clamp(30px, 3.8vw, 46px); font-weight: 800; max-width: 780px; margin: 0 auto; }
.cta p { color: rgb(255 255 255 / 82%); margin: 16px auto 0; max-width: 620px; font-size: 18px; }
.cta .hero-actions { justify-content: center; }
.contact-lines { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; margin-top: 28px; color: rgb(255 255 255 / 85%); font-weight: 600; }
.contact-lines a { text-decoration: none; }
.contact-lines a:hover { text-decoration: underline; }

/* rodapé */
.footer { background: #0b100e; color: rgb(255 255 255 / 70%); padding: 56px 0 32px; font-size: 14.5px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.footer img { height: 26px; width: auto; margin-bottom: 14px; }
.footer h4 { color: var(--white); font-size: 14px; margin-bottom: 12px; letter-spacing: .04em; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer a { text-decoration: none; color: rgb(255 255 255 / 78%); }
.footer a:hover { color: var(--white); }
.footer-legal { border-top: 1px solid rgb(255 255 255 / 10%); margin-top: 40px; padding-top: 22px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 13px; }

/* botão flutuante de WhatsApp */
.wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 40; width: 58px; height: 58px; border-radius: 50%; background: #25d366; color: var(--white); display: grid; place-items: center; box-shadow: 0 10px 30px rgb(0 0 0 / 25%); }
.wa-float svg { width: 30px; height: 30px; }

/* página interna: hero menor */
.hero.small { padding: 140px 0 80px; }
.hero.small .hero-grid { grid-template-columns: 1.2fr .8fr; }
.compare { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; font-size: 15.5px; }
.compare th, .compare td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare th { background: var(--paper); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.compare tr:last-child td { border-bottom: 0; }
.compare td:first-child { font-weight: 700; width: 34%; }

/* animação de entrada */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; transition-delay: var(--d, 0ms); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- responsivo ---------- */
@media (max-width: 1020px) {
  .hero-grid, .hero.small .hero-grid, .partner, .about { grid-template-columns: 1fr; }
  .products { grid-template-columns: 1fr 1fr; }
  .product.big { grid-column: span 2; }
  .features, .steps { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .partner { padding: 40px 28px; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .menu-button { display: block; }
  .main-nav { position: fixed; inset: 76px 0 auto; flex-direction: column; align-items: stretch; gap: 0; background: var(--navy); padding: 8px 20px 20px; transform: translateY(-120%); transition: transform .25s; }
  .main-nav.is-open { transform: none; }
  .main-nav a { padding: 14px 4px; border-bottom: 1px solid rgb(255 255 255 / 8%); }
  .main-nav .nav-cta { margin-top: 12px; text-align: center; border: 0; }
  .site-header { background: rgb(7 22 37 / 94%); }
  .hero { padding: 120px 0 72px; }
  .section { padding: 72px 0; }
  .products, .features, .steps, .footer-grid { grid-template-columns: 1fr; }
  .product.big { grid-column: auto; }
  .product.big ul { grid-template-columns: 1fr; }
  .mock-body { grid-template-columns: 1fr; }
  .mock-side { display: none; }
  .compare td:first-child { width: auto; }
  .compare th, .compare td { padding: 12px 14px; }
}

/* ======================================================================
   v2.1 — faixas sobrepostas, tela flutuante e cena guiada pela rolagem
   (técnicas inspiradas no site do Jadeit, adaptadas a um sistema web)
   ====================================================================== */
:root { --ease: cubic-bezier(.22, 1, .36, 1); }
.band { position: relative; border-radius: 28px 28px 0 0; margin-top: -32px; }
.band.section { padding: 112px 0 120px; }
.band-paper { background: var(--paper); }
.band-white { background: var(--white); }
.band-ink { background: #121916; color: var(--ivory); }
.band-ink .section-head p, .band-ink .feature p { color: rgb(255 255 255 / 72%); }
.band-ink .feature { background: rgb(255 255 255 / 5%); border-color: rgb(255 255 255 / 12%); }
.band-ink .feature .ico { background: rgb(210 179 111 / 12%); color: var(--gold); }
.band-ink .eyebrow.dark { color: var(--gold); }
.z2 { z-index: 2; } .z3 { z-index: 3; } .z4 { z-index: 4; } .z5 { z-index: 5; } .z6 { z-index: 6; } .z7 { z-index: 7; } .z8 { z-index: 8; } .z9 { z-index: 9; }
.hero { z-index: 1; padding-bottom: 128px; }
.compliance { position: relative; z-index: 2; border-radius: 28px 28px 0 0; margin-top: -32px; padding-bottom: 32px; }
.cta.band { padding: 120px 0 112px; }

/* tela flutuante + brilho */
.float-wrap { position: relative; }
.float-glow { position: absolute; left: 50%; top: 8%; width: 78%; aspect-ratio: 1; margin-left: -39%; border-radius: 30%; background: #1e7457; opacity: .16; filter: blur(30px); transform: rotate(18deg); animation: breathe 5.5s ease-in-out infinite alternate; }
.float-wrap .mock { position: relative; animation: float 6s ease-in-out infinite alternate; }
.float-wrap:focus-within .mock, .float-wrap:hover .mock { animation-play-state: paused; }
@keyframes float { to { transform: translateY(-10px); } }
@keyframes breathe { to { opacity: .26; transform: rotate(18deg) scale(1.05); } }

/* cena guiada pela rolagem */
.scene { padding: 104px 0 120px; }
.scene-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
.scene-steps .step { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; }
.scene-steps .step:first-child { min-height: 60vh; }
.step .kicker { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.step h3 { font-size: clamp(26px, 3vw, 38px); font-weight: 800; margin: 10px 0 12px; opacity: .35; transition: opacity .35s var(--ease); max-width: 18ch; }
.step p { color: var(--muted); font-size: 17px; max-width: 46ch; opacity: .35; transition: opacity .35s var(--ease); }
.step.is-active h3, .step.is-active p { opacity: 1; }
.scene-screen { position: sticky; top: calc(50vh - 230px); }
.screen-slot { transition: transform .8s var(--ease); will-change: transform; }
.scene[data-active="0"] .screen-slot { transform: rotate(-1.5deg); }
.scene[data-active="1"] .screen-slot { transform: rotate(1.2deg); }
.scene[data-active="2"] .screen-slot { transform: rotate(-.8deg); }
.scene[data-active="3"] .screen-slot { transform: scale(1.02); }
.browser { background: #141b18; border-radius: 18px; padding: 12px; box-shadow: 0 2px 4px rgb(7 22 37 / 20%), 0 40px 80px -20px rgb(7 22 37 / 45%); }
.browser-bar { display: flex; align-items: center; gap: 6px; padding: 2px 6px 12px; }
.browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgb(255 255 255 / 22%); }
.browser-bar span { margin-left: 12px; flex: 1; background: rgb(255 255 255 / 8%); color: rgb(255 255 255 / 60%); font-size: 12px; border-radius: 999px; padding: 5px 12px; }
.screens { position: relative; height: 330px; background: var(--white); border-radius: 10px; overflow: hidden; }
.sc { position: absolute; inset: 0; padding: 22px; opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility 0s .35s; color: var(--ink); }
.sc.on { opacity: 1; visibility: visible; transition-delay: 0s; }
.sc.on .bd { animation: bd .6s var(--ease) both; }
.sc.on .bd:nth-child(2) { animation-delay: .08s; } .sc.on .bd:nth-child(3) { animation-delay: .16s; }
.sc.on .bd:nth-child(4) { animation-delay: .24s; } .sc.on .bd:nth-child(5) { animation-delay: .32s; } .sc.on .bd:nth-child(6) { animation-delay: .40s; }
@keyframes bd { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.sc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.sc-head b { font-size: 17px; }
.sc-head small { font-weight: 700; color: var(--c-total); background: hsl(160 59% 93%); padding: 3px 10px; border-radius: 999px; font-size: 12px; white-space: nowrap; }
.sc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field { border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font-size: 12px; color: var(--muted); }
.field strong { display: block; color: var(--ink); font-size: 14px; margin-top: 2px; }
.field.wide { grid-column: span 2; }
.bar { height: 10px; border-radius: 999px; background: var(--paper); overflow: hidden; margin-top: 8px; }
.bar i { display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, var(--c-total), #2fa37c); border-radius: inherit; }
.sc.on .bar i { animation: grow 1.1s var(--ease) .3s both; }
@keyframes grow { from { width: 0; } }
.rule { display: flex; gap: 10px; align-items: center; margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: hsl(160 59% 95%); color: var(--c-total); font-size: 13px; font-weight: 700; }
.rule svg { width: 18px; height: 18px; flex: none; }
.rule.warn { background: hsl(36 90% 94%); color: var(--c-portal); }
.ok-big { display: grid; place-items: center; text-align: center; gap: 6px; margin-top: 6px; }
.ok-big svg { width: 84px; height: 84px; color: var(--c-total); }
.ok-big b { font-size: 18px; }
.ok-big span { color: var(--muted); font-size: 13px; }
.check-ring { stroke-dasharray: 176; }
.check-mark { stroke-dasharray: 44; }
.sc.on .check-ring { animation: draw-ring .8s var(--ease) both; }
.sc.on .check-mark { animation: draw-mark .5s var(--ease) .55s both; }
@keyframes draw-ring { from { stroke-dashoffset: 176; } }
@keyframes draw-mark { from { stroke-dashoffset: 44; } }
.pg-dots { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
.pg-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: width .3s var(--ease), background-color .3s var(--ease); }
.pg-dots i.on { width: 24px; border-radius: 999px; background: var(--blue); }

/* FAQ abrindo suave (navegadores que suportam) */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow: clip; opacity: 0; transition: block-size .35s var(--ease), opacity .3s, content-visibility .35s allow-discrete; }
  .faq details[open]::details-content { block-size: auto; opacity: 1; }
}
.faq summary::after { transition: transform .3s var(--ease); }
.faq details[open] summary::after { content: "+"; transform: rotate(45deg); }
.product, .feature, .steps li { transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.feature:hover, .steps li:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.btn { transition: transform .2s var(--ease), background .2s, color .2s, box-shadow .2s; }
.btn-primary { box-shadow: 0 2px 0 rgb(0 0 0 / 12%); }
.btn-primary:hover { box-shadow: 0 10px 26px -10px rgb(0 0 0 / 55%); }

.z10 { z-index: 10; } .z11 { z-index: 11; }
.band-paper .about-card, .band-paper .faq details { background: var(--white); }

/* onde atendemos: mapa do Nordeste */
:root { --orange: #f07a1a; --orange-soft: #ffe7d3; }
.where { display: grid; grid-template-columns: .62fr 1.38fr; gap: 36px; align-items: center; }
.where-map { padding: 16px; }
/* telas largas (16:9): a seção sai da largura padrão e o mapa cresce, com os cartões na lateral */
@media (min-width: 1280px) {
  .shell.where { width: min(1560px, calc(100% - 64px)); grid-template-columns: 360px 1fr; gap: 40px; }
  .where-map { padding: 20px; }
}
@media (min-width: 1600px) {
  .shell.where { grid-template-columns: 380px 1fr; }
}
.ne-map .uf-label { font-size: 15px; }
.where-copy h2 { font-size: clamp(28px, 3.4vw, 42px); font-weight: 800; }
.where-copy > p { margin-top: 16px; color: var(--muted); font-size: 18px; }
.uf-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 26px; }
.uf-card { font: inherit; text-align: left; cursor: pointer; background: var(--white); border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 14px; display: grid; gap: 1px; transition: border-color .2s, box-shadow .2s, transform .2s var(--ease); }
.uf-card b { font-size: 15px; }
.uf-card span { font-size: 13px; font-weight: 700; color: var(--blue); }
.uf-card em { font-style: normal; font-size: 12.5px; color: var(--muted); }
.uf-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.uf-card.is-on { border-color: var(--orange); box-shadow: 0 0 0 3px rgb(240 122 26 / 18%); }
.uf-card.is-on span { color: var(--orange); }
.where-note { margin-top: 14px; font-size: 14px; color: var(--muted); }
.where-map { position: relative; }
.ne-map { width: 100%; height: auto; display: block; }
.ne-map .viz path { fill: #f1f4f7; stroke: #fff; stroke-width: 1.5; }
.ne-map .m { fill: #4f86d8; stroke: #fff; stroke-width: .6; transition: fill .3s, opacity .3s; }
.ne-map .m.on { fill: var(--orange); }
.ne-map .m:hover { fill: #2f6bc4; }
.ne-map .m.on:hover { fill: #d95f00; }
.ne-map .borders path { fill: none; stroke: #fff; stroke-width: 2.6; pointer-events: none; }
.ne-map .st { cursor: pointer; }
.ne-map.has-pick .st:not(.is-on) .m { opacity: .45; }
.ne-map .uf-label { font: 800 17px Manrope, sans-serif; fill: var(--navy); text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: rgb(255 255 255 / 85%); stroke-width: 4px; }
.js .ne-map .m.on { fill: #4f86d8; }
.js .where-map.is-visible .ne-map .m.on { animation: paint .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 5ms); }
@keyframes paint { from { fill: #4f86d8; } to { fill: var(--orange); } }
.where-map { background: var(--paper); border-radius: 24px; padding: 18px; border: 1px solid var(--line); }
.ne-map .sede circle { fill: var(--navy); stroke: #fff; stroke-width: 2.5; }
.ne-map .sede .pulse { fill: none; stroke: var(--navy); stroke-width: 2; animation: pulse 2.2s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pulse { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(3); } }
.ne-map .sede text { font: 800 14px Manrope, sans-serif; fill: var(--navy); paint-order: stroke; stroke: #fff; stroke-width: 4px; }
.map-legend { display: flex; gap: 20px; justify-content: center; margin-top: 10px; font-size: 13.5px; color: var(--muted); font-weight: 600; }
.map-legend span { display: flex; align-items: center; gap: 7px; }
.map-legend i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.lg-city { background: var(--orange); } .lg-remoto { background: #4f86d8; }

@media (max-width: 1020px) {
  .where { grid-template-columns: 1fr; }
  .where-map { padding: 10px; }
  .scene-grid { grid-template-columns: 1fr; gap: 0; }
  .scene-screen { top: 84px; z-index: 2; padding-bottom: 12px; }
  .scene-steps .step, .scene-steps .step:first-child { min-height: 64vh; }
  .screens { height: 340px; }
}
@media (max-width: 760px) {
  .band, .compliance { border-radius: 20px 20px 0 0; margin-top: -24px; }
  .band.section { padding: 80px 0 88px; }
  .screens { height: 300px; }
  .sc { padding: 14px; }
  .scene-steps .step, .scene-steps .step:first-child { min-height: 56vh; }
  .step h3, .step p { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .float-wrap .mock, .float-glow { animation: none; }
  .screen-slot { transform: none !important; }
}

/* faixa de conformidade: esteira contínua (o JS duplica os itens) */
.compliance { overflow: hidden; }
.marquee-vp { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.compliance ul.marquee { width: max-content; max-width: none; margin: 0; flex-wrap: nowrap; justify-content: flex-start; gap: 0; animation: marquee 45s linear infinite; }
.compliance ul.marquee li { white-space: nowrap; padding: 0 22px; }
.compliance:hover ul.marquee { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ======================================================================
   Hoje x Com a Sorten
   ====================================================================== */
.pains { display: grid; gap: 14px; }
.pains-head { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 0 6px; font-size: 12.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.pains-head span:first-child { color: #9c4a32; } .pains-head span:last-child { color: var(--blue); }
.pain { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pain-old, .pain-new { display: flex; gap: 14px; align-items: flex-start; padding: 22px 24px; border-radius: 18px; }
.pain-old { background: #efebe3; border: 1px solid #e3ddd1; }
.pain-old b { color: #2b2723; } .pain-old p { color: #4f4942; }
.pain-new { background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow); }
.pain-new b { color: var(--ink); } .pain-new p { color: var(--ink-2); }
.pain b { display: block; font-size: 17px; margin-bottom: 4px; letter-spacing: -.01em; }
.pain p { font-size: 15.5px; }
.pain i { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; margin-top: 1px; }
.pain i.x { background: #f6dfd6; }
.pain i.x::before { content: ""; width: 12px; height: 12px; background: #b0472c; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/contain no-repeat; }
.pain i.v { background: #1e7457; }
.pain i.v::before { content: ""; width: 14px; height: 14px; background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/contain no-repeat; }
.pain-new { position: relative; }
.pain-new::before { content: ""; position: absolute; left: -14px; top: 50%; width: 14px; height: 2px; background: linear-gradient(90deg, #d8d1c2, #1e7457); }
@media (max-width: 760px) {
  .pains-head { display: none; }
  .pain { grid-template-columns: 1fr; gap: 0; }
  .pain-old { border-radius: 18px 18px 0 0; border-bottom: 0; padding: 18px; }
  .pain-new { border-radius: 0 0 18px 18px; padding: 18px; }
  .pain-new::before { display: none; }
}

/* ======================================================================
   Vitrine do topo: notebook com o total., no estilo de página de produto
   ====================================================================== */
.hero .hero-grid { grid-template-columns: .92fr 1.08fr; gap: 40px; }
.showcase { position: relative; perspective: 2200px; padding: 26px 0 46px; }
.sc-halo { position: absolute; inset: 6% 4% 14%; border-radius: 50%; background: radial-gradient(closest-side, rgb(30 116 87 / 34%), transparent); filter: blur(10px); pointer-events: none; }
.laptop { position: relative; transform-origin: 50% 100%; transform: rotateX(0deg); animation: lid-in 1.4s var(--ease) both; }
@keyframes lid-in { from { opacity: 0; transform: translateY(40px) rotateX(18deg) scale(.96); } to { opacity: 1; transform: none; } }
.lid { position: relative; background: linear-gradient(180deg, #2a302d, #191e1c); border-radius: 18px 18px 6px 6px; padding: 14px 14px 18px; box-shadow: 0 0 0 1px rgb(255 255 255 / 7%) inset, 0 50px 90px -30px rgb(0 0 0 / 70%); }
.cam { position: absolute; top: 5px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #0b0f0d; box-shadow: 0 0 0 1px rgb(255 255 255 / 8%); }
.screen { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 16 / 10.2; background: #fbfaf7; }
.screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgb(255 255 255 / 9%) 0%, transparent 38%); pointer-events: none; }
.base { position: relative; height: 16px; margin: 0 -7%; background: linear-gradient(180deg, #3a403d 0%, #22272a 55%, #151917 100%); border-radius: 2px 2px 14px 14px; box-shadow: 0 30px 50px -20px rgb(0 0 0 / 80%); }
.base span { position: absolute; left: 50%; top: 0; width: 18%; height: 6px; margin-left: -9%; background: #1a1f1d; border-radius: 0 0 8px 8px; }

/* o sistema dentro da tela (tudo em em, para escalar junto com a tela) */
.app { position: absolute; inset: 0; display: grid; grid-template-columns: 22% 1fr; font-size: clamp(7px, .72vw, 11.5px); color: #1b211e; }
.app-side { background: linear-gradient(180deg, #0f3a2c, #0b2b21); color: rgb(243 238 227 / 78%); padding: 1.6em 1em; display: flex; flex-direction: column; gap: 1.6em; }
.app-brand { font-size: 1.7em; font-weight: 800; color: #fff; letter-spacing: -.02em; padding-left: .3em; }
.app-side nav { display: grid; gap: .25em; }
.app-side nav span { display: flex; align-items: center; gap: .7em; padding: .65em .7em; border-radius: .6em; font-weight: 600; white-space: nowrap; }
.app-side nav span.on { background: rgb(255 255 255 / 11%); color: #fff; }
.ic { width: 1.15em; height: 1.15em; flex: none; background: currentColor; opacity: .85; -webkit-mask: var(--i) center/contain no-repeat; mask: var(--i) center/contain no-repeat; }
.ic-home { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7v9H3z'/%3E%3C/svg%3E"); }
.ic-doc { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Cpath d='M9 8h6M9 12h6M9 16h4'/%3E%3C/svg%3E"); }
.ic-out { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6'/%3E%3C/svg%3E"); }
.ic-in { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E"); }
.ic-bank { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Cpath d='M3 10l9-6 9 6M5 10v8M10 10v8M14 10v8M19 10v8M3 20h18'/%3E%3C/svg%3E"); }
.ic-check { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12l3 3 5-6'/%3E%3C/svg%3E"); }
.app-entity { margin-top: auto; background: rgb(255 255 255 / 7%); border-radius: .7em; padding: .8em .9em; }
.app-entity b { display: block; color: #fff; font-size: 1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-entity small { font-size: .9em; }
.app-main { padding: 1.5em 1.8em; display: grid; grid-template-rows: auto auto 1fr auto; gap: 1.1em; min-width: 0; }
.app-top { display: flex; align-items: center; justify-content: space-between; }
.app-top small { display: block; color: #7b857f; font-weight: 700; font-size: .85em; text-transform: uppercase; letter-spacing: .08em; }
.app-top b { font-size: 1.55em; letter-spacing: -.02em; }
.app-user { display: flex; align-items: center; gap: .8em; }
.search { width: 9em; height: 2.3em; border-radius: 999px; background: #f0eee8; }
.avatar { width: 2.4em; height: 2.4em; border-radius: 50%; background: #1e7457; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .9em; }
.kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9em; }
.kpi { background: #fff; border: 1px solid #ebe7de; border-radius: .9em; padding: .9em 1em; box-shadow: 0 1px 2px rgb(0 0 0 / 4%); min-width: 0; }
.kpi small { color: #7b857f; font-weight: 600; }
.kpi b { display: block; font-size: 1.55em; letter-spacing: -.02em; margin: .15em 0 .5em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kpi em { display: block; font-style: normal; color: #7b857f; font-size: .85em; margin-top: .45em; }
.kbar { height: .45em; border-radius: 999px; background: #eef1ee; overflow: hidden; }
.kbar i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, #1e7457, #3aa57f); animation: grow 1.4s var(--ease) .7s both; }
.chart-card { background: #fff; border: 1px solid #ebe7de; border-radius: .9em; padding: 1em 1.2em .8em; display: grid; grid-template-rows: auto 1fr auto; min-height: 0; }
.chart-head { display: flex; justify-content: space-between; align-items: baseline; }
.chart-head b { font-size: 1.05em; } .chart-head small { color: #7b857f; }
.bars { display: grid; grid-template-columns: repeat(12, 1fr); gap: .55em; align-items: end; padding-top: .8em; min-height: 6em; }
.bars i { display: block; height: var(--h); border-radius: .35em .35em .15em .15em; background: #cfe3d9; transform-origin: bottom; animation: rise .9s var(--ease) both; }
.bars i.hl { background: linear-gradient(180deg, #2fa37c, #1e7457); }
.bars i.fut { background: repeating-linear-gradient(45deg, #efece5 0 .3em, #f7f5f0 .3em .6em); }
.bars i:nth-child(1) { animation-delay: .80s; } .bars i:nth-child(2) { animation-delay: .85s; } .bars i:nth-child(3) { animation-delay: .90s; }
.bars i:nth-child(4) { animation-delay: .95s; } .bars i:nth-child(5) { animation-delay: 1.00s; } .bars i:nth-child(6) { animation-delay: 1.05s; }
.bars i:nth-child(7) { animation-delay: 1.10s; } .bars i:nth-child(8) { animation-delay: 1.15s; } .bars i:nth-child(9) { animation-delay: 1.20s; }
.bars i:nth-child(10) { animation-delay: 1.25s; } .bars i:nth-child(11) { animation-delay: 1.30s; } .bars i:nth-child(12) { animation-delay: 1.35s; }
@keyframes rise { from { transform: scaleY(0); } }
.months { display: grid; grid-template-columns: repeat(12, 1fr); gap: .55em; text-align: center; color: #9aa39e; font-size: .8em; margin-top: .4em; }
.mov { display: grid; gap: .3em; }
.mov div { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: .8em; padding: .55em .2em; border-top: 1px solid #eeebe4; }
.mov p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mov b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mov em { font-style: normal; font-weight: 700; font-size: .85em; padding: .25em .8em; border-radius: 999px; }
.mov em.ok { background: #e3f2ea; color: #1e7457; } .mov em.wait { background: #fbefd9; color: #a4650c; }
.dot { width: .6em; height: .6em; border-radius: 50%; } .dot.g { background: #1e7457; } .dot.a { background: #d99a2b; }

/* cartões flutuando fora da tela */
.float-card { position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 14px 18px 14px 14px; border-radius: 16px;
  background: rgb(252 251 248 / 92%); backdrop-filter: blur(14px); color: #1b211e; box-shadow: 0 1px 0 rgb(255 255 255 / 60%) inset, 0 24px 50px -16px rgb(0 0 0 / 55%); }
.float-card b { display: block; font-size: 14.5px; white-space: nowrap; }
.float-card small { display: block; color: #6c7570; font-size: 12.5px; white-space: nowrap; }
@media (min-width: 1280px) {
  .hero .shell.hero-grid { width: min(1480px, calc(100% - 64px)); grid-template-columns: .78fr 1.22fr; gap: 56px; }
  .hero h1 { font-size: clamp(44px, 4.2vw, 68px); }
}
.fc-sim { left: -44px; bottom: 34px; animation: card-in .8s var(--ease) 1.5s both, bob 6s ease-in-out 2.4s infinite alternate; }
.fc-sim svg { width: 38px; height: 38px; color: #1e7457; flex: none; }
.fc-sim .check-ring { stroke-dasharray: 176; animation: draw-ring .9s var(--ease) 1.8s both; }
.fc-sim .check-mark { stroke-dasharray: 44; animation: draw-mark .5s var(--ease) 2.5s both; }
.fc-portal { right: -18px; top: 6px; animation: card-in .8s var(--ease) 2s both, bob 7s ease-in-out 3s infinite alternate-reverse; }
.live { position: relative; width: 12px; height: 12px; border-radius: 50%; background: #2fa37c; flex: none; margin: 0 4px; }
.live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #2fa37c; animation: ping 1.8s ease-out infinite; }
@keyframes ping { to { transform: scale(2.8); opacity: 0; } }
@keyframes card-in { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes bob { to { translate: 0 -8px; } }
.showcase-note { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-size: 12px; color: rgb(243 238 227 / 42%); }
@media (max-width: 1020px) {
  .hero .hero-grid { grid-template-columns: 1fr; }
  .showcase { max-width: 720px; margin: 10px auto 0; width: 100%; }
  .app { font-size: clamp(6px, 1.25vw, 11px); }
}
@media (max-width: 760px) {
  .showcase { padding: 18px 8px 44px; }
  .base { margin: 0 -5%; height: 11px; }
  .lid { padding: 8px 8px 12px; border-radius: 12px 12px 4px 4px; }
  .app { font-size: clamp(5px, 1.6vw, 9px); }
  .search { display: none; }
  .float-card { padding: 10px 12px; border-radius: 12px; gap: 8px; }
  .float-card b { font-size: 12px; } .float-card small { font-size: 11px; }
  .fc-sim { left: 0; bottom: 30px; } .fc-sim svg { width: 28px; height: 28px; }
  .fc-portal { right: 0; top: -6px; }
}
@media (prefers-reduced-motion: reduce) {
  .laptop, .float-card, .bars i, .kbar i, .live::after { animation: none !important; }
}

/* ======================================================================
   Tema claro (premium arejado): sobrepõe as regras escuras acima
   ====================================================================== */
:root { --emerald: #1e7457; --emerald-2: #14513d; --bg-hero: #fbfaf7; }
body { background: var(--white); }

/* cabeçalho claro, vidro ao rolar */
.site-header, .site-header.is-scrolled, .site-header.is-solid { background: transparent; box-shadow: none; }
.site-header.is-scrolled { background: rgb(251 250 247 / 82%); backdrop-filter: saturate(180%) blur(16px); box-shadow: 0 1px 0 rgb(30 40 35 / 8%); }
.brand img { height: 28px; }
.main-nav a { color: #2b302d; }
.main-nav a:hover { color: var(--emerald); }
.main-nav .nav-cta { background: var(--emerald); color: #fff; }
.main-nav .nav-cta:hover { background: var(--emerald-2); color: #fff; }
.menu-button span:not(.sr-only) { background: #1b211e; }

/* topo */
.hero { background: radial-gradient(1200px 600px at 75% 30%, #eef4f0 0%, transparent 60%), linear-gradient(180deg, #fbfaf7 0%, #f4f1ea 100%); color: var(--ink); }
.hero h1 { color: #141917; }
.hero h1 span { color: var(--emerald); }
.hero-lead { color: #4a514d; }
.eyebrow { color: var(--emerald); }
.hero-checks { color: #3b423e; }
.hero-checks li::before { background: #e2efe8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e7457' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/12px no-repeat; }
.btn-primary { background: var(--emerald); color: #fff; box-shadow: 0 1px 0 rgb(255 255 255 / 20%) inset, 0 8px 22px -10px rgb(30 116 87 / 70%); }
.btn-primary:hover { background: var(--emerald-2); box-shadow: 0 12px 28px -12px rgb(30 116 87 / 80%); }
.btn-ghost { color: #1b211e; border-color: rgb(27 33 30 / 18%); background: rgb(255 255 255 / 60%); }
.btn-ghost:hover { border-color: rgb(27 33 30 / 40%); }
.sc-halo { background: radial-gradient(closest-side, rgb(30 116 87 / 16%), transparent); }
.laptop .lid { box-shadow: 0 0 0 1px rgb(255 255 255 / 7%) inset, 0 60px 80px -40px rgb(20 30 25 / 45%); }
.base { box-shadow: 0 34px 40px -24px rgb(20 30 25 / 45%); }
.float-card { background: rgb(255 255 255 / 94%); box-shadow: 0 1px 0 #fff inset, 0 0 0 1px rgb(30 40 35 / 6%), 0 22px 44px -18px rgb(20 30 25 / 35%); }
.showcase-note { color: #8c928e; }

/* faixa de conformidade clara */
.compliance { background: #eeebe3; color: #3b423e; }
.compliance li::before { background: var(--emerald); }

/* blocos que eram pretos */
.band-ink { background: var(--white); color: var(--ink); }
.band-ink .section-head p, .band-ink .feature p { color: var(--muted); }
.band-ink .feature { background: var(--white); border-color: var(--line); }
.band-ink .feature .ico { background: #e2efe8; color: var(--emerald); }
.band-ink .eyebrow.dark { color: var(--emerald); }
.partner { background: linear-gradient(135deg, #1e7457 0%, #14513d 100%); }
.partner .eyebrow { color: #cfe6da; }
.partner .btn-primary { background: #fff; color: var(--emerald-2); }
.partner .btn-primary:hover { background: #f1f7f3; }
.cta { background: linear-gradient(160deg, #1e7457 0%, #123f31 100%); color: #fff; }
.cta .btn-primary { background: #fff; color: var(--emerald-2); }
.cta .btn-primary:hover { background: #f1f7f3; }
.cta .btn-ghost { color: #fff; border-color: rgb(255 255 255 / 40%); background: transparent; }

/* rodapé claro */
.footer { background: #f1eee7; color: #5d655f; }
.footer h4 { color: #1b211e; }
.footer a { color: #3f4742; }
.footer a:hover { color: var(--emerald); }
.footer-legal { border-top-color: rgb(30 40 35 / 10%); }

/* página dos escritórios: tela ilustrativa do topo em tema claro */
.hero .mock { background: #fff; border-color: var(--line); box-shadow: 0 40px 70px -30px rgb(20 30 25 / 35%); }
.hero .mock-bar i { background: #dcd7cc; }
.float-glow { background: #1e7457; opacity: .1; }

@media (max-width: 760px) {
  .main-nav { background: #fbfaf7; box-shadow: 0 12px 30px -12px rgb(20 30 25 / 25%); }
  .main-nav a { border-bottom-color: rgb(30 40 35 / 8%); }
  .site-header { background: rgb(251 250 247 / 92%); backdrop-filter: blur(14px); }
}

/* ======================================================================
   Botão de tema + modo escuro (html[data-theme="dark"])
   ====================================================================== */
.theme-toggle { margin-left: 6px; width: 34px; height: 34px; flex: none; border-radius: 50%; border: 1px solid rgb(30 40 35 / 12%); background: transparent; color: #4a514d; display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.theme-toggle:hover { background: rgb(30 40 35 / 6%); color: #1b211e; }
.theme-toggle svg { width: 16px; height: 16px; grid-area: 1 / 1; transition: opacity .25s, transform .35s var(--ease); }
.theme-toggle .i-sun { opacity: 0; transform: rotate(-60deg) scale(.6); }
.logo-d { display: none; }
@media (max-width: 760px) { .theme-toggle { margin-left: auto; margin-right: 6px; } }

html[data-theme="dark"] {
  color-scheme: dark;
  --white: #151c19; --paper: #101614; --line: #26302b; --ink: #ece7dc; --ink-2: #cbc5b9; --muted: #9aa39d;
  --blue: #3fae86; --emerald: #2e8f6b; --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 14px 34px rgb(0 0 0 / 35%);
}
html[data-theme="dark"] body { background: #0f1513; }
html[data-theme="dark"] .theme-toggle { border-color: rgb(236 231 220 / 16%); color: #cbc5b9; }
html[data-theme="dark"] .theme-toggle:hover { background: rgb(236 231 220 / 8%); color: #fff; }
html[data-theme="dark"] .theme-toggle .i-moon { opacity: 0; transform: rotate(60deg) scale(.6); }
html[data-theme="dark"] .theme-toggle .i-sun { opacity: 1; transform: none; }
html[data-theme="dark"] .logo-l { display: none; }
html[data-theme="dark"] .logo-d { display: inline-block; }
html[data-theme="dark"] .brand img.logo-d { height: 30px; width: auto; }
html[data-theme="dark"] .footer img.logo-d { height: 26px; width: auto; }

html[data-theme="dark"] .site-header.is-scrolled { background: rgb(15 21 19 / 82%); box-shadow: 0 1px 0 rgb(255 255 255 / 6%); }
html[data-theme="dark"] .main-nav a { color: #d9d3c8; }
html[data-theme="dark"] .main-nav a:hover { color: #fff; }
html[data-theme="dark"] .menu-button span:not(.sr-only) { background: #ece7dc; }

html[data-theme="dark"] .hero { background: radial-gradient(1200px 600px at 75% 30%, #15241e 0%, transparent 60%), linear-gradient(180deg, #0f1513 0%, #121a17 100%); }
html[data-theme="dark"] .hero h1 { color: #f3eee3; }
html[data-theme="dark"] .hero h1 span, html[data-theme="dark"] .eyebrow { color: #4fbf94; }
html[data-theme="dark"] .hero-lead { color: rgb(243 238 227 / 74%); }
html[data-theme="dark"] .hero-checks { color: rgb(243 238 227 / 80%); }
html[data-theme="dark"] .hero-checks li::before { background-color: rgb(79 191 148 / 16%); }
html[data-theme="dark"] .btn-ghost { color: #f3eee3; border-color: rgb(243 238 227 / 26%); background: transparent; }
html[data-theme="dark"] .sc-halo { background: radial-gradient(closest-side, rgb(46 143 107 / 26%), transparent); }
html[data-theme="dark"] .lid { box-shadow: 0 0 0 1px rgb(255 255 255 / 9%) inset, 0 60px 90px -30px rgb(0 0 0 / 75%); }
html[data-theme="dark"] .float-card { background: rgb(28 36 32 / 92%); color: #ece7dc; box-shadow: 0 0 0 1px rgb(255 255 255 / 8%), 0 24px 50px -16px rgb(0 0 0 / 70%); }
html[data-theme="dark"] .float-card small { color: #a9b1ab; }
html[data-theme="dark"] .fc-sim svg { color: #4fbf94; }
html[data-theme="dark"] .showcase-note { color: #6f7873; }
html[data-theme="dark"] .compliance { background: #141b18; color: #cfc9bd; }
html[data-theme="dark"] .compliance li::before { background: #4fbf94; }

/* telas do sistema continuam claras (são "telas") */
html[data-theme="dark"] .screens, html[data-theme="dark"] .hero .mock {
  --white: #ffffff; --paper: #f4f2ec; --line: #e4e0d6; --ink: #1b211e; --ink-2: #2a313b; --muted: #5d6b79; color: #1b211e;
}
html[data-theme="dark"] .hero .mock { background: #fbfaf7; }

html[data-theme="dark"] .product.big { background: linear-gradient(135deg, color-mix(in srgb, var(--c) 14%, #151c19), #151c19 60%); }
html[data-theme="dark"] .product .tag { background: color-mix(in srgb, var(--c) 22%, #151c19); color: color-mix(in srgb, var(--c) 55%, white); }
html[data-theme="dark"] .product-name { color: color-mix(in srgb, var(--c) 60%, white); }
html[data-theme="dark"] .sym { background: color-mix(in srgb, var(--c) 60%, white); }
html[data-theme="dark"] .feature .ico, html[data-theme="dark"] .band-ink .feature .ico { background: rgb(79 191 148 / 14%); color: #4fbf94; }
html[data-theme="dark"] .band-ink .eyebrow.dark, html[data-theme="dark"] .eyebrow.dark { color: #4fbf94; }

html[data-theme="dark"] .pains-head span:first-child { color: #e08a6f; }
html[data-theme="dark"] .pain-old { background: #1a1f1c; border-color: #2b322e; }
html[data-theme="dark"] .pain-old b { color: #ece7dc; } html[data-theme="dark"] .pain-old p { color: #b7b0a4; }
html[data-theme="dark"] .pain i.x { background: #3a2620; }
html[data-theme="dark"] .pain i.x::before { background: #e08a6f; }
html[data-theme="dark"] .pain-new::before { background: linear-gradient(90deg, #2b322e, #2e8f6b); }

html[data-theme="dark"] .ne-map .viz path { fill: #1a221e; stroke: #0f1513; }
html[data-theme="dark"] .ne-map .m { stroke: #101614; }
html[data-theme="dark"] .ne-map .borders path { stroke: #101614; }
html[data-theme="dark"] .ne-map .uf-label { fill: #f3eee3; stroke: rgb(15 21 19 / 85%); }
html[data-theme="dark"] .uf-card.is-on { box-shadow: 0 0 0 3px rgb(240 122 26 / 25%); }

html[data-theme="dark"] .footer { background: #0b100e; color: #9aa39d; }
html[data-theme="dark"] .footer h4 { color: #ece7dc; }
html[data-theme="dark"] .footer a { color: #c9c3b7; }
html[data-theme="dark"] .footer a:hover { color: #fff; }
html[data-theme="dark"] .footer-legal { border-top-color: rgb(255 255 255 / 8%); }
@media (max-width: 760px) {
  html[data-theme="dark"] .main-nav { background: #0f1513; }
  html[data-theme="dark"] .main-nav a { border-bottom-color: rgb(255 255 255 / 8%); }
  html[data-theme="dark"] .site-header { background: rgb(15 21 19 / 92%); }
}