/* =========================================================
   M.G HEALTH PARTNERS · Efectos interactivos
   Capa independiente: si se elimina este archivo y js/fx.js,
   la web sigue funcionando igual.
   ========================================================= */

/* ---------- Barra de progreso de lectura ---------- */
.fx-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1000;
  background: linear-gradient(90deg, var(--teal-strong), var(--teal));
  transform-origin: left; transform: scaleX(var(--p, 0));
  pointer-events: none;
}

/* ---------- Hero: red de partículas y foco del cursor ---------- */
.fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.4s ease; }
.fx-canvas.is-on { opacity: 1; }
.fx-spot {
  position: absolute; inset: 0; opacity: 0; transition: opacity .5s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(82,186,197,.12), transparent 70%);
}
.hero:hover .fx-spot { opacity: 1; }

/* Brillo que recorre "más potencial" */
.hero h1 .accent {
  background: linear-gradient(100deg, var(--teal) 0%, var(--teal) 40%, #c9f3f7 50%, var(--teal) 60%, var(--teal) 100%);
  background-size: 250% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero h1.is-visible .accent { animation: fxShine 4.5s 1.2s ease-in-out infinite; }
@keyframes fxShine { 0% { background-position: 100% 0; } 35%, 100% { background-position: 0 0; } }

/* Inclinación 3D del panel */
.hero-visual { perspective: 1200px; }
.dash { transition: transform .5s var(--ease); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; will-change: transform; }

/* ---------- Tarjetas: halo que sigue al cursor ---------- */
.fx-glow { position: relative; isolation: isolate; }
.fx-glow::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  opacity: 0; transition: opacity .35s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(82,186,197,.14), transparent 70%);
}
.fx-glow:hover::after { opacity: 1; }
.viz-card.fx-glow::after { z-index: 0; background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(82,186,197,.16), transparent 70%); }
.viz-card.fx-glow > * { position: relative; z-index: 1; }

/* ---------- Botones magnéticos ---------- */
.btn.fx-magnet { transform: translate(var(--bx, 0px), var(--by, 0px)); }
.btn.fx-magnet:hover { transform: translate(var(--bx, 0px), calc(var(--by, 0px) - 2px)); }

/* Destello al pulsar */
.btn { position: relative; overflow: hidden; }
.fx-ripple {
  position: absolute; border-radius: 50%; pointer-events: none; transform: scale(0);
  background: rgba(255,255,255,.35); animation: fxRipple .6s ease-out forwards;
}
@keyframes fxRipple { to { transform: scale(4); opacity: 0; } }

/* ---------- Títulos de sección: subrayado que se dibuja ---------- */
.section h2.fx-line { position: relative; }
.section h2.fx-line::after {
  content: ""; display: block; width: 56px; height: 3px; margin-top: 18px; border-radius: 3px;
  background: var(--teal); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease) .3s;
}
.section h2.fx-line.is-drawn::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce), (hover: none) {
  .fx-canvas, .fx-spot { display: none; }
  .dash { transform: none; }
  .btn.fx-magnet, .btn.fx-magnet:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1 .accent { animation: none !important; }
}