/* ConexaGo — animaciones compartidas. Se desactivan si el usuario prefiere menos movimiento. */
@media (prefers-reduced-motion: no-preference){

  /* Aparición al hacer scroll (solo se ocultan si motion.js está activo) */
  .cg-motion .cg-reveal{opacity:0;transform:translateY(28px)}
  .cg-motion .cg-reveal.cg-in{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}

  /* Onda al pulsar */
  /* overflow:clip (no hidden): recorta la onda sin permitir que el botón se encoja dentro de filas flex */
  .cg-ripple-host{overflow:clip}
  .cg-ripple{position:absolute;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(235,250,255,.9) 0%,rgba(150,225,250,.55) 30%,rgba(0,170,221,.25) 50%,rgba(0,170,221,0) 70%);transform:scale(0);animation:cg-ripple .75s ease-out forwards;z-index:0}
  @keyframes cg-ripple{to{transform:scale(1);opacity:0}}

  /* Botones: recorte de la onda al pulsar */
  .btn.gold,.btn.primary,.btn.white,.send,.auth-form button,.quote-continue,.phone-button{position:relative;overflow:clip}
  /* (Quitada la banda blanca que recorría los botones al pasar el ratón: el usuario no quiere destellos, 13-oct-2026.) */

  /* Brillo que recorre el dorado de los titulares */
  h1 em,h2 em{background-image:linear-gradient(110deg,#0086b8 0%,#7fdcf9 22%,#00aadd 45%,#e6f9ff 55%,#00aadd 70%,#0086b8 100%);background-size:220% auto;animation:cg-shine 7s linear infinite}
  @keyframes cg-shine{from{background-position:0% center}to{background-position:220% center}}

  /* Resplandores del fondo que se mueven despacio */
  .hero:before{animation:cg-drift-a 18s ease-in-out infinite alternate}
  .hero:after{animation:cg-drift-b 22s ease-in-out infinite alternate}
  @keyframes cg-drift-a{to{translate:-90px 60px;scale:1.12}}
  @keyframes cg-drift-b{to{translate:120px -40px;scale:1.08}}

  /* Móviles flotando */
  .phone-front{animation:cg-float 6s ease-in-out infinite}
  .phone-back{animation:cg-float 7s ease-in-out infinite reverse}
  @keyframes cg-float{50%{translate:0 -14px}}

  /* Importe que se ilumina al cambiar */
  .cg-pulse{animation:cg-pulse .65s ease}
  @keyframes cg-pulse{35%{color:#7fd8f7;text-shadow:0 0 22px rgba(0,170,221,.55);scale:1.035}}

  /* Elementos que aparecen con un pequeño salto */
  .msg,.item,.ben-option,.suggestions button,.toast.show{animation:cg-pop .45s cubic-bezier(.2,.9,.3,1.3) both}
  .suggestions button:nth-child(2){animation-delay:.06s}.suggestions button:nth-child(3){animation-delay:.12s}.suggestions button:nth-child(4){animation-delay:.18s}
  @keyframes cg-pop{from{opacity:0;translate:0 10px;scale:.97}}

  /* Pequeño rebote al pasar el ratón por iconos y banderas */
  .icon-wrap,.topic .ic,.country .flag{transition:transform .35s cubic-bezier(.2,.9,.3,1.4)}
  .card:hover .icon-wrap{transform:translateY(-4px) rotate(-6deg)}
  .topic:hover .ic{transform:scale(1.18) rotate(-8deg)}
  .country:hover .flag{transform:scale(1.2) rotate(-6deg)}
  .country-pill,.quick-amounts button,.pill,.chip{transition:transform .2s ease,border-color .2s,background .2s,color .2s}
  .country-pill:active,.quick-amounts button:active,.pill:active,.chip:active,.btn:active,.send:active{transform:scale(.95)}

  /* Etiquetas "en vivo" que respiran */
  .demo-pill,.tracker-status,.chat-head small i{animation:cg-beat 2.4s ease-in-out infinite}
  @keyframes cg-beat{50%{box-shadow:0 0 0 6px rgba(61,214,140,0);filter:brightness(1.25)}0%,100%{box-shadow:0 0 0 0 rgba(61,214,140,.25)}}

  /* Barra de progreso del tracker que se rellena */
  .progress span{animation:cg-fill 2.2s cubic-bezier(.2,.7,.2,1) both}
  @keyframes cg-fill{from{width:0}}
}

/* Barra de progreso de lectura */
.cg-progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:200;background:linear-gradient(90deg,#0086b8,#7fdcf9,#3dd68c);box-shadow:0 0 12px rgba(0,170,221,.6);pointer-events:none}