/* textos de la web */

:root{
  --titulo: 3.75rem;
  --subtitulo: 2.5rem;
}


/*********************
* textos
*********************/

h1{
  font-size: calc(var(--titulo) - 1.75rem);
}

.titulo-principal{  
  color: #091643;
  font-weight: 700;
  text-align: center;
  margin-top: 5vmin;
}

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;
}

.subtitulo{
  font-size: var(--titulo);
  color: #091643;
  font-weight: 700;
  text-align: center;
  margin-top: 5vmin;
}
.subtitulo-cargadores{
  font-weight: 600;
  text-align: center;
  width: 50%;
  margin: 0 auto;
}

.titulo-h3{
  color: #32659D;
  font-weight: 500;
  text-align: center;
  padding: 5vmin 0;
}

.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;
}



.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.9rem);
  }
  h4{
    font-size: calc(var(--subtitulo) - 1.2rem);
  }
  .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: #26CCE6;
  
  border: none;
  color: #FFFFFF;
  padding: 1rem 2rem;
  width: fit-content;
  text-decoration: none;
  font-size: 2.25rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 5px 5px 0 0 #1B4476;
}

.boton-presupuesto:hover{
  /* background: linear-gradient(270deg, #32659D, #269BCD) */
  
  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;
}
.btn.btn-primary:hover{
  text-decoration: underline;
}

.boton-formulario{
  background: linear-gradient(270deg, #269BCD, #32659D);
  
  
  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: 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;
}

.boton-mas-info{
  background-color: #1B4476;
  padding: 0.5rem 2rem;
  color: #fff;
  font-weight: 700;
  transition: .3s ease;
  -webkit-transition: .3s ease;
  -moz-transition: .3s ease;
  -ms-transition: .3s ease;
  -o-transition: .3s ease;
}
.boton-mas-info:hover{
  color: #1B4476;
  background-color: #fff;
}


.boton-seleccion{
  background-color: #269BCD;
  color: #fff;
  font-weight: 700;
  
  padding: 0.5rem 4rem; 
  opacity: 0.5;
  cursor: pointer;
}
.btn-check:checked+.boton-seleccion{
  opacity: 1;
}

.boton-lo-quiero{
  background-color: #1B4476;
  color: #fff;
  padding: 0.5rem 3rem;
  cursor: pointer;
  text-decoration: none;
  font-weight: 600;
  margin-top: 1rem;
  transition: .3s ease;
  -webkit-transition: .3s ease;
  -moz-transition: .3s ease;
  -ms-transition: .3s ease;
  -o-transition: .3s ease;
}
.boton-lo-quiero:hover{
  color: #fff;
  background-color: #26CCE6;
}

@media (min-width: 300px) and (max-width: 500px){

  .boton-lo-quiero{
    padding: 0.5rem 1rem;
  }
}

@media (max-width: 900px){

  #banner .container-fluid{
    max-width: 90%;
  }

  .boton-presupuesto{
    font-size: 1rem;
    padding: 0.5rem 1rem;
  }
  .banner{
    gap: 20px;
  }
}

@media (min-width: 768px) and (max-width: 1400px){
  .boton-presupuesto{
    font-size: 1.5rem;
  }
}

/****************
* banner
****************/

.parrafo-banner{
  margin-bottom: -1rem;
  font-size: calc(var(--subtitulo) + 0.8rem);
  color: #fff;
  font-weight: 800;
}
.subparrafo-banner{
  font-weight: 500;
  font-size: calc(var(--subtitulo) - 0.4rem);
  color: #fff;
  margin-bottom: 0;
}


/*****************
* servicios
*****************/
.parrafo-subtitulo{
  font-size: clac(var(--subtitulo) - 0.9rem);
  color: #b9b9b9;

}

.titulo-servicios{
  font-size: var(--titulo);
  font-weight: 700;
  color: #32659D;
}

.subtitulo-servicios{
  font-size: calc(var(--subtitulo) - 0.7rem);
  color: #1B4476;
  font-weight: 800;
}

.azul-mayusculas{
  font-size: calc(var(--subtitulo) - 1.48rem);
  color: #269BCD;
  font-weight: 600;
  text-transform: uppercase;
  font-style: italic;
}

.descripcion-servicios{
  font-size: calc(var(--subtitulo) - 1.3rem);
  color: #B9B9B9;
  font-weight: 500;
}

.descripcion-servicios-italica{
  font-size: calc(var(--subtitulo) - 1.3rem);
  color: #B9B9B9;
  font-weight: 600;
  font-style: italic;
}

/*****************
* resenias
*****************/
.derecha-resenias .subtitulo{
  font-size: calc(var(--titulo));
  font-weight: 700;
  color: #32659D;
}

.boton-resenias{
  color: #1B4476;
  text-decoration: none;
  background-color: #fff;
  padding: 1rem 3rem;
  font-size: calc(var(--subtitulo) - 1rem);
  font-weight: 600;
  transition: .3s ease;
  -webkit-transition: .3s ease;
  -moz-transition: .3s ease;
  -ms-transition: .3s ease;
  -o-transition: .3s ease;
}
.boton-resenias:hover{
  color: #fff;
  background-color: #1B4476;
}