.cs-button-wrapper {
  display: flex;
  align-items: center;
  gap: var(--cs-space-sm, 0.75rem);
}

.cs-button-wrapper.cs-button-wrapper--full {
  width: 100%;
}

.cs-button-wrapper.cs-button-wrapper--full .cs-btn {
  width: 100%;
  justify-content: center;
}

.cs-button-wrapper .cs-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

.cs-button-wrapper .elementor-button-icon svg,
.cs-button-wrapper .elementor-button-icon i {
  width: 1em;
  height: 1em;
}

.cs-btn.elementor-size-sm,
.cs-btn.cs-btn--small {
  padding: var(--cs-space-sm, 0.5rem) var(--cs-space-md, 1rem) !important;
  font-size: var(--cs-text-xs, 0.75rem) !important;
  min-height: 40px !important;
}

.cs-btn.elementor-size-lg,
.cs-btn.cs-btn--large {
  padding: var(--cs-space-lg, 1.5rem) var(--cs-space-xl, 2.25rem) !important;
  font-size: var(--cs-text-body, 1.125rem) !important;
  min-height: 58px !important;
}

.cs-btn.elementor-size-md,
.cs-btn.cs-btn--medium {
  padding: var(--cs-space-md, 1rem) var(--cs-space-lg, 1.5rem) !important;
}

.cs-btn__content,
.cs-btn__spinner,
.cs-btn__success-icon {
  pointer-events: none;
}

.cs-btn__spinner,
.cs-btn__success-icon {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.cs-btn__spinner {
  width: 1.2em;
  height: 1.2em;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: cs-btn-spinner 0.75s linear infinite;
}

.cs-btn__success-icon {
  font-size: 1.2em;
  font-weight: 700;
}

.cs-btn.is-loading {
  cursor: progress !important;
  filter: brightness(1.05);
}

.cs-btn.is-loading .cs-btn__content,
.cs-btn.is-loading .elementor-button-text {
  visibility: hidden;
}

.cs-btn.is-loading .cs-btn__spinner {
  display: block;
}

.cs-btn.is-success {
  --cs-btn-bg: var(--cs-color-success, #28a745);
  --cs-btn-color: var(--cs-white);
  pointer-events: none;
}

.cs-btn.is-success .cs-btn__content,
.cs-btn.is-success .elementor-button-text {
  visibility: hidden;
}

.cs-btn.is-success .cs-btn__success-icon {
  display: block;
}

  box-shadow: 0 0 0 1px rgba(150, 61, 122, 0.2) !important;
}

.cs-btn--secondary.cs-btn-palette-strength:hover {
  background: var(--cs-accent-uva) !important;
  color: var(--cs-white) !important;
  box-shadow: 0 18px 36px rgba(150, 61, 122, 0.32) !important;
}

/* ============================================
   OUTLINE VARIANT PALETTES
   ============================================ */

.cs-btn--outline.cs-btn-palette-neutral {
  color: var(--cs-gray-dark) !important;
  border-color: var(--cs-gray-light) !important;
  box-shadow: none !important;
}

.cs-btn--outline.cs-btn-palette-neutral:hover {
  background: var(--cs-gray-light) !important;
  color: var(--cs-gray-dark) !important;
  box-shadow: none !important;
}

.cs-btn--outline.cs-btn-palette-violet {
  --cs-btn-color: var(--cs-primary);
  --cs-btn-border-color: rgba(108, 70, 206, 0.7);
  --cs-btn-shadow: 0 10px 28px rgba(108, 70, 206, 0.18);
  --cs-btn-hover-bg: rgba(108, 70, 206, 0.12);
}

.cs-btn--outline.cs-btn-palette-coral {
  --cs-btn-color: var(--cs-secondary);
  --cs-btn-border-color: rgba(223, 86, 118, 0.7);
  --cs-btn-shadow: 0 10px 28px rgba(223, 86, 118, 0.18);
  --cs-btn-hover-bg: rgba(223, 86, 118, 0.12);
}

.cs-btn--outline.cs-btn-palette-sky {
  --cs-btn-color: var(--cs-accent-cielo);
  --cs-btn-border-color: rgba(62, 152, 188, 0.7);
  --cs-btn-shadow: 0 10px 28px rgba(62, 152, 188, 0.18);
  --cs-btn-hover-bg: rgba(62, 152, 188, 0.12);
}

.cs-btn--outline.cs-btn-palette-aqua {
  --cs-btn-color: var(--cs-accent-aguamarina);
  --cs-btn-border-color: rgba(137, 208, 214, 0.7);
  --cs-btn-shadow: 0 10px 28px rgba(137, 208, 214, 0.18);
  --cs-btn-hover-bg: rgba(137, 208, 214, 0.12);
}

.cs-btn--outline.cs-btn-palette-strength {
  --cs-btn-color: var(--cs-accent-uva);
  --cs-btn-border-color: rgba(150, 61, 122, 0.7);
  --cs-btn-shadow: 0 10px 28px rgba(150, 61, 122, 0.18);
  --cs-btn-hover-bg: rgba(150, 61, 122, 0.12);
}

.cs-btn--primary.cs-btn-palette-violet {
  --cs-btn-bg: var(--cs-gradient-primary);
  --cs-btn-color: var(--cs-white);
  --cs-btn-shadow: var(--cs-shadow-sm);
  --cs-btn-hover-shadow: var(--cs-shadow-primary);
}

.cs-btn--primary.cs-btn-palette-coral {
  --cs-btn-bg: linear-gradient(135deg, #DF5676 0%, #F98DA4 100%);
  --cs-btn-color: var(--cs-white);
  --cs-btn-shadow: 0 18px 40px rgba(223, 86, 118, 0.32);
  --cs-btn-hover-shadow: 0 24px 56px rgba(223, 86, 118, 0.36);
}

.cs-btn--primary.cs-btn-palette-clarity {
  --cs-btn-bg: var(--cs-gradient-clarity);
  --cs-btn-color: var(--cs-white);
  --cs-btn-shadow: 0 20px 42px rgba(62, 152, 188, 0.32);
  --cs-btn-hover-shadow: 0 26px 58px rgba(62, 152, 188, 0.36);
}

.cs-btn--primary.cs-btn-palette-trust {
  --cs-btn-bg: var(--cs-gradient-trust);
  --cs-btn-color: var(--cs-white);
  --cs-btn-shadow: 0 20px 45px rgba(62, 152, 188, 0.34);
  --cs-btn-hover-shadow: 0 28px 62px rgba(62, 152, 188, 0.38);
}

.cs-btn--primary.cs-btn-palette-innovation {
  --cs-btn-bg: var(--cs-gradient-innovation);
  --cs-btn-color: var(--cs-white);
  --cs-btn-shadow: 0 20px 45px rgba(137, 208, 214, 0.32);
  --cs-btn-hover-shadow: 0 28px 60px rgba(137, 208, 214, 0.36);
}

.cs-btn--primary.cs-btn-palette-strength {
  --cs-btn-bg: var(--cs-gradient-strength);
  --cs-btn-color: var(--cs-white);
  --cs-btn-shadow: 0 20px 45px rgba(150, 61, 122, 0.34);
  --cs-btn-hover-shadow: 0 28px 62px rgba(150, 61, 122, 0.38);
}

.cs-btn--secondary.cs-btn-palette-violet {
  --cs-btn-color: var(--cs-primary);
  --cs-btn-border-color: var(--cs-primary);
  --cs-btn-shadow: 0 0 0 1px rgba(108, 70, 206, 0.18);
  --cs-btn-hover-bg: var(--cs-primary);
  --cs-btn-hover-color: var(--cs-white);
  --cs-btn-hover-shadow: 0 18px 36px rgba(108, 70, 206, 0.32);
}

.cs-btn--secondary.cs-btn-palette-coral {
  --cs-btn-color: var(--cs-secondary);
  --cs-btn-border-color: var(--cs-secondary);
  --cs-btn-shadow: 0 0 0 1px rgba(223, 86, 118, 0.18);
  --cs-btn-hover-bg: var(--cs-secondary);
  --cs-btn-hover-color: var(--cs-white);
  --cs-btn-hover-shadow: 0 18px 36px rgba(223, 86, 118, 0.32);
}

.cs-btn--secondary.cs-btn-palette-sky {
  --cs-btn-color: var(--cs-accent-cielo);
  --cs-btn-border-color: var(--cs-accent-cielo);
  --cs-btn-shadow: 0 0 0 1px rgba(62, 152, 188, 0.18);
  --cs-btn-hover-bg: var(--cs-accent-cielo);
  --cs-btn-hover-color: var(--cs-white);
  --cs-btn-hover-shadow: 0 18px 36px rgba(62, 152, 188, 0.32);
}

.cs-btn--secondary.cs-btn-palette-aqua {
  --cs-btn-color: var(--cs-accent-aguamarina);
  --cs-btn-border-color: var(--cs-accent-aguamarina);
  --cs-btn-shadow: 0 0 0 1px rgba(137, 208, 214, 0.18);
  --cs-btn-hover-bg: var(--cs-accent-aguamarina);
  --cs-btn-hover-color: var(--cs-white);
  --cs-btn-hover-shadow: 0 18px 36px rgba(137, 208, 214, 0.32);
}

.cs-btn--secondary.cs-btn-palette-strength {
  --cs-btn-color: var(--cs-accent-uva);
  --cs-btn-border-color: var(--cs-accent-uva);
  --cs-btn-shadow: 0 0 0 1px rgba(150, 61, 122, 0.2);
  --cs-btn-hover-bg: var(--cs-accent-uva);
  --cs-btn-hover-color: var(--cs-white);
  --cs-btn-hover-shadow: 0 18px 36px rgba(150, 61, 122, 0.32);
}

.cs-btn--gradient.cs-btn-palette-lavender {
  --cs-btn-bg: linear-gradient(135deg, #E7E1F7 0%, #D3C4F2 100%);
  --cs-btn-color: var(--cs-primary);
  --cs-btn-shadow: 0 18px 32px rgba(108, 70, 206, 0.2);
}

.cs-btn--gradient.cs-btn-palette-sunrise {
  --cs-btn-bg: linear-gradient(135deg, #FEE1EA 0%, #F9B9C4 100%);
  --cs-btn-color: #92324A;
  --cs-btn-shadow: 0 18px 36px rgba(223, 86, 118, 0.22);
}

.cs-btn--gradient.cs-btn-palette-ocean {
  --cs-btn-bg: linear-gradient(135deg, #D7EFF6 0%, #A4DDE7 100%);
  --cs-btn-color: #17506C;
  --cs-btn-shadow: 0 18px 36px rgba(62, 152, 188, 0.22);
}

.cs-btn--gradient.cs-btn-palette-aurora {
  --cs-btn-bg: linear-gradient(135deg, #E2D5FF 0%, #A3DFE5 100%);
  --cs-btn-color: #3F317A;
  --cs-btn-shadow: 0 18px 36px rgba(137, 208, 214, 0.22);
}

.cs-btn--gradient.cs-btn-palette-twilight {
  --cs-btn-bg: linear-gradient(135deg, #E3D3FF 0%, #D7B3E8 100%);
  --cs-btn-color: #4A2B70;
  --cs-btn-shadow: 0 18px 36px rgba(150, 61, 122, 0.22);
}

.cs-btn-glow.cs-btn-palette-violet {
  --cs-btn-bg: linear-gradient(135deg, rgba(108, 70, 206, 1) 0%, rgba(223, 86, 118, 0.92) 100%);
  filter: drop-shadow(0 0 18px rgba(140, 96, 220, 0.45));
}

.cs-btn-glow.cs-btn-palette-coral {
  --cs-btn-bg: linear-gradient(135deg, #FF5F8F 0%, #FF99B6 100%);
  --cs-btn-shadow: 0 24px 58px rgba(255, 95, 143, 0.32), 0 12px 32px rgba(255, 153, 182, 0.18);
  --cs-btn-hover-shadow: 0 30px 64px rgba(255, 95, 143, 0.38), 0 16px 38px rgba(255, 153, 182, 0.22);
  filter: drop-shadow(0 0 16px rgba(255, 140, 177, 0.45));
}

.cs-btn-glow.cs-btn-palette-sky {
  --cs-btn-bg: linear-gradient(135deg, #3E98BC 0%, #6CDFEA 100%);
  --cs-btn-shadow: 0 24px 58px rgba(62, 152, 188, 0.32), 0 12px 32px rgba(108, 223, 234, 0.18);
  --cs-btn-hover-shadow: 0 30px 64px rgba(62, 152, 188, 0.38), 0 16px 38px rgba(108, 223, 234, 0.22);
  filter: drop-shadow(0 0 16px rgba(108, 223, 234, 0.35));
}

.cs-btn-glow.cs-btn-palette-aqua {
  --cs-btn-bg: linear-gradient(135deg, #00F2FF 0%, #37FFCF 100%);
  --cs-btn-color: #0E4051;
  --cs-btn-shadow: 0 24px 58px rgba(55, 255, 207, 0.32), 0 12px 32px rgba(0, 242, 255, 0.22);
  --cs-btn-hover-shadow: 0 30px 64px rgba(55, 255, 207, 0.38), 0 16px 38px rgba(0, 242, 255, 0.26);
  filter: drop-shadow(0 0 16px rgba(0, 255, 217, 0.4));
}

.cs-btn-glow.cs-btn-palette-strength {
  --cs-btn-bg: linear-gradient(135deg, #963D7A 0%, #DF5676 100%);
  --cs-btn-shadow: 0 24px 58px rgba(150, 61, 122, 0.34), 0 12px 32px rgba(223, 86, 118, 0.22);
  --cs-btn-hover-shadow: 0 30px 64px rgba(150, 61, 122, 0.4), 0 16px 38px rgba(223, 86, 118, 0.26);
  filter: drop-shadow(0 0 18px rgba(175, 79, 137, 0.45));
}

.cs-btn-glow.cs-btn-palette-clarity {
  --cs-btn-bg: linear-gradient(135deg, #6C46CE 0%, #3E98BC 100%);
  --cs-btn-color: var(--cs-white);
  --cs-btn-shadow: 0 24px 58px rgba(108, 70, 206, 0.32), 0 12px 32px rgba(62, 152, 188, 0.24);
  --cs-btn-hover-shadow: 0 32px 68px rgba(108, 70, 206, 0.38), 0 18px 42px rgba(62, 152, 188, 0.28);
  filter: drop-shadow(0 0 20px rgba(108, 70, 206, 0.38));
}

.cs-btn-glow.cs-btn-palette-trust {
  --cs-btn-bg: linear-gradient(135deg, #3E98BC 0%, #89D0D6 100%);
  --cs-btn-color: var(--cs-white);
  --cs-btn-shadow: 0 24px 58px rgba(62, 152, 188, 0.34), 0 12px 32px rgba(137, 208, 214, 0.22);
  --cs-btn-hover-shadow: 0 32px 68px rgba(62, 152, 188, 0.4), 0 18px 42px rgba(137, 208, 214, 0.28);
  filter: drop-shadow(0 0 18px rgba(62, 152, 188, 0.36));
}

.cs-btn-glow.cs-btn-palette-innovation {
  --cs-btn-bg: linear-gradient(135deg, #6C46CE 0%, #89D0D6 100%);
  --cs-btn-color: var(--cs-white);
  --cs-btn-shadow: 0 24px 58px rgba(108, 70, 206, 0.32), 0 12px 32px rgba(137, 208, 214, 0.22);
  --cs-btn-hover-shadow: 0 32px 68px rgba(108, 70, 206, 0.38), 0 18px 42px rgba(137, 208, 214, 0.26);
  filter: drop-shadow(0 0 20px rgba(108, 70, 206, 0.38));
}

/* ============================================
   ADVANCED EFFECT BUTTONS
   ============================================ */

.cs-btn-glow {
  --cs-btn-bg: linear-gradient(135deg, rgba(108, 70, 206, 1) 0%, rgba(223, 86, 118, 0.92) 100%);
  --cs-btn-color: var(--cs-white);
  --cs-btn-shadow: 0 24px 58px rgba(108, 70, 206, 0.32), 0 12px 32px rgba(223, 86, 118, 0.18);
  --cs-btn-hover-shadow: 0 30px 64px rgba(108, 70, 206, 0.38), 0 16px 38px rgba(223, 86, 118, 0.22);
  filter: drop-shadow(0 0 18px rgba(140, 96, 220, 0.45));
}

.cs-btn-glow:hover {
  transform: translateY(-3px) scale(1.01) !important;
}

.cs-btn-glass {
  --cs-btn-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.12) 100%);
  --cs-btn-color: rgba(33, 39, 58, 0.92);
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32), 0 20px 46px rgba(15, 23, 42, 0.18) !important;
  background: var(--cs-btn-bg) !important;
  color: var(--cs-btn-color) !important;
}

.cs-btn-glass.cs-btn-palette-neutral {
  --cs-btn-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.26) 0%, rgba(248, 250, 252, 0.1) 100%);
  --cs-btn-color: rgba(33, 39, 58, 0.9);
  border-color: rgba(255, 255, 255, 0.32) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 18px 40px rgba(15, 23, 42, 0.16) !important;
}

.cs-btn-glass.cs-btn-palette-violet {
  --cs-btn-bg: linear-gradient(135deg, rgba(108, 70, 206, 0.28) 0%, rgba(223, 86, 118, 0.16) 100%);
  --cs-btn-color: rgba(248, 250, 252, 0.96);
  border-color: rgba(150, 106, 230, 0.45) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 22px 48px rgba(108, 70, 206, 0.22) !important;
}

.cs-btn-glass.cs-btn-palette-coral {
  --cs-btn-bg: linear-gradient(135deg, rgba(223, 86, 118, 0.32) 0%, rgba(255, 153, 182, 0.18) 100%);
  --cs-btn-color: rgba(255, 255, 255, 0.96);
  border-color: rgba(223, 86, 118, 0.38) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 22px 48px rgba(223, 86, 118, 0.22) !important;
}

.cs-btn-glass.cs-btn-palette-clarity {
  --cs-btn-bg: linear-gradient(135deg, rgba(108, 70, 206, 0.26) 0%, rgba(62, 152, 188, 0.2) 100%);
  --cs-btn-color: rgba(248, 250, 252, 0.95);
  border-color: rgba(108, 70, 206, 0.35) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38), 0 20px 46px rgba(62, 152, 188, 0.22) !important;
}

.cs-btn-glass.cs-btn-palette-trust {
  --cs-btn-bg: linear-gradient(135deg, rgba(62, 152, 188, 0.28) 0%, rgba(137, 208, 214, 0.18) 100%);
  --cs-btn-color: rgba(248, 250, 252, 0.95);
  border-color: rgba(108, 193, 220, 0.35) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38), 0 20px 46px rgba(62, 152, 188, 0.22) !important;
}

.cs-btn-glass.cs-btn-palette-innovation {
  --cs-btn-bg: linear-gradient(135deg, rgba(108, 70, 206, 0.24) 0%, rgba(137, 208, 214, 0.2) 100%);
  --cs-btn-color: rgba(248, 250, 252, 0.95);
  border-color: rgba(137, 208, 214, 0.36) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38), 0 20px 46px rgba(137, 208, 214, 0.2) !important;
}

.cs-btn-glass.cs-btn-palette-strength {
  --cs-btn-bg: linear-gradient(135deg, rgba(150, 61, 122, 0.32) 0%, rgba(223, 86, 118, 0.2) 100%);
  --cs-btn-color: rgba(255, 255, 255, 0.96);
  border-color: rgba(150, 61, 122, 0.4) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 22px 48px rgba(150, 61, 122, 0.22) !important;
}

.cs-btn-glass.cs-btn-palette-sky {
  --cs-btn-bg: linear-gradient(135deg, rgba(62, 152, 188, 0.28) 0%, rgba(108, 223, 234, 0.18) 100%);
  --cs-btn-color: rgba(248, 250, 252, 0.95);
  border-color: rgba(108, 223, 234, 0.35) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38), 0 20px 46px rgba(62, 152, 188, 0.22) !important;
}

.cs-btn-glass.cs-btn-palette-aqua {
  --cs-btn-bg: linear-gradient(135deg, rgba(0, 242, 255, 0.28) 0%, rgba(55, 255, 207, 0.2) 100%);
  --cs-btn-color: rgba(15, 36, 51, 0.9);
  border-color: rgba(55, 255, 207, 0.32) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 18px 44px rgba(55, 255, 207, 0.2) !important;
}

.cs-btn__icon {
  transition: color 0.3s ease, transform 0.3s ease;
}

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

/* ============================================
   HEADING WIDGET STYLES
   ============================================ */

.cs-heading {
  display: flex;
  flex-direction: column;
  gap: var(--cs-space-sm, 0.75rem);
  max-width: 100%;
  text-align: left;
  align-items: flex-start;
}

.cs-heading--align-left {
  align-items: flex-start;
  text-align: left;
  margin-left: 0;
  margin-right: auto;
}

.cs-heading--align-center {
  align-items: center;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.cs-heading--align-right {
  align-items: flex-end;
  text-align: right;
  margin-left: auto;
  margin-right: 0;
}

.cs-heading__overline {
  font-size: clamp(0.75rem, 0.45vw + 0.6rem, 0.85rem);
  font-weight: var(--cs-font-weight-semibold, 600);
  letter-spacing: 0.18em;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--cs-overline-gap, 0.75rem);
  text-transform: none;
}

.cs-heading__overline--uppercase {
  text-transform: uppercase;
}

.cs-heading__overline--align-center {
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}

.cs-heading__overline--align-right {
  margin-left: auto;
  justify-content: flex-end;
}

.cs-heading__overline--pill {
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: rgba(108, 70, 206, 0.08);
  border: 1px solid rgba(108, 70, 206, 0.12);
}

.cs-heading__overline-icon-wrapper {
  display: inline-flex;
  align-items: center;
}

.cs-heading__overline-icon {
  width: 1em;
  height: 1em;
}

.cs-heading__title--uppercase {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.cs-heading__title--shadow {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* Shadow variations for different backgrounds */
.cs-heading__title--shadow.cs-heading--gradient,
.cs-heading__title--shadow.cs-heading--clarity,
.cs-heading__title--shadow.cs-heading--trust,
.cs-heading__title--shadow.cs-heading--innovation,
.cs-heading__title--shadow.cs-heading--strength {
  text-shadow: 0 3px 12px rgba(108, 70, 206, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);
}

.cs-heading__title--shadow.cs-heading--primary {
  text-shadow: 0 2px 8px rgba(108, 70, 206, 0.15), 0 1px 4px rgba(108, 70, 206, 0.1);
}

.cs-heading__overline--violet {
  color: var(--cs-primary, #6C46CE);
}

.cs-heading__overline--coral {
  color: var(--cs-secondary, #DF5676);
}

.cs-heading__overline--sky {
  color: var(--cs-accent-cielo, #3E98BC);
}

.cs-heading__overline--aqua {
  color: var(--cs-accent-aguamarina, #89D0D6);
}

.cs-heading__overline--gray {
  color: var(--cs-gray-medium, #9D9D9D);
}

.cs-heading__title {
  margin: 0;
  position: relative;
}

.cs-title.cs-title--h5 {
  font-size: clamp(1.2rem, 2.5vw, 1.65rem);
  line-height: 1.25;
  font-weight: var(--cs-font-weight-medium, 500);
}

.cs-title.cs-title--h6 {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.3;
  font-weight: var(--cs-font-weight-regular, 400);
}

.cs-heading__title.cs-heading--neutral {
  color: var(--cs-gray-dark, #3C3C3C) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

.cs-container-block__title.cs-heading--neutral {
  color: var(--cs-gray-dark, #3C3C3C) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

.cs-heading__title.cs-heading--primary {
  color: var(--cs-primary, #6C46CE) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

.cs-container-block__title.cs-heading--primary {
  color: var(--cs-primary, #6C46CE) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

.cs-heading__title.cs-heading--gradient,
.cs-heading__title.cs-heading--clarity,
.cs-heading__title.cs-heading--trust,
.cs-heading__title.cs-heading--innovation,
.cs-heading__title.cs-heading--strength {
  color: transparent !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

.cs-container-block__title.cs-heading--gradient,
.cs-container-block__title.cs-heading--clarity,
.cs-container-block__title.cs-heading--trust,
.cs-container-block__title.cs-heading--innovation,
.cs-container-block__title.cs-heading--strength {
  color: transparent !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

.cs-heading__title.cs-heading--gradient {
  background-image: var(--cs-gradient-primary);
}

.cs-container-block__title.cs-heading--gradient {
  background-image: var(--cs-gradient-primary);
}

.cs-heading__title.cs-heading--clarity {
  background-image: var(--cs-gradient-clarity);
}

.cs-container-block__title.cs-heading--clarity {
  background-image: var(--cs-gradient-clarity);
}

.cs-heading__title.cs-heading--trust {
  background-image: var(--cs-gradient-trust);
}

.cs-container-block__title.cs-heading--trust {
  background-image: var(--cs-gradient-trust);
}

.cs-heading__title.cs-heading--innovation {
  background-image: var(--cs-gradient-innovation);
}

.cs-container-block__title.cs-heading--innovation {
  background-image: var(--cs-gradient-innovation);
}

.cs-heading__title.cs-heading--strength {
  background-image: var(--cs-gradient-strength);
}

.cs-container-block__title.cs-heading--strength {
  background-image: var(--cs-gradient-strength);
}

.cs-heading__title.cs-animated-gradient,
.cs-heading__title[class*="cs-animated-gradient--"] {
  background-size: 200% 200%;
}

.cs-heading__title.cs-animated-gradient--shift {
  animation: cs-gradient-shift 8s ease infinite;
}

.cs-heading__title.cs-animated-gradient--flow {
  animation: cs-gradient-flow 12s ease-in-out infinite;
}

.cs-heading__title.cs-animated-gradient--wave {
  animation: cs-gradient-wave 6s ease-in-out infinite;
}

.cs-heading__title.cs-animated-gradient--rotate {
  animation: cs-gradient-rotate 10s ease-in-out infinite;
}

.cs-heading__title.cs-animated-gradient--pulse {
  animation: cs-gradient-pulse 4s ease-in-out infinite;
}

.cs-heading__title.cs-animated-gradient--breathe {
  animation: cs-gradient-breathe 6s ease-in-out infinite;
}

.cs-heading__title.cs-animated-gradient--shimmer {
  animation: cs-gradient-shimmer 3s linear infinite;
}

.cs-heading__description {
  margin: 0;
  color: var(--cs-gray-medium, #5b6770);
  font-size: var(--cs-text-body, 1rem);
  line-height: 1.6;
  max-width: 72ch;
}

/* Highlight styles */
.cs-heading--highlight .cs-heading__title {
  position: relative;
  display: inline-block;
}

.cs-heading--highlight-underline .cs-heading__title {
  padding-bottom: 0.35rem;
}

.cs-heading--highlight-underline .cs-heading__title::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 6px !important;
  border-radius: 999px !important;
  opacity: 0.85 !important;
}

.cs-heading--highlight-marker .cs-heading__title {
  padding: 0.25rem 0.4rem !important;
  margin: 0 -0.4rem !important;
  border-radius: var(--cs-radius-md, 12px) !important;
  box-decoration-break: clone;
}

.cs-heading--highlight-accent-bar .cs-heading__title::before {
  content: '' !important;
  position: absolute !important;
  top: -12px !important;
  left: 0 !important;
  width: 56px !important;
  height: 5px !important;
  border-radius: 999px !important;
  opacity: 0.9 !important;
}

.cs-heading--align-center.cs-heading--highlight-accent-bar .cs-heading__title::before {
  left: 50% !important;
  transform: translateX(-50%);
}

.cs-heading--align-right.cs-heading--highlight-accent-bar .cs-heading__title::before {
  left: auto !important;
  right: 0 !important;
}

.cs-heading--highlight-palette-violet .cs-heading__title::after,
.cs-heading--highlight-palette-violet .cs-heading__title::before {
  background: linear-gradient(135deg, rgba(108, 70, 206, 0.85) 0%, rgba(152, 116, 230, 0.9) 100%) !important;
}

.cs-heading--highlight-palette-violet.cs-heading--highlight-marker .cs-heading__title {
  background: rgba(108, 70, 206, 0.12) !important;
  color: var(--cs-primary, #6C46CE) !important;
}

.cs-heading--highlight-palette-coral .cs-heading__title::after,
.cs-heading--highlight-palette-coral .cs-heading__title::before {
  background: linear-gradient(135deg, rgba(223, 86, 118, 0.85) 0%, rgba(255, 143, 168, 0.9) 100%) !important;
}

.cs-heading--highlight-palette-coral.cs-heading--highlight-marker .cs-heading__title {
  background: rgba(223, 86, 118, 0.12) !important;
  color: var(--cs-secondary, #DF5676) !important;
}

.cs-heading--highlight-palette-sky .cs-heading__title::after,
.cs-heading--highlight-palette-sky .cs-heading__title::before {
  background: linear-gradient(135deg, rgba(62, 152, 188, 0.85) 0%, rgba(137, 208, 214, 0.9) 100%) !important;
}

.cs-heading--highlight-palette-sky.cs-heading--highlight-marker .cs-heading__title {
  background: rgba(62, 152, 188, 0.12) !important;
  color: var(--cs-accent-cielo, #3E98BC) !important;
}

.cs-heading--highlight-palette-aqua .cs-heading__title::after,
.cs-heading--highlight-palette-aqua .cs-heading__title::before {
  background: linear-gradient(135deg, rgba(137, 208, 214, 0.85) 0%, rgba(185, 236, 240, 0.9) 100%) !important;
}

.cs-heading--highlight-palette-aqua.cs-heading--highlight-marker .cs-heading__title {
  background: rgba(137, 208, 214, 0.12) !important;
  color: var(--cs-accent-aguamarina, #89D0D6) !important;
}

.cs-heading--highlight-palette-gray .cs-heading__title::after,
.cs-heading--highlight-palette-gray .cs-heading__title::before {
  background: linear-gradient(135deg, rgba(157, 157, 157, 0.7) 0%, rgba(224, 224, 224, 0.9) 100%) !important;
}

.cs-heading--highlight-palette-gray.cs-heading--highlight-marker .cs-heading__title {
  background: rgba(157, 157, 157, 0.12) !important;
  color: var(--cs-gray-dark, #3C3C3C) !important;
}

.cs-heading--highlight-palette-white .cs-heading__title::after,
.cs-heading--highlight-palette-white .cs-heading__title::before {
  background: rgba(255, 255, 255, 0.85) !important;
}

.cs-heading--highlight-palette-white.cs-heading--highlight-marker .cs-heading__title {
  background: rgba(255, 255, 255, 0.2) !important;
  color: var(--cs-gray-dark, #3C3C3C) !important;
}

.cs-heading--highlight-marker .cs-heading__title::after {
  display: none !important;
}

.cs-heading--highlight-accent-bar .cs-heading__title::after {
  display: none !important;
}

/* Reveal effects */
.cs-heading--reveal {
  opacity: 0;
  animation-duration: var(--cs-heading-reveal-duration, 0.65s);
  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation-delay: var(--cs-heading-reveal-delay, 0s);
  animation-fill-mode: forwards;
  will-change: opacity, transform;
}

.cs-heading--reveal-fade-up {
  animation-name: fade-in-up;
}

.cs-heading--reveal-fade-down {
  animation-name: cs-heading-fade-down;
}

.cs-heading--reveal-fade-right {
  animation-name: cs-heading-fade-right;
}

.cs-heading--reveal-slide-left {
  animation-name: cs-heading-slide-left;
}

.cs-heading--reveal-slide-right {
  animation-name: cs-heading-slide-right;
}

.cs-heading--reveal-zoom-in {
  animation-name: cs-heading-zoom-in;
}

.cs-heading--reveal-scale-up {
  animation-name: cs-heading-scale-up;
}

.cs-heading--reveal-flip-up {
  animation-name: cs-heading-flip-up;
}

@keyframes cs-btn-spinner {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes cs-heading-slide-left {
  0% {
    opacity: 0;
    transform: translateX(24px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes cs-heading-slide-right {
  0% {
    opacity: 0;
    transform: translateX(-32px);
  }
  60% {
    transform: translateX(4px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes cs-heading-zoom-in {
  0% {
    opacity: 0;
    transform: scale(0.92);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes cs-heading-fade-down {
  0% {
    opacity: 0;
    transform: translateY(-24px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cs-heading-fade-right {
  0% {
    opacity: 0;
    transform: translateX(-24px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes cs-heading-scale-up {
  0% {
    opacity: 0;
    transform: scale(0.85);
  }
  70% {
    opacity: 1;
    transform: scale(1.03);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes cs-heading-flip-up {
  0% {
    opacity: 0;
    transform: perspective(800px) rotateX(45deg);
    transform-origin: bottom;
  }
  100% {
    opacity: 1;
    transform: perspective(800px) rotateX(0deg);
    transform-origin: bottom;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cs-btn {
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
  }

  .cs-btn:hover {
    transform: none !important;
  }

  .cs-btn::before {
    transition: none !important;
  }
}

/* Gradient shimmer overlay clip fix */
.cs-heading__title.cs-animated-gradient,
.cs-heading__title[class*="cs-animated-gradient--"] {
  display: inline-block;
}

@media (max-width: 768px) {
  .cs-heading {
    gap: var(--cs-space-sm, 0.75rem);
  }

  .cs-heading__overline {
    letter-spacing: 0.14em;
  }
}

/* ============================================
   CONTAINER BLOCK WIDGET
   ============================================ */

@keyframes cs-container-bg-float {
  0%, 100% {
    background-position: 0% 50%, 50% 50%, 50% 50%;
  }
  33% {
    background-position: 50% 50%, 70% 30%, 30% 70%;
  }
  66% {
    background-position: 100% 50%, 30% 70%, 70% 30%;
  }
}

@keyframes cs-container-bg-float-hero {
  0%, 100% {
    background-position: 0% 50%, 20% 80%, 80% 20%;
  }
  50% {
    background-position: 100% 50%, 80% 20%, 20% 80%;
  }
}

@keyframes cs-container-float {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -12px, 0);
  }
}

@keyframes cs-container-breathe {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 24px 48px rgba(108, 70, 206, 0.18);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 30px 64px rgba(108, 70, 206, 0.24);
  }
}

.cs-container-block {
  position: relative;
  border-radius: 32px;
  padding: clamp(2.5rem, 6vw, 4.5rem);
  background: var(--cs-white);
  color: var(--cs-gray-dark, #1a1a1a);
  overflow: hidden;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
  isolation: isolate;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.cs-container-block::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0));
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: -1;
}

.cs-container-block:hover::after,
.cs-container-block:focus-within::after {
  opacity: 1;
}

.cs-container-block__inner {
  width: 100%;
  margin: 0 auto;
}

.cs-container-block__inner.cs-container {
  max-width: 1200px;
}

.cs-container-block__inner.cs-container-wide {
  max-width: 1400px;
}

.cs-container-block__inner.cs-container-narrow {
  max-width: 820px;
}

.cs-container-block__inner.cs-container-fluid {
  max-width: none;
}

.cs-container-block__content {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 2.5rem);
}

.cs-container-block--layout-horizontal .cs-container-block__content {
  flex-direction: row;
  align-items: stretch;
  gap: clamp(2rem, 4vw, 4rem);
}

.cs-container-block__copy {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.75rem);
  flex: 1 1 auto;
}

.cs-container-block__meta {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2vw, 2rem);
  flex: 1 1 auto;
}

.cs-container-block__overline {
  font-size: clamp(0.75rem, 0.45vw + 0.6rem, 0.85rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
}

.cs-container-block__overline--violet { color: var(--cs-primary, #6C46CE); }
.cs-container-block__overline--coral { color: var(--cs-secondary, #DF5676); }
.cs-container-block__overline--sky { color: var(--cs-accent-cielo, #3E98BC); }
.cs-container-block__overline--aqua { color: var(--cs-accent-aguamarina, #89D0D6); }
.cs-container-block__overline--gray { color: var(--cs-gray-medium, #9D9D9D); }

.cs-container-block__title {
  font-size: var(--cs-text-h2, clamp(2.5rem, 5vw, 4rem));
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
}

.cs-container-block__description,
.cs-container-block__rich-text {
  font-size: var(--cs-text-body, 1.125rem);
  color: var(--cs-gray-dark, #1a1a1a);
  opacity: 0.92;
}

.cs-container-block__rich-text :is(p, ul, ol) {
  margin-bottom: 1rem;
}

.cs-container-block__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: clamp(0.75rem, 2vw, 1.5rem);
}

.cs-container-block__feature-item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.cs-container-block__feature-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.24);
  color: inherit;
  flex-shrink: 0;
}

.cs-container-block__feature-title {
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: inherit;
}

.cs-container-block__feature-text {
  color: inherit;
  opacity: 0.85;
}

.cs-container-block__buttons {
  display: flex;
  gap: clamp(0.75rem, 1.5vw, 1.5rem);
  flex-wrap: wrap;
}

.cs-container-block--align-center .cs-container-block__buttons {
  justify-content: center;
}

.cs-container-block--align-right .cs-container-block__buttons {
  justify-content: flex-end;
}

.cs-container-block__media {
  flex: 1 1 320px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cs-container-block__media img {
  max-width: 100%;
  height: auto;
  border-radius: clamp(18px, 3vw, 28px);
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.16);
}

.cs-container-block--align-center {
  text-align: center;
}

.cs-container-block--align-right {
  text-align: right;
}

.cs-container-block--valign-top .cs-container-block__content {
  align-items: flex-start;
}

.cs-container-block--valign-center .cs-container-block__content {
  align-items: center;
}

.cs-container-block--valign-bottom .cs-container-block__content {
  align-items: flex-end;
}

.cs-container-block--pad-sm {
  padding: clamp(1.75rem, 4vw, 2.75rem);
}

.cs-container-block--pad-lg {
  padding: clamp(3rem, 7vw, 5.5rem);
}

.cs-container-block--pad-xl {
  padding: clamp(3.75rem, 9vw, 7rem);
}

.cs-container-block--radius-md {
  border-radius: 24px;
}

.cs-container-block--radius-lg {
  border-radius: 32px;
}

.cs-container-block--radius-2xl {
  border-radius: 48px;
}

.cs-container-block--shadow-none {
  box-shadow: none;
}

.cs-container-block--shadow-soft {
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
}

.cs-container-block--shadow-medium {
  box-shadow: 0 26px 48px rgba(15, 23, 42, 0.14);
}

.cs-container-block--shadow-strong {
  box-shadow: 0 36px 68px rgba(15, 23, 42, 0.2);
}

.cs-container-block--shadow-glow {
  box-shadow: 0 0 42px rgba(108, 70, 206, 0.25), 0 24px 48px rgba(15, 23, 42, 0.1);
}

.cs-container-block--bg-section {
  background: var(--cs-bg-gradient-section);
}

.cs-container-block--bg-hero {
  background: var(--cs-bg-gradient-hero);
}

.cs-container-block--bg-features {
  background: var(--cs-bg-gradient-features);
}

.cs-container-block--bg-subtle {
  background: var(--cs-bg-gradient-subtle);
}

.cs-container-block--bg-primary {
  background: linear-gradient(135deg, rgba(108, 70, 206, 0.92) 0%, rgba(223, 86, 118, 0.88) 100%);
  color: var(--cs-white);
}

.cs-container-block--bg-dark {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: rgba(248, 250, 252, 0.96);
}

.cs-container-block--glass {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.cs-container-block--bg-animated.cs-container-block--bg-section,
.cs-container-block--bg-animated.cs-container-block--bg-features,
.cs-container-block--bg-animated.cs-container-block--bg-subtle {
  background-size: 200% 200%, 200% 200%, 200% 200%;
  animation: cs-container-bg-float 22s ease-in-out infinite;
}

.cs-container-block--bg-animated.cs-container-block--bg-hero {
  background-size: 200% 200%, 200% 200%, 200% 200%;
  animation: cs-container-bg-float-hero 28s ease-in-out infinite;
}

.cs-container-block--motion-float {
  animation: cs-container-float 10s ease-in-out infinite;
}

.cs-container-block--motion-breathe {
  animation: cs-container-breathe 8s ease-in-out infinite;
}

.cs-container-block--highlight-marker .cs-container-block__title,
.cs-container-block--highlight-underline .cs-container-block__title,
.cs-container-block--highlight-accent-bar .cs-container-block__title {
  display: inline-block;
}

.cs-container-block--highlight-marker .cs-container-block__title {
  padding: 0.35rem 0.75rem;
  border-radius: 16px;
}

.cs-container-block--highlight-palette-violet.cs-container-block--highlight-marker .cs-container-block__title {
  background: rgba(108, 70, 206, 0.16);
  color: var(--cs-primary, #6C46CE);
}

.cs-container-block--highlight-palette-coral.cs-container-block--highlight-marker .cs-container-block__title {
  background: rgba(223, 86, 118, 0.16);
  color: var(--cs-secondary, #DF5676);
}

.cs-container-block--highlight-palette-sky.cs-container-block--highlight-marker .cs-container-block__title {
  background: rgba(62, 152, 188, 0.16);
  color: var(--cs-accent-cielo, #3E98BC);
}

.cs-container-block--highlight-palette-aqua.cs-container-block--highlight-marker .cs-container-block__title {
  background: rgba(137, 208, 214, 0.16);
  color: var(--cs-accent-aguamarina, #89D0D6);
}

.cs-container-block--highlight-palette-gray.cs-container-block--highlight-marker .cs-container-block__title {
  background: rgba(148, 159, 173, 0.16);
  color: rgba(30, 41, 59, 0.82);
}

.cs-container-block--highlight-palette-white.cs-container-block--highlight-marker .cs-container-block__title {
  background: rgba(255, 255, 255, 0.2);
  color: var(--cs-white);
}

.cs-container-block--highlight-underline .cs-container-block__title {
  position: relative;
  padding-bottom: 0.4rem;
}

.cs-container-block--highlight-underline .cs-container-block__title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.35;
}

.cs-container-block--highlight-accent-bar .cs-container-block__title {
  position: relative;
}

.cs-container-block--highlight-accent-bar .cs-container-block__title::before {
  content: '';
  position: absolute;
  left: 0;
  top: -16px;
  width: 64px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.65;
}

.cs-container-block--align-center.cs-container-block--highlight-accent-bar .cs-container-block__title::before {
  left: 50%;
  transform: translateX(-50%);
}

.cs-container-block--align-right.cs-container-block--highlight-accent-bar .cs-container-block__title::before {
  left: auto;
  right: 0;
}

.cs-container-block--bg-primary .cs-container-block__feature-icon,
.cs-container-block--bg-dark .cs-container-block__feature-icon {
  background: rgba(255, 255, 255, 0.18);
}

.cs-container-block--highlight-palette-violet .cs-container-block__title {
  color: var(--cs-primary, #6C46CE);
}

.cs-container-block--highlight-palette-coral .cs-container-block__title {
  color: var(--cs-secondary, #DF5676);
}

.cs-container-block--highlight-palette-sky .cs-container-block__title {
  color: var(--cs-accent-cielo, #3E98BC);
}

.cs-container-block--highlight-palette-aqua .cs-container-block__title {
  color: var(--cs-accent-aguamarina, #89D0D6);
}

.cs-container-block--highlight-palette-gray .cs-container-block__title {
  color: rgba(30, 41, 59, 0.82);
}

.cs-container-block--highlight-palette-white .cs-container-block__title {
  color: var(--cs-white);
}

.cs-container-block--bg-primary .cs-container-block__overline,
.cs-container-block--bg-primary .cs-container-block__description,
.cs-container-block--bg-primary .cs-container-block__rich-text,
.cs-container-block--bg-dark .cs-container-block__overline,
.cs-container-block--bg-dark .cs-container-block__description,
.cs-container-block--bg-dark .cs-container-block__rich-text {
  color: inherit;
}

.cs-container-block--bg-primary .cs-container-block__feature-icon,
.cs-container-block--bg-dark .cs-container-block__feature-icon {
  color: inherit;
}

.cs-container-block--fade-top {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 12%);
}

.cs-container-block--fade-bottom {
  -webkit-mask-image: linear-gradient(to top, transparent 0%, black 12%);
  mask-image: linear-gradient(to top, transparent 0%, black 12%);
}

.cs-container-block--fade-both {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
}

@media (max-width: 1024px) {
  .cs-container-block--layout-horizontal .cs-container-block__content {
    flex-direction: column;
  }

  .cs-container-block__media {
    order: -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cs-container-block--bg-animated,
  .cs-container-block--motion-float,
  .cs-container-block--motion-breathe {
    animation: none !important;
  }
}

/* ============================================
   CLOUDSTUDIO CONTAINER SKIN (Elementor Container/Section)
   ============================================ */

.cs-container-skin {
  position: relative;
  border-radius: 32px;
  padding: clamp(2.5rem, 6vw, 4.5rem);
  background: var(--cs-white) !important;
  color: var(--cs-gray-dark) !important;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08) !important;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
}

.cs-container-skin::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.cs-container-skin:hover::after,
.cs-container-skin:focus-within::after {
  opacity: 1;
}

.cs-container-skin--pad-sm { padding: clamp(1.75rem, 4vw, 2.75rem); }
.cs-container-skin--pad-md { padding: clamp(2.5rem, 6vw, 4.5rem); }
.cs-container-skin--pad-lg { padding: clamp(3rem, 7vw, 5.5rem); }
.cs-container-skin--pad-xl { padding: clamp(3.75rem, 9vw, 7rem); }

.cs-container-skin--radius-none { border-radius: 0; }
.cs-container-skin--radius-md { border-radius: 24px; }
.cs-container-skin--radius-lg { border-radius: 32px; }
.cs-container-skin--radius-xl { border-radius: 40px; }
.cs-container-skin--radius-2xl { border-radius: 48px; }

.cs-container-skin--shadow-none { box-shadow: none; }
.cs-container-skin--shadow-soft { box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08); }
.cs-container-skin--shadow-medium { box-shadow: 0 26px 48px rgba(15, 23, 42, 0.14); }
.cs-container-skin--shadow-strong { box-shadow: 0 36px 68px rgba(15, 23, 42, 0.2); }
.cs-container-skin--shadow-glow { box-shadow: 0 0 42px rgba(108, 70, 206, 0.25), 0 24px 48px rgba(15, 23, 42, 0.1); }

.cs-container-skin--bg-white { background: var(--cs-white) !important; }
.cs-container-skin--bg-primary { background: linear-gradient(135deg, rgba(108, 70, 206, 0.92) 0%, rgba(223, 86, 118, 0.88) 100%) !important; color: var(--cs-white) !important; }
.cs-container-skin--bg-dark { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important; color: rgba(248, 250, 252, 0.96) !important; }
.cs-container-skin--bg-section { background: var(--cs-bg-gradient-section) !important; }
.cs-container-skin--bg-hero { background: var(--cs-bg-gradient-hero) !important; }
.cs-container-skin--bg-features { background: var(--cs-bg-gradient-features) !important; }
.cs-container-skin--bg-subtle { background: var(--cs-bg-gradient-subtle) !important; }

.cs-container-skin--bg-animated {
  background-size: 200% 200%, 200% 200%, 200% 200%;
  animation: cs-container-bg-float 22s ease-in-out infinite;
}

.cs-container-skin--bg-hero.cs-container-skin--bg-animated {
  animation: cs-container-bg-float-hero 28s ease-in-out infinite;
}

.cs-container-skin--motion-float { animation: cs-container-float 10s ease-in-out infinite; }
.cs-container-skin--motion-breathe { animation: cs-container-breathe 8s ease-in-out infinite; }

.cs-container-skin--fade-top {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 12%);
}

.cs-container-skin--fade-bottom {
  -webkit-mask-image: linear-gradient(to top, transparent 0%, black 12%);
  mask-image: linear-gradient(to top, transparent 0%, black 12%);
}

.cs-container-skin--fade-both {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
}

.cs-container-skin--bg-primary .cs-btn,
.cs-container-skin--bg-dark .cs-btn {
  --cs-btn-shadow: none;
  --cs-btn-hover-shadow: 0 18px 36px rgba(15, 23, 42, 0.18);
}

/* =========================================
 * HERO WIDGET
 * ========================================= */
.cs-hero {
  --cs-hero-content-gap: clamp(1.5rem, 3vw, 2.75rem);
  --cs-hero-desc-gap: clamp(1.75rem, 3.5vw, 3rem);
  --cs-hero-stagger-interval: 0.12s;
  position: relative;
  padding-block: clamp(4rem, 10vw, 9rem);
  overflow: hidden;
  background-color: var(--iot-surface-primary, #ffffff);

  /* Full width breakout - escapa del contenedor de Elementor */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  /* Performance optimization: contain layout + paint para mejorar repaint */
  contain: layout paint;
}

.cs-hero__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(2.5rem, 6vw, 5rem);

  /* Contenedor centrado con max-width */
  max-width: min(1400px, 90vw);
  margin-inline: auto;
  padding-inline: clamp(1rem, 5vw, 3rem);
  width: 100%;
}

.cs-hero--reverse .cs-hero__inner {
  flex-direction: row-reverse;
}

.cs-hero__content {
  flex: 1 1 48%;
  display: flex;
  flex-direction: column;
  gap: var(--cs-hero-content-gap, clamp(1.5rem, 3vw, 2.75rem));
}

.cs-hero__description {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem) !important;
  line-height: 1.55 !important;
  color: var(--cs-gray-dark, #3C3C3C) !important;
  max-width: clamp(32rem, 42vw, 38rem);
  opacity: 1 !important;
  font-weight: 400 !important;
  margin-top: calc(var(--cs-hero-desc-gap, var(--cs-hero-content-gap, 1.75rem)) - var(--cs-hero-content-gap, 1.75rem));
}

.cs-hero__badge-layout {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}

.cs-hero__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cs-space-xs, 0.5rem);
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  font-size: var(--cs-text-xs, 0.75rem);
  font-weight: var(--cs-font-weight-semibold, 600);
  letter-spacing: 0.04em;
  text-transform: none;
  line-height: 1;
  background: rgba(108, 70, 206, 0.12);
  color: var(--cs-primary, #6C46CE);
  box-shadow: inset 0 0 0 1px rgba(108, 70, 206, 0.18);
}

.cs-hero__badge--uppercase {
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.cs-hero__badge--coral {
  background: rgba(223, 86, 118, 0.14);
  color: var(--cs-secondary, #DF5676);
  box-shadow: inset 0 0 0 1px rgba(223, 86, 118, 0.2);
}

.cs-hero__badge--sky {
  background: rgba(62, 152, 188, 0.12);
  color: var(--cs-accent-cielo, #3E98BC);
  box-shadow: inset 0 0 0 1px rgba(62, 152, 188, 0.18);
}

.cs-hero__badge--aqua {
  background: rgba(137, 208, 214, 0.12);
  color: var(--cs-accent-aguamarina, #89D0D6);
  box-shadow: inset 0 0 0 1px rgba(137, 208, 214, 0.18);
}

.cs-hero__badge--gray {
  background: rgba(156, 163, 175, 0.14);
  color: var(--cs-gray-medium, #5b6770);
  box-shadow: inset 0 0 0 1px rgba(156, 163, 175, 0.22);
}

.cs-hero__badge--white {
  background: rgba(255, 255, 255, 0.18);
  color: var(--cs-white);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.cs-hero__badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.cs-hero__badge-icon-svg {
  width: 1em;
  height: 1em;
}

.cs-hero__buttons {
  --cs-hero-buttons-gap: clamp(0.75rem, 2vw, 1.25rem);
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--cs-hero-buttons-gap);
}

.cs-hero__buttons .cs-button-wrapper {
  margin: 0;
}

.cs-hero__button {
  display: inline-flex;
}

.cs-hero__metrics {
  width: 100%;
}

.cs-hero__metrics-grid {
  display: grid;
  gap: var(--cs-space-md, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.cs-hero__metrics-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-hero__metrics-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-hero__metrics-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.cs-hero__metric {
  padding: clamp(1.25rem, 2.5vw, 2rem);
  border-radius: var(--cs-radius-lg, 20px);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px);
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.35);
  display: flex;
  flex-direction: column;
  gap: var(--cs-space-xs, 0.5rem);
}

.cs-hero__metric-value {
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: var(--cs-font-weight-semibold, 600);
  color: var(--cs-primary, #6C46CE);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.cs-hero__metric-label {
  margin: 0;
  color: rgba(15, 23, 42, 0.68);
  font-size: clamp(0.95rem, 2vw, 1.05rem);
  line-height: 1.35;
}

.cs-hero__metric--coral .cs-hero__metric-value { color: var(--cs-secondary, #DF5676); }
.cs-hero__metric--sky .cs-hero__metric-value { color: var(--cs-accent-cielo, #3E98BC); }
.cs-hero__metric--aqua .cs-hero__metric-value { color: var(--cs-accent-aguamarina, #89D0D6); }
.cs-hero__metric--neutral .cs-hero__metric-value { color: var(--cs-gray-dark, #1a1a1a); }

.cs-hero__metrics-grid--outline .cs-hero__metric {
  background: transparent;
  border: 1px solid rgba(108, 70, 206, 0.28);
  box-shadow: none;
}

.cs-hero__metrics-grid--ghost .cs-hero__metric {
  background: rgba(108, 70, 206, 0.08);
  border: none;
  box-shadow: none;
}

.cs-hero__metrics-grid--outline .cs-hero__metric-label,
.cs-hero__metrics-grid--ghost .cs-hero__metric-label {
  color: rgba(15, 23, 42, 0.68);
}

.cs-hero--bg-dark .cs-hero__metric {
  background: rgba(15, 23, 42, 0.6);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 20px 48px rgba(2, 6, 23, 0.32);
}

.cs-hero--bg-dark .cs-hero__metric-value {
  color: var(--cs-white);
}

.cs-hero--bg-dark .cs-hero__metric-label {
  color: rgba(255, 255, 255, 0.72);
}

.cs-hero--layout-centered .cs-hero__buttons {
  justify-content: center;
}

.cs-hero--layout-centered .cs-hero__buttons .cs-button-wrapper {
  justify-content: center;
}

/* =========================================
 * LAYOUT PRESETS
 * ========================================= */
.cs-hero--layout-focused .cs-hero__inner {
  align-items: flex-start;
  gap: clamp(3rem, 6vw, 5.5rem);
}

.cs-hero--layout-focused .cs-hero__content {
  max-width: min(62ch, 60%);
}

.cs-hero--layout-focused .cs-hero__media-column {
  flex: 0 0 clamp(22rem, 32vw, 30rem);
  justify-content: flex-end;
  transform: translateY(18px);
}

.cs-hero--layout-centered .cs-hero__inner {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(2.5rem, 6vw, 4.5rem);
}

.cs-hero--layout-centered .cs-hero__content {
  align-items: center;
  text-align: center;
  max-width: min(70ch, 100%);
}

.cs-hero--layout-centered .cs-hero__badge-layout {
  justify-content: center;
}

.cs-hero--layout-centered .cs-hero__heading,
.cs-hero--layout-centered .cs-hero__description {
  max-width: min(65ch, 100%);
}

.cs-hero--layout-centered .cs-hero__media-column {
  display: none;
}

.cs-hero--layout-centered .cs-hero__content .cs-hero__media {
  display: flex;
  justify-content: center;
  margin-block: clamp(1.5rem, 4vw, 3rem);
  max-width: clamp(20rem, 38vw, 28rem);
}

.cs-hero--layout-centered .cs-hero__metrics-grid {
  justify-items: center;
}

.cs-hero--layout-centered .cs-hero__metric {
  text-align: center;
}

.cs-hero--layout-split .cs-hero__inner {
  align-items: stretch;
  gap: clamp(2.75rem, 5vw, 4.5rem);
}

.cs-hero--layout-split .cs-hero__content,
.cs-hero--layout-split .cs-hero__media-column {
  flex: 1 1 50%;
}

.cs-hero--layout-split .cs-hero__media-column .cs-hero__media {
  max-width: clamp(24rem, 36vw, 32rem);
}

.cs-hero--layout-overlay .cs-hero__inner {
  position: relative;
  align-items: center;
  min-height: clamp(28rem, 60vh, 520px);
}

.cs-hero--layout-overlay .cs-hero__content {
  position: relative;
  z-index: 2;
  max-width: min(58ch, 52%);
}

.cs-hero--layout-overlay .cs-hero__media-column {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
  transform: translateY(-4%);
}

.cs-hero--layout-overlay .cs-hero__media-column .cs-hero__media {
  max-width: clamp(26rem, 48vw, 36rem);
  opacity: 0.82;
  filter: drop-shadow(0 42px 72px rgba(15, 23, 42, 0.35));
}

.cs-hero--layout-overlay.cs-hero--reverse .cs-hero__media-column {
  justify-content: flex-start;
  transform: translateY(-4%) scaleX(-1);
}

.cs-hero--layout-overlay.cs-hero--reverse .cs-hero__media-column .cs-hero__media {
  transform: scaleX(-1);
}

.cs-hero--layout-overlay .cs-hero__content::after {
  content: '';
  position: absolute;
  inset: -12% -18% -12% -12%;
  background: radial-gradient(65% 65% at 100% 0%, rgba(108, 70, 206, 0.35) 0%, transparent 65%);
  filter: blur(18px);
  opacity: 0.7;
  z-index: -1;
}

/* =========================================
 * STAGGER MOTION (con anti-flickering FOUC)
 * ========================================= */
/* Prevención FOUC: ocultar contenido con stagger hasta que JS esté listo */
.cs-hero[data-hero-stagger-mode]:not(.cs-hero--stagger-ready) [data-hero-anim] {
  visibility: hidden;
}

.cs-hero[data-hero-stagger-mode] [data-hero-anim] {
  filter: none !important;
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease, transform 0.6s ease, visibility 0s linear 0s;
  transition-delay: 0s;
  visibility: visible;
}

.cs-hero[data-hero-stagger-mode].cs-hero--stagger-ready:not(.cs-hero--stagger-active) [data-hero-anim] {
  opacity: 0;
  transform: translateY(28px);
  filter: none !important;
  visibility: visible;
}

.cs-hero.cs-hero--stagger-active [data-hero-anim] {
  opacity: 1;
  transform: none;
  filter: none !important;
}

.cs-hero[data-hero-stagger-mode="gentle"] [data-hero-anim="badge"] { transition-delay: 0s; }
.cs-hero[data-hero-stagger-mode="gentle"] [data-hero-anim="heading"] { transition-delay: 0.12s; }
.cs-hero[data-hero-stagger-mode="gentle"] [data-hero-anim="media"] { transition-delay: 0.24s; }
.cs-hero[data-hero-stagger-mode="gentle"] [data-hero-anim="description"] { transition-delay: 0.34s; }
.cs-hero[data-hero-stagger-mode="gentle"] [data-hero-anim="buttons"] { transition-delay: 0.46s; }
.cs-hero[data-hero-stagger-mode="gentle"] [data-hero-anim="metrics"] { transition-delay: 0.58s; }

.cs-hero[data-hero-stagger-mode="express"] [data-hero-anim="badge"] { transition-delay: 0s; }
.cs-hero[data-hero-stagger-mode="express"] [data-hero-anim="heading"] { transition-delay: 0.08s; }
.cs-hero[data-hero-stagger-mode="express"] [data-hero-anim="media"] { transition-delay: 0.16s; }
.cs-hero[data-hero-stagger-mode="express"] [data-hero-anim="description"] { transition-delay: 0.24s; }
.cs-hero[data-hero-stagger-mode="express"] [data-hero-anim="buttons"] { transition-delay: 0.32s; }
.cs-hero[data-hero-stagger-mode="express"] [data-hero-anim="metrics"] { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  .cs-hero[data-hero-stagger-mode] [data-hero-anim] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* Media dentro de content (solo visible en mobile) */
.cs-hero__content .cs-hero__media {
  display: none;
}

/* Media column (solo visible en desktop) */
.cs-hero__media-column {
  flex: 1 1 52%;
  display: flex;
  justify-content: center;
}

.cs-hero__media-column .cs-hero__media {
  display: flex;
  justify-content: center;
}

.cs-hero--no-media .cs-hero__inner {
  justify-content: center;
}

.cs-hero--valign-start .cs-hero__inner { align-items: flex-start; }
.cs-hero--valign-center .cs-hero__inner { align-items: center; }
.cs-hero--valign-end .cs-hero__inner { align-items: flex-end; }

.cs-hero--bg-none {
  background: transparent;
}

.cs-hero--bg-hero {
  background: var(--cs-bg-gradient-hero);
}

.cs-hero--bg-features {
  background: var(--cs-bg-gradient-features);
}

.cs-hero--bg-subtle {
  background: var(--cs-bg-gradient-subtle);
}

.cs-hero--bg-dark {
  background: linear-gradient(135deg, #131a2c 0%, #101624 100%);
  color: rgba(248, 250, 252, 0.96);
}

.cs-hero--bg-dark .cs-heading__description {
  color: rgba(248, 250, 252, 0.75);
}

.cs-hero--fade-top {
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 14%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 14%);
}

.cs-hero--fade-bottom {
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 14%);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 14%);
}

.cs-hero--fade-both {
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 100%);
}

.cs-hero--fade-top,
.cs-hero--fade-bottom,
.cs-hero--fade-both {
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}

.cs-hero--bg-motion-soft {
  background-size: 160% 160%;
  animation: cs-hero-bg-soft 24s ease-in-out infinite;
}

.cs-hero--bg-motion-flow {
  background-size: 180% 180%;
  animation: cs-hero-bg-flow 28s linear infinite;
}

@keyframes cs-hero-bg-soft {
  0%,
  100% { background-position: 15% 20%, 85% 80%; }
  50% { background-position: 85% 80%, 15% 20%; }
}

@keyframes cs-hero-bg-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-hero--bg-motion-soft,
  .cs-hero--bg-motion-flow {
    animation: none;
  }
}

@media (max-width: 1200px) {
  .cs-hero__inner {
    gap: clamp(2rem, 5vw, 3.5rem);
  }
}

@media (max-width: 1023px) {
  .cs-hero {
    padding-block: clamp(3.5rem, 12vw, 6rem);
  }

  .cs-hero--layout-focused .cs-hero__content {
    max-width: 100%;
  }

  .cs-hero--layout-focused .cs-hero__media-column {
    flex: 1 1 auto;
    transform: none;
  }

  .cs-hero--layout-overlay .cs-hero__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .cs-hero--layout-overlay .cs-hero__content {
    max-width: 100%;
  }

  .cs-hero--layout-overlay .cs-hero__content::after {
    display: none;
  }

  .cs-hero--layout-overlay .cs-hero__media-column {
    position: static;
    transform: none;
    display: none;
  }

  .cs-hero--layout-overlay .cs-hero__content .cs-hero__media {
    display: flex;
    justify-content: center;
    margin-block: clamp(1.5rem, 6vw, 3rem);
    max-width: clamp(18rem, 60vw, 28rem);
  }

  .cs-hero--stack-tablet .cs-hero__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .cs-hero--stack-tablet .cs-hero__content,
  .cs-hero--stack-tablet .cs-hero__media {
    width: 100%;
  }

  .cs-hero--stack-tablet .cs-hero__media {
    justify-content: flex-start;
  }
}

@media (max-width: 767px) {
  .cs-hero {
    padding-block: clamp(3rem, 14vw, 5rem);
  }

  .cs-hero__inner {
    gap: clamp(1.75rem, 6vw, 2.5rem);
  }

  .cs-hero__content {
    gap: var(--cs-hero-content-gap, clamp(1.25rem, 5vw, 2rem));
  }

  /* Stack en mobile y reorganizar con flexbox order */
  .cs-hero--stack-mobile .cs-hero__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .cs-hero--stack-mobile .cs-hero__content {
    width: 100%;
  }

  /* Ocultar media column en mobile */
  .cs-hero--stack-mobile .cs-hero__media-column {
    display: none !important;
  }

  /* Mostrar media dentro de content en mobile */
  .cs-hero--stack-mobile .cs-hero__content .cs-hero__media {
    display: flex !important;
    justify-content: center;
    margin-block: clamp(1.5rem, 5vw, 2.5rem);
    max-width: clamp(18rem, 75vw, 28rem);
    margin-inline: auto;
    width: 100%;
  }

  .cs-hero__description {
    max-width: none;
  }

  .cs-hero__buttons {
    width: 100%;
  }

  .cs-hero__button,
  .cs-hero__buttons .cs-button-wrapper {
    width: 100%;
    justify-content: center;
  }

  /* Botones grandes en mobile para mejor UX táctil */
  .cs-hero__buttons .cs-btn {
    min-height: 54px;
    font-size: clamp(1rem, 3vw, 1.125rem);
  }
}

/* =========================================
 * ACCESSIBILITY - SKIP LINK (WCAG 2.1.1)
 * ========================================= */
.cs-hero__skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 9999;
  padding: 1rem 1.5rem;
  background: var(--cs-violet-dark, #6C46CE);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 8px 0;
  box-shadow: 0 8px 24px rgba(108, 70, 206, 0.4);
  transition: top 0.3s ease;
}

.cs-hero__skip-link:focus {
  top: 0;
  outline: 3px solid rgba(108, 70, 206, 0.5);
  outline-offset: 2px;
}

.cs-hero__skip-link:hover {
  background: var(--cs-violet, #8B5DD8);
}

/* =========================================
 * MEDIA COMPONENT
 * ========================================= */
.cs-media {
  position: relative;
  display: inline-flex;
  max-width: 100%;
}

.cs-media__frame {
  position: relative;
  width: 100%;
  border-radius: var(--cs-media-radius, 36px);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.cs-media__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateZ(0);
}

/* Frameless: sin marco ni background */
.cs-media--frameless {
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

.cs-media--frameless .cs-media__image {
  border-radius: 0;
}

.cs-media--shadow .cs-media__frame {
  box-shadow: 0 28px 64px rgba(15, 23, 42, 0.14), 0 18px 40px rgba(108, 70, 206, 0.16);
}

.cs-media__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.8;
  mix-blend-mode: screen;
}

.cs-media--overlay-hero .cs-media__overlay {
  background: radial-gradient(120% 120% at 15% 10%, rgba(108, 70, 206, 0.32) 0%, transparent 62%), radial-gradient(120% 150% at 85% 85%, rgba(223, 86, 118, 0.26) 0%, transparent 70%);
}

.cs-media--overlay-clarity .cs-media__overlay {
  background: radial-gradient(115% 135% at 18% 12%, rgba(108, 70, 206, 0.24) 0%, transparent 60%), radial-gradient(120% 160% at 82% 80%, rgba(62, 152, 188, 0.26) 0%, transparent 72%);
}

.cs-media--overlay-trust .cs-media__overlay {
  background: radial-gradient(120% 130% at 20% 15%, rgba(62, 152, 188, 0.28) 0%, transparent 60%), radial-gradient(120% 150% at 80% 80%, rgba(137, 208, 214, 0.24) 0%, transparent 72%);
}

.cs-media--overlay-innovation .cs-media__overlay {
  background: radial-gradient(120% 130% at 18% 15%, rgba(108, 70, 206, 0.26) 0%, transparent 60%), radial-gradient(120% 155% at 82% 85%, rgba(137, 208, 214, 0.22) 0%, transparent 70%);
}

.cs-media--overlay-strength .cs-media__overlay {
  background: radial-gradient(120% 130% at 16% 15%, rgba(150, 61, 122, 0.3) 0%, transparent 60%), radial-gradient(120% 150% at 80% 80%, rgba(223, 86, 118, 0.22) 0%, transparent 72%);
}

.cs-media--radius-sm { --cs-media-radius: 12px; }
.cs-media--radius-md { --cs-media-radius: 20px; }
.cs-media--radius-lg { --cs-media-radius: 28px; }
.cs-media--radius-xl { --cs-media-radius: 36px; }
.cs-media--radius-pill { --cs-media-radius: 999px; }

.cs-media--ratio-16-9 .cs-media__frame { aspect-ratio: 16 / 9; }
.cs-media--ratio-4-3 .cs-media__frame { aspect-ratio: 4 / 3; }
.cs-media--ratio-1-1 .cs-media__frame { aspect-ratio: 1 / 1; }
.cs-media--ratio-3-4 .cs-media__frame { aspect-ratio: 3 / 4; }

.cs-media--align-center { margin-inline: auto; }
.cs-media--align-right { margin-left: auto; }

.cs-media--motion-float .cs-media__frame {
  animation: cs-media-float 9s ease-in-out infinite;
  will-change: transform;
}

.cs-media--motion-tilt .cs-media__frame {
  transform: perspective(1200px) rotateX(2deg) rotateY(-2deg);
  transition: transform var(--cs-transition-normal), box-shadow var(--cs-transition-normal);
}

.cs-media--motion-tilt .cs-media__frame:hover {
  transform: perspective(1200px) rotateX(0deg) rotateY(0deg) translateY(-8px);
}

.cs-media--motion-rise .cs-media__frame {
  transition: transform var(--cs-transition-bounce), box-shadow var(--cs-transition-bounce);
}

.cs-media--motion-rise .cs-media__frame:hover {
  transform: translateY(-16px);
  box-shadow: 0 32px 68px rgba(108, 70, 206, 0.18), 0 18px 36px rgba(15, 23, 42, 0.18);
}

@keyframes cs-media-float {
  0%,
  100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -16px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .cs-media--motion-float .cs-media__frame {
    animation: none;
  }

  .cs-media--motion-tilt .cs-media__frame,
  .cs-media--motion-rise .cs-media__frame {
    transition: none;
  }
}

/* === FRAMELESS ANIMATIONS ===
   Cuando frameless está activo, el .cs-media__frame no existe,
   por lo que aplicamos las animaciones directamente a .cs-media__image */

.cs-media--frameless.cs-media--motion-float .cs-media__image {
  animation: cs-media-float 9s ease-in-out infinite;
  will-change: transform;
}

.cs-media--frameless.cs-media--motion-tilt .cs-media__image {
  transition: transform var(--cs-transition-bounce);
  will-change: transform;
}

.cs-media--frameless.cs-media--motion-tilt .cs-media__image:hover {
  transform: perspective(800px) rotateY(8deg) scale(1.02);
}

.cs-media--frameless.cs-media--motion-rise .cs-media__image {
  transition: transform var(--cs-transition-bounce), box-shadow var(--cs-transition-bounce);
}

.cs-media--frameless.cs-media--motion-rise .cs-media__image:hover {
  transform: translateY(-16px);
  box-shadow: 0 32px 68px rgba(108, 70, 206, 0.18), 0 18px 36px rgba(15, 23, 42, 0.18);
}

/* Respetar prefers-reduced-motion también para frameless */
@media (prefers-reduced-motion: reduce) {
  .cs-media--frameless.cs-media--motion-float .cs-media__image {
    animation: none;
  }

  .cs-media--frameless.cs-media--motion-tilt .cs-media__image,
  .cs-media--frameless.cs-media--motion-rise .cs-media__image {
    transition: none;
  }
}

@media (max-width: 1023px) {
  .cs-media--hidden-tablet {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .cs-media--hidden-mobile {
    display: none !important;
  }
}

/* =========================================
 * GLOBAL FADE UTILITIES
 * ========================================= */
[data-cs-fade] {
  position: relative;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-cs-fade]:not(.cs-fade-active) {
  opacity: 0;
}

[data-cs-fade="fade-up"]:not(.cs-fade-active) {
  transform: translateY(30px);
}

[data-cs-fade="fade-down"]:not(.cs-fade-active) {
  transform: translateY(-30px);
}

[data-cs-fade="fade-left"]:not(.cs-fade-active) {
  transform: translateX(30px);
}

[data-cs-fade="fade-right"]:not(.cs-fade-active) {
  transform: translateX(-30px);
}

[data-cs-fade="zoom-in"]:not(.cs-fade-active) {
  transform: scale(0.92);
}

[data-cs-fade="zoom-out"]:not(.cs-fade-active) {
  transform: scale(1.08);
}

/* =========================================
 * LOGO CAROUSEL
 * ========================================= */
.cs-logo-carousel-wrapper {
  position: relative;
  width: 100%;
  isolation: isolate;
}

.cs-logo-carousel {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  overflow: hidden;
  --cs-carousel-speed: 18s;
  --cs-carousel-blur: 6px;
  --cs-carousel-contrast: 105%;
  --cs-carousel-fade: 150px;
  --cs-carousel-solid: 40px;
  --cs-carousel-opacity: 0.75;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    transparent calc(var(--cs-carousel-solid, 40px)),
    black calc(var(--cs-carousel-solid, 40px) + var(--cs-carousel-fade, 150px)),
    black calc(100% - var(--cs-carousel-solid, 40px) - var(--cs-carousel-fade, 150px)),
    transparent calc(100% - var(--cs-carousel-solid, 40px)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    transparent calc(var(--cs-carousel-solid, 40px)),
    black calc(var(--cs-carousel-solid, 40px) + var(--cs-carousel-fade, 150px)),
    black calc(100% - var(--cs-carousel-solid, 40px) - var(--cs-carousel-fade, 150px)),
    transparent calc(100% - var(--cs-carousel-solid, 40px)),
    transparent 100%
  );
  mask-mode: luminance;
}

.cs-logo-carousel__track {
  display: inline-flex;
  align-items: center;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  min-width: max-content;
  padding-inline-end: clamp(2rem, 4vw, 3rem);
  padding-right: clamp(2rem, 4vw, 3rem);
  animation: cs-logo-carousel-scroll var(--cs-carousel-speed, 18s) linear infinite;
  animation-play-state: paused;
  filter: contrast(var(--cs-carousel-contrast, 105%));
  will-change: transform;
}

.cs-logo-carousel--active .cs-logo-carousel__track {
  animation-play-state: running;
}

.cs-logo-carousel--reverse .cs-logo-carousel__track {
  animation-direction: reverse;
}

.cs-logo-carousel--pause-hover:hover .cs-logo-carousel__track {
  animation-play-state: paused;
}

.cs-logo-carousel--no-motion .cs-logo-carousel__track {
  animation: none !important;
  transform: none !important;
}

.cs-logo-carousel__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 7.5rem;
  padding-inline: clamp(0.5rem, 1vw, 1.25rem);
}

.cs-logo-carousel__logo img {
  display: block;
  height: auto;
  max-width: none;
  opacity: var(--cs-carousel-opacity, 0.75);
  transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease;
}

.cs-logo-carousel-wrapper--grayscale .cs-logo-carousel__logo img {
  filter: grayscale(1) contrast(var(--cs-carousel-contrast, 105%));
}

.cs-logo-carousel-wrapper--grayscale .cs-logo-carousel__logo:hover img,
.cs-logo-carousel-wrapper--grayscale .cs-logo-carousel__logo:focus-visible img {
  filter: grayscale(0) contrast(105%);
  opacity: 1;
}

.cs-logo-carousel__logo a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cs-logo-carousel__mask {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 2;
}

.cs-logo-carousel__mask::before,
.cs-logo-carousel__mask::after {
  content: '';
  flex: 0 0 calc(var(--cs-carousel-fade, 150px) + var(--cs-carousel-solid, 40px));
  max-width: 32%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.35) 60%, rgba(255, 255, 255, 0) 100%);
  backdrop-filter: blur(var(--cs-carousel-blur, 6px));
  -webkit-backdrop-filter: blur(var(--cs-carousel-blur, 6px));
}

.cs-logo-carousel__mask::after {
  background: linear-gradient(to left, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.35) 60%, rgba(255, 255, 255, 0) 100%);
}

.cs-logo-carousel-wrapper--grayscale .cs-logo-carousel__mask::before,
.cs-logo-carousel-wrapper--grayscale .cs-logo-carousel__mask::after {
  background: linear-gradient(to right, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.3) 55%, rgba(255, 255, 255, 0) 100%);
}

.cs-logo-carousel-wrapper--grayscale .cs-logo-carousel__mask::after {
  background: linear-gradient(to left, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.3) 55%, rgba(255, 255, 255, 0) 100%);
}

@keyframes cs-logo-carousel-scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cs-logo-carousel__track {
    animation: none !important;
    transform: none !important;
  }
}