.elementor-kit-5{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */:root {
    --color-primary-blue: #0074F0; /* Tu azul principal de hover */
    --color-secondary-green: #24C29A; /* El verde del degradado */
    --color-dark-text: #0B0F1A; /* Para títulos y texto principal */
    --color-light-text: #444; /* Para párrafos */
    --color-background-light: #f9f9f9; /* Fondos claros */
    --color-background-soft-blue: #e0f0ff; /* Fondo del título de acordeón activo */
    --color-border-light: #ccc;

    /* Nuevas variables para degradados */
    --gradient-main: linear-gradient(90deg, var(--color-primary-blue) 0%, var(--color-secondary-green) 100%);
    --gradient-hover-button: linear-gradient(90deg, #0057d9 0%, #1dae8a 100%); /* Ligeramente más oscuro para hover si se usa degradado */

    /* Tipografías (asegúrate de que estas fuentes estén cargadas en tu tema o Elementor) */
    --font-heading: 'IBM Plex Sans', sans-serif; /* O la fuente que uses en tus títulos en Elementor */
    --font-body: 'IBM Plex Sans', sans-serif; /* O la fuente de tus párrafos en Elementor */
}

.text-gradient {
  background: linear-gradient(90deg, #0074F0 0%, #24C29A 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent
}
/* ===== Botones de industrias ===== */
:root {
    --color-hover: #0074F0;
}

/* ===== Botones de industrias ===== */
.industry-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
    justify-content: flex-start;
}

.industry-btn {
    background-color: var(--color-background-light); /* Fondo más claro */
    color: var(--color-dark-text); /* Color de texto más oscuro */
    border: 1px solid var(--color-border-light);
    border-radius: 100px; /* O un poco más redondeado si el estilo lo requiere */
    padding: 12px 24px; /* Un poco más de padding */
    cursor: pointer;
    font-size: 15px; /* Un poco más grande */
    font-weight: 500;
    transition: all 0.3s ease; /* Transición más completa */
    font-family: var(--font-body); /* Usar fuente definida */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Sombra sutil para "profundidad" */
}

.industry-btn:hover {
    background: var(--gradient-main); /* Usar el degradado principal */
    color: #fff;

    box-shadow: 0 4px 8px rgba(0,0,0,0.15); /* Sombra al hover */
    transform: translateY(-2px); /* Pequeño efecto hover */
}

.industry-btn.active {
    background: var(--gradient-main); /* Usar el degradado principal */
    color: #fff;
    font-weight: 600; /* Un poco más de peso */
    box-shadow: 0 4px 8px rgba(0,0,0,0.15); /* Sombra activa */
}

/* --- Contenedor por industria con transición --- */

.industry-container {
    position: relative;
    min-height: 400px; /* Un poco más de altura mínima, ajusta si es necesario */
    /* REMOVER height: 350px; */
}

.industry-group {
    /* Mantener las propiedades de posición y transición */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap; /* Importante para el responsive */
    gap: 30px; /* Aumenta el espacio entre el acordeón y las imágenes */
    align-items: flex-start;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    /* min-height: 350px; Ya lo tienes, pero considera aumentarlo si hay mucho contenido */
    z-index: 0;
    padding-bottom: 20px; /* Espacio inferior para contenido extra */
}

.industry-group.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    z-index: 1;
}


/* --- Acordeón --- */
/* --- Acordeón --- */
.accordion-wrapper {
    flex: 1 1 45%; /* Ajusta el flex-basis para dar más espacio a las imágenes si quieres */
    display: flex;
    flex-direction: column;
    gap: 12px; /* Un poco más de espacio entre títulos */
}

.accordion-title {
    color: var(--color-dark-text); /* Color de texto más oscuro */
    padding: 20px 0px 20px 0px; /* Más padding para que respire */
    font-weight: 500; /* Un poco más de peso por defecto */
    cursor: pointer;
    background-color: transparent; /* Fondo blanco para limpieza */
    border-bottom: 1px solid var(--color-border-light);
    transition: all 0.3s ease; /* Transición más completa */
    user-select: none;
    font-family: var(--font-body); /* Usar fuente definida */
    font-size: 16px; /* Un poco más grande */
}

.accordion-title:hover {
    border-color: var(--color-primary-blue); /* Borde azul al hover */
}

.accordion-title.open {
    font-weight: 600;
    border-color: transparent; /* Borde azul para activo */
    color: var(--color-dark-text); /* Asegurar color de texto */
}

/* Contenido acordeón con transición height + opacity */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    padding: 0 20px; /* Ajustar padding */
    background-color: transparent; /* Fondo blanco */
    border-left: 4px solid var(--color-primary-blue); /* Borde más pronunciado y color principal */
    font-size: 16px;
    line-height: 1.7; /* Mayor interlineado para legibilidad */
    color: var(--color-light-text); /* Texto más suave */
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.4s ease, padding 0.4s ease;
    border-radius: 0 0 0px 0px; /* Redondear solo abajo para que se una al título */
    margin-top: 5px; /* Pequeño ajuste para que se "pegue" al título */
    margin-bottom: 5px;
    z-index: -1; /* Asegurar que no tape el título al cerrarse */
    position: relative;
}

/* Contenido abierto */
.accordion-content.open {
    max-height: 200px; /* Ajustar según contenido máximo esperado */
    padding: 12px 20px; /* Ajustar padding */
    opacity: 1;
}

/* --- Imágenes acordeón --- */
.accordion-images {
    flex: 1 1 50%; /* Mantener el flex-basis, o ajusta si el contenido de texto es más largo */
    position: relative;
    height: 350px; /* Puede necesitar un poco más de altura, ajusta según tus imágenes */
    overflow: hidden;
    border-radius: 15px; /* Aumentar el redondeo para un look más suave */
}

.accordion-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Usar 100% de la altura del contenedor */
    object-fit: cover; /* Cambiado a cover para que llene el espacio */
    opacity: 0;
    transform: translateX(200px);
    transition: opacity 0.5s ease, transform 0.5s ease; /* Transición más suave para la entrada de la imagen */
    pointer-events: none;
    z-index: 0;
    border-radius: 12px; /* Consistente con el contenedor */
}

.accordion-image.active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    z-index: 1;
}

/* --- Estilos para la Flecha del Acordeón --- */
.accordion-arrow {
    width: 20px; /* Tamaño de la flecha */
    height: 20px;
    margin-left: auto; /* Empuja la flecha a la derecha */
    transition: transform 0.3s ease-in-out, color 0.3s ease-in-out; /* ¡Añadimos la transición de color! */
    flex-shrink: 0; /* Evita que la flecha se encoja en pantallas pequeñas */
    color: var(--color-dark-text); /* Color por defecto de la flecha (cuando el acordeón está cerrado e inactivo) */
}

/* Estado por defecto (cerrado): flecha hacia abajo */
/* Ya lo está por defecto el SVG */

/* Hover sobre el título del acordeón (cuando está cerrado) */
.accordion-title:hover .accordion-arrow {
    color: var(--color-primary-blue); /* Cambia el color de la flecha al color activo en hover */
}

.accordion-title.open .accordion-arrow {
    transform: rotate(180deg);
    color: var(--color-primary-blue); /* Color cuando el título está activo */
}

.accordion-title {
    display: flex; 
    justify-content: space-between;
    align-items: center; 
}

/* CSS para los enlaces de navegación */
.nav-link a {
    text-decoration: none;
    border-bottom: 4px solid transparent; /* Inicialmente transparente o del color de fondo */
    transition: border-color 0.3s ease; /* Para una transición suave */
}

.nav-link a.active { /* Esta es la clase que el JS del Observer debe agregar */
    border-bottom-color: var(--color-primary-blue); /* El color de tu brand */
    font-weight: 600; /* Opcional: negrita para el activo */
}

/* === CSS Personalizado para el Mega Menú Dinámico === */
    .mega-menu-wrapper {
        display: flex;
        gap: 20px; /* Espacio entre la columna de navegación y el contenido */
        padding: 20px; /* Relleno general del mega menú */
        background-color: #fff; /* Fondo blanco, similar a Cisco */
        border-radius: 8px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1); /* Sombra sutil */
        min-height: 250px; /* Altura mínima para visualizar */
        width: 100%; /* Opcional: define el ancho total si no lo controla Elementor */
        max-width: 900px; /* Ancho máximo, ajusta según necesidad */
        margin: auto; /* Centrar si es necesario */
    }

    .mega-menu-nav {
        flex: 0 0 30%; /* La columna de navegación ocupa el 30% del ancho */
        display: flex;
        flex-direction: column;
        border-right: 1px solid #eee; /* Separador visual */
        padding-right: 20px;
    }

    .mega-menu-nav-item {
        padding: 12px 15px;
        cursor: pointer;
        font-size: 1.05em;
        font-weight: 500;
        color: #555;
        transition: all 0.2s ease-in-out;
        border-left: 4px solid transparent; /* Indicador visual del activo */
        margin-bottom: 5px; /* Espacio entre ítems */
        border-radius: 4px;
    }

    .mega-menu-nav-item:hover {
        background-color: #f5f5f5;
        color: #333;
    }

    /* Estado activo */
    .mega-menu-nav-item.active {
        border-left-color: #007bff; /* Color azul, puedes usar tus variables si las defines aquí */
        color: #007bff;
        font-weight: 600;
        background-color: #eaf5ff; /* Fondo sutil para el activo */
    }

    .mega-menu-content-area {
        flex: 1; /* El área de contenido ocupa el resto del espacio */
        padding-left: 20px;
        display: flex; /* Para que los contenidos internos se puedan ocultar/mostrar correctamente */
        flex-direction: column; /* Apila los contenidos si hay varios */
    }

    .mega-menu-content {
        display: none; /* Ocultar por defecto */
        opacity: 0;
        transition: opacity 0.4s ease-in-out;
        width: 100%; /* Asegura que ocupe todo el ancho disponible */
    }

    .mega-menu-content.active {
        display: block; /* Mostrar como bloque (o flex si tu contenido es flex) */
        opacity: 1;
    }

    /* Estilos para el contenido dentro de cada panel dinámico */
    .content-panel h4 {
        color: #333;
        font-size: 1.4em;
        margin-bottom: 10px;
    }
    .content-panel p {
        color: #666;
        font-size: 0.95em;
        line-height: 1.6;
        margin-bottom: 15px;
    }
    .content-panel ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .content-panel ul li {
        margin-bottom: 8px;
        font-size: 0.9em;
        color: #444;
    }
    .content-panel ul li::before {
        content: "•"; /* Viñeta simple */
        color: #007bff;
        display: inline-block;
        width: 1em;
        margin-left: -1em;
    }
    .content-panel .btn-more {
        display: inline-block;
        padding: 8px 15px;
        background-color: #007bff;
        color: #fff;
        text-decoration: none;
        border-radius: 5px;
        transition: background-color 0.2s ease;
    }
    .content-panel .btn-more:hover {
        background-color: #0056b3;
    }/* End custom CSS */