/* THEME: CLINICAL DARK / PRECISION ENGINEERING 
   Palette: Slate 900 (Base) + Cyan 400 (Highlight)
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=JetBrains+Mono:wght@400;700&display=swap');

:root {
  --background: #020617; /* Slate 950 */
  --surface: #0f172a;    /* Slate 900 */
  --primary: #22d3ee;    /* Cyan 400 */
  --text-main: #f8fafc;  /* Slate 50 */
  --text-secondary: #94a3b8; /* Slate 400 */
  --border: #1e293b;     /* Slate 800 */

  --glass-border: rgba(34, 211, 238, 0.2);
  --glass-bg: rgba(2, 6, 23, 0.4); 
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--background);
  background-image: 
    linear-gradient(rgba(34, 211, 238, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  color: var(--text-main);
  font-family: 'Inter', sans-serif;
  cursor: none; 
  overflow-x: hidden;
}

.font-code {
  font-family: 'JetBrains Mono', monospace;
}

/* --- COMPONENTES VISUAIS --- */

.tech-glass {
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.tech-glass:hover {
  border-color: rgba(34, 211, 238, 0.5);
  box-shadow: 0 0 25px rgba(34, 211, 238, 0.15);
  transform: translateY(-2px);
}

.btn {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: none;
}

header nav a, #mobile-menu a {
  position: relative;
  transition: color 0.3s ease;
}

header nav a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -4px;
  left: 0;
  background-color: var(--primary);
  transition: width 0.3s ease;
}

header nav a:hover::after,
.nav-active::after {
  width: 100%;
}

.nav-active {
  color: var(--primary) !important;
}

.cursor-dot {
  width: 10px;
  height: 10px;
  background-color: var(--primary);
  border-radius: 50%;
  position: fixed;
  top: 0; left: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9999;
  transition: width 0.2s, height 0.2s, background-color 0.2s;
  mix-blend-mode: difference;
}

.cursor-dot.hover {
  width: 50px;
  height: 50px;
  background-color: transparent;
  border: 1px solid var(--primary);
  opacity: 1;
}

@media (max-width: 768px) {
  .cursor-dot { display: none; }
  body { cursor: auto; }
}

.privacy-page {
  background-image: none;
  background-color: var(--background);
}