/* Pagina Compliance: fundo proprio.
   Carregada so pela pagina Compliance, depois do dpx.css. Nenhuma outra
   pagina le este arquivo. Mesmo desenho do fundo da ESG (ver esg.css): a
   arte ocupa a camada fixa da aurora, parada e inteira na tela, com um veu
   escuro curto so na faixa da logo e do menu. No celular, e no tablet em pe,
   entra a versao em pe da mesma arte. A marca no endereco de cada arte vem
   do conteudo do arquivo: se a arte mudar, o navegador baixa a nova. */
body.fundo-compliance .aurora{
  background:#060d3e url("../media/fundo-compliance.jpg?v=072f3eb6ad") 50% 0 / cover no-repeat;
}
body.fundo-compliance .aurora::after{
  filter:none;
  background:linear-gradient(180deg,
    rgba(1, 3, 14, .90)   0px,
    rgba(1, 3, 14, .78)  56px,
    rgba(1, 4, 20, .50) 112px,
    rgba(1, 5, 26, .22) 172px,
    rgba(1, 5, 26, 0)   244px);
}
@media (max-width:760px), (orientation:portrait) and (max-width:1100px){
  body.fundo-compliance .aurora{ background-image:url("../media/fundo-compliance-celular.jpg?v=d4b70390bd"); }
}

/* Caixas sobre a arte: fio de pedra no alto de cada compromisso. */
.fundo-compliance .caixa{
  background:rgba(3,8,26,.66);
  border-color:rgba(255,255,255,.15);
}
.fundo-compliance .caixa h4{ color:#EDE9FF; }
.fundo-compliance .capa .display, .fundo-compliance .migalhas, .fundo-compliance .lide, .fundo-compliance .texto, .fundo-compliance .rotulo{
  /* halo escuro em camadas: o texto le inteiro mesmo onde a arte clareia,
     sem caixa nem faixa por tras */
  text-shadow:0 1px 2px rgba(1,5,30,.70), 0 0 7px rgba(1,5,30,.55), 0 0 16px rgba(1,5,30,.60), 0 2px 32px rgba(1,5,30,.55);
}
.gema{ position:relative; overflow:hidden; }
.fundo-compliance .gema{
  background:
    linear-gradient(180deg, rgba(var(--gema-luz), .16) 0%, rgba(var(--gema-luz), 0) 46%),
    rgba(3,8,26,.68);
}
.gema::after{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg, var(--gema-a), var(--gema-b)); pointer-events:none;
  box-shadow:0 0 18px rgba(var(--gema-luz), .55);
}
.gema--citrino  { --gema-a:#FFE45C; --gema-b:#FF8A3D; --gema-luz:255,190,70; }
.gema--esmeralda{ --gema-a:#19E6A5; --gema-b:#0BC5EA; --gema-luz:25,230,165; }
.gema--rubi     { --gema-a:#FF5A5F; --gema-b:#E0218A; --gema-luz:240,60,110; }
.gema--ametista { --gema-a:#8B5CF6; --gema-b:#D14BD8; --gema-luz:150,80,245; }
.gema--agua     { --gema-a:#22E1E6; --gema-b:#3B82F6; --gema-luz:34,200,230; }
.gema--safira   { --gema-a:#6E8BFF; --gema-b:#22C7E6; --gema-luz:90,140,255; }
.fundo-compliance .rotulo::before{ background:linear-gradient(90deg, #8B5CF6, #E2228C); }