/* ================================================================
   MODAL-IDADE.CSS
   O aviso "Uma regra só" que aparece por cima de tudo quando a
   pessoa clica em "Começar →" na intro. Os BOTÕES de dentro do
   modal (.modal-btn) ficam em botoes.css — aqui só está a "moldura":
   o fundo escurecido e a caixa branca do modal em si.
   ================================================================ */

.modal-overlay{
  /* o fundo escuro que cobre a tela inteira atrás do modal */
  position:fixed;inset:0;z-index:60;
  /* z-index:60 — de propósito bem mais alto que a .cta-bar (z-index:30)
     e qualquer outra coisa do site, porque o modal PRECISA ficar por
     cima de absolutamente tudo enquanto estiver aberto */
  background:rgba(0,0,0,0.88);
  display:none;align-items:center;justify-content:center;padding:var(--gut);
  backdrop-filter:blur(3px);
  /* desfoca levemente o que está atrás do overlay — reforça visualmente
     que o foco agora é só no modal, o resto da tela "sai de cena" */
}
.modal-overlay.active{display:flex;animation:enter .25s ease both;}
/* a classe .active é adicionada pelo JavaScript (js/modal-idade.js)
   quando a pessoa clica em "Começar →" */
.modal{
  width:100%;max-width:400px;background:#0b0b0b;border:1px solid var(--line);
  border-radius:4px;padding:26px 22px;
}
.modal h3{font-family:'Anton',sans-serif;font-weight:400;font-size:22px;letter-spacing:0.02em;text-transform:uppercase;}
.modal p{margin-top:12px;font-size:13px;line-height:1.7;color:var(--muted);}