{"id":9454,"date":"2025-09-29T16:52:52","date_gmt":"2025-09-29T16:52:52","guid":{"rendered":"https:\/\/asisvisa.com\/?page_id=9454"},"modified":"2025-11-17T16:11:42","modified_gmt":"2025-11-17T22:11:42","slug":"pricing","status":"publish","type":"page","link":"https:\/\/asisvisa.com\/en\/pricing\/","title":{"rendered":"Pricing"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"9454\" class=\"elementor elementor-9454\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fe9658c e-con-full e-flex e-con e-parent\" data-id=\"fe9658c\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5f2976e elementor-widget-tablet__width-initial elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"5f2976e\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n <div class=\"cotizador-container\">\r\n      <h2>Legal Services<\/h2>\r\n      <p class=\"intro\">\r\n        Select a service and customize the options you need\r\n      <\/p>\r\n      <div class=\"cotizador-step\" id=\"paso1\">\r\n        <h3>Step 1: Select the service<\/h3>\r\n        <select id=\"servicio\" onchange=\"seleccionarServicio()\">\r\n          <option value=\"\">Loading services<\/option>\r\n        <\/select>\r\n      <\/div>\r\n      <div class=\"cotizador-step\" id=\"paso2\" style=\"display: none\">\r\n        <h3 data-text=\"Opciones de proceso\"><\/h3>\r\n        <p class=\"subtitulo\" id=\"subtituloPaso2\">\r\n          Select the type of process you need\r\n        <\/p>\r\n\r\n        <div class=\"btn-group\" id=\"opcionesBtns\"><\/div>\r\n\r\n        <div id=\"subtipoContainer\" style=\"display: none; margin-top: 10px\">\r\n          <hr class=\"separador\" \/>\r\n          <p class=\"subtitulo\" id=\"subtituloSubtipo\">\r\n            Choose the applicable situation type:\r\n          <\/p>\r\n          <div class=\"btn-group\" id=\"subtipoBtns\"><\/div>\r\n        <\/div>\r\n\r\n        <div id=\"premiumContainer\" style=\"margin-top: 12px; display: none\">\r\n          <p>\r\n            <strong>Do you want to include premium processing?<\/strong> Additional cost: $<span id=\"premiumCosto\">0.00<\/span>\r\n          <\/p>\r\n          <div class=\"btn-group\" id=\"premiumBtns\"><\/div>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"cotizador-step\" id=\"paso3\" style=\"display: none\">\r\n        <h3 data-text=\"Costos Federales\"><\/h3>\r\n        <div id=\"contenidoPaso3\"><\/div>\r\n      <\/div>\r\n      <div id=\"paso4\" class=\"cotizador-step\" style=\"display: none\">\r\n        <h3 data-text=\"Dependientes\"><\/h3>\r\n\r\n        <p class=\"subtitulo\">Do you want to add dependents to the request?<\/p>\r\n        <div class=\"btn-group\" id=\"preguntaDependientes\">\r\n          <button type=\"button\" onclick=\"mostrarDependientes(true, this)\">\r\n            YES\r\n          <\/button>\r\n          <button type=\"button\" onclick=\"mostrarDependientes(false, this)\">\r\n            NO\r\n          <\/button>\r\n        <\/div>\r\n        <p class=\"notas\">\r\n          <strong>Clarification note:<\/strong> The dependent is understood to be the married partner or the unmarried children under 21 years of age of the main applicant.\r\n        <\/p>\r\n\r\n        <div id=\"dependientesContainer\" style=\"display: none; margin-top: 15px\">\r\n          <p class=\"subtitulo\">\r\n            Select the dependents you will include in the application\r\n          <\/p>\r\n          <div class=\"btn-group\">\r\n            <button\r\n              class=\"dependiente-btn\"\r\n              onclick=\"seleccionarDependiente(1, this)\"\r\n            >\r\n              Dependent 1\r\n            <\/button>\r\n            <button\r\n              class=\"dependiente-btn\"\r\n              onclick=\"seleccionarDependiente(2, this)\"\r\n            >\r\n              Dependent 2\r\n            <\/button>\r\n            <button\r\n              class=\"dependiente-btn\"\r\n              onclick=\"seleccionarDependiente(3, this)\"\r\n            >\r\n              Dependent 3\r\n            <\/button>\r\n            <button\r\n              class=\"dependiente-btn\"\r\n              onclick=\"seleccionarDependiente(4, this)\"\r\n            >\r\n              Dependent 4\r\n            <\/button>\r\n          <\/div>\r\n          <p class=\"nota\" style=\"display: none\">\r\n            + $420 USD per additional dependent if performed\r\n            <strong>Change of Status.<\/strong>\r\n          <\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"cotizador-step cotizador-resumen\">\r\n        <h3>Investment Summary<\/h3>\r\n        <div class=\"resumen-totales\">\r\n          <div class=\"resumen-item\">\r\n            <span class=\"resumen-nombre\">AsisVisa Fees:<\/span>\r\n            <span class=\"resumen-valor\" id=\"honorarios\">$0.00<\/span>\r\n          <\/div>\r\n          <div class=\"resumen-item\">\r\n            <span class=\"resumen-nombre\">Federal Fees:<\/span>\r\n            <span class=\"resumen-valor\" id=\"fees\">$0.00<\/span>\r\n          <\/div>\r\n          <div class=\"resumen-item total\">\r\n            <span class=\"resumen-nombre\">Total:<\/span>\r\n            <span class=\"resumen-valor\" id=\"total\">$0.00<\/span>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"detalle-costos\" id=\"detalleCostos\"><\/div>\r\n\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn-resumen\"\r\n          id=\"btnPlanesPago\"\r\n          onclick=\"mostrarLineaTiempo(servicios[document.getElementById('servicio').value])\"\r\n        >\r\n          View payment plans\r\n        <\/button>\r\n      <\/div>\r\n\r\n      <div id=\"modalLineaTiempo\" class=\"modal-timeline\" style=\"display: none\">\r\n        <div class=\"modal-content\">\r\n          <span class=\"close\" onclick=\"cerrarModal()\">\u00d7<\/span>\r\n          <div style=\"align-items: center; gap: 10px\">\r\n            <h3 style=\"margin: 0; font-weight: bold;\">Payment Schedule -<\/h3>\r\n            <h3 id=\"visaSeleccionada\" style=\"margin: 0; font-weight: bold;\"><\/h3>\r\n          <\/div>\r\n\r\n          <div style=\"align-items: center; gap: 10px; \">\r\n            <h3 style=\"margin: 0; font-size: 14px; font-weight: bold;\">Selected Process:\r\n            <\/h3>\r\n            <h3 id=\"procesoSeleccionado\" style=\"margin: 0; font-size: 14px; font-weight: bold;\"><\/h3>\r\n          <\/div>\r\n\r\n          <p class=\"modal-info\" id=\"infoPlanPago\"><\/p>\r\n\r\n          <div id=\"timelineContainer\" class=\"timeline-container\"><\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <style>\r\n      body,\r\n      .cotizador-container {\r\n        font-family: \"Montserrat\", sans-serif;\r\n        background: #fff;\r\n        color: #333;\r\n        box-sizing: border-box;\r\n      }\r\n\r\n      .cotizador-container {\r\n        max-width: 900px;\r\n        margin: auto;\r\n      }\r\n\r\n      h2 {\r\n        text-align: center;\r\n        font-size: 30px;\r\n        margin-bottom: 10px;\r\n        color: #1f2937;\r\n        font-weight: 700;\r\n      }\r\n      h3 {\r\n        margin-top: 5px;\r\n        margin-bottom: 5px;\r\n        font-size: 20px;\r\n        color: #071330;\r\n        font-weight: 700;\r\n      }\r\n      p.intro {\r\n        text-align: center;\r\n        margin-bottom: 30px;\r\n        color: #7a7a7a;\r\n        font-size: 18px;\r\n        font-weight: 500;\r\n      }\r\n      p.subtitulo {\r\n        color: #7a7a7a;\r\n        font-size: 15px;\r\n        margin-bottom: 10px;\r\n        font-weight: 500;\r\n      }\r\n      p.notas {\r\n        color: #1f2937;\r\n        font-size: 15px;\r\n        margin-bottom: 10px;\r\n        margin-top: 15px;\r\n        font-weight: 500;\r\n      }\r\n      .notaPlanes {\r\n        margin-top: 20px;\r\n         margin-bottom: 15px;\r\n        font-weight: bold;\r\n        color: #071330;\r\n        border-radius: 6px;\r\n        text-align: center;\r\n      }\r\n\r\n      .resumen-acciones {\r\n        text-align: center;\r\n        margin-top: 25px;\r\n      }\r\n      .resumen-acciones h4 {\r\n        font-size: 18px;\r\n        color: #f59e0b;\r\n        font-weight: 700;\r\n        margin-bottom: 12px;\r\n        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);\r\n      }\r\n      \r\n     button.btn-resumen,\r\ninput.btn-resumen,\r\n.btn-resumen {\r\n        background: linear-gradient(90deg, #f59e0b, #facc15);\r\n        color: #071330;\r\n        font-weight: 700;\r\n        font-size: 16px;\r\n        padding: 14px 25px;\r\n        border: none;\r\n        border-radius: 12px;\r\n        cursor: pointer;\r\n        width: 100%;\r\n        max-width: 350px;\r\n        margin: 0 auto;\r\n        display: block;\r\n        text-align: center;\r\n        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);\r\n        transition: all 0.3s ease;\r\n      }\r\n\r\n      button.btn-resumen:hover,\r\ninput.btn-resumen:hover,\r\n.btn-resumen:hover {\r\n        background: linear-gradient(90deg, #fbbf24, #fcd34d);\r\n        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);\r\n      }\r\n\r\n      button.btn-resumen:active,\r\ninput.btn-resumen:active,\r\n.btn-resumen:active {\r\n        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\r\n      }\r\n\r\n     .modal-timeline {\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  background: rgba(0,0,0,0.6);\r\n  z-index: 9999;\r\n  overflow: auto;\r\n}\r\n.modal-content {\r\n  background: #fff;\r\n  max-width: 900px;\r\n  margin: 50px auto;\r\n  border-radius: 16px;\r\n  padding: 25px;\r\n  position: relative;\r\n}\r\n.close {\r\n  position: absolute;\r\n  top: 15px;\r\n  right: 20px;\r\n  font-size: 24px;\r\n  cursor: pointer;\r\n}\r\n\r\n.modal-content h3 {\r\n  margin: 0;\r\n  font-weight: 500;\r\n  color: #111827;\r\n  display: inline-block;\r\n  padding-top: 5px;\r\n}\r\n.modal-content h6 {\r\n  margin: 0;\r\n  font-weight: 500;\r\n  color: #111827;\r\n}\r\n\r\n.modal-info {\r\n  background: #fffbeb;\r\n  border-left: 5px solid #fcc929;\r\n  padding: 12px 16px;\r\n  margin: 15px 0;\r\n  font-size: 15px;\r\n  line-height: 1.6;\r\n  color: #374151;\r\n  border-radius: 8px;\r\n  text-align: justify;\r\n  font-weight: 500;\r\n}\r\n.strong-info {\r\n  color: #f59e0b;\r\n}\r\n\r\n.btn-group { display: flex; gap: 10px; margin-top: 10px; }\r\n.btn-group button {\r\n  flex: 1;\r\n  padding: 10px;\r\n  border-radius: 12px;\r\n  border: 1px solid #d1d5db;\r\n  background: #f9fafb;\r\n  color: #111827;\r\n  font-weight: 500;\r\n  cursor: pointer;\r\n  transition: 0.2s;\r\n}\r\n.btn-group button.active {\r\n  background: #071330;\r\n  color: #fff;\r\n  border-color: #071330;\r\n}\r\n.btn-group button:hover:not(.active) {\r\n  background: #0a1b4d;\r\n  color: #fff;\r\n}\r\n\r\n.timeline-container { display: block; position: relative; gap: 80px; }\r\n.timeline-line {\r\n  position: absolute;\r\n  left: 42px;\r\n  top: 70px;\r\n  bottom: 80px;\r\n  width: 5px;\r\n  background: linear-gradient(to bottom, #fcc929, #facc15);\r\n  border-radius: 3px;\r\n  z-index: 0;\r\n  margin-left: -20px;\r\n}\r\n.timeline-item {\r\n  position: relative;\r\n  background: #fffbeb;\r\n  border: 2px solid #fcc929;\r\n  border-radius: 16px;\r\n  padding: 15px 20px;\r\n  margin-bottom: 25px;\r\n  margin-left: 70px;\r\n  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);\r\n  word-wrap: break-word;\r\n  transition: transform 0.2s, box-shadow 0.2s;\r\n}\r\n.timeline-item:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.2); }\r\n.timeline-item::before {\r\n  content: attr(data-tiempo);\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  position: absolute;\r\n  left: -83px;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n  width: 75px;\r\n  height: 75px;\r\n  line-height: 50px;\r\n  text-align: center;\r\n  background: #fcc929;\r\n  color: #fff;\r\n  font-weight: 700;\r\n  font-size: 14px;\r\n  border-radius: 50%;\r\n  border: 3px solid #fff;\r\n  z-index: 1;\r\n  box-shadow: 0 4px 12px rgba(0,0,0,0.2);\r\n}\r\n.timeline-item h5 {\r\n  margin: 10px 0 5px;\r\n  font-size: 16px;\r\n  font-weight: 700;\r\n  color: #333;\r\n  padding-top: 0px;\r\n}\r\nh5 {\r\n  margin: 10px 0 5px;\r\n  font-size: 16px;\r\n  letter-spacing: normal;\r\n  text-transform: none;\r\n}\r\n.timeline-item ul { margin: 0; padding-left: 20px; font-size: 14px; }\r\n.timeline-item ul li { margin-bottom: 4px; font-weight: 500; }\r\n.timeline-item h5.total { font-weight: 600; color: #f59e0b; }\r\n\r\n      .cotizador-step {\r\n        background: #fff;\r\n        border-radius: 16px;\r\n        padding: 25px;\r\n        margin-bottom: 20px;\r\n        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);\r\n        transition: transform 0.2s;\r\n\r\n        border: 1px solid #c4c2c2;\r\n      }\r\n\r\n      .categoria-empleados {\r\n        margin-top: 5px;\r\n        margin-bottom: 5px;\r\n        font-size: 16px;\r\n      }\r\n\r\n      .separador {\r\n        margin: 12px 0;\r\n        border: none;\r\n        border-top: 1px solid #e5e7eb;\r\n      }\r\n\r\n      select {\r\n        width: 100%;\r\n        padding: 12px 16px;\r\n        font-size: 16px;\r\n        border-radius: 12px;\r\n        border: 1px solid #d1d5db;\r\n        background-color: #f9fafb;\r\n        color: #071330;\r\n        cursor: pointer;\r\n        appearance: none;\r\n        -webkit-appearance: none;\r\n        -moz-appearance: none;\r\n        background-image: url(\"data:image\/svg+xml;utf8,<svg fill='%23666' height='20' viewBox='0 0 24 24' width='20' xmlns='http:\/\/www.w3.org\/2000\/svg'><path d='M7 10l5 5 5-5z'\/><\/svg>\");\r\n        background-repeat: no-repeat;\r\n        background-position: right 12px center;\r\n        background-size: 20px;\r\n        transition: border-color 0.3s, box-shadow 0.3s;\r\n      }\r\n      select:hover {\r\n        border-color: #071330;\r\n        box-shadow: 0 0 0 3px rgba(7, 19, 48, 0.1);\r\n      }\r\n      select:focus {\r\n        outline: none;\r\n        border-color: #071330;\r\n        box-shadow: 0 0 0 3px rgba(7, 19, 48, 0.2);\r\n      }\r\n\r\n      .btn-group {\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        gap: 10px;\r\n      }\r\n      .btn-group button,\r\n      .opcion-btn,\r\n      .premium-btn,\r\n      .dependiente-btn {\r\n        flex: 1 1 calc(50% - 10px);\r\n        padding: 12px;\r\n        border-radius: 12px;\r\n        border: 1px solid #d1d5db;\r\n        background: #f9fafb;\r\n        color: #071330;\r\n        cursor: pointer;\r\n        font-size: 16px;\r\n        transition: 0.2s;\r\n        font-weight: 500;\r\n      }\r\n      .btn-group button.active,\r\n      .opcion-btn.active,\r\n      .premium-btn.active,\r\n      .dependiente-btn.active {\r\n        background: #071330;\r\n        color: #fff;\r\n        border-color: #071330;\r\n      }\r\n      .btn-group button:hover:not(.active),\r\n      .opcion-btn:hover:not(.active),\r\n      .premium-btn:hover:not(.active),\r\n      .dependiente-btn:hover:not(.active) {\r\n        background: #0a1b4d;\r\n        color: #fff;\r\n        border-color: #0a1b4d;\r\n      }\r\n\r\n      .radio-card {\r\n        display: flex;\r\n        align-items: flex-start;\r\n        gap: 15px;\r\n        border: 1px solid #d1d5db;\r\n        border-radius: 12px;\r\n        padding: 15px;\r\n        margin-bottom: 10px;\r\n        transition: 0.2s;\r\n        cursor: pointer;\r\n        background: #f9fafb;\r\n      }\r\n      .radio-card:hover {\r\n        background: #e5e7eb;\r\n      }\r\n      .radio-card input {\r\n        margin-top: 3px;\r\n        cursor: pointer;\r\n      }\r\n      .radio-card div {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 5px;\r\n      }\r\n\r\n      .radio-card span {\r\n        font-weight: 400;\r\n      }\r\n      .radio-card span.total {\r\n        font-weight: 600;\r\n      }\r\n\r\n      .cotizador-resumen {\r\n        border: 2px solid #facc15;\r\n        background: #fffbeb;\r\n        border-radius: 16px;\r\n        padding: 25px;\r\n      }\r\n      .resumen-totales {\r\n        display: flex;\r\n        justify-content: space-around;\r\n        gap: 20px;\r\n        margin-bottom: 20px;\r\n      }\r\n      .resumen-item {\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n      }\r\n      .resumen-nombre {\r\n        font-weight: bold;\r\n        font-size: 18px;\r\n        color: #071330;\r\n      }\r\n      .resumen-valor {\r\n        font-size: 17px;\r\n        color: #1f2937;\r\n        font-weight: 500;\r\n      }\r\n      .resumen-item.total .resumen-valor {\r\n        color: #f59e0b;\r\n        font-weight: bold;\r\n      }\r\n      .resumen-section {\r\n        border-bottom: 1px solid #e5e7eb;\r\n        padding: 8px 0;\r\n      }\r\n      .resumen-section h4 {\r\n        margin: 0 0 4px 0;\r\n        font-size: 14px;\r\n        font-weight: bold;\r\n        color: #071330;\r\n      }\r\n      .resumen-section p,\r\n      .resumen-section li {\r\n        margin: 2px 0;\r\n        font-size: 0.95rem;\r\n        font-weight: 500;\r\n      }\r\n      .resumen-section ul {\r\n        padding-left: 20px;\r\n        margin: 2px 0;\r\n      }\r\n      .nota {\r\n        margin-top: 10px;\r\n        font-size: 12px;\r\n        color: #dc2626;\r\n        font-weight: bold;\r\n        text-align: left;\r\n      }\r\n      .nota1 {\r\n        margin-top: 10px;\r\n        font-size: 12px;\r\n        color: #dc2626;\r\n        font-weight: bold;\r\n        text-align: left;\r\n      }\r\n      .opcion-btn.cambio-estatus {\r\n        position: relative;\r\n        padding-bottom: 24px;\r\n        overflow: visible;\r\n      }\r\n\r\n      .opcion-btn.cambio-estatus::after {\r\n        content: \"\";\r\n        position: absolute;\r\n        left: 90px;\r\n        right: 90px;\r\n        height: 9px;\r\n        bottom: 6px;\r\n        background-repeat: no-repeat;\r\n        background-position: center;\r\n        background-size: 100% 100%;\r\n\r\n        background-image: url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 200 8' preserveAspectRatio='none'><polygon points='0,4 8,0 8,2 192,2 192,0 200,4 192,8 192,6 8,6 8,8' fill='%23071330'\/><\/svg>\");\r\n        pointer-events: none;\r\n      }\r\n\r\n      .opcion-btn.cambio-estatus:hover::after,\r\n      .opcion-btn.cambio-estatus.active::after {\r\n        background-image: url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 200 8' preserveAspectRatio='none'><polygon points='0,4 8,0 8,2 192,2 192,0 200,4 192,8 192,6 8,6 8,8' fill='%23ffffff'\/><\/svg>\");\r\n      }\r\n\r\n      @media (max-width: 600px) {\r\n        h2 {\r\n          font-size: 22px;\r\n        }\r\n        p.intro {\r\n          font-size: 16px;\r\n        }\r\n        .btn-group button {\r\n          flex: 1 1 100%;\r\n        }\r\n        .resumen-totales {\r\n          flex-direction: column;\r\n          align-items: center;\r\n          gap: 15px;\r\n        }\r\n        .radio-card {\r\n          flex-direction: column;\r\n          align-items: flex-start;\r\n          gap: 8px;\r\n          padding: 12px;\r\n        }\r\n        .modal-content {\r\n    max-width: 95%;\r\n    margin: 20px auto;\r\n    padding: 15px;\r\n    border-radius: 12px;\r\n  }\r\n\r\n  .modal-content h3 {\r\n    font-size: 18px;\r\n  }\r\n  .modal-content h6 {\r\n    font-size: 14px;\r\n  }\r\n\r\n  .btn-group {\r\n    flex-direction: column; \r\n    gap: 8px;\r\n  }\r\n  .btn-group button {\r\n    font-size: 14px;\r\n    padding: 8px;\r\n  }\r\n\r\n  .timeline-line {\r\n    left: 17px;\r\n    top: 65px;\r\n    bottom: 110px;\r\n    width: 4px;\r\n    margin-left: 0;\r\n  }\r\n  .timeline-item {\r\n    margin-left: 50px;\r\n    padding: 12px 15px;\r\n    font-size: 14px;\r\n  }\r\n  .timeline-item::before {\r\n    left: -55px;\r\n    width: 45px;\r\n    height: 45px;\r\n    font-size: 12px;\r\n    line-height: normal;\r\n    padding: 5px;\r\n  }\r\n  .timeline-item h5 {\r\n    font-size: 14px;\r\n  }\r\n  .timeline-item ul {\r\n    padding-left: 15px;\r\n    font-size: 13px;\r\n  }\r\n  .timeline-item ul li {\r\n    margin-bottom: 2px;\r\n  }\r\n  .timeline-item h5.total {\r\n    font-size: 14px;\r\n  }\r\n\r\n  \/* Caja de info *\/\r\n  .modal-info {\r\n    font-size: 14px;\r\n    padding: 10px 12px;\r\n  }\r\n      }\r\n      @media (max-width: 900px) {\r\n        h2 {\r\n          font-size: 24px;\r\n        }\r\n        p.intro {\r\n          font-size: 16px;\r\n        }\r\n        p.subtitulo {\r\n          font-size: 14px;\r\n        }\r\n        h3 {\r\n          font-size: 18px;\r\n        }\r\n        .btn-group button {\r\n          flex: 1 1 100%;\r\n        }\r\n      }\r\n    <\/style>\r\n\r\n  <script>\r\n      let servicios = [];\r\n      let tipoSeleccionado = null;\r\n      let premiumSeleccionado = false;\r\n      let dependientes = 1;\r\n      let subtipoSeleccionado = null;\r\n      let seleccionUsuario = {\r\n        agregados: [],\r\n        visa: \"\",\r\n      };\r\n      let descripcionPago = \"\";\r\n\r\n      async function cargarServicios() {\r\n        try {\r\n          const res = await fetch(\"https:\/\/api.asisvisa.com\/api\/price-list\");\r\n          servicios = await res.json();\r\n\r\n          servicios.sort((a, b) => a.nombre.localeCompare(b.nombre));\r\n\r\n          const select = document.getElementById(\"servicio\");\r\n          select.innerHTML =\r\n            '<option value=\"\" disabled selected>Seleccione un servicio de inmigraci\u00f3n<\/option>';\r\n          const btnPlanes = document.querySelector(\".btn-resumen\");\r\n          btnPlanes.style.display = \"none\";\r\n          servicios.forEach((servicio, servicioIndex) => {\r\n            const opt = document.createElement(\"option\");\r\n            opt.value = servicioIndex;\r\n            opt.textContent = servicio.nombre;\r\n            select.appendChild(opt);\r\n          });\r\n        } catch (err) {\r\n          console.error(\"Error cargando servicios:\", err);\r\n          document.getElementById(\"servicio\").innerHTML =\r\n            '<option value=\"\">Error al cargar servicios<\/option>';\r\n        }\r\n      }\r\n\r\n      function seleccionarServicio() {\r\n        const servicioIndex = document.getElementById(\"servicio\").value;\r\n        if (servicioIndex === \"\") return;\r\n        const visa = servicios[servicioIndex];\r\n        const btnPlanes = document.querySelector(\".btn-resumen\");\r\n        btnPlanes.style.display = \"none\";\r\n\r\n        agregarNotaResumen(false);\r\n        dependientes = 0;\r\n        descripcionPago = visa.descripcion_pago || \"\";\r\n        const paso4 = document.getElementById(\"paso4\");\r\n        const contDep = document.getElementById(\"dependientesContainer\");\r\n        paso4.style.display = \"none\";\r\n        contDep.style.display = \"none\";\r\n        contDep\r\n          .querySelectorAll(\".dependiente-btn\")\r\n          .forEach((b) => b.classList.remove(\"active\"));\r\n        document\r\n          .querySelectorAll(\"#preguntaDependientes button\")\r\n          .forEach((b) => b.classList.remove(\"active\"));\r\n\r\n        if (visa.nombre && visa.nombre.toLowerCase().includes(\"ciudadan\u00eda\")) {\r\n          paso4.style.display = \"none\";\r\n        }\r\n\r\n        document.getElementById(\"paso2\").style.display = \"none\";\r\n        document.getElementById(\"paso3\").style.display = \"none\";\r\n\r\n        tipoSeleccionado = null;\r\n        premiumSeleccionado = false;\r\n        subtipoSeleccionado = null;\r\n\r\n        document.getElementById(\"honorarios\").innerText = \"0.00\";\r\n        document.getElementById(\"fees\").innerText = \"0.00\";\r\n        document.getElementById(\"total\").innerText = \"0.00\";\r\n        document.getElementById(\"detalleCostos\").innerHTML = \"\";\r\n\r\n        const tieneFeeFederal = (visa.fees || []).some(\r\n          (f) => f.tipo === \"fee_federal\"\r\n        );\r\n        if (tieneFeeFederal) {\r\n          tipoSeleccionado = \"fee_federal\";\r\n          mostrarPaso3(visa, tipoSeleccionado);\r\n\r\n          if (!visa.nombre.toLowerCase().includes(\"ciudadan\u00eda\")) {\r\n            mostrarPaso4(visa, tipoSeleccionado);\r\n          }\r\n\r\n          document.getElementById(\"paso3\").style.display = \"block\";\r\n        } else {\r\n          document.getElementById(\"paso2\").style.display = \"block\";\r\n          mostrarPaso2(visa);\r\n        }\r\n\r\n        actualizarNumerosPasos();\r\n\r\n        honorarios = visa.honorarios || 0;\r\n        procesamientoPremium = visa.procesamiento_premium || 0;\r\n        honorariosDependiente = visa.honorarios_dependiente || 0;\r\n      }\r\n\r\n      function actualizarNumerosPasos() {\r\n        let pasoNum = 1;\r\n\r\n        const paso1 = document.getElementById(\"paso1\");\r\n        if (paso1) {\r\n          const h3 = paso1.querySelector(\"h3\");\r\n          if (h3) h3.innerText = \"Paso 1: Seleccione el servicio\";\r\n        }\r\n\r\n        const pasosIntermedios = [\"paso2\", \"paso3\", \"paso4\"];\r\n        pasosIntermedios.forEach((id) => {\r\n          const paso = document.getElementById(id);\r\n          if (paso && paso.style.display !== \"none\") {\r\n            const titulo = paso.querySelector(\"h3\");\r\n            if (titulo && titulo.dataset.text) {\r\n              pasoNum++;\r\n              titulo.innerText = \"Paso \" + pasoNum + \": \" + titulo.dataset.text;\r\n            }\r\n          }\r\n        });\r\n      }\r\n      function labelTipo(tipoProceso) {\r\n        const map = {\r\n          cambio_estatus: \"Cambio de Estatus\",\r\n          proceso_consular: \"Proceso Consular\",\r\n          ajuste_estatus: \"Ajuste de Estatus\",\r\n          fee_federal: \"Fee Federal\",\r\n          Asilo: \"Asilo\",\r\n          OPT: \"OPT\",\r\n          J1: \"J1\",\r\n          E2: \"E2\",\r\n          perdida: \"P\u00e9rdida\",\r\n          error_documento: \"Error en el documento\",\r\n          error_USCIS: \"Error de USCIS\",\r\n          nunca_documento: \"Documento nunca lleg\u00f3\",\r\n          otros: \"Otro\",\r\n          B1_F1: \"B1\/B2 A F1\",\r\n          F1_J1: \"F1 A J1\",\r\n          B1_J1: \"B1\/B2 A J1\",\r\n          F2_F1: \"F2 A F1\",\r\n        };\r\n        return map[tipoProceso] || tipoProceso;\r\n      }\r\n\r\n      function mostrarPaso2(visa) {\r\n        const cont = document.getElementById(\"opcionesBtns\");\r\n        cont.innerHTML = \"\";\r\n        const tiposProceso = Array.from(\r\n          new Set((visa.fees || []).map((f) => f.tipo).filter(Boolean))\r\n        );\r\n\r\n        if (tiposProceso.length === 0) {\r\n          cont.innerHTML =\r\n            \"<p>No hay opciones de proceso para este servicio.<\/p>\";\r\n        } else {\r\n          tiposProceso.forEach((tipoProceso) => {\r\n            const btn = document.createElement(\"button\");\r\n            btn.className = \"opcion-btn\";\r\n            btn.type = \"button\";\r\n            btn.textContent = labelTipo(tipoProceso);\r\n            btn.onclick = () => seleccionarOpcion(btn, tipoProceso);\r\n\r\n            if (visa.nombre && visa.nombre.includes(\"Cambio de Estatus\")) {\r\n              btn.classList.add(\"cambio-estatus\");\r\n            }\r\n\r\n            cont.appendChild(btn);\r\n          });\r\n        }\r\n\r\n        document.getElementById(\"subtipoBtns\").innerHTML = \"\";\r\n        document.getElementById(\"subtipoContainer\").style.display = \"none\";\r\n        document.getElementById(\"subtituloSubtipo\").style.display = \"none\";\r\n        const premiumCont = document.getElementById(\"premiumContainer\");\r\n        const premiumCostSpan = document.getElementById(\"premiumCosto\");\r\n        const premiumBtns = document.getElementById(\"premiumBtns\");\r\n        premiumBtns.innerHTML = \"\";\r\n\r\n        if (\r\n          visa.procesamiento_premium &&\r\n          Number(visa.procesamiento_premium) > 0\r\n        ) {\r\n          premiumCont.style.display = \"block\";\r\n          premiumCostSpan.textContent = Number(\r\n            visa.procesamiento_premium\r\n          ).toFixed(2);\r\n\r\n          [\"SI\", \"NO\"].forEach((val) => {\r\n            const b = document.createElement(\"button\");\r\n            b.className = \"premium-btn\";\r\n            b.type = \"button\";\r\n            b.textContent = val;\r\n            b.onclick = () => seleccionarPremium(b, val === \"SI\");\r\n            premiumBtns.appendChild(b);\r\n          });\r\n\r\n          premiumSeleccionado = false;\r\n          document\r\n            .querySelectorAll(\".premium-btn\")\r\n            .forEach((x) => x.classList.remove(\"active\"));\r\n        } else {\r\n          premiumCont.style.display = \"none\";\r\n          premiumSeleccionado = false;\r\n        }\r\n      }\r\n\r\n      function seleccionarOpcion(btn, tipoProceso) {\r\n        document\r\n          .querySelectorAll(\".opcion-btn\")\r\n          .forEach((b) => b.classList.remove(\"active\"));\r\n        btn.classList.add(\"active\");\r\n        tipoSeleccionado = tipoProceso;\r\n\r\n        subtipoSeleccionado = null;\r\n        document.getElementById(\"subtipoBtns\").innerHTML = \"\";\r\n        document.getElementById(\"paso3\").style.display = \"none\";\r\n\r\n        const index = document.getElementById(\"servicio\").value;\r\n        if (index !== \"\") {\r\n          const visa = servicios[index];\r\n\r\n          const mostrarSubtipos =\r\n            visa.nombre && visa.nombre.includes(\"Reemplazo Permiso de Trabajo\");\r\n\r\n          if (mostrarSubtipos) {\r\n            mostrarSubtipoBtns(visa, tipoProceso);\r\n          } else {\r\n            mostrarPaso3(visa, tipoProceso);\r\n            mostrarPaso4(visa, tipoProceso);\r\n          }\r\n          document.getElementById(\"dependientesContainer\").style.display =\r\n            \"none\";\r\n          document\r\n            .querySelectorAll(\"#preguntaDependientes button\")\r\n            .forEach((b) => b.classList.remove(\"active\"));\r\n          dependientes = 0;\r\n        }\r\n        if (typeof calcularTotal === \"function\") calcularTotal();\r\n      }\r\n\r\n      function mostrarSubtipoBtns(visa, tipoProceso) {\r\n        const container = document.getElementById(\"subtipoContainer\");\r\n        const cont = document.getElementById(\"subtipoBtns\");\r\n        cont.innerHTML = \"\";\r\n\r\n        const proceso = visa.fees.find((f) => f.tipo === tipoProceso);\r\n        if (!proceso || !proceso.items) {\r\n          container.style.display = \"none\";\r\n          return;\r\n        }\r\n\r\n        const subtipos = Array.from(\r\n          new Set(proceso.items.map((i) => i.subtipo).filter(Boolean))\r\n        );\r\n\r\n        if (subtipos.length === 0) {\r\n          container.style.display = \"none\";\r\n          return;\r\n        }\r\n\r\n        container.style.display = \"block\";\r\n        document.getElementById(\"subtituloSubtipo\").style.display = \"block\";\r\n        document.getElementById(\"subtituloSubtipo\").textContent =\r\n          \"Elija el tipo de situaci\u00f3n aplicable:\";\r\n\r\n        const mapLabel = {\r\n          Asilo: \"Asilo\",\r\n          OPT: \"OPT\",\r\n          J1: \"J1\",\r\n          E2: \"E2\",\r\n          ajuste_estatus: \"Ajuste de Estatus\",\r\n        };\r\n\r\n        subtipos.forEach((st) => {\r\n          const b = document.createElement(\"button\");\r\n          b.type = \"button\";\r\n          b.className = \"subtipo-btn\";\r\n          b.textContent = mapLabel[st] || st;\r\n          b.onclick = () => {\r\n            document\r\n              .querySelectorAll(\"#subtipoBtns .subtipo-btn\")\r\n              .forEach((x) => x.classList.remove(\"active\"));\r\n            b.classList.add(\"active\");\r\n            subtipoSeleccionado = st;\r\n\r\n            const index = document.getElementById(\"servicio\").value;\r\n            const visaSel = servicios[index];\r\n            mostrarPaso3(visaSel, tipoProceso);\r\n            mostrarPaso4(visaSel, tipoProceso);\r\n            if (typeof calcularTotal === \"function\") calcularTotal();\r\n          };\r\n          cont.appendChild(b);\r\n        });\r\n      }\r\n\r\n      function seleccionarPremium(btn, valor) {\r\n        document\r\n          .querySelectorAll(\".premium-btn\")\r\n          .forEach((b) => b.classList.remove(\"active\"));\r\n        btn.classList.add(\"active\");\r\n        premiumSeleccionado = valor;\r\n\r\n        if (typeof calcularTotal === \"function\") calcularTotal();\r\n      }\r\n\r\n      function mostrarPaso3(visa, tipoSeleccionado) {\r\n        const paso3 = document.getElementById(\"paso3\");\r\n        const cont = document.getElementById(\"contenidoPaso3\");\r\n        paso3.style.display = \"block\";\r\n        actualizarNumerosPasos();\r\n\r\n        let items =\r\n          visa.fees.find((f) => f.tipo === tipoSeleccionado)?.items || [];\r\n\r\n        if (subtipoSeleccionado) {\r\n          items = items.filter(\r\n            (i) =>\r\n              (i.subtipo && i.subtipo === subtipoSeleccionado) || !i.subtipo\r\n          );\r\n        }\r\n\r\n        let html = \"\";\r\n\r\n        const opcionales = items.filter(\r\n          (item) => item.categoria === \"opcional\"\r\n        );\r\n        const terceros = items.filter((item) => item.categoria === \"terceros\");\r\n        const normales = items.filter(\r\n          (item) =>\r\n            !item.categoria ||\r\n            (item.categoria !== \"opcional\" && item.categoria !== \"terceros\")\r\n        );\r\n\r\n        const tieneCategorias = normales.some(\r\n          (item) =>\r\n            item.categoria === \"mas_empleados\" ||\r\n            item.categoria === \"menos_empleados\"\r\n        );\r\n\r\n        if (tieneCategorias) {\r\n          html +=\r\n            '<p class=\"subtitulo\">De acuerdo con el n\u00famero de empleados que tenga el empleador solicitante, se determinar\u00e1 la tarifa que debe cancelar. A continuaci\u00f3n, le presentamos los valores correspondientes.<\/p>';\r\n          const menos = normales.filter(\r\n            (item) => item.categoria === \"menos_empleados\"\r\n          );\r\n          const mas = normales.filter(\r\n            (item) => item.categoria === \"mas_empleados\"\r\n          );\r\n\r\n          if (menos.length) {\r\n            let totalMenos = menos.reduce((sum, i) => sum + i.valor, 0);\r\n            let contenido = menos\r\n              .map(\r\n                (i) => `<span>${i.descripcion} $${i.valor.toFixed(2)}<\/span>`\r\n              )\r\n              .join(\"\");\r\n            html += `<p class=\"categoria-empleados\"><strong>Menos de 25 Empleados en Estados Unidos<\/strong><\/p>\r\n        <label class=\"radio-card\">\r\n          <input type=\"radio\" name=\"proceso\" value=\"${totalMenos}\" data-categoria=\"menos_empleados\" onchange=\"calcularTotal()\"> \r\n          <div>${contenido}<span><strong>Total: $${totalMenos.toFixed(\r\n              2\r\n            )}<\/strong><\/span><\/div>\r\n        <\/label>\r\n      `;\r\n          }\r\n\r\n          if (mas.length) {\r\n            let totalMas = mas.reduce((sum, i) => sum + i.valor, 0);\r\n            let contenido = mas\r\n              .map(\r\n                (i) => `<span>${i.descripcion} $${i.valor.toFixed(2)}<\/span>`\r\n              )\r\n              .join(\"\");\r\n            html += `<p class=\"categoria-empleados\"><strong>M\u00e1s de 25 Empleados en Estados Unidos<\/strong><\/p>\r\n        <label class=\"radio-card\">\r\n          <input type=\"radio\" name=\"proceso\" value=\"${totalMas}\"  data-categoria=\"mas_empleados\"  onchange=\"calcularTotal()\"> \r\n          <div>${contenido}<span><strong>Total: $${totalMas.toFixed(\r\n              2\r\n            )}<\/strong><\/span><\/div>\r\n        <\/label>\r\n      `;\r\n          }\r\n        } else {\r\n          let total = normales.reduce((sum, i) => sum + i.valor, 0);\r\n          let contenido = normales\r\n            .map((i) => `<span>${i.descripcion} $${i.valor.toFixed(2)}<\/span>`)\r\n            .join(\"\");\r\n          html +=\r\n            '<p class=\"subtitulo\">A continuaci\u00f3n, le indicamos los costos federales asociados a su solicitud.<\/p>';\r\n          html += `\r\n      <label class=\"radio-card\">\r\n        <input type=\"radio\" name=\"proceso\" value=\"${total}\" onchange=\"calcularTotal()\"> \r\n        <div>${contenido}<span><strong>Total: $${total.toFixed(\r\n            2\r\n          )}<\/strong><\/span><\/div>\r\n      <\/label>\r\n    `;\r\n        }\r\n        if (terceros.length) {\r\n          html += `<p class=\"categoria-empleados\"><strong>Pago a Terceros - Obligatorio<\/strong><\/p>`;\r\n          terceros.forEach((item) => {\r\n            html += `\r\n      <label class=\"radio-card\">\r\n        <input type=\"checkbox\" name=\"terceros\" data-valor=\"${\r\n          item.valor\r\n        }\" onchange=\"calcularTotal()\"> \r\n        <div><span>${item.descripcion} $${item.valor.toFixed(2)}<\/span><\/div>\r\n      <\/label>\r\n    `;\r\n          });\r\n        }\r\n        if (opcionales.length) {\r\n          html += `<p class=\"categoria-empleados\"><strong>Extras Opcionales<\/strong><\/p>`;\r\n          opcionales.forEach((item) => {\r\n            html += `\r\n      <label class=\"radio-card\">\r\n        <input type=\"checkbox\" name=\"opcional\" data-valor=\"${\r\n          item.valor\r\n        }\" onchange=\"calcularTotal()\"> \r\n        <div><span>${item.descripcion} $${item.valor.toFixed(2)}<\/span><\/div>\r\n      <\/label>\r\n    `;\r\n          });\r\n        }\r\n        cont.innerHTML = html;\r\n\r\n        const inputsPaso3 = cont.querySelectorAll(\r\n          \"input[type='radio'], input[type='checkbox']\"\r\n        );\r\n        const btnPlanes = document.getElementById(\"btnPlanesPago\");\r\n        btnPlanes.style.display = \"none\";\r\n\r\n        inputsPaso3.forEach((input) => {\r\n          input.addEventListener(\"change\", () => {\r\n            const visasConPlanes = [\r\n              \"Asilo Pol\u00edtico\",\r\n              \"Petici\u00f3n Familiar\",\r\n              \"Visa E2\",\r\n              \"Visa EB-1\",\r\n              \"Visa EB-2 (NIW)\",\r\n              \"Visa EB2 (Certificaci\u00f3n Laboral)\",\r\n              \"Visa EB3\",\r\n              \"Visa L1A\",\r\n              \"Visa O1A\",\r\n            ];\r\n\r\n            if (visasConPlanes.some((v) => visa.nombre.includes(v))) {\r\n              btnPlanes.style.display = \"block\";\r\n              agregarNotaResumen(true);\r\n            } else {\r\n              btnPlanes.style.display = \"none\";\r\n              agregarNotaResumen(false);\r\n            }\r\n          });\r\n        });\r\n      }\r\n\r\n      function agregarNotaResumen(mostrar = true) {\r\n        const resumen = document.querySelector(\r\n          \".cotizador-step.cotizador-resumen\"\r\n        );\r\n        const btnPlanes = document.getElementById(\"btnPlanesPago\");\r\n\r\n        let nota = resumen.querySelector(\".notaPlanes\");\r\n\r\n        if (!mostrar) {\r\n          if (nota) nota.remove();\r\n          return;\r\n        }\r\n        if (!nota) {\r\n          nota = document.createElement(\"p\");\r\n          nota.className = \"notaPlanes\";\r\n          nota.innerHTML = \"Explora nuestras opciones de planes\";\r\n          resumen.insertBefore(nota, btnPlanes);\r\n        }\r\n      }\r\n\r\n      function mostrarDependientes(valor, btn) {\r\n        document\r\n          .querySelectorAll(\"#preguntaDependientes button\")\r\n          .forEach((b) => b.classList.remove(\"active\"));\r\n        btn.classList.add(\"active\");\r\n        actualizarNumerosPasos();\r\n\r\n        const cont = document.getElementById(\"dependientesContainer\");\r\n        const botonesDependientes = cont.querySelectorAll(\".dependiente-btn\");\r\n\r\n        if (valor) {\r\n          cont.style.display = \"block\";\r\n        } else {\r\n          cont.style.display = \"none\";\r\n          dependientes = 0;\r\n          botonesDependientes.forEach((b) => b.classList.remove(\"active\"));\r\n          calcularTotal();\r\n        }\r\n      }\r\n\r\n      function mostrarPaso4(visa, tipoSeleccionado) {\r\n        const paso4 = document.getElementById(\"paso4\");\r\n        paso4.style.display = \"block\";\r\n        actualizarNumerosPasos();\r\n\r\n        const botones = paso4.querySelectorAll(\".dependiente-btn\");\r\n        botones.forEach((b) => b.classList.remove(\"active\"));\r\n\r\n        dependientes = 0;\r\n\r\n        const proceso = visa.fees.find((f) => f.tipo === tipoSeleccionado);\r\n        const nota = paso4.querySelector(\".nota\");\r\n\r\n        if (\r\n          proceso &&\r\n          proceso.items.some((i) => i.categoria === \"dependiente\")\r\n        ) {\r\n          nota.style.display = \"block\";\r\n        } else {\r\n          nota.style.display = \"none\";\r\n        }\r\n\r\n        calcularTotal();\r\n      }\r\n\r\n      function seleccionarDependiente(num, btn) {\r\n        dependientes = num;\r\n\r\n        document\r\n          .querySelectorAll(\".dependiente-btn\")\r\n          .forEach((b) => b.classList.remove(\"active\"));\r\n        btn.classList.add(\"active\");\r\n\r\n        calcularTotal();\r\n      }\r\n\r\n      function calcularTotal() {\r\n        const index = document.getElementById(\"servicio\").value;\r\n        if (index === \"\") return;\r\n\r\n        const visa = servicios[index];\r\n\r\n        let honorarios = 0;\r\n        seleccionUsuario.agregados = [];\r\n        seleccionUsuario.visa = \"\";\r\n\r\n        if (tipoSeleccionado === \"proceso_consular\" && visa.honorario_proceso) {\r\n          honorarios = visa.honorario_proceso;\r\n        } else {\r\n          honorarios = visa.honorarios || 0;\r\n        }\r\n\r\n        let fees = 0;\r\n        let detalle = \"\";\r\n\r\n        detalle += `<div class=\"resumen-section\"><h4>Honorarios AsisVisa<\/h4><p>$${honorarios.toFixed(\r\n          2\r\n        )}<\/p><\/div>`;\r\n\r\n        if (premiumSeleccionado && visa.procesamiento_premium) {\r\n          fees += Number(visa.procesamiento_premium);\r\n          detalle += `<div class=\"resumen-section\"><h4>Procesamiento Premium<\/h4><p>$${Number(\r\n            visa.procesamiento_premium\r\n          ).toFixed(2)}<\/p><\/div>`;\r\n\r\n          seleccionUsuario.agregados.push({\r\n            descripcion: \"Procesamiento Premium\",\r\n            valor: Number(visa.procesamiento_premium),\r\n            tiempo: \"inicio\",\r\n          });\r\n        }\r\n\r\n        const procesoRadio = document.querySelector(\r\n          \"input[name='proceso']:checked\"\r\n        );\r\n        if (procesoRadio) {\r\n          const categoria = procesoRadio.dataset.categoria;\r\n          const divContenido =\r\n            procesoRadio.nextElementSibling ||\r\n            procesoRadio.parentElement.querySelector(\"div\");\r\n          if (divContenido) {\r\n            const spans = divContenido.querySelectorAll(\"span\");\r\n            let subDetalle = \"\";\r\n             spans.forEach((span) => {\r\n      if (!span.textContent.startsWith(\"Total:\")) {\r\n        subDetalle += `<li>${span.textContent}<\/li>`;\r\n        const item = visa.fees\r\n          .find((f) => f.tipo === tipoSeleccionado)\r\n          .items.find(\r\n            (i) =>\r\n              i.descripcion &&\r\n              span.textContent.includes(i.descripcion) &&\r\n              i.categoria === categoria \r\n          );\r\n                if (item) {\r\n                  seleccionUsuario.agregados.push({\r\n                    descripcion: item.descripcion,\r\n                    valor: item.valor,\r\n                    tiempo:\r\n                      item.mes !== undefined\r\n                        ? `mes:${item.mes}`\r\n                        : item.dia !== undefined\r\n                        ? `dia:${item.dia}`\r\n                        : \"inicio\",\r\n                  });\r\n                }\r\n              }\r\n            });\r\n            detalle += `<div class=\"resumen-section\"><h4>Proceso Seleccionado<\/h4><ul>${subDetalle}<\/ul><\/div>`;\r\n          }\r\n          fees += parseFloat(procesoRadio.value) || 0;\r\n        }\r\n\r\n        const opcionalesCheck = document.querySelectorAll(\r\n          \"input[name='opcional']:checked\"\r\n        );\r\n        if (opcionalesCheck.length) {\r\n          let subDetalle = \"\";\r\n          opcionalesCheck.forEach((chk) => {\r\n            const valor = parseFloat(chk.dataset.valor) || 0;\r\n            fees += valor;\r\n\r\n            const span = chk.nextElementSibling?.querySelector(\"span\");\r\n            const spanText = span ? span.textContent : null;\r\n            if (spanText) subDetalle += `<li>${spanText}<\/li>`;\r\n\r\n            if (spanText) {\r\n              const item = Array.from(\r\n                visa.fees.find((f) => f.tipo === tipoSeleccionado)?.items || []\r\n              ).find((i) => spanText.includes(i.descripcion));\r\n              if (item) {\r\n                seleccionUsuario.agregados.push({\r\n                  descripcion: item.descripcion,\r\n                  valor: item.valor,\r\n                  tiempo:\r\n                    item.mes !== undefined\r\n                      ? `mes:${item.mes}`\r\n                      : item.dia !== undefined\r\n                      ? `dia:${item.dia}`\r\n                      : \"inicio\",\r\n                });\r\n              }\r\n            }\r\n          });\r\n          detalle += `<div class=\"resumen-section\"><h4>Opcionales<\/h4><ul>${subDetalle}<\/ul><\/div>`;\r\n        }\r\n\r\n        const tercerosCheck = document.querySelectorAll(\r\n          \"input[name='terceros']:checked\"\r\n        );\r\n        if (tercerosCheck.length) {\r\n          let subTercero = \"\";\r\n          tercerosCheck.forEach((chk) => {\r\n            const valor = parseFloat(chk.dataset.valor) || 0;\r\n            fees += valor;\r\n\r\n            const span = chk.nextElementSibling?.querySelector(\"span\");\r\n            const spanText = span ? span.textContent : null;\r\n            if (spanText) subTercero += `<li>${spanText}<\/li>`;\r\n\r\n            if (spanText) {\r\n              const item = Array.from(\r\n                visa.fees.find((f) => f.tipo === tipoSeleccionado)?.items || []\r\n              ).find((i) => spanText.includes(i.descripcion));\r\n              if (item) {\r\n                seleccionUsuario.agregados.push({\r\n                  descripcion: item.descripcion,\r\n                  valor: item.valor,\r\n                  tiempo:\r\n                    item.mes !== undefined\r\n                      ? `mes:${item.mes}`\r\n                      : item.dia !== undefined\r\n                      ? `dia:${item.dia}`\r\n                      : \"inicio\",\r\n                });\r\n              }\r\n            }\r\n          });\r\n          detalle += `<div class=\"resumen-section\"><h4>Pago a terceros<\/h4><ul>${subTercero}<\/ul><\/div>`;\r\n        }\r\n\r\n        if (dependientes > 0) {\r\n          const totalDepHonorarios =\r\n            dependientes * (visa.honorarios_dependiente || 0);\r\n          honorarios += totalDepHonorarios;\r\n          detalle += `<div class=\"resumen-section\"><h4>Dependientes Honorarios (${dependientes})<\/h4><p>$${totalDepHonorarios.toFixed(\r\n            2\r\n          )}<\/p><\/div>`;\r\n        }\r\n        seleccionUsuario.agregados.push({\r\n          descripcion: \"Honorarios AsisVisa\",\r\n          valor: honorarios,\r\n          tiempo: \"inicio\",\r\n        });\r\n\r\n        const indexTipo = tipoSeleccionado\r\n          ? visa.fees.findIndex((f) => f.tipo === tipoSeleccionado)\r\n          : -1;\r\n        if (indexTipo !== -1) {\r\n          let itemsDependiente = visa.fees[indexTipo].items.filter(\r\n            (i) => i.categoria === \"dependiente\"\r\n          );\r\n          if (subtipoSeleccionado) {\r\n            itemsDependiente = itemsDependiente.filter(\r\n              (i) =>\r\n                (i.subtipo && i.subtipo === subtipoSeleccionado) || !i.subtipo\r\n            );\r\n          }\r\n          if (itemsDependiente.length > 0 && dependientes > 0) {\r\n            let totalDepFee =\r\n              dependientes *\r\n              itemsDependiente.reduce((sum, i) => sum + i.valor, 0);\r\n            fees += totalDepFee;\r\n            detalle += `<div class=\"resumen-section\"><h4>Dependientes Fees (${dependientes})<\/h4><p>$${totalDepFee.toFixed(\r\n              2\r\n            )}<\/p><\/div>`;\r\n            itemsDependiente.forEach((item) => {\r\n              seleccionUsuario.agregados.push({\r\n                descripcion: `${item.descripcion} (${dependientes})`,\r\n                valor: item.valor * dependientes,\r\n                tiempo:\r\n                  item.mes !== undefined\r\n                    ? `mes:${item.mes}`\r\n                    : item.dia !== undefined\r\n                    ? `dia:${item.dia}`\r\n                    : \"mes\",\r\n              });\r\n            });\r\n          }\r\n        }\r\n\r\n        const total = honorarios + fees;\r\n\r\n        if (visa.nombre && visa.nombre.includes(\"Prometida\")) {\r\n          detalle += `\r\n  <p class=\"nota1\">\r\n    <strong>Nota: <\/strong>esta visa puede acarrear costos adicionales una vez que el prometido\/a ingrese a los Estados Unidos.\r\n  <\/p>\r\n  `;\r\n        }\r\n\r\n        seleccionUsuario.honorarios = honorarios;\r\n        seleccionUsuario.fees = fees;\r\n        seleccionUsuario.total = honorarios + fees;\r\n\r\n        document.getElementById(\"honorarios\").innerText = honorarios.toFixed(2);\r\n        document.getElementById(\"fees\").innerText = fees.toFixed(2);\r\n        document.getElementById(\"total\").innerText = total.toFixed(2);\r\n        document.getElementById(\"detalleCostos\").innerHTML = detalle;\r\n      }\r\n\r\n      function mostrarLineaTiempo(visa) {\r\n        const modal = document.getElementById(\"modalLineaTiempo\");\r\n        const container = document.getElementById(\"timelineContainer\");\r\n        const visaTitulo = document.getElementById(\"visaSeleccionada\");\r\n        container.innerHTML = \"\";\r\n\r\n        const procesoH4 = document.getElementById(\"procesoSeleccionado\");\r\n        visaTitulo.textContent = visa.nombre;\r\n        seleccionUsuario.visa = visa.nombre;\r\n\r\n        if (tipoSeleccionado) {\r\n          procesoH4.textContent = labelTipo(tipoSeleccionado);\r\n        }\r\n        document.getElementById(\"infoPlanPago\").innerHTML =\r\n          descripcionPago ||\r\n          `<span style=\"color: gray;\">No hay informaci\u00f3n disponible del plan de pagos.<\/span>`;\r\n\r\n        let preguntaDiv = document.createElement(\"div\");\r\n        preguntaDiv.id = \"preguntaDescuento\";\r\n        preguntaDiv.style.marginTop = \"15px\";\r\n        preguntaDiv.innerHTML = `\r\n    <p class=\"modal-info\">\r\n     \u00bfDesea aprovechar el <strong class=\"strong-info\">10%<\/strong> de descuento en honorarios?\r\n    <\/p>\r\n    <div class=\"btn-group\" style=\" margin-top:10px;\">\r\n      <button type=\"button\" onclick=\"aplicarDescuento(true)\">SI<\/button>\r\n      <button type=\"button\" onclick=\"aplicarDescuento(false)\">NO<\/button>\r\n    <\/div>\r\n  `;\r\n        container.appendChild(preguntaDiv);\r\n\r\n        modal.style.display = \"block\";\r\n      }\r\n      let descuentoAplicado = false;\r\n      function aplicarDescuento(aplicar) {\r\n        descuentoAplicado = aplicar;\r\n        const container = document.getElementById(\"timelineContainer\");\r\n\r\n        const infoPlanPago = document.getElementById(\"infoPlanPago\");\r\n        if (infoPlanPago) infoPlanPago.style.display = \"none\";\r\n        container.innerHTML = \"\";\r\n\r\n        seleccionUsuario.agregados.forEach((item) => {\r\n          if (item.valorOriginal !== undefined) {\r\n            item.valor = item.valorOriginal;\r\n          } else {\r\n            item.valorOriginal = item.valor;\r\n          }\r\n        });\r\n        if (aplicar) {\r\n          seleccionUsuario.agregados.forEach((item) => {\r\n            if (item.descripcion.toLowerCase().includes(\"honorarios\")) {\r\n              item.valor = item.valorOriginal * 0.9;\r\n            }\r\n          });\r\n        }\r\n        mostrarInfoPlanPago();\r\n        generarLineaTiempo();\r\n      }\r\n\r\n      function generarLineaTiempo() {\r\n        const container = document.getElementById(\"timelineContainer\");\r\n        container.innerHTML = \"\";\r\n        const linea = document.createElement(\"div\");\r\n        linea.className = \"timeline-line\";\r\n        container.appendChild(linea);\r\n\r\n        const grupos = { inicio: [], dia: {}, mes: {} };\r\n\r\n        const tienePremium = seleccionUsuario.agregados.some((it) =>\r\n          it.descripcion?.toLowerCase().includes(\"procesamiento premium\")\r\n        );\r\n        let referenciaTiempo = null;\r\n        if (tienePremium) {\r\n          referenciaTiempo = seleccionUsuario.agregados.find(\r\n            (it) =>\r\n              !it.descripcion\r\n                ?.toLowerCase()\r\n                .includes(\"procesamiento premium\") &&\r\n              (it.tiempo?.startsWith(\"dia:\") || it.tiempo?.startsWith(\"mes:\"))\r\n          )?.tiempo;\r\n        }\r\n\r\n        seleccionUsuario.agregados.forEach((item) => {\r\n          console.log(\r\n            \"Generando l\u00ednea tiempo con:\",\r\n            item.descripcion,\r\n            item.valor,\r\n            item.tiempo\r\n          );\r\n          let tiempo = item.tiempo;\r\n\r\n          if (\r\n            seleccionUsuario.visa?.trim() === \"Visa EB-1\" &&\r\n            !tienePremium &&\r\n            tiempo === \"dia:60\"\r\n          ) {\r\n            tiempo = \"mes:12\";\r\n          }\r\n\r\n          if (\r\n            tienePremium &&\r\n            item.descripcion?.toLowerCase().includes(\"procesamiento premium\") &&\r\n            referenciaTiempo\r\n          ) {\r\n            tiempo = referenciaTiempo.startsWith(\"mes:\")\r\n              ? referenciaTiempo.replace(\"mes:\", \"dia:\")\r\n              : referenciaTiempo;\r\n          }\r\n\r\n          if (tiempo.startsWith(\"dia\")) {\r\n            const numDia = tiempo.split(\":\")[1];\r\n            if (!grupos.dia[numDia]) grupos.dia[numDia] = [];\r\n            grupos.dia[numDia].push(item);\r\n          } else if (tiempo.startsWith(\"mes\")) {\r\n            const numMes = tiempo.split(\":\")[1];\r\n            if (!grupos.mes[numMes]) grupos.mes[numMes] = [];\r\n            grupos.mes[numMes].push(item);\r\n          } else {\r\n            grupos.inicio.push(item);\r\n          }\r\n        });\r\n\r\n        const orden = [\"inicio\", \"dia\", \"mes\"];\r\n\r\n        orden.forEach((key) => {\r\n          if (key === \"inicio\" && grupos.inicio.length > 0) {\r\n            const div = document.createElement(\"div\");\r\n            div.className = \"timeline-item\";\r\n            div.setAttribute(\"data-tiempo\", \"Inicio\");\r\n\r\n            let innerHTML = `<div class=\"circle\"><\/div><h5>Inicio<\/h5><ul>`;\r\n\r\n            grupos.inicio.forEach((item) => {\r\n              if (item.descripcion.toLowerCase().includes(\"honorarios\")) {\r\n                innerHTML += `<li>${item.descripcion}: $${item.valor.toFixed(\r\n                  2\r\n                )}<\/li>`;\r\n\r\n                if (descuentoAplicado) {\r\n                  innerHTML += `<p style=\"margin-top: 7px; margin-bottom: 7px; font-size: 14px;\">\r\n      <strong>Honorarios con 10% de descuento aplicado<\/strong>\r\n    <\/p>`;\r\n                } else {\r\n                  let saldo = item.valor;\r\n                  const esAsiloOPeticion =\r\n                    seleccionUsuario.visa?.includes(\"Asilo Pol\u00edtico\") ||\r\n                    seleccionUsuario.visa?.includes(\"Petici\u00f3n Familiar\");\r\n\r\n                  if (!esAsiloOPeticion) {\r\n                    let depositoInicial = 3500;\r\n                    if (\r\n                      [\"Visa O1A\", \"Visa L1A\", \"Visa E2\"].includes(\r\n                        seleccionUsuario.visa?.trim()\r\n                      )\r\n                    ) {\r\n                      depositoInicial = 2500;\r\n                    }\r\n                    if (saldo > depositoInicial) {\r\n                      innerHTML += `<ul>`;\r\n                      innerHTML += `<li>Primer dep\u00f3sito: $${depositoInicial.toFixed(\r\n                        2\r\n                      )}<\/li>`;\r\n                      saldo -= depositoInicial;\r\n\r\n                      const cuotaMensual = 500;\r\n                      const mesesCompletos = Math.floor(saldo \/ cuotaMensual);\r\n                      const resto = saldo % cuotaMensual;\r\n\r\n                      if (mesesCompletos > 0) {\r\n                        innerHTML += `<li>Pago mensual de $${cuotaMensual.toFixed(\r\n                          2\r\n                        )} por ${mesesCompletos} meses<\/li>`;\r\n                      }\r\n                      if (resto > 0) {\r\n                        innerHTML += `<li>\u00daltimo pago: $${resto.toFixed(\r\n                          2\r\n                        )}<\/li>`;\r\n                      }\r\n                      innerHTML += `<\/ul>`;\r\n                    } else {\r\n                      innerHTML += `<ul><li>Pago \u00fanico: $${saldo.toFixed(\r\n                        2\r\n                      )}<\/li><\/ul>`;\r\n                    }\r\n                  } else {\r\n                    innerHTML += `<ul>`;\r\n                    const cuotaMensual = 500;\r\n                    const mesesCompletos = Math.floor(saldo \/ cuotaMensual);\r\n                    const resto = saldo % cuotaMensual;\r\n\r\n                    if (mesesCompletos > 0) {\r\n                      innerHTML += `<li>Pago mensual de $${cuotaMensual.toFixed(\r\n                        2\r\n                      )} por ${mesesCompletos} meses<\/li>`;\r\n                    }\r\n                    if (resto > 0) {\r\n                      innerHTML += `<li>\u00daltimo pago: $${resto.toFixed(2)}<\/li>`;\r\n                    }\r\n                    innerHTML += `<\/ul>`;\r\n                  }\r\n                }\r\n              } else {\r\n                innerHTML += `<li>${item.descripcion}: $${item.valor.toFixed(\r\n                  2\r\n                )}<\/li>`;\r\n              }\r\n            });\r\n\r\n            innerHTML += `<\/>`;\r\n            div.innerHTML = innerHTML;\r\n            container.appendChild(div);\r\n          } else {\r\n            const tiempoObj = grupos[key];\r\n            const tiemposOrdenados = Object.keys(tiempoObj).sort(\r\n              (a, b) => a - b\r\n            );\r\n\r\n            tiemposOrdenados.forEach((tiempo) => {\r\n              const items = tiempoObj[tiempo];\r\n              const div = document.createElement(\"div\");\r\n              div.className = \"timeline-item\";\r\n              div.setAttribute(\r\n                \"data-tiempo\",\r\n                key === \"dia\" ? `${tiempo} D\u00edas` : `${tiempo} Meses`\r\n              );\r\n\r\n              let innerHTML = `<div class=\"circle\"><\/div><h5>${tiempo} ${\r\n                key === \"dia\"\r\n                  ? \"D\u00edas despu\u00e9s del inicio\"\r\n                  : \"Meses despu\u00e9s del inicio\"\r\n              }<\/h5><ul>`;\r\n              let totalVi\u00f1eta = 0;\r\n              items.forEach((i) => {\r\n                innerHTML += `<li>${i.descripcion}: $${i.valor.toFixed(\r\n                  2\r\n                )}<\/li>`;\r\n                totalVi\u00f1eta += i.valor;\r\n              });\r\n              innerHTML += \"<\/ul>\";\r\n              innerHTML += `<h5>Total: $${totalVi\u00f1eta.toFixed(2)}<\/h5>`;\r\n\r\n              div.innerHTML = innerHTML;\r\n              container.appendChild(div);\r\n            });\r\n          }\r\n        });\r\n      }\r\n\r\n      function mostrarInfoPlanPago() {\r\n        const infoPlanPago = document.getElementById(\"infoPlanPago\");\r\n\r\n        if (descuentoAplicado) {\r\n          infoPlanPago.innerHTML = `\r\n     <strong> Plan seleccionado:<\/strong> <strong class=\"strong-info\">Pago \u00fanico.<\/strong>\r\n      <span style=\"display:block;\">Un <strong class=\"strong-info\">10%<\/strong> de descuento se aplicar\u00e1 directamente sobre los honorarios.<\/span>\r\n\r\n    `;\r\n        } else {\r\n          infoPlanPago.innerHTML = `\r\n      <strong>Plan seleccionado:<\/strong> <strong class=\"strong-info\">Pagos mensuales en honorarios.<\/strong>\r\n       <span style=\"display:block;\">Comienza con un dep\u00f3sito inicial y contin\u00faa con cuotas c\u00f3modas hasta completar el total.<\/span>\r\n    `;\r\n        }\r\n\r\n        infoPlanPago.style.display = \"block\";\r\n      }\r\n\r\n      function cerrarModal() {\r\n        const infoPlanPago = document.getElementById(\"infoPlanPago\");\r\n        if (infoPlanPago) infoPlanPago.style.display = \"block\";\r\n\r\n        document.getElementById(\"modalLineaTiempo\").style.display = \"none\";\r\n      }\r\n\r\n      cargarServicios();\r\n    <\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Legal Services Select a service and customize the options you need Step 1: Select the service Loading services Select the type of process you need Choose the applicable situation: Do you want to include premium processing? Additional cost: $0.00 Do you want to add dependents to the request? YES NO Clarification note: A dependent is understood to be the partner\u2026 <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/asisvisa.com\/en\/pricing\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> \u00abPricing\u00bb<\/span><\/a><\/p>","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-9454","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/asisvisa.com\/en\/wp-json\/wp\/v2\/pages\/9454","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/asisvisa.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/asisvisa.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/asisvisa.com\/en\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/asisvisa.com\/en\/wp-json\/wp\/v2\/comments?post=9454"}],"version-history":[{"count":0,"href":"https:\/\/asisvisa.com\/en\/wp-json\/wp\/v2\/pages\/9454\/revisions"}],"wp:attachment":[{"href":"https:\/\/asisvisa.com\/en\/wp-json\/wp\/v2\/media?parent=9454"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}