portada: reticula 2px, hover con glow masivo rgba(220,0.35) que llena, cuadrante bg+inset

88a3aae7626ce823f3142cfbefaa834b39ceb62f · ruwaq Sergio · 2026-05-24T02:55:18Z (5 killa ñawpaq) · tayta ff28b3c5e · kay commitpi sach'ata qhaway

Semántico sayk'uy

Mana ima sutichaypas t'ikrakurqanchu: qillqalla, yachachiylla utaq willaylla t'ikrakurqan.

1 qillqakuna · +10 −14

crates/apps/gioser-web/styles.css +10 −14

diff --git a/crates/apps/gioser-web/styles.css b/crates/apps/gioser-web/styles.css
index 00bda7d..2398ab9 100644
--- a/crates/apps/gioser-web/styles.css
+++ b/crates/apps/gioser-web/styles.css
@@ -48,7 +48,7 @@ html, body {
 }
 
 /* ===================================================
-   RETÍCULA — 1.5px, semi-brillo base, glow 20px en hover
+   RETÍCULA — 2px, brillo rotundo, glow masivo en hover
    =================================================== */
 
 .portada::before {
@@ -59,17 +59,17 @@ html, body {
   pointer-events: none;
   transition: all 0.35s ease;
   background:
-    linear-gradient(90deg, transparent calc(50% - 0.75px), rgba(160,160,160,0.35) calc(50% - 0.75px), rgba(160,160,160,0.50) calc(50% + 0.75px), transparent calc(50% + 0.75px)),
-    linear-gradient(0deg, transparent calc(50% - 0.75px), rgba(160,160,160,0.35) calc(50% - 0.75px), rgba(160,160,160,0.50) calc(50% + 0.75px), transparent calc(50% + 0.75px)),
-    radial-gradient(circle at 50% 50%, transparent calc(13px), rgba(160,160,160,0.45) calc(13px), rgba(160,160,160,0.45) calc(15px), transparent calc(15px));
+    linear-gradient(90deg, transparent calc(50% - 1px), rgba(180,180,180,0.5) calc(50% - 1px), rgba(180,180,180,0.65) calc(50% + 1px), transparent calc(50% + 1px)),
+    linear-gradient(0deg, transparent calc(50% - 1px), rgba(180,180,180,0.5) calc(50% - 1px), rgba(180,180,180,0.65) calc(50% + 1px), transparent calc(50% + 1px)),
+    radial-gradient(circle at 50% 50%, transparent calc(14px), rgba(180,180,180,0.55) calc(14px), rgba(180,180,180,0.55) calc(17px), transparent calc(17px));
 }
 
 .portada-hover::before {
   background:
-    linear-gradient(90deg, transparent calc(50% - 0.75px), rgba(220,220,220,0.65) calc(50% - 0.75px), rgba(220,220,220,0.80) calc(50% + 0.75px), transparent calc(50% + 0.75px)),
-    linear-gradient(0deg, transparent calc(50% - 0.75px), rgba(220,220,220,0.65) calc(50% - 0.75px), rgba(220,220,220,0.80) calc(50% + 0.75px), transparent calc(50% + 0.75px)),
-    radial-gradient(circle at 50% 50%, transparent calc(13px), rgba(220,220,220,0.85) calc(13px), rgba(220,220,220,0.85) calc(15px), transparent calc(15px)),
-    radial-gradient(circle at 50% 50%, rgba(200,200,200,0.12) 0%, rgba(200,200,200,0.06) 20%, transparent 40%);
+    linear-gradient(90deg, transparent calc(50% - 1px), rgba(255,255,255,0.85) calc(50% - 1px), rgba(255,255,255,0.95) calc(50% + 1px), transparent calc(50% + 1px)),
+    linear-gradient(0deg, transparent calc(50% - 1px), rgba(255,255,255,0.85) calc(50% - 1px), rgba(255,255,255,0.95) calc(50% + 1px), transparent calc(50% + 1px)),
+    radial-gradient(circle at 50% 50%, transparent calc(14px), rgba(255,255,255,0.9) calc(14px), rgba(255,255,255,0.9) calc(17px), transparent calc(17px)),
+    radial-gradient(circle at 50% 50%, rgba(220,220,220,0.35) 0%, rgba(220,220,220,0.20) 15%, rgba(200,200,200,0.10) 30%, transparent 55%);
 }
 
 /* ===================================================
@@ -91,12 +91,8 @@ html, body {
 }
 
 .cuadrante:hover {
-  background: rgba(192, 192, 192, 0.08);
-}
-
-/* Cuadrante activo con hover más marcado */
-.cuadrante:hover {
-  box-shadow: inset 0 0 0 1px rgba(200,200,200,0.15);
+  background: rgba(200, 200, 200, 0.10);
+  box-shadow: inset 0 0 0 1px rgba(220,220,220,0.25);
 }
 
 /* Borde iluminado en hover */