/* Header - Versão Ajustada
 * Baseado na estética afrofuturista e gamificada
 * Versão 2.2 - Navegação futurista com tamanho ajustado
 */

 body {
  font-family: "Heebo", "Nunito", sans-serif;
  margin: 0;
  padding: 0;
}

/* Animações para o header */
@keyframes headerReveal {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes logoGlow {
  0% { filter: drop-shadow(0 0 1.1px rgba(107, 70, 193, 0.3)); }
  50% { filter: drop-shadow(0 0 5.5px rgba(107, 70, 193, 0.6)) drop-shadow(0 0 8.8px rgba(44, 62, 124, 0.4)); }
  100% { filter: drop-shadow(0 0 1.1px rgba(107, 70, 193, 0.3)); }
}

@keyframes scanLine {
  0% {
    background-position: -100% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Estilos do header - Redesenhado para ambiente futurista */
.site_header {
  display: none; /* Oculto por padrão em desktop */
  align-items: center;
  justify-content: space-between;
  padding: 11px; /* Aumentado em 10% de 10px */
  background: linear-gradient(90deg, #1A1F3A 0, #2C3E7C 50%, #1A1F3A 100%);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  width: 100%;
  border-bottom: 1px solid rgba(107, 70, 193, 0.2);
  transition: all 0.3s ease;
  transform: translateY(0);
}

.site_header.hidden {
  transform: translateY(-100%);
}

.site_header .logo svg {
  height: 69.3px; /* Aumentado em 10% de 63px */
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 60;
  padding: 15px 22px; /* Aumentado em 10% de 14px 20px */
  background: linear-gradient(90deg, #1A1F3A 0, #2C3E7C 50%, #1A1F3A 100%);
  border-bottom: 1px solid rgba(107, 70, 193, 0.2);
  transition: all 0.4s ease;
  transform: translateY(0);
}

.header.active {
  padding: 11px 22px; /* Aumentado em 10% de 10px 20px */
  background: linear-gradient(90deg, #1A1F3A 0, #2C3E7C 50%, #1A1F3A 100%);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.header.hidden {
  transform: translateY(-100%);
}

.header_in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1400px;
  margin: 0 auto;
}

.logo img {
  height: 77px; /* Aumentado em 10% de 70px */
}

.logo svg {
  height: 77px; /* Aumentado em 10% de 70px */
  transition: all 0.3s ease;
}

.logo a {
  display: block;
  color: #6B46C1;
}

.logo a:hover {
  transform: scale(1.033); /* Aumentado em 10% de 1.03 */
  filter: drop-shadow(0 0 3.3px rgba(107, 70, 193, 0.5));
}

.site_header .logo img, .site_header .logo svg {
  height: 69.3px; /* Aumentado em 10% de 63px */
}

.nav ul li a {
  padding: 7.7px 12.1px; /* Aumentado em 10% de 7px 11px */
  font-size: 14.3px; /* Aumentado em 10% de 13px */
  font-weight: 600;
  color: #ffffff;
  transition: all 0.3s ease;
  text-decoration: none;
}

.nav ul li a:hover {
  color: #6B46C1;
}

.metaportal_fn_button {
  padding: 4.4px 11px; /* Aumentado em 10% de 4px 10px */
  font-size: 12.1px; /* Aumentado em 10% de 11px */
}

/* Ajustes para dispositivos móveis */
@media (max-width: 991px) {
  #header.header {
    display: none;
  }
  
  .site_header {
    display: flex;
    padding: 8.8px 15.4px; /* Aumentado em 10% de 8px 14px */
    height: auto;
    align-items: center;
  }
  
  .site_header .logo img, .site_header .logo svg {
    height: 69.3px; /* Aumentado em 10% de 63px */
  }
  
  .hamburger {
    width: 22px; /* Aumentado em 10% de 20px */
    height: 16.5px; /* Aumentado em 10% de 15px */
  }
  
  .hamburger .bar {
    height: 1.65px; /* Aumentado em 10% de 1.5px */
  }
  
  .submenu li a {
    padding: 6.6px 11px; /* Aumentado em 10% de 6px 10px */
    font-size: 12.1px; /* Aumentado em 10% de 11px */
  }
}

/* Ajustes para telas muito pequenas */
@media (max-width: 480px) {
  .site_header {
    padding: 6.6px 8.8px; /* Aumentado em 10% de 6px 8px */
  }
  
  .logo img {
    height: 19.8px; /* Aumentado em 10% de 18px */
  }
  
  .metaportal_fn_button {
    padding: 3.3px 7.7px; /* Aumentado em 10% de 3px 7px */
    font-size: 11px; /* Aumentado em 10% de 10px */
  }
}

.logo {
  z-index: 999;
  position: relative;
  transition: all 0.3s ease;
}

.logo:hover {
  transform: scale(1.033); /* Aumentado em 10% de 1.03 */
  animation: logoGlow 2s infinite;
}

.class_userIconLoged {
  cursor: pointer;
  transition: all 0.3s ease;
}

.class_userIconLoged:hover {
  transform: scale(1.077); /* Aumentado em 10% de 1.07 */
}

.svg-header-logged {
  cursor: pointer;
  transition: all 0.3s ease;
}

.svg-header {
  cursor: not-allowed;
  opacity: 0.7;
}

.svg-header-logged:hover path {
  fill: #FFD700;
  filter: drop-shadow(0 0 3.3px rgba(107, 70, 193, 0.5));
}

.svg-header path:hover {
  fill: #FF4655;
}

.logo:hover svg {
  transform: scale(1.033); /* Aumentado em 10% de 1.03 */
}

/* Hamburger menu - Redesenhado com efeito futurista */
.hamburger {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4.4px; /* Aumentado em 10% de 4px */
  width: 27.5px; /* Aumentado em 10% de 25px */
  height: 23.1px; /* Aumentado em 10% de 21px */
  justify-content: center;
  position: relative;
  z-index: 9999;
  transition: all 0.3s ease;
}

.hamburger:hover {
  transform: scale(1.077); /* Aumentado em 10% de 1.07 */
}

.hamburger .bar {
  width: 100%;
  height: 2.2px; /* Aumentado em 10% de 2px */
  background-color: white;
  border-radius: 2.2px; /* Aumentado em 10% de 2px */
  transition: all 0.3s ease;
}

.hamburger:hover .bar {
  background-color: #6B46C1;
  box-shadow: 0 0 6.6px rgba(107, 70, 193, 0.7);
}

/* Hamburger animado quando ativo */
.hamburger.active .bar:nth-child(1) {
  transform: translateY(6.6px) rotate(45deg); /* Aumentado em 10% de 6px */
  background-color: #6B46C1;
}

.hamburger.active .bar:nth-child(2) {
  opacity: 0;
}

.hamburger.active .bar:nth-child(3) {
  transform: translateY(-6.6px) rotate(-45deg); /* Aumentado em 10% de 6px */
  background-color: #6B46C1;
}

/* Estilos do overlay - Efeito nebuloso futurista */
.overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(26, 31, 58, 0.8);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  z-index: 998;
  cursor: pointer;
  backdrop-filter: blur(6.6px); /* Aumentado em 10% de 6px */
  -webkit-backdrop-filter: blur(6.6px); /* Aumentado em 10% de 6px */
}

.overlay.active {
  opacity: 1 !important;
  visibility: visible;
}

/* Estilos do menu lateral (sidenav) - Redesenhado para experiência futurista */
.side-menu {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 0;
  position: fixed;
  top: 0;
  left: 0;
  background: linear-gradient(135deg, #1A1F3A, #2C3E7C);
  overflow-x: hidden;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  padding-top: 53.9px; /* Aumentado em 10% de 49px */
  z-index: 999;
  box-shadow: 3.3px 0 11px rgba(0, 0, 0, 0.3);
  border-right: 1px solid rgba(107, 70, 193, 0.2);
}

.side-menu::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, rgba(107, 70, 193, 0), rgba(107, 70, 193, 0.4), rgba(107, 70, 193, 0));
}

.side-menu.active {
  width: 215.6px; /* Aumentado em 10% de 196px */
}

.side-menu ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.side-menu ul li {
  display: flex;
  padding: 0;
  text-align: left;
  position: relative;
  width: 100%;
}

.side-menu ul li a {
  display: block;
  padding: 12.1px 19.8px; /* Aumentado em 10% de 11px 18px */
  color: #ffffff;
  text-decoration: none;
  font-size: 15.4px; /* Aumentado em 10% de 14px */
  font-weight: 600;
  letter-spacing: 0.33px; /* Aumentado em 10% de 0.3px */
  width: 100%;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  border-left: 2px solid transparent;
}

.side-menu ul li a:hover {
  color: #6B46C1;
  border-left-color: #6B46C1;
  padding-left: 23.1px; /* Aumentado em 10% de 21px */
}

.side-menu ul li a::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(107, 70, 193, 0.1), transparent);
  background-size: 200% 100%;
  transform: translateX(-100%);
  opacity: 0;
}

.side-menu ul li a:hover::after {
  animation: scanLine 1s ease;
  opacity: 1;
}

/* Media queries para responsividade */
@media (max-width: 768px) {
  .side-menu {
    width: 0;
  }
  
  .side-menu.active {
    width: 192.5px; /* Aumentado em 10% de 175px */
  }
  
  .side-menu ul li a {
    font-size: 0.99em; /* Aumentado em 10% de 0.9em */
    padding: 11px 15.4px; /* Aumentado em 10% de 10px 14px */
  }
  
  .site_header {
    padding: 11px 15.4px; /* Aumentado em 10% de 10px 14px */
  }
}

@media (max-width: 576px) {
  .side-menu.active {
    width: 177.1px; /* Aumentado em 10% de 161px */
  }
  
  .side-menu ul li a {
    font-size: 0.935em; /* Aumentado em 10% de 0.85em */
    padding: 8.8px 15.4px; /* Aumentado em 10% de 8px 14px */
  }
  
  .hamburger {
    width: 23.1px; /* Aumentado em 10% de 21px */
    height: 19.8px; /* Aumentado em 10% de 18px */
  }
  
  .hamburger .bar {
    height: 1.65px; /* Aumentado em 10% de 1.5px */
  }
}

@media (max-width: 400px) {
  .side-menu.active {
    width: 77%; /* Aumentado em 10% de 70% */
  }
  
  .side-menu ul li a {
    font-size: 0.88em; /* Aumentado em 10% de 0.8em */
    padding: 8.8px 11px; /* Aumentado em 10% de 8px 10px */
  }
}

/* Header Global - Adaptação para estética afrofuturista */
.header:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: #1b121d;
  background: linear-gradient(90deg, #1A1F3A 0, #2C3E7C 50%, #1A1F3A 100%);
  transform: translateY(-105%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 3.3px 15.4px rgba(0, 0, 0, 0.3);
}

.header.active:after {
  transform: translateY(0);
}

.header.active {
  z-index: 60;
  padding: 8.8px 23.1px; /* Aumentado em 10% de 8px 21px */
  border-bottom-color: rgba(255, 215, 0, 0.2);
}

.header.active::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(107, 70, 193, 0.5), transparent);
}

.header .header_in {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
}

.trigger_logo {
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
}

.trigger_logo:hover {
  transform: scale(1.011); /* Aumentado em 10% de 1.01 */
}

.nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.nav ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav ul li {
  margin: 0 4.4px; /* Aumentado em 10% de 4px */
  position: relative;
}

.nav ul li a {
  padding: 7.7px 11px; /* Aumentado em 10% de 7px 10px */
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.33px; /* Aumentado em 10% de 0.3px */
  transition: all 0.3s ease;
  border-radius: 4.4px; /* Aumentado em 10% de 4px */
  position: relative;
  display: block;
  overflow: hidden;
}

.nav ul li a:hover {
  color: #6B46C1;
}

.nav ul li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1.65px; /* Aumentado em 10% de 1.5px */
  background: linear-gradient(to right, transparent, #6B46C1, transparent);
  transform: scaleX(0);
  opacity: 0;
  transition: all 0.3s ease;
}

.nav ul li a:hover::after {
  transform: scaleX(1);
  opacity: 1;
}

.wallet {
  margin-left: 15.4px; /* Aumentado em 10% de 14px */
}

@media(max-width:1040px) {
  .site_header{
    display: flex;
  }
  #header {
    display: none;
  }
}

/* Adicionar após o estilo .wallet */
.login-btn {
  margin-left: 15.4px; /* Aumentado em 10% de 14px */
}

.login-btn .metaportal_fn_button {
  background: linear-gradient(135deg, #1A1F3A, #2C3E7C);
  color: white;
  font-weight: 600;
  transition: all 0.3s ease;
  padding: 7.7px 19.8px; /* Aumentado em 10% de 7px 18px */
  border-radius: 6.6px; /* Aumentado em 10% de 6px */
  border: 1px solid rgba(107, 70, 193, 0.2);
  box-shadow: 0 3.3px 7.7px rgba(14, 20, 40, 0.4);
  min-width: 77px; /* Aumentado em 10% de 70px */
  text-align: center;
}

.login-btn .metaportal_fn_button:hover {
  background: linear-gradient(135deg, #2C3E7C, #6B46C1);
  transform: translateY(-1.65px); /* Aumentado em 10% de -1.5px */
  box-shadow: 0 4.4px 8.8px rgba(44, 62, 124, 0.4);
}

.login-btn .metaportal_fn_button span {
  font-size: 12.1px; /* Aumentado em 10% de 11px */
  letter-spacing: 0.33px; /* Aumentado em 10% de 0.3px */
  text-transform: uppercase;
  font-weight: 700;
}

/* Estilos para o menu dropdown - Desktop */
.has-submenu {
  position: relative;
}

.has-submenu > a {
  position: relative;
  z-index: 2;
}

.has-submenu:hover > a {
  color: #6B46C1;
}

/* Submenu - Versão melhorada */
.has-submenu .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, rgba(26, 31, 58, 0.95), rgba(44, 62, 124, 0.95));
  min-width: 242px; /* Aumentado em 10% de 220px */
  padding: 8.8px 0; /* Aumentado em 10% de 8px 0 */
  box-shadow: 0 6.6px 15.4px rgba(0, 0, 0, 0.25), 0 0 11px rgba(107, 70, 193, 0.15);
  z-index: 1000;
  border-radius: 7.7px; /* Aumentado em 10% de 7px */
  border: 1px solid rgba(107, 70, 193, 0.2);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  backdrop-filter: blur(7.7px); /* Aumentado em 10% de 7px */
  -webkit-backdrop-filter: blur(7.7px); /* Aumentado em 10% de 7px */
}

.has-submenu .submenu::before {
  content: '';
  position: absolute;
  top: -4.4px; /* Aumentado em 10% de -4px */
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 7.7px; /* Aumentado em 10% de 7px */
  height: 7.7px; /* Aumentado em 10% de 7px */
  background: rgba(40, 44, 75, 0.95);
  border-top: 1px solid rgba(33, 150, 243, 0.2);
  border-left: 1px solid rgba(33, 150, 243, 0.2);
}

.has-submenu:hover .submenu {
  display: block;
  opacity: 1;
  visibility: visible;
  animation: dropdownFadeIn 0.3s forwards;
}

.submenu li {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.submenu li a {
  display: block;
  padding: 8.8px 15.4px; /* Aumentado em 10% de 8px 14px */
  color: #ffffff;
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 14.3px; /* Aumentado em 10% de 13px */
  border-radius: 0;
  position: relative;
  overflow: hidden;
  width: 100%;
  text-align: left;
  white-space: nowrap; /* Evita quebra de linha no texto */
}

.submenu li a:hover {
  color: #6B46C1;
  text-shadow: 0 0 2.2px rgba(0, 0, 0, 0.2);
}

.submenu li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
  transform: none;
  opacity: 1;
}

.submenu li a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2.2px; /* Aumentado em 10% de 2px */
  background: #FFD700;
  transform: scaleY(0);
  transition: transform 0.3s ease;
}

.submenu li a:hover::before {
  transform: scaleY(1);
  box-shadow: 0 0 6.6px rgba(255, 215, 0, 0.5);
}

/* Estilos para o menu dropdown mobile */
.has-submenu-mobile {
  position: relative;
  width: 100%;
}

.has-submenu-mobile > a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12.1px 19.8px; /* Aumentado em 10% de 11px 18px */
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  border-left: 2px solid transparent;
  transition: all 0.3s ease;
}

.has-submenu-mobile > a:hover,
.has-submenu-mobile.active > a {
    color: #6B46C1;
    border-left-color: #6B46C1;
}

.has-submenu-mobile > a::after {
  content: '▼';
  font-size: 7.7px; /* Aumentado em 10% de 7px */
  transition: all 0.3s ease;
}

.has-submenu-mobile.active > a::after {
  transform: rotate(180deg);
  color: #6B46C1;
}

.submenu-mobile {
  display: none;
  background: rgba(26, 31, 58, 0.95);
  padding: 3.3px 0 3.3px 11px; /* Aumentado em 10% de 3px 0 3px 10px */
  border-left: 2px solid rgba(107, 70, 193, 0.4);
  margin-left: 7.7px; /* Aumentado em 10% de 7px */
  transition: all 0.3s ease;
}

.has-submenu-mobile.active .submenu-mobile {
  display: block;
  animation: dropdownFadeIn 0.3s forwards;
}

.submenu-mobile li {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.submenu-mobile li a {
  display: block;
  padding: 11px 11px; /* Aumentado em 10% de 10px 10px */
  color: #ffffff;
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 14.3px; /* Aumentado em 10% de 13px */
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.submenu-mobile li:last-child a {
  border-bottom: none;
}

.submenu-mobile li a:hover {
  color: #6B46C1;
  padding-left: 15.4px; /* Aumentado em 10% de 14px */
}

.submenu-mobile li a::before {
  content: '';
  color: #6B46C1;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3.85px; /* Aumentado em 10% de 3.5px */
  height: 3.85px; /* Aumentado em 10% de 3.5px */
  border-radius: 50%;
  background: rgba(107, 70, 193, 0.2);
  opacity: 0;
  transition: all 0.3s ease;
}

.submenu-mobile li a:hover::before {
  opacity: 1;
  left: 3.85px; /* Aumentado em 10% de 3.5px */
}

/* Animação para o menu dropdown */
@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(7.7px); /* Aumentado em 10% de 7px */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =================== ESTILOS ADICIONAIS DO HEADER =================== */
/* Hamburger Menu */
.hamburger {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4.5px; /* Aumentado em 10% de 4px */
  width: 27.5px; /* Aumentado em 10% de 25px */
  height: 23px; /* Aumentado em 10% de 21px */
  justify-content: center;
  z-index: 999;
}

.hamburger .bar {
  width: 100%;
  height: 2.2px; /* Aumentado em 10% de 2px */
  background-color: white;
  border-radius: 2.2px; /* Aumentado em 10% de 2px */
  transition: all 0.3s ease;
}

.hamburger:hover .bar {
  background-color: #6B46C1;
  box-shadow: 0 0 6.6px rgba(107, 70, 193, 0.7); /* Aumentado em 10% de 6px */
}

/* Menu lateral mobile */
.side-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: linear-gradient(135deg, #1A1F3A, #2C3E7C);
  border-right: 1px solid rgba(255, 215, 0, 0.2);
  overflow-x: hidden;
  transition: 0.3s;
  z-index: 9999;
  padding-top: 46px; /* Aumentado em 10% de 42px */
}

.side-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.side-menu ul li {
  padding: 5.5px 15.5px; /* Aumentado em 10% de 5px 14px */
}

.side-menu ul li a {
  color: white;
  text-decoration: none;
  font-size: 15.5px; /* Aumentado em 10% de 14px */
  display: block;
  padding: 7.5px 11px; /* Aumentado em 10% de 7px 10px */
  border-left: 2px solid transparent;
  transition: all 0.3s ease;
}

.side-menu ul li a:hover {
  color: #6B46C1;
  border-left-color: #6B46C1;
}

/* Submenu para mobile */
.has-submenu-mobile ul.submenu-mobile {
  display: none;
  padding-left: 15.5px; /* Aumentado em 10% de 14px */
  margin-top: 3.3px; /* Aumentado em 10% de 3px */
  background: rgba(26, 31, 58, 0.95);
  border-left: 2px solid rgba(255, 215, 0, 0.4);
}

.has-submenu-mobile.active ul.submenu-mobile {
  display: block;
}

.side-menu ul.submenu-mobile li a {
  font-size: 13.2px; /* Aumentado em 10% de 12px */
  padding: 5.5px 11px; /* Aumentado em 10% de 5px 10px */
}

/* Overlay para menu mobile */
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.overlay.active {
  display: block;
}

/* Menu Dropdown */
.has-submenu {
  position: relative;
}

.has-submenu > a {
  position: relative;
  z-index: 2;
}

.has-submenu:hover > a {
  color: #6B46C1;
}

.has-submenu .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, rgba(26, 31, 58, 0.95), rgba(44, 62, 124, 0.95));
  min-width: 242px; /* Aumentado em 10% de 220px */
  padding: 8.8px 0; /* Aumentado em 10% de 8px 0 */
  box-shadow: 0 6.6px 15.4px rgba(0, 0, 0, 0.25), 0 0 11px rgba(33, 150, 243, 0.15);
  z-index: 1000;
  border-radius: 7.7px; /* Aumentado em 10% de 7px */
  border: 1px solid rgba(33, 150, 243, 0.2);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  backdrop-filter: blur(7.7px); /* Aumentado em 10% de 7px */
  -webkit-backdrop-filter: blur(7.7px); /* Aumentado em 10% de 7px */
}

.has-submenu:hover .submenu {
  display: block;
  opacity: 1;
  visibility: visible;
}

.submenu li {
  padding: 3.3px 0; /* Aumentado em 10% de 3px 0 */
}

.submenu li a {
  display: block;
  padding: 7.7px 15.4px; /* Aumentado em 10% de 7px 14px */
  color: #ffffff;
  text-decoration: none;
  transition: all 0.2s ease;
  font-size: 0.88rem; /* Aumentado em 10% de 0.8rem */
  white-space: nowrap; /* Evita quebra de linha no texto */
}

.submenu li a:hover {
  color: #6B46C1;
  padding-left: 19.8px; /* Aumentado em 10% de 18px */
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}

/* Login Button */
.login-btn {
  margin-left: 15.4px; /* Aumentado em 10% de 14px */
}

.login-btn .metaportal_fn_button {
  background: linear-gradient(135deg, #2196f3, #3f5787);
  color: #ffffff;
  font-weight: 600;
  transition: all 0.3s ease;
  padding: 7.7px 19.8px; /* Aumentado em 10% de 7px 18px */
  border-radius: 4.4px; /* Aumentado em 10% de 4px */
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 3.3px 7.7px rgba(14, 20, 40, 0.4);
  min-width: 77px; /* Aumentado em 10% de 70px */
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 31px; /* Aumentado em 10% de 28px */
  text-decoration: none;
}

.login-btn .metaportal_fn_button:hover {
  background: linear-gradient(135deg, #3a7cce, #2d67b9);
  transform: translateY(-2.2px); /* Aumentado em 10% de -2px */
  box-shadow: 0 4.4px 11px rgba(33, 150, 243, 0.4);
}

.login-btn .metaportal_fn_button:active {
  background: linear-gradient(135deg, #4263a9, #38a3ff);
  transform: translateY(1.1px); /* Aumentado em 10% de 1px */
  box-shadow: 0 1.1px 5.5px rgba(33, 150, 243, 0.7);
  border-color: rgba(255, 255, 255, 0.8);
}

.login-btn .metaportal_fn_button span {
  font-size: 12.1px; /* Aumentado em 10% de 11px */
  letter-spacing: 0.33px; /* Aumentado em 10% de 0.3px */
  text-transform: uppercase;
  font-weight: 700;
  display: inline-block;
  line-height: 1;
}

/* Responsividade - Sobrescreve definições anteriores */
@media (max-width: 1040px) {
  .header {
    display: none; /* Oculta o header desktop em telas menores */
  }
  
  .site_header {
    display: flex; /* Exibe o header mobile em telas menores */
  }
  

/* Efeito de sublinhado em hover - Sobrescreve definições anteriores */
.nav ul li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #6B46C1;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.nav ul li a:hover::after {
  transform: scaleX(1);
}

/* Adicionar ao final do arquivo */
/* Estilos para as páginas WiniVerse e Colecionáveis */
.winiverse_cta,
.collections_cta {
  text-align: center;
  padding: 30.8px; /* Aumentado em 10% de 28px */
  background: linear-gradient(135deg, rgba(26, 31, 58, 0.5), rgba(44, 62, 124, 0.5));
  border-radius: 11px; /* Aumentado em 10% de 10px */
  margin: 30.8px 0; /* Aumentado em 10% de 28px 0 */
  border: 1px solid rgba(107, 70, 193, 0.2);
}

.winiverse_cta h3,
.collections_cta h3 {
  color: #6B46C1;
  margin-bottom: 15.4px; /* Aumentado em 10% de 14px */
  font-size: 24.2px; /* Aumentado em 10% de 22px */
}

.winiverse_cta p,
.collections_cta p {
  margin-bottom: 19.8px; /* Aumentado em 10% de 18px */
  font-size: 15.4px; /* Aumentado em 10% de 14px */
}

.winiverse_cta .metaportal_fn_button,
.collections_cta .metaportal_fn_button {
  display: inline-block;
  padding: 8.8px 23.1px; /* Aumentado em 10% de 8px 21px */
  font-size: 15.4px; /* Aumentado em 10% de 14px */
}