/* ═══════════════════════════════════════════════════════════
   Responsive — breakpoints consolidados
   968px → pricing-grid apila (forzado por densidad del card)
   768px → hero apila, nav reducido, footer-top 1col
   640px → steps-grid y platforms-grid → 1 columna
   480px → footer-columns → 1 columna
   ═══════════════════════════════════════════════════════════ */

/* ───────── 968px ───────── */
@media (max-width: 968px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    max-width: 480px;
  }
  .pricing-card.featured { order: -1; }
}

/* ───────── 768px ───────── */
@media (max-width: 768px) {
  /* Nav */
  nav { padding: 1rem 1.5rem; }
  .nav-links { gap: 1rem; }
  .nav-links a:not(.btn-nav) { display: none; }

  /* Hero apila */
  .hero {
    grid-template-columns: 1fr;
    padding: 7rem 1.5rem 3rem;
    text-align: center;
  }
  .hero-text { order: 2; }
  .globe-wrap { order: 1; max-width: 440px; }
  .hero p { margin-left: auto; margin-right: auto; }
  .cta-group { justify-content: center; }
  .trust-row { justify-content: center; flex-wrap: wrap; }

  /* Pricing padding */
  .pricing-section { padding: 1rem 1.5rem 4rem; }

  /* Footer */
  .site-footer { margin-top: 3rem; }
  .footer-container { padding: 2.5rem 1.5rem 0; }
  .footer-top {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .footer-columns {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 0 1.5rem;
  }
}

/* ───────── 640px ───────── */
@media (max-width: 640px) {
  /* Cómo funciona */
  .how-it-works { padding: 5rem 1.5rem 4rem; }
  .section-header { margin-bottom: 3rem; }
  .steps-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .steps-connector { display: none; }

  /* Apps */
  .apps-section { padding: 1rem 1.5rem 4rem; }
  .platforms-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
}

/* ───────── 480px ───────── */
@media (max-width: 480px) {
  .footer-columns { grid-template-columns: 1fr; }
}