PageSourceSearch

https://www.kolau.com/precios

html kolau.com collected 2026-09-29 17:20:18 UTC 45,162 bytes, 1,639 lines download raw bytes

1<!DOCTYPE html>
2<html>
3<head>
4    
4<script>!function(w,d,s,u){if(w.oaiq)return;var q=function(){q.q.push(arguments)};q.q=[];w.oaiq=q;var j=d.createElement(s);j.async=1;j.src=u;var f=d.getElementsByTagName(s)[0];f.parentNode.insertBefore(j,f)}(window,document,"script","https://bzrcdn.openai.com/sdk/oaiq.min.js");oaiq("init",{pixelId:"XjAkeebd6PNMxkGSJ3Bku4",debug:true});</script>
4
5
6    <title>
7        Small Business Marketing Solution - Kolau
8    </title>
9
10    <meta name="description" content="With Kolau, you can do your Small Business digital marketing by yourself. No knowledge or time required because Kolau is very quick and easy to use. Let&#39;s do it!" />
11
12    <!-- <title> </title> -->
13    <link rel="stylesheet" href="/assets/application-773337ce0f46c2c35d81c33550d93984e2da1a6224807c1d073f3a417045bc25.css" media="screen" />
14    <link rel="icon" type="image/x-icon" href="/assets/favicon-2d97ccabdee260e954b15023caa4fd4264d89c00c046f1f47618d83315a669e9.ico" />
15    <!-- For the homepage -->
16    <meta name=viewport content="width=device-width, initial-scale=1">
17
18    <link href='https://fonts.googleapis.com/css?family=Open+Sans:600,400|Roboto+Slab:300|Lato:400,700|Noto+Sans:700|Baloo+Tamma+2:600' rel='stylesheet' type='text/css'>
19
20    <link href="https://fonts.googleapis.com/css2?family=Fraunces:wght@800&display=swap|Open+Sans:600,400|Roboto+Slab:300|Lato:400,700|Noto+Sans:700|Baloo+Tamma+2:600" rel="stylesheet">
21
22    <link href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
23
24
25    <meta name="csrf-param" content="authenticity_token" />
26<meta name="csrf-token" content="-9mGjVlR4RxUvcIB9cNDSanmZ5RJNTgn87m0AV0Sg3mlgJxrHSP3xMKxnV0aFqu6xWaugP9q-EeIAG-r-V3Fnw" />
27    
28    
28<script>
29      (function() {
30        if (!("serviceWorker" in navigator)) { return; }
31
32        var removeLegacyRootPwa = function() {
33          var rootScope = window.location.origin + "/";
34
35          navigator.serviceWorker.getRegistrations().then(function(registrations) {
36            registrations.forEach(function(registration) {
37              if (registration.scope === rootScope) {
38                registration.unregister();
39              }
40            });
41          }).catch(function() {});
42
43          if ("caches" in window) {
44            caches.keys().then(function(keys) {
45              return Promise.all(keys.map(function(key) { return caches.delete(key); }));
46            }).catch(function() {});
47          }
48        };
49
50        removeLegacyRootPwa();
51      })();
52    </script>
52
53
54
55<!-- Google tag (gtag.js) 2023 GA-4 Migration -->
vendor: 64 bytes, lines 55-56
55
56<script async src="https://www.googletagmanager.com/gtag/js?id=
56G-42HM0RGPDT
vendor: 12 bytes, line 56
56"></script>
57<script>
58  
vendor: 134 bytes, lines 58-62
58window.dataLayer = window.dataLayer || [];
59  function gtag(){dataLayer.push(arguments);}
60  gtag('js', new Date());
61
62  gtag('config', '
62G-42HM0RGPDT
vendor: 6 bytes, lines 62-63
62');
63  
63gtag('config', 'AW-17747042744');
64</script>
64
65
66<!-- Add HTML5 shim for IE <9 browsers -->
67<!--[if lt IE 9]>
68  
68<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js"></script>
68
69<![endif]-->
70    
70<script>
71  window.kolau_locale = "en";
72</script>
72
73
74<script
75  src="https://js.sentry-cdn.com/1d37aa035a83120956eb7a05d96d7c9d.min.js"
76  crossorigin="anonymous"
77></script>
77
78
79
80  </head>
81  <body>
82
83    <nav class="navbar navbar-expand-lg navbar-light">
84  <div class="container-fluid">
85    <a class="navbar-brands abs" href="/">
86      <img class="img-fluid navbar-brands abs" src="https://kolau.s3.amazonaws.com/images/logo_kolau_mid_size.png">
87</a>
88    <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#collapseNavbar">
89      <span class="navbar-toggler-icon"></span>
90    </button>
91    <div class="navbar-collapse collapse" id="collapseNavbar">
92      <ul class="navbar-nav">
93        <li class="nav-item dropdown">
94          <a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
95            <b>Resources</b>
96          </a>
97          <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
98            <li><a class="dropdown-item" href="https://www.kolau.es/curso-marketing-digital">
99            E-commerce Courses</a></li>
100            <li><a class="dropdown-item" href="https://blog.kolau.com/es/">Blog</a></li>
101          </ul>
102        </li>
103        <li class="nav-item dropdown">
104          <a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
105            <img class='flag' src='https://s3.amazonaws.com/kolau/images/flag_icon_eng.jpg'> <b>EN</b>
106          </a>
107          <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
108            <li>
109              <a class="dropdown-item" href='http://www.kolau.es'>
110                <img class='flag' src='https://s3.amazonaws.com/kolau/images/flag_icon_esp.jpg'> <b>ES</b>
111              </a>
112            </li>
113              <!--
114              <li>
115                <a class="dropdown-item" href="http://www.kolau.cat">
116                  <img class="flag" src="https://kolau.s3.us-east-1.amazonaws.com/images/flag_icon_cat.png"> <b>CAT</b>
117                </a>
118              </li>
119              -->
120          </ul>
121        </li>
122<!--         <li class="nav-item">
123          <a class="nav-link" href="#"><b>Precios</b></a>
124        </li>
125        <li class="nav-item">
126          <a class="nav-link" href="#myAlert" data-bs-toggle="collapse"><b>Soporte</b></a>
127        </li> -->
128      </ul>
129      <ul class="navbar-nav ms-auto">
130        <li class="nav-item">
131
132         <a class="nav-link" href="/users/secure-0152-link-log-in">
133              <b>Login</b>
134</a>        </li>
135        <li class="nav-item right-side">
136         <a class="nav-link btn btn-green-navbar btn-lg white-color" href="/users/secure-0152-link-sign-up">
137              <b>Start for free</b>
138</a>        </li>
139      </ul>
140    </div>
141  </div>
142</nav>
143
144    <div class="container-fluid">
145     <div class="row">
146  <div class="col-md-6 offset-md-3">
147  </div>
148</div>
149
150 </div>
151 <style>
152  /* Variables CSS - Tema Verde Pastel Profesional */
153  :root {
154    --bg-gradient: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 25%, #a5d6a7 50%, #81c784 75%, #b2dfdb 100%);
155    --primary-green: #4caf50;
156    --primary-dark: #2e7d32;
157    --accent-mint: #26a69a;
158    --accent-light: #80cbc4;
159    --text-primary: #1a1a1a;
160    --text-secondary: #424242;
161    --text-light: #616161;
162    --white: #ffffff;
163    --gray-light: #f5f5f5;
164    --gray-border: #e0e0e0;
165    --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.08);
166    --shadow-medium: 0 8px 30px rgba(0, 0, 0, 0.12);
167    --shadow-large: 0 15px 40px rgba(0, 0, 0, 0.15);
168    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
169  }
170
171  /* Reset y base */
172  * {
173    margin: 0;
174    padding: 0;
175    box-sizing: border-box;
176  }
177
178  /* Página principal */
179  .pricing-page {
180    background: var(--bg-gradient);
181    min-height: 100vh;
182    position: relative;
183    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
184    color: var(--text-primary);
185  }
186
187  /* Patrón de fondo sutil */
188  .pricing-page::before {
189    content: '';
190    position: absolute;
191    top: 0;
192    left: 0;
193    right: 0;
194    bottom: 0;
195    background-image:
196      radial-gradient(circle at 20% 80%, rgba(129, 199, 132, 0.1) 0%, transparent 50%),
197      radial-gradient(circle at 80% 20%, rgba(178, 223, 219, 0.1) 0%, transparent 50%),
198      radial-gradient(circle at 40% 40%, rgba(165, 214, 167, 0.1) 0%, transparent 50%);
199    pointer-events: none;
200  }
201
202  /* Decoración superior */
203  .top-decoration {
204    position: absolute;
205    top: 0;
206    left: 0;
207    right: 0;
208    height: 300px;
209    background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, transparent 100%);
210    pointer-events: none;
211  }
212
213  /* Container principal */
214  .pricing-container {
215    max-width: 1200px;
216    margin: 0 auto;
217    padding: 0 20px 60px 20px;
218    position: relative;
219    z-index: 1;
220  }
221
222  /* Header */
223  .pricing-header {
224    text-align: center;
225    margin-bottom: 70px;
226    animation: fadeInUp 0.8s ease-out;
227  }
228
229  @keyframes fadeInUp {
230    from {
231      opacity: 0;
232      transform: translateY(20px);
233    }
234    to {
235      opacity: 1;
236      transform: translateY(0);
237    }
238  }
239
240  .pricing-header h1 {
241    font-size: clamp(2.5rem, 5vw, 4rem);
242    font-weight: 700;
243    margin-bottom: 20px;
244    color: var(--text-primary);
245    letter-spacing: -0.5px;
246    line-height: 1.2;
247  }
248
249  .pricing-header h1 span {
250    background: linear-gradient(135deg, var(--primary-green) 0%, var(--accent-mint) 100%);
251    -webkit-background-clip: text;
252    -webkit-text-fill-color: transparent;
253    background-clip: text;
254  }
255
256  .pricing-header p {
257    font-size: 1.25rem;
258    color: var(--text-secondary);
259    max-width: 600px;
260    margin: 0 auto;
261    line-height: 1.7;
262  }
263
264  /* Selector de país */
265  .country-selector {
266    max-width: 500px;
267    margin: 0 auto 60px;
268    position: relative;
269  }
270
271  .country-label {
272    display: block;
273    font-size: 0.875rem;
274    font-weight: 600;
275    color: var(--text-secondary);
276    margin-bottom: 8px;
277    text-transform: uppercase;
278    letter-spacing: 0.5px;
279  }
280
281  .country-input-wrapper {
282    position: relative;
283    background: var(--white);
284    border-radius: 16px;
285    border: 2px solid var(--gray-border);
286    overflow: hidden;
287    transition: var(--transition);
288    box-shadow: var(--shadow-soft);
289  }
290
291  .country-input-wrapper:hover {
292    border-color: var(--accent-light);
293    box-shadow: var(--shadow-medium);
294  }
295
296  .country-input-wrapper:focus-within {
297    border-color: var(--primary-green);
298    box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.1), var(--shadow-medium);
299  }
300
301  .country-input {
302    width: 100%;
303    padding: 18px 50px 18px 20px;
304    font-size: 1.1rem;
305    border: none;
306    background: transparent;
307    color: var(--text-primary);
308    outline: none;
309    font-weight: 500;
310  }
311
312  .country-input::placeholder {
313    color: #9e9e9e;
314  }
315
316  .country-icon {
317    position: absolute;
318    right: 20px;
319    top: 50%;
320    transform: translateY(-50%);
321    color: var(--primary-green);
322    font-size: 1.3rem;
323  }
324
325  /* Dropdown de sugerencias */
326  .country-suggestions {
327    position: absolute;
328    top: calc(100% + 8px);
329    left: 0;
330    right: 0;
331    background: var(--white);
332    border-radius: 12px;
333    box-shadow: var(--shadow-large);
334    max-height: 400px;
335    overflow-y: auto;
336    z-index: 1000;
337    display: none;
338    border: 1px solid var(--gray-border);
339  }
340
341  .country-suggestions.active {
342    display: block;
343    animation: slideDown 0.2s ease-out;
344  }
345
346  @keyframes slideDown {
347    from {
348      opacity: 0;
349      transform: translateY(-10px);
350    }
351    to {
352      opacity: 1;
353      transform: translateY(0);
354    }
355  }
356
357  .country-suggestions::-webkit-scrollbar {
358    width: 8px;
359  }
360
361  .country-suggestions::-webkit-scrollbar-track {
362    background: var(--gray-light);
363    border-radius: 10px;
364  }
365
366  .country-suggestions::-webkit-scrollbar-thumb {
367    background: var(--accent-light);
368    border-radius: 10px;
369  }
370
371  .country-suggestions::-webkit-scrollbar-thumb:hover {
372    background: var(--primary-green);
373  }
374
375  .country-option {
376    padding: 14px 20px;
377    cursor: pointer;
378    transition: var(--transition);
379    border-bottom: 1px solid var(--gray-border);
380    color: var(--text-primary);
381    font-weight: 500;
382    display: flex;
383    align-items: center;
384    justify-content: space-between;
385  }
386
387  .country-option:hover {
388    background: linear-gradient(90deg, rgba(76, 175, 80, 0.05) 0%, rgba(38, 166, 154, 0.05) 100%);
389    padding-left: 28px;
390  }
391
392  .country-option:last-child {
393    border-bottom: none;
394  }
395
396  .country-option .currency-hint {
397    font-size: 0.875rem;
398    color: var(--text-light);
399    background: var(--gray-light);
400    padding: 2px 8px;
401    border-radius: 4px;
402  }
403
404  .country-option .custom-pricing-indicator {
405    font-size: 0.75rem;
406    color: var(--primary-green);
407    background: rgba(76, 175, 80, 0.1);
408    padding: 2px 6px;
409    border-radius: 3px;
410    margin-left: 8px;
411  }
412
413  /* Toggle de período */
414  .period-toggle {
415    display: flex;
416    justify-content: center;
417    margin-bottom: 60px;
418    gap: 24px;
419    align-items: center;
420    flex-wrap: wrap;
421  }
422
423  .period-label {
424    color: var(--text-secondary);
425    font-weight: 600;
426    font-size: 1.1rem;
427    transition: var(--transition);
428  }
429
430  .period-label.active {
431    color: var(--primary-green);
432  }
433
434  .toggle-switch {
435    position: relative;
436    width: 72px;
437    height: 36px;
438    background: var(--gray-border);
439    border-radius: 36px;
440    cursor: pointer;
441    transition: var(--transition);
442  }
443
444  .toggle-switch:hover {
445    transform: scale(1.05);
446  }
447
448  .toggle-switch.annual {
449    background: var(--primary-green);
450  }
451
452  .toggle-slider {
453    position: absolute;
454    top: 3px;
455    left: 3px;
456    width: 30px;
457    height: 30px;
458    background: var(--white);
459    border-radius: 50%;
460    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
461    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
462  }
463
464  .toggle-switch.annual .toggle-slider {
465    transform: translateX(36px);
466  }
467
468  .savings-badge {
469    background: linear-gradient(135deg, var(--primary-green), var(--accent-mint));
470    color: var(--white);
471    padding: 6px 16px;
472    border-radius: 20px;
473    font-size: 0.875rem;
474    font-weight: 700;
475    letter-spacing: 0.5px;
476    text-transform: uppercase;
477    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
478  }
479
480  /* Info message */
481  .info-message {
482    display: none;
483    text-align: center;
484    padding: 12px 20px;
485    background: rgba(76, 175, 80, 0.1);
486    border-radius: 8px;
487    color: var(--primary-dark);
488    font-size: 0.9rem;
489    margin-bottom: 30px;
490    max-width: 500px;
491    margin-left: auto;
492    margin-right: auto;
493  }
494
495  .info-message.active {
496    display: block;
497    animation: fadeInUp 0.3s ease-out;
498  }
499
500  /* Cards de precios */
501  .pricing-cards {
502    display: flex;
503    flex-direction: column-reverse;
504    gap: 32px;
505    margin-bottom: 60px;
506  }
507
508  .pricing-card {
509    background: var(--white);
510    border-radius: 24px;
511    padding: 40px 36px;
512    position: relative;
513    transition: var(--transition);
514    box-shadow: var(--shadow-soft);
515    border: 1px solid var(--gray-border);
516  }
517
518  .pricing-card:hover {
519    transform: translateY(-8px);
520    box-shadow: var(--shadow-large);
521  }
522
523  .pricing-card.pro {
524    border: 2px solid var(--primary-green);
525    transform: scale(1.03);
526    box-shadow: var(--shadow-medium);
527  }
528
529  .pricing-card.pro:hover {
530    transform: translateY(-8px) scale(1.03);
531  }
532
533  /* Badge popular */
534  .popular-badge {
535    position: absolute;
536    top: -12px;
537    right: 32px;
538    background: linear-gradient(135deg, var(--primary-green), var(--accent-mint));
539    color: var(--white);
540    padding: 8px 20px;
541    border-radius: 20px;
542    font-size: 0.8rem;
543    font-weight: 700;
544    text-transform: uppercase;
545    letter-spacing: 0.5px;
546    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
547  }
548
549  .plan-name {
550    font-size: 1.75rem;
551    font-weight: 700;
552    color: var(--text-primary);
553    margin-bottom: 16px;
554  }
555
556  .plan-price {
557    display: flex;
558    align-items: baseline;
559    margin-bottom: 8px;
560    flex-wrap: wrap;
561  }
562
563  .currency {
564    font-size: 1.5rem;
565    color: var(--primary-green);
566    margin-right: 4px;
567    font-weight: 600;
568  }
569
570  .amount {
571    font-size: 3.5rem;
572    font-weight: 700;
573    color: var(--text-primary);
574    line-height: 1;
575    transition: var(--transition);
576  }
577
578  .amount.changing {
579    animation: priceUpdate 0.5s ease-out;
580  }
581
582  @keyframes priceUpdate {
583    0% {
584      transform: scale(1);
585      opacity: 1;
586    }
587    50% {
588      transform: scale(1.1);
589      opacity: 0.7;
590    }
591    100% {
592      transform: scale(1);
593      opacity: 1;
594    }
595  }
596
597  .period {
598    font-size: 1.1rem;
599    color: var(--text-light);
600    margin-left: 8px;
601  }
602
603  .plan-description {
604    color: var(--text-secondary);
605    margin-bottom: 32px;
606    font-size: 1rem;
607    line-height: 1.6;
608    min-height: 48px;
609  }
610
611  /* Lista de features */
612  .features-list {
613    list-style: none;
614    margin-bottom: 36px;
615    padding: 0;
616  }
617
618  .feature-item {
619    display: flex;
620    align-items: center;
621    padding: 12px 0;
622    color: var(--text-secondary);
623    font-size: 0.95rem;
624    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
625    transition: var(--transition);
626  }
627
628  .feature-item:hover {
629    color: var(--text-primary);
630    padding-left: 4px;
631  }
632
633  .feature-item:last-child {
634    border-bottom: none;
635  }
636
637  .feature-icon {
638    width: 24px;
639    height: 24px;
640    border-radius: 50%;
641    background: linear-gradient(135deg, var(--primary-green), var(--accent-mint));
642    display: flex;
643    align-items: center;
644    justify-content: center;
645    margin-right: 16px;
646    flex-shrink: 0;
647  }
648
649  .feature-icon::after {
650    content: '✓';
651    color: var(--white);
652    font-weight: bold;
653    font-size: 14px;
654  }
655
656  .feature-item strong {
657    font-weight: 700;
658    color: var(--primary-green);
659  }
660
661  /* Botón CTA */
662  .cta-button {
663    width: 100%;
664    padding: 16px 32px;
665    border: none;
666    border-radius: 12px;
667    font-size: 1.05rem;
668    font-weight: 600;
669    text-transform: uppercase;
670    letter-spacing: 0.5px;
671    cursor: pointer;
672    transition: var(--transition);
673    position: relative;
674    overflow: hidden;
675  }
676
677  .cta-button.basic {
678    background: var(--white);
679    color: var(--primary-green);
680    border: 2px solid var(--primary-green);
681  }
682
683  .cta-button.basic:hover {
684    background: var(--primary-green);
685    color: var(--white);
686    transform: translateY(-2px);
687    box-shadow: 0 8px 20px rgba(76, 175, 80, 0.3);
688  }
689
690  .cta-button.pro {
691    background: linear-gradient(135deg, var(--primary-green), var(--accent-mint));
692    color: var(--white);
693    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
694  }
695
696  .cta-button.pro:hover {
697    transform: translateY(-2px);
698    box-shadow: 0 8px 25px rgba(76, 175, 80, 0.4);
699  }
700
701  /* Loading spinner */
702  .loading-spinner {
703    display: none;
704    width: 40px;
705    height: 40px;
706    border: 3px solid rgba(76, 175, 80, 0.2);
707    border-top: 3px solid var(--primary-green);
708    border-radius: 50%;
709    animation: spin 1s linear infinite;
710    margin: 40px auto;
711  }
712
713  @keyframes spin {
714    0% { transform: rotate(0deg); }
715    100% { transform: rotate(360deg); }
716  }
717
718  .loading-spinner.active {
719    display: block;
720  }
721
722  /* Footer decoration */
723  .bottom-decoration {
724    position: absolute;
725    bottom: 0;
726    left: 0;
727    right: 0;
728    height: 200px;
729    background: linear-gradient(0deg, rgba(255, 255, 255, 0.2) 0%, transparent 100%);
730    pointer-events: none;
731  }
732
733  @media (min-width: 769px) {
734    .pricing-cards {
735      display: grid;
736      grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
737      flex-direction: row;
738    }
739  }
740
741  /* Mobile responsivo */
742  @media (max-width: 768px) {
743    .pricing-container {
744      padding: 10px 16px 30px 16px;
745    }
746
747    .pricing-header {
748      margin-bottom: 50px;
749    }
750
751    .pricing-header h1 {
752      font-size: 2rem;
753    }
754
755    .pricing-header p {
756      font-size: 1.1rem;
757      padding: 0 10px;
758    }
759
760    .country-selector {
761      max-width: 100%;
762      padding: 0 10px;
763    }
764
765    .pricing-cards {
766      grid-template-columns: 1fr;
767      gap: 24px;
768    }
769
770    .pricing-card {
771      padding: 32px 24px;
772    }
773
774    .pricing-card.pro {
775      transform: scale(1);
776    }
777
778    .pricing-card.pro:hover {
779      transform: translateY(-8px);
780    }
781
782    .amount {
783      font-size: 2.5rem;
784    }
785
786    .period-toggle {
787      gap: 16px;
788    }
789
790    .period-label {
791      font-size: 1rem;
792    }
793
794    .country-suggestions {
795      max-height: 300px;
796    }
797  }
798
799  @media (max-width: 480px) {
800    .pricing-header h1 {
801      font-size: 1.75rem;
802    }
803
804    .pricing-header p {
805      font-size: 1rem;
806    }
807
808    .pricing-card {
809      padding: 28px 20px;
810      border-radius: 20px;
811    }
812
813    .plan-name {
814      font-size: 1.5rem;
815    }
816
817    .amount {
818      font-size: 2rem;
819    }
820
821    .currency {
822      font-size: 1.25rem;
823    }
824
825    .cta-button {
826      padding: 14px 24px;
827      font-size: 0.95rem;
828    }
829
830    .popular-badge {
831      font-size: 0.75rem;
832      padding: 6px 14px;
833    }
834  }
835
836  /* Mejoras de accesibilidad */
837  @media (prefers-reduced-motion: reduce) {
838    * {
839      animation-duration: 0.01ms !important;
840      animation-iteration-count: 1 !important;
841      transition-duration: 0.01ms !important;
842    }
843  }
844</style>
845
846
847<div class="px-2 px-sm-3 px-md-4 pt-2 pt-md-5 mt-2 mt-md-5 text-center pricing-page">
848  <!-- Decoración superior -->
849  <div class="top-decoration"></div>
850
851  <div class="pricing-container">
852    <!-- Header -->
853    <div class="pricing-header">
854      <h1>Transform Your Business with <span>AI</span></h1>
855      <p>Choose the perfect plan to create your professional web presence with advanced artificial intelligence</p>
856    </div>
857
858    <!-- Selector de país -->
859    <div class="country-selector">
860      <label class="country-label">Select your country</label>
861      <div class="country-input-wrapper">
862        <input
863          type="text"
864          class="country-input"
865          id="countryInput"
866          placeholder="Type your country..."
867          value="España"
868          autocomplete="off"
869          data-country-code="ES"
870          data-country-key="espana"
871        >
872        <span class="country-icon">🌍</span>
873      </div>
874      <div class="country-suggestions" id="countrySuggestions"></div>
875    </div>
876
877    <!-- Mensaje informativo -->
878    <div class="info-message" id="infoMessage"></div>
879
880    <!-- Toggle de período -->
881    <div class="period-toggle">
882      <span class="period-label active" id="monthlyLabel">Monthly</span>
883      <div class="toggle-switch " id="periodToggle">
884        <div class="toggle-slider"></div>
885      </div>
886      <span class="period-label " id="yearlyLabel">Annual</span>
887      <span class="savings-badge">2 MONTHS FREE</span>
888    </div>
889
890    <!-- Loading spinner -->
891    <div class="loading-spinner" id="loadingSpinner"></div>
892
893    <!-- Cards de precios -->
894    <div class="pricing-cards" id="pricingCards">
895      
896<!-- Card Plan Básico -->
897<div class="pricing-card basic" data-plan="basic">
898  <h3 class="plan-name">Basic Plan</h3>
899
900  <div class="plan-price">
901    <span class="currency">€</span>
902    <span class="amount"
903          data-monthly="9"
904          data-yearly="90"
905          data-country="espana"
906          data-period="monthly">
907      9
908    </span>
909    <span class="period">/month</span>
910  </div>
911
912  <p class="plan-description">Everything you need to start your professional online presence</p>
913
914  <ul class="features-list">
915    <li class="feature-item">
916      <div class="feature-icon"></div>
917      <span>Custom subdomain</span>
918    </li>
919    <li class="feature-item">
920      <div class="feature-icon"></div>
921      <span>AI-powered web creator</span>
922    </li>
923    <li class="feature-item">
924      <div class="feature-icon"></div>
925      <span>AI-powered web editor</span>
926    </li>
927    <li class="feature-item">
928      <div class="feature-icon"></div>
929      <span>AI-powered blog creator</span>
930    </li>
931    <li class="feature-item">
932      <div class="feature-icon"></div>
933      <span>Online store with advanced features</span>
934    </li>
935    <li class="feature-item">
936      <div class="feature-icon"></div>
937      <span>AI chatbot</span>
938    </li>
939    <li class="feature-item">
940      <div class="feature-icon"></div>
941      <span>AI customer manager</span>
942    </li>
943    <li class="feature-item">
944      <div class="feature-icon"></div>
945      <span>Advanced analytics and metrics</span>
946    </li>
947  </ul>
948
949  <a class="cta-button basic" role="button" data-plan="basic" data-country="espana" data-period="monthly" data-price="9" data-currency="EUR" href="/users/secure-0152-link-sign-up">
950  <span>Start Free Trial</span>
951</a>
952</div>
953
954<!-- Card Plan Profesional -->
955<div class="pricing-card pro" data-plan="pro">
956  <span class="popular-badge">Most Popular</span>
957
958  <h3 class="plan-name">Professional Plan</h3>
959
960  <div class="plan-price">
961    <span class="currency">€</span>
962    <span class="amount"
963          data-monthly="17.5"
964          data-yearly="175"
965          data-country="espana"
966          data-period="monthly">
967      17,5
968    </span>
969    <span class="period">/month</span>
970  </div>
971
972  <p class="plan-description">Maximum power to grow your business exponentially</p>
973
974  <ul class="features-list">
975    <li class="feature-item">
976      <div class="feature-icon"></div>
977      <span><strong>Everything in Basic Plan</strong></span>
978    </li>
979    <li class="feature-item">
980      <div class="feature-icon"></div>
981      <span>Associated custom domain</span>
982    </li>
983    <li class="feature-item">
984      <div class="feature-icon"></div>
985      <span>24/7 priority support</span>
986    </li>
987    <li class="feature-item">
988      <div class="feature-icon"></div>
989      <span>Automatic daily backups</span>
990    </li>
991    <li class="feature-item">
992      <div class="feature-icon"></div>
993      <span>Global CDN included</span>
994    </li>
995    <li class="feature-item">
996      <div class="feature-icon"></div>
997      <span>Premium SSL certificate</span>
998    </li>
999    <li class="feature-item">
1000      <div class="feature-icon"></div>
1001      <span>Full API access</span>
1002    </li>
1003    <li class="feature-item">
1004      <div class="feature-icon"></div>
1005      <span>Advanced customization</span>
1006    </li>
1007  </ul>
1008
1009  <a class="cta-button pro" role="button" data-plan="pro" data-country="espana" data-period="monthly" data-price="17.5" data-currency="EUR" href="/users/secure-0152-link-sign-up">
1010  <span>
1010Start Free Trial</span>
1011</a>
1012</div>
1013
1014<script>
1015  // Script para reinicializar eventos después de actualización AJAX
1016  (function() {
1017    'use strict';
1018
1019
1020    // Animar la aparición de las cards
1021    function animateCards() {
1022      const cards = document.querySelectorAll('.pricing-card');
1023
1024      cards.forEach(function(card, index) {
1025        // Reset inicial
1026        card.style.opacity = '0';
1027        card.style.transform = 'translateY(20px)';
1028
1029        // Animar con delay
1030        setTimeout(function() {
1031          card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
1032          card.style.opacity = '1';
1033          card.style.transform = 'translateY(0)';
1034
1035          // Restaurar la escala para la card pro
1036          if (card.classList.contains('pro')) {
1037            setTimeout(function() {
1038              card.style.transform = 'scale(1.03)';
1039            }, 500);
1040          }
1041        }, index * 100);
1042      });
1043    }
1044
1045    // Animar el cambio de precios
1046    function animatePriceChange() {
1047      const amounts = document.querySelectorAll('.amount');
1048
1049      amounts.forEach(function(amount) {
1050        amount.classList.add('changing');
1051
1052        setTimeout(function() {
1053          amount.classList.remove('changing');
1054        }, 500);
1055      });
1056    }
1057
1058    // Inicializar todo
1059    function initializePricingCards() {
1060      animateCards();
1061      animatePriceChange();
1062    }
1063
1064    // Ejecutar inmediatamente
1065    initializePricingCards();
1066
1067    // Observer para cambios en el DOM
1068    if (typeof MutationObserver !== 'undefined') {
1069      const observer = new MutationObserver(function(mutations) {
1070        mutations.forEach(function(mutation) {
1071          if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
1072            mutation.addedNodes.forEach(function(node) {
1073              if (node.nodeType === 1 && node.classList && node.classList.contains('pricing-card')) {
1074                initializePricingCards();
1075              }
1076            });
1077          }
1078        });
1079      });
1080
1081      const container = document.getElementById('pricingCards');
1082      if (container) {
1083        observer.observe(container, {
1084          childList: true,
1085          subtree: true
1086        });
1087      }
1088    }
1089  })();
1090</script>
1090
1091
1092    </div>
1093  </div>
1094
1095  <!-- Decoración inferior -->
1096  <div class="bottom-decoration"></div>
1097</div>
1098<div id="footer">
1099  <div class="container">
1100
1101    <div class="row">
1102      <div class="col-sm-6 col-md-4">
1103        <div class="foot-header" style="font-weight: bold">
1104          Resources
1105        </div>
1106        <div class="foot-links">
1107          <a href="/users/secure-0152-link-log-in">Login</a>
1108          <a href="/users/secure-0152-link-sign-up">Sign Up</a>
1109          <a href="/precios">Price</a>
1110          <a href="http://blog.kolau.com">Blog</a>
1111          <a href="/curso-marketing-digital">Digital Marketing Course</a>
1112        </div>
1113        <br/>
1114
1115      </div>
1116
1117      <div class="col-sm-6 col-md-4">
1118        <div class="foot-header">
1119          <a style="color: rgb(63, 63, 63) !important;font-weight: bold;" href="/marketing">Community</a>
1120        </div>
1121        <div class="foot-links">
1122          <a href="/crear-pagina-web-restaurante">Create a Website for Restaurants</a>
1123          <a href="/plan-digitalizacion-mipyme">Mipyme Digitalization Plan</a>
1124        </div>
1125        <br/>
1126        <div class="foot-header" style="font-weight: bold">
1127          <b>Countries</b>
1128        </div>
1129        <div class="foot-links">
1130          <a href="/chile">Chile</a>
1131          <a href="/digitalizacion-mipyme-colombia">Colombia</a>
1132          <a href="/digitalizacion-mipyme-costa-rica">Costa Rica</a>
1133          <a href="/digitalizacion-mipyme-honduras">Honduras</a>
1134          <a href="/digitalizacion-mipyme-guatemala">Guatemala</a>
1135          <a href="/digitalizacion-mipyme-bolivia">Bolivia</a>
1136          <br/>&nbsp;
1137        </div>
1138      </div>
1139
1140      <div class="col-sm-6 col-md-4">
1141        <div class="foot-header">
1142          <a style="color: rgb(63, 63, 63) !important;font-weight: bold;" href="/marketing">Marketing</a>
1143        </div>
1144        <div class="foot-links">
1145          <a href="/marketing/5-marketing-strategies-to-win">5 Marketing Strategies to Win</a>
1146          <a href="/marketing/what-is-digital-marketing">What is Digital Marketing</a>
1147          <a href="/marketing/how-to-advertise-on-google">How to Advertise on Google</a>
1148          <a href="/marketing/how-to-rank-higher-on-google">How to Rank Higher on Google</a>
1149        </div>
1150        <br/>
1151        <div class="foot-header">
1152          <a style="color: rgb(63, 63, 63) !important;font-weight: bold;" href="/adwords">Google Ads</a>
1153        </div>
1154        <div class="foot-links">
1155          <a href="/adwords/how-google-adwords-works">How Google Adwords Works</a>
1156          <a href="/adwords/how-much-does-google-ads-cost">How Much Does Google Ads Cost</a>
1157          <a href="/adwords/how-google-ads-works">What is Google Ads and How it Works</a>
1158          <a href="/adwords/how-to-build-best-google-adwords-campaign">How to Build the Best Google Adwords Campaign</a>
1159          <a href="/adwords/how-to-set-up-adwords-extensions">How to Set up Adwords Extensions</a>
1160          <a href="/google_ads/how-to-create-effective-google-display-ads">How to Create Effective Google Display Ads</a>
1161        </div>
1162      </div>
1163    </div>
1164    <!--  -->
1165    <div class="row" style="text-align: center;">
1166      <div class="col-12">
1167        <div class="row" style="text-align: center;padding-top: 35px;">
1168          <div class="col-12">
1169            <img src="https://s3.amazonaws.com/kolau/images/logo-footer.png" alt="" class="logo-default" style="margin: auto" />
1170          </div>
1171        </div>
1172        <div class="row" style="text-align: center;padding-top: 25px;">
1173          <div class="col-12">
1174            <a href="https://www.facebook.com/KolauMarketing/" target="_blank" class="social-item" style="padding: 19px 15px 7px 17px !important; margin-left: 0px !important;">
1175                  <i class="fa-brands fa-facebook-f fa-2x" aria-hidden="true"></i>
1176            </a>
1177            <a href="https://twitter.com/KolauMarketing" target="_blank" class="social-item" style="padding: 19px 15px 7px 17px !important">
1178              <span aria-hidden="true" style="display: inline-block; font-weight: 700; font-size: 1.9em; line-height: 1;">X</span>
1179            </a>
1180          </div>
1181        </div>
1182      </div>
1183    </div>
1184  </div>
1185  <div class="container-fluid">
1186    <div class="row">
1187      <div class="col-12">
1188        <div class="row">
1189          <img src="https://s3.amazonaws.com/kolau/images/footer-image.png" style="width:100%">
1190          <div id="bottom-footer">
1191          </div>
1192          <div class="row" id="final-footer">
1193            <div class="col-4 col-sm-4">
1194              <img src="https://s3.amazonaws.com/kolau/images/comodo_secure_seal.png">
1195            </div>
1196            <div class="col-8 col-sm-6 col-md-4 text-center">
1197              Copyright © 2025 Kolau.  All Rights Reserved <a href="/terms">Terms and conditions</a><br/>
1197
1198              Contact us: [email protected]
1199            </div>
1200          </div>
1201        </div>
1202      </div>
1203    </div>
1204  </div>
1205</div>
1206
1207<style type="text/css">
1208.foot-links a, .foot-links p{
1209  display: block;
1210  text-decoration: none;
1211  font-size: 15px;
1212  color: rgb(63, 63, 63);
1213  padding-bottom: 5px;
1214}
1215.foot-links img{
1216  padding-top: 5px;
1217}
1218#footer{
1219  background: #F5F5F5;
1220  border-top: 1px solid rgb(222, 222, 222);
1221  margin-top: -2px;
1222  padding-top: 30px;
1223  padding-bottom: 30px;
1224}
1225.foot-header{
1226  font-size: 17px;
1227  color: rgb(63, 63, 63);
1228  padding-bottom: 20px;
1229  font-family:'Open Sans', sans-serif;
1230}
1231#bottom-footer{
1232  margin-bottom: 20px;
1233  border-top: 1px solid #ccc;
1234  border-bottom: 1px solid #ccc;
1235  padding-top: 15px;
1236  padding-bottom: 15px;
1237}
1238#bottom-footer a{
1239  text-decoration: none;
1240  color: #626262;
1241  -webkit-transition: all .2s ease-in-out;
1242  -moz-transition: all .2s ease-in-out;
1243  -o-transition: all .2s ease-in-out;
1244  -ms-transition: all .2s ease-in-out;
1245  transition: all .2s ease-in-out;
1246  font-size: 12px;
1247  padding: 0px 15px;
1248  border-right: 1px solid #ccc;
1249  font-family: 'OpenSansRegular', Arial, sans-serif;
1250  font-size: 14px;
1251  color: #626262;
1252  padding: 0 12px;
1253  text-shadow: 1px 1px 0 rgba(255,255,255,1);
1254}
1255#bottom-footer .phone img{
1256  margin-right: 7px;
1257}
1258#bottom-footer .phone .red{
1259  font-size: 18px;
1260  margin-top: -7px;
1261  font-family: 'OpenSansRegular', Arial, sans-serif;
1262  font-size: 18px!important;
1263  color: #d10029!important;
1264  position: relative;
1265  top: -5px;
1266  text-shadow: 1px 1px 0 rgba(255,255,255,1)!important;
1267}
1268#bottom-footer .phone .red small{
1269  font-family: 'OpenSansRegular', Arial, sans-serif;
1270  font-size: 14px!important;
1271  display: block;
1272  color: #626262!important;
1273  text-shadow: 1px 1px 0 rgba(255,255,255,1)!important;
1274  margin-top: -5px;
1275}
1276#final-footer{
1277  font-size: 14px;
1278  color: #666;
1279  margin-right: 0px;
1280}
1281#final-footer i{
1282  font-size: auto;
1283}
1284</style>
1285
1286
1287<script>
1288  (function() {
1289    'use strict';
1290
1291    // Estado actual con valores seguros
1292    var currentCountryCode = 'ES';
1293    var currentCountryName = 'España';
1294    var currentPeriod = 'monthly';
1295
1296    // Cache de elementos del DOM
1297    var elements = {
1298      countryInput: null,
1299      suggestions: null,
1300      periodToggle: null,
1301      loadingSpinner: null,
1302      monthlyLabel: null,
1303      yearlyLabel: null,
1304      infoMessage: null
1305    };
1306
1307    // Inicializar elementos del DOM
1308    function initElements() {
1309      elements.countryInput = document.getElementById('countryInput');
1310      elements.suggestions = document.getElementById('countrySuggestions');
1311      elements.periodToggle = document.getElementById('periodToggle');
1312      elements.loadingSpinner = document.getElementById('loadingSpinner');
1313      elements.monthlyLabel = document.getElementById('monthlyLabel');
1314      elements.yearlyLabel = document.getElementById('yearlyLabel');
1315      elements.infoMessage = document.getElementById('infoMessage');
1316    }
1317
1318    // Normalizar texto para búsqueda
1319    function normalizeText(text) {
1320      if (!text) return '';
1321      return text.toLowerCase()
1322        .normalize('NFD')
1323        .replace(/[\u0300-\u036f]/g, '')
1324        .trim();
1325    }
1326
1327    // Formatear número con separadores de miles
1328    function formatNumber(num) {
1329      if (typeof num === 'string') return num;
1330      var numStr = num.toString();
1331      if (num > 999) {
1332        return numStr.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
1333      }
1334      return numStr;
1335    }
1336
1337    // Buscar países via AJAX
1338    function searchCountries(query) {
1339      if (!query || query.length < 2) {
1340        hideSuggestions();
1341        return;
1342      }
1343
1344      var xhr = new XMLHttpRequest();
1345      var url = '/search_countries?q=' + encodeURIComponent(query);
1346
1347      xhr.open('GET', url, true);
1348      xhr.setRequestHeader('Accept', 'application/json');
1349      xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
1350
1351      xhr.onload = function() {
1352        if (xhr.status === 200) {
1353          try {
1354            var countries = JSON.parse(xhr.responseText);
1355            showSuggestions(countries);
1356          } catch (e) {
1357            console.error('Error parsing countries:', e);
1358            hideSuggestions();
1359          }
1360        } else {
1361          hideSuggestions();
1362        }
1363      };
1364
1365      xhr.onerror = function() {
1366        console.error('Error searching countries');
1367        hideSuggestions();
1368      };
1369
1370      xhr.send();
1371    }
1372
1373    // Mostrar sugerencias de países
1374    function showSuggestions(countries) {
1375      if (!elements.suggestions || !countries || countries.length === 0) {
1376        hideSuggestions();
1377        return;
1378      }
1379
1380      var html = '';
1381      countries.forEach(function(country) {
1382        var customPricingBadge = country.has_custom_pricing
1383          ? '<span class="custom-pricing-indicator">✓</span>'
1384          : '';
1385
1386        html += '<div class="country-option" ' +
1387                'data-country-code="' + escapeHtml(country.code) + '" ' +
1388                'data-country-name="' + escapeHtml(country.name) + '" ' +
1389                'data-has-custom-pricing="' + country.has_custom_pricing + '">' +
1390                '<span>' + escapeHtml(country.name) + customPricingBadge + '</span>' +
1391                '<span class="currency-hint">' + escapeHtml(country.symbol) + '</span>' +
1392                '</div>';
1393      });
1394
1395      elements.suggestions.innerHTML = html;
1396      elements.suggestions.classList.add('active');
1397
1398      var options = elements.suggestions.querySelectorAll('.country-option');
1399      options.forEach(function(option) {
1400        option.addEventListener('click', function() {
1401          var countryCode = this.getAttribute('data-country-code');
1402          var countryName = this.getAttribute('data-country-name');
1403          var hasCustomPricing = this.getAttribute('data-has-custom-pricing') === 'true';
1404
1405          selectCountry(countryCode, countryName, hasCustomPricing);
1406        });
1407      });
1408    }
1409
1410    // Ocultar sugerencias
1411    function hideSuggestions() {
1412      if (elements.suggestions) {
1413        elements.suggestions.classList.remove('active');
1414        elements.suggestions.innerHTML = '';
1415      }
1416    }
1417
1418    // Seleccionar país
1419    function selectCountry(countryCode, countryName, hasCustomPricing) {
1420      if (!countryCode) return;
1421
1422      currentCountryCode = countryCode;
1423      currentCountryName = countryName;
1424
1425      if (elements.countryInput) {
1426        elements.countryInput.value = countryName;
1427        elements.countryInput.setAttribute('data-country-code', countryCode);
1428      }
1429
1430      hideSuggestions();
1431
1432      if (!hasCustomPricing && elements.infoMessage) {
1433        var message = 'Precio internacional en USD para tu país';
1434        elements.infoMessage.innerHTML = message;
1435        elements.infoMessage.classList.add('active');
1436      } else if (elements.infoMessage) {
1437        elements.infoMessage.classList.remove('active');
1438      }
1439
1440      updatePrices(countryCode, currentPeriod);
1441    }
1442
1443    // Actualización de precios con AJAX
1444    function updatePrices(countryCode, period) {
1445      if (!countryCode) return;
1446
1447      currentCountryCode = countryCode;
1448      currentPeriod = period;
1449
1450      if (elements.loadingSpinner) {
1451        elements.loadingSpinner.classList.add('active');
1452      }
1453
1454      var xhr = new XMLHttpRequest();
1455      var url = '/precios.json?country_code=' + encodeURIComponent(countryCode) +
1456                '&period=' + encodeURIComponent(period);
1457
1458      xhr.open('GET', url, true);
1459      xhr.setRequestHeader('Accept', 'application/json');
1460      xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
1461
1462      xhr.onload = function() {
1463        if (xhr.status === 200) {
1464          try {
1465            var response = JSON.parse(xhr.responseText);
1466            updatePricesInDOM(response);
1467          } catch (e) {
1468            console.error('Error parsing JSON:', e);
1469            showError();
1470          }
1471        } else {
1472          console.error('Server error:', xhr.status);
1473          showError();
1474        }
1475
1476        if (elements.loadingSpinner) {
1477          elements.loadingSpinner.classList.remove('active');
1478        }
1479      };
1480
1481      xhr.onerror = function() {
1482        console.error('Connection error');
1483        showError();
1484        if (elements.loadingSpinner) {
1485          elements.loadingSpinner.classList.remove('active');
1486        }
1487      };
1488
1489      xhr.send();
1490    }
1491
1492    // Actualizar precios en el DOM
1493    function updatePricesInDOM(response) {
1494      if (!response || !response.pricing_data) return;
1495
1496      var basicCard = document.querySelector('.pricing-card.basic');
1497      var proCard = document.querySelector('.pricing-card.pro');
1498
1499      if (basicCard) {
1500        updateCardPrices(basicCard, response.pricing_data.symbol, response.formatted_basic, response.period);
1501      }
1502
1503      if (proCard) {
1504        updateCardPrices(proCard, response.pricing_data.symbol, response.formatted_pro, response.period);
1505      }
1506
1507      var pricingCards = document.getElementById('pricingCards');
1508      if (pricingCards) {
1509        pricingCards.setAttribute('data-country-code', response.country_code);
1510        pricingCards.setAttribute('data-period', response.period);
1511      }
1512    }
1513
1514    // Actualizar precios de una card
1515    function updateCardPrices(card, symbol, formattedPrice, period) {
1516      var currency = card.querySelector('.currency');
1517      var amount = card.querySelector('.amount');
1518      var periodEl = card.querySelector('.period');
1519
1520      if (currency) {
1521        currency.textContent = symbol;
1522      }
1523
1524      if (amount) {
1525        amount.classList.add('changing');
1526        amount.textContent = formattedPrice;
1527        setTimeout(function() {
1528          amount.classList.remove('changing');
1529        }, 500);
1530      }
1531
1532      if (periodEl) {
1533        var periodText = period === 'yearly'
1534          ? '/year'
1535          : '/month';
1536        periodEl.textContent = periodText;
1537      }
1538    }
1539
1540    // Mostrar error
1541    function showError() {
1542      if (elements.infoMessage) {
1543        var errorMessage = 'Error al cargar los precios. Por favor, intenta de nuevo.';
1544        elements.infoMessage.innerHTML = errorMessage;
1545        elements.infoMessage.classList.add('active');
1546      }
1547    }
1548
1549    // Escape HTML
1550    function escapeHtml(text) {
1551      if (!text) return '';
1552      var map = {
1553        '&': '&amp;',
1554        '<': '&lt;',
1555        '>': '&gt;',
1556        '"': '&quot;',
1557        "'": '&#039;'
1558      };
1559      return text.toString().replace(/[&<>"']/g, function(m) { return map[m]; });
1560    }
1561
1562    // Configurar event listeners
1563    function setupEventListeners() {
1564      if (elements.countryInput) {
1565        var searchTimeout;
1566
1567        elements.countryInput.addEventListener('input', function() {
1568          clearTimeout(searchTimeout);
1569          var query = this.value;
1570
1571          searchTimeout = setTimeout(function() {
1572            searchCountries(query);
1573          }, 300);
1574        });
1575
1576        elements.countryInput.addEventListener('focus', function() {
1577          if (this.value.length >= 2) {
1578            searchCountries(this.value);
1579          }
1580        });
1581
1582        elements.countryInput.addEventListener('keypress', function(e) {
1583          if (e.key === 'Enter') {
1584            e.preventDefault();
1585            hideSuggestions();
1586          }
1587        });
1588      }
1589
1590      if (elements.periodToggle) {
1591        elements.periodToggle.addEventListener('click', function() {
1592          var newPeriod = currentPeriod === 'monthly' ? 'yearly' : 'monthly';
1593
1594          this.classList.toggle('annual');
1595          if (elements.monthlyLabel) {
1596            elements.monthlyLabel.classList.toggle('active');
1597          }
1598          if (elements.yearlyLabel) {
1599            elements.yearlyLabel.classList.toggle('active');
1600          }
1601
1602          updatePrices(currentCountryCode, newPeriod);
1603        });
1604      }
1605
1606      document.addEventListener('click', function(e) {
1607        if (!e.target.closest('.country-selector')) {
1608          hideSuggestions();
1609        }
1610      });
1611    }
1612
1613    // Inicialización
1614    function init() {
1615      initElements();
1616      setupEventListeners();
1617
1618      var hasCustomPricing = true;
1619      if (!hasCustomPricing && currentCountryCode !== 'ES' && elements.infoMessage) {
1620        var message = 'Precio internacional en USD para tu país';
1621        elements.infoMessage.innerHTML = message;
1622        elements.infoMessage.classList.add('active');
1623      }
1624    }
1625
1626    if (document.readyState === 'loading') {
1627      document.addEventListener('DOMContentLoaded', init);
1628    } else {
1629      init();
1630    }
1631  })();
1632</script>
1632
1633
1634
1635
1636 
1636<script src="/assets/application-f5e54718983dd7a3d1d3be1eae3361c6ef0d8441b3de7dae7483a40ed9ca2819.js"></script>
1636
1637
1638</body>
1639</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.