.languages {
    position: absolute; /* Fijar los botones en la pantalla */
    display: flex;
    justify-content: flex-end;
    padding-top: 30px; /* Distancia desde la parte superior */
    gap: 1rem; /* Espacio entre los botones */
    /* z-index: 50 !important; */
    width: 300px;
    height: 60px;
    margin-left: 500px;
}

.lang-button {
    background-color: transparent;
    border: 0;
    cursor: pointer;
    color: rgba(30,107,167,1); /* 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: rgb(30,107,167,1);  /* 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 {
    color: rgba(30,107,167,1);   /* Color del | */
    font-size: 25px;  /* Tamaño del | */
}

body.overlay-active .languages {
    display: none;
}

/* body.overlay .languages {
    display: none;
} */

/*Ocultamiento imágenes español cuando el website está inglés*/

body {
    visibility: hidden;
    opacity: 0;
}

body.loaded {
    visibility: visible;
    opacity: 1;
}

/* Oculta imágenes hasta que se actualicen */
img[data-image] {
    visibility: hidden;
    opacity: 0;
}

img[data-image].loaded {
    visibility: visible;
    opacity: 1;
}

body.overlay_mov-active .languages {
    display: none;
}

@media (max-width: 1800px) {
    .languages{
        padding-top: 1.5%;
        width: 20%;
        height: 30px;
        margin-left: 22%;
        gap: 0.9rem; /* Espacio entre los botones */
    }
    .lang-button{
        font-size: clamp(10px, 2vw, 20px);
        padding: 5px 5px;
    }
}
@media (max-width: 1700px) {
    .languages{
        margin-left: 22%;
        gap: 0.8rem;
    }
    .lang-button{
        font-size: clamp(10px, 2vw, 18px);
    }
}
@media (max-width: 1500px) {
    .languages{
        margin-left: 24%;
    }
    .lang-button{
        font-size: clamp(16px, 2vw, 13px);
    }
    .separator {
        font-size: 19px;  /* Tamaño del | */
    }
}
@media (max-width: 1200px) {
    .languages{ 
        margin-left: 23%;
        gap: 0.5rem;
    }
    .lang-button{
        font-size: clamp(5px, 2vw, 9px);
    }
    .separator {
        font-size: 15px;  /* Tamaño del | */
    }
}
@media (max-width: 768px) {
    .languages{
        padding-top: 3px; /* Distancia desde la parte superior */
        width: 100%;
        height: 30px;
        margin-left: 0px;
        gap: 0.1rem; /* Espacio entre los botones */
        display: flex;
        align-items: center;
    }
    .lang-button{
        font-size: 15px; /* Tamaño de texto */
        padding: 7px 7px; /* Espacio alrededor del texto */
    }
}