header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  transition: background-color 0.5s ease-in-out;
}

header .container {
  justify-content: space-between;
}

header .logo {
  flex: 0 0 120px;
  height: 120px;
  margin: 24px;
  transition: height 0.5s ease-in-out;
}
body.menuSticky header .logo {
  height: 60px;
}

header .site-logo {
  display: block;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top left;
  /* por defecto, logo-light */
  background-image: var(--logo-light);
  overflow: visible;
}

body.menuSticky header {
  background-color: rgb(255, 255, 255, 0.9);
}

body.page-template-page-home.menuSticky header {
  background-color: rgb(0, 0, 0, 0.1);
}

/* dark mode */
html[data-theme="dark"] header .site-logo {
  background-image: var(--logo-dark);
}

/* sticky normal */
body.menuSticky header .site-logo {
  background-image: var(--logo-light-sticky);
}

/* sticky + dark */
html[data-theme="dark"] body.menuSticky header .site-logo {
  background-image: var(--logo-dark-sticky);
}


@media (max-width: 768px) {

  header .logo {
    height: 80px;
  }

  body.menuSticky header .logo {
    height: 40px;
  }

}