/* NexPass — estados :hover portados de los atributos `style-hover` del
   componente original (el runtime DC los aplicaba como reglas :hover).
   Cada clase se coloca en el markup del widget correspondiente. */

/* Enlaces de nav de escritorio (sobre fondo claro) */
.np-navlink { transition: color .2s ease; }
.np-navlink:hover { color: var(--np-indigo, #3B4BF5); }

/* Botón "Iniciar sesión" (nav escritorio) */
.np-login { transition: background-color .2s ease, color .2s ease; }
.np-login:hover { background: var(--np-gris-100, #EEF2F7); color: var(--np-navy, #0B0E26); }

/* CTA oscuro del nav (fondo navy → índigo al hover) */
.np-cta-dark:hover { background: var(--np-indigo, #3B4BF5); color: #FFFFFF; }

/* CTA primario índigo (hero) — oscurece + levanta */
.np-cta-primary:hover { background: var(--np-indigo-700, #2F3DD6); color: #FFFFFF; transform: translateY(-1px); }

/* CTA secundario fantasma (hero) */
.np-cta-ghost:hover { background: var(--np-bg-app, #F6F8FB); color: var(--np-navy, #0B0E26); }

/* CTA claro sobre sección de color (CTA final) — texto oscurece + levanta */
.np-cta-light:hover { color: var(--np-navy, #0B0E26); transform: translateY(-1px); }

/* Enlaces claros sobre fondo oscuro (menú móvil + footer legal) */
.np-footlink { transition: color .2s ease; }
.np-footlink:hover { color: #FFFFFF; }

/* Transiciones de los CTA que las usan */
.np-cta-dark, .np-cta-primary, .np-cta-ghost, .np-cta-light { transition: background-color .2s ease, color .2s ease, transform .2s ease; }