/* ─── Acordeón de preguntas frecuentes ───────────────────────────────────────
   Usado en las páginas de aplicar a beca, donar y voluntariado, justo antes
   del formulario correspondiente. Contenido en inc/faq-data.php, renderizado
   vía el shortcode [fj_faq] (inc/faq-render.php).

   A diferencia del formulario, esto NO es una tarjeta: fondo transparente
   (se ve el fondo de la página detrás) y mismo ancho que el título/texto de
   la sección de arriba (bloque Kadence con maxWidth 700).
   ────────────────────────────────────────────────────────────────────────── */

.fj-faq {
    max-width: 700px;
    margin: 0 auto 40px;
    font-family: var(--global-body-font-family, 'Manrope', sans-serif);
}

/* El título funciona como un acordeón de un solo elemento: al hacer clic
   se muestra/oculta toda la lista de preguntas — están hay muchas y por
   defecto conviene mantenerlas colapsadas. */
.fj-faq__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 8px 0 20px;
    margin: 0;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.fj-faq__title:hover,
.fj-faq__title:focus,
.fj-faq__title:focus-visible {
    background: none;
    box-shadow: none;
    border-radius: 0;
    outline: none;
}

.fj-faq__title:focus-visible {
    outline: 2px solid #d8dbe8;
    outline-offset: -2px;
}

.fj-faq__title:hover .fj-faq__icon,
.fj-faq__title:focus-visible .fj-faq__icon {
    border-bottom-color: #d8dbe8;
}

.fj-faq__title-text {
    font-size: 1.4rem;
    font-weight: 800;
    color: #1A1860;
    line-height: 1.3;
    text-transform: none;
}

.fj-faq__list {
    max-height: 0;
    overflow: hidden;
}

.fj-faq.is-expanded .fj-faq__list {
    max-height: none;
    overflow: visible;
}

.fj-faq.is-expanded .fj-faq__icon--title::after {
    transform: translate(-50%, -50%) scaleY(0);
}

.fj-faq__item {
    border-bottom: 1px solid #e4e7ee;
}

.fj-faq__item:last-child {
    border-bottom: none;
}

.fj-faq__question {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 24px 0;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

/* El botón entero no debe reaccionar al hover — solo el ícono (ver
   .fj-faq__icon más abajo). Se anula explícitamente porque el tema trae un
   estilo de hover por defecto en <button> (fondo + sombra + esquinas
   redondeadas, como una tarjeta que "flota"), que aquí no queremos. */
.fj-faq__question:hover,
.fj-faq__question:focus,
.fj-faq__question:focus-visible {
    background: none;
    box-shadow: none;
    border-radius: 0;
    outline: none;
}

/* Accesibilidad: indicador de foco por teclado, recto (sin curvas). */
.fj-faq__question:focus-visible {
    outline: 2px solid #d8dbe8;
    outline-offset: -2px;
}

.fj-faq__number {
    flex-shrink: 0;
    min-width: 24px;
    color: var(--global-palette1, #fea900);
    font-size: 0.8rem;
    font-weight: 700;
}

.fj-faq__question-text {
    flex: 1 1 auto;
    font-size: 1.05rem;
    font-weight: 600;
    color: #1A1860;
    line-height: 1.4;
    text-transform: none;
}

/* Indicador de hover: una línea horizontal debajo del ícono +/- (nunca un
   círculo — los bordes curvos de un círculo se notaban "subiendo" a los
   lados), y nunca sobre el texto. Gris claro, no azul, para que el signo
   +/- —también azul oscuro— no pierda contraste. */
.fj-faq__icon {
    position: relative;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    box-sizing: border-box;
    border-bottom: 2px solid transparent;
    transition: border-color 0.15s ease;
}

.fj-faq__question:hover .fj-faq__icon,
.fj-faq__question:focus-visible .fj-faq__icon {
    border-bottom-color: #d8dbe8;
}

.fj-faq__icon::before,
.fj-faq__icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: #1A1860;
    border-radius: 1px;
    transition: transform 0.2s ease;
}

.fj-faq__icon::before {
    width: 14px;
    height: 2px;
    transform: translate(-50%, -50%);
}

.fj-faq__icon::after {
    width: 2px;
    height: 14px;
    transform: translate(-50%, -50%);
}

.fj-faq__item.is-open .fj-faq__icon::after {
    transform: translate(-50%, -50%) scaleY(0);
}

.fj-faq__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
    padding: 0 0 0 40px;
}

.fj-faq__item.is-open .fj-faq__answer {
    /* separación clara respecto a la pregunta (arriba) y a la línea
       divisoria del siguiente renglón (abajo) */
    padding-top: 6px;
    padding-bottom: 28px;
}

.fj-faq__answer p,
.fj-faq__answer ul {
    margin: 0 0 14px;
    color: #4a4f6a;
    font-size: 0.95rem;
    line-height: 1.6;
}

.fj-faq__answer ul {
    padding-left: 20px;
}

.fj-faq__answer li {
    margin-bottom: 8px;
}

.fj-faq__answer p:last-child,
.fj-faq__answer ul:last-child {
    margin-bottom: 0;
}

.fj-faq__answer a {
    color: var(--global-palette1, #fea900);
    font-weight: 600;
}

@media screen and (max-width: 719px) {
    .fj-faq__answer {
        padding-left: 24px;
    }
}