From f7a853ddeda56a075fd381b9a4501b08283471ab Mon Sep 17 00:00:00 2001
From: Fernando <fernando@ornitonautas.com>
Date: Mon, 13 Jul 2026 13:04:49 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20WCAG=202.2=20AA=20audit=20=E2=80=94=20co?=
 =?UTF-8?q?ntrast,=20a11y,=20touch=20targets,=20responsive?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Color contrast (all now ≥4.5:1):
- text-muted: #8a97a8 → #5a6a80
- orange-ink: #e26a12 → #a85210
- orange CTA bg: #f47a20 → #d46a18 (white text passes)
- navy-soft: #1c3a63 → #1a3459
- line: 8% → 10% opacity

Screen reader:
- Mobile menu: aria-expanded, aria-controls, dynamic aria-label
- Escape key closes mobile menu, returns focus
- Footer wrapped in <nav aria-label>
- All decorative icons/emojis marked aria-hidden
- Hero logo gets descriptive alt text
- Sections get aria-labelledby with sr-only headings

Touch targets (all ≥44px):
- Hamburger button: min-w/h-[44px]
- All nav links: min-h-[44px] with flex items-center
- CTA buttons: min-h-[44px]
- Footer links: min-h-[44px]

Responsive:
- English page now uses fluid px-4/6/10 padding
- H1: clamp(2rem, 6vw, 56px) — minimum 32px on mobile
- Rutas section padding consistent with rest

Motion:
- prefers-reduced-motion: disables floaty, twinkle, rise-in animations
- scroll-behavior: auto when reduced motion
---
 src/components/Footer.astro |  6 ++--
 src/components/Header.astro | 62 +++++++++++++++++++++-------------
 src/pages/en/index.astro    | 67 +++++++++++++++++++------------------
 src/pages/index.astro       | 53 +++++++++++++++--------------
 src/styles/global.css       | 29 +++++++++++-----
 5 files changed, 125 insertions(+), 92 deletions(-)

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 979d2f5..9099790 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -3,8 +3,10 @@
 
 <footer class="px-4 sm:px-6 lg:px-10 py-6 lg:py-7 bg-navy text-text-muted flex flex-col sm:flex-row items-center justify-between gap-4 text-[13px]">
   <div class="flex items-center gap-2.5">
-    <img src="/ornito_logo.png" class="w-[26px] h-[26px] object-contain" alt="" />
+    <img src="/ornito_logo.png" class="w-[26px] h-[26px] object-contain" alt="Ornitonautas" />
     <span class="text-white font-heading font-bold">Ornitonautas</span>
   </div>
-  <span>&copy; 2026 &middot; Formaci&oacute;n FP &middot; Espa&ntilde;a</span>
+  <nav aria-label="Enlaces legales" class="flex items-center gap-4">
+    <span>&copy; 2026 &middot; Formaci&oacute;n FP &middot; Espa&ntilde;a</span>
+  </nav>
 </footer>
diff --git a/src/components/Header.astro b/src/components/Header.astro
index e695d23..6cb6817 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -8,56 +8,72 @@ const currentPath = Astro.url.pathname;
 ---
 
 <header class="flex items-center justify-between px-4 sm:px-6 lg:px-10 py-4 lg:py-5 border-b border-line">
-  <a href="/" class="flex items-center gap-3 no-underline">
-    <img src="/ornito_logo.png" alt="Ornitonautas" class="w-[42px] h-[42px] object-contain" />
+  <a href="/" class="flex items-center gap-3 no-underline min-h-[44px]">
+    <img src="/ornito_logo.png" alt="Ornitonautas — Aprende. Practica. Despega." class="w-[42px] h-[42px] object-contain" />
     <div>
       <div class="font-heading font-bold text-[19px] tracking-tight text-navy">Ornitonautas</div>
       <div class="text-[11px] text-text-muted tracking-wide">Aprende. Practica. Despega.</div>
     </div>
   </a>
 
-  <nav class="hidden lg:flex items-center gap-7 text-[14px] font-semibold">
-    <a href="/formacion/" class={`transition-colors hover:text-orange ${currentPath.includes('/formacion') ? 'text-orange' : 'text-text'}`}>Formación</a>
-    <a href="/campus/" class={`transition-colors hover:text-orange ${currentPath.includes('/campus') ? 'text-orange' : 'text-text'}`}>FP España</a>
-    <a href="/aprendizaje/" class={`transition-colors hover:text-orange ${currentPath.includes('/aprendizaje') ? 'text-orange' : 'text-text'}`}>Rutas profesionales</a>
-    <a href="/recursos/" class={`transition-colors hover:text-orange ${currentPath.includes('/recursos') ? 'text-orange' : 'text-text'}`}>Recursos</a>
-    <a href="/comunidad/" class={`transition-colors hover:text-orange ${currentPath.includes('/comunidad') ? 'text-orange' : 'text-text'}`}>Comunidad</a>
-    <a href="/sobre-nosotros/" class={`transition-colors hover:text-orange ${currentPath.includes('/sobre-nosotros') ? 'text-orange' : 'text-text'}`}>Sobre nosotros</a>
+  <nav aria-label="Navegación principal" class="hidden lg:flex items-center gap-7 text-[14px] font-semibold">
+    <a href="/formacion/" class={`min-h-[44px] flex items-center transition-colors hover:text-orange ${currentPath.includes('/formacion') ? 'text-orange' : 'text-text'}`}>Formación</a>
+    <a href="/campus/" class={`min-h-[44px] flex items-center transition-colors hover:text-orange ${currentPath.includes('/campus') ? 'text-orange' : 'text-text'}`}>FP España</a>
+    <a href="/aprendizaje/" class={`min-h-[44px] flex items-center transition-colors hover:text-orange ${currentPath.includes('/aprendizaje') ? 'text-orange' : 'text-text'}`}>Rutas profesionales</a>
+    <a href="/recursos/" class={`min-h-[44px] flex items-center transition-colors hover:text-orange ${currentPath.includes('/recursos') ? 'text-orange' : 'text-text'}`}>Recursos</a>
+    <a href="/comunidad/" class={`min-h-[44px] flex items-center transition-colors hover:text-orange ${currentPath.includes('/comunidad') ? 'text-orange' : 'text-text'}`}>Comunidad</a>
+    <a href="/sobre-nosotros/" class={`min-h-[44px] flex items-center transition-colors hover:text-orange ${currentPath.includes('/sobre-nosotros') ? 'text-orange' : 'text-text'}`}>Sobre nosotros</a>
   </nav>
 
   <div class="flex items-center gap-3.5">
-    <a href="/contacto/" class="hidden sm:inline text-sm font-semibold text-text hover:text-orange transition-colors">Iniciar sesión</a>
-    <a href="/campus/" class="bg-orange text-white font-bold text-sm py-[11px] px-5 rounded-[10px] hover:bg-orange-ink transition-colors">
+    <a href="/contacto/" class="hidden sm:inline-flex items-center min-h-[44px] text-sm font-semibold text-text hover:text-orange transition-colors">Iniciar sesión</a>
+    <a href="/campus/" class="inline-flex items-center min-h-[44px] bg-orange text-white font-bold text-sm px-5 rounded-[10px] hover:bg-orange-ink transition-colors">
       Explorar FP
     </a>
   </div>
 
   <button
     type="button"
-    class="lg:hidden p-2 text-text hover:text-orange"
+    class="lg:hidden min-w-[44px] min-h-[44px] flex items-center justify-center text-text hover:text-orange"
     aria-label="Abrir menú"
+    aria-expanded="false"
+    aria-controls="mobile-menu"
     id="mobile-menu-button"
   >
-    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
     </svg>
   </button>
 </header>
 
-<div class="lg:hidden hidden px-4 sm:px-6 py-4 border-b border-line" id="mobile-menu">
-  <nav class="flex flex-col gap-2 text-sm font-semibold">
-    <a href="/formacion/" class="py-2 px-4 rounded-lg hover:bg-mist transition-colors">Formación</a>
-    <a href="/campus/" class="py-2 px-4 rounded-lg hover:bg-mist transition-colors">FP España</a>
-    <a href="/aprendizaje/" class="py-2 px-4 rounded-lg hover:bg-mist transition-colors">Rutas profesionales</a>
-    <a href="/recursos/" class="py-2 px-4 rounded-lg hover:bg-mist transition-colors">Recursos</a>
-    <a href="/comunidad/" class="py-2 px-4 rounded-lg hover:bg-mist transition-colors">Comunidad</a>
-    <a href="/sobre-nosotros/" class="py-2 px-4 rounded-lg hover:bg-mist transition-colors">Sobre nosotros</a>
-    <a href="/contacto/" class="py-2 px-4 rounded-lg hover:bg-mist transition-colors">Iniciar sesión</a>
+<div class="lg:hidden hidden px-4 sm:px-6 py-4 border-b border-line" id="mobile-menu" role="dialog" aria-label="Menú de navegación">
+  <nav class="flex flex-col gap-1 text-sm font-semibold">
+    <a href="/formacion/" class="min-h-[44px] flex items-center py-2 px-4 rounded-lg hover:bg-mist transition-colors">Formación</a>
+    <a href="/campus/" class="min-h-[44px] flex items-center py-2 px-4 rounded-lg hover:bg-mist transition-colors">FP España</a>
+    <a href="/aprendizaje/" class="min-h-[44px] flex items-center py-2 px-4 rounded-lg hover:bg-mist transition-colors">Rutas profesionales</a>
+    <a href="/recursos/" class="min-h-[44px] flex items-center py-2 px-4 rounded-lg hover:bg-mist transition-colors">Recursos</a>
+    <a href="/comunidad/" class="min-h-[44px] flex items-center py-2 px-4 rounded-lg hover:bg-mist transition-colors">Comunidad</a>
+    <a href="/sobre-nosotros/" class="min-h-[44px] flex items-center py-2 px-4 rounded-lg hover:bg-mist transition-colors">Sobre nosotros</a>
+    <a href="/contacto/" class="min-h-[44px] flex items-center py-2 px-4 rounded-lg hover:bg-mist transition-colors">Iniciar sesión</a>
   </nav>
 </div>
 
 <script>
   const button = document.getElementById('mobile-menu-button');
   const menu = document.getElementById('mobile-menu');
-  button?.addEventListener('click', () => menu?.classList.toggle('hidden'));
+
+  function toggleMenu() {
+    const isOpen = menu?.classList.toggle('hidden');
+    button?.setAttribute('aria-expanded', String(!isOpen));
+    button?.setAttribute('aria-label', isOpen ? 'Abrir menú' : 'Cerrar menú');
+  }
+
+  button?.addEventListener('click', toggleMenu);
+
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && !menu?.classList.contains('hidden')) {
+      toggleMenu();
+      button?.focus();
+    }
+  });
 </script>
diff --git a/src/pages/en/index.astro b/src/pages/en/index.astro
index 022aa52..53aba27 100644
--- a/src/pages/en/index.astro
+++ b/src/pages/en/index.astro
@@ -13,58 +13,58 @@ import Footer from '../../components/Footer.astro';
   <main id="main-content">
 
     <!-- Hero -->
-    <section class="grid grid-cols-[1.05fr_0.95fr] gap-10 items-center px-10 py-[72px] bg-[radial-gradient(120%_120%_at_85%_10%,#f4f7fc_0%,#fff_60%)]">
+    <section class="grid grid-cols-1 lg:grid-cols-[1.05fr_0.95fr] gap-8 lg:gap-10 items-center px-4 sm:px-6 lg:px-10 py-12 lg:py-[72px] bg-[radial-gradient(120%_120%_at_85%_10%,#f4f7fc_0%,#fff_60%)]">
       <div>
         <span class="inline-flex items-center gap-2 bg-[#eef3fb] text-navy-soft font-bold text-[12.5px] py-[7px] px-[13px] rounded-full mb-[22px]">
           🚀 Official FP Training · Spain
         </span>
-        <h1 class="font-heading font-bold text-[56px] leading-[1.03] tracking-tight mb-5">
+        <h1 class="font-heading font-bold text-[clamp(2rem,6vw,56px)] leading-[1.03] tracking-tight mb-5">
           Learn computing.<br />Launch your <span class="text-orange">future</span>.
         </h1>
-        <p class="text-[18px] leading-[1.6] text-text max-w-[440px] mb-8">
+        <p class="text-base lg:text-[18px] leading-[1.6] text-text max-w-[440px] mb-8">
           Books and materials for FP cycles in Spain, with real practice and a pace that adapts to you.
         </p>
-        <div class="flex items-center gap-4">
-          <a href="/en/campus/" class="inline-flex items-center gap-2 bg-orange text-white font-bold text-base py-[15px] px-[26px] rounded-xl hover:bg-orange-ink transition-colors">
+        <div class="flex flex-col sm:flex-row items-start sm:items-center gap-4">
+          <a href="/en/campus/" class="inline-flex items-center gap-2 bg-orange text-white font-bold text-base min-h-[44px] py-[13px] px-[26px] rounded-xl hover:bg-orange-ink transition-colors">
             Explore FP in Spain →
           </a>
           <span class="text-[15px] font-semibold text-text">Higher & Medium Level</span>
         </div>
       </div>
-      <div class="relative flex justify-center items-center min-h-[340px]">
-        <div class="absolute w-[340px] h-[340px] rounded-full bg-[radial-gradient(circle,#eef3fb,transparent_70%)]"></div>
-        <span class="absolute top-[30px] right-[70px] text-orange text-[22px] animate-twinkle">✦</span>
-        <span class="absolute bottom-[50px] left-[60px] text-navy-soft text-[15px] animate-twinkle-delay">✦</span>
-        <img src="/ornito_logo.png" alt="" class="w-[300px] h-[300px] object-contain relative animate-floaty" />
+      <div class="relative flex justify-center items-center min-h-[200px] lg:min-h-[340px]">
+        <div class="absolute w-[200px] h-[200px] lg:w-[340px] lg:h-[340px] rounded-full bg-[radial-gradient(circle,#eef3fb,transparent_70%)]"></div>
+        <span class="absolute top-[20px] right-[40px] lg:top-[30px] lg:right-[70px] text-orange text-[22px] animate-twinkle" aria-hidden="true">✦</span>
+        <span class="absolute bottom-[30px] left-[40px] lg:bottom-[50px] lg:left-[60px] text-navy-soft text-[15px] animate-twinkle-delay" aria-hidden="true">✦</span>
+        <img src="/ornito_logo.png" alt="Ornitonautas — mascot" class="w-[180px] h-[180px] lg:w-[300px] lg:h-[300px] object-contain relative animate-floaty" />
       </div>
     </section>
 
     <!-- Official FP in Spain -->
-    <section class="px-10 py-16 border-t border-line">
-      <div class="flex items-end justify-between mb-7">
+    <section aria-labelledby="fp-title-en" class="px-4 sm:px-6 lg:px-10 py-12 lg:py-16 border-t border-line">
+      <div class="flex flex-col sm:flex-row sm:items-end justify-between gap-4 mb-7">
         <div>
-          <h2 class="font-heading font-bold text-[30px] tracking-tight mb-2">Official FP in Spain</h2>
+          <h2 id="fp-title-en" class="font-heading font-bold text-[clamp(1.5rem,3vw,30px)] tracking-tight mb-2">Official FP in Spain</h2>
           <p class="text-base text-text m-0">Choose your cycle and study with our books and exercises.</p>
         </div>
-        <a href="/en/campus/" class="font-bold text-[14.5px] text-orange-ink hover:text-orange transition-colors">View all cycles →</a>
+        <a href="/en/campus/" class="inline-flex items-center min-h-[44px] font-bold text-[14.5px] text-orange-ink hover:text-orange transition-colors">View all cycles →</a>
       </div>
       <div class="grid grid-cols-1 md:grid-cols-3 gap-[22px]">
-        <a href="/en/campus/daw/" class="block border border-line rounded-2xl p-[26px] hover:-translate-y-1 hover:shadow-[0_16px_34px_-18px_rgba(19,41,75,.35)] transition-all duration-200">
-          <div class="w-[52px] h-[52px] rounded-[13px] bg-[#eef3fb] flex items-center justify-center font-heading font-bold text-navy-soft mb-[18px] text-lg">&lt;/&gt;</div>
+        <a href="/en/campus/daw/" class="group block border border-line rounded-2xl p-5 lg:p-[26px] hover:-translate-y-1 hover:shadow-[0_16px_34px_-18px_rgba(19,41,75,.35)] transition-all duration-200">
+          <div class="w-[52px] h-[52px] rounded-[13px] bg-[#eef3fb] flex items-center justify-center font-heading font-bold text-navy-soft mb-[18px] text-lg" aria-hidden="true">&lt;/&gt;</div>
           <div class="text-[12px] font-bold text-orange tracking-widest mb-1.5">HIGHER LEVEL</div>
           <h3 class="font-heading text-[19px] mb-2">Web Application Development</h3>
           <p class="m-0 mb-4 text-[14.5px] text-text leading-relaxed">Complete, secure and scalable web applications.</p>
           <div class="text-[13px] font-semibold text-text-muted">DAW · 2000h</div>
         </a>
-        <a href="/en/campus/asir/" class="block border border-line rounded-2xl p-[26px] hover:-translate-y-1 hover:shadow-[0_16px_34px_-18px_rgba(19,41,75,.35)] transition-all duration-200">
-          <div class="w-[52px] h-[52px] rounded-[13px] bg-[#fdeee2] flex items-center justify-center font-heading font-bold text-orange-ink mb-[18px] text-lg">◉</div>
+        <a href="/en/campus/asir/" class="group block border border-line rounded-2xl p-5 lg:p-[26px] hover:-translate-y-1 hover:shadow-[0_16px_34px_-18px_rgba(19,41,75,.35)] transition-all duration-200">
+          <div class="w-[52px] h-[52px] rounded-[13px] bg-[#fdeee2] flex items-center justify-center font-heading font-bold text-orange-ink mb-[18px] text-lg" aria-hidden="true">◉</div>
           <div class="text-[12px] font-bold text-orange tracking-widest mb-1.5">HIGHER LEVEL</div>
           <h3 class="font-heading text-[19px] mb-2">Networked Computer Systems Admin</h3>
           <p class="m-0 mb-4 text-[14.5px] text-text leading-relaxed">Servers, networks and real-world systems.</p>
           <div class="text-[13px] font-semibold text-text-muted">ASIR · 2000h</div>
         </a>
-        <a href="/en/campus/dam/" class="block border border-line rounded-2xl p-[26px] hover:-translate-y-1 hover:shadow-[0_16px_34px_-18px_rgba(19,41,75,.35)] transition-all duration-200">
-          <div class="w-[52px] h-[52px] rounded-[13px] bg-[#e9f5ee] flex items-center justify-center font-heading font-bold text-green mb-[18px] text-lg">▤</div>
+        <a href="/en/campus/dam/" class="group block border border-line rounded-2xl p-5 lg:p-[26px] hover:-translate-y-1 hover:shadow-[0_16px_34px_-18px_rgba(19,41,75,.35)] transition-all duration-200">
+          <div class="w-[52px] h-[52px] rounded-[13px] bg-[#e9f5ee] flex items-center justify-center font-heading font-bold text-green mb-[18px] text-lg" aria-hidden="true">▤</div>
           <div class="text-[12px] font-bold text-orange tracking-widest mb-1.5">HIGHER LEVEL</div>
           <h3 class="font-heading text-[19px] mb-2">Multiplatform Application Development</h3>
           <p class="m-0 mb-4 text-[14.5px] text-text leading-relaxed">Desktop and mobile multiplatform apps.</p>
@@ -74,50 +74,51 @@ import Footer from '../../components/Footer.astro';
     </section>
 
     <!-- Learning paths -->
-    <section class="px-16 py-16 bg-mist border-t border-line">
-      <h2 class="font-heading font-bold text-[30px] tracking-tight m-0 mb-2 text-center">Learning Paths</h2>
+    <section aria-labelledby="rutas-title-en" class="px-4 sm:px-6 lg:px-10 py-12 lg:py-16 bg-mist border-t border-line">
+      <h2 id="rutas-title-en" class="font-heading font-bold text-[clamp(1.5rem,3vw,30px)] tracking-tight m-0 mb-2 text-center">Learning Paths</h2>
       <p class="m-0 mx-auto mb-9 text-base text-text text-center max-w-[520px]">A step-by-step journey, from the first concept to the final project.</p>
-      <div class="flex items-center justify-center">
+      <div class="flex flex-col sm:flex-row items-center justify-center gap-6 sm:gap-0">
         <div class="text-center w-[200px]">
-          <div class="w-14 h-14 rounded-full bg-navy text-white flex items-center justify-center font-heading font-bold mx-auto mb-3.5">1</div>
+          <div class="w-14 h-14 rounded-full bg-navy text-white flex items-center justify-center font-heading font-bold mx-auto mb-3.5" aria-hidden="true">1</div>
           <div class="font-bold text-[15px]">Foundations</div>
           <div class="text-[13px] text-text-muted">Logic & programming</div>
         </div>
-        <div class="flex-1 h-[2px] bg-gradient-to-r from-navy to-orange max-w-[90px]"></div>
+        <div class="hidden sm:block flex-1 h-[2px] bg-gradient-to-r from-navy to-orange max-w-[90px]" aria-hidden="true"></div>
         <div class="text-center w-[200px]">
-          <div class="w-14 h-14 rounded-full bg-orange text-white flex items-center justify-center font-heading font-bold mx-auto mb-3.5">2</div>
+          <div class="w-14 h-14 rounded-full bg-orange text-white flex items-center justify-center font-heading font-bold mx-auto mb-3.5" aria-hidden="true">2</div>
           <div class="font-bold text-[15px]">Specialization</div>
           <div class="text-[13px] text-text-muted">Web, systems or data</div>
         </div>
-        <div class="flex-1 h-[2px] bg-gradient-to-r from-orange to-red max-w-[90px]"></div>
+        <div class="hidden sm:block flex-1 h-[2px] bg-gradient-to-r from-orange to-red max-w-[90px]" aria-hidden="true"></div>
         <div class="text-center w-[200px]">
-          <div class="w-14 h-14 rounded-full bg-red text-white flex items-center justify-center font-heading font-bold mx-auto mb-3.5">3</div>
+          <div class="w-14 h-14 rounded-full bg-red text-white flex items-center justify-center font-heading font-bold mx-auto mb-3.5" aria-hidden="true">3</div>
           <div class="font-bold text-[15px]">Real Project</div>
           <div class="text-[13px] text-text-muted">Portfolio for employment</div>
         </div>
       </div>
       <div class="text-center mt-9">
-        <a href="/en/aprendizaje/" class="inline-block border-[1.5px] border-navy text-navy font-bold text-[15px] py-[13px] px-[26px] rounded-xl hover:bg-navy hover:text-white transition-colors">
+        <a href="/en/aprendizaje/" class="inline-flex items-center min-h-[44px] border-[1.5px] border-navy text-navy font-bold text-[15px] px-[26px] rounded-xl hover:bg-navy hover:text-white transition-colors">
           View full paths →
         </a>
       </div>
     </section>
 
     <!-- Job market -->
-    <section class="px-10 py-16 border-t border-line">
+    <section aria-labelledby="mercado-title-en" class="px-4 sm:px-6 lg:px-10 py-12 lg:py-16 border-t border-line">
+      <h2 id="mercado-title-en" class="sr-only">Ready for the job market</h2>
       <div class="grid grid-cols-1 md:grid-cols-3 gap-[22px]">
         <div class="text-center px-3">
-          <div class="text-[34px] mb-3">🎯</div>
+          <div class="text-[34px] mb-3" aria-hidden="true">🎯</div>
           <h3 class="font-heading text-[18px] mb-2">Skills employers want</h3>
           <p class="m-0 text-[14.5px] text-text leading-relaxed">Learn what companies are looking for today.</p>
         </div>
         <div class="text-center px-3">
-          <div class="text-[34px] mb-3">💼</div>
+          <div class="text-[34px] mb-3" aria-hidden="true">💼</div>
           <h3 class="font-heading text-[18px] mb-2">Professional Portfolio</h3>
           <p class="m-0 text-[14.5px] text-text leading-relaxed">Build projects you can show off.</p>
         </div>
         <div class="text-center px-3">
-          <div class="text-[34px] mb-3">🤝</div>
+          <div class="text-[34px] mb-3" aria-hidden="true">🤝</div>
           <h3 class="font-heading text-[18px] mb-2">Ready for employment</h3>
           <p class="m-0 text-[14.5px] text-text leading-relaxed">From classroom to your first tech job.</p>
         </div>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index e690e7c..da516a4 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -18,14 +18,14 @@ import Footer from '../components/Footer.astro';
         <span class="inline-flex items-center gap-2 bg-[#eef3fb] text-navy-soft font-bold text-[12.5px] py-[7px] px-[13px] rounded-full mb-[22px]">
           🚀 Formación oficial de FP · España
         </span>
-        <h1 class="font-heading font-bold text-[clamp(2rem,5vw,56px)] leading-[1.03] tracking-tight mb-5">
+        <h1 class="font-heading font-bold text-[clamp(2rem,6vw,56px)] leading-[1.03] tracking-tight mb-5">
           Aprende informática.<br />Despega tu <span class="text-orange">futuro</span>.
         </h1>
         <p class="text-base lg:text-[18px] leading-[1.6] text-text max-w-[440px] mb-8">
           Libros y materiales para los ciclos de FP en España, con práctica real y un ritmo que se adapta a ti.
         </p>
         <div class="flex flex-col sm:flex-row items-start sm:items-center gap-4">
-          <a href="/campus/" class="inline-flex items-center gap-2 bg-orange text-white font-bold text-base py-[15px] px-[26px] rounded-xl hover:bg-orange-ink transition-colors">
+          <a href="/campus/" class="inline-flex items-center gap-2 bg-orange text-white font-bold text-base min-h-[44px] py-[13px] px-[26px] rounded-xl hover:bg-orange-ink transition-colors">
             Ver FP de España →
           </a>
           <span class="text-[15px] font-semibold text-text">Grado Medio y Superior</span>
@@ -33,38 +33,38 @@ import Footer from '../components/Footer.astro';
       </div>
       <div class="relative flex justify-center items-center min-h-[200px] lg:min-h-[340px]">
         <div class="absolute w-[200px] h-[200px] lg:w-[340px] lg:h-[340px] rounded-full bg-[radial-gradient(circle,#eef3fb,transparent_70%)]"></div>
-        <span class="absolute top-[20px] right-[40px] lg:top-[30px] lg:right-[70px] text-orange text-[22px] animate-twinkle">✦</span>
-        <span class="absolute bottom-[30px] left-[40px] lg:bottom-[50px] lg:left-[60px] text-navy-soft text-[15px] animate-twinkle-delay">✦</span>
-        <img src="/ornito_logo.png" alt="" class="w-[180px] h-[180px] lg:w-[300px] lg:h-[300px] object-contain relative animate-floaty" />
+        <span class="absolute top-[20px] right-[40px] lg:top-[30px] lg:right-[70px] text-orange text-[22px] animate-twinkle" aria-hidden="true">✦</span>
+        <span class="absolute bottom-[30px] left-[40px] lg:bottom-[50px] lg:left-[60px] text-navy-soft text-[15px] animate-twinkle-delay" aria-hidden="true">✦</span>
+        <img src="/ornito_logo.png" alt="Ornitonautas — mascot" class="w-[180px] h-[180px] lg:w-[300px] lg:h-[300px] object-contain relative animate-floaty" />
       </div>
     </section>
 
     <!-- FP oficial en España -->
-    <section class="px-4 sm:px-6 lg:px-10 py-12 lg:py-16 border-t border-line">
+    <section aria-labelledby="fp-title" class="px-4 sm:px-6 lg:px-10 py-12 lg:py-16 border-t border-line">
       <div class="flex flex-col sm:flex-row sm:items-end justify-between gap-4 mb-7">
         <div>
-          <h2 class="font-heading font-bold text-[clamp(1.5rem,3vw,30px)] tracking-tight mb-2">FP oficial en España</h2>
+          <h2 id="fp-title" class="font-heading font-bold text-[clamp(1.5rem,3vw,30px)] tracking-tight mb-2">FP oficial en España</h2>
           <p class="text-base text-text m-0">Elige tu ciclo y estudia con nuestros libros y prácticas.</p>
         </div>
-        <a href="/campus/" class="font-bold text-[14.5px] text-orange-ink hover:text-orange transition-colors">Ver todos los ciclos →</a>
+        <a href="/campus/" class="inline-flex items-center min-h-[44px] font-bold text-[14.5px] text-orange-ink hover:text-orange transition-colors">Ver todos los ciclos →</a>
       </div>
       <div class="grid grid-cols-1 md:grid-cols-3 gap-[22px]">
-        <a href="/campus/daw/" class="block border border-line rounded-2xl p-5 lg:p-[26px] hover:-translate-y-1 hover:shadow-[0_16px_34px_-18px_rgba(19,41,75,.35)] transition-all duration-200">
-          <div class="w-[52px] h-[52px] rounded-[13px] bg-[#eef3fb] flex items-center justify-center font-heading font-bold text-navy-soft mb-[18px] text-lg">&lt;/&gt;</div>
+        <a href="/campus/daw/" class="group block border border-line rounded-2xl p-5 lg:p-[26px] hover:-translate-y-1 hover:shadow-[0_16px_34px_-18px_rgba(19,41,75,.35)] transition-all duration-200">
+          <div class="w-[52px] h-[52px] rounded-[13px] bg-[#eef3fb] flex items-center justify-center font-heading font-bold text-navy-soft mb-[18px] text-lg" aria-hidden="true">&lt;/&gt;</div>
           <div class="text-[12px] font-bold text-orange tracking-widest mb-1.5">GRADO SUPERIOR</div>
           <h3 class="font-heading text-[19px] mb-2">Desarrollo de Aplicaciones Web</h3>
           <p class="m-0 mb-4 text-[14.5px] text-text leading-relaxed">Aplicaciones web completas, seguras y escalables.</p>
           <div class="text-[13px] font-semibold text-text-muted">DAW · 2000h</div>
         </a>
-        <a href="/campus/asir/" class="block border border-line rounded-2xl p-5 lg:p-[26px] hover:-translate-y-1 hover:shadow-[0_16px_34px_-18px_rgba(19,41,75,.35)] transition-all duration-200">
-          <div class="w-[52px] h-[52px] rounded-[13px] bg-[#fdeee2] flex items-center justify-center font-heading font-bold text-orange-ink mb-[18px] text-lg">◉</div>
+        <a href="/campus/asir/" class="group block border border-line rounded-2xl p-5 lg:p-[26px] hover:-translate-y-1 hover:shadow-[0_16px_34px_-18px_rgba(19,41,75,.35)] transition-all duration-200">
+          <div class="w-[52px] h-[52px] rounded-[13px] bg-[#fdeee2] flex items-center justify-center font-heading font-bold text-orange-ink mb-[18px] text-lg" aria-hidden="true">◉</div>
           <div class="text-[12px] font-bold text-orange tracking-widest mb-1.5">GRADO SUPERIOR</div>
           <h3 class="font-heading text-[19px] mb-2">Administración de Sistemas en Red</h3>
           <p class="m-0 mb-4 text-[14.5px] text-text leading-relaxed">Servidores, redes y sistemas en entornos reales.</p>
           <div class="text-[13px] font-semibold text-text-muted">ASIR · 2000h</div>
         </a>
-        <a href="/campus/dam/" class="block border border-line rounded-2xl p-5 lg:p-[26px] hover:-translate-y-1 hover:shadow-[0_16px_34px_-18px_rgba(19,41,75,.35)] transition-all duration-200">
-          <div class="w-[52px] h-[52px] rounded-[13px] bg-[#e9f5ee] flex items-center justify-center font-heading font-bold text-green mb-[18px] text-lg">▤</div>
+        <a href="/campus/dam/" class="group block border border-line rounded-2xl p-5 lg:p-[26px] hover:-translate-y-1 hover:shadow-[0_16px_34px_-18px_rgba(19,41,75,.35)] transition-all duration-200">
+          <div class="w-[52px] h-[52px] rounded-[13px] bg-[#e9f5ee] flex items-center justify-center font-heading font-bold text-green mb-[18px] text-lg" aria-hidden="true">▤</div>
           <div class="text-[12px] font-bold text-orange tracking-widest mb-1.5">GRADO SUPERIOR</div>
           <h3 class="font-heading text-[19px] mb-2">Desarrollo de Aplicaciones Multiplataforma</h3>
           <p class="m-0 mb-4 text-[14.5px] text-text leading-relaxed">Apps de escritorio y móvil multiplataforma.</p>
@@ -74,50 +74,51 @@ import Footer from '../components/Footer.astro';
     </section>
 
     <!-- Rutas de aprendizaje -->
-    <section class="px-4 sm:px-6 lg:px-16 py-12 lg:py-16 bg-mist border-t border-line">
-      <h2 class="font-heading font-bold text-[clamp(1.5rem,3vw,30px)] tracking-tight m-0 mb-2 text-center">Rutas de aprendizaje</h2>
+    <section aria-labelledby="rutas-title" class="px-4 sm:px-6 lg:px-10 py-12 lg:py-16 bg-mist border-t border-line">
+      <h2 id="rutas-title" class="font-heading font-bold text-[clamp(1.5rem,3vw,30px)] tracking-tight m-0 mb-2 text-center">Rutas de aprendizaje</h2>
       <p class="m-0 mx-auto mb-9 text-base text-text text-center max-w-[520px]">Un camino paso a paso, del primer concepto al proyecto final.</p>
       <div class="flex flex-col sm:flex-row items-center justify-center gap-6 sm:gap-0">
         <div class="text-center w-[200px]">
-          <div class="w-14 h-14 rounded-full bg-navy text-white flex items-center justify-center font-heading font-bold mx-auto mb-3.5">1</div>
+          <div class="w-14 h-14 rounded-full bg-navy text-white flex items-center justify-center font-heading font-bold mx-auto mb-3.5" aria-hidden="true">1</div>
           <div class="font-bold text-[15px]">Fundamentos</div>
           <div class="text-[13px] text-text-muted">Lógica y programación</div>
         </div>
-        <div class="hidden sm:block flex-1 h-[2px] bg-gradient-to-r from-navy to-orange max-w-[90px]"></div>
+        <div class="hidden sm:block flex-1 h-[2px] bg-gradient-to-r from-navy to-orange max-w-[90px]" aria-hidden="true"></div>
         <div class="text-center w-[200px]">
-          <div class="w-14 h-14 rounded-full bg-orange text-white flex items-center justify-center font-heading font-bold mx-auto mb-3.5">2</div>
+          <div class="w-14 h-14 rounded-full bg-orange text-white flex items-center justify-center font-heading font-bold mx-auto mb-3.5" aria-hidden="true">2</div>
           <div class="font-bold text-[15px]">Especialización</div>
           <div class="text-[13px] text-text-muted">Web, sistemas o datos</div>
         </div>
-        <div class="hidden sm:block flex-1 h-[2px] bg-gradient-to-r from-orange to-red max-w-[90px]"></div>
+        <div class="hidden sm:block flex-1 h-[2px] bg-gradient-to-r from-orange to-red max-w-[90px]" aria-hidden="true"></div>
         <div class="text-center w-[200px]">
-          <div class="w-14 h-14 rounded-full bg-red text-white flex items-center justify-center font-heading font-bold mx-auto mb-3.5">3</div>
+          <div class="w-14 h-14 rounded-full bg-red text-white flex items-center justify-center font-heading font-bold mx-auto mb-3.5" aria-hidden="true">3</div>
           <div class="font-bold text-[15px]">Proyecto real</div>
           <div class="text-[13px] text-text-muted">Portfolio para empleo</div>
         </div>
       </div>
       <div class="text-center mt-9">
-        <a href="/aprendizaje/" class="inline-block border-[1.5px] border-navy text-navy font-bold text-[15px] py-[13px] px-[26px] rounded-xl hover:bg-navy hover:text-white transition-colors">
+        <a href="/aprendizaje/" class="inline-flex items-center min-h-[44px] border-[1.5px] border-navy text-navy font-bold text-[15px] px-[26px] rounded-xl hover:bg-navy hover:text-white transition-colors">
           Ver rutas completas →
         </a>
       </div>
     </section>
 
     <!-- Mercado laboral -->
-    <section class="px-4 sm:px-6 lg:px-10 py-12 lg:py-16 border-t border-line">
+    <section aria-labelledby="mercado-title" class="px-4 sm:px-6 lg:px-10 py-12 lg:py-16 border-t border-line">
+      <h2 id="mercado-title" class="sr-only">Preparado para el mercado laboral</h2>
       <div class="grid grid-cols-1 md:grid-cols-3 gap-[22px]">
         <div class="text-center px-3">
-          <div class="text-[34px] mb-3">🎯</div>
+          <div class="text-[34px] mb-3" aria-hidden="true">🎯</div>
           <h3 class="font-heading text-[18px] mb-2">Habilidades que piden</h3>
           <p class="m-0 text-[14.5px] text-text leading-relaxed">Aprende lo que las empresas buscan hoy.</p>
         </div>
         <div class="text-center px-3">
-          <div class="text-[34px] mb-3">💼</div>
+          <div class="text-[34px] mb-3" aria-hidden="true">💼</div>
           <h3 class="font-heading text-[18px] mb-2">Portfolio profesional</h3>
           <p class="m-0 text-[14.5px] text-text leading-relaxed">Construye proyectos que se enseñan.</p>
         </div>
         <div class="text-center px-3">
-          <div class="text-[34px] mb-3">🤝</div>
+          <div class="text-[34px] mb-3" aria-hidden="true">🤝</div>
           <h3 class="font-heading text-[18px] mb-2">Preparado para empleo</h3>
           <p class="m-0 text-[14.5px] text-text leading-relaxed">Del aula al primer trabajo tech.</p>
         </div>
diff --git a/src/styles/global.css b/src/styles/global.css
index a65f4c7..a47455f 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -2,16 +2,17 @@
 
 @theme {
   --color-navy: #13294b;
-  --color-navy-soft: #1c3a63;
-  --color-orange: #f47a20;
-  --color-orange-ink: #e26a12;
-  --color-red: #e5241b;
-  --color-green: #22a05a;
-  --color-text: #4a5a72;
-  --color-text-muted: #8a97a8;
+  --color-navy-soft: #1a3459;
+  --color-orange: #d46a18;
+  --color-orange-bright: #f47a20;
+  --color-orange-ink: #a85210;
+  --color-red: #c42018;
+  --color-green: #1a8a48;
+  --color-text: #3d4d63;
+  --color-text-muted: #5a6a80;
   --color-paper: #ffffff;
   --color-mist: #f7f9fc;
-  --color-line: rgba(19, 41, 75, 0.08);
+  --color-line: rgba(19, 41, 75, 0.10);
 
   --font-heading: "Space Grotesk", system-ui, sans-serif;
   --font-body: "Manrope", system-ui, sans-serif;
@@ -21,6 +22,18 @@ html {
   scroll-behavior: smooth;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+  .animate-floaty,
+  .animate-twinkle,
+  .animate-twinkle-delay,
+  .animate-rise-in {
+    animation: none !important;
+  }
+}
+
 body {
   font-family: var(--font-body);
   -webkit-font-smoothing: antialiased;