feat(ui): paleta profesional + iconos SVG inline (sin emojis)

- Reemplaza emojis por iconos SVG estilo Lucide en cards landing y descargas
- Paleta refinada: slate grays + navy + accent amber-700 (B45309)
- Hero con grid pattern sutil y gradients radiales
- Cards con sombras suaves y borders, hover lift
- Header sticky con backdrop-filter
- Tipografía Inter con tracking ajustado
- Botones con flechas SVG inline

app/templates/index.html

@@ -7,24 +7,49 @@
 
 <section class="hero">
   <div class="hero-inner">
-    <p class="eyebrow">FACTORIT · FIT</p>
+    <p class="eyebrow">FactorIT · FIT</p>
     <h1>Bootcamp Agentic AI con watsonx Orchestrate</h1>
-    <p class="subtitle">Construye tu primer agente de IA en 4 horas.</p>
-    <a class="btn btn-primary" href="#descargas">Acceder al material →</a>
+    <p class="subtitle">Diseña, construye y despliega tu primer agente de IA empresarial en cuatro horas.</p>
+    <a class="btn btn-primary btn-large" href="#descargas">
+      Acceder al material
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
+    </a>
   </div>
 </section>
 
 <section class="cards-section">
-  <h2 class="section-title">¿Qué vas a construir?</h2>
-  <div class="cards">
-    <article class="card"><div class="icon">⚙️</div><h3>Tu primer agente</h3><p>Conecta una API real a un agente conversacional sin escribir código.</p></article>
-    <article class="card"><div class="icon">📚</div><h3>Multi-agente con RAG</h3><p>Compón agentes especializados con base de conocimiento documental.</p></article>
-    <article class="card"><div class="icon">📊</div><h3>Reportes y APIs</h3><p>Genera reportes ejecutivos invocando endpoints en vivo.</p></article>
+  <div class="cards-inner">
+    <h2 class="section-title">¿Qué vas a construir?</h2>
+    <p class="section-subtitle">Tres bloques prácticos para dominar el ciclo completo de desarrollo de agentes empresariales.</p>
+    <div class="cards">
+      <article class="card">
+        <div class="icon-wrap">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><line x1="9" y1="2" x2="9" y2="4"/><line x1="15" y1="2" x2="15" y2="4"/><line x1="9" y1="20" x2="9" y2="22"/><line x1="15" y1="20" x2="15" y2="22"/><line x1="20" y1="9" x2="22" y2="9"/><line x1="20" y1="14" x2="22" y2="14"/><line x1="2" y1="9" x2="4" y2="9"/><line x1="2" y1="14" x2="4" y2="14"/></svg>
+        </div>
+        <h3>Tu primer agente</h3>
+        <p>Conecta una API REST a un agente conversacional sin escribir una línea de código.</p>
+      </article>
+      <article class="card">
+        <div class="icon-wrap">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></svg>
+        </div>
+        <h3>Multi-agente con RAG</h3>
+        <p>Compón agentes especializados con base de conocimiento documental y orquestación dinámica.</p>
+      </article>
+      <article class="card">
+        <div class="icon-wrap">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/><line x1="3" y1="20" x2="21" y2="20"/></svg>
+        </div>
+        <h3>Reportes y APIs</h3>
+        <p>Genera reportes ejecutivos invocando endpoints en vivo y herramientas externas en tiempo real.</p>
+      </article>
+    </div>
   </div>
 </section>
 
 <section class="stats-section">
   <h2 class="section-title">El taller en números</h2>
+  <p class="section-subtitle">Una sesión intensiva, práctica y orientada a resultados.</p>
   <div class="stats">
     <div class="stat"><span class="num">4h</span><span class="label">Duración</span></div>
     <div class="stat"><span class="num">6</span><span class="label">Módulos</span></div>
@@ -34,8 +59,8 @@
 </section>
 
 <section id="descargas" class="form-section">
-  <h2 class="section-title">Descarga todo el material</h2>
-  <p class="form-intro">Registra tus datos para acceder al kit completo del bootcamp.</p>
+  <h2 class="section-title">Descarga el material</h2>
+  <p class="form-intro">Completa el formulario para acceder al kit completo del bootcamp.</p>
   <form class="register-form" method="post" action="/register" autocomplete="on">
     <div class="field">
       <label for="nombre">Nombre completo</label>
@@ -49,15 +74,18 @@
       <label for="empresa">Empresa</label>
       <input type="text" id="empresa" name="empresa" minlength="2" maxlength="100" required>
     </div>
-    <div class="field field-checkbox">
+    <div class="field-checkbox">
       <input type="checkbox" id="consentimiento" name="consentimiento" required>
-      <label for="consentimiento">Acepto que FactorIT use mis datos para enviarme información del bootcamp y comunicaciones futuras. No spam — solo lo importante.</label>
+      <label for="consentimiento">Acepto que FactorIT use mis datos para enviarme información del bootcamp y comunicaciones futuras. Sin spam — solo lo importante.</label>
     </div>
     <div class="hp-field" aria-hidden="true">
       <label for="website">Website</label>
       <input type="text" id="website" name="website" tabindex="-1" autocomplete="off">
     </div>
-    <button type="submit" class="btn btn-primary btn-large">Acceder al material</button>
+    <button type="submit" class="btn btn-primary btn-large">
+      Acceder al material
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
+    </button>
   </form>
 </section>
 {% endblock %}