/* Direção B: Andamento
   Tinta navy sobre branco, uma família (Archivo com eixo de largura), a linha de andamento do caso como assinatura
   e um só campo de cor forte: a tela única na prática, sobre o lima. */

:root{
  --navy:#001B3D;
  --papel:#FFFFFF;
  --lima:#C1FF72;
  --verde:#1A8C59;
  --verde-texto:#146E46;
  --nevoa:#EDF1F4;
  --ardosia:#4A5B6E;
  --linha:#D3DBE3;
  --sombra:0 28px 56px -30px rgba(0,27,61,.38),0 2px 6px rgba(0,27,61,.06);
  --g:18px;
  --sec:64px;
  --t1:clamp(42px,6.1vw,88px);
  --t2:clamp(34px,4.4vw,62px);
  --t3:clamp(22px,2.1vw,30px);
  --t4:clamp(18px,1.4vw,20px);
  --t5:clamp(16px,1.2vw,17px);
  color-scheme:light;
}
@media (min-width:760px){:root{--g:40px;--sec:88px}}
@media (min-width:1100px){:root{--g:64px;--sec:96px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth}
body{margin:0;background:var(--papel);color:var(--navy);font-family:Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;font-stretch:100%;font-size:var(--t5);line-height:1.55;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
figure{margin:0}
h1,h2,h3,h4,p,dl,dd,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit}
b,strong{font-weight:620}
.lar{width:min(1280px,calc(100% - 2 * var(--g)));margin-inline:auto}

.pular{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 16px;border-radius:999px;background:var(--navy);color:#fff;font-weight:600;text-decoration:none}
.pular:focus{top:12px}
:focus-visible{outline:2px solid transparent;box-shadow:0 0 0 2px var(--papel),0 0 0 4px var(--navy),0 0 0 6px var(--lima);border-radius:6px}
.bt:focus-visible{border-radius:999px}

/* ---------- tipografia ---------- */
.h1{font-size:var(--t1);font-stretch:72%;font-weight:640;line-height:.95;letter-spacing:-.018em;text-wrap:balance}
.h2{font-size:var(--t2);font-stretch:74%;font-weight:620;line-height:1;letter-spacing:-.015em;text-wrap:balance;max-width:12.5em}
.h3{font-size:var(--t3);font-stretch:86%;font-weight:600;line-height:1.12;letter-spacing:-.008em;text-wrap:balance}
.lead{font-size:var(--t4);line-height:1.5;color:var(--ardosia);max-width:34em;text-wrap:pretty}
.nota{font-size:14px;color:var(--ardosia);margin-top:20px}

/* ---------- botões e links ---------- */
.bt{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:999px;font:inherit;font-size:17px;font-weight:600;line-height:1.1;text-decoration:none;text-align:center;cursor:pointer;transition:background-color .15s,color .15s,transform .1s;-webkit-tap-highlight-color:transparent}
.bt:active{transform:translateY(1px)}
.bt-cheio{background:var(--navy);color:#fff;border:0}
.bt-cheio:hover{background:#00152F}
.bt-contorno{background:transparent;color:var(--navy);border:1.5px solid var(--navy)}
.bt-contorno:hover{background:rgba(0,27,61,.08)}
.lk{color:var(--verde-texto);font-weight:580;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.lk:hover{color:var(--navy)}

/* ---------- topo ---------- */
/* 08/10: o topo fica preso também no celular (pedido do Fabio: ao escolher uma seção no menu, a barra sumia) */
.topo{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px)}
.topo-in{display:flex;align-items:center;gap:28px;height:76px}
.topo-marca{display:block;flex:none;margin-right:auto}
.topo-marca img{width:clamp(168px,47vw,184px);height:auto}
.topo-nav{display:none;gap:30px;font-size:15px;font-weight:560}
.topo-nav a{text-decoration:none;padding:6px 0;border-bottom:1.5px solid transparent}
.topo-nav a:hover{border-color:var(--navy)}
.topo-bt{display:none;min-height:44px;padding:0 20px;font-size:15px}
.menu-bt{appearance:none;border:0;background:none;font:inherit;font-size:17px;font-weight:600;color:var(--navy);padding:12px 2px;cursor:pointer}
@media (min-width:900px){
  .topo-in{height:88px}
  .topo-marca img{width:200px}
  .topo-nav{display:flex}
  .topo-bt{display:inline-flex}
  .menu-bt{display:none}
}
.menu{position:fixed;inset:76px 0 0;z-index:40;background:#fff;padding:24px var(--g) 40px;display:flex;flex-direction:column;gap:32px;overflow:auto}
.menu[hidden]{display:none}
.menu-lista{display:flex;flex-direction:column}
.menu-lista a{display:block;padding:12px 0;font-size:30px;font-stretch:78%;font-weight:600;line-height:1.1;text-decoration:none}
.menu-cta{align-self:stretch}
/* 08/10: a trava fica no html. No body ela criava uma rolagem própria (o html tem overflow-x:clip), e o topo,
   com o "Fechar", ia para o começo da página, fora da tela */
html.menu-aberto{overflow:hidden}

/* ---------- linha de andamento (a assinatura) ---------- */
.and{margin-bottom:clamp(28px,3.4vw,44px)}
.and-trilho{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:700px}
.and-trilho li{position:relative;padding-top:36px;font-size:15px;font-weight:560;line-height:1.2;color:var(--ardosia)}
.and-trilho li::before{content:"";position:absolute;left:12px;top:11px;width:100%;height:2px;background:var(--linha)}
.and-trilho li:last-child::before{display:none}
.and-trilho li.feito::before{background:var(--verde)}
.and-trilho li.feito,.and-trilho li.agora{color:var(--navy)}
.and-trilho li>i,.marco>i,.mapa .mk,.vj li>i,.tc-j li>i,.tu-p>i,.vd-p>i{position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px #9AA8B8}
.and-trilho li.feito>i,.marco.feito>i,.mapa .feito .mk,.vj .feito>i,.tc-j .feito>i,.tu-p.feito>i,.vd-p.feito>i{background:var(--verde);box-shadow:none}
.and-trilho li.feito>i::after,.marco.feito>i::after,.mapa .feito .mk::after,.vj .feito>i::after,.tc-j .feito>i::after,.tu-p.feito>i::after,.vd-p.feito>i::after{content:"";position:absolute;left:36%;top:22%;width:26%;height:44%;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
/* a etapa atual: ponto navy com o miolo lima, como o ponto do logotipo */
.and-trilho li.agora>i,.marco.agora>i,.mapa .agora .mk,.vj .agora>i,.tc-j .agora>i,.tu-p.agora>i,.vd-p.agora>i{background:var(--navy);box-shadow:none}
.and-trilho li.agora>i::after,.marco.agora>i::after,.mapa .agora .mk::after,.vj .agora>i::after,.tc-j .agora>i::after,.tu-p.agora>i::after,.vd-p.agora>i::after{content:"";position:absolute;inset:28%;border-radius:50%;background:var(--lima)}
.and-frase{margin-top:12px;max-width:34em;font-size:17px;font-weight:400;line-height:1.45;color:var(--ardosia);text-wrap:pretty}
@media (max-width:759px){
  .and-trilho li{padding-top:30px;font-size:13px;font-stretch:86%}
  .and-trilho li>i{width:20px;height:20px}
  .and-trilho li::before{left:10px;top:9px}
}

/* ---------- seções ---------- */
.sec{padding-block:calc(var(--sec) / 2)}
section{overflow-x:clip}

/* ---------- capa: só texto ---------- */
.capa{padding:20px 0 44px}
.capa-grade{display:grid;gap:22px}
.capa-h{font-size:clamp(42px,12.6vw,54px);font-stretch:70%;font-weight:650;line-height:.94;letter-spacing:-.02em;text-wrap:balance;max-width:11em}
.pt{display:inline-block;width:.19em;height:.19em;margin-left:.05em;border-radius:50%;background:var(--lima);box-shadow:0 0 0 .025em rgba(0,27,61,.25)}
.ab-l{display:block}
.capa-txt{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.capa-p{font-size:clamp(18px,1.45vw,21px);line-height:1.5;color:var(--ardosia);max-width:31em;text-wrap:pretty}
.capa-bt{min-height:54px;padding:0 30px}
.parc{display:grid;gap:12px}
.rod-parc{padding-bottom:32px;margin-bottom:32px;border-bottom:1px solid var(--linha)}
.rod-parc .parc-t{font-size:14px;font-weight:560}
.rod-parc .parc-item{grid-template-columns:minmax(0,1fr);gap:10px;align-items:start;padding:18px 18px;border-radius:14px}
.rod-parc .parc-n{font-size:26px}
.parc-lk{display:inline-block;margin-top:6px;font-weight:600;color:var(--navy);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.parc-obs{display:block;margin-top:6px;font-weight:560;color:var(--navy)}
.parc-logo{display:block;width:100%;max-width:72px;height:auto}
.rod-parc .parc-d{font-size:14px}
.rod-parc .parc-d b{font-size:15px}
@media (min-width:900px){.rod-parc .parc-lista{grid-template-columns:1fr 1fr;gap:16px}.rod-parc .parc-item{grid-template-columns:88px minmax(0,1fr);gap:18px;align-items:center;padding:14px 18px}}
.parc-t{font-size:15px;font-weight:600;line-height:1.2;color:var(--ardosia)}
.parc-lista{display:grid;gap:10px}
.parc-item{display:grid;grid-template-columns:92px minmax(0,1fr);gap:16px;align-items:center;padding:16px 18px;border-radius:16px;background:var(--nevoa)}
.parc-n{font-size:32px;font-stretch:74%;font-weight:700;line-height:1;letter-spacing:-.012em}
.parc-d{font-size:15px;line-height:1.4;color:var(--ardosia)}
.parc-d b{display:block;margin-bottom:2px;font-size:17px;font-weight:620;color:var(--navy)}
@media (min-width:900px){
  .capa{padding:64px 0 88px}
  .capa-grade{row-gap:40px;align-items:start}
  .capa-h{grid-column:1 / -1;font-size:clamp(64px,7.5vw,116px);max-width:12em}
  .capa-txt{gap:30px}
  .capa-bt{min-height:56px}
}

/* ---------- a tela única (logo depois da capa) ---------- */
.ab{padding:36px 0 36px;border-top:1px solid var(--linha)}
.ab-grade{display:flex;flex-direction:column}
.ab-txt{display:flex;flex-direction:column;gap:20px}
.ab-p{font-size:var(--t4);line-height:1.5;color:var(--ardosia);max-width:30em;text-wrap:pretty}
.ab-p-pc{display:none}
.ab-acoes{display:flex;align-items:center;flex-wrap:wrap;gap:16px 28px}
.ab-acoes{display:none}
.ab-palco{display:none}
.ab-cel{position:relative;container-type:inline-size;margin-top:6px}
.ab-p-cel{margin-top:18px}

/* o produto: o logotipo ArtONE em Poppins com o ponto lima */
.art{display:inline-flex;align-items:baseline;gap:.12em;font-family:Poppins,Archivo,sans-serif;font-weight:700;letter-spacing:-.02em;line-height:1;color:var(--navy)}
.art i{width:.32em;height:.32em;border-radius:50%;background:#9BD84E}

/* telas de exemplo: são imagem, não interface; nada nelas recebe toque */
.jan,.tu,.tc,.pg,.pc,.vd,.vd-cartao,.fone-tela,.cf{pointer-events:none;-webkit-user-select:none;user-select:none}

/* computador: a tela única inteira dentro da grade */
@media (min-width:900px){
  .ab{padding:72px 0 80px}
  .ab-grade{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px;align-items:start}
  .ab-txt{padding-top:28px;gap:26px}
  .ab-p-pc{display:block}
  .ab-p-cel,.ab-cel{display:none}
  .ab-acoes{display:flex}
  .ab-palco{display:block;position:relative;padding-top:18px}
}
/* a janela é desenhada para 780 unidades de largura; --min segura a letra mínima de 12 px na abertura */
.jan{--u:calc(100cqw / 780);--min:0px;position:relative;width:100%;aspect-ratio:780/500;container-type:inline-size;background:#F3F5F8;border:1px solid #D8DFE7;border-radius:16px;box-shadow:var(--sombra);display:flex;flex-direction:column;line-height:1.3;color:#1B2433}
.ab-palco .jan{--min:12px}
.jan>*{font-size:max(var(--min),calc(var(--u) * 13))}
.jan-topo{flex:none;height:calc(var(--u) * 46);display:flex;align-items:center;gap:calc(var(--u) * 12);padding:0 calc(var(--u) * 16);background:#fff;border-bottom:1px solid #E3E8EF;border-radius:16px 16px 0 0;white-space:nowrap}
.jan-topo .art{font-size:max(15px,calc(var(--u) * 18))}
.jan-nb .jan-topo .art{font-size:calc(var(--u) * 18)}
.jan-nome{padding-left:calc(var(--u) * 12);border-left:1px solid #E3E8EF;color:#5D6B80}
.jan-caso{margin-left:auto;color:#5D6B80;overflow:hidden;text-overflow:ellipsis}
.jan-eu{flex:none;width:calc(var(--u) * 28);height:calc(var(--u) * 28);border-radius:50%;background:var(--navy);color:#fff;font-size:max(var(--min),calc(var(--u) * 11));font-weight:600;display:flex;align-items:center;justify-content:center}
.jan-zonas{flex:1;min-height:0;display:grid;grid-template-columns:270fr 270fr 216fr;grid-template-rows:auto 1fr;gap:calc(var(--u) * 16) calc(var(--u) * 10);padding:calc(var(--u) * 22) calc(var(--u) * 12) calc(var(--u) * 12)}
.z{position:relative;min-width:0;min-height:0;background:#fff;border:1px solid #DCE3EA;border-radius:calc(var(--u) * 12);padding:calc(var(--u) * 22) calc(var(--u) * 12) calc(var(--u) * 12)}
.z1,.z2{grid-row:1 / 3}
/* etiqueta colada à borda de cada zona */
.z-rot{position:absolute;left:calc(var(--u) * 12);top:calc(var(--u) * -11);padding:calc(var(--u) * 3) calc(var(--u) * 10);border-radius:999px;background:var(--navy);color:#fff;font-family:Archivo,sans-serif;font-size:max(var(--min),calc(var(--u) * 13));font-weight:600;line-height:1.2;white-space:nowrap}
/* Atualizações: o que a conversa no WhatsApp acionou na tela única (a conversa fica no celular do cliente) */
.zev-lista{display:flex;flex-direction:column;gap:calc(var(--u) * 8)}
.zev{display:flex;flex-direction:column;align-items:flex-start;padding:calc(var(--u) * 8) calc(var(--u) * 10);border:1px solid #DCE3EA;border-radius:calc(var(--u) * 9);font-size:max(var(--min),calc(var(--u) * 13));line-height:1.3}
.zev small{font-size:max(var(--min),calc(var(--u) * 11.5));color:#5D6B80}
.zev b{font-weight:620;color:#1B2433}
.zev em{margin-top:calc(var(--u) * 5);padding:calc(var(--u) * 2) calc(var(--u) * 8);border-radius:999px;background:#E3F4EA;color:var(--verde-texto);font-style:normal;font-size:max(var(--min),calc(var(--u) * 12));font-weight:600;line-height:1.3}
.zev.novo{border-color:var(--navy);box-shadow:inset calc(var(--u) * 3) 0 0 var(--navy)}
.zev.novo em{background:var(--navy);color:#fff}
.zev.dep{border-style:dashed}
.zev.dep b{color:#5D6B80}
.zev.dep em{background:#EEF1F5;color:#3A4A5E}
.vj-tag{display:inline-block;margin-top:calc(var(--u) * 5);padding:calc(var(--u) * 2) calc(var(--u) * 8);border-radius:999px;background:var(--lima);color:var(--navy);font-size:max(var(--min),calc(var(--u) * 11.5));font-weight:620;line-height:1.3}
/* coluna Jornada: a mesma linha de andamento, na vertical */
.vj{position:relative;display:flex;flex-direction:column}
.vj li{position:relative;padding:0 0 calc(var(--u, 1px) * 12) calc(var(--u, 1px) * 30);min-height:calc(var(--u, 1px) * 40)}
.vj li>i{width:calc(var(--u, 1px) * 20);height:calc(var(--u, 1px) * 20)}
.vj li::before{content:"";position:absolute;left:calc(var(--u, 1px) * 9.25);top:calc(var(--u, 1px) * 20);bottom:0;width:calc(var(--u, 1px) * 1.5);min-width:1.5px;background:var(--linha)}
.vj li.feito::before{background:var(--verde)}
.vj li:last-child::before{display:none}
.vj b{display:block;font-size:max(var(--min,0px),calc(var(--u, 1px) * 14));font-weight:650;line-height:1.2;padding-top:calc(var(--u, 1px) * 1)}
.vj small{display:block;font-size:max(var(--min,0px),calc(var(--u, 1px) * 12));color:#5D6B80;line-height:1.3}
.vj li:not(.feito):not(.agora) b{color:#5D6B80}
.vj .agora{padding-bottom:calc(var(--u) * 14)}
.vj-conf{display:flex;align-items:center;gap:calc(var(--u) * 6);margin-top:calc(var(--u) * 6);padding:calc(var(--u) * 6) calc(var(--u) * 6) calc(var(--u) * 6) calc(var(--u) * 9);border:1px solid #DCE3EA;border-radius:calc(var(--u) * 7);font-size:max(var(--min),calc(var(--u) * 12))}
.vj-conf:first-of-type{margin-top:calc(var(--u) * 8)}
.vj-conf em{margin-left:auto;font-style:normal;padding:calc(var(--u) * 2) calc(var(--u) * 7);border-radius:calc(var(--u) * 5);font-size:max(var(--min),calc(var(--u) * 11.5));font-weight:600;line-height:1.25;background:#EEF1F5;color:#3A4A5E}
.vj-conf em.ap{background:var(--navy);color:#fff}
.vj-conf em.ok{background:#E3F4EA;color:var(--verde-texto)}
.zl{display:flex;align-items:center;gap:calc(var(--u) * 9);padding:calc(var(--u) * 7) 0;border-bottom:1px solid #EEF1F5;font-size:max(var(--min),calc(var(--u) * 12));line-height:1.25;color:#5D6B80}
.zl:last-child{border-bottom:0}
.zl>i{flex:none;width:calc(var(--u) * 26);height:calc(var(--u) * 26);border-radius:calc(var(--u) * 7);background:#EDF1F5;color:var(--navy);font-style:normal;font-size:calc(var(--u) * 9.5);font-weight:700;display:flex;align-items:center;justify-content:center}
.zl>span{display:flex;flex-direction:column;min-width:0}
.zl b{font-weight:600;color:#1B2433;font-size:max(var(--min),calc(var(--u) * 13))}
.zl b.v{color:var(--verde-texto)}
.zk{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u) * 6)}
.zk span{display:flex;flex-direction:column;padding:calc(var(--u) * 6) calc(var(--u) * 8);border:1px solid #EEF1F5;border-radius:calc(var(--u) * 7);font-size:max(var(--min),calc(var(--u) * 12));line-height:1.25;color:#5D6B80}
.zk b{font-size:max(18px,calc(var(--u) * 21));font-weight:600;font-stretch:88%;color:#1B2433;font-variant-numeric:tabular-nums;margin-top:calc(var(--u) * 2);white-space:nowrap}
.jan-nb .zk b{font-size:calc(var(--u) * 21)}
.zb{display:flex;align-items:flex-end;gap:calc(var(--u) * 6);height:calc(var(--u) * 40);margin-top:calc(var(--u) * 10)}
.zb i{flex:1;height:var(--h);border-radius:calc(var(--u) * 3) calc(var(--u) * 3) 0 0;background:#D6DFEA}
.zb i.u{background:var(--navy)}

/* o celular do cliente: o aparelho renderizado, só a metade de cima, com o balão que ele mandou */
.cf{--w:112px;position:relative;flex:none;width:var(--w);height:calc(var(--w) * 1.3);margin:0;-webkit-mask-image:linear-gradient(#000 74%,transparent);mask-image:linear-gradient(#000 74%,transparent)}
.cf img{position:absolute;left:0;top:0;width:var(--w);height:calc(var(--w) * 2.0044);max-width:none;filter:drop-shadow(0 8px 12px rgba(0,27,61,.2))}
.cf-tela{position:absolute;z-index:1;left:calc(var(--w) * .0729);top:calc(var(--w) * .078);width:calc(var(--w) * .8541);height:calc(var(--w) * 1.848);border-radius:calc(var(--w) * .112);overflow:hidden;background:#EFEAE2;display:flex;flex-direction:column;gap:8px;color:#111}
.cf img{z-index:2}
.cf-top{display:flex;align-items:center;gap:4px;padding:calc(var(--w) * .1) 5px 6px;background:#F7F7F7;border-bottom:1px solid #E2E2E2;font-size:11px;font-weight:620;line-height:1.1;white-space:nowrap}
.cf-top i{flex:none;width:15px;height:15px;border-radius:50%;background:var(--navy);color:var(--lima);font-style:normal;font-size:7px;font-weight:700;display:flex;align-items:center;justify-content:center}
.cf-bal{align-self:flex-end;margin-right:5px;max-width:calc(100% - 10px);padding:5px 6px;border-radius:9px 9px 2px 9px;background:#D9FDD3;font-size:12px;line-height:1.25;color:#3B4A54;box-shadow:0 1px .5px rgba(0,0,0,.08)}
.cf-bal b{display:block;font-size:12.5px;font-weight:650;color:#111}
.cli{position:relative;z-index:3;display:flex;align-items:flex-start;gap:16px}
.cli p{font-size:15px;line-height:1.4;color:var(--ardosia);text-wrap:pretty}
.cli .fio{position:absolute;display:block;width:0;border-left:2px solid var(--verde)}
.leva{position:absolute;display:block;left:-1px;top:0;width:0;height:100%}
.leva i{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:var(--verde);box-shadow:0 0 0 2px #fff,0 0 0 5px rgba(193,255,114,.9)}

/* computador: o celular sai de baixo da tela, embaixo da Conversa; a legenda fica à esquerda dele, alinhada à borda da tela */
.cli-pc{margin-top:22px;padding-left:2px}
.cli-pc .cf{--w:128px;order:2}
.cli-pc p{order:1;width:168px;padding-top:28px}
.cli-pc .fio{left:calc(2px + 168px + 16px + 63px);bottom:100%;height:calc(22px + 13px)}

/* celular: o notebook de frente (imagem aprovada) com a tela única de bolso */
.nb{--nf-x:15.71%;--nf-y:5.82%;--nf-w:68.51%;--nf-h:68.64%;position:relative;width:135.24%;margin-left:-17.62%;aspect-ratio:1.6029}
.nb-img{position:absolute;inset:0;width:100%;height:100%;max-width:none;z-index:2;pointer-events:none}
.nb::after{content:"";position:absolute;z-index:1;left:5%;right:5%;top:92.4%;height:5.6%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,27,61,.12),rgba(0,27,61,0));pointer-events:none}
.nb-vao{position:absolute;z-index:1;left:calc(var(--nf-x) - 1px);top:calc(var(--nf-y) - 1px);width:calc(var(--nf-w) + 2px);height:calc(var(--nf-h) + 2px);container-type:size;overflow:hidden;border-radius:3px;background:#F5F7FA}
/* o celular do cliente fica na frente da base do notebook, ligado à zona Conversa */
.cli-cel{margin-top:-14.4%}
.cli-cel .cf{margin-left:9%}
.cli-cel p{flex:1;margin-top:calc(14.4% + 8px)}
.cli-cel .fio{left:calc(9% + 55px);bottom:100%;height:calc(7.6cqw + 4px)}

/* tela de bolso: desenhada para 332 x 207,5 (o vão do notebook); toda medida é N x --u */
.tu{--u:calc(100cqw / 332);position:absolute;inset:0;display:flex;flex-direction:column;background:#F3F5F8;color:#1B2433;font-size:calc(var(--u) * 11);line-height:1.25}
.tu-barra{flex:none;height:calc(var(--u) * 22);display:flex;align-items:center;gap:calc(var(--u) * 7);padding:0 calc(var(--u) * 6) 0 calc(var(--u) * 8);background:#fff;border-bottom:1px solid #E3E8EF;white-space:nowrap}
.tu-barra .art{font-size:calc(var(--u) * 12)}
.tu-nome{font-size:calc(var(--u) * 10);color:#5D6B80;padding-left:calc(var(--u) * 7);border-left:1px solid #E3E8EF}
.tu-eu{margin-left:auto;display:flex;align-items:center;gap:calc(var(--u) * 5);font-size:calc(var(--u) * 10)}
.tu-eu i{width:calc(var(--u) * 16);height:calc(var(--u) * 16);border-radius:50%;background:var(--navy);color:#fff;font-style:normal;font-size:max(7px,calc(var(--u) * 7.5));font-weight:600;display:flex;align-items:center;justify-content:center}
.tu-zonas{flex:1;min-height:0;display:grid;grid-template-columns:124fr 108fr 100fr;grid-template-rows:1fr 1fr;gap:calc(var(--u) * 4);padding:calc(var(--u) * 4)}
.tu-z{position:relative;min-width:0;min-height:0;border-radius:calc(var(--u) * 7);padding:calc(var(--u) * 18) calc(var(--u) * 6) calc(var(--u) * 6);background:#fff;border:1px solid #DCE2EA;overflow:hidden}
.tu-z1,.tu-z2{grid-row:1 / 3}
.tu-rot{position:absolute;left:calc(var(--u) * 6);top:calc(var(--u) * 5);font-size:max(8.5px,calc(var(--u) * 9.5));font-weight:650;line-height:1;color:var(--navy);white-space:nowrap}
.tu-ev{display:block;margin-top:calc(var(--u) * 5);padding:calc(var(--u) * 4) calc(var(--u) * 6);border:1px solid #DCE2EA;border-radius:calc(var(--u) * 6);font-size:calc(var(--u) * 10.5);line-height:1.2;color:#1B2433}
.tu-ev small{display:block;margin-bottom:calc(var(--u) * 1);font-size:max(8px,calc(var(--u) * 8.5));color:#5D6B80}
.tu-ev b{display:block;width:max-content;max-width:100%;margin-top:calc(var(--u) * 3);padding:calc(var(--u) * 1.5) calc(var(--u) * 5);border-radius:calc(var(--u) * 4);background:#E3F4EA;color:var(--verde-texto);font-size:calc(var(--u) * 9.5);font-weight:650}
.tu-ev.novo{border-color:var(--navy);box-shadow:inset calc(var(--u) * 2) 0 0 var(--navy)}
.tu-ev.novo b{background:var(--navy);color:#fff}
.tu-p.tu-novo{background:#EEFCDD;border-radius:calc(var(--u) * 6);margin-left:calc(var(--u) * -3);margin-right:calc(var(--u) * -3);padding-left:calc(var(--u) * 22)}
.tu-p.tu-novo>i{left:calc(var(--u) * 3)}
.tu-p{position:relative;display:block;padding:calc(var(--u) * 3) 0 calc(var(--u) * 3) calc(var(--u) * 19);margin-top:calc(var(--u) * 5);font-size:calc(var(--u) * 11.5);font-weight:560;line-height:1.2;color:#5D6B80;white-space:nowrap}
.tu-p>i{width:calc(var(--u) * 14);height:calc(var(--u) * 14);top:calc(var(--u) * 2)}
.tu-p.feito{color:var(--verde-texto)}
.tu-p.agora{color:#fff;background:var(--navy);border-radius:calc(var(--u) * 6);margin-left:calc(var(--u) * -3);margin-right:calc(var(--u) * -3);padding-left:calc(var(--u) * 22);padding-block:calc(var(--u) * 5)}
.tu-p.agora>i{left:calc(var(--u) * 3);top:calc(var(--u) * 3.5);background:#fff}
.tu-p.agora>i::after{inset:24%;background:var(--navy);box-shadow:0 0 0 calc(var(--u) * 1.6) var(--lima)}
.tu-p::before{content:"";position:absolute;left:calc(var(--u) * 6.5);top:calc(var(--u) * -4);height:calc(var(--u) * 5);width:1px;background:var(--linha)}
.tu-p.feito+.tu-p::before{background:var(--verde)}
.tu-z2 .tu-rot+.tu-p::before{display:none}
.tu-prazo{position:absolute;left:calc(var(--u) * 6);bottom:calc(var(--u) * 6);font-size:max(8px,calc(var(--u) * 9));font-weight:560;color:#5D6B80}
.tu-lin{display:flex;align-items:center;gap:calc(var(--u) * 5);font-size:calc(var(--u) * 10.5);line-height:1.15;margin-top:calc(var(--u) * 5)}
.tu-lin i{flex:none;width:calc(var(--u) * 16);height:calc(var(--u) * 16);border-radius:calc(var(--u) * 5);background:#EDF2F8;color:var(--navy);font-style:normal;font-size:max(7px,calc(var(--u) * 7));font-weight:700;display:flex;align-items:center;justify-content:center}
.tu-lin.v{color:var(--verde-texto)}
.tu-num{display:block;margin-top:calc(var(--u) * 2);font-size:calc(var(--u) * 24);font-weight:600;font-stretch:88%;line-height:1;font-variant-numeric:tabular-nums}
.tu-sub{display:block;margin-top:calc(var(--u) * 2);font-size:calc(var(--u) * 10);color:#5D6B80}
.tu-barras{position:absolute;right:calc(var(--u) * 6);bottom:calc(var(--u) * 6);display:flex;align-items:flex-end;gap:calc(var(--u) * 2);height:calc(var(--u) * 18)}
.tu-barras i{width:calc(var(--u) * 5);height:var(--h);border-radius:1px;background:#D5DEEA}
.tu-barras i:last-child{background:var(--navy)}

/* montagem da abertura: as zonas encaixam em meio segundo e o ponto sobe uma vez pelo fio; só transform e opacidade */
@keyframes jan-entra{from{opacity:0;transform:translateY(10px)}}
@keyframes zona-encaixa{from{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.94)}}
@keyframes some{from{opacity:0}}
@keyframes leva-sobe{0%{opacity:0;transform:translateY(100%)}12%{opacity:1;transform:translateY(100%)}99%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(0)}}
.leva{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .ab-palco .jan{animation:jan-entra .3s cubic-bezier(.2,.8,.2,1) both}
  .ab-palco .z{animation:zona-encaixa .5s cubic-bezier(.2,.8,.2,1) both}
  .ab-palco .z1{--dx:calc(var(--u) * 60);--dy:calc(var(--u) * 10);animation-delay:.05s}
  .ab-palco .z2{--dx:0px;--dy:calc(var(--u) * 30);animation-delay:.1s}
  .ab-palco .z3{--dx:calc(var(--u) * -50);--dy:calc(var(--u) * 30);animation-delay:.15s}
  .ab-palco .z4{--dx:calc(var(--u) * -50);--dy:calc(var(--u) * -30);animation-delay:.2s}
  .cli .cf,.cli p,.cli .fio{animation:some .3s ease .45s both}
  .cli .leva{animation:leva-sobe .7s ease-in-out .8s both}
  .ab-palco .vj-tag{animation:some .3s ease 1.45s both,chega-tag .7s ease 1.5s both}
  .ab-palco .zev.novo{animation:zona-encaixa .5s cubic-bezier(.2,.8,.2,1) 1.5s both;--dx:0px;--dy:calc(var(--u) * -8)}
  .ab-cel .nb-img{animation:jan-entra .3s cubic-bezier(.2,.8,.2,1) both}
  .ab-cel .tu-z>*{animation:jan-entra .34s cubic-bezier(.2,.8,.2,1) both}
  .ab-cel .tu-z1>*{animation-delay:.18s}.ab-cel .tu-z2>*{animation-delay:.24s}.ab-cel .tu-z3>*{animation-delay:.3s}.ab-cel .tu-z4>*{animation-delay:.36s}
  .ab-cel .tu-z1 .tu-novo{animation:jan-entra .34s cubic-bezier(.2,.8,.2,1) .18s both,chega-tu .7s ease 1.45s both}
  .ab-cel .tu-z2 .tu-ev.novo{animation:jan-entra .34s cubic-bezier(.2,.8,.2,1) 1.5s both}
  /* a montagem espera a seção aparecer na tela (ela vem depois da capa) */
  .js [data-ab]:not(.vivo) *{animation-play-state:paused!important}
}
@keyframes chega-tag{40%{box-shadow:0 0 0 calc(var(--u) * 5) rgba(193,255,114,.55)}100%{box-shadow:0 0 0 0 rgba(193,255,114,0)}}
@keyframes chega-tu{40%{box-shadow:0 0 0 calc(var(--u) * 3) rgba(193,255,114,1)}100%{box-shadow:0 0 0 0 rgba(193,255,114,0)}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:0s!important}
}


/* ---------- 01 conversas ---------- */
.conv-grade{display:grid;gap:28px}
.conv-txt{display:flex;flex-direction:column;gap:20px}
.grupos{display:grid;gap:20px}
.grupo h3{font-size:var(--t3);font-stretch:86%;font-weight:620;line-height:1.1}
.grupo p{margin-top:6px;color:var(--ardosia);max-width:30em}
@media (min-width:900px){
  .conv-grade{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"txt fones" "grupos fones";column-gap:48px;row-gap:40px;align-items:start}
  .conv-txt{grid-area:txt}
  .conv-fones{grid-area:fones}
  .grupos{grid-area:grupos;gap:26px}
}

/* o celular renderizado com a tela em HTML */
.fone{--cel-x:7.293%;--cel-y:3.892%;--cel-w:85.414%;--cel-h:92.216%;--cel-r:13.16%/6.08%;position:relative;aspect-ratio:900/1804;filter:drop-shadow(0 16px 16px rgba(0,27,61,.13))}
.fone-corpo{position:absolute;inset:0;width:100%;height:100%;max-width:none;z-index:2;pointer-events:none}
.fone-tela{position:absolute;left:var(--cel-x);top:var(--cel-y);width:var(--cel-w);height:var(--cel-h);border-radius:var(--cel-r);overflow:hidden;background:#EFEAE2;display:flex;flex-direction:column;container-type:inline-size;z-index:1;color:#111;line-height:1.34}
.zs{position:absolute;left:0;right:0;top:0;height:13cqw;display:flex;align-items:center;padding:0 8cqw 0 10cqw;font-size:4.4cqw;font-weight:600;z-index:3}
.zs span{margin-right:auto}
.zs i{width:7cqw;height:3.3cqw;border-radius:1cqw;background:#111;box-shadow:inset 0 0 0 .55cqw #F7F7F7,0 0 0 .4cqw #9A9A9A}
.zt{display:flex;align-items:center;gap:3cqw;padding:16cqw 4.5cqw 3cqw;background:#F7F7F7;border-bottom:1px solid #E2E2E2}
.zt-av{width:11cqw;height:11cqw;border-radius:50%;background:var(--navy);color:var(--lima);display:flex;align-items:center;justify-content:center;font-size:4cqw;font-weight:650;flex:none}
.zt-n{display:flex;flex-direction:column;line-height:1.2}
.zt-n b{font-size:5cqw;font-weight:620}
.zt-n span{font-size:3.9cqw;color:var(--verde-texto)}
.zc{flex:1;padding:4cqw 3.6cqw;display:flex;flex-direction:column;gap:2.6cqw;overflow:hidden}
.m{max-width:86%;padding:2.4cqw 3.2cqw;font-size:5cqw;line-height:1.34;box-shadow:0 1px .5px rgba(0,0,0,.08)}
.m b{display:block;font-size:3.9cqw;font-weight:650;color:#146B5E}
.m-c{align-self:flex-end;background:#D9FDD3;border-radius:3cqw 3cqw .7cqw 3cqw}
.m-e{align-self:flex-start;background:#fff;border-radius:3cqw 3cqw 3cqw .7cqw}
.m-s{align-self:center;padding:1.4cqw 3.2cqw;border-radius:2.3cqw;background:rgba(255,255,255,.92);font-size:4cqw;color:#4A5A62}
.m-cta{display:block;margin:2.4cqw -3.2cqw -2.4cqw;padding:2.6cqw 0;border-top:1px solid #E9EDEF;text-align:center;color:var(--verde-texto);font-weight:600;font-size:4.6cqw}
.m-resp{display:flex;flex-direction:column;min-width:60%}
.r-t{font-weight:620}
.r-d{font-size:4.3cqw;color:#3B4A54}
.zp{display:flex;align-items:center;gap:2.5cqw;padding:2.5cqw 3cqw 7cqw;background:#F7F7F7}
.zp span{flex:1;padding:2.4cqw 3.5cqw;border-radius:6cqw;background:#fff;font-size:4.4cqw;color:#7C8591}
.zp i{width:9cqw;height:9cqw;border-radius:50%;background:#1FA66A;flex:none}
/* o formulário (WhatsApp Flow) aberto */
.flow-veu{position:absolute;inset:0;background:rgba(11,20,26,.42);z-index:3}
.flow{position:absolute;left:0;right:0;bottom:0;height:84%;z-index:4;background:#fff;border-radius:5cqw 5cqw 0 0;display:flex;flex-direction:column;box-shadow:0 -8px 30px rgba(0,0,0,.18)}
.flow-topo{display:grid;grid-template-columns:8cqw 1fr 8cqw;align-items:center;padding:4cqw 4cqw 3.4cqw;border-bottom:1px solid #EEF0F1}
.flow-topo b{text-align:center;font-size:5cqw;font-weight:620}
.flow-x{width:3.8cqw;height:3.8cqw;position:relative}
.flow-x::before,.flow-x::after{content:"";position:absolute;left:0;right:0;top:1.6cqw;height:.55cqw;background:#54656F;transform:rotate(45deg)}
.flow-x::after{transform:rotate(-45deg)}
.flow-mais{justify-self:end;width:1cqw;height:1cqw;border-radius:50%;background:#54656F;box-shadow:0 -1.7cqw 0 #54656F,0 1.7cqw 0 #54656F}
.flow-corpo{flex:1;overflow:hidden;padding:4.6cqw 5cqw;display:flex;flex-direction:column;gap:2.6cqw}
.flow-corpo>*,.zc>*{flex-shrink:0}
.flow-h{font-size:5.8cqw;font-weight:620;line-height:1.2}
.flow-txt{font-size:4.4cqw;line-height:1.4;color:#54656F}
.flow-rot{font-size:4.2cqw;color:#54656F;margin-top:1.4cqw}
.flow-anexo{display:grid;grid-template-columns:7cqw 1fr;column-gap:3cqw;align-items:center;padding:2.6cqw 3cqw;border:1px solid #DDE3E6;border-radius:3cqw}
.flow-anexo i{grid-row:1 / span 2;position:relative;width:7cqw;height:7cqw;border-radius:50%;border:.5cqw dashed #9AA6AC}
.flow-anexo b{font-size:4.5cqw;font-weight:540;line-height:1.25}
.flow-anexo em{font-style:normal;font-size:3.9cqw;color:#7C8A91}
.flow-anexo.ok{border-color:#25D366;background:#F2FCF5}
.flow-anexo.ok i{border:0;background:#1DAA61}
.flow-anexo.ok i::after{content:"";position:absolute;left:2.4cqw;top:1.4cqw;width:1.9cqw;height:3.3cqw;border:solid #fff;border-width:0 .7cqw .7cqw 0;transform:rotate(45deg)}
.flow-anexo.ok em{color:var(--verde-texto)}
.flow-radios{display:flex;flex-direction:column;gap:2.2cqw}
.flow-radios i{font-style:normal;display:flex;align-items:center;gap:2.8cqw;font-size:4.5cqw}
.flow-radios i::before{content:"";flex:none;width:5cqw;height:5cqw;border-radius:50%;border:.55cqw solid #8696A0;box-sizing:border-box}
.flow-radios i.ok::before{border:1.4cqw solid #1DAA61}
.flow-chips{display:flex;flex-wrap:wrap;gap:2cqw}
.flow-chips i{font-style:normal;padding:1.8cqw 3.8cqw;border:1px solid #C9D2D7;border-radius:6cqw;font-size:4.4cqw}
.flow-chips i.ok{border-color:#1DAA61;background:#E7F8EE;color:#0B6E3E;font-weight:620}
.flow-campo{padding:2.6cqw 3cqw;border:1px solid #DDE3E6;border-radius:3cqw;font-size:4.5cqw}
.flow-pe{padding:3cqw 5cqw 6cqw;display:flex;flex-direction:column;align-items:center;gap:2.2cqw;border-top:1px solid #EEF0F1}
.flow-btn{width:100%;padding:3.3cqw 0;border-radius:7cqw;background:#1DAA61;color:#fff;text-align:center;font-weight:620;font-size:4.7cqw}
.flow-pe small{font-size:3.6cqw;color:#7C8A91}

/* os dois celulares: lado a lado no computador; no celular, o único arraste da página */
.trilho{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--g));padding:6px var(--g) 18px;scroll-padding-inline:var(--g);scrollbar-width:none;overscroll-behavior-x:contain}
.trilho::-webkit-scrollbar{display:none}
.fone-item{flex:0 0 84%;scroll-snap-align:start}
.fone-item figcaption{margin-top:14px;font-size:15px;line-height:1.45;color:var(--ardosia);max-width:24em}
.fone-item figcaption b{color:var(--navy)}
.pontos{display:flex;gap:8px;margin-top:2px}
.pontos i{width:8px;height:8px;border-radius:50%;background:#C3CDD8;transition:background-color .15s,width .15s}
.pontos i.on{width:22px;border-radius:4px;background:var(--navy)}
@media (min-width:600px){.fone-item{flex-basis:300px}}
@media (min-width:900px){
  .trilho{overflow:visible;margin:0;padding:0;gap:clamp(20px,3vw,40px);justify-content:flex-start}
  .fone-item{flex:0 0 clamp(250px,22vw,300px)}
  .pontos{display:none}
}

/* ---------- 02 tela única: o campo navy de borda a borda ---------- */
.tela{padding-block:calc(var(--sec) * .5)}
.campo{background:var(--navy);color:#fff;padding:56px 0 60px;overflow:clip}
.campo .h2,.campo .h3{color:#fff}
.campo .lead,.campo .estado-txt p{color:#C9D4E2}
.tela-cab{display:flex;flex-direction:column;gap:18px}
.tela-ap{display:none}
.pc-t2{margin-top:22px}
.estados{display:none}
.estado{display:grid;gap:18px}
.estado-txt{display:flex;flex-direction:column;gap:10px}
.estado-txt p{max-width:28em}
.marco{position:relative;display:inline-block;padding-left:30px;font-size:15px;font-weight:600;line-height:22px}
.marco>i{width:22px;height:22px}
.campo .marco{color:#fff}
/* no navy, a etapa atual inverte: ponto lima com o miolo navy */
.campo .marco.agora>i{background:var(--lima)}
.campo .marco.agora>i::after{background:var(--navy)}
.tela-pe{margin-top:48px}
.bt-claro{background:#fff;color:var(--navy);border:0}
.bt-claro:hover{background:var(--lima)}
.campo :focus-visible{box-shadow:0 0 0 2px var(--navy),0 0 0 4px var(--lima)}
@media (min-width:900px){
  .campo{padding:clamp(64px,7vw,96px) 0 clamp(56px,5vw,72px)}
  .tela-topo{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:24px;align-items:center}
  .tela-ap{display:block;position:relative;width:calc(100% + 150px);margin:-7% 0 -8% -70px;aspect-ratio:1600/1000}
  .estados{display:flex;flex-direction:column;gap:64px;margin-top:8px}
  .estado{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:56px;align-items:center}
  .tc-j{display:none}
}

/* 02 no celular: o formato da Direção A. Notebook com a tela única de bolso, letras A, B e C e cartões de arrastar */
.bolso-bloco{display:block;margin-top:8px}
@media (min-width:900px){.bolso-bloco{display:none}}
.bolso{margin-top:62px}
.bolso .nb-vao{background:#F5F7FA}
.bolso .nb-img{filter:drop-shadow(0 18px 24px rgba(0,0,0,.28));-webkit-mask-image:linear-gradient(90deg,transparent 4%,#000 17%,#000 83%,transparent 96%);mask-image:linear-gradient(90deg,transparent 4%,#000 17%,#000 83%,transparent 96%)}
.bolso::after{display:none}
@media (min-width:600px){.nb.bolso{width:min(100%,620px);margin-left:auto;margin-right:auto}}
.bal{display:inline-flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--lima);color:var(--navy);font-size:15px;font-weight:700;line-height:1;font-stretch:100%}
.bolso .bal{position:absolute;z-index:5;left:0;top:0;margin:-14px 0 0 -14px;box-shadow:0 0 0 3px var(--navy)}
.chamadas{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:4}
.chamadas path{fill:none;stroke:var(--lima);stroke-width:1.5}
.chamadas circle{fill:var(--navy);stroke:var(--lima);stroke-width:1.5}
/* a tela de bolso no caso do Marcos: três zonas lado a lado */
.tu-caso .tu-zonas{grid-template-columns:1.06fr 1fr 1fr;grid-template-rows:1fr}
.tu-caso .tu-z{padding:calc(var(--u) * 18) calc(var(--u) * 5) calc(var(--u) * 5)}
.tu-caso .tu-nome{color:#1B2433}
.tu-caso .tu-rot+.tu-p::before{display:none}
.tu-caso-l{display:block;margin-top:calc(var(--u) * 3);padding:calc(var(--u) * 4) calc(var(--u) * 5);border-radius:calc(var(--u) * 5);font-size:calc(var(--u) * 10);line-height:1.2;color:#4B5869}
.tu-caso-l b{display:block;font-size:calc(var(--u) * 11.5);font-weight:620;color:#1B2433}
.tu-sel{background:#EEF3FA;box-shadow:inset calc(var(--u) * 2.5) 0 0 var(--navy)}
.tu-doc{display:flex;align-items:center;gap:calc(var(--u) * 4);margin-top:calc(var(--u) * 5);font-size:calc(var(--u) * 10.5);line-height:1.2}
.tu-doc::before{content:"";flex:none;width:calc(var(--u) * 7);height:calc(var(--u) * 7);border-radius:50%;background:var(--verde)}
.tu-pela{display:block;width:max-content;margin-top:calc(var(--u) * 7);padding:calc(var(--u) * 2) calc(var(--u) * 6);border-radius:999px;background:var(--lima);color:var(--navy);font-size:max(8px,calc(var(--u) * 9));font-weight:650;line-height:1.2}
.tu-ap{display:block;width:max-content;margin-top:calc(var(--u) * 6);padding:calc(var(--u) * 4) calc(var(--u) * 9);border-radius:calc(var(--u) * 5);background:var(--navy);color:#fff;font-size:calc(var(--u) * 10.5);font-weight:600}
/* os cartões que se arrastam */
.dets-caixa{margin-top:26px}
.dets .det{flex:0 0 86%;scroll-snap-align:start;display:flex;flex-direction:column;margin:0}
@media (min-width:600px){.dets .det{flex-basis:340px}}
.det-leg{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;align-items:start;padding-bottom:18px;font-size:15px;line-height:1.45;color:#C9D4E2}
.det-leg::before{content:"";position:absolute;left:13.25px;top:30px;bottom:0;width:1.5px;background:var(--lima)}
.det-leg b{display:block;margin-bottom:2px;font-size:19px;font-stretch:88%;font-weight:620;line-height:1.2;color:#fff}
.tc-det{flex:1}
.tc-det .tc-corpo{gap:9px}
.tc-etapa{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;background:#F1FAF4;border:1px solid #BFE3CC}
.tc-etapa b{font-size:16px;font-weight:620}
.tc-etapa i{position:relative;flex:none;width:22px;height:22px;border-radius:50%;background:var(--verde)}
.tc-etapa i::after{content:"";position:absolute;left:8px;top:4.5px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.tc-etapa .tc-ok{margin-left:auto}
.campo .pontos{margin-top:4px}
.campo .pontos i{background:rgba(255,255,255,.32)}
.campo .pontos i.on{background:var(--lima)}
/* o notebook renderizado (notebook.webp, tela vazada) com a tela única em HTML no vão, posicionada pelo tela.json */
.ap-nb{position:absolute;inset:0}
.ap-corpo{position:absolute;inset:0;width:100%;height:100%;max-width:none;z-index:2}
.ap-vao{position:absolute;z-index:1;left:18.237%;top:20.959%;width:46.673%;height:46.673%;overflow:hidden;background:#F3F5F8;container-type:size}
.jan.jan-nb{height:100%;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none}
.jan-nb .jan-topo{border-radius:0}
.ap-fone{position:absolute;z-index:3;left:67.5%;top:25%;width:17%}

/* recortes da tela única, legíveis (a letra mínima é 13 px) */
.tc{background:#fff;border-radius:18px;box-shadow:0 26px 50px -28px rgba(0,27,61,.45),0 1px 3px rgba(0,27,61,.08);overflow:hidden;font-size:15px;line-height:1.35;color:#1B2433}
.tc-topo{display:flex;align-items:center;gap:12px;height:46px;padding:0 16px;border-bottom:1px solid #E6EBF0;white-space:nowrap}
.tc-topo .art{font-size:17px}
.tc-nome{padding-left:12px;border-left:1px solid #E3E8EF;color:#5D6B80;font-size:14px}
.tc-eu{margin-left:auto;width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center}
/* a coluna Jornada do produto, deitada: liga o recorte à linha de andamento da seção */
.tc-j{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:14px 16px 12px;background:#F6F8FA;border-bottom:1px solid #E6EBF0}
.tc-j li{position:relative;padding:24px 4px 0 0;font-size:13px;font-stretch:82%;font-weight:580;line-height:1.2;color:#5D6B80;min-width:0;overflow-wrap:anywhere}
.tc-j li>i{width:18px;height:18px}
.tc-j li::before{content:"";position:absolute;left:9px;top:8px;width:100%;height:2px;background:var(--linha)}
.tc-j li:last-child::before{display:none}
.tc-j li.feito::before{background:var(--verde)}
.tc-j li.feito,.tc-j li.agora{color:#1B2433}
.tc-corpo{padding:16px;display:flex;flex-direction:column;gap:10px}
.tc-2col{display:grid;gap:18px}
.tc-2col>div{display:flex;flex-direction:column;gap:8px}
.tc-cap{font-size:13px;font-weight:600;color:#5D6B80}
.tc-caso{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;padding:10px 12px;border:1px solid #E3E8EF;border-radius:12px}
.tc-caso b{font-weight:620}
.tc-caso small{grid-column:1;font-size:13px;color:#5D6B80}
.tc-caso em{grid-column:2;grid-row:1 / 3;font-style:normal;font-size:13px;font-weight:600;padding:4px 9px;border-radius:999px;background:#EEF1F5;color:#3A4A5E;white-space:nowrap}
.tc-caso em.ok{background:#E1F3E8;color:var(--verde-texto)}
.tc-caso em.al{background:#FCEBE5;color:#A3381C}
.tc-caso.sel{border-color:var(--navy);box-shadow:inset 3px 0 0 var(--navy)}
.tc-doc{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #EEF1F5}
.tc-doc:last-child{border-bottom:0}
.tc-doc i{position:relative;flex:none;width:18px;height:18px;border-radius:50%;background:var(--verde)}
.tc-doc i::after{content:"";position:absolute;left:6.5px;top:3.5px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.tc-doc small{margin-left:auto;font-size:13px;color:#5D6B80}
.tc-passo{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:var(--navy);color:#fff}
.tc-passo b{font-size:16px}
.tc-prazo,.tc-ok{margin-left:auto;font-size:13px;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--lima);color:var(--navy);white-space:nowrap}
.tc-ok{background:#E1F3E8;color:var(--verde-texto)}
.tc-conf{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;border:1px solid #E3E8EF;border-radius:12px}
.tc-conf em{font-style:normal;font-size:13px;font-weight:600;line-height:1.25;padding:2px 8px;border-radius:6px;background:#EEF1F5;color:#3A4A5E}
.tc-conf em:first-of-type{margin-left:auto}
.tc-conf em.ap{background:var(--navy);color:#fff}
.tc-conf em.ok{background:#E1F3E8;color:var(--verde-texto)}
.tc-zip{align-self:flex-start;font-size:13px;color:#5D6B80}
.tc-msg{align-self:flex-start;max-width:92%;padding:10px 12px;border-radius:12px 12px 12px 3px;background:#F1EEE8;font-size:15px}
.tc-dep{display:flex;align-items:center;gap:10px;font-size:14px;color:#5D6B80}
.tc-dep i{width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 2px #9AA8B8}
@media (min-width:560px){.tc-2col{grid-template-columns:1.25fr 1fr}}
@media (min-width:900px){.tc-corpo{padding:20px}}

/* ---------- 03 integrações e dados ---------- */
.integ-cab{display:flex;flex-direction:column;gap:18px}
.sist{margin-top:36px;display:grid;gap:14px}
.sist-t{font-size:17px;font-weight:600;line-height:1.35;max-width:24em}
.sist-lista{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px}
.sist-lista dt{font-size:var(--t4);font-weight:620;font-stretch:90%}
.sist-lista dd{font-size:15px;color:var(--ardosia)}
@media (min-width:900px){
  .integ-cab{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px;align-items:end}
  .sist{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px;align-items:start;margin-top:48px}
  .sist-lista{grid-template-columns:repeat(3,1fr);gap:20px 28px}
}
.portal-palco{display:none}
@media (min-width:900px){
  .portal-palco{display:block;margin-top:56px}
}
.pg{width:100%;background:var(--nevoa);border:1px solid #D3DBE3;border-radius:18px;overflow:hidden;font-size:14px;line-height:1.35;color:#1B2433}
.pg-topo{display:flex;align-items:center;gap:14px;height:56px;padding:0 24px;background:var(--navy);color:#fff}
.pg-raio{width:24px;height:24px;border-radius:7px;background:var(--lima);clip-path:polygon(55% 0,15% 58%,46% 58%,38% 100%,85% 38%,54% 38%,62% 0)}
.pg-topo b{font-size:16px;font-weight:620}
.pg-tag{padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.14);font-size:13px}
.pg-demo{margin-left:auto;font-size:13px;color:#C9D4E2}
.pg-abas{display:flex;align-items:center;gap:26px;padding:0 24px;border-bottom:1px solid #D3DBE3;background:#fff;font-size:14px;color:#5D6B80}
.pg-abas>i{font-style:normal;padding:16px 0 13px;border-bottom:3px solid transparent}
.pg-abas>i.on{color:var(--navy);font-weight:620;border-color:var(--navy)}
.pg-per{margin-left:auto;display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--nevoa)}
.pg-per i{font-style:normal;padding:4px 12px;border-radius:999px;font-size:13px}
.pg-per i.on{background:#fff;color:var(--navy);font-weight:620;box-shadow:0 1px 2px rgba(0,27,61,.12)}
.pg-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;padding:20px 24px 0}
.pg-kpis div{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:12px;background:#fff}
.pg-kpis span{font-size:13px;color:#5D6B80}
.pg-kpis b{font-size:30px;font-stretch:84%;font-weight:620;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--navy)}
.pg-kpis em{font-style:normal;font-size:13px;color:var(--verde-texto)}
.pg-linha{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:12px;padding:12px 24px 24px}
.pg-card{display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:12px;background:#fff}
.pg-ct{font-size:15px;font-weight:620}
.pg-ct2{margin-top:14px}
.pg-cs{font-size:13px;color:#5D6B80}
.pg-leg{display:flex;align-items:center;gap:6px 14px;font-size:13px;color:#5D6B80;margin-top:4px}
.pg-leg i{width:10px;height:10px;border-radius:3px;margin-right:-8px}
.pg-leg .c1{background:var(--navy)}.pg-leg .c2{background:var(--verde)}
.pg-barras{flex:1;display:flex;align-items:flex-end;gap:14px;min-height:150px;margin-top:12px;padding-bottom:22px;border-bottom:1px solid #E3E8EF;position:relative;background:repeating-linear-gradient(to top,transparent 0 21px,#EEF1F5 21px 22px,transparent 22px 25%) 0 0/100% calc(100% - 22px) no-repeat}
.pg-barras span{position:relative;flex:1;height:100%;display:flex;align-items:flex-end;justify-content:center;gap:4px}
.pg-barras i{width:40%;height:var(--h);border-radius:4px 4px 0 0;background:var(--navy)}
.pg-barras i.v{background:var(--verde)}
.pg-barras small{position:absolute;bottom:-22px;font-size:13px;color:#5D6B80}
.pg-funil,.pg-serv{display:flex;flex-direction:column;gap:9px;margin-top:6px}
.pg-funil span,.pg-serv span{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 8px;gap:4px 10px;align-items:center}
.pg-funil em,.pg-serv em{font-style:normal;font-size:13px;color:#3A4A5E}
.pg-funil b,.pg-serv b{font-size:13px;font-weight:620;font-variant-numeric:tabular-nums}
.pg-funil i,.pg-serv i{grid-column:1 / 3;height:8px;border-radius:4px;background:linear-gradient(var(--navy),var(--navy)) 0 0/var(--w) 100% no-repeat,var(--nevoa)}
.pg-funil i.v{background:linear-gradient(var(--verde),var(--verde)) 0 0/var(--w) 100% no-repeat,var(--nevoa)}
/* a troca do Marcos, marcada entre os serviços com o ponto da etapa */
.pg-serv .marcado em{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;color:#1B2433;font-weight:620}
.pg-serv .marcado u{position:relative;text-decoration:none;font-size:12.5px;font-weight:600;padding:2px 8px 2px 22px;border-radius:999px;background:var(--navy);color:#fff}
.pg-serv .marcado u::before{content:"";position:absolute;left:7px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:var(--lima)}
.pg-garg{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid #EEF1F5}
.pg-garg span{display:flex;flex-direction:column;flex:1}
.pg-garg b{font-weight:600}
.pg-garg small{font-size:13px;color:#5D6B80}
.pg-garg i{font-style:normal;min-width:36px;padding:4px 8px;border-radius:8px;background:#FCEBE5;color:#A3381C;font-weight:650;text-align:center;font-variant-numeric:tabular-nums}
.pg-nota{display:flex;align-items:baseline;gap:10px}
.pg-nota b{font-size:38px;font-stretch:80%;font-weight:620;line-height:1;font-variant-numeric:tabular-nums}
.pg-nota span{font-size:13px;color:#5D6B80}
.pg-com{display:flex;gap:10px;margin-top:8px;font-size:14px;line-height:1.4}
.pg-com i{flex:none;width:24px;height:24px;border-radius:7px;background:#E1F3E8;color:var(--verde-texto);font-style:normal;font-weight:650;font-size:13px;display:flex;align-items:center;justify-content:center}
@media (min-width:900px) and (max-width:1180px){
  .pg-kpis{grid-template-columns:repeat(3,1fr)}
  .pg-kpis div:nth-child(n+4){display:none}
  .pg-linha{grid-template-columns:1fr 1fr}
  .pg-linha .pg-graf{grid-column:1 / 3}
}
/* celular: o Portal em cartões empilhados, na largura toda */
.pg-cel{display:flex;flex-direction:column;gap:14px;margin-top:36px}
.pc{padding:16px 18px 8px;border-radius:18px;background:var(--nevoa);border:1px solid #D3DBE3;font-size:15px;line-height:1.35;color:#1B2433}
.pc-topo{display:flex;align-items:center;gap:10px;padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid #D3DBE3;font-size:15px}
.pc-topo .pg-raio{background:var(--navy)}
.pc-topo span:last-child{margin-left:auto;font-size:13px;font-weight:600;padding:2px 10px;border-radius:999px;background:#fff}
.pc-t{display:block;margin-bottom:12px;font-size:17px;font-weight:650}
.pc-kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pc-kpis span{display:flex;flex-direction:column;padding:12px 14px;border-radius:12px;background:#fff}
.pc-kpis small{font-size:13px;color:#5D6B80}
.pc-kpis b{font-size:28px;font-stretch:82%;font-weight:620;line-height:1.15;font-variant-numeric:tabular-nums}
.pc-kpis em{font-style:normal;font-size:13px;color:var(--verde-texto)}
.pc .pg-funil i,.pc .pg-serv i{background:linear-gradient(var(--navy),var(--navy)) 0 0/var(--w) 100% no-repeat,#fff}
.pc .pg-serv em{font-size:15px}
.pc .pg-garg{border-color:#DDE4EA}
.pc .pg-garg:last-child{border-bottom:0}
@media (min-width:900px){.pg-cel{display:none}}

/* ---------- 04 consultoria ---------- */
.cons-cab{display:flex;flex-direction:column;gap:18px}
.mapa-bloco{margin-top:40px;display:grid;gap:28px}
.mapa{display:flex;flex-direction:column}
.mapa li{position:relative;padding:0 0 26px 46px}
.mapa .mk{width:28px;height:28px}
.mapa li::before{content:"";position:absolute;left:13px;top:28px;bottom:0;width:2px;background:var(--linha)}
.mapa li.feito::before{background:var(--verde)}
.mapa li:last-child::before{display:none}
.mapa h3{font-size:var(--t3);font-stretch:80%;font-weight:620;line-height:28px}
.mapa dl{display:grid;gap:4px;margin-top:8px}
.mapa dl div{display:grid;grid-template-columns:96px 1fr;gap:10px}
.mapa dt{font-size:14px;color:var(--ardosia);padding-top:2px}
.mapa dd{font-size:16px;font-weight:500}
.mapa-vira{display:grid;gap:16px;padding-left:18px;border-left:3px solid var(--verde)}
.mapa-vira p{font-size:var(--t4);font-weight:560;max-width:18em}
.vj-mini{--u:1px;max-width:300px;padding:16px 16px 6px;border:1px solid #DCE3EA;border-radius:16px;background:#fff;box-shadow:0 18px 36px -24px rgba(0,27,61,.4)}
.vj-mini-t{display:inline-block;margin-bottom:14px;padding:3px 10px;border-radius:999px;background:var(--navy);color:#fff;font-size:13px;font-weight:600}
.vj-mini .vj b{font-size:15px}
.vj-mini .vj small{font-size:13px}
.passos-t{margin-top:56px;font-size:var(--t4);font-weight:620}
.passos{display:grid;gap:22px;margin:20px 0 40px}
.passos h4{font-size:var(--t3);font-stretch:80%;font-weight:640;line-height:1.1}
.passos p{margin-top:4px;color:var(--ardosia);max-width:30em}
@media (min-width:900px){
  .cons-cab{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px;align-items:end}
  .mapa-bloco{margin-top:56px;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:start}
  .mapa{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
  .mapa li{padding:46px 22px 0 0}
  .mapa li::before{left:14px;top:13px;bottom:auto;width:100%;height:2px}
  .mapa h3{font-size:30px;line-height:1.1}
  .mapa dl{gap:10px;margin-top:14px}
  .mapa dl div{display:flex;flex-direction:column;gap:0}
  .mapa-vira{padding-left:22px}
  .passos{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 48px;margin:24px 0 48px}
  .passos li{display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:baseline}
  .passos h4{font-size:30px}
}

/* ---------- 05 ArtONE e a Prateleira ---------- */
.art-cab{display:flex;flex-direction:column;gap:18px}
.prat-cab{margin-top:48px;display:grid;gap:10px}
.prat-cab .h3{font-size:clamp(26px,2.6vw,38px);font-stretch:78%}
.prat-cab p{color:var(--ardosia);max-width:36em}
.prat{display:flex;flex-direction:column;gap:20px;margin-top:24px;padding-top:24px;border-top:2px solid var(--navy)}
.prod{display:grid;gap:24px}
.prod-seg{font-size:15px;font-weight:600;color:var(--verde-texto)}
.prod-n{margin-top:4px;font-size:clamp(30px,3.2vw,44px);font-stretch:76%;font-weight:640;line-height:1.02}
.prod-txt{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.prod-txt>p:not(.prod-seg):not(.preco):not(.teste){color:var(--ardosia);max-width:30em}
.caps{display:grid;gap:10px;margin:4px 0 6px}
.caps div{display:grid;grid-template-columns:110px 1fr;gap:12px}
.caps dt{font-weight:620}
.caps dd{color:var(--ardosia)}
.prod-acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.prod-plat{margin-top:32px}
.prod-vis .nb-vendas{display:none}
.vd-cartao{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:14px;background:#fff;border:1.5px solid var(--navy);font-size:15px;line-height:1.35;color:#1B2433}
.vd-cartao .tc-j{background:#fff;border-radius:12px;border:0;padding:12px}
.vd-cap{font-size:13px;font-weight:600;color:#5D6B80}
.vd-op{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;padding:10px 12px;border:1px solid #E3E8EF;border-radius:12px;background:#fff}
.vd-op b{font-weight:620}
.vd-op small{grid-column:1;font-size:13px;color:#5D6B80}
.vd-op em{grid-column:2;grid-row:1 / 3;font-style:normal;font-size:13px;font-weight:600;padding:4px 9px;border-radius:999px;background:#EEF1F5;color:#3A4A5E;white-space:nowrap}
.vd-op em.ok{background:#E1F3E8;color:var(--verde-texto)}
.vd-op em.al{background:#FCEBE5;color:#A3381C}
.vd-op.sel{border-color:var(--navy);box-shadow:inset 3px 0 0 var(--navy)}
.vd-conf{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:#fff;border:1px solid #E3E8EF}
.vd-conf em{margin-left:auto;font-style:normal;font-size:13px;font-weight:600;line-height:1.25;padding:2px 8px;border-radius:6px;background:var(--navy);color:#fff}
.prod-saude{padding:28px 18px 0;border-radius:24px;background:var(--nevoa);overflow:hidden}
.preco{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:6px}
.preco span{font-size:var(--t4);color:var(--ardosia)}
.preco b{font-size:clamp(44px,4.4vw,62px);font-stretch:74%;font-weight:640;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.teste{font-size:15px;font-weight:560;margin-top:-4px}
.bt-saude{text-wrap:balance}
@media (max-width:759px){.bt-saude{min-height:48px;padding:13px 20px;font-size:16px;line-height:1.25;justify-content:flex-start;text-align:left}}
.prod-fone{width:min(84%,320px);margin-top:4px;margin-bottom:-26%}
@media (min-width:900px){
  .art-cab{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px;align-items:end}
  .prod-plat{margin-top:48px}
  .prat-cab{margin-top:88px;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px;align-items:baseline}
  .prat{gap:28px;margin-top:36px}
  .prod{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:56px;align-items:center}
  .prod-vis .nb-vendas{display:block;width:min(100%,720px);margin-left:auto}
  .vd-cartao{display:none}
  .prod-saude{grid-template-columns:minmax(0,6fr) minmax(0,5fr);padding:56px 56px 0;border-radius:32px;align-items:start}
  .prod-saude .prod-txt{padding-bottom:56px}
  .prod-fone{width:300px;justify-self:center;margin:0 0 -150px}
}
/* a tela de vendas da escola, dentro do notebook (computador) */
.nb.nb-vendas{margin-left:0;width:100%}
.nb-vendas .nb-vao{background:#F3F5F8}
.vd{--u:calc(100cqw / 560);position:absolute;inset:0;display:flex;flex-direction:column;font-size:calc(var(--u) * 11);line-height:1.3;color:#1B2433}
.vd-topo{flex:none;height:calc(var(--u) * 32);display:flex;align-items:center;gap:calc(var(--u) * 10);padding:0 calc(var(--u) * 12);background:#fff;border-bottom:1px solid #E3E8EF}
.vd-topo .art{font-size:calc(var(--u) * 14)}
.vd-nome{padding-left:calc(var(--u) * 10);border-left:1px solid #E3E8EF;color:#5D6B80}
.vd-eu{margin-left:auto;width:calc(var(--u) * 20);height:calc(var(--u) * 20);border-radius:50%;background:var(--navy);color:#fff;font-size:calc(var(--u) * 8);font-weight:600;display:flex;align-items:center;justify-content:center}
.vd-corpo{flex:1;min-height:0;display:grid;grid-template-columns:120fr 210fr 200fr;gap:calc(var(--u) * 8);padding:calc(var(--u) * 10)}
.vd-corpo>div{display:flex;flex-direction:column;gap:calc(var(--u) * 6);min-width:0;padding:calc(var(--u) * 10);background:#fff;border:1px solid #DCE3EA;border-radius:calc(var(--u) * 10)}
.nb-vendas .vd-cap{font-size:calc(var(--u) * 9.5)}
.vd-p{position:relative;padding:calc(var(--u) * 3) 0 calc(var(--u) * 3) calc(var(--u) * 20);margin-top:calc(var(--u) * 4);font-size:calc(var(--u) * 11);font-weight:560;color:#5D6B80}
.vd-p>i{width:calc(var(--u) * 14);height:calc(var(--u) * 14);top:calc(var(--u) * 3)}
.vd-p.feito{color:var(--verde-texto)}
.vd-p.agora{color:var(--navy);font-weight:650}
.nb-vendas .vd-op{padding:calc(var(--u) * 7) calc(var(--u) * 8);border-radius:calc(var(--u) * 8);font-size:calc(var(--u) * 10.5)}
.nb-vendas .vd-op small,.nb-vendas .vd-op em{font-size:calc(var(--u) * 9)}
.nb-vendas .vd-op em{padding:calc(var(--u) * 3) calc(var(--u) * 6)}
.nb-vendas .vd-conf{padding:calc(var(--u) * 7) calc(var(--u) * 8);border-radius:calc(var(--u) * 8);font-size:calc(var(--u) * 10.5)}
.nb-vendas .vd-conf em{font-size:calc(var(--u) * 9.5);padding:calc(var(--u) * 2) calc(var(--u) * 7);border-radius:calc(var(--u) * 5)}
.vd-dep{margin-top:auto;font-size:calc(var(--u) * 9.5);color:#5D6B80}

/* ---------- 06 quem somos ---------- */
.hist-cab{display:flex;flex-direction:column;gap:18px}
.dupla{display:grid;gap:36px;margin-top:40px}
.pessoa{display:grid;gap:18px;align-content:start}
.pessoa img{width:132px;height:132px;border-radius:50%;object-fit:cover;filter:saturate(.88) contrast(1.03)}
.pessoa>div{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.pessoa-n{font-size:var(--t3);font-stretch:84%;font-weight:620}
.anos{display:flex;align-items:baseline;gap:12px}
.anos b{font-size:clamp(44px,4vw,56px);font-stretch:72%;font-weight:640;line-height:1;font-variant-numeric:tabular-nums}
.anos span{font-size:16px;font-weight:560;color:var(--ardosia)}
.pessoa p:not(.anos){color:var(--ardosia);max-width:32em}
@media (min-width:900px){
  .hist-cab{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px;align-items:end}
  .dupla{grid-template-columns:1fr 1fr;gap:56px;margin-top:56px}
  .pessoa{grid-template-columns:150px 1fr;gap:28px}
  .pessoa img{width:150px;height:150px}
}

/* ---------- perguntas ---------- */
.perg{padding-top:0}
.perg-grade{display:grid;gap:28px}
.faq{display:flex;flex-direction:column;gap:6px;margin-inline:-18px}
.faq details{border-radius:16px;transition:background-color .15s}
.faq details[open]{background:var(--nevoa)}
.faq summary{list-style:none;position:relative;display:block;padding:16px 56px 16px 18px;font-size:var(--t4);font-weight:560;line-height:1.3;cursor:pointer;border-radius:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--nevoa)}
.faq summary::before,.faq summary::after{content:"";position:absolute;right:22px;top:50%;width:16px;height:2px;margin-top:-1px;background:var(--navy);transition:transform .15s}
.faq summary::after{transform:rotate(90deg)}
.faq details[open] summary::before{transform:rotate(45deg)}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq details p{padding:0 18px 20px;color:var(--ardosia);max-width:40em}
@media (min-width:900px){.perg-grade{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:48px;align-items:start}}

/* ---------- fechamento ---------- */
.fecho{border-top:1px solid var(--linha);margin-top:calc(var(--sec) / 2);padding-block:var(--sec) calc(var(--sec) * .8)}
.fecho-grade{display:grid;gap:28px;grid-template-areas:"txt" "fone" "acao"}
.fecho-txt{grid-area:txt;display:flex;flex-direction:column;gap:18px}
.fecho-h{font-size:var(--t1);font-stretch:72%;font-weight:640;line-height:.96;letter-spacing:-.018em;max-width:9em;text-wrap:balance}
.fecho-fone{grid-area:fone;position:relative;width:min(80%,300px);aspect-ratio:1/1.02;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 20%);mask-image:linear-gradient(transparent,#000 20%)}
.fone-recorte{position:absolute;left:0;right:0;bottom:0}
.fecho-acao{grid-area:acao;display:flex;flex-direction:column;align-items:stretch;gap:12px}
.fecho-acao p{font-size:15px;color:var(--ardosia)}
.bt-g{min-height:58px;font-size:18px}
@media (min-width:900px){
  .fecho-grade{grid-template-columns:minmax(0,7fr) minmax(0,4fr);grid-template-rows:auto 1fr;grid-template-areas:"txt fone" "acao fone";column-gap:56px;row-gap:36px;align-items:start}
  .fecho-txt{padding-top:24px}
  .fecho-acao{align-items:flex-start;align-self:start}
  .fecho-fone{width:300px;justify-self:end}
}
/* a conversa com a Customer Art, no desenho da página: névoa, balão branco e tinta navy */
.fone-ca{background:var(--nevoa)}
.ca-vazio{flex:1}
.ca-topo{display:flex;align-items:center;gap:3cqw;padding:3.6cqw 4.5cqw 3.4cqw;background:#fff;border-block:1px solid #E1E7ED}
.ca-av{position:relative;width:11.5cqw;height:11.5cqw;border-radius:50%;background:var(--navy);flex:none}
.ca-av i{position:absolute;inset:34%;border-radius:50%;background:var(--lima)}
.ca-n{display:flex;flex-direction:column;line-height:1.2}
.ca-n b{font-size:5.2cqw;font-weight:650;color:var(--navy)}
.ca-n span{font-size:4cqw;color:var(--ardosia)}
.ca-corpo{flex:none;display:flex;flex-direction:column;gap:4cqw;padding:5cqw 4.5cqw 6cqw}
.ca-dia{align-self:center;padding:1.4cqw 3.4cqw;border-radius:99px;background:#fff;font-size:4cqw;font-weight:560;color:var(--ardosia)}
.ca-bal{align-self:flex-end;max-width:88%;padding:3.4cqw 4cqw;border-radius:4.4cqw 4.4cqw 1cqw 4.4cqw;background:#fff;color:var(--navy);font-size:5.6cqw;line-height:1.36;font-weight:500;box-shadow:0 1.5cqw 3cqw -1cqw rgba(0,27,61,.18)}
.ca-pe{display:flex;align-items:center;gap:2.5cqw;padding:2.6cqw 3.4cqw 7cqw;background:#fff;border-top:1px solid #E1E7ED}
.ca-pe span{flex:1;padding:2.6cqw 4cqw;border-radius:6cqw;background:var(--nevoa);font-size:4.4cqw;color:var(--ardosia)}
.ca-pe i{position:relative;width:10cqw;height:10cqw;border-radius:50%;background:var(--navy);flex:none}
.ca-pe i::after{content:"";position:absolute;left:31%;top:30%;width:0;height:0;border-left:4.2cqw solid var(--lima);border-top:2.3cqw solid transparent;border-bottom:2.3cqw solid transparent}

/* ---------- rodapé ---------- */
.rod{padding:48px 0 40px;border-top:1px solid var(--linha);font-size:15px}
.rod-news{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding-bottom:32px;margin-bottom:32px;border-bottom:1px solid var(--linha)}
.rod-r{font-size:14px;font-weight:560;color:var(--ardosia)}
.rod-ed{font-size:var(--t3);font-stretch:84%;font-weight:600;line-height:1.15;text-decoration:none;max-width:26em;text-wrap:balance}
.rod-ed:hover{text-decoration:underline;text-underline-offset:4px}
.rod-l{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.rod-l img{width:134px}
.rod-redes{display:flex;flex-wrap:wrap;gap:8px 26px;font-weight:560}
.rod-redes a{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.rod-dados{display:grid;gap:14px;margin-top:28px;color:var(--ardosia);font-size:14px;line-height:1.5}
@media (min-width:900px){.rod-dados{grid-template-columns:repeat(3,auto);justify-content:space-between}}

/* ---------- barra fixa do celular ---------- */
.barra{display:none}
@media (max-width:899px){
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .barra{display:block;position:fixed;left:0;right:0;bottom:0;z-index:35;padding:8px var(--g) calc(8px + env(safe-area-inset-bottom));background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 -1px 0 rgba(0,27,61,.08);transition:opacity .15s,visibility .15s}
  .barra .bt{width:100%;min-height:48px;font-size:16px}
  .barra.fora{opacity:0;visibility:hidden}
}

/* ---------- celular: ajustes finos ---------- */
@media (max-width:759px){
  .h1{font-size:clamp(38px,11.4vw,46px);font-stretch:70%}
  .ab-txt{gap:18px}
  .ab-acoes .bt{min-height:50px}
  .lead{font-size:17px}
  .and-frase{font-size:16px}
}
@media (max-width:380px){
  .h1{font-size:clamp(36px,11.2vw,42px)}
}

/* celular: página mais curta (meta de 10 a 11 telas) */
@media (max-width:759px){
  :root{--sec:64px}
  .and{margin-bottom:22px}
  .and-frase{margin-top:10px}
  .conv-grade{gap:22px}
  .grupos{gap:14px}
  .grupo{display:grid;grid-template-columns:86px 1fr;gap:12px;align-items:baseline}
  .grupo h3{font-size:21px}
  .grupo p{margin-top:0;font-size:16px}
  .tela-pe{margin-top:36px}
  .tela-pe .bt,.cons .bt-contorno{width:100%}
  .sist{margin-top:28px}
  .pg-cel{margin-top:28px}
  .mapa-bloco{margin-top:30px}
  .mapa li{padding-bottom:20px}
  .mapa dl{margin-top:4px;gap:2px}
  .mapa dl div{grid-template-columns:84px 1fr}
  .mapa dd{font-size:15px}
  .vj-mini{display:none}
  .mapa-vira p{font-size:18px}
  .passos-t{margin-top:40px}
  .passos{gap:16px;margin:14px 0 32px}
  .passos h4{font-size:23px}
  .prat-cab{margin-top:40px}
  .prod-n{font-size:32px}
  .dupla{gap:32px;margin-top:32px}
  .pessoa{grid-template-columns:88px 1fr;gap:4px 16px}
  .pessoa img{width:88px;height:88px;grid-row:1 / 3}
  .pessoa>div{display:contents}
  .pessoa-n{grid-column:2;grid-row:1;align-self:end}
  .pessoa .anos{grid-column:2;grid-row:2;align-self:start}
  .pessoa .anos b{font-size:40px}
  .pessoa p:not(.anos),.pessoa .lk{grid-column:1 / 3}
  .pessoa p:not(.anos){margin-top:8px}
  .faq{margin-inline:-14px}
  .faq summary{padding:14px 52px 14px 14px;font-size:18px}
  .faq details p{padding:0 14px 16px}
  .fecho-fone{width:min(66%,260px)}
  .ca-bal{font-size:6.6cqw}
  .ca-dia{font-size:4.8cqw}
  .rod{padding-top:36px}
}

@media (max-width:759px){
  .estado-txt p{display:none}
  .tc-2col>div+div{display:none}
  .sist-lista{display:flex;flex-wrap:wrap;gap:8px}
  .sist-lista div{padding:7px 14px;border-radius:999px;background:var(--nevoa)}
  .sist-lista dt{font-size:15px;font-weight:600}
  .sist-lista dd{display:none}
  .mapa dl{display:block;margin-top:2px}
  .mapa dl div{display:inline}
  .mapa dt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .mapa dl div:first-child dd::after{content:", "}
  .mapa dl div:nth-child(2) dd{text-transform:lowercase}
  .mapa dl div:last-child{display:block;margin-top:2px}
  .mapa dl div:last-child dd{color:var(--ardosia);font-weight:400}
  .mapa dd{display:inline;font-size:16px}
  .prod-fone{width:min(72%,300px)}
}
@media (max-width:759px){
  .vd-cartao .tc-j,.vd-cartao .vd-cap+.vd-op+.tc-j+.vd-cap{display:none}
  .prod-fone{margin-bottom:-62%}
  .rod{padding:32px 0 28px}
  .rod-news{padding-bottom:24px;margin-bottom:24px}
}

@media (max-width:559px){
  .tc-conf{display:grid;grid-template-columns:1fr auto auto;gap:6px 8px}
  .tc-conf em:first-of-type{margin-left:0}
  .tc-conf em.ok{grid-column:2 / 4}
  .tc-conf em{padding:2px 8px}
}

/* telas baixas (até 620 px de altura): menos respiro entre o botão e o notebook */
@media (max-width:759px) and (max-height:620px){
  .ab{padding-top:8px}
  .ab-txt{gap:14px}
  .ab-cel{margin-top:16px}
}

/* ajustes finais: o gráfico do Portal com altura própria e o celular do fechamento sem sombra recortada */
.pg-linha{align-items:start}
.pg-graf .pg-barras{flex:none;height:210px}
.fone-recorte{filter:none}
.fecho-fone .fone-corpo{filter:drop-shadow(0 10px 14px rgba(0,27,61,.16))}
@media (min-width:900px){.estado .tc-j{display:none}}

/* ---------- revisão do diretor de arte (nota 6,5): ajustes ---------- */
/* Portal: o número fica na mesma linha do nome, à direita; a barra embaixo */
.pg-funil em,.pg-serv em{grid-row:1;grid-column:1}
.pg-funil b,.pg-serv b{grid-row:1;grid-column:2}
.pg-funil i,.pg-serv i{grid-row:2}
/* 02 no computador: a sombra do notebook some aos poucos na borda da imagem, sem corte reto sobre o navy */
.ap-corpo{-webkit-mask-image:linear-gradient(90deg,transparent 1%,#000 10%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent 1%,#000 10%,#000 92%,transparent)}
/* fechamento: a sombra do celular não é cortada pela caixa (sem retângulo cinza) e o cabeçalho Customer Art fica nítido */
.fecho-fone{aspect-ratio:1/1.14;-webkit-mask-image:linear-gradient(transparent,#000 9%);mask-image:linear-gradient(transparent,#000 9%)}
.fecho-fone{width:344px;margin-inline:-22px}
.fecho-fone .fone-recorte{left:22px;right:22px;bottom:30px}
.fecho-fone .fone-corpo{filter:drop-shadow(0 8px 10px rgba(0,27,61,.15))}
@media (max-width:759px){.fecho-fone{width:min(calc(80% + 44px),340px)}}
/* ArtONE Saúde no celular: o botão cabe numa linha até 360 px */
@media (max-width:759px){
  .prod-saude{padding-inline:14px}
  .bt-saude{padding:12px 14px;font-size:clamp(15px,4.1vw,16px);justify-content:center;text-align:center}
}
/* telas baixas (até 620 px): o celular do cliente e a legenda aparecem inteiros sem rolar */
@media (max-width:759px) and (max-height:620px){
  .h1{font-size:clamp(34px,10.2vw,40px)}
  .ab-txt{gap:10px}
  .ab-acoes .bt{min-height:46px}
  .ab-cel{margin-top:10px}
}

/* ---------- 05/10 (noite): faixas de cor, marcos de seção e o giro 3D ----------
   O Fabio reprovou a versão toda branca: cada seção agora é uma faixa (branco, névoa ou navy) de ponta a ponta,
   abre com um marco (número, nome e "de 06") e a 02 traz de volta o notebook e o celular renderizados girando com a rolagem. */
.faixa{position:relative}
.faixa-branca{background:var(--papel)}
.faixa-nevoa{background:var(--nevoa)}
.faixa-navy{background:var(--navy);color:#fff}
.sec.faixa,.ab.faixa{padding-block:var(--sec);border-top:0;margin-top:0}
.ab.faixa{padding-top:calc(var(--sec) * .8)}
.tela.faixa{padding-block:0}
.perg.faixa{padding-top:var(--sec)}
.fecho.faixa{margin-top:0}
.faixa-nevoa .prod-saude{background:#fff;box-shadow:0 1px 0 #D3DBE3}

.marco-sec{display:flex;align-items:baseline;gap:14px;margin:0 0 clamp(28px,4vw,52px);padding-top:16px;border-top:2px solid var(--navy)}
.ms-n{font-size:clamp(44px,5.4vw,72px);font-stretch:66%;font-weight:700;line-height:.86;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ms-t{font-size:clamp(17px,1.4vw,20px);font-weight:620;line-height:1.2}
.ms-de{margin-left:auto;font-size:14px;color:var(--ardosia);font-variant-numeric:tabular-nums}
.faixa-navy .marco-sec{border-top-color:rgba(255,255,255,.85)}
.faixa-navy .ms-n{color:var(--lima)}
.faixa-navy .ms-de{color:#9FB0C4}
.campo>.lar:first-child .marco-sec{margin-bottom:clamp(20px,3vw,36px)}

/* fechamento sobre o navy */
.faixa-navy .fecho-h{color:#fff}
.faixa-navy .lead,.faixa-navy .fecho-acao p{color:#C9D4E2}
.faixa-navy .fecho-acao .lk{color:var(--lima)}
.faixa-navy .bt-cheio{background:var(--lima);color:var(--navy)}
.faixa-navy .bt-cheio:hover{background:#D3FF99}
.faixa-navy .fecho-fone .fone-corpo{filter:drop-shadow(0 10px 18px rgba(0,0,0,.35))}
.faixa-navy :focus-visible{box-shadow:0 0 0 2px var(--navy),0 0 0 4px var(--lima)}

/* o giro: o notebook abre e o celular gira enquanto a página rola */
.giro{position:relative;height:250vh}
.giro-fixo{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.giro-c{position:absolute;inset:0;width:100%;height:100%;display:block}
.giro-pe{position:absolute;left:0;right:0;bottom:clamp(28px,6vh,64px);display:flex;align-items:flex-end;justify-content:space-between;gap:20px;pointer-events:none}
.giro-leg{position:relative;flex:1;min-height:2.7em;max-width:30em;font-size:var(--t3);font-stretch:84%;font-weight:600;line-height:1.2;color:#fff}
.giro-leg span{position:absolute;left:0;bottom:0;opacity:0;transform:translateY(10px);transition:opacity .35s,transform .35s}
.giro-leg span.on{opacity:1;transform:none}
.giro-pontos{display:flex;gap:8px;padding-bottom:.4em}
.giro-pontos i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.3);transition:background .3s}
.giro-pontos i.on{background:var(--lima)}
@media (max-width:759px){
  .giro{height:200vh}
  .giro-pe{bottom:calc(env(safe-area-inset-bottom,0px) + 104px)}
  .giro-leg{font-size:20px}
}
@media (prefers-reduced-motion:reduce){
  .giro{height:auto}
  .giro-fixo{position:relative;height:70vh}
  .giro-leg span{position:static;display:block;opacity:1;transform:none;margin-top:6px}
  .giro-leg span:not(:last-child){display:none}
  .giro-pontos{display:none}
}
.giro-dir{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.giro-rolar{display:flex;align-items:center;gap:8px;padding:7px 14px;border:1px solid rgba(255,255,255,.55);border-radius:999px;font-size:14px;font-weight:600;color:#fff;white-space:nowrap;transition:opacity .3s}
.giro-rolar i{font-style:normal;animation:giro-seta 1.8s cubic-bezier(.6,0,.2,1) infinite}
@keyframes giro-seta{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.giro.fim .giro-rolar{opacity:0}
@media (prefers-reduced-motion:reduce){.giro-rolar{display:none}}
/* 05/10: o giro 3D saiu a pedido do Fabio ("pode deixar estático"); a 02 voltou à composição parada */
/* a legenda do giro sobre um véu navy, porque no computador o quadro cobre a tela até embaixo */
.giro-fixo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:min(34vh,260px);background:linear-gradient(rgba(0,27,61,0),rgba(0,27,61,.92) 72%);pointer-events:none}
.giro-pe{z-index:1}
/* 05/10: menu numa coluna só, na ordem dos marcos das seções (01 a 06); ao lado, links menores e o botão.
   Vale no celular e no computador (o Fabio sentiu falta da newsletter e estranhou os três links soltos no topo) */
.menu-lista a{display:flex;align-items:baseline;gap:14px}
.mn-n{flex:none;width:1.7em;font-size:.56em;font-weight:700;color:#7A8BA0;font-variant-numeric:tabular-nums}
.menu-lista li+li a{border-top:1px solid var(--linha)}
.menu-lado{display:flex;flex-direction:column;gap:24px}
.menu-mais{display:flex;flex-wrap:wrap;gap:10px 22px}
.menu-mais a{font-size:17px;font-weight:600;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px;text-decoration-color:var(--linha)}
@media (min-width:760px){
  .menu-bt{display:inline-block}
  .menu{inset:88px 0 0;padding:36px max(var(--g),calc((100% - 1280px) / 2)) 48px;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);column-gap:64px;align-content:start}
  .menu-lista a{font-size:36px}
  .menu-lado{padding-top:14px}
  .menu-mais{flex-direction:column}
  .menu-cta{align-self:flex-start}
}
/* 05/10: quadro a quadro. Ao abrir, a capa ocupa a tela exata (sem a faixa cinza da seção seguinte aparecendo
   embaixo), cada seção tem pelo menos uma tela e a rolagem para no começo de cada uma.
   08/10: o topo fica preso em qualquer largura e entra na conta; --topo é a altura dele (76 px, 88 px a partir de
   900 px, como o .topo-in). Antes valia 88 já em 760 px e sobrava uma fresta da página entre o topo e o menu. */
:root{--topo:76px}
@media (min-width:900px){:root{--topo:88px}}
.menu{top:var(--topo)}
html{scroll-snap-type:y proximity;scroll-padding-top:var(--topo)}
.faixa{scroll-snap-align:start;min-height:calc(100vh - var(--topo));min-height:calc(100svh - var(--topo));display:flex;flex-direction:column;justify-content:center}
.capa.faixa{min-height:calc(100vh - var(--topo));min-height:calc(100svh - var(--topo))}
.tela.faixa>.campo{flex:1;display:flex;flex-direction:column;justify-content:center}
/* a capa não é ponto de parada: no celular o topo sobe com a página, e parar na capa escondia o topo e
   deixava a faixa cinza da seção seguinte aparecer embaixo */
.capa.faixa{scroll-snap-align:none}
/* links de texto em navy, como o resto da página; o verde ficava fora do padrão. As ações viraram botões. */
.lk{color:var(--navy);text-decoration-color:rgba(0,27,61,.35)}
.lk:hover{text-decoration-color:currentColor}
.faixa-navy .lk{color:var(--lima);text-decoration-color:rgba(193,255,114,.5)}
/* 03 no celular: a etapa recebendo os dados dos sistemas, no lugar do cartão do Portal */
.et-int{padding:18px;border:1px solid var(--linha);border-radius:18px;background:#fff;box-shadow:0 22px 44px -30px rgba(0,27,61,.4);font-size:15px;line-height:1.3;color:#1B2433}
.et-topo{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding-bottom:12px;border-bottom:1px solid #E3E8EF}
.et-topo span{font-size:12px;font-weight:650;letter-spacing:.04em;color:#5D6B80}
.et-topo b{font-size:18px;font-weight:650}
.et-topo em{margin-left:auto;font-style:normal;font-size:13px;font-weight:600;color:#9A5B00}
.et-caso{display:flex;flex-direction:column;padding:12px 0 6px}
.et-caso b{font-weight:640}
.et-caso small{font-size:13px;color:#5D6B80}
.et-int ul{display:grid;gap:0}
.et-int li{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid #EEF1F5}
.et-int li>i{width:34px;height:34px;border-radius:9px;background:#EDF2F8;color:var(--navy);font-style:normal;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.et-int li span{display:flex;flex-direction:column;font-size:13px;color:#5D6B80}
.et-int li span b{font-size:15px;font-weight:620;color:#1B2433}
.et-int li span b.v{color:var(--verde-texto)}
.et-int li small{padding:2px 8px;border-radius:999px;background:#EEF1F5;font-size:12px;font-weight:600;color:#3A4A5E}
.et-acao{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:14px}
.et-acao span{font-size:14px;color:#3A4A5E}
.et-acao em{font-style:normal;padding:8px 16px;border-radius:999px;background:var(--navy);color:#fff;font-size:14px;font-weight:620}

/* ---------- 05/10: a tela única com cara de sistema (comentário: "parece ilustração, um rascunho") ----------
   Desenhada nas mesmas 780 x 500 unidades da .jan: barra de cima com busca, trilho de ícones, cabeçalho do caso
   com protocolo e situação, abas e painéis com título discreto. As quatro zonas seguem lá (Jornada, Atualizações,
   Integrações, Dados), agora como painéis do sistema. */
.jan-sis{background:#F4F6F9;overflow:hidden;font-family:Archivo,system-ui,sans-serif;font-stretch:100%}
.jan-sis *{min-width:0}
.sx-topo{flex:none;height:calc(var(--u) * 42);display:flex;align-items:center;gap:calc(var(--u) * 14);padding:0 calc(var(--u) * 14);background:#fff;border-bottom:1px solid #E3E8EF;border-radius:16px 16px 0 0;white-space:nowrap;font-size:max(var(--min),calc(var(--u) * 11.5))}
.sx-topo .art{font-size:max(15px,calc(var(--u) * 16))}
.sx-trilha{color:#5D6B80}
.sx-trilha i{font-style:normal;margin:0 calc(var(--u) * 4);color:#9AA7B6}
.sx-busca{margin-left:auto;width:calc(var(--u) * 210);padding:calc(var(--u) * 6) calc(var(--u) * 10);border:1px solid #DCE3EA;border-radius:calc(var(--u) * 8);background:#F7F9FB;color:#8D9AAA;overflow:hidden;text-overflow:ellipsis}
.sx-sino{position:relative;width:calc(var(--u) * 16);height:calc(var(--u) * 16);border:1.5px solid #8796A8;border-radius:50% 50% 30% 30%}
.sx-sino::after{content:"";position:absolute;right:calc(var(--u) * -4);top:calc(var(--u) * -4);width:calc(var(--u) * 7);height:calc(var(--u) * 7);border-radius:50%;background:#E5484D;box-shadow:0 0 0 2px #fff}
.sx-eu{width:calc(var(--u) * 26);height:calc(var(--u) * 26);border-radius:50%;background:var(--navy);color:#fff;font-size:max(10px,calc(var(--u) * 10));font-weight:650;display:flex;align-items:center;justify-content:center}
.sx-corpo{flex:1;display:flex;min-height:0}
.sx-rail{flex:none;width:calc(var(--u) * 46);display:flex;flex-direction:column;align-items:center;gap:calc(var(--u) * 8);padding:calc(var(--u) * 12) 0;background:#fff;border-right:1px solid #E3E8EF;border-radius:0 0 0 16px}
.sx-rail i{width:calc(var(--u) * 30);height:calc(var(--u) * 30);border-radius:calc(var(--u) * 8);display:flex;align-items:center;justify-content:center}
.sx-rail i.on{background:#EAF0FF}
.sx-rail i.sx-fim{margin-top:auto}
.sx-rail svg{width:calc(var(--u) * 17);height:calc(var(--u) * 17);fill:none;stroke:#6B7A8C;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sx-rail i.on svg{stroke:var(--navy)}
.sx-main{flex:1;display:flex;flex-direction:column;padding:calc(var(--u) * 12) calc(var(--u) * 14);gap:calc(var(--u) * 8);font-size:max(var(--min),calc(var(--u) * 11.5));color:#1B2433}
.sx-caso{display:flex;align-items:center;gap:calc(var(--u) * 8);white-space:nowrap}
.sx-caso>b{font-size:max(15px,calc(var(--u) * 16));font-weight:650}
.sx-chip{padding:calc(var(--u) * 2) calc(var(--u) * 8);border-radius:999px;background:#EEF1F5;color:#3A4A5E;font-size:max(var(--min),calc(var(--u) * 10.5));font-weight:600}
.sx-amb{background:#FFF3DC;color:#8A5200}
.sx-bts{margin-left:auto;display:flex;gap:calc(var(--u) * 6)}
.sx-bt{padding:calc(var(--u) * 5) calc(var(--u) * 11);border:1px solid #CBD4DF;border-radius:calc(var(--u) * 7);background:#fff;font-size:max(var(--min),calc(var(--u) * 11));font-weight:600}
.sx-pri{background:var(--navy);border-color:var(--navy);color:#fff}
.sx-abas{display:flex;gap:calc(var(--u) * 18);border-bottom:1px solid #DCE3EA;white-space:nowrap;color:#5D6B80;font-weight:560}
.sx-abas span{padding-bottom:calc(var(--u) * 6);margin-bottom:-1px}
.sx-abas .on{color:var(--navy);border-bottom:2px solid var(--navy)}
.sx-abas em{font-style:normal;padding:0 calc(var(--u) * 5);border-radius:999px;background:#E3E8EF;font-size:max(10px,calc(var(--u) * 10))}
.sx-grade{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:calc(var(--u) * 10)}
.sx-col{display:flex;flex-direction:column;gap:calc(var(--u) * 10);min-height:0}
.sx-p{position:relative;padding:calc(var(--u) * 10) calc(var(--u) * 11);border:1px solid #E1E7EE;border-radius:calc(var(--u) * 10);background:#fff}
.sx-p h4{margin:0 0 calc(var(--u) * 8);font-size:max(var(--min),calc(var(--u) * 10.5));font-weight:650;letter-spacing:.03em;color:#5D6B80}
.sx-passos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--u) * 6)}
.sx-passos li{position:relative;display:flex;flex-direction:column;gap:calc(var(--u) * 2);padding-top:calc(var(--u) * 24);line-height:1.25}
.sx-passos li::before{content:"";position:absolute;left:calc(var(--u) * 20);right:calc(var(--u) * -6);top:calc(var(--u) * 9);height:2px;background:#DCE3EA}
.sx-passos li:last-child::before{display:none}
.sx-passos li.feito::before{background:var(--verde)}
.sx-passos li>i{position:absolute;left:0;top:0;width:calc(var(--u) * 20);height:calc(var(--u) * 20);border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px #B8C3D0}
.sx-passos li.feito>i{background:var(--verde);box-shadow:none}
.sx-passos li.feito>i::after{content:"";position:absolute;left:34%;top:22%;width:24%;height:40%;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.sx-passos li.agora>i{background:var(--navy);box-shadow:0 0 0 calc(var(--u) * 3) rgba(193,255,114,.9)}
.sx-passos b{font-weight:640}
.sx-passos small{font-size:max(var(--min),calc(var(--u) * 10));color:#6B7A8C}
.sx-tag{align-self:flex-start;margin-top:calc(var(--u) * 3);padding:calc(var(--u) * 1) calc(var(--u) * 6);border-radius:999px;background:var(--lima);color:var(--navy);font-size:max(var(--min),calc(var(--u) * 9.5));font-weight:650;white-space:nowrap}
.sx-tab{flex:none}
.sx-dados{flex:1}
.sx-dados .sx-kpi{grid-template-columns:repeat(3,1fr)}
.sx-lin{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) auto;gap:calc(var(--u) * 8);align-items:center;padding:calc(var(--u) * 7) 0;border-top:1px solid #EEF1F5}
.sx-lin span:nth-child(2){color:#6B7A8C}
.sx-lin span:last-child{display:flex;gap:calc(var(--u) * 4);justify-content:flex-end}
.sx-cab{border-top:0;padding-top:0;font-size:max(var(--min),calc(var(--u) * 10));font-weight:600;color:#8796A8}
.sx-lin em{font-style:normal;padding:calc(var(--u) * 2) calc(var(--u) * 8);border-radius:calc(var(--u) * 6);font-size:max(var(--min),calc(var(--u) * 10.5));font-weight:620}
.sx-lin em.ok{background:#E3F4EA;color:var(--verde-texto)}
.sx-lin em.ap{background:var(--navy);color:#fff}
.sx-lin em.rc{background:#fff;color:#3A4A5E;box-shadow:inset 0 0 0 1px #CBD4DF}
.sx-ev{display:flex;flex-direction:column;padding:calc(var(--u) * 6) 0 calc(var(--u) * 6) calc(var(--u) * 12);border-left:2px solid #DCE3EA;line-height:1.25;font-weight:600}
.sx-ev+.sx-ev{margin-top:calc(var(--u) * 4)}
.sx-ev.novo{border-left-color:var(--verde)}
.sx-ev small{font-size:max(var(--min),calc(var(--u) * 10));font-weight:500;color:#6B7A8C}
.sx-ev em{font-style:normal;font-size:max(var(--min),calc(var(--u) * 10.5));font-weight:500;color:var(--verde-texto)}
.sx-kv{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 calc(var(--u) * 6);padding:calc(var(--u) * 5) 0;border-top:1px solid #EEF1F5;line-height:1.25}
.sx-kv:first-of-type{border-top:0}
.sx-kv span{color:#6B7A8C;font-size:max(var(--min),calc(var(--u) * 10.5))}
.sx-kv b{grid-column:1;font-weight:620}
.sx-kv b.v{color:var(--verde-texto)}
.sx-kv i{grid-column:2;grid-row:1 / 3;align-self:center;font-style:normal;padding:calc(var(--u) * 2) calc(var(--u) * 6);border-radius:calc(var(--u) * 5);background:#EEF1F5;font-size:max(10px,calc(var(--u) * 9.5));font-weight:650;color:#3A4A5E}
.sx-kpi{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u) * 6)}
.sx-kpi span{display:flex;flex-direction:column;font-size:max(var(--min),calc(var(--u) * 10));color:#6B7A8C}
.sx-kpi b{font-size:max(15px,calc(var(--u) * 18));font-weight:650;color:#1B2433;font-variant-numeric:tabular-nums}
/* o celular do cliente fica embaixo da coluna Atualizações: o fio verde entra onde a conversa chega */
.ab-palco .cli-pc{width:max-content;margin-left:auto}
.jan-sis .sx-lin{padding:calc(var(--u) * 5) 0}
.jan-sis .sx-kpi b{font-size:max(14px,calc(var(--u) * 15))}
.jan-sis .sx-p{padding:calc(var(--u) * 9) calc(var(--u) * 11)}
/* a tela única de bolso (celular) na mesma linguagem de sistema: 332 x 207,5 unidades do vão do notebook */
.tu-sis{display:flex;flex-direction:column;background:#F4F6F9;color:#1B2433;font-family:Archivo,system-ui,sans-serif;font-size:calc(var(--u) * 9.5);line-height:1.25}
.tu-sis *{min-width:0}
.ts-barra{flex:none;height:calc(var(--u) * 20);display:flex;align-items:center;gap:calc(var(--u) * 7);padding:0 calc(var(--u) * 7);background:#fff;border-bottom:1px solid #E3E8EF;white-space:nowrap}
.ts-barra .art{font-size:calc(var(--u) * 10)}
.ts-trilha{flex:1;overflow:hidden;text-overflow:ellipsis;color:#6B7A8C;font-size:calc(var(--u) * 8)}
.ts-eu{flex:none;width:calc(var(--u) * 14);height:calc(var(--u) * 14);border-radius:50%;background:var(--navy);color:#fff;font-size:calc(var(--u) * 6.5);font-weight:650;display:flex;align-items:center;justify-content:center}
.ts-corpo{flex:1;display:flex;min-height:0}
.ts-rail{flex:none;width:calc(var(--u) * 20);display:flex;flex-direction:column;align-items:center;gap:calc(var(--u) * 5);padding-top:calc(var(--u) * 7);background:#fff;border-right:1px solid #E3E8EF}
.ts-rail i{width:calc(var(--u) * 14);height:calc(var(--u) * 14);border-radius:calc(var(--u) * 4);display:flex;align-items:center;justify-content:center}
.ts-rail i.on{background:#EAF0FF}
.ts-rail svg{width:calc(var(--u) * 9);height:calc(var(--u) * 9);fill:none;stroke:#6B7A8C;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ts-rail i.on svg{stroke:var(--navy)}
.ts-main{flex:1;display:flex;flex-direction:column;gap:calc(var(--u) * 5);padding:calc(var(--u) * 6) calc(var(--u) * 7)}
.ts-caso{display:flex;align-items:center;gap:calc(var(--u) * 5);white-space:nowrap}
.ts-caso b{font-size:calc(var(--u) * 10.5);font-weight:650}
.ts-chip{padding:calc(var(--u) * 1) calc(var(--u) * 5);border-radius:999px;background:#FFF3DC;color:#8A5200;font-size:calc(var(--u) * 7.5);font-weight:620}
.ts-bt{margin-left:auto;padding:calc(var(--u) * 2.5) calc(var(--u) * 6);border-radius:calc(var(--u) * 4);background:var(--navy);color:#fff;font-size:calc(var(--u) * 7.5);font-weight:620}
.ts-passos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:calc(var(--u) * 5) calc(var(--u) * 6);border:1px solid #E1E7EE;border-radius:calc(var(--u) * 6);background:#fff;font-size:calc(var(--u) * 8);font-weight:600}
.ts-passos li{position:relative;display:flex;flex-direction:column;gap:calc(var(--u) * 3);padding-top:calc(var(--u) * 13)}
.ts-passos li::before{content:"";position:absolute;left:calc(var(--u) * 10);right:0;top:calc(var(--u) * 4.5);height:1.5px;background:#DCE3EA}
.ts-passos li:last-child::before{display:none}
.ts-passos li.feito::before{background:var(--verde)}
.ts-passos li>i{position:absolute;left:0;top:0;width:calc(var(--u) * 10);height:calc(var(--u) * 10);border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1.5px #B8C3D0}
.ts-passos li.feito>i{background:var(--verde);box-shadow:none}
.ts-passos li.agora>i{background:var(--navy);box-shadow:0 0 0 calc(var(--u) * 2) rgba(193,255,114,.9)}
.ts-passos li.novo{color:var(--verde-texto)}
.ts-grade{flex:1;min-height:0;display:grid;grid-template-columns:1.25fr 1.25fr .9fr;gap:calc(var(--u) * 5)}
.ts-p{padding:calc(var(--u) * 5) calc(var(--u) * 6);border:1px solid #E1E7EE;border-radius:calc(var(--u) * 6);background:#fff;overflow:hidden}
.ts-p h5{margin:0 0 calc(var(--u) * 4);font-size:calc(var(--u) * 7.5);font-weight:650;letter-spacing:.03em;color:#6B7A8C}
.ts-ev{display:flex;flex-direction:column;padding-left:calc(var(--u) * 5);border-left:1.5px solid var(--verde);font-weight:600}
.ts-ev small{font-size:calc(var(--u) * 7);font-weight:500;color:#6B7A8C}
.ts-ev em{font-style:normal;font-size:calc(var(--u) * 7.5);font-weight:500;color:var(--verde-texto)}
.ts-kv{display:grid;grid-template-columns:minmax(0,1fr) auto;padding:calc(var(--u) * 2) 0;color:#6B7A8C;font-size:calc(var(--u) * 7.5)}
.ts-kv+.ts-kv{border-top:1px solid #EEF1F5}
.ts-kv b{grid-column:1;font-size:calc(var(--u) * 8.5);font-weight:620;color:#1B2433}
.ts-kv b.v{color:var(--verde-texto)}
.ts-kv i{grid-column:2;grid-row:1 / 3;align-self:center;font-style:normal;padding:calc(var(--u) * 1) calc(var(--u) * 3.5);border-radius:calc(var(--u) * 3);background:#EEF1F5;font-size:calc(var(--u) * 6.5);font-weight:650;color:#3A4A5E}
.ts-num{display:block;font-size:calc(var(--u) * 15);font-weight:650;line-height:1.1;font-variant-numeric:tabular-nums}
.ts-sub{font-size:calc(var(--u) * 7);color:#6B7A8C}
/* ---------- 05/10: a arte da capa ("vale alguma arte aqui"): a linha da jornada ----------
   No celular, uma faixa horizontal compacta embaixo do botão; no computador, a linha vertical grande à direita,
   com a etapa atual pulsando devagar. */
.capa-arte{margin-top:6px}
.ca-linha{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.ca-linha li{position:relative;display:flex;flex-direction:column;gap:2px;padding-top:30px}
.ca-linha li::before{content:"";position:absolute;left:22px;right:-4px;top:10px;height:2px;background:var(--linha)}
.ca-linha li:last-child::before{display:none}
.ca-linha li.feito::before{background:var(--verde)}
.ca-linha li>i{position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px #9AA8B8}
.ca-linha li.feito>i{background:var(--verde);box-shadow:none}
.ca-linha li.feito>i::after{content:"";position:absolute;left:8px;top:4px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.ca-linha li.agora>i{background:var(--navy);box-shadow:0 0 0 4px var(--lima)}
.ca-linha b{font-size:14px;font-stretch:84%;font-weight:640;line-height:1.15}
.ca-linha small{display:none}
.ca-tag{display:none}
@media (min-width:900px){
  .capa-grade{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:56px;align-items:center}
  .capa-h{grid-column:1;font-size:clamp(56px,5.4vw,88px);max-width:9.5em}
  .capa-txt{grid-column:1}
  .capa-arte{grid-column:2;grid-row:1 / 3;align-self:center;justify-self:end;width:min(100%,440px);margin:0;padding:36px 36px 36px 40px;border-radius:28px;background:var(--nevoa)}
  .ca-linha{grid-template-columns:1fr;gap:0}
  .ca-linha li{padding:0 0 34px 58px;gap:4px}
  .ca-linha li:last-child{padding-bottom:0}
  .ca-linha li::before{left:15px;right:auto;top:34px;bottom:2px;width:3px;height:auto}
  .ca-linha li>i{width:33px;height:33px}
  .ca-linha li.feito>i::after{left:12px;top:7px;width:7px;height:14px;border-width:0 3px 3px 0}
  .ca-linha li.agora>i{box-shadow:0 0 0 6px var(--lima)}
  .ca-linha b{font-size:30px;font-stretch:76%;line-height:1.05;padding-top:1px}
  .ca-linha small{display:block;font-size:15px;color:var(--ardosia)}
  .ca-tag{display:inline-block;align-self:flex-start;margin-top:6px;padding:3px 12px;border-radius:999px;background:var(--lima);color:var(--navy);font-size:13px;font-weight:650}
  @media (prefers-reduced-motion:no-preference){
    .ca-linha li.agora>i{animation:ca-pulso 2.8s ease-in-out infinite}
  }
}
@keyframes ca-pulso{0%,100%{box-shadow:0 0 0 6px var(--lima)}50%{box-shadow:0 0 0 12px rgba(193,255,114,.35)}}
/* a etapa atual: o ponto lima desenhado no próprio círculo (gradiente), sem camada por cima. No iPhone o ponto em
   porcentagem por cima do círculo saía cortado ("a bolinha está cortada") */
.and-trilho li.agora>i,.marco.agora>i,.mapa .agora .mk,.vj .agora>i,.tc-j .agora>i,.tu-p.agora>i,.vd-p.agora>i{background:radial-gradient(circle at 50% 50%,var(--lima) 0 26%,var(--navy) 29%)}
.and-trilho li.agora>i::after,.marco.agora>i::after,.mapa .agora .mk::after,.vj .agora>i::after,.tc-j .agora>i::after,.tu-p.agora>i::after,.vd-p.agora>i::after{display:none}
.campo .marco.agora>i{background:radial-gradient(circle at 50% 50%,var(--navy) 0 26%,var(--lima) 29%)}
.mapa-bloco{grid-template-columns:minmax(0,1fr)!important}
/* trilha das seções 01 e 03: a bolinha sempre por cima e mais respiro até o nome da etapa (no iPhone o texto
   parecia subir sobre a bolinha) */
.and-trilho li>i{z-index:2}
.and-trilho li>span{display:block;position:relative;z-index:1}
.and-trilho li{padding-top:40px}
@media (max-width:759px){.and-trilho li{padding-top:34px}}
@media (max-width:359px){.and-trilho li{font-size:12px;letter-spacing:-.01em}}
.cons .mapa-bloco+.bt{margin-top:clamp(28px,4vw,48px)}
/* 06/10: a arte da capa saiu a pedido do Fabio; a capa volta a ser só texto, com o título largo */
@media (min-width:900px){
  .capa-grade{grid-template-columns:minmax(0,1fr)}
  .capa-h{font-size:clamp(64px,7.2vw,112px);max-width:12em}
}
/* 06/10: no computador o menu não repete o "Marque uma reunião" do topo ("estranho esses dois botões") */
@media (min-width:760px){.menu-lado{display:none}.menu{grid-template-columns:minmax(0,1fr);max-width:none}.menu-lista{max-width:800px}}
/* navegadores sem overflow:clip (Safari antigo) mostravam a página mais larga que a tela e cortavam o "Fechar" */
@supports not (overflow:clip){html,body,section{overflow-x:hidden}}
/* a composição da 02 avança além da coluna só até a margem que existe (antes passava 8 a 40 px da tela) */
@media (min-width:900px){.tela-ap{width:calc(100% + 70px + min(80px, var(--g) - 12px))}}
/* 01 entre 900 e 1100 px: os dois celulares encolhem para caber ao lado do texto */
@media (min-width:900px) and (max-width:1099px){.fone-item{flex-basis:clamp(200px,20vw,250px)}}
/* 16/10: Soluções no menu (pedido do Fabio): os dois caminhos, ArtONE Saúde e ArtONE Central de Atendimento, cada um
   com a sua página em /solucoes. No celular o bloco vem antes das seções; no computador fica na coluna da direita. */
.menu-sol{display:flex;flex-direction:column;gap:12px;order:-1}
.msol-t{align-self:flex-start;font-size:15px;font-weight:620;color:var(--verde-texto);text-decoration:none;padding:4px 0}
.msol-t:hover{text-decoration:underline;text-underline-offset:4px}
.msol-lista{display:grid;gap:10px}
.msol-lista a{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border-radius:16px;background:var(--nevoa);text-decoration:none;transition:background-color .15s}
.msol-lista a:hover{background:#E1E8EE}
.msol-lista b{font-size:24px;font-stretch:78%;font-weight:620;line-height:1.1}
.msol-lista small{font-size:15px;line-height:1.35;color:var(--ardosia)}
@media (min-width:760px){
  .menu{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:56px}
  .menu-sol{order:0;grid-column:2;grid-row:1;padding-top:14px}
  .menu-lista{grid-column:1;grid-row:1}
  .msol-lista b{font-size:28px}
}