@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Share+Tech+Mono&display=swap');

/* RESET GLOBAL: Esto evita que el menú se corte a la derecha */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg-color: #050505;
    --text-main: #e0e0e0;
    --neon-cyan: #00f3ff;
    --neon-pink: #ff00ff;
    --neon-green: #0aff00;
}

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: 'Share Tech Mono', monospace;
    background-image: 
        linear-gradient(rgba(0, 243, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 243, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    overflow-x: hidden;
}

/* HEADER FIX */
header {
    background: rgba(5, 5, 5, 0.95);
    border-bottom: 2px solid var(--neon-cyan);
    padding: 15px 5%; /* Padding porcentual para que no se salga */
    position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
    display: flex; justify-content: space-between; align-items: center;
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.2);
}

.logo { font-family: 'Orbitron', sans-serif; font-weight: bold; color: var(--neon-cyan); letter-spacing: 2px; }

nav a {
    color: var(--text-main); text-decoration: none; margin-left: 20px; font-size: 1rem;
    transition: 0.3s; text-transform: uppercase;
}
nav a:hover { color: var(--neon-pink); text-shadow: 0 0 8px var(--neon-pink); }

/* CONTENIDO */
.container { max-width: 1100px; margin: 0 auto; padding: 120px 20px 50px; }

h1, h2, h3 { font-family: 'Orbitron', sans-serif; text-transform: uppercase; }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); color: white; margin-bottom: 20px; text-shadow: 2px 2px var(--neon-pink); }
h2 { color: var(--neon-pink); border-bottom: 1px solid var(--neon-pink); display: inline-block; padding-bottom: 5px; margin-bottom: 30px; margin-top: 50px;}

.role-badge {
    border: 1px solid var(--neon-cyan); color: var(--neon-cyan); padding: 5px 10px;
    margin: 5px 5px 5px 0; font-size: 0.85rem; display: inline-block;
}

/* GRID & CARDS */
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }

.card {
    background: rgba(20, 20, 20, 0.8); border: 1px solid #333; padding: 25px; transition: 0.3s;
}
.card:hover { border-color: var(--neon-green); transform: translateY(-5px); box-shadow: 0 5px 15px rgba(10, 255, 0, 0.15); }
.card h3 { color: var(--neon-green); margin-top: 0; }

/* BOTONES */
.btn-cyber {
    display: inline-block; padding: 15px 30px; margin-top: 20px;
    border: 2px solid var(--neon-cyan); color: var(--neon-cyan);
    text-decoration: none; font-family: 'Orbitron', sans-serif; font-weight: bold;
    transition: 0.3s; background: transparent; cursor: pointer;
}
.btn-cyber:hover { background: var(--neon-cyan); color: black; box-shadow: 0 0 20px var(--neon-cyan); }

footer { text-align: center; margin-top: 50px; padding: 40px; border-top: 1px solid #333; color: #666; font-size: 0.9rem; }
footer a { color: var(--neon-cyan); text-decoration: none; }

/* MÓVIL */
@media (max-width: 768px) {
    header { flex-direction: column; gap: 15px; padding: 15px; }
    .container { padding-top: 140px; }
    nav { flex-wrap: wrap; justify-content: center; gap: 15px; }
    nav a { margin: 0 10px; }
}

/* =========================================
   ANIMACIONES CYBERPUNK (AGREGADO)
   ========================================= */


/* 2. ENTRADA DE DATOS (Fade In) */
/* Hacemos que las tarjetas y secciones aparezcan suavemente */
.card, section, h1, p, img {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0; /* Empiezan invisibles */
}

/* Retrasos para que no aparezca todo al mismo tiempo (Efecto cascada) */
h1 { animation-delay: 0.1s; }
p { animation-delay: 0.3s; }
.card:nth-child(1) { animation-delay: 0.4s; }
.card:nth-child(2) { animation-delay: 0.6s; }
.card:nth-child(3) { animation-delay: 0.8s; }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 3. EFECTO GLITCH (Distorsión) EN HOVER */
/* Al pasar el mouse por el Título Principal */

h1:hover {
    /* Agregamos opacity: 1 para que no desaparezca */
    opacity: 1 !important; 
    animation: glitch 0.3s cubic-bezier(.25, .46, .45, .94) both infinite;
    color: var(--neon-pink);
    text-shadow: 2px 0 var(--neon-cyan), -2px 0 var(--neon-green);
}

@keyframes glitch {
    0% { transform: translate(0); opacity: 1; }
    20% { transform: translate(-2px, 2px); opacity: 1; }
    40% { transform: translate(-2px, -2px); opacity: 1; }
    60% { transform: translate(2px, 2px); opacity: 1; }
    80% { transform: translate(2px, -2px); opacity: 1; }
    100% { transform: translate(0); opacity: 1; }
}

/* 4. CURSOR PARPADEANTE */
/* Agrega un guion bajo parpadeante después de los títulos h2 */
h2::after {
    content: "_";
    animation: blink 1s step-end infinite;
    margin-left: 5px;
    color: var(--neon-green);
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* =========================================
   INTERFAZ TÁCTICA (CURSORES Y SELECCIÓN)
   ========================================= */

/* 1. CURSOR ESTILO MIRA DE PRECISIÓN */
body {
    /* Cambia la flecha por una cruz de precisión */
    cursor: crosshair; 
}

/* Cuando pasas sobre un enlace o botón, el cursor cambia */
a, button, .btn-cyber, .card {
    /* Mantiene la mira pero indica que es clicable (o puedes usar 'pointer') */
    cursor: cell; 
}

/* 2. SELECCIÓN DE TEXTO NEÓN (Adiós al azul aburrido) */
::selection {
    background: var(--neon-pink); /* Fondo rosa al seleccionar */
    color: #000; /* Texto negro para contraste */
    text-shadow: none;
}

/* Para navegadores Firefox */
::-moz-selection {
    background: var(--neon-pink);
    color: #000;
    text-shadow: none;
}

/* 3. SCROLLBAR PERSONALIZADO (Chrome/Edge/Safari) */
/* El riel de la barra */
::-webkit-scrollbar {
    width: 8px;
    background: #000; 
}

/* El "pulgar" que se mueve */
::-webkit-scrollbar-thumb {
    background: var(--neon-cyan); 
    border-radius: 0; /* Cuadrado, nada de bordes redondos */
    border: 1px solid var(--neon-cyan);
}

/* Al pasar el mouse por la barra */
::-webkit-scrollbar-thumb:hover {
    background: var(--neon-pink); 
    border-color: var(--neon-pink);
    box-shadow: 0 0 10px var(--neon-pink);
}


/* =========================================
   WARGAMES 2077: TRAFFIC CONTROL
   ========================================= */

.tactical-grid {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -1;
    pointer-events: none;
    
    /* 1. LA GRILLA (Sutil y técnica) */
    background-image: 
        linear-gradient(rgba(0, 243, 255, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 243, 255, 0.1) 1px, transparent 1px);
    background-size: 80px 80px;
    
    /* Inclinación 3D leve para profundidad (Opcional) */
    transform: perspective(1000px) rotateX(15deg) scale(1.1);
    transform-origin: top center;
    opacity: 0.5;
}

/* 2. EFECTO VIÑETA (Bordes oscuros) */
.tactical-grid::before {
    content: "";
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle, transparent 50%, #050505 100%);
}

/* 3. LOS VEHÍCULOS (Puntos Verdes) */
.vehicle {
    position: absolute;
    width: 6px; height: 6px; /* Puntos pequeños */
    background-color: var(--neon-green);
    box-shadow: 0 0 8px var(--neon-green); /* Resplandor sutil */
    opacity: 0; /* Empiezan invisibles */
}

/* --- ANIMACIONES DE RUTAS --- */

/* Vehículo 1: Horizontal Lento (Izquierda a Derecha) */
.v1 {
    top: 30%; left: -10%;
    animation: traffic-h 15s linear infinite;
    animation-delay: 0s;
}

/* Vehículo 2: Horizontal Rápido (Derecha a Izquierda) */
.v2 {
    top: 65%; right: -10%;
    background-color: var(--neon-cyan); /* Variación de color cian */
    box-shadow: 0 0 8px var(--neon-cyan);
    animation: traffic-h-rev 10s linear infinite;
    animation-delay: 5s;
}

/* Vehículo 3: Vertical (Arriba a Abajo) */
.v3 {
    left: 20%; top: -10%;
    animation: traffic-v 12s linear infinite;
    animation-delay: 2s;
}

/* Vehículo 4: Vertical (Abajo a Arriba) */
.v4 {
    left: 80%; bottom: -10%;
    animation: traffic-v-rev 18s linear infinite;
    animation-delay: 8s;
}

/* DEFINICIÓN DE MOVIMIENTOS */
@keyframes traffic-h {
    0% { left: -5%; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { left: 105%; opacity: 0; }
}

@keyframes traffic-h-rev {
    0% { right: -5%; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { right: 105%; opacity: 0; }
}

@keyframes traffic-v {
    0% { top: -5%; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: 105%; opacity: 0; }
}

@keyframes traffic-v-rev {
    0% { bottom: -5%; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { bottom: 105%; opacity: 0; }
}

/* 3. VIÑETA (OSCURECER BORDES ESTILO MONITOR VIEJO) */
.tactical-grid::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle, transparent 60%, #050505 100%);
}

@keyframes radar-sweep {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


#contacto {
    position: relative;
    z-index: 2000; /* Prioridad alta */
    pointer-events: auto !important; /* Forza que el mouse funcione aquí */
}