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          <#if disclaimerText?? && disclaimerUploadFile?? && disclaimerTextFile?? && isInverseButton> 

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

105              ${disclaimerText} 

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

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

108              </a> 

109            </p> 

110          </#if> 

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

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

113              ${disclaimerText} 

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

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

116              </a> 

117            </p> 

118          </#if> 

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

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

121              ${disclaimerText} 

122            </p> 

123          </#if> 

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

125            <#if isInverseButton> 

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

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

128              </a> 

129            <#else> 

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

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

132              </a> 

133            </#if> 

134          </#if> 

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

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

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

138                Recolher 

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

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

141                </svg> 

142              </button> 

143            </div> 

144          </#if> 

145        </div> 

146      </div> 

147    </div> 

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

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

150        <img  

151          <#if isAfterFirstBanner> 

152            loading="lazy" 

153          <#else> 

154            fetchpriority="high" 

155          </#if>  

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

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

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

159          src="${deskImage}"  

160        /> 

161      </#if> 

162    </div> 

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

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

165        <img 

166          <#if isAfterFirstBanner> 

167            loading="lazy" 

168          <#else> 

169            fetchpriority="high" 

170          </#if> 

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

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

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

174          src="${mobImage}" 

175        /> 

176      </#if> 

177    </div> 

178  </div> 

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

180    <div class="col-7"> 

181      <#if title??> 

182        <#if isAfterFirstBanner> 

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

184            ${title} 

185          </h2> 

186        <#else> 

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

188            ${title} 

189          </h1> 

190        </#if> 

191      </#if> 

192    </div> 

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

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

195        Expandir 

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

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

198        </svg> 

199      </button> 

200    </div> 

201  </div> 

202</div> 

203<style> 

204  .main-banner__col-off { 

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

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

207    } 

208 

209    .main-banner__line { 

210      width: 64px; 

211    } 

212 

213    .main-banner__template { 

214      height: 368px; 

215    } 

216 

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

218      height: 222px; 

219    } 

220 

221    .main-banner { 

222      border-radius: 16px !important; 

223      max-width: 328px; 

224    } 

225 

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

227      .main-banner { 

228        max-width: 560px; 

229      } 

230    } 

231 

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

233      .main-banner { 

234        max-width: 700px; 

235      } 

236    } 

237 

238    .main-banner__image-expanded { 

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

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

241    } 

242 

243    .main-banner__collapsed { 

244      background-position: right; 

245      background-repeat: no-repeat; 

246      min-height: 144px; 

247      height: auto; 

248      margin: 0; 

249      padding: 0; 

250    } 

251 

252    .main-banner__collapsed__image { 

253      max-width: 150px; 

254    } 

255 

256    .main-banner__expanded { 

257      max-width: fit-content; 

258    } 

259 

260    .main-banner__title-mini { 

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

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

263    } 

264 

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

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

267        max-width: fit-content !important; 

268      } 

269    } 

270 

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

272      .main-banner { 

273        min-width: initial; 

274        max-width: 1096px; 

275        height: 480px; 

276        overflow: hidden; 

277      } 

278 

279      .main-banner__expanded { 

280        height: 480px; 

281        max-width: 1096px; 

282        min-height: unset; 

283        margin: 0; 

284      } 

285 

286      .main-banner__image { 

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

288        object-fit: cover; 

289        height: 480px; 

290        width: 100%; 

291      } 

292 

293      .main-banner__content { 

294        flex: 0 0 33.3%; 

295        max-width: 33.3%; 

296      } 

297 

298      .main-banner__desk-image { 

299        width: 630px; 

300        height: 480px; 

301      } 

302 

303      .main-banner__title { 

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

305        line-height: 3.8rem; 

306        letter-spacing: -0.32; 

307      } 

308 

309      .main-banner__body-text { 

310        font-size: 1.6rem; 

311        line-height: 2.5rem; 

312        letter-spacing: 0; 

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

314      } 

315 

316      .main-banner__template { 

317        padding: 0; 

318        height: initial; 

319      } 

320    } 

321 

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

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

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

325    } 

326 

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

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

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

330    } 

331 

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

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

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

335    } 

336 

337    :root { 

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

339    } 

340 

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

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

343      content: ""; 

344      position: absolute; 

345      inset: 0; 

346      pointer-events: none; 

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

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

349          #223AD2 48.44%); 

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

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

352      background-repeat: no-repeat; 

353      border-radius: inherit; 

354      z-index: 0; 

355    } 

356 

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

358      position: relative; 

359      z-index: 1; 

360    } 

361 

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

363      position: absolute; 

364      left: 50%; 

365      transform: translateX(-50%); 

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

367      z-index: 3; 

368      pointer-events: auto; 

369    } 

370</style> 

371<script> 

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

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

374      collapseButtons.forEach((btn) => { 

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

376          setTimeout(() => { 

377            window.scrollTo({ 

378              top: 0, 

379              behavior: "smooth" 

380            }); 

381          }, 100); 

382        }); 

383      }); 

384    }); 

385</script>