/* ============================================================
   CIELO — capas visuales. El JS (js/cielo.js) solo cambia
   variables y atributos; todo el movimiento lo hace el
   compositor de la GPU (transform / opacity).
   ============================================================ */
.cielo {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  --c1:#1f6fc9; --c2:#57a6e6; --c3:#cfe9fa;
  --halo:rgba(255,245,190,.5); --nube-color:255,255,255; --nube-opacidad:.7;
  --estrellas:0; --suelo:rgba(255,255,255,.18);
  --viento-grados:-8deg; --nube-velocidad:70s;
}

/* degradado del cielo: arriba oscuro, abajo el horizonte */
.cielo-degrade {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--c1) 0%, var(--c2) 52%, var(--c3) 100%);
  transition: background 2.5s linear;
}

/* estrellas: canvas dibujado una vez, con titileo suave por capa */
.cielo-estrellas {
  position: absolute; inset: 0; opacity: var(--estrellas);
  transition: opacity 2.5s linear; animation: titilar 5.5s ease-in-out infinite;
}
@keyframes titilar { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.35)} }

/* sol y luna */
.cielo-astro {
  position: absolute; width: 108px; height: 108px; margin: -54px 0 0 -54px;
  transition: left 2s linear, top 2s linear;
}
.astro-cuerpo { position: absolute; inset: 0; border-radius: 50%; }
.cielo-astro::before {              /* halo / resplandor */
  content: ""; position: absolute; inset: -120%; border-radius: 50%;
  background: radial-gradient(circle, var(--halo), transparent 62%);
  transition: background 2.5s linear;
}
.cielo-astro[data-astro="sol"] .astro-cuerpo {
  background: radial-gradient(circle at 38% 34%, #fffdf2, #ffe27a 44%, #ffb62e 78%);
  box-shadow: 0 0 60px 18px rgba(255,205,90,.55);
  animation: pulso-sol 7s ease-in-out infinite;
}
@keyframes pulso-sol { 0%,100%{transform:scale(1)} 50%{transform:scale(1.045)} }

.cielo-astro[data-astro="luna"] .astro-cuerpo {
  background: radial-gradient(circle at 36% 32%, #ffffff, #e6ecf7 52%, #b9c6dc 100%);
  box-shadow: 0 0 44px 12px rgba(190,210,255,.4);
  transform: scale(.72);
}
/* cráteres de la luna */
.cielo-astro[data-astro="luna"] .astro-cuerpo::before,
.cielo-astro[data-astro="luna"] .astro-cuerpo::after {
  content: ""; position: absolute; border-radius: 50%; background: rgba(140,155,180,.34);
}
.cielo-astro[data-astro="luna"] .astro-cuerpo::before {
  width: 26px; height: 26px; left: 26%; top: 30%;
  box-shadow: 34px 20px 0 -6px rgba(140,155,180,.28), 12px 46px 0 -10px rgba(140,155,180,.26);
}
.cielo-astro[data-astro="luna"] .astro-cuerpo::after {
  width: 15px; height: 15px; right: 22%; top: 24%;
}

/* nubes */
.cielo-nubes { position: absolute; inset: 0; opacity: var(--nube-opacidad); transition: opacity 2.5s linear; }
.nube {
  position: absolute; border-radius: 50%; filter: blur(22px);
  background: radial-gradient(circle, rgba(var(--nube-color),.92), rgba(var(--nube-color),0) 70%);
  animation: cruzar var(--nube-velocidad) linear infinite;
}
.n1 { width: 40vw; height: 15vw; top: 12%; left: -45vw; animation-delay: -4s; }
.n2 { width: 30vw; height: 11vw; top: 30%; left: -35vw; animation-delay: -26s; animation-duration: calc(var(--nube-velocidad) * 1.35); }
.n3 { width: 48vw; height: 17vw; top: 52%; left: -52vw; animation-delay: -48s; animation-duration: calc(var(--nube-velocidad) * 1.7); }
.n4 { width: 24vw; height: 9vw;  top: 5%;  left: -28vw; animation-delay: -14s; animation-duration: calc(var(--nube-velocidad) * .8); }
@keyframes cruzar { from { transform: translateX(0); } to { transform: translateX(160vw); } }

/* precipitación: lluvia, granizo, nieve */
.cielo-precipitacion { position: absolute; inset: -8% 0 0; transform: rotate(var(--viento-grados)); transform-origin: top center; }
.gota { position: absolute; top: -6%; animation-name: caer; animation-timing-function: linear; animation-iteration-count: infinite; }
.gota.lluvia {
  width: 1.6px; height: calc(16px * var(--esc, 1));
  background: linear-gradient(to bottom, rgba(190,215,255,0), rgba(190,215,255,.75));
  border-radius: 2px;
}
.gota.granizo {
  width: calc(6px * var(--esc, 1)); height: calc(6px * var(--esc, 1)); border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ffffff, #d5e4f2 62%, #a9c0d8);
  box-shadow: 0 0 5px rgba(255,255,255,.65);
}
.gota.nieve {
  width: calc(5px * var(--esc, 1)); height: calc(5px * var(--esc, 1)); border-radius: 50%;
  background: rgba(255,255,255,.92); filter: blur(.4px);
  animation-name: caer-nieve;
}
@keyframes caer { from { transform: translateY(0); } to { transform: translateY(118vh); } }
@keyframes caer-nieve {
  from { transform: translate(0,0); }
  to   { transform: translate(26px, 118vh); }
}

/* rayos: solo en tormenta y granizo */
.cielo-rayo { position: absolute; inset: 0; background: #eaf2ff; opacity: 0; }
.cielo.con-rayos .cielo-rayo { animation: relampago 9s linear infinite; }
@keyframes relampago {
  0%, 92%, 100% { opacity: 0; }
  93% { opacity: .5; }
  94% { opacity: .05; }
  95% { opacity: .38; }
  97% { opacity: 0; }
}

/* niebla */
.cielo-niebla { position: absolute; inset: 0; opacity: 0; transition: opacity 2s linear;
  background: linear-gradient(to bottom, rgba(226,232,240,0) 0%, rgba(214,222,232,.55) 55%, rgba(203,213,225,.8) 100%);
  backdrop-filter: blur(2px);
}
.cielo[data-clima="niebla"] .cielo-niebla { opacity: 1; }
.cielo[data-clima="nublado"] .cielo-niebla { opacity: .3; }

/* horizonte: aclara la base para que el contenido se lea */
.cielo-suelo {
  position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  background: linear-gradient(to bottom, transparent, var(--suelo));
  transition: background 2.5s linear;
}

/* velo sobre el cielo para que el texto del sitio siempre se lea.
   Es lo que hace que el catálogo quede tranquilo (ver nota de conversión). */
.velo-cielo {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(253,248,240,.30) 0%, rgba(253,248,240,.72) 46%, var(--crema) 82%);
}

/* leyenda chica con la hora y el clima real */
.chip-cielo {
  position: fixed; right: 16px; bottom: 16px; z-index: 40; display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.86); backdrop-filter: blur(8px); border: 1px solid var(--linea);
  border-radius: 99px; padding: 8px 15px; font-size: .78rem; font-weight: 700; color: var(--verde);
  box-shadow: 0 8px 22px -14px rgba(22,19,15,.5);
}
.chip-cielo b { font-weight: 800; color: var(--tinta); }
@media (max-width: 760px) { .chip-cielo { display: none; } }