/* p5-menu.css — menu do celular em tela cheia (pedido do dono, 18/10/2026): itens grandes, submenu em uma
   "segunda tela" que desliza (com Voltar), botão de aula grátis grande embaixo. Só até 768px; o desktop não muda.
   Carrega depois de p3-ui.css. A montagem dos painéis está em p5-menu.js (sem o script, o menu antigo segue valendo). */
/* No computador o menu novo não existe; no celular o original fica escondido (a cópia aciona os links dele). */
.mnav-raiz, .mnav-painel { display: none; }
@media (max-width: 768px) {
  html.mnav-pronto .nav > :not(.mnav-raiz):not(.mnav-painel) { display: none !important; }
  html.mnav-pronto .nav {
    right: 0; left: 0; width: 100%; max-width: none;
    padding: 0; gap: 0; align-items: stretch;
    background:
      radial-gradient(120% 60% at 100% 0%, rgba(30,107,255,.22), transparent 60%),
      radial-gradient(90% 50% at 0% 100%, rgba(77,163,255,.12), transparent 60%),
      linear-gradient(180deg, #0b1220 0%, #070b14 100%);
    box-shadow: none; overflow: hidden;
    transform: translateY(-100%); visibility: hidden;
    transition: transform .42s cubic-bezier(.22,.8,.24,1), visibility 0s linear .42s;
  }
  html.mnav-pronto .nav.nav--open { transform: none; visibility: visible; transition: transform .42s cubic-bezier(.22,.8,.24,1); }
  html.mnav-pronto .nav-overlay { display: none !important; }

  /* painel principal (a lista de cima) */
  .mnav-raiz, .mnav-painel {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    padding: 96px 22px calc(22px + env(safe-area-inset-bottom)); overflow-y: auto; -webkit-overflow-scrolling: touch;
    transition: transform .38s cubic-bezier(.22,.8,.24,1), opacity .38s ease;
  }
  .mnav-raiz { transform: none; }
  .nav.mnav-sub-aberto .mnav-raiz { transform: translateX(-28%); opacity: 0; pointer-events: none; }
  .mnav-painel { transform: translateX(100%); visibility: hidden; transition: transform .38s cubic-bezier(.22,.8,.24,1), visibility 0s linear .38s; }
  .mnav-painel.is-ativo { transform: none; visibility: visible; transition: transform .38s cubic-bezier(.22,.8,.24,1); }

  .mnav-kicker { font-weight: 800; font-size: .72rem; letter-spacing: .32em; text-transform: uppercase; color: var(--color-accent-light, #4DA3FF); margin: 0 0 10px 2px; }

  /* itens grandes */
  .mnav-item {
    display: flex !important; align-items: center; justify-content: space-between; gap: 14px; width: 100%;
    min-height: 64px; padding: 10px 2px !important; margin: 0; border: 0; border-bottom: 1px solid rgba(156,200,255,.12);
    background: none; color: #fff !important; text-align: left; cursor: pointer; text-decoration: none;
    font-family: var(--font-display, Oswald, sans-serif); font-weight: 600; font-size: 1.9rem !important;
    line-height: 1.05; letter-spacing: .02em; text-transform: uppercase;
    opacity: 0; transform: translateY(14px);
  }
  .mnav-item::after { display: none !important; }
  .nav.nav--open .mnav-item { opacity: 1; transform: none; transition: opacity .4s ease, transform .4s cubic-bezier(.22,.8,.24,1), color .2s ease; }
  .mnav-item.is-atual { color: var(--color-accent-light, #4DA3FF) !important; }
  .mnav-item:active { color: var(--color-accent-light, #4DA3FF) !important; }
  .mnav-seta {
    flex: none; width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    border: 1.5px solid rgba(77,163,255,.55); color: #9CC8FF; background: rgba(30,107,255,.12);
  }
  .mnav-seta svg { width: 16px; height: 16px; }

  /* submenu (segunda tela) */
  .mnav-voltar {
    display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; margin: 0 0 18px -4px; padding: 10px 14px 10px 8px;
    border: 1.5px solid rgba(156,200,255,.25); border-radius: 999px; background: rgba(255,255,255,.04); color: #dfe9f7;
    font: 700 .82rem/1 var(--font-body, Montserrat, sans-serif); letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
  }
  .mnav-voltar svg { width: 18px; height: 18px; }
  .mnav-titulo { font-family: var(--font-display, Oswald, sans-serif); font-weight: 700; font-size: 2.6rem; line-height: 1; text-transform: uppercase; color: #fff; margin: 0 0 6px; }
  .mnav-titulo em { font-style: normal; color: var(--color-accent-light, #4DA3FF); }
  .mnav-todos { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 18px; color: #9CC8FF !important; font-weight: 700; font-size: .95rem !important; padding: 6px 0 !important; text-decoration: none; }
  .mnav-lista { display: flex; flex-direction: column; gap: 10px; }
  .mnav-sub {
    display: flex !important; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
    min-height: 58px; padding: 14px 16px !important; border-radius: 14px; text-decoration: none;
    background: linear-gradient(180deg, rgba(24,38,68,.9), rgba(14,22,40,.9)); border: 1px solid rgba(77,163,255,.22);
    color: #f2f6fc !important; font-family: var(--font-body, Montserrat, sans-serif); font-weight: 600; font-size: 1.12rem !important;
    line-height: 1.25; letter-spacing: .01em; text-transform: none;
    opacity: 0; transform: translateX(24px);
  }
  .mnav-sub::after { display: none !important; }
  .mnav-painel.is-ativo .mnav-sub { opacity: 1; transform: none; transition: opacity .35s ease, transform .35s cubic-bezier(.22,.8,.24,1); }
  .mnav-sub svg { flex: none; width: 16px; height: 16px; color: #4DA3FF; }
  .mnav-sub.is-atual { border-color: #4DA3FF; box-shadow: 0 0 0 1px #4DA3FF inset, 0 0 24px rgba(30,107,255,.35); }
  .mnav-sub:active { background: rgba(30,107,255,.35); }

  /* reforço sobre as regras antigas de ".nav a" (maiúsculas, espaçamento, tamanho) */
  html.mnav-pronto .nav .mnav-sub { text-transform: none !important; letter-spacing: .01em !important; font-size: 1.12rem !important; }
  html.mnav-pronto .nav .mnav-sub > span, html.mnav-pronto .nav .mnav-item > span:first-child { flex: 1 1 auto; min-width: 0; }
  html.mnav-pronto .nav .mnav-todos { text-transform: none !important; letter-spacing: .02em !important; width: auto !important; }
  .mnav-todos svg { width: 14px; height: 14px; flex: none; }

  /* rodapé do menu: aula grátis + idiomas */
  .mnav-pe { margin-top: auto; padding-top: 26px; display: flex; flex-direction: column; gap: 16px; }
  .mnav-pe .nav-cta {
    display: flex !important; align-items: center; justify-content: center; width: 100%; min-height: 60px; border-radius: 14px;
    font-size: 1.05rem !important; letter-spacing: .14em; box-shadow: 0 14px 40px rgba(30,107,255,.45);
  }
  .mnav-pe .lang-switch { justify-content: center; gap: 14px; }
  .mnav-pe .lang-switch a { padding: 6px !important; width: auto !important; }
  .mnav-pe .lang-switch svg { width: 38px; height: auto; border-radius: 4px; }

  /* o X fica por cima do menu */
  html.mnav-pronto .menu-toggle { z-index: 1001; }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  html.mnav-pronto .nav, .mnav-raiz, .mnav-painel, .mnav-item, .mnav-sub { transition: none !important; }
  .mnav-item, .mnav-sub { opacity: 1 !important; transform: none !important; }
}