:root {
    --color-principal: #ffffff;
    --color-secondary: #84A651;
    --color-negro: #000;

    --color-background: #e5e9eb;
    --color-transparent: transparent;

    --color-icon: #b5b6b7;
    --color-title: #1F3A8C;
    --color-back: #4c65b3;
    --color-subtitle: #99BF60;
    --color-text: #555;

    --color-border-reviews: #e5e6e7;
    --color-background-certificate: #f5f5f5;
    --color-background-contact: #fcfcfc;

    --janeth: #8c1ad3;
    --daniela: #4d61e1;
}

.menu-hamburguesa {
    width: 100%;
    display: flex;
    background: rgb(255, 255, 255);
    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(132, 166, 81, 1) 100%);
}

.logo-menu-hamburguesa,
.icono-hamburguesa {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
}

.logo-hamburguesa--img {
    display: block;
    width: 30%;
}

.icono-hamburguesa--icon {
    display: block;
    font-size: 5rem;
    color: var(--color-negro);
    transition: all 300ms;
    cursor: pointer;
}

.icono-hamburguesa--icon:hover {
    transform: scale(1.5);
    color: var(--color-background);
}

.submenu-hamburguesa {
    position: fixed; /* Cambiamos a fixed para que cubra toda la pantalla */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--color-secondary);
    display: none; /* Ocultamos el submenú por defecto */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 401;
}

.submenu__items {
    width: 95%;
    height: 90%; /* Ajustamos la altura para que el ícono de cerrar sea visible */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    font-size: 3rem;
    color: var(--color-principal);
}

.icono-equis {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}

.icon-equis--icono {
    font-size: 4rem;
    color: var(--color-principal);
}

@media screen and (max-width: 750px) {
    .menu_principal {
        display: none;
    }

    .menu-movil {
        display: block;
    }
}