/* ═══════════════════════════════════════════════════════════════════
   90's Studios — Responsive CSS
   Mobile-first breakpoints replicando la app React
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1024px: tablet landscape ───────────────────────────────────── */
@media (max-width: 1024px) {
  /* Pricing: 2 cols */
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Footer: 2 cols */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── 768px: tablet portrait ─────────────────────────────────────── */
@media (max-width: 768px) {
  /* Navbar */
  .nav-links { display: none; }
  .nav-hamburger { display: block; }

  /* Hero */
  .hero-section { padding-top: 6rem; padding-bottom: 4rem; }
  .hero-title { font-size: clamp(3rem, 14vw, 5rem); }
  .hero-kicker { font-size: 0.65rem; letter-spacing: 0.12em; }
  .hero-actions { flex-direction: column; align-items: stretch; max-width: 20rem; margin-inline: auto; }
  .hero-actions .btn { justify-content: center; }
  .hero-stats { gap: 1rem; }
  .stat-divider { display: none; }

  /* App tiles: 3 cols */
  .tiles-grid { grid-template-columns: repeat(3, 1fr); }

  /* Apps: 2 cols */
  .apps-grid { grid-template-columns: repeat(2, 1fr); }

  /* Testimonial */
  .testimonial-quote { font-size: clamp(1.5rem, 5vw, 2rem); }

  /* Pricing: 1 col */
  .pricing-grid { grid-template-columns: 1fr; max-width: 26rem; margin-inline: auto; }

  /* CTA */
  .cta-title { font-size: clamp(2.5rem, 10vw, 4rem); }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ── 480px: mobile ──────────────────────────────────────────────── */
@media (max-width: 480px) {
  .container { padding-inline: 1rem; }

  /* Hero */
  .hero-title { font-size: clamp(2.75rem, 16vw, 4rem); }
  .hero-desc  { font-size: 0.95rem; }

  /* App tiles: 2 cols */
  .tiles-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .apps-tiles { padding: 1rem; }

  /* Apps: 1 col */
  .apps-grid { grid-template-columns: 1fr; }

  /* Pricing */
  .pricing-grid { max-width: 100%; }
  .plan-price { font-size: 2.5rem; }

  /* CTA */
  .btn-xl { padding: 1rem 2rem; font-size: 1.1rem; }
  .cta-title { font-size: clamp(2rem, 12vw, 3rem); }
}

/* ── 360px: small phones ────────────────────────────────────────── */
@media (max-width: 360px) {
  .hero-title { font-size: 2.5rem; }
  .hero-kicker { font-size: 0.6rem; padding: 0.25rem 0.75rem; }
  .tiles-grid { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
  .tile-name { display: none; }
  .tile-emoji { font-size: 1.5rem; }
}

/* ── Touch: disable hover effects ───────────────────────────────── */
@media (hover: none) {
  .tile:hover { opacity: 0.8; transform: none; }
  .app-card:hover { border-color: var(--border); box-shadow: none; }
  .app-card:hover .app-icon-wrap { transform: none; }
  .btn-primary:hover { transform: none; }
  .plan-card:hover { transform: none; }
}