/********************************************/
/* Colores    *******************************/
/********************************************/

:root {
  --color1: #ed6d64;
  --color2: #616160;
  --color3: #e2e2e2;
  --blanco: #fff;
  --degrade1: #e44942;
  --degrade2: #e97359;
}

/********************************************/
/* Font Face  *******************************/
/********************************************/

@font-face {
  font-family: AktivGrotesk;
  src: url(fonts/AktivGrotesk-Light.otf);
  font-weight: 200;
}
@font-face {
  font-family: AktivGrotesk;
  src: url(fonts/AktivGrotesk-Regular.otf);
  font-weight: 400;
}
@font-face {
  font-family: AktivGrotesk;
  src: url(fonts/AktivGrotesk-Medium.otf);
  font-weight: 600;
}
@font-face {
  font-family: AktivGrotesk;
  src: url(fonts/AktivGrotesk-Bold.otf);
  font-weight: 800;
}

* {
  font-family: "AktivGrotesk", sans-serif;
}

a:hover {
  text-decoration: none;
}

/********************************************/
/* Texto y colores **************************/
/********************************************/

.text-200 {
  font-weight: 200;
} /*Normal*/
.text-200 b{
  font-weight: 600;
} /*Normal*/
.text-400 {
  font-weight: 400;
} /*Normal*/
.text-600 {
  font-weight: 600;
} /*Medium*/
.text-800 {
  font-weight: 800;
} /*Bold*/

.color1 {
  color: var(--color1);
}
.fcolor1 {
  background-color: var(--color1);
}
.color2 {
  color: var(--color2);
}
.fcolor2 {
  background-color: var(--color2);
}
.color3 {
  color: var(--color3);
}
.fcolor3 {
  background-color: var(--color3);
}
.fblanco {
  background-color: var(--blanco);
}

.error {
  border: 1px solid red !important;
}
.recaptcha {
  width: fit-content;
}
.hidden {
  visibility: hidden;
}

/********************************************/
/* Header  **********************/
/********************************************/

#headerBarra {
  height: 90px;
  z-index: 10;
  background-color: #fff;
}

#headerLogo {
  position: absolute;
  left: 3.2rem;
}

.hero-image {
  height: 110vh;
  background-image: url("../img/1foto@2x.webp");
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  opacity: 1;
  top: -90px;
}

.tituloBanner {
  font-size: 2.8rem;
  line-height: 1.125em;
  text-align: left;
  width: 40%;
}

.btnConsulta {
  background-color: var(--blanco);
  color: var(--color1);
  font-size: 3rem;
  font-weight: 600;
  border-radius: 50px;
  padding: 0px 40px;
  text-decoration: none;
  line-height: 4.25rem;
  position: absolute;
  bottom: -2rem;
  box-shadow: 1px 1px 5px #aaaaaa;
}
.btnConsulta:hover {
  background-color: var(--blanco);
  color: var(--color1);
}
.titulon {
  font-size: 18rem;
  padding-top: 4rem;
}
.mediaQ{
  height: 70vh;
  background-image: url("../img/media Q.svg");
  background-repeat: no-repeat;
  left: 0;
}
.marginTop{
  margin-top: -50px;
}
.tituloConLinea {
  font-size: 4.5rem;
  display: inline-block;
  color: var(--color1);
  line-height: 5rem;
  position: relative;
  z-index: 0;
}
.borde::before {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 10px;
  left: 0;
  width:100%;
  height: .4em;
  background-color: var(--color3);
}
.bordeDerecha::before {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 10px;
  left: 0;
  width:200%;
  height: .4em;
  background-color: var(--color3);
}
.bordeIzquierda::before {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 10px;
  right: 0;
  width:200%;
  height: .4em;
  background-color: var(--color3);
}
.fotoIzquierda{
  margin-left: -60px;
}
.fotoDerecha{
  margin-left: -80px;
}
.numeros{
  font-size: 16rem;
  font-weight: 400;
}
.degrade {
  height: 600px;
  background-color: var(--degrade1); /* For browsers that do not support gradients */
  background-image: linear-gradient(to right, var(--degrade1) , var(--degrade2));
}
.sombraFoto{
  box-shadow: 1px 1px 5px #aaaaaa;
}
h6{
  font-size: 1.2rem;
}
.lh-nombre{
  line-height: 2rem;
}
.degrade1 {
  height: 600px;
  background-color: var(--degrade2); /* For browsers that do not support gradients */
  background-image: linear-gradient(to right, var(--degrade2) , var(--degrade1));
}

.btnConsultaFooter {
  background-color: var(--blanco);
  color: var(--color1) !important;
  font-size: 3rem;
  font-weight: 600;
  border-radius: 50px;
  padding: 0px 40px;
  text-decoration: none;
  line-height: 4.25rem;
  position: absolute;
  margin-top: -2.5rem;
  box-shadow: 1px 1px 5px #aaaaaa;

  transition: .3s;
}
.btnConsultaFooter:hover {
  background-color: var(--blanco);
  color: var(--color1);
}


.btnConsulta img,
.btnConsultaFooter img{
  transition: .3s;
}
.btnConsulta:hover img,
.btnConsultaFooter:hover img{
  margin-left: 15px;
}

#contacto a{
  color: inherit;
  text-decoration: none;
}
/********************************************/
/* Ajustes celular   ************************/
/********************************************/

@media only screen and (max-width: 992px) {

  body{
    overflow-x: hidden;
  }
  .ancla:before {
    margin-top: -60px;
    height: 60px;
  }
  #headerLogo {
    position: absolute;
    left: 0.5rem;
  }
  .hero-image {
    height: 700px;
    background-image: url("../img/1foto@2x.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .tituloBanner {
    font-size: 2rem;
    position: relative;
    width: 100%;
    text-align: center;
  }
  .iconoQ {
    width: 150px;
    padding: 30px 0px;
    margin: auto;
  }
  .btnConsulta {
    background-color: var(--blanco);
    color: var(--color1);
    font-size: 2rem;
    font-weight: 500;
    border-radius: 50px;
    position: absolute;
  }
  .titulon {
    font-size: 5rem;
    padding-top: 4rem;
  }
  .mediaQ{
    height: 30vh;
    background-image: url("../img/media Q.svg");
    background-repeat: no-repeat;
    left: 0;
  }
  .marginTop{
    margin-top: 30px;
  }
  .fotoIzquierda{
    width: 100%;
    margin-left: -30px;
    margin-bottom: 50px;
  }
  .tituloConLinea {
    font-size: 2.25rem;
    display: inline-block;
    color: var(--color1);
    line-height: 2.5rem;
    position: relative;
    z-index: 0;
  }
  .borde::before {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: 5px;
    left: 0;
    width:100%;
    height: .4em;
    background-color: var(--color3);
  }
  .bordeDerecha::before {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: 5px;
    left: 0;
    width:105%;
    height: .4em;
    background-color: var(--color3);
  }
  .bordeIzquierda::before {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: 5px;
    right: 0;
    width:200%;
    height: .4em;
    background-color: var(--color3);
  }
  .fotoDerecha{
    width: 110%;
    margin-left: -50px;
    margin-top:50px;
  }
  .numeros{
    font-size: 10rem;
    font-weight: 400;
    margin-top: 50px;
  }
  .degrade {
    height: 2000px;
  }
  .btnConsultaFooter {
    background-color: var(--blanco);
    color: var(--color1);
    font-size: 2rem;
    font-weight: 500;
    border-radius: 50px;
    position: absolute;
    box-shadow: 1px 1px 5px #aaaaaa;
  }
  .degrade1 {
    height: 850px;
  }

}

/********************************************/
/* boton top ********************************/
/********************************************/
#boton_top,#boton_top:hover {
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 20px; /* Place the button 30px from the right */
  width: 50px;
  height: 50px;
  z-index: 10; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  padding: 0;
  transition: 0.3s;
  cursor: pointer; /* Add a mouse pointer on hover */
  border-radius: 50%; /* Rounded corners */
  vertical-align: middle;
}