diff --git a/frontend/views/plugins/SalasPlugin.tsx b/frontend/views/plugins/SalasPlugin.tsx
index 86177f0..25a9e4b 100644
--- a/frontend/views/plugins/SalasPlugin.tsx
+++ b/frontend/views/plugins/SalasPlugin.tsx
@@ -337,6 +337,17 @@ const ReservaModal: React.FC<{ sala: Sala; onClose: () => void; onReserved: () =
   const ocupadasDoDia = diaSel ? ocupadas.filter(o => new Date(o.inicio).toDateString() === diaSel.toDateString()) : [];
   const rangeFim = diaSel ? (() => { const d = new Date(diaSel); d.setDate(d.getDate() + (f.modelo === 'mensal' ? 29 : 6)); return d; })() : null;
 
+  // ── Wizard (4 passos, formato slide) ──
+  const [step, setStep] = useState(0);
+  const [formaPagamento, setFormaPagamento] = useState('pix');
+  const STEPS = ['Dados', 'Calendário', 'Resumo', 'Pagamento'];
+  const FORMAS: Record<string, string> = { pix: 'PIX', dinheiro: 'Dinheiro', transferencia: 'Transferência', cartao: 'Cartão' };
+  const modeloLabel = MODELOS.find(m => m.id === f.modelo)?.label || '';
+  const total = (() => {
+    const m = MODELOS.find(x => x.id === f.modelo); const v = m ? Number(sala[m.valor]) : NaN;
+    return Number.isFinite(v) ? (f.modelo === 'hora' ? v * Math.max(1, qtd) : v) : 0;
+  })();
+
   // Modelo padrão = 1º disponível.
   useEffect(() => { if (modelosDisp.length && !modelosDisp.some(m => m.id === f.modelo)) setF(p => ({ ...p, modelo: modelosDisp[0].id })); /* eslint-disable-next-line */ }, []);
   // Recalcula início/fim conforme dia + modelo + horário.
@@ -369,7 +380,8 @@ const ReservaModal: React.FC<{ sala: Sala; onClose: () => void; onReserved: () =
       const res = await apiFetch(`/api/salas/${sala.id}/reservas`, {
         method: 'POST',
         body: JSON.stringify({
-          inicio: new Date(f.inicio).toISOString(), fim: new Date(f.fim).toISOString(), modelo: f.modelo, observacoes: f.observacoes || null,
+          inicio: new Date(f.inicio).toISOString(), fim: new Date(f.fim).toISOString(), modelo: f.modelo,
+          observacoes: [f.observacoes, `Forma de pagamento: ${FORMAS[formaPagamento] || formaPagamento}`].filter(Boolean).join(' · ') || null,
           clinicaId: comoUnidade && ws?.id ? ws.id : null,
           profissionalUsuarioId: comoUnidade && profissionalId ? profissionalId : null,
         }),
@@ -385,152 +397,231 @@ const ReservaModal: React.FC<{ sala: Sala; onClose: () => void; onReserved: () =
 
   return (
     <div className="fixed inset-0 bg-black/60 z-50 flex items-center justify-center backdrop-blur-sm p-4">
-      <div className="bg-white rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden max-h-[92vh] overflow-y-auto">
-        <div className="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
-          <div>
-            <h3 className="text-sm font-black text-gray-900 uppercase">RESERVAR {sala.nome}</h3>
-            <p className="text-[10px] font-bold uppercase tracking-widest" style={{ color: COLOR }}>{[sala.cidade, sala.estado].filter(Boolean).join(' · ')}</p>
+      <div className="bg-white rounded-[1.5rem] w-full max-w-lg shadow-2xl overflow-hidden max-h-[92vh] flex flex-col">
+        {/* Header + stepper */}
+        <div className="px-6 pt-5 pb-4 border-b border-gray-100 shrink-0">
+          <div className="flex items-center justify-between">
+            <div>
+              <h3 className="text-sm font-black text-gray-900 uppercase">Reservar {sala.nome}</h3>
+              <p className="text-[10px] font-bold uppercase tracking-widest" style={{ color: COLOR }}>{[sala.cidade, sala.estado].filter(Boolean).join(' · ')}</p>
+            </div>
+            <button onClick={onClose} className="p-2 hover:bg-gray-100 rounded-xl transition-colors"><X size={18} /></button>
+          </div>
+          <div className="flex items-center gap-2 mt-4">
+            {STEPS.map((s, i) => (
+              <button key={s} type="button" onClick={() => i < step && setStep(i)} className="flex-1 flex flex-col items-center gap-1.5">
+                <div className={`w-full h-1.5 rounded-full transition-colors ${i <= step ? '' : 'bg-gray-100'}`} style={i <= step ? { backgroundColor: COLOR } : {}} />
+                <span className={`text-[8px] font-black uppercase tracking-wide ${i === step ? 'text-gray-700' : 'text-gray-300'}`}>{s}</span>
+              </button>
+            ))}
           </div>
-          <button onClick={onClose} className="p-2 hover:bg-gray-100 rounded-xl transition-colors"><X size={18} /></button>
         </div>
-        <div className="p-6 space-y-4">
-          {ws?.id && (
-            <div>
-              <label className={labelCls}>Reservar como</label>
-              <div className="flex gap-2">
-                {[{ v: false, l: 'PESSOAL' }, { v: true, l: ws.nome?.toUpperCase() || 'UNIDADE' }].map(o => (
-                  <button key={String(o.v)} type="button" onClick={() => setComoUnidade(o.v)}
-                    className={`flex-1 py-2.5 rounded-xl text-[10px] font-black uppercase border transition-all truncate px-2 ${comoUnidade === o.v ? 'text-white border-transparent' : 'bg-gray-50 text-gray-500 border-gray-200 hover:bg-gray-100'}`}
-                    style={comoUnidade === o.v ? { backgroundColor: COLOR } : {}}>
-                    {o.l}
-                  </button>
-                ))}
+
+        {/* Slides */}
+        <div className="flex-1 overflow-hidden min-h-[340px]">
+          <div className="flex h-full transition-transform duration-300 ease-out" style={{ transform: `translateX(-${step * 100}%)` }}>
+
+            {/* PASSO 1 — Dados */}
+            <div className="w-full shrink-0 overflow-y-auto p-6 space-y-4">
+              {ws?.id && (
+                <div>
+                  <label className={labelCls}>Reservar como</label>
+                  <div className="flex gap-2">
+                    {[{ v: false, l: 'PESSOAL' }, { v: true, l: ws.nome?.toUpperCase() || 'UNIDADE' }].map(o => (
+                      <button key={String(o.v)} type="button" onClick={() => setComoUnidade(o.v)}
+                        className={`flex-1 py-2.5 rounded-xl text-[10px] font-black uppercase border transition-all truncate px-2 ${comoUnidade === o.v ? 'text-white border-transparent' : 'bg-gray-50 text-gray-500 border-gray-200 hover:bg-gray-100'}`}
+                        style={comoUnidade === o.v ? { backgroundColor: COLOR } : {}}>{o.l}</button>
+                    ))}
+                  </div>
+                </div>
+              )}
+              {comoUnidade && (
+                <div>
+                  <label className={labelCls}>Profissional que vai usar a sala (opcional)</label>
+                  <select className={inputCls} value={profissionalId} onChange={e => setProfissionalId(e.target.value)}>
+                    <option value="">EU MESMO ({HybridBackend.getCurrentUserName()?.toUpperCase() || 'SOLICITANTE'})</option>
+                    {profissionais.map(p => <option key={p.usuario_id} value={p.usuario_id}>{p.nome?.toUpperCase()}</option>)}
+                  </select>
+                  <p className="text-[9px] text-gray-400 font-bold uppercase mt-1">O anti-conflito verifica a agenda do profissional selecionado</p>
+                </div>
+              )}
+              <div>
+                <label className={labelCls}>Observações</label>
+                <textarea className={inputCls} rows={4} value={f.observacoes} onChange={e => setF(p => ({ ...p, observacoes: e.target.value }))} placeholder="Alguma informação para o locador…" />
               </div>
             </div>
-          )}
-          {comoUnidade && (
-            <div>
-              <label className={labelCls}>Profissional que vai usar a sala (opcional)</label>
-              <select className={inputCls} value={profissionalId} onChange={e => setProfissionalId(e.target.value)}>
-                <option value="">EU MESMO ({HybridBackend.getCurrentUserName()?.toUpperCase() || 'SOLICITANTE'})</option>
-                {profissionais.map(p => <option key={p.usuario_id} value={p.usuario_id}>{p.nome?.toUpperCase()}</option>)}
-              </select>
-              <p className="text-[9px] text-gray-400 font-bold uppercase mt-1">O anti-conflito verifica a agenda do profissional selecionado</p>
-            </div>
-          )}
-          {/* Modelo de locação — cartões com preço */}
-          <div>
-            <label className={labelCls}>Modelo de locação</label>
-            <div className="grid grid-cols-3 sm:grid-cols-5 gap-2 mt-1">
-              {(modelosDisp.length ? modelosDisp : [MODELOS[0]]).map(m => {
-                const ativo = f.modelo === m.id;
-                const preco = fmtValor(sala[m.valor] as any) || (sala[m.consulta] ? 'sob consulta' : '—');
-                return (
-                  <button key={m.id} type="button" onClick={() => setF(p => ({ ...p, modelo: m.id }))}
-                    className={`p-2.5 rounded-xl border text-center transition-all ${ativo ? 'text-white border-transparent shadow-sm' : 'bg-gray-50 text-gray-600 border-gray-200 hover:bg-gray-100'}`}
-                    style={ativo ? { backgroundColor: COLOR } : {}}>
-                    <div className="text-[11px] font-black uppercase leading-none">{m.label}</div>
-                    <div className={`text-[9px] font-bold mt-1 leading-none ${ativo ? 'text-white/80' : 'text-gray-400'}`}>{preco}</div>
-                  </button>
-                );
-              })}
-            </div>
-          </div>
 
-          {/* Calendário mensal */}
-          <div className="rounded-2xl border border-gray-100 p-4">
-            <div className="flex items-center justify-between mb-3">
-              <button type="button" onClick={() => setMesRef(m => new Date(m.getFullYear(), m.getMonth() - 1, 1))} className="p-1.5 rounded-lg hover:bg-gray-100 text-gray-500"><ChevronLeft size={18} /></button>
-              <span className="text-xs font-black text-gray-800 uppercase tracking-wide">{MESES[mesRef.getMonth()]} {mesRef.getFullYear()}</span>
-              <button type="button" onClick={() => setMesRef(m => new Date(m.getFullYear(), m.getMonth() + 1, 1))} className="p-1.5 rounded-lg hover:bg-gray-100 text-gray-500"><ChevronRight size={18} /></button>
-            </div>
-            <div className="grid grid-cols-7 gap-1 mb-1">
-              {WEEKDAYS.map((w, i) => <div key={i} className="text-center text-[9px] font-black text-gray-300 uppercase py-1">{w}</div>)}
-            </div>
-            <div className="grid grid-cols-7 gap-1">
-              {monthGrid(mesRef).map((dia, i) => {
-                if (!dia) return <div key={i} />;
-                const passado = dia < hoje0;
-                const sel = !!(diaSel && mesmoDia(dia, diaSel));
-                const emRange = !!(diaSel && rangeFim && (f.modelo === 'semanal' || f.modelo === 'mensal') && dia > diaSel && dia <= rangeFim);
-                const ocupado = diasOcupados.has(dia.toDateString());
-                return (
-                  <button key={i} type="button" disabled={passado} onClick={() => setDiaSel(dia)}
-                    className={`relative aspect-square rounded-lg text-xs font-bold flex items-center justify-center transition-all ${passado ? 'text-gray-200 cursor-not-allowed' : sel ? 'text-white shadow' : emRange ? 'text-teal-700' : 'text-gray-600 hover:bg-gray-100'}`}
-                    style={sel ? { backgroundColor: COLOR } : emRange ? { backgroundColor: `${COLOR}22` } : {}}>
-                    {dia.getDate()}
-                    {ocupado && !sel && <span className="absolute bottom-1 w-1 h-1 rounded-full bg-amber-400" />}
-                  </button>
-                );
-              })}
-            </div>
-          </div>
-
-          {/* Controles de horário (conforme o modelo) */}
-          {diaSel && f.modelo === 'hora' && (
-            <div className="grid grid-cols-2 gap-3">
+            {/* PASSO 2 — Calendário */}
+            <div className="w-full shrink-0 overflow-y-auto p-6 space-y-4">
               <div>
-                <label className={labelCls}>Início</label>
-                <select className={inputCls} value={hora} onChange={e => setHora(e.target.value)}>
-                  {HORAS.map(h => <option key={h} value={h}>{h}</option>)}
-                </select>
-              </div>
-              <div>
-                <label className={labelCls}>Duração</label>
-                <div className="flex items-center gap-2">
-                  <button type="button" onClick={() => setQtd(q => Math.max(1, q - 1))} className="w-9 h-9 rounded-lg border border-gray-200 text-gray-500 font-black text-lg leading-none">−</button>
-                  <span className="flex-1 text-center text-sm font-black text-gray-800">{qtd}h</span>
-                  <button type="button" onClick={() => setQtd(q => Math.min(12, q + 1))} className="w-9 h-9 rounded-lg border border-gray-200 text-gray-500 font-black text-lg leading-none">+</button>
+                <label className={labelCls}>Modelo de locação</label>
+                <div className="grid grid-cols-3 sm:grid-cols-5 gap-2 mt-1">
+                  {(modelosDisp.length ? modelosDisp : [MODELOS[0]]).map(m => {
+                    const ativo = f.modelo === m.id;
+                    const preco = fmtValor(sala[m.valor] as any) || (sala[m.consulta] ? 'sob consulta' : '—');
+                    return (
+                      <button key={m.id} type="button" onClick={() => setF(p => ({ ...p, modelo: m.id }))}
+                        className={`p-2.5 rounded-xl border text-center transition-all ${ativo ? 'text-white border-transparent shadow-sm' : 'bg-gray-50 text-gray-600 border-gray-200 hover:bg-gray-100'}`}
+                        style={ativo ? { backgroundColor: COLOR } : {}}>
+                        <div className="text-[11px] font-black uppercase leading-none">{m.label}</div>
+                        <div className={`text-[9px] font-bold mt-1 leading-none ${ativo ? 'text-white/80' : 'text-gray-400'}`}>{preco}</div>
+                      </button>
+                    );
+                  })}
                 </div>
               </div>
-            </div>
-          )}
-          {diaSel && f.modelo === 'turno' && (
-            <div>
-              <label className={labelCls}>Turno</label>
-              <div className="grid grid-cols-3 gap-2">
-                {Object.entries(TURNOS).map(([k, t]) => (
-                  <button key={k} type="button" onClick={() => setTurno(k)}
-                    className={`py-2 rounded-xl text-[11px] font-black uppercase border transition-all ${turno === k ? 'text-white border-transparent' : 'bg-gray-50 text-gray-500 border-gray-200 hover:bg-gray-100'}`}
-                    style={turno === k ? { backgroundColor: COLOR } : {}}>
-                    {t.label}<div className="text-[8px] font-bold opacity-70">{pad2(t.ini)}h–{pad2(t.fim)}h</div>
-                  </button>
-                ))}
+              <div className="rounded-2xl border border-gray-100 p-4">
+                <div className="flex items-center justify-between mb-3">
+                  <button type="button" onClick={() => setMesRef(m => new Date(m.getFullYear(), m.getMonth() - 1, 1))} className="p-1.5 rounded-lg hover:bg-gray-100 text-gray-500"><ChevronLeft size={18} /></button>
+                  <span className="text-xs font-black text-gray-800 uppercase tracking-wide">{MESES[mesRef.getMonth()]} {mesRef.getFullYear()}</span>
+                  <button type="button" onClick={() => setMesRef(m => new Date(m.getFullYear(), m.getMonth() + 1, 1))} className="p-1.5 rounded-lg hover:bg-gray-100 text-gray-500"><ChevronRight size={18} /></button>
+                </div>
+                <div className="grid grid-cols-7 gap-1 mb-1">
+                  {WEEKDAYS.map((w, i) => <div key={i} className="text-center text-[9px] font-black text-gray-300 uppercase py-1">{w}</div>)}
+                </div>
+                <div className="grid grid-cols-7 gap-1">
+                  {monthGrid(mesRef).map((dia, i) => {
+                    if (!dia) return <div key={i} />;
+                    const passado = dia < hoje0;
+                    const sel = !!(diaSel && mesmoDia(dia, diaSel));
+                    const emRange = !!(diaSel && rangeFim && (f.modelo === 'semanal' || f.modelo === 'mensal') && dia > diaSel && dia <= rangeFim);
+                    const ocupado = diasOcupados.has(dia.toDateString());
+                    return (
+                      <button key={i} type="button" disabled={passado} onClick={() => setDiaSel(dia)}
+                        className={`relative aspect-square rounded-lg text-xs font-bold flex items-center justify-center transition-all ${passado ? 'text-gray-200 cursor-not-allowed' : sel ? 'text-white shadow' : emRange ? 'text-teal-700' : 'text-gray-600 hover:bg-gray-100'}`}
+                        style={sel ? { backgroundColor: COLOR } : emRange ? { backgroundColor: `${COLOR}22` } : {}}>
+                        {dia.getDate()}
+                        {ocupado && !sel && <span className="absolute bottom-1 w-1 h-1 rounded-full bg-amber-400" />}
+                      </button>
+                    );
+                  })}
+                </div>
               </div>
+              {diaSel && f.modelo === 'hora' && (
+                <div className="grid grid-cols-2 gap-3">
+                  <div>
+                    <label className={labelCls}>Início</label>
+                    <select className={inputCls} value={hora} onChange={e => setHora(e.target.value)}>
+                      {HORAS.map(h => <option key={h} value={h}>{h}</option>)}
+                    </select>
+                  </div>
+                  <div>
+                    <label className={labelCls}>Duração</label>
+                    <div className="flex items-center gap-2">
+                      <button type="button" onClick={() => setQtd(q => Math.max(1, q - 1))} className="w-9 h-9 rounded-lg border border-gray-200 text-gray-500 font-black text-lg leading-none">−</button>
+                      <span className="flex-1 text-center text-sm font-black text-gray-800">{qtd}h</span>
+                      <button type="button" onClick={() => setQtd(q => Math.min(12, q + 1))} className="w-9 h-9 rounded-lg border border-gray-200 text-gray-500 font-black text-lg leading-none">+</button>
+                    </div>
+                  </div>
+                </div>
+              )}
+              {diaSel && f.modelo === 'turno' && (
+                <div>
+                  <label className={labelCls}>Turno</label>
+                  <div className="grid grid-cols-3 gap-2">
+                    {Object.entries(TURNOS).map(([k, t]) => (
+                      <button key={k} type="button" onClick={() => setTurno(k)}
+                        className={`py-2 rounded-xl text-[11px] font-black uppercase border transition-all ${turno === k ? 'text-white border-transparent' : 'bg-gray-50 text-gray-500 border-gray-200 hover:bg-gray-100'}`}
+                        style={turno === k ? { backgroundColor: COLOR } : {}}>
+                        {t.label}<div className="text-[8px] font-bold opacity-70">{pad2(t.ini)}h–{pad2(t.fim)}h</div>
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              )}
+              {diaSel && ocupadasDoDia.length > 0 && (
+                <div className="p-3 rounded-xl bg-amber-50 border border-amber-100">
+                  <p className="text-[9px] font-black text-amber-600 uppercase tracking-widest mb-1.5 flex items-center gap-1"><Clock size={11} /> Já ocupado neste dia</p>
+                  <div className="space-y-1 max-h-24 overflow-y-auto">
+                    {ocupadasDoDia.map(o => (
+                      <p key={o.id} className="text-[10px] font-bold text-amber-700">
+                        {new Date(o.inicio).toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' })}–{new Date(o.fim).toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' })} ({o.status})
+                      </p>
+                    ))}
+                  </div>
+                </div>
+              )}
             </div>
-          )}
 
-          {/* Resumo do período */}
-          {f.inicio && f.fim && (
-            <div className="rounded-2xl bg-teal-50 border border-teal-100 p-3.5 flex items-center gap-3">
-              <CalendarClock size={18} className="text-teal-600 shrink-0" />
-              <div className="text-xs font-bold text-teal-800 leading-snug">
-                {fmtData(new Date(f.inicio).toISOString())} <span className="text-teal-400">→</span> {fmtData(new Date(f.fim).toISOString())}
-              </div>
-            </div>
-          )}
-          <div>
-            <label className={labelCls}>Observações</label>
-            <textarea className={inputCls} rows={2} value={f.observacoes} onChange={e => setF(p => ({ ...p, observacoes: e.target.value }))} />
-          </div>
-          {diaSel && ocupadasDoDia.length > 0 && (
-            <div className="p-3 rounded-xl bg-amber-50 border border-amber-100">
-              <p className="text-[9px] font-black text-amber-600 uppercase tracking-widest mb-1.5 flex items-center gap-1"><Clock size={11} /> Já ocupado neste dia</p>
-              <div className="space-y-1 max-h-28 overflow-y-auto">
-                {ocupadasDoDia.map(o => (
-                  <p key={o.id} className="text-[10px] font-bold text-amber-700">
-                    {new Date(o.inicio).toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' })}–{new Date(o.fim).toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' })} ({o.status})
-                  </p>
+            {/* PASSO 3 — Resumo detalhado + históricos */}
+            <div className="w-full shrink-0 overflow-y-auto p-6 space-y-4">
+              <div className="rounded-2xl border border-gray-100 overflow-hidden">
+                {([
+                  ['Sala', sala.nome],
+                  ['Local', [sala.cidade, sala.estado].filter(Boolean).join(' · ') || '—'],
+                  ['Modelo', modeloLabel],
+                  ['Início', f.inicio ? fmtData(new Date(f.inicio).toISOString()) : '—'],
+                  ['Fim', f.fim ? fmtData(new Date(f.fim).toISOString()) : '—'],
+                  ['Reservar como', comoUnidade ? (ws?.nome || 'Unidade') : 'Pessoal'],
+                ] as Array<[string, string]>).map(([k, v]) => (
+                  <div key={k} className="flex items-center justify-between px-4 py-2.5 border-b border-gray-50 last:border-0">
+                    <span className="text-[10px] font-black text-gray-400 uppercase tracking-widest">{k}</span>
+                    <span className="text-xs font-bold text-gray-800 text-right max-w-[62%] truncate">{v}</span>
+                  </div>
                 ))}
+                <div className="flex items-center justify-between px-4 py-3 bg-teal-50/60">
+                  <span className="text-[10px] font-black text-teal-600 uppercase tracking-widest">Total estimado</span>
+                  <span className="text-base font-black text-teal-700">{total > 0 ? fmtValor(String(total)) : 'Sob consulta'}</span>
+                </div>
+              </div>
+              <div>
+                <p className="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 flex items-center gap-1"><Clock size={11} /> Histórico de reservas desta sala</p>
+                {ocupadas.length === 0 ? (
+                  <p className="text-[11px] text-gray-300 font-bold uppercase py-2">Sem reservas registradas</p>
+                ) : (
+                  <div className="space-y-1.5 max-h-44 overflow-y-auto">
+                    {ocupadas.slice().sort((a, b) => new Date(b.inicio).getTime() - new Date(a.inicio).getTime()).map(o => (
+                      <div key={o.id} className="flex items-center justify-between text-[11px] bg-gray-50 rounded-lg px-3 py-1.5">
+                        <span className="font-bold text-gray-600">{fmtData(o.inicio)} → {new Date(o.fim).toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' })}</span>
+                        <span className={`text-[9px] font-black uppercase px-1.5 py-0.5 rounded-full ${o.status === 'confirmada' ? 'bg-emerald-100 text-emerald-700' : o.status === 'pendente' ? 'bg-amber-100 text-amber-700' : 'bg-gray-200 text-gray-500'}`}>{o.status}</span>
+                      </div>
+                    ))}
+                  </div>
+                )}
               </div>
             </div>
-          )}
+
+            {/* PASSO 4 — Pagamento */}
+            <div className="w-full shrink-0 overflow-y-auto p-6 space-y-4">
+              <div className="rounded-2xl bg-gradient-to-br from-teal-50 to-white border border-teal-100 p-5 text-center">
+                <p className="text-[10px] font-black text-teal-600 uppercase tracking-widest">Total{modeloLabel ? ` · ${modeloLabel}` : ''}</p>
+                <p className="text-3xl font-black text-teal-700 mt-1">{total > 0 ? fmtValor(String(total)) : 'Sob consulta'}</p>
+                {f.modelo === 'hora' && total > 0 && <p className="text-[10px] text-teal-500 font-bold mt-1">{qtd}h × {fmtValor(String(Number(sala.valor_hora)))}</p>}
+              </div>
+              <div>
+                <label className={labelCls}>Forma de pagamento</label>
+                <div className="grid grid-cols-2 gap-2 mt-1">
+                  {Object.entries(FORMAS).map(([k, l]) => (
+                    <button key={k} type="button" onClick={() => setFormaPagamento(k)}
+                      className={`py-2.5 rounded-xl text-[11px] font-black uppercase border transition-all ${formaPagamento === k ? 'text-white border-transparent' : 'bg-gray-50 text-gray-500 border-gray-200 hover:bg-gray-100'}`}
+                      style={formaPagamento === k ? { backgroundColor: COLOR } : {}}>{l}</button>
+                  ))}
+                </div>
+              </div>
+              <div className="rounded-xl bg-gray-50 border border-gray-100 p-3.5 text-[11px] text-gray-500 leading-relaxed">
+                <span className="font-black text-gray-600 uppercase">Como funciona: </span>ao solicitar, o locador recebe seu pedido e confirma. O pagamento é combinado diretamente com ele após a confirmação — sua preferência ({FORMAS[formaPagamento]}) vai junto no pedido.
+              </div>
+            </div>
+
+          </div>
         </div>
-        <div className="px-6 pb-6 flex gap-3">
-          <button onClick={onClose} className="flex-1 py-3 border border-gray-200 rounded-xl text-xs font-black uppercase text-gray-500 hover:bg-gray-50 transition-colors">CANCELAR</button>
-          <button onClick={handleReserve} disabled={saving} className="flex-1 py-3 text-white rounded-xl text-xs font-black uppercase transition-colors flex items-center justify-center gap-2 disabled:opacity-60" style={{ backgroundColor: COLOR }}>
-            {saving ? <RefreshCw size={14} className="animate-spin" /> : <CalendarClock size={14} />} SOLICITAR RESERVA
+
+        {/* Footer nav */}
+        <div className="px-6 py-4 border-t border-gray-100 flex gap-3 shrink-0">
+          <button onClick={() => (step === 0 ? onClose() : setStep(s => s - 1))} className="flex-1 py-3 border border-gray-200 rounded-xl text-xs font-black uppercase text-gray-500 hover:bg-gray-50 transition-colors">
+            {step === 0 ? 'Cancelar' : 'Voltar'}
           </button>
+          {step < 3 ? (
+            <button onClick={() => setStep(s => s + 1)} disabled={step === 1 && !f.inicio}
+              className="flex-1 py-3 text-white rounded-xl text-xs font-black uppercase transition-opacity hover:opacity-90 disabled:opacity-40 flex items-center justify-center gap-2" style={{ backgroundColor: COLOR }}>
+              Próximo <ChevronRight size={14} />
+            </button>
+          ) : (
+            <button onClick={handleReserve} disabled={saving || !f.inicio}
+              className="flex-1 py-3 text-white rounded-xl text-xs font-black uppercase transition-opacity hover:opacity-90 disabled:opacity-50 flex items-center justify-center gap-2" style={{ backgroundColor: COLOR }}>
+              {saving ? <RefreshCw size={14} className="animate-spin" /> : <CalendarClock size={14} />} Solicitar Reserva
+            </button>
+          )}
         </div>
       </div>
     </div>