* { box-sizing: border-box; }
body { margin: 0; background: #e9edf4; color: #101e36; font: 1rem/1.45 system-ui, sans-serif; }
header { background: #101e36; color: #fff; }
.marca, nav { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .4rem; padding: .55rem .7rem; max-width: 62rem; margin: auto; }
.marca a { color: inherit; font-weight: 700; text-decoration: none; }
.marca .destaque { background: #ff9b31; color: #101e36; padding: .5rem .65rem; border-radius: .4rem; }
nav a, .paginas a { padding: .4rem .5rem; border-radius: .35rem; color: inherit; }
header nav { font-size: .875rem; }
.navegacao { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; gap: .55rem; }
.viradas { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.virar-pagina { display: inline-flex; align-items: center; min-height: 44px; width: max-content; padding: .45rem .65rem; border-radius: .4rem; background: #203c60; color: #fff; text-decoration: none; font-weight: 650; }
.virar-pagina:last-child { justify-self: end; }
.virar-pagina.inativo { background: #52647a; color: #f1f5fa; }
.salto, .pagina-atual { display: flex; justify-content: center; align-items: center; gap: .6rem; text-align: center; }
.salto form { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .35rem; }
.salto form[hidden] { display: none; }
.salto input, .salto button { min-height: 36px; border: 1px solid #778aa4; border-radius: .3rem; padding: .35rem .45rem; font: inherit; }
.salto input { width: 4rem; color: #101e36; background: #fff; }
.salto button { color: #101e36; background: #ff9b31; border-color: #ff9b31; font-weight: 700; }
main { max-width: 59rem; margin: auto; padding: .5rem .3rem 1rem; }
figure { position: relative; width: 100%; margin: .35rem 0; background: #fff; }
figure img { width: 100%; height: auto; display: block; }
figure a { position: absolute; display: block; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid #cf6c00; outline-offset: 2px; }
.busca, .transcricao { padding: .45rem .65rem; }
.busca form { display: flex; gap: .4rem; margin-top: .4rem; }
.busca input, .busca button { padding: .45rem; font: inherit; border-radius: .3rem; }
.busca input { flex: 1; min-width: 0; border: 1px solid #778aa4; }
.busca button { background: #203c60; color: white; border: 1px solid #203c60; }
.busca p:empty, .busca ul:empty { display: none; }
.busca li { margin: .35rem 0; }
.transcricao div { white-space: pre-line; padding: .45rem; }
.paginas { display: grid; grid-template-columns: repeat(auto-fit,minmax(3rem,1fr)); gap: .4rem; padding: 0; list-style: none; }
.paginas a { display: block; text-align: center; background: white; }
h1 { font-size: 1.35rem; margin-left: .55rem; }
