/* === VARIABLES GLOBALES === */
:root {
  /* Colores principales */
  --primary-color: #8a4fff;
  --secondary-color: #ff6b9d;
  --dark-color: #333;
  --light-color: #f9f9f9;
  --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  
  /* Tipografía */
  --font-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-size-base: 16px;
  --line-height-base: 1.6;
  
  /* Espaciados */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  
  /* Breakpoints */
  --breakpoint-mobile: 768px;
  --breakpoint-tablet: 1024px;
  --breakpoint-desktop: 1200px;
  
  /* Transiciones */
  --transition-fast: 0.3s ease;
  --transition-normal: 0.5s ease;
  --transition-slow: 1s ease;
}

/* === RESET Y ESTILOS BASE === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  background-color: #f5f5f5;
  color: var(--dark-color);
  overflow-x: hidden;
}

/* === MEDIAQUERIES REUTILIZABLES === */
@custom-media --mobile (max-width: 768px);
@custom-media --tablet (max-width: 1024px);
@custom-media --desktop (min-width: 1025px);