/* gato.css — capa del gato Dejavú. Solo el gato recibe el puntero; el resto de la página sigue igual. */
.gato-capa {
  position: absolute; left: 0; top: 0; width: 0; height: 0;
  z-index: var(--gato-z, 5);
  pointer-events: none;
}
.gato-lienzo { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform; }
/* Versión tinta: se mezcla con el papel como tinta china */
.gato-lienzo.gato-tinta { mix-blend-mode: multiply; }

.gato-toque {
  position: absolute; left: 0; top: 0;
  pointer-events: auto; border-radius: 50%;
  transform-origin: 50% 50%;
  touch-action: none; -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
}
.gato-toque[hidden] { display: none; }

/* La burbuja: un papelito escrito con su letra */
.gato-globo-pos { position: absolute; left: 0; top: 0; pointer-events: none; }
.gato-globo {
  --cola-x: 50%;
  position: relative; white-space: nowrap;
  font-family: var(--f-mano, "Gelarte Mano", "Archivo", sans-serif);
  font-size: 1.45rem; line-height: 1; color: var(--tinta, #16161A);
  background: #FCFBF7 var(--textura-papel, none); background-size: 260px; background-blend-mode: multiply;
  padding: 9px 15px 10px; border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(60, 40, 20, .07), 0 1px 2px rgba(22, 22, 26, .08), 0 12px 24px -14px rgba(22, 22, 26, .5);
  opacity: 0; scale: .9; rotate: -2deg;
  transform-origin: var(--cola-x) 100%;
  transition: opacity .2s ease-out, scale .24s cubic-bezier(.2, .75, .2, 1);
}
.gato-globo.visible { opacity: 1; scale: 1; }
.gato-globo::after {
  content: ''; position: absolute; top: 100%; left: var(--cola-x); margin-left: -7px;
  border: 7px solid transparent; border-top-color: #FCFBF7; border-bottom: 0;
}
.gato-globo.abajo { transform-origin: var(--cola-x) 0; }
.gato-globo.abajo::after { top: auto; bottom: 100%; border-top: 0; border-bottom: 7px solid #FCFBF7; }

@media (prefers-reduced-motion: reduce) {
  .gato-globo { scale: 1; transition: opacity .2s ease-out; }
}