{# About Section - Brand Kit v2.0 Completo #}
<section id="about" style="min-height: 100vh; padding: var(--space-xl) var(--space-md); background: var(--bark);">
    <div class="wrap reveal">
        <h2 class="section-title">Sobre <em>mí</em></h2>
        <div style="max-width: 900px; margin: 0 auto;">
            {# Intro #}
            <p style="color: var(--text-mid); font-size: 1.25rem; line-height: 1.7; margin-bottom: var(--space-lg);">
                Crecí entre café, aguacate, plátano y cítricos en El Zulia, Norte de Santander. 
                Cada cultivo tiene sus tiempos — el código también.
            </p>
            {# Los 4 Cultivos como Valores #}
            <div style="margin: var(--space-xl) 0;">
                <h3 style="font-family: var(--display); font-size: 1.75rem; font-weight: 700; color: var(--dawn); margin-bottom: var(--space-md); text-align: center;">
                    Los cuatro cultivos como valores
                </h3>
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-md); margin-top: var(--space-lg);">
                    {# Café #}
                    <div style="padding: var(--space-md); background: var(--bark2); border-left: 4px solid var(--coffee); border-radius: 4px;">
                        <h4 style="font-family: var(--mono); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--coffee2); margin-bottom: var(--space-sm); display: flex; align-items: center; gap: 0.5rem;">
                            <span style="font-size: 1.5rem;">☕</span> Café
                        </h4>
                        <p style="color: var(--text-mid); font-size: 0.95rem; line-height: 1.6; margin-bottom: var(--space-xs);">
                            <strong style="color: var(--mist);">Paciencia · Proceso largo · Calidad</strong>
                        </p>
                        <p style="color: var(--text-dim); font-size: 0.875rem; line-height: 1.5;">
                            Proyectos complejos: Symfony, arquitecturas que duran años
                        </p>
                    </div>
                    {# Aguacate #}
                    <div style="padding: var(--space-md); background: var(--bark2); border-left: 4px solid var(--avocado); border-radius: 4px;">
                        <h4 style="font-family: var(--mono); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--leaf); margin-bottom: var(--space-sm); display: flex; align-items: center; gap: 0.5rem;">
                            <span style="font-size: 1.5rem;">🥑</span> Aguacate
                        </h4>
                        <p style="color: var(--text-mid); font-size: 0.95rem; line-height: 1.6; margin-bottom: var(--space-xs);">
                            <strong style="color: var(--mist);">Crecimiento lento · Fruto concreto · Valor real</strong>
                        </p>
                        <p style="color: var(--text-dim); font-size: 0.875rem; line-height: 1.5;">
                            Open source con impacto: plugins con 7k+ tiendas activas
                        </p>
                    </div>
                    {# Plátano #}
                    <div style="padding: var(--space-md); background: var(--bark2); border-left: 4px solid var(--platano); border-radius: 4px;">
                        <h4 style="font-family: var(--mono); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--platano); margin-bottom: var(--space-sm); display: flex; align-items: center; gap: 0.5rem;">
                            <span style="font-size: 1.5rem;">🍌</span> Plátano
                        </h4>
                        <p style="color: var(--text-mid); font-size: 0.95rem; line-height: 1.6; margin-bottom: var(--space-xs);">
                            <strong style="color: var(--mist);">Base · Abundancia · Lo esencial</strong>
                        </p>
                        <p style="color: var(--text-dim); font-size: 0.875rem; line-height: 1.5;">
                            Backend sólido, bases de datos, APIs que no fallan
                        </p>
                    </div>
                    {# Cítricos #}
                    <div style="padding: var(--space-md); background: var(--bark2); border-left: 4px solid var(--citrus); border-radius: 4px;">
                        <h4 style="font-family: var(--mono); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--citrus2); margin-bottom: var(--space-sm); display: flex; align-items: center; gap: 0.5rem;">
                            <span style="font-size: 1.5rem;">🍊</span> Cítricos
                        </h4>
                        <p style="color: var(--text-mid); font-size: 0.95rem; line-height: 1.6; margin-bottom: var(--space-xs);">
                            <strong style="color: var(--mist);">Frescura · Energía · Adaptabilidad</strong>
                        </p>
                        <p style="color: var(--text-dim); font-size: 0.875rem; line-height: 1.5;">
                            Stack versátil: PHP, React, Node, IA según el problema
                        </p>
                    </div>
                </div>
            </div>
            {# Sección IA #}
            <div style="margin: var(--space-xl) 0; padding: var(--space-lg); background: rgba(74, 127, 165, 0.1); border-left: 4px solid var(--ai); border-radius: 4px;">
                <h4 style="font-family: var(--mono); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ai2); margin-bottom: var(--space-sm); display: flex; align-items: center; gap: 0.5rem;">
                    <span style="font-size: 1.5rem;">🤖</span> IA — La nueva semilla
                </h4>
                <p style="font-family: var(--display); font-size: 1.5rem; font-style: italic; font-weight: 300; color: var(--ai2); line-height: 1.5; margin-bottom: var(--space-sm);">
                    No prometo IA. Ya la entrego.
                </p>
                <p style="color: var(--text-mid); font-size: 1.05rem; line-height: 1.7;">
                    Integro inteligencia artificial en proyectos reales para clientes. 
                    Como el agricultor que adopta nuevas técnicas sin abandonar el conocimiento de la tierra: 
                    <strong style="color: var(--mist);">el criterio permanece, las herramientas evolucionan.</strong>
                </p>
            </div>
            {# Filosofía CI/CD #}
            <div style="margin: var(--space-xl) 0; text-align: center;">
                <p style="font-family: var(--mono); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--text-dim); margin-bottom: var(--space-sm);">
                    Filosofía de desarrollo
                </p>
                <p style="font-family: var(--display); font-size: 1.25rem; font-weight: 600; color: var(--leaf); margin-bottom: var(--space-xs);">
                    CI/CD como forma de vida
                </p>
                <p style="color: var(--text-mid); font-size: 1rem; line-height: 1.6;">
                    Continuous Improvement / Continuous Delivery<br>
                    Cada día una versión mejor del código y de uno mismo.
                </p>
            </div>
            {# Frase Filosófica #}
            <div style="margin: var(--space-xl) 0; padding: var(--space-lg); text-align: center; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);">
                <p style="font-family: var(--display); font-size: 1.75rem; font-style: italic; font-weight: 300; color: var(--dawn); line-height: 1.5;">
                    "La tierra no espera condiciones perfectas para dar fruto. Yo tampoco."
                </p>
            </div>
        </div>
    </div>
</section>