/* Partes comuns aos conceitos de site (marcas fictícias): pular conteúdo, notas de amostra, identificação.
   Cada exemplo desenha o próprio rodapé; a frase de identificação (.conceito) é a mesma nos três. */
.pular { position: absolute; left: 8px; top: -100px; z-index: 60; background: #fff; color: #111;
  padding: 12px 16px; border: 2px solid #111; border-radius: 6px; font: 600 15px system-ui, sans-serif; }
.pular:focus { top: 8px; }

/* Nota que aparece ao clicar num controle de amostra: diz o que o botão faria num site contratado. */
.demo-nota { margin: 12px 0 0; font-size: .9rem; line-height: 1.45; max-width: 40ch; }
.demo-nota[hidden] { display: none; }
.demo-nota::before { content: "Amostra · "; font-weight: 700; }

.conceito { font-size: .9rem; line-height: 1.5; }
.conceito strong { font-weight: 700; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}