site/assets/css/style.css

@@ -3544,6 +3544,43 @@ h3.contact-title {
 
 .trainer-item.is-open { z-index: 31; }
 
+/* ── Open detail cards (team + Modalidades): the same spinning brand edge ──────
+   A 3px ring cut out of ::after with a mask, shown while the card is open, plus
+   a soft brand glow added to the existing lift shadow. ─────────────────────── */
+.mod-detail::after,
+.trainer-detail::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 5;
+  padding: 3px;
+  border-radius: inherit;
+  background: 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);
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
+  opacity: 0;
+  transition: opacity .45s ease;
+  pointer-events: none;
+}
+.mod-detail.is-open::after,
+.trainer-item.is-open .trainer-detail::after { opacity: 1; animation: pc-spin 3.2s linear infinite; }
+.mod-detail.is-open {
+  box-shadow: 0 12px 30px rgba(var(--fitme-dark-rgb), .16), 0 2px 6px rgba(var(--fitme-dark-rgb), .10),
+              0 0 22px 2px rgba(var(--fitme-accent-rgb), .35);
+}
+.trainer-item.is-open .trainer-detail {
+  box-shadow: 0 12px 30px rgba(0, 0, 0, .32), 0 2px 6px rgba(0, 0, 0, .18),
+              0 0 22px 2px rgba(var(--fitme-accent-rgb), .35);
+}
+@media (prefers-reduced-motion: reduce) {
+  .mod-detail.is-open::after,
+  .trainer-item.is-open .trainer-detail::after { animation: none; }
+}
+
+
 .td-photo {
   flex: 0 0 var(--td-pw, 200px);
   box-sizing: border-box;