/* FAQ ÚNICO: serviços e contato usam details/summary; não depende de JavaScript. */

/* SEÇÃO: aplicada apenas aos sete blocos novos; não altera seções existentes. */
.site-faq { padding: 70px 0; background: #f7f9fc; }

/* CABEÇALHO ÚNICO: identificação, título e descrição seguem o modelo de aposentadoria. */
.site-faq-heading { max-width: 1000px; margin: 0 auto 42px; text-align: center; }

/* IDENTIFICAÇÃO: texto pequeno azul, sem borda ou fundo de outros componentes. */
.site-faq-badge { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; color: var(--cor-primaria); font-family: var(--fonte-texto); font-size: 12px; font-weight: 600; letter-spacing: 1px; line-height: 1.5; text-transform: uppercase; }

/* ÍCONE: detalhe dourado decorativo, oculto aos leitores de tela no HTML. */
.site-faq-badge i { color: var(--cor-destaque); }

/* TÍTULO: tamanho fluido, sem sobrescritas para cada página. */
.site-faq-heading h2 { margin: 0; color: var(--cor-primaria); font-family: var(--fonte-titulo); font-size: clamp(30px, 4vw, 48px); font-weight: 500; line-height: 1.2; }

/* ASSUNTO: dourado escuro legível sobre branco e #f7f9fc, inclusive na home. */
.site-faq-heading h2 span { color: #876719; }

/* DESCRIÇÃO: mesma fonte, largura e distância do título em todas as páginas. */
.site-faq-heading p { max-width: 800px; margin: 20px auto 0; color: var(--cor-texto); font-family: var(--fonte-texto); font-size: 16px; line-height: 1.8; }

/* FAQ: largura confortável sem alturas fixas nem conteúdo cortado. */
.site-faq-list {
    max-width: 880px;
    margin: 0 auto;
}

/* CARTÕES: substituem os separadores antigos; visual alinhado ao FAQ de contato. */
.site-faq-list details {
    margin-bottom: 13px;
    border: 1px solid rgba(20, 58, 99, .12);
    border-radius: 15px;
    background: var(--cor-superficie);
    box-shadow: 0 10px 30px rgba(20, 58, 99, .05);
}

/* CONTROLE NATIVO: toda a pergunta é clicável; texto longo quebra sem altura fixa. */
.site-faq-list summary {
    position: relative;
    display: block;
    box-sizing: border-box;
    min-height: 65px;
    padding: 21px 56px 21px clamp(16px, 3vw, 24px);
    border-radius: 15px;
    list-style: none;
    cursor: pointer;
    color: var(--cor-primaria);
    font-family: var(--fonte-texto);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
}

/* SAFARI: remove o triângulo nativo, substituído pelo indicador decorativo abaixo. */
.site-faq-list summary::-webkit-details-marker {
    display: none;
}

/* INDICADOR: duas linhas desenham o +, sem adicionar texto ao nome acessível. */
.site-faq-list summary::before,
.site-faq-list summary::after {
    content: "";
    position: absolute;
    top: 31px;
    right: 24px;
    width: 14px;
    height: 2px;
    background: #947317;
}

/* FECHADO: linha vertical completa o sinal de mais. */
.site-faq-list summary::after {
    transform: rotate(90deg);
}

/* ABERTO: resta somente o sinal de menos; estado controlado pelo navegador. */
.site-faq-list details[open] summary::after {
    display: none;
}

/* REALCE: feedback discreto ao passar o mouse ou manter uma resposta aberta. */
.site-faq-list summary:hover,
.site-faq-list details[open] summary {
    background: #f3f6f9;
}

/* RESPOSTA: acompanha o recuo responsivo da pergunta, sem cortes ou animações. */
.site-faq-list details p {
    margin: 0;
    color: var(--cor-texto);
    font-size: 16px;
    line-height: 1.8;
    padding: 16px clamp(16px, 3vw, 24px) 22px;
}


/* TECLADO: indicador de foco comum a todos os controles do FAQ. */
.site-faq-list summary:focus-visible { outline: 3px solid var(--cor-primaria); outline-offset: 5px; }

/* CELULAR: espaçamento da seção; cartões já usam recuo fluido. */
@media (max-width: 800px) { .site-faq { padding: 48px 0; } }