/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

:root {
  --blue: #007bff;
  --purple: #6f42c1;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #00cbc6;
  --white: #f8f7ff;
  --gray: #2b2d3b;
  --gray-dark: #1e1f2d;
  --primary: #00cbc6;
  --secondary: #2e313f;
  --success: #5be085;
  --info: #946af2;
  --warning: #f5d76e;
  --danger: #ff6a4f;
  --light: #f8f7ff;
  --dark: #191927;
  --osprey: #00cbc6;
  --teal: #00d7d2;
  --cyan: #26b5ce;
  --primary-light: #93e7e5;
  --zap-blue: #448aff;
  --green: rgba(91, 224, 133, .6);
  --purple-light: #b496f5;
  --purple-dark: #946af2;
  --purple-30: rgba(148, 106, 242, .3);
  --purple: #946af2;
  --blue-gray-80: rgba(137, 153, 175, .8);
  --gray-300: #8999af;
  --asphalt: #262735;
  --steel: rgba(46, 49, 63, .6);
  --slate: rgba(137, 153, 175, .2);
  --gray: rgba(137, 153, 175, .8);
  --black80: rgba(25, 25, 39, .6);
  --black60: rgba(25, 25, 39, .6);
  --indigo: #3d5afe;
  --pink: #ff5090;
  --red: #e43d6f;
  --orange: #ffa400;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: ‘Inter’ -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: -SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
}

*, :before, :after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-family: sans-serif;
  line-height: 1.15;
  margin: 0;
  padding: 0;
}

article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
  display: block
}

body {
  background-color: #191927;
  color: #f8f7ff;
  font-family: ‘Inter’ -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: left;
}

hr {
  opacity: 0.2;
  width: 100%;
}

h1 {
  font-size: 56px;
  font-weight: 800;
  line-height: 68px;
  margin: 0;
}

h2 {
  font-size: 28px;
  font-weight: 600;
  line-height: 34px;
  margin: 0;
}

p {
  font-size: 18px;
  font-weight: 400;
  line-height: 25px;
}

div.input {
  width: 100%;
}

input.primary {
  cursor: pointer;
  width: 100%;
}

input {
  background-clip: padding-box;
  border: 1px solid #2e313f;
  border-radius: 0.25rem;
  display: block;
  font-size: 1rem;
  font-weight: 400;
  height: 40px;
  line-height: 1.5;
  padding: 24px 20px;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  width: 100%;
  background-color: #191927;
  color: white;
  box-shadow: none;
  appearance: none;
  outline: none;
  position: relative;
}

input[type=text]:focus {
  border: 1px solid #00cbc6;
}

input[type=email]:focus {
  border: 1px solid #00cbc6;
}

input::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: rgba(137, 153, 175, .8) !important;
  opacity: 1 !important;
  /* Firefox */
}

input::-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: rgba(137, 153, 175, .8) !important;
}

input::-ms-input-placeholder {
  /* Microsoft Edge */
  color: rgba(137, 153, 175, .8) !important;
}

select {
  background-clip: padding-box;
  border: 1px solid #2e313f;
  border-radius: 0.25rem;
  display: block;
  font-size: 1rem;
  font-weight: 400;
  height: calc(1.5em + 0.75rem + 2px);
  line-height: 1.5;
  padding: 0.375rem 0.75rem;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  width: 100%;
  background-color: #191927;
  color: white;
  box-shadow: none;
  appearance: none;
  outline: none;
  position: relative;
}

.sr-only {
  clip: rect(0, 0, 0, 0);
  border-width: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.hs-button {
  color: #000;
  background-color: #00cbc6;
  background-clip: padding-box;
  border: 1px solid #00cbc6;
  border-radius: 0.25rem;
  display: block;
  font-weight: 400;
  padding: 0.375rem 0.75rem;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  width: fit-content;
  text-align: center;
  box-shadow: none;
  appearance: none;
  outline: none;
  position: relative;
  text-decoration: none;
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
  padding: 12px 16px;
  height: auto;
}

.cta-group .dnd-section > .row-fluid {
 justify-content: center;
  gap: 16px;
}

.cta-group .dnd-column:last-child a.hs-button {
  color: #F8F7FF;
  background-color: transparent;
  background-clip: padding-box;
  border: 1px solid #F8F7FF;
  border-radius: 0.25rem;
  display: block;
  font-weight: 400;
  padding: 0.375rem 0.75rem;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  width: fit-content;
  text-align: center;
  box-shadow: none;
  appearance: none;
  outline: none;
  position: relative;
  text-decoration: none;
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
  padding: 12px 16px;
  height: auto;
}

.hs-button:hover {
  opacity: 0.75;
}

.widget-type-form {
  background-color: #262735;
  padding: 30px;
  color: white;
  min-width: 350px;
  border-radius: 10px;
  box-shadow: 0 8px 16px rgb(0 0 0 / 20%);
}

h3.form-title {
  margin-top: 0;
  font-style: normal;
  font-weight: 700;
  font-size: 22px;
  line-height: 140%;
}

.hs-form-private {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 15px;
  width: 100%;
  align-items: stretch;
}

.app-header {
  margin: auto;
  max-width: 1140px;
  width: 100%;
  padding: 30px 15px 0 15px;
}


.app-container {
  position: relative;
  overflow: hidden;
  background-image: url(//7478034.fs1.hubspotusercontent-na1.net/hubfs/7478034/raw_assets/public/assets/gradient-for-lp.jpg);
  background-size: 100% 100vw;
  background-repeat: no-repeat;
}

.app-container-white {
  position: relative;
  overflow: hidden;
  background-color: white;
  
}
//.app-container::before {
//  content: "";
//  position: absolute;
//  width: 150vw;
//  height: 150vh;
//  top: -90%;
//    left: -35%;
//    z-index: -1;
//  background: url();

//}



.app-wrapper-hero {
  padding: 118px 0 30px 0;
  
}

.app-section {
  margin: auto;
  max-width: 1140px;
  width: 100%;
}

.app-flex {
  display: flex;
  align-items: center;
  padding: 15px;
  gap: 30px;
}

.app-flex-start {
  align-items: start;
}

.app-flex-center {
  display: flex;
  justify-content: center;
}

.app-flex-1 {
  flex: 1;
}

.app-wrapper {
    position: relative;
  overflow: hidden;
  padding: 60px 0;
  background-color: #262735;

}
.app-wrapper-hombre {
    position: relative;
  overflow: hidden;
  padding: 60px 0;
  background-color: none;
    background-image: url(//7478034.fs1.hubspotusercontent-na1.net/hubfs/7478034/raw_assets/public/assets/gradient-for-lp.jpg);
  background-size: 100% 100vw;
  background-repeat: no-repeat;
}
//.app-wrapper-hombre::before {
//  content: "";
//  position: absolute;
//  width: 150vw;
//  height: 150vh;
//  top: -90%;
//    left: -35%;
//    z-index: -1;

//  background: url();

//}

.app-pt-160 {
  padding-top: 160px; 
}

.app-pt-80 {
  padding-top: 80px; 
}

.app-pb-160 {
  padding-bottom: 160px; 
}

.center {
  text-align: center;
}

@media screen and (max-width: 992px) {
  .mobile-padding {
    padding: 0 32px;
  }
  
  .app-flex {
    flex-direction: column;
  }

  .app-flex-1 {
    width: 100%; 
  }

  .app-hs_cos_wrapper {
    width: 100%;
  }

  .app-hs-button {
    width: 100%;
  }
  

  .app-py-30 {
    padding-right: 15px;
    padding-left: 15px;
  }

  .app-flex-center {
    display: block;

  }

  .app-pt-160 {
    padding-top: 64px; 
  }

  .app-pb-160 {
    padding-bottom: 64px; 
  }
  
  .app-wrapper-hero {
    padding: 0 15px;
  }
  
  .hs-button { 
    width: 100%;  
  }
  
  .cta-group .dnd-column:last-child a.hs-button {
     width: 100%;  
  }
  
  .cta-group .dnd-column {
    padding-bottom: 16px;
  }
  
  .app-container {
    background-image: url(//7478034.fs1.hubspotusercontent-na1.net/hubfs/7478034/raw_assets/public/assets/gradient-for-lp.jpg);
    background-size: 100vh 100%;
    background-repeat: no-repeat;
  }
  
  .app-wrapper-hero .cta-group .dnd-module {
    align-items: stretch !important;
  }

}