.topbar {


  width: 100%;

  background: linear-gradient(90deg, #0b72ff 0%, #375bd2 100%);

  display: flex;
  
  justify-content:  space-between; /* logo à esquerda, botão à direita */

  align-items: center;

  padding: 12px 18px;

  position: relative;

  z-index: 10;

  border-radius: 12px;

  box-shadow: 0 8px 24px rgba(11,114,255,0.12);

  box-sizing: border-box;

}


/* Logo */

.topbar-logo {

  height: 90px;

  max-width: 400px;

  object-fit: contain;

  margin-left: 10px; /* pequeno espaçamento da borda */

}


.menu-btn {

  position: absolute;

  right: 12px;

  top: 50%;

  transform: translateY(-50%);

  font-size: 26px;

  background: none;

  border: none;

  color: #fff;

  cursor: pointer;

  z-index: 30;

  margin-left: auto; /* 👈 força o botão pro canto direito */

}



/* Menu lateral */

#side-menu {

  position: fixed;

  top: 0;

  left: -250px; /* escondido fora da tela */

  width: 250px;

  height: 100%;

  background: #000;

  padding-top: 80px;

  transition: left 0.3s ease;

  z-index: 20;

/* display: flex;*/

  flex-direction: column;

}

#side-menu.open {

  left: 0;

}

#side-menu .menu-link {

  padding: 15px 20px;

  text-decoration: none;

  color: #fff;

  font-weight: 600;

  font-size: 1.1rem;

  border-bottom: 1px solid #333;

}

#side-menu .menu-link:hover {

  background: #222;

}

#side-menu #close-menu {

  position: absolute;

  top: 10px;

  right: 10px;

  background: none;

  border: none;

  font-size: 28px;

  color: #fff;

  cursor: pointer;

}

/* Mobile: exibir botão hamburger */

@media (max-width: 768px) {

  .menu-btn {

    display: block;

  }

  }


/* Cabeçalho do menu lateral */

.side-menu-header {

 /* display: flex;*/

  align-items: center;

  justify-content: space-between;

  padding: 10px 20px;

  border-bottom: 1px solid rgba(255,255,255,0.2);

}

/* Logo dentro do menu */

.side-menu-logo {
  
  position: absolute;
  
  top: 0px;
  
  left: 10px;
  
  height: 80px;
  
  max-width: 900px;
  
  object-fit: contain;
  
}

/* Ocultar logo no desktop */
@media (min-width: 769px) {
  .side-menu-logo {
    display: none;
  }
}


/* Botão de fechar */

.close-btn {

  position: absolute;
    
  top: 19px;
  
  right: 20px;
  
  font-size: 28px;

  background: none;

  border: none;

  color: #fff;

  cursor: pointer;

}


/* Desktop: menu lateral sempre visível */

@media (min-width: 769px) {

  #side-menu {
    position: relative;       /* não sobrepor topbar */
    top: 0;
    left: 0;
    width: 250px;             /* largura fixa */
    height: 100vh;            /* altura total da tela */
    background: #000;         /* fundo preto */
    flex-direction: column;   /* vertical */
    padding-top: 0;           /* sem padding extra */
    box-shadow: none;         /* remove sombra */
    border-radius: 12px; /* deixa os cantos arredondados igual à topbar */

  }

  .menu-link {
    color: #fff;
    padding: 15px 20px;
    border-bottom: 1px solid #333;
  }

  .menu-btn,
  .close-btn {                /* botões não aparecem no desktop */
    display: none;
  }

  .side-menu-header {         /* cabeçalho oculto no desktop */
    display: none;
  }

}


/* Mobile: sanduíche e menu lateral */


@media (max-width: 768px) {
  #side-menu {
    position: fixed;
    top: 0;
    left: 0; /* sempre começa no lado esquerdo */
    width: 250px;
    height: 100%;
    background: #000;
    padding-top: 80px;
    transform: translateX(-250px); /* escondido fora da tela */
    transition: transform 0.3s ease;
    z-index: 1100; /* acima da topbar */
    display: flex;
    flex-direction: column;
  }

  #side-menu.open {
    transform: translateX(0);
  }
}



/* Ajuste links */
#side-menu .menu-link {
    color: #fff;
    border-bottom: 1px solid #333;
}

html, body {

  overflow-x: hidden; /* evita scroll horizontal */

}

.topbar-content, .topbar-logo {

  max-width: 100%;

  box-sizing: border-box;

}

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* evita scroll horizontal */
}


.menu-title {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
  padding: 10px 0;
  text-align: center;
  align-self: center; /* centraliza no flex */
  width: 100%; /* ocupa largura total do header */
}



  
  body.menu-open {
  transform: translateX(250px);
  transition: transform 0.3s ease;
}




/* --- Ajuste de layout global --- */

/* Garante que o conteúdo da página não fique escondido sob a topbar */
body {
  padding-top: 90px; /* altura da topbar + margem de segurança */
}

/* Quando o menu lateral abre, empurra o conteúdo suavemente no mobile */
@media (max-width: 768px) {
  #side-menu.open ~ main {
    transform: translateX(-250px);
    transition: transform 0.3s ease;
  }
}

/* Garante que a topbar fique sempre por cima */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  border-radius: 0; /* evita bordas arredondadas no topo fixo */
  z-index: 2000; /* sobrepõe tudo */
}

/* Garante que o menu lateral também fique sobre o conteúdo */
#side-menu {
  z-index: 2000;
}

.topbar-logo {
  height: 90px;
  max-width: 400px;
  object-fit: contain;
  display: block;
  margin-right: 20px;
}

/* Dropdown apenas no desktop */
.desktop-calculadoras {
  display: none;
  position: relative;
}

 .topbar .right-buttons {
 /* display: flex;*/
  gap: 12px; /* espaçamento entre botões à direita */
  margin-right: 20px; /* distância da borda */
  align-items: center;
  
 }

@media (min-width: 769px) {
  .desktop-calculadoras {
    display: block;
  }

  .calc-btn {
    background: #0b72ff;
    color: #fff;
    border: none;
    padding: 8px 1px;
    cursor: pointer;
    border-radius: 6px;
    font-weight: 600;
    margin-left: 70px;
  }

  .calc-dropdown {
    display: none;
    position: absolute;
    top: 40px;
    left: 0;
    background: #fff;
    color: #000;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    flex-direction: column;
    min-width: 200px;
    z-index: 999;
  }

  .calc-dropdown a {
    padding: 10px 15px;
    text-decoration: none;
    color: #000;
    display: block;
  }

  .calc-dropdown a:hover {
    background: #f0f0f0;
  }

  #side-menu {
    display: none; /* esconde menu lateral no desktop */
  }
}