/* =========================================================
   HEADER
========================================================= */

.site-header{
  position:fixed;
  top:0;
  left:0;

  width:100%;

  z-index:999;

  padding:16px 0;

  background:rgba(255,255,255,.94);

  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);

  border-bottom:1px solid rgba(17,17,17,.05);

  transition:
    background .3s ease,
    box-shadow .3s ease,
    padding .3s ease;
}


/* =========================================================
   CONTAINER
========================================================= */

.header-container{
  width:min(100% - 48px, 1480px);

  margin:0 auto;

  display:grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  align-items:center;

  gap:40px;
}


/* =========================================================
   LOGO
========================================================= */

.site-logo{
  display:flex;
  align-items:center;
  justify-content:flex-start;

  width:max-content;

  flex-shrink:0;
}


.site-logo img{
  width:128px;
  height:auto;

  display:block;

  transition:transform .3s ease;
}


.site-logo:hover img{
  transform:scale(1.03);
}


/* =========================================================
   MENU
========================================================= */

.main-nav{
  display:flex;
  align-items:center;
  justify-content:center;

  gap:36px;
}


.main-nav a{
  position:relative;

  display:inline-block;

  padding:8px 0;

  font-size:12px;
  font-weight:700;

  text-transform:uppercase;

  letter-spacing:.08em;

  color:#111111;

  transition:
    color .25s ease,
    transform .25s ease;
}


/* DETALHE VERDE */

.main-nav a::after{
  content:"";

  position:absolute;

  left:50%;
  bottom:0;

  width:0;
  height:2px;

  background:#405c4c;

  transform:translateX(-50%);

  transition:width .25s ease;
}


.main-nav a:hover{
  color:#405c4c;

  transform:translateY(-2px);
}


.main-nav a:hover::after{
  width:100%;
}


/* =========================================================
   BOTÃO
========================================================= */

.header-btn{
  justify-self:end;

  min-height:48px;

  padding:0 24px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  gap:10px;

  border-radius:999px;

  background:#111111;

  color:#ffffff;

  font-size:11px;
  font-weight:800;

  text-transform:uppercase;

  letter-spacing:.08em;

  transition:
    background .3s ease,
    color .3s ease,
    transform .3s ease;
}


.header-btn i{
  font-size:14px;

  transition:transform .3s ease;
}


.header-btn:hover{
  background:#405c4c;

  color:#ffffff;

  transform:translateY(-2px);
}


.header-btn:hover i{
  transform:translateX(4px);
}


/* =========================================================
   MENU MOBILE
========================================================= */

.menu-toggle{
  display:none;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px){

  .site-header{
    padding:12px 0;
  }


  .header-container{
    width:100%;

    padding:0 20px;

    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:16px;
  }


  /* LOGO */

  .site-logo img{
    width:88px;
  }


  /* BOTÃO DESKTOP */

  .header-btn{
    display:none;
  }


  /* HAMBÚRGUER */

  .menu-toggle{
    display:flex;

    width:44px;
    height:44px;

    padding:0;

    border:0;

    background:transparent;

    flex-direction:column;

    justify-content:center;
    align-items:center;

    gap:6px;

    cursor:pointer;

    z-index:1001;
  }


  .menu-toggle span{
    width:27px;
    height:2px;

    display:block;

    background:#111111;

    transition:
      transform .3s ease,
      opacity .3s ease,
      background .3s ease;
  }


  .menu-toggle:hover span{
    background:#405c4c;
  }


  /* MENU ABERTO */

  .main-nav{
    position:absolute;

    top:76px;
    left:20px;
    right:20px;

    display:none;

    flex-direction:column;

    align-items:stretch;

    gap:0;

    padding:18px 22px;

    background:rgba(255,255,255,.98);

    border:
      1px solid
      rgba(17,17,17,.08);

    border-radius:24px;

    box-shadow:
      0
      24px
      70px
      rgba(0,0,0,.12);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }


  .main-nav.active{
    display:flex;
  }


  .main-nav a{
    width:100%;

    padding:15px 0;

    text-align:center;

    border-bottom:
      1px solid
      rgba(17,17,17,.07);

    font-size:12px;
  }


  .main-nav a::after{
    display:none;
  }


  .main-nav a:hover{
    transform:none;

    color:#405c4c;
  }


  .main-nav a:last-child{
    border-bottom:0;
  }

}

 /* =========================================================
   HEADER - TABLET
   768PX ATÉ 1024PX
========================================================= */

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

  .site-header{
    padding:14px 0;
  }

  .header-container{
    width:100%;
    max-width:none;

    padding:0 20px;

    gap:24px;
  }


  /* =======================================================
     LOGO
  ======================================================= */

  .site-logo img{
    width:92px;
  }


  /* =======================================================
     MENU
  ======================================================= */

  .main-nav{
    display:flex;

    align-items:center;
    justify-content:center;

    gap:22px;

    flex:1;
  }

  .main-nav a{
    font-size:11px;

    letter-spacing:.06em;

    white-space:nowrap;
  }


  /* =======================================================
     BOTÃO DIREITA
  ======================================================= */

  .header-btn{
    min-height:42px;

    padding:0 17px;

    font-size:10px;

    white-space:nowrap;
  }


  /* =======================================================
     TOGGLE
     NÃO APARECE NO TABLET
  ======================================================= */

  .menu-toggle{
    display:none;
  }

}

/* =========================================================
   HEADER - NOTEBOOK / DESKTOP MENOR
   1025PX ATÉ 1336PX
========================================================= */

@media (min-width:1025px) and (max-width:1336px){

    /* =====================================================
       HEADER
    ===================================================== */

    .site-header{
        width:100%;
    }


    /* =====================================================
       CONTAINER
    ===================================================== */

    .header-container{
        width:100%;
        max-width:none;

        padding-left:32px;
        padding-right:32px;

        gap:24px;
    }


    /* =====================================================
       LOGO
    ===================================================== */

    .site-logo{
        flex:0 0 auto;
    }

    .site-logo img{
        width:86px;
        height:auto;
    }


    /* =====================================================
       NAVEGAÇÃO
    ===================================================== */

    .main-nav{
        flex:1;

        display:flex;
        align-items:center;
        justify-content:center;

        gap:30px;
    }

    .main-nav a{
        font-size:11px;
        letter-spacing:.07em;

        white-space:nowrap;
    }


    /* =====================================================
       BOTÃO VAMOS CONVERSAR
    ===================================================== */

    .header-btn{
        flex:0 0 190px;

        min-height:58px;

        padding:0 22px;

        font-size:10px;
        line-height:1.3;

        white-space:normal;
    }


    /* =====================================================
       TOGGLE
    ===================================================== */

    .menu-toggle{
        display:none;
    }

}