/*~~~~~~ FONTS ~~~~~~*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
@font-face { font-family: 'ecilight'; src: url('../fonts/ecifont-light-webfont.woff2') format('woff2'), url('../fonts/ecifont-light-webfont.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'ecimedium'; src: url('../fonts/ecifont-medium-webfont.woff2') format('woff2'), url('../fonts/ecifont-medium-webfont.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'eciregular'; src: url('../fonts/ecifont-regular-webfont.woff2') format('woff2'), url('../fonts/ecifont-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; }

/*~~~~~~ RUTAS Y COLORES ~~~~~~*/
@green: #D3E8D1;
@neutral: #1A1C18;
@font: #242424;
@grey: #5f5f5f;
@url: "../images/";


/*~~~~~~ BREAKPOINTS ~~~~~~*/
@phone: ~"screen and (max-width: 720px)"; // < 720
@tablet-only: ~"(min-width: 768px) and (max-width: 991px)"; // > 720 < 1199
@tablet-landscape: ~"(min-width: 992px) and (max-width: 1280px)"; // > 900
@desktop-up: ~"(min-width: 1280px)"; // > 1200
@big-desktop-up: ~"screen and (min-width: 1400px)"; // > 1800

/*~~~~~~ CLASES LESS ~~~~~~*/
.background (@imagen, @position1: top, @position2: center, @repeat: no-repeat, @size: cover, @bgColor: transparent) {
   background:url('@{url}@{imagen}') @position1 @position2 @repeat @bgColor;
   background-size:@size;
}
.box-shadow(@arguments) {
	-webkit-box-shadow: @arguments;
	-moz-box-shadow: @arguments;
	box-shadow: @arguments;
}
.transform(@arguments) {
   -webkit-transform: @arguments;  
   -moz-transform: @arguments; 
   -ms-transform: @arguments;
   -o-transform: @arguments;
   transform: @arguments;
}
.font (@size: 16px, @color: @colorTipo, @tipo: 'Poppins', @lineheight:26px) {
	font-weight:normal;
	color:@color;
	font-size:@size;
   font-family:@tipo;
   line-height:@lineheight;
}


/*~~~~~~ RESETS ~~~~~~*/
html { scroll-behavior: smooth; }
html,body{ min-height:100%; background-color:#FFF; }
html, body, div, applet, object, iframe, h1, h2, h3,
h4, h5, h6, p, blockquote, pre, a, abbr, acronym,
address, big, cite, code, del, dfn, font, img, ins,
kbd, q, s, samp, small, strike, sub, tt,
var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td { 
   -webkit-text-size-adjust: none; z-index:4; margin: 0; padding: 0; border: 0; outline: 0; color:@font; font-family:'Poppins'; font-weight: 400; font-style: inherit; vertical-align: baseline; 
   @media @tablet-landscape {
      font-size:14px;
   }
}
:focus { outline: 0; }
a, a:link, a:visited, a:hover, a:active{text-decoration:none;}
table {	border-collapse: separate;border-spacing: 0;}
th, td {text-align: left; font-weight: normal;}
img, iframe {border: none; text-decoration:none; }
ol, ul {list-style: none;}
input, textarea, select, button {font-size: 100%;font-family: inherit;}
sup { font-size: .7rem; }

body { overflow:inherit!important; overflow-x:hidden!important; }

/** GENÉRICO **/
.button {
   padding:16px 24px;
   border-radius:16px;
   background-color:@font;
   .font(1rem, #FFF, 'Poppins', 'normal');
   img {
      vertical-align: bottom;
   }
   &:hover {
      color:#FFF;
      background-color: @font;
   }
   &.btn-secondary {
      background-color:transparent;
      border: solid 1px @font;
      color:@font;
      &:hover {
         background:#FFF;
      }
   }
   @media @phone {
      font-size:12px;
      padding:12px 24px;
      border-radius:12px;
      img {
         width:24px;
      }
   }
}
h1 {
   .font(7rem, @neutral, 'Poppins', 7.5rem);
   margin-bottom:5rem;
   img {
      vertical-align: middle;
   }
   @media @phone {
      font-size:2.5rem;
      line-height: 4.5rem;
      margin-bottom:3rem;
      img { height:65px; }
   }
}
h2 {
   .font(3.5rem, @font, 'eciregular', 4.5rem);
   @media @phone {
      font-size:28px;
      line-height: 40px;
   }
}
h3 {
   .font(26px, @font, 'eciregular', 38px);
   @media @phone {
      font-size:1rem;
      line-height:1.5rem;
   }
}
p.sub-tit {
   .font(18px, inherit, 'ecilight', 30px);
   @media @phone {
      font-size:14px;
      line-height:24px;
   }
}

p.sub-tit-remember {
   .font(18px, inherit, 'ecilight', 30px);
   @media @phone {
      font-size:14px;
      line-height:24px;
   }
}

.sub-tit-remember{
   margin: auto 10%;
}

main {
   margin-top: 100px;
   @media @phone {
      margin-top:0;
   }
   @media @tablet-only {
      margin-top:0;
   }
}

.slide {
   background-color:@green;
   padding-top:9.5rem;
   padding-bottom:9.5rem;
   @media @phone {
      padding-top:6.25rem;
      padding-bottom:6.25rem;
   }
}

.facilita {
   padding-top:7.5rem;
   padding-bottom:7.5rem;
   .listado {
      margin-top:3.5rem;
      padding-top:2.5rem;
      padding-bottom:3.5rem;
      border-top:solid 1px #D8D9DA;
      border-bottom:solid 1px #D8D9DA;
      p {
         .font(18px, @neutral, 'ecilight', 30px);
      }
      .icon {
         background-color:@green;
         border-radius:100%;
         padding:14px 10px;
         @media @phone {
            max-width: 52px;
            margin: 0 auto 40px!important;
         }
      }
   }
   @media @phone {
      padding-top:5rem;
      padding-bottom:5rem;
   }
}
.revolving {
   padding-top:7.5rem;
   padding-bottom:7.5rem;
   background-color:#F9F9F9;
   .cards {
      margin-top:5rem;
      .card {
         background-color:#E9EDF0;
         padding:1rem;
         border:0;
         border-radius:1.5rem;
         .card-body {
            padding:0 1rem;
            h3 {
               .font(26px, @font, 'eciregular', 38px);
               margin-top:2rem;
               margin-bottom:150px;
            }
            p {
               .font(18px, @font, 'ecilight', 30px);
            }
         }
         @media @phone {
            margin-bottom:1rem;
            .card-body {
               padding:0 .5rem;
               h3 {
                  .font(21px, @font, 'eciregular', 32px);
                  margin-top:1.5rem;
                  margin-bottom:3.5rem;
               }
               p {
                  font-size:14px;
                  line-height:24px;
               }
            }
         }
      }
      @media @phone {
         margin-top:3rem;
      }
      @media @tablet-only {
         & > div:last-child {
            margin-top:1.5rem;
         }
      }
   }
   @media @phone {
      padding-top:5rem;
      padding-bottom:5rem;   
   }
}

.solicitar {
   padding-top:7.5rem;
   background-color:#F1F1EA;
   .container-lg:first-child .row {
      margin-bottom:5rem;
   }
   .feature {
      & > div {
         padding:4rem 1rem;
         border-top:solid 1px #D8D9DA;
         border-bottom:solid 1px #D8D9DA;
      }
      h4 {
         .font(25px, @font, 'ecilight', 38px);
         strong {
            font-family:'ecimedium';
         }
      }
   }
   .cta {
      margin-top:5rem;
      text-align: center;
   }
   .premios {
      padding-top:12.5rem;
      padding-bottom:12.5rem;
      @media @phone {
         padding-top:5rem;
         padding-bottom:5rem;
      }
   }
   .tarjeta {
      margin-bottom:7rem;
      background:@green;
      border-radius:24px;
   }
   .px-6 {
      padding-inline:4rem;
      p {
         .font(18px, @grey, 'ecilight', 30px);
         margin-bottom:3rem;
      }
      @media @phone {
         padding:3rem;
      }
   }
   @media @phone {
      padding-top:5rem;
      padding-bottom:5rem;   
      .container-lg:first-child .row {
         margin-bottom:3rem;
      }   
      .feature {
         & > div {
            padding:3rem 3rem;
         }
         h4 {
            font-size:1rem;
            line-height:1.75rem;
         }   
      } 
      .tarjeta {
         margin-bottom: 0;
      }  
   }
}

.modalidad {
   background-color:#E3E3DC;
   padding-top:3.5rem;
   padding-bottom:3.5rem;
   .icon {
      background-color:#FFF;
      border-radius:100%;
      padding: 6px;
      display: inline-block;
      height: 56px;
   }
   p {
      .font(26px, @grey, 'ecilight',38px);
      a {
         color:inherit;
         text-decoration: underline;
      }
   }
   @media @phone {
      p {
         font-size:14px;
         line-height: 24px;
         text-align: center;
         margin-top:40px;
      }
   }
}

.condiciones {
   background-color:#90918B;
   padding-top:3.5rem;
   padding-bottom:3.5rem;
   h3 {
      .font(34px, #FFF, 'eciregular', 46px);
   }
   p {
      .font(14px, #FFF, 'ecilight', 24px);
      margin-bottom:2rem;
      &:last-child { margin-bottom:0; }
   }
   @media @phone {
      padding-inline:12px;
      h3 {
         font-size:21px;
         line-height:32px;
         margin-bottom:3rem;
         br { display:none; }
      }
   }
}




@media @phone {
   footer.footer {
      padding-top:0;
   }
}