/* Pagina ESG: fundo proprio.
   Carregada so pela pagina Nosso plano ESG, depois do dpx.css. Nenhuma
   outra pagina le este arquivo.

   A arte ocupa a mesma camada fixa da aurora das outras paginas, entao fica
   parada e inteira na tela enquanto o texto corre por cima. A cor por baixo
   da arte e a media dela, para a tela nao piscar enquanto a imagem carrega.
   No alto fica 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-esg .aurora{
  background:#060d3e url("../media/fundo-esg.jpg?v=d76bd75d41") 50% 0 / cover no-repeat;
}
body.fundo-esg .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-esg .aurora{ background-image:url("../media/fundo-esg-celular.jpg?v=7dcfffe6b5"); }
}

/* Cartoes sobre a arte: vidro escuro, para o texto ler inteiro, e um fio de
   pedra no alto. O numero de fundo dos pilares leva a mesma pedra. */
.fundo-esg .card-pilar,
.fundo-esg .compromisso{
  background:rgba(3,8,26,.66);
  border-color:rgba(255,255,255,.15);
}
.fundo-esg .capa .display, .fundo-esg .migalhas, .fundo-esg .lide, .fundo-esg .texto, .fundo-esg .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-esg .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; }
.card-pilar.gema .card-pilar__numero{
  background:linear-gradient(135deg, var(--gema-a), var(--gema-b));
  -webkit-background-clip:text; background-clip:text;
  color:transparent; opacity:.34;
}
.fundo-esg .rotulo::before{ background:linear-gradient(90deg, #19E6A5, #FFE45C); }
.fundo-esg .compromisso--dobra > summary:hover{ background:rgba(25,230,165,.08); }