*{margin:0;padding:0;box-sizing:border-box}html,body{scroll-behavior:smooth;overflow-x:hidden;width:100%;position:relative;margin:0;padding:0}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:#f4f4f9;color:#333;line-height:1.6}:root{--bg-color: #f4f4f9;--bg-gray-light: #d8d8d817;--nav-bg: rgba(255, 255, 255, .95);--card-bg: #ffffff;--text-primary: #2c3e50;--accent: #646cff;--success: #d4edda}[data-theme=dark]{--bg-color: #0f172a;--nav-bg: rgba(15, 23, 42, .9);--card-bg: #1e293b;--text-primary: #f1f5f9;--accent: #818cf8;--success: #1b2e1f;--links: #333030;--cards: #313848;--text-cards: #c9c9c9}body{background-color:var(--bg-color);color:var(--text-primary);transition:all .3s ease}.about{padding:40px 20px;background-color:transparent;text-align:center}.about-container{max-width:1210px;margin:0 auto}.about-description{text-align:left;display:flex;align-items:flex-start;flex-direction:column;justify-content:center}.about-image{width:50%;display:flex;align-items:center}.about-image img{width:100%}.about-description{width:130%;margin:0 80px 15px}.skills-grid{display:flex;justify-content:center;flex-wrap:wrap;gap:15px;margin-top:30px}.skill-box{border:2px solid #646cff;padding:10px 20px;border-radius:5px;font-weight:700;color:#646cff;transition:.3s}.skill-box:hover{background:#646cff;color:#fff}#sobre-mi,#contacto{background-color:var(--bg-gray-light)!important}.about-container{display:flex;justify-content:space-between}@media(max-width:900px){.about{padding:40px 20px}.about-container{display:block;margin:30px}.about-image{width:40%;margin:0 auto}.about-description{display:block;margin:0;width:100%}.about-description h2{text-align:center!important;margin:20px 0}}@media(max-width:390px){.about-container{margin:0 30px}}.contact{padding:30px 20px;background-color:transparent;text-align:center!important}.contact-form{max-width:500px;margin:40px auto 0;display:flex;flex-direction:column;gap:15px}.contact-form input,.contact-form textarea{padding:12px;border:1px solid #ccc;border-radius:8px;font-family:inherit}.contact-form input:focus,.contact-form textarea:focus{outline:2px solid #646cff;border-color:transparent}@media(max-width:480px){.contact-form{width:90%}.contact h2{font-size:1.5rem}}.success-msg{background-color:#d4edda;color:#155724;padding:20px;border-radius:8px;max-width:500px;margin:40px auto;border:1px solid #c3e6cb}.contact-form input,.contact-form textarea{background-color:var(--card-bg);color:var(--text-primary);border:1px solid var(--accent)}.contact-form input::placeholder,.contact-form textarea::placeholder{color:var(--text-primary);opacity:.6}.footer{background-color:#1a1a1a;color:#fff;padding:2rem 0;margin-top:2rem;text-align:center}.footer-content{display:flex;flex-direction:row;align-items:center;gap:1.5rem;justify-content:center;align-items:flex-start}.footer-content div{padding:0 40px}.footer-content div h3{text-align:left;margin-bottom:10px}.footer-content div ul li{list-style-type:none;text-align:left;font-size:.9rem}.footer-content div ul li a{color:#fff;line-height:2.5;text-decoration:none;position:relative}.footer-content div ul li a:after{content:"";position:absolute;width:0;height:2px;bottom:0;left:0;background-color:#fff;transition:width .3s ease-out}.footer-content div ul li a:hover:after{width:100%}.social-links{display:flex;gap:2rem}.social-links a{color:#fff;font-size:1.8rem;transition:transform .3s ease,color .3s ease}.social-links a:hover{color:#646cff;transform:translateY(-5px)}.fa-github:hover{color:#333}.fa-linkedin:hover{color:#0077b5}.fa-x-twitter:hover{color:#000}.fa-envelope:hover{color:#ea4335}@media(max-width:768px){.social-links{gap:1.5rem}}@media(max-width:500px){.footer-content{display:flex;flex-direction:column;align-items:center;gap:1.5rem;justify-content:center;align-items:flex-start}}.hero{background-color:var(--bg-color);min-height:80vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:2rem;transition:background-color .3s ease}.highlight{color:#646cff}.hero-content{display:flex;justify-content:space-between}.hero-description{text-align:left;display:flex;align-items:flex-start;flex-direction:column;justify-content:center}.hero-description h2{font-size:2.3em;line-height:1.3}.hero-description h2 .hero-color-text{color:#646cff}.hero-description p{margin:0!important}.hero-description,.hero-image{width:48%}.hero{padding:2rem 6rem}.hero h1{color:var(--text-primary);font-size:3rem;margin-bottom:1rem}.hero p{color:var(--text-primary);opacity:.9;max-width:600px;margin:0 auto 2rem;font-size:1.2rem}.btn-primary{margin-top:2rem;padding:12px 24px;background-color:#646cff;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:1rem;transition:background .3s ease;text-decoration:none}.btn-primary:hover{background-color:#535bf2}.gradient-text{background:linear-gradient(45deg,#646cff,#ff64f2,#64f2ff,#646cff);background-size:300% 300%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:moveGradient 6s ease infinite;font-weight:800}.glitch-container h1{display:inline-block;background-color:transparent}@keyframes moveGradient{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@media(max-width:900px){.hero{min-height:60vh}.hero-content{width:100%;text-align:center;display:block;margin:0 30px}.hero-content .hero-image{display:none}.hero-content .hero-description{width:100%}}@media(max-width:768px){.hero h1{font-size:2rem}.hero{height:60vh;padding:0 20px}}@media(max-width:500px){.hero{min-height:50vh}.hero-description h2{font-size:1.8em!important}}@media(max-width:390px){.hero{min-height:80vh}.hero-description h2{font-size:1.8em!important}}.glitch-container{display:inline-block}.glitch{position:relative;font-size:4rem;font-weight:900;color:var(--text-primary);letter-spacing:2px;background:var(--bg-color)}.glitch:before,.glitch:after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%;background:var(--bg-color)}.glitch:before{left:2px;text-shadow:-2px 0 #ff00c1;clip:rect(44px,450px,56px,0);animation:glitch-anim 5s infinite linear alternate-reverse}.glitch:after{left:-2px;text-shadow:-2px 0 #646cff;clip:rect(44px,450px,56px,0);animation:glitch-anim2 5s infinite linear alternate-reverse}@keyframes glitch-anim{0%{clip:rect(10px,9999px,20px,0);transform:skew(.5deg)}5%{clip:rect(30px,9999px,40px,0);transform:skew(1deg)}10%{clip:rect(50px,9999px,60px,0);transform:skew(-1deg)}15%{clip:rect(0px,0px,0px,0)}to{clip:rect(0px,0px,0px,0)}}@keyframes glitch-anim2{0%{clip:rect(70px,9999px,80px,0);transform:skew(-.5deg)}5%{clip:rect(10px,9999px,25px,0);transform:skew(1deg)}10%{clip:rect(40px,9999px,55px,0);transform:skew(-1deg)}15%{clip:rect(0px,0px,0px,0)}to{clip:rect(0px,0px,0px,0)}}.navbar{display:flex;justify-content:space-between;align-items:center;padding:1rem 5%;background-color:transparent;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 2px 10px #0000001a;position:sticky;top:0;z-index:1000}.navbar-logo a{font-size:1.5rem;font-weight:700;color:#646cff;text-decoration:none}.navbar-links{display:flex;list-style:none;gap:2rem;align-items:center}.navbar-links a{text-decoration:none;color:var(--text-primary);font-weight:500;transition:color .3s}.navbar-links a:hover{color:#646cff}.nav-btn{background-color:#646cff;color:#fff!important;padding:8px 16px;border-radius:6px}.nav-btn:hover{background-color:#535bf2}.nav-toggle{display:none;flex-direction:column;cursor:pointer;gap:5px}.nav-toggle span{width:30px;height:3px;background-color:#646cff;border-radius:5px;transition:all .3s ease}.theme-toggle{background:none;border:none;cursor:pointer;font-size:1.2rem;color:var(--text-color);padding:.5rem;transition:transform .2s ease}.theme-toggle:hover{transform:scale(1.1)}@media(max-width:768px){.nav-toggle{display:flex;z-index:1001}.navbar-links{position:fixed;top:0;right:-100%;width:100%;height:100vh;background-color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:.3s ease-in-out;visibility:hidden;z-index:1000}.navbar-links.open{background-color:var(--bg-color);right:0;visibility:visible}.nav-toggle.open span:nth-child(1){transform:rotate(45deg) translate(5px,6px)}.nav-toggle.open span:nth-child(2){opacity:0}.nav-toggle.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-6px)}}.project-card{background-color:transparent;color:var(--text-primary);border-radius:12px;overflow:hidden;box-shadow:0 4px 15px #0000001a;transition:transform .3s ease;padding:20px;display:flex;flex-direction:column;justify-content:space-between}.project-card{background-color:var(--cards)}.project-card p{color:var(--text-cards)}.project-card:hover{transform:translateY(-5px)}.project-card h3{margin:10px 0;color:var(--text-primary)}.project-card p{font-size:.9rem;margin-bottom:15px}.tech-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}.tag{background:#f0f0f0;padding:4px 10px;border-radius:20px;font-size:.75rem;color:#555;font-weight:700}.project-link{color:#646cff;text-decoration:none;font-weight:700;font-size:.9rem;border:none;cursor:pointer;background-color:transparent}.project-link:hover{color:#535bf2}.img-card{height:199px}.modal-overlay{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.modal{background:#fff;border-radius:10px;max-width:720px;width:100%;box-shadow:0 8px 30px #0000004d;padding:20px;position:relative;animation:pop .18s ease-out}@keyframes pop{0%{transform:scale(.97);opacity:0}to{transform:scale(1);opacity:1}}.modal-close{position:absolute;right:12px;top:8px;background:transparent;border:none;font-size:26px;cursor:pointer;color:#444}.modal-image{width:100%;height:auto;border-radius:6px;margin-bottom:12px;padding-top:25px}.modal-title{margin:6px 0 8px;font-size:1.4rem}.modal-description{color:#333;line-height:1.5;margin-bottom:12px}.modal-tech{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.modal-tag{background:#f1f1f1;padding:6px 10px;border-radius:999px;font-size:.85rem}.modal-link{display:inline-block;margin-top:6px;background:#646cff;color:#fff;padding:8px 12px;border-radius:6px;text-decoration:none}@media(max-width:520px){.modal{padding:14px}.modal-title{font-size:1.1rem}}