/* =========================================================== CTA-COMPASS — cursor de brújula en el CTA final =========================================================== Componente aislado, mismo criterio que css/process-scrub.css: depende solo de las variables ya definidas en :root por css/style.css. Solo se activa en escritorio con ratón real (ver comprobación hover:hover + pointer:fine en js/cta-compass.js, que además crea y posiciona el .cta-compass directamente en — no en el HTML estático — para evitar quedar atrapado dentro de algún contenedor con transform (p.ej. el propio [data-reveal] al revelarse) y así poder posicionarse con position:fixed relativo a toda la ventana sin sorpresas. */ @media (hover: hover) and (pointer: fine) { .final-cta__inner.has-compass-cursor, .final-cta__inner.has-compass-cursor .btn { /* Se oculta el cursor nativo (incluida la "manita" del botón, a propósito: la brújula sustituye al cursor en todo el recuadro, también encima del CTA) mientras la brújula hace ese papel. */ cursor: none; } } .cta-compass { position: fixed; top: 0; left: 0; /* El doble de los ~32px habituales de un cursor de sistema. */ width: 64px; height: 64px; pointer-events: none; z-index: 3000; opacity: 0; transition: opacity 150ms ease; will-change: transform; } .cta-compass.is-active { opacity: 1; } @media (prefers-reduced-motion: reduce) { .cta-compass { display: none !important; } }