/* Componentes da página de espera. Só var(--*) de tokens.css; nenhum literal de estilo aqui. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--c-escuro); background-image: var(--g-palco); background-attachment: var(--fundo-fixo);
  color: var(--tx-2); font: var(--fw-texto) var(--fs-corpo)/var(--lh-texto) var(--f-texto);
}
a { color: var(--tx-1); text-underline-offset: var(--sublinhado); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: var(--foco-borda) solid var(--foco); outline-offset: var(--foco-offset); }
.wrap { width: 100%; max-width: var(--largura); margin: 0 auto; padding: var(--s-5) var(--s-4); }
.topo { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.topo img { height: var(--logo-alt); width: auto; display: block; }
.palco { display: grid; gap: var(--s-7); padding-block: var(--s-7) var(--s-8); }
@media (min-width: 1024px) { .palco { grid-template-columns: var(--grid-palco); align-items: start; padding-block: var(--s-8); } }
.selo { display: inline-block; color: var(--tx-ok); font-weight: var(--fw-forte); font-size: var(--fs-peq); letter-spacing: var(--tracking-selo); text-transform: uppercase; margin: 0 0 var(--s-4); }
h1, h2 { font-family: var(--f-titulo); font-weight: var(--fw-titulo); color: var(--tx-1); line-height: var(--lh-titulo); margin: 0 0 var(--s-5); }
h1 { font-size: var(--fs-h1); }
h1 em { font-style: normal; color: var(--tx-destaque); }
h2 { font-size: var(--fs-h2); }
.lead { font-size: var(--fs-lead); max-width: var(--largura-texto); margin: 0 0 var(--s-5); }
.lista { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-3); }
.lista li { padding-left: var(--s-5); position: relative; }
.lista li::before { content: ""; position: absolute; left: 0; top: var(--ponto-topo); width: var(--s-2); height: var(--s-2); border-radius: var(--raio-cheio); background: var(--c-coral); }
.cartao { background: var(--sup-1); border: var(--borda) solid var(--linha); border-radius: var(--raio); padding: var(--s-6) var(--s-5); }
.campo { display: grid; gap: var(--s-1); margin-bottom: var(--s-4); }
.campo label { color: var(--tx-1); font-weight: var(--fw-forte); font-size: var(--fs-peq); }
.campo input { height: var(--campo-alt); padding: 0 var(--s-3); border-radius: var(--raio); border: var(--borda) solid var(--linha-forte); background: var(--c-escuro); color: var(--tx-1); font: inherit; }
.campo small { color: var(--tx-3); font-size: var(--fs-peq); }
.aceite { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--fs-peq); margin: var(--s-2) 0 var(--s-5); }
.aceite input { margin-top: var(--s-1); accent-color: var(--c-coral); }
.btn { width: 100%; height: var(--campo-alt); border: 0; border-radius: var(--raio); background: var(--btn-bg); color: var(--btn-tx); font: var(--fw-titulo) var(--fs-corpo) var(--f-titulo); cursor: pointer; transition: background var(--dur); }
.btn:hover { background: var(--btn-bg-hover); }
.btn[disabled] { opacity: var(--opac-desab); cursor: progress; }
.status { min-height: var(--s-5); margin: var(--s-4) 0 0; font-size: var(--fs-peq); }
.status[data-tipo="ok"] { color: var(--tx-ok); }
.status[data-tipo="erro"] { color: var(--tx-destaque); }
.rodape { border-top: var(--borda) solid var(--linha); color: var(--tx-3); font-size: var(--fs-peq); display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between; }
.texto { max-width: var(--largura-texto); padding-block: var(--s-6) var(--s-8); }
.texto h2 { margin-top: var(--s-6); }
.oculto { position: absolute; left: calc(-100 * var(--largura)); }