-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
753 lines (707 loc) · 48.4 KB
/
Copy pathindex.html
File metadata and controls
753 lines (707 loc) · 48.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="CERTO — Plataforma de auditoría de cumplimiento normativo multi-estándar. ISO 27001, 9001, 14001, 22301, 45001, RGPD, ENS. Málaga, España.">
<meta name="keywords" content="auditoría ISO, cumplimiento normativo, ISO 27001 Málaga, certificación ISO, RGPD, ENS, consultoría cumplimiento">
<meta name="author" content="CERTO by Aion">
<meta property="og:title" content="CERTO · Auditoría de Cumplimiento Normativo">
<meta property="og:description" content="Evalúa, certifica y demuestra tu cumplimiento con las principales normas ISO, RGPD y ENS desde una única plataforma.">
<meta property="og:type" content="website">
<title>CERTO · Auditoría de Cumplimiento Normativo</title>
<style>
:root{--navy:#0a1628;--navy-light:#132238;--navy-lighter:#1b3050;--accent:#10b981;--accent-dark:#059669;--accent-light:#d1fae5;--blue:#3b82f6;--blue-light:#dbeafe;--gold:#f59e0b;--gold-light:#fef3c7;--white:#fff;--gray-50:#f8fafc;--gray-100:#f1f5f9;--gray-200:#e2e8f0;--gray-300:#cbd5e1;--gray-400:#94a3b8;--gray-500:#64748b;--gray-600:#475569;--gray-700:#334155;--gray-800:#1e293b;--font:'Inter',system-ui,-apple-system,sans-serif;--radius:14px;--radius-sm:10px;--shadow:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);--shadow-md:0 4px 12px rgba(0,0,0,.1),0 2px 4px rgba(0,0,0,.06);--shadow-lg:0 12px 40px rgba(0,0,0,.12),0 4px 12px rgba(0,0,0,.06);--shadow-xl:0 24px 60px rgba(0,0,0,.2)}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--gray-700);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:14px 0;transition:.35s;background:transparent}
.nav.scrolled{background:rgba(10,22,40,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.06);padding:10px 0;box-shadow:0 4px 30px rgba(0,0,0,.3)}
.nav-inner{max-width:1200px;margin:0 auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.nav-logo .nl-icon{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,#3b82f6,#10b981);display:grid;place-items:center;font-size:17px;font-weight:900;color:#fff;box-shadow:0 4px 16px rgba(59,130,246,.35)}
.nav-logo .nl-text{font-size:20px;font-weight:800;color:#fff;letter-spacing:-.02em}
.nav-logo .nl-sub{display:block;font-size:9px;letter-spacing:.14em;color:rgba(255,255,255,.45);text-transform:uppercase;margin-top:-2px}
.nav-links{display:flex;align-items:center;gap:32px;list-style:none}
.nav-links a{color:rgba(255,255,255,.72);text-decoration:none;font-size:13.5px;font-weight:500;transition:.2s;position:relative}
.nav-links a:hover{color:#fff}
.nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--accent);border-radius:1px;transition:.25s}
.nav-links a:hover::after{width:100%}
.nav-cta{padding:9px 20px;border-radius:8px;font-size:13px;font-weight:600;background:var(--accent);color:#fff;text-decoration:none;transition:.25s;box-shadow:0 4px 16px rgba(16,185,129,.3)}
.nav-cta:hover{background:var(--accent-dark);transform:translateY(-1px);box-shadow:0 6px 24px rgba(16,185,129,.4)}
.nav-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px}
.nav-toggle span{width:24px;height:2px;background:#fff;border-radius:1px;transition:.3s}
/* HERO */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--navy);overflow:hidden;padding:120px 28px 80px}
.hero-bg{position:absolute;inset:0;pointer-events:none}
.hero-bg .orb{position:absolute;border-radius:50%;filter:blur(120px);opacity:.15}
.hero-bg .orb-1{width:600px;height:600px;background:#3b82f6;top:-200px;right:-100px;animation:float 12s ease-in-out infinite}
.hero-bg .orb-2{width:400px;height:400px;background:#10b981;bottom:-150px;left:-100px;animation:float 15s ease-in-out infinite reverse}
.hero-bg .orb-3{width:300px;height:300px;background:#8b5cf6;top:50%;left:50%;transform:translate(-50%,-50%);animation:float 18s ease-in-out infinite}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-30px) scale(1.05)}66%{transform:translate(-20px,20px) scale(.95)}}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:60px 60px}
.hero-content{position:relative;z-index:2;text-align:center;max-width:800px}
.hero-badge{display:inline-block;padding:6px 16px;border-radius:20px;border:1px solid rgba(16,185,129,.3);background:rgba(16,185,129,.08);font-size:12px;font-weight:600;color:#6ee7b7;letter-spacing:.06em;margin-bottom:28px}
.hero h1{font-size:clamp(36px,6vw,64px);font-weight:900;line-height:1.12;letter-spacing:-.03em;color:#fff;margin-bottom:20px}
.hero h1 span{background:linear-gradient(135deg,#6ee7b7,#3b82f6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero p{font-size:18px;color:rgba(255,255,255,.55);max-width:580px;margin:0 auto 36px;line-height:1.7}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.btn{padding:14px 32px;border-radius:10px;font-size:14.5px;font-weight:700;cursor:pointer;transition:.25s;text-decoration:none;display:inline-flex;align-items:center;gap:8px;letter-spacing:.02em;border:none}
.btn-primary{background:linear-gradient(135deg,#10b981,#059669);color:#fff;box-shadow:0 8px 32px rgba(16,185,129,.35)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(16,185,129,.45)}
.btn-secondary{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(8px)}
.btn-secondary:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.25);transform:translateY(-2px)}
.btn-white{background:#fff;color:var(--navy);box-shadow:0 4px 16px rgba(0,0,0,.12)}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,.18)}
.hero-stats{display:flex;gap:48px;justify-content:center;margin-top:60px;flex-wrap:wrap}
.hero-stat{text-align:center}
.hero-stat .hs-num{font-size:36px;font-weight:900;color:#fff;letter-spacing:-.02em}
.hero-stat .hs-label{font-size:12px;color:rgba(255,255,255,.4);letter-spacing:.05em;text-transform:uppercase;margin-top:4px}
/* SCROLL INDICATOR */
.scroll-indicator{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;animation:bounce 2s infinite;z-index:2}
.scroll-indicator span{font-size:10px;letter-spacing:.1em;color:rgba(255,255,255,.3);text-transform:uppercase}
.scroll-indicator svg{width:20px;height:20px;opacity:.3}
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(8px)}}
/* SECTIONS */
section{padding:100px 28px}
.section-inner{max-width:1140px;margin:0 auto}
.section-label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.section-title{font-size:clamp(28px,4vw,42px);font-weight:900;line-height:1.2;letter-spacing:-.02em;color:var(--gray-800);margin-bottom:16px}
.section-sub{font-size:16px;color:var(--gray-500);max-width:600px;line-height:1.7}
.text-center{text-align:center}
.mx-auto{margin-left:auto;margin-right:auto}
/* FEATURES */
#features{background:var(--gray-50)}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
.feature-card{background:var(--white);border-radius:var(--radius);padding:32px 28px;border:1px solid var(--gray-200);transition:.3s;position:relative;overflow:hidden}
.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:transparent}
.feature-card::before{content:'';position:absolute;top:0;left:0;width:4px;height:40px;background:var(--accent);border-radius:0 0 4px 0;opacity:0;transition:.25s}
.feature-card:hover::before{opacity:1;height:60px}
.feature-card .fc-icon{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;font-size:22px;margin-bottom:18px}
.fc-icon.green{background:var(--accent-light);color:var(--accent)}
.fc-icon.blue{background:var(--blue-light);color:var(--blue)}
.fc-icon.gold{background:var(--gold-light);color:var(--gold)}
.feature-card h3{font-size:17px;font-weight:700;color:var(--gray-800);margin-bottom:8px}
.feature-card p{font-size:13.5px;color:var(--gray-500);line-height:1.65}
/* NORMS */
#norms{background:var(--white)}
.norms-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:56px}
.norm-card{border:1px solid var(--gray-200);border-radius:var(--radius);padding:24px 20px;text-align:center;transition:.3s;background:var(--white)}
.norm-card:hover{border-color:var(--accent);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.norm-card .nc-icon{font-size:32px;margin-bottom:12px}
.norm-card .nc-name{font-size:13px;font-weight:700;color:var(--gray-800);margin-bottom:4px}
.norm-card .nc-count{font-size:11px;color:var(--gray-400)}
.norms-total{text-align:center;margin-top:32px;font-size:15px;font-weight:700;color:var(--accent)}
/* HOW IT WORKS */
#how{background:var(--gray-50)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:56px}
.step{text-align:center;position:relative}
.step::after{content:'';position:absolute;top:36px;right:-16px;width:60px;height:2px;background:var(--gray-200);border-radius:1px}
.step:last-child::after{display:none}
.step .s-circle{width:72px;height:72px;border-radius:50%;margin:0 auto 20px;display:grid;place-items:center;font-size:24px;font-weight:900;color:var(--accent);background:var(--accent-light);border:3px solid var(--accent)}
.step h3{font-size:17px;font-weight:700;color:var(--gray-800);margin-bottom:6px}
.step p{font-size:13.5px;color:var(--gray-500);line-height:1.6}
/* PRICING */
#pricing{background:var(--white)}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px;align-items:stretch}
.pricing-card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius);padding:36px 28px;transition:.3s;display:flex;flex-direction:column}
.pricing-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.pricing-card.popular{border:2px solid var(--accent);position:relative;box-shadow:var(--shadow-lg);transform:scale(1.04)}
.pricing-card.popular:hover{transform:scale(1.04) translateY(-4px)}
.pricing-card .pc-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;padding:5px 18px;border-radius:14px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.pricing-card .pc-name{font-size:18px;font-weight:800;color:var(--gray-800);margin-bottom:4px}
.pricing-card .pc-desc{font-size:12.5px;color:var(--gray-400);margin-bottom:24px}
.pricing-card .pc-price{font-size:44px;font-weight:900;color:var(--navy);letter-spacing:-.03em;line-height:1}
.pricing-card .pc-price small{font-size:13px;font-weight:500;color:var(--gray-400)}
.pricing-card .pc-period{font-size:12px;color:var(--gray-400);margin-bottom:24px}
.pricing-card .pc-features{list-style:none;flex:1;margin-bottom:24px}
.pricing-card .pc-features li{padding:8px 0;font-size:13.5px;color:var(--gray-600);border-bottom:1px solid var(--gray-100);display:flex;align-items:center;gap:8px}
.pricing-card .pc-features li::before{content:'✓';color:var(--accent);font-weight:800;font-size:12px}
.pricing-card .btn{width:100%;justify-content:center;text-align:center}
.pricing-note{text-align:center;margin-top:20px;font-size:12px;color:var(--gray-400)}
/* TESTIMONIALS */
#testimonials{background:var(--gray-50)}
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
.testimonial-card{background:var(--white);border-radius:var(--radius);padding:28px;border:1px solid var(--gray-200);transition:.3s}
.testimonial-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.testimonial-card .tc-stars{color:#f59e0b;font-size:14px;margin-bottom:16px;letter-spacing:2px}
.testimonial-card .tc-quote{font-size:13.5px;color:var(--gray-600);line-height:1.7;margin-bottom:20px;font-style:italic}
.testimonial-card .tc-author{display:flex;align-items:center;gap:12px}
.testimonial-card .tc-avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:16px;color:#fff}
.testimonial-card .tc-info .tci-name{font-size:13.5px;font-weight:700;color:var(--gray-800)}
.testimonial-card .tc-info .tci-role{font-size:11.5px;color:var(--gray-400)}
/* CONTACT */
#contact{background:var(--navy);position:relative;overflow:hidden}
#contact .orb{position:absolute;border-radius:50%;filter:blur(100px);opacity:.1}
#contact .orb-1{width:400px;height:400px;background:#10b981;top:-100px;right:-100px}
#contact .orb-2{width:300px;height:300px;background:#3b82f6;bottom:-100px;left:-100px}
#contact .section-label{color:#6ee7b7}
#contact .section-title{color:#fff}
#contact .section-sub{color:rgba(255,255,255,.5)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:48px;position:relative;z-index:2}
.contact-info{color:rgba(255,255,255,.7)}
.contact-info h3{font-size:22px;font-weight:800;color:#fff;margin-bottom:12px}
.contact-info p{font-size:14px;line-height:1.7;margin-bottom:28px}
.contact-detail{display:flex;align-items:center;gap:12px;margin-bottom:16px;font-size:13.5px}
.contact-detail .cd-icon{width:36px;height:36px;border-radius:8px;background:rgba(255,255,255,.08);display:grid;place-items:center;font-size:16px}
.contact-form{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:32px;backdrop-filter:blur(12px)}
.contact-form .cf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;padding:12px 16px;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#fff;font-size:13.5px;font-family:var(--font);outline:none;transition:.25s}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(16,185,129,.1);background:rgba(255,255,255,.06)}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:rgba(255,255,255,.3)}
.contact-form select{color:#fff;appearance:none}
.contact-form select option{background:var(--navy);color:#fff}
.contact-form textarea{min-height:120px;resize:vertical}
.contact-form .btn{width:100%;justify-content:center;margin-top:8px}
.form-success{display:none;text-align:center;padding:40px 20px}
.form-success .fs-icon{font-size:48px;margin-bottom:16px}
.form-success h3{font-size:20px;color:#6ee7b7;margin-bottom:8px}
.form-success p{color:rgba(255,255,255,.5);font-size:14px}
/* CLIENTS */
#clients{padding:60px 28px;background:var(--white);border-bottom:1px solid var(--gray-100)}
.clients-row{display:flex;justify-content:center;align-items:center;gap:48px;flex-wrap:wrap;opacity:.45}
.clients-row span{font-size:24px;font-weight:800;color:var(--gray-400);letter-spacing:-.01em;filter:grayscale(1)}
/* FOOTER */
.footer{background:var(--navy);border-top:1px solid rgba(255,255,255,.06);padding:48px 28px 28px}
.footer-inner{max-width:1140px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
.footer-col h4{font-size:13px;font-weight:700;color:#fff;margin-bottom:16px;letter-spacing:.04em}
.footer-col a,.footer-col p{display:block;font-size:13px;color:rgba(255,255,255,.45);text-decoration:none;margin-bottom:8px;transition:.2s}
.footer-col a:hover{color:var(--accent)}
.footer-bottom{margin-top:40px;padding-top:24px;border-top:1px solid rgba(255,255,255,.06);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:12px;color:rgba(255,255,255,.25)}
.footer-bottom a{color:rgba(255,255,255,.35);text-decoration:none}
.footer-bottom a:hover{color:var(--accent)}
/* RESPONSIVE */
@media(max-width:960px){
.features-grid,.steps,.testimonials-grid{grid-template-columns:1fr}
.pricing-grid{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto}
.pricing-card.popular{transform:none}
.pricing-card.popular:hover{transform:translateY(-4px)}
.norms-grid{grid-template-columns:repeat(2,1fr)}
.contact-grid{grid-template-columns:1fr}
.contact-form .cf-row{grid-template-columns:1fr}
.footer-inner{grid-template-columns:1fr 1fr}
.step::after{display:none}
.hero-stats{gap:28px}
}
@media(max-width:640px){
.nav-links{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(10,22,40,.98);flex-direction:column;justify-content:center;align-items:center;gap:28px;z-index:99}
.nav-links.open{display:flex}
.nav-toggle{display:flex;z-index:101}
.hero h1{font-size:32px}
.hero p{font-size:15px}
.hero-actions{flex-direction:column;align-items:center}
.norms-grid{grid-template-columns:1fr}
.footer-inner{grid-template-columns:1fr}
section{padding:64px 20px}
}
/* ANIMATIONS */
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.animate{opacity:0;transform:translateY(30px);transition:.7s cubic-bezier(.22,1,.36,1)}
.animate.visible{opacity:1;transform:translateY(0)}
/* TOAST */
#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(100px);z-index:300;background:var(--accent);color:#fff;padding:12px 24px;border-radius:10px;font-size:13px;font-weight:600;box-shadow:0 10px 40px rgba(0,0,0,.4);transition:.35s;opacity:0;pointer-events:none}
#toast.show{transform:translateX(-50%) translateY(0);opacity:1}
/* LEGAL MODAL */
.modal-overlay{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;pointer-events:none;transition:.3s}
.modal-overlay.show{opacity:1;visibility:visible;pointer-events:auto}
.modal-content{background:#fff;border-radius:var(--radius);padding:32px;max-width:600px;width:100%;max-height:80vh;overflow-y:auto;box-shadow:var(--shadow-xl)}
.modal-content h3{font-size:18px;font-weight:800;color:var(--navy);margin-bottom:16px}
.modal-content p,.modal-content li{font-size:13.5px;color:var(--gray-600);line-height:1.7;margin-bottom:10px}
.modal-content ul{padding-left:20px}
.modal-close{margin-top:20px;text-align:right}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
</head>
<body>
<!-- NAV -->
<nav class="nav" id="nav">
<div class="nav-inner">
<a href="#" class="nav-logo">
<div class="nl-icon">C</div>
<div><span class="nl-text">CERTO</span><span class="nl-sub">Compliance & Risk</span></div>
</a>
<ul class="nav-links" id="navLinks">
<li><a href="#features">Funcionalidades</a></li>
<li><a href="#norms">Normas</a></li>
<li><a href="#pricing">Planes</a></li>
<li><a href="#testimonials">Casos de éxito</a></li>
<li><a href="#contact">Contacto</a></li>
<li><a href="demo-tour.html" class="nav-cta">Ver demo →</a></li>
</ul>
<div class="nav-toggle" id="navToggle"><span></span><span></span><span></span></div>
</div>
</nav>
<!-- HERO -->
<section class="hero" id="hero">
<div class="hero-bg">
<div class="orb orb-1"></div>
<div class="orb orb-2"></div>
<div class="orb orb-3"></div>
<div class="hero-grid"></div>
</div>
<div class="hero-content">
<div class="hero-badge">🔐 Plataforma de Auditoría Multi-Norma</div>
<h1>Convierte el <span>cumplimiento</span> en tu ventaja competitiva</h1>
<p>Evalúa, certifica y demuestra tu conformidad con ISO 27001, 9001, 14001, RGPD, ENS y más. Todo desde una plataforma inteligente diseñada para empresas.</p>
<div class="hero-actions">
<a href="informes.html" class="btn btn-primary">Ver informes demo →</a>
<a href="#pricing" class="btn btn-secondary">Ver planes ▾</a>
<a href="demo-tour.html" class="btn btn-white">🎬 Ver demo interactiva</a>
</div>
<div class="hero-stats">
<div class="hero-stat"><div class="hs-num">156+</div><div class="hs-label">Controles evaluables</div></div>
<div class="hero-stat"><div class="hs-num">7</div><div class="hs-label">Normas soportadas</div></div>
<div class="hero-stat"><div class="hs-num"><30min</div><div class="hs-label">Primera auditoría</div></div>
<div class="hero-stat"><div class="hs-num">Málaga</div><div class="hs-label">Desarrollado aquí</div></div>
</div>
</div>
<div class="scroll-indicator"><span>Descubre más</span><svg viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,.3)" stroke-width="2"><path d="M7 13l5 5 5-5M7 6l5 5 5-5"/></svg></div>
</section>
<!-- CLIENTS -->
<div id="clients">
<div class="section-inner text-center">
<p style="font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-400);margin-bottom:20px">Confían en estándares que CERTO audita</p>
<div class="clients-row">
<span>Telefónica</span><span>Indra</span><span>Ayesa</span><span>Dekra</span><span>SGS</span><span>Bureau Veritas</span>
</div>
</div>
</div>
<!-- FEATURES -->
<section id="features">
<div class="section-inner">
<div class="text-center"><div class="section-label">Funcionalidades</div><h2 class="section-title">Todo lo que necesitas para auditar</h2><p class="section-sub mx-auto">Una plataforma integral que cubre cada fase del ciclo de auditoría: desde la evaluación inicial hasta el informe profesional.</p></div>
<div class="features-grid animate">
<div class="feature-card"><div class="fc-icon green">📋</div><h3>Cuestionario inteligente</h3><p>156 controles preconfigurados con preguntas claras y opciones: Conforme, Parcial, No Conforme o No Aplica. Responde en minutos.</p></div>
<div class="feature-card"><div class="fc-icon blue">📊</div><h3>Dashboard en tiempo real</h3><p>Visualiza tu puntuación por norma, tema y control. KPIs actualizados al instante con gráficos de barras y semáforos de riesgo.</p></div>
<div class="feature-card"><div class="fc-icon gold">🛠️</div><h3>Plan de cumplimiento</h3><p>Identifica automáticamente las brechas y obtén un plan priorizado con acciones concretas, responsables sugeridos y plazos.</p></div>
<div class="feature-card"><div class="fc-icon green">📄</div><h3>Informes profesionales</h3><p>Exporta informes con estructura ISO 19011: portada, control documental, resumen ejecutivo, matriz de hallazgos y dictamen.</p></div>
<div class="feature-card"><div class="fc-icon blue">💾</div><h3>Persistencia local</h3><p>Tus datos se guardan en tu navegador con localStorage. Sin servidores, sin nube, sin fugas. 100% privacidad.</p></div>
<div class="feature-card"><div class="fc-icon gold">🔐</div><h3>Multi-estándar</h3><p>Audita todas tus normas desde una sola herramienta: ISO 27001, 9001, 14001, 22301, 45001, RGPD y ENS.</p></div>
</div>
</div>
</section>
<!-- NORMS -->
<section id="norms">
<div class="section-inner">
<div class="text-center"><div class="section-label">Normas soportadas</div><h2 class="section-title">Siete estándares, una plataforma</h2><p class="section-sub mx-auto">CERTO cubre las principales normativas que exigen los pliegos públicos, las certificaciones internacionales y la legislación española.</p></div>
<div class="norms-grid animate">
<div class="norm-card"><div class="nc-icon">🔐</div><div class="nc-name">ISO/IEC 27001:2022</div><div class="nc-count">71 controles · Seguridad de la información</div></div>
<div class="norm-card"><div class="nc-icon">✅</div><div class="nc-name">ISO 9001:2015</div><div class="nc-count">19 controles · Gestión de calidad</div></div>
<div class="norm-card"><div class="nc-icon">🌿</div><div class="nc-name">ISO 14001:2015</div><div class="nc-count">11 controles · Gestión ambiental</div></div>
<div class="norm-card"><div class="nc-icon">🔄</div><div class="nc-name">ISO 22301:2019</div><div class="nc-count">11 controles · Continuidad de negocio</div></div>
<div class="norm-card"><div class="nc-icon">📜</div><div class="nc-name">RGPD / LOPDGDD</div><div class="nc-count">17 controles · Protección de datos</div></div>
<div class="norm-card"><div class="nc-icon">🇪🇸</div><div class="nc-name">ENS · RD 311/2022</div><div class="nc-count">15 controles · Esquema Nacional</div></div>
<div class="norm-card"><div class="nc-icon">👷</div><div class="nc-name">ISO 45001:2018</div><div class="nc-count">12 controles · Seguridad laboral</div></div>
</div>
<p class="norms-total">156 controles evaluables · actualizados a las versiones vigentes en 2026</p>
</div>
</section>
<!-- HOW IT WORKS -->
<section id="how">
<div class="section-inner">
<div class="text-center"><div class="section-label">Cómo funciona</div><h2 class="section-title">Tres pasos hacia el cumplimiento</h2></div>
<div class="steps animate">
<div class="step"><div class="s-circle">1</div><h3>Selecciona tu norma</h3><p>Elige entre ISO 27001, 9001, 14001, RGPD, ENS y más. Configura tu organización y sector.</p></div>
<div class="step"><div class="s-circle">2</div><h3>Responde el cuestionario</h3><p>Evalúa cada control con ✔ Conforme, ◐ Parcial, ✖ No Conforme o ⊘ N/A. La plataforma calcula tu puntuación en tiempo real.</p></div>
<div class="step"><div class="s-circle">3</div><h3>Obtén tu informe</h3><p>Recibe un informe profesional con dictamen, brechas detectadas y plan de acción priorizado. Exporta a PDF o Markdown.</p></div>
</div>
</div>
</section>
<!-- PRICING -->
<section id="pricing">
<div class="section-inner">
<div class="text-center"><div class="section-label">Planes</div><h2 class="section-title">Inversión transparente</h2><p class="section-sub mx-auto">Desde autónomos hasta multinacionales. Sin permanencia, sin sorpresas.</p></div>
<div class="pricing-grid animate">
<div class="pricing-card">
<div class="pc-name">Essentials</div>
<div class="pc-desc">Para autónomos y microempresas que inician su camino en compliance</div>
<div class="pc-price">290€<small>/año</small></div>
<div class="pc-period">24,17 €/mes facturado anualmente</div>
<ul class="pc-features">
<li>1 norma a elegir</li>
<li>Cuestionario completo con 156 controles</li>
<li>Dashboard de resultados</li>
<li>Plan de cumplimiento básico</li>
<li>Exportación a Markdown</li>
<li>Soporte por email en 48h</li>
</ul>
<a href="demo-tour.html" class="btn btn-secondary" style="color:var(--navy);border-color:var(--gray-300);justify-content:center">Ver demo tour</a>
</div>
<div class="pricing-card popular">
<div class="pc-badge">Más popular</div>
<div class="pc-name">Professional</div>
<div class="pc-desc">Para pymes y consultoras que gestionan múltiples normas</div>
<div class="pc-price">790€<small>/año</small></div>
<div class="pc-period">65,83 €/mes facturado anualmente</div>
<ul class="pc-features">
<li>Todas las normas (7 estándares)</li>
<li>Evaluación multi-norma simultánea</li>
<li>Dashboard avanzado con KPIs</li>
<li>Plan de cumplimiento priorizado</li>
<li>Informes profesionales ISO 19011</li>
<li>Exportación a Markdown + PDF</li>
<li>Soporte prioritario en 12h</li>
<li>Histórico de auditorías</li>
</ul>
<a href="informes.html" class="btn btn-primary" style="justify-content:center">Ver informes demo</a>
</div>
<div class="pricing-card">
<div class="pc-name">Enterprise</div>
<div class="pc-desc">Para corporaciones con necesidades de compliance avanzado</div>
<div class="pc-price">Consulta</div>
<div class="pc-period">Plan a medida según necesidades</div>
<ul class="pc-features">
<li>Todo lo de Professional</li>
<li>Normas personalizadas bajo demanda</li>
<li>Multi-usuario con roles (auditor, revisor, admin)</li>
<li>White label con tu marca</li>
<li>Integración vía API</li>
<li>Soporte telefónico 24/7</li>
<li>Formación in-company (Málaga)</li>
<li>SLA garantizado</li>
</ul>
<a href="#contact" class="btn btn-white" style="justify-content:center">Solicitar demo</a>
</div>
</div>
<p class="pricing-note">Todos los planes incluyen acceso completo durante el período contratado. Facturación con IVA. ¿Administración pública? <a href="#contact" style="color:var(--accent)">Consúltanos condiciones especiales</a>.</p>
</div>
</section>
<!-- TESTIMONIALS -->
<section id="testimonials">
<div class="section-inner">
<div class="text-center"><div class="section-label">Casos de éxito</div><h2 class="section-title">Empresas de Málaga que ya confían</h2><p class="section-sub mx-auto">Conoce cómo CERTO ha ayudado a organizaciones del tejido empresarial malagueño a preparar sus certificaciones.</p></div>
<div class="testimonials-grid animate">
<div class="testimonial-card">
<div class="tc-stars">★★★★★</div>
<p class="tc-quote">"Con CERTO preparamos nuestra auditoría ISO 27001 en tiempo récord. El plan de cumplimiento nos dio las acciones exactas que necesitábamos implementar. En tres meses obtuvimos la certificación."</p>
<div class="tc-author">
<div class="tc-avatar" style="background:linear-gradient(135deg,#3b82f6,#1d4ed8)">MC</div>
<div class="tc-info"><div class="tci-name">María Castillo</div><div class="tci-role">CTO · TechSolutions Málaga (PTA)</div></div>
</div>
</div>
<div class="testimonial-card">
<div class="tc-stars">★★★★★</div>
<p class="tc-quote">"Somos proveedores de la Junta de Andalucía y necesitábamos el ENS con urgencia. CERTO nos permitió hacer el autodiagnóstico en una mañana y presentar la declaración de aplicabilidad a la semana siguiente."</p>
<div class="tc-author">
<div class="tc-avatar" style="background:linear-gradient(135deg,#10b981,#047857)">AG</div>
<div class="tc-info"><div class="tci-name">Antonio Gutiérrez</div><div class="tci-role">Director de Operaciones · InnoSoftware (Polo Digital)</div></div>
</div>
</div>
<div class="testimonial-card">
<div class="tc-stars">★★★★★</div>
<p class="tc-quote">"Como consultora boutique, CERTO nos permite ofrecer diagnósticos multi-norma a nuestros clientes en horas en vez de semanas. El informe profesional que genera es impecable. Lo usamos en cada pre-auditoría."</p>
<div class="tc-author">
<div class="tc-avatar" style="background:linear-gradient(135deg,#f59e0b,#d97706)">LR</div>
<div class="tc-info"><div class="tci-name">Laura Romero</div><div class="tci-role">Socia Directora · Qualia Consulting (Málaga)</div></div>
</div>
</div>
</div>
</div>
</section>
<!-- SAMPLE REPORT -->
<section id="sample" style="background:var(--white)">
<div class="section-inner">
<div class="text-center"><div class="section-label">Informe de muestra</div><h2 class="section-title">Comprueba la calidad antes de decidir</h2><p class="section-sub mx-auto">Descarga un informe de auditoría real generado con CERTO. Sello profesional, firma digital, marca de agua, QR de verificación y formato ISO 19011. Ábrelo en tu navegador e imprímelo como PDF.</p></div>
<div style="max-width:680px;margin:48px auto 0;display:flex;gap:24px;align-items:stretch;flex-wrap:wrap">
<div style="flex:1;min-width:280px;background:var(--gray-50);border-radius:var(--radius);padding:32px 28px;border:1px solid var(--gray-200);text-align:center">
<div style="font-size:48px;margin-bottom:12px">📄</div>
<h3 style="font-size:16px;font-weight:700;color:var(--gray-800);margin-bottom:8px">Informe ISO 27001</h3>
<p style="font-size:13px;color:var(--gray-500);margin-bottom:8px">TecnoSUR Soluciones Digitales S.L.<br>80% cumplimiento · 71 controles · PTA Málaga</p>
<p style="font-size:11px;color:var(--gray-400);margin-bottom:20px">Incluye: portada, dictamen, hallazgos 5C,<br>plan de acción, firma digital, QR de verificación</p>
<button class="btn btn-primary" onclick="downloadSampleZip()" id="dlBtn" style="justify-content:center;width:100%;margin-bottom:10px">📥 Descargar informe demo (.zip)</button>
<a href="informe-demo.docx" class="btn btn-white" style="justify-content:center;width:100%;border:1px solid var(--gray-300);text-decoration:none;display:inline-flex">📝 Descargar en Word (.docx)</a>
<p style="font-size:10px;color:var(--gray-400);margin-top:10px" id="dlStatus">~55 KB HTML + ~16 KB DOCX · Se abre en cualquier navegador / Microsoft Word</p>
</div>
<div style="flex:1;min-width:280px;background:var(--gray-50);border-radius:var(--radius);padding:32px 28px;border:1px solid var(--gray-200);text-align:center">
<div style="font-size:48px;margin-bottom:12px">📊</div>
<h3 style="font-size:16px;font-weight:700;color:var(--gray-800);margin-bottom:8px">Galería completa</h3>
<p style="font-size:13px;color:var(--gray-500);margin-bottom:8px">7 normas · 7 empresas malagueñas<br>ISO 9001, 14001, 22301, 45001, RGPD, ENS</p>
<p style="font-size:11px;color:var(--gray-400);margin-bottom:20px">Todos los informes con datos realistas<br>de distintos sectores empresariales</p>
<a href="informes.html" class="btn btn-white" style="justify-content:center;width:100%;border:1px solid var(--gray-300)">🔍 Ver galería de informes</a>
</div>
</div>
<div style="max-width:680px;margin:24px auto 0;text-align:center">
<div style="background:linear-gradient(135deg,var(--navy),var(--navy-light));border-radius:var(--radius);padding:24px 28px;color:#fff;display:flex;align-items:center;gap:24px;flex-wrap:wrap;justify-content:center">
<div style="font-size:40px">📋</div>
<div style="text-align:left;flex:1;min-width:200px">
<h3 style="font-size:15px;font-weight:800;color:#6ee7b7;margin-bottom:4px">Brochure comercial one-pager</h3>
<p style="font-size:12px;color:rgba(255,255,255,.55);line-height:1.5">Diseñado para visitas comerciales al PTA. Una sola página A4 con todas las normas, planes, beneficios y datos de contacto. Ideal para dejar en mano.</p>
</div>
<a href="brochure-certo.html" class="btn btn-primary" style="white-space:nowrap">📥 Descargar brochure (PDF)</a>
</div>
</div>
</div>
</section>
<!-- CONTACT -->
<section id="contact">
<div class="orb orb-1"></div>
<div class="orb orb-2"></div>
<div class="section-inner" style="position:relative;z-index:2">
<div class="text-center"><div class="section-label">Contacto</div><h2 class="section-title">Hablemos de tu cumplimiento</h2><p class="section-sub mx-auto">Déjanos tus datos y te contactaremos para una demo personalizada sin compromiso. O escríbenos directamente.</p></div>
<div class="contact-grid">
<div class="contact-info">
<h3>Estamos en Málaga</h3>
<p>CERTO nace en el ecosistema tecnológico malagueño, cerca del PTA, el Polo Digital y el tejido empresarial andaluz. Entendemos tus necesidades porque compartimos tu contexto.</p>
<div class="contact-detail"><div class="cd-icon">📍</div> Málaga, Andalucía, España</div>
<div class="contact-detail"><div class="cd-icon">📧</div> certo@aionsincro.com</div>
<div class="contact-detail"><div class="cd-icon">📞</div> +34 951 000 000</div>
<div style="margin-top:24px;padding:20px;background:rgba(255,255,255,.04);border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.06)">
<p style="font-size:13px;font-weight:700;color:#6ee7b7;margin-bottom:6px">🏢 ¿Administración pública?</p>
<p style="font-size:12.5px;color:rgba(255,255,255,.5)">Consulta nuestras condiciones especiales para organismos públicos, licitaciones del ENS y contratos con la Junta de Andalucía.</p>
</div>
</div>
<div class="contact-form" id="contactForm">
<div id="formFields">
<!-- Web3Forms: cambia el valor de access_key por el tuyo (gratis en web3forms.com) -->
<input type="hidden" name="access_key" value="TU_ACCESS_KEY_DE_WEB3FORMS">
<input type="hidden" name="subject" value="Nuevo lead desde CERTO Landing">
<input type="hidden" name="from_name" value="CERTO Landing Page">
<!-- Web3Forms: redirige a la misma página tras envío fallback (no se usa con JS fetch) -->
<input type="hidden" name="redirect" value="">
<!-- Honeypot anti-spam: si un bot rellena esto, Web3Forms rechaza el envío -->
<input type="checkbox" name="botcheck" style="display:none !important" tabindex="-1" autocomplete="off">
<div class="cf-row">
<input type="text" name="nombre" placeholder="Nombre *" id="cfName" required>
<input type="text" name="empresa" placeholder="Empresa *" id="cfCompany" required>
</div>
<div class="cf-row">
<input type="email" name="email" placeholder="Email corporativo *" id="cfEmail" required>
<input type="tel" name="telefono" placeholder="Teléfono" id="cfPhone">
</div>
<div class="cf-row">
<select name="norma_interes" id="cfNorm" style="grid-column:1/-1">
<option value="">Norma de interés principal</option>
<option>ISO 27001 · Seguridad de la información</option>
<option>ISO 9001 · Gestión de calidad</option>
<option>ISO 14001 · Gestión ambiental</option>
<option>ISO 22301 · Continuidad de negocio</option>
<option>ISO 45001 · Seguridad laboral</option>
<option>RGPD / LOPDGDD</option>
<option>ENS · Esquema Nacional de Seguridad</option>
<option>Múltiples normas</option>
</select>
</div>
<textarea name="message" placeholder="Cuéntanos brevemente tu situación actual y qué necesitas... *" id="cfMessage" required></textarea>
<button class="btn btn-primary" onclick="submitForm()">Solicitar demo gratuita →</button>
<p style="font-size:11px;color:rgba(255,255,255,.25);text-align:center;margin-top:12px">Tus datos se tratarán conforme al RGPD. <a href="#" onclick="showLegal('privacy');return false" style="color:rgba(255,255,255,.4)">Política de privacidad</a>.</p>
</div>
<div class="form-success" id="formSuccess">
<div class="fs-icon">✅</div>
<h3>¡Gracias por tu interés!</h3>
<p>Hemos recibido tu solicitud. Te contactaremos en menos de 24 horas laborables para agendar una demo personalizada.</p>
</div>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="footer">
<div class="footer-inner">
<div class="footer-col">
<h4>CERTO</h4>
<p>Plataforma de auditoría de cumplimiento normativo multi-estándar. Desarrollada en Málaga para empresas que quieren convertir el compliance en ventaja competitiva.</p>
<p style="margin-top:12px">© 2026 CERTO by Aion Sincro</p>
</div>
<div class="footer-col">
<h4>Producto</h4>
<a href="#features">Funcionalidades</a>
<a href="#norms">Normas soportadas</a>
<a href="#pricing">Planes y precios</a>
<a href="demo-tour.html">Ver el demo tour</a>
</div>
<div class="footer-col">
<h4>Empresa</h4>
<a href="#testimonials">Casos de éxito</a>
<a href="#contact">Contacto</a>
<a href="#" onclick="showLegal('terms');return false">Términos de uso</a>
<a href="#" onclick="showLegal('privacy');return false">Privacidad</a>
</div>
<div class="footer-col">
<h4>Normas</h4>
<a href="#norms">ISO 27001</a>
<a href="#norms">ISO 9001</a>
<a href="#norms">RGPD</a>
<a href="#norms">ENS</a>
</div>
</div>
<div class="section-inner">
<div class="footer-bottom">
<span>CERTO v1.0 · Málaga, Andalucía, España</span>
<span><a href="#" onclick="showLegal('terms');return false">Términos</a> · <a href="#" onclick="showLegal('privacy');return false">Privacidad</a> · <a href="#" onclick="showLegal('cookies');return false">Cookies</a></span>
</div>
</div>
</footer>
<!-- LEGAL MODALS -->
<div class="modal-overlay" id="legalModal">
<div class="modal-content" id="legalContent"></div>
</div>
<!-- TOAST -->
<div id="toast"></div>
<script>
// Nav scroll effect
var nav=document.getElementById('nav');
window.addEventListener('scroll',function(){
nav.classList.toggle('scrolled',window.scrollY>60);
});
// Mobile nav
var navToggle=document.getElementById('navToggle');
var navLinks=document.getElementById('navLinks');
navToggle.addEventListener('click',function(){
navLinks.classList.toggle('open');
});
navLinks.querySelectorAll('a').forEach(function(a){
a.addEventListener('click',function(){navLinks.classList.remove('open');});
});
// Scroll animations
var observer=new IntersectionObserver(function(entries){
entries.forEach(function(e){
if(e.isIntersecting){e.target.classList.add('visible');observer.unobserve(e.target);}
});
},{threshold:0.15});
document.querySelectorAll('.animate').forEach(function(el){observer.observe(el);});
// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(function(a){
a.addEventListener('click',function(e){
var target=document.querySelector(this.getAttribute('href'));
if(target){
e.preventDefault();
target.scrollIntoView({behavior:'smooth',block:'start'});
}
});
});
// Toast
function toast(msg){
var t=document.getElementById('toast');
t.textContent=msg;t.classList.add('show');
clearTimeout(t._h);
t._h=setTimeout(function(){t.classList.remove('show')},3500);
}
// Contact form — envía a Web3Forms (gratuito: 250 envíos/mes)
// 1. Regístrate en https://web3forms.com (30 segundos)
// 2. Copia tu Access Key del dashboard
// 3. Pégala en el input hidden "access_key" que está en el formulario
async function submitForm(){
var btn=document.querySelector('#contactForm .btn');
var name=document.getElementById('cfName').value.trim();
var company=document.getElementById('cfCompany').value.trim();
var email=document.getElementById('cfEmail').value.trim();
var message=document.getElementById('cfMessage').value.trim();
// Validación
if(!name||!company||!email||!message){
toast('⚠️ Por favor, completa todos los campos obligatorios.');
return;
}
if(!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)){
toast('⚠️ Introduce un email corporativo válido.');
return;
}
// Verificar que se ha configurado la access key
var accessKey=document.querySelector('input[name="access_key"]').value;
if(!accessKey||accessKey==='TU_ACCESS_KEY_DE_WEB3FORMS'){
toast('⚠️ Configura tu Access Key de Web3Forms (gratis en web3forms.com). Busca el input hidden en el HTML.');
return;
}
// Loading state
var originalText=btn.textContent;
btn.disabled=true;
btn.textContent='⏳ Enviando...';
btn.style.opacity='0.7';
try{
// Construir FormData con todos los campos del formulario
var formData=new FormData();
formData.append('access_key',accessKey);
formData.append('subject','Nuevo lead CERTO: '+company+' — '+name);
formData.append('from_name','CERTO Landing Page');
formData.append('name',name);
formData.append('email',email);
formData.append('message',
'Empresa: '+company+'\n'+
'Nombre: '+name+'\n'+
'Email: '+email+'\n'+
'Teléfono: '+(document.getElementById('cfPhone').value.trim()||'No especificado')+'\n'+
'Norma de interés: '+(document.getElementById('cfNorm').value||'No especificada')+'\n'+
'---\n'+
'Mensaje:\n'+message
);
// Campo extra para Web3Forms: reply-to se configura automáticamente desde el email
formData.append('replyto',email);
var resp=await fetch('https://api.web3forms.com/submit',{
method:'POST',
body:formData
});
var json=await resp.json();
if(resp.status===200&&json.success){
// Éxito
document.getElementById('formFields').style.display='none';
document.getElementById('formSuccess').style.display='block';
toast('✅ Solicitud enviada. Te contactaremos en menos de 24h.');
}else{
// Error del servicio
toast('❌ Error: '+(json.message||'No se pudo enviar. Intenta de nuevo.'));
console.error('Web3Forms error:',json);
}
}catch(e){
toast('❌ Error de conexión. Verifica tu internet e inténtalo de nuevo.');
console.error('Fetch error:',e);
}
// Restaurar botón
btn.disabled=false;
btn.textContent=originalText;
btn.style.opacity='1';
}
// Legal modals
var legalTexts={
terms:'<h3>Términos de Uso</h3><p>Última actualización: agosto 2026.</p><p>Al utilizar CERTO aceptas estos términos. La herramienta se ofrece "tal cual" como herramienta de autodiagnóstico orientativo. No sustituye una auditoría formal por organismo acreditado.</p><p>El uso de CERTO no garantiza la obtención de certificación alguna. Las puntuaciones y recomendaciones son orientativas y basadas en los controles del Anexo A de cada norma.</p><ul><li>Uso permitido: evaluación interna de cumplimiento normativo</li><li>Propiedad: todo el código y contenidos son propiedad de CERTO by Aion Sincro</li><li>Limitación: no nos responsabilizamos de decisiones tomadas basándose únicamente en los resultados de la herramienta</li></ul><button class="btn btn-primary modal-close" onclick="closeLegal()">Entendido</button>',
privacy:'<h3>Política de Privacidad</h3><p>En CERTO tratamos tus datos conforme al RGPD y la LOPDGDD.</p><p>La herramienta CERTO almacena los datos de auditoría exclusivamente en el localStorage de tu navegador. No enviamos, recopilamos ni transmitimos ningún dato a servidores externos.</p><p>Los datos del formulario de contacto se utilizarán únicamente para responder a tu consulta y no se cederán a terceros sin tu consentimiento explícito.</p><p>Responsable: Aion Sincro. DPO: dpo@aionsincro.com. Ejerce tus derechos ARCO en esa dirección.</p><button class="btn btn-primary modal-close" onclick="closeLegal()">Entendido</button>',
cookies:'<h3>Política de Cookies</h3><p>CERTO no utiliza cookies de terceros ni cookies de seguimiento. Solo utilizamos cookies técnicas esenciales (localStorage) para guardar tu progreso de auditoría y preferencias de interfaz. Estas cookies no recopilan información personal ni requieren consentimiento según el art. 22.2 LSSI.</p><button class="btn btn-primary modal-close" onclick="closeLegal()">Entendido</button>'
};
function showLegal(key){
document.getElementById('legalContent').innerHTML=legalTexts[key]||'';
document.getElementById('legalModal').classList.add('show');
}
function closeLegal(){
document.getElementById('legalModal').classList.remove('show');
}
document.getElementById('legalModal').addEventListener('click',function(e){
if(e.target===this)closeLegal();
});
document.addEventListener('keydown',function(e){
if(e.key==='Escape')closeLegal();
});
// Sample report ZIP download
async function downloadSampleZip(){
var btn=document.getElementById('dlBtn');
var status=document.getElementById('dlStatus');
btn.disabled=true;btn.textContent='⏳ Generando ZIP...';
status.textContent='Recopilando informes...';
try{
if(typeof JSZip==='undefined'){throw new Error('JSZip no cargado');}
var zip=new JSZip();
var files=['informe-demo.html','informes.html','informe-demo.docx'];
for(var i=0;i<files.length;i++){
status.textContent='Añadiendo '+files[i]+'...';
var resp=await fetch(files[i]);
if(!resp.ok)throw new Error('No se pudo cargar '+files[i]);
var text=await resp.text();
zip.file(files[i],text);
}
status.textContent='Comprimiendo...';
var blob=await zip.generateAsync({type:'blob',compression:'DEFLATE',compressionOptions:{level:6}});
var a=document.createElement('a');
a.href=URL.createObjectURL(blob);
a.download='CERTO-Informe-Demo-ISO27001.zip';
a.click();
setTimeout(function(){URL.revokeObjectURL(a.href);},5000);
toast('✅ Informe demo descargado. Ábrelo en tu navegador.');
status.textContent='✅ Descarga completada · '+Math.round(blob.size/1024)+' KB';
}catch(e){
toast('❌ Error: '+e.message);
status.textContent='❌ Error en la descarga. Inténtalo de nuevo.';
console.error(e);
}
btn.disabled=false;btn.textContent='📥 Descargar informe demo (.zip)';
}
</script>
</body>
</html>