/* =============================================================================
   RSE Design System - Variables y Utilidades Centralizadas
   Rafael Soluciones Electronica
   ============================================================================= */

:root {
  /* === Brand Colors === */
  --rse-cyan: #00d4ff;
  --rse-cyan-rgb: 0, 212, 255;
  --rse-teal: #17a2b8;
  --rse-teal-rgb: 23, 162, 184;
  --rse-teal-dark: #138496;
  --rse-blue: #0d6efd;
  --rse-blue-dark: #0056b3;

  /* === Neutral Palette (Dark) === */
  --rse-dark-900: #0a0e12;
  --rse-dark-800: #0c1426;
  --rse-dark-700: #1a1d23;
  --rse-dark-700-rgb: 26, 29, 35;
  --rse-dark-600: #2d3748;
  --rse-dark-500: #3d4956;

  /* === Neutral Palette (Light) === */
  --rse-light-100: #f5f8fa;
  --rse-light-200: #f0f4f8;
  --rse-light-300: #e8eef3;

  /* === Text Colors === */
  --rse-text-primary: #e2e8f0;
  --rse-text-secondary: #94a3b8;
  --rse-text-muted: rgba(255, 255, 255, 0.6);
  --rse-text-dark: #1a1d23;
  --rse-text-dark-secondary: #4a5568;

  /* === Accent Colors === */
  --rse-success: #28a745;
  --rse-danger: #dc3545;
  --rse-warning: #ffc107;
  --rse-orange: #fd7e14;
  --rse-purple: #6f42c1;
  --rse-whatsapp: #25d366;

  /* === Typography Scale (responsive with clamp) === */
  --fs-hero: clamp(2.5rem, 5vw + 1rem, 4.5rem);
  --fs-h1: clamp(2rem, 4vw + 0.5rem, 3.5rem);
  --fs-h2: clamp(1.75rem, 3vw + 0.5rem, 2.75rem);
  --fs-h3: clamp(1.25rem, 2vw + 0.5rem, 1.75rem);
  --fs-h4: clamp(1.1rem, 1.5vw + 0.5rem, 1.35rem);
  --fs-body: clamp(0.95rem, 1vw + 0.5rem, 1.1rem);
  --fs-small: clamp(0.8rem, 0.8vw + 0.4rem, 0.9rem);
  --fs-xs: 0.75rem;

  /* === Spacing Scale === */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;
  --space-section: clamp(4rem, 8vw, 7rem);

  /* === Glassmorphism System === */
  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-bg-hover: rgba(255, 255, 255, 0.10);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-blur: blur(16px);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

  /* Light variant */
  --glass-light-bg: rgba(255, 255, 255, 0.7);
  --glass-light-border: rgba(0, 212, 255, 0.12);
  --glass-light-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);

  /* === Shadows === */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.4);
  --shadow-glow-cyan: 0 0 20px rgba(0, 212, 255, 0.25);
  --shadow-glow-teal: 0 0 20px rgba(23, 162, 184, 0.25);

  /* === Border Radius === */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 25px;
  --radius-pill: 50px;

  /* === Transitions === */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
  --transition-bounce: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* === Gradients === */
  --gradient-brand: linear-gradient(135deg, var(--rse-cyan), var(--rse-teal));
  --gradient-brand-45: linear-gradient(45deg, var(--rse-cyan), var(--rse-teal));
  --gradient-button: linear-gradient(135deg, var(--rse-blue) 0%, #0dcaf0 100%);
  --section-dark-bg: linear-gradient(160deg, var(--rse-dark-700) 0%, var(--rse-dark-600) 50%, var(--rse-dark-700) 100%);
  --section-light-bg: linear-gradient(160deg, var(--rse-light-200) 0%, var(--rse-light-300) 50%, var(--rse-light-100) 100%);
}

/* =============================================================================
   Shared Section Utilities
   ============================================================================= */

/* Dark section base */
.section-dark {
  background: var(--section-dark-bg);
  color: var(--rse-text-primary);
  position: relative;
  overflow: hidden;
}

.section-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(var(--rse-cyan-rgb), 0.04) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 50%, rgba(var(--rse-teal-rgb), 0.03) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.section-dark > * {
  position: relative;
  z-index: 1;
}

/* Light section base */
.section-light {
  background: var(--section-light-bg);
  color: var(--rse-text-dark);
  position: relative;
  overflow: hidden;
}

.section-light::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 80%, rgba(var(--rse-cyan-rgb), 0.04) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(var(--rse-teal-rgb), 0.03) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.section-light > * {
  position: relative;
  z-index: 1;
}

/* Consistent section padding */
.section-padding {
  padding: var(--space-section) 0;
}

/* =============================================================================
   Shared Section Headers
   ============================================================================= */

.section-header {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.section-title {
  font-size: var(--fs-h2);
  font-weight: 700;
  margin-bottom: var(--space-xs);
  line-height: 1.2;
}

.section-dark .section-title {
  background: linear-gradient(45deg, #ffffff, #e3f2fd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-light .section-title {
  color: var(--rse-dark-700);
}

.section-title .accent {
  color: var(--rse-cyan);
  -webkit-text-fill-color: var(--rse-cyan);
}

.section-divider {
  width: 60px;
  height: 3px;
  background: var(--gradient-brand);
  margin: var(--space-sm) auto;
  border-radius: 2px;
  border: none;
}

.section-subtitle {
  font-size: var(--fs-body);
  color: var(--rse-text-secondary);
  max-width: 700px;
  margin: var(--space-sm) auto 0;
  line-height: 1.6;
}

.section-light .section-subtitle {
  color: var(--rse-text-dark-secondary);
}

/* =============================================================================
   Shared Card Components
   ============================================================================= */

/* Dark card (solid, no glass effect for performance) */
.card-glass {
  background: rgba(26, 34, 48, 0.95);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base);
}

.card-glass:hover {
  transform: translateY(-4px);
  box-shadow: var(--glass-shadow);
}

/* Light elevated card */
.card-elevated {
  background: var(--glass-light-bg);
  border: 1px solid var(--glass-light-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-light-shadow);
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base);
}

.card-elevated:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.10);
}

/* =============================================================================
   WhatsApp FAB
   ============================================================================= */

.whatsapp-fab {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 1050;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  border-radius: 50%;
  background: var(--rse-whatsapp);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.35);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.whatsapp-fab:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 25px rgba(37, 211, 102, 0.5);
  color: #fff;
}

/* =============================================================================
   Navbar
   ============================================================================= */

.navbar-rse {
  background: var(--rse-dark-900) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: all var(--transition-base);
}

/* =============================================================================
   Brand Buttons
   ============================================================================= */

.btn-rse-primary {
  background-color: var(--rse-cyan);
  color: var(--rse-dark-900);
  font-weight: 600;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.75rem 2rem;
  transition: all var(--transition-base);
}

.btn-rse-primary:hover {
  background-color: #00b8d9;
  color: var(--rse-dark-900);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(var(--rse-cyan-rgb), 0.3);
}

.btn-rse-outline {
  background: transparent;
  color: var(--rse-cyan);
  font-weight: 600;
  border: 2px solid var(--rse-cyan);
  border-radius: var(--radius-sm);
  padding: 0.65rem 2rem;
  transition: all var(--transition-base);
}

.btn-rse-outline:hover {
  background: rgba(var(--rse-cyan-rgb), 0.1);
  color: var(--rse-cyan);
  transform: translateY(-2px);
}

/* =============================================================================
   Utility Classes
   ============================================================================= */

.text-rse-cyan {
  color: var(--rse-cyan) !important;
}

.text-rse-teal {
  color: var(--rse-teal) !important;
}

.text-rse-cyan-glow {
  color: var(--rse-cyan) !important;
  text-shadow: 0 2px 8px rgba(var(--rse-cyan-rgb), 0.3);
}