/* ============================================================
   PedeZapPro — LANDING MOBILE  (so vale em telas <= 768px)
   ------------------------------------------------------------
   ARQUIVO SEPARADO DE PROPOSITO. O desktop fica em landing.css e
   NUNCA e tocado aqui. Mexer no mobile nao quebra o desktop.

   Ajusta SOMENTE: tamanhos de fonte, espacamentos, cards e containers.
   Medidas baseadas no MERCADO LIVRE mobile (home), medidas reais:
     texto base 14px | secundario 12px | enfase 16px |
     titulos 18-24px (secao ~22px) | padding card/container 16px |
     gaps 8-12px | CTA com alvo de toque grande (largura total).
   Nenhum design/cor/layout foi copiado — so a MEDIDA.
   ============================================================ */
@media (max-width: 768px) {

  /* CONTAINER — gutter 16px (igual ML) */
  .container-xl { padding-left: 16px; padding-right: 16px; }

  /* LOGO na navbar */
  .pzp-brand img { height: 30px; }

  /* HERO */
  .pzp-hero { padding: 32px 0 24px; }
  .pzp-hero h1 { font-size: 1.6rem; line-height: 1.18; letter-spacing: -0.3px; margin-bottom: 12px; }  /* ~26px */
  .pzp-hero p.lead { font-size: 0.94rem; line-height: 1.5; margin-bottom: 16px; }                       /* ~15px */
  /* mascote: aparece no mobile (igual desktop), so menor e centralizado */
  .pzp-hero-mascote { max-width: 188px; margin: 6px auto 0; }

  /* SECOES */
  .pzp-section { padding: 32px 0; }
  .pzp-section h2 { font-size: 1.375rem; line-height: 1.25; margin-bottom: 8px; }   /* ~22px (ML) */
  .pzp-section .section-sub { font-size: 0.875rem; margin-bottom: 20px; }           /* 14px (ML) */

  /* BOTAO CTA — alvo de toque grande, largura total (padrao mobile) */
  .btn-cta { display: block; width: 100%; text-align: center; font-size: 1rem; padding: 13px 18px; border-radius: 12px; }
  .pzp-section .btn-outline-dark { display: block; width: 100%; }

  /* CARDS DE RECURSO */
  .feature-card { padding: 16px; border-radius: 12px; }            /* 16px (ML) */
  .feature-icon { width: 42px; height: 42px; font-size: 20px; margin-bottom: 10px; }
  .feature-card h3 { font-size: 1rem; margin-bottom: 4px; }        /* 16px */
  .feature-card p { font-size: 0.875rem; line-height: 1.45; }      /* 14px */

  /* CARDS DE PLANO */
  .plano-card { padding: 20px 16px; border-radius: 14px; }
  .plano-card.popular { transform: none; }                         /* nao estoura a largura */
  .plano-card h3 { font-size: 1.375rem; }                          /* 22px */
  .plano-preco { font-size: 1.6rem; margin: 8px 0 14px; }          /* ~26px */
  .plano-features { margin-bottom: 18px; }
  .plano-features li { font-size: 0.875rem; padding: 6px 0; }      /* 14px */

  /* FAQ */
  .faq-item summary { font-size: 0.875rem; padding: 12px 40px 12px 16px; }  /* 14px */
  .faq-item p { font-size: 0.875rem; padding: 0 16px 12px; }

  /* FOOTER */
  .pzp-footer { padding: 26px 0 16px; font-size: 0.8125rem; }      /* 13px */
}