.hero{min-height:100vh;display:flex;align-items:center;justify-content:start;overflow:hidden;position:relative}.hero-content{color:#fff;opacity:0;transform:translateY(80px);transition:transform 1s cubic-bezier(.25,.8,.25,1),opacity 1s ease-out;will-change:transform,opacity;width:100%;height:100%}.hero-content.show{opacity:1;transform:translateY(0)}.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:center;width:100%;height:100vh;padding:0}.hero-text{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:2rem 3rem;height:100vh;gap:1.5rem}.hero-image{display:flex;justify-content:center;align-items:center;height:100vh;position:relative}.hero-profile-img{width:80%;height:auto;object-fit:contain;filter:drop-shadow(0 0 15px rgba(59,130,246,.2));transition:all .4s ease;z-index:2}.hero-profile-img:hover{transform:scale(1.05);filter:drop-shadow(0 0 20px rgba(168,85,247,.3))}.image-decoration-1{position:absolute;top:20%;left:15%;width:100px;height:100px;background:#3b82f633;border-radius:50%;filter:blur(20px);animation:float 6s ease-in-out infinite}.image-decoration-2{position:absolute;bottom:25%;right:20%;width:80px;height:80px;background:#a855f733;border-radius:50%;filter:blur(15px);animation:float 4s ease-in-out infinite reverse}.image-decoration-3{position:absolute;top:60%;left:10%;width:60px;height:60px;background:#06b6d44d;border-radius:50%;filter:blur(10px);animation:float 5s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}.hero-content h1{margin:0;font-size:clamp(4rem,12vw,9rem);font-weight:900;line-height:.9;letter-spacing:-.03em;background:linear-gradient(to right,#3b82f6,#a855f7);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}@media (max-width: 768px){.hero-grid{grid-template-columns:1fr;height:auto}.hero-text{height:60vh;padding:2rem 1.5rem;text-align:center;align-items:center}.hero-image{height:40vh;order:-1;background:none}.hero-profile-img{margin-top:70%;width:33rem;height:29rem}}.hero-content p{color:#07f;font-size:clamp(1.2rem,3vw,2rem);margin-top:1rem;font-weight:400}#sobre-mi,.section{opacity:1;transform:translateY(0)}.tab-button{position:relative;color:#9ca3af;background:transparent;border:none;cursor:pointer;outline:none}.tab-button.active{color:#fff;background:#3b82f633;box-shadow:0 0 15px #3b82f64d}.tab-button:hover:not(.active){color:#e5e7eb;background:#4b55634d}#slider-container{position:relative;min-height:450px;width:100%;overflow:hidden}.slide-content{position:absolute;top:0;left:0;width:100%;min-height:400px;transition:all 1s cubic-bezier(.25,.8,.25,1)}#slide-about{transform:translate(0);opacity:1;z-index:2;position:relative}#slide-experience{transform:translate(100%);opacity:0;z-index:1;position:absolute;top:0;left:0}#image-about,#image-experience{transition:opacity 1s ease-in-out;background:transparent!important;background-color:transparent!important}.hero-style-img{object-fit:contain!important;filter:drop-shadow(0 0 15px rgba(59,130,246,.2));transition:all 1s ease-in-out;z-index:2}.hero-style-img:hover{transform:scale(1.05);filter:drop-shadow(0 0 20px rgba(168,85,247,.3))}#image-about.hero-style-img{filter:drop-shadow(0 0 15px rgba(59,130,246,.3))}#image-about.hero-style-img:hover{filter:drop-shadow(0 0 25px rgba(59,130,246,.4))}#image-experience.hero-style-img{filter:drop-shadow(0 0 15px rgba(147,51,234,.3))}#image-experience.hero-style-img:hover{filter:drop-shadow(0 0 25px rgba(6,182,212,.4))}#decoration-1,#decoration-2,#decoration-3{transition:background-color .8s ease-in-out}.tab-button:after{content:"";position:absolute;bottom:-2px;left:0;width:0;height:2px;background:linear-gradient(to right,#3b82f6,#8b5cf6);transition:width .3s ease-in-out}.tab-button.active:after{width:100%}#content-experience{scrollbar-width:thin;scrollbar-color:#8b5cf6 #374151}#content-experience::-webkit-scrollbar{width:8px}#content-experience::-webkit-scrollbar-track{background:#3741514d;border-radius:10px;margin:5px}#content-experience::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#8b5cf6,#06b6d4);border-radius:10px;border:1px solid rgba(147,51,234,.2);transition:all .3s ease}#content-experience::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#7c3aed,#0891b2);border-color:#9333ea66;transform:scale(1.1)}#content-experience::-webkit-scrollbar-thumb:active{background:linear-gradient(135deg,#6d28d9,#0e7490)}#content-experience::-webkit-scrollbar-thumb{box-shadow:0 0 10px #8b5cf64d,inset 0 1px #ffffff1a}#content-experience::-webkit-scrollbar-thumb:hover{box-shadow:0 0 15px #8b5cf680,0 0 25px #06b6d44d,inset 0 1px #fff3}@-moz-document url-prefix(){#content-experience{scrollbar-width:thin;scrollbar-color:#8b5cf6 rgba(55,65,81,.3)}}@media (max-width: 768px){#slider-container{min-height:350px}.tab-button{padding:8px 16px;font-size:14px}#content-experience::-webkit-scrollbar{width:6px}}@keyframes slideInUp{0%{opacity:0;transform:translateY(60px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInScale{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes progressFill{0%{width:0%}}.skill-category{background:linear-gradient(135deg,#1f2937cc,#111827e6);border:1px solid rgba(59,130,246,.2);border-radius:1rem;padding:2rem;backdrop-filter:blur(10px);transition:all .5s cubic-bezier(.25,.8,.25,1);opacity:0;transform:translateY(50px)}.skill-category:hover{border-color:#3b82f666;box-shadow:0 20px 40px #3b82f61a;transform:translateY(-5px)}.skill-category.animate-in{animation:slideInUp .8s ease-out forwards}.skill-header{display:flex;align-items:center;margin-bottom:1.5rem;gap:1rem}.skill-icon{width:3rem;height:3rem;border-radius:.75rem;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#3b82f633,#9333ea33);transition:all .3s ease}.frontend-icon{background:linear-gradient(135deg,#3b82f633,#6366f133);color:#60a5fa}.backend-icon{background:linear-gradient(135deg,#22c55e33,#10b98133);color:#4ade80}.tools-icon{background:linear-gradient(135deg,#a855f733,#ec489933);color:#c084fc}.skill-category:hover .skill-icon{transform:scale(1.1) rotate(5deg);box-shadow:0 10px 20px #3b82f633}.skills-grid{display:grid;gap:1rem}.skill-item{position:relative;background:#1f293780;border:1px solid rgba(75,85,99,.3);border-radius:.75rem;padding:1rem;transition:all .3s cubic-bezier(.25,.8,.25,1);opacity:0;transform:translate(-20px);transform-origin:center}.skill-item:hover{background:#1f2937cc;border-color:#6366f166;transform:scale(1.02);box-shadow:0 10px 25px #6366f133}.skill-item.animate-progress{animation:slideInUp .6s ease-out forwards}.skill-content{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem}.skill-logo{width:2rem;height:2rem;object-fit:contain;transition:transform .3s ease}.skill-item:hover .skill-logo{transform:scale(1.1)}.express-logo,.github-logo{filter:invert(1)}.skill-name{font-weight:600;color:#e5e7eb;transition:color .3s ease}.skill-item:hover .skill-name{color:#fff}.skill-bar{height:6px;background:#4b55634d;border-radius:3px;overflow:hidden;position:relative}.skill-progress{height:100%;background:linear-gradient(90deg,#3b82f6,#8b5cf6,#06b6d4);border-radius:3px;position:relative;transition:width 1.5s cubic-bezier(.25,.8,.25,1);background-size:200% 100%;animation:shimmer 2s infinite}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.skill-progress:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);transform:translate(-100%);animation:progressShine 2s ease-in-out infinite}@keyframes progressShine{0%{transform:translate(-100%)}to{transform:translate(100%)}}.skill-tooltip{position:absolute;top:-2.5rem;right:.5rem;background:#111827f2;color:#fff;padding:.25rem .5rem;border-radius:.25rem;font-size:.75rem;font-weight:600;border:1px solid rgba(59,130,246,.3);animation:fadeInScale .3s ease-out;z-index:100;pointer-events:none;white-space:nowrap}.skill-tooltip:after{content:"";position:absolute;top:100%;right:.5rem;border:4px solid transparent;border-top-color:#111827e6}.service-card{background:linear-gradient(135deg,#1f293799,#111827cc);border:1px solid rgba(75,85,99,.3);border-radius:1rem;padding:1.5rem;text-align:center;transition:all .4s cubic-bezier(.25,.8,.25,1);opacity:0;transform:translateY(30px) scale(.9);backdrop-filter:blur(5px)}.service-card:hover{transform:translateY(-10px) scale(1);border-color:#6366f166;box-shadow:0 25px 50px #3b82f626}.service-card.animate-in{animation:fadeInScale .6s ease-out forwards}.service-icon{width:3.5rem;height:3.5rem;border-radius:1rem;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;transition:all .3s ease}.web-dev{background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff}.ui-ux{background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff}.api-dev{background:linear-gradient(135deg,#10b981,#059669);color:#fff}.consulting{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff}.service-card:hover .service-icon{transform:scale(1.1) rotate(5deg);box-shadow:0 15px 30px #0003}@media (max-width: 768px){.skill-category{padding:1.5rem}.skill-header{flex-direction:column;text-align:center;gap:.5rem}.skill-content{gap:.5rem}.skill-logo{width:1.5rem;height:1.5rem}.service-card{padding:1rem}.service-icon{width:2.5rem;height:2.5rem}}@media (max-width: 1024px){.skills-grid{grid-template-columns:1fr}}.skill-category:before{content:"";position:absolute;inset:-1px;background:linear-gradient(45deg,transparent,rgba(59,130,246,.1),transparent);border-radius:1rem;opacity:0;transition:opacity .3s ease;z-index:-1}.skill-category:hover:before{opacity:1}@keyframes slideInLeft{0%{opacity:0;transform:translate(-50px)}to{opacity:1;transform:translate(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(50px)}to{opacity:1;transform:translate(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.contact-info-card{background:linear-gradient(135deg,#1f2937cc,#111827e6);border:1px solid rgba(59,130,246,.2);border-radius:1.5rem;padding:2rem;backdrop-filter:blur(10px);transition:all .5s cubic-bezier(.25,.8,.25,1);position:relative;overflow:hidden}.contact-info-card:before{content:"";position:absolute;inset:-2px;background:linear-gradient(45deg,transparent,rgba(59,130,246,.1),transparent);border-radius:1.5rem;opacity:0;transition:opacity .3s ease;z-index:-1}.contact-info-card:hover:before{opacity:1}.contact-info-card:hover{transform:translateY(-5px);border-color:#3b82f666;box-shadow:0 25px 50px #3b82f61a}.contact-item{display:flex;align-items:center;gap:1rem;padding:1rem;border-radius:.75rem;transition:all .3s ease;opacity:0;transform:translate(-30px);cursor:pointer}.contact-item:hover{background:#3b82f60d;transform:translate(5px)}.contact-item.animate-in{animation:slideInLeft .6s ease-out forwards}.contact-icon{width:3rem;height:3rem;border-radius:.75rem;display:flex;align-items:center;justify-content:center;transition:all .3s ease;position:relative}.email-icon{background:linear-gradient(135deg,#3b82f6,#1e40af);color:#fff}.whatsapp-icon{background:linear-gradient(135deg,#25d366,#128c7e);color:#fff}.linkedin-icon{background:linear-gradient(135deg,#0077b5,#004471);color:#fff}.github-icon{background:linear-gradient(135deg,#333,#000);color:#fff}.contact-item:hover .contact-icon{transform:scale(1.1) rotate(5deg);box-shadow:0 10px 25px #0003}.availability-card{background:linear-gradient(135deg,#10b9811a,#0596691a);border:1px solid rgba(16,185,129,.2);border-radius:1rem;padding:1.5rem;backdrop-filter:blur(5px)}.status-indicator{display:flex;align-items:center;gap:.75rem}.status-dot{width:.75rem;height:.75rem;background:#10b981;border-radius:50%;animation:pulse 2s infinite;box-shadow:0 0 10px #10b98180}.contact-form-container{background:linear-gradient(135deg,#1f293799,#111827cc);border:1px solid rgba(75,85,99,.3);border-radius:1.5rem;padding:2rem;backdrop-filter:blur(10px);position:relative;overflow:hidden}.contact-form-container:before{content:"";position:absolute;inset:-2px;background:linear-gradient(45deg,transparent,rgba(168,85,247,.1),transparent);border-radius:1.5rem;opacity:0;transition:opacity .3s ease;z-index:-1}.contact-form-container:hover:before{opacity:1}.input-group{position:relative;opacity:0;transform:translateY(20px)}.input-group.animate-in{animation:fadeInUp .6s ease-out forwards}.input-label{display:block;color:#9ca3af;font-size:.875rem;font-weight:500;margin-bottom:.5rem;transition:color .3s ease}.input-group.focused .input-label,.input-group.filled .input-label{color:#3b82f6}.contact-input{width:100%;background:#1f293780;border:1px solid rgba(75,85,99,.3);border-radius:.75rem;padding:.875rem 1rem;color:#fff;font-size:1rem;transition:all .3s cubic-bezier(.25,.8,.25,1);position:relative;z-index:1}.contact-input::placeholder{color:#6b7280;transition:color .3s ease}.contact-input:focus{outline:none;border-color:#3b82f6;background:#1f2937cc;box-shadow:0 0 0 3px #3b82f61a}.contact-input:focus::placeholder{color:#9ca3af}.contact-textarea{resize:vertical;min-height:120px}.input-border{position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#3b82f6,#8b5cf6,#06b6d4);transform:scaleX(0);transition:transform .3s ease;border-radius:0 0 .75rem .75rem}.input-group.focused .input-border{transform:scaleX(1)}.input-group.valid .contact-input{border-color:#10b981}.input-group.valid .input-border{background:#10b981}.input-group.error .contact-input{border-color:#ef4444;box-shadow:0 0 0 3px #ef44441a}.input-group.error .input-border{background:#ef4444}.submit-button{width:100%;background:linear-gradient(135deg,#3b82f6,#8b5cf6);color:#fff;border:none;border-radius:.75rem;padding:1rem 2rem;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.25,.8,.25,1);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:.5rem}.submit-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s ease}.submit-button:hover:before{left:100%}.submit-button:hover{transform:translateY(-2px);box-shadow:0 15px 35px #3b82f64d}.submit-button:active{transform:translateY(0)}.submit-button.loading{pointer-events:none}.submit-button.loading .btn-icon{animation:spin 1s linear infinite}.btn-text{transition:opacity .3s ease}.btn-icon{width:1.25rem;height:1.25rem;transition:transform .3s ease}.submit-button:hover .btn-icon{transform:translate(3px)}.success-message,.error-message{display:flex;align-items:center;gap:1rem;padding:1rem;border-radius:.75rem;margin-top:1rem;transition:all .3s ease;transform:translateY(10px);opacity:0}.success-message{background:#10b9811a;border:1px solid rgba(16,185,129,.2)}.error-message{background:#ef44441a;border:1px solid rgba(239,68,68,.2)}.success-message.show,.error-message.show{opacity:1;transform:translateY(0)}.success-icon,.error-icon{width:2rem;height:2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.success-icon{background:#10b98133;color:#10b981}.error-icon{background:#ef444433;color:#ef4444}.social-link{width:3rem;height:3rem;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .3s cubic-bezier(.25,.8,.25,1);position:relative;overflow:hidden}.github-link{background:linear-gradient(135deg,#333,#000);color:#fff}.linkedin-link{background:linear-gradient(135deg,#0077b5,#004471);color:#fff}.whatsapp-link{background:linear-gradient(135deg,#25d366,#128c7e);color:#fff}.social-link:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;background:#fff3;border-radius:50%;transition:all .3s ease;transform:translate(-50%,-50%)}.social-link:hover:before{width:100%;height:100%}.social-link:hover{transform:translateY(-5px) scale(1.1);box-shadow:0 15px 30px #0003}@media (max-width: 768px){.contact-info-card,.contact-form-container{padding:1.5rem}.contact-icon{width:2.5rem;height:2.5rem}.input-group{margin-bottom:1rem}.submit-button{padding:.875rem 1.5rem}.social-link{width:2.5rem;height:2.5rem}}@media (prefers-reduced-motion: no-preference){.contact-info-card,.contact-form-container{animation:fadeInUp .8s ease-out}}.contact-item:hover a{color:inherit}.contact-input:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.submit-button:focus-visible{outline:2px solid #8b5cf6;outline-offset:2px}.submit-button.loading:after{content:"";position:absolute;width:1rem;height:1rem;border:2px solid transparent;border-top:2px solid currentColor;border-radius:50%;animation:spin 1s linear infinite;margin-left:.5rem}
