/* 2P Energia Solar — Hero de campanha "BLACK 2P" (home, novembro/2026)
   O banner é a arte oficial da campanha (desktop 1920x640, celular 780x1276).
   Os dois botões desenhados na arte recebem links reais por cima, posicionados
   em % da arte, então continuam alinhados em qualquer largura.
   O header fixo (76px) fica por cima de um fundo preto, igual ao da arte.
   Prefixo bk-. Artes em /assets/images/black-2p/.
   Para encerrar a campanha: restaurar o hero institucional (git), remover este
   CSS, o link no index.html e os banners de /assets/images/black-2p/. */

.bk-hero {
  position: relative;
  background: #050505;
  padding-top: 76px;
  overflow: hidden;
}

.bk-hero__art {
  position: relative;
  max-width: 1920px;
  margin: 0 auto;
}
.bk-hero__art picture,
.bk-hero__art img {
  display: block;
  width: 100%;
  height: auto;
}

/* Áreas clicáveis por cima dos botões da arte */
.bk-hero__hit {
  position: absolute;
  display: block;
  border-radius: 12px;
  color: transparent;
  font-size: 0;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow 0.2s ease, background-color 0.2s ease;
}
.bk-hero__hit:hover { background-color: rgba(255, 255, 255, 0.06); }
.bk-hero__hit:focus-visible {
  outline: 3px solid #FFFFFF;
  outline-offset: 3px;
}

/* Desktop — arte 1920x640 */
.bk-hero__hit--premios { left: 14.5%; top: 61.2%; width: 16.8%; height: 9.4%; }
.bk-hero__hit--consultor { left: 14.5%; top: 72.6%; width: 12.8%; height: 9.5%; }

/* Celular — arte 780x1276 */
@media (max-width: 767px) {
  .bk-hero__hit--premios { left: 9.2%; top: 70%; width: 81.6%; height: 7.3%; }
  .bk-hero__hit--consultor { left: 25%; top: 79.3%; width: 49.5%; height: 4%; }
}

/* Título da página para leitores de tela (o texto visível está na arte) */
.bk-hero .sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}