/*
 * CloudStudio IoT - Enhanced Component System - IMPORTANT VERSION
 * Version: 1.2.0 - HERO SECTION UPDATE
 * Nuevas mejoras: Hero section, utilidades avanzadas, fixes CSS actual, temas contextuales, optimizaciones
 * Compatible con: Elementor, WordPress, HTML estático
 * THIS VERSION ADDS !important TO CSS PROPERTIES FOR MAXIMUM ELEMENTOR OVERRIDE
 */

/* ====================================
   🎨 DESIGN TOKENS MEJORADOS
==================================== */

:root {
  /* 🌈 COLORES PRINCIPALES - Siguiendo jerarquía de brand guidelines */
  --cs-primary: #6C46CE;           /* Violeta - Color principal */
  --cs-secondary: #DF5676;         /* Coral - Segundo en jerarquía */
  --cs-accent-uva: #963D7A;        /* Uva - Tercer color */
  --cs-accent-cielo: #3E98BC;      /* Cielo - Colores fríos */
  --cs-accent-aguamarina: #89D0D6; /* Aguamarina - Colores fríos */
  
  /* 🎨 GRADIENTES OFICIALES - Según brand guidelines */
  --cs-gradient-primary: linear-gradient(135deg, #6C46CE 0%, #DF5676 100%);
  --cs-gradient-clarity: linear-gradient(135deg, #6C46CE 0%, #3E98BC 100%);
  --cs-gradient-trust: linear-gradient(135deg, #3E98BC 0%, #89D0D6 100%);
  --cs-gradient-strength: linear-gradient(135deg, #6C46CE 0%, #963D7A 100%);
  --cs-gradient-innovation: linear-gradient(135deg, #6C46CE 0%, #89D0D6 100%);
  
  /* 🆕 GRADIENTES DE FONDO ADAPTATIVOS */
  --cs-bg-gradient-section: 
    linear-gradient(266deg, #f5f0ff -5%, #fdfdfd 20%, #fdfdfd 50%, #fdfdfd 80%, #ece6ff 105%),
    radial-gradient(circle at top right, rgba(108, 70, 206, 0.08) 15%, transparent 70%);
    
  --cs-bg-gradient-hero:
    linear-gradient(266deg, #f5f0ff -5%, #fdfdfd 30%, #fdfdfd 70%, #ece6ff 105%),
    radial-gradient(circle at bottom left, rgba(108, 70, 206, 0.12) 18%, transparent 65%),
    radial-gradient(circle at top right, rgba(223, 86, 118, 0.08) 15%, transparent 75%);
    
  --cs-bg-gradient-subtle:
    linear-gradient(266deg, #f5f0ff -5%, #fdfdfd 40%, #fdfdfd 60%, #ece6ff 105%),
    radial-gradient(circle at center, rgba(108, 70, 206, 0.05) 20%, transparent 70%);
    
  --cs-bg-gradient-features:
    linear-gradient(266deg, #f5f0ff -5%, #fdfdfd 25%, #fdfdfd 75%, #ece6ff 105%),
    radial-gradient(circle at top left, rgba(62, 152, 188, 0.10) 18%, transparent 65%),
    radial-gradient(circle at bottom right, rgba(137, 208, 214, 0.08) 15%, transparent 75%);
  
  /* 🔤 COLORES NEUTROS */
  --cs-white: #FFFFFF;
  --cs-black: #000000;
  --cs-gray-dark: #3C3C3C;         /* Para textos e íconos */
  --cs-gray-medium: #9D9D9D;
  --cs-gray-light: #E3E3E3;        /* Color principal neutro */
  
  /* 🎯 DESIGN TOKENS SEMÁNTICOS MARKETING - Para comunicar valor */
  --iot-color-trust: var(--cs-accent-cielo);           /* Confianza, estabilidad */
  --iot-color-success: #27ae60;                        /* Éxito, resultados positivos */
  --iot-color-innovation: var(--cs-primary);           /* Innovación, tecnología */
  --iot-color-urgency: #e74c3c;                        /* Urgencia, atención */
  --iot-color-premium: #2c3e50;                        /* Exclusividad, premium */
  --iot-color-growth: var(--cs-secondary);             /* Crecimiento, oportunidad */
  
  /* 📈 COLORES CONTEXTUALES PARA SECCIONES */
  --iot-hero-accent: var(--cs-gradient-primary);       /* Hero: innovación + pasión */
  --iot-features-accent: var(--cs-gradient-clarity);   /* Features: claridad */  
  --iot-testimonials-accent: var(--cs-gradient-trust); /* Testimonials: confianza */
  --iot-pricing-accent: var(--cs-gradient-strength);   /* Pricing: poder, decisión */
  --iot-cta-accent: var(--cs-gradient-primary);        /* CTA: acción inmediata */
  
  /* 🔤 COLORES DE TEXTO SEMÁNTICOS */
  --iot-text-primary: #2d3436;                         /* Títulos principales */
  --iot-text-secondary: #636e72;                       /* Texto descriptivo */
  --iot-text-muted: #95a5a6;                          /* Texto secundario */
  --iot-text-inverse: #ffffff;                         /* Texto sobre fondos oscuros */
  --iot-text-accent: var(--cs-primary);               /* Texto destacado */
  
  /* 🏢 COLORES DE SUPERFICIE PARA MARKETING */
  --iot-surface-primary: #ffffff;                      /* Fondo principal */
  --iot-surface-secondary: #f8f9fa;                    /* Fondo alternativo */
  --iot-surface-elevated: #ffffff;                     /* Cards elevadas */
  --iot-surface-accent: rgba(108, 70, 206, 0.03);    /* Fondo con tint brand */
  --iot-border-light: #f1f3f4;                        /* Bordes suaves */
  --iot-border-medium: #e9ecef;                       /* Bordes normales */
  
  /* 🚀 SISTEMA DE SPACING FLUIDO MARKETING - Adaptativo y premium */
  --iot-space-xs: clamp(0.25rem, 0.5vw, 0.5rem);        /* 4px → 8px */
  --iot-space-sm: clamp(0.5rem, 1vw, 1rem);             /* 8px → 16px */
  --iot-space-md: clamp(1rem, 2vw, 1.5rem);             /* 16px → 24px */
  --iot-space-lg: clamp(1.5rem, 3vw, 2.5rem);           /* 24px → 40px */
  --iot-space-xl: clamp(2rem, 4vw, 3.5rem);             /* 32px → 56px */
  --iot-space-2xl: clamp(2.5rem, 5vw, 5rem);            /* 40px → 80px */
  --iot-space-3xl: clamp(3rem, 6vw, 8rem);              /* 48px → 128px */
  
  /* 🎯 SPACING SEMÁNTICO PARA MARKETING */
  --iot-section-padding: clamp(3rem, 8vw, 10rem);       /* Entre secciones principales */
  --iot-hero-padding: clamp(4rem, 10vw, 12rem);         /* Hero section spacing */
  --iot-card-gap: clamp(1.5rem, 4vw, 4rem);             /* Entre cards/features */
  --iot-cta-margin: clamp(2rem, 5vw, 6rem);             /* Alrededor de CTAs importantes */
  
  /* 🎯 SISTEMA DE SOMBRAS MARKETING - Jerarquía visual premium */
  --iot-shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.05);       /* Elementos sutiles */
  --iot-shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.08);        /* Cards normales */
  --iot-shadow-medium: 0 8px 25px rgba(0, 0, 0, 0.1);       /* Elementos importantes */
  --iot-shadow-strong: 0 16px 40px rgba(0, 0, 0, 0.12);     /* Hero, CTAs principales */
  --iot-shadow-brand: 0 8px 32px rgba(108, 70, 206, 0.2);   /* Elementos con brand color */
  --iot-shadow-glow: 0 0 32px rgba(108, 70, 206, 0.15);     /* Efecto glow para CTAs */
  
  /* 📱 TIPOGRAFÍA FLUIDA MARKETING - Escala perfecta en todos los dispositivos */
  --iot-text-hero: clamp(2.5rem, 8vw, 5rem);               /* Hero principal: 40px → 80px */
  --iot-text-headline: clamp(2rem, 6vw, 4rem);             /* Headlines: 32px → 64px */
  --iot-text-subheader: clamp(1.5rem, 4vw, 2.5rem);       /* Subheaders: 24px → 40px */
  --iot-text-title: clamp(1.25rem, 3vw, 2rem);             /* Títulos cards: 20px → 32px */
  --iot-text-body-large: clamp(1.125rem, 2vw, 1.5rem);     /* Texto importante: 18px → 24px */
  --iot-text-body: clamp(1rem, 1.5vw, 1.25rem);            /* Texto normal: 16px → 20px */
  --iot-text-caption: clamp(0.875rem, 1vw, 1rem);          /* Texto pequeño: 14px → 16px */
  
  /* 🎯 EFECTOS VISUALES PARA MARKETING */
  --iot-blur-light: blur(8px);                             /* Glassmorphism sutil */
  --iot-blur-medium: blur(16px);                           /* Glassmorphism normal */
  --iot-blur-strong: blur(24px);                           /* Glassmorphism intenso */
  --iot-backdrop-light: rgba(255, 255, 255, 0.8);         /* Fondo glass claro */
  --iot-backdrop-medium: rgba(255, 255, 255, 0.9);        /* Fondo glass medio */
  --iot-backdrop-dark: rgba(108, 70, 206, 0.1);           /* Fondo glass con brand */
  
  /* 📝 TIPOGRAFÍA MEJORADA */
  --cs-font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --cs-font-weight-regular: 400;
  --cs-font-weight-medium: 500;
  --cs-font-weight-semibold: 600;
  --cs-font-weight-bold: 700;
  --cs-font-weight-black: 900;
  
  /* 📏 ESCALAS TIPOGRÁFICAS FLUIDAS - MEJORADAS */
  --cs-text-h1: clamp(2.5rem, 5vw + 1rem, 4rem);       /* 40px → 64px */
  --cs-text-h2: clamp(2rem, 4vw + 1rem, 3.5rem);       /* 32px → 56px */
  --cs-text-h3: clamp(1.5rem, 3vw + 0.5rem, 2.25rem);  /* 24px → 36px */
  --cs-text-h4: clamp(1.125rem, 2vw + 0.5rem, 1.5rem); /* 18px → 24px */
  --cs-text-body: clamp(1rem, 1.5vw + 0.5rem, 1.25rem); /* 16px → 20px */
  --cs-text-small: clamp(0.875rem, 1vw + 0.5rem, 1rem); /* 14px → 16px */
  --cs-text-xs: 0.75rem;                                 /* 12px fijo */

  /* 📏 ESCALAS LEGACY COMPATIBLES - Para elementos HTML directos */
  --cs-legacy-h1: clamp(2.5rem, 4vw, 3.375rem);     /* 54px máximo como antes */
  --cs-legacy-h2: clamp(2rem, 3vw, 3rem);           /* 48px máximo como antes */
  --cs-legacy-h3: clamp(1.5rem, 2vw, 1.75rem);      /* 28px máximo como antes */
  --cs-legacy-h4: clamp(1.125rem, 1.5vw, 1.25rem);  /* 20px máximo como antes */
  
  /* 📐 ESPACIADO FLUIDO */
  --cs-space-xs: clamp(0.25rem, 0.5vw, 0.5rem);     /* 4px → 8px */
  --cs-space-sm: clamp(0.5rem, 1vw, 0.75rem);       /* 8px → 12px */
  --cs-space-md: clamp(1rem, 2vw, 1.5rem);          /* 16px → 24px */
  --cs-space-lg: clamp(1.5rem, 3vw, 2.5rem);        /* 24px → 40px */
  --cs-space-xl: clamp(2rem, 4vw, 3.5rem);          /* 32px → 56px */
  --cs-space-xxl: clamp(3rem, 6vw, 5rem);           /* 48px → 80px */
  --cs-space-xxxl: clamp(4rem, 8vw, 7rem);          /* 64px → 112px */
  
  /* 🌟 BORDES Y SOMBRAS */
  --cs-radius-sm: 8px;
  --cs-radius-md: 12px;
  --cs-radius-lg: 16px;
  --cs-radius-xl: 24px;
  --cs-radius-full: 50%;
  
  --cs-shadow-sm: 0 1px 3px rgba(108, 70, 206, 0.1);
  --cs-shadow-md: 0 4px 12px rgba(108, 70, 206, 0.15);
  --cs-shadow-lg: 0 8px 25px rgba(108, 70, 206, 0.2);
  --cs-shadow-primary: 0 8px 32px rgba(108, 70, 206, 0.25);
  --cs-shadow-glow: 0 0 32px rgba(108, 70, 206, 0.3);
  
  /* ⚡ TRANSICIONES MEJORADAS */
  --cs-transition-fast: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --cs-transition-normal: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --cs-transition-slow: 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --cs-transition-bounce: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* 📱 BREAKPOINTS MEJORADOS */
  --cs-bp-xs: 375px;    /* iPhone SE */
  --cs-bp-sm: 480px;    /* Mobile large */
  --cs-bp-md: 768px;    /* Tablet */
  --cs-bp-lg: 1024px;   /* Desktop */
  --cs-bp-xl: 1280px;   /* Large desktop */
  --cs-bp-xxl: 1440px;  /* Extra large */
  
  /* 🆕 VARIABLES CONTEXTUALES */
  --primary-context: var(--cs-primary);
  --gradient-context: var(--cs-gradient-primary);
  --bg-context: var(--cs-white);
}

/* ====================================
   📦 WIDGET CONTAINER CLASS - Universal para páginas con widgets únicos
==================================== */

/* ===== CLOUD STUDIO WIDGET CONTAINER CLASS ===== */
/* Clase universal para páginas que contienen únicamente un widget HTML */
/* Elimina padding/margin de Elementor para widgets que ocupan toda la página */
.cs-widget-page-container .elementor-element,
.cs-widget-page-container .elementor-element > .e-con-inner,
.cs-widget-page-container .elementor-element > .elementor-container,
.cs-widget-page-container .elementor-element > .elementor-widget-container {
  padding: 0 !important;
  margin: 0 !important;
  --widgets-spacing: 0px !important;
  --container-widget-width: 100% !important;
  --container-widget-flex-grow: 1 !important;
}

/* Eliminar spacing específico de contenedores Elementor */
.cs-widget-page-container .elementor-section,
.cs-widget-page-container .elementor-column,
.cs-widget-page-container .elementor-widget {
  padding: 0 !important;
  margin: 0 !important;
}

/* Asegurar que el widget ocupe todo el ancho disponible */
.cs-widget-page-container .elementor-widget-html {
  width: 100% !important;
}

/* Override para cualquier padding/margin residual */
.cs-widget-page-container .elementor-element:not(.cs-preserve-spacing) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ====================================
   🔗 CONTACT FORM COMPONENT - Integración Codex + Widget Tabs + Canarias
==================================== */

/* Contact Widget Container */
.cs-contact-widget {
  font-family: var(--cs-font-family) !important;
  background: var(--cs-bg-gradient-section) !important;
  padding: var(--iot-space-2xl) var(--iot-space-lg) !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.cs-contact-container {
  display: grid !important;
  grid-template-columns: 1fr 1.25fr !important;
  max-width: 1200px !important;
  width: 100% !important;
  background: var(--iot-surface-primary) !important;
  border-radius: var(--cs-radius-xl) !important;
  box-shadow: var(--iot-shadow-strong) !important;
  overflow: hidden !important;
  opacity: 0 !important;
  animation: slide-up 1s cubic-bezier(0.25, 1, 0.5, 1) 0.3s forwards !important;
}

@keyframes slide-up {
  from { transform: translateY(50px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Branding Panel */
.cs-contact-branding {
  position: relative !important;
  padding: var(--iot-space-2xl) !important;
  background: var(--cs-gradient-primary) !important;
  color: var(--iot-text-inverse) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  opacity: 0 !important;
  animation: slide-in-left 1s cubic-bezier(0.25, 1, 0.5, 1) 0.2s forwards !important;
}

.cs-contact-branding::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(1200px 400px at -10% 120%, rgba(255,255,255,0.12), transparent 60%) !important;
  pointer-events: none !important;
}

@keyframes slide-in-left {
  from { transform: translateX(-50px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.cs-brand-content {
  position: relative !important;
  z-index: 1 !important;
}

.cs-brand-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--iot-space-sm) !important;
  background: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: var(--iot-blur-light) !important;
  padding: var(--iot-space-sm) var(--iot-space-md) !important;
  border-radius: var(--cs-radius-full) !important;
  font-size: var(--cs-text-small) !important;
  font-weight: var(--cs-font-weight-semibold) !important;
  margin-bottom: var(--iot-space-lg) !important;
  color: var(--iot-text-inverse) !important;
}

.cs-brand-title {
  font-size: var(--iot-text-headline) !important;
  font-weight: var(--cs-font-weight-black) !important;
  line-height: 1.2 !important;
  margin: 0 0 var(--iot-space-md) 0 !important;
  color: var(--iot-text-inverse) !important;
}

.cs-brand-subtitle {
  font-size: var(--iot-text-body) !important;
  line-height: 1.6 !important;
  opacity: 0.92 !important;
  margin: 0 0 var(--iot-space-xl) 0 !important;
  color: var(--iot-text-inverse) !important;
}

.cs-brand-features {
  margin: var(--iot-space-xl) 0 !important;
}

.cs-brand-feature {
  display: flex !important;
  align-items: center !important;
  gap: var(--iot-space-md) !important;
  margin-bottom: var(--iot-space-md) !important;
  font-size: var(--cs-text-body) !important;
  font-weight: var(--cs-font-weight-medium) !important;
  color: var(--iot-text-inverse) !important;
}

.cs-brand-feature svg {
  flex-shrink: 0 !important;
  opacity: 0.9 !important;
}

.cs-brand-contact {
  margin-top: var(--iot-space-xl) !important;
  padding-top: var(--iot-space-lg) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.cs-brand-contact-item {
  display: flex !important;
  align-items: center !important;
  gap: var(--iot-space-sm) !important;
  margin-bottom: var(--iot-space-md) !important;
  font-size: var(--cs-text-small) !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Form Panel */
.cs-contact-form-panel {
  padding: var(--iot-space-2xl) !important;
  opacity: 0 !important;
  animation: slide-in-right 1s cubic-bezier(0.25, 1, 0.5, 1) 0.4s forwards !important;
}

@keyframes slide-in-right {
  from { transform: translateX(50px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* Progress Bar */
.cs-form-progress {
  margin-bottom: var(--iot-space-xl) !important;
}

.cs-progress-bar {
  width: 100% !important;
  height: 4px !important;
  background: var(--iot-border-light) !important;
  border-radius: var(--cs-radius-sm) !important;
  overflow: hidden !important;
  margin-bottom: var(--iot-space-sm) !important;
}

.cs-progress-fill {
  height: 100% !important;
  background: var(--cs-gradient-primary) !important;
  width: 25% !important;
  transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  border-radius: var(--cs-radius-sm) !important;
}

.cs-progress-text {
  font-size: var(--cs-text-small) !important;
  color: var(--iot-text-muted) !important;
  font-weight: var(--cs-font-weight-medium) !important;
}

/* Form Sections */
.cs-form-section {
  display: none !important;
}

.cs-form-section.cs-active {
  display: block !important;
  animation: fade-in-up 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

@keyframes fade-in-up {
  from { 
    opacity: 0; 
    transform: translateY(20px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

.cs-form-section-header {
  text-align: center !important;
  margin-bottom: var(--iot-space-xl) !important;
}

.cs-section-title {
  font-size: var(--iot-text-subheader) !important;
  font-weight: var(--cs-font-weight-bold) !important;
  color: var(--iot-text-primary) !important;
  margin: 0 0 var(--iot-space-sm) 0 !important;
}

.cs-section-subtitle {
  font-size: var(--cs-text-body) !important;
  color: var(--iot-text-secondary) !important;
  margin: 0 !important;
}

/* Form Grid */
.cs-form-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: var(--iot-space-lg) !important;
  margin-bottom: var(--iot-space-lg) !important;
}

/* Form Fields */
.cs-form-field {
  margin-bottom: var(--iot-space-lg) !important;
}

.cs-form-label {
  display: flex !important;
  align-items: center !important;
  gap: var(--iot-space-sm) !important;
  font-weight: var(--cs-font-weight-bold) !important;
  color: var(--iot-text-primary) !important;
  font-size: var(--cs-text-small) !important;
  margin-bottom: var(--iot-space-sm) !important;
}

.cs-label-icon {
  color: var(--cs-primary) !important;
  opacity: 0.8 !important;
}

/* Input Wrapper con Status */
.cs-input-wrapper {
  position: relative !important;
}

.cs-form-input,
.cs-form-select,
.cs-form-textarea {
  width: 100% !important;
  padding: var(--iot-space-md) !important;
  border: 2px solid var(--iot-border-medium) !important;
  background: var(--iot-surface-secondary) !important;
  border-radius: var(--cs-radius-md) !important;
  font-size: var(--cs-text-body) !important;
  font-family: var(--cs-font-family) !important;
  color: var(--iot-text-primary) !important;
  transition: all var(--cs-transition-normal) !important;
  box-sizing: border-box !important;
}

.cs-form-input:focus,
.cs-form-select:focus,
.cs-form-textarea:focus {
  outline: none !important;
  border-color: var(--cs-primary) !important;
  box-shadow: 0 0 0 3px rgba(108, 70, 206, 0.15) !important;
  background: var(--iot-surface-primary) !important;
}

.cs-form-input.cs-success {
  border-color: var(--iot-color-success) !important;
  background: rgba(39, 174, 96, 0.05) !important;
}

.cs-form-input.cs-error {
  border-color: var(--iot-color-urgency) !important;
  background: rgba(231, 76, 60, 0.05) !important;
}

.cs-input-status {
  position: absolute !important;
  right: var(--iot-space-md) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 16px !important;
  height: 16px !important;
  opacity: 0 !important;
  transition: opacity var(--cs-transition-fast) !important;
}

.cs-input-status.cs-success {
  opacity: 1 !important;
  color: var(--iot-color-success) !important;
}

.cs-input-status.cs-error {
  opacity: 1 !important;
  color: var(--iot-color-urgency) !important;
}

/* Help and Error Text */
.cs-form-help {
  font-size: var(--cs-text-xs) !important;
  color: var(--iot-text-muted) !important;
  margin-top: var(--iot-space-xs) !important;
  line-height: 1.4 !important;
}

.cs-form-error {
  font-size: var(--cs-text-xs) !important;
  color: var(--iot-color-urgency) !important;
  margin-top: var(--iot-space-xs) !important;
  line-height: 1.4 !important;
  display: none !important;
}

/* Checkboxes */
.cs-form-checkbox-label {
  display: flex !important;
  align-items: flex-start !important;
  gap: var(--iot-space-sm) !important;
  cursor: pointer !important;
  font-size: var(--cs-text-small) !important;
  line-height: 1.5 !important;
  color: var(--iot-text-secondary) !important;
}

.cs-form-checkbox {
  display: none !important;
}

.cs-checkbox-custom {
  width: 18px !important;
  height: 18px !important;
  border: 2px solid var(--iot-border-medium) !important;
  border-radius: var(--cs-radius-sm) !important;
  background: var(--iot-surface-primary) !important;
  position: relative !important;
  transition: all var(--cs-transition-fast) !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}

.cs-form-checkbox:checked + .cs-checkbox-custom {
  background: var(--cs-primary) !important;
  border-color: var(--cs-primary) !important;
}

.cs-form-checkbox:checked + .cs-checkbox-custom::after {
  content: "✓" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: white !important;
  font-size: 12px !important;
  font-weight: bold !important;
}

.cs-checkbox-text a {
  color: var(--cs-primary) !important;
  text-decoration: none !important;
  transition: color var(--cs-transition-fast) !important;
}

.cs-checkbox-text a:hover {
  color: var(--cs-secondary) !important;
  text-decoration: underline !important;
}

/* Form Status */
.cs-form-status {
  display: flex !important;
  align-items: center !important;
  gap: var(--iot-space-md) !important;
  padding: var(--iot-space-lg) !important;
  border-radius: var(--cs-radius-md) !important;
  margin: var(--iot-space-xl) 0 !important;
  font-size: var(--cs-text-body) !important;
  animation: fade-in 0.3s ease !important;
}

.cs-status-loading {
  background: rgba(108, 70, 206, 0.1) !important;
  color: var(--cs-primary) !important;
}

.cs-status-success {
  background: rgba(39, 174, 96, 0.1) !important;
  color: var(--iot-color-success) !important;
}

.cs-status-error {
  background: rgba(231, 76, 60, 0.1) !important;
  color: var(--iot-color-urgency) !important;
}

.cs-status-icon {
  flex-shrink: 0 !important;
}

.cs-loading-spinner {
  width: 24px !important;
  height: 24px !important;
  border: 3px solid rgba(108, 70, 206, 0.3) !important;
  border-top: 3px solid var(--cs-primary) !important;
  border-radius: 50% !important;
  animation: spin 1s linear infinite !important;
  flex-shrink: 0 !important;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Form Actions */
.cs-form-actions {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: var(--iot-space-md) !important;
  margin-top: var(--iot-space-2xl) !important;
}

.cs-btn-prev,
.cs-btn-next,
.cs-btn-submit {
  padding: var(--iot-space-md) var(--iot-space-xl) !important;
  font-size: var(--cs-text-body) !important;
  font-weight: var(--cs-font-weight-semibold) !important;
  border-radius: var(--cs-radius-md) !important;
  border: none !important;
  cursor: pointer !important;
  transition: all var(--cs-transition-normal) !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--iot-space-sm) !important;
  min-width: 140px !important;
  justify-content: center !important;
}

.cs-btn-prev {
  background: var(--iot-border-medium) !important;
  color: var(--iot-text-secondary) !important;
}

.cs-btn-prev:hover {
  background: var(--iot-text-muted) !important;
  color: var(--iot-surface-primary) !important;
  transform: translateY(-2px) !important;
}

.cs-btn-next,
.cs-btn-submit {
  background: var(--cs-gradient-primary) !important;
  color: var(--iot-text-inverse) !important;
  box-shadow: var(--iot-shadow-brand) !important;
}

.cs-btn-next:hover,
.cs-btn-submit:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--iot-shadow-glow) !important;
}

.cs-btn-next:disabled,
.cs-btn-submit:disabled {
  opacity: 0.7 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

.cs-btn-icon {
  transition: transform var(--cs-transition-fast) !important;
}

.cs-btn-submit:hover .cs-btn-icon {
  transform: translateX(4px) !important;
}

/* Utility Classes */
.cs-hidden {
  display: none !important;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Responsive Design */
@media (max-width: 1024px) {
  .cs-contact-container {
    grid-template-columns: 1fr !important;
    max-width: 600px !important;
  }
  
  .cs-contact-branding {
    padding: var(--iot-space-xl) !important;
  }
  
  .cs-brand-title {
    font-size: var(--iot-text-subheader) !important;
  }
}

@media (max-width: 768px) {
  .cs-contact-widget {
    padding: var(--iot-space-lg) var(--iot-space-md) !important;
    min-height: auto !important;
    align-items: flex-start !important;
  }
  
  .cs-contact-container {
    margin: var(--iot-space-lg) 0 !important;
  }
  
  .cs-form-grid {
    grid-template-columns: 1fr !important;
    gap: var(--iot-space-md) !important;
  }
  
  .cs-form-actions {
    flex-direction: column !important;
  }
  
  .cs-form-actions .cs-btn {
    width: 100% !important;
  }
}

/* ====================================
   🎯 PUNTO 1: SISTEMA DE UTILIDADES AVANZADAS
==================================== */

/* 🌈 Gradientes de Fondo Adaptativos */
.cs-bg-section {
  background: var(--cs-bg-gradient-section) !important;
  position: relative !important;
  overflow: hidden !important;
}

.cs-bg-hero {
  background: var(--cs-bg-gradient-hero) !important;
  position: relative !important;
  overflow: hidden !important;
}

.cs-bg-subtle {
  background: var(--cs-bg-gradient-subtle) !important;
  position: relative !important;
  overflow: hidden !important;
}

.cs-bg-features {
  background: var(--cs-bg-gradient-features) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Efectos de fade para gradientes */
.cs-bg-fade-top::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 127px !important;
  background: linear-gradient(0deg, transparent 0%, var(--cs-white) 100%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.cs-bg-fade-bottom::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 127px !important;
  background: linear-gradient(180deg, transparent 0%, var(--cs-white) 100%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* 📝 Texto Adaptativo Moderno */
.cs-text-balance {
  text-wrap: balance !important; /* Para títulos - mejor distribución de líneas */
  max-width: 65ch !important;
}

.cs-text-pretty {
  text-wrap: pretty !important;  /* Para párrafos - evita líneas huérfanas */
  max-width: 75ch !important;
}

.cs-text-adaptive {
  font-size: var(--cs-text-body) !important;
  line-height: clamp(1.4, 1.2vw + 1.2, 1.8) !important;
  letter-spacing: clamp(-0.02em, 0.01vw, 0.01em) !important;
}

/* 🎨 Utilidades de Color Contextuales */
.cs-text-context { color: var(--primary-context) !important; }
.cs-bg-context { background: var(--bg-context) !important; }
.cs-border-context { border-color: var(--primary-context) !important; }

/* 🏗️ Layout Utilities Avanzadas */
.cs-container-fluid {
  width: 100% !important;
  padding: 0 var(--cs-space-lg) !important;
  max-width: none !important;
}

.cs-container-narrow {
  max-width: 800px !important;
  margin: 0 auto !important;
  padding: 0 var(--cs-space-lg) !important;
}

.cs-container-wide {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 0 var(--cs-space-lg) !important;
}

/* 📐 Spacing Utilities Mejoradas */
.cs-section-padding { padding: var(--cs-space-xxl) 0 !important; }
.cs-section-padding-sm { padding: var(--cs-space-xl) 0 !important; }
.cs-section-padding-lg { padding: var(--cs-space-xxxl) 0 !important; }

@media (max-width: 768px) {
  .cs-section-padding { padding: var(--cs-space-xl) 0 !important; }
  .cs-section-padding-sm { padding: var(--cs-space-lg) 0 !important; }
  .cs-section-padding-lg { padding: var(--cs-space-xxl) 0 !important; }
}

/* ====================================
   🔧 PUNTO 2: MEJORAS DEL CSS ACTUAL
==================================== */

/* 🎯 Reemplazo de Media Queries Inconsistentes */
.cs-responsive-text {
  font-size: var(--cs-text-body) !important;
  line-height: clamp(1.4, 1.6, 1.8) !important;
}

.cs-responsive-title {
  font-size: clamp(1.5rem, 4vw, 3rem) !important;
  line-height: 1.2 !important;
  margin-bottom: clamp(1rem, 3vw, 2rem) !important;
}

/* 🖼️ Sistema Mejorado para Galerías (reemplaza tus galerías problemáticas) */
.cs-partners-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
  gap: var(--cs-space-lg) !important;
  align-items: center !important;
  padding: var(--cs-space-xl) 0 !important;
}

.cs-partners-grid img {
  width: 100% !important;
  height: auto !important;
  max-height: 60px !important;
  object-fit: contain !important;
  filter: grayscale(100%) opacity(0.7) !important;
  transition: all var(--cs-transition-normal) !important;
}

.cs-partners-grid img:hover {
  filter: grayscale(0%) opacity(1) !important;
  transform: scale(1.05) !important;
}

/* 🏷️ Mejora para tus Tags/Pills existentes */
.cs-tag {
  display: inline-flex !important;
  align-items: center !important;
  padding: var(--cs-space-sm) var(--cs-space-md) !important;
  background: rgba(108, 70, 206, 0.1) !important;
  color: var(--cs-primary) !important;
  border-radius: var(--cs-radius-full) !important;
  font-size: var(--cs-text-small) !important;
  font-weight: var(--cs-font-weight-medium) !important;
  text-decoration: none !important;
  transition: all var(--cs-transition-normal) !important;
  white-space: nowrap !important;
}

.cs-tag:hover {
  background: var(--cs-primary) !important;
  color: var(--cs-white) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--cs-shadow-md) !important;
}

/* 🎯 Fix para Botones Problemáticos (reemplaza tus scheduleBtnHero, etc.) */
.cs-schedule-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 300px !important;
  min-height: 60px !important;
  background: var(--cs-gradient-primary) !important;
  color: var(--cs-white) !important;
  border: none !important;
  border-radius: var(--cs-radius-md) !important;
  font-family: var(--cs-font-family) !important;
  font-weight: var(--cs-font-weight-semibold) !important;
  font-size: var(--cs-text-body) !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  transition: all var(--cs-transition-normal) !important;
  cursor: pointer !important;
  box-shadow: var(--cs-shadow-md) !important;
}

.cs-schedule-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--cs-shadow-primary) !important;
}

@media (max-width: 768px) {
  .cs-schedule-btn {
    min-width: 280px !important;
    min-height: 50px !important;
    font-size: var(--cs-text-small) !important;
  }
}

/* 🎨 Mejoras para Image Boxes (reemplaza tus .imgBox) */
.cs-image-card {
  background: var(--cs-white) !important;
  border-radius: var(--cs-radius-xl) !important;
  box-shadow: var(--cs-shadow-md) !important;
  overflow: hidden !important;
  transition: all var(--cs-transition-normal) !important;
  height: 100% !important;
}

.cs-image-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: var(--cs-shadow-lg) !important;
}

.cs-image-card img {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  border-radius: var(--cs-radius-xl) var(--cs-radius-xl) 0 0 !important;
}

.cs-image-card__content {
  padding: var(--cs-space-xl) var(--cs-space-lg) var(--cs-space-xl) !important;
}

/* ====================================
   🎪 PUNTO 3: SISTEMA DE TEMAS CONTEXTUALES
==================================== */

/* 🏭 Tema Industrial */
.cs-theme-industrial {
  --primary-context: var(--cs-accent-cielo);
  --gradient-context: var(--cs-gradient-clarity);
  --bg-context: var(--cs-bg-gradient-features);
}

.cs-theme-industrial .cs-btn--primary {
  background: var(--cs-gradient-clarity) !important;
}

.cs-theme-industrial .cs-title--primary {
  color: var(--cs-accent-cielo) !important;
}

/* 🚀 Tema Innovación */
.cs-theme-innovation {
  --primary-context: var(--cs-primary);
  --gradient-context: var(--cs-gradient-primary);
  --bg-context: var(--cs-bg-gradient-hero);
}

.cs-theme-innovation .cs-btn--primary {
  background: var(--cs-gradient-primary) !important;
  box-shadow: var(--cs-shadow-glow) !important;
}

/* 🤝 Tema Confianza */
.cs-theme-trust {
  --primary-context: var(--cs-accent-aguamarina);
  --gradient-context: var(--cs-gradient-trust);
  --bg-context: var(--cs-bg-gradient-subtle);
}

.cs-theme-trust .cs-btn--primary {
  background: var(--cs-gradient-trust) !important;
}

.cs-theme-trust .cs-title--primary {
  color: var(--cs-accent-cielo) !important;
}

/* 💪 Tema Fortaleza */
.cs-theme-strength {
  --primary-context: var(--cs-accent-uva);
  --gradient-context: var(--cs-gradient-strength);
  --bg-context: var(--cs-bg-gradient-section);
}

.cs-theme-strength .cs-btn--primary {
  background: var(--cs-gradient-strength) !important;
}

.cs-theme-strength .cs-title--primary {
  color: var(--cs-accent-uva) !important;
}

/* 🎯 Aplicadores de Tema */
.cs-theme-section {
  background: var(--bg-context) !important;
  color: var(--cs-gray-dark) !important;
  transition: all var(--cs-transition-slow) !important;
}

/* ====================================
   🚀 PUNTO 4: OPTIMIZACIONES DE PERFORMANCE
==================================== */

/* 📊 Container Queries para Componentes Inteligentes */
.cs-container-query {
  container-type: inline-size !important;
}

@container (min-width: 400px) {
  .cs-card-adaptive {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    gap: var(--cs-space-lg) !important;
  }
  
  .cs-card-adaptive img {
    width: 120px !important;
    height: 120px !important;
    object-fit: cover !important;
  }
}

@container (min-width: 600px) {
  .cs-navigation-adaptive {
    display: flex !important;
    justify-content: space-between !important;
  }
  
  .cs-navigation-adaptive .cs-menu {
    display: flex !important;
    gap: var(--cs-space-lg) !important;
  }
}

/* 🔤 Optimización de Carga de Fuentes */
@font-face {
  font-family: 'Nunito';
  font-display: swap;
  /* Esto mejora las Core Web Vitals */
}

/* 🎬 Optimizaciones de Animaciones */
.cs-will-animate {
  will-change: transform !important;
}

.cs-animation-complete {
  will-change: auto !important;
}

/* Reduce animaciones para usuarios que las prefieren reducidas */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .cs-will-animate {
    will-change: auto !important;
  }
}

/* 🖼️ Lazy Loading Optimizations */
.cs-lazy-image {
  opacity: 0 !important;
  transform: translateY(20px) !important;
  transition: all var(--cs-transition-normal) !important;
}

.cs-lazy-image.loaded {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* 📱 Optimizaciones Táctiles */
.cs-touch-target {
  min-height: 44px !important;
  min-width: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 🔍 Optimizaciones de Rendering */
.cs-gpu-accelerated {
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  perspective: 1000px !important;
}

/* ====================================
   🧪 FORM UTILITIES (Validación, Toggle, Progreso)
==================================== */

/* Wrapper del input con iconos/estados a la derecha */
.cs-input-wrap { position: relative !important; }
.cs-input-wrap .cs-input { padding-left: 44px !important; }
.cs-input-wrap .cs-icon { position: absolute !important; left: 12px !important; top: 50% !important; transform: translateY(-50%) !important; width: 18px !important; height: 18px !important; color: #9aa0a6 !important; opacity: .9 !important; }
.cs-input-wrap .cs-status { position: absolute !important; right: 12px !important; top: 50% !important; transform: translateY(-50%) !important; width: 18px !important; height: 18px !important; display: none !important; }
.cs-input-wrap.has-status .cs-status { display: inline-flex !important; align-items: center !important; justify-content: center !important; }

/* Estados de validación reutilizables */
.cs-inline-msg { font-size: var(--cs-text-small); margin-top: 6px; display: none; }
.cs-inline-msg.error { color: #dc2626; }
.cs-inline-msg.ok { color: #16a34a; }
.cs-input.is-valid { border-color: #16a34a !important; box-shadow: 0 0 0 3px rgba(22,163,74,0.12) !important; }
.cs-input.is-invalid { border-color: #dc2626 !important; box-shadow: 0 0 0 3px rgba(220,38,38,0.12) !important; }

/* Toggle de contraseña (botón ojo) */
.cs-toggle { position: absolute !important; right: 10px !important; top: 50% !important; transform: translateY(-50%) !important; cursor: pointer !important; width: 32px !important; height: 32px !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: var(--iot-surface-secondary) !important; border: 1px solid var(--iot-border-medium) !important; color: #6b7280 !important; z-index: 2 !important; }
.cs-toggle:hover { background: #f1f3f5 !important; box-shadow: 0 2px 6px rgba(0,0,0,.08) !important; }
.cs-input--with-toggle { padding-right: 72px !important; }
.cs-input-wrap.pwd .cs-status { right: 48px !important; }

/* Barra de progreso reutilizable */
.cs-progress { height: 8px; background: #eef0f3; border-radius: 999px; overflow: hidden; margin: 12px 0 4px; display:none; }
.cs-progress > span { display:block; height:100%; width:0%; background: linear-gradient(90deg, var(--cs-primary), var(--cs-secondary)); transition: width .3s ease; }
.cs-progress-label { font-size: var(--cs-text-small); color: var(--iot-text-muted); display:none; }

/* Select de país con bandera (flag-icons) */
.cs-select-wrap { position: relative !important; }
.cs-select-wrap .cs-flag { position: absolute !important; left: 14px !important; top: 50% !important; transform: translateY(-50%) !important; width: 22px !important; height: 16px !important; border-radius: 3px !important; box-shadow: 0 0 0 1px rgba(0,0,0,.05) !important; }
.cs-select-wrap select { padding-left: 58px !important; }

/* Fixes generales para dropdowns de teléfono (intl-tel-input) */
.cs-iti-fix .iti { position: relative !important; z-index: 10 !important; }
.cs-iti-fix .iti__country-list { z-index: 999999 !important; box-shadow: 0 10px 25px rgba(0,0,0,.15) !important; }

/* Utilidad de overflow visible cuando el contenedor corta dropdowns */
.cs-overflow-visible { overflow: visible !important; }

/* Reset utilitario para páginas con widget a pantalla completa */
.cs-elementor-reset .elementor-element,
.cs-elementor-reset .elementor-element > .e-con-inner,
.cs-elementor-reset .elementor-element > .elementor-container,
.cs-elementor-reset .elementor-element > .elementor-widget-container {
  padding: 0 !important;
  margin: 0 !important;
  --widgets-spacing: 0px !important;
  --container-widget-width: 100% !important;
  --container-widget-flex-grow: 1 !important;
}

/* ====================================
   🛠️ COMPONENTES BASE MEJORADOS
==================================== */

/* 🔧 RESET Y BASE STYLES */
.cs-widget {
  box-sizing: border-box !important;
  font-family: var(--cs-font-family) !important;
  color: var(--cs-gray-dark) !important;
  line-height: 1.6 !important;
}

.cs-widget *,
.cs-widget *::before,
.cs-widget *::after {
  box-sizing: inherit !important;
}

/* 🏗️ Layout Mejorado */
.cs-container {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 var(--cs-space-lg) !important;
  container-type: inline-size !important;
}

/* 🎯 Grid System Avanzado */
.cs-grid {
  display: grid !important;
  gap: var(--cs-space-lg) !important;
  grid-template-columns: 1fr !important;
}

.cs-grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
}

.cs-grid--2-cols {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
}

.cs-grid--3-cols {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
}

.cs-grid--4-cols {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
}

@container (max-width: 768px) {
  .cs-grid--2-cols,
  .cs-grid--3-cols,
  .cs-grid--4-cols {
    grid-template-columns: 1fr !important;
    gap: var(--cs-space-md) !important;
  }
}

/* ====================================
   🎯 NAVIGATION COMPONENTS
==================================== */

.cs-tabs {
  width: 100% !important;
}

.cs-tabs__nav {
  display: inline-flex !important;
  justify-content: center !important;
  background: transparent !important;
  padding: var(--cs-space-md) 0 !important;
  margin: 0 auto var(--cs-space-xl) !important;
  gap: var(--cs-space-md) !important;
  border-radius: var(--cs-radius-xl) !important;
  backdrop-filter: blur(10px) !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}

.cs-tabs__nav::-webkit-scrollbar {
  display: none !important;
}

.cs-tabs__button {
  display: flex !important;
  align-items: center !important;
  gap: var(--cs-space-sm) !important;
  padding: var(--cs-space-md) var(--cs-space-lg) !important;
  border: 2px solid transparent !important;
  background: var(--cs-white) !important;
  color: var(--cs-gray-medium) !important;
  font-family: var(--cs-font-family) !important;
  font-size: var(--cs-text-small) !important;
  font-weight: var(--cs-font-weight-medium) !important;
  cursor: pointer !important;
  border-radius: var(--cs-radius-md) !important;
  transition: all var(--cs-transition-normal) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  box-shadow: var(--cs-shadow-sm) !important;
  backdrop-filter: blur(10px) !important;
  z-index: 1 !important;
  isolation: isolate !important;
  position: relative !important;
  overflow: hidden !important;
}

.cs-tabs__button::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
  transition: left var(--cs-transition-slow) !important;
}

.cs-tabs__button:hover::before {
  left: 100% !important;
}

.cs-tabs__button:hover:not(.cs-tabs__button--active) {
  background: var(--cs-gray-light) !important;
  color: var(--cs-gray-dark) !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: var(--cs-shadow-md) !important;
}

.cs-tabs__button--active {
  background: var(--cs-gradient-primary) !important;
  color: var(--cs-white) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--cs-shadow-primary) !important;
}

.cs-tabs__icon {
  width: 20px !important;
  height: 20px !important;
  fill: currentColor !important;
  transition: transform var(--cs-transition-normal) !important;
}

.cs-tabs__button--active .cs-tabs__icon {
  transform: scale(1.1) !important;
}

.cs-tabs__content {
  position: relative !important;
}

.cs-tabs__panel {
  display: none !important;
  background: var(--cs-white) !important;
  border-radius: var(--cs-radius-lg) !important;
  box-shadow: var(--cs-shadow-lg) !important;
  overflow: hidden !important;
}

.cs-tabs__panel--active {
  display: block !important;
}

@media (max-width: 768px) {
  .cs-tabs__nav {
    justify-content: flex-start !important;
    padding: var(--cs-space-sm) !important;
    gap: var(--cs-space-sm) !important;
  }
  
  .cs-tabs__button {
    padding: var(--cs-space-sm) var(--cs-space-md) !important;
    font-size: var(--cs-text-xs) !important;
  }
}

/* ====================================
   🔘 BUTTON COMPONENTS
==================================== */

.cs-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--cs-space-sm) !important;
  padding: var(--cs-space-md) var(--cs-space-lg) !important;
  font-family: var(--cs-font-family) !important;
  font-size: var(--cs-text-small) !important;
  font-weight: var(--cs-font-weight-medium) !important;
  text-decoration: none !important;
  border: 2px solid transparent !important;
  border-radius: var(--cs-radius-md) !important;
  cursor: pointer !important;
  transition: all var(--cs-transition-normal) !important;
  position: relative !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-align: center !important;
  isolation: isolate !important;
}

.cs-btn::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
  transition: left var(--cs-transition-slow) !important;
}

.cs-btn:hover::before {
  left: 100% !important;
}

.cs-btn--primary {
  background: var(--cs-gradient-primary) !important;
  color: var(--cs-white) !important;
  box-shadow: var(--cs-shadow-sm) !important;
}

.cs-btn--primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--cs-shadow-primary) !important;
}

.cs-btn--secondary {
  background: transparent !important;
  color: var(--cs-primary) !important;
  border-color: var(--cs-primary) !important;
}

.cs-btn--secondary:hover {
  background: var(--cs-primary) !important;
  color: var(--cs-white) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--cs-shadow-md) !important;
}

.cs-btn--outline {
  background: transparent !important;
  color: var(--cs-gray-dark) !important;
  border-color: var(--cs-gray-light) !important;
}

.cs-btn--outline:hover {
  background: var(--cs-gray-light) !important;
  border-color: var(--cs-gray-medium) !important;
  transform: translateY(-1px) !important;
}

.cs-btn--small {
  padding: var(--cs-space-sm) var(--cs-space-md) !important;
  font-size: var(--cs-text-xs) !important;
}

.cs-btn--large {
  padding: var(--cs-space-lg) var(--cs-space-xl) !important;
  font-size: var(--cs-text-body) !important;
}

.cs-btn--full {
  width: 100% !important;
}

.cs-btn__icon {
  width: 16px !important;
  height: 16px !important;
  fill: currentColor !important;
  transition: transform var(--cs-transition-normal) !important;
}

.cs-btn:hover .cs-btn__icon {
  transform: translateX(2px) !important;
}

@media (max-width: 768px) {
  .cs-btn {
    padding: var(--cs-space-sm) var(--cs-space-md) !important;
    font-size: var(--cs-text-xs) !important;
  }
  
  .cs-btn--large {
    padding: var(--cs-space-md) var(--cs-space-lg) !important;
    font-size: var(--cs-text-small) !important;
  }
}

/* ====================================
   🎴 CARD COMPONENTS
==================================== */

.cs-card {
  background: var(--cs-white) !important;
  border-radius: var(--cs-radius-lg) !important;
  box-shadow: var(--cs-shadow-md) !important;
  overflow: hidden !important;
  transition: all var(--cs-transition-normal) !important;
  position: relative !important;
}

.cs-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--cs-shadow-lg) !important;
}

.cs-card__header {
  padding: var(--cs-space-lg) !important;
  background: var(--cs-gradient-primary) !important;
  color: var(--cs-white) !important;
}

.cs-card__body {
  padding: var(--cs-space-lg) !important;
}

.cs-card__footer {
  padding: var(--cs-space-lg) !important;
  background: var(--cs-gray-light) !important;
  border-top: 1px solid rgba(108, 70, 206, 0.1) !important;
}

.cs-card__title {
  font-size: var(--cs-text-h3) !important;
  font-weight: var(--cs-font-weight-bold) !important;
  margin: 0 0 var(--cs-space-sm) !important;
  color: currentColor !important;
}

.cs-card__subtitle {
  font-size: var(--cs-text-h4) !important;
  font-weight: var(--cs-font-weight-semibold) !important;
  margin: var(--cs-space-md) 0 var(--cs-space-sm) !important;
  color: var(--cs-primary) !important;
}

.cs-card__text {
  font-size: var(--cs-text-body) !important;
  line-height: 1.6 !important;
  color: var(--cs-gray-dark) !important;
  margin: 0 0 var(--cs-space-md) !important;
}

.cs-card--glass {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.cs-card--gradient {
  background: var(--cs-gradient-primary) !important;
  color: var(--cs-white) !important;
}

.cs-card--gradient .cs-card__title,
.cs-card--gradient .cs-card__subtitle {
  color: var(--cs-white) !important;
}

@media (max-width: 768px) {
  .cs-card__header,
  .cs-card__body,
  .cs-card__footer {
    padding: var(--cs-space-md) !important;
  }
}

/* ====================================
   📝 TYPOGRAPHY COMPONENTS
==================================== */

.cs-title {
  font-family: var(--cs-font-family) !important;
  font-weight: var(--cs-font-weight-bold) !important;
  line-height: 1.2 !important;
  margin: 0 0 var(--cs-space-md) !important;
  color: var(--cs-gray-dark) !important;
}

.cs-title--h1 {
  font-size: var(--cs-text-h1) !important;
  font-weight: var(--cs-font-weight-black) !important;
}

.cs-title--h2 {
  font-size: var(--cs-text-h2) !important;
}

.cs-title--h3 {
  font-size: var(--cs-text-h3) !important;
}

.cs-title--h4 {
  font-size: var(--cs-text-h4) !important;
  font-weight: var(--cs-font-weight-semibold) !important;
}

.cs-title--gradient {
  background: var(--cs-gradient-primary) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

.cs-title--primary {
  color: var(--cs-primary) !important;
}

/* 🔄 CLASE LEGACY - MANTENER POR COMPATIBILIDAD */
.gradientTitle, .gradientTitleCard h3 {
  background: linear-gradient(61deg, #583AC6 16.48%, #DF5676 67.8%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  text-fill-color: transparent !important;
  text-shadow: 0px 6px 12px rgba(51, 51, 51, 0.08) !important;
  text-align: left !important;
}

.cs-text {
  font-family: var(--cs-font-family) !important;
  font-size: var(--cs-text-body) !important;
  line-height: 1.6 !important;
  color: var(--cs-gray-dark) !important;
  margin: 0 0 var(--cs-space-md) !important;
}

.cs-text--small {
  font-size: var(--cs-text-small) !important;
}

.cs-text--large {
  font-size: var(--cs-text-h4) !important;
}

.cs-text--center {
  text-align: center !important;
}

.cs-text--muted {
  color: var(--cs-gray-medium) !important;
}

.cs-text--primary {
  color: var(--cs-primary) !important;
}

/* ====================================
   📋 LIST COMPONENTS
==================================== */

.cs-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 var(--cs-space-lg) !important;
}

.cs-list__item {
  display: flex !important;
  align-items: flex-start !important;
  gap: var(--cs-space-sm) !important;
  margin-bottom: var(--cs-space-md) !important;
  font-family: var(--cs-font-family) !important;
  font-size: var(--cs-text-body) !important;
  line-height: 1.6 !important;
  color: var(--cs-gray-dark) !important;
}

.cs-list__icon {
  width: 20px !important;
  height: 20px !important;
  background: var(--cs-gradient-primary) !important;
  border-radius: var(--cs-radius-full) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--cs-white) !important;
  font-size: 12px !important;
  font-weight: var(--cs-font-weight-bold) !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}

.cs-list__text strong {
  color: var(--cs-gray-dark) !important;
  font-weight: var(--cs-font-weight-semibold) !important;
}

/* ====================================
   🎯 UTILITY CLASSES
==================================== */

/* Spacing utilities */
.cs-mb-xs { margin-bottom: var(--cs-space-xs) !important; }
.cs-mb-sm { margin-bottom: var(--cs-space-sm) !important; }
.cs-mb-md { margin-bottom: var(--cs-space-md) !important; }
.cs-mb-lg { margin-bottom: var(--cs-space-lg) !important; }
.cs-mb-xl { margin-bottom: var(--cs-space-xl) !important; }
.cs-mb-xxl { margin-bottom: var(--cs-space-xxl) !important; }

.cs-mt-xs { margin-top: var(--cs-space-xs) !important; }
.cs-mt-sm { margin-top: var(--cs-space-sm) !important; }
.cs-mt-md { margin-top: var(--cs-space-md) !important; }
.cs-mt-lg { margin-top: var(--cs-space-lg) !important; }
.cs-mt-xl { margin-top: var(--cs-space-xl) !important; }
.cs-mt-xxl { margin-top: var(--cs-space-xxl) !important; }

.cs-p-xs { padding: var(--cs-space-xs) !important; }
.cs-p-sm { padding: var(--cs-space-sm) !important; }
.cs-p-md { padding: var(--cs-space-md) !important; }
.cs-p-lg { padding: var(--cs-space-lg) !important; }
.cs-p-xl { padding: var(--cs-space-xl) !important; }
.cs-p-xxl { padding: var(--cs-space-xxl) !important; }

/* Text alignment */
.cs-text-left { text-align: left !important; }
.cs-text-center { text-align: center !important; }
.cs-text-right { text-align: right !important; }

/* Display utilities */
.cs-hidden { display: none !important; }
.cs-visible { display: block !important; }
.cs-flex { display: flex !important; }
.cs-inline-flex { display: inline-flex !important; }

/* Flex utilities */
.cs-justify-center { justify-content: center !important; }
.cs-justify-between { justify-content: space-between !important; }
.cs-align-center { align-items: center !important; }
.cs-gap-sm { gap: var(--cs-space-sm) !important; }
.cs-gap-md { gap: var(--cs-space-md) !important; }

/* ====================================
   🚀 UTILIDADES MARKETING IOT - Para conversión y ventas
==================================== */

/* 🎯 Clases semánticas para diferentes secciones */
.iot-hero { 
  background: var(--iot-hero-accent) !important;
  padding: var(--iot-hero-padding) 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

.iot-section { 
  padding: var(--iot-section-padding) 0 !important;
}

.iot-cta-section {
  background: var(--iot-cta-accent) !important;
  padding: var(--iot-cta-margin) 0 !important;
  text-align: center !important;
  position: relative !important;
}

/* 📱 Tipografía marketing fluida */
.iot-hero-title { 
  font-size: var(--iot-text-hero) !important;
  font-weight: var(--cs-font-weight-black) !important;
  line-height: 1.1 !important;
  color: var(--iot-text-inverse) !important;
}

.iot-headline { 
  font-size: var(--iot-text-headline) !important;
  font-weight: var(--cs-font-weight-bold) !important;
  line-height: 1.2 !important;
  color: var(--iot-text-primary) !important;
}

.iot-subheader {
  font-size: var(--iot-text-subheader) !important;
  font-weight: var(--cs-font-weight-semibold) !important;
  color: var(--iot-text-secondary) !important;
}

/* 🎨 Elementos de confianza y credibilidad */
.iot-trust-badge {
  background: var(--iot-surface-elevated) !important;
  border: 1px solid var(--iot-border-light) !important;
  border-radius: 12px !important;
  padding: var(--iot-space-md) !important;
  box-shadow: var(--iot-shadow-soft) !important;
  text-align: center !important;
}

.iot-success-metric {
  font-size: var(--iot-text-title) !important;
  font-weight: var(--cs-font-weight-black) !important;
  color: var(--iot-color-success) !important;
  display: block !important;
}

.iot-premium-card {
  background: var(--iot-surface-elevated) !important;
  border: 1px solid var(--iot-border-medium) !important;
  border-radius: 20px !important;
  box-shadow: var(--iot-shadow-medium) !important;
  padding: var(--iot-space-2xl) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.iot-premium-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--iot-shadow-strong) !important;
}

/* 🎯 CTAs optimizados para conversión */
.iot-cta-primary {
  background: var(--cs-gradient-primary) !important;
  color: var(--iot-text-inverse) !important;
  font-size: var(--iot-text-body-large) !important;
  font-weight: var(--cs-font-weight-semibold) !important;
  padding: var(--iot-space-lg) var(--iot-space-2xl) !important;
  border-radius: 16px !important;
  border: none !important;
  box-shadow: var(--iot-shadow-brand) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--iot-space-sm) !important;
}

.iot-cta-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--iot-shadow-glow) !important;
  color: var(--iot-text-inverse) !important;
}

.iot-cta-secondary {
  background: transparent !important;
  color: var(--iot-color-innovation) !important;
  border: 2px solid var(--iot-color-innovation) !important;
  font-size: var(--iot-text-body-large) !important;
  font-weight: var(--cs-font-weight-semibold) !important;
  padding: var(--iot-space-md) var(--iot-space-xl) !important;
  border-radius: 12px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--iot-space-sm) !important;
}

.iot-cta-secondary:hover {
  background: var(--iot-color-innovation) !important;
  color: var(--iot-text-inverse) !important;
  transform: translateY(-1px) !important;
}
.cs-gap-lg { gap: var(--cs-space-lg) !important; }

/* Color utilities */
.cs-bg-primary { background: var(--cs-primary) !important; }
.cs-bg-gradient { background: var(--cs-gradient-primary) !important; }
.cs-bg-white { background: var(--cs-white) !important; }
.cs-text-white { color: var(--cs-white) !important; }

/* Animation utilities */
.cs-fade-in {
  opacity: 0 !important;
  animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.cs-slide-up {
  opacity: 0 !important;
  transform: translateY(20px) !important;
  animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes fadeIn {
  to { opacity: 1 !important; }
}

@keyframes slideUp {
  to { 
    opacity: 1 !important; 
    transform: translateY(0) !important; 
  }
}

/* ====================================
   🔧 FIXES ESPECÍFICOS DE ELEMENTOR
==================================== */

/* Evita conflictos con Elementor */
.elementor-widget-html .cs-widget {
  font-family: var(--cs-font-family) !important;
  container-type: inline-size !important;
}

/* Override completo de botones problemáticos */
.elementor-widget-html .cs-btn,
.elementor-widget-html .cs-schedule-btn {
  background: var(--cs-gradient-primary) !important;
  border: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-family: var(--cs-font-family) !important;
}

/* Limpia estilos de lista problemáticos */
.elementor-widget-html .cs-list {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Fix para imágenes responsivas */
.elementor-widget-html .cs-image,
.elementor-widget-html .cs-lazy-image {
  max-width: 100% !important;
  height: auto !important;
}

/* Override para gradientes de texto en Elementor */
.elementor-widget-html .cs-title--gradient {
  background: var(--cs-gradient-primary) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

/* ====================================
   📱 RESPONSIVE MEJORADO
==================================== */

/* Mobile-first con breakpoints consistentes */
@media (max-width: 374px) {
  :root {
    --cs-space-lg: 1rem;
    --cs-space-xl: 1.5rem;
    --cs-space-xxl: 2rem;
  }
}

@media (min-width: 375px) and (max-width: 767px) {
  .cs-container {
    padding: 0 var(--cs-space-md) !important;
  }
  
  .cs-schedule-btn {
    min-width: 100% !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .cs-partners-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  }
}

@media (min-width: 1024px) {
  .cs-hover-lift:hover {
    transform: translateY(-8px) !important;
    box-shadow: var(--cs-shadow-lg) !important;
  }
}

/* ====================================
   ♿ ACCESIBILIDAD MEJORADA
==================================== */

/* Focus management mejorado */
.cs-focus-visible:focus-visible {
  outline: 2px solid var(--cs-primary) !important;
  outline-offset: 2px !important;
  border-radius: var(--cs-radius-sm) !important;
}

/* Mejores indicadores de estado */
.cs-loading {
  position: relative !important;
  overflow: hidden !important;
}

.cs-loading::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(108, 70, 206, 0.2), transparent) !important;
  animation: shimmer 1.5s infinite !important;
}

@keyframes shimmer {
  to { left: 100% !important; }
}

/* ====================================
   🚀 UTILIDADES FINALES
==================================== */

/* Display utilities mejoradas */
.cs-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.cs-not-sr-only {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}

/* Utilidades de estado */
.cs-is-loading { pointer-events: none !important; opacity: 0.7 !important; }
.cs-is-disabled { pointer-events: none !important; opacity: 0.5 !important; }
.cs-is-hidden { display: none !important; }
.cs-is-visible { display: block !important; }

/* Print styles */
@media print {
  .cs-no-print { display: none !important; }
  .cs-print-only { display: block !important; }
  
  * {
    background: transparent !important;
    color: black !important;
    box-shadow: none !important;
  }
}

/* ====================================
   🔄 COMPATIBILIDAD ELEMENTOS HTML DIRECTOS
==================================== */

/* Solo aplicar dentro de widgets CS para no afectar todo Elementor */
.cs-widget h1 {
  font-family: var(--cs-font-family) !important;
  font-size: var(--cs-legacy-h1) !important;
  font-weight: var(--cs-font-weight-black) !important;
  line-height: 1.2 !important;
  color: var(--cs-gray-dark) !important;
  margin: 0 0 var(--cs-space-lg) !important;
}

.cs-widget h2 {
  font-family: var(--cs-font-family) !important;
  font-size: var(--cs-legacy-h2) !important;
  font-weight: var(--cs-font-weight-bold) !important;
  line-height: 1.2 !important;
  color: var(--cs-gray-dark) !important;
  margin: 0 0 var(--cs-space-lg) !important;
}

.cs-widget h3 {
  font-family: var(--cs-font-family) !important;
  font-size: var(--cs-legacy-h3) !important;
  font-weight: var(--cs-font-weight-bold) !important;
  line-height: 1.3 !important;
  color: var(--cs-gray-dark) !important;
  margin: 0 0 var(--cs-space-md) !important;
}

.cs-widget h4 {
  font-family: var(--cs-font-family) !important;
  font-size: var(--cs-legacy-h4) !important;
  font-weight: var(--cs-font-weight-semibold) !important;
  line-height: 1.4 !important;
  color: var(--cs-gray-dark) !important;
  margin: 0 0 var(--cs-space-md) !important;
}

.cs-widget h5,
.cs-widget h6 {
  font-family: var(--cs-font-family) !important;
  font-size: var(--cs-text-body) !important;
  font-weight: var(--cs-font-weight-semibold) !important;
  line-height: 1.4 !important;
  color: var(--cs-gray-dark) !important;
  margin: 0 0 var(--cs-space-sm) !important;
}

/* ====================================
   🎯 IOT WIDGET STYLES - Sistema de componentes premium
==================================== */

/* Widget Container - Aislamiento perfecto */
.iot-widget {
    /* Aislamiento básico del contenedor */
    isolation: isolate !important;
    contain: layout style !important;
    
    /* Estilos del contenedor */
    font-family: var(--cs-font-family) !important;
    background: var(--iot-surface-primary) !important;
    color: var(--iot-text-primary) !important;
    line-height: 1.6 !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    padding: 20px !important;
    position: relative !important;
    
    /* Protección básica del contenedor */
    box-sizing: border-box !important;
    margin: 0 auto !important;
    width: 100% !important;
    display: block !important;
    
    /* Shadow DOM simulation - máximo aislamiento */
    transform: translateZ(0) !important;
    will-change: transform !important;
}

/* Efectos de fondo elegantes para el widget */
.iot-widget::before {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    left: -50% !important;
    width: 200% !important;
    height: 200% !important;
    background: radial-gradient(circle at 20% 30%, rgba(108, 70, 206, 0.08) 0%, transparent 50%), 
                radial-gradient(circle at 80% 70%, rgba(223, 86, 118, 0.06) 0%, transparent 50%),
                radial-gradient(circle at 40% 90%, rgba(62, 152, 188, 0.04) 0%, transparent 50%) !important;
    z-index: -1 !important;
    opacity: 0.7 !important;
    animation: gentleFloat 20s ease-in-out infinite !important;
}

@keyframes gentleFloat {
    0%, 100% { 
        transform: rotate(0deg) scale(1) !important; 
    }
    33% { 
        transform: rotate(1deg) scale(1.02) !important; 
    }
    66% { 
        transform: rotate(-1deg) scale(0.98) !important; 
    }
}

/* Reset básico solo para elementos hijos */
.iot-widget *,
.iot-widget *::before,
.iot-widget *::after,
.iot-widget *,
.iot-widget *::before,
.iot-widget *::after {
    box-sizing: border-box !important;
}

/* Container */
.iot-widget .widget-container,
.iot-widget .widget-container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: var(--iot-space-2xl) var(--iot-space-lg) !important;
}

/* Header visible desde el inicio */
.iot-widget .header,
.iot-widget .header {
    text-align: center !important;
    margin-bottom: var(--iot-space-lg) !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards !important;
    visibility: visible !important;
    display: block !important;
}

.iot-widget .subtitle,
.iot-widget .subtitle {
    color: var(--iot-color-innovation) !important; /* Token semántico */
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 1rem !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

.iot-widget .main-title,
.iot-widget .main-title {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 2.25rem !important;
    font-weight: 800 !important;
    margin-bottom: 1.5rem !important;
    line-height: 1.1 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    color: var(--iot-text-primary) !important;
}

.iot-widget .title-normal,
.iot-widget .title-normal {
    color: var(--iot-text-secondary) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.iot-widget .title-highlight,
.iot-widget .title-highlight {
    background: var(--cs-gradient-primary) !important; /* Brand gradient mantenido */
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    background-size: 300% 300% !important;
    animation: gradientFlow 4s ease-in-out infinite !important;
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline !important;
}

.iot-widget .title-highlight::after,
.iot-widget .title-highlight::after {
    content: '' !important;
    position: absolute !important;
    bottom: -4px !important;
    left: 0 !important;
    width: 100% !important;
    height: 4px !important;
    background: var(--cs-gradient-primary) !important; /* Brand gradient mantenido */
    border-radius: 2px !important;
    animation: slideIn 1.2s ease-out 0.5s both !important;
}

.iot-widget .tabs-nav,
.iot-widget .tabs-nav {
    display: inline-flex !important;
    gap: var(--iot-space-sm) !important;
    padding: var(--iot-space-sm) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(20px) !important;
    border-radius: 24px !important;
    box-shadow: var(--iot-shadow-md) !important;
    border: 1px solid var(--cs-border-light) !important;
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    animation: tabsSlideIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 10 !important;
}

.iot-widget .tabs-wrapper,
.iot-widget .tabs-wrapper {
    position: relative !important;
    margin-bottom: var(--iot-space-sm) !important;
    display: flex !important;
    justify-content: center !important;
}

.iot-widget .tabs-nav::-webkit-scrollbar,
.iot-widget .tabs-nav::-webkit-scrollbar {
    display: none !important;
}

.iot-widget .tab-button,
.iot-widget .tab-button {
    display: flex !important;
    align-items: center !important;
    gap: var(--iot-space-xs) !important;
    padding: var(--iot-space-sm) var(--iot-space-lg) !important;
    border: none !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--cs-text-light) !important;
    font-size: 0.875rem !important;
    font-weight: var(--cs-font-weight-medium) !important;
    cursor: pointer !important;
    border-radius: 16px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    min-height: 40px !important;
    min-width: auto !important;
    z-index: 20 !important;
}

.iot-widget .tab-button:hover,
.iot-widget .tab-button:hover {
    background: rgba(108, 70, 206, 0.15) !important; /* Brand color mantenido */
    color: var(--cs-primary) !important; /* Brand color mantenido */
    transform: translateY(-1px) !important;
    opacity: 1 !important;
}

.iot-widget .tab-button.active,
.iot-widget .tab-button.active {
    background: var(--cs-gradient-primary) !important; /* Brand gradient mantenido */
    background-size: 200% 100% !important;
    animation: gradientShift 3s ease-in-out infinite !important;
    color: white !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--iot-shadow-primary), 0 0 20px rgba(108, 70, 206, 0.4) !important; /* Enhanced glow */
    opacity: 1 !important;
}

.iot-widget .tab-icon,
.iot-widget .tab-icon {
    width: 16px !important;
    height: 16px !important;
    fill: currentColor !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

.iot-widget .tab-button:hover .tab-icon,
.iot-widget .tab-button:hover .tab-icon {
    transform: scale(1.1) !important;
}

.iot-widget .tab-button.active .tab-icon,
.iot-widget .tab-button.active .tab-icon {
    transform: scale(1.1) rotate(5deg) !important;
    animation: iconPulse 2s ease-in-out infinite !important;
}

/* Asegurar que el texto de los botones sea visible */
.iot-widget .tab-button span,
.iot-widget .tab-button span {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline !important;
    color: inherit !important;
}

/* Content Area */
.iot-widget .content-area {
    background: var(--iot-surface-elevated) !important;
    border-radius: 20px !important;
    box-shadow: var(--iot-shadow-medium) !important;
    overflow: hidden !important;
    border: 1px solid var(--iot-border-light) !important;
    position: relative !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: contentFadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) 1s forwards !important;
}

.iot-widget .content-area::before,
.iot-widget .content-area::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(108, 70, 206, 0.3), transparent) !important;
}

.iot-widget .tab-content,
.iot-widget .tab-content {
    display: none !important;
}

.iot-widget .tab-content.active,
.iot-widget .tab-content.active {
    display: block !important;
    animation: fadeIn 0.6s ease-out !important;
}

.iot-widget .content-grid,
.iot-widget .content-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    min-height: 500px !important;
    align-items: center !important;
}

/* Text Content */
.iot-widget .text-content,
.iot-widget .text-content {
    padding: var(--iot-space-2xl) !important;
}

.iot-widget .content-badge,
.iot-widget .content-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--iot-space-xs) !important;
    padding: var(--iot-space-xs) var(--iot-space-md) !important;
    background: linear-gradient(135deg, rgba(108, 70, 206, 0.1), rgba(223, 86, 118, 0.1)) !important; /* Brand colors */
    color: var(--cs-primary) !important; /* Brand color */
    border-radius: 16px !important;
    font-size: 0.75rem !important;
    font-weight: var(--cs-font-weight-semibold) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: var(--iot-space-lg) !important;
    border: 1px solid rgba(108, 70, 206, 0.2) !important; /* Brand color */
}

.iot-widget .content-title,
.iot-widget .content-title {
    font-size: 1.5rem !important;
    font-weight: var(--cs-font-weight-bold) !important;
    color: var(--cs-text-color) !important;
    margin-bottom: var(--iot-space-md) !important;
    line-height: 1.3 !important;
}

.iot-widget .content-description,
.iot-widget .content-description {
    font-size: 1rem !important;
    color: var(--cs-text-light) !important;
    line-height: 1.7 !important;
    margin-bottom: var(--iot-space-lg) !important;
}

.iot-widget .content-subtitle,
.iot-widget .content-subtitle {
    font-size: 1.125rem !important;
    font-weight: var(--cs-font-weight-semibold) !important;
    color: var(--cs-text-color) !important;
    margin: var(--iot-space-lg) 0 var(--iot-space-md) 0 !important;
}

/* Features List */
.iot-widget .features-list,
.iot-widget .features-list {
    list-style: none !important;
    margin-bottom: var(--iot-space-lg) !important;
}

.iot-widget .feature-item,
.iot-widget .feature-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: var(--iot-space-sm) !important;
    margin-bottom: 2px !important;
    padding: 2px var(--iot-space-xs) !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
}

.iot-widget .feature-item:hover,
.iot-widget .feature-item:hover {
    background: rgba(108, 70, 206, 0.05) !important; /* Brand color */
    transform: translateX(4px) !important;
}

.iot-widget .feature-item:hover .feature-bullet,
.iot-widget .feature-item:hover .feature-bullet {
    transform: scale(1.2) !important;
    box-shadow: 0 2px 8px rgba(108, 70, 206, 0.3) !important; /* Brand color */
}

.iot-widget .feature-bullet,
.iot-widget .feature-bullet {
    width: 6px !important;
    height: 6px !important;
    background: var(--cs-gradient-primary) !important; /* Brand gradient */
    border-radius: 50% !important;
    margin-top: 8px !important;
    flex-shrink: 0 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.iot-widget .feature-text,
.iot-widget .feature-text {
    font-size: var(--cs-text-small) !important;
    color: var(--cs-text-light) !important;
    line-height: 1.6 !important;
}

.iot-widget .feature-text strong,
.iot-widget .feature-text strong {
    color: var(--cs-text-color) !important;
    font-weight: var(--cs-font-weight-semibold) !important;
}

/* CTA Button */
.iot-widget .cta-button,
.iot-widget .cta-button {
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--iot-space-sm) !important;
    padding: var(--iot-space-md) var(--iot-space-xl) !important;
    background: linear-gradient(135deg, transparent, rgba(108, 70, 206, 0.05)) !important; /* Brand color */
    color: var(--cs-primary) !important; /* Brand color */
    border: 2px solid var(--cs-primary) !important; /* Brand color */
    border-radius: 10px !important;
    text-decoration: none !important;
    font-size: 0.875rem !important;
    font-weight: var(--cs-font-weight-semibold) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.iot-widget .cta-button:hover,
.iot-widget .cta-button:hover {
    background: var(--cs-gradient-primary) !important; /* Brand gradient */
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--iot-shadow-primary) !important; /* Brand shadow */
}

.iot-widget .cta-icon,
.iot-widget .cta-icon {
    width: 16px !important;
    height: 16px !important;
    fill: currentColor !important;
    transition: transform 0.3s ease !important;
}

.iot-widget .cta-button:hover .cta-icon,
.iot-widget .cta-button:hover .cta-icon {
    transform: translateX(4px) !important;
}

/* Image Content */
.iot-widget .image-content,
.iot-widget .image-content {
    padding: var(--iot-space-xl) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--cs-card-background) !important;
}

.iot-widget .content-image,
.iot-widget .content-image {
    width: 100% !important;
    height: auto !important;
    max-width: 450px !important;
    border-radius: 16px !important;
    box-shadow: var(--iot-shadow-md) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: 1px solid var(--cs-border-light) !important;
    opacity: 0 !important;
}

.iot-widget .content-image.loaded,
.iot-widget .content-image.loaded {
    opacity: 1 !important;
}

.iot-widget .content-image:hover,
.iot-widget .content-image:hover {
    transform: scale(1.02) translateY(-4px) !important;
    box-shadow: var(--iot-shadow-lg) !important;
}

/* Lazy loading placeholder */
.iot-widget .content-image.lazy-load,
.iot-widget .content-image.lazy-load {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%) !important;
    background-size: 200% 100% !important;
    animation: shimmer 1.5s infinite !important;
}

/* Animations */
@keyframes fadeInUp {
    from { opacity: 0 !important; transform: translateY(30px) !important; }
    to { opacity: 1 !important; transform: translateY(0) !important; }
}

@keyframes fadeIn {
    from { opacity: 0 !important; }
    to { opacity: 1 !important; }
}

@keyframes gradientFlow {
    0%, 100% { background-position: 0% 50% !important; }
    50% { background-position: 100% 50% !important; }
}

@keyframes slideIn {
    from { transform: scaleX(0) !important; transform-origin: left !important; }
    to { transform: scaleX(1) !important; transform-origin: left !important; }
}

@keyframes shimmer {
    0% { background-position: -200% 0 !important; }
    100% { background-position: 200% 0 !important; }
}

@keyframes tabsSlideIn {
    0% { 
        opacity: 0 !important; 
        transform: translateY(20px) scale(0.95) !important; 
    }
    100% { 
        opacity: 1 !important; 
        transform: translateY(0) scale(1) !important; 
    }
}

@keyframes contentFadeIn {
    0% { 
        opacity: 0 !important; 
        transform: translateY(30px) !important; 
    }
    100% { 
        opacity: 1 !important; 
        transform: translateY(0) !important; 
    }
}

@keyframes iconPulse {
    0%, 100% { transform: scale(1.1) rotate(5deg) !important; }
    50% { transform: scale(1.15) rotate(5deg) !important; }
}

/* Content Animation Classes */
.iot-widget .animate-content > * {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* ===== 🎭 MICRO-ANIMACIONES PREMIUM v2.0 ===== */

/* Slide lateral cinematográfico entre tabs */
.iot-widget .tab-content {
    opacity: 0 !important;
    transform: translateX(30px) !important;
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

.iot-widget .tab-content.active {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

.iot-widget .tab-content.slide-out-left {
    opacity: 0 !important;
    transform: translateX(-30px) !important;
}

/* Animación de contenido escalonada premium */
.iot-widget .tab-content.active .animate-content > * {
    opacity: 0 !important;
    transform: translateY(20px) translateX(10px) !important;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.iot-widget .tab-content.active .animate-content.visible > *:nth-child(1) {
    opacity: 1 !important;
    transform: translateY(0) translateX(0) !important;
    transition-delay: 0.1s !important;
}

.iot-widget .tab-content.active .animate-content.visible > *:nth-child(2) {
    opacity: 1 !important;
    transform: translateY(0) translateX(0) !important;
    transition-delay: 0.2s !important;
}

.iot-widget .tab-content.active .animate-content.visible > *:nth-child(3) {
    opacity: 1 !important;
    transform: translateY(0) translateX(0) !important;
    transition-delay: 0.3s !important;
}

.iot-widget .tab-content.active .animate-content.visible > *:nth-child(4) {
    opacity: 1 !important;
    transform: translateY(0) translateX(0) !important;
    transition-delay: 0.4s !important;
}

.iot-widget .tab-content.active .animate-content.visible > *:nth-child(5) {
    opacity: 1 !important;
    transform: translateY(0) translateX(0) !important;
    transition-delay: 0.5s !important;
}

.iot-widget .tab-content.active .animate-content.visible > *:nth-child(6) {
    opacity: 1 !important;
    transform: translateY(0) translateX(0) !important;
    transition-delay: 0.6s !important;
}

/* Parallax sutil en imágenes */
.iot-widget .content-image {
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
    transform-origin: center center !important;
}

.iot-widget .tab-content.active .content-image {
    transform: scale(1.02) translateY(-5px) !important;
}

.iot-widget .tab-content:not(.active) .content-image {
    transform: scale(0.98) translateY(10px) !important;
}

/* Loading skeleton para imágenes */
.iot-widget .content-image:not(.loaded) {
    background: linear-gradient(90deg, rgba(108, 70, 206, 0.1) 25%, rgba(108, 70, 206, 0.2) 50%, rgba(108, 70, 206, 0.1) 75%) !important;
    background-size: 200% 100% !important;
    animation: shimmer 1.5s infinite !important;
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ===== 🌈 GRADIENTES ANIMADOS PREMIUM ===== */
@keyframes gradientShift {
    0%, 100% { 
        background-position: 0% 50%; 
        filter: hue-rotate(0deg);
    }
    50% { 
        background-position: 100% 50%; 
        filter: hue-rotate(10deg);
    }
}

@keyframes iconPulse {
    0%, 100% { 
        transform: scale(1.1) rotate(5deg); 
        filter: drop-shadow(0 0 5px rgba(108, 70, 206, 0.5));
    }
    50% { 
        transform: scale(1.15) rotate(7deg); 
        filter: drop-shadow(0 0 10px rgba(108, 70, 206, 0.8));
    }
}

/* ===== 🔮 GLASSMORPHISM AVANZADO v2.0 ===== */
.iot-widget .tabs-nav {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 
        var(--iot-shadow-md),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 0 30px rgba(108, 70, 206, 0.1) !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.iot-widget .tabs-nav:hover {
    backdrop-filter: blur(25px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(200%) !important;
    box-shadow: 
        var(--iot-shadow-lg),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 0 40px rgba(108, 70, 206, 0.15) !important;
}

/* Glassmorphism en el widget principal */
.iot-widget {
    position: relative !important;
}

.iot-widget::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: 
        radial-gradient(circle at 20% 30%, rgba(108, 70, 206, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(223, 86, 118, 0.05) 0%, transparent 50%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
    transition: opacity 0.8s ease !important;
}

.iot-widget:hover::before {
    opacity: 1.2 !important;
}

/* ===== 🚫 OVERRIDE PARA WIDGET SIN FONDOS ===== */
/* Anular fondos específicamente para este widget, manteniendo CSS global intacto */

.iot-widget::before,
.iot-widget::after {
    display: none !important; /* Desactiva fondos decorativos */
}

.iot-widget {
    background: transparent !important; /* Widget transparente */
}

.iot-widget .content-area {
    background: transparent !important; /* Área de contenido transparente */
    box-shadow: var(--iot-shadow-medium) !important; /* Mantiene sombra elegante */
    border-radius: 20px !important; /* Mantiene border radius */
}

.iot-widget .tabs-nav {
    background: rgba(108, 70, 206, 0.06) !important; /* Tint violeta más sutil del brand */
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(108, 70, 206, 0.1) !important; /* Borde violeta más sutil */
    box-shadow: 
        var(--iot-shadow-md),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 0 30px rgba(108, 70, 206, 0.12) !important;
    padding: var(--iot-space-xs) !important; /* Navbar más compacta verticalmente */
    /* Navbar con tint violeta elegante y altura reducida */
}

/* ===== 🌊 SISTEMA DE TRANSICIONES SUAVES ENTRE WIDGETS ===== */

/* Fade zones para transiciones seamless */
.iot-widget::after {
    content: '' !important;
    position: absolute !important;
    bottom: -50px !important;
    left: 0 !important;
    right: 0 !important;
    height: 100px !important;
    background: linear-gradient(to bottom, 
        var(--iot-surface-primary) 0%, 
        rgba(255, 255, 255, 0.8) 40%,
        rgba(255, 255, 255, 0.4) 70%,
        transparent 100%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
    transition: opacity 0.8s ease !important;
}

.iot-widget + .iot-widget::before {
    top: -50px !important;
    background: linear-gradient(to top, 
        var(--iot-surface-primary) 0%, 
        rgba(255, 255, 255, 0.8) 40%,
        rgba(255, 255, 255, 0.4) 70%,
        transparent 100%) !important;
}

/* Stacking context inteligente */
.iot-widget {
    position: relative !important;
    z-index: 2 !important;
    margin-bottom: -50px !important;
    background: transparent !important;
}

.iot-widget:last-child {
    margin-bottom: 0 !important;
}

/* ===== 📦 MODO COMPACTO PREMIUM ===== */

.iot-widget.compact {
    --iot-space-xs: 0.125rem !important;   /* 2px */
    --iot-space-sm: 0.25rem !important;    /* 4px */
    --iot-space-md: 0.5rem !important;     /* 8px */
    --iot-space-lg: 0.75rem !important;    /* 12px */
    --iot-space-xl: 1rem !important;       /* 16px */
}

.iot-widget.compact .widget-container {
    padding: var(--iot-space-lg) !important;
}

.iot-widget.compact .header {
    margin-bottom: var(--iot-space-md) !important;
}

.iot-widget.compact .main-title {
    font-size: 1.75rem !important;
    margin-bottom: var(--iot-space-sm) !important;
}

.iot-widget.compact .subtitle {
    font-size: 0.75rem !important;
    margin-bottom: var(--iot-space-xs) !important;
}

.iot-widget.compact .tabs-nav {
    gap: var(--iot-space-xs) !important;
    padding: var(--iot-space-xs) !important;
}

.iot-widget.compact .tab-button {
    padding: var(--iot-space-xs) var(--iot-space-md) !important;
    font-size: 0.75rem !important;
}

.iot-widget.compact .content-grid {
    gap: var(--iot-space-md) !important;
}

.iot-widget.compact .text-content {
    padding: var(--iot-space-md) !important;
}

.iot-widget.compact .content-title {
    font-size: 1.25rem !important;
    margin-bottom: var(--iot-space-xs) !important;
}

.iot-widget.compact .features-list {
    margin-bottom: var(--iot-space-md) !important;
}

.iot-widget.compact .feature-item {
    margin-bottom: 1px !important;
    padding: 1px var(--iot-space-xs) !important;
}

/* Compact mobile adjustments */
@media (max-width: 768px) {
    .iot-widget.compact .widget-container {
        padding: var(--iot-space-md) !important;
    }
    
    .iot-widget.compact .main-title {
        font-size: 1.5rem !important;
    }
    
    .iot-widget.compact .tab-button span {
        font-size: 0.6875rem !important;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .iot-widget .widget-container,
    .iot-widget .widget-container { 
        padding: var(--cs-space-xl) var(--cs-space-md) !important; 
    }
    .iot-widget .main-title,
    .iot-widget .main-title { 
        font-size: var(--cs-text-h2) !important; 
    }
    .iot-widget .content-grid,
    .iot-widget .content-grid { 
        grid-template-columns: 1fr !important; 
        gap: 0 !important; 
    }
    .iot-widget .image-content,
    .iot-widget .image-content { 
        order: -1 !important; 
        padding: var(--cs-space-lg) !important; 
    }
    .iot-widget .text-content,
    .iot-widget .text-content { 
        padding: var(--cs-space-xl) var(--cs-space-lg) !important; 
    }
    .iot-widget .tabs-nav,
    .iot-widget .tabs-nav { 
        gap: var(--cs-space-xs) !important; 
        padding: var(--cs-space-xs) !important; 
    }
    .iot-widget .tab-button,
    .iot-widget .tab-button { 
        padding: var(--cs-space-sm) var(--cs-space-md) !important; 
        font-size: 0.75rem !important; 
    }
}

@media (max-width: 480px) {
    .iot-widget .main-title,
    .iot-widget .main-title { 
        font-size: var(--cs-text-h3) !important; 
    }
    .iot-widget .content-title,
    .iot-widget .content-title { 
        font-size: var(--cs-text-h4) !important; 
    }
    .iot-widget .tab-button span,
    .iot-widget .tab-button span { 
        display: none !important; 
    }
    .iot-widget .tab-button,
    .iot-widget .tab-button { 
        width: 44px !important; 
        height: 44px !important; 
        padding: 0 !important; 
        justify-content: center !important; 
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .iot-widget *,
    .iot-widget * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

.iot-widget .tab-button:focus,
.iot-widget .cta-button:focus,
.iot-widget .tab-button:focus,
.iot-widget .cta-button:focus {
    outline: 2px solid var(--cs-primary) !important; /* Brand color */
    outline-offset: 2px !important;
}

/* ====================================
   🚀 HERO SECTION COMPONENTS
==================================== */

/* Hero Base Styles - Elegant Version */
.cs-hero-home {
    position: relative !important;
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    background: linear-gradient(135deg, #ffffff 0%, #fafbff 40%, #f8f9ff 100%) !important;
    overflow: hidden !important;
}

/* Elegant background decorations */
.cs-hero-home::before {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    right: -20% !important;
    width: 600px !important;
    height: 600px !important;
    background: radial-gradient(circle, rgba(108, 70, 206, 0.08) 0%, transparent 70%) !important;
    border-radius: 50% !important;
    z-index: 1 !important;
}

.cs-hero-home::after {
    content: '' !important;
    position: absolute !important;
    bottom: -40% !important;
    left: -15% !important;
    width: 500px !important;
    height: 500px !important;
    background: radial-gradient(circle, rgba(223, 86, 118, 0.06) 0%, transparent 70%) !important;
    border-radius: 50% !important;
    z-index: 1 !important;
}

@keyframes cs-gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    25% { background-position: 100% 50%; }
    50% { background-position: 100% 100%; }
    75% { background-position: 0% 100%; }
}

.cs-hero-content {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: var(--cs-space-xxl) !important;
    align-items: center !important;
    margin-bottom: var(--cs-space-xxl) !important;
}

/* Hero Text Styles - Elegant Version */
.cs-hero-title {
    font-size: 4rem !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    margin-bottom: var(--cs-space-xl) !important;
    background: linear-gradient(135deg, var(--cs-primary) 0%, var(--cs-secondary) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    letter-spacing: -0.02em !important;
}

.cs-hero-subtitle {
    color: var(--cs-gray-dark) !important;
    font-size: 1.375rem !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    margin-bottom: var(--cs-space-xxl) !important;
    opacity: 0.8 !important;
}

/* Partners Carousel - Elegant Version */
.cs-partners-carousel {
    overflow: hidden !important;
    padding: var(--cs-space-xl) 0 !important;
    position: relative !important;
}

.cs-partners-carousel::before,
.cs-partners-carousel::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    width: 100px !important;
    height: 100% !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

.cs-partners-carousel::before {
    left: 0 !important;
    background: linear-gradient(to right, rgba(255, 255, 255, 1), transparent) !important;
}

.cs-partners-carousel::after {
    right: 0 !important;
    background: linear-gradient(to left, rgba(255, 255, 255, 1), transparent) !important;
}

.cs-partners-track {
    display: flex !important;
    gap: var(--cs-space-xxl) !important;
    animation: cs-scroll-horizontal 40s linear infinite !important;
    will-change: transform !important;
}

.cs-partner-item {
    flex-shrink: 0 !important;
    width: 140px !important;
    height: 70px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.8) !important;
    border-radius: var(--cs-radius-lg) !important;
    padding: var(--cs-space-lg) !important;
    transition: all var(--cs-transition-normal) !important;
    box-shadow: 0 2px 20px rgba(108, 70, 206, 0.08) !important;
    border: 1px solid rgba(108, 70, 206, 0.1) !important;
}

.cs-partner-item:hover {
    background: rgba(255, 255, 255, 1) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 30px rgba(108, 70, 206, 0.15) !important;
}

.cs-partner-item img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    filter: grayscale(100%) opacity(0.6) !important;
    transition: all var(--cs-transition-normal) !important;
}

.cs-partner-item:hover img {
    filter: grayscale(0%) opacity(1) !important;
}

@keyframes cs-scroll-horizontal {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Hero Responsive */
@media (max-width: 768px) {
    .cs-hero-content {
        grid-template-columns: 1fr !important;
        gap: var(--cs-space-lg) !important;
        text-align: center !important;
    }
    
    .cs-hero-title {
        font-size: 2.5rem !important;
    }
    
    .cs-hero-subtitle {
        font-size: 1.1rem !important;
    }
    
    .cs-partner-item {
        width: 120px !important;
        height: 50px !important;
    }
}

@media (max-width: 480px) {
    .cs-hero-title {
        font-size: 2rem !important;
    }
    
    .cs-hero-subtitle {
        font-size: 1rem !important;
    }
    
    .cs-partner-item {
        width: 100px !important;
        height: 40px !important;
    }
}

/* ====================================
   🔄 MEDIA QUERY LEGACY - Del CSS original
==================================== */

/* Specific fix from your original CSS */
@media only screen and (min-width: 1024px) and (max-width: 1450px) {
  .titleSection h2 {
    font-size: 62px !important;
    line-height: 1.4 !important;
  }
}