/* Menu Fixo com classes reutilizáveis */
.menu-fixed {
  display: inline-block;
  width: 120px;
  height: 40px;
  background-repeat: no-repeat;
  background-size: cover;
  transition: background-image 0.3s ease-in-out;
}

.menu-fixed[data-menu="1"] { background-image: url('imagens/capa/p1a.gif'); }
.menu-fixed[data-menu="1"]:hover { background-image: url('imagens/capa/p1b.gif'); }

.menu-fixed[data-menu="2"] { background-image: url('imagens/capa/p2a.gif'); }
.menu-fixed[data-menu="2"]:hover { background-image: url('imagens/capa/p2b.gif'); }

.menu-fixed[data-menu="3"] { background-image: url('imagens/capa/p3a.gif'); }
.menu-fixed[data-menu="3"]:hover { background-image: url('imagens/capa/p3b.gif'); }

/* continue para outros menus até o 10 */
.menu-fixed[data-menu="10"] { background-image: url('imagens/capa/p10a.gif'); }
.menu-fixed[data-menu="10"]:hover { background-image: url('imagens/capa/p10b.gif'); }

/* Menu responsivo */
@media (max-width: 768px) {
  .menu-fixed {
    width: 100%;
    height: 50px;
    background-size: contain;
  }
}

/* Acessibilidade para navegação por teclado */
.menu-fixed:focus-visible {
  outline: 2px solid #00f;
  outline-offset: 4px;
}