:root{
  --preto:#1D1D1B; --amarelo:#FDC300; --amarelo-esc:#D9A600;
  --texto:#1D1D1B; --texto2:#5A5A57; --borda:#D8D8D4; --fundo:#F5F5F2;
  --branco:#fff; --erro:#B3261E; --erro-fundo:#FDECEA;
  --raio:10px; --sombra:0 1px 3px rgba(0,0,0,.10);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fundo);color:var(--texto);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  padding-bottom:env(safe-area-inset-bottom)}
header{background:var(--branco);border-bottom:3px solid var(--amarelo)}
.cab{max-width:660px;margin:0 auto;padding:14px 18px;display:flex;align-items:center;gap:12px}
.cab img{height:44px;width:auto;flex:none}
.cab h1{font-size:15px;margin:0;line-height:1.25}
.cab h1 span{display:block;font-weight:400;font-size:13px;color:var(--texto2)}
main{max-width:660px;margin:0 auto;padding:18px}

.progresso{margin-bottom:18px}
.progresso-topo{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}
.progresso-topo b{font-size:14px}
.progresso-topo span{font-size:12.5px;color:var(--texto2)}
.barra{height:6px;background:#E3E3DF;border-radius:99px;overflow:hidden}
.barra i{display:block;height:100%;background:var(--amarelo);border-radius:99px;transition:width .25s ease}

.cartao{background:var(--branco);border:1px solid var(--borda);border-radius:var(--raio);
  padding:20px 18px;box-shadow:var(--sombra);margin-bottom:16px}
.cartao h2{font-size:19px;margin:0 0 4px}
.cartao .sub{color:var(--texto2);font-size:14px;margin:0 0 20px}

.campo{margin-bottom:17px}
label{display:block;font-weight:600;font-size:14.5px;margin-bottom:6px}
label .opc{font-weight:400;color:var(--texto2)}
.ajuda{font-size:12.5px;color:var(--texto2);margin:-2px 0 7px}
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=password],select,textarea{
  width:100%;padding:11px 12px;border:1px solid #BFBFBB;border-radius:8px;
  font:inherit;font-size:16px;background:var(--branco);color:var(--texto)}
textarea{min-height:88px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:3px solid rgba(253,195,0,.55);border-color:var(--preto)}
input[readonly]{background:#F0F0EC;color:var(--texto2)}
.erro-msg{color:var(--erro);font-size:13px;margin-top:5px;display:none}
.campo.invalido input,.campo.invalido select,.campo.invalido textarea{border-color:var(--erro);background:var(--erro-fundo)}
.campo.invalido .erro-msg,fieldset.invalido>.erro-msg{display:block}

fieldset{border:1px solid var(--borda);border-radius:8px;padding:13px 14px;margin:0 0 17px}
legend{font-weight:600;font-size:14.5px;padding:0 6px}
.opcao{display:flex;gap:11px;align-items:flex-start;padding:9px 0;cursor:pointer}
.opcao+.opcao{border-top:1px solid #EEEEEA}
.opcao input{margin:3px 0 0;width:19px;height:19px;flex:none;accent-color:var(--preto)}
.opcao .t{font-size:15px}
.opcao .d{font-size:12.5px;color:var(--texto2);margin-top:2px}
fieldset.invalido{border-color:var(--erro)}

/* Escolha obrigatoria entre autorizar e nao autorizar.
   Uma caixa por assinalar nao distingue "recusei" de "nao vi". */
.escolha{padding:12px 0;border-top:1px solid #EEEEEA}
.escolha:first-of-type{border-top:none;padding-top:4px}
.escolha .t{display:block;font-size:15px;font-weight:600}
.escolha .d{display:block;font-size:12.5px;color:var(--texto2);margin-top:2px}
.sn{display:flex;gap:9px;margin-top:9px;flex-wrap:wrap}
.sn label{display:flex;align-items:center;gap:7px;cursor:pointer;font-size:14.5px;
  font-weight:400;margin:0;padding:9px 14px;border:1px solid #BFBFBB;border-radius:8px;
  background:#fff;flex:1;min-width:132px}
.sn input{width:18px;height:18px;margin:0;flex:none;accent-color:var(--preto)}
.sn label:has(input:checked){border-color:var(--preto);background:#FFFDF3;font-weight:600}
.sn label:focus-within{outline:2px solid var(--amarelo);outline-offset:1px}
.escolha.invalido .sn label{border-color:var(--erro)}
.escolha .erro-msg{display:none;margin-top:7px}
.escolha.invalido .erro-msg{display:block}

.nota{border-left:3px solid var(--amarelo);background:#FFFDF3;padding:11px 13px;font-size:13.5px;
  border-radius:0 6px 6px 0;margin-bottom:18px}
.nota b{display:block;margin-bottom:3px}
.alerta{border-left:3px solid var(--erro);background:var(--erro-fundo);padding:11px 13px;
  font-size:14px;border-radius:0 6px 6px 0;margin-bottom:18px}

.botoes{display:flex;gap:10px;margin-top:22px}
button,.botao{font:inherit;font-size:16px;font-weight:600;border-radius:8px;padding:13px 18px;
  cursor:pointer;border:1px solid transparent;min-height:48px;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center}
.btn-principal{background:var(--amarelo);color:var(--preto);border-color:var(--amarelo-esc);flex:1}
.btn-principal:hover{background:var(--amarelo-esc)}
.btn-principal[disabled]{opacity:.6;cursor:progress}
.btn-sec{background:var(--branco);color:var(--texto);border-color:#BFBFBB}
.btn-sec:hover{background:#F0F0EC}
button:focus-visible{outline:3px solid rgba(29,29,27,.6);outline-offset:2px}

.rev{border:1px solid var(--borda);border-radius:8px;overflow:hidden;margin-bottom:15px}
.rev h3{margin:0;font-size:14px;background:#F0F0EC;padding:9px 13px;display:flex;
  justify-content:space-between;align-items:center}
.rev h3 button{background:none;border:none;font-size:13px;font-weight:600;text-decoration:underline;
  padding:2px 4px;min-height:auto;color:var(--texto)}
.rev dl{margin:0;padding:5px 13px 11px}
.rev dt{font-size:12.5px;color:var(--texto2);margin-top:9px}
.rev dd{margin:1px 0 0;font-size:15px;word-break:break-word}

.conf{text-align:center;padding:8px 0 4px}
.conf .marca{width:62px;height:62px;border-radius:50%;background:var(--amarelo);display:flex;
  align-items:center;justify-content:center;margin:0 auto 16px;font-size:32px;line-height:1}
.conf h2{font-size:21px;margin:0 0 8px}
.ref{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:21px;font-weight:700;
  letter-spacing:.5px;background:var(--preto);color:var(--amarelo);display:inline-block;
  padding:10px 16px;border-radius:8px;margin:6px 0 16px}
.conf ul{text-align:left;font-size:14.5px;padding-left:20px;margin:0 0 4px}
.conf ul li{margin-bottom:7px}

.escondido{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
footer{max-width:660px;margin:0 auto;padding:20px 18px 34px;font-size:11.5px;color:var(--texto2);
  text-align:center;line-height:1.6}
footer a{color:var(--texto2)}
@media (min-width:600px){ .cartao{padding:26px} .cab img{height:52px} .cab h1{font-size:16px} }

/* -------------------------------------------------------- marca de agua ---
   O emblema do clube, grande, por tras do preenchimento. Fica FIXO e por CIMA
   dos cartoes, nao por baixo: se ficasse por baixo, os cartoes brancos
   tapavam-no e so se veria nas margens. A 5% de opacidade nao mexe na leitura
   dos campos, e acompanha o formulario enquanto se percorre a pagina.

   So entra nas paginas que se preenchem — inscricao, termo, confirmacao e
   ecras de entrada — porque numa tabela de dados so atrapalharia. */
.marca-agua::after{
  content:"";
  position:fixed; inset:0; z-index:3;
  pointer-events:none;                 /* nunca apanha cliques nem toques */
  background:url('logo.png') no-repeat center 46%;
  background-size:min(620px, 78vw);
  opacity:.055;
}
.marca-agua header, .marca-agua main, .marca-agua footer{ position:relative; z-index:4 }
.marca-agua main{ z-index:2 }

@media print{ .marca-agua::after{ opacity:.09 } }

/* ------------------------------------------------------ texto justificado ---
   Nos formulários justifica-se o texto corrido: a introdução de cada secção,
   as notas, as explicações por baixo de cada autorização e a lista do ecrã de
   confirmação. Fica de fora tudo o que é linha curta — rótulos, ajudas de um
   fôlego e mensagens de erro —, porque justificar uma linha de cinco palavras
   abre buracos brancos entre elas. */
.cartao > .sub, .nota, .opcao .d, .escolha .d, .conf ul li, .alerta{
  text-align:justify; text-justify:inter-word;
  hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word }

/* -------------------------------------------------- pares de campos numa linha ---
   O contacto de emergência é uma coisa só: um nome e um telefone. Estavam como
   dois campos independentes, um por baixo do outro, e liam-se como duas
   perguntas separadas. Agora são um bloco com dois campos lado a lado — no
   telemóvel voltam a empilhar-se, que é onde faz falta. */
fieldset.par{ border:1px solid var(--borda); border-radius:10px; padding:14px 16px 4px;
  margin:0 0 18px }
fieldset.par > legend{ font-size:15px; font-weight:700; padding:0 6px }
fieldset.par > .ajuda{ margin:0 0 10px }
.dois{ display:grid; gap:0 14px; grid-template-columns:1fr }
@media (min-width:520px){
  .dois{ grid-template-columns:1fr 1fr }
}

/* ------------------------------------------------- ver a palavra-passe ---
   O botao fica DENTRO do campo, encostado a direita, e o campo ganha
   espaco a direita para o texto nao passar por baixo do olho. */
.pp-caixa{position:relative;display:block}
.pp-caixa input{padding-right:46px !important;width:100%}
.pp-olho{position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:38px;height:38px;min-height:38px;padding:0;margin:0;border:0;background:none;
  color:#5A5A57;cursor:pointer;display:flex;align-items:center;justify-content:center;
  border-radius:7px}
.pp-olho:hover{background:#F0F0EC;color:#1D1D1B}
.pp-olho:focus-visible{outline:2px solid var(--amarelo);outline-offset:1px}

/* Link discreto por baixo do botao de entrar. */
.esqueci{display:block;text-align:center;margin-top:14px;font-size:13.5px}
.esqueci a{color:var(--texto2)}
.esqueci a:hover{color:var(--texto)}