/* =============================================
       HEADER
    ============================================= */
    #header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 68px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 3rem;
      z-index: 1000;
      background: rgba(10, 18, 13, 0.55);
      backdrop-filter: blur(6px);
      border-bottom: 1px solid rgba(246, 243, 238, 0.06);
      transition: background var(--ease), border-color var(--ease), backdrop-filter var(--ease);
    }

    #header.solid {
      background: rgba(246, 243, 238, 0.97);
      backdrop-filter: blur(18px);
      border-color: var(--border);
    }

    .logoimagem {
      height: 40px;
      width: auto;
      display: block;
    }


    .desktop-nav {
      display: flex;
      align-items: center;
      gap: 2.8rem;
    }

    .desktop-nav a {
      font-size: 0.72rem;
      font-weight: 500;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(246, 243, 238, 0.85);
      position: relative;
      transition: color var(--ease);
    }

    #header.solid .desktop-nav a {
      color: var(--text-mid);
    }

    .desktop-nav a::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      height: 1px;
      width: 0;
      background: var(--green-light);
      transition: width var(--ease);
    }

    .desktop-nav a:hover,
    .desktop-nav a.active {
      color: var(--green-light);
    }

    .desktop-nav a:hover::after,
    .desktop-nav a.active::after {
      width: 100%;
    }

    /* CTA link in nav */
    .nav-cta {
      font-size: 0.72rem !important;
      font-weight: 500;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      background: var(--blue);
      color: white !important;
      border: 1px solid var(--blue);
      padding: 0.5rem 1.2rem;
      transition: background var(--ease), color var(--ease) !important;
    }

    .nav-cta::after {
      display: none !important;
    }

    /* Hamburger */
    .hamburger {
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      width: 32px;
      height: 32px;
      cursor: pointer;
      background: none;
      border: none;
      padding: 2px;
    }

    .hamburger span {
      display: block;
      width: 100%;
      height: 1.5px;
      background: rgba(246, 243, 238, 0.85);
      transition: all var(--ease);
      transform-origin: center;
    }

    #header.solid .hamburger span {
      background: var(--text-dark);
    }

    .hamburger.open span:nth-child(1) {
      transform: translateY(6.5px) rotate(45deg);
    }

    .hamburger.open span:nth-child(2) {
      opacity: 0;
      transform: scaleX(0);
    }

    .hamburger.open span:nth-child(3) {
      transform: translateY(-6.5px) rotate(-45deg);
    }

    /* Mobile nav */
    /* Overlay escuro atrás do drawer */
    #nav-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.55);
      z-index: 998;
    }

    #nav-overlay.open {
      display: block;
    }

    #mobile-nav {
      position: fixed;
      top: 0;
      right: 0;
      width: 280px;
      height: 100vh;
      background: var(--bg-darker);
      padding: 5rem 2.5rem 3rem;
      z-index: 999;
      display: flex;
      flex-direction: column;
      gap: 0;
      transform: translateX(110%);
      transition: transform var(--ease);
      border-left: 1px solid var(--border-dk);
      box-shadow: -8px 0 40px rgba(0, 0, 0, 0.35);
    }

    #mobile-nav.open {
      transform: translateX(0);
    }

    #mobile-nav a {
      font-size: 0.85rem;
      font-weight: 400;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(246, 243, 238, 0.75);
      padding: 1rem 0;
      border-bottom: 1px solid var(--border-dk);
      transition: color var(--ease);
    }

    #mobile-nav a:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }

    #mobile-nav a:hover {
      color: var(--green-light);
    }

    .nav-close {
      position: absolute;
      top: 1.4rem;
      right: 1.8rem;
      background: none;
      border: none;
      color: rgba(246, 243, 238, 0.45);
      cursor: pointer;
      font-size: 1.5rem;
      line-height: 1;
      transition: color var(--ease);
    }

    .nav-close:hover {
      color: var(--green-light);
    }