/* ==========================================================================
   utilities/responsive.css
   Ajustes para tablet y celular, y respeto a "reducir movimiento".
   IMPORTANTE: este archivo debe cargarse de ÚLTIMO para que sus reglas
   sobrescriban a las anteriores (mismo orden que tenía el styles.css original).
   ========================================================================== */
@media (max-width: 1080px) {
  .nav__links { display: none; }
  .burger { display: block; }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; text-align: center; padding-top: 110px; gap: 10px; }
  .hero__text { display: flex; flex-direction: column; align-items: center; }
  .hero__cta, .hero__stats { justify-content: center; }
  .hero__stage { height: 420px; width: 100%; }
  .scroll-cue { display: none; }
  .about, .contact { grid-template-columns: 1fr; }
  .mserv { grid-template-columns: 1fr; }
  .mserv__img img { max-height: 46vh; }
  .social { grid-template-columns: 1fr; }
  .crew { grid-template-columns: 1fr; text-align: center; }
  .crew__card { text-align: left; }
  .crew__nav { justify-content: center; }
  .crew__cta { margin-left: 0; }
}
@media (max-width: 600px) {
  .hide-sm { display: none; }
  .nav { height: 60px; padding-left: 16px; top: 10px; }
  .nav__logo img { height: 28px; }
  .hero__stage { height: 360px; }
  .hero__title { font-size: 8.6vw; }
  .hero .eyebrow { font-size: .64rem; letter-spacing: .1em; }
  .hero__cta { width: 100%; gap: 10px; }
  .hero__cta .btn { flex: 1 1 140px; padding: 0 1em; }
  .section__title { font-size: clamp(1.6rem, 8vw, 2.4rem); }
  .wstep em { display: none; }
  .wstep { justify-content: center; }
  .wopts, .wopts--grid { grid-template-columns: 1fr; }
  .wopt { padding: 12px 14px; }
  .wopt__ico { width: 40px; height: 40px; }
  .wcta .btn { flex: 1 1 100%; }
  .mserv__cta .btn { flex: 1 1 100%; }
  .motion-btn { width: 40px; height: 40px; }
  .stage__hint { font-size: .74rem; }
  .services { grid-template-columns: 1fr; }
  .svc__img { height: 130px; opacity: 1; margin-bottom: 14px; }
  .offers { height: 470px; }
  .offer { height: 440px; }
  .cover { height: 300px; }
  .client { width: 160px; height: 96px; padding: 14px; }
  .client img { max-height: 60px; filter: none; opacity: 1; }
  .products { grid-template-columns: 1fr 1fr; gap: 10px; }
  .product { padding: 14px; }
  .product h3 { font-size: .86rem; }
  .product__foot { flex-direction: column; align-items: stretch; }
  .add-btn { width: 100%; }
  .footer__bottom { justify-content: center; text-align: center; }
  .seg button { font-size: .78rem; }
  .snet { grid-template-columns: auto 1fr; padding: 16px; gap: 14px; }
  .snet__ico { width: 52px; height: 52px; }
  .snet__cta { grid-column: 1 / -1; justify-content: center; }
  .sphone__screen { height: 540px; }
  .sphone__float--2 { left: -10px; }
  .sphone__float--1, .sphone__float--3 { right: -8px; }
}
@media (max-width: 340px) {
  .products { grid-template-columns: 1fr; }
}
@media (hover: none) {
  .svc__img { height: 130px; opacity: 1; margin-bottom: 14px; }
  .svc__img img { transform: none; }
  .client img { filter: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .2s !important; scroll-behavior: auto !important; }
  .marquee__track, .clients__track { animation: none !important; }
}