site/assets/css/style.css

@@ -914,9 +914,9 @@ section[id] {
   border: 4px solid var(--fitme-accent);
   box-shadow: var(--fitme-shadow-lg);
   transform: rotate(-3deg);
-  /* Springy curve so the square "snaps" upright + lifts on hover */
-  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1),
-    box-shadow var(--fitme-transition);
+  /* Soft curve so the square straightens + lifts on hover (same as the buttons) */
+  transition: transform .5s cubic-bezier(.22, .8, .3, 1),
+    box-shadow .4s ease;
 }
 
 /* CSS overlay replaces the old small_overlay_white.svg — one less HTTP request */
@@ -955,6 +955,28 @@ section[id] {
     linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, transparent 40%, rgba(0, 0, 0, 0.08) 100%);
 }
 
+/* Same hover as the buttons / Mensalidades cards: the frame's 4px edge turns
+   into a conic brand-colour sweep (--pc-a / pc-spin, shared) over a dimmed
+   base of the same colour, with a soft glow round it. The photo covers the
+   padding box, so only the border area shows the gradient. */
+@media (hover: hover) {
+  .trainer-item .trainer-pic:hover,
+  #powerRotation>div:nth-child(even) .trainer-pic:hover {
+    border-color: transparent;
+    background:
+      linear-gradient(var(--fitme-dark), var(--fitme-dark)) padding-box,
+      conic-gradient(from var(--pc-a), rgba(var(--fitme-accent-rgb), .35) 0deg, rgba(var(--fitme-accent-rgb), .35) 150deg,
+          var(--fitme-accent) 250deg, #f4ff9c 300deg, var(--fitme-accent) 330deg,
+          rgba(var(--fitme-accent-rgb), .35) 360deg) border-box;
+    box-shadow: 0 0 18px 2px rgba(var(--fitme-accent-rgb), .4), var(--fitme-shadow-lg);
+    animation: pc-spin 3.2s linear infinite;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .trainer-item .trainer-pic:hover { animation: none; }
+}
+
 .trainer-item .trainer-pic img {
   width: 100%;
   height: 100%;