@layer utilitarios {
  .visually-hidden,
  .visualmente-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: calc(-1 * var(--espaco-px-1));
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .pular-conteudo {
    position: absolute;
    display: inline-flex;
    align-items: center;
    min-height: var(--alvo);
    left: var(--pad);
    top: calc(-1 * var(--espaco-esconder));
    z-index: var(--camada-pular-conteudo);
    padding: var(--espaco-em-0-6) var(--espaco-em-1);
    background: var(--cor-selecionado);
    border: var(--borda);
    border-radius: var(--raio-sm);
    box-shadow: var(--sombra);
    text-decoration: none;
    color: var(--cor-texto);
    font-family: var(--titulo);
  }

  .pular-conteudo:focus {
    top: var(--pad);
  }

  /* Regiões de aviso (role=status) ficam sempre no DOM; vazias, só saem da tela (continuam
     na árvore de acessibilidade, então o texto novo é anunciado). */
  #aviso:empty,
  .aviso:empty,
  #prateleira-aviso:empty,
  #decalque-aviso:empty,
  .decalque__aviso:empty {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    padding: 0;
    margin: calc(-1 * var(--espaco-px-1));
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    box-shadow: none;
  }

  /* Alto contraste (A21/V9): o foco usa CanvasText com afastamento maior e vem nesta camada,
     depois do selecionado (Highlight na borda e no contorno, camada componentes): um botão
     focado e selecionado mostra os dois. Nada de forced-color-adjust: none no foco. */
  @media (forced-colors: active) {
    :focus-visible,
    [aria-pressed="true"]:focus-visible,
    [aria-selected="true"]:focus-visible,
    [aria-checked="true"]:focus-visible {
      outline: var(--foco-largura) solid CanvasText;
      outline-offset: calc(2 * var(--foco-afastamento));
    }
  }
}