.pagina-agendar { padding: var(--esp-6) 0 var(--esp-8); max-width: 640px; }

.cabecalho-barbearia { margin-bottom: var(--esp-6); }
.cabecalho-barbearia p { margin: 0; }

.grade-servicos { display: flex; flex-direction: column; gap: var(--esp-3); }
.servico-opcao {
  display: flex; justify-content: space-between; align-items: center; gap: var(--esp-4);
  padding: var(--esp-4); border: 1px solid var(--borda); border-radius: var(--raio-md);
  background: var(--superficie); cursor: pointer; text-align: left;
  transition: border-color var(--vel-rapida), transform var(--vel-rapida);
  width: 100%;
}
.servico-opcao:hover { border-color: var(--latao); transform: translateY(-1px); }
.servico-opcao__nome { font-weight: 700; margin-bottom: 2px; }
.servico-opcao__duracao { font-size: var(--tx-xs); color: var(--texto-fraco); }
.servico-opcao__preco { font-family: var(--fonte-mono); font-weight: 700; font-size: var(--tx-lg); color: var(--latao-forte); white-space: nowrap; }

.acoes-passo { display: flex; justify-content: space-between; align-items: center; margin-top: var(--esp-5); }

.resumo-agendamento { margin: var(--esp-5) 0; }
.resumo-agendamento h4 { margin-bottom: var(--esp-3); }
.resumo-agendamento__linha {
  display: flex; justify-content: space-between; padding: var(--esp-2) 0;
  border-bottom: 1px solid var(--borda); font-size: var(--tx-sm);
}
.resumo-agendamento__linha:last-child { border-bottom: none; }
.resumo-agendamento__linha span { color: var(--texto-suave); }

.confirmacao { text-align: center; padding: var(--esp-6) 0; }
.confirmacao__icone { margin-bottom: var(--esp-4); }

.sem-horarios { text-align: center; padding: var(--esp-6) var(--esp-4); color: var(--texto-suave); }