/* FUGA · régua única da marca nas páginas narrativas e de fecho. */
:root{
  --fuga-marca-w:clamp(96px,28vw,120px);
  /* Este JPG já contém cadeado e assinatura completa; não deve duplicar
     a escala visual que era apropriada para o SVG anterior. */
  --fuga-marca-w-fecho:var(--fuga-marca-w);
  --fuga-marca-top:clamp(.8rem,3.2svh,1.25rem);
}

/* Páginas 1, 2 e 3: a marca DOM prevalece sobre as imagens de cenário. */
#paginaNome .fuga-entrada-marca,
#paginaBoasVindas .fuga-cena-logo,
#paginaInstrucoes .fuga-cena-logo{
  display:block!important;
  position:absolute!important;
  z-index:20!important;
  top:var(--fuga-marca-top)!important;
  left:50%!important;
  width:var(--fuga-marca-w)!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  transform:translateX(-50%)!important;
}
#paginaBoasVindas .fuga-cena-logo,
#paginaInstrucoes .fuga-cena-logo{
  width:var(--fuga-marca-w)!important;
}
#paginaNome .fuga-entrada-marca #logoEntrada,
#paginaBoasVindas .fuga-cena-logo,
#paginaInstrucoes .fuga-cena-logo{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-height:none!important;
  object-fit:contain!important;
}
#paginaNome .fuga-entrada-marca h1{display:none!important;}

/* Páginas 5, 6 e 7: a mesma posição dentro da respetiva porta móvel. */
html body #paginaFinal.container.page-balance,
html body #paginaDiploma.container.page-balance,
html body #paginaDespedida.container.page-balance{
  padding-top:var(--fuga-marca-top)!important;
}
#paginaFinal .ranking-brand,
#paginaDiploma #diplomaCard .diploma-emblema,
#paginaDespedida .despedida-brand{
  display:block!important;
  width:var(--fuga-marca-w-fecho)!important;
  height:auto!important;
  margin:0 auto .55rem!important;
  padding:0!important;
}
#paginaFinal .ranking-brand img,
#paginaDiploma #diplomaCard .diploma-emblema img,
#paginaDespedida .despedida-brand img{
  display:block!important;
  width:100%!important;
  height:auto!important;
}

/* Regra terminal: nas páginas de narrativa a imagem não herda a largura
   integral do cabeçalho. */
#paginaBoasVindas .fuga-cena-logo,
#paginaInstrucoes .fuga-cena-logo{
  width:var(--fuga-marca-w)!important;
  height:auto!important;
  max-width:var(--fuga-marca-w)!important;
}