/* ============================================================
   Delend — Site design system
   Marca: azul #005BFC predominante · Inter · tema claro/escuro
   ============================================================ */

/* ---------- tokens: light (base) ---------- */
:root{
  --brand:#005BFC;          /* azul Delend, predominante */
  --brand-ink:#0038B8;      /* azul mais escuro p/ hover/texto sobre claro */
  --brand-cyan:#00AAFC;
  --navy:#0100A4;           /* azul-marinho de apoio */
  --green:#00D67A;          /* verde de acento (pontual), levemente calibrado p/ contraste */
  --green-soft:#e3fbf0;

  --bg:#ffffff;
  --surface:#ffffff;
  --surface-2:#f4f7fc;      /* tinta azulada */
  --surface-3:#eaf0fb;
  --ink:#0c1426;            /* preto-azulado */
  --muted:#525d76;
  --faint:#8b94a8;
  --line:#e4eaf4;
  --line-2:#d2dcec;
  --on-brand:#ffffff;

  --accent:var(--brand);
  --accent-soft:#e6efff;

  --r-sm:9px; --r:13px; --r-lg:18px; --r-xl:24px;
  --wrap:1160px;
  --shadow-sm:0 1px 2px rgba(12,20,38,.06), 0 1px 3px rgba(12,20,38,.05);
  --shadow:0 10px 30px rgba(16,32,70,.10);
  --shadow-lg:0 30px 70px rgba(16,32,70,.16);
  --ring:0 0 0 3px var(--accent-soft);

  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}

/* Site light-only por decisão de marca (sem modo escuro).
   O fundo e as cores são pintados explicitamente via tokens no :root acima. */

/* ---------- reset / base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none;cursor:pointer}
img,svg{max-width:100%}
button{font-family:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.sec{padding:clamp(34px,5vw,58px) 0}
.sec.tight{padding:clamp(20px,3vw,32px) 0}

/* ritmo de fundo por seção — tons suaves full-bleed (estilo melio) */
body{overflow-x:clip}
[data-bg]{position:relative}
[data-bg]::before{content:"";position:absolute;inset:0 calc(50% - 50vw);z-index:-1}
[data-bg="blue"]::before{background:#eef3ff}
[data-bg="mint"]::before{background:#e8f8ef}
[data-bg="lav"]::before{background:#f1eefc}
[data-bg="cream"]::before{background:#fbf3ea}
[data-bg="sky"]::before{background:#e9f6ff}
.center{text-align:center}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- typography ---------- */
h1,h2,h3,h4{margin:0;letter-spacing:-.022em;text-wrap:balance;font-weight:700;line-height:1.08}
h1{font-size:clamp(33px,5vw,55px)}
h2{font-size:clamp(26px,3.4vw,39px);line-height:1.12}
h3{font-size:clamp(18px,2vw,21px);letter-spacing:-.01em;font-weight:650}
p{margin:0}
.eyebrow{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.13em;color:var(--brand)}
.lead{font-size:clamp(17px,1.5vw,20px);color:var(--muted);line-height:1.55;max-width:52ch}
.sub{color:var(--muted);max-width:62ch;line-height:1.6}
.center .lead,.center .sub{margin-left:auto;margin-right:auto}
.tagline{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;
  color:var(--brand);background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--brand) 22%,transparent);
  padding:6px 13px;border-radius:999px;letter-spacing:.01em}
.tagline.plain{background:transparent;border:none;padding:0;font-weight:700;text-transform:uppercase;letter-spacing:.13em;font-size:12px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:600;font-size:15px;padding:12px 22px;border-radius:11px;
  border:1.5px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .12s ease, box-shadow .15s ease, background .15s, border-color .15s, color .15s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--brand);color:var(--on-brand);box-shadow:0 6px 18px color-mix(in srgb,var(--brand) 32%,transparent)}
.btn-primary:hover{background:var(--brand-ink);box-shadow:0 10px 26px color-mix(in srgb,var(--brand) 40%,transparent)}
.btn-outline{background:var(--surface);color:var(--ink);border-color:var(--line-2)}
.btn-outline:hover{border-color:var(--brand);color:var(--brand)}
.btn-ghost{background:transparent;color:var(--muted)}
.btn-ghost:hover{color:var(--ink);background:var(--surface-2)}
.btn-lg{font-size:16px;padding:15px 30px;border-radius:12px}
.btn:focus-visible{outline:none;box-shadow:var(--ring)}
/* WhatsApp secondary CTA — adapts to background */
.btn-wa{background:transparent;color:var(--brand);border-color:color-mix(in srgb,var(--brand) 38%,transparent)}
.btn-wa:hover{background:color-mix(in srgb,var(--brand) 8%,transparent);border-color:var(--brand);color:var(--brand-ink)}
.band.brand .btn-wa,.hero-band .btn-wa{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.band.brand .btn-wa:hover,.hero-band .btn-wa:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.row-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.center .row-btns{justify-content:center}
.microcopy{margin-top:14px;font-size:13px;color:var(--muted)}

/* ---------- top nav ---------- */
.nav{position:sticky;top:0;z-index:80;
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:8px;height:66px}
.logo{display:flex;align-items:center;color:var(--ink);margin-right:10px}
.logo svg,.logo img{height:22px;width:auto;display:block}
.navlinks{display:flex;align-items:center;gap:2px;flex:1}
.navlinks .spacer{flex:1}
.nlink{padding:9px 13px;border-radius:9px;color:var(--muted);font-weight:500;font-size:15px;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.nlink:hover{background:var(--surface-2);color:var(--ink)}
.nlink.active{color:var(--ink);font-weight:600}
.nav .btn{padding:9px 16px;font-size:14px;border-radius:9px}
.nlink .car{width:7px;height:7px;border:solid currentColor;border-width:0 1.6px 1.6px 0;
  transform:rotate(45deg);margin-top:-3px;opacity:.6;transition:transform .2s}
.dd.open .nlink .car{transform:rotate(-135deg);margin-top:2px}
.navbtns{display:flex;align-items:center;gap:8px;margin-top:0}

/* dropdown mega panel */
.dd{position:relative}
.dd-panel{position:absolute;top:calc(100% + 10px);left:0;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow-lg);padding:18px 22px;display:none;
  grid-template-columns:repeat(4,minmax(215px,1fr));gap:6px 30px;min-width:1000px}
.dd.open .dd-panel{display:grid;animation:pop .16s ease}
@keyframes pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.dd-col h5{margin:6px 10px 4px;font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--faint);font-weight:700}
.dd-item{display:flex;gap:11px;padding:10px;border-radius:11px;align-items:flex-start}
.dd-item:hover{background:var(--surface-2)}
.dd-item .di-ic{flex:0 0 auto;width:34px;height:34px;border-radius:9px;background:var(--accent-soft);
  color:var(--brand);display:flex;align-items:center;justify-content:center}
.dd-item .di-ic svg{width:19px;height:19px}
.dd-item b{display:block;font-weight:600;font-size:14.5px;color:var(--ink)}
.dd-item span{color:var(--muted);font-size:12.5px;display:block;line-height:1.35;margin-top:2px}

.hamb{display:none;margin-left:auto;border:1.5px solid var(--line-2);background:var(--surface);
  border-radius:10px;width:42px;height:40px;cursor:pointer;flex-direction:column;gap:4px;align-items:center;justify-content:center}
.hamb i{width:18px;height:2px;background:var(--ink);border-radius:2px}

/* ---------- breadcrumb ---------- */
.crumb{color:var(--muted);font-size:13px;padding:22px 0 0;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.crumb .sep{color:var(--faint)}
.crumb a:hover{color:var(--brand)}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(32px,5vw,60px);align-items:center;
  padding:clamp(40px,6vw,76px) 0 clamp(30px,4vw,50px)}
.hero.solo{grid-template-columns:1fr;text-align:center;max-width:820px;margin:0 auto}
.hero .tagline{margin-bottom:20px}
.hero h1{margin:0 0 18px}
.hero .lead{margin-bottom:0}
.hero-desc{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);
  font-size:14px;font-weight:600;color:var(--ink);max-width:46ch;line-height:1.5}
.hero-proof{display:flex;align-items:center;gap:16px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.hero-proof .big{font-size:clamp(34px,5vw,46px);font-weight:800;letter-spacing:-.03em;color:var(--brand);line-height:1;flex-shrink:0}
.hero-proof .txt{font-size:14px;color:var(--muted);max-width:30ch;line-height:1.4}

/* ---------- generic section header ---------- */
.sh{margin-bottom:clamp(26px,3vw,40px)}
.sh .eyebrow{margin-bottom:12px}
.sh h2 + .sub{margin-top:12px}
.sh.center{text-align:center}

/* ---------- feature rows ---------- */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,60px);align-items:center;padding:clamp(24px,4vw,44px) 0}
.frow.rev .txt{order:2}
.flist{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:13px}
.flist li{position:relative;padding-left:30px;color:var(--muted);line-height:1.5}
.flist li::before{content:"";position:absolute;left:0;top:2px;width:19px;height:19px;border-radius:50%;
  background:var(--green-soft);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300a866' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:12px}
.flist li b{color:var(--ink);font-weight:650}

/* ---------- cards & grids ---------- */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow-sm)}
.card h3{margin-bottom:2px}
.card p{color:var(--muted);font-size:15px;line-height:1.55}
.card.link{cursor:pointer;transition:border-color .14s,transform .14s,box-shadow .14s}
.card.link:hover{border-color:color-mix(in srgb,var(--brand) 45%,var(--line));transform:translateY(-3px);box-shadow:var(--shadow)}
.card .more{margin-top:auto;padding-top:14px;color:var(--brand);font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:6px}
.card.link:hover .more{gap:10px}
.card .cico{width:44px;height:44px;border-radius:12px;background:var(--accent-soft);color:var(--brand);
  display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.card .cico svg{width:23px;height:23px}
.rtag{align-self:flex-start;display:block;width:fit-content;font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--line-2);border-radius:999px;padding:3px 11px;margin-bottom:16px}
.rtag.brand{border-color:color-mix(in srgb,var(--brand) 45%,transparent);color:var(--brand)}

/* highlight (accent) card */
.card.hl{background:linear-gradient(180deg,var(--accent-soft),color-mix(in srgb,var(--accent-soft) 30%,var(--surface)));
  border-color:color-mix(in srgb,var(--brand) 35%,var(--line))}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;text-align:center}
.stat .num{font-size:clamp(30px,4vw,42px);font-weight:800;letter-spacing:-.03em;color:var(--ink);line-height:1}
.stat .num.brand{color:var(--brand)}
.stat .lbl{color:var(--muted);font-size:13.5px;margin-top:8px;display:block;line-height:1.4}
.note{font-size:12px;color:var(--faint);font-style:italic}

/* pending / a-definir */
.pending{color:var(--faint);font-weight:800}
.chip-tbd{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--faint);border:1px dashed var(--line-2);border-radius:6px;padding:1px 7px;vertical-align:middle}

/* ---------- journey ---------- */
.jstory{display:grid;grid-template-columns:repeat(4,1fr);margin-top:30px;counter-reset:js}
.jstep{position:relative;padding:0 16px;text-align:center}
.jstep .node{position:relative;z-index:1;width:44px;height:44px;border-radius:50%;
  background:var(--brand);color:var(--on-brand);display:flex;align-items:center;justify-content:center;
  font-weight:700;margin:0 auto 16px;box-shadow:0 6px 16px color-mix(in srgb,var(--brand) 34%,transparent)}
.jstep .node::before{counter-increment:js;content:counter(js)}
.jstep .verb{font-size:16px;font-weight:700;color:var(--ink);display:block;margin-bottom:6px}
.jstep .jd{color:var(--muted);font-size:14px;line-height:1.45;max-width:24ch;margin:0 auto}
@media (min-width:861px){
  .jstep::before{content:"";position:absolute;top:22px;left:0;right:0;height:2px;background:var(--line-2);z-index:0}
  .jstep:first-child::before{left:50%}
  .jstep:last-child::before{right:50%}
}

/* ---------- compare (tradicional x delend) ---------- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}
.stack{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:9px}
.stack li{border:1px solid var(--line);border-radius:11px;padding:12px 15px;color:var(--muted);background:var(--surface)}
.stack.on li{color:var(--ink);font-weight:600;border-color:color-mix(in srgb,var(--brand) 22%,var(--line))}

/* ---------- reframe band ---------- */
.reframe{border-radius:var(--r-xl);padding:clamp(30px,5vw,52px) 24px;text-align:center;
  background:linear-gradient(135deg,var(--navy),var(--brand));color:#fff;box-shadow:var(--shadow-lg)}
.reframe .eyebrow{color:rgba(255,255,255,.8)}
.reframe .switch{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:20px}
.reframe .old{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:12px;
  padding:12px 20px;font-size:clamp(15px,2.6vw,19px);color:rgba(255,255,255,.75);text-decoration:line-through;font-weight:300}
.reframe .new{background:#fff;border-radius:12px;padding:14px 24px;font-size:clamp(18px,3.4vw,28px);color:var(--navy);font-weight:800;letter-spacing:-.01em}
.reframe .arrow{color:#fff;flex-shrink:0}
.reframe .sub{color:rgba(255,255,255,.86);max-width:620px;margin:24px auto 0}

/* ---------- CTA band ---------- */
.band{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(34px,5vw,54px);text-align:center;box-shadow:var(--shadow-sm)}
.band.brand{background:linear-gradient(135deg,var(--navy),var(--brand));border:none;color:#fff;box-shadow:var(--shadow-lg)}
.band.brand .sub{color:rgba(255,255,255,.88)}
.band.brand .microcopy{color:rgba(255,255,255,.72)}
.band h2{margin-bottom:10px}
.band .btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.band .btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.1);color:#fff}
.band.brand .btn-primary{background:#fff;color:var(--navy)}
.band.brand .btn-primary:hover{background:#eaf0ff}

/* ---------- testimonial ---------- */
.tcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.tcard .res{font-size:clamp(26px,3vw,34px);font-weight:800;letter-spacing:-.02em;color:var(--brand);line-height:1}
.tcard .res small{font-size:15px;font-weight:600;color:var(--muted)}
.tcard .tq{font-size:18px;font-weight:800;letter-spacing:-.01em;color:var(--ink);line-height:1.25;margin:0}
.tcard .tbody{font-size:15px;line-height:1.6;color:var(--muted);margin:12px 0 0}
.tperson{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:18px;border-top:1px solid var(--line)}
.tperson .av{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#3D74FF,#005BFC);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex:0 0 auto}
.tperson p{font-size:13px;color:var(--muted);margin:0;line-height:1.4}
.tperson b{color:var(--ink)}
.skl{height:11px;border-radius:6px;background:var(--surface-3);display:block}

/* ---------- FAQ ---------- */
.faqwrap{max-width:760px;margin:0 auto;display:grid;gap:12px}
.faq{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:18px 20px;font-weight:600;font-size:16px;
  display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:12px;height:12px;flex-shrink:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005BFC' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .2s}
.faq[open] summary::after{transform:rotate(45deg)}
.faq .faq-a{padding:0 20px 18px;color:var(--muted);font-size:15px;line-height:1.6}

/* ---------- logos strip ---------- */
.logos{display:flex;flex-wrap:nowrap;gap:clamp(12px,1.8vw,28px);align-items:center;justify-content:space-between;margin-top:26px}
.logos img{min-width:0;width:auto;height:auto;max-height:36px;max-width:170px;filter:brightness(0) invert(.62);opacity:.82;transition:opacity .15s}
.logos img.lg-wide{max-height:28px;max-width:116px}
.logos img:hover{opacity:1}
@media(max-width:760px){.logos{flex-wrap:wrap;justify-content:center;gap:20px 24px}.logos img{max-height:28px;max-width:120px}.logos img.lg-wide{max-height:23px;max-width:98px}}
.logobox{width:120px;height:44px;border:1px dashed var(--line-2);border-radius:9px;
  display:flex;align-items:center;justify-content:center;color:var(--faint);
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;background:var(--surface-2)}

/* ============================================================
   Product visuals — frames que substituem os placeholders
   ============================================================ */
.frame{position:relative;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);
  box-shadow:var(--shadow-lg);overflow:hidden}
/* marca de imagem provisória — some quando trocarmos pela tela real (basta remover a classe .frame ou sobrepor) */
.frame::after{content:"Provisório";position:absolute;top:9px;right:11px;z-index:3;
  font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand);background:color-mix(in srgb,var(--bg) 82%,transparent);
  border:1px dashed color-mix(in srgb,var(--brand) 55%,transparent);border-radius:6px;padding:2px 7px;
  pointer-events:none;backdrop-filter:blur(2px)}
.frame .bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.frame .bar i{width:10px;height:10px;border-radius:50%;background:var(--line-2);display:block}
.frame .bar .ttl{margin-left:10px;font-size:12px;color:var(--faint);font-weight:600}
.frame .body{padding:18px;background:
  radial-gradient(120% 120% at 100% 0,color-mix(in srgb,var(--brand) 8%,transparent),transparent 60%),
  var(--surface)}
.frame.pad0 .body{padding:0}
.mockrow{display:flex;align-items:center;gap:12px}
.mock-line{height:10px;border-radius:6px;background:var(--surface-3)}
.mock-chip{font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;display:inline-flex;align-items:center;gap:5px}
.mock-chip.ok{background:var(--green-soft);color:#0a8f5a}
.mock-chip.warn{background:#fff3e0;color:#b26a00}
.mock-chip.brand{background:var(--accent-soft);color:var(--brand)}
.mini-tile{border:1px solid var(--line);border-radius:11px;padding:14px;background:var(--surface)}
.mini-tile .k{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);font-weight:700;line-height:1.3}
.mini-tile .v{display:block;font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin-top:6px;line-height:1.1}
.mini-tile .v.brand{color:var(--brand)}
.mini-tile .sub{display:block;font-size:11px;color:var(--muted);margin-top:7px}
/* radial gauge */
.gauge{--p:94;width:132px;height:132px;border-radius:50%;flex:0 0 auto;
  background:conic-gradient(var(--brand) calc(var(--p)*1%), var(--surface-3) 0);
  display:flex;align-items:center;justify-content:center;position:relative}
.gauge::after{content:"";position:absolute;inset:12px;border-radius:50%;background:var(--surface)}
.gauge .gv{position:relative;font-size:26px;font-weight:800;color:var(--brand);letter-spacing:-.02em}
/* bar chart */
.barchart{display:flex;align-items:flex-end;gap:10px;height:110px;padding-top:6px;border-bottom:1px solid var(--line)}
.barlabels{display:flex;gap:10px;margin-top:7px}
.barlabels span{flex:1;text-align:center;font-size:10px;font-weight:600;color:var(--faint);text-transform:uppercase;letter-spacing:.04em}
.dqrow{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.dqrow:last-child{border-bottom:none}
.dqrow .nm{font-size:13px;font-weight:600;color:var(--ink)}
.dqrow .amt{margin-left:auto;font-size:13px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.barchart span{flex:1;background:linear-gradient(180deg,var(--brand),color-mix(in srgb,var(--brand) 55%,var(--surface)));
  border-radius:6px 6px 0 0;min-height:8px}
.barchart span:nth-child(odd){opacity:.55}

/* ---------- footer ---------- */
.footer{background:var(--surface-2);border-top:1px solid var(--line);margin-top:20px;padding:56px 0 34px}
.footcols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:28px}
.footcols h5{font-size:11px;text-transform:uppercase;letter-spacing:.11em;color:var(--faint);margin:0 0 14px;font-weight:700}
.footcols a{display:block;color:var(--muted);padding:5px 0;font-size:14.5px}
.footcols a:hover{color:var(--brand)}
.footer .logo{margin-bottom:14px}
.footer .fdesc{color:var(--muted);font-size:14px;max-width:34ch;line-height:1.55}
.footer .fproof{color:var(--ink);font-size:13px;font-weight:600;max-width:34ch;margin-top:12px}
.footer .fmail{margin-top:14px}
.footer .fmail a{display:inline-block;color:var(--brand);font-size:14px;font-weight:600;padding:0}
.footer .fmail a:hover{color:var(--brand-ink)}
.footer .faddr{color:var(--muted);font-size:13px;line-height:1.5;max-width:38ch;margin-top:8px}
.foot-b{display:flex;justify-content:space-between;align-items:center;margin-top:34px;padding-top:22px;
  border-top:1px solid var(--line);color:var(--faint);font-size:13px;flex-wrap:wrap;gap:10px}

/* ---------- modals ---------- */
.lmodal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}
.lmodal[hidden]{display:none}
.lmodal-backdrop{position:absolute;inset:0;background:rgba(6,10,22,.6);backdrop-filter:blur(3px)}
.lmodal-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  max-width:440px;width:100%;padding:28px 26px;box-shadow:var(--shadow-lg)}
.lmodal-x{position:absolute;top:12px;right:16px;background:none;border:none;font-size:26px;line-height:1;color:var(--muted);cursor:pointer}
.lmodal-x:hover{color:var(--ink)}
.lform{display:grid;gap:13px}
.lform label{display:grid;gap:6px;font-size:13px;font-weight:600;color:var(--ink)}
.lform input,.lform select{font:inherit;font-weight:400;font-size:15px;padding:11px 13px;
  border:1px solid var(--line-2);border-radius:10px;background:var(--bg);color:var(--ink);width:100%}
.lform input:focus,.lform select:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}

/* ---------- price table ---------- */
.ptable{width:100%;border-collapse:collapse;font-size:14px}
.ptable th,.ptable td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line)}
.ptable th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.ptable td:last-child,.ptable th:last-child{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.ptable tbody tr:last-child td{border-bottom:none}
.linklike{color:var(--brand);font-weight:600;cursor:pointer;border-bottom:1px dashed color-mix(in srgb,var(--brand) 50%,transparent)}

/* ---------- responsive ---------- */
@media (max-width:920px){
  .dd-panel{grid-template-columns:repeat(2,1fr);min-width:480px}
}
@media (max-width:860px){
  .hamb{display:flex}
  .navlinks{position:absolute;top:66px;left:0;right:0;background:var(--surface);
    border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;
    padding:12px;gap:2px;display:none;box-shadow:var(--shadow)}
  .navlinks.open{display:flex}
  .navlinks .spacer{display:none}
  .navbtns{flex-direction:column;align-items:stretch;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
  .navbtns .btn{width:100%}
  .theme-toggle{display:none}
  .dd-panel{position:static;display:none;grid-template-columns:1fr;min-width:0;
    box-shadow:none;border:none;border-left:2px solid var(--line);border-radius:0;margin:0 0 6px 10px;padding:4px}
  .dd.open .dd-panel{display:grid}
  .hero,.frow,.frow.rev .txt{grid-template-columns:1fr;order:0}
  .compare{grid-template-columns:1fr}
  .g3,.g4,.stats,.jstory{grid-template-columns:1fr 1fr}
  .jstory{gap:30px 0}
}
@media (max-width:560px){
  .g2,.g3,.g4,.stats,.jstory,.footcols{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}

/* ---------- artigos ---------- */
.artfilters{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.artchip{font-size:13.5px;font-weight:600;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:8px 15px;cursor:pointer;transition:all .12s}
.artchip:hover{border-color:var(--brand);color:var(--brand)}
.artchip.on{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.artmeta{font-size:12.5px;color:var(--faint);margin:10px 0 0;font-weight:600;font-variant-numeric:tabular-nums}
.artgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.artcard{cursor:pointer;padding:0;overflow:hidden}
.artcard .art-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.artcard h3{font-size:17px;margin-top:8px;line-height:1.3}
.artcard p{font-size:14px;color:var(--muted);margin-top:8px}
.artcard .more{margin-top:auto;padding-top:14px}
.artthumb{position:relative;height:150px;border-bottom:1px solid var(--line);overflow:hidden;
  background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 12%,var(--surface)),var(--surface-3))}
.artthumb::after{content:"Provisório";position:absolute;top:9px;right:11px;
  font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);
  background:color-mix(in srgb,var(--bg) 82%,transparent);border:1px dashed color-mix(in srgb,var(--brand) 55%,transparent);border-radius:6px;padding:2px 7px}
.artthumb .tg{position:absolute;bottom:9px;left:11px;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:3px 7px}
@media(max-width:860px){.artgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.artgrid{grid-template-columns:1fr}}

/* quote institucional (empresa) */
.quotecard{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:var(--r-lg);padding:26px 28px;box-shadow:var(--shadow-sm)}
.quotecard p{font-size:clamp(17px,2vw,20px);line-height:1.5;font-weight:400;color:var(--ink)}
.bignum{font-size:clamp(28px,3.4vw,36px);font-weight:300;letter-spacing:-.02em;color:var(--brand)}

/* ícone colorido no topo de cards de feature */
.feat-ic{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:14px}
.feat-ic svg{width:22px;height:22px}
.ic-blue{background:#005BFC}.ic-cyan{background:#00AAFC}.ic-violet{background:#7A5AF5}.ic-green{background:#0BA05F}.ic-amber{background:#F59E0B}.ic-navy{background:#0100A4}

/* hero em faixa azul com degradê (Preços) */
.hero-band{background:linear-gradient(135deg,#0138B8 0%,#005BFC 52%,#2E7BFF 100%);border-radius:var(--r-xl);padding:clamp(38px,6vw,72px) clamp(24px,5vw,56px);text-align:center;color:#fff;margin-top:8px;box-shadow:0 24px 60px rgba(1,40,120,.22)}
.hero-band .hb-eyebrow{display:inline-block;font-size:13px;font-weight:600;color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.30);padding:7px 16px;border-radius:999px}
.hero-band h1{color:#fff;max-width:960px;margin:18px auto 0;font-size:clamp(26px,3.1vw,35px);line-height:1.16;letter-spacing:-.02em;text-wrap:balance}
.hero-band .row-btns{display:flex;justify-content:center;margin-top:26px}
.btn.btn-onblue{background:#fff;color:var(--brand);box-shadow:0 10px 26px rgba(1,30,90,.30)}
.btn.btn-onblue:hover{background:#eef3ff;color:var(--brand-ink)}
.hero-band p.lead{color:rgba(255,255,255,.92);max-width:760px;margin:16px auto 0;font-size:clamp(15px,1.4vw,18px);line-height:1.6}
/* badge de número colorido em card de feature */
.feat-num{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;color:#fff;margin-bottom:14px;font-variant-numeric:tabular-nums}

/* Artigos — capas com gradiente e ícone por tema */
.artthumb{display:flex;align-items:center;justify-content:center}
.artthumb::after{display:none}
.artthumb .cov-ic-lg{width:46px;height:46px;color:rgba(255,255,255,.92)}
.cov-blue{background:linear-gradient(135deg,#0142C7,#2E7BFF)}
.cov-violet{background:linear-gradient(135deg,#5B34C9,#8B5CF6)}
.cov-cyan{background:linear-gradient(135deg,#0072C6,#00AAFC)}
.cov-green{background:linear-gradient(135deg,#0B8F52,#22C07A)}
.cov-amber{background:linear-gradient(135deg,#B4761A,#F5A623)}
.cov-navy{background:linear-gradient(135deg,#0A0A6E,#3232B0)}
.cov-teal{background:linear-gradient(135deg,#0B7A7A,#16B8B8)}
.cov-rose{background:linear-gradient(135deg,#B02155,#EC4899)}
/* capa do artigo em destaque */
.artcover{position:relative;overflow:hidden;border-radius:var(--r-lg);min-height:290px;padding:28px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;box-shadow:var(--shadow)}
.artcover .artcover-ic{position:absolute;top:24px;right:24px;width:56px;height:56px;color:rgba(255,255,255,.45)}
.artcover .artcover-tag{align-self:flex-start;font-size:12.5px;font-weight:700;color:#fff;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.32);padding:6px 13px;border-radius:999px}
.artcover .artcover-ttl{font-size:clamp(21px,2.5vw,27px);font-weight:800;line-height:1.15;margin-top:16px;letter-spacing:-.02em;max-width:15ch}

/* ============ Página de artigo (SEO) ============ */
.art-head{max-width:760px;margin:0 auto;text-align:center;padding-top:8px}
.art-head .art-cat{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--brand);background:var(--accent-soft);padding:6px 13px;border-radius:999px}
.art-head h1{font-size:clamp(28px,4vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:16px 0 12px;text-wrap:balance}
.art-head .artmeta{justify-content:center;display:flex;gap:8px;color:var(--faint)}
.art-cover-lg{position:relative;overflow:hidden;border-radius:var(--r-xl);min-height:230px;margin:26px 0 8px;display:flex;align-items:center;justify-content:center;color:#fff}
.art-cover-lg svg{width:64px;height:64px;color:rgba(255,255,255,.55)}
.art-body{max-width:720px;margin:0 auto}
.art-body>.lead{font-size:clamp(18px,2vw,21px);line-height:1.6;color:var(--muted);margin:22px 0 8px;font-weight:400}
.art-body p{font-size:17px;line-height:1.75;color:var(--ink);margin:0 0 18px}
.art-body h2{font-size:clamp(22px,2.6vw,27px);font-weight:800;letter-spacing:-.02em;line-height:1.2;margin:36px 0 12px}
.art-body h3{font-size:19px;font-weight:700;margin:26px 0 8px}
.art-body ul,.art-body ol{margin:0 0 18px;padding-left:22px}
.art-body li{font-size:17px;line-height:1.7;color:var(--ink);margin-bottom:9px}
.art-body li b{color:var(--ink)}
.art-body a{color:var(--brand);font-weight:600;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.art-body a:hover{color:var(--brand-ink)}
.art-callout{background:var(--surface-2);border-left:3px solid var(--brand);border-radius:12px;padding:18px 20px;margin:24px 0}
.art-callout p{margin:0;font-size:16px;color:var(--ink)}
.art-faq{margin-top:14px;border-top:1px solid var(--line)}
.art-faq details{border-bottom:1px solid var(--line);padding:6px 0}
.art-faq summary{list-style:none;cursor:pointer;font-weight:700;font-size:17px;color:var(--ink);padding:14px 0;display:flex;justify-content:space-between;gap:12px}
.art-faq summary::-webkit-details-marker{display:none}
.art-faq summary::after{content:"+";color:var(--brand);font-weight:700;font-size:20px;line-height:1}
.art-faq details[open] summary::after{content:"\2013"}
.art-faq details p{font-size:16px;line-height:1.7;color:var(--muted);margin:0 0 16px}
.art-share{max-width:720px;margin:30px auto 0;padding-top:20px;border-top:1px solid var(--line);color:var(--faint);font-size:14px}
.art-related{max-width:720px;margin:6px auto 0}

/* ============================================================
   HERO · composição animada "Carteira" (home)
   Namespace .heroviz / .hv-* — isolado do resto do site
   ============================================================ */
.hero.split{align-items:start}
.heroviz{
  --hv-canvas:#E8EBFA; --hv-frame-border:#D5DBF2; --hv-card:#fff;
  --hv-ink:#151A2D; --hv-muted:#5B6478; --hv-faint:#98A0B4; --hv-line:#EAEDF6;
  --hv-brand:#005BFC; --hv-brand-soft:#E9F0FF;
  --hv-green:#0BA05F; --hv-green-bg:#E1F6EB; --hv-amber:#B7791F; --hv-amber-bg:#FBF1DE; --hv-red:#D6425A;
  --hv-shadow:0 14px 34px rgba(21,26,45,.09),0 3px 10px rgba(21,26,45,.05);
  --hv-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --hv-sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-family:var(--hv-sans);color:var(--hv-ink);
  width:100%;
}
.heroviz .hv-canvas{background:var(--hv-canvas);border:1px solid var(--hv-frame-border);border-radius:28px;padding:clamp(16px,2vw,22px);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.heroviz .hv-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"k1 k2" "k3 k4" "ct ct";gap:12px}
.heroviz .hv-card{background:var(--hv-card);border-radius:20px;box-shadow:var(--hv-shadow);padding:18px 20px;opacity:0;transform:translateY(16px) scale(.985)}
.heroviz.go .hv-card{animation:hv-rise .62s cubic-bezier(.2,.75,.2,1) forwards;animation-delay:calc(var(--i) * 105ms + 160ms)}
@keyframes hv-rise{to{opacity:1;transform:none}}
.heroviz .hv-lbl{font-family:var(--hv-mono);font-size:10.5px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--hv-faint)}
.heroviz .hv-title{font-size:16px;font-weight:700;letter-spacing:-.01em;margin-top:3px;color:var(--hv-ink)}
.heroviz .hv-kpi{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:13px 15px}
.heroviz .hv-kpi .hv-num{font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1;margin-top:4px;font-variant-numeric:tabular-nums;color:var(--hv-ink)}
.heroviz .hv-kpi .hv-sub{font-family:var(--hv-mono);font-size:10.5px;color:var(--hv-muted);margin-top:6px}
.heroviz .hv-kpi .hv-sub.hv-red{color:var(--hv-red)}
.heroviz .hv-kpi .hv-num.hv-b{color:var(--hv-brand)}
.heroviz .hv-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px;vertical-align:1px}
.heroviz .hv-dot.hv-red{background:var(--hv-red)}
.heroviz .hv-dot.hv-b{background:var(--hv-brand)}
.heroviz #hv-k1{grid-area:k1}.heroviz #hv-k2{grid-area:k2}.heroviz #hv-k3{grid-area:k3}.heroviz #hv-k4{grid-area:k4}
.heroviz .hv-ct{grid-area:ct;display:flex;flex-direction:column}
.heroviz .hv-ct .hv-head{display:flex;align-items:baseline;justify-content:space-between}
.heroviz .hv-pill{font-family:var(--hv-mono);font-size:10px;font-weight:500;color:var(--hv-brand);background:var(--hv-brand-soft);padding:5px 9px;border-radius:999px}
.heroviz .hv-bars4{flex:1;display:flex;align-items:stretch;gap:16px;padding:16px 2px 0}
.heroviz .hv-bar4{flex:1;display:flex;flex-direction:column;min-width:0}
.heroviz .hv-bar4 .hv-track{flex:1;display:flex;align-items:flex-end;min-height:118px}
.heroviz .hv-bar4 .hv-col{width:100%;min-height:8px;border-radius:8px 8px 4px 4px;background:var(--c);background-image:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,0))}
.heroviz .hv-bar4 .hv-cap{margin-top:12px;min-height:30px}
.heroviz .hv-bar4 .hv-num4{font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums;color:var(--hv-ink)}
.heroviz .hv-bar4 .hv-nm4{font-size:11.5px;font-weight:700;color:var(--c);margin-top:5px;line-height:1.2}
.heroviz .hv-bar4 .hv-sb4{font-family:var(--hv-mono);font-size:10px;color:var(--hv-muted);margin-top:3px}
.heroviz .hv-c-normal{--c:#22B36B}.heroviz .hv-c-warm{--c:#E79A2B}.heroviz .hv-c-cold{--c:#EF4444}.heroviz .hv-c-idle{--c:#9AA6B6}
.heroviz.go .hv-bar4 .hv-col{animation:hv-grow .8s cubic-bezier(.2,.75,.2,1) forwards;transform-origin:bottom;transform:scaleY(0)}
.heroviz.go .hv-bar4:nth-child(1) .hv-col{animation-delay:.72s}
.heroviz.go .hv-bar4:nth-child(2) .hv-col{animation-delay:.84s}
.heroviz.go .hv-bar4:nth-child(3) .hv-col{animation-delay:.96s}
.heroviz.go .hv-bar4:nth-child(4) .hv-col{animation-delay:1.08s}
@keyframes hv-grow{to{transform:scaleY(1)}}
.heroviz .hv-fd{grid-area:fd;display:flex;flex-direction:column}
.heroviz .hv-fd .hv-title{margin-bottom:4px}
.heroviz .hv-row{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:#F6F7FC;margin-top:10px}
.heroviz .hv-tile{width:34px;height:34px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--hv-brand);color:#fff}
.heroviz .hv-tile.hv-green{background:var(--hv-green)}
.heroviz .hv-tile.hv-amber{background:var(--hv-amber)}
.heroviz .hv-tile.hv-cyan{background:#00AAFC}
.heroviz .hv-tile.hv-violet{background:#7A5AF5}
.heroviz .hv-tile.hv-orange{background:#F59E0B}
.heroviz .hv-tile svg{width:18px;height:18px}
.heroviz .hv-rtc{flex:1;min-width:0}
.heroviz .hv-rnm{font-size:13.5px;font-weight:700;letter-spacing:-.01em;color:var(--hv-ink)}
.heroviz .hv-mt{font-family:var(--hv-mono);font-size:10.5px;color:var(--hv-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.heroviz .hv-tag{font-family:var(--hv-mono);font-size:10px;font-weight:600;letter-spacing:.04em;padding:4px 9px;border-radius:999px;flex:none}
.heroviz .hv-tag.hv-ok,.heroviz .hv-tag.hv-date{background:var(--hv-green-bg);color:var(--hv-green)}
.heroviz .hv-tag.hv-warn{background:var(--hv-amber-bg);color:var(--hv-amber)}
.heroviz .hv-tag.hv-tb{background:var(--hv-brand-soft);color:var(--hv-brand)}
.heroviz .hv-tag.hv-danger{background:#FCE7EB;color:#C0392B}
.heroviz .hv-tag.hv-mut{background:#EEF1F6;color:var(--hv-muted)}
.heroviz .hv-pulse{width:8px;height:8px;border-radius:50%;background:var(--hv-green);flex:none;box-shadow:0 0 0 0 rgba(11,160,95,.5);animation:hv-pulse 2.2s infinite}
@keyframes hv-pulse{0%{box-shadow:0 0 0 0 rgba(11,160,95,.45)}70%{box-shadow:0 0 0 8px rgba(11,160,95,0)}100%{box-shadow:0 0 0 0 rgba(11,160,95,0)}}
.heroviz .hv-tp{grid-area:tp;display:flex;flex-direction:column}
.heroviz .hv-tp .hv-title,.heroviz .hv-eng .hv-title{font-size:15px}
.heroviz .hv-tp .hv-title{margin-bottom:2px}
.heroviz .hv-trow{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--hv-line)}
.heroviz .hv-trow:last-child{border-bottom:none}
.heroviz .hv-cnm{font-size:13px;font-weight:600;color:var(--hv-ink)}
.heroviz .hv-fxchip{font-family:var(--hv-mono);font-size:10px;font-weight:600;width:20px;height:20px;border-radius:6px;display:flex;align-items:center;justify-content:center}
.heroviz .hv-fa{background:var(--hv-brand-soft);color:var(--hv-brand)}
.heroviz .hv-fb{background:#EFEAFE;color:#7A5AF5}
.heroviz .hv-cval{margin-left:auto;font-family:var(--hv-mono);font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--hv-ink)}
.heroviz .hv-eng{grid-area:rt;display:flex;flex-direction:column}
.heroviz .hv-eng .hv-sub{font-family:var(--hv-mono);font-size:10px;color:var(--hv-faint);margin-top:1px}
.heroviz .hv-heat{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;margin-top:auto}
.heroviz .hv-heat i{aspect-ratio:1;border-radius:4px;background:var(--hv-brand)}
/* variante estática (sem animação de reveal) — usada fora do hero, ex.: "Como funciona" */
.heroviz.static .hv-card{opacity:1;transform:none;animation:none}
.heroviz .hv-flow{display:flex;flex-direction:column;gap:11px}
.heroviz .hv-step{display:flex;align-items:center;gap:14px;padding:15px 18px}
.heroviz .hv-flow .hv-step:nth-child(2){--i:0}
.heroviz .hv-flow .hv-step:nth-child(3){--i:1}
.heroviz .hv-flow .hv-step:nth-child(4){--i:2}
.heroviz .hv-flow .hv-step:nth-child(5){--i:3}
.heroviz .hv-flow .hv-step:nth-child(6){--i:4}
/* comparação "sistema único" no estilo heroviz */
.heroviz.hv-cmp{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}
.heroviz .hv-col-plain,.heroviz .hv-col-brand{border-radius:20px;padding:22px 22px 20px}
.heroviz .hv-col-plain{background:#F6F8FC;border:1px solid var(--hv-line)}
.heroviz .hv-col-brand{background:linear-gradient(180deg,#EEF3FF,#E5EDFF);border:1px solid #CBDAFF}
.heroviz .hv-eb{display:inline-block;font-family:var(--hv-mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border-radius:999px;border:1px solid var(--hv-line);background:#fff;color:var(--hv-muted)}
.heroviz .hv-eb.hv-eb-brand{color:var(--hv-brand);border-color:#CBDAFF}
.heroviz .hv-clist{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.heroviz .hv-crow{background:#fff;border:1px solid var(--hv-line);border-radius:12px;padding:15px 18px;font-size:15px;font-weight:700;color:var(--hv-ink);opacity:0;transform:translateY(14px)}
.heroviz .hv-col-plain .hv-crow{color:var(--hv-muted);font-weight:600}
.heroviz.go .hv-crow{animation:hv-rise .55s cubic-bezier(.2,.75,.2,1) forwards;animation-delay:calc(var(--i) * 85ms + 120ms)}
.heroviz .hv-clist .hv-crow:nth-child(1){--i:0}
.heroviz .hv-clist .hv-crow:nth-child(2){--i:1}
.heroviz .hv-clist .hv-crow:nth-child(3){--i:2}
.heroviz .hv-clist .hv-crow:nth-child(4){--i:3}
.heroviz .hv-clist .hv-crow:nth-child(5){--i:4}
.heroviz .hv-note{margin:14px 0 0;font-size:14px;font-style:italic;color:var(--hv-muted)}
.heroviz .hv-note.hv-note-brand{color:var(--hv-brand)}
@media(max-width:768px){.heroviz.hv-cmp{grid-template-columns:1fr}}
/* Venda Segura — nota de risco (gauge) no estilo heroviz */
.heroviz .hv-vs-body{display:flex;flex-direction:column;align-items:center;text-align:center}
.heroviz .hv-vs-body>.hv-lbl{align-self:flex-start}
.heroviz .hv-gauge{position:relative;width:150px;height:150px;margin:12px 0 2px}
.heroviz .hv-gauge svg{width:150px;height:150px;transform:rotate(-90deg)}
.heroviz .hv-g-track{fill:none;stroke:#E1E7F5;stroke-width:12}
.heroviz .hv-g-val{fill:none;stroke:var(--hv-brand);stroke-width:12;stroke-linecap:round;stroke-dasharray:327;stroke-dashoffset:327}
.heroviz.go .hv-g-val{animation:hv-ring 1.1s cubic-bezier(.3,.7,.2,1) forwards;animation-delay:.25s}
@keyframes hv-ring{to{stroke-dashoffset:20}}
.heroviz .hv-g-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.heroviz .hv-g-num{font-size:30px;font-weight:800;letter-spacing:-.02em;color:var(--hv-ink);font-variant-numeric:tabular-nums;line-height:1}
.heroviz .hv-g-lbl{font-family:var(--hv-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--hv-faint);margin-top:3px}
.heroviz .hv-verdict{margin-top:10px;font-size:13.5px;font-weight:700;color:var(--hv-green);background:var(--hv-green-bg);padding:8px 16px;border-radius:999px}
.heroviz .hv-vs-kpis{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;margin-top:18px}
.heroviz .hv-vs-kpis .hv-kpi{text-align:left}
/* Previsão de pagamento — barras de progresso no estilo heroviz */
.heroviz .hv-pred{padding:15px 18px}
.heroviz .hv-pred-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.heroviz .hv-pred .hv-num{font-size:22px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--hv-ink);line-height:1}
.heroviz .hv-pred .hv-num.hv-b{color:var(--hv-brand)}
.heroviz .hv-meter{height:8px;border-radius:999px;background:#E1E7F5;margin-top:12px;overflow:hidden}
.heroviz .hv-meter-fill{display:block;height:100%;width:var(--w);border-radius:999px;background:linear-gradient(90deg,#2E7BFF,#005BFC);transform-origin:left;transform:scaleX(0)}
.heroviz .hv-meter-fill.hv-meter-green{background:linear-gradient(90deg,#22C07A,#0BA05F)}
.heroviz .hv-meter-fill.hv-meter-amber{background:linear-gradient(90deg,#E7A93E,#C68A1E)}
.heroviz .hv-vs-kpis.k3{grid-template-columns:repeat(3,1fr)}
.heroviz.go .hv-meter-fill{animation:hv-fill 1s cubic-bezier(.3,.7,.2,1) forwards;animation-delay:.3s}
@keyframes hv-fill{to{transform:scaleX(1)}}
/* Agente de Cobrança — simulação de conversa */
.heroviz.hv-chat .hv-canvas{min-height:360px}
.heroviz .hv-chat-head{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.heroviz .hv-chat-dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--hv-green);box-shadow:0 0 0 0 rgba(11,160,95,.5);animation:hv-pulse 2.2s infinite}
.heroviz .hv-thread{display:flex;flex-direction:column;gap:10px}
.heroviz .hv-msg{max-width:82%;padding:11px 14px;font-size:13.5px;line-height:1.42;border-radius:16px;opacity:0;transform:translateY(10px)}
.heroviz .hv-msg.hv-agent{align-self:flex-start;background:var(--hv-brand);color:#fff;border-bottom-left-radius:6px}
.heroviz .hv-msg.hv-cli{align-self:flex-end;background:#EEF1F7;color:var(--hv-ink);border-bottom-right-radius:6px;font-weight:500}
.heroviz .hv-chip-sys{align-self:center;font-family:var(--hv-mono);font-size:10.5px;color:var(--hv-green);background:var(--hv-green-bg);padding:6px 12px;border-radius:999px;opacity:0;transform:translateY(10px);margin-top:2px}
.heroviz.go .hv-msg,.heroviz.go .hv-chip-sys{animation:hv-rise .5s cubic-bezier(.2,.75,.2,1) forwards;animation-delay:calc(var(--i) * 420ms + 250ms)}
/* Antecipação — UI interativa (seleção com checkbox + botão) */
.heroviz .hv-selrow{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--hv-line);border-radius:14px;padding:13px 16px;box-shadow:var(--hv-shadow);opacity:0;transform:translateY(14px)}
.heroviz .hv-selrow+.hv-selrow{margin-top:10px}
.heroviz .hv-check{width:20px;height:20px;border-radius:6px;border:2px solid #C6CEDE;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:800}
.heroviz .hv-check.on{background:var(--hv-brand);border-color:var(--hv-brand)}
.heroviz .hv-sumrow{display:flex;justify-content:space-between;align-items:center;margin-top:12px;font-family:var(--hv-mono);font-size:12px;color:var(--hv-muted);opacity:0;transform:translateY(14px)}
.heroviz .hv-sumrow b{color:var(--hv-ink);font-weight:700}
.heroviz .hv-btn{margin-top:12px;text-align:center;background:var(--hv-brand);color:#fff;font-size:14px;font-weight:700;padding:13px;border-radius:12px;box-shadow:0 8px 18px rgba(0,91,252,.26);opacity:0;transform:translateY(14px)}
.heroviz .hv-success{display:flex;flex-direction:column;align-items:center;text-align:center;padding:10px 0 6px;opacity:0;transform:translateY(14px)}
.heroviz .hv-check-lg{width:46px;height:46px;border-radius:50%;background:var(--hv-green-bg);color:var(--hv-green);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;margin-bottom:10px}
.heroviz .hv-big{font-size:30px;font-weight:800;letter-spacing:-.02em;color:var(--hv-ink);line-height:1}
.heroviz.go .hv-selrow,.heroviz.go .hv-sumrow,.heroviz.go .hv-btn,.heroviz.go .hv-success{animation:hv-rise .55s cubic-bezier(.2,.75,.2,1) forwards;animation-delay:calc(var(--i) * 110ms + 160ms)}
/* Delend IA — chat dentro do produto (pergunta + resposta da IA) */
.heroviz .hv-ai-head{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.heroviz .hv-ai-ic{width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,#3D74FF,#7A5AF5);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.heroviz .hv-ai-ic svg{width:16px;height:16px}
.heroviz .hv-prompt{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--hv-line);border-radius:12px;padding:10px 10px 10px 15px;box-shadow:var(--hv-shadow);opacity:0;transform:translateY(12px)}
.heroviz .hv-prompt .q{flex:1;font-size:13.5px;color:var(--hv-ink);font-weight:500}
.heroviz .hv-prompt .send{width:30px;height:30px;border-radius:9px;background:var(--hv-brand);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.heroviz .hv-prompt .send svg{width:16px;height:16px}
.heroviz .hv-answer{display:flex;gap:11px;margin-top:13px;opacity:0;transform:translateY(12px)}
.heroviz .hv-answer .av{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#3D74FF,#7A5AF5);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.heroviz .hv-answer .av svg{width:17px;height:17px}
.heroviz .hv-answer .ab{flex:1;min-width:0;background:#F5F7FC;border:1px solid var(--hv-line);border-radius:14px;border-top-left-radius:5px;padding:13px 15px}
.heroviz .hv-answer .atext{font-size:13px;color:var(--hv-ink);line-height:1.45;font-weight:500}
.heroviz .hv-answer .achip{display:inline-flex;margin-top:10px;font-family:var(--hv-mono);font-size:10px;font-weight:600;color:var(--hv-brand);background:var(--hv-brand-soft);padding:5px 10px;border-radius:999px}
.heroviz .hv-mbars{display:flex;align-items:flex-end;gap:5px;height:48px;margin-top:11px}
.heroviz .hv-mbars span{flex:1;min-height:5px;border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,#2E7BFF,#005BFC)}
.heroviz.go .hv-prompt{animation:hv-rise .5s cubic-bezier(.2,.75,.2,1) forwards;animation-delay:.2s}
.heroviz.go .hv-answer{animation:hv-rise .5s cubic-bezier(.2,.75,.2,1) forwards;animation-delay:.7s}
/* Clientes — cara de interface (cabeçalho, tabs, tabela, timeline) */
.heroviz .hv-ch{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.heroviz .hv-ch .chav{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#3D74FF,#005BFC);color:#fff;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;flex:none}
.heroviz .hv-ch .chnm{font-size:15px;font-weight:700;color:var(--hv-ink);line-height:1.2}
.heroviz .hv-ch .chsub{font-family:var(--hv-mono);font-size:10.5px;color:var(--hv-muted);margin-top:2px}
.heroviz .hv-ch .chtier{margin-left:auto;font-family:var(--hv-mono);font-size:10px;font-weight:600;color:var(--hv-brand);background:var(--hv-brand-soft);padding:5px 10px;border-radius:999px}
.heroviz .hv-tabs{display:flex;gap:4px;margin-bottom:14px;border-bottom:1px solid var(--hv-line)}
.heroviz .hv-tab{font-size:12px;font-weight:600;color:var(--hv-muted);padding:8px 12px;position:relative}
.heroviz .hv-tab.on{color:var(--hv-brand)}
.heroviz .hv-tab.on::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;background:var(--hv-brand);border-radius:2px}
.heroviz .hv-tbl{background:#fff;border:1px solid var(--hv-line);border-radius:16px;box-shadow:var(--hv-shadow);overflow:hidden}
.heroviz .hv-th{display:flex;align-items:center;gap:12px;padding:11px 16px;background:#F6F8FC;border-bottom:1px solid var(--hv-line);font-family:var(--hv-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--hv-faint)}
.heroviz .hv-th .c2{margin-left:auto}
.heroviz .hv-tr{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--hv-line)}
.heroviz .hv-tbl .hv-tr:first-of-type{border-top:none}
.heroviz .hv-tico{width:30px;height:30px;border-radius:8px;background:var(--hv-brand-soft);color:var(--hv-brand);display:flex;align-items:center;justify-content:center;flex:none}
.heroviz .hv-tico.green{background:var(--hv-green-bg);color:var(--hv-green)}
.heroviz .hv-tico svg{width:16px;height:16px}
.heroviz .hv-tnm{flex:1;min-width:0}
.heroviz .hv-tnm .n{font-size:13.5px;font-weight:700;color:var(--hv-ink)}
.heroviz .hv-tnm .s{font-family:var(--hv-mono);font-size:10.5px;color:var(--hv-muted);margin-top:1px}
.heroviz .hv-tlcard{background:#fff;border:1px solid var(--hv-line);border-radius:16px;box-shadow:var(--hv-shadow);padding:4px 18px;margin-top:12px}
.heroviz .hv-timeline{position:relative;margin-top:4px}
.heroviz .hv-tl{display:flex;align-items:center;gap:14px;position:relative;padding:11px 0}
.heroviz .hv-tl::before{content:"";position:absolute;left:5px;top:0;bottom:0;width:2px;background:#CBD5E8;z-index:0}
.heroviz .hv-tl:first-child::before{top:50%}
.heroviz .hv-tl:last-child::before{bottom:50%}
.heroviz .hv-tldot{width:12px;height:12px;border-radius:50%;flex:none;position:relative;z-index:1;box-shadow:0 0 0 3px #fff}
.heroviz .hv-tldot.d-brand{background:var(--hv-brand)}.heroviz .hv-tldot.d-warn{background:var(--hv-amber)}.heroviz .hv-tldot.d-green{background:var(--hv-green)}
.heroviz .hv-tlc{flex:1;min-width:0}
.heroviz .hv-tlc .n{font-size:13.5px;font-weight:700;color:var(--hv-ink)}
.heroviz .hv-tlc .s{font-family:var(--hv-mono);font-size:10.5px;color:var(--hv-muted);margin-top:1px}
.heroviz .hv-tr,.heroviz .hv-tl{opacity:0;transform:translateY(12px)}
.heroviz.go .hv-tr,.heroviz.go .hv-tl{animation:hv-rise .5s cubic-bezier(.2,.75,.2,1) forwards;animation-delay:calc(var(--i) * 100ms + 200ms)}
/* heroviz: grid é 2-col em qualquer largura; ocupa a largura toda quando o .hero empilha no mobile */
@media(max-width:560px){
  .heroviz .hv-bars4{gap:10px}
}
@media (prefers-reduced-motion:reduce){
  .heroviz .hv-card,.heroviz .hv-crow,.heroviz .hv-bar4 .hv-col{opacity:1!important;transform:none!important;animation:none!important}
  .heroviz .hv-g-val{stroke-dashoffset:20!important;animation:none!important}
  .heroviz .hv-meter-fill{transform:none!important;animation:none!important}
  .heroviz .hv-msg,.heroviz .hv-chip-sys{opacity:1!important;transform:none!important;animation:none!important}
  .heroviz .hv-selrow,.heroviz .hv-sumrow,.heroviz .hv-btn,.heroviz .hv-success{opacity:1!important;transform:none!important;animation:none!important}
  .heroviz .hv-prompt,.heroviz .hv-answer{opacity:1!important;transform:none!important;animation:none!important}
  .heroviz .hv-tr,.heroviz .hv-tl{opacity:1!important;transform:none!important;animation:none!important}
  .heroviz .hv-pulse,.heroviz .hv-chat-dot{animation:none}
}