.hdots{display:inline-flex;flex-wrap:wrap;gap:.35rem;align-items:center}.hdot{position:relative;display:inline-flex;align-items:center;gap:.35rem;text-decoration:none;color:inherit;font-size:.82rem;font-weight:700}.hdot i{width:14px;height:14px;border-radius:50%;background:var(--hc);box-shadow:inset 0 0 0 1px #0000002e;flex:none}.hdots--claro .hdot i{box-shadow:0 0 0 2px #ffffffd9}.hdots--nombres{gap:.4rem .9rem}.hdots:not(.hdots--nombres) .hdot:hover:after,.hdots:not(.hdots--nombres) .hdot:focus-visible:after{content:attr(data-nombre);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%);white-space:nowrap;background:var(--carbon);color:#fff;font-size:.72rem;font-weight:700;padding:.2rem .5rem;border-radius:4px;z-index:5;pointer-events:none}a.hdot:focus-visible{outline:2px solid var(--hc);outline-offset:2px;border-radius:99px}
