/* Ajuste mobile e o caminho de prefers-reduced-motion do hero.
   Carregue SEMPRE depois de hero, navbar e botoes: sao regras que sobrescrevem
   .bloco, .titulo, .emblema e .menu. Se este arquivo subir na ordem, elas perdem. */

@media (max-width:760px){
  :root{--fx:.32}
  .bloco{bottom:clamp(1.6rem,6vh,3rem);gap:.9rem}
  .titulo{width:min(80vw,18.5rem)}
  .emblema{--ey:20%;--eh:15%}
  .acoes{gap:.4rem .6rem}
  .abre-menu{display:block;z-index:2;margin-left:auto}
  .topo > nav{flex:0 0 0;width:0}
  .menu{z-index:1}
  .marca{position:relative;z-index:2}
  .menu{position:fixed;inset:0;flex-direction:column;justify-content:center;gap:2.2rem;
    font-size:.95rem;background:rgba(14,11,8,.96);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
  .menu li:last-child{margin-left:0;margin-top:.6rem}
  .nav-agendar{--h:60px}
  .aberto .menu{opacity:1;visibility:visible}
  .marca span{display:none}
}
@media (prefers-reduced-motion:reduce){
  .muralha,.moldura,.poeira,.particulas{display:none}
  .tita{opacity:1}
  .emblema{display:none}
  .derrubar,.rever{display:none !important}
  .hero.prestes .muralha{animation:none}
}