/* MU GAME Hard: chamada para o grupo oficial no WhatsApp na página inicial (bloco abaixo da estreia e botão que acompanha a rolagem) */
.zh { --zh: #1faa57; position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 18px 20px;
  background: var(--plate); border: 1px solid var(--line); border-left: 3px solid var(--zh); }
.zh-ico { position: relative; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--zh);
  box-shadow: 0 10px 22px -10px rgba(31, 170, 87, .9); }
.zh-ico .i { width: 30px; height: 30px; stroke-width: 2; }
.zh-ico::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(31, 170, 87, .45); animation: zh-onda 2.8s ease-out infinite; }
@keyframes zh-onda { 0% { transform: scale(.92); opacity: .9; } 70%, 100% { transform: scale(1.3); opacity: 0; } }
.zh-t { display: grid; gap: 6px; min-width: 0; }
.zh-pre { margin: 0; font: 600 12.5px var(--f-disp); letter-spacing: .16em; text-transform: uppercase; color: var(--zh); }
.zh h2 { margin: 0; font: 700 22px/1.05 var(--f-disp); letter-spacing: .03em; text-transform: uppercase; color: var(--ink); }
.zh-txt { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); max-width: 52ch; }
.zh-l { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 2px 0 0; padding: 0; list-style: none; }
.zh-l li { display: inline-flex; align-items: center; gap: 6px; font: 500 12px var(--f-body); color: var(--ink-2); }
.zh-l .i { width: 14px; height: 14px; color: var(--zh); }
.zh-acao { display: grid; justify-items: center; gap: 6px; }
.zh-bt { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 20px; font: 600 15px var(--f-disp); letter-spacing: .1em; text-transform: uppercase; color: #fff; white-space: nowrap;
  background: var(--zh); clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); transition: background .15s; }
.zh-bt .i { width: 17px; height: 17px; stroke-width: 2.2; }
.zh-bt:hover { background: #158a45; }
.zh-acao small { font-size: 11px; color: var(--ink-3); }
.zh-bt:focus-visible, .zf:focus-visible, .zf-x:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* 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: 50px; padding: 0 18px 0 5px; border-radius: 25px;
  font: 600 15px var(--f-disp); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: #fff; border: 1px solid var(--line-2);
  box-shadow: 0 14px 30px -12px rgba(20, 26, 32, .55); 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: #1faa57; }
.zf[hidden], .zf-x[hidden] { display: none; }
.zf-ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #1faa57; }
.zf-ico .i { width: 20px; height: 20px; stroke-width: 2.2; }
.zf-x { position: fixed; right: 12px; bottom: 60px; z-index: 61; width: 24px; height: 24px; padding: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: var(--ink-2); background: #fff; border: 1px solid var(--line-2); box-shadow: 0 4px 10px -4px rgba(20, 26, 32, .4); opacity: 0; transition: opacity .3s; }
.zf-x.on { opacity: 1; }
.zf-x .i { width: 12px; height: 12px; }
/* em tela até 1560px o botão fica só com o ícone, para não cobrir a coluna da página; o nome aparece ao passar o mouse */
@media (max-width: 1560px) and (hover: hover) { .zf { padding: 0 5px; } .zf-tx { display: none; } .zf:hover { padding: 0 18px 0 5px; } .zf:hover .zf-tx { display: inline; } }
@media (max-width: 620px) { .zh { grid-template-columns: 52px minmax(0, 1fr); } .zh-ico { width: 52px; height: 52px; } .zh-acao { grid-column: 1 / -1; } .zf { padding: 0 5px; } .zf-tx { display: none; } }