/* ============================================================
 * Innovación Digital — customs.css
 * Tus ajustes propios, overrides puntuales y clases extra.
 *
 * CUÁNDO USAR ESTE ARCHIVO:
 *   · Para ajustes visuales que NO justifican modificar root.css
 *     (ej: un componente puntual con un color diferente).
 *   · Para aplicar un tema distinto a una sección específica
 *     sin cambiar el tema global (scope local de variables).
 *   · Para clases utilitarias propias del proyecto.
 *   · Para sobreescribir el comportamiento de hover de cards
 *     en zonas concretas.
 *
 * CÓMO CAMBIAR TEMA DE UNA SECCIÓN ENTERA:
 *   Reescribí los tokens --fxa-* sobre el selector del bloque.
 *   Ejemplo — sección "clientes" con acento naranja:
 *
 *   #clientes {
 *     --fxa-primary:           #ff8c42;
 *     --fxa-primary-rgb:       255, 140, 66;
 *     --fxa-primary-subtle:    rgba(255, 140, 66, 0.08);
 *     --fxa-primary-emphasis:  #cc6a20;
 *     --fxa-section-tag-color: #ff8c42;
 *     --fxa-divider-color:     rgba(255, 140, 66, 0.3);
 *   }
 *
 * CÓMO CAMBIAR TEMA GLOBAL POR 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
 *
 * TEMAS DISPONIBLES (definidos en root.css):
 *   (sin atributo)          → oscuro tech lima  [default]
 *   data-theme="light"      → claro corporativo
 *   data-theme="ocean"      → oscuro azul cian
 *   data-theme="ember"      → oscuro naranja fuego
 * ============================================================ */


/* ----------------------------------------------------------
 * Ejemplo A: sidebar de hero con tema navy (como FlexAdmin dark)
 *
 * .id-hero {
 *   --fxa-body-bg:      #1e2a4a;
 *   --fxa-bg-section-a: #1e2a4a;
 *   --fxa-heading-color: #ffffff;
 *   --fxa-muted-color:  rgba(255,255,255,0.6);
 *   --fxa-border-color: rgba(255,255,255,0.08);
 * }
 * ---------------------------------------------------------- */


/* ----------------------------------------------------------
 * Ejemplo B: override de cards en una sección específica
 *
 * #servicios .card {
 *   --fxa-card-bg:         #0d1117;
 *   --fxa-card-border:     rgba(0,212,255,0.1);
 *   --fxa-card-hover-border: rgba(0,212,255,0.35);
 *   --fxa-card-accent-color: #00d4ff;
 * }
 * ---------------------------------------------------------- */


/* ----------------------------------------------------------
 * Ejemplo C: deshabilitar el hover lift en las why-cards
 *
 * #por-que .card {
 *   --fxa-card-hover-lift: 0;
 *   --fxa-card-hover-shadow: none;
 * }
 * ---------------------------------------------------------- */


/* ── Tus clases custom van acá abajo ─────────────────────── */