html, body { overflow-x: hidden; max-width: 100vw; }
img, video { max-width: 100%; height: auto; }

@media (max-width: 860px) {
  /* Navegación */
  nav { padding: 12px 20px !important; }

  /* Secciones — reducir padding (el hero queda full-bleed) */
  section { padding: 56px 20px !important; }
  #hero { padding: 0 !important; }
  .inner { padding-left: 20px !important; padding-right: 20px !important; }

  /* Hero — encaja el titular grande en pantallas estrechas */
  .hv1-magic { font-size: clamp(54px, 17vw, 110px) !important; line-height: .9 !important; }
  .hv1-pre, .hv1-post { font-size: clamp(22px, 6vw, 34px) !important; }

  /* Tipografía */
  h1[style*="font-size"], .h1 { font-size: clamp(36px, 10vw, 56px) !important; line-height: 1.05 !important; }
  h2[style*="font-size"], .h2 { font-size: clamp(28px, 7vw, 42px) !important; }
  .lead { font-size: 16px !important; }

  /* Grids → columna única */
  .why-grid, .pkg-grid, .ac-grid, .cl-grid,
  .contact-grid, .about-wrap,
  .hv2-inner, .hv3-inner { grid-template-columns: 1fr !important; gap: 32px !important; }

  /* Hero variantes */
  .hv2-ring { width: 260px !important; height: 260px !important; margin: 0 auto; }
  .about-circle { width: 240px !important; height: 240px !important; }
  .about-photo-zone { display: flex; justify-content: center; }

  /* Sticky panel */
  div[style*="position: sticky"], div[style*="position:sticky"] { position: static !important; }

  /* Logos clientes — una columna en móvil (las tarjetas son altas) */
  .cl-grid { grid-template-columns: 1fr !important; gap: 22px !important; }

  /* Portfolio */
  .rb-panel.on { grid-template-columns: 1fr !important; }
  .rb-top { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }

  /* Formulario */
  .frow { grid-template-columns: 1fr !important; }
  .fi { flex-direction: column !important; gap: 16px !important; text-align: center; }
  .flinks { flex-direction: column !important; gap: 8px !important; align-items: center; }

  /* Footer */
  footer { padding: 36px 20px !important; }

  /* Botón WhatsApp — subir en móvil para no tapar el footer */
  a[href*="wa.me"] { bottom: 16px !important; right: 16px !important; width: 50px !important; height: 50px !important; }

  /* Thumbnails "Proyectos reales" — se adaptan al ancho disponible */
  .lp-mocks { gap: 8px !important; }
  .lp-mock { flex: 1 !important; min-width: 0 !important; width: auto !important; height: auto !important; }
  .lp-mock img { width: 100% !important; height: 70px !important; }
  .lp-mock--left { transform: rotate(-2deg) !important; }
  .lp-mock--right { transform: rotate(2deg) !important; }
}

@media (max-width: 480px) {
  .pkg-grid { grid-template-columns: 1fr !important; }
  .h2 { font-size: clamp(24px, 8vw, 34px) !important; }
}