/* Contadores independientes: heredan tipografía/reset globales y usan medidas relativas. */
.navbar__container { gap: clamp(.7rem, 1.3vw, 1.2rem); }
.navbar__nav { gap: clamp(.7rem, 1.2vw, 1.4rem); }
.navbar-counters { display: flex; align-items: center; gap: .65rem; flex-shrink: 0; }
.navbar-counter { display: flex; align-items: center; gap: .5rem; padding: .4rem .6rem; border: .0625rem solid #d3e6ff; border-radius: 1.5rem; background: linear-gradient(125deg, #f7fbff, #eef7ff); color: #10366b; box-shadow: 0 .2rem .65rem #1688e808; }
.navbar-counter__icon { width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #dfefff; color: #16458e; }
.navbar-counter__icon svg { width: 1.3rem; height: 1.3rem; }
.navbar-counter__text { display: flex; flex-direction: column; line-height: 1.15; }
.navbar-counter strong { font-size: .95rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.navbar-counter small { margin-top: .1rem; font-size: .6rem; white-space: nowrap; color: #52688a; }
.navbar-counter--likes { border-color: #ffd2de; background: linear-gradient(125deg, #fffafb, #fff0f4); }
.navbar-counter--likes .navbar-counter__icon { color: #f53b6b; background: #ffe3eb; }
.navbar-counters__separator { width: .0625rem; height: 2rem; background: #d9e2ed; }
/* Cuando no cabe una sola fila, las cifras bajan de forma natural sin apretar el menú. */
@media (max-width: 85rem) {
  .navbar__container { flex-wrap: wrap; padding-block: .5rem; }
  .navbar-counters { flex-basis: 100%; justify-content: flex-end; order: 3; }
}
@media (max-width: 48rem) {
  .navbar__toggle { order: 2; }
  .navbar-counters { justify-content: center; }
}

/* Botón real accesible por ratón, Enter y espacio; el like confirmado no se duplica. */
button.navbar-counter--likes { cursor: pointer; text-align: left; transition: background .2s ease, box-shadow .2s ease; }
button.navbar-counter--likes:hover { background: #ffe4ec; }
button.navbar-counter--likes[aria-pressed="true"] { background: #ffe0ea; border-color: #f587a5; }
button.navbar-counter--likes:focus-visible { outline: .1875rem solid #1765df; outline-offset: .15rem; }
.navbar-counters__status { position: absolute; width: .0625rem; height: .0625rem; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { button.navbar-counter--likes { transition: none; } }

/* El estado accesible del botón también controla el relleno del corazón. */
.navbar-counter--likes .navbar-counter__icon path { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.navbar-counter--likes[aria-pressed="true"] .navbar-counter__icon path { fill: url(#navbar-heart-gradient); }