/* Garras: manos que escalan los bordes de la pantalla (ver js/garras.js) */
:root {
  /* mano de Frankenstein */
  --garra-piel: #86a466;
  --garra-sombra: #5b7742;
  --garra-luz: #bad394;
  --garra-dorso: #6a8750;
  --garra-tinta: #141a10;
  --garra-una: #23281f;
  --garra-una-luz: #7f8a74;
  --garra-una-sombra: #4a6334;
  --garra-mancha: #6f8c54;
  --garra-cicatriz: #6e3b3b;
  --garra-hilo: #0f0f0f;
  --garra-proy: rgba(12, 10, 6, .3);
  /* daño sobre la superficie (tema claro) */
  --grieta: rgba(20, 16, 22, .82);
  --grieta-luz: rgba(255, 255, 255, .9);
  --hueco: #120d10;
  --hueco-fondo: #000;
  --hueco-borde: rgba(120, 110, 125, .55);
  --esquirla: #e11d25;
  --esquirla-2: #1d4fb8;
  --esquirla-3: #f39200;
  --polvo: #b9b0c2;
}
[data-tema="oscuro"] {
  --garra-proy: rgba(0, 0, 0, .55);
  --grieta: rgba(235, 228, 245, .78);
  --grieta-luz: rgba(0, 0, 0, .9);
  --hueco: #000;
  --hueco-fondo: #1d1022;
  --hueco-borde: rgba(200, 190, 210, .45);
  --polvo: #6f6678;
}
.g-mano { position: fixed; top: 0; width: 0; height: 0; z-index: 50; pointer-events: none; will-change: transform; }
.g-izq { left: 0; }
.g-der { right: 0; }
.g-svg { position: absolute; top: 0; overflow: visible; }
.g-der .g-svg { transform: scaleX(-1); }
.g-proy { fill: var(--garra-proy); }
.g-dorso { fill: var(--garra-dorso); }
.g-piel { fill: var(--garra-piel); }
.g-sombra { fill: var(--garra-sombra); }
.g-verruga { fill: var(--garra-mancha); opacity: .8; }
.g-luz { fill: none; stroke: var(--garra-luz); stroke-width: 2.2; stroke-linecap: round; opacity: .9; }
.g-arruga { fill: none; stroke: var(--garra-tinta); stroke-width: 1.1; stroke-linecap: round; opacity: .55; }
.g-trama { fill: none; stroke: var(--garra-tinta); stroke-width: .9; stroke-linecap: round; opacity: .45; }
.g-tinta, .g-tinta-l { fill: none; stroke: var(--garra-tinta); stroke-width: 2.6; stroke-linejoin: round; }
.g-tinta-fina { fill: none; stroke: var(--garra-tinta); stroke-width: 1.4; stroke-linejoin: round; }
.g-una { fill: var(--garra-una); }
.g-cuti { fill: none; stroke: var(--garra-una-sombra); stroke-width: 3.2; stroke-linecap: round; }
.g-una-luz { fill: none; stroke: var(--garra-una-luz); stroke-width: 1.6; stroke-linecap: round; }
.g-cicatriz { fill: none; stroke: var(--garra-cicatriz); stroke-width: 2.4; stroke-linecap: round; opacity: .9; }
.g-punto { fill: none; stroke: var(--garra-hilo); stroke-width: 1.8; stroke-linecap: round; }
.g-punta { fill: none; }
.g-capa-grietas { position: absolute; top: 0; left: 0; width: 100%; height: 0; z-index: 45; pointer-events: none; }
.g-grietas { position: absolute; overflow: visible; }
.g-grieta { fill: none; stroke: var(--grieta); stroke-linecap: round; stroke-linejoin: round; }
.g-grieta-luz { fill: none; stroke: var(--grieta-luz); stroke-linecap: round; stroke-linejoin: round; }
.g-hueco { fill: var(--hueco); }
.g-hueco-fondo { fill: var(--hueco-fondo); }
.g-borde { fill: none; stroke: var(--hueco-borde); stroke-width: 2.2; }
.g-esquirla { fill: var(--esquirla); stroke: var(--grieta); stroke-width: .5; }
.g-e1 { fill: var(--esquirla-2); }
.g-e2 { fill: var(--esquirla-3); }
.g-polvo { position: absolute; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 1px; background: var(--polvo); }
@media print { .g-mano, .g-capa-grietas { display: none; } }