{# Experience Section - Timeline 2015-2024 #}
<section id="experience" style="min-height: 100vh; padding: var(--space-xl) var(--space-md); background: var(--soil);">
    <div class="wrap reveal">
        <h2 class="section-title">Experiencia <em>Profesional</em></h2>
        <div style="max-width: 1000px; margin: 0 auto;">
            <p style="color: var(--text-mid); text-align: center; margin-bottom: var(--space-xl); font-size: 1.125rem;">
                9+ años desarrollando soluciones para e-commerce, automatización e IA en LATAM
            </p>
            {# Timeline #}
            <div style="position: relative;">
                {# Línea vertical #}
                <div style="position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--border2);"></div>
                {# Freelance Actual #}
                <div style="position: relative; padding-left: var(--space-lg); margin-bottom: var(--space-xl);" class="reveal">
                    <div style="position: absolute; left: -6px; top: 8px; width: 14px; height: 14px; border-radius: 50%; background: var(--dawn); border: 2px solid var(--soil);"></div>
                    <div style="background: var(--bark2); padding: var(--space-md); border-radius: 4px; border-left: 3px solid var(--dawn);">
                        <div style="display: flex; justify-content: space-between; align-items: start; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-sm);">
                            <div>
                                <h3 style="font-family: var(--display); font-size: 1.5rem; font-weight: 700; color: var(--mist); margin-bottom: 0.25rem;">
                                    Freelance
                                </h3>
                                <p style="font-family: var(--mono); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--leaf);">
                                    Full Stack Developer
                                </p>
                            </div>
                            <div style="text-align: right;">
                                <p style="font-family: var(--mono); font-size: 0.75rem; color: var(--text-dim);">Mayo 2023 — Presente</p>
                                <span style="display: inline-block; padding: 0.25rem 0.5rem; background: var(--moss); color: var(--leaf2); font-family: var(--mono); font-size: 0.75rem; border-radius: 4px; margin-top: 0.25rem;">● Actual</span>
                            </div>
                        </div>
                        <ul style="list-style: none; padding: 0; margin: var(--space-sm) 0;">
                            <li style="color: var(--text-mid); margin-bottom: 0.5rem; padding-left: 1.5rem; position: relative;">
                                <span style="position: absolute; left: 0; color: var(--dawn);">▸</span>
                                Integración de WhatsApp Cloud API para WooCommerce
                            </li>
                            <li style="color: var(--text-mid); margin-bottom: 0.5rem; padding-left: 1.5rem; position: relative;">
                                <span style="position: absolute; left: 0; color: var(--dawn);">▸</span>
                                Plugin de facturación electrónica DIAN en WordPress
                            </li>
                            <li style="color: var(--text-mid); margin-bottom: 0.5rem; padding-left: 1.5rem; position: relative;">
                                <span style="position: absolute; left: 0; color: var(--dawn);">▸</span>
                                Panel de agendamiento de citas conectado con WhatsApp Cloud
                            </li>
                            <li style="color: var(--text-mid); margin-bottom: 0.5rem; padding-left: 1.5rem; position: relative;">
                                <span style="position: absolute; left: 0; color: var(--dawn);">▸</span>
                                Integración de API Strava para plataforma de atletismo
                            </li>
                        </ul>
                        <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--space-sm);">
                            <span class="tag">PHP</span>
                            <span class="tag">Symfony</span>
                            <span class="tag">Laravel</span>
                            <span class="tag">React</span>
                            <span class="tag">Docker</span>
                            <span class="tag">REST APIs</span>
                        </div>
                    </div>
                </div>
                {# Softtek #}
                <div style="position: relative; padding-left: var(--space-lg); margin-bottom: var(--space-xl);" class="reveal">
                    <div style="position: absolute; left: -6px; top: 8px; width: 14px; height: 14px; border-radius: 50%; background: var(--coffee); border: 2px solid var(--soil);"></div>
                    <div style="background: var(--bark2); padding: var(--space-md); border-radius: 4px;">
                        <div style="display: flex; justify-content: space-between; align-items: start; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-sm);">
                            <div>
                                <h3 style="font-family: var(--display); font-size: 1.5rem; font-weight: 700; color: var(--mist); margin-bottom: 0.25rem;">
                                    Softtek
                                </h3>
                                <p style="font-family: var(--mono); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--leaf);">
                                    Backend Developer
                                </p>
                            </div>
                            <p style="font-family: var(--mono); font-size: 0.75rem; color: var(--text-dim);">Enero 2022 — Mayo 2023</p>
                        </div>
                        <ul style="list-style: none; padding: 0; margin: var(--space-sm) 0;">
                            <li style="color: var(--text-mid); margin-bottom: 0.5rem; padding-left: 1.5rem; position: relative;">
                                <span style="position: absolute; left: 0; color: var(--coffee2);">▸</span>
                                Módulo de comentarios en marketplace B2B para compradores y vendedores
                            </li>
                            <li style="color: var(--text-mid); margin-bottom: 0.5rem; padding-left: 1.5rem; position: relative;">
                                <span style="position: absolute; left: 0; color: var(--coffee2);">▸</span>
                                Optimización de cron jobs: +92% de éxito en órdenes completadas
                            </li>
                            <li style="color: var(--text-mid); margin-bottom: 0.5rem; padding-left: 1.5rem; position: relative;">
                                <span style="position: absolute; left: 0; color: var(--coffee2);">▸</span>
                                Mejora de métricas de resolución de tickets de soporte hasta 90%
                            </li>
                        </ul>
                        <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--space-sm);">
                            <span class="tag">PHP</span>
                            <span class="tag">Zend Framework</span>
                            <span class="tag">Azure DevOps</span>
                            <span class="tag">SQL</span>
                            <span class="tag">JavaScript</span>
                        </div>
                    </div>
                </div>
                {# Heinsohn #}
                <div style="position: relative; padding-left: var(--space-lg); margin-bottom: var(--space-xl);" class="reveal">
                    <div style="position: absolute; left: -6px; top: 8px; width: 14px; height: 14px; border-radius: 50%; background: var(--avocado); border: 2px solid var(--soil);"></div>
                    <div style="background: var(--bark2); padding: var(--space-md); border-radius: 4px;">
                        <div style="display: flex; justify-content: space-between; align-items: start; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-sm);">
                            <div>
                                <h3 style="font-family: var(--display); font-size: 1.5rem; font-weight: 700; color: var(--mist); margin-bottom: 0.25rem;">
                                    Heinsohn
                                </h3>
                                <p style="font-family: var(--mono); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--leaf);">
                                    Backend Developer
                                </p>
                            </div>
                            <p style="font-family: var(--mono); font-size: 0.75rem; color: var(--text-dim);">Mayo 2021 — Enero 2022</p>
                        </div>
                        <ul style="list-style: none; padding: 0; margin: var(--space-sm) 0;">
                            <li style="color: var(--text-mid); margin-bottom: 0.5rem; padding-left: 1.5rem; position: relative;">
                                <span style="position: absolute; left: 0; color: var(--leaf);">▸</span>
                                Módulo de cálculo de costos de envío con múltiples opciones
                            </li>
                            <li style="color: var(--text-mid); margin-bottom: 0.5rem; padding-left: 1.5rem; position: relative;">
                                <span style="position: absolute; left: 0; color: var(--leaf);">▸</span>
                                Tarifas de envío configurables por ubicación geográfica
                            </li>
                            <li style="color: var(--text-mid); margin-bottom: 0.5rem; padding-left: 1.5rem; position: relative;">
                                <span style="position: absolute; left: 0; color: var(--leaf);">▸</span>
                                Integración con API de totales externos para mejorar checkout
                            </li>
                        </ul>
                        <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--space-sm);">
                            <span class="tag">PHP</span>
                            <span class="tag">JavaScript</span>
                            <span class="tag">REST APIs</span>
                            <span class="tag">SQL</span>
                            <span class="tag">Git</span>
                        </div>
                    </div>
                </div>
                {# Xpectrum #}
                <div style="position: relative; padding-left: var(--space-lg); margin-bottom: var(--space-xl);" class="reveal">
                    <div style="position: absolute; left: -6px; top: 8px; width: 14px; height: 14px; border-radius: 50%; background: var(--citrus); border: 2px solid var(--soil);"></div>
                    <div style="background: var(--bark2); padding: var(--space-md); border-radius: 4px;">
                        <div style="display: flex; justify-content: space-between; align-items: start; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-sm);">
                            <div>
                                <h3 style="font-family: var(--display); font-size: 1.5rem; font-weight: 700; color: var(--mist); margin-bottom: 0.25rem;">
                                    Xpectrum Technologies
                                </h3>
                                <p style="font-family: var(--mono); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--leaf);">
                                    Backend Developer
                                </p>
                            </div>
                            <p style="font-family: var(--mono); font-size: 0.75rem; color: var(--text-dim);">Enero 2021 — Abril 2021</p>
                        </div>
                        <ul style="list-style: none; padding: 0; margin: var(--space-sm) 0;">
                            <li style="color: var(--text-mid); margin-bottom: 0.5rem; padding-left: 1.5rem; position: relative;">
                                <span style="position: absolute; left: 0; color: var(--citrus2);">▸</span>
                                Checkout personalizado en Magento Cloud — aumento en conversión
                            </li>
                            <li style="color: var(--text-mid); margin-bottom: 0.5rem; padding-left: 1.5rem; position: relative;">
                                <span style="position: absolute; left: 0; color: var(--citrus2);">▸</span>
                                Optimización de imágenes con Fastly — mejora de PageSpeed Score
                            </li>
                            <li style="color: var(--text-mid); margin-bottom: 0.5rem; padding-left: 1.5rem; position: relative;">
                                <span style="position: absolute; left: 0; color: var(--citrus2);">▸</span>
                                Atributos de cliente personalizados en panel administrativo
                            </li>
                        </ul>
                        <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--space-sm);">
                            <span class="tag">Magento 2</span>
                            <span class="tag">PHP</span>
                            <span class="tag">Fastly</span>
                            <span class="tag">JavaScript</span>
                        </div>
                    </div>
                </div>
                {# Freelance Early Years #}
                <div style="position: relative; padding-left: var(--space-lg);" class="reveal">
                    <div style="position: absolute; left: -6px; top: 8px; width: 14px; height: 14px; border-radius: 50%; background: var(--platano); border: 2px solid var(--soil);"></div>
                    <div style="background: var(--bark2); padding: var(--space-md); border-radius: 4px;">
                        <div style="display: flex; justify-content: space-between; align-items: start; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-sm);">
                            <div>
                                <h3 style="font-family: var(--display); font-size: 1.5rem; font-weight: 700; color: var(--mist); margin-bottom: 0.25rem;">
                                    Freelance — Inicios
                                </h3>
                                <p style="font-family: var(--mono); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--leaf);">
                                    Full Stack Developer · Autodidacta
                                </p>
                            </div>
                            <p style="font-family: var(--mono); font-size: 0.75rem; color: var(--text-dim);">Enero 2015 — Enero 2021</p>
                        </div>
                        <ul style="list-style: none; padding: 0; margin: var(--space-sm) 0;">
                            <li style="color: var(--text-mid); margin-bottom: 0.5rem; padding-left: 1.5rem; position: relative;">
                                <span style="position: absolute; left: 0; color: var(--platano);">▸</span>
                                5 años construyendo proyectos e-commerce para clientes en Colombia y LATAM
                            </li>
                            <li style="color: var(--text-mid); margin-bottom: 0.5rem; padding-left: 1.5rem; position: relative;">
                                <span style="position: absolute; left: 0; color: var(--platano);">▸</span>
                                Desarrollo de plugins open source para WooCommerce y WordPress
                            </li>
                            <li style="color: var(--text-mid); margin-bottom: 0.5rem; padding-left: 1.5rem; position: relative;">
                                <span style="position: absolute; left: 0; color: var(--platano);">▸</span>
                                Integración de pasarelas de pago y logística para Colombia
                            </li>
                            <li style="color: var(--text-mid); margin-bottom: 0.5rem; padding-left: 1.5rem; position: relative;">
                                <span style="position: absolute; left: 0; color: var(--platano);">▸</span>
                                Fundación de la base técnica que hoy mantiene 7k+ tiendas
                            </li>
                        </ul>
                        <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--space-sm);">
                            <span class="tag">PHP</span>
                            <span class="tag">WordPress</span>
                            <span class="tag">WooCommerce</span>
                            <span class="tag">JavaScript</span>
                            <span class="tag">MySQL</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>