/* =====================================================
   RESPONSIVE
   ===================================================== */

/* --- Desktop grande (≥1440px) --- */
@media (min-width: 1440px) {
  body { font-size: 19px; }
  section { padding: 140px 0; }
}

/* --- Tablet y desktop pequeño (≤960px) --- */
@media (max-width: 960px) {
  .proposal-bar { flex-direction: column; gap: 10px; padding: 10px; }
  .proposal-bar .nav-pages { flex-wrap: wrap; justify-content: center; }
  .main-nav { gap: 18px; font-size: 13px; }
  .main-nav .header-cta { padding: 8px 14px; font-size: 12px; }

  .problem-block .wrap,
  .about-preview .wrap,
  .about-story-grid,
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .services-grid,
  .testimonial-grid,
  .how-grid,
  .about-meta-grid,
  .compare-grid,
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .svc-row {
    grid-template-columns: 60px 1fr;
    gap: 16px;
  }
  .svc-row .desc, .svc-row .action { grid-column: 1 / -1; }

  section { padding: 80px 0; }
  .home-hero, .about-hero, .services-hero, .contact-hero { padding-top: 100px; }
  .about-story .col-title h2 { position: static; font-size: 32px; }

  .anticaos-placeholder::before { font-size: 100px; }
}

/* --- Tablet (≤768px) --- */
@media (max-width: 768px) {
  .wrap, .wrap-narrow { padding: 0 20px; }

  .main-nav a:not(.header-cta) { display: none; }

  section { padding: 72px 0; }
  .home-hero, .about-hero, .services-hero, .contact-hero { padding-top: 110px; }

  .about-hero .wrap { grid-template-columns: 1fr; }
  .about-image { aspect-ratio: 4/3; }

  .home-hero .lead { font-size: 18px; }
}

/* --- Móvil (≤480px) --- */
@media (max-width: 480px) {
  body { font-size: 16px; }
  .wrap, .wrap-narrow { padding: 0 16px; }

  .proposal-bar .label { display: none; }

  section { padding: 56px 0; }
  .home-hero, .about-hero, .services-hero, .contact-hero { padding-top: 90px; }

  .home-hero .lead { font-size: 17px; }
  .home-hero .actions { flex-direction: column; }

  .btn { padding: 14px 28px; font-size: 14px; width: 100%; text-align: center; }
  .btn-ghost { width: 100%; }

  .about-image { height: 45vh; min-height: 280px; }

  .anticaos-placeholder::before { font-size: 72px; }
}