/* ==========================================

   ESTILOS GENERALES Y VARIABLES (GLOBAL) - SWISS PRECISION

========================================== */



:root {

    /* Tipografía Suiza de Alto Rendimiento */

    --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;



    /* Paleta Oficial ACE (Extraída de Manual y Catálogo 2026) */

    --ace-navy: #081C35;

    --ace-navy-deep: #051224;

    --ace-blue-primary: #013F7B;

    --ace-blue-accent: #0260A8;

    --ace-blue-steel: #4475A8;

    --ace-blue-ice: #D9E7F1;

    --ace-amber: #FDBD06;

    --ace-bronze: #B68763;

    --ace-gray-tech: #9EA1A3;



    /* Superficies Suizas Minimalistas */

    --surface-pure: #FFFFFF;

    --surface-muted: #F8FAFC;

    --surface-card: #FFFFFF;

    --border-light: #E2E8F0;

    --border-subtle: rgba(255, 255, 255, 0.12);

    --text-main: #0F172A;

    --text-muted: #64748B;

    --text-light: #F1F5F9;



    /* Variables de compatibilidad para componentes existentes */

    --blue: var(--ace-blue-accent);

    --primary: var(--ace-blue-primary);

    --secondary: var(--ace-blue-steel);

    --success: #10B981;

    --warning: var(--ace-amber);

    --danger: #EF4444;

    --white: #FFFFFF;

    --bg: var(--ace-navy);

    --bg-ace: var(--surface-muted);

    --bg-Ace-content: var(--surface-muted);

    --headerTop: var(--ace-navy);

    --subMenu: var(--ace-navy);

    --titlePrimary: var(--ace-blue-primary);

    --titleSecundary: var(--ace-navy);

    --titleThird: #0B284B;

    --services: var(--ace-blue-steel);

    --grayLight: #F1F5F9;

    --orange: var(--ace-amber);

    --energy: var(--ace-amber);

    --energy-bg: rgba(1, 63, 123, 0.9);

    --linkHover: #38BDF8;

    --gray1: #F8FAFC;

    --gray2: #E2E8F0;

    --gray3: #334155;

    --gray4: #64748B;

    --socialLinks: solid rgba(255, 255, 255, 0.15);

    --FooterBg: var(--ace-navy);

    --FooterTitle: #F1F5F9;

    --FooterEnd: var(--ace-navy-deep);

}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

}



body {

    font-family: var(--font-body);

    background: var(--surface-muted);

    color: var(--text-main);

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    letter-spacing: -0.011em;

}



h1, h2, h3, h4, h5, h6, .nav-link, .btn, .footer_title {

    font-family: var(--font-heading);

    letter-spacing: -0.02em;

}



/* ==========================================

   SUBMENÚ NAVEGACIÓN - SWISS PRECISION

========================================== */



.submenu {

    background-color: var(--ace-navy);

    position: relative;

    z-index: 99;

}



.submenu__sticky {

    position: sticky;

    top: 90px;

    z-index: 90;

    width: 100%;

    padding: 10px 20px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    background-color: rgba(8, 28, 53, 0.96);

    backdrop-filter: blur(10px);

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 6px;

    flex-wrap: wrap;

    transition: top 0.3s ease;

}



.submenu-track {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    width: 100%;

}



.submenu__link {

    position: relative;

    display: inline-flex;

    align-items: center;

    text-decoration: none !important;

    font-family: var(--font-heading);

    font-size: 0.8rem;

    font-weight: 600;

    letter-spacing: 0.03em;

    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.7);

    padding: 6px 14px;

    border-radius: 4px;

    border: 1px solid transparent;

    transition: all 0.2s ease;

    white-space: nowrap;

}



.submenu__link:hover {

    color: #FFFFFF;

    background: rgba(255, 255, 255, 0.08);

}



.submenu__link--active {

    color: #FFFFFF !important;

    background: rgba(2, 96, 168, 0.25) !important;

    border-color: rgba(56, 189, 248, 0.35) !important;

}



.submenu__link:after {

    display: none;

}



@media (max-width: 768px) {

    .submenu__sticky {

        top: 58px !important;

        padding: 8px 12px !important;

        justify-content: flex-start !important;

        overflow-x: auto !important;

        -webkit-overflow-scrolling: touch !important;

        scrollbar-width: none !important;

    }

    .submenu__sticky::-webkit-scrollbar {

        display: none !important;

    }



    .submenu-track {

        justify-content: flex-start !important;

        flex-wrap: nowrap !important;

        gap: 6px !important;

        width: max-content !important;

    }



    .submenu__link {

        flex-shrink: 0 !important;

        white-space: nowrap !important;

        padding: 5px 12px !important;

        font-size: 0.74rem !important;

        border-radius: 9999px !important;

    }

}



/* ==========================================

   ESTILOS CABECERA (HEADER)

========================================== */



.header-container {

    position: relative;

    width: 100%;

    height: 0.1vh;

    overflow: hidden;

    z-index: 999;

    background-size: cover;

    background-position: center;

}



.header-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    pointer-events: none;

    z-index: 1;

}



header {

    position: fixed;

    top: 0;

    width: 100%;

    z-index: 999;

    background: transparent;

    transition: background 0.3s ease;

}



    header.header--fixed {

        position: fixed;

        top: 0;

        width: 100%;

        z-index: 999;

        background: rgba(8, 28, 53, 0.95);

        backdrop-filter: blur(12px);

        border-bottom: 1px solid rgba(255, 255, 255, 0.08);

        transition: top 0.3s ease, background-color 0.3s ease;

    }



    header::before {

        display: none;

    }



nav.navbar {

    background: transparent !important;

    min-height: 72px;

    padding: 8px 16px;

}



.header-top {

    padding: 6px 32px;

    background: var(--ace-navy-deep);

    border-bottom: 1px solid rgba(255, 255, 255, 0.05);

    margin: 0;

}



.header-top-right a {

    color: rgba(255, 255, 255, 0.65);

    font-size: 14px;

    text-decoration: none;

    transition: color 0.2s ease;

}



    .header-top-right a:hover {

        color: #38BDF8;

    }



.lenjuage-btn {

    background: transparent;

    border: none;

    cursor: pointer;

    padding: 0;

    display: flex;

    align-items: center;

    transition: transform 0.2s ease;

    margin-left: 0;

}



    .lenjuage-btn:hover {

        transform: scale(1.05);

    }



.flag {

    width: 24px;

    height: 16px;

    object-fit: cover;

    border-radius: 2px;

    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);

}



#navbarScroll {

    display: flex;

    justify-content: flex-end;

    align-items: center;

    margin-top: 0;

    flex-wrap: wrap;

    color: #FFFFFF;

}



.logo-container {

    margin-bottom: 0;

    margin-left: 10px;

    display: flex;

    align-items: center;

}



.nabvar-brand-Ace img {

    position: relative;

    z-index: 999;

    width: 24vh;

    height: auto;

}



.link {

    color: var(--white);

    font-size: 20px;

    margin: 0 4px;

    transition: transform 0.3s, color 0.3s;

}



    .link:hover {

        color: var(--linkHover);

        transform: scale(1.2);

    }



.dropdown-submenu {

    position: relative;

}



    .dropdown-submenu > .dropdown-menu {

        top: 0;

        left: 100%;

        margin-top: -6px;

        margin-left: -1px;

        border-radius: 0 6px 6px 6px;

    }



    .dropdown-submenu:hover > .dropdown-menu {

        display: block;

    }



    .dropdown-submenu > a:after {

        display: block;

        content: " ";

        float: right;

        width: 0;

        height: 0;

        border-color: transparent;

        border-style: solid;

        border-width: 5px 0 5px 5px;

        border-left-color: #ccc;

        margin-top: 5px;

        margin-right: -10px;

    }



    .dropdown-submenu:hover > a:after {

        border-left-color: #fff;

    }



    .dropdown-submenu.pull-left {

        float: none;

    }



        .dropdown-submenu.pull-left > .dropdown-menu {

            left: -100%;

            margin-left: 10px;

            border-radius: 6px 0 6px 6px;

        }



/* ==========================================

   ÍTEM NOTICIAS & DIVISOR EN NAVBAR

========================================== */

.nav-item-noticias {

    display: inline-flex;

    align-items: center;

}



.nav-link-noticias {

    display: inline-flex !important;

    align-items: center !important;

    gap: 6px !important;

    padding: 6px 12px !important;

    border-radius: 6px !important;

    color: #7DD3FC !important;

    background: rgba(56, 189, 248, 0.08) !important;

    border: 1px solid rgba(56, 189, 248, 0.22) !important;

    font-weight: 600 !important;

    font-size: 0.85rem !important;

    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;

}



.nav-link-noticias i {

    font-size: 0.92rem;

    color: #38BDF8;

    transition: transform 0.2s ease;

}



.nav-link-noticias:hover {

    color: #FFFFFF !important;

    background: rgba(56, 189, 248, 0.2) !important;

    border-color: rgba(56, 189, 248, 0.5) !important;

    transform: translateY(-1px);

    box-shadow: 0 4px 12px rgba(2, 96, 168, 0.2);

}



.nav-link-noticias:hover i {

    transform: scale(1.1);

}



.nav-item-divider {

    display: inline-block;

    width: 1px;

    height: 18px;

    background: rgba(255, 255, 255, 0.22);

    margin: 0 8px;

    align-self: center;

}



/* ==========================================

   ÍTEM BILLER MINIMALISTA EN NAVBAR

========================================== */

.nav-item-biller {

    display: inline-flex;

    align-items: center;

    margin-left: 8px;

}



.nav-link-biller {

    display: inline-flex !important;

    align-items: center !important;

    gap: 7px !important;

    padding: 6px 14px !important;

    border-radius: 6px !important;

    background: rgba(2, 96, 168, 0.18) !important;

    border: 1px solid rgba(56, 189, 248, 0.3) !important;

    color: #FFFFFF !important;

    font-weight: 600 !important;

    font-size: 0.85rem !important;

    letter-spacing: 0.02em !important;

    text-decoration: none !important;

    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;

}



.nav-link-biller i {

    font-size: 0.95rem;

    color: #38bdf8;

    transition: transform 0.2s ease;

}



.nav-link-biller:hover {

    background: rgba(2, 96, 168, 0.35) !important;

    border-color: rgba(56, 189, 248, 0.6) !important;

    color: #FFFFFF !important;

    transform: translateY(-1px);

    box-shadow: 0 4px 14px rgba(2, 96, 168, 0.25);

}



.nav-link-biller:hover i {

    transform: rotate(15deg);

}



.biller-badge {

    font-family: var(--font-mono);

    font-size: 0.62rem;

    font-weight: 700;

    padding: 2px 6px;

    border-radius: 4px;

    background: rgba(56, 189, 248, 0.2);

    color: #7dd3fc;

    border: 1px solid rgba(56, 189, 248, 0.35);

    letter-spacing: 0.5px;

    text-transform: uppercase;

}



/* ==========================================

   ENLACES NAVEGACIÓN NAVBAR

========================================== */

.nav-link {

    color: rgba(255, 255, 255, 0.85) !important;

    font-family: var(--font-heading);

    font-weight: 500;

    font-size: 0.88rem;

    padding: 8px 12px !important;

    transition: color 0.2s ease, opacity 0.2s ease;

    text-decoration: none;

}



.nav-link:hover {

    color: #38BDF8 !important;

}



/* ==========================================

   OFFCANVAS DE DOS PANELES (MÓVIL) - SWISS PRECISION

========================================== */



.offcanvas,

.offcanvas.offcanvas-end {

    position: fixed !important;

    top: 0 !important;

    bottom: 0 !important;

    right: 0 !important;

    left: auto !important;

    width: 310px !important;

    max-width: 86vw !important;

    height: 100vh !important;

    height: 100dvh !important;

    max-height: 100dvh !important;

    background-color: #081C35 !important;

    color: var(--white) !important;

    transform: translateX(100%) !important;

    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.32s ease !important;

    z-index: 10500 !important;

    display: flex !important;

    flex-direction: column !important;

    padding: 0 !important;

    margin: 0 !important;

    border: none !important;

    border-left: 1px solid rgba(255, 255, 255, 0.12) !important;

    box-shadow: -10px 0 35px rgba(0, 0, 0, 0.55) !important;

    visibility: hidden !important;

    overflow: hidden !important;

}



    /* Mostrar Offcanvas */

    .offcanvas.show,

    .offcanvas.offcanvas-end.show {

        transform: translateX(0) !important;

        visibility: visible !important;

    }



/* Backdrop translúcido corporativo */

.offcanvas-backdrop-custom {

    position: fixed;

    top: 0;

    left: 0;

    width: 100vw;

    height: 100vh;

    height: 100dvh;

    background: rgba(5, 18, 36, 0.72);

    backdrop-filter: blur(4px);

    -webkit-backdrop-filter: blur(4px);

    z-index: 10490;

    opacity: 0;

    visibility: hidden;

    transition: opacity 0.3s ease, visibility 0.3s ease;

}



    .offcanvas-backdrop-custom.show {

        opacity: 1;

        visibility: visible;

    }



.offcanvas-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 1rem 1.25rem;

    height: 72px;

    min-height: 72px;

    flex-shrink: 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    background: rgba(0, 0, 0, 0.2);

}



.offcanvas-close-btn {

    background: transparent;

    border: none;

    color: rgba(255, 255, 255, 0.75);

    font-size: 1.25rem;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 36px;

    height: 36px;

    border-radius: 6px;

    transition: all 0.2s ease;

    padding: 0;

}



    .offcanvas-close-btn:hover {

        color: #FFFFFF;

        background: rgba(255, 255, 255, 0.12);

    }



/* --- TARJETA DE PERFIL (DENTRO DEL OFFCANVAS) --- */

.offcanvas-profile-section {

    margin-right: 10px;

    overflow: hidden;

}



.offcanvas-user-info {

    display: flex;

    align-items: center;

    gap: 12px;

    cursor: pointer;

    padding: 6px 10px;

    border-radius: 8px;

    transition: background 0.2s ease;

}



    .offcanvas-user-info:hover {

        background: rgba(255, 255, 255, 0.08);

    }



    .offcanvas-user-info i.bi-person-circle {

        font-size: 2rem;

        color: #38BDF8;

        flex-shrink: 0;

    }



    .offcanvas-user-info .user-text {

        display: flex;

        flex-direction: column;

        overflow: hidden;

    }



        .offcanvas-user-info .user-text .hello {

            font-size: 0.68rem;

            color: rgba(255, 255, 255, 0.55);

            text-transform: uppercase;

            font-weight: 700;

            letter-spacing: 0.05em;

            line-height: 1;

        }



        .offcanvas-user-info .user-text .name {

            font-size: 0.95rem;

            color: var(--white);

            font-weight: 700;

            line-height: 1.2;

            white-space: nowrap;

            overflow: hidden;

            text-overflow: ellipsis;

        }



    .offcanvas-user-info i.bi-chevron-right {

        font-size: 0.9rem;

        color: rgba(255, 255, 255, 0.45);

        flex-shrink: 0;

    }



/* Botón Iniciar Sesión para invitados */

.offcanvas-login-btn {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: var(--white);

    text-decoration: none;

    font-weight: 600;

    font-size: 0.9rem;

    padding: 7px 14px;

    border-radius: 8px;

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.15);

    transition: all 0.2s ease;

}



    .offcanvas-login-btn:hover {

        background: rgba(2, 96, 168, 0.4);

        border-color: #38BDF8;

        color: var(--white) !important;

    }



    .offcanvas-login-btn i {

        font-size: 1.1rem;

        color: #38BDF8;

    }



/* --- CONTENEDOR DESLIZABLE DE PANELES --- */

.offcanvas-body-wrapper {

    display: flex;

    width: 200%; /* Dos paneles uno al lado del otro */

    height: calc(100% - 72px); /* Alto total restando la cabecera */

    flex-grow: 1;

    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);

    overflow: hidden;

}



    /* Clase que gatilla el desplazamiento al Panel de Perfil */

    .offcanvas-body-wrapper.show-user-panel {

        transform: translateX(-50%); /* Desplaza para mostrar la segunda mitad */

    }



.offcanvas-panel {

    width: 50%;

    height: 100%;

    padding: 1.2rem 1.25rem 1.5rem 1.25rem;

    display: flex;

    flex-direction: column;

    overflow-y: auto;

    -webkit-overflow-scrolling: touch;

}



.offcanvas-panel .navbar-nav {

    display: flex;

    flex-direction: column;

    gap: 4px;

    width: 100%;

    margin-bottom: 1.5rem;

    list-style: none;

    padding-left: 0;

}



.offcanvas .nav-link {

    color: rgba(255, 255, 255, 0.88) !important;

    font-family: var(--font-heading);

    font-weight: 500;

    font-size: 0.92rem;

    padding: 10px 14px !important;

    text-decoration: none;

    display: flex;

    align-items: center;

    gap: 12px;

    border-radius: 8px;

    transition: background 0.18s ease, color 0.18s ease;

}



    .offcanvas .nav-link:hover,

    .offcanvas .nav-link:focus {

        color: #38BDF8 !important;

        background: rgba(255, 255, 255, 0.08);

    }



    .offcanvas .nav-link i {

        font-size: 1.05rem;

        color: #38BDF8;

        opacity: 0.9;

    }



.offcanvas-footer {

    margin-top: auto;

    padding-top: 1rem;

}



.offcanvas .header_topnav {

    border-top: 1px solid rgba(255, 255, 255, 0.1);

    padding-top: 12px;

}



.offcanvas a,

.offcanvas i {

    color: var(--white);

}



/* PANEL DE PERFIL (PANEL 2) */

.offcanvas-back-btn {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    background: transparent;

    border: none;

    color: #38BDF8;

    font-weight: 600;

    font-size: 0.92rem;

    cursor: pointer;

    padding: 0 0 12px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    margin-bottom: 16px;

    width: 100%;

    text-align: left;

    transition: color 0.2s ease;

}



    .offcanvas-back-btn:hover {

        color: var(--white);

    }



.panel-user-role {

    font-size: 0.75rem;

    color: rgba(255, 255, 255, 0.55);

    margin-bottom: 16px;

    text-transform: uppercase;

    letter-spacing: 0.06em;

    padding: 0 4px;

}



    .panel-user-role strong {

        color: #38BDF8;

    }



.user-menu-nav .nav-link i {

    color: #38BDF8;

    font-size: 1.1rem;

    transition: color 0.2s;

}



.user-menu-nav .nav-link:hover i {

    color: #FFFFFF;

}



/* --- MENÚ DE ESCRITORIO DROPDOWNS - SWISS PRECISION --- */

.dropdown-menu {

    padding: 6px !important;

    min-width: 15rem;

    background: #FFFFFF !important;

    border: 1px solid var(--border-light) !important;

    border-radius: 8px !important;

    box-shadow: 0 10px 25px -5px rgba(8, 28, 53, 0.12), 0 8px 10px -6px rgba(8, 28, 53, 0.04) !important;

}



.dropdown-item {

    display: block;

    font-family: var(--font-heading);

    font-size: 0.85rem;

    font-weight: 500;

    text-decoration: none;

    color: var(--text-main) !important;

    border-radius: 5px;

    padding: 8px 14px;

    border-bottom: none !important;

    transition: background-color 0.15s ease, color 0.15s ease;

}



.dropdown-item:hover {

    background: rgba(1, 63, 123, 0.08) !important;

    color: var(--ace-blue-primary) !important;

    border-right: none !important;

}



.dropdown-item:last-child {

    border-bottom: none !important;

}



/* ==========================================

   VISTA DE MÓVIL (NAVBAR HAMBURGUESA)

========================================== */



.navbar.d-lg-none {

    background-color: #081C35 !important;

    padding: 0.4rem 1rem;

    min-height: 58px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

}



.container-hamburger {

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

}



/* ==========================================

   BOTÓN NAVEGACIÓN HAMBURGUESA MINIMALISTA

========================================== */



/* ==========================================

   HEADER MÓVIL ESTILO HIGH-TECH ENERGY HUB

========================================== */

.ace-mobile-navbar {

    padding: 8px 16px;

    min-height: 58px;

    background: rgba(8, 28, 53, 0.96);

    backdrop-filter: blur(16px);

    border-bottom: 1px solid rgba(56, 189, 248, 0.18);

}



.ace-mobile-brand {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    text-decoration: none !important;

}



/* Logo original ajustado a escala móvil compacta */

.ace-mobile-logo-img {

    height: 36px;

    width: auto;

    max-width: 140px;

    object-fit: contain;

    display: block;

    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));

    transition: transform 0.2s ease;

}



.ace-mobile-brand:active .ace-mobile-logo-img {

    transform: scale(0.97);

}



.ace-mobile-flag {

    width: 24px;

    height: 16px;

    border-radius: 3px;

    object-fit: cover;

    border: 1px solid rgba(255, 255, 255, 0.2);

    display: block;

}



.ace-menu-toggle {

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.16);

    border-radius: 10px;

    color: var(--white);

    font-size: 1.25rem;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 36px;

    height: 36px;

    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);

}



.ace-menu-toggle:hover,

.ace-menu-toggle:active {

    background: rgba(56, 189, 248, 0.2);

    border-color: #38BDF8;

    color: #38BDF8;

    transform: scale(1.05);

}



/* --- BOTÓN LOGIN ESCRITORIO (OPCIÓN 2: GHOST MINIMALISTA) --- */

.ace-nav-login-btn {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    background: transparent;

    color: var(--white) !important;

    border: 1px solid rgba(255, 255, 255, 0.28);

    padding: 6px 16px;

    border-radius: 6px;

    font-family: var(--font-heading);

    font-weight: 600;

    font-size: 0.82rem;

    letter-spacing: 0.04em;

    text-transform: uppercase;

    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);

    text-decoration: none !important;

}



.ace-nav-login-btn i {

    font-size: 0.95rem;

    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);

}



.ace-nav-login-btn:hover {

    background: var(--white);

    color: var(--ace-navy) !important;

    border-color: var(--white);

    transform: translateY(-1px);

    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.2);

}



.ace-nav-login-btn:hover i {

    transform: translateX(3px);

}



/* --- BOTÓN LOGIN EN MÓVIL (OFFCANVAS) --- */

.offcanvas-login-btn {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: var(--white) !important;

    text-decoration: none;

    font-family: var(--font-heading);

    font-weight: 600;

    font-size: 0.88rem;

    padding: 7px 16px;

    border-radius: 6px;

    background: rgba(255, 255, 255, 0.06);

    border: 1px solid rgba(255, 255, 255, 0.2);

    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);

}



.offcanvas-login-btn:hover {

    background: var(--white);

    color: var(--ace-navy) !important;

    border-color: var(--white);

}



/* --- MENÚ DE USUARIO ESCRITORIO (OPCIÓN 2: GHOST MINIMALISTA) --- */

.ace-user-area {

    margin-left: 18px;

    display: flex;

    align-items: center;

}



.ace-user-menu {

    position: relative;

}



/* Botón disparador ultraligero */

.ace-user-button {

    background: rgba(255, 255, 255, 0.05);

    color: var(--white);

    border: 1px solid rgba(255, 255, 255, 0.12);

    padding: 6px 14px;

    cursor: pointer;

    border-radius: 50px;

    font-family: var(--font-heading);

    font-weight: 600;

    font-size: 0.84rem;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

}



.ace-user-button .ace-user-icon {

    font-size: 1.1rem;

    color: #38BDF8; /* Azul cielo sutil / cyan institucional */

    transition: transform 0.2s ease;

}



.ace-user-button .ace-user-name {

    color: var(--white);

    letter-spacing: -0.01em;

}



.ace-user-button .ace-user-chevron {

    font-size: 0.65rem;

    color: rgba(255, 255, 255, 0.55);

    margin-left: 2px;

    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;

}



.ace-user-button:hover,

.ace-user-menu:hover .ace-user-button,

.ace-user-menu.is-open .ace-user-button {

    background: rgba(255, 255, 255, 0.12);

    border-color: rgba(255, 255, 255, 0.28);

    color: var(--white);

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);

}



.ace-user-menu:hover .ace-user-chevron,

.ace-user-menu.is-open .ace-user-chevron {

    transform: rotate(180deg);

    color: var(--white);

}



/* Dropdown Swiss Minimalista - Dark Mode Brand ACE */

.ace-dropdown {

    display: none;

    position: absolute;

    right: 0;

    top: calc(100% + 8px);

    min-width: 250px;

    background: #0F172A; /* Slate 900 */

    border: 1px solid #1E293B; /* Slate 800 */

    border-radius: 12px;

    box-shadow: 0 20px 40px -4px rgba(0, 0, 0, 0.55), 0 4px 16px rgba(0, 0, 0, 0.25);

    z-index: 1050;

    padding: 8px 0;

    transform-origin: top right;

    animation: dropdownFade .2s cubic-bezier(0.16, 1, 0.3, 1);

    backdrop-filter: blur(16px);

}



/* Puente invisible para evitar que se pierda el hover */

.ace-dropdown::before {

    content: '';

    position: absolute;

    top: -10px;

    left: 0;

    right: 0;

    height: 10px;

}



@keyframes dropdownFade {

    from {

        opacity: 0;

        transform: scale(0.96) translateY(-6px);

    }

    to {

        opacity: 1;

        transform: scale(1) translateY(0);

    }

}



.ace-user-menu:hover .ace-dropdown,

.ace-user-menu.is-open .ace-dropdown {

    display: block;

}



.dropdown-header-info {

    padding: 8px 18px 10px;

    display: flex;

    flex-direction: column;

    gap: 3px;

    border-bottom: 1px solid #1E293B;

    margin-bottom: 6px;

}



.dropdown-header-info strong {

    color: #F8FAFC;

    font-family: var(--font-heading);

    font-size: 0.92rem;

    font-weight: 700;

    letter-spacing: -0.01em;

}



.dropdown-header-info .dropdown-user-role {

    display: inline-block;

    align-self: flex-start;

    color: #38BDF8;

    background: rgba(56, 189, 248, 0.12);

    border: 1px solid rgba(56, 189, 248, 0.25);

    font-family: var(--font-heading);

    font-size: 0.68rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    padding: 2px 8px;

    border-radius: 4px;

}



.dropdown-divider {

    margin: 6px 0;

    border-color: #1E293B;

    opacity: 1;

}



.ace-dropdown a {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 8px 18px;

    color: #CBD5E1;

    text-decoration: none;

    font-family: var(--font-heading);

    font-size: 0.84rem;

    font-weight: 600;

    transition: all 0.15s ease;

}



.ace-dropdown a i {

    font-size: 1rem;

    color: #38BDF8;

    transition: color 0.15s ease, transform 0.15s ease;

}



.ace-dropdown a:hover {

    background: rgba(56, 189, 248, 0.12);

    color: #38BDF8;

    padding-left: 21px;

}



.ace-dropdown a:hover i {

    color: #38BDF8;

    transform: translateX(2px);

}



.ace-dropdown a.text-danger {

    color: #F87171 !important;

}



.ace-dropdown a.text-danger i {

    color: #F87171;

}



.ace-dropdown a.text-danger:hover {

    background: rgba(220, 38, 38, 0.12);

    color: #EF4444 !important;

}



/* ==========================================

   ESTILOS GENERALES DE LA PÁGINA (MAIN)

========================================== */



/* ==========================================

   ESTILOS GENERALES DE LA PÁGINA (MAIN)

========================================== */



.ace-title {

    color: var(--ace-navy);

    font-family: var(--font-heading);

    font-weight: 800;

    letter-spacing: -0.025em;

    font-size: 2.2rem;

    line-height: 1.2;

}



.custom-underline {

    position: relative;

    display: block;

    text-align: center;

    width: 100%;

    margin-left: auto;

    margin-right: auto;

    margin-bottom: 24px;

}



.custom-underline::after {

    content: "";

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    bottom: -10px;

    width: 48px;

    height: 2px;

    background-color: var(--ace-blue-accent);

}



/* ==========================================

   PIE DE PÁGINA (FOOTER) - SWISS PRECISION (5 COLUMNAS)

========================================== */



.footer {

    background: #081C35;

    padding: 60px 0 0;

    border-top: 1px solid rgba(255, 255, 255, 0.08);

    color: #94A3B8;

}



.footer-grid-5 {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 32px;

}



.footer_title {

    display: inline-block;

    color: #FFFFFF !important;

    font-family: var(--font-heading);

    font-size: 0.82rem;

    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    text-decoration: none;

    margin-bottom: 6px;

}



.footer_accent_bar {

    width: 20px;

    height: 2px;

    background: #38BDF8;

    margin-bottom: 16px;

    border-radius: 1px;

}



.footer-links-list {

    list-style: none;

    padding: 0;

    margin: 0;

    display: flex;

    flex-direction: column;

    gap: 10px;

}



.footer-links-list li a {

    text-decoration: none;

    color: #94A3B8;

    font-family: var(--font-body);

    font-size: 0.82rem;

    font-weight: 400;

    display: inline-flex;

    align-items: center;

    transition: all 0.2s ease;

}



.footer-links-list li a:hover {

    color: #38BDF8 !important;

    transform: translateX(3px);

}



.footer-link-highlight {

    color: #7DD3FC !important;

    font-weight: 500 !important;

}



.footer-link-highlight:hover {

    color: #FFFFFF !important;

}



.footer-link-biller {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    color: #FFFFFF !important;

    font-weight: 600 !important;

}



.footer-badge-saas {

    display: inline-block;

    padding: 1px 6px;

    border-radius: 4px;

    background: rgba(56, 189, 248, 0.2);

    border: 1px solid rgba(56, 189, 248, 0.4);

    color: #7DD3FC;

    font-family: var(--font-mono, monospace);

    font-size: 0.65rem;

    font-weight: 700;

    letter-spacing: 0.05em;

}



/* Columna de Marca y Contacto */

.footer-col-brand {

    display: flex;

    flex-direction: column;

}



.footer-brand-Ace img {

    width: 140px;

    height: auto;

    transition: opacity 0.2s ease;

}



.footer-brand-Ace:hover img {

    opacity: 0.85;

}



.footer-contact-details {

    display: flex;

    flex-direction: column;

    gap: 6px;

    font-size: 0.82rem;

    color: #CBD5E1;

}



.footer-city {

    margin: 0 0 4px;

    font-size: 0.8rem;

    color: #94A3B8;

}



.footer-phone {

    font-family: var(--font-mono, monospace);

    font-size: 0.84rem;

    font-weight: 700;

    color: #38BDF8 !important;

    text-decoration: none;

    transition: color 0.15s ease;

}



.footer-phone:hover {

    color: #7DD3FC !important;

}



.footer-phone-sub {

    font-family: var(--font-mono, monospace);

    font-size: 0.78rem;

    color: #94A3B8 !important;

    text-decoration: none;

    transition: color 0.15s ease;

}



.footer-phone-sub:hover {

    color: #FFFFFF !important;

}



.footer-email {

    font-size: 0.76rem;

    color: #E2E8F0 !important;

    text-decoration: none;

    word-break: break-all;

    transition: color 0.15s ease;

}



.footer-email:hover {

    color: #38BDF8 !important;

}



.footer-social-wrap {

    display: flex;

    align-items: center;

    gap: 8px;

}



.footer-social-btn {

    width: 30px;

    height: 30px;

    border-radius: 6px;

    background: rgba(255, 255, 255, 0.06);

    border: 1px solid rgba(255, 255, 255, 0.1);

    color: #CBD5E1;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 0.85rem;

    text-decoration: none;

    transition: all 0.2s ease;

}



.footer-social-btn:hover {

    background: #0260A8;

    border-color: #0260A8;

    color: #FFFFFF;

    transform: translateY(-2px);

    box-shadow: 0 4px 10px rgba(2, 96, 168, 0.35);

}



.text-sky {

    color: #38BDF8 !important;

}



/* Sub-footer final */

.footer_final {

    background: #050C16 !important;

    margin-top: 45px;

    padding: 14px 0;

    border-top: 1px solid rgba(255, 255, 255, 0.06);

}



.footer-copyright {

    color: #94A3B8;

    font-size: 0.78rem;

    font-family: var(--font-mono, monospace);

}



.footer-legal-links a {

    color: #94A3B8;

    font-size: 0.78rem;

    text-decoration: none;

    transition: color 0.15s ease;

}



.footer-legal-links a:hover {

    color: #FFFFFF;

}



/* Responsive */

@media (max-width: 992px) {

    .footer-grid-5 {

        grid-template-columns: repeat(3, 1fr);

        gap: 28px;

    }

}



@media (max-width: 640px) {

    .footer-grid-5 {

        grid-template-columns: repeat(2, 1fr);

        gap: 24px;

    }



    .footer-col-brand {

        grid-column: span 2;

    }

}



@media (max-width: 480px) {

    .footer-grid-5 {

        grid-template-columns: 1fr;

    }



    .footer-col-brand {

        grid-column: span 1;

    }

}



/* ==========================================

   IMAGEN DE FONDO

========================================== */



.fondo {

    position: relative;

    overflow: hidden;

}



    .fondo img {

        width: 100%;

        max-height: 100vh;

        object-fit: cover;

        display: block;

    }



    .fondo::after {

        content: "";

        position: absolute;

        inset: 0;

        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.35) 35%, rgba(0, 0, 0, 0.55) 65%, rgba(0, 0, 0, 0.80) 85%, rgba(0, 0, 0, 1) 100%);

        pointer-events: none;

    }



.fondoSolutions {

    position: relative;

    overflow: hidden;

}



    .fondoSolutions img {

        width: 100%;

        max-height: 80vh;

        object-fit: cover;

        display: block;

    }



    .fondoSolutions::after {

        content: "";

        position: absolute;

        inset: 0;

        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.35) 35%, rgba(0, 0, 0, 0.55) 65%, rgba(0, 0, 0, 0.80) 85%, rgba(0, 0, 0, 1) 100%);

        pointer-events: none;

    }



.fondoBusiness {

    position: relative;

    overflow: hidden;

}



    .fondoBusiness img {

        width: 100%;

        max-height: 80vh;

        object-fit: cover;

        display: block;

    }



    .fondoBusiness::after {

        content: "";

        position: absolute;

        inset: 0;

        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.35) 35%, rgba(0, 0, 0, 0.55) 65%, rgba(0, 0, 0, 0.80) 85%, rgba(0, 0, 0, 1) 100%);

        pointer-events: none;

    }



/* ==========================================

   CORRECCIÓN RESPONSIVE DE VISIBILIDAD (992px)

========================================== */



@media (max-width: 991.98px) {

    .navbar.navbar-expand-lg {

        display: none !important;

    }



    .header-top {

        display: none !important;

    }

}



@media (min-width: 992px) {

    .navbar.d-lg-none {

        display: none !important;

    }



    .header_topnav {

        display: none !important;

    }

}





/* ==========================================

   FOOTER MÓVIL REVOLUCIONADO (ACORDEÓN & ACTION HUB)

========================================== */

.footer-mobile-wrap {

    display: flex;

    flex-direction: column;

    gap: 18px;

}



.footer-action-hub {

    background: rgba(255, 255, 255, 0.04);

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 14px;

    padding: 14px;

}



.footer-action-hub-title {

    font-family: var(--font-heading);

    font-size: 0.7rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    color: #38BDF8;

    margin-bottom: 10px;

    display: block;

}



.footer-action-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 8px;

    margin-bottom: 10px;

}



.footer-action-btn {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 10px 12px;

    border-radius: 10px;

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid rgba(255, 255, 255, 0.08);

    color: #FFFFFF !important;

    text-decoration: none !important;

    transition: all 0.2s ease;

}



.footer-action-btn:hover {

    background: rgba(255, 255, 255, 0.1);

    transform: translateY(-1px);

}



.footer-action-btn i {

    font-size: 1.15rem;

}



.footer-action-btn.whatsapp i {

    color: #22C55E;

}



.footer-action-btn.phone i {

    color: #FDBD06;

}



.footer-action-btn-text {

    display: flex;

    flex-direction: column;

}



.footer-action-label {

    font-size: 0.65rem;

    color: #94A3B8;

    line-height: 1;

}



.footer-action-value {

    font-size: 0.78rem;

    font-weight: 600;

    line-height: 1.2;

    margin-top: 2px;

}



.footer-action-cv {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 10px 14px;

    border-radius: 10px;

    background: rgba(56, 189, 248, 0.08);

    border: 1px solid rgba(56, 189, 248, 0.25);

    color: #7DD3FC !important;

    font-size: 0.8rem;

    font-weight: 600;

    text-decoration: none !important;

    transition: all 0.2s ease;

}



.footer-action-cv:hover {

    background: rgba(56, 189, 248, 0.16);

    color: #FFFFFF !important;

}



/* Acordeón Móvil */

.footer-accordion {

    --bs-accordion-bg: transparent;

    --bs-accordion-border-color: rgba(255, 255, 255, 0.08);

    display: flex;

    flex-direction: column;

    gap: 8px;

}



.footer-accordion .accordion-item {

    background: rgba(255, 255, 255, 0.02) !important;

    border: 1px solid rgba(255, 255, 255, 0.08) !important;

    border-radius: 10px !important;

    overflow: hidden;

}



.footer-accordion .accordion-button {

    background: transparent !important;

    color: #FFFFFF !important;

    font-family: var(--font-heading);

    font-size: 0.82rem;

    font-weight: 700;

    padding: 12px 14px;

    box-shadow: none !important;

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.footer-accordion .accordion-button:not(.collapsed) {

    background: rgba(255, 255, 255, 0.04) !important;

    color: #38BDF8 !important;

    border-bottom: 1px solid rgba(255, 255, 255, 0.06);

}



.footer-accordion .accordion-button::after {

    filter: invert(1) brightness(1.5);

    transform-origin: center;

    background-size: 0.8rem;

}



.footer-accordion .accordion-body {

    padding: 12px 14px 14px;

}



.footer-accordion .footer-links-list {

    gap: 8px;

}



.footer-accordion .footer-links-list li a {

    font-size: 0.82rem;

    padding: 4px 0;

}



.footer-mobile-brand img {

    max-height: 44px;

    width: auto;

}





/* ========================================================

   SISTEMA DE CONTROLES: TEMA (OSCURO / BLANCO) E IDIOMA

======================================================== */



/* Botón de tema en TopHeader */

.btn-theme-toggle {

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.18);

    color: #F8FAFC;

    border-radius: 20px;

    padding: 3px 12px;

    font-size: 0.8rem;

    display: inline-flex;

    align-items: center;

    cursor: pointer;

    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);

    line-height: 1.4;

    user-select: none;

}

.btn-theme-toggle:hover {

    background: rgba(56, 189, 248, 0.18);

    border-color: #38BDF8;

    color: #38BDF8;

    transform: translateY(-1px);

}

.btn-theme-toggle:active {

    transform: translateY(0);

}



/* Botón de tema en Barra de Menú Principal (Navbar Escritorio) */

.btn-theme-toggle-nav {

    width: 38px;

    height: 38px;

    border-radius: 50% !important;

    padding: 0 !important;

    justify-content: center;

    font-size: 1.05rem;

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.15);

}



/* Botón de bandera en Barra de Menú Principal */

.lenjuage-btn-nav {

    padding: 6px 8px;

    border-radius: 8px;

    background: rgba(255, 255, 255, 0.06);

    border: 1px solid rgba(255, 255, 255, 0.12);

    display: flex;

    align-items: center;

}

.lenjuage-btn-nav:hover {

    background: rgba(56, 189, 248, 0.15);

    border-color: #38BDF8;

}



/* Botón de tema en Barra Móvil */

.btn-theme-toggle-mobile {

    width: 36px;

    height: 36px;

    border-radius: 50% !important;

    padding: 0 !important;

    justify-content: center;

    font-size: 1rem;

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.15);

}



/* Cajetín de Tema en Menú Hamburguesa Drawer */

.drawer-theme-box {

    background: rgba(255, 255, 255, 0.06);

    border: 1px solid rgba(255, 255, 255, 0.12);

    transition: all 0.25s ease;

}

.btn-theme-toggle-drawer {

    background: linear-gradient(135deg, #0284C7, #2563EB);

    color: #FFFFFF !important;

    border: 1px solid rgba(56, 189, 248, 0.4);

    border-radius: 16px;

    padding: 4px 14px;

    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);

}

/* Logos dinámicos según el tema: La regla oficial de ACE mantiene el Navbar Dark Navy */
.ace-logo-dark {
    display: inline-block !important;
}

.ace-logo-light {
    display: none !important;
}

/* ========================================================
   REGLAS PARA GOOGLE TRANSLATE (LIMPIEZA VISUAL TOTAL)
   Eliminación del banner superior flotante y reseteo de margen
======================================================== */
.goog-te-banner-frame.skiptranslate,
.goog-te-banner-frame,
iframe.goog-te-banner-frame,
body > .skiptranslate,
body > div.skiptranslate,
iframe.skiptranslate,
[class*="goog-te-banner"],
[class*="VIpgJd"],
[id*="goog-gt-"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

body {
    top: 0px !important;
    position: static !important;
}

#google_translate_element {
    display: none !important;
}

.goog-tooltip,
.goog-tooltip:hover {
    display: none !important;
}

.goog-text-highlight {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.notranslate {
    translate: no !important;
}

/* ========================================================
   REGLA DE ORO DE MARCA ACE:
   EL NAVBAR Y EL TOPHEADER SIEMPRE SON AZUL MARINO CORPORATIVO
   (#081C35 / #051224) TANTO EN MODO CLARO COMO EN MODO OSCURO.
   EL FOOTER TAMBIÉN PERMANECE AZUL MARINO CORPORATIVO.
======================================================== */
header.header--fixed,
.header.header--fixed,
[data-theme="light"] header.header--fixed,
[data-theme="dark"] header.header--fixed {
    background: rgba(8, 28, 53, 0.96) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

.header-top,
[data-theme="light"] .header-top,
[data-theme="dark"] .header-top {
    background: #051224 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.nav-link,
[data-theme="light"] .nav-link,
[data-theme="dark"] .nav-link {
    color: #F8FAFC !important;
}

.nav-link:hover,
.nav-link.active,
[data-theme="light"] .nav-link:hover,
[data-theme="light"] .nav-link.active,
[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .nav-link.active {
    color: #38BDF8 !important;
}

.header-top-right a,
[data-theme="light"] .header-top-right a,
[data-theme="dark"] .header-top-right a {
    color: rgba(255, 255, 255, 0.8) !important;
}

.header-top-right a:hover,
[data-theme="light"] .header-top-right a:hover,
[data-theme="dark"] .header-top-right a:hover {
    color: #38BDF8 !important;
}

.header-top .lang-code,
.header-top .theme-text,
[data-theme="light"] .header-top .lang-code,
[data-theme="light"] .header-top .theme-text,
[data-theme="dark"] .header-top .lang-code,
[data-theme="dark"] .header-top .theme-text {
    color: #F8FAFC !important;
}

.header-top .btn-theme-toggle,
.header-top .lenjuage-btn,
[data-theme="light"] .header-top .btn-theme-toggle,
[data-theme="light"] .header-top .lenjuage-btn,
[data-theme="dark"] .header-top .btn-theme-toggle,
[data-theme="dark"] .header-top .lenjuage-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #F8FAFC !important;
}

.header-top .btn-theme-toggle:hover,
.header-top .lenjuage-btn:hover,
[data-theme="light"] .header-top .btn-theme-toggle:hover,
[data-theme="light"] .header-top .lenjuage-btn:hover,
[data-theme="dark"] .header-top .btn-theme-toggle:hover,
[data-theme="dark"] .header-top .lenjuage-btn:hover {
    background: rgba(56, 189, 248, 0.15) !important;
    border-color: #38BDF8 !important;
    color: #38BDF8 !important;
}

.ace-user-button,
[data-theme="light"] .ace-user-button,
[data-theme="dark"] .ace-user-button {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    color: #F8FAFC !important;
}

.ace-user-button:hover,
[data-theme="light"] .ace-user-button:hover,
[data-theme="dark"] .ace-user-button:hover {
    background: rgba(56, 189, 248, 0.18) !important;
    border-color: #38BDF8 !important;
    color: #FFFFFF !important;
}

.btn-theme-toggle-nav,
.btn-theme-toggle-mobile,
.lenjuage-btn-nav,
.ace-menu-toggle,
[data-theme="light"] .btn-theme-toggle-nav,
[data-theme="light"] .btn-theme-toggle-mobile,
[data-theme="light"] .lenjuage-btn-nav,
[data-theme="light"] .ace-menu-toggle,
[data-theme="dark"] .btn-theme-toggle-nav,
[data-theme="dark"] .btn-theme-toggle-mobile,
[data-theme="dark"] .lenjuage-btn-nav,
[data-theme="dark"] .ace-menu-toggle {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    color: #F8FAFC !important;
}

.ace-logo-dark,
[data-theme="light"] .ace-logo-dark,
[data-theme="dark"] .ace-logo-dark {
    display: inline-block !important;
}

.ace-logo-light,
[data-theme="light"] .ace-logo-light,
[data-theme="dark"] .ace-logo-light {
    display: none !important;
}

/* Menús Desplegables del Navbar (Siempre Slate 900 de Alto Contraste) */
.dropdown-menu,
.ace-dropdown,
[data-theme="light"] .dropdown-menu,
[data-theme="light"] .ace-dropdown,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .ace-dropdown {
    background: #0F172A !important;
    border: 1px solid #1E293B !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.55) !important;
    padding: 8px !important;
}

.dropdown-item,
.ace-dropdown a,
[data-theme="light"] .dropdown-item,
[data-theme="light"] .ace-dropdown a,
[data-theme="dark"] .dropdown-item,
[data-theme="dark"] .ace-dropdown a {
    color: #CBD5E1 !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    padding: 8px 14px !important;
    border-radius: 6px !important;
    transition: all 0.15s ease !important;
}

.dropdown-item:hover,
.dropdown-item:focus,
.ace-dropdown a:hover,
[data-theme="light"] .dropdown-item:hover,
[data-theme="light"] .dropdown-item:focus,
[data-theme="light"] .ace-dropdown a:hover,
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus,
[data-theme="dark"] .ace-dropdown a:hover {
    background: rgba(56, 189, 248, 0.15) !important;
    color: #38BDF8 !important;
    transform: translateX(3px) !important;
}

/* ========================================================
   MODO BLANCO / CLARO (LIGHT THEME)
======================================================== */
html[data-theme="light"] {
    --surface-pure: #FFFFFF;
    --surface-muted: #F8FAFC;
    --surface-card: #FFFFFF;
    --border-light: #E2E8F0;
    --text-main: #0F172A;
    --text-muted: #64748B;
    --bg-ace: #F8FAFC;
    --bg-Ace-content: #F8FAFC;
    --org-surface: #F8FAFC;
    --org-border: #E2E8F0;
    --org-text: #475569;
    --org-text-dark: #081C35;
    --sol-bg-muted: #F8FAFC;
    --sol-border: #E2E8F0;
    --sol-text-main: #0F172A;
    --sol-text-muted: #64748B;
    --negocios-surface: #F8FAFC;
    --negocios-border: #E2E8F0;
    --negocios-text: #475569;
    --negocios-text-dark: #081C35;
    color-scheme: light;
}

[data-theme="light"] body {
    background-color: #F8FAFC !important;
    color: #0F172A !important;
}

/* Secciones y contenedores en Modo Claro */
[data-theme="light"] .section-bg,
[data-theme="light"] .bg-light,
[data-theme="light"] .About-Us,
[data-theme="light"] .purpose-section,
[data-theme="light"] .modelo-section,
[data-theme="light"] .values-section,
[data-theme="light"] .soluciones-section,
[data-theme="light"] .mercado-section,
[data-theme="light"] .negocios-section,
[data-theme="light"] .sucursales-section,
[data-theme="light"] .contact-section {
    background-color: #FFFFFF !important;
    color: #0F172A !important;
}

[data-theme="light"] .card-SectionInfo,
[data-theme="light"] .business-section,
[data-theme="light"] .sol-products-section,
[data-theme="light"] .sol-services-section,
[data-theme="light"] .latest-news {
    background-color: #F8FAFC !important;
}

/* Tarjetas en Modo Claro */
[data-theme="light"] .card,
[data-theme="light"] .card-info,
[data-theme="light"] .content-card,
[data-theme="light"] .bento-company-card,
[data-theme="light"] .about-highlight-card,
[data-theme="light"] .pillar-card,
[data-theme="light"] .modelo-card,
[data-theme="light"] .purpose-card,
[data-theme="light"] .sol-product-card,
[data-theme="light"] .sol-srv-card,
[data-theme="light"] .sol-dual-card,
[data-theme="light"] .news-card,
[data-theme="light"] .biller-features-card,
[data-theme="light"] .biller-objective-card {
    background-color: #FFFFFF !important;
    border-color: #E2E8F0 !important;
    color: #0F172A !important;
}

/* Biller Features Card Text Overrides for Light Theme */
[data-theme="light"] .biller-features-card .card-header-title,
[data-theme="light"] .biller-features-card .card-header-title strong,
[data-theme="light"] .biller-features-card .features-card-list li strong {
    color: #081C35 !important;
}

[data-theme="light"] .biller-features-card .features-card-list li,
[data-theme="light"] .biller-features-card .features-card-list li span {
    color: #475569 !important;
}

[data-theme="light"] .biller-features-card .features-card-header,
[data-theme="light"] .biller-features-card .features-card-footer {
    border-color: #E2E8F0 !important;
}

[data-theme="light"] .biller-features-card .card-header-badge {
    color: #0284C7 !important;
    background-color: #E0F2FE !important;
    border-color: #BAE6FD !important;
}

[data-theme="light"] .biller-features-card i.text-sky {
    color: #0284C7 !important;
}


[data-theme="light"] .card-info h3 {
    color: var(--ace-blue-accent) !important;
}

[data-theme="light"] .card-info h4,
[data-theme="light"] .title-primary,
[data-theme="light"] .title-secundary,
[data-theme="light"] .section-main-title,
[data-theme="light"] .bento-brand-name,
[data-theme="light"] .pillar-title,
[data-theme="light"] .about-highlight-card strong {
    color: #081C35 !important;
}

[data-theme="light"] .card-info p,
[data-theme="light"] .bento-brand-desc,
[data-theme="light"] .pillar-desc {
    color: #475569 !important;
}

/* ========================================================
   OPCIÓN A: SLATE INDUSTRIAL TECH (MODO OSCURO GLOBAL DEFINITIVO)
   Paleta: Base #080C14 | Cards #0F172A | Elevados #1E293B | Bordes rgba(255,255,255,0.08)
   Acentos: Sky #38BDF8 & Electric Blue #0284C7 | Títulos #F8FAFC | Textos #CBD5E1
======================================================== */
html[data-theme="dark"] {
    background-color: #080C14 !important;
    color-scheme: dark;

    /* Superficies Principales */
    --surface-pure: #0F172A;
    --surface-muted: #080C14;
    --surface-card: #0F172A;
    --border-light: rgba(255, 255, 255, 0.08);
    --border-subtle: rgba(255, 255, 255, 0.08);

    /* Textos */
    --text-main: #F8FAFC;
    --text-muted: #94A3B8;

    /* Fondos Globales */
    --bg-ace: #080C14;
    --bg-Ace-content: #080C14;

    /* Compatibilidad con Organización */
    --org-surface: #080C14;
    --org-border: rgba(255, 255, 255, 0.08);
    --org-text: #CBD5E1;
    --org-text-dark: #F8FAFC;

    /* Compatibilidad con Soluciones */
    --sol-bg-muted: #080C14;
    --sol-border: rgba(255, 255, 255, 0.08);
    --sol-text-main: #F8FAFC;
    --sol-text-muted: #94A3B8;

    /* Compatibilidad con Negocios */
    --negocios-surface: #080C14;
    --negocios-border: rgba(255, 255, 255, 0.08);
    --negocios-text: #CBD5E1;
    --negocios-text-dark: #F8FAFC;
}

[data-theme="dark"] body {
    background-color: #080C14 !important;
    color: #CBD5E1 !important;
}

/* 1. SECCIONES Y CONTENEDORES PRINCIPALES (FONDO SLATE BASE #080C14) */
[data-theme="dark"] .section-bg,
[data-theme="dark"] .bg-light,
[data-theme="dark"] .About-Us,
[data-theme="dark"] .card-SectionInfo,
[data-theme="dark"] .purpose-section,
[data-theme="dark"] .modelo-section,
[data-theme="dark"] .values-section,
[data-theme="dark"] .history-section,
[data-theme="dark"] .team-section,
[data-theme="dark"] .social-responsibility-section,
[data-theme="dark"] .soluciones-section,
[data-theme="dark"] .sol-products-section,
[data-theme="dark"] .sol-services-section,
[data-theme="dark"] .sol-consultoria-section,
[data-theme="dark"] .sol-cv-section,
[data-theme="dark"] .mercado-section,
[data-theme="dark"] .asp,
[data-theme="dark"] .container-asp,
[data-theme="dark"] .negocios-section,
[data-theme="dark"] .business-section,
[data-theme="dark"] .group-philosophy,
[data-theme="dark"] .business-international-section,
[data-theme="dark"] .sucursales-section,
[data-theme="dark"] .branches-section,
[data-theme="dark"] .member-section,
[data-theme="dark"] .contact-section,
[data-theme="dark"] .biller-objective-section,
[data-theme="dark"] .biller-structure-section,
[data-theme="dark"] .latest-news,
[data-theme="dark"] .curriculum-section,
[data-theme="dark"] .projects-section {
    background-color: #080C14 !important;
    color: #CBD5E1 !important;
}

/* 2. TARJETAS Y PANELES DE CONTENIDO (SUPERFICIE SLATE #0F172A) */
[data-theme="dark"] .card,
[data-theme="dark"] .card-info,
[data-theme="dark"] .content-card,
[data-theme="dark"] .about-highlight-card,
[data-theme="dark"] .bento-company-card,
[data-theme="dark"] .pillar-card,
[data-theme="dark"] .kpi-card,
[data-theme="dark"] .flagship-metric-card,
[data-theme="dark"] .purpose-card,
[data-theme="dark"] .modelo-card,
[data-theme="dark"] .value-card,
[data-theme="dark"] .history-card,
[data-theme="dark"] .team-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .social-card,
[data-theme="dark"] .sol-product-card,
[data-theme="dark"] .sol-srv-card,
[data-theme="dark"] .sol-dual-card,
[data-theme="dark"] .asp-hub-panel,
[data-theme="dark"] .hub-point-card,
[data-theme="dark"] .branches-directory,
[data-theme="dark"] .branch-tab,
[data-theme="dark"] .directory-support-card,
[data-theme="dark"] .branches-master-viewer,
[data-theme="dark"] .metric-card,
[data-theme="dark"] .member-metric-card,
[data-theme="dark"] .contact-info-panel,
[data-theme="dark"] .contact-form-panel,
[data-theme="dark"] .contact-channel-item,
[data-theme="dark"] .contact-consorcio-card,
[data-theme="dark"] .biller-features-card,
[data-theme="dark"] .biller-objective-card,
[data-theme="dark"] .biller-panel-lead-box,
[data-theme="dark"] .biller-blueprint-card,
[data-theme="dark"] .sidebar-card,
[data-theme="dark"] .news-card,
[data-theme="dark"] .curriculum-hero,
[data-theme="dark"] .capability-card,
[data-theme="dark"] .project-category-card,
[data-theme="dark"] .mobile-quick-hub,
[data-theme="dark"] .mobile-about-content,
[data-theme="dark"] .resena-card,
[data-theme="dark"] .client-logo-card,
[data-theme="dark"] .panel-custom {
    background-color: #0F172A !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #CBD5E1 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] .card:hover,
[data-theme="dark"] .card-info:hover,
[data-theme="dark"] .bento-company-card:hover,
[data-theme="dark"] .sol-product-card:hover,
[data-theme="dark"] .sol-dual-card:hover,
[data-theme="dark"] .resena-card:hover,
[data-theme="dark"] .about-highlight-card:hover {
    border-color: #38BDF8 !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 0 20px rgba(56, 189, 248, 0.15) !important;
    transform: translateY(-4px) !important;
}

/* 3. ELEMENTOS ELEVADOS: CHIPS, TABS, SUBMENÚS, FILTROS (SLATE #1E293B) */
[data-theme="dark"] .sol-filter-container,
[data-theme="dark"] .biller-tabs-wrap,
[data-theme="dark"] .asp-hub-tabs,
[data-theme="dark"] .resenas-filter-bar,
[data-theme="dark"] .news-filters,
[data-theme="dark"] .submenu,
[data-theme="dark"] .submenu__sticky,
[data-theme="dark"] .dropdown-quick-controls,
[data-theme="dark"] .offcanvas-header,
[data-theme="dark"] .offcanvas-footer,
[data-theme="dark"] .drawer-theme-box,
[data-theme="dark"] .hub-chip,
[data-theme="dark"] .cap-tag,
[data-theme="dark"] .biller-sectors-chips {
    background-color: #1E293B !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Chips y Botones de Pestaña Inactivos */
[data-theme="dark"] .sol-chip-btn,
[data-theme="dark"] .sol-seg-btn,
[data-theme="dark"] .asp-tab-btn,
[data-theme="dark"] .branch-tab,
[data-theme="dark"] .contact-chip-pill,
[data-theme="dark"] .biller-tab-btn,
[data-theme="dark"] .biller-chip,
[data-theme="dark"] .resena-filter-btn,
[data-theme="dark"] .mobile-about-tab,
[data-theme="dark"] .news-counter {
    background-color: #1E293B !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #CBD5E1 !important;
}

[data-theme="dark"] .sol-chip-btn:hover,
[data-theme="dark"] .sol-seg-btn:hover,
[data-theme="dark"] .asp-tab-btn:hover,
[data-theme="dark"] .resena-filter-btn:hover,
[data-theme="dark"] .biller-tab-btn:hover {
    color: #38BDF8 !important;
    border-color: #38BDF8 !important;
    background-color: rgba(56, 189, 248, 0.12) !important;
}

/* Chips y Pestañas Activas (Gradiente Electric Accent + Cyan Glow) */
[data-theme="dark"] .sol-chip-btn.active,
[data-theme="dark"] .sol-seg-btn.active,
[data-theme="dark"] .asp-tab-btn.active,
[data-theme="dark"] .branch-tab.active,
[data-theme="dark"] .contact-chip-pill.active,
[data-theme="dark"] .contact-chip-pill:has(input[type="radio"]:checked),
[data-theme="dark"] .biller-tab-btn.active,
[data-theme="dark"] .biller-chip.highlight,
[data-theme="dark"] .resena-filter-btn.active,
[data-theme="dark"] .mobile-about-tab.active {
    background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%) !important;
    color: #FFFFFF !important;
    border-color: #38BDF8 !important;
    box-shadow: 0 4px 14px rgba(56, 189, 248, 0.3) !important;
}

[data-theme="dark"] .sol-chip-btn .chip-count {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #94A3B8 !important;
}

[data-theme="dark"] .sol-chip-btn.active .chip-count {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #FFFFFF !important;
}

/* 4. PIES DE TARJETA Y ACCIONES INFERIORES (#1E293B) */
[data-theme="dark"] .content-info,
[data-theme="dark"] .sol-card-bottom,
[data-theme="dark"] .bento-card-footer,
[data-theme="dark"] .features-card-footer,
[data-theme="dark"] .contact-form-footer {
    background-color: #1E293B !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #38BDF8 !important;
}

[data-theme="dark"] .content-info:hover {
    background-color: #0284C7 !important;
    color: #FFFFFF !important;
}

/* 5. FORMULARIOS, INPUTS Y SELECTS (#0B1322 CON BORDE #1E293B) */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-control-custom,
[data-theme="dark"] .form-textarea-custom,
[data-theme="dark"] .filter-search input,
[data-theme="dark"] .news-filters select {
    background-color: #0B1322 !important;
    border: 1px solid #1E293B !important;
    color: #F8FAFC !important;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] .form-control-custom:focus,
[data-theme="dark"] .form-textarea-custom:focus,
[data-theme="dark"] .filter-search input:focus {
    border-color: #38BDF8 !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.22) !important;
    background-color: #0F172A !important;
}

[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] .form-control-custom::placeholder {
    color: #64748B !important;
}

/* 6. TÍTULOS Y ENCABEZADOS (#F8FAFC PURO) */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] .title-primary,
[data-theme="dark"] .title-secundary,
[data-theme="dark"] .section-main-title,
[data-theme="dark"] .content-card h4,
[data-theme="dark"] .about-highlight-text strong,
[data-theme="dark"] .About-Us h2,
[data-theme="dark"] .About-Us b,
[data-theme="dark"] .organizacion-header h2,
[data-theme="dark"] .sol-hero-title,
[data-theme="dark"] .sol-main-title,
[data-theme="dark"] .sol-card-name,
[data-theme="dark"] .sol-srv-title,
[data-theme="dark"] .sol-dual-title,
[data-theme="dark"] .sol-cv-title,
[data-theme="dark"] .hub-title,
[data-theme="dark"] .header-asp h2,
[data-theme="dark"] .motivacion-title,
[data-theme="dark"] .section-header-filosofia h2,
[data-theme="dark"] .international-title,
[data-theme="dark"] .bento-brand-name,
[data-theme="dark"] .pillar-title,
[data-theme="dark"] .feature-title,
[data-theme="dark"] .branches-header h2,
[data-theme="dark"] .directory-title,
[data-theme="dark"] .master-name,
[data-theme="dark"] .member-title,
[data-theme="dark"] .contact-info-content h2,
[data-theme="dark"] .contact-form-header h3,
[data-theme="dark"] .biller-main-title,
[data-theme="dark"] .card-header-title,
[data-theme="dark"] .biller-objective-card h3,
[data-theme="dark"] .structure-header-text h2,
[data-theme="dark"] .panel-lead-content h3,
[data-theme="dark"] .news-title,
[data-theme="dark"] .news-card-title,
[data-theme="dark"] .sidebar-card h4 {
    color: #F8FAFC !important;
}

/* 7. ACENTOS CYAN Y NÚMEROS TECNOLÓGICOS (#38BDF8) */
[data-theme="dark"] .card-info h3,
[data-theme="dark"] .content-card h3,
[data-theme="dark"] .bento-tech-id,
[data-theme="dark"] .kpi-number,
[data-theme="dark"] .metric-value,
[data-theme="dark"] .objective-num,
[data-theme="dark"] .sol-code-id,
[data-theme="dark"] .seg-num,
[data-theme="dark"] .channel-email,
[data-theme="dark"] .card-info a span,
[data-theme="dark"] .bento-action-link,
[data-theme="dark"] .link-cyan {
    color: #38BDF8 !important;
}

/* 8. CUERPO DE TEXTO Y DESCRIPCIONES (#CBD5E1) */
[data-theme="dark"] p,
[data-theme="dark"] .content-card p,
[data-theme="dark"] .About-Us p,
[data-theme="dark"] .about-highlight-text span,
[data-theme="dark"] .sol-card-text,
[data-theme="dark"] .sol-srv-desc,
[data-theme="dark"] .sol-dual-text,
[data-theme="dark"] .hub-description,
[data-theme="dark"] .hub-point-card p,
[data-theme="dark"] .motivacion-desc,
[data-theme="dark"] .bento-brand-desc,
[data-theme="dark"] .pillar-desc,
[data-theme="dark"] .feature-desc,
[data-theme="dark"] .master-address,
[data-theme="dark"] .member-desc,
[data-theme="dark"] .contact-panel-desc,
[data-theme="dark"] .contact-form-header p,
[data-theme="dark"] .features-card-list li,
[data-theme="dark"] .biller-objective-card p,
[data-theme="dark"] .panel-lead-content p,
[data-theme="dark"] .news-card-desc,
[data-theme="dark"] .resena-comment {
    color: #CBD5E1 !important;
}

/* 9. TEXTO SECUNDARIO Y MUTED (#94A3B8) */
[data-theme="dark"] .text-muted,
[data-theme="dark"] .bento-footer-mono,
[data-theme="dark"] .channel-label,
[data-theme="dark"] .directory-subtitle,
[data-theme="dark"] .branch-tab-address,
[data-theme="dark"] .metric-sub,
[data-theme="dark"] .consorcio-text span,
[data-theme="dark"] .biller-sectors-label,
[data-theme="dark"] .submenu__link {
    color: #94A3B8 !important;
}

/* 10. MODAL, OFF-CANVAS Y TABLAS */
[data-theme="dark"] .modal-content {
    background-color: #0F172A !important;
    border: 1px solid #1E293B !important;
    color: #CBD5E1 !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7) !important;
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
}

[data-theme="dark"] .offcanvas {
    background-color: #080C14 !important;
    color: #CBD5E1 !important;
}

[data-theme="dark"] .offcanvas .nav-link {
    color: #CBD5E1 !important;
    border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] .offcanvas .nav-link:hover,
[data-theme="dark"] .offcanvas .nav-link.active {
    color: #38BDF8 !important;
}

[data-theme="dark"] .table,
[data-theme="dark"] .table td,
[data-theme="dark"] .table th {
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #CBD5E1 !important;
}

[data-theme="dark"] .table th {
    background-color: #0F172A !important;
    color: #F8FAFC !important;
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

/* ========================================================
   CORRECCIONES EXHAUSTIVAS MODO OSCURO (OPCIÓN A)
   Organización, Mercado, Sucursales, Biller, Contáctanos y Negocios
======================================================== */

/* 1. MERCADO (#mercado - Panel Hub y Contenidos) */
[data-theme="dark"] .asp,
[data-theme="dark"] .container-asp,
[data-theme="dark"] .header-asp,
[data-theme="dark"] .asp-hub-panel,
[data-theme="dark"] .hub-content-box {
    background: #0F172A !important;
    background-color: #0F172A !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #CBD5E1 !important;
}

[data-theme="dark"] .hub-title {
    color: #F8FAFC !important;
}

[data-theme="dark"] .hub-description {
    color: #CBD5E1 !important;
}

[data-theme="dark"] .hub-point-card {
    background: #1E293B !important;
    background-color: #1E293B !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .hub-point-card strong {
    color: #F8FAFC !important;
}

[data-theme="dark"] .hub-point-card p {
    color: #94A3B8 !important;
}

[data-theme="dark"] .hub-chip {
    background: #1E293B !important;
    color: #CBD5E1 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .hub-highlight-callout {
    background: rgba(56, 189, 248, 0.08) !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
}

[data-theme="dark"] .hub-highlight-callout strong {
    color: #F8FAFC !important;
}

[data-theme="dark"] .hub-highlight-callout p {
    color: #CBD5E1 !important;
}

[data-theme="dark"] .hub-footer-actions {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .hub-footer-meta {
    color: #94A3B8 !important;
}


/* 2. SUCURSALES (#oficinas - Tarjetas de Aliados y Métrica Flotante) */
[data-theme="dark"] .member-pillar-card {
    background: #0F172A !important;
    background-color: #0F172A !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #CBD5E1 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .member-pillar-card:hover {
    border-color: #38BDF8 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(56, 189, 248, 0.15) !important;
}

[data-theme="dark"] .member-pillar-card .pillar-icon {
    background: rgba(56, 189, 248, 0.12) !important;
    color: #38BDF8 !important;
}

[data-theme="dark"] .member-pillar-card .pillar-title,
[data-theme="dark"] .member-title {
    color: #F8FAFC !important;
}

[data-theme="dark"] .member-pillar-card .pillar-desc,
[data-theme="dark"] .member-desc,
[data-theme="dark"] .member-meta-text {
    color: #94A3B8 !important;
}

[data-theme="dark"] .member-metric-card {
    background: #0F172A !important;
    background-color: #0F172A !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .member-metric-card .metric-icon-box {
    background: rgba(56, 189, 248, 0.15) !important;
    color: #38BDF8 !important;
}

[data-theme="dark"] .member-metric-card .metric-title {
    color: #F8FAFC !important;
}

[data-theme="dark"] .member-metric-card .metric-label {
    color: #94A3B8 !important;
}


/* 3. ORGANIZACIÓN (#proposito, #modelo, #estrategico, #valores) */
/* Sección Propósito */
[data-theme="dark"] .purpose-pillar-card {
    background: #0F172A !important;
    background-color: #0F172A !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #CBD5E1 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .purpose-pillar-card:hover {
    border-color: #38BDF8 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(56, 189, 248, 0.15) !important;
}

[data-theme="dark"] .purpose-pillar-card .pillar-icon {
    background: rgba(56, 189, 248, 0.12) !important;
    color: #38BDF8 !important;
}

[data-theme="dark"] .purpose-pillar-card .pillar-title {
    color: #F8FAFC !important;
}

[data-theme="dark"] .purpose-pillar-card .pillar-desc,
[data-theme="dark"] .manifesto-meta-text {
    color: #94A3B8 !important;
}

[data-theme="dark"] .purpose-metric-card {
    background: #0F172A !important;
    background-color: #0F172A !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .purpose-metric-card .metric-icon-box {
    background: rgba(56, 189, 248, 0.15) !important;
    color: #38BDF8 !important;
}

[data-theme="dark"] .purpose-metric-card .metric-title {
    color: #F8FAFC !important;
}

[data-theme="dark"] .purpose-metric-card .metric-label {
    color: #94A3B8 !important;
}

/* Sección Modelo de Organización (#modelo) */
[data-theme="dark"] .modelo-section {
    background: #080C14 !important;
    background-color: #080C14 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #CBD5E1 !important;
}

[data-theme="dark"] .modelo-title {
    color: #F8FAFC !important;
}

[data-theme="dark"] .modelo-desc {
    color: #CBD5E1 !important;
}

[data-theme="dark"] .modelo-diagram-box {
    background: #0F172A !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .diagram-caption {
    background: #1E293B !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .diagram-tag {
    color: #38BDF8 !important;
}

[data-theme="dark"] .diagram-text {
    color: #CBD5E1 !important;
}

[data-theme="dark"] .system-card {
    background: #0F172A !important;
    background-color: #0F172A !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #CBD5E1 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .system-card:hover {
    background: #131E33 !important;
    background-color: #131E33 !important;
    border-color: #38BDF8 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45) !important;
}

[data-theme="dark"] .system-icon-box {
    background: rgba(56, 189, 248, 0.12) !important;
    color: #38BDF8 !important;
}

[data-theme="dark"] .system-title {
    color: #F8FAFC !important;
}

[data-theme="dark"] .system-desc {
    color: #CBD5E1 !important;
}

/* Sección Plan Estratégico (#estrategico) */
[data-theme="dark"] .strategy-section {
    background: #080C14 !important;
    background-color: #080C14 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .strategy-header h2 {
    color: #F8FAFC !important;
}

[data-theme="dark"] .strategy-header p {
    color: #CBD5E1 !important;
}

[data-theme="dark"] .strategy-card {
    background: #0F172A !important;
    background-color: #0F172A !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #CBD5E1 !important;
}

[data-theme="dark"] .strategy-card h3 {
    color: #F8FAFC !important;
}

[data-theme="dark"] .strategy-card p {
    color: #CBD5E1 !important;
}

[data-theme="dark"] .strategy-policy {
    background: #0F172A !important;
    background-color: #0F172A !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .strategy-policy-content h3 {
    color: #F8FAFC !important;
}

[data-theme="dark"] .strategy-policy-content p {
    color: #CBD5E1 !important;
}

[data-theme="dark"] .policy-chip {
    background: #1E293B !important;
    color: #CBD5E1 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .features-main-title {
    color: #F8FAFC !important;
}

[data-theme="dark"] .feature-box {
    background: #0F172A !important;
    background-color: #0F172A !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #CBD5E1 !important;
}

[data-theme="dark"] .feature-icon {
    background: rgba(56, 189, 248, 0.12) !important;
    color: #38BDF8 !important;
}

[data-theme="dark"] .feature-box h4 {
    color: #F8FAFC !important;
}

[data-theme="dark"] .feature-box p {
    color: #CBD5E1 !important;
}

/* Sección Valores Promovidos (#valores) */
[data-theme="dark"] .values-section {
    background: #080C14 !important;
    background-color: #080C14 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #CBD5E1 !important;
}

[data-theme="dark"] .values-header h2 {
    color: #F8FAFC !important;
}

[data-theme="dark"] .values-header p {
    color: #CBD5E1 !important;
}

[data-theme="dark"] .value-card {
    background: #0F172A !important;
    background-color: #0F172A !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .value-card-body {
    background: #0F172A !important;
    background-color: #0F172A !important;
}

[data-theme="dark"] .value-card-body h3 {
    color: #F8FAFC !important;
}

[data-theme="dark"] .value-card-body p {
    color: #CBD5E1 !important;
}

[data-theme="dark"] .values-box {
    background: #0F172A !important;
    background-color: #0F172A !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .values-box h3 {
    color: #F8FAFC !important;
}

[data-theme="dark"] .values-list li {
    color: #CBD5E1 !important;
}

/* Elementos móviles e hitos en Organización */
[data-theme="dark"] .mhistory-chip-btn {
    background: #1E293B !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #CBD5E1 !important;
}

[data-theme="dark"] .mhistory-chip-btn.active {
    background: linear-gradient(135deg, #0284C7, #0369A1) !important;
    color: #FFFFFF !important;
    border-color: #38BDF8 !important;
}

[data-theme="dark"] .mobile-milestone-display-card,
[data-theme="dark"] .mobile-purpose-tab {
    background: #0F172A !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #CBD5E1 !important;
}


/* 4. CONTÁCTANOS (Banner Contextual, Chips e Inputs) */
[data-theme="dark"] .contact-context-banner {
    background: #0B1322 !important;
    background-color: #0B1322 !important;
    border: 1px solid #1E293B !important;
}

[data-theme="dark"] .context-banner-icon {
    background: rgba(56, 189, 248, 0.15) !important;
    color: #38BDF8 !important;
}

[data-theme="dark"] .context-banner-body strong {
    color: #F8FAFC !important;
}

[data-theme="dark"] .context-banner-body p {
    color: #94A3B8 !important;
}

[data-theme="dark"] .chip-source-hint {
    background: rgba(56, 189, 248, 0.12) !important;
    color: #38BDF8 !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
}

[data-theme="dark"] .form-label-custom {
    color: #CBD5E1 !important;
}

[data-theme="dark"] .label-optional {
    color: #94A3B8 !important;
}


/* 5. BILLER (Sección Beneficios y Marco Digital) */
[data-theme="dark"] .biller-benefits-section {
    background: #080C14 !important;
    background-color: #080C14 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #CBD5E1 !important;
}

[data-theme="dark"] .biller-benefits-lead-text p {
    color: #CBD5E1 !important;
}

[data-theme="dark"] .biller-benefits-lead-text strong {
    color: #F8FAFC !important;
}

[data-theme="dark"] .biller-pre-title {
    background: rgba(56, 189, 248, 0.12) !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    color: #7DD3FC !important;
}

[data-theme="dark"] .biller-header-line {
    background: #38BDF8 !important;
}

[data-theme="dark"] .biller-dashboard-showcase {
    background: #0F172A !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6) !important;
}

[data-theme="dark"] .dashboard-device-bar {
    background: #0B1322 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .dashboard-badge {
    background: rgba(56, 189, 248, 0.12) !important;
    color: #38BDF8 !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
}


/* 6. NEGOCIOS & SOLUCIONES (Puntos de Servicio y Alianzas) */
[data-theme="dark"] .flagship-metric-card {
    background: #0F172A !important;
    background-color: #0F172A !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .business-international-section {
    background: #080C14 !important;
    background-color: #080C14 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .sol-srv-point {
    background: #1E293B !important;
    background-color: #1E293B !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .sol-srv-point strong {
    color: #F8FAFC !important;
}

[data-theme="dark"] .sol-srv-point p {
    color: #94A3B8 !important;
}