24ee4e9eab
All checks were successful
Build and deploy / Validate source (push) Successful in 6s
Build and deploy / Integration suite on a real stack (push) Successful in 3m7s
Build and deploy / Secret scan and release gate (push) Successful in 10s
Build and deploy / Publish images (push) Successful in 1m6s
The order page becomes the customer's area, one page at four addresses: - /conta/entrar: sign in or create an account, side by side. "Esqueci minha senha" points to the Dropstar WhatsApp until e-mail can be sent. - /conta: the counts of orders waiting for payment, in production, in correction and finished, and the latest one. - /conta/pedidos: every order and the cart waiting for payment in one list, newest first, filtered by group, order number and period, ten per page. The cart shows "Aguardando pagamento" and its "Pagar" goes to the PIX page when a PIX code is open. An order opens in place with its progress, items, delivery, history, files and the correction form. A guest sees the orders paid in this browser. - /conta/dados: WhatsApp and a saved delivery address (the CNPJ is locked), e-mail and password changes, both confirmed with the current password; a password change signs the other devices out. The cart fills in the account's details and saved address. New API routes for the details, and the order list takes filters and pages and returns the counts; only the newest unpaid quote whose files still exist is listed. The Site's "Minha conta" and "Ver meus pedidos" point to the new addresses. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
1187 lines
71 KiB
HTML
1187 lines
71 KiB
HTML
<!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">
|
||
<link rel="stylesheet" href="/site-shell.css">
|
||
<style>
|
||
section{padding:clamp(34px,5vw,56px) 0}
|
||
section+section{border-top:1px solid var(--linha)}
|
||
.prova+section{border-top:0}
|
||
|
||
|
||
|
||
|
||
.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:16px;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:16px;cursor:pointer;text-decoration:none}
|
||
.btn1:hover{background:var(--laranja2)}
|
||
.mini{font-size:14.5px;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:11px;font-weight:700;letter-spacing:.09em;
|
||
text-transform:uppercase;padding:2px 8px;border-radius:4px;white-space:nowrap}
|
||
.pcard .apartir{display:block;font-size:12px;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:13.5px;font-weight:600;color:#8D9AB0}
|
||
.pcard .nm{font-family:"Inter",sans-serif;font-size:15px;font-weight:700;color:#fff;display:block}
|
||
.pcard .dsc{font-size:13px;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:12px;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:14.5px;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:11.5px}
|
||
|
||
|
||
/* 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:11.5px;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:18px;font-weight:700;color:var(--tx)}
|
||
|
||
|
||
.ec .top .p{font-family:"Inter",sans-serif;font-weight:700;font-size:16.5px;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:12.5px;
|
||
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:14px;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:15px}
|
||
.ec .top .p small{font-size:13.5px;font-weight:600;color:var(--fraco)}
|
||
.ec .in{padding:18px 20px 20px}
|
||
.ec .in p{font-size:15px;color:var(--fraco);margin-bottom:13px}
|
||
.ec ul{list-style:none;font-size:15px;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:13.5px}
|
||
.ec .go{font-family:"Inter",sans-serif;font-weight:700;font-size:15.5px;color:var(--laranja);display:block}
|
||
.ec .lg{display:block;font-size:13px;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:15px;color:var(--tx);
|
||
cursor:pointer;margin-bottom:14px;box-shadow:var(--sombra);transition:var(--transition)}
|
||
.voltar span{font-size:16.5px;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:18px;white-space:nowrap}
|
||
.cabfoco p{font-size:15px;color:var(--fraco);width:100%;margin-top:4px}
|
||
.cabfoco .lg{font-size:13px;color:var(--fraco);letter-spacing:.1em;text-transform:uppercase;
|
||
font-family:"Inter",sans-serif;font-weight:700}
|
||
|
||
/* upload */
|
||
.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:15px;margin-bottom:2px}
|
||
.cam span{display:block;font-size:13px;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:14.5px;color:var(--verde-ml);line-height:1.3}
|
||
.trocouCam{margin-top:-4px;margin-bottom:11px;padding:10px 12px;border-radius:9px;
|
||
background:#FFF6E8;border:1px solid #F0D9AE;font-size:14px;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:14px;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:19px;font-weight:700;
|
||
margin-bottom:5px;color:var(--tx);line-height:1.2}
|
||
.zona span{font-size:14.5px;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:15px;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:14px;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:14.5px;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:15px}
|
||
.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:16px;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:15px}
|
||
.it b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||
.it span{color:var(--fraco);font-size:13.5px;flex:none}
|
||
.it button{border:0;background:none;color:var(--fraco);cursor:pointer;font-size:16.5px}
|
||
|
||
/* repetição do FILE */
|
||
.rep{background:var(--cinza);border-radius:9px;padding:12px 14px;margin-top:8px}
|
||
.rep .l1{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:9px}
|
||
.rep .l1 b{font-weight:500;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||
.rep .l1 button{border:0;background:none;color:var(--fraco);cursor:pointer;font-size:16.5px;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:13px;color:var(--fraco)}
|
||
.progF{margin:9px 0 4px;padding:9px 11px;border-radius:7px;background:#FFF6E8;
|
||
border:1px solid #F0D9AE;font-size:13.5px;color:#7A5A16;line-height:1.5}
|
||
.progF b{font-family:"Inter",sans-serif;font-weight:700;color:#B07A18}
|
||
.rep label{display:block;font-size:12.5px;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:15px;background:#fff;color:var(--tx)}
|
||
.rep 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:15px;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:16px;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:13px;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:17.5px;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:13px;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:15px;margin-bottom:4px}
|
||
.semmont span{font-size:14px;color:var(--fraco);line-height:1.4;display:block}
|
||
.montpe{font-size:13px;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:19px;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:15px;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:13.5px;
|
||
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:14px;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:13.5px;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:13px;color:var(--fraco);padding:0 0 9px;line-height:1.45;
|
||
font-style:italic}
|
||
.mont .usoBom,.mont .usoRuim{margin-top:8px;font-size:13.5px;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:11.5px;
|
||
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:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||
.art .l1 button{border:0;background:none;color:var(--fraco);cursor:pointer;font-size:16.5px;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:13.5px;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:16px;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:12.5px;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:15px;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:13px;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:14px;color:#7A5A16;line-height:1.45}
|
||
.dica b{display:block;font-family:"Inter",sans-serif;color:#B07A18;font-size:14.5px;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:15px;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:13.5px;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:12px;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:12px;
|
||
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:11.5px;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:11px;color:var(--fraco);white-space:nowrap;overflow:hidden}
|
||
.vizPe{font-size:13px;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:14.5px;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:18px;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:16px;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:14px}
|
||
.qi .c{width:15px;height:15px;border-radius:50%;display:grid;place-items:center;font-size:11px;
|
||
flex:none;color:#fff;font-family:"Inter",sans-serif;font-weight:700}
|
||
.qi b{display:block;font-family:"Inter",sans-serif;font-size:14px}
|
||
.qi span{color:var(--fraco);font-size:13px}
|
||
.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:16px;font-weight:700;color:#B07A18;margin-bottom:5px}
|
||
.ciente p{font-size:15px;color:#7A5A16;line-height:1.5}
|
||
.ciente .lista{margin:10px 0 0;font-size:14.5px;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:15px;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:15.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:18px;font-weight:700}
|
||
.prev .ph p{font-size:15px;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:14.5px;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:14.5px;background:#fff;border-radius:6px}
|
||
.pfolha .semprev b{display:block;font-family:"Inter",sans-serif;color:var(--tx);font-size:15px;margin-bottom:4px}
|
||
.usoBom,.usoRuim{margin-top:10px;border-radius:8px;padding:9px 12px;font-size:14px;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:15px;margin-bottom:2px}
|
||
.pinfo .li{display:flex;gap:10px;align-items:flex-start;padding:7px 0;font-size:15px;
|
||
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:12.5px;color:#fff;font-family:"Inter",sans-serif;font-weight:700}
|
||
.pinfo .li b{display:block;font-family:"Inter",sans-serif;font-size:15px}
|
||
.pinfo .li span{color:var(--fraco);font-size:14px}
|
||
.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:15.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:16px;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:14px;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:16.5px;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:15.5px;color:var(--tx)}
|
||
.item .nm2 span{font-size:14px;color:var(--fraco)}
|
||
.item .vl2{font-family:"Inter",sans-serif;font-weight:700;font-size:16px;color:var(--tx);
|
||
white-space:nowrap}
|
||
.item .x{border:0;background:none;color:var(--gray-2);cursor:pointer;font-size:18px;
|
||
line-height:1;padding:0 0 0 4px}
|
||
.item .x:hover{color:var(--vermelho)}
|
||
.rot{font-family:"Inter",sans-serif;font-size:12.5px;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:15px;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:14px;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:13px;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:15.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:13px;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:15.5px;margin-bottom:2px}
|
||
.opE span{font-size:14px;color:var(--fraco);line-height:1.5}
|
||
.opE em{flex:none;font-style:normal;font-family:"Inter",sans-serif;font-weight:700;
|
||
font-size:15px;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:13px;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:15px;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:15px}
|
||
.cepL button:hover{border-color:var(--laranja);color:var(--laranja)}
|
||
.cep p{font-size:14px;color:var(--fraco);margin-top:9px;line-height:1.5}
|
||
.cep p:empty{display:none}
|
||
.cep .endereco{margin-top:12px}
|
||
.cep .err{color:var(--vermelho)}
|
||
.avisoE:empty{display:none}
|
||
.avisoE{font-size:14px;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:17.5px;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:16.5px;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:16px;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)}
|
||
|
||
.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:12px;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:17.5px;font-weight:700;margin-bottom:6px;line-height:1.18}
|
||
.slide p{font-size:15px;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:13.5px;margin-left:1px}
|
||
.selo span{font-family:"Inter",sans-serif;font-weight:700;font-size:10.5px;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:14.5px;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:13.5px}
|
||
.slide li.no::before{content:"!";color:var(--laranja);font-weight:700}
|
||
.slide table{width:100%;font-size:14.5px;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:12px;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:14px;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:16.5px;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:13.5px;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:16.5px;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:16px;margin-bottom:11px;
|
||
background:#FBEEEA;color:var(--vermelho)}
|
||
.dc h3{font-size:16.5px;font-weight:700;margin-bottom:4px}
|
||
.dc p{font-size:15px;color:var(--fraco)}
|
||
.nota{background:var(--cinza);border-radius:11px;padding:14px 18px;margin-top:15px;font-size:15px;color:var(--fraco)}
|
||
.nota b{color:var(--tx);font-family:"Inter",sans-serif}
|
||
|
||
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}
|
||
</style>
|
||
<link rel="stylesheet" href="/site-v2.css">
|
||
<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="acts">
|
||
<a href="/conta"><svg class="ic" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg><span class="actTx">Minha conta</span></a>
|
||
<a href="/carrinho" id="cartLink" aria-label="Carrinho, 0 itens"><span class="cartIc"><svg class="ic" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg><b class="cartN" id="cartN" hidden>0</b></span><span class="actTx">Carrinho</span></a><span class="cartEnvio" id="cartEnvio" aria-live="polite"></span>
|
||
</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="/pagamento" 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>
|
||
<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><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><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="avisoTipo" style="display:none"></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"><svg class="ic" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m17 8-5-5-5 5"/><path d="M12 3v12"/></svg></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="resumoA" id="rA" style="display:none"></div>
|
||
<input type="file" id="inp" hidden>
|
||
<aside class="req" id="req">
|
||
<h3 class="reqcab">Dúvidas:</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>
|
||
<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="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>
|
||
<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><svg class="ic" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M12 10v6"/><path d="M9 13h6"/></svg><span>Adicionar ao carrinho</span></button>
|
||
<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"><svg class="ic" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button></div>
|
||
<div id="ampliaArea"></div>
|
||
</dialog>
|
||
</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:14.5px;color:var(--fraco)" id="qSub"></span></div>
|
||
<div style="text-align:right"><div class="pct" id="pct">—</div>
|
||
<span style="font-size:13.5px;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:13.5px;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"><svg class="ic" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M12 10v6"/><path d="M9 13h6"/></svg><span>Adicionar ao carrinho</span></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">
|
||
<div class="itensCab"><h4>Itens</h4>
|
||
<button type="button" class="esvaziar" id="bEsvaziar">Esvaziar carrinho</button></div>
|
||
<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>
|
||
<div class="campos">
|
||
<div class="cp"><label>CNPJ <span class="obr" aria-hidden="true">*</span></label>
|
||
<input id="fCnpj" aria-required="true" autocomplete="off" inputmode="numeric" maxlength="18" placeholder="00.000.000/0000-00">
|
||
<span class="err" id="eCnpj"></span></div>
|
||
<div class="cp"><label>WhatsApp <span class="obr" aria-hidden="true">*</span></label>
|
||
<input id="fZap" aria-required="true" autocomplete="off" 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 <span class="obr" aria-hidden="true">*</span></label>
|
||
<input id="fMail" aria-required="true" autocomplete="off" 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><svg class="ic" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M20 10c0 4.99-5.54 10.19-7.4 11.8a1 1 0 0 1-1.2 0C9.54 20.19 4 14.99 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/></svg>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><svg class="ic" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2"/><path d="M15 18H9"/><path d="M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.62l-3.48-4.35A1 1 0 0 0 17.52 8H14"/><circle cx="17" cy="18" r="2"/><circle cx="7" cy="18" r="2"/></svg>Receber em casa</b>
|
||
<span>Entrega pela Jadlog em todo o Brasil. Informe o CEP para ver o valor e o prazo.</span>
|
||
</div>
|
||
<em id="vFrete">—</em>
|
||
</button>
|
||
<div class="cep" id="cep">
|
||
<label>CEP de entrega <span class="obr" aria-hidden="true">*</span></label>
|
||
<div class="cepL">
|
||
<input id="cepIn" aria-required="true" autocomplete="off" inputmode="numeric" maxlength="9" placeholder="00000-000">
|
||
</div>
|
||
<p id="cepMsg"></p>
|
||
<div class="campos endereco" id="endereco">
|
||
<div class="cp larga"><label>Quem recebe <span class="obr" aria-hidden="true">*</span></label>
|
||
<input id="eNome" aria-required="true" autocomplete="off" maxlength="120" placeholder="Nome ou empresa"></div>
|
||
<div class="cp larga"><label>Rua / avenida <span class="obr" aria-hidden="true">*</span></label>
|
||
<input id="eRua" aria-required="true" autocomplete="off" maxlength="160"></div>
|
||
<div class="cp"><label>Número <span class="obr" aria-hidden="true">*</span></label>
|
||
<input id="eNum" aria-required="true" autocomplete="off" maxlength="20" placeholder="123 ou S/N"></div>
|
||
<div class="cp"><label>Complemento (opcional)</label>
|
||
<input id="eComp" autocomplete="off" maxlength="80"></div>
|
||
<div class="cp"><label>Bairro <span class="obr" aria-hidden="true">*</span></label>
|
||
<input id="eBairro" aria-required="true" autocomplete="off" maxlength="80"></div>
|
||
<div class="cp"><label>Cidade <span class="obr" aria-hidden="true">*</span></label>
|
||
<input id="eCidade" aria-required="true" autocomplete="off" maxlength="80"></div>
|
||
<div class="cp"><label>UF <span class="obr" aria-hidden="true">*</span></label>
|
||
<input id="eUf" aria-required="true" autocomplete="off" maxlength="2" placeholder="SP"></div>
|
||
</div>
|
||
</div>
|
||
</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"><svg class="ic" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M5 11h14a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2Z"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg><span id="bPagarTx">Ir para o pagamento</span></button>
|
||
<button id="bMais" class="sec">Continuar comprando</button>
|
||
</div>
|
||
<p class="envioArq" id="envioArq" role="status" aria-live="polite"></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">
|
||
<div class="pagCab">
|
||
<h3>Pagamento</h3>
|
||
<a href="/carrinho" class="pagVolta">Voltar ao carrinho</a>
|
||
</div>
|
||
<div class="pagGrid">
|
||
<div class="pagEsq">
|
||
<p id="checkoutStatus" class="avisoE" role="status" aria-live="polite"></p>
|
||
<div id="checkoutActions"></div>
|
||
</div>
|
||
<aside class="pagResumo" id="pagResumo" hidden></aside>
|
||
</div>
|
||
</div>
|
||
<div class="desfazer" id="desfazer" role="status" hidden>
|
||
<span id="desfazerTxt"></span><button type="button" id="desfazerBtn">Desfazer</button>
|
||
</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>
|