/* Rodapé institucional + modais (Termos, Privacidade, Contato).
   Compartilhado por index.html e result.html — os textos legais precisam ser
   idênticos nas duas páginas, então vivem em um lugar só.
   Depende das variáveis de tema definidas em cada página (--card, --tinta, etc.). */

/* ---------- menu do rodapé ---------- */
.menu-rodape{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;margin:6px 0}
.menu-rodape button{
  display:inline-block;padding:10px 12px;      /* alvo de toque confortável sem inchar o rodapé */
  background:none;border:0;cursor:pointer;
  font-family:inherit;font-size:.72rem;color:var(--suave);line-height:1.3;
  border-left:1px solid transparent;           /* divisória visual, não lida por leitor de tela */
  transition:color .2s ease;
}
.menu-rodape button + button{border-left-color:var(--linha)}
.menu-rodape button:hover{color:var(--tinta);text-decoration:underline}
.copy{font-size:.68rem;opacity:.85}

/* ---------- modais ---------- */
#modal{
  width:calc(100% - 28px);max-width:620px;max-height:86vh;
  margin:auto;   /* explícito: um reset `*{margin:0}` na página mataria a centralização padrão do <dialog> */
  padding:0;border:1px solid var(--linha);border-radius:6px;background:var(--card);color:var(--tinta);
  box-shadow:0 20px 60px rgba(0,0,0,.45);overflow:hidden;
}
#modal::backdrop{background:rgba(9,20,16,.72)}
#modal[open]{animation:modal-sobe .22s ease both}
@keyframes modal-sobe{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.modal-topo{
  position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:12px;
  padding:16px 12px 14px 20px;background:var(--card);border-bottom:1px solid var(--linha);
}
.modal-h{flex:1 1 auto;font-family:'Young Serif',Georgia,serif;font-weight:400;font-size:1.15rem;line-height:1.3;margin:0}
.fechar{
  flex:0 0 auto;width:44px;height:44px;padding:0;
  background:none;border:0;border-radius:10px;cursor:pointer;
  font-size:1.6rem;line-height:1;color:var(--suave);
  transition:background .2s ease,color .2s ease;
}
.fechar:hover{background:var(--fundo);color:var(--tinta)}

.modal-corpo{
  padding:18px 20px 26px;overflow-y:auto;max-height:calc(86vh - 66px);
  -webkit-overflow-scrolling:touch;font-size:.92rem;line-height:1.62;text-align:left;
}
.modal-corpo:focus{outline:none}
.modal-corpo h3{
  font-family:'Instrument Sans',system-ui,sans-serif;font-weight:700;font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--acento-texto);
  margin:22px 0 8px;
}
.modal-corpo h3:first-child{margin-top:0}
.modal-corpo p{margin:0 0 12px;color:var(--suave)}
.modal-corpo strong{color:var(--tinta)}
.modal-corpo ul{margin:0 0 12px;padding-left:20px;color:var(--suave)}
.modal-corpo li{margin-bottom:6px}
.modal-corpo a{color:var(--acento-texto);text-underline-offset:2px}
.modal-corpo .atualizado{
  font-size:.75rem;color:var(--suave);margin-top:22px;padding-top:14px;
  border-top:1px solid var(--linha);
}
.aviso-caixa{
  background:var(--ambar-claro);border:1px solid rgba(217,160,91,.34);
  border-radius:12px;padding:14px 16px;margin:0 0 14px;
}
.aviso-caixa p{color:var(--tinta);margin:0}
.aviso-caixa p + p{margin-top:8px}
.pendente{
  background:var(--salva-claro);border-radius:3px;padding:1px 6px;
  font-size:.85em;color:var(--acento-texto);font-weight:600;
}

@media (prefers-reduced-motion: reduce){
  #modal[open]{animation:none}
}