/* 
Archivo: css/estilos-segundo-header.css
Descripción: Estilos personalizados para "Segundo Header".
Autor: Nexbu
Fecha: 08 Agostro 2025
*/
/*** Segundo header ***/
/*.page-id-424 header, .page-id-20 header {
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 9;
}
.page-id-424 #header-menu > .e-con-inner, .page-id-20 #header-menu > .e-con-inner {
    background-color: #fff;
    border-radius: 50px;
    height: 86px!important;
    margin-top: 26px;
    padding: 0 26px;
    z-index: 99;
}
.single-post header {
    background-color: #fff!important;
}
.single-post header, .single-post #header-menu > .e-con-inner {
    height: 86px!important;
}
.single-post #header-menu {
    margin-top: 0;
}*/

/*** Responsive ***/
/* Portatil */
/*
@media only screen and (max-width: 1400px) {
    .page-id-424 #header-menu > .e-con-inner {
        height: 76px !important;
        padding: 0 16px;
    }
}

@media only screen and (max-width: 767px) {
    .single-post header {
        height: 80px!important;
    }
    .single-post #header-menu > .e-con-inner {
        max-height: 80px!important;
    }
}*/
/*** Fin: Responsive ***/
/*** Fin: Segundo header ***/



/*** Mega menú global ***/
.elementor-widget-n-menu .e-n-menu-title-container:not(.e-link), .elementor-widget-n-menu .e-n-menu-title-container:not(.e-link) * {
    cursor: pointer!important;
}
span.e-n-menu-dropdown-icon-opened, span.e-n-menu-dropdown-icon-closed {
    margin-left: 5px;
    width: 12px;
}
.menu-title--active, 
.page.page-id-1703 #e-n-menu-title-1453,
.page-id-424 #e-n-menu-title-1452, .page-id-1555 #e-n-menu-title-1454, .page-id-2208 #e-n-menu-title-1455 {
    border-color: var(--n-menu-title-color-normal)!important;
}
body:after {
    background: #0000005e;
    content: "";
    left: 0;
    height: 100%;
    filter: blur(8px);
    position: absolute;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -webkit-transition: opacity .3s ease-in-out;
    position: fixed;
    pointer-events: none;
    top: 0;
    width: 100%;
    z-index: -1;
}
.activo-menu:after {
    opacity: 1;
    z-index: 9;
}
.activo-menu #header-menu > .e-con-inner {
    background: #fff;
    border-radius: 50px;
}
.megamenu {
    background: #FAFAFA;
    border-radius: 20px;
    font-family: "Manrope", sans-serif;
    padding: 30px;
}
.megamenu_inner {
    background: #fff;
    border-radius: 10px;
    padding: 36px 26px;
}
/*** Fin: Mega menú global ***/

/*** Mega menú visión ***/
.vision-general__inner {
    align-items: center;
    display: grid; 
    gap: 20px;
    grid-template-columns: 2.3fr 1fr;
}
.vision-general__top {
    align-items: center;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    padding-bottom: 26px;
}
.vision-general__top div {
    max-width: 532px;
}
.vision-general__title {
    font-size: 25px; 
    font-weight: 600;
    margin: 0 0 8px;
}
.vision-general__desc { 
    color: #696969;
    font-size: var(--e-global-typography-1f5f22c-font-size);
    font-weight: 500;
    margin: 0; 
}
.btn--primary {
    border: 1px solid #696969;
    border-radius: 50px;
    color: #0083AF; 
    font-size: var(--e-global-typography-1f5f22c-font-size);
    font-weight: 700;
    padding: 14px 22px; 
}
.btn--primary:hover {
    background-color: #0083AF;
    border-color: #0083AF;
    color: #fff;
}
/* 3 card */
.vision-general__cards {
    display:grid; 
    gap:16px; 
    grid-template-columns: repeat(3, minmax(0,1fr));
    margin-top: 26px;
}
.vision-card { 
    border-radius: 10px;
    cursor: pointer;
    padding: 26px; 
    position:relative;
}
.vision-card:hover { 
    background: #F2F9FF; 
}
.vision-card__link {
    opacity: 0;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}
.vision-card:hover .vision-card__link {
    opacity: 1;
}
.vision-card__link img {
    position: absolute;
    right: 26px;
    top: 26px;
}
.vision-card__icon img { 
    height: auto; 
    width: 54px; 
}
.vision-card path, .vision-card rect {
    transition: .4s;
}
.vision-card:hover path {
    fill: #fff!important;
}
.vision-card:hover rect {
    fill: #004656;
}
.vision-card__title { 
    color: #004656;
    font-size: 20px;
    margin: 20px 0;
}
.vision-card__text { 
    color: #696969; 
    font-size: var(--e-global-typography-1f5f22c-font-size);
    font-weight: 500;
    margin:0; 
}
.btn--link { 
    color: #0083AF; 
    font-size: var(--e-global-typography-1f5f22c-font-size);
    font-weight: 700;
}
.vision-card__link { 
    display: block;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}
.vision-general__right { 
    position: relative;
}
.vision-side__content {
    padding: 0 50px;
}
.vision-side__image img { 
    display: block; 
    height: auto; 
    width: 100%; 
}
.vision-side__title { 
    font-size: var(--e-global-typography-1f5f22c-font-size);
    font-weight: 500;
    margin: 15px 0 10px; 
}
.vision-side__text {
    color: #696969;
    font-size: var( --e-global-typography-f99b52a-font-size );
    font-weight: 500;
    margin: 0 0 15px;
}
.btn.btn--link img {
    margin-left: 8px;
}
.btn.btn--link:hover img {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}
/** Fin: Mega menú visión ***/

/*** Mega menú casos de uso ***/
.casos-soluciones__inner {
    display: flex;
    font-family: "Manrope", sans-serif;
}
.casos-soluciones__menu {
    border-right: 1px solid #EEE;
    padding-right: 26px;
    width: 26%;
}
.casos-soluciones__panels {
    align-items: center;
    display: flex;
    padding-left: 26px;
    width: 74%;
}
.casos-panel__content, figure.casos-panel__media {
    width: 50%;
}
/* Títulos */
.casos-soluciones__menu h2, .casos-menu__text small {
    color: #696969;
    font-size: var( --e-global-typography-a6fb064-font-size )!important;
    font-weight: 500;
}
.casos-soluciones__menu h2 {
    margin: 10px 0 36px;
}
h2.casos-panel__eyebrow, h3.casos-panel__title {
    font-family: "Figtree", sans-serif;
    font-weight: 600;
    margin: 0;
}
h3.casos-panel__title {
    text-transform: lowercase!important;
    font-size: 44px;
}
/* Botones */
.casos-menu__link { 
    display: none; 
}
ul.casos-menu {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-left: 0;
}
ul.casos-menu li {
    display: flex;
    gap: 20px;
}
.casos-menu__btn {
    align-items: center;
    border-radius: 10px!important;
    border-width: 0!important;
    color: var( --e-global-color-text )!important;
    gap: 20px;
    padding: 16px!important;
    width: 100%;
}
.casos-menu__btn, .casos-menu__text {
    display: flex;
}
.casos-menu__text {
    font-size: var(--e-global-typography-aa9a205-font-size);
    flex-direction: column;
    gap: 8px;
    text-align: left;
}
li.casos-menu__item.activar-solucion button, li.casos-menu__item button:hover {
    background-color: #F2F9FF;
}
li.casos-menu__item.activar-solucion button rect, li.casos-menu__item button:hover rect {
    fill: #004656;
}
li.casos-menu__item.activar-solucion button path, li.casos-menu__item button:hover path {
    fill: #fff!important;
}
/* Contenido */
.casos-panel {
    align-items: center;
    gap: 26px;
}
.casos-panel.is-active {
    display: flex;
}
.casos-panel__content {
    align-items: self-start;
    display: flex;
    flex-direction: column;
    height: 280px;
    justify-content: space-between;
}
/* Botón conoce más */
a.btn.btn--outline {
    border: 1px solid;
    border-radius: 50px;
    border-color: #696969;
    color: #0083AF;
    font-size: var(--e-global-typography-a6fb064-font-size) !important;
    font-weight: 700;
    padding: 12px 22px;
    transition: .4s;
    width: auto;
}
a.btn.btn--outline:hover {
    background-color: #0083AF;
    border-color: #0095DA;
    color: #fff;
}
/* Imagen */
.casos-panel__media img {
    border-radius: 20px!important;
    height: 390px!important;
    object-fit: cover;
}
/*** Fin: Mega menú casos de uso ***/

/** Responsive **/
/* Portatil */
@media only screen and (max-width: 1400px) {
    /* Visión */
    .vision-general__top div {
        max-width: 400px;
    }
    .vision-general__title {
        font-size: 22px;
    }
    .megamenu_inner {
        padding: 26px 16px;
    }
    .vision-general__cards {
        gap: 5px;
        margin-top: 16px;
    }
    .vision-card {
        padding: 15px;
    }
    .vision-card__icon svg {
        width: 45px;
    }
    .vision-card__title {
        font-size: 18px;
        margin: 10px 0;
    }
    .vision-side__content {
        padding: 0 40px;
    }
}
/* Tablet */
@media only screen and (max-width: 1024px) {
    /* Menú */
    span.e-n-menu-dropdown-icon-opened, span.e-n-menu-dropdown-icon-closed {
        margin-left: 0;
        width: 8px;
    }
    /* Visión */
    .vision-general__right, .vision-general__top {
        display: none;
    }
    .vision-general__inner, .vision-general__cards {
        gap: 0;
        grid-template-columns: 1fr;
        margin-top: 0;
    }
    .megamenu_inner {
        background: #ffffff00;
        display: flex;
        flex-direction: column-reverse;
        padding: 0;
    }
    .megamenu {
        background: transparent;
        padding: 0;
    }
    .vision-card {
        align-items: center;
        border-radius: 50px;
        display: flex;
        gap: 8px;
        padding: 5px 15px 0 5px;
    }
    .vision-card__icon svg {
        height: 40px;
        width: 40px;
    }
    .vision-card__title {
        font-size: 14px;
        margin: 0;
    }
    p.vision-general__desc, .vision-card__text {
        display: none;
    }
    .vision-card__link img {
        top: 50%;
        right: 20px;
        transform: translate(50%, -50%);
    }
    /* Casos de usos */
    .casos-soluciones__panels, .casos-menu__btn, .casos-soluciones__menu h2 { 
        display: none!important;
    }
    .casos-menu__link { 
        display: flex;
    }
    .casos-soluciones__menu [role="tab"] { 
        cursor: pointer;
    }
    ul.casos-menu {
        gap: 0;
    }
    .casos-soluciones__menu {
        border-width: 0;
        padding-right: 0;
        width: 100%;
    }
    a.casos-menu__link {
        border-radius: 50px;
        gap: 8px!important;
        padding: 5px!important;
        position: relative;
        width: 100%;
    }
    a.casos-menu__link img {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translate(50%, -50%);
        opacity: 0;
        transition: opacity .4s ease-in-out;
        -moz-transition: opacity .4s ease-in-out;
        -webkit-transition: opacity .4s ease-in-out;
    }
    a.casos-menu__link:hover img {
        opacity: 1;
    }
    .casos-menu__text {
        color: #003D4C;
        font-weight: 600;
        gap: 0;
    }
    .casos-menu__icon, .casos-menu__icon svg {
        height: 40px;
        width: 40px;
    }
    .casos-menu__link:hover {
        background-color: #F2F9FF;
    }
    .casos-menu__link:hover rect {
        fill: #004656;
    }
    .casos-menu__link:hover path {
        fill: #fff!important;
    }
}
/*** Fin: Mega menú ***/