/* Nörd — estilos del front. Mínimos a propósito: el sprite manda. */
.pg-nord-lienzo { image-rendering:pixelated; image-rendering:crisp-edges; display:block; }
.pg-mascota { margin:1.5em 0; }
.pg-mascota--centro { display:flex; flex-direction:column; align-items:center; }
.pg-mascota--derecha { display:flex; flex-direction:column; align-items:flex-end; }
.pg-mascota--izquierda { display:flex; flex-direction:column; align-items:flex-start; }
.pg-mascota-texto { margin:.6em 0 0; font-size:.95em; opacity:.85; text-align:center; }

.pg-nord-carga { position:fixed; inset:0; z-index:99999; display:none; place-items:center;
  background:rgba(7,9,28,.86); backdrop-filter:blur(3px); }
.pg-nord-carga.visible { display:grid; }
.pg-nord-carga-caja { text-align:center; }
.pg-nord-carga-texto { margin:14px 0 0; color:#F0EAD8; font-size:15px; letter-spacing:.02em; }

.pg-nord-eliot { display:flex; align-items:flex-start; gap:10px; padding:10px 12px; }
.pg-nord-eliot-bocadillo { background:rgba(255,255,255,.08); border-radius:10px; padding:8px 11px;
  font-size:13px; line-height:1.45; }
.pg-nord-eliot-bocadillo strong { display:block; font-size:11px; text-transform:uppercase;
  letter-spacing:.08em; color:#C9873A; margin-bottom:2px; }

@media (prefers-reduced-motion:reduce) { .pg-nord-lienzo { animation:none !important; } }

/* Mascota fija en una esquina */
.pg-nord-flotante { position: fixed; z-index: 9998; pointer-events: auto; line-height: 0; }
.pg-nord-flotante--abajo-derecha   { right: 16px; bottom: 16px; }
.pg-nord-flotante--abajo-izquierda { left: 16px;  bottom: 16px; }
.pg-nord-flotante--arriba-derecha  { right: 16px; top: 16px; }
.pg-nord-flotante--arriba-izquierda{ left: 16px;  top: 16px; }
@media (max-width: 640px) { .pg-nord-sin-movil { display: none; } }
.pg-nord-flotante .pg-nord-lienzo { transition: transform .18s ease; }
.pg-nord-flotante:hover .pg-nord-lienzo { transform: translateY(-2px); }
.pg-nord-arrastrando { transition: none !important; opacity: .92; }
.pg-nord-arrastrando .pg-nord-lienzo { transform: none !important; }
.pg-nord-flotante [role="button"]:focus-visible { outline: 3px solid #2FD6B0; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .pg-nord-flotante .pg-nord-lienzo,
  .pg-nord-flotante:hover .pg-nord-lienzo { transition: none; transform: none; }
}