/* ============================================================
   Hospital Sta. Margarita — Capa de efectos premium · fx v1
   3D · profundidad · movimiento con propósito.
   Todo respeta prefers-reduced-motion y se degrada limpio.
   ============================================================ */

/* ---------- 1) Barra de progreso de lectura ---------- */
#fxProgress{
  position:fixed; top:0; left:0; height:3px; width:100%;
  transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg, var(--primary) 0%, #6fe86f 60%, var(--accent) 100%);
  z-index:200; pointer-events:none;
  box-shadow:0 0 12px rgba(0,204,0,.45);
}

/* ---------- 2) Fondo ambiental "aurora" (barato: sin filtros, solo
   degradados suaves + transform compositado) ---------- */
.fx-aurora{
  position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
  transform:translateZ(0);
}
.fx-aurora i{
  position:absolute; border-radius:50%; opacity:.55;
  transform:translateZ(0);
}
.fx-aurora i:nth-child(1){
  width:58vw; height:58vw; left:-18vw; top:-20vw;
  background:radial-gradient(circle at 45% 45%, rgba(0,204,0,.12) 0%, rgba(0,204,0,.05) 38%, transparent 68%);
  animation:fxDrift1 70s ease-in-out infinite alternate;
}
.fx-aurora i:nth-child(2){
  width:50vw; height:50vw; right:-16vw; top:22vh;
  background:radial-gradient(circle at 55% 45%, rgba(0,51,204,.07) 0%, rgba(0,51,204,.03) 40%, transparent 68%);
  animation:fxDrift2 90s ease-in-out infinite alternate;
}
.fx-aurora i:nth-child(3){
  width:44vw; height:44vw; left:20vw; bottom:-22vw;
  background:radial-gradient(circle at 50% 50%, rgba(0,204,0,.08) 0%, rgba(0,204,0,.03) 40%, transparent 65%);
  animation:fxDrift3 110s ease-in-out infinite alternate;
}
@keyframes fxDrift1{ to{ transform:translate3d(9vw, 7vh, 0) scale(1.1); } }
@keyframes fxDrift2{ to{ transform:translate3d(-7vw, -6vh, 0) scale(1.06); } }
@keyframes fxDrift3{ to{ transform:translate3d(6vw, -8vh, 0) scale(1.12); } }
/* Modo ligero: si el equipo no da los FPS, fx.js activa .fx-lite */
.fx-lite .fx-aurora, .fx-lite .fx-float{ display:none !important; }
.fx-lite .btn::before{ display:none; }
.fx-lite .qcard.alert .qic::after{ animation:none; opacity:0; }

/* ---------- 3) Reveal mejorado: rise + stagger (solo transform/opacity,
   propiedades compositadas = 60fps garantizados) ---------- */
.reveal{
  opacity:0;
  transform:translateY(28px) scale(.985);
  transition:
    opacity .8s cubic-bezier(.2,.7,.25,1),
    transform .8s cubic-bezier(.2,.7,.25,1);
}
.reveal.in{ opacity:1; transform:none; }

/* ---------- 4) Tarjetas 3D (tilt + brillo especular) ---------- */
.fx-tilt{
  transform-style:preserve-3d;
  will-change:transform;
  position:relative;
}
.fx-tilt.fx-tilting{ transition:none !important; }
.fx-tilt .fx-glare{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:3;
  pointer-events:none; opacity:0; transition:opacity .35s ease;
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),
    rgba(255,255,255,.55), rgba(255,255,255,.12) 38%, transparent 62%);
  mix-blend-mode:soft-light;
}
.fx-tilt:hover .fx-glare{ opacity:1; }
/* Los hijos "flotan" sobre el plano de la tarjeta */
.qcard.fx-tilt .qic,
.spec.fx-tilt .spec-body,
.fac.fx-tilt .fac-body,
.doc.fx-tilt .meta{ transform:translateZ(26px); }
.qcard.fx-tilt,.spec.fx-tilt,.fac.fx-tilt,.doc.fx-tilt,.ncard.fx-tilt{ overflow:visible; }
.spec.fx-tilt,.fac.fx-tilt,.ncard.fx-tilt,.doc.fx-tilt{ overflow:hidden; } /* conservan su recorte original */

/* ---------- 5) Zoom suave de imágenes en hover ---------- */
.spec .spec-img img, .fac .fac-img img, .ncard .img img, .doc .ph img{
  transition:transform 1.1s cubic-bezier(.16,.7,.2,1), filter .6s ease;
}
.spec:hover .spec-img img, .fac:hover .fac-img img,
.ncard:hover .img img, .doc:hover .ph img{
  transform:scale(1.07);
}
.doc .ph img{ filter:saturate(.94); }
.doc:hover .ph img{ filter:saturate(1.08); }

/* ---------- 6) Botones: barrido de luz + imán ---------- */
.btn{ position:relative; overflow:hidden; }
.btn::before{
  content:""; position:absolute; top:0; bottom:0; width:46%;
  left:-70%; transform:skewX(-22deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  transition:none; pointer-events:none;
}
.btn:hover::before{ animation:fxSheen .8s ease forwards; }
@keyframes fxSheen{ to{ left:135%; } }
.fx-magnet{ transition:transform .22s cubic-bezier(.2,.7,.3,1); will-change:transform; }

/* Pulso vital en botones de emergencia */
.btn-emergency, .qcard.alert .qic{ position:relative; }
.qcard.alert .qic::after{
  content:""; position:absolute; inset:-3px; border-radius:inherit;
  border:2px solid rgba(224,72,61,.45);
  animation:fxPulse 2.2s ease-out infinite; pointer-events:none;
}
@keyframes fxPulse{
  0%{ transform:scale(.92); opacity:.9; }
  70%{ transform:scale(1.22); opacity:0; }
  100%{ opacity:0; }
}

/* ---------- 7) Hero: profundidad 3D ---------- */
.heroSlider{ perspective:1200px; }
/* El contenedor de slides se vuelve referencia de posición al recibir
   transform, así que debe ocupar el hero completo (con sangrado extra
   arriba/abajo para que el parallax nunca deje bordes vacíos) */
.heroSlider #hsSlides{
  position:absolute; left:0; right:0; top:-12%; bottom:-12%;
  will-change:transform;
}
.hs-panel{
  will-change:transform;
  transform-style:preserve-3d;
  transition:box-shadow .4s ease;
}
.hs-panel.fx-live{ transition:none; }
.hs-panel h1, .hs-panel .eyebrow{ transform:translateZ(30px); }
.hs-panel p{ transform:translateZ(18px); }
.hs-actions{ transform:translateZ(38px); }
/* Cruces médicas flotantes con profundidad */
.fx-float{
  position:absolute; z-index:2; pointer-events:none; color:#fff; opacity:.16;
  will-change:transform; animation:fxBob var(--fd,7s) ease-in-out infinite alternate;
}
.fx-float svg{ width:100%; height:100%; display:block; filter:drop-shadow(0 6px 18px rgba(0,0,0,.25)); }
@keyframes fxBob{
  from{ transform:translate3d(var(--px,0px), 0, 0) rotate(var(--r0,0deg)); }
  to  { transform:translate3d(var(--px,0px), -22px, 0) rotate(var(--r1,8deg)); }
}

/* ---------- 8) Línea de vida (ECG) ---------- */
.fx-ecg{
  position:relative; height:88px; margin:clamp(6px,1.5vw,18px) 0 0;
  display:flex; align-items:center; overflow:hidden;
}
.fx-ecg svg{ width:100%; height:64px; display:block; }
.fx-ecg path{
  fill:none; stroke:var(--primary); stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:2400; stroke-dashoffset:2400;
}
.fx-ecg.in path{ animation:fxDraw 3.4s cubic-bezier(.35,0,.25,1) forwards; }
@keyframes fxDraw{ to{ stroke-dashoffset:0; } }
.fx-ecg .fx-ecg-dot{
  position:absolute; width:9px; height:9px; border-radius:50%;
  background:var(--primary); box-shadow:0 0 14px 3px rgba(0,204,0,.7);
  offset-path:path('M0,32 L240,32 L268,32 L282,6 L296,54 L308,20 L318,32 L560,32 L588,32 L602,10 L616,50 L628,24 L638,32 L900,32 L928,32 L942,4 L956,56 L968,22 L978,32 L1240,32 L1268,32 L1282,8 L1296,52 L1308,22 L1318,32 L1600,32');
  offset-distance:0%; opacity:0;
}
.fx-ecg.in .fx-ecg-dot{ animation:fxDot 3.4s cubic-bezier(.35,0,.25,1) forwards; }
@keyframes fxDot{ 0%{ offset-distance:0%; opacity:1; } 96%{ opacity:1; } 100%{ offset-distance:100%; opacity:0; } }

/* ---------- 9) Contadores ---------- */
.st b{ font-variant-numeric:tabular-nums; }

/* ---------- 10) Botón volver arriba con anillo de progreso ---------- */
#fxTop{
  position:fixed; right:22px; bottom:88px; z-index:90;
  width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  border:1px solid var(--line); box-shadow:var(--sh-md);
  display:grid; place-items:center; cursor:pointer;
  opacity:0; transform:translateY(14px) scale(.9); pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}
#fxTop.show{ opacity:1; transform:none; pointer-events:auto; }
#fxTop:hover{ background:#fff; box-shadow:var(--sh-lg); }
#fxTop svg.ring{ position:absolute; inset:3px; transform:rotate(-90deg); }
#fxTop svg.ring circle{
  fill:none; stroke:var(--primary); stroke-width:2.6; stroke-linecap:round;
}
#fxTop .arr{ width:18px; height:18px; color:var(--primary-deep); }
@media (max-width:760px){ #fxTop{ right:14px; bottom:78px; width:46px; height:46px; } }

/* ---------- 11) Marquesinas: pausa al pasar el mouse ---------- */
.gr-marquee:hover .gr-track,
.conv-marquee:hover .conv-track,
.stat-marquee:hover .stat-track{ animation-play-state:paused; }

/* ---------- 12) Chips de estadística con vida ---------- */
.st{ transition:transform .3s cubic-bezier(.2,.7,.3,1); }
.st:hover{ transform:translateY(-3px); }
/* La banda de cifras tiene fondo verde: los números van en blanco puro
   con un brillo sutil, nunca en verde-sobre-verde */
.st b{ color:#fff; text-shadow:0 2px 14px rgba(0,60,0,.25); }
.st span{ color:rgba(255,255,255,.92); }
/* El punto del ECG usa coordenadas fijas: se oculta en pantallas angostas */
@media (max-width:900px){ .fx-ecg .fx-ecg-dot{ display:none; } }

/* ---------- 13) Apagado total con reduced-motion ---------- */
@media (prefers-reduced-motion:reduce){
  #fxProgress, .fx-aurora, .fx-float, .fx-ecg .fx-ecg-dot{ display:none !important; }
  .reveal{ opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; }
  .fx-tilt, .hs-panel, #hsSlides{ transform:none !important; }
  .btn::before{ display:none; }
  .qcard.alert .qic::after{ animation:none; opacity:0; }
  .fx-ecg path{ stroke-dashoffset:0; animation:none; }
  .spec .spec-img img,.fac .fac-img img,.ncard .img img,.doc .ph img{ transition:none; }
}
/* En pantallas táctiles pequeñas la aurora se aligera */
@media (max-width:720px){
  .fx-aurora i{ filter:blur(60px); opacity:.35; }
}