.paragraph--type--desplegable-faq {
    margin: 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 12px 0;
}

.paragraph--type--desplegable-faq details {
    transition: all 0.3s ease-out;
}

.paragraph--type--desplegable-faq details summary {
    --_fsize-max: 18;
    --_fsize-min: 16;
    --_color: var(--color-default);
    margin-bottom: 4px;
    transition: all 0.3s ease-out;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
}

.paragraph--type--desplegable-faq details summary:hover {
    --_color: var(--color-default);
}

.paragraph--type--desplegable-faq details summary .marker {
    --_fsize-max: 22;
    --_fsize-min: 22;
    --_color: var(--color-default);
    height: 30px;
    width: 30px;
    text-align: center;
    margin-right: 16px;
    background-color: var(--neutral-50);
    border-radius: 6px;
    transition: all 0.3s ease-out;
}

.paragraph--type--desplegable-faq details summary .marker::before {
    content: '+';
    display: inline-block;
    height: 30px;
    width: 30px;
}

.paragraph--type--desplegable-faq details summary:hover .marker {
    --_color: var(--primary);
}

.paragraph--type--desplegable-faq details .field--name-field-respuesta {
    margin-top: 25px;
}

.paragraph--type--desplegable-faq details .field--name-field-respuesta * {
    --_fsize-min: 14;
    --_fsize-max: 14;
}

.paragraph--type--desplegable-faq details[open] summary .marker {
    background-color: var(--primary);
    --_color: var(--white);
}

.paragraph--type--desplegable-faq details[open] summary .marker::before {
    content: '-';
}