/* =============================================
   RESPONSIVE — Mobile-first breakpoints
   ============================================= */

/* ── Tablet (≤ 1024px) ── */
@media (max-width: 1024px) {
  :root {
    --section-px: 40px;
    --section-py: 80px;
  }

  .servicios__grid { grid-template-columns: repeat(2, 1fr); }
  .nosotros__grid  { grid-template-columns: 1fr; gap: var(--space-9); }
  .apps__grid      { grid-template-columns: 1fr; }
  .contacto__grid  { grid-template-columns: 1fr; gap: var(--space-7); }

  .nosotros__visual { height: 360px; }

  .footer__top {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7);
  }
}

/* ── Móvil grande (≤ 768px) ── */
@media (max-width: 768px) {
  :root {
    --section-px: 24px;
    --section-py: 64px;
  }

  /* Navbar */
  .navbar__links  { display: none; }
  .navbar__hamburger { display: flex; }

  /* Hero */
  .hero__counter  { display: none; }
  .hero__arrows   { right: var(--section-px); }
  .hero__dots     { left: var(--section-px); }
  .hero__content  { padding: 0 var(--section-px); }

  /* Parallax */
  .parallax__bg { background-attachment: scroll; }

  /* Stats */
  .stats { gap: var(--space-6); }
  .stats__num { font-size: 2.8rem; }

  /* Servicios */
  .servicios__header { flex-direction: column; }
  .servicios__grid   { grid-template-columns: 1fr; }

  /* Clientes */
  .clientes__grid { grid-template-columns: repeat(2, 1fr); }

  /* Nosotros */
  .nosotros__visual  { height: 280px; }
  .visual-badge      { left: 0; bottom: 60px; }

  /* Proceso */
  .proceso__steps { flex-direction: column; gap: var(--space-6); }
  .proceso__line  { display: none; }

  /* Formulario */
  .form-row { grid-template-columns: 1fr; }

  /* Footer */
  .footer__top {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .footer__bottom { flex-direction: column; text-align: center; }
}

/* ── Móvil chico (≤ 480px) ── */
@media (max-width: 480px) {
  :root { --section-px: 18px; }

  .clientes__grid { grid-template-columns: 1fr; }
  .phone { width: 220px; height: 440px; }

  .navbar { padding: 14px var(--section-px); }

  .hero__arrows { gap: 6px; }
  .hero__arrow  { width: 40px; height: 40px; }

  .wa-float { bottom: 20px; right: 20px; }

  .footer__top { padding: var(--space-7) var(--section-px); }
}