* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Work Sans', sans-serif;
}

html,
body {
   height: 100%;
   scrollbar-gutter: stable;
}

body {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
   background-color: rgb(241, 247, 255);
}

p {
   font-weight: 400;
   line-height: 1.6;
   color: rgb(80, 80, 80);
}

p strong {
   font-weight: 600;
   color: rgb(20, 20, 20);
}

h1.titulos {
   text-align: center;
   margin-bottom: 10px;
   font-size: 32px;
   font-weight: 700;
   letter-spacing: -0.5px;
   color: rgb(40, 40, 40);
}

p.descripcion {
   text-align: center;
   margin-bottom: 30px;
   margin-top: 30px;
}

/* CABECERA */

header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 15px 40px;
   background-color: rgb(255, 255, 255);
   border-bottom: 2px solid rgb(206, 206, 206);
}

header h1 {
   font-size: 26px;
   font-weight: 600;
   letter-spacing: -1px;
   color: rgb(30, 30, 30);
}

header nav ul {
   display: flex;
   align-items: center;
   list-style: none;
   gap: 30px;
}

header nav ul a {
   text-decoration: none;
   color: rgb(89, 89, 89);
   font-weight: 500;
   font-size: 16px;
   letter-spacing: 0.3px;
   transition: all 0.2s ease;
   display: inline-block;
}

header a {
   text-decoration: none;
   color: rgb(0, 0, 0);
   font-weight: 600;
}

header nav ul a:hover {
   transform: scale(1.1);
}

.boton-descarga {
   background-color: rgb(211, 211, 211);
   padding: 10px;
   border-radius: 5px;
   transition: all 0.2s ease;
}

.boton-descarga:hover {
   transform: scale(1.05);
}

/* CONTENIDO */

main {
   flex: 1;
   padding: 40px 60px;
   background-color: rgb(238, 238, 238);
}

/* PORTADA */

.portada {
   box-sizing: border-box;
   width: 80%;
   margin: 0 auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 50px;

   margin-top: 100px;
}

.texto-portada {
   width: 52%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
   text-align: left;
}

.texto-portada h1 {
   font-size: 56px;
   font-weight: 600;
   line-height: 1.05;
   letter-spacing: -1.5px;
   color: rgb(20, 20, 20);
   margin-bottom: 20px;
}

.texto-portada p {
   font-size: 20px;
   max-width: 680px;
   margin-bottom: 20px;
}

.botones-portada {
   display: flex;
   gap: 16px;
}

.boton-primario,
.boton-secundario {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 5px;
   padding: 14px 26px;
   font-weight: 600;
   letter-spacing: 0.5px;
   text-decoration: none;
   width: 180px;

   background-color: rgb(92, 92, 92);
   color: rgb(255, 255, 255);
   transition: all 0.2s ease;
}

.boton-primario:hover,
.boton-secundario:hover {
   transform: translateY(-2px);
   background-color: rgb(61, 61, 61);
}

.imagen-portada {
   width: 100%;
   max-width: 710px;
}

.imagen-portada img {
   width: 100%;
   border-radius: 10px;
}

/* PROYECTOS */

.section-proyectos {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;

   gap: 30px;
}

.tarjeta-proyecto {
   background-color: rgb(255, 255, 255);
   border-radius: 5px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
   width: 60%;
}

.tarjeta-proyecto h3 {
   font-size: 20px;
   font-weight: 700;
   color: rgb(40, 40, 40);
   margin: 15px;
}

.tarjeta-proyecto p {
   color: rgb(68, 68, 68);
   margin: 15px;
   line-height: 1.5;
}

.enlaces-proyecto {
   display: flex;
   justify-content: flex-end;
   gap: 5px;
}

.enlaces-proyecto a {
   margin: 10px;
   color: rgb(51, 51, 51);
   background-color: rgb(211, 211, 211);
   padding: 10px;
   border-radius: 4px;
   text-decoration: none;
   font-weight: 600;
   transition: all 0.2s ease;
}

.enlaces-proyecto a:hover {
   transform: scale(1.1);
}

/* EXPERIENCIA */

.experiencia {
   text-align: center;
}

.experiencia img {
   margin-top: 100px;
   height: 300px;
}

/* CONTACTO */

.formulario-contacto {
   padding: 40px 60px;
   text-align: left;
}

.formulario-contacto form {
   max-width: 550px;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   gap: 18px;
}

.grupo-formulario {
   text-align: left;
}

.grupo-formulario label {
   display: block;
   color: rgb(51, 51, 51);
   margin-bottom: 8px;
   font-weight: 600;
}

.grupo-formulario input,
.grupo-formulario textarea {
   width: 100%;
   padding: 12px 15px;
   border: 1px solid rgb(204, 204, 204);
   border-radius: 5px;
   font-size: 16px;
   background-color: rgb(249, 249, 249);
}

.grupo-formulario input:focus,
.grupo-formulario textarea:focus {
   outline: none;
   border-color: rgb(46, 46, 46);
}

.formulario-contacto button {
   background-color: rgb(89, 89, 89);
   color: rgb(255, 255, 255);
   padding: 15px 35px;
   border: none;
   border-radius: 5px;
   font-size: 16px;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s ease;
   align-self: center;
}

.formulario-contacto button:hover {
   background-color: rgb(51, 51, 51);
}

/* HABILIDADES */

.grilla-habilidades {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 25px;
   padding: 40px 60px;
}

.categoria-habilidad {
   flex: 1 1 320px;
   min-width: 300px;
   max-width: 360px;
   background-color: rgb(255, 255, 255);
   border-radius: 8px;
   padding: 25px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.categoria-habilidad h3 {
   font-size: 20px;
   font-weight: 700;
   color: rgb(40, 40, 40);
   margin-bottom: 20px;
   padding-bottom: 10px;
   border-bottom: 2px solid rgb(240, 240, 240);
}

.elementos-habilidad {
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.elemento-habilidad {
   display: flex;
   align-items: flex-start;
   gap: 12px;
}

.elemento-habilidad img {
   width: 35px;
   height: 35px;
   object-fit: contain;
   margin-top: 2px;
}

.info-habilidad {
   display: flex;
   flex-direction: column;
   gap: 6px;
   flex: 1;
}

.encabezado-habilidad {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 8px;
}

.porcentaje-progreso {
   font-size: 14px;
   font-weight: 600;
   color: rgb(54, 54, 54);
}

.barra-progreso {
   width: 100%;
   height: 6px;
   background-color: rgb(224, 224, 224);
   border-radius: 3px;
}

.relleno-progreso {
   height: 100%;
   background: rgb(54, 54, 54);
   border-radius: 3px;
   transition: width 0.3s ease;
}

/* SOBRE MI */

.sobremi {
   padding: 40px 60px;
   border-radius: 5px;
   width: 70%;
   margin: 0 auto;
   text-align: center;
   line-height: 1.8;
}

/* PIE */

footer {
   display: flex;
   justify-content: center;
   gap: 80px;
   padding: 20px 0;
   border-top: 2px solid rgb(206, 206, 206);
   background-color: rgb(255, 255, 255);
}

footer a img {
   height: 30px;
}

/* RESPONSIVE */

@media (max-width: 768px) {
   header {
      flex-direction: column;
      gap: 20px;
      padding: 20px;
   }

   header nav ul {
      flex-wrap: wrap;
      justify-content: center;
      gap: 15px;
   }

   main {
      padding: 20px;
   }

   .portada {
      flex-direction: column;
      width: 95%;
      gap: 40px;
      margin-top: 40px;
   }

   .texto-portada {
      width: 100%;
      align-items: center;
      text-align: center;
   }

   .texto-portada h1 {
      font-size: 36px;
   }

   .texto-portada p {
      font-size: 18px;
   }

   .botones-portada {
      justify-content: center;
      flex-wrap: wrap;
   }

   .tarjeta-proyecto {
      width: 95%;
   }

   .experiencia img {
      margin-top: 40px;
      height: auto;
      max-width: 90%;
   }

   .formulario-contacto {
      padding: 20px 15px;
   }

   .grilla-habilidades {
      padding: 20px 15px;
   }

   .categoria-habilidad {
      flex: 1 1 100%;
      min-width: 100%;
   }

   .sobremi {
      width: 95%;
      padding: 20px;
   }

   footer {
      gap: 30px;
      flex-wrap: wrap;
   }
}