@font-face {
    font-family: 'TWKLausanne';
    src: url('/static/font/TWKLausanne-400.otf') format('opentype');
}
body {
    font-family: 'TWKLausanne', sans-serif;
    color: #000000;
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    display: flex;
    overflow-x: hidden;
    animation: fadeIn 2s ease-in-out;
    position: relative;
    background-color: #000000; /* Fondo base (en caso de que la imagen no cargue) */
    overflow-x: hidden;
}

body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9));
    z-index: -1; /* Sigue detrás del contenido */
}

.hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top; /* Centra la parte superior de la imagen */
    z-index: -2; /* Detrás del degradado */
}


.container {
    display: flex;
    padding: 8px;
    width: 100%;
}

.image-section {
    flex: 0.8;
    height: 83vh;
}

.image-section img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* La imagen se ajusta sin deformarse */
}

.text-section {
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* Permite scroll solo en la sección de texto si es necesario */
}


.description {
    font-size: 1rem;
    width: 25%;
    position: absolute;
    color: #f8f8f8;
    margin: 0;
    padding: 0;
}


.awards-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.8rem;
    color: #f8f8f8;
    position: absolute;
    bottom: 0;
}

.awards-list li {
    margin-bottom: 15px;
}

.awards-list li strong {
    color: #f8f8f8;
}

.contact a {
    text-decoration: none;
    color: #f8f8f8;
    transition: color 0.3s ease;
}


/* Estilo del contenedor de navegación */
.fixed-nav {
    position: fixed; /* Hace que el menú esté fijo en la página */
    bottom: 5px;
    justify-content: center;
    right: 5px;
    width: 20%; /* Puede ser un ancho completo o fijo */
    z-index: 100; /* Asegura que esté por encima de otros elementos */
}

/* Estilo de la lista */
.fixed-nav ul {
    display: flex;
    justify-content: space-between; /* Espacia los elementos del menú */
    list-style: none;
    margin: 0 ;
}

/* Estilo de los enlaces */
.fixed-nav ul li a {
    text-decoration: none;
    mix-blend-mode: difference; /* Cambia el color en función del fondo */
    color: #ffffff;
    padding: 3px 3px;
    font-size: clamp(0.8rem, 0.8rem + 1vw, 1rem); /* Tamaño mínimo, ideal y máximo */
    transition: color 0.3s ease;
}


.fixed-nav ul li a:hover {
    background-color: #f8f8f8; /* Fondo negro */
    color: #000000; /* Texto blanco */
}

/* Personaliza la barra de desplazamiento para navegadores basados en Webkit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 8px; /* Ancho de la barra */
    height: 12px; /* Altura de la barra */
}

::-webkit-scrollbar-thumb {
    background: black; /* Color del control deslizante */
}

::-webkit-scrollbar-track {
    background: transparent; /* Fondo del track */
}

/* Oculta las flechas de desplazamiento */
::-webkit-scrollbar-button {
    display: none; /* Oculta los botones de las flechitas */
}

/* Estilo base del menú desplegable */
.modal {
    position: fixed;
    bottom: 30px; /* Posiciona arriba de "CONTACT" */
    display: none; /* Oculto por defecto */
    flex-direction: column;
    text-align: right;
    right: 3px;
    z-index: 9999;
}

/* Muestra el menú cuando tiene la clase 'show' */
.modal.show {
    display: flex;
}

/* Estilos de los enlaces */
.modal a {
    text-decoration: none;
    color:#f8f8f8a4;
    padding: 5px 10px;
    display: block;
}

.modal a:hover {
    background: black;
    color: white;
}


/* 🔹 Media Query para Móvil */
@media (max-width: 1024px) {
    body{
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }

    .hero-image {
        position: fixed;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top; /* Centra la parte superior de la imagen */
        z-index: -2; /* Detrás del degradado */
    }
    
    .container {
        color: #f8f8f8;
        flex-direction: column;
        height: auto;
        width: auto;
        top: 8px;
        bottom: auto;
    }

    .image-section {
        height: 50vh;
    }

    .text-section {
        color: #f8f8f8;
        height: auto;
        padding: 20px 10px;
    }

    .description {
        color: #f8f8f8;
        font-size: 1rem;
        width: 100%;
        position: relative;
        padding: 0;
    }

    .awards-list {
        margin-top: 20px;
        color: #000000;
        font-size: 0.9rem;
        position: absolute;
        bottom: 20px;
    }
    .awards-list li {
        color: #f8f8f8;
    }
    
    .awards-list li strong {
        color: #f8f8f8;
    }


    .fixed-nav {
        all: unset; /* Resetea todos los estilos (márgenes, paddings, etc.) */
        position: fixed;
        bottom: 0;
        right: 0;
        width: 100%; /* Asegura que ocupe todo el ancho del viewport */
        max-width: 100%; /* Evita cualquier desbordamiento */
        padding: 10px;
        z-index: 100; /* Mantiene el nav por encima de otros elementos */
        display: flex;
        justify-content: space-around; /* Espacia uniformemente los elementos */
        box-sizing: border-box; /* Asegura que el padding no aumente el ancho */
    }
    

    .fixed-nav ul {
        all: unset; /* Reinicia los estilos predeterminados del navegador */
        list-style: none; /* Elimina los puntos de lista */
        display: flex; /* Los elementos están en línea */
        justify-content: space-between; /* Distribuye los enlaces uniformemente */
        width: 100%; /* Asegura que ocupe el ancho completo */
        padding: 0; /* Sin espaciado interno */
        margin: 0; /* Sin márgenes */
    }
    
    .fixed-nav ul li {
        flex: 1; /* Cada elemento ocupa el mismo espacio */
        text-align: center; /* Centra el contenido dentro de cada li */
    }
    
    .fixed-nav ul li a {
        all: unset; /* Reinicia estilos predeterminados del navegador */
        display: block; /* Hace que el enlace sea un bloque clicable */
        text-decoration: none; /* Elimina subrayado */
        color: white; /* Color de texto */
        margin: 0; /* Espaciado interno */
        font-size: clamp(0.8rem, 0.8rem + 1vw, 1rem); /* Tamaño de fuente responsivo */
        background-color: transparent; /* Sin fondo por defecto */
        text-align: center; /* Centra el texto */
        transition: color 0.3s ease, background-color 0.3s ease;
    }
    
    .fixed-nav ul li a:hover {
        background-color: black; /* Fondo negro al pasar el ratón */
        color: white; /* Texto blanco */
        cursor: pointer;
    }

    .modal {
        position: fixed;
        top: 0;
        left: 0;
        color: #f8f8f8;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.9);
        z-index: 9999;
        display: none;
        justify-content: center;
        align-items: center;
    }

    .modal-content {
        padding: 20px;
        text-align: center;
        width: 80%;
    }

    .modal a {
        font-size: 1.5rem;
        padding: 15px;
        color: #f8f8f8a4;
    }

    .modal a:hover {
        background: none;
        color: white;
    }
}

/* Animación de fade-in */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Animación de fade-out */
@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}