/* ============================================================
   RESPONSIVE — itWorks
   ============================================================ */

/* ─── TABLET: <= 1024px ─── */
@media (max-width: 1024px) {
  :root {
    --section-padding-y: clamp(3rem, 6vw, 5rem);
  }

  /* Hero: una columna */
  .hero-container {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--space-12);
    padding-block: var(--space-16);
  }
  .hero-subheadline { max-width: 100%; }
  .hero-ctas { justify-content: center; }
  .hero-metrics { margin-inline: auto; }
  .hero-visual { height: 320px; }

  .hex-system { width: 280px; height: 280px; }
  .hex-ring-1 { width: 140px; height: 140px; margin: -70px 0 0 -70px; }
  .hex-ring-2 { width: 220px; height: 220px; margin: -110px 0 0 -110px; }
  .hex-ring-3 { width: 280px; height: 280px; margin: -140px 0 0 -140px; }
  .hex-core { width: 80px; height: 80px; }

  /* Servicios: 2 columnas */
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .service-card--featured {
    grid-column: span 2;
    flex-direction: column;
  }

  /* Why us: 2 columnas (sin cambio) */

  /* Proceso: 2x2 */
  .process-steps { grid-template-columns: repeat(2, 1fr); }
  .process-connector { display: none; }

  /* Contacto: una columna */
  .contact-container { grid-template-columns: 1fr; }

  /* Footer: 2 columnas */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .footer-brand { grid-column: span 2; }

  /* Navbar: mostrar hamburger */
  .navbar-nav, .navbar-cta { display: none; }
  .hamburger { display: flex; }

  /* Ocultar cursor */
  .cursor-dot, .cursor-ring { display: none; }
}

/* ─── MOBILE: <= 768px ─── */
@media (max-width: 768px) {
  .hero-visual { display: none; }

  .hero-metrics {
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    gap: var(--space-4);
  }
  .metric-divider { width: 80%; height: 1px; }

  /* Servicios: 1 columna */
  .services-grid { grid-template-columns: 1fr; }
  .service-card--featured { grid-column: span 1; }

  /* Why: 1 columna */
  .why-grid { grid-template-columns: 1fr; }

  /* Stats bar */
  .why-stats-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    padding: var(--space-8);
  }
  .stat-separator { display: none; }

  /* Proceso: 1 columna */
  .process-steps { grid-template-columns: 1fr; }

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

  /* Footer: 1 columna */
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: span 1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  /* Section titles */
  .section-title { font-size: var(--text-3xl); }
  .contact-info-title { font-size: var(--text-3xl); }
}

/* ─── MOBILE PEQUEÑO: <= 480px ─── */
@media (max-width: 480px) {
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .btn-xl { justify-content: center; }
  .hero-headline { font-size: var(--text-5xl); }
  .hero-metrics { padding: var(--space-4); }
  .contact-form-wrapper { padding: var(--space-6); }
  .section-header { margin-bottom: var(--space-10); }
}