div#header-placeholder {
  position: fixed;
  width: 100%;
  z-index: 999;
}

/* Quando o body for "pg-inicio", pinte o link "nav-inicio" e assim por diante */
.pg-inicio .nav-inicio,
.pg-front-end .nav-front-end,
.pg-design .nav-design,
.pg-sobre-mim .nav-sobre-mim {
  padding-top: 0;
  padding-bottom: 3px;
  border-bottom: 6px solid var(--red-color);
}

.pg-contato .nav-contato {
  background: var(--red-color) !important;
}

.main-header {
  background-color: var(--dark-purple-color);
  border: 6px solid var(--black-color);
  position: relative;
  width: 100%;
}

.main-header>.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-top: 30px;
  padding-bottom: 30px;
}

nav {
  display: none;
}

.logo {
  display: inline-block;
  height: 50px;
}

.img-mobile {
  display: block;
  height: 50px;
}

.img-desktop {
  display: none;
}

.burger-clicker {
  cursor: pointer;
}

.burger {
  width: 35px;
  height: 35px;
}

.burger a:hover {
  color: var(--red-color);
}

input[type="checkbox"]:checked~nav {
  padding: 20px 40px 30px;
  display: block;
  position: absolute;
  /* Joga o menu 6px para a esquerda para cobrir a borda do pai ou alinhar */
  left: -6px;
  /* Soma a largura total + as duas bordas de 6px (12px) */
  width: calc(100% + 12px);
  top: 100%;
  background: var(--dark-purple-color);
  border: 6px solid var(--black-color);
  z-index: 999;
}

.list-links {
  list-style: none;
}

.list-links li {
  margin: 20px 0;
}

.list-links li a {
  color: var(--white-color);
  text-decoration: none;
  font-size: var(--text-menu-size-mobile);
}

.list-links li a.botao-contato {
  margin-top: 20px;
  padding: 8px 16px;
  border: 6px solid var(--black-color);
  box-shadow: var(--small-box-shadow);
  display: inline-block;
  font-weight: 700;
}

.list-links li a.botao-contato:hover {
  transform: var(--small-hover);
  box-shadow: var(--small-box-shadow-hover);
}

.botao-contato {
  background: var(--light-purple-color);
  color: var(--white-color) !important;
}

.botao-contato:hover {
  background: var(--red-color);
}

.logo-hover:hover {
  transform: translate(-2px, -2px);
}

li.contato-li {
  margin-right: 0 !important;
}















/* ========== RESPONSIVO - TABLET 768+ ==========*/

@media screen and (min-width:768px) {
  .list-links li a {
    font-size: var(--text-menu-size-desktop);
  }

  .main-header>.container {
    align-items: center;
  }

  .burger {
    display: flex;
    align-items: center;
    margin-top: 0;
    width: auto;
    height: 58px;
  }

  .burger label {
    display: none;
  }

  .burger nav {
    display: block;
  }

  .burger ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
  }

  .burger ul li {
    margin: 0 10px;
  }

  .botao-contato {
    padding: 10px 12px;
  }

  .list-links li a.botao-contato {
    margin-top: 0;
  }
}















/* ========== RESPONSIVO - LAPTOP 1024+ ==========*/

@media screen and (min-width:1024px) {

  /* --- STICYK HEADER --- */
  .main-header>.container {
    transition: padding 0.1s ease;
  }

  /* Redução do Padding no Scroll */
  .main-header.header-compact>.container {
    padding-top: 6px;
    padding-bottom: 6px;
    align-items: center;
  }

  /* Troca da Logo no Scroll - Esconde a logo branca com texto*/
  .main-header.header-compact .img-desktop {
    display: none;
  }

  /* Força a logo vermelha (img-mobile) a aparecer no desktop no scroll */
  .main-header.header-compact .logo .img-mobile {
    display: block;
    height: 40px;
  }

  /* Ajusta o Botão de Contato no Scroll */
  .header-compact .botao-contato {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .logo {
    width: 260px;
    height: auto;
  }

  .img-desktop {
    display: block;
    height: 50px;
  }

  .img-mobile {
    display: none;
  }

  input[type="checkbox"]:checked~nav {
    padding: 20px 60px 30px;
  }

  .botao-contato {
    padding: 10px 30px;
  }
}















/* ========== RESPONSIVO - DESKTOP 1440+ ==========*/

@media screen and (min-width:1440px) {
  .logo {
    width: 260px;
    height: auto;
  }

  .img-desktop {
    display: block;
    height: 50px;
  }

  .img-mobile {
    display: none;
  }

  .burger ul li {
    margin: 0 16px;
  }
}