tawasuyu/brahman

diff --git a/crates/apps/gioser-web/index.html b/crates/apps/gioser-web/index.html
index 30cf3a7..5a78eed 100644
--- a/crates/apps/gioser-web/index.html
+++ b/crates/apps/gioser-web/index.html
@@ -9,7 +9,7 @@
 </head>
 <body>
   <!-- Canvas de fondo (opcional para portada, necesario para WASM) -->
-  <canvas id="gioser-canvas" style="position:fixed;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;z-index:0;" aria-hidden="true"></canvas>
+  <canvas id="gioser-canvas" style="position:fixed;inset:0;width:1px;height:1px;pointer-events:none;z-index:-1;" aria-hidden="true"></canvas>
 
   <!-- Portada: retícula 2×2 tipo chakana -->
   <div id="portada" class="portada">
@@ -159,14 +159,14 @@
     // Hover en cuadrantes ilumina retícula
     document.querySelectorAll('.cuadrante').forEach(q => {
       q.addEventListener('mouseenter', () => {
-        reticulaV.classList.add('brighter');
-        reticulaH.classList.add('brighter');
-        reticulaC.classList.add('brighter');
+        reticulaV.classList.add('reticula-lit');
+        reticulaH.classList.add('reticula-lit');
+        reticulaC.classList.add('reticula-lit');
       });
       q.addEventListener('mouseleave', () => {
-        reticulaV.classList.remove('brighter');
-        reticulaH.classList.remove('brighter');
-        reticulaC.classList.remove('brighter');
+        reticulaV.classList.remove('reticula-lit');
+        reticulaH.classList.remove('reticula-lit');
+        reticulaC.classList.remove('reticula-lit');
       });
       q.addEventListener('click', function(e) {
         const hex = this.dataset.q;
diff --git a/crates/apps/gioser-web/styles.css b/crates/apps/gioser-web/styles.css
index 1462739..24aaf3f 100644
--- a/crates/apps/gioser-web/styles.css
+++ b/crates/apps/gioser-web/styles.css
@@ -57,18 +57,12 @@ html, body {
   position: absolute;
   top: 0;
   left: 50%;
-  width: 2px;
+  width: 3px;
   height: 100%;
-  background: #444;
+  background: #777;
   z-index: 30;
   pointer-events: none;
-  transition: background 0.4s ease, box-shadow 0.4s ease;
-  transform: translateX(-0.5px);
-}
-
-.reticula-v.brighter {
-  background: rgba(192, 192, 192, 0.35);
-  box-shadow: -2px 0 8px rgba(192, 192, 192, 0.18), 2px 0 8px rgba(192, 192, 192, 0.18);
+  transform: translateX(-1.5px);
 }
 
 .reticula-h {
@@ -76,37 +70,36 @@ html, body {
   top: 50%;
   left: 0;
   width: 100%;
-  height: 2px;
-  background: #444;
+  height: 3px;
+  background: #777;
   z-index: 30;
   pointer-events: none;
-  transition: background 0.4s ease, box-shadow 0.4s ease;
-  transform: translateY(-0.5px);
-}
-
-.reticula-h.brighter {
-  background: rgba(192, 192, 192, 0.35);
-  box-shadow: 0 -2px 8px rgba(192, 192, 192, 0.18), 0 2px 8px rgba(192, 192, 192, 0.18);
+  transform: translateY(-1.5px);
 }
 
 .reticula-center {
   position: absolute;
-  top: calc(50% - 14px);
-  left: calc(50% - 14px);
-  width: 28px;
-  height: 28px;
-  border: 2px solid #444;
+  top: calc(50% - 16px);
+  left: calc(50% - 16px);
+  width: 32px;
+  height: 32px;
+  border: 3px solid #777;
   border-radius: 50%;
   z-index: 30;
   pointer-events: none;
-  transition: border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
   background: transparent;
 }
 
-.reticula-center.brighter {
-  border-color: rgba(192, 192, 192, 0.35);
-  box-shadow: 0 0 10px rgba(192, 192, 192, 0.2);
-  background: rgba(192, 192, 192, 0.04);
+/* Iluminación en hover via JS */
+.reticula-lit {
+  background: rgba(200, 200, 200, 0.5) !important;
+  box-shadow: 0 0 12px rgba(200, 200, 200, 0.3) !important;
+}
+
+.reticula-center.reticula-lit {
+  border-color: rgba(200, 200, 200, 0.6) !important;
+  box-shadow: 0 0 14px rgba(200, 200, 200, 0.35) !important;
+  background: rgba(200, 200, 200, 0.06) !important;
 }
 
 /* ===================================================