PageSourceSearch

https://castellano.ai/centro-ayuda.html

html castellano.ai collected 2026-10-05 14:00:57 UTC 64,597 bytes, 1,238 lines download raw bytes

1<!DOCTYPE html>
2<html lang="es" class="scroll-smooth">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
8    <!-- ================= Primary SEO ================= -->
9    <title>Centro de ayuda y guías de uso | Castellano.ai</title>
10    <meta name="description" content="Guías paso a paso para sacar partido a Castellano.ai: elegir variante del español, activar voseo y lenguaje inclusivo, transcrear entre ES-ES y ES-MX, revisar documentos y gestionar tu suscripción.">
11    <meta name="keywords" content="ayuda castellano.ai, guía corrector español, tutorial transcreación, control de cambios Word, soporte">
12    <meta name="author" content="Castellano.ai">
13    <meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large">
14    <meta name="theme-color" content="#667eea">
15
16    <link rel="canonical" href="https://castellano.ai/centro-ayuda.html">
17    <link rel="alternate" hreflang="es" href="https://castellano.ai/centro-ayuda.html">
18    <link rel="alternate" hreflang="x-default" href="https://castellano.ai/centro-ayuda.html">
19
20    <!-- ================= Open Graph ================= -->
21    <meta property="og:type" content="article">
22    <meta property="og:site_name" content="Castellano.ai">
23    <meta property="og:locale" content="es_ES">
24    <meta property="og:url" content="https://castellano.ai/centro-ayuda.html">
25    <meta property="og:title" content="Centro de ayuda y guías de uso | Castellano.ai">
26    <meta property="og:description" content="Guías paso a paso para sacar partido a Castellano.ai: elegir variante del español, activar voseo y lenguaje inclusivo, transcrear entre ES-ES y ES-MX, revisar documentos y gestionar tu suscripción.">
27    <meta property="og:image" content="https://castellano.ai/img/jpeg.jpg">
28    <meta property="og:image:alt" content="Castellano.ai">
29
30    <!-- ================= Twitter / X ================= -->
31    <meta name="twitter:card" content="summary_large_image">
32    <meta name="twitter:title" content="Centro de ayuda y guías de uso | Castellano.ai">
33    <meta name="twitter:description" content="Guías paso a paso para sacar partido a Castellano.ai: elegir variante del español, activar voseo y lenguaje inclusivo, transcrear entre ES-ES y ES-MX, revisar documentos y gestionar tu suscripción.">
34    <meta name="twitter:image" content="https://castellano.ai/img/jpeg.jpg">
35
36    <!-- ================= Icons ================= -->
37    <link rel="icon" href="/img/favicon.png" type="image/png">
38    <link rel="apple-touch-icon" href="/img/favicon.png">
39    <link rel="shortcut icon" href="/img/favicon.ico">
40
41    <!-- ================= Performance ================= -->
42    <link rel="preconnect" href="https://fonts.googleapis.com">
43    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
44    <link rel="dns-prefetch" href="https://cdn.tailwindcss.com">
45    <link rel="dns-prefetch" href="https://cdnjs.cloudflare.com">
46
47    <!-- ================= Structured data ================= -->
48    
48<script type="application/ld+json">
49    {
50      "@context": "https://schema.org",
51      "@graph": [
52        {
53          "@type": "WebPage",
54          "@id": "https://castellano.ai/centro-ayuda.html#webpage",
55          "url": "https://castellano.ai/centro-ayuda.html",
56          "name": "Centro de ayuda y guías de uso | Castellano.ai",
57          "description": "Guías paso a paso para sacar partido a Castellano.ai: elegir variante del español, activar voseo y lenguaje inclusivo, transcrear entre ES-ES y ES-MX, revisar documentos y gestionar tu suscripción.",
58          "inLanguage": "es",
59          "isPartOf": { "@id": "https://castellano.ai/#website" },
60          "publisher": { "@id": "https://castellano.ai/#organization" }
61        },
62        {
63          "@type": "BreadcrumbList",
64          "@id": "https://castellano.ai/centro-ayuda.html#breadcrumb",
65          "itemListElement": [
66            { "@type": "ListItem", "position": 1, "name": "Inicio", "item": "https://castellano.ai/" },
67            { "@type": "ListItem", "position": 2, "name": "Centro de ayuda", "item": "https://castellano.ai/centro-ayuda.html" }
68          ]
69        }
70      ]
71    }
72    </script>
72
73
74    
74<script src="https://cdn.tailwindcss.com"></script>
74
75    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
76    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
77    <style>
78        * {
79            font-family: 'Inter', sans-serif;
80        }
81
82        .gradient-text {
83            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
84            -webkit-background-clip: text;
85            -webkit-text-fill-color: transparent;
86            background-clip: text;
87        }
88
89        .gradient-bg {
90            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
91        }
92
93        .glass {
94            background: rgba(255, 255, 255, 0.1);
95            backdrop-filter: blur(10px);
96            border: 1px solid rgba(255, 255, 255, 0.2);
97        }
98
99        .dark .glass {
100            background: rgba(0, 0, 0, 0.2);
101            border: 1px solid rgba(255, 255, 255, 0.1);
102        }
103
104        .text-gradient-shine {
105            background: linear-gradient(120deg, #667eea 0%, #764ba2 40%, #f64f59 60%, #667eea 100%);
106            background-size: 200% 100%;
107            -webkit-background-clip: text;
108            -webkit-text-fill-color: transparent;
109            animation: gradient-shift 3s ease-in-out infinite;
110        }
111
112        @keyframes gradient-shift {
113            0% { background-position: 0% 50%; }
114            50% { background-position: 100% 50%; }
115            100% { background-position: 0% 50%; }
116        }
117
118        .hover-lift {
119            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
120        }
121
122        .hover-lift:hover {
123            transform: translateY(-2px);
124        }
125
126        .blob {
127            position: absolute;
128            filter: blur(100px);
129            opacity: 0.4;
130        }
131
132        .help-category-card {
133            background: rgba(255, 255, 255, 0.8);
134            border: 1px solid rgba(0, 0, 0, 0.1);
135            border-radius: 1rem;
136            padding: 1.5rem;
137            transition: all 0.3s ease;
138            position: relative;
139            overflow: hidden;
140            cursor: pointer;
141        }
142
143        .dark .help-category-card {
144            background: rgba(0, 0, 0, 0.4);
145            border: 1px solid rgba(255, 255, 255, 0.2);
146        }
147
148        .help-category-card::before {
149            content: '';
150            position: absolute;
151            top: 0;
152            left: 0;
153            right: 0;
154            bottom: 0;
155            background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
156            transform: translateX(-100%);
157            transition: transform 0.6s;
158        }
159
160        .help-category-card:hover::before {
161            transform: translateX(100%);
162        }
163
164        .help-category-card:hover {
165            transform: translateY(-4px);
166            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
167        }
168
169        .help-article {
170            background: rgba(255, 255, 255, 0.6);
171            border: 1px solid rgba(0, 0, 0, 0.1);
172            border-radius: 0.75rem;
173            padding: 1rem;
174            margin-bottom: 0.75rem;
175            transition: all 0.3s ease;
176            cursor: pointer;
177        }
178
179        .dark .help-article {
180            background: rgba(0, 0, 0, 0.3);
181            border: 1px solid rgba(255, 255, 255, 0.1);
182        }
183
184        .help-article:hover {
185            background: rgba(255, 255, 255, 0.9);
186            transform: translateY(-2px);
187            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
188        }
189
190        .dark .help-article:hover {
191            background: rgba(0, 0, 0, 0.5);
192        }
193
194        .quick-actions-grid {
195            display: grid;
196            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
197            gap: 1rem;
198            margin: 2rem 0;
199        }
200
201        .quick-action-card {
202            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
203            border: 2px solid #cbd5e1;
204            border-radius: 0.75rem;
205            padding: 1.5rem;
206            text-align: center;
207            transition: all 0.3s ease;
208            cursor: pointer;
209        }
210
211        .dark .quick-action-card {
212            background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
213            border-color: #4b5563;
214        }
215
216        .quick-action-card:hover {
217            transform: translateY(-4px);
218            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
219        }
220
221        .tutorial-badge {
222            display: inline-block;
223            padding: 0.25rem 0.75rem;
224            border-radius: 9999px;
225            font-size: 0.75rem;
226            font-weight: 600;
227            margin-bottom: 0.5rem;
228        }
229
230        .video-placeholder {
231            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
232            border-radius: 0.75rem;
233            padding: 3rem 1rem;
234            text-align: center;
235            color: white;
236            position: relative;
237            overflow: hidden;
238            cursor: pointer;
239            transition: all 0.3s ease;
240        }
241
242        .video-placeholder:hover {
243            transform: scale(1.02);
244        }
245
246        .search-highlight {
247            background: linear-gradient(135deg, #fef3c7 0%, #fcd34d 100%);
248            padding: 0.125rem 0.25rem;
249            border-radius: 0.25rem;
250            font-weight: 600;
251        }
252
253        .dark .search-highlight {
254            background: linear-gradient(135deg, #92400e 0%, #d97706 100%);
255            color: white;
256        }
257
258        .breadcrumb {
259            display: flex;
260            align-items: center;
261            margin-bottom: 1rem;
262            font-size: 0.875rem;
263            color: #6b7280;
264        }
265
266        .breadcrumb a {
267            color: #667eea;
268            text-decoration: none;
269            transition: color 0.3s ease;
270        }
271
272        .breadcrumb a:hover {
273            color: #764ba2;
274            text-decoration: underline;
275        }
276
277        .rating-stars {
278            color: #fbbf24;
279            margin: 0.5rem 0;
280        }
281
282        .help-stats {
283            display: grid;
284            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
285            gap: 1rem;
286            margin: 2rem 0;
287        }
288
289        .stat-item {
290            text-align: center;
291            padding: 1rem;
292            background: rgba(255, 255, 255, 0.5);
293            border-radius: 0.75rem;
294            border: 1px solid rgba(0, 0, 0, 0.1);
295        }
296
297        .dark .stat-item {
298            background: rgba(0, 0, 0, 0.3);
299            border: 1px solid rgba(255, 255, 255, 0.1);
300        }
301
302        .progress-bar {
303            background: #e5e7eb;
304            border-radius: 9999px;
305            height: 0.5rem;
306            overflow: hidden;
307            margin: 0.5rem 0;
308        }
309
310        .dark .progress-bar {
311            background: #374151;
312        }
313
314        .progress-fill {
315            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
316            height: 100%;
317            border-radius: 9999px;
318            transition: width 1s ease;
319        }
320
321        .notification-banner {
322            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
323            color: white;
324            padding: 1rem;
325            border-radius: 0.75rem;
326            margin-bottom: 2rem;
327            position: relative;
328        }
329
330        .article-content {
331            max-height: 0;
332            overflow: hidden;
333            transition: max-height 0.3s ease;
334        }
335
336        .article-content.expanded {
337            max-height: 1000px;
338        }
339    </style>
340</head>
341
342<body class="bg-gray-50 dark:bg-gray-900 transition-all duration-300 min-h-screen">
343    <!-- Animated Background -->
344    <div class="fixed inset-0 overflow-hidden pointer-events-none">
345        <div class="blob w-96 h-96 bg-purple-400 -top-48 -left-48 animate-pulse"></div>
346        <div class="blob w-96 h-96 bg-pink-400 -bottom-48 -right-48 animate-pulse" style="animation-delay: 2s;"></div>
347        <div class="blob w-96 h-96 bg-blue-400 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 animate-pulse" style="animation-delay: 4s;"></div>
348    </div>
349
350    <!-- Header -->
351    <header class="glass sticky top-0 z-50 border-b border-gray-200 dark:border-gray-700">
352        <nav class="container mx-auto px-4 py-4">
353            <div class="flex justify-between items-center">
354                <div class="flex items-center space-x-3 group cursor-pointer">
355                    <a href="/" class="flex items-center space-x-3">
356                        <div class="relative">
357                            <i class="fas fa-feather-alt text-3xl text-purple-600 transform group-hover:rotate-12 transition-transform"></i>
358                            <div class="absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>
359                        </div>
360                        <h1 class="text-3xl font-black text-gradient-shine">Castellano.ai</h1>
361                    </a>
362                </div>
363                <div class="flex items-center space-x-4">
364                    <button id="themeToggle" class="p-3 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-800 transition-all hover-lift">
365                        <i class="fas fa-moon text-xl dark:hidden"></i>
366                        <i class="fas fa-sun hidden dark:block text-xl text-yellow-400"></i>
367                    </button>
368                    <a href="/" class="px-6 py-3 gradient-bg text-white font-semibold rounded-xl hover:shadow-lg transform transition-all hover:scale-105">
369                        <i class="fas fa-home mr-2"></i>Inicio
370                    </a>
371                </div>
372            </div>
373        </nav>
374    </header>
375
376    <!-- Main Content -->
377    <main class="container mx-auto px-4 py-8 relative z-10">
378        <!-- Breadcrumb -->
379        <div class="breadcrumb dark:text-gray-400">
380            <a href="/">Inicio</a>
381            <i class="fas fa-chevron-right mx-2"></i>
382            <span>Centro de Ayuda</span>
383        </div>
384
385        <!-- Hero Section -->
386        <section class="text-center mb-12">
387            <div class="max-w-4xl mx-auto">
388                <!-- Notification Banner -->
389                <div class="notification-banner">
390                    <div class="flex items-center justify-center space-x-3">
391                        <i class="fas fa-bullhorn text-2xl"></i>
392                        <div>
393                            <p class="font-semibold">¡Nuevo! Guías interactivas disponibles</p>
394                            <p class="text-sm opacity-90">Aprende a usar todas las funciones paso a paso</p>
395                        </div>
396                    </div>
397                </div>
398
399                <h2 class="text-4xl md:text-5xl font-black mb-6 dark:text-white leading-tight">
400                    <i class="fas fa-life-ring text-purple-600 mr-4"></i>
401                    Centro de <span class="text-gradient-shine">Ayuda</span>
402                </h2>
403                <p class="text-xl text-gray-600 dark:text-gray-300 mb-8">
404                    Guías completas, tutoriales y recursos para aprovechar al máximo Castellano.ai
405                </p>
406
407                <!-- Search Bar -->
408                <div class="max-w-2xl mx-auto mb-8">
409                    <div class="relative">
410                        <input type="text" id="helpSearchInput" placeholder="¿Qué necesitas aprender hoy?" 
411                               class="w-full px-6 py-4 text-lg rounded-2xl border-2 border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 dark:text-white focus:outline-none focus:ring-4 focus:ring-purple-500/30 focus:border-purple-500 transition-all shadow-lg">
412                        <i class="fas fa-search absolute right-6 top-1/2 transform -translate-y-1/2 text-gray-400 text-xl"></i>
413                    </div>
414                    <div id="helpSearchResults" class="mt-4 text-sm"></div>
415                </div>
416
417                <!-- Quick Stats -->
418                <div class="help-stats">
419                    <div class="stat-item hover-lift">
420                        <i class="fas fa-book-open text-3xl text-blue-600 mb-2"></i>
421                        <h3 class="text-2xl font-bold dark:text-white">200+</h3>
422                        <p class="text-gray-600 dark:text-gray-400">Artículos de ayuda</p>
423                    </div>
424                    <div class="stat-item hover-lift">
425                        <i class="fas fa-video text-3xl text-red-600 mb-2"></i>
426                        <h3 class="text-2xl font-bold dark:text-white">50+</h3>
427                        <p class="text-gray-600 dark:text-gray-400">Tutoriales en video</p>
428                    </div>
429                    <div class="stat-item hover-lift">
430                        <i class="fas fa-download text-3xl text-green-600 mb-2"></i>
431                        <h3 class="text-2xl font-bold dark:text-white">25+</h3>
432                        <p class="text-gray-600 dark:text-gray-400">Guías descargables</p>
433                    </div>
434                    <div class="stat-item hover-lift">
435                        <i class="fas fa-clock text-3xl text-purple-600 mb-2"></i>
436                        <h3 class="text-2xl font-bold dark:text-white">5 min</h3>
437                        <p class="text-gray-600 dark:text-gray-400">Tiempo promedio</p>
438                    </div>
439                </div>
440            </div>
441        </section>
442
443        <!-- Quick Actions -->
444        <section class="max-w-6xl mx-auto mb-12">
445            <h3 class="text-2xl font-bold mb-6 dark:text-white text-center">
446                <i class="fas fa-rocket text-purple-600 mr-3"></i>
447                Acciones Rápidas
448            </h3>
449            <div class="quick-actions-grid">
450                <div class="quick-action-card" onclick="showQuickStart()">
451                    <i class="fas fa-play-circle text-4xl text-green-600 mb-3"></i>
452                    <h4 class="font-bold dark:text-white mb-2">Guía de Inicio Rápido</h4>
453                    <p class="text-sm text-gray-600 dark:text-gray-400">Aprende lo básico en 5 minutos</p>
454                </div>
455                <div class="quick-action-card" onclick="showTutorials()">
456                    <i class="fas fa-video text-4xl text-blue-600 mb-3"></i>
457                    <h4 class="font-bold dark:text-white mb-2">Tutoriales en Video</h4>
458                    <p class="text-sm text-gray-600 dark:text-gray-400">Demostraciones paso a paso</p>
459                </div>
460                <div class="quick-action-card" onclick="showTroubleshooting()">
461                    <i class="fas fa-tools text-4xl text-orange-600 mb-3"></i>
462                    <h4 class="font-bold dark:text-white mb-2">Solución de Problemas</h4>
463                    <p class="text-sm text-gray-600 dark:text-gray-400">Resuelve issues comunes</p>
464                </div>
465                <div class="quick-action-card" onclick="contactSupport()">
466                    <i class="fas fa-headset text-4xl text-purple-600 mb-3"></i>
467                    <h4 class="font-bold dark:text-white mb-2">Contactar Soporte</h4>
468                    <p class="text-sm text-gray-600 dark:text-gray-400">Habla con nuestro equipo</p>
469                </div>
470            </div>
471        </section>
472
473        <!-- Help Categories -->
474        <section class="max-w-6xl mx-auto mb-12">
475            <h3 class="text-2xl font-bold mb-8 dark:text-white">
476                <i class="fas fa-th-large text-purple-600 mr-3"></i>
477                Explorar por Categorías
478            </h3>
479            
480            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
481                <!-- Getting Started -->
482                <div class="help-category-card" onclick="toggleCategory('getting-started')">
483                    <div class="flex items-start space-x-3">
484                        <div class="bg-green-100 dark:bg-green-900 p-3 rounded-lg">
485                            <i class="fas fa-rocket text-green-600 dark:text-green-400 text-2xl"></i>
486                        </div>
487                        <div class="flex-1">
488                            <h4 class="font-bold text-lg dark:text-white mb-2">Primeros Pasos</h4>
489                            <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Todo lo que necesitas para comenzar</p>
490                            <span class="text-xs bg-green-100 dark:bg-green-800 text-green-800 dark:text-green-200 px-2 py-1 rounded-full">15 artículos</span>
491                        </div>
492                    </div>
493                    <div id="getting-started-content" class="article-content mt-4">
494                        <div class="help-article" onclick="openArticle('crear-cuenta')">
495                            <div class="flex justify-between items-start">
496                                <div>
497                                    <h5 class="font-semibold dark:text-white">Cómo crear tu cuenta</h5>
498                                    <p class="text-xs text-gray-500 dark:text-gray-400">3 min • Principiante</p>
499                                </div>
500                                <div class="rating-stars">
501                                    <i class="fas fa-star"></i>
502                                    <i class="fas fa-star"></i>
503                                    <i class="fas fa-star"></i>
504                                    <i class="fas fa-star"></i>
505                                    <i class="fas fa-star"></i>
506                                </div>
507                            </div>
508                        </div>
509                        <div class="help-article" onclick="openArticle('primer-analisis')">
510                            <div class="flex justify-between items-start">
511                                <div>
512                                    <h5 class="font-semibold dark:text-white">Tu primer análisis de texto</h5>
513                                    <p class="text-xs text-gray-500 dark:text-gray-400">5 min • Principiante</p>
514                                </div>
515                                <div class="rating-stars">
516                                    <i class="fas fa-star"></i>
517                                    <i class="fas fa-star"></i>
518                                    <i class="fas fa-star"></i>
519                                    <i class="fas fa-star"></i>
520                                    <i class="far fa-star"></i>
521                                </div>
522                            </div>
523                        </div>
524                        <div class="help-article" onclick="openArticle('configurar-pais')">
525                            <div class="flex justify-between items-start">
526                                <div>
527                                    <h5 class="font-semibold dark:text-white">Configurar tu país y región</h5>
528                                    <p class="text-xs text-gray-500 dark:text-gray-400">2 min • Principiante</p>
529                                </div>
530                                <div class="rating-stars">
531                                    <i class="fas fa-star"></i>
532                                    <i class="fas fa-star"></i>
533                                    <i class="fas fa-star"></i>
534                                    <i class="fas fa-star"></i>
535                                    <i class="fas fa-star"></i>
536                                </div>
537                            </div>
538                        </div>
539                    </div>
540                </div>
541
542                <!-- Features -->
543                <div class="help-category-card" onclick="toggleCategory('features')">
544                    <div class="flex items-start space-x-3">
545                        <div class="bg-blue-100 dark:bg-blue-900 p-3 rounded-lg">
546                            <i class="fas fa-magic text-blue-600 dark:text-blue-400 text-2xl"></i>
547                        </div>
548                        <div class="flex-1">
549                            <h4 class="font-bold text-lg dark:text-white mb-2">Funcionalidades</h4>
550                            <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Domina todas las herramientas</p>
551                            <span class="text-xs bg-blue-100 dark:bg-blue-800 text-blue-800 dark:text-blue-200 px-2 py-1 rounded-full">25 artículos</span>
552                        </div>
553                    </div>
554                    <div id="features-content" class="article-content mt-4">
555                        <div class="help-article" onclick="openArticle('correccion-avanzada')">
556                            <div class="flex justify-between items-start">
557                                <div>
558                                    <h5 class="font-semibold dark:text-white">Corrección avanzada de gramática</h5>
559                                    <p class="text-xs text-gray-500 dark:text-gray-400">8 min • Intermedio</p>
560                                </div>
561                                <div class="tutorial-badge bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">
562                                    <i class="fas fa-video mr-1"></i> Video
563                                </div>
564                            </div>
565                        </div>
566                        <div class="help-article" onclick="openArticle('mejora-estilo')">
567                            <div class="flex justify-between items-start">
568                                <div>
569                                    <h5 class="font-semibold dark:text-white">Mejora de estilo y claridad</h5>
570                                    <p class="text-xs text-gray-500 dark:text-gray-400">6 min • Intermedio</p>
571                                </div>
572                                <div class="tutorial-badge bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
573                                    <i class="fas fa-crown mr-1"></i> Premium
574                                </div>
575                            </div>
576                        </div>
577                        <div class="help-article" onclick="openArticle('traduccion')">
578                            <div class="flex justify-between items-start">
579                                <div>
580                                    <h5 class="font-semibold dark:text-white">Función de traducción</h5>
581                                    <p class="text-xs text-gray-500 dark:text-gray-400">7 min • Intermedio</p>
582                                </div>
583                                <div class="tutorial-badge bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
584                                    <i class="fas fa-language mr-1"></i> Nuevo
585                                </div>
586                            </div>
587                        </div>
588                    </div>
589                </div>
590
591                <!-- Premium -->
592                <div class="help-category-card" onclick="toggleCategory('premium')">
593                    <div class="flex items-start space-x-3">
594                        <div class="bg-yellow-100 dark:bg-yellow-900 p-3 rounded-lg">
595                            <i class="fas fa-crown text-yellow-600 dark:text-yellow-400 text-2xl"></i>
596                        </div>
597                        <div class="flex-1">
598                            <h4 class="font-bold text-lg dark:text-white mb-2">Premium</h4>
599                            <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Sácale el máximo provecho</p>
600                            <span class="text-xs bg-yellow-100 dark:bg-yellow-800 text-yellow-800 dark:text-yellow-200 px-2 py-1 rounded-full">12 artículos</span>
601                        </div>
602                    </div>
603                    <div id="premium-content" class="article-content mt-4">
604                        <div class="help-article" onclick="openArticle('actualizar-premium')">
605                            <div class="flex justify-between items-start">
606                                <div>
607                                    <h5 class="font-semibold dark:text-white">Cómo actualizar a Premium</h5>
608                                    <p class="text-xs text-gray-500 dark:text-gray-400">4 min • Principiante</p>
609                                </div>
610                                <div class="rating-stars">
611                                    <i class="fas fa-star"></i>
612                                    <i class="fas fa-star"></i>
613                                    <i class="fas fa-star"></i>
614                                    <i class="fas fa-star"></i>
615                                    <i class="fas fa-star"></i>
616                                </div>
617                            </div>
618                        </div>
619                        <div class="help-article" onclick="openArticle('gestionar-historial')">
620                            <div class="flex justify-between items-start">
621                                <div>
622                                    <h5 class="font-semibold dark:text-white">Gestionar tu historial</h5>
623                                    <p class="text-xs text-gray-500 dark:text-gray-400">5 min • Intermedio</p>
624                                </div>
625                                <div class="tutorial-badge bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200">
626                                    <i class="fas fa-download mr-1"></i> PDF
627                                </div>
628                            </div>
629                        </div>
630                        <div class="help-article" onclick="openArticle('cancelar-suscripcion')">
631                            <div class="flex justify-between items-start">
632                                <div>
633                                    <h5 class="font-semibold dark:text-white">Cancelar suscripción</h5>
634                                    <p class="text-xs text-gray-500 dark:text-gray-400">3 min • Principiante</p>
635                                </div>
636                                <div class="rating-stars">
637                                    <i class="fas fa-star"></i>
638                                    <i class="fas fa-star"></i>
639                                    <i class="fas fa-star"></i>
640                                    <i class="fas fa-star"></i>
641                                    <i class="far fa-star"></i>
642                                </div>
643                            </div>
644                        </div>
645                    </div>
646                </div>
647
648                <!-- Account -->
649                <div class="help-category-card" onclick="toggleCategory('account')">
650                    <div class="flex items-start space-x-3">
651                        <div class="bg-purple-100 dark:bg-purple-900 p-3 rounded-lg">
652                            <i class="fas fa-user-cog text-purple-600 dark:text-purple-400 text-2xl"></i>
653                        </div>
654                        <div class="flex-1">
655                            <h4 class="font-bold text-lg dark:text-white mb-2">Cuenta y Configuración</h4>
656                            <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Personaliza tu experiencia</p>
657                            <span class="text-xs bg-purple-100 dark:bg-purple-800 text-purple-800 dark:text-purple-200 px-2 py-1 rounded-full">18 artículos</span>
658                        </div>
659                    </div>
660                    <div id="account-content" class="article-content mt-4">
661                        <div class="help-article" onclick="openArticle('cambiar-password')">
662                            <div class="flex justify-between items-start">
663                                <div>
664                                    <h5 class="font-semibold dark:text-white">Cambiar contraseña</h5>
665                                    <p class="text-xs text-gray-500 dark:text-gray-400">2 min • Principiante</p>
666                                </div>
667                                <div class="rating-stars">
668                                    <i class="fas fa-star"></i>
669                                    <i class="fas fa-star"></i>
670                                    <i class="fas fa-star"></i>
671                                    <i class="fas fa-star"></i>
672                                    <i class="fas fa-star"></i>
673                                </div>
674                            </div>
675                        </div>
676                        <div class="help-article" onclick="openArticle('configurar-notificaciones')">
677                            <div class="flex justify-between items-start">
678                                <div>
679                                    <h5 class="font-semibold dark:text-white">Configurar notificaciones</h5>
680                                    <p class="text-xs text-gray-500 dark:text-gray-400">4 min • Intermedio</p>
681                                </div>
682                                <div class="tutorial-badge bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
683                                    <i class="fas fa-images mr-1"></i> Capturas
684                                </div>
685                            </div>
686                        </div>
687                        <div class="help-article" onclick="openArticle('eliminar-cuenta')">
688                            <div class="flex justify-between items-start">
689                                <div>
690                                    <h5 class="font-semibold dark:text-white">Eliminar cuenta</h5>
691                                    <p class="text-xs text-gray-500 dark:text-gray-400">3 min • Avanzado</p>
692                                </div>
693                                <div class="rating-stars">
694                                    <i class="fas fa-star"></i>
695                                    <i class="fas fa-star"></i>
696                                    <i class="fas fa-star"></i>
697                                    <i class="far fa-star"></i>
698                                    <i class="far fa-star"></i>
699                                </div>
700                            </div>
701                        </div>
702                    </div>
703                </div>
704
705                <!-- Troubleshooting -->
706                <div class="help-category-card" onclick="toggleCategory('troubleshooting')">
707                    <div class="flex items-start space-x-3">
708                        <div class="bg-red-100 dark:bg-red-900 p-3 rounded-lg">
709                            <i class="fas fa-tools text-red-600 dark:text-red-400 text-2xl"></i>
710                        </div>
711                        <div class="flex-1">
712                            <h4 class="font-bold text-lg dark:text-white mb-2">Solución de Problemas</h4>
713                            <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Resuelve issues técnicos</p>
714                            <span class="text-xs bg-red-100 dark:bg-red-800 text-red-800 dark:text-red-200 px-2 py-1 rounded-full">20 artículos</span>
715                        </div>
716                    </div>
717                    <div id="troubleshooting-content" class="article-content mt-4">
718                        <div class="help-article" onclick="openArticle('problemas-carga')">
719                            <div class="flex justify-between items-start">
720                                <div>
721                                    <h5 class="font-semibold dark:text-white">La página no carga correctamente</h5>
722                                    <p class="text-xs text-gray-500 dark:text-gray-400">5 min • Intermedio</p>
723                                </div>
724                                <div class="tutorial-badge bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200">
725                                    <i class="fas fa-exclamation-triangle mr-1"></i> Común
726                                </div>
727                            </div>
728                        </div>
729                        <div class="help-article" onclick="openArticle('analisis-lento')">
730                            <div class="flex justify-between items-start">
731                                <div>
732                                    <h5 class="font-semibold dark:text-white">El análisis tarda mucho tiempo</h5>
733                                    <p class="text-xs text-gray-500 dark:text-gray-400">4 min • Intermedio</p>
734                                </div>
735                                <div class="rating-stars">
736                                    <i class="fas fa-star"></i>
737                                    <i class="fas fa-star"></i>
738                                    <i class="fas fa-star"></i>
739                                    <i class="fas fa-star"></i>
740                                    <i class="far fa-star"></i>
741                                </div>
742                            </div>
743                        </div>
744                        <div class="help-article" onclick="openArticle('problemas-pago')">
745                            <div class="flex justify-between items-start">
746                                <div>
747                                    <h5 class="font-semibold dark:text-white">Problemas con pagos</h5>
748                                    <p class="text-xs text-gray-500 dark:text-gray-400">6 min • Avanzado</p>
749                                </div>
750                                <div class="tutorial-badge bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200">
751                                    <i class="fas fa-headset mr-1"></i> Soporte
752                                </div>
753                            </div>
754                        </div>
755                    </div>
756                </div>
757
758                <!-- API & Integrations -->
759                <div class="help-category-card" onclick="toggleCategory('api')">
760                    <div class="flex items-start space-x-3">
761                        <div class="bg-indigo-100 dark:bg-indigo-900 p-3 rounded-lg">
762                            <i class="fas fa-code text-indigo-600 dark:text-indigo-400 text-2xl"></i>
763                        </div>
764                        <div class="flex-1">
765                            <h4 class="font-bold text-lg dark:text-white mb-2">API e Integraciones</h4>
766                            <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Para desarrolladores</p>
767                            <span class="text-xs bg-indigo-100 dark:bg-indigo-800 text-indigo-800 dark:text-indigo-200 px-2 py-1 rounded-full">10 artículos</span>
768                        </div>
769                    </div>
770                    <div id="api-content" class="article-content mt-4">
771                        <div class="help-article" onclick="openArticle('api-docs')">
772                            <div class="flex justify-between items-start">
773                                <div>
774                                    <h5 class="font-semibold dark:text-white">Documentación de la API</h5>
775                                    <p class="text-xs text-gray-500 dark:text-gray-400">15 min • Avanzado</p>
776                                </div>
777                                <div class="tutorial-badge bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200">
778                                    <i class="fas fa-code mr-1"></i> Código
779                                </div>
780                            </div>
781                        </div>
782                        <div class="help-article" onclick="openArticle('wordpress-plugin')">
783                            <div class="flex justify-between items-start">
784                                <div>
785                                    <h5 class="font-semibold dark:text-white">Plugin para WordPress</h5>
786                                    <p class="text-xs text-gray-500 dark:text-gray-400">8 min • Intermedio</p>
787                                </div>
788                                <div class="tutorial-badge bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
789                                    <i class="fas fa-download mr-1"></i> Descarga
790                                </div>
791                            </div>
792                        </div>
793                        <div class="help-article" onclick="openArticle('rate-limits')">
794                            <div class="flex justify-between items-start">
795                                <div>
796                                    <h5 class="font-semibold dark:text-white">Límites de velocidad</h5>
797                                    <p class="text-xs text-gray-500 dark:text-gray-400">5 min • Avanzado</p>
798                                </div>
799                                <div class="rating-stars">
800                                    <i class="fas fa-star"></i>
801                                    <i class="fas fa-star"></i>
802                                    <i class="fas fa-star"></i>
803                                    <i class="fas fa-star"></i>
804                                    <i class="fas fa-star"></i>
805                                </div>
806                            </div>
807                        </div>
808                    </div>
809                </div>
810            </div>
811        </section>
812
813        <!-- Popular Tutorials -->
814        <section class="max-w-6xl mx-auto mb-12">
815            <h3 class="text-2xl font-bold mb-8 dark:text-white">
816                <i class="fas fa-fire text-orange-500 mr-3"></i>
817                Tutoriales Más Populares
818            </h3>
819            
820            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
821                <div class="video-placeholder" onclick="playTutorial('intro')">
822                    <i class="fas fa-play-circle text-6xl mb-4 opacity-80"></i>
823                    <h4 class="text-xl font-bold mb-2">Introducción a Castellano.ai</h4>
824                    <p class="text-sm opacity-90">Descubre todas las funciones en 10 minutos</p>
825                    <div class="absolute top-4 right-4">
826                        <span class="bg-white bg-opacity-20 px-2 py-1 rounded text-xs">10:32</span>
827                    </div>
828                </div>
829
830                <div class="video-placeholder" onclick="playTutorial('premium')">
831                    <i class="fas fa-play-circle text-6xl mb-4 opacity-80"></i>
832                    <h4 class="text-xl font-bold mb-2">Funciones Premium</h4>
833                    <p class="text-sm opacity-90">Aprovecha al máximo tu suscripción</p>
834                    <div class="absolute top-4 right-4">
835                        <span class="bg-white bg-opacity-20 px-2 py-1 rounded text-xs">8:45</span>
836                    </div>
837                </div>
838
839                <div class="video-placeholder" onclick="playTutorial('writing-tips')">
840                    <i class="fas fa-play-circle text-6xl mb-4 opacity-80"></i>
841                    <h4 class="text-xl font-bold mb-2">Consejos de Escritura</h4>
842                    <p class="text-sm opacity-90">Mejora tu estilo con IA</p>
843                    <div class="absolute top-4 right-4">
844                        <span class="bg-white bg-opacity-20 px-2 py-1 rounded text-xs">12:15</span>
845                    </div>
846                </div>
847            </div>
848        </section>
849
850        <!-- Downloads Section -->
851        <section class="max-w-4xl mx-auto mb-12">
852            <div class="bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-700 rounded-2xl p-8">
853                <h3 class="text-2xl font-bold mb-6 dark:text-white text-center">
854                    <i class="fas fa-download text-green-600 mr-3"></i>
855                    Recursos Descargables
856                </h3>
857                
858                <div class="grid md:grid-cols-2 gap-6">
859                    <div class="bg-white dark:bg-gray-800 rounded-xl p-6 hover-lift">
860                        <div class="flex items-start space-x-4">
861                            <div class="bg-red-100 dark:bg-red-900 p-3 rounded-lg">
862                                <i class="fas fa-file-pdf text-red-600 dark:text-red-400 text-2xl"></i>
863                            </div>
864                            <div class="flex-1">
865                                <h4 class="font-bold dark:text-white mb-2">Guía Completa de Usuario</h4>
866                                <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">Manual completo con capturas de pantalla</p>
867                                <div class="flex items-center justify-between">
868                                    <span class="text-xs text-gray-500">PDF • 2.5 MB</span>
869                                    <button class="text-purple-600 hover:underline font-semibold">Descargar</button>
870                                </div>
871                            </div>
872                        </div>
873                    </div>
874
875                    <div class="bg-white dark:bg-gray-800 rounded-xl p-6 hover-lift">
876                        <div class="flex items-start space-x-4">
877                            <div class="bg-blue-100 dark:bg-blue-900 p-3 rounded-lg">
878                                <i class="fas fa-file-word text-blue-600 dark:text-blue-400 text-2xl"></i>
879                            </div>
880                            <div class="flex-1">
881                                <h4 class="font-bold dark:text-white mb-2">Plantillas de Escritura</h4>
882                                <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">Documentos optimizados para análisis</p>
883                                <div class="flex items-center justify-between">
884                                    <span class="text-xs text-gray-500">DOCX • 1.2 MB</span>
885                                    <button class="text-purple-600 hover:underline font-semibold">Descargar</button>
886                                </div>
887                            </div>
888                        </div>
889                    </div>
890
891                    <div class="bg-white dark:bg-gray-800 rounded-xl p-6 hover-lift">
892                        <div class="flex items-start space-x-4">
893                            <div class="bg-green-100 dark:bg-green-900 p-3 rounded-lg">
894                                <i class="fas fa-keyboard text-green-600 dark:text-green-400 text-2xl"></i>
895                            </div>
896                            <div class="flex-1">
897                                <h4 class="font-bold dark:text-white mb-2">Atajos de Teclado</h4>
898                                <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">Guía de referencia rápida</p>
899                                <div class="flex items-center justify-between">
900                                    <span class="text-xs text-gray-500">PDF • 0.8 MB</span>
901                                    <button class="text-purple-600 hover:underline font-semibold">Descargar</button>
902                                </div>
903                            </div>
904                        </div>
905                    </div>
906
907                    <div class="bg-white dark:bg-gray-800 rounded-xl p-6 hover-lift">
908                        <div class="flex items-start space-x-4">
909                            <div class="bg-purple-100 dark:bg-purple-900 p-3 rounded-lg">
910                                <i class="fas fa-chalkboard-teacher text-purple-600 dark:text-purple-400 text-2xl"></i>
911                            </div>
912                            <div class="flex-1">
913                                <h4 class="font-bold dark:text-white mb-2">Guía para Educadores</h4>
914                                <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">Uso en el aula y mejores prácticas</p>
915                                <div class="flex items-center justify-between">
916                                    <span class="text-xs text-gray-500">PDF • 1.8 MB</span>
917                                    <button class="text-purple-600 hover:underline font-semibold">Descargar</button>
918                                </div>
919                            </div>
920                        </div>
921                    </div>
922                </div>
923            </div>
924        </section>
925
926        <!-- Contact Support -->
927        <section class="max-w-4xl mx-auto">
928            <div class="bg-gradient-to-r from-purple-50 to-indigo-50 dark:from-purple-900 dark:to-indigo-900 rounded-2xl p-8">
929                <div class="text-center mb-8">
930                    <h3 class="text-3xl font-bold mb-4 dark:text-white">
931                        <i class="fas fa-headset text-purple-600 mr-3"></i>
932                        ¿Necesitas Más Ayuda?
933                    </h3>
934                    <p class="text-lg text-gray-600 dark:text-gray-300">
935                        Nuestro equipo de soporte está listo para asistirte
936                    </p>
937                </div>
938
939                <div class="grid md:grid-cols-3 gap-6 mb-8">
940                    <div class="bg-white dark:bg-gray-800 rounded-xl p-6 text-center hover-lift">
941                        <i class="fas fa-envelope text-3xl text-blue-600 mb-4"></i>
942                        <h4 class="font-bold dark:text-white mb-2">Email</h4>
943                        <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Respuesta en 24 horas</p>
944                        <a href="mailto:[email protected]" class="text-blue-600 hover:underline font-semibold">
945                            [email protected]
946                        </a>
947                    </div>
948
949                    <div class="bg-white dark:bg-gray-800 rounded-xl p-6 text-center hover-lift">
950                        <i class="fas fa-comments text-3xl text-green-600 mb-4"></i>
951                        <h4 class="font-bold dark:text-white mb-2">Chat en Vivo</h4>
952                        <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Lun-Vie 9:00-18:00</p>
953                        <button class="text-green-600 hover:underline font-semibold">
954                            Iniciar Chat
955                        </button>
956                    </div>
957
958                    <div class="bg-white dark:bg-gray-800 rounded-xl p-6 text-center hover-lift">
959                        <i class="fas fa-question-circle text-3xl text-purple-600 mb-4"></i>
960                        <h4 class="font-bold dark:text-white mb-2">FAQ</h4>
961                        <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Respuestas inmediatas</p>
962                        <a href="faq.html" class="text-purple-600 hover:underline font-semibold">
963                            Ver FAQ
964                        </a>
965                    </div>
966                </div>
967
968                <!-- Progress Tracking -->
969                <div class="bg-white dark:bg-gray-800 rounded-xl p-6">
970                    <h4 class="font-bold dark:text-white mb-4 text-center">Tu Progreso de Aprendizaje</h4>
971                    <div class="space-y-3">
972                        <div>
973                            <div class="flex justify-between text-sm mb-1">
974                                <span class="dark:text-white">Primeros Pasos</span>
975                                <span class="text-gray-600 dark:text-gray-400">100%</span>
976                            </div>
977                            <div class="progress-bar">
978                                <div class="progress-fill" style="width: 100%"></div>
979                            </div>
980                        </div>
981                        <div>
982                            <div class="flex justify-between text-sm mb-1">
983                                <span class="dark:text-white">Funcionalidades</span>
984                                <span class="text-gray-600 dark:text-gray-400">75%</span>
985                            </div>
986                            <div class="progress-bar">
987                                <div class="progress-fill" style="width: 75%"></div>
988                            </div>
989                        </div>
990                        <div>
991                            <div class="flex justify-between text-sm mb-1">
992                                <span class="dark:text-white">Premium</span>
993                                <span class="text-gray-600 dark:text-gray-400">50%</span>
994                            </div>
995                            <div class="progress-bar">
996                                <div class="progress-fill" style="width: 50%"></div>
997                            </div>
998                        </div>
999                    </div>
1000                </div>
1001            </div>
1002        </section>
1003    </main>
1004
1005    <!-- Footer -->
1006    <footer class="bg-gray-100 dark:bg-gray-800 mt-20 py-12">
1007        <div class="container mx-auto px-4">
1008            <div class="grid md:grid-cols-4 gap-8">
1009                <div>
1010                    <h4 class="font-bold text-lg mb-4 dark:text-white">Castellano.ai</h4>
1011                    <p class="text-gray-600 dark:text-gray-400">Tu asistente de escritura inteligente en español.</p>
1012                </div>
1013                <div>
1014                    <h5 class="font-semibold mb-3 dark:text-white">Producto</h5>
1015                    <ul class="space-y-2 text-gray-600 dark:text-gray-400">
1016                        <li><a href="/" class="hover:text-purple-600 transition-colors">Características</a></li>
1017                        <li><a href="/" class="hover:text-purple-600 transition-colors">Precios</a></li>
1018                        <li><a href="/" class="hover:text-purple-600 transition-colors">API</a></li>
1019                    </ul>
1020                </div>
1021                <div>
1022                    <h5 class="font-semibold mb-3 dark:text-white">Soporte</h5>
1023                    <ul class="space-y-2 text-gray-600 dark:text-gray-400">
1024                        <li><a href="centro-ayuda.html" class="hover:text-purple-600 transition-colors">Centro de ayuda</a></li>
1025                        <li><a href="faq.html" class="hover:text-purple-600 transition-colors">FAQ</a></li>
1026                        <li><a href="#" class="hover:text-purple-600 transition-colors">Contacto</a></li>
1027                    </ul>
1028                </div>
1029                <div>
1030                    <h5 class="font-semibold mb-3 dark:text-white">Legal</h5>
1031                    <ul class="space-y-2 text-gray-600 dark:text-gray-400">
1032                        <li><a href="privacy-policy.html" class="hover:text-purple-600 transition-colors">Privacidad</a></li>
1033                        <li><a href="terminos-condiciones.html" class="hover:text-purple-600 transition-colors">Términos</a></li>
1034                        <li><a href="politicas-uso.html" class="hover:text-purple-600 transition-colors">Políticas</a></li>
1035                    </ul>
1036                </div>
1037            </div>
1038            <div class="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700 text-center text-gray-600 dark:text-gray-400">
1039                <p>&copy; 2025 Castellano.ai. Todos los derechos reservados.</p>
1040            </div>
1041        </div>
1042    </footer>
1043
1044    
1044<script>
1045        // Dark Mode Toggle
1046        const themeToggle = document.getElementById('themeToggle');
1047        const html = document.documentElement;
1048
1049        themeToggle.addEventListener('click', () => {
1050            html.classList.toggle('dark');
1051            localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light');
1052        });
1053
1054        // Initialize theme
1055        if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
1056            html.classList.add('dark');
1057        }
1058
1059        // Category Toggle Functionality
1060        function toggleCategory(categoryId) {
1061            const content = document.getElementById(categoryId + '-content');
1062            content.classList.toggle('expanded');
1063        }
1064
1065        // Quick Actions
1066        function showQuickStart() {
1067            alert('Guía de Inicio Rápido:\n\n1. Crea tu cuenta gratuita\n2. Escribe o pega tu texto\n3. Selecciona tu país\n4. Haz clic en "Corregir Texto"\n5. Revisa las sugerencias\n\n¡Listo para comenzar!');
1068        }
1069
1070        function showTutorials() {
1071            // Scroll to tutorials section
1072            document.querySelector('section:has(.video-placeholder)').scrollIntoView({ 
1073                behavior: 'smooth', 
1074                block: 'start' 
1075            });
1076        }
1077
1078        function showTroubleshooting() {
1079            toggleCategory('troubleshooting');
1080            document.getElementById('troubleshooting-content').scrollIntoView({ 
1081                behavior: 'smooth', 
1082                block: 'center' 
1083            });
1084        }
1085
1086        function contactSupport() {
1087            window.location.href = 'mailto:[email protected]?subject=Solicitud de Ayuda&body=Hola, necesito ayuda con:';
1088        }
1089
1090        // Video Tutorial Functions
1091        function playTutorial(type) {
1092            const tutorials = {
1093                'intro': 'Tutorial de introducción a Castellano.ai',
1094                'premium': 'Funciones Premium explicadas',
1095                'writing-tips': 'Consejos para mejorar tu escritura'
1096            };
1097            
1098            alert(`Reproduciendo: ${tutorials[type]}\n\nEn la versión completa, aquí se abriría el reproductor de video.`);
1099        }
1100
1101        // Article Functions
1102        function openArticle(articleId) {
1103            const articles = {
1104                'crear-cuenta': 'Artículo: Cómo crear tu cuenta en Castellano.ai',
1105                'primer-analisis': 'Artículo: Realizando tu primer análisis de texto',
1106                'configurar-pais': 'Artículo: Configuración de país y región',
1107                'correccion-avanzada': 'Artículo: Usando la corrección avanzada de gramática',
1108                'mejora-estilo': 'Artículo: Mejorando el estilo y claridad de tu texto',
1109                'traduccion': 'Artículo: Cómo usar la función de traducción',
1110                // Add more articles as needed
1111            };
1112            
1113            alert(`${articles[articleId] || 'Artículo no encontrado'}\n\nEn la versión completa, aquí se abriría el artículo completo con guías paso a paso, capturas de pantalla y ejemplos.`);
1114        }
1115
1116        // Search Functionality
1117        const helpSearchInput = document.getElementById('helpSearchInput');
1118        const helpSearchResults = document.getElementById('helpSearchResults');
1119
1120        helpSearchInput.addEventListener('input', (e) => {
1121            const searchTerm = e.target.value.toLowerCase().trim();
1122            
1123            if (searchTerm === '') {
1124                helpSearchResults.textContent = '';
1125                return;
1126            }
1127
1128            // Simple search simulation
1129            const searchResults = [
1130                'Cómo crear tu cuenta',
1131                'Primer análisis de texto', 
1132                'Configurar país y región',
1133                'Corrección avanzada',
1134                'Mejora de estilo',
1135                'Función de traducción',
1136                'Actualizar a Premium',
1137                'Problemas de carga',
1138                'Documentación API'
1139            ];
1140
1141            const matches = searchResults.filter(result => 
1142                result.toLowerCase().includes(searchTerm)
1143            );
1144
1145            if (matches.length > 0) {
1146                helpSearchResults.innerHTML = `
1147                    <div class="text-green-600 dark:text-green-400">
1148                        Se encontraron ${matches.length} resultado${matches.length !== 1 ? 's' : ''} para "${searchTerm}":
1149                        <ul class="mt-2 space-y-1">
1150                            ${matches.map(match => `<li class="hover:underline cursor-pointer">• ${match}</li>`).join('')}
1151                        </ul>
1152                    </div>
1153                `;
1154            } else {
1155                helpSearchResults.innerHTML = `
1156                    <div class="text-red-600 dark:text-red-400">
1157                        No se encontraron resultados para "${searchTerm}". 
1158                        <button onclick="contactSupport()" class="underline">Contacta nuestro soporte</button>
1159                    </div>
1160                `;
1161            }
1162        });
1163
1164        // Animate progress bars on scroll
1165        const observerOptions = {
1166            threshold: 0.5,
1167            rootMargin: '0px 0px -50px 0px'
1168        };
1169
1170        const observer = new IntersectionObserver((entries) => {
1171            entries.forEach(entry => {
1172                if (entry.isIntersecting) {
1173                    const progressBars = entry.target.querySelectorAll('.progress-fill');
1174                    progressBars.forEach(bar => {
1175                        const width = bar.style.width;
1176                        bar.style.width = '0%';
1177                        setTimeout(() => {
1178                            bar.style.width = width;
1179                        }, 200);
1180                    });
1181                }
1182            });
1183        }, observerOptions);
1184
1185        // Observe progress sections
1186        document.querySelectorAll('.progress-bar').forEach(section => {
1187            observer.observe(section.closest('.bg-white, .bg-gray-800'));
1188        });
1189
1190        // Download button functionality
1191        document.querySelectorAll('button').forEach(button => {
1192            if (button.textContent.includes('Descargar')) {
1193                button.addEventListener('click', (e) => {
1194                    e.stopPropagation();
1195                    alert('Iniciando descarga...\n\nEn la versión completa, aquí se descargaría el archivo PDF/DOCX correspondiente.');
1196                });
1197            }
1198        });
1199
1200        // Animate cards on scroll
1201        const cardObserver = new IntersectionObserver((entries) => {
1202            entries.forEach(entry => {
1203                if (entry.isIntersecting) {
1204                    entry.target.style.opacity = '1';
1205                    entry.target.style.transform = 'translateY(0)';
1206                }
1207            });
1208        }, { threshold: 0.1 });
1209
1210        document.querySelectorAll('.help-category-card, .quick-action-card').forEach(card => {
1211            card.style.opacity = '0';
1212            card.style.transform = 'translateY(20px)';
1213            card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
1214            cardObserver.observe(card);
1215        });
1216
1217        // Enhanced interactivity for help articles
1218        document.querySelectorAll('.help-article').forEach(article => {
1219            article.addEventListener('click', (e) => {
1220                e.stopPropagation();
1221                
1222                // Add visual feedback
1223                article.style.transform = 'scale(0.98)';
1224                setTimeout(() => {
1225                    article.style.transform = 'translateY(-2px)';
1226                }, 100);
1227                
1228                // Then call the open article function
1229                const articleId = article.onclick?.toString().match(/openArticle\('([^']+)'\)/)?.[1];
1230                if (articleId) {
1231                    openArticle(articleId);
1232                }
1233            });
1234        });
1235    </script>
1235
1236</body>
1237
1238</html>

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