<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Formularios HTML5</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 20px; background: #f8fafc; }
    .card { background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 20px; max-width: 440px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }
    .field { margin-bottom: 14px; }
    label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 4px; color: #1e293b; }
    input[type="text"], input[type="email"], select, textarea {
      width: 100%; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 6px; box-sizing: border-box; font-size: 0.9rem;
    }
    input:focus, select:focus, textarea:focus { border-color: #2563eb; outline: none; }
    .btn { background: #2563eb; color: white; border: none; padding: 10px 18px; border-radius: 6px; font-weight: bold; width: 100%; cursor: pointer; }
    .btn:hover { background: #1d4ed8; }
  </style>
</head>
<body>

  <div class="card">
    <h3 style="margin-top: 0; color: #0f172a;">Inscripción al Bootcamp</h3>
    
    <form onsubmit="alert('¡Formulario validado y enviado correctamente!'); return false;">
      <div class="field">
        <label for="nombre">Nombre Completo:</label>
        <input type="text" id="nombre" name="nombre" placeholder="Ej: Valentina Restrepo" required>
      </div>

      <div class="field">
        <label for="correo">Correo Electrónico:</label>
        <input type="email" id="correo" name="correo" placeholder="[email protected]" required>
      </div>

      <div class="field">
        <label for="programa">Programa de Interés:</label>
        <select id="programa" name="programa" required>
          <option value="">-- Selecciona una especialidad --</option>
          <option value="fullstack">Bootcamp Fullstack Completo</option>
          <option value="backend">Desarrollo Backend PHP &amp; MySQL</option>
          <option value="frontend">Frontend con JavaScript &amp; CSS3</option>
        </select>
      </div>

      <div class="field">
        <label>
          <input type="checkbox" required> Acepto los términos de Kilopolis Academia
        </label>
      </div>

      <button type="submit" class="btn">Confirmar Inscripción &raquo;</button>
    </form>
  </div>

</body>
</html>