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


/******************
* root
******************/
:root{
  --fuente: 2rem;
}

/*****************
* instalaciones
*****************/
body{
  background-image: linear-gradient(180deg, #FFFFFF 30%, #cce4f0d2);
  background-attachment: fixed;
}

@media (max-width: 992px){
  section{
    min-height: 100dvh;
  }
  #formulario-contacto2{
    min-height: fit-content;
  }
}

.container{
  padding-top: 5vmin;
}

.azul{
  color: #269BCD;
  font-family: 'lt_asus-italic';
}

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


.navbar{
  background: #FFFFFF;
  z-index: 1000;

}

.dropdown-menu.show{
  text-align: start;
  z-index: 10000;
}


/*****************
* titulos
*****************/
.titulo-principal-instalaciones{
  /* position: absolute;
  top: 40vh;
  left: 10vw; */
  padding-top: 35dvh;
}

@media (max-width: 578px){
  .titulo-principal-instalaciones{
    padding-top: 15dvh;
  }
}

.titulo-instalaciones{  
  font-size: 5rem;
  color: #FFF;
  font-weight: 700;
  margin: 0;
  width: 75%;
  font-family: Blinker;
  text-shadow:#000000 5px 5px 5px;
}

@media (max-width: 1400px){
  .titulo-instalaciones{
    width: 100%;
  }
}

@media (max-width: 992px){
  .titulo-instalaciones{
    font-size: calc(var(--fuente) * 3);
    width: 100%;
  }
}
@media (max-width: 578px){
  :root{
    --fuente: 1.1rem;
  }
}


.subtitulo-instalaciones{
  font-size: 3.4rem;
  color: #FFF;
  font-weight: 700;
  text-shadow:#000 5px 5px 5px;
}

.subtitulo-h2{
  font-size: 2.8rem;
  text-align: center;
  color: #1B4476;
  font-weight: 600;
  font-family: Blinker !important;
}
.oscuro{
  color: #FFF;
}

@media (max-width: 578px){
  .subtitulo-h2{
    font-size: calc(var(--fuente) * 1.5);
  }
}

.subtitulo-h2-quienes-somos{
  font-size: 2.8rem;
  text-align: center;
  color: #09164E;
  font-weight: 700;
  font-family: 'Blinker' !important;

}

.subtitulo-h3{
  font-size: var(--fuente);
  color: #32659D;
  font-weight: 600;
  font-family: 'Blinker' !important;
  letter-spacing: 1px;
}
.subtitulo-h3-oscuro{
  font-size: var(--fuente);
  color: #FFF;
  font-weight: 600;
  font-family: 'Blinker' !important;
  letter-spacing: 1px;
}
.subtitulo-h3-banner{
  font-size: calc(var(--fuente) * 1.3);
  font-weight: 600;
}


.subtitulo-h4{
  color: #269BCD;
  /* font-size: 1.5rem; */
  font-size: calc(var(--fuente) * 0.7);
  
}

.subtitulo-h4-punto-recarga{
  color: #269BCD;
  /* font-size: 1.5rem; */
  font-size: calc(var(--fuente) * 0.7);
}

p{
  font-size: 1.2rem;
  color: var(--kaylon);
}
.parrafo-banner{
  font-size: calc(var(--fuente) * 0.6);
  width: 600;
  margin-bottom: 0;
}



/*******************
* listas
*******************/
.lista-check{
  list-style-type: none;

}
.lista-check > li::before{
  display: inline-block;
  content:'';
  width: 2rem;
  height: 2rem;
  background-image: url('/assets/img/iconos/ICON_check.svg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  vertical-align: middle;
}

.lista-flecha{
  list-style-type: none;
}

.lista-flecha > li::before{
  display: inline-block;
  content:'';
  width: 2rem;
  height: 2rem;
  background-image: url('/assets/img/iconos/ICON_flecha.svg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  vertical-align: middle;
}


/*********************
* botones
*********************/
.boton-presupuesto-instalaciones{
  text-decoration: none;
  color: #FFF;
  background: linear-gradient(90deg, #32659D, #269BCD);
  padding: 0.5rem 2rem;
  font-weight: 500;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  width: fit-content;
  font-size: 1.5rem;
  font-weight: 600;
  font-family: 'Blinker';
}

/*********************
* imagenes
*********************/
.imagen{
  width: 100%;
}

/******************
* pantallas
******************/
.pantalla-movil{
  display: none;
}

@media (max-width: 992px){
  .pantalla-movil{
    display: block;
  }
  .pantalla-escritorio{
    display: none;
  }
}

/*************************
* comunidad de vecinos
*************************/
  /*****************
  * inicio
  *****************/
    #inicio-comunidad-vecinos{
      background-image: url('../img/Landing_vecinales.webp');
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
      
    }

    /******************
    * diagrama
    ******************/
    .explicacion-diagrama{
      gap: 20px;
      margin-bottom: 2rem;
      text-align: center;
    }

    .explicacion-diagrama1{
      display: flex;
      flex-direction: column;
      background: #fff;
      padding: 2rem;
      border-radius: 10px;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      -ms-border-radius: 10px;
      -o-border-radius: 10px;
    }
    .explicacion-diagrama1 p{
      margin-bottom: 0;
    }

    @media (max-width: 578px){
      .explicacion-diagrama{
        flex-direction: column;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
      }
    }


    /*******************
    * marco
    *******************/
    .marco{
      width: 60%;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: -10dvh;
      position: relative;
      z-index: 10;
    }

    .marco-izquierda{
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
      background: #FFF;

      display: flex;
      justify-content: center;

    }

    .icono-info{
      width: 60%;
      
    }
    .marco-derecha{
      display: flex;
      justify-content: center;

      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
      background: #269BCD;
      padding: 1rem;
    }

    .marco-derecha > p{
      margin-bottom: 0;
      color: #FFF;
      font-family: 'lt_asus-italic';
      line-height: 1.3;

      padding: 1rem 0;
    }

    @media (max-width: 992px){
      .marco{
        width: 100%;
      }
    }
    @media (max-width: 578px){
      .icono-info{
        width: 90%;
      }
    }

    /**********************
    * nos adaptamos vecinos
    **********************/
    #nos-adaptamos-vecinos{
      background-image: url('../img/Vecinal_fondo.webp');
      background-position: right bottom;
      background-size: 45%;
      background-repeat: no-repeat;
      background-color: #162238;
    }

    @media (max-width: 992px){
      #nos-adaptamos-vecinos{
        background-size: 100%;
        padding-bottom: 10dvh;
      }
    }

    .dos-columnas-instalaciones-vecinos{
      padding-top: 5dvh;
      width: 90%;
      gap: 50px;
    }

    @media (max-width: 992px){
      .dos-columnas-instalaciones-vecinos{
        width: 100%;
        flex-direction: column;
      }
    }
    @media (max-width: 992px){
      .dos-columnas-instalaciones-vecinos{
        margin-left: 0;
        margin-right: 0;
      }
    }



    .columna1-instalaciones{
      text-align: center;
      background: #fff;
      padding: 2rem 3rem;
      border-radius: 10px;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      -ms-border-radius: 10px;
      -o-border-radius: 10px;
    }

    @media (max-width: 992px){
      .columna1-instalaciones{
        width: 50%;
      }
    }
    @media (max-width: 578px){
      .columna1-instalaciones{
        width: 90%;
        margin-left: auto;
        margin-right: auto;
      }
    }

    .nos-adaptamos-titulo{
      padding-top: 15dvh;
      text-align: left;
    }

    @media (max-width: 992px){
      .nos-adaptamos-titulo{
        padding-top: 8dvh;
      }
    }
    .parrafo-principal{
      text-align: center;
      font-family: 'lt_asus-italic';
      font-weight: 500;
    }
    .parrafo-titulo{
      color: var(--intermedio-oscuro);
      font-size: 1.5rem;
      font-family: 'lt_asus-bolditalic';
      font-weight: 700;
    }


    /**********************
    * carrusel de imágenes
    **********************/
    .owl-carousel .owl-dots .owl-dot span{
      background: var(--intermedio-claro);
    }
    @media (max-width: 992px){
      .owl-carousel .owl-dots .owl-dot span{
        margin-top: 4dvh;
      }
      #carrusel-imagenes{
        min-height: fit-content;
      }
    }


    /*********************
    * preguntas frecuntes
    *********************/
    #preguntas-frecuentes{
      
      background-image: url('/assets/img/Kaylon_logo_faqs.svg') !important;
      background-repeat: no-repeat;
      background-position: center bottom;
      background-size: 53%;
    }
    @media (max-width: 992px){
      #preguntas-frecuentes{
        min-height: auto;
        padding-bottom: 15dvh;
      }
    }


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

  /**************************
  * nos adaptamos industria
  **************************/
  #nos-adaptamos-industria{
    background-image: url('/assets/img/empresas_fondo.webp');
    background-repeat: no-repeat;
    background-position: right center;
    background-size:45%;
    background-color: #162238;
  }

  .tres-columnas{
    gap: 20px;
    width: 90%;
  }
  .columna-proyectos-industriales .imagen{
    border-radius: 1rem;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
    margin-bottom: 3dvh;
  }

  .debajo-imagen{
    color: #fff;
    text-align: center;
    font-size: calc(var(--fuente) * 0.7);
  }

  @media (max-width: 992px){
    #nos-adaptamos-industria{
      min-height: max-content;
      background-position: bottom right;
    }
    #nos-adaptamos-industria .nos-adaptamos-titulo{
      padding-top: 0;
      margin-bottom: 3dvh;
    }
  }

  @media (max-width: 578px){
    .tres-columnas{
      margin-left: auto;
      margin-right: auto;
      flex-direction: column;
    }
    #nos-adaptamos-industria{
      background-image: none;
    }
    .columna-proyectos-industriales{
      width: 80%;
      margin-left: auto;
      margin-right: auto;
    }
  }

  /*****************
  * banner
  *****************/
  /* #banner{
    min-height: fit-content;
    background-color: var(--intermedio-oscuro) !important;
    text-align: center;
  }
  .banner{
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 2vmin;
    padding-bottom: 2vmin;
  }
  .banner *{
    color: #fff;
  } */

  #banner{
    min-height: fit-content;
    background: var(--intermedio-oscuro);
  }

  #banner *{
    color: #fff;
  }
  
  .row.banner{
    --bs-gutter-x: none;
  }
  
  .banner{
    background: #1B4476;
    
  }

  .banner-empresas{
    width: 50%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  
  .banner-izquierda{
    display: flex;
    padding: 1rem 0 0 1rem;
    justify-content: end;
  }
  .parrafo-banner-principal{
    font-size: 2.5rem;
    font-weight: 600;
    color: #FFF;
    text-align: right;
    width: 70%;
    line-height: 1.3;
  }
  
  .banner-derecha{
    padding: 1rem 0 2rem 5rem;
  }
  
  .parrafo-principal-banner-derecha{
    font-size: 1.3rem;
    font-weight: 600;
    color: #FFF;
    width: 50%;
  }
  
  .dentro-banner{
    color: #9CDEEB;
    font-weight: 300;
  }

  @media (max-width: 1400px){
    .parrafo-banner-principal{
      width: 90%;
    }
    .parrafo-principal-banner-derecha{
      width: 90%;
    }
  }


  @media (max-width: 992px){
    .banner{
      width: 90%;
      padding-bottom: 0;
    }
    .row.banner{
      width: 100%;
    }
    .parrafo-banner-principal{
      width: 100%;
      font-size: 2rem;
    }
  }

  @media (max-width: 578px){
    .row.banner{
      flex-direction: column;
      align-items: center;
    }
    .banner-izquierda{
      padding: 1rem 1rem 0 1rem;
      align-items: center;
    }
    .parrafo-banner-principal{
      font-size: 1.6rem;
      text-align: left;
    }
    .banner-derecha{
      padding: 0 1rem 1rem 1rem;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .parrafo-principal-banner-derecha{
      width: 100%;
    }
    .banner-empresas{
      width: 100%;

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


/******************
* video del dron
******************/
.video-del-dron{
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  width: 100%;
  border: none;
}

.video{
  width: 70%;
  margin-left: auto;
  
}

.subtitulo-h2-dron{
  font-size: 2.8rem;
  text-align: center;
  color: #1B4476;
  font-weight: 700;
  font-family: 'Blinker';
}

.texto-dron{
  display: flex;
  flex-direction: column;
  justify-content: center;  
  
}

.titulo-texto-dron{
  font-size: 2rem;
  
}

.dentro-texto-dron{
  font-size: 1.4rem;
}


@media (max-width: 992px){
  .video-dron .pantalla-movil{
    display: none;
  }
  .video-dron .pantalla-escritorio{
    display: flex;
  }
  .video{
    width: 100%;
  }
  .subtitulo-h2-dron{
    line-height: 1;
    margin-bottom: 0;
  }
}

@media (max-width: 578px){
  .video-dron .pantalla-movil{
    display: flex;
  }
  .video-dron .pantalla-escritorio{
    display: none;
  }
  .video-dron{
    flex-direction: column;
    align-items: center;
  }
  .video-dron .col:nth-child(2){
    padding-left: 0;
    padding-right: 0;
  }
  .video{
    width: 100dvw;
    margin-top: 4vmin;
  }
  .video-del-dron{
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
  }
  .texto-dron{
    align-items: center;
  }
  .subtitulo-h2-dron{
    font-size: 1.8rem;
  }
}


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

@media (max-width: 578px){
  #inicio-unifamiliares{
    background-position-y: center;
    background-position-x: -175vmin;
  }
}

/*******************************
* nos adaptamos unifamiliares
*******************************/
#nos-adaptamos{
  background-color: #162238;
  background-image: url('/assets/img/unifamiliar-fondo.webp');
  background-position: right bottom;
  background-size: 70%;
  background-repeat: no-repeat;
}

#nos-adaptamos .dos-columnas-instalaciones-vecinos{
  width: 70%;
}

@media (max-width: 992px){
  #nos-adaptamos .dos-columnas-instalaciones-vecinos{
    width: 100%;
  }
  #nos-adaptamos{
    min-height: auto;
  }
  #nos-adaptamos .subtitulo-h2{
    padding-top: 0;
    margin-top: 0;
  }
}


/*********************
* carrusel aisladas
*********************/
#carrusel-aisladas .shadow-effect{
  padding: 0 0 0.5vmin 0;
}