@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,600;0,700;0,800;1,300;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@500;600&display=swap');

body { font-family: 'Montserrat', sans-serif; }
p { font-weight: 300; }
a, a:hover, a:active, a:focus, a:visited { cursor: pointer; text-decoration: none; }

header { padding: 50px 50px 0 50px; position: absolute; width: 100%; z-index: 3; }
header .logo { height: 100px; }
header nav { float: right; margin-top: 30px; }
header nav a { color: #6c7e87; font-size: 14px; }
header nav img { margin-left: 15px; width: 21px; }

#banner { background: url(../img/banner-bg.jpg) no-repeat center bottom; background-size: cover; padding: 150px 0 300px; }
#banner h2 { color: #6c7e87; font-size: 48px; font-weight: 900; line-height: 1; margin-top: 80px; }
#banner p { color: #6c7e87; font-family: 'Montserrat Alternates', sans-serif; font-size: 13px; }
#banner .countdown { color: #7f7771; font-weight: 500; margin-top: 50px; }
#banner .countdown #demo, #banner .countdown #demoEn, #banner .countdown #demoPt { margin-top: 10px; }
#banner .countdown #demo div, #banner .countdown #demoEn div, #banner .countdown #demoPt div { float: left; font-size: 30px; font-weight: 800; line-height: 1; margin-right: 20px; text-align: center; }
#banner .countdown #demo div span, #banner .countdown #demoEn div span, #banner .countdown #demoPt div span { display: block; font-size: 11px; font-weight: 300; margin-top: 5px; }

#que-es { background-color: rgb(108, 126, 135); border-radius: 20px; box-shadow: 0px 30px 51px 9px rgba(0, 0, 0, 0.3); color: #FFF; margin-top: -250px; padding: 80px 80px 40px; position: relative; }
#que-es h1 { font-size: 48px; font-weight: 800; text-transform: uppercase; }
#que-es .back { display: block; font-size: 120px; font-weight: 800; line-height: .6; opacity: .05; position: absolute; right: 0; top: 60px; text-transform: uppercase; }
#que-es p { font-size: 18px; line-height: 1.6; }
#que-es p strong { font-weight: 700; }
#que-es .scroll { display: block; margin: 0 auto; }

#items { color: #7f7771; font-family: 'Montserrat Alternates', sans-serif; margin: 170px 0 150px; text-align: center; }
#items img { margin-bottom: 30px; width: 60px; }
#items h3 { font-size: 21px; }

#video { margin-bottom: 60px; }

#nace { color: #7f7771; padding: 0 0 150px; text-align: center; }
#nace img { margin-bottom: 60px; width: 45px; }
#nace h2 { font-size: 48px; font-weight: 800; line-height: 1; margin-bottom: 50px; text-transform: uppercase; }
#nace p { font-size: 18px; line-height: 1.6; }

#fue { background: url(../img/fue.jpg) no-repeat center center; background-attachment: fixed; background-size: cover; color: #FFF; padding: 100px 0; }
#fue h3 { font-size: 48px; font-weight: 800; line-height: 1; text-align: right; text-transform: uppercase; }
#fue p { font-size: 18px; line-height: 1.6; margin-top: 50px; }

#como { background: #6c7e87; overflow: hidden; padding: 120px 0; position: relative; text-align: center; }
#como h3 { color: #FFF; font-size: 48px; font-weight: 800; line-height: 1; margin-bottom: 40px; text-transform: uppercase; }
#como .back { color: #FFF; display: block; font-size: 120px; font-weight: 800; line-height: .6; opacity: .05; position: absolute; right: 0; top: 60px; }
#como p { color: #FFF; font-size: 18px; line-height: 1.6; margin-bottom: 30px; }
#como p strong { font-weight: 700; }
#como .block { background: #FFF; border-radius: 15px; box-shadow: 0px 10px 14.25px 0.75px rgba(0, 0, 0, 0.1); color: #73848c; float: left; font-family: 'Montserrat Alternates', sans-serif; font-size: 15px; font-weight: 500; padding: 45px 15px 30px; width: 20%; }
#como .block { font-weight: 600; }
#como .block img { margin-bottom: 30px; width: 36px; }
#como .plus { color: #FFF; float: left; font-size: 48px; font-weight: 900; padding-top: 70px; width: 6.66666%; }

#cuando { color: #7f7771; padding: 160px 0; }
#cuando img { float: left; margin: 0 80px 0 0; width: 120px; }
#cuando h3 { font-size: 48px; font-weight: 800; line-height: 1; margin-top: 15px; margin-bottom: 30px; }
#cuando p { font-size: 18px; line-height: 1.6; }

#contacto { color: #6c7e87; padding: 80px 0 180px; }
#contacto h3 { font-size: 48px; font-weight: 800; line-height: 1; margin-top: 15px; margin-bottom: 30px; }
#contacto p { font-size: 18px; }
#contacto h4 { font-size: 21px; font-weight: 700; line-height: 1; margin-bottom: 20px; margin-top: 80px; }
#contacto input { background: #dfdfdf; border: none; font-size: 18px; height: 38px; padding: 0 15px; width: 100%; }
#contacto button { background: #9c9f80; border: none; color: #FFF; font-size: 18px; height: 38px; font-weight: 700; padding: 0 45px; }

footer { color: #6c7e87; font-size: 12px; padding-bottom: 100px; text-align: center; }
footer img { margin-bottom: 15px; width: 170px; }


@media (max-width: 1199px) {
  header { padding: 30px 30px 0 30px; }
}


@media (max-width: 991px) {
  #banner h2 { margin-top: 20px; }
  #que-es { padding: 60px 30px 40px; }
  #que-es .back, #como .back { font-size: 80px; }
  #items { margin: 100px 0; }
  #items h3 { font-size: 18px; }
  #como { padding: 120px 0 80px; }
  #como .block { margin-bottom: 30px; width: 45%; }
  #como .plus { padding-top: 50px; width: 10%; }
  #cuando { padding: 80px 0; }
  #cuando h3 { margin: 0 0 20px; }
  #contacto { padding-top: 0px; }
  #contacto h3 { font-size: 36px; }
  #contacto p { word-break: break-word; }
}


@media (max-width: 767px) {
  header { padding: 20px 20px 0 20px; }
  header .logo { height: 30px; }
  header nav { margin-top: 0; }
  header nav img { margin-left: 8px; width: 16px; }
  #banner { padding: 90px 0 300px; }
  #banner h2 { font-size: 36px; text-align: center; }
  #banner p, #banner .countdown { text-align: center; }
  #banner .countdown #demo, #banner .countdown #demoEn, #banner .countdown #demoPt { margin: 0 auto; width: 220px; }
  #banner .countdown #demo div, #banner .countdown #demoEn div, #banner .countdown #demoPt div { margin: 0 10px; }
  #que-es .back, #como .back { display: none; }
  #que-es h1, #nace h2, #fue h3, #como h3, #cuando h3 { font-size: 36px; }
  #items { margin: 100px 0 0; }
  #items h3 { margin-bottom: 45px; }
  #fue h3 { text-align: left; }
  #como { padding: 60px 0; }
  #como .block { margin-bottom: 0; width: 100%; }
  #como .plus { padding-top: 0; width: 100%; }
  #cuando img { margin: 0 0 20px 0; }
  #cuando h3 { clear: both; }
  #contacto h4 { margin-top: 30px; }
}