/**
 * Componente común: faq
 *
 * Acordeón accesible de preguntas frecuentes. Usado en T-08 servicio.
 *
 * Clases raíz del componente:
 *   .pf-faq                    bloque
 *   .pf-faq__title             título del bloque
 *   .pf-faq__list/__item       lista de preguntas
 *   .pf-faq__question          encabezado que envuelve al disparador
 *   .pf-faq__trigger           botón, lleva aria-expanded
 *   .pf-faq__question-text     texto de la pregunta
 *   .pf-faq__icon              indicador de abierto/cerrado
 *   .pf-faq__answer            panel, role="region"
 *   .pf-faq__answer-inner      contenido HTML de la respuesta
 *
 * TOKENS
 *   Esta hoja consume los nombres canónicos de style.css §1 y NO lleva literal
 *   de respaldo en ningún `var()`. El respaldo era justo lo que enmascaraba un
 *   token ausente: si aquí aparece un color inesperado, el token no existe y
 *   hay que arreglarlo en style.css, no aquí. Ver issue #60. La duración de la
 *   transición del icono es `--pf-transition`, no un literal (tanda 11).
 *
 * SIN JAVASCRIPT LOS PANELES QUEDAN ABIERTOS. El cierre lo aplica script.js con
 * el atributo `hidden`; este CSS nunca oculta la respuesta por su cuenta, para
 * que el contenido no dependa del JS.
 *
 * @package pfuture
 * @module servicios
 */

.pf-faq {
    margin: 0;
}

.pf-faq__title {
    margin: 0 0 var(--pf-space-md);
    font-size: var(--pf-text-xl);
}

.pf-faq__list {
    border-top: 1px solid var(--pf-color-border);
}

.pf-faq__item {
    border-bottom: 1px solid var(--pf-color-border);
}

.pf-faq__question {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}

.pf-faq__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pf-space-md);
    width: 100%;
    padding: var(--pf-space-md) 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: var(--pf-text-base);
    font-weight: var(--pf-weight-bold);
    text-align: left;
    cursor: pointer;
}

.pf-faq__trigger:focus-visible {
    outline: 2px solid var(--pf-color-focus);
    outline-offset: 2px;
}

.pf-faq__trigger:hover .pf-faq__question-text {
    color: var(--pf-color-brand-strong);
}

.pf-faq__icon {
    position: relative;
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
}

.pf-faq__icon::before,
.pf-faq__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    transform: translateY(-50%);
    transition: transform var(--pf-transition), opacity var(--pf-transition);
}

.pf-faq__icon::after {
    transform: translateY(-50%) rotate(90deg);
}

/* Abierto: el signo «+» se convierte en «−». */
.pf-faq__trigger[aria-expanded="true"] .pf-faq__icon::after {
    transform: translateY(-50%) rotate(0deg);
    opacity: 0;
}

.pf-faq__answer[hidden] {
    display: none;
}

.pf-faq__answer-inner {
    padding: 0 0 var(--pf-space-lg);
    max-width: var(--pf-measure);
    color: var(--pf-color-text-soft);
    line-height: var(--pf-leading-loose);
}

.pf-faq__answer-inner > :first-child {
    margin-top: 0;
}

.pf-faq__answer-inner > :last-child {
    margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
    .pf-faq__icon::before,
    .pf-faq__icon::after {
        transition: none;
    }
}