/* ============================================================
   CÓDIGO IA — MOBILE STYLESHEET
   Corrige todos os problemas de experiência mobile
   Aplica-se em: todos os HTMLs via <link rel="stylesheet">
   ============================================================ */

/* ── 1. BASE: box-sizing e overflow global ────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; max-width: 100vw; }
img, video, iframe, embed, object { max-width: 100%; }

/* ── 2. NAVBAR / LOGO ─────────────────────────────────────── */
.navbar { height: auto; min-height: var(--nav-height, 70px); }
.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: var(--nav-height, 70px);
  gap: 12px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-shrink: 1;
}
.nav-logo img { flex-shrink: 0; }
.logo-textwrap {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  min-width: 0;
  overflow: hidden;
}
.logo-text {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.logo-tagline {
  font-size: 0.58rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-actions { flex-shrink: 0; display: flex; align-items: center; gap: 8px; }
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  width: 44px;
  height: 44px;
  cursor: pointer;
  flex-shrink: 0;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-secondary);
  border-radius: 2px;
  transition: all .3s;
}

/* ── 3. BOTÕES — altura mínima 48px (WCAG touch target) ─────── */
.btn-primary, .btn-ghost, .btn-cta,
.newsletter-btn, .btn-aff, .btn-aff-large,
.btn-biblioteca, .btn-submit, .widget-btn,
.modal-submit, .btn-download-direct,
button[type="submit"] {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
a.btn-cta, a.btn-primary, a.btn-ghost,
a.btn-biblioteca, a.btn-aff-large { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }

/* ── 4. INPUTS — altura mínima 48px ─────────────────────────── */
input[type="email"],
input[type="text"],
input[type="search"],
input[type="tel"],
input[type="password"],
textarea,
select,
.newsletter-input,
.modal-form input,
.form-input,
.widget-input,
.search-input { min-height: 48px; font-size: 16px !important; /* evita zoom iOS */ }

/* ── 5. HERO (home) ──────────────────────────────────────────── */
@media (max-width: 640px) {
  .hero { padding: calc(var(--nav-height, 70px) + 34px + 24px) 0 48px; }
  .hero-container { padding: 0 16px; text-align: center; }
  .hero-title { font-size: clamp(1.7rem, 7vw, 2.2rem) !important; line-height: 1.2; }
  .hero-subtitle { font-size: 0.95rem; }
  .hero-actions {
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }
  .hero-actions .btn-primary,
  .hero-actions .btn-ghost,
  .hero-ctas .btn-primary,
  .hero-ctas .btn-ghost {
    width: 100%;
    justify-content: center;
    padding: 15px 20px;
  }
  .hero-stats { flex-wrap: wrap; gap: 16px; justify-content: center; }
  .stat-divider { display: none; }
  .stat-num { font-size: 1.4rem !important; }
}

/* ── 6. NEWS TICKER ──────────────────────────────────────────── */
@media (max-width: 640px) {
  .news-ticker { display: none; } /* remove no mobile, libera espaço */
  .hero { padding-top: calc(var(--nav-height, 70px) + 24px) !important; }
  .article-main { padding-top: calc(var(--nav-height, 70px) + 24px) !important; }
}

/* ── 7. HAMBURGER + MENU MOBILE ─────────────────────────────── */
@media (max-width: 900px) {
  .hamburger { display: flex; }
  .btn-cta.nav-newsletter { display: none; } /* remove btn newsletter do nav mobile */
  .nav-links {
    display: none;
    flex-direction: column;
    position: fixed;
    top: var(--nav-height, 70px);
    left: 0; right: 0;
    background: rgba(6, 14, 28, 0.98);
    backdrop-filter: blur(20px);
    padding: 12px 16px 24px;
    border-bottom: 1px solid var(--border);
    gap: 2px;
    z-index: 999;
    max-height: calc(100vh - var(--nav-height, 70px));
    overflow-y: auto;
  }
  .nav-links.open { display: flex; }
  .nav-link {
    padding: 13px 16px;
    font-size: 1rem;
    border-radius: 10px;
    min-height: 48px;
    display: flex;
    align-items: center;
  }
}

/* ── 8. NEWSLETTER FORM — stack vertical mobile ──────────────── */
@media (max-width: 600px) {
  .newsletter-form,
  .newsletter-form-row {
    flex-direction: column !important;
    width: 100%;
  }
  .newsletter-form .newsletter-input,
  .newsletter-form-row .newsletter-input {
    width: 100%;
  }
  .newsletter-form .newsletter-btn,
  .newsletter-form-row .newsletter-btn {
    width: 100%;
    justify-content: center;
  }
  .newsletter-card { padding: 28px 16px; }
  .newsletter-card .newsletter-title { font-size: 1.3rem; }
}

/* ── 9. CTA BIBLIOTECA (hub-cta) ─────────────────────────────── */
@media (max-width: 640px) {
  .hub-cta { padding: 28px 20px 24px; margin: 32px 0; border-radius: 16px; }
  .hub-cta h3 { font-size: 1.25rem; }
  .hub-cta .cta-sub { font-size: 0.88rem; }
  .hub-cta .cta-features {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    text-align: left;
  }
  .hub-cta a.btn-biblioteca {
    width: 100%;
    justify-content: center;
    font-size: 0.95rem;
    padding: 16px 20px;
  }
  .hub-cta .cta-free-row {
    flex-direction: column;
    gap: 6px;
    text-align: center;
  }
  .hub-cta .cta-price-real { font-size: 1.6rem; }
}

/* ── 10. MID-CTA (bloco inline artigo) ──────────────────────── */
@media (max-width: 600px) {
  .mid-cta {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 18px;
    gap: 14px;
  }
  .mid-cta a {
    width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }
}

/* ── 11. ARTICLE LAYOUT ──────────────────────────────────────── */
@media (max-width: 900px) {
  .article-layout { grid-template-columns: 1fr; gap: 0; }
  .article-container { padding: 0 16px; }
  .article-sidebar { display: none; } /* sidebar some no mobile, conteúdo em foco */
  .article-content-main { max-width: 100%; }
}
@media (max-width: 640px) {
  .article-main-title { font-size: clamp(1.4rem, 5.5vw, 1.9rem) !important; }
  .article-lead { font-size: 1rem; }
  .article-byline { flex-wrap: wrap; gap: 8px; }
  .article-featured-img { height: 180px; border-radius: 10px; }
  .toc-wrap { padding: 16px; }
  .callout { padding: 14px 16px; font-size: 0.88rem; }
  .article-body h2, .article-content-main h2 { font-size: 1.25rem; margin: 28px 0 12px; }
  .article-body h3, .article-content-main h3 { font-size: 1.05rem; }
  .article-body p, .article-content-main p { font-size: 0.97rem; line-height: 1.75; }
  .related-grid { grid-template-columns: 1fr; gap: 12px; }
  .related-articles { padding: 16px; }
  .article-tags { gap: 6px; }
  .article-tags a { font-size: 0.72rem; padding: 4px 10px; }
}

/* ── 12. PROMPT EXAMPLES (prompts-juridicos) ─────────────────── */
@media (max-width: 640px) {
  .prompt-example { padding: 16px; }
  .prompt-example pre { font-size: 0.78rem; padding: 12px; }
  .prompt-example h4 { font-size: 0.95rem; }
}

/* ── 13. COMPARATIVO — tabelas mobile ────────────────────────── */
.comparison-table,
.article-body .comparison-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.comparison-table table { min-width: 340px; }
@media (max-width: 640px) {
  .comparison-table th,
  .comparison-table td { padding: 10px 12px; font-size: 0.78rem; }
}

/* ── 14. CARDS — grids ───────────────────────────────────────── */
@media (max-width: 768px) {
  .articles-grid-3 { grid-template-columns: 1fr; }
  .use-cases-grid { grid-template-columns: 1fr; }
  .prompts-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .tools-grid { grid-template-columns: 1fr; }
  .affiliate-grid { grid-template-columns: 1fr; }
  .categories-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
  .cat-card { padding: 12px 8px; }
  .cat-card span { font-size: 0.72rem; }
  .featured-card-hero { padding: 20px 16px; border-radius: 14px; }
  .featured-title-hero { font-size: 1.3rem; }
}

/* ── 15. RANKING ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  .ranking-table, .rank-table { overflow-x: auto; display: block; }
  .ranking-table table { min-width: 420px; }
  .tool-card { padding: 18px 16px; }
  .tool-header { gap: 10px; }
  .tool-logo { width: 40px; height: 40px; }
}

/* ── 16. BIBLIOTECA (biblioteca-prompts-profissionais) ───────── */
@media (max-width: 640px) {
  .library-hero, .bib-hero { padding: 32px 16px 28px; }
  .library-hero h1, .bib-hero h1 { font-size: clamp(1.5rem, 6vw, 2rem) !important; }
  .search-bar-wrap, .prompt-search { width: 100%; }
  .prompt-search input { width: 100%; }
  .filter-row { flex-wrap: wrap; gap: 6px; }
  .filter-btn { font-size: 0.8rem; padding: 7px 14px; min-height: 40px; }
  .prompt-card { padding: 18px 14px; }
  .copy-btn { min-height: 40px; }
}

/* ── 17. AUTOR ───────────────────────────────────────────────── */
@media (max-width: 640px) {
  .author-hero, .autor-hero { padding: 32px 16px 28px; }
  .author-avatar-xl { width: 72px !important; height: 72px !important; }
  .author-stats { flex-wrap: wrap; gap: 12px; }
  .author-grid { grid-template-columns: 1fr; }
}

/* ── 18. BOX DE AUTOR (inline artigo) ───────────────────────── */
@media (max-width: 640px) {
  .author-box, .author-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    gap: 12px;
  }
  .author-box img, .author-card img { width: 48px; height: 48px; }
}

/* ── 19. FOOTER ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  .footer, .footer-pro { padding: 40px 0 24px; }
  .footer-grid, .footer-pro-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .footer-bottom, .footer-bottom-bar {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }
  .footer-affiliate-note { text-align: center; max-width: 100%; }
  .container { padding: 0 16px; }
  .social-links, .footer-social { justify-content: center; }
}

/* ── 20. MATERIAIS GRATUITOS ─────────────────────────────────── */
@media (max-width: 640px) {
  .materiais-hero { padding: 48px 16px 32px; }
  .materiais-grid {
    grid-template-columns: 1fr !important;
    padding: 24px 16px 48px;
    gap: 20px;
  }
  .modal-box { padding: 24px 16px; border-radius: 16px; }
  .modal-form input { min-height: 48px; font-size: 16px !important; }
  .modal-submit { min-height: 52px; font-size: 1rem; }
}

/* ── 21. NEWSLETTER PAGE ─────────────────────────────────────── */
@media (max-width: 640px) {
  .newsletter-premium, .nl-hero { padding: 40px 16px 32px; }
  .nl-form { flex-direction: column; }
  .nl-form input, .nl-form button { width: 100%; }
}

/* ── 22. METODOLOGIA ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .metodo-grid, .methodology-grid { grid-template-columns: 1fr; }
  .metodo-card, .methodology-card { padding: 18px 14px; }
}

/* ── 23. SEÇÃO HOME: "COMECE POR AQUI" (numbered items) ─────── */
@media (max-width: 640px) {
  .start-list, .start-here { flex-direction: column; }
  .start-item { width: 100%; }
}

/* ── 24. LEGIBILIDADE GERAL mobile ───────────────────────────── */
@media (max-width: 640px) {
  body { font-size: 15px; }
  .section-title { font-size: 1.3rem !important; }
  .section-label { font-size: 0.65rem; }
  /* padding das sections */
  :root { --section-pad: 40px; }
  .container { padding: 0 16px; }
  /* cards genéricos */
  .article-card, .article-card-v2, .tool-card, .aff-card {
    border-radius: 12px;
  }
  /* affiliate inline */
  .article-aff-inline {
    flex-direction: column;
    align-items: flex-start;
  }
  .btn-aff-sm {
    width: 100%;
    text-align: center;
    justify-content: center;
    min-height: 48px;
  }
  /* scroll-top btn */
  .scroll-top { bottom: 16px; right: 16px; }
}

/* ── 25. FORM INPUTS — prevenir zoom iOS (font-size 16px) ────── */
@media (max-width: 768px) {
  input, select, textarea { font-size: 16px !important; }
}

/* ── 26. SAFE AREA (notch, home indicator) ───────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .navbar { padding-top: env(safe-area-inset-top); }
  body { padding-bottom: env(safe-area-inset-bottom); }
}