/* Nereida · Cifra con puntos (Core 1.9.0, /posicionamiento-ia-geo/). Una cifra sobre un total, una frase y
   una rejilla con un punto por unidad; los de la cifra, en color. Con JavaScript (.is-js), los puntos se
   rellenan al verse; sin él, sin movimiento o en el editor, la rejilla sale ya rellena. */
.n-puntos {
	--npt-ink: var(--color-ink, #070035);
	--npt-soft: color-mix(in srgb, var(--npt-ink) 70%, transparent);
	--npt-muted: color-mix(in srgb, var(--npt-ink) 60%, transparent);
	--npt-card: #fff;
	--npt-on: var(--color-blue-text, #0093D9);
	--npt-off: var(--color-blue-soft, #C7ECFF);
	--npt-cols: 26;
	--npt-ease: var(--ease, cubic-bezier(.22, 1, .36, 1));
	box-sizing: border-box; width: 100%; margin: 0; padding: clamp(24px, 3vw, 44px); border-radius: clamp(28px, 3.4vw, 48px); background: var(--npt-card); color: var(--npt-ink);
}
.n-puntos p.n-puntos-n { margin: 0; display: flex; align-items: baseline; gap: 14px; line-height: 1; color: var(--npt-ink); }
.n-puntos-n b { font-size: clamp(64px, 7vw, 108px); font-weight: 450; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.n-puntos-n span { font-size: clamp(20px, 1.8vw, 26px); font-weight: 450; color: var(--npt-muted); }
.n-puntos p.n-puntos-k { margin: 10px 0 0; max-width: 34ch; font-size: var(--font-body, 17px); line-height: 1.45; color: var(--npt-soft); }
.n-puntos-grid { display: grid; grid-template-columns: repeat(var(--npt-cols), minmax(0, 1fr)); gap: clamp(4px, .45vw, 7px); margin-top: clamp(22px, 2.4vw, 32px); }
.n-puntos-grid i, .n-puntos-ley i { display: block; aspect-ratio: 1; border-radius: 50%; background: var(--npt-off); }
.n-puntos-grid i.on, .n-puntos-ley i.on { background: var(--npt-on); }
.n-puntos .n-puntos-pie { font-style: normal; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin-top: 18px; font-size: var(--font-kicker, 14px); line-height: 1.45; color: var(--npt-muted); }
.n-puntos-ley { display: inline-flex; align-items: center; gap: 7px; color: var(--npt-soft); }
.n-puntos-ley i { width: 9px; }
.n-puntos-nota { flex-basis: 100%; }
.n-puntos.is-js .n-puntos-grid i.on { background: var(--npt-off); transition: background .35s var(--npt-ease); transition-delay: calc(.2s + var(--i) * 16ms); }
.n-puntos.is-js.is-in .n-puntos-grid i.on { background: var(--npt-on); }
@media (prefers-reduced-motion: reduce) { .n-puntos-grid i { transition: none; } }
