/* =====================================================================
   Selo "Disponível no Google Play" — componente reaproveitável (.hg-play).
   Hero hoje; a seção "Experiência" (#precos-m/#precos) usa o mesmo markup.

   Arte OFICIAL do Google, em português, sem alteração de cor, proporção ou texto:
   img/lp/google-play-badge-pt-br.png (646×250; WebP do mesmo tamanho ao lado).
   O arquivo tem 29px de margem transparente em cima e embaixo (barra preta de
   646×192). Mostrado a 162px de largura, a barra tem 48px de altura e a imagem
   62,7px (7,3px transparentes de cada lado).

   Área de respiro (diretriz do Google: 1/4 da altura do selo = 12px de cada lado):
   em cima e embaixo os 7,3px transparentes já contam; o resto vem da margem de quem
   usa o componente (≥ 4,7px). O selo fica alinhado à esquerda do bloco de texto.

   No app Android (modo "só uso") o selo não aparece: o wrapper leva
   data-oculto-no-app (modo-app.js esconde por CSS no <head>, sem piscar) e o
   js/play-badge.js tira o elemento do DOM.
   ===================================================================== */
.hg-play{display:block; line-height:0}
.hg-play__link{display:inline-block; line-height:0; border-radius:var(--radius-xs)}
.hg-play__link:focus-visible{outline:2px solid var(--fg); outline-offset:3px}
.hg-play__img{display:block; width:162px; height:auto}
/* Em fundo escuro (hero) o anel de foco precisa ser claro. */
[data-theme="dark"] .hg-play__link:focus-visible{outline-color:var(--periwinkle-200)}