/* ===== Hero: servicio rotativo, botón magnético, fade entre imágenes ===== */
.hero-slide {
  transition: opacity 1.1s ease-in-out;
}

/* --- Botón magnético --- */
.btn-magnetico {
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none !important; }
  .btn-magnetico { transition: none !important; transform: none !important; }
}