@font-face{
            font-family: 'Lemon Milk';
            src: url('/fontes/lemonmilk-bold.woff2') format('woff2');
            font-weight: 700;
            font-style: normal;
            font-display: swap;
        }

        @font-face{
            font-family: 'Ekster';
            src: url('/fontes/ekster-regular.woff2') format('woff2');
            font-weight: 400;
            font-style: normal;
            font-display: swap;
        }

        @font-face{
            font-family: 'Ekster';
            src: url('/fontes/ekster-medium.woff2') format('woff2');
            font-weight: 500;
            font-style: normal;
            font-display: swap;
        }

        @font-face{
            font-family: 'Ekster';
            src: url('/fontes/ekster-bold.woff2') format('woff2');
            font-weight: 700;
            font-style: normal;
            font-display: swap;
        }

        #block-sobre .sobre-nos-rendimento,
#block-sobre .sobre-nos-rendimento *,
#block-sobre .sobre-nos-rendimento *::before,
#block-sobre .sobre-nos-rendimento *::after{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        #block-sobre .sobre-nos-rendimento{
            --cor-fundo-transicao: #253064;
            --cor-primaria-amarelo: #D89A14;
            --cor-texto-claro: #FFFFFF;
            --cor-texto-escuro: #000000;
            --largura-maxima-conteudo: 1200px;
            --largura-maxima-descricao: 700px;
            --padding-lateral-conteudo: 80px;
            --gap-externo: 3vh;
            --fonte-titulo: 'Lemon Milk';
            --fonte-corpo: 'Ekster';
            --navy: var(--cor-fundo-transicao);
            --gold: var(--cor-primaria-amarelo);
            font-family: var(--fonte-corpo), sans-serif;
            background: var(--cor-texto-claro);
            position: relative;
            isolation: isolate;
        }

        /* ══════════════════════════════
           SECTION — altura fixa 98vh
        ══════════════════════════════ */
        #block-sobre .sobre-nos-rendimento.sobre-section{
            width: 100%;
            height: 98vh;
            display: grid;
            grid-template-columns: 46% 54%;
            overflow: hidden;
            background: var(--cor-texto-claro);
        }

        /* ══════════════════════════════
           ESQUERDA — bloco de imagens
           clip: cima mais larga,
                 baixo mais estreita
        ══════════════════════════════ */
        #block-sobre .sobre-nos-rendimento .sobre-left{
            position: relative;
            height: 100%;
            overflow: hidden;
            cursor: grab;
            /* topo vai até 100% da largura, base recua para 85% */
            clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);

            /* PADRÃO REVEAL SURGICAL */
            opacity: 0;
            transform: translate3d(0, 30px, 0);
            filter: blur(10px);
            transition: 
                opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1),
                transform 0.8s cubic-bezier(0.23, 1, 0.32, 1),
                filter 0.8s ease;
            will-change: transform, opacity, filter;
        }

        #block-sobre .sobre-nos-rendimento .sobre-left.in{
            opacity: 1;
            transform: translate3d(0, 0, 0);
            filter: blur(0);
        }

        /* trilho que sobe — contido dentro do clip */
        #block-sobre .sobre-nos-rendimento .carousel-track{
            display: flex;
            flex-direction: column;
            gap: 0;
            will-change: transform;
        }

        /* cada imagem = 1/3 da altura da seção */
        #block-sobre .sobre-nos-rendimento .carousel-track img{
            width: 100%;
            height: calc(98vh / 3);
            object-fit: cover;
            display: block;
            flex-shrink: 0;
            cursor: inherit;
            transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* hover: expande a imagem — as outras descem naturalmente */
        #block-sobre .sobre-nos-rendimento .carousel-track img:hover{
            height: calc(98vh / 1.6);
        }

        /* sem arrastar, sem salvar — via JS (dragstart + contextmenu) */
        #block-sobre .sobre-nos-rendimento .carousel-track img{
            -webkit-user-drag: none;
            -webkit-user-select: none;
            user-select: none;
        }

        #block-sobre .sobre-nos-rendimento.is-dragging .sobre-left,
#block-sobre .sobre-nos-rendimento.is-dragging .carousel-track img{
            cursor: grabbing;
        }

        #block-sobre .sobre-nos-rendimento.is-dragging .carousel-track img:hover{
            height: calc(98vh / 3);
        }

        /* ══════════════════════════════
           DIREITA — conteúdo
        ══════════════════════════════ */
        #block-sobre .sobre-nos-rendimento .sobre-right{
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0 calc(var(--gap-externo) + var(--padding-lateral-conteudo)) 0 clamp(36px, 3vw, 60px);
            gap: 0;
            background: var(--cor-texto-claro);
            overflow: hidden;

            /* PADRÃO REVEAL SURGICAL */
            opacity: 0;
            transform: translate3d(0, 30px, 0);
            filter: blur(10px);
            transition: 
                opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.15s,
                transform 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.15s,
                filter 0.8s ease 0.15s;
            will-change: transform, opacity, filter;
        }

        #block-sobre .sobre-nos-rendimento .sobre-right-inner{
            width: min(100%, calc(var(--largura-maxima-conteudo) * 0.6));
        }

        #block-sobre .sobre-nos-rendimento .sobre-right.in{
            opacity: 1;
            transform: translate3d(0, 0, 0);
            filter: blur(0);
        }

        /* tag */
        #block-sobre .sobre-nos-rendimento .sobre-tag{
            font-size: 18px;
            font-weight: 700;
            letter-spacing: 2.5px;
            text-transform: uppercase;
            color: var(--gold);
            margin-bottom: 6px;
            display: block;
        }

        /* título */
        #block-sobre .sobre-nos-rendimento .sobre-title{
            font-family: var(--fonte-titulo), sans-serif;
            font-size: clamp(24px, 2.6vw, 40px);
            font-weight: 700;
            color: var(--navy);
            line-height: 1.15;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            margin-bottom: 24px;
        }

        /* descrição */
        #block-sobre .sobre-nos-rendimento .sobre-desc{
            font-size: 18px;
            font-weight: 500;
            color: var(--cor-texto-escuro);
            line-height: 1.72;
            max-width: var(--largura-maxima-descricao);
            margin-bottom: 56px;
        }

        /* label pilares */
        #block-sobre .sobre-nos-rendimento .sobre-pillars-label{
            font-size: 18px;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--gold);
            margin-bottom: 20px;
            display: block;
        }

        /* pilares */
        #block-sobre .sobre-nos-rendimento .sobre-pillars{
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0 24px;
        }

        #block-sobre .sobre-nos-rendimento .pillar{
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        #block-sobre .sobre-nos-rendimento .pillar-name{
            font-size: 18px;
            font-weight: 800;
            color: var(--navy);
            text-transform: uppercase;
            letter-spacing: 0.4px;
        }

        #block-sobre .sobre-nos-rendimento .pillar-desc{
            font-size: 18px;
            font-weight: 500;
            color: var(--cor-texto-escuro);
            line-height: 1.6;
        }

        /* ══════════════════════════════
           MOBILE
        ══════════════════════════════ */
        @media (max-width: 860px){

            #block-sobre .sobre-nos-rendimento{
                --padding-lateral-conteudo: 30px;
            }

            #block-sobre .sobre-nos-rendimento.sobre-section{
                height: auto;
                grid-template-columns: 1fr;
                overflow: visible;
            }

            #block-sobre .sobre-nos-rendimento .sobre-left{
                height: 50vw;
                min-height: 200px;
                max-height: 300px;
                clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
            }

            #block-sobre .sobre-nos-rendimento .carousel-track img{
                height: calc(50vw / 1.2);
            }

            #block-sobre .sobre-nos-rendimento.is-dragging .carousel-track img:hover{
                height: calc(50vw / 1.2);
            }

            #block-sobre .sobre-nos-rendimento .sobre-right{
                height: auto;
                padding: 44px var(--padding-lateral-conteudo) 52px;
                overflow: visible;
            }

            #block-sobre .sobre-nos-rendimento .sobre-right-inner{
                width: 100%;
            }

            #block-sobre .sobre-nos-rendimento .sobre-pillars{
                grid-template-columns: 1fr 1fr;
                gap: 20px;
            }
        }

        @media (max-width: 480px){
            #block-sobre .sobre-nos-rendimento .sobre-pillars{
                grid-template-columns: 1fr;
            }
        }