<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tipografía 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: 720px;">
    <!-- Encabezado Display Gigante -->
    <h1 class="display-5 fw-bold text-dark mb-2">
      Kilopolis Academia
    </h1>

    <p class="lead text-primary fw-medium mb-3">
      El entorno interactivo para dominar el desarrollo fullstack con estándares internacionales.
    </p>

    <p class="text-secondary mb-4" style="line-height: 1.7;">
      Bootstrap 5 optimiza la legibilidad tipográfica en cualquier resolución. Con clases utilitarias como <code class="text-dark">.lead</code> y <code class="text-dark">.text-body-secondary</code>, puedes jerarquizar artículos editoriales sin redactar reglas CSS personalizadas.
    </p>

    <!-- Cita destacada blockquote -->
    <figure class="p-3 bg-white border-start border-4 border-primary rounded-end shadow-sm mb-4">
      <blockquote class="blockquote mb-2">
        <p class="fs-6 fst-italic text-dark mb-0">
          «La simplicidad es la máxima sofisticación en el diseño de interfaces web.»
        </p>
      </blockquote>
      <figcaption class="blockquote-footer mb-0">
        Leonardo da Vinci en <cite title="Kilopolis Pensamiento">Kilopolis Formación</cite>
      </figcaption>
    </figure>

    <!-- Utilidades de alineación -->
    <div class="d-flex justify-content-between text-muted small border-top pt-2">
      <span>Publicado: 2026</span>
      <span class="text-uppercase fw-semibold text-success">Verificado W3C</span>
    </div>
  </div>

</body>
</html>