/* Moldura das páginas de adesão — versão para o alojamento cPanel.
 *
 * Difere da que corre no VPS num ponto: aqui o formulário vem de outro domínio
 * (pulsar-origin), por isso o browser não deixa medir-lhe a altura. Em vez de
 * a página crescer com o conteúdo, o formulário ocupa o ecrã abaixo do
 * cabeçalho e faz o seu próprio scroll. Uma só região de rolamento — o que se
 * quer evitar num checkout são duas, aninhadas.
 *
 * O tema e a correção dos preços continuam a funcionar: são injetados pelo
 * nginx do VPS no próprio HTML da Regybox, antes de chegar ao browser.
 */
:root {
  --fundo:    #0d0d0f;
  --tinta:    #ffffff;
  --tinta-2:  #a5a6ad;
  --linha:    #2a2b30;
  --vermelho: #e23339;
  --topo: 62px;
  --display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --corpo: 'Barlow', system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--fundo); color: var(--tinta);
  font-family: var(--corpo); -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column;
}
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--vermelho); outline-offset: 2px; }

.topo {
  flex: 0 0 auto; min-height: var(--topo);
  display: flex; align-items: center; gap: 14px;
  padding: 0 16px; border-bottom: 1px solid var(--linha); background: var(--fundo);
}
.voltar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-left: -6px; flex: 0 0 auto;
  font-size: 20px; color: var(--tinta-2);
}
.voltar:hover, .voltar:focus-visible { color: var(--tinta); }
.topo > img { width: 32px; height: 32px; flex: 0 0 auto; }
.titulo { min-width: 0; line-height: 1.1; }
.titulo b {
  display: block; font-family: var(--display); font-size: 17px;
  letter-spacing: .01em; text-transform: uppercase;
}
.titulo small {
  display: block; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tinta-2); margin-top: 2px;
}
.ajuda {
  margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 0 13px; border: 1px solid var(--linha);
  font-size: 12.5px; font-weight: 600; color: var(--tinta-2);
}
.ajuda:hover, .ajuda:focus-visible { border-color: var(--vermelho); color: var(--tinta); }
.ajuda svg { width: 16px; height: 16px; fill: currentColor; }
@media (max-width: 480px) { .ajuda span { display: none; } .ajuda { padding: 0 11px; } }

/* O formulário ocupa o resto do ecrã e rola por dentro. */
.palco { flex: 1 1 auto; min-height: 0; background: #f4f4f3; }
.palco iframe { display: block; width: 100%; height: 100%; border: 0; }

.rodape {
  flex: 0 0 auto; padding: 9px 16px; border-top: 1px solid var(--linha);
  font-size: 11px; color: var(--tinta-2); text-align: center; background: var(--fundo);
}
.rodape b { color: var(--tinta); font-weight: 600; }