<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Selectores y Cascada CSS</title>
  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
      padding: 25px;
      background-color: #f8fafc;
      color: #1e293b;
    }

    /* 1. Selector de etiqueta básica (peso 1) */
    p {
      color: #64748b;
      font-size: 1rem;
    }

    /* 2. Selector de clase (peso 10) - Gana sobre 'p' */
    .texto-destacado {
      color: #0284c7;
      font-weight: bold;
    }

    /* 3. Selector por ID (peso 100) - Gana sobre clases */
    #mensaje-especial {
      color: #059669;
      font-size: 1.15rem;
      border-left: 4px solid #059669;
      padding-left: 12px;
    }

    /* Combinador de hijo directo ( > ) */
    .lista-cursos > li {
      background: #ffffff;
      margin-bottom: 8px;
      padding: 10px 15px;
      border-radius: 6px;
      border: 1px solid #e2e8f0;
      list-style: none;
    }

    /* Combinador descendiente */
    .contenedor-articulos p {
      background-color: #eff6ff;
      padding: 12px;
      border-radius: 6px;
    }
  </style>
</head>
<body>

  <h2>Prueba de Especificidad en Kilopolis</h2>

  <p>Párrafo común (Aplica estilo de etiqueta: color grisáceo).</p>

  <p class="texto-destacado">Párrafo con clase .texto-destacado (Gana la clase: color celeste).</p>

  <p id="mensaje-especial" class="texto-destacado">
    Párrafo con ID y clase al mismo tiempo (¡Gana el ID #mensaje-especial: color verde!).
  </p>

  <h3>Cursos con combinador de hijo directo (.lista-cursos &gt; li):</h3>
  <ul class="lista-cursos" style="padding-left: 0;">
    <li>Curso de CSS3 Profesional</li>
    <li>Curso de JavaScript Moderno</li>
    <li>Curso de Arquitectura Fullstack</li>
  </ul>

</body>
</html>