:root{
    --blanco: #ffffff;
    --oscuro: #212121;
    --primario: #38a2d6;
    --secundario: #757575;
    --verde:#12890b;
}

/**/

html{
    font-size: 62.5%;
    box-sizing: border-box;
    /*scroll-snap-type: y mandatory;*/
}
*, *:before, *::after{
  box-sizing: inherit;
}

h2{
  font-size: 2.8rem;
  text-align: center;
  color: var(--primario);
}

h3{
  font-size: 1.8rem;
  text-align: center;
  color: var(--secundario);
}

.bg{
    font-size: 16px;
    font-family: 'Rajdhani', sans-serif;
    background-image: linear-gradient(to top, #DFE9F3 0%, var(--blanco) 100%);
}
.sinbg{
  font-size: 16px;
  font-family: 'Rajdhani', sans-serif;
}
/* Seleccionamos el elemento nav que contiene todo el menú desplegable*/
nav {
    display: flex; /* Convertimos el elemento en un flex-container */
    font-size: 20px;
    flex-direction: column;/*Convertimos a columnas*/
    justify-content: space-between; /*Alineamos el contenido horizontalmente*/
    text-align: center; /*Centramos el texto*/
    align-items: center; /* Centramos verticalmente los elementos */
    padding: 0.5rem; /* Agregamos un padding a la barra de navegación */
  }
  
  /* Estilizamos el logo */
  nav img {
    padding:3rem 0rem 0rem 0rem; /*Posicionamos el logo*/
    height: 14rem; /* Definimos una altura para el logo */
  }
  
  /* Estilizamos los elementos de la derecha */
  nav ul {
    display: flex; /* Convertimos el elemento en un flex-container */
    flex-direction: column; /*Convertimos a columnas*/
    padding-left: 0; /*Eliminamos el margen a la izquierda*/
    list-style: none; /* Quitamos la viñeta de los elementos de la lista */
  }
  
  /* Estilizamos los elementos de la lista principal */
  nav ul li {
    position: relative; /* Establecemos una posición relativa para poder posicionar los submenús */
    margin-right: 1rem; /* Agregamos un margen entre los elementos */   
  }
  
  /* Estilizamos los submenús */
  nav ul ul {
    position: absolute; /* Establecemos una posición absoluta para poder esconder los submenús */
    top: 100%; /* Posicionamos los submenús debajo de su elemento padre */
    left: 0; /* Los alineamos a la izquierda */
    display: none; /* Escondemos los submenús por defecto */
    background-color: var(--blanco); /* Agregamos un color de fondo para los submenús */
    padding: 0.5rem; /* Agregamos un padding para los submenús */
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* Agregamos una sombra */
  }
  

  /* Estilizamos los elementos de los submenús */
  nav ul ul li {
    margin-right: 0; /* Quitamos el margen de los elementos de los submenús */
  }
  
  /* Estilizamos los enlaces */
  nav a {
    display: block; /* Hacemos que los enlaces ocupen todo el ancho del elemento */
    color: var(--oscuro); /* Definimos un color para los enlaces */
    text-decoration: none; /* Quitamos el subrayado de los enlaces */
    font-weight: bolder; /* Agregamos un peso a la fuente */
    padding: 1.2rem;
    transition: background-color 0.3s ease; /* Agregamos una transición al cambiar el color de fondo */
    border-radius: 0.5rem;
  }
  
  /* Cambiamos el color de fondo al pasar el cursor sobre los enlaces */
  nav a:hover {
    background-color: var(--primario);
  }

  .logo:hover {
    background-color: #ffffff00;

  }
/* .logo, .contenedor1-bg, .contenedor3, .contactopp, .formulario {

  scroll-snap-align: center;
  scroll-snap-stop: always;
}*/
/*modificadores*/

.sombra a{
  margin-top: auto;
}

.sombra p{
  text-align: justify;
}
.contenedor1{
  text-align: center;
  justify-content: space-between;
  padding: 0rem 6rem 0rem 6rem;
  margin-bottom: 5rem;
  background-color: rgba(255, 255, 255, 0.3);
}
.contenedor4{
  text-align: center;
  justify-content: space-between;
  padding: 2rem 6rem 2rem 6rem;
  margin-bottom: 2rem;
  background-color: rgba(255, 255, 255, 0.5);
}
.contenedor1 h1{
    font-weight: bolder;
    margin: 0;
    font-size: 4rem;
    color: var(--primario);
}
.contenedor1 span{
    font-size: 3rem;
    color: #000;
}
.contenedor1 p{
text-align: justify;
margin-bottom: 3rem;
line-height: 1.5;
}


.contenedor2{
  padding: 1rem 3rem 1rem 3rem;
}
.boton1{
  text-decoration: none;
  padding: 0.5rem 5rem 0.5rem 5rem;
  font-size: 2rem;
  background-color: var(--primario);
  border-radius: 0.5rem;
  color: var(--blanco);
  border: none;
}
.boton1:hover{
  background-color:#38a1d6bc;
  cursor: pointer;
}

/*Utilidades*/

.w-100{
  width: 100%;
}
.flex{

  display: flex; 
}
.qs{
  margin-top: 4rem;
}
.alinear-derecha{
  justify-content: flex-end;
}
.redond{
  border-radius: 50%;
}
/**/
.contenedor1-bg{
  padding: 1rem 0rem 1rem 0rem;
  background-image: url(../img/bg1.png);
  background-size:26rem;
  background-position: center;
  background-repeat: no-repeat;
}

.contenedor4-bg{
  padding: 1rem 0rem 1rem 0rem;
  background-image: url(../img/jvceo.png);
  background-size:26rem;
  background-position: center;
  background-repeat: no-repeat;
}
@media (min-width: 900px){

  .contenedor1{
    margin-left: 20rem;
    max-width: 55rem;
    padding: 0rem 2rem 0rem 2rem;
  }
  .contenedor1-bg{
    padding: 3rem 0rem 3rem 0rem;
    background-image: url(../img/bg2.png);
    background-size:86rem;
    background-position: right;
    background-repeat: no-repeat;
  }
  .contenedor4-bg{
    margin-top: 2rem;
    padding: 3rem 0rem 3rem 0rem;
    background-image: url(../img/jvceo.png);
    background-size:29rem;
    background-position: left;
    margin-left: 15%;
    background-repeat: no-repeat;
  }
  .contenedor2{
    padding: 4rem 12rem 2rem 12rem;
  }
  .servicios1{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    column-gap: 2rem;
    justify-content: space-between;
  }
}
.contenedor3{
  padding: 2rem 1rem 2rem 1rem;
  display: flex;
  flex-direction: column;  
  align-items: center;
  
  }
.sombra{
    -webkit-box-shadow: 6px 6px 19px -4px rgba(56,161,214,0.6);
    -moz-box-shadow: 6px 6px 19px -4px rgba(56,161,214,0.6);
    box-shadow: 6px 6px 19px -4px rgba(56,161,214,0.6);
    background-color: var(--blanco);
    border-radius: 2rem;
    margin-top: 2rem;
}

@media (min-width: 650px){

    nav {
      flex-direction: row; /*Convertimos a filas*/
      font-size: 16px;
      text-align: left;
      padding: 0.5rem; /* Agregamos un padding a la barra de navegación */
    }
    nav img {
      padding:1rem 4rem 1rem 4rem; /*Posicionamos el logo*/
      height: 12rem; /* Definimos una altura para el logo */
    }
    nav ul {
      display: flex; /* Convertimos el elemento en un flex-container */
      flex-direction: row;
      list-style: none; /* Quitamos la viñeta de los elementos de la lista */
    }
      /* Mostramos los submenús al pasar el cursor sobre el elemento padre */
    nav ul li:hover > ul {
      display: block; /* Mostramos el submenú */
    }
    nav a {
      display: block; /* Hacemos que los enlaces ocupen todo el ancho del elemento */
      color: var(--oscuro); /* Definimos un color para los enlaces */
      text-decoration: none; /* Quitamos el subrayado de los enlaces */
      font-weight: bold; /* Agregamos un peso a la fuente */
      padding: 0.5rem; /* Agregamos un padding a los enlaces */
      transition: background-color 0.3s ease; /* Agregamos una transición al cambiar el color de fondo */
      border-radius: 0.5rem;
    }
      
    .boton1{
      padding: 0.5rem 2rem 0.5rem 2rem;
    }
    .w-100{
      width: auto;
    }

  .contenedor-campos{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: auto auto 20rem;
    column-gap: 1rem;
  }
  .campo:nth-child(3), .campo:nth-child(4){
    grid-column: 1 / 3;
  }
  .contenedor4{
    margin-left: 15%;
    text-align: left;
    max-width: min(70%,110rem);
    padding: 0rem 2rem 0rem 2rem;
    background-color: rgba(255, 255, 255, 0);
  }
  .contenedor4-bg{
    padding: 3rem 0rem 3rem 0rem;
    background-image: url(../img/jvceo.png);
    background-size:25rem;
    background-position: left;
    margin-left: 12%;
    background-repeat: no-repeat;
  }
  .contenedor4 p{
    margin-bottom: 2rem;
    margin-left: 20rem;
    line-height: 1.2;
    }
  
}
.contenedor3 .iconos{
  height: 12rem;
  width: 12rem;
  background-color: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.contenedor3 p{
  line-height: 2;
  padding-left: 2rem;
  padding-right: 2rem;
}

.contactopp{
  display: flex;
  width: min(50rem, 90%);
  margin: 0 auto; /*Centrar todo el contenido horizontalmente cuando el padre no es un display*/
}

/*Furmulario de contacto*/
.formulario{
  background-color: var(--secundario);
  width: min(60rem,100%);
  margin: 0 auto;
  padding: 3rem;
  border-radius: 2rem;

}
.formulario fieldset{
  border: none; 
}
.formulario legend{
  text-align: center;
  font-size: 1.8rem;
  text-transform: uppercase;
  font-weight: bolder;
  margin-bottom: 2rem;
  color: var(--blanco);
}

.campo label{
  color: var(--blanco);
  font-weight: bold;
  display: block;
}

.campo textarea{
  height: 16rem;
  margin-bottom: 2rem;
}

.input-text{
  width: 100%;
  border: none;
  padding: 0.5rem;
  border-radius: 1rem;
}
.input-text2{
  width: 100%;
  border: none;
  padding: 0.5rem;
  border-radius: 1rem;
}
.enviar .boton1{
  width: 100%;
}

.footer{
  margin-top: 10rem;
  text-align: center;
  font-size: 1.4rem;
}

.imgods{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 16rem;
  margin-bottom: 1rem;
}

/*Servicios INNOZ*/
.contenedor{
  display: grid;
  margin-top: 4rem;
  align-items: center;
  justify-content: center;
}
.contenedor__imagen{
  width: 30rem;
  margin: 0 auto;
  border-radius: 2rem;

}
.contenedor__contenido{
  line-height: 1.5;
  margin-left: 2rem;
  margin-right: 2rem;
  padding-bottom: 2rem;
  text-align: center;
  grid-template-rows: repeat(2,1fr);
  max-width: 60rem;
}
.contenedor__contenido p{
  text-align: left;
  padding-left: 1rem;
  padding-right: 1rem;
  grid-template-rows: repeat(2,1fr);
  max-width: 60rem;
  margin-bottom: 4rem;
}
.contenedor__contenido span{
  font-size: 2.8rem;
  color: var(--secundario);
}

@media (min-width: 900px){
  /*Servicios INNOZ*/
.contenedor{
  margin-top: 6rem;
  display: grid;
  grid-template-columns: repeat(2,1fr);
  column-gap: 2rem;
}
.contenedor__imagen{
  width: 45rem;
  margin: 4rem 0rem 4rem 18rem;
  border-radius: 2rem;

}
.contenedor__contenido{
  text-align: center;
  grid-template-rows: repeat(2,1fr);
  max-width: 60rem;
}
.contenedor__contenido p{
  line-height: 1.5;
  margin-left: 2rem;
  margin-right: 2rem;
  text-align: left;
  grid-template-rows: repeat(2,1fr);
  margin-bottom: 4rem;
}
.contenedor__contenido span{
  font-size: 2.8rem;
  color: var(--secundario);
}
  
}


.btn-wsp{
  position:fixed;
  width:60px;
  height:60px;
  line-height: 63px;
  bottom:4rem;
  right:6rem;
  background:#25d366;
  color:#FFF;
  border-radius:50px;
  text-align:center;
  font-size:35px;
  box-shadow: 0px 1px 10px rgba(0,0,0,0.3);
  z-index:100;
  transition: all 300ms ease;
}
.btn-wsp:hover{
  background: #20ba5a;
}
@media only screen and (min-width:320px) and (max-width:768px){
  .btn-wsp{
      width:63px;
      height:63px;
      line-height: 66px;
      bottom:2rem;
      right:2rem;
}
}

.enlace_limpio{
  border: none;
  font-style: none;
  text-decoration: none;
}