.voltar-valhalla{
  position:fixed; left:16px; bottom:16px; z-index:95;
  display:inline-flex; align-items:center; gap:7px;
  height:36px; padding:0 14px 0 11px; border-radius:99px;
  background:rgba(12,14,20,.92); color:#EDEFF5;
  font-family:system-ui,sans-serif; font-size:12.5px; font-weight:600;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 28px rgba(0,0,0,.34);
  backdrop-filter:blur(8px); text-decoration:none;
  transition:transform .16s cubic-bezier(.2,.7,.2,1), background .16s;
}
.voltar-valhalla:hover{ transform:translateY(-2px); background:rgba(20,23,32,.96); }
.voltar-valhalla svg{ width:14px; height:14px; }
html[data-shot] .voltar-valhalla{ display:none; }

@media (max-width:520px){
  /* Em tela cheia o rodapé é da barra de navegação do app. O topo, não: os
     54px que o aplicativo reserva para a barra de status ficam vazios aqui, e
     é onde o botão cabe sem tapar nada. */
  .voltar-valhalla span{ display:none; }
  .voltar-valhalla{ top:11px; left:11px; bottom:auto; padding:0 11px; height:32px; }

  [data-theme]:has([data-om-starter="ios-frame"]){
    padding:0 !important; gap:0 !important; display:block !important;
  }
  /* o alternador de tema é do protótipo, não do app — em tela cheia ele
     empurraria a interface para baixo */
  [data-theme]:has([data-om-starter="ios-frame"]) > button:first-child{ display:none !important; }

  [data-om-starter="ios-frame"]{
    width:100% !important; height:100dvh !important;
    padding:0 !important; border-radius:0 !important;
    box-shadow:none !important; background:transparent !important;
  }
  [data-om-starter="ios-frame"] > div{ border-radius:0 !important; }
  [data-om-starter="ios-frame"] > div > :nth-child(1),
  [data-om-starter="ios-frame"] > div > :nth-child(2),
  [data-om-starter="ios-frame"] > div > :nth-child(4){ display:none !important; }
}

/* A grade da vitrine de design pede 330px de coluna mínima. Num celular de
   320 isso empurra a página inteira para o lado — medido em nove larguras
   pela skill verificar-demo. Com min() a coluna encolhe até o que couber, e
   em toda largura onde já cabia nada muda. */
.grade{ grid-template-columns:repeat(auto-fill, minmax(min(330px, 100%), 1fr)) !important; }

@media (prefers-reduced-motion:reduce){
  .voltar-valhalla{ transition:none; }
  .voltar-valhalla:hover{ transform:none; }
}