/* ==========================================================================
   Aperturas mágicas. Cada escena termina abriendo un hueco de luz desde el
   punto del toque (--px, --py) que descubre la invitación.
   --mg-a / --mg-b (colores), --mg-sky (fondo) y --mg-light (luz).
   ========================================================================== */
@property --mg-hole { syntax: '<length>'; inherits: true; initial-value: 0px; }
.intro-magia {
    --mg-a: var(--op-a, #6a4cff); --mg-b: var(--op-b, #d4a845); --mg-sky: var(--op-wall, #0a0820); --mg-light: var(--op-light, #fff3c4);
    --hole-at: 1.3s; --flash-at: .9s;
    display: grid; place-items: center; color: #fff;
    background: radial-gradient(ellipse at 50% 42%, color-mix(in srgb, var(--mg-sky) 62%, var(--mg-a)), var(--mg-sky) 72%);
    -webkit-mask: radial-gradient(circle at var(--px, 50%) var(--py, 50%), transparent calc(var(--mg-hole) - 1px), #000 calc(var(--mg-hole) + 1px));
    mask: radial-gradient(circle at var(--px, 50%) var(--py, 50%), transparent calc(var(--mg-hole) - 1px), #000 calc(var(--mg-hole) + 1px));
    transition: --mg-hole calc(1s * var(--k)) cubic-bezier(.7, 0, .3, 1) calc(var(--hole-at) * var(--k)), opacity calc(.5s * var(--k)) ease calc((var(--hole-at) + .7s) * var(--k));
}
.intro-magia.open { --mg-hole: 150vmax; opacity: 0; }
.intro-magia > * { grid-area: 1 / 1; }
.intro-magia .mg-label { position: relative; z-index: 4; pointer-events: none; transition: opacity calc(.5s * var(--k)) ease, transform calc(.8s * var(--k)) ease; }
.intro-magia.open .mg-label { opacity: 0; transform: scale(.92); }
.intro-magia .mg-top { align-self: start; margin-top: max(12vh, 64px); }
.intro-magia .mg-bottom { align-self: end; margin-bottom: max(16vh, 96px); }
.mg-card { color: #fff; }
.mg-card .op-title { color: var(--mg-light); text-shadow: 0 0 18px color-mix(in srgb, var(--mg-b) 70%, transparent), 0 2px 10px rgba(0, 0, 0, .5); }
.mg-card .op-kicker, .mg-card .intro-for, .mg-card .intro-for strong { color: inherit; }
.intro-magia > .intro-hint { position: absolute; z-index: 9; bottom: max(30px, 7vh); left: 0; right: 0; text-align: center; color: #fff; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; animation: mgHint 2.4s ease-in-out infinite; }
.intro-magia.open > .intro-hint { opacity: 0; animation: none; transition: opacity .3s; }
@keyframes mgHint { 50% { opacity: .4; } }
.mg-flash { position: absolute; inset: 0; z-index: 6; pointer-events: none; background: radial-gradient(circle at var(--px, 50%) var(--py, 50%), var(--mg-light), transparent 62%); opacity: 0; }
.intro-magia.open .mg-flash { animation: mgFlash calc(1.1s * var(--k)) ease-out calc(var(--flash-at) * var(--k)) forwards; }
@keyframes mgFlash { 30% { opacity: 1; } 100% { opacity: 0; } }
.mg-stars { position: absolute; inset: 0; pointer-events: none; }
.mg-stars b { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; background: #fff; box-shadow: 0 0 6px #fff; animation: mgTwinkle 3s ease-in-out var(--d) infinite; }
@keyframes mgTwinkle { 50% { opacity: .2; transform: scale(.6); } }
@keyframes mgSpin { to { transform: rotate(360deg); } }

/* Portal arcano: anillos de runas que giran y se abren como un portal */
.magia-portal { --mg-a: var(--op-a, #6a4cff); --mg-light: var(--op-light, #e4dcff); --hole-at: 1.15s; --flash-at: .75s; }
.mg-portal-wrap { position: relative; width: min(80vw, 400px); aspect-ratio: 1; translate: 0 -7vh; color: var(--mg-b); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--mg-a) 80%, transparent)); transition: transform calc(1.4s * var(--k)) cubic-bezier(.6, 0, .2, 1) calc(.15s * var(--k)); }
.mg-portal-rings { width: 100%; height: 100%; overflow: visible; }
.mg-portal-rings text { font: 600 15px/1 Georgia, serif; letter-spacing: 6px; fill: currentColor; }
.mg-portal-rings .mg-ring-2 text { font: 600 11px/1 var(--font-body, sans-serif); letter-spacing: 5px; }
.mg-portal-rings .mg-ring, .mg-portal-core { transform-box: view-box; transform-origin: 200px 200px; }
.mg-ring-1 { animation: mgSpin 40s linear infinite; }
.mg-ring-2 { animation: mgSpin 26s linear infinite reverse; }
.mg-ring-3 { animation: mgSpin 60s linear infinite; }
.mg-portal-core { animation: mgPulse 3.2s ease-in-out infinite; }
@keyframes mgPulse { 50% { opacity: .55; transform: scale(.92); } }
.mg-portal-mono { position: absolute; inset: 0; display: grid; place-items: center; font: 400 clamp(2.4rem, 12vw, 4.4rem)/1 var(--font-names); color: var(--mg-light); text-shadow: 0 0 20px var(--mg-a); }
.magia-portal .mg-label { align-self: end; margin-bottom: max(15vh, 90px); }
.magia-portal.open .mg-portal-wrap { transform: scale(3.4) rotate(160deg); }

/* Fénix: brasas que suben y un ave de fuego que levanta el vuelo */
.magia-fenix { --mg-sky: var(--op-wall, #1a0605); --mg-a: var(--op-a, #b3200e); --mg-b: var(--op-b, #ff8a1f); --mg-light: var(--op-light, #ffe58a); --hole-at: 1.5s; background: radial-gradient(ellipse at 50% 72%, color-mix(in srgb, var(--mg-a) 55%, var(--mg-sky)), var(--mg-sky) 70%); }
.mg-embers { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.mg-embers i { position: absolute; bottom: -10px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; background: var(--mg-light); box-shadow: 0 0 8px 2px var(--mg-b); opacity: 0; animation: mgEmber var(--t) linear var(--d) infinite; }
@keyframes mgEmber { 10% { opacity: 1; } 100% { transform: translate(var(--w), -105vh) scale(.3); opacity: 0; } }
.mg-phoenix { width: min(86vw, 420px); translate: 0 -8vh; filter: drop-shadow(0 0 14px var(--mg-b)) drop-shadow(0 0 40px color-mix(in srgb, var(--mg-a) 70%, transparent)); animation: mgHover 3s ease-in-out infinite; }
.mg-phoenix svg { width: 100%; display: block; overflow: visible; }
.mg-ph-wing { transform-box: fill-box; animation: mgFlap 2.6s ease-in-out infinite; }
.mg-ph-wing-l { transform-origin: 100% 100%; --fl: 5deg; }
.mg-ph-wing-r { transform-origin: 0 100%; --fl: -5deg; }
@keyframes mgFlap { 50% { transform: scaleY(.8) rotate(var(--fl)); } }
@keyframes mgHover { 50% { transform: translateY(-10px); } }
.magia-fenix .mg-label { align-self: end; margin-bottom: max(15vh, 90px); }
.magia-fenix.open .mg-phoenix { animation: mgSoar calc(1.4s * var(--k)) cubic-bezier(.5, 0, .75, 0) forwards; }
.magia-fenix.open .mg-ph-wing { animation-duration: .4s; }
@keyframes mgSoar { 25% { transform: translateY(20px) scale(1.05); } 100% { transform: translateY(-120vh) scale(1.6); } }
.mg-fire-wipe { position: absolute; left: -10%; right: -10%; top: 100%; height: 70vh; z-index: 6; pointer-events: none; background: linear-gradient(to top, transparent, var(--mg-a) 25%, var(--mg-b) 50%, var(--mg-light) 75%, transparent); filter: blur(12px); }
.magia-fenix.open .mg-fire-wipe { animation: mgWipe calc(1.3s * var(--k)) ease-in calc(.55s * var(--k)) forwards; }
@keyframes mgWipe { to { transform: translateY(-175vh); } }

/* Ojo del dragón: parpadea, se abre y la pupila se vuelve luz */
.magia-dragon { --mg-sky: var(--op-wall, #07140f); --mg-a: var(--op-a, #e0a21c); --mg-b: var(--op-b, #2f6b3a); --mg-light: var(--op-light, #fff1b0); --hole-at: 1.35s; --flash-at: 1s; background: radial-gradient(ellipse at 50% 58%, color-mix(in srgb, var(--mg-b) 45%, var(--mg-sky)), var(--mg-sky) 75%); }
.mg-scales { position: absolute; inset: 0; opacity: .4; pointer-events: none;
    background: radial-gradient(circle at 50% 0, transparent 56%, color-mix(in srgb, var(--mg-b) 70%, #000) 60%, transparent 74%) 0 0 / 34px 24px, radial-gradient(circle at 50% 0, transparent 56%, color-mix(in srgb, var(--mg-b) 70%, #000) 60%, transparent 74%) 17px 12px / 34px 24px;
    -webkit-mask: radial-gradient(ellipse at 50% 58%, transparent 18%, #000 70%); mask: radial-gradient(ellipse at 50% 58%, transparent 18%, #000 70%); }
.mg-dragon-eye { position: relative; width: min(82vw, 380px); aspect-ratio: 2 / 1.1; translate: 0 6vh; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 6px color-mix(in srgb, var(--mg-b) 50%, #000), 0 0 60px color-mix(in srgb, var(--mg-a) 45%, transparent); transition: transform calc(1.1s * var(--k)) cubic-bezier(.7, 0, .3, 1) calc(.6s * var(--k)); }
.mg-eye-ball { position: absolute; inset: 0; background: radial-gradient(circle, var(--mg-light) 0, var(--mg-a) 22%, color-mix(in srgb, var(--mg-a) 60%, #5a2a00) 40%, #1a0b00 54%); }
.mg-eye-iris { position: absolute; inset: 0; background: repeating-conic-gradient(rgba(0, 0, 0, .2) 0 3deg, transparent 3deg 9deg); -webkit-mask: radial-gradient(circle, #000 0 30%, transparent 46%); mask: radial-gradient(circle, #000 0 30%, transparent 46%); animation: mgSpin 30s linear infinite; }
.mg-eye-pupil { position: absolute; left: 50%; top: 50%; width: 9%; height: 86%; translate: -50% -50%; border-radius: 50%; background: #050302; box-shadow: 0 0 12px rgba(0, 0, 0, .8); animation: mgPupil 4s ease-in-out infinite; }
@keyframes mgPupil { 50% { width: 5.5%; } }
.mg-eye-shine { position: absolute; left: 39%; top: 22%; width: 9%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .75); filter: blur(2px); }
.mg-lid { position: absolute; left: -5%; right: -5%; height: 52%; background: linear-gradient(color-mix(in srgb, var(--mg-b) 55%, #000), color-mix(in srgb, var(--mg-b) 28%, #000)); transition: transform calc(.7s * var(--k)) cubic-bezier(.6, 0, .3, 1); }
.mg-lid-top { top: 0; border-radius: 0 0 50% 50% / 0 0 34% 34%; transform: translateY(-62%); animation: mgBlinkT 5s ease-in-out infinite; }
.mg-lid-bot { bottom: 0; border-radius: 50% 50% 0 0 / 34% 34% 0 0; transform: translateY(70%); animation: mgBlinkB 5s ease-in-out infinite; }
@keyframes mgBlinkT { 0%, 88%, 100% { transform: translateY(-62%); } 93% { transform: translateY(0); } }
@keyframes mgBlinkB { 0%, 88%, 100% { transform: translateY(70%); } 93% { transform: translateY(0); } }
.magia-dragon.open .mg-lid { animation: none; }
.magia-dragon.open .mg-lid-top { transform: translateY(-105%); }
.magia-dragon.open .mg-lid-bot { transform: translateY(105%); }
.magia-dragon.open .mg-eye-pupil { animation: mgDilate calc(1.2s * var(--k)) cubic-bezier(.7, 0, .3, 1) calc(.3s * var(--k)) forwards; }
@keyframes mgDilate { 35% { width: 3.5%; } 100% { width: 130%; height: 220%; background: var(--mg-light); box-shadow: 0 0 60px var(--mg-light); } }
.magia-dragon.open .mg-dragon-eye { transform: scale(4.5); }

/* Aurora boreal: cintas de luz sobre montañas */
.magia-aurora { --mg-sky: var(--op-wall, #050b1c); --mg-a: var(--op-a, #2bffb0); --mg-b: var(--op-b, #8a5cff); --mg-light: var(--op-light, #e8fff7); --hole-at: 1.3s; background: linear-gradient(#02040c, var(--mg-sky) 55%, color-mix(in srgb, var(--mg-sky) 70%, var(--mg-b))); }
.mg-aurora-sky { position: absolute; inset: -10% -20% 30%; pointer-events: none; filter: blur(26px); mix-blend-mode: screen; transition: transform calc(1.4s * var(--k)) ease; }
.mg-aur { position: absolute; left: 0; right: 0; height: 38%; border-radius: 50%; opacity: .75; }
.mg-aur-1 { top: 12%; background: linear-gradient(90deg, transparent, var(--mg-a), color-mix(in srgb, var(--mg-a) 50%, var(--mg-b)), transparent); animation: mgWave 9s ease-in-out infinite; }
.mg-aur-2 { top: 28%; opacity: .55; background: linear-gradient(90deg, transparent, var(--mg-b), var(--mg-a), transparent); animation: mgWave 12s ease-in-out -3s infinite reverse; }
.mg-aur-3 { top: 4%; height: 28%; opacity: .4; background: linear-gradient(90deg, transparent 10%, color-mix(in srgb, var(--mg-a) 60%, #fff), transparent 80%); animation: mgWave 7s ease-in-out -1s infinite; }
@keyframes mgWave { 0%, 100% { transform: translateX(-8%) skewY(-6deg) scaleY(.8); } 50% { transform: translateX(8%) skewY(5deg) scaleY(1.2); } }
.mg-peaks { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 26vh; fill: #03060f; transition: transform calc(1.2s * var(--k)) cubic-bezier(.6, 0, .3, 1) calc(.3s * var(--k)); }
.mg-peaks .mg-peaks-near { fill: #010309; }
.magia-aurora .mg-label { translate: 0 -4vh; }
.magia-aurora.open .mg-aurora-sky { transform: translateY(-30vh) scaleY(1.8); }
.magia-aurora.open .mg-peaks { transform: translateY(100%); }

/* Eclipse: la luna se aparta, brilla el anillo de diamante y la luz lo llena todo */
.magia-eclipse { --mg-sky: var(--op-wall, #04030a); --mg-a: var(--op-a, #ffb547); --mg-b: var(--op-b, #1a1424); --mg-light: var(--op-light, #fffbe8); --hole-at: 1.45s; --flash-at: .6s; background: radial-gradient(circle at 50% 40%, #14101e, var(--mg-sky) 70%); }
.mg-eclipse-disc { position: relative; width: min(56vw, 260px); aspect-ratio: 1; translate: 0 -8vh; transition: transform calc(1.6s * var(--k)) ease; }
.mg-eclipse-disc i { position: absolute; inset: 0; border-radius: 50%; }
.mg-eclipse-disc .mg-sun { background: radial-gradient(circle, var(--mg-light), var(--mg-a) 70%); }
.mg-eclipse-disc .mg-corona { inset: -6%; box-shadow: 0 0 30px 8px var(--mg-a), 0 0 90px 30px color-mix(in srgb, var(--mg-a) 55%, transparent), 0 0 160px 60px color-mix(in srgb, var(--mg-a) 22%, transparent); animation: mgCorona 4s ease-in-out infinite; }
@keyframes mgCorona { 50% { opacity: .7; transform: scale(1.04); } }
.mg-eclipse-disc .mg-moon { inset: -1%; background: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--mg-b) 80%, #333), var(--mg-b) 70%); box-shadow: inset -8px -6px 18px rgba(0, 0, 0, .6); animation: mgDrift 6s ease-in-out infinite; transition: transform calc(1s * var(--k)) cubic-bezier(.5, 0, .2, 1); }
@keyframes mgDrift { 0%, 100% { transform: translateX(2%); } 50% { transform: translateX(-2%); } }
.mg-eclipse-disc .mg-diamond { inset: auto; left: 80%; top: 14%; width: 16%; height: 16%; background: #fff; box-shadow: 0 0 14px 6px #fff, 0 0 40px 18px var(--mg-light); opacity: 0; }
.magia-eclipse.open .mg-moon { animation: none; transform: translate(90%, -45%); }
.magia-eclipse.open .mg-diamond { animation: mgDiamond calc(1.1s * var(--k)) ease-in calc(.25s * var(--k)) forwards; }
@keyframes mgDiamond { 0% { opacity: 0; transform: scale(.2); } 35% { opacity: 1; transform: scale(1.6); } 100% { opacity: 1; transform: scale(34); } }
.magia-eclipse.open .mg-eclipse-disc { transform: scale(1.3); }

/* Olimpo: columnas de mármol, rayos dorados y nubes que se apartan */
.magia-olimpo { --mg-sky: var(--op-wall, #9fc4ea); --mg-a: var(--op-a, #f6efe2); --mg-b: var(--op-b, #b8892c); --mg-light: var(--op-light, #fff4cf); --hole-at: 1.2s; color: #4a3518; background: linear-gradient(color-mix(in srgb, var(--mg-sky) 75%, #2c5c9a), var(--mg-sky) 45%, color-mix(in srgb, var(--mg-light) 70%, var(--mg-sky))); }
.magia-olimpo .mg-rays { position: absolute; left: 50%; top: 46%; width: 200vmax; height: 200vmax; translate: -50% -50%; opacity: .8; background: repeating-conic-gradient(color-mix(in srgb, var(--mg-light) 70%, transparent) 0 6deg, transparent 6deg 18deg); -webkit-mask: radial-gradient(circle, #000 0, transparent 50%); mask: radial-gradient(circle, #000 0, transparent 50%); animation: mgSpin 60s linear infinite; }
.magia-olimpo .mg-column { position: absolute; bottom: 0; top: 9vh; width: clamp(44px, 13vw, 110px); background: linear-gradient(90deg, #cfc6b6, #fbf8f2 30%, #e6dfd2 55%, #b9ae9a); transition: transform calc(1.2s * var(--k)) cubic-bezier(.6, 0, .25, 1) calc(.3s * var(--k)); }
.magia-olimpo .mg-column i { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .08) 0 2px, transparent 2px 12%); }
.magia-olimpo .mg-column::before, .magia-olimpo .mg-column::after { content: ''; position: absolute; left: -14%; right: -14%; height: 4.5vh; border-radius: 3px; background: linear-gradient(#fbf8f2, #cfc6b6); }
.magia-olimpo .mg-column::before { top: -4.5vh; }
.magia-olimpo .mg-column::after { bottom: 0; }
.magia-olimpo .mg-col-l { left: 4vw; }
.magia-olimpo .mg-col-r { right: 4vw; }
.mg-cloud-bank { position: absolute; top: 0; bottom: 0; width: 64%; pointer-events: none; transition: transform calc(1.4s * var(--k)) cubic-bezier(.6, 0, .25, 1) calc(.1s * var(--k)); }
.mg-bank-l { left: -12%; }
.mg-bank-r { right: -12%; }
.mg-cloud-bank i { position: absolute; left: var(--x); top: var(--y); width: var(--s); aspect-ratio: 1.6; translate: -50% -50%; border-radius: 50%; background: radial-gradient(ellipse at 40% 40%, #fff, color-mix(in srgb, var(--mg-a) 85%, #b9c6d8) 62%, transparent 71%); filter: blur(5px); animation: mgCloud 7s ease-in-out var(--d) infinite; }
@keyframes mgCloud { 50% { transform: translate(3%, -3%) scale(1.04); } }
.magia-olimpo .mg-card { color: #5a4320; }
.magia-olimpo .mg-card .op-title { color: var(--mg-b); text-shadow: 0 1px 0 #fff, 0 0 26px #fff; }
.magia-olimpo .mg-laurel { display: block; width: 92px; margin: 0 auto -.2rem; color: var(--mg-b); filter: drop-shadow(0 0 6px #fff); }
.magia-olimpo > .intro-hint { color: #5a4320; }
.magia-olimpo.open .mg-bank-l { transform: translateX(-115%); }
.magia-olimpo.open .mg-bank-r { transform: translateX(115%); }
.magia-olimpo.open .mg-col-l { transform: translateX(-180%); }
.magia-olimpo.open .mg-col-r { transform: translateX(180%); }

/* Bola de cristal: niebla que gira, las iniciales aparecen y la bola lo envuelve todo */
.magia-cristal { --mg-sky: var(--op-wall, #120a22); --mg-a: var(--op-a, #9b6bff); --mg-b: var(--op-b, #d4a845); --mg-light: var(--op-light, #eadfff); --hole-at: 1.25s; background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--mg-a) 30%, var(--mg-sky)), var(--mg-sky) 70%); }
.mg-crystal { position: relative; display: grid; justify-items: center; translate: 0 -8vh; transition: transform calc(1.3s * var(--k)) cubic-bezier(.7, 0, .3, 1) calc(.3s * var(--k)); }
.mg-orb { position: relative; z-index: 1; width: min(62vw, 280px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--mg-a) 55%, transparent), color-mix(in srgb, var(--mg-sky) 70%, var(--mg-a)) 70%); box-shadow: inset 0 0 40px color-mix(in srgb, var(--mg-light) 50%, transparent), inset -20px -30px 60px rgba(0, 0, 0, .45), 0 0 50px color-mix(in srgb, var(--mg-a) 60%, transparent); animation: mgOrb 4s ease-in-out infinite; }
@keyframes mgOrb { 50% { box-shadow: inset 0 0 60px color-mix(in srgb, var(--mg-light) 70%, transparent), inset -20px -30px 60px rgba(0, 0, 0, .45), 0 0 85px color-mix(in srgb, var(--mg-a) 85%, transparent); } }
.mg-mist { position: absolute; inset: -30%; border-radius: 50%; background: conic-gradient(transparent, color-mix(in srgb, var(--mg-light) 60%, transparent), transparent 40%, color-mix(in srgb, var(--mg-a) 80%, transparent), transparent 75%); filter: blur(18px); animation: mgSpin 8s linear infinite; }
.mg-mist-2 { opacity: .7; animation-duration: 13s; animation-direction: reverse; }
.mg-orb-mono { position: relative; font: 400 clamp(2.2rem, 11vw, 4rem)/1 var(--font-names); color: #fff; text-shadow: 0 0 18px var(--mg-light); animation: mgAppear 4s ease-in-out infinite; }
@keyframes mgAppear { 0%, 100% { opacity: .35; filter: blur(3px); } 50% { opacity: 1; filter: blur(0); } }
.mg-orb-shine { position: absolute; left: 18%; top: 12%; width: 34%; height: 22%; border-radius: 50%; background: linear-gradient(rgba(255, 255, 255, .7), transparent); transform: rotate(-30deg); }
.mg-orb-stand { display: block; width: 46%; height: 34px; margin-top: -12px; background: linear-gradient(90deg, color-mix(in srgb, var(--mg-b) 55%, #000), var(--mg-b) 40%, color-mix(in srgb, var(--mg-b) 50%, #fff) 55%, color-mix(in srgb, var(--mg-b) 55%, #000)); clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%); border-radius: 0 0 8px 8px; transition: opacity .3s; }
.magia-cristal.open .mg-crystal { transform: scale(6.5); }
.magia-cristal.open .mg-orb-stand { opacity: 0; }

/* Alas de Pegaso: plumas que caen y dos alas que baten y se van volando */
.magia-pegaso { --mg-sky: var(--op-wall, #f6e9df); --mg-a: var(--op-a, #ffffff); --mg-b: var(--op-b, #b8892c); --mg-light: var(--op-light, #fff6e0); --hole-at: 1.4s; color: #5b4545; background: radial-gradient(ellipse at 50% 30%, var(--mg-light), var(--mg-sky) 55%, color-mix(in srgb, var(--mg-sky) 80%, #b48a9c)); }
.magia-pegaso .mg-card { color: #5b4545; }
.magia-pegaso .mg-card .op-title { color: var(--mg-b); text-shadow: 0 1px 0 #fff, 0 0 20px #fff; }
.magia-pegaso > .intro-hint { color: #5b4545; }
.magia-pegaso .mg-wings { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.mg-wing-big { position: absolute; top: 56%; right: 50%; width: min(58vw, 480px); height: min(60vh, 520px); margin-top: calc(min(60vh, 520px) / -2); transform-origin: 100% 50%; animation: mgWingIdle 3.4s ease-in-out infinite; }
.mg-wing-r { scale: -1 1; }
.mg-wing-big i { position: absolute; right: 0; top: 50%; height: 8.5%; translate: 0 -50%; width: calc(54% + var(--i) * 4.6%); transform-origin: 100% 50%; transform: rotate(calc(-14deg + var(--i) * 7.5deg)); border-radius: 100% 0 0 100% / 50% 0 0 50%; background: linear-gradient(to left, var(--mg-a), color-mix(in srgb, var(--mg-a) 82%, #c9b8a8)); box-shadow: 0 2px 6px rgba(90, 60, 50, .14); }
@keyframes mgWingIdle { 50% { transform: rotate(-6deg); } }
.magia-pegaso.open .mg-wing-big { animation: mgWingFly calc(1.5s * var(--k)) cubic-bezier(.5, 0, .7, .4) forwards; }
@keyframes mgWingFly { 0% { transform: none; } 30% { transform: rotate(16deg); } 55% { transform: rotate(-28deg) translateY(-6vh); } 100% { transform: rotate(-34deg) translate(-10%, -130vh) scale(1.3); } }
.mg-feathers-fall { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.mg-feathers-fall i { position: absolute; top: -6vh; left: var(--x); width: 10px; height: 34px; border-radius: 50% 50% 50% 50% / 80% 80% 20% 20%; background: linear-gradient(#fff, #e9ddd2); box-shadow: 0 2px 4px rgba(0, 0, 0, .08); opacity: 0; animation: mgFeather var(--t) linear var(--d) infinite; }
@keyframes mgFeather { 0% { transform: rotate(var(--r)); opacity: 0; } 10% { opacity: 1; } 50% { transform: translate(30px, 55vh) rotate(calc(var(--r) * -1)); } 100% { transform: translate(-20px, 112vh) rotate(var(--r)); opacity: 0; } }

/* ==========================================================================
   Ambiente: partículas encima de cualquier apertura (las crea invitation.js)
   ========================================================================== */
.op-ambient { position: absolute; inset: 0; z-index: 8; pointer-events: none; overflow: hidden; transition: opacity .5s; }
.intro.open .op-ambient { opacity: 0; }
.op-ambient i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); opacity: 0; animation: var(--anim) var(--t) ease-in-out var(--d) infinite; }
.amb-destellos i { --anim: ambSpark; border-radius: 50%; background: radial-gradient(circle, #fff, #ffd56b 40%, transparent 70%); }
.amb-luciernagas i { --anim: ambFly; border-radius: 50%; background: #fffbb0; box-shadow: 0 0 10px 3px #e8ff7a; }
.amb-petalos i { --anim: ambFall; top: -6%; width: calc(var(--s) * 2.2); height: calc(var(--s) * 1.4); border-radius: 0 70% 0 70%; background: linear-gradient(135deg, #ffd1dc, #f39bb2); animation-timing-function: linear; }
.amb-nieve i { --anim: ambFall; top: -4%; border-radius: 50%; background: #fff; box-shadow: 0 0 6px rgba(255, 255, 255, .9); animation-timing-function: linear; }
.amb-fugaces i { --anim: ambShoot; width: 130px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #fff, transparent); }
.amb-burbujas i { --anim: ambRise; top: auto; bottom: -6%; width: calc(var(--s) * 3); height: calc(var(--s) * 3); border-radius: 50%; border: 1px solid rgba(255, 255, 255, .75); background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .8), rgba(255, 255, 255, .08) 40%, transparent 70%); }
@keyframes ambSpark { 0%, 100% { opacity: 0; transform: scale(.2); } 50% { opacity: 1; transform: scale(1); } }
@keyframes ambFly { 0% { opacity: 0; transform: none; } 30% { opacity: 1; } 70% { opacity: .8; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)); } }
@keyframes ambFall { 0% { opacity: 0; transform: none; } 10% { opacity: .95; } 100% { opacity: 0; transform: translate(var(--dx), 112vh) rotate(540deg); } }
@keyframes ambShoot { 0% { opacity: 0; transform: rotate(-28deg) translateX(0); } 6% { opacity: 1; } 25%, 100% { opacity: 0; transform: rotate(-28deg) translateX(-70vw); } }
@keyframes ambRise { 0% { opacity: 0; transform: none; } 15% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--dx), -112vh); } }