:root {
  --azul-escuro: #000D1C;
  --dourado: #DAB369;
  --cinza-escuro: #747474;
  --marrom: #41261B;
  --fundo-claro: #FFF3E7;
}

body {
  background-color: var(--fundo-claro);
}

.conteudo-questao {
  margin: auto;
}

.conteudo-questao h2 {
  text-align: center;
  margin-bottom: 16px;
}

.descricao-questao {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 40px;
  line-height: 1.7;
}

.divisor {
  width: 80px;
  height: 3px;
  background-color: var(--cinza-escuro);
  opacity: 0.4;
  border: none;
  border-radius: 2px;
  margin: 0 auto 60px;
}

.cards {
  display: grid;
  gap: 32px;
  margin-top: 40px;
  justify-content: center;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.section-dark,
.section-light {
  padding-top: 28px;
  padding-bottom: 28px;
}


#intro .intro-destaque {
  font-size: 1.15rem;
  line-height: 1.6;
  max-width: 800px;
  margin: 0 auto 30px;
  font-weight: 600;
  color: var(--marrom);
  text-align: center;
}

#intro .intro-final {
  font-weight: 600;
  margin-top: 40px;
  text-align: center;
}


@media (min-width: 1200px) {
  .cards {
    grid-template-columns: repeat(3, minmax(300px, 1fr));
  }

  .cards .card:nth-child(4),
  .cards .card:nth-child(5) {
    grid-column: span 1;
  }
}

@media (min-width: 800px) and (max-width: 1199px) {
  .cards {
    grid-template-columns: repeat(2, minmax(280px, 1fr));
  }
}

@media (min-width: 600px) and (max-width: 799px) {
  .cards {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
  }
}

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

.cards{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;     
  gap:42px 32px;               
  max-width:1100px;
  margin:40px auto 0;
}


@media (min-width:1200px){
  .card{ flex: 0 1 320px; }    
}

@media (min-width:800px) and (max-width:1199px){
  .card{ flex: 0 1 360px; }   
}

@media (min-width:600px) and (max-width:799px){
  .card{ flex: 0 1 300px; }   
}

@media (max-width:599px){
  .card{ flex: 1 1 100%; max-width: 560px; }
}

.card{
  background:#FFFDF7;
  border-radius:16px;
  padding:28px 24px;
  border:1px solid rgba(198,161,75,0.25);
  box-shadow:0 2px 10px rgba(0,0,0,.05);
  max-width:340px;
  transition:transform .2s ease, box-shadow .25s ease, border .25s ease;
  transform:translateZ(0);   
}

.card h3{ margin-bottom:12px; font-weight:600; color:#1F1F1F; }
.card p{ margin-bottom:20px; font-size:.95rem; line-height:1.6; color:#2B2B2B; }

.card .btn{
  display:inline-block;
  background:#C6A14B;      
  color:#1F1F1F;
  text-decoration:none;
  padding:10px 18px;
  border-radius:8px;
  font-weight:600;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}

.card .btn:hover{ background:#E0B956; color:#000; transform:translateY(-1px); }

.card:hover{
  transform:translateY(-2px);           
  box-shadow:0 6px 16px rgba(0,0,0,.12);
  border-color:#C6A14B;
}

#intro > p {
  flex: 1 1 520px;
  max-width: 11 00px;
  line-height: 1.85;
  text-align: justify;
  margin-inline: auto;
}