/* ==========================================================
   INTRO PAGE — página de entrada (intro.html)
   Sobrescreve frentes.css: fundo introbg.jpg, conteúdo
   centralizado (vertical + horizontal), cards lado a lado.
   ========================================================== */

html, body.intro-page { height: 100%; }
body.intro-page { margin: 0; }

.frentes--intro {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
  background-color: #0a0034;
  background-image: none;
}

/* Texto acima dos cards, tudo centralizado ------------------ */
.frentes--intro .frentes__grid {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 50px;
}
.frentes--intro .frentes__texto {
  max-width: 760px;
  text-align: center;
}
.frentes--intro .frentes__titulo { color: #fff; }
.frentes--intro .frentes__p { margin-bottom: 0; }

/* Cards do mesmo tamanho, um ao lado do outro -------------- */
.frentes--intro .frentes__cards {
  width: 100%;
  max-width: 756px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
.frentes--intro .frentes__card {
  height: 100%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 14px 40px rgba(10, 0, 52, .25);
}
.frentes--intro .frentes__card--link:hover {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 28px 60px rgba(10, 0, 52, .5), 0 0 40px rgba(255, 104, 13, .35), 0 0 90px rgba(255, 104, 13, .15);
}

/* Botão do card Governança ---------------------------------- */
.frentes--intro .frentes__bt--gov { background-color: #fd5f54; }
.frentes--intro .frentes__card--link:hover .frentes__bt--gov {
  background-color: #f04a3e;
  box-shadow: 0 8px 20px rgba(253, 95, 84, .4);
}

/* Responsivo ----------------------------------------------- */
@media (max-width: 768px) {
  .frentes--intro { padding: 50px 0; }
  .frentes--intro .frentes__grid { gap: 36px; }
}
@media (max-width: 600px) {
  .frentes--intro .frentes__cards { grid-template-columns: 1fr; }
}