/* ===== GOOGLE FONTS =====*/

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
/*===== VARIABLES CSS =====*/

:root {
   --header-height: 3rem;
   --nav-width: 324px;
   /*===== Font weight =====*/
   --font-medium: 500;
   --font-semi-bold: 600;
   --font-bold: 700;
   /*===== Colors =====*/
   --first-color: #ec1839;
   --first-color-dark: #662616;
   --first-color-darken: #290f09;
   --text-color: #54423d;
   --first-color-light: #eae7e6;
   --first-color-lighten: #fffafa;
   --first-color-text: #e9e9e9;
   /*===== Font and typography =====*/
   --body-font: "Poppins", sans-serif;
   --h1-font-size: 1.8rem;
   --h2-font-size: 1.25rem;
   --h3-font-size: 1rem;
   --normal-font-size: 0.938rem;
   --small-font-size: 0.813rem;
   --smaller-font-size: 0.75rem;
   /*===== Margenes =====*/
   --mb-1: 0.5rem;
   --mb-2: 1rem;
   --mb-3: 1.5rem;
   --mb-4: 2rem;
   --mb-5: 2.5rem;
   /*===== z index =====*/
   --z-fixed: 100;
}

@media screen and (min-width: 768px) {
   :root {
      --h1-font-size: 2.4rem;
      --h2-font-size: 1.5rem;
      --h3-font-size: 1.25rem;
      --normal-font-size: 1.1rem;
      --small-font-size: 1rem;
      --smaller-font-size: 0.813rem;
   }
}

/* ==== BASE ==== */

*,
::before,
::after {
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
}

body {
   margin: var(--header-height) 0 0 0;
   font-family: var(--body-font);
   font-size: var(--normal-font-size);
   font-weight: var(--font-medium);
   background-color: #222222;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 304 304' width='304' height='304'%3E%3Cpath fill='%23e9e9e9' fill-opacity='0.02' d='M44.1 224a5 5 0 1 1 0 2H0v-2h44.1zm160 48a5 5 0 1 1 0 2H82v-2h122.1zm57.8-46a5 5 0 1 1 0-2H304v2h-42.1zm0 16a5 5 0 1 1 0-2H304v2h-42.1zm6.2-114a5 5 0 1 1 0 2h-86.2a5 5 0 1 1 0-2h86.2zm-256-48a5 5 0 1 1 0 2H0v-2h12.1zm185.8 34a5 5 0 1 1 0-2h86.2a5 5 0 1 1 0 2h-86.2zM258 12.1a5 5 0 1 1-2 0V0h2v12.1zm-64 208a5 5 0 1 1-2 0v-54.2a5 5 0 1 1 2 0v54.2zm48-198.2V80h62v2h-64V21.9a5 5 0 1 1 2 0zm16 16V64h46v2h-48V37.9a5 5 0 1 1 2 0zm-128 96V208h16v12.1a5 5 0 1 1-2 0V210h-16v-76.1a5 5 0 1 1 2 0zm-5.9-21.9a5 5 0 1 1 0 2H114v48H85.9a5 5 0 1 1 0-2H112v-48h12.1zm-6.2 130a5 5 0 1 1 0-2H176v-74.1a5 5 0 1 1 2 0V242h-60.1zm-16-64a5 5 0 1 1 0-2H114v48h10.1a5 5 0 1 1 0 2H112v-48h-10.1zM66 284.1a5 5 0 1 1-2 0V274H50v30h-2v-32h18v12.1zM236.1 176a5 5 0 1 1 0 2H226v94h48v32h-2v-30h-48v-98h12.1zm25.8-30a5 5 0 1 1 0-2H274v44.1a5 5 0 1 1-2 0V146h-10.1zm-64 96a5 5 0 1 1 0-2H208v-80h16v-14h-42.1a5 5 0 1 1 0-2H226v18h-16v80h-12.1zm86.2-210a5 5 0 1 1 0 2H272V0h2v32h10.1zM98 101.9V146H53.9a5 5 0 1 1 0-2H96v-42.1a5 5 0 1 1 2 0zM53.9 34a5 5 0 1 1 0-2H80V0h2v34H53.9zm60.1 3.9V66H82v64H69.9a5 5 0 1 1 0-2H80V64h32V37.9a5 5 0 1 1 2 0zM101.9 82a5 5 0 1 1 0-2H128V37.9a5 5 0 1 1 2 0V82h-28.1zm16-64a5 5 0 1 1 0-2H146v44.1a5 5 0 1 1-2 0V18h-26.1zm102.2 270a5 5 0 1 1 0 2H98v14h-2v-16h124.1zM242 149.9V160h16v34h-16v62h48v48h-2v-46h-48v-66h16v-30h-16v-12.1a5 5 0 1 1 2 0zM53.9 18a5 5 0 1 1 0-2H64V2H48V0h18v18H53.9zm112 32a5 5 0 1 1 0-2H192V0h50v2h-48v48h-28.1zm-48-48a5 5 0 0 1-9.8-2h2.07a3 3 0 1 0 5.66 0H178v34h-18V21.9a5 5 0 1 1 2 0V32h14V2h-58.1zm0 96a5 5 0 1 1 0-2H137l32-32h39V21.9a5 5 0 1 1 2 0V66h-40.17l-32 32H117.9zm28.1 90.1a5 5 0 1 1-2 0v-76.51L175.59 80H224V21.9a5 5 0 1 1 2 0V82h-49.59L146 112.41v75.69zm16 32a5 5 0 1 1-2 0v-99.51L184.59 96H300.1a5 5 0 0 1 3.9-3.9v2.07a3 3 0 0 0 0 5.66v2.07a5 5 0 0 1-3.9-3.9H185.41L162 121.41v98.69zm-144-64a5 5 0 1 1-2 0v-3.51l48-48V48h32V0h2v50H66v55.41l-48 48v2.69zM50 53.9v43.51l-48 48V208h26.1a5 5 0 1 1 0 2H0v-65.41l48-48V53.9a5 5 0 1 1 2 0zm-16 16V89.41l-34 34v-2.82l32-32V69.9a5 5 0 1 1 2 0zM12.1 32a5 5 0 1 1 0 2H9.41L0 43.41V40.6L8.59 32h3.51zm265.8 18a5 5 0 1 1 0-2h18.69l7.41-7.41v2.82L297.41 50H277.9zm-16 160a5 5 0 1 1 0-2H288v-71.41l16-16v2.82l-14 14V210h-28.1zm-208 32a5 5 0 1 1 0-2H64v-22.59L40.59 194H21.9a5 5 0 1 1 0-2H41.41L66 216.59V242H53.9zm150.2 14a5 5 0 1 1 0 2H96v-56.6L56.6 162H37.9a5 5 0 1 1 0-2h19.5L98 200.6V256h106.1zm-150.2 2a5 5 0 1 1 0-2H80v-46.59L48.59 178H21.9a5 5 0 1 1 0-2H49.41L82 208.59V258H53.9zM34 39.8v1.61L9.41 66H0v-2h8.59L32 40.59V0h2v39.8zM2 300.1a5 5 0 0 1 3.9 3.9H3.83A3 3 0 0 0 0 302.17V256h18v48h-2v-46H2v42.1zM34 241v63h-2v-62H0v-2h34v1zM17 18H0v-2h16V0h2v18h-1zm273-2h14v2h-16V0h2v16zm-32 273v15h-2v-14h-14v14h-2v-16h18v1zM0 92.1A5.02 5.02 0 0 1 6 97a5 5 0 0 1-6 4.9v-2.07a3 3 0 1 0 0-5.66V92.1zM80 272h2v32h-2v-32zm37.9 32h-2.07a3 3 0 0 0-5.66 0h-2.07a5 5 0 0 1 9.8 0zM5.9 0A5.02 5.02 0 0 1 0 5.9V3.83A3 3 0 0 0 3.83 0H5.9zm294.2 0h2.07A3 3 0 0 0 304 3.83V5.9a5 5 0 0 1-3.9-5.9zm3.9 300.1v2.07a3 3 0 0 0-1.83 1.83h-2.07a5 5 0 0 1 3.9-3.9zM97 100a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-48 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 96a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-144a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM49 36a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM33 68a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 240a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm80-176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm112 176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 180a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 84a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'%3E%3C/path%3E%3C/svg%3E");
   color: var(--first-color-text);
   line-height: 1.6;
}

h1,
h2,
h3,
p {
   margin: 0;
}

h3 {
   font-weight: var(--font-semi-bold);
}

ul {
   margin: 0;
   padding: 0;
   list-style: none;
}

a {
   text-decoration: none;
   color: var(--text-color);
}

img {
   max-width: 100%;
   height: auto;
   display: block;
}

/*===== CLASS CSS ===== */
.email {
   color: var(--first-color-lighten);
}

.section {
   padding: 4rem 0 2rem;
}

.section-title {
   font-size: var(--h1-font-size);
   color: var(--first-color-light);
   margin-bottom: var(--mb-3);
   text-align: center;
}

.section-subtitle {
   display: block;
   font-size: 1.5rem;
   color: var(--first-color-lighten);
   text-align: center;
   font-weight: var(--font-bold);
   margin-bottom: 0.25rem;
}

/*===== LAYOUT =====*/

.bd-grid {
   max-width: 1024px;
   display: grid;
   grid-template-columns: 100%;
   column-gap: 2rem;
   width: calc(100% - 2rem);
   margin-left: var(--mb-2);
   margin-right: var(--mb-2);
}

.l-header {
   width: 100%;
   position: fixed;
   top: 0;
   left: 0;
   z-index: var(--z-fixed);
   background-color: var(--first-color-lighten);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/*===== NAV =====*/

.nav {
   height: var(--header-height);
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.nav__menu {
   position: fixed;
   top: 0;
   left: -100%;
   width: 90%;
   height: 100vh;
   padding: 3rem;
   display: flex;
   align-items: center;
   background-color: #393939fd;
   transition: 0.5s;
}

.nav__close {
   position: absolute;
   top: 1rem;
   right: 1rem;
   font-size: 2rem;
   color: var(--first-color-lighten);
   cursor: pointer;
}

.nav__item {
   margin-bottom: var(--mb-4);
}

.nav__link {
   font-size: 1rem;
   text-transform: uppercase;
   color: var(--first-color-lighten);
   font-weight: var(--font-bold);
   transition: 0.3s;
}

.nav__link:hover {
   color: #ec1839;
}

.nav__toggle {
   color: #151515;
   font-size: 1.3rem;
   cursor: pointer;
}

/*=== Show menu ===*/

.show {
   left: 0;
}

/*Active menu*/

.active {
   color: #ec1839;
}

/*===== HOME =====*/

.home__container {
   height: calc(100vh - var(--header-height));
   align-items: center;
}

.home__data {
   display: flex;
   flex-direction: column;
   align-items: center;
   height: max-content;
   text-align: center;
}

.home__img {
   margin-top: 1rem;
   padding-top: 1.2rem;
   padding-left: 0.8rem;
   width: 180px;
   height: 180px;
   border-radius: 30% 70% 60% 40% / 38% 30% 70% 62%;
   background: url("/assets/img/perfil1.jpg") no-repeat;
   background-size: cover;
   background-position: top -11px center;
   background-blend-mode: multiply;
   overflow: hidden;
   margin-bottom: var(--mb-2);
}

.home__title {
   font-size: var(--h1-font-size);
   color: #2196f3;
   font-weight: var(--font-semi-bold);
}

.home__profession {
   font-size: var(--small-font-size);
   color: var(--first-color-lighten);
   margin-bottom: var(--mb-5);
}

.home__social {
   display: inline-flex;
   margin-bottom: 1.7rem;
   margin-top: 0.7rem;
}

.home__social .icon {
   margin: -11px 10px;
   text-align: center;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   position: relative;
   z-index: 2;
}

.home__social .icon a {
   display: block;
   height: 2.8rem;
   width: 2.8rem;
   color: var(--first-color-lighten);
   background: var(--first-color);
   border-radius: 30% 70% 60% 40% / 38% 30% 70% 62%;
   position: relative;
   z-index: 2;
}

.home__social .icon a i {
   line-height: 2.7rem;
   font-size: 1.9rem;
}

.home__social .icon .tooltip {
   position: relative;
   color: #ffffff54;
   padding: 3px;
   font-size: 0.9rem;
}

.home__button {
   width: 80%;
   margin-top: 3rem;
}

/*BUTTONS*/

.button {
   display: inline-block;
   background-color: var(--first-color);
   color: var(--first-color-lighten);
   padding: 1rem 2rem;
   font-weight: var(--font-semi-bold);
   border-radius: 0.5rem;
   transition: 0.3s;
}

.button:hover {
   background-color: rgba(0, 0, 0, 0.4);
}

.button__light {
   background-color: var(--first-color-lighten);
   color: var(--first-color);
}

.button__light:hover {
   color: var(--first-color-lighten);
}

/* ===== ABOUT =====*/

.about__container {
   row-gap: 2rem;
}

.about__data {
   text-align: center;
   color: var(--first-color-text);
}

.about__description {
   margin-bottom: var(--mb-4);
   font-weight: 300;
}

.about__img {
   width: 150px;
   border-radius: 0.5rem;
   margin: 0 auto;
}

.about__information {
   margin-bottom: var(--mb-4);
}

.about__information-title {
   font-size: var(--h3-font-size);
   color: var(--first-color-lighten);
   margin-bottom: var(--mb-2);
}

.about__information-data {
   display: flex;
   align-items: center;
   padding-left: 1.5rem;
   margin-bottom: var(--mb-3);
}

.menu__information-icon {
   font-size: 1.2rem;
   margin-right: var(--mb-1);
}

.about__information-icon {
   font-size: 1.5rem;
   color: var(--first-color);
   margin-right: var(--mb-4);
}

.about__information-subtitle {
   display: block;
   font-weight: var(--font-semi-bold);
}

.bout__information-subtitle-small {
   font-size: var(--small-font-size);
}

/* ===== SKILLS =====*/

.skills__container {
   row-gap: 2rem;
}

.skills__subtitle {
   font-size: var(--h2-font-size);
   color: var(--first-color);
   margin-bottom: var(--mb-2);
}

.skills__data {
   position: relative;
   display: flex;
   justify-content: space-between;
   margin: var(--mb-2);
   margin-bottom: var(--mb-4);
}

.skills__name {
   text-transform: uppercase;
}

.skills__bar {
   position: absolute;
   bottom: -0.75rem;
   height: 0.25rem;
   background-color: var(--first-color);
}

.skills-icon {
   font-size: 1.5rem;
   margin-left: 0.5rem;
}

/* ===== FORMATION =====*/

.education__container {
   row-gap: 2rem;
}

.education__content {
   display: grid;
   grid-template-columns: 1fr max-content 1fr;
}

.education__year,
.education__race {
   font-size: var(--h3-font-size);
   margin-bottom: 0.25rem;
}

.education__school {
   font-size: var(--smaller-font-size);
}

.education__university,
.education__specialty {
   display: block;
   font-size: var(--small-font-size);
}

.education__year,
.education__university {
   text-align: right;
}

.education__time {
   padding: 0 1rem;
   justify-self: center;
}

.education__rounder {
   position: relative;
   display: inline-block;
   width: 12px;
   height: 12px;
   background-color: var(--first-color);
   border-radius: 50%;
}

.education__rounder::before {
   content: "";
   position: absolute;
   transform: translate(-4px, -4px);
   width: 20px;
   height: 20px;
   border: 1px solid var(--first-color);
   border-radius: 50%;
}

.education__line {
   display: block;
   height: 90%;
   width: 2px;
   background-color: var(--first-color);
   transform: translate(5px, -4px);
}

/* ===== REFERENCIAS =====*/

.references__container {
   row-gap: 2rem;
}

.references__content {
   padding: 1.5rem 0.5rem;
   border: 2px solid var(--first-color);
   border-radius: 0.5rem;
   text-align: center;
}

.references__icon {
   font-size: 2rem;
   padding: 0.5rem;
   background-color: var(--first-color-lighten);
   border-radius: 50%;
   margin-bottom: var(--mb-2);
}

.laborales {
   margin-top: 2.5rem;
}

.references__title {
   font-size: 1.25rem;
   color: var(--first-color-dark);
   margin-bottom: var(--mb-1);
}

.references__container,
.references__icon,
.references__description,
.references__title {
   transition: 0.5s;
}

.references__content:hover {
   background-color: var(--first-color);
}

.references__content:hover .references__icon {
   background-color: var(--first-color-lighten);
   color: var(--first-color);
}

.references__content:hover .references__title {
   color: var(--first-color-lighten);
}

.references__content:hover .references__description {
   color: var(--first-color-lighten);
}

/* ===== PROJECT IN MIND  =====*/

.project {
   background-color: var(--first-color);
   padding-bottom: 0;
}

.project__container {
   row-gap: 2rem;
}

.project__data {
   text-align: center;
}

.project__title,
.project__description {
   color: var(--first-color-lighten);
}

.project__description {
   margin-bottom: var(--mb-4);
}

.project__img {
   width: 220px;
   justify-self: center;
}

/* ===== WORKS =====*/

.works__container {
   justify-items: center;
   row-gap: 2rem;
}

.works__img {
   position: relative;
   overflow: hidden;
   border-radius: 0.5rem;
}

.works__data {
   position: absolute;
   bottom: -100%;
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   background: rgba(117, 110, 108, 0.7);
   border-radius: 0.5rem;
   transition: 0.3s;
}

.works__link {
   display: inline-flex;
   font-size: 1.5rem;
   background-color: var(--first-color-lighten);
   color: var(--first-color);
   padding: 0.25rem;
   border-radius: 0.25rem;
   margin-bottom: var(--mb-2);
}

.works__title {
   font-size: var(--h2-font-size);
   color: var(--first-color-lighten);
}

.works__img:hover .works__data {
   bottom: 0;
}

/* ===== CONTACT =====*/

.contact__container {
   row-gap: 3rem;
}

.contact__input {
   width: 100%;
   padding: 1rem;
   outline: none;
   border: none;
   background-color: var(--first-color-light);
   font-size: var(--normal-font-size);
   margin-bottom: 2rem;
   border-radius: 0.5rem;
}

.contact ::placeholder {
   color: var(--first-color-dark);
   font-family: var(--body-font);
   font-weight: var(--font-medium);
}

.contact__button {
   outline: none;
   border: none;
   font-family: var(--body-font);
   font-size: var(--normal-font-size);
   cursor: pointer;
}

.contact__info {
   margin-bottom: var(--mb-3);
}

.contact__subtitle {
   font-size: var(--h3-font-size);
   color: var(--first-color-dark);
   margin-bottom: var(--mb-1);
}

.contact__text {
   display: block;
   padding-left: 1rem;
}

/* ===== FOOTER =====*/

.footer {
   background-color: #39393960;
   color: var(--first-color-lighten);
   text-align: center;
}

.footer__title {
   font-size: var(--h1-font-size);
   margin-bottom: var(--mb-2);
}

.footer__description {
   margin-bottom: var(--mb-2);
}

.footer__copy {
   font-size: var(--smaller-font-size);
   color: #8b8888e7;
}

/* ===== MEDIA QUERIES=====*/

@media screen and (min-width: 768px) {
   .nav__logo {
      font-size: 1.2rem;
   }

   .section-title {
      font-size: var(--h1-font-size);
      color: var(--first-color-light);
      margin-bottom: var(--mb-3);
      text-align: center;
   }
   .home__img {
      margin-top: 1rem;
      width: 260px;
      height: 260px;
      background-position: top -18px center;
   }
   .home__social {
      display: inline-flex;
      margin-bottom: 1.7rem;
      margin-top: 0.7rem;
   }
   .home__social .icon {
      margin: 0 18px;
      text-align: center;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      position: relative;
      z-index: 2;
      transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
   }
   .home__social .icon a {
      display: block;
      height: 2.8rem;
      width: 2.8rem;
      color: var(--first-color-lighten);
      background: var(--first-color);
      border-radius: 30% 70% 60% 40% / 38% 30% 70% 62%;
      position: relative;
      z-index: 2;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
      transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
   }
   .home__social .icon a i {
      line-height: 2.7rem;
      font-size: 1.9rem;
   }
   .home__social .icon .tooltip {
      position: absolute;
      top: 0;
      z-index: 1;
      background: var(--first-color-lighten);
      color: var(--first-color-lighten);
      padding: 8px;
      font-size: 1rem;
      font-weight: 100;
      border-radius: 50%;
      opacity: 0;
      pointer-events: none;
      box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
      transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
   }
   .home__social .icon:hover .tooltip {
      top: -53px;
      opacity: 1;
      pointer-events: auto;
   }
   .icon .tooltip::before {
      position: absolute;
      content: "";
      height: 15px;
      width: 15px;
      background: var(--first-color-lighten);
      left: 50%;
      bottom: -3px;
      transform: translateX(-50%) rotate(45deg);
      transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
   }
   .home__social .icon:hover a {
      color: var(--first-color-lighten);
   }
   .home__social .icon:hover a,
   .home__social .icon:hover .tooltip {
      text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.4);
   }
   .home__social .linkedin:hover a,
   .home__social .linkedin:hover .tooltip,
   .home__social .linkedin:hover .tooltip::before {
      background: #2867b2;
   }
   .home__social .whatsapp:hover a,
   .home__social .whatsapp:hover .tooltip,
   .home__social .whatsapp:hover .tooltip::before {
      background: #25d366;
   }
   .home__social .github:hover a,
   .home__social .github:hover .tooltip,
   .home__social .github:hover .tooltip::before {
      background: #24292e;
   }
   .home__social .twitter:hover a,
   .home__social .twitter:hover .tooltip,
   .home__social .twitter:hover .tooltip::before {
      background: #1da1f2;
   }
   .home__button {
      width: initial;
   }
   .nav__menu {
      width: var(--nav-width);
   }
   .about__container,
   .skills__container,
   .references__container,
   .works__container,
   .contact__container {
      grid-template-columns: repeat(2, 1fr);
   }
   .about__data {
      text-align: initial;
   }
   .about__description {
      margin-bottom: var(--mb-5);
      text-align: left;
   }
   .about__img {
      width: 250px;
   }
   .about__information {
      padding-left: 4rem;
   }
   .education__time {
      padding: 0 2rem;
   }
   .project {
      background: none;
   }
   .project__container {
      background-color: var(--first-color);
      grid-template-columns: 2fr 1.2fr;
      padding: 0 2rem;
      border-radius: 0.5rem;
   }
   .project__data {
      padding: 3rem 0;
   }
   .project__title,
   .project__data {
      text-align: initial;
   }
   .project__img {
      width: 230px;
      align-self: flex-end;
   }
   .button {
      margin: 1rem;
      padding: 1rem 4rem;
   }
   .contact__inputs {
      display: grid;
      column-gap: 1.5rem;
   }
   .contact__info {
      padding-left: 3rem;
   }
   .footer {
      background: none;
   }
   .footer__container {
      padding: 3rem 0;
      border-radius: 0.5rem;
   }
}

@media screen and (min-width: 1024px) {
   body {
      margin: 0;
      padding-left: var(--nav-width);
   }
   .home__title {
      font-size: 2.8rem;
      font-weight: var(--font-bold);
   }
   .home__profession {
      font-size: var(--h2-font-size);
      font-weight: var(--small-font-size);
   }
   .home__img {
      padding-top: 1.2rem;
      background-position: top -20px center;
      margin-bottom: var(--mb-2);
   }
   .l-header {
      width: 0;
   }
   .nav__toggle,
   .nav__logo,
   .nav__close {
      display: none;
   }
   .nav__menu {
      left: 0;
   }
   .home__container {
      height: 100vh;
   }
   .section {
      padding: 3rem 0 2rem;
   }
   .bd-grid {
      margin-left: auto;
      margin-right: auto;
   }
   /* .references__container ==Se Activara si hay mas de 6 referencias==*/
   .works__container {
      grid-template-columns: repeat(3, 1fr);
   }
}