:root{
  --page:#fdfaec; --band:#f6f1d8; --ink:#000000; --ink-2:#4a4a4a; --line:#000000; --card:#ffffff;
  --yellow:#EBCA00; --yellow-dark:#d6b800;
  --ok-bg:#e3f1d3; --ok-ink:#1f4a05; --warn-bg:#fbe4e8; --warn-ink:#7d2433; --warn-line:#e9b3bd;
  --photo:#e8e3c9; --focus:#0b57d0;
  --edge:#000000; --glow:rgba(235,202,0,.55); --glow-warn:rgba(226,128,150,.5); --ok-bar:#5b9a2a; --warn-bar:#c25b6e; --track:rgba(0,0,0,.09);
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--page);color:var(--ink);font-family:"Barlow","Segoe UI",Arial,sans-serif;font-size:1.0625rem;line-height:1.5}
.wrap{width:min(1080px,100% - 40px);margin-inline:auto}
.display{font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif;font-style:italic;font-weight:800;letter-spacing:.005em;line-height:1}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.hero :focus-visible,footer :focus-visible{outline-color:#fff}
.join :focus-visible{outline-color:#000}

.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;gap:8px;font:inherit;font-weight:700;font-size:1.0625rem;line-height:1.2;padding:12px 16px;background:var(--yellow);color:#000;border:2px solid #000;border-radius:6px;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--yellow-dark)}
.btn.small{padding:8px 12px;font-size:.9375rem}
.btn.dark{background:#000;color:var(--yellow)}
.btn.dark:hover{background:#222}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:var(--band)}
.btn.wa{background:#25D366;color:#000}
.btn.wa:hover{background:#1fb857}
.ico{width:1.3em;height:1.3em;flex:none;fill:currentColor}

.prev{background:var(--band);color:var(--ink);font-size:.875rem;text-align:center;padding:6px 12px;border-bottom:1px solid var(--line)}
.top{background:#fdfaec}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0}
.top img{width:clamp(140px,40vw,270px);height:auto;display:block}
@media(max-width:360px){.top img{width:42vw}}

.hero{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .6 0 0 0 0 .6 0 0 0 0 .62 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") #36383b;color:#fff;padding:52px 0 62px;position:relative}
.plate{display:inline-block;background:var(--yellow);color:#000;font-weight:700;padding:6px 14px;border-radius:2px;margin:0 0 18px}
.hero h1{font-size:clamp(2rem,8.6vw,4.8rem);margin:0 0 22px;max-width:13em;overflow-wrap:break-word}
.hl{color:var(--yellow);text-shadow:0 2px 3px rgba(0,0,0,.45),0 0 26px rgba(235,202,0,.30),0 0 60px rgba(235,202,0,.14)}
.hero .lead{max-width:48em;color:#e8e8e4;margin:0 0 24px;font-size:1.125rem}
.road{position:absolute;left:0;right:0;bottom:0;height:13px;overflow:hidden}
.road::before{content:'';position:absolute;top:0;bottom:0;left:-40px;right:-40px;transform:skewX(-35deg);transform-origin:0 0;background:linear-gradient(90deg,transparent 0 58px,rgba(235,202,0,0) 58px,rgba(235,202,0,.3) 77px,var(--yellow) 78px 203px) 0 0/203px 100% repeat-x}   /* faixas inclinadas com rastro leve */
.road.topo{top:0;bottom:auto}
.seg{display:inline-flex;border:2px solid #fff;border-radius:6px;overflow:hidden;margin-bottom:18px}
.seg button{font:inherit;font-weight:700;font-size:1.125rem;padding:10px 22px;background:transparent;color:#fff;border:0;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--yellow);color:#000}
.finder{background:#fdfaec;color:#000;border-radius:6px;padding:16px;display:grid;gap:12px;grid-template-columns:1fr;max-width:780px}
@media(min-width:720px){.finder{grid-template-columns:1.7fr 1fr auto;align-items:end}}
.finder .hint{grid-column:1/-1;margin:0;font-size:.9375rem;color:#4a4a4a}
.finder .hint:empty{display:none}
.field label,.field .lab{display:block;font-weight:600;margin-bottom:4px;font-size:.9375rem}
.field input,.field textarea{width:100%;font:inherit;padding:11px 12px;border:2px solid var(--line);border-radius:6px;background:var(--card);color:var(--ink)}
.finder .field input,.join .field input{background:#fff;color:#000;border-color:#000}
.combo{position:relative}
.sugg{position:absolute;left:0;right:0;top:100%;margin:4px 0 0;padding:0;list-style:none;background:#fff;color:#000;border:2px solid #000;border-radius:6px;z-index:20;max-height:300px;overflow:auto}
.sugg li button{width:100%;text-align:left;font:inherit;padding:10px 12px;background:#fff;color:#000;border:0;border-bottom:1px solid #ddd;cursor:pointer;display:flex;justify-content:space-between;gap:8px;align-items:center}
.sugg li[aria-selected="true"] button,.sugg li button:hover{background:#fff4b8}
.sugg .none{padding:12px;font-size:.9375rem}
.sugg .none a{color:#000;font-weight:700}

.sec{padding:52px 0}
.sec.alt{background:var(--band)}
.sec h2{font-size:clamp(2rem,5.5vw,2.8rem);margin:0 0 6px}
.sec .sub{color:var(--ink-2);margin:0 0 24px;max-width:40em}
.sec h2+.steps,.sec h2+#faqList,.sec h2+.grid,.sec h2+#dealGrid{margin-top:24px}
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.card,.deal{border:2px solid transparent;border-radius:10px;display:flex;flex-direction:column;
  background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(145deg,var(--yellow) 0%,var(--edge) 42%,var(--edge) 100%) border-box;
  box-shadow:0 0 0 1px rgba(235,202,0,.22),0 12px 36px -12px var(--glow),0 0 26px -6px var(--glow);
  transition:box-shadow .25s ease,transform .25s ease}
.card:hover,.deal:hover{box-shadow:0 0 0 1px rgba(235,202,0,.4),0 16px 44px -10px var(--glow),0 0 34px -4px var(--glow)}
.card .photo{height:128px;background:var(--photo);border-radius:8px 8px 0 0;border-bottom:2px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink-2);font-size:.875rem}
.body{padding:14px;display:flex;flex-direction:column;gap:10px;flex:1}
.body h3{font-size:1.9rem;margin:0}
.body>.btn{margin-top:auto;width:100%}
.meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tag{border:1.5px solid var(--line);border-radius:3px;padding:1px 8px;font-size:.875rem;font-weight:600;white-space:nowrap}
.cos{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.cos .lbl{font-size:.875rem;color:var(--ink-2);margin-right:2px}
.co{position:relative;width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;font-size:1.25rem;background:var(--band);color:var(--ink);border:2px solid var(--line);border-radius:4px;cursor:pointer;padding:0}
.co::after{content:attr(data-name);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:#000;color:#fff;font-family:"Barlow",Arial,sans-serif;font-style:normal;font-weight:600;font-size:.8125rem;line-height:1.2;padding:5px 9px;border-radius:4px;white-space:nowrap;opacity:0;pointer-events:none;z-index:10}
.co:hover::after,.co:focus-visible::after,.co.show::after{opacity:1}
@media(max-width:480px){.cos .lbl{width:100%}}

.deal.ok .st{background:var(--ok-bg);color:var(--ok-ink)}
.deal.warn{background:linear-gradient(var(--warn-bg),var(--warn-bg)) padding-box,linear-gradient(145deg,#f0a0b2 0%,var(--warn-line) 42%,var(--warn-line) 100%) border-box;box-shadow:0 0 0 1px rgba(226,128,150,.25),0 12px 36px -12px var(--glow-warn),0 0 26px -6px var(--glow-warn)}
.deal.warn:hover{box-shadow:0 0 0 1px rgba(226,128,150,.4),0 16px 44px -10px var(--glow-warn),0 0 34px -4px var(--glow-warn)}
.deal.warn .st{color:var(--warn-ink);border-bottom:1px solid var(--warn-line)}
.deal.warn .body h3,.deal.warn .cos .lbl{color:var(--warn-ink)}
.deal .st{padding:12px 14px;display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap;border-radius:8px 8px 0 0}
.deal .st strong{font-size:1.75rem;line-height:1.05}
.deal .st span{font-weight:700}
.deal .img{height:140px;background:var(--photo);display:flex;align-items:center;justify-content:center;color:var(--ink-2);font-size:.875rem}

.cd{margin-top:2px}
.cd-row{display:flex;align-items:center;gap:7px;font-size:.875rem;color:var(--ink-2)}
.cd-row svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cd-row b{font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--ink)}
.cd-bar{height:4px;border-radius:999px;background:var(--track);margin-top:7px;overflow:hidden}
.cd-bar i{display:block;height:100%;border-radius:999px;width:100%;transition:width 1s linear}
.deal.ok .cd-bar i{background:var(--ok-bar)}
.deal.warn .cd-bar i{background:var(--warn-bar)}
.tier{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding-top:10px}
.tier .w{font-weight:600}
.tier .price{font-size:2.1rem;white-space:nowrap}
.body .tier .btn{width:auto;margin-top:0}
.note{font-size:.875rem;color:var(--ink-2);margin:0}

:root{--n:52px}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--g,34px);max-width:640px}
.steps li{position:relative;padding-left:calc(var(--n) + 22px);min-height:var(--n);display:flex;align-items:center}
.steps .num{position:absolute;left:0;top:0;width:var(--n);height:var(--n);background:var(--yellow);color:#000;display:flex;align-items:center;justify-content:center;font-size:2rem;border:2px solid #000;border-radius:4px;z-index:1}
.steps li:not(:last-child)::before{content:"";position:absolute;left:calc((var(--n) - 12px) / 2);top:calc(var(--n) - 2px);bottom:calc(var(--g,34px) * -1 - 2px);width:12px;background:var(--ink)}
.steps li:not(:last-child)::after{content:"";position:absolute;left:calc((var(--n) - 2px) / 2);top:calc(var(--n) + 2px);bottom:calc(var(--g,34px) * -1 + 2px);width:2px;background:repeating-linear-gradient(180deg,var(--yellow) 0 7px,transparent 7px 12px)}
.steps strong{display:block;font-size:1.5rem;line-height:1.25}

.join{background:var(--yellow);color:#000;padding:52px 0}
.join h2{font-size:clamp(2rem,5.5vw,3rem);margin:0 0 22px;max-width:20em}
.jgrid{display:grid;gap:16px;max-width:720px}
.join .field label,.join .field .lab{color:#000}
.pick{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:720px){.pick{grid-template-columns:1fr 1fr;align-items:start}}
.sel{background:#fff;color:#000;border:2px solid #000;border-radius:6px;padding:12px;min-height:96px}
.sel-title{font-weight:700;margin:0 0 8px}
.sel ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.sel li{display:inline-flex;align-items:center;gap:4px;background:#000;color:var(--yellow);border-radius:999px;padding:4px 6px 4px 12px;font-weight:600;font-size:.9375rem}
.sel li button{background:transparent;color:inherit;border:0;font-size:1.3rem;line-height:1;cursor:pointer;padding:0 6px}
.sel li.empty{background:transparent;color:#4a4a4a;padding:0;font-weight:400}
.check{display:flex;gap:10px;align-items:flex-start}
.consent-note{margin:0;font-size:.9375rem}
.consent-note a{color:#000;font-weight:700;text-decoration:underline;text-underline-offset:3px}
#cancelView{min-height:55vh}
.cancel-box{max-width:460px;display:grid;gap:14px}
.cancel-box .msg{margin:0;font-weight:600;min-height:1.5em}
.check input{width:22px;height:22px;margin-top:2px;flex:none;accent-color:#000}
.jmsg{margin:0;font-weight:600;min-height:1.5em}

.faq details{border-top:2px solid var(--line)}
.faq details:last-of-type{border-bottom:2px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:18px 44px 18px 0;font-weight:700;font-size:1.25rem;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:1.7rem;font-weight:500}
.faq details[open] summary::after{content:"\2212"}
.faq .ans{margin:0 0 22px;padding:20px 24px;max-width:38em;font-size:1.125rem;font-weight:500;line-height:1.7;color:#2b1d0d}
.faq .ans p{margin:0 0 .6em}
.faq .ans p:last-child,.faq .ans li:last-child{margin-bottom:0}
.faq .ans ul{margin:0;padding-left:1.2em}
.faq .ans li{margin:0 0 .7em}
.faq .ans strong{font-weight:700;color:#000}
.faq .more{margin-top:22px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}

footer{background:#000;color:#fff;padding:22px 0 calc(16px + env(safe-area-inset-bottom,0px))}
footer .cols{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
footer h3{color:var(--yellow);font-size:1.4rem;margin:0 0 4px}
footer p{margin:0 0 4px}
footer .fname{font-size:1.9rem;margin:0;color:var(--yellow)}
footer .fsub{color:#c4a800;font-weight:600}
footer .links{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
footer .link{color:#fff;background:none;border:0;padding:0;font:inherit;text-decoration:underline;cursor:pointer;text-align:left}
footer .fine{margin-top:14px;color:#bdbdb6;font-size:.875rem}

.fab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:30;display:flex;align-items:center;justify-content:center;width:62px;height:62px;padding:0;background:#25D366;color:#fff;border:2px solid #000;border-radius:50%;cursor:pointer}
.fab:hover{background:#1fb857}
.fab .ico{width:36px;height:36px}

dialog{border:2px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);padding:22px;width:min(480px,calc(100% - 32px))}
dialog::backdrop{background:rgba(0,0,0,.6)}
dialog h3{font-size:1.8rem;margin:0 0 8px}
dialog p{margin:0 0 8px}
.quote{background:var(--band);border-left:6px solid var(--yellow);padding:10px 12px;margin:12px 0}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
dialog .msg{margin-top:10px;font-weight:600;min-height:1.5em}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.card,.deal{transition:none}}
.co img{width:100%;height:100%;object-fit:cover;border-radius:2px;display:block}
.top img{max-width:100%}
.nodata{color:var(--ink-2);margin:0}
.dimg{width:100%;height:150px;object-fit:cover;display:block}
.co{width:auto;min-width:46px}
.co img{width:auto;min-width:0}
.co.larga{padding:4px 8px;background:#fff}
.co.larga img{object-fit:contain}

/* Selo de conexão: borda arredondada e luz azul bem suave por trás */
:root{--conx-bg:#f6fbff;--conx-ink:#17324d;--conx-edge:#b4d8f6;--conx-glow:rgba(125,190,245,.5)}
.conx{display:inline-block;max-width:100%;background:var(--conx-bg);color:var(--conx-ink);border:1.5px solid var(--conx-edge);border-radius:999px;padding:4px 14px;font-size:.9375rem;font-weight:600;line-height:1.3;box-shadow:0 0 0 3px rgba(125,190,245,.12),0 0 16px 2px var(--conx-glow)}
.sugg .conx{font-size:.8125rem;padding:2px 10px;box-shadow:0 0 8px 1px var(--conx-glow);white-space:nowrap}
.meta{padding:2px 0}
.sugg li button{flex-wrap:wrap;row-gap:4px}
.sugg li button>span:first-child{white-space:nowrap}
.co .co-txt{font-size:.75rem;font-weight:700;padding:0 6px;line-height:1.1;font-family:"Barlow",Arial,sans-serif;font-style:normal}

/* Logos padronizadas: todas no mesmo quadro (112 x 52), a imagem se ajusta por dentro sem distorcer */
.co,.co.larga{width:112px;min-width:0;height:52px;padding:3px 5px;background:#fff;overflow:hidden}
.co img,.co.larga img{width:100%;height:100%;object-fit:contain;border-radius:0}
.co .co-txt{padding:0}

/* Foto no topo do card de encomenda */
.card>.dimg{border-radius:8px 8px 0 0;border-bottom:2px solid var(--line)}

/* Cupom: a regra do desconto, em amarelo, encostado na foto. Valor grande, condição pequena. */
.deal .body .oferta{align-self:flex-start;max-width:100%;display:flex;align-items:stretch;background:var(--yellow);color:#000;border:2px solid #000;border-radius:6px;overflow:hidden}
.deal .dimg + .body > .oferta:first-child{margin-top:-30px;position:relative;z-index:2}
.oferta .val{display:flex;align-items:center;font-size:2.3rem;line-height:1;padding:6px 12px;border-right:2px dashed #000}
.oferta .cond{display:flex;flex-direction:column;justify-content:center;padding:6px 12px 6px 10px;font-size:.8125rem;font-weight:600;line-height:1.15}
.oferta .cond strong{font-size:1.0625rem;font-weight:800}

/* Cupons da mesma cidade: um card atrás do outro, com as bordas aparecendo à esquerda */
.pile{position:relative;display:flex;flex-direction:column}
.pile>.deal{flex:1;position:relative;z-index:5}
.pile .ghost{position:absolute;z-index:calc(5 - var(--i));left:calc(var(--i) * -7px);right:calc(var(--i) * 7px);top:calc(var(--i) * 6px);bottom:calc(var(--i) * 6px);border:2px solid transparent;border-radius:10px;
  background:linear-gradient(var(--ghost, var(--card)),var(--ghost, var(--card))) padding-box,linear-gradient(145deg,var(--yellow) 0%,var(--edge) 50%,var(--edge) 100%) border-box}
.pile .ghost:nth-child(2){--ghost:var(--band)}
@media (prefers-reduced-motion:no-preference){
  .deal.sobe{animation:sobe .26s ease-out}
}
@keyframes sobe{from{transform:translateX(-14px) scale(.985)}to{transform:none}}

/* Exemplos nas caixas (cinza claro, letra fina) */
input::placeholder,textarea::placeholder{color:#a0a0a0;opacity:1;font-weight:400}
.dwrap{position:relative}
.dwrap input{min-height:48px;text-align:left}
.dwrap input::-webkit-date-and-time-value{text-align:left}
.dwrap .ph{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#a0a0a0;pointer-events:none;display:none}
.dwrap input.vazio + .ph{display:block}
.dwrap input.vazio::-webkit-datetime-edit{color:transparent}
@media (hover:hover) and (pointer:fine){
  .dwrap input.vazio:focus::-webkit-datetime-edit{color:inherit}
  .dwrap input.vazio:focus + .ph{display:none}
}
@supports (-moz-appearance:none){.dwrap input.vazio + .ph{display:none}}

/* Empresas: um card por empresa, com busca de cidade */
.empbusca{max-width:520px;margin:0 0 14px}
.empbusca input{width:100%;font:inherit;padding:12px 14px;border:2px solid #000;border-radius:6px;background:#fff;color:#000}
.empres{margin:0 0 14px;font-weight:600}
.empres:empty{display:none}
.grid.emps{grid-template-columns:repeat(auto-fill,minmax(260px,340px))}
.emp{cursor:pointer}
.emp-logo{height:108px;background:#fff;border-bottom:2px solid var(--line);border-radius:8px 8px 0 0;display:flex;align-items:center;justify-content:center;padding:14px}
.emp-logo img{max-width:100%;max-height:100%;object-fit:contain}
.emp-logo span{font-weight:700;font-size:1.4rem}
.emp .body h3{font-size:2rem}
.emp-n{margin:0;color:var(--ink-2)}
.emp-atende p{margin:0 0 4px;font-size:.875rem;color:var(--ink-2)}
.emp-atende ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.emp-atende li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-weight:600}
.emp-atende .mais{margin:4px 0 0}
.empvazio{max-width:520px;background:#fff;border:2px solid #000;border-radius:10px;padding:18px;display:grid;gap:12px}
.empvazio p{margin:0}
.finder{transition:box-shadow .4s ease}
.finder.flash{box-shadow:0 0 0 5px var(--yellow)}

/* Pop-up com as cidades da empresa */
html:has(dialog[open]){overflow:hidden}
dialog.sheet{padding:0;width:min(560px,calc(100% - 24px));max-height:min(86vh,720px);max-height:min(86dvh,720px);border:2px solid #000;border-radius:16px;overflow:hidden;background:var(--page)}
dialog.sheet[open]{display:flex;flex-direction:column}
.sheet-head{display:flex;align-items:center;gap:14px;padding:16px;background:#000;border-bottom:6px solid var(--yellow)}
.sheet-logo{width:92px;height:58px;flex:none;background:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:6px}
.sheet-logo img{max-width:100%;max-height:100%;object-fit:contain}
.sheet-logo span{font-weight:700;font-size:.9rem;text-align:center;line-height:1.1}
.sheet-tit{min-width:0}
.sheet-tit h3{font-size:1.9rem;margin:0;color:var(--yellow);overflow-wrap:anywhere}
.sheet-tit p{margin:2px 0 0;color:#d9d9d4;font-size:.9375rem}
.sheet-x{margin-left:auto;width:44px;height:44px;flex:none;font-size:1.8rem;line-height:1;background:transparent;color:#fff;border:2px solid #fff;border-radius:50%;cursor:pointer}
.sheet-x:hover{background:#222}
.sheet-busca{padding:12px 16px;background:var(--band);border-bottom:1px solid var(--line)}
.sheet-busca input{width:100%;font:inherit;padding:11px 12px;border:2px solid #000;border-radius:6px;background:#fff;color:#000}
.sheet-lista{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.sheet-lista .vazio{padding:22px 16px;margin:0;color:var(--ink-2)}
.uf{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:10px;margin:0;padding:10px 16px 8px;background:var(--page);border-bottom:1px solid var(--line);font:inherit}
.uf .sigla{background:var(--yellow);color:#000;font-weight:800;font-size:.875rem;padding:2px 8px;border-radius:2px}
.uf .ufnome{font-weight:700}
.uf .ufn{margin-left:auto;color:var(--ink-2);font-size:.875rem}
.cid{width:100%;min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;padding:10px 16px;font:inherit;font-weight:600;color:var(--ink);background:transparent;border:0;border-bottom:1px solid rgba(0,0,0,.1);cursor:pointer}
.cid:hover{background:#fff4b8}
.cid > span:first-child{flex:1;min-width:0}
.cid .cr{flex:none;display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.cid .conx{font-size:.8125rem;padding:2px 10px;white-space:nowrap;box-shadow:0 0 8px 1px var(--conx-glow)}
.cid i{font-style:normal;font-size:1.5rem;line-height:1;color:var(--ink-2)}
.sheet-rodape{margin:0;padding:10px 16px;border-top:1px solid var(--line);background:var(--band);font-size:.875rem;color:var(--ink-2)}
@media (prefers-reduced-motion:no-preference){
  dialog.sheet[open]{animation:subir .22s ease-out}
}
@keyframes subir{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}

/* Campo-isca contra robôs: fica fora da tela e ninguém preenche */
.isca{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Logos dos cards: sem borda preta, só uma sombra bem leve para a caixa branca não sumir */
.co,.co.larga{border:0;border-radius:8px;overflow:visible;box-shadow:0 0 0 1px rgba(0,0,0,.07),0 1px 3px rgba(0,0,0,.10)}
.emp-logo{border-bottom:1px solid rgba(0,0,0,.10)}

/* Botão "Ver cidades": arredondado, azul-petróleo, sem preto e amarelo */
.btn.ver{background:#f4f9fe;color:#2b5576;border:2px solid #d3e5f4;border-radius:999px;padding:10px 20px;
  font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif;font-style:italic;font-weight:700;font-size:1.3rem;letter-spacing:.01em;line-height:1.1;
  transition:background .2s ease,color .2s ease,border-color .2s ease}
.btn.ver::after{content:"\203A";margin-left:8px;font-size:1.4em;line-height:.8}
.btn.ver:hover,.btn.ver:focus-visible{background:#e2effa;color:#1f4463;border-color:#aacbe6}

/* Cards das empresas: borda e luz em azul bem claro, combinando com o botão "Ver cidades" */
.card.emp{background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(145deg,#f3f9fd 0%,#d6e7f5 45%,#c6dcee 100%) border-box;
  box-shadow:0 0 0 1px rgba(170,205,235,.14),0 10px 24px -16px rgba(140,185,225,.38)}
.card.emp:hover{box-shadow:0 0 0 1px rgba(170,205,235,.24),0 12px 28px -14px rgba(140,185,225,.48)}

/* Selo "Também leva encomendas": borda arredondada */
.tag{border-radius:999px;padding:2px 12px}

/* Como funciona e cadastro lado a lado (a partir de 900 px); no celular ficam um embaixo do outro */
.duo-grid{display:grid;gap:28px;align-items:start}
@media (min-width:900px){
  .duo-grid:has(> #cadastro:not([hidden])){grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:44px;align-items:stretch}
}
.duo-cad.join{padding:26px;border:2px solid #000;border-radius:16px}
.duo-como{padding-top:28px}
/* os dois títulos: mesmo tamanho, um pouco mais leves e com um traço de "estrada" embaixo */
.duo h2.display{font-size:clamp(2rem,5.5vw,2.8rem);font-weight:700;letter-spacing:.01em;max-width:none;margin:0 0 24px}
.duo-cad .jgrid{max-width:none}
.duo-cad .pick{grid-template-columns:1fr}
.duo-cad .jmsg:empty{display:none}
/* etapa 0: separada das outras (sem a "estrada" ligando) e com uma luz bem leve */
.step0{display:flex;align-items:center;gap:22px;margin:0 0 32px}
.step0 .num{width:var(--n);height:var(--n);flex:none;display:flex;align-items:center;justify-content:center;font-size:2rem;background:var(--yellow);color:#000;border:2px solid #000;border-radius:4px;box-shadow:0 0 0 3px rgba(235,202,0,.55)}
.step0 strong{font-size:1.5rem;line-height:1.25}
@media (min-width:900px){
  /* o "Como funciona" estica até a altura do cadastro, com as etapas distribuídas */
  .duo-grid:has(> #cadastro:not([hidden])) .duo-como{display:flex;flex-direction:column}
  .duo-grid:has(> #cadastro:not([hidden])) .duo-como .steps{--g:0px;flex:1;display:flex;flex-direction:column;max-width:none}
  .duo-grid:has(> #cadastro:not([hidden])) .duo-como .steps li{flex:1 1 0;min-height:calc(var(--n) + 20px);align-items:flex-start}
  .duo-grid:has(> #cadastro:not([hidden])) .duo-como .steps li:last-child{flex:0 0 auto;min-height:var(--n)}
  .duo-grid:has(> #cadastro:not([hidden])) .duo-como .steps strong{padding-top:11px}
}
@media (min-width:1100px){
  .duo-cad .pick{grid-template-columns:1fr 1fr;align-items:start}
}

/* Luz dos cards mais fraca */
:root{--glow:rgba(235,202,0,.30);--glow-warn:rgba(226,128,150,.28)}
.card,.deal{box-shadow:0 0 0 1px rgba(235,202,0,.12),0 10px 24px -16px var(--glow),0 0 14px -8px var(--glow)}
.card:hover,.deal:hover{box-shadow:0 0 0 1px rgba(235,202,0,.20),0 12px 28px -14px var(--glow),0 0 18px -6px var(--glow)}
.deal.warn{box-shadow:0 0 0 1px rgba(226,128,150,.14),0 10px 24px -16px var(--glow-warn),0 0 14px -8px var(--glow-warn)}
.deal.warn:hover{box-shadow:0 0 0 1px rgba(226,128,150,.24),0 12px 28px -14px var(--glow-warn),0 0 18px -6px var(--glow-warn)}

/* ---------- Fundo do site: um degradê só, atrás de todas as faixas (sem emendas).
   O ponto mais amarelo (--pico) fica no meio do "Como funciona"; dali para baixo volta, em ordem inversa, ao creme do começo. */
.top{background:transparent}
main{--pico:55%;background:linear-gradient(180deg,#fffdf7 0%,#fdf8e3 calc(var(--pico) * .5),#fbf3d6 var(--pico),#fdf8e3 calc(var(--pico) + (100% - var(--pico)) * .5),#fffdf7 100%)}
main .sec,main .sec.alt{background:transparent}

/* Pop-up das cidades: mesmas cores do cartão da empresa (azul bem branco) */
dialog.sheet{border:2px solid #c6dcee;background:#fcfeff;box-shadow:0 24px 60px -26px rgba(60,100,140,.45)}
.sheet-head{background:#eef6fc;border-bottom:3px solid #d6e7f5}
.sheet-tit h3{color:#1f4463}
.sheet-tit p{color:#5b7a95}
.sheet-logo{box-shadow:0 0 0 1px rgba(0,0,0,.07),0 1px 3px rgba(0,0,0,.10)}
.sheet-x{color:#2b5576;background:#fff;border:2px solid #c6dcee}
.sheet-x:hover{background:#e2effa}
.sheet-busca{background:#f7fbfe;border-bottom:1px solid #e1edf7}
.sheet-busca input{border:2px solid #c6dcee}
.uf{background:#fcfeff;border-bottom:1px solid #e6f0f8}
.uf .sigla{background:#dcebf7;color:#1f4463}
.cid{border-bottom:1px solid #e9f1f8}
.cid:hover{background:#eef6fc}
.cid i{color:#9dbdd8}
.sheet-rodape{background:#f7fbfe;border-top:1px solid #e1edf7}

/* Botão do WhatsApp ao lado da logo: maior, mas bem menor que a logo */
.top .btn.wa{padding:12px 20px;font-size:1.125rem;gap:10px}
.top .btn.wa .ico{width:1.5em;height:1.5em}
@media (max-width:600px){.top .btn.wa{padding:9px 16px;font-size:1.0625rem}.top .btn.wa .ico{width:1.4em;height:1.4em}}
@media (max-width:380px){.top .btn.wa{padding:8px 14px;font-size:1rem}}
@media (max-width:340px){.top img{width:44vw}.top .btn.wa{padding:7px 11px;font-size:.9375rem}}

/* Pop-up das cidades: estados que recolhem e expandem */
.uf{display:block;padding:0}
.uf-btn{display:flex;align-items:center;gap:10px;width:100%;min-height:46px;padding:10px 16px 8px;font:inherit;color:var(--ink);text-align:left;background:transparent;border:0;cursor:pointer}
.uf-btn:hover{background:#eef6fc}
.uf-seta{font-style:normal;font-size:1.1rem;line-height:1;color:#6f93b1;transition:transform .2s ease}
.uf-btn[aria-expanded="false"] .uf-seta{transform:rotate(-90deg)}
@media (prefers-reduced-motion:reduce){.uf-seta{transition:none}}

/* Página da política de privacidade */
.priv{padding:40px 0 64px;background:#fffdf7}
.priv .wrap{width:min(720px,100% - 40px)}
.priv h1{font-size:clamp(2.2rem,6vw,3rem);margin:0 0 6px}
.priv .priv-data{color:var(--ink-2);margin:0 0 24px;font-size:.9375rem}
.priv h2{font-size:1.5rem;line-height:1.2;margin:30px 0 8px}
.priv p{margin:0 0 12px;line-height:1.7;font-size:1.0625rem}

/* Título do cadastro: sininho preto (avisos) antes da palavra */
.titulo-cad{display:flex;align-items:center;gap:.3em}
.titulo-cad .sino{width:1em;height:1em;flex:none;border-radius:50%;background:#000;color:var(--yellow);display:grid;place-items:center}
.titulo-cad .sino svg{width:.58em;height:.58em}

/* Carrossel das empresas: 3 cards principais e, dos lados, um pedaço do anterior e do próximo (menores e meio transparentes) */
.emp-car{position:relative}
.emp-trilho{position:relative;overflow:hidden;touch-action:pan-y;height:360px}
.emp-trilho .emp{position:absolute;left:0;top:16px;margin:0;transform-origin:50% 50%;
  transition:transform .5s cubic-bezier(.4,.1,.2,1),opacity .5s ease,box-shadow .25s ease}
.emp-trilho .emp[data-pos="esq"],.emp-trilho .emp[data-pos="dir"]{cursor:pointer}
.emp-trilho .emp[data-pos="esq"]:hover,.emp-trilho .emp[data-pos="dir"]:hover{opacity:.8!important}
.emp-trilho .emp[data-pos="oculto"]{visibility:hidden;pointer-events:none;transition:transform .5s cubic-bezier(.4,.1,.2,1),opacity .5s ease,visibility 0s linear .5s}
@media (prefers-reduced-motion:reduce){.emp-trilho .emp,.emp-trilho .emp[data-pos="oculto"]{transition:none}}
.emp-seta{position:absolute;top:50%;z-index:5;width:44px;height:44px;margin-top:-22px;display:none;place-items:center;border-radius:50%;background:#fff;color:#2b5576;border:2px solid #c6dcee;font-size:1.7rem;line-height:1;padding:0 0 3px;cursor:pointer;box-shadow:0 4px 12px -4px rgba(60,100,140,.35)}
.emp-seta.esq{left:6px}.emp-seta.dir{right:6px}
.emp-seta:hover:not(:disabled){background:#eef6fc;border-color:#9fc2e0}
@media (min-width:640px){
  .emp-car.com-controles .emp-seta{display:grid}
}
.emp-pontos{display:flex;align-items:center;justify-content:center;margin-top:-8px}
.emp-pontos .mini{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:50%;background:#fff;color:#2b5576;border:2px solid #c6dcee;font-size:1.5rem;line-height:1;padding:0 0 2px;margin:0 8px;cursor:pointer}
@media (min-width:640px){.emp-pontos .mini{display:none}}
.emp-pontos .pts{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;max-width:72%}
.pt{width:20px;height:20px;display:grid;place-items:center;background:none;border:0;padding:0;cursor:pointer}
@media (max-width:639px){.pt{width:16px}.emp-pontos .mini{margin:0 4px}.emp-pontos .pts{max-width:78%}}
.pt::before{content:"";width:7px;height:7px;border-radius:50%;background:#9fc2e0;opacity:.45;transition:width .2s,height .2s,opacity .2s,background .2s}
.pt.on::before{width:12px;height:12px;background:#4f84ad;opacity:1}
@media (prefers-reduced-motion:reduce){.pt::before{transition:none}}

/* Respostas do FAQ: fundo de papel antigo (papel claro, manchas e pontinhos de tempo), sem rolo e sem madeira */
.faq .ans{
  --papel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .26 0 0 0 0 .09 0 0 0 9 -6.9'/%3E%3C/filter%3E%3Crect width='360' height='360' filter='url(%23f)'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='720'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0055' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .52 0 0 0 0 .34 0 0 0 0 .12 0 0 0 .3 -.08'/%3E%3C/filter%3E%3Crect width='720' height='720' filter='url(%23m)'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .38 0 0 0 0 .24 0 0 0 0 .08 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E"),radial-gradient(ellipse at 50% 45%,#fefcf2 0%,#fcf7e3 60%,#f8f0d3 100%);
  --manchas:
    radial-gradient(circle at 14% 32%,rgba(150,98,36,0.120) 0,rgba(150,98,36,0.055) 10px,rgba(150,98,36,0) 28px),
    radial-gradient(circle at 83% 20%,rgba(140,90,32,0.100) 0,rgba(140,90,32,0.035) 14px,rgba(140,90,32,0) 34px),
    radial-gradient(ellipse at 68% 74%,rgba(140,90,32,0) 0 36px,rgba(140,90,32,0.085) 40px 45px,rgba(140,90,32,0) 56px),
    radial-gradient(circle at 36% 88%,rgba(150,98,36,0.080) 0,rgba(150,98,36,0) 22px);
  position:relative;padding-bottom:22px;
  background:var(--manchas),var(--papel);
  border:1px solid rgba(122,82,32,0.190);
  border-radius:8px 14px 9px 15px / 14px 8px 15px 9px;
  box-shadow:inset 0 0 30px rgba(125,78,22,0.110),0 8px 16px -10px rgba(60,35,10,.38);
}
/* cada pergunta ganha manchas em lugares diferentes */
.faq details:nth-of-type(3n+2) .ans{--manchas:
    radial-gradient(circle at 86% 36%,rgba(150,98,36,0.115) 0,rgba(150,98,36,0.050) 11px,rgba(150,98,36,0) 30px),
    radial-gradient(circle at 22% 14%,rgba(140,90,32,0.095) 0,rgba(140,90,32,0.030) 16px,rgba(140,90,32,0) 36px),
    radial-gradient(ellipse at 26% 70%,rgba(140,90,32,0) 0 30px,rgba(140,90,32,0.080) 34px 39px,rgba(140,90,32,0) 50px),
    radial-gradient(circle at 70% 90%,rgba(150,98,36,0.075) 0,rgba(150,98,36,0) 24px);}
.faq details:nth-of-type(3n) .ans{--manchas:
    radial-gradient(circle at 50% 12%,rgba(150,98,36,0.100) 0,rgba(150,98,36,0.040) 12px,rgba(150,98,36,0) 32px),
    radial-gradient(circle at 10% 64%,rgba(140,90,32,0.110) 0,rgba(140,90,32,0.040) 12px,rgba(140,90,32,0) 30px),
    radial-gradient(ellipse at 80% 58%,rgba(140,90,32,0) 0 32px,rgba(140,90,32,0.075) 36px 41px,rgba(140,90,32,0) 54px),
    radial-gradient(circle at 58% 86%,rgba(150,98,36,0.085) 0,rgba(150,98,36,0) 26px);}
.faq .ans strong{color:#1a1004}
.faq .ans li::marker{color:#7a5220}
@media (prefers-reduced-motion:no-preference){
  .faq details[open] .ans{animation:desenrola .42s ease-out}
}
@keyframes desenrola{from{clip-path:inset(0 -14px 100% -14px);opacity:.35}to{clip-path:inset(0 -14px -14px -14px);opacity:1}}

/* ---------- Review: acabamento dos cards ---------- */
/* palco da logo nos cards das empresas: um pouco mais de espaço e fundo levemente frio, logo maior e nítida */
.emp-logo{height:118px;padding:16px 20px;background:#fff;border-bottom:1px solid #e3edf6}   /* branco puro: logos com fundo branco (JPG) encaixam sem caixinha */
.emp-logo img{max-height:84px;width:auto;max-width:100%;object-fit:contain}
.emp-logo span{font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif;font-style:italic;font-weight:800;font-size:2rem;color:#2b5576}
.emp .body{gap:8px}
.emp .body h3{font-size:1.85rem}
/* card de desconto ou encomenda sem foto: no lugar do branco, um pedaço de "estrada" (igual ao topo do site) */
.dimg.sem-foto{height:150px;background:
  linear-gradient(90deg,transparent 0 19px,var(--yellow) 19px 107px,transparent 107px 126px) 0 50%/126px 7px repeat-x,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .6 0 0 0 0 .6 0 0 0 0 .62 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
  #36383b}
.deal .dimg.sem-foto{border-radius:0}

/* cidades com muitas empresas: mostra as 4 primeiras e o botão "+N" abre as outras */
.cos:not(.aberto) .co.extra{display:none}
.co.mais{width:auto;min-width:46px;padding:0 10px;font:700 .9375rem "Barlow",Arial,sans-serif;font-style:normal;color:#2b5576;background:#f1f7fd;cursor:pointer}
/* iPhone: a caixa de data não pode passar da largura do quadro */
.finder>*,.finder .field{min-width:0}
.dwrap input[type=date]{display:block;width:100%;min-width:0;max-width:100%;box-sizing:border-box;-webkit-appearance:none;appearance:none}

/* enquanto as cidades chegam do banco */
.sugg .carregando-cid{color:#7a7462;animation:pisca 1.2s ease-in-out infinite}
@keyframes pisca{50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.sugg .carregando-cid{animation:none}}