.preguntas-frecuentes {

    .breadcrumb-custom {
        color: #333F48;
        font-size: 14px;
        font-weight: 500;
        text-align: left;
        margin: 36px 0 32px 0;
        font-family: 'neosanspro';

        a {
            border-bottom: none;
            font-weight: 300;
            color: #333F48;
        }
    }

    .view-header {
        min-height: 270px;
        background: #e6f0f6;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 32px;

        h1 {
            color: var(--color-02);
            font-size: 40px;
            font-weight: 500;
            font-style: normal;
            margin: 0;
        }
    }

    .view-filters {
        .bef-links-use-ajax.bef-links {
            ul {
                list-style: none;
                padding: 0;
                display: grid;
                grid-template-columns: repeat(5, 1fr);
                gap: 24px;
                margin-bottom: 68px;
                align-items: stretch;

                li {
                    display: flex;

                    a {
                        font-size: 16px;
                        font-weight: 600;
                        color: var(--color-02);
                        line-height: 26px;
                        text-decoration: none;
                        border-bottom: 0;
                        font-family: neosans;
                        border: 1px solid #D6D9DA;
                        padding: 16px 24px;
                        height: 100%;
                        display: flex;
                        align-items: center;

                        &.bef-link--selected {
                            color: var(--color-14);
                            border-color: #66A5CA;
                        }
                    }
                }
            }
        }

        .glide--swipeable {
            height: 100%;

            .glide__slides {
                padding-bottom: 30px;
                margin-bottom: 30px;
                align-items: stretch;
                gap: 12px;

            }

            .glide__slide {
                border: 1px solid #D6D9DA;
                padding: 16px 20px;
                height: auto;
                display: flex;
                align-items: center;
                justify-content: center;

                a {
                    border-bottom: 0;
                    color: #29323A;
                }

                &.glide__slide--active {
                    border-color: #66A5CA;
                    box-shadow: 4px 4px 4px 0px rgb(37 48 65 / 10%);

                    a {
                        color: #005486;
                    }
                }
            }

            .glide__bullets {
                bottom: 32px;

                .glide__bullet--active {
                    background-color: var(--color-11);
                }
            }
        }

    }

    .category-title {
        font-size: 24px;
        line-height: 30px;
        margin-bottom: 40px;
        color: #1F262B;
        font-weight: 500;
    }

    .view-answers {
        >.views-row {
            margin-bottom: 60px;
            display: flex;
            flex-direction: column;
            gap: 16px;


            .views-accordion-header.ui-accordion-header {
                display: flex;
                flex-direction: row-reverse;
                justify-content: space-between;
                background-color: var(--color-09);
                padding: 20px 24px;
                border: 0;
                margin: 0;

                .ui-accordion-header-icon {
                    background-image: url("data:image/svg+xml,%3Csvg width='16' height='9' viewBox='0 0 16 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.00033 8.5674C7.83966 8.5674 7.69011 8.54173 7.55166 8.4904C7.41322 8.43906 7.28155 8.35106 7.15666 8.2264L1.16433 2.23406C0.979884 2.0494 0.885439 1.81729 0.880995 1.53773C0.876773 1.2584 0.971217 1.02206 1.16433 0.828729C1.35766 0.635618 1.59188 0.539062 1.86699 0.539062C2.14211 0.539062 2.37633 0.635618 2.56966 0.828729L8.00033 6.25973L13.431 0.828729C13.6157 0.644285 13.8478 0.54984 14.1273 0.545396C14.4067 0.541174 14.643 0.635618 14.8363 0.828729C15.0294 1.02206 15.126 1.25629 15.126 1.5314C15.126 1.80651 15.0294 2.04073 14.8363 2.23406L8.844 8.2264C8.71911 8.35106 8.58744 8.43906 8.44899 8.4904C8.31055 8.54173 8.161 8.5674 8.00033 8.5674Z' fill='%231F262B'/%3E%3C/svg%3E%0A");
                    background-position: 0px 12px;
                    height: auto;
                    transition: transform 0.5s;
                }

                h3 {
                    font-weight: 600;
                    color: var(--color-02);
                    font-size: 20px;
                    line-height: 24px;
                    margin: 0;
                    font-family: neosans;
                    text-align: left;
                }

                &.ui-state-active {
                    background-color: var(--color-03);
                    padding: 20px 24px 0 24px;

                    .ui-accordion-header-icon {
                        background-position: 0px 8px;
                        height: auto;
                        transform: rotate(180deg);
                    }

                    h3 {
                        color: var(--color-14);
                    }
                }
            }

            .ui-accordion-content.ui-accordion-content-active {
                background-color: var(--color-03);
                padding: 7px 50px 15px 24px;
                height: auto !important;
                border: none;

                p,
                ul {
                    margin: 0;
                    font-size: 16px;
                    line-height: 26px;
                    font-family: neosans;
                    text-align: left;
                }
            }
        }

    }
}

@media (max-width: 992px) {
    .preguntas-frecuentes {
        .view-answers {
            padding: 0 32px;

            >.views-row {
                padding: 0 !important;

                .views-accordion-header.ui-accordion-header {
                    padding: 16px 24px;

                    h3 {
                        font-weight: 600;
                        font-size: 16px;
                        line-height: 24px;
                        text-align: left;
                        width: 90%;
                    }

                    &.ui-state-active {
                        .ui-accordion-header-icon {
                            background-position: 0px 30px;
                            width: 20px;
                        }

                        h3 {
                            text-align: left;
                        }
                    }

                    .ui-accordion-header-icon {
                        min-width: 16px;
                        background-position: 0px 12px;
                    }
                }
            }
        }
    }
}