/*@font-face {
	font-family: 'AvenirNext';
	font-style: normal;
	font-weight: normal;
	src: local('AvenirNext'), url('../fonts/AvenirNext.otf') format('otf');
}*/

@keyframes pulse {
  25% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
}

html {
  font-size: 1rem;
  overflow-x: hidden;
}

body {
  background: #fff;
  color: #6B7280;
  font-family: 'Roboto', sans-serif;
  font-size: 1rem; /* 16px */
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden !important;
  padding-right: 0 !important; /*.modal-open*/
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Inter', sans-serif;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  color: #161E2E;
}

h1, .h1 {
  font-size: 4.625rem; /* 74px */
  font-weight: 700;
  letter-spacing: -3.4px;
  line-height: 1.14;
}

h2, .h2 {
  font-size: 3.4375rem; /* 55px */
  font-weight: 700;
  letter-spacing: -1.1px;
}

h3, .h3 {
  font-size: 2.25rem; /* 36px */
  font-weight: 400;
  letter-spacing: -1.25px;
}

h4, .h4 {
  font-size: 1.25rem; /* 20px */
}

h5, .h5 {
  font-size: 1rem; /* 16px */
}

h6, .h6 {
  font-size: 0.875rem; /* 14px */
}

.capitalized {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #797979;
}

a {
  color: #c68a3c;
}

a.active,
a:active,
a:focus,
a:hover {
  color: #c68a3c;
  text-decoration: none;
}

b, strong {
  font-weight: 600;
}

u {
  font-weight: bold;
  color: #b78d5a;
}

i {
  font-style: italic;
}

img {
  height: auto !important;
  max-width: 100% !important;
  /*mix-blend-mode: multiply;*/
}

iframe {
  max-width: 100%;
}

/* Botones */
.btn {
  border: none;
  border-radius: 9999px;
  box-shadow: none;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 1rem; /*16px*/
  line-height: 1.25; /*20px*/
  padding: 0.875rem 1.25rem; /*14px 20px*/
  letter-spacing: 0.3px;
  text-align: center;
  min-width: 170px;
}

.btn-large {
  font-size: 1.3125rem; /*20px*/
  line-height: 1.25; /*24px*/
  padding: 1.25rem; /*20px*/
  letter-spacing: 0.4px;
  min-width: 226px;
}

.btn-small {
  font-size: 1rem; /*16px*/
  line-height: 1.25; /*20px*/
  padding: 0.5rem 1.25rem; /*8px *20px*/
  letter-spacing: 0.3px;
  min-width: 126px;
}

.btn:not(.btn-link) {
  display: inline-block;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
}

.btn:not(.btn-link):hover {
  animation-name: pulse;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.btn-link {
  padding: 0;
}

.btn-dark {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(248, 229, 228, 0.25) 42.14%, rgba(181, 187, 224, 0.25) 82.73%, rgba(175, 209, 237, 0.25) 100%), #000000;
  color: #fff;
}

.btn-dark:hover,
.btn-dark:focus {
  color: #fff;
}

.btn-light {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(248, 229, 228, 0.7) 42.14%, rgba(181, 187, 224, 0.7) 82.73%, rgba(175, 209, 237, 0.7) 100%), #FFFFFF;
  color: #000000;
}

.btn-light:hover,
.btn-light:focus {
  color: #000000;
}

.btn-primary {
  background-clip: padding-box; /* !importanté */
  background: linear-gradient(90deg, #E6C7DF 0%, #F4D0D4 31.77%, #A5C1E5 69.27%, #DBBBE7 96.88%);
}

 .btn-primary::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1;
  margin: 4px; /* !importanté */
  border-radius: inherit; /* !importanté */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(248, 229, 228, 0.25) 42.14%, rgba(181, 187, 224, 0.25) 82.73%, rgba(175, 209, 237, 0.25) 100%), #000000;
}

.btn-success {
  background-color: #FFD5C8;
  color: #000000;
}

.btn-success:hover,
.btn-success:focus {
  background-color: #FFD5C8 !important;
  color: #000000 !important;
  border-color: #FFD5C8 !important;
}

/* Container */
.container {
  max-width: 1230px;
}

/*
--------------------------------------------------------------------------------
  HEADER
--------------------------------------------------------------------------------
*/
/* Logo */
#header .navbar-brand {
  max-width: 105px;
  padding: 0;
  margin: 0;
}

/* Navbar */
#header.navbar {
  color: #FFFFFF;
  padding-top: 0;
  padding-bottom: 0;
}

#header.navbar:hover,
#header.navbar.hover {
  /*background: url(../images/nav-bg.svg) no-repeat 100% 0;*/
  /*background-size: auto 100%;*/
  background-color: #000;
}

#header .navbar-brand {
  margin: 24px 0;
}

#header .navbar-nav {
  margin-left: auto;
}

#header .navbar-nav li {
  position: relative;
  cursor: pointer;
}

#header .navbar-nav > li + li {
  margin-left: 6px;
}

#header .navbar-nav a {
  color: #FFFFFF;
  font-size: 1rem; /*16px*/
  line-height: 1.5;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  display: inline-block;
  padding: 27px 20px 24px 20px;
  border-bottom: 3px solid transparent;
}

#header .navbar-nav a:hover,
#header .navbar-nav a.active {
  color: #fff;
  background: linear-gradient(180deg, rgba(233, 188, 232, 0) 0%, rgba(249, 250, 252, 0.35) 100%);
  border-style: none none solid none;
  border-width: 3px;
  border-image-slice: 1;
  border-image-source: linear-gradient(180deg, #FFD5C8 0%, #E5B7ED 100%);
}

/*
--------------------------------------------------------------------------------
  HERO
--------------------------------------------------------------------------------
*/
#hero {
  background: url(../images/hero-bg.jpg) no-repeat 0 0;
  background-size: cover;
  background-position: top;
  background-color: #000;
  padding: 160px 0 0 0;
  color: #fff;
}

#hero-info {
  padding-bottom: 72px;
}

#hero-info h1 {
  color: #fff;
  line-height: 0.9;
}

#hero-info h1 strong {
  background-image: -webkit-linear-gradient(180deg,#E6C7DF 0%, #F4D0D4 31.77%, #A5C1E5 69.27%, #DBBBE7 96.88%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#hero-info p {
  max-width: 405px;
  font-size: 1.25rem; /*20px*/
  line-height: 1.5;
  margin: 37px 0 50px 0;
}

#hero-info .cta-info {
  max-width: 405px;
}

#hero-info .cta-info .btn {
  margin-bottom: 30px;
}

#hero-info .cta-info {
  max-width: 405px;
}

#hero-banner {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(248, 229, 228, 0.25) 42.14%, rgba(181, 187, 224, 0.25) 82.73%, rgba(175, 209, 237, 0.25) 100%), #000000;
  padding: 50px 0 35px 0;
  color: #fff;
}

#hero-banner .container {
  max-width: 938px;
}

#hero-banner h3 {
  font-weight: 700;
  font-size: 36px;
  line-height: 1.36;
  letter-spacing: -1.25px;
  color: #FFFFFF;
  margin-bottom: 20px;
}

#hero-banner p {
  font-family: 'AvenirNext', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 24px;
  line-height: 33px;
  color: #ABABAB;
}

#hero-banner .row-buttons .first {
  margin-top: 24px;
}

/*
--------------------------------------------------------------------------------
  HOW
--------------------------------------------------------------------------------
*/
.section-title .capitalized {
  margin-bottom: 30px;
}

.section-title h2 {
  margin-bottom: 100px;
}

#how {
  text-align: center;
  padding: 119px 0 115px 0;
}

#how h2 {
  max-width: 630px;
  margin-left: auto;
  margin-right: auto;
}

.row-how {
  margin-left: -37px;
  margin-right: -37px;
}

.row-how > div {
  padding-left: 37px;
  padding-right: 37px;
  margin-bottom: 74px;
}

.row-how h3 {
  margin: 30px 0 20px 0;
}

.row-how p {
  max-width: 260px;
  margin: 0 auto;
}

#cta-how {
  margin-top: 16px;
}

/*
--------------------------------------------------------------------------------
  USE
--------------------------------------------------------------------------------
*/
#use {
  text-align: center;
  padding: 120px 0;
  background: url(../images/use-bg.jpg) no-repeat 50% 0;
  background-size: cover;
  background-position: center;
}

.row-use {
  margin-right: -30px;
  margin-left: -30px;
}

.row-use > div {
  padding: 30px;
}

.use-block {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(248, 229, 228, 0.25) 42.14%, rgba(181, 187, 224, 0.25) 82.73%, rgba(175, 209, 237, 0.25) 100%), #000000;
  box-shadow: 0px 20px 25px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 50px 70px 60px 70px;
  color: #B2B2B2;
  text-align: left;
  height: 100%;
}

.use-block h3 {
  font-size: 2.25rem; /*36px*/
  line-height: 1.36;
  letter-spacing: -1.25px;
  color: #FFFFFF;
  margin-bottom: 20px;
}

.use-block p {
  margin-bottom: 30px;
}

/*
--------------------------------------------------------------------------------
  TRY
--------------------------------------------------------------------------------
*/
#try {
  background: #000;
  color: #B2B2B2;
  padding: 150px 0 0 0;
}

#try .section-title {
  max-width: 778px;
}

#try h2,
#try h3 {
  color: #fff;
}

.row-try {
  margin-left: -30px;
  margin-right: -30px;
  margin-bottom: 40px;
}

.row-try > div {
  padding-left: 30px;
  padding-right: 30px;
  margin-bottom: 60px;
}

.row-try > div > div {
  max-width: 260px;
}

.row-try h3 {
  margin: 35px 0 20px 0;
}

#cta-try-container {
  background: linear-gradient(180deg, #000 50%, #fff 50%);
}

#cta-try {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

#cta-try img{
  border-radius: 9px;
}

#cta-try > .btn {
  position: absolute;
  margin-top: -32px; /* El height de la sombra */
}

/*
--------------------------------------------------------------------------------
  FAQs
--------------------------------------------------------------------------------
*/
#faqs {
  padding: 60px 0 120px 0;
}

#faqs > .container:first-child {
  max-width: 830px;
}

#faqs .section-title {
  text-align: center;
}

#faqs .text h3 {
  font-size: 1.25rem;
  line-height: 1.5;
  margin-bottom: 4px;
  font-family: 'Roboto', sans-serif;
  letter-spacing: normal;
}

#faqs .text p {
  font-size: 1.25rem;
  line-height: 1.5;
  margin-bottom: 45px;
}

#cta-faqs {
  background: #000000;
  border-radius: 8px;
  padding: 88px 64px 133px 100px;
  color: #B2B2B2;
  text-align: left;
  margin-top: 240px;
}

#cta-faqs p {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 2.25rem; /*36px*/
  line-height: 1.36;
  letter-spacing: -1.25px;
  color: #FFFFFF;
  max-width: 395px;
  margin: 0;
}

#cta-faqs p b,
#cta-faqs p strong {
  background-image: -webkit-linear-gradient(300deg,#E6C7DF 0%, #F4D0D4 31.77%, #A5C1E5 69.27%, #DBBBE7 96.88%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#cta-faqs .btn {
  display: block;
}

/*
--------------------------------------------------------------------------------
  PAGE: GENERALES
--------------------------------------------------------------------------------
*/

/* Hover shutter links */
.effect-shutter a {
  height: 30px;
  position: relative;
  z-index: 1;
  top: 0;
  transform-origin: top left;
  overflow:hidden;
  display: block;
  font-family: sans-serif;
  text-decoration: none;
  font-size: 18px;
  font-family: sans-serif;
  color: #2e2d33;
}

.effect-shutter a > span {
  display: block;
}

.effect-shutter a:hover > span {
  transform: translate3d(0,-100%,0);
  transition: transform 0.5s cubic-bezier(.165,.84,.44,1);
}

/*
--------------------------------------------------------------------------------
  PAGE: GENERALES
--------------------------------------------------------------------------------
*/
.modal-dialog {
  max-width: 1000px;
}

.modal-content {
  background: linear-gradient(180deg, #E6C7DF 10%, #F4D0D4 30%, #A5C1E5 50%, #DBBBE7 70%, #E6C7DF 100%);
  box-shadow: 0px 20px 25px 0px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 2px;
}

.modal-content-container {
  background: #4A4A4A;
  color: #fff;
  padding: 100px;
  border-radius: 8px;
}

.modal-backdrop.show {
  opacity: 0.67;
}

.modal-body {
  text-align: center;
  max-width: 710px;
  margin: 0 auto;
}

.modal-body .h1 {
  background-image: -webkit-linear-gradient(180deg,#E6C7DF 0%, #F4D0D4 31.77%, #A5C1E5 69.27%, #DBBBE7 96.88%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 40px;
}

.modal-body p {
  font-size: 1.25rem;
  line-height: 1.5;
  margin-bottom: 25px;
}

.modal-body ul.features {
  padding: 0;
  list-style: none outside none;
  font-size: 30px;
  line-height: 42px;
  margin-bottom: 35px;
}

.modal-body .capitalized {
  color: #fff;
  margin-bottom: 17px;
}

.modal-body .menu {
  padding: 0;
  list-style: none outside none;
  column-count: 2;
  max-width: 400px;
  margin: 0 auto;
}

.modal-body .menu a {
  color: #9EE7FF;
  text-decoration: underline;
  margin-bottom: 12px;
  font-size: 20px;
  text-align: left;
}

.modal-body .menu li:nth-child(2) a {
  color: #D4DBDB;
}

.modal-body .menu li:nth-child(3) a {
  color: #D7A6FF;
}

.modal-body .menu li:nth-child(4) a {
  color: #FFD5C8;
}

/* Alertas */
.alert-dark {
  box-shadow: 0px 20px 25px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  background: linear-gradient(180deg, #E6C7DF 10%, #F4D0D4 30%, #A5C1E5 50%, #DBBBE7 70%, #E6C7DF 100%);
  padding: 1px;
}

.alert-dark > div {
  background: #4A4A4A;
  box-shadow: 0px 20px 25px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  color: #fff;
  border: none;
  padding: 12px 15px;
}

#cookie-alert {
  margin-left: auto;
  margin-right: auto;
  max-width: 910px;
  font-size: 1rem; /*16px*/
}

#cookie-alert p {
  margin: 0;
}

#cookie-alert .btn-success {
  margin-left: auto;
}

/*
--------------------------------------------------------------------------------
  FOOTER
--------------------------------------------------------------------------------
*/
#footer .navbar {
  border-top: 1px solid #EDF2F7;
  padding: 110px 15px;
}

/* Menu */
#footer ul.effect-shutter {
  padding: 0;
  margin-bottom: 0;
  list-style: none outside none;
  column-count: 3;
}

#footer ul.effect-shutter a {
  color: #313131;
  font-size: 1.25rem; /*20px*/
  line-height: 1.5;
  text-decoration: underline;
  margin-bottom: 10px;
}

/* Copyright */
#copyright {
  background: url(../images/copyright-bg.png) no-repeat 0 0;
  background-size: cover;
  color: rgba(15, 15, 15, 0.36);
  padding: 38px 0;
  border-top: 1px solid #EDF2F7;
  border-bottom: 1px solid #EDF2F7;
}

#copyright .container {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

#copyright ul {
  list-style: none outside none;
  padding: 0;
  margin: 0;
}

#copyright ul li {
  display: inline-block;
  margin-left: 22px;
}

#copyright a {
  color: rgba(15, 15, 15, 0.36);
  font-weight: normal;
}

#copyright p {
  margin: 0;
}

#eu-cookie-law {
  position: fixed !important;
  bottom: 0;
  width: 80%;
}

/*
--------------------------------------------------------------------------------
  CLEAN TEMPLATE
--------------------------------------------------------------------------------
*/
body.clean-layout {
  background-color: #fff;
  color: #000;
  padding: 0;
}

.clean-layout header {
  padding: 30px 0 20px 0;
}

body.clean-layout a {
  color: #000;
}

.clean-layout #main {
  font-size: 1.25rem;
  line-height: 1.5;
  padding: 120px 0;
}

.clean-layout #main h1 {
  color: #000;
  font-size: 4.625rem; /*74px*/
  line-height: normal;
  margin-bottom: 80px;
}

.clean-layout #main h2 {
  color: #000;
  font-size: 2.25rem; /*36px*/
}

body.clean-layout #main a {
  /*color: #161E2E;*/
}

/*.clean-layout #main h2 {
  color: #161E2E;
  font-size: 3.4375rem; 55px
  line-height: 1.15;
}*/

/*.clean-layout #main h3 {
  color: #161E2E;
  font-size: 2.25rem; 36px
  line-height: 1.36;
}*/

.clean-layout #main p,
.clean-layout #main ul,
.clean-layout #main ol {
  margin-bottom: 2rem;
}

.clean-layout #page-terms h1 {
  margin-bottom: 40px;
}



/*
--------------------------------------------------------------------------------
  FINETUNING
--------------------------------------------------------------------------------
*/
#keyzen-preview{
      margin-bottom: -192px !important;
}
#keyzen-preview svg{
  width: 150% !important;
height: 100% !important;
transform: translate3d(2px, -88px, 0px )!important;

}

@media (max-width: 747.99px) {
  #keyzen-preview{
        margin-bottom: 0px !important;
  }
  #keyzen-preview svg{
    width: 150% !important;
  height: 100% !important;
  transform: translate3d(2px, -8px, 0px )!important;

  }
}