/* Badges principales (sprite /assets/img/badget.webp) */
/* Ajusta --dl-badge-tile si tu sprite tiene otro tamaño por icono */
:root{ --dl-badge-cols: 3; --dl-badge-rows: 2; }
.dl-badge{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;line-height:1}
.dl-badge .ico{
  display:inline-block; width:34px; height:34px; border-radius:50%;
  background-image:url('/assets/img/badget.webp');
  background-repeat:no-repeat;
  /* Sprite en rejilla 3x2 → 300% x 200% hace que cada celda ocupe el área del icono */
  background-size: calc(var(--dl-badge-cols) * 100%) calc(var(--dl-badge-rows) * 100%);
  background-position: center center; /* base: centrado por si falla la variante */
}
/* Variantes de tamaño opcionales */
.dl-badge.small .ico{ width:28px; height:28px; }
.dl-badge.large .ico{ width:44px; height:44px; }
/* Top row (Trenti, Ciervo, Oso) */
.badge-trenti .ico{ background-position: 0% 0%; }
.badge-ciervo .ico{ background-position: 50% 0%; }
.badge-oso .ico{ background-position: 100% 0%; }
/* Bottom row (Anjana, Quebrantahuesos, Lignum) */
.badge-anjana .ico{ background-position: 0% 100%; }
.badge-quebrantahuesos .ico{ background-position: 50% 100%; }
.badge-lignum .ico{ background-position: 100% 100%; }

/* Fallback (por si el sprite no carga): círculo neutro */
.dl-badge .ico:empty{ background-color:#e6e1d9; }

/* Responsivo: en pantallas muy estrechas, reduce sutilmente */
@media (max-width: 420px){
  .dl-badge{ gap:.4rem; }
  .dl-badge .ico{ width:30px; height:30px; }
}