/* ============================================================
   meteomotion.css · iconos dinámicos MeteoVilatorrada
   Sistema de símbolos animados + tarjetas de "Condiciones ahora"
   ============================================================ */

/* ---------- icono base ---------- */
.mm { width: 72px; height: 72px; overflow: visible; display: block; }
.mm * { vector-effect: non-scaling-stroke; }

.mm-cloud {
  fill: #dff4ff;
  stroke: #7fdcff;
  stroke-width: 1.6;
  filter: drop-shadow(0 0 10px rgba(80, 220, 255, .55));
  transform-box: fill-box;
  transform-origin: center;
  animation: mmDrift 5s ease-in-out infinite alternate;
}
.mm-cloudGroup { animation: mmBob 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }

.mm-sun {
  fill: #ffc95c;
  filter: drop-shadow(0 0 14px rgba(255, 181, 44, .75));
  transform-box: fill-box;
  transform-origin: center;
  animation: mmSunbeat 4s ease-in-out infinite;
}
.mm-rays {
  stroke: #ffd36a; stroke-width: 2.6; stroke-linecap: round; fill: none;
  transform-box: fill-box; transform-origin: center;
  animation: mmSpin 16s linear infinite, mmPulse 2.6s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(255, 200, 90, .6));
}
.mm-moon {
  fill: #ffe9a8;
  filter: drop-shadow(0 0 12px rgba(255, 233, 168, .65));
  animation: mmBob 6s ease-in-out infinite;
  transform-box: fill-box; transform-origin: center;
}
.mm-star { fill: #eaf6ff; animation: mmTwinkle 3.4s ease-in-out infinite; }
.mm-star:nth-of-type(2) { animation-delay: 1.1s; }

.mm-drop {
  stroke: var(--c, #63c8f5);
  stroke-width: 3.6;
  stroke-linecap: round;
  fill: none;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c, #63c8f5) 70%, transparent));
  animation: mmFall .85s linear infinite;
}
.mm-drop:nth-child(2) { animation-delay: -.35s; }
.mm-drop:nth-child(3) { animation-delay: -.7s; }
.mm-drop:nth-child(4) { animation-delay: -.18s; }
.mm-drop:nth-child(5) { animation-delay: -.52s; }

.mm-flake {
  stroke: #dff4ff; stroke-width: 2.2; stroke-linecap: round; fill: none;
  animation: mmSnow 3.6s linear infinite;
  filter: drop-shadow(0 0 5px rgba(200, 240, 255, .6));
}
.mm-flake:nth-child(2) { animation-delay: -1.2s; }
.mm-flake:nth-child(3) { animation-delay: -2.4s; }

.mm-fog {
  stroke: #bfe3f5; stroke-width: 3; stroke-linecap: round; fill: none;
  opacity: .85;
  filter: drop-shadow(0 0 6px rgba(150, 220, 255, .5));
  animation: mmDrift 5.5s ease-in-out infinite alternate;
}
.mm-fog:nth-child(2) { animation-delay: -1.8s; }
.mm-fog:nth-child(3) { animation-delay: -3.4s; }

.mm-bolt {
  fill: #ffe16d;
  filter: drop-shadow(0 0 12px rgba(255, 225, 109, .9));
  animation: mmFlash 4.2s steps(1) infinite;
}

/* ---------- animaciones ---------- */
@keyframes mmSpin { to { transform: rotate(360deg); } }
@keyframes mmFall {
  0% { transform: translateY(-9px); opacity: .1; }
  40% { opacity: 1; }
  100% { transform: translateY(11px); opacity: 0; }
}
@keyframes mmSnow {
  0% { transform: translateY(-9px) rotate(0deg); opacity: .1; }
  35% { opacity: 1; }
  100% { transform: translateY(11px) rotate(150deg); opacity: 0; }
}
@keyframes mmBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes mmDrift {
  from { transform: translateX(-5px); }
  to { transform: translateX(5px); }
}
@keyframes mmPulse {
  0%, 100% { opacity: .55; transform: scale(.94); }
  50% { opacity: 1; transform: scale(1.08); }
}
@keyframes mmSunbeat {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 12px rgba(255, 181, 44, .65)); }
  50% { transform: scale(1.07); filter: drop-shadow(0 0 22px rgba(255, 181, 44, .95)); }
}
@keyframes mmTwinkle {
  0%, 100% { opacity: .2; }
  50% { opacity: 1; }
}
@keyframes mmFlash {
  0%, 84%, 100% { opacity: 1; }
  86% { opacity: .1; }
  88% { opacity: 1; }
  91% { opacity: .15; }
  94% { opacity: 1; }
}
@keyframes mmFlowLine {
  to { stroke-dashoffset: -70; }
}

/* partes de los iconos de datos */
.mm-ring {
  fill: none; stroke: var(--c); stroke-width: 1.6; stroke-dasharray: 2 7;
  opacity: .55;
  transform-box: fill-box; transform-origin: center;
  animation: mmSpin 8s linear infinite;
}
.mm-droplet {
  fill: none; stroke: var(--c); stroke-width: 3.6;
  filter: drop-shadow(0 0 8px var(--c));
  transform-box: fill-box; transform-origin: center;
  animation: mmBob 2.6s ease-in-out infinite;
}
.mm-windline {
  fill: none; stroke: var(--c); stroke-width: 3.2; stroke-linecap: round;
  stroke-dasharray: 2 7 22 7;
  filter: drop-shadow(0 0 7px var(--c));
  animation: mmFlowLine var(--speed, 2s) linear infinite;
}
.mm-windline:nth-child(2) { animation-delay: -.6s; }
.mm-windline:nth-child(3) { animation-delay: -1.2s; }
.mm-needle {
  stroke: var(--c); stroke-width: 3.2; stroke-linecap: round;
  filter: drop-shadow(0 0 7px var(--c));
  transform-box: view-box; transform-origin: 50px 50px;
  transition: transform .9s cubic-bezier(.2, .9, .2, 1);
}
.mm-gauge { fill: none; stroke: #5c7894; stroke-width: 4; stroke-linecap: round; }
.mm-core { fill: var(--c); filter: drop-shadow(0 0 8px var(--c)); }

/* ============================================================
   TARJETAS "CONDICIONES AHORA"
   ============================================================ */
.mmHero {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0 6px;
  position: relative;
  z-index: 2;
}

.mmCard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px 11px;
  border-radius: 15px;
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  background:
    linear-gradient(160deg, rgba(8, 22, 35, .88), rgba(5, 13, 22, .82));
  backdrop-filter: blur(10px) saturate(120%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  overflow: hidden;
  isolation: isolate;
  transition: transform .2s, border-color .2s;
}
.mmCard { text-decoration: none; color: inherit; cursor: pointer; }
.mmCard:hover { transform: translateY(-2px); border-color: var(--c); }
.mmCard:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; }
.mmCard::before {
  content: "";
  position: absolute;
  width: 120px; height: 120px; right: -40px; top: -50px;
  border-radius: 50%;
  background: var(--c);
  filter: blur(48px);
  opacity: .22;
  z-index: -1;
  animation: mmGlow 6s ease-in-out infinite;
}
.mmCard::after {
  content: "";
  position: absolute; inset: auto -10% -60% -10%; height: 90px;
  background: radial-gradient(closest-side, var(--c), transparent);
  opacity: .12;
  z-index: -1;
}

.mmTop {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: #bcd3e2;
}
.mmLive { color: var(--c); font-size: 9.5px; letter-spacing: .08em; }

.mmIcon { display: grid; place-items: center; height: 68px; margin: 2px 0 0; }
.mmIcon .mm { width: 64px; height: 64px; }

.mmReading {
  display: flex; align-items: baseline; gap: 3px;
  font-size: 24px; font-weight: 800; letter-spacing: -.04em;
  color: #fff; font-variant-numeric: tabular-nums; line-height: 1.05;
}
.mmReading small { font-size: 14px; font-weight: 600; color: #c2d5e2; letter-spacing: 0; }
.mmCap { font-size: 14px; line-height: 1.3; font-weight: 600; color: #cfe2ec; margin-top: 4px; min-height: 31px; }

/* tema claro */
body.tema-claro .mmCard {
  background: linear-gradient(160deg, #ffffff, #f4f9fc);
  border-color: color-mix(in srgb, var(--c) 40%, #ffffff);
  box-shadow: 0 8px 20px -14px rgba(10, 30, 45, .55);
}
body.tema-claro .mmTop { color: #40586a; }
body.tema-claro .mmReading { color: #0a1a24; }
body.tema-claro .mmReading small { color: #475f70; }
body.tema-claro .mmCap { color: #3f5566; }
body.tema-claro .mm-cloud { fill: #cfe6f4; stroke: #5fb6d8; }

/* responsive */
@media (max-width: 1400px) {
  .mmHero { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1200px) {
  .mmHero { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .mmHero { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mmCard { padding: 9px 10px; border-radius: 13px; }
  .mmIcon { height: 56px; }
  .mmIcon .mm { width: 52px; height: 52px; }
  .mmReading { font-size: 20px; }
  .mmTop { font-size: 10px; letter-spacing: .08em; }
  .mmLive { font-size: 9px; }
  .mmReading small { font-size: 13px; }
  .mmCap { font-size: 13px; min-height: 30px; }
}


@keyframes mmGlow {
  0%, 100% { opacity: .16; }
  50% { opacity: .3; }
}

/* legibilidad del termómetro en tema claro */
body.tema-claro .heroFusion .heroTemp { filter: saturate(1.15) brightness(.72); }

/* ============================================================
   AVISO "ESTÁ LLUVIANDO" (badge de lluvia de la estación)
   ============================================================ */
.heroRain {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin: 12px 0 2px !important;
  padding: 7px 14px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 600;
  color: #c8dbe1 !important;
  border: 1px solid rgba(210, 240, 248, .16) !important;
  background: rgba(8, 22, 35, .55) !important;
  backdrop-filter: blur(8px);
  position: relative;
  z-index: 2;
  transition: border-color .3s, background .3s, box-shadow .3s;
}
.heroRain b { color: #eaf7ff !important; font-weight: 800; }
.heroRain .heroRainIcon {
  width: 15px; height: 15px; flex: none;
  fill: none; stroke: #63c8f5; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(99, 200, 245, .7));
}
.heroRain.lloviendo {
  border-color: rgba(99, 200, 245, .8) !important;
  background: rgba(18, 74, 110, .45) !important;
  color: #dff4ff !important;
  animation: mmRainPulse 2s ease-in-out infinite;
}
.heroRain.lloviendo b { color: #9fe6ff !important; }
.heroRain.lloviendo .heroRainIcon { stroke: #9fe6ff; animation: mmFall 1.1s linear infinite; }

@keyframes mmRainPulse {
  0%, 100% { box-shadow: 0 0 16px -10px rgba(99, 200, 245, .7); }
  50% { box-shadow: 0 0 30px -4px rgba(99, 200, 245, 1); }
}

/* tarjeta de estado del cielo */
.mmCard--state .mmReading {
  font-size: 17px;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.mmCard--state .mmCap { min-height: 26px; }
@media (max-width: 640px) {
  .mmCard--state .mmReading { font-size: 15px; }
}

/* ============================================================
   SEÑALES HORARIAS
   ============================================================ */
.mmSenales {
  position: fixed; right: 16px; bottom: 16px; z-index: 9000;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 999px;
  border: 1px solid rgba(80, 216, 243, .45);
  background: rgba(6, 20, 32, .92);
  color: #dff2ff;
  font: 600 12px Inter, ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .9);
  transition: transform .18s, border-color .18s, background .18s, opacity .18s;
}
.mmSenales:hover { transform: translateY(-2px); border-color: #50d8f3; }
.mmSenales.is-off { border-color: rgba(210, 240, 248, .18); color: #8ba4b0; }
.mmSenalesIcon { font-size: 14px; line-height: 1; }
body.tema-claro .mmSenales { background: #ffffff; color: #1a3040; border-color: #cfe0ea; }
body.tema-claro .mmSenales.is-off { color: #7b8f9b; }

@media (max-width: 640px) {
  .mmSenales { right: 10px; bottom: 10px; padding: 11px; }
  .mmSenalesTxt { display: none; }
}

/* el icono de estado toma el color del tiempo actual */
.mmCard--state .mm-cloud { stroke: var(--c); fill: color-mix(in srgb, var(--c) 22%, #eaf7ff); }
.mmCard--state .mm-drop { stroke: var(--c); }
.mmCard--state .mm-bolt { fill: var(--c); filter: drop-shadow(0 0 14px var(--c)); }
.mmCard--state .mm-sun { fill: var(--c); filter: drop-shadow(0 0 16px var(--c)); }
.mmCard--state .mm-rays path { stroke: var(--c); }
.mmCard--state.lluvia .mm-cloud { animation-duration: 2.2s; }

/* el sol de la tarjeta de radiación se apaga o se enciende según los W/m² */
.mmSunWrap { display: block; }
.mmSunWrap.is-weak .mm-sun { opacity: .45; filter: drop-shadow(0 0 6px rgba(255, 181, 44, .35)); animation-duration: 7s; }
.mmSunWrap.is-weak .mm-rays { opacity: .14; animation-duration: 60s; }
.mmSunWrap.is-mid .mm-sun { opacity: .85; animation-duration: 5s; }
.mmSunWrap.is-mid .mm-rays { opacity: .5; animation-duration: 30s; }
.mmSunWrap.is-strong .mm-rays { opacity: 1; }

/* índice UV: el icono se apaga según el nivel */
.mmUvWrap { display: block; }
.mmUvWrap.is-none .mm-sun,
.mmUvWrap.is-none .mm-rays { opacity: .18; animation-duration: 90s; filter: none; }
.mmUvWrap.is-none .mm-ring { opacity: .12; }
.mmUvWrap.is-low .mm-sun { opacity: .75; }
.mmUvWrap.is-low .mm-rays { opacity: .25; animation-duration: 50s; }
.mmUvWrap.is-mid .mm-rays { opacity: .6; animation-duration: 30s; }
.mmUvWrap.is-high .mm-rays { opacity: 1; }

/* presión: arco relleno y color por nivel */
.mm-presArc {
  fill: none; stroke: var(--c); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: var(--pfill, 50) 100;
  filter: drop-shadow(0 0 6px var(--c));
  transition: stroke-dasharray .8s ease;
}
.mmPresWrap { display: block; }

/* humedad: la gota se llena hasta el nivel real */
.mmHumFill { transition: y .8s ease, height .8s ease; }

/* viento: el trazo engorda cuanto más sopla */
.mm-windline { stroke-width: var(--w, 3.2); transition: stroke-width .4s; }

/* calma: una sola línea quieta */
.mmWindWrap { display: block; }
.mmWindWrap.is-calm .mm-windline {
  animation: none;
  stroke-dasharray: none;
  opacity: .5;
  filter: none;
}

/* el viento gira hacia donde sopla */
.mmWindWrap { transform: rotate(var(--rot, 0deg)); transition: transform .7s ease; }
.mmWindWrap.is-calm { transform: none; }

/* nieve: copos con el color de la intensidad */
.mmCard .mm-flake path {
  stroke: var(--c);
  filter: drop-shadow(0 0 6px var(--c));
}
.mmCard .mm-flake { animation-duration: 3.2s; }
.mmCard .mm-cloud { stroke: color-mix(in srgb, var(--c) 55%, #7fdcff); }

/* nube más oscura cuanto más llueve */
.mmCloudLvl.lvl1 .mm-cloud { fill: #c6dbea; }
.mmCloudLvl.lvl2 .mm-cloud { fill: #9fb8cd; }
.mmCloudLvl.lvl3 .mm-cloud { fill: #7a93ab; }
.mmCloudLvl.lvl2 .mm-cloud { filter: drop-shadow(0 0 10px rgba(40, 90, 130, .5)); }
.mmCloudLvl.lvl3 .mm-cloud { filter: drop-shadow(0 0 12px rgba(30, 60, 100, .65)); }

/* sin lluvia: gota tachada */
.mm-slash { stroke: var(--c); stroke-width: 4; stroke-linecap: round; opacity: .8; }

/* fuera el aviso de lluvia bajo la temperatura (ya está en las tarjetas) */
a:has(> .heroRain) { display: none !important; }
.heroRain { display: none !important; }

/* las gotas siempre visibles cuando el estado es lluvia */
.mmCard .mm-drop { stroke: var(--c); stroke-width: 3.6; opacity: 1 !important; filter: drop-shadow(0 0 5px var(--c)); }
.mmCard .mm-cloud + .mm-drop { animation-duration: 1.6s; }

/* gotas estáticas y bien visibles */
.mmCard .mm-drop { stroke-dasharray: none !important; animation: none !important; opacity: 1 !important; stroke-width: 3.6 !important; }

/* calma: la raya se ve clara, no desaparece */
.mmWindWrap.is-calm .mm-windline {
  opacity: 1 !important;
  stroke-width: 3.4 !important;
  stroke-dasharray: none !important;
  filter: drop-shadow(0 0 7px var(--c));
}
.mmWindWrap.is-calm { transform: none !important; }

/* gotas grandes y legibles */
.mmCard .mm-drop { stroke-width: 6 !important; stroke-linecap: round !important; }
.mmCard .mmIcon, .mmCard .mmWeather { transform: scale(1.12); transform-origin: center; }

/* aguanieve: gotas y copos mezclados */
.mmCard .mm-sleet { stroke: var(--c); stroke-width: 4; fill: none; }

/* gotas azules bien visibles en Lluvia y Estado */
.mmCard .mm-drop {
  stroke: #35c9ff !important;
  stroke-width: 7 !important;
  stroke-linecap: round !important;
  stroke-dasharray: none !important;
  opacity: 1 !important;
  animation: none !important;
  filter: drop-shadow(0 0 7px rgba(53, 201, 255, .95));
}
.mmCard--state .mm-drop, .mmCard .mm-drop { visibility: visible !important; }

/* gotas cayendo de verdad */
@keyframes mmDropFall {
  0% { transform: translateY(-6px); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(10px); opacity: 0; }
}
.mmCard .mm-drop {
  animation: mmDropFall 1.15s cubic-bezier(.5, 0, .9, .5) infinite !important;
  transform-box: fill-box;
}
.mmCard .mm-drop:nth-of-type(2) { animation-delay: .38s !important; }
.mmCard .mm-drop:nth-of-type(3) { animation-delay: .76s !important; }

/* gotas más lentas */
.mmCard .mm-drop { animation-duration: 2.4s !important; }
.mmCard .mm-drop:nth-of-type(2) { animation-delay: .8s !important; }
.mmCard .mm-drop:nth-of-type(3) { animation-delay: 1.6s !important; }

/* gotas aún más lentas */
.mmCard .mm-drop { animation-duration: 3.8s !important; }
.mmCard .mm-drop:nth-of-type(2) { animation-delay: 1.3s !important; }
.mmCard .mm-drop:nth-of-type(3) { animation-delay: 2.6s !important; }

/* gotas muy lentas */
.mmCard .mm-drop { animation-duration: 5.6s !important; }
.mmCard .mm-drop:nth-of-type(2) { animation-delay: 1.9s !important; }
.mmCard .mm-drop:nth-of-type(3) { animation-delay: 3.8s !important; }

/* resaltado fuerte cuando llueve */
.mmCard.is-raining {
  border-color: #46beff !important;
  background-image: linear-gradient(160deg, rgba(70, 170, 255, .24), rgba(10, 25, 40, .92)) !important;
  animation: mmRainGlow 2.4s ease-in-out infinite !important;
  box-shadow: 0 0 0 1px #46beff, 0 0 34px -6px #46beff !important;
}

/* borde que se apaga y se enciende lento */
@keyframes mmRainBorder {
  0%, 100% {
    border-color: rgba(70, 190, 255, .22) !important;
    box-shadow: 0 0 0 1px rgba(70, 190, 255, .12), 0 0 10px -8px rgba(70, 190, 255, .4) !important;
  }
  50% {
    border-color: rgba(130, 225, 255, 1) !important;
    box-shadow: 0 0 0 1px rgba(130, 225, 255, .95), 0 0 42px -4px rgba(70, 190, 255, 1) !important;
  }
}
.mmCard.is-raining { animation: mmRainBorder 6.5s ease-in-out infinite !important; }

.mmCard.is-raining { animation-duration: 3s !important; }

/* brillo que se atenúa del todo y vuelve */
@keyframes mmRainBreath {
  0%   { border-color: rgba(70, 190, 255, .14) !important; box-shadow: none !important; }
  42%  { border-color: rgba(130, 225, 255, 1) !important; box-shadow: 0 0 0 1px rgba(130, 225, 255, .95), 0 0 46px -2px rgba(70, 190, 255, 1) !important; }
  58%  { border-color: rgba(130, 225, 255, 1) !important; box-shadow: 0 0 0 1px rgba(130, 225, 255, .95), 0 0 46px -2px rgba(70, 190, 255, 1) !important; }
  100% { border-color: rgba(70, 190, 255, .14) !important; box-shadow: none !important; }
}
.mmCard.is-raining { animation: mmRainBreath 3.4s ease-in-out infinite !important; }

/* borde grueso + brillo animado por outline (más fiable) */
@keyframes mmRainOutline {
  0%, 100% { outline-color: rgba(70, 190, 255, .12); box-shadow: none; }
  50% { outline-color: #82e1ff; box-shadow: 0 0 38px -4px #46beff; }
}
.mmCard.is-raining {
  border-width: 2px !important;
  border-color: #46beff !important;
  outline: 2px solid #82e1ff;
  outline-offset: 2px;
  animation: mmRainOutline 3.4s ease-in-out infinite !important;
}

/* los dos bordes respiran a la vez */
@keyframes mmRainBoth {
  0%, 100% { border-color: rgba(130, 225, 255, .22); outline-color: rgba(130, 225, 255, .22); box-shadow: none; }
  50% { border-color: #82e1ff; outline-color: #82e1ff; box-shadow: 0 0 38px -4px #46beff; }
}
.mmCard.is-raining {
  border-width: 2px !important;
  animation: mmRainBoth 3.4s ease-in-out infinite !important;
}

/* aro interior animado con box-shadow inset (no depende del borde) */
@keyframes mmRainInset {
  0%, 100% { box-shadow: inset 0 0 0 2px rgba(130, 225, 255, .16), 0 0 0 1px rgba(130, 225, 255, .15); }
  50% { box-shadow: inset 0 0 0 2px #82e1ff, 0 0 0 1px #82e1ff, 0 0 40px -4px #46beff; }
}
.mmCard.is-raining {
  animation: mmRainInset 3.4s ease-in-out infinite !important;
  border-color: rgba(130, 225, 255, .25) !important;
}

/* anillo pulsante garantizado (pseudo-elemento) */
.mmCard.is-raining { position: relative; }
.mmCard.is-raining::after {
  content: "";
  position: absolute; inset: -3px;
  border-radius: 18px;
  border: 2px solid #82e1ff;
  box-shadow: 0 0 34px -6px #46beff;
  pointer-events: none;
  animation: mmRingPulse 3.4s ease-in-out infinite;
}
@keyframes mmRingPulse {
  0%, 100% { opacity: .1; }
  50% { opacity: 1; }
}

/* anillo más lento y discreto */
@keyframes mmRingSoft {
  0%, 100% { opacity: .05; }
  50% { opacity: .55; }
}
.mmCard.is-raining::after {
  animation: mmRingSoft 6.5s ease-in-out infinite !important;
  border-color: #5cc4ee !important;
  box-shadow: 0 0 18px -10px #46beff !important;
}

/* señales horarias por encima del botón de subir */
.mmSenales { bottom: 96px !important; right: 22px !important; }
@media (max-width: 700px) {
  .mmSenales { bottom: 84px !important; right: 12px !important; }
}

/* escala de lluvia: gotas más rápidas y nubes más oscuras */
.mmCard .mm-drop { animation-duration: var(--dropdur, 3s) !important; }
.mmCloudLvl.lvl4 .mm-cloud { fill: #5a6f84; }
.mmCloudLvl.lvl4 .mm-bolt { animation-duration: .6s !important; }
.mmCloudLvl.lvl4 { filter: drop-shadow(0 0 14px rgba(20, 40, 70, .7)); }

/* humedad: gota que crece, nivel que sube y color por escala */
.mmHumWrap { display: block; transform: scale(var(--humscale, 1)); transform-origin: center; transition: transform .6s; }
.mmHumWrap .mmHumFill { animation: humRise var(--humspeed, 3s) ease-in-out infinite; }
@keyframes humRise {
  0%   { transform: translateY(14px); opacity: .25; }
  55%  { transform: translateY(0); opacity: .75; }
  100% { transform: translateY(14px); opacity: .25; }
}

/* calma: símbolo de viento tachado */
.mmWindWrap.is-calm .mm-windline { opacity: .55 !important; animation: none !important; }
.mmWindWrap.is-calm .mm-slash { stroke: var(--c) !important; stroke-width: 5 !important; opacity: .95 !important; }

/* presión: barrido continuo en el arco y escala de color */
.mm-presSweep {
  fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 9 91; opacity: .75;
  animation: presSweep 3.6s linear infinite;
  filter: drop-shadow(0 0 6px currentColor);
}
@keyframes presSweep { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }

/* el barrido de presión va más rápido cuanto más alta es la presión */
.mmPresWrap .mm-presSweep { animation-duration: var(--pspeed, 3.6s) !important; }

/* presión: barra vertical con nivel y destello ascendente */
.mm-presTrack { fill: rgba(255,255,255,.08); }
.mm-presLevel { fill: var(--c); filter: drop-shadow(0 0 8px var(--c)); transition: y .8s ease, height .8s ease; }
.mm-presShine {
  fill: #fff; opacity: .55;
  animation: presShine var(--pspeed, 4s) linear infinite;
}
@keyframes presShine {
  0% { transform: translateY(62px); opacity: 0; }
  15% { opacity: .7; }
  85% { opacity: .7; }
  100% { transform: translateY(0); opacity: 0; }
}
.mm-presTicks { stroke: rgba(255,255,255,.35); stroke-width: 2.4; stroke-linecap: round; }
.mm-presVal { font-size: 15px; font-weight: 800; fill: #fff; paint-order: stroke; stroke: rgba(0,0,0,.45); stroke-width: 3px; }

/* barra de presión larga con escala de color */
.mm-presTrack { opacity: .95; filter: drop-shadow(0 0 10px rgba(120, 200, 255, .35)); }
.mm-presKnob { fill: #fff; filter: drop-shadow(0 0 8px #fff); transition: y .8s ease; }
.mm-presTicks { stroke: rgba(255,255,255,.3); stroke-width: 2; stroke-linecap: round; }
.mm-presShine { fill: #fff; opacity: .5; animation: presShine2 var(--pspeed, 4s) linear infinite; }
@keyframes presShine2 {
  0% { transform: translateY(72px); opacity: 0; }
  15% { opacity: .6; } 85% { opacity: .6; }
  100% { transform: translateY(0); opacity: 0; }
}

.mm-presScale { opacity: .95; filter: drop-shadow(0 0 10px rgba(120, 200, 255, .35)); }

/* radiación: sol más pequeño, difuminado y respiración según W/m² */
.mmSunWrap { display: block; transform: scale(.78); transform-origin: center; }
.mmSunWrap svg { filter: blur(.5px) drop-shadow(0 0 12px rgba(255, 200, 110, .45)); }
.mmSunWrap .mm-sun,
.mmSunWrap .mm-rays,
.mmSunWrap .mm-ring { animation-duration: var(--sunbeat, 4s) !important; }
@keyframes sunBreathSoft { 0%,100% { opacity: .75; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
.mmSunWrap .mm-sun { animation: sunBreathSoft var(--sunbeat, 4s) ease-in-out infinite !important; }

/* el sol toma el color de la escala */
.mmSunWrap .mm-sun { fill: var(--c, #ffb02e) !important; }
.mmSunWrap .mm-rays path, .mmSunWrap .mm-rays { stroke: var(--c, #ffb02e) !important; }

/* los rayos giran más rápido con más radiación */
.mmSunWrap .mm-rays { animation-duration: var(--sunspin, 20s) !important; }

/* estado: mezcla de sol y nubes según radiación */
.mmCard--state .mm-sun { transform: scale(var(--sunscale, 1)); transform-origin: 32% 32%; transition: transform .8s ease; }
.mmCard--state .mm-cloud { opacity: var(--cloudop, 1); transition: opacity .8s ease; }
.mmCard--state .mm-rays { opacity: var(--sunscale, 1); }

/* usa la propiedad scale para no chocar con la animación del sol */
.mmCard--state .mm-sun { transform: none !important; scale: var(--sunscale, 1); transform-origin: 32% 32%; }

/* UV: sin anillo, tamaño y giro de rayos según índice */
.mmUvWrap { display: block; scale: var(--uvscale, 1); transition: scale .6s; }
.mmUvWrap .mm-rays { animation-duration: var(--uvspin, 30s) !important; }
.mmUvWrap .mm-sun { fill: var(--c, #ffd166) !important; }