/* EFOR® STUDIO — palcos 01 · Site (.ps-) e 02 · Loja Express (.pl-).
   O DOM é montado por motion/site.js e motion/loja.js dentro de [data-palco]; aqui ficam a composição e o acabamento.
   Tudo em cqw, para a cena inteira acompanhar a largura do palco; com o palco até 460 px, textos e alvos crescem. */
.ps-ligado>.palco-estatico,.pl-ligado>.palco-estatico{display:none}
.ps,.pl{position:absolute;inset:0;overflow:hidden;border-radius:inherit;line-height:1.2;color:var(--tinta);-webkit-user-select:none;user-select:none}
.ps svg,.pl svg{max-width:none}
.ps p,.pl p{margin:0}
.ps-recorte,.pl-recorte{position:relative;overflow:hidden}
.ps-recorte img,.pl-recorte img{position:absolute;max-width:none;height:auto}
.ps .cursor-luca,.pl .cursor-luca{transform-origin:0 0}
/* Partida escondida só com JS; o Motor escreve cada quadro por cima. */
.js .ps-janela,.js .ps-fone,.js .ps-seletor,.js .pl-janela,.js .ps .cursor-luca,.js .pl .cursor-luca{opacity:0}

/* ───────────── 01 · Site: a página que rola sozinha e troca de pele ───────────── */
.ps{--ps-barra:4.8cqw}
.ps-massa{position:absolute;left:-6cqw;top:-4cqw;width:112cqw;height:83cqw;fill:#2a2e27;will-change:transform}

.ps-janela{position:absolute;left:21cqw;top:7.5cqw;width:74cqw;border-radius:2.2cqw;background:var(--tinta);overflow:hidden;box-shadow:0 0 0 1px rgba(243,243,239,.1),0 3.2cqw 7cqw rgba(0,0,0,.42),0 .5cqw 1.5cqw rgba(0,0,0,.28);transform-origin:50% 62%;will-change:transform,opacity}
.ps-barra,.pl-barra{display:flex;align-items:center;justify-content:space-between;padding:0 1.9cqw}
.ps-barra{height:var(--ps-barra)}
.ps-barra::after,.pl-barra::after{content:"";width:4.9cqw}
.ps-pontos,.pl-pontos{display:flex;gap:.8cqw;width:4.9cqw}
.ps-pontos i,.pl-pontos i{width:1.1cqw;height:1.1cqw;border-radius:50%;background:#4b4f47}
.ps-url,.pl-url{display:flex;align-items:center;gap:.9cqw;height:3cqw;padding:0 1.7cqw 0 1.3cqw;border-radius:99px;background:#2c2f29;color:var(--papel);font-size:max(9px,1.5cqw);line-height:1;letter-spacing:-.005em;white-space:nowrap}
.ps-url b,.pl-url b{font-weight:500}
.ps-url svg,.pl-url svg{flex:none;width:1.45cqw;height:1.45cqw;min-width:8px;min-height:8px;fill:none;stroke:var(--cinza-claro);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ps-tela{position:relative;height:calc(54cqw - var(--ps-barra));overflow:hidden;background:var(--papel)}
.ps-pele{position:absolute;inset:0;overflow:hidden;opacity:0;will-change:clip-path}
.ps-labio{position:absolute;inset:0;background:rgba(22,24,21,.34);opacity:0;will-change:clip-path}
.ps-pagina,.ps-rolo{width:100%;will-change:transform}
.ps-carga{position:absolute;left:0;right:0;top:0;z-index:3;height:.3cqw;background:rgba(243,243,239,.9);opacity:0;transform-origin:0 50%}

/* Seletor de estilo: o nome e as quatro miniaturas; é nele que o Luca clica. */
.ps-seletor{position:absolute;left:38cqw;top:52cqw;display:flex;align-items:center;gap:1.7cqw;height:7.8cqw;padding:0 1.35cqw 0 2.5cqw;border-radius:99px;background:var(--papel);box-shadow:0 1.8cqw 4.4cqw rgba(0,0,0,.38),0 .3cqw 1cqw rgba(0,0,0,.24);will-change:transform,opacity}
.ps-nome{display:grid;align-items:center;height:100%;overflow:hidden;font-size:max(10.5px,2.3cqw);letter-spacing:-.025em}
.ps-nome b{grid-area:1/1;font-weight:600;white-space:nowrap;opacity:0}
.ps-minis{display:flex;gap:1.05cqw}
.ps-mini{position:relative;width:5.1cqw;height:5.1cqw}
.ps-mini .ps-recorte{width:100%;height:100%;border-radius:50%;background:var(--cinza-claro)}
.ps-anel{position:absolute;inset:-.62cqw;border:.3cqw solid var(--tinta);border-radius:50%;opacity:0}

/* Celular: a mesma página, reorganizada em blocos na largura da tela. */
.ps-fone{position:absolute;left:4.5cqw;top:24cqw;width:21.5cqw;height:46.5cqw;border-radius:3.5cqw;background:#0c0e0b;box-shadow:0 0 0 1px rgba(243,243,239,.16),0 3.2cqw 7cqw rgba(0,0,0,.5),0 .6cqw 1.6cqw rgba(0,0,0,.36);transform-origin:50% 80%;will-change:transform,opacity}
.ps-fone-tela{position:absolute;inset:.85cqw;border-radius:2.7cqw;overflow:hidden;background:var(--papel)}
.ps-ilha{position:absolute;left:50%;top:1.75cqw;width:5.6cqw;height:1.55cqw;margin-left:-2.8cqw;border-radius:99px;background:#0c0e0b}
.ps-zap,.ps-onda{position:absolute;right:2cqw;bottom:2.2cqw;width:6cqw;height:6cqw;border-radius:50%}
.ps-zap{display:grid;place-items:center;background:var(--verde);box-shadow:0 .9cqw 2.2cqw rgba(0,0,0,.4);transform:scale(0)}
.ps-zap svg{width:3.5cqw;height:3.5cqw;fill:var(--tinta)}
/* Três pontinhos dentro do balão: lê como conversa sem usar marca de ninguém. */
.ps-zap::after{content:"";position:absolute;left:50%;top:50%;width:.52cqw;height:.52cqw;margin:-.36cqw 0 0 -.26cqw;border-radius:50%;background:var(--verde);box-shadow:-.92cqw 0 0 var(--verde),.92cqw 0 0 var(--verde)}
.ps-onda{border:.32cqw solid var(--verde);opacity:0}
.ps-dica{position:absolute;left:calc(100% + 1.5cqw);bottom:2.75cqw;display:flex;align-items:center;height:4.9cqw;padding:0 2cqw;border-radius:2.45cqw 2.45cqw 2.45cqw .7cqw;background:var(--papel);font-size:max(10px,2.05cqw);font-weight:600;letter-spacing:-.02em;white-space:nowrap;box-shadow:0 1.4cqw 3.6cqw rgba(0,0,0,.36),0 .3cqw .9cqw rgba(0,0,0,.2);opacity:0;transform-origin:0 100%}
.ps-toque,.pl-toque{position:absolute;left:0;top:0;width:5cqw;height:5cqw;margin:-2.5cqw 0 0 -2.5cqw;border-radius:50%;opacity:0;pointer-events:none}
.ps-toque{border:.3cqw solid var(--papel)}

@container (max-width:460px){
  .ps{--ps-barra:6.2cqw}
  .ps-barra::after,.ps-pontos,.pl-barra::after,.pl-pontos{width:6.2cqw}
  .ps-pontos i,.pl-pontos i{width:1.5cqw;height:1.5cqw}
  .ps-url,.pl-url{height:4.3cqw;gap:1.2cqw;padding:0 2.2cqw 0 1.8cqw}
  .ps-fone{top:21.6cqw}
  .ps-seletor{left:32.5cqw;top:48.6cqw;height:9.6cqw;gap:2cqw;padding:0 1.55cqw 0 3cqw}
  .ps-nome{font-size:3.2cqw}
  .ps-minis{gap:1.2cqw}
  .ps-mini{width:6.5cqw;height:6.5cqw}
  .ps-anel{inset:-.75cqw;border-width:.4cqw}
  .ps-zap,.ps-onda{width:6.8cqw;height:6.8cqw}
  .ps-zap svg{width:4cqw;height:4cqw}
  .ps-zap::after{width:.6cqw;height:.6cqw;margin:-.42cqw 0 0 -.3cqw;box-shadow:-1.05cqw 0 0 var(--verde),1.05cqw 0 0 var(--verde)}
  .ps-dica{bottom:1.6cqw;height:6.6cqw;padding:0 2.6cqw;border-radius:3.3cqw 3.3cqw 3.3cqw .9cqw;font-size:3.05cqw}
}

/* ───────────── 02 · Loja Express: a loja se monta e a compra acontece ───────────── */
.pl{--pl-barra:4.6cqw;--pl-pacote:10.6cqw}
.pl-massa{position:absolute;left:-10cqw;top:-8cqw;width:120cqw;height:90cqw;fill:#f1f1ec;will-change:transform}

.pl-janela{position:absolute;left:9cqw;top:10.2cqw;width:82cqw;border-radius:2.2cqw;background:var(--tinta);overflow:hidden;box-shadow:0 3.2cqw 7cqw rgba(22,24,21,.2),0 .5cqw 1.5cqw rgba(22,24,21,.12);transform-origin:50% 62%;will-change:transform,opacity}
.pl-barra{height:var(--pl-barra)}
.pl-tela{position:relative;height:50cqw;overflow:hidden;background:#f1efe6}
.pl-capa{background:#dfe3d3;will-change:clip-path}
.pl-capa img{transform-origin:50% 40%}
.pl-prateleira{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5cqw;padding:1.3cqw 3.2cqw 0}
.pl-item{position:relative;height:17.4cqw}
.pl-ficha,.pl-sombra{position:absolute;inset:0;border-radius:1.9cqw}
.pl-ficha{background:#fdfcf5;box-shadow:0 0 0 1px rgba(22,24,21,.05)}
.pl-sombra{box-shadow:0 1.6cqw 3.6cqw rgba(22,24,21,.2),0 .3cqw .9cqw rgba(22,24,21,.1);opacity:0}
.pl-pacote{position:absolute;left:50%;top:1.1cqw;width:var(--pl-pacote);margin-left:calc(var(--pl-pacote)/-2);opacity:0;transform-origin:50% 70%}
.pl-mais{position:absolute;right:.9cqw;bottom:.9cqw;display:grid;place-items:center;width:3.5cqw;height:3.5cqw;border-radius:50%;background:var(--tinta);opacity:0}
.pl-mais svg{grid-area:1/1;width:1.9cqw;height:1.9cqw;fill:none;stroke:var(--papel);stroke-width:.36cqw;stroke-linecap:round;stroke-linejoin:round}
.pl-mais svg+svg{opacity:0}
.pl-mais path{vector-effect:non-scaling-stroke}
.pl-brilho{position:absolute;left:0;top:-10%;width:34%;height:120%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0));opacity:0;pointer-events:none}
.pl-voa{position:absolute;left:0;top:0;width:var(--pl-pacote);border-radius:.5cqw;opacity:0;filter:drop-shadow(0 1cqw 1.6cqw rgba(22,24,21,.22));will-change:transform,opacity}

/* Sacola: gaveta lateral com os três momentos da compra. */
.pl-sacola{position:absolute;left:59.5cqw;top:9cqw;width:36.5cqw;height:57cqw;display:flex;flex-direction:column;padding:2.6cqw;border-radius:2.8cqw;background:var(--branco);box-shadow:0 3.4cqw 8cqw rgba(22,24,21,.2),0 .5cqw 1.5cqw rgba(22,24,21,.1);transform:translateX(60cqw);will-change:transform}
.pl-topo{display:flex;align-items:center;gap:1.2cqw;height:4.4cqw;font-size:max(11.5px,2.5cqw);letter-spacing:-.03em}
.pl-topo b{font-weight:600}
.pl-conta{display:grid;place-items:center;min-width:3.4cqw;height:3.4cqw;border-radius:99px;background:var(--tinta);color:var(--papel);font-size:max(9px,1.9cqw);font-weight:600;letter-spacing:0;transform:scale(0)}
.pl-x{width:2.5cqw;height:2.5cqw;margin-left:auto;fill:none;stroke:var(--cinza-claro);stroke-width:.3cqw;stroke-linecap:round}
.pl-vitrine{position:relative;flex:1;margin-top:2cqw;border-radius:2cqw;background:var(--papel);overflow:hidden}
.pl-vaga{position:absolute;left:50%;top:1.5cqw;width:12.6cqw;height:17.3cqw;margin-left:-6.3cqw}
.pl-vaga--canto{left:1.5cqw;top:1.5cqw;width:4.4cqw;height:6cqw;margin:0}
.pl-cep{position:absolute;left:2cqw;right:2cqw;bottom:2cqw;display:flex;align-items:center;gap:1.4cqw;font-size:max(9px,1.85cqw);font-weight:600;letter-spacing:.02em;color:var(--cinza-escuro)}
.pl-campo{position:relative;flex:1;display:flex;align-items:center;gap:.5cqw;height:4.6cqw;padding:0 1.5cqw;border-radius:1.3cqw;background:var(--branco);box-shadow:inset 0 0 0 1px rgba(22,24,21,.14)}
.pl-foco{position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 .28cqw var(--tinta);opacity:0}
.pl-digito{position:relative;width:.9cqw;height:.9cqw;border-radius:50%;background:rgba(22,24,21,.14)}
.pl-digito b{position:absolute;inset:0;border-radius:50%;background:var(--tinta);transform:scale(0)}
.pl-traco{width:.9cqw;height:.24cqw;margin-inline:.15cqw;border-radius:1px;background:rgba(22,24,21,.3)}
.pl-qr{position:absolute;left:50%;top:50%;width:17.6cqw;height:17.6cqw;margin:-8.8cqw 0 0 -8.8cqw;opacity:0}
.pl-bloco,.pl-olho{position:absolute;background:var(--tinta);transform:scale(0)}
.pl-bloco{width:9.5%;height:9.5%;margin:.8%;border-radius:30%}
.pl-olho{width:31.7%;height:31.7%;margin:.8%;border-radius:32%}
.pl-olho::before,.pl-olho::after{content:"";position:absolute;border-radius:30%}
.pl-olho::before{inset:15%;background:var(--papel)}
.pl-olho::after{inset:31%;background:var(--tinta)}
.pl-varre{position:absolute;left:-10%;right:-10%;top:0;z-index:1;height:3cqw;margin-top:-1.5cqw;background:linear-gradient(rgba(243,243,239,0),rgba(243,243,239,.92) 45%,rgba(243,243,239,.92) 55%,rgba(243,243,239,0));opacity:0}
.pl-pago,.pl-pago-onda{position:absolute;left:50%;top:50%;width:12.6cqw;height:12.6cqw;margin:-6.3cqw 0 0 -6.3cqw;border-radius:50%}
.pl-pago{display:grid;place-items:center;transform:scale(0)}
.pl-pago-massa{position:absolute;inset:0;border-radius:46% 54% 52% 48%/44% 48% 52% 56%;background:var(--verde)}
.pl-pago svg{position:relative;width:7cqw;height:7cqw;fill:none;stroke:var(--tinta);stroke-width:.62cqw;stroke-linecap:round;stroke-linejoin:round}
.pl-pago-onda{border:.34cqw solid var(--verde);border-radius:46% 54% 52% 48%/44% 48% 52% 56%;opacity:0}
.pl-passos{display:grid;gap:.3cqw;margin-top:1.8cqw}
.pl-passos p{position:relative;display:flex;align-items:center;gap:1.5cqw;height:5.3cqw;font-size:max(10.5px,2.2cqw);letter-spacing:-.02em}
.pl-fundo{position:absolute;inset:0 -1.2cqw;border-radius:1.5cqw;background:var(--papel);opacity:0}
.pl-marca{position:relative;flex:none;width:3.5cqw;height:3.5cqw;border-radius:50%;box-shadow:inset 0 0 0 .22cqw rgba(22,24,21,.22)}
.pl-disco{position:absolute;inset:0;border-radius:50%;background:var(--tinta);transform:scale(0)}
.pl-marca svg{position:absolute;left:18%;top:18%;width:64%;height:64%;fill:none;stroke:var(--papel);stroke-width:.4cqw;stroke-linecap:round;stroke-linejoin:round}
.pl-passos b{position:relative;font-weight:500;opacity:.42}
.pl-toque{border:.3cqw solid rgba(22,24,21,.55)}

@container (max-width:460px){
  .pl{--pl-barra:6.2cqw}
  .pl-janela{top:9.4cqw}
  .pl-mais{width:4.3cqw;height:4.3cqw}
  .pl-mais svg{width:2.4cqw;height:2.4cqw;stroke-width:.46cqw}
  .pl-sacola{left:49cqw;top:4.5cqw;width:47cqw;height:66cqw;padding:3cqw}
  .pl-topo{height:5.4cqw;gap:1.6cqw;font-size:3.5cqw}
  .pl-conta{min-width:4.6cqw;height:4.6cqw;font-size:2.7cqw}
  .pl-x{width:3.3cqw;height:3.3cqw;stroke-width:.4cqw}
  .pl-vitrine{margin-top:2.2cqw}
  .pl-cep{left:2.2cqw;right:2.2cqw;bottom:2.2cqw;gap:1.6cqw;font-size:2.8cqw}
  .pl-campo{height:5.8cqw;gap:.62cqw;padding:0 1.8cqw}
  .pl-digito{width:1.15cqw;height:1.15cqw}
  .pl-traco{width:1.1cqw;height:.3cqw}
  .pl-qr{width:19.8cqw;height:19.8cqw;margin:-9.9cqw 0 0 -9.9cqw}
  .pl-pago,.pl-pago-onda{width:15cqw;height:15cqw;margin:-7.5cqw 0 0 -7.5cqw}
  .pl-pago svg{width:8.4cqw;height:8.4cqw;stroke-width:.74cqw}
  .pl-passos{gap:.3cqw;margin-top:2cqw}
  .pl-passos p{height:7.3cqw;gap:1.9cqw;font-size:3.15cqw}
  .pl-marca{width:4.6cqw;height:4.6cqw}
  .pl-marca svg{stroke-width:.52cqw}
}