.cielo{z-index:-1;background:linear-gradient(180deg, var(--cielo-a) 0%, var(--cielo-b) 52%, var(--cielo-c) 100%);--nube-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='500'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.009 0.016' numOctaves='4' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 9 -4.2'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E");transition:background 1.2s;position:fixed;inset:0;overflow:hidden}.atmosfera{pointer-events:none;background:radial-gradient(145% 78% at 50% 112%, color-mix(in srgb, var(--cielo-c) 82%, white) 0%, transparent 56%), radial-gradient(95% 62% at 50% -14%, color-mix(in srgb, var(--cielo-a) 72%, black) 0%, transparent 62%);transition:background 1.2s;position:absolute;inset:0}.sol{aspect-ratio:1;opacity:0;background:radial-gradient(circle,#fff 0%,#ffeeb4 26%,#ffce5a59 54%,#0000 72%);border-radius:50%;width:clamp(90px,14vw,170px);transition:opacity 1.2s,transform 1.2s,background 1.2s,width 1.2s;position:absolute;top:7%;right:14%}.sol:before{content:"";background:radial-gradient(circle,#ffe1964d 0%,#0000 62%);border-radius:50%;position:absolute;inset:-60%}@keyframes latir{50%{transform:scale(1.05)}}html[data-clima=soleado] .sol{opacity:1;animation:7s ease-in-out infinite latir}html[data-clima=lluvia] .sol{opacity:.12;transform:translateY(-14px)}html[data-clima=nieve] .sol{opacity:.1}html[data-clima=calor] .sol{opacity:1;background:radial-gradient(circle,#fff 0%,#fff3ad 20%,#ff9e2c 50%,#ff781447 66%,#0000 78%);width:clamp(150px,24vw,300px);animation:3.5s ease-in-out infinite latir}html[data-clima=calor] .sol:before{background:radial-gradient(circle,#ff962859 0%,#0000 60%)}.estrato{pointer-events:none;transition:opacity 1.2s,height 1.2s;position:absolute;left:0;right:0;overflow:hidden;mask:linear-gradient(#0000 0%,#000 26% 72%,#0000 100%)}.estrato .track{will-change:transform;width:200%;display:flex;position:absolute;inset:0}.estrato i{background:var(--nube,#ffffffd9);height:100%;-webkit-mask:var(--nube-img) 0 0 / 50% 100% repeat-x;mask:var(--nube-img) 0 0 / 50% 100% repeat-x;flex:0 0 50%;transition:background 1.2s}@keyframes deriva{to{transform:translate(-50%)}}.estrato-lejos{opacity:.5;height:46%;top:1%}.estrato-lejos .track{animation:150s linear infinite deriva}.estrato-media{opacity:.75;height:44%;top:10%}.estrato-media .track{animation:100s linear infinite deriva}.estrato-cerca{opacity:1;height:42%;top:20%}.estrato-cerca .track{animation:66s linear infinite deriva}html[data-clima=electrica]{--nube:#18243aeb}html[data-clima=huracan]{--nube:#344640e6}html[data-clima=lluvia]{--nube:#96a4b4e0}html[data-clima=nieve]{--nube:#d2e0eceb}html[data-clima=tormenta]{--nube:#747e8ceb}html[data-clima=calor]{--nube:#ffe8ce66}html[data-clima=soleado]{--nube:#ffffffd9}html[data-clima=calor] .estrato-media,html[data-clima=calor] .estrato-cerca,html[data-clima=soleado] .estrato-media,html[data-clima=soleado] .estrato-cerca{opacity:.2}html[data-clima=huracan] .estrato{height:52%}html[data-clima=huracan] .estrato-lejos .track{animation-duration:30s}html[data-clima=huracan] .estrato-media .track{animation-duration:20s}html[data-clima=huracan] .estrato-cerca .track{animation-duration:13s}.nieve-capa{opacity:0;pointer-events:none;background-repeat:repeat;transition:opacity .9s;position:absolute;bottom:-40px;left:-4%;right:-4%}.nieve-lejos{background-image:radial-gradient(1.6px 1.6px at 20% 30%,#fff 45%,#0000 46%),radial-gradient(1.4px 1.4px at 65% 55%,#fff 45%,#0000 46%),radial-gradient(1.8px 1.8px at 82% 22%,#fff 45%,#0000 46%);background-size:280px 280px;top:-600px}.nieve-cerca{background-image:radial-gradient(3px 3px at 30% 40%,#fff 50%,#0000 52%),radial-gradient(2.6px 2.6px at 75% 70%,#fff 50%,#0000 52%),radial-gradient(3.4px 3.4px at 12% 80%,#fff 50%,#0000 52%);background-size:340px 340px;top:-700px}@keyframes nevar-lejos{0%{transform:translateY(-560px)}50%{transform:translate(14px,-280px)}to{transform:translate(0,0)}}@keyframes nevar-cerca{0%{transform:translateY(-680px)}50%{transform:translate(-18px,-340px)}to{transform:translate(0,0)}}html[data-clima=nieve] .nieve-lejos{opacity:.75;will-change:transform;animation:17s linear infinite nevar-lejos}html[data-clima=nieve] .nieve-cerca{opacity:.95;will-change:transform;animation:11s linear infinite nevar-cerca}.heat{opacity:0;pointer-events:none;background:linear-gradient(#0000 0%,#ffbe780f 55%,#ffbe7833 100%);height:40%;transition:opacity .9s;position:absolute;bottom:0;left:0;right:0}html[data-clima=calor] .heat{opacity:1;animation:3.2s ease-in-out infinite shimmer}@keyframes shimmer{0%,to{transform:translateY(0)scaleY(1)}50%{transform:translateY(-4px)scaleY(1.035)}}.rayo{opacity:0;pointer-events:none;width:min(58vw,500px);height:74%;position:absolute;top:-2%;left:50%;transform:translate(-32%)}.rayo-glow-linea{fill:none;stroke:#7fb0ff73;stroke-width:9px;stroke-linejoin:round;stroke-linecap:round}.rayo-linea{fill:none;stroke:#f4f9ff;stroke-width:2.4px;stroke-linejoin:round;stroke-linecap:round}.rayo-flash{opacity:0;pointer-events:none;background:radial-gradient(58% 46% at 56% 16%,#cee3ff80,#0000 70%);position:absolute;inset:0}html[data-clima=electrica] .rayo{animation:7s infinite rayo-bolt}html[data-clima=electrica] .rayo-flash{animation:7s infinite rayo-glow}@keyframes rayo-bolt{0%,17%{opacity:0}18%{opacity:1}19%{opacity:.15}20.5%{opacity:.95}22%{opacity:0}60%,61%{opacity:0}62%{opacity:1}63.5%{opacity:0}to{opacity:0}}@keyframes rayo-glow{0%,17.5%{opacity:0}18.5%{opacity:.6}20%{opacity:.18}21%{opacity:.5}23%{opacity:0}61.5%{opacity:.5}63.5%{opacity:0}to{opacity:0}}.vineta{pointer-events:none;background:radial-gradient(125% 105% at 50% 42%,#0000 58%,#0a101e38 100%);position:absolute;inset:0}@media (width<=768px){.estrato-lejos,.nieve-lejos{display:none}.nieve-cerca{background-image:radial-gradient(3px 3px at 30% 40%,#fff 50%,#0000 52%),radial-gradient(2.6px 2.6px at 75% 70%,#fff 50%,#0000 52%)}.sol{width:clamp(80px,22vw,120px)}html[data-clima=calor] .sol{width:clamp(120px,34vw,180px)}.rayo-glow-linea{stroke-width:7px}}