@font-face {
    font-family: 'TWKLausanne';
    src: url('/static/font/TWKLausanne-400.otf') format('opentype');
}


body {
    font-family: 'TWKLausanne', sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    min-height: 100vh;
    background-color: #f8f8f8;
    scrollbar-width: thin; /* Ancho pequeño */
    scrollbar-color: black transparent; /* Colores personalizados */
}

.container {
    text-align: left;
    width: 100%;
    max-width: 100%; /* Restringe el ancho máximo al 100% */
    min-height: 100%;
    position: relative;
    z-index: 1;
    box-sizing: border-box; /* Asegura que padding no aumente el ancho */
}

.project-link-wrapper {
    text-decoration: none;
    display: block;
}

.project-container {
    position: relative;
    overflow: hidden;
    perspective: 100000px;
    z-index: 1;
    max-width: 100%; /* Restringe el ancho al 100% */
    box-sizing: border-box; /* Incluye bordes y padding en el cálculo de ancho */
    height: auto; /* Asegura que el contenedor crezca según el contenido */
}

.project-link {
    display: block;
    transform: translate3d(0, 0, 0);
    transform-origin: top;
    font-size: clamp(1.5rem, 6vw, 10rem);
    transition: transform 0.5s ease;
    color: black;
    line-height: 0.8;
    max-width: 100%; /* Restringe el ancho máximo */
    box-sizing: border-box; /* Incluye padding en el cálculo de ancho */
}

.project-details {
    position: absolute;
    font-size: clamp(0.75rem, 1.2vw, 5rem);
    color: black;
    top: 0;
    transform-origin: bottom;
    left: 0;
    width: 100%; /* Ocupa todo el ancho del contenedor */
    height: 100%; /* Ocupa todo el alto del contenedor */
    display: flex;
    flex-direction: row; /* Las columnas ahora están en fila */
    justify-content: space-between; /* Espacia las columnas */
    align-items: center; /* Centra verticalmente las columnas */
    padding: 0px 8px;;
    transform: translate3d(0, 0, -100px) rotateX(-90deg);
    z-index: 2;
    transition: transform 0.3s ease;
}

.type-client-column {
    color: black;
    font-size: 100%;
    cursor: pointer;
    flex: 1; /* Ocupa 1 parte proporcional del espacio */
    display: flex;
    flex-direction: column; /* Alinea los elementos verticalmente */
    justify-content: flex-start;
    text-align: left;
}

.client-label {
    color: #969696;
}

.details-column {
    flex: 2; /* Ocupa 2 partes proporcionales del espacio */
    display: flex;
    justify-content: flex-start; /* Alinea contenido al inicio */
    align-items: center;
    gap: 10px; /* Espacio entre las imágenes */
    overflow-x: auto;
    padding: 0;
    margin: 0;
    position: relative;
}

.project-image {
    flex-shrink: 0; /* No reduce su tamaño más allá del contenido */
    height: 50px;
    width: auto;
    object-fit: cover;
    margin: 0;
    padding: 0;
    border: none;
}
.project-container:hover .project-link,
.project-container.hover .project-link {
    transform: translate3d(0, -50px, 100px) rotateX(90deg);
}

.project-container:hover .project-details,
.project-container.hover .project-details {
    transform: translate3d(0, 0, 0) rotateX(0deg);
}

/* 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 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: black;
    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: #000000; /* Fondo negro */
    color: #f8f8f8; /* Texto blanco */
}


@media (max-width: 1024px) {
    body{
        background-color: #000000;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
        mix-blend-mode: difference;
    }
    .view-mode {
        display: none;
    }
    .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;
    }
    
    .container {
        width: 100%;
        max-width: 100%; /* Evita restricciones */
    }
    .project-container {
        overflow: visible;
        height: auto;
    }

    .project-link {
        transform: none;
        font-size: 50px;
        color:#f8f8f8;
        mix-blend-mode: black;
        word-wrap:break-word; /* Evita desbordamientos del texto */
        box-sizing:border-box; /* Incluye padding en el cálculo de ancho */
    }

    .project-details {
        display: none;
    }
    .project-container:hover .project-link {
        transform: translate3d(0, 0, 0) rotateX(0deg);
    }
    
    .project-container:hover .project-details {
        transform: translate3d(0, 0, 0) rotateX(0deg);
    }
    .dropdown-menu {
        position: absolute;
        bottom: 30px; /* Posiciona arriba de "CONTACT" */
        justify-content: right;
        display: none; /* Oculto por defecto */
        flex-direction: column;
        text-align: right;
        right: 3px;
        transform: translateX(-50%);
    }
    
} 


/* 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;
    }
}

/* Aplica la animación al cargar la página */
body {
    animation: fadeIn 2s ease-in-out;
}

/* Clase para iniciar el fade-out al navegar */
body.fade-out {
    animation: fadeOut 2s ease-in-out;
}

.view-mode {
    position: fixed;
    top: 3px;
    right: 5px;
    color: #000000;
    font-size: 0.8rem;
    cursor: pointer;
    z-index: 1000;
    padding: 3px 3px;
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.view-mode:hover {
    background-color: #000000;
    color: #f8f8f8;
}

.view-mode.active {
    background-color: #000000; /* Fondo negro en modo activo */
    color: #f8f8f8; /* Texto blanco en modo activo */
}

.overview-text,
.details-text {
    display: inline-block;
    font-family: 'TWKLausanne', sans-serif;
    transition: opacity 0.3s ease;
}

/* Muestra/Oculta los textos según el estado */
.view-mode .details-text {
    display: none; /* Por defecto, oculta "DETAILS" */
}

.view-mode.active .details-text {
    display: inline-block; /* Muestra "DETAILS" cuando está activo */
}

.view-mode.active .overview-text {
    display: none; /* Oculta "OVERVIEW" cuando está activo */
}
/* 🔹 MENÚ EN DESKTOP (Dropdown sobre CONTACT) */

/* 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: black;
    padding: 5px 10px;
    display: block;
}

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






/* 🔹 MENÚ EN MÓVIL (Pantalla completa) */
@media (max-width: 800px) {
    /* Fondo oscuro (NO OCULTA fixed-nav) */
    .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;
    }
}