/* Cena de seção. .sd = sem demonstração (itens à direita), .cd = com demonstração (itens na coluna). */
.secao{position:absolute;inset:200px 110px 150px;display:flex;align-items:center;gap:90px}
.secao .sx-esq{width:700px;flex-shrink:0}
.sx-b{will-change:transform,opacity}

/* ícone + contador */
.sx-topos{display:flex;align-items:center;gap:26px;margin-bottom:30px}
.ico{position:relative;width:96px;height:96px;border-radius:8px;border:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ico svg,.pilar .pi svg{width:56px;height:56px}
.ico path,.ico circle,.ico rect,.pilar .pi path,.pilar .pi circle,.pilar .pi rect{stroke-dasharray:1;stroke-dashoffset:1}
.sx-icog{position:relative;display:flex}
.sx-icog svg *{transform-box:fill-box;transform-origin:50% 50%}
.sx-icof{position:absolute;inset:0;border-radius:7px;background:var(--cor);opacity:0}
.sx-icoo{position:absolute;inset:-1px;border-radius:9px;border:2px solid var(--cor);opacity:0}
.secao .ico svg.sx-icoa{position:absolute;left:-1px;top:-1px;width:calc(100% + 2px);height:calc(100% + 2px);overflow:visible}
.sx-icoa rect{fill:none;stroke:var(--cor);stroke-width:2.2}
.sx-cont{display:flex;flex-direction:column;gap:12px}
.sx-conttx{font-size:24px;font-weight:600;color:var(--muted);line-height:1.2;white-space:nowrap}
.sx-contn{display:inline-block;height:1.2em;overflow:hidden;vertical-align:bottom}
.sx-contr{display:flex;flex-direction:column}
.sx-contr b{display:block;height:1.2em;line-height:1.2em;color:var(--cort);font-weight:800;text-align:center;min-width:.7em}
.sx-contbar{position:relative;width:220px;height:4px;border-radius:2px;background:#E2E6EB}
.sx-contf{position:absolute;inset:0;border-radius:2px;background:var(--cor);transform-origin:0 50%;transform:scaleX(0)}
.sx-contbar b{position:absolute;top:-4px;width:2px;height:12px;margin-left:-1px;border-radius:1px;background:var(--cor);opacity:.45}

/* rótulo */
.sx-rotw{display:block}
.rot{display:inline-block;position:relative;padding-bottom:10px;font-size:30px;font-weight:700;color:var(--cort);text-transform:uppercase;letter-spacing:2px}
.sx-rotq{display:inline-block;width:12px;height:12px;border-radius:2px;background:var(--cor);margin:0 16px 0 2px;vertical-align:middle;position:relative;top:-3px;transform:scale(0)}
.rot u{position:absolute;left:0;bottom:0;height:4px;width:100%;background:var(--cor);text-decoration:none;transform-origin:0 50%;transform:scaleX(0)}

/* título */
.tit{font-size:78px;font-weight:800;line-height:1.08;margin-top:24px;letter-spacing:-1.5px;text-wrap:balance;overflow-wrap:break-word}
.tit .sx-kw{position:relative;display:inline-block;white-space:nowrap}
.tit .sx-kws{position:absolute;left:-2%;width:104%;bottom:-.1em;height:.26em;overflow:visible}
.tit .sx-kws path{fill:none;stroke:var(--cor);stroke-width:3.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.tit .sx-ult{white-space:nowrap}
.tit .sx-ponto{display:inline-block;width:.15em;height:.15em;border-radius:2px;background:var(--cor);margin-left:.07em;vertical-align:baseline}
.secao.tl1 .tit{font-size:68px}
.secao.tl2 .tit{font-size:58px;letter-spacing:-1px}

/* número grande (sem demo) */
.sx-numw{display:flex;align-items:flex-end;gap:20px;margin-top:26px;overflow:hidden;padding-top:6px}
.num{position:relative;font-size:180px;font-weight:800;line-height:1;color:transparent;-webkit-text-stroke:2px #B6C0CB;letter-spacing:-4px}
.sx-numf{position:absolute;left:0;top:0;color:var(--cor);-webkit-text-stroke:2px var(--cor);clip-path:inset(100% 0 0 0)}
.sx-numde{font-size:26px;font-weight:700;color:var(--muted);margin-bottom:26px;letter-spacing:1px}

/* itens */
.itens{flex:1;display:flex;flex-direction:column;gap:22px;position:relative}
.item{position:relative;background:#fff;border:1px solid var(--line);border-radius:8px;padding:30px 36px;display:flex;align-items:center;gap:30px;transition:none}
.item:before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:8px;border-radius:8px 0 0 8px;background:var(--cor);transform-origin:50% 50%;transform:scaleY(var(--at,0));z-index:1}
.sx-ittint{position:absolute;inset:0;border-radius:7px;background:var(--cor);opacity:0}
.item .ck{position:relative;width:52px;height:52px;border-radius:6px;border:2px solid #CBD3DC;box-sizing:border-box;background:#fff;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.sx-ckf{position:absolute;inset:-2px;border-radius:6px;background:var(--cor);transform:scale(0)}
.sx-ckn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;color:var(--cort);line-height:1}
.item .ck svg{position:relative}
.item .ck path{stroke-dasharray:24;stroke-dashoffset:24}
.item .sx-tx{position:relative;font-size:40px;font-weight:600;line-height:1.25;-webkit-text-stroke:0 currentColor}
.sx-trilho{position:absolute;left:-34px;top:0;width:2px;height:0;visibility:hidden}
.sx-trb,.sx-trf{position:absolute;left:0;top:0;width:2px;height:100%;transform-origin:50% 0;transform:scaleY(0)}
.sx-trb{background:#D5DCE4}
.sx-trf{background:var(--cor)}
.sx-trd{position:absolute;left:1px;top:0;width:14px;height:14px;border-radius:50%;border:2px solid var(--cor);box-sizing:border-box;background:#fff;transform:translate(-50%,-50%) scale(0)}

/* sem demo: quantidade de itens e textos longos */
.secao.sd.n1 .item,.secao.sd.n2 .item{padding:40px 40px}
.secao.sd.n5 .itens{gap:14px}
.secao.sd.n5 .item{padding:20px 30px}
.secao.sd.n5 .item .sx-tx,.secao.sd.il .item .sx-tx{font-size:34px}

/* com demo: coluna compacta */
.secao.cd{inset:190px 110px 140px;gap:70px}
.secao.cd .sx-esq{width:640px}
.secao.cd .sx-topos{margin-bottom:18px;gap:22px}
.secao.cd .ico{width:74px;height:74px}
.secao.cd .sx-icog svg{width:44px;height:44px}
.secao.cd .sx-conttx{font-size:22px}
.secao.cd .sx-contbar{width:190px}
.secao.cd .tit{font-size:60px;margin-top:18px}
.secao.cd.tl1 .tit{font-size:54px}
.secao.cd.tl2 .tit{font-size:46px;letter-spacing:-.8px}
.secao.cd .itens{margin-top:28px;gap:14px}
.secao.cd .sx-trilho{left:-30px}
.secao.cd .item{padding:16px 22px;gap:18px}
.secao.cd .item .ck{width:38px;height:38px}
.secao.cd .sx-ckn{font-size:19px}
.secao.cd .item .ck svg{width:22px;height:22px}
.secao.cd .item .sx-tx{font-size:28px}
.secao.cd.n5 .item{padding:12px 20px}
.secao.cd.n5 .item .sx-tx{font-size:24px}