feat: optimize mobile layout with unified design system

Comprehensive mobile optimization (≤768px) for improved consistency and readability:

- Center profile photo between name and intro text on mobile
- Unify all logo/icon sizes to 60×60px for visual consistency
- Standardize spacing across experience, courses, projects, and awards
- Reduce font sizes proportionally for better mobile readability
- Remove justified text alignment (except intro/skills) to prevent awkward spacing
- Apply consistent 1rem gaps and 1.5rem padding throughout
- Optimize sidebar items with reduced margins and font sizes

Technical improvements:
- Add comprehensive mobile breakpoint rules at 768px
- Implement flexible photo positioning (absolute on desktop, static on mobile)
- Ensure uniform typography scale across all content types

templates/cv-content.html

@@ -41,12 +41,15 @@
                     <div class="cv-header-left">
                         <h1 class="cv-name">Moreno Rubio, Juan Andrés</h1>
                         <p class="years-experience">{{.YearsOfExperience}} {{if eq .Lang "es"}}años de experiencia{{else}}years of experience{{end}}</p>
+
+                        <!-- Photo positioned for mobile (centered between name and intro) -->
+                        <div class="cv-photo">
+                            <img src="/static/images/profile/dni.jpeg" alt="{{.CV.Personal.Name}}" onerror="this.src='/static/images/profile/placeholder.svg'">
+                        </div>
+
                         <!-- Intro/Excerpt Text - No section heading, just the text -->
                         <div class="intro-text">{{.CV.Summary}}</div>
                     </div>
-                    <div class="cv-photo">
-                        <img src="/static/images/profile/dni.jpeg" alt="{{.CV.Personal.Name}}" onerror="this.src='/static/images/profile/placeholder.svg'">
-                    </div>
                 </div>
             </div>