:root {
  --fundo: #06121e;
  --fundo-2: #0c2135;
  --cartao: #ffffff;
  --texto: #1a1f25;
  --texto-2: #5c6670;
  --linha: #e3e6ea;
  --marca: #d94149;
  --marca-escura: #b42b2b;
  --marca-clara: #fbeaeb;
  --ok: #1f9d55;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: "Sora", system-ui, sans-serif;
  background: radial-gradient(1200px 600px at 50% -200px, var(--fundo-2), var(--fundo));
  min-height: 100vh;
  color: var(--texto);
  padding: 0 16px 48px;
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

/* topo */
.topo {
  max-width: 1060px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0;
}
.topo-logo { width: 64px; display: block; }
.topo a { color: #fff; text-decoration: none; font-size: 14px; opacity: .85; }
.topo a:hover { opacity: 1; }
.topo-voltar, .topo-link { min-width: 110px; }
.topo-link { text-align: right; }

/* cartão principal (layout tipo Calendly) */
.cartao {
  max-width: 1060px; margin: 0 auto; background: var(--cartao); border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,.35); display: flex; min-height: 600px; overflow: hidden;
}
.painel-info {
  width: 320px; flex-shrink: 0; border-right: 1px solid var(--linha); padding: 28px 24px;
}
.info-logo { width: 54px; height: 54px; object-fit: contain; background: var(--fundo); border-radius: 50%; padding: 6px; }
.info-barbearia { color: var(--texto-2); font-weight: 600; margin-top: 14px; font-size: 15px; }
.info-servico { font-size: 26px; line-height: 1.25; margin: 6px 0 18px; }
.info-detalhes { list-style: none; display: grid; gap: 12px; color: var(--texto-2); font-weight: 600; font-size: 14px; }
.info-detalhes i { width: 20px; color: var(--texto-2); }
.info-quando { color: var(--ok) !important; }
.info-quando i { color: var(--ok) !important; }

.servicos { margin-top: 26px; display: grid; gap: 8px; }
.servico {
  text-align: left; border: 1px solid var(--linha); background: #fff; border-radius: 8px; padding: 12px 14px;
  display: flex; justify-content: space-between; align-items: center; gap: 10px; transition: border-color .15s, box-shadow .15s;
}
.servico:hover { border-color: var(--marca); }
.servico[aria-checked="true"] { border-color: var(--marca); box-shadow: inset 0 0 0 1px var(--marca); background: var(--marca-clara); }
.servico strong { display: block; font-size: 15px; }
.servico small { color: var(--texto-2); font-size: 12px; }
.servico .preco { font-weight: 700; color: var(--marca-escura); white-space: nowrap; font-size: 14px; }
.rotulo-escolha { margin-top: 24px; font-size: 12px; font-weight: 700; color: var(--texto-2); text-transform: uppercase; letter-spacing: .05em; }
.servicos.barbeiros { margin-top: 10px; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
.barbeiro-opcao { justify-content: flex-start; }
.barbeiro-opcao .avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--fundo-2); color: #fff; flex-shrink: 0;
  display: grid; place-items: center; font-weight: 700; font-size: 13px;
}
.barbeiro-opcao[aria-checked="true"] .avatar { background: var(--marca); }
.aviso-escolha {
  grid-column: 1 / -1; color: var(--texto-2); background: #f6f7f9; border: 1px dashed var(--linha);
  border-radius: 8px; padding: 22px 16px; text-align: center; font-size: 14px; line-height: 1.5;
}

/* passos */
.passo { flex: 1; padding: 28px 32px; min-width: 0; }
.passo-titulo { font-size: 20px; margin-bottom: 22px; }
.data-hora { display: flex; gap: 28px; }

/* calendário */
.calendario { flex: 1; max-width: 420px; }
.cal-topo { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 18px; font-size: 16px; }
.cal-topo span { min-width: 150px; text-align: center; text-transform: capitalize; }
.cal-nav {
  width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--marca-clara); color: var(--marca);
}
.cal-nav:disabled { background: transparent; color: #c5cad0; cursor: default; }
.cal-semana, .cal-dias { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.cal-semana span { font-size: 11px; color: var(--texto-2); padding-bottom: 10px; }
.cal-dias { row-gap: 6px; }
.dia {
  aspect-ratio: 1; max-width: 48px; width: 100%; margin: auto; border-radius: 50%; border: 0;
  background: transparent; color: #a3aab2; font-size: 15px; position: relative; cursor: default;
}
.dia.disponivel { background: var(--marca-clara); color: var(--marca); font-weight: 700; cursor: pointer; }
.dia.disponivel:hover { background: #f6d3d5; }
.dia.selecionado { background: var(--marca) !important; color: #fff !important; }
.dia.hoje::after {
  content: ""; position: absolute; bottom: 6px; left: 50%; width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%; background: currentColor;
}
.fuso { margin-top: 22px; font-size: 13px; color: var(--texto-2); }
.carregando { opacity: .45; pointer-events: none; }

/* horários */
.horarios { width: 230px; flex-shrink: 0; display: flex; flex-direction: column; }
.horarios-dia { font-size: 15px; margin: 8px 0 18px; }
.horarios-lista { display: grid; gap: 10px; max-height: 470px; overflow-y: auto; padding-right: 6px; }
.hora { display: flex; gap: 8px; }
.hora button {
  flex: 1; height: 52px; border-radius: 6px; font-weight: 700; font-size: 16px; transition: all .15s;
}
.hora .h { border: 1px solid #f0b8bb; color: var(--marca); background: #fff; }
.hora .h:hover { border: 2px solid var(--marca); }
.hora .proximo { display: none; border: 0; background: var(--marca); color: #fff; }
.hora.ativa .h { background: #5c6670; border-color: #5c6670; color: #fff; }
.hora.ativa .proximo { display: block; }
.hora.ativa .proximo:hover { background: var(--marca-escura); }
.sem-horario { color: var(--texto-2); font-size: 14px; }

/* indisponível (almoço, reservado, compromisso da agenda) */
.indisp {
  border: 1px dashed #c9ced4; border-radius: 6px; padding: 8px 12px; background: #f6f7f8;
  display: grid; gap: 2px; color: var(--texto-2); font-size: 13px;
}
.indisp .faixa { font-weight: 700; color: #8a929b; font-variant-numeric: tabular-nums; }
.indisp strong { color: var(--texto); font-size: 14px; }
.indisp small { line-height: 1.4; white-space: pre-line; }
.aviso-dia { border-radius: 8px; padding: 12px 14px; background: #fff6dd; color: #6b4e00; display: grid; gap: 4px; font-size: 14px; }
.aviso-dia.fechado { background: var(--marca-clara); color: var(--marca-escura); }
.aviso-dia small { color: inherit; opacity: .85; white-space: pre-line; }

/* dias com motivo (feriado, folga) e feriado em que abre */
.dia.com-motivo { color: #b0b6bd; cursor: pointer; text-decoration: line-through; text-decoration-color: var(--marca); }
.dia.com-motivo:hover { background: #f1f2f4; }
.dia.com-motivo.selecionado { background: #5c6670 !important; color: #fff !important; text-decoration: none; }
.dia.feriado-aberto::before {
  content: ""; position: absolute; top: 5px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: #e0a100;
}

/* formulário */
.link-voltar { background: none; border: 0; color: var(--marca); font-weight: 600; margin-bottom: 16px; display: inline-flex; gap: 8px; align-items: center; }
form { display: grid; gap: 16px; max-width: 460px; }
label { display: grid; gap: 6px; font-weight: 600; font-size: 14px; }
label small { font-weight: 400; color: var(--texto-2); }
input, textarea {
  border: 1px solid #c9ced4; border-radius: 6px; padding: 12px; font-size: 16px; width: 100%;
}
input:focus, textarea:focus { outline: 2px solid var(--marca); border-color: transparent; }
.erro { color: var(--marca-escura); background: var(--marca-clara); padding: 10px 12px; border-radius: 6px; font-size: 14px; }
.btn-principal {
  display: inline-block; text-align: center; background: var(--marca); color: #fff; border: 0; border-radius: 40px;
  padding: 14px 28px; font-weight: 700; font-size: 16px; text-decoration: none; justify-self: start;
}
.btn-principal:hover { background: var(--marca-escura); }
.btn-principal:disabled { opacity: .6; cursor: wait; }

/* confirmação */
.passo-ok { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; }
.ok-icone { width: 64px; height: 64px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; font-size: 28px; }
.passo-ok h2 { font-size: 24px; }
.passo-ok p { color: var(--texto-2); max-width: 380px; line-height: 1.5; }
.passo-ok .btn-principal { justify-self: center; margin-top: 8px; }
.ok-dica { font-size: 13px; }

.btn-whatsapp { position: fixed; right: 20px; bottom: 16px; z-index: 50; }
.btn-whatsapp img { width: 60px; display: block; }

/* celular */
@media (max-width: 900px) {
  .cartao { flex-direction: column; }
  .painel-info { width: auto; border-right: 0; border-bottom: 1px solid var(--linha); padding: 22px 18px; }
  .info-servico { font-size: 22px; }
  .passo { padding: 22px 16px; }
  .data-hora { flex-direction: column; }
  .calendario { max-width: none; }
  .horarios { width: auto; }
  .horarios-lista { max-height: none; grid-template-columns: repeat(3, 1fr); padding-right: 0; }
  .hora button { height: 46px; font-size: 15px; }
  .hora.ativa { grid-column: 1 / -1; }
  .indisp, .aviso-dia { grid-column: 1 / -1; }
  .topo-voltar, .topo-link { min-width: 0; font-size: 13px; }
}
.aviso-assinatura { background: #fff6dc; color: #6b4e00; border: 1px solid #f3d88a; padding: 10px 12px; border-radius: 6px; font-size: 14px; line-height: 1.45; }
.aviso-lgpd { font-size: 12px; color: #6b7280; line-height: 1.5; margin-top: 10px; text-align: center; }
.aviso-lgpd a { color: inherit; text-decoration: underline; }
.powered { text-align: center; font-size: 12px; opacity: .6; margin: 24px 0 12px; letter-spacing: .3px; }
.powered b { font-weight: 700; letter-spacing: .6px; }
.powered a { color: inherit; }
.cliente-conhecido { background: #e8f6ee; color: #14532d; border: 1px solid #bfe5cc; padding: 10px 12px; border-radius: 6px; font-size: 14px; line-height: 1.5; }
.link-dados { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; font: inherit; cursor: pointer; opacity: .8; }
#camposCadastro { display: contents; }
#camposCadastro[hidden] { display: none; }