/**
 * accordion.css
 * Componente de acordeão reutilizável.
 * Localização: cursos/online/compreometodo3m/css/accordion.css
 */

.accordion {
  display:        flex;
  flex-direction: column;
  gap:            8px;
}

.accordion-item {
  background:    rgba(255,255,255,0.05);
  border:        1px solid rgba(191,160,106,0.18);
  border-radius: 10px;
  overflow:      hidden;
}

/* Variante para fundo claro */
.accordion-item.claro {
  background: #fff;
  border:     1px solid rgba(191,160,106,0.15);
}

.accordion-btn {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  width:           100%;
  padding:         20px 24px;
  background:      none;
  border:          none;
  cursor:          pointer;
  text-align:      left;
  font-family:     var(--fonte-corpo);
  font-size:       15px;
  font-weight:     600;
  color:           var(--algodao-claro);
  gap:             16px;
  transition:      color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.accordion-item.claro .accordion-btn {
  color: var(--verde-escuro);
}

.accordion-btn:hover {
  color: var(--dourado);
}

.accordion-icone {
  flex-shrink: 0;
  font-size:   22px;
  line-height: 1;
  color:       var(--dourado);
  font-weight: 300;
  transition:  transform 0.32s ease;
  user-select: none;
}

.accordion-item.aberto .accordion-icone {
  transform: rotate(45deg);
}

.accordion-corpo {
  max-height: 0;
  overflow:   hidden;
  transition: max-height 0.38s ease;
}

.accordion-corpo-inner {
  padding:     0 24px 24px;
  font-size:   14px;
  line-height: 1.78;
  color:       var(--algodao-escuro);
}

.accordion-item.claro .accordion-corpo-inner {
  color: var(--verde-musgo);
}