/* Prometeo home: burbujas animadas sobre el fondo azul marino. Solo se usa en prometeo.cloud. */
:root { --pm-1: 11,115,196; --pm-2: 0,39,156; --pm-3: 58,131,255; --pm-4: 20,80,170; }

html:root {
    background:
        radial-gradient(90% 55% at 50% 118%, #0b73c4 0%, rgba(11,115,196,0) 70%),
        radial-gradient(120% 70% at 50% 125%, #00279c 0%, rgba(0,39,156,0) 75%),
        linear-gradient(180deg, #02070d 0%, #051429 55%, #072750 100%) fixed !important;
}
html:root body { background: transparent !important; }

.pm-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; filter: blur(46px); }
.pm-bg .blob, .pm-bg .orbit > i { position: absolute; display: block; border-radius: 50%; will-change: transform; }
.pm-bg .blob { width: 70vmax; height: 70vmax; top: 15%; left: 15%; }
.pm-bg .orbit { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; will-change: transform; }
.pm-bg .orbit > i { width: 70vmax; height: 70vmax; }

.pm-bg .b1 { background: radial-gradient(circle at center, rgba(var(--pm-1), .42) 0, rgba(var(--pm-1), 0) 50%); animation: pm-y 14s ease-in-out infinite; }
.pm-bg .b4 { background: radial-gradient(circle at center, rgba(var(--pm-2), .55) 0, rgba(var(--pm-2), 0) 50%); animation: pm-x 18s ease-in-out infinite; }

.pm-bg .o2 { transform-origin: calc(50% - 25vw) 50%; animation: pm-spin 26s linear infinite; }
.pm-bg .o2 > i { background: radial-gradient(circle at center, rgba(var(--pm-3), .30) 0, rgba(var(--pm-3), 0) 50%); }
.pm-bg .o3 { transform-origin: calc(50% + 25vw) 50%; animation: pm-spin 40s linear infinite reverse; }
.pm-bg .o3 > i { background: radial-gradient(circle at center, rgba(var(--pm-4), .40) 0, rgba(var(--pm-4), 0) 50%); top: 30%; left: 10%; }
.pm-bg .o5 { transform-origin: 30% 70%; animation: pm-spin 32s linear infinite; }
.pm-bg .o5 > i { width: 110vmax; height: 110vmax; background: radial-gradient(circle at center, rgba(var(--pm-1), .26) 0, rgba(var(--pm-1), 0) 50%); }

@keyframes pm-y { 0%, 100% { transform: translate3d(0, -14vh, 0); } 50% { transform: translate3d(0, 14vh, 0); } }
@keyframes pm-x { 0%, 100% { transform: translate3d(-16vw, 0, 0); } 50% { transform: translate3d(16vw, 0, 0); } }
@keyframes pm-spin { to { transform: rotate(360deg); } }
/* burbuja interactiva: sigue al cursor (la posicion la actualiza el script de la pagina) */
.pm-bg .b6 { top: 50%; left: 50%; width: 56vmax; height: 56vmax; margin: -28vmax 0 0 -28vmax; background: radial-gradient(circle at center, rgba(var(--pm-3), .12) 0, rgba(var(--pm-3), 0) 50%); }

/* nubes ASCII: canvas con ruido que se convierte en caracteres (ver script de la pagina) */
.pm-ascii { position: fixed; z-index: -1; inset: 0; width: 100%; height: 100%; pointer-events: none; }