/* MU GAME Classic: chamada para o grupo oficial no WhatsApp na página inicial (bloco abaixo da inauguração e botão que acompanha a rolagem) */
.zh { position: relative; isolation: isolate; display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; align-items: center; gap: 18px; margin: 0 0 16px; padding: 20px 22px;
  overflow: hidden; border-radius: 12px; border: 1px solid rgba(37, 211, 102, .32);
  background: radial-gradient(60% 120% at 0% 50%, rgba(37, 211, 102, .2), transparent 70%), linear-gradient(180deg, #0f1712, #070b08 85%); box-shadow: 0 18px 40px -26px #000; }
.zh-ico { position: relative; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; color: #04210f;
  background: radial-gradient(circle at 35% 30%, #6ff0a3, #25d366 55%, #128c4a); box-shadow: 0 0 0 1px #000, 0 10px 26px -8px rgba(37, 211, 102, .8); }
.zh-ico .i { width: 34px; height: 34px; stroke-width: 2.2; }
.zh-ico::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(37, 211, 102, .55); animation: zh-onda 2.8s ease-out infinite; }
@keyframes zh-onda { 0% { transform: scale(.92); opacity: .9; } 70%, 100% { transform: scale(1.32); opacity: 0; } }
html.leve .zh-ico::after { animation-play-state: paused; }
.zh-t { display: grid; gap: 7px; min-width: 0; }
.zh-pre { margin: 0; font: 700 13px var(--f-display); letter-spacing: .08em; color: #5fe39a; }
.zh h2 { margin: 0; font: 700 24px/1.12 var(--f-display); color: #fff; text-shadow: 0 2px 0 #000; }
.zh-txt { margin: 0; font: 400 14.5px/1.45 var(--f-body); color: var(--tx-2); max-width: 46ch; }
.zh-l { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 2px 0 0; padding: 0; list-style: none; }
.zh-l li { display: inline-flex; align-items: center; gap: 6px; font: 600 13px var(--f-body); color: #d6f5e2; }
.zh-l .i { width: 15px; height: 15px; color: #5fe39a; }
.zh-acao { display: grid; justify-items: center; gap: 7px; }
.zh-bt { display: inline-flex; align-items: center; gap: 9px; height: 48px; padding: 0 22px; border-radius: 6px; font: 700 15.5px var(--f-body); color: #04210f; text-decoration: none; white-space: nowrap;
  background: linear-gradient(180deg, #5cf09a, #25d366 55%, #1aa653); box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 24px -10px rgba(37, 211, 102, .9); transition: transform .15s, box-shadow .15s; }
.zh-bt .i { width: 19px; height: 19px; stroke-width: 2.3; }
.zh-bt:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgba(255, 255, 255, .5), 0 14px 30px -10px rgba(37, 211, 102, 1); }
.zh-bt:focus-visible, .zf:focus-visible, .zf-x:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.zh-acao small { font: 500 12px var(--f-body); color: var(--tx-3); }
@media (max-width: 720px) { .zh { grid-template-columns: 56px minmax(0, 1fr); } .zh-ico { width: 56px; height: 56px; } .zh-ico .i { width: 26px; height: 26px; } .zh-acao { grid-column: 1 / -1; } .zh-bt { width: 100%; justify-content: center; } }

/* botão que acompanha a rolagem (aparece quando o bloco sai da tela) */
.zf { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px 0 6px; border-radius: 26px; text-decoration: none;
  font: 700 14.5px var(--f-body); color: #eafff1; background: linear-gradient(180deg, #13261a, #0a140e); border: 1px solid rgba(37, 211, 102, .5); box-shadow: 0 14px 34px -12px #000, 0 0 22px -8px rgba(37, 211, 102, .7);
  transform: translateY(16px); opacity: 0; transition: transform .3s ease, opacity .3s ease, border-color .2s; }
.zf.on { transform: none; opacity: 1; }
.zf:hover { border-color: #25d366; }
.zf[hidden], .zf-x[hidden] { display: none; }
.zf-ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #04210f; background: #25d366; }
.zf-ico .i { width: 21px; height: 21px; stroke-width: 2.3; }
.zf-x { position: fixed; right: 12px; bottom: 62px; z-index: 61; width: 24px; height: 24px; padding: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: var(--tx-2); background: #120b0b; border: 1px solid var(--line); opacity: 0; transition: opacity .3s; }
.zf-x.on { opacity: 1; }
.zf-x .i { width: 13px; height: 13px; }
@media (max-width: 620px) { .zf { padding: 0 6px; right: 14px; bottom: 14px; } .zf-tx { display: none; } .zf-x { right: 8px; bottom: 60px; } }