/* ═══════════════════════════════════════════════════════════════════════════
   Cielo estrellado — FUENTE ÚNICA del fondo de effia.

   Lo usan las tres páginas: la portada (`index.html`), la política
   (`privacidad.html`) y el portal ya logueado (`app.html`). Antes cada una
   declaraba su propio `.fondo` y se iban separando; ahora se toca acá y cambia
   en las tres. Entrar al portal no cambia el clima visual.

   Cómo está armado:
   · Dos brillos suaves (azul arriba a la derecha, verde de la marca abajo).
   · 56 estrellas fijas en tres capas de mosaico (420px · 330px · 250px),
     de tintes tenues —blanco azulado, azul, ámbar, rosa, menta, violeta, cian—
     y tamaños distintos: la sensación de profundidad sale de ahí.
   · 18 estrellas que titilan: son los `<i>` vacíos dentro de `<div class="fondo">`.
     Cada una tiene su ritmo y su demora, así el destello cae salteado y nunca
     parpadean todas a la vez. Se anima sólo opacidad y escala (lo barato para
     el navegador: no re-dibuja la página, sólo compone).

   Generado por scripts/generar_cielo.py (semilla fija). Para re-generar el cielo,
   cambiar la semilla; para retocar una estrella suelta, editar acá y listo.
   ═══════════════════════════════════════════════════════════════════════════ */

.fondo {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-color: #010405;
  background-image:
    radial-gradient(ellipse 55% 40% at 82% -8%, rgba(124,189,255,0.09), transparent 62%),
    radial-gradient(ellipse 50% 38% at 12% 108%, rgba(98,207,169,0.05), transparent 60%),
    radial-gradient(2.0px 2.0px at 249px 237px, rgba(210,198,255,0.34) 0, rgba(210,198,255,0) 55%),
    radial-gradient(2.0px 2.0px at 305px 343px, rgba(170,255,225,0.48) 0, rgba(170,255,225,0) 55%),
    radial-gradient(1.7px 1.7px at 405px 179px, rgba(225,235,255,0.59) 0, rgba(225,235,255,0) 55%),
    radial-gradient(1.6px 1.6px at 402px 29px, rgba(225,235,255,0.36) 0, rgba(225,235,255,0) 55%),
    radial-gradient(1.5px 1.5px at 103px 126px, rgba(198,240,255,0.3) 0, rgba(198,240,255,0) 55%),
    radial-gradient(1.9px 1.9px at 139px 155px, rgba(225,235,255,0.43) 0, rgba(225,235,255,0) 55%),
    radial-gradient(1.4px 1.4px at 157px 280px, rgba(210,198,255,0.35) 0, rgba(210,198,255,0) 55%),
    radial-gradient(1.6px 1.6px at 120px 264px, rgba(255,224,186,0.66) 0, rgba(255,224,186,0) 55%),
    radial-gradient(1.8px 1.8px at 217px 316px, rgba(225,235,255,0.35) 0, rgba(225,235,255,0) 55%),
    radial-gradient(2.1px 2.1px at 332px 209px, rgba(150,180,255,0.54) 0, rgba(150,180,255,0) 55%),
    radial-gradient(2.1px 2.1px at 186px 326px, rgba(255,202,200,0.54) 0, rgba(255,202,200,0) 55%),
    radial-gradient(1.4px 1.4px at 248px 396px, rgba(150,180,255,0.45) 0, rgba(150,180,255,0) 55%),
    radial-gradient(1.6px 1.6px at 362px 107px, rgba(225,235,255,0.52) 0, rgba(225,235,255,0) 55%),
    radial-gradient(1.7px 1.7px at 260px 326px, rgba(225,235,255,0.56) 0, rgba(225,235,255,0) 55%),
    radial-gradient(2.0px 2.0px at 140px 61px, rgba(255,202,200,0.58) 0, rgba(255,202,200,0) 55%),
    radial-gradient(1.3px 1.3px at 100px 39px, rgba(210,198,255,0.51) 0, rgba(210,198,255,0) 55%),
    radial-gradient(1.0px 1.0px at 299px 191px, rgba(225,235,255,0.59) 0, rgba(225,235,255,0) 55%),
    radial-gradient(1.1px 1.1px at 53px 227px, rgba(225,235,255,0.29) 0, rgba(225,235,255,0) 55%),
    radial-gradient(1.3px 1.3px at 113px 221px, rgba(225,235,255,0.57) 0, rgba(225,235,255,0) 55%),
    radial-gradient(1.4px 1.4px at 78px 16px, rgba(255,224,186,0.37) 0, rgba(255,224,186,0) 55%),
    radial-gradient(1.3px 1.3px at 195px 111px, rgba(225,235,255,0.29) 0, rgba(225,235,255,0) 55%),
    radial-gradient(1.2px 1.2px at 162px 107px, rgba(150,180,255,0.5) 0, rgba(150,180,255,0) 55%),
    radial-gradient(1.3px 1.3px at 279px 265px, rgba(170,255,225,0.58) 0, rgba(170,255,225,0) 55%),
    radial-gradient(1.1px 1.1px at 87px 179px, rgba(210,198,255,0.34) 0, rgba(210,198,255,0) 55%),
    radial-gradient(1.0px 1.0px at 316px 318px, rgba(225,235,255,0.52) 0, rgba(225,235,255,0) 55%),
    radial-gradient(1.1px 1.1px at 316px 188px, rgba(255,224,186,0.4) 0, rgba(255,224,186,0) 55%),
    radial-gradient(1.4px 1.4px at 97px 179px, rgba(150,180,255,0.55) 0, rgba(150,180,255,0) 55%),
    radial-gradient(1.5px 1.5px at 211px 127px, rgba(225,235,255,0.56) 0, rgba(225,235,255,0) 55%),
    radial-gradient(1.0px 1.0px at 174px 152px, rgba(255,224,186,0.37) 0, rgba(255,224,186,0) 55%),
    radial-gradient(1.5px 1.5px at 111px 190px, rgba(255,224,186,0.45) 0, rgba(255,224,186,0) 55%),
    radial-gradient(1.3px 1.3px at 167px 189px, rgba(225,235,255,0.42) 0, rgba(225,235,255,0) 55%),
    radial-gradient(1.4px 1.4px at 9px 260px, rgba(225,235,255,0.36) 0, rgba(225,235,255,0) 55%),
    radial-gradient(1.5px 1.5px at 70px 305px, rgba(225,235,255,0.46) 0, rgba(225,235,255,0) 55%),
    radial-gradient(1.3px 1.3px at 272px 52px, rgba(210,198,255,0.31) 0, rgba(210,198,255,0) 55%),
    radial-gradient(0.9px 0.9px at 41px 237px, rgba(210,198,255,0.38) 0, rgba(210,198,255,0) 55%),
    radial-gradient(1.2px 1.2px at 66px 239px, rgba(225,235,255,0.29) 0, rgba(225,235,255,0) 55%),
    radial-gradient(0.8px 0.8px at 185px 30px, rgba(170,255,225,0.23) 0, rgba(170,255,225,0) 55%),
    radial-gradient(1.2px 1.2px at 204px 59px, rgba(150,180,255,0.29) 0, rgba(150,180,255,0) 55%),
    radial-gradient(1.1px 1.1px at 134px 115px, rgba(255,224,186,0.3) 0, rgba(255,224,186,0) 55%),
    radial-gradient(1.1px 1.1px at 100px 24px, rgba(198,240,255,0.25) 0, rgba(198,240,255,0) 55%),
    radial-gradient(0.9px 0.9px at 203px 102px, rgba(198,240,255,0.24) 0, rgba(198,240,255,0) 55%),
    radial-gradient(1.1px 1.1px at 96px 227px, rgba(198,240,255,0.4) 0, rgba(198,240,255,0) 55%),
    radial-gradient(1.3px 1.3px at 33px 34px, rgba(225,235,255,0.31) 0, rgba(225,235,255,0) 55%),
    radial-gradient(0.9px 0.9px at 189px 26px, rgba(210,198,255,0.41) 0, rgba(210,198,255,0) 55%),
    radial-gradient(0.8px 0.8px at 10px 92px, rgba(210,198,255,0.32) 0, rgba(210,198,255,0) 55%),
    radial-gradient(1.0px 1.0px at 232px 131px, rgba(210,198,255,0.28) 0, rgba(210,198,255,0) 55%),
    radial-gradient(1.0px 1.0px at 87px 185px, rgba(198,240,255,0.42) 0, rgba(198,240,255,0) 55%),
    radial-gradient(1.3px 1.3px at 220px 59px, rgba(225,235,255,0.33) 0, rgba(225,235,255,0) 55%),
    radial-gradient(1.2px 1.2px at 43px 7px, rgba(198,240,255,0.34) 0, rgba(198,240,255,0) 55%),
    radial-gradient(1.1px 1.1px at 174px 159px, rgba(170,255,225,0.39) 0, rgba(170,255,225,0) 55%),
    radial-gradient(1.3px 1.3px at 206px 115px, rgba(170,255,225,0.3) 0, rgba(170,255,225,0) 55%),
    radial-gradient(1.1px 1.1px at 104px 238px, rgba(210,198,255,0.31) 0, rgba(210,198,255,0) 55%),
    radial-gradient(0.9px 0.9px at 172px 167px, rgba(255,202,200,0.25) 0, rgba(255,202,200,0) 55%),
    radial-gradient(1.0px 1.0px at 118px 79px, rgba(225,235,255,0.3) 0, rgba(225,235,255,0) 55%),
    radial-gradient(1.2px 1.2px at 231px 173px, rgba(198,240,255,0.24) 0, rgba(198,240,255,0) 55%),
    radial-gradient(1.3px 1.3px at 173px 178px, rgba(225,235,255,0.19) 0, rgba(225,235,255,0) 55%);
  background-size: 100% 100%, 100% 100%, 420px 420px, 420px 420px, 420px 420px, 420px 420px, 420px 420px, 420px 420px, 420px 420px, 420px 420px, 420px 420px, 420px 420px, 420px 420px, 420px 420px, 420px 420px, 420px 420px, 420px 420px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 250px 250px, 250px 250px, 250px 250px, 250px 250px, 250px 250px, 250px 250px, 250px 250px, 250px 250px, 250px 250px, 250px 250px, 250px 250px, 250px 250px, 250px 250px, 250px 250px, 250px 250px, 250px 250px, 250px 250px, 250px 250px, 250px 250px, 250px 250px, 250px 250px, 250px 250px;
  background-repeat: no-repeat, no-repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat;
}

/* ── Las que titilan ── */
.fondo i {
  position: absolute; display: block; border-radius: 50%;
  background: currentColor; opacity: var(--o0);
  box-shadow: 0 0 6px 1px currentColor;
  animation: cielo-titila var(--dur) ease-in-out var(--del) infinite;
}
/* Destello corto y doble dentro de un ciclo largo: la estrella pasa la mayor
   parte del tiempo apagada y de pronto pega el brillo. */
@keyframes cielo-titila {
  0%,  40%   { opacity: var(--o0); transform: scale(.85); }
  46%        { opacity: 1; transform: scale(1.45); }
  50%        { opacity: calc(var(--o0) + .28); transform: scale(1.05); }
  55%        { opacity: .9; transform: scale(1.3); }
  62%, 100%  { opacity: var(--o0); transform: scale(.85); }
}
/* Quien pidió menos movimiento en su sistema ve el cielo quieto. */
@media (prefers-reduced-motion: reduce) {
  .fondo i { animation: none; opacity: calc(var(--o0) + .3); }
}

.fondo i:nth-child(1) { left:8.6%; top:3.2%; width:2.1px; height:2.1px; color:rgb(255,224,186); --o0:0.24; --dur:25.7s; --del:17.5s; }
.fondo i:nth-child(2) { left:30.2%; top:4.1%; width:3.6px; height:3.6px; color:rgb(225,235,255); --o0:0.18; --dur:18.0s; --del:15.8s; }
.fondo i:nth-child(3) { left:47.2%; top:8.7%; width:2.3px; height:2.3px; color:rgb(198,240,255); --o0:0.14; --dur:22.3s; --del:10.4s; }
.fondo i:nth-child(4) { left:59.5%; top:29.2%; width:2.4px; height:2.4px; color:rgb(225,235,255); --o0:0.18; --dur:24.8s; --del:15.1s; }
.fondo i:nth-child(5) { left:76.1%; top:25.6%; width:1.6px; height:1.6px; color:rgb(210,198,255); --o0:0.18; --dur:18.2s; --del:16.1s; }
.fondo i:nth-child(6) { left:96.6%; top:3.0%; width:2.0px; height:2.0px; color:rgb(170,255,225); --o0:0.17; --dur:9.3s; --del:17.6s; }
.fondo i:nth-child(7) { left:9.6%; top:49.3%; width:3.4px; height:3.4px; color:rgb(225,235,255); --o0:0.24; --dur:20.2s; --del:6.5s; }
.fondo i:nth-child(8) { left:25.9%; top:55.2%; width:2.2px; height:2.2px; color:rgb(225,235,255); --o0:0.26; --dur:17.1s; --del:0.1s; }
.fondo i:nth-child(9) { left:43.4%; top:50.3%; width:2.4px; height:2.4px; color:rgb(225,235,255); --o0:0.12; --dur:19.9s; --del:1.8s; }
.fondo i:nth-child(10) { left:60.9%; top:56.2%; width:1.7px; height:1.7px; color:rgb(198,240,255); --o0:0.11; --dur:22.5s; --del:1.4s; }
.fondo i:nth-child(11) { left:73.1%; top:58.5%; width:2.6px; height:2.6px; color:rgb(198,240,255); --o0:0.12; --dur:25.6s; --del:6.0s; }
.fondo i:nth-child(12) { left:89.1%; top:47.5%; width:1.7px; height:1.7px; color:rgb(255,224,186); --o0:0.26; --dur:13.9s; --del:11.3s; }
.fondo i:nth-child(13) { left:5.1%; top:73.1%; width:3.6px; height:3.6px; color:rgb(198,240,255); --o0:0.12; --dur:14.7s; --del:7.5s; }
.fondo i:nth-child(14) { left:24.3%; top:75.1%; width:2.2px; height:2.2px; color:rgb(255,224,186); --o0:0.19; --dur:25.2s; --del:6.0s; }
.fondo i:nth-child(15) { left:47.4%; top:92.4%; width:2.6px; height:2.6px; color:rgb(170,255,225); --o0:0.16; --dur:16.5s; --del:11.7s; }
.fondo i:nth-child(16) { left:58.9%; top:86.8%; width:2.1px; height:2.1px; color:rgb(150,180,255); --o0:0.23; --dur:12.1s; --del:2.6s; }
.fondo i:nth-child(17) { left:72.4%; top:77.9%; width:2.0px; height:2.0px; color:rgb(225,235,255); --o0:0.16; --dur:11.4s; --del:5.3s; }
.fondo i:nth-child(18) { left:97.1%; top:84.5%; width:2.4px; height:2.4px; color:rgb(210,198,255); --o0:0.19; --dur:22.1s; --del:7.0s; }