.languages {
    position: absolute; /* Fijar los botones en la pantalla */
    display: flex;
    justify-content: center;
    top: 760px; /* Centrado vertical */
    left: 955px; /* Centrado horizontal */
    transform: translate(-50%, -50%); /* Asegura que el contenedor se centre correctamente */
    gap: 1rem; /* Espacio entre los botones */
    z-index: 50 !important;
    width: 100%;
    height: 60px;
}

.lang-button {
    background-color: transparent;
    border: 0;
    cursor: pointer;
    color: white; /* Texto blanco */
    font-size: 22px; /* Tamaño de texto */
    padding: 5px 5px; /* Espacio alrededor del texto */
    transition: transform .2s; /* Efecto de escala */
    font-family: Raleway;
}

.lang-button.active {
    font-weight: 700 !important;  /*Aplica negrita al texto del idioma seleccionado */
    color: white;  /* Puedes cambiar el color si lo deseas */
}

.lang-button:hover {
    transform: scale(1.10);
}

.lang-button:focus {
    outline: none; /* Eliminar el borde del enfoque */
}

.separator {
    display: flex;
    align-items: center;
    color: white;  /* Color del | */
    font-size: 20px;  /* Tamaño del | */
    padding: 5px 5px;
}

/* body {
    visibility: hidden;
    opacity: 0;
    background-color: rgba(22,107,167,255)
} */
/* 
body.loaded {
    visibility: visible;
    opacity: 1;
} */

@media (max-width: 768px) {
    .languages {
        position: absolute;
        top: 62%; /* Centrado vertical */
        left: 50%; /* Centrado horizontal */
        padding: 0;
        gap: 0.1rem;
        width: 100%;
    }
    .separator {
        padding: 0px 0px;
        }
    .lang-button {
        font-size: 14px; /* Ajusta el tamaño del texto para dispositivos móviles */
        padding: 8px 15px; /* Un poco más de espacio para que se vea más grande */
    }
}