/* marvin.css: o que e so da /marvin na veste do site novo. A barra, o painel
   de hero (.hero-fixo), o rodape e o peso dos titulos de secao vem do
   /site/institucional/chrome.css + /site/hub/chrome-hub.css (a mesma
   cadeia da /hub). Aqui: a tipografia da hero e das secoes (pesos do site
   novo: titulo 400 com tracking fechado, h3 500, rotulo 600) e os casos de
   uso em faixas alternadas. A cena da hero (.hf) segue no <style> da pagina.
   Escopo por rota para nao alterar os demais produtos do Hub. */
html[data-app] { overflow-x: clip; }
html[data-app] body {
  /* Nao criar um conteiner de rolagem no body: o palco dos apps precisa
     acompanhar o scroll da janela para permanecer sticky. */
  overflow-x: clip;
}

/* respiro entre as secoes (pedido da autora: estava apertado). O site.css da
   88px ao .pad; aqui as dobras do Marvin ganham o passo do site novo. */
html[data-app] section.pad { padding-top: clamp(96px, 10vw, 144px); padding-bottom: clamp(96px, 10vw, 144px); }

html[data-app] .app-hero h1 {
  max-width: 22ch;
  margin: 28px auto 0;
  font-size: clamp(40px, 5.2vw, 76px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.035em;
  text-wrap: balance;
}
html[data-app] .app-hero .app-sub {
  max-width: 58ch;
  margin: 28px auto 0;
  font-size: clamp(16px, 1.45vw, 20px);
  line-height: 1.65;
  letter-spacing: -.02em;
}
html[data-app] .app-sub b { font-weight: 600; }
/* os botoes sao os do Hub (.btn-grad e .btn-slate do site.css), como na /hub;
   do site novo entrou so a CTA da barra */
html[data-app] .app-hero-cta { margin-top: 38px; gap: 14px; }
/* o peso e o tracking do .h2 vem do chrome-hub.css; aqui so o corpo */
html[data-app] .h2 {
  font-size: clamp(29px, 3.4vw, 44px);
  text-wrap: balance;
}
html[data-app] .lede {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.65;
  font-weight: 400;
}
html[data-app] .fcard { padding: 24px; border-radius: 24px; }
html[data-app] .fcard h3 {
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -.025em;
  font-weight: 500;
}
html[data-app] .fcard p { font-size: 15px; line-height: 1.65; }
/* ===== funcionalidades: ilha clara =====
   O molde e a why-box da /hub (site.css: .sec-grow + .sec-light + .why-box e o
   topo .mh-top com icone, linha e CTA). Aqui so a tinta dos cards no claro; as
   demos (.fviz) sao telas do produto e seguem escuras, como os videos da
   como-box da /hub. */
html[data-app] .fx-box .fgrid { margin-top: 52px; }
html[data-app] .fx-box .fcard {
  background: var(--light-card);
  border-color: var(--light-line);
  box-shadow: 0 1px 0 rgba(16, 24, 40, .02);
}
html[data-app] .fx-box .fcard::before { display: none; }
html[data-app] .fx-box .fcard:hover {
  border-color: var(--light-line2);
  box-shadow: 0 24px 50px -30px rgba(16, 24, 40, .28);
}
html[data-app] .fx-box .fcard h3 { color: var(--light-tx); }
html[data-app] .fx-box .fcard p { color: var(--light-tx2); }
/* as demos tambem no claro (pedido da autora): a mesma cena e a mesma
   animacao, sobre a grade clara (--light-chrome) em vez do navy; bolhas,
   chips e tiles em branco com o traco claro, texto na tinta escura, azul do
   Hub como acento. A do WhatsApp ja era clara e fica como esta. */
html[data-app] .fx-box .fviz {
  border-color: var(--light-line2);
  background:
    linear-gradient(rgba(16, 24, 40, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 24, 40, .045) 1px, transparent 1px),
    radial-gradient(120% 110% at 50% 0%, rgba(57, 114, 253, .09), rgba(57, 114, 253, 0) 60%),
    var(--light-chrome);
  background-size: 22px 22px, 22px 22px, auto, auto;
}
/* 1. chat */
html[data-app] .fx-box .zc-av,
html[data-app] .fx-box .zc-b,
html[data-app] .fx-box .zc-typing .dots { background: var(--light-card); border-color: var(--light-line2); color: var(--light-tx); }
html[data-app] .fx-box .zc-m.u .zc-b { background: rgba(57, 114, 253, .12); border-color: rgba(57, 114, 253, .35); color: var(--light-tx); }
html[data-app] .fx-box .zc-chip { background: rgba(57, 114, 253, .1); border-color: rgba(57, 114, 253, .3); color: #2A56C4; }
/* 2. apps */
html[data-app] .fx-box .za-t { background: var(--light-card); border-color: var(--light-line2); }
html[data-app] .fx-box .za-fade { background: linear-gradient(90deg, var(--light-chrome) 0%, transparent 20%, transparent 80%, var(--light-chrome) 100%); }
html[data-app] .fx-box .za-core {
  background: linear-gradient(160deg, color-mix(in srgb, var(--app) 14%, #fff), #fff);
  border-color: color-mix(in srgb, var(--app) 45%, transparent);
}
/* 3. salva e repete */
html[data-app] .fx-box .vr-chip { background: var(--light-card); border-color: var(--light-line2); color: var(--light-tx); box-shadow: 0 8px 24px -14px rgba(16, 24, 40, .35); }
/* 5. busca */
html[data-app] .fx-box .zs-bar { background: var(--light-card); border-color: var(--light-line2); color: var(--light-tx); }
html[data-app] .fx-box .zs-l { background: rgba(16, 24, 40, .1); }
html[data-app] .fx-box .zs-src { background: rgba(57, 114, 253, .1); border-color: rgba(57, 114, 253, .3); color: #2A56C4; }
/* 6. contexto */
html[data-app] .fx-box .zx-f,
html[data-app] .fx-box .zx-r { background: var(--light-card); border-color: var(--light-line2); color: var(--light-tx); }
html[data-app] .fx-box .zx-r b { color: var(--light-tx); }

html[data-app] .via-tt { color: #a4abc4; }
html[data-app] .via-item.open .via-tt { color: #fff; }

@media (max-width: 600px) {
  html[data-app] .app-hero h1 { font-size: clamp(32px, 8.7vw, 44px); margin-top: 22px; }
  html[data-app] .app-hero .app-sub { margin-top: 22px; font-size: 16px; }
  html[data-app] .app-hero-cta { margin-top: 28px; flex-wrap: wrap; }
  html[data-app] .fcard { padding: 20px; }
}

/* Funcionalidades: dois destaques com demonstrações e três cards de apoio. */
html[data-app] .fx-box .mf-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:18px; }
html[data-app] .fx-box .mf-grid .fcard { padding:28px; border:1px solid #e9ebf1; border-radius:20px; background:#fff; box-shadow:0 3px 6px #182c5004; overflow:hidden; min-width:0; }
html[data-app] .fx-box .mf-grid .fcard:hover { transform:translateY(-3px); border-color:#d9e1f4; box-shadow:0 12px 28px -20px #17396c30; }
html[data-app] .fx-box .mf-grid .mf-feature { grid-column:span 3; min-height:500px; display:flex; flex-direction:column; }
html[data-app] .fx-box .mf-grid .mf-blue { background:radial-gradient(ellipse at 8% 57%,#7da4fc85,transparent 48%),radial-gradient(ellipse at 90% 8%,#216ee1,transparent 68%),linear-gradient(145deg,#062957,#124381 60%,#082858); border-color:#3f70a8; }
html[data-app] .fx-box .mf-grid .mf-small { grid-column:span 2; min-height:258px; display:flex; flex-direction:column; justify-content:space-between; gap:60px; }
html[data-app] .fx-box .mf-grid h3 { font-size:21px; font-weight:500; letter-spacing:-.035em; margin:0 0 10px; color:#151e37; }
html[data-app] .fx-box .mf-grid .mf-copy>p { font-size:15px; line-height:1.6; color:#657087; margin:0; }
html[data-app] .fx-box .mf-blue h3 { color:#fff; }
html[data-app] .fx-box .mf-blue .mf-copy>p { color:#d3e2fc; }
.mf-scene { display:flex; flex-direction:column; justify-content:center; align-items:center; flex:1; min-height:338px; padding:16px 12px 36px; font-family:var(--mk-font); }
.mf-scene svg,.mf-icon svg { width:20px; height:20px; flex-shrink:0; }
.mf-conversation { gap:14px; }
.mf-prompt { width:90%; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 9px 8px 16px; background:#fff; color:#26344f; font-size:12px; border-radius:40px; box-shadow:0 0 0 5px #e7f0ff38,0 10px 24px #021f5a25; animation:mfFloat 9s ease-in-out infinite; }
.mf-send { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:linear-gradient(145deg,#719dff,#3972fd); color:white; flex-shrink:0; box-shadow:inset 0 1px 2px #ffffff80; }
.mf-answer { width:100%; padding:18px; background:linear-gradient(145deg,#fff,#eef3ff); border:1px solid #fff; border-radius:20px; box-shadow:0 0 0 6px #e7f0ff26,0 22px 36px -18px #02184590; animation:mfFloat 9s ease-in-out -2s infinite; color:#22334f; }
.mf-assistant { display:flex; align-items:center; gap:7px; font-size:12px; font-weight:600; }
.mf-assistant img { width:21px; height:21px; }
.mf-status { margin-left:auto; display:flex; align-items:center; gap:4px; color:#5873aa; font-size:10px; font-weight:400; }
.mf-status svg { width:12px; height:12px; }
html[data-app] .mf-grid .mf-answer-intro { margin:15px 0 12px; font-size:12px; color:#65718a; }
.mf-metrics { display:grid; grid-template-columns:1fr 1.5fr; gap:14px; }
.mf-metrics>div { display:flex; flex-direction:column; gap:3px; }
.mf-metrics strong { font-size:26px; font-weight:550; letter-spacing:-.05em; line-height:1.1; }
.mf-metrics span { font-size:10px; color:#78849b; }
.mf-chart { height:60px; display:flex; gap:10px; align-items:flex-end; margin:12px 0; border-bottom:1px solid #dbe4f4; }
.mf-chart i { flex:1; height:var(--bar); border-radius:4px 4px 0 0; background:linear-gradient(#3972fd,#bdd2ff70); transform-origin:bottom; animation:mfBars 8s cubic-bezier(.22,1,.36,1) infinite; animation-delay:calc(var(--i) * .1s); }
.mf-answer-footer { display:flex; justify-content:space-between; font-size:10px; color:#64738e; }
.mf-answer-footer span { color:#3972fd; }
.mf-operation { width:100%; padding:20px; border:1px solid #e8ecf4; border-radius:22px; background:linear-gradient(140deg,#fff,#f9fbff); box-shadow:0 0 0 6px #f7f8fa,0 18px 35px -26px #314b8745; animation:mfFloat 10s ease-in-out -3s infinite; }
.mf-operation-head { display:flex; align-items:center; gap:10px; }
.mf-app-icon { width:38px; height:38px; display:grid; place-items:center; flex-shrink:0; border-radius:13px; background:#edf3ff; border:1px solid #dce7fc; }
.mf-app-icon img { width:25px; }
.mf-operation-head>div,.mf-action>div { display:flex; flex-direction:column; gap:5px; }
.mf-operation-head strong { font-size:12px; color:#28364f; font-weight:500; }
.mf-operation-head div>span { font-size:9px; color:#8a94a6; }
.mf-live { width:6px; height:6px; margin-left:auto; border-radius:50%; background:#3972fd; box-shadow:0 0 0 4px #3972fd12; }
html[data-app] .mf-grid .mf-operation-request { font-size:12px; color:#6d7990; line-height:1.6; margin:20px 0; }
.mf-action { display:flex; align-items:center; gap:9px; padding:12px 0; border-top:1px solid #edf0f5; animation:mfAction 10s ease-in-out infinite; }
.mf-action-two { animation-delay:1.4s; }
.mf-action-icon { color:#3972fd; display:grid; place-items:center; width:30px; height:30px; background:#f0f5ff; border-radius:9px; flex-shrink:0; }
.mf-action strong { font-size:11px; font-weight:500; color:#32425d; }
.mf-action div>span { font-size:10px; color:#95a0b1; }
.mf-done { margin-left:auto; display:grid; place-items:center; width:18px; height:18px; color:white; background:#3972fd; border-radius:50%; flex-shrink:0; }
.mf-done svg { width:12px; height:12px; }
.mf-operation-footer { display:flex; align-items:center; gap:5px; color:#557abd; font-size:10px; padding-top:13px; border-top:1px solid #edf0f5; }
.mf-operation-footer svg { width:13px; height:13px; }
.mf-icon { position:relative; display:grid; place-items:center; width:44px; height:44px; border-radius:13px; background:linear-gradient(145deg,#94b6ff,#3972fd 55%,#2453c6); box-shadow:inset 0 1px 2px #ffffffb0,0 3px 5px #1746a62b; color:white; }
.mf-icon::before { content:""; position:absolute; inset:5px; border:1px solid #ffffff55; border-radius:9px; }
.mf-icon svg { width:22px; height:22px; }
@keyframes mfFloat { 0%,100% { transform:translateY(2px); } 50% { transform:translateY(-3px); } }
@keyframes mfBars { 0%,100% { transform:scaleY(.7); opacity:.7; } 22%,78% { transform:scaleY(1); opacity:1; } }
@keyframes mfAction { 0%,100% { opacity:.5; transform:translateY(3px); } 20%,80% { opacity:1; transform:translateY(0); } }
@media(max-width:1000px) { html[data-app] .fx-box .mf-grid .fcard { padding:22px; } .mf-scene { padding-left:0; padding-right:0; } .mf-operation { padding:14px; } }
@media(max-width:760px) { html[data-app] .fx-box .mf-grid { grid-template-columns:1fr; } html[data-app] .fx-box .mf-grid :is(.mf-feature,.mf-small) { grid-column:auto; } html[data-app] .fx-box .mf-grid .mf-small { min-height:220px; gap:36px; } .mf-scene { width:100%; max-width:430px; align-self:center; } }
@media(max-width:380px) { .mf-status { font-size:8px; } .mf-operation-head strong { font-size:11px; } .mf-action { gap:6px; } .mf-action strong { font-size:10px; } }
@media(prefers-reduced-motion:reduce) { .mf-grid *, .mf-grid *::before { animation:none!important; } html[data-app] .fx-box .mf-grid .fcard:hover { transform:none; } }

/* Casos de uso: palco horizontal com luz azul atrás do card central. */
html[data-app] #casos { overflow:hidden; padding-bottom:72px; }
.mc-section>.wrap { position:relative; z-index:1; }
.mc-section .h2 { max-width:780px; margin-left:auto; margin-right:auto; }
.mc-carousel { position:relative; margin-top:64px; --mc-progress:0; }
.mc-carousel::before { content:""; position:absolute; pointer-events:none; left:50%; top:46%; width:min(1320px,110vw); height:760px; transform:translate(-50%,-50%); background:radial-gradient(ellipse,#3972fd75 0%,#3972fd48 38%,#3972fd1c 58%,transparent 74%); filter:blur(36px); }
.mc-viewport { position:relative; overflow:hidden; padding:28px 0 12px; touch-action:pan-y; }
.mc-track { display:flex; gap:28px; align-items:stretch; transition:transform 950ms cubic-bezier(.22,1,.36,1); }
.mc-track.is-resetting { transition:none; }
.mc-slide { box-sizing:border-box; flex:0 0 min(1020px,80vw); min-width:0; min-height:470px; padding:44px; display:grid; grid-template-columns: .9fr 1.1fr; gap:44px; align-items:center; text-align:left; border-radius:26px; border:1px solid #c6d8ff12; background:linear-gradient(135deg,#c5d7ff0c 0%,#19244070 48%,#10192d80 100%); -webkit-backdrop-filter:blur(32px) saturate(110%); backdrop-filter:blur(32px) saturate(110%); box-shadow:inset 0 1px 0 #ffffff0c,0 28px 80px -40px #02071d80; opacity:.24; transform:scale(.96); transition:opacity 950ms ease,transform 950ms cubic-bezier(.22,1,.36,1); }
.mc-slide.is-active { opacity:1; transform:scale(1); border-color:#c6d8ff1c; }
.mc-copy { display:flex; flex-direction:column; align-self:center; min-width:0; }
.mc-rule { height:2px; background:#ffffff18; margin-bottom:24px; overflow:hidden; }
.mc-rule i { display:block; width:100%; height:100%; background:linear-gradient(90deg,#3972fd,#92b7ff); transform:scaleX(0); transform-origin:left; }
.is-active .mc-rule i { transform:scaleX(var(--mc-progress)); }
.mc-eyebrow { font-size:11px; letter-spacing:.1em; color:#87a7e0; }
html[data-app] #casos .mc-copy h3 { font-size:clamp(26px,2.5vw,35px); font-weight:400; letter-spacing:-.045em; line-height:1.18; color:#f4f7ff; margin:18px 0 30px; }
.mc-description { margin-top:0; }
html[data-app] #casos .mc-copy p { font-size:14px; color:#929eb7; line-height:1.65; margin:0 0 14px; }
html[data-app] #casos .mc-copy .mc-prompt { color:#e1e9fb; font-size:15px; }
.mc-apps { display:block; margin-top:16px; color:#94b5f4; font-size:11px; letter-spacing:.015em; }
.mc-demo { position:relative; min-width:0; padding:26px 18px 24px; display:flex; flex-direction:column; justify-content:center; align-items:center; }
.mc-demo::before { content:""; position:absolute; inset:0; border-radius:26px; background:radial-gradient(ellipse at 18% 45%,#8aacf338,transparent 65%),radial-gradient(ellipse at 90% 8%,#3972fd66,transparent 75%),linear-gradient(145deg,#163560,#234a80 60%,#142e53); border:1px solid #bed5ff20; box-shadow:inset 0 1px 0 #ffffff0e,0 24px 60px -36px #3972fd40; }
.mc-window { position:relative; width:100%; padding:22px; border-radius:20px; border:1px solid #fff; background:linear-gradient(145deg,var(--w-card),var(--w-bg)); color:var(--w-tx); box-shadow:0 0 0 3px #e7f0ff18,0 20px 40px -22px #02184560; animation:mcFloat 9s ease-in-out infinite; }
.mc-window-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:18px; border-bottom:1px solid var(--w-line); font-size:12px; color:var(--w-tx); }
.mc-window-head small { font-size:10px; color:var(--w-mut); white-space:nowrap; }
.mc-kpis { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:22px 0 12px; }
.mc-kpis>div { display:flex; flex-direction:column; gap:9px; }
.mc-kpis span,.mc-kpis small { font-size:10px; color:var(--w-mut); }
.mc-kpis strong { font-size:25px; line-height:1.1; letter-spacing:-.04em; font-weight:450; color:var(--w-tx); }
.mc-kpis small { color:#5873aa; }
.mc-chart { display:flex; align-items:flex-end; gap:9px; height:86px; margin:20px 0; border-bottom:1px solid var(--w-line); }
.mc-chart i { flex:1; height:var(--h); background:linear-gradient(#3972fd,#bdd2ff70); border-radius:4px 4px 0 0; transform-origin:bottom; animation:mcGrow 8s ease-in-out infinite; animation-delay:var(--d); }
.mc-insight { display:flex; align-items:flex-start; gap:9px; border-top:1px solid var(--w-line); padding-top:15px; }
.mc-spark { color:#3972fd; font-size:20px; line-height:1.2; }
html[data-app] #casos .mc-insight p { color:var(--w-tx2); font-size:12px; line-height:1.6; margin:0; }
.mc-insight b { color:var(--w-tx); font-weight:500; }
.mc-float { position:relative; align-self:flex-end; margin:16px 0 0; max-width:100%; line-height:1.5; padding:11px 16px; font-size:10px; color:#e2ebfc; border:1px solid #bdd2ff20; border-radius:12px; background:#c0d5ff0e; box-shadow:0 10px 28px -18px #0004; animation:mcFloat 9s ease-in-out -3s infinite; }
.mc-example { position:absolute; bottom:5px; font-size:9px; letter-spacing:.04em; color:#5c6b87; }
.mc-transcript { color:var(--w-tx2); font-size:13px; line-height:1.7; margin:18px 0; }
.mc-wave { display:flex; gap:5px; align-items:center; height:30px; margin-bottom:16px; }
.mc-wave i { width:4px; height:var(--h); background:#729efa; border-radius:3px; animation:mcWave 3s ease-in-out infinite; animation-delay:var(--d); }
.mc-task,.mc-area { display:flex; align-items:center; gap:10px; padding:15px 0; border-top:1px solid var(--w-line); }
.mc-check { width:24px; height:24px; border-radius:8px; background:#3972fd20; color:#3972fd; display:grid; place-items:center; font-size:12px; flex:none; }
.mc-task>div,.mc-area>div { display:flex; flex-direction:column; gap:5px; }
.mc-task b,.mc-area b { color:var(--w-tx); font-size:12px; font-weight:450; }
.mc-task small,.mc-area small { color:var(--w-mut); font-size:10px; }
.mc-avatar { margin-left:auto; border:1px solid #dbe5f8; background:#edf3ff; width:26px; height:26px; display:grid; place-items:center; border-radius:50%; color:#315dab; font-size:9px; }
.mc-forecast { display:flex; flex-direction:column; gap:8px; margin:24px 0; color:var(--w-tx2); font-size:12px; }
.mc-forecast strong { font-size:68px; font-weight:350; color:var(--w-tx); letter-spacing:-.06em; line-height:1; }
.mc-forecast strong span { font-size:28px; color:var(--w-mut); }
.mc-meter { height:9px; background:var(--w-line); border-radius:9px; overflow:hidden; position:relative; }
.mc-meter i { display:block; width:97%; height:100%; background:linear-gradient(90deg,#3972fd,#98bcff); border-radius:inherit; transform-origin:left; animation:mcGrow 8s ease-in-out infinite; }
.mc-meter>span { position:absolute; top:0; left:71%; height:100%; border-left:2px solid #fff; }
.mc-legend { display:flex; justify-content:space-between; color:var(--w-mut); font-size:10px; margin:12px 0 24px; }
.mc-legend b { color:var(--w-tx2); font-weight:450; }
.mc-area em { font-size:9px; font-style:normal; margin-left:auto; color:#127552; white-space:nowrap; }
.mc-alert .mc-check { color:#94600a; background:#caa36715; }
.mc-alert em { color:#94600a; }
.mc-hub-bar { display:flex; align-items:center; gap:12px; padding:0 0 14px; border-bottom:1px solid var(--w-line); }
.mc-hub-brand { display:flex; align-items:center; gap:7px; color:var(--w-tx); font-size:12px; font-weight:600; }
.mc-hub-brand img { width:22px; height:22px; }
.mc-hub-search { margin-left:auto; border:1px solid var(--w-line); border-radius:7px; padding:6px 10px; color:var(--w-mut); font-size:9px; }
.mc-hub-avatar { display:grid; place-items:center; width:23px; height:23px; border-radius:50%; background:linear-gradient(140deg,#9dbdff,#2b55c9); color:white; font-size:10px; flex:none; }
.mc-hub-tabs { display:flex; gap:18px; align-items:center; margin:0 0 18px; border-bottom:1px solid var(--w-line); color:var(--w-mut); font-size:10px; }
.mc-hub-tabs>span { padding:12px 0 9px; }
.mc-hub-tabs .is-selected { color:#2c6bff; border-bottom:2px solid #2c6bff; font-weight:500; }
.mc-hub-menu { margin-left:auto; }
@media(max-width:1000px) { .mc-hub-search { display:none; } .mc-hub-avatar { margin-left:auto; } }
.mc-controls { position:relative; display:flex; justify-content:center; align-items:center; gap:14px; margin-top:8px; }
.mc-controls button { cursor:pointer; color:#a4b9de; border:1px solid #ffffff14; background:#ffffff04; border-radius:50%; width:38px; height:38px; font:inherit; transition:background .25s; }
.mc-controls button:hover { background:#3972fd24; }
.mc-controls button:focus-visible { outline:2px solid #8fb6ff; outline-offset:4px; }
.mc-dots { display:flex; gap:0; }
.mc-dots button { border:0; background:none; width:16px; height:38px; padding:0; display:grid; place-items:center; }
.mc-dots button span { width:6px; height:6px; background:#ffffff25; border-radius:6px; transition:width .35s,background .35s; }
.mc-dots button[aria-current="true"] span { width:12px; background:#6997ff; }
.mc-controls .mc-pause { width:auto; padding:0 14px; border-radius:20px; font-size:11px; }
.mc-announcement { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.mc-slide:not(.is-active) * { animation-play-state:paused!important; }
@keyframes mcFloat { 0%,100% { transform:translateY(2px); } 50% { transform:translateY(-3px); } }
@keyframes mcGrow { 0%,100% { transform:scaleY(.85); opacity:.8; } 30%,80% { transform:scaleY(1); opacity:1; } }
@keyframes mcWave { 0%,100% { transform:scaleY(.6); opacity:.5; } 50% { transform:scaleY(1); opacity:1; } }
@media(max-width:1000px) { .mc-slide { flex-basis:86vw; padding:28px; gap:24px; } .mc-window { padding:16px; } .mc-kpis strong { font-size:21px; } }
@media(max-width:760px) { .mc-carousel { margin-top:32px; } .mc-track { gap:16px; } .mc-slide { flex-basis:88vw; grid-template-columns:1fr; min-height:650px; padding:24px; gap:12px; } .mc-copy { min-height:0; } html[data-app] #casos .mc-copy h3 { font-size:28px; margin-bottom:20px; } .mc-demo { width:100%; max-width:420px; margin:auto; padding:12px 4px 26px; } .mc-apps { margin-top:0; } .mc-float { margin-right:0; font-size:10px; } .mc-controls { gap:8px; } }
@media(prefers-reduced-motion:reduce) { .mc-track,.mc-slide { transition:none; } .mc-demo * { animation:none!important; } }

/* Hero: variações do azul oficial #3972FD sobre navy #04081F.
   Fonte: site.css :root / marca/tokens.md. Acento azul desta rota,
   conforme direção aprovada; não altera a classificação global do app. */
html[data-app] .app-hero.hero-fixo {
  --marvin-hero-deep:color-mix(in srgb,var(--app,var(--blue)) 12%,var(--bg));
  --marvin-hero-mid:color-mix(in srgb,var(--app,var(--blue)) 25%,var(--bg));
  --marvin-hero-bright:color-mix(in srgb,var(--app,var(--blue)) 42%,var(--bg));
  --marvin-hero-soft:color-mix(in srgb,var(--app,var(--blue)) 40%,var(--white));
  --marvin-hero-copy:color-mix(in srgb,var(--app,var(--blue)) 13%,var(--white));
  --marvin-hero-panel:color-mix(in srgb,var(--app,var(--blue)) 18%,var(--bg));
  background:var(--marvin-hero-deep);
}
html[data-app] .app-hero.hero-fixo::before {
  /* Painel contínuo: base própria e luz central, sem apagar a borda inferior. */
  background:
    radial-gradient(ellipse at 50% 68%,color-mix(in srgb,var(--app,var(--blue)) 14%,transparent),transparent 56%),
    linear-gradient(180deg,transparent 26%,color-mix(in srgb,var(--marvin-hero-panel) 65%,transparent) 58%,var(--marvin-hero-panel) 100%),
    radial-gradient(ellipse at 50% 0%,var(--marvin-hero-bright),transparent 65%),
    linear-gradient(180deg,var(--marvin-hero-mid),var(--marvin-hero-panel) 76%);
  opacity:1;
}
html[data-app] .app-hero.hero-fixo {
  background:var(--marvin-hero-panel);
  border:0;
  box-shadow:none;
  padding-bottom:28px;
  margin-bottom:32px;
  isolation:isolate;
  overflow:hidden;
}
html[data-app] .app-hero.hero-fixo::after { content:none; }

html[data-app] .app-hero h1 { color:var(--white); }
html[data-app] .app-hero .app-sub { color:var(--marvin-hero-copy); }
html[data-app] .app-hero .app-eyebrow {
  color:var(--white);
  background:color-mix(in srgb,var(--white) 9%,transparent);
  border-color:color-mix(in srgb,var(--white) 24%,transparent);
}
html[data-app] .app-hero .btn-slate {
  color:var(--white);
  background:color-mix(in srgb,var(--bg) 25%,transparent);
  border-color:color-mix(in srgb,var(--white) 32%,transparent);
}
html[data-app] .app-hero .hf-core::after {
  background:
    radial-gradient(circle at 46% 25%,color-mix(in srgb,var(--app,var(--blue)) 48%,var(--bg)),transparent 68%),
    linear-gradient(145deg,color-mix(in srgb,var(--app,var(--blue)) 24%,var(--bg)),var(--bg));
}

/* Tema apenas da demonstração: tokens compartilhados win-dark / win-light. */
html[data-app] #veja .mv-theme { position:relative; z-index:2; margin:0 0 18px; }
html[data-app] #veja .mv-theme button:focus-visible { outline:2px solid var(--app,var(--blue)); outline-offset:3px; }
html[data-app] #veja .bwin { background:var(--w-bg); color:var(--w-tx); border-color:var(--w-line2); }
html[data-app] #veja .bwin-main { background:var(--w-bg); }
html[data-app] #veja :is(.bwin-top,.dc-side) { background:var(--w-chrome); border-color:var(--w-line); }
html[data-app] #veja :is(.bt-ws b,.mv-stat .sv) { color:var(--w-tx); }
html[data-app] #veja :is(.bt-search,.bt-search .kbd) { border-color:var(--w-line2); }
html[data-app] #veja :is(.bt-search,.bwin-ti,.dc-nav-item,.mv-comp .ph,.mv-comp .mini,.mv-stat .sl,.mv-rmenu .mh) { color:var(--w-mut); }
html[data-app] #veja .dc-nav-item.active { color:var(--w-tx); background:var(--w-active); }
html[data-app] #veja .dc-nav-item:not(.active):hover { background:var(--w-hover); color:var(--w-tx); }
html[data-app] #veja :is(.mv-day,.mv-bub,.mv-chip,.mv-ref,.mv-sug,.vtool,.vtyp) { background:var(--w-glass); color:var(--w-tx2); border-color:var(--w-line2); }
html[data-app] #veja .mv-m.u .mv-bub { background:var(--w-accent-bg); color:var(--w-tx); border-color:color-mix(in srgb,var(--app,var(--blue)) 35%,transparent); }
html[data-app] #veja :is(.mv-pill,.mv-sug.primary) { background:var(--w-accent-bg); color:var(--w-accent-tx); border-color:color-mix(in srgb,var(--app,var(--blue)) 30%,transparent); }
html[data-app] #veja .mv-comp { background:linear-gradient(var(--w-chrome),var(--w-chrome)) padding-box,var(--hub-gradient) border-box; }
html[data-app] #veja .mv-rmenu { background:var(--w-chrome); border-color:var(--w-line2); }
html[data-app] #veja .mv-rmenu .mi { color:var(--w-tx2); }
html[data-app] #veja .mv-rmenu .mi:first-of-type { background:var(--w-hover); }
html[data-app] #veja .mv-hl { color:var(--w-chip-warn-tx); background:var(--w-chip-warn); border-color:color-mix(in srgb,var(--w-warn) 30%,transparent); }
html[data-app] #veja .mv-hl b { color:var(--w-chip-warn-tx); }
html[data-app] #veja .mv-stat { background:var(--w-soft); }
html[data-app] #veja .mv-stat .sv.orange { color:var(--w-warn); }
html[data-app] #veja .mv-stat .sv.red { color:var(--w-bad); }
html[data-app] #veja .mv-stat .sv.green { color:var(--w-ok); }
html[data-app] #veja .vtool .ok { color:var(--w-ok); }
html[data-app] #veja .win-light { color-scheme:light; }
html[data-app] #veja .win-dark { color-scheme:dark; }

/* CTA da hero: mesmo relevo e estados da .v3-btn--branco institucional,
   com os tons teal substituídos por variações do azul oficial. */
html[data-app] .app-hero-cta .btn-grad {
  /* Extraído do CTA publicado em marvee.com.br/crm: base e hover. */
  --marvin-cta-blue:#2C6BFF;
  --marvin-cta-hover:#3D79FF;
  color:#fff;
  background:var(--marvin-cta-blue);
  border:1px solid color-mix(in srgb,var(--white) 25%,transparent);
  border-radius:999px;
  animation:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -2px 0 color-mix(in srgb,var(--bg) 42%,transparent),0 0 24px -8px color-mix(in srgb,var(--app,var(--blue)) 54%,transparent),0 12px 30px -14px color-mix(in srgb,var(--app,var(--blue)) 56%,transparent);
  transition:transform .25s ease,filter .25s ease,box-shadow .25s ease;
}
html[data-app] .app-hero-cta .btn-grad::before,
html[data-app] .app-hero-cta .btn-grad::after { content:none; }
html[data-app] .app-hero-cta .btn-grad:hover {
  background:var(--marvin-cta-hover);
  transform:translateY(-2px);filter:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -2px 0 color-mix(in srgb,var(--bg) 40%,transparent),0 0 28px -8px color-mix(in srgb,var(--app,var(--blue)) 62%,transparent),0 17px 36px -15px color-mix(in srgb,var(--app,var(--blue)) 62%,transparent);
}
html[data-app] .app-hero-cta .btn-grad:active { transform:translateY(1px);filter:brightness(.98); }
html[data-app] .app-hero-cta .btn-grad:focus-visible { outline:2px solid var(--white);outline-offset:4px; }
@media(prefers-reduced-motion:reduce) { html[data-app] .app-hero-cta .btn-grad { transition:none; } }

/* Catálogo do Hub: mesma anatomia, filtros manuais e leitura em duas colunas. */
@media(max-width:900px) {
  html[data-app] #appsScroll { width:100%; margin:0; padding:12px 0; overflow:visible; }
  html[data-app] #appsScroll .htrack { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:auto; gap:16px; }
  html[data-app] #appsScroll .app { width:auto; min-width:0; }
}
@media(max-width:600px) {
  html[data-app] #appsScroll .htrack { grid-template-columns:1fr; }
}

/* Hero compacta: o palco reserva o tamanho real da ilustração, incluindo
   os anéis que antes invadiam o espaço dos CTAs. Traços usam o CSS original. */
.hf-stage { display:contents; }
@media(min-width:761px) {
  html[data-app] .app-hero.hero-fixo { padding-top:200px; padding-bottom:18px; }
  html[data-app] .app-hero.hero-fixo>.wrap { padding-bottom:0; }
  html[data-app] .app-hero h1 { font-size:clamp(38px,3.5vw,54px); max-width:25ch; margin-top:22px; line-height:1.14; }
  html[data-app] .app-hero .app-sub { font-size:18px; line-height:1.6; margin-top:32px; max-width:100%; }
  html[data-app] .app-hero-cta { margin-top:40px; gap:20px; }
  html[data-app] .app-hero .hf {
    --scene-scale:.72;
    height:430px; flex:none; margin-top:24px;
  }
  .hf-stage {
    display:block; position:absolute; left:50%; top:calc(118px * var(--scene-scale));
    width:calc(100% / var(--scene-scale)); height:500px;
    transform:translateX(-50%) scale(var(--scene-scale)); transform-origin:top center;
  }
}
@media(min-width:761px) and (max-height:820px) {
  html[data-app] .app-hero.hero-fixo { padding-top:188px; }
  html[data-app] .app-hero h1 { font-size:44px; margin-top:16px; }
  html[data-app] .app-hero .app-sub { font-size:16px; margin-top:28px; }
  html[data-app] .app-hero-cta { margin-top:36px; }
  html[data-app] .app-hero .hf { --scene-scale:.56; height:334px; margin-top:22px; }
}
@media(min-width:761px) and (max-height:700px) {
  html[data-app] .app-hero h1 { font-size:38px; }
  html[data-app] .app-hero .hf { --scene-scale:.46; height:275px; margin-top:18px; }
}

html[data-app] #apps .apps-fim { border-top:0; margin-top:24px; padding-top:0; }
html[data-app] #apps .apps-fim .btn { margin-top:0; }

/* Menu: reutiliza o glass .btn-slate / .nav-help do Hub publicado,
   incluindo reflexos internos, blur e intensificação no hover. */
html[data-app] .s2h-page :is(.s2h-cta,.s2h-help) {
  position:relative;
  isolation:isolate;
  color:var(--s2h-navtxh);
  background:transparent;
  border:1px solid transparent;
  box-shadow:none;
  opacity:1;
  transition:transform .25s ease;
}
html[data-app] .s2h-page .s2h-help { margin-left:0; width:46px; height:46px; }
html[data-app] .s2h-page .s2h-cta::after { display:block; }
html[data-app] .s2h-page :is(.s2h-cta,.s2h-help):hover { transform:translateY(-2px); opacity:1; background:transparent; }
html[data-app] .s2h-page.is-light :is(.s2h-cta,.s2h-help)::after {
  background:rgba(16,24,40,.035);
  border-color:rgba(16,24,40,.14);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.85),inset 0 -1px 2px rgba(16,24,40,.12),0 4px 12px -8px rgba(16,24,40,.3);
}
@media(prefers-reduced-motion:reduce) {
  html[data-app] .s2h-page :is(.s2h-cta,.s2h-help):hover { transform:none; }
}

/* Azul amostrado da referência fornecida para o rodapé. */
html[data-app] body footer.mv-site-footer {
  background:#131E4E;
}

/* Catálogo: superfície suave e luz difusa na cor do app, sem acender a borda. */
html[data-app] #apps .app {
  isolation:isolate;
  border-color:rgba(255,255,255,.055);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(255,255,255,.026),rgba(255,255,255,.008));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
  transition:transform .4s var(--ease-soft),box-shadow .4s var(--ease-soft);
}
html[data-app] #apps .app::before {
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:radial-gradient(ellipse at 25% 15%,color-mix(in srgb,var(--app-c,var(--app,var(--blue))) 13%,transparent),transparent 72%);
  opacity:0;transition:opacity .45s ease;
}
html[data-app] #apps .app:hover {
  transform:translateY(-3px);
  border-color:rgba(255,255,255,.055);
  box-shadow:0 0 38px -15px color-mix(in srgb,var(--app-c,var(--app,var(--blue))) 24%,transparent),0 18px 36px -28px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.025);
}
html[data-app] #apps .app:hover::before { opacity:1; }
html[data-app] #apps .app .ic {
  border-radius:12px;
  border:1px solid transparent;
  background:linear-gradient(140deg,color-mix(in srgb,var(--app-c,var(--app,var(--blue))) 20%,#090d22),#090d22 78%) padding-box,linear-gradient(135deg,var(--app-c,var(--app,var(--blue))),color-mix(in srgb,var(--app-c,var(--app,var(--blue))) 22%,#090d22) 48%,#05091b 85%) border-box;
  box-shadow:inset 0 1px 0 #ffffff08,0 6px 14px -10px #0008;
  transition:box-shadow .25s ease;
}
html[data-app] #apps .app:hover .ic {
  box-shadow:inset 0 1px 0 #ffffff0c,0 0 22px -10px color-mix(in srgb,var(--app-c,var(--app,var(--blue))) 45%,transparent);
}
html[data-app] #apps .app :is(.app-bul,.cta) { border-top:1px solid rgba(255,255,255,.045); }
html[data-app] #apps .app:focus-visible { outline:2px solid var(--app-c,var(--app,var(--blue)));outline-offset:4px; }
@media(prefers-reduced-motion:reduce) {
  html[data-app] #apps .app,html[data-app] #apps .app::before { transition:none; }
  html[data-app] #apps .app:hover { transform:none; }
}

/* Rótulos editoriais das dobras e cabeçalho central da demonstração. */
html[data-app] .mv-section-label {
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:500;line-height:1.4;letter-spacing:.01em;
  color:color-mix(in srgb,var(--app,var(--blue)) 55%,var(--white));
}
html[data-app] .mv-section-label svg { width:15px;height:15px;flex:none; }
html[data-app] .fx-box .mv-section-label { color:color-mix(in srgb,var(--app,var(--blue)) 76%,var(--bg)); }
html[data-app] .mv-demo-heading { text-align:center; margin:0 auto 48px; max-width:800px; }
html[data-app] .mv-demo-heading .h2 { margin:16px 0 0; }
html[data-app] .mv-demo-heading .lede { max-width:660px;margin:16px auto 0; }
html[data-app] #veja .mv-demo-heading .mv-theme { margin:24px auto 0; }
html[data-app] #veja .via-acc { margin-top:0; }
html[data-app] #casos .mv-section-label { margin-bottom:16px; }
html[data-app] #apps .apps-selo { margin-bottom:20px; }
@media(max-width:900px) {
  html[data-app] .mv-demo-heading { margin-bottom:32px; }
}

/* Subtítulo corrido em telas largas; quebra natural em tablet e celular. */
@media(min-width:1100px) {
  html[data-app] .app-hero .app-sub { font-size:clamp(14px,1.15vw,18px); max-width:none; white-space:nowrap; }
}

/* Pause decorative work outside the viewport and in background tabs. */
html[data-app] .app-hero:not(.in-view) *,
html[data-app] .app-hero:not(.in-view) *::before,
html[data-app] .app-hero:not(.in-view) *::after,
html[data-app].mv-page-hidden *,
html[data-app].mv-page-hidden *::before,
html[data-app].mv-page-hidden *::after { animation-play-state:paused!important; }
/* Only the visible card needs a live glass layer. */
.mc-slide:not(.is-active) { backdrop-filter:none; -webkit-backdrop-filter:none; }
@media(max-width:760px) {
  .mc-slide { backdrop-filter:none; -webkit-backdrop-filter:none; background:linear-gradient(135deg,#16213df5,#10192df5); }
  .mc-carousel::before { height:540px; filter:none; }
}

.apps-mobile-cta { display:none; }
@media(max-width:760px) {
 html[data-app] .fx-box .mh-top { flex-wrap:wrap; gap:16px; }
 html[data-app] .fx-box .mh-top .mh-rule { display:none; }
 html[data-app] .fx-box .mh-top .mh-cta { margin-left:0; max-width:100%; }
 html[data-app] #veja .mv-comp { gap:4px; padding:9px 8px; }
 html[data-app] #veja .mv-comp .mini { width:23px; }
 html[data-app] #veja .mv-comp .ph { min-width:0; font-size:11px; white-space:nowrap; }
 .mc-slide { flex-basis:calc(100vw - 24px); padding:24px 16px; gap:24px; }
 .mc-demo { max-width:100%; padding:20px 12px; box-sizing:border-box; }
 .mc-window { box-sizing:border-box; padding:16px; }
 .mc-window-head { flex-wrap:wrap; gap:6px; }
 .mc-transcript { font-size:12px; }
 .mc-float { align-self:stretch; text-align:center; margin-top:20px; }
 html[data-app] #apps { padding-top:56px; padding-bottom:56px; }
 html[data-app] #apps .split { display:flex; flex-direction:column; gap:28px; }
 html[data-app] #apps :is(.split-aside,.split-main) { position:static; width:100%; min-width:0; }
 html[data-app] #apps .apps-selo { justify-content:center; }
 html[data-app] #apps .split-aside { text-align:center; }
 html[data-app] #apps .split-aside .apps-fim { display:none; }
 html[data-app] #apps .app-filter { position:static; display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; width:100%; }
 html[data-app] #apps .af-btn { margin:0; font-size:12px; padding:8px 10px; }
 html[data-app] #appsScroll { overflow:visible; }
 html[data-app] #apps .apps-mobile-cta { display:flex; justify-content:center; margin:28px 20px 0; }
}

@media(max-width:640px) {
  html[data-app] .app-hero-cta { flex-direction:column; align-items:center; }
  html[data-app] .app-hero-cta .btn { width:210px; max-width:100%; min-width:0; justify-content:center; }
}

@media(max-width:900px) {
  #mv-acc { overflow-anchor:none; }
  #mv-acc.mv-scroll-switch .via-desc { transition:none; }
}

/* Shared Hub page structure. Native product drawings remain in content/*.html. */
html[data-app] .hub-app-page .app-hero.hero-fixo { min-height:0; padding-bottom:32px; margin:var(--hf-inset); border-radius:32px; }
html[data-app] .hub-app-page .app-hero.hero-fixo>.wrap { padding-bottom:0; width:100%; max-width:1180px; }
html[data-app] .hub-app-page .app-hero h1 { font-size:clamp(38px,3.5vw,54px); max-width:25ch; margin:22px auto 0; font-weight:400; }
html[data-app] .hub-app-page .app-hero .app-sub { white-space:normal; max-width:76ch; font-size:18px; margin:28px auto 0; }
html[data-app] .hub-app-page .app-hero-cta { margin:36px auto 32px; display:flex; justify-content:center; gap:20px; }
html[data-app] .hub-app-page .app-hero .hero-head { text-align:center; max-width:none; }
html[data-app] .hub-app-page .app-hero .wrap { display:block; }
html[data-app] .hub-app-page .hub-status { color:#fff; font-size:13px; margin:16px 0 0; }
html[data-app] .hub-app-page .hub-demo { padding-top:64px!important; padding-bottom:100px; }
html[data-app] .hub-demo-heading { text-align:center; max-width:840px; margin:0 auto 48px; }
html[data-app] .hub-demo-heading .h2 { margin:16px 0; }
html[data-app] .hub-demo-heading .lede { max-width:680px; margin:0 auto; }
html[data-app] .hub-demo-heading .hub-theme { margin:24px auto 0; position:relative; inset:auto; display:flex; width:max-content; justify-content:center; }
html[data-app] .hub-demo .via { display:grid; grid-template-columns:minmax(240px,.7fr) minmax(0,1.5fr); gap:36px; align-items:start; }
html[data-app] .hub-demo .via-left { min-width:0; }
html[data-app] .hub-demo .via-acc { margin-top:0; }
html[data-app] .hub-demo .via-head { text-align:left; width:100%; cursor:pointer; }
html[data-app] .hub-demo .via-desc { display:block; max-height:none; opacity:1; margin-top:12px; }
html[data-app] .hub-demo .via-item:not(.open) .via-desc { color:var(--muted); }
html[data-app] .hub-demo .via-head:focus-visible { outline:2px solid var(--app); outline-offset:4px; }
html[data-app] .hub-demo .via-screen { position:sticky; top:110px; width:100%; min-width:0; margin:0; }
html[data-app] .hub-demo .via-shot:not(.on) { visibility:hidden; pointer-events:none; }
html[data-app] .hub-demo .bwin { color:var(--w-tx); background:var(--w-bg); border-color:var(--w-line2); }
html[data-app] .hub-demo :is(.bwin-top,.dc-side) { background:var(--w-chrome); border-color:var(--w-line); }
html[data-app] .hub-demo .bwin-main { background:var(--w-bg); min-width:0; }
html[data-app] .hub-demo .bt-ws b { color:var(--w-tx); }
html[data-app] .hub-features { padding:40px 0; }
html[data-app] .hub-features .why-box { padding:64px 0; }
html[data-app] .hub-features .h2 { margin:16px 0; }
html[data-app] .hub-features .lede { max-width:720px; }
html[data-app] .hub-features .mf-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:22px; margin-top:40px; }
html[data-app] .hub-features .mf-large { grid-column:span 3; }
html[data-app] .hub-features .mf-small { grid-column:span 2; display:flex; flex-direction:column; }
html[data-app] .hub-features .fcard { min-width:0; }
html[data-app] .hub-features .fcard p { margin-bottom:0; }
html[data-app] .hub-feature-visual { min-width:0; margin:-8px -8px 24px; border-radius:18px; overflow:hidden; }
html[data-app] .hub-feature-visual .fviz { margin:0; width:100%; height:260px; border-radius:18px; }
html[data-app] .hub-features .mf-icon { display:grid; place-items:center; width:46px; height:46px; border-radius:12px; background:linear-gradient(145deg,color-mix(in srgb,var(--app) 78%,white),var(--app) 58%,color-mix(in srgb,var(--app) 90%,#162442)); color:#fff; box-shadow:inset 0 1px 2px #ffffff80,0 5px 12px color-mix(in srgb,var(--app) 24%,transparent); margin-bottom:24px; }
html[data-app] .hub-features .mf-icon svg { width:24px; height:24px; filter:drop-shadow(0 1px 1px #16244255); }
/* Backoffice: o #00EDE8 é o teal de fundo escuro e estoura na ilha clara. Nas caixas
   de ícone entra o teal original da marca (--teal, marca/tokens), com a mesma receita
   de gradiente das outras áreas. O seletor lê a cor da área no style do wrapper, então
   vale para todo app teal (Comex, Compras, Fiscal, PnL, Tesouraria e os próximos). */
html[data-app] .hub-app-page[style*="--app:#00EDE8" i] .hub-features .mf-icon {
  --mf-teal:var(--teal,#5BC0BE);
  background:linear-gradient(145deg,color-mix(in srgb,var(--mf-teal) 78%,white),var(--mf-teal) 58%,color-mix(in srgb,var(--mf-teal) 90%,#162442));
  box-shadow:inset 0 1px 2px #ffffff80,0 5px 12px color-mix(in srgb,var(--mf-teal) 24%,transparent);
}
html[data-app] .hub-app-page .mc-slide { min-height:500px; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:36px; padding:40px; background:radial-gradient(ellipse 70% 85% at 0% 0%,color-mix(in srgb,var(--app) 42%,transparent),color-mix(in srgb,var(--app) 10%,transparent) 38%,transparent 75%),linear-gradient(135deg,#a9c5ff14,#15233a70 55%,#111b3060); border-color:#c6d8ff30; box-shadow:inset 0 1px 0 #ffffff18,0 24px 65px -36px #02071dcc; }
html[data-app] .hub-app-page .mc-carousel::before { background:radial-gradient(ellipse,color-mix(in srgb,var(--app) 16%,transparent),transparent 68%); filter:none; }
html[data-app] .hub-app-page .mc-copy h3 { font-size:clamp(25px,2.5vw,36px); margin:16px 0 24px; font-weight:400; line-height:1.2; }
html[data-app] .hub-app-page .mc-copy p { font-size:16px; line-height:1.7; }
html[data-app] .hub-app-page .mc-eyebrow { color:color-mix(in srgb,var(--app) 35%,white); }
html[data-app] .hub-app-page .mc-demo { padding:20px 0; width:100%; min-width:0; }
html[data-app] .hub-case-visual { background:var(--w-bg); color:var(--w-tx); border:1px solid var(--w-line2); border-radius:20px; padding:20px; box-shadow:0 22px 55px -30px #0008; min-width:0; }
html[data-app] .hub-case-visual .mc-hub-bar { margin-bottom:20px; }
html[data-app] .hub-case-visual .mc-hub-avatar { margin-left:auto; }
html[data-app] .hub-native-case { min-width:0; }
html[data-app] .hub-native-case .fviz { margin:0; width:100%; border:0; background:var(--w-bg); min-height:290px; height:320px; border-radius:10px; }
html[data-app] .mc-controls { margin-top:8px; gap:0; }
html[data-app] .mc-slide { position:relative; }
html[data-app] .mc-copy > .mc-rule { width:160px; max-width:100%; height:2px; margin:24px 0 0; border-radius:2px; background:#ffffff18; pointer-events:none; }
html[data-app] .mc-copy > .mc-rule i { width:100%; background:var(--app,var(--blue)); transform:scaleX(0); transform-origin:left; }
html[data-app] .mc-dots button { width:24px; min-height:44px; }
html[data-app] .hub-app-page .mc-dots button[aria-current="true"] span { background:var(--app); }
html[data-app] .hub-app-page .rv { opacity:1; transform:none; }
html[data-app] .hub-app-page :is(.app-hero,section):not(.in-view) *,
html[data-app] .hub-app-page :is(.app-hero,section):not(.in-view) *::before,
html[data-app] .hub-app-page :is(.app-hero,section):not(.in-view) *::after,
html.hub-page-hidden *,html.hub-page-hidden *::before,html.hub-page-hidden *::after { animation-play-state:paused!important; }
html[data-app] .hub-app-page .via-shot:not(.on) * { animation-play-state:paused!important; }
@media(max-width:900px) {
 html[data-app] .hub-app-page .app-hero.hero-fixo { padding-bottom:28px; }
 html[data-app] .hub-app-page .app-hero h1 { font-size:clamp(34px,6.5vw,48px); }
 html[data-app] .hub-app-page .app-hero .app-sub { font-size:16px; line-height:1.7; }
 html[data-app] .hub-demo .via { display:flex; flex-direction:column; gap:28px; }
 html[data-app] .hub-demo .via-left { width:100%; }
 html[data-app] .hub-demo .via-head { min-height:var(--topic-height); }
 html[data-app] .hub-demo .via-screen { position:sticky; top:90px; order:-1; z-index:2; max-height:48svh; overflow:auto; border-radius:18px; background:var(--bg); }
 html[data-app] .hub-demo .via-desc { transition:none; }
 html[data-app] .hub-demo .via-acc { overflow-anchor:none; }
 html[data-app] .hub-app-page .hub-demo { padding:64px 0!important; }
 html[data-app] .hub-features .mf-large { grid-column:span 6; }
 html[data-app] .hub-features .mf-small { grid-column:span 2; }
 html[data-app] .hub-app-page .mc-slide { grid-template-columns:1fr; min-height:760px; gap:24px; padding:28px 24px; }
 html[data-app] .hub-app-page .mc-copy { min-height:0; }
 html[data-app] .hub-app-page .mc-demo { padding:0; }
}
@media(max-width:600px) {
 html[data-app] .hub-app-page .app-hero.hero-fixo>.wrap { padding-inline:20px; }
 html[data-app] .hub-app-page .app-hero-cta { flex-direction:column; align-items:center; }
 html[data-app] .hub-app-page .app-hero-cta .btn { width:210px; }
 html[data-app] .hub-features .mf-small { grid-column:span 6; }
 html[data-app] .hub-features .mf-grid { gap:16px; }
 html[data-app] .hub-features .why-box { padding:40px 0; }
 html[data-app] .hub-app-page .mc-slide { flex-basis:calc(100vw - 24px); padding:28px 20px; min-height:860px; }
 html[data-app] .hub-app-page .mc-copy p { font-size:15px; }
 html[data-app] .hub-case-visual { padding:14px; }
 html[data-app] .hub-native-case .fviz { min-height:280px; height:340px; }
 html[data-app] .hub-demo .dc-side { display:none; }
}
@media(prefers-reduced-motion:reduce) {
 html[data-app] .hub-app-page *,html[data-app] .hub-app-page *::before,html[data-app] .hub-app-page *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}
/* Explicit section scope wins over the legacy product card paint. */
html[data-app] .hub-app-page #funcionalidades .mf-grid { width:100%; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:22px; }
html[data-app] .hub-app-page #funcionalidades .mf-grid .fcard { padding:28px; border:1px solid var(--light-line); border-radius:22px; background:var(--light-card); box-shadow:0 3px 12px #182c5005; transform:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
html[data-app] .hub-app-page #funcionalidades .mf-grid .fcard::before,
html[data-app] .hub-app-page #funcionalidades .mf-grid .fcard::after { content:none; }
html[data-app] .hub-app-page #funcionalidades .mf-grid .mf-large { grid-column:span 3; }
html[data-app] .hub-app-page #funcionalidades .mf-grid .mf-small { grid-column:span 2; gap:24px; min-height:260px; justify-content:space-between; }
html[data-app] .hub-app-page #funcionalidades .fcard h3 { font-size:21px; line-height:1.3; font-weight:500; color:var(--light-tx); }
html[data-app] .hub-app-page #funcionalidades .fcard p { font-size:15px; line-height:1.65; color:var(--light-tx2); }
html[data-app] .hub-app-page #funcionalidades .lede { margin-left:0; }
html[data-app] .hub-app-page #funcionalidades .hub-feature-visual .fviz { height:260px; padding:20px; margin:0; border:1px solid var(--light-line); background:var(--light-chrome); box-shadow:none; }
html[data-app] .hub-app-page #casos .hub-case-visual { background:var(--w-bg); color:var(--w-tx); }
html[data-app] .hub-app-page #casos .hub-native-case .fviz { background:var(--w-bg); border:0; box-shadow:none; margin:0; padding:12px 0; }
html[data-app] :is(#casos .hub-case-visual,#funcionalidades .hub-feature-visual) { --tx:var(--w-tx); --mut:var(--w-mut); color:var(--w-tx); }
html[data-app] :is(#casos .hub-case-visual,#funcionalidades .hub-feature-visual) .gcard { background:white; color:var(--w-tx); border-color:var(--w-line2); box-shadow:0 4px 12px #182c5008; }
@media(max-width:900px) {
 html[data-app] .hub-app-page #funcionalidades .mf-grid .mf-large { grid-column:span 6; }
}
@media(max-width:600px) {
 html[data-app] .hub-app-page #funcionalidades .mf-grid .mf-small { grid-column:span 6; min-height:220px; }
 html[data-app] .hub-app-page #funcionalidades .mf-grid .fcard { padding:22px; }
}
html[data-app] .hub-app-page #casos .hub-case-visual { position:relative; z-index:1; width:100%; }
html[data-app] .hub-app-page #casos .mc-demo { padding:24px 18px; }
html[data-app] .hub-app-page #casos .mc-demo::before { background:linear-gradient(145deg,#dce8ff12,#b5ceff04); border-color:#d2e1ff24; box-shadow:inset 0 1px 0 #ffffff12,0 24px 50px -36px #02071d80; }
html[data-app] .hub-app-page #casos .mc-copy p { font-size:16px; line-height:1.7; color:#b4bfd5; }
html[data-app] .hub-app-page #casos .mc-slide { backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
html[data-app] .hub-app-page #casos .mc-slide:not(.is-active) { backdrop-filter:none; -webkit-backdrop-filter:none; }
@media(max-width:600px) {
 html[data-app] .hub-app-page #casos .mc-demo { padding:16px 10px; }
 html[data-app] .hub-app-page #casos .mc-copy p { font-size:15px; }
 html[data-app] .hub-app-page #casos .mc-slide { backdrop-filter:none; -webkit-backdrop-filter:none; }
}
.hub-knowledge-graph { display:block; width:100%; height:100%; position:absolute; inset:0; }
.hub-scene-link { fill:none; stroke:var(--app); stroke-width:1; opacity:.38; }
@media(max-width:900px) {
 html[data-app] .hub-app-page #casos .mc-slide { min-height:0; grid-template-rows:min-content min-content; align-content:center; gap:24px; }
 html[data-app] .hub-app-page #casos .mc-copy h3 { margin-bottom:20px; }
 html[data-app] .hub-demo .via-screen { scrollbar-width:thin; scrollbar-color:var(--app) var(--bg); }
}

html[data-app] .hub-demo .win-light,
html[data-app] :is(#casos .hub-case-visual,#funcionalidades .hub-feature-visual) .fviz {

  /* núcleo de superfície/texto/linha vem dos tokens globais --light-* (a
     casa única do tom claro); os valores computados são os mesmos de antes */
  --w-bg:var(--light-bg); --w-chrome:var(--light-chrome);
  --w-line:var(--light-line); --w-line2:var(--light-line2);
  --w-tx:var(--light-tx); --w-tx2:var(--light-tx2); --w-mut:var(--light-mut);
  --w-hover:rgba(16,24,40,.04); --w-active:color-mix(in srgb,var(--app,#3972FD) 10%,transparent);
  --w-card:var(--light-card); --w-soft:var(--light-soft);
  --w-glass:rgba(255,255,255,.85);
  --w-ok:#12a06f; --w-ok-bg:#e9f9ef; --w-warn:#B4710D; --w-bad:#D63B22;
  --w-edge:rgba(0,0,0,.4);
  --w-accent-tx:color-mix(in srgb,var(--app,#3972FD) 62%,#000);
  --w-accent-bg:color-mix(in srgb,var(--app,#3972FD) 13%,#fff);
  --w-rail:#2A2521; --w-rail-tx:#B9B0A5; --w-rail-soft:#3A342E;
  --w-soft2:#F4F6FB;
  --w-chip-ok:#E9F9EF;  --w-chip-ok-tx:#0D6F6A;
  --w-chip-warn:#FDF3E6; --w-chip-warn-tx:#B5740F;
  --w-chip-bad:#FDECEA;  --w-chip-bad-tx:#D63B22;
  --w-chip-info:#E8F0FE; --w-chip-info-tx:#2B62D6;

}
html[data-app] .hub-demo .win-light [style*="color:#fff"],
html[data-app] .hub-demo .win-light [style*="color: #fff"] { color:var(--w-tx)!important; }
html[data-app] .hub-demo .via-screen:focus-visible { outline:2px solid var(--app); outline-offset:4px; }
.hub-mini-board { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; width:100%; }
.hub-mini-board>div { min-width:0; }
.hub-mini-label { display:block; font-size:10px; font-weight:600; color:#59657c; margin-bottom:12px; }
.hub-mini-card { display:flex; flex-direction:column; gap:12px; border:1px solid #e1e5ef; border-radius:12px; background:#fff; padding:16px; font-size:11px; color:#29344f; }
.hub-mini-card small { font-size:10px; color:#68768d; line-height:1.5; }
.hub-mini-alert { color:#a84725; }
.hub-mini-form { width:100%; max-width:360px; padding:20px; border:1px solid #e1e5ef; border-radius:14px; background:#fff; }
.hub-mini-form>div { display:flex; justify-content:space-between; gap:14px; padding:12px 0; border-bottom:1px solid #e1e5ef; font-size:12px; color:#29344f; }
html[data-app] #funcionalidades .hub-mini-form p { font-size:11px; line-height:1.5; margin:14px 0 0; color:#a84725; }
@media(max-width:600px) {
 html[data-app] #funcionalidades .hub-feature-visual .pf-adm { width:100%; max-width:100%; }
 html[data-app] #funcionalidades .hub-feature-visual .pf-adm .sb-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
 html[data-app] #funcionalidades .hub-feature-visual .pf-adm :is(.sb-in,.sb-fld) { min-width:0; }
 html[data-app] #funcionalidades .hub-feature-visual .pf-adm .vl { white-space:normal; font-size:10px; }
 html[data-app] #funcionalidades .hub-feature-visual .ft-titulos .tr { grid-template-columns:minmax(0,1fr) 68px 66px!important; gap:6px; padding-inline:8px; }
 html[data-app] #funcionalidades .hub-feature-visual .ft-titulos .tr>:nth-child(2),
 html[data-app] #funcionalidades .hub-feature-visual .ft-titulos .tr>:nth-child(3) { display:none; }
 html[data-app] #funcionalidades .hub-feature-visual .ft-titulos .td { white-space:normal; font-size:10px; }
 html[data-app] #funcionalidades .hub-feature-visual .cw-connect { flex-direction:column; gap:8px; }
 html[data-app] #funcionalidades .hub-feature-visual .cw-connect .qr { width:64px; height:64px; }
 html[data-app] #funcionalidades .hub-feature-visual .cw-connect .vgo { display:none; }
 html[data-app] #funcionalidades .hub-feature-visual .cw-connect .sess { min-width:0; width:100%; }
 html[data-app] #casos .hub-native-case .vs-chip { max-width:100%; white-space:normal; text-align:center; }
 html[data-app] #casos .hub-native-case .vs-hd { flex-wrap:wrap; }
 html[data-app] #casos .hub-native-case .vs-hd .rt { margin-left:0; }
 .hub-mini-board { gap:8px; }
 .hub-mini-card { padding:10px; }
 .hub-mini-form { padding:12px; }
}
@media(prefers-reduced-motion:reduce) {
 html[data-app] .hub-app-page :is(#acao,#veja) .via-shot.on .vm { opacity:1!important; transform:none!important; }
}
html[data-app] .hub-app-page .app-hero .app-sub { width:auto; max-width:76ch; }
html[data-app] .hub-app-page .app-hero .app-sub :is(b,span) { white-space:normal; }
html[data-app] .hub-app-page .app-hero .app-sub { left:auto; transform:none; }
@media(max-width:600px) {
 html[data-app="comm"] #acao .wr-list { display:none; }
 html[data-app="comm"] #acao .wr-thread { width:100%; min-width:0; }
}
html[data-app] .mc-slide[aria-hidden="true"] *,
html[data-app] .mc-slide[aria-hidden="true"] *::before,
html[data-app] .mc-slide[aria-hidden="true"] *::after { animation-play-state:paused!important; }
@media(max-width:600px) {
 html[data-app="tesouraria"] #casos .cz-final .tr { grid-template-columns:minmax(0,1fr) 65px 65px!important; gap:5px; padding-inline:6px; }
 html[data-app="tesouraria"] #casos .cz-final .tr>:nth-child(2) { display:none; }
 html[data-app="tesouraria"] #casos .cz-final .td { white-space:normal; font-size:10px; }
}

/* Use the Marvin mobile clearance instead of each source page's hero padding. */
@media(max-width:760px) {
 html[data-app] .hub-app-page .app-hero.hero-fixo { padding-top:114px; }
}
/* Shared Marvin conversation: original product copy, finite replayable motion. */
html[data-app] .hc-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; align-items:center; }
.hc-chat { min-width:0; overflow:hidden; border-radius:24px; border:1px solid #ffffff20; background:linear-gradient(160deg,#151b32,#090e22); box-shadow:0 24px 64px -32px #0009; }
.hc-header { display:flex; align-items:center; gap:12px; padding:20px; border-bottom:1px solid #ffffff12; }
.hc-header b { font-size:16px; font-weight:500; color:#f5f7ff; }
.hc-header small { display:block; font-size:12px; color:#939fbe; }
.hc-avatar { display:grid; place-items:center; flex:none; width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#294579,#1b2445); border:1px solid #ffffff20; }
.hc-avatar img { width:23px; height:23px; }
.hc-replay { margin-left:auto; display:flex; align-items:center; gap:6px; border:1px solid #ffffff16; border-radius:10px; padding:9px 11px; background:#ffffff08; color:#bec8df; cursor:pointer; font:inherit; font-size:12px; min-height:44px; }
.hc-replay svg { width:15px; height:15px; }
.hc-replay:hover { background:#ffffff14; color:white; }
.hc-messages { height:340px; overflow-y:auto; padding:24px 20px; scrollbar-width:thin; scrollbar-color:#435077 transparent; overflow-anchor:none; }
.hc-message { display:flex; align-items:flex-end; gap:10px; margin-bottom:18px; }
.hc-user { justify-content:flex-end; }
.hc-bubble { max-width:85%; min-width:0; padding:13px 16px; border-radius:18px 18px 18px 5px; border:1px solid #ffffff15; background:#ffffff07; color:#e7ecfa; font-size:14px; line-height:1.6; overflow-wrap:anywhere; }
.hc-user .hc-bubble { border-radius:18px 5px 18px 18px; background:linear-gradient(115deg,#315fd7,#5940ad); border-color:#aabfff26; color:white; box-shadow:0 8px 24px -16px #526fff; }
.hc-bubble svg { width:16px; height:16px; vertical-align:middle; }
.hc-bubble img { max-width:28px; }
.hc-result { margin-top:12px; padding:12px; border-radius:12px; border:1px solid #ffffff16; background:#04081f50; }
.hc-result-row { display:flex; justify-content:space-between; gap:16px; padding-top:8px; }
.hc-result-row b { white-space:nowrap; }
.hc-compose { margin:0 16px 16px; padding:13px 16px; border:1px solid #ffffff13; background:#ffffff05; border-radius:14px; display:flex; align-items:center; justify-content:space-between; color:#8792b2; font-size:13px; }
.hc-compose svg { width:20px; height:20px; color:#a3b4ef; }
.hc-typing { display:flex; gap:5px; width:max-content; padding:14px 18px; margin-left:44px; border:1px solid #ffffff12; border-radius:15px 15px 15px 5px; background:#ffffff08; }
.hc-typing span { width:6px; height:6px; border-radius:50%; background:#bcc8e4; animation:hc-dot .8s infinite; }
.hc-typing span:nth-child(2) { animation-delay:.15s; }
.hc-typing span:nth-child(3) { animation-delay:.3s; }
.hc-message.hc-reveal { animation:hc-in .35s cubic-bezier(.22,1,.36,1) both; }
.hc-user { --hc-x:16px; }
.hc-message:not(.hc-user) { --hc-x:-16px; }
.hc-message[hidden],.hc-typing[hidden] { display:none!important; }
@keyframes hc-in { from { opacity:0; transform:translate(var(--hc-x),12px) scale(.96); } to { opacity:1; transform:none; } }
@keyframes hc-dot { 50% { opacity:.4; transform:translateY(-4px); } }
.hc-icons { display:flex; gap:12px; align-items:center; margin-bottom:24px; }
.hc-app-icon { display:grid; place-items:center; width:48px; height:48px; flex:none; border-radius:15px; border:1px solid #3972fd80; background:linear-gradient(150deg,#152750,#080d23); box-shadow:inset 0 2px 1px #aecbff35,0 8px 26px -18px #3972fd; }
.hc-app-icon img { width:28px; height:28px; }
html[data-app] .hc-copy .h2 { margin:0 0 24px; font-size:clamp(30px,3vw,44px); }
html[data-app] .hc-copy .lede { margin:0; font-size:18px; line-height:1.75; }
.hc-replay:focus-visible,.hc-messages:focus-visible { outline:2px solid #8baaff; outline-offset:-3px; }
@media(max-width:900px) {
 html[data-app] .hc-layout { grid-template-columns:minmax(0,1fr); gap:32px; }
 .hc-copy { order:-1; text-align:center; }
 .hc-icons { justify-content:center; gap:12px; }
 .hc-chat { width:100%; max-width:580px; margin:auto; }
 html[data-app] .hc-copy .lede { font-size:16px; }
}
@media(max-width:480px) {
 .hc-header { padding:14px; gap:9px; }
 .hc-header small { font-size:10px; }
 .hc-replay { padding:8px; }
 .hc-messages { padding:20px 12px; height:340px; }
 .hc-bubble { padding:11px 12px; font-size:13px; max-width:86%; }
 .hc-message .hc-avatar { width:27px; height:27px; }
 .hc-message .hc-avatar img { width:19px; height:19px; }
 .hc-app-icon { width:42px; height:42px; border-radius:13px; }
 .hc-app-icon img { width:25px; height:25px; }
}
.hc-result,.hc-detail { display:block; }
.hc-detail+.hc-detail { margin-top:8px; }
.hc-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.hc-chip { padding:4px 9px; border-radius:7px; background:#3972fd30; border:1px solid #9ab5ff30; font-size:12px; }
/* Every app starts from Marvin blue; the original app color is a top light,
   never a dark, area-colored surface (orange must not turn the panel brown). */
html[data-app] .hub-app-page .app-hero.hero-fixo {
 --marvin-hero-deep:color-mix(in srgb,#3972FD 12%,#04081F);
 --marvin-hero-mid:color-mix(in srgb,#3972FD 25%,#04081F);
 --marvin-hero-bright:color-mix(in srgb,#3972FD 42%,#04081F);
 --marvin-hero-panel:color-mix(in srgb,#3972FD 18%,#04081F);
 --marvin-hero-copy:color-mix(in srgb,#3972FD 13%,white);
 background:var(--marvin-hero-panel);
}
html[data-app] .hub-app-page .app-hero.hero-fixo::before {
 content:""; display:block; position:absolute; inset:0; transform:none; pointer-events:none;
 background:
  radial-gradient(ellipse 80% 55% at 50% -8%,color-mix(in srgb,var(--app) 88%,white) 0%,color-mix(in srgb,var(--app) 80%,transparent) 20%,transparent 85%),
  linear-gradient(180deg,#203e84 0%,#172f6e 50%,#112455 100%);
 background-blend-mode:normal;
}
/* Primary CTA uses the original accent, not the hero's blended surface. */
html[data-app] .hub-app-page .app-hero-cta .btn-grad {
 --marvin-cta-blue:var(--app);
 --marvin-cta-hover:color-mix(in srgb,var(--app) 88%,white);
 color:var(--hub-cta-ink,#04081F);
 background:var(--hub-cta-fill,var(--app));
}
html[data-app] .hub-app-page .app-hero-cta .btn-grad:hover {
 background:var(--hub-cta-hover,color-mix(in srgb,var(--app) 88%,white));
}

/* Retain the native Tasks highlights used by connector pulses and endpoints. */
html[data-app="tasks"] .hub-app-page { --appl:#FFC98A; --appb:#FFD8A8; }
html[data-app] .hub-app-page .app-hero:not(.in-view) *,
html[data-app] .hub-app-page .app-hero:not(.in-view) *::before,
html[data-app] .hub-app-page .app-hero:not(.in-view) *::after { animation-play-state:paused!important; }

/* Productivity and People use the same blue hero surface as Marvin. */
html:is([data-app="tasks"],[data-app="chat"],[data-app="voice"],[data-app="implantacao"],[data-app="email"],[data-app="agenda"],[data-app="helpdesk"],[data-app="hr"],[data-app="dp"],[data-app="recrutamento-e-selecao"]) .hub-app-page .app-hero.hero-fixo::before {
 background:
  radial-gradient(ellipse at 50% 68%,color-mix(in srgb,#3972FD 14%,transparent),transparent 56%),
  linear-gradient(180deg,transparent 26%,color-mix(in srgb,var(--marvin-hero-panel) 65%,transparent) 58%,var(--marvin-hero-panel) 100%),
  radial-gradient(ellipse at 50% 0%,var(--marvin-hero-bright),transparent 65%),
  linear-gradient(180deg,var(--marvin-hero-mid),var(--marvin-hero-panel) 76%);
}

/* Teal needs less light intensity than the warmer app accents. */
html:is([data-app="tesouraria"],[data-app="comex"],[data-app="fiscal"],[data-app="pnl"]) .hub-app-page .app-hero.hero-fixo::before {
 background:
  radial-gradient(ellipse 66% 46% at 50% -4%,#00ede88c 0%,#00ede833 38%,#00ede800 80%),
  linear-gradient(180deg,#203e84 0%,#172f6e 50%,#112455 100%);
}

/* Cash-flow hero uses its own visibility boundary, managed by app-page.js. */
html[data-app="pnl"] .pnhf-links .pnh-flow {
 stroke:var(--app); stroke-width:2; stroke-linecap:round;
 stroke-dasharray:12 var(--pnh-length); animation:pnhConnectionPulse var(--pnh-duration) linear infinite;
}
@keyframes pnhConnectionPulse { to { stroke-dashoffset:calc(-1 * var(--pnh-length)); } }
@media(prefers-reduced-motion:reduce) {
 html[data-app="pnl"] .pnhf-sat { opacity:1; animation:none!important; }
 html[data-app="pnl"] .pnh-flow { display:none; }
}

/* Fiscal: calmer product flow, without the decorative circuit-board effects. */
html[data-app="fiscal"] .fis-scene::before,
html[data-app="fiscal"] .fis-rings,
html[data-app="fiscal"] .fis-pins { display:none; }
html[data-app="fiscal"] .fis-scene [data-depth],
html[data-app="fiscal"] .fis-core .cl,
html[data-app="fiscal"] .fis-core .cic,
html[data-app="fiscal"] .fis-core::before,
html[data-app="fiscal"] .fis-panel::after { animation:none; }
html[data-app="fiscal"] .fis-core .cic { opacity:1; }
html[data-app="fiscal"] .fis-core .cl3 { background:#dbeaff04; border-color:#dbeaff18; }
html[data-app="fiscal"] .fis-core .cl2 { background:#dbeaff08; border-color:#b9dfff24; }
html[data-app="fiscal"] .fis-core::before { opacity:.4; filter:none; }
html[data-app="fiscal"] .fis-pulse { stroke-width:1.25; opacity:.5; filter:none; animation-duration:9s; }
html[data-app="fiscal"] .fis-pulse.thin { display:none; }
html[data-app="fiscal"] .fis-jn { opacity:.5; }
html[data-app="fiscal"] .fis-scene :is(.fis-panel,.fis-app,.fis-chip) {
 background:linear-gradient(145deg,#e4efff0c,#0b153866);
 border-color:#c9dfff26; box-shadow:inset 0 1px 0 #ffffff0d,0 12px 28px -20px #02071d99;
 backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
html[data-app="fiscal"] .fis-panel::after { opacity:.2; }

/* People apps retain a legible white-label CTA. */
html:is([data-app="hr"],[data-app="dp"],[data-app="recrutamento-e-selecao"]) .hub-app-page .app-hero-cta .btn-grad { color:#fff; background:#cf2063; }
html:is([data-app="hr"],[data-app="dp"],[data-app="recrutamento-e-selecao"]) .hub-app-page .app-hero-cta .btn-grad:hover { background:#bd1958; }
html[data-app="hr"] :is(.gch-svg,.gch-jn,.gch-dot,.gch-mini) { display:none; }
html[data-app="hr"] .gch-live-links { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
html[data-app="hr"] .gch-live-line { fill:none; stroke:#d6e2ff55; stroke-width:1.2; }
html[data-app="hr"] .gch-live-branch { fill:none; stroke:#d6e2ff40; stroke-width:1; stroke-dasharray:3 5; }
html[data-app="hr"] .gch-grid { opacity:.3; }

html[data-app="hr"] .gch-ficha::after,html[data-app="hr"] .gch-org::before { display:none; }

/* Keep the complete admission story visible; only light travels along the links. */
html[data-app="dp"] .dph-card.hire{opacity:1;animation:none}
html[data-app="dp"] .dph-step{opacity:1;animation:none}
html[data-app="dp"] .dph-svg,html[data-app="dp"] .dph-hub::before,html[data-app="dp"] .dph-hub::after{display:none}
html[data-app="dp"] .dph-live-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
html[data-app="dp"] .dph-live-line{fill:none;stroke:#d6e2ff66;stroke-width:1.2}
html[data-app="dp"] .dph-live-branch{fill:none;stroke:#d6e2ff44;stroke-width:1;stroke-dasharray:3 5}
html[data-app="dp"] .dph-live-links .dph-sig{animation-duration:7s}

/* Light glass surfaces for the darker hero mockups; never affect product demos. */
html[data-app] .hub-app-page .app-hero :is(.th-face,.vhf-card,.hd-card,.hd-fich,.pnhf-sat:not(.win-light),.cxhf-card,.ahf-card,.au-panel,.dhf-card,.mhf-card,.gch-ficha,.gch-org,.dph-card) {
 background:linear-gradient(145deg,rgba(170,198,255,.13),rgba(92,131,209,.05) 48%),rgba(17,32,68,.62);
 border-color:rgba(190,211,255,.22);
 box-shadow:inset 0 1px 0 rgba(232,240,255,.12),0 14px 30px -20px rgba(2,8,28,.48);
 -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
}
html[data-app="tasks"] .app-hero .th-face::after{background:none;box-shadow:none}
html[data-app="tasks"] .app-hero .th-face::before{opacity:.32}
html[data-app="tasks"] .app-hero .th-mini .kb-card{background:rgba(20,32,62,.36);border-color:rgba(190,211,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}

/* Marvin's featured-card composition, tinted with each app's area accent. */
html[data-app] .hub-app-page #funcionalidades .mf-grid .mf-accent {
 background:
  radial-gradient(ellipse at 8% 57%,color-mix(in srgb,var(--app) 45%,#ffffff55),transparent 48%),
  radial-gradient(ellipse at 90% 8%,color-mix(in srgb,var(--app) 86%,#162442),transparent 68%),
  linear-gradient(145deg,color-mix(in srgb,var(--app) 28%,#101b30),color-mix(in srgb,var(--app) 48%,#101b30) 60%,color-mix(in srgb,var(--app) 24%,#101b30));
 border-color:color-mix(in srgb,var(--app) 48%,#d8e3f5);
}
html[data-app] .hub-app-page #funcionalidades .mf-accent .mf-copy h3 { color:#fff; }
html[data-app] .hub-app-page #funcionalidades .mf-accent .mf-copy>p { color:#f0f4fc; }

/* The hero owns the navigation clearance; legacy wrappers must not add it twice. */
html[data-app] .hub-app-page .app-hero.hero-fixo>.wrap{position:relative;padding-top:0}
html[data-app] .hub-app-page .app-hero.hero-fixo h1{margin-top:0}
html[data-app] .hub-app-page .app-hero.hero-fixo .hub-status{position:absolute;top:-30px;left:0;width:100%;margin:0;text-align:center}
html[data-app="voice"] .hub-app-page .app-hero.hero-fixo .hero-card>.wrap{padding-top:0}

/* A softer orange feature surface without the navy mix that produced brown. */
html:is([data-app="tasks"],[data-app="chat"],[data-app="voice"],[data-app="implantacao"],[data-app="email"],[data-app="agenda"],[data-app="helpdesk"]) .hub-app-page #funcionalidades .mf-grid .mf-accent {
 background:radial-gradient(ellipse at 8% 57%,#fff0d480,transparent 65%),linear-gradient(135deg,#ffd49b,#ffb957 58%,#ffce8b);
 border-color:#f4bf78;
}
html:is([data-app="tasks"],[data-app="chat"],[data-app="voice"],[data-app="implantacao"],[data-app="email"],[data-app="agenda"],[data-app="helpdesk"]) .hub-app-page #funcionalidades .mf-accent .mf-copy h3 { color:#392713; }
html:is([data-app="tasks"],[data-app="chat"],[data-app="voice"],[data-app="implantacao"],[data-app="email"],[data-app="agenda"],[data-app="helpdesk"]) .hub-app-page #funcionalidades .mf-accent .mf-copy>p { color:#51391e; }

/* Keep paired hero cards separate on compact phones. */
@media(max-width:360px){
 html[data-app="crm"] .app-hero .orb-card{transform:scale(.56)}
 html[data-app="mdc"] .app-hero .mhf-c2{top:25%;right:1%}
}