/* =========================================================
   EFFECTS — fondo global, reveal, ripple, parallax y WhatsApp flotante
========================================================= */

/* Patrón de circuito impreso de fondo, en toda la página */
.bg-circuit{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(var(--color-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-line) 1px, transparent 1px);
  background-size:56px 56px;
  opacity:0.16;
  mask-image:radial-gradient(circle at center, black, transparent 80%);
  -webkit-mask-image:radial-gradient(circle at center, black, transparent 80%);
}

/* ===== Reveal on scroll ===== */
.reveal{
  opacity:0;transform:translateY(28px);filter:blur(8px);
  transition:opacity .75s var(--ease-premium), transform .75s var(--ease-premium), filter .75s var(--ease-premium);
}
.reveal.in{opacity:1;transform:translateY(0);filter:blur(0);}

/* En móvil el blur transicionando se ve tembloroso/pesado: se deja solo fade + slide */
@media (max-width:768px){
  .reveal{filter:none;transform:translateY(16px);}
  .reveal.in{filter:none;}
}

/* ===== Ripple dorado que sigue al cursor (--mx/--my actualizadas por JS, solo hover fino) ===== */
.service-card::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .25s var(--ease-premium);
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(244,180,0,0.18), transparent 34%);
}
.service-card:hover::after, .service-card:focus-within::after{opacity:1;}

.why-item::after{
  content:'';position:absolute;inset:0;border-radius:14px;pointer-events:none;opacity:0;
  transition:opacity .25s var(--ease-premium);
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(244,180,0,0.14), transparent 40%);
}
.why-item:hover::after{opacity:1;}

/* =========================================================
   WHATSAPP FLOTANTE
========================================================= */
.whatsapp-float{
  position:fixed;bottom:26px;right:26px;z-index:500;
  width:60px;height:60px;border-radius:50%;
  background:var(--color-whatsapp);color:#fff;text-decoration:none;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,0.4);
  animation:whatsappPulse 2.6s ease-in-out infinite;
  transition:transform .3s var(--ease-premium), box-shadow .3s var(--ease-premium);
}
.whatsapp-float:hover{transform:scale(1.08);box-shadow:0 10px 30px rgba(0,0,0,0.5);}
.whatsapp-float svg{width:30px;height:30px;}
@keyframes whatsappPulse{
  0%,100%{box-shadow:0 8px 24px rgba(0,0,0,0.4), 0 0 0 0 rgba(37,211,102,0.5);}
  50%{box-shadow:0 8px 24px rgba(0,0,0,0.4), 0 0 0 12px rgba(37,211,102,0);}
}
@media (max-width:480px){
  .whatsapp-float{width:52px;height:52px;bottom:18px;right:18px;}
  .whatsapp-float svg{width:26px;height:26px;}
}

/* =========================================================
   REDUCED MOTION que afecta animaciones específicas
========================================================= */
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1 !important;transform:none !important;filter:none !important;}
  .icon-img, .diamond-icon{animation:none !important;}
  .service-card::after, .why-item::after{display:none;}
  .whatsapp-float{animation:none !important;}
}