Tipografía

<h1>h1. Encabezado Bootstrap</h1>
<h2>h2. Encabezado Bootstrap</h2>
<h3>h3. Encabezado Bootstrap</h3>
<h4>h4. Encabezado Bootstrap</h4>
<h5>h5. Encabezado Bootstrap</h5>
<h6>h6. Encabezado Bootstrap</h6>

<p class="h1">h1. Encabezado Bootstrap</p>
<p class="h2">h2. Encabezado Bootstrap</p>
<p class="h3">h3. Encabezado Bootstrap</p>
<p class="h4">h4. Encabezado Bootstrap</p>
<p class="h5">h5. Encabezado Bootstrap</p>
<p class="h6">h6. Encabezado Bootstrap</p>

<h3>
  Encabezado de visualización elegante
  <small class="text-muted">Con texto secundario desvanecido</small>
</h3>

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-weight: 300;
$display-line-height: $headings-line-height;

<p class="lead">
  Este es un párrafo principal. Se destaca de los párrafos regulares.
</p>

<p>Puedes usar la etiqueta mark para <mark>resaltar</mark> texto.</p>
<p><del>Esta línea de texto debe tratarse como texto eliminado.</del></p>
<p><s>Esta línea de texto debe tratarse como si ya no fuera precisa.</s></p>
<p><ins>Esta línea de texto debe tratarse como una adición al documento.</ins></p>
<p><u>Esta línea de texto aparecerá subrayada.</u></p>
<p><small>Esta línea de texto debe tratarse como letra pequeña.</small></p>
<p><strong>Esta línea aparece en negrita.</strong></p>
<p><em>Esta línea aparece como texto en cursiva.</em></p>

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

<blockquote class="blockquote">
  <p>Una cita conocida, contenida en un elemento blockquote.</p>
</blockquote>

<figure>
  <blockquote class="blockquote">
    <p>Una cita conocida, contenida en un elemento blockquote.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Alguien fomoso en <cite title="Título fuente">Título fuente</cite>
  </figcaption>
</figure>

<figure class="text-center">
  <blockquote class="blockquote">
    <p>Una cita conocida, contenida en un elemento blockquote.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Alguien fomoso en <cite title="Título fuente">Título fuente</cite>
  </figcaption>
</figure>

<figure class="text-end">
  <blockquote class="blockquote">
    <p>Una cita conocida, contenida en un elemento blockquote.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Alguien fomoso en <cite title="Título fuente">Título fuente</cite>
  </figcaption>
</figure>

<ul class="list-unstyled">
  <li>Esta es una lista.</li>
  <li>Parece completamente sin estilo.</li>
  <li>Estructuralmente, sigue siendo una lista.</li>
  <li>Sin embargo, este estilo solo se aplica a los elementos secundarios inmediatos.</li>
  <li>Listas anidadas:
    <ul>
      <li>no se ven afectados por este estilo</li>
      <li>seguirá mostrando una viñeta</li>
      <li>y tenedrá un margen izquierdo apropiado</li>
    </ul>
  </li>
  <li>Esto aún puede ser útil en algunas situaciones.</li>
</ul>

<ul class="list-inline">
  <li class="list-inline-item">Este es un elemento de lista.</li>
  <li class="list-inline-item">Y otro.</li>
  <li class="list-inline-item">Pero se muestran en línea.</li>
</ul>

<dl class="row">
  <dt class="col-sm-3">Listas de descripción</dt>
  <dd class="col-sm-9">Una lista de descripciones es perfecta para definir términos.</dd>

  <dt class="col-sm-3">Plazo</dt>
  <dd class="col-sm-9">
    <p>Definición del término.</p>
    <p>Y más texto de definición de marcador de posición.</p>
  </dd>

  <dt class="col-sm-3">Otro término</dt>
  <dd class="col-sm-9">Esta definición es corta, así que no hay párrafos adicionales ni nada.</dd>

  <dt class="col-sm-3 text-truncate">El término truncado está truncado</dt>
  <dd class="col-sm-9">Esto puede ser útil cuando el espacio es reducido. Añade puntos suspensivos al final.</dd>

  <dt class="col-sm-3">Anidamiento</dt>
  <dd class="col-sm-9">
    <dl class="row">
      <dt class="col-sm-4">Lista de definiciones anidadas</dt>
      <dd class="col-sm-8">Oí que te gustan las listas de definiciones. Déjame poner una lista de definiciones dentro de tu lista de definiciones.</dd>
    </dl>
  </dd>
</dl>

$headings-margin-bottom:      $spacer * .5;
$headings-font-family:        null;
$headings-font-style:         null;
$headings-font-weight:        500;
$headings-line-height:        1.2;
$headings-color:              null;

$lead-font-size:              $font-size-base * 1.25;
$lead-font-weight:            300;

$small-font-size:             .875em;

$sub-sup-font-size:           .75em;

$text-muted:                  $gray-600;

$initialism-font-size:        $small-font-size;

$blockquote-margin-y:         $spacer;
$blockquote-font-size:        $font-size-base * 1.25;
$blockquote-footer-color:     $gray-600;
$blockquote-footer-font-size: $small-font-size;

$hr-margin-y:                 $spacer;
$hr-color:                    inherit;
$hr-bg-color:                 currentColor;
$hr-border-width:             0;
$hr-height:                   $border-width;
$hr-opacity:                  .25;

$legend-margin-bottom:        .5rem;
$legend-font-size:            1.5rem;
$legend-font-weight:          null;

$mark-padding:                .2em;

$dt-font-weight:              $font-weight-bold;

$nested-kbd-font-weight:      $font-weight-bold;

$list-inline-padding:         .5rem;

$mark-bg:                     #fcf8e3;