.header-submenu {
    background-color: var(--color-background);
    padding: 40px 70px;

    @media (--viewport-ms-max) {
        padding: 15px 20px; /* old (para la refactorización del header se ha modificado CA. R. ) padding: 0 0 30px 20px;*/
    }

    .hidden-xs-ms {

        /* Este estilo debe ser sustituido por js (CA.R.) */
        @media (--viewport-ms-max) {
            display: none;
        }
    }

    &>.row>.col {
        display: flex;
        flex-direction: row;

        @media (--viewport-ms-max) {
            flex-direction: column;
        }

        .block:first-child {
            width: 69%;
            padding-right: 40px;

            @media (--viewport-md-max) {
                width: 63%;
            }

            @media (--viewport-ms-max) {
                width: 100%;
            }

            .header-submenu__main-list {
                &-item {
                    width: calc(50% - 10px);

                    @media (--viewport-ms-max) {
                        width: 100%;
                    }
                }
            }
        }

        .block:only-child {
            width: 100%;
            padding-right: 0;

            .header-submenu__main-list {
                &-item {
                    width: calc(33.3% - 13.3px);

                    @media (--viewport-ms-max) {
                        width: 100%;
                    }
                }
            }
        }
    }

    &__main {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        &-list {
            display: flex;
            flex-wrap: wrap;
            row-gap: 40px;
            column-gap: 20px;
            width: 100%;

            @media (--viewport-ms-max) {
                flex-direction: column;
                grid-row-gap: 24px;
            }

            &-item {
                /*width: calc(33.3% - 13.3px);*/

                &-tile {
                    display: flex;
                    flex-direction: column;
                    row-gap: 8px;

                    &-icon {line-height: 0;}

                    &-link {
                        a.link {
                            color: var(--color-text-link-secondary);
                            text-decoration: underline;

                            span {
                                display: inline;
                            }

                            @media (--viewport-ms-max) {
                                font-family: 'Jornada Sans Book';
                                color: var(--color-text-link-primary);
                                text-decoration: none;
                                font-size: 16px;
                                line-height: 24px;
                                /* porque necesitamos que un link bodycopy-s se vea bodycopy-m en mobile  (CA. R.)*/
                            }
                        }
                    }

                }
            }

            &-wrap {
                width: calc(33.3% - 13.3px);
                flex-grow: 1;


                @media (--viewport-ms-max) {
                    width: auto;
                }

                &-item {
                    .caption-label {
                        color: var(--color-text-accent);
                        margin-bottom: 8px;
                        @media (--viewport-ms-max) {
                            font-family: 'Jornada Sans Book';
                            text-transform: none;
                            letter-spacing: normal;
                            font-size: 16px;
                            line-height: 24px;
                            /* porque necesitamos que un link bodycopy-s se vea bodycopy-m en mobile  (CA. R.)*/
                        }
                    }

                    &-subitem {
                        margin-top: 16px;

                        &-link {
                            .icon {
                                @media (--viewport-ms-max) {
                                    display: none;
                                    /* Este estilo sería aconsejable sustituirlo por js (CA.R.) */
                                }
                            }
                        }
                    }
                }
            }
        }

        &-link-optional {
            margin-top: 40px;
            align-self: flex-end;

            .icon {
                fill: var(--color-icon);
            }

            @media (--viewport-ms-max) {
                margin-top: 24px;
                align-self: flex-start;

                .link {
                    padding: 0;

                    .icon {
                        display: none;
                    }
                }
            }
        }
    }

    &__sidebar {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 31%;

        @media (--viewport-md-max) {
            width: 37%;
        }

        padding-left: 40px;
        border-left: solid 1px var(--color-border);

        @media (--viewport-ms-max) {
            width: 100%;
            padding-left: 0;
            border: 0;
        }

        &-text {}

        &-link-optional {
            margin-top: 40px;
            align-self: flex-start;

            .icon {
                fill: var(--color-icon);
            }

            @media (--viewport-ms-max) {
                margin-top: 24px;
                align-self: flex-start;
                margin-bottom: 14px;

                .link {
                    padding: 0;

                    .icon {
                        display: none;
                    }
                }
            }
        }
    }
}