*{padding:0;margin:0;box-sizing:border-box;}

/* ============ OVERLAY DE FUNDO ============ */
.bg-overlay{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-color:transparent;
}

body{
  display:flex;gap:20px;flex-direction:column;
  background-color:#222;
  background-attachment:fixed;
  background-position:top center;
  background-repeat:no-repeat;
  background-size:cover;
  color:#000;font-family:Tahoma,Geneva,sans-serif;font-size:14px;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  position:relative;
}

.rodape{
  background:#1c1c1c;border-top:1px solid #111;color:#BBB;
  padding:18px 16px;text-align:center;margin-top:auto;font-size:.82rem;
  position:relative;z-index:1;
}

a{color:#FFFF33;} a:visited{color:#FFCC00;} a:hover{color:#CCFF00;}
img{width:100%;display:block;}

/* largura controlada via CSS variable --largura definida no index.php */
.sistema{
  width:100%;
  max-width:var(--largura, 520px);
  display:flex;flex-wrap:wrap;
  flex-direction:column;margin:30px auto;padding:20px;
  position:relative;z-index:1;
  transition:max-width .25s ease;
}

.sistema .topo{display:flex;justify-content:center;padding:40px 0;}
.sistema .topo img{max-width:180px;animation:pulsar 2s ease-in-out infinite;}

@keyframes pulsar{
  0%{transform:scale(1);}
  50%{transform:scale(1.08);}
  100%{transform:scale(1);}
}

.sistema .bio{
  text-align:center;
  font-size:.9rem;
  color:#e2e2e2;
  line-height:1.55;
  max-width:100%;
  margin:-14px auto 24px;
  padding:0 8px;
  text-shadow:0 1px 6px rgba(0,0,0,.55);
  white-space:pre-line;
}
.sistema .bio a{color:#fff;text-decoration:underline;}

.sistema .botoes{display:flex;flex-direction:column;gap:20px;}
.sistema .botoes a{
  display:block;transition:transform .3s ease,opacity .3s ease,filter .3s ease;
  will-change:transform;border-radius:12px;overflow:hidden;
}
.sistema .botoes a:hover{
  transform:scale(1.05) translateY(-4px);opacity:.9;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.5));
}
.sistema .botoes a:active{transform:scale(.97);transition:transform .1s ease;}

@keyframes brilhoDourado{
  0%{filter:drop-shadow(0 0 3px rgba(212,160,23,.8)) drop-shadow(0 0 8px rgba(201,150,42,.6));}
  50%{filter:drop-shadow(0 0 10px rgba(212,160,23,1)) drop-shadow(0 0 22px rgba(201,150,42,.95)) drop-shadow(0 0 40px rgba(139,105,20,.8)) drop-shadow(0 0 60px rgba(212,160,23,.5));}
  100%{filter:drop-shadow(0 0 3px rgba(212,160,23,.8)) drop-shadow(0 0 8px rgba(201,150,42,.6));}
}


.aviso{
  background:rgba(28,28,28,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:26px 22px;
  text-align:center;
  color:#e8e8e8;
  box-shadow:0 12px 40px rgba(0,0,0,.45);
}
.aviso h2{
  font-size:1.02rem;font-weight:600;letter-spacing:.2px;
  margin-bottom:8px;color:#fff;
}
.aviso h2 i{margin-right:6px;opacity:.9;}
.aviso p{font-size:.85rem;line-height:1.55;color:#c8c8c8;margin:6px 0;}
.aviso .info{
  display:flex;justify-content:center;gap:20px;flex-wrap:wrap;
  margin:16px 0 18px;
}
.aviso .info div{font-size:.78rem;color:#a8a8a8;}
.aviso .info strong{display:block;color:#fff;font-size:1rem;font-weight:600;margin-top:2px;}
.aviso .acoes{display:flex;flex-direction:column;gap:10px;margin-top:4px;}
.aviso .btn-acao{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 20px;border-radius:12px;font-size:.88rem;font-weight:600;
  text-decoration:none;transition:transform .2s ease,background .2s ease,box-shadow .2s ease;
  border:none;cursor:pointer;
}
.aviso .btn-acao:active{transform:scale(.98);}
.aviso .btn-primario{
  background:#2563eb;color:#fff;
  box-shadow:0 6px 20px rgba(37,99,235,.35);
}
.aviso .btn-primario:hover{background:#1d4ed8;color:#fff;}
.aviso .btn-suave{
  background:rgba(255,255,255,.08);color:#e8e8e8;
  border:1px solid rgba(255,255,255,.12);
}
.aviso .btn-suave:hover{background:rgba(255,255,255,.14);color:#fff;}
.aviso .rodape-aviso{
  margin-top:14px;font-size:.72rem;color:#8a8a8a;line-height:1.5;
}

.link-pagamento{
  display:inline-flex;align-items:center;gap:7px;
  margin-top:18px;padding:9px 16px;
  font-size:.78rem;font-weight:500;letter-spacing:.2px;
  color:#a8a8a8;text-decoration:none;
  background:transparent;
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  transition:color .2s ease,border-color .2s ease,background .2s ease,transform .15s ease;
}
.link-pagamento i{font-size:.85rem;opacity:.85;transition:color .2s ease;}
.link-pagamento:hover{
  color:#e8e8e8;
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.05);
}
.link-pagamento:hover i{color:#93c5fd;}
.link-pagamento:active{transform:scale(.97);}

.link-pagamento-soft{
  display:flex;margin:10px auto 0;width:max-content;
  color:#9a9a9a;border-color:rgba(255,255,255,.06);
}
.link-pagamento-soft:hover{color:#e8e8e8;}

.aviso-soft{
  margin-top:24px;
  background:rgba(28,28,28,.88);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  padding:18px 18px 20px;
  text-align:center;color:#d8d8d8;
}
.aviso-soft h3{
  font-size:.92rem;font-weight:600;margin-bottom:6px;color:#fff;
}
.aviso-soft h3 i{margin-right:6px;opacity:.85;}
.aviso-soft p{font-size:.8rem;color:#bbb;line-height:1.5;margin-bottom:12px;}
.aviso-soft a{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 18px;border-radius:10px;
  background:#2563eb;color:#fff;text-decoration:none;
  font-size:.82rem;font-weight:600;
  transition:background .2s ease,transform .2s ease;
}
.aviso-soft a:hover{background:#1d4ed8;color:#fff;}
.aviso-soft a:active{transform:scale(.97);}

@media(max-width:480px){
  .sistema{padding:16px;margin:20px auto;}
  .sistema .topo{padding:28px 0;}
  .sistema .topo img{max-width:140px;}
  .sistema .bio{font-size:.85rem;margin:-8px auto 20px;}
  .aviso{padding:22px 18px;}
}