.elementor-10930 .elementor-element.elementor-element-973a008{--display:flex;}.elementor-10930 .elementor-element.elementor-element-973a008.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-10930 .elementor-element.elementor-element-344c511{text-align:center;}.elementor-10930 .elementor-element.elementor-element-344c511 .elementor-heading-title{font-family:"Times New Roman", Sans-serif;font-weight:600;color:var( --e-global-color-secondary );}.elementor-widget-form .elementor-field-group > label, .elementor-widget-form .elementor-field-subgroup label{color:var( --e-global-color-text );}.elementor-widget-form .elementor-field-group > label{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-field-type-html{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-field-group .elementor-field{color:var( --e-global-color-text );}.elementor-widget-form .elementor-field-group .elementor-field, .elementor-widget-form .elementor-field-subgroup label{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-form .e-form__buttons__wrapper__button-next{background-color:var( --e-global-color-accent );}.elementor-widget-form .elementor-button[type="submit"]{background-color:var( --e-global-color-accent );}.elementor-widget-form .e-form__buttons__wrapper__button-previous{background-color:var( --e-global-color-accent );}.elementor-widget-form .elementor-message{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .e-form__indicators__indicator, .elementor-widget-form .e-form__indicators__indicator__label{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-form{--e-form-steps-indicator-inactive-primary-color:var( --e-global-color-text );--e-form-steps-indicator-active-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-completed-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-background-color:var( --e-global-color-text );--e-form-steps-indicator-progress-meter-color:var( --e-global-color-text );}.elementor-widget-form .e-form__indicators__indicator__progress__meter{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-10930 .elementor-element.elementor-element-0f69766{width:var( --container-widget-width, 81.359% );max-width:81.359%;--container-widget-width:81.359%;--container-widget-flex-grow:0;--e-form-steps-indicators-spacing:20px;--e-form-steps-indicator-padding:30px;--e-form-steps-indicator-inactive-primary-color:#324A6D;--e-form-steps-indicator-inactive-secondary-color:#ffffff;--e-form-steps-indicator-active-primary-color:#467FF7;--e-form-steps-indicator-active-secondary-color:#ffffff;--e-form-steps-indicator-completed-primary-color:#467FF7;--e-form-steps-indicator-completed-secondary-color:#ffffff;--e-form-steps-divider-width:1px;--e-form-steps-divider-gap:10px;}.elementor-10930 .elementor-element.elementor-element-0f69766 > .elementor-widget-container{margin:0% 16% 0% 41%;}.elementor-10930 .elementor-element.elementor-element-0f69766.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-10930 .elementor-element.elementor-element-0f69766 .elementor-field-group{padding-right:calc( 30px/2 );padding-left:calc( 30px/2 );margin-bottom:20px;}.elementor-10930 .elementor-element.elementor-element-0f69766 .elementor-form-fields-wrapper{margin-left:calc( -30px/2 );margin-right:calc( -30px/2 );margin-bottom:-20px;}.elementor-10930 .elementor-element.elementor-element-0f69766 .elementor-field-group.recaptcha_v3-bottomleft, .elementor-10930 .elementor-element.elementor-element-0f69766 .elementor-field-group.recaptcha_v3-bottomright{margin-bottom:0;}body.rtl .elementor-10930 .elementor-element.elementor-element-0f69766 .elementor-labels-inline .elementor-field-group > label{padding-left:0px;}body:not(.rtl) .elementor-10930 .elementor-element.elementor-element-0f69766 .elementor-labels-inline .elementor-field-group > label{padding-right:0px;}body .elementor-10930 .elementor-element.elementor-element-0f69766 .elementor-labels-above .elementor-field-group > label{padding-bottom:0px;}.elementor-10930 .elementor-element.elementor-element-0f69766 .elementor-field-group > label, .elementor-10930 .elementor-element.elementor-element-0f69766 .elementor-field-subgroup label{color:#324A6D;}.elementor-10930 .elementor-element.elementor-element-0f69766 .elementor-field-group > label{font-family:"Poppins", Sans-serif;font-size:16px;font-weight:300;text-transform:none;font-style:normal;text-decoration:none;line-height:1.5em;letter-spacing:0px;}.elementor-10930 .elementor-element.elementor-element-0f69766 .elementor-field-type-html{padding-bottom:41px;color:#324A6D;font-family:"Poppins", Sans-serif;font-size:16px;font-weight:300;text-transform:none;font-style:normal;text-decoration:none;line-height:1.5em;letter-spacing:0px;}.elementor-10930 .elementor-element.elementor-element-0f69766 .elementor-field-group .elementor-field{color:#324A6D;}.elementor-10930 .elementor-element.elementor-element-0f69766 .elementor-field-group .elementor-field, .elementor-10930 .elementor-element.elementor-element-0f69766 .elementor-field-subgroup label{font-family:"Poppins", Sans-serif;font-size:16px;font-weight:300;text-transform:none;font-style:normal;text-decoration:none;line-height:1.5em;letter-spacing:0px;}.elementor-10930 .elementor-element.elementor-element-0f69766 .elementor-field-group:not(.elementor-field-type-upload) .elementor-field:not(.elementor-select-wrapper){border-color:#C8D5DC;border-width:1px 1px 1px 1px;border-radius:0px 0px 0px 0px;}.elementor-10930 .elementor-element.elementor-element-0f69766 .elementor-field-group .elementor-select-wrapper select{border-color:#C8D5DC;border-width:1px 1px 1px 1px;border-radius:0px 0px 0px 0px;}.elementor-10930 .elementor-element.elementor-element-0f69766 .elementor-field-group .elementor-select-wrapper::before{color:#C8D5DC;}.elementor-10930 .elementor-element.elementor-element-0f69766 .elementor-button{font-family:"Poppins", Sans-serif;font-size:16px;font-weight:500;text-transform:capitalize;font-style:normal;text-decoration:none;line-height:1em;letter-spacing:0px;border-style:solid;border-width:1px 1px 1px 1px;border-radius:50px 50px 50px 50px;padding:3% 13% 3% 13%;}.elementor-10930 .elementor-element.elementor-element-0f69766 .e-form__buttons__wrapper__button-next{background-color:#467FF7;color:#FFFFFF;border-color:#467FF7;}.elementor-10930 .elementor-element.elementor-element-0f69766 .elementor-button[type="submit"]{background-color:#467FF7;color:#FFFFFF;border-color:#467FF7;}.elementor-10930 .elementor-element.elementor-element-0f69766 .elementor-button[type="submit"] svg *{fill:#FFFFFF;}.elementor-10930 .elementor-element.elementor-element-0f69766 .e-form__buttons__wrapper__button-previous{background-color:#467FF7;color:#ffffff;}.elementor-10930 .elementor-element.elementor-element-0f69766 .e-form__buttons__wrapper__button-next:hover{background-color:#02010100;color:#467FF7;border-color:#467FF7;}.elementor-10930 .elementor-element.elementor-element-0f69766 .elementor-button[type="submit"]:hover{background-color:#02010100;color:#467FF7;border-color:#467FF7;}.elementor-10930 .elementor-element.elementor-element-0f69766 .elementor-button[type="submit"]:hover svg *{fill:#467FF7;}.elementor-10930 .elementor-element.elementor-element-0f69766 .e-form__buttons__wrapper__button-previous:hover{color:#ffffff;}.elementor-10930 .elementor-element.elementor-element-0f69766 .elementor-message{font-family:"Poppins", Sans-serif;font-size:16px;font-weight:300;text-transform:none;font-style:normal;text-decoration:none;line-height:1.5em;letter-spacing:0px;}.elementor-10930 .elementor-element.elementor-element-0f69766 .elementor-message.elementor-message-success{color:#467FF7;}.elementor-10930 .elementor-element.elementor-element-0f69766 .elementor-message.elementor-message-danger{color:#324A6D;}.elementor-10930 .elementor-element.elementor-element-0f69766 .elementor-message.elementor-help-inline{color:#324A6D;}.elementor-10930 .elementor-element.elementor-element-0f69766 .e-form__indicators__indicator, .elementor-10930 .elementor-element.elementor-element-0f69766 .e-form__indicators__indicator__label{font-family:"Poppins", Sans-serif;font-size:16px;font-weight:500;text-transform:capitalize;font-style:normal;text-decoration:none;line-height:1em;letter-spacing:0px;}@media(max-width:991px){.elementor-10930 .elementor-element.elementor-element-0f69766 .elementor-field-group > label{font-size:14px;}.elementor-10930 .elementor-element.elementor-element-0f69766 .elementor-field-type-html{font-size:14px;}.elementor-10930 .elementor-element.elementor-element-0f69766 .elementor-field-group .elementor-field, .elementor-10930 .elementor-element.elementor-element-0f69766 .elementor-field-subgroup label{font-size:14px;}.elementor-10930 .elementor-element.elementor-element-0f69766 .elementor-button{font-size:14px;}.elementor-10930 .elementor-element.elementor-element-0f69766 .elementor-message{font-size:14px;}.elementor-10930 .elementor-element.elementor-element-0f69766 .e-form__indicators__indicator, .elementor-10930 .elementor-element.elementor-element-0f69766 .e-form__indicators__indicator__label{font-size:14px;}}@media(max-width:575px){.elementor-10930 .elementor-element.elementor-element-973a008{--width:332px;}.elementor-10930 .elementor-element.elementor-element-0f69766{width:var( --container-widget-width, 486px );max-width:486px;--container-widget-width:486px;--container-widget-flex-grow:0;}.elementor-10930 .elementor-element.elementor-element-0f69766 > .elementor-widget-container{margin:-1px -1px -1px -1px;}.elementor-10930 .elementor-element.elementor-element-0f69766.elementor-element{--align-self:center;--flex-grow:0;--flex-shrink:0;}}/* Start custom CSS for kng_heading, class: .elementor-element-19d87f0 */<html lang="es">
<head>
  <meta charset="UTF-8" />
  <title>Pasarela de Pago (Prototipo)</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
      padding: 30px;
    }
    .pasarela-container {
      max-width: 400px;
      margin: auto;
      background: white;
      padding: 25px;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    h2 {
      text-align: center;
      color: #333;
    }
    label {
      margin-top: 15px;
      display: block;
      font-weight: bold;
    }
    input, select {
      width: 100%;
      padding: 10px;
      margin-top: 5px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
    button {
      margin-top: 20px;
      width: 100%;
      padding: 12px;
      background-color: #28a745;
      color: white;
      font-size: 16px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
    button:disabled {
      background-color: #888;
    }
    #procesando {
      text-align: center;
      margin-top: 20px;
      display: none;
      color: #007bff;
    }
    #resultado {
      margin-top: 20px;
      text-align: center;
      font-weight: bold;
    }
  </style>
</head>
<body>

  <div class="pasarela-container">
    <h2>Pasarela de Pago</h2>
    <form id="form-pago">
      <label for="nombre">Nombre completo</label>
      <input type="text" id="nombre" required />

      <label for="email">Correo electrónico</label>
      <input type="email" id="email" required />

      <label for="monto">Monto (COP)</label>
      <input type="number" id="monto" required min="1000" />

      <label for="metodo">Método de pago</label>
      <select id="metodo" required>
        <option value="tarjeta">Tarjeta de crédito</option>
        <option value="transferencia">Transferencia bancaria</option>
        <option value="nequi">Nequi</option>
      </select>

      <button type="submit">Pagar</button>
      <div id="procesando">Procesando pago...</div>
    </form>

    <div id="resultado"></div>
  </div>

  <script>
    const form = document.getElementById('form-pago');
    const procesando = document.getElementById('procesando');
    const resultado = document.getElementById('resultado');

    form.addEventListener('submit', function(e) {
      e.preventDefault();
      resultado.textContent = '';
      procesando.style.display = 'block';

      const nombre = document.getElementById('nombre').value;
      const email = document.getElementById('email').value;
      const monto = document.getElementById('monto').value;
      const metodo = document.getElementById('metodo').value;

      // Simular procesamiento (3 segundos)
      setTimeout(() => {
        procesando.style.display = 'none';

        // Simular éxito o error (aleatorio)
        const exito = Math.random() > 0.2;

        if (exito) {
          resultado.style.color = 'green';
          resultado.innerHTML = `✅ ¡Pago exitoso!<br>Gracias ${nombre}, tu pago de $${monto} COP vía ${metodo} ha sido procesado.`;
        } else {
          resultado.style.color = 'red';
          resultado.innerHTML = `❌ Error en el pago.<br>Por favor intenta nuevamente.`;
        }
      }, 3000);
    });
  </script>

</body>
</html>/* End custom CSS */
/* Start custom CSS for form, class: .elementor-element-0f69766 */.elementor-186 .elementor-element.elementor-element-ccebff1 .elementor-button[type="submit"] {
    background-color: #142246;
    color: #FFFFFF;
    border-color: #142246;
}/* End custom CSS */