/* Bloque FAQ — acordeón con <details>/<summary> nativo. */

.bl-faq-cont {
    max-width: 900px;
    margin: 0 auto;
    /* El aire vertical va aqui, con el token compartido: los 20px que habia
       dejaban el titular pegado a la seccion de arriba. Al ir en el bloque, y
       no en la pagina que lo usa, la FAQ respira igual en todas partes. */
    padding: var(--bl-aire, 72px) 20px;
}
.bl-faq-titulo {
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 400;
    text-align: center;
    margin: 0 0 12px;
    line-height: 1.2;
}
.bl-faq-descripcion {
    text-align: center;
    color: #666;
    font-size: 16px;
    line-height: 1.5;
    margin: 0 0 32px;
}
.bl-faq-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bl-faq-item {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    overflow: hidden;
    transition: box-shadow .2s ease;
}
.bl-faq-item[open] {
    box-shadow: 0 4px 18px rgba(0,0,0,0.09);
}

/* Cabecera (pregunta): siempre visible, clicable */
.bl-faq-pregunta {
    list-style: none;               /* quita el marcador nativo (Chrome) */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    cursor: pointer;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.35;
    color: #1a1a1a;
    user-select: none;
}
.bl-faq-pregunta::-webkit-details-marker { display: none; } /* Safari */
.bl-faq-pregunta:hover { color: var(--color-primary, #1a1a1a); }
.bl-faq-pregunta-txt { flex: 1; }

/* Icono + / − — usa CSS puro, sin librería */
.bl-faq-icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    position: relative;
    transition: transform .25s ease;
}
.bl-faq-icon::before,
.bl-faq-icon::after {
    content: "";
    position: absolute;
    background: currentColor;
    border-radius: 2px;
    left: 50%;
    top: 50%;
}
.bl-faq-icon::before { width: 14px; height: 2px; transform: translate(-50%, -50%); }
.bl-faq-icon::after  { width: 2px;  height: 14px; transform: translate(-50%, -50%); transition: transform .25s ease; }
.bl-faq-item[open] .bl-faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }

/* Respuesta */
.bl-faq-respuesta {
    padding: 0 22px 20px;
    font-size: 15px;
    line-height: 1.6;
    color: #444;
}
.bl-faq-respuesta > *:first-child { margin-top: 0; }
.bl-faq-respuesta > *:last-child  { margin-bottom: 0; }

@media (max-width: 600px) {
    .bl-faq-cont { padding: var(--bl-aire, 48px) 16px; }
    .bl-faq-pregunta { padding: 14px 16px; font-size: 15px; }
    .bl-faq-respuesta { padding: 0 16px 16px; font-size: 14px; }
}