/* NAVBAR ################################### */
/* ============================================================
       BOTÃO DE NAVEGAÇÃO "CAMPANHAS" — ESTILIZADO E CHAMATIVO
       ============================================================ */
    .nav-campaign {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 0px 15px !important;
      padding-block: 5px !important;
      border-radius: 50px;
      letter-spacing: 0.4px;
      overflow: hidden;
      isolation: isolate;
      /* Gradiente dinâmico com cor base + acento */
      /* background: linear-gradient(120deg, var(--primary) 0%, #007bb8 50%, var(--accent) 140%); */
      background-size: 200% 200%;
      background-position: 0% 50%;
      box-shadow:
        0 6px 10px rgba(0, 100, 149, 0.35),
        0 0 0 0 rgba(255, 179, 71, 0.5);
      transition:
        transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.3s ease,
        background-position 0.5s ease;
      animation: pulse-nav 2.6s infinite ease-in-out;
      margin-left: 8px;
    }

    .nav-campaign i {
      font-size: 0.7rem;
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* Brilho que percorre o botão */
    .nav-campaign::before {
      content: "";
      position: absolute;
      top: 0;
      left: -75%;
      width: 50%;
      height: 100%;
      background: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0) 100%
      );
      transform: skewX(-25deg);
      transition: left 0.7s ease;
      z-index: 1;
      pointer-events: none;
    }

    /* Ponto brilhante tipo "notificação" no canto */
    .nav-campaign::after {
      content: "";
      position: absolute;
      top: 6px;
      right:9px;
      width: 6px;
      height: 6px;
      background: #ffffff;
      border-radius: 50%;
      box-shadow: 0 0 0 3px rgba(255, 179, 71, 0.6);
      animation: blink 1.6s infinite ease-in-out;
      z-index: 2;
    }

    .nav-campaign > * {
      position: relative;
      z-index: 3;
    }

    /* Hover: eleva + brilho + gradiente desloca */
    .nav-campaign:hover {
      transform: translateY(-2px) scale(1.03);
      background-position: 100% 50%;
      box-shadow:
        0 12px 24px rgba(0, 100, 149, 0.45),
        0 0 0 6px rgba(255, 179, 71, 0.2);
    }

    .nav-campaign:hover::before {
      left: 125%;
    }

    .nav-campaign:hover i {
      transform: translateX(4px) rotate(-10deg);
    }

    /* Estado ativo (página atual) */
    .nav-campaign.active {
      background: linear-gradient(120deg, var(--primary-dark) 0%, var(--primary) 50%, var(--accent) 140%);
      background-size: 200% 200%;
      background-position: 100% 50%;
    }

    .nav-campaign:active {
      transform: translateY(0) scale(0.99);
    }

    .nav-campaign:focus-visible {
      outline: 3px solid var(--accent);
      outline-offset: 3px;
    }

    /* Animações */
    @keyframes pulse-nav {
      0%, 100% {
        box-shadow:
          0 6px 16px rgba(0, 100, 149, 0.35),
          0 0 0 0 rgba(255, 179, 71, 0.5);
      }
      50% {
        box-shadow:
          0 6px 16px rgba(0, 100, 149, 0.35),
          0 0 0 8px rgba(255, 179, 71, 0);
      }
    }

    @keyframes blink {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.6; transform: scale(0.85); }
    }