1<#function formatText text> 

2  <#assign cleanedText=text?lower_case 

3    cleanedText=cleanedText?replace("à|á|ã|â", "a" , 'r' ) 

4    cleanedText=cleanedText?replace("é|è|ê", "e" , 'r' ) 

5    cleanedText=cleanedText?replace("í|ì|î", "i" , 'r' ) 

6    cleanedText=cleanedText?replace("ó|ò|õ|ô", "o" , 'r' ) 

7    cleanedText=cleanedText?replace("ú|ù|û", "u" , 'r' ) 

8    cleanedText=cleanedText?replace("ç", "c" , 'r' ) 

9    cleanedText=cleanedText?replace("\\s+", "-" , 'r' )> 

10    <#return cleanedText> 

11</#function> 

12<#assign instanceId=.vars["reserved-article-id"].data> 

13  <#function truncateIgnoringSpaces text maxLength> 

14    <#assign 

15      count=0 

16      result=""> 

17      <#list text?split("") as char> 

18        <#if count < maxLength> 

19          <#assign result +=char> 

20            <#if char !=" "> 

21              <#assign count +=1> 

22            </#if> 

23        </#if> 

24      </#list> 

25      <#return result> 

26  </#function> 

27  <#function applyBold text> 

28    <#assign boldText=text?replace("\\*\\*(.*?)\\*\\*", "<strong>$1</strong>" , "r" ) /> 

29    <#return boldText> 

30  </#function> 

31  <#assign boldMatch="^(\\*\\*.*?\\*\\*)" /> 

32  <#assign 

33    backgroundColorContent=backgroundColor.getData() 

34    inverseBackgrounds=["background-primary-pure", "background-primary-high" , "background-secondary-high" ] 

35    isInverseButton=inverseBackgrounds?seq_contains(backgroundColorContent) 

36    isAfterFirstBanner=getterUtil.getBoolean(bannerOrder.getData()) 

37    isGradient=getterUtil.getBoolean(backgroundGradient.getData()) 

38    deskImage=desktopImage.getData() 

39    mobImage=mobileImage.getData() 

40    mobMiniImage=mobileMiniImage.getData() 

41    title=truncateIgnoringSpaces(bannerTitle.getData(), 40) 

42    dataTitle=formatText(title) 

43    subtiltle=truncateIgnoringSpaces(bannerSubtitle.getData(), 120) 

44    textFirstButton=truncateIgnoringSpaces(buttonText.getData(), 30) 

45    dataFirstButton=formatText(textFirstButton) 

46    linkFirstButton=buttonLink.getData() 

47    ariaFirstButton=buttonAria.getData()?truncate(50, "" ) 

48    targetFirstButton=buttonTarget.getData() 

49    dislcaimerText=truncateIgnoringSpaces(bannerDisclaimerText.getData(), 70) 

50    dislcaimerTextFile=truncateIgnoringSpaces(bannerDisclaimerTextFile.getData(), 30) 

51    dislcaimerUploadFile=disclaimerFile.getData()> 

52    <div class="js-banner-with-image main-banner ${backgroundColorContent}" data-background-color="${backgroundColorContent}" data-component-id="${instanceId}"> 

53      <div class="row flex-column-reverse flex-lg-row js-banner-expanded justify-content-between align-items-end main-banner__expanded"> 

54        <div class="d-none d-lg-block col-lg-1 main-banner__col-off"></div> 

55        <div class="col-12 col-lg main-banner__content pb-lg-7"> 

56          <div class="d-flex flex-column main-banner__template justify-content-between"> 

57            <div> 

58              <#if title??> 

59                <#if isAfterFirstBanner> 

60                  <h2 class="mb-2 mb-lg-4 js-banner-title main-banner__title" data-title="${dataTitle}"> 

61                    ${title} 

62                  </h2> 

63                  <#else> 

64                    <h1 class="mb-2 mb-lg-6 js-banner-title  main-banner__title" data-title="${dataTitle}"> 

65                      ${title} 

66                    </h1> 

67                </#if> 

68                <hr class="mt-0 mb-2 mb-lg-6 main-banner__line"> 

69              </#if> 

70              <#if subtiltle??> 

71                <p class="mb-0 mb-lg-8 main-banner__body-text js-banner-subtitle"> 

72                  ${applyBold(subtiltle)} 

73                </p> 

74              </#if> 

75            </div> 

76            <div> 

77              <div class="d-flex flex-column justify-content-between align-items-baseline mb-2"> 

78                <#if textFirstButton?? && textFirstButton !=""> 

79                  <#if ((dislcaimerText?? && dislcaimerText !="" ) || (dislcaimerTextFile?? && dislcaimerTextFile !="" ))> 

80                    <#if isInverseButton> 

81                      <a class="js-main-banner-button bv-btn-2 bv-btn-2__primary-inverse" href="${linkFirstButton}" data-link="${linkFirstButton}" target="${targetFirstButton}" data-title="${dataTitle}" data-text="${dataFirstButton}"> 

82                        ${textFirstButton} 

83                      </a> 

84                      <#else> 

85                        <a class="js-main-banner-button bv-btn-2 bv-btn-2__primary" href="${linkFirstButton}" data-link="${linkFirstButton}" target="${targetFirstButton}" data-title="${dataTitle}" data-text="${dataFirstButton}"> 

86                          ${textFirstButton} 

87                        </a> 

88                    </#if> 

89                    <#else> 

90                      <#if isInverseButton> 

91                        <a class="js-main-banner-button bv-btn-2 bv-btn-2__primary-inverse mb-lg-10" href="${linkFirstButton}" data-link="${linkFirstButton}" target="${targetFirstButton}" data-title="${dataTitle}" data-text="${dataFirstButton}"> 

92                          ${textFirstButton} 

93                        </a> 

94                        <#else> 

95                          <a class="js-main-banner-button bv-btn-2 bv-btn-2__primary mb-lg-10" href="${linkFirstButton}" data-link="${linkFirstButton}" target="${targetFirstButton}" data-title="${dataTitle}" data-text="${dataFirstButton}"> 

96                            ${textFirstButton} 

97                          </a> 

98                      </#if> 

99                  </#if> 

100                </#if> 

101              </div> 

102              <#if dislcaimerText?? && dislcaimerUploadFile?? && dislcaimerTextFile?? && isInverseButton> 

103                <p class=" main-banner__disclaimer-text mb-2 mb-lg-0"> 

104                  ${dislcaimerText} 

105                  <a 

106                    class="disclaimer-link-primary-inverse js-main-banner-link" aria-label="link para ${dislcaimerTextFile}" href="${dislcaimerUploadFile}" target="_blank"> 

107                    ${languageUtil.format(locale, "${dislcaimerTextFile}", false)} 

108                  </a> 

109                </p> 

110              </#if> 

111              <#if dislcaimerText?? && dislcaimerUploadFile?? && dislcaimerTextFile?? && !isInverseButton> 

112                <p class=" main-banner__disclaimer-text mb-2 mb-lg-0"> 

113                  ${dislcaimerText} 

114                  <a 

115                    class="disclaimer-link-primary js-main-banner-link" aria-label="link para ${dislcaimerTextFile}" href="${dislcaimerUploadFile}" target="_blank"> 

116                    ${languageUtil.format(locale, "${dislcaimerTextFile}", false)} 

117                  </a> 

118                </p> 

119              </#if> 

120              <#if dislcaimerText?? && !dislcaimerTextFile?? || dislcaimerText?? && !dislcaimerUploadFile??> 

121                <p class="main-banner__disclaimer-text mb-2 mb-lg-0"> 

122                  ${dislcaimerText} 

123                </p> 

124              </#if> 

125              <#if !dislcaimerText?? && dislcaimerUploadFile?? && dislcaimerTextFile??> 

126                <#if isInverseButton> 

127                  <a 

128                    class="disclaimer-link-primary-inverse mb-2 mb-lg-0" aria-label="link para ${dislcaimerTextFile}" href="${dislcaimerUploadFile}" target="_blank"> 

129                    ${languageUtil.format(locale, "${dislcaimerTextFile}", false)} 

130                  </a> 

131                  <#else> 

132                    <a 

133                      class="disclaimer-link-primary mb-2 mb-lg-0" aria-label="link para ${dislcaimerTextFile}" href="${dislcaimerUploadFile}" target="_blank"> 

134                      ${languageUtil.format(locale, "${dislcaimerTextFile}", false)} 

135                    </a> 

136                </#if> 

137              </#if> 

138              <#if mobMiniImage?? && mobMiniImage !=""> 

139                <div class="d-block d-lg-none text-center js-collapse-banner-mobile mt-2"> 

140                  <button class="bv-btn-2 bv-btn-2__collapse js-collapse-banner">Recolher <svg class="ml-2" width="11" height="7" viewBox="0 0 11 7" fill="none" xmlns="http://www.w3.org/2000/svg"> 

141                      <path d="M0.5 5.75L5.5 1.25L10.5 5.75" stroke="var(--color-surface-low)" /> 

142                    </svg> 

143                  </button> 

144                </div> 

145              </#if> 

146            </div> 

147          </div> 

148        </div> 

149        <div class="d-none d-lg-block col-lg pr-0"> 

150          <#if deskImage?? && deskImage !=""> 

151            <img <#if isAfterFirstBanner>loading="lazy" 

152            <#else> 

153              fetchpriority="high" 

154          </#if> class="main-banner__image horizontal-grad ${isGradient?then('background-gradient','')}" alt="${desktopImage.getAttribute("alt")}" data-fileentryid="${desktopImage.getAttribute("fileEntryId")}" src="${deskImage}" /> 

155          </#if> 

156        </div> 

157        <div class="d-block d-lg-none col-12 text-center js-banner-mobile-wrapper main-banner__mobile-wrapper"> 

158          <#if mobImage?? && mobImage !=""> 

159            <img 

160              <#if isAfterFirstBanner> 

161            loading="lazy" 

162            <#else> 

163              fetchpriority="high" 

164          </#if> 

165          class="main-banner__image main-banner__image-expanded vertical-grad js-image-expanded ${isGradient?then('background-gradient','')}" 

166          alt="${mobileImage.getAttribute("alt")}" 

167          data-fileentryid="${mobileImage.getAttribute("fileEntryId")}" 

168          src="${mobImage}" 

169          /> 

170          </#if> 

171        </div> 

172      </div> 

173      <div class="row mini-grad ${isGradient?then('background-gradient','')} d-none js-banner-collapsed main-banner__collapsed position-relative justify-content-between" style="background-image: url('${mobMiniImage}');" aria-label="${mobileMiniImage.getAttribute("alt")}"> 

174        <div class="col-7"> 

175          <#if title??> 

176            <#if isAfterFirstBanner> 

177              <h2 class="js-banner-title pl-1 mb-3 main-banner__title-mini" data-title="${dataTitle}"> 

178                ${title} 

179              </h2> 

180              <#else> 

181                <h2 class="js-banner-title pl-1 mb-3 main-banner__title-mini" data-title="${dataTitle}"> 

182                  ${title} 

183                </h2> 

184            </#if> 

185          </#if> 

186        </div> 

187        <div class="main-banner__expand-button-wrapper"> 

188          <button class="bv-btn-2 bv-btn-2__expand js-expand-banner"> 

189            Expandir 

190            <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 

191              <path d="M14.6716 8.53015C14.7402 8.60383 14.823 8.66293 14.915 8.70393C15.007 8.74492 15.1063 8.76696 15.207 8.76874C15.3078 8.77051 15.4078 8.75199 15.5012 8.71427C15.5946 8.67655 15.6794 8.6204 15.7506 8.54918C15.8218 8.47796 15.878 8.39313 15.9157 8.29974C15.9534 8.20636 15.9719 8.10633 15.9702 8.00562C15.9684 7.90492 15.9463 7.80561 15.9054 7.71361C15.8644 7.62161 15.8053 7.53881 15.7316 7.47015L13.7836 5.52015C13.6974 5.43221 13.608 5.34748 13.5156 5.26615C13.3902 5.15649 13.2449 5.07196 13.0876 5.01715C12.8367 4.93569 12.5665 4.93569 12.3156 5.01715C12.1583 5.07196 12.013 5.15649 11.8876 5.26615C11.7951 5.34748 11.7057 5.43221 11.6196 5.52015L9.67157 7.47015C9.53909 7.61232 9.46697 7.80037 9.47039 7.99467C9.47382 8.18897 9.55254 8.37435 9.68995 8.51177C9.82736 8.64918 10.0127 8.72789 10.207 8.73132C10.4013 8.73475 10.5894 8.66263 10.7316 8.53015L12.7016 6.56015L14.6716 8.53015ZM10.7316 15.4701C10.6629 15.3965 10.5801 15.3374 10.4881 15.2964C10.3961 15.2554 10.2968 15.2333 10.1961 15.2316C10.0954 15.2298 9.99536 15.2483 9.90197 15.286C9.80858 15.3237 9.72375 15.3799 9.65253 15.4511C9.58131 15.5223 9.52517 15.6072 9.48745 15.7005C9.44973 15.7939 9.4312 15.894 9.43298 15.9947C9.43475 16.0954 9.4568 16.1947 9.49779 16.2867C9.53878 16.3787 9.59788 16.4615 9.67157 16.5301L11.6196 18.4791C11.7066 18.5651 11.7996 18.6591 11.8876 18.7341C11.9876 18.8181 12.1266 18.9201 12.3156 18.9821C12.5656 19.0631 12.8366 19.0631 13.0876 18.9821C13.2448 18.9276 13.3901 18.8434 13.5156 18.7341C13.6036 18.6591 13.6966 18.5651 13.7836 18.4791L15.7316 16.5301C15.8053 16.4615 15.8644 16.3787 15.9054 16.2867C15.9463 16.1947 15.9684 16.0954 15.9702 15.9947C15.9719 15.894 15.9534 15.7939 15.9157 15.7005C15.878 15.6072 15.8218 15.5223 15.7506 15.4511C15.6794 15.3799 15.5946 15.3237 15.5012 15.286C15.4078 15.2483 15.3078 15.2298 15.207 15.2316C15.1063 15.2333 15.007 15.2554 14.915 15.2964C14.823 15.3374 14.7402 15.3965 14.6716 15.4701L12.7016 17.4401L10.7316 15.4701Z" fill="white" fill-opacity="0.8" /> 

192            </svg> 

193          </button> 

194        </div> 

195      </div> 

196    </div> 

197    <style> 

198    .main-banner__col-off { 

199      flex: 0 0 calc(1 / 16 * 100%); 

200      max-width: calc(1 / 16 * 100%); 

201    } 

202 

203    .main-banner__line { 

204      width: 64px; 

205    } 

206 

207    .main-banner__template { 

208      height: 368px; 

209    } 

210 

211    .main-banner__image.js-image-expanded { 

212      height: 222px; 

213    } 

214 

215    .main-banner { 

216      border-radius: 16px !important; 

217      max-width: 328px; 

218    } 

219 

220    @media screen and (min-width: 541px) { 

221      .main-banner { 

222        max-width: 560px; 

223      } 

224    } 

225 

226    @media screen and (min-width: 768px) { 

227      .main-banner { 

228        max-width: 700px; 

229      } 

230    } 

231 

232    .main-banner__image-expanded { 

233      border-top-left-radius: 16px !important; 

234      border-top-right-radius: 16px !important; 

235    } 

236 

237    .main-banner__collapsed { 

238      background-position: right; 

239      background-repeat: no-repeat; 

240      min-height: 144px; 

241      height: auto; 

242      margin: 0; 

243      padding: 0; 

244    } 

245 

246    .main-banner__collapsed__image { 

247      max-width: 150px; 

248    } 

249 

250    .main-banner__expanded { 

251      max-width: fit-content; 

252    } 

253 

254    .main-banner__title-mini { 

255      font-weight: var(--font-weight-medium); 

256      margin-top: calc(var(--spacer-7) + var(--spacer-1)); 

257    } 

258 

259    @media screen and (min-width: 541px) { 

260      .main-banner__image.js-image-expanded { 

261        max-width: fit-content !important; 

262      } 

263    } 

264 

265    @media screen and (min-width: 992px) { 

266      .main-banner { 

267        min-width: initial; 

268        max-width: 1096px; 

269        height: 480px; 

270        overflow: hidden; 

271      } 

272 

273      .main-banner__expanded { 

274        height: 480px; 

275        max-width: 1096px; 

276        min-height: unset; 

277        margin: 0; 

278      } 

279 

280      .main-banner__image { 

281        border-radius: var(--spacer-4); 

282        object-fit: cover; 

283        height: 480px; 

284        width: 100%; 

285      } 

286 

287      .main-banner__content { 

288        flex: 0 0 33.3%; 

289        max-width: 33.3%; 

290      } 

291 

292      .main-banner__desk-image { 

293        width: 630px; 

294        height: 480px; 

295      } 

296 

297      .main-banner__title { 

298        font-size: var(--font-size-1); 

299        line-height: 3.8rem; 

300        letter-spacing: -0.32; 

301      } 

302 

303      .main-banner__body-text { 

304        font-size: 1.6rem; 

305        line-height: 2.5rem; 

306        letter-spacing: 0; 

307        font-weight: var(--font-weight-regular); 

308      } 

309 

310      .main-banner__template { 

311        padding: 0; 

312        height: initial; 

313      } 

314    } 

315		 

316		    .background-primary-high .background-gradient.horizontal-grad { 

317      mask-image: linear-gradient(270.22deg, var(--color-primary-low) 60.61%, rgba(237, 239, 252, 0) 99.9%); 

318      -webkit-mask-image: linear-gradient(270.22deg, var(--color-primary-low) 60.61%, rgba(237, 239, 252, 0) 99.9%); 

319    } 

320 

321    .background-primary-pure .background-gradient.horizontal-grad { 

322      mask-image: linear-gradient(270.89deg, var(--color-primary-low) 71.07%, rgba(237, 239, 252, 0) 99.9%); 

323      -webkit-mask-image: linear-gradient(270.89deg, var(--color-primary-low) 71.07%, rgba(237, 239, 252, 0) 99.9%); 

324    } 

325		 

326		     .background-primary-pure .background-gradient.vertical-grad { 

327      mask-image: linear-gradient(179.83deg, var(--color-primary-low) 52.53%, rgba(237, 239, 252, 0) 94.24%); 

328      -webkit-mask-image: linear-gradient(179.83deg, var(--color-primary-low)  52.53%, rgba(237, 239, 252, 0) 94.24%); 

329    } 

330		 

331		    :root { 

332      --mini-grad-offset: 16px; 

333    } 

334 

335    .mini-grad.background-gradient::after { 

336      --grad-offset: var(--mini-grad-offset); 

337      content: ""; 

338      position: absolute; 

339      inset: 0; 

340      pointer-events: none; 

341      background-image: linear-gradient(269.92deg, 

342          rgba(34, 58, 210, 0) 25.41%, 

343          #223AD2 48.44%); 

344      background-position: var(--grad-offset) 0; 

345      background-size: calc(100% - var(--grad-offset)) 100%; 

346      background-repeat: no-repeat; 

347      border-radius: inherit; 

348      z-index: 0; 

349    } 

350 

351    .mini-grad.background-gradient> :not(.main-banner__expand-button-wrapper) { 

352      position: relative; 

353      z-index: 1; 

354    } 

355 

356    .mini-grad.background-gradient>.main-banner__expand-button-wrapper { 

357      position: absolute; 

358      left: 50%; 

359      transform: translateX(-50%); 

360      bottom: var(--spacer-2); 

361      z-index: 3; 

362      pointer-events: auto; 

363    } 

364    </style> 

365    <script> 

366    document.addEventListener("DOMContentLoaded", function() { 

367      const collapseButtons = document.querySelectorAll(".main-banner .js-collapse-banner"); 

368      collapseButtons.forEach((btn) => { 

369        btn.addEventListener("click", () => { 

370          setTimeout(() => { 

371            window.scrollTo({ 

372              top: 0, 

373              behavior: "smooth" 

374            }); 

375          }, 100); 

376        }); 

377      }); 

378    }); 

379    </script>