<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Tipografía y Texto CSS3</title>
  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
      background-color: #f8fafc;
      padding: 30px;
      color: #1e293b;
    }

    .articulo-tipografico {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 30px;
      max-width: 540px;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    }

    .categoria {
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: #2563eb;
      margin-bottom: 8px;
    }

    .titulo-principal {
      font-size: 1.75rem;
      font-weight: 700;
      line-height: 1.25;
      color: #0f172a;
      margin-top: 0;
      margin-bottom: 12px;
      letter-spacing: -0.02em;
    }

    .lead {
      font-size: 1.1rem;
      line-height: 1.5;
      color: #475569;
      margin-bottom: 16px;
      font-weight: 500;
    }

    .cuerpo-texto {
      font-size: 0.95rem;
      line-height: 1.7;
      color: #64748b;
      margin-bottom: 20px;
    }

    .cita-destacada {
      border-left: 4px solid #3b82f6;
      padding-left: 16px;
      margin: 16px 0;
      font-style: italic;
      color: #334155;
    }

    .texto-truncado {
      background: #f1f5f9;
      padding: 8px 12px;
      border-radius: 6px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 0.85rem;
      color: #64748b;
    }
  </style>
</head>
<body>

  <div class="articulo-tipografico">
    <div class="categoria">Kilopolis Editorial · CSS3</div>
    <h1 class="titulo-principal">La Importancia de la Tipografía en la Web</h1>
    <p class="lead">
      El 95% de la información en la web consiste en texto escrito. Diseñar con buena tipografía es diseñar para las personas.
    </p>
    <div class="cita-destacada">
      «El buen diseño tipográfico es invisible: permite que el mensaje fluya sin fatiga visual.»
    </div>
    <p class="cuerpo-texto">
      Ajustar el interlineado a 1.6 y elegir tamaños escalables con unidades relativas garantiza que tus lectores disfruten de una experiencia fluida tanto en dispositivos móviles como en monitores de escritorio.
    </p>
    
    <div class="texto-truncado" title="Este texto es extremadamente largo y se recorta automáticamente con puntos suspensivos para no quebrar la tarjeta.">
      Texto de prueba muy largo que se recorta automáticamente con text-overflow: ellipsis...
    </div>
  </div>

</body>
</html>