html {
    scroll-behavior: smooth;
}

.innovation-email {
    display: flex;
    flex-direction: row-reverse;
    .box {
        display: flex;
        flex-direction: column;
        padding: 1rem;
        border: 1px solid #306194;
        border-radius: 4px;
        margin-right: 1rem;

        @media (max-width: 768px) {
            margin-right: 0;
        }

        p {
            font-size: 18px;
            margin-bottom: 0;
        }
    }
}

.js .tabbed--vertical.innovation-tabs {

    .tab-menu>li, .tab-panel {
        &.cancer { --group-color: #DE683A; }
        &.substancies { --group-color: #CF243B; }
        &.ossies { --group-color: #B33DDB; }
        &.immunologia { --group-color: #2F7CD6; }
        &.cardiovasculars { --group-color: #DA3583; }
        &.hepatiques { --group-color: #79838F; }
        &.infeccioses { --group-color: #879600; }
        &.neurociencies { --group-color: #0A99BE; }
        &.comunitaria { --group-color: #038B6C; }
    }

    padding-top: 3rem;

    .tab-menu {
        background: none;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 1rem;

        @media (max-width: 768px) {
            gap: 0;
        }

        flex: 0 0 30%;

        li {
            margin: 0;

            a {
                display: flex;
                gap: 1rem;

                background: none;
                padding: 1rem;
                border: none;
                border-radius: 4px;
                font-size: 13px;
                color: #000;

                .tab-icon {
                    width: 24px;
                    flex: 0 0 24px;
                }

                &[aria-selected], &:hover, &:focus {
                    color: #fff;
                    background-color: var(--group-color);
                    img {
                        filter: brightness(0) invert(1);
                    }
                    &::after {
                        content: none;
                    }

                }
            }
        }
    }

    .tab-panel {
        flex-grow: 1;

        .column {
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }

        .grup-title {
            h2 {
                font-size: 28px;
                font-weight: 700;
                text-wrap: balance;

                @media (max-width: 768px) {
                    font-size: 22px;
                }
            }
        }

        .collapsible {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            .group {
                padding-left: 1.5rem;
                padding-right: 1.5rem;
                border: 1px solid #306194;
                border-radius: 4px;

                .collapsible__title {
                    button {
                        border: none;
                        svg {
                            width: 18px;
                            height: 18px;
                        }

                        @media (max-width: 768px) {
                            font-size: 18px;
                        }
                    }

                    &+div {
                        border: none;
                        padding-left: 0;
                        padding-right: 0;

                        > * {
                            padding-left: 4.5rem;
                            padding-right: 1rem;

                            @media (max-width: 768px) {
                                padding-left: 1rem;
                            }
                        }

                        .media {
                            padding: 0;
                        }
                    }
                }

                .media {
                    display: flex;
                    align-items: center;
                    gap: 0.6rem;

                    .media__img {
                        width: 60px;
                        height: 60px;
                        flex-grow: unset;
                        flex-basis: unset;
                        border-radius: 100px;
                        overflow: hidden;
                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .media__content * {
                        margin: 0;
                    }
                }

                ul li {
                    padding-left: 36px;

                    &:before {
                        background: var(--group-color);
                        width: 20px;
                        height: 4px;
                    }

                }
            }
        }
    }
}