/* Selo de visitas — "1.240 visitas" no canto do hero.
 *
 * Ideia do Nicolas: fica de frente para o selo do Instagram. O selo verificado
 * está à direita, este fica à esquerda, na mesma altura e no mesmo desenho de
 * pílula, para os dois lerem como um par.
 *
 * Nasce escondido e só aparece quando o número chega: contador em branco ou
 * zerado na página de um cliente é pior do que contador nenhum.
 */

.vis {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  display: none;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(10, 10, 10, .6);
  border: 1px solid var(--vis-borda, rgba(255, 255, 255, .14));
  color: var(--vis-tinta, #fff);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.vis.vis-on { display: inline-flex; }
.vis svg { width: 14px; height: 14px; flex: 0 0 auto; opacity: .9; }
.vis b { font-weight: 800; font-variant-numeric: tabular-nums; }

/* Página clara (Delish, Bloom, Monike): a pílula escura sumiria. */
.vis.vis-claro {
  background: rgba(255, 255, 255, .82);
  border-color: rgba(0, 0, 0, .1);
  color: var(--vis-tinta, #2f2320);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .1);
}

/* Hero sem position:relative não ancora a pílula; aí ela vira um selo de fluxo. */
.vis.vis-solto {
  position: static;
  display: none;
  margin: 12px auto 0;
}
.vis.vis-solto.vis-on { display: inline-flex; }

@media (max-width: 360px) {
  .vis { top: 12px; left: 12px; padding: 5px 9px; font-size: 11.5px; }
}