/* Blocos animados das páginas de implantação (parts/blocos-animados.php): montagem, caminhos, checklist e faixa de lojas. Fonte sempre com a reserva. */
/* ===== 1. A loja sendo montada (fg-mt) ===== */
.fg-mt{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:40px;align-items:center;font-family:"IBM Plex Sans","IBM Plex Sans Fallback",Arial,sans-serif}
.fg-mt *{box-sizing:border-box}
.fg-mt-palco{position:relative;padding:26px 30px 30px 0;min-width:0}
.fg-mt-nav{background:#fff;border:1px solid #e8d9db;border-radius:16px;box-shadow:0 18px 50px rgba(47,23,24,.12);overflow:hidden}
.fg-mt-barra{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#f7f1f2;border-bottom:1px solid #eee2e4}
.fg-mt-barra i{width:9px;height:9px;border-radius:50%;background:#e2cfd2}
.fg-mt-url{margin-left:10px;flex:1;display:flex;align-items:center;gap:6px;background:#fff;border:1px solid #eadcdf;border-radius:999px;padding:4px 12px;font-family:"Fira Code",monospace;font-size:12px;color:#8b7577;transition:color .4s,border-color .4s}
.fg-mt-cad{width:12px;height:12px;flex:none;opacity:.35;transition:opacity .4s,color .4s}
.fg-mt-site{position:relative;aspect-ratio:16/10;background:#fff;padding:4.5% 5%;display:grid;grid-template-rows:auto auto 1fr;gap:5%}
.fg-mt-topo{display:flex;align-items:center;gap:4%}
.fg-mt-logo{width:16%;height:12px;border-radius:4px;background:#2f1718}
.fg-mt-menu{flex:1;display:flex;gap:5%}.fg-mt-menu b{display:block;height:7px;width:14%;border-radius:4px;background:#e6d6d9}
.fg-mt-carr{width:18px;height:18px;border-radius:5px;border:2px solid #2f1718}
.fg-mt-hero{border-radius:12px;background:linear-gradient(120deg,#2f1718,#8f1b45);aspect-ratio:16/4.2;display:flex;flex-direction:column;justify-content:center;gap:9%;padding:0 6%}
.fg-mt-hero b{display:block;height:9px;border-radius:5px;background:rgba(255,255,255,.85);width:42%}
.fg-mt-hero b+b{width:28%;background:rgba(255,255,255,.45)}
.fg-mt-hero span{display:block;width:16%;height:16px;border-radius:999px;background:linear-gradient(90deg,#f91669,#ff3d00)}
.fg-mt-grade{display:grid;grid-template-columns:repeat(4,1fr);gap:3.5%;align-content:start}
.fg-mt-prod{border:1px solid #f0e4e6;border-radius:10px;padding:7%;display:flex;flex-direction:column;gap:7px}
.fg-mt-prod i{display:block;aspect-ratio:1;border-radius:7px;background:#f6eef0}
.fg-mt-prod:nth-child(2) i{background:#f1e8ea}.fg-mt-prod:nth-child(3) i{background:#f7ecef}.fg-mt-prod:nth-child(4) i{background:#efe6e8}
.fg-mt-prod b{display:block;height:6px;border-radius:4px;background:#eadde0;width:80%}
.fg-mt-prod s{display:block;height:7px;border-radius:4px;background:#c2094f;width:40%;text-decoration:none}
/* camadas que flutuam sobre a moldura */
.fg-mt-flut{position:absolute;background:#fff;border:1px solid #e8d9db;border-radius:14px;box-shadow:0 12px 30px rgba(47,23,24,.14);padding:12px 14px;font-size:12.5px;line-height:1.35;color:#4d3b3c}
.fg-mt-flut strong{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#7a6668;margin-bottom:7px;font-weight:600}
.fg-mt-chips{display:flex;flex-wrap:wrap;gap:5px}
.fg-mt-chips span{border:1px solid #efdfe2;background:#faf6f7;border-radius:999px;padding:3px 9px;font-size:12px;white-space:nowrap}
.fg-mt-pag{right:0;bottom:4%;width:42%}
.fg-mt-pag .fg-mt-frete{display:flex;gap:6px;margin-top:8px}
.fg-mt-pag .fg-mt-frete em{flex:1;font-style:normal;border:1px solid #eadcdf;border-radius:8px;padding:4px 8px;color:#a0858a;font-family:"Fira Code",monospace;font-size:11px}
.fg-mt-pag .fg-mt-frete u{text-decoration:none;background:#2f1718;color:#fff;border-radius:8px;padding:4px 8px;font-size:11px}
.fg-mt-int{left:-22px;top:42%;width:34%}
.fg-mt-int .fg-mt-chips span{display:flex;align-items:center;gap:6px}
.fg-mt-int .fg-mt-chips span:before{content:"";width:7px;height:7px;border-radius:50%;background:#95bf47}
.fg-mt-seo{right:0;top:0;width:46%}
.fg-mt-serp small{display:block;font-size:11px;color:#1d6b3f;font-family:"Fira Code",monospace}
.fg-mt-serp p{margin:2px 0 8px;color:#1a0dab;font-size:13.5px;font-weight:500}
.fg-mt-ar{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;background:#fff;border-radius:999px;padding:12px 20px 12px 14px;font-weight:600;color:#1d6b3f;box-shadow:0 14px 40px rgba(29,107,63,.25);border:1px solid #bfe6cf;font-size:16px;white-space:nowrap}
.fg-mt-ar svg{width:26px;height:26px;color:#fff;background:#2e9e5b;border-radius:50%;padding:5px}
.fg-mt-ilus{position:absolute;left:0;bottom:0;font-family:"Fira Code",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#a0858a;border:1px dashed #e2c9cd;border-radius:999px;padding:3px 10px;background:#fff}
/* etapas */
.fg-mt-etapas{list-style:none;margin:0;padding:0;counter-reset:mt;display:flex;flex-direction:column;gap:8px}
.fg-mt-etapa{counter-increment:mt;display:grid;grid-template-columns:34px 1fr;column-gap:14px;align-items:start;padding:12px 16px;border-radius:14px;border:1px solid transparent;transition:background .35s,border-color .35s,box-shadow .35s,opacity .35s}
.fg-mt-etapa:before{content:counter(mt);grid-row:span 2;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:"Fira Code",monospace;font-size:13px;font-weight:600;background:#fde7ef;color:#c2094f;transition:all .35s}
.fg-mt-etapa h3{margin:0;font-size:17px;line-height:1.3;color:#2f1718;font-weight:600}
.fg-mt-etapa p{margin:3px 0 0;font-size:14.5px;line-height:1.45;color:#6f5c5d}
.fg-mt-etapa.is-feita:before{content:"✓";background:#e3f4ea;color:#1d6b3f}
.fg-mt-etapa.is-atual{background:#fff;border-color:#f3c3d5;box-shadow:0 8px 24px rgba(194,9,79,.10)}
.fg-mt-etapa.is-atual:before{background:linear-gradient(135deg,#f91669,#ff3d00);color:#fff}
/* estados da animação (só com JS e sem "reduzir movimento") */
.fg-mt.fg-anim [data-mt]{transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.2,1)}
.fg-mt.fg-anim [data-mt]:not(.on){opacity:0;transform:translateY(10px) scale(.97)}
.fg-mt.fg-anim .fg-mt-prod[data-mt]:not(.on){transform:scale(.85)}
.fg-mt.fg-anim .fg-mt-ar:not(.on){transform:translate(-50%,-40%) scale(.9)}
.fg-mt.fg-anim .fg-mt-ar.on{transform:translate(-50%,-50%)}
.fg-mt.fg-anim .fg-mt-etapa:not(.is-feita):not(.is-atual){opacity:.5}
.fg-mt.fg-anim.is-no-ar .fg-mt-flut{opacity:0;transform:scale(.96)}
.fg-mt.is-no-ar .fg-mt-url{color:#1d6b3f;border-color:#bfe6cf}.fg-mt.is-no-ar .fg-mt-cad{opacity:1;color:#2e9e5b}
.fg-mt:not(.fg-anim) .fg-mt-ar{display:none}
@media(max-width:900px){.fg-mt{grid-template-columns:1fr;gap:26px}.fg-mt-palco{padding:44px 0 34px}}
@media(max-width:640px){
 .fg-mt-flut{padding:8px 10px;font-size:11px;border-radius:11px}.fg-mt-flut strong{font-size:9.5px;margin-bottom:4px}
 .fg-mt-chips span{font-size:10.5px;padding:2px 7px}
 .fg-mt-seo{width:58%;top:0}.fg-mt-serp p{font-size:11.5px;margin-bottom:5px}
 .fg-mt-pag{width:60%;bottom:2%}.fg-mt-int{left:-6px;width:44%;top:48%}
 .fg-mt-pag .fg-mt-frete{display:none}
 .fg-mt-ar{font-size:14px;padding:9px 16px 9px 10px}
 .fg-mt.fg-anim .fg-mt-flut.on:not(.is-atual){opacity:0;transform:scale(.96)}
 .fg-mt-seo{width:66%}.fg-mt-pag{width:58%}.fg-mt-int{width:52%;top:40%}
 .fg-mt-etapas{display:grid;grid-template-columns:1fr 1fr;gap:6px}
 .fg-mt-etapa{grid-template-columns:28px 1fr;column-gap:10px;padding:10px}
 .fg-mt-etapa:before{width:28px;height:28px;font-size:12px}
 .fg-mt-etapa h3{font-size:14.5px}
 .fg-mt.fg-anim .fg-mt-etapa p{display:none}
 .fg-mt.fg-anim .fg-mt-legenda{display:block}
 .fg-mt:not(.fg-anim) .fg-mt-etapas{grid-template-columns:1fr}
}
.fg-mt-legenda{display:none;margin:10px 0 0;font-size:14px;line-height:1.45;color:#6f5c5d;min-height:3em;text-align:center}

/* ===== 2. Dois caminhos (fg-cm) ===== */
.fg-cm{background:#fff;border:1px solid #e8d9db;border-radius:22px;box-shadow:0 6px 22px rgba(47,23,24,.06);padding:34px;font-family:"IBM Plex Sans","IBM Plex Sans Fallback",Arial,sans-serif}
.fg-cm *{box-sizing:border-box}
.fg-cm-troca{display:flex;justify-content:center;margin:0 auto 30px;background:#f7eff1;border-radius:999px;padding:5px;width:max-content;max-width:100%;position:relative}
.fg-cm-troca button{position:relative;z-index:1;border:0;background:none;font:inherit;font-size:16px;font-weight:600;color:#7a6668;padding:11px 24px;border-radius:999px;cursor:pointer;transition:color .3s;white-space:nowrap}
.fg-cm-troca button[aria-pressed=true]{color:#fff}
.fg-cm-pilula{position:absolute;top:5px;bottom:5px;left:5px;border-radius:999px;background:linear-gradient(135deg,#2f1718,#8f1b45);transition:transform .45s cubic-bezier(.2,.8,.2,1),width .45s cubic-bezier(.2,.8,.2,1)}
.fg-cm-topo{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:14px;flex-wrap:wrap}
.fg-cm-prazo{font-size:15px;color:#7a6668}.fg-cm-prazo strong{display:block;font-size:34px;line-height:1.1;color:#2f1718;font-weight:600}
.fg-cm-resumo{max-width:520px;margin:0;font-size:15.5px;line-height:1.5;text-align:right}
.fg-cm-regua{position:relative;margin:8px 0 34px;padding-top:6px}
.fg-cm-trilho{position:relative;height:14px;border-radius:999px;background:#f4ecee;overflow:hidden}
.fg-cm-barra{position:absolute;left:0;top:0;bottom:0;border-radius:999px;transition:width .9s cubic-bezier(.2,.8,.2,1)}
.fg-cm-barra.min{background:linear-gradient(90deg,#f91669,#ff3d00);z-index:1}
.fg-cm-barra.max{background:repeating-linear-gradient(135deg,#f9b6cf 0 6px,#fcd9e6 6px 12px)}
.fg-cm-eixo{position:relative;height:22px;margin-top:6px;font-family:"Fira Code",monospace;font-size:11px;color:#a0858a}
.fg-cm-eixo span{position:absolute;transform:translateX(-50%);white-space:nowrap}.fg-cm-eixo span:first-child{transform:none}.fg-cm-eixo span:last-child{transform:translateX(-100%)}
.fg-cm-leg{display:flex;gap:18px;font-size:12.5px;color:#7a6668;flex-wrap:wrap}.fg-cm-leg i{display:inline-block;width:22px;height:8px;border-radius:999px;margin-right:6px;vertical-align:middle;background:linear-gradient(90deg,#f91669,#ff3d00)}.fg-cm-leg i.max{background:repeating-linear-gradient(135deg,#f9b6cf 0 4px,#fcd9e6 4px 8px)}
.fg-cm-etapas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;counter-reset:cm}
.fg-cm-etapa{counter-increment:cm;background:#faf6f7;border:1px solid #efe3e5;border-radius:16px;padding:16px 15px;transition:background .4s,border-color .4s}
.fg-cm-etapa:before{content:counter(cm);display:inline-flex;width:26px;height:26px;border-radius:50%;align-items:center;justify-content:center;font-family:"Fira Code",monospace;font-size:12px;font-weight:600;background:#fde7ef;color:#c2094f;margin-bottom:10px}
.fg-cm-etapa h4{margin:0 0 6px;font-size:15.5px;line-height:1.3;color:#2f1718;font-weight:600}
.fg-cm-etapa p{margin:0;font-size:13.5px;line-height:1.45;color:#6f5c5d}
.fg-cm-painel{transition:opacity .25s}
.fg-cm-painel+.fg-cm-painel{margin-top:34px;padding-top:30px;border-top:1px solid #f0e3e5}
.fg-cm-nome{margin:0 0 4px;font-size:20px;line-height:1.3;color:#6a0b11;font-weight:600}
.fg-cm-prazo span{display:block}
/* com JS: um painel por vez, escolhido no botão; sem JS os dois aparecem empilhados */
.fg-cm:not(.fg-js) .fg-cm-troca,.fg-cm:not(.fg-js) .fg-cm-regua{display:none}
.fg-cm.fg-js .fg-cm-painel:not(.is-ativo){display:none}
.fg-cm.fg-js .fg-cm-painel+.fg-cm-painel{margin-top:0;padding-top:0;border-top:0}
.fg-cm.fg-js .fg-cm-nome{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fg-cm.is-trocando .fg-cm-painel{opacity:0}
.fg-cm-fora{margin-top:22px;display:flex;gap:10px 14px;align-items:center;flex-wrap:wrap;padding-top:18px;border-top:1px solid #f0e3e5;font-size:14px}
.fg-cm-fora strong{color:#2f1718}
.fg-cm-fora span{border:1px dashed #e2c9cd;border-radius:999px;padding:4px 11px;color:#7a6668}
.fg-cm-fora span.inclui{border-style:solid;border-color:#bfe6cf;background:#f1faf4;color:#1d6b3f}
@media(max-width:1024px){.fg-cm-etapas{grid-template-columns:1fr;gap:8px}.fg-cm-etapa{display:grid;grid-template-columns:26px 1fr;column-gap:12px;padding:12px 14px}.fg-cm-etapa:before{margin:0;grid-row:span 2}.fg-cm-resumo{text-align:left;max-width:none}}
@media(max-width:640px){.fg-cm{padding:20px 16px}.fg-cm-troca button{font-size:14px;padding:10px 14px}.fg-cm-prazo strong{font-size:28px}.fg-cm-resumo{font-size:14.5px}}

/* ===== 3. Checklist (fg-ck) ===== */
.fg-ck{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:0;background:#fff;border:1px solid #e8d9db;border-radius:22px;box-shadow:0 6px 22px rgba(47,23,24,.06);overflow:hidden;font-family:"IBM Plex Sans","IBM Plex Sans Fallback",Arial,sans-serif;max-width:980px;margin:0 auto}
.fg-ck *{box-sizing:border-box}
.fg-ck-lista{list-style:none;margin:0;padding:22px 26px}
.fg-ck-item{display:grid;grid-template-columns:30px 1fr;column-gap:14px;padding:14px 4px;border-bottom:1px solid #f3e8ea}
.fg-ck-item:last-child{border:0}
.fg-ck-box{grid-row:span 2;width:30px;height:30px;border-radius:9px;border:2px solid #e2cfd2;display:flex;align-items:center;justify-content:center;transition:background .35s,border-color .35s}
.fg-ck-box svg{width:18px;height:18px;stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:0;transition:stroke-dashoffset .45s ease .1s}
.fg-ck-item h3{margin:0;font-size:16.5px;color:#2f1718;font-weight:600;line-height:1.3}
.fg-ck-item p{margin:3px 0 0;font-size:14.5px;line-height:1.45;color:#6f5c5d}
.fg-ck-item.ok .fg-ck-box{background:linear-gradient(135deg,#f91669,#ff3d00);border-color:transparent}
.fg-ck.fg-anim .fg-ck-item:not(.ok) .fg-ck-box svg{stroke-dashoffset:24}
.fg-ck:not(.fg-anim) .fg-ck-box{background:linear-gradient(135deg,#f91669,#ff3d00);border-color:transparent}
.fg-ck-res{background:linear-gradient(160deg,#2f1718,#8f1b45);color:#fff;padding:30px 28px;display:flex;flex-direction:column;justify-content:center;gap:16px}
.fg-ck-res small{font-family:"Fira Code",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#f7b3cc}
.fg-ck-cont{font-size:44px;font-weight:600;line-height:1}.fg-ck-cont span{font-size:18px;font-weight:400;color:#f2cfdc}
.fg-ck-bar{height:8px;border-radius:999px;background:rgba(255,255,255,.18);overflow:hidden}.fg-ck-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#f91669,#ff3d00);transition:width .45s ease}
.fg-ck-pronto{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:600;transition:opacity .4s,transform .4s}
.fg-ck-pronto svg{width:28px;height:28px;background:#2e9e5b;border-radius:50%;padding:6px;flex:none}
.fg-ck.fg-anim:not(.is-pronto) .fg-ck-pronto{opacity:.25;transform:translateY(4px)}
.fg-ck-res p{margin:0;font-size:14.5px;line-height:1.5;color:#f2dde5}
@media(max-width:800px){.fg-ck{grid-template-columns:1fr}.fg-ck-lista{padding:10px 16px}.fg-ck-res{padding:22px 20px}}

/* ===== 4. Faixa curta de lojas (fg-lj, usa o carrossel da vitrine) ===== */
.fg-lj .fg-vt-txt h3{margin:0 0 6px}
.fg-lj-todas{text-align:center;margin:26px 0 0}
.fg-lj-todas a{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:#c2094f;text-decoration:underline;text-underline-offset:3px}
@media(min-width:1025px){.fg-lj-nav{display:none!important}}

@media (prefers-reduced-motion: reduce){.fg-mt *,.fg-cm *,.fg-ck *,.fg-mt,.fg-cm-painel{transition:none!important}}

/* Implantação de e-commerce (30/10): régua de 6 etapas em 3 colunas e colunas de 3 itens lado a lado, só no computador. */
@media(min-width:1025px){
#fg-lp-v2 .bloco-regua .bloco-itens:has(>li:nth-child(6):last-child){grid-template-columns:repeat(3,1fr)}
#fg-lp-v2 .bloco-regua .bloco-itens:has(>li:nth-child(6):last-child) .bloco-item:nth-child(4n):after{display:block}
#fg-lp-v2 .bloco-regua .bloco-itens:has(>li:nth-child(6):last-child) .bloco-item:nth-child(3n):after{display:none}
#fg-lp-v2 .bloco-colunas .bloco-itens:has(>li:nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
}
/* Faixa de reconhecimento com 4 itens: texto em coluna estreita no computador e grade 2×2 no celular. */
#fg-lp-v2 .bloco-credenciais .bloco-itens:has(>li:nth-child(4):last-child)>.bloco-item{max-width:230px}
@media(max-width:768px){#fg-lp-v2 .bloco-credenciais .bloco-itens:has(>li:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px}#fg-lp-v2 .bloco-credenciais .bloco-itens:has(>li:nth-child(4):last-child)>.bloco-item{max-width:none}}

/* Faixa escura de logos passando (estilo marcas-faixa, 30/10): continua o fundo do topo. */
#fg-lp-v2 .session-bloco.bloco-marcas-faixa{background:#2a1214;padding:30px 0 34px}
.fg-mq{font-family:"IBM Plex Sans","IBM Plex Sans Fallback",Arial,sans-serif}
.fg-mq-rot{margin:0 0 18px;text-align:center;font:600 12.5px/1.2 "Fira Code",monospace;letter-spacing:.12em;text-transform:uppercase;color:#f3a9c4}
.fg-mq-janela{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.fg-mq-trilho{display:flex;width:max-content;animation:fgMq 34s linear infinite}
.fg-mq-janela:hover .fg-mq-trilho{animation-play-state:paused}
.fg-mq-lista{display:flex;align-items:center;gap:64px;margin:0;padding:0 32px;list-style:none}
.fg-mq-lista li{flex:none;list-style:none;margin:0;padding:0}
.fg-mq-lista img{display:block;height:42px;width:auto;max-width:150px;object-fit:contain;opacity:.88}
@keyframes fgMq{to{transform:translateX(-50%)}}
@media(max-width:768px){.fg-mq-lista{gap:40px;padding:0 20px}.fg-mq-lista img{height:34px;max-width:120px}.fg-mq-trilho{animation-duration:26s}}
@media (prefers-reduced-motion: reduce){.fg-mq-trilho{animation:none;width:auto;justify-content:center}.fg-mq-janela{-webkit-mask-image:none;mask-image:none}.fg-mq-lista{flex-wrap:wrap;justify-content:center;row-gap:24px}.fg-mq-lista[aria-hidden]{display:none}}

/* Logo da plataforma como ícone do card (30/10): sem a caixa rosada do ícone; Wake e GoDeep são logotipos largos. */
#fg-lp-v2 .session-bloco .bloco-item.tem-icone .bloco-item-icone:has(.fg-ico-plat){background:none;border:0;box-shadow:none;width:auto;height:40px;border-radius:0;padding:0}
#fg-lp-v2 .session-bloco.bloco-colunas .bloco-item.tem-icone:has(.fg-ico-plat){grid-template-columns:auto 1fr}
.fg-ico-plat{display:block;height:36px;width:auto;max-width:120px}
.fg-ico-plat--wake{height:24px}
.fg-ico-plat--godeep{height:26px}
/* Selos maiores quando a página tira o Google Partner Premier da faixa (selos_ordem com "-google"). */
#fg-lp-v2 .bloco-credenciais .fg-selos:not(:has(.fg-selo--google)){gap:22px 30px}
#fg-lp-v2 .bloco-credenciais .fg-selos:not(:has(.fg-selo--google)) img{height:88px}
@media(max-width:768px){#fg-lp-v2 .bloco-credenciais .fg-selos:not(:has(.fg-selo--google)) img{height:60px}}

/* ---------- Do estudo de UX ao novo layout (estilo ux-relayout, 30/10) ----------
   Estados do JS em .fg-ux-palco: mostra (problemas), quente (mapa de calor), ve-w (wireframe), clica/aprova (protótipo),
   ve-d (depois), mostra-v (pontos corrigidos), cel-on (celular). Sem JS: classes do estado final já vêm no HTML. */
#fg-lp-v2 .session-bloco.bloco-ux-relayout .container{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);column-gap:48px;align-items:center}
#fg-lp-v2 .bloco-ux-relayout .container>*{grid-column:1/-1}
#fg-lp-v2 .bloco-ux-relayout .container>.fg-ux{grid-column:1;grid-row:3;min-width:0}
#fg-lp-v2 .bloco-ux-relayout .container>.bloco-itens{grid-column:2;grid-row:3;min-width:0;display:grid;grid-template-columns:1fr;gap:6px;max-width:none;margin:0;counter-reset:fgux}
#fg-lp-v2 .bloco-ux-relayout .bloco-item{position:relative;padding:14px 16px 14px 56px;border-radius:14px;border:1px solid transparent;background:transparent;box-shadow:none;counter-increment:fgux;transition:opacity .4s ease,background-color .4s ease,border-color .4s ease,box-shadow .4s ease}
#fg-lp-v2 .bloco-ux-relayout .bloco-item:before{content:counter(fgux,decimal-leading-zero);position:absolute;left:16px;top:16px;width:auto;height:auto;background:none;border-radius:0;box-shadow:none;font:600 13px/1 "Fira Code",monospace;color:#c9a3ae;transition:color .4s}
#fg-lp-v2 .bloco-ux-relayout .bloco-item:after{content:"";position:absolute;left:0;top:16px;bottom:16px;width:3px;border-radius:3px;background:#f3d3dd;transition:background .4s}
#fg-lp-v2 .bloco-ux-relayout .bloco-item-titulo{font-size:18px;margin:0 0 4px}
#fg-lp-v2 .bloco-ux-relayout .bloco-item-texto p{font-size:15px!important;line-height:1.55;margin:0}
#fg-lp-v2 .bloco-ux-relayout .fg-ux.fg-anim~.bloco-itens .bloco-item{opacity:.45}
#fg-lp-v2 .bloco-ux-relayout .fg-ux.fg-anim~.bloco-itens .bloco-item.is-on{opacity:1;background:#fff;border-color:#f2dbe2;box-shadow:0 10px 28px rgba(47,23,24,.08)}
#fg-lp-v2 .bloco-ux-relayout .fg-ux.fg-anim~.bloco-itens .bloco-item.is-on:before{color:#f91669}
#fg-lp-v2 .bloco-ux-relayout .fg-ux.fg-anim~.bloco-itens .bloco-item.is-on:after{background:#f91669}
.fg-ux{font-family:"IBM Plex Sans","IBM Plex Sans Fallback",Arial,sans-serif;color:#4d3b3c;text-align:left;position:relative}
.fg-ux *{box-sizing:border-box}
.fg-ux [data-t]:after{content:attr(data-t)}
.fg-ux-tags{display:flex;gap:8px;margin:0 0 12px}
.fg-ux-tag{padding:6px 14px;border-radius:999px;border:1px solid #ecd6dc;background:#fff;font:600 12px/1 "Fira Code",monospace;letter-spacing:.06em;text-transform:uppercase;color:#a08690;transition:all .35s}
.fg-ux-tag.is-on{background:#2f1718;border-color:#2f1718;color:#fff}
.fg-ux-nav{position:relative;border-radius:22px;background:#fff;border:1.5px solid #f3c1d3;box-shadow:0 22px 60px rgba(47,23,24,.10);overflow:hidden}
.fg-ux-barra{display:flex;align-items:center;gap:7px;padding:11px 16px;background:#f7eef1;border-bottom:1px solid #f0dfe4}
.fg-ux-barra b{width:10px;height:10px;border-radius:50%;background:#e9cdd5}
.fg-ux-url{margin-left:10px;flex:1;padding:6px 12px;border-radius:8px;background:#fff;font:500 12.5px/1 "Fira Code",monospace;color:#8b6b73}
.fg-ux-palco{position:relative;height:500px;overflow:hidden}
.fg-ux-c{position:absolute;inset:0}
.fg-ux .c-w,.fg-ux .c-d{clip-path:inset(0 100% 0 0);transition:clip-path 1.3s cubic-bezier(.6,.05,.3,1)}
.fg-ux .ve-w .c-w,.fg-ux .ve-d .c-w,.fg-ux .ve-d .c-d{clip-path:inset(0 0 0 0)}
.fg-ux-fio{position:absolute;top:0;bottom:0;left:0;width:3px;background:#f91669;opacity:0;box-shadow:0 0 0 4px rgba(249,22,105,.15)}
.fg-ux-fio.anda{opacity:1;animation:fgUxFio 1.3s cubic-bezier(.6,.05,.3,1) forwards}
@keyframes fgUxFio{from{left:0}to{left:100%}}
.fg-ux-ilus{position:absolute;left:16px;bottom:10px;z-index:5;font:600 10px/1 "Fira Code",monospace;letter-spacing:.08em;text-transform:uppercase;color:#b8a7ad}
/* antes */
.fg-ux .c-a{background:#eef0f3;font-family:Arial,sans-serif}
.fg-ux .a-promo{background:#c0392b;color:#fff;font-size:11px;padding:5px 10px;white-space:nowrap;overflow:hidden}
.fg-ux .a-topo{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#fff;border-bottom:3px solid #2c3e50}
.fg-ux .a-logo{font:700 14px/1 Georgia,serif;color:#2c3e50;white-space:nowrap}
.fg-ux .a-menu{display:flex;gap:7px;flex-wrap:wrap;font-size:9.5px;color:#2c3e50;text-transform:uppercase}
.fg-ux .a-menu span{background:#dfe4ea;padding:3px 5px}
.fg-ux .a-banner{margin:10px 12px;height:150px;background:linear-gradient(120deg,#3b6ea5,#8e44ad);position:relative;color:#fff;padding:14px;font:700 15px/1.2 Arial}
.fg-ux .a-banner small{display:block;font:400 10px/1.4 Arial;margin-top:6px;opacity:.9}
.fg-ux .a-banner i{position:absolute;top:60px;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.5)}
.fg-ux .a-banner i.e{left:6px}.fg-ux .a-banner i.d{right:6px}
.fg-ux .a-dots{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);display:flex;gap:4px}
.fg-ux .a-dots b{width:6px;height:6px;border-radius:50%;background:#fff;opacity:.6}
.fg-ux .a-grade{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;padding:0 12px}
.fg-ux .a-prod{background:#fff;height:92px;border:1px solid #ccd;padding:4px;display:flex;flex-direction:column}
.fg-ux .a-prod:before{content:"";flex:1;background:#d5d9e0}
.fg-ux .a-rod{margin:10px 12px;font-size:9px;color:#7f8c8d}
.fg-ux-x{position:absolute;width:26px;height:26px;border-radius:50%;background:#e74c3c;color:#fff;font:700 14px/26px Arial;text-align:center;box-shadow:0 0 0 5px rgba(231,76,60,.22);transform:scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.fg-ux-x span{position:absolute;left:32px;top:2px;white-space:nowrap;background:#2f1718;color:#fff;font:600 11px/1 "IBM Plex Sans","IBM Plex Sans Fallback",Arial,sans-serif;padding:5px 8px;border-radius:6px}
.fg-ux-x.x1{left:62%;top:44px}.fg-ux-x.x2{left:40%;top:84px}.fg-ux-x.x3{left:30%;top:170px}.fg-ux-x.x4{left:14%;top:368px}
.fg-ux .mostra .fg-ux-x{transform:scale(1)}
.fg-ux-calor{position:absolute;border-radius:50%;filter:blur(14px);opacity:0;transition:opacity .8s}
.fg-ux-calor.k1{left:58%;top:24px;width:150px;height:70px;background:radial-gradient(#ff3d00,#f91669 45%,transparent 70%)}
.fg-ux-calor.k2{left:5%;top:250px;width:260px;height:90px;background:radial-gradient(#ffb100,#ff6a00 40%,transparent 70%)}
.fg-ux-calor.k3{left:40%;top:110px;width:120px;height:90px;background:radial-gradient(#3b82f6,transparent 70%)}
.fg-ux .quente .fg-ux-calor{opacity:.75}
/* wireframe */
.fg-ux .c-w{background:#fafafa;padding:14px 16px}
.fg-ux .w-l{background:#e3e3e7;border-radius:6px;position:relative;display:block}
.fg-ux .w-t{position:absolute;left:8px;top:50%;transform:translateY(-50%);font:600 10px/1 "Fira Code",monospace;color:#8a8a94;letter-spacing:.04em;white-space:nowrap}
.fg-ux .w-topo{display:grid;grid-template-columns:80px 1fr 90px;gap:10px;height:34px}
.fg-ux .w-menu{display:flex;gap:8px;margin:10px 0}.fg-ux .w-menu .w-l{height:16px;flex:1}
.fg-ux .w-hero{height:140px;margin-bottom:10px}
.fg-ux .w-cats{display:flex;justify-content:space-between;gap:8px;margin-bottom:10px;padding:0 20px}.fg-ux .w-cats .w-l{height:46px;width:46px;border-radius:50%}
.fg-ux .w-grade{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.fg-ux .w-grade .w-l{height:96px}
.fg-ux .w-frete{height:26px;margin-top:10px}
.fg-ux-cursor{position:absolute;width:18px;height:18px;left:62%;top:120px;border-radius:50%;border:2px solid #f91669;opacity:0;transition:all 1s ease}
.fg-ux .clica .fg-ux-cursor{opacity:1;left:44%;top:150px}
.fg-ux-ok{position:absolute;right:16px;bottom:14px;padding:7px 12px;border-radius:999px;background:#26a35a;color:#fff;font:600 12px/1 "IBM Plex Sans","IBM Plex Sans Fallback",Arial,sans-serif;transform:translateY(12px);opacity:0;transition:all .4s}
.fg-ux .aprova .fg-ux-ok{transform:none;opacity:1}
/* depois */
.fg-ux .c-d{background:#fbf8f3;color:#1d2b24}
.fg-ux .d-topo{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:12px 18px;background:#fff;border-bottom:1px solid #ece6dc}
.fg-ux .d-logo{font-weight:700;font-size:16px;letter-spacing:.14em;color:#1f4d3a;white-space:nowrap}
.fg-ux .d-busca{height:34px;border-radius:999px;background:#f3efe8;display:flex;align-items:center;padding:0 14px;font-size:12px;color:#8b8578;white-space:nowrap;overflow:hidden}
.fg-ux .d-icos{display:flex;gap:10px}.fg-ux .d-icos b{width:20px;height:20px;border-radius:50%;border:2px solid #1f4d3a}
.fg-ux .d-menu{display:flex;gap:18px;padding:9px 18px;font-size:12px;font-weight:600;color:#1f4d3a;background:#fff;border-bottom:1px solid #ece6dc}
.fg-ux .d-hero{margin:12px 18px;height:132px;border-radius:14px;background:linear-gradient(110deg,#1f4d3a 0%,#2f6b52 55%,#d8c3a5 100%);color:#fff;padding:18px 20px;position:relative}
.fg-ux .d-hero strong{display:block;font-size:22px;font-weight:600;line-height:1.15;max-width:60%}
.fg-ux .d-hero u{display:inline-block;margin-top:10px;text-decoration:none;background:#fff;color:#1f4d3a;font-size:12px;font-weight:700;padding:8px 14px;border-radius:999px}
.fg-ux .d-cats{display:flex;gap:14px;padding:0 18px;margin-bottom:10px}
.fg-ux .d-cats span{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10.5px;font-weight:600;color:#1f4d3a}
.fg-ux .d-cats span:before{content:"";width:40px;height:40px;border-radius:50%;background:#e9dfcf}
.fg-ux .d-grade{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:0 18px}
.fg-ux .d-prod{background:#fff;border-radius:10px;padding:6px;border:1px solid #ece6dc;font-size:10.5px}
.fg-ux .d-prod i{display:block;height:46px;border-radius:7px;background:#efe7da;margin-bottom:5px}
.fg-ux .d-prod b{display:block;color:#1f4d3a;font-size:11.5px}
.fg-ux .d-prod u{display:block;margin-top:4px;text-decoration:none;text-align:center;background:#1f4d3a;color:#fff;border-radius:6px;padding:3px 0;font-weight:600;font-size:10px}
.fg-ux .d-frete{margin:10px 18px 0;padding:7px 12px;border-radius:8px;background:#fff;border:1px dashed #b9a98d;font-size:11px;color:#5d5546}
.fg-ux-v{position:absolute;width:24px;height:24px;border-radius:50%;background:#26a35a;box-shadow:0 0 0 5px rgba(38,163,90,.2);transform:scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.fg-ux-v:before{content:"";position:absolute;left:8px;top:5px;width:6px;height:10px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.fg-ux-v.v1{left:46%;top:18px}.fg-ux-v.v2{left:26%;top:56px}.fg-ux-v.v3{left:40%;top:128px}.fg-ux-v.v4{left:54%;top:418px}
.fg-ux .mostra-v .fg-ux-v{transform:scale(1)}
.fg-ux-cel{position:absolute;right:18px;bottom:-330px;width:138px;height:276px;border-radius:24px;background:#111;padding:7px;box-shadow:0 20px 40px rgba(0,0,0,.25);transition:bottom .9s cubic-bezier(.3,1.2,.5,1)}
.fg-ux .cel-on .fg-ux-cel{bottom:16px}
.fg-ux .cel-t{height:100%;border-radius:18px;background:#fbf8f3;overflow:hidden}
.fg-ux .cel-t .t1{display:flex;justify-content:space-between;align-items:center;padding:8px 9px;background:#fff;font-weight:700;font-size:9px;letter-spacing:.12em;color:#1f4d3a}
.fg-ux .cel-t .t1m{width:12px;height:8px;border-top:2px solid #1f4d3a;border-bottom:2px solid #1f4d3a}
.fg-ux .cel-t .t2{margin:6px 8px;height:20px;border-radius:999px;background:#f3efe8;font-size:8px;color:#8b8578;padding:6px 8px}
.fg-ux .cel-t .t3{margin:6px 8px;height:78px;border-radius:10px;background:linear-gradient(110deg,#1f4d3a,#2f6b52)}
.fg-ux .cel-t .t4{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:0 8px}.fg-ux .cel-t .t4 i{height:60px;border-radius:7px;background:#efe7da}
.fg-ux .cel-t .t5{margin:6px 8px;height:22px;border-radius:7px;background:#1f4d3a}
@media(max-width:1024px){
#fg-lp-v2 .session-bloco.bloco-ux-relayout .container{grid-template-columns:1fr}
#fg-lp-v2 .bloco-ux-relayout .container>.fg-ux{grid-column:1;grid-row:3;margin:0 0 24px}
#fg-lp-v2 .bloco-ux-relayout .container>.bloco-itens{grid-column:1;grid-row:4}
}
@media(max-width:640px){
.fg-ux-palco{height:450px}
.fg-ux-nav{border-radius:18px}
.fg-ux .a-menu{font-size:8px;gap:4px}.fg-ux .a-grade{grid-template-columns:repeat(3,1fr)}.fg-ux .a-prod:nth-child(n+4){display:none}
.fg-ux-x span{font-size:10px}.fg-ux-x.x1{left:46%}.fg-ux-x.x2{left:12%;top:96px}.fg-ux-x.x3{left:12%;top:190px}.fg-ux-x.x4{left:6%;top:330px}
.fg-ux .d-topo{grid-template-columns:auto 1fr;padding:10px 12px}.fg-ux .d-icos{display:none}.fg-ux .d-menu{gap:10px;padding:8px 12px;font-size:11px;overflow:hidden;white-space:nowrap}
.fg-ux .d-hero{margin:10px 12px;height:110px}.fg-ux .d-hero strong{font-size:17px}
.fg-ux .d-cats{gap:8px;padding:0 12px}.fg-ux .d-grade{grid-template-columns:repeat(2,1fr);padding:0 12px}.fg-ux .d-prod:nth-child(n+3){display:none}
.fg-ux .d-frete{margin:8px 12px 0}
.fg-ux-v.v4{left:60%;top:372px}
.fg-ux-cel{width:104px;height:208px;right:10px;border-radius:18px;padding:5px}
.fg-ux .cel-t .t3{height:52px}.fg-ux .cel-t .t4 i{height:40px}
.fg-ux .w-grade{grid-template-columns:repeat(2,1fr)}.fg-ux .w-grade .w-l:nth-child(n+3){display:none}.fg-ux .w-hero{height:110px}.fg-ux .w-cats{padding:0}
#fg-lp-v2 .bloco-ux-relayout .bloco-item{padding:12px 12px 12px 48px}
#fg-lp-v2 .bloco-ux-relayout .bloco-item:before{left:12px;top:14px}
}
@media (prefers-reduced-motion: reduce){.fg-ux *{transition:none!important;animation:none!important}}