feat: skeletons where the page waits, no flicker while a sheet is read, repeated copies in the preview

Reading a large sheet repainted the list and "Sua folha" on every progress
step, so the preview flickered; progress now moves the bar in place and
"Sua folha" shows a skeleton until the preview is ready. A sheet printed
N times is shown N times (up to six, then a count). The payment page shows
skeletons while the order loads and until the card form is ready.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/site-v2.css

@@ -318,3 +318,16 @@ html:is([data-rota="pagamento"],[data-rota="pix"]) .pagGrid{display:grid;grid-te
 @media (max-width:480px){
   .etapas2 .w{grid-template-columns:1fr}
 }
+
+/* Skeleton placeholders where the page really waits */
+.skel{position:relative;border-radius:8px;background:linear-gradient(90deg,#EEEFF1 25%,#F7F7F8 37%,#EEEFF1 63%);background-size:400% 100%;animation:skel 1.4s ease infinite}
+@keyframes skel{0%{background-position:100% 50%}100%{background-position:0 50%}}
+@media (prefers-reduced-motion:reduce){.skel{animation:none}}
+.folhaSkel{display:flex;align-items:center;justify-content:center;max-height:520px;min-height:180px;width:100%}
+.folhaSkel span{font-size:12.5px;color:var(--fraco);background:#fffc;padding:4px 10px;border-radius:999px}
+#vArea .folhaPilha{display:flex;flex-direction:column;gap:4px;max-height:520px;overflow:auto;background:#fff}
+#vArea .folhaPilha img{width:100%;height:auto;display:block}
+.folhaMais{font-size:12px;color:var(--texto2);text-align:center;padding:8px}
+.skelLinha{height:14px;margin:8px 0}
+.skelLinha.curta{width:40%}
+.skelBloco{height:160px;margin-top:8px}