/* ==========================================================================
   Componente: enlace de menú (Framer "Menu Item")
   Primary: P14 gris. Secondary (--large): H5 32 claro. Hover: texto claro
   y subrayado amarillo de 2px que crece de izquierda a derecha.
   ========================================================================== */

@layer components {
  .nav-link {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    padding-bottom: 2px;
    color: var(--color-text-muted);
    font-size: 14px;
    line-height: 20px;
    transition: color var(--duration) var(--ease-out);

    &::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 2px;
      background-color: var(--color-accent);
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform var(--duration) var(--ease-out);
    }

    &:hover,
    &:focus-visible,
    &[aria-current="page"] {
      color: var(--color-text-soft);

      &::after {
        transform: scaleX(1);
      }
    }
  }

  .nav-link--large {
    color: var(--color-text-soft);
    font-size: 32px;
    font-weight: 500;
    line-height: 36px;
    letter-spacing: -0.32px;
  }
}