<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ruta de Aprendizaje Completa - Cómo Cambiar de Carrera en 8 Meses</title>
    <meta name="description" content="Guía paso a paso para cambiar de carrera a desarrollo web. La misma ruta que siguió Diego para triplicar sus ingresos en 8 meses estudiando online.">
    <link rel="icon" href="assets/favico.ico" type="image/x-icon">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #0c1445 0%, #1e3a8a 30%, #3730a3 70%, #1e1b4b 100%);
            background-attachment: fixed;
            color: #e0e7ff;
            line-height: 1.6;
            min-height: 100vh;
            position: relative;
        }
        
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.1) 0%, transparent 40%),
                radial-gradient(circle at 80% 60%, rgba(168, 85, 247, 0.08) 0%, transparent 40%),
                radial-gradient(circle at 40% 80%, rgba(14, 165, 233, 0.06) 0%, transparent 40%);
            pointer-events: none;
            z-index: -1;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        header {
            background: rgba(15, 23, 42, 0.9);
            backdrop-filter: blur(15px);
            padding: 20px 0;
            border-bottom: 2px solid #3b82f6;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 4px 20px rgba(59, 130, 246, 0.1);
        }
        
        .logo {
            font-size: 30px;
            font-weight: 700;
            color: #3b82f6;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s ease;
            text-shadow: 0 0 30px rgba(59, 130, 246, 0.4);
            letter-spacing: -0.5px;
        }
        
        nav {
            float: right;
            margin-top: 10px;
        }
        
        nav a {
            color: #cbd5e1;
            text-decoration: none;
            margin: 0 18px;
            font-weight: 500;
            font-size: 15px;
            transition: all 0.3s ease;
            padding: 10px 18px;
            border-radius: 8px;
            border: 1px solid transparent;
        }
        
        nav a:hover, nav a.active {
            color: #3b82f6;
            background: rgba(59, 130, 246, 0.1);
            border-color: rgba(59, 130, 246, 0.3);
            box-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
        }
        
        .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }
        
        .hero {
            text-align: center;
            padding: 100px 0;
            background: 
                linear-gradient(135deg, rgba(15, 23, 42, 0.8) 0%, rgba(30, 58, 138, 0.6) 50%, rgba(55, 48, 163, 0.4) 100%),
                url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%233b82f6" stroke-width="0.5" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
        }
        
        .hero h1 {
            font-size: 48px;
            margin-bottom: 20px;
            color: #f1f5f9;
            text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
            font-weight: 800;
            letter-spacing: -1px;
        }
        
        .roadmap-content {
            padding: 80px 0;
            background: linear-gradient(180deg, rgba(15, 23, 42, 0.6) 0%, rgba(30, 58, 138, 0.3) 100%);
        }
        
        .phase {
            background: linear-gradient(145deg, rgba(30, 58, 138, 0.15), rgba(15, 23, 42, 0.8));
            padding: 50px;
            border-radius: 20px;
            border: 1px solid rgba(59, 130, 246, 0.2);
            backdrop-filter: blur(10px);
            margin-bottom: 40px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
            position: relative;
        }
        
        .phase::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: linear-gradient(90deg, #3b82f6, #60a5fa);
            border-radius: 20px 20px 0 0;
        }
        
        .phase-header {
            display: flex;
            align-items: center;
            margin-bottom: 30px;
        }
        
        .phase-number {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #3b82f6, #1d4ed8);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            font-weight: 700;
            color: white;
            margin-right: 20px;
            box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
        }
        
        .phase-title {
            color: #3b82f6;
            font-size: 32px;
            font-weight: 700;
        }
        
        .phase-duration {
            background: rgba(59, 130, 246, 0.1);
            padding: 8px 16px;
            border-radius: 25px;
            color: #60a5fa;
            font-size: 14px;
            font-weight: 600;
            margin-left: auto;
            border: 1px solid rgba(59, 130, 246, 0.3);
        }
        
        .phase h3 {
            color: #60a5fa;
            font-size: 24px;
            margin-bottom: 15px;
            margin-top: 25px;
        }
        
        .phase p {
            color: #cbd5e1;
            font-size: 17px;
            margin-bottom: 15px;
            line-height: 1.8;
        }
        
        .skills-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-top: 25px;
        }
        
        .skill-item {
            background: rgba(59, 130, 246, 0.1);
            padding: 20px;
            border-radius: 12px;
            border: 1px solid rgba(59, 130, 246, 0.2);
            transition: all 0.3s ease;
        }
        
        .skill-item:hover {
            background: rgba(59, 130, 246, 0.15);
            transform: translateY(-2px);
        }
        
        .skill-item h4 {
            color: #3b82f6;
            font-size: 18px;
            margin-bottom: 10px;
        }
        
        .resource-list {
            background: rgba(168, 85, 247, 0.05);
            padding: 25px;
            border-radius: 15px;
            border-left: 4px solid #a855f7;
            margin-top: 20px;
        }
        
        .resource-list h4 {
            color: #a855f7;
            font-size: 20px;
            margin-bottom: 15px;
        }
        
        .resource-list ul {
            list-style: none;
            padding: 0;
        }
        
        .resource-list li {
            color: #cbd5e1;
            padding: 8px 0;
            padding-left: 25px;
            position: relative;
        }
        
        .resource-list li::before {
            content: '▶';
            color: #a855f7;
            position: absolute;
            left: 0;
        }
        
        .cta-button {
            display: inline-block;
            background: linear-gradient(135deg, #3b82f6, #1d4ed8);
            color: #ffffff;
            padding: 16px 35px;
            text-decoration: none;
            border-radius: 12px;
            font-size: 17px;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
            border: 1px solid rgba(59, 130, 246, 0.5);
            margin-top: 30px;
        }
        
        .cta-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 15px 35px rgba(59, 130, 246, 0.4);
            background: linear-gradient(135deg, #2563eb, #1e40af);
        }
        
        footer {
            background: linear-gradient(135deg, #0c1445 0%, #1e1b4b 100%);
            padding: 50px 0;
            border-top: 2px solid #3b82f6;
            text-align: center;
            color: #94a3b8;
        }
        
        @media (max-width: 768px) {
            .hero h1 {
                font-size: 36px;
            }
            
            .phase {
                padding: 30px;
            }
            
            .phase-header {
                flex-direction: column;
                text-align: center;
            }
            
            .phase-duration {
                margin-left: 0;
                margin-top: 15px;
            }
            
            nav {
                float: none;
                text-align: center;
                margin-top: 20px;
            }
        }
    </style>
</head>
<body>
    <header>
        <div class="container clearfix">
             <a href="/white/index.html" class="logo">🎓 EduCarrera Pro</a>
            <nav>
                 <a href="/white/index.html">Inicio</a>
                 <a href="/white/historia.html">Historia</a>
                 <a href="/white/guia.html" class="active">Ruta</a>
                 <a href="/white/comentarios.html">Éxitos</a>
            </nav>
        </div>
    </header>

    <main>
        <section class="hero">
            <div class="container">
                <h1>Tu Ruta de Aprendizaje Completa</h1>
                <p style="font-size: 20px; color: #94a3b8; max-width: 700px; margin: 0 auto;">
                    La misma estrategia que siguió Diego para cambiar de carrera en 8 meses
                </p>
            </div>
        </section>

        <section class="roadmap-content">
            <div class="container">
                <div class="phase">
                    <div class="phase-header">
                        <div class="phase-number">1</div>
                        <div class="phase-title">Fundamentos Web</div>
                        <div class="phase-duration">Meses 1-2</div>
                    </div>
                    
                    <p>Esta es la base de todo. Antes de construir aplicaciones complejas, necesitas dominar los tres pilares fundamentales del desarrollo web.</p>
                    
                    <div class="skills-grid">
                        <div class="skill-item">
                            <h4>HTML5</h4>
                            <p>Estructura semántica, formularios, multimedia y accesibilidad web.</p>
                        </div>
                        <div class="skill-item">
                            <h4>CSS3</h4>
                            <p>Flexbox, Grid, animaciones, responsive design y metodología BEM.</p>
                        </div>
                        <div class="skill-item">
                            <h4>JavaScript ES6+</h4>
                            <p>Variables, funciones, objetos, arrays, DOM manipulation y eventos.</p>
                        </div>
                        <div class="skill-item">
                            <h4>Herramientas Básicas</h4>
                            <p>VSCode, Git/GitHub, línea de comandos y DevTools del navegador.</p>
                        </div>
                    </div>
                    
                    <div class="resource-list">
                        <h4>Recursos Recomendados</h4>
                        <ul>
                            <li>freeCodeCamp - Responsive Web Design Certification</li>
                            <li>MDN Web Docs - Documentación oficial</li>
                            <li>JavaScript30 - 30 proyectos prácticos</li>
                            <li>CSS Grid Garden - Juego para aprender Grid</li>
                            <li>Flexbox Froggy - Juego para aprender Flexbox</li>
                        </ul>
                    </div>
                    
                    <h3>Meta de estos 2 meses:</h3>
                    <p><strong>Construir 3 páginas web estáticas:</strong> Una página personal, un landing page de producto, y un clon de una página existente que te guste.</p>
                </div>

                <div class="phase">
                    <div class="phase-header">
                        <div class="phase-number">2</div>
                        <div class="phase-title">JavaScript Avanzado & React</div>
                        <div class="phase-duration">Meses 3-4</div>
                    </div>
                    
                    <p>Ahora que dominas las bases, es hora de aprender JavaScript moderno y React, la librería más demandada en el mercado laboral.</p>
                    
                    <div class="skills-grid">
                        <div class="skill-item">
                            <h4>JavaScript Avanzado</h4>
                            <p>Promesas, async/await, closures, this, prototipos y módulos ES6.</p>
                        </div>
                        <div class="skill-item">
                            <h4>React Fundamentals</h4>
                            <p>Componentes, JSX, props, state, hooks y ciclo de vida.</p>
                        </div>
                        <div class="skill-item">
                            <h4>React Router</h4>
                            <p>Navegación, rutas dinámicas y parámetros de URL.</p>
                        </div>
                        <div class="skill-item">
                            <h4>Estado Global</h4>
                            <p>Context API, Redux básico y gestión de estado complejo.</p>
                        </div>
                    </div>
                    
                    <div class="resource-list">
                        <h4>Recursos Recomendados</h4>
                        <ul>
                            <li>React Official Tutorial - Documentación oficial</li>
                            <li>The Complete React Developer Course (Udemy)</li>
                            <li>JavaScript Info - Guía completa de JS moderno</li>
                            <li>React Hooks Cheat Sheet</li>
                            <li>Egghead.io - Tutoriales cortos y específicos</li>
                        </ul>
                    </div>
                    
                    <h3>Meta de estos 2 meses:</h3>
                    <p><strong>Construir 2 aplicaciones React:</strong> Una ToDo app con localStorage y una app de clima que consuma APIs externas.</p>
                </div>

                <div class="phase">
                    <div class="phase-header">
                        <div class="phase-number">3</div>
                        <div class="phase-title">Backend & Full Stack</div>
                        <div class="phase-duration">Meses 5-6</div>
                    </div>
                    
                    <p>Para ser un desarrollador completo, necesitas entender cómo funcionan los servidores y las bases de datos. Node.js te permite usar JavaScript en el backend.</p>
                    
                    <div class="skills-grid">
                        <div class="skill-item">
                            <h4>Node.js & NPM</h4>
                            <p>Servidor HTTP, módulos, package.json y gestión de dependencias.</p>
                        </div>
                        <div class="skill-item">
                            <h4>Express.js</h4>
                            <p>Rutas, middleware, autenticación y validación de datos.</p>
                        </div>
                        <div class="skill-item">
                            <h4>Bases de Datos</h4>
                            <p>MongoDB/PostgreSQL, modelos de datos y consultas.</p>
                        </div>
                        <div class="skill-item">
                            <h4>APIs RESTful</h4>
                            <p>Endpoints, métodos HTTP, autenticación JWT y documentación.</p>
                        </div>
                    </div>
                    
                    <div class="resource-list">
                        <h4>Recursos Recomendados</h4>
                        <ul>
                            <li>Node.js Complete Guide (Udemy)</li>
                            <li>Express.js Documentation</li>
                            <li>MongoDB University - Cursos gratuitos</li>
                            <li>Postman - Testing de APIs</li>
                            <li>JWT.io - Aprende sobre tokens</li>
                        </ul>
                    </div>
                    
                    <h3>Meta de estos 2 meses:</h3>
                    <p><strong>Crear una aplicación full-stack:</strong> Un sistema de login con registro de usuarios, CRUD completo y conexión frontend-backend.</p>
                </div>

                <div class="phase">
                    <div class="phase-header">
                        <div class="phase-number">4</div>
                        <div class="phase-title">Proyectos Profesionales & Portfolio</div>
                        <div class="phase-duration">Meses 7-8</div>
                    </div>
                    
                    <p>Es hora de aplicar todo lo aprendido en proyectos que demuestren tus habilidades a empleadores. Tu portfolio será tu carta de presentación.</p>
                    
                    <div class="skills-grid">
                        <div class="skill-item">
                            <h4>Proyectos Complejos</h4>
                            <p>Aplicaciones con múltiples funcionalidades, deployment y testing.</p>
                        </div>
                        <div class="skill-item">
                            <h4>Mejores Prácticas</h4>
                            <p>Clean code, comentarios, estructura de carpetas y optimización.</p>
                        </div>
                        <div class="skill-item">
                            <h4>Portfolio Profesional</h4>
                            <p>Showcase de proyectos, descripción técnica y casos de uso.</p>
                        </div>
                        <div class="skill-item">
                            <h4>Preparación Laboral</h4>
                            <p>CV técnico, LinkedIn optimizado y práctica de entrevistas.</p>
                        </div>
                    </div>
                    
                    <h3>Los 3 Proyectos Clave para tu Portfolio:</h3>
                    
                    <h3>Proyecto 1: E-commerce Completo</h3>
                    <p><strong>Frontend:</strong> React con carrito de compras, filtros, búsqueda y checkout<br>
                    <strong>Backend:</strong> API con gestión de productos, usuarios y órdenes<br>
                    <strong>Base de datos:</strong> Productos, usuarios, órdenes de compra</p>
                    
                    <h3>Proyecto 2: Red Social Básica</h3>
                    <p><strong>Frontend:</strong> Dashboard, timeline, sistema de posts y comentarios<br>
                    <strong>Backend:</strong> Autenticación, CRUD de posts, sistema de likes<br>
                    <strong>Extras:</strong> Subida de imágenes, notificaciones en tiempo real</p>
                    
                    <h3>Proyecto 3: Dashboard de Datos</h3>
                    <p><strong>Frontend:</strong> Gráficos interactivos, filtros de fecha, exportación de datos<br>
                    <strong>Backend:</strong> API con agregación de datos y reportes<br>
                    <strong>Integración:</strong> Conexión con APIs externas o scraping de datos</p>
                    
                    <div class="resource-list">
                        <h4>Herramientas de Deployment</h4>
                        <ul>
                            <li>Netlify/Vercel - Frontend gratis</li>
                            <li>Heroku/Railway - Backend gratis</li>
                            <li>MongoDB Atlas - Base de datos gratuita</li>
                            <li>Cloudinary - Hosting de imágenes</li>
                            <li>GitHub Pages - Portfolio estático</li>
                        </ul>
                    </div>
                </div>

                <div class="phase">
                    <div class="phase-header">
                        <div class="phase-number">📋</div>
                        <div class="phase-title">Plan de Estudio Semanal</div>
                        <div class="phase-duration">Rutina Diaria</div>
                    </div>
                    
                    <h3>Lunes a Viernes (2 horas diarias):</h3>
                    <p><strong>6:00-7:00 PM:</strong> Teoría y tutoriales (videos, documentación, cursos)<br>
                    <strong>7:00-8:00 PM:</strong> Práctica hands-on (coding, ejercicios, proyectos)</p>
                    
                    <h3>Sábados (6 horas):</h3>
                    <p><strong>9:00-12:00 AM:</strong> Proyecto principal de la semana<br>
                    <strong>2:00-5:00 PM:</strong> Revisión, refactoring y documentación</p>
                    
                    <h3>Domingos (3 horas):</h3>
                    <p><strong>10:00-1:00 PM:</strong> Repaso de la semana, planificación y networking (LinkedIn, comunidades)</p>
                    
                    <h3>Tips para Mantener la Consistencia:</h3>
                    <p>• <strong>Elimina distracciones:</strong> Teléfono en silencio, redes sociales bloqueadas<br>
                    • <strong>Ambiente dedicado:</strong> Un espacio específico solo para estudiar<br>
                    • <strong>Trackea tu progreso:</strong> Lleva un registro diario de lo que aprendes<br>
                    • <strong>Busca accountabilidad:</strong> Únete a comunidades de programadores principiantes</p>
                </div>

                <div class="phase">
                    <div class="phase-header">
                        <div class="phase-number">💼</div>
                        <div class="phase-title">Estrategia de Búsqueda Laboral</div>
                        <div class="phase-duration">Mes 8 en adelante</div>
                    </div>
                    
                    <h3>Optimización de Perfiles:</h3>
                    <p><strong>LinkedIn:</strong> Título específico "Desarrollador Web | React | Node.js", resumen con proyectos destacados<br>
                    <strong>GitHub:</strong> README profesional, proyectos públicos bien documentados, commits consistentes<br>
                    <strong>Portfolio Web:</strong> Dominio propio, diseño limpio, tiempo de carga rápido</p>
                    
                    <h3>Dónde Aplicar:</h3>
                    <p>• <strong>LinkedIn Jobs:</strong> Filtra por "Junior Developer", "Trainee", "Sin experiencia requerida"<br>
                    • <strong>GetOnBoard:</strong> Plataforma chilena con muchas startups<br>
                    • <strong>CompuTrabajo:</strong> Ofertas locales y remotas<br>
                    • <strong>AngelList:</strong> Startups internacionales que buscan talento remoto<br>
                    • <strong>Freelance inicial:</strong> Upwork, Freelancer (para ganar experiencia)</p>
                    
                    <h3>Preparación para Entrevistas:</h3>
                    <p><strong>Técnicas:</strong> Practica algoritmos básicos, explica tus proyectos paso a paso<br>
                    <strong>Conductuales:</strong> Prepara historias sobre desafíos superados, motivación para el cambio<br>
                    <strong>Preguntas típicas:</strong> "¿Por qué desarrollo web?", "Explica este proyecto", "¿Cómo manejas los errores?"</p>

                     <a href="/white/comentarios.html" class="cta-button">Ver Historias de Éxito Reales</a>
                </div>
            </div>
        </section>
    </main>

    <footer>
        <div class="container">
            <p>© 2025 EduCarrera Pro - Tu éxito es nuestra misión</p>
        </div>
    </footer>
</body>
</html>