/* ===== Hero: servicio rotativo, botón magnético, fade entre imágenes (animar-interfaz) ===== */
#hero-slider {
  position: relative;
  overflow: hidden;
}

#hero-slider .hero-slide,
#hero-slider div[id^="slide-"] {
  transition: opacity 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-slider .hero-slide,
  #hero-slider div[id^="slide-"] {
    transition: none !important;
  }
  .btn-magnetico {
    transition: none !important;
    transform: none !important;
  }
}