        <style>
            /* ========================================================================== */
            /*                      Acordeão de Investimentos                             */
            /* ========================================================================== */

            .investment-accordion {
                margin-inline: auto;
                display: flex;
                flex-direction: column;
                gap: 19px;



                border-top-left-radius: 30px;
                border-top-right-radius: 30px;
                border: 1px solid var(--salmon);

                border-bottom-left-radius: 200px;
                border-bottom-right-radius: 200px;
            }

            .investment-drawer {
                border-bottom-left-radius: 200px;
                border-bottom-right-radius: 200px;
                border-bottom: 1px solid var(--salmon);
            }

            .investment-drawer:last-child {
                border-bottom: 0px solid var(--salmon);
            }


            .investment-drawer-header {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 20px;
                padding: 60px 43px;
                background: none;
                border: none;
                cursor: pointer;
                text-align: left;
                max-width: calc(var(--container-width) - 60px);
                margin-inline: auto;
            }

            .investment-drawer-title {
                margin: 0;
                color: var(--salmon);
                font-size: 48px;
                font-weight: 700;
                line-height: normal;
            }

            .investment-drawer-toggle {
                position: relative;
                flex-shrink: 0;
                width: 40px;
                height: 40px;
            }

            .investment-drawer-toggle-bar {
                position: absolute;
                top: 50%;
                left: 50%;
                background-color: #FF7064;
                transform: translate(-50%, -50%);
            }

            .investment-drawer-toggle-bar-h {
                width: 100%;
                height: 4px;
            }

            .investment-drawer-toggle-bar-v {
                width: 4px;
                height: 100%;
                transition: transform 400ms cubic-bezier(0.65, 0, 0.35, 1), opacity 400ms ease;
            }

            /* NOVO: a barra vertical encolhe e desvanece ao abrir, deixando
                                                                                                                                                                                                                                                                                                                                                                                                                                                       só a horizontal — o "+" transforma-se em "-" com uma easing
                                                                                                                                                                                                                                                                                                                                                                                                                                                       simétrica (ease-in-out) e duração maior, mais suave do que a
                                                                                                                                                                                                                                                                                                                                                                                                                                                       transição linear anterior */
            .investment-drawer.is-open .investment-drawer-toggle-bar-v {
                transform: translate(-50%, -50%) scaleY(0);
                opacity: 0;
            }

            /* NOVO: mesma técnica do exemplo FAQ que funcionou bem — a
                                                                                                                                                                                                                                                                                                                                                                                                                                                       altura é medida em JS (scrollHeight) e a transição corre sobre
                                                                                                                                                                                                                                                                                                                                                                                                                                                       "height" (não "max-height" nem um valor fixo arbitrário). O
                                                                                                                                                                                                                                                                                                                                                                                                                                                       "segredo" que faz isto ficar suave não é a propriedade CSS em
                                                                                                                                                                                                                                                                                                                                                                                                                                                       si, é o JS forçar o browser a registar o estado inicial (0px)
                                                                                                                                                                                                                                                                                                                                                                                                                                                       num frame, e só no frame seguinte (requestAnimationFrame)
                                                                                                                                                                                                                                                                                                                                                                                                                                                       aplicar o valor final — sem isso, o browser pode saltar
                                                                                                                                                                                                                                                                                                                                                                                                                                                       direto para o fim sem animar. Ver openDrawer/closeDrawer no JS */
            .investment-drawer-content {
                height: 0;
                max-width: calc(var(--container-width) - 60px);
                margin-inline: auto;
                overflow: hidden;
                transition: height 450ms cubic-bezier(0.65, 0, 0.35, 1);
            }

            /* Padding SEMPRE presente (não depende de .is-open) — fica
                                                                                                                                                                                                                                                                                                                                                                                                                                                       escondido pelo overflow:hidden do pai quando fechado, e assim
                                                                                                                                                                                                                                                                                                                                                                                                                                                       evita-se qualquer salto de conteúdo no instante em que a
                                                                                                                                                                                                                                                                                                                                                                                                                                                       classe muda (o padding já lá estava, só a altura do pai é que
                                                                                                                                                                                                                                                                                                                                                                                                                                                       anima) */
            .investment-drawer-content-inner {
                padding: 0 43px 100px;
            }

            /* --- Cartão de investimento (Private Equity / Investimentos Financeiros) --- */
            .investment-card {
                display: flex;
                align-items: flex-start;
                gap: 30px;
                height: 100%;
            }

            .investment-drawer[data-drawer='investimentos-financeiros'] .investment-card {
                gap: 149px;
            }

            /* NOVO: imagem passou de background-image para <img> real — só
                                                                                                                                                                                                                                                                                                                                                                                                                                                       assim o object-fit funciona. Tamanho base comum; cada gaveta
                                                                                                                                                                                                                                                                                                                                                                                                                                                       tem o seu modificador logo a seguir */
            .investment-card-image {
                display: block;
                flex: none;
            }

            /* Private Equity — caixa fixa 225x225, imagem nunca é cortada
                                                                                                                                                                                                                                                                                                                                                                                                                                                       (object-fit: contain) */
            .investment-card-image--private-equity {
                width: 225px;
                height: 225px;
                object-fit: contain;
            }

            /* Investimentos Financeiros — largura fixa 387px, altura
                                                                                                                                                                                                                                                                                                                                                                                                                                                       proporcional à imagem original (sem cortar) */
            .investment-card-image--investimentos-financeiros {
                width: 387px;
                height: auto;
            }

            .investment-card-content {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: center;
                gap: 22px;
            }

            .investment-card-tags {
                display: flex;

                gap: 8px;
                justify-content: space-between;
            }

            .investment-card-tag {
                display: inline-block;

                color: var(--burgundy);
                font-size: 10px;
                font-weight: 800;
                line-height: 122%;
                letter-spacing: 2.5px;
                text-transform: uppercase;
                position: relative;
                display: flex;
                align-items: center;
                gap: 6px;
            }

            .investment-card-tag::before {
                content: "";
                width: 4px;
                height: 4px;
                background-color: var(--salmon);
                display: block;

            }

            .investment-card-excerpt {
                margin: 0;
                max-width: 592px;
                color: var(--burgundy);
            }

            .investment-drawer[data-drawer='private-equity'] .investment-card-excerpt {
                font-size: 22px;
            }

            .investment-drawer[data-drawer='private-equity'] .investment-drawer-content-inner {
                padding-inline: 0px;
            }


            /* --- Swiper --- */
            .investment-swiper {
                position: relative;
                padding-bottom: 10px;
                /* NOVO: cursor de "agarrar" sobre o slider — grabCursor:true
                                                                                                                                                                                                                                                                                                                                                                                                                                                           no JS já trata da troca para "grabbing" durante o arrasto;
                                                                                                                                                                                                                                                                                                                                                                                                                                                           este cursor:grab é só o estado de repouso (hover), como
                                                                                                                                                                                                                                                                                                                                                                                                                                                           reforço caso o CSS do próprio Swiper não esteja a
                                                                                                                                                                                                                                                                                                                                                                                                                                                           carregar/cascatar corretamente no tema */
                cursor: grab;
            }

            .investment-swiper .swiper-slide {
                height: auto;
            }

            /* NOVO: divisória simples entre slides — linha salmon de 1px,
                                                                                                                                                                                                                                                                                                                                                                                                                                                       só entre eles (não depois do último) */
            .investment-swiper .swiper-slide {
                padding-right: 45px;
                border-right: 1px solid var(--salmon);
            }

            .investment-swiper[data-type="investimentos-financeiros"] .swiper-slide {
                padding-right: 0px;
                border-right: unset;
            }

            /* NOVO: barra única contínua, com um "thumb" a deslizar entre
                                                                                                                                                                                                                                                                                                                                                                                                                                                       posições fixas (uma por slide real), em vez das bolas
                                                                                                                                                                                                                                                                                                                                                                                                                                                       anteriores — width/left do thumb são definidos em JS
                                                                                                                                                                                                                                                                                                                                                                                                                                                       (updateProgress), a transição do "left" é que dá o efeito de
                                                                                                                                                                                                                                                                                                                                                                                                                                                       deslizar suavemente */
            .investment-swiper-progress {
                position: relative;
                height: 4px;
                border-radius: 2px;
                background-color: #e5e5e5;
                margin-top: 50px;
                overflow: hidden;
                max-width: 331px;
                margin-inline: auto;
            }

            .investment-swiper-progress-thumb {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                border-radius: 2px;
                background-color: var(--salmon);
                transition: left 350ms cubic-bezier(0.65, 0, 0.35, 1);
            }

            /* Fallback caso o Swiper JS ainda não tenha inicializado (ou não
                                                                                                                                                                                                                                                                                                                                                                                                                                                       exista) — mostra os cartões lado a lado com scroll nativo, em
                                                                                                                                                                                                                                                                                                                                                                                                                                                       vez de ficarem todos empilhados/escondidos */
            .investment-swiper:not(.swiper-initialized) .swiper-wrapper {
                display: flex;
                overflow-x: auto;
                gap: 24px;
            }

            .investment-swiper:not(.swiper-initialized) .swiper-slide {
                flex: 0 0 auto;
                width: calc(50% - 12px);
            }

            /* Investimentos Financeiros mostra sempre 1 a 100% — o fallback
                                                                                                                                                                                                                                                                                                                                                                                                                                                       tem de refletir isso, senão parecia sempre 2 mesmo sem JS */
            .investment-swiper[data-type="investimentos-financeiros"]:not(.swiper-initialized) .swiper-slide {
                width: 100%;
            }

            /* NOVO: custom property tipada (@property) — necessária para o
                                                                                                                                                                                                                                                                                                                                                                                                                                                       mask-image conseguir TRANSITIONAR de forma suave. mask-image
                                                                                                                                                                                                                                                                                                                                                                                                                                                       por si só não anima entre duas gradients diferentes (o browser
                                                                                                                                                                                                                                                                                                                                                                                                                                                       não sabe interpolar isso); ao isolar só o "ponto onde o fade
                                                                                                                                                                                                                                                                                                                                                                                                                                                       começa" numa variável numérica registada como <percentage>,
                                                                                                                                                                                                                                                                                                                                                                                                                                                       é essa variável que anima suavemente, e a gradient
                                                                                                                                                                                                                                                                                                                                                                                                                                                       recalcula-se sozinha a cada frame a partir dela */
            @property --investment-fade-stop {
                syntax: '<percentage>';
                inherits: false;
                initial-value: 100%;
            }

            /* Todos os slides usam a MESMA gradient — só o valor da
                                                                                                                                                                                                                                                                                                                                                                                                                                                       variável muda consoante o slide é ou não o 2º visível (ver
                                                                                                                                                                                                                                                                                                                                                                                                                                                       regra is-active abaixo). --investment-fade-stop:100% = sem
                                                                                                                                                                                                                                                                                                                                                                                                                                                       fade nenhum (opaco até ao fim) */
            .investment-swiper .swiper-slide {
                --investment-fade-stop: 100%;
                -webkit-mask-image: linear-gradient(to right, #000 0%, #000 var(--investment-fade-stop), transparent 100%);
                mask-image: linear-gradient(to right, #000 0%, #000 var(--investment-fade-stop), transparent 100%);
                transition: --investment-fade-stop 400ms cubic-bezier(0.65, 0, 0.35, 1);
            }

            /* NOVO: véu suave no último dos 2 cartões visíveis — a zona de
                                                                                                                                                                                                                                                                                                                                                                                                                                                       fade agora ocupa 60% da largura (de 40% a 100%), em vez de só
                                                                                                                                                                                                                                                                                                                                                                                                                                                       os últimos 10%, sugerindo mais claramente que há mais
                                                                                                                                                                                                                                                                                                                                                                                                                                                       conteúdo a seguir. ".swiper-slide-active + .swiper-slide" é
                                                                                                                                                                                                                                                                                                                                                                                                                                                       sempre o 2º dos 2 visíveis, porque "active" é sempre o 1º com
                                                                                                                                                                                                                                                                                                                                                                                                                                                       slidesPerView:2. Em Investimentos Financeiros (slidesPerView:1)
                                                                                                                                                                                                                                                                                                                                                                                                                                                       isto não tem efeito visível, porque o slide seguinte já não
                                                                                                                                                                                                                                                                                                                                                                                                                                                       está no ecrã */
            .investment-swiper .swiper-slide-active+.swiper-slide {
                --investment-fade-stop: 10%;
            }

            @media only screen and (max-width: 1750px) {
                .investment-card-image--private-equity {
                    width: calc(225px * 0.8);
                    height: calc(225px * 0.8);
                    object-fit: contain;
                }

                .investment-drawer[data-drawer='private-equity'] .investment-card-excerpt {
                    font-size: 18px;
                }

                .investment-drawer-header {
                    padding: 40px 33px;
                }

                .investment-drawer-title {
                    font-size: 40px;
                }

                .investment-drawer-toggle {
                    width: 30px;
                    height: 30px;
                }

                .investment-drawer-toggle-bar-h {
                    width: 100%;
                    height: 3px;
                }

                .investment-drawer-content-inner {
                    padding: 0 43px 70px;
                }

                .investment-drawer-toggle-bar-v {
                    width: 3px;
                    height: 100%;
                }

                .investment-card-tag {

                    font-size: 8px;
                    letter-spacing: 1.7px;

                    gap: 5px;
                }


                .investment-swiper-progress {
                    height: 3px;
                    margin-top: 30px;
                    overflow: hidden;
                    max-width: 270px;
                }

                .investment-card-image--investimentos-financeiros {
                    width: calc(387px * 0.8);
                    height: auto;
                }

                .investment-drawer[data-drawer='investimentos-financeiros'] .investment-card {
                    gap: 100px;
                }

            }

            @media only screen and (max-width: 1550px) {

                .investment-drawer-content {

                    max-width: calc(var(--container-width) - 0px);
                }

                .investment-drawer-header {
                    padding: 24px 30px;
                }

                /* NOVO: responsividade — título e toggle ligeiramente
                                                                                                                                                                                                                                                                                                                                                                                                                                                           menores, imagens e gap de Investimentos Financeiros
                                                                                                                                                                                                                                                                                                                                                                                                                                                           reduzidos proporcionalmente, separador entre slides mais
                                                                                                                                                                                                                                                                                                                                                                                                                                                           estreito */
                .investment-drawer-title {
                    font-size: 36px;
                }

                .investment-drawer-toggle {
                    width: 32px;
                    height: 32px;
                }

                .investment-card-image--private-equity {
                    width: 180px;
                    height: 180px;
                }

                .investment-card-image--investimentos-financeiros {
                    width: 250px;
                }

                .investment-drawer[data-drawer='investimentos-financeiros'] .investment-card {
                    gap: 80px;
                }

                .investment-drawer[data-drawer='private-equity'] .investment-card-excerpt {
                    font-size: 16px;
                }

                .investment-swiper .swiper-slide {
                    padding-right: 32px;
                }



                .investment-card-image--private-equity {
                    width: calc(225px * 0.7);
                    height: calc(225px * 0.7);
                    object-fit: contain;
                }




                .investment-drawer-toggle {
                    width: 25px;
                    height: 25px;
                }

                .investment-drawer-toggle-bar-h {
                    width: 100%;
                    height: 2px;
                }

                .investment-drawer-content-inner {
                    padding: 0 35px 60px;
                }

                .investment-drawer-toggle-bar-v {
                    width: 3px;
                    height: 100%;
                }

                .investment-card-tag {

                    font-size: 8px;
                    letter-spacing: 1.7px;

                    gap: 5px;
                }


                .investment-swiper-progress {
                    height: 3px;
                    margin-top: 30px;
                    overflow: hidden;
                    max-width: 270px;
                }


                .investment-drawer[data-drawer='investimentos-financeiros'] .investment-card {
                    gap: 100px;
                }
            }


            @media only screen and (max-width: 991px) {

                .investment-drawer-content {

                    max-width: calc(var(--container-width) - 0px);
                    padding-inline: var(--padding-inline);
                }

                .investment-accordion {

                    border-top-left-radius: 20px;
                    border-top-right-radius: 20px;

                    border-bottom-left-radius: 80px;
                    border-bottom-right-radius: 80px;
                }

                .investment-drawer {
                    border-bottom-left-radius: 100px;
                    border-bottom-right-radius: 100px;
                    /* max-width: var(--container-width); */
                    /* margin-inline: auto; */
                }

                .investment-drawer-header {
                    padding: 24px 30px;
                }

                /* NOVO: responsividade — título e toggle ligeiramente
                                                                                                                                                                                                                                                                                                                                                                                                                                                           menores, imagens e gap de Investimentos Financeiros
                                                                                                                                                                                                                                                                                                                                                                                                                                                           reduzidos proporcionalmente, separador entre slides mais
                                                                                                                                                                                                                                                                                                                                                                                                                                                           estreito */
                .investment-drawer-title {
                    font-size: 36px;
                }

                .investment-drawer-toggle {
                    width: 32px;
                    height: 32px;
                }

                .investment-card-image--private-equity {
                    width: 180px;
                    height: 180px;
                }

                .investment-drawer[data-drawer='investimentos-financeiros'] .investment-card {
                    gap: 80px;
                }

                .investment-drawer[data-drawer='private-equity'] .investment-card-excerpt {
                    font-size: 16px;
                }

                .investment-swiper .swiper-slide {
                    padding-right: 32px;
                }



                .investment-card-image--private-equity {
                    width: calc(225px * 0.7);
                    height: calc(225px * 0.7);
                    object-fit: contain;
                }




                .investment-drawer-toggle {
                    width: 25px;
                    height: 25px;
                }

                .investment-drawer-toggle-bar-h {
                    width: 100%;
                    height: 2px;
                }

                .investment-drawer-content-inner {
                    padding: 0 35px 60px;
                }

                .investment-drawer-toggle-bar-v {
                    width: 3px;
                    height: 100%;
                }

                .investment-card-tag {

                    font-size: 8px;
                    letter-spacing: 1.7px;

                    gap: 5px;
                }


                .investment-swiper-progress {
                    height: 3px;
                    margin-top: 30px;
                    overflow: hidden;
                    max-width: 270px;
                }

                .investment-card-image--investimentos-financeiros {
                    width: 220px;
                    height: auto;
                }

                .investment-drawer[data-drawer='investimentos-financeiros'] .investment-card {
                    gap: 100px;
                }
            }


            @media only screen and (max-width: 768px) {
                .investment-card {
                    /* flex-direction: column;
                                                                                                                                                                                                                                            align-items: flex-start; */
                }

                .investment-drawer-header {
                    padding: 35px calc(var(--padding-inline) + 20px);
                }

                .investment-drawer-content-inner {
                    padding: 0 0px 70px;
                }

                .investment-swiper:not(.swiper-initialized) .swiper-slide {
                    width: calc(50% - 8px);
                }

                .investment-swiper[data-type="investimentos-financeiros"]:not(.swiper-initialized) .swiper-slide {
                    width: 100%;
                }

                /* NOVO: mobile — título/toggle mais pequenos, imagens
                                                                                                                                                                                                                                                                                                                                                                                                                                                           reduzidas, e o "gap" gigante de Investimentos Financeiros
                                                                                                                                                                                                                                                                                                                                                                                                                                                           (149px, pensado para lado-a-lado) passa a fazer sentido
                                                                                                                                                                                                                                                                                                                                                                                                                                                           como espaço VERTICAL, já que os cartões empilham
                                                                                                                                                                                                                                                                                                                                                                                                                                                           (flex-direction:column acima) — 149px verticais era
                                                                                                                                                                                                                                                                                                                                                                                                                                                           demasiado, reduz para 24px */
                .investment-drawer-title {
                    font-size: 28px;
                }

                .investment-drawer-toggle {
                    width: 28px;
                    height: 28px;
                }

                .investment-card-image--private-equity {
                    width: 140px;
                    height: 140px;
                }

                .investment-card-image--investimentos-financeiros {
                    width: 100%;
                    max-width: 220px;
                }

                .investment-drawer[data-drawer='investimentos-financeiros'] .investment-card {
                    gap: 24px;
                }

                .investment-drawer[data-drawer='private-equity'] .investment-card-excerpt {
                    font-size: 15px;
                }

                .investment-swiper .swiper-slide {
                    padding-right: 20px;
                }

                .investment-swiper-progress {
                    max-width: 240px;
                }

                /* NOVO: abaixo de 768px, o slide da gaveta Private Equity
                                                                                                                                                                                                                                                           também mostra sempre 1 (só Investimentos Financeiros já
                                                                                                                                                                                                                                                           mostrava 1) — como agora só há 1 slide visível de cada
                                                                                                                                                                                                                                                           vez, deixa de fazer sentido "roubar" espaço ao slide com o
                                                                                                                                                                                                                                                           separador/padding-right pensado para o par lado-a-lado */
                .investment-swiper .swiper-slide {
                    padding-right: 0;
                    border-right: none;
                }

                .investment-accordion {
                    gap: 10px;
                }
            }

            @media only screen and (max-width: 600px) {
                .investment-drawer[data-drawer='investimentos-financeiros'] .investment-card {
                    gap: 24px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                }

                .investment-card-excerpt {
                    max-width: 400px;
                    text-align: center;
                }
            }

            @media only screen and (max-width: 430px) {
                .investment-drawer-title {
                    font-size: 24px;
                }

                .investment-drawer {
                    border-bottom-left-radius: 50px;
                    border-bottom-right-radius: 50px;
                }

                .investment-drawer-title {
                    font-size: 22px;
                }

                .investment-drawer-toggle {
                    width: 18px;
                    height: 18px;
                }

                .investment-card {
                    display: flex;
                    gap: 30px;
                    height: 100%;
                    flex-direction: column;
                }

                .investment-card-image--private-equity {
                    width: 100%;
                    height: 170px;
                }

                .investment-card-image--investimentos-financeiros {
                    width: 100%;
                    max-width: 60%;
                }
            }
        </style>
        {"id":469,"date":"2026-07-06T09:41:12","date_gmt":"2026-07-06T09:41:12","guid":{"rendered":"https:\/\/idsgrupo.bspacydev.com\/homepage-2\/"},"modified":"2026-09-04T14:25:16","modified_gmt":"2026-09-04T14:25:16","slug":"homepage-2","status":"publish","type":"page","link":"https:\/\/idsgrupo.bspacydev.com\/en\/homepage-2\/","title":{"rendered":"Homepage"},"content":{"rendered":"<div class=\"wpb-content-wrapper\" id=\"wpb-content-root\"><p>[vc_row el_class=&#8221;hero-section&#8221;][vc_column]        <style>\n            \/* ========================================================================== *\/\n            \/*                    Hero Frases (Scroll Pinned) Widget                     *\/\n            \/* ========================================================================== *\/\n\n            \/* height fixo \u2014 precis\u00e3o total durante o pin do GSAP *\/\n            .hero-phrases-pin-wrapper {\n                position: relative;\n                height: 100dvh;\n                overflow: hidden;\n            }\n\n            \/* --- V\u00eddeo\/imagem de fundo, herdado do widget \"Bloco de V\u00eddeo\" --- *\/\n            .hero-phrases-pin-wrapper .hero-phrases-bg-video {\n                position: absolute;\n                inset: 0;\n                width: 100%;\n                height: 100%;\n                z-index: 0;\n            }\n\n            .hero-phrases-bg-video video,\n            .hero-phrases-bg-video img {\n                width: 100%;\n                height: 100%;\n                object-fit: cover;\n                object-position: center;\n                display: block;\n            }\n\n            .hero-phrases-bg-video .video-mobile {\n                display: none;\n            }\n\n\n\n            @media only screen and (max-width: 767px) {\n                .hero-phrases-bg-video .video-desktop {\n                    display: none;\n                }\n\n                .hero-phrases-bg-video .video-mobile {\n                    display: block;\n                }\n            }\n\n            \/* Overlay escuro sobre o v\u00eddeo\/imagem \u2014 ajuda \u00e0 legibilidade do texto *\/\n            .hero-phrases-bg-video::after {\n                content: \"\";\n                position: absolute;\n                inset: 0;\n                \/* background: rgba(0, 0, 0, 0.3); *\/\n                background: linear-gradient(180deg, rgb(27 27 27 \/ 37%) 10%, rgb(129 129 129 \/ 1%) 90%);\n\n                z-index: 1;\n                pointer-events: none;\n            }\n\n            .video-sound-btn {\n                position: absolute;\n                bottom: 97px;\n                right: var(--padding-inline);\n                z-index: 10;\n                background: transparent;\n                color: white;\n                font-size: 11px;\n                font-weight: 700;\n                line-height: 1;\n                text-transform: uppercase;\n                cursor: pointer;\n                box-shadow: unset;\n                outline: unset;\n                border: unset;\n                padding: 0px;\n            }\n\n            .video-sound-btn .sound-off,\n            .video-sound-btn .sound-on {\n                display: flex;\n                align-items: center;\n                gap: 12px;\n                flex-direction: column;\n                font-size: 11px;\n                font-weight: 700;\n                line-height: normal;\n            }\n\n            .video-sound-btn .sound-on {\n                display: none;\n            }\n\n            .video-sound-btn.is-unmuted .sound-on {\n                display: flex;\n            }\n\n            .video-sound-btn.is-unmuted .sound-off {\n                display: none;\n            }\n\n            \/* --- Texto das frases --- *\/\n\n            .hero-phrases-inner {\n                position: absolute;\n                bottom: 100px;\n                left: 0;\n                width: 100%;\n                z-index: 2;\n            }\n\n            .hero-phrases-button {\n                position: absolute;\n                right: 99px;\n                bottom: 0;\n                z-index: 3;\n            }\n\n            .hero-phrases-button button {\n                background: rgba(255, 255, 255, 0.87);\n            }\n\n\n\n            .hero-phrase {\n                position: absolute;\n                bottom: 0;\n                left: 0;\n                width: 100%;\n                margin: 0;\n                padding-left: calc((100% - var(--container-width)) \/ 2);\n            }\n\n            .hero-phrase-part {\n                display: inline-block;\n                opacity: 0;\n                transform: translateY(40px);\n                visibility: hidden;\n                transition: opacity 500ms ease, transform 500ms ease, visibility 0s linear 500ms;\n                line-height: 1.1;\n            }\n\n            .hero-phrase-part-late {\n                color: var(--salmon) !important;\n                font-weight: 700 !important;\n            }\n\n            .hero-phrase.hero-phrase-active .hero-phrase-part {\n                opacity: 1;\n                visibility: visible;\n                transform: translateY(0);\n                transition: opacity 500ms ease, transform 500ms ease, visibility 0s linear 0s;\n            }\n\n            .hero-phrase.hero-phrase-active .hero-phrase-part-late {\n                transition-delay: 250ms;\n            }\n\n            \/* 4 classes \u2014 precisa de ser MAIS espec\u00edfica que a regra geral\n                                                                                                                                                                                                                                                                                                           .hero-phrase.hero-phrase-active .hero-phrase-part-late (3 classes),\n                                                                                                                                                                                                                                                                                                           sen\u00e3o nunca ganha, independentemente da ordem no ficheiro *\/\n            .hero-phrase.hero-phrase-active .hero-phrase-part-late {\n                transition-delay: 400ms;\n            }\n\n            .hero-phrase.hero-phrase-exiting .hero-phrase-part {\n                opacity: 0;\n                visibility: visible;\n                transform: translateY(-40px);\n                transition: opacity 400ms ease, transform 400ms ease;\n            }\n\n\n            @media (min-width: 2100px) {\n\n                .hero-phrases-button {\n\n                    right: var(--padding-inline);\n                }\n            }\n\n            @media only screen and (max-width: 1550px) {\n\n                .hero-phrases-inner {\n\n                    bottom: 60px;\n                }\n            }\n\n\n            @media only screen and (max-width: 991px) {\n                .hero-phrase {\n\n                    padding-inline: var(--padding-inline);\n\n                }\n\n                .hero-phrases-inner {\n                    bottom: 40px;\n                }\n\n                .hero-phrases-button {\n                    right: var(--padding-inline);\n                    \/* display: none; *\/\n                    bottom: 0px !important;\n                    top: unset;\n                    transform: translateY(-100%);\n                }\n            }\n\n\n            @media only screen and (max-width: 430px) {\n                .hero-phrases-button {\n                    bottom: 10px !important;\n                    transform: unset;\n                }\n\n                .hero-phrase {\n                    bottom: 170px;\n                    padding-inline: var(--padding-inline);\n                }\n\n\n            }\n        <\/style>\n        \n        <!-- Wrapper que ser\u00e1 \"pinned\" (fixo no ecr\u00e3) pelo GSAP \u2014 o v\u00eddeo\/imagem\n             de fundo vive AQUI DENTRO desde o in\u00edcio (n\u00e3o \u00e9 movido via JS),\n             para nunca sair do fluxo que o ScrollTrigger controla -->\n        <div class=\"hero-phrases-pin-wrapper\">\n\n                            <!-- Fundo: v\u00eddeo (desktop\/mobile) ou imagem poster como fallback.\n                     Reaproveita a mesma estrutura\/classes do widget \"Bloco de V\u00eddeo\"\n                     original, para herdar o CSS de object-fit j\u00e1 testado -->\n                <div class=\"container-video hero-phrases-bg-video\" id=\"hero-phrases-video-6aec6f0dcd813\">\n\n                                            <img decoding=\"async\" class=\"video-desktop-poster\" src=\"https:\/\/idsgrupo.bspacydev.com\/wp-content\/uploads\/bosvista-hero-1.webp\" alt=\"\">\n                    \n                    \n                    \n                <\/div>\n            \n            <div class=\"hero-phrases-inner\">\n                \n                    <h1 class=\"hero-phrase hero-phrase-first\"\n                        data-phrase-index=\"0\">\n                                                    <span class=\"hero-phrase-part\">Growing with<\/span>\n                        \n                                                    <span class=\"hero-phrase-part hero-phrase-part-late\">Vision<\/span>\n                                            <\/h1>\n\n                \n                    <h1 class=\"hero-phrase\"\n                        data-phrase-index=\"1\">\n                                                    <span class=\"hero-phrase-part\">Developing with<\/span>\n                        \n                                                    <span class=\"hero-phrase-part hero-phrase-part-late\">Rigour<\/span>\n                                            <\/h1>\n\n                \n                    <h1 class=\"hero-phrase\"\n                        data-phrase-index=\"2\">\n                                                    <span class=\"hero-phrase-part\">Managing with<\/span>\n                        \n                                                    <span class=\"hero-phrase-part hero-phrase-part-late\">Responsibility<\/span>\n                                            <\/h1>\n\n                \n                \n                    <div class=\"hero-phrases-button\">\n\n                        <button                            class=\"mainButton newsletterButton\"\n                            data-magnetic-strength=\"0.2\"\n                            data-form-target=\"contacto\"\n\n                                                            type=\"button\"\n                            >\n\n                            <span class=\"mainButton-dot\"><\/span>\n\n                            <div class=\"button-text-wrapper\">\n                                <span class=\"mainButton-text\">\n                                    TALK TO US                                <\/span>\n                            <\/div>\n\n                        <\/button>\n\n                    <\/div>\n\n                \n            <\/div>\n        <\/div>\n\n        [\/vc_column][\/vc_row][vc_row el_class=&#8221;quem-somos-section pagePaddings light-bg&#8221; el_id=&#8221;grupo-ids&#8221;][vc_column][vc_raw_html css=&#8221;&#8221;]JTNDZGl2JTIwY2xhc3MlM0QlMjJxdWVtLXNvbW9zLWltYWdlLWFuY2hvciUyMiUyMGlkJTNEJTIycXVlbVNvbW9zSW1hZ2VBbmNob3IlMjIlM0UlM0MlMkZkaXYlM0U=[\/vc_raw_html][vc_row_inner equal_height=&#8221;yes&#8221; content_placement=&#8221;middle&#8221;][vc_column_inner width=&#8221;1\/2&#8243;][vc_custom_heading text=&#8221;Who We Are&#8221; font_container=&#8221;tag:h2|text_align:right&#8221; use_theme_fonts=&#8221;yes&#8221; css=&#8221;&#8221;][\/vc_column_inner][vc_column_inner width=&#8221;1\/2&#8243;][vc_column_text css=&#8221;&#8221; el_class=&#8221;gsap-fill-words bold&#8221;]<strong>Transforming opportunities into lasting value.<\/strong>[\/vc_column_text][vc_column_text css=&#8221;&#8221; el_class=&#8221;gsap-fill-words&#8221;]IDS is a business group focused on asset development and management, combining strategic vision, financial strength and execution capability. We create lasting value through assets, projects and strategic holdings designed to respond to today&#8217;s challenges while remaining relevant in the future.[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][\/vc_column][\/vc_row][vc_section el_class=&#8221;complexSection&#8221;][vc_row el_class=&#8221;identificamos-section light-bg&#8221;][vc_column]        <style>\n            \/* ========================================================================== *\/\n            \/*                    Oportunidades (Slide Scroll) Widget                    *\/\n            \/* ========================================================================== *\/\n\n            .oportunidades-pin-wrapper {\n                position: relative;\n                height: 100vh;\n                overflow: hidden;\n            }\n\n            .oportunidades-inner {\n                position: relative;\n                height: 100%;\n                background-color: var(--white-bg);\n                display: flex;\n                align-items: center;\n            }\n\n            \/* --- Coluna esquerda: imagens sobrepostas --- *\/\n            .oportunidades-left {\n                position: relative;\n                width: 50%;\n                height: 100%;\n            }\n\n            .oportunidade-image {\n                position: absolute;\n                inset: 0;\n                clip-path: inset(100% 0 0 0);\n            }\n\n            .oportunidade-image.is-active {\n                opacity: 1;\n            }\n\n            .oportunidade-image img {\n                width: 100%;\n                height: 100%;\n                object-fit: cover;\n                display: block;\n            }\n\n            \/* --- Coluna direita: lista de frases *\/\n            .oportunidades-right {\n                width: 50%;\n                padding-right: 60px;\n                display: flex;\n                flex-direction: column;\n                gap: 0px;\n                z-index: 2;\n            }\n\n            .oportunidade-item {\n                display: flex;\n                align-items: center;\n                gap: 70px;\n                padding-block: 10px;\n                transition: padding-block 400ms ease;\n            }\n\n            \/* Item activo \u2014 ganha destaque com mais respiro vertical, distinguindo-se visualmente dos restantes na lista *\/\n            .oportunidade-item.is-active {\n                padding-block: 30px 90px;\n            }\n\n            \/* Bola *\/\n            .oportunidade-dot {\n                flex-shrink: 0;\n                width: 25px;\n                height: 25px;\n                border-radius: 50%;\n                background-color: var(--grey-text);\n                margin-left: calc(25px \/ -2);\n                transition: all 400ms ease;\n            }\n\n            .oportunidade-item.is-active .oportunidade-dot {\n                background-color: var(--salmon);\n                width: calc(25px * 2);\n                height: calc(25px * 2);\n                margin-left: calc(25px * 2 \/ -2);\n\n            }\n\n            .oportunidade-text {\n                display: flex;\n                flex-direction: column;\n            }\n\n            .oportunidade-part1 {\n                display: inline-block;\n                color: var(--grey-text);\n            }\n\n            \/* Parte 2 *\/\n            .oportunidade-part2 {\n                color: var(--salmon);\n                font-weight: 700;\n                margin: 0;\n                opacity: 0;\n                max-height: 0;\n                overflow: hidden;\n                transition: all 300ms ease;\n            }\n\n            .oportunidade-item.is-active .oportunidade-part1 {\n                color: var(--black);\n\n            }\n\n            \/* NOVO: adicionado um transition-delay de 200ms para a revela\u00e7\u00e3o da Parte 2 *\/\n            .oportunidade-item.is-active .oportunidade-part2 {\n                opacity: 1;\n                max-height: 100px;\n                transition-delay: 200ms;\n            }\n\n\n\n            \/* --- Barra de progresso vertical (desktop), no extremo direito ---\n                                                                                                                                                                                                                                                               height controlado pela vari\u00e1vel CSS --progress-percent, definida\n                                                                                                                                                                                                                                                               pelo JS. O JS n\u00e3o sabe (nem precisa de saber) em que breakpoint\n                                                                                                                                                                                                                                                               est\u00e1 \u2014 s\u00f3 define a percentagem; \u00e9 o CSS que decide se ela\n                                                                                                                                                                                                                                                               controla height (aqui) ou width (ver media query mobile abaixo) *\/\n            .oportunidades-progress {\n                position: absolute;\n                top: 50%;\n                right: 15px;\n                transform: translateY(-50%);\n                height: 200px;\n                width: 3px;\n            }\n\n            .oportunidades-progress-track {\n                position: relative;\n                width: 100%;\n                height: 100%;\n                background-color: var(--grey-text);\n                border-radius: 2px;\n                overflow: hidden;\n            }\n\n            .oportunidades-progress-fill {\n                position: absolute;\n                top: 0;\n                left: 0;\n                width: 100%;\n                height: var(--progress-percent, 0%);\n                background-color: var(--salmon);\n                transition: height 400ms ease;\n            }\n\n            @media only screen and (max-width: 1550px) {\n\n                .oportunidade-item {\n                    gap: 50px;\n                }\n\n                \/* Item activo \u2014 ganha destaque com mais respiro vertical, distinguindo-se visualmente dos restantes na lista *\/\n                .oportunidade-item.is-active {\n                    padding-block: 30px 60px;\n                }\n\n                \/* Bola *\/\n                .oportunidade-dot {\n                    width: 18px;\n                    height: 18px;\n                    margin-left: calc(18px \/ -2);\n                }\n\n                .oportunidade-item.is-active .oportunidade-dot {\n                    width: calc(18px * 2);\n                    height: calc(18px * 2);\n                    margin-left: calc(18px * 2 \/ -2);\n                }\n\n                \/* Override inativo primeiro slide - 1550px *\/\n                .oportunidades-pin-wrapper:not(.is-pinned) .oportunidade-item[data-slide-index=\"0\"] .oportunidade-dot {\n                    width: 18px !important;\n                    height: 18px !important;\n                    margin-left: calc(18px \/ -2) !important;\n                }\n            }\n\n            @media only screen and (max-width: 991px) {\n\n                .oportunidades-right {\n                    padding-right: 30px;\n                }\n\n                .oportunidades-progress {\n                    bottom: 20px;\n                    top: unset;\n                    left: 75%;\n                    transform: translateX(-50%);\n                    height: 3px;\n                    width: 33%;\n                }\n\n                .oportunidades-progress-fill {\n                    width: var(--progress-percent, 0%);\n                    height: 100%;\n                    transition: width 400ms ease;\n                }\n            }\n\n            @media only screen and (max-width: 768px) {\n                .oportunidade-item {\n                    gap: 20px;\n                }\n            }\n\n\n            @media only screen and (max-width: 500px) {\n                .oportunidades-inner {\n                    flex-direction: column;\n                    align-items: stretch;\n                    \/* padding-block: 40px; *\/\n                }\n\n                .oportunidades-left,\n                .oportunidades-right {\n                    width: 100%;\n                }\n\n\n                .oportunidades-left {\n                    height: 300px;\n                    flex-shrink: 0;\n                    margin-bottom: 50px;\n                }\n\n                .oportunidades-right {\n                    padding-inline: var(--padding-inline);\n\n                    overflow-y: auto;\n                }\n\n                .oportunidade-item {\n                    gap: 16px;\n                }\n\n                .oportunidade-item.is-active {\n                    padding-block: 10px 20px;\n                }\n\n                .oportunidade-dot {\n                    width: 12px;\n                    height: 12px;\n                    margin-left: calc(12px \/ -2);\n                }\n\n                .oportunidade-item.is-active .oportunidade-dot {\n                    width: calc(12px * 2);\n                    height: calc(12px * 2);\n                    margin-left: calc(12px * 2 \/ -2);\n                }\n\n                \/* Override inativo primeiro slide - 500px *\/\n                .oportunidades-pin-wrapper:not(.is-pinned) .oportunidade-item[data-slide-index=\"0\"] {\n                    padding-block: 10px 20px !important;\n                }\n\n                .oportunidades-pin-wrapper:not(.is-pinned) .oportunidade-item[data-slide-index=\"0\"] .oportunidade-dot {\n                    width: 12px !important;\n                    height: 12px !important;\n                    margin-left: calc(12px \/ -2) !important;\n                }\n\n                .oportunidades-progress {\n                    left: 50%;\n                    top: calc(300px + 50px \/ 2);\n                    bottom: unset;\n                    width: 50%;\n                }\n            }\n        <\/style>\n        \n        <!-- Wrapper que fica \"pinned\" (fixo no ecr\u00e3) enquanto o scroll avan\u00e7a\n             entre os slides \u2014 mesma t\u00e9cnica j\u00e1 usada no widget Hero Frases -->\n        <div class=\"oportunidades-pin-wrapper\">\n            <div class=\"oportunidades-inner\">\n\n                <!-- Coluna esquerda: imagens sobrepostas, s\u00f3 a do slide activo \u00e9 vis\u00edvel -->\n                <div class=\"oportunidades-left\">\n                                            <div class=\"oportunidade-image is-active\"\n                            data-slide-index=\"0\">\n                                                            <img decoding=\"async\" src=\"https:\/\/idsgrupo.bspacydev.com\/wp-content\/uploads\/identificamos-oportunidades-2-1.webp\" alt=\"\">\n                                                    <\/div>\n                                                <div class=\"oportunidade-image\"\n                            data-slide-index=\"1\">\n                                                            <img decoding=\"async\" src=\"https:\/\/idsgrupo.bspacydev.com\/wp-content\/uploads\/estruturamos-solucoes-1.webp\" alt=\"\">\n                                                    <\/div>\n                                                <div class=\"oportunidade-image\"\n                            data-slide-index=\"2\">\n                                                            <img decoding=\"async\" src=\"https:\/\/idsgrupo.bspacydev.com\/wp-content\/uploads\/identificamos.webp\" alt=\"\">\n                                                    <\/div>\n                                                <div class=\"oportunidade-image\"\n                            data-slide-index=\"3\">\n                                                            <img decoding=\"async\" src=\"https:\/\/idsgrupo.bspacydev.com\/wp-content\/uploads\/gerimos-ativos-1.webp\" alt=\"\">\n                                                    <\/div>\n                                                <div class=\"oportunidade-image\"\n                            data-slide-index=\"4\">\n                                                            <img decoding=\"async\" src=\"https:\/\/idsgrupo.bspacydev.com\/wp-content\/uploads\/criamos-valor-1.webp\" alt=\"\">\n                                                    <\/div>\n                                        <\/div>\n\n                <!-- Coluna direita: lista de TODAS as frases, sempre vis\u00edveis;\n                     s\u00f3 a Parte 2 + o padding extra do item activo mudam -->\n                <div class=\"oportunidades-right\">\n                                            <div class=\"oportunidade-item is-active\"\n                            data-slide-index=\"0\">\n                            <span class=\"oportunidade-dot\"><\/span>\n                            <div class=\"oportunidade-text\">\n                                                                    <h3 class=\"oportunidade-part1\">We identify<\/h3>\n                                                                                                    <h2 class=\"oportunidade-part2\">opportunities<\/h2>\n                                                            <\/div>\n                        <\/div>\n                                                <div class=\"oportunidade-item\"\n                            data-slide-index=\"1\">\n                            <span class=\"oportunidade-dot\"><\/span>\n                            <div class=\"oportunidade-text\">\n                                                                    <h3 class=\"oportunidade-part1\">We structure<\/h3>\n                                                                                                    <h2 class=\"oportunidade-part2\">solutions<\/h2>\n                                                            <\/div>\n                        <\/div>\n                                                <div class=\"oportunidade-item\"\n                            data-slide-index=\"2\">\n                            <span class=\"oportunidade-dot\"><\/span>\n                            <div class=\"oportunidade-text\">\n                                                                    <h3 class=\"oportunidade-part1\">We develop<\/h3>\n                                                                                                    <h2 class=\"oportunidade-part2\">projects<\/h2>\n                                                            <\/div>\n                        <\/div>\n                                                <div class=\"oportunidade-item\"\n                            data-slide-index=\"3\">\n                            <span class=\"oportunidade-dot\"><\/span>\n                            <div class=\"oportunidade-text\">\n                                                                    <h3 class=\"oportunidade-part1\">We manage and enhance<\/h3>\n                                                                                                    <h2 class=\"oportunidade-part2\">assets<\/h2>\n                                                            <\/div>\n                        <\/div>\n                                                <div class=\"oportunidade-item\"\n                            data-slide-index=\"4\">\n                            <span class=\"oportunidade-dot\"><\/span>\n                            <div class=\"oportunidade-text\">\n                                                                    <h3 class=\"oportunidade-part1\">We create<\/h3>\n                                                                                                    <h2 class=\"oportunidade-part2\">value<\/h2>\n                                                            <\/div>\n                        <\/div>\n                                        <\/div>\n\n                <!-- Barra de progresso \u2014 vertical em desktop, horizontal em mobile\n                     (ver media query) -->\n                <div class=\"oportunidades-progress\">\n                    <div class=\"oportunidades-progress-track\">\n                        <div class=\"oportunidades-progress-fill\"><\/div>\n                    <\/div>\n                <\/div>\n\n            <\/div>\n        <\/div>\n\n                <script>\n            (function () {\n                var wrappers = document.querySelectorAll('.oportunidades-pin-wrapper:not([data-slides-total])');\n                var lastWrapper = wrappers[wrappers.length - 1];\n                if (lastWrapper) lastWrapper.setAttribute('data-slides-total', '5');\n            })();\n        <\/script>\n\n        [\/vc_column][\/vc_row][vc_row el_class=&#8221;ids-em-numeros-section light-bg&#8221;][vc_column]        <style>\n            \/* ========================================================================== *\/\n            \/*                         IDS em N\u00fameros Widget                              *\/\n            \/* ========================================================================== *\/\n\n            .ids-numeros-pin-wrapper {\n                \/* Vari\u00e1veis CSS \u2014 \u00fanico s\u00edtio a editar se precisares de\n                                                                                                                                                                                   ajustar os tamanhos finais (o JS e o resto do CSS calculam\n                                                                                                                                                                                   tudo a partir daqui, incluindo a posi\u00e7\u00e3o do texto) *\/\n                --circle-size: 980px;\n                --ball-size: 33px;\n                --text-gap: 50px;\n\n                position: relative;\n                height: 100vh;\n                overflow: hidden;\n            }\n\n            \/* Circunfer\u00eancia (borda) \u2014 centrada via top\/left\/margin-negativo\n                                                                                                                                                                               (N\u00c3O via transform), porque o transform fica 100% reservado\n                                                                                                                                                                               para o \"scale\" que o GSAP aplica *\/\n            .ids-numeros-circle-wrapper {\n                position: absolute;\n                top: 50%;\n                left: 50%;\n                width: var(--circle-size);\n                height: var(--circle-size);\n                margin-top: calc(var(--circle-size) \/ -2);\n                margin-left: calc(var(--circle-size) \/ -2);\n                transform-origin: center center;\n                will-change: transform;\n            }\n\n            .ids-numeros-circle {\n                width: 100%;\n                height: 100%;\n                border-radius: 50%;\n                border: 1px solid var(--black);\n            }\n\n            h2 .ids-numeros-title-part2 {\n                color: var(--salmon);\n            }\n\n            \/* Bola \u2014 wrapper PR\u00d3PRIO e independente, centrado exactamente\n                                                                                                                                                                               nas mesmas coordenadas da circunfer\u00eancia (por isso fica\n                                                                                                                                                                               visualmente conc\u00eantrica com ela, mesmo n\u00e3o sendo filha dela\n                                                                                                                                                                               no HTML). Tem a sua pr\u00f3pria anima\u00e7\u00e3o de scale \u2014 no reverso,\n                                                                                                                                                                               ao contr\u00e1rio da circunfer\u00eancia, esta N\u00c3O \u00e9 revertida, porque\n                                                                                                                                                                               continua a ser usada nas sec\u00e7\u00f5es seguintes *\/\n            .ids-numeros-ball-wrapper {\n                position: absolute;\n                top: 50%;\n                left: 50%;\n                width: var(--ball-size);\n                height: var(--ball-size);\n                margin-top: calc(var(--ball-size) \/ -2);\n                margin-left: calc(var(--ball-size) \/ -2);\n                transform-origin: center center;\n                will-change: transform;\n            }\n\n            .ids-numeros-ball {\n                width: 100%;\n                height: 100%;\n                border-radius: 50%;\n                background-color: var(--salmon);\n            }\n\n            \/* Texto \u2014 posi\u00e7\u00e3o FIXA, calculada a partir do tamanho FINAL da\n                                                                                                                                                                               circunfer\u00eancia (n\u00e3o muda com a anima\u00e7\u00e3o, porque s\u00f3 aparece\n                                                                                                                                                                               depois do crescimento j\u00e1 ter terminado) *\/\n            .ids-numeros-text {\n                position: absolute;\n                top: calc(50% + (var(--ball-size) \/ 2) + var(--text-gap));\n                left: 50%;\n                transform: translateX(-50%);\n                text-align: center;\n                width: max-content;\n                max-width: 90vw;\n            }\n\n            \/* Novo wrapper \u2014 \u00e9 ESTE que o GSAP escala como um todo no reverso,\n                                                                                                           em vez de cada texto individualmente. O .ids-numeros-text (pai)\n                                                                                                           continua s\u00f3 a tratar da posi\u00e7\u00e3o\/centragem, nunca \u00e9 tocado pelo scale *\/\n            .ids-numeros-text-scale {\n                transform-origin: center center;\n            }\n\n            .ids-numeros-title {\n                margin: 0;\n                justify-content: center;\n                gap: 10px;\n            }\n\n            \/* T\u00edtulo \u2014 as duas partes come\u00e7am escondidas (fade-in-up),\n                                                                                                                                                                               a mesma t\u00e9cnica j\u00e1 usada no Split Title e no Hero Frases.\n                                                                                                                                                                               Aqui a revela\u00e7\u00e3o \u00e9 controlada pela timeline GSAP (scrub),\n                                                                                                                                                                               n\u00e3o por classes CSS, mas o estado inicial continua a ser\n                                                                                                                                                                               definido aqui em CSS, para nunca haver \"flash\" de conte\u00fado\n                                                                                                                                                                               vis\u00edvel antes do JS carregar *\/\n            .ids-numeros-title-part1,\n            .ids-numeros-title-part2 {\n                display: inline-block;\n                opacity: 0;\n                transform: translateY(30px);\n                transform-origin: center center;\n            }\n\n            .ids-numeros-title-part2 {\n                color: var(--salmon);\n            }\n\n            .ids-numeros-subtitle {\n                margin-top: 16px;\n                color: var(--burgundy);\n                opacity: 0;\n                transform: translateY(30px);\n                transform-origin: center center;\n            }\n\n            @media only screen and (max-width: 1550px) {\n                .ids-numeros-pin-wrapper {\n                    --circle-size: 700px;\n                    --ball-size: 28px;\n                }\n            }\n\n            @media only screen and (max-width: 991px) {\n                .ids-numeros-pin-wrapper {\n                    --circle-size: 480px;\n                    --ball-size: 22px;\n                    --text-gap: 30px;\n                }\n            }\n\n            @media only screen and (max-width: 600px) {\n                .ids-numeros-pin-wrapper {\n                    --circle-size: 360px;\n                    --ball-size: 18px;\n                    --text-gap: 20px;\n                }\n\n                .ids-numeros-subtitle {\n                    margin-block: 10px;\n                    font-size: 15px;\n                    max-width: 200px !important;\n                    margin-inline: auto;\n                }\n\n            }\n        <\/style>\n        \n        <!-- Wrapper que fica \"pinned\" (fixo no ecr\u00e3) durante toda a sequ\u00eancia:\n             1) circunfer\u00eancia + bola crescem, 2) t\u00edtulo revela-se em 2 partes,\n             3) subt\u00edtulo revela-se, 4) tudo encolhe de volta. Uma \u00fanica\n             timeline GSAP ligada ao scroll (scrub) controla as 4 fases \u2014\n             o reverso (scroll para tr\u00e1s) acontece automaticamente, de gra\u00e7a,\n             porque a timeline nunca deixa de estar ligada \u00e0 posi\u00e7\u00e3o do scroll -->\n        <div class=\"ids-numeros-pin-wrapper\">\n\n            <!-- Circunfer\u00eancia (borda) e bola s\u00e3o escaladas SEPARADAMENTE \u2014\n                 cada uma tem a sua pr\u00f3pria anima\u00e7\u00e3o. Isto permite que, no\n                 reverso, a circunfer\u00eancia encolha mas a bola FIQUE como\n                 est\u00e1 (n\u00e3o reverte), porque continua a ser usada nas\n                 pr\u00f3ximas sec\u00e7\u00f5es -->\n            <div class=\"ids-numeros-circle-wrapper\" id=\"idsNumerosCircleWrapper\">\n                <div class=\"ids-numeros-circle\"><\/div>\n            <\/div>\n\n            <div class=\"ids-numeros-ball-wrapper\" id=\"idsNumerosBallWrapper\">\n                <div class=\"ids-numeros-ball\"><\/div>\n            <\/div>\n\n            <!-- Texto \u2014 posicionado 50px abaixo da circunfer\u00eancia (tamanho\n                 final, fixo), come\u00e7a invis\u00edvel e s\u00f3 se revela depois da\n                 circunfer\u00eancia terminar de crescer -->\n            <div class=\"ids-numeros-text\">\n                <div class=\"ids-numeros-text-scale\" id=\"idsNumerosTextScale\">\n                    <h2 class=\"ids-numeros-title\">\n                                                    <span class=\"ids-numeros-title ids-numeros-title-part1\">IDS in<\/span>\n                                                                            <span class=\"ids-numeros-title  ids-numeros-title-part2\">Numbers<\/span>\n                                            <\/h2>\n\n                                            <p class=\"ids-numeros-subtitle\">Scale, consistency and a long-term vision<\/p>\n                                    <\/div>\n            <\/div>\n\n        <\/div>\n\n        [\/vc_column][\/vc_row][vc_row el_class=&#8221;experiencia-section&#8221;][vc_column]        <style>\n            \/* ========================================================================== *\/\n            \/*                      Experi\u00eancia (Sec\u00e7\u00e3o 2) Widget                        *\/\n            \/* ========================================================================== *\/\n            .experiencia-text-item em {\n                font-style: normal;\n                \/* remove o it\u00e1lico por defeito *\/\n                font-weight: 100;\n                \/* o peso que quiseres \u2014 ajusta ao gosto *\/\n            }\n\n            .experiencia-pin-wrapper {\n\n                --final-ball-size: 993px;\n\n                position: relative;\n                height: 100vh;\n                overflow: hidden;\n            }\n\n            \/* --- Imagens de fundo (z-index 0) --- *\/\n            .experiencia-images {\n                position: absolute;\n                inset: 0;\n                z-index: 0;\n                opacity: 0;\n                transition: opacity 300ms ease;\n            }\n\n            .experiencia-images.is-revealed {\n                opacity: 1;\n            }\n\n            .experiencia-image {\n                position: absolute;\n                inset: 0;\n                background-size: cover;\n                background-position: center;\n                clip-path: inset(100% 0 0 0);\n            }\n\n            .experiencia-image-overlay {\n                display: none;\n                position: absolute;\n                inset: 0;\n                background-color: #FF7064;\n                mix-blend-mode: overlay;\n                pointer-events: none;\n            }\n\n            .experiencia-shape {\n                position: absolute;\n                bottom: 0;\n                left: 50%;\n                width: 50vw;\n                height: 300px;\n                border-radius: 250px;\n                background-color: #FCC;\n                background-size: cover;\n                background-position: center;\n                transform: translateY(100%);\n                z-index: 1;\n                \/* NOVO: clipa o filho .experiencia-shape-image ao border-radius\n                                                                                                                                   animado da shape, para a imagem nunca \"sair\" da forma *\/\n                overflow: hidden;\n            }\n\n            \/* NOVO: camada s\u00f3 com a imagem do \u00faltimo slide \u2014 opacidade e\n                                                                                                                               transi\u00e7\u00e3o pr\u00f3prias, independentes da cor de fundo da shape\n                                                                                                                               (que se mant\u00e9m sempre opaca por baixo). Fica pronta com a\n                                                                                                                               imagem desde o in\u00edcio, escondida, \u00e0 espera do fade-in no\n                                                                                                                               momento exato em que as .experiencia-images desaparecem *\/\n            .experiencia-shape-image {\n                position: absolute;\n                inset: 0;\n                background-size: cover;\n                background-position: center;\n                opacity: 0;\n                transition: opacity 300ms ease;\n            }\n\n            .experiencia-shape-image.is-revealed {\n                opacity: 1;\n            }\n\n            \/* --- Barra de progresso, lado esquerdo \u2014 mesmo padr\u00e3o do  Oportunidades, com o mesmo mecanismo de vari\u00e1vel CSS --- *\/\n            .experiencia-progress {\n                position: absolute;\n                top: 50%;\n                left: 30px;\n                transform: translateY(-50%);\n                height: 200px;\n                width: 3px;\n                z-index: 2;\n                opacity: 0;\n                transition: opacity 300ms ease;\n            }\n\n            .experiencia-progress.is-revealed {\n                opacity: 1;\n                transition: opacity 300ms ease;\n\n            }\n\n            .experiencia-progress-track {\n                position: relative;\n                width: 100%;\n                height: 100%;\n                background-color: var(--grey-text);\n                border-radius: 2px;\n                overflow: hidden;\n            }\n\n            .experiencia-progress-fill {\n                position: absolute;\n                top: 0;\n                left: 0;\n                width: 100%;\n                height: var(--progress-percent, 0%);\n                background-color: var(--salmon);\n                transition: height 400ms ease;\n            }\n\n            \/* --- Textos, lado direito --- *\/\n            .experiencia-texts {\n                opacity: 0;\n                \/* transition: opacity 500ms ease; *\/\n            }\n\n            .experiencia-texts .experiencia-text-item p {\n                opacity: 0;\n                transition: opacity 300ms ease;\n            }\n\n            .experiencia-texts.is-revealed .experiencia-text-item p {\n                opacity: 1;\n            }\n\n\n            .experiencia-text-item p {\n                text-align: left;\n                margin: 0px !important;\n            }\n\n            .experiencia-text-item .experiencia-text1 {\n                color: #FFF;\n                font-size: 125px;\n                font-weight: 700;\n                line-height: normal;\n            }\n\n            .experiencia-text-item .experiencia-text2 {\n                color: #E4DED2;\n                font-size: 76.8px;\n                font-weight: 500;\n                line-height: 1;\n            }\n\n            .experiencia-text-item .experiencia-text3 {\n                color: #E4DED2;\n                font-size: 36px;\n                font-weight: 500;\n                line-height: 1;\n                margin-top: 10px !important;\n            }\n\n\n\n            .experiencia-texts.is-revealed {\n                opacity: 1;\n            }\n\n\n            .experiencia-text-item {\n                position: absolute;\n                top: 50%;\n                left: 70%;\n                width: var(--final-ball-size);\n                height: var(--final-ball-size);\n                border-radius: 50%;\n                background-color: #460C17;\n                display: flex;\n                align-items: flex-start;\n                flex-direction: column;\n                justify-content: center;\n                text-align: center;\n                transform: translate(-50%, -50%);\n                padding: 100px;\n                padding-left: 150px;\n                box-sizing: border-box;\n                z-index: 4 !important;\n                clip-path: inset(100% 0 0 0);\n            }\n\n            \/* --- Bola (topo de tudo, z-index 3) --- *\/\n            .experiencia-ball-wrapper {\n                position: absolute;\n                top: 50px;\n                left: 70%;\n                \/* era 50% *\/\n                width: 33px;\n                height: 33px;\n                border-radius: 50%;\n                background-color: var(--salmon);\n                opacity: 0;\n                z-index: 3;\n            }\n\n            .experiencia-ball-wrapper.is-visible {\n                opacity: 1;\n            }\n\n\n            .experiencia-center-dot {\n                position: absolute;\n                top: 50%;\n                left: 50%;\n                transform: translate(-50%, -50%);\n                width: 22px;\n                height: 22px;\n                border-radius: 50%;\n                background-color: var(--salmon);\n                z-index: 5;\n                opacity: 0;\n                transition: opacity 500ms ease;\n                pointer-events: none;\n            }\n\n            .experiencia-center-dot.is-revealed {\n                opacity: 1;\n            }\n\n            .experiencia-outro-text {\n                position: absolute;\n                top: 50%;\n                left: 50%;\n                white-space: nowrap;\n                z-index: 6;\n                pointer-events: none;\n            }\n\n            .experiencia-outro-text-part {\n                display: inline-block;\n                font-size: 230px;\n                font-size: 12vw;\n                font-style: normal;\n                font-weight: 400;\n                line-height: normal;\n                color: #460C17;\n            }\n\n            .experiencia-outro-text-part:not(:last-child) {\n                margin-right: 0.25em;\n            }\n\n            \/* Parte 2 \u2014 cor salmon + bold, mesmo padr\u00e3o usado no texto animado do widget Porqu\u00ea IDS *\/\n            .experiencia-outro-text-part.experiencia-outro-text-part2 {\n                color: var(--salmon);\n                font-weight: 700;\n            }\n\n            \/* ==========================================================================  MEDIA QUERIES                                               ========================================================================== *\/\n\n            @media only screen and (max-width: 1750px) {\n                .experiencia-pin-wrapper {\n                    --final-ball-size: 844px;\n                }\n\n                .experiencia-text-item {\n                    padding: 85px;\n                    padding-left: 128px;\n                }\n\n                .experiencia-text-item .experiencia-text1 {\n                    font-size: 106px;\n                }\n\n                .experiencia-text-item .experiencia-text2 {\n                    font-size: 65px;\n                }\n\n                .experiencia-text-item .experiencia-text3 {\n                    font-size: 31px;\n                }\n            }\n\n            @media only screen and (max-width: 1550px) {\n                .experiencia-pin-wrapper {\n                    --final-ball-size: 695px;\n                }\n\n                .experiencia-text-item {\n                    padding: 70px;\n                    padding-left: 105px;\n                }\n\n                .experiencia-text-item .experiencia-text1 {\n                    font-size: 88px;\n                }\n\n                .experiencia-text-item .experiencia-text2 {\n                    font-size: 54px;\n                }\n\n                .experiencia-text-item .experiencia-text3 {\n                    font-size: 25px;\n                }\n\n                .experiencia-progress {\n                    height: 170px;\n                }\n            }\n\n            @media only screen and (max-width: 1250px) {\n                .experiencia-pin-wrapper {\n                    --final-ball-size: 576px;\n                }\n\n                .experiencia-text-item {\n                    padding: 58px;\n                    padding-left: 87px;\n                }\n\n                .experiencia-text-item .experiencia-text1 {\n                    font-size: 73px;\n                }\n\n                .experiencia-text-item .experiencia-text2 {\n                    font-size: 44px;\n                }\n\n                .experiencia-text-item .experiencia-text3 {\n                    font-size: 21px;\n                }\n\n                .experiencia-progress {\n                    height: 150px;\n                }\n\n                .experiencia-center-dot {\n                    width: 18px;\n                    height: 18px;\n                }\n            }\n\n            @media only screen and (max-width: 991px) {\n                .experiencia-pin-wrapper {\n                    --final-ball-size: 477px;\n                }\n\n                .experiencia-texts {\n                    right: 30px;\n                    max-width: 260px;\n                }\n\n                .experiencia-text-item {\n                    padding: 48px;\n                    padding-left: 72px;\n                }\n\n                .experiencia-text-item .experiencia-text1 {\n                    font-size: 60px;\n                }\n\n                .experiencia-text-item .experiencia-text2 {\n                    font-size: 37px;\n                }\n\n                .experiencia-text-item .experiencia-text3 {\n                    font-size: 18px;\n                }\n\n                .experiencia-progress {\n                    left: 15px;\n                    height: 140px;\n                }\n\n                .experiencia-ball-wrapper {\n                    width: 26px;\n                    height: 26px;\n                }\n            }\n\n            @media only screen and (max-width: 768px) {\n                .experiencia-pin-wrapper {\n                    --final-ball-size: 397px;\n                }\n\n                .experiencia-text-item {\n                    padding: 40px;\n                    padding-left: 60px;\n                }\n\n                .experiencia-text-item .experiencia-text1 {\n                    font-size: 50px;\n                }\n\n                .experiencia-text-item .experiencia-text2 {\n                    font-size: 31px;\n                }\n\n                .experiencia-text-item .experiencia-text3 {\n                    font-size: 16px;\n                }\n\n                .experiencia-progress {\n                    height: 120px;\n                }\n\n                .experiencia-center-dot {\n                    width: 15px;\n                    height: 15px;\n                }\n            }\n\n            @media only screen and (max-width: 600px) {\n                .experiencia-pin-wrapper {\n                    --final-ball-size: 318px;\n                }\n\n                .experiencia-center-dot {\n                    width: 12px;\n                    height: 12px;\n                    top: 38%;\n                }\n\n                .experiencia-text-item {\n                    padding: 48px;\n                    left: 50%;\n                    align-items: center;\n                    padding-top: 100px;\n                }\n\n                .experiencia-text-item .experiencia-text1 {\n                    font-size: 40px;\n                    text-align: center;\n\n                }\n\n                .experiencia-text-item .experiencia-text2 {\n                    font-size: 25px;\n                    text-align: center;\n                }\n\n                .experiencia-text-item .experiencia-text3 {\n                    font-size: 14px;\n                    text-align: center;\n\n                }\n\n                .experiencia-progress {\n                    height: 100px;\n                    width: 2px;\n                }\n\n\n                .experiencia-ball-wrapper {\n                    left: 50%;\n                    width: 22px;\n                    height: 22px;\n                }\n\n            }\n\n            @media only screen and (max-width: 430px) {\n                .experiencia-pin-wrapper {\n                    --final-ball-size: 248px;\n                }\n\n                .experiencia-text-item {\n                    padding: 24px;\n                }\n\n                .experiencia-text-item .experiencia-text1 {\n                    font-size: 32px;\n                }\n\n                .experiencia-text-item .experiencia-text2 {\n                    font-size: 20px;\n                }\n\n                .experiencia-text-item .experiencia-text3 {\n                    font-size: 12px;\n                }\n\n                .experiencia-progress {\n                    height: 80px;\n                    left: 10px;\n                }\n\n                .experiencia-center-dot {\n                    width: 12px;\n                    height: 12px;\n                }\n\n                .experiencia-ball-wrapper {\n                    width: 18px;\n                    height: 18px;\n                }\n            }\n        <\/style>\n        \n        <div class=\"experiencia-pin-wrapper\">\n\n            <!-- Imagens de fundo \u2014 agora aplicadas via background-image no\n                 PR\u00d3PRIO elemento (n\u00e3o <img>), porque background-blend-mode\n                 s\u00f3 funciona quando a imagem e a cor do overlay partilham a\n                 mesma \"pilha\" de fundos do mesmo elemento -->\n            <div class=\"experiencia-images\">\n                                    <div class=\"experiencia-image is-active\"\n                        data-slide-index=\"0\"\n                        style=\"background-image: url('https:\/\/idsgrupo.bspacydev.com\/wp-content\/uploads\/anos-exp-1.webp');\">\n                    <\/div>\n                                        <div class=\"experiencia-image\"\n                        data-slide-index=\"1\"\n                        style=\"background-image: url('https:\/\/idsgrupo.bspacydev.com\/wp-content\/uploads\/em-desenvolvimento-1.webp');\">\n                    <\/div>\n                                        <div class=\"experiencia-image\"\n                        data-slide-index=\"2\"\n                        style=\"background-image: url('https:\/\/idsgrupo.bspacydev.com\/wp-content\/uploads\/em-gestao-1.webp');\">\n                    <\/div>\n                                        <div class=\"experiencia-image\"\n                        data-slide-index=\"3\"\n                        style=\"background-image: url('https:\/\/idsgrupo.bspacydev.com\/wp-content\/uploads\/private-equity-1.webp');\">\n                    <\/div>\n                                        <div class=\"experiencia-image\"\n                        data-slide-index=\"4\"\n                        style=\"background-image: url('https:\/\/idsgrupo.bspacydev.com\/wp-content\/uploads\/mercado-capitais-1.webp');\">\n                    <\/div>\n                                <\/div>\n\n            <!-- Forma rosa \u2014 s\u00f3lida durante o crescimento; no fim, o filho\n                 .experiencia-shape-image faz fade-in com a imagem do \u00faltimo\n                 slide, dando sensa\u00e7\u00e3o de continuidade com a shape a encolher -->\n            <div class=\"experiencia-shape\" id=\"experienciaShape\">\n                <div class=\"experiencia-shape-image\"><\/div>\n            <\/div>\n\n            <!-- Barra de progresso, lado esquerdo \u2014 mesmo padr\u00e3o do\n                 Oportunidades, mas s\u00f3 reflete a fase dos SLIDES (n\u00e3o a\n                 fase de crescimento da bola\/forma) -->\n            <div class=\"experiencia-progress\">\n                <div class=\"experiencia-progress-track\">\n                    <div class=\"experiencia-progress-fill\"><\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Textos, lado direito -->\n            <div class=\"experiencia-texts\">\n                                    <div class=\"experiencia-text-item is-active\"\n                        data-slide-index=\"0\">\n                                                    <p class=\"experiencia-text1\">20<em>+<\/em><\/p>                                                    <p class=\"experiencia-text2\">years of experience<\/p>                                            <\/div>\n                                        <div class=\"experiencia-text-item\"\n                        data-slide-index=\"1\">\n                                                    <p class=\"experiencia-text1\">91,983 sqm<\/p>                                                    <p class=\"experiencia-text2\">under development<\/p>                                            <\/div>\n                                        <div class=\"experiencia-text-item\"\n                        data-slide-index=\"2\">\n                                                    <p class=\"experiencia-text1\">19,446 sqm<\/p>                                                    <p class=\"experiencia-text2\">under management<\/p>                                            <\/div>\n                                        <div class=\"experiencia-text-item\"\n                        data-slide-index=\"3\">\n                                                    <p class=\"experiencia-text1\">13<\/p>                                                    <p class=\"experiencia-text2\">private equity<\/p>                                                    <p class=\"experiencia-text3\">companies<\/p>                    <\/div>\n                                        <div class=\"experiencia-text-item\"\n                        data-slide-index=\"4\">\n                                                    <p class=\"experiencia-text1\"><em>\u20ac<\/em>20M<\/p>                                                    <p class=\"experiencia-text2\">in capital markets<\/p>                                            <\/div>\n                                <\/div>\n\n            <div class=\"experiencia-ball-wrapper\" id=\"experienciaBallWrapper\">\n                <div class=\"experiencia-ball\"><\/div>\n            <\/div>\n\n            <!-- Bola nova, fixa no centro da sec\u00e7\u00e3o \u2014 sem nenhuma anima\u00e7\u00e3o de\n                 tamanho\/posi\u00e7\u00e3o, s\u00f3 um fade-in quando os slides aparecem pela\n                 primeira vez (usa a mesma classe .is-revealed que j\u00e1 controla\n                 as imagens\/textos\/barra de progresso) -->\n            <div class=\"experiencia-center-dot\"><\/div>\n\n                            <div class=\"experiencia-outro-text\">\n                                            <span class=\"experiencia-outro-text-part\">\n                            Why                        <\/span>\n                                                                <span class=\"experiencia-outro-text-part experiencia-outro-text-part2\">\n                            IDS                        <\/span>\n                                    <\/div>\n            \n        <\/div>\n\n        <script>\n            (function () {\n                var wrappers = document.querySelectorAll('.experiencia-pin-wrapper:not([data-slides-total])');\n                var lastWrapper = wrappers[wrappers.length - 1];\n                if (lastWrapper) lastWrapper.setAttribute('data-slides-total', '5');\n            })();\n        <\/script>\n\n        [\/vc_column][\/vc_row][vc_row el_class=&#8221;porque-section light-bg&#8221;][vc_column]        <style>\n            \/* ========================================================================== *\/\n            \/*                         Porqu\u00ea IDS Widget                       *\/\n            \/* ========================================================================== *\/\n            .porque-ids-pin-wrapper {\n                --content-image-size: clamp(400px, 55vw, 1100px);\n\n                position: relative;\n                height: 100vh;\n                \/* overflow: hidden agora, n\u00e3o visible \u2014 para a sa\u00edda do\n                                                                                                                                                                                                                                                                                                                                                                                                                                                                             conteudo-pai (translateY para fora) n\u00e3o \"vazar\" visualmente\n                                                                                                                                                                                                                                                                                                                                                                                                                                                                             por cima do resto da p\u00e1gina enquanto est\u00e1 pinned *\/\n                overflow: hidden;\n            }\n\n            \/* ========================================================================== *\/\n            \/*                    Bola persistente + Conte\u00fado + Popup                    *\/\n            \/* ========================================================================== *\/\n\n            .conteudo-pai {\n                position: absolute;\n                inset: 0;\n                display: grid;\n                grid-template-columns: 1fr 1fr;\n                \/* align-items: center; *\/\n                gap: 60px;\n                margin-inline: auto;\n                z-index: 5;\n                \/* background-color removido daqui \u2014 passa a ser controlado\n                                                                                                                                                                                                                                                                                                                                                                                                                                                                             via JS (gsap.set), sincronizado com a entrada do resto do\n                                                                                                                                                                                                                                                                                                                                                                                                                                                                             conte\u00fado, em vez de estar sempre vis\u00edvel desde o in\u00edcio *\/\n                border-bottom-right-radius: 300px;\n                padding-bottom: 50px;\n                height: fit-content;\n            }\n\n\n            \/* Bola pequena \u2014 por agora n\u00e3o est\u00e1 a ser usada (a controlar isso separadamente, um passo de cada vez) *\/\n            .porque-ids-final-dot {\n                position: absolute;\n                top: 20px;\n                left: 50%;\n                transform: translateX(-50%);\n                width: 33px;\n                height: 33px;\n                border-radius: 50%;\n                background-color: var(--salmon);\n                z-index: 10;\n                opacity: 0;\n            }\n\n            .porque-ids-final-dot.is-revealed {\n                opacity: 1;\n            }\n\n            .img-wrapper {\n                position: relative;\n                \/* \u2190 adicionado \u2014 necess\u00e1rio para o novo elemento se posicionar dentro *\/\n                flex-shrink: 0;\n                overflow: visible;\n                position: absolute;\n                left: 0px;\n                top: 0px;\n            }\n\n            .img-wrapper img {\n                width: var(--content-image-size) !important;\n                height: var(--content-image-size);\n                max-width: unset;\n                object-fit: cover;\n                border-radius: 100%;\n                display: block;\n                margin-top: calc(var(--content-image-size) \/ -6);\n                margin-left: calc(var(--content-image-size) \/ -6);\n            }\n\n            \/* Moldura est\u00e1tica, absolutamente posicionada dentro de .img-wrapper \u2014\n                                                                                                                                                                                                                                                                                                                                                                                                                                                                         d\u00e1 a ideia de texto dentro de uma circunfer\u00eancia sobreposta \u00e0\n                                                                                                                                                                                                                                                                                                                                                                                                                                                                         imagem. Ajusta \"width\" (% do tamanho da imagem) e \"background-color\"\n                                                                                                                                                                                                                                                                                                                                                                                                                                                                         ao gosto *\/\n            .img-wrapper-text-circle {\n                position: absolute;\n                bottom: -60px;\n                right: 0px;\n                transform: translate(0%, 20%);\n                width: 574px;\n                aspect-ratio: 1 \/ 1;\n                border-radius: 50%;\n                background-color: var(--salmon);\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                gap: 20px;\n                text-align: center;\n                padding: 20px;\n                box-sizing: border-box;\n                z-index: 2;\n            }\n\n            .img-wrapper-text-part {\n                display: block;\n                color: var(--burgundy);\n            }\n\n            .img-wrapper-text-part2 {\n                color: var(--white-bg);\n                font-weight: 700;\n            }\n\n            .texto-wrapper {\n                flex: 1;\n                margin-top: 100px;\n                max-width: 592px;\n                grid-column: 2;\n            }\n\n\n            .porque-ids-subtitle {\n                color: #1E1E1E;\n                font-size: clamp(18px, 2vw, 28px);\n                font-style: normal;\n                font-weight: 700;\n                line-height: normal;\n            }\n\n            .porque-ids-main-text p {\n                margin-bottom: 1em;\n            }\n\n\n\n            .mainButton.porque-ids-manifesto-btn {\n                width: 204px;\n                height: 204px;\n            }\n\n            \/* --- Popup do Manifesto --- *\/\n            .porque-ids-manifesto-popup {\n                position: fixed;\n                inset: 0;\n                z-index: 1000;\n                display: none;\n                \/* mostrado via .is-open *\/\n                align-items: center;\n                justify-content: center;\n            }\n\n            .porque-ids-manifesto-popup.is-open {\n                display: flex;\n            }\n\n            .porque-ids-manifesto-overlay {\n                position: absolute;\n                inset: 0;\n                background-color: rgb(255 255 255 \/ 90%);\n            }\n\n            .porque-ids-manifesto-box {\n                position: relative;\n                z-index: 1;\n                background-color: #fff;\n                border-radius: 100%;\n                padding: 60px;\n                overflow-y: auto;\n                width: 662px;\n                height: 662px;\n                border: 1px solid var(--salmon);\n                display: flex;\n                align-items: center;\n                flex-direction: column;\n                justify-content: center;\n\n            }\n\n\n            .porque-ids-manifesto-exit {\n                position: absolute;\n                top: calc(50% - 270px);\n                left: calc(50% + 290px + 30px);\n                border: none;\n                background: transparent;\n                display: inline-flex;\n                align-items: center;\n                gap: 16px;\n                cursor: pointer;\n\n            }\n\n            .porque-ids-manifesto-exit span {\n                color: var(--salmon);\n                font-size: 14px;\n                font-style: normal;\n                font-weight: 800;\n                line-height: 1;\n                letter-spacing: 3.456px;\n                text-transform: uppercase;\n            }\n\n            .porque-ids-quote-mark {\n                position: absolute;\n                line-height: 0;\n                \/* remove espa\u00e7o extra \u00e0 volta do SVG inline *\/\n            }\n\n            .porque-ids-quote-mark svg {\n                width: 60px;\n                height: auto;\n                display: block;\n            }\n\n            .porque-ids-quote-open {\n                top: -10px;\n                left: 20px;\n                transform: translate(0%, -50%);\n            }\n\n            .porque-ids-quote-close {\n                bottom: 0px;\n                right: -20px;\n                transform: translate(0%, 70%);\n            }\n\n            .porque-ids-manifesto-text {\n                position: relative;\n\n            }\n\n            .porque-ids-manifesto-text p {\n                color: var(--black-footer);\n                text-align: center;\n                font-size: 17px;\n                font-style: italic;\n                font-weight: 300;\n                line-height: normal;\n                margin-bottom: 10px !important;\n            }\n\n            .porque-ids-manifesto-play {\n                margin-top: 0px;\n                display: inline-flex;\n                align-items: center;\n                gap: 12px;\n                background-color: transparent;\n                border: unset;\n                outline: unset;\n                cursor: pointer;\n                position: absolute;\n                bottom: 100px;\n                text-transform: uppercase;\n            }\n\n            .porque-ids-manifesto-play .label-text,\n            .porque-ids-manifesto-play .icon-pause {\n                color: var(--salmon);\n                font-size: 14px;\n                font-style: normal;\n                font-weight: 800;\n                line-height: 1;\n                letter-spacing: 3.456px;\n            }\n\n            .porque-ids-audio-cursor-hint {\n                position: fixed;\n                top: 0;\n                left: 0;\n                z-index: 1001;\n                padding: 10px 18px;\n                border-radius: 50px;\n                background-color: var(--salmon);\n                color: #fff;\n                font-size: 13px;\n                font-weight: 700;\n                white-space: nowrap;\n                pointer-events: none;\n                opacity: 0;\n                transition: opacity 200ms ease;\n                font-family: 'Gilroy', sans-serif;\n            }\n\n            .porque-ids-audio-cursor-hint.is-visible {\n                opacity: 1;\n            }\n\n            @media only screen and (max-width: 1750px) {\n                .porque-ids-manifesto-exit {\n                    position: absolute;\n                    top: calc(50% - 230px);\n                    left: calc(50% + 250px + 30px);\n                }\n\n                .porque-ids-manifesto-exit svg {\n                    width: 40px;\n                    height: 40px;\n                }\n\n                .porque-ids-manifesto-exit span {\n                    font-size: 12px;\n                    letter-spacing: calc(3.456px * 0.9);\n                }\n\n                .porque-ids-manifesto-box {\n                    padding: 50px;\n                    width: calc(662px * 0.8);\n                    height: calc(662px * 0.8);\n                }\n\n                .porque-ids-quote-mark svg {\n                    width: calc(60px * 0.7);\n                    height: auto;\n                    display: block;\n                }\n\n                .porque-ids-manifesto-text p {\n                    font-size: 14px;\n                }\n\n                .porque-ids-manifesto-play .label-text,\n                .porque-ids-manifesto-play .icon-pause {\n                    font-size: 11px;\n                    letter-spacing: calc(3.456px * 0.9);\n                }\n\n                .img-wrapper-text-circle {\n                    position: absolute;\n                    bottom: 0px;\n                    right: 0px;\n                    transform: translate(0%, 00%);\n                    width: calc(574px * 0.7);\n                    aspect-ratio: 1 \/ 1;\n                    gap: 20px;\n                }\n            }\n\n            @media only screen and (max-width: 1550px) {\n                .img-wrapper-text-circle {\n                    position: absolute;\n                    bottom: 0px;\n                    width: calc(574px * 0.6);\n                }\n            }\n\n            @media only screen and (max-width: 1250px) {\n                .porque-ids-manifesto-exit {\n                    position: absolute;\n                    top: 50px;\n                    left: unset;\n                    right: 50px;\n                }\n\n                .porque-ids-manifesto-exit svg {\n                    width: 30px;\n                    height: 30px;\n                }\n\n                .porque-ids-manifesto-exit span {\n                    font-size: 11px;\n                    letter-spacing: calc(3.456px * 0.8);\n                }\n\n                .porque-ids-manifesto-box {\n                    padding: 45px;\n                    width: calc(662px * 0.7);\n                    height: calc(662px * 0.7);\n                }\n\n                .porque-ids-quote-mark svg {\n                    width: calc(60px * 0.6);\n                    height: auto;\n                    display: block;\n                }\n\n                .porque-ids-manifesto-text p {\n                    font-size: 13px;\n                }\n\n                .porque-ids-manifesto-play .label-text,\n                .porque-ids-manifesto-play .icon-pause {\n                    font-size: 11px;\n                    letter-spacing: calc(3.456px * 0.8);\n                }\n            }\n\n            @media only screen and (max-width: 991px) {\n\n                .conteudo-pai {\n                    gap: 10px;\n                    border-bottom-right-radius: 200px;\n                    padding-bottom: 50px;\n                    padding-right: 40px;\n                }\n\n                .porque-ids-pin-wrapper {\n                    --content-image-size: clamp(280px, 60vw, 500px);\n                }\n\n                .texto-wrapper {\n                    margin-top: 40px;\n                    max-width: 100%;\n                }\n\n                .img-wrapper-text-circle {\n                    bottom: -100px;\n                    \/* display: none; *\/\n                }\n            }\n\n            @media only screen and (max-width: 768px) {\n\n                .porque-ids-final-dot {\n\n                    width: 20px;\n                    height: 20px;\n                }\n\n                .img-wrapper-text-circle {\n                    \/* transform: -200px; *\/\n                    display: none;\n                }\n\n                .porque-ids-pin-wrapper {\n                    --content-image-size: clamp(160px, 35vw, 240px);\n                }\n\n                .conteudo-pai {\n                    \/* grid-template-columns: 1fr; *\/\n                    padding-bottom: 70px;\n                    padding-inline: 0px;\n                    display: flex;\n                    flex-direction: column-reverse;\n                }\n\n                .texto-wrapper {\n                    order: 1;\n                    margin-top: 0;\n                    max-width: 100%;\n                    padding-inline: var(--padding-inline);\n                    margin-top: 20px;\n                    display: flex;\n                    flex-direction: column;\n\n                    align-items: center;\n                }\n\n                .img-wrapper {\n                    order: 2;\n                    \/* display: none; *\/\n                    position: relative;\n                }\n\n                .texto-wrapper p {\n                    text-align: center;\n                }\n\n                .porque-ids-subtitle {\n                    max-width: 220px;\n                }\n\n                .mainButton.porque-ids-manifesto-btn {\n                    width: calc(188px * 0.7);\n                    height: calc(188px * 0.7);\n                }\n\n\n                .img-wrapper img {\n                    width: 100% !important;\n                    height: 250px;\n                    max-width: unset;\n                    object-fit: cover;\n                    border-radius: unset;\n                    display: block;\n                    margin-top: unset;\n                    margin-inline: unset;\n                }\n\n                \/* MANIEFESTI *\/\n                .porque-ids-manifesto-exit {\n                    position: absolute;\n                    top: 50px;\n                    left: 50%;\n                    right: unset;\n                    transform: translateX(-50%);\n                    display: flex;\n                    flex-direction: column;\n                    align-items: center;\n                    align-content: center;\n                }\n\n                .porque-ids-manifesto-exit svg {\n                    width: 25px;\n                    height: 25px;\n                }\n\n                .porque-ids-manifesto-exit span {\n                    font-size: 10px;\n                    letter-spacing: calc(3.456px * 0.7);\n                }\n\n                .porque-ids-manifesto-box {\n                    padding: 60px 30px;\n                    width: 100%;\n                    margin-inline: var(--padding-inline);\n                    height: fit-content;\n                    border-radius: 30px;\n                }\n\n                .porque-ids-quote-mark svg {\n                    width: calc(60px * 0.4);\n                    height: auto;\n                    display: block;\n                }\n\n                .porque-ids-manifesto-text p {\n                    font-size: 13px;\n                }\n\n                .porque-ids-manifesto-play .label-text,\n                .porque-ids-manifesto-play .icon-pause {\n                    font-size: 11px;\n                    letter-spacing: calc(3.456px * 0.8);\n                }\n\n                .porque-ids-manifesto-play {\n                    margin-top: 40px;\n                    position: relative;\n                    bottom: 0px;\n                }\n            }\n        <\/style>\n        \n        <div class=\"porque-ids-pin-wrapper\">\n\n            \n            <div class=\"conteudo-pai\" id=\"porque-ids-6aec6f0dcf8cb-content\">\n\n                <div class=\"porque-ids-final-dot\"><\/div>\n\n                                    <div class=\"img-wrapper\">\n                        <img decoding=\"async\" src=\"https:\/\/idsgrupo.bspacydev.com\/wp-content\/uploads\/foto-equipa-2.webp\" alt=\"\">\n\n                                                    <!-- Moldura est\u00e1tica, absolutamente posicionada sobre a\n                                 imagem, dando a ideia de texto dentro de uma\n                                 circunfer\u00eancia. Anima em separado da img (ver JS) \u2014\n                                 aparece depois da imagem, n\u00e3o ao mesmo tempo -->\n                            <div class=\"img-wrapper-text-circle\">\n                                                                    <h2 class=\"img-wrapper-text-part\">Why<\/h2>\n                                                                                                    <h2 class=\"img-wrapper-text-part img-wrapper-text-part2\">\n                                        IDS                                    <\/h2>\n                                                            <\/div>\n                                            <\/div>\n                \n                <div class=\"texto-wrapper\">\n                                            <!-- Subt\u00edtulo \u2014 texto simples num <p>, sem qualquer\n                             anima\u00e7\u00e3o de preenchimento por palavra -->\n                        <p class=\"porque-ids-subtitle\">\n                            Building business vision with purpose                        <\/p>\n                    \n                                            <div class=\"porque-ids-main-text\">\n                            <p>IDS connects strategic partnerships, development and asset management through an integrated model focused on creating lasting value. We operate across different sectors, applying discipline, method and responsibility throughout every stage of the process, while continuing to strengthen our position in the market.<\/p>                        <\/div>\n                                        \n                        <!-- novo -->\n                        <button class=\"mainButton porque-ids-manifesto-btn\" type=\"button\"\n                            data-popup-target=\"porque-ids-6aec6f0dcf8cb-popup\">\n\n                            <span class=\"mainButton-dot\"><\/span>\n\n                            <div class=\"button-text-wrapper\">\n                                <span class=\"mainButton-text\">\n                                    Open Manifesto                                <\/span>\n                            <\/div>\n\n                        <\/button>\n                                    <\/div>\n            <\/div>\n        <\/div>\n\n\n\n        <!-- Popup do Manifesto \u2014 escondido por defeito, abre ao clicar no\n             bot\u00e3o acima -->\n                    <div class=\"porque-ids-manifesto-popup\" id=\"porque-ids-6aec6f0dcf8cb-popup\">\n                <div class=\"porque-ids-manifesto-overlay\" data-popup-close><\/div>\n\n                <!-- Bot\u00e3o \"Sair do Manifesto\" \u2014 dentro do popup, posicionado\n                     ao lado da circunfer\u00eancia (n\u00e3o no canto do ecr\u00e3) -->\n                <button type=\"button\" class=\"porque-ids-manifesto-exit\" data-popup-close\n                    aria-label=\"Close Manifesto\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"54\" viewBox=\"0 0 55 55\" fill=\"none\">\n                        <path d=\"M0.353516 54.3536L54.3535 0.353577\" stroke=\"#FF7064\" \/>\n                        <path d=\"M54.3535 54.3536L0.353516 0.353577\" stroke=\"#FF7064\" \/>\n                    <\/svg>\n                    <span> Close Manifesto<\/span>\n                <\/button>\n                <div class=\"porque-ids-manifesto-box\">\n\n                                            <div class=\"porque-ids-manifesto-text\">\n                            <span class=\"porque-ids-quote-mark porque-ids-quote-open\">\n                                <svg width=\"62\" height=\"46\" viewBox=\"0 0 62 46\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                    <path\n                                        d=\"M-0.0009181 45.4296L2.12444 33.4744C2.74434 29.8436 4.02841 25.9914 5.97666 21.9178C7.96919 17.7999 10.5152 13.837 13.6147 10.0291C16.7584 6.17683 20.3671 2.83381 24.4407 -2.73167e-06L29.887 5.6455C25.9905 9.49771 22.4925 13.8149 19.393 18.5969C16.2935 23.3347 14.3231 28.2275 13.4818 33.2752L11.3565 45.4296H-0.0009181ZM31.1489 45.4296L33.2743 33.4744C33.8942 29.8436 35.1783 25.9914 37.1265 21.9178C39.119 17.7999 41.665 13.837 44.7645 10.0291C47.9083 6.17683 51.517 2.83381 55.5906 -2.73167e-06L61.0368 5.6455C57.1403 9.49771 53.6423 13.8149 50.5429 18.5969C47.4434 23.3347 45.473 28.2275 44.6317 33.2752L42.5063 45.4296H31.1489Z\"\n                                        fill=\"#FF7064\" \/>\n                                <\/svg>\n                            <\/span>\n                            <p>The future does not happen by chance.<\/p><p>It is built.<\/p><p>It is built when we recognise potential before it becomes obvious.<br>When we move forward with conviction, even in uncertain times.<br>And that is where transformation begins.<\/p><p>We transform assets into solid projects.<br>Projects into vibrant places.<br>Places into an active part of the cities.<\/p><p>We grow with vision.<br>We develop with rigour.<br>We manage with responsibility.<\/p>                            <span class=\"porque-ids-quote-mark porque-ids-quote-close\">\n                                <svg width=\"62\" height=\"46\" viewBox=\"0 0 62 46\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                    <path\n                                        d=\"M61.038 7.62939e-06L58.9127 11.9552C58.2928 15.586 57.0087 19.4382 55.0604 23.5118C53.0679 27.6297 50.5219 31.5926 47.4224 35.4006C44.2787 39.2528 40.67 42.5958 36.5964 45.4296L31.1501 39.7841C35.0466 35.9319 38.5446 31.6148 41.6441 26.8327C44.7436 22.0949 46.714 17.2022 47.5553 12.1544L49.6806 7.62939e-06H61.038ZM29.8882 7.62939e-06L27.7628 11.9552C27.1429 15.586 25.8589 19.4382 23.9106 23.5118C21.9181 27.6297 19.3721 31.5926 16.2726 35.4006C13.1288 39.2528 9.52013 42.5958 5.44652 45.4296L0.000277337 39.7841C3.89677 35.9319 7.39477 31.6148 10.4943 26.8327C13.5937 22.0949 15.5641 17.2022 16.4054 12.1544L18.5308 7.62939e-06H29.8882Z\"\n                                        fill=\"#FF7064\" \/>\n                                <\/svg>\n                            <\/span>\n                        <\/div>\n                    \n                                            <button type=\"button\" class=\"porque-ids-manifesto-play\"\n                            data-audio-src=\"https:\/\/idsgrupo.bspacydev.com\/wp-content\/uploads\/manifestoids-en-mixdown.mp3\">\n\n                            <span class=\"label-text\">\n                                Listen to the Manifesto                            <\/span>\n                            <span class=\"icon-pause\" style=\"display:none;\">\u275a\u275a<\/span>\n\n                        <\/button>\n                                    <\/div>\n            <\/div>\n\n\n            <!-- \"Cursor\" sugestivo que segue o rato \u2014 s\u00f3 aparece se o popup for\n     fechado com o \u00e1udio ainda a tocar. Bot\u00e3o direito do rato p\u00e1ra o \u00e1udio -->\n            <div class=\"porque-ids-audio-cursor-hint\" data-audio-instance=\"porque-ids-6aec6f0dcf8cb\">\n                Right click to stop the audio            <\/div>\n        \n        [\/vc_column][\/vc_row][\/vc_section][vc_row el_class=&#8221;areas-negocio-section pagePaddings verticalPadding light-bg&#8221; el_id=&#8221;area-negocio&#8221;][vc_column][vc_custom_heading text=&#8221;3 Business Areas&#8221; use_theme_fonts=&#8221;yes&#8221; css=&#8221;&#8221; el_class=&#8221;gsap-slide-left&#8221;][vc_column_text css=&#8221;&#8221; el_class=&#8221;gsap-slide-left gsap-fill-words bold&#8221;]<strong>One integrated value creation model<\/strong>[\/vc_column_text][vc_column_text css=&#8221;&#8221; el_class=&#8221;gsap-slide-left gsap-fill-words&#8221;]At IDS, our business areas work together to reinforce the Group&#8217;s strength and its ability to develop and manage assets effectively.[\/vc_column_text]\n        <div class=\"business-areas-wrapper\">\n            \n                <!-- O GSAP aplica o parallax (transform inline) S\u00d3 neste wrapper exterior.\n                    O tamanho e a posi\u00e7\u00e3o (top\/left\/right\/bottom) tamb\u00e9m vivem aqui agora -->\n                <div class=\"business-area-parallax-wrapper business-area-strong gsap-parallax-100 gsap-parallax-disable-mobile\"\n                    style=\"z-index: 10;\">\n\n                    <!-- $circle_style vive aqui \u2014 as vari\u00e1veis CSS (--circle-color,\n                        --title-color, --bg-image) herdam para TODOS os filhos.\n                        Em desktop, o clique aqui alterna a classe .is-active (ver JS).\n                        Em mobile, o scroll controla .is-in-view automaticamente -->\n                    <div class=\"business-area-circle\" style=\"--circle-color: #1E1E1E; --title-color: #FF7064; --bg-image: url(&#039;https:\/\/idsgrupo.bspacydev.com\/wp-content\/uploads\/imobiliario-pic.webp&#039;);\">\n\n                        <div class=\"business-area-ball\">\n                                                            <div class=\"business-area-bg-image\"><\/div>\n                                                    <\/div>\n\n                        <div class=\"business-area-content\">\n                                                            <img decoding=\"async\" class=\"business-area-icon\" src=\"https:\/\/idsgrupo.bspacydev.com\/wp-content\/uploads\/imobiliario-icone.svg\" alt=\"\">\n                            \n                            <h3 class=\"business-area-title\">Real estate<\/h3>\n\n                                                            <p class=\"business-area-description\">Development, refurbishment, and asset management with integrated engineering and construction.<\/p>\n                                                    <\/div>\n\n                    <\/div>\n                <\/div>\n\n            \n                <!-- O GSAP aplica o parallax (transform inline) S\u00d3 neste wrapper exterior.\n                    O tamanho e a posi\u00e7\u00e3o (top\/left\/right\/bottom) tamb\u00e9m vivem aqui agora -->\n                <div class=\"business-area-parallax-wrapper business-area-medium gsap-parallax--135 gsap-parallax-disable-mobile\"\n                    style=\"z-index: 12;\">\n\n                    <!-- $circle_style vive aqui \u2014 as vari\u00e1veis CSS (--circle-color,\n                        --title-color, --bg-image) herdam para TODOS os filhos.\n                        Em desktop, o clique aqui alterna a classe .is-active (ver JS).\n                        Em mobile, o scroll controla .is-in-view automaticamente -->\n                    <div class=\"business-area-circle\" style=\"--circle-color: #FF7064; --title-color: #323232; --bg-image: url(&#039;https:\/\/idsgrupo.bspacydev.com\/wp-content\/uploads\/private-pic.webp&#039;); --title-open-color: #FF7064;\">\n\n                        <div class=\"business-area-ball\">\n                                                            <div class=\"business-area-bg-image\"><\/div>\n                                                    <\/div>\n\n                        <div class=\"business-area-content\">\n                                                            <img decoding=\"async\" class=\"business-area-icon\" src=\"https:\/\/idsgrupo.bspacydev.com\/wp-content\/uploads\/private-equity-icone.svg\" alt=\"\">\n                            \n                            <h3 class=\"business-area-title\">Private Equity<\/h3>\n\n                                                            <p class=\"business-area-description\">Strategic holdings supported by active management involvement.<\/p>\n                                                    <\/div>\n\n                    <\/div>\n                <\/div>\n\n            \n                <!-- O GSAP aplica o parallax (transform inline) S\u00d3 neste wrapper exterior.\n                    O tamanho e a posi\u00e7\u00e3o (top\/left\/right\/bottom) tamb\u00e9m vivem aqui agora -->\n                <div class=\"business-area-parallax-wrapper business-area-weak gsap-parallax--45 gsap-parallax-disable-mobile\"\n                    style=\"z-index: 11;\">\n\n                    <!-- $circle_style vive aqui \u2014 as vari\u00e1veis CSS (--circle-color,\n                        --title-color, --bg-image) herdam para TODOS os filhos.\n                        Em desktop, o clique aqui alterna a classe .is-active (ver JS).\n                        Em mobile, o scroll controla .is-in-view automaticamente -->\n                    <div class=\"business-area-circle\" style=\"--circle-color: #460F1C; --title-color: #FF7064; --bg-image: url(&#039;https:\/\/idsgrupo.bspacydev.com\/wp-content\/uploads\/invest-pic-scaled.webp&#039;);\">\n\n                        <div class=\"business-area-ball\">\n                                                            <div class=\"business-area-bg-image\"><\/div>\n                                                    <\/div>\n\n                        <div class=\"business-area-content\">\n                                                            <img decoding=\"async\" class=\"business-area-icon\" src=\"https:\/\/idsgrupo.bspacydev.com\/wp-content\/uploads\/investimentos-icone.svg\" alt=\"\">\n                            \n                            <h3 class=\"business-area-title\">Financial investments<\/h3>\n\n                                                            <p class=\"business-area-description\">Capital management and allocation with a focus on value creation and growth.<\/p>\n                                                    <\/div>\n\n                    <\/div>\n                <\/div>\n\n                    <\/div>\n\n        [\/vc_column][\/vc_row][vc_row el_class=&#8221;projetos-destaque-section verticalPadding light-bg&#8221; el_id=&#8221;projetos&#8221;][vc_column][vc_custom_heading text=&#8221;Featured portfolio&#8221; use_theme_fonts=&#8221;yes&#8221; css=&#8221;&#8221; el_class=&#8221;gsap-slide-left&#8221;]        <div class=\"investment-accordion gsap-slide-up \">\n\n            <!-- Gaveta 1 \u2014 Imobili\u00e1rio: reaproveita o widget de Projetos j\u00e1\n                 existente, tal como estava, chamado diretamente como fun\u00e7\u00e3o \u2014\n                 aberta por defeito -->\n            <div class=\"investment-drawer is-open\" data-drawer=\"imobiliario\">\n                <button type=\"button\" class=\"investment-drawer-header\">\n                    <h3 class=\"investment-drawer-title\">Real Estate<\/h3>\n                    <span class=\"investment-drawer-toggle\" aria-hidden=\"true\">\n                        <span class=\"investment-drawer-toggle-bar investment-drawer-toggle-bar-h\"><\/span>\n                        <span class=\"investment-drawer-toggle-bar investment-drawer-toggle-bar-v\"><\/span>\n                    <\/span>\n                <\/button>\n                <div class=\"investment-drawer-content\">\n                    <div class=\"investment-drawer-content-inner\">\n                        \n        <div class=\"project-grid gsap-stagger-children\">\n            \n                <div class=\"project-card has-image\" style=\"background-image: url('https:\/\/idsgrupo.bspacydev.com\/wp-content\/uploads\/yuno-scaled.webp');\">\n\n                    <div class=\"project-card-scrim\"><\/div>\n                    <div class=\"project-card-overlay\"><\/div>\n                    <div class=\"project-card-content\">\n\n                        <div class=\"project-card-title-wrapper\">\n                            <h3 class=\"project-card-title\">YUNO<\/h3>\n                                                            <span class=\"project-card-category\">Residential<\/span>\n                                                    <\/div>\n\n                        <div class=\"project-card-middle\">\n                            <p class=\"project-card-excerpt\">\n                                A residential smart apartment development in Asprela, designed to respond to the evolving dynamics of urban living in Porto.                            <\/p>\n                                                            <span class=\"project-card-status\">Under construction<\/span>\n                                                    <\/div>\n\n                    <\/div>\n                <\/div>\n\n            \n                <div class=\"project-card has-image\" style=\"background-image: url('https:\/\/idsgrupo.bspacydev.com\/wp-content\/uploads\/capitolio.webp');\">\n\n                    <div class=\"project-card-scrim\"><\/div>\n                    <div class=\"project-card-overlay\"><\/div>\n                    <div class=\"project-card-content\">\n\n                        <div class=\"project-card-title-wrapper\">\n                            <h3 class=\"project-card-title\">Capit\u00f3lio<\/h3>\n                                                            <span class=\"project-card-category\">Hospitality<\/span>\n                                                    <\/div>\n\n                        <div class=\"project-card-middle\">\n                            <p class=\"project-card-excerpt\">\n                                The restoration of an iconic building on Avenida dos Aliados, combining heritage preservation with new urban uses.                            <\/p>\n                                                            <span class=\"project-card-status\">Under construction<\/span>\n                                                    <\/div>\n\n                    <\/div>\n                <\/div>\n\n            \n                <div class=\"project-card has-image\" style=\"background-image: url('https:\/\/idsgrupo.bspacydev.com\/wp-content\/uploads\/galeiras.webp');\">\n\n                    <div class=\"project-card-scrim\"><\/div>\n                    <div class=\"project-card-overlay\"><\/div>\n                    <div class=\"project-card-content\">\n\n                        <div class=\"project-card-title-wrapper\">\n                            <h3 class=\"project-card-title\">Galerias Lumi\u00e8re<\/h3>\n                                                            <span class=\"project-card-category\">Hospitality<\/span>\n                                                    <\/div>\n\n                        <div class=\"project-card-middle\">\n                            <p class=\"project-card-excerpt\">\n                                A hospitality-led refurbishment project in central Porto, combining architectural heritage with a well-established urban setting.                            <\/p>\n                                                            <span class=\"project-card-status\">Under construction<\/span>\n                                                    <\/div>\n\n                    <\/div>\n                <\/div>\n\n            \n                <div class=\"project-card has-image\" style=\"background-image: url('https:\/\/idsgrupo.bspacydev.com\/wp-content\/uploads\/bainharia.webp');\">\n\n                    <div class=\"project-card-scrim\"><\/div>\n                    <div class=\"project-card-overlay\"><\/div>\n                    <div class=\"project-card-content\">\n\n                        <div class=\"project-card-title-wrapper\">\n                            <h3 class=\"project-card-title\">Quarteir\u00e3o Bainharia<\/h3>\n                                                            <span class=\"project-card-category\">Student Residence<\/span>\n                                                    <\/div>\n\n                        <div class=\"project-card-middle\">\n                            <p class=\"project-card-excerpt\">\n                                Urban regeneration project in Porto\u2019s historic centre, developed to accommodate a new student residence.                            <\/p>\n                                                            <span class=\"project-card-status\">Under construction<\/span>\n                                                    <\/div>\n\n                    <\/div>\n                <\/div>\n\n                    <\/div>\n\n                            <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Gaveta 2 \u2014 Private Equity: post type 'investimento' com\n                 tipo_de_investimento = private-equity, inclui tags -->\n            <div class=\"investment-drawer\" data-drawer=\"private-equity\">\n                <button type=\"button\" class=\"investment-drawer-header\">\n                    <h3 class=\"investment-drawer-title\">Private Equity<\/h3>\n                    <span class=\"investment-drawer-toggle\" aria-hidden=\"true\">\n                        <span class=\"investment-drawer-toggle-bar investment-drawer-toggle-bar-h\"><\/span>\n                        <span class=\"investment-drawer-toggle-bar investment-drawer-toggle-bar-v\"><\/span>\n                    <\/span>\n                <\/button>\n                <div class=\"investment-drawer-content\">\n                    <div class=\"investment-drawer-content-inner\">\n                                <div class=\"investment-slider-wrapper\">\n            <div class=\"swiper investment-swiper\" data-type=\"private-equity\"\n                data-total=\"3\">\n                <div class=\"swiper-wrapper\">\n                                            <div class=\"swiper-slide\">\n                            <div class=\"investment-card investment-card--private-equity\">\n                                                                    <img decoding=\"async\" src=\"https:\/\/idsgrupo.bspacydev.com\/wp-content\/uploads\/superbock-logo.webp\" alt=\"\"\n                                        class=\"investment-card-image investment-card-image--private-equity\">\n                                \n                                <div class=\"investment-card-content\">\n                                                                            <div class=\"investment-card-tags\">\n                                                                                            <span class=\"investment-card-tag\">Private equity<\/span>\n                                                                                            <span class=\"investment-card-tag\">Events and Entertainment<\/span>\n                                                                                    <\/div>\n                                    \n                                    <p class=\"investment-card-excerpt\">Private equity participation in the events and entertainment sector, associated with a highly visible and relevant asset in Porto.<\/p>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                                            <div class=\"swiper-slide\">\n                            <div class=\"investment-card investment-card--private-equity\">\n                                                                    <img decoding=\"async\" src=\"https:\/\/idsgrupo.bspacydev.com\/wp-content\/uploads\/trineg-logo.webp\" alt=\"\"\n                                        class=\"investment-card-image investment-card-image--private-equity\">\n                                \n                                <div class=\"investment-card-content\">\n                                                                            <div class=\"investment-card-tags\">\n                                                                                            <span class=\"investment-card-tag\">Private equity<\/span>\n                                                                                            <span class=\"investment-card-tag\">Energy and Efficiency<\/span>\n                                                                                    <\/div>\n                                    \n                                    <p class=\"investment-card-excerpt\">Participation in a company focused on energy and efficiency, aligned with a diversification strategy and investment in activities with technical applicability and growth potential.<\/p>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                                            <div class=\"swiper-slide\">\n                            <div class=\"investment-card investment-card--private-equity\">\n                                                                    <img decoding=\"async\" src=\"https:\/\/idsgrupo.bspacydev.com\/wp-content\/uploads\/waterevoluition-logo.webp\" alt=\"\"\n                                        class=\"investment-card-image investment-card-image--private-equity\">\n                                \n                                <div class=\"investment-card-content\">\n                                                                            <div class=\"investment-card-tags\">\n                                                                                            <span class=\"investment-card-tag\">Private equity<\/span>\n                                                                                    <\/div>\n                                    \n                                    <p class=\"investment-card-excerpt\">Participation in a project linked to the design and development of Water Evolution faucets, combining design, functionality and value appreciation potential.<\/p>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                                    <\/div>\n            <\/div>\n\n                            <!-- NOVO: barra \u00fanica cont\u00ednua, com um \"thumb\" a deslizar \u2014\n                     substitui as bolas antigas. width\/left do thumb s\u00e3o\n                     calculados em JS a partir de realIndex\/totalSlides\n                     (ver updateProgress) -->\n                <div class=\"investment-swiper-progress\">\n                    <div class=\"investment-swiper-progress-thumb\"><\/div>\n                <\/div>\n                    <\/div>\n                            <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Gaveta 3 \u2014 Investimentos Financeiros: post type 'investimento'\n                 com tipo_de_investimento = investimentos-financeiros, sem tags -->\n            <div class=\"investment-drawer\" data-drawer=\"investimentos-financeiros\">\n                <button type=\"button\" class=\"investment-drawer-header\">\n                    <h3 class=\"investment-drawer-title\">Financial investments<\/h3>\n                    <span class=\"investment-drawer-toggle\" aria-hidden=\"true\">\n                        <span class=\"investment-drawer-toggle-bar investment-drawer-toggle-bar-h\"><\/span>\n                        <span class=\"investment-drawer-toggle-bar investment-drawer-toggle-bar-v\"><\/span>\n                    <\/span>\n                <\/button>\n                <div class=\"investment-drawer-content\">\n                    <div class=\"investment-drawer-content-inner\">\n                                <div class=\"investment-slider-wrapper\">\n            <div class=\"swiper investment-swiper\" data-type=\"investimentos-financeiros\"\n                data-total=\"1\">\n                <div class=\"swiper-wrapper\">\n                                            <div class=\"swiper-slide\">\n                            <div class=\"investment-card investment-card--investimentos-financeiros\">\n                                                                    <img decoding=\"async\" src=\"https:\/\/idsgrupo.bspacydev.com\/wp-content\/uploads\/logotipo-teixeira-duarte-scaled.webp\" alt=\"\"\n                                        class=\"investment-card-image investment-card-image--investimentos-financeiros\">\n                                \n                                <div class=\"investment-card-content\">\n                                    \n                                    <p class=\"investment-card-excerpt\">Participation in a listed company as part of a selective capital allocation strategy focused on long-term value creation.<\/p>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                                    <\/div>\n            <\/div>\n\n                    <\/div>\n                            <\/div>\n                <\/div>\n            <\/div>\n\n        <\/div>\n        [\/vc_column][\/vc_row][vc_row el_class=&#8221;sustentabilidade-section pagePaddings verticalPadding light-bg&#8221; el_id=&#8221;sustentabilidade&#8221;][vc_column]\n        <h2 class=\"split-title-widget split-title-align-center\" >\n            <!-- Wrapper interno: mant\u00e9m as duas partes sempre dentro do mesmo\n                 \"contentor\" fixo, independentemente da tag exterior escolhida (h1\/p\/span).\n                 Este wrapper NUNCA cont\u00e9m CSS\/JS \u2014 esses ficam \u00e0 parte, no wp_footer -->\n            <div class=\"split-title-wrapper\">\n                                    <span class=\"split-title-part\">Sustainability &amp;<\/span>\n                                                    <span class=\"split-title-part split-title-part-late\"\n                        style=\"color: #ff7064;\">ESG<\/span>\n                            <\/div>\n        <\/h2>\n\n        [vc_column_text css=&#8221;&#8221; el_class=&#8221;bigger-p gsap-slide-up gsap-fill-words&#8221;]<\/p>\n<p style=\"text-align: center;\">Growth with purpose and collective responsibility<\/p>\n<p>[\/vc_column_text][vc_row_inner][vc_column_inner width=&#8221;1\/2&#8243;][vc_column_text css=&#8221;&#8221; el_class=&#8221;gsap-slide-left gsap-fill-words&#8221;]At IDS, we integrate environmental, social and governance principles into our decision-making processes. We are committed to society\u2019s future by developing assets that are more efficient, responsible and capable of generating a positive impact.[\/vc_column_text][vc_btn title=&#8221;Read Sustainability Policy&#8221; css=&#8221;&#8221; link=&#8221;url:%2Fwp-content%2Fuploads%2Fids-politica-sustentabilidade-20260727.pdf|target:_blank&#8221; el_class=&#8221;basicButton gsap-slide-left&#8221;][\/vc_column_inner][vc_column_inner el_class=&#8221;gsap-stagger-children gsap-stagger-depth-2&#8243; width=&#8221;1\/2&#8243;][vc_single_image image=&#8221;471&#8243; img_size=&#8221;full&#8221; css=&#8221;&#8221;][vc_single_image image=&#8221;472&#8243; img_size=&#8221;full&#8221; css=&#8221;&#8221;][vc_single_image image=&#8221;480&#8243; img_size=&#8221;full&#8221; css=&#8221;&#8221;][\/vc_column_inner][\/vc_row_inner][\/vc_column][\/vc_row][vc_row el_class=&#8221;noticias-destaque-section pagePaddings verticalPadding light-bg&#8221; el_id=&#8221;noticias&#8221;][vc_column][vc_custom_heading text=&#8221;News&#8221; use_theme_fonts=&#8221;yes&#8221; css=&#8221;&#8221; el_class=&#8221;gsap-slide-left&#8221;]    <style>\n        \/* ========================================================================== *\/\n        \/*                            Not\u00edcias Widget                                *\/\n        \/* ========================================================================== *\/\n\n        .news-grid {\n            display: grid;\n            gap: 19px;\n            max-width: var(--container-width);\n            margin-inline: auto;\n        }\n\n        \/* Vis\u00e3o CURTA: 3 colunas lado a lado *\/\n        .news-grid--curta {\n            grid-template-columns: repeat(3, 1fr);\n        }\n\n        \/* Vis\u00e3o LISTAGEM: 1 coluna, todos os cart\u00f5es empilhados verticalmente *\/\n        .news-grid--listagem {\n            grid-template-columns: 1fr;\n        }\n\n        .news-card {\n            position: relative;\n            display: block;\n            overflow: visible;\n            \/* era \"hidden\" \u2014 mudou para o bot\u00e3o poder sair *\/\n            min-height: 754px;\n            cursor: pointer;\n        }\n\n        \/* Wrapper novo: ocupa o mesmo espa\u00e7o do cart\u00e3o (inset:0) e \u00e9 ele que\n                                                                                                                       tem o border-radius + overflow:hidden, isolando a imagem\/scrim *\/\n        .news-card-clip {\n            position: absolute;\n            inset: 0;\n            overflow: hidden;\n            border-radius: 50px;\n        }\n\n        \/* Na listagem, faz mais sentido um cart\u00e3o mais \"achatado\" (tipo faixa) em vez de quadrado *\/\n        .news-grid--listagem .news-card {\n            aspect-ratio: unset;\n            min-height: 200px;\n        }\n\n        \/* Imagem destacada \u2014 sempre vis\u00edvel. transition no transform permite o zoom suave no hover *\/\n        .news-card-bg-image {\n            position: absolute;\n            inset: 0;\n            background-size: cover;\n            background-position: center;\n            z-index: 0;\n            transition: transform 500ms ease;\n        }\n\n        \/* Zoom ligeiro na imagem quando o rato passa pelo cart\u00e3o *\/\n        .news-card:hover .news-card-bg-image {\n            transform: scale(1.08);\n        }\n\n\n        .news-card-scrim {\n            position: absolute;\n            inset: 0;\n            z-index: 1;\n            background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 50%);\n            pointer-events: none;\n            \/* garante que o gradiente nunca bloqueia cliques no cart\u00e3o *\/\n        }\n\n        \/* NOVO \u2014 overlay de cor s\u00f3lida, invis\u00edvel por defeito; ganha opacidade\n                                                                                                                       junto com o resto do conte\u00fado no hover (ver .news-card:hover abaixo) *\/\n        .news-card-overlay {\n            position: absolute;\n            inset: 0;\n            z-index: 1;\n            background: #77756F;\n            opacity: 0;\n            pointer-events: none;\n            transition: opacity 350ms ease;\n        }\n\n        .news-card:hover .news-card-overlay {\n            opacity: 0.68;\n        }\n\n        .news-card-title {\n            text-align: center;\n        }\n\n        \/* Wrapper volta a ser o \"contexto\" para os 3 blocos se posicionarem de forma independente *\/\n        .news-card-content {\n            position: relative;\n            z-index: 2;\n            height: 100%;\n            padding: 43px;\n        }\n\n        .news-card-top {\n            position: absolute;\n            top: 95px;\n            left: 0px;\n            display: flex;\n            width: 100%;\n            justify-content: center;\n\n        }\n\n        .news-card-middle {\n            position: absolute;\n            top: 50%;\n            left: 43px;\n            right: 43px;\n            transform: translateY(calc(-50% + 12px));\n\n            display: flex;\n            flex-direction: column;\n            gap: 8px;\n\n            opacity: 0;\n            transition: opacity 350ms ease, transform 350ms ease;\n        }\n\n        .news-card:hover .news-card-middle {\n            opacity: 1;\n            \/* no hover, remove o offset extra \u2014 o bloco assenta exactamente no centro *\/\n            transform: translateY(-50%);\n        }\n\n        \/* Bot\u00e3o pode agora sair um pouco por baixo do cart\u00e3o visual *\/\n        .news-card-bottom {\n            position: absolute;\n            width: 100%;\n            bottom: -20px;\n            \/* valor negativo = sai por baixo; ajusta a gosto *\/\n            left: 0px;\n            right: unset;\n            display: flex;\n            justify-content: center;\n        }\n\n        .news-card-date {\n            font-size: 21px;\n            text-align: center;\n            color: var(--salmon);\n        }\n\n        .news-card-excerpt {\n            text-align: center;\n            color: #fff;\n        }\n\n        .mainButton.readMoreButton {\n            border-color: transparent;\n        }\n\n        .mainButton.readMoreButton:hover {\n            border-color: var(--salmon);\n            background-color: #fff;\n        }\n\n\n        .news-card:hover .mainButton.readMoreButton {\n            border-color: var(--salmon);\n            \/* background-color: #fff; *\/\n        }\n\n        .news-card:hover .mainButton.readMoreButton:hover .mainButton-text {\n            color: var(--salmon);\n        }\n\n        .news-card:hover .mainButton.readMoreButton:hover .mainButton-dot {\n            background-color: var(--salmon);\n        }\n\n        \/* Responsivo: em ecr\u00e3s mais pequenos, cart\u00f5es da vis\u00e3o curta empilham tamb\u00e9m *\/\n        @media only screen and (max-width: 1750px) {\n            .news-card {\n                min-height: calc(754px * 0.7);\n            }\n\n            .news-card-top {\n                top: calc(95px * 0.7);\n            }\n        }\n\n        @media only screen and (max-width: 1550px) {\n            .news-card {\n                min-height: calc(754px * 0.6);\n            }\n\n            .news-card-top {\n                top: calc(95px * 0.6);\n            }\n        }\n\n\n        \/* Responsivo: em ecr\u00e3s mais pequenos, cart\u00f5es da vis\u00e3o curta empilham tamb\u00e9m *\/\n        @media only screen and (max-width: 768px) {\n            .news-grid--curta {\n                grid-template-columns: 1fr;\n                gap: 40px;\n            }\n\n            .news-card-date {\n                font-size: 17px;\n            }\n\n            \/* Em vez de for\u00e7ar sempre vis\u00edvel, s\u00f3 ativa quando o JS (IntersectionObserver)\n                                       adicionar a classe \"is-in-view\" \u2014 ou seja, quando o cart\u00e3o aparece no scroll *\/\n            .news-card.is-in-view .news-card-middle {\n                opacity: 1;\n                transform: translateY(-50%);\n            }\n\n            \/* NOVO \u2014 equivalente ao :hover do overlay, para mobile (via is-in-view) *\/\n            .news-card.is-in-view .news-card-overlay {\n                opacity: 0.68;\n            }\n        }\n    <\/style>\n\n    <script>\n        jQuery(function ($) {\n            \/\/ S\u00f3 faz sentido este efeito em ecr\u00e3s pequenos (\u2264768px), onde n\u00e3o h\u00e1 hover real\n            if (window.innerWidth > 768) return;\n\n            const $cards = $('.news-card');\n            if (!$cards.length) return;\n\n            \/\/ Guarda a % de visibilidade de cada cart\u00e3o, atualizada a cada scroll.\n            \/\/ Usamos um Map para associar cada elemento DOM ao seu ratio actual\n            const visibilityMap = new Map();\n            $cards.each(function () {\n                visibilityMap.set(this, 0);\n            });\n\n            \/\/ Percorre o Map e ativa \"is-in-view\" APENAS no cart\u00e3o com maior visibilidade,\n            \/\/ desligando essa classe de todos os outros \u2014 \u00e9 isto que faz o efeito\n            \/\/ \"andar\" de cart\u00e3o em cart\u00e3o conforme fazes scroll\n            function updateActiveCard() {\n                let mostVisibleEl = null;\n                let highestRatio = 0;\n\n                visibilityMap.forEach((ratio, el) => {\n                    if (ratio > highestRatio) {\n                        highestRatio = ratio;\n                        mostVisibleEl = el;\n                    }\n                });\n\n                $cards.removeClass('is-in-view');\n\n                \/\/ S\u00f3 ativa se houver visibilidade m\u00ednima significativa (evita ativar\n                \/\/ um cart\u00e3o que mal se v\u00ea, tipo 2% no canto do ecr\u00e3)\n                if (mostVisibleEl && highestRatio > 0.3) {\n                    $(mostVisibleEl).addClass('is-in-view');\n                }\n            }\n\n            \/\/ threshold com v\u00e1rios valores (0, 0.1, 0.2 ... 1) faz o callback disparar\n            \/\/ em cada 10% de varia\u00e7\u00e3o de visibilidade \u2014 d\u00e1 uma leitura fina do ratio\n            \/\/ enquanto o cart\u00e3o entra\/sai do ecr\u00e3, n\u00e3o s\u00f3 num \u00fanico ponto fixo\n            const observer = new IntersectionObserver(\n                (entries) => {\n                    entries.forEach((entry) => {\n                        visibilityMap.set(entry.target, entry.intersectionRatio);\n                    });\n                    updateActiveCard();\n                },\n                {\n                    threshold: Array.from({ length: 11 }, (_, i) => i \/ 10), \/\/ [0, 0.1, 0.2, ..., 1]\n                }\n            );\n\n            $cards.each(function () {\n                observer.observe(this);\n            });\n        });\n    <\/script>\n    \n    <div class=\"news-grid news-grid--curta gsap-stagger-children-400\">\n        \n            \n            <a href=\"https:\/\/imobiliario.publico.pt\/suplementos\/suplemento-22042026\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"news-card\">\n\n                <!-- Novo wrapper: s\u00f3 aqui \u00e9 que aplicamos overflow:hidden + border-radius,\n         para a imagem\/scrim ficarem recortados mas o bot\u00e3o (fora deste wrapper) n\u00e3o -->\n                <div class=\"news-card-clip\">\n                                            <div class=\"news-card-bg-image\" style=\"background-image: url('https:\/\/idsgrupo.bspacydev.com\/wp-content\/uploads\/yuno-news-scaled.webp');\">\n                        <\/div>\n                    \n                    <div class=\"news-card-scrim\"><\/div>\n                    <div class=\"news-card-overlay\"><\/div>\n                                    <\/div>\n\n                <!-- Conte\u00fado do cart\u00e3o, sempre vis\u00edvel por cima da imagem -->\n                <div class=\"news-card-content\">\n\n                    <div class=\"news-card-top\">\n                        <h3 class=\"news-card-title\">YUNO<\/h3>\n                    <\/div>\n\n                    <div class=\"news-card-middle\">\n                        <p class=\"news-card-excerpt\">A new smart apartment concept takes shape in Porto&#039;s university district<\/p>\n                                                <span class=\"news-card-date\">22 April 2026<\/span>\n                    <\/div>\n\n                    <div class=\"news-card-bottom\">\n                        <div class=\"mainButton readMoreButton\">\n                            <span class=\"mainButton-dot\"><\/span>\n                            <div class=\"button-text-wrapper\">\n                                <span class=\"mainButton-text\">Read article<\/span>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                <\/div>\n            <\/a>\n\n        \n            \n            <a href=\"https:\/\/www.jornaldenegocios.pt\/empresas\/imobiliario\/detalhe\/ids-compra-22-imoveis-no-morro-da-se-do-porto-para-cumprir-promessa-de-18-anos-da-autarquia\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"news-card\">\n\n                <!-- Novo wrapper: s\u00f3 aqui \u00e9 que aplicamos overflow:hidden + border-radius,\n         para a imagem\/scrim ficarem recortados mas o bot\u00e3o (fora deste wrapper) n\u00e3o -->\n                <div class=\"news-card-clip\">\n                                            <div class=\"news-card-bg-image\" style=\"background-image: url('https:\/\/idsgrupo.bspacydev.com\/wp-content\/uploads\/ids-noticia.webp');\">\n                        <\/div>\n                    \n                    <div class=\"news-card-scrim\"><\/div>\n                    <div class=\"news-card-overlay\"><\/div>\n                                    <\/div>\n\n                <!-- Conte\u00fado do cart\u00e3o, sempre vis\u00edvel por cima da imagem -->\n                <div class=\"news-card-content\">\n\n                    <div class=\"news-card-top\">\n                        <h3 class=\"news-card-title\">IDS<\/h3>\n                    <\/div>\n\n                    <div class=\"news-card-middle\">\n                        <p class=\"news-card-excerpt\">IDS acquires 22 properties in Porto&#039;s Morro da S\u00e9 to fulfil an 18-year municipal commitment<\/p>\n                                                <span class=\"news-card-date\">10 July 2025<\/span>\n                    <\/div>\n\n                    <div class=\"news-card-bottom\">\n                        <div class=\"mainButton readMoreButton\">\n                            <span class=\"mainButton-dot\"><\/span>\n                            <div class=\"button-text-wrapper\">\n                                <span class=\"mainButton-text\">Read article<\/span>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                <\/div>\n            <\/a>\n\n        \n            \n            <a href=\"https:\/\/imobiliario.publico.pt\/noticias\/oferta-alojamento-porto-reforcada-com-novo-hotel-capitolio\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"news-card\">\n\n                <!-- Novo wrapper: s\u00f3 aqui \u00e9 que aplicamos overflow:hidden + border-radius,\n         para a imagem\/scrim ficarem recortados mas o bot\u00e3o (fora deste wrapper) n\u00e3o -->\n                <div class=\"news-card-clip\">\n                                            <div class=\"news-card-bg-image\" style=\"background-image: url('https:\/\/idsgrupo.bspacydev.com\/wp-content\/uploads\/capitolio-featured.webp');\">\n                        <\/div>\n                    \n                    <div class=\"news-card-scrim\"><\/div>\n                    <div class=\"news-card-overlay\"><\/div>\n                                    <\/div>\n\n                <!-- Conte\u00fado do cart\u00e3o, sempre vis\u00edvel por cima da imagem -->\n                <div class=\"news-card-content\">\n\n                    <div class=\"news-card-top\">\n                        <h3 class=\"news-card-title\">CAPIT\u00d3LIO<\/h3>\n                    <\/div>\n\n                    <div class=\"news-card-middle\">\n                        <p class=\"news-card-excerpt\">Porto&#039;s accommodation offer strengthened by the new Capit\u00f3lio hotel<\/p>\n                                                <span class=\"news-card-date\">1 October 2025<\/span>\n                    <\/div>\n\n                    <div class=\"news-card-bottom\">\n                        <div class=\"mainButton readMoreButton\">\n                            <span class=\"mainButton-dot\"><\/span>\n                            <div class=\"button-text-wrapper\">\n                                <span class=\"mainButton-text\">Read article<\/span>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                <\/div>\n            <\/a>\n\n            <\/div>\n\n    [\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>[vc_row el_class=&#8221;hero-section&#8221;][vc_column][\/vc_column][\/vc_row][vc_row el_class=&#8221;quem-somos-section pagePaddings light-bg&#8221; el_id=&#8221;grupo-ids&#8221;][vc_column][vc_raw_html css=&#8221;&#8221;]JTNDZGl2JTIwY2xhc3MlM0QlMjJxdWVtLXNvbW9zLWltYWdlLWFuY2hvciUyMiUyMGlkJTNEJTIycXVlbVNvbW9zSW1hZ2VBbmNob3IlMjIlM0UlM0MlMkZkaXYlM0U=[\/vc_raw_html][vc_row_inner equal_height=&#8221;yes&#8221; content_placement=&#8221;middle&#8221;][vc_column_inner width=&#8221;1\/2&#8243;][vc_custom_heading text=&#8221;Who We Are&#8221; font_container=&#8221;tag:h2|text_align:right&#8221; use_theme_fonts=&#8221;yes&#8221; css=&#8221;&#8221;][\/vc_column_inner][vc_column_inner width=&#8221;1\/2&#8243;][vc_column_text css=&#8221;&#8221; el_class=&#8221;gsap-fill-words bold&#8221;]Transforming opportunities into lasting value.[\/vc_column_text][vc_column_text css=&#8221;&#8221; el_class=&#8221;gsap-fill-words&#8221;]IDS is a business group focused on asset development and management, combining strategic vision, financial strength and execution capability. We create lasting value through assets, projects and strategic holdings designed [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":0,"parent":0,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-469","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/idsgrupo.bspacydev.com\/en\/wp-json\/wp\/v2\/pages\/469","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/idsgrupo.bspacydev.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/idsgrupo.bspacydev.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/idsgrupo.bspacydev.com\/en\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/idsgrupo.bspacydev.com\/en\/wp-json\/wp\/v2\/comments?post=469"}],"version-history":[{"count":1,"href":"https:\/\/idsgrupo.bspacydev.com\/en\/wp-json\/wp\/v2\/pages\/469\/revisions"}],"predecessor-version":[{"id":635,"href":"https:\/\/idsgrupo.bspacydev.com\/en\/wp-json\/wp\/v2\/pages\/469\/revisions\/635"}],"wp:attachment":[{"href":"https:\/\/idsgrupo.bspacydev.com\/en\/wp-json\/wp\/v2\/media?parent=469"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}