/* ===== abas dos produtos (criatividade: cor, gráficos animados e cartões) ===== */
.bolha{position:absolute;border-radius:50%;filter:blur(60px);opacity:.45;pointer-events:none}.b1{width:340px;height:340px;background:#2563eb;left:-90px;top:-60px;animation:flutua 9s ease-in-out infinite}.b2{width:300px;height:300px;background:#7c3aed;right:-60px;bottom:-80px;animation:flutua 11s ease-in-out infinite reverse}
@keyframes flutua{50%{transform:translate(30px,24px) scale(1.08)}}.hero{position:relative;overflow:hidden}.hero .wrap{position:relative;z-index:1}
.faixa{background:var(--card);border-bottom:1px solid var(--bd)}.faixa .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.stat{padding:22px 12px;text-align:center}.stat b{display:block;font-size:30px;line-height:1.1;background:linear-gradient(90deg,#2563eb,#7c3aed);-webkit-background-clip:text;background-clip:text;color:transparent}.stat span{color:var(--mut);font-size:13.5px}
.abas-prod{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:26px}
.aba-prod{display:flex;gap:14px;align-items:center;text-align:left;padding:16px 18px;border-radius:18px;border:2px solid var(--bd);background:var(--card);color:var(--tx);font:inherit;cursor:pointer;transition:.2s;position:relative;overflow:hidden}
.aba-prod .ic{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;font-size:25px;background:linear-gradient(135deg,var(--t1),var(--t2));box-shadow:0 10px 22px color-mix(in srgb,var(--t1) 40%,transparent)}.aba-prod b{display:block;font-size:17px}.aba-prod small{color:var(--mut);font-size:13px}
.aba-prod:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--t1) 55%,var(--bd))}.aba-prod.at{border-color:var(--t1);box-shadow:0 16px 36px color-mix(in srgb,var(--t1) 28%,transparent)}.aba-prod.at::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,var(--t1),var(--t2))}
.prod-painel{display:none;grid-template-columns:1.05fr .95fr;gap:34px;align-items:start;padding:34px;border-radius:26px;border:1px solid var(--bd);background:radial-gradient(700px 320px at 100% 0%,color-mix(in srgb,var(--t1) 13%,transparent),transparent 70%),var(--card);box-shadow:var(--sombra)}
.prod-painel.on{display:grid;animation:entra .45s ease both}@keyframes entra{from{opacity:0;transform:translateY(14px)}}
.pp-cat{display:inline-block;padding:5px 13px;border-radius:99px;font-size:12.5px;font-weight:700;color:var(--t1);background:color-mix(in srgb,var(--t1) 12%,transparent)}.pp-esq h3{font-size:clamp(28px,3.6vw,40px);line-height:1.1;margin:12px 0 10px;letter-spacing:-.6px;background:linear-gradient(90deg,var(--t1),var(--t2));-webkit-background-clip:text;background-clip:text;color:transparent}
.pp-lead{font-size:18.5px;font-weight:600;margin:0 0 14px}.pp-txt{color:var(--mut);margin:0 0 12px}.pp-publico{margin:16px 0 20px;padding:13px 16px;border-left:4px solid var(--t1);background:color-mix(in srgb,var(--t1) 8%,transparent);border-radius:0 12px 12px 0;font-size:14.5px}
.btn.t{background:linear-gradient(135deg,var(--t1),var(--t2));box-shadow:0 10px 24px color-mix(in srgb,var(--t1) 40%,transparent)}.acoes{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.ilus{position:sticky;top:92px;border-radius:24px;padding:10px;background:linear-gradient(145deg,color-mix(in srgb,var(--t1) 26%,#0b1b34),color-mix(in srgb,var(--t2) 22%,#0b1b34));box-shadow:0 26px 60px color-mix(in srgb,var(--t1) 30%,transparent)}.ilus svg{display:block;width:100%;height:auto;border-radius:16px}.ilus-leg{display:block;text-align:center;color:#9fb1cc;font-size:11.5px;padding:6px 0 0}
.recursos{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:6px}
.rec{padding:20px;border-radius:18px;border:1px solid var(--bd);background:var(--bg);transition:.2s;opacity:0;transform:translateY(14px)}.prod-painel.on .rec{animation:sobe .5s ease forwards;animation-delay:var(--d)}@keyframes sobe{to{opacity:1;transform:none}}
.rec:hover{transform:translateY(-4px)!important;border-color:var(--t1);box-shadow:0 14px 30px color-mix(in srgb,var(--t1) 20%,transparent)}.rec-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;font-size:22px;background:linear-gradient(135deg,color-mix(in srgb,var(--t1) 22%,transparent),color-mix(in srgb,var(--t2) 22%,transparent))}.rec h4{margin:10px 0 4px;font-size:16px}.rec p{margin:0;color:var(--mut);font-size:14px}
/* animações dos gráficos — só rodam quando o painel está ativo */
.barra{transform-box:fill-box;transform-origin:bottom;transform:scaleY(0)}.on .barra{animation:cresce .8s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:var(--d)}@keyframes cresce{to{transform:scaleY(1)}}
.donut{stroke-dashoffset:164}.on .donut{animation:desenha 1.3s ease .2s forwards}@keyframes desenha{to{stroke-dashoffset:0}}
.linha{stroke-dasharray:1;stroke-dashoffset:1}.on .linha{animation:tracar 1.8s ease .1s forwards}@keyframes tracar{to{stroke-dashoffset:0}}.area{opacity:0}.on .area{animation:aparece 1.2s ease 1s forwards}@keyframes aparece{to{opacity:1}}
.onu{opacity:0;transform-box:fill-box;transform-origin:center}.on .onu{animation:pop .4s ease forwards;animation-delay:var(--d)}@keyframes pop{from{transform:scale(0)}to{opacity:1;transform:scale(1)}}
.pisca{animation:pisca 1.4s ease-in-out infinite}@keyframes pisca{50%{opacity:.35}}
.folha{transform-box:fill-box;transform-origin:center;opacity:0}.on .folha{animation:folha .7s ease forwards}@keyframes folha{from{opacity:0;transform:translateY(24px) rotate(-2deg)}to{opacity:1;transform:none}}
.carimbo{opacity:0;transform-box:fill-box;transform-origin:center}.on .carimbo{animation:carimba .5s cubic-bezier(.3,1.6,.5,1) 1s forwards}@keyframes carimba{from{opacity:0;transform:scale(2.4)}to{opacity:1;transform:scale(1)}}
.fatia,.fatia2,.fatia3{opacity:0}.on .fatia,.on .fatia2,.on .fatia3{animation:aparece .8s ease .7s forwards}
.revela{opacity:0;transform:translateY(22px);transition:.6s ease}.revela.v{opacity:1;transform:none}
@media (max-width:900px){.abas-prod{grid-template-columns:1fr}.prod-painel.on{grid-template-columns:1fr;padding:22px}.recursos{grid-template-columns:1fr}.ilus{position:static}.faixa .wrap{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.barra,.onu,.rec,.folha,.carimbo,.fatia,.fatia2,.fatia3,.area,.revela{opacity:1!important;transform:none!important}.donut,.linha{stroke-dashoffset:0!important}}
/* compra */
.passos-compra{display:flex;gap:8px;margin:0 0 22px;flex-wrap:wrap}.passos-compra span{padding:6px 14px;border-radius:99px;background:var(--bd);font-size:13px;font-weight:600;color:var(--mut)}.passos-compra span.at{background:var(--pri);color:#fff}
.escolha{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.escolha label{margin:0;cursor:pointer;position:relative}.escolha input{position:absolute;opacity:0;width:0}.escolha .op{display:block;padding:16px;border-radius:16px;border:2px solid var(--bd);background:var(--bg);transition:.15s;color:var(--tx)}.escolha .op b{display:block;font-size:15px;margin:6px 0 2px}.escolha .op small{font-weight:400;color:var(--mut)}
.escolha input:checked+.op{border-color:var(--t1);background:color-mix(in srgb,var(--t1) 10%,var(--bg));box-shadow:0 10px 24px color-mix(in srgb,var(--t1) 22%,transparent)}.escolha .op .i{font-size:26px}
.codigo{font:800 28px/1.2 ui-monospace,Consolas,monospace;letter-spacing:2px;background:linear-gradient(90deg,#2563eb,#7c3aed);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (max-width:700px){.escolha{grid-template-columns:1fr}}