/* Base del link (ya tienes algo parecido) */
.nav-link{
  position: relative;
  color: var(--lr-gray);
  text-decoration: none;
  font-weight: 500;
  padding: 8px 10px;
  border-radius: 12px;
  transition: background .2s, color .2s;
}

/* Indicador activo en desktop: línea sutil que aparece desde el centro */
@media (min-width: 921px){
  .nav-link.is-active,
  .nav-link[aria-current="page"]{
    color: var(--lr-black);
  }
  .nav-link.is-active::after,
  .nav-link[aria-current="page"]::after{
    content:"";
    position:absolute;
    left: 12%;
    right:12%;
    bottom: -6px;            /* justo debajo del texto, pero dentro del header */
    height: 2px;
    background: rgba(17,17,17,.55);
    border-radius: 999px;
    transform: scaleX(1);
    transform-origin: center;
    transition: transform .18s ease;
  }
  /* micro-interacción al hover */
  .nav-link:hover::after{
    transform: scaleX(1.08);
  }
}

/* Móvil: “pill” activo para legibilidad */
@media (max-width: 920px){
  .lr-nav-menu .nav-link.is-active,
  .lr-nav-menu .nav-link[aria-current="page"]{
    background: rgba(17,17,17,.06);
    color: var(--lr-black);
    font-weight: 600;
  }
}

/* Foco visible (accesibilidad) */
.nav-link:focus-visible{
  outline: 2px solid rgba(17,17,17,.35);
  outline-offset: 2px;
  border-radius: 12px;
}

/* === Z-INDEX: stack consistente === */

/* Header fijo, por encima de adminbar y del contenido */
.lr-headerbar{ z-index: 300000 !important; }

/* Scrim del menú: por encima del header, debajo del panel */
.lr-menu-scrim{ z-index: 300100 !important; }

/* Panel del menú móvil: siempre arriba del scrim y del header */
@media (max-width:920px){
  .lr-nav-menu{ z-index: 300200 !important; }
}

/* Modal de contacto (si lo tienes): por encima de todo lo anterior */
.lr-contact{ z-index: 300300 !important; }