:root {
      --cor-branco: #ffffff;
      --cor-dourado: goldenrod;
      --azul-escuro: rgba(6, 37, 61, 0.97);
      --fonte-display: Georgia, 'Times New Roman', serif;
  }

  /* ==============================
     HAMBURGER BUTTON
  ============================== */
  .hamburger {
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 6px;
      z-index: 1100;
  }

  .hamburger span {
      display: block;
      width: 26px;
      height: 2px;
      background: var(--cor-branco);
      border-radius: 2px;
      transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
      transform-origin: center;
  }

  /* Animação X quando aberto */
  .hamburger.open span:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
  }

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

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

  /* ==============================
     MOBILE MENU OVERLAY
  ============================== */
  @media (max-width: 768px) {
      .navbar-container {
          padding: 1rem 1.4rem;
      }

      .hamburger {
          display: flex;
      }

      .nav-links {
          /* Painel lateral deslizante */
          position: fixed;
          top: 0;
          right: 0;
          height: 100dvh;
          width: min(280px, 80vw);
          background: rgb(6, 37, 61);
          flex-direction: column;
          justify-content: center;
          align-items: flex-start;
          gap: 0;
          padding: 5rem 2.5rem 3rem;
          transform: translateX(100%);
          transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
          box-shadow: -8px 0 40px rgba(0, 0, 0, 0.35);
      }

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

      .nav-links li {
          width: 100%;
          border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      }

      .nav-links li:last-child {
          border-bottom: none;
      }

      .nav-links a {
          display: block;
          padding: 1.1rem 0;
          font-size: 1.1rem;
          color: rgba(255, 255, 255, 0.9);
          letter-spacing: 0.5px;
      }

      .nav-links a::after {
          bottom: 0;
      }

      .nav-links a:hover {
          color: var(--cor-dourado);
          padding-left: 6px;
      }

      /* Backdrop escuro */
      .nav-backdrop {
          display: none;
          position: fixed;
          inset: 0;
          background: rgba(0, 0, 0, 0.45);
          z-index: 999;
          opacity: 0;
          transition: opacity 0.3s ease;
      }

      .nav-backdrop.open {
          display: block;
          opacity: 1;
      }
  }

  /* Preview demo */
  .demo-content {
      text-align: center;
      padding: 4rem 2rem;
      color: #555;
      font-family: Georgia, serif;
  }