.escena {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 40px;
  font-size: 40px;
  line-height: 0;
  vertical-align: middle;
  flex: 0 0 auto;
  --caida-ritmo: 1.45s;
  --calor-ritmo: 3.2s;
  --calor-alfa: 0.8;
  --viento-ritmo: 1.8s;
  --viento-alfa: 0.85;
}

.escena--mini { width: 22px; height: 22px; font-size: 22px; }
.escena--media { width: 28px; height: 28px; font-size: 28px; }
.escena--marca { width: 40px; height: 40px; font-size: 40px; }
.escena--grande { width: 64px; height: 64px; font-size: 64px; }

.escena--lluvia,
.escena--tormenta,
.escena--calor,
.escena--viento,
.escena--nieve,
.escena--aguanieve {
  overflow: hidden;
}

.escena--huracan.huracan-icono {
  width: inherit;
  height: inherit;
}

.huracan-icono__giro {
  animation-duration: var(--giro, 9s);
}

.city-list__name {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.weather-hero__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
}

@media (max-width: 480px) {
  .weather-hero__icon {
    justify-self: center;
  }
}

.weather-hero--sol,
[data-theme="light"] .weather-hero--sol,
[data-theme="dark"] .weather-hero--sol {
  background: linear-gradient(145deg, #ffe7a3 0%, #fffaf0 46%, #b7e6fb 100%);
  border-color: #f3d98a;
  color: #13405f;
}

.weather-hero--calor,
[data-theme="light"] .weather-hero--calor,
[data-theme="dark"] .weather-hero--calor {
  background: linear-gradient(150deg, #ffb15a 0%, #fff4df 42%, #ffd089 100%);
  border-color: #f0a202;
  color: #6a3410;
}

.weather-hero--calor .weather-hero__cond,
[data-theme="dark"] .weather-hero--calor .weather-hero__cond {
  color: #8a4b16;
}

.weather-hero--sol .weather-hero__cond,
.weather-hero--lluvia .weather-hero__cond,
.weather-hero--tormenta .weather-hero__cond,
.weather-hero--huracan .weather-hero__cond,
.weather-hero--aguanieve .weather-hero__cond,
.weather-hero--nieve .weather-hero__cond,
.weather-hero--niebla .weather-hero__cond,
.weather-hero--parcial .weather-hero__cond,
.weather-hero--nublado .weather-hero__cond,
.weather-hero--viento .weather-hero__cond,
.weather-hero--cielo .weather-hero__cond,
[data-theme="dark"] .weather-hero--sol .weather-hero__cond,
[data-theme="dark"] .weather-hero--lluvia .weather-hero__cond,
[data-theme="dark"] .weather-hero--tormenta .weather-hero__cond,
[data-theme="dark"] .weather-hero--huracan .weather-hero__cond,
[data-theme="dark"] .weather-hero--aguanieve .weather-hero__cond,
[data-theme="dark"] .weather-hero--nieve .weather-hero__cond,
[data-theme="dark"] .weather-hero--niebla .weather-hero__cond,
[data-theme="dark"] .weather-hero--parcial .weather-hero__cond,
[data-theme="dark"] .weather-hero--nublado .weather-hero__cond,
[data-theme="dark"] .weather-hero--viento .weather-hero__cond,
[data-theme="dark"] .weather-hero--cielo .weather-hero__cond {
  color: #3d6f8c;
}

.weather-hero--lluvia,
.weather-hero--tormenta,
.weather-hero--huracan,
.weather-hero--aguanieve,
[data-theme="light"] .weather-hero--lluvia,
[data-theme="light"] .weather-hero--tormenta,
[data-theme="light"] .weather-hero--huracan,
[data-theme="light"] .weather-hero--aguanieve,
[data-theme="dark"] .weather-hero--lluvia,
[data-theme="dark"] .weather-hero--tormenta,
[data-theme="dark"] .weather-hero--huracan,
[data-theme="dark"] .weather-hero--aguanieve {
  background: linear-gradient(160deg, #7eafd4 0%, #f4fbff 52%, #d5e6f2 100%);
  border-color: #9dcee8;
  color: #13405f;
}

.weather-hero--nieve,
.weather-hero--niebla,
.weather-hero--nublado,
.weather-hero--parcial,
.weather-hero--viento,
.weather-hero--cielo,
[data-theme="light"] .weather-hero--nieve,
[data-theme="light"] .weather-hero--niebla,
[data-theme="light"] .weather-hero--nublado,
[data-theme="light"] .weather-hero--parcial,
[data-theme="light"] .weather-hero--viento,
[data-theme="light"] .weather-hero--cielo,
[data-theme="dark"] .weather-hero--nieve,
[data-theme="dark"] .weather-hero--niebla,
[data-theme="dark"] .weather-hero--nublado,
[data-theme="dark"] .weather-hero--parcial,
[data-theme="dark"] .weather-hero--viento,
[data-theme="dark"] .weather-hero--cielo {
  background: linear-gradient(160deg, #d7e7f2 0%, #f8fcff 55%, #e7eef4 100%);
  border-color: #9dcee8;
  color: #13405f;
}

.weather-hero--noche,
[data-theme="light"] .weather-hero--noche,
[data-theme="dark"] .weather-hero--noche {
  background: linear-gradient(155deg, #16324c 0%, #245074 50%, #10283c 100%);
  border-color: #3d6480;
  color: #f4fbff;
}

.weather-hero--noche .weather-hero__cond,
[data-theme="dark"] .weather-hero--noche .weather-hero__cond {
  color: #d5e8f4;
}

.escena__disco,
.escena__rayos,
.escena__nube,
.escena__gota,
.escena__copo,
.escena__bruma,
.escena__luna,
.escena__estrella,
.escena__brasa,
.escena__onda,
.escena__rafaga,
.escena__relampago {
  position: absolute;
  display: block;
}

.escena__disco {
  left: 27%;
  top: 27%;
  width: 46%;
  height: 46%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #fff6c8, #ffc857 48%, #e8941a 100%);
  box-shadow: 0 0 0.18em rgba(255, 196, 70, 0.7);
  z-index: 1;
}

.escena--sol .escena__disco {
  animation: escena-brasa 3.4s ease-in-out infinite;
}

.escena__rayos {
  inset: 4%;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, #ffc857 0deg 9deg, transparent 9deg 45deg);
  -webkit-mask: radial-gradient(circle, transparent 42%, #000 48% 64%, transparent 70%);
  mask: radial-gradient(circle, transparent 42%, #000 48% 64%, transparent 70%);
  animation: escena-giro 18s linear infinite;
}

.escena--parcial .escena__disco {
  left: 8%;
  top: 6%;
  width: 42%;
  height: 42%;
}

.escena__nube {
  left: 10%;
  top: 28%;
  width: 78%;
  height: 42%;
  z-index: 2;
}

.escena__nube span {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: #f7fcff;
  box-shadow: 0 0.08em 0 rgba(170, 205, 225, 0.45);
}

.escena__nube span:nth-child(1) { left: 0; top: 30%; width: 42%; height: 68%; }
.escena__nube span:nth-child(2) { left: 24%; top: 0; width: 50%; height: 92%; }
.escena__nube span:nth-child(3) { right: 0; top: 28%; width: 40%; height: 66%; }

.escena__nube--oscura span { background: #d5e2ee; }

.escena--parcial .escena__nube { animation: escena-deriva 3.6s ease-in-out infinite; }
.escena--nublado .escena__nube { animation: escena-deriva 4.2s ease-in-out infinite; }

.escena--nublado .escena__nube--b {
  top: 44%;
  left: 20%;
  width: 64%;
  height: 36%;
  opacity: 0.88;
  animation-delay: 0.7s;
}

.escena--cielo .escena__disco {
  left: 8%;
  top: 10%;
  width: 36%;
  height: 36%;
  opacity: 0.85;
}

.escena--cielo .escena__nube {
  top: 38%;
  animation: escena-deriva 5s ease-in-out infinite;
}

.escena__gota {
  top: 58%;
  left: 18%;
  width: 7%;
  height: 15%;
  border-radius: 40% 40% 45% 45%;
  background: #2b7ec4;
  z-index: 1;
  animation: escena-caer var(--caida-ritmo) linear infinite, escena-vaiven 1.15s ease-in-out infinite;
}

.escena__gota--b { left: 34%; animation-delay: calc(var(--caida-ritmo) * -0.2), -0.2s; }
.escena__gota--c { left: 50%; height: 13%; animation-delay: calc(var(--caida-ritmo) * -0.4), -0.45s; }
.escena__gota--d { left: 66%; animation-delay: calc(var(--caida-ritmo) * -0.6), -0.1s; }
.escena__gota--e { left: 80%; height: 12%; animation-delay: calc(var(--caida-ritmo) * -0.8), -0.6s; }

.escena__relampago {
  left: 44%;
  top: 52%;
  width: 16%;
  height: 34%;
  background: #fff4c2;
  clip-path: polygon(48% 0, 100% 0, 52% 42%, 100% 42%, 0 100%, 42% 50%, 0 50%);
  filter: drop-shadow(0 0 0.06em #ffe08a);
  opacity: 0;
  z-index: 3;
  animation: escena-relampago 2.5s infinite;
}

.escena__copo {
  top: 54%;
  left: 16%;
  width: 11%;
  height: 11%;
  border-radius: 50%;
  background: #f7fbff;
  box-shadow: 0 0 0 1px rgba(170, 200, 220, 0.55);
  z-index: 1;
  animation: escena-caer 2.6s linear infinite, escena-vaiven 1.8s ease-in-out infinite;
}

.escena__copo--b { left: 36%; animation-delay: -0.65s, -0.3s; }
.escena__copo--c { left: 56%; animation-delay: -1.3s, -0.7s; }
.escena__copo--d { left: 74%; animation-delay: -1.95s, -0.15s; }

.escena__bruma {
  left: 8%;
  right: 10%;
  top: 28%;
  height: 16%;
  border-radius: 999px;
  background: rgba(244, 251, 255, 0.82);
  filter: blur(1px);
  animation: escena-bruma 4.8s ease-in-out infinite;
}

.escena__bruma--b { top: 48%; animation-delay: 0.45s; }
.escena__bruma--c { top: 66%; animation-delay: 0.9s; }

.escena__luna {
  left: 26%;
  top: 20%;
  width: 42%;
  height: 42%;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0.22em -0.04em 0 -0.02em #f7f1c8;
}

.escena__estrella {
  right: 20%;
  top: 22%;
  width: 8%;
  height: 8%;
  border-radius: 50%;
  background: #fff6d8;
  animation: escena-titilar 1.8s ease-in-out infinite;
}

.escena__estrella--b {
  right: 34%;
  top: 62%;
  width: 6%;
  height: 6%;
  animation-delay: 0.6s;
}

.escena__calor,
.escena__aires {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.escena__calor { opacity: var(--calor-alfa); }
.escena__aires { opacity: var(--viento-alfa); }

.escena__brasa {
  left: 22%;
  bottom: 8%;
  width: 56%;
  height: 38%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 58%, #fff6d0, #ff9a3c 45%, #e06a4f 82%);
  animation: escena-brasa 2.8s ease-in-out infinite;
}

.escena__onda {
  left: 12%;
  bottom: 34%;
  width: 76%;
  height: 22%;
  border-radius: 50%;
  border: max(1px, 0.05em) solid transparent;
  border-top-color: rgba(255, 176, 70, 0.92);
  filter: blur(0.4px);
  animation: escena-onda var(--calor-ritmo) linear infinite;
}

.escena__onda--b { animation-delay: calc(var(--calor-ritmo) * -0.2); }
.escena__onda--c { animation-delay: calc(var(--calor-ritmo) * -0.4); }
.escena__onda--d { animation-delay: calc(var(--calor-ritmo) * -0.6); }
.escena__onda--e { animation-delay: calc(var(--calor-ritmo) * -0.8); }

.escena__rafaga {
  left: 0;
  top: 22%;
  width: 42%;
  height: 9%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(31, 143, 214, 0.95) 46%, transparent);
  animation: escena-viento var(--viento-ritmo) linear infinite;
}

.escena__rafaga--b { top: 40%; width: 50%; animation-delay: calc(var(--viento-ritmo) * -0.25); }
.escena__rafaga--c { top: 58%; width: 36%; animation-delay: calc(var(--viento-ritmo) * -0.5); }
.escena__rafaga--d { top: 74%; width: 46%; animation-delay: calc(var(--viento-ritmo) * -0.75); }

@keyframes escena-giro { to { transform: rotate(360deg); } }

@keyframes escena-deriva {
  0%, 100% { translate: -5% 0; }
  50% { translate: 6% 0; }
}

@keyframes escena-caer {
  0% { transform: translate3d(0, -35%, 0); opacity: 0; }
  14% { opacity: 1; }
  78% { opacity: 0.9; }
  100% { transform: translate3d(0, 130%, 0); opacity: 0; }
}

@keyframes escena-vaiven {
  0%, 100% { translate: -10% 0; }
  50% { translate: 12% 0; }
}

@keyframes escena-relampago {
  0%, 70%, 100% { opacity: 0; }
  73%, 79% { opacity: 1; }
  76% { opacity: 0.15; }
}

@keyframes escena-bruma {
  0%, 100% { translate: -8% 0; opacity: 0.45; }
  50% { translate: 8% 0; opacity: 0.95; }
}

@keyframes escena-titilar {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

@keyframes escena-brasa {
  0%, 100% { transform: scale(0.92); }
  50% { transform: scale(1.08); }
}

@keyframes escena-onda {
  0% { transform: translate3d(0, 46%, 0) scaleX(0.62); opacity: 0; }
  16% { opacity: 0.95; }
  48% { transform: translate3d(7%, -35%, 0) scaleX(0.9); opacity: 0.72; }
  100% { transform: translate3d(-5%, -155%, 0) scaleX(1.16); opacity: 0; }
}

@keyframes escena-viento {
  0% { transform: translate3d(-130%, 0, 0); opacity: 0; }
  16% { opacity: 0.95; }
  84% { opacity: 0.9; }
  100% { transform: translate3d(250%, 0, 0); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .escena__rayos,
  .escena__nube,
  .escena__gota,
  .escena__copo,
  .escena__relampago,
  .escena__bruma,
  .escena__estrella,
  .escena__brasa,
  .escena__onda,
  .escena__rafaga,
  .escena--sol .escena__disco {
    animation: none;
  }

  .escena__gota,
  .escena__copo,
  .escena__relampago,
  .escena__onda,
  .escena__rafaga {
    opacity: 0.85;
  }
}