/* ================================================================
   MOBILE — Synatri CRM landing
   Complementa os breakpoints existentes (960px, 900px, 760px).
   Foco em telas ≤640px (smartphones em geral) e ≤390px (iPhone SE,
   13 mini, etc.).
   ================================================================ */

/* ── ≤ 640px  — smartphone landscape / pequenos tablets ──────── */
@media (max-width: 640px) {

  /* Container */
  .container { padding: 0 1.25rem; }

  /* Sections — reduz espaçamento vertical drasticamente */
  section { padding: 70px 0; }
  .section-header { margin-bottom: 3rem; }
  .section-header h2 { font-size: clamp(1.7rem, 6.5vw, 2.2rem); }

  /* ── Nav ───────────────────────────────────────────────────── */
  nav.topnav { padding: 0.8rem 0; }

  /* Esconde o botão CTA grande — hero já tem o botão principal */
  .nav-cta { display: none !important; }

  /* Exibe um "Entrar" compacto no lugar */
  .nav-link-login {
    display: inline-flex !important;
    align-items: center;
    padding: 0.55rem 1.1rem;
    border: 1px solid rgba(168, 122, 232, 0.3);
    border-radius: 8px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
    min-height: 40px;
  }

  /* ── Hero ──────────────────────────────────────────────────── */
  /* nav mobile ≈ 62px de altura → 110px garante ~48px de respiro */
  .hero { padding: 110px 0 52px; min-height: 0; }
  .hero-inner { gap: 2rem; }
  .hero-sub { font-size: 1.05rem; max-width: 100%; }

  /* Botões do hero empilhados e largura total */
  .hero-cta-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    margin-bottom: 2rem;
  }
  .hero-cta-row .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    min-height: 52px;
  }

  /* Stats: gap menor — cabe numa linha */
  .hero-meta { gap: 1.25rem; padding-top: 1.5rem; max-width: 100%; }
  .hero-meta-item .num { font-size: 1.6rem; }
  .hero-meta-item .lbl { font-size: 0.72rem; }

  /* Mock: altura menor para não ocupar metade da tela */
  .mock-window { border-radius: 12px; }
  .mock-app { max-height: 380px; }
  .mock-main { padding: 1rem; overflow: hidden; }

  /* ── Features bento → coluna única ────────────────────────── */
  .features-bento {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  .feature-card.size-big,
  .feature-card.size-med,
  .feature-card.size-sm { grid-column: span 1; }
  .feature-card { padding: 1.5rem; min-height: 0; }
  .feature-card:hover { transform: none; } /* remove hover lift (não faz sentido em touch) */

  /* ── How it works → coluna única ──────────────────────────── */
  .how-grid { grid-template-columns: 1fr; }
  .how-step { padding: 1.5rem 1.2rem; }
  .how-num { font-size: 2.5rem; }

  /* ── Compare: scroll horizontal em vez de quebrar o layout ── */
  .compare-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .compare-head,
  .compare-row {
    /* reverte o colapso do 900px — mantém 3 cols e deixa rolar */
    grid-template-columns: 1.2fr 2fr 2fr !important;
    min-width: 520px;
  }
  .compare-col-old,
  .compare-col-new { display: flex !important; }
  .compare-head, .compare-row { padding: 0.9rem 1.2rem; }

  /* ── Integrations → 2 colunas ─────────────────────────────── */
  .integrations-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }

  /* ── FAQ ───────────────────────────────────────────────────── */
  .faq-q { padding: 1rem 1.2rem; font-size: 0.97rem; }
  .faq-a { padding: 0 1.2rem 1rem; }

  /* ── Final CTA ─────────────────────────────────────────────── */
  .final-cta { padding: 80px 0; }
  .final-cta h2 { font-size: clamp(1.9rem, 7vw, 2.8rem); }
  .final-cta p { font-size: 1.05rem; }

  /* Waitlist: empilha input + botão verticalmente */
  .waitlist {
    flex-direction: column;
    padding: 0.5rem;
    gap: 0.5rem;
  }
  .waitlist input {
    padding: 1rem 1rem;
    min-height: 48px;
  }
  .waitlist button {
    width: 100%;
    justify-content: center;
    padding: 1rem;
    border-radius: 8px;
    min-height: 48px;
  }

  /* ── Footer ────────────────────────────────────────────────── */
  footer { padding-top: 3.5rem; }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
}

/* ── ≤ 480px  — portrait smartphone ─────────────────────────── */
@media (max-width: 480px) {

  .container { padding: 0 1rem; }

  /* Hero: mais compacto mas mantém folga do nav */
  .hero { padding: 100px 0 44px; }
  .hero h1 { font-size: clamp(2rem, 9.5vw, 3rem); }

  /* Stats em 3 colunas compactas */
  .hero-meta { justify-content: space-between; }

  /* Product mock: altura reduzida e kanban vira 1 coluna em telas bem estreitas */
  .mock-app { max-height: 340px; }

  /* Compare volta para 1 coluna (padrão 900px) — redefine o !important acima */
  .compare-head,
  .compare-row {
    grid-template-columns: 1fr !important;
    min-width: unset !important;
    gap: 0.3rem;
  }
  .compare-col-old,
  .compare-col-new { display: none !important; }

  /* Integrations: 2 colunas já cobrem */

  /* Kanban 1 col em telas muito estreitas */
  .kanban { grid-template-columns: 1fr; }
  .kanban-col { min-height: 0; }
}

/* ── ≤ 390px  — iPhone SE / 13 mini / telas pequenas ────────── */
@media (max-width: 390px) {

  .container { padding: 0 0.875rem; }

  /* Brand: esconde badge "CRM" para caber na nav */
  .brand-sub { display: none; }

  /* Hero: reduz só o bottom, topo mantém respiro do nav */
  .hero { padding: 96px 0 36px; }

  /* Integrations: 1 coluna */
  .integrations-grid { grid-template-columns: 1fr; }

  /* Feature cards sem padding excessivo */
  .feature-card { padding: 1.2rem; }

  /* Seções com menos padding */
  section { padding: 56px 0; }
}