:root{
  --creme:#F5EDE3; --papel:#FBF6F0; --linha:#E6D6C6;
  --vinho:#7A1C3A; --vinho-2:#5A1229;
  --terracota:#C66E34; --terracota-2:#E3A36E;
  --acai:#2E0F28; --texto:#3A1C30; --suave:#8A7076;
  --ouro:#B08D57;
  --largura:480px;
  --nav:calc(16px + env(safe-area-inset-bottom));
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Jost",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{font-variant-numeric:lining-nums;font-family:var(--sans);background:#E9DDD0;color:var(--texto);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit;touch-action:manipulation}
input,textarea{font:inherit;font-size:16px}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:.01em;color:var(--vinho)}

.app{max-width:var(--largura);margin:0 auto;min-height:100dvh;padding-bottom:calc(var(--nav) + 8px);background:var(--creme)}

/* topo em faixa */
.topo{position:relative;z-index:3;display:block;height:128px;padding:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='26'%3E%3Cpath d='M22 1 43 13 22 25 1 13Z' fill='none' stroke='%237A1C3A' stroke-opacity='.32' stroke-width='1'/%3E%3C/svg%3E") 0 0/44px 26px repeat,var(--terracota)}
.faixa-fundo{position:absolute;left:0;right:0;bottom:-1px;height:36px}
.onda{display:block;width:100%;height:36px}
.onda .preenche{fill:var(--creme)}
.onda .fio{stroke:var(--vinho);stroke-width:1.6;opacity:.9}
.emblema{position:absolute;left:16px;bottom:-32px;width:124px;height:124px;color:var(--terracota);display:block;
  background:var(--creme);border-radius:50%;box-shadow:0 6px 16px -8px rgba(40,8,20,.5)}
.emblema svg{width:100%;height:100%}
.sacola{position:absolute;top:calc(40px + env(safe-area-inset-top));right:16px;width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;color:var(--vinho);background:rgba(251,246,240,.55);border:1px solid rgba(122,28,58,.45)}
.qtd{position:absolute;top:-2px;right:-2px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--vinho);color:var(--papel);font-size:.7rem;font-weight:600;display:grid;place-items:center}
.qtd[data-z]{display:none}
.pulse{animation:pulse .45s}
@keyframes pulse{50%{transform:scale(1.15)}}

/* divisórias de losangos */
.divisoria{display:flex;justify-content:center;gap:12px;padding:26px 0}
.divisoria i{width:20px;height:11px;background:var(--vinho);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.divisoria i:nth-child(2n){background:var(--terracota)}

/* capa */
.capa{text-align:center;padding:46px 16px 0}
.trio{position:relative;z-index:1;height:290px;max-width:330px;margin:0 auto}
.trio::before{content:"";position:absolute;left:50%;top:48%;width:288px;height:288px;margin:-144px 0 0 -144px;border-radius:50%;background:radial-gradient(circle,#F1DDC6 0 62%,rgba(241,221,198,0) 63%)}
.trio::after{content:"";position:absolute;left:50%;top:48%;width:302px;height:302px;margin:-151px 0 0 -151px;border-radius:50%;border:1px solid rgba(198,110,52,.35)}
.trio img{position:absolute;bottom:30px;filter:drop-shadow(0 16px 16px rgba(60,15,30,.28))}
.trio .c1{left:7%;height:68%;transform:rotate(-8deg)}
.trio .c2{left:50%;height:96%;transform:translateX(-50%);z-index:2}
.trio .c3{right:7%;height:71%;transform:rotate(8deg)}
.slogan{font-size:2.5rem;line-height:1.02;margin:6px 0 0}
.slogan em{display:block;font-style:italic;color:var(--terracota)}

/* título */
.titulo{text-align:center;padding:0 16px}
.titulo h2{font-size:1.5rem;display:flex;align-items:center;justify-content:center;gap:12px;text-transform:uppercase;letter-spacing:.22em;font-weight:600;color:var(--vinho)}
.orn{width:14px;height:9px;background:var(--terracota);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);display:inline-block;flex:none}
.regua{display:flex;align-items:center;gap:12px;margin:12px 0 0}
.regua::before,.regua::after{content:"";flex:1;border-top:2px dotted var(--terracota-2)}
.regua span{background:var(--terracota);color:var(--papel);font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:6px 16px;border-radius:999px}

/* tamanhos */
.tamanhos{display:grid;gap:10px;padding:16px 16px 0;scroll-margin-top:12px}
.tam{background:var(--papel);border:1px solid var(--linha);border-radius:14px;padding:12px 16px;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:10px;text-align:left;transition:border-color .15s,transform .1s}
.tam:active{transform:scale(.99)}
.tam .num{grid-area:1/1;font-family:var(--serif);font-weight:600;font-size:1.6rem;line-height:1.05;color:var(--vinho);white-space:nowrap}
.tam .num small{font-family:var(--sans);font-size:.7rem;font-weight:500;letter-spacing:.08em;margin-left:3px;color:var(--suave)}
.tam .det{grid-area:1/2;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--suave)}
.tam .valor{grid-area:1/3;font-family:var(--serif);font-weight:700;font-size:1.35rem;line-height:1.1;color:var(--terracota);white-space:nowrap;justify-self:end}
.tam:nth-child(2n){border-color:#E7D0D8}
.tam:nth-child(3){background:linear-gradient(180deg,#FBF6F0,#F7E7DA)}
.tam:nth-child(4){background:linear-gradient(180deg,#FCF6EA,#F2E6CE)}

/* grade de copos */
.copos{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px 16px 0}
.card{position:relative;border-radius:20px;overflow:hidden;background:linear-gradient(180deg,#FBF3EA 0%,#F0DFCF 100%);box-shadow:0 10px 24px -16px rgba(94,18,41,.45);text-align:left;display:flex;flex-direction:column}
.card .foto{position:relative;height:190px;display:grid;place-items:end center;padding-top:14px}
.card .foto::after{content:"";position:absolute;left:18%;right:18%;bottom:8px;height:14px;border-radius:50%;background:radial-gradient(ellipse,rgba(60,20,30,.28),transparent 70%)}
.card img{position:relative;z-index:1;height:172px;width:auto;margin-bottom:12px;filter:drop-shadow(0 10px 10px rgba(60,15,30,.22));transition:transform .25s}
.card:active img{transform:scale(1.04)}
.card .preco{position:absolute;top:10px;left:10px;z-index:2;font-family:var(--serif);font-weight:700;font-size:1.15rem;color:var(--vinho);background:rgba(251,246,240,.9);border:1px solid var(--linha);border-radius:999px;padding:1px 11px}
.card .rotulo{display:block;padding:11px 8px;text-align:center;font-weight:600;font-size:.98rem;letter-spacing:.16em;text-transform:uppercase;color:var(--papel);background:var(--vinho)}
.card:nth-child(4n+2) .rotulo,.card:nth-child(4n+3) .rotulo{background:var(--terracota)}

/* extras */
.extras{padding:0 16px;display:grid;gap:12px}
.faixa{display:flex;align-items:center;gap:14px;background:var(--papel);border:1px solid var(--linha);border-radius:20px;padding:12px 14px;text-align:left;width:100%}
.faixa .ic{width:64px;height:64px;border-radius:50%;border:1px solid var(--terracota-2);display:grid;place-items:center;flex:none;color:var(--terracota);overflow:hidden;background:#F7ECE1}
.faixa .ic img{height:58px;margin-top:8px}
.faixa h3{font-size:1.45rem;line-height:1.05}
.faixa p{font-size:.9rem;color:var(--suave)}
.faixa .txt{flex:1;min-width:0}
.faixa .seta{width:44px;height:44px;border-radius:50%;background:var(--vinho);color:var(--papel);display:grid;place-items:center;flex:none}

/* preferidos dos clientes */
.preferidos{padding:0 0 10px}
.preferidos h2{font-size:1.05rem;display:flex;align-items:center;justify-content:center;gap:12px;text-transform:uppercase;letter-spacing:.16em;font-weight:600;color:var(--vinho);margin-bottom:16px;padding:0 16px}
.preferidos h2 span{white-space:nowrap}
.esteira{overflow:hidden;touch-action:pan-y;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.esteira::-webkit-scrollbar{display:none}
.trilha{display:flex;align-items:flex-end;gap:14px;width:max-content;padding:0 16px}
.pref{position:relative;flex:none;width:158px;height:202px;margin:0;display:grid;place-items:end center}
.pref::before{content:"";position:absolute;left:50%;top:50%;width:132px;height:132px;margin:-48px 0 0 -66px;border-radius:50%;background:var(--terracota)}
.pref img{position:relative;height:196px;width:auto;pointer-events:none}

footer{text-align:center;padding:28px 16px 12px;color:var(--suave);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase}
.losangos{display:flex;justify-content:center;gap:10px;margin-bottom:30px}
.losangos i{width:18px;height:10px;background:var(--vinho);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.losangos i:nth-child(2){background:var(--terracota)}

/* rodapé flutuante de finalizar pedido */
.barra-pedido{position:fixed;left:50%;bottom:0;z-index:50;width:min(var(--largura),100%);transform:translateX(-50%);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(245,237,227,0),var(--creme) 28%)}
.barra-pedido[hidden]{display:none}
.barra-pedido button{width:100%;height:56px;border-radius:16px;background:var(--vinho);color:var(--papel);
  display:flex;align-items:center;justify-content:space-between;padding:0 20px;box-shadow:0 10px 24px -14px rgba(60,15,30,.9);transition:transform .1s}
.barra-pedido button:active{transform:scale(.98)}
.bp-txt{font-weight:600;font-size:.95rem;letter-spacing:.1em;text-transform:uppercase}
.bp-tot{font-family:var(--serif);font-weight:700;font-size:1.3rem}
body.com-barra .app{padding-bottom:calc(var(--nav) + 76px)}

/* telas */
.tela{position:fixed;top:0;bottom:0;left:50%;width:min(var(--largura),100%);z-index:60;background:var(--creme);display:flex;flex-direction:column;transform:translateX(calc(-50% + 100vw));transition:transform .34s cubic-bezier(.2,.8,.2,1);visibility:hidden}
.tela.on{transform:translateX(-50%);visibility:visible}
.t-topo{display:grid;grid-template-columns:48px 1fr 48px;align-items:center;justify-items:center;padding:calc(8px + env(safe-area-inset-top)) 12px 8px;font-family:var(--serif);font-size:1.35rem;font-weight:600;color:var(--vinho);border-bottom:1px solid var(--linha);background:var(--creme)}
.voltar{justify-self:start;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:var(--vinho)}
.t-corpo{flex:1;overflow:auto;padding:0 16px 16px;-webkit-overflow-scrolling:touch}
.t-fim{padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--papel);border-top:1px solid var(--linha)}
.principal{width:100%;height:56px;border-radius:16px;background:var(--vinho);color:var(--papel);font-weight:600;font-size:1rem;letter-spacing:.1em;text-transform:uppercase;transition:transform .1s,opacity .2s}
.principal:active{transform:scale(.98)}
.principal:disabled{opacity:.4}
.principal.escuro{background:var(--acai)}

/* montar */
.topo-tela{position:absolute;top:0;left:0;right:0;height:126px;z-index:5;pointer-events:none;background:none}
.topo-tela::before{content:"";position:absolute;inset:0;z-index:-1;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='26'%3E%3Cpath d='M22 1 43 13 22 25 1 13Z' fill='none' stroke='%237A1C3A' stroke-opacity='.32' stroke-width='1'/%3E%3C/svg%3E") 0 0/44px 26px repeat,var(--terracota);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 126' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H390 V126 C 300 120 250 94 150 94 H0 Z' fill='black'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 126' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H390 V126 C 300 120 250 94 150 94 H0 Z' fill='black'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.topo-tela .onda .preenche{fill:none}
.topo-tela .sacola{pointer-events:auto;top:calc(46px + env(safe-area-inset-top))}
.emblema-copo{bottom:-20px;left:14px;width:100px;height:100px}
.emblema-copo img{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);height:150px;width:auto;max-width:none;filter:drop-shadow(0 12px 12px rgba(60,15,30,.3))}
#telaMontar .t-corpo{padding-top:170px}
.grupo{padding:18px 0}
.grupo .regua{margin:0 0 14px}
.grupo .regua span small{font-size:.66rem;font-weight:500;letter-spacing:.1em;opacity:.78;margin-left:4px}
.chips{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.chip{min-height:54px;padding:6px 10px;border-radius:16px;border:1px solid #DCC6B2;background:var(--papel);font-size:.9rem;line-height:1.2;color:var(--texto);display:grid;place-items:center;text-align:center;transition:background .15s,color .15s,border-color .15s}
.chip:last-child:nth-child(odd){grid-column:1 / -1;width:calc(50% - 5px);justify-self:center}
.chip[aria-pressed=true]{background:var(--vinho);border-color:var(--vinho);color:var(--papel)}
.chip:disabled{opacity:.35}
textarea{width:100%;border:1px solid #DCC6B2;border-radius:14px;padding:12px 14px;background:var(--papel);color:var(--texto);outline:none;resize:none}
textarea:focus,.dados input:focus{border-color:var(--terracota)}
.qtdbox{margin:0 auto;width:max-content;display:flex;align-items:center;border:1px solid #DCC6B2;border-radius:999px;background:var(--papel)}
.qtdbox button{width:48px;height:46px;font-size:1.4rem;color:var(--vinho)}
.qtdbox span{min-width:24px;text-align:center;font-weight:600;font-size:1.05rem}

/* doces */
.lista .regua{margin:22px 0 14px}
.linha{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--linha);min-height:64px}
.linha .nm{flex:1;font-size:1rem}
.linha .pr{font-family:var(--serif);font-weight:700;font-size:1.25rem;color:var(--terracota)}
.linha .mais{width:44px;height:44px;border-radius:50%;border:1px solid var(--vinho);color:var(--vinho);font-size:1.4rem;display:grid;place-items:center;transition:background .15s,color .15s}
.linha .mais:active{background:var(--vinho);color:var(--papel)}
.linha .n-sac{min-width:22px;font-size:.8rem;font-weight:600;color:var(--terracota);text-align:center}

/* sacola */
.s-item{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:start;padding:14px 0;border-bottom:1px solid var(--linha)}
.s-item img{width:52px;height:66px;object-fit:contain}
.s-item .ic{width:52px;height:52px;border-radius:50%;background:#F0E1D2;display:grid;place-items:center;font-family:var(--serif);font-weight:700;font-size:1.4rem;color:var(--vinho)}
.s-item h4{font-weight:600;font-size:1rem}
.s-item p{font-size:.85rem;color:var(--suave);line-height:1.4}
.s-item .dir{text-align:right}
.s-item .dir b{display:block;font-family:var(--serif);font-size:1.2rem;color:var(--vinho)}
.s-item .rm{font-size:.8rem;color:var(--suave);text-decoration:underline;padding:8px 0 0 8px}
.vazio{text-align:center;padding:36px 10px 10px;color:var(--suave)}
.vazio .copo{position:relative;height:190px;display:grid;place-items:center;margin-bottom:12px}
.vazio .copo::before{content:"";position:absolute;left:50%;top:50%;width:150px;height:150px;transform:translate(-50%,-50%);border-radius:50%;background:var(--terracota)}
.vazio img{position:relative;height:186px;width:auto;margin:0 auto}
.dados{padding-top:12px}
.dados label{display:block;font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--suave);margin:12px 0 6px}
.dados input{width:100%;height:52px;border:1px solid #DCC6B2;border-radius:14px;padding:0 14px;background:var(--papel);color:var(--texto);outline:none}
.dados input[type=datetime-local]{width:100%;color-scheme:light}
.retira{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:.85rem;color:var(--suave);letter-spacing:.06em}
.retira::before{content:"";width:12px;height:8px;background:var(--terracota);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.total span{font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;color:var(--suave)}
.total b{font-family:var(--serif);font-size:2rem;color:var(--vinho)}
.erro{background:#F7E1E1;color:#8E1B1B;border-radius:12px;padding:10px 12px;font-size:.9rem;margin-top:10px;display:none}

/* aviso e confirmação */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%,10px);background:var(--acai);color:var(--papel);padding:10px 20px;border-radius:999px;font-size:.9rem;letter-spacing:.02em;opacity:0;transition:.2s;z-index:90;pointer-events:none;white-space:nowrap}
.toast.on{opacity:1;transform:translate(-50%,0)}
.tela.on ~ .toast{top:calc(76px + env(safe-area-inset-top));bottom:auto}
.modal{position:fixed;inset:0;z-index:95;display:none;align-items:flex-end;justify-content:center;background:rgba(46,15,40,.55)}
.modal.on{display:flex}
.modal .box{width:min(var(--largura),100%);background:var(--terracota);border-radius:28px 28px 0 0;text-align:center;padding:24px 20px calc(20px + env(safe-area-inset-bottom))}
.modal img{height:150px;margin:0 auto 6px;filter:drop-shadow(0 12px 12px rgba(60,15,30,.25))}
.modal h3{font-size:2rem;color:var(--vinho)}
.cod{display:inline-block;font-family:var(--serif);font-weight:700;font-size:2.6rem;color:var(--vinho);background:rgba(251,246,240,.55);border:1px solid var(--vinho);border-radius:16px;padding:0 22px;margin:8px 0}
.modal p{color:#5A1229;margin:4px 0 18px}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* pagamento dentro do app */
.pg-resumo{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 14px;padding:12px 14px;background:var(--papel);border:1px solid var(--linha);border-radius:14px}
.pg-resumo span{font-size:.9rem;color:var(--suave)}
.pg-resumo b{font-family:var(--serif);font-size:1.3rem;color:var(--vinho)}
.pg-carregando{text-align:center;color:var(--suave);font-size:.9rem;padding:24px 0}
.pix{text-align:center;padding-bottom:16px}
.pix img{width:min(260px,72%);margin:16px auto;border:1px solid var(--linha);border-radius:16px;background:#fff;padding:10px}
.pix-aviso{font-size:.85rem;color:var(--suave);margin-top:12px;line-height:1.45}
#erroPagar{display:none;color:#B42318;font-size:.9rem;margin:12px 0 4px;text-align:center}
.pg-escolha{display:grid;gap:12px;margin-top:4px}
.pg-opcao{display:flex;align-items:center;gap:14px;text-align:left;width:100%;padding:16px;border:1px solid var(--linha);border-radius:18px;background:var(--papel);transition:border-color .15s,transform .1s}
.pg-opcao:active{transform:scale(.99)}
.pg-ic{width:48px;height:48px;flex:none;border-radius:50%;display:grid;place-items:center;color:var(--papel);background:var(--vinho)}
.pg-opcao:last-child .pg-ic{background:var(--terracota)}
.pg-txt b{display:block;font-family:var(--serif);font-size:1.4rem;color:var(--vinho);line-height:1.1}
.pg-txt small{font-size:.85rem;color:var(--suave)}
.pix-codigo{font-family:ui-monospace,monospace;font-size:.72rem;line-height:1.5;color:var(--suave);word-break:break-all;background:var(--papel);border:1px solid var(--linha);border-radius:12px;padding:10px;margin:12px 0}