/* Variables */
:root {
  --f-bg-color: #202626;
  --f-color-verde: #6E8C7B;
  --f-font-color-gray: #92928F;
  --f-font-color-normal: #FDFAF8;
} /* uso --> background-color: var(--footer-bg-color); */

/* Fuentes */
@font-face {
  font-family: "Nunito Sans";
  src: url("../Fonts/NunitoSans-Regular.ttf");
}
@font-face {
  font-family: "Nunito Sans Extra Light";
  src: url("../Fonts/NunitoSans-ExtraLight.ttf");
}
@font-face {
  font-family: "Nunito Sans Extra Bold";
  src: url("../Fonts/NunitoSans-ExtraBold.ttf");
}


html,body{ height:100%; margin:0; } /* Posiciona el footer al final de la página */

/* Posiciona el footer al final de la página */
body{
  display: flex;
  flex-direction: column;
}

/* Footer */
footer{
  background-color: var(--f-bg-color);
  color: var(--f-font-color-normal);
  margin-top:auto; /* Posiciona el footer al final de la página */
  padding-bottom: 80px;
}
footer section{
  padding: 80px 10% 0px 10%;
  font-family: Nunito Sans;
  letter-spacing: 2px;
  background-color: var(--f-bg-color);
}
footer section p{
  font-family: Nunito Sans Extra Light;
  letter-spacing: 0;
  font-weight:lighter;
  font-size: 16px;
  text-align: justify;
  font-weight: normal;
  padding-top: 10px;
}
iframe#mapa{
  height: 100%;
  width: 100%;
  padding: 80px 15% 0px 0px;
}
footer button.buttonFooter{
  padding: 10px 20px 10px 20px;
  background-color: var(--f-color-verde);
  border: 0;
  border-radius: 3px;
  font-family: Nunito Sans Extra Light;
  color: var(--f-font-color-normal);
  font-size: 18px;
  width: 200px;
}
.icono-verde{
  color: var(--f-color-verde);
  font-size: 35px;
  position: relative;
  top: 8px;
  padding-right: 10px;
}

/* Footer Form */
.footerForm{
  font-family: Nunito Sans Extra Light!important;
  padding: 80px 10% 0 10%!important;
}
.footerForm input,textarea{
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 1;
  border-style: groove;
  border-bottom-width: thin;
  border-color: var(--f-font-color-gray);
  width: 90%;
  background-color: var(--f-bg-color);
  color: var(--f-font-color-normal);
}
.footerForm textarea{
  width: 100%;
}
.footerForm label{
  color: var(--f-font-color-gray);
  font-size: 18px;
  margin-bottom: 0px;
}
.footerForm .group1{
  width: 50%;
  display: inline;
  float: left;
}
.footerForm .group2{
  width: 50%;
  display: inline;
  float: left;
}
.footerForm .group3{
  width: 20%;
  display: inline;
  float: left;
}
.footerForm .group4{
  width: 80%;
  display: inline;
  float: left;
}
.footerForm .group3 input{
  width: 60%;
  background-color: var(--f-bg-color);
  color: var(--f-font-color-normal);
  border: 0 0 1px 0;
}
.footerForm .group2 input{
  width: 100%;
}
.footerForm .group4 input{
  width: 100%;
}