:root {
  --azul-obscuro: #252930;
  --offwhite: #f3f3f3;
  --white: white;
  --black: black;
}

body {
  background-color: var(--azul-obscuro);
  color: #333;
  font-family: Monty, sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 20px;
}

.section-mi-erp {
  height: 100svh;
  min-height: 600px;
  background-image: linear-gradient(315deg, rgba(0, 0, 0, .79), rgba(0, 0, 0, .16)), url('../images/mi_ERP_2.jpg');
  background-position: 0 0, 50%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  justify-content: center;
  align-items: center;
  padding: 30px;
  display: flex;
}

.logo-assemble {
  height: 60px;
  margin-bottom: 30px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.opciones-assemble {
  display: none;
  background-color: var(--offwhite);
  border-radius: 10px;
  justify-content: space-between;
  display: flex;
  box-shadow: 0 5px 5px rgba(0, 0, 0, .2);
}

.titulo-mi-erp {
  color: var(--offwhite);
  text-align: center;
  letter-spacing: .5px;
  margin-top: 0;
  margin-bottom: 50px;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.3em;
}

.btn-std {
  color: #f3f3f3;
  letter-spacing: .5px;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 10px;
  padding: 12px 39px 11px;
  transition: all .5s;
  position: relative;
  overflow: hidden;
}

.btn-std.secundario {
  color: #252930;
  background-color: #f3f3f3;
  background-image: none;
  box-shadow: -2px 2px 5px #0841ac, 2px -2px 5px #75beee;
}

.btn-std.secundario:hover {
  color: #e8f0f3;
  background-color: #75beee;
  box-shadow: -2px 2px 5px rgba(11, 43, 103, 0), 2px -2px 5px rgba(143, 192, 224, 0);
}

.text-btn {
  z-index: 1;
  position: relative;
}

.background-btn {
  z-index: 0;
  width: 100%;
  color: rgba(51, 51, 51, 0);
  background-image: linear-gradient(225deg, #0841ac, #75beee);
  transition: width .5s;
  display: block;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
}

.background-btn:hover {
  width: 200%;
}

.col-a-mierp {
  max-width: 400px;
  text-align: center;
  border-right: 1px solid rgba(0, 0, 0, .06);
  flex-direction: column;
  align-items: center;
  padding: 60px 44px;
  display: flex;
}

.col-b-mierp {
  max-width: 400px;
  flex-direction: column;
  align-items: center;
  padding: 60px 44px;
  display: flex;
}

.titulo-grane-propiedades {
  z-index: 2;
  width: 90px;
  height: 90px;
  color: rgba(37, 41, 48, .81);
  text-align: center;
  letter-spacing: -1px;
  text-shadow: 0 1px 1px #fff;
  mix-blend-mode: darken;
  background-color: #f3f3f3;
  border-radius: 200px;
  margin-top: 0;
  margin-bottom: 36px;
  padding-top: 27px;
  font-size: 40px;
  font-weight: 300;
  line-height: 1em;
  position: relative;
  box-shadow: 0 2px 6px 1px rgba(0, 0, 0, .2);
}

.p-general {
  color: rgba(37, 41, 48, .58);
  text-align: center;
  letter-spacing: .4px;
  margin-top: 40px;
  margin-bottom: 0;
  line-height: 1.5em;
}

.p-general.legal {
  color: var(--offwhite);
  margin-top: 30px;
}

.link-licence {
  color: var(--offwhite);
}

.error-system {
  background-color: var(--white);
  text-align: center;
  letter-spacing: .5px;
  border-radius: 10px;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  padding: 15px 15px 13px;
  font-size: 12px;
  line-height: 1.2em;
  display: none;
  box-shadow: 0 5px 5px rgba(0, 0, 0, .2);
}

.error {
  text-align: center;
  margin-top: 20px;
}

@media screen and (max-width: 991px) {
  .titulo-grane-propiedades {
    margin-left: 40px;
    margin-right: 40px;
    font-size: 49px;
  }
}

@media screen and (max-width: 767px) {
  .section-mi-erp {
    height: auto;
    padding-top: 50px;
    padding-bottom: 50px;
    display: block;
  }

  .logo-assemble {
    height: 50px;
  }

  .opciones-assemble {
    flex-direction: column;
  }

  .titulo-mi-erp {
    max-width: 360px;
    margin-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
  }

  .btn-std {
    max-width: 200px;
    text-align: center;
  }

  .col-a-mierp {
    max-width: none;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
  }

  .titulo-grane-propiedades {
    margin-left: 0;
    margin-right: 0;
  }
}

@media screen and (max-width: 479px) {
  .titulo-mi-erp {
    font-size: 16px;
  }

  .col-a-mierp, .col-b-mierp {
    padding-left: 20px;
    padding-right: 20px;
  }

  .titulo-grane-propiedades {
    width: 84px;
    height: 84px;
    padding-top: 30px;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 33px;
  }
}


@font-face {
  font-family: 'Monty';
  src: url('../fonts/Monty-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Monty';
  src: url('../fonts/Monty-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Monty';
  src: url('../fonts/Monty-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}