1<style>
2.tipo-solu-tit{
3 font-size: 28px;
4 line-height: 34.13px;
5 font-weight: 700;
6 color: #002B49;
7 text-align: center;
8}
9.nav-services{
10 overflow: auto;
11 white-space: nowrap;
12 display:flex;
13}
14
15.nav-services a {
16 display: inline-block;
17 color: var(--klap_body_color);
18 text-align: center;
19 padding: 14px;
20 text-decoration: none;
21}
22
23.nav-services a.active {
24 padding-bottom: 10px;
25 border-bottom: 2px solid var(--klap_verde);
26 color: var(--klap_verde);
27 font-weight: 700;
28}
29.scrolling-wrapper-flexbox {
30 display: flex;
31 flex-wrap: nowrap;
32 overflow-x: auto;
33 justify-content: space-between;
34 height: 60px;
35 width: 100%;
36 -webkit-overflow-scrolling: touch;
37}
38.scrolling-wrapper-flexbox a {
39 color: #313335;
40 text-align: center;
41 padding: 14px 8px 8px;
42 text-decoration: none;
43 flex: 0 0 auto;
44 font-size: 24px;
45 width: 377px;
46 height: 60px;
47 font-weight: 500;
48 line-height: 24.38px;
49}
50.scrolling-wrapper-flexbox a.active {
51 padding-bottom: 10px;
52 border-bottom: 4px solid var(--klap_azul_secundario);
53 color: var(--klap_azul_secundario);
54 font-weight: 700;
55}
56 .nav-services::-webkit-scrollbar, .scrolling-wrapper-flexbox::-webkit-scrollbar {
57 display: none;
58}
59.check-icon {
60 height: 20px;
61 width: auto;
62 padding-top: 5px;
63 margin-right: 10px;
64}
65.description {
66 margin-bottom: 25px;
67}
68.description > p {
69 line-height: 18px;
70 font-weight: 400;
71 color: var(--klap_body_color);
72 padding-top: 4px;
73}
74img.content-icon {
75 height: 300px;
76 margin: auto;
77 display: block;
78}
79.desktop-button {
80 margin-top: 50px;
81}
82.decr_porc{
83 font-size: 33px;
84 line-height: 35px;
85 font-weight: 700;
86 color: var(--klap_verde);
87}
88#efectivo > div > div:nth-child(1) > div:nth-child(3) > img,
89#transferencia > div > div:nth-child(1) > div:nth-child(3) > img {
90 margin-top: 15px;
91}
92.ecommerce_tipos_pago_txt_boton {
93 padding: 15px 55px !important;
94}
95
96/*Accordion 2*/
97.card {
98 margin-bottom: 12px;
99 border-radius: 8px;
100 border: none;
101 /*box-shadow: 2px 2px 5px 0px #00000033;*/
102 overflow: hidden;
103}
104.card-shadow{
105 box-shadow: 2px 2px 5px 0px #00000033;
106}
107.card-header {
108 height: 54px;
109 padding: 19px 16px;
110 cursor: pointer;
111 border-bottom: none;
112 background-color: var(--klap_azul);
113}
114.card-header .title {
115 font-size: 18px;
116 color: #FFFFFF;
117 font-weight: 700;
118}
119.card-header .accion {
120 float: right;
121 font-size: 24px;
122 width: 22px;
123 color: #FFFFFF;
124}
125.card-body{
126 padding: 0;
127}
128.angle-down-white{
129 background-image: url('${themeDisplay.getPathThemeImages()}/iconos_menu/angle-down-solid-white.svg');
130 background-size: cover;
131 display: block;
132 transition: .5s;
133 height: 16px;
134 width: 16px;
135}
136.card-header:not(.collapsed) .rotate-icon {
137 transform: rotate(180deg);
138}
139/*fin accordion */
140
141@media screen and (min-width: 992px) {
142 .tipo-solu-tit{
143 font-size: 32px;
144 line-height: 39px;
145 }
146}
147
148@media screen and (max-width: 1280px) {
149 .scrolling-wrapper-flexbox a {
150 width: 216px;
151 }
152}
153
154@media screen and (max-width: 992px) {
155 .scrolling-wrapper-flexbox {
156 justify-content: left;
157 box-shadow: 0px 1px 7px rgba(0, 0, 0, 0.25);
158 height: 50px;
159 }
160
161 .scrolling-wrapper-flexbox a {
162 width: 115px;
163 height: 50px;
164 padding: 14px 0px;
165 }
166 .scrolling-wrapper-flexbox > a:nth-child(3),
167 .scrolling-wrapper-flexbox > a:nth-child(4),
168 .scrolling-wrapper-flexbox > a:nth-child(5),
169 .scrolling-wrapper-flexbox > a:nth-child(6){
170 padding-top: 18px;
171 }
172
173 div.scrolling-wrapper-flexbox > a:nth-child(1), div.scrolling-wrapper-flexbox > a:nth-child(2) {
174 padding: 10px 0;
175 }
176
177 .description {
178 margin-left: 18px;
179 margin-right: 18px;
180 }
181 .decr_porc{
182 font-size: 23px;
183 }
184 #efectivo > div > div:nth-child(1) > div:nth-child(3) > img,
185 #transferencia > div > div:nth-child(1) > div:nth-child(3) > img {
186 margin-top: 10px;
187 }
188}
189
190</style>
191
192<section id="home-tipo-solu">
193 <div class="container">
194 <div class="row d-none d-lg-block">
195 <div class="col-12 pt-4 pt-lg-0">
196 <h2 class="tipo-solu-tit py-lg-5">${TituloPrincipal.getData()}</h2>
197 </div>
198
199 <div class="scrolling-wrapper-flexbox">
200 <#if Pestania.getSiblings()?has_content>
201 <#list Pestania.getSiblings() as cur_Pestania>
202 <#assign active = "" />
203 <#if cur_Pestania?counter == 1>
204 <#assign active = " active" />
205 </#if>
206 <a class="nav-link${active}" href="#pestania_${cur_Pestania?counter}" data-toggle="tab">${cur_Pestania.Titulo.getData()}</a>
207 </#list>
208 </#if>
209 </div>
210
211 <div class="col-12">
212 <div class="tab-content clearfix">
213 <#if Pestania.getSiblings()?has_content>
214 <#list Pestania.getSiblings() as cur_Pestania>
215 <#assign active2 = "" />
216 <#if cur_Pestania?counter == 1>
217 <#assign active2 = " active" />
218 </#if>
219
220 <div class="tab-pane${active2}" id="pestania_${cur_Pestania?counter}">
221
222 <#if cur_Pestania.ContenidoWeb.getSiblings()?has_content>
223 <#list cur_Pestania.ContenidoWeb.getSiblings() as cur_Pestania_ContenidoWeb>
224 <#if cur_Pestania_ContenidoWeb.getData()?? && cur_Pestania_ContenidoWeb.getData() != "">
225 <#assign webContentData = jsonFactoryUtil.createJSONObject(cur_Pestania_ContenidoWeb.getData())/>
226 <#assign journalArticleLocalService = serviceLocator.findService("com.liferay.journal.service.JournalArticleLocalService") />
227 <#assign webArticle = journalArticleLocalService.getLatestArticle(webContentData.classPK?number?long, 0) />
228 <#assign webArticleContent = journalArticleLocalService.getArticleContent(groupId, webArticle.getArticleId(), "", locale, themeDisplay) />
229
230 <#assign loadPestania = true />
231 <#if cur_Pestania?counter == 1 && cur_Pestania_ContenidoWeb?counter == 4>
232 <#assign loadPestania = false />
233 <#elseif cur_Pestania.Titulo.getData() == "Cobra con tu celular" && cur_Pestania_ContenidoWeb?counter == 2>
234 <#assign loadPestania = false />
235 <#elseif cur_Pestania.Titulo.getData() == "Cobra con tu celular" && cur_Pestania_ContenidoWeb?counter == 7>
236 <#assign loadPestania = false />
237 </#if>
238
239 <#if loadPestania == true>
240 ${webArticleContent}
241 </#if>
242 </#if>
243 </#list>
244 </#if>
245
246 </div>
247 </#list>
248 </#if>
249 </div>
250 </div>
251 </div>
252
253 <div class="row d-block d-lg-none pt-4 px-3">
254 <div class="col-12 pt-lg-0">
255 <h2 class="tipo-solu-tit pb-4">${TituloPrincipal.getData()}</h2>
256 </div>
257
258 <#-- Accordion -->
259 <div id="accordion">
260
261 <#if Pestania.getSiblings()?has_content>
262 <#list Pestania.getSiblings() as cur_Pestania3>
263 <#assign collapsed = "" />
264 <#assign show = " show" />
265 <#assign ariaExpanded = "true" />
266 <#if cur_Pestania3?counter gt 1>
267 <#assign collapsed = " collapsed" />
268 <#assign show = "" />
269 <#assign ariaExpanded = "false" />
270 </#if>
271
272 <#assign cardShadow = " card-shadow" />
273 <#if cur_Pestania3?counter == 1>
274 <#assign cardShadow = "" />
275 </#if>
276
277 <div class="card">
278 <div class="card-header${collapsed}" role="button" id="heading${cur_Pestania3?counter}" data-toggle="collapse" data-target="#collapse${cur_Pestania3?counter}" aria-expanded="${ariaExpanded}" aria-controls="collapse${cur_Pestania3?counter}">
279 <span class="title">${cur_Pestania3.Titulo.getData()}</span>
280 <span class="accion"><i class="angle-down-white rotate-icon"></i></span>
281 </div>
282 <div id="collapse${cur_Pestania3?counter}" class="collapse${show}" role="tabpanel" aria-labelledby="heading${cur_Pestania3?counter}" data-parent="#accordion">
283 <div class="card-body">
284 <#if cur_Pestania3.ContenidoWeb.getSiblings()?has_content>
285 <#list cur_Pestania3.ContenidoWeb.getSiblings() as cur_Pestania_ContenidoWeb3>
286 <#if cur_Pestania_ContenidoWeb3.getData()?? && cur_Pestania_ContenidoWeb3.getData() != "">
287 <#assign webContentData2 = jsonFactoryUtil.createJSONObject(cur_Pestania_ContenidoWeb3.getData())/>
288 <#assign journalArticleLocalService2 = serviceLocator.findService("com.liferay.journal.service.JournalArticleLocalService") />
289 <#assign webArticle2 = journalArticleLocalService2.getLatestArticle(webContentData2.classPK?number?long, 0) />
290 <#assign webArticleContent2 = journalArticleLocalService2.getArticleContent(groupId, webArticle2.getArticleId(), "", locale, themeDisplay) />
291
292
293 <#assign loadPestania2 = true />
294 <#if cur_Pestania3?counter == 1 && cur_Pestania_ContenidoWeb3?counter == 3>
295 <#assign loadPestania2 = false />
296 <#elseif cur_Pestania3.Titulo.getData() == "Cobra con tu celular" && cur_Pestania_ContenidoWeb3?counter == 1>
297 <#assign loadPestania2 = false />
298 <#elseif cur_Pestania3.Titulo.getData() == "Cobra con tu celular" && cur_Pestania_ContenidoWeb3?counter == 6>
299 <#assign loadPestania2 = false />
300 </#if>
301
302 <#if loadPestania2 == true>
303 ${webArticleContent2}
304 </#if>
305
306 </#if>
307 </#list>
308 </#if>
309 </div>
310 </div>
311 </div>
312
313 </#list>
314 </#if>
315
316 </div>
317 </div>
318 </div>
319</section>
320
321<script>
322$(document).ready(function() {
323 $(".nav-link").click(function () {
324 $(".nav-link").removeClass("active");
325 $(".tab-pane").removeClass("active");
326
327 let id = $(this).attr('href');
328
329 $(this).addClass("active");
330 $(id).addClass("active");
331 });
332
333 $('#accordion').on('shown.bs.collapse', function (e) {
334 var idPanel = $(this).find('.show').attr("id");
335
336 if(idPanel != null && idPanel != ""){
337 console.log(">>> " +idPanel);
338
339 //$('html, body').animate({
340 //scrollTop: $('#'+idPanel).offset().top -130
341 //});
342
343 $( 'html, body' ).scrollTop( $('#'+idPanel).offset().top -130 );
344 }
345
346 });
347});
348</script>
