Como Criar um FAQ responsivo com HTML e CSS

Aprenda a criar uma seção de FAQ (Perguntas Frequentes) funcional e acessível utilizando apenas elementos nativos do HTML, como <details> e <summary>, com uma estilização moderna em CSS. Este tutorial dispensa o uso de JavaScript e foca em simplicidade, performance e acessibilidade.

HTML: 

    <h1>Perguntas Frequentes</h1>
    <!-- Título principal da página -->
    <div class="faq-container">
        <!-- Container que agrupa todos os itens de FAQ -->
        <details>
            <!-- Item de FAQ; ao clicar, mostra/oculta o conteúdo -->
            <summary>Por que não devemos confiar em átomos?</summary>
            <!-- Título da pergunta -->
            <p class="faq-text">Porque eles formam tudo.</p>
            <!-- Resposta correspondente -->
        </details>

        <details>
            <summary>Como você chama alguém sem corpo e sem nariz?</summary>
            <p class="faq-text">Ninguém sabe.</p>
        </details>

        <details>
            <summary>Qual é a maneira orientada a objetos de se tornar rico?</summary>
            <p class="faq-text">Herança.</p>
        </details>

        <details>
            <summary>Quantas cócegas são necessárias para fazer cócegas em um polvo?</summary>
            <p class="faq-text">Dez cócegas!</p>
        </details>

        <details>
            <summary>O que é: 1 + 1?</summary>
            <p class="faq-text">Depende de quem você pergunta.</p>
        </details>
    </div>

CSS: 

        body {
            font-family: Arial, sans-serif; /* Define a fonte principal */
            background-color: #f9f9f9; /* Cor de fundo da página */
            padding: 20px; /* Espaçamento interno ao redor do conteúdo */
            color: #333; /* Cor do texto */
        }

        h1 {
            text-align: center; /* Centraliza o título */
            margin-bottom: 20px; /* Espaçamento abaixo do título */
        }

        /* Container de perguntas */
        .faq-container {
            max-width: 600px; /* Define uma largura máxima para o container */
            margin: 0 auto; /* Centraliza horizontalmente o container */
        }

        /* Estilização para cada item de FAQ */
        details {
            background-color: #fff; /* Cor de fundo branco para cada pergunta */
            border: 1px solid #ddd; /* Borda cinza ao redor */
            border-radius: 5px; /* Arredonda os cantos */
            margin-bottom: 10px; /* Espaçamento entre os itens */
            padding: 10px 15px; /* Espaçamento interno no conteúdo */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra leve para destaque */
            cursor: pointer; /* Mostra o cursor de clique ao passar o mouse */
        }

        details[open] {
            /* Estilização quando o item está aberto */
            border-color: #007bff; /* Cor da borda azul */
            box-shadow: 0 3px 7px rgba(0, 123, 255, 0.2); /* Sombra mais acentuada */
        }

        summary {
            font-size: 18px; /* Tamanho do texto do título */
            font-weight: bold; /* Deixa o texto em negrito */
            margin-bottom: 5px; /* Espaçamento inferior do título */
            outline: none; /* Remove bordas ao focar no título */
        }

        summary:hover {
            /* Estilização ao passar o mouse sobre o título */
            color: #007bff; /* Muda a cor do texto para azul */
        }

        /* Conteúdo de cada resposta */
        .faq-text {
            font-size: 16px; /* Define o tamanho do texto da resposta */
            margin-top: 10px; /* Espaçamento acima da resposta */
            color: #555; /* Cor do texto da resposta */
        }