*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html, body{
  width:100%;
  min-height:100%;
  overflow-x:clip;
  font-family:"Montserrat", sans-serif;
  background-color:#F8FBFB;
}

.hero{
  display:flex;
  width:100%;
  padding:  90px 40px 0px 40px;
  height:100vh;
  position:relative;
  justify-content:center;
  overflow:hidden;
  background-color:#F8FBFB;
}

.heroFondo{
  display:flex;
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  z-index:1;
}

.heroFondo img,
.heroFondo video{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}

.heroSombra{
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  z-index:2;
  background:linear-gradient(90deg, rgba(0,18,17,0.82) 0%, rgba(0,24,23,0.61) 20%, rgba(4,38,38,0.18) 58%, rgba(11,54,54,0) 100%);
  mix-blend-mode:multiply;
}

.heroDecor{
  display:flex;
  position:absolute;
  z-index:3;
  pointer-events:none;
}

.heroDecor img{
  width:100%;
  height:auto;
}

.heroDecorTop{
  width:32px;
  height:32px;
  top:139px;
  left:219px;
  mix-blend-mode:overlay;
}

.heroContainer{
  display:flex;
  width:100%;
  max-width:1541px;
  height:100%;
  z-index:4;
  align-items:center;
  padding:0px 0px;
}

.heroTexto{
  display:flex;
  flex-direction:column;
  width:495px;
  color:white;
}

.heroTitle{
  font-size:56.035px;
  line-height:53px;
  letter-spacing:-3.9224px;
  font-weight:800;
  color:white;
}

.heroParrafo{
  width:495px;
  margin-top:23px;
  font-size:20px;
  line-height:28px;
  letter-spacing:0px;
  font-weight:500;
  color:white;
}

.heroBoton{
  display:flex;
  width:183px;
  height:44px;
  margin-top:25px;
  border:1.1px solid white;
  border-radius:83.161px;
  align-items:center;
  justify-content:center;
  gap:12px;
  text-decoration:none;
  color:white;
  font-size:16px;
  line-height:16px;
  letter-spacing:0px;
  font-weight:600;
  transition:all 0.25s ease;
}

.heroBoton img{
  width:12.8336px;
  height:13.128px;
  object-fit:contain;
  object-position:center;
}

.heroBoton:hover{
  transform:translateY(-2px);
  background-color:rgba(255,255,255,0.12);
}

@media(max-width:1200px){
  .hero{
    height:574px;
  }

  .heroSombra{
    background:linear-gradient(0deg, rgba(0,18,17,1) 0%, rgba(0,24,23,.76) 34%, rgba(4,38,38,.22) 68%, rgba(11,54,54,0) 100%);
  }

  .heroContainer{
    max-width:904px;
  }

  .heroTexto{
    width:100%;
    max-width:430px;
  }

  .heroTitle{
    font-size:33.17px;
    line-height:31.4px;
    letter-spacing:-2.32px;
  }

  .heroParrafo{
    width:100%;
    max-width:430px;
    margin-top:14px;
    font-size:11.84px;
    line-height:16.58px;
  }

  .heroBoton{
    width:108px;
    height:26px;
    margin-top:15px;
    border-radius:13.7px;
    font-size:9.47px;
    line-height:9.47px;
    gap:7px;
  }

  .heroBoton img{
    width:7.6px;
    height:7.78px;
  }
}

@media(max-width:700px){
  .hero{
    height:720px;
  }

  .heroFondo img,
  .heroFondo video{
    object-position:center center;
  }

  .heroSombra{
    background:linear-gradient(0deg, rgba(0,18,17,1) 0%, rgba(0,24,23,.82) 38%, rgba(4,38,38,.22) 72%, rgba(11,54,54,0) 100%);
  }

  .heroContainer{
    max-width:none;
    align-items:center;
    justify-content:center;
    padding:84px 14px 44px;
  }

  .heroTexto{
    width:100%;
    max-width:none;
    align-items:center;
    text-align:center;
  }

  .heroTitle{
    font-size:36px;
    line-height:35px;
    letter-spacing:-1.9px;
  }

  .heroParrafo{
    width:100%;
    max-width:330px;
    margin-top:18px;
    font-size:14px;
    line-height:20px;
  }

  .heroBoton{
    width:auto;
    max-width:calc(100vw - 28px);
    min-height:51px;
    height:auto;
    margin-top:23px;
    padding:14.5px 24px;
    border-radius:25.5px;
    font-size:14px;
    line-height:20px;
    gap:12px;
  }

  .heroBoton span{
    white-space:nowrap;
  }

  .heroBoton img{
    width:12px;
    height:12px;
    flex:0 0 auto;
  }
}

@media(max-width:1200px) and (min-width:701px){
  .hero{
    height:680px;
    padding-top:92px;
  }

  .heroContainer{
    max-width:none;
    padding:0 40px 64px;
    align-items:flex-end;
  }

  .heroTexto{
    width:100%;
    max-width:500px;
  }

  .heroTitle{
    font-size:48px;
    line-height:47px;
    letter-spacing:-2.4px;
  }

  .heroParrafo{
    width:100%;
    max-width:430px;
    margin-top:20px;
    font-size:18px;
    line-height:26px;
  }

  .heroBoton{
    width:183px;
    height:44px;
    margin-top:24px;
    border-radius:23.161px;
    font-size:16px;
    line-height:16px;
    gap:12px;
  }

  .heroBoton img{
    width:12.8336px;
    height:13.128px;
  }
}

.heroBoton{
  width:fit-content;
  height:auto;
  padding:15px 27px;
  line-height:25px;
  gap:12px;
}

@media(max-width:1200px){
  .heroBoton{
    width:fit-content;
    height:auto;
    padding:7.83px 16px;
    line-height:9.47px;
    gap:7px;
  }
}

@media(max-width:700px){
  .heroBoton{
    width:fit-content;
    height:auto;
    max-width:calc(100vw - 28px);
    padding:14.5px 24px;
    line-height:20px;
    gap:12px;
  }
}

@media(max-width:1200px) and (min-width:701px){
  .heroBoton{
    width:fit-content;
    height:auto;
    padding:14px 25px;
    line-height:22px;
    gap:12px;
  }
}