@font-face {font-family: 'Manrope';src: url(../font/Manrope-VariableFont_wght.ttf);font-display: swap;}:root {--primary: #F0E594;--accent-blue: #264091;--accent-navy: #0D1530;--accent-orange: #E44E0A;--accent-wine: #b72039;--wood: #582732;--warm-grey: #4A3F3F;--charcoal: #161616;--sand: #EDE7D0;--light-sand: #F9F7F1;--aquamarine-grey: #E2E7E6;--full: 100%;--w30: 30%;--w35: 35%;--w40: 40%;--w45: 45%;--w50: 50%;--w55: 55%;--w60: 60%;--w65: 65%;--w70: 70%;}*{margin: 0;padding: 0;box-sizing: border-box;scroll-behavior: smooth;}body{font-family: 'Manrope', sans-serif;background: var(--sand);color: var(--warm-grey);}h1{font-size: 2.25rem;font-weight: 300;overflow: hidden;margin-bottom: 0.5rem;}h2{font-size: 2rem;font-weight: 500;}h3{font-size: 1.5rem;}h4{font-size: 1.2rem;}h5, h6{font-size: 1rem;padding-bottom: 16px;}a{color: var(--warm-grey);font-weight: 500;text-decoration: none;}a:hover{color: var(--accent-orange);transition: all 200ms ease-in-out;}a:active{color: var(--accent-orange);transition: all 200ms ease-in-out;}p{line-height: 1.7rem;}.display-none{display: none;}.opacity-none{opacity: 0;}.width-full{width: var(--full);}.width-30{width: var(--full);}.width-35{width: var(--full);}.width-40{width: var(--full);}.width-45{width: var(--full);}.width-50{width: var(--full);}.width-55{width: var(--full);}.width-60{width: var(--full);}.width-65{width: var(--full);}.width-70{width: var(--full);}.margin-top-24{margin-top: 24px;}.intro {background: var(--sand);}.intro div.greeting-box{height: 100vh;padding: 0% 10%;display: flex;align-items: center;}.intro div.main-content{height: 100vh;padding: 30% 10%;}@keyframes greeting{from {width: 0;}to {width: 100%;}}.intro div.greeting-box span.greeting{display: inline-block;overflow: hidden;white-space: nowrap;animation: greeting 3s ease-out forwards;}header{padding: 16px;display: flex;justify-content: space-between;align-items: center;background: var(--sand);border-bottom: 12px solid var(--wood);z-index: 100;}header p{font-size: 1.2rem;}nav ul.menu-desktop{display: none;}nav ul li{list-style-type: none;}nav ul li a{color: var(--warm-grey);text-decoration: none;}.sticky{position: sticky;top: 0;}.menu-icon i{font-size: 1.5rem;color: var(--warm-grey);}.menu-mobile{display: none;background-color: var(--light-sand);margin-top: 28px;padding: 8px;position: absolute;right: 0;border: 1px solid var(--wood);}.menu-mobile li{padding: 8px;white-space: nowrap;}.menu-mobile li:pressed{color: var(--accent-orange);}@keyframes menuOpen{from {width: 0vw;}to {width: 100vw;}}@keyframes menuClose{from {width: 100vw;}to {width: 0vw;}}.menu-mobile.menu-visible{animation: menuOpen 700ms ease-out forwards;}.menu-mobile.menu-hidden {animation: menuClose 700ms ease-in forwards;}#projects{display: flex;flex-direction: column;}.contenido-principal{width: 80%;}.title-projects{padding: 32px 16px;background-color: var(--primary);}.content-projects{display: flex;flex-flow: row nowrap;}.column{width: 20%;background-color:var(--wood);background-image: url(../img/wood_vertical_lines.png);background-blend-mode:luminosity;}#projects .content{display: flex;flex-flow: column;overflow: hidden;}#projects .content .main-project {margin: 12px 12px 0 12px;display: none;}#projects .content .more-projects{display: none;}#projects, #aboutMe, #contact, #cv{scroll-margin-top: 70px;background: var(--primary);}.card{width: 100%;height: 520px;background: var(--light-sand);border: 1px solid var(--wood);padding:0;display: flex;flex-direction: column;position: relative;}.card:hover{box-shadow: 0px 0px 10px -3px var(--wood);z-index: 5;transition: all 300ms ease-in-out;}.card .card-image{background-size: cover!important;background-position: top center!important;height: 270px;width: 100%;display: block;}.card:hover .card-image{transition: all 300ms ease-in-out;}.card .card-content{display: flex;flex-direction: column;justify-content: space-between;padding: 24px;width: 100%;}.card .card-content .text{display: flex;flex-direction: column;gap: 8px;}.button-container{display: flex;padding-top: 64px;}.button-container button{bottom: 0;right: 0;position: absolute;}button, .button{font-size: 1rem;background-color: var(--accent-blue);border: 1px solid var(--wood);color: #FFF;border-radius: 20px;box-shadow: 2px 2px 6px -3px var(--wood);cursor: pointer;z-index: 10;align-self: self-end;padding: 8px 24px;margin: 16px 32px 32px 32px;width: 150px;}button:hover, .button:hover{background: var(--accent-navy);transform: translateY(-2px);transition: all 300ms ease-in-out;}button:active, .button:active{background: var(--aquamarine-grey);color: var(--warm-grey);box-shadow: inset 1px 1px 6px -3px var(--wood);transform: translateY(1px);transition: all 300ms ease-out;}.project-miami .card-image{background: url('../img/Miami-Herbert-Business-School-Mockup.webp');}.project-pelu .card-image{background: url('../img/Que-Corte-Mockup.webp');}.project-colon .card-image{background: url('../img/Academia-Colon-Mockup.webp');}.project-skr .card-image{background: url('../img/Academia-SKR-Mockup.webp');}.card:first-of-type img{width: 60px;position: absolute;z-index: 10;top: 0px;right: 8px;}.carousel{display: flex;position: relative;height: 530px;}button.carousel-nav{position: absolute;bottom: 2px;padding: 9px;margin: 0px;width: 38px;border-radius: 50%;color: var(--light-sand);background-color: var(--accent-orange);border: 1px solid var(--wood);font-size: 1rem;box-shadow: 2px 2px 6px -3px var(--wood);transition: none;}button.carousel-nav:hover{background: var(--accent-orange);transition: none;}button.carousel-nav:active{background: var(--accent-orange);transition: none;}button.carousel-nav:hover::before {opacity: 0;animation: none;}.right-arrow{right: 3px;position: absolute;}.left-arrow{left: 3px;position: absolute;}.carousel .card{flex-shrink: 0;}.track{display: flex;flex-direction: row;scroll-behavior: smooth;overflow-x: auto;}.track::-webkit-scrollbar {display: none;}dialog.popup{max-height: 100vh;max-width: 100vw;padding: 24px;height: 100vh;width: 100vw;right: 0;margin: 0;z-index: 10;background: var(--light-sand);border: none;color: var(--warm-grey);animation: openDialog 1s ease-out;transform: translateX(0vw);}dialog.popup.closeModal{animation: closeDialog 700ms ease-out;}@keyframes openDialog{from{transform: translateX(100vw);}to{transform: translateX(0vw);}}@keyframes closeDialog{from{transform: translateX(0vw);}to{transform: translateX(100vw);}}dialog.popup::backdrop {background: var(--charcoal);opacity: 0.6;}button.closeButton{float: right;width: auto;margin: 0;}dialog .button{display: inline-block;width: auto;text-decoration: none;font-weight: 500;margin: 0;background: var(--primary);color: var(--warm-grey);align-self: auto;}dialog .button:hover{text-decoration: none;font-weight: 500;margin: 0;background: var(--sand);color: var(--warm-grey);transform: translateY(-2px);}dialog .button:active{transform: translateY(2px);}dialog h3{font-size: 3rem;padding-top: 64px;padding-bottom: 24px;}dialog h4{font-size: 1rem;padding-bottom: 4px;}dialog h5{font-size: 1rem;padding-top: 8px;padding-bottom: 16px;}hr{color: var(--wood);margin: 4px 0px;}dialog > div{display: flex;flex-flow: column nowrap;align-items: flex-start;gap: 0px;}dialog > div div{width: 100%;}dialog p, dialog ul{padding-bottom: 16px;text-align: justify;}dialog p:first-of-type{font-size: 1rem;}dialog .quote p{padding-bottom: 0px;}dialog ul{padding-left: 24px;}dialog p span{font-weight: bold;}dialog img{width: 100%;margin-bottom: 24px;}.dialog-img{box-shadow: 2px 2px 10px -3px #66626292;}dialog a{text-decoration: underline;color: var(--accent-blue);font-weight: bold;}dialog .popup-images{display: flex;align-items: flex-start;}#aboutMe{display: flex;flex-flow: column nowrap;}.title-aboutMe{padding: 32px 16px;width: 100%;}#aboutMe div.content{width: 100%;border-bottom: 0;padding: 0px 16px 24px 16px;}#aboutMe p{margin-bottom: 1.25rem;text-align: justify;}#aboutMe p:last-child{margin-bottom: 0;}.quote{background-color: #ffffffaa;padding: 16px 24px;margin: 8px 8px 32px 8px;border-radius: 24px;box-shadow: 2px 2px 10px -3px #b5b5b592;color: #4a3f3fd9;}#aboutMe .quote{font-weight: 600;}.quote p{margin: 0;font-size: 0.9rem;line-height: 1.45rem;text-align: left;}blockquote{font-style: italic;text-align: justify;margin-bottom: 1.25rem;font-size: 0.9rem;line-height: 1.45rem;}#cv{display: flex;align-items: center;justify-content: center;padding: 80px;background: var(--accent-navy);background-size: contain repeat;}#cv button{display: flex;align-items: center;justify-content: center;background: var(--sand);color: var(--accent-navy);font-weight: bold;text-decoration: none;border-radius: 50px;padding: 16px 24px;width: 250px;margin: 16px;}#cv button:hover{background: var(--accent-navy);border: 2px solid var(--sand);color: var(--sand);transform: translateY(-2px);transition: all 300ms ease-in-out;}#cv button:active{box-shadow: inset 1px 1px 6px -3px var(--wood);background: var(--light-sand);border: 2px solid var(--accent-navy);color: var(--accent-navy);transform: scale(0.98) translateY(1px);transition: all 300ms ease-in-out;}#cv a i{margin-left: 14px;font-size: 1.5rem;text-decoration: none!important;}#cv a:hover i{margin-left: 20px;transition: all 300ms ease-in-out;}#cv a:active i{margin-left: 14px;transition: all 300ms ease-in-out;}footer{height: 93vh;background: var(--wood);color: var(--light-sand);padding: 32px 16px;position: relative;}footer p, footer .button{margin-bottom: 16px;}footer p:last-child{position: absolute;bottom: 16px;left: 16px;right: 16px;}blockquote .button, footer .button{display: inline-block;margin: 0px 4px 16px 0px;background-color: var(--wood);border: 1px solid var(--primary);color: var(--primary);width: auto;text-decoration: none;}blockquote .button:hover, footer .button:hover{background-color: var(--primary)!important;color: var(--warm-grey);transform: translateY(-2px);transition: all 300ms ease-in-out;}blockquote .button:active, footer .button:active{background: var(--sand);color: var(--warm-grey);box-shadow: inset 1px 1px 6px -3px var(--wood);transform: translateY(2px);transition: all 300ms ease-out;}footer i{margin-right: 8px;color: var(--light-sand);}footer .button:hover i{color: var(--warm-grey);}@media (min-width: 768px){h1{font-size: 4rem;}h2{font-size: 2.5rem;}h3{font-size: 1.2rem;}h4{font-size: 1.25rem;}p{font-size: 1rem;}.intro div.main-content{padding: 15% 10%;}span.greeting{animation: greeting 5s ease-out forwards;}.disappear{animation: disappear 1s ease-out forwards!important;}header{padding: 24px;}.title{font-size: 2rem;}nav ul.menu-desktop{display: block;width: 250px;display: flex;justify-content: space-between;}nav ul li a:hover{color: var(--accent-orange);transition: color 200ms ease-in-out;}.menu-icon{display: none;}.menu-mobile{display: none!important;}#projects, #aboutMe, #contact, #cv{scroll-margin-top: 86px;}.title-projects{padding: 48px 24px;width: 100%;}#projects .content .more-projects{display: flex;flex-flow: row nowrap;justify-content: space-between;align-items: center;margin: 12px;gap: 12px;}.more-projects > h3{display: none;}.card{flex-flow:column;width: auto;height: 510px;}.card .card-content{padding: 24px;width: 100%;}.carousel.card .card-image{width: 100%;height: 170px;}.button-container{padding-top: 64px;}#projects .content .main-project {display: block;}.card:nth-of-type(3) .card-image{order:2;}.card:nth-of-type(3) .card-content{order:1;}.card:nth-of-type(3) .button-container{order:3;}.carousel .card:first-of-type{width: 100%;flex-direction: row;max-height: 400px;}.carousel .card:first-of-type .card-image{width: 60%;height: 398px;}.carousel .card:first-of-type .card-content{width: 40%;}.carousel{height: auto;}.carousel .card{width: 33.333%;flex-shrink: 1;}.carousel-nav{display: none;}.track{width: 100%;height: auto;flex-wrap: wrap;}dialog.popup{width: 80vw;transform: translateX(20vw);border-left: 1px solid var(--wood);padding: 32px;}@keyframes openDialog{from{transform: translateX(100vw);}to{transform: translateX(20vw);}}@keyframes closeDialog{from{transform: translateX(20vw);}to{transform: translateX(100vw);}}dialog > div{flex-flow: row wrap;justify-content: space-between;gap: 20;}dialog > div div{width: 30%;}#aboutMe{display: flex;flex-flow: row nowrap;}.title-aboutMe{padding: 48px 24px;width: 30%;box-sizing: border-box;}#aboutMe div.content{width: 70%;padding: 48px 24px;}#cv{padding: 40px;}footer{padding: 48px 24px;}footer p:last-child{position: absolute;bottom: 24px;left: 24px;right: 24px;}}@media (min-width: 1024px){h1{font-size: 4rem;}h2{font-size: 2.5rem;}h3{font-size: 1.5rem;}h4{font-size: 1.3rem;}.width-full{width: var(--full);}.width-30{width: var(--w30);}.width-35{width: var(--w35);}.width-40{width: var(--w40);}.width-45{width: var(--w45);}.width-50{width: var(--w50);}.width-55{width: var(--w55);}.width-60{width: var(--w60);}.width-65{width: var(--w65);}.width-70{width: var(--w70);}.intro div.main-content{padding: 12% 10%;}.opening-text-base{margin-bottom: 1rem;}header{padding: 32px;}.title{font-size: 2rem;}nav ul{width: 450px;}#projects, #aboutMe, #contact, #cv{scroll-margin-top: 102px;}#projects .content{width: 100%;}.title-projects{padding: 40px 32px;}.card{height: 570px;}.card .card-content{padding: 32px;}.card .card-image{height: 250px;}.track{flex-wrap: nowrap;}.carousel .card:first-of-type{width: 50%;flex-direction: column;max-height: none;}.carousel .card:first-of-type .card-image{width: 100%;height: 350px }.carousel .card:first-of-type .card-content{width: 100%;height: 100px;}dialog.popup{width: 65vw;transform: translateX(35vw);}@keyframes openDialog{from{transform: translateX(100vw);}to{transform: translateX(35vw);}}@keyframes closeDialog{from{transform: translateX(35vw);}to{transform: translateX(100vw);}}.title-aboutMe{padding: 40px 32px;width: 40%;}#aboutMe div.content{width: 60%;padding: 40px 32px;}.quote{margin: 8px 24px 32px 24px;}footer{padding: 64px 32px;}footer p:last-child{position: absolute;bottom: 24px;left: 32px;right: 32px;}}