/* =========================================================
   AURIFEX STUDIO :: Recursos, a seção "Desenhos e peças" (04/11/2026)
   Peças de outros trabalhos, sem citar o projeto. Chave PECAS_SEM_NOME em gerador/montar.py.
   ========================================================= */
.mostra{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
/* a peça é uma prancha em papel claro, como a original: o desenho à mão vive de papel e de tinta */
.mostra-palco{position:relative;aspect-ratio:1;max-height:560px;width:100%;justify-self:center;max-width:560px;overflow:hidden;border-radius:6px;background:#F4EEE1;box-shadow:0 22px 44px -18px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.06)}
.mostra-palco > svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.mostra-palco.sem-desenho{display:none}
.mostra-lado{display:grid;gap:14px;align-content:start;min-width:0}
.mostra-lado > small{color:var(--texto-2);font-size:13.5px}
.mostra-lado h3{font-size:clamp(24px,2.5vw,32px);font-weight:500;letter-spacing:-.028em;line-height:1.1}
.mostra-sub{color:var(--texto-2);font-size:16px;line-height:1.55;max-width:48ch}
.mostra-chips{display:flex;flex-wrap:wrap;gap:8px}
.mostra-chips .chip{min-height:38px}
.copo-cartao{display:grid;gap:8px;padding:18px 20px;background:var(--cartao);border:1px solid var(--linha);border-radius:6px}
.copo-nome{font:500 21px/1.15 var(--serif)}
.copo-desc{color:var(--texto-2);font-size:15px;line-height:1.5}
.copo-legenda{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:6px}
.copo-legenda li{display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:10px;align-items:center;font-size:14.5px}
.copo-legenda i{width:16px;height:16px;border-radius:3px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.copo-legenda b{color:var(--texto-3);font-weight:500;font-size:13px}
@media (max-width:860px){
  .mostra{grid-template-columns:minmax(0,1fr)}
  .mostra-palco{max-width:none}
}
@media (max-width:760px){
  .mostra-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding:2px 16px 4px}
  .mostra-chips::-webkit-scrollbar{display:none}
  .mostra-chips .chip{flex:none}
}

/* o movimento do copo: as camadas sobem e descem com a bebida escolhida (o mesmo da peça original) */
.mostra-copo{--mola:cubic-bezier(.2,.7,.2,1)}
.an-faixa,.an-espuma{transform-box:fill-box;transform-origin:50% 0;transform:translateY(calc((1 - var(--t)) * 438px)) scaleY(max(.0001, calc(var(--t) - var(--b))));transition:transform 1s var(--mola),fill .8s,opacity .6s}
.an-espuma{transform:translateY(calc((1 - var(--t)) * 438px + 10px)) scaleY(max(.0001, calc((var(--t) - var(--b)) * .95)))}
.an-superficie,.an-arte{transform:translateY(calc(var(--t) * -438px));transition:transform 1s var(--mola),fill .8s,opacity .6s}
.an-rotulo{transform:translateY(calc(var(--m) * -438px));transition:transform 1s var(--mola),opacity .5s}
.an-gelo,.an-limao,.an-bolhas,.an-vapor{transition:opacity .7s}
.xicara-svg.nq .an-faixa{transform:translateY(calc(var(--b) * -438px));transition:transform 1s var(--mola),opacity .6s}
.xicara-mov{will-change:transform;transform:translateZ(0)}