/* ===============================
   TEMA (VARIÁVEIS)
=============================== */

:root {
  --nav-bg: #000000;
  --nav-bgmain: #000000;
  --nav-border: #fff;
  --nav-text: #fff;
  --nav-hover: #09ff00;
  --bg-main: #000000;
  --bg-secondary: #0b0b0b;

  --text-main: #ffffff;
  --text-muted: #b5b5b5;

  --border-main: #ffffff;

  --accent-main: #09ff00;
  --accent-hover: #2bff5a;

  --card-bg: #000000;
}

[data-theme="light"] {
  --nav-bg: #f5f5f5;
  --nav-bg2: #0000000048;
  --nav-border: #000;
  --nav-text: #000;
  --nav-hover: #0a7cff;
  --bg-main: #f5f5f5;
  --bg-secondary: #ffffff;

  --text-main: #000000;
  --text-muted: #444444;

  --border-main: #000000;

  --accent-main: #0a7cff;
  --accent-hover: #0056b3;

  --card-bg: #ffffff;
}

@media (min-width: 992px) {

/* ===============================
     NAVBAR BASE
  =============================== */

  #mainNav {
    background-color: var(--nav-bg);
    border-top: 3px solid var(--nav-border);
    border-bottom: 3px solid var(--nav-border);
    margin-top: 22px;

    height: 64px;
    min-height: 64px;
    padding: 0;

    display: flex;
    align-items: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

  /*  font-family: 'Boombox', sans-serif; */
  }

  #mainNav .container {
    height: 100%;
    display: flex;
    align-items: center;
  }

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

  #mainNav .navbar-brand {
    position: relative;
    height: 0;              /* não ocupa altura */
    margin-right: 48px;
  }

  #mainNav .navbar-brand img {
    height: 120px;
    transform: translateY(-58px);
    pointer-events: none;
    transition: transform 0.3s ease, height 0.3s ease;
  }

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

  #mainNav .navbar-collapse {
    display: flex;
    align-items: center;
  }

  #mainNav .nav-ul {
    display: flex;
    align-items: center;
    gap: 36px; /* espaçamento equilibrado */
  }

  #mainNav .navbar-nav .nav-item {
    margin: 0;
  }

  #mainNav .navbar-nav .nav-item .nav-link {
    font-family: "Boombox", sans-serif;
    font-size: 0.65rem; /* FONTE MENOR */
    color: var(--nav-text);
    letter-spacing: 0.06em;

    display: flex;
    align-items: center;
    gap: 6px;

    transition: color 0.3s ease, transform 0.2s ease;
  }

  #mainNav .navbar-nav .nav-item .nav-link:hover {
    color: var(--nav-hover);
    transform: translateY(-2px);
  }

  /* ===============================
     SHRINK (SCROLL)
  =============================== */

  #mainNav.navbar-shrink {
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
  }

  #mainNav.navbar-shrink .navbar-brand img {
    height: 95px;
    transform: translateY(-42px);
  }

  #mainNav.navbar-shrink
  .navbar-nav .nav-item .nav-link {
    font-size: 0.6rem;
  }
  .theme-toggle {
    margin-left: 10px;
  }

  #themeToggle {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
  }

  #themeToggle .icon-sun,
  #themeToggle .icon-moon {
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  /* DARK (padrão) */
  body:not([data-theme="light"]) .icon-sun {
    display: none;
  }

  /* LIGHT */
  [data-theme="light"] .icon-moon {
    display: none;
  }

  #themeToggle:hover .icon-sun,
  #themeToggle:hover .icon-moon {
    transform: rotate(15deg) scale(1.1);
  }

}
/* ===============================
   HOVER UNDERLINE MMO
=============================== */

#mainNav .navbar-nav .nav-item .nav-link {
  position: relative;
  overflow: hidden;
}

#mainNav .navbar-nav .nav-item .nav-link::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 0;
  height: 2px;

  background: linear-gradient(
    90deg,
    transparent,
    #09ff00,
    transparent
  );

  transform: translateX(-50%);
  transition: width 0.35s ease;
}

#mainNav .navbar-nav .nav-item .nav-link:hover::after {
  width: 120%;
}
/* ===============================
   HOVER UNDERLINE MMO
=============================== */

#mainNav .navbar-nav .nav-item .nav-link {
  position: relative;
  overflow: hidden;
}

#mainNav .navbar-nav .nav-item .nav-link::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 0;
  height: 2px;

  background: linear-gradient(
    90deg,
    transparent,
    #09ff00,
    transparent
  );

  transform: translateX(-50%);
  transition: width 0.35s ease;
}

#mainNav .navbar-nav .nav-item .nav-link:hover::after {
  width: 120%;
}
@media (max-width: 991px) {

  /* ===============================
     NAVBAR MOBILE BASE
  =============================== */

  #mainNav {
    height: auto;
    padding: 0.5rem 0;
    margin-top: 0;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
  }

  #mainNav .navbar-brand {
    height: auto;
    margin: 0;
  }

  #mainNav .navbar-brand img {
    height: 70px;
    transform: none;
  }

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

  #mainNav .navbar-collapse {
    background: linear-gradient(
      180deg,
      #000 0%,
      #050505 100%
    );

    padding: 1.5rem 0;
    animation: menuFade 0.3s ease;
  }

  @keyframes menuFade {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* ===============================
     LISTA DE ITENS
  =============================== */

  #mainNav .nav-ul {
    flex-direction: column;
    gap: 18px;
  }

  #mainNav .navbar-nav .nav-item .nav-link {
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    padding: 10px 0;

    justify-content: center;
    text-align: center;
  }

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

  #mainNav .navbar-nav .nav-item .nav-link::after {
    bottom: -4px;
    height: 2px;
  }
}



  /* DROP DOWN  DEV TT*/  
    .dropdown-tt2 {
      list-style: none;
      padding: 10px;
      margin: 0;
      min-width: 50px; /* ajuste o valor para o tamanho desejado */
      display: flex;
    }

    .dropdown-item2 {
      justify-content: space-between;
      align-items: center;
      position: relative;
      padding: 10px;
      border-bottom: 1px solid #ccc;
      transition: background-color 0.2s ease-in-out;
    }
    
    .dropdown-item2::before {
      list-style: none;
      content: "";
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 2px solid #ccc;
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      margin-right: 10px; /* adiciona um espaço de 10px entre a caixa e a bandeira */
    }
    
    .dropdown-item2.selected::before {
      background-color: #333;
      border-color: #333;
    }
    
    .dropdown-item2 img {
      margin-left: auto;
      margin-right: 0;
      margin-left: 30px; /* adiciona um espaço de 30px entre a caixa e a bandeira */
    }
    


    .checkbox-group {
      list-style: none;
      padding: 10px;
      margin: 0;
      min-width: 50px; /* ajuste o valor para o tamanho desejado */
      display: flex;
    }
    
    .checkbox-group input[type="radio"] {
      display: none;
    }
    
    .checkbox-group label {
      position: relative;
      padding-left: 15px;
      cursor: pointer;
    }
    
    .checkbox-group label::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border: 2px solid #ccc;
      transition: background-color 0.2s ease-in-out;
    }
    
    .checkbox-group input[type="radio"]:checked + label::before {
      background-color: #09ff00;
      border-color: #666;
    }
    
    .checkbox-group label:hover::before {
      border-color: #666;
    }
    .navbar-fixed-social {
      list-style: none;
      position: fixed;
      top: 45%;
      right: 0;
      transform: translateY(-50%);
      z-index: 1000;
    }

    @keyframes pulse {
      10% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.1);
      }
      100% {
        transform: scale(1);
      }
    }
    .menuativado {
      position: relative;
      display: none;
      width: 251px;
      height: 518px;
      margin-top: 281px;
      right: 16px;
      background-image: url("../images/menu_midia_clicado.png");
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      cursor: pointer;
    }
    
    .menuativado.ativo {
      display: block;
    }
    
    .dropdown-menu-social {
      position: absolute;
      top: 58px;
      right: 20px;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      z-index: 2;
    }
    
    .dropdown-menu-social li {
      list-style: none;
    }
    
    .dropdown-menu-social a img {
      width: 100%;
      height: 100%;
    }
    .dropdown-menu {
      background: #000;
      border: 1px solid #fff;
      transform: translateY(10px);
      opacity: 0;
      transition: all 0.25s ease;
    }

.dropdown:hover .dropdown-menu {
  transform: translateY(0);
  opacity: 1;
}

    
    /* Hover states dos ícones */
    .hoverdiscord:hover img {
      content: url("../images/discord_clicado.png");
    }
    .hoverface:hover img {
      content: url("../images/facebook_clicado.png");
    }
    .hoverinsta:hover img {
      content: url("../images/instagram_clicado.png");
    }
    .hovertiktok:hover img {
      content: url("../images/tiktok_clicado.png");
    }
    .hovertwitter:hover img {
      content: url("../images/twitter_clicado.png");
    }
    .hoveryoutube:hover img {
      content: url("../images/youtube_clicado.png");
    }
    

    #menuIcon {
      cursor: pointer;
      width: 100%;
      height: auto;
    }
    
    #menuIcon.hidden {
      display: none;
    }
    
    .dropdown-toggle img {
      animation: pulse 2s infinite;
    }
    .dropdown-toggle:hover img {
      animation: pulsa 1s 1;
    }
    
    @keyframes pulsa {
      0% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.1);
      }
      100% {
        transform: scale(1);
      }
    }


    .page2 {
      padding-top: 1.5rem;
      padding-bottom: 1rem;
      width: auto;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background-image: url("assets/images/backgroundguia2.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

    /* ===============================
      BOTÃO DE TEMA SVG
    =============================== */

    .theme-icon {
      stroke: var(--text-main);
      fill: none;
      stroke-width: 2;
      transition: all 0.4s ease;
    }

    /* DARK */
    .icon-moon {
      opacity: 1;
      transform: scale(1);
    }

    .icon-sun {
      opacity: 0;
      transform: scale(0.5) rotate(-90deg);
    }

    /* LIGHT */
    [data-theme="light"] .icon-moon {
      opacity: 0;
      transform: scale(0.5) rotate(90deg);
    }

    [data-theme="light"] .icon-sun {
      opacity: 1;
      transform: scale(1) rotate(0deg);
    }

    /* HOVER */
    #themeToggle:hover .theme-icon {
      stroke: var(--accent-main);
      transform: rotate(20deg) scale(1.1);
    }