nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white; /* Cambiado al color principal de la empresa */
    padding: 10px;
    box-shadow: 0 1px 0 rgba(21, 89, 158, 0.15); /* Sombras solo en la parte inferior */
}

.logo img {
    height: 60px;
}

.menu-icon {
    display: none;
    cursor: pointer;
}

.menu-icon .bar {
    width: 25px;
    height: 3px;
    background-color: #482414;
    margin: 5px 0;
}

.menu {
    list-style: none;
    display: flex;
}

.menu a {
    text-decoration: none;
    color: #482414;
    font-size: 22px; /* Tamaño de letra ajustado para dispositivos móviles */
    padding: 5px 10px;
}

/* Estilos para el menú desplegable en pantallas pequeñas */
@media screen and (max-width: 768px) {
    .menu {
        display: none;
        flex-direction: column;
        background-color: rgb(218, 218, 218); /* Cambiado al color principal de la empresa */
        position: absolute;
        top: 70px;
        right: 0;
        width: 100%; 
    }

    .menu.active {
        display: flex;
    }

    .menu-icon {
        display: block;
        cursor: pointer;
        transition: transform 0.2s; /* Agregamos una transición de transformación */
    }
    .menu li {
        display: flex;
        justify-content: center;
    }
    .menu a {
        text-decoration: none;
        color: #482414; /* Cambiado al color de texto en el menú desplegable */
        font-size: 30px; /* Tamaño de letra mayor para dispositivos móviles */
        transition: color 0.3s; /* Efecto de transición al cambiar el color al hacer clic */
        text-align: center; /* Centrar el texto horizontalmente */
        padding: 10px 0px; /* Añade espacio alrededor del texto para centrarlo verticalmente */
    }
    .menu li:active{
        background-color: rgb(171, 171, 171);/* Cambia el color al hacer clic */
    }

    .menu-icon .bar {
        width: 25px;
        height: 3px;
        background-color: #482414;
        margin: 5px 0;
    }
    
    /* Efecto cuando se hace clic en el icono del menú */
    .menu-icon.active .bar:nth-child(2) {
        opacity: 0; /* La barra del medio desaparece */
    }
    
    .menu-icon.active .bar:first-child {
        transform: rotate(45deg) translate(5.5px, 5.5px); /* Rota y mueve la barra superior para formar una cruz */
    }
    
    .menu-icon.active .bar:last-child {
        transform: rotate(-45deg) translate(5.5px, -5.5px); /* Rota y mueve la barra inferior para formar una cruz */
    }
    

}