/** Variables **/
:root {
  --blanco: #FFFFFF;
  --negro: #000000;
  --gris: #c0c0c0;

  --desvanecido: rgb(165,3,255);
  --gradiente: linear-gradient(330deg, rgba(165,3,255,0.5) 5%, rgba(3,6,239,1) 52%, rgba(255,0,110,0.3) 89%); 

  --fuente: Poppins, -apple-system, BlinkMacSystemFont, 
  "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", 
  "Helvetica Neue", sans-serif;
}

/** Globales y Utilidades **/
html {
  box-sizing: border-box;
  font-size: 62.5%;
}
*, *:before, *:after {  
  box-sizing: inherit;
}

body {
  font-size: 2.5rem;
  font-family: var(--fuente);
  line-height: 2;
  /* background-color: var(--gris); */
}

h1, h2 , h3 {
  font-family: var(--fuente);
  line-height: 1.2;
}
h1 {
  font-size: 3.8rem;
  margin: 0;
  padding: 1rem;
  color: var(--blanco);
  /* text-align: center; */
}
h2 {
  font-size: 3.5rem;
}
h3 {
  font-size: 2.8rem;
}

img {
  width: 100%;
}

a {
  text-decoration: none;
}

.no-margin {
  margin: 0;
}

.no-padding {
  padding: 0;
}

.contenedor {
  max-width: 120rem;
  width: 80%;
  margin: 0 auto;
}

.contenedor__top {
  max-width: 120rem;
  width: 80%;
  margin: 0 auto;
}

.sombra {           /*Sombra de contenedor*/
  -webkit-box-shadow: 10px 10px 16px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 10px 10px 16px 0px rgba(0,0,0,0.75);
  box-shadow: 10px 10px 16px 0px rgba(0,0,0,0.75);
  background-color: var(--blanco);
  padding: 2rem;
  border-radius: 0.5rem;
  margin-top: 5rem;
}

/** CSS **/
.header {
  background: var(--gradiente);
  /* background-color: rgb(76, 63, 255); */
  box-shadow: .1rem .2rem .3rem #333;
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
}

.barra {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0;
}

.nav {
  display: none;
}
@media (min-width: 768px) {
    .nav {
      display: flex;
      gap: 3rem;
    }
}
.nav.activo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.centrado {
  margin: 0 auto; /** No hagais esto **/
}
@media (min-width: 768px) {
  .centrado {
    margin: 0;
  }   
}

.nav__enlace {
  display: block;
  text-align: center;
  font-size: 2rem;
  color: var(--blanco);
  font-weight: 700;
}
.nav__enlace:hover {
  color: black;
}

/* Estilos para el botón de hamburguesa */
.hamburger {
  display: block;
  cursor: pointer;
  padding: 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 40px;
  height: 40px;
}
@media (min-width: 768px) {
  .hamburger {
    display: none;
  }
}
.hamburger span {
  display: block;
  width: 100%;
  height: 4px;
  background-color: var(--blanco);
  transition: all 300ms;
  transform-origin: 0px 100%;
}
.activebar1 {
  transform: rotate(45deg) translate(0px, 0px);
}
.activebar2 {
  opacity: 0;
  margin-left: -30px;
}
.activebar3 {
  transform: rotate(-45deg) translate(0.6px, 2px);
}


.contenido__header {
  margin-top: 10rem;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  text-align: center;
}
@media (min-width: 768px) {
  .contenido__header {
    margin-top: 10rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 3rem;
    border-bottom: 1px solid var(--gris);
  }
}
.resumen {
  max-width: 50rem;
}
.resumen__perfil {
  width: 20rem;
  height: 20rem;
  border-radius: 20%;
  border: 1px solid var(--negro);
}

/*Tecnologias*/
.tecnos {
  background-color: #333;
}

.grid-tecs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-items: center;
  gap: 5rem;
  margin-top: 5rem;
}
@media (min-width: 830px) {
    .grid-tecs {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 5rem;
      margin-top: 5rem;
    }
}

.tec {
  display: block;
  height: 8rem;
  width: 8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.tec__js {
  height: 7rem;
  width: 7rem;
}
@media (min-width: 768px) {
  .tec {
    display: block;
    height: 12rem;
    width: 12rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .tec__js {
    height: 11rem;
    width: 11rem;
  }
}


/*Proyectos*/
.proyectos {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .enlaces {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 1rem;
    gap: 2rem;
    /* border-bottom: 1px solid var(--gris); */
  }
}
.enlaces:last-child {
  border-bottom: none;
}

.enlaces__titulo {
  padding: 0;
  margin: 1.5rem;
}

.enlaces__proyectos--img {
  max-width: 50rem;
  max-height: 25rem;
}
.enlaces__proyectos--txt {
  color: var(--negro);
}

.herramientas {
  border-bottom: 1px solid var(--gris);
}
.herramientas:last-child {
  border-bottom: none;
}
.herramientas__icon {
  max-width: 5rem;
  max-height: 5rem;
}


/** Contacto **/
.contacto {
  display: flex;
  justify-content: center;
  margin-top: 5rem;
  gap: 1rem;
}
.contacto-txt {
  text-align: center;
}

.icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3rem;
  height: 3rem;
  transition: fill 0.5s;
}
.icon:hover {
  fill: var(--desvanecido );
}

.tel {
  line-height: 0;
  margin-top: 1.2rem;
  font-size: 2rem;
}
.email {
  line-height: 0;
  margin-top: 1.2rem;
  margin-bottom: 5rem;
  font-size: 2rem;
}
@media (min-width: 768px) {
  .tel {
    line-height: 0;
    margin-top: 1.2rem;
  }
  .email {
    line-height: 0;
    margin-top: 1.2rem;
    margin-bottom: 5rem;
  }

}


/** Footer **/
.pie {
  text-align: center;
  color: var(--negro);
}