/* 07 — Utilitários: peças pequenas usadas em vários lugares. */

/* Link "Pular para o conteúdo": invisível até receber foco do teclado (acessibilidade). */
.pular-conteudo { position: absolute; left: -999px; top: 0.5rem; padding: 0.5rem 1rem; background: #fff; z-index: 20; }
.pular-conteudo:focus { left: 0.5rem; }

/* Botões. */
.botao {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    min-height: 3rem; padding: 0.75rem 1.5rem; border-radius: var(--raio);
    background: var(--cor-azul); color: #fff; font-weight: 700; text-decoration: none;
    border: 1px solid transparent;
}
.botao:hover { background: #1D4ED8; color: #fff; }
.botao--compra { background: var(--cor-conversao); }
.botao--compra:hover { background: #15803D; }
.botao--contorno { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .28); }
.botao--contorno:hover { background: rgba(255, 255, 255, .08); border-color: #fff; }
.botao--pequeno { min-height: 2.5rem; padding: 0.5rem 1.1rem; font-size: 0.9375rem; }

/* Ícones em linha (SVG). */
.icone { width: 1.5rem; height: 1.5rem; flex-shrink: 0; }

:focus-visible { outline: 3px solid var(--cor-ciano); outline-offset: 2px; }

/* Texto só para leitores de tela e robôs (fica invisível na tela). */
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }