Ficha por pasos, cita visible y recordatorio por correo al invitado

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TSyR5Zw5eGj6oPTRVjvP1b

public/invitados.html

@@ -18,12 +18,10 @@
   <h1>Ficha del <em>invitado</em></h1>
   <p id="hola" class="lead-c" hidden></p>
   <p id="malo" class="status err" hidden>Este enlace no es válido o ha caducado. Escríbenos a <a href="mailto:andaquenosabesnada@gmail.com">andaquenosabesnada@gmail.com</a> y te mandamos uno nuevo.</p>
+  <p id="cita" class="cita" hidden></p>
   <p id="intro" class="lead-c" hidden>Queremos conocerte un poco antes de darle al REC. No hace falta que prepares respuestas perfectas: esto nos sirve para encontrar buenas historias, preguntas interesantes y, sobre todo, temas sobre los que merezca la pena hablar.</p>
 
   <form id="g" class="form" novalidate hidden data-ok="¡Gracias! Hemos recibido tu ficha. Te escribiremos pronto con los siguientes pasos.">
-    <label>Tu correo electrónico (opcional, para poder responderte)
-      <input name="email" type="email" autocomplete="email" maxlength="200">
-    </label>
   <fieldset class="sec">
     <legend>👤 Tú</legend>
     <label><span>Nombre y cómo prefieres que te presentemos <span class="req" title="Obligatoria">*</span></span>
@@ -41,6 +39,10 @@
     <label><span>Tus redes sociales que quieras que mencionemos o utilicemos para promocionar el episodio</span>
       <textarea name="q05" rows="4" maxlength="3000"></textarea>
     </label>
+      <label><span>Tu correo electrónico <span class="req" title="Obligatoria">*</span></span><small>Te enviaremos un recordatorio de tu cita y así podemos responderte.</small>
+      <input name="email" type="email" autocomplete="email" maxlength="200" required>
+    </label>
+    <div class="nav"><button type="button" class="btn primary next">Siguiente →</button></div>
   </fieldset>
   <fieldset class="sec">
     <legend>🎙️ Para conocerte un poco mejor</legend>
@@ -56,6 +58,7 @@
     <label><span>¿Qué idea, mito o tópico de tu sector te gustaría desmontar?</span>
       <textarea name="q09" rows="4" maxlength="3000"></textarea>
     </label>
+    <div class="nav"><button type="button" class="btn ghost prev">← Anterior</button><button type="button" class="btn primary next">Siguiente →</button></div>
   </fieldset>
   <fieldset class="sec">
     <legend>🔥 Vamos a meternos en harina</legend>
@@ -72,6 +75,7 @@
     <label><span>Si pudiéramos conseguir que después de escucharte alguien cambiara de opinión sobre una cosa, ¿qué te gustaría que fuera?</span>
       <textarea name="q13" rows="4" maxlength="3000"></textarea>
     </label>
+    <div class="nav"><button type="button" class="btn ghost prev">← Anterior</button><button type="button" class="btn primary next">Siguiente →</button></div>
   </fieldset>
   <fieldset class="sec">
     <legend>🚧 Territorio delicado</legend>
@@ -85,6 +89,7 @@
     <label><span>Y... ¿Hay algún otro tema de tu vida que quieras contarnos?</span>
       <textarea name="q16" rows="4" maxlength="3000"></textarea>
     </label>
+    <div class="nav"><button type="button" class="btn ghost prev">← Anterior</button><button type="button" class="btn primary next">Siguiente →</button></div>
   </fieldset>
   <fieldset class="sec">
     <legend>📣 Y para terminar...</legend>
@@ -98,6 +103,7 @@
     <label><span>¿Hay alguna historia que te gustaría contar sí o sí?</span>
       <textarea name="q19" rows="4" maxlength="3000"></textarea>
     </label>
+    <div class="nav"><button type="button" class="btn ghost prev">← Anterior</button><button type="button" class="btn primary next">Siguiente →</button></div>
   </fieldset>
   <fieldset class="sec">
     <legend>Antes de enviar</legend>
@@ -111,8 +117,9 @@
       <input name="privacy" type="checkbox" required>
       <span>He leído la <a href="privacidad.html" target="_blank" rel="noopener">política de privacidad</a> y acepto que usen estos datos para preparar el episodio. <span class="req">*</span></span>
     </label>
+    <div class="nav"><button type="button" class="btn ghost prev">← Anterior</button><button class="btn primary" type="submit">Enviar mi ficha</button></div>
   </fieldset>
-    <button class="btn primary" type="submit">Enviar mi ficha</button>
+    <p id="paso" class="paso" aria-live="polite"></p>
     <p id="st" class="status" role="status" aria-live="polite"></p>
     <p class="note">Tus respuestas se guardan en este navegador mientras escribes, por si cierras la página. Se borran al enviarlas.</p>
   </form>