{# 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">{{ 'about.title'|trans }} <em>{{ 'about.title_em'|trans }}</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);">
                {{ 'about.intro'|trans }}
            </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;">
                    {{ 'about.cultivos.title'|trans }}
                </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> {{ 'about.cultivo.cafe.name'|trans }}
                        </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);">{{ 'about.cultivo.cafe.values'|trans }}</strong>
                        </p>
                        <p style="color: var(--text-dim); font-size: 0.875rem; line-height: 1.5;">
                            {{ 'about.cultivo.cafe.desc'|trans }}
                        </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> {{ 'about.cultivo.aguacate.name'|trans }}
                        </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);">{{ 'about.cultivo.aguacate.values'|trans }}</strong>
                        </p>
                        <p style="color: var(--text-dim); font-size: 0.875rem; line-height: 1.5;">
                            {{ 'about.cultivo.aguacate.desc'|trans }}
                        </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> {{ 'about.cultivo.platano.name'|trans }}
                        </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);">{{ 'about.cultivo.platano.values'|trans }}</strong>
                        </p>
                        <p style="color: var(--text-dim); font-size: 0.875rem; line-height: 1.5;">
                            {{ 'about.cultivo.platano.desc'|trans }}
                        </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> {{ 'about.cultivo.citrus.name'|trans }}
                        </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);">{{ 'about.cultivo.citrus.values'|trans }}</strong>
                        </p>
                        <p style="color: var(--text-dim); font-size: 0.875rem; line-height: 1.5;">
                            {{ 'about.cultivo.citrus.desc'|trans }}
                        </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> {{ 'about.ai.title'|trans }}
                </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);">
                    {{ 'about.ai.tagline'|trans }}
                </p>
                <p style="color: var(--text-mid); font-size: 1.05rem; line-height: 1.7;">
                    {{ 'about.ai.desc'|trans }}
                    <strong style="color: var(--mist);">{{ 'about.ai.desc_strong'|trans }}</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);">
                    {{ 'about.philosophy.label'|trans }}
                </p>
                <p style="font-family: var(--display); font-size: 1.25rem; font-weight: 600; color: var(--leaf); margin-bottom: var(--space-xs);">
                    {{ 'about.philosophy.title'|trans }}
                </p>
                <p style="color: var(--text-mid); font-size: 1rem; line-height: 1.6;">
                    {{ 'about.philosophy.desc'|trans|raw }}
                </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;">
                    "{{ 'about.quote'|trans }}"
                </p>
            </div>
        </div>
    </div>
</section>