/* Base Styles */
/* CSS Reset y Variables */
:root {
  /* Colores base - Paleta Smart-2U + Smart-1-4U */
  --s2u-blue: #1d4ed8;       /* Azul principal Smart-2U */
  --s2u-blue-600: #1e40af;   /* Azul oscuro Smart-2U */
  --s2u-blue-500: #2563eb;   /* Azul medio Smart-2U */
  --s14u-accent: #22c55e;    /* Acento Smart-1-4U (verde/menta) */
  --s14u-accent-500: #16a34a; /* Verde medio Smart-1-4U */
  /* Accent used for modes subtitle highlighting (safe defaults) */
  --modes-accent-green: var(--s14u-accent-500);
  
  /* Tokens base */
  --ink-strong: #0b1220;      /* Texto principal */
  --ink: #1a2233;             /* Texto secundario */
  --muted: #5f6876;           /* Texto muted */
  --bg: #f7f9fc;              /* Fondo claro */
  --surface: #ffffff;         /* Superficie clara */
  --stroke: rgba(0, 0, 0, 0.08); /* Bordes */
  
  /* Variables existentes mantenidas para compatibilidad */
  --pri-500: var(--s2u-blue);
  --pri-600: var(--s2u-blue-600);
  --accent-500: var(--s14u-accent);
  --fg: var(--ink-strong);
  --text-primary: var(--ink-strong);
  --text-secondary: var(--ink);
  --text-muted: var(--muted);
  --bg-primary: var(--bg);
  --bg-secondary: var(--surface);
  
  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  
  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-size-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
  --font-size-sm: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);
  --font-size-base: clamp(1rem, 0.9rem + 0.4vw, 1.125rem);
  --font-size-lg: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  --font-size-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --font-size-2xl: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  --font-size-3xl: clamp(1.875rem, 1.6rem + 1vw, 2.5rem);
  --font-size-4xl: clamp(2.25rem, 2rem + 1.2vw, 3rem);
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  
  /* Gradientes con paleta 70/30 */
  --gradient-primary: linear-gradient(135deg, var(--s2u-blue) 70%, var(--s14u-accent) 30%);
  --gradient-hero: linear-gradient(135deg, var(--bg) 0%, rgba(29, 78, 216, 0.05) 100%);
  --gradient-form: 
    radial-gradient(900px 480px at 80% -10%, rgba(29, 78, 216, 0.1), transparent),
    radial-gradient(700px 360px at 10% 90%, rgba(34, 197, 94, 0.06), transparent);
  
  /* Variables de contraste */
  --contrast-text-light: #0b1220;
  --contrast-text-dark: #f8fafc;
}

/* Tema oscuro */
html[data-theme="dark"] {
  --bg: #0b1020;              /* Fondo oscuro */
  --surface: #11172a;         /* Superficie oscura */
  --ink-strong: #e9efff;      /* Texto principal oscuro */
  --ink: #d1d7e6;             /* Texto secundario oscuro */
  --muted: #9aa4b2;           /* Texto muted oscuro */
  --stroke: rgba(255, 255, 255, 0.08); /* Bordes oscuros */
  
  /* Variables existentes actualizadas */
  --fg: var(--ink-strong);
  --text-primary: var(--ink-strong);
  --text-secondary: var(--ink);
  --text-muted: var(--muted);
  --bg-primary: var(--bg);
  --bg-secondary: var(--surface);
  
  /* Gradientes para tema oscuro */
  --gradient-hero: linear-gradient(135deg, var(--bg) 0%, rgba(29, 78, 216, 0.15) 100%);
  --gradient-form: 
    radial-gradient(900px 480px at 80% -10%, rgba(29, 78, 216, 0.15), transparent),
    radial-gradient(700px 360px at 10% 90%, rgba(34, 197, 94, 0.08), transparent);
  /* Slightly brighter green for contrast on dark backgrounds */
  --modes-accent-green: #4ade80; /* green-400 like */
}

/* Tema claro (data-theme="light" se mantiene para compatibilidad) */
[data-theme="light"] {
  --bg: #ffffff;
  --surface: #f8fafc;
  --surface-elevated: #ffffff;
  --fg: #111827;
  --muted: #6b7280;
  --pri: #2563eb;
  --pri-500: #3b82f6;
  --pri-600: #2563eb;
  --pri-400: #60a5fa;
  --accent: #059669;
  --accent-500: #10b981;
  --stroke: #e5e7eb;
  --stroke-light: #d1d5db;
  
  /* Hero specific colors for light theme */
  --hero-bg-light: linear-gradient(135deg, 
    #f8fafc 0%, 
    #e2e8f0 25%, 
    #cbd5e1 50%, 
    #94a3b8 75%, 
    #64748b 100%);
  --hero-overlay-light: linear-gradient(135deg, 
    rgba(59, 130, 246, 0.9) 0%, 
    rgba(37, 99, 235, 0.85) 50%, 
    rgba(5, 150, 105, 0.8) 100%);
  
  /* Footer specific colors for light theme */
  --footer-bg-light: linear-gradient(135deg, 
    #1e293b 0%, 
    #334155 25%, 
    #475569 75%, 
    #64748b 100%);
  --footer-surface-light: rgba(30, 41, 59, 0.95);
  
  /* Light theme gradients */
  --gradient-primary: linear-gradient(135deg, var(--pri-500), var(--pri-400));
  --gradient-accent: linear-gradient(135deg, var(--accent), var(--accent-500));
  --gradient-hero: var(--hero-overlay-light);
  --gradient-footer: var(--footer-bg-light);
                   
  /* Light theme shadows */
  --shadow-glow: 0 0 40px rgba(59, 130, 246, 0.1);
  --shadow-glow-accent: 0 0 30px rgba(16, 185, 129, 0.15);
  --shadow-hero: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
  --shadow-footer: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Theme indicator effects */
body {
  position: relative;
}

/* Removed global top gradient bar for a cleaner header look */
/* body::before was used as a theme indicator; removed to avoid visible colored stripe */


/* Enhanced section dividers */
/* Decorative centered dividers removed to simplify visual flow between sections */


/* Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-family);
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg);
  color: var(--fg);
  font-size: var(--font-size-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Utilities */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

@media (min-width: 640px) {
  .container {
    padding: 0 var(--space-6);
  }
}

@media (min-width: 1024px) {
  .container {
    padding: 0 var(--space-8);
  }
}

/* Buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  background: var(--gradient-primary);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: var(--font-size-base);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
  position: relative;
  overflow: hidden;
}

.btn-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl), var(--shadow-glow);
}

.btn-primary:hover::before {
  left: 100%;
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  color: var(--fg);
  border: 1px solid var(--stroke-light);
  border-radius: var(--radius);
  font-weight: 500;
  font-size: var(--font-size-base);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.btn-outline:hover {
  background: var(--surface-elevated);
  transform: translateY(-1px);
  border-color: var(--pri-500);
  color: var(--pri-500);
  box-shadow: var(--shadow-md);
}

/* Header */
#site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: all 0.3s ease;
}

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 2rem;
  transition: background-color 0.4s ease, color 0.4s ease;
  border-bottom: 1px solid var(--stroke);
}

/* Header visual states: keep header transparent over hero at top,
   and apply a solid backdrop only when scrolled. This preserves the
   hero background in dark mode and avoids banding when toggling theme. */
#site-header {
  background: transparent;
  border-bottom-color: transparent;
  transition: background 0.35s ease, border-color 0.35s ease, backdrop-filter 0.35s ease;
}

/* When scrolled, use a theme-aware solid background. We rely on the
   JS to add/remove the `scrolled` class on the header element. */
#site-header.scrolled {
  backdrop-filter: blur(6px);
}

/* Keep header blue in dark theme even when scrolled (user requested)
   Use a slightly translucent variant of the primary blue so the
   backdrop-filter blur is still visible but the header preserves
   brand color while content scrolls underneath. */
html[data-theme="dark"] #site-header.scrolled,
html[data-theme="dark"] .header.scrolled {
  background: rgba(29,78,216,0.95); /* var(--s2u-blue) ~ #1d4ed8 */
  color: #ffffff;
  border-bottom-color: rgba(255,255,255,0.06);
}

html[data-theme="light"] #site-header.scrolled,
html[data-theme="light"] .header.scrolled {
  background: rgba(255, 255, 255, 0.95);
  color: #0b1220;
  border-bottom-color: rgba(11,16,32,0.06);
}

/* Ensure non-scrolled header in both themes is visually transparent so
   the hero background shows through (matches the provided screenshot). */
/* Ensure header preserves its theme background when not scrolled.
   This restores the original header color in each theme so the
   header and hero keep their distinct backgrounds as in the design. */
html[data-theme="dark"] #site-header,
html[data-theme="dark"] .header {
  background: var(--s2u-blue);
  color: #ffffff;
  border-bottom-color: rgba(255,255,255,0.06);
}
html[data-theme="light"] #site-header,
html[data-theme="light"] .header {
  background: #ffffff;
  color: #0b1220;
  border-bottom-color: rgba(11,16,32,0.06);
}

/* Modo claro */
html[data-theme="light"] #site-header,
html[data-theme="light"] .header {
  background-color: #ffffff;
  color: #0b1220;
}
html[data-theme="light"] .header a,
html[data-theme="light"] .header button,
html[data-theme="light"] .nav-menu a,
html[data-theme="light"] .language-selector button {
  color: #0b1220;
}

/* Modo oscuro */
html[data-theme="dark"] #site-header,
html[data-theme="dark"] .header {
  background-color: var(--s2u-blue);
  color: #ffffff;
}
html[data-theme="dark"] .header a,
html[data-theme="dark"] .header button,
html[data-theme="dark"] .nav-menu a,
html[data-theme="dark"] .language-selector button {
  color: #ffffff;
}

/* Hover y foco */
.header a:hover, .header button:hover,
.nav-menu a:hover, .language-selector button:hover {
  opacity: 0.85;
}
.header a:focus-visible, .header button:focus-visible,
.nav-menu a:focus-visible, .language-selector button:focus-visible {
  outline: 2px solid var(--s14u-accent);
  outline-offset: 2px;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.nav-brand img {
  height: 40px;
  width: auto;
}

.nav-menu {
  display: none;
  list-style: none;
  gap: var(--space-8);
}

@media (min-width: 768px) {
  .nav-menu {
    display: flex;
  }
}

.nav-menu a {
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease;
}

/* Modal content improvements: blocks, spacing and bullet styling */
.modal .modal-body {
  padding: var(--space-6);
}
.modal-copy .modal-block {
  margin-bottom: var(--space-6);
}
.modal-copy h4 {
  margin-bottom: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}
.modal-copy ul {
  list-style: disc;
  margin-left: 1.25rem;
  color: var(--text-secondary);
}
.modal-copy ul li {
  margin-bottom: 0.5rem;
}

/* Emphasize price plus markers */
.price-plus {
  color: var(--s14u-accent-500, #16a34a);
  font-weight: 700;
}

/* Savings badge used in modal pricing */
.savings-badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.15rem 0.5rem;
  background: var(--s14u-accent-500, #16a34a);
  color: #fff;
  font-weight: 700;
  font-size: 0.875rem;
  border-radius: 999px;
}

/* Emphasized plan base block inside modal pricing */
.plan-base {
  display: inline-block;
  background: linear-gradient(90deg, rgba(34,197,94,0.08), rgba(29,78,216,0.06));
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  font-weight: 700;
  color: var(--text-primary);
  box-shadow: 0 4px 12px rgba(2,6,23,0.06);
  margin-bottom: 0.5rem;
}

.plan-base .plan-name {
  color: var(--s2u-blue-600);
  margin-left: 0.25rem;
}

.plan-base .plan-price {
  color: var(--s14u-accent-500, #16a34a);
  margin-left: 0.35rem;
}

.plan-base .plan-mxn {
  color: var(--text-secondary);
  margin-left: 0.25rem;
  font-weight: 600;
}

@media (max-width: 520px) {
  .plan-base {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
}

/* Container where the JS-injected CTA will be placed */
.modal-mode-cta {
  padding: 0 var(--space-6) var(--space-6) var(--space-6);
  display: flex;
  justify-content: center; /* centered CTA */
  gap: var(--space-4);
}
.modal-cta-btn {
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-base);
}

/* Ensure the CTA takes a comfortable width on narrow screens */
@media (max-width: 520px) {
  .modal-mode-cta {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
  .modal-cta-btn {
    width: 100%;
    text-align: center;
  }
}

/* Ensure modal actions area is visually separated */
.modal-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  padding: var(--space-4) var(--space-6) var(--space-6) var(--space-6);
  border-top: 1px solid var(--stroke);
}

/* Modal layout and scroll-lock helpers */
#info-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

#info-modal[hidden] {
  display: none;
}

#info-modal .modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(2,6,23,0.6);
  backdrop-filter: blur(4px);
  z-index: 1;
}

#info-modal .modal-wrapper {
  position: relative;
  z-index: 2;
  max-width: 900px;
  width: calc(100% - 2rem);
  max-height: 90vh; /* ensure the modal can scroll internally */
  overflow: auto;
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  background: var(--bg-secondary);
}

/* When modal is open, lock document body scroll. The JS also preserves scroll position. */
body.modal-open {
  position: fixed;
  left: 0;
  right: 0;
  overflow: hidden;
  touch-action: none;
}

/* Improve internal modal content scroll behavior */
#info-modal .modal-content {
  display: block;
  max-height: 90vh;
  overflow: hidden;
}

#info-modal .modal-body {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  max-height: calc(90vh - 120px); /* leave space for title/actions */
}

/* Highlight Modal Styles - Matches info-modal design */
#highlight-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

#highlight-modal.hidden {
  display: none;
}

#highlight-modal .modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(2,6,23,0.6);
  backdrop-filter: blur(4px);
  z-index: 1;
  cursor: pointer;
}

#highlight-modal .modal-container {
  position: relative;
  z-index: 2;
  max-width: 900px;
  width: calc(100% - 2rem);
  max-height: 90vh;
  overflow: auto;
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  background: var(--bg-secondary);
}

#highlight-modal .modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-secondary);
  transition: color 0.3s ease;
  z-index: 10;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

#highlight-modal .modal-close:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.1);
}

#highlight-modal .modal-content {
  padding: 2rem;
  max-height: 90vh;
  overflow: hidden;
}

#highlight-modal .modal-header {
  text-align: center;
  margin-bottom: 2rem;
}

#highlight-modal .modal-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  color: var(--s2u-blue);
}

[data-theme="dark"] #highlight-modal .modal-icon {
  color: var(--s14u-accent);
}

#highlight-modal .modal-title {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}

#highlight-modal .modal-subtitle {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.6;
  white-space: pre-line;
  text-align: center;
}

#highlight-modal .modal-body {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  max-height: calc(90vh - 200px);
}

#highlight-modal .highlight-details-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

#highlight-modal .highlight-details-list li {
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  line-height: 1.6;
  color: var(--text-primary);
  font-size: 0.95rem;
  position: relative;
  padding-left: 0;
}

/* Disable any inherited ::before pseudo-elements (checkmarks, bullets, etc.) */
#highlight-modal .highlight-details-list li::before {
  content: none !important;
  display: none !important;
}

[data-theme="light"] #highlight-modal .highlight-details-list li {
  border-bottom-color: rgba(0, 0, 0, 0.1);
}

#highlight-modal .highlight-details-list li:last-child {
  border-bottom: none;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
  #highlight-modal .modal-container {
    max-width: 95%;
    width: calc(100% - 1rem);
  }
  
  #highlight-modal .modal-content {
    padding: 1.5rem;
  }
  
  #highlight-modal .modal-title {
    font-size: 1.5rem;
  }
  
  #highlight-modal .modal-icon {
    font-size: 2.5rem;
  }
}

/* Subtools / Integration Tools Styles for Ecosystem Modal */
.subtools-grid {
  display: grid;
  gap: var(--space-4);
}

.subtool-item {
  border: 1px solid var(--stroke);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
}

.subtool-toggle {
  width: 100%;
  padding: var(--space-3);
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  transition: background-color 0.3s ease;
  text-align: left;
}

.subtool-toggle:hover {
  background: rgba(29, 78, 216, 0.05);
}

.subtool-toggle.active {
  background: rgba(29, 78, 216, 0.08);
}

.subtool-icon,
.subtool-icon-fa {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}

.subtool-icon-fa {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--s2u-blue);
}

.subtool-name {
  flex: 1;
  font-weight: 600;
  color: var(--text-primary);
  font-size: var(--font-size-base);
}

.subtool-arrow {
  font-size: 0.875rem;
  color: var(--text-secondary);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.subtool-content {
  padding: 0 var(--space-3) var(--space-3) var(--space-3);
  display: none;
  animation: slideDown 0.3s ease;
}

.subtool-content[style*="display: block"] {
  display: block;
}

.subtool-description {
  margin: 0 0 var(--space-3) 0;
  color: var(--text-secondary);
  line-height: 1.6;
  font-size: var(--font-size-sm);
}

.subtool-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--s2u-blue);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--font-size-sm);
  transition: all 0.3s ease;
}

.subtool-link:hover {
  color: var(--s2u-blue-600);
  gap: var(--space-3);
}

.subtool-link i {
  font-size: 0.75rem;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .subtool-toggle {
    padding: var(--space-2);
  }
  
  .subtool-icon,
  .subtool-icon-fa {
    width: 28px;
    height: 28px;
  }
  
  .subtool-name {
    font-size: var(--font-size-sm);
  }
  
  .subtool-content {
    padding: 0 var(--space-2) var(--space-2) var(--space-2);
  }
}


.nav-menu a:hover {
  opacity: 0.85;
}

[data-theme="light"] .nav-menu a:hover {
  color: var(--s2u-blue);
}

[data-theme="dark"] .nav-menu a:hover {
  color: var(--s14u-accent);
}

.nav-controls {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.language-selector {
  display: flex;
  gap: var(--space-1);
}

.language-selector button {
  padding: var(--space-1) var(--space-2);
  background: transparent;
  border: none;
  font-size: var(--font-size-sm);
  cursor: pointer;
  border-radius: var(--space-1);
  transition: all 0.3s ease;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
}

.language-selector button.active {
  color: #10b981;
  background: rgba(16, 185, 129, 0.15);
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.3);
}

[data-theme="light"] .language-selector button {
  color: rgba(0, 0, 0, 0.6);
}

[data-theme="light"] .language-selector button.active {
  color: #059669;
  background: rgba(16, 185, 129, 0.1);
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.25);
}

.language-selector button:hover:not(.active) {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .language-selector button:hover:not(.active) {
  color: rgba(0, 0, 0, 0.8);
  background: rgba(0, 0, 0, 0.05);
}

.theme-toggle {
  width: 40px;
  height: 40px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease;
}

.theme-toggle:hover {
  transform: scale(1.05);
}

.theme-icon::before {
  content: '🌙';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
}

[data-theme="light"] .theme-icon::before {
  content: '☀️';
}

.mobile-menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  cursor: pointer;
}

@media (min-width: 768px) {
  .mobile-menu-toggle {
    display: none;
  }
}

.mobile-menu-toggle span {
  width: 100%;
  height: 2px;
  background: var(--fg);
  transition: all 0.3s ease;
}

/* Hero Section */
.hero {
  padding: clamp(4rem, 8vw, 6rem) 0 clamp(3rem, 6vw, 4rem);
  text-align: center;
  color: var(--ink-strong);
  background: linear-gradient(180deg, 
    color-mix(in srgb, var(--s2u-blue) 70%, #2563eb 30%), 
    color-mix(in srgb, var(--s14u-accent) 30%, #dbeafe 70%));
  transition: background-color 0.4s ease, color 0.4s ease;
  position: relative;
  overflow: hidden;
  min-height: 70vh;
  display: flex;
  align-items: center;
}

/* HERO TEXTO */
.hero h1 {
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 800;
  margin-bottom: 1rem;
  line-height: 1.15;
  color: #ffffff;
}

.hero p.lead,
.hero-subtitle {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  color: rgba(255, 255, 255, 0.9);
  max-width: 60ch;
  margin-inline: auto;
  margin-bottom: 1.75rem;
}

/* HERO BOTONES */
.hero-actions,
.hero-ctas {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.75rem;
}

.hero-ctas .btn-primary,
.hero-actions .btn-primary {
  background-color: #1d4ed8;
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.25);
}

.hero-ctas .btn-outline,
.hero-actions .btn-outline {
  background: transparent;
  border: 1px solid #ffffff;
  color: #ffffff;
}

.hero-ctas .btn-outline:hover,
.hero-actions .btn-outline:hover {
  background-color: rgba(255,255,255,0.1);
}

/* Modo claro */
html[data-theme="light"] .hero {
  /* Use the same visual hero gradient as dark mode per request. */
  background: linear-gradient(180deg,
    #05060a 0%,
    #0e1628 18%,
    #0f2650 46%,
    #1e3bd6 78%,
    #244ff0 100%
  );
}
html[data-theme="light"] .hero h1 {
  /* Ensure text is legible over the dark gradient even in 'light' theme */
  color: #ffffff;
}
html[data-theme="light"] .hero p.lead,
html[data-theme="light"] .hero-subtitle {
  color: rgba(255,255,255,0.9);
}
html[data-theme="light"] .hero-ctas .btn-primary {
  background-color: var(--s2u-blue) !important;
  color: white !important;
  border: 2px solid var(--s2u-blue) !important;
}
html[data-theme="light"] .hero-ctas .btn-outline {
  border-color: var(--s2u-blue) !important;
  color: var(--s2u-blue) !important;
  background-color: white !important;
  border-width: 2px !important;
}
html[data-theme="light"] .hero-ctas .btn-outline:hover {
  background-color: var(--s2u-blue) !important;
  color: white !important;
}

/* Modo oscuro */
html[data-theme="dark"] .hero {
  /* Dark hero gradient: near-black top fading into vivid blue at bottom */
  background: linear-gradient(180deg,
    #05060a 0%,
    #0e1628 18%,
    #0f2650 46%,
    #1e3bd6 78%,
    #244ff0 100%
  );
}
html[data-theme="dark"] .hero p.lead,
html[data-theme="dark"] .hero-subtitle {
  color: rgba(255,255,255,0.85);
}

/* Hero content should be above overlays */
.hero .container {
  position: relative;
  z-index: 3;
}

@keyframes heroGlow {
  0% { 
    opacity: 0.6;
    transform: scale(1) rotate(0deg);
  }
  50% { 
    opacity: 0.8;
    transform: scale(1.05) rotate(1deg);
  }
  100% { 
    opacity: 0.7;
    transform: scale(1.02) rotate(-1deg);
  }
}

@keyframes float {
  from { transform: translateY(-8px); }
  to { transform: translateY(8px); }
}

/* Smooth theme transitions */
* {
  transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
              color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Specific transitions for theme-sensitive elements */
.hero,
.footer,
section {
  transition: background 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero::before,
.hero::after,
.footer::before,
.footer::after {
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  *,
  .hero,
  .footer,
  section,
  .hero::before,
  .hero::after,
  .footer::before,
  .footer::after {
    transition: none !important;
    animation: none !important;
  }
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 999px;
  color: var(--ok);
  font-size: var(--font-size-sm);
  font-weight: 500;
  margin-bottom: var(--space-6);
}

.badge-dot {
  width: 8px;
  height: 8px;
  background: var(--ok);
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.hero-title {
  font-size: var(--font-size-5xl);
  font-weight: 800;
  line-height: 1.05;
  margin-bottom: var(--space-6);
  /* Use a solid high-contrast color and subtle text-shadow for legibility */
  color: rgba(255, 255, 255, 0.98);
  -webkit-text-fill-color: rgba(255,255,255,0.98);
  text-shadow: 0 6px 20px rgba(2,6,23,0.6), 0 2px 6px rgba(2,6,23,0.35);
}

.hero-subtitle {
  font-size: var(--font-size-xl);
  color: var(--muted);
  margin-bottom: var(--space-6);
  line-height: 1.5;
  font-weight: 500;
}

.hero-description {
  max-width: 800px;
  margin: 0 auto var(--space-8);
  text-align: left;
}

.hero-description p {
  font-size: var(--font-size-base);
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: var(--space-4);
}

.hero-description p:last-child {
  margin-bottom: 0;
}

.hero-description strong {
  color: var(--pri-500);
  font-weight: 600;
}

.hero-value {
  font-style: italic;
  color: var(--ok) !important;
  font-weight: 500;
}

.hero-value em {
  color: var(--pri-500);
  font-weight: 600;
  font-style: normal;
}

.hero-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-12);
}

@media (min-width: 640px) {
  .hero-actions {
    flex-direction: row;
    justify-content: center;
  }
}

.hero-kpis {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

@media (min-width: 640px) {
  .hero-kpis {
    grid-template-columns: repeat(4, 1fr);
  }
}

.kpi-item {
  text-align: center;
}

.kpi-value {
  display: block;
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--pri-500);
  margin-bottom: var(--space-1);
}

.kpi-label {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--muted);
}

/* Section Headers */
.section-header {
  text-align: center;
  margin-bottom: var(--space-12);
}

.section-header h2 {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  margin-bottom: var(--space-4);
}

.section-header p {
  font-size: var(--font-size-lg);
  color: var(--muted);
  max-width: 600px;
  margin: 0 auto;
}

/* Modes section: split subtitle with two visual treatments */
.modes .modes-subtitle {
  max-width: 760px;
  margin: 0.25rem auto 0;
  text-align: center;
}
.modes .modes-subtitle-top {
  display: block;
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--pri-600);
  letter-spacing: -0.01em;
}
.modes .modes-subtitle-bottom {
  display: block;
  margin-top: 0.35rem;
  font-size: var(--font-size-xl);
  font-weight: 700; /* highlight more */
  color: var(--modes-accent-green);
  opacity: 1;
  font-style: normal;
  text-shadow: 0 1px 0 rgba(0,0,0,0.04); /* subtle lift */
}

@media (max-width: 640px) {
  .modes .modes-subtitle-top { font-size: var(--font-size-base); }
  .modes .modes-subtitle-bottom { font-size: var(--font-size-lg); }
}

/* Sections */
.section { 
  /* Más espacio vertical por sección para mejor distribución visual */
  padding-block: clamp(5rem, 10vw, 8rem);
}
.section + .section { 
  /* Remove hard border between sections and add generous spacing for clarity */
  border-top: none;
  margin-top: 6rem;
}

/* Subtítulos más claros y espaciados */
.section h2 { 
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  line-height: 1.2; 
  margin-bottom: 0.75rem; 
}
.section .sub,
.section p.sub { 
  max-width: 70ch;
  color: var(--muted); 
  margin-inline: auto;
  margin-bottom: 2rem;
  text-align: center;
}

@media (max-width: 768px) {
  .section + .section {
    margin-top: 2.5rem;
  }
}

/* Separación extra entre 'Cómo Funciona' y 'Modos' para evitar que queden amontonadas */
#how-it-works {
  margin-bottom: 2.5rem;
}

#modes {
  padding-top: 2rem; /* empuja ligeramente el inicio de la sección */
}

/* Contenedor de sector */
#sector-toggle { 
  display: flex; 
  justify-content: center; 
  margin: 1rem 0 1.5rem; 
}
#toggle-sectors { 
  border-radius: 999px; 
  padding: 1rem 2rem; 
  border: 2px solid var(--s2u-blue); 
  background: var(--s2u-blue); 
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 600;
  font-size: 1.1rem;
  box-shadow: 0 4px 12px rgba(29, 78, 216, 0.3);
}
#toggle-sectors:hover {
  background: rgba(29, 78, 216, 0.9);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(29, 78, 216, 0.4);
}
#toggle-sectors[aria-expanded="true"] { 
  background: var(--s2u-blue); 
  color: #fff; 
}

/* Panel colapsable */
#sector-panel[hidden] { 
  display: none; 
}
#sector-panel { 
  display: grid; 
  gap: 1rem; 
  margin-top: 2rem;
  padding: 1.5rem;
  border-radius: 12px;
  background: var(--surface);
}

/* Barra de búsqueda y filtros */
#sector-search { 
  width: 100%; 
  max-width: 720px; 
  height: 44px; 
  border: 1px solid var(--stroke); 
  border-radius: 12px; 
  padding: 0 14px; 
  background: var(--surface); 
  color: var(--text-primary);
  margin: 0 auto;
}
#sector-search::placeholder {
  color: var(--muted);
}
#sector-search:focus {
  outline: none;
  border-color: var(--s2u-blue);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.1);
}

.filters { 
  display: flex; 
  flex-wrap: wrap; 
  gap: .5rem; 
  justify-content: center;
}
.filter-chip { 
  border: 1px solid var(--stroke); 
  background: var(--surface); 
  border-radius: 999px; 
  padding: .4rem .8rem; 
  cursor: pointer; 
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: all 0.2s ease;
}
.filter-chip:hover {
  border-color: var(--s2u-blue);
  background: rgba(29, 78, 216, 0.05);
}
.filter-chip[aria-pressed="true"] { 
  background: rgba(29, 78, 216, 0.12); 
  border-color: rgba(29, 78, 216, 0.4); 
  color: var(--ink-strong); 
}

/* Grid de cards */
.sector-grid { 
  display: grid; 
  gap: 1.5rem; 
  grid-template-columns: repeat(3, minmax(0, 1fr)); 
  margin-top: 0;
}
@media (max-width: 1100px) { 
  .sector-grid { 
    grid-template-columns: repeat(2, 1fr); 
  } 
}
@media (max-width: 700px) { 
  .sector-grid { 
    grid-template-columns: 1fr; 
  } 
}

.card-sector {
  background: var(--surface); 
  border: 1px solid var(--stroke); 
  border-radius: 12px;
  padding: 1.25rem; 
  box-shadow: 0 6px 16px -10px rgba(0, 0, 0, 0.1); 
  display: flex; 
  flex-direction: column; 
  gap: .8rem;
  transition: all 0.3s ease;
}
.card-sector:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.15);
  border-color: var(--s2u-blue);
}
.card-sector h3 { 
  font-size: 1.08rem; 
  margin: .1rem 0 .35rem; 
  color: var(--text-primary);
}
.card-sector .badges { 
  display: flex; 
  flex-wrap: wrap; 
  gap: .35rem; 
}
.badge { 
  display: inline-flex; 
  align-items: center; 
  gap: .4rem; 
  background: rgba(29, 78, 216, 0.1); 
  border: 1px solid rgba(29, 78, 216, 0.3); 
  color: var(--ink); 
  padding: .25rem .6rem; 
  border-radius: 999px; 
  font-size: .82rem; 
}
.badge.mod { 
  background: rgba(34, 197, 94, 0.1); 
  border-color: rgba(34, 197, 94, 0.35); 
}

.card-sector ul { 
  margin: 0; 
  padding-left: 1.1rem; 
}
.card-sector li {
  margin-bottom: 0.3rem;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.4;
}
.card-sector .example {
  background: rgba(34, 197, 94, 0.05);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 8px;
  padding: 0.75rem;
  margin-top: 0.5rem;
  font-size: 0.85rem;
}
.card-sector .example strong {
  color: var(--s14u-accent);
}
.card-sector .cta { 
  margin-top: .5rem; 
  align-self: flex-start; 
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.875rem;
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
}

.btn-primary {
  background-color: var(--s2u-blue);
  color: var(--contrast-text-dark);
  border: 1px solid var(--s2u-blue);
}

.btn-primary:hover {
  background: var(--s2u-blue-600);
  transform: translateY(-1px);
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--s2u-blue);
  color: var(--s2u-blue);
}

.btn-outline:hover {
  background: rgba(29, 78, 216, 0.1);
}

html[data-theme="dark"] .btn-outline {
  border-color: #ffffff;
  color: #ffffff;
}

html[data-theme="dark"] .btn-outline:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Sector Overview Cards */
.sector-overview {
  margin: 2rem 0;
}
.overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .overview-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
.overview-card {
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
}
.overview-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-primary);
}
.overview-card h3 {
  margin: 0 0 1rem;
  color: var(--text-primary);
  font-size: 1.25rem;
  font-weight: 600;
}
.overview-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0;
}
.overview-card li {
  padding: 0.75rem 0;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--stroke);
  position: relative;
  padding-left: 2rem;
  min-height: 3.5rem;
  display: flex;
  align-items: center;
  line-height: 1.5;
}
.overview-card li:last-child {
  border-bottom: none;
}

/* Íconos específicos para problemas */
.problems-list li::before {
  content: "⚠️";
  position: absolute;
  left: 0;
  top: 0.75rem;
  font-size: 1.2rem;
  line-height: 1;
}

/* Íconos específicos para soluciones */
.solutions-list li::before {
  content: "✅";
  position: absolute;
  left: 0;
  top: 0.75rem;
  font-size: 1.2rem;
  line-height: 1;
}

/* Sincronizar altura de cada par problema-solución */
.problems-list li:nth-child(1),
.solutions-list li:nth-child(1) {
  grid-row: 1;
}
.problems-list li:nth-child(2),
.solutions-list li:nth-child(2) {
  grid-row: 2;
}
.problems-list li:nth-child(3),
.solutions-list li:nth-child(3) {
  grid-row: 3;
}
.problems-list li:nth-child(4),
.solutions-list li:nth-child(4) {
  grid-row: 4;
}
.problems-list li:nth-child(5),
.solutions-list li:nth-child(5) {
  grid-row: 5;
}
.problems-list li:nth-child(6),
.solutions-list li:nth-child(6) {
  grid-row: 6;
  min-height: 4rem;
}
.problems-list li:nth-child(7),
.solutions-list li:nth-child(7) {
  grid-row: 7;
  min-height: 5rem;
}

/* Sector CTA */
.sector-cta {
  text-align: center;
  margin-top: 3rem;
}

/* Highlights Section */
.highlights {
  background: var(--bg);
  padding: var(--space-20) 0;
}

.highlights h2 {
  text-align: center;
  margin-bottom: var(--space-16);
  color: var(--text-primary);
  font-size: var(--font-size-3xl);
  font-weight: 700;
}

.highlights-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .highlights-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-12);
  }
}

.highlight-card {
  background: var(--surface);
  border-radius: 16px;
  padding: var(--space-8);
  text-align: center;
  border: 1px solid var(--stroke);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.highlight-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-primary);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.highlight-card:hover::before {
  transform: scaleX(1);
}

.highlight-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--s2u-blue);
}

.highlight-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--s2u-blue) 0%, var(--s14u-accent) 100%);
  border-radius: 50%;
  color: white;
  font-size: 24px;
}

.highlight-card h3 {
  margin-bottom: var(--space-4);
  color: var(--text-primary);
  font-size: var(--font-size-xl);
  font-weight: 600;
  text-align: center;
}

.highlight-card p {
  color: var(--text-secondary);
  line-height: 1.6;
  font-size: var(--font-size-base);
  text-align: center;
  margin-bottom: var(--space-4);
}

/* Button "Ver más" - matching ecosystem buttons style */
.highlight-card .btn-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--s2u-blue);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: 600;
  transition: all 0.3s ease;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--space-2) var(--space-4);
  border-radius: 6px;
  margin-top: var(--space-2);
}

.highlight-card .btn-link:hover {
  color: var(--s2u-blue-600);
  background: rgba(29, 78, 216, 0.1);
}

[data-theme="dark"] .highlight-card .btn-link {
  color: var(--s14u-accent);
}

[data-theme="dark"] .highlight-card .btn-link:hover {
  color: var(--s14u-accent-500);
  background: rgba(34, 197, 94, 0.1);
}

/* Dark theme adjustments for highlights */
[data-theme="dark"] .highlights {
  background: var(--surface);
}

[data-theme="dark"] .highlight-card {
  background: var(--bg);
  border-color: var(--stroke);
}

[data-theme="dark"] .highlight-card:hover {
  border-color: var(--s2u-blue);
  box-shadow: var(--shadow-lg), 0 0 20px rgba(29, 78, 216, 0.2);
}

/* Solution Steps Section */
.solution-steps {
  background: var(--bg);
  padding-block: clamp(3rem, 6vw, 5rem);
  text-align: center;
  border-top: 1px solid var(--stroke);
  transition: background-color 0.3s ease;
}

/* Modo oscuro */
html[data-theme="dark"] .solution-steps {
  background: #0e1628;
  border-top-color: rgba(255,255,255,0.1);
}

/* TITULOS */
.solution-steps h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}
.solution-steps p.sub {
  color: var(--muted);
  margin-bottom: 2rem;
}

/* STEPS GRID */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  max-width: 1000px;
  margin: 0 auto 2rem;
}

/* CARDS */
.solution-step {
  background: var(--surface);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 6px 16px -10px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-align: left;
}
.solution-step:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 18px -8px rgba(0, 0, 0, 0.15);
}

.solution-step strong {
  display: block;
  color: var(--s2u-blue);
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.solution-step p {
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* Modo oscuro para cards */
html[data-theme="dark"] .solution-step {
  background: color-mix(in srgb, var(--s2u-blue) 25%, #0e1628);
  color: #e2e8f0;
}

html[data-theme="dark"] .solution-step strong {
  color: var(--s14u-accent);
}

/* BOTONES */
.solution-steps button,
.solution-steps .btn {
  border-radius: 8px;
  padding: 0.6rem 1rem;
}

/* Sectors Section */
.sectors {
  background: var(--bg);
}

.search-box input:focus {
  outline: none;
  border-color: var(--pri-500);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.1);
}

.search-icon {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--muted);
}

.sectors-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 641px) {
  .sectors-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1025px) {
  .sectors-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.sector-card {
  background: var(--bg);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: 0;
  transition: all 0.2s ease;
  overflow: hidden;
}

.sector-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--pri-500);
}

.sector-card.expanded {
  border-color: var(--s2u-blue);
}

.sector-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-6);
  cursor: pointer;
  transition: background-color 0.3s ease;
  user-select: none;
}

.sector-header:hover {
  background: rgba(29, 78, 216, 0.05);
}

.sector-header h3 {
  font-size: var(--font-size-xl);
  font-weight: 600;
  margin: 0;
  color: var(--fg);
  flex: 1;
}

.sector-toggle-icon {
  font-size: 1.25rem;
  color: var(--text-secondary);
  transition: transform 0.3s ease;
  flex-shrink: 0;
  margin-left: var(--space-3);
}

.sector-content {
  padding: 0 var(--space-6) var(--space-6) var(--space-6);
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sector-pain {
  margin-bottom: var(--space-4);
}

.sector-pain h4 {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--err);
  margin-bottom: var(--space-2);
}

.sector-pain ul {
  list-style: none;
  font-size: var(--font-size-sm);
  color: var(--muted);
}

.sector-pain li {
  margin-bottom: var(--space-1);
}

.sector-pain li::before {
  content: "⚠️ ";
  margin-right: var(--space-1);
}

.sector-solution {
  margin-bottom: var(--space-4);
}

.sector-solution h4 {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--ok);
  margin-bottom: var(--space-2);
}

.sector-solution ul {
  list-style: none;
  font-size: var(--font-size-sm);
  color: var(--muted);
}

.sector-solution li {
  margin-bottom: var(--space-1);
}

.sector-solution li::before {
  content: "✅ ";
  margin-right: var(--space-1);
}

.sector-modules {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.module-chip {
  padding: var(--space-1) var(--space-3);
  background: rgba(29, 78, 216, 0.1);
  border: 1px solid rgba(29, 78, 216, 0.2);
  border-radius: 999px;
  font-size: var(--font-size-xs);
  color: var(--pri-500);
  font-weight: 500;
  transition: all 0.2s ease;
}

.module-chip[data-module-key]:hover {
  background: rgba(29, 78, 216, 0.2);
  border-color: rgba(29, 78, 216, 0.4);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(29, 78, 216, 0.2);
}

.sector-action {
  text-align: center;
}

/* How It Works Section */
.steps-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  position: relative;
}

@media (min-width: 768px) {
  .steps-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .steps-container {
    grid-template-columns: repeat(4, 1fr);
  }
  
  /* Decorative separator removed to avoid visible stripe between sections */
  .steps-container::before {
    display: none;
  }
}

.step {
  text-align: center;
  position: relative;
  z-index: 2;
}

.step-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--pri-500), var(--pri-600));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
  box-shadow: 0 0 20px rgba(29, 78, 216, 0.3);
  position: relative;
}

.step-icon span {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: white;
}

.step h3 {
  font-size: var(--font-size-xl);
  font-weight: 600;
  margin-bottom: var(--space-3);
  color: var(--fg);
}

.step p {
  color: var(--muted);
  line-height: 1.6;
}

/* Modes Section */
.modes {
  background: var(--surface);
  /* add breathing room at top/bottom so header and cards don't touch */
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.modes .section-header {
  margin-bottom: var(--space-8);
}

.modes-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  max-width: 1000px;
  margin: 0 auto;
  margin-top: var(--space-6);
}

@media (min-width: 768px) {
  .modes-grid {
    grid-template-columns: repeat(3, 1fr);
    /* larger horizontal gap on desktop to give each card more space */
    gap: var(--space-8);
  }
}

/* Responsive: reduce card padding and gaps on small screens to save vertical space */
@media (max-width: 767px) {
  .modes-grid {
    gap: var(--space-4);
  }

  .mode-card {
    padding: var(--space-6);
  }

  .mode-badge {
    top: -10px; /* slightly adjust badge position for small screens */
  }
}

.mode-card {
  background: var(--bg);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  /* slightly more internal padding for readability */
  padding: calc(var(--space-8) + 0.5rem);
  text-align: center;
  position: relative;
  transition: all 0.3s ease;
  /* subtle elevation to separate cards from background */
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

/* Animated top border on hover - matching highlight cards */
.mode-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-primary);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.mode-card:hover::before {
  transform: scaleX(1);
}

.mode-card.featured {
  border-color: var(--pri-500);
  /* keep featured prominent but less extreme */
  transform: scale(1.03);
  box-shadow: var(--shadow-lg);
}

/* Featured card always shows the top border */
.mode-card.featured::before {
  transform: scaleX(1);
}

/* All cards move on hover, including featured */
.mode-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--s2u-blue);
}

/* Featured card maintains its scale while hovering */
.mode-card.featured:hover {
  transform: scale(1.03) translateY(-4px);
}

.mode-badge {
  display: inline-block;
  background: var(--pri-500);
  color: white;
  padding: var(--space-2) var(--space-4);
  border-radius: 999px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  margin-bottom: var(--space-4);
}

.mode-header {
  margin-bottom: var(--space-6);
}

.mode-header h3 {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--pri-500);
  margin-bottom: var(--space-2);
}

.mode-subtitle {
  color: var(--pri-600);
  margin-top: 0;
  margin-bottom: var(--space-4);
  opacity: 0.95;
}

.mode-subtitle .sub-en {
  display: block;
  font-size: var(--font-size-base);
  font-weight: 600;
  line-height: 1.1;
}

.mode-subtitle .sub-es {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--muted);
  margin-top: 0.15rem;
}

@media (max-width: 520px) {
  .mode-subtitle .sub-en { font-size: calc(var(--font-size-base) - 0.05rem); }
  .mode-subtitle .sub-es { font-size: calc(var(--font-size-sm) - 0.03rem); }
}

.mode-features {
  margin-bottom: var(--space-8);
}

.mode-features ul {
  list-style: none;
  text-align: left;
}

.mode-features li {
  margin-bottom: var(--space-3);
  color: var(--muted);
  position: relative;
  padding-left: var(--space-6);
}

.mode-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--ok);
  font-weight: 600;
}

.mode-footer {
  border-top: 1px solid var(--stroke);
  padding-top: var(--space-6);
}

.mode-price {
  display: block;
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--fg);
  margin-bottom: var(--space-4);
}

/* Ecosystem Section */
.ecosystem {
  background: var(--bg-primary);
}

.ecosystem-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
}

@media (min-width: 1024px) {
  .ecosystem-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.ecosystem-column {
  background: var(--surface);
  border-radius: 16px;
  padding: var(--space-8);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--stroke);
}

.ecosystem-column h3 {
  font-size: var(--font-size-2xl);
  font-weight: 600;
  margin-bottom: var(--space-6);
  text-align: center;
}

.ecosystem-column-header {
  margin-bottom: var(--space-6);
  text-align: center;
}

.ecosystem-column-header h3 {
  color: var(--text-primary);
  font-size: var(--font-size-xl);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.ecosystem-column-header p {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.modules-list,
.areas-list {
  display: grid;
  gap: var(--space-4);
}

.loading-placeholder {
  text-align: center;
  color: var(--text-muted);
  padding: var(--space-8);
  font-style: italic;
}

.modules-list,
.areas-list {
  display: grid;
  gap: var(--space-4);
}

.module-item,
.area-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--bg-primary);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  transition: all 0.2s ease;
}

.module-item:hover,
.area-item:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
  border-color: var(--pri-500);
}

.module-icon,
.area-icon {
  font-size: 24px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(29, 78, 216, 0.1);
  border-radius: var(--radius);
  overflow: hidden;
}

.module-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.module-item:hover .module-logo {
  transform: scale(1.1);
}

.module-details h4 {
  font-weight: 600;
  margin-bottom: var(--space-1);
  color: var(--fg);
}

.module-details p {
  font-size: var(--font-size-sm);
  color: var(--muted);
  margin-bottom: var(--space-2);
}

.module-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--s2u-blue);
  text-decoration: none;
  font-size: var(--font-size-xs);
  font-weight: 500;
  transition: color 0.3s ease;
}

.module-link:hover {
  color: var(--s2u-blue-600);
}

/* Discover Section */
.discover {
  background: var(--surface);
}

/* Modal styles for 'Más información' */
.modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 3000;
}
.modal[hidden] { display: none; }
.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(2,6,23,0.6);
  backdrop-filter: blur(4px);
}
.modal-wrapper {
  position: relative;
  max-width: 920px;
  width: calc(100% - 48px);
  margin-inline: auto;
}
.modal-content {
  position: relative;
  background: var(--surface);
  color: var(--fg);
  border-radius: 12px;
  padding: 1.5rem 1.75rem;
  box-shadow: 0 20px 60px rgba(2,6,23,0.6);
  z-index: 10;
}
.modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: transparent;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--muted);
}
.modal-title {
  font-size: 1.35rem;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}
.modal-copy {
  color: var(--text-secondary);
  line-height: 1.6;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.stepper-container {
  max-width: 800px;
  margin: 0 auto;
  background: var(--bg);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: var(--space-8);
}

.stepper-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-8);
  position: relative;
}

.progress-bar {
  position: absolute;
  top: 50%;
  left: 20%;
  right: 20%;
  height: 2px;
  background: var(--stroke);
  z-index: 1;
}

.step-indicator {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--stroke);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  position: relative;
  z-index: 2;
  margin: 0 var(--space-8);
}

.step-indicator.active {
  background: var(--pri-500);
  color: white;
}

.step-indicator.completed {
  background: var(--ok);
  color: white;
}

.stepper-content {
  margin-bottom: var(--space-8);
}

.step-content {
  display: none;
}

.step-content.active {
  display: block;
}

.step-content h3 {
  font-size: var(--font-size-xl);
  font-weight: 600;
  margin-bottom: var(--space-6);
  text-align: center;
}

.sector-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
}

.sector-button {
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  color: var(--fg);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  font-weight: 500;
}

.sector-button:hover,
.sector-button.selected {
  border-color: var(--pri-500);
  background: rgba(29, 78, 216, 0.1);
  color: var(--pri-500);
}

.priority-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
}

.priority-option {
  display: flex;
  align-items: center;
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s ease;
}

.priority-option:hover {
  border-color: var(--pri-500);
  background: rgba(29, 78, 216, 0.1);
}

.priority-option input {
  margin-right: var(--space-3);
}

.recommendations {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.recommendation-card {
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
}

.recommendation-card h4 {
  font-weight: 600;
  margin-bottom: var(--space-2);
  color: var(--fg);
}

.recommendation-stack {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.stack-item {
  padding: var(--space-1) var(--space-2);
  background: rgba(29, 78, 216, 0.1);
  border-radius: 999px;
  font-size: var(--font-size-xs);
  color: var(--pri-500);
}

.recommendation-result {
  font-size: var(--font-size-sm);
  color: var(--ok);
  font-weight: 500;
}

.stepper-actions {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
}

/* FAQ Section */
.faq-search {
  position: relative;
  max-width: 500px;
  margin: 0 auto var(--space-8);
}

.faq-search input {
  width: 100%;
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-12);
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  color: var(--fg);
  font-size: var(--font-size-base);
}

.faq-search input:focus {
  outline: none;
  border-color: var(--pri-500);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.1);
}

.faq-accordion {
  max-width: 800px;
  margin: 0 auto;
  padding: 1.5rem;
  border-radius: 12px;
  background: var(--surface);
}

.faq-item {
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  margin-bottom: var(--space-4);
  overflow: hidden;
}

.faq-question {
  width: 100%;
  padding: var(--space-4);
  background: var(--surface);
  border: none;
  text-align: left;
  color: var(--fg);
  font-size: var(--font-size-base);
  font-weight: 500;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.2s ease;
}

.faq-question:hover {
  background: var(--bg);
}

.faq-question:focus {
  outline: 2px solid var(--pri-500);
  outline-offset: -2px;
}

.faq-caret {
  transition: transform 0.2s ease;
  font-size: 18px;
}

.faq-item.open .faq-caret {
  transform: rotate(90deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.faq-item.open .faq-answer {
  max-height: 200px;
}

.faq-answer-content {
  padding: var(--space-4);
  color: var(--muted);
  line-height: 1.6;
  border-top: 1px solid var(--stroke);
}

/* Contact Section */
.contact {
  background: var(--gradient-form);
  background-color: var(--s2u-blue);
  color: white;
  position: relative;
  overflow: hidden;
}

.contact::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(ellipse 800px 400px at 20% 0%, rgba(34, 197, 94, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse 600px 300px at 80% 100%, rgba(29, 78, 216, 0.2) 0%, transparent 50%),
    linear-gradient(135deg, rgba(29, 78, 216, 0.9) 0%, rgba(29, 78, 216, 0.7) 70%, rgba(34, 197, 94, 0.5) 100%);
  pointer-events: none;
}

.contact .container {
  position: relative;
  z-index: 1;
}

[data-theme="light"] .contact {
  background: var(--gradient-form);
  background-color: var(--s2u-blue);
}

[data-theme="light"] .contact::before {
  background: 
    radial-gradient(ellipse 800px 400px at 20% 0%, rgba(34, 197, 94, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse 600px 300px at 80% 100%, rgba(29, 78, 216, 0.15) 0%, transparent 50%),
    linear-gradient(135deg, rgba(29, 78, 216, 0.95) 0%, rgba(29, 78, 216, 0.8) 70%, rgba(34, 197, 94, 0.3) 100%);
}

.contact-form-container {
  max-width: 600px;
  margin: 0 auto;
}

.contact-form {
  background: var(--bg);
  padding: var(--space-8);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
}

.form-group {
  margin-bottom: var(--space-6);
}

.form-group label {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: 500;
  color: var(--fg);
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  color: var(--fg);
  font-size: var(--font-size-base);
  font-family: inherit;
  transition: border-color 0.2s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--pri-500);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.1);
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
}

.privacy-notice {
  margin-top: var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--muted);
  text-align: center;
}

.privacy-notice a {
  color: var(--pri-500);
  text-decoration: none;
}

.privacy-notice a:hover {
  text-decoration: underline;
}

/* Section Color Alternation */
.hero {
    background: var(--gradient-hero);
    color: white;
    position: relative;
}

.sectors {
    background: var(--bg);
    color: var(--fg);
    position: relative;
}

[data-theme="light"] .sectors {
    background: linear-gradient(135deg, 
        #f8fafc 0%, 
        #f1f5f9 50%, 
        #e2e8f0 100%);
}

.how-it-works {
    background: var(--surface);
    color: var(--fg);
  /* reduce strong colored separators for cleaner look */
  border-top: 1px solid var(--stroke);
  border-bottom: 1px solid var(--stroke);
    position: relative;
}

/* Ensure generous vertical padding inside How It Works for clear separation */
.how-it-works {
  padding-block: clamp(4rem, 8vw, 6rem);
}

/* Add extra spacing between header and steps */
.how-it-works .section-header {
  margin-bottom: var(--space-20);
}

@media (max-width: 768px) {
  .how-it-works .section-header {
    margin-bottom: var(--space-16);
  }
}

[data-theme="light"] .how-it-works {
    background: linear-gradient(135deg, 
        #ffffff 0%, 
        #f8fafc 50%, 
        #f1f5f9 100%);
    box-shadow: 
        inset 0 3px 0 var(--pri-500),
        inset 0 -3px 0 var(--pri-500),
        0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

.modes {
    background: var(--bg);
    color: var(--fg);
    position: relative;
}

[data-theme="light"] .modes {
    background: linear-gradient(135deg, 
        #f1f5f9 0%, 
        #e2e8f0 50%, 
        #cbd5e1 100%);
}

.ecosystem {
    background: linear-gradient(45deg, 
        var(--surface) 0%, 
        var(--bg) 100%);
    color: var(--fg);
  /* subtle separator instead of bright accent line */
  border-top: 1px solid var(--stroke);
    position: relative;
}

[data-theme="light"] .ecosystem {
    background: linear-gradient(45deg, 
        #ffffff 0%, 
        #f8fafc 50%, 
        #f1f5f9 100%);
    border-top: 2px solid var(--accent-500);
}

.discover {
    background: var(--surface);
    color: var(--fg);
    position: relative;
}

/* Remove thin separators and inset decorations between sections that caused
   visible white/colored stripes in some themes. These overrides keep the
   generous spacing but avoid hard 1px borders which were visually intrusive. */
.how-it-works,
.modes,
.ecosystem,
.solution-steps {
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

[data-theme="light"] .how-it-works,
[data-theme="light"] .ecosystem,
[data-theme="light"] .solution-steps,
[data-theme="light"] .modes {
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Conservative fix: do NOT overwrite section backgrounds (preserve dark mode).
   Only hide decorative pseudo-elements that can create full-width stripes
   between these specific sections. This keeps the intended dark surfaces
   but prevents the thin band artifacts. */
#how-it-works::before,
#how-it-works::after,
#modes::before,
#modes::after,
#ecosystem::before,
#ecosystem::after,
#solution-steps::before,
#solution-steps::after {
  /* remove decorative layers that may produce horizontal bands */
  content: none !important;
  background: none !important;
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Ensure these important sections explicitly use the dark-theme surfaces
   when the page is in dark mode. This prevents any light-theme gradients or
   accidental pseudo-elements from appearing as horizontal bands between
   sections. Using !important here is conservative but targeted. */
html[data-theme="dark"] #how-it-works,
html[data-theme="dark"] #modes,
html[data-theme="dark"] #ecosystem,
html[data-theme="dark"] #solution-steps,
html[data-theme="dark"] #sectors {
  background: var(--surface) !important;
  color: var(--fg) !important;
}

/* Also make sure any container-level decorative pseudo-elements are behind
   the section background (lower z-index) so they cannot produce visible
   bands between sections. */
html[data-theme="dark"] #how-it-works::before,
html[data-theme="dark"] #modes::before,
html[data-theme="dark"] #ecosystem::before,
html[data-theme="dark"] #solution-steps::before,
html[data-theme="dark"] #sectors::before {
  z-index: 0 !important;
}

/* --------------------------------------------------
   Dark-mode defensive baseline:
   Some themes/plugins or inline rules left light backgrounds
   on section-level elements which showed as horizontal white
   bands. This rule forces the page sections to use the
   dark page background while preserving inner card surfaces
   (cards use their own .wizard-container/.mode-card backgrounds).
   It's intentionally narrow: only applies when html[data-theme="dark"].
   After you confirm this removes the bands I'll tighten specificity
   to avoid using !important everywhere.
   -------------------------------------------------- */
html[data-theme="dark"] main,
html[data-theme="dark"] main > section {
  background-color: var(--bg) !important;
  background-image: none !important;
}

/* Exception: the hero section should preserve its explicit gradient
   even when we apply a defensive dark baseline to main/sections. The
   baseline rule above uses !important to eliminate stray bands; this
   rule re-applies the intended hero gradient with higher specificity
   and also uses !important to ensure it wins. */
html[data-theme="dark"] main > section.hero,
html[data-theme="dark"] .hero {
  background-image: none !important;
  background: linear-gradient(180deg, #05060a 0%, #0e1628 18%, #0f2650 46%, #1e3bd6 78%, #244ff0 100%) !important;
}

/* Keep inner elevated containers (cards/forms) using their surface color */
html[data-theme="dark"] .wizard-container,
html[data-theme="dark"] .mode-card,
html[data-theme="dark"] .ecosystem-grid,
html[data-theme="dark"] .sector-grid,
html[data-theme="dark"] .contact-form-container {
  background-image: none !important;
  /* allow these to keep their existing background (they typically use var(--surface)) */
}

[data-theme="light"] .discover {
    background: linear-gradient(135deg, 
        #f8fafc 0%, 
        #f1f5f9 100%);
}

.faq {
    background: var(--bg);
    color: var(--fg);
    position: relative;
}

[data-theme="light"] .faq {
    background: linear-gradient(135deg, 
        #e2e8f0 0%, 
        #cbd5e1 100%);
}

.contact {
    background: linear-gradient(135deg, 
        var(--accent-500) 0%, 
        var(--pri-600) 100%);
    color: white;
    position: relative;
}

/* Collapsible Sections */
.toggle-section-btn {
    background: var(--pri-500);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem auto;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px var(--pri-alpha-30);
}

.toggle-section-btn:hover {
    background: var(--pri-600);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--pri-alpha-40);
}

.toggle-section-btn i {
    transition: transform 0.3s ease;
}

.toggle-section-btn.active i {
    transform: rotate(180deg);
}

.collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out, opacity 0.3s ease;
    opacity: 0;
}

.collapsible-content.active {
    max-height: 5000px;
    opacity: 1;
    transition: max-height 0.5s ease-in, opacity 0.3s ease;
}

/* Handle hidden attribute on collapsible content */
.collapsible-content[hidden] {
    display: none !important;
    max-height: 0 !important;
    opacity: 0 !important;
}

/* Show collapsible content when not hidden */
.collapsible-content:not([hidden]) {
    display: block;
    max-height: 5000px;
    opacity: 1;
}

/* Footer */
.footer {
    background: var(--gradient-footer);
    color: #ffffff;
    padding: 4rem 0 1rem;
    position: relative;
    box-shadow: var(--shadow-footer);
}

.footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse at top, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at bottom left, rgba(16, 185, 129, 0.08) 0%, transparent 50%);
    pointer-events: none;
    z-index: 1;
}

.footer::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(59, 130, 246, 0.5) 25%, 
        rgba(16, 185, 129, 0.5) 75%, 
        transparent 100%);
    z-index: 2;
}

/* Footer content above background effects */
.footer .container {
    position: relative;
    z-index: 3;
}

/* Dark theme footer (default) */
[data-theme="dark"] .footer,
.footer {
    background: var(--footer-bg-dark, 
        linear-gradient(135deg, 
            #020617 0%, 
            #0f172a 25%, 
            #1e293b 75%, 
            #374151 100%));
}

/* Light theme footer - mantiene colores oscuros para contraste */
[data-theme="light"] .footer {
    background: var(--footer-bg-light, 
        linear-gradient(135deg, 
            #1e293b 0%, 
            #334155 25%, 
            #475569 75%, 
            #64748b 100%));
    color: #ffffff;
}

[data-theme="light"] .footer::before {
    background: 
        radial-gradient(ellipse at top, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at bottom left, rgba(16, 185, 129, 0.12) 0%, transparent 50%);
}

[data-theme="light"] .footer::after {
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.2) 25%, 
        rgba(59, 130, 246, 0.3) 50%, 
        rgba(255, 255, 255, 0.2) 75%, 
        transparent 100%);
}

.footer-top {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-logo:hover {
    transform: translateY(-2px);
}

.footer-logo:hover h3 {
    color: var(--s2u-blue-500);
}

.footer-logo-img {
    width: 40px;
    height: 40px;
    /* filter: brightness(0) invert(1); */ /* Removed to show original logo colors */
}

.footer-logo h3 {
    color: var(--pri-500);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

.footer-brand p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    line-height: 1.5;
}

.footer-sections {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.footer-section h4 {
    color: white;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-bottom: 2px solid var(--pri-500);
    padding-bottom: 0.5rem;
    display: inline-block;
}

.footer-section ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-section a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    padding: 0.25rem 0;
}

.footer-section a:hover {
    color: var(--pri-500);
    padding-left: 0.5rem;
    transform: translateX(3px);
}

.footer-contact h4 {
    color: white;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.contact-info p {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
}

.contact-info i {
    color: var(--pri-500);
    width: 16px;
}

.social-links {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-links a:hover {
    background: var(--pri-500);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px var(--pri-alpha-40);
}

.footer-newsletter h4 {
    color: white;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.footer-newsletter p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.newsletter-form {
    display: flex;
    gap: 0.5rem;
}

.newsletter-form input {
    flex: 1;
    padding: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 0.9rem;
}

.newsletter-form input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.newsletter-form button {
    padding: 0.75rem 1.5rem;
    background: var(--pri-500);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
}

.newsletter-form button:hover {
    background: var(--pri-600);
    transform: translateY(-2px);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
}

.footer-bottom-right {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.footer-legal {
    display: flex;
    gap: 1rem;
}

.footer-legal a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-legal a:hover {
    color: var(--pri-500);
}

/* Footer Responsive */
@media (max-width: 1024px) {
    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
    
    .footer-sections {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .footer-top {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .footer-sections {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .newsletter-form {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .footer-sections {
        grid-template-columns: 1fr;
    }
}

.powered-by a {
  color: var(--pri-500);
  text-decoration: none;
}

/* Mobile CTA */
.mobile-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-4);
  background: var(--surface);
  border-top: 1px solid var(--stroke);
  z-index: 999;
  display: block;
}

@media (min-width: 768px) {
  .mobile-cta {
    display: none;
  }
}

.mobile-cta .btn-primary {
  width: 100%;
  justify-content: center;
}

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

:focus-visible {
  outline: 2px solid var(--pri-500);
  outline-offset: 2px;
}

/* Hidden elements for screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Dark Mode Colors */
.dark-mode {
    --primary-color: #6d8eff;
    --secondary-color: #adb5bd;
    --text-color: #f8f9fa;
    --bg-color: #121212;
    --card-bg: #1e1e1e;
    --border-color: #2d2d2d;
    --header-bg: #1a1a1a;
    --footer-bg: #0a0a0a;
    --footer-text: #f8f9fa;
    --shadow-sm: 0 0.125rem 0.25rem rgba(255, 255, 255, 0.05);
    --shadow-md: 0 0.5rem 1rem rgba(255, 255, 255, 0.075);
    --shadow-lg: 0 1rem 3rem rgba(255, 255, 255, 0.1);
}

/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    font-weight: var(--body-weight);
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--bg-color);
    transition: background-color var(--transition-speed), color var(--transition-speed);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: var(--heading-weight);
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
}

a {
    text-decoration: none;
    color: var(--primary-color);
    transition: color var(--transition-speed);
}

a:hover {
    color: darken(var(--primary-color), 10%);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

.hidden {
    display: none !important;
}

/* Language Toggle */
[data-lang] {
    display: block;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: var(--border-radius-md);
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-speed);
    border: none;
    font-size: 1rem;
}

.btn-primary {
    background-color: var(--primary-color);
    color: white;
}

.btn-primary:hover {
    background-color: darken(var(--primary-color), 10%);
    color: white;
}

.btn-secondary {
    background-color: transparent;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.btn-secondary:hover {
    background-color: var(--primary-color);
    color: white;
}

/* Header Styles */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--header-bg);
    box-shadow: var(--shadow-sm);
    z-index: 1000;
    transition: background-color var(--transition-speed);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) 0;
}

.logo img {
    height: 40px;
}

.main-menu {
    display: flex;
}

.main-menu li {
    margin-left: var(--spacing-lg);
}

.main-menu a {
    color: var(--text-color);
    font-weight: 500;
    position: relative;
}

.main-menu a:hover, .main-menu a.active {
    color: var(--primary-color);
}

.main-menu a.active::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--primary-color);
}

.header-controls {
    display: flex;
    align-items: center;
}

.language-toggle, .theme-toggle {
    margin-left: var(--spacing-md);
}

.language-toggle button {
    background: none;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    transition: color var(--transition-speed);
}

.language-toggle button.active {
    color: var(--primary-color);
    font-weight: 600;
}

.theme-toggle button {
    background: none;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition-speed);
}

.theme-toggle button:hover {
    color: var(--primary-color);
}

.light-mode .fa-sun {
    display: none;
}

.dark-mode .fa-moon {
    display: none;
}

.mobile-menu-toggle {
    display: none;
}

/* Hero Section */
.hero {
    padding: 120px 0 var(--spacing-xxl);
    background: linear-gradient(135deg, rgba(74, 108, 247, 0.1) 0%, rgba(74, 108, 247, 0.05) 100%);
}

.hero .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hero-content {
    flex: 1;
    max-width: 600px;
}

.hero-content h1 {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-lg);
}

.hero-content p {
    font-size: 1.1rem;
    margin-bottom: var(--spacing-xl);
}

.hero-cta {
    display: flex;
    gap: var(--spacing-md);
}

.hero-image {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.hero-image img {
    max-width: 90%;
}

/* Section Styles */
section {
    padding: var(--spacing-xxl) 0;
}

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

.section-header h2 {
    font-size: 2rem;
    margin-bottom: var(--spacing-sm);
}

.section-header p {
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto;
}

/* Benefits Section */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}

.benefit-card {
    background-color: var(--card-bg);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}

.benefit-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.benefit-icon {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
}

.benefit-card h3 {
    font-size: 1.25rem;
    margin-bottom: var(--spacing-md);
}

/* Solutions Section */
.solutions-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
}

.solution-card {
    display: flex;
    background-color: var(--card-bg);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.solution-image {
    flex: 1;
    min-width: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
    background-color: rgba(74, 108, 247, 0.05);
}

.solution-image img {
    max-width: 80%;
    max-height: 250px;
}

.solution-content {
    flex: 2;
    padding: var(--spacing-xl);
}

.solution-content h3 {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-md);
}

.solution-content p {
    margin-bottom: var(--spacing-md);
}

.solution-content ul {
    margin-bottom: var(--spacing-lg);
    padding-left: var(--spacing-md);
}

.solution-content ul li {
    margin-bottom: var(--spacing-sm);
    position: relative;
    padding-left: var(--spacing-lg);
}

.solution-content ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: bold;
}

.solution-cta {
    display: flex;
    gap: var(--spacing-md);
}

/* Contact Section */
.contact {
    background-color: var(--card-bg);
}

.contact-container {
    display: flex;
    gap: var(--spacing-xl);
}

.contact-info, .contact-form {
    flex: 1;
}

.contact-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.info-item {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-lg);
}

.info-item i {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-right: var(--spacing-md);
}

.social-media {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.social-media a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: white;
    transition: background-color var(--transition-speed);
}

.social-media a:hover {
    background-color: darken(var(--primary-color), 10%);
}

.form-group {
    margin-bottom: var(--spacing-md);
}

.form-group label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: 500;
}

.form-group input, .form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: border-color var(--transition-speed);
}

.form-group input:focus, .form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* Footer Styles */
footer {
    background-color: var(--footer-bg);
    color: var(--footer-text);
    padding-top: var(--spacing-xxl);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--spacing-xl);
}

.footer-logo {
    max-width: 300px;
}

.footer-logo img {
    height: 40px;
    margin-bottom: var(--spacing-md);
}

.footer-links {
    display: flex;
    gap: var(--spacing-xl);
}

.footer-column h4 {
    margin-bottom: var(--spacing-md);
    font-size: 1.1rem;
}

.footer-column ul li {
    margin-bottom: var(--spacing-sm);
}

.footer-column a {
    color: var(--footer-text);
    opacity: 0.8;
    transition: opacity var(--transition-speed);
}

.footer-column a:hover {
    opacity: 1;
    color: var(--primary-color);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-legal {
    display: flex;
    gap: var(--spacing-lg);
}

/* Responsive Styles */
@media (max-width: 992px) {
    .hero .container {
        flex-direction: column;
        text-align: center;
    }
    
    .hero-content {
        max-width: 100%;
        margin-bottom: var(--spacing-xl);
    }
    
    .hero-cta {
        justify-content: center;
    }
    
    .solution-card {
        flex-direction: column;
    }
    
    .solution-image {
        min-width: 100%;
        padding: var(--spacing-xl);
    }
    
    .contact-container {
        flex-direction: column;
    }
    
    .footer-content {
        flex-direction: column;
        gap: var(--spacing-xl);
    }
    
    .footer-logo {
        max-width: 100%;
        text-align: center;
        margin-bottom: var(--spacing-lg);
    }
    
    .footer-links {
        justify-content: space-between;
    }
}

@media (max-width: 768px) {
    .main-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--header-bg);
        box-shadow: var(--shadow-sm);
        flex-direction: column;
        padding: var(--spacing-md) 0;
    }
    
    .main-menu.active {
        display: flex;
    }
    
    .main-menu li {
        margin: 0;
        padding: var(--spacing-sm) var(--spacing-lg);
    }
    
    .mobile-menu-toggle {
        display: block;
        margin-left: var(--spacing-md);
    }
    
    .mobile-menu-toggle button {
        background: none;
        border: none;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 20px;
    }
    
    .mobile-menu-toggle span {
        display: block;
        height: 2px;
        width: 100%;
        background-color: var(--text-color);
        transition: transform var(--transition-speed);
    }
    
    .mobile-menu-toggle.active span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }
    
    .mobile-menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }
    
    .mobile-menu-toggle.active span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }
    
    .benefits-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-links {
        flex-direction: column;
        gap: var(--spacing-lg);
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: var(--spacing-md);
        text-align: center;
    }
    
    .footer-legal {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
}

@media (max-width: 576px) {
    .hero-content h1 {
        font-size: 2rem;
    }
    
    .section-header h2 {
        font-size: 1.75rem;
    }
    
    .solution-cta {
        flex-direction: column;
    }
}

/* ============================================
   WIZARD STYLES
   ============================================ */

/* Wizard Progress Indicator */
.wizard-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: var(--space-12) 0 var(--space-16);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.step-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    position: relative;
    z-index: 2;
}

.step-number {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: var(--font-size-lg);
    background: var(--bg-secondary);
    border: 2px solid var(--stroke);
    color: var(--text-muted);
    transition: all 0.3s ease;
}

.step-label {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    font-weight: 500;
    transition: color 0.3s ease;
}

.step-indicator.active .step-number {
    background: var(--s2u-blue);
    border-color: var(--s2u-blue);
    color: white;
}

.step-indicator.active .step-label {
    color: var(--s2u-blue);
}

.step-indicator.completed .step-number {
    background: var(--s14u-accent);
    border-color: var(--s14u-accent);
    color: white;
}

.step-indicator.completed .step-label {
    color: var(--s14u-accent);
}

.progress-line {
    flex: 1;
    height: 2px;
    background: var(--stroke);
    margin: 0 var(--space-4);
    position: relative;
    z-index: 1;
}

.progress-line.completed {
    background: var(--s14u-accent);
}

/* Wizard Container */
.wizard-container {
    background: var(--surface);
    border-radius: 16px;
    padding: var(--space-8);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    margin: var(--space-8) 0;
    min-height: 400px;
}

.step-content {
    display: none;
    animation: fadeIn 0.5s ease-in-out;
}

.step-content.active {
    display: block;
}

.step-content h3 {
    color: var(--text-primary);
    font-size: var(--font-size-2xl);
    font-weight: 600;
    margin-bottom: var(--space-2);
    text-align: center;
}

.step-content p {
    color: var(--text-secondary);
    font-size: var(--font-size-base);
    text-align: center;
    margin-bottom: var(--space-8);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Search Input */
.sector-search {
    position: relative;
    max-width: 400px;
    margin: 0 auto var(--space-8);
}

.sector-search input {
    width: 100%;
    padding: var(--space-3) var(--space-4) var(--space-3) var(--space-12);
    border: 2px solid var(--stroke);
    border-radius: 12px;
    font-size: var(--font-size-base);
    transition: border-color 0.3s ease;
}

.sector-search input:focus {
    outline: none;
    border-color: var(--s2u-blue);
}

.sector-search i {
    position: absolute;
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

/* Options Grid */
.options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

.option-card {
    background: var(--bg-primary);
    border: 2px solid var(--stroke);
    border-radius: 12px;
    padding: var(--space-6);
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.option-card:hover {
    border-color: var(--s2u-blue);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(29, 78, 216, 0.15);
}

.option-card.selected {
    border-color: var(--s2u-blue);
    background: rgba(29, 78, 216, 0.05);
}

.option-card h4 {
    color: var(--text-primary);
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--space-2);
}

.option-card .option-type {
    display: inline-block;
    background: var(--s14u-accent);
    color: white;
    font-size: var(--font-size-xs);
    font-weight: 500;
    padding: var(--space-1) var(--space-3);
    border-radius: 20px;
    margin-bottom: var(--space-3);
}

.option-card .option-keywords {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-4);
}

.option-card .option-modules {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    justify-content: center;
}

.module-tag {
    background: rgba(29, 78, 216, 0.1);
    color: var(--s2u-blue);
    font-size: var(--font-size-xs);
    padding: var(--space-1) var(--space-2);
    border-radius: 6px;
    font-weight: 500;
}

/* Priority Grid - Simplified layout */
.options-grid.priority-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    max-width: 800px;
    margin: 0 auto var(--space-8);
}

.priority-card {
    background: var(--bg-primary);
    border: 2px solid var(--stroke);
    border-radius: 12px;
    padding: var(--space-6) var(--space-4);
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.priority-card:hover {
    border-color: var(--s2u-blue);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(29, 78, 216, 0.15);
}

.priority-card.selected {
    border-color: var(--s2u-blue);
    background: rgba(29, 78, 216, 0.05);
}

.priority-card .priority-text {
    color: var(--text-primary);
    font-size: var(--font-size-lg);
    font-weight: 600;
}

/* Recommendations Container */
.recommendations-container {
    display: grid;
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.recommendation-card {
    background: var(--bg-primary);
    border: 2px solid var(--stroke);
    border-radius: 12px;
    padding: var(--space-6);
    transition: all 0.3s ease;
}

.recommendation-card:hover {
    border-color: var(--s2u-blue);
    box-shadow: 0 8px 25px rgba(29, 78, 216, 0.1);
}

.recommendation-card h4 {
    color: var(--text-primary);
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.recommendation-card .rec-icon {
    width: 40px;
    height: 40px;
    background: var(--s2u-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: var(--font-size-lg);
}

.recommendation-card .rec-stack {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.recommendation-card .rec-result {
    background: var(--s14u-accent);
    color: white;
    font-size: var(--font-size-sm);
    font-weight: 600;
    padding: var(--space-2) var(--space-4);
    border-radius: 20px;
    display: inline-block;
    margin-bottom: var(--space-4);
}

.recommendation-actions {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
}

/* Wizard Navigation */
.wizard-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-8);
    gap: var(--space-4);
}

.wizard-navigation .btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.step-content.active {
    animation: fadeIn 0.5s ease-in-out;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .wizard-progress {
        margin: var(--space-8) 0;
    }
    
    .step-number {
        width: 40px;
        height: 40px;
        font-size: var(--font-size-base);
    }
    
    .step-label {
        font-size: var(--font-size-xs);
    }
    
    .progress-line {
        margin: 0 var(--space-2);
    }
    
    .wizard-container {
        padding: var(--space-6);
        min-height: 350px;
    }
    
    .options-grid {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
    
    .options-grid.priority-grid {
        grid-template-columns: 1fr;
    }
    
    .wizard-navigation {
        flex-direction: column-reverse;
    }
    
    .recommendation-actions {
        flex-direction: column;
    }
}

@media (max-width: 576px) {
    .step-content h3 {
        font-size: var(--font-size-xl);
    }
    
    .option-card {
        padding: var(--space-4);
    }
    
    .priority-card {
        padding: var(--space-4);
        min-height: 100px;
    }
    
    .recommendation-card {
        padding: var(--space-4);
    }
}