<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Enlaces en HTML5</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; line-height: 1.6; background: #f8fafc; }
    .card { background: white; border: 1px solid #e2e8f0; border-radius: 8px; padding: 20px; max-width: 520px; margin-bottom: 20px; }
    .btn-link {
      display: inline-block;
      background: #0284c7;
      color: white;
      text-decoration: none;
      padding: 8px 16px;
      border-radius: 6px;
      font-weight: 600;
      margin-top: 10px;
    }
    .btn-link:hover { background: #0369a1; }
    .contacto-box { background: #f0fdf4; border: 1px solid #bbf7d0; padding: 15px; border-radius: 6px; }
  </style>
</head>
<body>

  <div class="card">
    <h2>Navegación con Enlaces</h2>
    <p>
      1. Enlace a nueva pestaña con seguridad:<br>
      <a href="https://kilopolis.com" target="_blank" rel="noopener noreferrer">
        Ir a Kilopolis.com (Nueva Pestaña) &raquo;
      </a>
    </p>

    <p>
      2. Salto a sección interna:<br>
      <a href="#bloque-contacto" class="btn-link">Ir directo al formulario &darr;</a>
    </p>
  </div>

  <div style="height: 150px; display: flex; align-items: center; justify-content: center; color: #94a3b8; font-style: italic;">
    [ Espacio de contenido intermedio ]
  </div>

  <div id="bloque-contacto" class="card contacto-box">
    <h3>Sección de Contacto (Destino del Ancla)</h3>
    <p>¡Llegaste con éxito a través del enlace de ancla <code>#bloque-contacto</code>!</p>
    
    <p>
      📞 <a href="tel:+573001234567">Llamar a Soporte (+57 300 123 4567)</a><br>
      ✉️ <a href="mailto:[email protected]?subject=Duda%20HTML5">Enviar Correo Electrónico</a>
    </p>
  </div>

</body>
</html>