<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Posicionamiento CSS3</title>
  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
      background-color: #f1f5f9;
      margin: 0;
      padding: 30px;
      color: #0f172a;
    }

    /* Tarjeta padre con position: relative */
    .tarjeta-curso {
      position: relative;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 12px;
      padding: 24px;
      max-width: 380px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
      margin-bottom: 20px;
    }

    /* Insignia con position: absolute */
    .insignia-esquina {
      position: absolute;
      top: -10px;
      right: 15px;
      background: #ef4444;
      color: white;
      padding: 4px 10px;
      border-radius: 12px;
      font-size: 0.75rem;
      font-weight: bold;
      box-shadow: 0 2px 4px rgba(239, 68, 68, 0.4);
    }

    /* Botón de ayuda fijado con position: fixed */
    .btn-flotante {
      position: fixed;
      bottom: 25px;
      right: 25px;
      background: #10b981;
      color: white;
      border: none;
      padding: 12px 20px;
      border-radius: 30px;
      font-weight: bold;
      cursor: pointer;
      box-shadow: 0 4px 10px rgba(16, 185, 129, 0.4);
    }
  </style>
</head>
<body>

  <div class="tarjeta-curso">
    <span class="insignia-esquina">¡NUEVO!</span>
    <h3 style="margin-top: 5px;">Máster en CSS3 & Grid</h3>
    <p style="color: #64748b; font-size: 0.95rem; line-height: 1.5;">
      La insignia roja está posicionada de forma absoluta respecto a este contenedor con <code>top: -10px; right: 15px</code>.
    </p>
  </div>

  <button class="btn-flotante" onclick="alert('¡Botón fijo con position: fixed!')">
    💬 Ayuda en Vivo
  </button>

</body>
</html>