/* La posición inicial existe desde el primer dibujo, antes de ejecutar JS.
   translate se compone con los transform originales de Canva, sin sustituirlos.
   El contenido permanece visible incluso si JavaScript no llega a ejecutarse. */
[data-motion]{--motion-distance:28px;transform-box:fill-box;transform-origin:center}
[data-motion="hero"]{--motion-distance:22px}
@media(prefers-reduced-motion:no-preference){
  [data-motion]:not(:where([data-motion] [data-motion])){translate:0 var(--motion-distance)}
  [data-motion][data-motion-state="done"],
  [data-motion][data-motion-state="static"]{translate:none}
  [data-motion][data-motion-state="running"]{will-change:translate}
}
.hotspot{border-radius:999px;transition:box-shadow 240ms ease,background-color 240ms ease}
/* Los cuatro enlaces de tarjetas son texto y flecha, no botones de cápsula. */
.hotspot[href^="soluciones.html#"]{border-radius:4px}
.hotspot[href^="soluciones.html#"]::after{content:"";position:absolute;left:0;right:16%;bottom:11%;height:1px;background:#18305c;opacity:0;transition:opacity 240ms ease;pointer-events:none}
@media(hover:hover){
  .hotspot:not([href^="soluciones.html#"]):hover{box-shadow:0 7px 22px rgba(24,48,92,.2),0 2px 6px rgba(24,48,92,.09);background-color:rgba(255,255,255,.025)}
  .hotspot[href^="soluciones.html#"]:hover::after{opacity:.6}
}
.hotspot:focus-visible{outline:3px solid #e9b64b;outline-offset:4px}
/* Se desactiva el fundido entre páginas para conservar siempre la visibilidad. */
@view-transition{navigation:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-motion]{translate:none!important}
  .hotspot,.hotspot::after{transition:none}
}