@font-face {
  font-family: 'Venera';
  src: url('../fonts/venera/Venera-900.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ===== COLORES PRINCIPALES - ESQUEMA MORADO/NEGRO ===== */
  --color-primary: #ffffff;           /* Morado Principal (para textos y detalles) */
  --color-primary-light: #ffffff;     /* Morado claro */
  --color-primary-dark: #ffffff;      /* Morado oscuro */
  --color-secondary: #c084fc;         /* Morado Acento más claro */
  --color-accent: #9333ea;            /* Morado intenso para highlights */

  /* ===== COLORES DE TEXTO INVERTIDOS ===== */
  --text-light: #8b5cf6;              /* Textos principales en morado */
  --text-dark: #ffffff;               /* Textos secundarios en blanco */
  --text-muted: rgb(236, 236, 236);     /* Morado suave */
  --text-muted-dark: rgba(139, 92, 246, 0.5); /* Morado más suave */

  /* ===== FONDOS INVERTIDOS ===== */
  --bg-main: #000000;                 /* Fondo principal negro */
  --bg-section: #111111;              /* Fondo de secciones negro suave */
  --bg-card: #1a1a1a;                 /* Fondo de tarjetas negro claro */
  --bg-dark: #000000;                 /* Negro absoluto */

  /* ===== ESTADOS ===== */
  --color-positive: #4caf50;          /* Verde para positivos */
  --color-negative: #f44336;          /* Rojo para negativos */

  /* ===== BORDES Y RADIOS ===== */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 25px;

  /* ===== ESPACIADOS ===== */
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-xxl: 3rem;
  --spacing-hero: 4rem;

  /* ===== TIPOGRAFÍA ===== */
  --font-size-xs: 0.8rem;
  --font-size-sm: 0.9rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-xxl: 2rem;
  --font-size-xxxl: 3rem;
  --font-size-hero: 4rem;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ===== SOMBRAS CON MORADO ===== */
  --shadow-sm: 0 2px 5px rgba(139, 92, 246, 0.10);
  --shadow-md: 0 4px 8px rgba(139, 92, 246, 0.15);
  --shadow-lg: 0 8px 16px rgba(139, 92, 246, 0.20);
  --shadow-glow: 0 0 10px rgba(139, 92, 246, 0.3);
  --shadow-glow-intense: 0 0 20px rgba(238, 200, 31, 0.863);

  /* ===== GRADIENTES CON MORADO ===== */
  --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 50%, var(--color-accent) 100%);
  --gradient-dark: linear-gradient(135deg, var(--bg-main) 0%, var(--bg-section) 100%);
  --gradient-purple: linear-gradient(45deg, #8b5cf6, #c084fc, #9333ea);
  --gradient-purple-reverse: linear-gradient(225deg, #8b5cf6, #c084fc, #9333ea);

  /* ===== BORDES CON MORADO ===== */
  --border-primary: 1px solid var(--color-primary);
  --border-secondary: 1px solid rgba(139, 92, 246, 0.3);
  --border-glow: 1px solid rgba(139, 92, 246, 0.5);

  /* ===== CONTENEDOR ===== */
  --container-width: 1200px;

  /* ===== GRID ===== */
  --grid-gap: var(--spacing-lg);

  /* ===== TRANSICIONES ===== */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;

  /* ===== EFECTOS ESPECIALES ===== */
  --glow-effect: drop-shadow(0 0 5px rgba(139, 92, 246, 0.6));
  --text-glow: 0 0 8px rgba(147, 51, 234, 0.8);
  --box-glow: 0 0 15px rgba(139, 92, 246, 0.4);
}

/* ===== ESTILOS BASE PARA EL NUEVO ESQUEMA ===== */


/* ===== CLASES HELPER PARA EFECTOS DORADOS ===== */
.text-glow {
  text-shadow: var(--text-glow);
}

.box-glow {
  box-shadow: var(--box-glow);
}

.border-glow {
  border: var(--border-glow);
  box-shadow: var(--shadow-glow);
}

.gradient-text {
  background: var(--gradient-purple);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===== ANIMACIÓN DE BRILLO MORADO ===== */
@keyframes purple-pulse {
  0%, 100% {
    text-shadow: 0 0 5px rgba(139, 92, 246, 0.5);
  }
  50% {
    text-shadow: 0 0 15px rgba(147, 51, 234, 0.8);
  }
}

.pulse-purple {
  animation: purple-pulse 2s ease-in-out infinite;
}