:root {
  color-scheme: light dark;
  --fundo: #f7fafc;
  --painel: #fff;
  --texto: #172033;
  --suave: #526074;
  --marca: #087f8c;
  --linha: #dbe4ee;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 17px/1.65 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.pagina { max-width: 1080px; margin: auto; padding: 24px; }
header { padding: 28px 0 16px; }
.marca, .hero p { color: var(--marca); font-weight: 700; text-decoration: none; }
.hero { padding: 56px 0 28px; }
.hero h1 { font-size: clamp(2rem, 7vw, 4rem); line-height: 1.05; margin: .2rem 0; }
.hero span { color: var(--suave); }
nav { display: flex; flex-wrap: wrap; gap: 8px; border-block: 1px solid var(--linha); padding: 12px 0; }
nav a { color: var(--texto); text-decoration: none; padding: 5px 8px; border-radius: 8px; }
nav a:hover { background: #dff5f5; }
main { max-width: 920px; padding: 28px 0; }
h1, h2 { line-height: 1.2; }
h2 { margin-top: 2.6rem; font-size: 1.6rem; scroll-margin-top: 16px; }
p, li { max-width: 72ch; }
a { color: #056b76; }

.print { margin: 28px 0; }
.print--mobile { width: min(100%, 480px); margin-inline: auto; }
.print-ampliar { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: transparent; color: #fff; cursor: zoom-in; box-shadow: 0 8px 28px rgb(15 23 42 / 14%); }
.print-ampliar img { display: block; width: 100%; height: auto; }
.print-acao { position: absolute; right: 10px; bottom: 10px; padding: 7px 10px; border-radius: 999px; background: rgb(15 23 42 / 82%); color: #fff; font-size: .82rem; font-weight: 700; opacity: .92; }
.print-ampliar:hover .print-acao, .print-ampliar:focus-visible .print-acao { background: #087f8c; opacity: 1; }
.print-ampliar:focus-visible { outline: 3px solid #087f8c; outline-offset: 4px; }

.visualizador-imagem { width: min(96vw, 1500px); max-width: none; height: min(94vh, 1100px); max-height: none; padding: 52px 16px 16px; border: 0; border-radius: 16px; background: #0f172a; overflow: auto; }
.visualizador-imagem::backdrop { background: rgb(2 6 23 / 82%); }
.visualizador-imagem img { display: block; max-width: 100%; height: auto; margin: auto; }
.visualizador-fechar { position: fixed; top: max(12px, env(safe-area-inset-top)); right: max(18px, env(safe-area-inset-right)); z-index: 1; width: 42px; height: 42px; border: 1px solid rgb(255 255 255 / 30%); border-radius: 50%; background: rgb(15 23 42 / 90%); color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer; }
footer { border-top: 1px solid var(--linha); padding: 24px 0; color: var(--suave); font-size: .9rem; }

@media (max-width: 560px) {
  body { font-size: 16px; }
  .pagina { padding: 16px; }
  .print { margin-inline: -6px; }
  .print-acao { right: 8px; bottom: 8px; }
}
@media (prefers-color-scheme: dark) {
  :root { --fundo: #101823; --painel: #182334; --texto: #edf3fb; --suave: #b0bfce; --linha: #334356; }
}
@media print {
  body { background: #fff; }
  .pagina { max-width: none; }
  nav, .print-acao { display: none; }
  .print--mobile { max-width: 390px; }
  .print-ampliar { box-shadow: none; }
}