<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Listas en HTML5</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; line-height: 1.6; background: #f8fafc; }
    .grid-listas { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 650px; }
    .caja { background: white; border: 1px solid #e2e8f0; border-radius: 8px; padding: 18px; }
    dt { font-weight: bold; color: #0284c7; margin-top: 10px; }
    dd { margin-left: 0; color: #475569; font-size: 0.95rem; }
  </style>
</head>
<body>

  <div class="grid-listas">
    <!-- Lista Ordenada con Letras -->
    <div class="caja">
      <h3 style="margin-top: 0; color: #0f172a;">Pasos del Proyecto</h3>
      <ol type="A" start="1">
        <li>Planificación de requerimientos</li>
        <li>Diseño de maquetas visuales</li>
        <li>Codificación con HTML5 y CSS3</li>
        <li>Pruebas de accesibilidad web</li>
      </ol>
    </div>

    <!-- Lista Desordenada Anidada -->
    <div class="caja">
      <h3 style="margin-top: 0; color: #0f172a;">Tecnologías Web</h3>
      <ul>
        <li>Frontend
          <ul>
            <li>HTML5 Semántico</li>
            <li>CSS3 Moderno</li>
            <li>JavaScript ES6</li>
          </ul>
        </li>
        <li>Backend
          <ul>
            <li>PHP 8.3</li>
            <li>MySQL</li>
          </ul>
        </li>
      </ul>
    </div>
  </div>

  <!-- Glosario de Descripción -->
  <div class="caja" style="max-width: 650px; margin-top: 20px;">
    <h3 style="margin-top: 0; color: #0f172a;">Glosario Técnico (&lt;dl&gt;)</h3>
    <dl>
      <dt>HTML5</dt>
      <dd>Lenguaje de marcado estándar para la creación y estructuración de sitios web.</dd>
      <dt>CSS3</dt>
      <dd>Hojas de estilo en cascada encargadas del diseño visual y la adaptabilidad responsiva.</dd>
    </dl>
  </div>

</body>
</html>