<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tarjetas en Bootstrap 5</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light p-4">

  <div class="container" style="max-width: 780px;">
    <h3 class="fw-bold mb-3">Planes Formativos en Kilopolis</h3>

    <div class="row g-4">
      <!-- Tarjeta 1: Plan Básico -->
      <div class="col-md-6">
        <div class="card h-100 shadow-sm border-0 rounded-4 overflow-hidden">
          <div class="card-header bg-white border-bottom p-3">
            <span class="badge bg-secondary-subtle text-secondary fw-bold px-3 py-1 rounded-pill">
              Inicial
            </span>
            <h4 class="fw-bold text-dark mt-2 mb-0">Plan Desarrollador</h4>
          </div>
          <div class="card-body p-4 d-flex flex-column">
            <p class="card-text text-secondary mb-4">
              Acceso completo a todos los manuales de HTML5, CSS3 y Bootstrap 5 con ejercicios interactivos en el editor en vivo.
            </p>
            <div class="mt-auto">
              <h3 class="fw-bold text-dark mb-3">Gratuito</h3>
              <button class="btn btn-outline-primary w-100 fw-semibold rounded-pill" onclick="alert('¡Iniciado plan Desarrollador!')">
                Comenzar Lecciones &raquo;
              </button>
            </div>
          </div>
          <div class="card-footer bg-light text-muted small p-3">
            Actualizaciones continuas incluidas
          </div>
        </div>
      </div>

      <!-- Tarjeta 2: Plan Pro Destacado -->
      <div class="col-md-6">
        <div class="card h-100 shadow-sm border-2 border-primary rounded-4 overflow-hidden">
          <div class="card-header bg-primary text-white p-3">
            <span class="badge bg-white text-primary fw-bold px-3 py-1 rounded-pill">
              Más Popular
            </span>
            <h4 class="fw-bold mt-2 mb-0">Plan Fullstack Pro</h4>
          </div>
          <div class="card-body p-4 d-flex flex-column">
            <p class="card-text text-secondary mb-4">
              Incluye JavaScript ES6+, PHP 8.3, bases de datos MySQL en tiempo real, proyectos desplegables y tutoría con Sócrates AI.
            </p>
            <div class="mt-auto">
              <h3 class="fw-bold text-primary mb-3">$29 <small class="fs-6 text-muted fw-normal">/mes</small></h3>
              <button class="btn btn-primary w-100 fw-semibold rounded-pill shadow-sm" onclick="alert('¡Plan Pro seleccionado!')">
                Suscribirme con Descuento &raquo;
              </button>
            </div>
          </div>
          <div class="card-footer bg-primary-subtle text-primary small p-3 fw-semibold">
            Garantía de satisfacción Kilopolis
          </div>
        </div>
      </div>
    </div>
  </div>

</body>
</html>