/* Efectos compartidos de los ejemplos de HerZú Web Express */
.fx-load { position: fixed; inset: 0; z-index: 999; display: grid; place-items: center; background: var(--fx-bg, #000); color: var(--fx-ink, #fff); transition: clip-path 1s cubic-bezier(.76, 0, .24, 1); clip-path: inset(0 0 0 0) }
.fx-load.done { clip-path: inset(0 0 100% 0) }
.fx-load .fx-bar { width: 140px; height: 2px; margin: 22px auto 0; background: color-mix(in srgb, currentColor 18%, transparent); overflow: hidden }
.fx-load .fx-bar i { display: block; height: 100%; background: var(--fx-accent, currentColor); transform-origin: left; transform: scaleX(0); transition: transform .9s cubic-bezier(.6, 0, .2, 1) }
.fx-load.go .fx-bar i { transform: scaleX(1) }
[data-r] { transition: opacity 1s cubic-bezier(.2, .8, .2, 1), transform 1.1s cubic-bezier(.2, .8, .2, 1), clip-path 1.3s cubic-bezier(.7, 0, .2, 1) }
[data-r="up"] { opacity: 0; transform: translateY(50px) }
[data-r="clip"] { clip-path: inset(100% 0 0 0) }
[data-r="clip"] img { transform: scale(1.25); transition: transform 1.6s cubic-bezier(.2, .8, .2, 1) }
[data-r].fx-in { opacity: 1; transform: none; clip-path: inset(0 0 0 0) }
[data-r].fx-in img { transform: none }
.fx-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em }
.fx-w > span { display: inline-block; transform: translateY(110%); transition: transform 1s cubic-bezier(.2, .8, .2, 1) }
[data-r="split"] { opacity: 1 }
[data-r="split"].fx-in .fx-w > span { transform: none }
.fx-cur { position: fixed; left: 0; top: 0; z-index: 998; pointer-events: none }
.fx-cur b { position: absolute; width: 10px; height: 10px; border-radius: 50%; translate: -50% -50%; background: var(--fx-cur, #000); display: grid; place-items: center; opacity: 0;
  transition: width .35s cubic-bezier(.2, .8, .1, 1), height .35s cubic-bezier(.2, .8, .1, 1), opacity .3s, background .3s; font: 600 11px/1 system-ui, sans-serif; letter-spacing: .06em; color: var(--fx-cur-ink, #fff); overflow: hidden; white-space: nowrap }
.fx-cur.on b { opacity: 1 }
.fx-cur[data-m] b { width: 78px; height: 78px }
.fx-cur[data-m="link"] b { width: 42px; height: 42px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--fx-cur, #000) }
.fx-cur b span { opacity: 0; transition: opacity .2s }
.fx-cur[data-m]:not([data-m="link"]) b span { opacity: 1 }
@media (hover: hover) and (pointer: fine) { html.fx-has-cur, html.fx-has-cur * { cursor: none !important } }
@media (prefers-reduced-motion: reduce) { [data-r] { opacity: 1 !important; transform: none !important; clip-path: none !important } .fx-w > span { transform: none !important } .fx-load { display: none } }
[data-par] { transition: none !important; will-change: transform }