/* =========================================================
   LUMEN — Fluxo de agendamento (agendar.html e confirmacao.html)
   Carregado só nessas duas páginas; a landing não paga por ele.
   Depende de tokens.css e style.css.
   ========================================================= */

.pagina-fluxo {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.pagina-fluxo main { flex: 1; padding-block: clamp(var(--s-7), 9vw, var(--s-9)); }
.pagina-fluxo .container-estreito {
  width: 100%;
  max-width: 860px;
  margin-inline: auto;
  padding-inline: var(--s-4);
}

/* ---------- Topo simplificado ---------- */
.topo-simples { background: var(--petroleo-900); padding-block: var(--s-4); }
.topo-simples .container-estreito {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
.topo-simples img { width: 150px; height: auto; }
.topo-simples .voltar {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;          /* alvo de toque confortável */
  padding-inline: var(--s-2);
  color: var(--claro-medio);
  font-size: var(--t-sm);
  text-decoration: none;
}
.topo-simples .voltar:hover { color: var(--dourado-claro); }
.topo-simples .voltar svg { width: 16px; height: 16px; }

/* ---------- Trilha de progresso ----------
   Mostra onde a pessoa está e quanto falta (efeito Zeigarnik). */
.trilha {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  list-style: none;
  margin: 0 0 var(--s-6);
  padding: 0;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cinza);
}
.trilha li { display: inline-flex; align-items: center; gap: var(--s-2); }
.trilha li::before {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(13, 32, 40, 0.22);
}
.trilha li[data-estado="feito"] { color: var(--teal-suave); }
.trilha li[data-estado="feito"]::before {
  border-color: var(--teal-suave);
  background: var(--teal-suave);
}
.trilha li[data-estado="atual"] { color: var(--petroleo-700); }
.trilha li[data-estado="atual"]::before {
  border-color: var(--teal);
  box-shadow: inset 0 0 0 4px var(--teal);
}
/* o divisor é só o traço entre as etapas — não ganha marcador */
.trilha .divisor { color: rgba(13, 32, 40, 0.24); }
.trilha .divisor::before { content: none; }

/* ---------- Cartão do fluxo ---------- */
.cartao-fluxo {
  background: #fff;
  border-radius: var(--raio-card);
  box-shadow: var(--sombra-media);
  padding: clamp(var(--s-5), 4vw, var(--s-7));
}
.cartao-fluxo h1 { font-size: var(--t-h2); color: var(--petroleo-700); }
.cartao-fluxo > p { margin-top: var(--s-3); color: var(--cinza); max-width: var(--largura-texto); }

.bloco-fluxo { margin-top: var(--s-6); }
.bloco-fluxo > h2 {
  font-family: var(--fonte-corpo);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-selo);
  text-transform: uppercase;
  color: var(--cinza);
  margin-bottom: var(--s-4);
}

/* ---------- Faixa de dias ---------- */
.dias-faixa {
  display: flex;
  gap: var(--s-3);
  overflow-x: auto;
  padding-bottom: var(--s-3);
  scroll-snap-type: x proximate;
}
.dia-botao {
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-width: 94px;
  padding: var(--s-3) var(--s-4);
  border: 1px solid rgba(13, 32, 40, 0.14);
  border-radius: var(--raio-campo);
  background: var(--offwhite);
  color: var(--petroleo-700);
  font-family: var(--fonte-corpo);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-rapida) var(--ease-saida),
              background-color var(--dur-rapida) var(--ease-saida),
              color var(--dur-rapida) var(--ease-saida),
              transform var(--dur-rapida) var(--ease-saida);
}
.dia-botao:hover { border-color: var(--teal); transform: translateY(-2px); }
.dia-botao[aria-pressed="true"] {
  background: var(--petroleo-700);
  border-color: var(--petroleo-700);
  color: var(--claro-forte);
}
.dia-botao .semana {
  display: block;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.72;
}
.dia-botao .numero {
  display: block;
  font-family: var(--fonte-titulo);
  font-variant-numeric: lining-nums;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.25;
}
.dia-botao .mes { display: block; font-size: var(--t-xs); opacity: 0.75; }

/* ---------- Grade de horários ---------- */
.horarios-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: var(--s-3);
}
.horario-botao {
  min-height: 52px;
  border: 1px solid rgba(8, 117, 138, 0.28);
  border-radius: var(--raio-campo);
  background: #fff;
  color: var(--petroleo-700);
  font-family: var(--fonte-corpo);
  font-size: var(--t-base);
  font-weight: 600;
  font-variant-numeric: lining-nums;
  cursor: pointer;
  transition: border-color var(--dur-rapida) var(--ease-saida),
              background-color var(--dur-rapida) var(--ease-saida),
              color var(--dur-rapida) var(--ease-saida);
}
.horario-botao:hover { background: var(--agua); border-color: var(--teal); }
.horario-botao[aria-pressed="true"] {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

.aviso-vazio {
  padding: var(--s-5);
  border-radius: var(--raio-campo);
  background: var(--agua);
  color: var(--petroleo-700);
  font-size: var(--t-sm);
}

/* ---------- Resumo e pagamento ---------- */
.resumo {
  margin-top: var(--s-6);
  padding: var(--s-5);
  border-radius: var(--raio-card);
  background: var(--petroleo-700);
  color: var(--claro-forte);
}
.resumo h2 {
  font-family: var(--fonte-corpo);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-selo);
  text-transform: uppercase;
  color: var(--dourado);
  margin: 0 0 var(--s-3);
}
.resumo dl { margin: 0 0 var(--s-5); }
.linha-resumo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  justify-content: space-between;
  align-items: baseline;
  padding-block: var(--s-3);
}
.linha-resumo + .linha-resumo { border-top: 1px solid var(--linha-escura); }
.linha-resumo dt { color: var(--claro-fraco); font-size: var(--t-sm); }
.linha-resumo dd { margin: 0; font-weight: 600; font-variant-numeric: lining-nums; }

.resumo .campo > span { color: var(--claro-medio); }
.resumo .campo input {
  background: rgba(246, 248, 248, 0.06);
  border-color: var(--linha-escura);
  color: var(--claro-forte);
}
.resumo .campo input::placeholder { color: var(--claro-fraco); }
.resumo .campo input:focus {
  border-color: var(--dourado);
  box-shadow: 0 0 0 3px var(--dourado-fraco);
}
.resumo .campo__erro { color: var(--dourado-claro); }

.selo-seguro {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin-top: var(--s-4);
  font-size: var(--t-xs);
  color: var(--claro-fraco);
  line-height: 1.65;
}
.selo-seguro svg { width: 18px; height: 18px; color: var(--dourado); flex-shrink: 0; margin-top: 2px; }

/* ---------- Estados da confirmação ---------- */
.estado-confirmacao { text-align: center; }
.estado-confirmacao .marca-estado {
  width: 76px;
  height: 76px;
  margin: 0 auto var(--s-5);
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.estado-confirmacao .marca-estado svg { width: 34px; height: 34px; }
.estado--ok .marca-estado { background: var(--agua); color: var(--teal); }
.estado--espera .marca-estado { background: rgba(217, 165, 46, 0.16); color: #7A5C11; }
.estado--fim .marca-estado { background: rgba(180, 71, 47, 0.1); color: #8A3A28; }

.estado-confirmacao h1 { font-size: var(--t-h2); color: var(--petroleo-700); }
.estado-confirmacao > p { margin: var(--s-4) auto 0; max-width: 52ch; color: var(--cinza); }
.estado-confirmacao .acoes {
  margin-top: var(--s-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  justify-content: center;
}

.contador {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  margin-top: var(--s-5);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--raio-pill);
  background: rgba(217, 165, 46, 0.14);
  color: #7A5C11;
  font-size: var(--t-sm);
  font-weight: 600;
}
.contador strong {
  font-family: var(--fonte-titulo);
  font-variant-numeric: lining-nums;
  font-size: var(--t-xl);
}

.detalhes-sessao {
  margin: var(--s-6) auto 0;
  max-width: 480px;
  text-align: left;
  border: 1px solid var(--linha-clara);
  border-radius: var(--raio-card);
  padding: var(--s-3) var(--s-5);
}
.detalhes-sessao dl { margin: 0; }
.detalhes-sessao .linha-resumo dt { color: var(--cinza); }
.detalhes-sessao .linha-resumo dd { color: var(--petroleo-700); }
.detalhes-sessao .linha-resumo + .linha-resumo { border-top-color: var(--linha-clara); }

.proximos-passos {
  margin: var(--s-6) auto 0;
  max-width: 520px;
  text-align: left;
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--s-4);
}
.proximos-passos li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--s-3);
  font-size: var(--t-sm);
  color: var(--cinza);
}
.proximos-passos svg { width: 20px; height: 20px; color: var(--teal); margin-top: 2px; }

.carregando {
  display: grid;
  justify-items: center;
  gap: var(--s-4);
  padding: var(--s-8) 0;
  color: var(--cinza);
  font-size: var(--t-sm);
}
.carregando::before {
  content: "";
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--linha-clara);
  border-top-color: var(--teal);
  animation: girar 0.9s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .carregando::before { animation: none; }
  .dia-botao:hover { transform: none; }
}

@media (max-width: 720px) {
  .cartao-fluxo h1 { font-size: var(--t-h3); }
  .horarios-grade { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
}

/* ---------- Páginas de texto (privacidade, 404) ---------- */
.texto-legal { max-width: 74ch; margin-inline: auto; }
.texto-legal h1 { font-size: var(--t-h2); color: var(--petroleo-700); }
.texto-legal .atualizado {
  margin-top: var(--s-3);
  font-size: var(--t-sm);
  color: var(--cinza);
}
.texto-legal h2 {
  margin-top: var(--s-7);
  font-size: var(--t-h3);
  color: var(--petroleo-700);
}
.texto-legal h3 {
  margin-top: var(--s-5);
  font-family: var(--fonte-corpo);
  font-size: var(--t-base);
  font-weight: 700;
  color: var(--petroleo-700);
}
.texto-legal p, .texto-legal li { color: var(--grafite); }
.texto-legal p { margin-top: var(--s-4); }
.texto-legal ul { margin: var(--s-4) 0 0; padding-left: var(--s-4); }
.texto-legal li { margin-bottom: var(--s-3); }
.texto-legal .destaque {
  margin-top: var(--s-6);
  padding: var(--s-5);
  border-radius: var(--raio-card);
  background: var(--agua);
  border-left: 3px solid var(--teal);
}
.texto-legal .destaque p:first-child { margin-top: 0; }

.pagina-erro { text-align: center; padding-block: var(--s-9); }
.pagina-erro .codigo {
  font-family: var(--fonte-titulo);
  font-variant-numeric: lining-nums;
  font-size: clamp(4rem, 14vw, 8rem);
  line-height: 1;
  color: var(--petroleo-700);
  opacity: .5;
}
.pagina-erro h1 { margin-top: var(--s-4); font-size: var(--t-h2); color: var(--petroleo-700); }
.pagina-erro p { margin: var(--s-4) auto 0; max-width: 46ch; color: var(--cinza); }
.pagina-erro .acoes { margin-top: var(--s-6); display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; }