sempli-website-lib 7.2.0 → 7.3.0-beta.0

package/assets/interface/icons/check-circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#1F7F45" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-circle"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>

package/assets/interface/icons/document-status-warning.svg

@@ -0,0 +1,6 @@
+<svg width="30" height="38" viewBox="0 0 30 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.75 1H4.5C2.567 1 1 2.61177 1 4.6V33.4C1 35.3882 2.567 37 4.5 37H25.5C27.433 37 29 35.3882 29 33.4V13L16.75 1Z" stroke="#B3B302" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.7175 12.895L7.365 23.5C7.23403 23.7268 7.16473 23.984 7.16399 24.2459C7.16326 24.5078 7.23112 24.7653 7.36082 24.9929C7.49052 25.2204 7.67754 25.4101 7.90328 25.5429C8.12902 25.6757 8.3856 25.7471 8.6475 25.75H21.3525C21.6144 25.7471 21.871 25.6757 22.0967 25.5429C22.3225 25.4101 22.5095 25.2204 22.6392 24.9929C22.7689 24.7653 22.8367 24.5078 22.836 24.2459C22.8353 23.984 22.766 23.7268 22.635 23.5L16.2825 12.895C16.1488 12.6746 15.9605 12.4923 15.7359 12.3659C15.5113 12.2394 15.2578 12.1729 15 12.1729C14.7422 12.1729 14.4887 12.2394 14.2641 12.3659C14.0395 12.4923 13.8512 12.6746 13.7175 12.895Z" stroke="#B3B302" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15 16.75V19.75" stroke="#B3B302" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15 22.75H15.0075" stroke="#B3B302" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/assets/interface/icons/x-circle-alert.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#FF425E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>

package/core/intelli-styles.js

@@ -0,0 +1,55 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const handleLabel = (input) => {
+    const wrapper = input.closest('.input-line-wrapper');
+    if (wrapper) {
+      const label = wrapper.querySelector('.floating-label');
+      if (label) {
+        if ((input.value.trim() !== '' || document.activeElement === input ||
+            input.hasAttribute('placeholder')) || input.type === 'date') {
+          label.classList.add('active');
+        } else {
+          label.classList.remove('active');
+        }
+      }
+    }
+
+    const labelContainer = input.closest('.label-container');
+    if (labelContainer) {
+      handleStateIcon(labelContainer);
+    }
+  };
+  const handleStateIcon = (labelContainer) => {
+    if (labelContainer.classList.contains('has-error') || labelContainer.classList.contains('valid-input')) {
+      if (!labelContainer.querySelector('.input-state-icon') && labelContainer.innerText.length <= 50) {
+        const iconSpan = document.createElement('span');
+        iconSpan.className = 'input-state-icon';
+        labelContainer.appendChild(iconSpan);
+      }
+    } else {
+      const iconSpan = labelContainer.querySelector('.input-state-icon');
+      if (iconSpan) {
+        iconSpan.remove();
+      }
+    }
+  };
+  const inputFields = document.querySelectorAll('.input-line-wrapper .input-field');
+  inputFields.forEach(input => {
+    handleLabel(input);
+    input.addEventListener('focus', () => handleLabel(input));
+    input.addEventListener('blur', () => handleLabel(input));
+    input.addEventListener('input', () => handleLabel(input));
+  });
+  const observer = new MutationObserver(() => {
+    const newInputFields = document.querySelectorAll('.input-line-wrapper .input-field');
+    newInputFields.forEach(input => {
+      if (!input.hasAttribute('data-processed')) {
+        handleLabel(input);
+        input.setAttribute('data-processed', 'true');
+        input.addEventListener('focus', () => handleLabel(input));
+        input.addEventListener('blur', () => handleLabel(input));
+        input.addEventListener('input', () => handleLabel(input));
+      }
+    });
+  });
+  observer.observe(document.body, { childList: true, subtree: true });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sempli-website-lib",
-  "version": "7.2.0",
+  "version": "7.3.0-beta.0",
   "peerDependencies": {
     "@angular/common": "^18.0.3",
     "@angular/core": "^18.0.3"

package/styles/master-app.scss

@@ -12302,6 +12302,13 @@ body#app, .app-layout {
   margin: 0 10px 10px 0;
   @include border-radius(4px);
 
+  &.rounded {
+    border-radius: 30px;
+    padding: 6px 20px;
+    margin: 0;
+    text-align: center;
+  }
+
   &:hover {
     background-color: $color-primary-dark;
     color: white;
@@ -13256,6 +13263,274 @@ button.cursor-pointer {
 
 }
 
+// INPUT WRAPPER
+.input-line-wrapper {
+  font-size: 1rem;
+  max-width: 100%;
+  padding: 1.5rem 0;
+  position: relative;
+
+  &.group {
+    display: flex;
+    justify-content: space-between;
+
+    @include responsive-max($breakpoint-small) {
+      flex-direction: column;
+    }
+
+    > label {
+      color: rgba(17, 17, 17, 0.7);
+      font-size: 0.875rem;
+    }
+
+    .row-group {
+      display: flex;
+      gap: 15px;
+
+      .input-wrapper {
+        margin: 0;
+        > label {
+          font-size: 0.875rem;
+        }
+      }
+    }
+  }
+
+  .label-container {
+    cursor: pointer;
+    position: relative;
+    display: block;
+    color: rgba(17, 17, 17, 0.7);
+
+    &.has-error {
+      .input-field {
+        color: #FF425E;
+        padding: 8px 24px 8px 0;
+        border-bottom-color: #FF425E;
+
+        &:focus, &:hover {
+          border-bottom-color: #FF425E;
+        }
+      }
+
+      .input-state-icon::before {
+        background-image: url('/assets/swl/interface/icons/x-circle-alert.svg');
+      }
+    }
+
+    &.valid-input {
+      .input-field {
+        color: #1F7F45;
+        padding: 8px 24px 8px 0;
+        border-bottom-color: #1F7F45;
+
+        &:focus, &:hover {
+          border-bottom-color: #1F7F45;
+        }
+      }
+
+      .input-state-icon::before {
+        background-image: url('/assets/swl/interface/icons/check-circle.svg');
+      }
+    }
+
+    .input-field {
+      background-color: transparent;
+      border-width: 0 0 1px;
+      border-radius: 0;
+      box-sizing: border-box;
+      caret-color: currentcolor;
+      display: block;
+      margin: 0;
+      padding: 8px 0;
+      text-align: left;
+      outline: none;
+      width: 100%;
+      border-bottom-style: solid;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: #111;
+      border-bottom-color: rgba(17, 17, 17, 0.2);
+      box-shadow: transparent 0 0 0 1000px inset;
+
+      /* Webkit browsers */
+      &:-webkit-autofill {
+        -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
+        -webkit-text-fill-color: #111 !important;
+        transition: background-color 5000s ease-in-out 0s;
+      }
+
+      &:-moz-autofill {
+        background-color: transparent !important;
+      }
+
+      &:-ms-autofill {
+        background-color: transparent !important;
+      }
+
+      /* Modern browsers */
+      &:autofill {
+        box-shadow: 0 0 0 1000px transparent inset !important;
+        background-color: transparent !important;
+      }
+
+      &:focus, &:hover {
+        border-bottom-color: #111;
+      }
+
+      &:disabled {
+        border-color: #E9EAEA;
+        border-bottom-color: #B6B8BD;
+        color: #B6B8BD;
+
+        &:focus, &:hover {
+          border-bottom-color: #B6B8BD;
+          cursor: not-allowed;
+        }
+
+        + .floating-label {
+          color: #B6B8BD;
+        }
+      }
+    }
+
+    select.input-field {
+      font-size: 0.9rem;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      appearance: none;
+      white-space: nowrap;
+      height: unset;
+    }
+
+    textarea.input-field {
+      resize: none;
+      white-space: pre-wrap;
+      overflow-wrap: break-word;
+      overflow-y: auto;
+      max-height: 150px;
+
+      + .floating-label {
+        margin-bottom: 30px;
+      }
+    }
+
+    &.select-wrapper {
+      &::after {
+        display: block;
+        content: "";
+
+        border-style: solid;
+        border-width: 5px 5px 0 5px;
+        border-color: #D7D9E2 transparent transparent transparent;
+        width: 0;
+        height: 0;
+
+        position: absolute;
+        top: 50%;
+        right: 13px;
+
+        @include transform(translateY(-50%));
+      }
+    }
+
+    .floating-label {
+      will-change: transform, color;
+      transform-origin: 0 0;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      pointer-events: none;
+      font-size: 1rem;
+      min-height: 1rem;
+      height: auto;
+      display: flex;
+      align-items: center;
+      transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      white-space: nowrap;
+
+      .floating-label-text {
+        margin: 0;
+        color: inherit;
+        letter-spacing: -0.01em;
+        font-size: 0.875rem;
+        line-height: 1.46;
+      }
+
+      &.active {
+        transform: scale(0.84) translateY(-25px);
+      }
+    }
+
+    .input-state-icon {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      margin: auto;
+      display: inline-block;
+      width: 16px;
+      height: 13px;
+      right: 0;
+
+      &::before {
+        content: "";
+        display: block;
+        width: 100%;
+        height: 100%;
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center;
+      }
+    }
+  }
+
+  .label-text {
+    margin: 0;
+    color: inherit;
+    letter-spacing: -0.01em;
+    font-size: 1.125rem;
+    line-height: 1.32;
+  }
+
+  .error-msg {
+    color: #FF425E;
+    margin-top: 0.5rem;
+    display: block;
+    position: relative;
+    font-size: 12px;
+  }
+
+  &:has(.select-wrapper) {
+    padding: 1.6rem 0;
+  }
+
+  .select-wrapper {
+    label {
+      margin: 0;
+      color: rgba(17, 17, 17, 0.7);;
+      letter-spacing: -0.01em;
+      font-size: 0.875rem;
+      line-height: 1.46;
+    }
+
+    select {
+      background-color: rgba(255, 255, 255, 0.9);
+      border-bottom-color: rgba(17, 17, 17, 0.2);
+      width: 100%;
+      padding: 5px;
+      border-radius: 2px;
+      height: 3rem;
+      border-width: 0 0 1px;
+      color: rgba(17, 17, 17, 0.7);
+      overflow: hidden;
+      box-sizing: border-box;
+    }
+  }
+}
+
 // TOGGLE SWITCH
 .toggle-button-with-label {
   display: flex;
@@ -13588,7 +13863,7 @@ button.cursor-pointer {
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: 3;
+  z-index: 50;
 }
 
 .modal-box {

package/styles/master-landing.scss

@@ -12082,6 +12082,13 @@ $breakPoints: (
   margin: 0 10px 10px 0;
   @include border-radius(4px);
 
+  &.rounded {
+    border-radius: 30px;
+    padding: 6px 20px;
+    margin: 0;
+    text-align: center;
+  }
+
   &:hover {
     background-color: $color-primary-dark;
     color: white;
@@ -13036,6 +13043,274 @@ button.cursor-pointer {
 
 }
 
+// INPUT WRAPPER
+.input-line-wrapper {
+  font-size: 1rem;
+  max-width: 100%;
+  padding: 1.5rem 0;
+  position: relative;
+
+  &.group {
+    display: flex;
+    justify-content: space-between;
+
+    @include responsive-max($breakpoint-small) {
+      flex-direction: column;
+    }
+
+    > label {
+      color: rgba(17, 17, 17, 0.7);
+      font-size: 0.875rem;
+    }
+
+    .row-group {
+      display: flex;
+      gap: 15px;
+
+      .input-wrapper {
+        margin: 0;
+        > label {
+          font-size: 0.875rem;
+        }
+      }
+    }
+  }
+
+  .label-container {
+    cursor: pointer;
+    position: relative;
+    display: block;
+    color: rgba(17, 17, 17, 0.7);
+
+    &.has-error {
+      .input-field {
+        color: #FF425E;
+        padding: 8px 24px 8px 0;
+        border-bottom-color: #FF425E;
+
+        &:focus, &:hover {
+          border-bottom-color: #FF425E;
+        }
+      }
+
+      .input-state-icon::before {
+        background-image: url('/assets/swl/interface/icons/x-circle-alert.svg');
+      }
+    }
+
+    &.valid-input {
+      .input-field {
+        color: #1F7F45;
+        padding: 8px 24px 8px 0;
+        border-bottom-color: #1F7F45;
+
+        &:focus, &:hover {
+          border-bottom-color: #1F7F45;
+        }
+      }
+
+      .input-state-icon::before {
+        background-image: url('/assets/swl/interface/icons/check-circle.svg');
+      }
+    }
+
+    .input-field {
+      background-color: transparent;
+      border-width: 0 0 1px;
+      border-radius: 0;
+      box-sizing: border-box;
+      caret-color: currentcolor;
+      display: block;
+      margin: 0;
+      padding: 8px 0;
+      text-align: left;
+      outline: none;
+      width: 100%;
+      border-bottom-style: solid;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: #111;
+      border-bottom-color: rgba(17, 17, 17, 0.2);
+      box-shadow: transparent 0 0 0 1000px inset;
+
+      /* Webkit browsers */
+      &:-webkit-autofill {
+        -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
+        -webkit-text-fill-color: #111 !important;
+        transition: background-color 5000s ease-in-out 0s;
+      }
+
+      &:-moz-autofill {
+        background-color: transparent !important;
+      }
+
+      &:-ms-autofill {
+        background-color: transparent !important;
+      }
+
+      /* Modern browsers */
+      &:autofill {
+        box-shadow: 0 0 0 1000px transparent inset !important;
+        background-color: transparent !important;
+      }
+
+      &:focus, &:hover {
+        border-bottom-color: #111;
+      }
+
+      &:disabled {
+        border-color: #E9EAEA;
+        border-bottom-color: #B6B8BD;
+        color: #B6B8BD;
+
+        &:focus, &:hover {
+          border-bottom-color: #B6B8BD;
+          cursor: not-allowed;
+        }
+
+        + .floating-label {
+          color: #B6B8BD;
+        }
+      }
+    }
+
+    select.input-field {
+      font-size: 0.9rem;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      appearance: none;
+      white-space: nowrap;
+      height: unset;
+    }
+
+    textarea.input-field {
+      resize: none;
+      white-space: pre-wrap;
+      overflow-wrap: break-word;
+      overflow-y: auto;
+      max-height: 150px;
+
+      + .floating-label {
+        margin-bottom: 30px;
+      }
+    }
+
+    &.select-wrapper {
+      &::after {
+        display: block;
+        content: "";
+
+        border-style: solid;
+        border-width: 5px 5px 0 5px;
+        border-color: #D7D9E2 transparent transparent transparent;
+        width: 0;
+        height: 0;
+
+        position: absolute;
+        top: 50%;
+        right: 13px;
+
+        @include transform(translateY(-50%));
+      }
+    }
+
+    .floating-label {
+      will-change: transform, color;
+      transform-origin: 0 0;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      pointer-events: none;
+      font-size: 1rem;
+      min-height: 1rem;
+      height: auto;
+      display: flex;
+      align-items: center;
+      transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      white-space: nowrap;
+
+      .floating-label-text {
+        margin: 0;
+        color: inherit;
+        letter-spacing: -0.01em;
+        font-size: 0.875rem;
+        line-height: 1.46;
+      }
+
+      &.active {
+        transform: scale(0.84) translateY(-25px);
+      }
+    }
+
+    .input-state-icon {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      margin: auto;
+      display: inline-block;
+      width: 16px;
+      height: 13px;
+      right: 0;
+
+      &::before {
+        content: "";
+        display: block;
+        width: 100%;
+        height: 100%;
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center;
+      }
+    }
+  }
+
+  .label-text {
+    margin: 0;
+    color: inherit;
+    letter-spacing: -0.01em;
+    font-size: 1.125rem;
+    line-height: 1.32;
+  }
+
+  .error-msg {
+    color: #FF425E;
+    margin-top: 0.5rem;
+    display: block;
+    position: relative;
+    font-size: 12px;
+  }
+
+  &:has(.select-wrapper) {
+    padding: 1.6rem 0;
+  }
+
+  .select-wrapper {
+    label {
+      margin: 0;
+      color: rgba(17, 17, 17, 0.7);;
+      letter-spacing: -0.01em;
+      font-size: 0.875rem;
+      line-height: 1.46;
+    }
+
+    select {
+      background-color: rgba(255, 255, 255, 0.9);
+      border-bottom-color: rgba(17, 17, 17, 0.2);
+      width: 100%;
+      padding: 5px;
+      border-radius: 2px;
+      height: 3rem;
+      border-width: 0 0 1px;
+      color: rgba(17, 17, 17, 0.7);
+      overflow: hidden;
+      box-sizing: border-box;
+    }
+  }
+}
+
 // TOGGLE SWITCH
 .toggle-button-with-label {
   display: flex;
@@ -13368,7 +13643,7 @@ button.cursor-pointer {
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: 3;
+  z-index: 50;
 }
 
 .modal-box {
@@ -16738,6 +17013,10 @@ span.results-table-item-value {
     font-size: 40px;
   }
 
+  @media screen and (min-width: 1450px) {
+    font-size: 44px;
+  }
+
   @media screen and (min-width: 1700px) {
     font-size: 48px;
   }
@@ -16800,6 +17079,10 @@ span.results-table-item-value {
   @media screen and (min-width: 1280px) {
     font-size: 20px;
   }
+
+  @media screen and (min-width: 1350px) {
+    font-size: 22px;
+  }
 }
 
 .home-paragraph {
@@ -16876,73 +17159,7 @@ span.results-table-item-value {
 }
 
 .btn-space {
-  margin: 30px 0 0 0;
-}
-
-.btn-space-modal {
-  margin: 10px;
-}
-
-.custom-height-img-flexi {
-  max-height: 210px;
-  min-height: 210px;
-  padding: 0;
-
-  @media screen and (max-width: 600px) {
-    padding: 40px 40px 0 40px;
-  }
-}
-
-.section-custom-texts {
-  height: max-content;
-}
-
-.max-height-260 {
-  max-height: 260px !important;
-}
-
-.mt-20 {
-  margin-top: 20px !important;
-}
-
-.padding-img {
-  @media screen and (max-width: 600px) {
-    padding: 20px !important;
-  }
-}
-
-.custom-container-column {
-  @media screen and (max-width: 995px) {
-    padding: 20px;
-  }
-}
-
-.section-custom-space-top {
-  margin-top: 150px;
-
-  @media screen and (max-width: 768px) {
-    margin-top: 0px;
-  }
-}
-
-.ul-disc {
-  list-style-type: disc;
-}
-
-.mtb-15 {
-  margin: 15px 0;
-}
-
-.mt-15 {
-  margin-top: 15px;
-}
-
-.height-max-content {
-  height: max-content;
-}
-
-.img-custom-border {
-  border-radius: 40px;
+  margin: 30px 0 10px 0;
 }
 
 .section {
@@ -16973,18 +17190,6 @@ span.results-table-item-value {
   height: 100%;
 }
 
-.section-video-main {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  border-radius: 0 0 0 0;
-
-  @media screen and (min-width: 769px) {
-    border-radius: 0 0 0 40%;
-  }
-}
-
 .space-elements {
   justify-content: space-between;
   gap: 20px;
@@ -17032,7 +17237,7 @@ span.results-table-item-value {
 }
 
 .text-gray-subtitle {
-  color: #434448;
+  color: #848A9E;
   font-size: 20px;
   width: 80%;
 }
@@ -17048,8 +17253,7 @@ span.results-table-item-value {
 
 .back-gray {
   background-color: #efefef;
-  border-radius: 40px;
-  height: 100%;
+  border-radius: 30px;
 }
 
 .back-navy-blue {
@@ -17313,19 +17517,7 @@ span.results-table-item-value {
   width: 100%;
   padding: 20px;
   box-sizing: border-box;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover;
-  height: 80vw;
-  max-height: 663px;
-  margin: 0 auto;
-  border-radius: 50px;
-}
-
-.section-flexi-picture {
-  width: 100%;
-  padding: 20px;
-  box-sizing: border-box;
+  background-image: url("/assets/swl/interface/sempli_2.0/7-financia-tu-capital-de-trabajo.png");
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
@@ -17857,26 +18049,6 @@ span.results-table-item-value {
   }
 }
 
-.webp .website-imgs {
-  .section-lending-picture {
-    background-image: url("/assets/swl/interface/sempli_2.0/credito-a-termino.webp");
-  }
-
-  .section-flexi-picture {
-    background-image: url("/assets/swl/interface/sempli_2.0/7-financia-tu-capital-de-trabajo2-01.webp");
-  }
-}
-
-.no-webp .website-imgs {
-  .section-lending-picture {
-    background-image: url("/assets/swl/interface/sempli_2.0/credito-a-termino.jpg");
-  }
-
-  .section-flexi-picture {
-    background-image: url("/assets/swl/interface/sempli_2.0/7-financia-tu-capital-de-trabajo2-01.jpg");
-  }
-}
-
 /*=============== END HOME SEMPLI 2.0 ===============*/
 
 /*#############################################################################

package/styles/partials/_buttons.scss

@@ -11,6 +11,13 @@
   margin: 0 10px 10px 0;
   @include border-radius(4px);
 
+  &.rounded {
+    border-radius: 30px;
+    padding: 6px 20px;
+    margin: 0;
+    text-align: center;
+  }
+
   &:hover {
     background-color: $color-primary-dark;
     color: white;

package/styles/partials/_forms.scss

@@ -518,6 +518,274 @@
 
 }
 
+// INPUT WRAPPER
+.input-line-wrapper {
+  font-size: 1rem;
+  max-width: 100%;
+  padding: 1.5rem 0;
+  position: relative;
+
+  &.group {
+    display: flex;
+    justify-content: space-between;
+
+    @include responsive-max($breakpoint-small) {
+      flex-direction: column;
+    }
+
+    > label {
+      color: rgba(17, 17, 17, 0.7);
+      font-size: 0.875rem;
+    }
+
+    .row-group {
+      display: flex;
+      gap: 15px;
+
+      .input-wrapper {
+        margin: 0;
+        > label {
+          font-size: 0.875rem;
+        }
+      }
+    }
+  }
+
+  .label-container {
+    cursor: pointer;
+    position: relative;
+    display: block;
+    color: rgba(17, 17, 17, 0.7);
+
+    &.has-error {
+      .input-field {
+        color: #FF425E;
+        padding: 8px 24px 8px 0;
+        border-bottom-color: #FF425E;
+
+        &:focus, &:hover {
+          border-bottom-color: #FF425E;
+        }
+      }
+
+      .input-state-icon::before {
+        background-image: url('/assets/swl/interface/icons/x-circle-alert.svg');
+      }
+    }
+
+    &.valid-input {
+      .input-field {
+        color: #1F7F45;
+        padding: 8px 24px 8px 0;
+        border-bottom-color: #1F7F45;
+
+        &:focus, &:hover {
+          border-bottom-color: #1F7F45;
+        }
+      }
+
+      .input-state-icon::before {
+        background-image: url('/assets/swl/interface/icons/check-circle.svg');
+      }
+    }
+
+    .input-field {
+      background-color: transparent;
+      border-width: 0 0 1px;
+      border-radius: 0;
+      box-sizing: border-box;
+      caret-color: currentcolor;
+      display: block;
+      margin: 0;
+      padding: 8px 0;
+      text-align: left;
+      outline: none;
+      width: 100%;
+      border-bottom-style: solid;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: #111;
+      border-bottom-color: rgba(17, 17, 17, 0.2);
+      box-shadow: transparent 0 0 0 1000px inset;
+
+      /* Webkit browsers */
+      &:-webkit-autofill {
+        -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
+        -webkit-text-fill-color: #111 !important;
+        transition: background-color 5000s ease-in-out 0s;
+      }
+
+      &:-moz-autofill {
+        background-color: transparent !important;
+      }
+
+      &:-ms-autofill {
+        background-color: transparent !important;
+      }
+
+      /* Modern browsers */
+      &:autofill {
+        box-shadow: 0 0 0 1000px transparent inset !important;
+        background-color: transparent !important;
+      }
+
+      &:focus, &:hover {
+        border-bottom-color: #111;
+      }
+
+      &:disabled {
+        border-color: #E9EAEA;
+        border-bottom-color: #B6B8BD;
+        color: #B6B8BD;
+
+        &:focus, &:hover {
+          border-bottom-color: #B6B8BD;
+          cursor: not-allowed;
+        }
+
+        + .floating-label {
+          color: #B6B8BD;
+        }
+      }
+    }
+
+    select.input-field {
+      font-size: 0.9rem;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      appearance: none;
+      white-space: nowrap;
+      height: unset;
+    }
+
+    textarea.input-field {
+      resize: none;
+      white-space: pre-wrap;
+      overflow-wrap: break-word;
+      overflow-y: auto;
+      max-height: 150px;
+
+      + .floating-label {
+        margin-bottom: 30px;
+      }
+    }
+
+    &.select-wrapper {
+      &::after {
+        display: block;
+        content: "";
+
+        border-style: solid;
+        border-width: 5px 5px 0 5px;
+        border-color: #D7D9E2 transparent transparent transparent;
+        width: 0;
+        height: 0;
+
+        position: absolute;
+        top: 50%;
+        right: 13px;
+
+        @include transform(translateY(-50%));
+      }
+    }
+
+    .floating-label {
+      will-change: transform, color;
+      transform-origin: 0 0;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      pointer-events: none;
+      font-size: 1rem;
+      min-height: 1rem;
+      height: auto;
+      display: flex;
+      align-items: center;
+      transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      white-space: nowrap;
+
+      .floating-label-text {
+        margin: 0;
+        color: inherit;
+        letter-spacing: -0.01em;
+        font-size: 0.875rem;
+        line-height: 1.46;
+      }
+
+      &.active {
+        transform: scale(0.84) translateY(-25px);
+      }
+    }
+
+    .input-state-icon {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      margin: auto;
+      display: inline-block;
+      width: 16px;
+      height: 13px;
+      right: 0;
+
+      &::before {
+        content: "";
+        display: block;
+        width: 100%;
+        height: 100%;
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center;
+      }
+    }
+  }
+
+  .label-text {
+    margin: 0;
+    color: inherit;
+    letter-spacing: -0.01em;
+    font-size: 1.125rem;
+    line-height: 1.32;
+  }
+
+  .error-msg {
+    color: #FF425E;
+    margin-top: 0.5rem;
+    display: block;
+    position: relative;
+    font-size: 12px;
+  }
+
+  &:has(.select-wrapper) {
+    padding: 1.6rem 0;
+  }
+
+  .select-wrapper {
+    label {
+      margin: 0;
+      color: rgba(17, 17, 17, 0.7);;
+      letter-spacing: -0.01em;
+      font-size: 0.875rem;
+      line-height: 1.46;
+    }
+
+    select {
+      background-color: rgba(255, 255, 255, 0.9);
+      border-bottom-color: rgba(17, 17, 17, 0.2);
+      width: 100%;
+      padding: 5px;
+      border-radius: 2px;
+      height: 3rem;
+      border-width: 0 0 1px;
+      color: rgba(17, 17, 17, 0.7);
+      overflow: hidden;
+      box-sizing: border-box;
+    }
+  }
+}
+
 // TOGGLE SWITCH
 .toggle-button-with-label {
   display: flex;

package/styles/partials/_modals.scss

@@ -10,7 +10,7 @@
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: 3;
+  z-index: 50;
 }
 
 .modal-box {

package/styles/partials/landing/_general.scss

@@ -1488,6 +1488,10 @@ span.results-table-item-value {
     font-size: 40px;
   }
 
+  @media screen and (min-width: 1450px) {
+    font-size: 44px;
+  }
+
   @media screen and (min-width: 1700px) {
     font-size: 48px;
   }
@@ -1550,6 +1554,10 @@ span.results-table-item-value {
   @media screen and (min-width: 1280px) {
     font-size: 20px;
   }
+
+  @media screen and (min-width: 1350px) {
+    font-size: 22px;
+  }
 }
 
 .home-paragraph {
@@ -1626,73 +1634,7 @@ span.results-table-item-value {
 }
 
 .btn-space {
-  margin: 30px 0 0 0;
-}
-
-.btn-space-modal {
-  margin: 10px;
-}
-
-.custom-height-img-flexi {
-  max-height: 210px;
-  min-height: 210px;
-  padding: 0;
-
-  @media screen and (max-width: 600px) {
-    padding: 40px 40px 0 40px;
-  }
-}
-
-.section-custom-texts {
-  height: max-content;
-}
-
-.max-height-260 {
-  max-height: 260px !important;
-}
-
-.mt-20 {
-  margin-top: 20px !important;
-}
-
-.padding-img {
-  @media screen and (max-width: 600px) {
-    padding: 20px !important;
-  }
-}
-
-.custom-container-column {
-  @media screen and (max-width: 995px) {
-    padding: 20px;
-  }
-}
-
-.section-custom-space-top {
-  margin-top: 150px;
-
-  @media screen and (max-width: 768px) {
-    margin-top: 0px;
-  }
-}
-
-.ul-disc {
-  list-style-type: disc;
-}
-
-.mtb-15 {
-  margin: 15px 0;
-}
-
-.mt-15 {
-  margin-top: 15px;
-}
-
-.height-max-content {
-  height: max-content;
-}
-
-.img-custom-border {
-  border-radius: 40px;
+  margin: 30px 0 10px 0;
 }
 
 .section {
@@ -1723,18 +1665,6 @@ span.results-table-item-value {
   height: 100%;
 }
 
-.section-video-main {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  border-radius: 0 0 0 0;
-
-  @media screen and (min-width: 769px) {
-    border-radius: 0 0 0 40%;
-  }
-}
-
 .space-elements {
   justify-content: space-between;
   gap: 20px;
@@ -1782,7 +1712,7 @@ span.results-table-item-value {
 }
 
 .text-gray-subtitle {
-  color: #434448;
+  color: #848A9E;
   font-size: 20px;
   width: 80%;
 }
@@ -1798,8 +1728,7 @@ span.results-table-item-value {
 
 .back-gray {
   background-color: #efefef;
-  border-radius: 40px;
-  height: 100%;
+  border-radius: 30px;
 }
 
 .back-navy-blue {
@@ -2063,19 +1992,7 @@ span.results-table-item-value {
   width: 100%;
   padding: 20px;
   box-sizing: border-box;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover;
-  height: 80vw;
-  max-height: 663px;
-  margin: 0 auto;
-  border-radius: 50px;
-}
-
-.section-flexi-picture {
-  width: 100%;
-  padding: 20px;
-  box-sizing: border-box;
+  background-image: url("/assets/swl/interface/sempli_2.0/7-financia-tu-capital-de-trabajo.png");
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
@@ -2607,24 +2524,4 @@ span.results-table-item-value {
   }
 }
 
-.webp .website-imgs {
-  .section-lending-picture {
-    background-image: url("/assets/swl/interface/sempli_2.0/credito-a-termino.webp");
-  }
-
-  .section-flexi-picture {
-    background-image: url("/assets/swl/interface/sempli_2.0/7-financia-tu-capital-de-trabajo2-01.webp");
-  }
-}
-
-.no-webp .website-imgs {
-  .section-lending-picture {
-    background-image: url("/assets/swl/interface/sempli_2.0/credito-a-termino.jpg");
-  }
-
-  .section-flexi-picture {
-    background-image: url("/assets/swl/interface/sempli_2.0/7-financia-tu-capital-de-trabajo2-01.jpg");
-  }
-}
-
 /*=============== END HOME SEMPLI 2.0 ===============*/