Files
dtf-system/web/index.html
Cauê Faleiros cbbbdb351a
All checks were successful
Build and deploy / Validate source (push) Successful in 10s
Build and deploy / Integration suite on a real stack (push) Successful in 2m46s
Build and deploy / Secret scan and release gate (push) Successful in 6s
Build and deploy / Publish images (push) Successful in 1m46s
feat: rebuild the Site product page around a buy box
Artworks on the left; on the right a box that stays in view with the live
sheet, the grade, the price per metre, the metres charged, the total, the
resolution note and "Adicionar ao carrinho". The separate quality and
preview panels, the second sheet preview, the per-row mini sheets, the
summary box and the repeated findings list are gone: each piece of
information now appears once.

Each artwork row carries at most one hint (resolution first, otherwise a
width that saves film), the ready-sheet/loose-artwork choice is a toggle
beside the title, the upload area is one bar and the tips are collapsed.
The box only shows the item the page already priced, so it always matches
the cart.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-09-24 18:02:45 -03:00

1301 lines
75 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DTF Dropstar · mande sua arte e veja a qualidade</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
:root{
/* tokens do site institucional */
--font-family-base:"Roboto",sans-serif; --font-family-title:"Inter",sans-serif;
--font-color-base:#03060b; --font-color-title:#03060b;
--font-weight-base:400; --font-weight-title:700; --font-weight-subtitle:600; --font-weight-button:600;
--font-size-title:3rem; --font-size-subtitle:2rem; --font-size-button:1.4rem;
--font-size-small:1.2rem; --font-size-base:1.4rem; --font-size-medium:1.6rem; --font-size-big:1.8rem;
--line-height:1.5;
--white:#fff; --black:#03060b;
--gray-1:#f9f9f9; --gray-2:#c3c3c3; --gray-3:#707070; --gray-4:#363636;
--primary-color:#ffa81a; --secondary-color:#ff7f0a;
--white-transparency:#ffffffb3; --transition:all .4s ease;
/* apelidos usados nesta pagina, mapeados nos tokens acima */
--marinho:var(--black); --papel:var(--white); --cinza:var(--gray-1);
--tx:var(--font-color-base); --fraco:var(--gray-3); --linha:#e6e6e6;
--laranja:var(--primary-color); --laranja2:var(--secondary-color);
--vermelho:#D94A28; --verde:#2E9E5B; --verde-ml:#00A650; --verde-claro:#57D68A;
--sombra:0 1px 2px rgba(3,6,11,.05), 0 4px 14px rgba(3,6,11,.05);
--sombra-alta:0 2px 6px rgba(3,6,11,.07), 0 10px 30px rgba(3,6,11,.11)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:62.5%}
body{background:var(--white);color:var(--font-color-base);font-family:var(--font-family-base);
font-size:var(--font-size-base);font-weight:var(--font-weight-base);line-height:var(--line-height);
-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-family-title);color:var(--font-color-title);
font-weight:var(--font-weight-title);letter-spacing:normal;line-height:1.15}
.w{max-width:1020px;margin:0 auto;padding:0 22px}
section{padding:clamp(34px,5vw,56px) 0}
section+section{border-top:1px solid var(--linha)}
.prova+section{border-top:0}
/* tarja rotativa, como no site */
.tarja{background:var(--laranja);color:#111;text-align:center;padding:8px 16px;
font-family:"Inter",sans-serif;font-weight:700;font-size:12px;letter-spacing:.02em}
.tarja a{color:#111;text-decoration:none}
/* topo */
.topo{background:#fff;border-bottom:1px solid var(--linha);position:sticky;top:0;z-index:60}
.topo .w{display:flex;align-items:center;gap:22px;padding-top:15px;padding-bottom:15px}
.logo{display:flex;align-items:center;text-decoration:none;white-space:nowrap;flex:none}
.logo img{height:26px;width:auto;display:block}
.logotexto{font-family:"Inter",sans-serif;font-weight:700;font-size:19px;color:var(--black);
letter-spacing:-.03em}
.logotexto i{font-style:normal;color:var(--laranja)}
.busca{flex:1;max-width:420px;position:relative}
.busca input{width:100%;padding:9px 14px 9px 36px;border:1px solid var(--linha);border-radius:22px;
font-family:inherit;font-size:13px;background:var(--cinza);color:var(--tx)}
.busca input:focus{outline:none;border-color:var(--laranja);background:#fff}
.busca .lupa{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--fraco);font-size:13px}
.acts{margin-left:auto;display:flex;gap:18px;align-items:center;font-size:12.5px}
.acts a{color:var(--tx);text-decoration:none;display:flex;align-items:center;gap:6px}
.acts a:hover{color:var(--laranja)}
/* menu */
.menu{background:#fff;border-bottom:1px solid var(--linha)}
.menu .w{display:flex;gap:0;flex-wrap:wrap}
.mi{position:relative}
.mi>a{display:block;padding:13px 16px;font-family:"Inter",sans-serif;font-weight:600;
font-size:12.5px;color:var(--tx);text-decoration:none;white-space:nowrap}
.mi:hover>a{color:var(--laranja)}
.mi.on>a{color:var(--laranja);box-shadow:inset 0 -2px 0 var(--laranja)}
.sub{display:none;position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--linha);
border-radius:0 0 9px 9px;min-width:224px;padding:7px 0;z-index:70;
box-shadow:0 10px 26px rgba(0,0,0,.09)}
.mi:hover .sub,.mi:focus-within .sub{display:block}
.sub a{display:block;padding:8px 17px;font-size:12.5px;color:var(--fraco);text-decoration:none}
.sub a:hover{color:var(--laranja);background:var(--cinza)}
@media(max-width:820px){
.menu .w{overflow-x:auto;flex-wrap:nowrap}
.sub{display:none!important}
.busca{display:none}
}
.hero{background:#000;color:#fff;position:relative;overflow:hidden}
.hero .fundo{position:absolute;inset:0;pointer-events:none}
.hero .fundo svg{width:100%;height:100%;display:block;opacity:.22}
/* escurece do lado do texto, para o título não competir com o fundo */
.hero .fundo::after{content:"";position:absolute;inset:0;
background:linear-gradient(100deg,#000 0%,#000 32%,rgba(0,0,0,.85) 52%,rgba(0,0,0,.55) 100%)}
.hero .w{position:relative;z-index:2}
.hgrid{display:grid;grid-template-columns:1.15fr auto;gap:38px;align-items:center;
padding:clamp(26px,3.6vw,40px) 0}
@media(max-width:940px){.hgrid{grid-template-columns:1fr;gap:22px}}
h1{font-size:clamp(24px,3.6vw,38px);font-weight:700;max-width:20ch;line-height:1.08}
h1 em{font-style:normal;color:var(--laranja)}
.hero .sub2{color:#B7C1D2;font-size:14px;max-width:56ch;margin-top:10px}
.hero .sub2 b{color:#fff}
.hcta{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap;align-items:center}
.btn1{background:var(--laranja);color:#241703;border:0;border-radius:9px;padding:12px 24px;
font-family:"Inter",sans-serif;font-weight:700;font-size:14.5px;cursor:pointer;text-decoration:none}
.btn1:hover{background:var(--laranja2)}
.mini{font-size:12px;color:#8D9AB0}
/* preços lado a lado, em faixa */
.pfaixa{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:940px){.pfaixa{flex-wrap:wrap}}
.pcard{flex:1 1 44%;min-width:128px;background:rgba(255,255,255,.055);
border:1px solid rgba(255,255,255,.13);border-radius:11px;padding:13px 15px;
text-decoration:none;position:relative;transition:.15s}
.pcard:hover{background:rgba(255,168,26,.12);border-color:rgba(255,168,26,.45)}
.pcard.dest{border-color:rgba(255,168,26,.5);background:rgba(255,168,26,.09)}
.pcard .marc{position:absolute;top:-8px;left:13px;background:var(--verde);color:#fff;
font-family:"Inter",sans-serif;font-size:8.5px;font-weight:700;letter-spacing:.09em;
text-transform:uppercase;padding:2px 8px;border-radius:4px;white-space:nowrap}
.pcard .apartir{display:block;font-size:9.5px;color:var(--verde-claro);letter-spacing:.09em;
text-transform:uppercase;font-family:"Inter",sans-serif;font-weight:700;margin-bottom:2px}
.pcard .vl{font-family:"Inter",sans-serif;font-size:20px;font-weight:700;color:var(--laranja);
line-height:1;display:block;margin-bottom:3px}
.pcard .vl small{font-size:11px;font-weight:600;color:#8D9AB0}
.pcard .nm{font-family:"Inter",sans-serif;font-size:12.5px;font-weight:700;color:#fff;display:block}
.pcard .dsc{font-size:10.5px;color:#8D9AB0;display:block;margin-top:1px}
/* selos e barra */
.selos1{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-bottom:11px}
.sel{font-family:"Inter",sans-serif;font-size:9.5px;font-weight:700;letter-spacing:.09em;
text-transform:uppercase;padding:3px 9px;border-radius:5px}
.sel.top{background:var(--laranja);color:#241703}
.sel.novo{background:rgba(46,158,91,.18);color:#7FD4A0;border:1px solid rgba(46,158,91,.4)}
.sel.pos{background:rgba(255,255,255,.09);color:#B7C1D2;border:1px solid rgba(255,255,255,.16)}
.barrah{border-top:1px solid rgba(255,255,255,.1);padding:11px 0 14px;
display:flex;gap:24px;flex-wrap:wrap;font-size:12px;color:#B7C1D2}
.barrah span{display:flex;align-items:center;gap:7px}
.barrah b{color:#fff;font-family:"Inter",sans-serif}
.barrah i{color:var(--laranja);font-style:normal;font-size:9px}
/* aviso do topo do envio */
/* escolha em 3 cards */
.escolha{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:24px;
align-items:stretch}
.escolha .ec{display:flex;flex-direction:column}
.escolha .ec .in{flex:1}
@media(max-width:1000px){.escolha{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.escolha{grid-template-columns:1fr}}
.ec{border:1px solid var(--linha);border-radius:14px;background:#fff;padding:0;
cursor:pointer;text-align:left;font-family:inherit;overflow:hidden;
box-shadow:var(--sombra);transition:var(--transition);
display:block;width:100%;position:relative}
/* marca d'agua dos cards · mesma da foto de produto: curva de nivel + sacola Dropstar
(a sacola e uma reconstrucao; trocar pelo arquivo oficial do designer) */
.ec::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
background-repeat:no-repeat;background-position:right -60px center;background-size:auto 150%;
background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'>\
<g fill='none' stroke='%23000000' stroke-opacity='.055' stroke-width='1.6'>\
<path d='M200 46c66 0 138 40 138 104s-72 104-138 104S62 214 62 150 134 46 200 46z'/>\
<path d='M200 46c66 0 138 40 138 104s-72 104-138 104S62 214 62 150 134 46 200 46z' transform='translate(200 150) scale(.86) translate(-200 -150)'/>\
<path d='M200 46c66 0 138 40 138 104s-72 104-138 104S62 214 62 150 134 46 200 46z' transform='translate(200 150) scale(.72) translate(-200 -150)'/>\
<path d='M200 46c66 0 138 40 138 104s-72 104-138 104S62 214 62 150 134 46 200 46z' transform='translate(200 150) scale(.58) translate(-200 -150)'/>\
<path d='M200 46c66 0 138 40 138 104s-72 104-138 104S62 214 62 150 134 46 200 46z' transform='translate(200 150) scale(.44) translate(-200 -150)'/>\
<path d='M200 46c66 0 138 40 138 104s-72 104-138 104S62 214 62 150 134 46 200 46z' transform='translate(200 150) scale(.30) translate(-200 -150)'/>\
<path d='M200 46c66 0 138 40 138 104s-72 104-138 104S62 214 62 150 134 46 200 46z' transform='translate(200 150) scale(1.16) translate(-200 -150)'/>\
<path d='M200 46c66 0 138 40 138 104s-72 104-138 104S62 214 62 150 134 46 200 46z' transform='translate(200 150) scale(1.34) translate(-200 -150)'/>\
</g></svg>")}
.ec::after{content:"";position:absolute;right:16px;bottom:14px;width:104px;height:26px;
opacity:.16;pointer-events:none;z-index:0;background-repeat:no-repeat;
background-position:right bottom;background-size:contain;
background-image:url("https://cdn.vnda.com.br/dropstar/2025/12/17/logo-header-15125700-16129080.png?v=1766009286")}
.ec .top,.ec .in{position:relative;z-index:1}
.ec:hover{border-color:var(--laranja);box-shadow:var(--sombra-alta);transform:translateY(-2px)}
.ec .marc{display:block;background:var(--verde-ml);color:#fff;text-align:center;
font-family:"Inter",sans-serif;font-size:9px;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;padding:5px 8px;position:relative;z-index:2}
.ec.f{border-color:var(--verde-ml)}
.ec.f:hover{border-color:var(--verde-ml)}
/* anéis verdes por trás do card destacado, mesma família dos selos */
.ec.f::before{background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'>\
<g fill='none' stroke='%2300A650' stroke-opacity='.10' stroke-width='1.6'>\
<path d='M200 46c66 0 138 40 138 104s-72 104-138 104S62 214 62 150 134 46 200 46z'/>\
<path d='M200 46c66 0 138 40 138 104s-72 104-138 104S62 214 62 150 134 46 200 46z' transform='translate(200 150) scale(.82) translate(-200 -150)'/>\
<path d='M200 46c66 0 138 40 138 104s-72 104-138 104S62 214 62 150 134 46 200 46z' transform='translate(200 150) scale(.64) translate(-200 -150)'/>\
<path d='M200 46c66 0 138 40 138 104s-72 104-138 104S62 214 62 150 134 46 200 46z' transform='translate(200 150) scale(.46) translate(-200 -150)'/>\
<path d='M200 46c66 0 138 40 138 104s-72 104-138 104S62 214 62 150 134 46 200 46z' transform='translate(200 150) scale(.28) translate(-200 -150)'/>\
<path d='M200 46c66 0 138 40 138 104s-72 104-138 104S62 214 62 150 134 46 200 46z' transform='translate(200 150) scale(1.2) translate(-200 -150)'/>\
</g></svg>")}
.ec .top{padding:17px 20px;display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.ec.f .top{background:#FFF4E3} .ec.a .top{background:var(--cinza)} .ec.u .top{background:#EEF4FB}
.ec .top h3{font-family:"Inter",sans-serif;font-size:17px;font-weight:700;color:var(--tx)}
.ec .top .p{font-family:"Inter",sans-serif;font-weight:700;font-size:15px;white-space:nowrap;
color:var(--tx);text-align:right;line-height:1.15}
.ec .top .p i{display:block;font-style:normal;font-family:"Roboto",sans-serif;font-size:10px;
font-weight:500;color:var(--fraco);margin-bottom:1px;letter-spacing:0;
text-transform:uppercase;letter-spacing:.1em}
.chama2{background:#F1FBF5;border-top:1px solid #BFE6CE;border-bottom:1px solid #BFE6CE;
padding:9px 20px;font-size:11.5px;color:#1F5C3A;line-height:1.45;position:relative;z-index:1}
.chama2 b{font-family:"Inter",sans-serif;font-weight:700;color:var(--verde-ml);font-size:12.5px}
.ec .top .p small{font-size:11px;font-weight:600;color:var(--fraco)}
.ec .in{padding:18px 20px 20px}
.ec .in p{font-size:13px;color:var(--fraco);margin-bottom:13px}
.ec ul{list-style:none;font-size:12.5px;margin-bottom:15px}
.ec li{padding:4px 0 4px 19px;position:relative;color:var(--fraco)}
.ec li::before{content:"✓";position:absolute;left:2px;color:var(--verde);font-size:11px}
.ec .go{font-family:"Inter",sans-serif;font-weight:700;font-size:13.5px;color:var(--laranja);display:block}
.ec .lg{display:block;font-size:10.5px;color:var(--fraco);letter-spacing:.1em;
text-transform:uppercase;font-family:"Inter",sans-serif;font-weight:700;margin-bottom:5px}
/* painel focado */
.foco{display:none}
.foco.on{display:block}
.focoGrid{display:grid;grid-template-columns:minmax(0,1fr) 264px;gap:16px;align-items:start}
.focoGrid>*{min-width:0}
@media(max-width:820px){.focoGrid{grid-template-columns:1fr}}
.voltar{display:inline-flex;align-items:center;gap:7px;background:#fff;
border:1px solid var(--linha);border-radius:8px;padding:8px 14px 8px 11px;
font-family:"Inter",sans-serif;font-weight:600;font-size:12.5px;color:var(--tx);
cursor:pointer;margin-bottom:14px;box-shadow:var(--sombra);transition:var(--transition)}
.voltar span{font-size:15px;line-height:1;color:var(--fraco)}
.voltar:hover{border-color:var(--laranja);color:var(--laranja)}
.voltar:hover span{color:var(--laranja)}
.cat{border:1px solid var(--linha);border-radius:14px;background:#fff;overflow:hidden;
box-shadow:var(--sombra)}
.cat.file{border-color:var(--laranja);border-width:2px}
.cabfoco{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
flex-wrap:wrap;border-bottom:1px solid var(--linha);background:var(--cinza);padding:18px 22px}
.cat.file .cabfoco{background:#FFF4E3}
.cabfoco h3{font-family:"Inter",sans-serif;font-size:20px;font-weight:700}
.cabfoco .pr2{font-family:"Inter",sans-serif;font-weight:700;font-size:17px;white-space:nowrap}
.cabfoco p{font-size:12.5px;color:var(--fraco);width:100%;margin-top:4px}
.cabfoco .lg{font-size:10.5px;color:var(--fraco);letter-spacing:.1em;text-transform:uppercase;
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}
.cam{display:flex;gap:9px;align-items:flex-start;text-align:left;background:#fff;
border:1px solid var(--linha);border-radius:10px;padding:11px 12px;cursor:pointer;
font-family:inherit;color:var(--tx);transition:var(--transition);
min-width:0;overflow:hidden}
.cam:hover{border-color:var(--gray-3)}
.cam.on{border-color:var(--verde-ml);background:#F4FCF7;box-shadow:0 0 0 1px var(--verde-ml)}
.cam .mk2{flex:none;width:15px;height:15px;border-radius:50%;margin-top:2px;
border:2px solid var(--gray-2);background:#fff}
.cam.on .mk2{border-color:var(--verde-ml);
background:radial-gradient(circle,var(--verde-ml) 0 3px,#fff 4px)}
.cam div{flex:1;min-width:0;overflow-wrap:anywhere}
.cam b{display:block;font-family:"Inter",sans-serif;font-size:12.5px;margin-bottom:2px}
.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}
.trocarModo{margin:-4px 0 11px;padding:10px 12px;border-radius:9px;background:#F1FBF5;
border:1px solid #BFE6CE;font-size:11.5px;color:#1F5C3A;line-height:1.5}
.trocarModo b{font-family:"Inter",sans-serif;font-weight:700}
.trocarModo label{display:block;margin-top:7px;cursor:pointer}
.zona{border:2px dashed var(--laranja);border-radius:13px;padding:44px 20px;text-align:center;
cursor:pointer;margin-bottom:14px;background:#FFF6E8;transition:var(--transition)}
.zona:hover,.zona.sobre{border-color:var(--laranja2);background:#FFEFD6;
box-shadow:0 6px 22px rgba(255,168,26,.22)}
.zona .ico{width:46px;height:46px;margin:0 auto 12px;border-radius:50%;
background:var(--laranja);color:#fff;font-size:22px;line-height:46px;font-weight:700;
box-shadow:0 0 0 7px rgba(255,168,26,.18)}
.zona:hover .ico,.zona.sobre .ico{background:var(--laranja2)}
.zona b{display:block;font-family:"Inter",sans-serif;font-size:18px;font-weight:700;
margin-bottom:5px;color:var(--tx);line-height:1.2}
.zona span{font-size:12px;color:#8A6A2E;display:block;max-width:30ch;margin:0 auto;line-height:1.5}
.zona .bt{display:inline-block;margin-top:13px;background:var(--laranja);color:#241703;
font-family:"Inter",sans-serif;font-weight:700;font-size:13px;border-radius:8px;
padding:9px 18px}
.zona:hover .bt{background:var(--laranja2)}
.recusa{margin-top:11px;padding:11px 13px;border-radius:9px;background:#FFF3F0;
border:1px solid #F0C4B8;font-size:11.5px;color:#8C3B22;line-height:1.5}
.recusa b{font-family:"Inter",sans-serif;font-weight:700;color:#8C3B22}
.aoVivo{margin-top:11px;padding:11px 13px;border-radius:9px;background:var(--cinza);
border:1px solid var(--linha);font-size:12px;color:var(--fraco);line-height:1.45;
display:flex;align-items:center;gap:9px}
.aoVivo b{font-family:"Inter",sans-serif;font-weight:700;color:var(--tx);font-size:12.5px}
.aoVivo .pt2{flex:none;width:8px;height:8px;border-radius:50%;background:var(--gray-2)}
.aoVivo.pronto{background:#F1FBF5;border-color:#BFE6CE;color:#2A6B45}
.aoVivo.pronto .pt2{background:var(--verde-ml)}
.aoVivo.pronto b{color:#1F5C3A}
.b2{width:100%;padding:13px;border-radius:9px;border:1px solid var(--marinho);background:#fff;
color:var(--tx);font-family:"Inter",sans-serif;font-weight:600;font-size:14.5px;cursor:pointer}
.cat.file .b2{background:var(--laranja);border-color:var(--laranja);color:#241703}
.b2:hover{background:#111;color:#fff}
.cat.file .b2:hover{background:var(--laranja2);color:#241703}
.it{display:flex;justify-content:space-between;gap:9px;padding:10px 13px;background:var(--cinza);
border-radius:8px;margin-bottom:7px;align-items:center;font-size:12.5px}
.it b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.it span{color:var(--fraco);font-size:11px;flex:none}
.it button{border:0;background:none;color:var(--fraco);cursor:pointer;font-size:15px}
/* 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}
.prog{height:5px;border-radius:4px;background:#E4E7EC;overflow:hidden;margin:9px 0 5px}
.prog i{display:block;height:100%;background:var(--laranja);border-radius:4px;
transition:width .35s ease}
.progT{display:block;font-size:10.5px;color:var(--fraco)}
.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;
align-items:start;margin-top:2px}
.foco2>*{min-width:0}
.foco2.sofila{grid-template-columns:1fr}
.foco2.sofila .mont{display:none}
@media(max-width:1360px){.foco2{grid-template-columns:1fr}}
.mont{position:sticky;top:104px;border:1px solid var(--linha);border-radius:11px;
background:var(--cinza);padding:12px;box-shadow:var(--sombra)}
.montcab{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:9px}
.montcab b{font-family:"Inter",sans-serif;font-size:12.5px;font-weight:700}
.zoomB{display:flex;align-items:center;gap:4px;margin-left:auto}
.zoomB button{width:22px;height:22px;border-radius:6px;border:1px solid var(--linha);
background:#fff;color:var(--tx);cursor:pointer;font-size:14px;line-height:1;padding:0}
.zoomB button:hover{border-color:var(--laranja);color:var(--laranja)}
.zoomB button:disabled{opacity:.35;cursor:not-allowed}
.zoomB span{font-family:"Inter",sans-serif;font-size:10.5px;font-weight:700;
color:var(--fraco);min-width:34px;text-align:center}
#vArea.ampliado{overflow:auto}
.montcab span{font-family:"Inter",sans-serif;font-weight:700;font-size:16px;color:var(--tx)}
#vArea{max-height:min(56vh,560px);min-height:200px;overflow-y:auto;overscroll-behavior:contain;
border:1px solid var(--linha);border-radius:8px;background:#fff}
#vArea::-webkit-scrollbar{width:8px}
#vArea::-webkit-scrollbar-thumb{background:var(--gray-2);border-radius:6px;
border:2px solid #fff}
#vArea::-webkit-scrollbar-track{background:transparent}
#vArea canvas{max-width:100%;height:auto;display:block;background:#fff}
#vArea.ampliado canvas{max-width:none}
#vArea .folhaPrevias{min-height:200px;padding:10px;display:grid;gap:12px;background:#F8F9FA}
#vArea .folhaPrevia{margin:0;background:#fff;border:1px solid var(--linha);border-radius:6px;overflow:hidden}
#vArea .folhaPrevia img{width:100%;height:auto;max-height:520px;object-fit:contain;display:block;background:#fff}
#vArea .folhaPrevia figcaption{padding:7px 9px;font-size:10.5px;color:var(--fraco);border-top:1px solid var(--linha)}
#vArea .semmont{border:0;min-height:200px;display:flex;flex-direction:column;
align-items:center;justify-content:center}
#vUso:empty{display:none}
.semmont{border:1px dashed var(--linha);border-radius:8px;background:#fff;
padding:30px 14px;text-align:center}
.semmont b{display:block;font-family:"Inter",sans-serif;font-size:13px;margin-bottom:4px}
.semmont span{font-size:11.5px;color:var(--fraco);line-height:1.4;display:block}
.montpe{font-size:10.5px;color:var(--fraco);margin-top:9px;line-height:1.45}
/* caixa de requisitos · o que a máquina aceita */
.req{position:sticky;top:104px;background:#fff;border:1px solid var(--linha);
border-radius:14px;box-shadow:var(--sombra);padding:16px 16px 6px}
@media(max-width:820px){.req{position:static}}
.reqcab{font-family:"Inter",sans-serif;font-size:18px;font-weight:700;line-height:1.15;
letter-spacing:normal;color:var(--tx);margin-bottom:12px}
.req details{border-top:1px solid var(--linha)}
.req details:first-of-type{border-top:0}
.req summary{cursor:pointer;list-style:none;padding:9px 0;font-family:"Inter",sans-serif;
font-size:13px;font-weight:700;color:var(--tx);display:flex;align-items:center;gap:8px}
.req summary::-webkit-details-marker{display:none}
.req summary::before{content:"+";flex:none;width:16px;height:16px;border-radius:50%;
border:1px solid rgba(0,166,80,.45);background:#fff;color:var(--verde-ml);font-size:11px;
line-height:14px;text-align:center;font-weight:700}
.req summary:hover::before{background:#F1FBF5}
.req details[open] summary::before{content:"−";background:var(--verde-ml);
border-color:var(--verde-ml);color:#fff}
.req ul{list-style:none;padding:0 0 9px;margin:0}
.req li{position:relative;padding:4px 0 4px 17px;font-size:11.5px;color:var(--fraco);
line-height:1.5}
.req li b{color:var(--tx);font-weight:700;font-family:"Inter",sans-serif}
.req li::before{position:absolute;left:0;top:4px;font-size:11px;font-weight:700}
.req li.s::before{content:"✓";color:var(--verde-ml)}
.req li.a::before{content:"!";color:var(--laranja)}
.req li.n::before{content:"×";color:var(--vermelho)}
.req .obs2{font-size:10.5px;color:var(--fraco);padding:0 0 9px;line-height:1.45;
font-style:italic}
.mont .usoBom,.mont .usoRuim{margin-top:8px;font-size:11px;line-height:1.4}
/* artes avulsas */
.art{background:var(--cinza);border-radius:9px;padding:11px 12px;margin-bottom:7px;
transition:box-shadow .3s,background .3s}
.art.nova{background:#FFF6E8;box-shadow:inset 0 0 0 1px rgba(255,168,26,.55)}
.art.nova .l1 b::after{content:"nova";font-family:"Inter",sans-serif;font-size:9px;
font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#B07A18;
background:#FFE9C4;border-radius:3px;padding:1px 5px;margin-left:7px;vertical-align:1px}
.art .l1{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:8px}
.art .l1 b{font-weight:500;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.art .l1 button{border:0;background:none;color:var(--fraco);cursor:pointer;font-size:15px;flex:none}
.art .cps{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.atalhos{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-top:9px}
.atalhos .tm,.atalhos .gr{border:1px solid var(--linha);background:#fff;border-radius:6px;
padding:5px 9px;font-family:"Inter",sans-serif;font-size:11px;font-weight:600;
color:var(--tx);cursor:pointer;transition:var(--transition)}
.atalhos .tm:hover,.atalhos .gr:hover{border-color:var(--laranja);color:var(--laranja)}
.atalhos .tm.on{background:var(--verde-ml);border-color:var(--verde-ml);color:#fff}
.atalhos .gr{font-size:14px;line-height:1;padding:4px 9px}
.atalhos .gr.on{background:var(--laranja);border-color:var(--laranja);color:#241703}
.atalhos .sep{flex:1;min-width:4px}
.art label{display:block;font-size:10px;color:var(--fraco);margin-bottom:3px}
.art 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)}
.art input:focus{outline:none;border-color:var(--laranja)}
.qb2{height:7px;border-radius:5px;background:#E4E7EC;overflow:hidden;margin-top:9px}
.qb2 i{display:block;height:100%;border-radius:5px}
.qb2 i.ok{background:var(--verde)}.qb2 i.av{background:var(--laranja)}.qb2 i.er{background:var(--vermelho)}
.calc{font-size:10.5px;margin-top:6px;display:flex;justify-content:space-between;gap:8px;color:var(--fraco)}
.calc .ok{color:var(--verde)}.calc .av{color:var(--laranja)}.calc .er{color:var(--vermelho)}
.dica{margin-top:9px;background:#FFF8EE;border:1px solid #F0D9AE;border-radius:8px;
padding:10px 12px;font-size:11.5px;color:#7A5A16;line-height:1.45}
.dica b{display:block;font-family:"Inter",sans-serif;color:#B07A18;font-size:12px;margin-bottom:3px}
.dica button{display:block;width:100%;margin-top:10px;padding:10px 14px;border-radius:7px;
border:1px solid var(--verde-ml);background:var(--verde-ml);color:#fff;
font-family:"Inter",sans-serif;font-weight:700;font-size:13px;letter-spacing:.01em;
cursor:pointer;box-shadow:0 2px 8px rgba(0,166,80,.28);transition:var(--transition)}
.dica button:hover{background:#00934A;border-color:#00934A;box-shadow:0 4px 14px rgba(0,166,80,.38)}
.dicaok{margin-top:8px;font-size:11px;color:var(--verde)}
/* cota em escala da peça dentro da largura do filme */
.viz{margin-top:10px;max-width:100%}
.vizL{display:flex;align-items:center;gap:7px;margin-bottom:5px}
.vizL i{flex:1;height:1px;background:var(--gray-2);position:relative}
.vizL i::before{content:"";position:absolute;top:-3px;width:1px;height:7px;background:var(--gray-2)}
.vizL i:first-child::before{left:0} .vizL i:last-child::before{right:0}
.vizL b{font-family:"Inter",sans-serif;font-size:9.5px;font-weight:700;letter-spacing:.08em;
text-transform:uppercase;color:var(--fraco)}
.vizRow{display:flex;gap:7px;align-items:flex-end}
.vizTira{flex:none;max-width:100%}
.vizH{flex:none;display:flex;align-items:center;justify-content:center;padding-left:4px;
border-left:1px solid var(--gray-2);min-height:22px}
.vizH span{writing-mode:vertical-rl;font-family:"Inter",sans-serif;font-size:9.5px;
font-weight:700;color:var(--fraco);white-space:nowrap}
.tira{display:flex;background:#fff;border:1px solid var(--linha);border-radius:4px;
padding:2px;overflow:hidden;min-height:22px;width:100%}
.pc{flex:none;overflow:hidden;display:flex;align-items:center;justify-content:center;
background:#F2F2F2;border-radius:2px}
.pc img{width:100%;height:100%;object-fit:contain;display:block}
.pc span{font-family:"Inter",sans-serif;font-size:9px;font-weight:700;color:var(--fraco)}
.folga{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;border-radius:2px;
background:repeating-linear-gradient(45deg,#FBFBFB,#FBFBFB 4px,#F0F0F0 4px,#F0F0F0 8px)}
.folga span{font-size:8.5px;color:var(--fraco);white-space:nowrap;overflow:hidden}
.vizPe{font-size:10.5px;color:var(--fraco);margin-top:6px;line-height:1.4}
.vizPe b{color:var(--tx);font-family:"Inter",sans-serif;font-weight:700}
.resumoA{background:#fff;border:1px solid var(--linha);border-radius:9px;padding:11px 13px;
font-size:12px;margin-bottom:12px;display:none}
.resumoA.on{display:block}
.resumoA .r{display:flex;justify-content:space-between;padding:2px 0}
.resumoA .r b{font-family:"Inter",sans-serif}
/* nota de qualidade */
.qual{background:#fff;border:1px solid var(--linha);border-radius:13px;padding:22px;margin-top:16px;display:none}
.qual.on{display:block}
.qh{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.qh h3{font-family:"Inter",sans-serif;font-size:17px;font-weight:700}
.qh .pct{font-family:"Inter",sans-serif;font-weight:700;font-size:38px;line-height:1;color:var(--verde)}
.qh .pct small{font-size:14px;color:var(--fraco)}
.qbar{height:13px;border-radius:8px;background:var(--cinza);overflow:hidden}
.qbar i{display:block;height:100%;border-radius:8px;background:var(--verde)}
.qitens{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:7px;margin-top:13px}
.qi{display:flex;gap:8px;align-items:center;border:1px solid var(--linha);border-radius:8px;
padding:7px 10px;font-size:11.5px}
.qi .c{width:15px;height:15px;border-radius:50%;display:grid;place-items:center;font-size:8.5px;
flex:none;color:#fff;font-family:"Inter",sans-serif;font-weight:700}
.qi b{display:block;font-family:"Inter",sans-serif;font-size:11.5px}
.qi span{color:var(--fraco);font-size:10.5px}
.qi.ok .c{background:var(--verde)}.qi.av .c{background:var(--laranja);color:#241703}
.qi.er .c{background:var(--vermelho)}
.qi.fix{border-color:#BBD9E8;background:#F2F9FC}
.qi.fix .c{background:#2F7FA8}
.ciente{background:#FFF8EE;border:1px solid #F0D9AE;border-radius:10px;padding:14px 17px;
margin-top:14px;display:none}
.ciente.on{display:block}
.ciente.recusa{background:#FFF3F0;border-color:#E8A796}
.ciente.recusa h4{color:#8C3B22}
.ciente.recusa label{display:none}
.ciente.recusa .lista{color:#8C3B22}
.ciente h4{font-family:"Inter",sans-serif;font-size:14px;font-weight:700;color:#B07A18;margin-bottom:5px}
.ciente p{font-size:12.5px;color:#7A5A16;line-height:1.5}
.ciente .lista{margin:10px 0 0;font-size:12px;color:#7A5A16}
.ciente .lista div{padding:3px 0 3px 15px;position:relative}
.ciente .lista div::before{content:"·";position:absolute;left:4px;font-weight:700}
.ciente label{display:flex;gap:9px;align-items:flex-start;margin-top:12px;padding-top:11px;
border-top:1px solid #F0D9AE;cursor:pointer;font-size:12.5px;color:#5E4512}
.ciente input{margin-top:2px;width:16px;height:16px;flex:none;accent-color:#B07A18}
@keyframes pulsa{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(217,74,40,.55)}
50%{transform:scale(1.04);box-shadow:0 0 0 12px rgba(217,74,40,0)}}
.qbts{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}
.qbts .qb{flex:1;min-width:220px}
.qb{padding:11px 17px;border-radius:8px;border:1px solid var(--linha);background:#fff;
font-family:"Inter",sans-serif;font-weight:600;font-size:13.5px;cursor:pointer;color:var(--tx)}
.qb.p{background:var(--laranja);border-color:var(--laranja);color:#241703}
.qb.chama{background:var(--vermelho);border-color:var(--vermelho);color:#fff;
animation:pulsa 1.6s ease-in-out infinite}
.qb.chama:hover{background:#C1421F;animation:none}
.qb:disabled{opacity:.45;cursor:not-allowed}
@media(prefers-reduced-motion:reduce){.qb.chama{animation:none}}
/* prévia */
.prev{background:#fff;border:1px solid var(--linha);border-radius:13px;padding:22px;margin-top:16px;display:none}
.prev.on{display:block}
.prev .ph{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.prev .ph h3{font-family:"Inter",sans-serif;font-size:17px;font-weight:700}
.prev .ph p{font-size:12.5px;color:var(--fraco)}
.prev .ph .mt{font-family:"Inter",sans-serif;font-weight:700;font-size:22px;white-space:nowrap}
.prev .ph .mt small{font-size:12px;color:var(--fraco);font-weight:600}
.pgrid{display:grid;grid-template-columns:300px 1fr;gap:18px;align-items:start}
@media(max-width:760px){.pgrid{grid-template-columns:1fr}}
.pfolha{background:var(--cinza);border:1px solid var(--linha);border-radius:10px;padding:12px}
.pfolha canvas,.pfolha img{width:100%;height:auto;display:block;border-radius:6px;background:#fff}
.pfolha .semprev,.pfolha .carregando{padding:40px 16px;text-align:center;color:var(--fraco);
font-size:12px;background:#fff;border-radius:6px}
.pfolha .semprev b{display:block;font-family:"Inter",sans-serif;color:var(--tx);font-size:13px;margin-bottom:4px}
.usoBom,.usoRuim{margin-top:10px;border-radius:8px;padding:9px 12px;font-size:11.5px;line-height:1.45}
.usoBom{background:#F1F8F3;border:1px solid #CDE6D6;color:#2A6B45}
.usoRuim{background:#FFF8EE;border:1px solid #F0D9AE;color:#7A5A16}
.usoBom b,.usoRuim b{display:block;font-family:"Inter",sans-serif;font-size:12.5px;margin-bottom:2px}
.pinfo .li{display:flex;gap:10px;align-items:flex-start;padding:7px 0;font-size:12.5px;
border-bottom:1px solid var(--linha)}
.pinfo .li:last-child{border:0}
.pinfo .li .c{width:19px;height:19px;border-radius:50%;display:grid;place-items:center;flex:none;
margin-top:1px;font-size:10px;color:#fff;font-family:"Inter",sans-serif;font-weight:700}
.pinfo .li b{display:block;font-family:"Inter",sans-serif;font-size:12.5px}
.pinfo .li span{color:var(--fraco);font-size:11.5px}
.pcta{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px;padding-top:15px;border-top:1px solid var(--linha)}
.pb{padding:11px 18px;border-radius:8px;border:1px solid var(--linha);background:#fff;
font-family:"Inter",sans-serif;font-weight:600;font-size:13.5px;cursor:pointer;color:var(--tx)}
.pb.p{background:var(--laranja);border-color:var(--laranja);color:#241703}
.pb:hover{border-color:#111}
/* carrinho */
/* faixa de prova · cinco motivos logo abaixo do topo */
.prova{padding:clamp(22px,3vw,34px) 0}
.prova .w{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:14px}
.p1{border-left:2px solid var(--laranja);padding:2px 0 2px 13px}
.p1 b{display:block;font-family:"Inter",sans-serif;font-size:14px;font-weight:700;
line-height:1.25;color:var(--tx);margin-bottom:5px}
.p1 b em{font-style:normal;color:var(--laranja)}
.p1 span{display:block;font-size:11.5px;color:var(--fraco);line-height:1.5}
/* ── Carrinho no padrão de checkout: entrega à esquerda, resumo fixo à direita ── */
.carr{display:none;margin-top:18px}
.checkout{margin-top:14px}
.checkout #checkoutStatus:empty{display:none}
.carr.on{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start}
@media(max-width:900px){.carr.on{grid-template-columns:1fr}}
.carr h3{font-family:"Inter",sans-serif;font-size:19px;font-weight:700;margin-bottom:12px}
.cxE{background:#fff;border:1px solid var(--linha);border-radius:12px;
box-shadow:var(--sombra);padding:17px 18px;margin-bottom:14px}
.cxE h4{font-family:"Inter",sans-serif;font-size:15px;font-weight:700;margin-bottom:11px}
/* itens do pedido */
.item{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--linha)}
.item:first-child{border-top:0;padding-top:2px}
.item .nm2{flex:1;min-width:0}
.item .nm2 b{display:block;font-family:"Inter",sans-serif;font-size:13.5px;color:var(--tx)}
.item .nm2 span{font-size:11.5px;color:var(--fraco)}
.item .vl2{font-family:"Inter",sans-serif;font-weight:700;font-size:14px;color:var(--tx);
white-space:nowrap}
.item .x{border:0;background:none;color:var(--gray-2);cursor:pointer;font-size:17px;
line-height:1;padding:0 0 0 4px}
.item .x:hover{color:var(--vermelho)}
.rot{font-family:"Inter",sans-serif;font-size:10px;font-weight:700;letter-spacing:.12em;
text-transform:uppercase;color:var(--fraco);margin:0 0 7px}
.carr .l{display:flex;justify-content:space-between;font-size:12.5px;padding:5px 0;
color:var(--fraco);gap:14px}
.carr .l b{color:var(--tx);font-family:"Inter",sans-serif;font-weight:700;white-space:nowrap}
/* identificação do cliente */
.subC{font-size:11.5px;color:var(--fraco);line-height:1.5;margin:-4px 0 12px}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:11px}
@media(max-width:620px){.campos{grid-template-columns:1fr}}
.cp.larga{grid-column:1/-1}
.cp label{display:block;font-size:10.5px;color:var(--fraco);margin-bottom:5px}
.cp input{width:100%;padding:11px 12px;border-radius:8px;border:1px solid var(--linha);
background:#fff;font-family:inherit;font-size:13.5px;color:var(--tx)}
.cp input:focus{outline:none;border-color:var(--laranja)}
.cp input.ruim{border-color:var(--vermelho);background:#FFF6F4}
.cp input.bom{border-color:var(--verde-ml)}
.cp .err{display:block;font-size:10.5px;color:var(--vermelho);margin-top:4px;min-height:13px}
/* forma de entrega, como no checkout do marketplace */
.entrega{display:grid;gap:9px}
.opE{display:flex;gap:11px;align-items:flex-start;text-align:left;width:100%;
background:#fff;border:1px solid var(--linha);border-radius:10px;padding:13px 14px;
cursor:pointer;font-family:inherit;color:var(--tx);transition:var(--transition)}
.opE:hover{border-color:var(--gray-3)}
.opE.on{border-color:var(--verde-ml);background:#F4FCF7;box-shadow:0 0 0 1px var(--verde-ml)}
.opE .mk{flex:none;width:17px;height:17px;border-radius:50%;margin-top:2px;
border:2px solid var(--gray-2);background:#fff}
.opE.on .mk{border-color:var(--verde-ml);
background:radial-gradient(circle,var(--verde-ml) 0 4px,#fff 5px)}
.opE div{flex:1;min-width:0}
.opE b{display:block;font-family:"Inter",sans-serif;font-size:13.5px;margin-bottom:2px}
.opE span{font-size:11.5px;color:var(--fraco);line-height:1.5}
.opE em{flex:none;font-style:normal;font-family:"Inter",sans-serif;font-weight:700;
font-size:13px;color:var(--verde-ml);white-space:nowrap}
.cep{display:none;margin-top:10px;padding:12px;background:var(--cinza);border-radius:9px}
.cep.on{display:block}
.cep label{display:block;font-size:10.5px;color:var(--fraco);margin-bottom:6px}
.cepL{display:flex;gap:8px}
.cepL input{flex:1;min-width:0;padding:10px 12px;border-radius:8px;background:#fff;
border:1px solid var(--linha);font-family:inherit;font-size:13px;color:var(--tx)}
.cepL input:focus{outline:none;border-color:var(--laranja)}
.cepL button{flex:none;width:auto;padding:10px 18px;border-radius:8px;
border:1px solid var(--linha);cursor:pointer;background:#fff;color:var(--tx);
font-family:"Inter",sans-serif;font-weight:600;font-size:12.5px}
.cepL button:hover{border-color:var(--laranja);color:var(--laranja)}
.cep p{font-size:11.5px;color:var(--fraco);margin-top:9px;line-height:1.5}
.cep .endereco{margin-top:12px}
.cep .err{color:var(--vermelho)}
.avisoE:empty{display:none}
.avisoE{font-size:11.5px;color:#1F5C3A;background:#F1FBF5;border:1px solid #BFE6CE;
border-radius:8px;padding:10px 12px;line-height:1.5;margin-top:9px}
/* resumo da compra */
.resumo{position:sticky;top:104px;background:#fff;border:1px solid var(--linha);
border-radius:12px;box-shadow:var(--sombra);padding:17px 18px}
@media(max-width:900px){.resumo{position:static}}
.resumo h4{font-family:"Inter",sans-serif;font-size:16px;font-weight:700;margin-bottom:12px}
.resumo .l{padding:6px 0}
.carr .tot{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
font-family:"Inter",sans-serif;font-size:15px;font-weight:700;padding-top:12px;margin-top:8px;
border-top:1px solid var(--linha);color:var(--tx)}
.carr .tot b{font-size:23px;color:var(--tx)}
.cbts{display:grid;gap:9px;margin-top:14px}
.cbts button{width:100%;padding:13px;border-radius:9px;border:0;background:var(--laranja);
color:#241703;font-family:"Inter",sans-serif;font-weight:700;font-size:14.5px;cursor:pointer;
transition:var(--transition)}
.cbts button:hover{background:var(--laranja2)}
.cbts button:disabled{opacity:.4;cursor:not-allowed}
.cbts .sec{background:#fff;color:var(--tx);border:1px solid var(--linha);font-weight:600}
.cbts .sec:hover{background:#fff;border-color:var(--laranja);color:var(--laranja)}
.carr .obs{font-size:11px;color:var(--fraco);margin-top:11px;line-height:1.5}
.carro{position:relative;margin-top:22px}
.trilho{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
scroll-behavior:smooth;padding-bottom:6px;-webkit-overflow-scrolling:touch}
.trilho::-webkit-scrollbar{height:0}
.slide{flex:0 0 clamp(244px,76%,316px);scroll-snap-align:start;
background:var(--cinza);border:1px solid var(--linha);border-radius:13px;padding:17px 18px}
.slide .et2{font-family:"Inter",sans-serif;font-size:9.5px;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:var(--laranja);margin-bottom:8px;display:block}
.slide h3{font-family:"Inter",sans-serif;font-size:16px;font-weight:700;margin-bottom:6px;line-height:1.18}
.slide p{font-size:12.5px;color:var(--fraco);line-height:1.5}
/* selo circular · o benefício em número, com os anéis da marca em volta */
.slide{position:relative;overflow:hidden}
.stop{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.sinfo{min-width:0;flex:1}
.selo{flex:none;position:relative;width:74px;height:74px;border-radius:50%;
display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
background:#fff;border:2px solid var(--verde-ml);margin:2px 4px 0 0}
.selo i{position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(0,166,80,.34)}
.selo::before,.selo::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.selo::before{inset:-13px;border:1px solid rgba(0,166,80,.18)}
.selo::after{inset:-21px;border:1px solid rgba(0,166,80,.09)}
.selo b{font-family:"Inter",sans-serif;font-weight:700;font-size:19px;line-height:1;
color:var(--verde-ml);letter-spacing:-.01em}
.selo b em{font-style:normal;font-size:11px;margin-left:1px}
.selo span{font-family:"Inter",sans-serif;font-weight:700;font-size:8px;line-height:1.2;
letter-spacing:.07em;text-transform:uppercase;color:var(--fraco);margin-top:4px;padding:0 5px}
.slide .num{font-family:"Inter",sans-serif;font-weight:700;font-size:26px;
color:var(--laranja);line-height:1;margin-bottom:6px}
.slide ul{list-style:none;font-size:12px;margin-top:9px}
.slide li{padding:4px 0 4px 19px;position:relative;color:var(--fraco)}
.slide li::before{content:"✓";position:absolute;left:2px;color:var(--verde);font-size:11px}
.slide li.no::before{content:"!";color:var(--laranja);font-weight:700}
.slide table{width:100%;font-size:12px;margin-top:9px;border-collapse:collapse}
.slide td{padding:5px 0;border-bottom:1px solid #E3E3E3;color:var(--fraco)}
.slide td+td{text-align:right;font-family:"Inter",sans-serif;font-weight:700;color:var(--tx)}
.slide td.cab{font-family:"Inter",sans-serif;font-size:9.5px;font-weight:700;letter-spacing:.1em;
text-transform:uppercase;color:var(--fraco)}
.slide tr:last-child td{border:0}
.slide .dest{background:#fff;border-radius:8px;padding:9px 11px;margin-top:9px;
font-size:11.5px;color:var(--tx)}
.navc{display:flex;gap:8px;align-items:center;margin-top:14px}
.navc button{width:32px;height:32px;border-radius:50%;border:1px solid var(--linha);
background:#fff;color:var(--tx);cursor:pointer;font-size:15px;line-height:1}
.navc button:hover{border-color:var(--laranja);color:var(--laranja)}
.pontos{display:flex;gap:5px;margin-left:auto}
.pt{width:20px;height:3px;border-radius:2px;background:var(--linha);border:0;padding:0;cursor:pointer}
.pt.on{background:var(--laranja)}
@media(prefers-reduced-motion:reduce){.trilho{scroll-behavior:auto}}
h2{font-size:clamp(23px,3.6vw,34px);font-weight:700;max-width:20ch}
h2 em{font-style:normal;color:var(--laranja)}
.et{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--laranja);
font-family:"Inter",sans-serif;font-weight:700;margin-bottom:10px}
.lead{color:var(--fraco);font-size:15px;max-width:56ch;margin-top:12px}
.dor{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:13px;margin-top:24px}
.dc{background:#fff;border:1px solid var(--linha);border-radius:12px;padding:18px 19px}
.dc .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
font-family:"Inter",sans-serif;font-weight:700;font-size:14px;margin-bottom:11px;
background:#FBEEEA;color:var(--vermelho)}
.dc h3{font-size:15px;font-weight:700;margin-bottom:4px}
.dc p{font-size:12.5px;color:var(--fraco)}
.nota{background:var(--cinza);border-radius:11px;padding:14px 18px;margin-top:15px;font-size:13px;color:var(--fraco)}
.nota b{color:var(--tx);font-family:"Inter",sans-serif}
footer{background:#000;color:#8D9AB0;padding:26px 0 20px;font-size:12.5px}
.frow{display:flex;gap:26px;align-items:flex-start;flex-wrap:wrap;padding-bottom:18px}
.fmarca{display:flex;align-items:center;gap:9px;font-family:"Inter",sans-serif;
font-weight:700;font-size:13px;color:var(--laranja);letter-spacing:.06em;white-space:nowrap}
.fmarca img{height:22px;width:auto;display:block;filter:brightness(0) invert(1)}
footer a{color:#8D9AB0;text-decoration:none}
footer a:hover{color:var(--laranja2)}
.flinks{display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px}
.fcont{margin-left:auto;text-align:right;font-size:12.5px;line-height:1.7}
@media(max-width:720px){.fcont{margin-left:0;text-align:left}}
.fbase{border-top:1px solid rgba(255,255,255,.1);padding-top:14px;display:flex;
justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:11px;color:#5A6570}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}
</style>
<link rel="stylesheet" href="/site-v2.css?v=5">
<script src="/site-pages.js"></script>
</head>
<body>
<div class="tarja">
ENVIE SEU ARQUIVO DTF PELO SITE · DTF TÊXTIL COM O MENOR PREÇO DO METRO EM FRANCA-SP
</div>
<header class="topo"><div class="w">
<a class="logo" href="https://www.dropstaratacado.com.br" aria-label="Dropstar Atacado"><img src="https://cdn.vnda.com.br/dropstar/2025/12/17/logo-header-15125700-16129080.png?v=1766009286" alt="Dropstar"></a>
<div class="busca">
<span class="lupa">⌕</span>
<input type="search" placeholder="Buscar" aria-label="Buscar">
</div>
<div class="acts">
<a href="/portal.html">Minha conta</a>
<a href="/carrinho" id="cartLink">Carrinho (0)</a>
</div>
</div></header>
<nav class="menu"><div class="w">
<div class="mi">
<a href="https://www.dropstaratacado.com.br/camiseta" target="_blank" rel="noopener">Vestuários</a>
<div class="sub">
<a href="https://www.dropstaratacado.com.br/camiseta/modelo-blcs" target="_blank" rel="noopener">Camiseta Premium</a>
<a href="https://www.dropstaratacado.com.br/camiseta/modelo-blos" target="_blank" rel="noopener">Camiseta Oversized</a>
<a href="https://www.dropstaratacado.com.br/moletom-canguru/modelo-blmc" target="_blank" rel="noopener">Moletom Canguru</a>
<a href="https://www.dropstaratacado.com.br/camiseta/modelo-blmp" target="_blank" rel="noopener">Camiseta Pima</a>
<a href="https://www.dropstaratacado.com.br/camiseta/modelo-blcp" target="_blank" rel="noopener">Camiseta Poliamida</a>
<a href="https://www.dropstaratacado.com.br/camiseta/modelo-blcd" target="_blank" rel="noopener">Camiseta Dry Fit</a>
<a href="https://www.dropstaratacado.com.br/camiseta/modelo-blci" target="_blank" rel="noopener">Camiseta Infantil</a>
<a href="https://www.dropstaratacado.com.br/camiseta/modelo-blrm" target="_blank" rel="noopener">Regata Machão</a>
<a href="https://www.dropstaratacado.com.br/camiseta/modelo-blgp" target="_blank" rel="noopener">Camisa Polo</a>
<a href="https://www.dropstaratacado.com.br/modelo-blmi" target="_blank" rel="noopener">Moletom Canguru Infantil</a>
</div>
</div>
<div class="mi on">
<a href="/#envio">Impressão DTF</a>
<div class="sub">
<a href="/#envio">DTF Têxtil · 57 cm</a>
<a href="/#envio">DTF UV · 28,5 cm</a>
</div>
</div>
<div class="mi">
<a href="https://www.dropstaratacado.com.br/modelo-emb" target="_blank" rel="noopener">Embalagens</a>
<div class="sub">
<a href="https://www.dropstaratacado.com.br/modelo-emb/modelo-sacseg" target="_blank" rel="noopener">Saco de Segurança</a>
<a href="https://www.dropstaratacado.com.br/modelo-emb/fit-adesiva" target="_blank" rel="noopener">Fita Adesiva</a>
<a href="https://www.dropstaratacado.com.br/modelo-emb/modelo-etiqtermica" target="_blank" rel="noopener">Etiqueta Térmica</a>
</div>
</div>
<div class="mi">
<a href="https://www.dropstaratacado.com.br/modelo-acessorios" target="_blank" rel="noopener">Acessórios</a>
<div class="sub">
<a href="https://www.dropstaratacado.com.br/modelo-acessorios/modelo-bon" target="_blank" rel="noopener">Boné Trucker</a>
<a href="https://www.dropstaratacado.com.br/chinelo-tradicional-unissex" target="_blank" rel="noopener">Chinelo Tradicional Unissex</a>
</div>
</div>
<div class="mi">
<a href="https://www.dropstaratacado.com.br/insumos" target="_blank" rel="noopener">Insumos</a>
<div class="sub">
<a href="https://www.dropstaratacado.com.br/filme-dtf" target="_blank" rel="noopener">Filme DTF</a>
<a href="https://www.dropstaratacado.com.br/poliamida-dtf" target="_blank" rel="noopener">Poliamida DTF</a>
<a href="https://www.dropstaratacado.com.br/tinta-dtf" target="_blank" rel="noopener">Tinta DTF</a>
<a href="https://www.dropstaratacado.com.br/fluido-limpeza" target="_blank" rel="noopener">Fluído Limpeza</a>
<a href="https://www.dropstaratacado.com.br/primer-limpeza" target="_blank" rel="noopener">Primer Limpeza</a>
</div>
</div>
<div class="mi">
<a href="https://www.dropstaratacado.com.br/produto/personalizacao-premium-sua-estampa-aqui-envie-a-estampa-16-99230-2546-59" target="_blank" rel="noopener">Personalizados</a>
</div>
</div></nav>
<header class="hero2">
<div class="w hero2-grid">
<div class="hero2-text">
<div class="chips">
<span class="chip2 destaque">Metro a partir de R$ 14,90</span>
<span class="chip2">Franca · SP · envio em até 24 h</span>
</div>
<h1>A gente encaixa sua folha e você paga <em>menos metro</em></h1>
<p>Mande a arte, veja a nota e a folha montada antes de pagar. Revisão de 5 pontos e reencaixe por nossa conta.</p>
<div class="hero2-cta">
<a href="/#envio" class="btn-laranja">Enviar minha arte <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
<span>Sem cadastro · preço em segundos</span>
</div>
</div>
<div class="hero2-folha" aria-hidden="true">
<div class="hf-cab"><b>Sua folha montada</b><span>filme 57 cm · prévia</span></div>
<div class="hf-area">
<i style="left:3%;top:5%;width:34%;height:40%;background:#FFA81A"></i>
<i style="left:39%;top:5%;width:34%;height:40%;background:#FFA81A"></i>
<i style="left:75%;top:5%;width:22%;height:55%;background:#2BB6D9"></i>
<i style="left:3%;top:49%;width:22%;height:40%;border-radius:50%;background:#E0508F"></i>
<i style="left:27%;top:49%;width:22%;height:40%;border-radius:50%;background:#E0508F"></i>
<i style="left:51%;top:49%;width:22%;height:30%;background:#E9C23A"></i>
<i style="left:75%;top:63%;width:22%;height:26%;background:#E9C23A"></i>
</div>
<div class="hf-num">
<div><span>Metragem</span><b>0,60 m</b></div>
<div><span>Nota da arte</span><b class="verde">92</b></div>
<div><span>Preço do metro</span><b class="laranja">R$ 24,90</b></div>
</div>
</div>
</div>
</header>
<section class="etapas2"><div class="w">
<div><span>1</span><div><b>Envie a arte</b><p>PNG, JPG ou PDF, conforme o produto. Sem cadastro.</p></div></div>
<div><span>2</span><div><b>Veja nota e montagem</b><p>A folha e o preço aparecem na hora.</p></div></div>
<div><span>3</span><div><b>Confira e pague</b><p>Conferimos a metragem e liberamos o pagamento.</p></div></div>
<div><span>4</span><div><b>Acompanhe</b><p>Aviso no WhatsApp a cada etapa.</p></div></div>
</div></section>
<!-- ENVIO -->
<section id="envio">
<nav class="passos" id="passos" aria-label="Etapas do pedido" hidden>
<a href="/#envio" data-passo="1"><span>1</span>Montagem</a>
<i aria-hidden="true"></i>
<a href="/carrinho" data-passo="2"><span>2</span>Dados e entrega</a>
<i aria-hidden="true"></i>
<a href="/carrinho#checkoutStatus" data-passo="3"><span>3</span>Pagamento</a>
</nav>
<div class="w">
<!-- 3 cards -->
<div id="cards">
<div class="cards-cab">
<div><div class="et">Escolha o produto</div>
<h2>Qual é o seu caso?</h2></div>
<p>O preço do metro depende da nota da arte: quanto melhor o arquivo, menor o preço.</p>
</div>
<div class="escolha">
<button class="ec f" data-modo="file">
<div class="ec-top"><span class="ec-kind">DTF TÊXTIL · 57 CM</span><span class="marc2">Mais vendido</span></div>
<h3>Arquivo por metro</h3>
<p>Você monta a folha e manda pronta. Revisamos, corrigimos e reencaixamos se sobrar espaço.</p>
<div class="ec-pe">
<div class="ec-preco"><span>de</span><b data-de="file">—</b><span>a <em data-ate="file">—</em> /m conforme a nota da arte</span></div>
<span class="ec-go">Enviar minha folha</span>
</div>
</button>
<button class="ec a" data-modo="avulsa">
<div class="ec-top"><span class="ec-kind">DTF TÊXTIL · 57 CM</span></div>
<h3>Artes avulsas</h3>
<p>Cada arte num arquivo. A gente monta a folha com o melhor encaixe. Montagem inclusa no preço.</p>
<div class="ec-pe">
<div class="ec-preco"><span>de</span><b data-de="avulsa">—</b><span>a <em data-ate="avulsa">—</em> /m conforme a nota da arte</span></div>
<span class="ec-go">Enviar minhas artes</span>
</div>
</button>
<button class="ec u" data-modo="uvfile">
<div class="ec-top"><span class="ec-kind">ADESIVO UV · 28,5 CM</span></div>
<h3>Arquivo por metro · UV</h3>
<p>Sua folha de UV montada. Para rígidos: caneca, garrafa, case. Não precisa de prensa.</p>
<div class="ec-pe">
<div class="ec-preco"><span>de</span><b data-de="uvfile">—</b><span>a <em data-ate="uvfile">—</em> /m conforme a nota da arte</span></div>
<span class="ec-go">Enviar folha de UV</span>
</div>
</button>
<button class="ec u" data-modo="uv">
<div class="ec-top"><span class="ec-kind">ADESIVO UV · 28,5 CM</span></div>
<h3>Artes avulsas · UV</h3>
<p>Cada arte num arquivo. Montamos a folha de UV com o melhor encaixe. Montagem inclusa no preço.</p>
<div class="ec-pe">
<div class="ec-preco"><span>de</span><b data-de="uv">—</b><span>a <em data-ate="uv">—</em> /m conforme a nota da arte</span></div>
<span class="ec-go">Enviar artes de UV</span>
</div>
</button>
</div>
</div>
<!-- painel focado -->
<div class="foco" id="foco">
<button class="voltar" id="bVoltar"><span>‹</span>Todos os produtos</button>
<div class="focoGrid">
<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>
</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>
</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="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é 128 MB por arquivo enquanto a verificação de segurança para arquivos grandes é preparada.</span>
<span class="bt">ou escolher no computador</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>
<details>
<summary>Como pagar o menor metro</summary>
<ul>
<li class="s"><b>300 DPI no tamanho que vai imprimir.</b> É a nota máxima
e o menor preço da tabela</li>
<li class="s"><b>O tamanho manda mais que o arquivo.</b> A mesma arte passa
em 20 cm e não passa em 40. Reduzir um pouco costuma pular uma faixa
de preço inteira</li>
<li class="s"><b>Larguras parecidas rendem mais.</b> Se as suas artes têm
medidas próximas, cabem mais por fileira e a folha encolhe</li>
</ul>
<p class="obs2">Resolução é a única coisa que mexe no preço — porque é a
única que a gente não consegue melhorar por você.</p>
</details>
<details>
<summary>O que arrumamos sem cobrar</summary>
<ul>
<li class="s"><b>Artes coladas.</b> Separamos com 5 mm, sem você refazer nada</li>
<li class="s"><b>Encaixe mal aproveitado.</b> Remanejamos e a sua folha
encolhe — você paga menos metro do que enviou</li>
<li class="s"><b>Peça passando da largura.</b> Remanejamos em vez de cortar</li>
<li class="s"><b>Margem.</b> Não precisa deixar. Só respeitar a largura do filme</li>
</ul>
</details>
<details>
<summary>Manda em PNG e sai na hora</summary>
<ul>
<li class="s"><b>PNG ou JPG</b> com fundo transparente entram direto, sem passar
por ninguém, e não têm limite de comprimento. Só que a gente lê a resolução
<b>do arquivo</b>: se a arte foi ampliada antes de exportar, isso não aparece
para nós — e sai serrilhado no filme do mesmo jeito</li>
<li class="s"><b>PDF é o que conferimos melhor.</b> Nele medimos a resolução de
cada imagem dentro da folha, uma por uma. Se a sua arte é boa, é onde a nota
aparece com mais precisão</li>
<li class="a"><b>PDF grande.</b> Sem UserUnit, a página passa do limite de 508 cm
do formato; divida a folha ou mande PNG. Envie um PDF de uma página por folha.</li>
<li class="a"><b>TIFF, PSD, AI e CDR</b> a gente aceita, mas ninguém consegue
conferir sozinho: alguém abre na mão, sai mais devagar e o metro vai pela
tabela, sem desconto de nota</li>
<li class="a">Em <b>artes avulsas</b> só PNG e JPG: a montagem precisa
enxergar a sua arte para encaixar pela forma</li>
</ul>
</details>
<details>
<summary>O que só você resolve</summary>
<ul>
<li class="n"><b>Fundo branco ou colorido.</b> Precisa ser transparente de
verdade — branco parecendo transparente sai branco no filme</li>
<li class="n"><b>Pontinho de recorte.</b> A impressora enxerga qualquer
resíduo e imprime. Não existe pequeno demais</li>
<li class="n"><b>Cópias sobrepostas.</b> Duas iguais com 1 mm de diferença
saem duplicadas</li>
<li class="n"><b>Menos de 96 DPI.</b> Abaixo disso não imprimimos: sai
serrilhado a ponto de não valer o filme</li>
<li class="n"><b>Degradê de transparência</b>, comum em arte de IA. O branco
por baixo sai irregular e sai assim mesmo</li>
</ul>
</details>
</aside>
</div>
<aside class="mont" id="mont">
<div class="montcab"><b id="montcabTit">Montagem ao vivo</b>
<div class="zoomB"><button id="zMenos" title="Diminuir">−</button>
<span id="zTxt">100%</span>
<button id="zMais" title="Aumentar">+</button></div>
<span id="vMt">—</span></div>
<div id="vArea"></div>
<div id="vUso"></div>
<p class="montpe">Prévia. O encaixe final é refeito no servidor e nunca sai pior.</p>
<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>
<p class="cObs" id="cObs"></p>
<div class="cTot"><span>Total</span><b id="cTotal">—</b></div>
<div id="qmsg" style="display:none"></div>
<div class="ciente" id="ciente">
<h4 id="cienteTit">Ressalva de resolução</h4>
<div id="cienteTxt"></div>
<label><input type="checkbox" id="cienteOk">
<span>Li e entendi. Quero imprimir assim mesmo.</span></label>
</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>
</div>
</aside>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- nota -->
<div class="qual" id="qual">
<div class="qh">
<div><h3 id="qNome">sua folha</h3>
<span style="font-size:12px;color:var(--fraco)" id="qSub"></span></div>
<div style="text-align:right"><div class="pct" id="pct">—</div>
<span style="font-size:11px;color:var(--fraco)">qualidade</span></div>
</div>
<div class="qbar"><i id="qbi" style="width:0%"></i></div>
<div class="qitens" id="qitens"></div>
<div class="qbts">
<button class="qb chama" id="qOk">Seguir para o pedido</button>
</div>
</div>
<!-- prévia da montagem -->
<div class="prev" id="prev">
<div class="ph">
<div><h3>Como sua folha vai sair</h3>
<p id="pSub">confira antes de fechar o pedido</p></div>
<div style="text-align:right">
<div class="mt" id="pMt">—</div>
<span style="font-size:11px;color:var(--fraco)">cobrado por proporção</span></div>
</div>
<div class="pgrid">
<div class="pfolha"><div id="pArea"></div></div>
<div class="pinfo" id="pInfo"></div>
</div>
<div class="pcta">
<button class="pb p" id="pOk">Adicionar ao carrinho</button>
<button class="pb" id="pMais">Adicionar mais artes</button>
<button class="pb" id="pVolta">Trocar o arquivo</button>
</div>
</div>
<!-- carrinho -->
<div class="carr" id="carr">
<div>
<h3>Seu pedido</h3>
<div class="cxE">
<h4>Itens</h4>
<div id="itens"></div>
<div id="atual">
<div class="rot" style="margin-top:12px">Item que você está montando</div>
<div id="carrLin"></div>
</div>
</div>
<div class="cxE">
<h4>Seus dados</h4>
<p class="subC">A conta nasce aqui, no pagamento. O CNPJ é o mesmo da nota fiscal,
e é por ele que suas artes ficam guardadas para o próximo pedido.</p>
<div class="campos">
<div class="cp"><label>CNPJ</label>
<input id="fCnpj" inputmode="numeric" maxlength="18" placeholder="00.000.000/0000-00">
<span class="err" id="eCnpj"></span></div>
<div class="cp"><label>WhatsApp</label>
<input id="fZap" inputmode="numeric" maxlength="15" placeholder="(16) 99999-9999">
<span class="err" id="eZap"></span></div>
<div class="cp larga"><label>E-mail para a nota</label>
<input id="fMail" type="email" placeholder="voce@empresa.com.br">
<span class="err" id="eMail"></span></div>
</div>
</div>
<div class="cxE">
<h4>Forma de entrega</h4>
<div class="entrega" id="entrega">
<button class="opE on" data-ent="retira">
<span class="mk"></span>
<div>
<b>Retirar em Franca</b>
<span>Av. Major Elias Motta, 1281 · Jardim São Luís<br>
Segunda a sexta, das 7h às 17h</span>
</div>
<em>Grátis</em>
</button>
<button class="opE" data-ent="frete">
<span class="mk"></span>
<div>
<b>Receber em casa</b>
<span>Cotamos com a transportadora pelo seu CEP</span>
</div>
<em id="vFrete">—</em>
</button>
<div class="cep" id="cep">
<label>CEP de entrega</label>
<div class="cepL">
<input id="cepIn" inputmode="numeric" maxlength="9" placeholder="00000-000">
<button id="bCep">Calcular</button>
</div>
<p id="cepMsg"></p>
<div class="campos endereco" id="endereco">
<div class="cp larga"><label>Quem recebe</label>
<input id="eNome" maxlength="120" autocomplete="name" placeholder="Nome ou empresa"></div>
<div class="cp larga"><label>Rua / avenida</label>
<input id="eRua" maxlength="160" autocomplete="address-line1"></div>
<div class="cp"><label>Número</label>
<input id="eNum" maxlength="20" placeholder="123 ou S/N"></div>
<div class="cp"><label>Complemento (opcional)</label>
<input id="eComp" maxlength="80" autocomplete="address-line2"></div>
<div class="cp"><label>Bairro</label>
<input id="eBairro" maxlength="80"></div>
<div class="cp"><label>Cidade</label>
<input id="eCidade" maxlength="80" autocomplete="address-level2"></div>
<div class="cp"><label>UF</label>
<input id="eUf" maxlength="2" autocomplete="address-level1" placeholder="SP"></div>
</div>
<p class="err" id="eEnd"></p>
</div>
<p class="avisoE" id="avisoE"></p>
</div>
</div>
</div>
<aside class="resumo">
<h4>Resumo da compra</h4>
<div id="resLin"></div>
<div class="tot"><span>Total</span><b id="carrTot">R$ 0,00</b></div>
<div class="cbts">
<button id="bPagar">Ir para o pagamento</button>
<button id="bMais" class="sec">Continuar comprando</button>
</div>
<p class="obs">A nota fiscal sai no CNPJ informado. O arquivo fica guardado por 30 dias;
depois disso, um novo pedido precisa do arquivo de novo. O histórico do pedido
continua disponível na sua conta.</p>
</aside>
</div>
<!-- Fora de #carr de propósito: o pedido pago esvazia o carrinho, e a
confirmação não pode sumir junto com o painel. -->
<div class="checkout">
<p id="checkoutStatus" class="avisoE" role="status" aria-live="polite"></p>
<div id="checkoutActions"></div>
</div>
<div class="carrVazio" id="carrVazio" hidden>
<h2>Seu carrinho está vazio</h2>
<p>Escolha um produto, envie a arte e veja o preço na hora.</p>
<a href="/#envio" class="btn-laranja">Escolher produto</a>
</div>
</div></section>
<!-- PREÇO E VANTAGENS -->
<section id="info" class="info2"><div class="w info2-grid">
<div class="info2-preco">
<div class="et">Preço</div>
<h2>Arte melhor, metro mais barato</h2>
<p>A nota aparece na tela antes de você pagar. Preço da folha que você monta:</p>
<table>
<thead><tr><th scope="col">Nota da arte</th><th scope="col">Têxtil 57 cm</th><th scope="col">UV 28,5 cm</th></tr></thead>
<tbody>
<tr><td>90 a 100</td><td class="melhor">R$ 14,90</td><td class="melhor">R$ 69,90</td></tr>
<tr><td>75 a 89</td><td>R$ 16,20</td><td>R$ 73,90</td></tr>
<tr><td>60 a 74</td><td>R$ 17,50</td><td>R$ 77,90</td></tr>
<tr><td>40 a 59</td><td>R$ 18,70</td><td>R$ 81,90</td></tr>
<tr><td>abaixo de 40</td><td>R$ 19,90</td><td>R$ 85,90</td></tr>
</tbody>
</table>
<p class="nota2">Montagem das artes avulsas: + R$ 10,00 no têxtil e + R$ 14,00 no UV, em qualquer faixa.</p>
</div>
<div class="info2-vant">
<div><b class="n">57 cm</b><b>O dobro do filme padrão</b><span>Cabe o dobro de arte por metro corrido.</span></div>
<div><b class="n">10 cm</b><b>Você paga o que usa</b><span>Folha de 2,75 m custa 2,80 m, não 3. Pedido mínimo de 1 metro.</span></div>
<div><b class="n">Grátis</b><b>Reencaixe da folha</b><span>Sobrou espaço? Refazemos o encaixe e a conta diminui.</span></div>
<div><b class="n">5 pontos</b><b>Revisão sem custo</b><span>Erro pego antes de imprimir. Arquivo guardado por 30 dias.</span></div>
</div>
</div></section>
<div class="barraM" id="barraM" hidden>
<div><span id="barraMSub">Seu pedido</span><b id="barraMTot">R$ 0,00</b></div>
<a href="/carrinho" id="barraMBtn">Continuar</a>
</div>
<footer><div class="w">
<div class="frow">
<span class="fmarca"><img src="https://cdn.vnda.com.br/dropstar/2025/12/17/logo-header-15125700-16129080.png?v=1766009286" alt="Dropstar">DTF</span>
<div class="flinks">
<a href="https://www.dropstaratacado.com.br" target="_blank" rel="noopener">Loja de atacado</a>
<a href="https://www.dropstaratacado.com.br/p/termos" target="_blank" rel="noopener">Trocas e privacidade</a>
<a href="https://www.dropstaratacado.com.br/p/atendimento" target="_blank" rel="noopener">Fale conosco</a>
<a href="https://www.instagram.com/dropstar.ofc/" target="_blank" rel="noopener">Instagram</a>
</div>
<div class="fcont">
<a href="https://wa.me/message/NJ76CLIOUGXLB1" target="_blank" rel="noopener">16 99428-0056</a>
· arquivos 16 99230-2546<br>
<a href="mailto:atendimentodropstar@gmail.com">atendimentodropstar@gmail.com</a><br>
Segunda a sexta, 07h às 17h
</div>
</div>
<div class="fbase">
<span>© Dropstar Atacado · CNPJ 55.786.635/0001-58 · Franca-SP</span>
<span>Visa · Master · Elo · Amex · Pix · Boleto</span>
<span>têxtil 57 cm · UV 28,5 cm</span>
</div>
</div></footer>
<!-- The Site's behaviour, split by responsibility. Classic scripts on purpose:
they share one global scope and run in this order, which is exactly how the
single inline script this replaces behaved. Order is therefore significant. -->
<script src="/site-config.js"></script>
<script src="/site-modes.js"></script>
<script src="/site-upload.js"></script>
<script src="/site-sheet.js"></script>
<script src="/site-pdf.js"></script>
<script src="/site-quality.js"></script>
<script src="/site-packing.js"></script>
<script src="/site-cart.js"></script>
<script src="/site-flow.js"></script>
<script src="/site-compra.js"></script>
<script src="/privacy.js"></script>
<script src="/upload.js"></script>
<script src="/checkout.js"></script>
<script src="/cart.js"></script>
<script src="/site-steps.js"></script>
</body>
</html>