fix: responsive layout - use fluid padding and stack on mobile

- Header, sections, footer use px-4/6/10 responsive padding
- Hero grid stacks on mobile (grid-cols-1 → lg:grid-cols-2)
- Rutas flex wraps on mobile
- Footer stacks on mobile
- Fluid typography with clamp()

.codegraph/.gitignore

@@ -0,0 +1,5 @@
+# CodeGraph data files — local to each machine, not for committing.
+# Ignore everything in .codegraph/ except this file itself, so transient
+# files (the database, daemon.pid, sockets, logs) never show up in git.
+*
+!.gitignore

src/components/Footer.astro

@@ -1,7 +1,7 @@
 ---
 ---
 
-<footer class="px-10 py-7 bg-navy text-text-muted flex items-center justify-between text-[13px]">
+<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="" />
     <span class="text-white font-heading font-bold">Ornitonautas</span>

src/components/Header.astro

@@ -7,7 +7,7 @@ const { lang } = Astro.props;
 const currentPath = Astro.url.pathname;
 ---
 
-<header class="flex items-center justify-between px-10 py-5 border-b border-line">
+<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" />
     <div>
@@ -44,7 +44,7 @@ const currentPath = Astro.url.pathname;
   </button>
 </header>
 
-<div class="lg:hidden hidden px-10 py-4 border-b border-line" id="mobile-menu">
+<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>

src/pages/index.astro

@@ -13,60 +13,57 @@ 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]">
           🚀 Formación oficial de FP · España
         </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,5vw,56px)] leading-[1.03] tracking-tight mb-5">
           Aprende informática.<br />Despega tu <span class="text-orange">futuro</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">
           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 items-center gap-4">
+        <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">
             Ver FP de España →
           </a>
           <span class="text-[15px] font-semibold text-text">Grado Medio y Superior</span>
         </div>
       </div>
-      <div class="relative flex justify-center items-center min-h-[340px]">
+      <div class="relative flex justify-center items-center min-h-[200px] lg:min-h-[340px]">
-        <div class="absolute w-[340px] h-[340px] rounded-full bg-[radial-gradient(circle,#eef3fb,transparent_70%)]"></div>
+        <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-[30px] right-[70px] text-orange text-[22px] animate-twinkle">✦</span>
+        <span class="absolute top-[20px] right-[40px] lg:top-[30px] lg: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>
+        <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-[300px] h-[300px] object-contain relative animate-floaty" />
+        <img src="/ornito_logo.png" alt="" 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-10 py-16 border-t border-line">
+    <section class="px-4 sm:px-6 lg:px-10 py-12 lg:py-16 border-t border-line">
-      <div class="flex items-end justify-between mb-7">
+      <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">FP oficial en España</h2>
+          <h2 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>
       </div>
       <div class="grid grid-cols-1 md:grid-cols-3 gap-[22px]">
-        <!-- DAW -->
+        <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">
-        <a href="/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>
           <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>
-        <!-- ASIR -->
+        <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">
-        <a href="/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>
           <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>
-        <!-- DAM -->
+        <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">
-        <a href="/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>
           <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>
@@ -77,22 +74,22 @@ import Footer from '../components/Footer.astro';
     </section>
 
     <!-- Rutas de aprendizaje -->
-    <section class="px-16 py-16 bg-mist border-t border-line">
+    <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-[30px] tracking-tight m-0 mb-2 text-center">Rutas de aprendizaje</h2>
+      <h2 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 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="font-bold text-[15px]">Fundamentos</div>
           <div class="text-[13px] text-text-muted">Lógica y programación</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]"></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="font-bold text-[15px]">Especialización</div>
           <div class="text-[13px] text-text-muted">Web, sistemas o datos</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]"></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="font-bold text-[15px]">Proyecto real</div>
@@ -107,7 +104,7 @@ import Footer from '../components/Footer.astro';
     </section>
 
     <!-- Mercado laboral -->
-    <section class="px-10 py-16 border-t border-line">
+    <section class="px-4 sm:px-6 lg:px-10 py-12 lg:py-16 border-t border-line">
       <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>