<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Flexbox en la Práctica</title>
  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
      background-color: #f1f5f9;
      margin: 0;
      padding: 20px;
      color: #0f172a;
    }

    /* 1. Navbar con Flexbox */
    .mi-navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #ffffff;
      padding: 12px 24px;
      border-radius: 10px;
      border: 1px solid #e2e8f0;
      margin-bottom: 25px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    }

    .nav-brand {
      font-weight: 800;
      font-size: 1.2rem;
      color: #0284c7;
      text-decoration: none;
    }

    .nav-menu {
      display: flex;
      gap: 16px;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .nav-menu a {
      color: #475569;
      text-decoration: none;
      font-size: 0.95rem;
      font-weight: 500;
    }

    .nav-menu a:hover {
      color: #0284c7;
    }

    /* 2. Rejilla de Tarjetas */
    .grid-tarjetas {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
    }

    .card {
      flex: 1 1 240px; /* Base de 240px que se adapta al espacio */
      display: flex;
      flex-direction: column;
      background: white;
      border: 1px solid #cbd5e1;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    }

    .card h4 {
      margin-top: 0;
      color: #0f172a;
    }

    .card p {
      color: #64748b;
      font-size: 0.9rem;
      line-height: 1.5;
    }

    /* El pie se ancla al fondo gracias a margin-top: auto */
    .card-footer {
      margin-top: auto;
      padding-top: 15px;
      border-top: 1px solid #f1f5f9;
    }

    .btn-comprar {
      width: 100%;
      background: #0284c7;
      color: white;
      border: none;
      padding: 10px;
      border-radius: 6px;
      font-weight: bold;
      cursor: pointer;
    }

    .btn-comprar:hover {
      background: #0369a1;
    }
  </style>
</head>
<body>

  <!-- Navbar -->
  <header class="mi-navbar">
    <a href="#" class="nav-brand">Kilopolis Academia</a>
    <ul class="nav-menu">
      <li><a href="#">Cursos</a></li>
      <li><a href="#">Manuales</a></li>
      <li><a href="#">Sandbox</a></li>
    </ul>
  </header>

  <!-- Tarjetas con alturas equilibradas -->
  <div class="grid-tarjetas">
    <div class="card">
      <h4>Plan Básico</h4>
      <p>Acceso a todos los manuales introductorios de HTML5 y CSS3.</p>
      <div class="card-footer">
        <button class="btn-comprar">Comenzar Gratis</button>
      </div>
    </div>

    <div class="card" style="border-color: #38bdf8;">
      <h4 style="color: #0284c7;">Plan Pro</h4>
      <p>
        Acceso ilimitado a manuales avanzados, consola de JavaScript ES6+, proyectos fullstack, bases de datos MySQL en vivo y soporte con Sócrates AI.
      </p>
      <div class="card-footer">
        <button class="btn-comprar" style="background:#2563eb;">Elegir Plan Pro</button>
      </div>
    </div>

    <div class="card">
      <h4>Plan Empresas</h4>
      <p>Capacitación técnica corporativa y métricas de avance de equipo.</p>
      <div class="card-footer">
        <button class="btn-comprar">Contactar Ventas</button>
      </div>
    </div>
  </div>

</body>
</html>