@import url('esteira.css');       /* Reseta estilos padrão do navegador */
@import url('popup_Bench.css');  
@import url('menuHamburguer.css');  
@import url('movi.css');  
@import url('popupextra.css');  

.balloon {
    z-index: 9;
  position: absolute;
  background: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 0.9rem;
  display: none;
  animation: fadeIn 0.2s ease;
  
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
 body{
    padding-top: 60px;
  
 }
  #header{
    width:100%;
     position:fixed;
    top:0;
    z-index:999;
    box-shadow:0px 0px 6px 0px rgb(0, 0, 0);
    box-sizing:border-box;
    height:60px;
     display:flex;
    align-items:center;
    justify-content:space-between;
    background:#000000!important;
}


#logo{
     margin-left:5rem;
    width:150px;
    height:auto;
}
.fotologo{
    margin-left:20%;
 
    width:154px;
    height:auto;
    filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.5));

}
#menu{
    padding-top: 1rem;
    font-family:Arial;
    display:block;
    list-style:none;
    gap:.5rem;/*ESPAÇAMENTO*/
}
.a{ 
    display:block;
   padding: 1rem 0;
         margin: 0 1rem;    font-family:var(--roboto);
    color: white;
    text-decoration:none;
    
}
.a:hover{
    font-weight: 700;
     color: yellow;
    border-radius: .1rem;
    text-decoration: line-through;
    border-bottom: 2px solid yellow

} 


     #nav {
         position: fixed;
         top: 0;
         bottom: 0;
         left: -90%;
         /* Inicia fora da tela */
         width: 80%;
         max-width: 400px;
         /* Largura máxima da barra lateral */
         background: rgba(15, 15, 15, 0.919);
         transition: left .45s ease;
         z-index: 1000;
         overflow-y: auto;
         padding-top: 60px;
         /* Ajuste para acomodar a altura do cabeçalho fixo */
     }

     #nav.active {
         left: 0;
         /* Aparece quando ativado */
     }
     .a {
         padding: 1rem 1rem 1rem 2rem;
         margin: 0 1rem;
         border-bottom: 2px solid rgb(230, 255, 248);
     }
     .a:hover{
                 border-bottom: 2px solid rgb(255, 255, 255);

      }
 
     #btn-mobile {
         position: fixed;
         top: 15px;
         right: 15px;
         display: flex;
         align-items: center;
         padding: .5rem 1rem;
         font-size: 1rem;
         border: none;
         background: none;
         cursor: pointer;
         gap: .5rem;
         z-index: 1;
         /* Garante que o botão esteja acima da barra lateral */
     }

     #hamburguer {
         color: #fff;
         border-top: 2px solid;
         width: 20px;
     }



     #hamburguer::after,
     #hamburguer::before {
         content: '';
         display: block;
         width: 20px;
         height: 2px;
         background: currentColor;
         margin-top: 5px;
         transition: .3s;
         position: relative;

     }

     #nav.active #hamburguer {
         border-top-color: transparent;
         color: white;
         margin-right: .3rem;


     }

     #nav.active #hamburguer::before {
         transform: rotate(135deg);
         width: 2rem;
         color: white;


     }

     #nav.active #hamburguer::after {
         width: 2rem;
         transform: rotate(-135deg);
         top: -7px;
         color: white;

     }
     
      /* Imagem da galeria */
#imagemGaleria {
  max-width: 80vw;   /* ocupa no máximo 80% da largura da tela */
  max-height: 70vh;  /* ocupa no máximo 70% da altura da tela */
  object-fit: contain; /* mantém proporção sem cortar */
  margin: 20px auto;
  display: block;
}

/* Botões de navegação sempre visíveis */
.popup-galeria-controles {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.popup-galeria-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  background: #333;
  color: white;
  cursor: pointer;
}

.popup-galeria-btn:hover {
  background: #555;
}