/* ---------- celebraciones de cumpleaños ---------- */
.cele-ov { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: rgba(8, 8, 16, .8); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: cele-in .3s ease both; }
@keyframes cele-in { from { opacity: 0; } to { opacity: 1; } }
.cele-ov .cele-stage { container-type: size; position: relative; overflow: hidden; aspect-ratio: 3 / 4; width: min(86vw, 340px, calc(78dvh * .75)); border-radius: 28px; box-shadow: 0 30px 80px rgba(0, 0, 0, .55); animation: cele-pop .5s cubic-bezier(.2, 1.3, .4, 1) both; }
.cele-ov.full .cele-stage { width: min(100vw, calc(100dvh * .75)); border-radius: 0; box-shadow: none; }
@keyframes cele-pop { from { transform: scale(.82); opacity: 0; } to { transform: none; opacity: 1; } }
.cele-x { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px; z-index: 5; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .18); color: #fff; font-size: 18px; font-weight: 800; cursor: pointer; }
.cele-ok { position: absolute; bottom: max(18px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 5; border: 0; border-radius: 99px; padding: 12px 26px; font: 800 16px/1 inherit; background: #fff; color: #222; cursor: pointer; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.cele-ov:not(.full) .cele-ok { display: none; }

.cele-stage * { box-sizing: border-box; }
.cele-stage { color: #fff; font-family: inherit; user-select: none; -webkit-user-select: none; }
.cele-txt { position: absolute; left: 0; right: 0; bottom: 7cqw; text-align: center; padding: 0 5cqw; z-index: 4; text-shadow: 0 .6cqw 2cqw rgba(0, 0, 0, .45); }
.cele-t1 { font-size: 8cqw; font-weight: 900; letter-spacing: -.02em; line-height: 1.05; }
.cele-t2 { margin-top: 1.6cqw; font-size: 4.2cqw; font-weight: 700; opacity: .95; }
.cele-ov.full .cele-txt { bottom: 22cqw; }
.cele-ov.full .cele-ok { bottom: max(22px, env(safe-area-inset-bottom)); }

.cele-av { border-radius: 50%; object-fit: cover; display: block; border: 1.1cqw solid #fff; box-shadow: 0 2cqw 6cqw rgba(0, 0, 0, .35); background: #fff; position: relative; z-index: 2; }
.cele-av.big { width: 46cqw; height: 46cqw; }
.cele-av.sm { width: 25cqw; height: 25cqw; }
.cele-init { display: grid; place-items: center; background: var(--c); color: #fff; font-weight: 900; font-size: 20cqw; }
.bd-main { position: absolute; left: 50%; top: 13cqw; transform: translateX(-50%); display: grid; place-items: center; z-index: 3; }
.halo { position: absolute; width: 74cqw; height: 74cqw; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)); animation: halo 2.4s ease-in-out infinite; z-index: 1; }
.halo.gold { background: radial-gradient(closest-side, rgba(255, 224, 138, .85), rgba(245, 197, 66, 0)); }
.halo.warm { background: radial-gradient(closest-side, rgba(255, 214, 160, .8), rgba(255, 150, 80, 0)); }
.halo.cool { background: radial-gradient(closest-side, rgba(180, 210, 255, .55), rgba(120, 160, 255, 0)); }
@keyframes halo { 0%, 100% { transform: scale(.92); opacity: .8; } 50% { transform: scale(1.08); opacity: 1; } }
.bounce { animation: bounce 1.1s ease-in-out infinite; }
@keyframes bounce { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-3.5cqw) rotate(3deg); } }
.bob { animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6cqw); } }

.cf-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.cf { position: absolute; top: -6cqw; left: var(--x); width: var(--w); height: calc(var(--w) * 1.7); background: var(--c); border-radius: .3cqw; animation: cf-fall var(--d) linear var(--dl) infinite; }
@keyframes cf-fall { from { transform: translate3d(0, -8cqh, 0) rotate(0); } to { transform: translate3d(var(--dx), 110cqh, 0) rotate(var(--r)); } }
.fall { position: absolute; top: -8cqw; left: var(--x); font-size: var(--s); animation: cf-fall var(--d) linear var(--dl) infinite; }
.spk { position: absolute; font-size: var(--s); color: #FFE08A; animation: twinkle 1.8s ease-in-out var(--dl) infinite; z-index: 2; }
@keyframes twinkle { 0%, 100% { opacity: .15; transform: scale(.6) rotate(0); } 50% { opacity: 1; transform: scale(1.2) rotate(45deg); } }
.bunting { position: absolute; left: 0; width: 100%; height: 20cqw; z-index: 3; pointer-events: none; }
.bunting { top: 0; }
.bunting + .bunting { top: 7cqw; }
.bunting.flip { transform: scaleX(-1); }
.bunting .pn { transform-box: fill-box; transform-origin: top center; animation: sway 2s ease-in-out calc(var(--i) * -.25s) infinite; }
@keyframes sway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.flag-row { position: absolute; left: 0; right: 0; top: 66cqw; display: flex; justify-content: center; gap: 4cqw; z-index: 3; }
.flag { width: 15cqw; height: auto; border-radius: 1cqw; box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, .3); animation: wave 1.6s ease-in-out infinite; }
.flag:nth-child(2) { animation-delay: -.5s; } .flag:nth-child(3) { animation-delay: -1s; }
@keyframes wave { 0%, 100% { transform: rotate(-5deg) skewY(-3deg); } 50% { transform: rotate(5deg) skewY(3deg); } }
.note { position: absolute; font-size: 8cqw; z-index: 3; animation: bob 1.6s ease-in-out infinite; }
.n1 { left: 10cqw; top: 40cqw; } .n2 { right: 10cqw; top: 46cqw; animation-delay: -.8s; }

/* tortas */
.cake { width: 100%; height: auto; display: block; overflow: visible; }
.cake-wrap { width: 38cqw; position: relative; z-index: 3; }
.flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flame 8s ease-in-out infinite; animation-delay: calc(var(--i) * .15s); }
@keyframes flame { 0%, 38% { transform: scale(1, 1); } 8% { transform: scale(.9, 1.15); } 16% { transform: scale(1.05, .9); } 24% { transform: scale(.92, 1.12); } 32% { transform: scale(1.04, .94); } 42% { transform: scale(1.1, .6) skewX(-12deg); } 46%, 94% { transform: scale(0); } 100% { transform: scale(1, 1); } }
.smoke { opacity: 0; stroke-dasharray: 14; animation: smoke 8s ease-out infinite; animation-delay: calc(var(--i) * .15s); }
@keyframes smoke { 0%, 44% { opacity: 0; stroke-dashoffset: 14; transform: translateY(0); } 50% { opacity: .9; stroke-dashoffset: 0; } 78% { opacity: 0; transform: translateY(-6px); } 100% { opacity: 0; } }
.puffs { position: absolute; top: 40%; width: 12cqw; height: 6cqw; }
.puffs.r { right: -11cqw; } .puffs.l { left: -11cqw; }
.puffs i { position: absolute; top: 50%; left: 0; width: 3cqw; height: 3cqw; border-radius: 50%; background: rgba(255, 255, 255, .85); opacity: 0; animation: puff 8s ease-out infinite; animation-delay: calc(var(--i) * .12s); }
.puffs.l i { animation-name: puff-l; }
@keyframes puff { 0%, 34% { opacity: 0; transform: translate(0, 0) scale(.5); } 40% { opacity: 1; } 48% { opacity: 0; transform: translate(10cqw, -1cqw) scale(1.5); } 100% { opacity: 0; } }
@keyframes puff-l { 0%, 34% { opacity: 0; transform: translate(0, 0) scale(.5); } 40% { opacity: 1; } 48% { opacity: 0; transform: translate(-10cqw, -1cqw) scale(1.5); } 100% { opacity: 0; } }
.friend { position: relative; }
.friend.l { transform: translateY(-6cqw) rotate(9deg); margin-right: -3cqw; }
.friend.r { transform: translateY(-6cqw) rotate(-9deg); margin-left: -3cqw; }

/* Silvita */
.sc-silvita { background: linear-gradient(160deg, #8B5CF6, #C4B5FD 60%, #F5D0FE); }
.sc-silvita .bd-main { top: 9cqw; } .sc-silvita .cele-av.big { width: 40cqw; height: 40cqw; }
.blow-row { position: absolute; left: 0; right: 0; bottom: 30cqw; display: flex; justify-content: center; align-items: flex-end; z-index: 3; }
/* Nico */
.sc-nico { background: linear-gradient(160deg, #F59E0B, #FDE047 55%, #FEF9C3); }
.sc-nico .cele-txt { text-shadow: 0 .6cqw 2cqw rgba(120, 70, 0, .5); }
.sc-nico .bd-main { top: 9cqw; } .sc-nico .cele-av.big { width: 42cqw; height: 42cqw; }
.bd-main.solo .puffs { top: 60%; right: -14cqw; }
.solo-cake { position: absolute; left: 50%; bottom: 31cqw; transform: translateX(-50%); width: 40cqw; }
.sc-default { background: linear-gradient(160deg, #6366F1, #A78BFA 60%, #F0ABFC); }
.sc-default .bd-main { top: 9cqw; } .sc-default .cele-av.big { width: 42cqw; height: 42cqw; }
/* Franco */
.sc-franco { background: linear-gradient(170deg, #0F9D58, #34D399 55%, #FDE047); }
.ball { position: absolute; bottom: 36cqw; left: -10cqw; font-size: 9cqw; z-index: 3; animation: roll 4.5s linear infinite; }
@keyframes roll { from { transform: translateX(0) rotate(0); } to { transform: translateX(120cqw) rotate(900deg); } }
/* Vale */
.sc-vale { background: linear-gradient(160deg, #1E1B4B, #4C1D95 55%, #BE185D); }
.rays { position: absolute; left: 50%; top: 36cqw; width: 150cqw; height: 150cqw; margin: -75cqw 0 0 -75cqw; background: repeating-conic-gradient(rgba(255, 255, 255, .13) 0 6deg, transparent 6deg 12deg); animation: spin 18s linear infinite; z-index: 1; border-radius: 50%; -webkit-mask: radial-gradient(closest-side, #000 40%, transparent); mask: radial-gradient(closest-side, #000 40%, transparent); }
@keyframes spin { to { transform: rotate(360deg); } }
.petal { position: absolute; top: -8cqw; }
.jp { position: absolute; z-index: 2; font-weight: 900; color: #fff; writing-mode: vertical-rl; text-orientation: upright; letter-spacing: .4cqw; text-shadow: 0 0 3cqw #F472B6, 0 0 6cqw #A78BFA; animation: glow 2.2s ease-in-out infinite; }
.j1 { left: 5cqw; top: 8cqw; font-size: 8cqw; line-height: 1.1; } .j1 br { display: none; }
.j2 { right: 6cqw; top: 10cqw; font-size: 9cqw; animation-delay: -.8s; } .j3 { right: 17cqw; top: 38cqw; font-size: 5.5cqw; animation-delay: -1.4s; }
@keyframes glow { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
.kw { position: absolute; font-size: 9cqw; z-index: 2; animation: bob 2s ease-in-out infinite; }
.k1 { left: 8cqw; top: 54cqw; } .k2 { right: 8cqw; top: 58cqw; animation-delay: -.6s; } .k3 { left: 20cqw; top: 22cqw; animation-delay: -1s; } .k4 { right: 20cqw; top: 6cqw; animation-delay: -1.5s; } .k5 { left: 44cqw; top: 62cqw; animation-delay: -.3s; }
.eyes-sp { position: absolute; color: #fff; font-size: 7cqw; z-index: 4; animation: twinkle 1.4s ease-in-out infinite; }
.eyes-sp.s1 { left: -2cqw; top: 6cqw; } .eyes-sp.s2 { right: -3cqw; top: 26cqw; animation-delay: -.7s; }
/* Pupi */
.sc-pupi { background: linear-gradient(180deg, #F0ABFC 0%, #E879F9 38%, #38BDF8 38%, #0EA5E9 100%); }
.track { position: absolute; left: 0; right: 0; top: 6cqw; height: 42cqw; border-bottom: 2.4cqw solid rgba(255, 255, 255, .5); }
.track::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1cqw; height: 1cqw; background: repeating-linear-gradient(90deg, #fff 0 6cqw, transparent 6cqw 12cqw); animation: lane 1s linear infinite; }
@keyframes lane { to { background-position: -12cqw 0; } }
.runner { position: absolute; bottom: 1cqw; left: -30%; animation: run 7s linear infinite; }
.runner .cele-av { width: 34cqw; height: 34cqw; animation: runbob .32s ease-in-out infinite; }
.runner .dust { position: absolute; left: -9cqw; bottom: 2cqw; font-size: 8cqw; animation: bob .5s ease-in-out infinite; }
.runner .sweat { position: absolute; right: -5cqw; top: -2cqw; font-size: 6cqw; animation: bob .7s ease-in-out infinite; }
@keyframes runbob { 0%, 100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-3.4cqw) rotate(8deg); } }
@keyframes run { 0% { left: -32%; opacity: 1; } 42% { left: 104%; opacity: 1; } 43%, 100% { left: 104%; opacity: 0; } }
.pool { position: absolute; left: 0; right: 0; top: 52cqw; height: 32cqw; overflow: hidden; }
.waves { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 26cqw; animation: slide 3s ease-in-out infinite alternate; }
@keyframes slide { from { transform: translateX(-3cqw); } to { transform: translateX(3cqw); } }
.swimmer { position: absolute; bottom: 5cqw; left: -30%; animation: swim 7s linear infinite; }
.swimmer .cele-av { width: 28cqw; height: 28cqw; animation: swimbob .9s ease-in-out infinite; }
.swimmer .pspl { position: absolute; right: -8cqw; top: 6cqw; font-size: 7cqw; animation: bob .6s ease-in-out infinite; }
@keyframes swimbob { 0%, 100% { transform: translateY(2cqw) rotate(-10deg); } 50% { transform: translateY(-1cqw) rotate(10deg); } }
@keyframes swim { 0%, 46% { left: -32%; opacity: 0; } 48% { left: -32%; opacity: 1; } 92% { left: 104%; opacity: 1; } 93%, 100% { left: 104%; opacity: 0; } }
.pmedal { position: absolute; right: 6cqw; top: 60cqw; font-size: 12cqw; z-index: 3; animation: bounce 1.4s ease-in-out infinite; }
/* David — bombucha */
.sc-david { background: linear-gradient(160deg, #A8D4F5, #E6F3FF); animation: nudge 8s ease-in-out infinite; }
@keyframes nudge { 0%, 52%, 100% { transform: none; } 54% { transform: translate(-2cqw, 1cqw); } 56% { transform: translate(2cqw, -1cqw); } 58% { transform: translate(-2cqw, -1cqw); } 60% { transform: translate(2cqw, 1cqw); } 62% { transform: translate(-1cqw, 0); } 64% { transform: none; } }
.sc-david .cele-t1, .sc-david .cele-t2 { color: #0B4A8F; text-shadow: none; }
.win { position: absolute; right: 5cqw; top: 8cqw; width: 52cqw; height: 44cqw; border-radius: 3cqw; background: #fff; border: .5cqw solid #4B8BD6; overflow: hidden; box-shadow: 0 2cqw 6cqw rgba(0, 40, 100, .25); z-index: 1; }
.win-bar { height: 7cqw; display: flex; align-items: center; gap: 2cqw; padding: 0 2cqw; background: linear-gradient(#5B9BE0, #2F6FC0); color: #fff; font-size: 3.4cqw; }
.win-bar i { width: 3.6cqw; height: 3.6cqw; border-radius: 50%; background: radial-gradient(#9BE564, #3FA33F); } .win-bar span { flex: 1; } .win-bar em { font-style: normal; letter-spacing: 1cqw; }
.win-body { display: grid; place-items: center; text-align: center; height: 37cqw; }
.win-cake { font-size: 16cqw; line-height: 1; animation: bob 2s ease-in-out infinite; } .win-hearts { font-size: 6cqw; margin-top: 2cqw; }
.wet { position: absolute; inset: 7cqw 0 0 0; background: linear-gradient(rgba(59, 155, 255, .55), rgba(59, 155, 255, .2)); opacity: 0; animation: wet 8s ease-out infinite; }
@keyframes wet { 0%, 51% { opacity: 0; transform: translateY(-30%); } 56% { opacity: 1; transform: translateY(0); } 90% { opacity: .5; } 100% { opacity: 0; } }
.thrower { position: absolute; left: 4cqw; bottom: 30cqw; z-index: 3; }
.thrower .cele-av { width: 34cqw; height: 34cqw; transform-origin: 50% 90%; animation: throw 8s ease-in-out infinite; }
@keyframes throw { 0%, 20% { transform: rotate(0); } 28% { transform: rotate(-16deg) translateX(-1cqw); } 36% { transform: rotate(14deg) translateX(2cqw); } 44%, 100% { transform: rotate(0); } }
.balloon { position: absolute; width: 9cqw; z-index: 4; left: 30cqw; bottom: 54cqw; opacity: 0; animation: fly 8s linear infinite; }
@keyframes fly { 0%, 33% { opacity: 0; transform: translate(0, 0) scale(.6); } 35% { opacity: 1; transform: translate(0, 0) scale(.9); } 46% { opacity: 1; transform: translate(20cqw, -30cqw) rotate(180deg) scale(1.1); } 52% { opacity: 1; transform: translate(38cqw, -22cqw) rotate(340deg) scale(1.2); } 53%, 100% { opacity: 0; transform: translate(38cqw, -22cqw) scale(0); } }
.boom { position: absolute; left: 70cqw; top: 40cqw; width: 0; height: 0; z-index: 4; }
.boom span { position: absolute; width: 3.4cqw; height: 3.4cqw; border-radius: 50%; background: #3B9BFF; opacity: 0; animation: drop 8s ease-out infinite; transform: rotate(calc(var(--a) * 60deg)); }
.boom em { position: absolute; left: -7cqw; top: -7cqw; font-size: 14cqw; font-style: normal; opacity: 0; animation: splashem 8s ease-out infinite; }
@keyframes drop { 0%, 52% { opacity: 0; transform: rotate(calc(var(--a) * 60deg)) translateY(0); } 54% { opacity: 1; } 66% { opacity: 0; transform: rotate(calc(var(--a) * 60deg)) translateY(-16cqw); } 100% { opacity: 0; } }
@keyframes splashem { 0%, 52% { opacity: 0; transform: scale(.3); } 56% { opacity: 1; transform: scale(1.2); } 74% { opacity: 0; transform: scale(1.6); } 100% { opacity: 0; } }
/* Pablo */
.sc-pablo { background: radial-gradient(circle at 50% 30%, #3B3216, #12100A 70%); }
.sc-pablo .halo { width: 82cqw; height: 82cqw; }
.chain { position: absolute; left: 50%; bottom: 2.5cqw; width: 34cqw; transform: translateX(-50%); z-index: 4; filter: drop-shadow(0 1cqw 1.4cqw rgba(0, 0, 0, .5)); animation: shine 2.4s ease-in-out infinite; }
@keyframes shine { 0%, 100% { filter: drop-shadow(0 1cqw 1.4cqw rgba(0, 0, 0, .5)) brightness(1); } 50% { filter: drop-shadow(0 0 3cqw rgba(255, 224, 138, .9)) brightness(1.3); } }
.coin { position: absolute; font-size: 8cqw; z-index: 3; animation: bob 1.8s ease-in-out infinite; } .c1 { left: 7cqw; top: 32cqw; } .c2 { right: 8cqw; top: 44cqw; animation-delay: -.6s; } .c3 { left: 12cqw; top: 60cqw; animation-delay: -1.2s; }
.sc-pablo .flag-row { top: 70cqw; }
/* Dari — cine */
.sc-dari { background: radial-gradient(circle at 50% 25%, #3a1d22, #0b0608 75%); }
.curtain { position: absolute; top: 0; bottom: 0; width: 22cqw; z-index: 2; background: repeating-linear-gradient(90deg, #7F1126 0 3cqw, #A3162F 3cqw 6cqw); box-shadow: inset 0 0 8cqw rgba(0, 0, 0, .55); } .curtain.l { left: 0; border-radius: 0 0 10cqw 0; } .curtain.r { right: 0; border-radius: 0 0 0 10cqw; }
.spot { position: absolute; left: 50%; top: -10cqw; width: 90cqw; height: 100cqw; margin-left: -45cqw; background: conic-gradient(from 180deg at 50% 0, transparent 160deg, rgba(255, 244, 214, .32) 180deg, transparent 200deg); transform-origin: 50% 0; animation: sweep 6s ease-in-out infinite alternate; z-index: 1; }
@keyframes sweep { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
.pop { position: absolute; top: -8cqw; }
.film { position: absolute; top: 0; bottom: 0; width: 6cqw; z-index: 3; background: repeating-linear-gradient(#111 0 3.4cqw, #e8e0cc 3.4cqw 5cqw, #111 5cqw 8.4cqw); opacity: .85; animation: reel 1.4s linear infinite; background-size: 100% 8.4cqw; } .film.l { left: 22cqw; } .film.r { right: 22cqw; }
@keyframes reel { to { background-position: 0 8.4cqw; } }
.poster-top { position: absolute; left: 0; right: 0; top: 10cqw; text-align: center; font-size: 3.6cqw; letter-spacing: .5cqw; font-weight: 800; color: #F3E3B3; z-index: 4; text-shadow: 0 0 3cqw rgba(255, 220, 140, .6); }
.sc-dari .bd-main { top: 22cqw; } .sc-dari .cele-av.big { width: 40cqw; height: 40cqw; border-color: #F3E3B3; }
.clap { position: absolute; right: 10cqw; bottom: 36cqw; width: 22cqw; z-index: 4; animation: bob 2s ease-in-out infinite; } .clap .arm { transform-box: fill-box; transform-origin: 0 100%; animation: clap 3s ease-in-out infinite; }
@keyframes clap { 0%, 60%, 100% { transform: rotate(-24deg); } 70% { transform: rotate(0); } }
.bars { position: absolute; left: 0; right: 0; height: 9cqw; background: #000; z-index: 3; } .bars.t { top: 0; } .bars.b { bottom: 0; }
.cele-ov.full .sc-dari .bars.b { display: none; }
.grain { position: absolute; inset: 0; z-index: 5; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px); animation: flick .18s steps(2) infinite; mix-blend-mode: screen; }
@keyframes flick { 50% { opacity: .55; transform: translateY(1px); } }
/* Tebi — surf */
.sc-tebi { background: linear-gradient(180deg, #7DD3FC 0%, #FDE68A 48%, #FDBA74 62%, #0EA5E9 62%); }
.sun { position: absolute; left: 50%; top: 40cqw; width: 34cqw; height: 34cqw; margin-left: -17cqw; border-radius: 50%; background: radial-gradient(#FFF7C2, #FDBA74 70%, transparent 71%); animation: halo 3s ease-in-out infinite; }
.gull { position: absolute; font-size: 7cqw; color: #fff; z-index: 2; animation: bob 2.2s ease-in-out infinite; } .g1 { left: 14cqw; top: 14cqw; } .g2 { right: 18cqw; top: 22cqw; animation-delay: -1s; }
.surfer { position: absolute; left: 0; right: 0; top: 27cqw; z-index: 4; display: flex; justify-content: center; }
.rider { position: relative; width: 44cqw; animation: ride 3.4s ease-in-out infinite; }
.rider .cele-av { width: 34cqw; height: 34cqw; margin: 0 auto; }
.board { display: block; width: 46cqw; margin: 1.5cqw auto 0; position: relative; z-index: 3; }
@keyframes ride { 0%, 100% { transform: translate(-6cqw, 4cqw) rotate(-10deg); } 50% { transform: translate(6cqw, -2cqw) rotate(10deg); } }
.sea { position: absolute; left: -10%; width: 120%; height: 40cqw; z-index: 5; } .sea.s1 { top: 58cqw; animation: slide 2.6s ease-in-out infinite alternate; } .sea.s2 { top: 66cqw; animation: slide 2s ease-in-out -1s infinite alternate-reverse; z-index: 6; }
.spray i { position: absolute; left: 50%; top: 62cqw; width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: #fff; z-index: 6; opacity: 0; animation: spray 1.8s ease-out infinite; animation-delay: calc(var(--i) * .3s); }
@keyframes spray { 0% { opacity: 0; transform: translate(-6cqw, 0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-14cqw + var(--i) * 6cqw), -14cqw); } }
.sc-tebi .cele-txt { z-index: 7; }
.sc-tebi .cf-layer { z-index: 2; }
/* Diego — tranqui */
.sc-diego { background: linear-gradient(180deg, #0B1026, #1B2A55 60%, #28506B); }
.star { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: #fff; animation: twinkle 3.4s ease-in-out var(--dl) infinite; }
.moon { position: absolute; right: 10cqw; top: 8cqw; width: 14cqw; height: 14cqw; border-radius: 50%; background: #FEF3C7; box-shadow: 0 0 6cqw rgba(254, 243, 199, .6), inset -3cqw -1cqw 0 #E8D79A; }
.lantern { position: absolute; width: 11cqw; bottom: -14cqw; left: calc(8cqw + var(--i) * 20cqw); filter: drop-shadow(0 0 4cqw rgba(255, 190, 90, .8)); animation: lantern-rise 11s ease-in infinite; animation-delay: calc(var(--i) * -2.2s); z-index: 2; }
@keyframes lantern-rise { 0% { transform: translate(0, 0) scale(.8); opacity: 0; } 12% { opacity: 1; } 100% { transform: translate(calc(var(--i) * 2cqw - 4cqw), -140cqw) scale(1.1); opacity: 0; } }
.ff { position: absolute; width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: #FDE68A; box-shadow: 0 0 3cqw #FDE68A; left: calc(var(--i) * 13cqw + 4cqw); top: calc(52cqw + (var(--i) * 7 % 5) * 6cqw); animation: ff 4s ease-in-out calc(var(--i) * -.7s) infinite; z-index: 2; }
@keyframes ff { 0%, 100% { opacity: .1; transform: translate(0, 0); } 50% { opacity: 1; transform: translate(4cqw, -5cqw); } }
.bd-main.calm { top: 18cqw; } .breathe { animation: breathe 4.5s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.water { position: absolute; left: 0; right: 0; bottom: 0; height: 26cqw; background: linear-gradient(rgba(40, 80, 107, 0), rgba(10, 20, 40, .6)); z-index: 1; overflow: hidden; }
.water i { position: absolute; left: 20%; right: 20%; height: .5cqw; background: rgba(255, 255, 255, .25); border-radius: 1cqw; animation: ripple 5s ease-in-out infinite; } .water i:nth-child(1) { top: 6cqw; } .water i:nth-child(2) { top: 12cqw; left: 30%; right: 30%; animation-delay: -1.6s; } .water i:nth-child(3) { top: 18cqw; animation-delay: -3s; }
@keyframes ripple { 0%, 100% { transform: scaleX(.6); opacity: .1; } 50% { transform: scaleX(1.1); opacity: .6; } }
/* Cristian */
.sc-cristian { background: linear-gradient(170deg, #0B5FA5, #2FA7E0 45%, #BFE6FA 85%, #fff); }
.heart { position: absolute; top: -8cqw; }
.route { position: absolute; left: 8cqw; right: 8cqw; top: 70cqw; height: 22cqw; z-index: 3; }
.route svg { position: absolute; left: 10%; right: 10%; top: 0; width: 80%; height: 14cqw; }
.route .pt { position: absolute; bottom: 0; font-size: 3.6cqw; font-weight: 800; padding: .8cqw 2.4cqw; border-radius: 99px; background: rgba(255, 255, 255, .92); color: #0B5FA5; }
.route .pt.a { left: 0; } .route .pt.b { right: 0; }
.route .fly { position: absolute; left: 12%; top: 5cqw; font-size: 7cqw; animation: heartfly 4s ease-in-out infinite; }
@keyframes heartfly { 0% { transform: translate(0, 4cqw); } 50% { transform: translate(28cqw, -6cqw) scale(1.2); } 100% { transform: translate(56cqw, 4cqw); } }
.sc-cristian .cele-txt { text-shadow: 0 .6cqw 2cqw rgba(0, 40, 90, .6); }
.sc-cristian .cele-t2 { font-size: 3.7cqw; }

@media (prefers-reduced-motion: reduce) {
  .cele-stage *, .cele-stage { animation-duration: .001s !important; animation-iteration-count: 1 !important; }
  .cf-layer, .fall { display: none; }
}