sergio/takana

Las cinco manchas saturadas que derivaban por guion se reemplazan por las
mismas tres luces tenues de los otros dos sitios —violeta, ámbar y azul—, que
mueve el CSS solo. Sale el guion que elegía destinos para cada mancha (ya no
hay nada que mover desde JavaScript) y su comentario en el CSS.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

diff --git a/web/takana-os.net/index.html b/web/takana-os.net/index.html
index 2f3a239d..5c1e6f71 100644
--- a/web/takana-os.net/index.html
+++ b/web/takana-os.net/index.html
@@ -40,44 +40,23 @@
  --acento:#E8834A;--acento2:#E3A63D;
  color-scheme:dark}
 
-/* ── el fondo vivo: cinco manchas de color que derivan despacio ─────────────────────────────
-   Va en un plano FIJO detrás de todo (`z-index:-1`), que funciona porque `section.franja` no
-   tiene fondo propio —sólo un `border-top`—: el color se ve en la página entera y no sólo en los
-   bordes. Las tarjetas (`--papel`) siguen siendo opacas, que es lo que mantiene el texto legible
-   encima de un fondo que se mueve.
-
-   ⚠ **Lo que se anima son `transform`, `opacity` y `filter`, y nada más.** Ésas tres las resuelve
-   el compositor sin repintar; animar el `background` de un gradiente a pantalla completa repinta
-   cada cuadro y en un portátil se nota en el ventilador antes que en los ojos.
-
-   ⚠ Y el movimiento aleatorio NO se hace cuadro a cuadro desde JS: el guion sólo elige un destino
-   nuevo cada varios segundos y la TRANSICIÓN de CSS interpola. Un `requestAnimationFrame` que
-   escribe estilos 60 veces por segundo para mover algo que tarda un minuto en cruzar la pantalla
-   es trabajo tirado.
-
-   `--mezcla` y `--fuerza` son lo que cambia entre temas: en oscuro `screen` suma luz de color
-   sobre la obsidiana; en claro eso lavaría todo a blanco, así que ahí se usa `multiply` con muy
-   poca fuerza y queda un tinte, no una mancha. */
-:root{--mezcla:multiply;--fuerza:.16}
-@media not all and (prefers-color-scheme:light){:root{--mezcla:screen;--fuerza:.52}}
-:root[data-theme="dark"]{--mezcla:screen;--fuerza:.52}
-.aurora{position:sticky;top:0;height:100vh;margin-bottom:-100vh;z-index:0;pointer-events:none;overflow:hidden;
- contain:strict}
-.aurora i{position:absolute;display:block;top:50%;left:50%;
- width:78vmax;height:78vmax;margin:-39vmax 0 0 -39vmax;border-radius:50%;
- mix-blend-mode:var(--mezcla);opacity:var(--fuerza);
- /* El blur es enorme a propósito: sin él se ven cinco círculos, y con él se ve UN campo de color.
-    `will-change` sube las manchas a su propia capa para que el compositor no rehaga el resto. */
- filter:blur(9vmax);will-change:transform,opacity,filter;
- transition:transform 46s cubic-bezier(.37,0,.63,1),opacity 46s linear,filter 46s linear}
-.aurora i:nth-child(1){background:radial-gradient(circle,#8A3BD6 0%,rgba(138,59,214,0) 68%)}
-.aurora i:nth-child(2){background:radial-gradient(circle,#1F8FA8 0%,rgba(31,143,168,0) 68%)}
-.aurora i:nth-child(3){background:radial-gradient(circle,#DF6B2A 0%,rgba(223,107,42,0) 68%)}
-.aurora i:nth-child(4){background:radial-gradient(circle,#C2266B 0%,rgba(194,38,107,0) 68%)}
-.aurora i:nth-child(5){background:radial-gradient(circle,#2F6BD8 0%,rgba(47,107,216,0) 68%)}
-/* Quien pide menos movimiento recibe el color y no el movimiento: el fondo sigue siendo colorido,
-   pero se queda quieto. No es un extra — un fondo que deriva puede marear de verdad. */
-@media (prefers-reduced-motion:reduce){.aurora i{transition:none}}
+/* Las tres luces de gioser.net y tawasuyu.net (2026-10-13): reemplazan las cinco manchas
+   saturadas que derivaban por guion. Más sobrias, y las mueve el CSS solo. */
+:root{--lz1:#9b7bff;--lz2:#f0a050;--lz3:#5b8ef0;--lz-op:.28}
+@media not all and (prefers-color-scheme:light){:root{--lz1:#8a63ff;--lz2:#f2a24e;--lz3:#4f86ff;--lz-op:.20}}
+.aurora{position:sticky;top:0;height:100vh;margin-bottom:-100vh;z-index:0;pointer-events:none;overflow:hidden}
+.aurora i{position:absolute;width:60vmax;height:60vmax;border-radius:50%;filter:blur(70px);
+ opacity:var(--lz-op);will-change:transform}
+.aurora i:nth-child(1){background:radial-gradient(circle,var(--lz1),transparent 65%);left:-20vmax;top:-15vmax;
+ animation:lz1 38s ease-in-out infinite alternate}
+.aurora i:nth-child(2){background:radial-gradient(circle,var(--lz2),transparent 65%);right:-25vmax;top:20vh;
+ animation:lz2 46s ease-in-out infinite alternate}
+.aurora i:nth-child(3){background:radial-gradient(circle,var(--lz3),transparent 65%);left:10vw;bottom:-30vmax;
+ animation:lz3 52s ease-in-out infinite alternate}
+@keyframes lz1{to{transform:translate(30vw,25vh) scale(1.15)}}
+@keyframes lz2{to{transform:translate(-35vw,15vh) scale(.9)}}
+@keyframes lz3{to{transform:translate(25vw,-35vh) scale(1.2)}}
+@media (prefers-reduced-motion:reduce){.aurora i{animation:none}}
 
 *{margin:0;padding:0;box-sizing:border-box}
 html{scroll-behavior:smooth}
@@ -410,7 +389,7 @@ html.js .t-panel.activo{animation:t-entra .4s ease both}
 
 <div class="t-cuerpo">
 <!-- El fondo vivo. `aria-hidden` porque no dice nada: es color. -->
-<div class="aurora" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i></div>
+<div class="aurora" aria-hidden="true"><i></i><i></i><i></i></div>
 <div class="t-tabs" id="t-tabs" role="tablist" aria-label="secciones / sections"><button class="t-tab" role="tab" type="button" id="tab-descargar" data-tab="descargar" aria-controls="descargar" aria-selected="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 4v11M7 11l5 5 5-5M5 20h14"/></svg><span class="rot"><span data-l="es">Descargar</span><span data-l="en">Download</span></span></button><button class="t-tab" role="tab" type="button" id="tab-decisiones" data-tab="decisiones" aria-controls="decisiones" aria-selected="false"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v18M5 7h14"/><path d="M8 7 5 13h6zM16 7l-3 6h6z"/></svg><span class="rot"><span data-l="es">Las decisiones</span><span data-l="en">The decisions</span></span></button><button class="t-tab" role="tab" type="button" id="tab-componentes" data-tab="componentes" aria-controls="componentes" aria-selected="false"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3 8 4.5v9L12 21l-8-4.5v-9z"/><path d="m4 7.5 8 4.5 8-4.5M12 12v9"/></svg><span class="rot"><span data-l="es">Los componentes</span><span data-l="en">Components</span></span></button><button class="t-tab" role="tab" type="button" id="tab-codigo" data-tab="codigo" aria-controls="codigo" aria-selected="false"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 18 3 12l6-6M15 6l6 6-6 6"/></svg><span class="rot"><span data-l="es">El código</span><span data-l="en">The code</span></span></button></div>
 
 <section class="franja t-panel activo" id="descargar" role="tabpanel" aria-labelledby="tab-descargar"><div class="envoltura">
@@ -942,65 +921,7 @@ html.js .t-panel.activo{animation:t-entra .4s ease both}
 
 })();
 
-/* ── el fondo vivo: elegir destinos, no pintar cuadros ─────────────────────────────────────────
-   El guion hace UNA cosa: cada tanto le da a cada mancha una posición, un tamaño, un giro de tono
-   y una opacidad nuevos. La interpolación es de CSS (`transition: … 46s`), así que entre dos
-   elecciones no corre ni una línea de JavaScript.
 
-   ⚠ **La primera colocación va sin transición y las siguientes con ella.** Si la primera se
-   transicionara, las cinco manchas saldrían del centro exacto de la pantalla a la vez y el primer
-   minuto de la página sería un floreo; arrancan ya repartidas y de ahí derivan.
-
-   ⚠ **`prefers-reduced-motion` se respeta de verdad**, o sea que no se programa el intervalo: con
-   el CSS solo, el `transition:none` dejaría los saltos INSTANTÁNEOS cada 23 s, que es peor que el
-   movimiento continuo que la persona pidió no tener. */
-(function(){
- var capa = document.querySelector('.aurora');
- if (!capa) return;
- var manchas = capa.querySelectorAll('i');
- var quieto = window.matchMedia && window.matchMedia('(prefers-reduced-motion:reduce)').matches;
-
- function az(a, b){ return a + Math.random() * (b - a); }
-
- function colocar(m, i){
-  // Repartidas por la pantalla, pero sin salirse tanto que la mancha deje de aportar color.
-  m.style.transform = 'translate(' + az(-42, 42).toFixed(1) + 'vw,' + az(-40, 40).toFixed(1) + 'vh)'
-                    + ' scale(' + az(0.62, 1.22).toFixed(3) + ')';
-  // El giro de tono es lo que hace que el conjunto no repita nunca la misma combinación: cada
-  // mancha parte de un color distinto y cada una gira por su cuenta.
-  m.style.filter = 'blur(9vmax) hue-rotate(' + az(-70, 70).toFixed(1) + 'deg)';
-  // La opacidad se mueve alrededor de la del tema, no en absoluto: así el tema sigue mandando
-  // cuánto color hay, y el azar sólo lo respira.
-  var base = parseFloat(getComputedStyle(capa).getPropertyValue('--fuerza')) || 0.4;
-  m.style.opacity = (base * az(0.55, 1.25)).toFixed(3);
- }
-
- // Arranque: sin transición, para que no salgan todas del centro.
- manchas.forEach(function(m, i){
-  var t = m.style.transition; m.style.transition = 'none';
-  colocar(m, i);
-  // Un reflow forzado entre medio, o el navegador agrupa los dos cambios y la transición vuelve
-  // a aplicarse al primer destino — que es justo el floreo que esto evita.
-  void m.offsetWidth;
-  m.style.transition = t;
- });
-
- if (quieto) return;
- // Cada mancha en su propio reloj y con su propio desfase: con un intervalo común las cinco
- // cambiarían de rumbo en el mismo instante y el fondo latiría en vez de derivar.
- manchas.forEach(function(m, i){
-  setTimeout(function(){
-   setInterval(function(){ colocar(m, i); }, 23000 + i * 3100);
-  }, i * 4300);
- });
-
- // El tema cambia `--fuerza`; sin volver a colocar, las manchas se quedan con la opacidad del tema
- // viejo hasta el siguiente tic (23 s mirando un fondo que no corresponde).
- var perilla = document.getElementById('tema');
- if (perilla) perilla.addEventListener('click', function(){
-  setTimeout(function(){ manchas.forEach(colocar); }, 30);
- });
-})();
 </script>
 <script>
 /* ── la franja y las pestañas (2026-10-13) ──────────────────────────────────────────────────────