/* MAGO Builder · efectos: palabras con estilo, texto, animación de entrada, hover, movimiento y botones.
 * Sin JavaScript todo se ve completo. Con «reducir movimiento» no se anima nada. */

/* ---------- palabras con estilo (y efecto de texto del elemento) ---------- */
.mgt { --c: var(--mgt-c, var(--mg-c-accent, #f59e0b)); }
.mgt-c { color: var(--c); }
.mgt-hl, .mgt-ul { background-repeat: no-repeat; background-image: linear-gradient(var(--c), var(--c)); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.mgt-hl { background-position: 0 90%; background-size: 100% 46%; padding: 0 .12em; margin: 0 -.12em; border-radius: .12em; }
.mgt-ul { background-position: 0 100%; background-size: 100% .14em; padding-bottom: .06em; }
.mgt-wavy { text-decoration: underline wavy var(--c); text-decoration-thickness: .09em; text-underline-offset: .22em; text-decoration-skip-ink: none; }
.mgt-circle { position: relative; display: inline-block; z-index: 0; padding: 0 .1em; }
.mgt-circle::after { content: ""; position: absolute; inset: -.1em -.28em; border: .09em solid var(--c); border-radius: 50% / 62%; transform: rotate(-2deg); pointer-events: none; z-index: -1; }
.mgt-grad { background-image: linear-gradient(90deg, var(--c), var(--mgt-c2, var(--mg-c-primary, #6366f1))); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.mgt-strike { text-decoration: line-through; text-decoration-color: var(--c); text-decoration-thickness: .1em; }
.mgt-pill { color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); padding: .04em .55em; border-radius: 999px; font-size: .86em; font-weight: 600; white-space: nowrap; }
.mgt-serif { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.mgt-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; letter-spacing: -.02em; }
.mgt-caps { font-variant-caps: all-small-caps; letter-spacing: .08em; font-weight: 700; }
/* el marcador y el subrayado «se dibujan» al aparecer */
.mgt-hl.mgt-anim, .mgt-ul.mgt-anim { transition: background-size .9s cubic-bezier(.2, .7, .2, 1) .2s; }
html.mgfx-on .mgt-hl.mgt-anim:not(.is-in) { background-size: 0% 46%; }
html.mgfx-on .mgt-ul.mgt-anim:not(.is-in) { background-size: 0% .14em; }
html.mgfx-on .mgt-circle.mgt-anim:not(.is-in)::after { opacity: 0; transform: rotate(-2deg) scale(.8); }
.mgt-circle.mgt-anim::after { transition: opacity .5s ease .3s, transform .7s cubic-bezier(.2, .7, .2, 1) .3s; }

/* ---------- animación al aparecer (solo con el guion activo: html.mgfx-on) ---------- */
html.mgfx-on .mgfx-in:not(.is-in) { opacity: 0; }
html.mgfx-on .mgfx-in-from-bottom:not(.is-in) { translate: 0 32px; }
html.mgfx-on .mgfx-in-from-top:not(.is-in) { translate: 0 -32px; }
html.mgfx-on .mgfx-in-from-left:not(.is-in) { translate: -40px 0; }
html.mgfx-on .mgfx-in-from-right:not(.is-in) { translate: 40px 0; }
html.mgfx-on .mgfx-in-zoom-in:not(.is-in) { scale: .85; }
html.mgfx-on .mgfx-in-zoom-out:not(.is-in) { scale: 1.15; }
html.mgfx-on .mgfx-in-blur:not(.is-in) { filter: blur(12px); }
html.mgfx-on .mgfx-in-flip:not(.is-in) { rotate: x 70deg; }
html.mgfx-on .mgfx-in-spin:not(.is-in) { rotate: -8deg; scale: .92; }
.mgfx-in.is-in { animation: mgfx-in var(--mgfx-t, 700ms) cubic-bezier(.2, .7, .2, 1) var(--mgfx-d, 0ms) backwards, var(--mgfx-loop, mgfx-noop 1s); }
@keyframes mgfx-noop { }
@keyframes mgfx-in { from { opacity: 0; translate: var(--mgfx-tx, 0) var(--mgfx-ty, 0); scale: var(--mgfx-s, 1); rotate: var(--mgfx-r, 0deg); filter: blur(var(--mgfx-b, 0px)); } }
.mgfx-in-from-bottom { --mgfx-ty: 32px; } .mgfx-in-from-top { --mgfx-ty: -32px; }
.mgfx-in-from-left { --mgfx-tx: -40px; } .mgfx-in-from-right { --mgfx-tx: 40px; }
.mgfx-in-zoom-in { --mgfx-s: .85; } .mgfx-in-zoom-out { --mgfx-s: 1.15; }
.mgfx-in-blur { --mgfx-b: 12px; } .mgfx-in-spin { --mgfx-r: -8deg; --mgfx-s: .92; }
.mgfx-in-flip { --mgfx-r: x 70deg; }
html.mgfx-on .mgfx-in { transition: none; }

/* revelado con máscara (clip-path): la imagen o el bloque se descubre sin cambiar de opacidad */
html.mgfx-on .mgfx-in-reveal-left:not(.is-in), html.mgfx-on .mgfx-in-reveal-right:not(.is-in), html.mgfx-on .mgfx-in-reveal-up:not(.is-in), html.mgfx-on .mgfx-in-reveal-down:not(.is-in), html.mgfx-on .mgfx-in-reveal-circle:not(.is-in) { opacity: 1; }
html.mgfx-on .mgfx-in-reveal-left:not(.is-in) { clip-path: inset(0 99.5% 0 0); }
html.mgfx-on .mgfx-in-reveal-right:not(.is-in) { clip-path: inset(0 0 0 99.5%); }
html.mgfx-on .mgfx-in-reveal-up:not(.is-in) { clip-path: inset(99.5% 0 0 0); }
html.mgfx-on .mgfx-in-reveal-down:not(.is-in) { clip-path: inset(0 0 99.5% 0); }
html.mgfx-on .mgfx-in-reveal-circle:not(.is-in) { clip-path: circle(.6% at 50% 50%); }
.mgfx-in-reveal-left.is-in { animation: mgfx-rv-l calc(var(--mgfx-t, 700ms) + 300ms) cubic-bezier(.65, 0, .2, 1) var(--mgfx-d, 0ms) backwards, var(--mgfx-loop, mgfx-noop 1s); }
.mgfx-in-reveal-right.is-in { animation: mgfx-rv-r calc(var(--mgfx-t, 700ms) + 300ms) cubic-bezier(.65, 0, .2, 1) var(--mgfx-d, 0ms) backwards, var(--mgfx-loop, mgfx-noop 1s); }
.mgfx-in-reveal-up.is-in { animation: mgfx-rv-u calc(var(--mgfx-t, 700ms) + 300ms) cubic-bezier(.65, 0, .2, 1) var(--mgfx-d, 0ms) backwards, var(--mgfx-loop, mgfx-noop 1s); }
.mgfx-in-reveal-down.is-in { animation: mgfx-rv-d calc(var(--mgfx-t, 700ms) + 300ms) cubic-bezier(.65, 0, .2, 1) var(--mgfx-d, 0ms) backwards, var(--mgfx-loop, mgfx-noop 1s); }
.mgfx-in-reveal-circle.is-in { animation: mgfx-rv-c calc(var(--mgfx-t, 700ms) + 400ms) cubic-bezier(.65, 0, .2, 1) var(--mgfx-d, 0ms) backwards, var(--mgfx-loop, mgfx-noop 1s); }
@keyframes mgfx-rv-l { from { clip-path: inset(0 99.5% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes mgfx-rv-r { from { clip-path: inset(0 0 0 99.5%); } to { clip-path: inset(0 0 0 0); } }
@keyframes mgfx-rv-u { from { clip-path: inset(99.5% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes mgfx-rv-d { from { clip-path: inset(0 0 99.5% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes mgfx-rv-c { from { clip-path: circle(.6% at 50% 50%); } to { clip-path: circle(75% at 50% 50%); } }

/* ---------- animación ligada al scroll: el guion pone --mgsc-p (0→1 mientras cruza la pantalla) y --mgsc-e (0→1 al entrar) ---------- */
.mgfx-sc { --mgsc-p: .5; --mgsc-e: 1; --mgsc-a: 1; }
.mgfx-sc-parallax { transform: translate3d(0, calc((.5 - var(--mgsc-p)) * 120px * var(--mgsc-a)), 0); will-change: transform; }
.mgfx-sc-parallax-rev { transform: translate3d(0, calc((var(--mgsc-p) - .5) * 120px * var(--mgsc-a)), 0); will-change: transform; }
.mgfx-sc-drift-x { transform: translate3d(calc((var(--mgsc-p) - .5) * 240px * var(--mgsc-a)), 0, 0); will-change: transform; }
.mgfx-sc-fade-in { opacity: var(--mgsc-e); will-change: opacity; }
.mgfx-sc-fade-out { opacity: calc(1 - max(0, (var(--mgsc-p) - .6) * 2.5)); will-change: opacity; }
.mgfx-sc-slide-up { transform: translate3d(0, calc((1 - var(--mgsc-e)) * 90px * var(--mgsc-a)), 0); opacity: var(--mgsc-e); will-change: transform, opacity; }
.mgfx-sc-slide-left { transform: translate3d(calc((1 - var(--mgsc-e)) * -140px * var(--mgsc-a)), 0, 0); opacity: var(--mgsc-e); will-change: transform, opacity; }
.mgfx-sc-slide-right { transform: translate3d(calc((1 - var(--mgsc-e)) * 140px * var(--mgsc-a)), 0, 0); opacity: var(--mgsc-e); will-change: transform, opacity; }
.mgfx-sc-zoom-in { transform: scale(calc(1 - (1 - var(--mgsc-e)) * .3 * var(--mgsc-a))); opacity: var(--mgsc-e); will-change: transform, opacity; }
.mgfx-sc-zoom-scroll { transform: scale(calc(.85 + var(--mgsc-p) * .3 * var(--mgsc-a))); will-change: transform; }
.mgfx-sc-rotate { transform: rotate(calc((var(--mgsc-p) - .5) * 60deg * var(--mgsc-a))); will-change: transform; }
.mgfx-sc-blur-in { filter: blur(calc((1 - var(--mgsc-e)) * 14px * var(--mgsc-a))); opacity: calc(.3 + var(--mgsc-e) * .7); will-change: filter, opacity; }

/* ---------- al pasar el cursor ---------- */
.mgfx-hv { transition: translate .28s cubic-bezier(.2, .7, .2, 1), scale .28s cubic-bezier(.2, .7, .2, 1), rotate .28s ease, box-shadow .28s ease, opacity .28s ease, filter .28s ease; }
@media (hover: hover) {
	.mgfx-hv-lift:hover { translate: 0 -5px; box-shadow: 0 16px 34px rgba(15, 23, 42, .18); }
	.mgfx-hv-grow:hover { scale: 1.05; }
	.mgfx-hv-shrink:hover { scale: .96; }
	.mgfx-hv-tilt:hover { rotate: -2.5deg; scale: 1.02; }
	.mgfx-hv-glow:hover { box-shadow: 0 0 0 4px color-mix(in srgb, var(--mgfx-c, var(--mg-c-primary, #6366f1)) 28%, transparent), 0 12px 34px color-mix(in srgb, var(--mgfx-c, var(--mg-c-primary, #6366f1)) 45%, transparent); }
	.mgfx-hv-float:hover { animation: mgfx-float 1.8s ease-in-out infinite; }
	.mgfx-hv-dim { opacity: 1; } .mgfx-hv-dim:hover { opacity: .65; }
}

/* ---------- movimiento continuo (se pueden sumar varios: --mgfx-loop trae la lista completa) ---------- */
.mgfx-lp { animation: var(--mgfx-loop); }
.mgfx-lp-sway { transform-origin: 50% 0; }
@keyframes mgfx-float { 50% { translate: 0 -10px; } }
@keyframes mgfx-pulse { 50% { scale: 1.05; } }
@keyframes mgfx-spin { to { rotate: 360deg; } }
@keyframes mgfx-sway { 25% { rotate: 2.5deg; } 75% { rotate: -2.5deg; } }
@keyframes mgfx-wiggle { 0%, 70%, 100% { rotate: 0; } 76% { rotate: -3deg; } 82% { rotate: 3deg; } 88% { rotate: -2deg; } 94% { rotate: 2deg; } }
@keyframes mgfx-shake { 0%, 55%, 100% { translate: 0 0; } 6% { translate: -7px 0; } 12% { translate: 7px 0; } 18% { translate: -6px 0; } 24% { translate: 6px 0; } 30% { translate: -4px 0; } 36% { translate: 4px 0; } 42% { translate: -2px 0; } 48% { translate: 2px 0; } }
@keyframes mgfx-bounce { 0%, 100% { translate: 0 0; animation-timing-function: cubic-bezier(.3, 0, .8, .6); } 40% { translate: 0 -18px; animation-timing-function: cubic-bezier(.2, .4, .7, 1); } 70% { translate: 0 0; } 82% { translate: 0 -6px; } 92% { translate: 0 0; } }
@keyframes mgfx-tada { 0%, 60%, 100% { scale: 1; rotate: 0; } 8% { scale: .92; rotate: -3deg; } 16%, 32%, 48% { scale: 1.1; rotate: 3deg; } 24%, 40% { scale: 1.1; rotate: -3deg; } 56% { scale: 1; rotate: 0; } }
@keyframes mgfx-jelly { 0%, 55%, 100% { scale: 1 1; } 10% { scale: 1.12 .88; } 20% { scale: .9 1.1; } 30% { scale: 1.06 .94; } 40% { scale: .97 1.03; } 50% { scale: 1.01 .99; } }
@keyframes mgfx-flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: .35; } }
@keyframes mgfx-breathe { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 26px 2px color-mix(in srgb, var(--e) 60%, transparent); } }

/* ---------- efectos de botón ---------- */
.mgfx-bt { position: relative; --e: var(--mgfx-c, #fbbf24); }
.mgfx-bt-shine { overflow: hidden; isolation: isolate; }
.mgfx-bt-shine::before { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg); pointer-events: none; animation: mgfx-shine 3.2s ease-in-out infinite; }
@keyframes mgfx-shine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.mgfx-bt-pulse::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; animation: mgfx-ring 2s ease-out infinite; }
@keyframes mgfx-ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--e) 55%, transparent); } 80%, 100% { box-shadow: 0 0 0 14px transparent; } }
.mgfx-bt-ripple { overflow: hidden; }
.mgfx-sp { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 3; }
.mgfx-rp { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .45); transform: scale(0); pointer-events: none; animation: mgfx-rip .6s ease-out forwards; }
@keyframes mgfx-rip { to { transform: scale(2.6); opacity: 0; } }
.mgfx-p { position: absolute; left: 0; top: 0; line-height: 1; font-size: 14px; color: var(--e); pointer-events: none; user-select: none; will-change: transform, opacity; text-shadow: 0 0 6px color-mix(in srgb, var(--e) 50%, transparent); }
.mgfx-p.is-dot { width: 7px; height: 7px; border-radius: 2px; text-shadow: none; background: var(--e); }

/* ---------- reducir movimiento: sin animaciones ni estados ocultos ---------- */
@media (prefers-reduced-motion: reduce) {
	html.mgfx-on .mgfx-in:not(.is-in) { opacity: 1 !important; clip-path: none !important; translate: none !important; scale: none !important; rotate: none !important; filter: none !important; }
	.mgfx-in.is-in, .mgfx-lp, .mgfx-hv-float:hover, .mgfx-bt-shine::before, .mgfx-bt-pulse::after { animation: none !important; }
	.mgt-hl.mgt-anim, .mgt-ul.mgt-anim, .mgt-circle.mgt-anim::after { transition: none !important; }
	html.mgfx-on .mgt-hl.mgt-anim:not(.is-in) { background-size: 100% 46% !important; }
	html.mgfx-on .mgt-ul.mgt-anim:not(.is-in) { background-size: 100% .14em !important; }
	html.mgfx-on .mgt-circle.mgt-anim:not(.is-in)::after { opacity: 1 !important; transform: rotate(-2deg) !important; }
	.mgfx-hv { transition: none !important; }
	.mgfx-sc { transform: none !important; opacity: 1 !important; filter: none !important; }
}