/* textos de la web */

:root{
  --titulo: 3.75rem;
  --subtitulo: 2.5rem;
}


/*********************
* Container
*********************/
.container{
  padding-bottom: 2rem;
}


.container-fluid{
  max-width: 80%;
}

@media (min-width: 1000px) and (max-width: 1300px){
  .container .row .col-lg-9{
    width: 100%;
  }
}

/*************** 
* titulos y textos
***************/

h1{
  font-size: calc(var(--titulo) - 1.75rem);
}
.titulo-h1{
  font-size: var(--titulo);
  font-weight: 700;
  text-align: left;
  margin-top: 6vmin;
  color: #091643;
}

.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: calc(var(--titulo) - 1rem);
  color: #32659D;
  font-weight: 700;
  text-align: left;
  margin-top: 5vmin;
}
.subtitulo-cargadores{
  font-weight: 600;
  text-align: center;
  width: 50%;
  margin: 0 auto;
}

.titulo-h3{
  color: #269BCD;
  font-weight: 600;
  text-align: left;
  margin-top: 4vmin;
}

.titulo-h4{
  color: #269BCD;
  font-weight: 500;
}

p{
  font-size: calc(var(--subtitulo) - 1.2rem);
  color: #32659D;
  font-weight: 400;
}

.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;
}

h3.subtitulo-recuadro{
  font-size: 1.6rem;
}

.subtitulo-recuadro{
  font-size: calc(var(--subtitulo) - 0.5rem);
}

.enlace-ley{
  color: inherit;
}
.enlace-ley:hover,
.enlace-ley:focus,
.enlace-ley:link,
.enlace-ley:visited{
  color: inherit;
}

/*******************
* 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%;
  }
  .titulo-h1{
    font-size: calc(var(--titulo) - 1.8rem);
  }
  .subtitulo-recuadro{
    margin-top: 4vmin;
    font-size: calc(var(--subtitulo) - 1.2rem);
  }
  p.titulo-h3{
    font-size: calc(var(--subtitulo) - 1.9rem);
  }

}




@media (max-width: 880px){
  .subtitulo-cargadores{
    width: 90%;
  }
}

/* @media (max-width: 1500px){
  .subtitulo-recuadro{
    font-size: 1.8rem;
  }
  .parrafo-recuadro{
    font-size: 1.2rem;
  }
} */




/*********************
* 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 2rem;
  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(--subtitulo);
  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;
}



/**********************
* listas y tablas
**********************/
ol, ul{
  font-size: 1.2rem;
  color: #269BCD;
}
ol,ul > li{
  margin-bottom: 1rem;
}

.lista-sol{
  list-style-type: none;
}
.lista-sol > li::before{
  display: inline-block;
  content: '';
  width: 2rem;
  height: 2rem;
  background-image: url("../img/iconos/ICON_sol.svg");
  background-size: cover;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-right: 5px;
}

.lista-enlaces{
  list-style-type: none;
}

.lista-griega{
  list-style-type: square;
}

.lista-imagen{
  list-style-type: none;
}
.lista-imagen>li:before{
  content:'\01F449';
}

.lista-rayo{
  list-style-type: none;
}
.lista-rayo > li::before{
  display: inline-block;
  content: '';
  width: 2rem;
  height: 2rem;
  background-image: url("../img/iconos/ICON_rayo-fill.svg");
  background-size: cover;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-right: 5px;
}


.lista-flecha{
  list-style-type: none;
}
.lista-flecha>li:before{
  content: "\027A1\0FE0F";
}

.lista-papel{
  list-style-type: none;
}
.lista-papel > li::before{
  display: inline-block;
  content: '';
  width: 2rem;
  height: 2rem;
  background-image: url("../img/iconos/ICON_documentos.svg");
  background-size: cover;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-right: 5px;
}

.lista-check{
  list-style-type: none;
}
.lista-check > li::before{
  display: inline-block;
  content: '';
  width: 2rem;
  height: 2rem;
  background-image: url("../img/iconos/check-circle-fill.svg");
  background-size: cover;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-right: 5px;
}

.lista-triangulo{
  list-style-type: none;
}
.lista-triangulo > li::before{
  display: inline-block;
  content: '';
  width: 2rem;
  height: 2rem;
  background-image: url("../img/iconos/ICON_coordenadas.svg");
  background-size: cover;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-right: 5px;
}

.lista-numeros{
  list-style-type: none;
}

.tabla{
  font-size: 1.1rem;
  color: #32659D;
  vertical-align: middle;
}

.table-striped>tbody>tr:nth-of-type(odd)>* {
  --bs-table-accent-bg: #32669d05;
  color: #32659D;
}

.icono-lista{
  width: 5%;
}

@media (max-width: 900px){
  ol, ul{
    padding-left: 0;
  }
}

@media (max-width: 600px){
  .tabla{
    font-size: 0.6rem;
  }
  .icono-lista{
    width: 10%;
  }
}



/*************************
* div-boton
*************************/
.div-boton .boton:last-child{
  margin-left: 5vmin;
}

@media (max-width: 600px){
  .div-boton{
    margin-bottom: 2rem;
    padding: 0 1rem;
  }
  .div-boton .boton:last-child{
    margin-left: 1vmin;
  }
}

