/* -----------------------------------------------------------------
   V6: ESTRUTURA PURA DE CLASSE E TRANSITION MAX-HEIGHT
   ESTE CSS DEVE SER USADO COM O JAVASCRIPT BASEADO EM CLASSE (V6)
   ----------------------------------------------------------------- */

/* --- Estilo Base do Acordeão --- */
.accordion {
    border-bottom: 1px solid #e0e0e0;
    /* background-color: #f7f7f7; */
    margin-bottom: 1px;
    border-radius: 4px; /* Arredonda ligeiramente os cantos */
    line-height: 1.2;
}

.acordeao-container {
    padding: 20px;
    margin-top: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* --- Estilo do Gatilho (Título Clicável) --- */
.accordion-trigger {
    display: block; /* Ocupa todo o espaço para ser clicável */
    padding: 10px 20px;
    color: #fff;
    font-size: 1em;
    font-weight: 600;
    text-decoration: none; /* Remove sublinhado padrão de links */
    position: relative;
    transition: background-color 0.3s ease;
    cursor: pointer;
    border-radius: 8px;
}

/* Efeito ao passar o mouse */
.accordion-trigger:hover {
    background-color: #e9e9e9;
}

/* --- Indicador de Abertura/Fechamento (Seta/Ícone) --- */
.accordion-trigger::after {
    content: '+'; /* Ícone de "abrir" */
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    font-size: 1.2em;
    line-height: 1;
    transition: transform 0.3s ease, content 0.3s ease;
}

/* Ícone de "fechar" (Acordeão ativo) */
.accordion.active .accordion-trigger::after {
    content: '-'; /* Ícone de "fechar" */
}

/* --- Conteúdo (O Segredo do Acordeão) --- */
.content-acor {
    /* Estado inicial: OBRIGATÓRIO PARA ESCONDER */
    max-height: 0;
    overflow: hidden;
    
    /* A transição suave DEVE estar aqui */
    transition: max-height 0.3s ease-out, padding 0.3s ease-out; 
    
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 0; /* Padding superior é controlado para a transição */
    padding-bottom: 0; /* Padding inferior é controlado para a transição */
    text-align: left;
    
    /*background-color: #fff; /* Fundo do conteúdo */
    color: #f7f7f7;
}

/* Quando o JS adiciona a classe 'active', o padding é aplicado */
.accordion.active .content-acor {
    /* O JS define max-height: <valor_alto> para abrir */
    padding-top: 5px;
    padding-bottom: 15px;
}

/* Estilos de Conteúdo Interno */
.content-acor p {
    margin-bottom: 10px;
    line-height: 1.6;
}
.content-acor p:last-child {
    margin-bottom: 0;
}
.content-acor ul, 
.content-acor ol {
    margin: 10px 25px;
    padding-left: 20px;
}
.content-acor li {
    margin-bottom: 5px;
}

.subtitle-acor{
    font-weight: bold;
    margin-left: 30px;
}