/* =========================================================
   MOBILE.CSS — NekoPlayer (Atualizado)
   - Responsividade completa (Home + páginas internas)
   - Correções de modais (z-index acima da navbar, safe-area, scroll)
   - Menu mobile com overflow e altura correta
========================================================= */

/* ---------- Fixes globais (vale para todas as telas) ---------- */
:root{
  --nav-h: 70px;
}

/* ✅ Modais sempre acima da navbar (navbar usa z-index:1000 no style.css) */
.modal-overlay{
  z-index: 10050;
  padding:
    calc(24px + env(safe-area-inset-top, 0px))
    14px
    calc(24px + env(safe-area-inset-bottom, 0px));
}

.modal{
  max-height: calc(100vh - 120px);
}

/* Evita “cortar” o X no topo em telas pequenas */
.modal-close{
  top: 12px;
  right: 12px;
}

/* Menu mobile não pode ficar por trás de nada */
.nav-links{
  z-index: 1100;
}

/* Melhor toque no hambúrguer */
.menu-toggle{
  min-width: 44px;
  min-height: 44px;
}

/* ---------- Breakpoints principais ---------- */
@media (max-width: 900px) {
  /* Layout antigo (section-hero / steps) */
  .section-hero { 
    grid-template-columns: 1fr; 
    text-align: center; 
    padding-top: 100px; 
    gap: 30px; 
  }
  .hero-subtitle { margin: 0 auto 30px; }
  .download-buttons { justify-content: center; }
  .steps-grid { grid-template-columns: repeat(2, 1fr); } /* tablet */

  /* UI 2026: Home */
  .home-hero-grid { grid-template-columns: 1fr; }
  .hero-title { font-size: 2.4rem; }
  .hero-metrics { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .split { grid-template-columns: 1fr; }
  .hero-badges { justify-content: flex-start; }

  /* Cards centrais em páginas internas */
  .card-center{ padding: 22px 18px; }
}

@media (max-width: 768px) {
  /* Navbar vira menu Hambúrguer */
  .menu-toggle { display: block; }

  .navbar .nav-container{
    justify-content: center;
  }
  .navbar .logo-area{
    left: 0;
  }
  .navbar .menu-toggle{
    position: absolute;
    right: 0;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    background: var(--bg-header);
    flex-direction: column;
    padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px));
    border-bottom: 1px solid var(--border);
    max-height: calc(100vh - var(--nav-h));
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav-links.active { display: flex; }

  /* Seletor de idiomas (quando existir no HTML) */
  .custom-lang-selector { display: none; }
  .nav-links.active + .custom-lang-selector {
    display: flex;
    position: absolute;
    top: 14px;
    right: 60px;
  }

  /* Tipografia */
  .hero-content h1 { font-size: 2.2rem; }
  .section-header h2 { font-size: 1.8rem; }
  .steps-grid { grid-template-columns: 1fr; } /* celular */

  /* Modais: ocupa melhor o mobile */
  .modal{
    width: min(720px, 100%);
    border-radius: 16px;
  }

  .modal-actions{
    flex-wrap: wrap;
    gap: 10px;
  }
  .modal-actions .btn{
    width: 100%;
  }
}

@media (max-width: 600px) {
  /* Home */
  .home-hero { padding-top: 96px; }
  .hero-title { font-size: 2.05rem; }

  .btn-lg { width: 100%; justify-content:center; }
  .hero-cta { width: 100%; }
  .store-row a { width: 100%; justify-content:center; }

  .feature-grid { grid-template-columns: 1fr; }

  /* Oferta / Funil */
  .plan-grid { grid-template-columns: 1fr; }
  .funnel-head { flex-direction: column; padding-right: 0; }
  .offer-timer { width: 100%; }

  /* Modal */
  .modal { padding: 16px 14px; }
  .modal-title{ font-size: 1.15rem; }
  .modal-body{ font-size: .95rem; }

  /* Páginas internas */
  .center-wrap{ padding: 30px 0 50px; }
  .card-center{
    padding: 18px 14px;
    border-radius: 16px;
  }

  /* Contact */
  .contact-card { align-items: flex-start; }
  .contact-info{ min-width: 0; }
  .contact-actions{ width: 100%; }
  .contact-actions .btn{ flex: 1 1 140px; }

  /* Accordion (FAQ) */
  .acc-btn{ padding: 14px 12px; }
  .acc-panel{ padding: 0 12px 12px; }
}

/* Telas muito pequenas (ex.: 360px) */
@media (max-width: 380px){
  .hero-title{ font-size: 1.85rem; }
  .nav-brand{ font-size: 1rem; }
  .modal-close{ top: 10px; right: 10px; }
}

/* Landscape no mobile (evita modal estourar) */
@media (max-height: 520px){
  .modal{ max-height: calc(100vh - 60px); }
  .modal-overlay{ padding: 16px 12px; }
}