/* MAGO Builder · elementos interactivos y con efectos.
 * Todo el contenido está en el HTML: sin JavaScript se ve completo; el JS solo añade movimiento. */
.mg-el { --mg-a: var(--mg-acc, var(--mago-brand, #1f4fd8)); }
.mg-svg { flex: none; }

.mg-tabs-list[hidden], .mg-car-btn[hidden], .mg-car-dots[hidden] { display: none; }

/* ===================== FAQ ===================== */
.mg-faq { display: flex; flex-direction: column; gap: .75rem; width: 100%; }
.mg-faq-item { border: 1px solid var(--mago-line); border-radius: 14px; background: var(--mg-faq-bg, transparent); overflow: clip; transition: border-color .2s, box-shadow .2s, background-color .2s; }
.mg-faq-item > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; cursor: pointer; list-style: none; }
.mg-faq-item > summary::-webkit-details-marker { display: none; }
.mg-faq-item > summary:focus-visible { outline: 2px solid var(--mg-a); outline-offset: -2px; border-radius: 12px; }
.mg-faq-q { margin: 0; font-size: 1.05rem; font-weight: 650; line-height: 1.35; }
.mg-faq-ic { position: relative; flex: none; width: 1.1rem; height: 1.1rem; color: var(--mg-a); }
.mg-faq.has-plus .mg-faq-ic::before, .mg-faq.has-plus .mg-faq-ic::after { content: ""; position: absolute; inset: 50% 0 auto 0; height: 2px; margin-top: -1px; background: currentColor; border-radius: 2px; transition: transform .3s; }
.mg-faq.has-plus .mg-faq-ic::after { transform: rotate(90deg); }
.mg-faq.has-plus details[open] .mg-faq-ic::after { transform: rotate(0); }
.mg-faq.has-chevron .mg-faq-ic::before { content: ""; position: absolute; inset: 15% 20% auto 20%; height: 55%; aspect-ratio: 1; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .3s; }
.mg-faq.has-chevron details[open] .mg-faq-ic::before { transform: rotate(225deg) translate(-10%, -10%); }
.mg-faq-a { display: grid; grid-template-rows: 1fr; }
.mg-faq-a > div { padding: 0 1.25rem 1.1rem; line-height: 1.65; opacity: .88; }
@supports (interpolate-size: allow-keywords) {
	.mg-faq { interpolate-size: allow-keywords; }
	.mg-faq-item::details-content { block-size: 0; overflow: clip; transition: block-size .3s ease, content-visibility .3s allow-discrete; }
	.mg-faq-item[open]::details-content { block-size: auto; }
}
.mg-faq.is-cards .mg-faq-item[open] { border-color: var(--mg-a); box-shadow: 0 6px 24px -12px color-mix(in srgb, var(--mg-a) 55%, transparent); }
.mg-faq.is-filled .mg-faq-item { border-color: transparent; background: var(--mg-faq-bg, var(--mago-soft)); }
.mg-faq.is-filled .mg-faq-item[open] { box-shadow: inset 3px 0 0 var(--mg-a); }
.mg-faq.is-lines { gap: 0; }
.mg-faq.is-lines .mg-faq-item { border-width: 0 0 1px; border-radius: 0; background: transparent; }
.mg-faq.is-lines .mg-faq-item > summary { padding-inline: 0; }
.mg-faq.is-lines .mg-faq-a > div { padding-inline: 0; }
.mg-faq.is-clean { gap: 0; }
.mg-faq.is-clean .mg-faq-item { border: 0; background: transparent; }
.mg-faq.is-clean .mg-faq-item > summary { padding-inline: 0; }
.mg-faq.is-clean .mg-faq-a > div { padding-inline: 0; }

/* ===================== Mapa ===================== */
.mg-map { display: grid; gap: 1rem; width: 100%; }
.mg-map.has-card { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .mg-map.has-card { grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); align-items: stretch; } }
.mg-map-box { position: relative; min-height: var(--mg-map-h, 380px); border-radius: var(--mago-radius); overflow: hidden; background: var(--mago-soft); border: 1px solid var(--mago-line); }
.mg-map-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.mg-map.is-gray .mg-map-frame { filter: grayscale(1) contrast(1.05); }
.mg-map-box.is-click { display: grid; place-items: center; background: linear-gradient(135deg, var(--mago-soft), color-mix(in srgb, var(--mg-a) 14%, var(--mago-soft))); }
.mg-map-go { display: inline-flex; align-items: center; gap: .6rem; padding: .85rem 1.4rem; border: 0; border-radius: 999px; background: var(--mg-a); color: #fff; font: inherit; font-weight: 700; cursor: pointer; transition: transform .2s; }
.mg-map-go:hover { transform: translateY(-2px); }
.mg-map-go:focus-visible { outline: 3px solid color-mix(in srgb, var(--mg-a) 40%, transparent); outline-offset: 3px; }
.mg-map-card { display: flex; flex-direction: column; gap: .7rem; padding: 1.4rem; border: 1px solid var(--mago-line); border-radius: var(--mago-radius); background: var(--mago-paper); }
.mg-map-name { font-size: 1.15rem; line-height: 1.25; }
.mg-map-line { display: flex; gap: .6rem; margin: 0; align-items: flex-start; line-height: 1.45; }
.mg-map-line .mg-svg { margin-top: .2em; color: var(--mg-a); }
.mg-map-line a { color: inherit; text-underline-offset: .2em; }
.mg-map-dir { margin-top: .4rem; background: var(--mg-a); color: #fff; }

/* ===================== Repetidor ===================== */
.mg-rep { display: grid; margin: 0; padding: 0; list-style: none; }
.mg-rep-item { min-width: 0; display: flex; flex-direction: column; }
.mg-rep-item > * { flex: 1 1 auto; }
.mg-rep.is-spanfirst > .is-first { grid-column: 1 / -1; }
/* zigzag: en los pares se invierte la fila interior (imagen a un lado, texto al otro) */
.mg-rep.is-zigzag > .is-even > .mg-el { flex-direction: row-reverse; }
.mg-rep.is-zigzag > .is-even > .mg-el.mg-columns > .mg-column:first-child { order: 2; }
@media (max-width: 767px) { .mg-rep.is-zigzag > .is-even > .mg-el { flex-direction: column; } }

/* ===================== Contador ===================== */
.mg-counter { display: flex; flex-direction: column; gap: .35rem; }
.mg-counter-val { font-size: clamp(2.2rem, 6vw, 3.6rem); font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--mg-acc, inherit); font-variant-numeric: tabular-nums; }
.mg-counter-label { opacity: .75; }

/* ===================== Texto rotativo ===================== */
.mg-rot-words { position: relative; display: inline-block; color: var(--mg-acc, var(--mg-a)); vertical-align: bottom; }
.mg-rot-w { display: inline-block; }
.mg-rot-words .mg-rot-w:not(.is-on) { display: none; }
.mg-rot.is-ready .mg-rot-words { overflow: hidden; }
.mg-rot.is-ready .mg-rot-w { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; pointer-events: none; }
.mg-rot.is-ready .mg-rot-w.is-on { position: relative; opacity: 1; pointer-events: auto; }
.mg-rot.is-ready .mg-rot-words .mg-rot-w:not(.is-on) { display: inline-block; }
.mg-rot-words.is-under::after { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .1em; border-radius: 2px; background: currentColor; opacity: .35; }
.mg-rot.is-slide .mg-rot-w.is-in { animation: mg-rot-slide var(--mg-rot-t, .5s) cubic-bezier(.2, .8, .2, 1) both; }
.mg-rot.is-slide .mg-rot-w.is-out { animation: mg-rot-slide-out var(--mg-rot-t, .5s) cubic-bezier(.6, 0, .8, .4) both; opacity: 1; }
.mg-rot.is-fade .mg-rot-w.is-in { animation: mg-rot-fade .5s ease both; }
.mg-rot.is-blur .mg-rot-w.is-in { animation: mg-rot-blur .6s ease both; }
.mg-rot.is-flip .mg-rot-words { perspective: 400px; }
.mg-rot.is-flip .mg-rot-w.is-in { animation: mg-rot-flip .55s cubic-bezier(.2, .8, .2, 1) both; transform-origin: 50% 100%; }
.mg-rot.is-type .mg-rot-words::after { content: ""; display: inline-block; width: .08em; height: .9em; margin-left: .06em; background: currentColor; vertical-align: -.08em; animation: mg-rot-caret 1s steps(1) infinite; }
@keyframes mg-rot-slide { from { transform: translateY(80%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mg-rot-slide-out { from { transform: none; opacity: 1; } to { transform: translateY(-80%); opacity: 0; } }
@keyframes mg-rot-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mg-rot-blur { from { opacity: 0; filter: blur(10px); } to { opacity: 1; filter: none; } }
@keyframes mg-rot-flip { from { transform: rotateX(-90deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mg-rot-caret { 50% { opacity: 0; } }

/* ===================== Cinta ===================== */
.mg-tk { position: relative; overflow: hidden; width: 100%; font-size: 1.15rem; font-weight: 650; }
.mg-tk.is-fade { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mg-tk-track { display: flex; width: max-content; animation: mg-tk var(--mg-tk-d, 40s) linear infinite; }
.mg-tk.is-rev .mg-tk-track { animation-direction: reverse; }
.mg-tk.is-pause:hover .mg-tk-track, .mg-tk.is-pause:focus-within .mg-tk-track { animation-play-state: paused; }
.mg-tk-list { display: flex; flex: none; align-items: center; gap: var(--mg-tk-gap, 40px); margin: 0; padding: 0 calc(var(--mg-tk-gap, 40px) / 2); list-style: none; }
.mg-tk-item { display: flex; align-items: center; gap: var(--mg-tk-gap, 40px); white-space: nowrap; font-size: inherit; font-weight: inherit; }
.mg-tk-item img { display: block; height: var(--mg-tk-h, 36px); width: auto; max-width: none; object-fit: contain; }
.mg-tk-item a { color: inherit; text-decoration: none; display: inline-flex; }
.mg-tk-sep { opacity: .45; font-size: .9em; }
@keyframes mg-tk { to { transform: translateX(-50%); } }

/* ===================== Pestañas ===================== */
.mg-tabs-list { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: 1.25rem; }
.mg-tabs.is-center .mg-tabs-list { justify-content: center; }
.mg-tabs.is-stretch .mg-tabs-btn { flex: 1 1 0; justify-content: center; }
.mg-tabs-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.1rem; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 650; cursor: pointer; opacity: .65; transition: opacity .2s, background-color .2s, color .2s, box-shadow .2s; }
.mg-tabs-btn:hover { opacity: 1; }
.mg-tabs-btn.is-on { opacity: 1; color: var(--mg-a); }
.mg-tabs-btn:focus-visible { outline: 2px solid var(--mg-a); outline-offset: 2px; }
.mg-tabs.is-underline .mg-tabs-list { border-bottom: 1px solid var(--mago-line); gap: 0; }
.mg-tabs.is-underline .mg-tabs-btn { border-radius: 0; box-shadow: inset 0 -3px 0 transparent; margin-bottom: -1px; }
.mg-tabs.is-underline .mg-tabs-btn.is-on { box-shadow: inset 0 -3px 0 var(--mg-a); }
.mg-tabs.is-pills .mg-tabs-btn { border-radius: 999px; }
.mg-tabs.is-pills .mg-tabs-btn.is-on { background: var(--mg-a); color: #fff; }
.mg-tabs.is-boxed .mg-tabs-list { padding: .3rem; border-radius: 14px; background: var(--mago-soft); width: fit-content; max-width: 100%; }
.mg-tabs.is-boxed.is-stretch .mg-tabs-list { width: 100%; }
.mg-tabs.is-boxed .mg-tabs-btn { border-radius: 10px; }
.mg-tabs.is-boxed .mg-tabs-btn.is-on { background: var(--mago-paper); box-shadow: 0 1px 6px rgba(0, 0, 0, .12); }
/* sin JS (o en el editor) se ven todos los paneles, cada uno con su título */
.mg-tab { display: block; }
.mg-tabs:not(.is-js) .mg-tab::before, .mg-tabs.is-edit .mg-tab::before { content: attr(data-label); display: block; margin-bottom: .6rem; font-weight: 700; color: var(--mg-a); }
.mg-tabs.is-js:not(.is-edit) .mg-tab:not(.is-on) { display: none; }
.mg-tabs.is-js:not(.is-edit) .mg-tab.is-on { animation: mg-tab-in .35s ease both; }
.mg-tabs.is-edit .mg-tab { padding: .5rem 0; border-top: 1px dashed var(--mago-line); }
@keyframes mg-tab-in { from { opacity: 0; transform: translateY(6px); } }

/* ===================== Carrusel ===================== */
.mg-car { position: relative; }
.mg-car-track { display: flex; gap: var(--mg-car-gap, 20px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
.mg-car-track::-webkit-scrollbar { display: none; }
.mg-car-track > * { flex: 0 0 calc((100% - (var(--mg-pv, 3) - 1) * var(--mg-car-gap, 20px)) / var(--mg-pv, 3)); scroll-snap-align: start; min-width: 0; }
.mg-car-btn { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin-top: -1.3rem; padding: 0; border: 0; border-radius: 50%; background: var(--mago-paper); color: var(--mago-ink); box-shadow: 0 4px 16px rgba(0, 0, 0, .18); cursor: pointer; transition: transform .2s, opacity .2s; }
.mg-car-btn:hover { transform: scale(1.08); }
.mg-car-btn:focus-visible { outline: 2px solid var(--mg-a); outline-offset: 2px; }
.mg-car-btn[disabled] { opacity: .35; cursor: default; transform: none; }
.mg-car-btn.is-prev { left: -.6rem; }
.mg-car-btn.is-prev .mg-svg { transform: scaleX(-1); }
.mg-car-btn.is-next { right: -.6rem; }
.mg-car-dots { display: flex; justify-content: center; gap: .45rem; margin-top: 1rem; }
.mg-car-dots button { width: .6rem; height: .6rem; padding: 0; border: 0; border-radius: 99px; background: var(--mago-line); cursor: pointer; transition: width .25s, background-color .25s; }
.mg-car-dots button.is-on { width: 1.6rem; background: var(--mg-a); }
.mg-car-dots button:focus-visible { outline: 2px solid var(--mg-a); outline-offset: 2px; }

/* ===================== Línea de tiempo ===================== */
.mg-tl { position: relative; margin: 0; padding: 0; list-style: none; }
.mg-tl::before { content: ""; position: absolute; top: 0; bottom: 0; left: 8px; width: 2px; background: linear-gradient(var(--mg-a), color-mix(in srgb, var(--mg-a) 15%, transparent)); border-radius: 2px; }
.mg-tl-item { position: relative; padding: 0 0 2rem 2.5rem; }
.mg-tl-item:last-child { padding-bottom: 0; }
.mg-tl-dot { position: absolute; left: 0; top: .3rem; width: 18px; height: 18px; border-radius: 50%; background: var(--mago-paper); border: 3px solid var(--mg-a); box-shadow: 0 0 0 5px color-mix(in srgb, var(--mg-a) 16%, transparent); }
.mg-tl-card { padding: 1rem 1.2rem; border: 1px solid var(--mago-line); border-radius: 14px; background: var(--mago-paper); }
.mg-tl-date { display: inline-block; margin-bottom: .35rem; font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mg-a); }
.mg-tl-title { margin: 0 0 .3rem; font-size: 1.15rem; line-height: 1.3; }
.mg-tl-text { margin: 0; opacity: .85; line-height: 1.6; }
@media (min-width: 768px) {
	.mg-tl.is-alt::before { left: 50%; margin-left: -1px; }
	.mg-tl.is-alt .mg-tl-item { width: 50%; padding: 0 2.5rem 2.5rem 0; }
	.mg-tl.is-alt .mg-tl-item.is-even { margin-left: 50%; padding: 0 0 2.5rem 2.5rem; }
	.mg-tl.is-alt .mg-tl-item.is-odd .mg-tl-dot { left: auto; right: -9px; }
	.mg-tl.is-alt .mg-tl-item.is-even .mg-tl-dot { left: -9px; }
	.mg-tl.is-alt .mg-tl-item.is-odd .mg-tl-card { text-align: right; }
}

/* ===================== Tarjeta que gira ===================== */
.mg-flip { perspective: 1200px; min-height: var(--mg-flip-h, 280px); outline: none; }
.mg-flip-in { position: relative; width: 100%; min-height: inherit; height: 100%; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.mg-flip-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; padding: 1.5rem; text-align: center; border-radius: var(--mago-radius); backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: auto; }
.mg-flip-face p { margin: 0; opacity: .9; line-height: 1.55; }
.mg-flip-face.is-front { background: var(--mg-f1, var(--mago-soft)); color: var(--mg-f1c, inherit); border: 1px solid var(--mago-line); }
.mg-flip-face.is-back { background: var(--mg-f2, var(--mg-a)); color: #fff; }
.mg-flip.is-axis-y .mg-flip-face.is-back { transform: rotateY(180deg); }
.mg-flip.is-axis-x .mg-flip-face.is-back { transform: rotateX(180deg); }
.mg-flip-ic { display: grid; place-items: center; width: 3rem; height: 3rem; font-size: 1.6rem; border-radius: 14px; background: color-mix(in srgb, var(--mg-a) 14%, transparent); color: var(--mg-a); }
.mg-flip-t { font-size: 1.2rem; line-height: 1.25; }
.mg-flip-face.is-back .mg-btn { background: #fff; color: #111; margin-top: .4rem; align-self: center; }
@media (hover: hover) {
	.mg-flip.is-axis-y:hover .mg-flip-in, .mg-flip.is-axis-y:focus-within .mg-flip-in { transform: rotateY(180deg); }
	.mg-flip.is-axis-x:hover .mg-flip-in, .mg-flip.is-axis-x:focus-within .mg-flip-in { transform: rotateX(180deg); }
}
.mg-flip.is-flipped.is-axis-y .mg-flip-in { transform: rotateY(180deg); }
.mg-flip.is-flipped.is-axis-x .mg-flip-in { transform: rotateX(180deg); }
.mg-flip:not(.is-flipped):focus-visible .mg-flip-in { outline: 2px solid var(--mg-a); outline-offset: 3px; border-radius: var(--mago-radius); }

/* ===================== Tarjeta con brillo ===================== */
.mg-glow { position: relative; --gx: 50%; --gy: 50%; --mg-g: var(--mg-glow, var(--mg-a)); transform-style: preserve-3d; transition: transform .25s ease-out; isolation: isolate; }
.mg-glow.is-spot::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(420px circle at var(--gx) var(--gy), color-mix(in srgb, var(--mg-g) 32%, transparent), transparent 60%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.mg-glow.is-spot:hover::before { opacity: 1; }
.mg-glow.is-border::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1.5px; background: radial-gradient(260px circle at var(--gx) var(--gy), var(--mg-g), transparent 65%), var(--mago-line); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; }
.mg-glow.is-tilt { will-change: transform; }
.mg-glow.is-tilt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(360px circle at var(--gx) var(--gy), rgba(255, 255, 255, .16), transparent 55%); opacity: 0; transition: opacity .25s; pointer-events: none; }
.mg-glow.is-tilt:hover::after { opacity: 1; }

/* ===================== Cuenta regresiva ===================== */
.mg-cd-in { display: flex; flex-wrap: wrap; gap: .75rem; }
.mg-cd-u { display: flex; flex-direction: column; align-items: center; gap: .35rem; min-width: 4.6rem; }
.mg-cd-n { font-size: clamp(1.9rem, 5vw, 3rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.mg-cd-l { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.mg-cd.is-boxes .mg-cd-u { padding: 1rem .8rem; border-radius: 14px; background: var(--mago-soft); border: 1px solid var(--mago-line); }
.mg-cd.is-boxes .mg-cd-n { color: var(--mg-a); }
.mg-cd.is-plain .mg-cd-u + .mg-cd-u .mg-cd-n::before { content: ":"; margin-right: .6rem; opacity: .35; }
.mg-cd.is-plain .mg-cd-u { flex-direction: row; align-items: baseline; min-width: 0; }
.mg-cd.is-plain .mg-cd-l { display: none; }
.mg-cd-done { display: none; margin: 0; font-weight: 700; font-size: 1.2rem; }
.mg-cd.is-done .mg-cd-in { display: none; }
.mg-cd.is-done .mg-cd-done { display: block; }

/* ===================== Barras de progreso ===================== */
.mg-pg { display: flex; flex-direction: column; gap: 1.1rem; width: 100%; }
.mg-pg-head { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .4rem; font-weight: 650; }
.mg-pg-v { font-variant-numeric: tabular-nums; opacity: .75; }
.mg-pg-bar { height: var(--mg-bar-h, 10px); border-radius: 99px; background: var(--mg-track, var(--mago-soft)); overflow: hidden; }
.mg-pg-fill { display: block; height: 100%; width: var(--v, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--mg-a), color-mix(in srgb, var(--mg-a) 65%, #fff)); transform-origin: left; }
.mg-pg.is-js:not(.is-in) .mg-pg-fill { width: 0; }
.mg-pg.is-js .mg-pg-fill { transition: width 1.2s cubic-bezier(.2, .8, .2, 1); }

/* ===================== Barra de lectura ===================== */
.mg-rb { position: fixed; left: 0; right: 0; z-index: 9999; height: var(--mg-bar-h, 4px); background: transparent; pointer-events: none; }
.mg-rb.is-top { top: 0; }
.admin-bar .mg-rb.is-top { top: var(--wp-admin--admin-bar--height, 32px); }
.mg-rb.is-bottom { bottom: 0; }
.mg-rb-fill { display: block; height: 100%; width: 100%; background: var(--mg-a); transform: scaleX(var(--p, 0)); transform-origin: left; will-change: transform; }
.mg-rb.is-edit { position: relative; z-index: auto; background: var(--mago-soft); border-radius: 99px; overflow: hidden; }
.mg-rb.is-edit .mg-rb-fill { width: 100%; transform: none; }

/* ===================== Redes ===================== */
.mg-soc { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.mg-soc a { display: grid; place-items: center; width: var(--mg-soc, 44px); height: var(--mg-soc, 44px); font-size: calc(var(--mg-soc, 44px) * .45); color: inherit; text-decoration: none; transition: transform .25s, background-color .25s, color .25s; }
.mg-soc.is-circle a, .mg-soc.is-square a { background: var(--mago-soft); border: 1px solid var(--mago-line); }
.mg-soc.is-circle a { border-radius: 50%; }
.mg-soc.is-square a { border-radius: 12px; }
.mg-soc a:focus-visible { outline: 2px solid var(--mg-a); outline-offset: 2px; }
.mg-soc.hv-pop a:hover { transform: translateY(-4px) scale(1.06); color: var(--mg-a); }
.mg-soc.hv-fill a:hover { background: var(--mg-a); border-color: var(--mg-a); color: #fff; }
.mg-soc.hv-spin a:hover .mg-svg { animation: mg-spin .6s ease; }
@keyframes mg-spin { to { transform: rotate(360deg); } }

/* ===================== Caja con icono ===================== */
.mg-ib { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.mg-ib.is-left { flex-direction: row; gap: 1.1rem; }
.mg-ib.is-center { align-items: center; text-align: center; }
.mg-ib-ic { display: grid; place-items: center; flex: none; width: calc(var(--mg-isz, 1.5rem) * 2.13); height: calc(var(--mg-isz, 1.5rem) * 2.13); font-size: var(--mg-isz, 1.5rem); color: var(--mg-a); transition: transform .3s; }
.mg-ib-ic.is-soft { border-radius: 14px; background: color-mix(in srgb, var(--mg-a) 14%, transparent); }
.mg-ib-ic.is-circle { border-radius: 50%; background: color-mix(in srgb, var(--mg-a) 14%, transparent); }
.mg-ib-ic.is-solid { border-radius: 14px; background: var(--mg-a); color: #fff; }
.mg-ib-ic.is-plain { width: auto; height: auto; font-size: var(--mg-isz, 2rem); }
.mg-ib:hover .mg-ib-ic { transform: translateY(-3px) rotate(-4deg); }
.mg-ib-t { margin: 0 0 .4rem; font-size: 1.2rem; line-height: 1.3; }
.mg-ib-x { margin: 0; opacity: .85; line-height: 1.6; }
.mg-ib-a { display: inline-flex; align-items: center; gap: .4rem; margin-top: .8rem; font-weight: 700; color: var(--mg-a); text-decoration: none; }
.mg-ib-a .mg-svg { transition: transform .2s; }
.mg-ib-a:hover .mg-svg { transform: translateX(4px); }

/* ===================== Movimiento reducido ===================== */
@media (prefers-reduced-motion: reduce) {
	.mg-tk-track { animation: none; }
	.mg-tk { overflow-x: auto; }
	.mg-car-track { scroll-behavior: auto; }
	.mg-flip-in, .mg-glow, .mg-tabs-btn, .mg-pg-fill { transition: none; }
	.mg-rot .mg-rot-w, .mg-tabs .mg-tab { animation: none !important; }
	.mg-rot.is-type .mg-rot-words::after { animation: none; }
}

/* ---------- Archivo o web ---------- */
.mg-file { position: relative; width: 100%; }
.mg-file iframe { display: block; width: 100%; height: var(--mg-file-h, 600px); border: 0; border-radius: inherit; background: #f8fafc; }
.mg-file-fb { margin: .5rem 0 0; font-size: .875rem; text-align: right; }
.mg-file.is-download { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border: 1px solid var(--mg-c-line, #e2e8f0); border-radius: 14px; background: var(--mg-c-white, #fff); }
.mg-file-ico { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--mg-c-primary, #e03e89) 12%, #fff); color: var(--mg-c-primary, #e03e89); font-size: 24px; }
.mg-file-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mg-file-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-file-info small { opacity: .65; }
@media (max-width: 520px) { .mg-file.is-download { flex-wrap: wrap; } .mg-file-btn { width: 100%; text-align: center; } }

/* ---------- Tooltip ---------- */
.mg-tip { position: relative; display: inline-block; width: fit-content; max-width: 100%; --tip-bg: var(--mg-tip-bg, var(--mg-c-ink, #111827)); }
.mg-tip-box { position: absolute; z-index: 30; width: max-content; max-width: var(--mg-tip-w, 240px); padding: .45em .75em; border-radius: var(--mg-tip-r, 8px); background: var(--tip-bg); color: var(--mg-tip-c, #fff); font-size: var(--mg-tip-fs, 13px); line-height: 1.4; font-weight: 500; text-align: left; white-space: normal; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .16s ease, visibility .16s ease, translate .16s ease; }
.mg-tip.has-shadow .mg-tip-box { box-shadow: 0 8px 24px rgba(15, 23, 42, .25); }
.mg-tip.is-top .mg-tip-box { bottom: calc(100% + var(--mg-tip-gap, 10px)); left: 50%; translate: -50% 4px; }
.mg-tip.is-bottom .mg-tip-box { top: calc(100% + var(--mg-tip-gap, 10px)); left: 50%; translate: -50% -4px; }
.mg-tip.is-left .mg-tip-box { right: calc(100% + var(--mg-tip-gap, 10px)); top: 50%; translate: 4px -50%; }
.mg-tip.is-right .mg-tip-box { left: calc(100% + var(--mg-tip-gap, 10px)); top: 50%; translate: -4px -50%; }
.mg-tip.has-arrow .mg-tip-box::after { content: ""; position: absolute; width: 10px; height: 10px; background: var(--tip-bg); rotate: 45deg; border-radius: 2px; }
.mg-tip.is-top.has-arrow .mg-tip-box::after { bottom: -4px; left: calc(50% - 5px); }
.mg-tip.is-bottom.has-arrow .mg-tip-box::after { top: -4px; left: calc(50% - 5px); }
.mg-tip.is-left.has-arrow .mg-tip-box::after { right: -4px; top: calc(50% - 5px); }
.mg-tip.is-right.has-arrow .mg-tip-box::after { left: -4px; top: calc(50% - 5px); }
.mg-tip:not(.is-click):hover > .mg-tip-box, .mg-tip:not(.is-click):focus-within > .mg-tip-box, .mg-tip.is-click.is-open > .mg-tip-box, .mg-tip.is-edit > .mg-tip-box { opacity: 1; visibility: visible; translate: var(--tx, -50%) var(--ty, 0); }
.mg-tip.is-top:not(.is-click):hover > .mg-tip-box, .mg-tip.is-top:not(.is-click):focus-within > .mg-tip-box, .mg-tip.is-top.is-click.is-open > .mg-tip-box, .mg-tip.is-top.is-edit > .mg-tip-box,
.mg-tip.is-bottom:not(.is-click):hover > .mg-tip-box, .mg-tip.is-bottom:not(.is-click):focus-within > .mg-tip-box, .mg-tip.is-bottom.is-click.is-open > .mg-tip-box, .mg-tip.is-bottom.is-edit > .mg-tip-box { translate: -50% 0; }
.mg-tip.is-left:not(.is-click):hover > .mg-tip-box, .mg-tip.is-left:not(.is-click):focus-within > .mg-tip-box, .mg-tip.is-left.is-click.is-open > .mg-tip-box, .mg-tip.is-left.is-edit > .mg-tip-box,
.mg-tip.is-right:not(.is-click):hover > .mg-tip-box, .mg-tip.is-right:not(.is-click):focus-within > .mg-tip-box, .mg-tip.is-right.is-click.is-open > .mg-tip-box, .mg-tip.is-right.is-edit > .mg-tip-box { translate: 0 -50%; }
.mg-tip.is-click { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .mg-tip-box { transition: none; } }

/* v0.16 · tamaño propio de iconos en botón y lista */
.mg-btn .mg-svg, .mago-btn .mg-svg { width: var(--mg-isz, 1em); height: var(--mg-isz, 1em); }
.mg-list.has-icon .mg-svg { width: var(--mg-isz, 1em); height: var(--mg-isz, 1em); }

/* ---------- 0.17 · Ficha de producto: datos y pestañas ---------- */
.mg-pi { display: flex; flex-direction: column; gap: .9rem; }
.mg-pi-rate { display: flex; align-items: center; gap: .55rem; font-size: .95rem; }
.mg-pi-stars { --r: 0; font-size: 1.15rem; line-height: 1; letter-spacing: .08em; }
.mg-pi-stars::before { content: "★★★★★"; background: linear-gradient(90deg, #f5a524 calc(var(--r) / 5 * 100%), color-mix(in srgb, currentColor 18%, transparent) 0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mg-pi-num { font-weight: 700; }
.mg-pi-count { color: inherit; opacity: .65; text-decoration: none; }
.mg-pi-count:hover { text-decoration: underline; }
.mg-pi-excerpt > :first-child { margin-top: 0; }
.mg-pi-excerpt > :last-child { margin-bottom: 0; }
.mg-pi-meta, .mg-pi-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; font-size: .93rem; }
.mg-pi-k { font-weight: 650; margin-right: .35rem; }
.mg-pi-k::after { content: ":"; }
.mg-pi-meta a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.mg-pi-stock { display: inline-flex; align-items: center; gap: .45rem; font-weight: 650; }
.mg-pi-dot { width: .6rem; height: .6rem; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 4px rgba(22, 163, 74, .18); }
.mg-pi-stock.is-out .mg-pi-dot { background: #dc2626; box-shadow: 0 0 0 4px rgba(220, 38, 38, .18); }
.mg-pi-trust li { display: flex; align-items: center; gap: .55rem; }
.mg-pi-trust svg { width: 1.1rem; height: 1.1rem; flex: none; color: var(--mg-a); }
.mg-pi.is-inline .mg-pi-meta { flex-direction: row; flex-wrap: wrap; gap: .4rem 1.4rem; }
.mg-pi.is-inline .mg-pi-trust { flex-direction: row; flex-wrap: wrap; gap: .4rem 1.4rem; }
.mg-pi.is-cards .mg-pi-meta li { padding: .7rem .95rem; border: 1px solid var(--mago-line, rgba(0, 0, 0, .1)); border-radius: 12px; }
.mg-pi.is-cards .mg-pi-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.mg-pi.is-cards .mg-pi-trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.mg-pi.is-cards .mg-pi-trust li { padding: .8rem 1rem; border-radius: 12px; background: color-mix(in srgb, var(--mg-a) 8%, transparent); }
.mg-pt-empty { opacity: .65; margin: 0; }
.mg-pt-attrs, .mg-pt table.woocommerce-product-attributes { width: 100%; border-collapse: collapse; }
.mg-pt table th, .mg-pt table td { text-align: left; padding: .7rem .5rem; border-bottom: 1px solid var(--mago-line, rgba(0, 0, 0, .1)); vertical-align: top; }
.mg-pt table th { width: 32%; font-weight: 650; }
.mg-pt table td p { margin: 0; }
.mg-pt-reviews { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.mg-pt-review { padding: 1rem 1.1rem; border-radius: 14px; border: 1px solid var(--mago-line, rgba(0, 0, 0, .1)); }
.mg-pt-rh { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .7rem; margin-bottom: .35rem; }
.mg-pt-rh time { opacity: .6; font-size: .85rem; margin-left: auto; }
.mg-pt-rb > :last-child { margin-bottom: 0; }
.mg-pt.is-accordion { display: grid; gap: .6rem; }
.mg-pt-acc { border: 1px solid var(--mago-line, rgba(0, 0, 0, .1)); border-radius: 14px; overflow: hidden; }
.mg-pt-acc > summary { cursor: pointer; padding: 1rem 1.2rem; font-weight: 700; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.mg-pt-acc > summary::-webkit-details-marker { display: none; }
.mg-pt-acc > summary::after { content: "+"; font-size: 1.3rem; line-height: 1; color: var(--mg-a); transition: transform .25s; }
.mg-pt-acc[open] > summary::after { transform: rotate(45deg); }
.mg-pt-acc > .mg-pt-panel { padding: 0 1.2rem 1.2rem; }
.mg-pt.is-stacked { display: grid; gap: 2.2rem; }
.mg-pt-sec > h2 { margin: 0 0 .8rem; font-size: 1.35rem; }
.mg-pt-panel > :first-child { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .mg-pt-acc > summary::after { transition: none; } }

/* ---- v0.18 · Loop ---- */
.mg-loop-grid { display: grid; grid-template-columns: repeat(var(--mg-lc, 3), minmax(0, 1fr)); gap: var(--mg-lg, 24px); margin: 0; padding: 0; list-style: none; }
.mg-loop-item { min-width: 0; display: flex; flex-direction: column; }
.mg-loop-grid.is-feat { grid-auto-flow: dense; }
.mg-loop-grid.is-feat-big > .mg-loop-item.is-first { grid-column: span var(--mg-fs, 2); grid-row: span var(--mg-fr, 2); }
.mg-loop-grid.is-feat-tall > .mg-loop-item.is-first { grid-row: span var(--mg-fr, 2); }
.mg-loop-grid.is-feat-wide > .mg-loop-item.is-first { grid-column: 1 / -1; }
.mg-loop-grid.is-feat > .mg-loop-item.is-first > * { height: 100%; }
.mg-loop-item > * { flex: 1 1 auto; }
.mg-loop-item.is-ghost { opacity: .55; pointer-events: none; }
.mg-loop-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; }
.mg-loop-filters a, .mg-loop-filters span { padding: .45rem 1rem; border-radius: 999px; border: 1px solid var(--mg-c-line, #e2e8f0); color: inherit; text-decoration: none; font-size: .9rem; font-weight: 600; transition: background .2s, color .2s, border-color .2s; }
.mg-loop-filters a:hover { border-color: currentColor; }
.mg-loop-filters .is-on { background: var(--mg-c-ink, #0f172a); border-color: var(--mg-c-ink, #0f172a); color: #fff; }
.mg-loop-more { text-align: center; margin-top: 2rem; }
.mg-loop-more a.is-busy { opacity: .6; pointer-events: none; }
.mg-loop-empty { text-align: center; padding: 2rem 1rem; opacity: .7; }
.mg-loop-hint { margin: .75rem 0 0; font-size: .85rem; opacity: .6; text-align: center; }

/* ---- v0.18 · Popup ---- */
.mg-popup { position: fixed; z-index: 99999; box-sizing: border-box; background: var(--mg-c-bg, #fff); color: var(--mg-c-ink, #0f172a); width: min(var(--mg-pw, 560px), calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain; border-radius: 18px; padding: 2rem; box-shadow: 0 30px 80px -20px rgba(15, 23, 42, .45); opacity: 0; visibility: hidden; transition: opacity .28s ease, transform .32s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .32s; --mg-pt: translate(0, 0); transform: var(--mg-pt) var(--mg-pa, none); }
.mg-popup[hidden] { display: none; }
.mg-popup.is-open { opacity: 1; visibility: visible; transform: var(--mg-pt); transition-delay: 0s; }
.mg-popup:focus { outline: none; }
.mg-popup.is-pos-center { top: 50%; left: 50%; --mg-pt: translate(-50%, -50%); }
.mg-popup.is-pos-top { top: 16px; left: 50%; --mg-pt: translate(-50%, 0); }
.mg-popup.is-pos-bottom { bottom: 16px; left: 50%; --mg-pt: translate(-50%, 0); }
.mg-popup.is-pos-bottom-right { bottom: 16px; right: 16px; }
.mg-popup.is-pos-bottom-left { bottom: 16px; left: 16px; }
.mg-popup.is-pos-left, .mg-popup.is-pos-right { top: 0; bottom: 0; height: 100vh; height: 100dvh; max-height: none; width: min(var(--mg-pw, 560px), 100vw); border-radius: 0; }
.mg-popup.is-pos-left { left: 0; }
.mg-popup.is-pos-right { right: 0; }
.mg-popup.is-anim-zoom { --mg-pa: scale(.9); }
.mg-popup.is-anim-up { --mg-pa: translateY(48px); }
.mg-popup.is-anim-down { --mg-pa: translateY(-48px); }
.mg-popup.is-anim-left { --mg-pa: translateX(-64px); }
.mg-popup.is-anim-right { --mg-pa: translateX(64px); }
.mg-popup-x { position: absolute; top: .75rem; right: .75rem; z-index: 2; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; padding: 0; border: 0; border-radius: 50%; background: rgba(15, 23, 42, .07); color: inherit; cursor: pointer; transition: background .2s, transform .2s; }
.mg-popup-x:hover { background: rgba(15, 23, 42, .16); transform: rotate(90deg); }
.mg-popup-x:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.mg-popup-body > :first-child { margin-top: 0; }
.mg-popup-body > :last-child { margin-bottom: 0; }
.mg-popup-ov { position: fixed; inset: 0; z-index: 99998; opacity: 0; transition: opacity .28s ease; }
.mg-popup-ov.is-open { opacity: 1; }
.mg-popup.is-edit, .mg-popup.is-edit[class*="is-pos-"] { position: relative; inset: auto; height: auto; max-height: none; overflow: visible; opacity: 1; visibility: visible; transform: none; width: auto; max-width: 720px; margin: 2rem auto; border-radius: 18px; outline: 2px dashed #d6249f; outline-offset: 4px; }
.mg-popup-tag { position: absolute; top: -.85rem; left: .75rem; padding: .15rem .6rem; border-radius: 6px; background: #d6249f; color: #fff; font: 600 11px/1.5 system-ui, sans-serif; letter-spacing: .02em; }
.mg-popup-empty { text-align: center; opacity: .6; padding: 1.5rem 0; }
@media (prefers-reduced-motion: reduce) { .mg-popup, .mg-popup-ov { transition: none; } }

/* ===== Autor ===== */
.mg-author { display: flex; gap: 1.1rem; align-items: flex-start; --mg-av: 88px; }
.mg-author-av { flex: 0 0 auto; display: block; width: var(--mg-av); height: var(--mg-av); border-radius: 999px; overflow: hidden; background: var(--mg-c-soft, #f1f5f9); }
.mg-author-av img, .mg-author-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mg-author-txt { min-width: 0; display: flex; flex-direction: column; gap: .35rem; }
.mg-author-pre { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .65; }
.mg-author-name { margin: 0; font-size: 1.25rem; line-height: 1.2; }
.mg-author-name a, .mg-author-txt > a { color: inherit; text-decoration: none; }
.mg-author-count { font-size: .85rem; opacity: .7; }
.mg-author-bio { margin: .25rem 0 0; line-height: 1.65; opacity: .85; }
.mg-author-links { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: .25rem 0 0; padding: 0; list-style: none; font-size: .9rem; }
.mg-author-links a { color: var(--mg-c-primary, #2563eb); font-weight: 600; text-decoration: none; }
.mg-author-links a:hover { text-decoration: underline; }
.mg-author-btn { align-self: flex-start; margin-top: .6rem; }
.mg-author.is-card { padding: 1.5rem; border: 1px solid var(--mg-c-line, #e2e8f0); border-radius: 20px; background: var(--mg-c-white, #fff); }
.mg-author.is-center { flex-direction: column; align-items: center; text-align: center; }
.mg-author.is-center .mg-author-txt { align-items: center; }
.mg-author.is-center .mg-author-links { justify-content: center; }
.mg-author.is-byline { align-items: center; gap: .75rem; }
.mg-author.is-byline .mg-author-txt { flex-direction: column; gap: .1rem; }
.mg-author.is-byline .mg-author-pre { font-size: .72rem; }
.mg-author.is-byline a { font-weight: 700; color: inherit; text-decoration: none; }
.mg-author-meta { font-size: .85rem; opacity: .7; }
.mg-author-av.is-sample { background: linear-gradient(135deg, var(--mg-c-primary, #2563eb), var(--mg-c-accent, #7c3aed)); opacity: .5; }
@media (max-width: 560px) { .mg-author.is-card, .mg-author.is-row { flex-direction: column; } }
/* ===== Volver arriba ===== */
.mg-btt { --mg-bs: 48px; --mg-bo: 24px; position: fixed; bottom: var(--mg-bo); z-index: 90; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-width: var(--mg-bs); height: var(--mg-bs); padding: 0; border: 0; cursor: pointer; font: inherit; font-weight: 700; color: var(--mg-c-white, #fff); background: var(--mg-c-ink, #0f172a); box-shadow: 0 10px 28px -10px rgba(15, 23, 42, .5); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .25s, transform .25s, visibility .25s; }
.mg-btt.is-right { right: var(--mg-bo); }
.mg-btt.is-left { left: var(--mg-bo); }
.mg-btt.is-center { left: 50%; margin-left: calc(var(--mg-bs) / -2); }
.mg-btt.is-circle { width: var(--mg-bs); border-radius: 999px; }
.mg-btt.is-square { width: var(--mg-bs); border-radius: 14px; }
.mg-btt.is-pill { padding: 0 1.2rem; border-radius: 999px; }
.mg-btt.is-center.is-pill { margin-left: 0; transform: translate(-50%, 12px); }
.mg-btt.is-on { opacity: 1; visibility: visible; transform: none; }
.mg-btt.is-center.is-pill.is-on { transform: translate(-50%, 0); }
.mg-btt:hover { background: var(--mg-c-primary, #2563eb); }
.mg-btt:focus-visible { outline: 3px solid var(--mg-c-primary, #2563eb); outline-offset: 3px; }
.mg-btt-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
.mg-btt-trk { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 2; }
.mg-btt-bar { fill: none; stroke: var(--mg-c-primary, #2563eb); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .1s linear; }
.mg-btt:hover .mg-btt-bar { stroke: var(--mg-c-white, #fff); }
.mg-btt.is-edit { position: relative; inset: auto; opacity: 1; visibility: visible; transform: none; margin: 0; display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; width: auto; height: auto; min-width: 0; background: transparent; box-shadow: none; color: inherit; }
.mg-btt.is-edit .mg-btt-demo { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-width: var(--mg-bs); height: var(--mg-bs); padding: 0 .6rem; border-radius: 999px; color: #fff; background: var(--mg-c-ink, #0f172a); }
.mg-btt.is-edit.is-square .mg-btt-demo { border-radius: 14px; }
.mg-btt-tag { font-size: .78rem; opacity: .65; font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .mg-btt { transition: opacity .01s; transform: none !important; } .mg-btt.is-center.is-pill { transform: translateX(-50%) !important; } }

/* ============================================================
   0.21 · Movimiento y formas
   ============================================================ */

/* ---------- divisores de forma ---------- */
.mg-has-dv { position: relative; }
.mg-dv { position: absolute; left: 0; width: 100%; height: var(--dvh, 80px); fill: var(--dvc, var(--mg-c-white, #fff)); pointer-events: none; z-index: 1; display: block; }
.mg-dv.is-front { z-index: 5; }
.mg-dv-t { top: -1px; }
.mg-dv-b { bottom: -1px; }
.mg-dv.is-fx { transform: scaleX(-1); }
.mg-dv.is-fy { transform: scaleY(-1); }
.mg-dv.is-fx.is-fy { transform: scale(-1, -1); }
@media (max-width: 767px) { .mg-dv { height: calc(var(--dvh, 80px) * .55); } }

/* ---------- máscara ---------- */
.mg-mask { position: relative; width: 100%; aspect-ratio: var(--mk-r, 1/1); isolation: isolate; }
.mg-mask.has-shadow { filter: drop-shadow(0 22px 28px rgba(15, 23, 42, .28)); }
.mg-mask-in { position: relative; width: 100%; height: 100%; overflow: hidden;
	-webkit-mask-image: var(--mk); mask-image: var(--mk); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center;
	transform: scale(var(--mk-x, 1), var(--mk-y, 1)); }
.mg-mask-in > * { transform: scale(var(--mk-x, 1), var(--mk-y, 1)); }
.mg-mask-in > img, .mg-mask-in > video, .mg-mask-in > picture, .mg-mask-in > figure, .mg-mask-in > div, .mg-mask-in > a { width: 100%; height: 100%; display: block; }
.mg-mask-in img, .mg-mask-in video { width: 100%; height: 100%; object-fit: var(--mk-fit, cover); display: block; }
.mg-mask[style*="--mk-r:auto"] { aspect-ratio: auto; }
.mg-mask[style*="--mk-r:auto"] .mg-mask-in > * { height: auto; }
.mg-mask.has-back::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--mk-bg, var(--mg-c-primary, #6366f1));
	-webkit-mask-image: var(--mk); mask-image: var(--mk); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	transform: translate(var(--mk-bx, 8%), var(--mk-by, 8%)) scale(var(--mk-x, 1), var(--mk-y, 1)); }

/* ---------- tabla de contenidos ---------- */
.mg-toc { --c: var(--mg-toc-c, var(--mg-c-primary, #6366f1)); font-size: .94rem; line-height: 1.4; }
.mg-toc.is-wait .mg-toc-l:empty { display: none; }
.mg-toc.is-empty { display: none; }
.mg-toc-h { margin: 0 0 10px; font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mg-c-muted, #64748b); }
.mg-toc-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mg-toc-l a { display: block; padding: 6px 12px; color: var(--mg-c-text, #334155); text-decoration: none; border-radius: 8px; transition: color .15s, background-color .15s, border-color .15s; overflow-wrap: anywhere; }
.mg-toc-l a:hover { color: var(--c); }
.mg-toc-l li[data-lv="3"] a { padding-left: 28px; font-size: .9em; }
.mg-toc-l li[data-lv="4"] a { padding-left: 44px; font-size: .86em; }
.mg-toc-l li[data-lv="5"] a, .mg-toc-l li[data-lv="6"] a { padding-left: 58px; font-size: .84em; }
.mg-toc-l li[data-lv="1"] a { font-weight: 700; }
.mg-toc-l li.is-on > a { color: var(--c); font-weight: 600; }
.mg-toc.is-num .mg-toc-l a::before { content: attr(data-n) " "; color: var(--mg-c-muted, #64748b); font-variant-numeric: tabular-nums; margin-right: .35em; }
.mg-toc.is-line .mg-toc-l { border-left: 2px solid var(--mg-c-line, #e2e8f0); gap: 0; }
.mg-toc.is-line .mg-toc-l a { border-radius: 0; margin-left: -2px; border-left: 2px solid transparent; }
.mg-toc.is-line .mg-toc-l li.is-on > a { border-left-color: var(--c); background: color-mix(in srgb, var(--c) 8%, transparent); }
.mg-toc.is-boxed { padding: 20px; background: var(--mg-c-white, #fff); border: 1px solid var(--mg-c-line, #e2e8f0); border-radius: 18px; box-shadow: 0 18px 40px -28px rgba(15, 23, 42, .3); }
.mg-toc.is-boxed .mg-toc-l li.is-on > a { background: color-mix(in srgb, var(--c) 12%, transparent); }
.mg-toc.is-pills .mg-toc-l { display: flex; flex-wrap: wrap; gap: 8px; }
.mg-toc.is-pills .mg-toc-l a { padding: 7px 16px; border: 1px solid var(--mg-c-line, #e2e8f0); border-radius: 999px; background: var(--mg-c-white, #fff); }
.mg-toc.is-pills .mg-toc-l li[data-lv] a { padding-left: 16px; font-size: .92em; }
.mg-toc.is-pills .mg-toc-l li.is-on > a { background: var(--c); border-color: var(--c); color: #fff; }
.mg-toc.is-sticky { position: sticky; top: var(--mg-toc-top, 96px); max-height: calc(100vh - var(--mg-toc-top, 96px) - 16px); overflow: auto; }
.mg-toc-fold { display: none; }
@media (max-width: 767px) {
	.mg-toc[data-fold="1"] .mg-toc-h { cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
	.mg-toc[data-fold="1"] .mg-toc-h::after { content: "+"; font-size: 1.2rem; letter-spacing: 0; }
	.mg-toc[data-fold="1"].is-open .mg-toc-h::after { content: "–"; }
	.mg-toc[data-fold="1"]:not(.is-open) .mg-toc-l { display: none; }
	.mg-toc.is-sticky { position: static; max-height: none; }
}

/* ---------- texto animado ---------- */
.mg-split { --hl: var(--mg-sw-hl, var(--mg-c-accent, #f59e0b)); }
.mg-sw-w { display: inline-block; white-space: nowrap; }
.mg-sw-w.is-hl { color: var(--hl); }
.mg-sw-i { display: inline-block; }
.mg-sw-c { display: inline-block; }
.mg-split.is-rise .mg-sw-w:not(.by-chars) { overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.mg-split.is-tilt { perspective: 700px; }
html.mgm-on .mg-split:not(.is-in).is-rise .mg-sw-i, html.mgm-on .mg-split:not(.is-in).is-rise .mg-sw-c { transform: translateY(110%); }
html.mgm-on .mg-split:not(.is-in).is-fade .mg-sw-i, html.mgm-on .mg-split:not(.is-in).is-fade .mg-sw-c { opacity: 0; }
html.mgm-on .mg-split:not(.is-in).is-blur .mg-sw-i, html.mgm-on .mg-split:not(.is-in).is-blur .mg-sw-c { opacity: 0; filter: blur(10px); }
html.mgm-on .mg-split:not(.is-in).is-scale .mg-sw-i, html.mgm-on .mg-split:not(.is-in).is-scale .mg-sw-c { opacity: 0; transform: scale(.4); }
html.mgm-on .mg-split:not(.is-in).is-tilt .mg-sw-i, html.mgm-on .mg-split:not(.is-in).is-tilt .mg-sw-c { opacity: 0; transform: rotateX(-80deg) translateY(.3em); }
html.mgm-on .mg-split.is-rise .mg-sw-i, html.mgm-on .mg-split.is-rise .mg-sw-c,
html.mgm-on .mg-split.is-fade .mg-sw-i, html.mgm-on .mg-split.is-fade .mg-sw-c,
html.mgm-on .mg-split.is-blur .mg-sw-i, html.mgm-on .mg-split.is-blur .mg-sw-c,
html.mgm-on .mg-split.is-scale .mg-sw-i, html.mgm-on .mg-split.is-scale .mg-sw-c,
html.mgm-on .mg-split.is-tilt .mg-sw-i, html.mgm-on .mg-split.is-tilt .mg-sw-c { transition: transform .8s cubic-bezier(.2, .8, .2, 1), opacity .7s ease, filter .7s ease; transition-delay: calc(var(--i, 0) * var(--mg-sw-st, 60ms)); transform-origin: 50% 100%; }
/* llenarse de color con el scroll */
html.mgm-on .mg-split.is-fill .mg-sw-i { color: color-mix(in srgb, currentColor calc(var(--f, 0) * 100%), var(--mg-sw-dim, color-mix(in srgb, currentColor 18%, transparent))); }
html.mgm-on .mg-split.is-fill .mg-sw-w.is-hl .mg-sw-i { color: color-mix(in srgb, var(--hl) calc(var(--f, 0) * 100%), var(--mg-sw-dim, color-mix(in srgb, currentColor 18%, transparent))); }

/* ---------- tarjetas apiladas ---------- */
.mg-stack { display: flex; flex-direction: column; gap: var(--sg, 40px); }
.mg-stack > * { position: sticky; top: var(--st, 90px); transform-origin: 50% 0; transition: transform .25s ease; }
.mg-stack > :nth-child(2) { top: calc(var(--st, 90px) + 1 * var(--ss, 22px)); }
.mg-stack > :nth-child(3) { top: calc(var(--st, 90px) + 2 * var(--ss, 22px)); }
.mg-stack > :nth-child(4) { top: calc(var(--st, 90px) + 3 * var(--ss, 22px)); }
.mg-stack > :nth-child(5) { top: calc(var(--st, 90px) + 4 * var(--ss, 22px)); }
.mg-stack > :nth-child(6) { top: calc(var(--st, 90px) + 5 * var(--ss, 22px)); }
.mg-stack > :nth-child(7) { top: calc(var(--st, 90px) + 6 * var(--ss, 22px)); }
.mg-stack > :nth-child(8) { top: calc(var(--st, 90px) + 7 * var(--ss, 22px)); }
.mg-stack > :nth-child(n+9) { top: calc(var(--st, 90px) + 8 * var(--ss, 22px)); }
.mg-stack > .is-under { transform: scale(var(--us, .96)); }
@media (max-width: 767px) { .mg-stack > * { position: relative; top: auto !important; transform: none !important; } }

/* ---------- escena fija con scroll ---------- */
.mg-pin-stage { display: flex; flex-direction: column; gap: 32px; }
.mg-pin-dots, .mg-pin-bar { display: none; }
html.mgm-on .mg-pin { height: calc(var(--n, 3) * var(--ph, 90vh) + 100vh - var(--ph, 90vh)); position: relative; }
html.mgm-on .mg-pin-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
html.mgm-on .mg-pin-stage { display: grid; flex: 1; gap: 0; }
html.mgm-on .mg-pin-stage > * { grid-area: 1 / 1; min-width: 0; align-self: stretch; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .6s ease, transform .7s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .7s, clip-path .8s cubic-bezier(.7, 0, .2, 1); }
html.mgm-on .mg-pin-stage > .is-on { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
html.mgm-on .mg-pin.is-slide .mg-pin-stage > * { transform: translateY(60px); }
html.mgm-on .mg-pin.is-slide .mg-pin-stage > .is-past { transform: translateY(-60px); }
html.mgm-on .mg-pin.is-slide .mg-pin-stage > .is-on { transform: none; }
html.mgm-on .mg-pin.is-zoom .mg-pin-stage > * { transform: scale(.92); }
html.mgm-on .mg-pin.is-zoom .mg-pin-stage > .is-past { transform: scale(1.08); }
html.mgm-on .mg-pin.is-zoom .mg-pin-stage > .is-on { transform: none; }
html.mgm-on .mg-pin.is-wipe .mg-pin-stage > * { opacity: 1; clip-path: inset(0 0 100% 0); }
html.mgm-on .mg-pin.is-wipe .mg-pin-stage > .is-past, html.mgm-on .mg-pin.is-wipe .mg-pin-stage > .is-on { clip-path: inset(0); visibility: visible; }
html.mgm-on .mg-pin.is-wipe .mg-pin-stage > .is-on { z-index: 2; }
html.mgm-on .mg-pin-dots { display: flex; position: absolute; right: max(16px, env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%); flex-direction: column; gap: 10px; z-index: 5; }
html.mgm-on .mg-pin-dots i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: .25; transition: opacity .3s, transform .3s, background-color .3s; cursor: pointer; }
html.mgm-on .mg-pin-dots i.is-on { opacity: 1; transform: scale(1.5); background: var(--mg-pin-c, var(--mg-c-primary, #6366f1)); }
html.mgm-on .mg-pin-bar { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: color-mix(in srgb, currentColor 14%, transparent); z-index: 5; }
html.mgm-on .mg-pin-bar i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--mg-pin-c, var(--mg-c-primary, #6366f1)); }

/* ---------- galería horizontal con scroll ---------- */
.mg-hs-track { display: flex; gap: var(--hg, 24px); overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 8px; }
.mg-hs-track > * { flex: 0 0 min(var(--hw, 420px), 82vw); min-width: 0; scroll-snap-align: start; }
.mg-hs-bar { display: none; }
@media (min-width: 768px) {
	html.mgm-on .mg-hs { position: relative; }
	html.mgm-on .mg-hs-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; }
	html.mgm-on .mg-hs.is-mid .mg-hs-sticky { justify-content: center; }
	html.mgm-on .mg-hs-track { overflow: visible; scroll-snap-type: none; width: max-content; padding-bottom: 0; will-change: transform; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
	html.mgm-on .mg-hs-track > * { flex-basis: var(--hw, 420px); }
	html.mgm-on .mg-hs-bar { display: block; position: absolute; left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); bottom: 28px; height: 4px; border-radius: 4px; background: color-mix(in srgb, currentColor 14%, transparent); }
	html.mgm-on .mg-hs-bar i { display: block; height: 100%; border-radius: 4px; width: calc(var(--p, 0) * 100%); background: var(--mg-hs-c, var(--mg-c-primary, #6366f1)); }
}

/* ---------- formas decorativas ---------- */
.mg-shape { --c1: var(--mg-c-primary, #6366f1); --c2: var(--mg-c-accent, #ec4899); width: var(--sz, 320px); height: var(--sz, 320px); opacity: var(--op, 1); pointer-events: none; flex-shrink: 0; position: relative; color: var(--c1); }
.mg-shape.is-blob { background: linear-gradient(135deg, var(--c1), var(--c2)); border-radius: 62% 38% 46% 54% / 55% 45% 55% 45%; }
.mg-shape.is-circle { background: linear-gradient(135deg, var(--c1), var(--c2)); border-radius: 50%; }
.mg-shape.is-ring { border: calc(var(--sz, 320px) * .07) solid var(--c1); border-radius: 50%; }
.mg-shape.is-dots { background-image: radial-gradient(var(--c1) 22%, transparent 24%); background-size: 22px 22px; }
.mg-shape.is-grid { background-image: linear-gradient(var(--c1) 1px, transparent 1px), linear-gradient(90deg, var(--c1) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent 100%); mask-image: radial-gradient(closest-side, #000 40%, transparent 100%); }
.mg-shape.is-squiggle { height: calc(var(--sz, 320px) * .2); }
.mg-shape.is-squiggle svg { width: 100%; height: 100%; display: block; }
.mg-shape.is-star { background: linear-gradient(135deg, var(--c1), var(--c2)); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.mg-shape.is-spark { background: linear-gradient(135deg, var(--c1), var(--c2)); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }
.mg-shape.is-glow { background: radial-gradient(closest-side, color-mix(in srgb, var(--c1) 70%, transparent), color-mix(in srgb, var(--c2) 25%, transparent) 60%, transparent 100%); filter: blur(24px); border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) {
	.mg-shape.mv-float { animation: mgm-float 7s ease-in-out infinite; }
	.mg-shape.mv-spin { animation: mgm-spin 40s linear infinite; }
	.mg-shape.mv-pulse { animation: mgm-pulse 4s ease-in-out infinite; }
	.mg-shape.mv-morph.is-blob, .mg-shape.is-blob.mv-float { animation-name: mgm-morph, mgm-float; animation-duration: 9s, 7s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
	.mg-shape.is-blob.mv-morph { animation-name: mgm-morph; animation-duration: 9s; }
	.mg-shape.mv-morph:not(.is-blob) { animation: mgm-pulse 6s ease-in-out infinite; }
}
@keyframes mgm-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -18px; } }
@keyframes mgm-spin { to { rotate: 360deg; } }
@keyframes mgm-pulse { 0%, 100% { scale: 1; } 50% { scale: 1.08; } }
@keyframes mgm-morph { 0%, 100% { border-radius: 62% 38% 46% 54% / 55% 45% 55% 45%; } 33% { border-radius: 38% 62% 55% 45% / 45% 58% 42% 55%; } 66% { border-radius: 52% 48% 38% 62% / 62% 40% 60% 38%; } }

/* ======================================================================
   0.22 · precio, acordeón, carrusel avanzado, lista con iconos, PDF revista
   ====================================================================== */

/* ---------- precio ---------- */
.mg-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--pr-gap, 10px); }
.mg-price.is-stack { flex-direction: column; align-items: flex-start; gap: calc(var(--pr-gap, 10px) * .3); }
.mg-price del, .mg-price ins { text-decoration: none; background: none; }
.mg-price .mg-price-old { text-decoration: line-through; font-size: calc(1em * var(--pr-old, .8)); opacity: .62; color: var(--pr-oc, inherit); }
.mg-price .mg-price-old * { text-decoration: line-through; }
.mg-price .mg-price-now { font-weight: 700; }
.mg-price .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mg-price-badge { align-self: center; font-size: .72em; font-weight: 700; line-height: 1; padding: .3em .6em; border-radius: 999px; color: #fff; background: var(--pr-bb, var(--mg-c-primary, #e11d48)); }
/* en cualquier lugar donde WooCommerce imprima «El precio original era… / El precio actual es…» */
.mg-el .screen-reader-text, .mago-wc__price .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mg-el .price del, .mg-el .mg-p-price del { opacity: .6; text-decoration: line-through; margin-right: .45em; font-size: .85em; }
.mg-el .price ins, .mg-el .mg-p-price ins { text-decoration: none; background: none; font-weight: 700; }

/* ---------- acordeón ---------- */
.mg-acc-body { display: flex; flex-direction: column; gap: .75rem; }
.mg-acc-body:empty::before { content: "Suelta aquí lo que quieras"; font-size: 12px; color: rgba(224, 62, 137, .8); }

/* ---------- carrusel avanzado ---------- */
.mg-sl { --sl-n: 3; --sl-gap: 20px; --sl-w: calc((100cqw - (var(--sl-n) - 1) * var(--sl-gap)) / var(--sl-n)); position: relative; width: 100%; min-width: 0; }
.mg-sl-vp { container-type: inline-size; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-block: 14px; margin-block: -14px; outline-offset: 2px; overscroll-behavior-x: contain; }
.mg-sl-vp::-webkit-scrollbar { display: none; }
.mg-sl-track { display: flex; gap: var(--sl-gap); position: relative; width: 100%; min-width: 0; }
.mg-sl-track > .mg-slide { flex: 0 0 calc((100% - (var(--sl-n) - 1) * var(--sl-gap)) / var(--sl-n)); flex-basis: var(--sl-w); min-width: 0; scroll-snap-align: start; box-sizing: border-box; }
.mg-sl:not(.is-equal) .mg-sl-track { align-items: flex-start; }
.mg-sl.is-focus .mg-sl-track { padding-inline: calc((100cqw - var(--sl-w)) / 2); width: max-content; min-width: 100%; }
.mg-sl.is-focus .mg-sl-track > .mg-slide { scroll-snap-align: center; transition: opacity .35s, scale .35s; }
.mg-sl.is-focus.is-js .mg-sl-track > .mg-slide:not(.is-active) { opacity: .45; scale: .92; }
/* fundido: una a la vez, apiladas */
.mg-sl.is-fade { --sl-n: 1; }
.mg-sl.is-fade.is-js .mg-sl-vp { overflow: hidden; scroll-snap-type: none; }
.mg-sl.is-fade.is-js .mg-sl-track { display: grid; grid-template-columns: minmax(0, 1fr); }
.mg-sl.is-fade.is-js .mg-sl-track > .mg-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s; }
.mg-sl.is-fade.is-js .mg-sl-track > .mg-slide.is-active { opacity: 1; visibility: visible; }
/* controles */
.mg-sl-btn { position: absolute; top: calc(50% - 14px); translate: 0 -50%; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: #fff; color: #0f172a; box-shadow: 0 6px 20px -6px rgba(15, 23, 42, .4); transition: opacity .2s, scale .2s; }
.mg-sl-btn.is-prev { left: 8px; }
.mg-sl-btn.is-prev svg { rotate: 180deg; }
.mg-sl-btn.is-next { right: 8px; }
.mg-sl-btn svg { width: 20px; height: 20px; }
.mg-sl-btn:hover:not(:disabled) { scale: 1.08; }
.mg-sl-btn:disabled { opacity: .35; cursor: default; }
.mg-sl-btn:focus-visible, .mg-sl-ui button:focus-visible { outline: 2px solid var(--sl-a, var(--mg-c-primary, #6366f1)); outline-offset: 2px; }
.mg-sl-ui { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 18px; }
.mg-sl-ui button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: color-mix(in srgb, currentColor 25%, transparent); transition: width .25s, background-color .25s; }
.mg-sl-ui button.is-on { width: 26px; border-radius: 9px; background: var(--sl-a, var(--mg-c-primary, #6366f1)); }
.mg-sl-ui.is-bar { height: 4px; border-radius: 4px; background: color-mix(in srgb, currentColor 14%, transparent); overflow: hidden; justify-content: flex-start; gap: 0; }
.mg-sl-ui.is-bar i { display: block; height: 100%; width: 0; background: var(--sl-a, var(--mg-c-primary, #6366f1)); transition: width .3s; }
.mg-sl-ui.is-count { font-size: .9rem; font-variant-numeric: tabular-nums; opacity: .75; }
/* en el editor se ven todas las diapositivas a la vez para poder editarlas */
.mg-sl.is-edit .mg-sl-vp { overflow: visible; container-type: normal; }
.mg-sl.is-edit .mg-sl-track { flex-wrap: wrap; row-gap: var(--sl-gap); }
.mg-sl.is-edit .mg-sl-track > .mg-slide { flex-basis: calc((100% - (var(--sl-n) - 1) * var(--sl-gap)) / var(--sl-n)); outline: 1px dashed rgba(99, 102, 241, .5); outline-offset: 2px; min-height: 60px; }

/* ---------- lista con iconos ---------- */
.mg-il { --il-n: 2; --il-s: 26px; --il-gap: 20px; --il-a: currentColor; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--il-n), minmax(0, 1fr)); gap: var(--il-gap); }
.mg-il-item { display: flex; align-items: center; gap: .9rem; min-width: 0; margin: 0; padding: 0; }
.mg-il-i { flex: none; display: inline-grid; place-items: center; color: var(--il-a); width: var(--il-s); height: var(--il-s); }
.mg-il-i svg { width: 100%; height: 100%; display: block; }
.mg-il-i img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 6px; }
.mg-il-i.is-circle, .mg-il-i.is-square, .mg-il-i.is-soft { width: calc(var(--il-s) * 1.9); height: calc(var(--il-s) * 1.9); padding: calc(var(--il-s) * .45); box-sizing: border-box; }
.mg-il-i.is-circle { border-radius: 50%; background: color-mix(in srgb, var(--il-a) 14%, transparent); }
.mg-il-i.is-square { border-radius: 14px; background: color-mix(in srgb, var(--il-a) 14%, transparent); }
.mg-il-i.is-soft { border-radius: 14px; background: color-mix(in srgb, currentColor 7%, transparent); }
.mg-il-i.is-circle img, .mg-il-i.is-square img, .mg-il-i.is-soft img { padding: 0; }
.mg-il-b { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.mg-il-t { margin: 0; font-weight: 600; line-height: 1.35; font-size: 1em; overflow-wrap: anywhere; }
.mg-il-d { margin: 0; opacity: .7; font-size: .92em; line-height: 1.55; }
.mg-il-item.is-off .mg-il-t { text-decoration: line-through; opacity: .55; }
.mg-il-item.is-off .mg-il-i { opacity: .45; }
.mg-il.has-div .mg-il-item { padding-bottom: var(--il-gap); border-bottom: 1px solid var(--mago-line, rgba(100, 116, 139, .25)); }
/* filas: icono, título y descripción */
.mg-il.is-rows { grid-template-columns: repeat(var(--il-n), minmax(0, 1fr)); }
.mg-il.is-rows .mg-il-item { align-items: flex-start; gap: 1.1rem; }
.mg-il.is-rows .mg-il-t { font-size: 1.05em; }
/* franja: etiqueta arriba, cifra grande en medio e icono abajo, separadas por líneas */
.mg-il.is-strip { gap: 0; }
.mg-il.is-strip .mg-il-item { flex-direction: column; align-items: center; justify-content: space-between; text-align: center; padding: 0 1.1rem; gap: .9rem; border-left: 1px solid var(--mago-line, rgba(100, 116, 139, .3)); }
.mg-il.is-strip .mg-il-item:first-child { border-left: 0; }
.mg-il.is-strip .mg-il-b { align-items: center; }
.mg-il.is-strip .mg-il-t { font-size: .85em; font-weight: 600; opacity: .8; }
.mg-il.is-strip .mg-il-d { font-size: 1.7em; font-weight: 700; opacity: 1; line-height: 1.1; }
/* etiquetas */
.mg-il.is-chips { display: flex; flex-wrap: wrap; }
.mg-il.is-chips .mg-il-item { gap: .5rem; padding: .5rem .95rem .5rem .75rem; border: 1px solid var(--mago-line, rgba(100, 116, 139, .3)); border-radius: 999px; }
.mg-il.is-chips .mg-il-i, .mg-il.is-chips .mg-il-i.is-circle, .mg-il.is-chips .mg-il-i.is-square, .mg-il.is-chips .mg-il-i.is-soft { width: 1.2em; height: 1.2em; padding: 0; background: none; }
.mg-il.is-chips .mg-il-d { display: none; }
.mg-il.is-chips .mg-il-t { font-weight: 500; }
/* tarjetas */
.mg-il.is-cards .mg-il-item { flex-direction: column; align-items: flex-start; gap: .8rem; padding: 1.4rem; border: 1px solid var(--mago-line, rgba(100, 116, 139, .25)); border-radius: 18px; background: var(--mg-c-white, #fff); }
/* marcas */
.mg-il.is-check .mg-il-item { align-items: flex-start; gap: .65rem; }
.mg-il.is-check .mg-il-i { margin-top: .12em; }
/* icono grande a la izquierda */
.mg-il.is-media .mg-il-item { align-items: center; gap: 1.2rem; }
.mg-il.is-media .mg-il-i { width: calc(var(--il-s) * 2.4); height: calc(var(--il-s) * 2.4); }
.mg-il.is-media .mg-il-t { font-size: 1.15em; }
html.mgp-on [data-mgfx-item] { opacity: 0; transition: opacity .6s ease var(--d, 0ms), translate .6s ease var(--d, 0ms), scale .6s ease var(--d, 0ms); }
html.mgp-on [data-mgfx-item="from-bottom"] { translate: 0 22px; }
html.mgp-on [data-mgfx-item="zoom-in"] { scale: .9; }
html.mgp-on [data-mgfx-item].is-in { opacity: 1; translate: 0 0; scale: 1; }
@media (max-width: 640px) { .mg-il.is-strip .mg-il-item { border-left: 0; padding: .75rem 0; border-top: 1px solid var(--mago-line, rgba(100, 116, 139, .3)); } .mg-il.is-strip .mg-il-item:first-child { border-top: 0; } }

/* ---------- PDF tipo revista ---------- */
.mg-fb { --fb-h: 640px; position: relative; width: 100%; box-sizing: border-box; padding: 20px 12px; border-radius: 16px; background: var(--fb-bg, color-mix(in srgb, currentColor 6%, transparent)); display: flex; flex-direction: column; align-items: center; gap: 16px; overflow: hidden; }
.mg-fb-stage { width: 100%; display: flex; justify-content: center; overflow: hidden; padding: 6px 0 14px; }
.mg-fb-book { position: relative; perspective: 2600px; transition: transform .7s cubic-bezier(.45, .05, .2, 1); touch-action: pan-y; cursor: pointer; -webkit-user-select: none; user-select: none; }
.mg-fb-leaf { position: absolute; left: 50%; top: 0; width: var(--pw); height: var(--ph); transform-origin: left center; transform-style: preserve-3d; transition: transform .85s cubic-bezier(.45, .05, .2, 1); }
.mg-fb-leaf.is-flipped { transform: rotateY(-180deg); }
.mg-fb-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #fff; overflow: hidden; box-shadow: 0 10px 30px -14px rgba(15, 23, 42, .55); display: grid; place-items: center; }
.mg-fb-face.is-b { transform: rotateY(180deg); }
.mg-fb-face canvas { width: 100%; height: 100%; object-fit: contain; display: block; }
.mg-fb-face::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0) 9%); }
.mg-fb-face.is-b::after { background: linear-gradient(to left, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0) 9%); }
.mg-fb-face.is-blank { background: transparent; box-shadow: none; }
.mg-fb-face.is-blank::after { display: none; }
.mg-fb-load { width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgba(100, 116, 139, .3); border-top-color: var(--fb-a, var(--mg-c-primary, #6366f1)); animation: mgp-spin .8s linear infinite; }
@keyframes mgp-spin { to { rotate: 360deg; } }
.mg-fb-leaf.is-one { left: 0; transform-origin: center; transform-style: flat; transition: opacity .18s, translate .18s; }
.mg-fb-leaf.is-one .mg-fb-face::after { display: none; }
.mg-fb-leaf.out-l { opacity: 0; translate: -26px 0; }
.mg-fb-leaf.out-r { opacity: 0; translate: 26px 0; }
.mg-fb-leaf.in-r { transition: none; opacity: 0; translate: 26px 0; }
.mg-fb-leaf.in-l { transition: none; opacity: 0; translate: -26px 0; }
.mg-sl-btn[hidden], .mg-sl-ui[hidden], .mg-fb-bar[hidden] { display: none; }
.mg-fb-bar { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 999px; background: rgba(15, 23, 42, .88); color: #fff; font-size: .9rem; }
.mg-fb-bar button, .mg-fb-bar a { appearance: none; border: 0; background: transparent; color: inherit; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: inherit; font-size: 1.15rem; line-height: 1; cursor: pointer; text-decoration: none; }
.mg-fb-bar button:hover:not(:disabled), .mg-fb-bar a:hover { background: rgba(255, 255, 255, .16); }
.mg-fb-bar button:disabled { opacity: .35; cursor: default; }
.mg-fb-bar button:focus-visible, .mg-fb-bar a:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.mg-fb-n { min-width: 74px; text-align: center; font-variant-numeric: tabular-nums; }
.mg-fb-fallback { margin: 0; font-size: .9rem; }
.mg-fb-fallback[hidden] { display: none; }
.mg-fb.is-ready .mg-fb-fallback { display: none; }
.mg-fb.is-wait .mg-fb-stage { min-height: calc(var(--fb-h) * .5); align-items: center; }
.mg-fb.is-wait .mg-fb-stage::before { content: ""; width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(100, 116, 139, .3); border-top-color: var(--fb-a, var(--mg-c-primary, #6366f1)); animation: mgp-spin .8s linear infinite; }
.mg-fb.is-fail .mg-fb-stage { display: none; }
.mg-fb.is-full { position: fixed; inset: 0; z-index: 99999; border-radius: 0; justify-content: center; background: var(--fb-bg, #0f172a); }
.mg-fb:fullscreen { justify-content: center; border-radius: 0; background: var(--fb-bg, #0f172a); }
.mg-fb.is-empty { min-height: 260px; justify-content: center; border: 1px dashed var(--mg-c-line, #cbd5e1); }
.mg-fb-mock { display: flex; gap: 3px; }
.mg-fb-mock i { display: block; width: 74px; height: 100px; background: #fff; border-radius: 2px; box-shadow: 0 8px 20px -10px rgba(15, 23, 42, .5); background-image: repeating-linear-gradient(to bottom, #e2e8f0 0 5px, transparent 5px 12px); background-origin: content-box; padding: 14px 10px; box-sizing: border-box; background-clip: content-box; }
.mg-fb-mock i:first-child { transform: perspective(300px) rotateY(10deg); transform-origin: right; }
.mg-fb-mock i:last-child { transform: perspective(300px) rotateY(-10deg); transform-origin: left; }
.mg-fb-msg { margin: 0; text-align: center; font-size: .92rem; opacity: .8; }
@media (prefers-reduced-motion: reduce) { .mg-fb-leaf, .mg-fb-book, .mg-sl-ui button, .mg-sl.is-fade.is-js .mg-sl-track > .mg-slide { transition: none; } html.mgp-on [data-mgfx-item] { opacity: 1; translate: 0 0; scale: 1; transition: none; } }

/* ---------- pestañas en columna (izquierda / derecha) ---------- */
.mg-tabs.lay-left:has(> .mg-tabs-list:not([hidden])), .mg-tabs.lay-right:has(> .mg-tabs-list:not([hidden])) { display: grid; grid-template-columns: var(--tb-w, 240px) minmax(0, 1fr); gap: 2rem; align-items: start; }
.mg-tabs.lay-right:has(> .mg-tabs-list:not([hidden])) { grid-template-columns: minmax(0, 1fr) var(--tb-w, 240px); }
/* ancho propio: dentro de un contenedor flex con elementos centrados no se encoge */
.mg-tabs, .mg-accd, .mg-sl, .mg-il, .mg-fb { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
.mg-tabs.lay-right .mg-tabs-list { order: 2; }
.mg-tabs.lay-left .mg-tabs-list, .mg-tabs.lay-right .mg-tabs-list { flex-direction: column; flex-wrap: nowrap; margin-bottom: 0; width: auto; }
.mg-tabs.lay-left .mg-tabs-btn, .mg-tabs.lay-right .mg-tabs-btn { justify-content: flex-start; text-align: start; width: 100%; }
.mg-tabs.lay-left.is-underline .mg-tabs-list { border-bottom: 0; border-inline-start: 1px solid var(--mago-line); }
.mg-tabs.lay-left.is-underline .mg-tabs-btn { box-shadow: none; margin: 0 0 0 -1px; border-radius: 0; border-inline-start: 3px solid transparent; }
.mg-tabs.lay-left.is-underline .mg-tabs-btn.is-on { border-inline-start-color: var(--mg-a); }
.mg-tabs.lay-right.is-underline .mg-tabs-list { border-bottom: 0; border-inline-end: 1px solid var(--mago-line); }
.mg-tabs.lay-right.is-underline .mg-tabs-btn { box-shadow: none; margin: 0 -1px 0 0; border-radius: 0; border-inline-end: 3px solid transparent; }
.mg-tabs.lay-right.is-underline .mg-tabs-btn.is-on { border-inline-end-color: var(--mg-a); }
.mg-tabs.lay-left.is-boxed .mg-tabs-list, .mg-tabs.lay-right.is-boxed .mg-tabs-list { width: 100%; }
@media (max-width: 720px) {
	.mg-tabs.lay-left, .mg-tabs.lay-right { display: block; }
	.mg-tabs.lay-left .mg-tabs-list, .mg-tabs.lay-right .mg-tabs-list { flex-direction: row; flex-wrap: wrap; margin-bottom: 1rem; border: 0 !important; }
	.mg-tabs.lay-left .mg-tabs-btn, .mg-tabs.lay-right .mg-tabs-btn { width: auto; border: 0 !important; }
}

/* ======================= 0.23: antes/después, ampliación, videos, planes, trazo ======================= */
:root { --mgq-a: var(--mg-c-primary, #4f46e5); }

/* ---- antes / después ---- */
.mg-ba { --ba-pos: 50%; --ba-r: 16 / 9; position: relative; width: 100%; aspect-ratio: var(--ba-r); overflow: hidden; border-radius: var(--mg-radius, 14px); background: #0f172a; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize; isolation: isolate; outline-offset: 3px; }
.mg-ba.is-v { touch-action: pan-x; cursor: ns-resize; }
.mg-ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; }
.mg-ba.is-h .mg-ba-img.is-b { clip-path: inset(0 calc(100% - var(--ba-pos)) 0 0); }
.mg-ba.is-v .mg-ba-img.is-b { clip-path: inset(0 0 calc(100% - var(--ba-pos)) 0); }
.mg-ba-bar { position: absolute; z-index: 2; background: #fff; box-shadow: 0 0 0 1px rgba(15, 23, 42, .12), 0 2px 12px rgba(15, 23, 42, .35); pointer-events: none; }
.mg-ba.is-h .mg-ba-bar { top: 0; bottom: 0; left: var(--ba-pos); width: 3px; margin-left: -1.5px; }
.mg-ba.is-v .mg-ba-bar { left: 0; right: 0; top: var(--ba-pos); height: 3px; margin-top: -1.5px; }
.mg-ba-knob { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: var(--ba-a, #fff); color: var(--ba-ink, #0f172a); display: grid; place-items: center; box-shadow: 0 4px 16px rgba(15, 23, 42, .4); transition: transform .2s ease; }
.mg-ba-knob svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mg-ba.has-bar .mg-ba-knob { display: none; }
.mg-ba.has-pill .mg-ba-knob { width: 34px; height: 56px; margin: -28px 0 0 -17px; border-radius: 99px; }
.mg-ba.has-pill.is-v .mg-ba-knob { width: 56px; height: 34px; margin: -17px 0 0 -28px; }
.mg-ba.is-drag .mg-ba-knob { transform: scale(1.12); }
.mg-ba:focus-visible .mg-ba-bar { box-shadow: 0 0 0 3px var(--mgq-a), 0 2px 12px rgba(15, 23, 42, .35); }
.mg-ba-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; margin: 0; }
.mg-ba-lab { position: absolute; z-index: 1; padding: .3rem .7rem; border-radius: 99px; font-size: .78rem; font-weight: 600; letter-spacing: .02em; color: #fff; background: rgba(15, 23, 42, .62); backdrop-filter: blur(4px); pointer-events: none; }
.mg-ba.is-h .mg-ba-lab { top: 12px; } .mg-ba.is-h .mg-ba-lab.is-b { left: 12px; } .mg-ba.is-h .mg-ba-lab.is-a { right: 12px; }
.mg-ba.is-v .mg-ba-lab { left: 12px; } .mg-ba.is-v .mg-ba-lab.is-b { top: 12px; } .mg-ba.is-v .mg-ba-lab.is-a { bottom: 12px; }

/* ---- galería con ampliación ---- */
.mg-lb { --lb-n: 3; --lb-gap: 12px; --lb-r: 12px; --lb-ratio: 4 / 3; width: 100%; }
.mg-lb.is-grid { display: grid; grid-template-columns: repeat(var(--lb-n), minmax(0, 1fr)); gap: var(--lb-gap); }
.mg-lb.is-masonry { columns: var(--lb-n); column-gap: var(--lb-gap); }
.mg-lb-item { position: relative; display: block; overflow: hidden; border-radius: var(--lb-r); background: var(--mago-soft, #f1f5f9); cursor: zoom-in; text-decoration: none; color: #fff; outline-offset: 3px; }
.mg-lb.is-masonry .mg-lb-item { break-inside: avoid; margin-bottom: var(--lb-gap); }
.mg-lb.is-grid .mg-lb-item { aspect-ratio: var(--lb-ratio); }
.mg-lb.is-grid.has-big .mg-lb-item:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; min-height: 100%; }
.mg-lb-item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.mg-lb.is-masonry .mg-lb-item img { height: auto; }
.mg-lb.hv-zoom .mg-lb-item:hover img, .mg-lb.hv-zoom .mg-lb-item:focus-visible img { transform: scale(1.07); }
.mg-lb-zoom { position: absolute; right: 10px; top: 10px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(15, 23, 42, .6); backdrop-filter: blur(4px); opacity: 0; transform: scale(.8); transition: opacity .25s, transform .25s; pointer-events: none; }
.mg-lb-zoom svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.mg-lb.hv-icon .mg-lb-item:hover .mg-lb-zoom, .mg-lb.hv-icon .mg-lb-item:focus-visible .mg-lb-zoom { opacity: 1; transform: none; }
.mg-lb.hv-icon .mg-lb-zoom { right: 50%; top: 50%; margin: -18px -18px 0 0; width: 44px; height: 44px; margin: -22px -22px 0 0; }
.mg-lb.hv-zoom .mg-lb-zoom, .mg-lb.hv-caption .mg-lb-zoom, .mg-lb.hv-none .mg-lb-zoom { display: none; }
.mg-lb-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem .9rem .7rem; font-size: .88rem; line-height: 1.3; background: linear-gradient(transparent, rgba(15, 23, 42, .75)); transform: translateY(100%); transition: transform .3s ease; pointer-events: none; }
.mg-lb.hv-caption .mg-lb-item:hover .mg-lb-cap, .mg-lb.hv-caption .mg-lb-item:focus-visible .mg-lb-cap { transform: none; }
.mg-lb:not(.hv-caption) .mg-lb-cap { display: none; }
@media (hover: none) { .mg-lb.hv-caption .mg-lb-cap { transform: none; } }

/* ---- ventana (ampliación y video) ---- */
html.mgq-lock { overflow: hidden; }
.mgq-ov { --mgq-shade: rgba(8, 11, 20, .94); position: fixed; inset: 0; z-index: 999990; background: var(--mgq-shade); opacity: 0; transition: opacity .22s ease; display: flex; flex-direction: column; color: #fff; font-family: inherit; }
.mgq-ov.is-open { opacity: 1; }
.mgq-stage { flex: 1; min-height: 0; display: grid; place-items: center; padding: 56px 64px 72px; overflow: hidden; }
.mgq-img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; border-radius: 6px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); transition: transform .3s ease, opacity .25s ease; cursor: zoom-in; user-select: none; -webkit-user-drag: none; }
.mgq-ov.is-zoom .mgq-img { transform: scale(2.2); cursor: zoom-out; transition: transform .25s ease; }
.mgq-ov.is-zoom .mgq-stage { overflow: hidden; }
.mgq-ov.is-load .mgq-img { opacity: .35; }
.mgq-img.is-r { animation: mgq-in-r .3s ease; } .mgq-img.is-l { animation: mgq-in-l .3s ease; }
@keyframes mgq-in-r { from { opacity: 0; translate: 40px 0; } } @keyframes mgq-in-l { from { opacity: 0; translate: -40px 0; } }
.mgq-x, .mgq-nav, .mgq-zoom { position: absolute; z-index: 3; width: 44px; height: 44px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #fff; background: rgba(255, 255, 255, .12); transition: background .2s, transform .2s; padding: 0; }
.mgq-x:hover, .mgq-nav:hover, .mgq-zoom:hover { background: rgba(255, 255, 255, .26); }
.mgq-x:focus-visible, .mgq-nav:focus-visible, .mgq-zoom:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.mgq-x svg, .mgq-nav svg, .mgq-zoom svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mgq-x { top: 12px; right: 12px; }
.mgq-zoom { top: 12px; right: 64px; }
.mgq-nav { top: 50%; margin-top: -22px; }
.mgq-nav.is-prev { left: 12px; } .mgq-nav.is-next { right: 12px; }
.mgq-count { position: absolute; top: 22px; left: 20px; font-size: .85rem; opacity: .75; font-variant-numeric: tabular-nums; }
.mgq-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: .9rem 4.5rem 1.3rem; text-align: center; font-size: .98rem; line-height: 1.4; pointer-events: none; }
.mgq-cap[hidden] { display: none; }
.mgq-frame { width: min(1100px, 100%); aspect-ratio: 16 / 9; max-height: 100%; background: #000; border-radius: 10px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.mgq-frame iframe, .mgq-frame video { width: 100%; height: 100%; border: 0; display: block; background: #000; }
@media (max-width: 720px) {
	.mgq-stage { padding: 56px 8px 64px; }
	.mgq-nav { top: auto; bottom: 10px; margin: 0; } .mgq-nav.is-prev { left: 10px; } .mgq-nav.is-next { right: 10px; }
	.mgq-cap { padding: .6rem 4rem 1.1rem; font-size: .9rem; }
	.mgq-vd .mgq-cap { position: static; padding: .8rem 1rem 1.2rem; }
}
@media (prefers-reduced-motion: reduce) { .mgq-ov, .mgq-img, .mgq-ov.is-zoom .mgq-img { transition: none; } .mgq-img.is-r, .mgq-img.is-l { animation: none; } }

/* ---- videos con vista previa ---- */
.mg-vg { --vg-n: 3; --vg-gap: 20px; --vg-r: 16px; --vg-ratio: 16 / 9; width: 100%; }
.mg-vg-grid { display: grid; grid-template-columns: repeat(var(--vg-n), minmax(0, 1fr)); gap: var(--vg-gap); }
.mg-vg-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.1rem; }
.mg-vg-filters[hidden] { display: none; }
.mg-vg-filters button { font: inherit; font-size: .88rem; padding: .45rem 1rem; border-radius: 99px; border: 1px solid var(--mago-line, #e2e8f0); background: transparent; color: inherit; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.mg-vg-filters button:hover { border-color: var(--vg-a, var(--mgq-a)); }
.mg-vg-filters button.is-on { background: var(--vg-a, var(--mgq-a)); border-color: var(--vg-a, var(--mgq-a)); color: #fff; }
.mg-vg-filters button:focus-visible { outline: 2px solid var(--vg-a, var(--mgq-a)); outline-offset: 2px; }
.mg-vg-item { display: block; text-decoration: none; color: inherit; outline-offset: 4px; }
.mg-vg-item[hidden] { display: none; }
.mg-vg-thumb { position: relative; display: block; aspect-ratio: var(--vg-ratio); overflow: hidden; border-radius: var(--vg-r); background: #0f172a; isolation: isolate; }
.mg-vg-thumb > img, .mg-vg-thumb > video, .mg-vg-blank { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.mg-vg-blank { background: linear-gradient(135deg, #1e293b, #0f172a); }
.mg-vg-live { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; pointer-events: none; opacity: 0; transition: opacity .35s ease; z-index: 1; background: #000; }
.mg-vg-live.is-on { opacity: 1; }
.mg-vg-thumb.is-live > img { transform: scale(1.04); }
.mg-vg-play { position: absolute; z-index: 3; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; display: grid; place-items: center; background: var(--vg-a, rgba(255, 255, 255, .92)); color: var(--vg-ink, #0f172a); box-shadow: 0 6px 20px rgba(0, 0, 0, .35); transition: transform .25s ease, opacity .25s ease; pointer-events: none; }
.mg-vg-play svg { width: 24px; height: 24px; fill: currentColor; margin-left: 3px; }
.mg-vg-item:hover .mg-vg-play, .mg-vg-item:focus-visible .mg-vg-play { transform: scale(1.1); }
.mg-vg-thumb.is-live .mg-vg-play { opacity: 0; }
.mg-vg-cap { display: flex; flex-direction: column; gap: .15rem; line-height: 1.25; }
.mg-vg-cap b { font-weight: 600; } .mg-vg-cap small { opacity: .75; font-size: .8rem; }
.mg-vg.t-over .mg-vg-cap { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 2.2rem 1rem .9rem; color: #fff; background: linear-gradient(transparent, rgba(8, 11, 20, .78)); pointer-events: none; }
.mg-vg.t-below .mg-vg-cap { padding-top: .7rem; }
@media (max-width: 720px) { .mg-vg-play { width: 48px; height: 48px; margin: -24px 0 0 -24px; } }

/* ---- planes con interruptor ---- */
.mg-pl { --pl-gap: 24px; width: 100%; }
.mg-pl-sw { display: flex; width: max-content; max-width: 100%; margin: 0 auto 2rem; padding: 5px; gap: 4px; border-radius: 99px; background: var(--mago-soft, #f1f5f9); border: 1px solid var(--mago-line, #e2e8f0); }
.mg-pl-sw[hidden] { display: none; }
.mg-pl-sw button { font: inherit; font-weight: 600; font-size: .92rem; border: 0; background: transparent; color: inherit; padding: .55rem 1.3rem; border-radius: 99px; cursor: pointer; display: inline-flex; align-items: center; gap: .5rem; transition: background .25s, color .25s, box-shadow .25s; }
.mg-pl-sw button[aria-pressed="true"] { background: var(--pl-a, var(--mgq-a)); color: #fff; box-shadow: 0 4px 12px rgba(15, 23, 42, .18); }
.mg-pl-sw button:focus-visible { outline: 2px solid var(--pl-a, var(--mgq-a)); outline-offset: 2px; }
.mg-pl-sw em { font-style: normal; font-size: .72rem; font-weight: 700; padding: .15rem .5rem; border-radius: 99px; background: rgba(34, 197, 94, .18); color: #15803d; }
.mg-pl-sw button[aria-pressed="true"] em { background: rgba(255, 255, 255, .25); color: #fff; }
.mg-pl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: var(--pl-gap); align-items: stretch; }
.mg-pl.n-1 .mg-pl-grid { max-width: 420px; margin-inline: auto; }
.mg-pl-card { position: relative; display: flex; flex-direction: column; gap: .7rem; padding: 2rem 1.6rem 1.7rem; border-radius: var(--mg-radius, 18px); border: 1px solid var(--mago-line, #e2e8f0); background: var(--mg-c-white, #fff); transition: transform .3s ease, box-shadow .3s ease; }
.mg-pl-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15, 23, 42, .1); }
.mg-pl-card.is-hot { border-color: var(--pl-a, var(--mgq-a)); box-shadow: 0 0 0 1px var(--pl-a, var(--mgq-a)), 0 18px 44px rgba(15, 23, 42, .12); }
.mg-pl-ribbon { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: .74rem; font-weight: 700; letter-spacing: .03em; padding: .3rem .85rem; border-radius: 99px; background: var(--pl-a, var(--mgq-a)); color: #fff; }
.mg-pl-name { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.2; }
.mg-pl-desc { margin: 0; opacity: .72; font-size: .94rem; line-height: 1.45; }
.mg-pl-price { display: block; margin: .3rem 0 .2rem; }
.mg-pl-p { display: flex; align-items: baseline; gap: .3rem; flex-wrap: wrap; }
.mg-pl-p b { font-size: 2.5rem; line-height: 1.05; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mg-pl-p small { font-size: .92rem; opacity: .65; }
.mg-pl[data-per="m"] .mg-pl-p.is-y, .mg-pl[data-per="y"] .mg-pl-p.is-m { display: none; }
.mg-pl-p { animation: mgq-price .35s ease; }
@keyframes mgq-price { from { opacity: 0; translate: 0 6px; } }
.mg-pl-btn { width: 100%; text-align: center; justify-content: center; margin: .4rem 0 .3rem; }
.mg-pl-feat { list-style: none; margin: .6rem 0 0; padding: .9rem 0 0; border-top: 1px solid var(--mago-line, #e2e8f0); display: flex; flex-direction: column; gap: .55rem; font-size: .94rem; }
.mg-pl-feat li { display: flex; gap: .6rem; align-items: flex-start; line-height: 1.35; }
.mg-pl-feat svg { flex: none; width: 18px; height: 18px; margin-top: .1rem; color: var(--pl-a, var(--mgq-a)); stroke: currentColor; }
@media (prefers-reduced-motion: reduce) { .mg-pl-p { animation: none; } .mg-pl-card, .mg-pl-card:hover { transition: none; transform: none; } }

/* ---- trazo que se dibuja ---- */
.mg-draw { --dr-w: 220px; --dr-sw: 4; --dr-t: 1.2s; --dr-d: 0s; display: block; width: min(var(--dr-w), 100%); color: var(--dr-c, var(--mgq-a)); line-height: 0; }
.mg-draw svg { width: 100%; height: auto; display: block; overflow: visible; }
.mg-draw path { stroke-width: var(--dr-sw); stroke-dasharray: 1 2; stroke-dashoffset: 0; transition: stroke-dashoffset var(--dr-t) cubic-bezier(.6, .1, .3, 1) var(--dr-d); }
.mg-draw path:nth-child(2) { transition-delay: calc(var(--dr-d) + var(--dr-t) * .45); }
html.mgq-on .mg-draw:not(.is-in) path { stroke-dashoffset: 1; }
.mg-draw.is-loop.is-in path { animation: mgq-draw calc(var(--dr-t) * 2.6) cubic-bezier(.6, .1, .3, 1) var(--dr-d) infinite; }
.mg-draw.is-loop.is-in path:nth-child(2) { animation-delay: calc(var(--dr-d) + var(--dr-t) * .45); }
@keyframes mgq-draw { 0% { stroke-dashoffset: 1; } 40%, 70% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
@media (prefers-reduced-motion: reduce) { html.mgq-on .mg-draw:not(.is-in) path { stroke-dashoffset: 0; } .mg-draw path, .mg-draw.is-loop.is-in path { transition: none; animation: none; } }

/* ---- móvil ---- */
@media (max-width: 720px) { .mg-lb.is-masonry { columns: min(var(--lb-n), 2); } .mg-pl-p b { font-size: 2.2rem; } .mg-ba-knob { width: 38px; height: 38px; margin: -19px 0 0 -19px; } }
.mg-pl-btn { box-sizing: border-box; max-width: 100%; }
.mg-pl-btn.is-primary { background: var(--pl-a, var(--mgq-a)); color: #fff; border-color: transparent; }
.mg-pl-btn.is-outline { color: inherit; }

/* ======================= 0.24: cotizador, cursor, tarjeta 3D ======================= */
/* ---- cotizador por pasos ---- */
.mg-qw { --qw-r: 14px; --qw-n: 2; width: 100%; max-width: 760px; margin-inline: auto; }
.mg-qw-form { display: flex; flex-direction: column; gap: 1.4rem; }
.mg-qw-prog { display: flex; flex-direction: column; gap: .5rem; }
.mg-qw-prog[hidden] { display: none; }
.mg-qw-pl { font-size: .84rem; font-weight: 600; opacity: .7; }
.mg-qw-bar { display: block; height: 6px; border-radius: 99px; background: var(--mago-line, #e2e8f0); overflow: hidden; }
.mg-qw-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--qw-a, var(--mgq-a)); transition: width .4s cubic-bezier(.2, .7, .2, 1); }
.mg-qw-step { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: .8rem; }
.mg-qw-step + .mg-qw-step { margin-top: .6rem; }
.mg-qw.is-js .mg-qw-step { margin-top: 0; }
.mg-qw.is-js .mg-qw-step:not(.is-on) { display: none; }
.mg-qw.is-js .mg-qw-step.is-on { animation: mgq-step .35s ease; }
@keyframes mgq-step { from { opacity: 0; translate: 24px 0; } }
.mg-qw-q { padding: 0; font-size: clamp(1.25rem, 2.6vw, 1.7rem); font-weight: 800; line-height: 1.2; letter-spacing: -.01em; outline: none; margin-bottom: .2rem; }
.mg-qw-help { margin: 0; opacity: .7; font-size: .95rem; }
.mg-qw-opts { display: grid; gap: .75rem; grid-template-columns: repeat(var(--qw-n), minmax(0, 1fr)); }
.mg-qw.is-list .mg-qw-opts { grid-template-columns: 1fr; }
.mg-qw-opt { position: relative; display: flex; align-items: center; gap: .6rem; padding: 1rem 2.8rem 1rem 1.1rem; border: 2px solid var(--mago-line, #e2e8f0); border-radius: var(--qw-r); background: var(--mg-c-white, #fff); cursor: pointer; line-height: 1.3; transition: border-color .2s, background .2s, box-shadow .2s, transform .15s; }
.mg-qw.is-cards .mg-qw-opt { flex-direction: column; align-items: flex-start; justify-content: center; min-height: 84px; gap: .3rem; }
.mg-qw-opt:hover { border-color: var(--qw-a, var(--mgq-a)); transform: translateY(-1px); }
.mg-qw-opt input { position: absolute; opacity: 0; pointer-events: none; inset: 0; }
.mg-qw-t { font-weight: 600; }
.mg-qw-p { font-style: normal; font-size: .84rem; font-weight: 700; padding: .15rem .55rem; border-radius: 99px; background: color-mix(in srgb, var(--qw-a, var(--mgq-a)) 12%, transparent); color: var(--qw-a, var(--mgq-a)); }
.mg-qw.is-list .mg-qw-p { margin-left: auto; }
.mg-qw-ck { position: absolute; right: 1rem; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; border: 2px solid var(--mago-line, #cbd5e1); display: grid; place-items: center; transition: background .2s, border-color .2s; }
.mg-qw-ck::after { content: ""; width: 10px; height: 6px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; rotate: -45deg; translate: 0 -1px; opacity: 0; transition: opacity .15s; }
.mg-qw-step[data-k="m"] .mg-qw-ck { border-radius: 6px; }
.mg-qw-opt:has(input:checked) { border-color: var(--qw-a, var(--mgq-a)); background: color-mix(in srgb, var(--qw-a, var(--mgq-a)) 7%, var(--mg-c-white, #fff)); box-shadow: 0 0 0 1px var(--qw-a, var(--mgq-a)); }
.mg-qw-opt:has(input:checked) .mg-qw-ck { background: var(--qw-a, var(--mgq-a)); border-color: var(--qw-a, var(--mgq-a)); }
.mg-qw-opt:has(input:checked) .mg-qw-ck::after { opacity: 1; }
.mg-qw-opt:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--qw-a, var(--mgq-a)) 45%, transparent); outline-offset: 2px; }
.mg-qw-contact { display: grid; gap: .9rem; }
.mg-qw .mago-field { display: flex; flex-direction: column; gap: .35rem; }
.mg-qw .mago-field label { font-weight: 600; font-size: .92rem; }
.mg-qw .mago-field input, .mg-qw .mago-field textarea { font: inherit; padding: .8rem 1rem; border: 2px solid var(--mago-line, #e2e8f0); border-radius: calc(var(--qw-r) * .7); background: var(--mg-c-white, #fff); color: inherit; width: 100%; box-sizing: border-box; transition: border-color .2s; }
.mg-qw .mago-field input:focus, .mg-qw .mago-field textarea:focus { outline: none; border-color: var(--qw-a, var(--mgq-a)); }
.mg-qw .mago-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mg-qw-err { margin: 0; color: #b91c1c; font-size: .9rem; font-weight: 600; animation: mgq-shake .3s; }
@keyframes mgq-shake { 25% { translate: -5px 0; } 75% { translate: 5px 0; } }
.mg-qw-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem; padding: 1rem 1.2rem; border-radius: var(--qw-r); background: var(--mago-soft, #f1f5f9); }
.mg-qw-tl { font-size: .9rem; font-weight: 600; opacity: .75; }
.mg-qw-tv b { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--qw-a, var(--mgq-a)); }
.mg-qw-tv small { opacity: .65; }
.mg-qw-tn { flex-basis: 100%; font-size: .82rem; opacity: .65; }
.mg-qw-nav { display: flex; gap: .8rem; justify-content: space-between; align-items: center; }
.mg-qw-nav .mg-btn { cursor: pointer; }
.mg-qw-nav [hidden] { display: none; }
.mg-qw-next, .mg-qw-send { margin-left: auto; }
.mg-qw-next, .mg-qw-send { background: var(--qw-a, var(--mgq-a)); color: #fff; border-color: transparent; }
.mg-qw.is-js .mg-qw-send { display: none; }
.mg-qw.is-js.is-lastp .mg-qw-send { display: inline-flex; }
.mg-qw.is-js.is-lastp .mg-qw-next { display: none; }
.mg-qw:not(.is-js) .mg-qw-next, .mg-qw:not(.is-js) .mg-qw-back { display: none; }
.mg-qw-status { margin: 0; min-height: 1.2em; font-weight: 600; }
.mg-qw-status.is-ok { color: #15803d; font-size: 1.25rem; text-align: center; padding: 2rem 1rem; }
.mg-qw-status.is-error { color: #b91c1c; }
.mg-qw.is-done .mg-qw-step, .mg-qw.is-done .mg-qw-prog, .mg-qw.is-done .mg-qw-total, .mg-qw.is-done .mg-qw-nav { display: none; }
.mg-qw-again { align-self: center; cursor: pointer; }
@media (max-width: 640px) { .mg-qw-opts { grid-template-columns: 1fr; } .mg-qw.is-cards .mg-qw-opt { min-height: 0; flex-direction: row; align-items: center; } .mg-qw.is-cards .mg-qw-p { margin-left: auto; } }
@media (prefers-reduced-motion: reduce) { .mg-qw.is-js .mg-qw-step.is-on, .mg-qw-err { animation: none; } .mg-qw-bar i, .mg-qw-opt { transition: none; } }

/* ---- cursor personalizado ---- */
.mg-cursor { position: fixed; left: 0; top: 0; z-index: 999999; pointer-events: none; opacity: 0; transition: opacity .25s ease; --cu-s: 36px; --cu-d: 8px; --cu-k: 1; }
.mg-cursor:not(.is-ready) { display: none; }
.mg-cursor.is-on { opacity: 1; }
.mg-cursor.is-diff { mix-blend-mode: difference; }
.mg-cursor-ring, .mg-cursor-dot { position: absolute; left: 0; top: 0; will-change: transform; }
.mg-cursor-ring { width: var(--cu-s); height: var(--cu-s); margin: calc(var(--cu-s) / -2) 0 0 calc(var(--cu-s) / -2); border-radius: 50%; border: 2px solid var(--cu-c, #0f172a); scale: var(--cu-k); display: grid; place-items: center; transition: scale .25s cubic-bezier(.2, .7, .2, 1), background-color .25s, border-color .25s, opacity .25s; box-sizing: border-box; }
.mg-cursor.is-diff .mg-cursor-ring, .mg-cursor.is-diff.is-blob .mg-cursor-ring { border-color: #fff; }
.mg-cursor.is-diff .mg-cursor-dot { background: #fff; }
.mg-cursor-dot { width: var(--cu-d); height: var(--cu-d); margin: calc(var(--cu-d) / -2) 0 0 calc(var(--cu-d) / -2); border-radius: 50%; background: var(--cu-c, #0f172a); transition: opacity .2s; }
.mg-cursor.is-dot .mg-cursor-ring { display: none; }
.mg-cursor.is-ring .mg-cursor-dot { display: none; }
.mg-cursor.is-blob .mg-cursor-ring { border: 0; background: var(--cu-c, #0f172a); opacity: .85; }
.mg-cursor.is-blob .mg-cursor-dot { display: none; }
.mg-cursor.is-hover:not(.is-blob) .mg-cursor-ring { background-color: color-mix(in srgb, var(--cu-c, #0f172a) 10%, transparent); }
.mg-cursor.is-hover .mg-cursor-dot { opacity: 0; }
.mg-cursor.is-down .mg-cursor-ring { scale: calc(var(--cu-k) * .8); }
.mg-cursor-txt { font: 600 11px/1 system-ui, sans-serif; color: var(--cu-c, #0f172a); scale: calc(1 / var(--cu-k)); white-space: nowrap; opacity: 0; transition: opacity .15s; letter-spacing: .02em; }
.mg-cursor.has-txt .mg-cursor-txt { opacity: 1; }
.mg-cursor.is-blob .mg-cursor-txt { color: #fff; }
.mg-cursor.is-diff .mg-cursor-txt { color: #fff; }
html.mgq-cur-hide, html.mgq-cur-hide a, html.mgq-cur-hide button, html.mgq-cur-hide [role="button"], html.mgq-cur-hide summary, html.mgq-cur-hide label, html.mgq-cur-hide .mg-lb-item, html.mgq-cur-hide .mg-vg-item { cursor: none; }
@media (hover: none), (pointer: coarse) { .mg-cursor { display: none !important; } }

/* ---- tarjeta 3D ---- */
:where(.mg-tilt) { position: relative; }
.mg-tilt { --tl-p: 900px; --tl-z: 24px; --tl-g: .3; --tl-s: 1; transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s ease; }
.mg-tilt.is-live { transform: perspective(var(--tl-p)) rotateX(var(--tl-rx, 0deg)) rotateY(var(--tl-ry, 0deg)) scale(var(--tl-s)); transform-style: preserve-3d; will-change: transform; }
.mg-tilt.is-live.is-hover { transition: transform .12s ease-out, box-shadow .3s ease; }
.mg-tilt.has-shadow.is-live.is-hover { box-shadow: var(--tl-sx, 0px) var(--tl-sy, 18px) 44px rgba(15, 23, 42, .28); }
.mg-tilt.has-depth.is-live > :not(.mg-tilt-glare) { transform: translateZ(var(--tl-z)); }
.mg-tilt-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s ease; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, var(--tl-g)), transparent 62%); mix-blend-mode: soft-light; z-index: 5; }
.mg-tilt.is-hover .mg-tilt-glare { opacity: 1; }
@media (prefers-reduced-motion: reduce), (hover: none) { .mg-tilt, .mg-tilt.is-live { transform: none; transition: none; } .mg-tilt-glare { display: none; } }
.mg-qw .mg-qw-next, .mg-qw .mg-qw-send { background: var(--qw-a, var(--mgq-a)); color: #fff; border-color: transparent; }
.mg-qw .mg-qw-q { margin-bottom: .8rem; }

/* 0.25 · datos de un set (tarjetas y fichas) */
.mg-dfact:empty, .mg-dhide:empty { display: none; }
.mg-dspec:has(.mg-dval:empty) { display: none; }
.mg-dspec, .mg-dspec > div { min-width: 0; }
.mg-dval { overflow-wrap: anywhere; }