@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

body {
    font-family: 'JetBrains Mono',sans-serif;
    margin: 0;
    padding: 0;
    background: #e8e4e4;
    position: relative;
    padding-bottom: 3em;
    width: 100%;
    height: 100%;
    opacity: 1;
    animation: fadeIn 0.2s ease forwards;
    transition: opacity 0.2s ease-in-out;
}

body.fade-out {
    opacity: 0;
}

html {
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: scroll;
    min-height: 100vh;
    margin: 0;
    padding: 0; 
}

.main-content {
    min-height: calc(100% - 60px);
    padding-bottom: 20px; /* Espaciado opcional entre el contenido y la info-bar (TESTEAR)*/
}

nav{
    background: linear-gradient(to bottom, #020b4d, #1d5d98);
}

#info-bar{
    background: linear-gradient(to bottom, #1d5d98, #020b4d);
}

#nav-container{
    width: 100%;
    max-width: 100%;
    height: 11vh;
    overflow: hidden;
}

#navbar {
    height: 100%;
    width: 100%;
    max-width: 90%;
    overflow: hidden;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap:30%;
    padding-top: 0.5vh;
    padding-right: 5%;
    padding-left: 5%;
}

#logo-title-container {
    display: flex;
    align-items: center;
    gap: 1vw;
}

nav a, nav p, nav h1,nav{ 
    font-size: 0.8vw; /* Reduce el tamaño de la fuente */
    margin: 0; /* Elimina o reduce los márgenes */
    padding: 0; /* Elimina o reduce los rellenos */
}

nav img {
    height: 9vh; /* Asegúrate de que las imágenes o íconos sean más pequeños que el contenedor */
    width: auto; /* Mantiene la proporción de la imagen */
    float: left;
}

#navbar h1 {
    margin: 0;
    padding: 1vw;
    color: white;
    font-weight: 900; /* Peso ligero */
}

#navbar ul {
    margin: 0;  /* Quitar márgenes */
    padding: 0; /* Quitar rellenos */
    list-style-type: none; /* Quitar estilos de lista */
    display: flex; /* Asegurar que los elementos de la lista se alineen en fila */
}

#navbar ul li a {
    color: white;
    padding: 10px; /* Ajustar según tus necesidades */
    text-decoration: none; /* Quitar subrayado de los enlaces */
}

.nav-item { 
    position: relative; 
    padding: 0.8vh 0.7vw;
    margin: 0 0.5vw; 
    text-align: center;
    cursor: pointer; 
    transition: background-color 0.3s; /* Efecto de transición para el hover */
}

.nav-item::before, .nav-item::after {
    content: "";
    position: absolute;
    top: 10%; 
    bottom: 10%;
    width: 1px; /* Grosor del borde */
    background-color: black; /* Color del borde */
}

.nav-item::before {
    left: 0; /* Posiciona el pseudoelemento en el lado izquierdo */
}

.nav-item::after {
    right: 0; /* Posiciona el pseudoelemento en el lado derecho */
}

/* Efecto al pasar el mouse por encima del elemento */
.nav-item:hover {
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8); /* Sombreado negro opaco */
    transition: box-shadow 0.3s; /* Transición suave para el sombreado */
}

section {
    padding: 20px;
    margin: 20px;
}


#info-bar-container {
    width: 100%;
    height: 30%;
    padding: 1em 0;
    padding-bottom: 0;
    font-size: 1rem;
    color: white;
}

#info-bar {
    width: 100%;
    height: 100%; /* Altura especificada para la info-bar */
    display: flex;
    justify-content: center; /* Esto separará #contact-info y #logos */
    align-items: center; /* Centra verticalmente el contenido */
    padding: 0 2%; /* Añade un pequeño padding lateral para que el contenido no esté pegado a los bordes */
}

#contact-info {
    font-size: 1rem; /* Tamaño de fuente base, puedes ajustar según la necesidad */
    color: #ffffff; /* Color de texto oscuro, pero puedes ajustar según tu preferencia */
    /* Puedes añadir más estilos aquí según necesites, como márgenes, relleno, etc. */
    margin-left: -7vw;

}

.logos {
    display: flex;
    justify-content: space-between; /* Esto separará los logos entre sí si hay más de uno */
    align-items: center; /* Alinea los logos verticalmente */
    margin-left: 3vw;
}

#logos-social img {
    height: 5vh; /* Usa un porcentaje de la altura del contenedor para que las imágenes no sean demasiado grandes */
    width: auto; /* Mantiene las proporciones de las imágenes */
    margin-left: 15px; /* Espacio entre logos si hay más de uno. Solo afectará a partir del segundo logo. */
    margin-right: 15px; /* Espacio entre logos si hay más de uno. */
}

#logos-company img{
    height: 10vh; /* Usa un porcentaje de la altura del contenedor para que las imágenes no sean demasiado grandes */
    width: auto;
    margin-left: 10px; /* Espacio entre logos si hay más de uno. Solo afectará a partir del segundo logo. */
    margin-right: 0;
}

#find-us p{
    margin-left: 0;
    margin-right: 15px;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%); /* Comienza la animación moviendo la tarjeta fuera de la vista hacia arriba */
        opacity: 0; /* Comienza con una opacidad de 0 para un efecto suave */
    }
    to {
        transform: translateY(0); /* Termina la animación en su posición original */
        opacity: 1; /* La opacidad completa significa que el elemento es completamente visible */
    }
}


.team-card {
    width: 20%;
    height: 60vh;
    border: 1px solid #4e27b7;
    border-radius: 8px;
    padding: 15px;
    margin: 0 10px;
    text-align: center;
    position: relative;
    font-size: 1vw;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    opacity: 0;
    animation: slideDown 0.5s forwards; 
    animation-delay: 0.2s; /* Retardo para comenzar la animación (ajustar) */
}

.team-row {
    display: flex;
    justify-content: center; /* Centra las tarjetas horizontalmente */
    margin-bottom: 20px; /* Espacio entre las dos filas */
}

/* Para que no caigan al mismo tiempo */
.team-row:nth-child(1) .team-card:nth-child(1) { animation-delay: 0.2s; }
.team-row:nth-child(1) .team-card:nth-child(2) { animation-delay: 0.4s; }
.team-row:nth-child(1) .team-card:nth-child(3) { animation-delay: 0.6s; }
.team-row:nth-child(2) .team-card:nth-child(1) { animation-delay: 0.8s; }
.team-row:nth-child(2) .team-card:nth-child(2) { animation-delay: 1s; }
.team-row:nth-child(2) .team-card:nth-child(3) { animation-delay: 1.2s; }

.team-photo {
    height: 50%;
    width: auto;
    border-radius: 50%; /* Esto hará que la foto sea circular */
    margin-bottom: 10px;
}

.linkedin-icon {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%); /* Esto centra el icono horizontalmente en la tarjeta */
}

.linkedin-icon img {
    width: 25%;
    height: 25%;
}