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">© 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.