/* ============================================================
   TELEMETRY INSIGHT · COMPONENTES · botón flotante de WhatsApp y animación reveal
   ============================================================ */

/* ============================================================
   BOTÓN FLOTANTE WHATSAPP
   Círculo fijo de 60px. Al pasar el cursor se ensancha para
   mostrar la etiqueta, pero la altura y el redondeo se mantienen,
   así que nunca se deforma ni ocupa de más.
   ============================================================ */
.wa-float{
  position:fixed;bottom:26px;right:26px;z-index:90;
  display:inline-flex;align-items:center;
  height:60px;width:60px;                /* círculo perfecto en reposo */
  padding:0;
  background:#25D366;border-radius:100px;
  box-shadow:0 12px 34px -8px rgba(37,211,102,.55);
  overflow:hidden;white-space:nowrap;
  transition:width .32s var(--ease),transform .2s;
}
.wa-float svg{width:60px;height:60px;padding:16px;flex:none;box-sizing:border-box}
.wa-float .wa-label{
  color:#fff;font-weight:800;font-size:1.06rem;letter-spacing:.01em;
  opacity:0;transition:opacity .2s ease;padding-right:22px;
}
/* Al pasar el cursor: se ensancha y aparece la etiqueta "¡Enlázanos!" */
.wa-float:hover{width:238px}
.wa-float:hover .wa-label{opacity:1}

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ============================================================
   ANIMACIONES LIGERAS (P12, P14, P15)
   Todas respetan "prefers-reduced-motion".
   ============================================================ */

/* P12 · Deriva muy lenta en las fotos del catálogo y del blog.
   Da sensación de vida sin distraer de la lectura. */
.cat-media img,
.blog-card-media img,
.blog-feat-media img,
.post-card-media img{
  animation:fotoDeriva 26s ease-in-out infinite alternate;
  will-change:transform}
@keyframes fotoDeriva{
  from{transform:scale(1.04) translate3d(0,0,0)}
  to  {transform:scale(1.10) translate3d(-1.2%,-1%,0)}}
/* Al pasar el cursor, la foto responde con un acercamiento propio */
.cat-card:hover .cat-media img,
.post-card:hover .post-card-media img{animation-play-state:paused;transform:scale(1.09)}

/* P14 · Aparición suave de las secciones al entrar en pantalla */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* Botones y tarjetas: respuesta táctil consistente en todo el sitio */
.plan-cta,.qr-cta,.ph-btn,.blog-all-btn,.pcb-btn,.modal-cta,.news-btn{
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),
             background var(--tune),color var(--tune)}
.plan-cta:active,.qr-cta:active,.ph-btn:active,
.blog-all-btn:active,.pcb-btn:active,.modal-cta:active{transform:translateY(0) scale(.985)}

/* P15 · Botón flotante de WhatsApp: latido suave que invita a pulsarlo.
   El anillo del latido es un círculo fijo de 60px anclado a la esquina
   inferior derecha (detrás del botón), independiente del ancho del botón,
   de modo que nunca se estira aunque el botón se ensanche al hover. */
.wa-pulse{
  position:fixed;bottom:26px;right:26px;z-index:89;
  width:60px;height:60px;border-radius:50%;
  background:#25D366;opacity:.45;pointer-events:none;
  animation:waPulso 2.8s var(--ease) infinite;
}
@keyframes waPulso{
  0%  {transform:scale(1);opacity:.45}
  70% {transform:scale(1.7);opacity:0}
  100%{transform:scale(1.7);opacity:0}}
/* Saludo periódico: solo el botón, sin afectar su forma */
.wa-float{animation:waSaludo 5.5s ease-in-out infinite}
@keyframes waSaludo{
  0%,88%,100%{transform:translateY(0) rotate(0)}
  91%{transform:translateY(-4px) rotate(-8deg)}
  94%{transform:translateY(-4px) rotate(8deg)}
  97%{transform:translateY(0) rotate(0)}}
.wa-float:hover{animation-play-state:paused}

@media (prefers-reduced-motion:reduce){
  .cat-media img,.blog-card-media img,.blog-feat-media img,.post-card-media img{animation:none}
  .wa-float,.wa-pulse{animation:none}
  .wa-pulse{display:none}
  .reveal{opacity:1;transform:none}
}