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  subtitle=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  disclaimerText=truncateIgnoringSpaces(bannerDisclaimerText.getData(), 70) 

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

51  disclaimerUploadFile=disclaimerFile.getData() 

52> 

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

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

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

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

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

58        <div> 

59          <#if title??> 

60            <#if isAfterFirstBanner> 

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

62                ${title} 

63              </h2> 

64            <#else> 

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

66                ${title} 

67              </h1> 

68            </#if> 

69            <hr class="mt-0 mb-4 mb-lg-6 main-banner__line"> 

70          </#if> 

71          <#if subtitle??> 

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

73              ${applyBold(subtitle)} 

74            </p> 

75          </#if> 

76        </div> 

77        <div> 

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

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

80              <#if ((disclaimerText?? && disclaimerText !="" ) || (disclaimerTextFile?? && disclaimerTextFile !="" ))> 

81                <#if isInverseButton> 

82                  <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}"> 

83                    ${textFirstButton} 

84                  </a> 

85                <#else> 

86                  <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}"> 

87                    ${textFirstButton} 

88                  </a> 

89                </#if> 

90                <#else> 

91                  <#if isInverseButton> 

92                    <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}"> 

93                      ${textFirstButton} 

94                    </a> 

95                  <#else> 

96                    <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}"> 

97                      ${textFirstButton} 

98                    </a> 

99                  </#if> 

100              </#if> 

101            </#if> 

102          </div> 

103          <div class="disclaimer-area"> 

104            <#if disclaimerText?? && disclaimerUploadFile?? && disclaimerTextFile?? && isInverseButton> 

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

106                ${disclaimerText} 

107                <a class="disclaimer-link-primary-inverse js-main-banner-link" aria-label="link para ${disclaimerTextFile}" href="${disclaimerUploadFile}" target="_blank"> 

108                  ${languageUtil.format(locale, "${disclaimerTextFile}", false)} 

109                </a> 

110              </p> 

111            </#if> 

112            <#if disclaimerText?? && disclaimerUploadFile?? && disclaimerTextFile?? && !isInverseButton> 

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

114                ${disclaimerText} 

115                <a class="disclaimer-link-primary js-main-banner-link" aria-label="link para ${disclaimerTextFile}" href="${disclaimerUploadFile}" target="_blank"> 

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

117                </a> 

118              </p> 

119            </#if> 

120            <#if disclaimerText?? && !disclaimerTextFile?? || disclaimerText?? && !disclaimerUploadFile??> 

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

122                ${disclaimerText} 

123              </p> 

124            </#if> 

125            <#if !disclaimerText?? && disclaimerUploadFile?? && disclaimerTextFile??> 

126              <#if isInverseButton> 

127                <a class="disclaimer-link-primary-inverse mb-2 mb-lg-0" aria-label="link para ${disclaimerTextFile}" href="${disclaimerUploadFile}" target="_blank"> 

128                  ${languageUtil.format(locale, "${disclaimerTextFile}", false)} 

129                </a> 

130              <#else> 

131                <a class="disclaimer-link-primary mb-2 mb-lg-0" aria-label="link para ${disclaimerTextFile}" href="${disclaimerUploadFile}" target="_blank"> 

132                  ${languageUtil.format(locale, "${disclaimerTextFile}", false)} 

133                </a> 

134              </#if> 

135            </#if> 

136          </div> 

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

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

139              <button class="bv-btn-2 bv-btn-2__collapse js-collapse-banner"> 

140                Recolher  

141                <svg class="ml-2" width="11" height="7" viewBox="0 0 11 7" fill="none" xmlns="http://www.w3.org/2000/svg"> 

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

143                </svg> 

144              </button> 

145            </div> 

146          </#if> 

147        </div> 

148      </div> 

149    </div> 

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

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

152        <img  

153          <#if isAfterFirstBanner> 

154            loading="lazy" 

155          <#else> 

156            fetchpriority="high" 

157          </#if> 

158          class="main-banner__image horizontal-grad ${isGradient?then('background-gradient','')}"  

159          alt="${desktopImage.getAttribute("alt")}"  

160          data-fileentryid="${desktopImage.getAttribute("fileEntryId")}"  

161          src="${deskImage}" 

162        /> 

163      </#if> 

164    </div> 

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

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

167        <img 

168          <#if isAfterFirstBanner> 

169            loading="lazy" 

170          <#else> 

171            fetchpriority="high" 

172          </#if> 

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

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

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

176          src="${mobImage}" 

177        /> 

178      </#if> 

179    </div> 

180  </div> 

181  <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")}"> 

182    <div class="col-7"> 

183      <#if title??> 

184        <#if isAfterFirstBanner> 

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

186            ${title} 

187          </h2> 

188        <#else> 

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

190            ${title} 

191          </h2> 

192        </#if> 

193      </#if> 

194    </div> 

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

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

197        Expandir 

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

199          <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" /> 

200        </svg> 

201      </button> 

202    </div> 

203  </div> 

204</div> 

205<style> 

206  .main-banner__col-off { 

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

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

209  } 

210 

211  .main-banner__line { 

212    width: 64px; 

213  } 

214 

215  .main-banner__template { 

216    height: 368px; 

217  } 

218 

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

220    height: 222px; 

221  } 

222 

223  .main-banner { 

224    border-radius: 16px !important; 

225    max-width: 328px; 

226  } 

227 

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

229    .main-banner { 

230      max-width: 560px; 

231    } 

232  } 

233 

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

235    .main-banner { 

236      max-width: 700px; 

237    } 

238  } 

239 

240  .main-banner__image-expanded { 

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

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

243  } 

244 

245  .main-banner__collapsed { 

246    background-position: right; 

247    background-repeat: no-repeat; 

248    min-height: 144px; 

249    height: auto; 

250    margin: 0; 

251    padding: 0; 

252  } 

253 

254  .main-banner__collapsed__image { 

255    max-width: 150px; 

256  } 

257 

258  .main-banner__expanded { 

259    max-width: fit-content; 

260  } 

261 

262  .main-banner__title-mini { 

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

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

265  } 

266 

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

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

269      max-width: fit-content !important; 

270    } 

271  } 

272 

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

274    .main-banner { 

275      min-width: initial; 

276      max-width: 1096px; 

277      height: 480px; 

278      overflow: hidden; 

279    } 

280 

281    .main-banner__expanded { 

282      height: 480px; 

283      max-width: 1096px; 

284      min-height: unset; 

285      margin: 0; 

286    } 

287 

288    .main-banner__image { 

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

290      object-fit: cover; 

291      height: 480px; 

292      width: 100%; 

293    } 

294 

295    .main-banner__content { 

296      flex: 0 0 33.3%; 

297      max-width: 33.3%; 

298    } 

299 

300    .main-banner__desk-image { 

301      width: 630px; 

302      height: 480px; 

303    } 

304 

305    .main-banner__title { 

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

307      line-height: 3.8rem; 

308      letter-spacing: -0.32; 

309    } 

310 

311    .main-banner__body-text { 

312      font-size: 1.6rem; 

313      line-height: 2.5rem; 

314      letter-spacing: 0; 

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

316    } 

317 

318    .main-banner__template { 

319      padding: 0; 

320      height: initial; 

321    } 

322  } 

323   

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

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

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

327  } 

328 

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

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

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

332  } 

333   

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

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

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

337  } 

338   

339      :root { 

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

341  } 

342 

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

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

345    content: ""; 

346    position: absolute; 

347    inset: 0; 

348    pointer-events: none; 

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

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

351        #223AD2 48.44%); 

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

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

354    background-repeat: no-repeat; 

355    border-radius: inherit; 

356    z-index: 0; 

357  } 

358 

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

360    position: relative; 

361    z-index: 1; 

362  } 

363 

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

365    position: absolute; 

366    left: 50%; 

367    transform: translateX(-50%); 

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

369    z-index: 3; 

370    pointer-events: auto; 

371  } 

372</style> 

373<script> 

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

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

376    collapseButtons.forEach((btn) => { 

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

378        setTimeout(() => { 

379          window.scrollTo({ 

380            top: 0, 

381            behavior: "smooth" 

382          }); 

383        }, 100); 

384      }); 

385    }); 

386  }); 

387</script>