:root {
/* Otras propiedades */
  --color-menta: #2845D6;
  --color-naranja: #F68048;
  --color-fondo-oscuro: #060E3A;
  --color-negro: #030520;}

body {
/* Fondos */
  background: linear-gradient(135deg, var(--color-negro) 0%, var(--color-fondo-oscuro) 100%);}

#particles-js {
/* Posicionamiento */
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;

  /* Dimensiones */
  width: 100%;
  height: 100vh;

  /* Interactividad */
  pointer-events: none;}

#particles-js canvas {
/* Transiciones y animaciones */
  transition: transform 0.5s ease-out;

  /* Otras propiedades */
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 5px var(--color-menta));}

.pjs-line-color-mint {
/* Otras propiedades */
  stroke: var(--color-menta) !important;
  stroke-width: 1.5px !important;
  filter: drop-shadow(0 0 5px var(--color-menta));}

.pjs-line-color-orange {
/* Otras propiedades */
  stroke: var(--color-naranja) !important;
  stroke-width: 1.5px !important;
  filter: drop-shadow(0 0 5px var(--color-naranja));}

.pjs-dot {
/* Otras propiedades */
  filter: drop-shadow(0 0 3px currentColor);}

#circuit-lines-container {
/* Posicionamiento */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;

  /* Dimensiones */
  width: 100%;
  height: 100%;

  /* Interactividad */
  pointer-events: none;}

.hero {
/* Posicionamiento */
  position: relative;

  /* Modelo de caja */
  overflow: hidden;

  /* Dimensiones */
  height: 100vh;

  /* Fondos */
  background: linear-gradient(135deg, var(--color-negro) 0%, var(--color-fondo-oscuro) 100%);

  /* Otras propiedades */
  perspective: 1000px;}

.hero-content {
/* Posicionamiento */
  position: relative;
  z-index: 10;

  /* Dimensiones */
  max-width: 800px;

  /* Relleno */
  padding: 2rem;

  /* Tipografía */
  text-align: center;

  /* Transiciones y animaciones */
  transition: transform 0.1s ease-out;

  /* Otras propiedades */
  transform-style: preserve-3d;}

.hero-content h1 {
/* Colores y efectos */
  text-shadow: 0 0 10px rgba(40, 69, 214, 0.5);

  /* Transiciones y animaciones */
  animation: pulse 3s infinite alternate;}

.cta-button {
/* Posicionamiento */
  position: relative;

  /* Modelo de caja */
  overflow: hidden;}

.cta-button::before {
/* Posicionamiento */
  position: absolute;
  top: -50%;
  left: -50%;
  z-index: -1;

  /* Dimensiones */
  width: 200%;
  height: 200%;

  /* Fondos */
  background: linear-gradient(45deg, 
    rgba(40, 69, 214, 0) 0%, 
    rgba(40, 69, 214, 0.1) 50%, 
    rgba(246, 128, 72, 0) 100%);

  /* Transiciones y animaciones */
  animation: shine 3s infinite;

  /* Otras propiedades */
  content: '';
  transform: rotate(45deg);}

.binary-code {
/* Posicionamiento */
  position: absolute;
  bottom: 20px;
  left: 20px;

  /* Tipografía */
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;

  /* Colores y efectos */
  color: rgba(40, 69, 214, 0.7);
  text-shadow: 0 0 5px rgba(40, 69, 214, 0.5);
  opacity: 0.7;

  /* Transiciones y animaciones */
  animation: blink 1.5s infinite alternate;}

.circuit-lines {
/* Posicionamiento */
  position: absolute;
  top: 0;
  right: 0;

  /* Dimensiones */
  width: 150px;
  height: 150px;

  /* Fondos */
  background-image: linear-gradient(rgba(246, 128, 72, 0.5) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(246, 128, 72, 0.5) 1px, transparent 1px);
  background-size: 20px 20px;

  /* Colores y efectos */
  opacity: 0.3;

  /* Interactividad */
  pointer-events: none;

  /* Otras propiedades */
  transform: rotate(45deg);}

.hero {
/* Otras propiedades */
  perspective: 1000px;}

.hero-content {
/* Transiciones y animaciones */
  transition: transform 0.1s ease-out;

  /* Otras propiedades */
  transform-style: preserve-3d;}

.hero::before {
/* Posicionamiento */
  position: absolute;
  top: 70%;
  left: 10%;

  /* Tipografía */
  font-family: 'Courier New', monospace;
  font-size: 2rem;

  /* Colores y efectos */
  color: rgba(246, 128, 72, 0.7);
  text-shadow: 0 0 10px rgba(246, 128, 72, 0.5);
  opacity: 0.5;

  /* Otras propiedades */
  content: '>';}

.hero::after {
/* Posicionamiento */
  position: absolute;
  bottom: 10%;
  right: 10%;

  /* Tipografía */
  font-family: 'Courier New', monospace;
  font-size: 1.5rem;

  /* Colores y efectos */
  color: rgba(40, 69, 214, 0.7);
  text-shadow: 0 0 10px rgba(40, 69, 214, 0.5);
  opacity: 0.5;

  /* Otras propiedades */
  content: '~$';}

.terminal-icon {
/* Posicionamiento */
  position: absolute;
  bottom: 40px;
  right: 30px;

  /* Tipografía */
  font-family: 'Courier New', monospace;
  font-size: 1.2rem;

  /* Colores y efectos */
  color: var(--color-menta);
  opacity: 0.8;}

.blinking-cursor {
/* Transiciones y animaciones */
  animation: blink 1s step-end infinite;}

.wolf-silhouette {
/* Posicionamiento */
  position: absolute;
  bottom: 80px;
  right: 80px;

  /* Dimensiones */
  width: 100px;
  height: 60px;

  /* Fondos */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60' fill='%232845D6'%3E%3Cpath d='M90,30 L85,25 L80,15 L70,10 L65,5 L60,5 L55,10 L50,5 L45,10 L40,5 L35,5 L30,10 L20,15 L15,25 L10,30 L5,40 L10,45 L15,50 L20,55 L25,55 L30,50 L35,48 L40,50 L45,48 L50,50 L55,48 L60,50 L65,48 L70,50 L75,55 L80,55 L85,50 L90,45 L95,40 L90,30z M30,25 A5,5,0,1,1,30,35 A5,5,0,1,1,30,25z M70,25 A5,5,0,1,1,70,35 A5,5,0,1,1,70,25z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;

  /* Colores y efectos */
  opacity: 0.4;

  /* Transiciones y animaciones */
  transition: transform 0.3s, opacity 0.3s;

  /* Otras propiedades */
  filter: drop-shadow(0 0 5px var(--color-menta));}

.wolf-silhouette:hover {
/* Colores y efectos */
  opacity: 0.7;

  /* Otras propiedades */
  filter: drop-shadow(0 0 10px var(--color-menta));
  transform: scale(1.05);}

.hero {
/* Posicionamiento */
  position: relative;

  /* Modelo de caja */
  overflow: hidden;

  /* Dimensiones */
  min-height: 100vh;

  /* Fondos */
  background: linear-gradient(125deg, var(--color-negro) 0%, var(--color-fondo-oscuro) 100%);}

.hero:before {
/* Posicionamiento */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;

  /* Fondos */
  background: radial-gradient(circle at 20% 30%, rgba(40, 69, 214, 0.05) 0%, transparent 20%),
    radial-gradient(circle at 80% 70%, rgba(246, 128, 72, 0.05) 0%, transparent 20%);

  /* Otras propiedades */
  content: '';}

.hero-content:before {
/* Posicionamiento */
  position: absolute;
  top: -50%;
  left: -50%;
  z-index: -1;

  /* Dimensiones */
  width: 200%;
  height: 200%;

  /* Fondos */
  background: linear-gradient(
    45deg, 
    rgba(40, 69, 214, 0) 0%, 
    rgba(40, 69, 214, 0.03) 50%, 
    rgba(246, 128, 72, 0) 100%
  );

  /* Interactividad */
  pointer-events: none;

  /* Otras propiedades */
  content: '';
  transform: rotate(45deg);}

#particles-js {
/* Posicionamiento */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;

  /* Dimensiones */
  width: 100%;
  height: 100%;}

#particles-js canvas {
/* Otras propiedades */
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 2px var(--color-menta));}

#circuit-lines-container {
/* Posicionamiento */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;

  /* Dimensiones */
  width: 100%;
  height: 100%;

  /* Interactividad */
  pointer-events: none;}

.hero:hover #particles-js canvas {
/* Transiciones y animaciones */
  animation: glow 3s infinite alternate;}