/* DISEÑO: MOBILE FIRST */

/************************************************
*  CONFIGURACIONES
************************************************/
/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
  font-size: 62.5%;
  /* 1rem = 10px */
  /* scroll-behavior: smooth; */
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  display: block;
  font-size: 1.6rem;
  background-color: #ffffff;
  margin-top: 0;
}

/* Vista pantallas grandes */
@media(min-width:768px) {
    body {
        margin-top: 6.4rem;
    }
}



/************************************************
*  GLOBALES
************************************************/
.contenedor {
  max-width: 120rem;
  margin: 0 auto;
}

@media(min-width:768px){
  .dp-res-only {
    display: none;
  }
}

.dp-none {
  display: none!important;
}

.dp-block {
  display: block!important;
}

.dp-inline-block {
  display: inline-block!important;
}

.dp-flex {display: flex;}
.jc-between {justify-content: space-between!important;}
.jc-start {justify-content: flex-start!important;}
.jc-end {justify-content: flex-end!important;}
.jc-around {justify-content: space-around!important;}
.jc-center {justify-content: center!important;}
.align-center {align-items: center!important;}
.align-start {align-items: flex-start!important;}
.flex-wrap {flex-wrap: wrap!important;}

@media(max-width:500px) {
  .res500_flex-wrap {flex-wrap: wrap;}
  .res500_mt-10 {margin-top: 10px;}
  .res500_text-center {text-align: center;}
  .res500_center {margin-left: auto!important; margin-right: auto!important;}
}

.desk { display: block!important;}
.resp { display: none!important;}
@media(max-width:767px) {
  .desk { display: none!important;}
  .resp { display: block!important;}
  .text-center-res {text-align: center;}
}

.centrar {
  margin-left: auto!important;
  margin-right: auto!important;
}

.text-center {text-align: center!important;}
.text-left {
  text-align: left !important;
}
.text-white {color: #fff!important;}
.text-black { color: #000 !important;}

.lh-20 {line-height: 20px;}
.lh-30 {line-height: 30px;}

.ls-0 {letter-spacing: 0px!important;}

.hr-cus1 {
  border: none;
  background-color: rgba(0, 0, 0, 0.2);
  height: 1px;
}

.w-14 {width: 14px;}
.w-30 {width: 30px!important;}
.h-30 {height: 30px!important;}

.w-300 {width: 300px!important;}
.w100 {width: 100%!important;}

.h-14 {height: 14px;}

.mw-30 {max-width: 30px!important;}
.mw-50 {max-width: 50px!important;}
.mw-60 {max-width: 60px!important;}
.mw-70 {max-width: 70px!important;}
.mw-80 {max-width: 80px!important;}
.mw-90 {max-width: 90px!important;}
.mw-100 {max-width: 100px!important;}
.mw-110 {max-width: 110px!important;}
.mw-160 {max-width: 160px!important;}
.mw-180 {max-width: 180px!important;}
.mw-200 {max-width: 200px!important;}
.mw-220 {max-width: 220px!important;}
.mw-250 {max-width: 250px!important;}
.mw-270 {max-width: 270px!important;}
.mw-300 {max-width: 300px!important;}
.mw-355 {max-width: 355px!important;}
.mw-400 {max-width: 400px!important;}
.mw-500 { max-width: 500px!important; }
.mw-600 { max-width: 600px!important; }
.mw-700 { max-width: 700px!important; }
.mw-800 { max-width: 800px!important; }
.mw-900 { max-width: 900px!important; }
.mw-1000 { max-width: 1000px!important; }
.mw-1100 { max-width: 1100px!important; }
.mw-1200 { max-width: 1200px!important; }
.mw-1300 { max-width: 1300px!important; }
.mw-1400 { max-width: 1400px!important; }


.margin-0 { margin: 0px!important}
.mx-auto {margin-right: auto; margin-left: auto;}
.padding-0 { padding: 0px!important}

.mt-0 {margin-top: 0px!important;}
.mt-1 {margin-top: 1px!important;}
.mt-2 {margin-top: 2px!important;}
.mt-3 {margin-top: 3px!important;}
.mt-4 {margin-top: 4px!important;}
.mt-5 {margin-top: 5px!important;}
.mt-6 {margin-top: 6px!important;}
.mt-7 {margin-top: 7px!important;}
.mt-8 {margin-top: 8px!important;}
.mt-9 {margin-top: 9px!important;}
.mt-10 {margin-top: 10px!important;}
.mt-12 {margin-top: 12px!important;}
.mt-15 {margin-top: 15px!important;}
.mt-20 {margin-top: 20px!important;}
.mt-25 {margin-top: 25px!important;}
.mt-30 {margin-top: 30px!important;}
.mt-40 {margin-top: 40px!important;}
.mt-50 {margin-top: 50px!important;}
.mt-60 {margin-top: 60px!important;}
.mt-70 {margin-top: 70px!important;}
.mt-80 {margin-top: 80px!important;}

.mt--10 {margin-top: -10px!important;}

.mb-0 {margin-bottom: 0px!important;}
.mb-5 {margin-bottom: 5px!important;}
.mb-6 {margin-bottom: 6px!important;}
.mb-7 {margin-bottom: 7px!important;}
.mb-8 {margin-bottom: 8px!important;}
.mb-9 {margin-bottom: 9px!important;}
.mb-10 {margin-bottom: 10px!important;}
.mb-15 {margin-bottom: 15px!important;}
.mb-20 {margin-bottom: 20px!important;}
.mb-30 {margin-bottom: 30px!important;}

.mb--5 {margin-bottom: -5px;}
.mb--10 {margin-bottom: -10px!important;}

.ml-auto {margin-left: auto!important;}
.ml-0 {margin-left: 5px!important;}
.ml-5 {margin-left: 5px!important;}
.ml-10 {margin-left: 2rem!important;}
.ml-20 {margin-left: 2rem!important;}
.ml-30 {margin-left: 2rem!important;}
.ml-40 {margin-left: 2rem!important;}
.ml-50 {margin-left: 2rem!important;}
.ml-60 {margin-left: 2rem!important;}
.ml-70 {margin-left: 2rem !important;}

.mr-auto {margin-right: auto!important;}
.mr-3 {margin-right: 3px!important;}
.mr-4 {margin-right: 4px!important;}
.mr-5 {margin-right: 5px!important;}
.mr-10 {margin-right: 10px!important;}
.mr-15 {margin-right: 15px!important;}
.mr-20 {margin-right: 20px!important;}
.mr-25 {margin-right: 25px!important;}
.mr-30 {margin-right: 30px!important;}

.ml-3 {margin-left: 3px!important;}
.ml-4 {margin-left: 4px!important;}
.ml-5 {margin-left: 5px!important;}
.ml-10 {margin-left: 10px!important;}
.ml-20 {margin-left: 20px!important;}
.ml-25 {margin-left: 25px!important;}
.ml-30 {margin-left: 30px!important;}


.pt-0 { padding-top: 0px!important; }
.pt-1 { padding-top: 1px!important; }
.pt-2 { padding-top: 2px!important; }
.pt-3 { padding-top: 3px!important; }
.pt-4 { padding-top: 4px!important; }
.pt-5 { padding-top: 5px!important; }
.pt-6 { padding-top: 6px!important; }
.pt-7 { padding-top: 7px!important; }
.pt-8 { padding-top: 8px!important; }
.pt-9 { padding-top: 7px!important; }
.pt-10 { padding-top: 10px!important; }
.pt-17_5 { padding-top: 17.5px!important; }
.pt-19 { padding-top: 19px!important; }
.pt-20 { padding-top: 20px!important; }
.pt-25 { padding-top: 25px!important; }
.pt-15 { padding-top: 15px!important; }
.pt-30 { padding-top: 30px!important; }
.pt-40 { padding-top: 40px!important; }
.pt-50 { padding-top: 50px!important; }

.pb-0 { padding-bottom: 0px!important; }
.pb-1 { padding-bottom: 1px!important; }
.pb-2 { padding-bottom: 2px!important; }
.pb-3 { padding-bottom: 3px!important; }
.pb-4 { padding-bottom: 4px!important; }
.pb-5 { padding-bottom: 5px!important; }
.pb-6 { padding-bottom: 6px!important; }
.pb-7 { padding-bottom: 7px!important; }
.pb-8 { padding-bottom: 8px!important; }
.pb-9 { padding-bottom: 7px!important; }
.pb-10 { padding-bottom: 10px!important; }
.pb-15 { padding-bottom: 15px!important; }
.pb-16 { padding-bottom: 16px!important; }
.pb-19 { padding-bottom: 19px!important; }
.pb-17_5 { padding-bottom: 17.5px!important; }
.pb-20 { padding-bottom: 20px!important; }
.pb-30 { padding-bottom: 30px!important; }
.pb-40 { padding-bottom: 40px!important; }
.pb-50 { padding-bottom: 50px!important; }

.pl-0 { padding-left: 0px!important; }
.pl-5 { padding-left: 5px!important; }
.pl-10 { padding-left: 10px!important; }
.pl-15 { padding-left: 15px!important; }
.pl-20 { padding-left: 20px!important; }
.pl-25 { padding-left: 25px!important; }
.pl-30 { padding-left: 30px!important; }
.pl-40 { padding-left: 40px!important; }
.pl-50 { padding-left: 50px!important; }

.pr-0 { padding-right: 0px!important; }
.pr-5 { padding-right: 5px!important; }
.pr-10 { padding-right: 10px!important; }
.pr-15 { padding-right: 15px!important; }
.pr-20 { padding-right: 20px!important; }
.pr-25 { padding-right: 25px!important; }
.pr-30 { padding-right: 30px!important; }
.pr-40 { padding-right: 40px!important; }
.pr-50 { padding-right: 50px!important; }

.px-20 {
  padding-left: 20px;
  padding-right: 20px;
}

.fs-10, .fs-10 p {font-size: 10px!important;}
.fs-11, .fs-11 p {font-size: 11px!important;}
.fs-12, .fs-12 p {font-size: 12px!important;}
.fs-13, .fs-13 p {font-size: 13px!important;}
.fs-14, .fs-14 p {font-size: 14px!important;}
.fs-15, .fs-15 p {font-size: 15px!important;}
.fs-16, .fs-16 p {font-size: 16px!important;}
.fs-17, .fs-17 p {font-size: 17px!important;}
.fs-18, .fs-18 p {font-size: 18px!important;}
.fs-19, .fs-19 p {font-size: 19px!important;}
.fs-20, .fs-20 p {font-size: 20px!important;}
.fs-25, .fs-25 p {font-size: 25px!important;}
.fs-25, .fs-25 p {font-size: 25px!important;}
.fs-30, .fs-30 p {font-size: 30px!important;}
.fs-35, .fs-35 p {font-size: 35px!important;}

.fw-300 {font-weight: 300!important;}
.fw-400 {font-weight: 400!important;}
.fw-500 {font-weight: 500!important;}
.fw-600 {font-weight: 600!important;}
.fw-700 {font-weight: 700!important;}
.fw-800 {font-weight: 800!important;}
.fw-900 {font-weight: 900!important;}

.cursor-pointer {cursor: pointer;}

.line-height-22, .line-height-22 p {line-height: 22px;}

.text-color-1 {color:#0C83BD!important;}
.text-color-2 {color:#444!important;}
.text-color-3 {color:#00344B!important;}

.op-100 {opacity: 1.0;}
.op-90 {opacity: 0.9;}
.op-80 {opacity: 0.8;}
.op-70 {opacity: 0.7;}
.op-60 {opacity: 0.6;}
.op-50 {opacity: 0.5;}
.op-40 {opacity: 0.4;}
.op-30 {opacity: 0.3;}
.op-20 {opacity: 0.2;}
.op-10 {opacity: 0.1;}

/* Hover effects */
.hover-color-1:hover {
  color: #0C83BD!important;

}

.ow {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

.btn {
  font-family: 'Rubik', sans-serif;
  padding: 1rem 1.2rem;
  border-radius: 1rem;
  text-decoration: none;
  color: #fff;
  font-weight: 500;
  transition: all 0.2s ease;
}

.btn-color-1 {
  background-color: #096998!important;
  color: #fff;
}
.btn-color-1:hover {
  background-color: #0C83BD!important;
}

.btn-color-2 {
  background-color: #FFAC2F!important;
  color: #fff;
}

.btn-color-2:hover {
  background-color: #ED8F00!important;
}

.btn-color-3 {
    font-family: 'Raleway', sans-serif;
    padding: 1.5rem 3.5rem;
    background-color: #00344B;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.6rem;
    text-align: center;
    transition: all 0.2s ease;
}

.btn-color-3:hover {
  background-color: #004969;
}


.btn-shape {
  padding: 1rem;
  border-radius: 5px;
  margin: 0;
  font-family: 'Rubik', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  border: none;
}

.p-btn-side {
  color: green;
  font-size: 12px;
  margin: 0 0 0 10px;
}

.btn-foto{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 30.80rem;
}

@media(max-width:767px){
  .btn-foto{
    margin-top: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
  }
}

/* Fuentes
font-family: 'Suez One', serif;
font-family: 'Rubik', sans-serif;
font-family: 'Raleway', sans-serif;
*/

h1 {
  font-family: 'Raleway', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -.42px;
  line-height: 2.5rem;
}

h2 {
  font-family: 'Raleway', sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
}

h3 {
  font-family: 'Raleway', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
}

h4 {
  font-family: 'Raleway', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
}

h5 {
  font-family: 'Suez One', serif;
  font-size: 1.8rem;
}

h6 {
  font-family: 'Rubik', sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
}

p, li {
  font-family: 'Rubik', sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: -.2px;
  line-height: 1.6rem;
}

/* Fuentes en pantallas grandes */
@media(min-width:768px) {
  h1 {font-size: 3rem; line-height: 3.5rem;}
  h2 {font-size: 2.5rem;}
  h3 {font-size: 2.5rem;}
  h4 {font-size: 2rem;}
  h5 {font-size: 1.6rem;}
  h6 {font-size: 3rem;}
  p, li {font-size: 1.6rem; line-height: 2rem}
}

/* Configuración de imágenes para que abarquen todo el contenedor */
img {max-width: 100%;}





/************************************************
*  UTILIDADES
************************************************/
.no-margin {
  margin: 0;
}

.txt-center {
    text-align: center;
}

.ws-normal {white-space: normal;}

.fixed {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
}

.supress-scroll {
  overflow: hidden;
}

.shadow-1 { box-shadow: 0 1px 1px 0 rgba(0,0,0,0.50); }

.hover-move-right:hover {
  transform: translateX(5px);
  transition: all 0.3s ease;
}

.hover-move-left:hover {
  transform: translateX(-5px);
  transition: all 0.3s ease;
}

/*============================
*  Hero
============================*/
.hero {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  overflow: auto;
  background-color: #009EC7;
  border-bottom: .5rem solid #00344B;
  padding-top: 7.5rem;
  overflow: hidden;
}

.hero-escritorio {
    display: none;
}

.hero-top {
    width: 100%;
    overflow: hidden;
    background-image: url(../img/hero-back.png);
    background-size: auto 50%;
    background-repeat: no-repeat;
    background-position: left calc(96%);
}

.hero-menu {
  position:absolute;
  display: inline-block;
  padding: 1.7rem 1.1rem;
  margin-right: 1.8rem;
  cursor: pointer;
  top: .6rem;
  right: 0;
}

.hero-linea-menu {
  background-color: #ffffff;
  height: .2rem;
  border-radius: .1rem;
  width: 2.8rem;
  margin-top: .5rem;
}

.separador-hero {
  background-color: #00344B;
  height: 1.7rem;
  width: 100%;
  margin-top: -1.4rem;
}

.logo-hero {
    height: 4.5rem;
    display: block;
    margin: 0 auto;
    background-image: url(../img/logo-hero.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

@media(min-width:500px){
    .logo-hero {
        height: 7rem;
    }
}

.hero-img {
  max-width: 40rem;
  margin: 6rem auto 0 auto;
  padding-left: 10vw;
}

.hero-responsive h1 {
    font-size: 2rem;
    color: #FFFFFF;
    text-align: center;
    line-height: 29px;
    padding: 3rem 2.5rem;
    margin: 0;
}

.hero-responsive h1 span {
    color: #000000;
}

/* Vista pantallas grandes */
@media(min-width:768px){
    .hero {
        border-bottom: 1.5rem solid #002536;
        padding: 3rem 1rem 0 0;
        background-image: url(../img/hero-back.png);
        background-position: 220% bottom;
        background-size: 90%;
        background-repeat: no-repeat;
    }

    .hero-responsive {
        display: none;
    }

    .hero-escritorio {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
    }

    .logo-hero-largo {
        min-width: 40rem;
        margin-right: -8rem;
    }

    .hero-left, .hero-right {
        /* border: 2px solid; */
    }

    .hero-left {
        margin-left: 3%;
        max-width: 35rem;
    }

    .hero-flecha {
        display: block;
        margin: 1.3rem auto 0 4.8rem;
        height: 10rem;
    }

    .hero-left h1 {
      color: #FFFFFF;
      line-height: 40px;
      text-align: left;
      margin: 3rem auto 0 0;
      font-size: 3rem;
      max-width: 35rem;
    }

    .hero-left h1 span:first-of-type {
        font-size: 3.5rem;
        color: #ffffff;
        padding: 0;
    }

    .hero-left h1 span:last-of-type {
        font-size: 2.5rem;
        color: #000000;
    }

    .hero-left h2 {
      font-size: 2.2rem;
      color: #FFFFFF;
      letter-spacing: -0.39px;
      line-height: 25px;
      margin-top: 8.6rem;
    }

    .hero-right {
      background-image: url(../img/hero-img.png);
      min-width: 45rem;
      width: 63.2rem;
      height:69.6rem;
      margin-left: -2rem;
      background-position: bottom;
      background-repeat: no-repeat;
      background-size: contain;
    }
}

/* Vista pantallas aun más grandes */
@media(min-width:915px) {
    .hero {
        padding: 6rem 5% 0 0;
    }

    .logo-hero-largo {
        min-width: 40rem;
        max-width: 40rem;
        margin-right: -8rem;
    }

    .hero-left {
        margin-left: 5%;
        max-width: 42rem;
    }

    .hero-left h1 {
      font-size: 3.5rem;
      max-width: 50rem;
      line-height: 45px;
    }

    .hero-left h1 span:first-of-type {
        font-size: 4rem;
    }

    .hero-left h1 span:last-of-type {
        font-size: 3rem;
    }

    .hero-left h2 {
      font-size: 2.8rem;
    }

    .hero-right {
      min-width: 50rem;
    }
}

/* Vista pantallas de alta resolución*/
@media(min-width:1600px) {
    .hero {
        background-position: center bottom;
        background-size: 70%;
    }
    .hero-escritorio {
        justify-content: center;
    }

    .hero-left {
        margin-right: 6rem;
    }

    .hero-right {
        margin-left: 6rem;
    }
}


/*============================
*  Hero nuevo (2022)
============================*/
.hero-2022-container {
  width: 100%;
  height: auto;
  border-bottom: 15px solid #00344B;
  background-image: url(../img/hero-ciudad.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 120px 40px;
  margin: 0px;
}

.hero-card {
  opacity: 0.82;
  background: #FFFFFF;
  border-radius: 30px;
  padding: 50px 80px;
  max-width: 750px;
  margin: 0 auto;
  width: 100%;
}

.hero-card-anuncio {
  opacity: 0.90;
  background: #FFFFFF;
  border-radius: 30px;
  padding: 40px 50px;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

.logo-hero-2022 {
  width: 100%;
  max-width: 320px;
  display: block;
  margin: 0 auto;
}

.hr-hero {
  width: 80%;
  margin: 26px auto;
  opacity: 0.3;
  height: 2px;
  background-color: #00344B;
  border: none;
}

.hero-label {
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 22px;
  color: #000000;
  letter-spacing: 0;
  text-align: center;
  line-height: 32px;
}

/* Vista responsiva */
@media(max-width:767px) {
  .hero-2022-container {
    padding: 120px 25px 80px 25px;
  }
  
  .hero-card {
    padding: 40px 30px;
  }

  .hero-card-anuncio {
    padding: 20px 15px;
  }

  .logo-hero-2022 {
    max-width: 260px;
    width: 90%;
  }

  .hero-label {
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 25px;
  }
}




/*============================
* Barra
============================*/
.barra {
  width: 100%;
  background-color: #ffffff;
  height: 7rem;
  border-bottom: .1rem solid #D9D9D9;
  top: 0;
  left: 0;
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.5s ease;
  opacity: 1;
  z-index: 9;
}

.barra img {
  height: 3rem;
  margin-left: 2.2rem;
}

.menu-responsivo {
  padding: 1.7rem 1.1rem;
  margin-right: 1.8rem;
  cursor: pointer;
}

.linea-hamburguesa {
  background-color: #002536;
  height: .2rem;
  border-radius: .1rem;
  width: 2.8rem;
  margin-top: .5rem;
}

.linea-hamburguesa:first-of-type {
  margin-top: 0;
}


@media(min-width:768px) {
  .barra {
    display: none;
  }
}





/*============================
* MENU RESPONSIVO
============================*/
.overlay {
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 10;
  top: 0;
  right: -100%;
  background-color: #ffffff;
  overflow-x: hidden;
  transition: 0.5s;
  background-image: url(../img/fondo-menu.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.overlay-content {
  position: relative;
  top: 10%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {
  font-family: 'Raleway', sans-serif;
  padding: 1.5rem 0;
  text-decoration: none;
  font-size: 2rem;
  color: #ffffff;
  display: block;
  transition: 0.3s;
  white-space: nowrap;
  overflow: hidden;
  font-weight: 500;
}

.overlay a:hover, .overlay a:focus,
.especialistas-responsivo a:hover,
.especialistas-responsivo a:focus,
.quiero-comprar-responsivo a:hover,
.quiero-comprar-responsivo a:focus,
.quiero-asesoria-financiamiento-responsivo a:hover,
.quiero-asesoria-financiamiento-responsivo a:focus,
.soy-propietario-responsivo a:hover,
.soy-propietario-responsivo a:focus,
.calculadoras-responsivo a:hover,
.calculadoras-responsivo a:focus,
.asesoria-responsivo a:hover,
.asesoria-responsivo a:focus {
  color: #009EC7;
}

.especialistas-responsivo,
.quiero-comprar-responsivo,
.quiero-asesoria-financiamiento-responsivo,
.soy-propietario-responsivo,
.calculadoras-responsivo,
.asesoria-responsivo {
  position: relative;
  top: 12%;
  width: auto;
  text-align: center;
  margin-top: 3rem;
  margin-left: 2.5rem;
  margin-right: 1rem;
  display: none;
}

.especialistas-responsivo a,
.calculadoras-responsivo a,
.quiero-comprar-responsivo a,
.quiero-asesoria-financiamiento-responsivo a,
.soy-propietario-responsivo a
.asesoria-responsivo a {
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  max-width: 100%;
  padding: 1rem;
  text-align: left;
  text-decoration: none;
  font-size: 1.8rem;
  color: #ffffff;
  display: block;
  transition: 0.3s;
  white-space: normal;
}

.overlay .closebtn {
  position: absolute;
  padding: 0rem 2rem;
  top: 2rem;
  margin: 0;
  right: 2rem;
  font-size: 50px;
}

.overlay-content a span {
  display: block;
  font-size: 14px;
  color: yellow;
  margin-bottom: -1rem;
}







/*============================
* NAVEGACION ESCRITORIO
============================*/
.navegacion {display:none;}

/* Vista para pantallas grandes */
@media(min-width:768px) {
  .navegacion {
    width: 100%;
    display: block;
    z-index: 11;
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
  }

  .nav-bar {
    width: 100%;
    /* max-height: 66px; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: .1rem solid #D9D9D9;
    background-color: #ffffff;
    height: auto;
  }

  .nav-bar .logo-grande {
    display: block;
    width: 15rem;
    margin-left: 2.5rem;
  }

  .nav-bar .logo-chico {
    display: none;
    height: 4rem;
    margin-left: 2.5rem;
  }

  .nav-items {
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    height: 100%;
  }

  .nav-items a {
    font-family: 'Raleway', sans-serif;
    padding: 24px 14px;
    height: 100%;
    text-align: center;
    display: block;
    text-decoration: none;
    color: #363636;
    font-size: 11px;
    font-weight: 600;
    transition: all 0.2s ease;
    line-height: 13px;
  }

  .nav-items a:hover {
    color: #009EC7;
  }

  .barra-especialistas,
  .barra-calculadoras,
  .barra-asesorias,
  .barra-quiero-comprar,
  .barra-quiero-asesoria-financiamiento,
  .barra-soy-propietario {
    width: 100%;
    max-width: 32rem;
    float: right;
    background-color: #00344B;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    height: auto;
    max-height: 0;
    transition: all 0.4s;
    padding: 0;
    border-bottom-left-radius: 2rem;
    border-bottom-right-radius: 2rem;
    margin-top: -.1rem;
  }

  .barra-soy-propietario {
    margin-right: 58rem;
    overflow: hidden;
  }

  .barra-quiero-comprar {
    margin-right: 50rem;
    overflow: hidden;
  }

  .barra-quiero-asesoria-financiamiento {
    margin-right: 40rem;
    overflow: hidden;
  }

  .barra-asesorias {
    margin-right: 31rem;
    overflow: hidden;
  }

  .barra-especialistas {
    margin-right: 23rem;
    overflow: scroll;
  }

  .barra-calculadoras {
    margin-right: 3rem;
    overflow: hidden;
  }

  /* Ajuste de a vista antes de ser responsivo */
  @media(max-width: 1100px) {
    .barra-soy-propietario { margin-right: 45rem;}
    .barra-quiero-comprar { margin-right: 40rem;}
    .barra-quiero-asesoria-financiamiento { margin-right: 39rem;}
    .barra-asesorias { margin-right: 29rem;}
    .barra-especialistas { margin-right: 19rem;}
    .barra-calculadoras { margin-right: 2rem;}
  }



  .esp-cont {
    display: flex!important;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    padding: .7rem 1.5rem;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
    font-family: 'Raleway', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    transition: all 0.2s ease;
    text-align: center;
    line-height: 1.8rem;
  }

  .esp-cont:hover {
    background-color: #0D597A;
  }

  .resaltar-menu {
    position: relative;
    background-color: rgba(0,159,195,0.10);
  }

  .resaltar-menu a:hover {
    color: rgb(0,159,195);
  }

  .resaltar-menu p {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 3.2rem;
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 9px;
    letter-spacing: .2px;
    text-transform: uppercase;
    color: #009EC7;
    z-index: 0;
  }
}


/* Vista antes de ser responsivo para evitar que el nav-bar crezca */
@media(max-width: 1100px) {
  .nav-bar .logo-grande {
    display: none;
  }
  .nav-bar .logo-chico {
    display: block;
  }
  .nav-items a {
    padding: 2.5rem 1rem;
  }
}

/* @media(max-width:915px) {
  .barra-especialistas a {
    font-size: 1.2rem;
  }
} */

/* @media(max-width:840px) {
  .barra-especialistas a {
    font-size: 1.1rem;
  }
} */






/*============================
* Intro
============================*/
.intro {
  margin: 8rem auto 0 auto;
  width: 85%;
}

.intro img {
  margin: 0 auto;
  width: 4.5rem;
  display: block;
}

.intro h1 {
  text-align: center;
  margin-top: 2rem;
  font-size: 2.2rem;
  line-height: 2.8rem;
}

.intro p {
  margin-top: 2rem;
  text-align: center;
  color: #1B1C1D;
  line-height: 2.4rem;
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 3rem;
}

.intro p span {
  font-weight: 400;
}

.link-diagnostico {
    background-color: #008CB6;
    padding: 1rem 1.2rem;
    border-radius: 1rem;
    text-decoration: none;
    color: #fff;
    font-weight: 500;
    transition: all 0.2s ease;
}

.link-diagnostico:hover {
    background-color: #006E8F;
}


/* Vista para pantallas grandes */
@media(min-width:768px) {
  .intro {
    margin-top: 8rem;
  }

  .intro img {
    width: 6rem;
  }

  .intro h1 {
    margin-top: 3rem;
    font-size: 3rem;
    line-height: 3.5rem;
  }

  .intro p {
    margin-top: 3rem;
    font-size: 1.8rem;
    line-height: 3.9rem;
  }

}











/*============================
* ¿Cómo funciona?
============================*/
.como-funciona {
  margin: 6rem auto 0 auto;
  max-width: 85rem;
  width: 90%;
}

.como-funciona h1 {
  text-align: center;
  margin: 0 auto;
}

.como-funciona p {
  text-align: center;
  color: #707070;
  font-weight: 300;
}

.pasos-contenido {
  margin-top: 7rem;
}

.pasos {
  background-color: #C4ECFF;
  border-radius: 2rem;
  width: 24.2rem;
  margin: 8rem auto 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 1.7rem 4rem 1.7rem;
}

.pasos:first-of-type {
  margin: 0 auto;
}

.pasos img {
  height: 6rem;
  margin: -3rem auto 0 auto;
}

.pasos:last-of-type img {
  height: 4.8rem;
  margin-top: -2rem;
}

.pasos h4 {
  margin: 3rem auto 0 auto;
  color: #00344B;
  font-size: 2rem;
}

.pasos p {
  margin: 1.8rem auto 0 auto;
  color: #00344B;
  line-height: 2.5rem;
  font-size: 1.5rem;
}

.pasos:nth-child(2n) {
  background-color: #008CB6;
}

.pasos:nth-child(2n) h4,
.pasos:nth-child(2n) p {
  color: #ffffff;
}

/* Vista para pantallas grandes */
@media(min-width:768px) {
  .como-funciona {
    margin-top: 10rem;
  }

  .pasos-contenido {
    margin-top: 6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .pasos {
    margin: 0;
    height: 22rem;
    justify-content: flex-start;
    padding: 0 2.7rem;
  }

  .pasos:first-of-type {
    margin: 0;
  }

  .pasos:nth-child(2n) {
    margin: 0 1rem;
  }

  .pasos img {
    height: 6rem;
    margin-top: -3rem;
  }

  .pasos:last-of-type img {
    height: 5rem;
    margin-top: -2rem;
  }

  .pasos h4 {
    font-size: 2rem;
  }

  .pasos p {
    margin-top: 1.5rem;
    line-height: 2.5rem;
    font-size: 1.5rem;
    font-weight: 400;
  }
}






/*============================
* Realizar TEST
============================*/
.test{
  margin-top: 4rem;
  width: 100%
}

.realizar-test {
  background-color: #FBF2DA;
  padding: 3rem 2.7rem;
}

.realizar-test h2:first-of-type {
  color: #1D1D1B;
  font-size: 2rem;
  text-align: center;
}

.realizar-test h2:last-of-type {
  margin-top: 2rem;
  color: #C09500;
  font-size: 1.8rem;
  text-align: center;
}

.realizar-test a {
  display: block;
  background-color: #008CB6;
  border-radius: 1.5rem;
  padding: 1.4rem 1rem;
  font-size: 1.8rem;
  text-decoration: none;
  font-weight: 700;
  font-family: 'Raleway', sans-serif;
  color: #ffffff;
  text-align: center;
  margin: 0 auto;
  max-width: 21.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.realizar-test a:hover {
  background-color: #006E8F;
}

/* Vista para pantallas grandes */
@media(min-width:768px) {
  .test{
    margin-top: 6rem;
  }

  .realizar-test {
    width: 100%;
    padding: 3rem 5rem;
  }

  .realizar-test h2:first-of-type {
    font-size: 2.5rem;
  }

  .realizar-test h2:last-of-type {
    font-size: 2.3rem;
  }
}







/*============================
* Nuestros Especialistas
============================*/
.nuestros {
  margin: 0 auto;
  width: 90%;
  max-width: 50rem;
  padding-top: 6rem;
}

.nuestros h1 {
  text-align: center;
  margin: 0 auto;
}

.nuestros p {
  text-align: center;
  color: #707070;
  font-weight: 300;
  margin: 1.2rem auto 0 auto;
}

.lista-especialistas {
  margin: 4rem auto 0 auto;
  max-width: 30rem;
}

.item-especialista {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 2.5rem;
}

.item-especialista:first-of-type {
  margin-top: 0;
}

.icono {
  min-width: 2.5rem;
  min-height: 2.5rem;
}

.item-especialista img {
  height: 2.5rem;
  width: auto;
  display: block;
  margin: 0 auto;
}

.esp-texto {
  text-decoration: none;
  margin: .4rem 0 0 2rem;
}

.esp-texto h3 {
  text-align: left;
  color: rgb(0,121,161);
  margin: 0;
  font-size: 1.8rem;
}

.esp-texto p {
  text-align: left;
  font-weight: 400;
  font-size: 1.2rem;
  margin: .6rem 0 0 0;
}

/* Vista para pantallas grandes */
@media(min-width:768px){
  .nuestros {
    padding-top: 10rem;
    max-width: 90rem;
  }

  .lista-especialistas {
    margin-top: 5rem;
    margin-left: 10rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-row-gap: 4rem;
    grid-column-gap: 12rem;
    max-width: 77rem;
  }

  .item-especialista {
    margin: 0;
  }

  .icono {
    min-width: 3.5rem;
    min-height: 3.5rem;
  }

  .item-especialista img {
    height: 3rem;
  }

  .esp-texto h3 {
    font-size: 1.8rem;
  }

  .esp-texto p {
    line-height: 1.7rem;
    font-size: 1.4rem;
  }
}







/*============================
* ÚNETE AL EQUIPO
============================*/

.unete {
  width: 100%;
  background-color: rgb(0, 157, 203);
  padding: 6rem 0;
  margin-top: 6rem;
}

.unete h1 {
  color: #ffffff;
  font-size: 2.2rem;
  margin: 0 auto;
  text-align: center;
  width: 90%;
}

.unete h2 {
  font-size: 1.6rem;
  color: #000000;
  margin: 2rem auto 0 auto;
  text-align: center;
  width: 90%;
}

.unete h2:last-of-type{
  color: #ffffff;
  font-weight: 400;
  margin-top: 1.1rem;
}

.precios {
  margin: 4rem auto;
  width: 90%;
}

.item-precio {
    margin: 0 auto;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    max-width: 45rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
}

.item-precio p {
    font-family: 'Rubik', sans-serif;
    padding: 1.5rem 0;
    margin: 0;
    width: 100%;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 400;
}

.item-precio p span {
    font-weight: 500;
}

.item-precio a {
    font-family: 'Raleway', sans-serif;
    padding: 1.5rem 3.5rem;
    background-color: #00344B;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.6rem;
    text-align: center;
    transition: all 0.2s ease;
}

.item-precio a:hover {
    background-color: #004969;
}

@media(max-width:450px) {
    .item-precio {
        max-width: 30rem;
        display: block;
    }

    .item-precio p {
        padding: 1.5rem;
        width: 100%;
        font-size: 1.5rem;
    }

    .item-precio a {
        display: block;
    }
}

.beneficios {
  margin: 7rem auto 0 auto;
}

.beneficios h1{
  text-align: center;
  color: #ffffff;
  font-size: 2rem;
  width: auto;
}

.separador-dotted {
 margin-top: 2rem;
 height: 0.2rem;
 width: 100%;
 background-image: url(../img/dotted-line.png);
}

.lista-beneficios {
  margin: 3.5rem auto 0 auto;
  width: 92%;
}

.item-beneficio {
    text-decoration: none;
}

.item-beneficio img {
  display: block;
  width: 3.5rem;
  margin: 0 auto;
}

.item-beneficio p {
  color: #ffffff;
  font-size: 1.4rem;
  text-align: center;
}

.item-beneficio p span {
  color: #000000;
}


/* Vista para pantallas grandes */
@media(min-width:768px){
  .unete {
    padding: 5.5rem 3rem;
    margin: 10rem auto 0 auto;
    max-width: 95rem;
    width: 95%;
    border-radius: 5rem;
  }

  .unete h1 {
    font-size: 3.5rem;
  }

  .unete h2 {
    font-size: 2rem;
    margin-top: 2.7rem;
  }

  .precios {
    margin-top: 6rem;
  }

  .beneficios {
    margin-top: 6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 73rem;
  }

  .beneficios h1{
    font-size: 3rem;
    margin: 0;
  }

  .separador-dotted {
   margin: 0;
   height: 17.8rem;
   width: 1.4rem;
   background-image: url(../img/flecha-abajo-dotted.png);
  }

  .lista-beneficios {
    margin: 0;
    width: auto;
    max-width: 42rem;
  }

  .item-beneficio {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .item-beneficio:last-of-type {
    margin-top: 0rem;
  }

  .item-beneficio img {
    width: 3.5rem;
  }

  .item-beneficio p {
    color: #ffffff;
    font-size: 1.5rem;
    margin-left: 4rem;
    line-height: 2rem;
    text-align: left;
  }

  .item-beneficio p span {
    color: #000000;
  }
}











/*============================
* Contacto
============================*/
.contacto {
  margin: 5rem auto 0 auto;
  width: 90%;
}

.contacto h1 {
  text-align: center;
}

.tarjetas-contacto {
  margin: 4rem auto 0 auto;
  max-width: 82rem;
}

.item-contacto {
  margin: 1rem auto 0 auto;
  background-color: #D88124;
  border-radius: 2rem;
  padding: 3.5rem 2rem;
  max-width: 25rem;
  min-height: 25.6rem;
}

.item-contacto:first-of-type {
  background-color: #006A86;
}

.item-contacto:last-of-type {
  background-color: #4BC75A;
}

.item-contacto i {
  display: block;
  color: #ffffff;
  font-size: 4.2rem;
  text-align: center;
}

.item-contacto h3 {
  color: #ffffff;
  font-size: 1.6rem;
  text-align: center;
  margin: 2.6rem auto 0 auto;
}

.item-contacto p {
  margin: .5rem auto 0 auto;
  text-align: center;
  color: #ffffff;
  line-height: 1.8rem;
  font-weight: 300;
  font-size: 1.2rem;
}

.item-contacto a {
  display: block;
  border-radius: 1rem;
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.5rem;
  font-family: 'Raleway', sans-serif;
  text-align: center;
  padding: 1.3rem 1rem;
  background-color: #B85F00;
  max-width: 13.2rem;
  margin: 2rem auto 0 auto;
  transition: all 0.3s ease;
}

.item-contacto a:hover {
  background-color: rgba(0, 0, 0, 0.4)!important;
}

.item-contacto:first-of-type a {
  background-color: #004C60;
  max-width: 15.4rem;
}

.item-contacto:last-of-type a {
  background-color: #22A632;
  max-width: 16.8rem;
}

@media(min-width:768px){
  .contacto {
    margin-top: 8rem;
  }
  .tarjetas-contacto {
    margin-top: 4rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  .item-contacto {
    margin: 0;
  }

  .item-contacto:nth-child(2n){
    margin: 0 1rem;
  }
}








/*============================
* Footer
============================*/
.site-footer {
  width: 100%;
  padding: 3rem;
  background-color: #00344B;
  margin-top: 7rem;
}

.logo-footer {
    max-height: 4rem;
    margin: 0;
    display: block;
}

.site-footer p, .site-footer li {
  font-weight: 300;
  color: #ffffff;
  font-size: 1rem;
  text-align: left;
  letter-spacing: .3px;
  line-height: 2rem;
}

.site-footer p a {
    color: #fff;
    cursor: pointer;
}

.site-footer p a:hover {
    color: rgba(255,255,255,0.5);
}

/* Vista para pantallas grandes */
@media(min-width:768px) {
  .site-footer {
    padding: 3rem 4.5rem 3rem 4.5rem;
    margin-top: 10rem;
  }

  .logo-footer {
      max-height: 4rem;
      margin: 0;
  }

  .site-footer p, .site-footer li {
    font-size: 1.3rem;
    text-align: left;
  }
}

.figx {
    width: 100%;
    background-color: #001B27;
    margin: 0;
    color: rgba(255,255,255,0.5);
    font-size: 1.2rem;
    font-weight: 300;
    padding: 1.2rem 4rem;
    text-align: left;
}

.figx a {
    text-decoration: none;
    color: rgba(255,255,255,0.7);
    font-weight: 400;
}

/* Vista para pantallas grandes */
@media(min-width:768px) {
    .figx {
        text-align: left;
        font-size: 1.3rem;
    }
}







/*============================
* Aviso de privacidad
============================*/
.privacidad {
    display: none;
    top: 0;
    left: 0;
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 20;
}

.privacidad-box {
    padding: 1rem 2.5rem 3rem 2.5rem;
    width: 90%;
    max-width: 80rem;
    background-color: #fff;
    border-radius: 10px;
    height: 80%;
    margin: 0 auto;
    overflow: scroll;
}

.privacidad-cerrar {
    margin: 2rem auto 1rem auto;
    width: 90%;
    max-width: 80rem;
    display: flex;
    justify-content: flex-end;
}

.privacidad-cerrar i {
    color: #fff;
    text-align: right;
    font-size: 3.2rem;
    padding: 1rem 1.2rem;
    cursor: pointer;
}

.privacidad-box h3 {
    text-align: left;
    margin: 3rem auto 0 auto;
}

.privacidad-box p {
    text-align: justify;
    line-height: 1.5rem;
}

.privacidad-box p span{
    font-weight: 500;
}

@media(min-width:768px){
    .privacidad-box p {
        line-height: 2rem;
    }

    .privacidad-box {
        padding: 1rem 3.5rem 3rem 3.5rem;
    }
}






/* Ventana de errores */
.pop-up-error, .pop-up-status {
  display: block;
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.3);
  z-index: 50;
  top: 0;
  left: 0;
  padding: 20px 10px;
}

.error-win, .status-win {
    background-color: #fff;
    border-radius: 10px;
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.29);
}

.error-top, .status-top{
    width: 100%;
    background-color: #00344B;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
}

.error-top i, .status-top i  {
    font-size: 20px;
    padding: 8px 10px;
    margin-right: 10px;
    cursor: pointer;
}

.error-top h4, .status-top h4 {
    font-family: 'Rubik', sans-serif;
    font-size: 1.4rem;
    color: #fff;
    margin: 0;
    padding: 10px 20px;
}

.error-win ul, .status-win ul {
    margin-top: 15px;
}

.error-win ul li, .status-win ul li {
    color: #2C2C2C;
    font-family: 'Rubik', sans-serif;
    font-size: 14px;
}







/* ESTILOS TEMPORALES (quitar cuando no sean necesarios) */
.redes-sociales {
  display: none!important;
}

.p-privacidad {
  font-size: 12px!important;
  text-align: center;
}

.p-privacidad a {
  font-size: 12px!important;
  background-color: transparent!important;
  padding: 0!important;
  color: #00344B!important;
}







/*============================
* BANNER 
============================*/
.banner {
    overflow: hidden;
    border-radius: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    max-width: 92rem;
    width: 95%;
    margin: 15rem auto 0 auto;
}

.banner-left {
    flex-basis: 35%;
    min-width: 35%;
    background-image: url(../img/cerrojo.jpg);
    border-right: 1.2rem solid #00344B;
    background-position: center;
    background-size: cover;
    background-color: gray;
}

.banner-right {
    flex-basis: 65%;
    min-width: 65%;
    background-color: #009EC7;
    padding: 3rem 0 2rem 0;
}

/* .banner-right {
    flex-basis: 55%;
    min-width: 55%;
    display: none;
} */

.banner-right h1 {
    font-size: 35px;
    color: #FFFFFF;
    letter-spacing: -0.49px;
    text-align: center;
}

.banner-right h2 {
    font-size: 22px;
    color: #000000;
    letter-spacing: -0.31px;
    text-align: center;
    line-height: 30px;
    max-width: 38rem;
    margin: 25px auto 0 auto;
}

.baner-separador-dotted {
    background-image: url(../img/dotted-line.png);
    background-repeat: repeat;
    background-position: left;
    background-size: contain;
    width: 100%;
    height: 2px;
    margin-top: 2rem;
}

.banner-right img {
    display: block;
    width: 4rem;
    margin: 3.6rem auto 0 auto;
}

.banner-right p {
    font-size: 15px;
    color: #000;
    letter-spacing: -0.22px;
    text-align: center;
    max-width: 90%;
    line-height: 2rem;
    margin: 2rem auto 0 auto;
}

.banner-right a {
  text-decoration: none;
  font-size: 16px;
  color: #000;
  /* letter-spacing: -0.22px;
  text-align: center;
  max-width: 90%;
  line-height: 2rem;
  margin: 2rem auto 0 auto; */
}

.banner-right button {
    display: block;
    outline: none;
    border: none;
    margin: 3.6rem auto 0 auto;
    overflow: hidden;
    background-color: transparent;
}

.banner-right .cust-a  {
    padding: 1.4rem 4.2rem;
    display: block;
    text-decoration: none;
    color: #ffffff;
    width: 100%;
    height: 100%;
    background-color: #00344B;
    border-radius: 15px;
    margin: 0;
    font-family: 'Raleway', sans-serif;
    font-size: 18px;
    color: #FFFFFF;
    letter-spacing: -0.23px;
    text-align: center;
    font-weight: 700;
    transition: all 0.3s ease;
}

.banner-right .cust-a:hover {
    background-color: #002332
}

@media(max-width:767px) {
    .banner {
        margin-top: 9rem;
    }

    .banner-left {
        display: none;
    }

    .banner-right {
        width: 100%;
        flex-basis: 100%;
        max-width: 100%;
        padding-top: 4rem;
        padding-bottom: 2.5rem;
    }

    .banner-right h1 {
        font-size: 25px;
    }

    .banner-right h2 {
        font-size: 18px;
        line-height: 25px;
        width: 90%;
        margin-top: 2rem;
    }

    .baner-separador-dotted {
        margin-top: 4rem;
    }

    .banner-right img {
        width: 3rem;
        margin: 3.6rem auto 0 auto;
    }

    .banner-right p {
        font-size: 14px;
        width: 90%;
        line-height: 2rem;
    }
}


.social-icon {
  width: 30px;
  height: 30px;
  margin-right: 7px;
}




/*============================
* BIEN PARA BIEN
============================*/
.web_custom_card_1_cont {
  margin-top: 7rem;
}

.web_custom_card_1 {
  background-color: #C4ECFF;
  border-radius: 2rem;
  width: 24.2rem;
  margin: 8rem auto 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 1.7rem 4rem 1.7rem;
}

.web_custom_card_1:first-of-type {
  margin: 0 auto;
}

.web_custom_card_1 img {
  height: 6rem;
  margin: -3rem auto 0 auto;
}

.web_custom_card_1:last-of-type img {
  height: 4.8rem;
  margin-top: -2rem;
}

.web_custom_card_1 h4 {
  margin: 3rem auto 0 auto;
  color: #00344B;
  font-size: 2rem;
}

.web_custom_card_1 p,
.web_custom_card_1 li {
  margin: 1.8rem auto 0 auto;
  color: #00344B;
  line-height: 2.5rem;
  font-size: 1.5rem;
}

.web_custom_card_1:nth-child(2n) {
  background-color: #008CB6;
}

.web_custom_card_1:nth-child(2n) h4,
.web_custom_card_1:nth-child(2n) p,
.web_custom_card_1:nth-child(2n) li {
  color: #ffffff;
}

/* Vista para pantallas grandes */
@media(min-width:768px) {
  .web_custom_card_1_cont {
    margin-top: 6rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  .web_custom_card_1 {
    margin: 0;
    justify-content: flex-start;
    padding: 0 2.7rem 2.7rem 2.7rem;
  }

  .web_custom_card_1:first-of-type {
    margin: 0;
  }

  .web_custom_card_1:nth-child(2n) {
    margin: 0 1rem;
  }

  .web_custom_card_1 img {
    height: 6rem;
    margin-top: -3rem;
  }

  .web_custom_card_1:last-of-type img {
    height: 5rem;
    margin-top: -2rem;
  }

  .web_custom_card_1 h4 {
    font-size: 2rem;
  }

  .web_custom_card_1 p,
  .web_custom_card_1 li {
    margin-top: 1.5rem;
    line-height: 2.5rem;
    font-size: 1.5rem;
    font-weight: 400;
  }
}


/*============================
*  HERO REGISTRO
============================*/
.hero-registro {
  height: 11rem;
  width: 100%;
  background-position: center;
  background-size: cover;
  margin: 0;
}

.hero-bg-1 {background-image: url(../img/registro-hero-back.jpg);}
.hero-bg-2 {background-image: url(../img/hero-back-2.jpg);}
.hero-bg-3 {background-image: url(../img/hero-back-3.jpg);}

.hero-registro h1 {
  color: #ffffff;
  text-align: center;
  padding-top: 6.3rem;
  margin: 0;
  white-space: normal;
}

.opacidad-registro {
  background-color: rgba(0, 17, 25, 0.6);
  height: 100%;
  width: 100%;
  padding: 0 3rem;
}

.registro-bottom-line {
  width: 100%;
  height: 1rem;
  background-color: #00344B;
}

/* Vista para pantallas grandes */
@media(min-width:768px) {
  .hero-registro {
    height: 18.5rem;
  }

  .hero-registro h1 {
    padding-top: 12.8rem;
    font-size: 3rem;
    text-align: left;
  }

  .opacidad-registro {
    padding: 0 6.6rem;
  }

  .registro-bottom-line {
    height: 1.5rem;
  }
}