/* Visual final (S5). Tudo aqui: a política de segurança não aceita estilo dentro do HTML. */
:root {
  --azul: #224191;
  --azul-escuro: #1A3473;
  --azul-pressionado: #142A5E;
  --azul-claro: #E8EDF8;
  --azul-claro-2: #D5DEF2;
  --azul-borda: #6F84C2;
  --azul-borda-suave: #C3CEEA;
  --verde: #35A74A;
  --verde-texto: #1F7A33;
  --verde-claro: #EAF6EC;
  --verde-borda: #A9D8B2;
  --texto: #172033;
  --texto-2: #626163;
  --borda-campo: #7A8394;
  --desab-texto: #5B6474;
  --desab-fundo: #E3E7EE;
  --cinza-100: #EEF1F5;
  --cinza-200: #DDE2EA;
  --cinza-300: #C9D0DC;
  --fundo: #F4F6FA;
  --branco: #FFFFFF;
  --erro: #B42318;
  --erro-claro: #FEF3F2;
  --erro-borda: #F4B8B1;
  --atencao: #7A4A00;
  --atencao-claro: #FFF6E5;
  --atencao-borda: #F0C36D;
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 24px;
  --esp-6: 32px;
  --esp-7: 48px;
  --esp-8: 64px;
  --raio-sm: 6px;
  --raio-md: 8px;
  --raio-lg: 12px;
  --sombra-1: 0 1px 2px rgba(23, 32, 51, .06), 0 1px 3px rgba(23, 32, 51, .04);
  --sombra-2: 0 1px 2px rgba(23, 32, 51, .04), 0 4px 8px rgba(23, 32, 51, .04), 0 16px 32px rgba(23, 32, 51, .06);
  --dur-rapida: 150ms;
  --dur-media: 250ms;
  --dur-lenta: 400ms;
  --curva: cubic-bezier(.2, 0, 0, 1);
  --curva-entrada: cubic-bezier(.05, .7, .1, 1);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--texto);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--branco); font-size: 1rem; line-height: 1.5; }
h1, h2, p { margin: 0; }
a { color: var(--azul); }
strong { font-weight: 700; }

:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }

.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icone {
  width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.icone--grande { width: 32px; height: 32px; }
.icone--selo { width: 32px; height: 32px; stroke: var(--branco); stroke-width: 3; }

/* ---------- estrutura ---------- */
.pagina { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
.cartao { background: var(--branco); padding: var(--esp-5) var(--esp-4) var(--esp-6); }
.logo { display: block; height: 40px; width: auto; }
.titulo {
  font-size: 1.625rem; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; text-wrap: balance;
  margin-top: var(--esp-5);
}
.subtitulo { margin-top: var(--esp-2); color: var(--texto-2); }
.garantias {
  list-style: none; margin: var(--esp-4) 0 var(--esp-5); padding: 0; display: flex; flex-wrap: wrap;
  gap: var(--esp-1) var(--esp-4); font-size: .875rem; font-weight: 600; color: var(--texto);
}
.garantias li + li::before { content: "·"; margin-right: var(--esp-4); color: var(--texto-2); }
.rodape { padding: var(--esp-4); text-align: center; font-size: .8125rem; line-height: 1.45; color: var(--texto-2); }
.rodape a { color: var(--texto-2); }

.marcar__lateral { margin-bottom: var(--esp-2); }
.atual {
  margin-top: var(--esp-4); padding: var(--esp-3) var(--esp-4); background: var(--fundo);
  border-radius: var(--raio-md);
}
.atual__rotulo {
  font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-2);
}
.atual__texto { margin-top: var(--esp-1); font-weight: 600; }

/* ---------- passos ---------- */
.campos { border: 0; margin: 0; padding: 0; min-width: 0; }
.passo { margin-bottom: var(--esp-6); }
.passo__titulo {
  display: flex; align-items: center; gap: var(--esp-2); margin-bottom: var(--esp-3);
  font-size: 1.25rem; line-height: 1.3; font-weight: 700; text-wrap: balance;
}
.passo__numero {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px;
  border-radius: 50%; background: var(--azul-claro); color: var(--azul); font-size: .875rem; font-weight: 700;
}
.passo__nota { margin-bottom: var(--esp-3); font-size: .875rem; color: var(--texto-2); }

/* ---------- avisos ---------- */
.aviso {
  display: flex; gap: var(--esp-3); margin: 0 0 var(--esp-4); padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--azul-borda-suave); border-radius: var(--raio-md); background: var(--azul-claro);
  color: var(--texto); font-size: .875rem; line-height: 1.5; animation: entrada var(--dur-media) var(--curva-entrada);
}
.aviso .icone { margin-top: 2px; color: var(--azul); }
.aviso__corpo { min-width: 0; flex: 1; }
.aviso__corpo p + p { margin-top: var(--esp-1); }
.aviso__titulo { font-size: 1rem; font-weight: 600; line-height: 1.5; }
.aviso .botao { margin-top: var(--esp-3); width: auto; min-height: 44px; }
.aviso--erro { background: var(--erro-claro); border-color: var(--erro-borda); }
.aviso--erro .icone, .aviso--erro .aviso__titulo { color: var(--erro); }
.aviso--atencao { background: var(--atencao-claro); border-color: var(--atencao-borda); }
.aviso--atencao .icone, .aviso--atencao .aviso__titulo { color: var(--atencao); }
.aviso--sucesso { background: var(--verde-claro); border-color: var(--verde-borda); }
.aviso--sucesso .icone, .aviso--sucesso .aviso__titulo { color: var(--verde-texto); }
.aviso--info { background: var(--azul-claro); border-color: var(--azul-borda-suave); }

/* ---------- estados de tela inteira ---------- */
.vazio { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--esp-6) 0; }
.vazio__icone {
  display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px;
  border-radius: 50%; background: var(--cinza-100); color: var(--desab-texto);
}
.vazio--atencao .vazio__icone { background: var(--atencao-claro); color: var(--atencao); }
.vazio__titulo {
  margin-top: var(--esp-4); font-size: 1.25rem; line-height: 1.3; font-weight: 700; text-wrap: balance;
}
.vazio__texto { margin-top: var(--esp-2); max-width: 32rem; color: var(--texto-2); }
.vazio .botao { margin-top: var(--esp-5); width: auto; }
.contato { margin-top: var(--esp-4); font-size: .875rem; color: var(--texto-2); }
.contato a { white-space: nowrap; }

/* ---------- carregando ---------- */
.esqueleto__bloco {
  height: 48px; border-radius: var(--raio-md); background: var(--desab-fundo);
  animation: pulso 1.2s ease-in-out infinite;
}
.esqueleto__titulo { width: 60%; height: 28px; margin-bottom: var(--esp-3); }
.esqueleto__dias { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--esp-2); margin-bottom: var(--esp-6); }
.esqueleto__dias .esqueleto__bloco { height: 56px; }
.esqueleto__horarios { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--esp-2); }

/* ---------- chips de dia e grade de horários ---------- */
.dias { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--esp-2); }
.dia, .horario { position: relative; display: block; margin: 0; }
.dia__radio, .horario__radio {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;
}
.dia__corpo, .horario__corpo {
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--esp-2);
  border: 1px solid var(--azul-borda); border-radius: var(--raio-md); background: var(--branco); color: var(--azul);
  font-variant-numeric: tabular-nums;
  transition: background-color var(--dur-rapida) var(--curva), border-color var(--dur-rapida) var(--curva),
    color var(--dur-rapida) var(--curva);
}
.dia__corpo { min-height: 56px; }
.dia__nome { font-weight: 700; line-height: 1.25; }
.dia__data { font-size: .875rem; line-height: 1.25; color: var(--texto-2); }
.dia__radio:checked + .dia__corpo, .horario__radio:checked + .horario__corpo {
  background: var(--azul); border-color: var(--azul); color: var(--branco);
}
.dia__radio:checked + .dia__corpo .dia__data { color: var(--branco); }
.dia__radio:focus-visible + .dia__corpo, .horario__radio:focus-visible + .horario__corpo {
  outline: 3px solid var(--azul); outline-offset: 2px;
}
.dia--lotado .dia__corpo, .horario--lotado .horario__corpo {
  background: var(--cinza-100); border: 1px dashed var(--cinza-300); color: var(--desab-texto);
}
.dia--lotado .dia__data { color: var(--desab-texto); text-decoration: line-through; }
.dia--lotado .dia__radio, .horario--lotado .horario__radio, .horario--atual .horario__radio { cursor: not-allowed; }

.horarios { min-height: 48px; }
.grupo + .grupo { margin-top: var(--esp-4); }
.grupo__titulo {
  margin-bottom: var(--esp-2); font-size: .8125rem; line-height: 1.45; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--texto-2);
}
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); gap: var(--esp-2); }
.horario__corpo { min-height: 48px; font-weight: 600; line-height: 1.25; }
.horario__radio:checked + .horario__corpo { font-weight: 700; }
.horario--lotado .horario__corpo { font-weight: 400; text-decoration: line-through; }
.horario--atual .horario__corpo { background: var(--azul-claro); border: 1px dashed var(--azul); color: var(--azul); }
.horario__marca { font-size: .8125rem; font-weight: 400; line-height: 1.2; text-decoration: none; }
.legenda { margin-top: var(--esp-3); font-size: .8125rem; line-height: 1.45; color: var(--texto-2); }

@media (hover: hover) {
  .dia__radio:not(:checked):not(:disabled):hover + .dia__corpo,
  .horario__radio:not(:checked):not(:disabled):hover + .horario__corpo {
    background: var(--azul-claro); border-color: var(--azul);
  }
}

.escolha {
  display: flex; gap: var(--esp-2); align-items: flex-start; margin-top: var(--esp-4); padding: var(--esp-3) var(--esp-4);
  border-radius: var(--raio-md); background: var(--cinza-100); color: var(--texto-2); font-size: .875rem;
}
.escolha .icone { margin-top: 2px; }
.escolha[data-estado="cheio"] { background: var(--azul-claro); color: var(--texto); box-shadow: var(--sombra-1); }
.escolha[data-estado="cheio"] .icone { color: var(--azul); }
.escolha[data-estado="erro"] {
  background: var(--erro-claro); border: 1px solid var(--erro-borda); color: var(--erro); font-weight: 600;
}

/* ---------- campos ---------- */
.campo { margin-bottom: var(--esp-4); }
.campo label { display: block; margin-bottom: var(--esp-1); font-size: .875rem; font-weight: 600; }
.campo__dica { margin-bottom: var(--esp-1); font-size: .8125rem; line-height: 1.45; color: var(--texto-2); }
.campo__erro {
  display: flex; gap: var(--esp-2); align-items: flex-start; margin-bottom: var(--esp-1); font-size: .875rem;
  font-weight: 600; color: var(--erro);
}
.campo__erro .icone { margin-top: 1px; }
.campo input {
  display: block; width: 100%; min-height: 48px; padding: 0 var(--esp-3); font: inherit; font-size: 1rem;
  color: var(--texto); background: var(--branco); border: 1px solid var(--borda-campo); border-radius: var(--raio-md);
}
.campo input:hover { border-color: var(--texto-2); }
.campo input:focus { border-color: var(--azul); }
.campo input[aria-invalid="true"] { border-color: var(--erro); box-shadow: inset 0 0 0 1px var(--erro); }
.campo:has(input[aria-invalid="true"]) { border-left: 4px solid var(--erro); padding-left: var(--esp-3); }
.campo input:disabled { background: var(--cinza-100); border-color: var(--cinza-300); color: var(--desab-texto); }

.privacidade {
  display: flex; gap: var(--esp-2); align-items: flex-start; margin: 0 0 var(--esp-4); font-size: .875rem;
  color: var(--texto-2);
}
.privacidade .icone { margin-top: 2px; color: var(--verde-texto); }

/* ---------- botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2); width: 100%; min-height: 52px;
  padding: 0 var(--esp-5); border: 1px solid transparent; border-radius: var(--raio-md); font: inherit;
  font-weight: 600; text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-rapida) var(--curva), border-color var(--dur-rapida) var(--curva);
}
.botao--primario { background: var(--azul); color: var(--branco); box-shadow: 0 1px 2px rgba(23, 32, 51, .2); }
.botao--primario:active { background: var(--azul-pressionado); }
.botao--secundario { background: var(--branco); color: var(--azul); border-color: var(--azul-borda); }
.botao--secundario:active { background: var(--azul-claro-2); }
.botao:disabled { background: var(--desab-fundo); color: var(--desab-texto); border-color: transparent; box-shadow: none; cursor: not-allowed; }
.botao[data-estado="enviando"]:disabled { background: var(--azul-escuro); color: var(--branco); cursor: progress; }
@media (hover: hover) {
  .botao--primario:not(:disabled):hover { background: var(--azul-escuro); }
  .botao--secundario:not(:disabled):hover { background: var(--azul-claro); border-color: var(--azul); }
}
.girador {
  display: none; width: 18px; height: 18px; border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: girar .8s linear infinite;
}
.botao[data-estado="verificando"] .girador, .botao[data-estado="interacao"] .girador,
.botao[data-estado="enviando"] .girador { display: inline-block; }
.dica-botao { margin-top: var(--esp-2); text-align: center; font-size: .8125rem; line-height: 1.45; color: var(--texto-2); }
.verificacao { margin-bottom: var(--esp-3); }

/* ---------- confirmação ---------- */
.confirmacao { display: flex; flex-direction: column; align-items: center; text-align: center; }
.confirmacao .titulo { margin-top: var(--esp-4); }
.selo {
  display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-top: var(--esp-5);
  border-radius: 50%; background: var(--verde); animation: selo var(--dur-lenta) var(--curva-entrada);
}
.resumo {
  width: 100%; margin: var(--esp-5) 0 var(--esp-4); padding: var(--esp-4); border: 1px solid var(--cinza-200);
  border-radius: var(--raio-lg); box-shadow: var(--sombra-1); text-align: left;
}
.resumo__data { font-size: 1.125rem; line-height: 1.35; font-weight: 700; }
.resumo__hora, .resumo__antes, .resumo__evento { margin-top: var(--esp-1); font-variant-numeric: tabular-nums; }
.resumo__antes, .resumo__evento { font-size: .875rem; color: var(--texto-2); }
.divisoria { margin: var(--esp-3) 0; border: 0; border-top: 1px solid var(--cinza-200); }
.confirmacao .aviso { width: 100%; text-align: left; }
.agenda__titulo { margin-top: var(--esp-4); font-size: 1.25rem; line-height: 1.3; font-weight: 700; }
.agenda__botoes { display: flex; flex-direction: column; gap: var(--esp-2); width: 100%; margin-top: var(--esp-3); }
.dica { margin-top: var(--esp-2); font-size: .8125rem; line-height: 1.45; color: var(--texto-2); }
.nota { margin-top: var(--esp-4); font-size: .875rem; color: var(--texto-2); }
.confirmacao .aviso--info { margin-top: var(--esp-4); margin-bottom: 0; }

/* ---------- animações ---------- */
@keyframes entrada { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes selo { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes pulso { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* ---------- tablet e computador ---------- */
@media (min-width: 640px) {
  body { background: var(--fundo); }
  .pagina { align-items: center; padding: var(--esp-6) var(--esp-4); }
  main { display: flex; flex: none; justify-content: center; width: 100%; }
  .cartao { width: 640px; max-width: 100%; padding: var(--esp-6); border-radius: var(--raio-lg); box-shadow: var(--sombra-2); }
  .cartao--estreito { width: 600px; }
  .dias { grid-auto-flow: column; grid-auto-columns: 1fr; grid-template-columns: none; }
  .grade { grid-template-columns: repeat(6, 1fr); }
  .agenda__botoes { flex-direction: row; }
  .agenda__botoes .botao { flex: 1; }
}

@media (min-width: 1024px) {
  .cartao--largo { width: 976px; }
  .marcar { display: grid; grid-template-columns: 340px 1fr; gap: var(--esp-7); align-items: start; }
  .marcar__lateral { position: sticky; top: var(--esp-6); }
  .marcar__lateral .logo { height: 48px; }
  .marcar__lateral .titulo { font-size: 2rem; }
  .garantias { flex-direction: column; }
  .garantias li + li::before { content: none; }
  .grade { grid-template-columns: repeat(7, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .girador, .esqueleto__bloco { animation: none; }
}