.topbar {
  height: 64px;
  background: #101d2a;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.topbar__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
}

.topbar__mail { justify-self: start; }
.topbar__whatsapp { justify-self: end; margin-left: 0; }

.topbar__minvu {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
  max-width: 100%;
  color: #fff;
  font: 600 .75rem/1.35 var(--head);
  letter-spacing: .01em;
}

.topbar__minvu-mark {
  display: block;
  flex: 0 0 58px;
  width: 58px;
  height: 53px;
}

.topbar__minvu-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.topbar .topbar__minvu span { display: block; }
.topbar__minvu > span:last-child {
  max-width: 520px;
  min-width: 0;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.site-header { top: 64px; }

@media (max-width: 1100px) {
  .topbar__inner { grid-template-columns: 1fr; }
  .topbar__mail, .topbar__whatsapp { display: none !important; }
  .topbar__minvu { justify-self: center; }
}

@media (max-width: 680px) {
  .topbar { height: 64px; }
  .topbar__inner { width: min(100% - 30px, 1340px); }
  .topbar__minvu { gap: 10px; font-size: .68rem; }
  .topbar__minvu-mark { flex-basis: 50px; width: 50px; height: 46px; }
  .site-header { top: 64px; }
}

@media (max-width: 380px) {
  .topbar__minvu { font-size: .59rem; }
  .topbar__minvu-mark { flex-basis: 45px; width: 45px; height: 41px; }
}