feat: redesign the Montagem page, with thumbnails, check chips and a DPI price scale

The product page is rebuilt around mockup 1. The two ways to send are
cards under the title; the PNG/CDR route choice is gone (it never changed
the price, and the picker now takes every allowed format). Each file card
has a thumbnail, its size, check chips with a plain sentence for any
problem, a "Ver detalhes da conferência" link and a copies stepper; a CDR
file says "Conferência manual · preço cheio" and asks for the length. The
buy box shows the price scale in DPI with the customer's step, the metre
and 10 cm length, the total and what the resolution saved, and "Sai em N
partes" only above 20 m. Folha já montada gets "Ampliar" instead of zoom.
Pricing, grade and checks are unchanged.

Fixes on top: the card thumbnail is a small image made once, not the full
preview re-parsed on every repaint; sizes from 1 GB up read in GB; a failed
upload is shown with "Tentar de novo" instead of retrying silently on every
cart change. The browser suites wait for the product and the reloaded page
instead of racing them, and the artwork suite delays imagemDaArte, which
the packing now uses, fixing the CI failure of f4aacb5.

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

web/index.html

@@ -234,8 +234,6 @@ h1 em{font-style:normal;color:var(--laranja)}
  font-family:"Inter",sans-serif;font-weight:700}
 
 /* upload */
-/* o cliente escolhe o caminho antes de subir · a declaração orienta,
-   mas quem decide o preço é o arquivo que chegar */
 .caminhos{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:13px}
 @media(max-width:620px){.caminhos{grid-template-columns:1fr}}
 .caminhos>*{min-width:0}
@@ -254,7 +252,6 @@ h1 em{font-style:normal;color:var(--laranja)}
 .cam span{display:block;font-size:10.5px;color:var(--fraco);line-height:1.45}
 .cam em{display:block;margin-top:6px;font-style:normal;font-family:"Inter",sans-serif;
  font-weight:700;font-size:12px;color:var(--verde-ml);line-height:1.3}
-.cam em.cheio{color:var(--vermelho)}
 .trocouCam{margin-top:-4px;margin-bottom:11px;padding:10px 12px;border-radius:9px;
  background:#FFF6E8;border:1px solid #F0D9AE;font-size:11.5px;color:#7A5A16;line-height:1.5}
 .trocouCam b{color:#B07A18;font-family:"Inter",sans-serif;font-weight:700}
@@ -301,12 +298,6 @@ h1 em{font-style:normal;color:var(--laranja)}
 
 /* repetição do FILE */
 .rep{background:var(--cinza);border-radius:9px;padding:12px 14px;margin-top:8px}
-.somaF{margin-top:10px;padding:11px 13px;border-radius:9px;background:#F1FBF5;
- border:1px solid #BFE6CE;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
-.somaF span{font-size:11.5px;color:#2A6B45}
-.somaF b{font-family:"Inter",sans-serif;font-weight:700;font-size:15px;color:#1F5C3A;
- margin-left:auto}
-.somaF em{flex-basis:100%;font-style:normal;font-size:10.5px;color:#4A7A5E}
 .rep .l1{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:9px}
 .rep .l1 b{font-weight:500;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .rep .l1 button{border:0;background:none;color:var(--fraco);cursor:pointer;font-size:15px;flex:none}
@@ -317,33 +308,10 @@ h1 em{font-style:normal;color:var(--laranja)}
 .progF{margin:9px 0 4px;padding:9px 11px;border-radius:7px;background:#FFF6E8;
  border:1px solid #F0D9AE;font-size:11px;color:#7A5A16;line-height:1.5}
 .progF b{font-family:"Inter",sans-serif;font-weight:700;color:#B07A18}
-.rep .cps{display:grid;grid-template-columns:120px 1fr;gap:10px;align-items:end}
 .rep label{display:block;font-size:10px;color:var(--fraco);margin-bottom:3px}
 .rep input{width:100%;padding:7px 9px;border:1px solid var(--linha);border-radius:6px;
  font-family:inherit;font-size:13px;background:#fff;color:var(--tx)}
 .rep input:focus{outline:none;border-color:var(--laranja)}
-.rep .conta{font-size:11.5px;color:var(--fraco);line-height:1.4}
-.rep .conta b{color:var(--tx);font-family:"Inter",sans-serif}
-.med{background:#fff;border:1px solid var(--linha);border-radius:8px;padding:10px 12px;margin-top:9px}
-.med b{display:block;font-family:"Inter",sans-serif;font-size:15px;font-weight:700;color:var(--tx)}
-.med span{display:block;font-size:11px;color:var(--fraco);margin-top:2px}
-.med em{display:block;font-style:normal;font-size:11.5px;color:#B07A18;margin-top:7px;line-height:1.45}
-.med.alerta{border-color:#E8A796;background:#FFF3F0}
-.med.alerta b{color:#8C3B22}
-.med.alerta em{color:#8C3B22}
-.med.pede{border-color:var(--laranja);background:#FFFAF2}
-.med.pede b{font-size:12.5px;color:#B07A18}
-.conf{margin-top:9px;padding:9px 11px;border-radius:7px;background:#F1FBF5;
- border:1px solid #BFE6CE;line-height:1.5}
-.conf b{display:block;font-family:"Inter",sans-serif;font-size:11.5px;color:#1F5C3A;
- margin-bottom:3px}
-.conf span{display:block;font-size:10.5px;color:#2A6B45}
-.med .troca{margin-top:9px;padding:9px 11px;border-radius:7px;background:#F1FBF5;
- border:1px solid #BFE6CE;font-size:11.5px;color:#1F5C3A;line-height:1.5}
-.med .troca b{display:inline;font-size:11.5px;color:#1F5C3A;font-weight:700}
-.med input{width:100%;margin-top:8px;padding:8px 10px;border:1px solid var(--linha);
- border-radius:6px;font-family:inherit;font-size:13px;background:#fff;color:var(--tx)}
-.med input:focus{outline:none;border-color:var(--laranja)}
 
 /* fila de artes ao lado da montagem */
 .foco2{display:grid;grid-template-columns:minmax(340px,1fr) 320px;gap:20px;
@@ -929,55 +897,39 @@ footer a:hover{color:var(--laranja2)}
       <div class="cat" id="catFoco">
       <div class="cabfoco" style="padding:20px 22px 14px;margin:0">
         <div><h3 id="fTit">—</h3><span class="lg" id="fLg" style="display:block"></span></div>
-        <span class="pr2" id="fPreco"></span>
-        <p id="fSub"></p>
             <div class="caminhos tipoEnvio" id="tipoEnvio" hidden>
               <button type="button" class="cam on" data-tipo="folha">
                 <span class="mk2"></span>
-                <div><b>Folha já montada</b>
-                  <span>a imagem ocupa a largura inteira do filme de
-                    <span id="larguraFolhaPronta">57</span> cm</span>
-                  <em id="tipoFolhaPreco">—</em></div>
+                <div><b>Folha já montada</b><em id="tipoFolhaPreco">—</em>
+                  <span>Você manda a folha pronta, com
+                    <span id="larguraFolhaPronta">57</span> cm de largura</span></div>
               </button>
               <button type="button" class="cam" data-tipo="avulsa">
                 <span class="mk2"></span>
-                <div><b>Artes separadas</b>
-                  <span>você informa a largura de cada uma e nós montamos a folha</span>
-                  <em id="tipoAvulsaPreco">—</em></div>
+                <div><b>Artes separadas</b><em id="tipoAvulsaPreco">—</em>
+                  <span>Você manda cada arte e nós montamos a folha</span></div>
               </button>
             </div>
       </div>
       <div class="in" style="padding:0 22px 22px">
         <div class="foco2" id="foco2">
           <div class="fila">
-            <div class="trocouCam" id="trocouCam" style="display:none"></div>
             <div class="trocouCam" id="avisoTipo" style="display:none"></div>
-            <div class="caminhos" id="caminhos">
-              <button class="cam on" data-cam="auto">
-                <span class="mk2"></span>
-                <div><b>PNG, JPG ou PDF</b>
-                  <span>Conferimos sozinhos e a nota desconta no metro</span>
-                  <em id="camA">—</em></div>
-              </button>
-              <button class="cam" data-cam="tabela">
-                <span class="mk2"></span>
-                <div><b>CDR, AI, PSD ou TIFF</b>
-                  <span>Ninguém consegue conferir · alguém abre na mão</span>
-                  <em id="camB" class="cheio">—</em></div>
-              </button>
-            </div>
+            <div class="recusa" id="recusa" style="display:none"></div>
+            <div id="lista"></div>
             <div class="zona" id="zona" tabindex="0" role="button">
               <div class="ico">↑</div>
               <b id="zTit">Arraste aqui</b><span id="zSub"></span>
               <span id="zLimite">Até 5 GB por arquivo.</span>
               <span class="bt">ou escolher no computador</span>
+              <span class="zOutra"><b id="zOutra">Adicionar outra folha</b> ou arraste aqui</span>
+              <span class="zManual" id="zManual">Tem <b>CDR, AI, PSD ou TIFF</b>? Pode mandar também.
+                Alguém abre na mão e o metro sai pelo preço cheio.</span>
             </div>
-            <div class="recusa" id="recusa" style="display:none"></div>
-            <div id="lista"></div>
             <div class="resumoA" id="rA" style="display:none"></div>
             <input type="file" id="inp" hidden>
     <aside class="req" id="req">
-              <h3 class="reqcab">Dicas sobre a arte</h3>
+              <h3 class="reqcab">Dúvidas:</h3>
 
               <details>
                 <summary>Como pagar o menor metro</summary>
@@ -1047,17 +999,22 @@ footer a:hover{color:var(--laranja2)}
               <div class="zoomB"><button id="zMenos" title="Diminuir">−</button>
                 <span id="zTxt">100%</span>
                 <button id="zMais" title="Aumentar">+</button></div>
+              <button type="button" class="ampliar" id="bAmpliar" hidden>Ampliar</button>
               <span id="vMt">—</span></div>
             <div id="vArea"></div>
             <div id="vUso"></div>
             <div class="compra" id="compra">
               <div class="aoVivo" id="aoVivo"></div>
               <div id="compraVals" hidden>
-                <div class="cNota"><span>Nota da arte</span><i><i id="cNotaBar"></i></i><b id="cNota">—</b></div>
-                <div class="cLin"><span>Preço do metro</span><span><s id="cTabela"></s><b id="cMetro">—</b></span></div>
-                <div class="cLin"><span>Metragem cobrada</span><b id="cMetragem">—</b></div>
+                <div class="cEscada">
+                  <span>Preço do metro pela resolução</span>
+                  <ol id="cEscada"></ol>
+                </div>
+                <div class="cLin"><span id="cMetroLbl">Metro</span><b id="cMetro">—</b></div>
+                <div class="cLin"><span>Metragem <small>(a cada 10 cm)</small></span><b id="cMetragem">—</b></div>
                 <p class="cObs" id="cObs"></p>
                 <div class="cTot"><span>Total</span><b id="cTotal">—</b></div>
+                <p class="cEco" id="cEco"></p>
                 <div id="qmsg" style="display:none"></div>
     <div class="ciente" id="ciente">
               <h4 id="cienteTit">Ressalva de resolução</h4>
@@ -1067,10 +1024,15 @@ footer a:hover{color:var(--laranja2)}
             </div>
               </div>
               <button type="button" class="cAdd" id="bAdd" disabled>Adicionar ao carrinho</button>
-              <p class="cPe">Revisão de 5 pontos e reencaixe grátis</p>
+              <p class="cPe">Revisamos e reencaixamos antes de imprimir, sem custo.<span id="cPartes"></span></p>
             </div>
 
           </aside>
+          <dialog class="ampliaDlg" id="ampliaDlg" aria-labelledby="ampliaTit">
+            <div class="ampliaCab"><b id="ampliaTit">Sua folha</b>
+              <button type="button" id="ampliaFecha" aria-label="Fechar">×</button></div>
+            <div id="ampliaArea"></div>
+          </dialog>
         </div>
       </div>
     </div>