.correotel {
    background-color: #D8E9A8;
    width: 100%;
    height: 24px;
    text-align: center;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 1000;
    text-decoration: none;
}

    .correotel a {
        color: #191A19;
        text-decoration: none;
        font-size: 12px;
    }

        .correotel a:hover {
            color: #1E5128;
            text-decoration: none;
        }

/* Estilos generales del menú */
.desktop-menu {
    position: fixed;
    background: #1c9c75;
    margin-top: 24px;
    z-index: 1000;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

    .desktop-menu .logo {
        width: 150px;
        height: auto;
        margin-left: 20px; /* Espacio entre el logo y los enlaces del menú */
        padding: 10px;
    }

        .desktop-menu .logo img {
            width: 100%;
        }

    .desktop-menu ul {
        list-style: none;
        padding: 0;
        display: flex;
    }

        .desktop-menu ul li {
            margin-right: 20px;
            position: relative; /* Añadimos posición relativa para poder posicionar el submenú */
        }

            .desktop-menu ul li a {
                text-decoration: none;
                color: #fff;
                padding: 5px;
                display: block;
                background-color: #1c9c75;
            }

        /* Estilos para los submenús */
        .desktop-menu ul ul {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            padding: 0;
            left: 0; /* Posicionar el submenú a la izquierda del elemento padre */
            top: 100%; /* Posicionar el submenú debajo del elemento padre */
            width: 280px;
        }

        .desktop-menu ul li:hover > ul {
            display: block;
            color: #3a8dc6;
            background-color: #1c9c75;
            font-size: 17px;
        }

        /* Estilos para los submenús2 */
        .desktop-menu ul ul .submenu2 {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            padding: 0;
            left: 0; /* Posicionar el submenú a la izquierda del elemento padre */
            top: 100%; /* Posicionar el submenú debajo del elemento padre */
            width: 280px;
        }

        .desktop-menu ul .submenu2 li:hover > ul {
            display: block;
            color: #3a8dc6;
            background-color: #1c9c75;
            font-size: 17px;
        }

        /* Alinear los submenús correctamente */
        .desktop-menu ul ul li {
            display: block;
        }

        /* Estilo adicional para el submenú con otro submenú */
        .desktop-menu ul ul ul {
            left: 100%;
            top:0%; /* Posicionar el submenú debajo del elemento padre CAMBIO AHORTIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA*/
        }

        /* Opcional: Dar un efecto visual al pasar el ratón sobre los enlaces */
        .desktop-menu ul li:hover {
            background-color: #1c9c75;
        }






.menu {
    display: none;
    align-items: center;
    justify-content: space-between;
    background-color: #1c9c75;
    color: #fff;
    padding: 10px;
    z-index: 1001;
}

.logo {
    width: 100px;
}

    .logo img {
        width: 100%;
    }

.menu-icon {
    font-size: 35px;
    cursor: pointer;
    margin-top: -8px;
    color: #ffffff;
}

.main-menu {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
}

    .main-menu.open {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background-color: #333;
        flex-direction: column;
    }

    .main-menu li {
        padding: 10px;
        border-bottom: 1px solid #fff;
        position: relative;
    }

    .main-menu a {
        color: #fff;
        text-decoration: none;
    }

.sub-menu {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 5px;
}

.main-menu li:hover .sub-menu {
    display: block;
}

.sub-menu li {
    padding: 10px;
    position: relative;
}

.sub-menu a {
    color: #fff;
    text-decoration: none;
}

.sub-sub-menu {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
    margin-left: 15px;
}

.sub-menu li:hover .sub-sub-menu {
    display: block;
}

.separadordelmenu {
    height: 27px;
}

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


    .desktop-menu {
        display: none;
    }

    .menu {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        padding: 15px;
        margin-top: 24px;
    }

    .main-menu {
        display: none;
    }

        .main-menu.open {
            display: flex;
            margin-top: 90px;
            background-color: #4E9F3D;
        }

        .main-menu li {
            border-bottom: 1px solid #fff;
        }

    .sub-menu {
        display: none;
    }

        .sub-menu.open {
            display: block;
        }
}

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

    .correotel a {
        font-size: 12px;
    }

    .menu {
        height: 61px;
    }

    .main-menu.open {
        margin-top: 84px;
    }

    .separadordelmenu {
        height: 24px;
    }
}

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

    .correotel a {
        font-size: 10px;
    }

    .menu {
        height: 55px;
    }

    .main-menu.open {
        margin-top: 79px;
    }

    .separadordelmenu {
        height: 18px;
    }
}

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

    .correotel a {
        font-size: 8px;
    }
}

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

    .correotel a {
        font-size: 6px;
    }
}