a.hook{top:0;position:absolute;height:0;width:100%}h2.separator{z-index:3;position:sticky;top:60px;display:grid;place-items:center;width:100%;overflow:hidden;margin:0;height:35px;min-height:35px;max-height:35px;box-shadow:0 -4px 4px #0f0f0f;background-color:var(--background-50);color:var(--seccond-accent);font-family:Satoshi-Medium;font-size:24px;text-shadow:1px 1px 4px var(--background);&.noSeparator{max-height:0}svg{z-index:-1;position:absolute;width:100dvw;display:grid;place-items:center;@media(max-width:1000px){width:1500px}}&.active{background:var(--secondary);color:var(--background);animation:activeSeparator .1s cubic-bezier(.4,0,.2,1) forwards;will-change:background;transition:color .2s ease;svg{opacity:0;transition:opacity .3s ease}}}@keyframes activeSeparator{0%{background:linear-gradient(to right,transparent 0%,transparent 49.5%,var(--secondary) 50%,transparent 50.5%,transparent 100%)}10%{background:linear-gradient(to right,transparent 0%,transparent 45%,var(--secondary) 50%,transparent 55%,transparent 100%)}20%{background:linear-gradient(to right,transparent 0%,transparent 40%,var(--secondary) 50%,transparent 60%,transparent 100%)}30%{background:linear-gradient(to right,transparent 0%,transparent 35%,var(--secondary) 50%,transparent 65%,transparent 100%)}40%{background:linear-gradient(to right,transparent 0%,transparent 30%,var(--secondary) 50%,transparent 70%,transparent 100%)}50%{background:linear-gradient(to right,transparent 0%,transparent 25%,var(--secondary) 50%,transparent 75%,transparent 100%)}60%{background:linear-gradient(to right,transparent 0%,transparent 20%,var(--secondary) 50%,transparent 80%,transparent 100%)}70%{background:linear-gradient(to right,transparent 0%,transparent 15%,var(--secondary) 50%,transparent 85%,transparent 100%)}80%{background:linear-gradient(to right,transparent 0%,transparent 10%,var(--secondary) 50%,transparent 90%,transparent 100%)}90%{background:linear-gradient(to right,transparent 0%,transparent 5%,var(--secondary) 50%,transparent 95%,transparent 100%)}to{background:var(--secondary)}}section.page-section{position:relative;display:flex;flex-direction:column;min-height:75dvh;height:fit-content;&:first-of-type{align-items:center;justify-content:center;box-sizing:border-box}&[data-name=Experiencia]{min-height:calc(100dvh - 60px)}&[data-name=Proyectos]{max-height:calc(100dvh - 60px);min-height:calc(100dvh - 60px)}&[data-name=Certificaciones]{min-height:calc(75dvh - 60px)}}span.tooltip{position:absolute;overflow:hidden;width:0;height:24px;font-family:Satoshi-Bold;font-size:24px;display:flex;align-items:center;justify-content:center;border-radius:24px;background-color:var(--secondary);color:var(--background);&.shadow{box-shadow:0 0 4px var(--seccond-accent)}&.small{font-size:16px}}*:hover>span.tooltip.link{transform:translateY(-50px);transition:all .2s ease;animation:.3s link cubic-bezier(.4,0,.2,2) both;@starting-style{transform:translateY(0);padding:0;width:0}}*>span.tooltip.float{transform:translateY(0);transition:all .2s ease;animation:.3s float cubic-bezier(.4,0,.2,3) forwards;@starting-style{transform:translateY(0);padding:0;width:0}}*>span.tooltip.unfloat{left:50%;transform:translateY(0) translate(-50%);transition:all .2s ease;animation:.3s unfloat cubic-bezier(.4,0,.2,3) forwards;@starting-style{left:50%;transform:translateY(0) translate(-50%);padding:0;width:0}}@keyframes link{0%{color:var(--secondary);transform:translateY(0);padding:0;width:0}75%{color:var(--secondary);transform:translateY(-50px);width:0}80%{padding:0 2.5px}to{color:var(--background);padding:2.5px 10px;transform:translateY(-50px);width:fit-content}}@keyframes float{0%{left:50%;color:var(--secondary);transform:translateY(0) translate(-50%);padding:0;width:0}75%{left:50%;color:var(--secondary);transform:translateY(0) translate(-50%);width:0}80%{left:50%;padding:0 2.5px}to{left:50%;color:var(--background);padding:2.5px 10px;transform:translateY(0) translate(-50%);width:fit-content}}@keyframes unfloat{0%{left:50%;color:var(--background);padding:5px 10px;transform:translateY(0) translate(-50%);width:fit-content}75%{left:50%;padding:0}80%{left:50%;transform:translateY(0) translate(-50%);width:0}to{left:50%;color:var(--secondary);transform:translateY(0) translate(-50%);padding:0;width:0}}footer.footer{width:100dvw;background:var(--accent);div.content{padding:0 100px;justify-content:space-between;overflow:hidden;&,*{display:flex;align-items:center;gap:50px}img{transform:translateY(5px);aspect-ratio:1.37;object-fit:cover}@media(max-width:1050px){flex-direction:column;padding:50px 10px 0}div.external-links{@media(max-width:550px){flex-direction:column;div.separator{height:5px!important;width:100%!important}}div.separator{width:5px;height:50px;border-radius:5px;background:#fff}ul.second-links,ul.firt-links{li.element{position:relative;display:grid;place-items:center;border-radius:25%;width:50px;height:50px}li.element:hover{background-color:var(--background-50);svg{transform:scale(.65);*{stroke-width:4px}}}li.element.Youtube:hover *{stroke:#f03}li.element.TwitterX:hover *{stroke:#009df7}li.element.Pixiv:hover *{stroke:#0096f0;fill:#0096f0}li.element.GitHub:hover *{stroke:#fff}li.element.LinkedIn:hover *{stroke:#0a66c2}}}}span.credits{display:flex;align-items:center;justify-content:center;font-family:Satoshi-Medium;font-size:16px;text-align:center;color:var(--seccond-accent);width:100%;height:32px;box-sizing:border-box;border:none;border-top:1px solid var(--seccond-accent);@media(max-width:550px){flex-wrap:wrap;text-align:center;font-size:12px;height:fit-content}a.highlighted{color:var(--seccond-accent);font-family:Satoshi-Bold;text-shadow:0px 0px 8px rgba(255,0,0,.4);text-decoration:underline;&:hover{color:var(--test-3)}}}}nav#navbar.--component{left:0;top:0;position:fixed;z-index:10;display:flex;width:100dvw;height:60px;max-height:60px;justify-content:space-between;align-items:center;background-color:var(--background-50);backdrop-filter:blur(8px);div.left{overflow:hidden;display:flex;align-items:center;width:fit-content;height:100%;gap:10px;padding:0 0 0 50px;div.character-identity{position:relative;display:grid;place-items:center;div.decorator{position:absolute;display:grid;place-items:center;div.hover,div.nonhover{display:grid;place-items:center;@starting-style{scale:0}}div.nonhover{opacity:.1}div.hover{display:none}}img.character{border-radius:37.5px}}div.name-details{display:flex;align-items:center;gap:10px;*{font-family:Satoshi-Bold;font-size:24px;color:var(--seccond-accent)}span.separator{width:2px;height:24px;background-color:var(--seccond-accent)}}}&:hover>div.left{div.character-identity{div.decorator{div.hover{display:block;scale:.75}div.nonhover{display:none}}}img.character{transform:scale(1.1)}}div.right{height:100%;padding:0 50px 0 0;display:flex;align-items:center;width:fit-content;div.options-list{height:100%;div.pc{height:100%;position:relative;width:fit-content;display:flex;align-items:center;div.selector{box-sizing:border-box;border:none;border-top:5px solid var(--primary);top:0;left:-5px;position:absolute;width:40px;height:100%;transition:all .2s ease}ul.list-elements{padding:0;z-index:1;margin:0;display:flex;flex-direction:row;gap:20px;li.elements{display:grid;place-items:center;width:30px;height:30px;list-style:none;transition:all 0s ease;a{display:grid;place-items:center;width:30px;height:30px}&.SobreMi a.Select *{stop-color:var(--seccond-accent);fill:var(--seccond-accent);stroke:var(--seccond-accent)}& a.Select *{stop-color:var(--seccond-accent);stroke:var(--seccond-accent)}&.SobreMi *{stop-color:var(--tertiary);fill:var(--tertiary);stroke:var(--tertiary)}&.SobreMi:hover *{stop-color:var(--seccond-accent);fill:var(--seccond-accent);stroke:var(--seccond-accent)}&.Experiencia *{stop-color:var(--tertiary);stroke:var(--tertiary)}&.Experiencia:hover *{stop-color:var(--seccond-accent);stroke:var(--seccond-accent)}&.Proyectos *{stop-color:var(--tertiary);stroke:var(--tertiary)}&.Proyectos:hover *{stop-color:var(--seccond-accent);stroke:var(--seccond-accent)}&.Certificaciones *{stop-color:var(--tertiary);stroke:var(--tertiary)}&.Certificaciones:hover *{stop-color:var(--seccond-accent);stroke:var(--seccond-accent)}&.Comisiones *{stop-color:var(--tertiary);stroke:var(--tertiary)}&.Comisiones:hover *{stop-color:var(--seccond-accent);stroke:var(--seccond-accent)}}}}}}@media(max-width:550px){justify-content:center;div.left{display:none}div.right{padding:0;ul.list-elements{gap:25px}}}}div#home-section{display:flex;flex-wrap:wrap;align-items:center;gap:50px;justify-content:center;height:75dvh;div.information{width:fit-content;max-width:500px;gap:24px;&,*{display:flex;flex-direction:column;color:var(--seccond-accent)}.top{h1.name{flex-direction:row;height:45px;&,*{font-family:Satoshi-Bold;font-size:24px}span.brackets{color:var(--primary)}}span.position{height:26px;box-sizing:border-box;border:none;border-top:1px solid var(--primary);font-family:Satoshi-Medium;width:100%;color:var(--primary);font-size:20px}}p.desciption{font-family:Satoshi-Light;font-size:16px}ul.fast-links{width:100%;flex-wrap:wrap;gap:15px 25px;&,*{display:flex;flex-direction:row;text-decoration:none}li.elements{display:flex;width:fit-content;&,*{border:none;font-family:Satoshi-Bold;font-size:16px;background:transparent}button,a{cursor:pointer;gap:10px}}}}@media(max-width:800px){padding:100px 0;gap:25px;*{justify-content:center;text-align:center}div.information{box-sizing:border-box;padding:0 25px;div.top{gap:10px;span.position,h1.name{gap:10px;height:fit-content}h1.name{font-size:20px}span.position{font-size:16px}}p.desciption{font-size:12px}}}}div.background{width:100%;min-height:75dvh;height:100dvh;display:flex;flex-direction:row;position:relative;transition:all .5s ease;align-items:flex-end;justify-content:center;div.basic-info{position:absolute;display:flex;flex-direction:column;gap:15px;top:5%;left:5%;div.data-info{display:flex;flex-direction:column;gap:5px;*{font-family:Satoshi-Bold;font-size:24px}span.counter,div.separator{color:var(--primary)}span.counter{font-size:32px}div.separator{height:5px;max-width:150px;width:100%;background:var(--primary)}h3.project-name{color:var(--seccond-accent)}}img{object-fit:cover;background:var(--tertiary);border-radius:50%;transition:all .3s ease;scale:1;@starting-style{scale:0}}@media(max-width:1050px){top:2.5%;left:50%;transform:translate(-50%);div.data-info{align-items:center;*{text-shadow:0 0 16px var(--background);text-align:center;font-size:18px!important}}img{display:none}}}>div.container{width:100dvw;display:flex;padding:0 45px;justify-content:space-between;align-items:center;flex-wrap:wrap;min-height:250px;height:fit-content;gap:20px;@media(max-width:1050px){justify-content:center;gap:0px}div.full-information{display:flex;flex-direction:column;gap:10px;width:fit-content;min-width:300px;max-width:600px;padding:30px 45px;@media(max-width:500px){*{font-size:16px}}@media(max-width:1050px){padding:0 45px!important}p.description{font-family:Satoshi-Regular;font-size:16px;width:100%;max-width:600px;color:var(--seccond-accent);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;line-clamp:4;overflow:hidden;text-overflow:ellipsis;transition:all .2s ease;&:hover{overflow:visible;-webkit-line-clamp:none;line-clamp:none}@media(max-width:1050px){text-align:center}}&:has(p.description:hover){ul.links{height:0}}div.separator{width:100%;max-width:600px;height:5px;background:linear-gradient(90deg,#fffa00,#fffa0000)}ul.links{width:100%;display:flex;gap:10px;height:35px;transition:all .2s ease;@media(max-width:1050px){gap:50px;justify-content:center;li.element{transform:scale(1.25)}}li.element{border-radius:2px;overflow:hidden;display:flex;align-items:center;justify-content:center;list-style:none;&:hover{&:has(img) img{transform:scale(1.5)}&:has(svg) span.text{background:linear-gradient(to left,var(--primary-50) 0%,var(--primary) 50%)}}a{display:flex;align-items:center;justify-content:center;width:fit-content;position:relative;min-height:25px;height:35px;max-height:35px;color:var(--seccond-accent);text-decoration:none;&:has(img){height:35px;max-height:35px;border-radius:2px;background:var(--secondary);display:flex;align-items:center;justify-content:center;padding:4.5px 13.5px;gap:10px;span.text{font-family:Satoshi-Bold;transition:all .2s ease;display:grid;place-items:center;box-sizing:border-box;z-index:1;width:100%;min-height:35px;line-height:normal;text-align:center;color:var(--background)}}&:has(svg){max-height:35px;span.text{font-family:Satoshi-Bold;transition:all .2s ease;display:flex;align-items:center;justify-content:center;box-sizing:border-box;z-index:1;width:100%;min-height:35px;padding:4.5px 13.5px;line-height:normal;text-align:center;background:linear-gradient(to left,#0f0f0f7a,#0f0f0f 50%)}div.container{width:100%;height:100%;max-height:35px;display:grid;place-items:center;position:absolute;svg{width:100%;height:100%;min-width:75px;min-height:35px;position:absolute}}}}}}}div.galery{position:relative;display:flex;max-width:660px;width:fit-content;justify-content:space-between;margin:0 45px 0 0;gap:50px;height:130px;@media(max-width:1050px){margin:0 0 25px}div.container{padding:0 100px;display:flex;width:fit-content;align-items:center;gap:25px;justify-content:center;max-height:130px;overflow:hidden;overflow-x:auto;button.galery-project{border:none;outline:none;background:none}&::-webkit-scrollbar{height:0}}button.slider{height:100%;min-width:100px;max-width:100px;width:100%;display:grid;place-items:center;border:none;outline:none;background:none;z-index:2;cursor:pointer;*{transition:all .2s ease}&.left{top:0;left:0;transition:all .2s ease;svg{&,*{stroke:var(--secondary)}filter:drop-shadow(0 0 4px var(--secondary))}&:hover{svg{filter:none;transform:translate(-10px);&,*{stroke:var(--primary)}}}}&.right{top:0;right:0;transition:all .2s ease;svg{&,*{stroke:var(--secondary)}filter:drop-shadow(0 0 4px var(--secondary))}&:hover{svg{filter:none;transform:translate(10px);&,*{stroke:var(--primary)}}}}}}}}div.achievements{width:100%;display:flex;align-items:center;justify-content:flex-start;overflow:hidden;overflow-x:scroll;scroll-padding:0 calc(50% - 250px);scroll-snap-type:x mandatory;padding:100px calc(50% - 250px);box-sizing:border-box;&::-webkit-scrollbar{height:0}@media(min-width:1280px){gap:25px;padding:100px 0;flex-wrap:wrap;flex-direction:row;height:calc(100% - 35px);justify-content:center}div.certificate{z-index:0;display:flex;flex-direction:column;align-items:center;width:100%;max-width:650px;flex-shrink:0;scroll-snap-align:center;img.image{background:var(--background);width:calc(100% - 100px);height:calc(100% - 75px);max-width:550px;min-width:300px;max-height:422px;object-fit:cover;transition:all .2s ease;overflow:hidden;&:hover{object-fit:contain}}span.name{border:none;border-top:10px solid var(--primary);display:grid;place-content:center;width:100%;max-width:750px;height:75px;max-height:75px;text-align:center;font-family:Satoshi-Bold;font-size:24px;color:var(--seccond-accent)}}}div.works{width:100%;height:fit-content;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:50px;padding:50px;box-sizing:border-box;div.work{width:100%;height:fit-content;display:flex;gap:25px;align-items:flex-start;justify-content:center;img.logo{width:75px;height:75px;object-fit:cover;outline:4px solid var(--seccond-accent);@media(max-width:750px){display:none}}div.information{display:flex;flex-direction:column;align-items:flex-start;min-width:250px;gap:20px;@media(max-width:750px){align-items:center}div.basic{display:flex;flex-direction:column;align-items:flex-start;gap:5px;span.actual-job{width:100%;height:24px;padding:0 15px;display:flex;align-items:center;font-family:Satoshi-Bold;color:var(--seccond-accent);background:linear-gradient(90deg,var(--primary) 0%,transparent 100%);font-size:18px}span.position{font-family:Satoshi-Medium;color:var(--secondary);font-size:20px}h3.name{font-family:Satoshi-Bold;color:var(--primary-accent);font-size:20px}@media(max-width:750px){*{width:100%;text-align:center}span.actual-job{padding:0;display:grid;place-content:center;background:linear-gradient(90deg,transparent 0%,var(--primary) 50%,transparent 100%)}}}div.content{width:fit-content;max-width:750px;*{font-family:Satoshi-Regular;color:var(--seccond-accent);font-size:16px;gap:10px;&.bold{font-family:Satoshi-Bold;font-size:20px}}ul{margin:0 0 0 15px;display:flex;flex-direction:column;align-items:flex-start}}div.images{display:flex;flex-direction:row;flex-wrap:wrap;width:fit-content;align-items:center;justify-content:center;gap:20px;position:relative;div.container{position:relative;display:grid;place-items:center;svg{transform:translate(5px) translateY(10px);position:absolute;width:100%;height:100%}img{box-shadow:0 0 8px var(--background-50);border-radius:5px;z-index:1;&:hover{transform:translate(5px) translateY(10px)}}}}}&.actual{& img.logo{width:75px;height:75px;object-fit:cover;outline:4px solid var(--secondary)}}}}