:root{
  --color1: rgb(5, 5, 5);
  --color2: #1e3a8a;
  --color3: #b2d8ff;
  --fondo: #f2f2f2;
  --titulos: 33px;
  --margenes: 60px;
  --espacios: 10px;
  --espacios-contenido:45px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family:Verdana, Geneva, Tahoma, sans-serif;
  background: var(--fondo);
}

img{
  vertical-align: top;
}




/* Header */

header{
  width: 100%;
  height:600px;
  background: linear-gradient(to bottom,
  #1e3a8a,
  #b2d8ff,
  rgba(255, 255, 255, 0)
  ), url(img/fondo1.jpg);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

nav{
  width: 100%;
  position: fixed;
  box-shadow: 0 0 10px 0 rgba(0,0,0,.5);
}

.nav1{
  background: transparent;
  height: 80px;
  color:#fff; /*color del texto dentro de este nav*/
}

/*El siguiente estilo aplica a un nombre de clase (nav2) que se asigna mediante JavaScript*/
.nav2{
  background: var(--fondo);
  height:100px;
  color:#000; /*color del texto dentro de este segundo estilo para el nav*/
}

.contenedor-nav{
  display: flex;
  margin: auto; /*el elemento toma el ancho que le doy, y después tomará el espacio sobrante para establecer automáticamente las márgenes*/
  width: 90%;
  justify-content: space-between; /*espacio adecuado entre los diferentes elementos de este contenedor*/
  align-items: center;  /*Los elementos se centran automáticamente con respecto a la parte superior e inferior del contenedor, es decir, en el eje y*/
  max-width:1000px;
  height:inherit;
  overflow: hidden;
}

nav .enlaces a{  /*Aquí estoy diciendo que se aplica el estilo a la etiqueta a de la clase enlaces del elemento nav*/
  display: inline-block;
  padding: 5px 0;
  margin-right: 17px;
  font-size: 17px;
  font-weight: 300;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  color: inherit; /*se hereda el color de texto del nav como se definió ya en nav1*/
}

nav .enlaces a:hover{
  border-bottom: 3px solid #1512ce;
  transition: 0.6s;
}

.logo, .logo img{ height:100px;}

.icono{
  display:none;
  font-size: 24px;
  padding: 23.5px 20px;
}

/*textos*/

.textos{
  width: 80%;
  height: 100%;
  display:flex;
  justify-content: center;
  flex-direction: inherit;
  align-items: center;
  color:black;
  overflow: hidden;
  text-align: center;
}

.textos>h1{
  font-size:80px;
}

.textos>h2{
  font-size: 30px; font-weight: 300; 
}

/* Main */

.contenedor{
  margin:auto;
  padding: var(--margenes) 0;
  width: 90%;
  max-width: 1000px;
  text-align: center;
  overflow: hidden;
}

.contenedor h3{
  font-size: var(--titulos);
  color: var(--color1);
  margin-bottom: var(--espacios);
}

.contenedor p{
  font-size: var(--subtitulos);
  font-weight: 300;
  color: var(--color1);
}

.after::after{
  content:'';
  display: block;
  margin: auto;
  margin-top: var(--espacios);
  width: 100px;
  height: 2px;
  background: var(--color1);
  margin-bottom: var(--espacios-contenido);
}

.card{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  
}

.content-card{
  width: 21%;
  box-shadow: 0 0 6px 0 rgba(4, 23, 110, 0.5);
  overflow: hidden;
  height:400px;
}

.people{
  height: 80%; /* cuánta altura me va a ocupar del content-card */
}

.content-card img{
  width: 100%;
  height: 100%;
  object-fit: cover; /* el objeto reemplazado (la imagen) se redimensiona para ajustarse al al tamaño del div*/
}

.texto-team{
  height: 20%;
  width: 100%;
  padding: var(--espacios) 0;
}

.about{
  background:url(img/freepic.jpg);
  background-repeat: no-repeat;
  background-position-x: center;

}

.servicios{
  display: flex;
  color:black;
  justify-content: space-between;
  margin: auto;
  flex-wrap: wrap; /*responsive, útil para para pantallas más pequeñas*/
  
}

.caja-servicios{
  width: 31%;
  margin: auto;
  text-align: center;
}

.caja-servicios>h4{
  margin-bottom: var(--espacios);
} 

.caja-servicios>p{
  text-align: center;
}

.botones-work{
  overflow: hidden;
}

.botones-work li{
  display: inline-block;
  text-align: center;
  margin-left: var(--espacios);
  margin-bottom: var(--espacios-contenido);
  padding: 6px 12px;
  border: 1px solid var(--color1);
  list-style: none;
  color: var(--color1);
}

.botones-work li:hover{
  background: var(--color1);
  color:#fff;
  cursor: pointer;
}

.botones-work .active{
  background: var(--color1);
  color:#fff;
}

.galeria-work{
  display:flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.cont-work{
  width: 31%;
  box-shadow: 0 0 6px 0 rgba(0,0,0,.5);
  height:300px;
  overflow: hidden;
  margin-bottom: var(--espacios-contenido);
}

.img-work{
  height: 90%;
  width: 100%;
}

.img-work img{
  height: 100%;
  width: 100%;
  object-fit: cover
  ;
}

.textos-work{
  height: 10%;
}

.textos-work h4{
  line-height: 30px;
  font-weight: 300;
}

/*Diseño del footer*/

footer
{background:url(img/footer.jpg);
background-repeat: no-repeat;
background-size: cover;}


.marca-logo{
  width: 25%;
  margin: auto;
  margin-bottom: var(--espacios);
  /*background: yellow;*/
}

.marca-logo img{
  width: 100%;
}

.iconos{
  display: flex;
  margin: auto;
  justify-content: space-around;
  width: 100%;
  /*background: blue;*/
}

.fab{
  font-size:60px;
  color: #FFF;
  margin-bottom: var(--espacios);
  display: inline-block;
  /*background: green;*/
}

footer p{
  margin-top:var(--espacios);
  /*background:#FFF;*/
}
/*
.fa-youtube, .fa-facebook-square, .fa-github{
  color: #fff;
  border: 1px solid red; 
  
} */

/*se usa @media para especificar estilos que solo se reflejarán si se cumplen ciertas condiciones*/
@media screen and (max-width: 700px){                  /*debe ser una pantalla y no tener más de 700px de ancho*/
  .nav2{
    color: #fff;  /*color del texto*/
  }

  .icono{
    display:block;
    cursor: pointer;
  }

  .enlaces{
    position: fixed;
    top:80px;
    background: #2c3e50; /*color de fondo del contenedor de los enlaces del nav*/
    left: 0; /*dentro del nav por el lado izquierdo no tednrá margen*/
    height: 100%;
    transition: 1s;
    width: 0;  /*esconde el div ya que el ancho es 0*/
    overflow: hidden; /*oculta los textos*/
  }

  .enlaces a{
    display: block;
    width: 100%;  /*el 100% de la caja enlances*/
    height: 50px;    /*altura de la caja elemento "a"*/
    padding: 20px;
    text-align: center;
    background: #34495e; /*color de fondo de la caja elemento "a"*/
    color:#fff;
  }

  .textos>h1{font-size: 70px;}
  .textos>h2{font-size:35px;}

  .content-card{     /*2     */
    width: 48%;     /*se redujo el ancho del content-card */
    margin-bottom:var(--margenes);
  }

  :root{
    --margenes: 30px;
  }

}

@media screen and (max-width: 500px){
  :root{
    --espacios-contenido: 25px;
  }

  .content-card{   /*3     */
    width: 90%;   /*se aumentó el tamaño del content-card  */
  }

  .caja-servicios{
    width: 90%;
    margin-bottom: var(--margenes);
  }

  .cont-work{
    width: 85%;
  }

  .marca-logo{
    width: 80%;
  }

  .iconos{
    margin: auto;
  }
  footer {
    position:fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #f5f5f5;
    color: #333;
    text-align: center;
    padding: 10px;
    font-size: 14px;
    font-family: Arial, sans-serif;
  }
}