:root{
  --bg:#0c0b0a; --card:#151413; --card2:#1d1b19; --line:#2b2825; --txt:#f3efe7; --mut:#9b958a;
  --gold:#e6dcc4; --gold2:#f6efe0; --goldbg:rgba(236,226,204,.12); --ok:#4cb07c; --okbg:rgba(76,176,124,.14);
  --warn:#e0a43c; --red:#e2604f;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--txt);font-family:Inter,system-ui,sans-serif;font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;overflow-x:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:disabled{cursor:default}
input,textarea,select{font:inherit}
a{color:inherit}
.bebas{font-family:"Bebas Neue",Impact,sans-serif;letter-spacing:.04em;font-weight:400}
.hint{font-size:12px;color:var(--mut)}
.hint b{color:var(--gold2)}

.demo-tag{display:block;text-align:center;font-size:11px;font-weight:700;letter-spacing:.06em;padding:5px 9px;background:var(--warn);color:#1a1205}

/* topo */
.hero{position:relative;padding:44px 16px 30px;text-align:center;background-color:#141516;
  background-image:radial-gradient(ellipse at 50% 30%,rgba(255,255,255,.09) 0%,rgba(0,0,0,0) 55%),linear-gradient(180deg,#1b1c1e 0%,#0c0c0d 100%);
  border-bottom:1px solid var(--line)}
/* logo branca com fundo transparente */
.brand{display:block;width:min(300px,78vw);height:auto;margin:0 auto 22px;filter:drop-shadow(0 6px 18px rgba(0,0,0,.6))}
.logo{width:150px;height:150px;margin:0 auto 18px;border-radius:50%;border:2px solid var(--gold);display:grid;place-items:center;background:#0b0a09;box-shadow:0 0 0 6px rgba(236,226,204,.08),0 18px 40px rgba(0,0,0,.6);overflow:hidden}
.logo{position:relative}
.logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;background:#0b0a09}
.logo .t{font-size:36px;line-height:.9}
.logo .s{font-size:10px;letter-spacing:.35em;color:var(--gold);font-weight:700;margin-top:4px}
.logo svg{display:block;margin:6px auto 0}
.hero h1{font-size:15px;font-weight:500;color:var(--mut);max-width:380px;margin:0 auto}
.hero h1 b{color:var(--txt)}
.chips-info{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}
.chip-i{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(12,11,10,.7);text-decoration:none}
.chip-i svg{width:14px;height:14px;stroke:var(--gold);fill:none;stroke-width:2}
.next{margin:20px auto 0;max-width:420px;display:flex;align-items:center;gap:12px;text-align:left;padding:12px 14px;border-radius:14px;background:var(--goldbg);border:1px solid rgba(236,226,204,.35)}
.next:empty{display:none}
.next .dot{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px var(--okbg);flex:none}
.next small{display:block;color:var(--mut);font-size:12px}
.next b{font-weight:700}
.next button{margin-left:auto;background:var(--gold);color:#17130b;font-weight:700;font-size:13px;padding:8px 12px;border-radius:10px;flex:none}
/* ofertas (promoções em horários vazios) */
.ofertas{max-width:420px;margin:12px auto 0;display:grid;gap:10px;text-align:left}
.ofertas:empty{display:none}
.oferta{padding:13px 14px;border-radius:14px;background:linear-gradient(135deg,rgba(236,226,204,.22),rgba(236,226,204,.06));border:1px solid rgba(236,226,204,.55)}
.of-h{display:flex;align-items:center;gap:8px;font-size:15px}
.of-h b{color:var(--gold2)}
.of-tag{font-size:10.5px;font-weight:800;letter-spacing:.08em;padding:3px 7px;border-radius:6px;background:var(--gold);color:#17130b}
.oferta p{font-size:13px;color:var(--mut);margin:6px 0 10px;line-height:1.5}
.oferta p b{color:var(--txt)}
.oferta s{color:var(--mut)}
.of-times{display:flex;flex-wrap:wrap;gap:6px}
.of-times button{padding:7px 10px;border-radius:9px;background:rgba(12,11,10,.75);border:1px solid rgba(236,226,204,.45);font-size:12.5px;font-weight:700}
.of-times button:hover{border-color:var(--gold)}
.time.promo{border-color:rgba(236,226,204,.6);background:var(--goldbg)}
.time small{display:block;font-size:10px;font-weight:800;color:var(--gold2);margin-top:1px}
.time.on small{color:#3d2f10}
.repeat{display:block;margin:14px auto 0;font-size:13.5px;font-weight:600;color:var(--gold2);text-decoration:underline;text-underline-offset:3px}
.repeat-box{display:none;max-width:420px;margin:10px auto 0;gap:8px}
.repeat-box.show{display:flex}
.repeat-box input{flex:1;min-width:0;padding:11px 12px;border-radius:10px;background:#0e0d0c;border:1.5px solid var(--line);color:var(--txt);outline:none}
.repeat-box input:focus{border-color:var(--gold)}
.repeat-box button{background:var(--gold);color:#17130b;font-weight:700;padding:0 16px;border-radius:10px}

/* passos */
.wrap{max-width:720px;margin:0 auto;padding:0 16px 140px}
.step{padding-top:30px}
.step-h{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
.step-h .n{font-size:15px;color:var(--gold);font-weight:800}
.step-h h2{font-size:26px}
.step-h .sel{margin-left:auto;font-size:12.5px;color:var(--mut);text-align:right}
.step.locked{opacity:.35;pointer-events:none}

.pros{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:10px}
.pro{background:var(--card);border:1.5px solid var(--line);border-radius:16px;padding:14px 6px 12px;text-align:center;transition:.15s}
.pro:hover{border-color:#4a443c}
.pro.on{border-color:var(--gold);background:var(--goldbg)}
.av{width:62px;height:62px;border-radius:50%;margin:0 auto 9px;display:grid;place-items:center;font-size:24px;color:#17130b;background:linear-gradient(140deg,var(--gold2),var(--gold));overflow:hidden;flex:none}
.av img{width:100%;height:100%;object-fit:cover}
.av.any{background:var(--card2);color:var(--gold);border:1.5px dashed #4a443c;font-family:Inter;font-size:22px}
.pro b{display:block;font-size:14px}
.pro small{display:block;font-size:11.5px;color:var(--mut);margin-top:2px}

.tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:12px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;padding:8px 14px;border-radius:999px;border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--mut);background:var(--card)}
.tab.on{background:var(--txt);color:#111;border-color:var(--txt)}
.svcs{display:grid;gap:8px}
.svc{display:flex;align-items:center;gap:12px;text-align:left;background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:13px 14px;transition:.15s}
.svc:hover{border-color:#4a443c}
.svc.on{border-color:var(--gold);background:var(--goldbg)}
.svc .ic{width:40px;height:40px;border-radius:11px;background:var(--card2);display:grid;place-items:center;flex:none}
.svc .ic svg{width:20px;height:20px;stroke:var(--gold);fill:none;stroke-width:1.8}
.svc .tx{flex:1;min-width:0}
.svc b{display:block;font-size:14.5px;font-weight:600}
.svc small{color:var(--mut);font-size:12.5px}
.svc .pr{font-weight:700;font-size:15px;white-space:nowrap}
.tag{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:6px;background:var(--goldbg);color:var(--gold2);margin-left:6px;vertical-align:1px}

.qty{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:14px}
.qty span{color:var(--mut);font-size:13px;margin-right:4px}
.qty button{width:42px;height:36px;border-radius:10px;border:1.5px solid var(--line);background:var(--card);font-weight:700}
.qty button.on{background:var(--gold);border-color:var(--gold);color:#17130b}
.qty small{width:100%;color:var(--mut);font-size:12px}
.days{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
.days::-webkit-scrollbar{display:none}
.day{flex:none;width:62px;padding:10px 0;border-radius:14px;background:var(--card);border:1.5px solid var(--line);text-align:center}
.day small{display:block;font-size:11px;font-weight:700;color:var(--mut);letter-spacing:.06em}
.day b{display:block;font-size:22px;font-family:"Bebas Neue";font-weight:400;letter-spacing:.03em;line-height:1.15}
.day i{display:block;font-style:normal;font-size:10.5px;color:var(--ok)}
.day i.full{color:var(--red)}
.day.on{border-color:var(--gold);background:var(--gold);color:#17130b}
.day.on small,.day.on i{color:#3d2f10}
.day:disabled{opacity:.35}
.period{font-size:12px;font-weight:700;color:var(--mut);letter-spacing:.08em;margin:16px 0 8px}
.times{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:8px}
.time{padding:10px 0;border-radius:11px;background:var(--card);border:1.5px solid var(--line);font-weight:600;font-size:14.5px}
.time:hover{border-color:#4a443c}
.time.on{background:var(--gold);border-color:var(--gold);color:#17130b}
.empty{padding:22px;text-align:center;color:var(--mut);background:var(--card);border-radius:14px;border:1px dashed var(--line)}
.empty a{display:inline-block;margin-top:10px;color:var(--gold);font-weight:700;text-decoration:none}

.form{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;display:grid;gap:12px}
.field label{display:block;font-size:12px;font-weight:600;color:var(--mut);margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;padding:13px 14px;border-radius:11px;background:#0e0d0c;border:1.5px solid var(--line);color:var(--txt);outline:none}
.field textarea{min-height:70px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--gold)}
.welcome{display:none;padding:11px 13px;border-radius:12px;background:var(--okbg);border:1px solid rgba(76,176,124,.35);font-size:13.5px}
.welcome.show{display:block}
.pix{display:none;padding:13px;border-radius:12px;background:var(--goldbg);border:1px solid rgba(236,226,204,.35);font-size:13px}
.pix.show{display:block}
.pix b{color:var(--gold2)}
.copy{margin-top:8px;font-size:12.5px;font-weight:700;color:var(--gold2);border:1px solid rgba(236,226,204,.45);padding:6px 10px;border-radius:8px}

.bar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(14,13,12,.94);border-top:1px solid var(--line);backdrop-filter:blur(10px);padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
.bar-in{max-width:720px;margin:0 auto;display:flex;align-items:center;gap:12px}
.bar .sum{flex:1;min-width:0;font-size:13px;color:var(--mut)}
.bar .sum b{display:block;color:var(--txt);font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cta{background:var(--gold);color:#17130b;font-weight:800;padding:13px 18px;border-radius:12px;font-size:14.5px;flex:none;text-decoration:none;text-align:center}
.cta:disabled{background:#3a352d;color:#7d766a}
.cta.ghost{background:var(--card);color:var(--txt);border:1px solid var(--line)}
.cta.red{background:transparent;color:var(--red);border:1px solid rgba(226,96,79,.45)}

/* confirmação */
.done{display:none;max-width:520px;margin:0 auto;padding:60px 16px 60px}
.done.show{display:block}
.ok-ic{width:66px;height:66px;border-radius:50%;background:var(--okbg);display:grid;place-items:center;margin:0 auto 14px}
.ok-ic svg{width:32px;height:32px;stroke:var(--ok);fill:none;stroke-width:2.6}
.ok-ic.warn{background:rgba(224,164,60,.14)}
.ok-ic.warn svg{stroke:var(--warn)}
.ok-ic.red{background:rgba(226,96,79,.14)}
.ok-ic.red svg{stroke:var(--red)}
.done h2{text-align:center;font-size:36px}
.done .lead{text-align:center;color:var(--mut);margin-bottom:20px}
.ticket{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.ticket .top{padding:16px;display:flex;gap:14px;align-items:center;border-bottom:1.5px dashed var(--line)}
.ticket .top .av{margin:0;width:52px;height:52px;font-size:20px}
.ticket .rows{padding:6px 16px 14px}
.ticket .r{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid #222;font-size:14px}
.ticket .r:last-child{border:0}
.ticket .r span{color:var(--mut);flex:none}
.ticket .r b{text-align:right}
.acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-top:12px}
.acts .cta{padding:12px 6px;font-size:13.5px}
.box{margin-top:16px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px}
.box h3{font-size:20px;margin-bottom:10px}
.stamps{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:6px 0 10px}
.stamp{aspect-ratio:1;border-radius:50%;border:1.5px dashed #4a443c;display:grid;place-items:center}
.stamp svg{width:55%;height:55%;fill:none;stroke:#4a443c;stroke-width:1.8}
.stamp.f{border:0;background:var(--gold)}
.stamp.f svg{stroke:#17130b}
.stamp.gift{border-color:var(--gold)}
.stamp.gift svg{stroke:var(--gold)}

.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(20px);opacity:0;background:var(--txt);color:#111;padding:11px 16px;border-radius:12px;font-size:13.5px;font-weight:600;z-index:90;transition:.25s;pointer-events:none;max-width:calc(100% - 32px);text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{background:var(--red);color:#fff}
.loading{padding:60px 16px;text-align:center;color:var(--mut)}
footer{text-align:center;font-size:12px;color:#5d584f;padding:24px 16px 120px}

@media (max-width:420px){.step-h h2{font-size:23px}.av{width:54px;height:54px;font-size:21px}}
