/* ==========================================================================
   HASIL LEMOKITA - SIMBIOSIS DIGITAL
   Hoja de estilos principal CSS3 Modular
   Autor/Creador Metatags: Norm
   ========================================================================== */

:root {
  /* Paleta Feline Digital Symbiosis */
  --bg-surface: #131314;
  --bg-surface-dim: #131314;
  --bg-surface-container: #1a1f2c;
  --bg-card-glass: rgba(26, 31, 44, 0.65);
  
  --color-primary: #c2c6d8;
  --color-secondary-gold: #eac07e;
  --color-tertiary-teal: #48dada;
  --color-action-coral: #ff7f50;
  --color-on-surface: #e5e2e3;
  --color-on-surface-variant: #c6c6cc;
  --color-outline-gold: rgba(234, 192, 126, 0.25);
  --color-outline-teal: rgba(72, 218, 218, 0.3);

  /* Fuentes */
  --font-heading: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Elevación y sombras bioluminiscentes */
  --glow-teal: 0 0 20px rgba(72, 218, 218, 0.35);
  --glow-coral: 0 0 25px rgba(255, 127, 80, 0.45);
  --glow-gold: 0 0 20px rgba(234, 192, 126, 0.25);
}

/* Reset básico y scroll suave */
html {
  scroll-behavior: smooth;
  font-family: var(--font-heading);
  background-color: var(--bg-surface);
  color: var(--color-on-surface);
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  min-height: 100vh;
  background-color: var(--bg-surface);
}

/* Fondo de constelación / circuito */
.constellation-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  background: radial-gradient(circle at 50% 30%, #1a1f2c 0%, #131314 100%);
  background-attachment: fixed;
}

.circuit-pattern {
  background-image: radial-gradient(circle at 2px 2px, rgba(234, 192, 126, 0.06) 1px, transparent 0);
  background-size: 36px 36px;
}

/* Glassmorphism Tarjetas */
.glass-card {
  background: var(--bg-card-glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--color-outline-gold);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-card:hover {
  border-color: rgba(72, 218, 218, 0.45);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), var(--glow-gold);
}

/* Personalización de barra de desplazamiento */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #131314;
}
::-webkit-scrollbar-thumb {
  background: #2a2a2b;
  border-radius: 4px;
  border: 1px solid rgba(234, 192, 126, 0.2);
}
::-webkit-scrollbar-thumb:hover {
  background: #48dada;
}