/* ============================================================
   RED FIRE — Responsive Styles
   ============================================================ */

/* Extra large */
@media (max-width: 1400px) {
  .container { max-width: 1140px; }
}

@media (max-width: 1200px) {
  .container { max-width: 960px; }
  .np-wrapper-sobre { gap: 40px; }
  .mapa-brasil { flex: 0 0 280px; max-width: 280px; }
  .banner-content h1 { font-size: 38px; }
}

/* Large (tablets landscape) */
@media (max-width: 992px) {
  .container { max-width: 720px; }

  /* Hide desktop nav, show mobile */
  .desktop-nav { display: none !important; }
  .mobile-responsive-nav { display: block !important; }

  /* Sobre */
  .np-wrapper-sobre { flex-direction: column; gap: 32px; }
  .mapa-brasil { flex: none; max-width: 240px; margin: 0 auto; }

  /* Solucoes */
  .np-grid { flex-direction: column; gap: 20px; }
  .np-centro { order: -1; }
  .np-col { gap: 14px; }
  .np-drone { max-width: 140px; }

  /* Counters */
  .single-counter-item {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    padding: 20px 16px;
  }
  .single-counter-item:last-child { border-bottom: none; }

  /* Footer columns */
  .first-footer .row > div { margin-bottom: 32px; }
  .second-footer .col-lg-3 { width: 50% !important; margin-bottom: 32px; }
  .footer-nav-menu { justify-content: flex-start; margin-top: 8px; }

  /* Products */
  .col-lg-8, .col-lg-4 { width: 100% !important; }
  .categoriasp-pro { margin-top: 32px; }

  /* Page sections */
  .np-solucoes { padding: 56px 0; }
  .np-sobre { padding: 56px 0; }
  .testimonials-area { padding: 56px 0; }
  .counter-area { padding: 48px 0; }
}

/* Medium (tablets portrait) */
@media (max-width: 768px) {
  .container { max-width: 100%; padding: 0 20px; }

  /* Hero */
  .category-slide .single-category-item { min-height: 380px; }
  .banner-content h1 { font-size: 24px; line-height: 1.2; }
  .banner-content .slide__subtitle { font-size: 14px; margin-bottom: 20px; }
  .banner-area { padding: 40px 0; }
  .banner-area .col-md-6:last-child { display: none; }
  .comprars { padding: 11px 22px; font-size: 13px; }

  /* Destaques */
  .np-wrapper { padding: 0 16px; }
  .np-item { min-width: 50%; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .np-item:last-child { border-bottom: none; }

  /* Section titles */
  .section-title { margin-bottom: 32px; }
  .section-title h2 { font-size: 22px; }

  /* Counters */
  .single-counter-item h2 { font-size: 32px; }
  .single-counter-item h2 .target { font-size: 22px; }

  /* Footer */
  .second-footer .col-lg-3 { width: 100% !important; }
  .bottom-footer-text .col-sm-6 { width: 100% !important; }
  .bottom-footer-text .text-end { text-align: left !important; margin-top: 8px; }

  /* Inner pages */
  .page-title-area .container-fluid { padding: 28px 20px; }
  .page-title-content h1 { font-size: 22px; }

  /* Blog grid */
  .col-xl-3.col-md-6 { width: 50% !important; }

  /* Produto detail */
  .col-lg-7, .col-lg-5 { width: 100% !important; }

  /* FAQ */
  .accordion-title { font-size: 13.5px; padding: 14px 16px; }

  /* Error page */
  .error-content h1 { font-size: 72px; }
}

/* Small (mobile) */
@media (max-width: 576px) {
  .container { padding: 0 16px; }

  /* Hero */
  .category-slide .single-category-item { min-height: 320px; }
  .banner-content .tit1 { font-size: 10px; letter-spacing: 1.5px; }
  .banner-content h1 { font-size: 22px; }

  /* Destaques */
  .np-item { min-width: 100%; }

  /* CTA buttons */
  .np-botao, .default-btn, .comprars { padding: 11px 20px; font-size: 13px; }

  /* Products carousel */
  .category-slide2 { flex-direction: column; }

  /* Blog */
  .col-xl-3.col-md-6 { width: 100% !important; }

  /* Videos */
  .col-md-3.col-sm-6 { width: 100% !important; }

  /* Footer */
  .orcamento_s span { display: none; }
  .first-footer { padding: 40px 0; }
  .second-footer { padding: 40px 0 0; }

  /* Page title */
  .page-title-area { min-height: 140px; }
  .page-title-content h1 { font-size: 20px; margin-bottom: 8px; }

  /* Counters */
  .col-lg-3.col-sm-6 { width: 50% !important; }

  /* Gallery */
  .col-xl-4.col-md-6 { width: 100% !important; }

  /* Error */
  .error-content h1 { font-size: 56px; }
  .error-content h3 { font-size: 18px; }
}

/* Extra small */
@media (max-width: 400px) {
  .banner-content h1 { font-size: 20px; }
  .np-titulo h2 { font-size: 20px; }
  .col-lg-3.col-sm-6 { width: 100% !important; }
  .single-counter-item h2 { font-size: 28px; }
}

/* ============================================================
   MUNDI — Header Mobile
   ============================================================ */

@media (max-width: 992px) {

  /* ─────────────────────────────────────────────────────────
     ESTRATÉGIA:
     - .mobile-responsive-nav permanece visível como barra base
     - .mean-bar (gerada pelo meanmenu) fica transparente/zerada
       e apenas serve de âncora para o .meanmenu-reveal
     - O .meanmenu-reveal é posicionado DENTRO do .mobile-responsive-nav
       usando position:absolute + right
  ───────────────────────────────────────────────────────── */

  /* 1. Barra base: fundo branco, borda azul, altura fixa */
  .mobile-responsive-nav {
    display: block !important;
    background: #fff !important;
    border-top: 3px solid #001157 !important;
    border-bottom: 1px solid #e0e4ef !important;
    width: 100% !important;
    position: relative !important;
    z-index: 999 !important;
  }

  .mobile-responsive-nav .container {
    padding: 0 16px !important;
  }

  /* 2. Flex: logo 30% esquerda, espaço para hamburguer 70% direita */
  .mobile-responsive-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 68px !important;
    padding: 0 !important;
    position: relative !important;
  }

  /* 3. Logo: 30% à esquerda */
  .mobile-responsive-menu .logo {
    width: 30% !important;
    display: flex !important;
    align-items: center !important;
    position: absolute;
  }

  .mobile-responsive-menu .logo img {
    height: 52px !important;
    width: auto !important;
    display: block !important;
    filter: none !important;
    background: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  /* 4. mean-bar gerada pelo meanmenu: invisível, sem altura,
        apenas serve de container para o meanmenu-reveal        */
  .mean-container .mean-bar {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: 0 !important;
    overflow: visible !important;
    position: static !important;
  }

  /* 5. Hamburguer: posicionado dentro do .mobile-responsive-nav
        usando posição absoluta relativa ao .mobile-responsive-menu */
  .mean-container a.meanmenu-reveal {
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    background: #001157 !important;
    border: none !important;
    border-radius: 8px !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    z-index: 1000 !important;
  }

  /* Ícone hamburguer: 3 linhas brancas */
  .mean-container a.meanmenu-reveal span {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #fff !important;
    width: 22px !important;
    height: 2px !important;
    border-radius: 2px !important;
    display: block !important;
    text-indent: 0 !important;
  }

  .mean-container a.meanmenu-reveal span:nth-child(1) { top: 7px !important; }
  .mean-container a.meanmenu-reveal span:nth-child(2) { top: 21px !important; }
  .mean-container a.meanmenu-reveal span:nth-child(3) { top: 29px !important; }

  /* ── Drawer ── */
  .mean-container .mean-nav {
    background: #fff !important;
    margin-top: 0 !important;
    box-shadow: 0 8px 24px rgba(0,17,87,0.10) !important;
  }

  /* ── Itens principais ── */
  .mean-container .mean-nav ul li a {
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #001157 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    border-top: 1px solid #e8eaf2 !important;
    padding: 15px 20px !important;
    background: #fff !important;
    transition: background 0.15s, padding-left 0.15s !important;
  }

  .mean-container .mean-nav ul li a:hover {
    background: #f0f3ff !important;
    padding-left: 28px !important;
  }

  /* ── Sub-itens ── */
  .mean-container .mean-nav ul li li a {
    font-size: 12px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    color: #444 !important;
    padding: 12px 20px 12px 32px !important;
    background: #f7f8fc !important;
  }

  .mean-container .mean-nav ul li li a:hover {
    background: #eceffe !important;
    color: #001157 !important;
    padding-left: 40px !important;
  }

  /* ── Botão +/- expandir submenu ── */
  .mean-container .mean-nav ul li a.mean-expand {
    background: #f0f3ff !important;
    border-left: 1px solid #e0e4ef !important;
    color: #001157 !important;
    font-size: 22px !important;
    font-weight: 300 !important;
    padding: 0 !important;
    width: 48px !important;
    text-align: center !important;
    line-height: 48px !important;
  }

  .mean-container .mean-nav ul li a.mean-expand:hover {
    background: #dde2f8 !important;
  }

  /* ── Ocultar others-options no drawer ── */
  .mean-container .mean-nav .others-options,
  .mean-container .mean-nav ul li.midias-s,
  .mean-menu .others-options {
    display: none !important;
  }
}