.slick-list,
.slick-slider,
.slick-track {
    display: block;
    position: relative
}

.slick-loading .slick-slide,
.slick-loading .slick-track {
    visibility: hidden
}

#sobre #lab .common-limiter,
#sobre #numbers .common-limiter {
    max-width: calc(1960px - 700px);
    padding: 0 20px
}

.slick-slider {
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent
}

.slick-list {
    overflow: hidden;
    margin: 0;
    padding: 0
}

.slick-list:focus {
    outline: 0
}

.slick-list.dragging {
    cursor: pointer;
    cursor: hand
}

.slick-slider .slick-list,
.slick-slider .slick-track {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.slick-track {
    left: 0;
    top: 0
}

.slick-track:after,
.slick-track:before {
    content: "";
    display: table
}

.slick-track:after {
    clear: both
}

.slick-slide {
    float: left;
    height: 100%;
    min-height: 1px;
    display: none
}

[dir=rtl] .slick-slide {
    float: right
}

.slick-slide img {
    display: block
}

.slick-slide.slick-loading img {
    display: none
}

.slick-slide.dragging img {
    pointer-events: none
}

.slick-initialized .slick-slide {
    display: block
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent
}

.slick-arrow.slick-hidden {
    display: none
}

#sobre {
    background-color: #FFF
}

#sobre #main-banner {
    height: 80vh;
    max-height: 700px;
    position: relative;
    display: flex;
    align-items: center
}

#sobre #main-banner .bg {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0
}

#sobre #main-banner .common-limiter {
    max-width: calc(1960px - 700px);
    padding: 0 20px
}

#sobre #main-banner .common-limiter .content {
    padding-top: 55px;
    margin-left: auto;
    width: 440px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    flex-direction: column
}

#sobre #main-banner .common-limiter .content .title {
    text-align: left;
    font: normal normal normal 50px/24px proxima-nova;
    letter-spacing: 1px;
    color: #FFF
}

#sobre #main-banner .common-limiter .content .descr {
    margin-top: 30px;
    text-align: left;
    font: normal normal normal 20px/24px proxima-nova;
    letter-spacing: .4px;
    color: #FFF
}

#sobre #numbers .common-limiter {
    overflow: visible
}

#sobre #numbers .common-limiter .content {
    padding: 120px 0 100px
}

#sobre #numbers .common-limiter .content .numbers {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px
}

#sobre #numbers .common-limiter .content .numbers>.number {
    max-width: 250px
}

#sobre #numbers .common-limiter .content .numbers>.number>.number {
    position: relative;
    width: fit-content;
    margin: 0 auto;
    display: block;
    transition: .5s
}

#sobre #numbers .common-limiter .content .numbers>.number>.number .value {
    position: absolute;
    left: -33px;
    top: -2px;
    text-align: center;
    font: normal normal bold 60px/40px proxima-nova;
    letter-spacing: 1.8px;
    color: #4D4D4D
}

#sobre #numbers .common-limiter .content .numbers>.number>.number .label {
    text-align: center;
    font: normal normal bold 70px/70px proxima-nova;
    letter-spacing: 1.8px;
    color: #4D4D4D;
    display: block
}

#sobre #numbers .common-limiter .content .numbers>.number .subtitle {
    text-align: center;
    font: normal normal bold 28px/40px proxima-nova;
    letter-spacing: .6px;
    color: #4D4D4D;
    text-transform: uppercase;
    display: block;
    transition: .5s
}

#sobre #numbers .common-limiter .content .numbers>.number .nps-extra {
    width: 220px;
    height: 45px;
    display: block;
    position: relative
}

#sobre #numbers .common-limiter .content .numbers>.number .nps-extra p {
    text-align: center;
    font: normal normal normal 14px/17px proxima-nova;
    letter-spacing: -.14px;
    color: #4D4D4D;
    position: absolute;
    width: 220px
}

#sobre #numbers .common-limiter .content .numbers .sep {
    border-left: 5px solid #FFC20E;
    height: 100px;
    display: block
}

#sobre #numbers .common-limiter .content .numbers .sep:last-child {
    display: none
}

#sobre #gallery .swiper-gallery .swiper-wrapper .item img {
    width: 100%;
    height: 400px;
    object-fit: cover
}

#sobre #lab .common-limiter .content {
    padding: 80px 0
}

#sobre #lab .common-limiter .content .infos {
    border-left: 5px solid #FFC20E;
    padding-left: 40px;
    margin-bottom: 80px
}

#sobre #lab .common-limiter .content .infos .title {
    text-align: left;
    font: normal normal bold 30px/23px proxima-nova;
    letter-spacing: .6px;
    color: #4D4D4D
}

#sobre #lab .common-limiter .content .infos .descr {
    margin-top: 30px;
    margin-right: auto;
    max-width: 720px;
    display: block
}

#sobre #lab .common-limiter .content .infos .descr p {
    text-align: left;
    font: normal normal normal 18px/23px proxima-nova;
    letter-spacing: .36px;
    color: #4D4D4D
}

#sobre #lab .common-limiter .content .gallery {
    width: 100%;
    display: flex;
    gap: 33px
}

#sobre #lab .common-limiter .content .gallery .item img {
    height: 500px;
    width: 100%;
    object-fit: cover
}

#sobre #catalog {
    background: no-repeat padding-box #EDEDED;
    position: relative
}

#sobre #catalog .bg {
    position: absolute;
    left: 116px;
    top: 0;
    height: 100%;
    width: 50vw;
    object-fit: cover
}

#sobre #catalog .common-limiter {
    max-width: calc(1960px - 700px);
    padding: 0 20px
}

#sobre #catalog .common-limiter .content {
    padding: 140px 0;
    max-width: 500px;
    margin-left: auto
}

#sobre #catalog .common-limiter .content .infos {
    border-left: 5px solid #FFC20E;
    padding-left: 30px;
    margin-bottom: 80px
}

#sobre #catalog .common-limiter .content .infos .title {
    text-align: left;
    font: normal normal bold 30px/35px proxima-nova;
    letter-spacing: .6px;
    color: #4D4D4D
}

#sobre #catalog .common-limiter .content .infos .descr {
    margin-top: 30px;
    margin-right: auto;
    max-width: 720px;
    display: block
}

#sobre #catalog .common-limiter .content .infos .descr p {
    text-align: left;
    font: normal normal normal 18px/23px proxima-nova;
    letter-spacing: .36px;
    color: #4D4D4D
}

#sobre #catalog .common-limiter .content .infos .link {
    margin-top: 40px;
    margin-right: auto;
    width: fit-content;
    padding: 7px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #4D4D4D;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease
}

#sobre #catalog .common-limiter .content .infos .link::after {
    content: "";
    position: absolute;
    top: -30%;
    left: -60%;
    width: 40%;
    height: 160%;
    transform: rotate(18deg);
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .35) 50%, rgba(255, 255, 255, 0) 100%);
    transition: left .55s ease;
    pointer-events: none
}

#sobre #catalog .common-limiter .content .infos .link:hover {
    transform: translateY(-2px);
    border-color: #FFC20E;
    box-shadow: 0 16px 50px rgba(0, 0, 0, .28)
}

#sobre #catalog .common-limiter .content .infos .link:hover::after {
    left: 120%
}

#sobre #catalog .common-limiter .content .infos .link:active {
    transform: translateY(0)
}

#sobre #catalog .common-limiter .content .infos .link:focus-visible {
    outline: #FFC20E solid 2px;
    outline-offset: 4px
}

#sobre #catalog .common-limiter .content .infos .link span {
    text-align: left;
    font: normal normal 300 18px/23px proxima-nova;
    letter-spacing: .36px;
    color: #4D4D4D;
    text-transform: uppercase
}

#sobre #blog {
    overflow: hidden
}

#sobre #blog .common-limiter {
    width: 100%;
    max-width: calc(1960px - 700px);
    padding: 80px 20px 227px;
    position: relative;
    z-index: 2
}

#sobre #blog .common-limiter .content {
    padding-left: 30px;
    border-left: 5px solid #FFC20E
}

#sobre #blog .common-limiter .content .title {
    max-width: 432px;
    display: block;
    text-align: left;
    font: normal normal bold 30px/35px proxima-nova;
    letter-spacing: .6px;
    color: #4D4D4D;
    text-transform: uppercase
}

#sobre #blog .common-limiter .content .descr {
    margin-top: 30px;
    max-width: 432px;
    display: block
}

#sobre #blog .common-limiter .content .descr p {
    text-align: left;
    font: normal normal normal 18px/23px proxima-nova;
    letter-spacing: .36px;
    color: #4D4D4D
}

#sobre #blog .common-limiter .content .link {
    margin-top: 40px;
    margin-right: auto;
    width: fit-content;
    padding: 7px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #4D4D4D;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease
}

#sobre #blog .common-limiter .content .link::after {
    content: "";
    position: absolute;
    top: -30%;
    left: -60%;
    width: 40%;
    height: 160%;
    transform: rotate(18deg);
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .35) 50%, rgba(255, 255, 255, 0) 100%);
    transition: left .55s ease;
    pointer-events: none
}

#sobre #blog .common-limiter .content .link:hover {
    transform: translateY(-2px);
    border-color: #FFC20E;
    box-shadow: 0 16px 50px rgba(0, 0, 0, .28)
}

#sobre #blog .common-limiter .content .link:hover::after {
    left: 120%
}

#sobre #blog .common-limiter .content .link:active {
    transform: translateY(0)
}

#sobre #blog .common-limiter .content .link:focus-visible {
    outline: #FFC20E solid 2px;
    outline-offset: 4px
}

#sobre #blog .common-limiter .content .link span {
    text-align: left;
    font: normal normal 300 18px/23px proxima-nova;
    letter-spacing: .36px;
    color: #4D4D4D;
    text-transform: uppercase
}

#sobre #blog .abs-img {
    position: absolute;
    bottom: 0;
    right: 170px;
    height: 700px;
    object-fit: cover;
    cursor: pointer;
    transition: .5s;
    z-index: 3
}

#sobre #blog .abs-img:hover {
    transform: scale(1.1)
}

.swiper-pagination {
    bottom: 20px !important
}

.swiper-pagination .swiper-pagination-bullet {
    width: 20px;
    height: 20px;
    border: 1px solid #FFC20E;
    background-color: transparent;
    opacity: 1;
    position: relative;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease
}

.swiper-pagination .swiper-pagination-bullet:hover {
    transform: scale(1.08);
    border-color: #FFF;
    box-shadow: 0 8px 26px rgba(0, 0, 0, .25)
}

.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: no-repeat padding-box #FFF;
    border: 1px solid #707070;
    animation: bulletPulse 1.8s ease-in-out infinite
}

.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .85);
    transform: scale(1);
    animation: bulletFill .65s ease
}

.swiper-button-next,
.swiper-button-prev {
    width: 56px !important;
    height: 56px !important;
    border-radius: 999px !important;
    border: 0 !important;
    background: rgba(0, 0, 0, .2) !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, .25) !important;
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease, opacity .2s ease !important;
    opacity: 1 !important
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    transform: scale(1.06) !important;
    background: rgba(0, 0, 0, .32) !important;
    box-shadow: 0 18px 55px rgba(0, 0, 0, .35) !important;
    opacity: 1 !important
}

.swiper-button-next:active,
.swiper-button-prev:active {
    transform: scale(1.02) !important
}

.swiper-button-next:focus-visible,
.swiper-button-prev:focus-visible {
    outline: #FFC20E solid 2px !important;
    outline-offset: 4px !important;
    border-radius: 999px !important
}

.swiper-button-next::after,
.swiper-button-prev::after {
    color: #fff !important;
    font-size: 18px !important
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
    opacity: 0 !important
}

.swiper-button-prev,
.swiper-rtl .swiper-button-next {
    left: 10vw !important;
    right: auto !important
}

.swiper-button-next,
.swiper-rtl .swiper-button-prev {
    right: 10vw !important;
    left: auto !important
}

@keyframes bulletPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 194, 14, 0)
    }

    40% {
        box-shadow: 0 0 0 10px rgba(255, 194, 14, .22)
    }

    100% {
        box-shadow: 0 0 0 18px rgba(255, 194, 14, 0)
    }
}

@keyframes bulletFill {
    0% {
        transform: scale(.6);
        opacity: 0
    }

    100% {
        transform: scale(1);
        opacity: 1
    }
}

@media (prefers-reduced-motion:reduce) {

    .bg,
    .content .descr,
    .content .link,
    .content .title,
    .swiper-button-next,
    .swiper-button-prev,
    .swiper-pagination-bullet {
        transition: none !important;
        animation: none !important
    }
}

@media (max-width:1400px) {

    #sobre #main-banner .common-limiter,
    #sobre #numbers .common-limiter {
        max-width: 100%;
        padding: 0 30px
    }

    #sobre #main-banner {
        height: 72vh;
        max-height: 620px
    }

    #sobre #main-banner .common-limiter .content {
        width: 420px
    }

    #sobre #main-banner .common-limiter .content .title {
        font: normal normal normal 42px/48px proxima-nova
    }

    #sobre #main-banner .common-limiter .content .descr {
        margin-top: 24px;
        font: normal normal normal 18px/24px proxima-nova
    }

    #sobre #numbers .common-limiter .content {
        padding: 90px 0 80px
    }

    #sobre #numbers .common-limiter .content .numbers {
        gap: 38px
    }

    #sobre #numbers .common-limiter .content .numbers>.number {
        max-width: 220px
    }

    #sobre #numbers .common-limiter .content .numbers>.number>.number .value {
        font: normal normal bold 50px/34px proxima-nova;
        left: -28px;
        top: -2px
    }

    #sobre #numbers .common-limiter .content .numbers>.number>.number .label {
        font: normal normal bold 58px/58px proxima-nova
    }

    #sobre #numbers .common-limiter .content .numbers>.number .subtitle {
        font: normal normal bold 24px/34px proxima-nova
    }

    #sobre #numbers .common-limiter .content .numbers>.number .nps-extra,
    #sobre #numbers .common-limiter .content .numbers>.number .nps-extra p {
        width: 200px
    }

    #sobre #numbers .common-limiter .content .numbers .sep {
        height: 82px
    }

    #sobre #gallery .swiper-gallery .swiper-wrapper .item img {
        height: 360px
    }

    #sobre #lab .common-limiter {
        max-width: 100%;
        padding: 0 30px
    }

    #sobre #lab .common-limiter .content {
        padding: 70px 0
    }

    #sobre #lab .common-limiter .content .infos {
        margin-bottom: 60px
    }

    #sobre #lab .common-limiter .content .infos .title {
        font: normal normal bold 28px/32px proxima-nova
    }

    #sobre #lab .common-limiter .content .infos .descr {
        margin-top: 24px
    }

    #sobre #lab .common-limiter .content .infos .descr p {
        font: normal normal normal 17px/23px proxima-nova
    }

    #sobre #lab .common-limiter .content .gallery {
        gap: 24px;
        justify-content: space-between
    }

    #sobre #catalog .bg {
        left: 40px;
        width: 48vw
    }

    #sobre #catalog .common-limiter {
        max-width: 100%;
        padding: 0 30px
    }

    #sobre #catalog .common-limiter .content {
        padding: 100px 0;
        max-width: 460px
    }

    #sobre #catalog .common-limiter .content .infos {
        margin-bottom: 0
    }

    #sobre #catalog .common-limiter .content .infos .title {
        font: normal normal bold 28px/33px proxima-nova
    }

    #sobre #catalog .common-limiter .content .infos .descr {
        margin-top: 24px
    }

    #sobre #catalog .common-limiter .content .infos .descr p {
        font: normal normal normal 17px/23px proxima-nova
    }

    #sobre #catalog .common-limiter .content .infos .link {
        margin-top: 32px
    }

    #sobre #catalog .common-limiter .content .infos .link span {
        font: normal normal 300 17px/22px proxima-nova
    }

    #sobre #blog .common-limiter {
        max-width: 100%;
        padding: 70px 30px 180px
    }

    #sobre #blog .common-limiter .content .title {
        font: normal normal bold 28px/33px proxima-nova
    }

    #sobre #blog .common-limiter .content .descr {
        margin-top: 24px
    }

    #sobre #blog .common-limiter .content .descr p {
        font: normal normal normal 17px/23px proxima-nova
    }

    #sobre #blog .common-limiter .content .link {
        margin-top: 32px
    }

    #sobre #blog .common-limiter .content .link span {
        font: normal normal 300 17px/22px proxima-nova
    }

    #sobre #blog .abs-img {
        right: 60px;
        height: 560px
    }

    .swiper-button-prev,
    .swiper-rtl .swiper-button-next {
        left: 4vw !important
    }

    .swiper-button-next,
    .swiper-rtl .swiper-button-prev {
        right: 4vw !important
    }
}

@media (max-width:1200px) {

    #sobre #main-banner .common-limiter,
    #sobre #numbers .common-limiter {
        padding: 0 24px
    }

    #sobre #main-banner {
        height: 64vh;
        max-height: 560px
    }

    #sobre #main-banner .common-limiter .content {
        width: 380px
    }

    #sobre #main-banner .common-limiter .content .title {
        font: normal normal normal 36px/42px proxima-nova
    }

    #sobre #main-banner .common-limiter .content .descr {
        font: normal normal normal 16px/22px proxima-nova
    }

    #sobre #numbers .common-limiter .content {
        padding: 70px 0
    }

    #sobre #numbers .common-limiter .content .numbers {
        gap: 26px;
        flex-wrap: wrap
    }

    #sobre #numbers .common-limiter .content .numbers>.number {
        max-width: 200px
    }

    #sobre #numbers .common-limiter .content .numbers>.number>.number .value {
        font: normal normal bold 42px/30px proxima-nova;
        left: -22px
    }

    #sobre #numbers .common-limiter .content .numbers>.number>.number .label {
        font: normal normal bold 48px/50px proxima-nova
    }

    #sobre #numbers .common-limiter .content .numbers>.number .subtitle {
        font: normal normal bold 20px/28px proxima-nova
    }

    #sobre #numbers .common-limiter .content .numbers>.number .nps-extra {
        width: 180px;
        margin: 0 auto
    }

    #sobre #numbers .common-limiter .content .numbers>.number .nps-extra p {
        width: 180px;
        font: normal normal normal 13px/16px proxima-nova
    }

    #sobre #numbers .common-limiter .content .numbers .sep {
        height: 64px;
        border-left-width: 4px
    }

    #sobre #gallery .swiper-gallery .swiper-wrapper .item img {
        height: 320px
    }

    #sobre #lab .common-limiter {
        padding: 0 24px
    }

    #sobre #lab .common-limiter .content {
        padding: 60px 0
    }

    #sobre #lab .common-limiter .content .infos {
        padding-left: 28px;
        margin-bottom: 42px
    }

    #sobre #lab .common-limiter .content .infos .title {
        font: normal normal bold 26px/30px proxima-nova
    }

    #sobre #lab .common-limiter .content .infos .descr p {
        font: normal normal normal 16px/22px proxima-nova
    }

    #sobre #lab .common-limiter .content .gallery {
        gap: 18px
    }

    #sobre #catalog .bg {
        left: 24px;
        width: 46vw
    }

    #sobre #catalog .common-limiter {
        padding: 0 24px
    }

    #sobre #catalog .common-limiter .content {
        padding: 80px 0;
        max-width: 410px
    }

    #sobre #catalog .common-limiter .content .infos {
        padding-left: 24px
    }

    #sobre #catalog .common-limiter .content .infos .title {
        font: normal normal bold 26px/30px proxima-nova
    }

    #sobre #catalog .common-limiter .content .infos .descr p {
        font: normal normal normal 16px/22px proxima-nova
    }

    #sobre #catalog .common-limiter .content .infos .link span {
        font: normal normal 300 16px/21px proxima-nova
    }

    #sobre #blog .common-limiter {
        padding: 60px 24px 130px
    }

    #sobre #blog .common-limiter .content {
        padding-left: 24px
    }

    #sobre #blog .common-limiter .content .title {
        font: normal normal bold 26px/30px proxima-nova
    }

    #sobre #blog .common-limiter .content .descr p {
        font: normal normal normal 16px/22px proxima-nova
    }

    #sobre #blog .common-limiter .content .link span {
        font: normal normal 300 16px/21px proxima-nova
    }

    #sobre #blog .abs-img {
        right: 20px;
        height: 460px
    }

    .swiper-button-next,
    .swiper-button-prev {
        width: 48px !important;
        height: 48px !important
    }

    .swiper-button-next::after,
    .swiper-button-prev::after {
        font-size: 16px !important
    }
}

@media (max-width:1024px) {
    #sobre #main-banner {
        height: 58vh;
        max-height: 500px
    }

    #sobre #main-banner .common-limiter {
        padding: 0 20px
    }

    #sobre #main-banner .common-limiter .content {
        width: 340px;
        padding-top: 40px
    }

    #sobre #main-banner .common-limiter .content .title {
        font: normal normal normal 32px/38px proxima-nova
    }

    #sobre #main-banner .common-limiter .content .descr {
        margin-top: 20px;
        font: normal normal normal 15px/21px proxima-nova
    }

    #sobre #numbers .common-limiter {
        padding: 0 20px
    }

    #sobre #numbers .common-limiter .content {
        padding: 60px 0
    }

    #sobre #numbers .common-limiter .content .numbers {
        row-gap: 28px;
        column-gap: 18px
    }

    #sobre #numbers .common-limiter .content .numbers>.number {
        flex: 1 1 210px;
        max-width: none
    }

    #sobre #numbers .common-limiter .content .numbers>.number>.number .value {
        font: normal normal bold 38px/28px proxima-nova;
        left: -18px
    }

    #sobre #numbers .common-limiter .content .numbers>.number>.number .label {
        font: normal normal bold 42px/44px proxima-nova
    }

    #sobre #numbers .common-limiter .content .numbers>.number .subtitle {
        font: normal normal bold 18px/24px proxima-nova
    }

    #sobre #blog .common-limiter .content .title,
    #sobre #catalog .common-limiter .content .infos .title,
    #sobre #lab .common-limiter .content .infos .title {
        font: normal normal bold 24px/28px proxima-nova
    }

    #sobre #numbers .common-limiter .content .numbers>.number .nps-extra {
        height: auto;
        margin-top: 8px;
        position: static
    }

    #sobre #catalog .common-limiter .content .infos .descr,
    #sobre #lab .common-limiter .content .infos .descr {
        margin-top: 20px
    }

    #sobre #numbers .common-limiter .content .numbers>.number .nps-extra p {
        position: static;
        width: 100%
    }

    #sobre #numbers .common-limiter .content .numbers .sep {
        display: none
    }

    #sobre #gallery .swiper-gallery .swiper-wrapper .item img {
        height: 280px
    }

    #sobre #lab .common-limiter {
        padding: 0 20px
    }

    #sobre #lab .common-limiter .content {
        padding: 50px 0
    }

    #sobre #lab .common-limiter .content .infos {
        padding-left: 22px
    }

    #sobre #lab .common-limiter .content .gallery {
        flex-wrap: wrap;
        gap: 16px
    }

    #sobre #lab .common-limiter .content .gallery .item img {
        height: 300px
    }

    #sobre #catalog .bg {
        left: 0;
        width: 45vw
    }

    #sobre #catalog .common-limiter {
        padding: 0 20px
    }

    #sobre #catalog .common-limiter .content {
        padding: 60px 0;
        max-width: 360px
    }

    #sobre #catalog .common-limiter .content .infos {
        padding-left: 20px
    }

    #sobre #catalog .common-limiter .content .infos .link {
        margin-top: 26px;
        padding: 8px 14px
    }

    #sobre #blog .common-limiter {
        padding: 50px 20px 90px
    }

    #sobre #blog .common-limiter .content {
        padding-left: 20px
    }

    #sobre #blog .common-limiter .content .descr,
    #sobre #blog .common-limiter .content .title {
        max-width: 360px
    }

    #sobre #blog .common-limiter .content .descr {
        margin-top: 20px
    }

    #sobre #blog .common-limiter .content .link {
        margin-top: 26px;
        padding: 8px 14px
    }

    #sobre #blog .abs-img {
        height: 360px;
        right: 10px
    }
}

@media (max-width:900px) {
    #sobre #main-banner {
        height: auto;
        min-height: 420px;
        max-height: none;
        padding: 120px 0 80px
    }

    #sobre #main-banner .bg {
        filter: brightness(.5)
    }

    #sobre #main-banner .common-limiter {
        padding: 0 20px
    }

    #sobre #main-banner .common-limiter .content {
        width: 100%;
        max-width: 460px;
        padding-top: 0;
        margin-left: 0
    }

    #sobre #main-banner .common-limiter .content .title {
        font: normal normal normal 30px/36px proxima-nova
    }

    #sobre #main-banner .common-limiter .content .descr {
        font: normal normal normal 15px/21px proxima-nova
    }

    #sobre #numbers .common-limiter .content .numbers {
        justify-content: flex-start
    }

    #sobre #numbers .common-limiter .content .numbers>.number {
        flex: 1 1 calc(50% - 12px)
    }

    #sobre #lab .common-limiter .content .gallery {
        flex-direction: column;
        align-items: center
    }

    #sobre #catalog .bg {
        position: relative;
        left: 0;
        top: 0;
        width: 100%;
        height: 320px;
        display: block
    }

    #sobre #catalog .common-limiter {
        padding: 0 20px
    }

    #sobre #catalog .common-limiter .content {
        max-width: 100%;
        padding: 40px 0 50px;
        margin-left: 0
    }

    #sobre #catalog .common-limiter .content .infos {
        padding-left: 22px;
        max-width: 620px
    }

    #sobre #blog {
        position: relative
    }

    #sobre #blog .common-limiter {
        padding: 50px 20px 40px
    }

    #sobre #blog .common-limiter .content,
    #sobre #blog .common-limiter .content .descr,
    #sobre #blog .common-limiter .content .title {
        max-width: 100%
    }

    #sobre #blog .abs-img {
        position: relative;
        right: auto;
        bottom: auto;
        width: 100%;
        height: 360px;
        display: block;
        object-position: center top;
        transform: none !important
    }

    .swiper-button-prev,
    .swiper-rtl .swiper-button-next {
        left: 16px !important
    }

    .swiper-button-next,
    .swiper-rtl .swiper-button-prev {
        right: 16px !important
    }
}

@media (max-width:768px) {

    #sobre #lab .common-limiter .content .gallery .item,
    #sobre #numbers .common-limiter .content .numbers>.number .nps-extra {
        width: 100%
    }

    #sobre #main-banner {
        min-height: 360px;
        padding: 100px 0 60px
    }

    #sobre #main-banner .common-limiter,
    #sobre #numbers .common-limiter {
        padding: 0 16px
    }

    #sobre #main-banner .common-limiter .content {
        max-width: 360px
    }

    #sobre #main-banner .common-limiter .content .title {
        font: normal normal normal 26px/32px proxima-nova
    }

    #sobre #main-banner .common-limiter .content .descr {
        margin-top: 18px;
        font: normal normal normal 14px/20px proxima-nova
    }

    #sobre #numbers .common-limiter .content {
        padding: 46px 0 42px
    }

    #sobre #numbers .common-limiter .content .numbers {
        gap: 22px 14px
    }

    #sobre #numbers .common-limiter .content .numbers>.number {
        flex: 1 1 calc(50% - 7px)
    }

    #sobre #numbers .common-limiter .content .numbers>.number>.number .value {
        font: normal normal bold 32px/24px proxima-nova;
        left: -14px;
        top: -1px
    }

    #sobre #numbers .common-limiter .content .numbers>.number>.number .label {
        font: normal normal bold 36px/38px proxima-nova
    }

    #sobre #numbers .common-limiter .content .numbers>.number .subtitle {
        margin-top: 4px;
        font: normal normal bold 16px/22px proxima-nova
    }

    #sobre #catalog .common-limiter .content .infos .descr,
    #sobre #lab .common-limiter .content .infos .descr {
        margin-top: 18px
    }

    #sobre #numbers .common-limiter .content .numbers>.number .nps-extra p {
        font: normal normal normal 12px/15px proxima-nova
    }

    #sobre #gallery .swiper-gallery .swiper-wrapper .item img {
        height: 240px
    }

    #sobre #lab .common-limiter {
        padding: 0 16px
    }

    #sobre #lab .common-limiter .content {
        padding: 42px 0
    }

    #sobre #lab .common-limiter .content .infos {
        padding-left: 16px;
        border-left-width: 4px;
        margin-bottom: 28px
    }

    #sobre #lab .common-limiter .content .infos .title {
        font: normal normal bold 22px/26px proxima-nova
    }

    #sobre #lab .common-limiter .content .infos .descr p {
        font: normal normal normal 14px/20px proxima-nova
    }

    #sobre #catalog .bg {
        height: 240px
    }

    #sobre #catalog .common-limiter {
        padding: 0 16px
    }

    #sobre #catalog .common-limiter .content {
        padding: 32px 0 40px
    }

    #sobre #catalog .common-limiter .content .infos {
        padding-left: 16px;
        border-left-width: 4px
    }

    #sobre #catalog .common-limiter .content .infos .title {
        font: normal normal bold 22px/26px proxima-nova
    }

    #sobre #catalog .common-limiter .content .infos .descr p {
        font: normal normal normal 14px/20px proxima-nova
    }

    #sobre #catalog .common-limiter .content .infos .link {
        margin-top: 22px;
        padding: 10px 14px;
        border-radius: 8px
    }

    #sobre #catalog .common-limiter .content .infos .link span {
        font: normal normal 300 14px/19px proxima-nova
    }

    #sobre #blog .common-limiter {
        padding: 42px 16px 28px
    }

    #sobre #blog .common-limiter .content {
        padding-left: 16px;
        border-left-width: 4px
    }

    #sobre #blog .common-limiter .content .title {
        font: normal normal bold 22px/26px proxima-nova
    }

    #sobre #blog .common-limiter .content .descr {
        margin-top: 18px
    }

    #sobre #blog .common-limiter .content .descr p {
        font: normal normal normal 14px/20px proxima-nova
    }

    #sobre #blog .common-limiter .content .link {
        margin-top: 22px;
        padding: 10px 14px;
        border-radius: 8px
    }

    #sobre #blog .common-limiter .content .link span {
        font: normal normal 300 14px/19px proxima-nova
    }

    #sobre #blog .abs-img {
        height: 280px
    }

    .swiper-pagination {
        bottom: 14px !important
    }

    .swiper-pagination .swiper-pagination-bullet {
        width: 16px;
        height: 16px
    }

    .swiper-button-next,
    .swiper-button-prev {
        width: 42px !important;
        height: 42px !important
    }

    .swiper-button-next::after,
    .swiper-button-prev::after {
        font-size: 14px !important
    }
}

@media (max-width:575px) {
    #sobre #main-banner {
        min-height: 320px;
        padding: 88px 0 48px
    }

    #sobre #main-banner .common-limiter,
    #sobre #numbers .common-limiter {
        padding: 0 12px
    }

    #sobre #main-banner .common-limiter .content {
        max-width: 100%
    }

    #sobre #main-banner .common-limiter .content .title {
        font: normal normal normal 22px/28px proxima-nova
    }

    #sobre #main-banner .common-limiter .content .descr {
        margin-top: 16px;
        font: normal normal normal 13px/19px proxima-nova
    }

    #sobre #numbers .common-limiter .content {
        padding: 38px 0 34px
    }

    #sobre #numbers .common-limiter .content .numbers {
        gap: 18px 10px
    }

    #sobre #numbers .common-limiter .content .numbers>.number {
        flex: 1 1 100%;
        max-width: 100%
    }

    #sobre #numbers .common-limiter .content .numbers>.number>.number .value {
        font: normal normal bold 28px/20px proxima-nova;
        left: -10px
    }

    #sobre #numbers .common-limiter .content .numbers>.number>.number .label {
        font: normal normal bold 32px/34px proxima-nova
    }

    #sobre #numbers .common-limiter .content .numbers>.number .subtitle {
        font: normal normal bold 15px/20px proxima-nova
    }

    #sobre #numbers .common-limiter .content .numbers>.number .nps-extra {
        margin-top: 6px
    }

    #sobre #gallery .swiper-gallery .swiper-wrapper .item img {
        height: 210px
    }

    #sobre #lab .common-limiter {
        padding: 0 12px
    }

    #sobre #lab .common-limiter .content {
        padding: 34px 0
    }

    #sobre #lab .common-limiter .content .infos {
        padding-left: 14px;
        margin-bottom: 22px
    }

    #sobre #lab .common-limiter .content .infos .title {
        font: normal normal bold 20px/24px proxima-nova
    }

    #sobre #lab .common-limiter .content .infos .descr p {
        font: normal normal normal 13px/19px proxima-nova
    }

    #sobre #catalog .bg {
        height: 200px
    }

    #sobre #catalog .common-limiter {
        padding: 0 12px
    }

    #sobre #catalog .common-limiter .content {
        padding: 26px 0 34px
    }

    #sobre #catalog .common-limiter .content .infos {
        padding-left: 14px
    }

    #sobre #catalog .common-limiter .content .infos .title {
        font: normal normal bold 20px/24px proxima-nova
    }

    #sobre #catalog .common-limiter .content .infos .descr p {
        font: normal normal normal 13px/19px proxima-nova
    }

    #sobre #catalog .common-limiter .content .infos .link {
        width: 100%;
        justify-content: center
    }

    #sobre #catalog .common-limiter .content .infos .link span {
        font: normal normal 300 13px/18px proxima-nova
    }

    #sobre #blog .common-limiter {
        padding: 34px 12px 22px
    }

    #sobre #blog .common-limiter .content {
        padding-left: 14px
    }

    #sobre #blog .common-limiter .content .title {
        font: normal normal bold 20px/24px proxima-nova
    }

    #sobre #blog .common-limiter .content .descr p {
        font: normal normal normal 13px/19px proxima-nova
    }

    #sobre #blog .common-limiter .content .link {
        width: 100%;
        justify-content: center
    }

    #sobre #blog .common-limiter .content .link span {
        font: normal normal 300 13px/18px proxima-nova
    }

    #sobre #blog .abs-img {
        height: 220px
    }

    .swiper-button-next,
    .swiper-button-prev {
        width: 38px !important;
        height: 38px !important
    }

    .swiper-button-prev,
    .swiper-rtl .swiper-button-next {
        left: 10px !important
    }

    .swiper-button-next,
    .swiper-rtl .swiper-button-prev {
        right: 10px !important
    }
}

@media (max-width:380px) {
    #sobre #main-banner {
        min-height: 290px;
        padding: 76px 0 40px
    }

    #sobre #main-banner .common-limiter .content .title {
        font: normal normal normal 19px/24px proxima-nova
    }

    #sobre #main-banner .common-limiter .content .descr {
        font: normal normal normal 12px/18px proxima-nova
    }

    #sobre #numbers .common-limiter .content .numbers>.number>.number .value {
        font: normal normal bold 24px/18px proxima-nova
    }

    #sobre #numbers .common-limiter .content .numbers>.number>.number .label {
        font: normal normal bold 28px/30px proxima-nova
    }

    #sobre #numbers .common-limiter .content .numbers>.number .subtitle {
        font: normal normal bold 14px/18px proxima-nova
    }

    #sobre #gallery .swiper-gallery .swiper-wrapper .item img {
        height: 180px
    }

    #sobre #catalog .bg {
        height: 170px
    }

    #sobre #blog .abs-img {
        height: 190px
    }

    .swiper-pagination .swiper-pagination-bullet {
        width: 14px;
        height: 14px
    }
}

#sobre #blog.blog-banner {
    position: relative;
    overflow: hidden;
    padding: 80px 0;
}

#sobre #main-banner .common-limiter .content .descr {
    font: normal normal 300 20px / 24px proxima-nova;
}

#sobre #blog.blog-banner .blog-banner-section {
    position: relative;
    min-height: 80vh;
    overflow: hidden;
}

#sobre #blog.blog-banner .blog-banner-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at left center, rgba(0, 0, 0, .45) 0, rgba(0, 0, 0, .05) 55%, rgba(0, 0, 0, 0) 75%);
    z-index: 1;
    pointer-events: none;
}

#sobre #blog.blog-banner .blog-banner-section .bg {
    width: 100%;
    height: 80vh;
    object-fit: cover;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    transform: scale(1);
    transition: transform 1.6s ease;
    will-change: transform;
    z-index: 0;
}

#sobre #blog.blog-banner .blog-banner-section:hover .bg {
    transform: scale(1.06);
}

#sobre #blog.blog-banner .common-limiter {
    width: 100%;
    max-width: calc(1960px - 700px);
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

#sobre #blog.blog-banner .common-limiter .content {
    padding: 35px 0;
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 0;
    padding-left: 0;
    max-width: 100%;
}

#sobre #blog.blog-banner .common-limiter .content .title {
    max-width: 600px;
    display: block;
    text-align: left;
    font: normal normal normal 30px/37px proxima-nova;
    letter-spacing: 0.6px;
    color: #FFFFFF;
    text-transform: uppercase;
    text-shadow: 0 3px 6px rgba(0, 0, 0, .3);
    text-transform: uppercase;
}

#sobre #blog.blog-banner .common-limiter .content .descr {
    margin-top: 20px;
    margin-right: auto;
    max-width: 390px;
    width: 100%;
    display: block;
}

#sobre #blog.blog-banner .common-limiter .content .descr p {
    text-align: left;
    font: normal normal 300 18px/23px proxima-nova;
    letter-spacing: .36px;
    color: #FFF;
}

#sobre #blog.blog-banner .common-limiter .content .link {
    margin-top: 20px;
    margin-right: auto;
    width: fit-content;
    padding: 7px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #FFF;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

#sobre #blog.blog-banner .common-limiter .content .link::after {
    content: "";
    position: absolute;
    top: -30%;
    left: -60%;
    width: 40%;
    height: 160%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .35) 50%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    transform: rotate(18deg);
    transition: left .55s ease;
}

#sobre #blog.blog-banner .common-limiter .content .link:hover {
    transform: translateY(-2px);
    border-color: #FFC20E;
    box-shadow: 0 16px 50px rgba(0, 0, 0, .28);
}

#sobre #blog.blog-banner .common-limiter .content .link:hover::after {
    left: 120%;
}

#sobre #blog.blog-banner .common-limiter .content .link:active {
    transform: translateY(0);
}

#sobre #blog.blog-banner .common-limiter .content .link:focus-visible {
    outline: #FFC20E solid 2px;
    outline-offset: 4px;
}

#sobre #blog.blog-banner .common-limiter .content .link span {
    text-align: left;
    font: normal normal 300 18px/23px proxima-nova;
    letter-spacing: .36px;
    color: #FFF;
    text-transform: uppercase;
}

#sobre #blog.blog-banner .abs-img {
    display: none;
}

@media (max-width: 1560px) {
    #sobre #blog.blog-banner .common-limiter {
        max-width: 100%;
        padding: 0 30px;
    }

    #sobre #blog.blog-banner .common-limiter .content .descr {
        max-width: 360px;
    }

    #sobre #blog.blog-banner .common-limiter .content .descr p,
    #sobre #blog.blog-banner .common-limiter .content .link span {
        font: normal normal 300 17px/22px proxima-nova;
    }
}

@media (max-width: 1366px) {
    #sobre #blog.blog-banner .common-limiter {
        padding: 0 24px;
    }

    #sobre #blog.blog-banner .common-limiter .content .descr {
        max-width: 340px;
    }

    #sobre #blog.blog-banner .common-limiter .content .descr p,
    #sobre #blog.blog-banner .common-limiter .content .link span {
        font: normal normal 300 16px/21px proxima-nova;
    }
}

@media (max-width: 1200px) {
    #sobre #blog.blog-banner .blog-banner-section {
        min-height: 90vh;
    }

    #sobre #blog.blog-banner .blog-banner-section .bg {
        height: 90vh;
    }

    #sobre #blog.blog-banner .common-limiter {
        padding: 0 20px;
    }

    #sobre #blog.blog-banner .common-limiter .content {
        padding: 60px 0;
        min-height: 90vh;
    }

    #sobre #blog.blog-banner .common-limiter .content .descr p,
    #sobre #blog.blog-banner .common-limiter .content .link span {
        font: normal normal 300 15px/20px proxima-nova;
    }

    #sobre #blog.blog-banner .common-limiter .content .descr {
        margin-top: 16px;
        max-width: 320px;
    }

    #sobre #blog.blog-banner .common-limiter .content .link {
        margin-top: 18px;
        padding: 8px 14px;
    }
}

@media (max-width: 1024px) {
    #sobre #blog.blog-banner .blog-banner-section {
        min-height: 82vh;
    }

    #sobre #blog.blog-banner .blog-banner-section .bg {
        height: 82vh;
    }

    #sobre #blog.blog-banner .common-limiter .content {
        min-height: 82vh;
    }
}

@media (max-width: 900px) {
    #sobre #blog.blog-banner .blog-banner-section {
        min-height: 76vh;
    }

    #sobre #blog.blog-banner .blog-banner-section .bg {
        height: 76vh;
    }

    #sobre #blog.blog-banner .common-limiter {
        padding: 0 20px;
    }

    #sobre #blog.blog-banner .common-limiter .content {
        min-height: 76vh;
    }

    #sobre #blog.blog-banner .common-limiter .content .descr {
        max-width: 300px;
    }
}

@media (max-width: 768px) {
    #sobre #blog.blog-banner .blog-banner-section {
        min-height: 68vh;
    }

    #sobre #blog.blog-banner .blog-banner-section::before {
        background: linear-gradient(180deg, rgba(0, 0, 0, .42) 0, rgba(0, 0, 0, .18) 45%, rgba(0, 0, 0, .08) 100%);
    }

    #sobre #blog.blog-banner .blog-banner-section .bg {
        height: 68vh;
    }

    #sobre #blog.blog-banner .common-limiter {
        padding: 0 16px;
        min-height: 68vh;
    }

    #sobre #blog.blog-banner .common-limiter .content {
        padding: 70px 0 54px;
        min-height: 68vh;
    }

    #sobre #blog.blog-banner .common-limiter .content .title {
        font: normal normal normal 30px/36px proxima-nova;
        letter-spacing: .8px;
    }

    #sobre #blog.blog-banner .common-limiter .content .descr p,
    #sobre #blog.blog-banner .common-limiter .content .link span {
        font: normal normal 300 14px/19px proxima-nova;
    }

    #sobre #blog.blog-banner .common-limiter .content .descr {
        margin-top: 14px;
        max-width: 280px;
    }

    #sobre #blog.blog-banner .common-limiter .content .link {
        margin-top: 16px;
        padding: 10px 14px;
        border-radius: 8px;
    }
}

@media (max-width: 575px) {
    #sobre #blog.blog-banner .common-limiter {
        padding: 0 12px;
    }

    #sobre #blog.blog-banner .common-limiter .content {
        padding: 70px 0 48px;
    }

    #sobre #blog.blog-banner .common-limiter .content .title {
        font: normal normal normal 24px/30px proxima-nova;
    }

    #sobre #blog.blog-banner .common-limiter .content .descr p,
    #sobre #blog.blog-banner .common-limiter .content .link span {
        font: normal normal 300 13px/18px proxima-nova;
    }

    #sobre #blog.blog-banner .common-limiter .content .descr {
        max-width: 240px;
    }

    #sobre #blog.blog-banner .common-limiter .content .link {
        width: 100%;
        max-width: 220px;
        justify-content: center;
    }
}

@media (max-width: 380px) {
    #sobre #blog.blog-banner .common-limiter .content .title {
        font: normal normal normal 21px/26px proxima-nova;
    }

    #sobre #blog.blog-banner .common-limiter .content .descr {
        max-width: 220px;
    }

    #sobre #blog.blog-banner .common-limiter .content .descr p {
        font: normal normal 300 12px/17px proxima-nova;
    }
}

/* =========================================
   LAB GALLERY - MESMA IMAGEM + BOX EXPANSÍVEL
========================================= */

#sobre #lab .gallery {
    position: relative;
    display: flex;
    gap: 32px;
    align-items: stretch;
}

#sobre #lab .gallery .item {
    position: relative;
    flex: 0 0 calc((100% - 64px) / 3);
    width: calc((100% - 64px) / 3);
    height: 500px;
    z-index: 1;
    cursor: pointer;
}

#sobre #lab .gallery .item-placeholder {
    visibility: hidden;
    pointer-events: none;
}

#sobre #lab .gallery .thumb {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#sobre #lab .gallery .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1);
    transition: filter 0.45s ease;
}

#sobre #lab .gallery .detail {
    display: none;
}

/* item flutuando */
#sobre #lab .gallery .item.is-floating {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    overflow: visible;
    z-index: 30;
    will-change: left, width;
    transition:
        left 0.85s cubic-bezier(0.22, 1, 0.36, 1),
        width 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

#sobre #lab .gallery .item.is-floating:not(:last-child) {
    flex-direction: row;
}

#sobre #lab .gallery .item.is-floating:last-child {
    flex-direction: row-reverse;
}

/* AQUI ESTÁ O AJUSTE PRINCIPAL:
   a thumb já nasce travada na largura original e NÃO anima */
#sobre #lab .gallery .item.is-floating .thumb {
    flex: 0 0 var(--thumb-width);
    width: var(--thumb-width);
    transition: none;
}

#sobre #lab .gallery .item.is-floating .detail {
    display: block;
    flex: 0 0 0;
    width: 0;
    height: 100%;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition:
        flex-basis 0.85s cubic-bezier(0.22, 1, 0.36, 1),
        width 0.85s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.28s ease;
}

#sobre #lab .gallery .item.is-floating.is-active .thumb {
    flex: 0 0 var(--thumb-width);
    width: var(--thumb-width);
}

#sobre #lab .gallery .item.is-floating.is-active .thumb img {
    transform: scale(1);
    filter: brightness(0.95);
}

#sobre #lab .gallery .item.is-floating.is-active .detail {
    flex: 0 0 calc(var(--gallery-width) - var(--thumb-width));
    width: calc(var(--gallery-width) - var(--thumb-width));
    opacity: 1;
}

/* área do texto */
#sobre #lab .gallery .detail .content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#sobre #lab .gallery .detail .content::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 16px 40px rgba(0, 0, 0, 0.05);
    transition:
        opacity 0.28s ease,
        transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
    background: linear-gradient(90deg,
            rgba(185, 191, 191, 0.88) 0%,
            rgba(224, 220, 213, 0.96) 18%,
            rgba(198, 212, 205, 0.82) 50%,
            rgba(229, 224, 216, 0.96) 78%,
            rgba(223, 217, 210, 0.96) 100%);
}

#sobre #lab .gallery .item.is-floating:not(:last-child) .detail .content::before {
    border-radius: 0 28px 28px 0;
    transform: translateX(-42px);
}

#sobre #lab .gallery .item.is-floating:last-child .detail .content::before {
    border-radius: 28px 0 0 28px;
    transform: translateX(42px);
}

#sobre #lab .gallery .item.is-floating.is-active .detail .content::before {
    opacity: 1;
    transform: translateX(0);
}

#sobre #lab .gallery .detail .inner {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 34px;
    padding: 48px 52px;
    box-sizing: border-box;
}

#sobre #lab .gallery .item.is-floating:last-child .detail .inner {
    flex-direction: row-reverse;
}

#sobre #lab .gallery .line {
    width: 5px;
    min-width: 5px;
    height: 170px;
    background: #FFC20E;
    opacity: 0;
    transform: scaleY(0.55) translateY(18px);
    transform-origin: center top;
    transition:
        opacity 0.35s ease,
        transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0.08s;
}

#sobre #lab .gallery .box-info {
    max-width: 640px;
    opacity: 0;
    transform: translateY(26px);
    transition:
        opacity 0.48s ease,
        transform 0.78s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0.16s;
}

#sobre #lab .gallery .name {
    font: normal normal normal 28px/34px proxima-nova;
    letter-spacing: 0.56px;
    color: #4D4D4D;
    text-transform: uppercase;
    margin-bottom: 24px;
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity 0.45s ease,
        transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0.22s;
}

#sobre #lab .gallery .descr,
#sobre #lab .gallery .descr p {
    font: normal normal normal 18px/30px proxima-nova;
    letter-spacing: 0.36px;
    color: #4D4D4D;
    margin: 0;
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.55s ease,
        transform 0.82s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0.30s;
}

#sobre #lab .gallery .item.is-floating.is-active .line {
    opacity: 1;
    transform: scaleY(1) translateY(0);
}

#sobre #lab .gallery .item.is-floating.is-active .box-info,
#sobre #lab .gallery .item.is-floating.is-active .name,
#sobre #lab .gallery .item.is-floating.is-active .descr,
#sobre #lab .gallery .item.is-floating.is-active .descr p {
    opacity: 1;
    transform: translateY(0);
}

#sobre #lab .gallery.is-hovering .item:not(.is-floating) {
    pointer-events: none;
}

/* =========================
   RESPONSIVO
========================= */

@media (max-width: 1024px) {
    #sobre #lab .gallery {
        flex-direction: column;
        gap: 20px;
    }

    #sobre #lab .gallery .item,
    #sobre #lab .gallery .item.is-floating {
        position: relative;
        flex: none;
        width: 100% !important;
        height: auto;
        left: auto !important;
        top: auto !important;
        display: block;
        transition: none;
    }

    #sobre #lab .gallery .item-placeholder {
        display: none;
    }

    #sobre #lab .gallery .thumb,
    #sobre #lab .gallery .item.is-floating .thumb {
        width: 100%;
        height: auto;
        flex: none;
    }

    #sobre #lab .gallery .thumb img,
    #sobre #lab .gallery .item.is-floating .thumb img {
        height: 320px;
        transform: none !important;
        filter: none !important;
    }

    #sobre #lab .gallery .detail,
    #sobre #lab .gallery .item.is-floating .detail,
    #sobre #lab .gallery .item.is-floating.is-active .detail {
        display: block;
        width: 100% !important;
        flex: none;
        opacity: 1;
        pointer-events: auto;
    }

    #sobre #lab .gallery .detail .content::before,
    #sobre #lab .gallery .item.is-floating .detail .content::before {
        opacity: 1;
        transform: none;
        border-radius: 0 0 24px 24px;
    }

    #sobre #lab .gallery .detail .inner,
    #sobre #lab .gallery .item.is-floating .detail .inner {
        padding: 28px 22px;
        gap: 20px;
        flex-direction: row;
    }

    #sobre #lab .gallery .line,
    #sobre #lab .gallery .box-info,
    #sobre #lab .gallery .name,
    #sobre #lab .gallery .descr,
    #sobre #lab .gallery .descr p {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

@media (max-width: 575px) {

    #sobre #lab .gallery .thumb img,
    #sobre #lab .gallery .item.is-floating .thumb img {
        height: 240px;
    }

    #sobre #lab .gallery .detail .inner,
    #sobre #lab .gallery .item.is-floating .detail .inner {
        padding: 22px 16px;
        gap: 14px;
    }

    #sobre #lab .gallery .line {
        width: 4px;
        min-width: 4px;
        height: 90px;
    }

    #sobre #lab .gallery .name {
        font: normal normal normal 18px/24px proxima-nova;
        margin-bottom: 12px;
    }

    #sobre #lab .gallery .descr,
    #sobre #lab .gallery .descr p {
        font: normal normal normal 13px/21px proxima-nova;
    }
}