/* ─── 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 {
    background: #dde1ee;
}

.fj-faq__title-inner {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Eyebrow: ahora que el texto grande es distinto por página (ej. "Todo lo
   que debes de saber antes de aplicar"), esta etiqueta pequeña arriba deja
   claro que la sección sigue siendo el acordeón de FAQ. */
.fj-faq__eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--global-palette2, #0077b6);
    line-height: 1.3;
}

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

/* Subtítulo: el texto que antes era el título de este acordeón (ej. "Aquí
   todo lo que debes de saber antes de dar el siguiente paso"), ahora en
   texto normal debajo de "Preguntas Frecuentes". */
.fj-faq__title-subtext {
    font-size: 0.95rem;
    font-weight: 400;
    color: #4a4f6a;
    line-height: 1.4;
    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::before {
    transform: translate(-50%, -30%) rotate(-135deg);
}

.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;
}

/* Mismo hover del ícono que el botón-título (.fj-faq__title). */
.fj-faq__question:hover .fj-faq__icon,
.fj-faq__question:focus-visible .fj-faq__icon {
    background: #dde1ee;
}

.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;
}

/* Ícono: chevron dentro de un círculo gris claro permanente (2026-10-05,
   antes +/−). El círculo se puso en sept. porque el ícono solo, sin fondo,
   no se detectaba como clicable; el hover solo oscurece un poco el círculo.
   Cerrado = chevron hacia abajo, abierto = gira hacia arriba. El botón de
   "subir" de Kadence usa a propósito otra forma (flecha con palito en
   círculo azul marino) para que no se confundan. */
.fj-faq__icon {
    position: relative;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    box-sizing: border-box;
    border-radius: 50%;
    background: #eef0f7;
    border: 1px solid #d8dbe8;
    transition: background-color 0.15s ease;
}

/* El chevron es un cuadrado con solo 2 bordes, girado 45°; se corre un poco
   arriba/abajo para que se vea centrado ópticamente en el círculo. */
.fj-faq__icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    border-right: 2.5px solid #1A1860;
    border-bottom: 2.5px solid #1A1860;
    border-radius: 1px;
    transform: translate(-50%, -70%) rotate(45deg);
    transition: transform 0.2s ease;
}

.fj-faq__item.is-open .fj-faq__icon::before {
    transform: translate(-50%, -30%) rotate(-135deg);
}

.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;
    }
}

/* Encabezado suelto (no es un acordeón, no tiene ícono) que precede al
   formulario en /aplicar-a-una-beca/ — misma tipografía/énfasis que
   .fj-faq__title-text para que se sienta parte de la misma familia visual. */
.fj-form-heading,
.single-content .fj-form-heading { /* gana a los márgenes de h2 de Kadence */
    max-width: 700px;
    margin: 0 auto 32px; /* 32px = lo que de verdad medía cuando era <p> (Kadence le ganaba al 20px) */
    font-family: var(--global-body-font-family, 'Manrope', sans-serif);
    font-size: 1.4rem;
    font-weight: 800;
    color: #1A1860;
    line-height: 1.3;
    text-transform: none;
}

/* Envoltorio semántico <h2>/<h3> de los botones del acordeón: neutraliza los
   estilos globales de encabezado de Kadence para que no cambie nada visual. */
.fj-faq .fj-faq__heading {
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-transform: none;
    color: inherit;
    font-family: var(--global-body-font-family, 'Manrope', sans-serif);
}