/*Generales*/
html {
  scroll-behavior: smooth;
}

body {
  color: #686868;
  padding: 0;
  margin: 0;
  background-image: url("../images/bg-general.png");
  background-repeat: repeat;
  background-size: auto;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
a,
button,
small,
big {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  font-weight: 300;
  font-style: italic;
  padding: 0 24px;
}

p {
  font-weight: 300;
}

.seccion-1, .seccion-2, .seccion-3, .seccion-4, .logo-contenedor {
  -webkit-box-shadow: 3px 2px 5px 0px hsla(0, 0%, 1%, 0.226);
  -moz-box-shadow: 3px 2px 5px 0px rgb(0, 0%, 1%, 0.226);
  box-shadow: 3px 2px 5px 0px rgb(0, 0%, 1%, 0.226);
}

.logo-contenedor {
  background-color: #ffffff;
  z-index: 1;
  position: relative;
}

/*INI sección 1*/
h1 {
  font-size: 2.688rem;
  line-height: 1;
  color: #016d38;
  text-align: left;
  text-transform: uppercase;
  font-weight: 600;
  margin: 120px 0 14px;
}

.h2-hero {
  font-weight: 300;
  font-size: 1.563rem;
  margin-bottom: 16px;
}

.footer {
  bottom: 0;
  margin-top: 6rem;
}

.seccion-1-titulo-principal p {
  margin-bottom: 50px;
}

.seccion-1-titulo-principal {
  background-image: url('../images/bg-verde-mobile.png');
  background-repeat: no-repeat;
  background-size: 80%;
  background-position: bottom right;
  margin-top: 30px;
}

.seccion-1-titulo-principal .row-contenedor-seccion-1, .seccion-2-bienestar .row-contenedor-seccion-2, .seccion-3-comunidad .row-contenedor-seccion-3, .row-contenedor-seccion-4 {
  max-width: 1336px;
  margin: 0 auto;
}

.botones-descargas {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  margin-bottom: 50px;
}

.botones-descargas .descargas-btn img {
  width: 100%;
}

.descargas-btn {
  width: 211px;
  padding: 0 10px;
}

.container-logo img {
  width: 100%;
}

.container-logo {
  width: 130px;
  margin: 20px auto;
}

.celular, .celular2, .celular3, .celular4 {
  width: 80%;
  margin: 40px auto 0;
  display: block;
  max-width: 300px;
}

.celular img, .celular2 img, .celular3 img, .celular4 img {
  width: 100%;
}

.flecha-abajo img {
  width: 100%;
}

.flecha-abajo {
  max-width: 35px;
  display: block;
  margin: 40px auto 30px;
}
/*FIN Sección 1*/

/*INI sección 2*/
.seccion-2 {
  overflow: hidden;
  padding-bottom: 60px;
}

h2.h2-secciones {
  font-size: 2.25rem;
  text-transform: uppercase;
  color: #016d38;
  font-weight: 600;
  margin-top: 90px;
}

h3.h3-secciones {
  font-size: 1.5rem;
  color: #016d38;
  font-weight: 600;
  text-align: center;
}

.texto-seccion-2 {
  text-align: center;
}

.img-seccion-2 {
 width: 50px;
 margin: 5px auto;
}

.img-seccion-2 img {
  width: 100%;
}

.titulo-seccion-2 {
  margin-bottom: 40px;
}

.contenidos-seccion-2 {
  margin: 10px 0;
}

.celular-seccion-2 {
  position: relative;
}

.celular-seccion-2::before {
  content: '';
  background-image: url('../images/barra.png');
  background-repeat: no-repeat;
  width: 921px;
  height: 100%;
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
}

.h3-secciones {
  text-transform: uppercase;
}
/*FIN Sección 2*/

/*INI Sección 3*/
.seccion-3 {
  background-image: url('../images/bg-verde-secciones-3-4.png');
  background-repeat: no-repeat;
  background-position: center 791px;
  background-size: cover;
  overflow: hidden;
  padding-bottom: 80px;
}

.contenidos-seccion-3 {
  margin-top: 40px;
}

.cards-info1 {
  margin: 2rem auto 0;
  background-color: #ffffff;
  padding: .8rem 1rem;
  border-radius: 10px;
  box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 40%);
  max-width: 300px;
}

.cards-info1 .card-info1-pin:nth-child(2) {
  border-bottom: 1px solid #e3e3e3;
}

.card-info1-pin {
  display: flex;
  padding: .6rem 0;
  align-items: center;
}

.card-info1-pin p {
  flex-grow: 1;
}

.card-info1-pin img {
  align-self: center;
}

.card-info1-titulo {
  padding: .3rem .5rem;
  border-bottom: 1px solid #e3e3e3;
  border-left: 5px solid #ffdc5d;
}

.cards-info2 {
  background-color: #ffffff;
  max-width: 300px;
  padding: .8rem 1rem;
  border-radius: 10px;
  box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 40%);
  margin: 2rem auto 0;
}

.card-supp {
  margin: 2rem auto 0;
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  background: #FFF;
  border-radius: 10px;
  box-shadow: 3px 4px 12px -3px rgb(0 0 0 / 30%);
  overflow: hidden;
  max-width: 400px;
}


.card-supp-copy {
  flex: 1 0 60%;
  padding: 1rem 0 1rem 1rem;
}

.card-supp.revert .card-supp-copy{
  order: 2;
}

.card-supp-image {
  flex: 1 0 40%;
}

.card-supp-head {
  display: flex;
  flex-flow: row nowrap;
  margin-bottom: .5rem;
}

.card-supp-head img {
  align-self: center;
}

.card-supp-headings p,
.card-supp-headings h3 {
  padding-left: 10px;
}

.card-supp-headings h3 {
  color: #000;
  font-weight: 500;
}

.card-supp-headings p {
  color: #a5a5a5;
  font-size: .8rem;
}

.card-supp-info p {
  padding: 0;
} 

.card-supp-image {
  background-size: cover;
  background-position: center;
}

.card-supp-image.image-1 {
  background-image: url(../images/seccion-4-card-1.png);
}

.card-supp-image.image-2 {
  background-image: url(../images/seccion-4-card-2.png);
}

.contenidos-seccion-3 h3 {
  text-align: left;
    margin-bottom: 0;
    margin-top: 20px;
}

/*FIN Sección 3*/

/*Sección 4*/
.seccion-4 {
  background-image: url('../images/bg-verde-secciones-3-4-rotado.png');
  background-repeat: no-repeat;
  background-position: top;
  overflow: hidden;
  background-size: 300% 70%;
}

.seccion-4 h2,
.seccion-4 h3 {
  color: #ffdc5d;
} 

.seccion-4 h2.color-invertido,
.seccion-4 h3.color-invertido {
  color: #016d38;
} 

.seccion-4 h3 {
  text-align: inherit;
} 

.card-grid {
  display: flex;
  flex-flow: row wrap;
  margin: 1rem 0;
}

.card-grid .card-wrapper {
  flex: 1 0 48%;
  display: flex;
  margin-bottom: 1rem;
}

.card-grid .card-wrapper:nth-last-child(-n+2) {
  margin-bottom: 0;
}

.card-grid .card-wrapper:nth-child(n) {
  justify-content: flex-end;
  padding-right: .5rem;
}

.card-grid .card-wrapper:nth-child(2n) {
  justify-content: flex-start;
  padding-left: .5rem;
}


.card-grid .card-wrapper .card-content {
  width: 100%;
  max-width: 125px;
  height: 96px;
  background: #FFF;
  text-align: center;
  border-radius: 10px;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  -webkit-box-shadow: -2px 10px 17px -5px rgba(0,0,0,0.43);
-moz-box-shadow: -2px 10px 17px -5px rgba(0,0,0,0.43);
box-shadow: -2px 10px 17px -5px rgba(0,0,0,0.43);
}

.card-grid .card-wrapper .card-content p {
  padding: .5rem;
}

.card-grid .card-wrapper .card-content img {
  width: 40px;
  margin: 10px auto 0;
  display: block;
}

.cambio-color {
  color: #fff !important;
}

.card-imgs .card-imgs-content {
  width: 100%;
  max-width: 272px;
  height: 95px;
  background-size: cover;
  border-radius: 10px;
  margin: 1rem auto;
  display: flex;
  align-items: flex-end;
}

.card-imgs .card-imgs-content p {
  color: #FFF;
  font-weight: 500;
  font-size: 1.2rem;
} 

.card-imgs .card-imgs-content.card-imgs-1 {
  background-image: url('../images/seccion-4-card-1.png');
}

.card-imgs .card-imgs-content.card-imgs-2 {
  background-image: url('../images/seccion-4-card-2.png');
}
/*Seccón 4*/

.seccion-5 {
  position: relative;
  text-align: center;
}

.seccion-5::after {
  content: '';
  width: 100%;
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #016d38;
  z-index: -1;
  mix-blend-mode: multiply;
}

.seccion-5 .help-center {
  display: flex;
  flex-flow: column wrap;
  background: #FFF;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
} 

.seccion-5 .help-center-container {
  position: relative;
  margin-top: 2rem;
}

.seccion-5 .help-center-container::after {
  position: absolute;
  content: '';
  width: 100px;
  height: 100px;
  background-image: url(../images/touch.svg);
  background-size: 95%;
  background-repeat: no-repeat;
  bottom: -50px;
  background-position: center;
  transform: translateX(-50%);
  left: 50%;
} 

.seccion-5 .help-center .help-center-heading {
  height: 72px;
  background: #eaeaea;
  display: flex;
  justify-content: center;
  align-items: center;
}

.seccion-5 .help-center .help-center-heading h2 {
  font-size: 1.25rem;
  font-weight: 700;
  font-style: inherit;
  color: #000;
} 

.seccion-5 .help-center .help-center-option {
  display: flex;
  flex-flow: column;
  padding: 2rem 0px;
}

.seccion-5 .help-center .help-center-option:last-child {
  padding-bottom: 4rem;
}

.seccion-5 .help-center .help-center-option img {
  width: 60px;
  align-self: center;
} 

.seccion-5 .help-center .help-center-option p {
  max-width: 170px;
  margin: 0 auto;
}

/*footer*/
.texto-footer {
  background-color: #ffffff;
  padding-bottom: 15px;
}

.bg-footer {
  background-color: #eaeaea;
  border: 0px solid #eaeaea;
}

@media (min-width: 425px) {
  .seccion-1-titulo-principal {
    background-size: 60%;
  }
}

@media (min-width: 550px) {
  .botones-descargas {
    justify-content: center;
  } 
}

@media (min-width: 600px) {
  .seccion-1-titulo-principal {
    background-size: 50%;
  }
}

@media (min-width: 768px) {
}

@media (min-width: 850px) {
}

@media (min-width: 992px) {
  html {
    scroll-snap-type: y mandatory;
  }

  .main-phone {
    position: fixed;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
  }

  .all-phones {
    margin: 0;
    position: relative;
    width: 300px;
    height: 565px;
  }

  .all-phones img {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 300ms ease-out;
  }

  .all-phones img.show {
    opacity: 1;
  }  

  .seccion-1-titulo-principal {
    height: 100vh;
    display: flex;
    align-items: center;
    margin: 0;
  }

  .seccion-1, .seccion-2, .seccion-3, .seccion-4, .seccion-5 {
    scroll-snap-align: start;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
  }
  .seccion-1 {
    padding-top: 0;
	display: block;
    z-index: 1;
    position: relative;
  }
  h1 {
    font-size: 3.75rem;
  }

  .seccion-1-titulo-principal {
    background-image: url('../images/bg-verde-desktop.png');
    background-size: contain;
    background-position: 400px;
  }

  .celular, .celular2, .celular3, .celular4 {
    width: 80%;
    margin: 70px auto 0;
    display: block;
    max-width: 300px;
  }

  .celular1 img, .celular2 img, .celular3 img, .celular4 img { 
    opacity: 0;
  }

  .celular2 {
    margin: -60px auto 60px;
  }

  .contenedor-contenidos-seccion-2 {
    margin-top: -20px;
  }

  .contenidos-seccion-2 {
    margin: 20px 0;
  }

  .celular-seccion-2::before {
    background-size: contain;
    width: 921px;
    height: 19px;
    position: absolute;
    z-index: -1;
    top: 32%;
    left: 50%;
    transform: translateX(-50%);
  }

  .seccion-2 {
    overflow: hidden;
    padding-bottom: 0px;
  }

  .seccion-4 h2.color-invertido, .seccion-4 h3.color-invertido {
    color: #ffdc5d;
  }

  .contenidos-seccion-4 p {
    color: #FFF;
  }

  .cards-imgs-wrapper {
    display: flex;
    align-items: flex-end;
  }

  .card-imgs .card-imgs-content {
    max-width: 350px;
    height: 122px;
    margin-left: 24px;
  }

  .contenidos-seccion-4 p {
    color: #FFF
  } 

  .card-grid .card-wrapper .card-content {
      max-width: 160px;
      height: 122px;
  }
  
  .seccion-5 .celular-seccion-5 {
    position: absolute;
  }

  .seccion-5-comunidad {
    max-width: 600px;
    flex-grow: 1;
    display: flex;
    align-items: center;
  }

  .seccion-5 .help-center {
    flex-direction: row;
    justify-content: space-around;
  }

  .help-center-heading {
    flex: 0 1 100%;
  }

  .cambio-color {
    color: inherit;
  }

  h3.cambio-color-2 {
    color: #016d38 !important;
  }

  .cambio-color-gris {
    color: #686868 !important;
  }

  .seccion-3 {
    background-position: center 420px;
  }
}

@media (min-width: 1100px) {
  .contenedor-contenidos-seccion-2 {
    margin-top: -30px;
  }

  .contenidos-seccion-2 {
    margin: 40px 0;
  }
}

@media (min-width: 1200px) {
  .seccion-1-titulo-principal {
    background-position: 580px;
  }
}

@media (min-width: 1336px) {
  .seccion-1-titulo-principal {
    background-position: bottom right;
  }
}