/* ===============================================
   MÓDULO: FAQ ACORDEÓN (Preguntas Frecuentes)
   VERSIÓN: 1.0 - TRANSPARENTE SIN RECUADROS
   
   DESCRIPCIÓN:
   Sistema de preguntas frecuentes estilo acordeón.
   SIN bordes, SIN fondos, SIN sombras, SIN recuadros.
   Totalmente transparente para integrarse en cualquier diseño.
   
   ESTRUCTURA HTML REQUERIDA:
   <section class="faq-container">
       <h3 class="faq-title">Preguntas Frecuentes</h3>
       <details class="faq-item">
           <summary>¿Pregunta?</summary>
           <div class="faq-answer">
               <p>Respuesta...</p>
           </div>
       </details>
   </section>
   =============================================== */

/* ===== 1. CONTENEDOR PRINCIPAL ===== */
/* SIN borde, SIN fondo, SIN sombra - totalmente transparente */
.faq-container {
    max-width: 850px;               /* Ancho máximo del bloque */
    margin: 0 auto;                 /* Centrado horizontal */
    background-color: transparent;  /* SIN fondo - transparente */
    padding: 0;                     /* SIN padding - sin recuadro interior */
    box-shadow: none;               /* SIN sombra */
    border: none;                   /* SIN borde */
}

/* ===== 2. TÍTULO DEL BLOQUE ===== */
/* SIN borde inferior, solo el texto */

/* Ícono de Bootstrap */
.faq-title .bi,
.faq-title i {
    font-size: 1.6rem;              /* Tamaño del ícono */
    color: #1a2a3a;                 /* Mismo color que el texto */
}

/* ===== 3. CADA PREGUNTA ===== */
/* SIN borde, SIN fondo, SIN recuadro */
.faq-item {
    margin-bottom: 0.9rem;          /* Solo separación entre preguntas */
    background-color: transparent;  /* SIN fondo */
    border: none;                   /* SIN borde */
    border-radius: 0;               /* SIN bordes redondeados */
    overflow: visible;              /* SIN overflow hidden (no hay bordes que recortar) */
    box-shadow: none;               /* SIN sombra */
}

/* ===== 4. LA PREGUNTA VISIBLE (clickeable) ===== */
/* SIN fondo de color, SIN bordes */
.faq-item summary {
    padding: 0.5rem 2.7rem;              /* Solo padding vertical mínimo, SIN padding lateral */
    font-weight: 700;               /* Negrita (gordita) */
    font-size: 1rem;              /* Tamaño de letra de la pregunta */
    color: #1e2f3e;                 /* Color del texto */
    background-color: transparent;  /* SIN fondo - transparente */
    cursor: pointer;                /* Manita al pasar el mouse */
    list-style: none;               /* Elimina la flecha nativa */
    display: flex;                  /* Flexbox para alinear texto y signo */
    align-items: center;            /* Centrado vertical */
    justify-content: space-between; /* Texto a la izquierda, signo a la derecha */
    gap: 1rem;                      /* Espacio entre texto y signo */
    border: none;                   /* SIN borde */
}

/* Elimina la flecha nativa en navegadores */
.faq-item summary::-webkit-details-marker {
    display: none;
}

/* Efecto hover: solo cambia el color del texto, SIN fondo */
.faq-item summary:hover {
    color: #2c7da0;                 /* Cambia el color del texto al pasar el mouse */
    background-color: transparent;  /* Sigue siendo transparente */
}

/* ===== 5. EL SIGNO + / - ===== */
/* SIN fondo, SIN recuadro, solo el símbolo */
.faq-item summary::after {
    content: "+";                   /* Signo más cuando está cerrado */
    font-size: 1.4rem;              /* Tamaño del signo */
    font-weight: 700;               /* Negrita */
    color: #2c7da0;                 /* Color del signo */
    flex-shrink: 0;                 /* Evita que se encoja */
    background-color: transparent;  /* SIN fondo */
}

/* Signo − cuando está abierto */
.faq-item[open] summary::after {
    content: "−";                   /* Cambia de + a − */
}

/* ===== 6. LA RESPUESTA ===== */
/* SIN borde, SIN fondo de color, SIN línea separadora */
.faq-answer {
    padding: 0.5rem 0 0.5rem 3rem;  /* Padding izquierdo mínimo para sangría (opcional) */
    background-color: transparent;  /* SIN fondo - transparente */
    border-top: none;               /* SIN línea separadora */
    color: #000000;                 /* Color de texto más suave que la pregunta */
    line-height: 1.2;               /* Altura entre líneas para legibilidad */    
}

/* Espaciado entre párrafos dentro de la respuesta */
.faq-answer p {
    margin-bottom: 0.75rem;         /* Separación entre párrafos */
}

.faq-answer p:last-child {
    margin-bottom: 0;
}

/* ===== 7. TEXTO DESTACADO ===== */
.faq-answer strong {
    color: #1e2f3e;                 /* Mismo color que las preguntas */
    font-weight: 700;
}

/* ===============================================
   VERSIÓN RESPONSIVE
   =============================================== */
@media (max-width: 768px) {
    .faq-title {
        font-size: 1.4rem;
    }
    
    .faq-title .bi,
    .faq-title i {
        font-size: 1.3rem;
    }
    
    .faq-item summary {
        font-size: 1rem;
        padding: 0.4rem 0;
    }
    
    .faq-item summary::after {
        font-size: 1.3rem;
    }
    
    .faq-answer {
        padding: 0.4rem 0 0.4rem 0.75rem;
        font-size: 0.9rem;
    }
}

/* ===============================================
   NOTAS PARA MANTENIMIENTO:
   ===============================================
   
   1. Este CSS es 100% transparente. NO agrega:
      - Bordes
      - Fondos de color
      - Sombras
      - Recuadros
      - Líneas separadoras
   
   2. Solo define:
      - Colores de texto
      - Tamaños de fuente
      - Espaciados (márgenes y paddings)
      - El signo + / -
   
   3. Si quieres que las respuestas tengan sangría (estén más adentro),
      modifica el padding-left de .faq-answer (actualmente 1rem)
   
   4. Si NO quieres NINGUNA sangría en las respuestas,
      cambia .faq-answer { padding: 0.5rem 0; }
   
   5. Para el acordeón exclusivo (solo una pregunta abierta a la vez):
      Agrega name="mi-grupo" a TODOS los <details>
   =============================================== */