/* Yelp-like boxed stars (estable, con gap real) */
.dirprog-stars-boxed{
  --size: 18px;      /* tamaño del cuadro */
  --gap: 3px;        /* separación entre cuadros */
  --percent: 0%;
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  vertical-align:middle;
}

.dirprog-stars-boxed .stars{
  position:relative;
  display:grid;
  grid-template-columns:repeat(5, var(--size));
  gap: var(--gap);
  width: calc(var(--size) * 5 + var(--gap) * 4);
  height: var(--size);
  line-height:0; /* evita desajustes verticales */
}

/* cada “cuadro” base gris con estrella blanca */
.dirprog-stars-boxed .stars::before{
  content:"";
  position:absolute;
  inset:0;
  background-repeat:no-repeat;
  background-size: var(--size) var(--size);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Crect width='18' height='18' rx='3' fill='%23d9d9d9'/%3E%3Cpath d='M9 2.2l1.9 3.9 4.3.6-3.1 3 0.7 4.3L9 12.9 5.2 14l0.7-4.3-3.1-3 4.3-.6L9 2.2z' fill='white'/%3E%3C/svg%3E");
  /* colocamos 5 veces con gap real */
  background-position:
    0 0,
    calc((var(--size) + var(--gap)) * 1) 0,
    calc((var(--size) + var(--gap)) * 2) 0,
    calc((var(--size) + var(--gap)) * 3) 0,
    calc((var(--size) + var(--gap)) * 4) 0;
  /* hack: 5 capas */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Crect width='18' height='18' rx='3' fill='%23d9d9d9'/%3E%3Cpath d='M9 2.2l1.9 3.9 4.3.6-3.1 3 0.7 4.3L9 12.9 5.2 14l0.7-4.3-3.1-3 4.3-.6L9 2.2z' fill='white'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Crect width='18' height='18' rx='3' fill='%23d9d9d9'/%3E%3Cpath d='M9 2.2l1.9 3.9 4.3.6-3.1 3 0.7 4.3L9 12.9 5.2 14l0.7-4.3-3.1-3 4.3-.6L9 2.2z' fill='white'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Crect width='18' height='18' rx='3' fill='%23d9d9d9'/%3E%3Cpath d='M9 2.2l1.9 3.9 4.3.6-3.1 3 0.7 4.3L9 12.9 5.2 14l0.7-4.3-3.1-3 4.3-.6L9 2.2z' fill='white'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Crect width='18' height='18' rx='3' fill='%23d9d9d9'/%3E%3Cpath d='M9 2.2l1.9 3.9 4.3.6-3.1 3 0.7 4.3L9 12.9 5.2 14l0.7-4.3-3.1-3 4.3-.6L9 2.2z' fill='white'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Crect width='18' height='18' rx='3' fill='%23d9d9d9'/%3E%3Cpath d='M9 2.2l1.9 3.9 4.3.6-3.1 3 0.7 4.3L9 12.9 5.2 14l0.7-4.3-3.1-3 4.3-.6L9 2.2z' fill='white'/%3E%3C/svg%3E");
}

/* capa de color recortada por porcentaje */
.dirprog-stars-boxed .stars::after{
  content:"";
  position:absolute;
  inset:0;
  width: var(--percent);
  overflow:hidden;
  background-repeat:no-repeat;
  background-size: var(--size) var(--size);
  background-position:
    0 0,
    calc((var(--size) + var(--gap)) * 1) 0,
    calc((var(--size) + var(--gap)) * 2) 0,
    calc((var(--size) + var(--gap)) * 3) 0,
    calc((var(--size) + var(--gap)) * 4) 0;
}

/* colores (relleno) */
.dirprog-fill-red    .stars::after{ background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Crect width='18' height='18' rx='3' fill='%23c62828'/%3E%3Cpath d='M9 2.2l1.9 3.9 4.3.6-3.1 3 0.7 4.3L9 12.9 5.2 14l0.7-4.3-3.1-3 4.3-.6L9 2.2z' fill='white'/%3E%3C/svg%3E"),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Crect width='18' height='18' rx='3' fill='%23c62828'/%3E%3Cpath d='M9 2.2l1.9 3.9 4.3.6-3.1 3 0.7 4.3L9 12.9 5.2 14l0.7-4.3-3.1-3 4.3-.6L9 2.2z' fill='white'/%3E%3C/svg%3E"),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Crect width='18' height='18' rx='3' fill='%23c62828'/%3E%3Cpath d='M9 2.2l1.9 3.9 4.3.6-3.1 3 0.7 4.3L9 12.9 5.2 14l0.7-4.3-3.1-3 4.3-.6L9 2.2z' fill='white'/%3E%3C/svg%3E"),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Crect width='18' height='18' rx='3' fill='%23c62828'/%3E%3Cpath d='M9 2.2l1.9 3.9 4.3.6-3.1 3 0.7 4.3L9 12.9 5.2 14l0.7-4.3-3.1-3 4.3-.6L9 2.2z' fill='white'/%3E%3C/svg%3E"),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Crect width='18' height='18' rx='3' fill='%23c62828'/%3E%3Cpath d='M9 2.2l1.9 3.9 4.3.6-3.1 3 0.7 4.3L9 12.9 5.2 14l0.7-4.3-3.1-3 4.3-.6L9 2.2z' fill='white'/%3E%3C/svg%3E"); }

.dirprog-fill-orange .stars::after{ background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Crect width='18' height='18' rx='3' fill='%23ef6c00'/%3E%3Cpath d='M9 2.2l1.9 3.9 4.3.6-3.1 3 0.7 4.3L9 12.9 5.2 14l0.7-4.3-3.1-3 4.3-.6L9 2.2z' fill='white'/%3E%3C/svg%3E"),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Crect width='18' height='18' rx='3' fill='%23ef6c00'/%3E%3Cpath d='M9 2.2l1.9 3.9 4.3.6-3.1 3 0.7 4.3L9 12.9 5.2 14l0.7-4.3-3.1-3 4.3-.6L9 2.2z' fill='white'/%3E%3C/svg%3E"),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Crect width='18' height='18' rx='3' fill='%23ef6c00'/%3E%3Cpath d='M9 2.2l1.9 3.9 4.3.6-3.1 3 0.7 4.3L9 12.9 5.2 14l0.7-4.3-3.1-3 4.3-.6L9 2.2z' fill='white'/%3E%3C/svg%3E"),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Crect width='18' height='18' rx='3' fill='%23ef6c00'/%3E%3Cpath d='M9 2.2l1.9 3.9 4.3.6-3.1 3 0.7 4.3L9 12.9 5.2 14l0.7-4.3-3.1-3 4.3-.6L9 2.2z' fill='white'/%3E%3C/svg%3E"),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Crect width='18' height='18' rx='3' fill='%23ef6c00'/%3E%3Cpath d='M9 2.2l1.9 3.9 4.3.6-3.1 3 0.7 4.3L9 12.9 5.2 14l0.7-4.3-3.1-3 4.3-.6L9 2.2z' fill='white'/%3E%3C/svg%3E"); }

.dirprog-fill-yellow .stars::after{ background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Crect width='18' height='18' rx='3' fill='%23f9a825'/%3E%3Cpath d='M9 2.2l1.9 3.9 4.3.6-3.1 3 0.7 4.3L9 12.9 5.2 14l0.7-4.3-3.1-3 4.3-.6L9 2.2z' fill='white'/%3E%3C/svg%3E"),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Crect width='18' height='18' rx='3' fill='%23f9a825'/%3E%3Cpath d='M9 2.2l1.9 3.9 4.3.6-3.1 3 0.7 4.3L9 12.9 5.2 14l0.7-4.3-3.1-3 4.3-.6L9 2.2z' fill='white'/%3E%3C/svg%3E"),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Crect width='18' height='18' rx='3' fill='%23f9a825'/%3E%3Cpath d='M9 2.2l1.9 3.9 4.3.6-3.1 3 0.7 4.3L9 12.9 5.2 14l0.7-4.3-3.1-3 4.3-.6L9 2.2z' fill='white'/%3E%3C/svg%3E"),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Crect width='18' height='18' rx='3' fill='%23f9a825'/%3E%3Cpath d='M9 2.2l1.9 3.9 4.3.6-3.1 3 0.7 4.3L9 12.9 5.2 14l0.7-4.3-3.1-3 4.3-.6L9 2.2z' fill='white'/%3E%3C/svg%3E"),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Crect width='18' height='18' rx='3' fill='%23f9a825'/%3E%3Cpath d='M9 2.2l1.9 3.9 4.3.6-3.1 3 0.7 4.3L9 12.9 5.2 14l0.7-4.3-3.1-3 4.3-.6L9 2.2z' fill='white'/%3E%3C/svg%3E"); }

.dirprog-fill-green  .stars::after{ background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Crect width='18' height='18' rx='3' fill='%232e7d32'/%3E%3Cpath d='M9 2.2l1.9 3.9 4.3.6-3.1 3 0.7 4.3L9 12.9 5.2 14l0.7-4.3-3.1-3 4.3-.6L9 2.2z' fill='white'/%3E%3C/svg%3E"),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Crect width='18' height='18' rx='3' fill='%232e7d32'/%3E%3Cpath d='M9 2.2l1.9 3.9 4.3.6-3.1 3 0.7 4.3L9 12.9 5.2 14l0.7-4.3-3.1-3 4.3-.6L9 2.2z' fill='white'/%3E%3C/svg%3E"),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Crect width='18' height='18' rx='3' fill='%232e7d32'/%3E%3Cpath d='M9 2.2l1.9 3.9 4.3.6-3.1 3 0.7 4.3L9 12.9 5.2 14l0.7-4.3-3.1-3 4.3-.6L9 2.2z' fill='white'/%3E%3C/svg%3E"),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Crect width='18' height='18' rx='3' fill='%232e7d32'/%3E%3Cpath d='M9 2.2l1.9 3.9 4.3.6-3.1 3 0.7 4.3L9 12.9 5.2 14l0.7-4.3-3.1-3 4.3-.6L9 2.2z' fill='white'/%3E%3C/svg%3E"),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Crect width='18' height='18' rx='3' fill='%232e7d32'/%3E%3Cpath d='M9 2.2l1.9 3.9 4.3.6-3.1 3 0.7 4.3L9 12.9 5.2 14l0.7-4.3-3.1-3 4.3-.6L9 2.2z' fill='white'/%3E%3C/svg%3E"); }

.dirprog-stars-boxed .meta{
  font-size:14px;
  opacity:.9;
}

.dirprog-business-page .grid3 .card{
  display:flex;
  flex-direction:column;
}
.dirprog-business-page .grid3 .card .btn.full{
  margin-top:auto;
}

/* Alinear CTA al fondo en cards del grid "Others" */
.dirprog-business-page .grid3 > .card{
  display:flex;
  flex-direction:column;
}

.dirprog-business-page .grid3 > .card > .btn.full{
  margin-top:auto;
}

.dirprog-business-page .grid3{
  align-items:stretch;
}