/* Link público de agendamento (pensado primeiro para o celular) */
body{background:radial-gradient(700px 420px at 50% -120px,rgba(92,242,200,.13),transparent 70%),var(--bg)}
.tela{width:min(520px,100%);margin:0 auto;padding:20px 16px 32px;display:flex;flex-direction:column;gap:18px;min-height:calc(100vh - 70px)}
.carregando{display:flex;align-items:center;gap:12px;justify-content:center;color:var(--muted);padding:80px 0}
.pulso-anim{width:10px;height:10px;border-radius:50%;background:var(--pulse);box-shadow:0 0 0 0 rgba(92,242,200,.6);animation:pul 1.4s infinite}
@keyframes pul{70%{box-shadow:0 0 0 14px rgba(92,242,200,0)}100%{box-shadow:0 0 0 0 rgba(92,242,200,0)}}

/* Cabeçalho do negócio */
.neg{display:flex;align-items:center;gap:14px}
.neg-av{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font:600 18px var(--f-display);color:var(--on);background:linear-gradient(135deg,var(--pulse),var(--violet));flex:none}
.neg h1{font:600 22px/1.2 var(--f-display);letter-spacing:-.03em}
.neg p{font-size:13px;color:var(--muted)}
.etapas{display:flex;gap:6px}.etapas i{flex:1;height:3px;border-radius:2px;background:var(--line2);transition:background .3s}.etapas i.on{background:var(--pulse)}
.cab{display:flex;align-items:center;gap:10px}
.cab h2{font:600 19px var(--f-display);letter-spacing:-.02em}
.voltar{width:36px;height:36px;border-radius:12px;border:1px solid var(--line2);background:var(--raised);display:grid;place-items:center;cursor:pointer;flex:none}

/* Serviços */
.lista{display:flex;flex-direction:column;gap:10px}
.serv{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:16px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(180deg,var(--raised),var(--surface));cursor:pointer;transition:border-color .15s,transform .15s}
.serv:hover{border-color:var(--line2)} .serv:active{transform:scale(.99)}
.serv[aria-pressed=true]{border-color:var(--pulse);box-shadow:0 0 0 1px var(--pulse) inset}
.serv .nm{font-weight:600}.serv .dur{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px}
.serv .pr{margin-left:auto;font:500 15px var(--f-mono);text-align:right}
.cat{margin-top:6px}

/* Profissionais */
.pros{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.pro{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:76px;padding:12px 8px;border-radius:14px;border:1px solid var(--line);background:var(--surface);cursor:pointer;font-size:12px;color:var(--muted)}
.pro .av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font:600 13px var(--f-ui);color:var(--on)}
.pro[aria-pressed=true]{border-color:var(--pulse);color:var(--tx);background:rgba(92,242,200,.08)}

/* Dias e horários */
.dias{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;scroll-snap-type:x mandatory}
.dia{flex:none;width:58px;padding:10px 0;border-radius:14px;border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;scroll-snap-align:start}
.dia .sem{font:500 10px var(--f-mono);letter-spacing:.1em;color:var(--dim)}
.dia .num{font:600 18px var(--f-display)}
.dia[disabled]{opacity:.35;cursor:not-allowed}
.dia[aria-pressed=true]{background:var(--pulse);border-color:var(--pulse);color:var(--on)}.dia[aria-pressed=true] .sem{color:var(--on)}
.horas{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.hr{padding:11px 0;border-radius:12px;border:1px solid var(--line2);background:var(--raised);font:500 14px var(--f-mono);cursor:pointer}
.hr:hover{border-color:var(--pulse)}
.hr[aria-pressed=true]{background:var(--pulse);color:var(--on);border-color:var(--pulse)}
.turno{font-size:12px;color:var(--dim);margin:6px 0 -2px}
.vazio{padding:22px;text-align:center;color:var(--muted);border:1px dashed var(--line2);border-radius:14px;font-size:14px}

/* Resumo e barra de ação fixa */
.resumo{display:flex;flex-direction:column;gap:10px;padding:16px}
.resumo .lin{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.resumo .lin span:first-child{color:var(--muted)}
.resumo .total{border-top:1px solid var(--line);padding-top:10px;font-weight:600}
.barra{position:sticky;bottom:0;margin:auto -16px -32px;padding:14px 16px calc(14px + env(safe-area-inset-bottom));background:linear-gradient(180deg,transparent,var(--bg) 30%);display:flex;flex-direction:column;gap:8px}
.barra .btn{width:100%}
.nota{font-size:12px;color:var(--dim);text-align:center}

/* Pix */
.pix{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.qr{width:220px;height:220px;padding:12px;border-radius:18px;background:#fff;display:grid;place-items:center;box-shadow:0 20px 60px -20px rgba(92,242,200,.4)}
.qr img,.qr svg{width:100%;height:100%;image-rendering:pixelated}
.cronometro{font:500 26px var(--f-mono);color:var(--amber)}
.copia{display:flex;gap:8px;width:100%;align-items:center;padding:10px 12px;border-radius:12px;border:1px solid var(--line2);background:var(--bg);font:12px var(--f-mono);color:var(--muted)}
.copia span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.esperando{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.selo-demo{font-size:12px;color:var(--amber);background:rgba(255,194,92,.1);border:1px solid rgba(255,194,92,.3);padding:8px 12px;border-radius:10px}

/* Confirmado */
.ok{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding-top:18px}
.ok-ic{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:rgba(92,242,200,.12);color:var(--pulse);border:1px solid rgba(92,242,200,.35);animation:surge .5s ease-out}
.ok-ic.ruim{background:rgba(255,110,134,.12);color:var(--coral);border-color:rgba(255,110,134,.35)}
@keyframes surge{from{transform:scale(.6);opacity:0}}
.ok h2{font:600 24px/1.2 var(--f-display);letter-spacing:-.03em}
.botoes{display:flex;flex-direction:column;gap:8px;width:100%}
.botoes .btn{width:100%}

.assina{display:flex;justify-content:center;padding:18px 16px 24px;opacity:.7}
.assina .logo{font:500 12px var(--f-ui);gap:8px;color:var(--muted)}.assina .logo svg{width:18px;height:18px}
@media (min-width:640px){.tela{padding-top:48px}}
.cab h2:focus,h2[tabindex="-1"]:focus{outline:none}