:root {
        --clr-gray-900: hsl(217, 19%, 35%);
        --clr-gray-500: hsl(214, 17%, 51%);
        --clr-gray-400: hsl(212, 23%, 69%);
        --clr-gray-200: hsl(210, 46%, 95%);
        /* Estilo de foco visible con teclado (WCAG 2.4.7) */
        --focus-ring: hsl(217, 19%, 35%);
        --focus-ring-on-dark: hsl(210, 46%, 95%);
        --focus-ring-width: 2px;
        --focus-ring-offset: 2px;
      }

      body {
        font-family: 'Manrope', sans-serif;
        background: var(--clr-gray-200);
      }

      .title {
        color: var(--clr-gray-900);
        font-size: 1.25rem;
        font-weight: 700;
        line-height: 1.3;
        letter-spacing: 0.25px;
      }

      .description {
        font-size: 0.8125rem;
        font-weight: 500;
        line-height: 1.4;
        letter-spacing: 0.12%;
        color: var(--clr-gray-500);
      }

      .name {
        color: var(--clr-gray-900);
        font-size: 0.8125rem;
        font-weight: 700;
        line-height: 1.4;
        letter-spacing: 0.12%;
      }

      .date {
        color: var(--clr-gray-400);
        font-size: 0.8125rem;
        font-weight: 700;
        line-height: 1.4;
        letter-spacing: 0.12%;
      }

      @media screen and (min-width: 1012px) {
      }

      .btn-2 {
        background: var(--clr-gray-500);
      }

      #links {
        background: var(--clr-gray-900);
      }

      .triangulo {
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 15px solid var(--clr-gray-900);
      }

      .txt-share {
        font-size: 0.8125rem;
        font-weight: 500;
        line-height: 1.4;
        letter-spacing: 25%;
      }

      .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }

      /* Foco de teclado: no esconder el anillo; solo con :focus-visible (no con clic de ratón) */
      #main button:focus:not(:focus-visible) {
        outline: none;
      }

      #main a:focus:not(:focus-visible) {
        outline: none;
      }

      #main .btn:focus-visible,
      #main .btn-2:focus-visible,
      #main .btn-shared:focus-visible {
        outline: var(--focus-ring-width) solid var(--focus-ring);
        outline-offset: var(--focus-ring-offset);
      }

      #links button:focus-visible,
      #links a[href]:focus-visible {
        outline: var(--focus-ring-width) solid var(--focus-ring-on-dark);
        outline-offset: var(--focus-ring-offset);
        border-radius: 2px;
      }

      #links .btn-2.btn-shared:focus-visible {
        outline-color: var(--focus-ring);
        border-radius: 9999px;
      }