* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      header {
        font-family: 'Poppins', 'Nunito', sans-serif;
      }
      .faq-container {
        font-family: 'Poppins', sans-serif;
        padding: 2rem;
        display: flex;
        gap: 2rem;
        background-color: #0a0c10;
        color: #e6f4ff;
        flex-wrap: wrap;
      }
    
      /* Área esquerda */
      .faq-left {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 2rem;
        min-width: 280px;
      }
    
      .faq-title {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
      }
    
      .faq-title span {
        font-weight: 600;
        font-size: 0.95rem;
        color: #60a5fa;
        letter-spacing: 1px;
        text-transform: uppercase;
      }
    
      .faq-title h2 {
        font-size: 2rem;
        font-weight: 700;
      }
    
      .folder {
        background: linear-gradient(to right, #3b82f6, #1e3a8a);
        padding: 2rem;
        clip-path: polygon(
          0% 15%,
          0% 100%,
          100% 100%,
          100% 0%,
          35% 0%,
          32% 10%,
          30% 15%
        );
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        gap: 1.2rem;
        color: #ffffff;
        height: 100%;
        border-radius: 1rem;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
      }
    
      .folder h3 {
        font-size: 1.25rem;
        font-weight: 600;
      }
    
      .btn {
        display: inline-block;
        padding: 0.75rem 1.5rem;
        background-color: #ffffff;
        color: #1e3a8a;
        text-decoration: none;
        border-radius: 999px;
        font-weight: 600;
        transition: background-color 0.2s ease, transform 0.2s ease;
      }
    
      .btn:hover {
        background-color: #e0e7ff;
        transform: translateY(-2px);
      }
    
      /* Área direita */
      .faq-right {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        min-width: 280px;
      }
    
      details {
        background-color: #111827;
        border-radius: 8px;
        padding: 1rem 1.5rem;
        border: 1px solid #334155;
        transition: background 0.3s ease;
      }
    
      summary {
        cursor: pointer;
        font-size: 1rem;
        font-weight: 600;
        list-style: none;
        position: relative;
        padding-right: 2rem;
      }
    
      summary::marker {
        display: none;
      }
    
      summary::after {
        content: "+";
        position: absolute;
        right: 0;
        top: 0;
        font-size: 1.5rem;
        font-weight: bold;
        color: #60a5fa;
        transition: transform 0.3s ease;
      }
    
      details[open] summary::after {
        transform: rotate(45deg);
        color: #93c5fd;
      }
    
      details p {
        margin-top: 0.75rem;
        line-height: 1.6;
        font-size: 0.95rem;
        color: #cbd5e1;
      }
    
      @media (max-width: 768px) {
        .faq-container {
          flex-direction: column;
          padding: 2rem 1rem;
        }
    
        .faq-title h2 {
          font-size: 1.75rem;
        }
    
        .folder {
          clip-path: none;
          border-radius: 1rem;
        }
    
        .faq-left,
        .faq-right {
          width: 100%;
        }
      }