/*
  Página de agendamento (BROTHERS-28). Usa os tokens (paleta Bronze) e as peças da home
  (.botao, .titulo, .sobretitulo, .link-seta, .rodape). Mesma regra da home: tudo reto, sem border-radius.
  Alvos de toque com pelo menos 44 px (dias, horários, opções e botões) para o celular de 360 px.
*/
/* hidden sempre esconde, mesmo em peça com display próprio (ex.: a lista de etapas). */
.agenda [hidden] { display: none !important; }

.agenda-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .5rem var(--espaco-2);
  background: rgba(11, 9, 8, .94);
  border-bottom: 1px solid var(--cor-borda);
}
.agenda-topo__marca { line-height: 0; }
.agenda-topo__marca img { width: 56px; height: 56px; }
.agenda-topo .link-seta { font-size: .8rem; }

.agenda { max-width: 44rem; margin: 0 auto; padding: var(--espaco-4) var(--espaco-2) var(--espaco-5); min-height: 70vh; }
.agenda__cabeca { margin-bottom: var(--espaco-3); }
.agenda .titulo { font-size: clamp(2.4rem, 9vw, 4rem); }

/* Etapas: números em linha; no celular só o número, o nome aparece na etapa atual. */
.passos { list-style: none; margin: 0 0 var(--espaco-3); padding: 0; display: flex; gap: .35rem; counter-reset: none; }
.passos li {
  flex: 1; display: flex; align-items: center; gap: .4rem;
  padding-top: .5rem; border-top: 3px solid var(--cor-borda);
  color: var(--cor-texto-suave); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  white-space: nowrap; overflow: hidden;
}
.passos li span { font-family: var(--fonte-display); font-size: 1rem; }
.passos li.feito { border-color: var(--cor-destaque); }
.passos li[aria-current="step"] { border-color: var(--cor-destaque); color: var(--cor-texto); flex: 2.2; }
@media (max-width: 559px) {
  .passos li:not([aria-current]) { font-size: 0; }
  .passos li:not([aria-current]) span { font-size: 1rem; }
}

.agenda__status:empty { display: none; }
.agenda__status { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: var(--espaco-2); color: var(--cor-texto-suave); }
.agenda__status--erro { color: var(--cor-texto); border-left: 4px solid var(--cor-destaque); padding: .6rem .9rem; background: var(--cor-superficie); }
.agenda__alerta {
  margin: 0 0 var(--espaco-2); padding: .7rem .9rem;
  background: var(--cor-superficie); border-left: 4px solid var(--cor-destaque); color: var(--cor-texto);
}

.passo h2, .sucesso h2 { font-family: var(--fonte-display); font-weight: 400; text-transform: uppercase; font-size: 2rem; line-height: 1; margin-bottom: .6rem; }
.passo h2:focus, .sucesso h2:focus { outline: none; }
/* O título recebe o foco só para o leitor de tela anunciar o passo; não é clicável, então fica sem contorno. */
.sucesso .titulo { font-size: clamp(3rem, 14vw, 5.5rem); color: var(--cor-destaque); }
.passo__sub { color: var(--cor-texto-suave); margin-bottom: var(--espaco-2); }
.passo__nota { color: var(--cor-texto-suave); font-size: .95rem; margin-top: .75rem; }
.passo__acoes { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: var(--espaco-3); }
.passo__acoes .botao { flex: 1 1 12rem; }
.agenda .botao:disabled { opacity: .6; cursor: progress; }
.botao:focus-visible, .agenda button:focus-visible, .agenda input:focus-visible { outline: 3px solid var(--cor-destaque); outline-offset: 3px; }

/* Serviço: rádios grandes em cartão. */
.opcoes { border: 0; margin: 0; padding: 0; display: grid; gap: .6rem; }
.opcao {
  display: flex; align-items: center; gap: .9rem; min-height: 64px; padding: .8rem 1rem;
  background: var(--cor-superficie); border: 2px solid var(--cor-borda); cursor: pointer;
}
.opcao:hover { border-color: var(--cor-texto-suave); }
.opcao:has(input:checked) { border-color: var(--cor-destaque); }
.opcao input { width: 1.3rem; height: 1.3rem; accent-color: var(--cor-destaque); flex: none; margin: 0; }
.opcao__texto { display: grid; }
.opcao__texto strong { font-size: 1.15rem; }
.opcao__texto span { color: var(--cor-texto-suave); font-size: .95rem; }

/* Mês e calendário */
.mes { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.mes__nome { font-weight: 700; font-size: 1.15rem; }
.mes__nome::first-letter { text-transform: uppercase; }
.mes__nav, .dia, .hora {
  min-width: 44px; min-height: 44px; border: 2px solid var(--cor-borda);
  background: var(--cor-superficie); color: var(--cor-texto); font: inherit; font-weight: 700; cursor: pointer;
}
.mes__nav { font-size: 1.5rem; line-height: 1; }
.mes__nav:disabled { opacity: .35; cursor: not-allowed; }
.calendario { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .3rem; }
.calendario__semana { text-align: center; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--cor-texto-suave); padding-bottom: .2rem; }
.dia { width: 100%; padding: 0; }
.dia:disabled { background: transparent; border-color: transparent; color: #7d6b58; cursor: default; text-decoration: line-through; }
.dia:not(:disabled):hover, .hora:hover { border-color: var(--cor-destaque); }
.dia[aria-pressed="true"], .hora[aria-pressed="true"] { background: var(--cor-destaque); border-color: var(--cor-destaque); color: var(--cor-sobre-destaque); }

/* Horários */
.horarios { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr)); gap: .5rem; }
.horarios .passo__nota { grid-column: 1 / -1; }
.hora { font-size: 1.05rem; }

/* Campos */
.campo { display: grid; gap: .3rem; margin-bottom: var(--espaco-2); }
.campo label { font-weight: 700; }
.campo input:not([type="checkbox"]) {
  min-height: 48px; padding: .6rem .8rem; font: inherit; font-size: 1.05rem;
  background: var(--cor-preto); color: var(--cor-texto); border: 2px solid var(--cor-borda);
}
.campo input::placeholder { color: #8a7865; }
.campo input[aria-invalid="true"] { border-color: #e0785f; }
.campo__erro { color: #f0a08a; font-size: .95rem; margin: 0; }
.campo--aceite { grid-template-columns: auto 1fr; align-items: start; column-gap: .7rem; }
.campo--aceite input { width: 1.4rem; height: 1.4rem; margin: .15rem 0 0; accent-color: var(--cor-destaque); }
.campo--aceite label { font-weight: 400; }
.campo--aceite .campo__erro { grid-column: 1 / -1; }
/* Honeypot fora da tela (não usar display:none: alguns robôs pulam campos escondidos assim). */
.campo--isca { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }

/* Resumo */
.resumo { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.2rem; margin: 0; padding: 1rem; background: var(--cor-superficie); border-left: 4px solid var(--cor-destaque); }
.resumo dt { color: var(--cor-texto-suave); font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; align-self: center; }
.resumo dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.sucesso > p:last-child { margin-top: var(--espaco-3); }