/* =========================================================
   ACTIWEB
   MENÚ PROFESIONAL RESPONSIVE - 3 NIVELES
   ========================================================= */
/* =========================================================
   VARIABLES DE CONFIGURACIÓN
   ========================================================= */
:root {
    /* =====================================================
       NIVEL 1
       ===================================================== */
    --ac-menu-n1-bg: #0d1b2a;
    --ac-menu-n1-color: #000000;
    --ac-menu-n1-hover-bg: #ffffff;
    --ac-menu-n1-hover-color: #000000;
    --ac-menu-n1-active-bg: #1b4965;
    --ac-menu-n1-active-color: #ffffff;
    /* =====================================================
       NIVEL 2
       ===================================================== */
    --ac-menu-n2-bg: #ffffff;
    --ac-menu-n2-color: #263238;
    --ac-menu-n2-hover-bg: #eaf3f8;
    --ac-menu-n2-hover-color: #0d6efd;
    /* =====================================================
       NIVEL 3
       ===================================================== */
    --ac-menu-n3-bg: #f8fafc;
    --ac-menu-n3-color: #263238;
    --ac-menu-n3-hover-bg: #0d6efd;
    --ac-menu-n3-hover-color: #ffffff;
    /* =====================================================
       GENERALES
       ===================================================== */
    --ac-menu-border: rgba(0, 0, 0, 0.08);
    --ac-menu-shadow:
        0 12px 35px rgba(0, 0, 0, 0.15);
    --ac-menu-radius: 8px;
    --ac-menu-transition:
        0.25s cubic-bezier(.4, 0, .2, 1);
    /* =====================================================
       MOBILE
       ===================================================== */
    --ac-menu-mobile-bg: #ffffff;
    --ac-menu-mobile-color: #263238;
    --ac-menu-mobile-hover-bg: #eef5f9;
    --ac-menu-mobile-hover-color: #0d6efd;
}
/* =========================================================
   RESET DEL MENÚ
   ========================================================= */
.ac-menu-navbar *,
.ac-menu-navbar *::before,
.ac-menu-navbar *::after {
    box-sizing: border-box;
}
/* =========================================================
   NAV PRINCIPAL
   ========================================================= */
.ac-menu-navbar {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 70px;
    z-index: 1000;
}
/* =========================================================
   LOGO
   ========================================================= */
.ac-menu-logo {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin: 0 20px 0 0;
    padding: 0;
    text-decoration: none;
}
.ac-menu-logo img {
    display: block;
    width: auto;
    max-width: 200px;
    /*max-height: 52px;*/
}
/* =========================================================
   LISTA PRINCIPAL
   NIVEL 1
   ========================================================= */
.ac-menu-list {
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    /*height: 70px;*/
    margin: 0;
    padding: 0;
    list-style: none;
}
/* =========================================================
   ITEM NIVEL 1
   DISTRIBUCIÓN UNIFORME
   ========================================================= */
.ac-menu-list > .ac-menu-item {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    padding: 0;
}
/* =========================================================
   ENLACE NIVEL 1
   ========================================================= */
.ac-menu-list > .ac-menu-item > .ac-menu-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /*height: 70px;*/
    padding: 15px 14px;
    /*background: var(--ac-menu-n1-bg);*/
    color: var(--ac-menu-n1-color);
    text-decoration: none;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.25px;
    white-space: nowrap;
    transition:
        background var(--ac-menu-transition),
        color var(--ac-menu-transition);
}
/* =========================================================
   EFECTO SUPERIOR DEL NIVEL 1
   ========================================================= */
.ac-menu-list > .ac-menu-item > .ac-menu-link::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 3px;
    background: currentColor;
    transform: translateX(-50%);
    transition:
        width var(--ac-menu-transition);
}
/* =========================================================
   HOVER NIVEL 1
   ========================================================= */
.ac-menu-list > .ac-menu-item:hover
> .ac-menu-link {
    background: var(--ac-menu-n1-hover-bg);
    color: var(--ac-menu-n1-hover-color);
}
.ac-menu-list > .ac-menu-item:hover
> .ac-menu-link::before {
    width: 45%;
}
/* =========================================================
   ACTIVO NIVEL 1
   ========================================================= */
.ac-menu-list > .ac-menu-item.active
> .ac-menu-link {
    background: var(--ac-menu-n1-active-bg);
    color: var(--ac-menu-n1-active-color);
}
/* =========================================================
   FLECHAS
   ========================================================= */
.ac-menu-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: 8px;
    font-size: 11px;
    transition:
        transform var(--ac-menu-transition);
}
/* =========================================================
   FLECHA NIVEL 1
   ========================================================= */
.ac-menu-list > .ac-menu-item.has-submenu:hover
> .ac-menu-link
> .ac-menu-arrow {
    transform: rotate(180deg);
}
/* =========================================================
   SUBMENÚ BASE
   ========================================================= */
.ac-menu-submenu {
    list-style: none;
    margin: 0;
    padding: 8px;
}
/* =========================================================
   NIVEL 2 DESKTOP
   ========================================================= */
.ac-menu-list > .ac-menu-item
> .ac-menu-submenu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 255px;
    min-width: 255px;
    background: var(--ac-menu-n2-bg);
    border: 1px solid var(--ac-menu-border);
    border-radius: var(--ac-menu-radius);
    box-shadow: var(--ac-menu-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition:
        opacity var(--ac-menu-transition),
        visibility var(--ac-menu-transition),
        transform var(--ac-menu-transition);
    z-index: 2000;
}
/* =========================================================
   MOSTRAR NIVEL 2
   ========================================================= */
.ac-menu-list > .ac-menu-item.has-submenu:hover
> .ac-menu-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
/* =========================================================
   ITEM NIVEL 2
   ========================================================= */
.ac-menu-subitem {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}
/* =========================================================
   ENLACE NIVEL 2
   ========================================================= */
.ac-menu-subitem
> .ac-menu-sublink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    background: var(--ac-menu-n2-bg);
    color: var(--ac-menu-n2-color);
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    transition:
        background var(--ac-menu-transition),
        color var(--ac-menu-transition),
        padding var(--ac-menu-transition);
}
/* =========================================================
   HOVER NIVEL 2
   ========================================================= */
.ac-menu-subitem:hover
> .ac-menu-sublink {
    background: var(--ac-menu-n2-hover-bg);
    color: var(--ac-menu-n2-hover-color);
    padding-left: 19px;
}
/* =========================================================
   FLECHA NIVEL 2
   ========================================================= */
.ac-menu-subitem.has-submenu
> .ac-menu-sublink
> .ac-menu-arrow {
    transform: rotate(0deg);
}
/* =========================================================
   HOVER FLECHA NIVEL 2
   ========================================================= */
.ac-menu-subitem.has-submenu:hover
> .ac-menu-sublink
> .ac-menu-arrow {
    transform: translateX(3px);
}
/* =========================================================
   NIVEL 3 DESKTOP
   ========================================================= */
.ac-menu-subitem
> .ac-menu-submenu {
    position: absolute;
    top: -8px;
    left: calc(100% + 7px);
    width: 255px;
    min-width: 255px;
    background: var(--ac-menu-n3-bg);
    border: 1px solid var(--ac-menu-border);
    border-radius: var(--ac-menu-radius);
    box-shadow: var(--ac-menu-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateX(8px);
    transition:
        opacity var(--ac-menu-transition),
        visibility var(--ac-menu-transition),
        transform var(--ac-menu-transition);
    z-index: 3000;
}
/* =========================================================
   MOSTRAR NIVEL 3
   ========================================================= */
.ac-menu-subitem.has-submenu:hover
> .ac-menu-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}
/* =========================================================
   ENLACE NIVEL 3
   ========================================================= */
.ac-menu-subitem
> .ac-menu-submenu
> li
> .ac-menu-sublink {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    background: var(--ac-menu-n3-bg);
    color: var(--ac-menu-n3-color);
    border-radius: 6px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    transition:
        background var(--ac-menu-transition),
        color var(--ac-menu-transition),
        padding var(--ac-menu-transition);
}
/* =========================================================
   HOVER NIVEL 3
   ========================================================= */
.ac-menu-subitem
> .ac-menu-submenu
> li
> .ac-menu-sublink:hover {
    background: var(--ac-menu-n3-hover-bg);
    color: var(--ac-menu-n3-hover-color);
    padding-left: 19px;
}
/* =========================================================
   BOTÓN HAMBURGUESA
   ========================================================= */
.ac-menu-toggle {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    margin: auto 0 auto auto;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--ac-menu-n1-color);
    cursor: pointer;
    gap: 5px;
}
/* =========================================================
   LÍNEAS HAMBURGUESA
   ========================================================= */
.ac-menu-toggle span {
    display: block;
    width: 25px;
    height: 2px;
    background: currentColor;
    border-radius: 20px;
    transition:
        transform var(--ac-menu-transition),
        opacity var(--ac-menu-transition);
}
/* =========================================================
   HAMBURGUESA ACTIVA
   ========================================================= */
.ac-menu-toggle.active
span:nth-child(1) {
    transform:
        translateY(7px)
        rotate(45deg);
}
.ac-menu-toggle.active
span:nth-child(2) {
    opacity: 0;
}
.ac-menu-toggle.active
span:nth-child(3) {
    transform:
        translateY(-7px)
        rotate(-45deg);
}

.ac-menu-list > .ac-menu-item:last-child > .ac-menu-link {
    background: #e51b23;
    color: #ffffff;
    border-radius: 6px;
    width: calc(100% - 16px);
}
.ac-menu-list > .ac-menu-item:last-child:hover > .ac-menu-link {
    background: #c9141b;
    color: #ffffff;
}


/* Icono */
.ac-menu-list > .ac-menu-item:last-child .contSpn > span {
    color: #ffffff;
    font-size: 18px;
    margin-right: 5px;
}

/* =========================================================
   TABLET / MOBILE
   ========================================================= */
@media (max-width: 991.98px) {
    /* =====================================================
       NAV
       ===================================================== */
    .ac-menu-navbar {
        position: relative;
        min-height: 65px;
        flex-wrap: wrap;
    }
    /* =====================================================
       LOGO
       ===================================================== */
    .ac-menu-logo {
        margin-right: 0;
    }
    .ac-menu-logo img {
        max-height: 48px;
    }
    /* =====================================================
       HAMBURGUESA
       ===================================================== */
    .ac-menu-toggle {
        display: flex;
    }
    /* =====================================================
       LISTA NIVEL 1
       ===================================================== */
   /* =====================================================
   LISTA NIVEL 1 MOBILE
   ===================================================== */

.ac-menu-list {
    display: none;

    position: absolute;
    top: 100%;
    left: 0;

    width: 100%;
    height: auto;

    margin: 0;
    padding: 0;

    flex-direction: column;

    background: var(--ac-menu-mobile-bg);

    border-radius: 9px;

    overflow: hidden;

    box-shadow: var(--ac-menu-shadow);

    z-index: 6000;
}
    /* =====================================================
       MENÚ ABIERTO
       ===================================================== */
    .ac-menu-list.open {
        display: flex;
    }
    /* =====================================================
       ITEMS NIVEL 1 MOBILE
       ===================================================== */
    .ac-menu-list > .ac-menu-item {
        flex: none;
        width: 100%;
        border-bottom:
            1px solid var(--ac-menu-border);
    }
    .ac-menu-list > .ac-menu-item:last-child {
        border-bottom: 0;
    }
    /* =====================================================
       ENLACE NIVEL 1 MOBILE
       ===================================================== */
    .ac-menu-list > .ac-menu-item
    > .ac-menu-link {
        width: 100%;
        height: auto;
        min-height: 52px;
        padding: 12px 16px;
        justify-content: space-between;
        background:
            var(--ac-menu-mobile-bg);
        color:
            var(--ac-menu-mobile-color);
        text-align: left;
        font-size: 14px;
    }
    /* =====================================================
       DESACTIVAR LÍNEA INFERIOR
       ===================================================== */
    .ac-menu-list > .ac-menu-item
    > .ac-menu-link::before {
        display: none;
    }
    /* =====================================================
       HOVER MOBILE
       ===================================================== */
    .ac-menu-list > .ac-menu-item:hover
    > .ac-menu-link {
        background:
            var(--ac-menu-mobile-hover-bg);
        color:
            var(--ac-menu-mobile-hover-color);
    }
    /* =====================================================
       FLECHA NIVEL 1 MOBILE
       ===================================================== */
    .ac-menu-item.has-submenu
    > .ac-menu-link
    > .ac-menu-arrow {
        transform: rotate(0deg);
    }
    .ac-menu-item.has-submenu.open
    > .ac-menu-link
    > .ac-menu-arrow {
        transform: rotate(180deg);
    }
    /* =====================================================
       SUBMENÚ MOBILE
       ===================================================== */
    .ac-menu-list
    .ac-menu-item
    > .ac-menu-submenu,
    .ac-menu-list
    .ac-menu-subitem
    > .ac-menu-submenu {
        position: static;
        display: none;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
    }
    /* =====================================================
       SUBMENÚ ABIERTO
       ===================================================== */
    .ac-menu-list
    .ac-menu-item.open
    > .ac-menu-submenu,
    .ac-menu-list
    .ac-menu-subitem.open
    > .ac-menu-submenu {
        display: block;
    }
    /* =====================================================
       NIVEL 2 MOBILE
       ===================================================== */
    .ac-menu-subitem
    > .ac-menu-sublink {
        min-height: 48px;
        padding:
            10px
            16px
            10px
            30px;
        background: var(--ac-menu-n2-bg);
        color: var(--ac-menu-n2-color);
        border-radius: 0;
        font-size: 13px;
        border-bottom:
            1px solid var(--ac-menu-border);
    }
    /* =====================================================
       HOVER NIVEL 2 MOBILE
       ===================================================== */
    .ac-menu-subitem:hover
    > .ac-menu-sublink {
        padding-left: 35px;
        background:
            var(--ac-menu-n2-hover-bg);
        color:
            var(--ac-menu-n2-hover-color);
    }
    /* =====================================================
       NIVEL 3 MOBILE
       ===================================================== */
    .ac-menu-subitem
    > .ac-menu-submenu
    > li
    > .ac-menu-sublink {
        min-height: 44px;
        padding:
            9px
            16px
            9px
            50px;
        background: var(--ac-menu-n3-bg);
        color: var(--ac-menu-n3-color);
        border-radius: 0;
        font-size: 12px;
        border-bottom:
            1px solid var(--ac-menu-border);
    }
    /* =====================================================
       HOVER NIVEL 3 MOBILE
       ===================================================== */
    .ac-menu-subitem
    > .ac-menu-submenu
    > li
    > .ac-menu-sublink:hover {
        padding-left: 55px;
        background:
            var(--ac-menu-n3-hover-bg);
        color:
            var(--ac-menu-n3-hover-color);
    }
    /* =====================================================
       FLECHA NIVEL 2 MOBILE
       ===================================================== */
    .ac-menu-subitem.has-submenu
    > .ac-menu-sublink
    > .ac-menu-arrow {
        transform: rotate(0deg);
    }
    .ac-menu-subitem.has-submenu.open
    > .ac-menu-sublink
    > .ac-menu-arrow {
        transform: rotate(90deg);
    }
}
/* =========================================================
   CELULARES PEQUEÑOS
   ========================================================= */
@media (max-width: 575.98px) {
    .ac-menu-navbar {
        padding-left: 10px;
        padding-right: 10px;
    }
    .ac-menu-logo img {
        max-height: 43px;
    }
    .ac-menu-toggle {
        width: 43px;
        height: 43px;
    }
    .ac-menu-toggle span {
        width: 23px;
    }
    .ac-menu-list > .ac-menu-item
    > .ac-menu-link {
        font-size: 13px;
    }
}