/* Yujju design system — preguntas frecuentes (`yj-faq`, migración M010).
   Índice de grupos (columna fija en escritorio, chips desplazables en móvil),
   preguntas en tarjetas blancas con borde 1px y cierre de contacto. */

.yj-ds .yj-faq {
    padding-bottom: var(--yj-section-y);
}
.yj-ds .yj-faq .yj-faq__title .elementor-heading-title {
    margin: 0 0 var(--yj-space-6);
    font-family: var(--yj-font-display);
    font-size: var(--yj-h2);
    font-weight: 500;
    line-height: var(--yj-leading-tight);
    color: var(--yj-ink);
}

/* ── Distribución: índice + grupos ───────────────────────────────────────── */
.yj-ds .yj-faq .yj-faq__layout {
    --gap: var(--yj-space-7);
    gap: var(--yj-space-7);
    align-items: flex-start;
    padding: 0;
}
/* El tema pone overflow-x:hidden en .wrapper-container: eso lo vuelve contenedor de scroll y
   anula el índice sticky. `clip` recorta igual sin crear scroll. */
.yj-ds .wrapper-container:has(.yj-faq) {
    overflow-x: clip;
}
.yj-ds .yj-faq .yj-faq__nav {
    flex: 0 0 240px;
    width: 240px;
    position: sticky;
    /* El header del tema no es fijo: el índice se pega casi al borde superior. */
    top: var(--yj-space-6);
    align-self: flex-start;
}
.yj-ds .yj-faq .yj-faq__groups {
    flex: 1 1 0;
    min-width: 0;
    gap: var(--yj-space-7);
    padding: 0;
}

/* Índice como lista de chips */
.yj-ds .yj-faq .yj-faq__nav .elementor-icon-list-items {
    display: flex;
    flex-direction: column;
    gap: var(--yj-space-1);
    margin: 0;
    padding: 0;
}
.yj-ds .yj-faq .yj-faq__nav .elementor-icon-list-item {
    margin: 0 !important;
    padding: 0 !important;
}
.yj-ds .yj-faq .yj-faq__nav .elementor-icon-list-item::after {
    display: none;
}
.yj-ds .yj-faq .yj-faq__nav .elementor-icon-list-item > a {
    display: block;
    width: 100%;
    padding: var(--yj-space-2) var(--yj-space-4);
    border-radius: var(--yj-radius-pill);
    font-size: var(--yj-text-sm);
    font-weight: 500;
    color: var(--yj-text);
    text-decoration: none;
    transition: background var(--yj-transition), color var(--yj-transition);
}
.yj-ds .yj-faq .yj-faq__nav .elementor-icon-list-icon {
    display: none;
}
.yj-ds .yj-faq .yj-faq__nav .elementor-icon-list-text {
    color: inherit;
    padding: 0;
}
.yj-ds .yj-faq .yj-faq__nav .elementor-icon-list-item > a:hover,
.yj-ds .yj-faq .yj-faq__nav .elementor-icon-list-item > a:focus-visible {
    background: var(--yj-blush);
    color: var(--yj-ink);
}

/* ── Grupos ──────────────────────────────────────────────────────────────── */
.yj-ds .yj-faq .yj-faq__group {
    gap: var(--yj-space-4);
    padding: 0;
    scroll-margin-top: var(--yj-space-6);
}
.yj-ds .yj-faq .yj-faq__group-title .elementor-heading-title {
    margin: 0;
    font-family: var(--yj-font-display);
    font-size: var(--yj-h3);
    font-weight: 500;
    color: var(--yj-ink);
}

/* Preguntas (widget toggle): tarjeta blanca, borde 1px, pregunta 16px */
.yj-ds .yj-faq .yj-faq__list .elementor-toggle {
    display: flex;
    flex-direction: column;
    gap: var(--yj-space-2);
}
.yj-ds .yj-faq .yj-faq__list .elementor-toggle-item {
    margin: 0 !important;
    background: var(--yj-white);
    border: var(--yj-border);
    border-radius: var(--yj-radius);
    overflow: hidden;
}
.yj-ds .yj-faq .yj-faq__list .elementor-tab-title {
    display: flex;
    align-items: center;
    gap: var(--yj-space-3);
    padding: var(--yj-space-4) var(--yj-space-5);
    border: 0 !important;
    background: transparent;
    cursor: pointer;
}
.yj-ds .yj-faq .yj-faq__list .elementor-toggle-title {
    flex: 1 1 auto;
    order: 1;
    font-family: var(--yj-font-body);
    font-size: var(--yj-text-md);
    font-weight: 500;
    line-height: var(--yj-leading-tight);
    color: var(--yj-ink);
    text-decoration: none;
}
.yj-ds .yj-faq .yj-faq__list .elementor-toggle-icon {
    order: 2;
    float: none;
    width: auto;
    color: var(--yj-muted);
}
.yj-ds .yj-faq .yj-faq__list .elementor-tab-title.elementor-active .elementor-toggle-title,
.yj-ds .yj-faq .yj-faq__list .elementor-tab-title:hover .elementor-toggle-title {
    color: var(--yj-primary-strong);
}
.yj-ds .yj-faq .yj-faq__list .elementor-tab-title:focus-visible {
    outline: 2px solid var(--yj-primary);
    outline-offset: -2px;
}
.yj-ds .yj-faq .yj-faq__list .elementor-tab-content {
    padding: 0 var(--yj-space-5) var(--yj-space-5);
    border: 0 !important;
    font-size: var(--yj-text-md);
    line-height: var(--yj-leading);
    color: var(--yj-text);
}
.yj-ds .yj-faq .yj-faq__list .elementor-tab-content p:last-child {
    margin-bottom: 0;
}

/* ── Cierre de contacto ──────────────────────────────────────────────────── */
.yj-ds .yj-faq .yj-faq__cta {
    align-items: center;
    gap: var(--yj-space-3);
    margin-top: var(--yj-space-8);
    padding: var(--yj-space-7) var(--yj-space-5);
    background: var(--yj-blush);
    border-radius: var(--yj-radius);
    text-align: center;
}
.yj-ds .yj-faq .yj-faq__cta-title .elementor-heading-title {
    margin: 0;
    font-family: var(--yj-font-display);
    font-size: var(--yj-h3);
    font-weight: 500;
    color: var(--yj-ink);
}
.yj-ds .yj-faq .yj-faq__cta-text p {
    max-width: 520px;
    margin: 0 auto;
    color: var(--yj-text);
}
.yj-ds .yj-faq .yj-faq__cta-actions {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--yj-space-3);
    margin-top: var(--yj-space-3);
    padding: 0;
}
.yj-ds .yj-faq .yj-faq__cta-actions > .elementor-widget {
    width: auto;
    margin: 0 !important;
}
.yj-ds .elementor .yj-faq .yj-faq__btn--secondary .elementor-button {
    color: var(--yj-ink) !important;
    background: transparent !important;
    border-color: var(--yj-ink) !important;
}
.yj-ds .elementor .yj-faq .yj-faq__btn--secondary .elementor-button:hover,
.yj-ds .elementor .yj-faq .yj-faq__btn--secondary .elementor-button:focus-visible {
    color: var(--yj-white) !important;
    background: var(--yj-ink) !important;
}

/* ── Móvil: índice en chips horizontales ─────────────────────────────────── */
@media (max-width: 991px) {
    .yj-ds .yj-faq .yj-faq__layout {
        flex-direction: column;
        gap: var(--yj-space-5);
    }
    .yj-ds .yj-faq .yj-faq__nav {
        position: static;
        flex: none;
        width: 100%;
    }
    .yj-ds .yj-faq .yj-faq__nav .elementor-icon-list-items {
        flex-direction: row;
        gap: var(--yj-space-2);
        overflow-x: auto;
        padding-bottom: var(--yj-space-2);
        scrollbar-width: none;
    }
    .yj-ds .yj-faq .yj-faq__nav .elementor-icon-list-items::-webkit-scrollbar {
        display: none;
    }
    .yj-ds .yj-faq .yj-faq__nav .elementor-icon-list-item > a {
        white-space: nowrap;
        border: var(--yj-border);
    }
    .yj-ds .yj-faq .yj-faq__group {
        scroll-margin-top: var(--yj-space-8);
    }
}
@media (max-width: 767px) {
    .yj-ds .yj-faq .yj-faq__list .elementor-tab-title {
        padding: var(--yj-space-4);
    }
    .yj-ds .yj-faq .yj-faq__list .elementor-tab-content {
        padding: 0 var(--yj-space-4) var(--yj-space-4);
    }
}