/* ============================================================
   Hypero · Animaciones (palabras + iconos)
   Solo transform/opacity (GPU). Respeta prefers-reduced-motion.
   Se carga DESPUÉS del CSS de cada página para poder reforzar.
   ============================================================ */

/* ---------- Entrada de palabras (anim.js marca [data-words]) ---------- */
[data-words]{opacity:1 !important;}
[data-words] .aw{
  display:inline-block;
  opacity:0;
  transform:translateY(0.5em);
  transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
  will-change:opacity,transform;
}
[data-words].in .aw{opacity:1; transform:none;}

/* ---------- Keyframes ---------- */
@keyframes hpPulse{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(0.72);opacity:0.45;}}
@keyframes hpFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
@keyframes hpFloatSlow{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
@keyframes hpPop{0%{transform:scale(0.4);opacity:0;}60%{transform:scale(1.12);opacity:1;}100%{transform:scale(1);}}
@keyframes hpDrift{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-4px) rotate(3deg);}}

/* ---------- Iconos / puntos decorativos (continuos, sutiles) ---------- */
.eyebrow .dot,
.trust-rules-head .label::before,
.final-foot span::before{animation:hpPulse 2.8s ease-in-out infinite;}

.service-card .num .pip{animation:hpPulse 2.8s ease-in-out infinite;}

/* Float suave de tarjetas “vivas” */
.hero .comparator{animation:hpFloat 7.5s ease-in-out infinite;}
.account .stmt{animation:hpFloatSlow 8.5s ease-in-out infinite;}

/* Banderas/íconos del flujo: leve deriva cuando el nodo está activo */
.flow-node.active .ring{animation:hpDrift 3s ease-in-out infinite;}

/* ---------- Micro-interacciones en hover ---------- */
.service-card .num .pip{transition:transform .25s ease;}
.service-card:hover .num .pip{transform:scale(1.7);}

.what-included li::before{transition:transform .3s cubic-bezier(.2,.7,.2,1);}
.what-included li:hover::before{transform:scale(1.18) rotate(-10deg);}

.account ul li::before{transition:transform .3s ease, width .3s ease;}
.account ul li:hover::before{transform:scaleX(1.6);}

.problem-card .num,
.disp-card .num,
.trust-rule .num{transition:transform .25s ease, letter-spacing .25s ease;}
.problem-card:hover .num,
.disp-card:hover .num,
.trust-rule:hover .num{transform:translateX(3px);letter-spacing:0.22em;}

/* Botón CTA: empujón de la flecha (refuerza el ya existente) */
.btn .arr{transition:transform .25s ease;}

/* Logo del nav: leve realce al pasar */
.nav-brand img,.topbar-brand img{transition:transform .35s cubic-bezier(.2,.7,.2,1);}
.nav-brand:hover img,.topbar-brand:hover img{transform:scale(1.04);}

/* Checkmarks que entran con “pop” al revelarse (anim.js añade .pop) */
.what-included li.pop::before{animation:hpPop .5s cubic-bezier(.2,.7,.2,1) both;}

/* ---------- Accesibilidad: sin movimiento ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition-duration:0.01ms !important;}
  [data-words] .aw{opacity:1 !important; transform:none !important;}
}