/* ==========================================================================
   PERGUNTAS FREQUENTES — estilos da seção do home
   ==========================================================================

   ARQUIVO SEPARADO, E ISSO NÃO É ORGANIZAÇÃO: é o que mantém a CSP válida.

   A política deste site declara `style-src 'self' ... 'sha256-<hash>'`, e o
   hash é do conteúdo do <style> embutido no index.html. Acrescentar uma regra
   dentro daquele bloco muda o hash, e um hash desatualizado faz o navegador
   BLOQUEAR o bloco inteiro em silêncio — a home abriria sem estilo nenhum.
   Corrigir exigiria reescrever o .htaccess, que é gerado por ferramentas/
   build.mjs (perdido em 13/09/2026).

   Como folha externa, `'self'` já autoriza e o hash embutido continua
   valendo, byte a byte. Enquanto o build não for reconstruído, TODO CSS novo
   deste site deve nascer em arquivo próprio, nunca dentro do <style>.
   ========================================================================== */
/* ══════════════════════════════════════════════════════════════
   PERGUNTAS FREQUENTES — o resumo que mora na home
   ══════════════════════════════════════════════════════════════

   Herda `padding` de `.services` e o cabeçalho de `.services-header`
   de propósito: seção nova que inventa o próprio ritmo vertical
   aparece como remendo mesmo quando cada regra está certa.

   `<details>`/`<summary>` e NÃO um acordeão de JavaScript. A abertura,
   o foco pelo teclado, o anúncio de "expandido/recolhido" no leitor de
   tela e a busca do Ctrl+F dentro do conteúdo fechado já são nativos —
   reimplementar isso em script daria mais código para fazer pior. E o
   conteúdo continua no HTML, legível por quem rastreia a página, o que
   é o motivo de a seção existir. */
.faq {
    padding: 120px 8%;
}

.faq-lista {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.faq-item {
    background: rgba(17, 17, 20, 0.55);
    -webkit-backdrop-filter: blur(16px) saturate(125%);
    backdrop-filter: blur(16px) saturate(125%);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    overflow: hidden;
    transition: border-color 0.4s ease, background 0.4s ease;
}

.faq-item[open],
.faq-item:hover {
    border-color: rgba(0, 229, 160, 0.28);
}

.faq-item summary {
    cursor: pointer;
    padding: 24px 58px 24px 28px;
    font-family: 'Poppins', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-light);
    position: relative;
    list-style: none;           /* Firefox */
}

/* O triângulo padrão do Safari/Chrome sai para o sinal de + entrar. */
.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: -4px;
}

/* O sinal é desenhado em CSS (duas barras) em vez de um caractere:
   "+" e "−" de fonte têm larguras e alturas diferentes entre si e
   entre sistemas, e o ícone tremia ao abrir. Aqui a barra vertical só
   gira. */
.faq-item summary::before,
.faq-item summary::after {
    content: '';
    position: absolute;
    right: 28px;
    top: 50%;
    width: 14px;
    height: 2px;
    background: var(--secondary);
    border-radius: 2px;
    transform: translateY(-50%);
}

.faq-item summary::after {
    transform: translateY(-50%) rotate(90deg);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

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

.faq-resposta {
    padding: 0 28px 26px;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.75;
}

.faq-resposta p { margin: 0 0 12px; }
.faq-resposta p:last-child { margin-bottom: 0; }
.faq-resposta strong { color: var(--text-light); }

.faq-resposta a {
    color: var(--secondary);
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 229, 160, 0.35);
}

.faq-resposta a:hover { border-bottom-color: var(--secondary); }

.faq-rodape {
    text-align: center;
    margin-top: 48px;
    color: var(--text-muted);
}

.faq-rodape a {
    color: var(--secondary);
    text-decoration: none;
    font-weight: 600;
}

.faq-rodape a:hover { text-decoration: underline; }

@media (max-width: 768px) {
    .faq { padding: 80px 6%; }
    .faq-item summary { font-size: 0.98rem; padding: 20px 50px 20px 20px; }
    .faq-item summary::before,
    .faq-item summary::after { right: 20px; }
    .faq-resposta { padding: 0 20px 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .faq-item,
    .faq-item summary::after { transition: none; }
}