.ciencia {
    .sec-tabs {
        &__con0 {
            padding-top: $spacing1 * .5;
            padding-bottom: $spacing1 * .5;
        }

        &__con1 {
            transform: translate3d(0px, 2rem, 1px);
            transition: transform $transitionDuration;

            &.in-view {
                transform: translate3d(0px, 0px, 1px);
            }
        }
    }

    .sec-panels .o_panel {
        overflow: clip;
    }

    .sec-des {
        &__con0 {
            display: flex;
            padding-bottom: $spacing1;
        }

        @include lg-wmin {

            &__text {
                flex: 0 0 57.5%;
                width: 57.5%;
                max-width: 57.5%;
            }

            &__samp {
                flex: 0 0 42.5%;
                width: 42.5%;
                max-width: 42.5%;
            }
        }

        @include xl-wmin {
            &__text {
                flex: 0 0 55%;
                width: 55%;
                max-width: 55%;
            }

            &__samp {
                flex: 0 0 45%;
                width: 45%;
                max-width: 45%;
            }
        }

        @include xxl-wmin {
            &__text {
                flex: 0 0 50%;
                width: 50%;
                max-width: 50%;
            }

            &__samp {
                flex: 0 0 50%;
                width: 50%;
                max-width: 50%;
            }
        }

        &__text,
        &__samp {
            transform: translate3d(0px, 2rem, 1px);
            opacity: 0;

            &.in-view {
                opacity: 1;
                transform: translate3d(0px, 0px, 1px);
                transition: transform $transitionDuration, opacity $transitionDuration;
            }
        }

        &__samp {
            &.in-view {
                transition-delay: $transitionDuration;
            }

            .figure {
                height: clamp(30rem, calc(15rem + 15vw + 15vh), min(70rem, 80vh));
                border-radius: 2rem;

                @include lg-wmin {
                    position: sticky;
                    top: calc(var(--headerHeight) + $spacing2);
                }
            }
        }

        &__hdr {
            margin-bottom: $spacing2 * 2;
        }

        &__acc {
            &-hdr {
                margin-bottom: $spacing2 * 2;
            }
        }
    }

    .sec-items {
        background-color: $accentClear3;

        &__con0 {
            padding-top: $spacing1;
            padding-bottom: $spacing1;
        }

        .sxs-cardscar {
            margin-top: $spacing1;
            --gap: clamp(.75rem, calc(.5rem + 1vw + 1vh), 4rem);

            @include lg-wmin {}
        }

        .sxs-ritcrd {
            --_thck: 20px;
        }
    }

    .sec-steps {
        &__con0 {
            padding-top: $spacing1;
            padding-bottom: $spacing1;
        }

        &__samp,
        &__text {
            @include lg-wmin {
                flex: 0 0 50%;
                width: 50%;
                max-width: 50%;
            }
        }

        &__des {
            margin: $spacing2 * 2 auto 0;
            text-align: center;

            @include xxl-wmin {
                max-width: 70%;
            }
        }

        .sxs-stabs {
            z-index: 1;
            margin-top: $spacing1 * .5;
        }

        &__con2 {
            margin-top: $spacing1 * .25;
        }

        &__samp-ite,
        &__text-ite {
            opacity: 0;
            transform: translate3d(0px, 2rem, 1px);

            &:not(.in-view) {
                pointer-events: none;
            }

            &.in-view {
                position: relative;
                z-index: 1;
                opacity: 1;
                transform: translate3d(0px, 0px, 1px);
                transition: transform $transitionDuration, opacity $transitionDuration;
            }
        }

        &__text-ite {
            &.in-view {
                transition-delay: $transitionDuration;
            }
        }

        &__samp {
            &-lis {
                overflow: hidden;
                /*height: clamp(30rem, calc(15rem + 15vw + 15vh), min(70rem, 80vh));*/
                border-radius: 2rem;

                @include lg-wmin {
                    position: sticky;
                    top: calc(var(--headerHeight) + $spacing2);
                }
            }

            &-ite {
                overflow: hidden;
                border-radius: 2rem;
            }
        }

        .sec-steps__text {

            &-con0 {
                display: flex;
                flex-direction: column;
                justify-content: center;
            }
        }
    }

    .sas-accs {
        .sxs-acc {
            opacity: 0;
            transform: translate3d(0, 2rem, 1px);
        }

        &.in-view .sxs-acc {
            opacity: 1;
            transform: translate3d(0, 0px, 0px);
            transition: opacity $transitionDuration, transform $transitionDuration;
            transition-delay: calc(200ms * var(--_idx) + 200ms);
        }
    }

    .sas-it {
        &:not(:last-child) {
            margin-bottom: $spacing2 * 2.5;
        }
    }

    .sas-ilis {
        flex: initial;

        &:not(:last-child) {
            margin-bottom: $spacing2 * 2;
        }

        &--v1 {

            &,
            .sas-ilis__ite {
                --sus-f-gtt: .4rem;
            }
        }

        &--v2 {

            &,
            .sas-ilis__ite {
                --sus-f-gtt: .25rem;
            }

            .sas-ilis__ite {
                @include xs-wmin {
                    flex: 0 0 50%;
                    width: 50%;
                    max-width: 50%;
                }

                @include md-wmin {
                    flex: 0 0 33.3333%;
                    width: 33.3333%;
                    max-width: 33.3333%;
                }

                @include lg-wmin {
                    flex: 0 0 50%;
                    width: 50%;
                    max-width: 50%;
                }

                @include xl-wmin {
                    flex: initial;
                    width: auto;
                    // display: flex;
                    // flex: 1 1 0;
                    // width: auto;
                    // aspect-ratio: 1;
                    // max-width: initial;
                    // max-width: 50%;
                    max-width: 33.33333%;
                }
            }

            .sxs-ritcrd__tit {
                @include lg-wmin {
                    font-size: $text-15;
                }

                @include xxl-wmin {
                    font-size: $text-17;
                }
            }
        }
    }
}