sempli-website-lib 4.1.4 → 5.0.2

package/styles/partials/landing/_hero-wrappers.scss

@@ -1,616 +1,616 @@
-/*#############################################################################
-# HERO SECTION WRAPPERS
-#############################################################################*/
-
-
-section.hero-wrapper {
-  padding: 40px 0;
-  overflow: hidden;
-  position: relative;
-
-  @include responsive($breakpoint-medium) {
-    padding: 100px 0;
-  }
-
-  @include responsive($breakpoint-xmedium) {
-    padding: 200px 0;
-  }
-
-  // Compact Layout Option
-  &.compact {
-    @include background-image(linear-gradient(#ffffff, #f5f6fa));
-    padding: 10px 0 20px;
-
-    @include responsive($breakpoint-medium) {
-      padding: 20px 0 40px;
-    }
-
-    @include responsive($breakpoint-xmedium) {
-      padding: 40px 0 60px;
-    }
-  }
-
-  // Centered Text Option
-  &.centered {
-    text-align: center;
-  }
-
-  // Content Elements
-  .hero-title {
-    // color: $color-primary;
-    font-size: rem-calc(26px);
-    // font-weight: 100;
-    margin: 0 0 rem-calc(13px);
-
-    @include responsive($breakpoint-medium) {
-      font-size: rem-calc(32px);
-    }
-    @include responsive($breakpoint-xmedium) {
-      font-size: rem-calc(48px);
-    }
-
-    &.hero-white-title {
-      color: white;
-      font-weight: 700;
-      font-size: 43px;
-      line-height: 55px;
-    }
-  }
-
-  .hero-description {
-    font-size: rem-calc(18px);
-    font-weight: 100;
-    // opacity: 0.5;
-    margin: 0 0 rem-calc(20px);
-
-    @include responsive($breakpoint-medium) {
-      font-size: rem-calc(22px);
-    }
-    @include responsive($breakpoint-xmedium) {
-      font-size: rem-calc(24px);
-    }
-
-    &.hero-white-title{
-      color: white;
-      opacity: unset;
-
-      &.font-weight-medium {
-        font-weight: 500;
-      }
-    }
-  }
-
-  nav.tab-menu {
-    @include responsive($breakpoint-xmedium) {
-      width: 100%;
-      position: absolute;
-      bottom: 0;
-      left: 50%;
-      @include transform(translateX(-50%));
-    }
-
-    a.tab {
-      display: block;
-      background-color: rgba(#fff,0.2);
-      color: $color-secondary;
-      font-weight: 900;
-      padding: 10px 20px;
-      margin: 0 0 15px 0;
-      @include border-radius(20px);
-      @include box-shadow(0 -5px 8px 0 rgba(black, 0.06));
-
-      @include responsive($breakpoint-xmedium) {
-        display: inline-block;
-        margin: 0 5px 0 0;
-        @include border-top-radius(5px);
-        @include border-bottom-radius(0);
-      }
-
-      &:last-child {
-        margin: 0;
-      }
-
-      &:hover {
-        background-color: #fff;
-      }
-
-      &.active {
-        background-color: #fff;
-        color: $color-primary;
-        @include box-shadow(0 -5px 8px 0 rgba(black, 0.1));
-      }
-    }
-
-    &.inverse {
-      a.tab {
-        background-color: #e8eaf1;
-        @include box-shadow(none);
-
-        &:hover {
-          background-color: darken(#e8eaf1, 3%);
-        }
-
-        &.active {
-          background-color: #f5f6fa;
-          color: $color-text;
-        }
-      }
-    }
-  }
-}
-
-// SECTION SPECIFIC HERO WRAPPERS
-.webp body#landing section.hero-wrapper {
-  &.home.index {
-    @include responsive($breakpoint-xmedium) {
-      background: url("/assets/swl/interface/sempli-lg-home.webp") no-repeat 100% 88%;
-      background-size: cover;
-    }
-
-    @include responsive($breakpoint-xxlarge) {
-      background: url("/assets/swl/interface/sempli-bg-home.webp") no-repeat 100% 88%;
-      background-size: cover;
-    }
-  }
-
-  &.announcement {
-    @include responsive-max($breakpoint-large) {
-      background: url("/assets/swl/interface/sempli-md-banner-announce.webp") no-repeat 100%;
-      background-size: cover;
-    }
-
-    @include responsive($breakpoint-large) {
-      background: url("/assets/swl/interface/sempli-banner-announce.webp") no-repeat 100%;
-      background-size: cover;
-    }
-  }
-
-  &.ongoing {
-    background: url("/assets/swl/interface/sempli-banner-ongoing.webp") no-repeat 100%;
-    background-size: cover;
-  }
-
-  &.sempli-connects {
-    background: url("/assets/swl/interface/sempli-conecta-banner.webp") no-repeat 100%;
-    background-size: cover;
-
-    @include responsive-max($breakpoint-small) {
-      background: linear-gradient(#00000042, #00000042), url("/assets/swl/interface/sempli-conecta-banner.webp") no-repeat 100%;
-      background-size: cover;
-    }
-  }
-
-  &.ally-landing.index {
-    @include responsive($breakpoint-large) {
-      &.sempli-comfama {
-        background: url("/assets/swl/interface/comfama_sempli_alliance.webp") no-repeat 98% 50%;
-        @include background-retina("/assets/swl/interface/comfama_sempli_alliance.webp", 400px, 370px);
-        background-size: auto 400px;
-        margin-bottom: 40px;
-      }
-    }
-
-    @include responsive($breakpoint-xlarge) {
-      &.sempli-comfama {
-        background-position: 95% 10%;
-        background-size: auto 450px;
-      }
-    }
-  }
-
-  &.credit-lines.index {
-    @include responsive($breakpoint-large) {
-      &.grow-simple-section {
-        background: url("/assets/swl/interface/crecer_simple_sempli.webp") no-repeat 110% 50%;
-        @include background-retina("/assets/swl/interface/crecer_simple_sempli.webp", auto, 510px);
-        background-size: auto 450px;
-        margin-bottom: 40px;
-      }
-      &.ongoing-section {
-        background: url("/assets/swl/interface/ongoing.webp") no-repeat 110% 50%;
-        @include background-retina("/assets/swl/interface/ongoing.webp", 400px, 370px);
-        background-size: auto 450px;
-        margin-bottom: 40px;
-      }
-      &.sempli-women-section {
-        background: url("/assets/swl/interface/mujeres_sempli.webp") no-repeat 110% 50%;
-        @include background-retina("/assets/swl/interface/mujeres_sempli.webp", 400px, 370px);
-        background-size: auto 450px;
-        margin-bottom: 40px;
-      }
-      &.sustainable-companies-section {
-        background: url("/assets/swl/interface/sostenible.webp") no-repeat 110% 50%;
-        @include background-retina("/assets/swl/interface/sostenible.webp", 400px, 370px);
-        background-size: auto 450px;
-        margin-bottom: 40px;
-      }
-      &.innovators-section {
-        background: url("/assets/swl/interface/innovadores_35.webp") no-repeat 110% 50%;
-        @include background-retina("/assets/swl/interface/innovadores_35.webp", 400px, 370px);
-        background-size: auto 450px;
-        margin-bottom: 40px;
-      }
-      &.independent-entrepreneurs-section {
-        background: url("/assets/swl/interface/independientes.webp") no-repeat 110% 50%;
-        @include background-retina("/assets/swl/interface/independientes.webp", 400px, 370px);
-        background-size: auto 450px;
-        margin-bottom: 40px;
-      }
-    }
-
-    @include responsive($breakpoint-xlarge) {
-      &.grow-simple-section {
-        background-position: 105% 65%;
-        background-size: auto 650px;
-      }
-      &.ongoing-section {
-        background-position: 105% 50%;
-        background-size: auto 700px;
-      }
-      &.sustainable-companies-section {
-        background-position: 105% 100%;
-        background-size: auto 650px;
-      }
-
-      &.innovators-section {
-        background-position: 105% 100%;
-        background-size: auto 650px;
-      }
-
-      &.sempli-women-section, &.independent-entrepreneurs-section {
-        background-position: 105% 35%;
-        background-size: auto 600px;
-      }
-    }
-  }
-
-  &.insurance-entrepreneur-plan {
-    @include responsive($breakpoint-large) {
-      background: url("/assets/swl/interface/illustration-02.webp") no-repeat 110% 50%;
-      @include background-retina("/assets/swl/interface/illustration-02.webp", 400px, 370px);
-      background-size: auto 450px;
-      margin-bottom: 40px;
-    }
-
-    @include responsive($breakpoint-xlarge) {
-      background-position: 90% 60%;
-      background-size: auto 500px;
-    }
-  }
-
-  // Confirmación de Email
-  &.email-confirmation.index,
-  &.legal-authorization.index,
-  &.not-interested-confirmation.index {
-    @include responsive($breakpoint-medium) {
-      &.confirmed, &.already_confirmed {
-        background: url("/assets/swl/interface/illustration-05.webp") no-repeat 110% 50%;
-        @include background-retina("/assets/swl/interface/illustration-05.webp", 400px, 370px);
-        background-size: auto 370px;
-        margin-bottom: 40px;
-      }
-      &.error, &.rejected, &.cancel-application {
-        background: url("/assets/swl/interface/illustration-12.webp") no-repeat 110% 50%;
-        @include background-retina("/assets/swl/interface/illustration-12.webp", 400px, 370px);
-        background-size: auto 370px;
-        margin-bottom: 40px;
-      }
-    }
-
-    @include responsive($breakpoint-xmedium) {
-      &.confirmed, &.already_confirmed, &.error, &.rejected, &.cancel-application {
-        background-position: 100% 50%;
-        background-size: auto 400px;
-        min-height: 693px;
-        margin-bottom: 80px;
-      }
-    }
-
-    @include responsive($breakpoint-large) {
-      &.confirmed, &.already_confirmed, &.error, &.rejected, &.cancel-application {
-        background-position: 90% 35%;
-        background-size: auto 500px;
-      }
-    }
-  }
-
-  &.page-not-found {
-    @include responsive($breakpoint-medium) {
-      background: url("/assets/swl/interface/illustration-12.webp") no-repeat 80% 50%;
-      background-size: auto 80%;
-      margin-bottom: 40px;
-    }
-
-    @include responsive($breakpoint-xmedium) {
-      background-position: 100% 50%;
-      background-size: auto 70%;
-      min-height: 693px;
-      margin-bottom: 80px;
-    }
-
-    @include responsive($breakpoint-large) {
-      background-position: 80% 35%;
-      background-size: auto 100%;
-    }
-  }
-}
-
-.no-webp body#landing section.hero-wrapper {
-  &.home.index {
-    @include responsive($breakpoint-xmedium) {
-      background: url("/assets/swl/interface/sempli-lg-home.jpg") no-repeat 100% 88%;
-      background-size: cover;
-    }
-
-    @include responsive($breakpoint-xxlarge) {
-      background: url("/assets/swl/interface/sempli-bg-home.jpg") no-repeat 100% 88%;
-      background-size: cover;
-    }
-  }
-
-  &.announcement {
-    @include responsive-max($breakpoint-large) {
-      background: url("/assets/swl/interface/sempli-md-banner-announce.jpg") no-repeat 100%;
-      background-size: cover;
-    }
-
-    @include responsive($breakpoint-large) {
-      background: url("/assets/swl/interface/sempli-banner-announce.jpg") no-repeat 100%;
-      background-size: cover;
-    }
-  }
-
-  &.ongoing {
-    background: url("/assets/swl/interface/sempli-banner-ongoing.png") no-repeat 100%;
-    background-size: cover;
-  }
-
-  &.sempli-connects {
-    background: url("/assets/swl/interface/sempli-conecta-banner.png") no-repeat 100%;
-    background-size: cover;
-
-    @include responsive-max($breakpoint-small) {
-      background: linear-gradient(#00000042, #00000042), url("/assets/swl/interface/sempli-conecta-banner.png") no-repeat 100%;
-      background-size: cover;
-    }
-  }
-
-  &.ally-landing.index {
-    @include responsive($breakpoint-large) {
-      &.sempli-comfama {
-        background: url("/assets/swl/interface/comfama_sempli_alliance.png") no-repeat 98% 50%;
-        @include background-retina("/assets/swl/interface/comfama_sempli_alliance.png", 400px, 370px);
-        background-size: auto 400px;
-        margin-bottom: 40px;
-      }
-    }
-
-    @include responsive($breakpoint-xlarge) {
-      &.sempli-comfama {
-        background-position: 95% 10%;
-        background-size: auto 450px;
-      }
-    }
-  }
-
-  &.credit-lines.index {
-    @include responsive($breakpoint-large) {
-      &.grow-simple-section {
-        background: url("/assets/swl/interface/crecer_simple_sempli.png") no-repeat 110% 50%;
-        @include background-retina("/assets/swl/interface/crecer_simple_sempli.png", auto, 510px);
-        background-size: auto 450px;
-        margin-bottom: 40px;
-      }
-      &.ongoing-section {
-        background: url("/assets/swl/interface/ongoing.png") no-repeat 110% 50%;
-        @include background-retina("/assets/swl/interface/ongoing.png", 400px, 370px);
-        background-size: auto 450px;
-        margin-bottom: 40px;
-      }
-      &.sempli-women-section {
-        background: url("/assets/swl/interface/mujeres_sempli.png") no-repeat 110% 50%;
-        @include background-retina("/assets/swl/interface/mujeres_sempli.png", 400px, 370px);
-        background-size: auto 450px;
-        margin-bottom: 40px;
-      }
-      &.sustainable-companies-section {
-        background: url("/assets/swl/interface/sostenible.png") no-repeat 110% 50%;
-        @include background-retina("/assets/swl/interface/sostenible.png", 400px, 370px);
-        background-size: auto 450px;
-        margin-bottom: 40px;
-      }
-      &.innovators-section {
-        background: url("/assets/swl/interface/innovadores_35.png") no-repeat 110% 50%;
-        @include background-retina("/assets/swl/interface/innovadores_35.png", 400px, 370px);
-        background-size: auto 450px;
-        margin-bottom: 40px;
-      }
-      &.independent-entrepreneurs-section {
-        background: url("/assets/swl/interface/independientes.png") no-repeat 110% 50%;
-        @include background-retina("/assets/swl/interface/independientes.png", 400px, 370px);
-        background-size: auto 450px;
-        margin-bottom: 40px;
-      }
-    }
-
-    @include responsive($breakpoint-xlarge) {
-      &.grow-simple-section {
-        background-position: 105% 65%;
-        background-size: auto 650px;
-      }
-      &.ongoing-section {
-        background-position: 105% 125%;
-        background-size: auto 650px;
-      }
-
-      &.sustainable-companies-section {
-        background-position: 105% 125%;
-        background-size: auto 650px;
-      }
-
-      &.innovators-section {
-        background-position: 110% 100%;
-        background-size: auto 650px;
-      }
-
-      &.sempli-women-section, &.innovators-section, &.independent-entrepreneurs-section {
-        background-position: 105% 35%;
-        background-size: auto 600px;
-      }
-    }
-  }
-
-  &.insurance-entrepreneur-plan {
-    @include responsive($breakpoint-large) {
-      background: url("/assets/swl/interface/illustration-02.png") no-repeat 110% 50%;
-      @include background-retina("/assets/swl/interface/illustration-02.png", 400px, 370px);
-      background-size: auto 450px;
-      margin-bottom: 40px;
-    }
-
-    @include responsive($breakpoint-xlarge) {
-      background-position: 90% 60%;
-      background-size: auto 500px;
-    }
-  }
-
-  // Confirmación de Email
-  &.email-confirmation.index,
-  &.legal-authorization.index,
-  &.not-interested-confirmation.index {
-    @include responsive($breakpoint-medium) {
-      &.confirmed, &.already_confirmed {
-        background: url("/assets/swl/interface/illustration-05.png") no-repeat 110% 50%;
-        @include background-retina("/assets/swl/interface/illustration-05.png", 400px, 370px);
-        background-size: auto 370px;
-        margin-bottom: 40px;
-      }
-      &.error, &.rejected, &.cancel-application {
-        background: url("/assets/swl/interface/illustration-12.png") no-repeat 110% 50%;
-        @include background-retina("/assets/swl/interface/illustration-12.png", 400px, 370px);
-        background-size: auto 370px;
-        margin-bottom: 40px;
-      }
-    }
-
-    @include responsive($breakpoint-xmedium) {
-      &.confirmed, &.already_confirmed, &.error, &.rejected, &.cancel-application {
-        background-position: 100% 50%;
-        background-size: auto 400px;
-        min-height: 693px;
-        margin-bottom: 80px;
-      }
-    }
-
-    @include responsive($breakpoint-large) {
-      &.confirmed, &.already_confirmed, &.error, &.rejected, &.cancel-application {
-        background-position: 90% 35%;
-        background-size: auto 500px;
-      }
-    }
-  }
-
-  &.page-not-found {
-    @include responsive($breakpoint-medium) {
-      background: url("/assets/swl/interface/illustration-12.png") no-repeat 110% 50%;
-      @include background-retina("/assets/swl/interface/illustration-12.png", 400px, 370px);
-      background-size: auto 370px;
-      margin-bottom: 40px;
-    }
-
-    @include responsive($breakpoint-xmedium) {
-      background-position: 100% 50%;
-      background-size: auto 400px;
-      min-height: 693px;
-      margin-bottom: 80px;
-    }
-
-    @include responsive($breakpoint-large) {
-      background-position: 90% 35%;
-      background-size: auto 500px;
-    }
-  }
-}
-
-body#landing {
-  // Homepage
-
-  section.hero-wrapper.home.index {
-    padding: 20px 0;
-
-    @include responsive($breakpoint-xmedium) {
-      min-height: calc(100vh - 84px);
-      padding: 80px 0;
-    }
-
-    @include responsive($breakpoint-xxlarge) {
-      background-position-y: 60% !important;
-      padding: 150px 0;
-    }
-  }
-
-  section.hero-wrapper.allies {
-    padding: 20px 0;
-    background-size: cover;
-    min-height: calc(100vh - 84px);
-
-    .allies-intro {
-      padding: 60px 40px;
-      .allies-title {
-        color: $color-dark-gray;
-        padding: 20px 0 10px;
-      }
-      .allies-subtitle {
-        color: $color-secondary-dark;
-        font-weight: 500;
-      }
-    }
-
-    @include responsive($breakpoint-xmedium) {
-      padding: 80px 0;
-    }
-  }
-
-  // Cómo funciona - Index
-  section.hero-wrapper.como-funciona.index {
-    @include responsive($breakpoint-medium) {
-      background: url("/assets/swl/interface/illustration-07.png") no-repeat 110% 50%;
-      background-size: 400px 370px;
-      @include background-retina("/assets/swl/interface/illustration-07.png", 400px, 370px);
-      margin-bottom: 40px;
-    }
-
-    @include responsive($breakpoint-xmedium) {
-      background-position: 110% 100%;
-      background-size: 600px 555px;
-      min-height: 693px;
-      margin-bottom: 80px;
-    }
-
-    @include responsive($breakpoint-large) {
-      background-position: 100% 100%;
-      background-size: 750px 693px;
-    }
-  }
-}
-
-
-// body#landing {
-//   // Homepage
-//   &.home {
-//     section.hero-wrapper {
-//       @include responsive($breakpoint-medium) {
-//         background: url("/assets/swl/interface/illustration-01.png") no-repeat 110% 50%;
-//         background-size: 1000px 789px;
-//         @include background-retina("/assets/swl/interface/illustration-01.png", 1000px, 789px);
-//       }
-
-//       @include responsive($breakpoint-xmedium) {
-//         background-position: 110% 0;
-//         background-size: 800px 631px;
-//         min-height: 631px;
-//       }
-//     }
-//   }
-// }
-
+/*#############################################################################
+# HERO SECTION WRAPPERS
+#############################################################################*/
+
+
+section.hero-wrapper {
+  padding: 40px 0;
+  overflow: hidden;
+  position: relative;
+
+  @include responsive($breakpoint-medium) {
+    padding: 100px 0;
+  }
+
+  @include responsive($breakpoint-xmedium) {
+    padding: 200px 0;
+  }
+
+  // Compact Layout Option
+  &.compact {
+    @include background-image(linear-gradient(#ffffff, #f5f6fa));
+    padding: 10px 0 20px;
+
+    @include responsive($breakpoint-medium) {
+      padding: 20px 0 40px;
+    }
+
+    @include responsive($breakpoint-xmedium) {
+      padding: 40px 0 60px;
+    }
+  }
+
+  // Centered Text Option
+  &.centered {
+    text-align: center;
+  }
+
+  // Content Elements
+  .hero-title {
+    // color: $color-primary;
+    font-size: rem-calc(26px);
+    // font-weight: 100;
+    margin: 0 0 rem-calc(13px);
+
+    @include responsive($breakpoint-medium) {
+      font-size: rem-calc(32px);
+    }
+    @include responsive($breakpoint-xmedium) {
+      font-size: rem-calc(48px);
+    }
+
+    &.hero-white-title {
+      color: white;
+      font-weight: 700;
+      font-size: 43px;
+      line-height: 55px;
+    }
+  }
+
+  .hero-description {
+    font-size: rem-calc(18px);
+    font-weight: 100;
+    // opacity: 0.5;
+    margin: 0 0 rem-calc(20px);
+
+    @include responsive($breakpoint-medium) {
+      font-size: rem-calc(22px);
+    }
+    @include responsive($breakpoint-xmedium) {
+      font-size: rem-calc(24px);
+    }
+
+    &.hero-white-title{
+      color: white;
+      opacity: unset;
+
+      &.font-weight-medium {
+        font-weight: 500;
+      }
+    }
+  }
+
+  nav.tab-menu {
+    @include responsive($breakpoint-xmedium) {
+      width: 100%;
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      @include transform(translateX(-50%));
+    }
+
+    a.tab {
+      display: block;
+      background-color: rgba(#fff,0.2);
+      color: $color-secondary;
+      font-weight: 900;
+      padding: 10px 20px;
+      margin: 0 0 15px 0;
+      @include border-radius(20px);
+      @include box-shadow(0 -5px 8px 0 rgba(black, 0.06));
+
+      @include responsive($breakpoint-xmedium) {
+        display: inline-block;
+        margin: 0 5px 0 0;
+        @include border-top-radius(5px);
+        @include border-bottom-radius(0);
+      }
+
+      &:last-child {
+        margin: 0;
+      }
+
+      &:hover {
+        background-color: #fff;
+      }
+
+      &.active {
+        background-color: #fff;
+        color: $color-primary;
+        @include box-shadow(0 -5px 8px 0 rgba(black, 0.1));
+      }
+    }
+
+    &.inverse {
+      a.tab {
+        background-color: #e8eaf1;
+        @include box-shadow(none);
+
+        &:hover {
+          background-color: darken(#e8eaf1, 3%);
+        }
+
+        &.active {
+          background-color: #f5f6fa;
+          color: $color-text;
+        }
+      }
+    }
+  }
+}
+
+// SECTION SPECIFIC HERO WRAPPERS
+.webp body#landing section.hero-wrapper {
+  &.home.index {
+    @include responsive($breakpoint-xmedium) {
+      background: url("/assets/swl/interface/sempli-lg-home.webp") no-repeat 100% 88%;
+      background-size: cover;
+    }
+
+    @include responsive($breakpoint-xxlarge) {
+      background: url("/assets/swl/interface/sempli-bg-home.webp") no-repeat 100% 88%;
+      background-size: cover;
+    }
+  }
+
+  &.announcement {
+    @include responsive-max($breakpoint-large) {
+      background: url("/assets/swl/interface/sempli-md-banner-announce.webp") no-repeat 100%;
+      background-size: cover;
+    }
+
+    @include responsive($breakpoint-large) {
+      background: url("/assets/swl/interface/sempli-banner-announce.webp") no-repeat 100%;
+      background-size: cover;
+    }
+  }
+
+  &.ongoing {
+    background: url("/assets/swl/interface/sempli-banner-ongoing.webp") no-repeat 100%;
+    background-size: cover;
+  }
+
+  &.sempli-connects {
+    background: url("/assets/swl/interface/sempli-conecta-banner.webp") no-repeat 100%;
+    background-size: cover;
+
+    @include responsive-max($breakpoint-small) {
+      background: linear-gradient(#00000042, #00000042), url("/assets/swl/interface/sempli-conecta-banner.webp") no-repeat 100%;
+      background-size: cover;
+    }
+  }
+
+  &.ally-landing.index {
+    @include responsive($breakpoint-large) {
+      &.sempli-comfama {
+        background: url("/assets/swl/interface/comfama_sempli_alliance.webp") no-repeat 98% 50%;
+        @include background-retina("/assets/swl/interface/comfama_sempli_alliance.webp", 400px, 370px);
+        background-size: auto 400px;
+        margin-bottom: 40px;
+      }
+    }
+
+    @include responsive($breakpoint-xlarge) {
+      &.sempli-comfama {
+        background-position: 95% 10%;
+        background-size: auto 450px;
+      }
+    }
+  }
+
+  &.credit-lines.index {
+    @include responsive($breakpoint-large) {
+      &.grow-simple-section {
+        background: url("/assets/swl/interface/crecer_simple_sempli.webp") no-repeat 110% 50%;
+        @include background-retina("/assets/swl/interface/crecer_simple_sempli.webp", auto, 510px);
+        background-size: auto 450px;
+        margin-bottom: 40px;
+      }
+      &.ongoing-section {
+        background: url("/assets/swl/interface/ongoing.webp") no-repeat 110% 50%;
+        @include background-retina("/assets/swl/interface/ongoing.webp", 400px, 370px);
+        background-size: auto 450px;
+        margin-bottom: 40px;
+      }
+      &.sempli-women-section {
+        background: url("/assets/swl/interface/mujeres_sempli.webp") no-repeat 110% 50%;
+        @include background-retina("/assets/swl/interface/mujeres_sempli.webp", 400px, 370px);
+        background-size: auto 450px;
+        margin-bottom: 40px;
+      }
+      &.sustainable-companies-section {
+        background: url("/assets/swl/interface/sostenible.webp") no-repeat 110% 50%;
+        @include background-retina("/assets/swl/interface/sostenible.webp", 400px, 370px);
+        background-size: auto 450px;
+        margin-bottom: 40px;
+      }
+      &.innovators-section {
+        background: url("/assets/swl/interface/innovadores_35.webp") no-repeat 110% 50%;
+        @include background-retina("/assets/swl/interface/innovadores_35.webp", 400px, 370px);
+        background-size: auto 450px;
+        margin-bottom: 40px;
+      }
+      &.independent-entrepreneurs-section {
+        background: url("/assets/swl/interface/independientes.webp") no-repeat 110% 50%;
+        @include background-retina("/assets/swl/interface/independientes.webp", 400px, 370px);
+        background-size: auto 450px;
+        margin-bottom: 40px;
+      }
+    }
+
+    @include responsive($breakpoint-xlarge) {
+      &.grow-simple-section {
+        background-position: 105% 65%;
+        background-size: auto 650px;
+      }
+      &.ongoing-section {
+        background-position: 105% 50%;
+        background-size: auto 700px;
+      }
+      &.sustainable-companies-section {
+        background-position: 105% 100%;
+        background-size: auto 650px;
+      }
+
+      &.innovators-section {
+        background-position: 105% 100%;
+        background-size: auto 650px;
+      }
+
+      &.sempli-women-section, &.independent-entrepreneurs-section {
+        background-position: 105% 35%;
+        background-size: auto 600px;
+      }
+    }
+  }
+
+  &.insurance-entrepreneur-plan {
+    @include responsive($breakpoint-large) {
+      background: url("/assets/swl/interface/illustration-02.webp") no-repeat 110% 50%;
+      @include background-retina("/assets/swl/interface/illustration-02.webp", 400px, 370px);
+      background-size: auto 450px;
+      margin-bottom: 40px;
+    }
+
+    @include responsive($breakpoint-xlarge) {
+      background-position: 90% 60%;
+      background-size: auto 500px;
+    }
+  }
+
+  // Confirmación de Email
+  &.email-confirmation.index,
+  &.legal-authorization.index,
+  &.not-interested-confirmation.index {
+    @include responsive($breakpoint-medium) {
+      &.confirmed, &.already_confirmed {
+        background: url("/assets/swl/interface/illustration-05.webp") no-repeat 110% 50%;
+        @include background-retina("/assets/swl/interface/illustration-05.webp", 400px, 370px);
+        background-size: auto 370px;
+        margin-bottom: 40px;
+      }
+      &.error, &.rejected, &.cancel-application {
+        background: url("/assets/swl/interface/illustration-12.webp") no-repeat 110% 50%;
+        @include background-retina("/assets/swl/interface/illustration-12.webp", 400px, 370px);
+        background-size: auto 370px;
+        margin-bottom: 40px;
+      }
+    }
+
+    @include responsive($breakpoint-xmedium) {
+      &.confirmed, &.already_confirmed, &.error, &.rejected, &.cancel-application {
+        background-position: 100% 50%;
+        background-size: auto 400px;
+        min-height: 693px;
+        margin-bottom: 80px;
+      }
+    }
+
+    @include responsive($breakpoint-large) {
+      &.confirmed, &.already_confirmed, &.error, &.rejected, &.cancel-application {
+        background-position: 90% 35%;
+        background-size: auto 500px;
+      }
+    }
+  }
+
+  &.page-not-found {
+    @include responsive($breakpoint-medium) {
+      background: url("/assets/swl/interface/illustration-12.webp") no-repeat 80% 50%;
+      background-size: auto 80%;
+      margin-bottom: 40px;
+    }
+
+    @include responsive($breakpoint-xmedium) {
+      background-position: 100% 50%;
+      background-size: auto 70%;
+      min-height: 693px;
+      margin-bottom: 80px;
+    }
+
+    @include responsive($breakpoint-large) {
+      background-position: 80% 35%;
+      background-size: auto 100%;
+    }
+  }
+}
+
+.no-webp body#landing section.hero-wrapper {
+  &.home.index {
+    @include responsive($breakpoint-xmedium) {
+      background: url("/assets/swl/interface/sempli-lg-home.jpg") no-repeat 100% 88%;
+      background-size: cover;
+    }
+
+    @include responsive($breakpoint-xxlarge) {
+      background: url("/assets/swl/interface/sempli-bg-home.jpg") no-repeat 100% 88%;
+      background-size: cover;
+    }
+  }
+
+  &.announcement {
+    @include responsive-max($breakpoint-large) {
+      background: url("/assets/swl/interface/sempli-md-banner-announce.jpg") no-repeat 100%;
+      background-size: cover;
+    }
+
+    @include responsive($breakpoint-large) {
+      background: url("/assets/swl/interface/sempli-banner-announce.jpg") no-repeat 100%;
+      background-size: cover;
+    }
+  }
+
+  &.ongoing {
+    background: url("/assets/swl/interface/sempli-banner-ongoing.png") no-repeat 100%;
+    background-size: cover;
+  }
+
+  &.sempli-connects {
+    background: url("/assets/swl/interface/sempli-conecta-banner.png") no-repeat 100%;
+    background-size: cover;
+
+    @include responsive-max($breakpoint-small) {
+      background: linear-gradient(#00000042, #00000042), url("/assets/swl/interface/sempli-conecta-banner.png") no-repeat 100%;
+      background-size: cover;
+    }
+  }
+
+  &.ally-landing.index {
+    @include responsive($breakpoint-large) {
+      &.sempli-comfama {
+        background: url("/assets/swl/interface/comfama_sempli_alliance.png") no-repeat 98% 50%;
+        @include background-retina("/assets/swl/interface/comfama_sempli_alliance.png", 400px, 370px);
+        background-size: auto 400px;
+        margin-bottom: 40px;
+      }
+    }
+
+    @include responsive($breakpoint-xlarge) {
+      &.sempli-comfama {
+        background-position: 95% 10%;
+        background-size: auto 450px;
+      }
+    }
+  }
+
+  &.credit-lines.index {
+    @include responsive($breakpoint-large) {
+      &.grow-simple-section {
+        background: url("/assets/swl/interface/crecer_simple_sempli.png") no-repeat 110% 50%;
+        @include background-retina("/assets/swl/interface/crecer_simple_sempli.png", auto, 510px);
+        background-size: auto 450px;
+        margin-bottom: 40px;
+      }
+      &.ongoing-section {
+        background: url("/assets/swl/interface/ongoing.png") no-repeat 110% 50%;
+        @include background-retina("/assets/swl/interface/ongoing.png", 400px, 370px);
+        background-size: auto 450px;
+        margin-bottom: 40px;
+      }
+      &.sempli-women-section {
+        background: url("/assets/swl/interface/mujeres_sempli.png") no-repeat 110% 50%;
+        @include background-retina("/assets/swl/interface/mujeres_sempli.png", 400px, 370px);
+        background-size: auto 450px;
+        margin-bottom: 40px;
+      }
+      &.sustainable-companies-section {
+        background: url("/assets/swl/interface/sostenible.png") no-repeat 110% 50%;
+        @include background-retina("/assets/swl/interface/sostenible.png", 400px, 370px);
+        background-size: auto 450px;
+        margin-bottom: 40px;
+      }
+      &.innovators-section {
+        background: url("/assets/swl/interface/innovadores_35.png") no-repeat 110% 50%;
+        @include background-retina("/assets/swl/interface/innovadores_35.png", 400px, 370px);
+        background-size: auto 450px;
+        margin-bottom: 40px;
+      }
+      &.independent-entrepreneurs-section {
+        background: url("/assets/swl/interface/independientes.png") no-repeat 110% 50%;
+        @include background-retina("/assets/swl/interface/independientes.png", 400px, 370px);
+        background-size: auto 450px;
+        margin-bottom: 40px;
+      }
+    }
+
+    @include responsive($breakpoint-xlarge) {
+      &.grow-simple-section {
+        background-position: 105% 65%;
+        background-size: auto 650px;
+      }
+      &.ongoing-section {
+        background-position: 105% 125%;
+        background-size: auto 650px;
+      }
+
+      &.sustainable-companies-section {
+        background-position: 105% 125%;
+        background-size: auto 650px;
+      }
+
+      &.innovators-section {
+        background-position: 110% 100%;
+        background-size: auto 650px;
+      }
+
+      &.sempli-women-section, &.innovators-section, &.independent-entrepreneurs-section {
+        background-position: 105% 35%;
+        background-size: auto 600px;
+      }
+    }
+  }
+
+  &.insurance-entrepreneur-plan {
+    @include responsive($breakpoint-large) {
+      background: url("/assets/swl/interface/illustration-02.png") no-repeat 110% 50%;
+      @include background-retina("/assets/swl/interface/illustration-02.png", 400px, 370px);
+      background-size: auto 450px;
+      margin-bottom: 40px;
+    }
+
+    @include responsive($breakpoint-xlarge) {
+      background-position: 90% 60%;
+      background-size: auto 500px;
+    }
+  }
+
+  // Confirmación de Email
+  &.email-confirmation.index,
+  &.legal-authorization.index,
+  &.not-interested-confirmation.index {
+    @include responsive($breakpoint-medium) {
+      &.confirmed, &.already_confirmed {
+        background: url("/assets/swl/interface/illustration-05.png") no-repeat 110% 50%;
+        @include background-retina("/assets/swl/interface/illustration-05.png", 400px, 370px);
+        background-size: auto 370px;
+        margin-bottom: 40px;
+      }
+      &.error, &.rejected, &.cancel-application {
+        background: url("/assets/swl/interface/illustration-12.png") no-repeat 110% 50%;
+        @include background-retina("/assets/swl/interface/illustration-12.png", 400px, 370px);
+        background-size: auto 370px;
+        margin-bottom: 40px;
+      }
+    }
+
+    @include responsive($breakpoint-xmedium) {
+      &.confirmed, &.already_confirmed, &.error, &.rejected, &.cancel-application {
+        background-position: 100% 50%;
+        background-size: auto 400px;
+        min-height: 693px;
+        margin-bottom: 80px;
+      }
+    }
+
+    @include responsive($breakpoint-large) {
+      &.confirmed, &.already_confirmed, &.error, &.rejected, &.cancel-application {
+        background-position: 90% 35%;
+        background-size: auto 500px;
+      }
+    }
+  }
+
+  &.page-not-found {
+    @include responsive($breakpoint-medium) {
+      background: url("/assets/swl/interface/illustration-12.png") no-repeat 110% 50%;
+      @include background-retina("/assets/swl/interface/illustration-12.png", 400px, 370px);
+      background-size: auto 370px;
+      margin-bottom: 40px;
+    }
+
+    @include responsive($breakpoint-xmedium) {
+      background-position: 100% 50%;
+      background-size: auto 400px;
+      min-height: 693px;
+      margin-bottom: 80px;
+    }
+
+    @include responsive($breakpoint-large) {
+      background-position: 90% 35%;
+      background-size: auto 500px;
+    }
+  }
+}
+
+body#landing {
+  // Homepage
+
+  section.hero-wrapper.home.index {
+    padding: 20px 0;
+
+    @include responsive($breakpoint-xmedium) {
+      min-height: calc(100vh - 84px);
+      padding: 80px 0;
+    }
+
+    @include responsive($breakpoint-xxlarge) {
+      background-position-y: 60% !important;
+      padding: 150px 0;
+    }
+  }
+
+  section.hero-wrapper.allies {
+    padding: 20px 0;
+    background-size: cover;
+    min-height: calc(100vh - 84px);
+
+    .allies-intro {
+      padding: 60px 40px;
+      .allies-title {
+        color: $color-dark-gray;
+        padding: 20px 0 10px;
+      }
+      .allies-subtitle {
+        color: $color-secondary-dark;
+        font-weight: 500;
+      }
+    }
+
+    @include responsive($breakpoint-xmedium) {
+      padding: 80px 0;
+    }
+  }
+
+  // Cómo funciona - Index
+  section.hero-wrapper.como-funciona.index {
+    @include responsive($breakpoint-medium) {
+      background: url("/assets/swl/interface/illustration-07.png") no-repeat 110% 50%;
+      background-size: 400px 370px;
+      @include background-retina("/assets/swl/interface/illustration-07.png", 400px, 370px);
+      margin-bottom: 40px;
+    }
+
+    @include responsive($breakpoint-xmedium) {
+      background-position: 110% 100%;
+      background-size: 600px 555px;
+      min-height: 693px;
+      margin-bottom: 80px;
+    }
+
+    @include responsive($breakpoint-large) {
+      background-position: 100% 100%;
+      background-size: 750px 693px;
+    }
+  }
+}
+
+
+// body#landing {
+//   // Homepage
+//   &.home {
+//     section.hero-wrapper {
+//       @include responsive($breakpoint-medium) {
+//         background: url("/assets/swl/interface/illustration-01.png") no-repeat 110% 50%;
+//         background-size: 1000px 789px;
+//         @include background-retina("/assets/swl/interface/illustration-01.png", 1000px, 789px);
+//       }
+
+//       @include responsive($breakpoint-xmedium) {
+//         background-position: 110% 0;
+//         background-size: 800px 631px;
+//         min-height: 631px;
+//       }
+//     }
+//   }
+// }
+