@charset "utf-8";
/* CSS Document */

/* ==========================================================
   MENU INDUSTRIAL CARRETRONICA
   Responsive PC / TABLET / MOVIL
   Compatible con Dreamweaver CS6
   ========================================================== */


/* ==========================================================
   CONFIGURACION GENERAL
   ========================================================== */

.menu-industrial,
.menu-industrial ul,
.menu-industrial li,
.menu-industrial a {
    box-sizing: border-box;
}

.menu-industrial ul {
    margin: 0;
    padding: 0;
    list-style: none;
}


/* ==========================================================
   CONTENEDOR PRINCIPAL
   ========================================================== */

.menu-industrial {
    width: 100%;
    height: 70px;
    min-height: 70px;

    margin: 0 0 35px 0;
    padding: 0;

    background: #18242d;

    border-bottom: 3px solid #2b9b9b;

    font-family: Arial, Helvetica, sans-serif;

    position: relative;
    z-index: 100;

    box-sizing: border-box;

    clear: both;
}


.menu-contenedor {
    width: 100%;
    max-width: 1400px;

    height: 70px;
    min-height: 70px;

    margin: 0 auto;
    padding: 0;

    box-sizing: border-box;
}


/* ==========================================================
   MENU PRINCIPAL - ORDENADOR
   ========================================================== */

.menu-principal {
    width: 100%;

    height: 70px;
    min-height: 70px;

    margin: 0;
    padding: 0;

    list-style: none;

    display: flex;

    flex-direction: row;
    flex-wrap: nowrap;

    align-items: stretch;
    justify-content: center;

    gap: 4px;

    position: relative;

    box-sizing: border-box;

    clear: both;
}


.menu-item {
    position: relative;

    width: auto;
    height: 70px;

    margin: 0;
    padding: 0;

    float: none;

    flex: 0 0 auto;

    box-sizing: border-box;
}


/* ==========================================================
   ENLACES PRINCIPALES
   ========================================================== */

.menu-enlace {
    width: auto;
    min-width: 120px;
    height: 70px;

    margin: 0;
    padding: 0 18px;

    display: flex;

    align-items: center;
    justify-content: center;

    position: relative;

    float: none;

    box-sizing: border-box;

    color: #e9eef1;

    text-decoration: none;

    font-size: 14px;
    font-weight: bold;

    white-space: nowrap;

    line-height: normal;

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

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}


/* ==========================================================
   ICONOS
   ========================================================== */

.menu-icono {
    width: 30px;
    height: 30px;

    margin: 0 8px 0 0;
    padding: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    box-sizing: border-box;
}


.menu-icono svg {
    width: 27px;
    height: 27px;

    display: block;

    margin: 0;
    padding: 0;

    fill: none;

    stroke: #8fd0d0;

    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;

    transition: stroke 0.2s ease;
}


/* ==========================================================
   TEXTO
   ========================================================== */

.menu-principal > li > a.menu-enlace > span {
    position: static;

    float: none;

    margin: 0;
    padding: 0;

    line-height: normal;
}


/* ==========================================================
   FLECHA SUBMENU
   ========================================================== */

.flecha {
    margin-left: 7px;

    font-size: 12px;

    color: #8aa1aa;

    transition: transform 0.2s ease;
}


/* ==========================================================
   EFECTO HOVER - ORDENADOR
   ========================================================== */

.menu-item:hover > .menu-enlace {
    background: #22343e;
    color: #ffffff;
}


.menu-item:hover > .menu-enlace .menu-icono svg {
    stroke: #ffffff;
}


.menu-item:hover > .menu-enlace .flecha {
    color: #ffffff;
    transform: rotate(180deg);
}


/* ==========================================================
   SUBMENU - ORDENADOR
   ========================================================== */

.menu-principal .submenu {
    position: absolute;

    top: 70px;
    left: 0;

    width: 250px;

    height: auto;
    min-height: 0;

    margin: 0;
    padding: 7px 0;

    display: none;

    background: #ffffff;

    border-top: 3px solid #2b9b9b;

    box-shadow: 0 7px 20px rgba(0,0,0,0.25);

    list-style: none;

    z-index: 200;

    box-sizing: border-box;
}


.menu-con-submenu:hover > .submenu {
    display: block;
}


/* ==========================================================
   ELEMENTOS DEL SUBMENU
   ========================================================== */

.submenu li {
    width: 100%;

    height: auto;

    display: block;

    margin: 0;
    padding: 0;

    float: none;

    position: relative;

    box-sizing: border-box;
}


.submenu li a {
    display: block;

    width: 100%;
    height: auto;

    min-width: 0;

    margin: 0;
    padding: 13px 18px;

    box-sizing: border-box;

    color: #25343d;

    text-decoration: none;

    font-size: 14px;
    font-weight: normal;

    line-height: normal;

    white-space: nowrap;

    border-bottom: 1px solid #e7ecef;

    float: none;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        padding-left 0.2s ease;
}


.submenu li:last-child a {
    border-bottom: none;
}


.submenu li a:hover {
    background: #edf5f5;

    color: #187878;

    padding-left: 24px;
}


/* ==========================================================
   BOTON MENU MOVIL
   ========================================================== */

.menu-boton-movil {
    display: none;

    width: 100%;
    height: 55px;

    margin: 0;
    padding: 0 20px;

    border: none;

    background: #18242d;

    color: #ffffff;

    cursor: pointer;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 14px;
    font-weight: bold;

    text-align: left;

    box-sizing: border-box;
}


/* ==========================================================
   ICONO HAMBURGUESA
   ========================================================== */

.menu-hamburguesa {
    display: inline-block;

    width: 22px;
    height: 14px;

    margin-right: 10px;

    position: relative;

    border-top: 2px solid #8fd0d0;
    border-bottom: 2px solid #8fd0d0;

    box-sizing: border-box;
}


.menu-hamburguesa:after {
    content: "";

    position: absolute;

    left: 0;
    top: 5px;

    width: 22px;
    height: 2px;

    background: #8fd0d0;
}


/* ==========================================================
   TABLET
   851 - 1150 px
   ========================================================== */

@media screen and (max-width: 1150px) and (min-width: 851px) {

    .menu-enlace {
        padding: 0 9px;

        font-size: 12px;
    }


    .menu-icono {
        width: 25px;
        height: 25px;

        margin-right: 5px;
    }


    .menu-icono svg {
        width: 23px;
        height: 23px;
    }

}


/* ==========================================================
   MOVIL Y TABLET PEQUEÑA
   850 px O MENOS
   ========================================================== */

@media screen and (max-width: 850px) {

    /* ------------------------------------------------------
       CONTENEDOR
       ------------------------------------------------------ */

    .menu-industrial {
        width: 100%;

        height: auto;
        min-height: 55px;

        margin: 0 0 35px 0;
        padding: 0;

        background: #18242d;

        position: relative;
    }


    .menu-contenedor {
        width: 100%;

        height: auto;
        min-height: 55px;

        margin: 0;
        padding: 0;
    }


    /* ------------------------------------------------------
       BOTON HAMBURGUESA
       ------------------------------------------------------ */

    .menu-boton-movil {
        display: block;

        width: 100%;
        height: 55px;

        margin: 0;
        padding: 0 20px;

        border: none;

        background: #18242d;

        color: #ffffff;

        cursor: pointer;

        font-family: Arial, Helvetica, sans-serif;

        font-size: 14px;
        font-weight: bold;

        text-align: left;

        box-sizing: border-box;
    }


    /* ------------------------------------------------------
       MENU PRINCIPAL OCULTO
       ------------------------------------------------------ */

    .menu-principal {
        display: none;

        width: 100%;

        height: auto;
        min-height: 0;

        margin: 0;
        padding: 0;

        flex-direction: column;
        flex-wrap: nowrap;

        align-items: stretch;
        justify-content: flex-start;

        gap: 0;

        background: #18242d;

        box-sizing: border-box;
    }


    /* ------------------------------------------------------
       MENU ABIERTO
       ------------------------------------------------------ */

    .menu-principal.menu-abierto {
        display: flex;
    }


    /* ------------------------------------------------------
       ELEMENTOS PRINCIPALES
       ------------------------------------------------------ */

    .menu-principal > .menu-item {
        width: 100%;

        height: auto;
        min-height: 55px;

        margin: 0;
        padding: 0;

        float: none;

        flex: none;

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

        box-sizing: border-box;
    }


    /* ------------------------------------------------------
       ELEMENTO CON SUBMENU ABIERTO
       ------------------------------------------------------ */

    .menu-principal > .menu-con-submenu.submenu-abierto {
        height: auto;
        min-height: 55px;
    }


    /* ------------------------------------------------------
       ENLACES PRINCIPALES EN MOVIL
       ------------------------------------------------------ */

    .menu-principal > .menu-item > .menu-enlace {
        display: flex;

        width: 100%;
        min-width: 0;

        height: 55px;

        margin: 0;
        padding: 0 20px;

        align-items: center;
        justify-content: flex-start;

        background: #18242d;

        color: #e9eef1;

        border: none;

        box-sizing: border-box;
    }


    /* ------------------------------------------------------
       ICONOS MOVIL
       ------------------------------------------------------ */

    .menu-principal .menu-icono {
        width: 30px;
        min-width: 30px;

        height: 30px;

        margin: 0 10px 0 0;

        display: flex;

        align-items: center;
        justify-content: center;

        flex-shrink: 0;
    }


    .menu-principal .menu-icono svg {
        width: 25px;
        height: 25px;

        stroke: #8fd0d0;
    }


    /* ------------------------------------------------------
       FLECHA MOVIL
       ------------------------------------------------------ */

    .menu-principal .flecha {
        margin-left: auto;

        color: #8aa1aa;

        transform: none;
    }


    /* ------------------------------------------------------
       SUBMENUS MOVIL
       ------------------------------------------------------ */

    .menu-principal .submenu {
        position: static;

        width: 100%;

        height: auto;
        min-height: 0;

        margin: 0;
        padding: 0;

        display: none;

        background: #22343e;

        border-top: 1px solid #2b9b9b;

        box-shadow: none;

        z-index: auto;

        box-sizing: border-box;
    }


    /* ------------------------------------------------------
       SUBMENU ABIERTO
       ------------------------------------------------------ */

    .menu-principal .menu-con-submenu.submenu-abierto > .submenu {
        display: block;
    }


    /* ------------------------------------------------------
       ELEMENTOS DEL SUBMENU MOVIL
       ------------------------------------------------------ */

    .menu-principal .submenu li {
        width: 100%;

        height: auto;

        margin: 0;
        padding: 0;

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


    .menu-principal .submenu li a {
        display: block;

        width: 100%;

        height: auto;
        min-height: 45px;

        margin: 0;

        padding: 13px 20px 13px 62px;

        background: #22343e;

        color: #d9e3e7;

        font-size: 14px;

        border-bottom: none;

        box-sizing: border-box;

        white-space: nowrap;
    }


    .menu-principal .submenu li a:hover {
        background: #2b424e;

        color: #ffffff;

        padding-left: 62px;
    }


    /* ------------------------------------------------------
       IMPORTANTE:
       EN MOVIL EL HOVER NO ABRE LOS SUBMENUS
       ------------------------------------------------------ */

    .menu-con-submenu:hover > .submenu {
        display: none;
    }


    .menu-con-submenu.submenu-abierto:hover > .submenu {
        display: block;
    }


    /* ------------------------------------------------------
       DESACTIVAR HOVER VISUAL DE PC EN MOVIL
       ------------------------------------------------------ */

    .menu-principal .menu-item:hover > .menu-enlace {
        background: #18242d;

        color: #e9eef1;
    }


    .menu-principal .menu-item:hover > .menu-enlace .menu-icono svg {
        stroke: #8fd0d0;
    }


    .menu-principal .menu-item:hover > .menu-enlace .flecha {
        color: #8aa1aa;

        transform: none;
    }


    /* ------------------------------------------------------
       FLECHA CUANDO SUBMENU ABIERTO
       ------------------------------------------------------ */

    .menu-principal .menu-con-submenu.submenu-abierto > .menu-enlace .flecha {
        transform: rotate(180deg);
    }

}


/* ==========================================================
   MOVILES MUY PEQUEÑOS
   400 px O MENOS
   ========================================================== */

@media screen and (max-width: 400px) {

    .menu-boton-movil {
        height: 50px;

        padding: 0 15px;

        font-size: 14px;
    }


    .menu-principal > .menu-item {
        height: auto;
        min-height: 52px;
    }


    .menu-principal > .menu-con-submenu.submenu-abierto {
        height: auto;
        min-height: 52px;
    }


    .menu-principal > .menu-item > .menu-enlace {
        height: 52px;

        padding: 0 15px;

        font-size: 14px;
    }


    .menu-principal .menu-icono {
        width: 28px;
        min-width: 28px;

        height: 28px;

        margin-right: 9px;
    }


    .menu-principal .menu-icono svg {
        width: 24px;
        height: 24px;
    }


    .menu-principal .submenu li a {
        min-height: 43px;

        padding: 12px 15px 12px 52px;

        font-size: 13px;
    }

}