/* Menu Mobile do Zero - Apenas mobile */
@media (max-width: 768px) {
  /* Garantir ancoragem do toggle no header */
  .header .container { position: relative; }

  /* Botão do menu (hambúrguer) */
  .mobile-menu-toggle {
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 2147483647; /* acima do overlay */
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 1.6rem;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    cursor: pointer;
  }

  /* Overlay que cobre todo o site */
  .mobile-menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2147483646; /* muito alto, abaixo do toggle */
    background: #12022B; /* opaco: cobre o site */
    box-sizing: border-box;
    padding: 80px 20px 24px; /* folga do header */
    overflow-y: auto;
  }

  .mobile-menu-overlay.open { 
    display: block !important; 
}

  /* Reduz o tamanho dos cards quando o menu estiver aberto */
  body.menu-open main > *:not(.mobile-menu-overlay) {
    transform: scale(0.95);
    transform-origin: top center;
    opacity: 0.8;
    transition: transform 0.3s ease, opacity 0.3s ease;
    filter: blur(1px);
    pointer-events: none; /* Impede interação com os elementos por baixo */
  }
  
  /* Garante que o menu fique acima de tudo */
  .mobile-menu-overlay {
    z-index: 9999 !important;
  }
  
  /* Ajusta o posicionamento do menu */
  .mobile-menu-overlay.open {
    display: block !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
  }

  /* Lista suspensa (vertical) */
  .mobile-menu-overlay ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .mobile-menu-overlay li { width: 100%; }

  .mobile-menu-overlay a {
    display: block;
    width: 90%; /* Reduz a largura para 90% do container */
    max-width: 300px; /* Largura máxima para telas maiores */
    margin: 0 auto; /* Centraliza o card */
    color: #ffffff;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    padding: 14px 16px;
    border-radius: 10px;
    background: rgba(145, 50, 231, 0.18);
    border: 1px solid rgba(145, 50, 231, 0.35);
  }

  .mobile-menu-overlay a:active,
  .mobile-menu-overlay a:focus {
    outline: none;
    background: rgba(145, 50, 231, 0.28);
  }

  /* Bloquear scroll do body quando menu aberto */
  body.no-scroll { overflow: hidden; height: 100vh; }
}

/* Desktop: não exibir nada do menu mobile */
@media (min-width: 769px) {
  .mobile-menu-toggle,
  .mobile-menu-overlay { display: none !important; }
}