/* textos de la web */

:root{
  --titulo: 4rem;
  --subtitulo: 2.5rem;
}


/*********************
* Container
*********************/
.container{
  padding-bottom: 2rem;
}

@media (min-width: 1500px){
  .container{
    max-width: 1100px;
  }
}

@media (min-width: 1400px) and (max-width: 1499px){

.container{
  max-width: 940px;
  position: relative;
  /* right: 10vw; */
}

}

@media (min-width: 1300px) and (max-width: 1399px){
.container{
  max-width: 1000px;
  position: relative;
  right: 7vw;
  
}
}

@media (min-width: 1200px) and (max-width: 1299px){
.container{
  max-width: 950px;
}
}

@media (min-width: 400px) and (max-width: 1199px){
.container{
  max-width: 80%;
}
}

@media (min-width: 0px) and (max-width: 399px){
.container{
  max-width: 90%;
}
}



h1{
  font-size: var(--titulo);
}

.titulo-principal{  
  color: #091643;
  font-weight: 700;
}

h2{
  font-size: var(--subtitulo);
  color: #32659D;
}
h3{
  font-size: calc(var(--subtitulo) - 0.5rem);
}
h4{
  font-size: calc(var(--subtitulo) - 1rem);
}

.subtitulo-principal{
  text-transform: uppercase;
  font-weight: 500;
  font-size: var(--subtitulo);
}

.subtitulo{
  font-weight: 600;
  text-align: center;
}
.subtitulo-cargadores{
  font-weight: 600;
  text-align: center;
  width: 50%;
  margin: 0 auto;
}

.titulo-h3{
  color: #32659D;
  font-weight: 500;
}

.titulo-h4{
  color: #269BCD;
  font-weight: 500;
}

p{
  font-size: calc(var(--subtitulo) - 1.2rem);
}

.parrafo-titulo{
  font-size: calc(var(--subtitulo) - 1rem);
  color: #269BCD;
  font-weight: 600;
  margin-top: 2rem;
}

.card-titulo{
  font-weight: 700;
  text-align: center;
  color: #32659D;
  margin-bottom: 0;
}
.card-subtitulo{
  font-weight: 700;
  text-align: center;
  color: #32659D;
  margin-bottom: 0;
  line-height: 1;
}
.card-text{
  color: #269BCD;  
  text-align: center;
  font-weight: 700;
  line-height: 1;
}
p.card-text{
  margin-bottom: 0;
}
.span-card-text{
  font-weight: 500;
}

.card-title{
  font-weight: 700;
  text-align: center;
  color: #32659D;
  
}
.card-texto{
  color: #269BCD;
  text-align: center;
}

.detalles-tarjeta{
  color: #1B4476;
  font-size: 1rem;
  margin-bottom: 0;
}

.h4-detalles-tarjeta{
  color: #269BCD;
  font-size: 1.3rem;
}

article{
  margin: 1rem 0;
}

article p{
  color: #1B4476;
}

/*******************
* responsive textos
*******************/
@media (min-width: 0px) and (max-width: 600px){
  h1{
    font-size: calc(var(--titulo) - 2rem);
  }
  h2{
    font-size: calc(var(--subtitulo) - 1rem);
  }
  h3{
    font-size: calc(var(--subtitulo) - 0.6rem);
  }
  h4{
    font-size: calc(var(--subtitulo) - 0.9rem);
  }
  .parrafo-titulo{
    font-size: calc(var(--subtitulo) - 1.4rem);
  }
  p{
    font-size: calc(var(--subtitulo) - 1.5rem);
  }
  .subtitulo-cargadores{
    width: 90%;
  }

}

@media (max-width: 880px){
  .subtitulo-cargadores{
    width: 90%;
  }
}



/*********************
* botones
*********************/
.boton-presupuesto{
  background: linear-gradient(90deg, #32659D, #269BCD);
  box-shadow: 2px 2px 5px 1px #8FBFE6;
  border-radius: 10px;
  border: none;
  color: #FFFFFF;
  padding: 1rem 2rem;
  width: fit-content;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 600;
  cursor: pointer;
}

.boton-presupuesto:hover{
  /* background: linear-gradient(270deg, #32659D, #269BCD) */
  box-shadow: 2px 2px 15px 5px #FFF;
  color: #fff;
}

@media (min-width: 0px) and (max-width: 600px){
  .boton-presupuesto{
    font-size: 1rem;
  }
}

.btn.btn-primary{
  background-image: linear-gradient(90deg, #32659D, #269BCD);
  /* margin-top: 1rem; */
  border: none;
  font-size: 1.5rem;
  padding: 1rem 3rem;
}
.btn.btn-primary:hover{
  text-decoration: underline;
}

.boton-formulario{
  background: linear-gradient(270deg, #269BCD, #32659D);
  
  border-radius: 10px;
  border: none;
  
  color: #FFF;
  padding: 1vh 1vw;

  width: 40%;

  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 600;
  box-shadow: 2px 2px 5px 1px #D2D2D2;
}
.boton-formulario:hover{
  box-shadow: 2px 2px 15px 5px #D2D2D2;
}

.whatsapp-derecha{
  background: linear-gradient(90deg, #269BCD, #32659D);
  border-radius: 10px;
  border: none;
  
  color: #FFFFFF;
  padding: 1vh 1vw;

  width: fit-content;

  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 600;
  box-shadow: 2px 2px 5px 1px #D2D2D2;
}

.whatsapp-derecha:hover{
  background: linear-gradient(90deg, #32659D, #269BCD);

  color: #FFFFFF;
  text-decoration: none;
}