/* ==========================================================================
   FAQ — Original Digital
   Arquivo separado de propósito: não altera o CSS do template DSN Grid,
   então um update do template não sobrescreve estes estilos.
   Usa <details>/<summary> nativos — acessível e sem depender de JavaScript.
   ========================================================================== */

.faq-section .faq-list {
    max-width: 860px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    padding: 0;
}

.faq-item:first-of-type {
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.faq-question {
    position: relative;
    display: block;
    cursor: pointer;
    list-style: none;
    padding: 26px 56px 26px 0;
    font-family: var(--heading-font, 'Montserrat', sans-serif);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--heading-color, #fff);
    transition: color .3s ease;
}

/* remove o marcador nativo (seta/triângulo) */
.faq-question::-webkit-details-marker { display: none; }
.faq-question::marker { content: ''; }

.faq-question:hover {
    color: var(--theme-color, #c5a47e);
}

/* ícone + / − construído em CSS, sem imagem */
.faq-question::before,
.faq-question::after {
    content: '';
    position: absolute;
    right: 6px;
    top: 50%;
    background-color: currentColor;
    transition: transform .3s ease, opacity .3s ease;
}

.faq-question::before {
    width: 16px;
    height: 2px;
    transform: translateY(-50%);
}

.faq-question::after {
    width: 2px;
    height: 16px;
    right: 13px;
    transform: translateY(-50%);
}

.faq-item[open] .faq-question::after {
    transform: translateY(-50%) rotate(90deg);
    opacity: 0;
}

.faq-item[open] .faq-question {
    color: var(--theme-color, #c5a47e);
}

.faq-answer {
    padding: 0 40px 26px 0;
    animation: faqFade .35s ease;
}

.faq-answer p {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.85;
    color: var(--body-color, rgba(255, 255, 255, .7));
}

@keyframes faqFade {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* respeita quem prefere menos animação */
@media (prefers-reduced-motion: reduce) {
    .faq-answer { animation: none; }
    .faq-question,
    .faq-question::before,
    .faq-question::after { transition: none; }
}

@media (max-width: 767px) {
    .faq-question {
        font-size: 15.5px;
        padding: 22px 44px 22px 0;
    }
    .faq-answer {
        padding: 0 8px 22px 0;
    }
    .faq-answer p { font-size: 15px; }
}