/* EFOR® STUDIO — palcos 03 (fotos: "a foto que revela") e 05 (conteúdo: "o mês se enche").
 * O DOM dos dois é montado por motion/fotos.js e motion/conteudo.js. Tudo em cqw: a composição acompanha a largura do palco.
 * A composição (larga ou alta) é escolhida aqui, nas variáveis --pf-modo e --pc-modo, que o JS lê ao medir. */

/* ---------- 03 · Fotos de produto com IA ---------- */
[data-palco="fotos"]{--pf-modo:largo;--pf-prop:1/1;--pf-cw:64.4cqw;--pf-ch:79.4cqw;--pf-pad:2.2cqw;--pf-raio:3.8cqw;--pf-puxador:6.6cqw;max-width:680px}
@media(max-width:499px){[data-palco="fotos"]{--pf-modo:alto;--pf-prop:5/6;--pf-cw:77.2cqw;--pf-ch:95.2cqw;--pf-pad:2.6cqw;--pf-raio:5cqw;--pf-puxador:10cqw}}
/* A altura só é reservada com JS (sem JS o palco fica vazio e some). */
.js [data-palco="fotos"],[data-palco="fotos"].pf-on{aspect-ratio:var(--pf-prop)}

/* Cópia fotográfica: moldura branca sobre a mesa verde. Os quatro resultados têm o tamanho do cartão grande e são reduzidos por escala. */
.pf-cartao{position:absolute;left:0;top:0;width:var(--pf-cw);height:var(--pf-ch);padding:var(--pf-pad);border-radius:var(--pf-raio);background:var(--branco);box-shadow:0 .5cqw 1.2cqw rgba(34,58,8,.12),0 2.6cqw 6cqw rgba(34,58,8,.2);opacity:0;will-change:transform,opacity}
.pf-foto{position:relative;width:100%;height:100%;border-radius:calc(var(--pf-raio) - var(--pf-pad));overflow:hidden;background:#deded8}
.pf-foto img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
/* Filete e vinheta leves: a foto de fundo verde continua lendo como foto sobre a seção verde. */
.pf-foto::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(22,24,21,.1),inset 0 0 7cqw rgba(22,24,21,.07);pointer-events:none}
/* Borda da revelação: um fio branco ondulado (recortado por clip-path a cada quadro) com um halo mais largo. */
.pf-fio,.pf-halo{position:absolute;inset:0;opacity:0}
.pf-fio{background:var(--branco)}
.pf-halo{background:rgba(255,255,255,.36)}
.pf-brilho{position:absolute;top:-10%;left:0;width:58%;height:120%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.34) 50%,rgba(255,255,255,0));transform:translate3d(-135%,0,0) skewX(-16deg);pointer-events:none}

.pf-puxador{position:absolute;left:0;top:0;display:grid;place-items:center;width:var(--pf-puxador);height:var(--pf-puxador);margin:calc(var(--pf-puxador)/-2) 0 0 calc(var(--pf-puxador)/-2);border-radius:50%;background:var(--branco);color:var(--tinta);box-shadow:0 .3cqw .9cqw rgba(22,24,21,.18),0 1.2cqw 3cqw rgba(22,24,21,.22);opacity:0;will-change:transform,opacity}
.pf-puxador svg{width:58%;height:58%;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}

/* Etiquetas penduradas na borda de baixo de cada cópia. */
.pf-etq{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:.5em;padding:.36em .82em .38em;border-radius:99px;background:var(--tinta);color:var(--papel);font-weight:600;letter-spacing:-.012em;line-height:1.2;white-space:nowrap;box-shadow:0 0 0 .13em var(--branco),0 .5em 1.1em rgba(22,24,21,.2);transform-origin:0 50%;opacity:0;will-change:transform,opacity}
.pf-etq--g{font-size:clamp(13px,2.5cqw,17px)}
.pf-etq--p{font-size:clamp(11px,1.95cqw,13.5px)}
.pf-ponto{width:.46em;height:.46em;border-radius:50%;background:var(--cinza-claro)}
.pf-ok{display:grid;place-items:center;width:1.3em;height:1.3em;margin:-.15em -.32em -.15em 0;border-radius:50%;background:var(--papel);color:var(--tinta)}
.pf-ok svg{width:74%;height:74%;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pf-on .cursor-luca{transform-origin:0 0;opacity:0}

/* ---------- 05 · Conteúdo mensal ---------- */
[data-palco="conteudo"]{--pc-modo:largo;--pc-prop:100/121;--pc-col:6;--pc-vao:1.5cqw;--pc-pad:3.2cqw;--pc-raio:1.8cqw;--pc-num:6.2cqw;--pc-rotulo:2.75cqw;--pc-chip:2.3cqw;--pc-palavra:1.9cqw;--pc-selo:3.1cqw;--pc-carimbo:3.3cqw;--pc-feed:30cqw;--pc-vert:25cqw;--pc-etq:2.5cqw;max-width:600px}
/* Palco estreito (celular, ou a coluna esquerda em telas médias): 5 colunas e tipos maiores em relação ao palco. */
@media(max-width:499px),(min-width:900px) and (max-width:1209px){[data-palco="conteudo"]{--pc-modo:alto;--pc-prop:100/169;--pc-col:5;--pc-vao:1.5cqw;--pc-pad:2.9cqw;--pc-raio:2.3cqw;--pc-num:8.4cqw;--pc-rotulo:3.7cqw;--pc-chip:3.1cqw;--pc-palavra:2.5cqw;--pc-selo:4cqw;--pc-carimbo:4.5cqw;--pc-feed:31cqw;--pc-vert:26.5cqw;--pc-etq:3.4cqw}}
.js [data-palco="conteudo"],[data-palco="conteudo"].pc-on{aspect-ratio:var(--pc-prop)}

.pc-cal{position:absolute;left:0;top:2.5cqw;width:100%;padding:var(--pc-pad);border-radius:min(24px,5cqw);background:var(--branco);color:var(--tinta);box-shadow:0 1px 0 rgba(22,24,21,.04),0 1.2cqw 3cqw rgba(22,24,21,.05),0 4cqw 9cqw rgba(22,24,21,.08);will-change:transform}
.pc-topo{display:flex;align-items:center;justify-content:space-between;gap:2cqw;margin-bottom:calc(var(--pc-pad)*.72)}
.pc-titulo{display:flex;align-items:baseline;gap:.4em;font-size:var(--pc-rotulo);font-weight:500;letter-spacing:-.01em;line-height:1;color:var(--cinza-escuro);white-space:nowrap}
/* Contador em hodômetro: duas tiras de algarismos movidas só por transform. */
.pc-num{display:inline-flex;font-size:var(--pc-num);font-weight:600;letter-spacing:-.05em;line-height:1;color:var(--tinta);font-variant-numeric:tabular-nums}
.pc-dig{display:block;height:1em;overflow:hidden}
.pc-tira{display:flex;flex-direction:column;will-change:transform}
.pc-tira b{display:block;height:1em;line-height:1;font-weight:inherit}
.pc-motion{display:inline-flex;align-items:center;gap:.5em;padding:.4em .85em .4em .45em;border-radius:99px;background:var(--papel);font-size:clamp(10.5px,var(--pc-chip),13px);font-weight:600;letter-spacing:-.01em;line-height:1.2;white-space:nowrap;transform-origin:100% 50%;opacity:0;will-change:transform,opacity}
.pc-motion .pc-selo{position:relative;top:auto;right:auto;flex:none;--pc-selo:1.5em;box-shadow:none}

.pc-grade{display:grid;grid-template-columns:repeat(var(--pc-col),minmax(0,1fr));gap:var(--pc-vao)}
/* Casa vazia: um dia do mês à espera de conteúdo. */
.pc-casa{position:relative;aspect-ratio:4/5;border-radius:var(--pc-raio);background:#f8f8f5;box-shadow:inset 0 0 0 1px rgba(22,24,21,.07)}
.pc-casa::before{content:"";position:absolute;left:13%;top:10.5%;width:9%;aspect-ratio:1;border-radius:50%;background:rgba(22,24,21,.15)}
.pc-miolo{position:absolute;inset:0;border-radius:inherit;overflow:hidden;opacity:0;will-change:transform,opacity}
.pc-miolo img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.pc-miolo img[height="960"]{object-position:50% 32%}
.pc-img::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(22,24,21,.09);pointer-events:none}
/* Casas tipográficas: miniaturas de post feitas em CSS. */
.pc-tipo{display:flex;flex-direction:column;justify-content:space-between;padding:10% 7.5% 9.5%;font-size:clamp(8.5px,var(--pc-palavra),13px);line-height:1}
.pc-tipo b{font-weight:600;letter-spacing:-.035em;white-space:nowrap}
.pc-tinta{background:var(--tinta);color:var(--papel)}
.pc-papel{background:var(--papel);color:var(--tinta);box-shadow:inset 0 0 0 1px rgba(22,24,21,.08)}
.pc-verde{background:var(--verde);color:var(--tinta)}
.pc-m{display:block;height:1.15em;opacity:.92}
.pc-m--barra{width:2.1em;height:.34em;margin-top:.3em;border-radius:99px;background:currentColor}
.pc-m--anel{width:1.15em;border:.2em solid currentColor;border-radius:50%}
.pc-m--pilula{width:2.1em;height:1em;border:.18em solid currentColor;border-radius:99px}
.pc-m--trio{width:2.5em;height:.66em;margin-top:.2em;background:radial-gradient(circle at .33em 50%,currentColor .32em,transparent .34em) 0 0/.92em 100% repeat-x}
.pc-m--duo{width:1.9em;background:radial-gradient(circle at .58em 50%,currentColor .56em,transparent .58em),radial-gradient(circle at 1.32em 50%,transparent .4em,currentColor .42em,currentColor .56em,transparent .58em)}
/* Marca de motion: play pequeno no canto. Exatamente 10 casas levam. */
.pc-selo{position:absolute;top:8%;right:8%;display:block;width:var(--pc-selo);height:var(--pc-selo);border-radius:50%;background:var(--tinta);box-shadow:0 0 0 .22cqw rgba(255,255,255,.92)}
.pc-selo::after{content:"";position:absolute;left:39%;top:29%;width:34%;height:42%;background:var(--papel);clip-path:polygon(0 0,100% 50%,0 100%)}
.pc-tinta .pc-selo{background:var(--papel);box-shadow:none}
.pc-tinta .pc-selo::after{background:var(--tinta)}
.pc-brilho{position:absolute;top:-10%;left:0;width:70%;height:120%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.5) 50%,rgba(255,255,255,0));transform:translate3d(-150%,0,0) skewX(-16deg);pointer-events:none}

/* Carimbo: o único acontecimento verde do palco. */
.pc-carimbo{position:absolute;right:calc(var(--pc-pad)*.8);bottom:-3.3cqw;display:inline-flex;align-items:center;gap:.55em;padding:.56em .6em .56em 1.05em;border-radius:99px;background:var(--verde);color:var(--tinta);font-size:var(--pc-carimbo);font-weight:600;letter-spacing:-.028em;line-height:1;white-space:nowrap;box-shadow:0 .5cqw 1.4cqw rgba(22,24,21,.14),0 2cqw 5cqw rgba(22,24,21,.2);transform-origin:82% 50%;opacity:0;will-change:transform,opacity}
.pc-ok{display:grid;place-items:center;width:1.56em;height:1.56em;border-radius:50%;background:var(--tinta);color:var(--verde)}
.pc-ok svg{width:68%;height:68%;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* Os três formatos que saltam da grade. */
.pc-fmt{position:absolute;left:0;top:0;border-radius:2.8cqw;overflow:hidden;background:#e7e7e1;box-shadow:0 0 0 1px rgba(22,24,21,.08),0 1cqw 2.4cqw rgba(22,24,21,.14),0 4cqw 9cqw rgba(22,24,21,.26);opacity:0;will-change:transform,opacity}
.pc-fmt--feed{width:var(--pc-feed);aspect-ratio:4/5}
.pc-fmt--vert{width:var(--pc-vert);aspect-ratio:9/16}
.pc-fmt img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;will-change:transform,opacity}
.pc-fmt::before,.pc-fmt--reel::after{content:"";position:absolute;inset:0 0 auto;height:16%;z-index:1;background:linear-gradient(rgba(22,24,21,.42),rgba(22,24,21,0));pointer-events:none}
.pc-fmt--feed::before{content:none}
.pc-fmt--reel::after{inset:auto 0 0;height:20%;background:linear-gradient(rgba(22,24,21,0),rgba(22,24,21,.5))}
.pc-segs{position:absolute;left:6%;right:6%;top:3.4%;z-index:2;display:flex;gap:3%}
.pc-segs i,.pc-barra{display:block;flex:1;height:.6cqw;min-height:2px;border-radius:99px;background:rgba(255,255,255,.4);overflow:hidden}
.pc-segs b,.pc-barra b{display:block;width:100%;height:100%;border-radius:inherit;background:var(--branco);transform:scaleX(0);transform-origin:0 50%}
.pc-barra{position:absolute;left:6%;right:6%;bottom:4.4%;z-index:2}
.pc-fmt .pc-selo{--pc-selo:4.6cqw;top:5%;right:8%;z-index:2}
.pc-etq{position:absolute;left:0;top:0;padding:.36em .9em .38em;border-radius:99px;background:var(--tinta);color:var(--papel);font-size:clamp(11.5px,var(--pc-etq),14px);font-weight:600;letter-spacing:-.012em;line-height:1.2;white-space:nowrap;box-shadow:0 .5em 1.1em rgba(22,24,21,.18);opacity:0;will-change:transform,opacity}
.pc-on .cursor-luca{transform-origin:0 0;opacity:0}