/* ============================================================
   mobile.css — Infomek | Otimização mobile completa
   Adicione no header.php APÓS o style.css:
   <link rel="stylesheet" href="<?= CSS_URL ?>/mobile.css">
   ============================================================ */

/* Seletor de idioma só aparece dentro do menu mobile */
.nav-lang-mobile { display: none; }

/* ══════════════════════════════════════════════════════════
   TABLET — até 900px
══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* NAVBAR */
  .navbar {
    padding: 0 16px;
    height: 60px;
    gap: 12px;
  }
  .nav-logo img {
    height: 32px;
  }
  .logo-fallback {
    font-size: 17px;
  }
  /* Esconde botão CTA no tablet — aparece só no menu aberto */
  .nav-cta {
    display: none;
  }
  /* Menu hamburguer */
  .nav-toggle {
    display: flex;
    order: 3;
    margin-left: auto;
  }
  .nav-links {
    display: none;
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    flex-direction: column;
    padding: 24px 20px;
    gap: 0;
    z-index: 999;
    overflow-y: auto;
    box-shadow: 0 4px 32px rgba(0,0,0,0.12);
  }
  .nav-links.aberto {
    display: flex;
  }
  .nav-links li {
    border-bottom: 1px solid #F0F1F3;
  }
  .nav-links a {
    display: block;
    padding: 16px 4px;
    font-size: 16px;
    color: #1A1F2E;
    font-weight: 600;
  }

  /* Seletor de idioma dentro do menu mobile */
  .nav-links li.nav-lang-mobile {
    display: none;
    border-top: 1px solid #F0F1F3;
    margin-top: 12px;
    padding-top: 12px;
  }
  .nav-links li.nav-lang-mobile span {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-bottom: 8px;
  }
  .nav-links li.nav-lang-mobile a {
    display: inline-block;
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--cinza-borda);
    border-radius: var(--radius-sm);
    margin-right: 6px;
    margin-bottom: 6px;
  }
  .nav-links li.nav-lang-mobile a.ativo {
    background: var(--azul);
    color: #fff;
    border-color: var(--azul);
  }

  /* Botão WhatsApp dentro do menu mobile */
  .nav-links.aberto::after {
    content: '';
    display: block;
    height: 80px;
  }

  /* SLIDER */
  .slider-wrap { min-height: auto; }
  .slide {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px 20px 70px;
    gap: 0;
  }

  .slide-left { max-width: 100%; text-align: center; }
  .slide h1, .slide h2 {
    font-size: 28px;
    letter-spacing: -0.8px;
    margin-bottom: 14px;
  }
  .slide p {
    font-size: 14px;
    margin-bottom: 20px;
    max-width: 100%;
  }
  .slide-kicker { font-size: 10px; margin-bottom: 14px; }
  .slide-pills { margin-bottom: 24px; justify-content: center; }
  .slide-pill { font-size: 12px; padding: 6px 10px; }
  .slide-compare { max-width: 100%; margin: 0 auto 24px; }
  .slide-ctas {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  .slide-btn-primary {
    font-size: 13px;
    padding: 12px 20px;
    width: 100%;
    justify-content: center;
  }
  .slide-btn-ghost { justify-content: center; font-size: 13px; }
  .slide-arr { display: none; }

  /* PARCEIROS */
  .partners-strip {
    padding: 14px 16px;
    gap: 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .partners-strip::-webkit-scrollbar { display: none; }
  .partners-label { display: none; }
  .partners-logos { flex-wrap: nowrap; gap: 24px; }
  .partner-item { opacity: .55; flex-shrink: 0; }

  /* BARRA DIFERENCIAIS */
  .diff-bar-inner {
    flex-wrap: wrap;
    padding: 0;
  }
  .diff-bar-item {
    width: 50%;
    padding: 16px 20px;
    border-bottom: 1px solid #F0F1F3;
  }
  .diff-bar-sep { display: none; }
  .diff-bar-item strong { font-size: 12px; }
  .diff-bar-item span   { font-size: 11px; }

  /* SEÇÕES */
  .section { padding: 48px 20px; }
  .section-title { font-size: 26px; }
  .section-sub { font-size: 14px; margin-bottom: 32px; }

  /* GRID SERVIÇOS */
  .servicos-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .card-srv { padding: 20px; }
  .card-srv h3 { font-size: 14px; }
  .card-srv p  { font-size: 12px; }

  /* SOBRE */
  .sobre-grid { grid-template-columns: 1fr; gap: 32px; }
  .sobre-dir  { display: none; }

  /* WHATSAPP INTELIGENTE */
  .wa-inner { grid-template-columns: 1fr; gap: 28px; }
  .wa-options { grid-template-columns: 1fr 1fr; }

  /* BLOG */
  .blog-grid { grid-template-columns: 1fr; gap: 16px; }
  .blog-card-h {
    grid-template-columns: 1fr;
  }
  .blog-card-thumb { min-height: 140px; font-size: 44px; }
  .blog-card-body { padding: 18px 20px; }
  .blog-card-body h2 { font-size: 16px; }

  /* FOOTER */
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: start;
  }
  .footer-sobre { grid-column: span 2; margin-bottom: 8px; }

  /* CTA FINAL */
  .cta-final h2 { font-size: 22px; }
  .cta-btns { flex-direction: column; align-items: stretch; }
  .cta-btn-branco, .cta-btn-wa { text-align: center; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════
   MOBILE — até 600px
══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* NAVBAR — logo à esquerda, hamburguer à direita */
  .navbar {
    padding: 0 14px;
    height: 58px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
  }
  .nav-logo {
    grid-column: 1;
    justify-self: start;
  }
  .nav-logo img {
    height: 30px;
    max-width: 110px;
    object-fit: contain;
    object-position: left;
  }
  .nav-toggle {
    grid-column: 2;
    justify-self: end;
    margin: 0;
  }
  /* No mobile o WhatsApp da navbar some — o flutuante já cobre */
  .nav-cta { display: none; }

  /* Mostra seletor de idioma dentro do menu */
  .nav-links li.nav-lang-mobile { display: block; }

  /* SLIDER */
  .slider-wrap { min-height: auto; }
  .slide {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 64px 16px 60px;
    gap: 0;
  }
  .slide h1, .slide h2 { font-size: 24px; margin-bottom: 10px; letter-spacing: -0.5px; }
  .slide p { font-size: 13px; line-height: 1.6; margin-bottom: 14px; }
  .slide-kicker { font-size: 10px; margin-bottom: 12px; }
  .slide-pills, .slide-compare { display: none; }
  .slide-btn-primary { font-size: 13px; padding: 11px 18px; }

  .slide-ctrl { bottom: 18px; gap: 8px; }
  .slide-dot  { width: 7px; height: 7px; }
  .slide-dot.on { width: 22px; }

  /* PARCEIROS */
  .partner-item { opacity: .6; }
  .partner-name { display: none; } /* esconde labels em tela pequena */

  /* BARRA DIFERENCIAIS */
  .diff-bar-item { width: 100%; border-right: none; }
  .diff-bar-item:nth-child(odd) { border-right: none; }

  /* SEÇÕES */
  .section { padding: 40px 16px; }
  .section-tag   { font-size: 10px; }
  .section-title { font-size: 22px; }
  .section-sub   { font-size: 13px; margin-bottom: 24px; }

  /* GRID SERVIÇOS — 1 coluna */
  .servicos-grid { grid-template-columns: 1fr; gap: 12px; }
  .card-srv { padding: 18px; display: flex; gap: 14px; align-items: flex-start; }
  .srv-icon { margin-bottom: 0; flex-shrink: 0; }
  .srv-link { margin-top: 8px; }

  /* WHATSAPP WIDGET */
  .wa-widget { padding: 22px 18px; }
  .wa-options { grid-template-columns: 1fr; gap: 8px; }
  .wa-opt { padding: 12px 14px; font-size: 14px; min-height: 48px; }
  .wa-input { padding: 12px 14px; font-size: 16px; } /* 16px evita zoom no iOS */
  .btn-wa { padding: 14px; font-size: 15px; min-height: 52px; }

  /* FORMULÁRIO DE CONTATO */
  .contato-grid { grid-template-columns: 1fr; gap: 32px; }
  .form-row { grid-template-columns: 1fr; }
  .contato-form-wrap { padding: 22px 18px; }
  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: 16px; /* evita zoom automático no iOS */
    padding: 12px 14px;
    min-height: 48px;
  }
  .form-group textarea { min-height: 100px; }
  .btn-enviar { min-height: 52px; font-size: 15px; }

  /* INFO CARDS CONTATO */
  .info-cards { gap: 10px; }
  .info-card  { padding: 14px 16px; }

  /* BLOG LISTAGEM */
  .blog-filtros { gap: 8px; }
  .filtro-btn   { padding: 6px 14px; font-size: 12px; }
  .blog-card-h  { border-radius: 10px; }
  .blog-card-thumb { min-height: 120px; font-size: 36px; }
  .blog-card-body  { padding: 16px; }
  .blog-card-body h2 { font-size: 15px; }
  .blog-card-body p  { font-size: 13px; }
  .blog-meta { font-size: 11px; }

  /* ARTIGO */
  .artigo-grid { grid-template-columns: 1fr; }
  .artigo-sidebar { display: none; } /* sidebar vai pro fim em mobile */
  .artigo-hero { padding: 40px 16px 32px; }
  .artigo-hero h1 { font-size: 22px; }
  .artigo-content h2 { font-size: 19px; }
  .artigo-content h3 { font-size: 16px; }
  .artigo-content p  { font-size: 14px; line-height: 1.8; }
  .artigo-cta { padding: 24px 18px; }
  .artigo-cta h3 { font-size: 17px; }

  /* SERVIÇO */
  .srv-content-grid { grid-template-columns: 1fr; }
  .srv-sidebar { display: none; }
  .srv-hero { padding: 40px 16px 32px; }
  .srv-hero h1 { font-size: 24px; }
  .srv-beneficios { grid-template-columns: 1fr; }

  /* FOOTER */
  .site-footer { padding: 40px 16px 20px; }
  .footer-top  { grid-template-columns: 1fr; gap: 24px; }
  .footer-sobre { grid-column: span 1; }
  .footer-bottom {
    flex-direction: column;
    gap: 6px;
    text-align: center;
  }

  /* POLÍTICA DE PRIVACIDADE */
  .privacidade-wrap { grid-template-columns: 1fr; }
  .priv-nav { display: none; }
  .priv-table { font-size: 12px; display: block; overflow-x: auto; }

  /* PAGE HERO (contato, blog, serviços) */
  .page-hero { padding: 40px 16px; }
  .page-hero h1 { font-size: 24px; }
  .page-hero p  { font-size: 14px; }

  /* CTA FINAL */
  .cta-final { padding: 48px 16px; }
  .cta-final h2 { font-size: 20px; }
  .cta-final p  { font-size: 14px; }
  .cta-btn-branco,
  .cta-btn-wa { padding: 14px 20px; font-size: 14px; min-height: 52px; }
}

/* ══════════════════════════════════════════════════════════
   WHATSAPP FLUTUANTE — maior e mais visível em mobile
══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .wa-flutuante {
    width: 60px;
    height: 60px;
    bottom: 20px;
    right: 16px;
    box-shadow: 0 4px 24px rgba(37,211,102,0.55);
  }
  .wa-flutuante svg {
    width: 30px;
    height: 30px;
  }
  .wa-tooltip { display: none; } /* tooltip não funciona bem em touch */
}

/* ══════════════════════════════════════════════════════════
   BANNER DE COOKIES — compacto em mobile
══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .cookie-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 14px 16px;
    gap: 12px;
  }
  .cookie-banner p { font-size: 12px; line-height: 1.5; }
  .cookie-btns { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .btn-aceitar-cookie,
  .btn-recusar-cookie {
    padding: 10px;
    text-align: center;
    min-height: 44px;
    font-size: 13px;
  }
}

/* ══════════════════════════════════════════════════════════
   SWIPE NO SLIDER — feedback visual de toque
══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .slider-wrap {
    cursor: grab;
    -webkit-tap-highlight-color: transparent;
  }
  .slider-wrap:active { cursor: grabbing; }
}

/* ══════════════════════════════════════════════════════════
   MELHORIAS GERAIS DE TOQUE (iOS + Android)
══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Área de toque mínima de 44px em todos os botões e links */
  .nav-links a,
  .slide-btn,
  .slide-btn-primary,
  .slide-btn-ghost,
  .btn-wa,
  .btn-enviar,
  .nav-cta,
  .filtro-btn,
  .wa-opt,
  .info-card,
  .card-srv,
  .card-blog {
    -webkit-tap-highlight-color: transparent;
  }

  /* Remove hover em touch (evita estado "preso" no iOS) */
  .card-srv:hover,
  .card-blog:hover {
    transform: none;
  }

  /* Scroll suave */
  html { -webkit-overflow-scrolling: touch; }

  /* Imagens não transbordam */
  img { max-width: 100%; height: auto; }

  /* Inputs não fazem zoom no iOS (fonte mínima 16px) */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  select,
  textarea { font-size: 16px !important; }
}