diff --git a/site/assets/css/style.css b/site/assets/css/style.css
index ac810dd..14b163e 100644
--- a/site/assets/css/style.css
+++ b/site/assets/css/style.css
@@ -884,6 +884,52 @@ section[id] {
   /* darken icon on accent bg */
 }
 
+/* Icon boxes (Modalidades, offer): same hover as the buttons — dark face, white
+   icon, spinning brand-colour edge (a 2px ring cut out of ::after with a mask)
+   and a soft glow. The official YOURFIT PNGs keep their own colours on a white
+   face instead of being turned into silhouettes. */
+.icon-box-item .ib-icon {
+  position: relative;
+  z-index: 0;
+  transition: background-color .4s ease, color .4s ease, transform .5s cubic-bezier(.22, .8, .3, 1), box-shadow .4s ease;
+}
+.icon-box-item .ib-icon::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  padding: 2px;
+  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;
+}
+.icon-box-item:hover .ib-icon,
+.icon-box-item:focus-visible .ib-icon {
+  background: color-mix(in srgb, var(--fitme-accent) 10%, #000);
+  color: #fff;
+  transform: scale(1.06);
+  box-shadow: 0 0 16px 1px rgba(var(--fitme-accent-rgb), .4);
+}
+.icon-box-item:hover .ib-icon::after,
+.icon-box-item:focus-visible .ib-icon::after { opacity: 1; animation: pc-spin 3.2s linear infinite; }
+.icon-box-item:hover .ib-icon svg.mi,
+.icon-box-item:focus-visible .ib-icon svg.mi { color: #fff; }
+.icon-box-item:hover .ib-icon img,
+.icon-box-item:focus-visible .ib-icon img { filter: brightness(0) invert(1); mix-blend-mode: normal; }
+.icon-box-item:hover .ib-icon:has(img[src*="yourfit"]),
+.icon-box-item:focus-visible .ib-icon:has(img[src*="yourfit"]) { background: #fff; }
+.icon-box-item:hover .ib-icon img[src*="yourfit"],
+.icon-box-item:focus-visible .ib-icon img[src*="yourfit"] { filter: none; }
+@media (prefers-reduced-motion: reduce) {
+  .icon-box-item:hover .ib-icon::after { animation: none; }
+}
+
 /* ── Trainers / Team ───────────────────────────────────────────────────────── */
 .trainers-section {
   padding: 100px 0 60px;
@@ -4275,9 +4321,39 @@ h3.contact-title {
   filter: brightness(1.05);
 }
 
+/* Hover: the frame becomes the spinning brand-colour edge (same as buttons and
+   Mensalidades cards): ::after = 3px ring cut out with a mask, ::before = soft
+   inner glow. */
+.gal-link::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  box-shadow: inset 0 0 22px 2px rgba(var(--fitme-accent-rgb), .5);
+  opacity: 0;
+  transition: opacity .45s ease;
+  pointer-events: none;
+  z-index: 1;
+}
+.gal-link::after {
+  z-index: 2;
+  padding: 3px;
+  box-shadow: none;
+  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;
+}
+.gal-link:hover::before,
+.gal-link:focus-visible::before { opacity: 1; }
 .gal-link:hover::after,
-.gal-link:focus-visible::after {
-  box-shadow: inset 0 0 0 3px var(--fitme-accent);
+.gal-link:focus-visible::after { opacity: 1; animation: pc-spin 3.2s linear infinite; }
+@media (prefers-reduced-motion: reduce) {
+  .gal-link:hover::after { animation: none; }
 }
 
 @media (max-width: 991px) {