/*
 * Enlace para saltar al contenido: es lo primero que encuentra quien navega con teclado.
 * Queda fuera de la vista hasta que recibe el foco.
 */
@layer components {
  .skip-link {
    position: absolute;
    inset-block-start: var(--space-2xs);
    inset-inline-start: var(--space-2xs);
    z-index: 20;
    padding: var(--space-xs) var(--space-s);
    border-radius: var(--radius-control);
    background-color: var(--color-ink);
    color: var(--color-desk);
    font-weight: 600;
    text-decoration-line: none;
    /* transform (y no translate): de esto depende que el enlace esté oculto. */
    transform: translateY(-200%);
  }

  .skip-link:focus {
    transform: none;
  }
}