/* ─── AgendaPsi Mobile Responsive ─── */
/* Ativa apenas em telas até 768px (celular e tablet pequeno) */

@media (max-width: 768px) {

  /* ── NAV ── */
  nav {
    padding: 0 16px !important;
    height: 56px !important;
  }
  .nav-links {
    display: none;
  }
  .nav-links.open {
    display: flex;
  }
  .nav-menu-btn {
    display: flex !important;
  }
  .nav-logo {
    font-size: 1.3rem !important;
  }
  .nav-cta {
    padding: 8px 14px !important;
    font-size: 13px !important;
  }

  /* ── HERO PRINCIPAL (index.html) ── */
  .hero-section {
    padding: 3rem 1.2rem 2.5rem !important;
  }
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
  .hero h1 {
    font-size: clamp(1.8rem, 7vw, 2.4rem) !important;
    letter-spacing: -1px !important;
  }
  .hero-desc {
    font-size: 15px !important;
  }
  .hero-btns {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .hero-btns a,
  .hero-btns button {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
  .hero-visual {
    order: -1;
  }

  /* ── HERO DAS CIDADES / BLOG ── */
  .hero {
    padding: 40px 16px !important;
  }
  .hero h1 {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
  }
  .hero p {
    font-size: 15px !important;
  }
  .hero-btns {
    flex-direction: column !important;
  }
  .btn-primary,
  .btn-secondary {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* ── SEÇÕES GERAIS ── */
  .section,
  .container,
  .article-body {
    padding: 32px 16px !important;
  }
  .section h2 {
    font-size: clamp(1.4rem, 5vw, 1.8rem) !important;
  }

  /* ── CARDS GRID ── */
  .cards {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ── FEATURES / FUNCIONALIDADES ── */
  .features-grid,
  .feat-grid,
  .steps-grid,
  .logos-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ── PLANOS ── */
  .plans-grid,
  .pricing-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ── DEPOIMENTOS ── */
  .testimonials-grid,
  .reviews-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── MÉTRICAS / STATS ── */
  .metrics-grid,
  .stats-grid,
  .card-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  /* ── TABELAS ── */
  .tabela-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  table {
    min-width: 520px;
    font-size: 13px !important;
  }
  th, td {
    padding: 10px 12px !important;
  }

  /* ── ARTIGO BLOG ── */
  .article-hero {
    padding: 36px 16px !important;
  }
  .article-hero h1 {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
  }
  .article-body h2 {
    font-size: 20px !important;
    margin-top: 36px !important;
  }
  .article-body p,
  .article-body li {
    font-size: 15px !important;
  }
  .numero-item {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 16px !important;
  }
  .cta-artigo {
    padding: 28px 16px !important;
  }
  .cta-artigo a {
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* ── CTA BANNERS ── */
  .cta,
  .cta-banner {
    padding: 28px 16px !important;
    border-radius: 14px !important;
  }
  .cta h2,
  .cta-banner h2 {
    font-size: 1.3rem !important;
  }
  .cta a,
  .cta-banner a {
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
    display: block !important;
  }

  /* ── FAQ ── */
  .faq-item,
  .faq details {
    padding: 14px !important;
  }

  /* ── MOCKUP DO HERO ── */
  .hero-mockup {
    margin: 0 !important;
  }

  /* ── INSTAGRAM BANNER ── */
  .insta-banner {
    font-size: 12px !important;
    padding: 8px 12px !important;
    gap: 6px !important;
  }

  /* ── FOOTER ── */
  footer {
    padding: 24px 16px !important;
    font-size: 12px !important;
  }

  /* ── TEXTO GERAL ── */
  body {
    font-size: 15px !important;
  }
  h1 { font-size: clamp(1.6rem, 6vw, 2.2rem) !important; }
  h2 { font-size: clamp(1.2rem, 5vw, 1.6rem) !important; }
  h3 { font-size: 1rem !important; }

  /* ── ESPAÇOS INTERNOS ── */
  .section-header {
    margin-bottom: 2rem !important;
  }
  .section-sub {
    font-size: 14px !important;
  }

  /* ── MAIS ARTIGOS ── */
  .mais-artigos a {
    font-size: 14px !important;
    padding: 12px 0 !important;
  }

  /* ── BLOG INDEX HERO ── */
  .hero-tag {
    font-size: 11px !important;
  }

}

/* Telas muito pequenas (até 380px — celulares antigos) */
@media (max-width: 380px) {
  .metrics-grid,
  .stats-grid,
  .card-grid {
    grid-template-columns: 1fr !important;
  }
  nav {
    height: 52px !important;
  }
}