/* ============================================================
 * Innovación Digital — root.css
 * Design tokens del tema.
 *
 * Este es el ÚNICO archivo que editás para cambiar el tema.
 * Todos los colores, tipografía, espaciado y animaciones
 * están definidos acá como variables --fxa-*.
 *
 * Bootstrap se carga por separado (CDN o bootstrap.css).
 * Sus variables --bs-* son sobreescritas donde sea necesario.
 *
 * ORDEN DE CARGA EN HTML:
 *   1. bootstrap.css    (Bootstrap 5.3, sin tocar)
 *   2. root.css         (este archivo — tokens --fxa-*)
 *   3. base.css         (reset, body, tipografía, scrollbar, keyframes)
 *   4. layout.css       (navbar, hero, secciones, footer, loader)
 *   5. components.css   (card, form, btn, badge — BS overrides + propios)
 *   6. customs.css      (tus overrides y clases extra)
 *
 * CÓMO CAMBIAR DE TEMA — solo JS, sin tocar ningún CSS:
 *   document.documentElement.setAttribute('data-theme', 'light')
 *   document.documentElement.setAttribute('data-theme', 'ocean')
 *   document.documentElement.setAttribute('data-theme', 'ember')
 *   document.documentElement.removeAttribute('data-theme')   → dark (default)
 * ============================================================ */


/* ----------------------------------------------------------
 * Paleta de colores primitivos
 * No usar directamente en componentes.
 * Siempre referenciar los semánticos de abajo.
 * ---------------------------------------------------------- */
:root {
  /* Lima — acento principal */
  --fxa-color-lime-100:      #f0f7c2;
  --fxa-color-lime-300:      #d4e97a;
  --fxa-color-lime-500:      #b5d430;   /* ← color de marca */
  --fxa-color-lime-700:      #8faa1a;
  --fxa-color-lime-900:      #5e7010;

  /* Neutros oscuros */
  --fxa-color-black:         #0a0a0a;
  --fxa-color-gray-950:      #0f0f0f;
  --fxa-color-gray-900:      #111111;
  --fxa-color-gray-800:      #161616;
  --fxa-color-gray-700:      #1e1e1e;
  --fxa-color-gray-600:      #2a2a2a;
  --fxa-color-gray-500:      #555555;
  --fxa-color-gray-400:      #777777;
  --fxa-color-gray-300:      #aaaaaa;
  --fxa-color-gray-200:      #cccccc;
  --fxa-color-gray-100:      #eeeeee;
  --fxa-color-white:         #f4f4f4;

  /* Estados semánticos fijos — no cambian con el tema de color */
  --fxa-color-success:       #28c840;
  --fxa-color-danger:        #ff5f57;
  --fxa-color-warning:       #febc2e;
  --fxa-color-info:          #299cdb;
}


/* ----------------------------------------------------------
 * Colores semánticos
 * Estos son los que usás en componentes.
 * Cambiá este bloque (o el [data-theme]) para cambiar el tema.
 * ---------------------------------------------------------- */
:root {
  --fxa-primary:             var(--fxa-color-lime-500);
  --fxa-primary-rgb:         181, 212, 48;
  --fxa-primary-subtle:      rgba(181, 212, 48, 0.08);
  --fxa-primary-emphasis:    var(--fxa-color-lime-700);

  --fxa-success:             var(--fxa-color-success);
  --fxa-success-subtle:      rgba(40, 200, 64, 0.1);

  --fxa-danger:              var(--fxa-color-danger);
  --fxa-danger-subtle:       rgba(255, 95, 87, 0.1);

  --fxa-warning:             var(--fxa-color-warning);
  --fxa-warning-subtle:      rgba(254, 188, 46, 0.1);

  --fxa-info:                var(--fxa-color-info);
  --fxa-info-subtle:         rgba(41, 156, 219, 0.1);
}


/* ----------------------------------------------------------
 * Body & superficies
 * ---------------------------------------------------------- */
:root {
  --fxa-body-bg:             var(--fxa-color-black);
  --fxa-body-color:          var(--fxa-color-white);

  --fxa-surface-1:           var(--fxa-color-gray-900);   /* fondos de sección alternada */
  --fxa-surface-2:           var(--fxa-color-gray-800);   /* cards */
  --fxa-surface-3:           var(--fxa-color-gray-700);   /* inputs, hover states */

  --fxa-heading-color:       var(--fxa-color-white);
  --fxa-muted-color:         var(--fxa-color-gray-400);

  --fxa-link-color:          var(--fxa-primary);
  --fxa-link-hover-color:    var(--fxa-primary-emphasis);
  --fxa-link-decoration:     none;
}


/* ----------------------------------------------------------
 * Bordes
 * ---------------------------------------------------------- */
:root {
  --fxa-border-color:        rgba(255, 255, 255, 0.07);
  --fxa-border-color-accent: rgba(181, 212, 48, 0.22);
  --fxa-border-width:        1px;
  --fxa-border-radius:       0.75rem;
  --fxa-border-radius-sm:    0.5rem;
  --fxa-border-radius-lg:    1.25rem;
  --fxa-border-radius-pill:  50rem;
}


/* ----------------------------------------------------------
 * Sombras
 * ---------------------------------------------------------- */
:root {
  --fxa-shadow-sm:           0 1px 3px rgba(0, 0, 0, 0.4);
  --fxa-shadow:              0 4px 16px rgba(0, 0, 0, 0.5);
  --fxa-shadow-lg:           0 16px 48px rgba(0, 0, 0, 0.55);
  --fxa-shadow-accent:       0 8px 28px rgba(181, 212, 48, 0.28);
  --fxa-shadow-focus:        0 0 0 3px rgba(181, 212, 48, 0.14);
}


/* ----------------------------------------------------------
 * Tipografía
 * ---------------------------------------------------------- */
:root {
  --fxa-font-family:         "Space Grotesk", system-ui, -apple-system, sans-serif;
  --fxa-font-family-mono:    "DM Mono", SFMono-Regular, Menlo, monospace;

  --fxa-font-size-base:      1rem;
  --fxa-font-size-sm:        0.875rem;
  --fxa-font-size-xs:        0.78rem;
  --fxa-font-size-lg:        1.125rem;

  --fxa-font-weight-light:    300;
  --fxa-font-weight-normal:   400;
  --fxa-font-weight-medium:   500;
  --fxa-font-weight-semibold: 600;
  --fxa-font-weight-bold:     700;

  --fxa-line-height-base:    1.6;
  --fxa-line-height-tight:   1.15;
}


/* ----------------------------------------------------------
 * Layout — dimensiones estructurales
 * ---------------------------------------------------------- */
:root {
  --fxa-navbar-height:       64px;
  --fxa-section-padding-y:   5.5rem;
  --fxa-gutter:              1.5rem;
  --fxa-hero-min-height:     100vh;
}


/* ----------------------------------------------------------
 * Navbar
 * ---------------------------------------------------------- */
:root {
  --fxa-navbar-bg:               rgba(10, 10, 10, 0.9);
  --fxa-navbar-border:           var(--fxa-border-color);
  --fxa-navbar-blur:             20px;

  --fxa-nav-link-color:          var(--fxa-muted-color);
  --fxa-nav-link-hover-color:    var(--fxa-primary);
  --fxa-nav-link-hover-bg:       var(--fxa-primary-subtle);
  --fxa-nav-link-active-color:   var(--fxa-primary);

  --fxa-lang-btn-color:          var(--fxa-muted-color);
  --fxa-lang-btn-border:         var(--fxa-border-color);
  --fxa-lang-btn-active-color:   var(--fxa-primary);
  --fxa-lang-btn-active-border:  var(--fxa-primary);
  --fxa-lang-btn-active-bg:      var(--fxa-primary-subtle);
}


/* ----------------------------------------------------------
 * Hamburguesa tech
 * ---------------------------------------------------------- */
:root {
  --fxa-ham-color:           var(--fxa-primary);
  --fxa-ham-bg:              var(--fxa-surface-2);
  --fxa-ham-border:          var(--fxa-border-color);
  --fxa-ham-hover-border:    var(--fxa-primary);
  --fxa-ham-glow:            rgba(181, 212, 48, 0.2);
  --fxa-ham-scan-color:      rgba(181, 212, 48, 0.12);

  --fxa-ham-bar-1-width:     22px;
  --fxa-ham-bar-2-width:     14px;
  --fxa-ham-bar-3-width:     18px;
}


/* ----------------------------------------------------------
 * Hero
 * ---------------------------------------------------------- */
:root {
  --fxa-hero-grid-color:     rgba(181, 212, 48, 0.045);
  --fxa-hero-glow-color:     rgba(181, 212, 48, 0.11);
  --fxa-hero-accent-color:   var(--fxa-primary);

  --fxa-hero-tag-bg:         var(--fxa-primary-subtle);
  --fxa-hero-tag-border:     var(--fxa-border-color-accent);
  --fxa-hero-tag-color:      var(--fxa-primary);

  --fxa-hero-stat-num-color:   var(--fxa-primary);
  --fxa-hero-stat-label-color: var(--fxa-muted-color);

  --fxa-logo-wrap-bg:        rgba(181, 212, 48, 0.07);
  --fxa-logo-wrap-border:    rgba(181, 212, 48, 0.13);
  --fxa-logo-orbit-border:   rgba(181, 212, 48, 0.11);
  --fxa-logo-dot-color:      var(--fxa-primary);
  --fxa-logo-dot-glow:       rgba(181, 212, 48, 0.9);
}


/* ----------------------------------------------------------
 * Secciones
 * ---------------------------------------------------------- */
:root {
  --fxa-bg-section-a:        var(--fxa-body-bg);    /* negro puro */
  --fxa-bg-section-b:        var(--fxa-surface-1);  /* gris muy oscuro */

  --fxa-divider-color:       rgba(181, 212, 48, 0.3);

  --fxa-section-tag-color:   var(--fxa-primary);
  --fxa-section-tag-family:  var(--fxa-font-family-mono);
  --fxa-section-tag-size:    0.73rem;
  --fxa-section-tag-spacing: 0.16em;
}


/* ----------------------------------------------------------
 * Cards
 * ---------------------------------------------------------- */
:root {
  --fxa-card-bg:             var(--fxa-surface-2);
  --fxa-card-border:         var(--fxa-border-color);
  --fxa-card-border-radius:  var(--fxa-border-radius-lg);
  --fxa-card-shadow:         none;
  --fxa-card-padding:        1.75rem;
  --fxa-card-hover-border:   var(--fxa-border-color-accent);
  --fxa-card-hover-shadow:   var(--fxa-shadow-lg);
  --fxa-card-hover-lift:     -4px;
  --fxa-card-accent-color:   var(--fxa-primary);
}


/* ----------------------------------------------------------
 * Formularios
 * ---------------------------------------------------------- */
:root {
  --fxa-input-bg:            var(--fxa-surface-1);
  --fxa-input-border:        var(--fxa-border-color);
  --fxa-input-color:         var(--fxa-body-color);
  --fxa-input-placeholder:   var(--fxa-color-gray-600);
  --fxa-input-focus-border:  var(--fxa-primary);
  --fxa-input-focus-shadow:  var(--fxa-shadow-focus);
  --fxa-input-focus-bg:      var(--fxa-input-bg);
  --fxa-input-disabled-bg:   var(--fxa-surface-3);
  --fxa-input-border-radius: var(--fxa-border-radius);
  --fxa-input-padding:       0.7rem 1rem;
  --fxa-input-font-size:     var(--fxa-font-size-sm);

  --fxa-label-color:          var(--fxa-muted-color);
  --fxa-label-font-weight:    var(--fxa-font-weight-semibold);
  --fxa-label-font-size:      var(--fxa-font-size-xs);
  --fxa-label-letter-spacing: 0.06em;
}


/* ----------------------------------------------------------
 * Botones
 * ---------------------------------------------------------- */
:root {
  --fxa-btn-padding-x:         1.8rem;
  --fxa-btn-padding-y:         0.75rem;
  --fxa-btn-border-radius:     var(--fxa-border-radius);
  --fxa-btn-font-weight:       var(--fxa-font-weight-bold);
  --fxa-btn-font-size:         0.92rem;

  /* Primario (lima sólido) */
  --fxa-btn-primary-bg:        var(--fxa-primary);
  --fxa-btn-primary-color:     var(--fxa-color-black);
  --fxa-btn-primary-hover-bg:  var(--fxa-primary-emphasis);
  --fxa-btn-primary-shadow:    var(--fxa-shadow-accent);

  /* Ghost / outline */
  --fxa-btn-ghost-color:       var(--fxa-body-color);
  --fxa-btn-ghost-border:      var(--fxa-border-color);
  --fxa-btn-ghost-hover-color: var(--fxa-primary);
  --fxa-btn-ghost-hover-border: var(--fxa-primary);
  --fxa-btn-ghost-hover-bg:    var(--fxa-primary-subtle);
}


/* ----------------------------------------------------------
 * Badges
 * ---------------------------------------------------------- */
:root {
  --fxa-badge-font-family:    var(--fxa-font-family-mono);
  --fxa-badge-font-size:      0.67rem;
  --fxa-badge-font-weight:    var(--fxa-font-weight-medium);
  --fxa-badge-letter-spacing: 0.07em;
  --fxa-badge-padding:        0.2rem 0.6rem;
  --fxa-badge-border-radius:  var(--fxa-border-radius-pill);

  /* Lime — tag de tecnología */
  --fxa-badge-lime-color:    var(--fxa-primary);
  --fxa-badge-lime-bg:       var(--fxa-primary-subtle);
  --fxa-badge-lime-border:   rgba(181, 212, 48, 0.18);

  /* Cat — categoría sólida */
  --fxa-badge-cat-color:     var(--fxa-color-black);
  --fxa-badge-cat-bg:        var(--fxa-primary);
}


/* ----------------------------------------------------------
 * Clientes — browser chrome mock
 * ---------------------------------------------------------- */
:root {
  --fxa-browser-bg:              rgba(8, 8, 8, 0.95);
  --fxa-browser-border:          rgba(255, 255, 255, 0.05);
  --fxa-browser-url-bg:          rgba(255, 255, 255, 0.05);
  --fxa-browser-url-color:       var(--fxa-muted-color);
  --fxa-browser-dot-r:           var(--fxa-color-danger);
  --fxa-browser-dot-y:           var(--fxa-color-warning);
  --fxa-browser-dot-g:           var(--fxa-color-success);

  --fxa-screenshot-filter:       saturate(0.7) brightness(0.85);
  --fxa-screenshot-hover-filter: saturate(1) brightness(1);
  --fxa-screenshot-height:       190px;

  --fxa-client-overlay-bg:   rgba(181, 212, 48, 0.05);
  --fxa-visit-btn-color:     var(--fxa-color-black);
  --fxa-visit-btn-bg:        var(--fxa-primary);
}


/* ----------------------------------------------------------
 * Proceso
 * ---------------------------------------------------------- */
:root {
  --fxa-process-icon-color:      var(--fxa-primary);
  --fxa-process-num-color:       var(--fxa-primary);
  --fxa-process-num-family:      var(--fxa-font-family-mono);
  --fxa-process-connector-color: rgba(181, 212, 48, 0.28);
}


/* ----------------------------------------------------------
 * Contacto — info lateral
 * ---------------------------------------------------------- */
:root {
  --fxa-cinfo-icon-bg:       var(--fxa-primary-subtle);
  --fxa-cinfo-icon-border:   rgba(181, 212, 48, 0.16);
  --fxa-cinfo-icon-color:    var(--fxa-primary);
  --fxa-cinfo-label-color:   var(--fxa-muted-color);
}


/* ----------------------------------------------------------
 * Footer
 * ---------------------------------------------------------- */
:root {
  --fxa-footer-bg:           var(--fxa-body-bg);
  --fxa-footer-border:       var(--fxa-border-color);
  --fxa-footer-color:        var(--fxa-muted-color);
  --fxa-footer-link-color:   var(--fxa-muted-color);
  --fxa-footer-link-hover:   var(--fxa-primary);
}


/* ----------------------------------------------------------
 * Loader
 * ---------------------------------------------------------- */
:root {
  --fxa-loader-bg:           var(--fxa-body-bg);
  --fxa-loader-track-bg:     var(--fxa-border-color);
  --fxa-loader-bar-color:    var(--fxa-primary);
  --fxa-loader-text-color:   var(--fxa-primary);
}


/* ----------------------------------------------------------
 * Scrollbar
 * ---------------------------------------------------------- */
:root {
  --fxa-scrollbar-width:     5px;
  --fxa-scrollbar-thumb:     var(--fxa-primary);
  --fxa-scrollbar-track:     var(--fxa-body-bg);
}


/* ----------------------------------------------------------
 * Animaciones — duraciones y easings
 * ---------------------------------------------------------- */
:root {
  --fxa-transition-fast:     0.15s ease;
  --fxa-transition-base:     0.25s ease;
  --fxa-transition-slow:     0.38s cubic-bezier(0.77, 0, 0.18, 1);

  --fxa-anim-float-duration:  6s;
  --fxa-anim-float-distance: -14px;
  --fxa-anim-orbit-duration:  28s;
  --fxa-anim-blink-duration:  1.6s;
  --fxa-anim-loader-duration: 1.1s;
}


/* ==============================================================
 * TEMAS ALTERNATIVOS
 *
 * Activar con data-theme en <html> — sin tocar ningún otro CSS.
 * Solo se sobreescriben los tokens que cambian respecto al default.
 * ============================================================== */


/* ----------------------------------------------------------
 * [data-theme="light"] — Claro corporativo
 * Paleta invertida: fondo blanco, texto oscuro, acento lima.
 * ---------------------------------------------------------- */
[data-theme="light"] {
  /* Superficies */
  --fxa-body-bg:             #f5f5f5;
  --fxa-body-color:          #333333;
  --fxa-surface-1:           #ffffff;
  --fxa-surface-2:           #ffffff;
  --fxa-surface-3:           #f0f0f0;
  --fxa-heading-color:       #111111;
  --fxa-muted-color:         #666666;

  /* Bordes */
  --fxa-border-color:        rgba(0, 0, 0, 0.1);
  --fxa-border-color-accent: rgba(143, 170, 26, 0.4);

  /* Sombras */
  --fxa-shadow:              0 4px 16px rgba(0, 0, 0, 0.08);
  --fxa-shadow-lg:           0 16px 48px rgba(0, 0, 0, 0.12);
  --fxa-shadow-focus:        0 0 0 3px rgba(143, 170, 26, 0.18);

  /* Navbar */
  --fxa-navbar-bg:           rgba(255, 255, 255, 0.95);
  --fxa-navbar-border:       rgba(0, 0, 0, 0.08);
  --fxa-nav-link-color:      #555555;
  --fxa-nav-link-hover-bg:   rgba(143, 170, 26, 0.08);

  /* Hamburguesa */
  --fxa-ham-bg:              #ffffff;
  --fxa-ham-border:          rgba(0, 0, 0, 0.12);
  --fxa-ham-glow:            rgba(143, 170, 26, 0.18);
  --fxa-ham-scan-color:      rgba(143, 170, 26, 0.1);

  /* Hero */
  --fxa-hero-grid-color:     rgba(143, 170, 26, 0.06);
  --fxa-hero-glow-color:     rgba(143, 170, 26, 0.08);
  --fxa-logo-wrap-bg:        rgba(143, 170, 26, 0.07);
  --fxa-logo-wrap-border:    rgba(143, 170, 26, 0.18);
  --fxa-logo-orbit-border:   rgba(143, 170, 26, 0.12);

  /* Cards */
  --fxa-card-bg:             #ffffff;
  --fxa-card-border:         rgba(0, 0, 0, 0.08);
  --fxa-card-shadow:         0 1px 4px rgba(0, 0, 0, 0.06);
  --fxa-card-hover-shadow:   0 12px 36px rgba(0, 0, 0, 0.12);

  /* Secciones */
  --fxa-bg-section-a:        #f5f5f5;
  --fxa-bg-section-b:        #ffffff;
  --fxa-divider-color:       rgba(143, 170, 26, 0.3);

  /* Formularios */
  --fxa-input-bg:            #ffffff;
  --fxa-input-border:        rgba(0, 0, 0, 0.15);
  --fxa-input-color:         #333333;
  --fxa-input-placeholder:   #aaaaaa;
  --fxa-input-focus-shadow:  0 0 0 3px rgba(143, 170, 26, 0.15);

  /* Browser chrome */
  --fxa-browser-bg:          rgba(240, 240, 240, 0.95);
  --fxa-browser-border:      rgba(0, 0, 0, 0.08);
  --fxa-browser-url-bg:      rgba(0, 0, 0, 0.05);
  --fxa-browser-url-color:   #888888;

  /* Footer */
  --fxa-footer-bg:           #ffffff;
  --fxa-footer-border:       rgba(0, 0, 0, 0.08);

  /* Loader */
  --fxa-loader-bg:           #f5f5f5;
  --fxa-loader-track-bg:     rgba(0, 0, 0, 0.1);

  /* Scrollbar */
  --fxa-scrollbar-thumb:     #cccccc;
  --fxa-scrollbar-track:     #f5f5f5;
}


/* ----------------------------------------------------------
 * [data-theme="ocean"] — Oscuro azul cian
 * Misma estructura dark, acento #00d4ff.
 * ---------------------------------------------------------- */
[data-theme="ocean"] {
  /* Acento */
  --fxa-primary:             #00d4ff;
  --fxa-primary-rgb:         0, 212, 255;
  --fxa-primary-subtle:      rgba(0, 212, 255, 0.08);
  --fxa-primary-emphasis:    #0099bb;

  /* Superficies */
  --fxa-body-bg:             #080c10;
  --fxa-surface-1:           #0d1117;
  --fxa-surface-2:           #131920;
  --fxa-surface-3:           #1a2230;

  /* Bordes */
  --fxa-border-color:        rgba(0, 212, 255, 0.08);
  --fxa-border-color-accent: rgba(0, 212, 255, 0.25);

  /* Sombras */
  --fxa-shadow-accent:       0 8px 28px rgba(0, 212, 255, 0.2);
  --fxa-shadow-focus:        0 0 0 3px rgba(0, 212, 255, 0.15);

  /* Navbar */
  --fxa-navbar-bg:           rgba(8, 12, 16, 0.92);
  --fxa-navbar-border:       rgba(0, 212, 255, 0.08);

  /* Hamburguesa */
  --fxa-ham-color:           #00d4ff;
  --fxa-ham-bg:              #131920;
  --fxa-ham-border:          rgba(0, 212, 255, 0.12);
  --fxa-ham-hover-border:    #00d4ff;
  --fxa-ham-glow:            rgba(0, 212, 255, 0.2);
  --fxa-ham-scan-color:      rgba(0, 212, 255, 0.1);

  /* Hero */
  --fxa-hero-grid-color:     rgba(0, 212, 255, 0.04);
  --fxa-hero-glow-color:     rgba(0, 212, 255, 0.09);
  --fxa-hero-accent-color:   #00d4ff;
  --fxa-hero-tag-bg:         rgba(0, 212, 255, 0.08);
  --fxa-hero-tag-border:     rgba(0, 212, 255, 0.22);
  --fxa-hero-tag-color:      #00d4ff;
  --fxa-hero-stat-num-color: #00d4ff;
  --fxa-logo-wrap-bg:        rgba(0, 212, 255, 0.06);
  --fxa-logo-wrap-border:    rgba(0, 212, 255, 0.12);
  --fxa-logo-orbit-border:   rgba(0, 212, 255, 0.1);
  --fxa-logo-dot-color:      #00d4ff;
  --fxa-logo-dot-glow:       rgba(0, 212, 255, 0.9);

  /* Secciones */
  --fxa-divider-color:       rgba(0, 212, 255, 0.25);
  --fxa-section-tag-color:   #00d4ff;

  /* Cards */
  --fxa-card-hover-border:   rgba(0, 212, 255, 0.28);
  --fxa-card-accent-color:   #00d4ff;

  /* Badges */
  --fxa-badge-lime-color:    #00d4ff;
  --fxa-badge-lime-bg:       rgba(0, 212, 255, 0.08);
  --fxa-badge-lime-border:   rgba(0, 212, 255, 0.2);
  --fxa-badge-cat-color:     #080c10;
  --fxa-badge-cat-bg:        #00d4ff;

  /* Proceso */
  --fxa-process-icon-color:      #00d4ff;
  --fxa-process-num-color:       #00d4ff;
  --fxa-process-connector-color: rgba(0, 212, 255, 0.28);

  /* Contacto */
  --fxa-cinfo-icon-bg:       rgba(0, 212, 255, 0.08);
  --fxa-cinfo-icon-border:   rgba(0, 212, 255, 0.16);
  --fxa-cinfo-icon-color:    #00d4ff;

  /* Botones */
  --fxa-btn-primary-bg:      #00d4ff;
  --fxa-btn-primary-color:   #080c10;
  --fxa-btn-primary-hover-bg: #0099bb;
  --fxa-btn-primary-shadow:  0 8px 28px rgba(0, 212, 255, 0.2);

  /* Scrollbar / Loader */
  --fxa-loader-bg:           #080c10;
  --fxa-loader-bar-color:    #00d4ff;
  --fxa-loader-text-color:   #00d4ff;
  --fxa-scrollbar-thumb:     #00d4ff;
  --fxa-scrollbar-track:     #080c10;
}


/* ----------------------------------------------------------
 * [data-theme="ember"] — Oscuro naranja fuego
 * Oscuro cálido con acento #ff6b35.
 * ---------------------------------------------------------- */
[data-theme="ember"] {
  /* Acento */
  --fxa-primary:             #ff6b35;
  --fxa-primary-rgb:         255, 107, 53;
  --fxa-primary-subtle:      rgba(255, 107, 53, 0.08);
  --fxa-primary-emphasis:    #cc4a1a;

  /* Superficies */
  --fxa-body-bg:             #0d0905;
  --fxa-surface-1:           #130e08;
  --fxa-surface-2:           #1a1209;
  --fxa-surface-3:           #241a0e;

  /* Bordes */
  --fxa-border-color:        rgba(255, 107, 53, 0.1);
  --fxa-border-color-accent: rgba(255, 107, 53, 0.28);

  /* Sombras */
  --fxa-shadow-accent:       0 8px 28px rgba(255, 107, 53, 0.22);
  --fxa-shadow-focus:        0 0 0 3px rgba(255, 107, 53, 0.15);

  /* Navbar */
  --fxa-navbar-bg:           rgba(13, 9, 5, 0.92);
  --fxa-navbar-border:       rgba(255, 107, 53, 0.1);

  /* Hamburguesa */
  --fxa-ham-color:           #ff6b35;
  --fxa-ham-bg:              #1a1209;
  --fxa-ham-border:          rgba(255, 107, 53, 0.15);
  --fxa-ham-hover-border:    #ff6b35;
  --fxa-ham-glow:            rgba(255, 107, 53, 0.22);
  --fxa-ham-scan-color:      rgba(255, 107, 53, 0.1);

  /* Hero */
  --fxa-hero-grid-color:     rgba(255, 107, 53, 0.04);
  --fxa-hero-glow-color:     rgba(255, 107, 53, 0.1);
  --fxa-hero-accent-color:   #ff6b35;
  --fxa-hero-tag-bg:         rgba(255, 107, 53, 0.08);
  --fxa-hero-tag-border:     rgba(255, 107, 53, 0.22);
  --fxa-hero-tag-color:      #ff6b35;
  --fxa-hero-stat-num-color: #ff6b35;
  --fxa-logo-wrap-bg:        rgba(255, 107, 53, 0.06);
  --fxa-logo-wrap-border:    rgba(255, 107, 53, 0.14);
  --fxa-logo-orbit-border:   rgba(255, 107, 53, 0.1);
  --fxa-logo-dot-color:      #ff6b35;
  --fxa-logo-dot-glow:       rgba(255, 107, 53, 0.85);

  /* Secciones */
  --fxa-divider-color:       rgba(255, 107, 53, 0.28);
  --fxa-section-tag-color:   #ff6b35;

  /* Cards */
  --fxa-card-hover-border:   rgba(255, 107, 53, 0.3);
  --fxa-card-accent-color:   #ff6b35;

  /* Badges */
  --fxa-badge-lime-color:    #ff6b35;
  --fxa-badge-lime-bg:       rgba(255, 107, 53, 0.08);
  --fxa-badge-lime-border:   rgba(255, 107, 53, 0.2);
  --fxa-badge-cat-color:     #0d0905;
  --fxa-badge-cat-bg:        #ff6b35;

  /* Proceso */
  --fxa-process-icon-color:      #ff6b35;
  --fxa-process-num-color:       #ff6b35;
  --fxa-process-connector-color: rgba(255, 107, 53, 0.28);

  /* Contacto */
  --fxa-cinfo-icon-bg:       rgba(255, 107, 53, 0.08);
  --fxa-cinfo-icon-border:   rgba(255, 107, 53, 0.16);
  --fxa-cinfo-icon-color:    #ff6b35;

  /* Botones */
  --fxa-btn-primary-bg:      #ff6b35;
  --fxa-btn-primary-color:   #0d0905;
  --fxa-btn-primary-hover-bg: #cc4a1a;
  --fxa-btn-primary-shadow:  0 8px 28px rgba(255, 107, 53, 0.22);

  /* Scrollbar / Loader */
  --fxa-loader-bg:           #0d0905;
  --fxa-loader-bar-color:    #ff6b35;
  --fxa-loader-text-color:   #ff6b35;
  --fxa-scrollbar-thumb:     #ff6b35;
  --fxa-scrollbar-track:     #0d0905;
}