/* RETESA — "cursor tracker": un halo de luz que sigue la posición del cursor
   dentro de cada card (no es un cambio de color al pasar el mouse).

   Va en hoja propia y se carga en TODAS las páginas desde includes/header.php,
   para no tocar css/servicios.css, que es la hoja compartida por 8 páginas.

   Dos variantes, porque el halo blanco solo se ve sobre fondo oscuro y el sitio
   es casi todo blanco:
     · Fondo oscuro o de color  -> halo blanco (el aprobado en "Cuatro pasos").
     · Card blanca              -> mismo gesto con azul tenue, para que sí se vea.

   En ningún caso se toca el borde, la sombra ni la posición de la card: solo se
   pinta el halo. Sin JavaScript el halo queda centrado (--mx/--my valen 50%),
   así que el efecto degrada, no se rompe. */

/* --- Superficies que reciben el halo --- */
.glass-box,
.mosaic-box,
.cta-band,
.reason,
.svc-card,
.num-card,
.info-card,
.contact-card,
.post-card,
.blog-featured,
.feature-card{ position:relative; }   /* sin esto el pseudo-elemento no tiene dónde anclarse */

/* ===== Variante 1: halo BLANCO (fondos oscuros o de color) ===== */
.glass-box::before,
.mosaic-box::before,
.cta-band::before,
.reason::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
              rgba(255,255,255,.15), rgba(255,255,255,.045) 48%, transparent 72%);
  opacity:0; transition:opacity .35s var(--ease);
  pointer-events:none;
}
.glass-box:hover::before,
.mosaic-box:hover::before,
.cta-band:hover::before,
.reason:hover::before{ opacity:1; }

/* Las cards del inicio (.hcard) oscurecen su propia foto al pasar el mouse, así que
   aquí el halo va con ::after y z-index para quedar POR ENCIMA de ese velo. */
.hcard::after{
  content:""; position:absolute; inset:0; z-index:2;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
              rgba(255,255,255,.15), rgba(255,255,255,.045) 48%, transparent 72%);
  opacity:0; transition:opacity .35s var(--ease);
  pointer-events:none;
}
.hcard:hover::after{ opacity:1; }

/* ===== Variante 2: halo AZUL TENUE (cards blancas) ===== */
/* .num-card usa ::before para el número grande de fondo, por eso aquí va ::after. */
.svc-card::before,
.num-card::after,
.info-card::before,
.contact-card::before,
.post-card::before,
.blog-featured::before,
.feature-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),
              rgba(16,27,45,.10), rgba(16,27,45,.04) 48%, transparent 72%);
  opacity:0; transition:opacity .35s var(--ease);
  pointer-events:none;
}
.svc-card:hover::before,
.num-card:hover::after,
.info-card:hover::before,
.contact-card:hover::before,
.post-card:hover::before,
.blog-featured:hover::before,
.feature-card:hover::before{ opacity:1; }

/* Sin mouse real no hay cursor que seguir: fuera. */
@media (hover:none){
  .glass-box::before,
  .mosaic-box::before,
  .cta-band::before,
  .reason::before,
  .hcard::after,
  .svc-card::before,
  .num-card::after,
  .info-card::before,
  .contact-card::before,
  .post-card::before,
  .blog-featured::before,
  .feature-card::before{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .glass-box::before,
  .mosaic-box::before,
  .cta-band::before,
  .reason::before,
  .hcard::after,
  .svc-card::before,
  .num-card::after,
  .info-card::before,
  .contact-card::before,
  .post-card::before,
  .blog-featured::before,
  .feature-card::before{ transition:none; }
}