/*  HEX: #091643 SILICIO
    HEX: #1B4476 INTERMEDIO OSCURO
    HEX: #32659D KAYLON
    HEX: #269BCD INTERMEDIO CLARO
	  HEX: #9CDEEB AZUL TRANQUILO
	  HEX: #E4EEF8 AZUL TRANQUILO CLARO
    HEX: #00FFFF CIAN
    HEX: #FFD205 AMARILLO 
    HEX: #F58C2D NARANJA
    HEX: #FF5C39 ROJO
    HEX: #		   FUTURO VERDE
    HEX: #FFFFFF BLANCO
    HEX: #D2D2D2 GRIS KAYLON
    HEX: #D6D6D6 GRIS KAYLON 50%
    HEX: #F8F8F8 GRIS KAYLON AL 25% 

    icono bombilla: 💡
    icono dedo derecha: 👉
    icono dedo izquierda: 👈

    font-family: 'Blinker', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
*/

@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css');

@import url('https://fonts.googleapis.com/css2?family=Blinker:wght@100;200;300;400;600;700;800;900&display=swap');

/* *********************************************************** */
/*                 GENERAL                                     */
/* *********************************************************** */

body{
    font-family:  Blinker, Tahoma, sans-serif;

    background-color: #FFFFFF;

    max-width: 100%;

    height: 100%;

}

html, body{
    overflow-x: clip;
    margin: 0;
    padding: 0;
}

html, body, *{
  box-sizing: border-box;
}

section{
  min-height: fit-content;
  background-image: linear-gradient(180deg, #fff, #E4EEF8);
  
}

.container{
  padding-top: 4rem;
  padding-bottom: 2rem;
}

.clear{
  width: 100%;
  margin: 3rem 0;
}


/**********************************
* AVISO DE COOKIES
*********************************/
.enlace{
  color: #1B4476;

}

.asm-button{
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}

.aviso p{
  font-size: 15px !important;
}

@media (max-width: 1500px){
  .aviso{
    width: 100%;
    right: 0;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
}
  .avisos{
    font-size: 12px;
    
}

}

@media (min-width: 100px) and (max-width: 900px){
  .aviso{
    width: 100%;
    right: 0;
    flex-direction: column;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
}
  .avisos{
    width: 100%;
    text-align: center;
    font-size: 10px;
  }
  .botones{
    width: 100%;
    justify-content: space-around;
  }

  button#rechaza,
  button#acepta,
  button#acepta1,
  button#acepta2{
    font-size: 12px !important;
    width: 100%;
  }
  .aviso p{
    margin-bottom: 0;
  }
  .avisos p{
    font-size: 0.8rem;
  }
  #aviso2{
    font-size: 0.8rem;
  }
}





/****************************************************/
/*        BARRA DE NAVEGACIÓN                       */
/****************************************************/

header a{
  text-decoration: none;
}


.menu-navbar{
  position: relative;
  z-index: 3000;
}

.menu-bar{
  width: 100%;
  color: #fff;
  background-color: #1B4476;
  -webkit-box-shadow: 0 2px 4px 0 rgba(23,27,28,.24);
  box-shadow: 0 2px 4px 0 rgba(23,27,28,.24);
}

.menu-bar_contenedor{
  display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    height: 3rem;
    padding: 0 0.9375rem;
}
  

@media (min-width: 1200px){
  .menu-bar_contenedor{
    max-width: 1140px;
  }
}
@media (min-width: 992px){
  .menu-bar_contenedor{
    height: 4rem;
    margin-right: auto;
    margin-left: auto;
    max-width: 992px;
  }
}

.boton-menu{
  display: none;
  height: 2rem;
    padding: 0.5rem;    
    font-size: .875rem;
    color: #32659D;
    background-color: #fff;
    border: 0;
    border-radius: 0.5rem;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;    
    align-items: center;
    
}


.boton-menu:hover{
  cursor: pointer;
}
.boton-cerrar{
  display: none;
}
@media (max-width: 820px){
  .boton-menu{
    display: flex;
  }
}

.logo-nav{
  max-width: 20rem;
  width: 20rem;
}

.nav-menu{
  position: absolute;
    top: 3rem;
    left: 0;
    z-index: -1;
    display: none;
    width: 100%;
    padding: 1.5rem;
    margin: 0;
    background-color: #fff;
    border-radius: 0 0 1rem 1rem;
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: 0;
    -webkit-transition: opacity .3s ease,-webkit-transform .3s ease,-webkit-box-shadow .3s ease;
    transition: opacity .3s ease,-webkit-transform .3s ease,-webkit-box-shadow .3s ease;
    transition: opacity .3s ease,transform .3s ease,box-shadow .3s ease;
    transition: opacity .3s ease,transform .3s ease,box-shadow .3s ease,-webkit-transform .3s ease,-webkit-box-shadow .3s ease;
    -webkit-transform: translate3d(0,-1rem,0);
    transform: translate3d(0,-1rem,0);
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px){
  .nav-menu{
    position:absolute;
    top: 7rem;
    left: 50%;
    width: 40rem;
    padding: 3rem;
    margin-left: -20rem;
    border-radius: 1rem;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
}
}

@media (min-width: 992px){
  .nav-menu {
    position:unset;
    top: unset;
    right: unset;
    left: unset;
    margin-left: auto;
    margin-right: auto;
    z-index: 0;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-flow: row nowrap;
    width: auto;
    padding: 0;
    background-color: transparent;
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}

.nav-menu.esta-abierto{
  display: block;
}

.nav-menu.esta-animado{
  -webkit-box-shadow: 0 8px 16px 0 rgba(23,27,28,.24);
  box-shadow: 0 8px 16px 0 rgba(23,27,28,.24);
  opacity: 1;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.categoria{
  margin-left: 10px;
}

.categoria:hover:after{
  position: absolute;
    bottom: -0.75rem;
    left: 0;
    display: block;
    width: 100%;
    height: 2rem;
    content: "";
}




.menu-label{
  position: relative;
    z-index: 2;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    height: 2.5rem;    
    font-size: 1.125rem;
    color: #1B4476;
    cursor: default;
    border-radius: 1.25rem;
}


.menu-label.esta-abierto{
  background-color: #E4EEF8;
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  padding: 0 1rem;
  transition: .5s ease-in-out;
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -ms-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
}

.menu-label.esta-abierto .bi.bi-chevron-up{
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
}


.bi.bi-chevron-up {
  padding: .625rem;    
  -webkit-transition: fill .3s ease,-webkit-transform .3s ease;
  transition: fill .3s ease,-webkit-transform .3s ease;
  transition: transform .3s ease,fill .3s ease;
  transition: transform .3s ease,fill .3s ease,-webkit-transform .3s ease;

  
}

@media(min-width: 992px) {
  .bi.bi-chevron-up {
      transform: rotate(0deg);
      padding: 0;
      margin: 0 0 0 .25rem;
      background-color: transparent;      
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
  }
}

@media(max-width: 880px){
  .bi.bi-chevron-up{
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
  }
}

@media (min-width: 992px){
  .menu-label{
    -webkit-box-pack: start;
    justify-content: flex-start;
    padding: 0 0.75rem;
    font-size: 1rem;
    color: #fff;
    border-radius:0.5rem;
    -webkit-border-radius:0.5rem;
    -moz-border-radius:0.5rem;
    -ms-border-radius:0.5rem;
    -o-border-radius:0.5rem;
    -webkit-transition: color .3s ease,background-color .3s ease;
    transition: color .3s ease,background-color .3s ease;
  }
  .categoria:hover>.menu-label{
    background-color: #fff;
    color: #1B4476;
  }

  .categoria:hover>.menu-label>.bi.bi-chevron-up{
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}
}

.menu-sub-categoria{
    position: relative;
    display: none;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-flow: column nowrap;
    padding: 1.5rem 0;
    margin-top: 1rem;
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: 0;
    border-radius: 1rem;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
    box-shadow: 0 8px 16px 0 rgba(23,27,28,.24);
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}
.menu-sub-categoria.esta-animado{
  opacity: 1;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  height: auto;
  padding: 1rem 1rem;
  box-shadow: none;
  border-radius:0;
  background-color: #E4EEF8;
  -webkit-border-radius:0;
  -moz-border-radius:0;
  -ms-border-radius:0;
  -o-border-radius:0;
}
.menu-sub-categoria.esta-abierto{
  display: flex;
}

@media (min-width: 1200px){
  .menu-sub-categoria{
    width: 69.375rem;
    margin-left: -570px;
  }
}

@media (min-width: 992px){
  .menu-sub-categoria{
    position: absolute;
    top: 4.5rem;
    left: 50%;
    width: 60rem;
    padding: 1.5rem;
    margin: 0 0 0 -496px;
    background-color: #F8F8F8;
        
  }
  .categoria:hover>.menu-sub-categoria{
    display: -webkit-box;
    display: flex;
    height: auto;
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

@media (min-width: 768px){
  .menu-sub-categoria {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      flex-flow: row wrap;
  }

}

.menu-list{
  padding: 0;
    margin: 0;
    list-style: none;
    line-height: 1.5;
}

@media (min-width: 992px){
  .menu-sub-categoria>.menu-list{
    flex-basis: 30%;
  }
}

@media (min-width: 768px){
  .menu-sub-categoria>.menu-list{
    flex-basis: 29%;
  }
}
@media (min-width: 1024px){
  .menu-sub-categoria > .menu-list:nth-child(2){
    margin: 0 0 0 2rem;
  }
  .menu-sub-categoria > .menu-list:nth-child(3){
    margin: 0 0 0 2rem;
  }
}

.menu-sub-categoria > .menu-list:nth-child(2){
  margin-top: 2rem;
}

@media (min-width: 768px){
  .menu-sub-categoria > .menu-list:nth-child(2){
    margin: 0 0 0 1.875rem;
  }
  .menu-sub-categoria > .menu-list:nth-child(3){
    margin: 0 0 0 1.875rem;
  }
}

.menu-list_label{
  margin: 0 0 1rem;    
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    color: #091643;
}
.menu-list_item+.menu-list_item{
  margin-top: 1rem;
}
.menu-list_item{
  position: relative;
  z-index: 2;
  min-height: 1.5rem;
  font-size: .875rem;
  cursor: pointer;
  opacity: 0;
  -webkit-transition: opacity .3s ease-out .3s;
  transition: opacity .3s ease-out .3s;
}
@media (min-width: 992px){
  .menu-list_item{
    height: 1.5rem;
    opacity: 1;
  }
}

.menu-sub-categoria.esta-animado .menu-list_item{
  opacity: 1;
}

.menu-list_link{
  display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: #32659D;
}
.menu-list_link:hover{
  text-decoration: underline;
  color: #32659D;
}
@media (min-width: 0px){
  .menu-list_link{
    color: #32659D;
  }
}

.menu-ayuda{
  height: -webkit-min-content;
  height: -moz-min-content;
  height: min-content;
  padding: 1rem;
  background-color: #E4EEF8;
  border-radius: 1rem;
  -webkit-border-radius: 1rem;
  -moz-border-radius: 1rem;
  -ms-border-radius: 1rem;
  -o-border-radius: 1rem;
}

.menu-sub-categoria > .menu-ayuda{
  width: 100%;
  margin: 1.875rem 0 0;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
}
@media (min-width: 992px){
  .menu-sub-categoria .menu-ayuda{
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
  }
}
@media (min-width: 880px){
  .menu-ayuda {
    padding: 1.5rem;
  }
}

@media (min-width: 0px) and (max-width: 800px){
  .menu-ayuda{
    display: none;
  }
}


.menu-ayuda .icon{
  vertical-align: middle;
  fill: #32659D;
}

.icono-ayuda{
  width: 2rem;
  
}

.icon{
  display: inline-block;
    margin-top: unset;
    line-height: auto;
    vertical-align: middle;
    background-image: none;
    background-repeat: unset;
    background-position: unset;
    flex-shrink: 0;
}

object{
  pointer-events: none;
}

.menu-ayuda_titulo{
  font-size: 1.125rem;
  color: #32659D;
  margin: 0 0 0 1.5rem;
}
.menu-sub-catetgoria .menu-ayuda_titulo{
  display: inline;
  min-width: 12.875rem;
  
}

.menu-ayuda_telefono{
  display: -webkit-inline-box;
  display: inline-flex;
  -webkit-box-align: center;
  text-align: center;
  align-items: center;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 100%;
  color: #32659D;
}
.menu-ayuda_telefono:hover{
  color: #32659D;
  text-decoration: underline;
}

.menu-sub-categoria .menu-ayuda_telefono{
  display: inline;
  min-width: 10.75rem;
  margin: 0 auto 0 auto;
  font-size: 1.5rem;
}

.menu-ayuda_info{
  margin: 0;
  font-size: 0.75rem;
  color: #32659D;
}

.menu-sub-categoria .menu-ayuda_info{
  display: inline;
  min-width: 24.3125rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

@media (min-width: 1200px){
  .menu-sub-categoria .menu-ayuda_info{
    min-width: 24.6875rem;
  }
}


@media(min-width: 1024px) {
  .menu-sub-categoria-1-columnas {
      width:330.66667px
  }
}

.menu-sub-categoria.menu-sub-categoria-1-columnas{
  left: 83%;
}

@media (max-width: 1440px){
  .menu-sub-categoria.menu-sub-categoria-1-columnas{
    left: 100%;
  }
}

@media (max-width: 880px){
  .menu-sub-categoria.menu-sub-categoria-1-columnas{
    left: 0;
  }
  .menu-sub-categoria.menu-sub-categoria-1-columnas .menu-ayuda{
    display: flex;
    align-items: center;
  }
  
}

.menu-sub-categoria-1-columnas > .menu-list{
  flex-basis: 100%;
}

.menu-sub-categoria-1-columnas .menu-ayuda {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  padding: 1rem;
  /* margin: 0; */
}

@media(min-width: 1024px) {
  .menu-sub-categoria-1-colunmas .menu-ayuda {
      display:block
  }
}

.menu-sub-categoria-1-columnas .menu-ayuda .icon {
  margin-right: .75rem
}

.menu-sub-categoria-1-columnas .menu-ayuda .icon:first-child {
  display: none
}

.menu-sub-categoria-1-columnas .menu-ayuda_titulo {
  margin: 0 0 1rem
}

.menu-sub-categoria-1-columnas .menu-ayuda_telefono {
  margin: 0 0 1rem;
  font-size: 1.5rem
}

.menu-sub-categoria-1-columnas .menu-ayuda_info{
  margin: 0;
}

@media(min-width: 768px) {
  .menu-sub-categoria-2-columnas>.menu-list {
      flex-basis:45%
  }
}

@media(min-width: 1024px) {
  .menu-sub-categoria-2-columnas {
      left:unset;
      width: 46.875rem;
      margin-left: -124px
  }
}

@media (min-width: 1300px){
  .menu-sub-categoria-2-columnas{
    margin-left: -200px;
  }
}

.menu-sub-categoria-2-columnas>.menu-list:not(:first-child) {
  margin-top: 2rem
}

@media(min-width: 768px) {
  .menu-sub-categoria-2-columnas>.menu-list:not(:first-child) {
      margin:0 0 0 2rem
  }
}

.menu-sub-categoria-2-columnas .menu-ayuda {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row
}

@media(min-width: 1024px) {
  .menu-sub-categoria-2-columnas .menu-ayuda {
      display:-webkit-box;
      display: flex;
      -webkit-box-align: center;
      align-items: center;
      -webkit-box-pack: justify;
      justify-content: space-between
  }
}

.menu-sub-categoria-2-columnas .menu-ayuda_titulo {
  display: inline;
  min-width: 12.875rem;
  margin: 0 0 0 1.5rem
}

.menu-sub-categoria-2-columnas .menu-ayuda .icon:nth-child(2),
.menu-sub-categoria-2-columnas .menu-ayuda__title+.icon {
  display: none
}

.menu-sub-categoria-2-columnas .menu-ayuda_telefono {
  display: inline;
  min-width: 10.75rem;
  margin: 0 0 0 1rem;
  font-size: 1.5rem
}

.menu-sub-categoria-2-columnas .menu-ayuda_info {
  display: inline;
  min-width: 12.25rem;
  margin: 0 0 0 1.5rem
}


.fa.fa-xmark{
  color: red;
}

.cuatro-sub-categoria .menu-ayuda{
  margin-top: 0;
}


/******************
* navbar responsive
******************/

@media (min-width: 0px) and (max-width: 800px){
  .logo-nav{
    width: 13rem;
  }
}


/*********************
* Menu Overlay
*********************/
.menu-overlay.esta-animado{
  opacity: 1;
  display: block;
}

.menu-overlay{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 17, 0.64);
  display: none;
  transition: opacity .3s ease-out;
  -webkit-transition: opacity .3s ease-out;
  -moz-transition: opacity .3s ease-out;
  -ms-transition: opacity .3s ease-out;
  -o-transition: opacity .3s ease-out;
}


/******************
* home
******************/

#home{
  height: 100vh;
  background-image: url('../img/FONDO_GRID_CLARO.webp');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.izquierda-home{
  position: relative;

  z-index: 1;
}

.derecha-home{
  position: relative;
  
}

.logo-home{
  width: 100%;
}

.logo-home.desktop{
  display: block;
}

.logo-home.movil{
  display: none;
}

    /*********************
    * responsive home
    *********************/

    @media (min-width: 0px) and (max-width: 600px){

      .izquierda-home{
        top: 5vh;
      }
      .derecha-home{
        top: 10vh;
      }
    }

    @media (min-width: 768px){
      .izquierda-home{
        top: 5vh;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
      }

    }

    @media (min-width: 1300px){
      .izquierda-home{
        top: 5vh;
        max-width: 60%;
        margin-left: 0;
        margin-right: 0;
      }
      .derecha-home{
        bottom: 35vh;
        left: 31%;
        width: 65%;
      }

    }

    @media (min-width: 1400px){
      .izquierda-home{        
        top: 5vh;
        left: 15%;
        max-width: 65%;        
      }
      
      .derecha-home{
        position: relative;
        bottom: 25vh;
        left: 10%;
        width: 85%;
        
      }

    }

    @media (min-width: 1800px){
      .izquierda-home{        
        top: 10vh;
        left: 15%;
        max-width: 50%;
        
      }
      
      .derecha-home{
        bottom: 25vh;
        left: 10%;
        width: 85%;
        
      }
    }

    @media (min-width: 0px) and (max-width: 992px){
      .logo-home.movil{
        display: block;
      }
      .logo-home.desktop{
        display: none;
      }
    }

/********************
* cargadores
********************/
#cargadores .container-fluid{
  margin-top: 4rem;
}
.span-card-text.desktop{
  margin-bottom: 2vmin;
}
.span-card-text.movil{
  display: none;
}
@media (max-width: 600px){
  .span-card-text.desktop{
    display: none;
  }
  .span-card-text.movil{
    display: block;
  }
}
.contenedor-cards{
  margin-top: 4rem;
  display: flex;
  gap: 1.5rem;
  justify-content: center;
}
.row.texto-precio{
  margin-top: 2rem;
  padding: 0 2rem;
}

.card-body{
  text-align: left;
  padding: 0;
  padding-bottom: 1rem;
}
.imagen-card{
  width: 100%;  
}
.titulo-card{
  background-image: linear-gradient(10deg, #E4EEF8, #fff);
  padding: 0.5rem 0.5rem 0.5rem 1.3rem;
  margin-bottom: 0.5rem;
}


.card{
  border: none;
  box-shadow: 2px 2px 30px 5px #D3E0EB;
  border-radius: 1rem;
  -webkit-border-radius: 1rem;
  -moz-border-radius: 1rem;
  -ms-border-radius: 1rem;
  -o-border-radius: 1rem;

  padding-bottom: 2rem;
}

.imagen-marca{
  width: 70%;
}

.imagenes-marcas{
  margin-top: 2vmin;
}

.mas-detalles{
  text-decoration: none;
  color: #269BCD;
  
}
.mas-detalles:hover{
  color: #269BCD;
}

.mas-detalles.esta-abierto{
  display: none;
}
.menos-detalles{
  text-decoration: none;
  color: #269BCD;
  display: none;
}
.menos-detalles:hover{
  color: #269BCD;
}
.menos-detalles.esta-abierto{
  display: block;
}

.mas-detalles.esta-abierto  .bi.bi-chevron-down{
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
}

#cargadores .card-titulo{
  text-align: left;
}
#cargadores .card-subtitulo{
  text-align: left;
}

#cargadores .card-text{
  text-align: right;
  font-size: 3rem;
}
#cargadores .span-card-text{
  font-size: 1rem;
  color: #269BCD;
  float: right;
}

.linea{
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  border-bottom: #D2D2D2 1px solid;
}


.detalles{
  border-bottom: #D2D2D2 1px solid;
  display: none;
  padding: 2rem;
}
.detalles.esta-abierto{
  display: block;
}

.centrado{
  margin-top: auto;
  margin-bottom: auto;
}



    /*********************
    * responsive cards
    *********************/
    @media (min-width: 0px) and (max-width: 600px){
      .contenedor-cards{
        flex-direction: column;
      }
      
    }


/***************************************/
/*            formulario               */
/***************************************/
/* #formulario{
  background: #1B4476;
} */

.formula{
  margin-top: 5vh;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.formulario{
  background-color: #fff;
  border-radius: 10px;
  width: 30vw;
  margin-left: 3rem;
  padding: 2rem 4rem;
  /*box-shadow: 10px 0px 30px 5px #D3E0EB;
  *//*box-shadow: 2px 2px 30px 5px #9CDEEB;
  */transition: .2s ease-in-out;
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -ms-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
}

.formulario:hover{
  box-shadow: 2px 2px 30px 5px #D3E0EB;
}

.formulario-global{
  display: flex;
  flex-direction: row;
  margin-top: 3rem;
  justify-content: space-evenly;
  align-items: center;
}

.formulario-izquierda{
  /* margin-top: 1%; */
  display: flex;
  flex-direction: column;
  width: 40%;
  align-items: center;
}

.logo-formulario{
  width: 80%;
  
}

.footer-formulario-izquierda{
  width: 100%;
  margin-top: 3rem;
  display: none;
  justify-content: space-evenly;  
  
  background-color: #fff;
  border-radius: 1rem;
  -webkit-border-radius: 1rem;
  -moz-border-radius: 1rem;
  -ms-border-radius: 1rem;
  -o-border-radius: 1rem;
  transition: 0.2s ease-in-out;
  -webkit-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -ms-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
}

.footer-formulario-izquierda:hover{
  box-shadow: 10px 0px 30px 5px #D3E0EB;
}

.input_nombre{
  background-color: transparent;

  border: transparent;
  border-bottom: #32659D 0.5px dotted;

  color: #269BCD;

  outline: none;

  width: 100%;

  /* margin-top: 5vh; */
}

.input_telefono{
  background-color: transparent;

  border: transparent;
  border-bottom: #32659D 0.5px dotted;

  color: #269BCD;

  outline: none;

  width: 100%;

  /* margin-top: 5vh; */
}

.etiqueta-formulario{
  color: #1B4476;
  font-weight: 600;
  font-size: 1.5rem;
}

.nombre-formulario{
  display: flex;
  flex-direction: column;

  padding-bottom: 2vh;
}

.email-formulario{
  display: flex;
  flex-direction: column;

  padding-bottom: 2vh;
}

.telefono-formulario{
  display: flex;
  flex-direction: column;

  padding-bottom: 3vh;
}

.boton-formular{
  position: relative;

}

.enlace-formulario{
  color: inherit;
}

.footer-telefono{
  text-align: center;
  /* background-color: #fff; */
  padding: 1rem 0;
  border-radius: 0.5rem;
  -webkit-border-radius: 0.5rem;
  -moz-border-radius: 0.5rem;
  -ms-border-radius: 0.5rem;
  -o-border-radius: 0.5rem;
  /* box-shadow: 10px 0px 30px 5px #D3E0EB; */
  
}

.footer-email{
  text-align: center;
  /* background-color: #fff; */
  padding: 1rem 0;
  border-radius: 0.5rem;
  -webkit-border-radius: 0.5rem;
  -moz-border-radius: 0.5rem;
  -ms-border-radius: 0.5rem;
  -o-border-radius: 0.5rem;
  /* box-shadow: 10px 0px 30px 5px #D3E0EB; */
  
}

.titulo-contacto{
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 0;
  color: #1B4476;

}
.link-contacto{
  font-size: 1.5rem;
  font-weight: 600;
  color: #269BCD;
  text-decoration: none;
}
.link-contacto:hover{
  text-decoration: underline;
  color: #269BCD;
}

/*****************
* responsive formulario
*****************/
@media (max-width: 850px){
  .formulario-izquierda{
    display: none;
  }
  .formulario{
    margin-left: 0;
    width: 80vw;
  }
}
@media (min-width: 0px) and (max-width: 600px){
  .footer-formulario-izquierda{
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .formulario{
    padding: 2rem 2rem;
  }
  .etiqueta-formulario{
    font-size: 1.2rem;
  }
  .boton-formula > .boton-formulario{
    width: 40%;
  }
}

    /*******************
    * beneficios cargador
    *******************/
    .card.beneficios{
      max-width: 80%;
      height: 80%;
      margin-top: 2rem;
      margin-left: auto;
      margin-right: auto;
      
    }
    .beneficios > .card-body{
      padding: 2rem 1rem;
    }

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


/*********************
* carrusel imágenes
*********************/
.shadow-effect {
  /* background: #fff; */
  border-radius: 10px;
  margin: 0px !important ;    
  text-align: center;
  border: 1px solid #ECECEC;
  
  height: auto !important;
}




#instalaciones .owl-carousel .owl-item img{
  /* width: 220px  !important; */
  margin-left: auto !important;
  margin-right: auto  !important;
  size: 20%;
}



#instalaciones .imagen_instalacion {
  height: auto;
  width: 100% !important;
  border-radius: 4px;
  margin: 0px !important;
}

.shadow-effect {
  /*background: #fff;
  */max-width: 352px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border-radius: 1rem 1rem 0 0;
  text-align: center;
  border: 1px solid #ECECEC;
  height: auto;
  -webkit-border-radius: 1rem 1rem 0 0;
  -moz-border-radius: 1rem 1rem 0 0;
  -ms-border-radius: 1rem 1rem 0 0;
  -o-border-radius: 1rem 1rem 0 0;
}
.owl-item{
  margin-bottom: 20px;
}

#instalaciones .shadow-effect {
  font-family: inherit;
  font-size: 17px;
  line-height: 1.5;
  margin: 0 0 17px 0;
  font-weight: 300;
}

.testimonial-name2 {
  color: #38679A;
  text-align: center;
  margin-left: 40px;
  margin-right: 40px;
  border-top: #2a93bc28 1px solid;
}

#instalaciones .item {
  text-align: center;  
  margin-top: 50px;
  margin-bottom: 10px;
  opacity: .2;
  transform: scale3d(0.8, 0.8, 1);
  transition: all 0.3s ease-in-out;
  margin-left: auto;
  margin-right: auto;
}

#instalaciones .owl-item.active.center .item {
  opacity: 1;
  transform: scale3d(1.0, 1.0, 1);
  box-shadow: 0px 0px 30px 5px #D3E0EB;
  width: fit-content;
  height: fit-content;
  border-radius: 1rem 1rem 1rem 1rem;
  -webkit-border-radius: 1rem 1rem 1rem 1rem;
  -moz-border-radius: 1rem 1rem 1rem 1rem;
  -ms-border-radius: 1rem 1rem 1rem 1rem;
  -o-border-radius: 1rem 1rem 1rem 1rem;
}

#instalaciones .owl-carousel .owl-item img {
  transform-style: preserve-3d;
  width: 100% !important;
  height: auto !important;
  border-radius: 10px 10px 0 0;
  margin-left: auto;
  margin-right: auto;

}

#instalaciones.owl-carousel .owl-dots .owl-dot.active span,
#instalaciones.owl-carousel .owl-dots .owl-dot:hover span {
  background: #32659D;
  transform: translate3d(0px, -50%, 0px) scale(0.5);
}

#instalaciones.owl-carousel .owl-dots {
  display: inherit;
  width: 100%;
  text-align: center;
  margin-top: 2%;
}

#instalaciones.owl-carousel .owl-dots .owl-dot {
  display: inline-block;
}

#instalaciones.owl-carousel .owl-dots .owl-dot span {
  background: #32659D;
  display: inline-block;
  border-radius: 50%;
  height: 30px;
  margin: 0 2px 5px;
  transform: translate3d(0px, -50%, 0px) scale(0.3);
  transform-origin: 50% 50% 0;
  transition: all 250ms ease-out 0s;
  width: 30px;
}

.parrafo-carrusel{
  color: #269BCD;
  font-weight:600;
  font-size: 1.2rem;
  background-color: #fff;
  /*line-height: 1.1;
  */margin-left: auto;
  margin-right: auto;
  padding: 1rem 0;
  max-width: 352px !important;
  border-radius: 0 0 1rem 1rem;
  -webkit-border-radius: 0 0 1rem 1rem;
  -moz-border-radius: 0 0 1rem 1rem;
  -ms-border-radius: 0 0 1rem 1rem;
  -o-border-radius: 0 0 1rem 1rem;
}

.pueblo-instalacion{
  font-weight: 700;
  font-size: 2rem;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 0;
  color: #1B4476;
}


/*******************
* carrusel-imagenes recarga
*******************/
#carrusel-imagenes{
  min-height: auto;
}


/*********************
* acordeones
*********************/

.acordeones-1{
  margin-top: 3rem;
}

.accordion-button{
  color: #1B4476;
  font-size: 1.1rem;
  font-weight: 600;
}

.accordion-button:not(.collapsed){
  color: #1B4476;
  background-color: #E4EEF8;
  border-color: unset;
  box-shadow: none;
}
.accordion-button:focus{
  border-color: unset;
  box-shadow: none;
}

@media (max-width: 600px){
  .acordeones-1 .row{
    flex-direction: column;
  }
  .columna-izquierda .row{
    margin-bottom: 1.5rem;
  }
}


  




/***************************************/
/*           FOOTER                    */
/***************************************/

#footer{
  min-height: fit-content;
}

footer{
  /* background: linear-gradient(90deg, #FFFFFF, #E4EEF8); */

  display: flex;
  flex-flow: column nowrap;

  width: 100vw;
}

.contacto-mapaweb{
  height: -webkit-min-content;
  height: -moz-min-content;
  height: min-content;
  padding: 1rem;

  border-bottom: 0.5px solid #D2D2D2;


}

.contacto-mapaweb{
  width: 100%;
  margin: 1.875rem 0 0;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  /* background: #fff; */
  border-radius: 1rem;
  -webkit-border-radius: 1rem;
  -moz-border-radius: 1rem;
  -ms-border-radius: 1rem;
  -o-border-radius: 1rem;
}
@media (min-width: 992px){
  .contacto-mapaweb{
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    justify-content: space-evenly;
  }
}
@media (min-width: 880px){
  .contacto-mapaweb {
    padding: 1.5rem;
  }
}

.contacto-mapaweb .icono-ayuda{
  width: 4rem;
  margin-bottom: 0.8rem;
}

.contacto-mapaweb_telefono{
  display: -webkit-inline-box;
  display: inline-flex;
  -webkit-box-align: center;
  text-align: center;
  align-items: center;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 100%;
  color: #32659D;
}

.contacto-mapaweb_telefono:hover{
  color: #32659D;
  text-decoration: underline;
}

footer .mapaweb{
  justify-content: center;

}

footer ul{
  list-style: none;
  padding-left: 0;
}

.mapaweb{
  list-style: none;
  justify-content: center;
  display: flex;
  padding: 1rem;
}

footer .mapaweb > li{
  display: flex;
  flex-flow: column nowrap;

  /* margin: 0 3rem 1rem 0; */

  max-width: 40%;
  
}

footer .mapaweb > li:nth-child(2){
  margin-left: 3rem;
  
}
footer .mapaweb > li:nth-child(3){
  margin-left: 3rem;
  
}


@media (max-width: 880px){
  footer .mapaweb > li{
    max-width: 100%;
  }
}

.negrita{
  color: #1B4476;
  text-decoration: none;
}

.negrita:hover{
  color: #1B4476;
  text-decoration: underline;
}

.enlace-mapaweb{
  color: #269BCD;
  font-weight: 400;
  text-decoration: none;
}

.enlace-mapaweb:hover{
  color: #269BCD;
  text-decoration: underline;
}

footer * ul, li{
  line-height: 30px;
}

footer * a{
  padding-bottom: 1rem;
}

.enlacesPie a{
  padding-bottom: 0;
  margin-bottom: 0;
}

.enlacesPie p{
  padding-bottom: 0;
  margin-bottom: 0;
}


.enlacesPie{
  background: #FFFFFF;

  display: flex;
  flex-flow: row wrap;

  justify-content: center;
  align-items: center;
  max-width: 100vw;
  height: 7rem;
  bottom: 35px;
}

.left{
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-evenly;

  align-items: center;

  width: 45vw;
}

.right{
  display: flex;
  width: 45vw;
  margin-left: auto;
  margin-right: auto;
  /* text-align: center; */
  justify-content: space-evenly;
}

.right ul{
  display: flex;
  justify-content: space-evenly;

}

.logoPie{
  width: 20vw;
}


/**************************
* banner llamanos movil
**************************/
.llamanos-movil{
  display: none;
}

/************************
* modal formulario
************************/
.modal-body .formulario{
  margin-left: 0;
}

.modal{
  --bs-modal-width: 600px;
  z-index: 10000;
}
.modal-body .formulario:hover{
  box-shadow: none;
}



/************************************************************************/
/************************************************************************/
/******************* RESPONSIVE LA PÁGINA *******************************/
/************************************************************************/
/************************************************************************/


/************* 1440px ************/
@media (max-width: 1440px){

  /**********
  * NavBar
  **********/
    .logo-nav{
      margin-left: 0;
    }

    .desplegable{
      padding-right: 1vw;
    }

    /****************
    * columna derecha
    ****************/
    .columna-derecha{
      right: 2vw !important;
    }

    /****************
    * indice
    ****************/

    .indice{
      left: 1vw !important;
    }


}

/************** 1366px **************/
@media (max-width: 1366px){

  /************
  * Home
  ************/
  h1{
    font-size: 3rem !important;
  }

  .subtitulo-inicio{
    font-size: 2rem;
  }

  .indice{
    display: none !important;
  }

  .izquierda{
    display: none;
  }

  

  .flecha-arriba{
    display: none !important;
  }

  .derecha-whatsapp{
    
      display: none;
    
      position: fixed;
    
      z-index: 1000;
    
      right: 40px;
    
      bottom: 10px;
    
      cursor: pointer;
    
    }
    
    
    .icono-derecha-whatsapp{
      width: 40px;
    
      height: 40px;
    
      color: #238FCA;
    }

    .boton-whatsapp{
      background-color: transparent;
      border: none;
    }

    /*************
    * Formulario
    *************/
    .formulario{
      margin-bottom: 10vh;
    }

}


/******************* 1024px **************/

@media (max-width: 1024px){

  /****************
* Navbar
****************/
.navbar ul{
  align-items: start;
}

.nav-link{
  display: block;
}

.dropdown-toggle{
  white-space: nowrap;
}

.contacto{
  display: flex !important;
  flex-direction: row;

}


/*************
* Home
*************/
.home{
  background-size: 100%;
  
}

.subtitulo-inicio{
  font-size: 1.7rem !important;
}

h1{
  font-size: 2.5rem !important;
}

.span-inicio{
  font-size: 1.2rem;
}


/*************
* Formulario
*************/
.tituloformulario{
  font-size: 2rem;
}

.subtitulo-formulario{
  font-size: 1.5rem;
}

}


/************** 768px ****************/
@media (max-width: 800px){

  /*****************
  * NavBar
  *****************/
  .navbar a{
    padding-left: 0;
  }

  .separacion{
    padding-right: 0;
  }

  /* .logo-nav{
    width: 40vw;
  } */


  /****************
  * Formulario
  ****************/
  .formulario{
    margin-bottom: 0;

    width: 80vw;
  }

  .subtitulo-formulario{
    font-size: 1.2rem;
  }

  .input_nombre{
    width: 60vw;

    margin-top: 3vh;
  }

  .input_telefono{
    width: 60vw;

    margin-top: 3vh;
    margin-bottom: 3vh;
  }

  .nombre-formulario{
    padding-bottom: 2vh;
  }

  .email-formulario{
    padding-bottom: 2vh;
  }

  .telefono-formulario{
    padding-bottom: 2vh;
  }




  /****************
  * Footer
  ****************/
  

  /*************
  * enlace Pie 
  *************/
  .left{
    width: 50vw;
  }

  .left > span > a{
    font-size: 0.8rem;
  }

  .derechos{
    font-size: 0.6rem !important;
    margin-bottom: 0 !important;
  }

  .right{
    width: 40vw;
  }

  .enlacesPie ul{
    margin-bottom: 0;

  }

  .enlacesPie{
    position: relative;
    bottom: 40px;
  }

  /*******************
  * llamanos movil
  *******************/
  .llamanos-movil{
    background: linear-gradient(40deg, #03114E, #18566e);
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: space-around;

    bottom: 0;
    z-index: 499;
    
    width: 100vw; 

    background-color: #091643;
    
  }

  .numero-telefono{
    text-decoration: none;
    font-size: 1.3rem;
    font-weight: 500;
    color: #FFFFFF !important;
  }
  .numero-telefono:hover,
  .numero-telefono.linked,
  .numero-telefono.visited{
    color: #fff;
  }

}


/****************** 450px ***************/
@media (max-width: 450px){
  /******************
  * Footer
  ******************/

  .contacto-mapaweb{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: start;
  }

  .mapaweb{
    display: flex;
    flex-wrap: wrap;    
    flex-direction: column;
  }

  .contacto-mapaweb_info{
    font-size: 1.3rem !important;
  }

  .contacto-mapaweb_titulo{
    font-size: 1.3rem !important;
  }a
  .contacto-mapaweb_telefono{
    margin-right: 1rem;
  }

  footer .mapaweb > li:nth-child(2){
    margin-left: 0;
  }
  footer .mapaweb > li:nth-child(3){
    margin-left: 0;
  }

  footer .mapaweb > li{
    margin: 0 1rem 1rem 0;

    
  }

  /*****************
  * enlace Pie
  *****************/
  .right{
    width: 30vw;
    display: flex;
    flex-direction: column;
    align-items: space-evenly;

  }

  .right a{
    font-size: 0.8rem;
  }

  .left{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;

    width: 50vw;

  }

  .right ul{
    align-items: center;
    flex-wrap: wrap;
    
  }

  .logoPie{
    width: 40vw;
  }

}

/****************** 390px *******************/




/******************* 360px *****************/
@media (min-width: 0px) and (max-width: 600px){
  /***************
  * cargadores
  ***************/
  .imagen-card{
    width: 50%;
    
  }
  .card1{
    width: 80%;
    margin: 0 auto;

  }
  .imagen-card{
    margin: 0 auto;
  }
  .titulo-card{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem;  
  }

  .card-body{
    text-align: center;
  }
  .texto-precio{
    text-align: center;
  }
  #cargadores .card-text{
    text-align: center;
    
  }
  #cargadores .span-card-text{
    float: none;
    
  }
  .btn.btn-primary{
    margin-top: 5vmin;
  }

  /**************
  * modal
  **************/
  .input_nombre{
    margin-top: 0;
  }
  .input_telefono{
    margin-top: 0;
  }
  .modal-body .formulario{
    margin: 0;
    width: 100%;
    padding: 0 1rem;;
  }

}