/* ===== Mismos estilos base que el index ===== */
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

 :root {
   --negro-base: #050A1F;
   --azul-profundo: #0A1B5C;
   --azul-corporativo: #0D2C8B;
   --azul-electrico: #2979FF;
   --cian-neon: #00E5FF;
   --turquesa-tech: #2CB9C6;
   --blanco-frio: #F4F8FF;
   --gris-azulado: #8FA9C9;
   --gris-oscuro: #1B1F2E;

   --glass-bg: rgba(10, 27, 92, 0.2);
   --glass-border: rgba(0, 229, 255, 0.15);
   --glass-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 229, 255, 0.1) inset;
   --glow-neon: 0 0 20px rgba(0, 229, 255, 0.3);
   --transition-slow: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
 }

 body {
   font-family: 'Inter', sans-serif;
   background-color: var(--negro-base);
   color: var(--blanco-frio);
   line-height: 1.6;
   overflow-x: hidden;
 }

 body::before {
   content: "";
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background:
     repeating-linear-gradient(45deg,
       rgba(0, 229, 255, 0.02) 0px,
       rgba(0, 229, 255, 0.02) 2px,
       transparent 2px,
       transparent 6px),
     radial-gradient(circle at 20% 30%, rgba(41, 121, 255, 0.1) 0%, transparent 40%),
     radial-gradient(circle at 80% 70%, rgba(0, 229, 255, 0.08) 0%, transparent 45%),
     linear-gradient(135deg, var(--negro-base) 0%, var(--azul-profundo) 70%, #0A1F4A 100%);
   pointer-events: none;
   z-index: 0;
 }

 .tech-grid {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-image:
     linear-gradient(rgba(0, 229, 255, 0.03) 1px, transparent 1px),
     linear-gradient(90deg, rgba(0, 229, 255, 0.03) 1px, transparent 1px);
   background-size: 60px 60px;
   z-index: 0;
   pointer-events: none;
   animation: gridMove 40s linear infinite;
 }

 @keyframes gridMove {
   0% {
     transform: translate(0, 0);
   }

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

 #particles-canvas {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
   z-index: 1;
 }

 @media (min-width: 901px) {
   body {
     cursor: none;
   }

   .custom-cursor {
     width: 32px;
     height: 32px;
     border: 2px solid var(--cian-neon);
     border-radius: 50%;
     position: fixed;
     pointer-events: none;
     z-index: 9999;
     transform: translate(-50%, -50%);
     transition: all 0.2s;
     box-shadow: 0 0 20px var(--cian-neon);
     backdrop-filter: blur(4px);
     background: rgba(0, 229, 255, 0.05);
   }

   .custom-cursor.hover {
     width: 48px;
     height: 48px;
     background-color: rgba(0, 229, 255, 0.15);
     border-color: var(--blanco-frio);
     box-shadow: 0 0 30px var(--azul-electrico);
   }
 }

 .container {
   max-width: 1400px;
   margin: 0 auto;
   padding: 2rem 2rem;
   position: relative;
   z-index: 5;
 }

 /* ===== NAVBAR ===== */
 .navbar {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0.8rem 2rem;
   background: rgba(5, 10, 31, 0.9);
   backdrop-filter: blur(12px);
   border-bottom: 1px solid var(--glass-border);
   position: sticky;
   top: 0;
   z-index: 100;
   box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
 }

 .logo-img {
   height: 60px;
   width: auto;
   filter: drop-shadow(0 0 10px var(--cian-neon));
 }

 .nav-links {
   display: flex;
   gap: 2rem;
   font-weight: 500;
 }

 .nav-links a {
   color: var(--blanco-frio);
   text-decoration: none;
   font-size: 1.1rem;
   padding: 0.5rem 0;
   transition: color 0.3s;
   font-family: 'Space Mono', monospace;
   text-transform: uppercase;
   letter-spacing: 1px;
 }

 .nav-links a:hover,
 .nav-links a.active {
   color: var(--cian-neon);
 }

 /* ===== TÍTULO DE PÁGINA ===== */
 .page-title {
   font-size: 3.5rem;
   font-weight: 800;
   text-align: center;
   margin: 3rem 0 5rem;
   background: linear-gradient(135deg, var(--blanco-frio) 0%, var(--cian-neon) 80%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   text-shadow: 0 0 30px rgba(0, 229, 255, 0.3);
 }

 /* ===== PROYECTOS (cada uno con mucho espacio) ===== */
 .proyecto {
   margin-bottom: 8rem;
 }

 .proyecto:last-child {
   margin-bottom: 4rem;
 }

 .proyecto-titulo {
   font-size: 2.8rem;
   font-weight: 700;
   margin-bottom: 1.5rem;
   color: var(--blanco-frio);
   text-align: left;
   border-left: 6px solid var(--cian-neon);
   padding-left: 1.5rem;
 }

 .proyecto-descripcion {
   font-size: 1.2rem;
   color: var(--gris-azulado);
   max-width: 900px;
   margin-bottom: 3rem;
   line-height: 1.8;
 }

 /* Collage de imágenes y videos */
 .proyecto-collage {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 2rem;
 }

 .collage-item {
   background: var(--glass-bg);
   backdrop-filter: blur(8px);
   border: 1px solid var(--glass-border);
   border-radius: 30px;
   padding: 1rem;
   box-shadow: var(--glass-shadow);
   transition: var(--transition-slow);
   display: flex;
   flex-direction: column;
   align-items: center;
 }

 .collage-item:hover {
   border-color: var(--turquesa-tech);
   transform: translateY(-5px);
 }

 .collage-item img,
 .collage-item video {
   width: 100%;
   height: 220px;
   object-fit: cover;
   border-radius: 20px;
   cursor: pointer;
   transition: transform 0.3s;
   background: #000;
 }

 .collage-item video {
   pointer-events: none;
   /* Para que no muestre controles, pero el clic va al modal */
 }

 .collage-item video:hover,
 .collage-item img:hover {
   transform: scale(1.02);
 }

 .collage-item .media-label {
   margin-top: 1rem;
   font-size: 0.9rem;
   color: var(--cian-neon);
   font-family: 'Space Mono', monospace;
 }

 /* ===== BOTÓN VOLVER ===== */
 .back-link {
   display: inline-block;
   margin-top: 3rem;
   padding: 0.8rem 2rem;
   border: 1px solid var(--cian-neon);
   border-radius: 50px;
   color: var(--blanco-frio);
   text-decoration: none;
   font-weight: 600;
   transition: all 0.3s;
 }

 .back-link:hover {
   background: rgba(0, 229, 255, 0.1);
   box-shadow: var(--glow-neon);
 }

 /* ===== MODAL PARA AMPLIAR ===== */
 .modal {
   display: none;
   position: fixed;
   z-index: 10000;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.95);
   backdrop-filter: blur(5px);
   align-items: center;
   justify-content: center;
   opacity: 0;
   transition: opacity 0.3s;
 }

 .modal.show {
   display: flex;
   opacity: 1;
 }

 .modal-content {
   max-width: 90%;
   max-height: 90%;
   object-fit: contain;
   border: 2px solid var(--cian-neon);
   border-radius: 10px;
   box-shadow: 0 0 30px var(--cian-neon);
 }

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

 .close-modal:hover {
   color: var(--cian-neon);
 }

 /* ===== FOOTER ===== */
 .footer {
   margin-top: 5rem;
   padding: 2rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-top: 1px solid var(--glass-border);
   background: rgba(5, 10, 31, 0.5);
   backdrop-filter: blur(10px);
 }

 .social-buttons {
   display: flex;
   gap: 1rem;
 }

 .btn-social {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   border: 1px solid var(--glass-border);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--cian-neon);
   transition: 0.3s;
 }

 .btn-social:hover {
   background: var(--cian-neon);
   color: var(--negro-base);
   transform: translateY(-3px);
 }

 /* ===== RESPONSIVE ===== */
 @media (max-width: 900px) {
   body {
     cursor: auto;
   }

   .custom-cursor {
     display: none;
   }

   .nav-links {
     gap: 1rem;
     flex-wrap: wrap;
     justify-content: center;
   }

   .page-title {
     font-size: 2.5rem;
   }

   .proyecto-titulo {
     font-size: 2.2rem;
   }

   .proyecto-descripcion {
     font-size: 1rem;
   }

   .proyecto-collage {
     grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
     gap: 1rem;
   }

   .collage-item img,
   .collage-item video {
     height: 180px;
   }
 }

 @media (max-width: 550px) {
   .container {
     padding: 1.5rem 1rem;
   }

   .proyecto {
     margin-bottom: 5rem;
   }

   .proyecto-titulo {
     font-size: 1.8rem;
   }

   .collage-item img,
   .collage-item video {
     height: 150px;
   }
 }
 /* Collage Grid */
.proyecto-collage {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 2rem;
}

.collage-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(0, 229, 255, 0.2);
    transition: transform 0.3s ease, border 0.3s ease;
}

.collage-item:hover {
    transform: translateY(-5px);
    border-color: #00e5ff;
}

.collage-item img, .collage-item video {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

/* Modal Estilo Glassmorphism */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 25, 47, 0.95);
    backdrop-filter: blur(10px);
}

.modal-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.modal-content {
    max-width: 85%;
    max-height: 80vh;
    border-radius: 10px;
    border: 1px solid rgba(0, 229, 255, 0.3);
}

#caption {
    color: #00e5ff;
    margin-top: 15px;
    font-family: 'Space Mono', monospace;
    font-size: 0.9rem;
}

.close-modal {
    position: absolute;
    top: 30px;
    right: 40px;
    color: #fff;
    font-size: 40px;
    cursor: pointer;
}
/* Responsive para que no se amontonen */
@media (max-width: 600px) {
    .tech-grid-container {
        grid-template-columns: 1fr;
    }
}
/* Ocultar el cursor por defecto en toda la web */
html, body {
    cursor: none !important;
}

/* Asegurar que los enlaces y botones tampoco muestren la "manito" nativa */
a, button, label, .btn-social, .ampliable {
    cursor: none !important;
}

/* Estilo base del cursor personalizado (por si no lo tienes así) */
#customCursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    background: rgba(0, 229, 255, 0.5); /* Cian neón */
    border-radius: 50%;
    pointer-events: none; /* Crucial: para que no bloquee los clics */
    z-index: 9999;
    transition: width 0.3s, height 0.3s, background 0.3s;
    mix-blend-mode: difference; /* Efecto tecnológico al pasar sobre colores */
}

/* Estado cuando pasas sobre un link */
#customCursor.hover {
    width: 40px;
    height: 40px;
    background: rgba(0, 229, 255, 0.2);
    border: 2px solid #00e5ff;
}
/* ESTRUCTURA DEL NAVBAR - Manteniendo tus colores */
.nav-links {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Lógica del Dropdown (Solo posicionamiento) */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    z-index: 1000;
    /* Usamos fondo traslúcido para que combine con tu Glassmorphism */
    background: rgba(0, 0, 0, 0.9); 
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px 0;
}

.dropdown-content a {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    font-size: 0.9rem;
    border: none !important; /* Evita conflictos */
}

.dropdown:hover .dropdown-content {
    display: block;
}

/* Botón Login - Solo estructura */
.btn-nav-login {
    margin-left: 10px;
    padding: 5px 15px !important;
    border-radius: 20px !important;
    border: 1px solid currentColor !important; /* Usa el color de texto actual */
    display: inline-flex;
    align-items: center;
    gap: 8px;
}