/* ==========================================================
   faq.css  –  Perguntas Frequentes (Seção 3)
   Depende de: common.css
   ========================================================== */

.faq {
  max-width:      720px;
  margin:         40px auto 0;
  text-align:     left;
}

/* ----- Card de cada item ----- */

.faq-item {
  border-bottom: 1px solid rgba(191,160,106,0.3);
}

/* ----- Botão da pergunta ----- */

.faq-pergunta {
  width:           100%;
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             16px;
  padding:         20px 0;

  font-family:  var(--fonte-corpo);
  font-size:    17px;
  font-weight:  600;
  line-height:  1.4;
  text-align:   left;
  color:        var(--texto-escuro);
  -webkit-text-fill-color: var(--texto-escuro);

  background:   none;
  border:       none;
  cursor:       pointer;

  appearance: none;
  -webkit-appearance: none;

  -webkit-user-select: none;
  user-select: none;
  transition: color .2s ease;
}

/* Hover apenas em dispositivos com mouse real — evita ficar preso no mobile */
@media (hover: hover) {
  .faq-pergunta:hover {
    color: var(--dourado);
    -webkit-text-fill-color: var(--dourado);
  }
}

/* Efeito dourado ao clicar em qualquer dispositivo */
.faq-pergunta:active {
  color: var(--dourado);
  -webkit-text-fill-color: var(--dourado);
}

/* Texto da pergunta */
.faq-pergunta span:first-child {
  flex: 1;
}

/* Ícone + / × */
.faq-icon {
  font-size:   22px;
  font-weight: 300;
  line-height: 1;
  flex-shrink: 0;
  color:       var(--dourado);

  transition: transform .3s ease;
  -webkit-transition: -webkit-transform .3s ease;
}

/* ----- Resposta (accordion) ----- */

.faq-resposta {
  max-height:  0;
  overflow:    hidden;
  padding:     0;
  font-size:   15px;
  line-height: 1.7;
  text-align:  left;
  color:       var(--verde-musgo);

  transition: max-height .35s ease, padding .35s ease;
  -webkit-transition: max-height .35s ease, padding .35s ease;
}

/* Estado aberto */
.faq-item.active .faq-resposta {
  max-height: 800px;
  padding:    0 0 24px;
}

.faq-item.active .faq-icon {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

/* ----- Lista gerada pelo JS (itens com *) ----- */

.faq-resposta p {
  margin-bottom: 8px;
}

.faq-resposta p:last-child {
  margin-bottom: 0;
}

.faq-lista {
  list-style:    none;
  margin:        8px 0 0;
  padding:       0;
}

.faq-lista li {
  padding-left: 20px;
  position:     relative;
  margin-bottom: 6px;
  line-height:  1.6;
}

.faq-lista li::before {
  content:  '–';
  position: absolute;
  left:     0;
  color:    var(--dourado);
  font-weight: 600;
}

/* ----- Responsivo ----- */

@media (max-width: 768px) {
  .faq-pergunta {
    font-size: 15px;
    padding:   16px 0;
  }

  .faq-resposta {
    font-size: 14px;
  }

  .faq-item.active .faq-resposta {
    padding: 0 0 16px;
  }
}