@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;600;700&display=swap');

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 :root {
     --neon-pink: #ff0080;
     --neon-cyan: #00ffff;
     --neon-green: #39ff14;
     --dark-bg: #949197;
     --darker-bg: #403e41;
     --purple: #8a2be2;
     --orange: #ff4500;
 }

 body {
     font-family: 'Rajdhani', sans-serif;
     background: var(--dark-bg);
     color: #fff;
     overflow-x: hidden;
     line-height: 1.6;
 }

 /* Glitch Effects */
 .glitch {
     position: relative;
     color: #fff;
     font-size: 4rem;
     font-weight: 900;
     text-transform: uppercase;
     animation: glitch 2s infinite;
 }

 .glitch::before,
 .glitch::after {
     content: attr(data-text);
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
 }

 .glitch::before {
     animation: glitch-1 0.5s infinite;
     color: var(--neon-pink);
     z-index: -1;
 }

 .glitch::after {
     animation: glitch-2 0.5s infinite;
     color: var(--neon-cyan);
     z-index: -2;
 }

 @keyframes glitch {

     0%,
     100% {
         transform: translate(0);
     }

     20% {
         transform: translate(-2px, 2px);
     }

     40% {
         transform: translate(-2px, -2px);
     }

     60% {
         transform: translate(2px, 2px);
     }

     80% {
         transform: translate(2px, -2px);
     }
 }

 @keyframes glitch-1 {
     0% {
         transform: translate(0);
     }

     20% {
         transform: translate(-2px, 2px);
     }

     40% {
         transform: translate(-2px, -2px);
     }

     60% {
         transform: translate(2px, 2px);
     }

     80% {
         transform: translate(2px, -2px);
     }
 }

 @keyframes glitch-2 {
     0% {
         transform: translate(0);
     }

     20% {
         transform: translate(2px, -2px);
     }

     40% {
         transform: translate(2px, 2px);
     }

     60% {
         transform: translate(-2px, -2px);
     }

     80% {
         transform: translate(-2px, 2px);
     }
 }

 /* Navbar */
 nav {
     position: fixed;
     top: 0;
     width: 100%;
     background: rgba(10, 10, 10, 0.95);
     backdrop-filter: blur(10px);
     z-index: 1000;
     padding: 1rem 0;
     border-bottom: 2px solid var(--neon-pink);
 }

 nav .container {
     max-width: 1200px;
     margin: 0 auto;
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 0 2rem;
 }

 .logo {
     font-family: 'Orbitron', monospace;
     font-size: 1.5rem;
     font-weight: 900;
     color: var(--neon-pink);
     text-shadow: 0 0 10px var(--neon-pink);
 }

 .nav-links {
     display: flex;
     list-style: none;
     gap: 2rem;
 }

 .nav-links a {
     color: #fff;
     text-decoration: none;
     font-weight: 600;
     transition: all 0.3s;
     position: relative;
     text-transform: uppercase;
 }

 .nav-links a:hover {
     color: var(--neon-cyan);
     text-shadow: 0 0 10px var(--neon-cyan);
 }

 .nav-links a::after {
     content: '';
     position: absolute;
     bottom: -5px;
     left: 0;
     width: 0;
     height: 2px;
     background: var(--neon-cyan);
     transition: width 0.3s;
 }

 .nav-links a:hover::after {
     width: 100%;
 }

 /* Hero Section */
 .hero {
     height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     background: linear-gradient(45deg, var(--darker-bg), var(--dark-bg));
     overflow: hidden;
 }

 .hero::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%23ff008020" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>') repeat;
     animation: grid-move 20s linear infinite;
 }

 /*hero 2*/
 .hero2 {
     height: 60vh;
     /* Aumentado un poco para mejor respiro */
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     background: linear-gradient(45deg, var(--darker-bg), var(--dark-bg));
     overflow: hidden;
     padding-top: 80px;
     /* IMPORTANTE: Espacio para el navbar fijo */
 }

 .hero2::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%23ff008020" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>') repeat;
     animation: grid-move 20s linear infinite;
 }

 @keyframes grid-move {
     0% {
         transform: translate(0, 0);
     }

     100% {
         transform: translate(10px, 10px);
     }
 }

 .hero-content {
     text-align: center;
     z-index: 2;
 }

 .hero h1 {
     font-family: 'Orbitron', monospace;
     margin-bottom: 1rem;
 }

 .hero p {
     font-size: 1.5rem;
     margin-bottom: 2rem;
     color: var(--neon-cyan);
     text-shadow: 0 0 10px var(--neon-cyan);
 }

 .hero2-content {
     text-align: center;
     z-index: 2;
 }

 .hero2 h1 {
     font-family: 'Orbitron', monospace;
     margin-bottom: 1rem;
 }

 .hero2 p {
     font-size: 1.5rem;
     margin-bottom: 2rem;
     color: var(--neon-cyan);
     text-shadow: 0 0 10px var(--neon-cyan);
 }

 .cta-button {
     display: inline-block;
     padding: 1rem 2rem;
     background: transparent;
     border: 2px solid var(--neon-pink);
     color: var(--neon-pink);
     text-decoration: none;
     text-transform: uppercase;
     font-weight: 700;
     transition: all 0.3s;
     position: relative;
     overflow: hidden;
 }

 .cta-button:hover {
     color: var(--dark-bg);
     box-shadow: 0 0 20px var(--neon-pink);
 }

 .cta-button::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: var(--neon-pink);
     transition: left 0.3s;
     z-index: -1;
 }

 .cta-button:hover::before {
     left: 0;
 }

 /* Sections */
 .section {
     padding: 5rem 0;
     position: relative;
 }

 .container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 2rem;
 }

 .section-title {
     font-family: 'Orbitron', monospace;
     font-size: 3rem;
     text-align: center;
     margin-bottom: 3rem;
     color: var(--neon-green);
     text-shadow: 0 0 20px var(--neon-green);
 }

 /* Skills Grid */
 .skills-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 2rem;
     margin-top: 3rem;
 }

 .skill-card {
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid var(--neon-cyan);
     padding: 2rem;
     border-radius: 10px;
     text-align: center;
     transition: all 0.3s;
     position: relative;
     overflow: hidden;
 }

 .skill-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.1), transparent);
     transition: left 0.5s;
 }

 .skill-card:hover::before {
     left: 100%;
 }

 .skill-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 10px 30px rgba(0, 255, 255, 0.3);
 }

 .skill-icon {
     font-size: 3rem;
     margin-bottom: 1rem;
     color: var(--neon-pink);
 }

 .skill-card h3 {
     font-family: 'Orbitron', monospace;
     margin-bottom: 1rem;
     color: var(--neon-cyan);
 }

 /* Projects Grid */
 .projects-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
     gap: 2rem;
     margin-top: 3rem;
 }

 .project-card {
     background: linear-gradient(135deg, rgba(138, 43, 226, 0.1), rgba(255, 0, 128, 0.1));
     border: 2px solid transparent;
     border-radius: 15px;
     padding: 2rem;
     position: relative;
     overflow: hidden;
     transition: all 0.3s;
 }

 .project-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     border-radius: 15px;
     padding: 2px;
     background: linear-gradient(45deg, var(--neon-pink), var(--neon-cyan), var(--neon-green));
     mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
     mask-composite: exclude;
     z-index: -1;
 }

 .project-card:hover {
     transform: scale(1.05);
     box-shadow: 0 20px 40px rgba(255, 0, 128, 0.3);
 }

 .project-card h3 {
     font-family: 'Orbitron', monospace;
     color: var(--neon-green);
     margin-bottom: 1rem;
 }

 /* Three.js Canvas Section */
 .canvas-section {
     height: 80vh;
     position: relative;
     background: var(--darker-bg);
     border-top: 2px solid var(--neon-pink);
     border-bottom: 2px solid var(--neon-cyan);
 }

 #three-canvas {
     width: 100%;
     height: 100%;
     display: block;
 }

 .canvas-overlay {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     text-align: center;
     z-index: 10;
     pointer-events: auto;
 }

 .canvas-overlay h2 {
     font-family: 'Orbitron', monospace;
     font-size: 2.5rem;
     margin-bottom: 1rem;
     color: var(--neon-cyan);
     text-shadow: 0 0 30px var(--neon-cyan);
 }

 /* Class 3D Links */
 .d3d {
     color: rgb(238, 225, 225);
     background: linear-gradient(135deg, rgba(27, 31, 31, 0.925), rgba(124, 67, 94, 0.979));
     padding: 0.8rem 1.5rem;
     border: 1px solid rgba(0, 255, 255, 0.3);
     border-radius: 8px;
     transition: all 0.3s ease;
     display: inline-block;
     position: relative;
     overflow: hidden;
     text-decoration: none;
     font-size: large;
     font-weight: 700;
 }

 .d3d::before {
     content: '';
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: radial-gradient(circle, rgba(0, 255, 255, 0.2), transparent);
     animation: shine 3s infinite;
 }

 @keyframes shine {
     0% {
         transform: translate(-50%, -50%) rotate(0deg);
     }

     100% {
         transform: translate(-50%, -50%) rotate(360deg);
     }
 }

 .d3d:hover {
     background: linear-gradient(135deg, rgba(0, 255, 255, 0.25), rgba(255, 0, 128, 0.25));
     box-shadow: 0 0 20px rgba(0, 255, 255, 0.5), inset 0 0 20px rgba(0, 255, 255, 0.1);
     border-color: rgba(0, 255, 255, 0.6);
     transform: scale(1.05);
 }

 /* Footer */
 footer {
     background: var(--darker-bg);
     padding: 3rem 0;
     text-align: center;
     border-top: 2px solid var(--neon-green);
 }

 .social-links {
     display: flex;
     justify-content: center;
     gap: 2rem;
     margin-bottom: 2rem;
 }

 .social-links a {
     color: var(--neon-cyan);
     font-size: 2rem;
     transition: all 0.3s;
 }

 .social-links a:hover {
     color: var(--neon-pink);
     transform: scale(1.2);
     text-shadow: 0 0 20px var(--neon-pink);
 }

 /* Animations */
 .fade-in {
     opacity: 0;
     transform: translateY(30px);
     animation: fadeIn 1s forwards;
 }

 @keyframes fadeIn {
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* Mobile Responsive */
 .mobile-menu-btn {
     display: none;
     flex-direction: column;
     gap: 5px;
     background: none;
     border: none;
     cursor: pointer;
     z-index: 1001;
 }

 .mobile-menu-btn span {
     display: block;
     width: 25px;
     height: 3px;
     background: var(--neon-cyan);
     transition: 0.3s;
 }

 @media (max-width: 768px) {
     .mobile-menu-btn {
         display: flex;
         width: 30px;
         height: 25px;
         justify-content: space-around;
         margin-left: auto;
     }

     .mobile-menu-btn span {
         width: 100%;
         height: 3px;
         background: var(--neon-cyan);
         transition: 0.3s;
         flex-shrink: 0;
     }

     .nav-links {
         position: fixed;
         top: 0;
         right: -100%;
         width: 70%;
         height: 100vh;
         background: #0a0b10;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
         border-left: 2px solid var(--neon-pink);
         box-shadow: -10px 0 30px rgba(0, 0, 0, 0.9);
         z-index: 10000;
         padding: 0;
         margin: 0;
     }

     .nav-links.active {
         right: 0;
     }

     .nav-links li {
         width: 100%;
         text-align: center;
         margin: 1.5rem 0;
     }

     .nav-links a {
         font-size: 1.5rem;
         display: block;
         width: 100%;
         padding: 10px 0;
     }

     /* Hamburger Animation */
     .mobile-menu-btn.active span:nth-child(1) {
         transform: translateY(8px) rotate(45deg);
     }

     .mobile-menu-btn.active span:nth-child(2) {
         opacity: 0;
     }

     .mobile-menu-btn.active span:nth-child(3) {
         transform: translateY(-8px) rotate(-45deg);
     }

     .glitch {
         font-size: 2.5rem;
     }

     .hero p {
         font-size: 1.2rem;
     }

     .section-title {
         font-size: 2rem;
     }

     .skills-grid,
     .projects-grid {
         grid-template-columns: 1fr;
     }
 }

 /* Scrollbar */
 ::-webkit-scrollbar {
     width: 10px;
 }

 ::-webkit-scrollbar-track {
     background: var(--dark-bg);
 }

 ::-webkit-scrollbar-thumb {
     background: var(--neon-pink);
     border-radius: 5px;
 }

 ::-webkit-scrollbar-thumb:hover {
     background: var(--neon-cyan);
 }

 /* Modal Styling */
 .modal {
     display: none;
     position: fixed;
     z-index: 2000;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.9);
     backdrop-filter: blur(8px);
     justify-content: center;
     align-items: center;
 }

 .modal-content {
     position: relative;
     background: var(--darker-bg);
     padding: 20px;
     border: 2px solid var(--neon-cyan);
     border-radius: 15px;
     box-shadow: 0 0 30px var(--neon-cyan);
     max-width: 90%;
     max-height: 90%;
     width: 800px;
     display: flex;
     flex-direction: column;
 }

 .modal-close {
     position: absolute;
     top: -40px;
     right: 0;
     color: var(--neon-pink);
     font-size: 40px;
     font-weight: bold;
     cursor: pointer;
     transition: 0.3s;
 }

 .modal-close:hover {
     color: var(--neon-cyan);
     transform: rotate(90deg);
 }

 .modal-body {
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     overflow: hidden;
 }

 .modal-body img {
     max-width: 100%;
     max-height: 70vh;
     object-fit: contain;
     border-radius: 5px;
 }

 .modal-body iframe {
     width: 100%;
     height: 70vh;
     border: none;
 }

 /* Thumbnail Styling */
 .certificate-thumb {
     width: 100%;
     height: 150px;
     object-fit: cover;
     border-radius: 8px;
     margin-bottom: 1rem;
     cursor: pointer;
     border: 1px solid rgba(0, 255, 255, 0.2);
     transition: 0.3s;
 }

 .certificate-thumb:hover {
     border-color: var(--neon-cyan);
     transform: scale(1.02);
 }

 .view-btn {
     margin-top: 1rem;
     padding: 0.5rem 1rem;
     background: transparent;
     border: 1px solid var(--neon-cyan);
     color: var(--neon-cyan);
     font-family: 'Orbitron', sans-serif;
     font-size: 0.8rem;
     cursor: pointer;
     transition: 0.3s;
     border-radius: 5px;
 }

 .view-btn:hover {
     background: var(--neon-cyan);
     color: var(--darker-bg);
     box-shadow: 0 0 10px var(--neon-cyan);
 }