/* ============================================================
   VaGOu! — Responsividade (mobile-first; breakpoints ascendentes)
   Validado para: 320, 360, 375, 390, 414, 480, 768, 1024,
   1280, 1366, 1440, 1600, 1920.
   ============================================================ */

/* ---------- ≥ 480px ---------- */
@media (min-width: 30rem) {
  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .benefits {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- ≥ 768px ---------- */
@media (min-width: 48rem) {
  .feature-panel {
    grid-template-columns: 1fr 1fr;
  }

  .split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7);
    align-items: center;
  }

  .split--reverse > :first-child { order: 2; }

  .how-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .benefits {
    grid-template-columns: repeat(4, 1fr);
  }

  .testimonials {
    grid-template-columns: repeat(2, 1fr);
  }

  .compare-row,
  .compare-row--head {
    grid-template-columns: 1fr 1.4fr 1.4fr;
    align-items: center;
  }

  .hero__title { font-size: var(--text-3xl); }
}

/* ---------- ≥ 1024px: navegação desktop ---------- */
@media (min-width: 64rem) {
  .nav-toggle { display: none; }

  .site-nav {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-5);
    padding: 0;
    background: none;
    overflow: visible;
    flex: 1;
    justify-content: space-between;
    margin-left: var(--space-6);
    inset: auto;
  }

  .site-nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-1);
  }

  .site-nav__link {
    width: auto;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-base);
  }

  .site-nav__actions {
    flex-direction: row;
    align-items: center;
  }

  .pricing-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1000px;
    margin: 0 auto;
  }

  .testimonials {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------- Telas muito estreitas (≤ 359px) ---------- */
@media (max-width: 22.4375rem) {
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
}