.il{--ciclo: 6s;position: relative;height: 136px;border-radius: 14px;overflow: hidden;display: grid;place-items: center;padding: 12px;background: radial-gradient(120% 90% at 50% 0%,hsl(146 62% 95%),var(--c-afundado) 70%);border: 1px solid var(--c-linha);font-size: 11px;line-height: 1.3;font-weight: 600;color: var(--c-tinta);text-align: left;container-type: inline-size;user-select: none}
.il::before{content: "";position: absolute;inset: 0;pointer-events: none;background-image: radial-gradient(hsl(153 40% 40% / .11) 1px,transparent 1px);background-size: 14px 14px}
.il > *{position: relative}
.il.alto{height: 156px}
.il svg.icone{width: 13px;height: 13px;flex: none}
.il img{display: block}
.il-coluna{display: grid;gap: 8px;justify-items: center;width: 100%;max-width: 250px}
.il-coluna.esq{justify-items: stretch}
.il-linha-h{display: flex;align-items: center;gap: 6px}
.il-linha-h.centro{justify-content: center;flex-wrap: wrap}
.il-pilha{display: grid}
.il-pilha > *{grid-area: 1 / 1}
.il-campo{display: flex;align-items: center;gap: 7px;width: 100%;min-height: 30px;padding: 6px 10px;border-radius: 9px;background: #fff;border: 1px solid var(--c-linha-2);box-shadow: 0 6px 16px -12px hsl(160 30% 10% / .35);color: var(--c-corpo);font-weight: 600;overflow: hidden;white-space: nowrap}
.il-campo svg.icone{color: var(--c-apagado)}
.il-digita{display: inline-block;overflow: hidden;white-space: nowrap;max-width: 100%;vertical-align: bottom}
.il-botao{display: inline-flex;align-items: center;justify-content: center;gap: 6px;padding: 8px 12px;border-radius: 9px;font-size: 11px;font-weight: 800;color: #fff;background: var(--c-verde);white-space: nowrap;box-shadow: 0 10px 20px -12px hsl(153 66% 28% / .7)}
.il-botao.claro{color: var(--c-tinta);background: #fff;border: 1px solid var(--c-linha-2);font-weight: 700;box-shadow: none}
.il-botao.pequeno{padding: 5px 9px;font-size: 10px;border-radius: 8px}
.il-botao svg.icone{width: 12px;height: 12px;stroke-width: 2.4}
.il-chip{display: inline-flex;align-items: center;gap: 5px;padding: 5px 9px;border-radius: 999px;font-size: 10.5px;font-weight: 700;color: var(--c-corpo);background: #fff;border: 1px solid var(--c-linha-2);white-space: nowrap}
.il-chip.on{color: #fff;background: var(--c-tinta);border-color: var(--c-tinta)}
.il-chip.verde{color: var(--c-verde);background: var(--c-verde-fundo);border-color: hsl(148 46% 78%)}
.il-chip svg{width: 12px;height: 12px;flex: none}
.il-chip .whats{color: #25d366}
.il-chip .tele{color: #26a5e4}
.il-abas{display: inline-flex;padding: 3px;border-radius: 10px;background: var(--c-afundado);border: 1px solid var(--c-linha);gap: 2px}
.il-abas > *{display: inline-flex;align-items: center;gap: 5px;padding: 4px 8px;border-radius: 7px;font-size: 10px;font-weight: 700;color: var(--c-corpo)}
.il-abas > .on{background: #fff;color: var(--c-tinta);box-shadow: 0 1px 3px hsl(160 30% 10% / .14)}
.il-logo{width: 22px;height: 22px;border-radius: 6px;flex: none}
.il-logo.p{width: 16px;height: 16px;border-radius: 4px}
.il-cartao{background: #fff;border: 1px solid var(--c-linha);border-radius: 10px;padding: 8px;box-shadow: 0 8px 18px -14px hsl(160 30% 10% / .4)}
.il-produto{display: grid;grid-template-columns: 34px 1fr;gap: 8px;align-items: center}
.il-foto{width: 34px;height: 34px;border-radius: 8px;object-fit: cover;background: linear-gradient(135deg,hsl(140 20% 92%),hsl(140 16% 84%));display: grid;place-items: center;color: var(--c-apagado);flex: none}
.il-foto.g{width: 100%;height: 44px}
.il-tx{display: block;height: 6px;border-radius: 3px;background: var(--c-linha);width: 100%}
.il-tx.c80{width: 80%}
.il-tx.c60{width: 60%}
.il-tx.c40{width: 40%}
.il-tx.forte{background: var(--c-linha-2);height: 7px}
.il-tx.verde{background: hsl(153 50% 70%)}
.il-pos{display: inline-grid;place-items: center;min-width: 20px;height: 20px;padding: 0 4px;border-radius: 6px;font-size: 9.5px;font-weight: 800;color: #fff;background: var(--c-tinta)}
.il-pos.ouro{background: linear-gradient(180deg,hsl(42 92% 52%),hsl(36 90% 42%))}
.il-tag{display: inline-flex;align-items: center;gap: 4px;padding: 2px 7px;border-radius: 6px;font-size: 10px;font-weight: 800;color: var(--c-verde);background: var(--c-verde-fundo);white-space: nowrap}
.il-tag.cinza{color: var(--c-apagado);background: var(--c-afundado)}
.il-ok{display: inline-grid;place-items: center;width: 18px;height: 18px;border-radius: 50%;color: #fff;background: var(--c-verde);flex: none}
.il-ok svg.icone{width: 11px;height: 11px;stroke-width: 3}
.il-seta{color: var(--c-verde);width: 14px;height: 14px;flex: none}
.il-toque{position: absolute;width: 26px;height: 26px;margin: -13px 0 0 -13px;border-radius: 50%;background: hsl(153 66% 32% / .22);border: 2px solid hsl(153 66% 32% / .6);opacity: 0;pointer-events: none;z-index: 5}
.il-balao{background: #005c4b;color: #e9edef;border-radius: 9px 2px 9px 9px;padding: 6px 7px;font-size: 10px;line-height: 1.35;font-weight: 500;box-shadow: 0 1px 1px hsl(0 0% 0% / .25)}
.il-balao b{font-weight: 800;color: #fff}
.il-balao s{opacity: .75}
.il-balao .il-tx{background: hsl(0 0% 100% / .28)}
.il-balao .il-tx.forte{background: hsl(0 0% 100% / .6)}
.il-pontos{display: inline-flex;gap: 4px;align-items: center}
.il-pontos i{width: 6px;height: 6px;border-radius: 50%;background: var(--c-verde)}
.il.pausada,.il.pausada *{animation-play-state: paused !important}
.il-comissoes{--ciclo: 7s;--cm-passo: 28px}
.il-comissoes .cm-cena{gap: 6px}
.il-comissoes .cm-topo{display: flex;align-items: center;gap: 6px}
.il-comissoes .cm-ordenar{position: relative;flex: 1;display: flex;align-items: center;gap: 6px;height: 24px;padding: 0 9px;border-radius: 8px;background: #fff;border: 1px solid var(--c-linha-2);font-size: 10px;white-space: nowrap}
.il-comissoes .cm-rot{color: var(--c-apagado);font-weight: 600}
.il-comissoes .cm-valor b{font-weight: 800;color: var(--c-tinta)}
.il-comissoes .cm-antes{opacity: 0}
.il-comissoes .cm-seta{margin-left: auto;width: 6px;height: 6px;border-right: 1.6px solid var(--c-apagado);border-bottom: 1.6px solid var(--c-apagado);transform: translateY(-2px) rotate(45deg)}
.il-comissoes .cm-anel{position: absolute;inset: -1px;border-radius: 8px;border: 1.5px solid var(--c-verde);box-shadow: 0 0 0 3px hsl(153 66% 32% / .12)}
.il-comissoes .il-toque{left: 58%;top: 50%}
.il-comissoes .cm-lista{display: grid;gap: 4px}
.il-comissoes .cm-linha{position: relative;display: grid;grid-template-columns: 16px minmax(0,1fr) auto minmax(0,2fr) 15px;align-items: center;gap: 6px;height: 24px;padding: 0 7px;border-radius: 8px;background: #fff;border: 1px solid var(--c-linha);box-shadow: 0 6px 14px -12px hsl(160 30% 10% / .4)}
.il-comissoes .cm-linha > *{position: relative}
.il-comissoes .cm-a{z-index: 2}
.il-comissoes .cm-linha .il-foto{width: 16px;height: 16px;border-radius: 4px}
.il-comissoes .cm-a .il-tx{width: 86%}
.il-comissoes .cm-b .il-tx{width: 100%}
.il-comissoes .cm-c .il-tx{width: 68%}
.il-comissoes .cm-rotulo{font-size: 10px;font-weight: 800;color: var(--c-verde-texto)}
.il-comissoes .cm-barra{display: block;height: 8px;border-radius: 4px;background: var(--c-verde)}
.il-comissoes .cm-a .cm-barra{width: 100%}
.il-comissoes .cm-b .cm-barra{width: 62%}
.il-comissoes .cm-c .cm-barra{width: 30%}
.il-comissoes .cm-linha .cm-sombra{position: absolute;inset: -1px;border-radius: 8px;box-shadow: 0 10px 18px -8px hsl(160 30% 10% / .5);opacity: 0}
.il-comissoes .cm-linha .cm-realce{position: absolute;inset: -1px;border-radius: 8px;border: 1.5px solid var(--c-verde);background: hsl(146 60% 93%)}
.il-comissoes .cm-linha svg.cm-moeda{width: 15px;height: 15px;color: var(--c-verde);stroke-width: 2.2}
@media (prefers-reduced-motion: no-preference){.js:not(.estatico) .visivel .il-comissoes .il-toque{animation: cm-toque var(--ciclo) ease-out infinite}
.js:not(.estatico) .visivel .il-comissoes .cm-antes{animation: cm-antes var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-comissoes .cm-depois{animation: cm-depois var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-comissoes .cm-anel{animation: cm-anel var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-comissoes .cm-a{animation: cm-sobe var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-comissoes .cm-b{animation: cm-desce-1 var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-comissoes .cm-c{animation: cm-desce-2 var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-comissoes .cm-sombra{animation: cm-sombra var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-comissoes .cm-realce{animation: cm-realce var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-comissoes .cm-moeda{animation: cm-moeda var(--ciclo) var(--salto) infinite}
}
@keyframes cm-toque{0%,15%{opacity: 0;transform: scale(.6)}
19%{opacity: 1;transform: scale(1)}
26%,100%{opacity: 0;transform: scale(1.5)}
}
@keyframes cm-antes{0%,21%{opacity: 1}
24%,94%{opacity: 0}
99%,100%{opacity: 1}
}
@keyframes cm-depois{0%,23%{opacity: 0;transform: translateY(3px)}
28%,92%{opacity: 1;transform: none}
96%,100%{opacity: 0;transform: none}
}
@keyframes cm-anel{0%,22%{opacity: 0}
28%,92%{opacity: 1}
98%,100%{opacity: 0}
}
@keyframes cm-sobe{0%{opacity: 0;transform: translateY(calc(var(--cm-passo) * 2)) scale(1)}
4%,28%{opacity: 1;transform: translateY(calc(var(--cm-passo) * 2)) scale(1)}
31%{opacity: 1;transform: translateY(calc(var(--cm-passo) * 2)) scale(1.035);animation-timing-function: cubic-bezier(.45,0,.4,1)}
45%{opacity: 1;transform: translateY(0) scale(1.035)}
48%,92%{opacity: 1;transform: translateY(0) scale(1)}
98%,100%{opacity: 0;transform: translateY(0) scale(1)}
}
@keyframes cm-sombra{0%,28%{opacity: 0}
31%,45%{opacity: 1}
48%,100%{opacity: 0}
}
@keyframes cm-desce-2{0%{opacity: 0;transform: translateY(calc(var(--cm-passo) * -1))}
4%,34.5%{opacity: 1;transform: translateY(calc(var(--cm-passo) * -1))}
41%,92%{opacity: 1;transform: translateY(0)}
98%,100%{opacity: 0;transform: translateY(0)}
}
@keyframes cm-desce-1{0%{opacity: 0;transform: translateY(calc(var(--cm-passo) * -1))}
4%,37.5%{opacity: 1;transform: translateY(calc(var(--cm-passo) * -1))}
45%,92%{opacity: 1;transform: translateY(0)}
98%,100%{opacity: 0;transform: translateY(0)}
}
@keyframes cm-realce{0%,48%{opacity: 0}
54%,100%{opacity: 1}
}
@keyframes cm-moeda{0%,51%{opacity: 0;transform: scale(.3)}
58%,100%{opacity: 1;transform: none}
}
.il-compartilhar{align-items: end;padding-bottom: 0}
.il-compartilhar .cp-folha{width: 100%;max-width: 250px;display: grid;padding: 5px 10px 10px;background: #fff;border: 1px solid var(--c-linha);border-bottom: 0;border-radius: 14px 14px 0 0;box-shadow: 0 -10px 24px -14px hsl(160 30% 10% / .4)}
.il-compartilhar .cp-alca{justify-self: center;width: 28px;height: 4px;margin-bottom: 6px;border-radius: 2px;background: var(--c-linha-2)}
.il-compartilhar .cp-oferta{display: flex;align-items: center;gap: 8px;padding: 4px;border-radius: 10px;background: var(--c-fundo);border: 1px solid var(--c-linha)}
.il-compartilhar .cp-oferta .il-foto{width: 30px;height: 30px;border-radius: 7px}
.il-compartilhar .cp-texto{flex: 1;min-width: 0;display: grid;gap: 5px}
.il-compartilhar .cp-selo{margin-right: 3px}
.il-compartilhar .cp-destinos{display: grid;grid-template-columns: repeat(3,1fr);margin-top: 10px}
.il-compartilhar .cp-dest{display: grid;justify-items: center;gap: 5px;font-size: 10px;font-weight: 700;color: var(--c-corpo)}
.il-compartilhar .cp-bola{position: relative;display: grid;place-items: center;width: 28px;height: 28px;border-radius: 50%}
.il-compartilhar .cp-whats{background: #25d366;color: #fff}
.il-compartilhar .cp-whats svg{width: 16px;height: 16px}
.il-compartilhar .cp-tele{background: #fff;color: #26a5e4}
.il-compartilhar .cp-tele svg{width: 28px;height: 28px}
.il-compartilhar .cp-copiar{background: var(--c-afundado);border: 1px solid var(--c-linha-2);color: var(--c-tinta)}
.il-compartilhar .cp-anel{position: absolute;inset: -4px;border-radius: 50%;border: 2px solid var(--c-verde);opacity: 0}
@media (prefers-reduced-motion: no-preference){.js:not(.estatico) .visivel .il-compartilhar .cp-folha{animation: cp-folha var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-compartilhar .cp-selo{animation: cp-selo var(--ciclo) var(--salto) infinite}
.js:not(.estatico) .visivel .il-compartilhar .cp-a1{animation: cp-anel-1 var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-compartilhar .cp-a2{animation: cp-anel-2 var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-compartilhar .cp-a3{animation: cp-anel-3 var(--ciclo) var(--suave) infinite}
}
@keyframes cp-folha{0%{opacity: 0;transform: translateY(70%)}
10%,92%{opacity: 1;transform: none}
98%,100%{opacity: 0;transform: translateY(18px)}
}
@keyframes cp-selo{0%,13%{opacity: 0;transform: scale(.5)}
20%,100%{opacity: 1;transform: none}
}
@keyframes cp-anel-1{0%,24%{opacity: 0;transform: scale(.7)}
29%,35%{opacity: 1;transform: none}
40%,100%{opacity: 0;transform: scale(1.12)}
}
@keyframes cp-anel-2{0%,35%{opacity: 0;transform: scale(.7)}
40%,46%{opacity: 1;transform: none}
51%,100%{opacity: 0;transform: scale(1.12)}
}
@keyframes cp-anel-3{0%,46%{opacity: 0;transform: scale(.7)}
51%,57%{opacity: 1;transform: none}
62%,100%{opacity: 0;transform: scale(1.12)}
}
.il-conversor .il-pilha{align-items: start}
.il-conversor .cv-botao{align-self: start;justify-self: stretch;opacity: 0}
.il-conversor .cv-res{display: grid;gap: 6px}
.il-conversor .cv-res b{font-weight: 800}
.il-conversor .cv-res .il-tag{margin-left: auto}
.il-conversor .cv-link{justify-content: space-between;padding: 5px 8px;border-radius: 7px;background: var(--c-verde-fundo)}
.il-conversor .cv-link b{color: var(--c-verde);white-space: nowrap;overflow: hidden;text-overflow: ellipsis}
.il-conversor .cv-link .icone{color: var(--c-verde)}
.il-conversor .il-toque{left: 50%;top: 59px}
@media (prefers-reduced-motion: no-preference){.js:not(.estatico) .visivel .il-conversor .il-digita{animation: cv-digita var(--ciclo) steps(24,end) infinite}
.js:not(.estatico) .visivel .il-conversor .cv-botao{animation: cv-botao var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-conversor .cv-res{animation: cv-res var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-conversor .il-toque{animation: cv-toque var(--ciclo) ease-out infinite}
}
@keyframes cv-digita{0%,5%{max-width: 0;opacity: 1}
27%,92%{max-width: 100%;opacity: 1}
98%,100%{max-width: 100%;opacity: 0}
}
@keyframes cv-botao{0%{opacity: 0;transform: none}
4%,31%{opacity: 1;transform: none}
35%{opacity: 1;transform: scale(.95)}
39%{opacity: 1;transform: none}
45%,100%{opacity: 0;transform: scale(.98)}
}
@keyframes cv-res{0%,43%{opacity: 0;transform: translateY(8px)}
51%,92%{opacity: 1;transform: none}
98%,100%{opacity: 0;transform: none}
}
@keyframes cv-toque{0%,30%{opacity: 0;transform: scale(.6)}
34%{opacity: 1;transform: scale(1)}
41%,100%{opacity: 0;transform: scale(1.5)}
}
.demo-garimpo{display: grid;gap: 10px;min-width: 0;font-size: 11px;line-height: 1.4;color: var(--c-corpo);text-align: left}
.demo-garimpo .dgp-topo{grid-template-columns: minmax(0,1fr);gap: 8px;padding: 10px}
.demo-garimpo .dgp-busca{display: flex;flex-wrap: wrap;align-items: stretch;gap: 8px;min-width: 0}
.demo-garimpo .dgp-lojas{flex: 1 1 100%;min-width: 0;overflow: hidden}
.demo-garimpo .il-abas > *{flex: 1 1 auto;justify-content: center;padding: 5px 6px;font-size: 10.5px;white-space: nowrap}
.demo-garimpo .il-abas > .on{color: var(--c-verde-texto)}
.demo-garimpo .dgp-campo{flex: 1 1 0;min-width: 0;display: flex;align-items: center;gap: 7px;min-height: 30px;padding: 0 9px;border: 1px solid var(--c-linha-2);border-radius: 9px;background: #fff;font-size: 11px;font-weight: 600;color: var(--c-tinta);white-space: nowrap;overflow: hidden}
.demo-garimpo .dgp-campo .icone{width: 12px;height: 12px;color: var(--c-apagado)}
.demo-garimpo .dgp-campo .icone:last-child{margin-left: auto;width: 11px;height: 11px}
.demo-garimpo .dgp-procurar{padding: 0 12px}
.demo-garimpo .dgp-procurar .icone{width: 11px;height: 11px}
.demo-garimpo .dgp-filtros{display: flex;flex-wrap: wrap;gap: 5px 4px;min-width: 0}
.demo-garimpo .dgp-f{flex: 1 1 auto;display: inline-flex;align-items: center;justify-content: center;gap: 5px;height: 26px;padding: 0 7px;border: 1px solid var(--c-linha-2);border-radius: 8px;background: #fff;font-size: 10px;font-weight: 600;color: var(--c-corpo);white-space: nowrap}
.demo-garimpo .dgp-f > span{color: var(--c-apagado)}
.demo-garimpo .dgp-f > i{font-style: normal;color: var(--c-apagado)}
.demo-garimpo .dgp-f .dgp-in{display: inline-grid;place-items: center;min-width: 18px;height: 16px;padding: 0 4px;border-radius: 5px;background: var(--c-afundado);font-weight: 500}
.demo-garimpo .dgp-f .dgp-seta{width: 5px;height: 5px;margin: -3px 1px 0 2px;border: solid var(--c-apagado);border-width: 0 1.5px 1.5px 0;transform: rotate(45deg)}
.demo-garimpo .dgp-f.on{border-color: var(--c-verde);background: var(--c-verde-fundo);color: var(--c-verde-texto);font-weight: 700}
.demo-garimpo .dgp-ordenar{position: relative;border-color: var(--c-verde);box-shadow: 0 0 0 2px hsl(153 66% 32% / .2)}
.demo-garimpo .dgp-ordenar b{font-weight: 800;color: var(--c-verde-texto)}
.demo-garimpo .dgp-ordenar .dgp-seta{border-color: var(--c-verde)}
.demo-garimpo .dgp-ordenar::after{content: "";position: absolute;inset: -5px;border-radius: 12px;border: 2px solid var(--c-verde);opacity: 0;pointer-events: none}
.demo-garimpo .dgp-chaves{display: contents}
.demo-garimpo .dgp-so-medio,.demo-garimpo .dgp-so-largo{display: none}
.demo-garimpo .dgp-pop{display: flex;align-items: center;gap: 5px;overflow: hidden;-webkit-mask-image: linear-gradient(90deg,#000 calc(100% - 44px),transparent calc(100% - 6px));mask-image: linear-gradient(90deg,#000 calc(100% - 44px),transparent calc(100% - 6px))}
.demo-garimpo .dgp-pop-rot{flex: none;margin-right: 1px;font-size: 10px;font-weight: 500;color: var(--c-apagado)}
.demo-garimpo .dgp-pop .il-chip{flex: none;padding: 4px 10px;font-weight: 600;border-color: var(--c-linha)}
.demo-garimpo .dgp-pop .il-chip.on{color: #fff;background: var(--c-verde);border-color: var(--c-verde);font-weight: 700}
.demo-garimpo .dgp-res{display: grid;gap: 8px;min-width: 0}
.demo-garimpo .dgp-ativos{display: flex;align-items: center;gap: 5px;min-width: 0}
.demo-garimpo .dgp-ficha{display: inline-flex;align-items: center;gap: 4px;padding: 3px 6px 3px 9px;border-radius: 999px;border: 1px solid hsl(148 46% 78%);background: var(--c-verde-fundo);font-size: 10px;font-weight: 700;color: var(--c-verde-texto);white-space: nowrap}
.demo-garimpo .dgp-ficha .icone{width: 10px;height: 10px;stroke-width: 2.4}
.demo-garimpo .dgp-limpar{display: none;margin-left: 3px;font-size: 10px;font-weight: 700;color: var(--c-verde-texto);white-space: nowrap}
.demo-garimpo .dgp-grade{display: grid;grid-template-columns: repeat(2,minmax(0,1fr));gap: 8px}
.demo-garimpo .dgp-card{display: grid;grid-template-rows: auto 1fr;min-width: 0;background: #fff;border: 1px solid var(--c-linha);border-radius: 12px;overflow: hidden;box-shadow: 0 1px 2px hsl(160 30% 10% / .05)}
.demo-garimpo .dgp-foto{height: 56px;display: grid;place-items: center;background: linear-gradient(135deg,hsl(140 20% 93%),hsl(140 16% 86%));color: hsl(150 10% 64%)}
.demo-garimpo .dgp-foto .icone{width: 22px;height: 22px;stroke-width: 1.5}
.demo-garimpo .dgp-corpo{display: grid;align-content: start;gap: 6px;padding: 8px}
.demo-garimpo .dgp-nome{display: grid;gap: 4px}
.demo-garimpo .dgp-preco{display: flex;align-items: center;gap: 6px}
.demo-garimpo .dgp-preco i{display: block;height: 9px;width: 40%;border-radius: 3px;background: hsl(160 10% 62%)}
.demo-garimpo .dgp-preco i + i{height: 5px;width: 22%;background: var(--c-linha-2)}
.demo-garimpo .dgp-com{display: grid;gap: 4px;padding: 5px 7px 7px;border-radius: 6px;background: var(--c-verde-fundo)}
.demo-garimpo .dgp-com b{font-size: 10px;line-height: 1.2;font-weight: 800;color: var(--c-verde-texto)}
.demo-garimpo .dgp-com i{display: block;height: 7px;border-radius: 4px;background: hsl(148 44% 84%)}
.demo-garimpo .dgp-com i i{width: calc(var(--c) * 100%);background: var(--c-verde);transform-origin: left}
.demo-garimpo .dgp-usar{padding: 6px;font-size: 10px;border-radius: 7px}
.demo-garimpo .dgp-usar .icone{width: 11px;height: 11px}
@container tela (max-width: 289px){.demo-garimpo .il-abas > *{gap: 4px;padding: 5px 3px;font-size: 10px}
.demo-garimpo .il-abas .il-logo{width: 14px;height: 14px}
}
@container tela (min-width: 304px){.demo-garimpo .dgp-limpar{display: block}
}
@container tela (min-width: 400px){.demo-garimpo .il-abas > *{padding: 5px 8px}
.demo-garimpo .dgp-so-medio{display: inline-flex}
.demo-garimpo .dgp-f{flex: none}
.demo-garimpo .dgp-filtros{gap: 5px}
.demo-garimpo .dgp-grade{grid-template-columns: repeat(3,minmax(0,1fr))}
}
@container tela (min-width: 464px){.demo-garimpo .dgp-so-largo{display: inline-flex}
}
@container tela (min-width: 520px){.demo-garimpo{gap: 12px}
.demo-garimpo .dgp-topo{padding: 12px;gap: 9px}
.demo-garimpo .dgp-filtros{gap: 5px 4px}
.demo-garimpo .dgp-res{gap: 10px}
.demo-garimpo .dgp-grade{grid-template-columns: repeat(4,minmax(0,1fr));gap: 10px}
.demo-garimpo .dgp-corpo{gap: 7px;padding: 9px}
}
@container tela (min-width: 580px){.demo-garimpo .dgp-lojas{flex: none}
.demo-garimpo .dgp-foto{height: auto;aspect-ratio: 3 / 2}
}
@container tela (min-width: 616px){.demo-garimpo .dgp-pop{-webkit-mask-image: none;mask-image: none}
.demo-garimpo .dgp-pop .il-chip:last-child{display: none}
}
@container tela (min-width: 700px){.demo-garimpo .dgp-chaves{display: flex;flex: 1 1 100%;gap: 4px}
.demo-garimpo .dgp-pop .il-chip:last-child{display: inline-flex}
}
@media (prefers-reduced-motion: no-preference){.js:not(.estatico) .visivel .tela.on .demo-garimpo .dgp-topo,.js:not(.estatico) .visivel .tela.on .demo-garimpo .dgp-ativos,.js:not(.estatico) .visivel .tela.on .demo-garimpo .dgp-card{animation: dgp-entra .5s var(--suave) both;animation-delay: calc(var(--i) * 60ms)}
.js:not(.estatico) .visivel .tela.on .demo-garimpo .dgp-com i i{animation: dgp-cresce .6s var(--suave) both;animation-delay: calc(var(--i) * 60ms + 260ms)}
.js:not(.estatico) .visivel .tela.on .demo-garimpo .dgp-ordenar::after{animation: dgp-anel .7s var(--suave) .55s both}
}
@keyframes dgp-entra{from{opacity: 0;transform: translateY(10px)}
}
@keyframes dgp-cresce{from{transform: scaleX(0)}
}
@keyframes dgp-anel{0%{opacity: 0;transform: scale(.96)}
35%{opacity: .85;transform: none}
100%{opacity: 0;transform: scale(1.05)}
}
.demo-gerar{display: grid;gap: 7px;align-items: start;min-width: 0;font-size: 11px;line-height: 1.35;color: var(--c-corpo);text-align: left}
.demo-gerar svg.icone{width: 12px;height: 12px}
.demo-gerar .dg-esq{display: grid;gap: 7px;min-width: 0}
.demo-gerar .mini-cartao{padding: 10px;gap: 6px 10px;min-width: 0}
.demo-gerar .mini-passo{white-space: nowrap}
.demo-gerar .dg-c1{grid-template-columns: 48px minmax(0,1fr) auto;grid-template-areas: "foto passo trocar" "foto dados dados";align-items: center;row-gap: 3px}
.demo-gerar .dg-c1 .mini-passo{grid-area: passo}
.demo-gerar .dg-trocar{grid-area: trocar;padding: 2px 0 2px 8px;font-size: 10px;font-weight: 800;color: var(--c-verde-texto);white-space: nowrap}
.demo-gerar .dg-foto{grid-area: foto;width: 48px;height: 48px;border-radius: 9px;object-fit: cover;border: 1px solid var(--c-linha)}
.demo-gerar .dg-dados{grid-area: dados;display: grid;grid-template-columns: minmax(0,1fr) auto;grid-template-areas: "nome nome" "precos loja";gap: 1px 6px;align-items: center;min-width: 0}
.demo-gerar .dg-loja{display: none;grid-area: loja;padding: 1px 7px;border-radius: 999px;font-size: 9.5px;font-weight: 800;color: var(--c-verde-texto);background: var(--c-verde-fundo)}
.demo-gerar .dg-nome{grid-area: nome;font-size: 11.5px;font-weight: 800;line-height: 1.3;color: var(--c-tinta)}
.demo-gerar .dg-precos{grid-area: precos;display: flex;align-items: baseline;gap: 6px;flex-wrap: wrap;min-width: 0}
.demo-gerar .dg-por{font-size: 13px;font-weight: 800;letter-spacing: -.02em;color: var(--c-tinta)}
.demo-gerar .dg-de{font-size: 10px;color: var(--c-apagado)}
.demo-gerar .dg-pct{padding: 1px 6px;border-radius: 999px;font-style: normal;font-size: 9.5px;font-weight: 800;color: var(--c-verde-texto);background: var(--c-verde-fundo)}
.demo-gerar .dg-editar{grid-area: editar;display: none;align-items: center;gap: 8px;padding: 7px 10px;border: 1px solid var(--c-linha);border-radius: 9px;font-size: 10.5px;color: var(--c-apagado)}
.demo-gerar .dg-editar b{font-weight: 800;color: var(--c-tinta);white-space: nowrap}
.demo-gerar .dg-editar span{margin-left: auto;white-space: nowrap}
.demo-gerar .dg-editar i{width: 6px;height: 6px;margin: 0 2px 3px;border-right: 1.5px solid var(--c-apagado);border-bottom: 1.5px solid var(--c-apagado);transform: rotate(45deg);flex: none}
.demo-gerar .dg-c2{grid-template-columns: minmax(0,1fr) auto;grid-template-areas: "passo gerar" "estilos estilos";align-items: center}
.demo-gerar .dg-c2 .mini-passo{grid-area: passo}
.demo-gerar .dg-gerar{grid-area: gerar;padding: 4px 10px;font-size: 10px;letter-spacing: .01em;box-shadow: 0 6px 14px -8px hsl(153 66% 28% / .6)}
.demo-gerar .dg-estilos{grid-area: estilos;display: flex;flex-wrap: wrap;gap: 4px}
.demo-gerar .dg-estilos span{flex: 0 1 auto;padding: 4px 8px;text-align: center;font-size: 9.5px;white-space: nowrap}
.demo-gerar .dg-estilos span.ativa{color: var(--c-tinta);font-weight: 800;background: var(--c-verde-fundo);border-color: var(--c-verde);box-shadow: inset 0 0 0 1px var(--c-verde)}
.demo-gerar .dg-topo{display: flex;align-items: center;gap: 4px 8px;flex-wrap: wrap;min-width: 0}
.demo-gerar .dg-sub{display: none;font-size: 10.5px;color: var(--c-apagado);white-space: nowrap}
.demo-gerar .dg-afiliado{margin-left: auto;font-size: 9.5px}
.demo-gerar .dg-afiliado svg.icone{width: 10px;height: 10px;stroke-width: 3}
.demo-gerar .dg-conversa{display: grid;justify-items: end;padding: 6px;border-radius: 10px;background: radial-gradient(hsl(40 20% 82% / .45) 1px,transparent 1px) 0 0 / 14px 14px,#efeae2;border: 1px solid var(--c-linha)}
.demo-gerar .dg-balao{width: 100%;max-width: min(316px,calc(100% - 18px));padding: 4px 4px 5px;font-size: 10.5px;line-height: 1.36;transform-origin: 100% 0}
.demo-gerar .dg-balao{background: #d9fdd3;color: #111b21;box-shadow: 0 1px 1px hsl(160 30% 10% / .12)}
.demo-gerar .dg-balao b{color: #111b21}
.demo-gerar .dg-balao s{opacity: 1;color: #54656f}
.demo-gerar .dg-balao p{margin: 0;padding: 0 4px;color: inherit}
.demo-gerar .dg-balao p + p{margin-top: 3px}
.demo-gerar .dg-fotona{display: block;width: 100%;height: 62px;margin-bottom: 5px;border-radius: 6px;object-fit: cover;object-position: 50% 30%}
.demo-gerar .dg-link{color: #027eb5}
.demo-gerar .dg-hora{float: right;display: inline-flex;align-items: center;gap: 3px;margin: 2px 0 0 8px;font-size: 9px;color: #667781}
.demo-gerar .dg-hora svg.icone{width: 12px;height: 12px;stroke-width: 2.2;color: #53bdeb}
.demo-gerar .dg-whats{width: 100%;padding: 9px 10px;font-size: 10.5px;letter-spacing: .01em;background: hsl(142 68% 36%);box-shadow: 0 8px 16px -10px hsl(142 70% 26% / .7)}
.demo-gerar .dg-glifo{width: 14px;height: 14px;flex: none}
.demo-gerar .dg-acoes{display: grid;grid-template-columns: repeat(2,minmax(0,1fr));gap: 6px}
.demo-gerar .dg-acoes .mini-botao{min-width: 0;padding: 6px;font-size: 10px}
@container tela (min-width: 290px){.demo-gerar .dg-loja{display: block}
.demo-gerar .dg-nome{white-space: nowrap}
.demo-gerar .dg-estilos{flex-wrap: nowrap}
.demo-gerar .dg-estilos span{flex-grow: 1;padding: 4px 5px}
}
@container tela (min-width: 400px){.demo-gerar .dg-estilos span{padding: 5px 8px;font-size: 10.5px}
.demo-gerar .dg-sub{display: block}
.demo-gerar .dg-fotona{height: 84px}
.demo-gerar .dg-acoes{grid-template-columns: repeat(4,minmax(0,1fr))}
}
@container tela (min-width: 520px){.demo-gerar{grid-template-columns: minmax(0,1fr) minmax(0,1.12fr);gap: 12px}
.demo-gerar .dg-esq{gap: 12px}
.demo-gerar .mini-cartao{padding: 12px;gap: 9px 10px}
.demo-gerar .dg-c1{grid-template-columns: auto minmax(0,1fr) auto;grid-template-areas: "passo passo trocar" "foto dados dados" "editar editar editar";row-gap: 9px}
.demo-gerar .dg-foto{width: clamp(60px,16cqw - 27px,76px);height: auto;aspect-ratio: 1;border-radius: 10px}
.demo-gerar .dg-dados{grid-template-columns: minmax(0,1fr);grid-template-areas: "loja" "nome" "precos";gap: 3px}
.demo-gerar .dg-loja{justify-self: start}
.demo-gerar .dg-nome{white-space: normal;text-wrap: balance}
.demo-gerar .dg-precos{gap: 5px}
.demo-gerar .dg-por{font-size: clamp(14px,2.4cqw,15px)}
.demo-gerar .dg-editar{display: flex}
.demo-gerar .dg-c2{grid-template-columns: minmax(0,1fr);grid-template-areas: "passo" "estilos" "gerar"}
.demo-gerar .dg-estilos{display: grid;grid-template-columns: repeat(3,minmax(0,1fr));gap: 6px}
.demo-gerar .dg-estilos span{padding: 6px 4px}
.demo-gerar .dg-gerar{padding: 11px 12px;font-size: 11.5px}
.demo-gerar .dg-sub{order: 3;flex-basis: 100%}
.demo-gerar .dg-conversa{padding: 8px}
.demo-gerar .dg-balao p + p{margin-top: 4px}
.demo-gerar .dg-fotona{height: 108px;object-position: 50% 40%}
.demo-gerar .dg-acoes{grid-template-columns: repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion: no-preference){.js:not(.estatico) .visivel .tela.on .demo-gerar .dg-sobe{animation: dg-sobe .5s var(--suave) both;animation-delay: calc(var(--i,0) * 70ms)}
.js:not(.estatico) .visivel .tela.on .demo-gerar .dg-balao{animation: dg-balao .55s var(--suave) both;animation-delay: .36s}
}
@keyframes dg-sobe{from{opacity: 0;transform: translateY(10px)}
}
@keyframes dg-balao{from{opacity: 0;transform: translateY(10px) scale(.96)}
}
.demo-painel{display: grid;grid-template-columns: repeat(6,minmax(0,1fr));gap: 7px;min-width: 0;font-size: 11px;line-height: 1.35;color: var(--c-corpo);text-align: left}
.demo-painel svg.icone{width: 12px;height: 12px}
.demo-painel .dp-titulo{font-size: 11px;font-weight: 800;letter-spacing: -.01em;color: var(--c-tinta)}
.demo-painel .mini-cartao{grid-column: 1 / -1;padding: 9px 10px;gap: 7px;min-width: 0;align-content: start}
.demo-painel .dp-barra{grid-column: 1 / -1;display: flex;align-items: center;gap: 8px;min-width: 0}
.demo-painel .dp-periodo > *{padding: 4px 6px;font-size: 10.5px;white-space: nowrap}
.demo-painel .dp-periodo > .on{color: var(--c-verde-texto)}
.demo-painel .dp-atualizado{display: none;margin-left: auto;font-size: 10px;color: var(--c-apagado);white-space: nowrap}
.demo-painel .dp-atualizar{margin-left: auto;padding: 5px 10px;font-size: 10.5px}
.demo-painel .dp-destaque{position: relative;overflow: hidden;grid-column: 1 / -1;display: grid;grid-template-columns: minmax(0,1fr);gap: 10px;align-items: center;padding: 10px 12px;border-radius: 12px;color: hsl(140 40% 97%);background: radial-gradient(260px 150px at 100% 0%,hsl(150 70% 40% / .35),transparent 70%),radial-gradient(200px 140px at 0% 100%,hsl(170 60% 30% / .35),transparent 70%),linear-gradient(160deg,hsl(158 48% 17%),hsl(160 55% 11%));box-shadow: 0 10px 22px -14px hsl(160 30% 10% / .45)}
.demo-painel .dp-destaque::after{content: "";position: absolute;inset: 0;pointer-events: none;opacity: .07;background-image: radial-gradient(#fff 1px,transparent 1px);background-size: 14px 14px}
.demo-painel .dp-destaque > *{position: relative;z-index: 1;min-width: 0}
.demo-painel .dp-total{display: grid;gap: 6px;justify-items: start}
.demo-painel .dp-rotulo{font-size: 9.5px;font-weight: 800;letter-spacing: .1em;text-transform: uppercase;color: hsl(146 60% 70%);white-space: nowrap}
.demo-painel .dp-valor{display: flex;align-items: center;gap: 7px}
.demo-painel .dp-valor b{font-size: 17px;font-weight: 800;letter-spacing: -.03em;line-height: 1;color: hsl(140 40% 97%)}
.demo-painel .dp-valor i{width: 78px;height: 17px;border-radius: 6px;background: linear-gradient(90deg,hsl(140 40% 97% / .95),hsl(146 60% 82% / .8))}
.demo-painel .dp-sub{font-size: 9.5px;color: hsl(150 18% 72%);white-space: nowrap}
.demo-painel .dp-lojas{display: grid;gap: 7px;padding-top: 10px;border-top: 1px solid hsl(150 30% 100% / .14)}
.demo-painel .dp-loja{display: grid;grid-template-columns: 16px minmax(0,1fr) auto;gap: 4px 5px;align-items: center}
.demo-painel .dp-loja b{font-size: 10.5px;font-weight: 700;color: hsl(140 40% 97%);white-space: nowrap}
.demo-painel .dp-quanto{width: 26px;height: 7px;border-radius: 4px;background: hsl(140 40% 97% / .8)}
.demo-painel .dp-quanto.m{width: 14px}
.demo-painel .dp-trilha{grid-column: 1 / -1;display: block;height: 4px;border-radius: 999px;background: hsl(150 30% 100% / .12);overflow: hidden}
.demo-painel .dp-trilha i{display: block;width: var(--w);height: 100%;border-radius: 999px;background: hsl(146 62% 62%);transform-origin: 0 50%}
.demo-painel .dp-kpi{grid-column: span 3;display: grid;gap: 5px;padding: 7px 9px 9px;min-width: 0;background: #fff;border: 1px solid var(--c-linha);border-radius: 12px;box-shadow: 0 1px 2px hsl(160 30% 10% / .05)}
.demo-painel .dp-kpi-rotulo{display: flex;align-items: center;gap: 6px;font-size: 10px;font-weight: 700;color: var(--c-apagado);white-space: nowrap}
.demo-painel .dp-kpi-rotulo i{display: none;place-items: center;width: 16px;height: 16px;border-radius: 5px;flex: none;color: var(--c-verde-texto);background: var(--c-verde-fundo)}
.demo-painel .dp-kpi-rotulo svg.icone{width: 10px;height: 10px;stroke-width: 2.3}
.demo-painel .dp-kpi-valor{display: block;width: var(--w);height: 8px;border-radius: 4px;background: hsl(160 26% 14% / .8)}
.demo-painel .dp-barras{display: flex;align-items: flex-end;gap: 4px;height: 52px;background: linear-gradient(var(--c-linha),var(--c-linha)) 0 0 / 100% 1px no-repeat,linear-gradient(var(--c-linha),var(--c-linha)) 0 50% / 100% 1px no-repeat,linear-gradient(var(--c-linha),var(--c-linha)) 0 100% / 100% 1px no-repeat}
.demo-painel .dp-barras i{flex: 1;height: var(--h);border-radius: 3px 3px 1px 1px;background: var(--c-verde);transform-origin: 50% 100%}
.demo-painel .dp-status-barra{display: flex;gap: 2px;height: 10px;border-radius: 999px;overflow: hidden;background: var(--c-afundado)}
.demo-painel .dp-status-barra i{height: 100%;transform-origin: 0 50%}
.demo-painel .dp-status-barra .c{width: 66%;background: #1c8756}
.demo-painel .dp-status-barra .p{flex: 1;background: #d4890a}
.demo-painel .dp-legenda{display: grid;grid-template-columns: repeat(2,minmax(0,1fr));gap: 6px 14px;font-size: 10.5px}
.demo-painel .dp-legenda span{display: flex;align-items: center;gap: 6px;color: var(--c-corpo);white-space: nowrap}
.demo-painel .dp-legenda span i{width: 8px;height: 8px;border-radius: 3px;flex: none}
.demo-painel .dp-legenda .c{background: #1c8756}
.demo-painel .dp-legenda .p{background: #d4890a}
.demo-painel .dp-legenda em{width: 34px;height: 6px;margin-left: 2px;border-radius: 3px;background: hsl(160 26% 14% / .8)}
.demo-painel .dp-legenda em.m{width: 22px}
.demo-painel .dp-rank-lista{display: grid;gap: 8px}
.demo-painel .dp-rank{display: grid;grid-template-columns: 26px minmax(0,1fr);gap: 5px 9px;align-items: center}
.demo-painel .dp-rank .il-foto{grid-row: span 2;width: 26px;height: 26px;border-radius: 7px}
.demo-painel .dp-ranking .dp-trilha{background: var(--c-afundado)}
.demo-painel .dp-ranking .dp-trilha i{background: var(--c-verde)}
@container tela (min-width: 290px){.demo-painel .dp-periodo > *{padding: 4px 9px}
.demo-painel .dp-destaque{grid-template-columns: minmax(0,.95fr) minmax(0,1fr)}
.demo-painel .dp-lojas{padding: 0 0 0 10px;border-top: 0;border-left: 1px solid hsl(150 30% 100% / .14)}
.demo-painel .dp-kpi-rotulo i{display: grid}
}
@container tela (min-width: 430px){.demo-painel{gap: 9px}
.demo-painel .mini-cartao{padding: 10px 12px;gap: 8px}
.demo-painel .dp-periodo > *{padding: 5px 10px}
.demo-painel .dp-atualizado{display: block}
.demo-painel .dp-atualizar{margin-left: 0;padding: 6px 10px}
.demo-painel .dp-destaque{grid-template-columns: minmax(0,1.05fr) minmax(0,1fr);padding: 13px 16px;gap: 16px}
.demo-painel .dp-total{gap: 7px}
.demo-painel .dp-lojas{padding-left: 16px;gap: 9px}
.demo-painel .dp-loja{gap: 5px 6px}
.demo-painel .dp-quanto{width: 30px}
.demo-painel .dp-quanto.m{width: 18px}
.demo-painel .dp-kpi{grid-column: span 2;gap: 7px;padding: 9px 10px 10px}
.demo-painel .dp-kpi-rotulo i{width: 18px;height: 18px;border-radius: 6px}
.demo-painel .dp-kpi-rotulo svg.icone{width: 11px;height: 11px}
.demo-painel .dp-kpi-valor{height: 9px;border-radius: 5px}
.demo-painel .dp-valor b{font-size: 20px}
.demo-painel .dp-valor i{width: 104px;height: 20px}
.demo-painel .dp-barras{height: 60px;gap: 6px}
}
@container tela (min-width: 520px){.demo-painel{gap: 10px}
.demo-painel .dp-titulo{font-size: clamp(10px,1.85cqw,11px);white-space: nowrap}
.demo-painel .dp-destaque{padding: 16px 18px;gap: 22px}
.demo-painel .dp-lojas{padding-left: 22px;gap: 11px}
.demo-painel .dp-valor b{font-size: 22px}
.demo-painel .dp-valor i{width: 128px;height: 22px;border-radius: 7px}
.demo-painel .dp-kpi{padding: 10px 12px 11px}
.demo-painel .dp-kpi-rotulo{font-size: 10.5px}
.demo-painel .mini-cartao{padding: 12px;gap: 9px}
.demo-painel .dp-grafico{grid-column: span 4;grid-template-rows: auto 1fr}
.demo-painel .dp-barras{height: auto;min-height: 66px;gap: 7px}
.demo-painel .dp-status{grid-column: span 2}
.demo-painel .dp-legenda{grid-template-columns: minmax(0,1fr)}
.demo-painel .dp-legenda em{margin-left: auto}
.demo-painel .dp-rank-lista{grid-template-columns: repeat(2,minmax(0,1fr));gap: 8px 22px}
}
@media (prefers-reduced-motion: no-preference){.js:not(.estatico) .visivel .tela.on .demo-painel .dp-sobe{animation: dp-sobe .5s var(--suave) both;animation-delay: calc(var(--i,0) * 55ms)}
.js:not(.estatico) .visivel .tela.on .demo-painel .dp-destaque .dp-trilha i{animation: dp-enche .6s var(--suave) both;animation-delay: .3s}
.js:not(.estatico) .visivel .tela.on .demo-painel .dp-barras i{animation: dp-cresce .55s var(--suave) both;animation-delay: calc(.5s + var(--b,0) * 30ms)}
.js:not(.estatico) .visivel .tela.on .demo-painel .dp-status-barra i{animation: dp-enche .55s var(--suave) both;animation-delay: .75s}
.js:not(.estatico) .visivel .tela.on .demo-painel .dp-ranking .dp-trilha i{animation: dp-enche .55s var(--suave) both;animation-delay: .85s}
}
@keyframes dp-sobe{from{opacity: 0;transform: translateY(10px)}
}
@keyframes dp-enche{from{transform: scaleX(0)}
}
@keyframes dp-cresce{from{transform: scaleY(0)}
}
.demo-vendidos{display: grid;gap: 10px;min-width: 0;font-size: 11px;line-height: 1.4;color: var(--c-corpo);text-align: left}
.demo-vendidos .dvd-topo{grid-template-columns: minmax(0,1fr);gap: 8px;padding: 10px 10px 11px}
.demo-vendidos .dvd-linha{display: flex;flex-wrap: wrap;align-items: center;gap: 8px;min-width: 0}
.demo-vendidos .il-abas{flex: 1 1 auto}
.demo-vendidos .il-abas > *{flex: 1 1 auto;justify-content: center;padding: 5px 4px;font-size: 10.5px;white-space: nowrap}
.demo-vendidos .il-abas > .on{color: var(--c-verde-texto)}
.demo-vendidos .dvd-quando{display: none;margin-left: auto;font-size: 10px;font-weight: 500;color: var(--c-apagado);white-space: nowrap}
.demo-vendidos .dvd-atualizar{margin-left: auto;padding: 6px 8px;font-size: 10.5px}
.demo-vendidos .dvd-atualizar .icone{width: 11px;height: 11px}
.demo-vendidos .dvd-listas{display: flex;gap: 2px;overflow: hidden;white-space: nowrap;box-shadow: inset 0 -1px 0 var(--c-linha);-webkit-mask-image: linear-gradient(90deg,#000 calc(100% - 44px),transparent calc(100% - 6px));mask-image: linear-gradient(90deg,#000 calc(100% - 44px),transparent calc(100% - 6px))}
.demo-vendidos .dvd-listas span{flex: none;padding: 5px 7px 7px;font-size: 10.5px;font-weight: 700;color: var(--c-apagado);border-bottom: 2px solid transparent}
.demo-vendidos .dvd-listas .on{color: var(--c-verde-texto);border-bottom-color: var(--c-verde)}
.demo-vendidos .dvd-cats{display: flex;gap: 5px;overflow: hidden;-webkit-mask-image: linear-gradient(90deg,#000 calc(100% - 44px),transparent calc(100% - 6px));mask-image: linear-gradient(90deg,#000 calc(100% - 44px),transparent calc(100% - 6px))}
.demo-vendidos .dvd-cats .il-chip{flex: none;padding: 4px 10px;font-weight: 600;border-color: var(--c-linha)}
.demo-vendidos .dvd-cats .il-chip.on{color: #fff;background: var(--c-verde);border-color: var(--c-verde);font-weight: 700}
.demo-vendidos .dvd-grade{display: grid;grid-template-columns: repeat(2,minmax(0,1fr));gap: 8px}
.demo-vendidos .dvd-card{display: grid;grid-template-rows: auto 1fr;min-width: 0;background: #fff;border: 1px solid var(--c-linha);border-radius: 12px;overflow: hidden;box-shadow: 0 1px 2px hsl(160 30% 10% / .05)}
.demo-vendidos .dvd-foto{position: relative;height: 64px;display: grid;place-items: center;background: linear-gradient(135deg,hsl(140 20% 93%),hsl(140 16% 86%));color: hsl(150 10% 64%)}
.demo-vendidos .dvd-foto .icone{width: 22px;height: 22px;stroke-width: 1.5}
.demo-vendidos .dvd-foto .il-pos{position: absolute;left: 7px;top: 7px;min-width: 28px;height: 21px;padding: 0 7px;border-radius: 999px;font-size: 11px;box-shadow: 0 2px 5px hsl(0 0% 0% / .2)}
.demo-vendidos .dvd-corpo{display: grid;align-content: start;gap: 6px;padding: 8px}
.demo-vendidos .dvd-nome{display: grid;gap: 4px}
.demo-vendidos .dvd-preco{display: flex;align-items: center;gap: 6px}
.demo-vendidos .dvd-preco i{display: block;height: 9px;width: 40%;border-radius: 3px;background: hsl(160 10% 62%)}
.demo-vendidos .dvd-preco i + i{height: 5px;width: 22%;background: var(--c-linha-2)}
.demo-vendidos .dvd-com{display: grid;gap: 4px;padding: 5px 7px 7px;border-radius: 6px;background: var(--c-verde-fundo)}
.demo-vendidos .dvd-com b{font-size: 10px;line-height: 1.2;font-weight: 800;color: var(--c-verde-texto)}
.demo-vendidos .dvd-com i{display: block;height: 7px;border-radius: 4px;background: hsl(148 44% 84%)}
.demo-vendidos .dvd-com i i{width: calc(var(--c) * 100%);background: var(--c-verde);transform-origin: left}
.demo-vendidos .dvd-usar{padding: 6px;font-size: 10px;border-radius: 7px}
.demo-vendidos .dvd-usar .icone{width: 11px;height: 11px}
@container tela (max-width: 299px){.demo-vendidos .il-abas > *{gap: 4px;padding: 5px 3px;font-size: 10px}
.demo-vendidos .il-abas .il-logo{width: 14px;height: 14px}
.demo-vendidos .dvd-atualizar{gap: 5px;padding: 6px 7px}
}
@container tela (min-width: 400px){.demo-vendidos .il-abas{flex: none}
.demo-vendidos .il-abas > *{padding: 5px 9px}
.demo-vendidos .dvd-quando{display: block}
.demo-vendidos .dvd-atualizar{margin-left: 0;padding: 6px 10px}
.demo-vendidos .dvd-grade{grid-template-columns: repeat(3,minmax(0,1fr))}
.demo-vendidos .dvd-foto{height: auto;aspect-ratio: 16 / 10}
.demo-vendidos .dvd-corpo{gap: 7px;padding: 9px}
}
@container tela (min-width: 440px){.demo-vendidos .dvd-listas{-webkit-mask-image: none;mask-image: none}
}
@container tela (min-width: 520px){.demo-vendidos{gap: 12px}
.demo-vendidos .dvd-topo{padding: 12px;gap: 9px}
.demo-vendidos .dvd-listas span{padding: 5px 10px 8px;font-size: 11.5px}
.demo-vendidos .dvd-grade{grid-template-columns: repeat(4,minmax(0,1fr));gap: 10px}
.demo-vendidos .dvd-foto{aspect-ratio: 4 / 3}
}
@media (prefers-reduced-motion: no-preference){.js:not(.estatico) .visivel .tela.on .demo-vendidos .dvd-topo,.js:not(.estatico) .visivel .tela.on .demo-vendidos .dvd-card{animation: dvd-entra .5s var(--suave) both;animation-delay: calc(var(--i) * 60ms)}
.js:not(.estatico) .visivel .tela.on .demo-vendidos .il-pos{animation: dvd-selo .4s var(--salto) both;animation-delay: calc(var(--i) * 60ms + 220ms)}
.js:not(.estatico) .visivel .tela.on .demo-vendidos .dvd-com i i{animation: dvd-cresce .6s var(--suave) both;animation-delay: calc(var(--i) * 60ms + 260ms)}
}
@keyframes dvd-entra{from{opacity: 0;transform: translateY(10px)}
}
@keyframes dvd-selo{from{opacity: 0;transform: scale(.5)}
}
@keyframes dvd-cresce{from{transform: scaleX(0)}
}
.il-editar .il-coluna{gap: 10px}
.il-editar .ed-balao{display: grid;gap: 6px;padding: 8px 9px 7px}
.il-editar .ed-balao b{font-size: 11px;line-height: 1.35;white-space: nowrap}
.il-editar .ed-balao .il-tx{height: 5px}
.il-editar .ed-rodape{display: flex;align-items: center;justify-content: space-between;gap: 10px;margin-top: -1px}
.il-editar .ed-rodape .il-tx{width: 46%}
.il-editar .ed-hora{display: inline-flex;align-items: center;gap: 3px;font-size: 9px;font-weight: 600;line-height: 1.2;color: hsl(0 0% 100% / .62)}
.il-editar .ed-hora svg.icone{width: 12px;height: 12px;stroke-width: 2.2;color: #53bdeb}
.il-editar .ed-antes{opacity: 0}
.il-editar .ed-palavra{position: relative;isolation: isolate}
.il-editar .ed-selecao{position: absolute;inset: -1px -2px;z-index: -1;border-radius: 3px;background: hsl(0 0% 100% / .3);transform-origin: left}
.il-editar .ed-cursor{position: absolute;top: 1px;bottom: 1px;right: -1.5px;width: 1.5px;border-radius: 1px;background: #fff;opacity: 0}
.il-editar .ed-foco{margin: -3px;border-radius: 12px 5px 12px 12px;border: 1.5px solid hsl(153 60% 42%);opacity: 0;pointer-events: none}
.il-editar .ed-acao{position: relative;justify-self: center;display: inline-flex}
.il-editar .il-toque{left: 50%;top: 50%}
@media (prefers-reduced-motion: no-preference){.js:not(.estatico) .visivel .il-editar .ed-antes{animation: ed-antes var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-editar .ed-depois{animation: ed-depois var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-editar .ed-selecao{animation: ed-selecao var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-editar .ed-cursor{animation: ed-cursor var(--ciclo) ease infinite}
.js:not(.estatico) .visivel .il-editar .ed-foco{animation: ed-foco var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-editar .ed-botao{animation: ed-botao var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-editar .il-toque{animation: ed-toque var(--ciclo) ease-out infinite}
}
@keyframes ed-toque{0%,11%{opacity: 0;transform: scale(.6)}
15%{opacity: 1;transform: scale(1)}
22%,100%{opacity: 0;transform: scale(1.5)}
}
@keyframes ed-botao{0%,13%{transform: none}
16%{transform: scale(.94)}
20%,100%{transform: none}
}
@keyframes ed-foco{0%,19%{opacity: 0;transform: scale(1.03)}
25%,60%{opacity: 1;transform: none}
66%,100%{opacity: 0;transform: none}
}
@keyframes ed-selecao{0%,26%{transform: scaleX(0)}
33%,44%{transform: none}
45%,100%{transform: scaleX(0)}
}
@keyframes ed-antes{0%,42.5%{opacity: 1}
43%,96%{opacity: 0}
100%{opacity: 1}
}
@keyframes ed-depois{0%,42.5%{opacity: 0}
43%,92%{opacity: 1}
96%,100%{opacity: 0}
}
@keyframes ed-cursor{0%,43%{opacity: 0}
44%,49%{opacity: 1}
50%,53%{opacity: 0}
54%,59%{opacity: 1}
60%,100%{opacity: 0}
}
.il-extensao .ex-cena{position: relative;width: 100%;min-width: 0;max-width: 250px}
.il-extensao .ex-janela{position: relative;display: grid;grid-template-rows: 28px 1fr;height: 112px;background: #fff;border: 1px solid var(--c-linha-2);border-radius: 10px;overflow: hidden;box-shadow: 0 8px 18px -14px hsl(160 30% 10% / .4)}
.il-extensao .ex-barra{display: flex;align-items: center;gap: 6px;min-width: 0;padding: 0 6px 0 8px;background: var(--c-afundado);border-bottom: 1px solid var(--c-linha)}
.il-extensao .ex-bolas{display: flex;gap: 3px;flex: none}
.il-extensao .ex-bolas i{width: 5px;height: 5px;border-radius: 50%;background: hsl(4 70% 62%)}
.il-extensao .ex-bolas i:nth-child(2){background: hsl(42 90% 56%)}
.il-extensao .ex-bolas i:nth-child(3){background: hsl(140 55% 50%)}
.il-extensao .ex-url{flex: 1;min-width: 0;display: flex;align-items: center;gap: 4px;height: 18px;padding: 0 7px 0 3px;border-radius: 999px;background: #fff;border: 1px solid var(--c-linha);font-size: 9.5px;color: var(--c-corpo)}
.il-extensao .ex-url .il-logo{width: 12px;height: 12px;border-radius: 3px}
.il-extensao .ex-url span{min-width: 0;white-space: nowrap;overflow: hidden;text-overflow: ellipsis}
.il-extensao .ex-icone{position: relative;flex: none;display: grid;place-items: center;width: 18px;height: 18px}
.il-extensao .ex-icone img{position: relative;width: 18px;height: 18px;border-radius: 5px}
.il-extensao .ex-ativo{position: absolute;inset: -3px;border-radius: 7px;background: hsl(148 46% 84%)}
.il-extensao .ex-pagina{display: grid;grid-template-columns: 58px 1fr;gap: 9px;padding: 8px;min-width: 0}
.il-extensao .ex-foto{width: 100%;height: 100%;border-radius: 7px}
.il-extensao .ex-foto svg.icone{width: 16px;height: 16px}
.il-extensao .ex-dados{display: grid;gap: 6px;align-content: start;padding-top: 4px}
.il-extensao .ex-popup{position: absolute;top: 31px;right: 8px;left: 74px;display: grid;gap: 7px;padding: 8px;border-color: var(--c-linha-2);box-shadow: 0 8px 14px -6px hsl(160 30% 10% / .38),0 1px 4px hsl(160 30% 10% / .1);transform-origin: calc(100% - 7px) 0}
.il-extensao .ex-topo b{font-size: 10.5px;font-weight: 800;white-space: nowrap}
.il-extensao .ex-topo img{border-radius: 4px}
.il-extensao .ex-ponto{width: 6px;height: 6px;border-radius: 50%;background: hsl(140 55% 46%);flex: none}
.il-extensao .ex-gerar{justify-self: stretch}
.il-extensao .il-toque{left: auto;right: 3px;top: 14.5px}
@container (min-width: 250px){.il-extensao .ex-pagina{grid-template-columns: 72px 1fr}
.il-extensao .ex-popup{left: 88px}
}
@media (prefers-reduced-motion: no-preference){.js:not(.estatico) .visivel .il-extensao .ex-foto{animation: ex-foto var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-extensao .ex-dados{animation: ex-dados var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-extensao .ex-icone img{animation: ex-aperta var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-extensao .ex-ativo{animation: ex-ativo var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-extensao .il-toque{animation: ex-toque var(--ciclo) ease-out infinite}
.js:not(.estatico) .visivel .il-extensao .ex-popup{animation: ex-popup var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-extensao .ex-gerar{animation: ex-gerar var(--ciclo) var(--salto) infinite}
}
@keyframes ex-foto{0%,2%{opacity: 0;transform: scale(.96)}
9%,92%{opacity: 1;transform: none}
98%,100%{opacity: 0;transform: none}
}
@keyframes ex-dados{0%,7%{opacity: 0;transform: translateY(5px)}
15%,50%{opacity: 1;transform: none}
54%,100%{opacity: 0;transform: none}
}
@keyframes ex-toque{0%,27%{opacity: 0;transform: scale(.6)}
31%{opacity: 1;transform: scale(1)}
39%,100%{opacity: 0;transform: scale(1.5)}
}
@keyframes ex-aperta{0%,29%{transform: none}
32%{transform: scale(.86)}
37%,100%{transform: none}
}
@keyframes ex-ativo{0%,31%{opacity: 0}
35%,92%{opacity: 1}
98%,100%{opacity: 0}
}
@keyframes ex-popup{0%,34%{opacity: 0;transform: translateY(-8px) scale(.94)}
43%,92%{opacity: 1;transform: none}
98%,100%{opacity: 0;transform: none}
}
@keyframes ex-gerar{0%,37%{opacity: 0;transform: scale(.9)}
46%,92%{opacity: 1;transform: none}
98%,100%{opacity: 0;transform: none}
}
.il-garimpo{--ciclo: 7.2s}
.il-garimpo .gp-cena{gap: 5px}
.il-garimpo .gp-abas > *{position: relative;padding: 2px 8px;color: var(--c-tinta)}
.il-garimpo .gp-abas .il-logo{width: 14px;height: 14px}
.il-garimpo .gp-aba > *{position: relative}
.il-garimpo .gp-aba > .gp-on{position: absolute;inset: 0;border-radius: 7px;background: #fff;box-shadow: 0 1px 3px hsl(160 30% 10% / .14)}
.il-garimpo .gp-on-m{opacity: 0}
.il-garimpo .gp-aba > .il-toque{position: absolute;left: 50%;top: 50%}
.il-garimpo .gp-barra{width: 100%;align-items: center}
.il-garimpo .gp-busca{display: flex;align-items: center;gap: 5px}
.il-garimpo .gp-busca .il-campo{flex: 1;min-width: 0;min-height: 26px;padding: 4px 8px;gap: 6px;font-size: 10.5px}
.il-garimpo .gp-procurar{position: relative;align-self: stretch;padding: 0 9px}
.il-garimpo .gp-procurar .il-toque{left: 50%;top: 50%;background: hsl(0 0% 100% / .32);border-color: hsl(0 0% 100% / .85)}
.il-garimpo .gp-populares{display: flex;align-items: center;gap: 4px;opacity: 0}
.il-garimpo .gp-rot{font-size: 9.5px;font-weight: 600;color: var(--c-apagado);margin-right: 1px}
.il-garimpo .gp-populares .il-chip{flex: 1 1 auto;justify-content: center;padding: 4px 7px;font-size: 10px}
.il-garimpo .gp-grades{width: 100%}
.il-garimpo .gp-grade{display: grid;grid-template-columns: repeat(3,1fr);gap: 6px}
.il-garimpo .gp-item{display: grid;gap: 4px;padding: 4px;border-radius: 8px}
.il-garimpo .gp-item .il-foto.g{height: 20px;border-radius: 5px}
.il-garimpo .gp-item .il-tx{height: 5px}
.il-garimpo .gp-s1 .il-tx.forte{width: 90%}
.il-garimpo .gp-s2 .il-tx.forte{width: 70%}
.il-garimpo .gp-s3 .il-tx.forte{width: 82%}
.il-garimpo .gp-s1 .il-tx.verde{width: 62%}
.il-garimpo .gp-s2 .il-tx.verde{width: 46%}
.il-garimpo .gp-s3 .il-tx.verde{width: 54%}
.il-garimpo .gp-m1 .il-tx.forte{width: 74%}
.il-garimpo .gp-m2 .il-tx.forte{width: 92%}
.il-garimpo .gp-m3 .il-tx.forte{width: 64%}
.il-garimpo .gp-m1 .il-tx:last-child{width: 44%}
.il-garimpo .gp-m2 .il-tx:last-child{width: 56%}
.il-garimpo .gp-m3 .il-tx:last-child{width: 38%}
.il-garimpo .gp-grade-m .gp-item{opacity: 0}
@media (prefers-reduced-motion: no-preference){.js:not(.estatico) .visivel .il-garimpo .il-digita{animation: gp-digita var(--ciclo) steps(14,end) infinite}
.js:not(.estatico) .visivel .il-garimpo .gp-procurar{animation: gp-aperta var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-garimpo .gp-toque-p{animation: gp-toque-p var(--ciclo) ease-out infinite}
.js:not(.estatico) .visivel .il-garimpo .gp-toque-m{animation: gp-toque-m var(--ciclo) ease-out infinite}
.js:not(.estatico) .visivel .il-garimpo .gp-on-s{animation: gp-on-s var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-garimpo .gp-on-m{animation: gp-on-m var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-garimpo .gp-busca{animation: gp-busca var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-garimpo .gp-populares{animation: gp-populares var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-garimpo .gp-s1{animation: gp-s1 var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-garimpo .gp-s2{animation: gp-s2 var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-garimpo .gp-s3{animation: gp-s3 var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-garimpo .gp-m1{animation: gp-m1 var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-garimpo .gp-m2{animation: gp-m2 var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-garimpo .gp-m3{animation: gp-m3 var(--ciclo) var(--suave) infinite}
}
@keyframes gp-digita{0%,3%{max-width: 0;opacity: 1}
14%,48%{max-width: 100%;opacity: 1}
54%,100%{max-width: 100%;opacity: 0}
}
@keyframes gp-toque-p{0%,14%{opacity: 0;transform: scale(.6)}
17%{opacity: 1;transform: scale(1)}
23%,100%{opacity: 0;transform: scale(1.5)}
}
@keyframes gp-aperta{0%,15%{transform: scale(1)}
18%{transform: scale(.94)}
22%,100%{transform: scale(1)}
}
@keyframes gp-s1{0%,20%{opacity: 0;transform: translateY(7px)}
26%,44%{opacity: 1;transform: translateY(0)}
48%,100%{opacity: 0;transform: translateY(0)}
}
@keyframes gp-s2{0%,23%{opacity: 0;transform: translateY(7px)}
29%,44%{opacity: 1;transform: translateY(0)}
48%,100%{opacity: 0;transform: translateY(0)}
}
@keyframes gp-s3{0%,26%{opacity: 0;transform: translateY(7px)}
32%,44%{opacity: 1;transform: translateY(0)}
48%,100%{opacity: 0;transform: translateY(0)}
}
@keyframes gp-toque-m{0%,39%{opacity: 0;transform: scale(.6)}
42%{opacity: 1;transform: scale(1)}
48%,100%{opacity: 0;transform: scale(1.5)}
}
@keyframes gp-on-s{0%,43%{opacity: 1}
47%,94%{opacity: 0}
99%,100%{opacity: 1}
}
@keyframes gp-on-m{0%,43%{opacity: 0}
47%,94%{opacity: 1}
99%,100%{opacity: 0}
}
@keyframes gp-busca{0%,44%{opacity: 1}
48%,95%{opacity: 0}
100%{opacity: 1}
}
@keyframes gp-populares{0%,47%{opacity: 0;transform: translateY(4px)}
52%,91%{opacity: 1;transform: translateY(0)}
95%,100%{opacity: 0;transform: translateY(0)}
}
@keyframes gp-m1{0%,50%{opacity: 0;transform: translateY(7px)}
56%,91%{opacity: 1;transform: translateY(0)}
96%,100%{opacity: 0;transform: translateY(0)}
}
@keyframes gp-m2{0%,53%{opacity: 0;transform: translateY(7px)}
59%,91%{opacity: 1;transform: translateY(0)}
96%,100%{opacity: 0;transform: translateY(0)}
}
@keyframes gp-m3{0%,56%{opacity: 0;transform: translateY(7px)}
62%,91%{opacity: 1;transform: translateY(0)}
96%,100%{opacity: 0;transform: translateY(0)}
}
.il-ler-produto .lp-link{min-height: 28px;padding: 0 5px 0 8px;gap: 6px}
.il-ler-produto .lp-link svg.icone{display: none;width: 12px;height: 12px}
.il-ler-produto .lp-link b{font-size: 10px;font-weight: 700;color: var(--c-tinta)}
.il-ler-produto .lp-selo{margin-left: auto;padding: 3px 5px;font-size: 9px}
.il-ler-produto .lp-ficha{display: grid;padding: 0 6px 0 8px}
.il-ler-produto .lp-campo{display: grid;grid-template-columns: 34px 1fr 16px;align-items: center;gap: 8px;height: 23px}
.il-ler-produto .lp-campo + .lp-campo{border-top: 1px solid var(--c-linha)}
.il-ler-produto .lp-rotulo{font-size: 10px;font-weight: 700;color: var(--c-apagado)}
.il-ler-produto .lp-valor{display: flex;align-items: center;min-width: 0}
.il-ler-produto .lp-v1{width: 82%;transform-origin: left}
.il-ler-produto .lp-v2{font-size: 11px;font-weight: 800;letter-spacing: -.01em;white-space: nowrap}
.il-ler-produto .lp-v3{width: 19px;height: 19px;border-radius: 5px}
.il-ler-produto .lp-marca{place-items: center}
.il-ler-produto .lp-vazio{width: 14px;height: 14px;border-radius: 50%;border: 1.5px dashed var(--c-linha-2)}
.il-ler-produto .lp-marca .il-ok{width: 16px;height: 16px}
.il-ler-produto .lp-marca .il-ok svg.icone{width: 10px;height: 10px}
@container (min-width: 250px){.il-ler-produto .lp-link svg.icone{display: block}
}
@media (prefers-reduced-motion: no-preference){.js:not(.estatico) .visivel .il-ler-produto .lp-link{animation: lp-link var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-ler-produto .lp-selo{animation: lp-selo var(--ciclo) var(--salto) infinite}
.js:not(.estatico) .visivel .il-ler-produto .lp-v1{animation: lp-nome var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-ler-produto .lp-v2{animation: lp-preco var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-ler-produto .lp-v3{animation: lp-foto var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-ler-produto .lp-o1{animation: lp-ok-1 var(--ciclo) var(--salto) infinite}
.js:not(.estatico) .visivel .il-ler-produto .lp-o2{animation: lp-ok-2 var(--ciclo) var(--salto) infinite}
.js:not(.estatico) .visivel .il-ler-produto .lp-o3{animation: lp-ok-3 var(--ciclo) var(--salto) infinite}
}
@keyframes lp-link{0%,2%{opacity: 0;transform: translateY(-7px)}
9%,92%{opacity: 1;transform: none}
98%,100%{opacity: 0;transform: none}
}
@keyframes lp-selo{0%,10%{opacity: 0;transform: scale(.7)}
17%,100%{opacity: 1;transform: none}
}
@keyframes lp-nome{0%,21%{opacity: 0;transform: scaleX(0)}
29%,92%{opacity: 1;transform: none}
98%,100%{opacity: 0;transform: none}
}
@keyframes lp-ok-1{0%,28%{opacity: 0;transform: scale(.4)}
34%,92%{opacity: 1;transform: none}
98%,100%{opacity: 0;transform: none}
}
@keyframes lp-preco{0%,36%{opacity: 0;transform: translateX(-5px)}
43%,92%{opacity: 1;transform: none}
98%,100%{opacity: 0;transform: none}
}
@keyframes lp-ok-2{0%,42%{opacity: 0;transform: scale(.4)}
48%,92%{opacity: 1;transform: none}
98%,100%{opacity: 0;transform: none}
}
@keyframes lp-foto{0%,50%{opacity: 0;transform: scale(.6)}
57%,92%{opacity: 1;transform: none}
98%,100%{opacity: 0;transform: none}
}
@keyframes lp-ok-3{0%,56%{opacity: 0;transform: scale(.4)}
62%,92%{opacity: 1;transform: none}
98%,100%{opacity: 0;transform: none}
}
.il-link-tres-lojas .tl-lista{width: 100%;min-width: 0;max-width: 250px;padding: 0 8px;display: grid}
.il-link-tres-lojas .tl-linha{display: flex;align-items: center;gap: 6px;height: 34px;min-width: 0}
.il-link-tres-lojas .tl-linha + .tl-linha{border-top: 1px solid var(--c-linha)}
.il-link-tres-lojas .tl-linha .il-logo{width: 20px;height: 20px}
.il-link-tres-lojas .tl-linha b{flex: none;font-weight: 800;white-space: nowrap}
.il-link-tres-lojas .tl-link{margin-left: auto;min-width: 0;padding-left: 4px;font-size: 10px;font-weight: 800;color: var(--c-verde);white-space: nowrap;overflow: hidden;text-overflow: ellipsis}
.il-link-tres-lojas .tl-marca{position: relative;flex: none;width: 15px;height: 15px}
.il-link-tres-lojas .tl-marca::before{content: "";position: absolute;inset: 1px;border-radius: 50%;border: 1.5px dashed var(--c-linha-2)}
.il-link-tres-lojas .tl-ok{position: absolute;inset: 0;width: 15px;height: 15px}
.il-link-tres-lojas .tl-ok svg.icone{width: 9px;height: 9px}
@media (prefers-reduced-motion: no-preference){.js:not(.estatico) .visivel .il-link-tres-lojas .tl-l1{animation: tl-link-1 var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-link-tres-lojas .tl-o1{animation: tl-ok-1 var(--ciclo) var(--salto) infinite}
.js:not(.estatico) .visivel .il-link-tres-lojas .tl-l2{animation: tl-link-2 var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-link-tres-lojas .tl-o2{animation: tl-ok-2 var(--ciclo) var(--salto) infinite}
.js:not(.estatico) .visivel .il-link-tres-lojas .tl-l3{animation: tl-link-3 var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-link-tres-lojas .tl-o3{animation: tl-ok-3 var(--ciclo) var(--salto) infinite}
}
@keyframes tl-link-1{0%,8%{opacity: 0;transform: translateX(8px)}
16%,92%{opacity: 1;transform: none}
98%,100%{opacity: 0;transform: none}
}
@keyframes tl-ok-1{0%,15%{opacity: 0;transform: scale(.4)}
22%,92%{opacity: 1;transform: none}
98%,100%{opacity: 0;transform: none}
}
@keyframes tl-link-2{0%,24%{opacity: 0;transform: translateX(8px)}
32%,92%{opacity: 1;transform: none}
98%,100%{opacity: 0;transform: none}
}
@keyframes tl-ok-2{0%,31%{opacity: 0;transform: scale(.4)}
38%,92%{opacity: 1;transform: none}
98%,100%{opacity: 0;transform: none}
}
@keyframes tl-link-3{0%,40%{opacity: 0;transform: translateX(8px)}
48%,92%{opacity: 1;transform: none}
98%,100%{opacity: 0;transform: none}
}
@keyframes tl-ok-3{0%,47%{opacity: 0;transform: scale(.4)}
54%,92%{opacity: 1;transform: none}
98%,100%{opacity: 0;transform: none}
}
.il-mais-vendidos .mv-cena{gap: 7px}
.il-mais-vendidos .mv-abas > *{padding: 2px 8px}
.il-mais-vendidos .mv-abas .il-logo{width: 14px;height: 14px}
.il-mais-vendidos .mv-lista{width: 100%;padding: 0 8px;display: grid}
.il-mais-vendidos .mv-linha{display: flex;align-items: center;gap: 7px;height: 25px}
.il-mais-vendidos .mv-linha + .mv-linha{border-top: 1px solid var(--c-linha)}
.il-mais-vendidos .mv-selo{min-width: 19px;height: 18px;border-radius: 5px;flex: none}
.il-mais-vendidos .mv-prod{flex: 1;min-width: 0;display: flex;align-items: center;gap: 7px}
.il-mais-vendidos .il-foto{width: 18px;height: 18px;border-radius: 5px}
.il-mais-vendidos .mv-nome{flex: 1;min-width: 0;display: grid;gap: 3px}
.il-mais-vendidos .mv-nome .il-tx{height: 5px}
.il-mais-vendidos .mv-nome .il-tx.forte{height: 6px}
.il-mais-vendidos .mv-prod-1 .il-tx.forte{width: 100%}
.il-mais-vendidos .mv-prod-1 .il-tx:last-child{width: 62%}
.il-mais-vendidos .mv-prod-2 .il-tx.forte{width: 58%}
.il-mais-vendidos .mv-prod-2 .il-tx:last-child{width: 34%}
.il-mais-vendidos .mv-prod-3 .il-tx.forte{width: 46%}
.il-mais-vendidos .mv-prod-3 .il-tx:last-child{width: 27%}
.il-mais-vendidos .mv-usar{padding: 3px 7px;gap: 4px;border-radius: 7px;box-shadow: none}
.il-mais-vendidos .mv-usar svg.icone{width: 11px;height: 11px}
@media (prefers-reduced-motion: no-preference){.js:not(.estatico) .visivel .il-mais-vendidos .mv-selo-1{animation: mv-selo-1 var(--ciclo) var(--salto) infinite}
.js:not(.estatico) .visivel .il-mais-vendidos .mv-selo-2{animation: mv-selo-2 var(--ciclo) var(--salto) infinite}
.js:not(.estatico) .visivel .il-mais-vendidos .mv-selo-3{animation: mv-selo-3 var(--ciclo) var(--salto) infinite}
.js:not(.estatico) .visivel .il-mais-vendidos .mv-prod-1{animation: mv-prod-1 var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-mais-vendidos .mv-prod-2{animation: mv-prod-2 var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-mais-vendidos .mv-prod-3{animation: mv-prod-3 var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-mais-vendidos .mv-usar{animation: mv-usar var(--ciclo) var(--salto) infinite}
}
@keyframes mv-selo-1{0%,4%{opacity: .28;transform: scale(.88)}
11%{opacity: 1;transform: scale(1)}
92%{opacity: 1;transform: scale(1);animation-timing-function: var(--suave)}
98%,100%{opacity: .28;transform: scale(.88)}
}
@keyframes mv-selo-2{0%,16%{opacity: .28;transform: scale(.88)}
23%{opacity: 1;transform: scale(1)}
92%{opacity: 1;transform: scale(1);animation-timing-function: var(--suave)}
98%,100%{opacity: .28;transform: scale(.88)}
}
@keyframes mv-selo-3{0%,28%{opacity: .28;transform: scale(.88)}
35%{opacity: 1;transform: scale(1)}
92%{opacity: 1;transform: scale(1);animation-timing-function: var(--suave)}
98%,100%{opacity: .28;transform: scale(.88)}
}
@keyframes mv-prod-1{0%,5%{opacity: 0;transform: translateY(6px)}
13%,92%{opacity: 1;transform: none}
98%,100%{opacity: 0;transform: none}
}
@keyframes mv-prod-2{0%,17%{opacity: 0;transform: translateY(6px)}
25%,92%{opacity: 1;transform: none}
98%,100%{opacity: 0;transform: none}
}
@keyframes mv-prod-3{0%,29%{opacity: 0;transform: translateY(6px)}
37%,92%{opacity: 1;transform: none}
98%,100%{opacity: 0;transform: none}
}
@keyframes mv-usar{0%,46%{opacity: 0;transform: scale(.7)}
54%,100%{opacity: 1;transform: none}
}
.il-painel-comissoes .pc-cena{display: grid;gap: 7px;width: 100%;max-width: 250px}
.il-painel-comissoes .pc-periodo{display: grid;grid-template-columns: repeat(3,1fr)}
.il-painel-comissoes .pc-periodo > *{justify-content: center}
.il-painel-comissoes .pc-grade{display: grid;grid-template-columns: minmax(0,1fr) auto;gap: 6px}
.il-painel-comissoes .pc-grafico{display: grid;gap: 6px}
.il-painel-comissoes .pc-grafico b{font-size: 10px;font-weight: 800;white-space: nowrap}
.il-painel-comissoes .pc-barras{display: grid;grid-template-columns: repeat(10,1fr);gap: 4px;align-items: end;height: 34px}
.il-painel-comissoes .pc-barras span{display: grid;border-radius: 3px 3px 1px 1px;background: var(--c-afundado)}
.il-painel-comissoes .pc-barras i{border-radius: inherit;background: var(--c-verde);transform-origin: bottom}
.il-painel-comissoes .pc-barras span:nth-child(1){height: 26%}
.il-painel-comissoes .pc-barras span:nth-child(2){height: 38%}
.il-painel-comissoes .pc-barras span:nth-child(3){height: 32%}
.il-painel-comissoes .pc-barras span:nth-child(4){height: 50%}
.il-painel-comissoes .pc-barras span:nth-child(5){height: 44%}
.il-painel-comissoes .pc-barras span:nth-child(6){height: 64%}
.il-painel-comissoes .pc-barras span:nth-child(7){height: 58%}
.il-painel-comissoes .pc-barras span:nth-child(8){height: 82%}
.il-painel-comissoes .pc-barras span:nth-child(9){height: 74%}
.il-painel-comissoes .pc-barras span:nth-child(10){height: 100%}
.il-painel-comissoes .pc-lojas{display: grid;gap: 6px}
.il-painel-comissoes .pc-loja{display: flex;align-items: center;gap: 6px;padding: 0 7px}
.il-painel-comissoes .pc-loja .il-tx{flex: none;width: 28px;transform-origin: left}
.il-painel-comissoes .pc-loja .pc-v2{width: 16px}
@container (max-width: 200px){.il-painel-comissoes .pc-grafico .il-linha-h{gap: 4px}
.il-painel-comissoes .pc-loja{gap: 5px;padding: 0 5px}
.il-painel-comissoes .pc-loja .il-tx{width: 20px}
.il-painel-comissoes .pc-loja .pc-v2{width: 12px}
}
@media (prefers-reduced-motion: no-preference){.js:not(.estatico) .visivel .il-painel-comissoes .pc-barras span:nth-child(1) i{animation: pc-b1 var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-painel-comissoes .pc-barras span:nth-child(2) i{animation: pc-b2 var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-painel-comissoes .pc-barras span:nth-child(3) i{animation: pc-b3 var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-painel-comissoes .pc-barras span:nth-child(4) i{animation: pc-b4 var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-painel-comissoes .pc-barras span:nth-child(5) i{animation: pc-b5 var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-painel-comissoes .pc-barras span:nth-child(6) i{animation: pc-b6 var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-painel-comissoes .pc-barras span:nth-child(7) i{animation: pc-b7 var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-painel-comissoes .pc-barras span:nth-child(8) i{animation: pc-b8 var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-painel-comissoes .pc-barras span:nth-child(9) i{animation: pc-b9 var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-painel-comissoes .pc-barras span:nth-child(10) i{animation: pc-b10 var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-painel-comissoes .pc-v1{animation: pc-v1 var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-painel-comissoes .pc-v2{animation: pc-v2 var(--ciclo) var(--suave) infinite}
}
@keyframes pc-b1{0%,8%{opacity: 1;transform: scaleY(0)}
16%,92%{opacity: 1;transform: none}
98%,100%{opacity: 0;transform: none}
}
@keyframes pc-b2{0%,11.5%{opacity: 1;transform: scaleY(0)}
19.5%,92%{opacity: 1;transform: none}
98%,100%{opacity: 0;transform: none}
}
@keyframes pc-b3{0%,15%{opacity: 1;transform: scaleY(0)}
23%,92%{opacity: 1;transform: none}
98%,100%{opacity: 0;transform: none}
}
@keyframes pc-b4{0%,18.5%{opacity: 1;transform: scaleY(0)}
26.5%,92%{opacity: 1;transform: none}
98%,100%{opacity: 0;transform: none}
}
@keyframes pc-b5{0%,22%{opacity: 1;transform: scaleY(0)}
30%,92%{opacity: 1;transform: none}
98%,100%{opacity: 0;transform: none}
}
@keyframes pc-b6{0%,25.5%{opacity: 1;transform: scaleY(0)}
33.5%,92%{opacity: 1;transform: none}
98%,100%{opacity: 0;transform: none}
}
@keyframes pc-b7{0%,29%{opacity: 1;transform: scaleY(0)}
37%,92%{opacity: 1;transform: none}
98%,100%{opacity: 0;transform: none}
}
@keyframes pc-b8{0%,32.5%{opacity: 1;transform: scaleY(0)}
40.5%,92%{opacity: 1;transform: none}
98%,100%{opacity: 0;transform: none}
}
@keyframes pc-b9{0%,36%{opacity: 1;transform: scaleY(0)}
44%,92%{opacity: 1;transform: none}
98%,100%{opacity: 0;transform: none}
}
@keyframes pc-b10{0%,39.5%{opacity: 1;transform: scaleY(0)}
47.5%,92%{opacity: 1;transform: none}
98%,100%{opacity: 0;transform: none}
}
@keyframes pc-v1{0%,46%{opacity: 1;transform: scaleX(0)}
55%,92%{opacity: 1;transform: none}
98%,100%{opacity: 0;transform: none}
}
@keyframes pc-v2{0%,50%{opacity: 1;transform: scaleX(0)}
59%,92%{opacity: 1;transform: none}
98%,100%{opacity: 0;transform: none}
}
.il-passo-divulgar{--ciclo: 6.5s}
.il-passo-divulgar .pd-cena{align-self: start}
.il-passo-divulgar .pd-balao{display: grid;grid-template-columns: 40px minmax(0,1fr);gap: 9px;align-items: center;padding: 6px 8px 6px 6px;font-size: 10.5px}
.il-passo-divulgar .pd-balao .il-foto{width: 40px;height: 40px;border-radius: 6px}
.il-passo-divulgar .pd-texto{display: grid;justify-items: start;min-width: 0}
.il-passo-divulgar .pd-texto > *{display: block;height: 13.3px;line-height: 13.3px;white-space: nowrap}
.il-passo-divulgar .pd-por{margin-left: 5px}
.il-passo-divulgar .pd-link{color: hsl(150 84% 78%);font-weight: 700;text-decoration: underline;text-underline-offset: 2px;text-decoration-thickness: 1px}
.il-passo-divulgar .pd-botao{opacity: 0}
.il-passo-divulgar .il-toque{left: 50%;top: 75px;background: hsl(0 0% 100% / .3);border-color: hsl(0 0% 100% / .9)}
.il-passo-divulgar .pd-area{position: absolute;left: 0;right: 0;bottom: 0;display: grid;justify-items: center}
.il-passo-divulgar .pd-folha{width: 100%;max-width: 274px;display: grid;gap: 7px;justify-items: center;padding: 6px 12px 10px;border-radius: 14px 14px 0 0;background: #fff;box-shadow: 0 0 0 1px hsl(160 30% 10% / .07),0 -10px 22px -14px hsl(160 30% 10% / .34)}
.il-passo-divulgar .pd-alca{width: 28px;height: 4px;border-radius: 2px;background: var(--c-linha-2)}
.il-passo-divulgar .pd-destinos{display: grid;grid-template-columns: repeat(3,minmax(0,1fr));gap: 6px;width: 100%}
.il-passo-divulgar .pd-dest{position: relative;isolation: isolate;flex-direction: column;justify-content: center;gap: 3px;padding: 6px 2px 5px;border-radius: 11px;font-size: 10px;color: var(--c-tinta);background: var(--c-fundo);border-color: var(--c-linha)}
.il-passo-divulgar .pd-dest svg{box-sizing: border-box;width: 20px;height: 20px;border: 0;border-radius: 50%;overflow: visible}
.il-passo-divulgar .pd-dest .whats{padding: 4px;color: #fff;background: #25d366}
.il-passo-divulgar .pd-dest .tele{background: radial-gradient(#fff 58%,transparent 60%)}
.il-passo-divulgar .pd-dest svg.icone{padding: 5px;color: var(--c-tinta);background: var(--c-linha);stroke-width: 2.4}
.il-passo-divulgar .pd-realce{position: absolute;inset: -2px;z-index: -1;border-radius: 12px;background: var(--c-verde-fundo);border: 1.5px solid var(--c-verde);box-shadow: 0 6px 14px -8px hsl(153 66% 28% / .6);opacity: 0}
@media (prefers-reduced-motion: no-preference){.js:not(.estatico) .visivel .il-passo-divulgar .pd-botao{animation: pd-botao var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-passo-divulgar .il-toque{animation: pd-toque var(--ciclo) ease-out infinite}
.js:not(.estatico) .visivel .il-passo-divulgar .pd-folha{animation: pd-folha var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-passo-divulgar .pd-r1{animation: pd-realce-1 var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-passo-divulgar .pd-r2{animation: pd-realce-2 var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-passo-divulgar .pd-r3{animation: pd-realce-3 var(--ciclo) var(--suave) infinite}
}
@keyframes pd-botao{0%{opacity: 0;transform: none}
4%,19%{opacity: 1;transform: none}
22%{opacity: 1;transform: scale(.95)}
26%{opacity: 1;transform: none}
32%,100%{opacity: 0;transform: none}
}
@keyframes pd-toque{0%,17%{opacity: 0;transform: scale(.6)}
21%{opacity: 1;transform: scale(1)}
28%,100%{opacity: 0;transform: scale(1.5)}
}
@keyframes pd-folha{0%,25%{opacity: 0;transform: translateY(100%)}
26%{opacity: 1;transform: translateY(100%)}
35%,92%{opacity: 1;transform: none}
98%,100%{opacity: 0;transform: translateY(14px)}
}
@keyframes pd-realce-1{0%,37%{opacity: 0;transform: scale(.94)}
40%,44%{opacity: 1;transform: none}
48%,100%{opacity: 0;transform: none}
}
@keyframes pd-realce-2{0%,45%{opacity: 0;transform: scale(.94)}
48%,52%{opacity: 1;transform: none}
56%,100%{opacity: 0;transform: none}
}
@keyframes pd-realce-3{0%,53%{opacity: 0;transform: scale(.94)}
56%,60%{opacity: 1;transform: none}
64%,100%{opacity: 0;transform: none}
}
.il-passo-gerar{--ciclo: 6.5s}
.il-passo-gerar .pg-estilos{justify-content: space-between}
.il-passo-gerar .pg-palco{align-items: start}
.il-passo-gerar .pg-botao{align-self: start;justify-self: stretch;letter-spacing: .02em;opacity: 0}
.il-passo-gerar .pg-oferta{display: grid;gap: 7px}
.il-passo-gerar .pg-balao{display: grid;grid-template-columns: 40px minmax(0,1fr);gap: 9px;align-items: center;padding: 6px 8px 6px 6px;font-size: 10.5px}
.il-passo-gerar .pg-balao .il-foto{width: 40px;height: 40px;border-radius: 6px}
.il-passo-gerar .pg-texto{position: relative;display: grid;justify-items: start;min-width: 0}
.il-passo-gerar .pg-texto > .il-digita{display: block;height: 13.3px;line-height: 13.3px}
.il-passo-gerar .pg-por{margin-left: 5px}
.il-passo-gerar .pg-link{color: hsl(150 84% 78%);font-weight: 700;text-decoration: underline;text-underline-offset: 2px;text-decoration-thickness: 1px}
.il-passo-gerar .pg-pontos{position: absolute;left: 1px;top: 50%;margin-top: -3px;opacity: 0}
.il-passo-gerar .pg-pontos i{background: #fff}
.il-passo-gerar .pg-selo{justify-self: end;padding: 3px 8px;background: #fff;border: 1px solid hsl(148 46% 78%);box-shadow: 0 6px 14px -10px hsl(153 66% 28% / .6)}
.il-passo-gerar .il-toque{left: 50%;top: 49px;background: hsl(0 0% 100% / .3);border-color: hsl(0 0% 100% / .9)}
@media (prefers-reduced-motion: no-preference){.js:not(.estatico) .visivel .il-passo-gerar .pg-botao{animation: pg-botao var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-passo-gerar .il-toque{animation: pg-toque var(--ciclo) ease-out infinite}
.js:not(.estatico) .visivel .il-passo-gerar .pg-balao{animation: pg-balao var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-passo-gerar .pg-pontos{animation: pg-pontos var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-passo-gerar .pg-p1{animation: pg-ponto-1 var(--ciclo) ease-in-out infinite}
.js:not(.estatico) .visivel .il-passo-gerar .pg-p2{animation: pg-ponto-2 var(--ciclo) ease-in-out infinite}
.js:not(.estatico) .visivel .il-passo-gerar .pg-p3{animation: pg-ponto-3 var(--ciclo) ease-in-out infinite}
.js:not(.estatico) .visivel .il-passo-gerar .pg-l1{animation: pg-linha-1 var(--ciclo) steps(20,end) infinite}
.js:not(.estatico) .visivel .il-passo-gerar .pg-l2{animation: pg-linha-2 var(--ciclo) steps(19,end) infinite}
.js:not(.estatico) .visivel .il-passo-gerar .pg-l3{animation: pg-linha-3 var(--ciclo) steps(17,end) infinite}
.js:not(.estatico) .visivel .il-passo-gerar .pg-selo{animation: pg-selo var(--ciclo) var(--salto) infinite}
}
@keyframes pg-botao{0%{opacity: 0;transform: none}
4%,14%{opacity: 1;transform: none}
17%{opacity: 1;transform: scale(.95)}
21%{opacity: 1;transform: none}
25%,100%{opacity: 0;transform: scale(.98)}
}
@keyframes pg-toque{0%,12%{opacity: 0;transform: scale(.6)}
16%{opacity: 1;transform: scale(1)}
23%,100%{opacity: 0;transform: scale(1.5)}
}
@keyframes pg-balao{0%,24%{opacity: 0;transform: translateY(8px)}
30%,92%{opacity: 1;transform: none}
98%,100%{opacity: 0;transform: none}
}
@keyframes pg-pontos{0%,40%{opacity: 1}
43%,100%{opacity: 0}
}
@keyframes pg-ponto-1{0%,26%{opacity: .45;transform: none}
29%{opacity: 1;transform: translateY(-2px)}
32%{opacity: .45;transform: none}
34.5%{opacity: 1;transform: translateY(-2px)}
37.5%,100%{opacity: .45;transform: none}
}
@keyframes pg-ponto-2{0%,27.5%{opacity: .45;transform: none}
30.5%{opacity: 1;transform: translateY(-2px)}
33.5%{opacity: .45;transform: none}
36%{opacity: 1;transform: translateY(-2px)}
39%,100%{opacity: .45;transform: none}
}
@keyframes pg-ponto-3{0%,29%{opacity: .45;transform: none}
32%{opacity: 1;transform: translateY(-2px)}
35%{opacity: .45;transform: none}
37.5%{opacity: 1;transform: translateY(-2px)}
40.5%,100%{opacity: .45;transform: none}
}
@keyframes pg-linha-1{0%,42%{max-width: 0}
48%{max-width: 124px}
49%,100%{max-width: 100%}
}
@keyframes pg-linha-2{0%,48%{max-width: 0}
54%{max-width: 130px}
55%,100%{max-width: 100%}
}
@keyframes pg-linha-3{0%,54%{max-width: 0}
59%{max-width: 100px}
60%,100%{max-width: 100%}
}
@keyframes pg-selo{0%,59%{opacity: 0;transform: scale(.6)}
64%,92%{opacity: 1;transform: none}
98%,100%{opacity: 0;transform: none}
}
.il-passo-produto{--ciclo: 6.5s}
.il-passo-produto .pp-foco{margin: -.5px;border-radius: 9.5px;border: 2px solid var(--c-verde);box-shadow: 0 0 0 3px hsl(153 66% 32% / .14);opacity: 0;pointer-events: none}
.il-passo-produto .pp-cursor{flex: none;width: 1.5px;height: 13px;margin-left: -6px;border-radius: 1px;background: var(--c-verde);opacity: 0}
.il-passo-produto .pp-cartao{display: grid;gap: 7px;padding: 8px 10px 7px}
.il-passo-produto .pp-produto{display: grid;grid-template-columns: 40px minmax(0,1fr);gap: 9px;align-items: center}
.il-passo-produto .pp-foto{place-items: center}
.il-passo-produto .pp-foto .il-foto{width: 40px;height: 40px}
.il-passo-produto .pp-foto span.il-foto{width: 39px;height: 39px}
.il-passo-produto .pp-dados{display: grid;gap: 4px;min-width: 0}
.il-passo-produto .pp-dados .il-pilha{align-items: center;min-width: 0}
.il-passo-produto .pp-bn{width: 86%;opacity: 0}
.il-passo-produto .pp-bp{width: 52%;opacity: 0}
.il-passo-produto .pp-n{font-size: 11px;font-weight: 800;white-space: nowrap;overflow: hidden;text-overflow: ellipsis}
.il-passo-produto .pp-p{display: flex;align-items: baseline;gap: 6px;white-space: nowrap}
.il-passo-produto .pp-p b{font-size: 12.5px;font-weight: 800;letter-spacing: -.01em}
.il-passo-produto .pp-p s{font-size: 10px;font-weight: 600;color: var(--c-apagado)}
.il-passo-produto .pp-lidos{display: flex;justify-content: space-between;padding-top: 7px;border-top: 1px solid var(--c-linha)}
.il-passo-produto .pp-lido{display: inline-flex;align-items: center;gap: 5px;font-size: 10px;font-weight: 700;color: var(--c-corpo)}
.il-passo-produto .pp-lido .il-pilha{place-items: center}
.il-passo-produto .pp-lido .il-ok{width: 14px;height: 14px}
.il-passo-produto .pp-aro{width: 12px;height: 12px;border-radius: 50%;background: var(--c-linha)}
.il-passo-produto .pp-lido .il-ok svg.icone{width: 9px;height: 9px}
@media (prefers-reduced-motion: no-preference){.js:not(.estatico) .visivel .il-passo-produto .il-digita{animation: pp-digita var(--ciclo) steps(17,end) infinite}
.js:not(.estatico) .visivel .il-passo-produto .pp-cursor{animation: pp-cursor var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-passo-produto .pp-foco{animation: pp-foco var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-passo-produto .pp-cartao{animation: pp-cartao var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-passo-produto .pp-bn{animation: pp-barra-1 var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-passo-produto .pp-n{animation: pp-dado-1 var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-passo-produto .pp-o1{animation: pp-ok-1 var(--ciclo) var(--salto) infinite}
.js:not(.estatico) .visivel .il-passo-produto .pp-bp{animation: pp-barra-2 var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-passo-produto .pp-p{animation: pp-dado-2 var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-passo-produto .pp-o2{animation: pp-ok-2 var(--ciclo) var(--salto) infinite}
.js:not(.estatico) .visivel .il-passo-produto .pp-f{animation: pp-dado-3 var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-passo-produto .pp-o3{animation: pp-ok-3 var(--ciclo) var(--salto) infinite}
}
@keyframes pp-digita{0%,3%{max-width: 0;opacity: 1}
17%{max-width: 104px;opacity: 1}
18%,92%{max-width: 100%;opacity: 1}
98%,100%{max-width: 100%;opacity: 0}
}
@keyframes pp-cursor{0%{opacity: 0}
3%,18%{opacity: 1}
22%,100%{opacity: 0}
}
@keyframes pp-foco{0%{opacity: 0}
3%,18%{opacity: 1}
24%,100%{opacity: 0}
}
@keyframes pp-cartao{0%,18%{opacity: 0;transform: translateY(8px)}
25%,92%{opacity: 1;transform: none}
98%,100%{opacity: 0;transform: none}
}
@keyframes pp-barra-1{0%,29%{opacity: 1}
33%,100%{opacity: 0}
}
@keyframes pp-dado-1{0%,30%{opacity: 0;transform: translateY(3px)}
36%,100%{opacity: 1;transform: none}
}
@keyframes pp-ok-1{0%,32%{opacity: 0;transform: scale(.4)}
38%,100%{opacity: 1;transform: none}
}
@keyframes pp-barra-2{0%,38%{opacity: 1}
42%,100%{opacity: 0}
}
@keyframes pp-dado-2{0%,39%{opacity: 0;transform: translateY(3px)}
45%,100%{opacity: 1;transform: none}
}
@keyframes pp-ok-2{0%,41%{opacity: 0;transform: scale(.4)}
47%,100%{opacity: 1;transform: none}
}
@keyframes pp-dado-3{0%,47%{opacity: 0;transform: scale(.9)}
53%,100%{opacity: 1;transform: none}
}
@keyframes pp-ok-3{0%,49%{opacity: 0;transform: scale(.4)}
55%,100%{opacity: 1;transform: none}
}
.il-preco-de .pde-cartao{display: grid;grid-template-columns: 58px minmax(0,1fr);gap: 11px;align-items: center;width: 100%;max-width: 232px;padding: 10px}
.il-preco-de .pde-foto{position: relative;display: block;width: 58px;height: 58px}
.il-preco-de .pde-foto .il-foto{width: 58px;height: 58px;border-radius: 9px}
.il-preco-de .pde-foto .il-logo{position: absolute;left: -4px;bottom: -4px;box-shadow: 0 0 0 2px #fff}
.il-preco-de .pde-dados{display: grid;min-width: 0}
.il-preco-de .pde-nome{font-size: 10px;font-weight: 800;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;margin-bottom: 6px}
.il-preco-de .pde-linha{display: flex;align-items: baseline}
.il-preco-de .pde-linha + .pde-linha{margin-top: 5px}
.il-preco-de .pde-rotulo{width: 23px;flex: none;font-size: 10px;font-weight: 700;color: var(--c-apagado)}
.il-preco-de .pde-valor{position: relative;font-size: 12px;font-weight: 600;line-height: 1.3;color: var(--c-apagado);white-space: nowrap}
.il-preco-de .pde-risco{position: absolute;left: -2px;right: -2px;top: 50%;height: 1.25px;border-radius: 1px;background: var(--c-apagado);transform-origin: left}
.il-preco-de .pde-vazio{margin: -2px -5px;border-radius: 6px;border: 1.5px dashed var(--c-linha-2);opacity: 0}
.il-preco-de .pde-selo{align-self: center;margin-left: 9px;padding: 2px 6px}
.il-preco-de .pde-por{font-size: 16px;font-weight: 800;line-height: 1.2;letter-spacing: -.02em;white-space: nowrap}
@media (prefers-reduced-motion: no-preference){.js:not(.estatico) .visivel .il-preco-de .pde-vazio{animation: pde-vazio var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-preco-de .pde-valor{animation: pde-valor var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-preco-de .pde-risco{animation: pde-risco var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-preco-de .pde-selo{animation: pde-selo var(--ciclo) var(--salto) infinite}
}
@keyframes pde-vazio{0%,22%{opacity: 1}
28%,93%{opacity: 0}
99%,100%{opacity: 1}
}
@keyframes pde-valor{0%,22%{opacity: 0;transform: translateY(7px)}
30%,92%{opacity: 1;transform: none}
98%,100%{opacity: 0;transform: none}
}
@keyframes pde-risco{0%,34%{transform: scaleX(0)}
44%,100%{transform: none}
}
@keyframes pde-selo{0%,46%{opacity: 0;transform: scale(.5)}
53%,92%{opacity: 1;transform: none}
98%,100%{opacity: 0;transform: none}
}
.il-previa .pv-cena{display: grid;grid-template-columns: 84px 14px minmax(0,1fr);align-items: center;gap: 7px;width: 100%;max-width: 250px}
.il-previa .pv-cru{display: grid;gap: 3px;padding: 7px 6px 7px 8px;border-radius: 8px;background: #fff;border: 1px solid var(--c-linha-2);font: 500 9px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color: var(--c-corpo);opacity: .55}
.il-previa .pv-cru span::before,.il-previa .pv-cru span::after{font-weight: 700;color: var(--c-verde)}
.il-previa .pv-negrito::before,.il-previa .pv-negrito::after{content: "*"}
.il-previa .pv-riscado::before,.il-previa .pv-riscado::after{content: "~"}
.il-previa .pv-seta{justify-self: center}
.il-previa .pv-vazio{border-radius: 9px 2px 9px 9px;border: 1.5px dashed var(--c-linha-2);opacity: 0}
.il-previa .pv-balao{display: grid;gap: 4px;padding: 4px 4px 6px;transform-origin: left center}
.il-previa .pv-balao .il-foto{width: 100%;height: 40px;border-radius: 6px}
.il-previa .pv-texto{display: grid;gap: 1px;padding: 0 3px;white-space: nowrap}
.il-previa .pv-preco{opacity: .8}
@container (min-width: 250px){.il-previa .pv-cena{grid-template-columns: auto 14px minmax(0,1fr);gap: 8px}
.il-previa .pv-cru{white-space: nowrap;padding: 8px}
}
@media (prefers-reduced-motion: no-preference){.js:not(.estatico) .visivel .il-previa .pv-cru{animation: pv-cru var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-previa .pv-vazio{animation: pv-vazio var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-previa .pv-seta{animation: pv-seta var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-previa .pv-balao{animation: pv-balao var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-previa .pv-nome{animation: pv-nome var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-previa .pv-preco{animation: pv-preco var(--ciclo) var(--suave) infinite}
}
@keyframes pv-cru{0%,30%{opacity: 1}
42%,92%{opacity: .55}
99%,100%{opacity: 1}
}
@keyframes pv-vazio{0%,30%{opacity: 1}
38%,93%{opacity: 0}
99%,100%{opacity: 1}
}
@keyframes pv-seta{0%,22%{opacity: 0;transform: translateX(-5px)}
30%,92%{opacity: 1;transform: none}
98%,100%{opacity: 0;transform: none}
}
@keyframes pv-balao{0%,30%{opacity: 0;transform: translateX(-8px) scale(.96)}
40%,92%{opacity: 1;transform: none}
98%,100%{opacity: 0;transform: none}
}
@keyframes pv-nome{0%,35%{opacity: 0;transform: translateY(3px)}
42%,100%{opacity: 1;transform: none}
}
@keyframes pv-preco{0%,41%{opacity: 0;transform: translateY(3px)}
48%,100%{opacity: .8;transform: none}
}
.il-ultimas-ofertas .uo-cena{display: grid;grid-template-columns: 38% minmax(0,1fr);gap: 8px;align-items: stretch;width: 100%;max-width: 250px}
.il-ultimas-ofertas .uo-faixa{position: relative;display: grid;gap: 5px}
.il-ultimas-ofertas .uo-item{position: relative;display: flex;align-items: center;gap: 6px;height: 32px;padding: 0 5px;border-radius: 9px;background: #fff;border: 1px solid var(--c-linha);box-shadow: 0 6px 14px -12px hsl(160 30% 10% / .4);min-width: 0}
.il-ultimas-ofertas .uo-item .il-foto{width: 22px;height: 22px;border-radius: 6px}
.il-ultimas-ofertas .uo-tx{flex: 1;min-width: 0;display: grid;gap: 4px}
.il-ultimas-ofertas .uo-hora{display: flex;align-items: center;gap: 3px;color: var(--c-apagado)}
.il-ultimas-ofertas .uo-hora svg.icone{width: 10px;height: 10px;stroke-width: 2.4}
.il-ultimas-ofertas .uo-hora .il-tx{width: 16px;height: 5px}
.il-ultimas-ofertas .uo-realce{position: absolute;inset: -1px;border-radius: 9px;border: 1.5px solid var(--c-verde);box-shadow: 0 0 0 3px hsl(153 66% 32% / .14)}
.il-ultimas-ofertas .il-toque{left: 50%;top: 50%}
.il-ultimas-ofertas .uo-aberta{display: grid;grid-template-columns: minmax(0,1fr);grid-template-rows: 1fr auto;gap: 7px;min-width: 0}
.il-ultimas-ofertas .uo-balao{display: grid;gap: 5px;align-content: center;min-width: 0}
.il-ultimas-ofertas .uo-topo{display: flex;align-items: center;gap: 7px;min-width: 0}
.il-ultimas-ofertas .uo-topo .il-foto{width: 28px;height: 28px;border-radius: 6px}
.il-ultimas-ofertas .uo-nome{flex: 1;min-width: 0;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;line-height: 1.3;color: #fff}
.il-ultimas-ofertas .uo-link{font-size: 9.5px;font-weight: 600;color: #53bdeb;white-space: nowrap;overflow: hidden;text-overflow: ellipsis}
.il-ultimas-ofertas .uo-botao{padding: 6px 8px;min-width: 0}
@container (max-width: 200px){.il-ultimas-ofertas .uo-botao{gap: 4px;padding: 6px 4px;font-size: 10.5px}
}
@media (prefers-reduced-motion: no-preference){.js:not(.estatico) .visivel .il-ultimas-ofertas .uo-faixa{animation: uo-faixa var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-ultimas-ofertas .il-toque{animation: uo-toque var(--ciclo) ease-out infinite}
.js:not(.estatico) .visivel .il-ultimas-ofertas .uo-realce{animation: uo-realce var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-ultimas-ofertas .uo-balao{animation: uo-balao var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-ultimas-ofertas .uo-botao{animation: uo-botao var(--ciclo) var(--salto) infinite}
}
@keyframes uo-faixa{0%{opacity: 0;transform: translateX(81.6%)}
4%,24%{opacity: 1;transform: translateX(81.6%)}
35%,92%{opacity: 1;transform: none}
98%,100%{opacity: 0;transform: none}
}
@keyframes uo-toque{0%,11%{opacity: 0;transform: scale(.6)}
15%{opacity: 1;transform: scale(1)}
22%,100%{opacity: 0;transform: scale(1.5)}
}
@keyframes uo-realce{0%,15%{opacity: 0;transform: scale(1.06)}
21%,100%{opacity: 1;transform: none}
}
@keyframes uo-balao{0%,30%{opacity: 0;transform: translateX(10px)}
40%,92%{opacity: 1;transform: none}
98%,100%{opacity: 0;transform: none}
}
@keyframes uo-botao{0%,41%{opacity: 0;transform: scale(.85)}
48%,92%{opacity: 1;transform: none}
98%,100%{opacity: 0;transform: none}
}
.il-vitrines{--ciclo: 7.5s}
.il-vitrines .vt-cena{gap: 11px}
.il-vitrines .vt-lojas{display: flex;gap: 10px}
.il-vitrines .vt-loja{position: relative;display: grid;place-items: center;width: 48px;height: 44px;border-radius: 12px;background: #fff;border: 1px solid var(--c-linha);box-shadow: 0 8px 18px -14px hsl(160 30% 10% / .4)}
.il-vitrines .vt-loja .il-logo{position: relative;width: 30px;height: 30px;border-radius: 7px}
.il-vitrines .vt-anel{position: absolute;inset: -1px;border-radius: 12px;border: 2px solid var(--c-verde);box-shadow: 0 0 0 3px hsl(153 66% 32% / .14)}
.il-vitrines .vt-m .vt-anel,.il-vitrines .vt-a .vt-anel{opacity: 0}
.il-vitrines .vt-s{transform: scale(1.07)}
.il-vitrines .vt-listas{justify-items: center}
.il-vitrines .vt-lista{display: grid;gap: 4px;justify-items: center}
.il-vitrines .vt-lista .il-chip{padding: 4px 10px}
.il-vitrines .vt-lm,.il-vitrines .vt-la{opacity: 0}
@container (min-width: 270px){.il-vitrines .vt-cena{gap: 12px;max-width: 270px}
.il-vitrines .vt-lojas{gap: 12px}
.il-vitrines .vt-loja{width: 58px;height: 54px;border-radius: 14px}
.il-vitrines .vt-loja .il-logo{width: 36px;height: 36px;border-radius: 9px}
.il-vitrines .vt-anel{border-radius: 14px}
.il-vitrines .vt-lista{display: flex;gap: 6px}
.il-vitrines .vt-lista .il-chip{padding: 5px 10px}
}
@media (prefers-reduced-motion: no-preference){.js:not(.estatico) .visivel .il-vitrines .vt-s{animation: vt-loja-s var(--ciclo) var(--salto) infinite}
.js:not(.estatico) .visivel .il-vitrines .vt-m{animation: vt-loja-m var(--ciclo) var(--salto) infinite}
.js:not(.estatico) .visivel .il-vitrines .vt-a{animation: vt-loja-a var(--ciclo) var(--salto) infinite}
.js:not(.estatico) .visivel .il-vitrines .vt-s .vt-anel{animation: vt-anel-s var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-vitrines .vt-m .vt-anel{animation: vt-anel-m var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-vitrines .vt-a .vt-anel{animation: vt-anel-a var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-vitrines .vt-ls{animation: vt-lista-s var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-vitrines .vt-lm{animation: vt-lista-m var(--ciclo) var(--suave) infinite}
.js:not(.estatico) .visivel .il-vitrines .vt-la{animation: vt-lista-a var(--ciclo) var(--suave) infinite}
}
@keyframes vt-loja-s{0%,27%{transform: scale(1.07)}
32%,93%{transform: scale(1)}
98%,100%{transform: scale(1.07)}
}
@keyframes vt-loja-m{0%,27%{transform: scale(1)}
32%,61%{transform: scale(1.07)}
66%,100%{transform: scale(1)}
}
@keyframes vt-loja-a{0%,61%{transform: scale(1)}
66%,93%{transform: scale(1.07)}
98%,100%{transform: scale(1)}
}
@keyframes vt-anel-s{0%,27%{opacity: 1}
31%,93%{opacity: 0}
97%,100%{opacity: 1}
}
@keyframes vt-anel-m{0%,27%{opacity: 0}
31%,61%{opacity: 1}
65%,100%{opacity: 0}
}
@keyframes vt-anel-a{0%,61%{opacity: 0}
65%,93%{opacity: 1}
97%,100%{opacity: 0}
}
@keyframes vt-lista-s{0%,26%{opacity: 1;transform: translateY(0)}
29%{opacity: 0;transform: translateY(0)}
95%{opacity: 0;transform: translateY(5px)}
100%{opacity: 1;transform: translateY(0)}
}
@keyframes vt-lista-m{0%,29%{opacity: 0;transform: translateY(5px)}
35%,60.5%{opacity: 1;transform: translateY(0)}
63.5%,100%{opacity: 0;transform: translateY(0)}
}
@keyframes vt-lista-a{0%,63.5%{opacity: 0;transform: translateY(5px)}
69%,92%{opacity: 1;transform: translateY(0)}
95%,100%{opacity: 0;transform: translateY(0)}
}