/*
Colores:
    Amarillo: ff9b22
    Negro: 000000
    Gris Claro: ededed
Types:
    Gothman Narrow
    Bold y Book. (Adjuntas)
*/
@font-face {
  font-family: "GothamXNarrow";
  src: url("../fonts/GothamXNarrow-Book.otf") format("opentype");
  font-weight: 400;
  font-display: swap; }

@font-face {
  font-family: "GothamXNarrow";
  src: url("../fonts/GothamXNarrow-Black.otf") format("opentype");
  font-weight: 700; }

/* Control de colores */
:root {
  --amarillo: #ff9b22;
  --bg: #ededed;
  --blanco: #fff;
  --negro: #000;
  --color1: #ededed;
  --color2: #ff9b22; }

html, body {
  font-family: 'GothamXNarrow', sans-serif;
  font-size: 16px;
  color: var(--negro);
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px; }

input.invalid:invalid {
  border: 1px solid red; }

.pd0 {
  padding: 0px; }

/* *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- */
/*               Header                         */
/* *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- */
header {
  display: inline-block;
  width: 100%;
  vertical-align: top; }
  header .izq {
    text-align: left;
    padding: 15px 0px; }
    header .izq img {
      height: 50px; }

/* *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- */
/*              footer and Copy                 */
footer {
  vertical-align: top;
  display: inline-block;
  width: 100%;
  background: var(--negro);
  padding: 10px 0px;
  /**/
  /*  End Copy  */ }
  footer .copy {
    display: inline-block;
    width: 100%;
    text-align: center; }
    footer .copy h6 {
      color: var(--blanco);
      font-size: 14px; }
    footer .copy .futurite {
      color: var(--blanco); }

/****************************************/
/*            gracias                   */
/****************************************/
.body-gracias {
  background-color: var(--blanco); }
  .body-gracias .gracias {
    display: inline-block;
    width: 100%;
    text-align: center;
    min-height: 600px; }
    .body-gracias .gracias .image {
      padding: 300px 0px; }
      .body-gracias .gracias .image img {
        display: block;
        width: 100%;
        max-width: 400px;
        margin: auto; }
    .body-gracias .gracias .amarillo {
      display: inline-block;
      background-color: var(--amarillo);
      padding: 250px 0px; }
      .body-gracias .gracias .amarillo p {
        font-size: 50px;
        color: var(--blanco);
        text-transform: uppercase;
        font-weight: 700; }

/* *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- */
/*             Secciones de Pagina              */
/* *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- */
/****************************************/
/*                Home                  */
/****************************************/
/* h-sec1 */
.h-sec1 {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  background: url("../img/Banner_Principal.jpg") center center no-repeat;
  background-size: cover;
  padding: 50px 0px; }
  .h-sec1 .titulo {
    padding-top: 100px; }
    .h-sec1 .titulo h1 {
      background-color: var(--amarillo);
      color: var(--blanco);
      display: inline;
      font-size: 60px;
      font-weight: 700;
      letter-spacing: 2px;
      padding: 5px;
      text-transform: uppercase; }
  .h-sec1 .contactanos {
    background-color: var(--blanco);
    padding: 15px; }
    .h-sec1 .contactanos h4 {
      font-weight: 700;
      font-size: 30px;
      text-transform: uppercase;
      margin: 0 0 20px; }
    .h-sec1 .contactanos form input {
      display: inline-block;
      margin-bottom: 20px;
      width: 100%;
      border: none;
      color: var(--negro);
      border-bottom: 2px solid var(--amarillo);
      outline: none; }
    .h-sec1 .contactanos form label {
      width: 100%;
      font-weight: 400; }
    .h-sec1 .contactanos form textarea {
      display: inline-block;
      width: 100%;
      min-height: 100px;
      border: 2px solid var(--amarillo);
      outline: none; }
    .h-sec1 .contactanos form button {
      padding: 3px 30px;
      border: none;
      background-color: var(--negro);
      color: var(--blanco);
      letter-spacing: 1px; }

/* h-sec2 */
.h-sec2 {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  background-color: var(--blanco);
  padding: 70px 0px;
  text-align: center; }
  .h-sec2 h2 {
    color: var(--amarillo);
    font-weight: 700;
    font-size: 35px;
    margin: 0 0 10px; }
  .h-sec2 p {
    font-size: 20px; }

/* h-sec3 */
.h-sec3 {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  background-color: var(--bg); }
  .h-sec3 .texto {
    padding: 50px 0px; }
    .h-sec3 .texto h3 {
      font-size: 30px;
      font-weight: 700;
      margin: 0 0 20px; }
      .h-sec3 .texto h3 strong {
        display: block;
        color: var(--amarillo);
        font-size: 80px;
        line-height: 1.1; }
  .h-sec3 img {
    display: block;
    width: 110%;
    margin: -25px auto; }

/* h-sec4 */
.h-sec4 {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  background-color: var(--blanco);
  padding: 50px 0px;
  text-align: center; }
  .h-sec4 .titulo {
    display: inline-block;
    width: 100%;
    padding-bottom: 50px; }
    .h-sec4 .titulo img {
      display: block;
      width: 100%;
      max-width: 200px;
      margin: auto; }
    .h-sec4 .titulo h3 {
      color: var(--amarillo);
      font-weight: 700;
      font-size: 30px;
      margin: 0 0 20px; }
  .h-sec4 .prestamos img {
    display: block;
    margin: auto;
    max-height: 250px; }
  .h-sec4 .prestamos h4 {
    font-size: 25px;
    font-weight: 700; }
  .h-sec4 .prestamos p {
    font-size: 20px;
    max-width: 350px;
    margin: 0 auto 20px;
    min-height: 80px; }

/* h-sec5 */
.h-sec5 {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  background-color: var(--amarillo); }
  .h-sec5 img {
    display: block;
    width: 100%;
    margin: -30px 0px; }
  .h-sec5 .texto {
    padding: 150px 0px 50px;
    max-width: 400px; }
    .h-sec5 .texto h3 {
      font-size: 45px;
      font-weight: 700;
      text-transform: uppercase;
      margin: 0; }
    .h-sec5 .texto p {
      font-size: 20px; }

/* h-sec6 */
.h-sec6 {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  background-color: var(--blanco); }
  .h-sec6 img {
    display: block;
    width: 100%; }
  .h-sec6 .texto {
    padding: 150px 0px 50px;
    max-width: 400px; }
    .h-sec6 .texto h3 {
      font-size: 45px;
      font-weight: 700;
      text-transform: uppercase;
      margin: 0;
      color: var(--amarillo); }
    .h-sec6 .texto p {
      font-size: 20px; }

/* h-sec7 */
.h-sec7 {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  background-color: var(--bg);
  border-top: 10px solid var(--amarillo);
  padding: 50px 0px; }
  .h-sec7 .titulo img {
    display: block;
    width: 100%;
    max-width: 150px; }
  .h-sec7 .titulo p {
    font-size: 35px;
    font-weight: 700;
    width: 100%;
    letter-spacing: 2px;
    margin-bottom: 30px; }
  .h-sec7 .direccion .marca {
    background: url("../img/Icono_Location.png") 10px top no-repeat;
    background-size: 50px;
    padding-left: 100px;
    margin-bottom: 30px; }
    .h-sec7 .direccion .marca h4 {
      font-weight: 700;
      font-size: 25px;
      margin: 0px; }
    .h-sec7 .direccion .marca p {
      font-size: 16px; }
  .h-sec7 .direccion .whatsapp {
    background: url("../img/Icono_WA.png") 10px top no-repeat;
    background-size: 50px;
    padding-left: 100px;
    margin-bottom: 30px; }
    .h-sec7 .direccion .whatsapp p {
      font-weight: 700;
      font-size: 25px;
      margin: 0px;
      line-height: 1; }
      .h-sec7 .direccion .whatsapp p a {
        color: var(--negro); }
  .h-sec7 .contactanos {
    background-color: var(--blanco);
    padding: 15px;
    margin-top: 50px; }
    .h-sec7 .contactanos h4 {
      font-weight: 700;
      font-size: 30px;
      text-transform: uppercase;
      margin: 0 0 20px; }
    .h-sec7 .contactanos form input {
      display: inline-block;
      margin-bottom: 20px;
      width: 100%;
      border: none;
      color: var(--negro);
      border-bottom: 2px solid var(--amarillo);
      outline: none; }
    .h-sec7 .contactanos form label {
      width: 100%;
      font-weight: 400; }
    .h-sec7 .contactanos form textarea {
      display: inline-block;
      width: 100%;
      min-height: 100px;
      border: 2px solid var(--amarillo);
      outline: none; }
    .h-sec7 .contactanos form button {
      padding: 3px 30px;
      border: none;
      background-color: var(--negro);
      color: var(--blanco);
      letter-spacing: 1px; }

/* Medias query */
@media (max-width: 1400px) and (min-width: 1200px) {
  .h-sec3 .texto {
    padding: 25px 0px; }
  .h-sec3 img {
    width: 100%;
    margin: -30px auto; }
  .h-sec5 .texto {
    padding: 100px 0px 50px; }
  .h-sec6 .texto {
    padding: 100px 0px 50px; } }

@media (max-width: 1201px) and (min-width: 990px) {
  .h-sec3 .texto {
    padding: 25px 0px; }
    .h-sec3 .texto h3 strong {
      line-height: 1; }
  .h-sec3 img {
    width: 100%;
    margin: -10px auto; }
  .h-sec5 .texto {
    padding: 100px 0px 50px; }
  .h-sec6 .texto {
    padding: 100px 0px 50px; } }

@media (max-width: 989px) and (min-width: 768px) {
  .h-sec1 .titulo h1 {
    font-size: 40px; }
  .h-sec3 .texto {
    padding: 25px 0px; }
    .h-sec3 .texto h3 strong {
      line-height: 1;
      font-size: 50px; }
  .h-sec3 img {
    width: 100%;
    margin: -10px auto; }
  .h-sec5 .texto {
    padding: 100px 0px 50px; }
  .h-sec6 .texto {
    padding: 100px 0px 50px; } }

@media (max-width: 767px) and (min-width: 480px) {
  .h-sec1 .titulo {
    padding: 15px 0px; }
    .h-sec1 .titulo h1 {
      font-size: 40px; }
  .h-sec3 .texto {
    padding: 25px 0px; }
    .h-sec3 .texto h3 {
      text-align: center; }
      .h-sec3 .texto h3 strong {
        line-height: 1;
        font-size: 50px; }
  .h-sec3 img {
    width: 100%;
    max-width: 400px;
    margin: -10px auto; }
  .h-sec5 img {
    max-width: 400px;
    margin: -20px auto; }
  .h-sec5 .texto {
    padding: 100px 0px 50px;
    margin: auto; }
  .h-sec6 .texto {
    padding: 100px 0px 50px;
    margin: auto; } }

@media (max-width: 479px) and (min-width: 0px) {
  .h-sec1 .titulo {
    padding: 15px 0px; }
    .h-sec1 .titulo h1 {
      font-size: 35px; }
  .h-sec3 .texto {
    padding: 25px 0px; }
    .h-sec3 .texto h3 {
      text-align: center; }
      .h-sec3 .texto h3 strong {
        line-height: 1;
        font-size: 50px; }
  .h-sec3 img {
    width: 100%;
    max-width: 400px;
    margin: -10px auto; }
  .h-sec4 .prestamos img {
    width: 100%; }
  .h-sec5 img {
    max-width: 400px;
    margin: -20px auto; }
  .h-sec5 .texto {
    padding: 100px 0px 50px;
    margin: auto; }
  .h-sec6 .texto {
    padding: 100px 0px 50px;
    margin: auto; } }