{# 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">{{ 'experience.title'|trans }} <em>{{ 'experience.title_em'|trans }}</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;">
                {{ 'experience.intro'|trans }}
            </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;">
                                    {{ 'experience.freelance.company'|trans }}
                                </h3>
                                <p style="font-family: var(--mono); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--leaf);">
                                    {{ 'experience.freelance.role'|trans }}
                                </p>
                            </div>
                            <div style="text-align: right;">
                                <p style="font-family: var(--mono); font-size: 0.75rem; color: var(--text-dim);">{{ 'experience.freelance.period'|trans }}</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;">{{ 'experience.current_badge'|trans }}</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>
                                {{ 'experience.freelance.task1'|trans }}
                            </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>
                                {{ 'experience.freelance.task2'|trans }}
                            </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>
                                {{ 'experience.freelance.task3'|trans }}
                            </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>
                                {{ 'experience.freelance.task4'|trans }}
                            </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;">
                                    {{ 'experience.softtek.company'|trans }}
                                </h3>
                                <p style="font-family: var(--mono); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--leaf);">
                                    {{ 'experience.softtek.role'|trans }}
                                </p>
                            </div>
                            <p style="font-family: var(--mono); font-size: 0.75rem; color: var(--text-dim);">{{ 'experience.softtek.period'|trans }}</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>
                                {{ 'experience.softtek.task1'|trans }}
                            </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>
                                {{ 'experience.softtek.task2'|trans }}
                            </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>
                                {{ 'experience.softtek.task3'|trans }}
                            </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;">
                                    {{ 'experience.heinsohn.company'|trans }}
                                </h3>
                                <p style="font-family: var(--mono); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--leaf);">
                                    {{ 'experience.heinsohn.role'|trans }}
                                </p>
                            </div>
                            <p style="font-family: var(--mono); font-size: 0.75rem; color: var(--text-dim);">{{ 'experience.heinsohn.period'|trans }}</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>
                                {{ 'experience.heinsohn.task1'|trans }}
                            </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>
                                {{ 'experience.heinsohn.task2'|trans }}
                            </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>
                                {{ 'experience.heinsohn.task3'|trans }}
                            </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;">
                                    {{ 'experience.xpectrum.company'|trans }}
                                </h3>
                                <p style="font-family: var(--mono); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--leaf);">
                                    {{ 'experience.xpectrum.role'|trans }}
                                </p>
                            </div>
                            <p style="font-family: var(--mono); font-size: 0.75rem; color: var(--text-dim);">{{ 'experience.xpectrum.period'|trans }}</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>
                                {{ 'experience.xpectrum.task1'|trans }}
                            </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>
                                {{ 'experience.xpectrum.task2'|trans }}
                            </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>
                                {{ 'experience.xpectrum.task3'|trans }}
                            </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;">
                                    {{ 'experience.freelance_early.company'|trans }}
                                </h3>
                                <p style="font-family: var(--mono); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--leaf);">
                                    {{ 'experience.freelance_early.role'|trans }}
                                </p>
                            </div>
                            <p style="font-family: var(--mono); font-size: 0.75rem; color: var(--text-dim);">{{ 'experience.freelance_early.period'|trans }}</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>
                                {{ 'experience.freelance_early.task1'|trans }}
                            </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>
                                {{ 'experience.freelance_early.task2'|trans }}
                            </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>
                                {{ 'experience.freelance_early.task3'|trans }}
                            </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>
                                {{ 'experience.freelance_early.task4'|trans }}
                            </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>