/*  HEX: #0A164E 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: #E6E6E6 GRIS KAYLON 50%
    HEX: #F8F8F8 GRIS KAYLON AL 25%
	
  	icono bombilla: 💡
    icono dedo derecha: 👉
    icono dedo izquierda: 👈

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

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

/*****************
* variables
*****************/
:root{
  --silicio: #0A164E;
  --intermedio-oscuro: #1B4476;
  --kaylon: #32659D;
  --intermedio-claro: #269BCD;
  --azul-tranquilo: #9CDEEB;
  --azul-tranquilo-claro: #E4EEF8;
  --cian: #00FFFF;
  --amarillo: #FFD205;
  --naranja: #F58C2D;
  --rojo: #FF5C39;
  --gris-kaylon: #D2D2D2;
  --gris-kaylon-50: #E6E6E6;
  --gris-kaylon-25: #F8F8F8;

  --tamanio-fuente: 1;
}

/******************
* general
******************/

*,
::before,
::after{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  
}
body{
  width: 100%;
  font-family: Blinker, Tahoma, 'Segoe UI', sans-serif;
  position: relative;
}
html{
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  overflow-y: scroll;
}
.no-scroll{
  scroll-snap-type: unset;
}

@media (max-width: 992px){
  html{
    scroll-snap-type: unset;
  }
}

::-webkit-scrollbar {
  display: none;
  }



/**********************************
* AVISO DE COOKIES
*********************************/
.cookies-contenedor{
  width: 100%;
}

.aviso{
  position: fixed;
  z-index: 100000;
  bottom: 0;
  left: 0;
  padding: 2rem 0;
  max-width: 100%;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-radius: 1rem;
  -webkit-border-radius: 1rem;
  -moz-border-radius: 1rem;
  -ms-border-radius: 1rem;
  -o-border-radius: 1rem;


}

.aviso.hidden{
  opacity: 0;
  visibility: hidden;
  transition: all 1s ease-in;
}

.aviso_texto{
  /* width: 50%; */
  margin-left: auto;
}
.aviso_texto p{
  margin-bottom: 0;
  color: #32659D;
  font-size: 0.9rem;
}
.aviso_texto a{
  color: inherit;
}
.aviso_texto a:hover{
  color: inherit;
}

.botones{
  width: 30%;
  margin-right: auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-evenly;
}

.botones button{
  padding: 0.5rem 1rem;
  color: #fff;
  background-color: #32659D;
  border: none;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  box-shadow: 2px 2px 5px 1px var(--silicio);
}

.boton-acepta1,
.boton-acepta2{
  display: block;
}

.boton-rechazar{
  display: flex;
  align-items: center;
  background-color: #d2d2d2 !important;
  color: #32659D !important;
}

#config {
  fill: #32659D;
}

@media (max-width: 992px){
  .aviso{
    width: 100%;
    left: 0;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
  }
  .aviso_texto{
    width: 100%;
    text-align: center;
  }
  .botones{
    width: 100%;
  }
}

@media (max-width: 578px){
  .botones button{
    font-size: 0.7rem;
    padding: 0.5rem;

  }
  .aviso{
    padding: 1rem 0;
  }
  .aviso_texto{
    font-size: 0.8rem;
  }
  .aviso_texto p{
    margin-bottom: 1rem;
  }

}


/*********************
* smooth
*********************/


.smooth {
  position: relative;
  width: 100%;
  height: auto;
}

section{
  position: relative;
  scroll-snap-align: start;
  min-height: 100dvh;
  width: 100%;
}

@media (max-width: 992px){
  section{
    min-height: fit-content;
    padding-bottom: 4vmin;
  }
  .smooth{
    scroll-snap-type: none;
  }
}


/*****************
* navbar
*****************/


.navbar{
  position: fixed;
  z-index: 999;
  width: 100dvw;
  padding: 0;

}

#navbar-articulos {
  background-color: #fff;
}

.navbar * a{
  color: #1B4476;
  font-size: calc(var(--tamanio-fuente) * 1.2rem);
  font-family: lt_asus-bold;
}

.navbar * .contacto{
  font-family: lt_asus-bold;
  
}

.navbar * a:hover{
  color: #1B4476;
}
.navbar * a:link{
  color: #1B4476;
}
.navbar * a:visited{
  color: #1B4476;
}

.navbar .dropdown ul{
  border: none;
}

.dropdown-menu.idiomas[data-bs-popper]{
  left: -3dvw;
}
.dropdown-menu.idiomas.catalan[data-bs-popper]{
  left: -2.2dvw;;
}
.dropdown-menu.idiomas.frances[data-bs-popper]{
  left: 2dvw;;
}
.idiomas{
  text-align: right;
  min-width: fit-content;
}

.navbar-brand{
  margin-left: 2vw;
  margin-right: 7vw;
}

.logo-empresa-claro{
  display: none;
}

.central{
  margin-left: auto;
  margin-right: auto;
}

/* para hacer que salga un subrayado debajo de los links de la navbar */

.navbar ul li a{
	position: relative;
}

.navbar-expand-xl .navbar-nav .nav-link{
	padding-right: 0;
	padding-left: 0;
  margin: 0 1rem;
}

.navbar ul li .enlace-nav::before{
	content: '';
	border-bottom: 2px solid;
	position: absolute;	/* con el position:absolute, lo que hago es que se posicione de forma absoluta hasta el primer position:relative que encuentre */
	width: 0%;
	top: 32px;
	/* left: 9px; */
	transition: 0.3s ease-in-out;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-ms-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
}


/* al ponerle el activo, lo que hago es que el que tenga la clase activo va a estar siempre igual que si le hiciera el hover, o sea, subrayado. */
.navbar ul li a.activo::before,
.navbar ul li a:hover::before{
	width: 100%;
}

.navbar ul li .enlace-nav.show::before{
  border-bottom: 2px solid;
  position: absolute;
  top: 32px;
  width: 100%;
}

.desplegable-menu.show{
  display: flex;
  left: -50%;
  text-decoration: none;
}

.contacto-menu.show{
  left: -75%;
}

.contacto-menu .nav-item{
  margin: 0 1rem;
  padding: 0;
}
.contacto-menu .dropdown-item{
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}

.desplegable-menu .nav-item:first-child{
  margin-left: 1rem;
}
.desplegable-menu .nav-item:last-child{
  margin-right: 1rem;
}
.desplegable-menu .dropdown-item{
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}
.navbar-nav .nav-link.show{
  color: #1B4476;
}
.dropdown-item:hover{
  background-color: transparent;
}

.bandera{
  height: auto;
  width: 25px;
}

.fa-bars{
  color: #1B4476;
}

@media (max-width: 1500px){
  .dropdown-menu.idiomas[data-bs-popper]{
    left: -2.2dvw;
  }
  .dropdown-menu.idiomas.catalan[data-bs-popper]{
    left: -1.7dvw;;
  }
  .dropdown-menu.idiomas.frances[data-bs-popper]{
    left: 1.5dvw;;
  }
}

@media (max-width: 1400px){
  .dropdown-menu.idiomas[data-bs-popper]{
    left: -2.5dvw;
  }

}
@media (max-width: 1200px){
  .navbar{
    background-color: #fff;
  }

}

@media (max-width: 992px){
  .navbar ul li .enlace-nav::before{
    border-bottom: transparent;
  }
  .desplegable-menu.show{
    display: block;
  }
  .navbar ul li .enlace-nav.show::before{
    border-bottom: transparent;
  }

  .dropdown-menu.show{
    padding-left: 2rem;
    
  }
  .navbar .dropdown ul{
    background-color: #f8f8f8;
  }
  .desplegable-menu .nav-item:first-child{
    margin-left: 0;
  }
  .desplegable-menu .nav-item:last-child{
    margin-right: 0;
  }
  .idiomas{
    text-align: left;
  }

}



@media (min-width: 1200px) and (max-width: 1500px){
  .navbar * a{
    font-size: calc(var(--tamanio-fuente) * 0.7rem) !important;
  }
}

/*****************************
* barra lateral
*****************************/
.lateral{
  position: fixed;
  left: 1vw;
  top: 15dvh;
  z-index: 10;
}

.barra-lateral{
  list-style-type: none;
}

.enlace-lateral{
  text-transform: uppercase;
}


.list-group-item{
  font-family: 'Blinker';
  color: transparent;
  font-size: calc(var(--tamanio-fuente) * 1rem);
  font-weight: 400;
  border: none;
  border-left: 2px solid rgba(38, 155, 205, 0.2);
  background: transparent;  
  transition: .3s;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -ms-transition: .3s;
  -o-transition: .3s;
}

.list-group-item.active {
  z-index: 2;
  border-left: 2px solid rgba(38, 155, 205, 1);
  background-color: transparent;
  color: transparent;
}
.list-group-item.active{
  animation: fadeOut 2s linear;
  -webkit-animation: fadeOut 3s linear;
}

@keyframes fadeOut{
  from{
    color: var(--intermedio-claro);
  }
  to{
    color: transparent;
  }
}

.list-group-item:not(:active){
  background-color: transparent;
  color: transparent;
}

.list-group-item:not(:active):hover{
  color: var(--intermedio-claro);
}

.li-enlace{
  margin-top: 10px;
  background: transparent !important;

}

@media (max-width:1500px){
  .lateral{
    display: none;
  }
}



/*******************
* home
*******************/
#home{
  background-image: url('/assets/img/Landing_Pc.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  position: relative;
  z-index: 15;
}

/* cambio el fondo de pantalla para móviles de la pantalla inicial */
@media (max-width: 992px){
  #home{
    background-image: url('/assets/img/Landing_Movil.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment:scroll;
    background-size: cover;
    min-height: 100dvh;
    z-index: 800;
    position: relative;
  }
}

/* para el movimiento del logo al principio de la página */
.movimiento-logo{
  margin: 0 auto;
  text-align: center;
}
.logo-inicio-movimiento{
  animation-delay: 0s,2s;
  animation-duration: 2s,3s;
  animation-name:movimiento-imagen-1,movimiento-imagen-2;
  animation-fill-mode:forwards;
  z-index: 1;
}

@keyframes movimiento-imagen-1 {
  from{
    width: 600px;
    margin-top: 10%;
  }
  to{
    width: 650px;
    margin-top: 10%;
  }
}
@keyframes movimiento-imagen-2{
  from{
    width: 650px;
    margin-top: 10%;
  }
  to{
    width: 300px;
    margin-top: 6%;
  }
}

@media (max-width: 1200px){
  @keyframes movimiento-imagen-1 {
    from{
      width: 600px;
      margin-top: 15%;
    }
    to{
      width: 650px;
      margin-top: 15%;
    }
  }
  @keyframes movimiento-imagen-2{
    from{
      width: 650px;
      margin-top: 15%;
    }
    to{
      width: 300px;
      margin-top: 8%;
    }
  }
}

@media (max-width: 800px){
  @keyframes movimiento-imagen-1 {
    from{
      width: 350px;
      margin-top: 10%;
    }
    to{
      width: 500px;
      margin-top: 10%;
    }
  }
  @keyframes movimiento-imagen-2{
    from{
      width: 500px;
      margin-top: 10%;
    }
    to{
      width: 350px;
      margin-top: 10%;
    }
  }
}

@media (max-width: 500px){
  @keyframes movimiento-imagen-1 {
    from{
      width: 200px;
      margin-top: 20%;
    }
    to{
      width: 320px;
      margin-top: 15%;
    }
  }
  @keyframes movimiento-imagen-2{
    from{
      width: 320px;
      margin-top: 15%;
    }
    to{
      width: 200px;
      margin-top: 20%;
    }
  }
}


/*************************
* reseñas
*************************/
#resenias{
  background-image: url('../img/FONDO_GRID_CLARO.webp');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding-bottom: 2vmin;
  padding-top: 5vmin;
}
.titulo-espacios{
  color: var(--intermedio-claro);
  font-family: 'lt_asus-bold';
  font-size: calc(var(--tamanio-fuente) * 1.3rem);
  letter-spacing: 5px;
  text-align: center;
  
}

.shadow-effect{
  margin: 5vmin auto 2vmin auto;
  max-width: 340px !important;
  background-color: #fff;
  padding: 1rem 2rem;
  border-radius: 1rem;
  -webkit-border-radius: 1rem;
  -moz-border-radius: 1rem;
  -ms-border-radius: 1rem;
  -o-border-radius: 1rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10), 0 15px 12px rgba(0, 0, 0, 0.02);
  height: fit-content;
}

.item{
  opacity: .2;
  transform: scale3d(0.8, 0.8, 1);
  transition: all 0.3s ease-in-out;
}

.owl-item.active.center .item {
  opacity: 1;
  transform: scale3d(1.0, 1.0, 1);
}

.owl-carousel .owl-dots .owl-dot.active span,
.owl-carousel .owl-dots .owl-dot:hover span {
  transform: translate3d(0px, -50%, 0px) scale(0.7);
}

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

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

.owl-carousel .owl-dots .owl-dot span {
  background: var(--gris-kaylon-25);
  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;
}


.nombre-resenia{
  position: relative;
  bottom: 50px;
  left: 60px;
  font-weight: 600;
  font-size: calc(var(--tamanio-fuente) * 1.2rem);
}
.estrellas{
  position: relative;
  bottom: 70px;
  left: 60px;
}
.fa-star{
  color: var(--naranja);
}

.enlace-resenia{
  text-align: center;
  text-transform: uppercase;
}

.texto-resenia{
  margin-top: -5vmin;
}

.fecha-resena{
  display: none;
}

.logos-opiniones{
  display: flex;
}

.logos-opiniones{
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 2vmin;
}
.logo-google{
  width: 6dvw;
}
.kaylon-reviews{
  width: 5dvw;
}
.final-opiniones{
  text-align: center;
  color: var(--kaylon);
  margin-bottom: 0;
}

@media (max-width: 1400px){
  #resenias{
    padding-top: 3dvh;
  }
  .owl-carousel .owl-dots{
    margin-top: 4vmin;
  }
  .logos-opiniones{
    margin-top: -4vmin;
  }
  .final-opiniones{
    margin-top: -2vmin;
  }
}

@media (max-width: 1300px){
  .logos-opiniones{
    margin-top: 0;
  }
  .final-opiniones{
    margin-top: 0;
  }
}

@media (max-width: 992px){
  .logo-google{
    width: 11dvw;
  }
  .kaylon-reviews{
    width: 9dvw; 
  }

}

@media (max-width: 600px){
  #resenias{
    padding-top: 4vmin;
    background-attachment: scroll;
  }
  .logo-google{
    width: 20dvw;
  }
  .kaylon-reviews{
    width: 17dvw;
  }
  .final-opiniones{
    line-height: 1;
  }

}


/**************************
* formulario
**************************/
#formulario-contacto{
  background: linear-gradient(40deg, #09164E 30%, #1B4476 91%);
}
.bloque-formulario{
  display: flex;
  padding-top: 20vmin;
  gap: 100px;
}
.foto-contacto{
  display: flex;
  flex-direction: column;
  width: 55%;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}
.div-imagen-contacto{
  width: 40%;
  margin-left: auto;
  margin-right: auto;

}
.imagen-contacto{
  width: 100%;
}

.texto-contacto{
  color: var(--intermedio-claro);
  margin-top: 4vmin;
  width: 70%;
  margin-left: auto;
  margin-right: auto;
}

.formula .titulo{
  color: #fff;
  font-size: 2.5rem;
  text-align: left;
}

.formula{
  width: 40%;
}

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

}

.label-formulario{
  color: #fff;
  font-size: 1.2rem;
  margin-top: 2vmin;
}
.asterisco{
  color: var(--rojo);
}
.input-nombre,
.input-phone{
  border: none;
  border-bottom: 0.5px var(--intermedio-claro) dotted;
  background-color: transparent;
  outline: none;
  color: var(--intermedio-claro);
  font-family: 'lt_asus';
}
.checkbox{
  font-size: 0.8rem;
  margin-top: 4vmin;
  margin-bottom: 2vmin;
}

.div-boton-formulario{
  text-align: left;
}
.boton-formulario{
  color: #fff;
  background:linear-gradient(45deg, var(--intermedio-oscuro), var(--intermedio-claro));
  font-size: 1rem;
  font-style: italic;
  padding: 0.5rem 1.5rem;
  border: none;
  border-radius: 0.5rem;
  -webkit-border-radius: 0.5rem;
  -moz-border-radius: 0.5rem;
  -ms-border-radius: 0.5rem;
  -o-border-radius: 0.5rem;
}
.enlace-formulario{
  color: inherit;
}
.enlace-forlulario:hover,
.enlace-formulario:focus,
.enlace-formulario:link,
.enlace-formulario:visited{
  color: inherit;
}

.footer-formulario-primero{
  display: flex;
  justify-content: space-around;
  color: #fff;
  margin-top: 4vmin;
  border-bottom: 1px solid var(--intermedio-oscuro);
}
.footer-llamanos,
.footer-masInfo{
  text-align: center;
}
.footer-llamanos__texto,
.footer-masInfo__texto{
  margin-bottom: 0;
  font-weight: 600;
}

.enlace-email{
  color: #fff;
}

@media (max-width: 1400px){
  .bloque-formulario{
    padding-top: 15vmin;
  }
  .formula .titulo{
    font-size: 2rem;
  }
}

@media (max-width: 992px){
  .bloque-formulario{
    padding-top: 5vmin;
  }
  .formula .titulo{
    font-size: 1.4rem;
  }
  .label-formulario{
    font-size: 1rem;
  }
}

@media (max-width: 600px){
  #formulario-contacto{
    padding-top: 5vmin;
    padding-bottom: 5vmin;
  }
  .bloque-formulario{
    flex-direction: column;
    gap: 10px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
  .foto-contacto{
    width: 100%;
  }
  .div-imagen-contacto{
    width: 40%;
  }
  .texto-contacto{
    width: 100%;
  }
  .texto-contacto p{
    line-height: 1;
  }
  .formula{
    width: 100%;
  }
  .checkbox{
    margin-top: 7vmin;
    margin-bottom: 4vmin;
  }
  .div-boton-formulario{
    text-align: center;
  }
}


/*************************
* instalaciones recientes
**************************/
#instalaciones-recientes{
  background-image: url('../img/FONDO_GRID_CLARO.webp');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding-bottom: 2vmin;
  padding-top: 5vmin;
}
#instalaciones-recientes .titulo{
  font-size: 2.5rem;
}

#instalaciones .shadow-effect{
  padding: 0 0 0.5vmin 0;
}

.imagen-instalacion{
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  width: 350px;
  height: 240px;
}
.localidad-instalacion p{
  font-size: 1.7rem;
  font-family: 'Blinker';
  font-weight: 700;
  letter-spacing: 5px;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 0;
  line-height: 1;
  padding: 0.5rem 0;
}
.localidad-instalacion{
  border-bottom: 1px solid var(--azul-tranquilo);
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}
.textos-instalaciones p{
  text-align: center;
  font-size: 1.2rem;
  color: var(--kaylon);
}
.textos-instalaciones p:first-child{
  margin-top: 1vmin;
  margin-bottom: 0;
}

@media (max-width: 578px){
  #instalaciones-recientes{
    padding-top: 5vmin;
    padding-top: 5vmin;
    background-attachment: scroll;
    background-size: cover;
  }
}


/***************************
* tramites incluidos
***************************/
#tramites{
  background: linear-gradient(190deg, #b1d7f0, rgba(254,254,254,1));
}
#tramites .container{
  height: fit-content;
}
#tramites .titulo{
  margin-bottom: 3vmin;
}
.recuadro-arriba{
  background-color: var(--intermedio-oscuro);
  width: 30dvw;
  height: 20dvh;
}
.tramites-incluidos{
  background-color: #fff;
  margin: 4vmin;
  width: 95%;
  height: auto;
  position: relative;
  z-index: 10;
  bottom: 20vmin;
  display: grid;
  grid-template-areas: 'cero cero uno dos'
                        'tres cuatro cinco seis';
}
.imagen-fondo-tramites{
  width: 100%;
}
.icono-tramites{
  width: 20%;
}
.imagen-tramites{
  grid-area: cero;
  width: 90%;
}
.uno{
  grid-area: uno;
}
.dos{
  grid-area: dos;
  padding-right: 1rem;
}
.tres{
  grid-area: tres;
}
.cuatro{
  grid-area: cuatro;
}
.cinco{
  grid-area: cinco;
}
.seis{
  grid-area: seis;
  padding-right: seis;
}

.titulo-iconos{
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--intermedio-oscuro);
}
.tramites-incluidos p{
  color: var(--intermedio-claro);
}
.icono-y-titulo{
  padding-left: 1rem;
  padding-right: 1rem;
}
.recuadro-abajo{
  background-color: var(--intermedio-claro);
  width: 30dvw;
  height: 20dvh;
  margin-left: auto;
  margin-top: -40vmin;
}

@media (max-width: 1500px){
  #tramites .titulo-espacios{
    padding-top: 8vmin;
  }
}
@media (max-width: 992px){
  .recuadro-arriba{
    display: none;
  }
  .recuadro-abajo{
    display: none;
  }
  .tramites-incluidos{
    position: inherit;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
  }
  .imagen-tramites{
    width: 100%;
  }
  .dos{
    padding-right: 0;
  }
  .seis{
    padding-right: 0;
  }
  .icono-y-titulo{
    padding: 0.5rem 1.5rem;
  }
}

@media (max-width: 578px){
  #tramites{
    padding-top: 5vmin;
    padding-bottom: 5vmin;
  }
}

/***************************
* diferentes instalaciones
***************************/
#diferentes-instalaciones{
  background-image: url('/assets/img/FONDO_GRID_CLARO.webp');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}
.diferentes-instalaciones{
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.726), rgba(255, 255, 255, 0.15));
  padding: 1rem 1.5rem;
  width: 85%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5vmin;
}
#diferentes-instalaciones .titulo-iconos{
  font-size: 2rem;
}
#diferentes-instalaciones p{
  font-size: 1.2rem;
  color: var(--intermedio-claro);
}
#diferentes-instalaciones .icono-tramites{
  width: 35%;
  margin-bottom: 2vmin;
}

@media (max-width: 1500px){
  #diferentes-instalaciones .titulo-espacios{
    padding-top: 8vmin;
  }
}

@media (max-width: 992px){
  .diferentes-instalaciones{
    flex-direction: column;
  }
}

@media (max-width: 578px){
  #diferentes-instalaciones{
    padding-top: 5vmin;
    padding-bottom: 5vmin;
    background-attachment: scroll;
  }
  #diferentes-instalaciones p{
    line-height: 1.2;
  }
  .diferentes-instalaciones{
    width: 90%;
  }
}


/***********************
* amigo solar
***********************/
#amigo-solar{
  background: linear-gradient(to top, var(--azul-tranquilo-claro) 0%,#fff 50%);
}
.amigo-solar{
  padding-top: 25vmin;
  display: flex;
  gap: 10vmin;
}
.imagen-amigo-solar{
  width: 55%;
}
.amigo{
  width: 100%;
}
.imagen-amigo{
  width: 80%;
  margin-left: auto;
}
.texto-amigo-solar{
  width: 35%;
}
.amigo-solar .titulo{
  text-align: left;
}
.amigo-solar .titulo-espacios{
  text-align: left;
  padding-top: 6vmin;
}
.texto-amigo-solar p{
  margin-bottom: 0;
  color: var(--kaylon);
}
.mas-detalles{
  margin-top: 1vmin;
  transition: .3s ease-in-out;
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -ms-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
}
summary{
  list-style: none;
  color: var(--gris-kaylon);
}
.desplegable{
  width: fit-content;
  background-color: var(--azul-tranquilo-claro);
  padding: 1rem;
  border: solid 1px var(--intermedio-claro);
  border-radius: 0.5rem;
  -webkit-border-radius: 0.5rem;
  -moz-border-radius: 0.5rem;
  -ms-border-radius: 0.5rem;
  -o-border-radius: 0.5rem;
}
.desplegable p{
  color: var(--intermedio-claro);
  font-size: 0.8rem;
}
.cien-para-ti{
  margin-top: 3vmin;
}
.para-ti,
.para-tu-amigo{
  background-image: linear-gradient(40deg, var(--intermedio-oscuro), var(--kaylon));
  color: #fff;
  padding: 0.5rem 1.5rem;
  border-radius: 0.5rem;
  -webkit-border-radius: 0.5rem;
  -moz-border-radius: 0.5rem;
  -ms-border-radius: 0.5rem;
  -o-border-radius: 0.5rem;

}
#suma{
  margin-left: 1rem;
  margin-right: 1rem;
}

.recuadro-amigo{
  width: 60vmin;
  height: 53vmin;
  background: linear-gradient(70deg, var(--kaylon) 30%, rgba(88, 184, 233, 0.824) 91%);
  margin-bottom: -48vmin;
  margin-left: 10vmin;
}

@media (max-width: 1500px){
  .recuadro-amigo{
    height: 60vmin;
    margin-bottom: -56vmin;
  }
}

@media (max-width: 1400px){
  .recuadro-amigo{
    margin-bottom: -57vmin;
  }
}

@media (max-width: 1300px){
  .recuadro-amigo{
    height: 55vmin;
    margin-bottom: -50vmin;
  }
}

@media (max-width: 1200px){
  .recuadro-amigo{
    display: none;
  }
  .imagen-amigo{
    margin-left: 0;
  }
  .amigo-solar{
    gap: 0;
  }
  .texto-amigo-solar{
    width: 45%;
  }
  .texto-amigo-solar .titulo-espacios{
    margin-top: 0;
  }
}

@media (max-width: 992px){
  .amigo-solar{
    flex-direction: column-reverse;
    padding-top: 0;
    gap: 20px;
  }
  .imagen-amigo-solar{
    width: 100%;
  }
  .imagen-amigo{
    width: 100%;
  }
  .texto-amigo-solar{
    width: 70%;
    padding-top: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;

  }
  .texto-amigo-solar .titulo,
  .texto-amigo-solar .titulo-espacios{
    text-align: center;
  }
  .desplegable{
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 600px){
  #amigo-solar{
    padding-top: 5vmin;
    padding-bottom: 10vmin;
  }
  .texto-amigo-solar{
    width: 100%;
  }
  .cien-para-ti span{
    font-size: 0.6rem;
  }
}


/*************************
* tu instalación (móvil)
*************************/

#tu-instalacion{
  background: linear-gradient(90deg, var(--silicio) 30%, var(--kaylon) 91%);
}

.movil-y-texto{
  padding-top: 10dvh;
  width: 100%;
  display: flex;
  justify-content: space-around;
}
.izquierda-movil{
  width: 30%;
  padding-top: 5dvh;
}
.izquierda-movil p{
  color: var(--intermedio-claro);
  text-align: right;
}
.izquierda-movil .titulo{
  color: #fff;
  text-align: right;
}
.lista-movil{
  list-style-type: none;
  color: #fff;
  text-align: right;
  font-size: 1.2rem;
}
.lista-movil > li{
  line-height: 1.3;
  margin-bottom: 1rem;
}

.div-imagen-movil{
  width: 80%;
}
.imagen-movil{
  width: 100%;
  box-shadow: 20px 20px 50px 10px rgba(0, 0, 0, 0.377);
  border-radius: 3.5rem;
  -webkit-border-radius: 3.5rem;
  -moz-border-radius: 3.5rem;
  -ms-border-radius: 3.5rem;
  -o-border-radius: 3.5rem;
}

@media (max-width: 1500px){
  .div-imagen-movil{
    width: 55%;
  }
  .imagen-movil{
    border-radius: 2.5rem;
    -webkit-border-radius: 2.5rem;
    -moz-border-radius: 2.5rem;
    -ms-border-radius: 2.5rem;
    -o-border-radius: 2.5rem;
  }
  .lista-movil > li{
    line-height: 1;
  }
}


@media (max-width: 1300px){
  .movil-y-texto{
    padding-top: 15dvh;
  }
  .izquierda-movil{
    padding-top: 0;
  }
  .izquierda-movil .titulo-espacios{
    margin-top: 0;
  }
}

@media (max-width: 992px){
  .movil-y-texto{
    justify-content: space-evenly;
    padding-top: 4dvh;
  }
  .izquierda-movil{
    width: 40%;
  }
  .izquierda-movil .titulo-espacios{
    padding-top: 0;
  }
  .derecha-movil{
    display: flex;
    justify-content: center;
  }
}


@media (max-width: 600px){
  #tu-instalacion{
    position: relative;
    padding-top: 5vmin;
    padding-bottom: 8vmin;
    overflow: hidden;
  }
  .movil-y-texto{
    width: 100%;
    padding-top: 2dvh;
  }
  .izquierda-movil{
    width: 100%;
    margin-right: auto;
  }
  .izquierda-movil p{
    text-align: left;
    line-height: 1;
  }
  .izquierda-movil .titulo{
    text-align: left;
  }
  .lista-movil{
    text-align: left;
    padding-left: 0;
    width: 50%;
    font-size: 1rem;
  }
  
  .derecha-movil{
    position: absolute;
    width: 35%;
    left: 55dvw;
    top: 16dvh;
    z-index: 10;
  }
  .imagen-movil{
    border-radius: 1.5rem;
    -webkit-border-radius: 1.5rem;
    -moz-border-radius: 1.5rem;
    -ms-border-radius: 1.5rem;
    -o-border-radius: 1.5rem;
  }
  .div-imagen-movil{
    width: 100%;
  }
}

@media (max-width: 390px){
  .derecha-movil{
    top: 18dvh;
    left: 55dvw;
  }

}

@media (max-width: 375px){
  .derecha-movil{
    top: 25dvh;
  }
}


@media (max-width: 320px){
  .derecha-movil{
    top: 30dvh;
  }
}


/*************************
* kaylon en prensa
*************************/
#prensa{
  background-image: url('../img/FONDO_GRID_CLARO.webp');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  
}
.kaylon-prensa{
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-top: 10dvh;
}
.portatil{
  width: 60%;
}
.imagen-portatil{
  width: 100%;
}
.prensa-textos .titulo-espacios,
.prensa-textos .titulo{
  text-align: left;
}
.prensa-textos{
  width: fit-content;
  margin-left: 5vmin;
}
.prensa-textos p:nth-last-child(2){
  color: var(--intermedio-claro);
  font-size: 1.2rem;
  width: 70%;
}
.fila-noticia{
  display: flex;
  gap: 20px;
  margin-bottom: 2vmin;
}
.noticias .fila-noticia:last-child{
  margin-bottom: 0;
}
.noticia{
  width: 40%;
}
.imagen-noticias{
  width: 100%;
}

@media (max-width: 1500px){
  .kaylon-prensa{
    padding-top: 6dvh;
    padding-bottom: 2vmin;
  }
}

@media (max-width: 992px){
  .kaylon-prensa{
    padding-top: 0;
  }
  .portatil{
    width: 90%;
  }
  .prensa-textos p:nth-last-child(2){
    width: 100%;
  }
}

@media (max-width: 600px){
  #prensa{
    padding-top: 5vmin;
    padding-bottom: 5vmin;
  }
  .kaylon-prensa{
    flex-direction: column;
    padding-top: 2dvh;
  }
  .prensa-textos{
    margin-left: 0;
  }
  .fila-noticia{
    justify-content: center;
  }
}

/*******************************
* sostenibilidad medioambiental
*******************************/
#sostenibilidad-medioambiental{
  background-image: linear-gradient(to top, var(--azul-tranquilo-claro) 0%,#fff 50%);
}
.medioambiente{
  display: flex;
  justify-content: space-evenly;
  padding-top: 15dvh;
}

.medioambiente p:nth-last-child(2){
  color: var(--intermedio-oscuro);
  width: 90%;
  margin-left: auto;
  font-size: 1.2rem;
}
.medioambiente p,
.medioambiente .titulo{
  text-align: right;
}
.medioambiente .titulo-espacios{
  font-size: 1.1rem;
}
.medioambiente .titulo{
  font-size: 2.5rem;
}
.medioambiente .lista-movil{
  color: var(--intermedio-claro);
  width: 90%;
  margin-left: auto;
}
.div-textos-medioambiente{
  width: 50%;
  margin-right: 5vmin;
}
.imagen-medioambiente{
  width: 100%;
}
.div-imagen-medioambiente{
  width: 90%;
  position: relative;
  top: 5dvh;
  right: -2dvw;
}
.medioambiente .recuadro-amigo{
  margin-top: -45dvh;
}

@media (max-width: 1500px){
  .medioambiente .recuadro-amigo{
    margin-top: -57dvh;
    height: 70dvh;
    width: 75vmin;
  }
}

@media (max-width: 1400px){
  .medioambiente .recuadro-amigo{
    display: none;
  }
}

@media (max-width: 1200px){
  .medioambiente{
    align-items: center;
    padding-top: 6dvh;
  }
  .div-textos-medioambiente{
    width: 75%;
  }
}

@media (max-width: 992px){
  #sostenibilidad-medioambiental{
    background-image: url('/assets/img/medioambiente_movil.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no repeat;
    background-attachment: fixed;
  }
  
  .medioambiente{
    flex-direction: column;
    padding-top: 0;
    padding-bottom: 25dvh;
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .div-textos-medioambiente{
    margin-right: 0;
    width: 100%;
  }
  .medioambiente .titulo{
    font-size: 2rem;
  }
  .medioambiente .titulo-espacios{
    font-size: 1rem;
  }
  .medioambiente .titulo,
  .medioambiente .titulo-espacios{
    text-align: center;
  }
  .medioambiente p:nth-last-child(2){
    width: 100%;
    text-align: center;
    line-height: 1;
    font-size: 1rem;
  }
  .medioambiente .lista-movil{
    width: 100%;
    padding-left: 0;
    text-align: center;
    font-size: 1rem;
  }
  .div-imagen-medioambiente{
    display: none;
    width: 100%;
    position: inherit;
    margin-left: 0;
    margin-right: 0;
  }
  .medioambiente-derecha{
    width: 100%;
  }

}




/***************************
* preguntas frecuentes
***************************/
#preguntas-frecuentes{
  background-image: linear-gradient(0deg, rgba(204, 228, 240, 0.824) 30%, rgb(255, 255, 255) 91%);
}
.preguntas-frecuentes{
  padding-top: 5dvh;
}


/*********************
* acordeon
*********************/

.acordeon {
  min-width: 310px;
  max-width: 100%;
  margin: 1.5rem auto;
  /* padding: 50px 0; */
}

.etiqueta{
  border: 1px solid var(--kaylon);
  padding: 0.5rem 1.5rem;
  position: relative;
  cursor: pointer;
  margin: 0;
  color: var(--intermedio-oscuro);
  background-color: var(--gris-kaylon-25);
  border-radius: 0.5rem;
  -webkit-border-radius: 0.5rem;
  -moz-border-radius: 0.5rem;
  -ms-border-radius: 0.5rem;
  -o-border-radius: 0.5rem;
  text-align: center;
}

.faq-cuerpo {
  position: relative;
  overflow: hidden;
  display: none;
  padding: 20px;
  border: 1px solid var(--intermedio-claro);
  margin-top: 1vmin;
  border-radius: 0.5rem;
  -webkit-border-radius: 0.5rem;
  -moz-border-radius: 0.5rem;
  -ms-border-radius: 0.5rem;
  -o-border-radius: 0.5rem;
  background-color: var(--azul-tranquilo-claro);
  color: var(--intermedio-claro);
}
.faq-cuerpo{
  font-size: 1.2rem;
  line-height: 1.1;
}

.enlace{
  color: inherit;
}

@media (max-width: 1500px){
  .etiqueta{
    font-size: 1.3rem;
  }
  .faq-cuerpo{
    margin-top: 0.3vmin;
  }
  .acordeon{
    margin: 0.5rem auto;
  }
  .preguntas-frecuentes{
    padding-top: 8dvh;
  }
}

@media (max-width: 600px) {
  .etiqueta {
    left: 0;
    font-size: 1.2rem !important;
    text-align: left;
  }
  .etiqueta::before {
    right: 0px;
  }
}

/***********************
* área de actuación
/**********************/

#area-de-actuacion{
  background-image: linear-gradient(0deg, rgba(204, 228, 240, 0.824) 30%, rgb(255, 255, 255) 91%);
}
.area-de-actuacion{
  padding-top: 8dvh;
}
.area-de-actuacion p{
  color: var(--intermedio-claro);
  text-align: center;
  font-size: 1.2rem;
  
}
.mapa-espania{
  width: 100%;
}
.imagen-espania{
  width: 70%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 4dvh;
}

@media (max-width: 1500px){
  .imagen-espania{
    width: 55%;
  }
}

@media (max-width: 992px){
  .area-de-actuacion{
    padding-top: 2dvh;
  }
  .area-de-actuacion p{
    font-size: 1rem;
  }
  .imagen-espania{
    width: 80%;
  }
  #actuacion-contacto{
    padding-top: 6dvh;
  }
}


/************************
* formulario contacto 2
************************/
#formulario-contacto2{
  background-image: linear-gradient(40deg, #09164E , #1B4476);
}

.div-redes-sociales{
  display: flex;
}
.redes-sociales{
  width: fit-content;
  margin-right: 4vmin;
}
.div-redes-sociales .redes-sociales:last-child{
  margin-right: 0;
}
#formulario-contacto2 .footer-formulario-primero{
  align-items: center;
  border-top: 1px solid var(--intermedio-oscuro);
}
#formulario-contacto2 .footer-llamanos p,
#formulario-contacto2 .footer-masInfo p{
  margin-bottom: 0;
  text-align: center;
}
#formulario-contacto2 .footer-formulario-primero{
  padding-top: 1vmin;
  padding-bottom: 1vmin;
}

#formulario-contacto2 p{
  color: #fff;
}
#formulario-contacto2 .texto-contacto p{
  color: var(--intermedio-claro);
}

.fa-brands{    
  color:var(--intermedio-claro);
}
.facebook:hover {
  color: white;
}
.twitter:hover {
color: #1da1f2;
}
.instagram:hover {
color: #fd4dd7;
}
.linkedin:hover {
color: white;
}
.tiktok:hover {
color: #ff0050;
}
.youtube:hover{
color: red;
}

@media (max-width: 1400px){
  #formulario-contacto2{
    padding-bottom: 15vmin;
  }
}

@media (max-width: 992PX){
  #formulario-contacto2{
    height: auto;
    padding-bottom: 10vmin;
  }
}


@media (max-width: 578px){
  #formulario-contacto2{
    padding-top: 5vmin;
    padding-bottom: 20vmin;
    /* height: 95dvh; */
  }
  .redes-sociales{
    margin-right: 1.5dvh;
  }
  #formulario-contacto2 .footer-formulario-primero p{
    font-size: 0.8rem !important;
  }

}
@media (max-width: 400px){
  #formulario-contacto2{
    padding-bottom: 20dvh;
  }
}




/*************************
* footer
*************************/
footer{
  position: absolute;
  bottom: 0;
  width: 100%;
  height: auto;
  background-color: #fff;
  z-index: 200;
  padding: 1rem;
  margin-bottom: auto;
}
footer .enlace{
  text-decoration: none;
}
.footer{
  width: 100%;
  display: inline-flex;
  color: var(--kaylon);
  justify-content: space-between;
  padding-right: 2rem;
  padding-left: 2rem;
}
.footer-proyectos .movil{
  display: none;
}
.privacidad{
  display: flex;
}
.privacidad div{
  margin-right: 1vmin;
}
.privacidad div:last-child{
  margin-right: 0;
}

@media (max-width: 992px){
  footer *{
    font-size: 0.7rem;
  }
  .copyright{
    width: 40%;
  }
  .footer-proyectos{
    width: 10%;
  }
  .privacidad{
    width: 40%;
    align-items: center;
    justify-content: space-evenly;
  }
  .footer-proyectos .desktop{
    display: none;
  }
  .footer-proyectos .movil{
    display: block;
  }
  .footer{
    padding-right: 0;
    padding-left: 0;
    align-items: center;
  }
  .privacidad div{
    margin-right: 0;
    width: fit-content;
  }
}


@media (max-width: 578px){

  .privacidad{
    flex-wrap: wrap;
  }
  .privacidad .politica-privacidad:last-child{
    margin-left: 0.5rem;
  }
  .home{
    display: none;
  }
  footer .contacto{
    display: none;
  }

}



/***********************
* barra llámanos
***********************/
.llamanos-movil{
  display: none;
  background: linear-gradient(40deg, var(--silicio), var(--intermedio-oscuro));
  justify-content: space-around;
  align-items: center;
  height: auto;
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 110;
}
.numero-telefono{
  font-size: 1.3rem;
  text-decoration: none;
  font-weight: 500;
  color: #fff;
}

@media (max-width: 578px){
  .llamanos-movil{
    display: inline-flex;
  }

}


/***********************
* trabaja con nosotros
***********************/

#trabaja-con-nosotros .archivo{
  color: #fff;
}
#trabaja-con-nosotros .div-imagen-contacto{
  width: 80%;
}
#trabaja-con-nosotros .imagen-trabaja{
  width: 100%;
  border-radius: 1rem;
  -webkit-border-radius: 1rem;
  -moz-border-radius: 1rem;
  -ms-border-radius: 1rem;
  -o-border-radius: 1rem;
}

@media (max-width: 992px){
  #trabaja-con-nosotros .foto-contacto{
    padding-top: 5dvh;
  }
}

/***************
* arabe
***************/
.acordeon-principal.arabe .acordeon{
  margin: 0.5rem 0;
}



/****************************
* proyectos
****************************/

.fondo-body{
  background-image: linear-gradient(180deg, #fff 30%, #cce4f0d2);
  background-attachment: fixed;
}

.proyectos{
  padding-top: 10vmin;
}

.biger{
  display: flex;
  justify-content: space-evenly;
  gap: 70px;
  margin-top: 10vmin;
  align-items: center;
}
.imagen{
  width: 100%;
}
.biger-fondo{
  background-image: url('/assets/img/proyectos/biger_web.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  width: 60dvw;
  height: 40dvh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-biger{
  width: 30%;
}

.biger-texto{
  width: 100%;
}

.biger-texto .titulo-espacios{
  text-align: left;
  padding-top: 0;
}
.biger-texto .titulo{
  text-align: left;
  font-size: 3.5rem;
}

.parrafo1 {
  font-weight: 600;
  font-size: 1.2rem;
  color: #32659d;
}

.parrafo2 {
  margin-top: 2vh;
  font-weight: 600;
  font-size: 1rem;
  color: #269bcd;
}

.logos{
  width: 100%;
  display: flex;
  margin-top: 3vmin;
}

@media (max-width: 1400px){
  .biger{
    margin-top: 2vmin;
  }
}

@media (max-width: 992px){
  #todos-proyectos .proyectos{
    width: 100%;
  }
  .biger{
    gap: 20px;
    flex-direction: column;
  }
  .biger-fondo{
    width: 100%;
  }

}

  /******************
  * reforesfy
  ******************/
  #reforesfy .biger-fondo{
    background-image: url('/assets/img/proyectos/Reforesfy_FONDO.jpg')
  }

  #reforesfy .logo{
    width: 30%;
  }

  /******************
  * innoCámaras
  ******************/
  #innocamaras .biger-fondo{
    background-image: url('/assets/img/proyectos/INNOCÁMARA.webp')
  }
  #innocamaras2 .biger-fondo{
    background-image: url('/assets/img/proyectos/post-pyme-digital.png')
  }
  #innocamaras3 .biger-fondo{
    background-image: url('/assets/img/proyectos/pymesostenible.png')
  }


  /******************
  * cruz roja
  ******************/
  #cruz-roja{
    min-width: 100dvh;
  }

  #cruz-roja .biger-fondo{
    background-image: url('/assets/img/proyectos/CRUZROJA.jpg');
  }



/*********************************
* aerotermia
*********************************/
#inicio-aerotermia{
  background-image: url('/assets/img/aerotermia/Landing_aerotermia.webp');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

#climatizacion-perfecta{
  background-color: #162238;
  background-image: url('/assets/img/aerotermia/aerotermia_fondo.webp');
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: 55%;
}
#aerotermia .subtitulo-h2{
  margin-top: 5vmin;
  font-size: 4rem;
}

.subtitulo-nos-adaptamos-aerotermia{
  margin-bottom: 6vmin;
}

#aerotermia .boton-solicitar.movil{
  display: none;
}
@media (max-width: 578px){
  #aerotermia .boton-solicitar.movil{
    display: block;
  }
  .boton-solicitar .boton-presupuesto{
    font-size: 1.1rem;
  }

}


#aerotermia .tres-columnas{
  width: 70%;
}

.imagen-industria{
  width: 100%;
}

#aerotermia .boton-presupuesto{
  margin-top: 5vmin;
}


@media (max-width: 992px){
  #climatizacion-perfecta{
    min-height: fit-content !important;
    padding-bottom: 9vmin;
  }
}

@media (max-width: 578px){
  #inicio-aerotermia{
    background-position-x: -75dvh;
  }
  .banner-video .col-lg-3{
    padding-right: 0;
    padding-left: 0;
  }
  #climatizacion-perfecta .subtitulo-h2{
    font-size: 2.5rem;
  }
  #climatizacion-perfecta .tres-columnas{
    width: 100%;
  }
  .boton-solicitar{
    text-align: center;
  }
}

#aerotermia .shadow-effect .imagen{
  border-top-right-radius: 1rem;
  border-top-left-radius: 1rem;
}


.formulario1-aerotermia #lineas{
  padding-top: 5vmin;
  padding-bottom: 5vmin;
}

.formulario1-aerotermia .footer-formulario-primero{
  border-bottom: none;
}

.formulario1-aerotermia .bloque-formulario{
  padding-top: 0;
}

.formulario1-aerotermia .titulo{
  color: var(--kaylon);
}

.formulario1-aerotermia .label-formulario,
.formulario1-aerotermia .enlace-email{
  color: var(--kaylon);
}

#nuestras-marcas{
  padding-top: 5vmin;
  padding-bottom: 10vmin;
}

#nuestras-marcas .subtitulo-h2{
  margin-bottom: 4vmin;
}

#nuestras-marcas .row{
  align-items: center;
  margin-bottom: 5vmin;
}
#nuestras-marcas .row:last-child{
  margin-bottom: 0;
}

@media (max-width: 578px){
  #nuestras-marcas .row{
    row-gap: 20px;
    justify-content: center;
  }
  #aerotermia .subtitulo-h2{
    font-size: calc(var(--fuente) * 1.5);
  }
  #nuestras-marcas .col-lg-3{
    width: 49%;
  }
}

#video-youtube .imagen-video{
  width: 60%;
  margin-top: 5vmin;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 578px){
  #video-youtube .imagen-video{
    width: 100%;
  }
}




/*****************************
* punto de recarga
*****************************/
#inicio-punto-recarga{
  background-image: url('/assets/img/Landing_pto_recarga.webp');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

#nos-adaptamos-recarga{
  background-color: #162238;
  background-image: url('/assets/img/coche_fondo.webp');
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: 45%;
  padding-bottom: 10dvh;
}

.texto-cargadores{
  background-color: #fff;
  padding: 1rem;
  text-align: center;
  border-radius: 1rem;
  -webkit-border-radius: 1rem;
  -moz-border-radius: 1rem;
  -ms-border-radius: 1rem;
  -o-border-radius: 1rem;
}

.lista-check.cargadores{
  padding-left: 0;
}

.parrafo-banner-principal.cargadores{
  width: 60%;
}

.carrusel-imagenes.cargadores{
  min-height: fit-content;
}

@media (max-width: 1100px){
  .parrafo-banner-principal.cargadores{
    width: 100%;
  }
}
@media (max-width: 992px){
  #nos-adaptamos-recarga{
    min-height: fit-content;
  }
}

@media (max-width: 578px){
  #inicio-punto-recarga{
    background-position-x: -190dvw;
  }

}



/*************************
* quienes somos
*************************/
#inicio-quienes-somos{
  background-image: url('/assets/img/Landing_nosotros.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;

}

#inicio-quienes-somos .titulo-principal-instalaciones{
  padding-top: 45dvh;
}

.div-quienes-somos{
  margin: 0 auto 3rem auto;
  text-align: center;
  width: 50%;
}

.dos-columnas-startup{
  margin-bottom: 3rem;
  width: 70%;
  margin-left: auto;
  margin-right: auto;
}

#banner-quienes-somos{
  min-height: fit-content;
  background: var(--intermedio-oscuro);
  text-align: center;
  padding: 1.5em 0;
}
#banner-quienes-somos p{
  width: 25%;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
}

.subtitulo-h3-somos{
  color: var(--intermedio-oscuro);
}

.tarjetas{
  width: 75%;
  margin-left: auto;
  margin-right: auto;
}
.card-group{
  text-align: center;
  gap: 50px;
}
.card-group:last-child{
  margin-top: 2rem;
}
.card{
  align-items: center;
  border: none;
  border-radius: 1rem;
  -webkit-border-radius: 1rem;
  -moz-border-radius: 1rem;
  -ms-border-radius: 1rem;
  -o-border-radius: 1rem;
}

.card-img-top{
  width: 30%;
}
.card-body{
  padding: 1rem;
}

.dos-columnas-startup{
  align-items: center;
}

#cultura-empresa{
  text-align: center;
}

.quienes-somos-carrusel .shadow-effect{
  padding: 0;
  background-color: transparent;
  
}

.textos-carrusel{
  max-width: 340px;
  margin-top: 3vmin;
  margin-left: auto;
  margin-right: auto;
  background-color: #fff;
  padding: 1rem 0;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}
.textos-carrusel p{
  margin-bottom: 0;
  font-size: 1.4rem;
}
.carousel.slide img{
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}

.dos-columnas-instalaciones.quienes-somos{
  width: 60%;
  gap: 50px;
}


@media (max-width: 992px){
  
  #inicio-quienes-somos .titulo-principal-instalaciones{
    padding-top: 65dvh;
  }
  .dos-columnas-startup{
    width: 100%;
  }
  #banner-quienes-somos p{
    width: 50%;
  }
  
  .tarjetas{
    width: 100%;
  }
  .card-group{
    gap: 20px;
  }

}

@media (max-width: 578px){
  .div-quienes-somos{
    width: 100%;
  }
  .dos-columnas-startup{
    flex-direction: column;
    gap: 20px;
  }
  #banner-quienes-somos p{
    width: 90%;
  }
  #cultura-empresa p{
    margin-bottom: 0;
  }
  .dos-columnas-instalaciones.quienes-somos{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
}



/*****************************
* tesla powerwall
*****************************/
#inicio-tesla-powerwall{
  background-image: url('/assets/img/tesla-powerwall/Tesla_powerwall_landing.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

#inicio-tesla-powerwall .titulo-principal-instalaciones{
  padding-top: 20dvh;
}

.boton-tesla{
  margin-top: 20vmin;
}

#inicio-tesla-powerwall .boton-presupuesto{
  box-shadow: 5px 5px 5px #000;
}
.logo-tesla-contenedor{
  margin-top: -1vmin;
}
.tesla-certified{
  width: 100%;
}
.logo-tesla{
  margin-left: auto;
  width: 15%;
  z-index: 800;
}

@media (max-width: 1500px){
  #inicio-tesla-powerwall .titulo-principal-instalaciones{
    padding-top: 5dvh;
  }
}

@media (max-width: 1400px){
  #inicio-tesla-powerwall .titulo-principal-instalaciones{
    width: 85%;
    padding-top: 0;
  }
  .boton-tesla{
    margin-top: 25vmin;
  }
}

@media (max-width: 992px){
  #inicio-tesla-powerwall{
    background-image: url('/assets/img/tesla-powerwall/Tesla_powerwall_landing_movil.webp');
  }
  #inicio-tesla-powerwall .titulo-principal-instalaciones{
    margin-top: 15vmin;
  }

  .logo-tesla{
    width: 20%;
    
  }
}

@media (max-width: 600px){
  #inicio-tesla-powerwall .titulo-principal-instalaciones{
    margin-top: 40vmin;
  }
  .logo-tesla-contenedor{
    margin-top: 5vmin;
  }
  .boton-tesla{
    left: 5vmin;
    top: 130vmin;
    width: 50%;
  }
  .boton-tesla .boton-presupuesto{
    font-size: 1rem;
    padding: 0.5rem 1rem;
  }

}

@media (max-width: 320px){
  #inicio-tesla-powerwall .titulo-principal-instalaciones{
    margin-top: 10vmin;
  }
}

/*************************
* diagrama bateria tesla
*************************/
@media (max-width: 992px){
  #como-funciona-tesla-powerwall .explicacion-diagrama1{
    flex: 0.5 0.9 40%;
  }
}



/***************************
* descubre tesla powerwall
***************************/
#descubre-el-poder .subtitulo-h4{
  margin-bottom: -5vmin;
}

.dos-columnas-tesla p{
  margin-bottom: 0;
}

.imagen-powerwall{
  width: 100%;
}

.dos-columnas-tesla{
  display: flex;
  align-items: center;
  flex-flow: row nowrap;
}
.grid-imagen{
  width: 40%;
}
.grid-textos{
  width: 55%;
  display: flex;
  flex-flow: row wrap;
  row-gap: 30px;
  column-gap: 50px;
}
.caracteristicas-powerwall{
  width: 180px;
}
.figure-caption{
  margin-left: 55px;
  font-family: 'lt_asus-italic';
  margin-top: -5vmin;
  margin-bottom: 6vmin;
  
}
.figure-caption a{
  font-family: inherit;
}
.ficha-tecnica{
  color: inherit;
}
.ficha-tecnica:hover,
.ficha-tecnica:link,
.ficha-tecnica:visited{
  color:inherit;
}

.grid-textos .row:nth-child(2){
  margin: 3rem 0;
}

.grid-textos .col{
  padding: 0;
}
.grid-textos .row{
  --bs-gutter-x: 0;
}

.icono_tesla{
  width: 40%;
  box-shadow: -3px 5px 10px 0px #D2D2D2;

}
.caracteristicas-powerwall .icono_tesla{
  margin-bottom: 1vmin;
}

.dos-columnas-tesla .boton-solicitar{
  margin-left: 0;
  margin-top: 3vmin;
}
.dos-columnas-tesla .boton-presupuesto{
  font-size: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}


@media (max-width: 1400px){
  .caracteristicas-powerwall{
    width: 160px;
  }
  .dos-columnas-tesla .boton-presupuesto{
    font-size: 1rem;
    padding: 0.5rem 1.5rem;
  }
  .grid-textos {
    gap: 20px;
  }
}

@media (max-width: 992px){
  .caracteristicas-powerwall{
    width: 110px;
  }
  .dos-columnas-tesla{
    flex-direction: column;
  }
  .grid-imagen{
    width: 60%;
  }
  .figure-caption{
    margin-left: 0;
    margin-top: -6vmin;
    margin-bottom: 6vmin;
  }
  .grid-textos{
    width: 100%;
    gap: 30px;
  }
  .dos-columnas-tesla .boton-presupuesto{
    text-align: center;
    font-size: 0.8rem;
  }
  
}

@media (max-width: 600px){
  .grid-imagen{
    width: 100%;
  }
  .figure-caption{
    text-align: center;
  }
  
  .caracteristicas-powerwall{
    width: 42%;
    margin: 0 auto;
    text-align: center;
  }
  .dos-columnas-tesla .caracteristicas-powerwall:last-child{
    margin-bottom: 2rem;
  }
  .caracteristicas-powerwall p{
    line-height: 1.2;
    margin-bottom: 1.5vmin;
  }
  .caracteristicas-powerwall .icono_tesla{
    margin-bottom: 3vmin;
  }
  .caracteristicas-powerwall p:last-child{
    margin-bottom: 5vmin;
    line-height: 1;
  }
  
}

/************************
* formulario primero
************************/


.formulario-tesla .texto-contacto p:last-child{
  padding-top: 0;
  font-size: 1.7rem;
  color: var(--intermedio-claro);
}
.formulario-tesla .texto-contacto p{
  margin-bottom: 0;
  text-align: center;
  font-size: 1.3rem;
  color: var(--intermedio-claro) !important;
  width: 100%;
}
.formulario-tesla .titulo1{
  text-align: center;
}
.formulario-tesla .titulo2{
  text-align: center;
}
.formulario-tesla .izquierda-movil p{
  text-align: center;
}


@media (max-width: 578px){
  .formulario-tesla .titulo1{
    text-align: left;
  }
  .formulario-tesla .titulo2{
    text-align: left;
  }
  .formulario-tesla .izquierda-movil p{
    text-align: left;
  }
}






/************************
* parte del móvil
************************/
.dos-columnas-movil{
  display: flex;
  text-align: center;
  padding-bottom: 10vmin;
  margin-left: auto;
  margin-right: auto;
  justify-content: space-evenly;
  padding-top: 15vmin;
}

.izquierda-movil{
  line-height: 1;
  margin-right: 8vmin;
}

.titulo1{
  color: var(--intermedio-claro);
  letter-spacing: 5px;
  font-weight: 600;
  margin-bottom: 0;
  
}

.titulo2{
  font-size: 50px;
  font-weight: 700;
  margin-bottom: 0;
}

.izquierda-movil p{
  color: #269BCD;
}

.lista-vacia{
  list-style-type: none;
  padding-left: 0;
  line-height: 1.5;
  font-size: 1.2rem;
  color: #fff;
}

.izquierda-movil .lista-vacia{
  margin-top: 5vmin;
}

.foto-movil{
  width: 100%;
  box-shadow: 20px 20px 20px 2px rgba(0, 0, 0, 0.37);
  border-radius:2rem;
  -webkit-border-radius:2rem;
  -moz-border-radius:2rem;
  -ms-border-radius:2rem;
  -o-border-radius:2rem;
}
.formulario-tesla .derecha-movil .imagen-movil{
  width: 100%;
}
.formulario-tesla .derecha-movil{
  width: 20%;
}


@media (max-width: 992px){
  .izquierda-movil{
    margin-right: 0;
    margin-left: 3vmin;
  }
  .desplegable-menu .nav-item:first-child {
    margin-left: 0;
  }
  .formulario-tesla .derecha-movil{
    width: 40%;
  }
  .formulario-tesla .derecha-movil .imagen-movil{
    width: fit-content;
  }
  .formulario-tesla .foto-movil{
    width: 100%;
  }
}

@media (max-width: 600px){


  .formulario-tesla .derecha-movil{
    display: block;
    position: absolute;
    left: 50vmin;
    width: 35%;
    top: 185vmin;
  }

  .izquierda-movil{
    width: 100%;
    margin-bottom: 4vmin;
  }
  .titulo1{
    letter-spacing: normal;
  }

  .lista-vacia{
    font-size: 0.8rem;
    text-align: left;
  }
  .formulario-tesla .foto-movil{
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
}

@media (max-width: 400px){
  .dos-columnas-movil .derecha-movil{
    top: 195vmin;
  }
}

@media (max-width: 370px){
  .dos-columnas-movil .derecha-movil{
    top: 205vmin;
    left: 55vmin;
  }
}

@media (max-width: 330px){
  .dos-columnas-movil .derecha-movil{
    top: 250vmin;
    left: 58vmin;
  }

}




/*********************************
* GRACIAS y AGRADECIMIENTO
*********************************/
#gracias{
  background-image: linear-gradient(30deg, #1B4476, #269BCD);
  height: 94vh;
}

h1{
  font-size: 4rem;
  font-weight: 700;
  color: #09164E;
}
h4{
  font-size: 1.5rem;
  font-weight: 600;
  color: #fff;
}

.gracias{
  padding-top: 20vmin;
}

.imagen-gracias{
  width: 70%;
  vertical-align: middle;
}

.row-gracias{
  gap: 50px;
  
}
.bubble{
  font-size: 1.5rem;
  color: #fff;
  transition: .3s ease-in-out;
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -ms-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
}
.bubble:hover{
  color: #fff;
  text-decoration: underline;
  background: #1B4476;
}

.izquierda-gracias{
  box-shadow: 0px 0px 10px 5px #D2D2D2;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  padding: 2rem 0;
}

.izquierda-gracias{
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 992px){
  .row-gracias{
    margin-right: inherit;
    margin-left: inherit;
  }
  h1{
    font-size: 3.5rem;
  }
  .row-gracias{
    flex-direction: column;
  }
}