html, body {
  height: 100%;
  margin: 0;
  background: #000;
  overflow: hidden; /* ADICIONADO: impede rolagem */
}

.topbar{
  position: fixed; /* garante referência pro absolute */
  inset: 0 0 auto 0;
  height: 120px;
  padding: 18px 20px;
  pointer-events: auto;
  overflow: visible;
  z-index: 10;
}

.logo-nome,
.logo-hydra{
  position: absolute;
  top: 10px;
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: auto;
}

/* Logo do nome: limita largura pra não "engolir" a topbar */
.logo-nome{
  left: clamp(4px, 1vw, 12px);
  transform: none;

  /* controla pelo eixo X (o asset é muito longo) */
  max-width: clamp(260px, 28vw, 520px);
  max-height: clamp(56px, 7vw, 96px);
}

/* Logo Hydra: aumenta um pouco e mantém na direita */
.logo-hydra{
  right: -100px; /* empurra bem mais para a direita (pode “sair” da tela) */
  transform: none;

  max-width: clamp(520px, 44vw, 1080px);
  max-height: clamp(180px, 20vw, 340px);
}

/* Ajustes finos para evitar briga com os botões no centro */
@media (max-width: 1100px){
  .topbar{
    height: 110px;
    padding: 14px 14px;
  }

  .logo-nome{
    top: 8px;
    max-width: clamp(220px, 30vw, 440px);
    max-height: clamp(52px, 6.5vw, 86px);
  }

  .logo-hydra{
    right: -70px;
    top: 8px;
    max-width: clamp(460px, 48vw, 960px);
    max-height: clamp(164px, 19vw, 300px);
  }
}

@media (max-width: 820px){
  .topbar{
    height: 96px;
    padding: 10px 10px;
  }

  .logo-nome{
    top: 6px;
    max-width: clamp(180px, 42vw, 360px);
    max-height: 54px;
  }

  .logo-hydra{
    right: -60px;
    top: 6px;
    max-width: clamp(400px, 76vw, 740px);
    max-height: 148px;
  }
}

.img--broken{
  outline: 1px dashed rgba(255,255,255,.35);
  background: rgba(255,255,255,.06);
  min-width: 120px;
  min-height: 40px;
}