Formulario de contacto

CONTEXTO
Estoy creando una landing de inscripción para un curso ficticio dirigido a
personas que quieren aprender CSS desde cero. El curso se llama
"CSS desde Cero".

LOGRO DE ESTA ITERACIÓN
Crea únicamente la estructura y el contenido principal de una landing de una
sola página. Todavía no agregues el formulario ni conectes backend.

ALCANCE
- Hero con el nombre "CSS desde Cero", la promesa "Aprende a transformar HTML
  simple en interfaces claras, responsivas y profesionales" y un botón
  "Quiero aprender CSS".
- Sección con estos tres resultados: dominar selectores y cascada, construir
  layouts con Flexbox y Grid, y adaptar interfaces a móvil.
- Resumen de tres etapas: fundamentos, layouts y proyecto final.
- Sección vacía identificable como destino del futuro formulario.
- Pie de página sencillo que aclare que es un proyecto educativo.
- El botón del hero debe desplazarse a la sección del futuro formulario.

REGLAS
- Estilo editorial contemporáneo: fondo oscuro, superficies ligeramente más
  claras y acento violeta.
- Jerarquía tipográfica clara, texto legible y ancho de lectura cómodo.
- No agregues precios, testimonios, contador, login, navegación compleja,
  formulario ni funciones de backend.
- No inventes contenido adicional.

COMPROBACIÓN
- El propósito del curso y la acción principal se entienden en menos de diez
  segundos.
- El botón lleva a la sección correcta.
- No existe todavía ningún formulario ni integración.

CONTEXTO
Continúa sobre la landing existente de "CSS desde Cero".

LOGRO DE ESTA ITERACIÓN
Reemplaza la sección reservada por un formulario de inscripción completo a
nivel visual. Todavía no guardes datos ni envíes correos.

ALCANCE
- Campo de texto "Nombre completo", obligatorio.
- Campo de email "Correo electrónico", obligatorio.
- Selector "Nivel de experiencia", opcional, con estas opciones:
  "Principiante total", "Sé HTML" y "Sé HTML y CSS básico".
- Casilla obligatoria con el texto "Acepto que usen estos datos para
  contactarme sobre el curso".
- Botón "Quiero apuntarme".
- Nota breve: "Usaremos tus datos únicamente para responder a tu inscripción".

REGLAS
- Mantén intactos el contenido y el estilo general de la landing.
- Usa etiquetas siempre visibles asociadas a sus controles.
- Incluye estados de foco claramente visibles.
- No uses placeholders como sustituto de etiquetas.
- No conectes backend, colección de datos ni correo todavía.

COMPROBACIÓN
- Todos los controles pueden recorrerse en orden usando solo el teclado.
- Las etiquetas siguen visibles cuando se escribe.
- El formulario se entiende sin instrucciones adicionales.

CONTEXTO
El formulario visual de "CSS desde Cero" ya existe. Ahora necesita lógica del
lado de la interfaz antes de conectarlo al backend.

LOGRO DE ESTA ITERACIÓN
Agrega validaciones y estados claros sin cambiar el diseño ni los textos ya
aprobados.

ALCANCE
- "Nombre completo": obligatorio, entre 2 y 80 caracteres.
- "Correo electrónico": obligatorio y con formato de email válido.
- "Nivel de experiencia": opcional.
- "Consentimiento": debe estar marcado.
- Muestra cada error junto a su campo y retíralo cuando se corrija.
- Si hay errores, mueve el foco al primer campo inválido y no simules un envío.
- Si todo es válido, muestra temporalmente un estado de éxito local para poder
  probar esta iteración; aún no guardes datos ni envíes correos.

REGLAS
- Conserva el contenido, el layout y la accesibilidad existentes.
- Usa mensajes específicos que expliquen cómo corregir cada problema.
- No agregues backend ni dependencias externas.

COMPROBACIÓN
- Un formulario vacío muestra los errores correspondientes.
- Un email inválido se rechaza.
- El nivel puede quedar sin selección.
- Al corregir los campos, desaparecen sus errores.
- Un formulario válido llega al estado de éxito local.

CONTEXTO
La landing y sus validaciones ya funcionan. Ahora convierte el formulario en
una función real usando exclusivamente el backend integrado de Hostinger
Horizons.

LOGRO DE ESTA ITERACIÓN
Guardar cada inscripción válida y avisar al dueño del curso por correo.

ALCANCE
- Crea una colección de datos llamada "Inscripciones CSS".
- Guarda: nombre completo, correo electrónico, nivel de experiencia,
  consentimiento y fecha/hora de creación.
- Envía una notificación a [EMAIL_DEL_DUEÑO] después de guardar correctamente.
- El correo debe incluir nombre, email y nivel; si no se eligió nivel, indica
  "No especificado".
- Mientras se procesa, cambia el botón a "Enviando..." y desactívalo.
- Solo después de confirmar el guardado, muestra
  "¡Inscripción recibida! Te contactaremos pronto" y limpia el formulario.
- Si algo falla, muestra "No pudimos enviar tu inscripción. Inténtalo de nuevo"
  y conserva todos los datos escritos.

REGLAS
- Mantén intactas las validaciones y la apariencia aprobadas.
- No permitas envíos dobles.
- No uses Supabase, servicios de correo externos, APIs ni credenciales en el
  frontend.
- Usa Test data en Preview; no mezcles datos de prueba con Live data.

COMPROBACIÓN
- Un envío válido crea exactamente un registro en "Inscripciones CSS".
- El registro contiene todos los campos y la fecha/hora.
- Llega una notificación a [EMAIL_DEL_DUEÑO].
- Un fallo no limpia el formulario.
- Varios clics rápidos no crean duplicados.

CONTEXTO
La landing de "CSS desde Cero" ya comunica, valida, guarda datos y envía una
notificación.

LOGRO DE ESTA ITERACIÓN
Haz una auditoría final y corrige únicamente problemas de responsive,
accesibilidad o estados, sin rediseñar la página.

ALCANCE
- Revisa anchos de 375 px, 768 px y escritorio.
- Evita cualquier desbordamiento horizontal.
- En móvil, apila el contenido, usa campos y botón al ancho disponible y
  conserva un espaciado cómodo.
- Verifica contraste legible, etiquetas asociadas, foco visible, orden de
  teclado y mensajes anunciables para tecnologías de asistencia.
- Respeta la preferencia de movimiento reducido.
- Conserva los estados: normal, foco, error, enviando, éxito y fallo.

REGLAS
- No cambies textos, campos, validaciones, colección, email ni flujo del
  backend.
- No agregues secciones, librerías ni animaciones decorativas.

COMPROBACIÓN
- No hay cortes ni desbordamientos en los tres anchos.
- Todo el formulario funciona con teclado.
- La integración sigue creando un solo registro y enviando una notificación.
- El diseño conserva su jerarquía visual.

En la versión actual ocurre este problema:
[QUÉ OCURRE].

Lo reproduzco así:
1. [PASO 1]
2. [PASO 2]
3. [PASO 3]

Resultado esperado:
[RESULTADO].

Resultado actual:
[RESULTADO].

Corrige únicamente esta causa. Conserva sin cambios:
[FUNCIONES QUE YA ESTÁN APROBADAS].

Después de corregir, verifica:
[PRUEBA CONCRETA].