/* ===============================

   AREA GERAL

================================= */

.leaderboard {

  width: 100%;

  padding: 80px 0;

  background: transparent;

  color: #d8b36a;

  font-family: 'Cinzel', serif;

}



.container {

  max-width: 1400px;

  margin: auto;

  padding: 0 24px;

}



/* ===============================

   GRID DOS CARDS (PRIMEIRO)

================================= */

.boxes-right {

  display: grid;

  grid-template-columns: repeat(3, 360px);

  gap: 36px;

  justify-content: center;

  margin-bottom: 70px; /* espaço para texto abaixo */

}



/* ===============================

   CARD

================================= */

.boxes-right > div {

  position: relative;

  height: 320px; /* MAIS COMPRIDO */

  padding: 22px;

  border-radius: 18px;



  background: linear-gradient(

    180deg,

    rgba(14, 9, 6, 0.95),

    rgba(5, 3, 2, 0.95)

  );



  border: 1px solid rgba(201,154,85,0.35);



  display: flex;

  flex-direction: column;



  box-shadow:

    inset 0 0 28px rgba(0,0,0,0.8),

    0 18px 40px rgba(0,0,0,0.9);



  transition: .35s ease;

}



.boxes-right > div:hover {

  transform: translateY(-6px);

  box-shadow:

    inset 0 0 36px rgba(0,0,0,0.9),

    0 22px 50px rgba(0,0,0,0.95),

    0 0 20px rgba(201,154,85,0.25);

}



/* ===============================

   TITULO TOPO ESQUERDO

================================= */

.custom-title h4 {

  font-size: 15px;

  font-weight: 600;

  color: #d8b36a;

  margin-bottom: 12px;

}



/* ===============================

   ICONE TOPO DIREITO

================================= */

.top-box-img {

  position: absolute;

  top: 16px;

  right: 16px;

  width: 44px;

  height: 44px;

  padding: 8px;

  border-radius: 50%;

  background: rgba(8,5,3,0.95);

  border: 1px solid rgba(201,154,85,0.6);

}



/* ===============================

   AREA DO RANKING

================================= */

.table {

  flex: 1;

  border-radius: 12px;

  background: rgba(0,0,0,0.45);

  overflow: hidden;

}



/* ===============================

   REMOVE QUALQUER LINHA BRANCA

================================= */

hr,

hr.general {

  display: none !important;

}



/* ===============================

   BOTÃO NO RODAPÉ

================================= */

.boxes-right .show-all {

  margin-top: auto;

  text-align: center;

}



/* ===============================

   TEXTO ABAIXO DOS CARDS

================================= */

.general-info2 {

  margin-top: 40px;

}



.general-info2 p {

  font-size: 42px;

  font-weight: 600;

  color: #d8b36a;

}



.general-info2 p2 {

  display: block;

  max-width: 600px;

  margin-top: 16px;

  font-size: 15px;

  line-height: 1.7;

  color: #c1a36a;

}



/* ===============================

   BOTÃO RANKING

================================= */

.show-all a {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 9px 24px;

  border-radius: 24px;

  font-size: 13px;

  text-decoration: none;

  color: #d8b36a;



  background: rgba(0,0,0,0.6);

  border: 1px solid rgba(201,154,85,0.45);

  transition: .3s ease;

}



.show-all a:hover {

  background: rgba(201,154,85,0.18);

  box-shadow: 0 0 18px rgba(201,154,85,0.35);

}



/* ===============================

   RESPONSIVO

================================= */

@media (max-width: 1200px) {

  .boxes-right {

    grid-template-columns: repeat(2, 1fr);

  }

}



@media (max-width: 768px) {

  .boxes-right {

    grid-template-columns: 1fr;

  }



  .general-info2 p {

    font-size: 32px;

  }

}

/* =====================================

   TEXTO NO VÃO ENTRE OS DOIS CARDS DE CIMA

   (layout correto, sem mexer em card)

===================================== */



/* SOMENTE o PRIMEIRO bloco de cards */

.leaderboard-boxes:first-of-type {

  display: grid !important;

  grid-template-columns: 420px 1fr 1fr; /* texto | card | card */

  gap: 40px;

  align-items: start;

}



/* texto ocupa a PRIMEIRA coluna */

.leaderboard-boxes:first-of-type .boxes-left {

  grid-column: 1;

}



/* cards ocupam coluna 2 e 3 */

.leaderboard-boxes:first-of-type .boxes-right {

  grid-column: 2 / 4;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 32px;

}



/* mobile: volta ao normal */

@media (max-width: 992px) {

  .leaderboard-boxes:first-of-type {

    grid-template-columns: 1fr;

  }



  .leaderboard-boxes:first-of-type .boxes-right {

    grid-template-columns: 1fr;

  }

}

/* =====================================

   FORÇAR TODOS OS CARDS A MESMA ALTURA

   (SEM ALTERAR TAMANHO OU VISUAL)

===================================== */



.boxes-right {

  align-items: stretch;

}



.boxes-right > div {

  height: 100%;

}

/* ===============================

   ANIMAÇÃO AO ROLAR (SCROLL)

================================ */



/* Estado inicial (escondido) */

.reveal {

  opacity: 0;

  transform: translateY(40px);

  transition: all 0.8s ease;

}



/* Quando aparece */

.reveal.active {

  opacity: 1;

  transform: translateY(0);

}



/* Delay para cards (efeito em cascata) */

.boxes-right > div {

  transition-delay: 0.15s;

}