.gpb-avatar {
  --avatar-size: 128px;
  position: relative;
  isolation: isolate;
  flex: none;
  inline-size: var(--avatar-size);
  block-size: var(--avatar-size);
  overflow: visible;
  container-type: size;
  user-select: none;
}
/* Only this layer clips color and texture. Artwork can cross the edge. */
.gpb-avatar__fundo {
  position: absolute;
  inset: -10%;
  background: var(--avatar-bg);
  mask: var(--avatar-recorte) center / 100% 100% no-repeat;
}
.gpb-avatar__fundo::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .18;
  mix-blend-mode: soft-light;
  background: var(--avatar-textura);
  background-size: var(--textura-size, 28% 28%);
}
.gpb-avatar[data-textura=raios] { --avatar-textura: repeating-conic-gradient(from 15deg, #fff 0deg 2deg, transparent 2deg 18deg, #000 18deg 20deg, transparent 20deg 36deg); --textura-size: 100% 100%; }
.gpb-avatar[data-textura=trama] { --avatar-textura: repeating-linear-gradient(40deg, transparent 0 8%, #fff 8% 10%, transparent 10% 18%, #000 18% 20%); --textura-size: 100% 100%; }
.gpb-avatar[data-textura=ondas] { --avatar-textura: repeating-radial-gradient(ellipse at 15% 80%, transparent 0 8%, #fff 8% 9%, transparent 9% 17%, #000 17% 18%); --textura-size: 100% 100%; }
.gpb-avatar[data-textura=orbitas] { --avatar-textura: radial-gradient(circle, transparent 35%, #fff 36% 39%, transparent 40%); }
.gpb-avatar[data-textura=mosaico] { --avatar-textura: conic-gradient(from 30deg, #fff2, #fff9 25%, #0003 25% 50%, transparent 50% 75%, #0007 75%); }
.gpb-avatar[data-textura=facetas] { --avatar-textura: repeating-conic-gradient(from 45deg, #fff5 0deg 90deg, #0004 90deg 180deg); --textura-size: 24% 24%; }
.gpb-avatar img {
  position: absolute;
  max-inline-size: none;
  object-fit: contain;
  pointer-events: none;
}
.gpb-avatar__moldura { z-index: 2; inset: -10%; inline-size: 120%; block-size: 120%; }
.gpb-avatar__animal {
  z-index: 1;
  inset: -4%;
  inline-size: 108%;
  block-size: 108%;
  transform: translate(var(--animal-x, 0%), var(--animal-y, 0%)) scale(var(--animal-escala, 1));
}
.gpb-avatar__frente { z-index: 3; clip-path: var(--animal-frente); }
.gpb-avatar--sem-moldura .gpb-avatar__fundo { inset: 5%; border-radius: 18%; mask: none; }
.gpb-avatar--sem-moldura::after {
  content: "";
  position: absolute;
  inset: 5%;
  border: max(1.5px, 2.5cqi) dashed rgb(255 255 255 / .65);
  border-radius: 18%;
}
.gpb-avatar__marcador {
  position: absolute;
  inset: 22%;
  display: grid;
  place-items: center;
  color: rgb(0 0 0 / .55);
  font: 700 28cqi/1 system-ui, sans-serif;
}
