/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #dbd2c3;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
}

.banner img {
  width: 100%;
  display: block;
}

.menu {
  display: flex;
  width: 100%;
}

.menu a {
  flex: 1;
  text-align: center;
  padding: 10px;
  text-decoration: none;
  color: black;
  border: 2px solid black;
  box-sizing: border-box;
}

.menu a + a {
  border-left: none;
}

.menu a:hover {
  background-color: #eee;
}

.conteudo {
  text-align: center;
  padding: 40px 20px;
}

.conteudo h1 {
  font-size: 48px;
  margin-bottom: 30px;
}

.conteudo p {
  font-size: 16px;
  max-width: 600px;
  margin: 0 auto 30px auto; /* mesmo valor: 30px */
}

.assinatura {
  width: 200px;
  max-width: 100%;
  margin-top: 0; /* remove diferença */
}

.menu .ativo {
  flex: 1;
  text-align: center;
  padding: 10px;
  border: 2px solid black;
  background-color: black;
  color: #dbd2c3;
  box-sizing: border-box;
}

.menu .ativo + a {
  border-left: none;
}

.menu a + .ativo {
  border-left: none;
}

.icone {
  width: 60px;
  height: 60px;
}

/* ===== GRID DOS RPGS ===== */

.grid-rpgs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 40px 30px;
  margin-top: 40px;
}


/* ===== CARDS ===== */

.card-rpg {
  text-align: center;
}


/* ===== IMAGEM ===== */

.card-rpg img {
  width: 180px;
  height: auto;
  display: block;
  margin: 0 auto;
}


/* ===== LINHA ABAIXO DA IMAGEM ===== */

.card-rpg .linha {
  height: 2px;
  background-color: #000;
  width: 200px;
  margin: 0 auto 10px auto;
}


/* ===== TÍTULO ===== */

.card-rpg h3 {
  margin: 10px 0 2px; /* ajustado para aproximar do subtítulo */
  font-size: 1.1em;
}

.card-rpg h3 a {
  text-decoration: none;
  color: inherit;
}

.card-rpg h3 a:hover {
  text-decoration: underline;
}


/* ===== SUBTÍTULO (NOVO) ===== */

.subtitulo {
  font-size: 0.7em;
  margin: 0;
  font-weight: bold;
  opacity: 0.75;
}


/* ===== DESCRIÇÃO ===== */

.card-rpg p {
  font-size: 0.9em;
  line-height: 1.4;
  margin-top: 6px; /* controla espaçamento geral */
}


/* ===== POSICIONAMENTO NO GRID ===== */

/* Linha 1 */
.grid-rpgs .card-rpg:nth-child(1) { grid-column: 1 / span 2; }
.grid-rpgs .card-rpg:nth-child(2) { grid-column: 3 / span 2; }
.grid-rpgs .card-rpg:nth-child(3) { grid-column: 5 / span 2; }

/* Linha 2 */
.grid-rpgs .card-rpg:nth-child(4) { grid-column: 1 / span 2; }
.grid-rpgs .card-rpg:nth-child(5) { grid-column: 3 / span 2; }
.grid-rpgs .card-rpg:nth-child(6) { grid-column: 5 / span 2; }

/* Linha 3 */
.grid-rpgs .card-rpg:nth-child(7) { grid-column: 2 / span 2; }
.grid-rpgs .card-rpg:nth-child(8) { grid-column: 4 / span 2; }


/* ===== RESPONSIVO ===== */

@media (max-width: 800px) {
  .grid-rpgs {
    grid-template-columns: 1fr;
  }

  .grid-rpgs .card-rpg {
    grid-column: auto !important;
  }
}

.card-rpg p {
  margin: 6px 0 0 0;
}

.subtitulo {
  font-size: 0.7em;
  margin: 0 !important;
  font-weight: bold;
  opacity: 0.75;
}

.card-rpg h3 {
  margin: 10px 0 2px;
}