PageSourceSearch

https://likephone.mx/likecheck

html likephone.mx collected 2026-10-02 01:04:45 UTC 222,221 bytes, 3,845 lines download raw bytes

1<!DOCTYPE html>
2<html lang="es">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>LikeCheck - App de asistencia y supervisión</title>
7    <link rel="icon" type="image/png" href="https://likephone.mx/resources/assets/images/likecheck/Logo.png">
8    <!-- CSS Esenciales -->
9    <link href="https://likephone.mx/resources/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
10    <link href="https://likephone.mx/resources/assets/css/icons.min.css" rel="stylesheet" type="text/css" />
11    <link href="https://likephone.mx/resources/assets/css/app.min.css" rel="stylesheet" type="text/css" />
12    
13    <!-- Alertas y notificaciones -->
14    <link href="https://likephone.mx/resources/assets/libs/sweetalert2/sweetalert2.min.css" rel="stylesheet" type="text/css" />
15    <link href="https://likephone.mx/resources/assets/libs/alertifyjs/build/css/alertify.min.css" rel="stylesheet" type="text/css" />
16    <link href="https://likephone.mx/resources/assets/libs/alertifyjs/build/css/themes/default.min.css" rel="stylesheet" type="text/css" />
17    
18    <!-- Componentes UI -->
19    <link href="https://likephone.mx/resources/assets/libs/bootstrap-datepicker/css/bootstrap-datepicker.min.css" rel="stylesheet">
20    <link href="https://likephone.mx/resources/assets/libs/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css" rel="stylesheet">
21    <link href="https://likephone.mx/resources/assets/libs/bootstrap-touchspin/jquery.bootstrap-touchspin.min.css" rel="stylesheet" />
22    <link href="https://likephone.mx/resources/assets/libs/chosen_v1.8.7/chosen.min.css" rel="stylesheet" />
23    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
24    
25    <!-- Carousel -->
26    <link href="https://likephone.mx/public/OwlCarousel2-2.3.4/dist/assets/owl.carousel.min.css" rel="stylesheet">
27    <link href="https://likephone.mx/public/OwlCarousel2-2.3.4/dist/assets/owl.theme.default.min.css" rel="stylesheet">
28    
29    <!-- Fuentes -->
30    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
31    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
32    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@500;600;700&display=swap" rel="stylesheet">
33    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap" rel="stylesheet">
34    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;600;700;900&display=swap" rel="stylesheet">
35    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
36    
37    <!-- Scripts JS -->
38        
39    <!-- jQuery (necesario para Bootstrap y otros componentes) -->
40    
40<script src="https://likephone.mx/resources/assets/libs/jquery/jquery.min.js"></script>
40
41    
41<script src="https://likephone.mx/resources/assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
41
42    
43    <!-- Definir BASE_URL para JavaScript -->
44    
44<script>
45        var BASE_URL = "https://likephone.mx/";
46    </script>
46
47    
48    <!-- Estilos personalizados para el menú -->
49    <style>
50        :root { --lp-topbar: 40px; --lc-header: 60px; }
51        html, body {
52            height: 100%;
53            margin: 0;
54        }
55        body.likecheck-body {
56            display: flex;
57            flex-direction: column;
58            min-height: 100vh;
59            margin: 0;
60            padding: 0;
61        }
62        .likecheck-main-content {
63            flex: 1 0 auto;
64            /* Compensación por los dos menús fijos, le restamos un poco para evitar exceso */
65            padding-top: calc(var(--lp-topbar) + var(--lc-header) - 8px);
66        }
67        .likecheck-footer {
68            margin-bottom: 0 !important;
69            padding-bottom: 0 !important;
70            padding: 0;
71        }
72        .likecheck-body {
73            font-family: 'Poppins', sans-serif;
74            color: #333;
75            background-color: #e8f4fc;
76            overflow-x: hidden;
77            display: flex;
78            flex-direction: column;
79            min-height: 100vh;
80            position: relative;
81        }
82        .likecheck-main-content {
83            flex: 1;
84        }
85        .likecheck-menu-container {
86            background: #ffffff !important;
87            transition: all 0.3s ease-in-out;
88            padding: 0; /* Ultra compacto en desktop */
89            transition: all 0.3s ease;
90            width: 100%;
91            min-height: var(--lc-header);
92            position: fixed; top: var(--lp-topbar); left: 0; right: 0;
93            margin: 0;
94            display: flex;
95            align-items: center;
96            box-shadow: 0 6px 16px rgba(18, 42, 104, 0.08);
97            z-index: 6500; /* Debajo de la franja superior */
98        }
99        .likecheck-menu {
100            width: 100%;
101            margin: 0;
102            padding: 0;
103        }
104        .likecheck-menu-item {
105            display: block;
106            color: #0E2AA8;
107            text-decoration: none;
108            padding: 0 10px;
109            margin: 0;
110            font-size: 0.95rem;
111            line-height: 42px; /* menor altura visual */
112            font-weight: 600;
113            transition: color 0.2s ease;
114            position: relative;
115            z-index: 1;
116            white-space: nowrap;
117        }
118        .menu-toggle {
119            display: none;
120            background: none;
121            border: none;
122            color: #0E2AA8;
123            font-size: 1.5rem;
124            cursor: pointer;
125            padding: 10px;
126            margin-left: auto;
127            margin-right: 15px;
128        }
129        @media (max-width: 991.98px) {
130            /* En móvil, aún menos espacio superior */
131            .likecheck-main-content { padding-top: calc(var(--lp-topbar) + var(--lc-header) - 12px) !important; }
132            .likecheck-menu-container {
133                height: auto;
134                min-height: 56px;
135                padding: 2px 0;
136            }
137            .likecheck-menu-container .container-fluid {
138                padding: 0 12px;
139            }
140            .likecheck-menu li {
141                width: 100%;
142                margin: 0;
143                padding: 0;
144                list-style: none;
145                text-align: center;
146                border-bottom: 1px solid rgba(255,255,255,0.1);
147            }
148            .likecheck-menu li:last-child {
149                border-bottom: none;
150            }
151            .likecheck-menu-item {
152                display: block;
153                padding: 12px 18px;
154                color: #0E2AA8;
155                text-decoration: none;
156                font-size: 15px;
157                font-weight: 600;
158                transition: color 0.2s ease;
159            }
160            .likecheck-menu-item:hover,
161            .likecheck-menu-item.active {
162                background: transparent;
163                color: #0b1f7c;
164            }
165            body.menu-open {
166                overflow: hidden;
167                height: 100%;
168                position: fixed;
169                width: 100%;
170            }
171            .menu-toggle {
172                position: relative;
173                z-index: 1001;
174            }
175            .menu-toggle i {
176                transition: transform 0.3s ease;
177            }
178            .menu-toggle.active i.fa-bars {
179                transform: rotate(90deg);
180            }
181            
182            .menu-toggle.active i.fa-times {
183                transform: rotate(-90deg);
184            }
185            .likecheck-menu {
186                will-change: transform, opacity;
187                backface-visibility: hidden;
188                -webkit-backface-visibility: hidden;
189            }
190            .likecheck-menu-item:focus {
191                outline: 2px solid rgba(255,255,255,0.5);
192                outline-offset: -2px;
193            }
194            
195            /* Asegurar que el menú esté por encima de otros elementos */
196            .likecheck-menu {
197                z-index: 1000 !important;
198            }
199            
200            /* Estilos para el botón de menú en móviles */
201            @media (max-width: 991.98px) {
202                .menu-toggle {
203                    display: flex !important;
204                    align-items: center;
205                    justify-content: center;
206                    width: 44px;
207                    height: 44px;
208                    margin-left: auto;
209                }
210                
211                .menu-toggle i {
212                    font-size: 1.5rem;
213                }
214            }
215            
216            /* Asegurar que el menú ocupe todo el ancho en móviles */
217            @media (max-width: 991.98px) {
218                .likecheck-menu {
219                    width: 100% !important;
220                    max-width: 100% !important;
221                    left: 0 !important;
222                    right: 0 !important;
223                }
224            }
225            
226            .logo-container {
227                height: 50px;
228                padding: 2px 0;
229                justify-content: flex-start;
230            }
231            
232            .logo-container img {
233                max-width: 34px !important;
234            }
235            
236            .logo-container img + img {
237                width: 90px !important;
238                margin-left: 8px !important;
239                filter: none !important; /* quitar inversión, ahora fondo claro */
240            }
241            
242            .menu-toggle {
243    display: flex !important;
244    align-items: center;
245    justify-content: center;
246    width: 40px;
247    height: 40px;
248    margin: 0 0 0 auto;
249    padding: 0;
250    background: transparent;
251    border-radius: 4px;
252    border: 1px solid #0E2AA8;
253    color: #0E2AA8;
254    position: relative;
255    z-index: 1001;
256    cursor: pointer;
257    transition: all 0.3s ease;
258}
259.menu-toggle:hover {
260    background: rgba(14,42,168,0.06);
261}
262            
263            /* Estilos para escritorio */
264            @media (min-width: 992px) {
265                .menu-toggle {
266                    display: none;
267                }
268                
269                .likecheck-menu {
270                    display: flex !important;
271                    justify-content: flex-end;
272                }
273            }
274            
275            .likecheck-menu {
276                display: none;
277                flex-direction: column;
278                width: 100%;
279                background: transparent !important;
280                position: absolute;
281                top: 100%;
282                left: 0;
283                box-shadow: 0 6px 16px rgba(18, 42, 104, 0.08);
284                z-index: 1000;
285            }
286            
287            /* .likecheck-menu.active se movió arriba para mejor organización */
288            
289            .likecheck-menu li {
290                width: 100%;
291                text-align: left;
292                border-bottom: 1px solid rgba(255,255,255,0.1);
293            }
294            
295            .likecheck-menu-item {
296                padding: 15px 25px;
297                line-height: 1.5;
298                display: block;
299                width: 100%;
300                font-size: 16px;
301                color: #0E2AA8;
302                text-decoration: none;
303                transition: color 0.3s ease;
304            }
305            
306            .likecheck-menu-item:hover {
307                background-color: transparent;
308                color: #0b1f7c;
309            }
310        }
311        
312        /* Ajustes para tablets */
313        @media (min-width: 768px) and (max-width: 1199.98px) {
314            .likecheck-menu-item {
315                font-size: 0.8rem;
316                padding: 0 8px;
317            }
318        }
319        
320        .likecheck-menu-item.active {
321            font-weight: 700;
322            box-shadow: inset 0 -2px 0 #0E2AA8;
323            color: #0E2AA8;
324        }
325        @keyframes fadeInDown {
326            from {
327                opacity: 0;
328                transform: translate3d(0, -20px, 0);
329            }
330            to {
331                opacity: 1;
332                transform: translate3d(0, 0, 0);
333            }
334        }
335        
336        /* Estilo para el logo */
337        .logo-container {
338            height: 52px; /* baja la altura real del contenedor */
339            display: flex;
340            align-items: center;
341            padding: 0 15px;
342            background-color: transparent;
343        }
344        
345        .logo-container img {
346            filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2));
347            transition: all 0.3s ease;
348        }
349        
350        /* Estilo del botón de solución integral similar a la imagen */
351        .solucion-integral-btn {
352            background-color: #0180c5;
353            color: white;
354            border-radius: 20px;
355            padding: 6px 15px;
356            font-weight: bold;
357            font-size: 12px;
358            display: inline-block;
359            margin-right: 10px;
360        }
361        
362        .solucion-integral-btn i {
363            color: #ffeb3b;
364            margin-right: 5px;
365        }
366        
367        /* ===== Menú superior unificado (franja gris clara) ===== */
368        .top-menu-container {
369            background-color: #f3f5f8; /* gris claro */
370            width: 100%;
371            height: var(--lp-topbar);
372            display: flex;
373            align-items: center;
374            box-shadow: 0 2px 6px rgba(0,0,0,0.06);
375            position: fixed; top: 0; left: 0; right: 0; z-index: 7000; /* por encima del segundo menú */
376        }
377        .top-menu {
378            list-style: none;
379            display: flex;
380            padding: 6px 22px;
381            margin: 0;
382            width: 100%;
383            justify-content: flex-start;
384            gap: 16px;
385        }
386        .top-menu li { position: relative; display: flex; align-items: center; }
387        /* Quitar padding lateral del grid si está presente */
388        .top-menu-container .container-fluid { padding-left: 0; padding-right: 0; }
389        .top-menu-container .row { margin-left: 0; margin-right: 0; }
390        .top-menu li a {
391            color: #1992ff;
392            text-decoration: none;
393            font-family: 'Lato', sans-serif;
394            font-size: 18px;
395            font-weight: 700;
396            letter-spacing: 0.2px;
397            transition: color 0.15s ease;
398            padding: 2px 4px;
399            display: inline-flex;
400            align-items: center;
401            border-radius: 4px;
402            text-transform: none;
403        }
404        .top-menu li a:hover,
405        .top-menu li a:focus { color: #0E2AA8; }
406        .top-menu li a.active { color: #0E2AA8; text-decoration: none; }
407        /* Ícono previo eliminado: solo texto */
408        .top-menu li:first-child a::before { content: none !important; display: none !important; }
409
410        /* Redes sociales / contacto en la franja superior */
411        .top-menu-container .col-12 { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 12px; }
412        .top-menu { flex: 1 1 auto; }
413        .top-social { list-style: none; display: flex; align-items: center; gap: 12px; margin: 0 0 0 20px; padding: 0; }
414        .top-social li { display: inline-flex; }
415        .top-social a { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: #0E2AA8; transition: transform 0.2s ease, opacity 0.2s ease; }
416        .top-social a:hover { transform: translateY(-1px); opacity: 0.85; }
417        .top-social i { font-size: 16px; line-height: 1; }
418        .top-social svg { width: 20px; height: 20px; fill: #0E2AA8; display: block; }
419        .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
420        /* Top menu responsive en móvil */
421        @media (max-width: 768px) {
422            .top-menu-container { height: auto !important; padding: 4px 6px !important; align-items: stretch !important; background: #f3f5f8; box-shadow: 0 2px 6px rgba(0,0,0,0.06); }
423            .top-menu-container .col-12 { gap: 6px; flex-wrap: nowrap; padding: 0; flex-direction: column; align-items: stretch; }
424            .top-social { order: 1; gap: 6px; margin: 0; justify-content: flex-end; width: 100%; }
425            .top-social a { width: 22px; height: 22px; font-size: 0; }
426            .top-social i { font-size: 15px; }
427            .top-social svg { width: 18px; height: 18px; }
428            .top-menu { order: 2; width: 100%; flex: 0 0 auto; justify-content: flex-start; gap: 10px; align-items: center; padding: 4px 0 !important; }
429            .top-menu li { flex: 0 0 auto; }
430            .top-menu li a { width: auto; text-align: left; font-size: 12.5px; line-height: 1.2; padding: 4px 4px !important; border-radius: 4px; }
431        }
432        @media (max-width: 576px) { .top-menu { gap: 6px; padding: 4px 8px; } }
433        @media (max-width: 420px) { .top-menu { gap: 5px; padding: 4px 6px; } }
434        @media (max-width: 360px) {
435            .top-menu { gap: 4px; padding: 3px 5px; }
436            .top-menu li a { font-size: 10.5px; padding: 2px 3px; }
437        }
438        
439    </style>
440</head>
441<body class="likecheck-body">
442    <div class="likecheck-main-content">
443    <section class="event-detail" style="padding: 0;">
444        <!-- Menú superior -->
445        <div class="top-menu-container">
446                <div class="container-fluid">
447                    <div class="row">
448                        <div class="col-12">
449                            <ul class="top-menu">
450                                <li>
451                                    <a href="https://likephone.mx/" class="">PERSONAS</a>
452                                </li>
453                                <li>
454                                    <a href="https://likephone.mx/empresas" class="">EMPRESAS</a>
455                                </li>
456                                <li>
457                                    <a href="https://likephone.mx/likecheck" class="active">LIKECHECK</a>
458                                </li>
459                            </ul>
460                            <ul class="top-social">
461                                <li>
462                                    <a href="https://www.facebook.com/share/15caCvikaG/?mibextid=wwXIfr" target="_blank" rel="noopener">
463                                        <i class="fab fa-facebook-f" aria-hidden="true"></i>
464                                        <span class="sr-only">Facebook</span>
465                                    </a>
466                                </li>
467                                <li>
468                                    <a href="https://www.instagram.com/likecheckoficial?igsh=Mmdvc3VjNHRnMWls" target="_blank" rel="noopener">
469                                        <i class="fab fa-instagram" aria-hidden="true"></i>
470                                        <span class="sr-only">Instagram</span>
471                                    </a>
472                                </li>
473                                <li>
474                                    <a href="https://wa.link/nigs9o" target="_blank" rel="noopener">
475                                        <i class="fab fa-whatsapp" aria-hidden="true"></i>
476                                        <span class="sr-only">WhatsApp</span>
477                                    </a>
478                                </li>
479                                <li>
480                                    <a href="mailto:[email protected]">
481                                        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 6c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2H4zm0 2h16v.01L12 13 4 8.01V8zm0 3.24 7.65 4.59c.21.13.49.13.7 0L20 11.24V16H4v-4.76z"/></svg>
482                                        <span class="sr-only">Correo</span>
483                                    </a>
484                                </li>
485                                <li>
486                                    <a href="tel:+528141255095">
487                                        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6.62 10.79a15.464 15.464 0 006.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1C10.85 21 3 13.15 3 3c0-.55.45-1 1-1h2.5c.55 0 1 .45 1 1 0 1.24.2 2.45.57 3.57.11.35.03.74-.24 1.02l-2.21 2.2z"/></svg>
488                                        <span class="sr-only">Teléfono</span>
489                                    </a>
490                                </li>
491                            </ul>
492                        </div>
493                    </div>
494                </div>
495            </div>
496        <div class="likecheck-menu-container">
497            <div class="container-fluid">
498                <div class="row align-items-center py-0">
499                    <div class="col-lg-4 col-6" style="flex: 0 0 45%; max-width: 45%;">
500                        <a href="https://likephone.mx/likecheck" class="logo-container" style="display: flex; align-items: center; height: 100%; justify-content: flex-start;">
501                            <div style="display: flex; align-items: center;">
502                                <img src="https://likephone.mx/resources/assets/images/likecheck/Logo.png" style="width: 40px; height: auto;" alt="Logo" class="d-inline-block">
503                                <img src="https://likephone.mx/resources/assets/images/likecheck/LikeCheck.png" style="width: 120px; height: auto; margin-left: 10px; filter: brightness(0) invert(1);" alt="LikeCheck" class="d-none d-md-inline-block">
504                            </div>
505                        </a>
506                    </div>
507                    <div class="col-lg-8 col-6 position-relative d-flex align-items-center" style="flex: 0 0 55%; max-width: 55%;">
508                        <button class="menu-toggle d-lg-none ms-auto" aria-label="Menú">
509                            <i class="fas fa-bars"></i>
510                        </button>
511                        <ul class="likecheck-menu d-flex justify-content-end m-0 p-0" style="width: 100%; list-style: none; gap: 10px; margin-left: auto !important;">
512                        <li class="text-center" style="animation: fadeInDown 0.5s ease backwards; animation-delay: 0.1s;"><a href="#inicio" class="likecheck-menu-item active">Inicio</a></li>
513                        <li class="text-center" style="animation: fadeInDown 0.5s ease backwards; animation-delay: 0.2s;"><a href="#funcionalidades" class="likecheck-menu-item ">Funcionalidades</a></li>
514                        <li class="text-center" style="animation: fadeInDown 0.5s ease backwards; animation-delay: 0.3s;"><a href="#appcrm" class="likecheck-menu-item ">APP & CRM</a></li>
515                        <li class="text-center" style="animation: fadeInDown 0.5s ease backwards; animation-delay: 0.4s;"><a href="#planes" class="likecheck-menu-item ">Planes</a></li>
516                        <li class="text-center" style="animation: fadeInDown 0.5s ease backwards; animation-delay: 0.5s;"><a href="#cotizador" class="likecheck-menu-item ">Cotizador</a></li>
517                        <li class="text-center" style="animation: fadeInDown 0.5s ease backwards; animation-delay: 0.7s;"><a href="#promocion" class="likecheck-menu-item ">Promoción</a></li>
518                        <li class="text-center" style="animation: fadeInDown 0.5s ease backwards; animation-delay: 0.6s;"><a href="#clientes" class="likecheck-menu-item ">Clientes</a></li>
519                        <li class="text-center" style="animation: fadeInDown 0.5s ease backwards; animation-delay: 0.8s;"><a href="#contactanos" class="likecheck-menu-item ">Contáctanos</a></li>
520                    </ul>
521                    
521<script>
522    document.addEventListener('DOMContentLoaded', function() {
523        console.log('DOM cargado, inicializando menú móvil...');
524        
525        // Solo registramos eventos de clic para diagnóstico
526        document.querySelectorAll('.likecheck-menu-item').forEach(item => {
527            item.addEventListener('click', () => {
528                console.log('Clic en elemento del menú');
529            });
530        });
531    });
532    </script>
532
533                    </div>
534                </div>
535            </div>
536        </div>
537        <div class="container-fluid p-0" style="width: 100%;">
538        <!-- Sección activa: inicio -->
539    
540    <!-- jQuery (necesario para Bootstrap y otros componentes) -->
541    
541<script src="https://likephone.mx/resources/assets/libs/jquery/jquery.min.js"></script>
541
542    
542<script src="https://likephone.mx/resources/assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
542
543    <!-- Estilos adicionales para Likecheck y comportamiento sticky -->
544    <style>
545        /* Estilos para menú fijo (sticky) - compatible con 'sticky' y 'sticky-menu' */
546        /* Neutralizar clases heredadas que añaden fondo blanco */
547        .likecheck-menu-container.sticky-scroll { background: inherit !important; }
548        .likecheck-menu-container.sticky,
549        .likecheck-menu-container.sticky-menu {
550            position: fixed !important;
551            top: var(--lp-topbar) !important; /* Siempre debajo de la franja superior */
552            left: 0;
553            right: 0;
554            width: 100%;
555            z-index: 6500; /* Debajo de la franja superior */
556            height: var(--lc-header);
557            animation: slideDown 0.3s ease-in-out;
558            background: #ffffff !important;
559            background-color: #ffffff !important; /* Forzar fondo claro */
560            display: flex !important;
561            visibility: visible !important;
562            opacity: 1 !important;
563            box-shadow: 0 6px 16px rgba(18, 42, 104, 0.08);
564        }
565        
566        .likecheck-menu-container.sticky .likecheck-menu-item,
567        .likecheck-menu-container.sticky-menu .likecheck-menu-item {
568            line-height: var(--lc-header);
569        }
570        
571        .likecheck-menu-container.sticky .logo-container,
572        .likecheck-menu-container.sticky-menu .logo-container {
573            height: var(--lc-header);
574        }
575        
576        .likecheck-menu-container.sticky .logo-container img:first-child,
577        .likecheck-menu-container.sticky-menu .logo-container img:first-child {
578            max-width: 34px; /* mismo que estado normal */
579        }
580        
581        .likecheck-menu-container.sticky .logo-container img:last-child,
582        .likecheck-menu-container.sticky-menu .logo-container img:last-child {
583            max-width: 90px; /* mismo que estado normal */
584        }
585        
586        .likecheck-menu-container.sticky .solucion-integral-btn,
587        .likecheck-menu-container.sticky-menu .solucion-integral-btn {
588            display: none !important;
589        }
590
591        @keyframes slideDown {
592            from { transform: translateY(-100%); }
593            to { transform: translateY(0); }
594        }
595
596        /* Estilos para las secciones */
597        .section-container {
598            margin-bottom: 50px;
599            /* Asegura que al navegar por anclas no se oculte el título bajo las barras */
600            scroll-margin-top: calc(var(--lp-topbar) + var(--lc-header) + 10px);
601        }
602        
603        /* Estilo de efecto hover para los elementos del menú - una sola línea */
604        .likecheck-menu-item:after {
605            content: '';
606            position: absolute;
607            bottom: 0;
608            left: 50%;
609            width: 0;
610            height: 2px;
611            background: #0E2AA8;
612            transition: all 0.3s ease;
613            transform: translateX(-50%);
614            /* Aseguramos que no haya líneas dobles */
615            box-shadow: none;
616        }
617        
618        .likecheck-menu-item:hover:after,
619        .likecheck-menu-item.active:after {
620            width: 70%;
621        }
622        
623        /* Media queries para responsive - VERSIÓN ORIGINAL RESTAURADA */
624        @media (max-width: 991px) {
625            /* Botón de menú para móvil */
626            .menu-toggle {
627                display: block;
628            }
629            
630            /* Menú en móvil - Corregido */
631            .likecheck-menu {
632                display: none !important; /* Oculto en móvil por defecto */
633                position: absolute;
634                top: 100%; /* Siempre debajo del contenedor del menú */
635                left: 0;
636                right: 0;
637                width: 100%;
638                background: #ffffff !important;
639                background-color: #ffffff !important;
640                z-index: 6600; /* por encima del contenido, debajo de franja azul */
641                box-shadow: 0 6px 16px rgba(18, 42, 104, 0.12);
642            }
643            
644            .likecheck-menu.active {
645                display: block !important; /* Visible cuando tiene clase active */
646            }
647            
648            /* Asegurar que el menú en escritorio siempre esté visible */
649            @media (min-width: 992px) {
650                .likecheck-menu {
651                    display: flex !important;
652                    position: static;
653                    background-color: transparent;
654                    box-shadow: none;
655                    top: auto;
656                }
657            }
658            
659            /* Estilos para los elementos del menú */
660            .likecheck-menu li {
661                width: 100%;
662                margin: 0;
663                border-bottom: 1px solid rgba(255,255,255,0.1);
664            }
665            
666            .likecheck-menu li:last-child {
667                border-bottom: none;
668            }
669            
670            .likecheck-menu-item {
671                display: block;
672                padding: 15px;
673                text-align: center;
674                font-size: 16px;
675                font-weight: 500;
676                line-height: 1.5;
677                color: #0E2AA8;
678                text-decoration: none !important;
679            }
680            
681            .likecheck-menu-item:hover, .likecheck-menu-item:focus, .likecheck-menu-item:active {
682                background-color: transparent;
683                color: #0b1f7c !important;
684                text-decoration: none !important;
685            }
686            
687            .likecheck-menu-item:after {
688                display: none;
689            }
690            
691            /* Estilos para el botón de menú */
692           .menu-toggle {
693    display: block;
694    background: transparent;
695    border: none;
696    color: #0E2AA8;
697    font-size: 1.5rem;
698    margin-left: auto;
699    cursor: pointer;
700    padding: 10px 15px;
701    transition: all 0.3s;
702}
703            
704            .menu-toggle:focus {
705                outline: none;
706            }
707            
708            .menu-toggle:hover {
709    color: #0b1f7c;
710}
711            
712            /* Ajustes adicionales */
713            .logo-container {
714                height: 50px;
715            }
716            
717            .logo-container img:first-child {
718                max-width: 35px;
719            }
720        }
721        
722        /* Asegurar que el menú siempre esté visible en pantallas grandes */
723        @media (min-width: 992px) {
724            .likecheck-menu {
725                display: flex !important;
726            }
727            
728            .menu-toggle {
729                display: none;
730            }
731        }
732    </style>
733    
734    <!-- Script para sincronizar alturas, controlar menú móvil y comportamiento sticky -->
735    
735<script>
736    (function(){
737        // Sincronizar alturas de los menús
738        function syncHeights(){
739            try{
740                var tb = document.querySelector('.top-menu-container');
741                if(tb){
742                    var th = Math.floor(tb.offsetHeight || tb.getBoundingClientRect().height);
743                    if(th && !isNaN(th)) document.documentElement.style.setProperty('--lp-topbar', th + 'px');
744                }
745                var lc = document.querySelector('.likecheck-menu-container');
746                if(lc){
747                    var lh = Math.floor(lc.offsetHeight || lc.getBoundingClientRect().height);
748                    if(lh && !isNaN(lh)) document.documentElement.style.setProperty('--lc-header', lh + 'px');
749                }
750            }catch(e){console.log('Error sincronizando alturas:', e);}
751        }
752        
753        // Controlador para el comportamiento sticky del menú
754        function handleStickyMenu() {
755            var scrollPosition = window.scrollY || document.documentElement.scrollTop;
756            var topMenuHeight = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--lp-topbar')) || 52;
757            var menuContainer = document.querySelector('.likecheck-menu-container');
758            
759            if (menuContainer) {
760                // Normalizar clases existentes
761                menuContainer.classList.remove('sticky');
762                
763                if (scrollPosition > topMenuHeight) {
764                    // Usar la clase que ya existe en el DOM/CSS: 'sticky-menu'
765                    if (!menuContainer.classList.contains('sticky-menu')) {
766                        menuContainer.classList.add('sticky-menu');
767                    }
768                    menuContainer.style.top = '0';
769                } else {
770                    menuContainer.classList.remove('sticky-menu');
771                    menuContainer.style.top = topMenuHeight + 'px';
772                }
773                
774                // Asegurar visibilidad
775                menuContainer.style.display = 'flex';
776                menuContainer.style.visibility = 'visible';
777                menuContainer.style.opacity = '1';
778            }
779        }
780        
781        // Eventos para sincronización y sticky
782        window.addEventListener('load', function() {
783            syncHeights();
784            handleStickyMenu();
785        });
786        window.addEventListener('resize', syncHeights);
787        window.addEventListener('scroll', handleStickyMenu, {passive: true});
788        
789        // Observar cambios en las dimensiones de los elementos
790        if(window.ResizeObserver){
791            try{
792                var ro = new ResizeObserver(syncHeights);
793                var el1 = document.querySelector('.top-menu-container');
794                var el2 = document.querySelector('.likecheck-menu-container');
795                if(el1) ro.observe(el1);
796                if(el2) ro.observe(el2);
797            }catch(e){/* noop */}
798        }
799        
800        // Ejecutar inmediatamente
801        syncHeights();
802        handleStickyMenu();
803
804        // Desplazamiento suave con compensación de alturas
805        function getOffsetTopFor(id){
806            var target = document.querySelector(id);
807            if(!target) return null;
808            var rectTop = target.getBoundingClientRect().top + window.pageYOffset;
809            var topbar = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--lp-topbar')) || 0;
810            var header = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--lc-header')) || 0;
811            return Math.max(0, rectTop - (topbar + header + 6));
812        }
813        function smoothScrollToHash(hash){
814            var id = hash && hash.startsWith('#') ? hash : '#' + hash;
815            var y = getOffsetTopFor(id);
816            if(y !== null){
817                window.scrollTo({ top: y, behavior: 'smooth' });
818            }
819        }
820        // Aplicar al cargar con hash
821        if(location.hash){ setTimeout(function(){ smoothScrollToHash(location.hash); }, 50); }
822        window.addEventListener('hashchange', function(){ smoothScrollToHash(location.hash); });
823
824        // Toggle para el menú móvil
825        document.addEventListener('DOMContentLoaded', function(){
826            // Reemplazar eventos antiguos para evitar duplicación
827            var toggle = document.querySelector('.menu-toggle');
828            if(toggle){
829                var newToggle = toggle.cloneNode(true);
830                toggle.parentNode.replaceChild(newToggle, toggle);
831                
832                newToggle.addEventListener('click', function(e){
833                    e.preventDefault();
834                    e.stopPropagation();
835                    
836                    var menu = document.querySelector('.likecheck-menu');
837                    if(!menu) return;
838                    
839                    // Toggle de la clase active
840                    var isActive = menu.classList.contains('active');
841                    
842                    if(isActive) {
843                        menu.classList.remove('active');
844                        menu.style.display = 'none';
845                        var icon = this.querySelector('i');
846                        if(icon) {
847                            icon.classList.remove('fa-times');
848                            icon.classList.add('fa-bars');
849                        }
850                    } else {
851                        menu.classList.add('active');
852                        menu.style.display = 'block';
853                        var icon = this.querySelector('i');
854                        if(icon) {
855                            icon.classList.remove('fa-bars');
856                            icon.classList.add('fa-times');
857                        }
858                    }
859                });
860            }
861            
862            // Cerrar menú al hacer clic en un item (en móvil)
863            document.querySelectorAll('.likecheck-menu-item').forEach(function(item){
864                var newItem = item.cloneNode(true);
865                if(item.parentNode) {
866                    item.parentNode.replaceChild(newItem, item);
867                }
868                
869                newItem.addEventListener('click', function(){
870                    if(window.innerWidth < 992){
871                        var menu = document.querySelector('.likecheck-menu');
872                        if(menu) {
873                            menu.classList.remove('active');
874                            menu.style.display = 'none';
875                        }
876                        var icon = document.querySelector('.menu-toggle i');
877                        if(icon) {
878                            icon.classList.add('fa-bars');
879                            icon.classList.remove('fa-times');
880                        }
881                    }
882                });
883            });
884            
885            // Cerrar el menú al hacer clic fuera
886            document.addEventListener('click', function(e){
887                if(window.innerWidth < 992) {
888                    var menu = document.querySelector('.likecheck-menu');
889                    var toggle = document.querySelector('.menu-toggle');
890                    
891                    if(menu && menu.classList.contains('active') && 
892                      !menu.contains(e.target) && 
893                      toggle && !toggle.contains(e.target)) {
894                        menu.classList.remove('active');
895                        menu.style.display = 'none';
896                        var icon = toggle.querySelector('i');
897                        if(icon) {
898                            icon.classList.add('fa-bars');
899                            icon.classList.remove('fa-times');
900                        }
901                    }
902                }
903            });
904            
905            // Inicializar el menú correctamente en escritorio/móvil
906            function initializeMenuDisplay() {
907                var menu = document.querySelector('.likecheck-menu');
908                if(menu) {
909                    if(window.innerWidth >= 992) {
910                        menu.style.display = 'flex';
911                    } else {
912                        if(!menu.classList.contains('active')) {
913                            menu.style.display = 'none';
914                        }
915                    }
916                }
917            }
918            
919            // Ejecutar al cargar y al cambiar tamaño de ventana
920            initializeMenuDisplay();
921            window.addEventListener('resize', initializeMenuDisplay);
922        });
923    })();
924    </script>
924
925</head>
926
927<!-- Inicio del contenido específico de Likecheck -->
928<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
929<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
930<link rel="stylesheet" href="https://likephone.mx/resources/assets/css/likecheck-responsive.css">
931<!-- Swiper CSS -->
932<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
933
934<!-- Contenedor principal para todas las secciones -->
935<div class="likecheck-main-content">
936    <!-- Sección: Inicio -->
937    <section id="inicio" class="section-page">
938        <meta name="viewport" content="width=device-width, initial-scale=1.0">
939<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
940<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
941<link rel="stylesheet" href="https://likephone.mx/resources/assets/css/likecheck-responsive.css">
942
943<div class="likecheck-main-content">
944    <div class="container-fluid p-0" style="width: 100%;
944 margin-top: 1px;">
945        <div class="likecheck-container">
946            <div class="hero-section">
947                <div class="hero-content">
948                    <p class="hero-title">
949                        <span style="font-weight: 600;">LikeCheck</span> es una plataforma tecnológica que <span class="hero-highlight">REVOLUCIONA</span> la manera en que las empresas <span class="hero-highlight" style="font-weight: 600;">gestionan</span> la asistencia, <span class="hero-highlight" style="font-weight: 600;">supervisan</span> a su personal y <span class="hero-highlight" style="font-weight: 600;">optimizan</span> sus operaciones en campo.
950                    </p>
951                    <a href="https://calendar.app.google/1BqBxv9FwegrLZSD9" class="hero-button" target="_blank" rel="noopener noreferrer">
952                        AGENDA TU DEMO <i class="fas fa-chevron-right"></i>
953                    </a>
954                </div>
955                <div class="hero-video">
956                    <div class="video-container">
957                        <iframe class="video-iframe" src="https://www.youtube.com/embed/ZzIRM-gpEdE" title="LikeCheck Video" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
958                    </div>
959                </div>
960            </div>
961        </div>
962    </div>
963</div>    </section>
964
965    <!-- Sección: Funcionalidades -->
966    <section id="funcionalidades" class="section-page">
967        <div class="section-container active" id="funcionalidades-content" style="padding: 100px 0; background: #e8f4fc; position: relative; overflow: hidden;">
968    <div 
969        style="position: absolute; top: 5%; right: 5%; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(7, 153, 182, 0.03) 0%, rgba(7, 153, 182, 0) 70%);">
970    </div>
971    <div 
972        style="position: absolute; bottom: 8%; left: 8%; width: 250px; height: 250px; border-radius: 50%; background: radial-gradient(circle, rgba(24, 44, 131, 0.03) 0%, rgba(24, 44, 131, 0) 70%);">
973    </div>
974    <div class="row justify-content-center">
975        <div class="col-lg-11">
976            <div class="row mb-5">
977                <div class="col-12 text-center">
978                    <h2 style="color: #182c83; font-size: 2.5rem; font-weight: 700; text-transform: uppercase;">FUNCIONALIDADES</h2>
979                </div>
980            </div>
981            <div class="funcionalidades-container">
982                <div class="funcionalidad-boton" data-delay="100">
983                    <div class="funcionalidad-icono">
984                        <img src="resources/assets/images/likecheck/o.png" alt="Control de Asistencia">
985                    </div>
986                    <h3>CONTROL DE ASISTENCIA</h3>
987                </div>
988                
989                <div class="funcionalidad-boton" data-delay="300">
990                    <div class="funcionalidad-icono">
991                        <img src="resources/assets/images/likecheck/p.png" alt="Incidencias de Prenómina">
992                    </div>
993                    <h3>INCIDENCIAS DE PRENÓMINA</h3>
994                </div>
995                
996                <div class="funcionalidad-boton" data-delay="500">
997                    <div class="funcionalidad-icono">
998                        <img src="resources/assets/images/likecheck/q.png" alt="Incidentes">
999                    </div>
1000                    <h3>INCIDENTES</h3>
1001                </div>
1002                
1003                <div class="funcionalidad-boton" data-delay="700">
1004                    <div class="funcionalidad-icono">
1005                        <img src="resources/assets/images/likecheck/r.png" alt="Rondines">
1006                    </div>
1007                    <h3>RONDINES</h3>
1008                </div>
1009                
1010                <div class="funcionalidad-boton" data-delay="900">
1011                    <div class="funcionalidad-icono">
1012                        <img src="resources/assets/images/likecheck/s.png" alt="App de Supervisor">
1013                    </div>
1014                    <h3>APP DE SUPERVISOR</h3>
1015                </div>
1016            </div>
1017            
1018            <div class="row mt-5">
1019                <div class="col-12">
1020                    <div id="funcionalidad-detalle" class="funcionalidad-detalle" style="display: none;">
1021                        <div class="card shadow-sm border-0">
1022                            <div class="card-body p-4">
1023                                <h4 id="detalle-titulo" class="text-primary"></h4>
1024                                <ul id="detalle-lista" class="list-unstyled"></ul>
1025                            </div>
1026                        </div>
1027                    </div>
1028                </div>
1029            </div>
1030        </div>
1031    </div>
1032    <style>
1033        /* Contenedor principal de funcionalidades */
1034        .funcionalidades-container {
1035            display: flex;
1036            justify-content: space-between;
1037            align-items: stretch;
1038            flex-wrap: nowrap;
1039            margin: 0px;
1040            width: 100%;
1041        }
1042        
1043        /* Estilo para cada botón de funcionalidad */
1044        .funcionalidad-boton {
1045            flex: 1;
1046            display: flex;
1047            flex-direction: column;
1048            align-items: center;
1049            text-align: center;
1050            margin: 0 10px;
1051            padding: 20px 10px;
1052            background: white;
1053            border-radius: 10px;
1054            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
1055            transition: all 0.3s ease;
1056            cursor: pointer;
1057            opacity: 0;
1058            transform: translateY(30px);
1059            position: relative;
1060            overflow: hidden;
1061            min-height: 180px; /* Altura mínima para uniformidad */
1062            justify-content: center; /* Centrado vertical */
1063        }
1064        
1065        /* Efecto de borde inferior al pasar el ratón */
1066        .funcionalidad-boton::after {
1067            content: '';
1068            position: absolute;
1069            bottom: 0;
1070            left: 0;
1071            width: 100%;
1072            height: 3px;
1073            background: linear-gradient(90deg, #0799B6, #182c83);
1074            transform: scaleX(0);
1075            transform-origin: right;
1076            transition: transform 0.3s ease;
1077        }
1078        
1079        /* Animación al pasar el ratón */
1080        .funcionalidad-boton:hover {
1081            transform: translateY(-5px);
1082            box-shadow: 0 8px 25px rgba(7, 153, 182, 0.15);
1083        }
1084        
1085        .funcionalidad-boton:hover::after {
1086            transform: scaleX(1);
1087            transform-origin: left;
1088        }
1089        
1090        /* Botón activo */
1091        .funcionalidad-boton.active {
1092            background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(240,248,255,1) 100%);
1093            box-shadow: 0 8px 25px rgba(7, 153, 182, 0.2);
1094        }
1095        
1096        .funcionalidad-boton.active::after {
1097            transform: scaleX(1);
1098        }
1099        
1100        /* Contenedor del icono */
1101        .funcionalidad-icono {
1102            width: 100px;
1103            height: 100px;
1104            margin-bottom: 15px;
1105            display: flex;
1106            align-items: center;
1107            justify-content: center;
1108        }
1109        
1110        /* Imagen del icono */
1111        .funcionalidad-icono img {
1112            max-width: 100%;
1113            max-height: 100%;
1114            transition: transform 0.3s ease;
1115            width: 85px;
1116            height: auto;
1117        }
1118        
1119        .funcionalidad-boton:hover .funcionalidad-icono img {
1120            transform: scale(1.1);
1121        }
1122        
1123        /* Título de la funcionalidad */
1124        .funcionalidad-boton h3 {
1125            font-size: 0.9rem;
1126            font-weight: 600;
1127            color: #182c83;
1128            margin: 0;
1129            transition: color 0.3s ease;
1130        }
1131        
1132        .funcionalidad-boton.active h3 {
1133            color: #0799B6;
1134        }
1135        
1136        /* Animación de visibilidad */
1137        .funcionalidad-boton.visible {
1138            opacity: 1;
1139            transform: translateY(0);
1140        }
1141        
1142        /* Área de detalle */
1143        .funcionalidad-detalle {
1144            transition: all 0.5s ease;
1145            margin-top: 30px;
1146        }
1147        
1148        .funcionalidad-detalle .card {
1149            border-radius: 12px;
1150            overflow: hidden;
1151            transition: all 0.3s ease;
1152            border-left: 4px solid #0799B6;
1153        }
1154        .functionality-item:hover {
1155            transform: translateY(-10px);
1156            box-shadow: 0 15px 40px rgba(7, 153, 182, 0.15);
1157            background: #ffffff;
1158        }
1159        .functionality-item:hover::before {
1160            height: 100%;
1161        }
1162        .functionality-icon-container {
1163            position: relative;
1164            width: 130px;
1165            height: 130px;
1166            margin: 0 auto 35px;
1167        }
1168        .animated-title {
1169            position: relative;
1170            padding-bottom: 20px;
1171            letter-spacing: 2px;
1172        }
1173        
1174        /* Estilos responsivos */
1175        @media (max-width: 992px) {
1176            .funcionalidades-container {
1177                flex-wrap: wrap;
1178                justify-content: center;
1179            }
1180            
1181            .funcionalidad-boton {
1182                flex: 0 0 calc(33.33% - 20px);
1183                margin-bottom: 20px;
1184                min-height: 170px;
1185                width: calc(33.33% - 20px); /* Ancho fijo */
1186            }
1187        }
1188        
1189        @media (max-width: 768px) {
1190            .funcionalidades-container {
1191                flex-wrap: wrap;
1192                justify-content: center;
1193            }
1194            
1195            .funcionalidad-boton {
1196                flex: 0 0 calc(50% - 20px);
1197                width: calc(50% - 20px); /* Ancho fijo */
1198                margin-bottom: 20px;
1199                min-height: 160px;
1200                height: auto; /* Altura automática */
1201            }
1202            
1203            .funcionalidad-icono {
1204                width: 70px;
1205                height: 70px;
1206            }
1207            
1208            .funcionalidad-icono img {
1209                width: 55px;
1210            }
1211        }
1212        
1213        @media (max-width: 480px) {
1214            .funcionalidades-container {
1215                flex-direction: column;
1216                align-items: center;
1217            }
1218            
1219            .funcionalidad-boton {
1220                flex: 0 0 100%;
1221                width: 100%;
1222                max-width: 280px;
1223                margin-left: auto;
1224                margin-right: auto;
1225                min-height: 140px;
1226                height: 140px; /* Altura fija para todos los botones */
1227                margin-bottom: 15px;
1228            }
1229            
1230            .funcionalidad-boton h3 {
1231                font-size: 0.85rem; /* Tamaño de texto uniforme */
1232                margin-top: 10px;
1233            }
1234            
1235            h2 {
1236                font-size: 2rem !important;
1237            }
1238        }
1239        @keyframes pulse {
1240            0% { transform: scale(1); }
1241            50% { transform: scale(1.05); }
1242            100% { transform: scale(1); }
1243        }
1244        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap');
1245        
1246        /* Estilos para los elementos de la lista de detalles */
1247        .feature-item {
1248            transition: all 0.3s ease;
1249            padding: 10px 15px;
1250            border-radius: 8px;
1251            background-color: rgba(7, 153, 182, 0.03);
1252            border-left: 3px solid #0799B6;
1253            margin-bottom: 15px !important;
1254        }
1255        
1256        .feature-item:hover {
1257            background-color: rgba(7, 153, 182, 0.08);
1258            transform: translateX(5px);
1259            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
1260        }
1261        
1262        .feature-icon {
1263            display: flex;
1264            align-items: center;
1265            justify-content: center;
1266            width: 30px;
1267            height: 30px;
1268            min-width: 30px;
1269            border-radius: 50%;
1270            background-color: rgba(7, 153, 182, 0.1);
1271            margin-right: 15px;
1272        }
1273        
1274        .feature-icon i {
1275            font-size: 14px;
1276            color: #0799B6 !important;
1277        }
1278        
1279        .feature-text {
1280            font-family: 'Montserrat', sans-serif;
1281            font-size: 15px;
1282            color: #444;
1283            line-height: 1.5;
1284            font-weight: 500;
1285        }
1286        
1287        #detalle-titulo {
1288            font-family: 'Montserrat', sans-serif;
1289            font-weight: 700;
1290            color: #182c83;
1291            position: relative;
1292            padding-bottom: 15px;
1293            margin-bottom: 25px;
1294            text-align: center;
1295        }
1296        
1297        #detalle-titulo::after {
1298            content: '';
1299            position: absolute;
1300            bottom: 0;
1301            left: 50%;
1302            transform: translateX(-50%);
1303            width: 80px;
1304            height: 3px;
1305            background: linear-gradient(90deg, #0799B6, #182c83);
1306            border-radius: 3px;
1307        }
1308    </style>
1309    
1309<script>
1310        document.addEventListener('DOMContentLoaded', function() {
1311            const title = document.querySelector('.animated-title');
1312            if (title) {
1313                setTimeout(() => {
1314                    title.style.opacity = '0';
1315                    title.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
1316                    title.style.transform = 'translateY(20px)';
1317                    
1318                    setTimeout(() => {
1319                        title.style.opacity = '1';
1320                        title.style.transform = 'translateY(0)';
1321                    }, 100);
1322                }, 300);
1323            }
1324            function isElementInViewport(el) {
1325                const rect = el.getBoundingClientRect();
1326                return (
1327                    rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
1328                    rect.bottom >= 0
1329                );
1330            }
1331            function animateOnScroll() {
1332                const items = document.querySelectorAll('.funcionalidad-boton');
1333                
1334                items.forEach(function(item) {
1335                    if (isElementInViewport(item) && !item.classList.contains('visible')) {
1336                        const delay = item.getAttribute('data-delay') || 0;
1337                        setTimeout(() => {
1338                            item.classList.add('visible');
1339                            setTimeout(() => {
1340                                item.style.transition = 'all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1)';
1341                            }, 50);
1342                        }, delay);
1343                    }
1344                });
1345            }
1346            animateOnScroll();
1347            window.addEventListener('scroll', animateOnScroll);
1348        });
1349    </script>
1349
1350    <!-- Overlay para detalles de funcionalidades -->
1351    <style>
1352        .detail-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center;z-index:9999;}
1353        .detail-content{background:#fff;padding:40px 50px;border-radius:12px;max-width:650px;width:90%;color:#182c83;position:relative;box-shadow:0 20px 45px rgba(0,0,0,0.15);overflow:hidden;transform:scale(0.9);opacity:0;transition:all .35s ease;} .detail-overlay.show .detail-content{transform:scale(1);opacity:1;}
1354        .detail-content h4{font-size:1.6rem;margin-bottom:25px;font-weight:700;text-transform:uppercase;color:#0799B6;letter-spacing:1px;text-align:center;} .detail-content ul{margin-top:10px;padding-left:0;list-style:none;} .detail-content ul li{margin-bottom:12px;position:relative;padding-left:30px;font-size:1.05rem;color:#495677;} .detail-content ul li::before{content:'\f058';font-family:'Font Awesome 5 Free';font-weight:900;position:absolute;left:0;top:0;color:#0799B6;}
1355        .detail-close{position:absolute;top:12px;right:18px;font-size:28px;cursor:pointer;color:#495677;font-weight:bold;transition:color .25s ease;} .detail-close:hover{color:#0799B6;}
1356        
1357    </style>
1358    
1359
1360</style>
1361    <!-- Se eliminó el overlay modal -->
1362    
1362<script>
1363        document.addEventListener('DOMContentLoaded', function() {
1364            const detailData = {
1365                'CONTROL DE ASISTENCIA': [
1366                    'Registro de entrada y salida con geocercas establecidas',
1367                    'Validación de asistencia mediante reconocimiento facial',
1368                    'Toma de selfies como evidencia visual de la presentación del empleado o entorno laboral',
1369                    'Administración de horarios por turnos',
1370                    'Visualización en tiempo real de empleados presentes o ausentes',
1371                    'Reportes integrados con datos de entradas, salidas e información que facilita las prenómina'
1372                ],
1373                'INCIDENCIAS DE PRENÓMINA': [
1374                    'Permisos con o sin goce, tiempo extra y descansos trabajados con opción para aprobar o rechazar',
1375                    'Registro de vacaciones e incapacidades con periodo y tipo desde el panel del administrador',
1376                    'Visualización en reportes desde la fecha de inicio y durante todo el periodo asignado',
1377                    'Control de movimientos que impactan directamente la nómina',
1378                    'Exportación de reportes consolidados para revisión y envío a nómina'
1379                ],
1380                'APP DE SUPERVISOR': [
1381                    'Asignación de sucursales a supervisar, monitoreo de entrada, salida y gestiones realizadas',
1382                    'Supervisión remota del personal y sus actividades diarias',
1383                    'Consulta de incidencias reportadas por los empleados desde la app',
1384                    'Autorizar entradas o salidas de los empleados, solicitar  tiempo extra o descansos laborados',
1385                    'Captura de fotos y comentarios como evidencia de la gestión general en sucursal o evaluación de empleados'
1386                ],
1387                'RONDINES': [
1388                    'Creación de rutas de vigilancia para el personal operativo',
1389                    'Confirmación de puntos de control mediante geolocalización o escaneo de QR',
1390                    'Registro de evidencias fotográficas y comentarios en cada punto',
1391                    'Identificación de rondines incompletos o no realizados',
1392                    'Seguimiento en tiempo real de los recorridos desde el CRM administrador, exportación del  reporte en formato PDF incluyendo fotografías de las evidencias recabadas'
1393                ],
1394                'INCIDENTES': [
1395                    'Reporte inmediato de eventos, anomalías o fallas detectadas',
1396                    'Registro de cada incidente con fotos y ubicación georreferenciada',
1397                    'Seguimiento del estado de cada incidente (abierto, en proceso, resuelto)',
1398                    'Consulta del historial completo para auditorías o revisiones internas'
1399                ]
1400            };
1401
1402            const detalleContenedor = document.getElementById('funcionalidad-detalle');
1403            const detalleTitulo = document.getElementById('detalle-titulo');
1404            const detalleLista = document.getElementById('detalle-lista');
1405            
1406            // Función para mostrar los detalles de la funcionalidad seleccionada
1407            function mostrarDetalleFuncionalidad(titulo) {
1408                if (detailData[titulo]) {
1409                    // Actualizar el título y la lista
1410                    detalleTitulo.textContent = titulo;
1411                    detalleLista.innerHTML = detailData[titulo].map(item => `
1412                        <li class="mb-4 feature-item">
1413                            <div class="d-flex align-items-start">
1414                                <span class="feature-icon">
1415                                    <i class="fas fa-check-circle text-primary"></i>
1416                                </span>
1417                                <span class="feature-text">${item}</span>
1418                            </div>
1419                        </li>
1420                    `).join('');
1421                    
1422                    // Mostrar el contenedor
1423                    detalleContenedor.style.display = 'block';
1424                    
1425                    // Desplazamiento suave hacia el detalle
1426                    detalleContenedor.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
1427                }
1428            }
1429            
1430            // Asignar evento click a los botones de funcionalidad
1431            document.querySelectorAll('.funcionalidad-boton').forEach(item => {
1432                item.addEventListener('click', function() {
1433                    const titulo = this.querySelector('h3').innerText.trim();
1434                    
1435                    // Remover clase activa de todos los botones
1436                    document.querySelectorAll('.funcionalidad-boton').forEach(i => {
1437                        i.classList.remove('active');
1438                    });
1439                    
1440                    // Agregar clase activa al botón clickeado
1441                    this.classList.add('active');
1442                    
1443                    // Mostrar el detalle
1444                    mostrarDetalleFuncionalidad(titulo);
1445                });
1446            });
1447            
1448            // Mostrar la primera funcionalidad por defecto
1449            const primerBoton = document.querySelector('.funcionalidad-boton');
1450            if (primerBoton) {
1451                const titulo = primerBoton.querySelector('h3').innerText.trim();
1452                primerBoton.classList.add('active');
1453                mostrarDetalleFuncionalidad(titulo);
1454            }
1455        });
1456    </script>
1456
1457</div>    </section>
1458
1459    <!-- Sección: AppCRM -->
1460    <section id="appcrm" class="section-page">
1461        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
1462
1463<div class="likecheck-main-content">
1464    <div class="container-fluid p-0" style="width: 100%;">
1465        <div class="section-container active" id="appcrm-content" style="padding: 70px 0 60px; margin-top: 1px; background: #e8f4fc; width: 100%; position: relative; overflow: hidden;">
1466                <div class="container-fluid position-relative" style="z-index: 2; max-width: 98%; padding: 0 15px;">
1467                    <div class="row mb-5">
1468                    <div class="col-12 text-center">
1469                        <h2 style="color: #182c83; font-size: 2.5rem; font-weight: 700; text-transform: uppercase; margin-bottom: 2rem;">
1470                            APP & CRM
1471                        </h2>
1472                    </div>
1473                </div>
1474                <div class="row align-items-center mb-5" data-aos="fade-up">
1475                        <!-- Imagen App -->
1476                        <div class="col-lg-5 col-md-12 text-center mb-4 mb-lg-0" data-aos="fade-right">
1477                            <div class="image-container" style="position: relative; display: inline-block; max-width: 100%; overflow: visible;">
1478                                <img src="https://likephone.mx/resources/assets/images/likecheck/app.png" alt="App LikeCheck" class="app-image img-fluid" style="animation-delay: 0.2s;">               
1479                            </div>
1480                        </div>
1481                        <!-- Primer grupo de textos -->
1482                        <div class="col-lg-5 col-md-12">
1483                            <div class="feature-card" style="background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); border-radius: 15px; padding: 25px 20px; border: 1px solid rgba(201,226,255,0.8); font-size: 0.9rem; margin: 0 auto; max-width: 90%;">
1484                                <h2 style="font-family: 'Poppins', sans-serif; font-weight: 700; color: #1a73e8; text-align: center; margin: -10px 0 15px 0; padding-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; font-size: 1.5rem; border-bottom: 2px solid #e3f2fd;">Aplicación Móvil</h2>
1485                                <div class="feature-item"><div class="check-icon"><i class="fas fa-check" style="color: white; font-size: 0.85rem;"></i></div><p class="feature-text">Registro con geolocalización y selfie.</p></div>
1486                                <div class="feature-item"><div class="check-icon"><i class="fas fa-check" style="color: white; font-size: 0.85rem;"></i></div><p class="feature-text">Check-in en modo individual y grupal.</p></div>
1487                                <div class="feature-item"><div class="check-icon"><i class="fas fa-check" style="color: white; font-size: 0.85rem;"></i></div><p class="feature-text">Reloj checador sin dispositivo adicional.</p></div>
1488                                <div class="feature-item"><div class="check-icon"><i class="fas fa-check" style="color: white; font-size: 0.85rem;"></i></div><p class="feature-text">Geocercas por sucursal.</p></div>
1489                                <div class="feature-item"><div class="check-icon"><i class="fas fa-check" style="color: white; font-size: 0.85rem;"></i></div><p class="feature-text">Rondines con evidencias fotográficas y ubicación.</p></div>
1490                                <div class="feature-item"><div class="check-icon"><i class="fas fa-check" style="color: white; font-size: 0.85rem;"></i></div><p class="feature-text">Reportes de incidendentes laborales.</p></div>
1491                            </div>
1492                        </div>
1493                    </div>
1494
1495                    <div class="row align-items-center justify-content-center" data-aos="fade-up">
1496                        <!-- Segundo grupo de textos -->
1497                        <div class="col-lg-5 col-md-12 mb-4 mb-lg-0">
1498                            <div class="feature-card" style="background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); border-radius: 15px; padding: 25px 20px; border: 1px solid rgba(201,226,255,0.8); font-size: 0.9rem; margin: 0 auto; max-width: 90%;">
1499                                <h2 style="font-family: 'Poppins', sans-serif; font-weight: 700; color: #1a73e8; text-align: center; margin: -10px 0 15px 0; padding-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; font-size: 1.5rem; border-bottom: 2px solid #e3f2fd;">CRM Administrativo</h2>
1500                                <div class="feature-item"><div class="check-icon"><i class="fas fa-check" style="color: white; font-size: 0.85rem;"></i></div><p class="feature-text">Visualización de asistencias de personal.</p></div>
1501                                <div class="feature-item"><div class="check-icon"><i class="fas fa-check" style="color: white; font-size: 0.85rem;"></i></div><p class="feature-text">Registros de Prenomina.</p></div>
1502                                <div class="feature-item"><div class="check-icon"><i class="fas fa-check" style="color: white; font-size: 0.85rem;"></i></div><p class="feature-text">Asignación de supervisores por sucursal.</p></div>
1503                                <div class="feature-item"><div class="check-icon"><i class="fas fa-check" style="color: white; font-size: 0.85rem;"></i></div><p class="feature-text">Monitoreo de rondines.</p></div>
1504                                <div class="feature-item"><div class="check-icon"><i class="fas fa-check" style="color: white; font-size: 0.85rem;"></i></div><p class="feature-text">Publicación de noticias y vacantes.</p></div>
1505                                <div class="feature-item"><div class="check-icon"><i class="fas fa-check" style="color: white; font-size: 0.85rem;"></i></div><p class="feature-text">Integración con sistemas externos.</p></div>
1506                            </div>
1507                        </div>
1508                        <!-- Imagen CRM -->
1509                        <div class="col-lg-5 col-md-12 text-center" data-aos="fade-left">
1510                            <div class="image-container" style="position: relative; display: inline-block; max-width: 100%; overflow: visible;">
1511                                <div class="glow-effect" style="position: absolute; width: 160%; height: 160%; top: -30%; left: -30%; background: radial-gradient(circle at center, rgba(78,67,118,0.45), transparent 70%); filter: blur(50px); z-index: -1;"></div>
1512                                <img src="https://likephone.mx/resources/assets/images/likecheck/CRM Laptop.png" alt="CRM Dashboard" class="crm-image img-fluid" style="max-width: 100%; height: auto;">                              
1513                            </div>
1514                        </div>
1515                    </div>
1516
1517                    <div class="text-center mt-5" style="animation: slideUp 0.8s ease both 0.7s;">
1518                        <a href="https://calendar.app.google/1BqBxv9FwegrLZSD9" class="action-button" style="display: inline-block; background: linear-gradient(45deg, #00c6ff, #0072ff); color: white; font-weight: 600; padding: 15px 40px; border-radius: 50px; font-size: 1.2rem; text-decoration: none; box-shadow: 0 10px 20px rgba(0, 114, 255, 0.4); transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 1px;">
1519                            AGENDA TU DEMO <i class="fas fa-chevron-right"></i>
1520                        </a>
1521                    </div>
1522                </div>
1523                
1523<script>
1524                    document.addEventListener('DOMContentLoaded', function() {
1525                    const animatedElements = [
1526                        '.feature-item',
1527                        '.app-image',
1528                        '.crm-image',
1529                        '.section-title',
1530                        '.subtitle',
1531                        '.action-button',
1532                        '.feature-card',
1533                        '.feature-badge'
1534                    ];
1535                    function animateOnScroll() {
1536                        animatedElements.forEach(selector => {
1537                    const elements = document.querySelectorAll(selector);
1538                        elements.forEach(item => {
1539                    const position = item.getBoundingClientRect().top;
1540                    const screenPosition = window.innerHeight / 1.1;                                              
1541                    if (position < screenPosition) {
1542                        item.style.opacity = '1';
1543                        item.style.transform = 'translateY(0)';
1544                        item.classList.add('animated');
1545                        }
1546                        });
1547                        });
1548                        }
1549                    const featureItems = document.querySelectorAll('.feature-item');
1550                        featureItems.forEach(item => {
1551                        item.addEventListener('mouseenter', function() {
1552                        this.style.transform = 'translateY(-5px) scale(1.03)';
1553                    const checkIcon = this.querySelector('.check-icon');
1554                    if (checkIcon) {
1555                        checkIcon.style.transform = 'scale(1.2) rotate(10deg)';
1556                        }
1557                        });             
1558                        item.addEventListener('mouseleave', function() {
1559                        this.style.transform = '';
1560                    const checkIcon = this.querySelector('.check-icon');
1561                    if (checkIcon) {
1562                        checkIcon.style.transform = '';
1563                        }
1564                        });
1565                        });
1566                    function parallaxEffect() {
1567                    const decorationCircles = document.querySelectorAll('.decoration-circle');
1568                        window.addEventListener('mousemove', function(e) {
1569                    const x = e.clientX / window.innerWidth;
1570                    const y = e.clientY / window.innerHeight;                                           
1571                        decorationCircles.forEach((circle, index) => {
1572                    const speed = (index + 1) * 10;
1573                    const offsetX = (x - 0.5) * speed;
1574                    const offsetY = (y - 0.5) * speed;
1575                        circle.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
1576                        });
1577                        });
1578                        }
1579                    const actionButton = document.querySelector('.action-button');
1580                    if (actionButton) {
1581                        actionButton.addEventListener('mouseenter', function() {
1582                        this.style.transform = 'translateY(-3px) scale(1.05)';
1583                        this.style.boxShadow = '0 15px 25px rgba(0, 114, 255, 0.5)';
1584                        });         
1585                        actionButton.addEventListener('mouseleave', function() {
1586                        this.style.transform = '';
1587                        this.style.boxShadow = '';
1588                        });
1589                        }
1590                        animateOnScroll();
1591                        parallaxEffect();
1592                    let lastScrollTime = 0;
1593                        window.addEventListener('scroll', function() {
1594                    const now = Date.now();
1595                    if (now - lastScrollTime > 50) { // 50ms throttle
1596                        lastScrollTime = now;
1597                        animateOnScroll();
1598                        }
1599                        });
1600                    if (!CSS.supports('(backdrop-filter: blur(10px))')) {
1601                    const featureCard = document.querySelector('.feature-card');
1602                    if (featureCard) {
1603                        featureCard.style.background = 'rgba(43, 88, 118, 0.8)';
1604                        }                   
1605                    const featureItems = document.querySelectorAll('.feature-item');
1606                        featureItems.forEach(item => {
1607                        item.style.background = 'rgba(43, 88, 118, 0.4)';
1608                        });
1609                        }
1610                        });
1611                </script>
1611                 
1612            </div>
1613        </div>
1614        <style>
1615            @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');
1616            @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');
1617            @keyframes fadeIn {
1618                from { opacity: 0; }
1619                to { opacity: 1; }
1620            }
1621            @keyframes slideUp {
1622                from { transform: translateY(40px); opacity: 0; }
1623                to { transform: translateY(0); opacity: 1; }
1624            }
1625            @keyframes slideInLeft {
1626                from { transform: translateX(-50px); opacity: 0; }
1627                to { transform: translateX(0); opacity: 1; }
1628            }
1629            @keyframes slideInRight {
1630                from { transform: translateX(50px); opacity: 0; }
1631                to { transform: translateX(0); opacity: 1; }
1632            }
1633            @keyframes float {
1634                0%, 100% { transform: translateY(0); }
1635                50% { transform: translateY(-12px); }
1636            }
1637            @keyframes pulse {
1638                0% { transform: scale(1); }
1639                50% { transform: scale(1.05); }
1640                100% { transform: scale(1); }
1641            }
1642            @keyframes glow {
1643                0% { box-shadow: 0 0 10px rgba(101, 183, 255, 0.5); }
1644                50% { box-shadow: 0 0 20px rgba(101, 183, 255, 0.8); }
1645                100% { box-shadow: 0 0 10px rgba(101, 183, 255, 0.5); }
1646            }
1647            #appcrm-content {
1648                position: relative;
1649                z-index: 1;
1650                /* Se eliminó box-shadow para uniformidad visual */
1651            }
1652            .feature-item {
1653                margin-bottom: 25px;
1654                padding: 12px 15px;
1655                background: rgba(255, 255, 255, 0.9);
1656                border-radius: 12px;
1657                transition: all 0.3s ease;
1658                animation: slideUp 0.6s ease both;
1659                backdrop-filter: blur(5px);
1660                border: 1px solid rgba(201, 226, 255, 0.7);
1661                /* Se eliminó box-shadow para uniformidad visual */
1662                display: flex;
1663                align-items: center;
1664            }
1665            .feature-item:hover {
1666                transform: translateY(-5px);
1667                background: rgba(255, 255, 255, 1);
1668                /* Se eliminó box-shadow para uniformidad visual */
1669                border: 1px solid rgba(7, 153, 182, 0.3);
1670            }
1671            .feature-item:nth-child(1) { animation-delay: 0.1s; }
1672            .feature-item:nth-child(2) { animation-delay: 0.2s; }
1673            .feature-item:nth-child(3) { animation-delay: 0.3s; }
1674            .feature-item:nth-child(4) { animation-delay: 0.4s; }
1675            .feature-item:nth-child(5) { animation-delay: 0.5s; }
1676            .feature-item:nth-child(6) { animation-delay: 0.6s; }
1677            .check-icon {
1678                display: inline-flex;
1679                justify-content: center;
1680                align-items: center;
1681                width: 32px;
1682                height: 32px;
1683                min-width: 32px;
1684                background: linear-gradient(135deg, #00c6ff, #0072ff);
1685                border-radius: 50%;
1686                margin-right: 12px;
1687                /* Se eliminó box-shadow para uniformidad visual */
1688                position: relative;
1689                z-index: 1;
1690                transition: all 0.3s ease;
1691            }
1692            .feature-item:hover .check-icon {
1693                transform: scale(1.1) rotate(5deg);
1694            }
1695            .feature-text {
1696                margin: 0;
1697                color: #051440;
1698                font-size: 0.95rem;
1699                font-weight: 600;
1700                flex: 1;
1701            }
1702            .section-title {
1703                text-align: center;
1704                font-size: 3.2rem;
1705                font-weight: 800;
1706                color: #ffffff;
1707                margin-bottom: 50px;
1708                font-family: 'Montserrat', sans-serif;
1709                position: relative;
1710                text-transform: uppercase;
1711                letter-spacing: 2px;
1712                text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
1713                animation: fadeIn 1s ease both;
1714            }
1715            .section-title:after {
1716                content: "";
1717                position: absolute;
1718                bottom: -15px;
1719                left: 50%;
1720                transform: translateX(-50%);
1721                width: 80px;
1722                height: 5px;
1723                background: linear-gradient(90deg, #00c6ff, #0072ff);
1724                border-radius: 5px;
1725            }
1726            .app-image {
1727                max-height: 1100px;
1728                width: auto;
1729                min-width: 380px;
1730                display: inline-block;
1731                object-fit: contain;
1732            }
1733            .crm-image {
1734                max-height: 1100px;
1735                width: auto;
1736                min-width: 380px;
1737                display: inline-block;
1738                object-fit: contain;
1739            }
1740        </style>
1741    </div>
1742    </section>
1743
1744    <!-- Sección: Planes -->
1745    <section id="planes" class="section-page">
1746        <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;700&display=swap" rel="stylesheet">
1747<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&display=swap" rel="stylesheet">
1748
1749<div class="likecheck-main-content">
1750    <!-- TITULO -->
1751    <p style="font-size: 3.2rem; font-weight: 900; color: #1A2A80; text-align: center; letter-spacing: 1px; margin-top: 30px;">
1752        PLANES LIKECHECK </span>
1753    </p>
1754    <!-- PLANES -->
1755    <div class="row justify-content-center" style="margin-bottom: 70px; font-family: 'Rubik', sans-serif; gap: 20px; flex-wrap: wrap; display: flex;">
1756        <!-- Plan Mensual -->
1757        <div class="col-md-4 mb-4" style="display:flex;justify-content:center;flex:1 1 300px;max-width:310px;">
1758            <div class="plan-card" style="border:2px solid #182c83;border-radius:18px;padding:35px 20px;text-align:center;background:white;box-shadow:0 5px 20px rgba(0,0,0,0.08);transition:transform 0.3s ease,box-shadow 0.3s ease;width:100%;max-width:300px;">
1759            <div style="margin-bottom:14px;color:#182c83;"><i class="fas fa-calendar-alt" style="font-size:1.6rem;"></i></div>
1760            <div style="background:linear-gradient(90deg,#153ebc 0%,#325de6 100%);color:white;font-weight:700;font-size:1.3rem;padding:14px 0;border-radius:6px;margin-bottom:28px;">Plan Mensual</div>
1761            <div style="display:flex;justify-content:center;align-items:flex-start;gap:4px;margin-bottom:4px;">
1762                <span style="font-size:4rem;font-weight:800;color:#153ebc;">$35</span>
1763                <span style="color:#153ebc;font-weight:600;align-self:flex-end;">MXN<br><span style="color:#6073a6;font-weight:600;">+IVA</span></span>
1764            </div>
1765            </div>
1766        </div>
1767        <!-- Plan Semestral -->
1768        <div class="col-md-4 mb-4" style="display:flex;justify-content:center;flex:1 1 300px;max-width:310px;">
1769            <div class="plan-card" style="border:2px solid #182c83;border-radius:18px;padding:35px 20px;text-align:center;background:white;box-shadow:0 5px 20px rgba(0,0,0,0.08);transition:transform 0.3s ease,box-shadow 0.3s ease;width:100%;max-width:300px;">
1770            <div style="margin-bottom:14px;color:#182c83;"><i class="fas fa-calendar-check" style="font-size:1.6rem;"></i></div>
1771            <div style="background:linear-gradient(90deg,#153ebc 0%,#325de6 100%);color:white;font-weight:700;font-size:1.3rem;padding:14px 0;border-radius:6px;margin-bottom:28px;">Plan Semestral</div>
1772            <div style="display:flex;justify-content:center;align-items:flex-start;gap:4px;margin-bottom:4px;">
1773                <span style="font-size:4rem;font-weight:800;color:#153ebc;">$180</span>
1774                <span style="color:#153ebc;font-weight:600;align-self:flex-end;">MXN<br><span style="color:#6073a6;font-weight:600;">+IVA</span></span>
1775            </div>
1776            <div style="color:#455a64;font-weight:500;margin-top:12px;">Equivalente a $30 MXN/MES</div>
1777            </div>
1778        </div>
1779        <!-- Plan Anual -->
1780        <div class="col-md-4 mb-4" style="display:flex;justify-content:center;flex:1 1 300px;max-width:310px;">
1781            <div class="plan-card" style="border:2px solid #182c83;border-radius:18px;padding:35px 20px;text-align:center;background:white;box-shadow:0 5px 20px rgba(0,0,0,0.08);transition:transform 0.3s ease,box-shadow 0.3s ease;position:relative;overflow:hidden;width:100%;max-width:300px;">
1782            <!-- Cinta amarilla -->
1783            <div style="position:absolute;top:18px;right:-55px;background:#FFCA28;color:white;font-weight:700;font-size:0.85rem;padding:6px 60px;transform:rotate(45deg);box-shadow:0 3px 6px rgba(0,0,0,0.15);letter-spacing:0.5px;z-index:2;">
1784                MEJOR PLAN
1785            </div>
1786            <div style="margin-bottom:14px;color:#182c83;"><i class="fas fa-calendar" style="font-size:1.6rem;"></i></div>
1787            <div style="background:linear-gradient(90deg,#153ebc 0%,#325de6 100%);color:white;font-weight:700;font-size:1.3rem;padding:14px 0;border-radius:6px;margin-bottom:28px;">Plan Anual</div>
1788            <div style="display:flex;justify-content:center;align-items:flex-start;gap:4px;margin-bottom:4px;">
1789                <span style="font-size:4rem;font-weight:800;color:#153ebc;">$300</span>
1790                <span style="color:#153ebc;font-weight:600;align-self:flex-end;">MXN<br><span style="color:#6073a6;font-weight:600;">+IVA</span></span>
1791            </div>
1792            <div style="color:#455a64;font-weight:500;margin-top:12px;">Equivalente a $25 MXN/MES</div>
1793            </div>
1794        </div>
1795    </div>
1796    <!-- Sección de Promoción e Imagen -->
1797    <div style="display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; background-color: #eaf5ff; padding: 60px 20px; text-align: center;">
1798        <!-- Columna Izquierda -->
1799        <div style="flex: 1 1 360px; text-align: center;">
1800            <!-- Promoción Limitada -->
1801            <div style="display: inline-flex; align-items: center; justify-content: center; background: #f4f9ff; border-radius: 12px; padding: 10px 25px; box-shadow: 0 4px 12px rgba(30,136,229,0.2); margin-bottom: 15px;">
1802            <i class="fas fa-bullhorn" style="color: #1e88e5; font-size: 1.1rem; margin-right: 8px;"></i>
1803            <span style="font-size: 0.95rem; font-weight: 700; color: #1e88e5; letter-spacing: 1px; text-transform: uppercase;">PROMOCIÓN LIMITADA</span>
1804            </div>
1805
1806            <!-- Imagen del sello -->
1807            <div style="margin-top: 5px;">
1808            <img src="https://likephone.mx/resources/assets/images/likecheck/0.png" alt="2° mes GRATIS" style="width: 310px; max-width: 100%;">
1809            </div>
1810        </div>
1811        <!-- Columna Derecha -->
1812        <div style="flex: 1 1 400px; display: flex; justify-content: flex-start;">
1813            <div style="background: #ffffff; padding: 35px 40px; border-radius: 18px; box-shadow: 0 4px 18px rgba(0,0,0,0.08); text-align: left;">
1814
1815            <h3 style="font-weight: 800; font-size: 1.9rem; color: #14287B; margin-bottom: 22px;">Beneficios sin cargos:</h3>
1816
1817            <!-- Lista de beneficios -->
1818            <div style="display: flex; flex-direction: column; gap: 12px;">
1819                <div style="display: flex; align-items: center;">
1820                <i class="fas fa-check-circle" style="color: #2ecc71; font-size: 1.3rem; margin-right: 8px;"></i>
1821                <span style="color: #14287B; font-size: 1.05rem; font-weight: 600;">Capacitación</span>
1822                </div>
1823
1824                <div style="display: flex; align-items: center;">
1825                <i class="fas fa-check-circle" style="color: #2ecc71; font-size: 1.3rem; margin-right: 8px;"></i>
1826                <span style="color: #14287B; font-size: 1.05rem; font-weight: 600;">Soporte</span>
1827                </div>
1828
1829                <div style="display: flex; align-items: center;">
1830                <i class="fas fa-check-circle" style="color: #2ecc71; font-size: 1.3rem; margin-right: 8px;"></i>
1831                <span style="color: #14287B; font-size: 1.05rem; font-weight: 600;">App de Supervisor</span>
1832                </div>
1833
1834                <div style="display: flex; align-items: center;">
1835                <i class="fas fa-check-circle" style="color: #2ecc71; font-size: 1.3rem; margin-right: 8px;"></i>
1836                <span style="color: #14287B; font-size: 1.05rem; font-weight: 600;">Usuarios de CRM Administrativo ilimitados</span>
1837                </div>
1838
1839                <div style="display: flex; align-items: center;">
1840                <i class="fas fa-check-circle" style="color: #2ecc71; font-size: 1.3rem; margin-right: 8px;"></i>
1841                <span style="color: #14287B; font-size: 1.05rem; font-weight: 600;">Acceso a todas las funcionalidades</span>
1842                </div>
1843
1844                <div style="display: flex; align-items: center;">
1845                <i class="fas fa-check-circle" style="color: #2ecc71; font-size: 1.3rem; margin-right: 8px;"></i>
1846                <span style="color: #14287B; font-size: 1.05rem; font-weight: 600;">Implementación Gratuita</span>
1847                </div>
1848
1849                <div style="display: flex; align-items: center;">
1850                <i class="fas fa-check-circle" style="color: #2ecc71; font-size: 1.3rem; margin-right: 8px;"></i>
1851                <span style="color: #14287B; font-size: 1.05rem; font-weight: 600;">Acompañamiento completo</span>
1852                </div>
1853            </div>
1854
1855            </div>
1856        </div>
1857    </div>
1858    
1859</div>    </section>
1860
1861    <!-- Sección: Cotizador -->
1862    <section id="cotizador" class="section-page">
1863        <div class="section-container" id="cotizador-content" style="padding: 40px 0 80px; background: #e8f4fc; position: relative; overflow: hidden;">
1864    <div class="row mb-5">
1865        <div class="col-12 text-center">
1866            <h2 style="color: #182c83; font-size: 2.5rem; font-weight: 700; text-transform: uppercase; margin-bottom: 2rem; padding-top: 20px;">
1867                COTIZADOR
1868            </h2>
1869        </div>
1870    </div>
1871    <div style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0MCcgaGVpZ2h0PSc0MCcgdmlld0JveD0nMCAwIDQwIDQwJz48ZyBmaWxsPScjMDc5OWI2JyBmaWxsLW9wYWNpdHk9JzAuMDMnPjxwYXRoIGQ9J00yMCAyMGMwLTkuOTQtOC4wNi0yMC0yMC0yMGg0MHYyMHMtOC4wNiAwLTIwIDB6Jy8+PC9nPjwvc3ZnPg=='); z-index: 0; opacity: 0.6;"></div>
1872        <div class="container text-center">
1873            <div class="row justify-content-center">
1874                <div class="col-lg-10">
1875                    <div class="mb-5" style="animation: fadeInDown 0.8s ease-out both;">
1876                        <div class="text-center mb-3" style="font-size: 1.4rem; font-weight: 600; color: #182c83; font-family: 'Montserrat', sans-serif; position: relative; display: inline-block;">
1877                            <i class="fas fa-coins" style="margin-right: 8px; color: #0799B6;"></i>Moneda
1878                            <div style="position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); width: 40px; height: 3px; background: linear-gradient(90deg, #0799B6, #182c83); border-radius: 2px;"></div>
1879                        </div>
1880                        <div class="form-group">
1881                            <div class="currency-selector" style="max-width: 300px; margin: 10px auto; border: none; border-radius: 12px; background-color: white; overflow: hidden; position: relative; height: 54px; cursor: pointer; box-shadow: 0 6px 16px rgba(7, 153, 182, 0.15); transition: all 0.3s ease;">
1882                                <div style="position: absolute; left: 0; top: 0; height: 100%; width: 5px; background: linear-gradient(to bottom, #0799B6, #182c83);"></div>
1883                                    <div style="display: flex; align-items: center; justify-content: center; height: 100%; padding: 0 20px; font-weight: 600; color: #182c83; font-size: 1.2rem;">
1884                                        <span>Peso Mexicano ($)</span>
1885                                    </div>
1886                                    <div class="selector-icon" style="position: absolute; right: 15px; top: 50%; transform: translateY(-50%); pointer-events: none; z-index: 1;">
1887                                        <span style="background: linear-gradient(135deg, #0799B6, #182c83); border: none; border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;"><i class="fas fa-check" style="color: white; font-size: 0.8rem;"></i></span>
1888                                    </div>
1889                                </div>
1890                            </div>
1891                            
1891<script>
1892                                document.querySelector('.currency-selector').addEventListener('mouseenter', function() {
1893                                    this.style.transform = 'translateY(-3px)';
1894                                    this.style.boxShadow = '0 10px 20px rgba(7, 153, 182, 0.2)';
1895                                });
1896                                document.querySelector('.currency-selector').addEventListener('mouseleave', function() {
1897                                    this.style.transform = '';
1898                                    this.style.boxShadow = '0 6px 16px rgba(7, 153, 182, 0.15)';
1899                                });
1900                                </script>
1900
1901                            </div>
1902                            <div class="row mt-5">
1903                                <div class="col-md-6">
1904                                    <div style="background: linear-gradient(135deg, #0799B6, #182c83); border-radius: 20px; padding: 25px; box-shadow: 0 10px 30px rgba(7, 153, 182, 0.25); animation: fadeInLeft 1s ease-out both; transition: all 0.4s ease; position: relative; overflow: hidden;" class="config-panel hover-lift">                                     
1905                                        <div style="position: absolute; top: 0; right: 0; width: 150px; height: 150px; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%); border-radius: 50%; z-index: 1;"></div>
1906                                        <div class="d-flex align-items-center mb-4">
1907                                            <div style="background: rgba(255,255,255,0.2); width: 40px; height: 40px; border-radius: 12px; display: flex; justify-content: center; align-items: center; margin-right: 12px;">
1908                                                <i class="fas fa-sliders-h" style="color: white; font-size: 1.2rem;"></i>
1909                                            </div>
1910                                            <h3 style="color: white; font-weight: 600; font-size: 1.4rem; margin: 0; font-family: 'Montserrat', sans-serif;">Configurar Plan</h3>
1911                                        </div>                               
1912                                        <div style="margin-bottom: 25px;">
1913                                            <div style="color: white; font-size: 1rem; margin-bottom: 10px; opacity: 0.9; font-family: 'Montserrat', sans-serif;">Selecciona periodicidad:</div>
1914                                            <div class="period-selector d-flex justify-content-between" style="background: rgba(255,255,255,0.1); border-radius: 12px; padding: 5px; position: relative;">
1915                                                <button class="period-btn active" data-frequency="Mensual" data-price="35" style="flex: 1; border: none; background: white; border-radius: 10px; padding: 12px 5px; margin: 0 3px; font-weight: 600; color: #0799B6; font-size: 0.9rem; position: relative; z-index: 1; transition: all 0.3s ease; box-shadow: 0 3px 8px rgba(0,0,0,0.1);">
1916                                                    <div style="position: relative; z-index: 2;">Mensual</div>
1917                                                </button>
1918                                                <button class="period-btn" data-frequency="Semestral" data-price="180" style="flex: 1; border: none; background: rgba(255,255,255,0.2); border-radius: 10px; padding: 12px 5px; margin: 0 3px; font-weight: 600; color: white; font-size: 0.9rem; transition: all 0.3s ease;">
1919                                                    <div style="position: relative; z-index: 2;">Semestral</div>
1920                                                </button>
1921                                                <button class="period-btn" data-frequency="Anual" data-price="300" style="flex: 1; border: none; background: rgba(255,255,255,0.2); border-radius: 10px; padding: 12px 5px; margin: 0 3px; font-weight: 600; color: white; font-size: 0.9rem; transition: all 0.3s ease;">
1922                                                    <div style="position: relative; z-index: 2;">Anual</div>
1923                                                </button>
1924                                            </div>
1925                                        </div>
1926                                        <div style="background: rgba(255,255,255,0.1); border-radius: 15px; padding: 20px 15px; margin-bottom: 20px; animation: fadeIn 0.8s ease-out 0.4s both;">
1927                                            <h3 style="color: white; font-weight: 500; font-size: 1.1rem; text-align: center; margin-bottom: 15px; font-family: 'Montserrat', sans-serif;">
1928                                                <i class="fas fa-users" style="margin-right: 8px; opacity: 0.9;"></i>Número de colaboradores
1929                                            </h3>
1930                                            <div class="counter-container d-flex justify-content-center align-items-center" style="background: linear-gradient(to right, rgba(255,255,255,0.2), rgba(255,255,255,0.1)); border-radius: 15px; padding: 12px; position: relative; overflow: hidden;">
1931                                                <button class="btn btn-circle minus-btn" style="width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.95); color: #0799B6; font-size: 1.4rem; display: flex; align-items: center; justify-content: center; margin-right: 20px; transition: all 0.3s ease; box-shadow: 0 4px 8px rgba(0,0,0,0.1); border: none; font-weight: bold; animation: bounceIn 0.6s 0.1s both;">
1932                                                    <i class="fas fa-minus" style="font-size: 0.8rem;"></i>
1933                                                </button>
1934                                                <div style="position: relative;">
1935                                                    <span class="counter-number" contenteditable="true" inputmode="numeric" style="font-size: 3.2rem; font-weight: 700; color: white; padding: 0 20px; animation: fadeIn 1s both; display: inline-block; min-width: 90px; text-align: center; text-shadow: 0 2px 4px rgba(0,0,0,0.1); font-family: 'Montserrat', sans-serif;">1</span>
1936                                                    <div style="position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 60%; height: 4px; background: rgba(255,255,255,0.4); border-radius: 2px;"></div>
1937                                                </div>
1938                                                <button class="btn btn-circle plus-btn" style="width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.95); color: #0799B6; font-size: 1.4rem; display: flex; align-items: center; justify-content: center; margin-left: 20px; transition: all 0.3s ease; box-shadow: 0 4px 8px rgba(0,0,0,0.1); border: none; font-weight: bold; animation: bounceIn 0.6s both;">
1939                                                    <i class="fas fa-plus" style="font-size: 0.8rem;"></i>
1940                                                </button>
1941                                            </div>
1942                                        </div>
1943                                        <div class="likephone-option d-flex justify-content-between align-items-center" style="background: rgba(255,255,255,0.95); border-radius: 12px; padding: 15px; transition: all 0.3s ease; animation: fadeIn 0.8s ease-out 0.6s both; cursor: pointer;">
1944                                            <div class="d-flex align-items-center">
1945                                                <div style="background: linear-gradient(135deg, #0799B6, #182c83); width: 36px; height: 36px; border-radius: 10px; display: flex; justify-content: center; align-items: center; margin-right: 15px;">
1946                                                    <i class="fas fa-mobile-alt" style="color: white;"></i>
1947                                                </div>
1948                                                <span style="font-weight: 600; color: #182c83; font-size: 1.1rem; font-family: 'Montserrat', sans-serif;">Líneas LikePhone</span>
1949                                            </div>
1950                                            <div class="toggle-switch" tabindex="0" style="background-color: #ccc; width: 50px; height: 26px; border-radius: 13px; position: relative; transition: all 0.3s ease; box-shadow: inset 0 0 5px rgba(0,0,0,0.2); cursor: pointer; pointer-events: auto;">
1951                                                <div class="toggle-knob" style="position: absolute; width: 20px; height: 20px; background-color: white; border-radius: 50%; top: 3px; left: 3px; right: auto; transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.2);"></div>
1952                                            </div>
1953                                        </div>                             
1954                                        <div style="background: rgba(255,255,255,0.1); border-radius: 15px; padding: 20px 15px; margin-bottom: 20px; margin-top: 20px; display: none; animation: fadeIn 0.8s ease-out 0.5s both;">
1955                                            <h3 style="color: white; font-weight: 500; font-size: 1.1rem; text-align: center; margin-bottom: 15px; font-family: 'Montserrat', sans-serif;">
1956                                                <i class="fas fa-mobile-alt" style="margin-right: 8px; opacity: 0.9;"></i>Número de líneas Likephone
1957                                            </h3>
1958                                            <div class="likephone-counter-container d-flex justify-content-center align-items-center" style="background: linear-gradient(to right, rgba(255,255,255,0.2), rgba(255,255,255,0.1)); border-radius: 15px; padding: 12px; position: relative; overflow: hidden;">
1959                                                <button class="btn btn-circle likephone-minus-btn" style="width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.95); color: #0799B6; font-size: 1.4rem; display: flex; align-items: center; justify-content: center; margin-right: 20px; transition: all 0.3s ease; box-shadow: 0 4px 8px rgba(0,0,0,0.1); border: none; font-weight: bold; animation: bounceIn 0.6s 0.2s both;">
1960                                                    <i class="fas fa-minus" style="font-size: 0.8rem;"></i>
1961                                                </button>
1962                                                <div style="position: relative;">
1963                                                    <span class="likephone-counter-number" contenteditable="true" inputmode="numeric" style="font-size: 2.4rem; font-weight: 700; color: white; padding: 0 20px; animation: fadeIn 1s both; display: inline-block; min-width: 70px; text-align: center; text-shadow: 0 2px 4px rgba(0,0,0,0.05); font-family: 'Montserrat', sans-serif;">0</span>
1964                                                    <div style="position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 60%; height: 4px; background: rgba(255,255,255,0.4); border-radius: 2px;"></div>
1965                                                </div>
1966                                                <button class="btn btn-circle likephone-plus-btn" style="width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.95); color: #0799B6; font-size: 1.4rem; display: flex; align-items: center; justify-content: center; margin-left: 20px; transition: all 0.3s ease; box-shadow: 0 4px 8px rgba(0,0,0,0.1); border: none; font-weight: bold; animation: bounceIn 0.6s 0.2s both;">
1967                                                    <i class="fas fa-plus" style="font-size: 0.8rem;"></i>
1968                                                </button>
1969                                            </div>
1970                                        </div>                                   
1971                                    </div>
1972                                </div>                             
1973                                <div class="col-md-6">
1974                                    <div style="background: white; color: #182c83; border-radius: 20px; padding: 30px; height: 100%; box-shadow: 0 10px 30px rgba(0,0,0,0.1); animation: fadeInRight 1s ease-out both; transition: all 0.4s ease; position: relative; overflow: hidden;" class="summary-panel hover-lift">
1975                                        <div style="position: absolute; top: 0; left: 0; width: 100%; height: 6px; background: linear-gradient(90deg, #0799B6, #182c83); border-radius: 3px 3px 0 0;"></div>                                            
1976                                        <div class="text-center mb-4">
1977                                            <div style="display: inline-block; position: relative;">
1978                                                <h3 style="margin-bottom: 0; font-weight: 700; font-size: 2rem; text-align: center; font-family: 'Montserrat', sans-serif; background: linear-gradient(90deg, #0799B6, #182c83); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;">Tu Plan LikeCheck</h3>
1979                                                <div style="position: absolute; bottom: -5px; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, #0799B6, transparent); border-radius: 2px;"></div>
1980                                            </div>
1981                                        </div>
1982                                        <div style="border: 2px solid #f0f4f8; border-radius: 12px; padding: 20px; position: relative; margin-bottom: 20px; background: linear-gradient(145deg, #f8fbff, #f0f4f8); box-shadow: 0 3px 12px rgba(7, 153, 182, 0.05);">
1983                                            <ul class="list-unstyled" style="margin-bottom: 0;" id="benefits-list">
1984                                                <li style="margin-bottom: 16px; display: flex; align-items: center; opacity: 0; transform: translateX(20px);">
1985                                                    <div style="min-width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #0799B6, #182c83); display: flex; align-items: center; justify-content: center; margin-right: 12px; box-shadow: 0 3px 8px rgba(7, 153, 182, 0.2);">
1986                                                        <i class="fas fa-users" style="color: white; font-size: 0.9rem;"></i>
1987                                                    </div>
1988                                                    <span id="employee-count-display" style="font-weight: 600; color: #182c83; font-size: 1.05rem; font-family: 'Montserrat', sans-serif;">1 empleado</span>
1989                                                </li>
1990                                                <li style="margin-bottom: 16px; display: flex; align-items: start; opacity: 0; transform: translateX(20px);">
1991                                                    <div style="min-width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #0799B6, #182c83); display: flex; align-items: center; justify-content: center; margin-right: 12px; margin-top: 2px; box-shadow: 0 3px 8px rgba(7, 153, 182, 0.2);">
1992                                                        <i class="fas fa-fingerprint" style="color: white; font-size: 0.9rem;"></i>
1993                                                    </div>
1994                                                    <span style="font-weight: 600; color: #182c83; font-size: 1.05rem; line-height: 1.4; font-family: 'Montserrat', sans-serif;">Control con reconocimiento facial y geolocalización inteligente</span>
1995                                                </li>
1996                                                <li style="margin-bottom: 0; display: flex; align-items: center; opacity: 0; transform: translateX(20px);">
1997                                                    <div style="min-width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #0799B6, #182c83); display: flex; align-items: center; justify-content: center; margin-right: 12px; box-shadow: 0 3px 8px rgba(7, 153, 182, 0.2);">
1998                                                        <i class="fas fa-calendar-alt" style="color: white; font-size: 0.9rem;"></i>
1999                                                    </div>
2000                                                     <span id="frequency-display" style="font-weight: 600; color: #182c83; font-size: 1.05rem; font-family: 'Montserrat', sans-serif;">Frecuencia de pago: Mensual</span>
2001                                                </li>
2002                                            </ul>
2003                                        </div>
2004                                        <div style="margin-top: 25px; background: linear-gradient(135deg, #0799B6, #182c83); border-radius: 12px; padding: 18px; position: relative; box-shadow: 0 8px 20px rgba(7, 153, 182, 0.25); ">
2005                                            <div class="d-flex justify-content-between align-items-center">
2006                                                <span style="font-weight: 600; font-size: 1.2rem; color: white; font-family: 'Montserrat', sans-serif;">Total a pagar</span>
2007                                                <div style="background-color: rgba(255,255,255,0.95); border-radius: 8px; padding: 8px 16px; font-weight: 700; position: relative; box-shadow: 0 4px 10px rgba(0,0,0,0.1);">
2008                                                    <span id="total-price" style="background: linear-gradient(90deg, #0799B6, #182c83); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-size: 1.5rem; font-family: 'Montserrat', sans-serif;">$875</span>
2009                                                </div>
2010                                            </div>
2011                                        </div>
2012                                        <div class="likephone-note" style="font-size: 0.97rem; color: #444; margin-top: 8px; margin-bottom: 8px; display: none;">
2013                                            <strong>Nota:</strong> Por cada compra de 1 linea Likephone se descuenta a 1 usuario Likecheck.
2014                                            Solo aplica si se mantiene una recarga activa de la línea contratada.
2015                                        </div>
2016                                        <div class="likephone-new-amount-container" style="
2017                                            margin-top: 18px;
2018                                            background: linear-gradient(90deg, #0799B6 0%, #182c83 100%);
2019                                            border-radius: 18px;
2020                                            padding: 20px 24px;
2021                                            position: relative;
2022                                            box-shadow: 0 8px 20px rgba(7, 153, 182, 0.12);
2023                                            display: none;
2024                                            flex-wrap: wrap; /* Permite que los elementos bajen si no caben */
2025                                            justify-content: space-between;
2026                                            align-items: center;
2027                                            animation: fadeIn 1s both, pulse 2s infinite;
2028                                            animation-delay: 1.5s;
2029                                            max-width: 100%;
2030                                            box-sizing: border-box;
2031                                            ">
2032                                            <span style="
2033                                                font-weight: 700;
2034                                                font-size: 1.35rem;
2035                                                color: #fff;
2036                                                font-family: 'Montserrat', sans-serif;
2037                                                letter-spacing: 0.01em;
2038                                                flex: 1;
2039                                                min-width: 150px;
2040                                            ">
2041                                                Nuevo monto Likephone
2042                                            </span>
2043                                            <span id="likecheck-new-amount" style="
2044                                                background: #fff;
2045                                                color: #0799B6;
2046                                                font-weight: 700;
2047                                                font-size: 1.8rem;
2048                                                border-radius: 12px;
2049                                                padding: 8px 16px; /* REDUCIDO de 32px */
2050                                                margin-left: 20px;
2051                                                font-family: 'Montserrat', sans-serif;
2052                                                box-shadow: 0 2px 8px rgba(7,153,182,0.12);
2053                                                display: inline-block;
2054                                                min-width: 110px;
2055                                                text-align: center;
2056                                                word-break: break-word;
2057                                                max-width: 100%;
2058                                            ">
2059                                                $0
2060                                            </span>
2061                                        </div>
2062                                        <a href="https://wa.link/fdpuvy" target="_blank" class="btn btn-success mt-2" style="background-color: #25D366; border: none; color: white; font-weight: bold; border-radius: 24px; padding: 10px 24px; font-size: 1.05rem; box-shadow: 0 2px 8px rgba(7,153,182,0.08);">
2063                                            Contactar un ejecutivo Likephone para cotizar <i class="fab fa-whatsapp"></i>
2064                                        </a>
2065                                    </div>
2066                                </div>
2067                            </div>
2068                            
2068<script>
2069                                 document.addEventListener('DOMContentLoaded', function() {
2070                                    const benefits = document.querySelectorAll('#benefits-list li');
2071                                    benefits.forEach((benefit, index) => {
2072                                        setTimeout(() => {
2073                                            benefit.style.opacity = '1';
2074                                            benefit.style.transform = 'translateX(0)';
2075                                            benefit.style.transition = 'all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275)';
2076                                        }, 800 + (index * 250));
2077                                    });
2078                                    
2079                                    // Definir variables para los botones primero
2080                                    const plusBtn = document.querySelector('.plus-btn');
2081                                    const minusBtn = document.querySelector('.minus-btn');
2082                                    const counterNumber = document.querySelector('.counter-number');
2083                                    
2084                                    if (plusBtn && minusBtn && counterNumber) {
2085                                        [plusBtn, minusBtn].forEach(btn => {
2086                                            btn.addEventListener('mouseenter', function() {
2087                                                this.style.transform = 'scale(1.1)';
2088                                                this.style.boxShadow = '0 6px 12px rgba(0,0,0,0.15)';
2089                                            });
2090                                            btn.addEventListener('mouseleave', function() {
2091                                                this.style.transform = 'scale(1)';
2092                                                this.style.boxShadow = '0 4px 8px rgba(0,0,0,0.1)';
2093                                            });
2094                                        });
2095                                        function updateCounter(value) {
2096                                            counterNumber.style.transform = 'translateY(-10px)';
2097                                            counterNumber.style.opacity = '0.5';                     
2098                                            setTimeout(() => {
2099                                                counterNumber.textContent = value;
2100                                                counterNumber.style.transform = 'translateY(0)';
2101                                                counterNumber.style.opacity = '1';
2102                                                if (employeesText) {
2103                                                    const texto = value === 1 ? ' empleado' : ' empleados';
2104                                                    employeesText.innerHTML = value + texto;
2105                                                }
2106                                            }, 200);
2107                                        }
2108                                    }
2109                                    const likePhoneOption = document.querySelector('.likephone-option');
2110                                    const toggleSwitch = document.querySelector('.toggle-switch');
2111                                    const likephoneCounterContainer = document.querySelector('.likephone-counter-container').parentElement;
2112                                    const likephoneNewAmountContainer = document.querySelector('.likephone-new-amount-container');
2113                                    const likePhoneNote = document.querySelector('.likephone-note');
2114                                    let likePhoneActive = false;
2115                                     window.likePhoneActive = likePhoneActive;
2116                                    if (likephoneCounterContainer) {
2117                                        likephoneCounterContainer.style.display = 'none';
2118                                        }
2119                                    if (likephoneNewAmountContainer) {
2120                                         likephoneNewAmountContainer.style.display = 'none';
2121                                        }
2122                                   if (likePhoneNote) {
2123                                         likePhoneNote.style.display = 'none';
2124                                        }
2125                                     function updateLikeCheckAmount() {
2126                                    if (typeof window.updateLikeCheckAmount === 'function') {
2127                                    return window.updateLikeCheckAmount();
2128                                        }
2129                                    let colaboradores = parseInt(counterNumber ? counterNumber.textContent : '1');
2130                                    let lineas = 0;
2131                                    if (likePhoneActive) {
2132                                        lineas = parseInt(document.querySelector('.likephone-counter-number') ? document.querySelector('.likephone-counter-number').textContent : '0') || 0;
2133                                        }               
2134                                    let descuentan = lineas;
2135                                    let nuevosColaboradores = Math.max(colaboradores - descuentan, 0);
2136                                    let nuevoTotal = nuevosColaboradores * currentPrice;      
2137                                    let formatted = new Intl.NumberFormat('es-MX', { style: 'currency', currency: 'MXN', minimumFractionDigits: 0, maximumFractionDigits: 0 }).format(nuevoTotal);
2138                                    if (likecheckNewAmount) {
2139                                        likecheckNewAmount.textContent = formatted;
2140                                        }
2141                                        }                               
2142                                    if (likePhoneOption && toggleSwitch) {
2143                                        likePhoneOption.addEventListener('click', function() {
2144                                        likePhoneActive = !likePhoneActive;
2145                                        window.likePhoneActive = likePhoneActive;                                   
2146                                    if (likePhoneActive) {
2147                                        toggleSwitch.style.backgroundColor = '#4caf50';
2148                                        toggleSwitch.querySelector('.toggle-knob').style.right = '3px';
2149                                        toggleSwitch.querySelector('.toggle-knob').style.left = 'auto';                                          
2150                                    if (likephoneCounterContainer) {
2151                                        likephoneCounterContainer.style.display = 'block';
2152                                        }
2153                                    if (likephoneNewAmountContainer) {
2154                                        likephoneNewAmountContainer.style.display = 'flex';
2155                                        }
2156                                    if (likePhoneNote) {
2157                                        likePhoneNote.style.display = 'block';
2158                                        }                                              
2159                                    const likephoneCounterNumber = document.querySelector('.likephone-counter-number');
2160                                    if (likephoneCounterNumber && (parseInt(likephoneCounterNumber.textContent) || 0) < 1) {
2161                                        likephoneCounterNumber.textContent = '1';                                           
2162                                        updateLikeCheckAmount();
2163                                        }
2164                                    }else {
2165                                        toggleSwitch.style.backgroundColor = '#ccc';
2166                                        toggleSwitch.querySelector('.toggle-knob').style.right = 'auto';
2167                                        toggleSwitch.querySelector('.toggle-knob').style.left = '3px';                                     
2168                                    if (likephoneCounterContainer) {
2169                                        likephoneCounterContainer.style.display = 'none';
2170                                        }
2171                                    if (likephoneNewAmountContainer) {
2172                                        likephoneNewAmountContainer.style.display = 'none';
2173                                        }
2174                                    if (likePhoneNote) {
2175                                        likePhoneNote.style.display = 'none';
2176                                        }
2177                                    const likephoneCounterNumber = document.querySelector('.likephone-counter-number');
2178                                    if (likephoneCounterNumber) {
2179                                        likephoneCounterNumber.textContent = '0';
2180                                        }
2181                                        }                            
2182                                         updateLikeCheckAmount();
2183                                        });
2184                                    }
2185                                });
2186                            </script>
2186                        
2187                            <div class="mt-5 text-center">
2188                                <a href="https://calendar.app.google/1BqBxv9FwegrLZSD9" class="btn btn-primary" style="background-color: white; color: #0799B6; border: 2px solid #0799B6; border-radius: 30px; padding: 12px 30px; font-weight: bold; font-size: 1.2rem; display: inline-block; transition: all 0.3s ease; animation: pulse 2s infinite; animation-delay: 2s;">
2189                                    AGENDA TU DEMO <i class="fas fa-chevron-right" style="margin-left: 10px; background-color: #0799B6; color: white; border-radius: 50%; padding: 5px; transition: transform 0.3s ease;"></i>
2190                                </a>
2191                            </div>
2192                        </div>
2193                    </div>
2194                </div>                
2195                
2195<script>
2196                    document.addEventListener('DOMContentLoaded', function() {
2197                    const prices = { 'Mensual': 35, 'Semestral': 175, 'Anual': 300 };
2198                    let count = 1;
2199                    let likePhoneActive = false;
2200                    let currentPrice = 35;
2201                    const counterNumber = document.querySelector('.counter-number');
2202                    const totalPrice = document.getElementById('total-price');
2203                    const likeCheckAmount = document.getElementById('likecheck-new-amount');
2204                    const likephoneCounter = document.querySelector('.likephone-counter-number');
2205                    const likephoneContainer = document.querySelector('.likephone-counter-container')?.parentElement;
2206                    const likephoneAmountContainer = document.querySelector('.likephone-new-amount-container');
2207                    const likePhoneNote = document.querySelector('.likephone-note');
2208                    const likePhoneToggle = document.querySelector('.likephone-option');
2209                    const toggleSwitch = document.querySelector('.toggle-switch');
2210                    if (counterNumber) counterNumber.textContent = '1';
2211                    if (likephoneCounter) likephoneCounter.textContent = '0';
2212                    if (totalPrice) totalPrice.textContent = '$35';
2213                    if (likeCheckAmount) likeCheckAmount.textContent = '$0';
2214                    function updateCounter(num) {
2215                        if (!counterNumber) return;
2216                        counterNumber.style.transform = 'scale(1.2)';
2217                        setTimeout(() => {
2218                            counterNumber.textContent = num;
2219                            counterNumber.style.transform = 'scale(1)';
2220                        }, 100);
2221                    }
2222                    function calculateTotal() {
2223                        if (!totalPrice) return;
2224                        const total = currentPrice * count;
2225                        const formatted = new Intl.NumberFormat('es-MX', {
2226                            style: 'currency', currency: 'MXN', 
2227                            minimumFractionDigits: 0, maximumFractionDigits: 0
2228                        }).format(total);
2229                        
2230                        totalPrice.style.transform = 'scale(1.1)';
2231                        setTimeout(() => {
2232                            totalPrice.innerHTML = formatted;
2233                            totalPrice.style.transform = 'scale(1)';
2234                        }, 100);
2235                    }
2236                    function updateLikeCheckAmount() {
2237                        if (!likeCheckAmount) return;
2238                        
2239                        let lineas = 0;
2240                        if (likePhoneActive) {
2241                            lineas = parseInt(likephoneCounter?.textContent || '0');
2242                        }
2243                        
2244                        const nuevosColaboradores = Math.max(count - lineas, 0);
2245                        const total = nuevosColaboradores * currentPrice;
2246                        
2247                        const formatted = new Intl.NumberFormat('es-MX', {
2248                            style: 'currency', currency: 'MXN', 
2249                            minimumFractionDigits: 0, maximumFractionDigits: 0
2250                        }).format(total);
2251                        
2252                        likeCheckAmount.style.transform = 'scale(1.1)';
2253                        setTimeout(() => {
2254                            likeCheckAmount.innerHTML = formatted;
2255                            likeCheckAmount.style.transform = 'scale(1)';
2256                        }, 100);
2257                    }
2258                    document.querySelector('.plus-btn').onclick = function() {
2259                        count++;
2260                        updateCounter(count);
2261                        calculateTotal();
2262                        if (likePhoneActive) updateLikeCheckAmount();
2263                        updateEmployeeDisplay(count);
2264                    };
2265                    document.querySelector('.minus-btn').onclick = function() {
2266                        if (count > 1) {
2267                            count--;
2268                            updateCounter(count);
2269                            calculateTotal();
2270                            if (likePhoneActive) updateLikeCheckAmount();
2271                            updateEmployeeDisplay(count);
2272                        }
2273                    };
2274                    function updateEmployeeDisplay(count) {
2275                        var display = document.getElementById('employee-count-display');
2276                        if (display) {
2277                            display.textContent = count + (count === 1 ? ' empleado' : ' empleados');
2278                        }
2279                    }
2280                    function updateFrequencyDisplay(freq) {
2281                        var freqDisplay = document.getElementById('frequency-display');
2282                        if (freqDisplay) {
2283                            freqDisplay.textContent = 'Frecuencia de pago: ' + freq;
2284                        }
2285                    }                          
2286                    const periodBtns = document.querySelectorAll('.period-btn');
2287                    periodBtns.forEach(btn => {
2288                        btn.onclick = function() {
2289                            periodBtns.forEach(b => {
2290                                b.classList.remove('active');
2291                                b.style.background = 'rgba(255,255,255,0.2)';
2292                                b.style.color = 'white';
2293                                b.style.boxShadow = 'none';
2294                            });                          
2295                            this.classList.add('active');
2296                            this.style.background = 'white';
2297                            this.style.color = '#0799B6';
2298                            this.style.boxShadow = '0 3px 8px rgba(0,0,0,0.1)';
2299                            const frequency = this.getAttribute('data-frequency');
2300                            currentPrice = parseInt(this.getAttribute('data-price'));
2301                            
2302                            updateFrequencyDisplay(frequency);
2303                            calculateTotal();
2304                            if (likePhoneActive) updateLikeCheckAmount();
2305                        };
2306                    });
2307                    if (likePhoneToggle) {
2308                        likePhoneToggle.onclick = function() {
2309                            likePhoneActive = !likePhoneActive;                
2310                            if (likePhoneActive) {
2311                                if (toggleSwitch) {
2312                                    toggleSwitch.style.backgroundColor = '#4caf50';
2313                                    const knob = toggleSwitch.querySelector('.toggle-knob');
2314                                    if (knob) {
2315                                        knob.style.left = 'auto';
2316                                        knob.style.right = '3px';
2317                                    }
2318                                }
2319                                if (likephoneContainer) likephoneContainer.style.display = 'block';
2320                                if (likephoneAmountContainer) likephoneAmountContainer.style.display = 'flex';
2321                                if (likePhoneNote) likePhoneNote.style.display = 'block';
2322                                if (likephoneCounter && parseInt(likephoneCounter.textContent || '0') < 1) {
2323                                    likephoneCounter.textContent = '1';
2324                                }
2325                            } else {
2326                                if (toggleSwitch) {
2327                                    toggleSwitch.style.backgroundColor = '#ccc';
2328                                    const knob = toggleSwitch.querySelector('.toggle-knob');
2329                                    if (knob) {
2330                                        knob.style.left = '3px';
2331                                        knob.style.right = 'auto';
2332                                    }
2333                                }
2334                                if (likephoneContainer) likephoneContainer.style.display = 'none';
2335                                if (likephoneAmountContainer) likephoneAmountContainer.style.display = 'none';
2336                                if (likePhoneNote) likePhoneNote.style.display = 'none';
2337                                if (likephoneCounter) likephoneCounter.textContent = '0';
2338                            }                       
2339                            updateLikeCheckAmount();
2340                        };
2341                    }
2342                    document.querySelector('.likephone-plus-btn').onclick = function() {
2343                        if (!likephoneCounter) return;
2344                        let val = parseInt(likephoneCounter.textContent) || 0;
2345                        likephoneCounter.textContent = val + 1;
2346                        updateLikeCheckAmount();
2347                    };
2348                    
2349                    document.querySelector('.likephone-minus-btn').onclick = function() {
2350                        if (!likephoneCounter) return;
2351                        let val = parseInt(likephoneCounter.textContent) || 0;
2352                        if (val > 1) {
2353                            likephoneCounter.textContent = val - 1;
2354                            updateLikeCheckAmount();
2355                        }
2356                    };
2357                    
2358                    // 6. INICIALIZAR VALORES
2359                    calculateTotal();
2360                    // Habilitar edición manual en contadores
2361                    if (counterNumber) {
2362                        counterNumber.setAttribute('contenteditable', 'true');
2363                        counterNumber.setAttribute('inputmode', 'numeric');
2364                        
2365                        // Al teclear solo permite dígitos
2366                        counterNumber.addEventListener('input', function(e) {
2367                            // Permitir solo dígitos o dejar vacío
2368                            let text = this.textContent.replace(/[^0-9]/g, '');
2369                            
2370                            // Mantener posición del cursor
2371                            if (this.textContent !== text) {
2372                                const selection = window.getSelection();
2373                                const range = selection.getRangeAt(0);
2374                                const pos = range.startOffset;
2375                                
2376                                this.textContent = text;
2377                                
2378                                if (this.firstChild) {
2379                                    range.setStart(this.firstChild, Math.min(pos, text.length));
2380                                    range.collapse(true);
2381                                    selection.removeAllRanges();
2382                                    selection.addRange(range);
2383                                }
2384                            }
2385                            
2386                            // Actualizar valores si no está vacío
2387                            if (text !== '') {
2388                                let val = parseInt(text);
2389                                count = val;
2390                                calculateTotal();
2391                                if (likePhoneActive) updateLikeCheckAmount();
2392                                updateEmployeeDisplay(count);
2393                            }
2394                        });
2395                        
2396                        // Al perder el foco, verificar valor mínimo
2397                        counterNumber.addEventListener('blur', function() {
2398                            let val = parseInt(this.textContent) || 0;
2399                            if (val < 1 || this.textContent.trim() === '') {
2400                                this.textContent = '1';
2401                                count = 1;
2402                                calculateTotal();
2403                                if (likePhoneActive) updateLikeCheckAmount();
2404                                updateEmployeeDisplay(count);
2405                            }
2406                        });
2407                    }
2408                    if (likephoneCounter) {
2409                        likephoneCounter.setAttribute('contenteditable', 'true');
2410                        likephoneCounter.setAttribute('inputmode', 'numeric');
2411                        
2412                        // Al teclear solo permite dígitos
2413                        likephoneCounter.addEventListener('input', function(e) {
2414                            // Permitir solo dígitos o dejar vacío
2415                            let text = this.textContent.replace(/[^0-9]/g, '');
2416                            
2417                            // Mantener posición del cursor
2418                            if (this.textContent !== text) {
2419                                const selection = window.getSelection();
2420                                const range = selection.getRangeAt(0);
2421                                const pos = range.startOffset;
2422                                
2423                                this.textContent = text;
2424                                
2425                                if (this.firstChild) {
2426                                    range.setStart(this.firstChild, Math.min(pos, text.length));
2427                                    range.collapse(true);
2428                                    selection.removeAllRanges();
2429                                    selection.addRange(range);
2430                                }
2431                            }
2432                            
2433                            // Actualizar valores siempre
2434                            updateLikeCheckAmount();
2435                        });
2436                        
2437                        // Al perder el foco, verificar valor mínimo
2438                        likephoneCounter.addEventListener('blur', function() {
2439                            let val = parseInt(this.textContent) || 0;
2440                            if (val < 1 || this.textContent.trim() === '') {
2441                                this.textContent = '1';
2442                                updateLikeCheckAmount();
2443                            }
2444                        });
2445                    }
2446                    });
2447                </script>
2447
2448            </script>
2448
2449            <style>
2450                @keyframes float {
2451                    0% { transform: translate(0, 0) rotate(0deg); }
2452                    50% { transform: translate(20px, 20px) rotate(10deg); }
2453                    100% { transform: translate(0, 0) rotate(0deg); }
2454                }               
2455                @keyframes pulse {
2456                    0% { transform: scale(1); }
2457                    50% { transform: scale(1.05); }
2458                    100% { transform: scale(1); }
2459                }             
2460                @keyframes fadeInDown {
2461                    from { opacity: 0; transform: translateY(-20px); }
2462                    to { opacity: 1; transform: translateY(0); }
2463                }      
2464                @keyframes fadeInLeft {
2465                    from { opacity: 0; transform: translateX(-30px); }
2466                    to { opacity: 1; transform: translateX(0); }
2467                }
2468                @keyframes fadeInRight {
2469                    from { opacity: 0; transform: translateX(30px); }
2470                    to { opacity: 1; transform: translateX(0); }
2471                }
2472                @keyframes fadeIn {
2473                    from { opacity: 0; }
2474                    to { opacity: 1; }
2475                }             
2476                @keyframes bounceIn {
2477                    0% { transform: scale(0.3); opacity: 0; }
2478                    50% { transform: scale(1.1); }
2479                    70% { transform: scale(0.9); }
2480                    100% { transform: scale(1); opacity: 1; }
2481                }          
2482                .hover-lift:hover {
2483                    transform: translateY(-5px);
2484                    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
2485                }                
2486                .period-btn:hover {
2487                    background-color: #182c83 !important;
2488                    color: white !important;
2489                    transform: scale(1.05);
2490                }               
2491                #cotizador-content .btn-circle:hover {
2492                    transform: scale(1.1);
2493                    box-shadow: 0 0 10px rgba(24, 44, 131, 0.5);
2494                }        
2495                #cotizador-content .btn-primary:hover i {
2496                    transform: translateX(3px);
2497                }
2498                @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap');
2499            </style>          
2500            
2500<script>
2501                document.addEventListener('DOMContentLoaded', function() {
2502                });
2503            </script>
2503
2504        </div>    </section>
2505
2506    <!-- Sección: Promoción -->
2507    <section id="promocion" class="section-page">
2508        <div class="section-container active" id="promocion-content" style="background: #e8f4fc; padding: 30px 0 0; margin-top: 0; overflow: hidden; position: relative;">
2509    <div class="row mb-5">
2510        <div class="col-12 text-center">
2511            <h2 style="color: #182c83; font-size: 2.5rem; font-weight: 700; text-transform: uppercase; margin-bottom: 2rem; padding-top: 40px;">
2512                PROMOCIÓN
2513            </h2>
2514        </div>
2515    </div> 
2516    <div class="decorative-circle" style="position: absolute; width: 250px; height: 250px; border-radius: 50%; background: radial-gradient(circle, rgba(7, 153, 182, 0.1) 0%, rgba(7, 153, 182, 0) 70%); top: 5%; left: 5%; z-index: 1; animation: pulse 6s infinite alternate;"></div>
2517        <div class="decorative-circle" style="position: absolute; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(24, 44, 131, 0.1) 0%, rgba(24, 44, 131, 0) 70%); bottom: 5%; right: 5%; z-index: 1; animation: pulse 8s infinite alternate;"></div>
2518            <div class="decorative-circle" style="position: absolute; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, rgba(7, 153, 182, 0.08) 0%, rgba(7, 153, 182, 0) 70%); top: 20%; right: 15%; z-index: 1; animation: pulse 7s infinite alternate;"></div>
2519                <div class="container mt-3">
2520                    <div class="row text-center">
2521                        <div class="col-12 mb-4">
2522                            <div class="position-relative d-inline-block animate-fade-in-up animate-delay-1">
2523                                <h2 class="font-weight-bold" style="color: transparent; background: linear-gradient(45deg, #182c83, #0799B6); background-clip: text; -webkit-background-clip: text; font-size: 3.2rem; text-transform: uppercase; letter-spacing: 1px; font-family: 'Montserrat', sans-serif;">
2524                                    LikeCheck GRATIS para usuarios LikePhone
2525                                </h2>
2526                            </div>
2527                        </div>
2528                        <div class="col-12 mb-5">
2529                            <h3 class="animate-fade-in-up animate-delay-2" style="color: #333; font-weight: 500; font-family: 'Poppins', sans-serif; background: rgba(255,255,255,0.7); display: inline-block; padding: 10px 25px; border-radius: 30px; box-shadow: 0 5px 15px rgba(0,0,0,0.08);">
2530                                Elige el plan LikePhone perfecto para ti
2531                            </h3>
2532                        </div>
2533                    </div> 
2534                    <div class="row justify-content-center">
2535                        <div class="col-lg-3 col-md-6 col-sm-6 mb-5">
2536                            <div class="promo-plan-card h-100 animate-fade-in-up animate-delay-2">
2537                                <div class="text-center">
2538                                    <h4 class="plan-title">PLAN PRO</h4>
2539                                </div>
2540                                <div class="text-center p-4">
2541                                    <img src="https://likephone.mx/resources/assets/images/likecheck/1.png" class="img-fluid" alt="Plan Pro" style="max-height: 300px; transition: transform 0.5s; filter: drop-shadow(0 5px 15px rgba(0,0,0,0.1));">
2542                                </div>
2543                                <div class="text-center py-3" style="background-color: rgba(24, 44, 131, 0.01);">
2544                                    <span style="font-weight: 600; color: #182c83;">Perfecto para emprendedores</span>
2545                                </div>
2546                            </div>
2547                        </div>
2548                        <div class="col-lg-3 col-md-6 col-sm-6 mb-5">
2549                            <div class="promo-plan-card h-100 animate-fade-in-up animate-delay-3">
2550                                <div class="text-center">
2551                                    <h4 class="plan-title">PLAN DYNAMIC</h4>
2552                                </div>
2553                                <div class="text-center p-4">
2554                                    <img src="https://likephone.mx/resources/assets/images/likecheck/2.png" class="img-fluid" alt="Plan Dynamic" style="max-height: 300px; transition: transform 0.5s; filter: drop-shadow(0 5px 15px rgba(0,0,0,0.1));">
2555                                </div>
2556                                <div class="text-center py-3" style="background-color: rgba(24, 44, 131, 0.01);">
2557                                    <span style="font-weight: 600; color: #182c83;">Ideal para profesionales</span>
2558                                </div>
2559                            </div>
2560                        </div>
2561                        <div class="col-lg-3 col-md-6 col-sm-6 mb-5">
2562                            <div class="promo-plan-card featured h-100 animate-fade-in-up animate-delay-4">
2563
2564                                <div class="text-center">
2565                                    <h4 class="plan-title">PLAN ELITE</h4>
2566                                </div>
2567                                <div class="text-center p-4">
2568                                    <img src="https://likephone.mx/resources/assets/images/likecheck/3.png" class="img-fluid" alt="Plan Elite" style="max-height: 300px; transition: transform 0.5s; filter: drop-shadow(0 5px 15px rgba(0,0,0,0.1));">
2569                                </div>
2570                                <div class="text-center py-3" style="background: linear-gradient(to right, rgba(7, 153, 182, 0.02), rgba(24, 44, 131, 0.02));">
2571                                    <span style="font-weight: 700; color: #182c83;">Perfecto para PyMEs</span>
2572                                </div>
2573                            </div>
2574                        </div>
2575                        <div class="col-lg-3 col-md-6 col-sm-6 mb-5">
2576                            <div class="promo-plan-card h-100 animate-fade-in-up animate-delay-5">
2577                                <div class="text-center">
2578                                    <h4 class="plan-title">PLAN CORPO</h4>
2579                                </div>
2580                                <div class="text-center p-4">
2581                                    <img src="https://likephone.mx/resources/assets/images/likecheck/4.png" class="img-fluid" alt="Plan Corpo" style="max-height: 300px; transition: transform 0.5s; filter: drop-shadow(0 5px 15px rgba(0,0,0,0.1));">
2582                                </div>
2583                                <div class="text-center py-3" style="background-color: rgba(24, 44, 131, 0.01);">
2584                                    <span style="font-weight: 600; color: #182c83;">Para grandes empresas</span>
2585                                </div>
2586                            </div>
2587                        </div>
2588                    </div>       
2589                    <div class="row justify-content-center mt-4">
2590                        <div class="col-lg-12 col-12 text-center animate-fade-in-up animate-delay-5">
2591                            <div style="background: #ffffff; padding: 25px; border-radius: 12px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); position: relative; overflow: hidden;">
2592                                <h4 class="mb-4" style="color: #333; font-weight: 600; font-family: 'Montserrat', sans-serif; position: relative; display: inline-block;">
2593                                    BENEFICIOS INCLUIDOS
2594                                    <div style="height: 2px; width: 60px; background-color: #0799B6; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%);"></div>
2595                                </h4>
2596                                <div class="benefits-container d-flex justify-content-center" style="gap: 15px; margin-top: 25px; justify-content: center; align-items: center; flex-wrap: nowrap;">                               
2597                                    <span style="background-color: #f8f9ff; color: #333; padding: 14px 20px; border-radius: 8px; font-weight: 500; border: 1px solid #eaedf7; display: flex; align-items: center; justify-content: center; width: 310px; height: 60px; white-space: nowrap;">
2598                                        <i class="fas fa-clock" style="color: #182c83; margin-right: 8px;"></i> Planes por 30 días
2599                                    </span>
2600                                    <span style="background-color: #f8f9ff; color: #333; padding: 14px 20px; border-radius: 8px; font-weight: 500; border: 1px solid #eaedf7; display: flex; align-items: center; justify-content: center; width: 310px; height: 60px; white-space: nowrap;">
2601                                        <i class="fas fa-wifi" style="color: #0799B6; margin-right: 8px;"></i> Redes Sociales ilimitadas
2602                                    </span>
2603                                    <span style="background-color: #f8f9ff; color: #333; padding: 14px 20px; border-radius: 8px; font-weight: 500; border: 1px solid #eaedf7; display: flex; align-items: center; justify-content: center; width: 310px; height: 60px; white-space: nowrap;">
2604                                        <i class="fas fa-phone-alt" style="color: #182c83; margin-right: 8px;"></i> Llamadas y SMS ilimitados
2605                                    </span>
2606                                    <span style="background-color: #f8f9ff; color: #333; padding: 14px 20px; border-radius: 8px; font-weight: 500; border: 1px solid #eaedf7; display: flex; align-items: center; justify-content: center; width: 310px; height: 60px; white-space: nowrap;">
2607                                        <i class="fas fa-globe-americas" style="color: #0799B6; margin-right: 8px;"></i> Cobertura Nacional, EE.UU. y Canadá
2608                                    </span>
2609                                </div>
2610                            </div>
2611                        </div>
2612                    </div>
2613                </div>
2614                    <style>
2615                    @media (max-width: 992px) {
2616                        .benefits-container {
2617                        flex-wrap: wrap !important;
2618                        }
2619                        .benefits-container span {
2620                        width: 100% !important;
2621                        max-width: 300px !important;
2622                        }
2623                    }
2624                    </style>
2625                    <div class="row">
2626                        <div class="col-12 text-center mt-4">
2627                            <a href="https://wa.link/fdpuvy" target="_blank" style="text-decoration: none;">
2628                                <button class="btn btn-lg animate-fade-in-up animate-delay-5" style="background: linear-gradient(45deg, #182c83, #0799B6); color: white; padding: 12px 30px; border-radius: 50px; font-weight: 700; box-shadow: 0 10px 20px rgba(24, 44, 131, 0.3); transition: all 0.3s ease; border: none;">
2629                                    <span style="position: relative; z-index: 2;">CONTRATAR AHORA</span>
2630                                </button>
2631                            </a>
2632                        </div>
2633                    </div>
2634                </div>
2635            </div>
2636            <!-- TITULO -->
2637                <p style="font-size: 3.2rem; font-weight: 900; color: #1A2A80; text-align: center; letter-spacing: 1px; margin-top: 10px;">
2638                    PLANES PREPAGO LIKECHECK </span>
2639                </p>
2640                <!-- SUBTITULO -->
2641                <p style="width: 80%; margin: 35px auto 0 auto; text-align: justify; font-size: 20px; color: #000000; line-height: 1.5;">
2642                    Control total y pago flexible para tu empresa. Con nuestro esquema prepago adquieres una bolsa de usuarios o licencias a 
2643                    precio preferencial que podrás usar de acuerdo a tus necesidades.
2644                </p>
2645                <!-- IMAGEN DE PLANES -->
2646                <div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; padding: 20px; margin-top: 40px;">
2647                    <div style="flex: 1 1 300px; max-width: 350px; text-align: center;">
2648                        <img src="https://likephone.mx/resources/assets/images/likecheck/37.png" 
2649                            alt="250 Usuarios" 
2650                            style="width: 100%; height: auto; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.1);">
2651                    </div>
2652                    <div style="flex: 1 1 300px; max-width: 350px; text-align: center;">
2653                        <img src="https://likephone.mx/resources/assets/images/likecheck/38.png" 
2654                            alt="500 Usuarios" 
2655                            style="width: 100%; height: auto; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.1);">
2656                    </div>
2657                    <div style="flex: 1 1 300px; max-width: 350px; text-align: center;">
2658                        <img src="https://likephone.mx/resources/assets/images/likecheck/39.png" 
2659                            alt="1000 Usuarios" 
2660                            style="width: 100%; height: auto; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.1);">
2661                    </div>
2662                </div>
2663                <!-- SEGUNDA IMAGEN DE PLANES -->
2664                <div style="display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 40px; padding: 20px;">
2665                    <div style="flex: 1 1 400px; max-width: 600px; text-align: center;">
2666                        <img src="https://likephone.mx/resources/assets/images/likecheck/40.png" 
2667                            alt="Cómo funcionan las tarifas" 
2668                            style="width: 100%; max-height: 600px; height: auto; object-fit: contain;">
2669                    </div>
2670                    <div style="flex: 1 1 400px; max-width: 600px; text-align: center;">
2671                        <img src="https://likephone.mx/resources/assets/images/likecheck/41.png" 
2672                            alt="Plan prepago" 
2673                            style="width: 100%; max-height: 600px; height: auto; object-fit: contain;">
2674                    </div>
2675                </div>
2676            <style>
2677                @keyframes fadeInUp {
2678                    from { opacity: 0; transform: translateY(30px); }
2679                    to { opacity: 1; transform: translateY(0); }
2680                }        
2681                @keyframes pulse {
2682                    0% { transform: scale(1); }
2683                    50% { transform: scale(1.05); }
2684                    100% { transform: scale(1); }
2685                }                  
2686                @keyframes borderPulse {
2687                    0% { box-shadow: 0 0 0 0 rgba(24, 44, 131, 0.6); }
2688                    70% { box-shadow: 0 0 0 10px rgba(24, 44, 131, 0); }
2689                    100% { box-shadow: 0 0 0 0 rgba(24, 44, 131, 0); }
2690                }                  
2691                .animate-fade-in-up {
2692                    animation: fadeInUp 0.8s ease-out forwards;
2693                    opacity: 0;
2694                }                  
2695                .animate-delay-1 { animation-delay: 0.2s; }
2696                .animate-delay-2 { animation-delay: 0.4s; }
2697                .animate-delay-3 { animation-delay: 0.6s; }
2698                .animate-delay-4 { animation-delay: 0.8s; }
2699                .animate-delay-5 { animation-delay: 1s; }                
2700                    @keyframes shine {
2701                        0% {
2702                        background-position: -100% 50%;
2703                    }
2704                    100% {
2705                    background-position: 200% 50%;
2706                    }
2707                }
2708                .promo-plan-card {
2709                    background: #fcfdff;
2710                    border: none;
2711                    border-radius: 18px;
2712                    overflow: hidden;
2713                    box-shadow: 0 8px 20px rgba(0,0,0,0.05);
2714                    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
2715                    position: relative;
2716                    z-index: 2;
2717                }
2718                .promo-plan-card:before {
2719                    content: '';
2720                    position: absolute;
2721                    top: -2px;
2722                    left: -2px;
2723                    right: -2px;
2724                    bottom: -2px;
2725                    background: linear-gradient(45deg, rgba(7, 153, 182, 0.4), rgba(24, 44, 131, 0.4), rgba(7, 153, 182, 0.4), rgba(24, 44, 131, 0.4));
2726                    background-size: 400% 400%;
2727                    border-radius: 20px;
2728                    z-index: -1;
2729                    animation: shine 6s linear infinite;
2730                }                 
2731                .promo-plan-card:hover {
2732                    transform: translateY(-15px) scale(1.03);
2733                    box-shadow: 0 25px 40px rgba(24, 44, 131, 0.3);
2734                } 
2735                .promo-plan-card.featured {
2736                    transform: scale(1.05);
2737                    box-shadow: 0 20px 35px rgba(7, 153, 182, 0.35);
2738                }             
2739                .promo-plan-card.featured:hover {
2740                    transform: translateY(-15px) scale(1.08);
2741                    box-shadow: 0 30px 45px rgba(7, 153, 182, 0.4);
2742                }
2743                .plan-title {
2744                    background: linear-gradient(135deg, #182c83 0%, #3254c5 100%);
2745                    color: white;
2746                    padding: 15px 0;
2747                    font-weight: bold;
2748                    font-size: 1.3rem;
2749                    margin-bottom: 0;
2750                    letter-spacing: 1px;
2751                    position: relative;
2752                    overflow: hidden;
2753                    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
2754                }                
2755                .plan-title:after {
2756                    content: '';
2757                    position: absolute;
2758                    top: 0;
2759                    left: -100%;
2760                    width: 100%;
2761                    height: 100%;
2762                    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
2763                    transition: 0.5s;
2764                }                 
2765                .promo-plan-card:hover .plan-title:after {
2766                    left: 100%;
2767                }              
2768                .promo-title {
2769                    position: relative;
2770                    display: inline-block;
2771                }                 
2772                .promo-title:after {
2773                    content: '';
2774                    position: absolute;
2775                    width: 80%;
2776                    height: 3px;
2777                    bottom: -10px;
2778                    left: 10%;
2779                    background: #182c83;
2780                    animation: pulse 2s infinite;
2781                }
2782                .promo-badge {
2783                    position: absolute;
2784                    top: -10px;
2785                    right: -10px;
2786                    background-color: #ff6b6b;
2787                    color: white;
2788                    padding: 5px 10px;
2789                    border-radius: 50px;
2790                    font-weight: bold;
2791                    transform: rotate(15deg);
2792                    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
2793                    z-index: 10;                    
2794                }
2795                @media (max-width: 768px) {
2796                .promo-title:after {
2797                    width: 60%;
2798                        left: 20%;
2799                    }
2800                }
2801                @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap');
2802            </style>    </section>
2803
2804    <!-- Sección: Clientes -->
2805    <section id="clientes" class="section-page">
2806        <div class="likecheck-main-content">
2807    <section class="clients-section">
2808        <div class="container">
2809            <!-- TITULO -->
2810            <p style="font-size: 3.2rem; font-weight: 900; color: #1A2A80; text-align: center; letter-spacing: 1px; margin-top: 30px;">
2811                NUESTROS CLIENTES </span>
2812            </p>
2813             <!-- Carrusel de Logos -->
2814            <div style="overflow:hidden; width:100%; padding:20px 0;">
2815                <div class="carrusel">
2816                    <img src="https://likephone.mx/resources/assets/images/likecheck/6.png"
2817                        style="height:150px; margin:0 40px; object-fit:contain;">
2818                    <img src="https://likephone.mx/resources/assets/images/likecheck/7.png"
2819                        style="height:150px; margin:0 40px; object-fit:contain;">
2820                    <img src="https://likephone.mx/resources/assets/images/likecheck/17.png"
2821                        style="height:150px; margin:0 40px; object-fit:contain;">
2822                    <img src="https://likephone.mx/resources/assets/images/likecheck/18.png"
2823                        style="height:150px; margin:0 40px; object-fit:contain;">              
2824                    <img src="https://likephone.mx/resources/assets/images/likecheck/20.png"
2825                        style="height:150px; margin:0 40px; object-fit:contain;">
2826                    <img src="https://likephone.mx/resources/assets/images/likecheck/21.png"
2827                        style="height:150px; margin:0 40px; object-fit:contain;">                   
2828                    <img src="https://likephone.mx/resources/assets/images/likecheck/23.png"
2829                        style="height:150px; margin:0 40px; object-fit:contain;">                   
2830                    <img src="https://likephone.mx/resources/assets/images/likecheck/25.png"
2831                        style="height:150px; margin:0 40px; object-fit:contain;">
2832                    <img src="https://likephone.mx/resources/assets/images/likecheck/26.png"
2833                        style="height:150px; margin:0 40px; object-fit:contain;">                  
2834                    <img src="https://likephone.mx/resources/assets/images/likecheck/28.png"
2835                        style="height:150px; margin:0 40px; object-fit:contain;">
2836                    <img src="https://likephone.mx/resources/assets/images/likecheck/29.png"
2837                        style="height:150px; margin:0 40px; object-fit:contain;">
2838                    <img src="https://likephone.mx/resources/assets/images/likecheck/30.png"
2839                        style="height:150px; margin:0 40px; object-fit:contain;">
2840                    <img src="https://likephone.mx/resources/assets/images/likecheck/31.png"
2841                        style="height:150px; margin:0 40px; object-fit:contain;">
2842                    <img src="https://likephone.mx/resources/assets/images/likecheck/32.png"
2843                        style="height:150px; margin:0 40px; object-fit:contain;">
2844                    <img src="https://likephone.mx/resources/assets/images/likecheck/33.png"
2845                        style="height:150px; margin:0 40px; object-fit:contain;">
2846                    <img src="https://likephone.mx/resources/assets/images/likecheck/43.png"
2847                        style="height:150px; margin:0 40px; object-fit:contain;">
2848                    <img src="https://likephone.mx/resources/assets/images/likecheck/44.png"
2849                        style="height:150px; margin:0 40px; object-fit:contain;">                  
2850                    <img src="https://likephone.mx/resources/assets/images/likecheck/46.png"
2851                        style="height:150px; margin:0 40px; object-fit:contain;">
2852                    <img src="https://likephone.mx/resources/assets/images/likecheck/47.png"
2853                        style="height:150px; margin:0 40px; object-fit:contain;">
2854                    <img src="https://likephone.mx/resources/assets/images/likecheck/48.png"
2855                        style="height:150px; margin:0 40px; object-fit:contain;">
2856                    <img src="https://likephone.mx/resources/assets/images/likecheck/49.png"
2857                        style="height:150px; margin:0 40px; object-fit:contain;">
2858                    <img src="https://likephone.mx/resources/assets/images/likecheck/50.png"
2859                        style="height:150px; margin:0 40px; object-fit:contain;">
2860                    <img src="https://likephone.mx/resources/assets/images/likecheck/51.png"
2861                        style="height:150px; margin:0 40px; object-fit:contain;">
2862                    <img src="https://likephone.mx/resources/assets/images/likecheck/52.png"
2863                        style="height:150px; margin:0 40px; object-fit:contain;">                   
2864                    <img src="https://likephone.mx/resources/assets/images/likecheck/54.png"
2865                        style="height:150px; margin:0 40px; object-fit:contain;">
2866                    <img src="https://likephone.mx/resources/assets/images/likecheck/55.png"
2867                        style="height:150px; margin:0 40px; object-fit:contain;">
2868                    <img src="https://likephone.mx/resources/assets/images/likecheck/56.png"
2869                        style="height:150px; margin:0 40px; object-fit:contain;">
2870                    <img src="https://likephone.mx/resources/assets/images/likecheck/57.png"
2871                        style="height:150px; margin:0 40px; object-fit:contain;">
2872                    <img src="https://likephone.mx/resources/assets/images/likecheck/58.png"
2873                        style="height:150px; margin:0 40px; object-fit:contain;">
2874                    <img src="https://likephone.mx/resources/assets/images/likecheck/59.png"
2875                        style="height:150px; margin:0 40px; object-fit:contain;">
2876                    <img src="https://likephone.mx/resources/assets/images/likecheck/60.png"
2877                        style="height:150px; margin:0 40px; object-fit:contain;">
2878                    <img src="https://likephone.mx/resources/assets/images/likecheck/61.png"
2879                        style="height:150px; margin:0 40px; object-fit:contain;">
2880                    <img src="https://likephone.mx/resources/assets/images/likecheck/63.png"
2881                        style="height:150px; margin:0 40px; object-fit:contain;">
2882                    <img src="https://likephone.mx/resources/assets/images/likecheck/64.png"
2883                        style="height:150px; margin:0 40px; object-fit:contain;">
2884                    <img src="https://likephone.mx/resources/assets/images/likecheck/65.png"
2885                        style="height:150px; margin:0 40px; object-fit:contain;">
2886                    <img src="https://likephone.mx/resources/assets/images/likecheck/66.png"
2887                        style="height:150px; margin:0 40px; object-fit:contain;">
2888                    <img src="https://likephone.mx/resources/assets/images/likecheck/67.png"
2889                        style="height:150px; margin:0 40px; object-fit:contain;">
2890                    <img src="https://likephone.mx/resources/assets/images/likecheck/68.png"
2891                        style="height:150px; margin:0 40px; object-fit:contain;">
2892                    <img src="https://likephone.mx/resources/assets/images/likecheck/69.png"
2893                        style="height:150px; margin:0 40px; object-fit:contain;">
2894                    <img src="https://likephone.mx/resources/assets/images/likecheck/70.png"
2895                        style="height:150px; margin:0 40px; object-fit:contain;">
2896                    <img src="https://likephone.mx/resources/assets/images/likecheck/71.png"
2897                        style="height:150px; margin:0 40px; object-fit:contain;">
2898                    <img src="https://likephone.mx/resources/assets/images/likecheck/5.png"
2899                        style="height:150px; margin:0 40px; object-fit:contain;">
2900                    <!-- Se duplican las mismas 20 imágenes para el bucle infinito -->
2901                    <img src="https://likephone.mx/resources/assets/images/likecheck/6.png"
2902                        style="height:150px; margin:0 40px; object-fit:contain;">
2903                    <img src="https://likephone.mx/resources/assets/images/likecheck/7.png"
2904                        style="height:150px; margin:0 40px; object-fit:contain;">
2905                    <img src="https://likephone.mx/resources/assets/images/likecheck/17.png"
2906                        style="height:150px; margin:0 40px; object-fit:contain;">
2907                    <img src="https://likephone.mx/resources/assets/images/likecheck/18.png"
2908                        style="height:150px; margin:0 40px; object-fit:contain;">                   
2909                    <img src="https://likephone.mx/resources/assets/images/likecheck/20.png"
2910                        style="height:150px; margin:0 40px; object-fit:contain;">
2911                    <img src="https://likephone.mx/resources/assets/images/likecheck/21.png"
2912                        style="height:150px; margin:0 40px; object-fit:contain;">
2913                    <img src="https://likephone.mx/resources/assets/images/likecheck/23.png"
2914                        style="height:150px; margin:0 40px; object-fit:contain;">                   
2915                    <img src="https://likephone.mx/resources/assets/images/likecheck/25.png"
2916                        style="height:150px; margin:0 40px; object-fit:contain;">
2917                    <img src="https://likephone.mx/resources/assets/images/likecheck/26.png"
2918                        style="height:150px; margin:0 40px; object-fit:contain;">                  
2919                    <img src="https://likephone.mx/resources/assets/images/likecheck/28.png"
2920                        style="height:150px; margin:0 40px; object-fit:contain;">
2921                    <img src="https://likephone.mx/resources/assets/images/likecheck/29.png"
2922                        style="height:150px; margin:0 40px; object-fit:contain;">
2923                    <img src="https://likephone.mx/resources/assets/images/likecheck/30.png"
2924                        style="height:150px; margin:0 40px; object-fit:contain;">
2925                    <img src="https://likephone.mx/resources/assets/images/likecheck/31.png"
2926                        style="height:150px; margin:0 40px; object-fit:contain;">
2927                    <img src="https://likephone.mx/resources/assets/images/likecheck/32.png"
2928                        style="height:150px; margin:0 40px; object-fit:contain;">
2929                    <img src="https://likephone.mx/resources/assets/images/likecheck/33.png"
2930                        style="height:150px; margin:0 40px; object-fit:contain;">
2931                    <img src="https://likephone.mx/resources/assets/images/likecheck/43.png"
2932                        style="height:150px; margin:0 40px; object-fit:contain;">
2933                    <img src="https://likephone.mx/resources/assets/images/likecheck/44.png"
2934                        style="height:150px; margin:0 40px; object-fit:contain;">                  
2935                    <img src="https://likephone.mx/resources/assets/images/likecheck/46.png"
2936                        style="height:150px; margin:0 40px; object-fit:contain;">
2937                    <img src="https://likephone.mx/resources/assets/images/likecheck/47.png"
2938                        style="height:150px; margin:0 40px; object-fit:contain;">
2939                    <img src="https://likephone.mx/resources/assets/images/likecheck/48.png"
2940                        style="height:150px; margin:0 40px; object-fit:contain;">
2941                    <img src="https://likephone.mx/resources/assets/images/likecheck/49.png"
2942                        style="height:150px; margin:0 40px; object-fit:contain;">
2943                    <img src="https://likephone.mx/resources/assets/images/likecheck/50.png"
2944                        style="height:150px; margin:0 40px; object-fit:contain;">
2945                    <img src="https://likephone.mx/resources/assets/images/likecheck/51.png"
2946                        style="height:150px; margin:0 40px; object-fit:contain;">
2947                    <img src="https://likephone.mx/resources/assets/images/likecheck/52.png"
2948                        style="height:150px; margin:0 40px; object-fit:contain;">                   
2949                    <img src="https://likephone.mx/resources/assets/images/likecheck/54.png"
2950                        style="height:150px; margin:0 40px; object-fit:contain;">
2951                    <img src="https://likephone.mx/resources/assets/images/likecheck/55.png"
2952                        style="height:150px; margin:0 40px; object-fit:contain;">
2953                    <img src="https://likephone.mx/resources/assets/images/likecheck/56.png"
2954                        style="height:150px; margin:0 40px; object-fit:contain;">
2955                    <img src="https://likephone.mx/resources/assets/images/likecheck/57.png"
2956                        style="height:150px; margin:0 40px; object-fit:contain;">
2957                    <img src="https://likephone.mx/resources/assets/images/likecheck/58.png"
2958                        style="height:150px; margin:0 40px; object-fit:contain;">
2959                    <img src="https://likephone.mx/resources/assets/images/likecheck/59.png"
2960                        style="height:150px; margin:0 40px; object-fit:contain;">
2961                    <img src="https://likephone.mx/resources/assets/images/likecheck/60.png"
2962                        style="height:150px; margin:0 40px; object-fit:contain;">
2963                    <img src="https://likephone.mx/resources/assets/images/likecheck/61.png"
2964                        style="height:150px; margin:0 40px; object-fit:contain;">
2965                    <img src="https://likephone.mx/resources/assets/images/likecheck/63.png"
2966                        style="height:150px; margin:0 40px; object-fit:contain;">
2967                    <img src="https://likephone.mx/resources/assets/images/likecheck/64.png"
2968                        style="height:150px; margin:0 40px; object-fit:contain;">
2969                    <img src="https://likephone.mx/resources/assets/images/likecheck/65.png"
2970                        style="height:150px; margin:0 40px; object-fit:contain;">
2971                    <img src="https://likephone.mx/resources/assets/images/likecheck/66.png"
2972                        style="height:150px; margin:0 40px; object-fit:contain;">
2973                    <img src="https://likephone.mx/resources/assets/images/likecheck/67.png"
2974                        style="height:150px; margin:0 40px; object-fit:contain;">
2975                    <img src="https://likephone.mx/resources/assets/images/likecheck/68.png"
2976                        style="height:150px; margin:0 40px; object-fit:contain;">
2977                    <img src="https://likephone.mx/resources/assets/images/likecheck/69.png"
2978                        style="height:150px; margin:0 40px; object-fit:contain;">
2979                    <img src="https://likephone.mx/resources/assets/images/likecheck/70.png"
2980                        style="height:150px; margin:0 40px; object-fit:contain;">
2981                    <img src="https://likephone.mx/resources/assets/images/likecheck/71.png"
2982                        style="height:150px; margin:0 40px; object-fit:contain;">
2983                    <img src="https://likephone.mx/resources/assets/images/likecheck/5.png"
2984                        style="height:150px; margin:0 40px; object-fit:contain;">
2985                </div>
2986            </div>
2987            <style>
2988                .carrusel {
2989                    display: flex;
2990                    width: max-content;
2991                    animation: scroll 40s linear infinite;
2992                }
2993                @keyframes scroll {
2994                    0% {
2995                        transform: translateX(0);
2996                    }
2997                    100% {
2998                        transform: translateX(-50%);
2999                    }
3000                }
3001            </style>
3002            <!-- Mapa -->
3003            <div class="map-container text-center mb-5">
3004                <img src="https://likephone.mx/resources/assets/images/likecheck/MapaLikeCheck.png" style="max-width: 70%; height: auto;">
3005            </div>
3006            <!-- Titulo -->
3007            <div class="text-center mb-4">
3008                <h2 style="color: #182c83;
3008 font-size: calc(1.2rem + 1vw);">ADAPTABLE A CUALQUIER GIRO</h2>
3009            </div>
3010             <!-- Tarjetas de industrias (izquierda) -->
3011            <div class="row align-items-center mt-5">
3012                <div class="col-lg-8">
3013                    <div class="row">
3014                        <!-- Seguridad -->
3015                        <div class="col-md-4 col-sm-6 mb-4">
3016                            <div style="background:#fff; border-radius:12px; padding:20px; text-align:center; box-shadow:0 4px 12px rgba(0,0,0,0.1); height:230px; display:flex; flex-direction:column; justify-content:center; align-items:center;">
3017                                <div style="background:#0a58ca; padding:5px; border-radius:12px;">
3018                                    <div style="background:#fff; border-radius:8px; padding:5px; overflow:hidden;">
3019                                        <img src="https://likephone.mx/resources/assets/images/likecheck/10.png" alt="Seguridad" style="width:100px; height:100px; object-fit:cover; border-radius:8px; display:block;">
3020                                    </div>
3021                                </div>
3022                                <p style="font-weight:bold; color:#0d3b66; font-size:18px; margin-top:15px;">Seguridad</p>
3023                            </div>
3024                        </div>
3025                        <!-- Construcción -->
3026                        <div class="col-md-4 col-sm-6 mb-4">
3027                            <div style="background:#fff; border-radius:12px; padding:20px; text-align:center; box-shadow:0 4px 12px rgba(0,0,0,0.1); height:230px; display:flex; flex-direction:column; justify-content:center; align-items:center;">
3028                                <div style="background:#0a58ca; padding:5px; border-radius:12px;">
3029                                    <div style="background:#fff; border-radius:8px; padding:5px; overflow:hidden;">
3030                                        <img src="https://likephone.mx/resources/assets/images/likecheck/11.png" alt="Construcción" style="width:100px; height:100px; object-fit:cover; border-radius:8px; display:block;">
3031                                    </div>
3032                                </div>
3033                                <p style="font-weight:bold; color:#0d3b66; font-size:18px; margin-top:15px;">Construcción</p>
3034                            </div>
3035                        </div>
3036                        <!-- Administración -->
3037                        <div class="col-md-4 col-sm-6 mb-4">
3038                            <div style="background:#fff; border-radius:12px; padding:20px; text-align:center; box-shadow:0 4px 12px rgba(0,0,0,0.1); height:230px; display:flex; flex-direction:column; justify-content:center; align-items:center;">
3039                                <div style="background:#0a58ca; padding:5px; border-radius:12px;">
3040                                    <div style="background:#fff; border-radius:8px; padding:5px; overflow:hidden;">
3041                                        <img src="https://likephone.mx/resources/assets/images/likecheck/12.png" alt="Administración" style="width:100px; height:100px; object-fit:cover; border-radius:8px; display:block;">
3042                                    </div>
3043                                </div>
3044                                <p style="font-weight:bold; color:#0d3b66; font-size:18px; margin-top:15px;">Administración</p>
3045                            </div>
3046                        </div>
3047                        <!-- Limpieza -->
3048                        <div class="col-md-4 col-sm-6 mb-4">
3049                            <div style="background:#fff; border-radius:12px; padding:20px; text-align:center; box-shadow:0 4px 12px rgba(0,0,0,0.1); height:230px; display:flex; flex-direction:column; justify-content:center; align-items:center;">
3050                                <div style="background:#0a58ca; padding:5px; border-radius:12px;">
3051                                    <div style="background:#fff; border-radius:8px; padding:5px; overflow:hidden;">
3052                                        <img src="https://likephone.mx/resources/assets/images/likecheck/13.png" alt="Limpieza" style="width:100px; height:100px; object-fit:cover; border-radius:8px; display:block;">
3053                                    </div>
3054                                </div>
3055                                <p style="font-weight:bold; color:#0d3b66; font-size:18px; margin-top:15px;">Limpieza</p>
3056                            </div>
3057                        </div>
3058                        <!-- Educación -->
3059                        <div class="col-md-4 col-sm-6 mb-4">
3060                            <div style="background:#fff; border-radius:12px; padding:20px; text-align:center; box-shadow:0 4px 12px rgba(0,0,0,0.1); height:230px; display:flex; flex-direction:column; justify-content:center; align-items:center;">
3061                                <div style="background:#0a58ca; padding:5px; border-radius:12px;">
3062                                    <div style="background:#fff; border-radius:8px; padding:5px; overflow:hidden;">
3063                                        <img src="https://likephone.mx/resources/assets/images/likecheck/14.png" alt="Educación" style="width:100px; height:100px; object-fit:cover; border-radius:8px; display:block;">
3064                                    </div>
3065                                </div>
3066                                <p style="font-weight:bold; color:#0d3b66; font-size:18px; margin-top:15px;">Educación</p>
3067                            </div>
3068                        </div>
3069                        <!-- Salud -->
3070                        <div class="col-md-4 col-sm-6 mb-4">
3071                            <div style="background:#fff; border-radius:12px; padding:20px; text-align:center; box-shadow:0 4px 12px rgba(0,0,0,0.1); height:230px; display:flex; flex-direction:column; justify-content:center; align-items:center;">
3072                                <div style="background:#0a58ca; padding:5px; border-radius:12px;">
3073                                    <div style="background:#fff; border-radius:8px; padding:5px; overflow:hidden;">
3074                                        <img src="https://likephone.mx/resources/assets/images/likecheck/15.png" alt="Salud" style="width:100px; height:100px; object-fit:cover; border-radius:8px; display:block;">
3075                                    </div>
3076                                </div>
3077                                <p style="font-weight:bold; color:#0d3b66; font-size:18px; margin-top:15px;">Salud</p>
3078                            </div>
3079                        </div>
3080                    </div>
3081                </div>
3082                <!-- Imagen del equipo (derecha) -->
3083                <div class="col-lg-4 text-center d-flex justify-content-center">
3084                    <div style="background:#0a58ca; padding:8px; border-radius:18px; box-shadow:0 10px 30px rgba(10,88,202,0.15);">
3085                        <div style="background:#ffffff; border-radius:8px; padding:8px; overflow:hidden; width:340px; max-width:100%; height:460px; display:flex; align-items:center; justify-content:center;">
3086                            <img src="https://likephone.mx/resources/assets/images/likecheck/16.jpg" alt="Equipo de trabajo" style="width:100%; height:100%; object-fit:cover; border-radius:8px; display:block;">
3087                        </div>
3088                    </div>
3089                </div>
3090            </div>
3091            <!-- TITULO -->
3092            <p style="font-size: 3.2rem; font-weight: 900; color: #1A2A80; text-align: center; margin-bottom: 10px; letter-spacing: 1px; margin-top: 30px;">
3093                Testimonios de beneficiarios </span>
3094            </p>
3095            <!-- VIDEO -->
3096            <div style="display:flex;justify-content:center;margin:40px 0;">
3097                <iframe width="800" height="450" 
3098                    src="https://www.youtube.com/embed/It3KKS0cPVc" 
3099                    title="Video"
3100                    frameborder="0" 
3101                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
3102                    allowfullscreen
3103                    style="border-radius:16px;box-shadow:0 8px 20px rgba(0,0,0,0.2);">
3104                </iframe>
3105            </div>
3106        </div>
3107    </section>
3108</div>
3109    </section>
3110
3111    <!-- Sección: Contactanos -->
3112    <section id="contactanos" class="section-page">
3113        <div class="likecheck-main-content">
3114    <div class="section-container active" id="contactanos-content" style="padding: 0; background: #e8f4fc; overflow: hidden;">
3115        <!-- TITULO -->
3116        <p style="font-size: 3.2rem; font-weight: 900; color: #3C467B; text-align: center; margin-bottom: 10px; letter-spacing: 1px; margin-top: 35px;">
3117            CONTACTANOS, TU OPINION IMPORTA</span>
3118        </p>
3119        <div class="row g-0" style="min-height: 100vh;">
3120            <div class="col-md-6" style="background-color: #1e2a7a; padding: 60px 30px; position: relative; height: 100%;">
3121                <div style="text-align: center; margin-bottom: 20px;">
3122                    <h3 style="color: white; font-weight: 700; font-size: 1.5rem; margin-bottom: 5px; text-shadow: 0 2px 4px rgba(0,0,0,0.1);">¡NO PIERDAS NI UN MINUTO MÁS!</h3>
3123                    <p style="color: #00c2cb; font-size: 1.8rem; font-weight: 600; margin: 0; text-shadow: 0 1px 3px rgba(0,0,0,0.2);">¡CONTÁCTANOS!</p>
3124                </div>
3125                <iframe name="hidden_iframe" style="display:none;"></iframe>
3126                <form id="contact-form" style="max-width: 400px; margin: 0 auto;" class="needs-validation" novalidate
3127                    target="hidden_iframe"
3128                    method="GET"
3129                    action="https://script.google.com/macros/s/AKfycby0BmQKyeEuOEiw1z-ghLjBxObWioApsgmN4Te00JxYFqOa2Sp87sNgcXk2_Tdp8I3N/exec">
3130                    <div class="form-group mb-4 input-with-icon">
3131                        <i class="fas fa-user elegant-icon"></i>
3132                        <input type="text" name="nombre" class="elegant-input" placeholder="Nombre completo" required>
3133                    </div>
3134                    <div class="form-group mb-4 input-with-icon">
3135                        <i class="fas fa-phone-alt elegant-icon"></i>
3136                        <input type="tel" name="telefono" class="elegant-input" placeholder="Teléfono" required pattern="\d{10}" maxlength="10" inputmode="numeric" title="Ingresa 10 dígitos numéricos">
3137                    </div>
3138                    <div class="form-group mb-4 input-with-icon">
3139                        <i class="fas fa-envelope elegant-icon"></i>
3140                        <input type="email" name="correo" class="elegant-input" placeholder="Correo" required>
3141                    </div>
3142                    <div class="form-group mb-4 input-with-icon">
3143                        <i class="fas fa-building elegant-icon"></i>
3144                        <input type="text" name="empresa" class="elegant-input uppercase" placeholder="Empresa" required>
3145                    </div>
3146                    <div class="form-group mb-4 input-with-icon">
3147                        <i class="fas fa-tag elegant-icon"></i>
3148                        <input type="text" name="giro" class="elegant-input uppercase" placeholder="Giro" required>
3149                    </div>
3150                    <div class="form-group mb-4 input-with-icon">
3151                        <i class="fas fa-users elegant-icon"></i>
3152                        <input type="number" name="empleados" class="elegant-input" placeholder="Número de empleados" required>
3153                    </div>
3154                    <button type="submit" class="elegant-button">Enviar datos</button>
3155                </form>
3156            </div>
3157            <div class="col-md-6" style="background-color: #f2f5fa; padding: 30px 30px; display: flex; flex-direction: column; align-items: center; justify-content: center;">
3158                <div class="text-center mb-4">
3159                    <h3 style="font-size: 2rem; color: #1e2a7a; font-weight: 700; font-family: 'Montserrat', sans-serif; margin-bottom: 10px;">
3160                        ¿TIENES DUDAS?
3161                    </h3>
3162                    <p style="font-size: 1.3rem; color: #1e2a7a; margin-bottom: 30px;">Comunícate con nosotros de<br>inmediato</p>
3163                </div>
3164                <div style="background-color: white; width: 100%; max-width: 370px; padding: 15px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); margin-bottom: 20px; transition: all 0.3s ease; border-left: 4px solid #00c2cb;">
3165                    <div class="d-flex align-items-center">
3166                        <div style="background-color: #00c2cb; width: 45px; height: 45px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-right: 15px;">
3167                            <i class="fas fa-envelope" style="color: white; font-size: 1.2rem;"></i>
3168                        </div>
3169                        <div>
3170                            <span style="display: block; font-size: 0.85rem; color: #666; text-transform: uppercase;">CORREO ELECTRÓNICO</span>
3171                            <a href="mailto:[email protected]" style="font-size: 1.1rem; color: #1e2a7a; text-decoration: none; font-family: 'Montserrat', sans-serif; font-weight: 600;">
3172                                [email protected]
3173                            </a>
3174                        </div>
3175                    </div>
3176                </div>
3177                <!-- <div style="background-color: white; width: 100%; max-width: 370px; padding: 15px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); margin-bottom: 20px; transition: all 0.3s ease; border-left: 4px solid #1e2a7a;">
3178                    <div class="d-flex align-items-center">
3179                        <div style="background-color: #00c2cb; width: 45px; height: 45px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-right: 15px;">
3180                            <i class="fas fa-phone-alt" style="color: white; font-size: 1.2rem;"></i>
3181                        </div>
3182                        <div>
3183                            <span style="display: block; font-size: 0.85rem; color: #666; text-transform: uppercase;">TELÉFONO</span>
3184                            <a href="tel:+5218140560067" style="font-size: 1.1rem; color: #1e2a7a; text-decoration: none; font-family: 'Montserrat', sans-serif; font-weight: 600;">
3185                                +52 (81) 4056-0067
3186                            </a>
3187                        </div>
3188                    </div>
3189                </div> -->
3190                <div style="width: 100%; max-width: 370px; margin: 20px 0;">
3191                    <a href="https://wa.link/nigs9o" target="_blank" style="background-color: #25d366; color: white; border-radius: 50px; padding: 12px 25px; text-decoration: none; display: flex; align-items: center; justify-content: center; font-family: 'Montserrat', sans-serif; width: 100%; box-shadow: 0 4px 15px rgba(37, 211, 102, 0.5); transition: transform 0.3s ease, box-shadow 0.3s ease;" onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 6px 20px rgba(37, 211, 102, 0.6)'" onmouseout="this.style.transform='translateY(0)';this.style.boxShadow='0 4px 15px rgba(37, 211, 102, 0.5)'" onmousedown="this.style.transform='translateY(1px)';this.style.boxShadow='0 2px 10px rgba(37, 211, 102, 0.5)'" onmouseup="this.style.transform='translateY(-3px)';this.style.boxShadow='0 6px 20px rgba(37, 211, 102, 0.6)'">
3192                        <div>
3193                            <span style="display: block; font-size: 0.9rem; opacity: 0.9; text-align: center;">Respuesta inmediata</span>
3194                            <div style="display: flex; align-items: center; justify-content: center;">
3195                                <i class="fab fa-whatsapp" style="font-size: 1.5rem; margin-right: 10px;"></i>
3196                                <span style="font-size: 1.1rem; font-weight: 600;">WhatsApp Directo</span>
3197                            </div>
3198                        </div>
3199                    </a>
3200                </div>
3201            </div>
3202        </div>
3203        
3203<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
3203
3204        <style>
3205            #contactanos-content .form-control:focus {
3206                box-shadow: 0 0 0 0.2rem rgba(0, 194, 203, 0.25);
3207                border-color: #00c2cb;
3208            }
3209            .input-with-icon {
3210                position: relative;
3211            }
3212            .input-with-icon i {
3213                position: absolute;
3214                left: 15px;
3215                top: 50%;
3216                transform: translateY(-50%);
3217                color: #00c2cb;
3218                z-index: 1;
3219            }
3220            .input-with-icon input {
3221                padding-left: 55px !important;
3222            }
3223        </style>
3224        <style>
3225            .elegant-input {
3226                height: 50px;
3227                border-radius: 6px;
3228                border: 1px solid rgba(255, 255, 255, 0.1);
3229                background-color: rgba(255, 255, 255, 0.08);
3230                width: 100%;
3231                padding: 10px;
3232                color: white;
3233                transition: all 0.3s ease;
3234                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
3235                backdrop-filter: blur(5px);
3236            }
3237            .elegant-input::placeholder {
3238                color: rgba(255, 255, 255, 0.7);
3239            }
3240            .elegant-input:focus {
3241                outline: none;
3242                border-color: #00c2cb;
3243                box-shadow: 0 0 0 2px rgba(0, 194, 203, 0.25);
3244                background-color: rgba(255, 255, 255, 0.12);
3245            }
3246            .elegant-icon {
3247                font-size: 1.4rem;
3248                color: #00f9ff;
3249                text-shadow: 0 0 5px rgba(0, 249, 255, 0.5);
3250                transition: all 0.3s ease;
3251                opacity: 0.9;
3252            }
3253            .elegant-button {
3254                background: linear-gradient(45deg, #00c2cb, #00a0bb);
3255                color: white;
3256                border-radius: 30px;
3257                padding: 15px 40px;
3258                font-weight: 600;
3259                border: none;
3260                width: 100%;
3261                margin-top: 20px;
3262                transition: all 0.3s ease;
3263                box-shadow: 0 4px 15px rgba(0, 194, 203, 0.3);
3264                text-transform: uppercase;
3265                letter-spacing: 1px;
3266                font-size: 0.9rem;
3267            }
3268            .elegant-button:hover {
3269                transform: translateY(-2px);
3270                box-shadow: 0 6px 18px rgba(0, 194, 203, 0.4);
3271            }
3272            .elegant-button:active {
3273                transform: translateY(1px);
3274                box-shadow: 0 2px 10px rgba(0, 194, 203, 0.3);
3275            }
3276        </style>
3277        
3277<script>
3278            document.addEventListener('DOMContentLoaded', function () {
3279            const form = document.getElementById('contact-form');
3280            const telefonoInput = form.querySelector('input[name="telefono"]');
3281                telefonoInput.addEventListener('input', function () {
3282                this.value = this.value.replace(/\D/g, '');
3283                });
3284                form.addEventListener('submit', function (event) {
3285            if (!form.checkValidity()) {
3286                event.preventDefault();
3287                form.classList.add('was-validated');
3288            return;
3289                }       
3290            const empresa = form.querySelector('input[name="empresa"]');
3291            const giro = form.querySelector('input[name="giro"]');
3292                empresa.value = empresa.value.toUpperCase();
3293                giro.value = giro.value.toUpperCase();                                                                   
3294                setTimeout(() => {
3295                Swal.fire({
3296                icon: 'success',
3297                title: '¡Listo!',
3298                text: 'Tus datos han sido enviados, en un momento te contactamos.',
3299                confirmButtonColor: '#00c2cb',
3300                confirmButtonText: 'Aceptar',
3301                backdrop: true
3302                });
3303                form.reset();
3304                form.classList.remove('was-validated');
3305                }, 1000);
3306                location.hash = "#contactanos-content";
3307                });
3308                });
3309            </script>
3309
3310        </div>
3311    </div>
3312    </section>
3313</div>
3314
3315<!-- Estilos para las secciones -->
3316<style>
3317    /* Estilos generales para las secciones */
3318    .section-page {
3319        scroll-margin-top: 1px; /* Ajustar para el menú fijo */
3320    }
3321
3322    .section-page {
3323        min-height: 1vh;
3324    }
3325    
3326    html {
3327        scroll-behavior: smooth;
3328    }
3329    
3330    .section-page {
3331        padding-top: 1px; /* Ajustar según la altura del menú */
3332    }
3333    
3334    /* Ajustes generales para todas las secciones */
3335
3336    /* Ajustes para evitar duplicación de estilos o conflictos */
3337    .section-page > .likecheck-main-content {
3338        display: contents;
3339    }
3340
3341    /* Ajuste para evitar duplicación de containers */
3342    .section-page > .container-fluid {
3343        width: 100% !important;
3344        margin-left: 0 !important;
3345        margin-right: 0 !important;
3346        padding-left: 0 !important;
3347        padding-right: 0 !important;
3348    }
3349    
3350    /* Ajustes para el menú sticky */
3351    .sticky-menu {
3352        position: fixed !important;
3353        top: 0 !important;
3354        width: 100% !important;
3355        z-index: 1000 !important;
3356        box-shadow: 0 2px 15px rgba(0,0,0,0.1) !important;
3357        animation: slideDown 0.5s ease forwards !important;
3358        background: #fff !important;
3359    }
3360    
3361    /* Ajuste para el espaciado del menú */
3362    .section-page {
3363        padding-top: 10px; /* Ajustar según la altura del menú */
3364        padding-bottom: 10px;
3365        margin-bottom: 0;
3366        background-color: #e8f4fc; /* Fondo unificado para todas las secciones - tono azul claro */
3367    }
3368    
3369    /* Eliminar espacios entre secciones */
3370    .section-page {
3371        margin: 0;
3372        padding-left: 0;
3373        padding-right: 0;
3374    }
3375    
3376    /* Forzar mostrar colores originales en los logos del carrusel */
3377    #clientes .client-logo,
3378    #clientes .swiper-slide img,
3379    #clientes img[class*="client"],
3380    #clientes .client-logo-wrapper img,
3381    .client-carousel-container img,
3382    .swiper-container img,
3383    .swiper-wrapper img {
3384        -webkit-filter: none !important;
3385        filter: none !important;
3386        -webkit-filter: grayscale(0%) !important;
3387        filter: grayscale(0%) !important;
3388        opacity: 1 !important;
3389        max-width: 180px !important;
3390        max-height: 180px !important;
3391        transform: scale(1.2) !important;
3392    }
3393    
3394    /* Aumentar el tamaño del contenedor de logos */
3395    #clientes .client-logo-wrapper,
3396    #clientes .swiper-slide {
3397        height: 200px !important;
3398        display: flex !important;
3399        align-items: center !important;
3400        justify-content: center !important;
3401        padding: 15px !important;
3402    }
3403    
3404    /* Mejorar la saturación de los colores */
3405    #clientes .client-logo,
3406    #clientes .swiper-slide img {
3407        filter: saturate(1.5) contrast(1.2) brightness(1.05) !important;
3408        -webkit-filter: saturate(1.5) contrast(1.2) brightness(1.05) !important;
3409    }
3410</style>
3411
3412<!-- Swiper JS -->
3413<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
vendor: 1 bytes, line 3413
3413
3414<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.2/vanilla-tilt.min.js"></script>
3414
3415
3416<!-- Script para manejar la navegación con scroll suave y las inicializaciones -->
3417<script>
3418    document.addEventListener('DOMContentLoaded', function() {
3419        // Forzar el scroll a la parte superior de la página al cargar
3420        window.scrollTo(0, 0);
3421        history.scrollRestoration = 'manual'; // Prevenir restauración automática de scroll
3422        
3423        // Asegurarse de que la sección de inicio sea la primera en mostrarse
3424        setTimeout(function() {
3425            window.scrollTo(0, 0);
3426        }, 100);
3427        
3428        // Marcar el enlace activo en el menú al hacer scroll
3429        const sections = document.querySelectorAll('.section-page');
3430        const menuLinks = document.querySelectorAll('.likecheck-menu-item');
3431        
3432        function getCurrentSection() {
3433            let current = '';
3434            
3435            sections.forEach(section => {
3436                const sectionTop = section.offsetTop;
3437                const sectionHeight = section.clientHeight;
3438                
3439                if (pageYOffset >= (sectionTop - 150)) {
3440                    current = section.getAttribute('id');
3441                }
3442            });
3443            
3444            // Si no hay sección activa o está al inicio de la página, seleccionar 'inicio'
3445            if (current === '' || pageYOffset < 100) {
3446                current = 'inicio';
3447            }
3448            
3449            return current;
3450        }
3451        
3452        function highlightActiveLink() {
3453            const currentSection = getCurrentSection();
3454            
3455            menuLinks.forEach(link => {
3456                link.classList.remove('active');
3457                const href = link.getAttribute('href');
3458                if (href && href.includes(currentSection)) {
3459                    link.classList.add('active');
3460                }
3461            });
3462        }
3463        
3464        // Actualizar enlace activo al hacer scroll
3465        window.addEventListener('scroll', highlightActiveLink);
3466        
3467        // Actualizar inicialmente
3468        highlightActiveLink();
3469        
3470        // NO inicializamos el Swiper del carrusel de clientes aquí
3471        // Lo inicializamos directamente en el archivo clientes.phtml con su propia lógica
3472        // Esto evita conflictos de inicialización
3473        
3474        // Inicializar VanillaTilt si existe
3475        if (typeof VanillaTilt !== 'undefined') {
3476            VanillaTilt.init(document.querySelectorAll('[data-tilt]'), {
3477                max: 15,
3478                speed: 400,
3479                glare: true,
3480                'max-glare': 0.3,
3481            });
3482        }
3483        
3484        // Animación para tarjetas de industria
3485        const industryCards = document.querySelectorAll('.industry-card');
3486        if (industryCards.length > 0) {
3487            const observer = new IntersectionObserver((entries) => {
3488                entries.forEach((entry, index) => {
3489                    if (entry.isIntersecting) {
3490                        setTimeout(() => {
3491                            entry.target.style.opacity = '1';
3492                            entry.target.style.transform = 'translateY(0)';
3493                        }, index * 100);
3494                        observer.unobserve(entry.target);
3495                    }
3496                });
3497            }, { threshold: 0.2 });
3498            
3499            industryCards.forEach(card => {
3500                card.style.opacity = '0';
3501                card.style.transform = 'translateY(50px)';
3502                observer.observe(card);
3503            });
3504        }
3505    });
3506</script>
3506
3507
3508<!-- Cierre forzado de secciones -->
3509</div>
3510</div>
3511</section>
3512
3513<!-- Footer de LikeCheck -->
3514<!-- Agrega en el <head> -->
3515<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
3516
3517<!-- Cerrar todas las etiquetas que pudieran estar abiertas -->
3518</div>
3519</div>
3520</section>
3521</div>
3522
3523<!-- Estilos para forzar la visualización del footer sin afectar otros elementos -->
3524<style>
3525.likecheck-footer {
3526    display: block !important;
3527    position: relative !important;
3528    z-index: 99 !important;
3529    margin-top: 30px !important;
3530    visibility: visible !important;
3531    opacity: 1 !important;
3532    transform: none !important;
3533    clear: both !important;
3534    overflow: visible !important;
3535}
3536
3537/* Estilos para restaurar el carrusel correctamente */
3538.swiper-container, .swiper-wrapper {
3539    overflow: visible !important;
3540    height: auto !important;
3541    max-height: none !important;
3542}
3543
3544/* Asegurar que los botones de navegación sean bien visibles */
3545.swiper-button-next, .swiper-button-prev {
3546    opacity: 1 !important;
3547    visibility: visible !important;
3548    z-index: 10 !important;
3549}
3550</style>
3551
3552<!-- Footer de LikeCheck -->  
3553    <footer class="likecheck-footer" style="background: linear-gradient(135deg, #182c83 0%, #1e3dad 50%, #0799B6 100%); color: white; padding: 30px 0 0; margin-top: auto; width: 100%; bottom: 0; box-shadow: 0 -5px 15px rgba(0,0,0,0.1); border-top: 3px solid #0799B6; position: relative; overflow: hidden;">
3554        <!-- Elementos decorativos sutiles -->
3555        <div class="light-effect" style="position: absolute; top: -50px; right: -50px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(7,153,182,0.2) 0%, rgba(255,255,255,0) 70%); filter: blur(30px); z-index: 1;"></div>
3556        <div class="container" style="position: relative; z-index: 5;">
3557            <!-- Header del Footer con estilo elegante -->
3558            <div class="text-center mb-4">
3559                <h2 style="font-weight: 700; font-size: 2rem; text-transform: uppercase; margin-bottom: 12px; color: #0799B6;">LikeCheck</h2>
3560                <div class="separator" style="height: 3px; width: 60px; margin: 0 auto; background: #0799B6; border-radius: 2px;"></div>
3561            </div>
3562            <div class="row">
3563                <div class="col-md-3 mb-4">
3564                    <!-- Contenedor de logos simplificados -->
3565                    <div class="footer-logo" style="position: relative; margin-bottom: 20px; padding: 15px; text-align: center; background: rgba(255,255,255,0.05); border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.1);">
3566                        <div class="logo-container" style="display: flex; align-items: center; justify-content: center; padding: 10px 0;">
3567                            <!-- Logo completo centrado -->
3568                            <div style="display: flex; align-items: center; justify-content: center;">
3569                                <img src="https://likephone.mx/resources/assets/images/likecheck/Logo.png" style="width: 40px; height: auto; filter: drop-shadow(0 3px 5px rgba(0,0,0,0.2));" alt="LikeCheck" class="img-fluid">
3570                                <img src="https://likephone.mx/resources/assets/images/likecheck/LikeCheck.png" style="width: auto; max-height: 30px; margin-left: 8px; filter: brightness(0) invert(1);" alt="LikeCheck" class="img-fluid">
3571                            </div>
3572                        </div>
3573                    </div>
3574                    
3575                    <!-- Descripción simplificada -->
3576                    <p style="font-size: 15px; line-height: 1.6; margin-bottom: 20px; padding: 10px; border-left: 3px solid #0799B6;">
3577                        LikeCheck es una solución para empresas que buscan supervisar en tiempo real a su personal, garantizando control y cumplimiento.
3578                    </p>
3579                    
3580                    
3581                </div>
3582                
3583                <!-- Sección de LikePhone -->
3584                <div class="col-md-3 mb-4">
3585                    <!-- Se reemplazó todo el bloque del recuadro blanco por la imagen -->
3586                    <div style="text-align: center; margin-bottom: 20px;">
3587                        <a href="https://likephone.mx/" style="display: inline-block;">
3588                            <img style="width: 250px; margin-top: -12px;" src="https://likephone.mx/public/web/images/logo-3.png" alt="LikePhone" title="LikePhone">
3589                            <i class="fas fa-arrow-left" style="margin-right: 8px;"></i>Ir a LikePhone
3590                        </a>
3591                    </div>
3592                    <p style="font-size: 15px; line-height: 1.6; margin-bottom: 20px; padding: 10px; border-left: 3px solid #0799B6;">
3593                        Conoce <span style="color: #0799B6; font-weight: 600;">LikePhone</span>
3593, la red móvil con los mejores planes para empresas. Visita nuestro sitio principal:
3594                    </p>
3595                </div>
3596
3597                <div class="col-md-3 mb-4">
3598                    <!-- Enlaces Rápidos simplificados -->
3599                    <div class="quick-links-wrapper" style="padding: 15px;">
3600                        <h5 style="color: #0799B6; margin-bottom: 15px; border-bottom: 2px solid #0799B6; padding-bottom: 8px;">
3601                            <i class="fas fa-link" style="margin-right: 8px;"></i>Enlaces Rápidos
3602                        </h5>
3603                        
3604                        <ul class="list-unstyled" style="font-size: 15px;">
3605                            <li style="margin-bottom: 10px;">
3606                                <a href="https://likephone.mx/likecheck" style="color: #fff; text-decoration: none;">
3607                                    <i class="fas fa-home" style="color: #0799B6; margin-right: 8px;"></i>Inicio
3608                                </a>
3609                            </li>
3610                            <li style="margin-bottom: 10px;">
3611                                <a href="https://likephone.mx/likecheck/funcionalidades" style="color: #fff; text-decoration: none;">
3612                                    <i class="fas fa-cogs" style="color: #0799B6; margin-right: 8px;"></i>Funcionalidades
3613                                </a>
3614                            </li>
3615                            <li style="margin-bottom: 10px;">
3616                                <a href="https://likephone.mx/likecheck/appcrm" style="color: #fff; text-decoration: none;">
3617                                    <i class="fas fa-mobile-alt" style="color: #0799B6; margin-right: 8px;"></i>APP & CRM
3618                                </a>
3619                            </li>
3620                            <li style="margin-bottom: 10px;">
3621                                <a href="https://likephone.mx/likecheck/planes" style="color: #fff; text-decoration: none;">
3622                                    <i class="fas fa-clipboard-list" style="color: #0799B6; margin-right: 8px;"></i>Planes
3623                                </a>
3624                            </li>
3625                            <li style="margin-bottom: 10px;">
3626                                <a href="https://likephone.mx/likecheck/cotizador" style="color: #fff; text-decoration: none;">
3627                                    <i class="fas fa-calculator" style="color: #0799B6; margin-right: 8px;"></i>Cotizador
3628                                </a>
3629                            </li>
3630                            <li style="margin-bottom: 10px;">
3631                                <a href="https://likephone.mx/likecheck/clientes" style="color: #fff; text-decoration: none;">
3632                                    <i class="fas fa-users" style="color: #0799B6; margin-right: 8px;"></i>Clientes
3633                                </a>
3634                            </li>
3635                            <li>
3636                                <a href="https://likephone.mx/likecheck/contactanos" style="color: #fff; text-decoration: none;">
3637                                    <i class="fas fa-envelope" style="color: #0799B6; margin-right: 8px;"></i>Contáctanos
3638                                </a>
3639                            </li>
3640                        </ul>
3641                    </div>
3642                </div>
3643                
3644                <div class="col-md-3">
3645                    <!-- Contáctanos simplificado -->
3646                    <div class="contact-wrapper" style="padding: 15px;">
3647                        <h5 style="color: #0799B6; margin-bottom: 15px; border-bottom: 2px solid #0799B6; padding-bottom: 8px;">
3648                            <i class="fas fa-headset" style="margin-right: 8px;"></i>Contáctanos
3649                        </h5>
3650                        
3651                        <ul class="list-unstyled" style="font-size: 15px;">
3652                            <li style="margin-bottom: 12px;">
3653                                <i class="fas fa-map-marker-alt" style="color: #0799B6; margin-right: 10px;"></i>
3654                                Dirección: Humberto Junco Voigt 2307, Valle Oriente, 66266 San Pedro Garza García, N.L.
3655                            </li>
3656                            <li style="margin-bottom: 12px;">
3657                                <i class="fas fa-phone" style="color: #0799B6; margin-right: 10px;"></i>
3658                                8141255095
3659                            </li>
3660                            <li>
3661                                <i class="fas fa-envelope" style="color: #0799B6; margin-right: 10px;"></i>
3662                                [email protected]
3663                            </li>
3664                        </ul>
3665                    </div>
3666                    <!-- Iconos sociales simplificados -->
3667                    <h6 style="font-size: 14px; margin-bottom: 12px; color: white; font-weight: bold;">Siguenos en redes sociales</h6>
3668                        <div class="social-icons" style="display: flex; justify-content: flex-start; gap: 15px;">
3669                            <a href="https://www.facebook.com/share/15caCvikaG/?mibextid=wwXIfr" class="social-icon facebook" target="_blank">
3670                                <i class="fab fa-facebook-f"></i>
3671                            </a>
3672                            <a href="https://www.instagram.com/likecheckoficial?igsh=Mmdvc3VjNHRnMWls" class="social-icon instagram" target="_blank">
3673                                <i class="fab fa-instagram"></i>
3674                            </a>
3675                            <a href="https://wa.link/nigs9o" class="social-icon whatsapp" target="_blank">
3676                                <i class="fab fa-whatsapp"></i>
3677                            </a>
3678                        </div>
3679                </div>
3680            </div>
3681            
3682            <!-- Footer Bottom con copyright simplificado -->
3683            <div class="py-3 mt-4 mb-0" style="border-top: 1px solid rgba(255,255,255,0.1);  text-align: center; font-size: 14px;">
3684                <div class="container">
3685                    <div class="row">
3686                        <div class="col-md-12">
3687                            <p class="m-0 pb-0">&copy; 2025 <a href="https://likephone.mx/likecheck" style="color: #0799B6; text-decoration: none;">LikeCheck</a> • Todos los derechos reservados</p>
3688                        </div>
3689                    </div>
3690                </div>
3691            </div>
3692
3693    <style>
3694    /* Estilos minimalistas para el footer */
3695    .likecheck-footer .social-icons a:hover {
3696        color: #0799B6;
3697    }
3698    
3699    .likecheck-footer .list-unstyled li a:hover {
3700        color: #0799B6 !important;
3701    }
3702    
3703    .likecheck-footer .contact-info li:hover {
3704        background: rgba(255,255,255,0.05);
3705    }
3706    </style>
3707        </div>
3708    </footer>
3709    
3710    <!-- Scripts esenciales -->
3711    
3711<script src="https://likephone.mx/resources/assets/libs/jquery/jquery.min.js"></script>
3711
3712    
3712<script src="https://likephone.mx/resources/assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
3712
3713    
3713<script src="https://likephone.mx/resources/assets/libs/metismenu/metisMenu.min.js"></script>
3713
3714    
3714<script src="https://likephone.mx/resources/assets/libs/simplebar/simplebar.min.js"></script>
3714
3715    
3715<script src="https://likephone.mx/resources/assets/libs/node-waves/waves.min.js"></script>
3715
3716
3717    <!-- Alertas y notificaciones -->
3718    
3718<script src="https://likephone.mx/resources/assets/libs/sweetalert2/sweetalert2.min.js"></script>
3718
3719    
3719<script src="https://likephone.mx/resources/assets/libs/alertifyjs/build/alertify.min.js"></script>
3719
3720
3721    <!-- Carousel -->
3722    
3722<script src="https://likephone.mx/public/OwlCarousel2-2.3.4/dist/owl.carousel.min.js"></script>
3722
3723
3724    <!-- Font Awesome ya está incluido en el header -->
3725     
3726    <!-- Scripts adicionales para LikeCheck -->
3727    
3727<script>
3728        $(document).ready(function() {
3729            console.log('Inicializando scripts adicionales para LikeCheck...');
3730            
3731            // Aplicar clase sticky-menu al cargar la página para mantener el estilo consistente
3732            var menuContainer = $('.likecheck-menu-container');
3733            menuContainer.addClass('sticky-menu');
3734            
3735            // Mantener el menú con efecto al hacer scroll
3736            $(window).scroll(function() {
3737                var scrollPos = $(window).scrollTop();
3738                if (scrollPos > 10) {
3739                    menuContainer.addClass('sticky-scroll');
3740                    // Aplicar efecto de transparencia basado en el scroll
3741                    var opacity = Math.max(0.5, Math.min(1 - (scrollPos / 500), 0.9));
3742                    menuContainer.css('background-color', 'rgba(58, 12, 163, ' + opacity + ')');
3743                    
3744                    // Reducir tamaño del menú al hacer scroll
3745                    menuContainer.css('height', '50px');
3746                    $('.likecheck-menu-item').css({
3747                        'padding': '2px 18px',
3748                        'font-size': '0.95rem',
3749                        'line-height': '40px'
3750                    });
3751                    
3752                    // Reducir tamaño de los logos
3753                    $('img[alt="Logo"]').css('max-width', '55px');
3754                    $('img[alt="LikeCheck"]').css('max-width', '100px');
3755                } else {
3756                    menuContainer.removeClass('sticky-scroll');
3757                    menuContainer.css('background-color', '#3a0ca3');
3758                    
3759                    // Restaurar tamaño normal
3760                    menuContainer.css('height', '80px');
3761                    $('.likecheck-menu-item').css({
3762                        'padding': '8px 18px',
3763                        'font-size': '1.1rem',
3764                        'line-height': '50px'
3765                    });
3766                    
3767                    // Restaurar tamaño de los logos
3768                    $('img[alt="Logo"]').css('max-width', '75px');
3769                    $('img[alt="LikeCheck"]').css('max-width', '120px');
3770                }
3771            });
3772            
3773            // Ejecutar el scroll handler inmediatamente para configurar el estado inicial
3774            $(window).trigger('scroll');
3775            
3776            // Destacar el elemento activo del menú
3777            var currentPath = window.location.pathname;
3778            console.log('Ruta actual:', currentPath);
3779            
3780            // Primero quitamos la clase active de todos los elementos
3781            $('.likecheck-menu-item').removeClass('active');
3782            
3783            // Luego aplicamos la clase al elemento correspondiente
3784            $('.likecheck-menu-item').each(function() {
3785                var href = $(this).attr('href');
3786                if (href) {
3787                    var section = href.split(BASE_URL)[1];
3788                    console.log('Comparando sección:', section);
3789                    if (currentPath.includes(section) && section !== 'likecheck') {
3790                        console.log('Activando sección:', section);
3791                        $(this).addClass('active');
3792                    }
3793                }
3794            });
3795            
3796            // Si no hay ninguna sección activa, activamos la primera por defecto
3797            if ($('.likecheck-menu-item.active').length === 0) {
3798                $('.likecheck-menu-item').first().addClass('active');
3799            }
3800            
3801            // Arreglar la navegación del menú
3802            $('.likecheck-menu-item').on('click', function(e) {
3803                console.log('Clic en elemento del menú');
3804                // No es necesario prevenir comportamiento por defecto
3805                // para permitir la navegación normal por enlace
3806            });
3807            
3808            console.log('Scripts adicionales inicializados correctamente');
3809        });
3810    </script>
3810
3811    <style>
3812        .social-icon {
3813        width: 40px;
3814        height: 40px;
3815        border-radius: 50%;
3816        background-color: #444;
3817        display: flex;
3818        align-items: center;
3819        justify-content: center;
3820        color: white;
3821        font-size: 18px;
3822        text-decoration: none;
3823        transition: transform 0.3s ease, background-color 0.3s ease;
3824        box-shadow: 0 4px 10px rgba(0,0,0,0.25);
3825        }
3826
3827        .social-icon:hover {
3828        transform: scale(1.1);
3829        }
3830
3831        .social-icon.facebook {
3832        background-color: #1877f2;
3833        }
3834
3835        .social-icon.instagram {
3836        background: radial-gradient(circle at 30% 30%, #feda75, #d62976, #962fbf, #4f5bd5);
3837        }
3838        .social-icon.whatsapp {
3839            background-color: #25d366;
3840        }
3841    </style>
3842
3843</body>
3844</html>
3845

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.