* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  nav a {
    font-family: "Roboto Slab", serif;
    font-size: 16px;
    font-weight: 900; /* 700 para negrita, 400 para regular */
  }
  
  body {
    min-height: 100vh;

    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    
  }
  
  nav {
    background-color: rgba(255, 255, 255, 0.767); /* Fondo blanco semitransparente */
    backdrop-filter: blur(10px); /* Desenfoque de fondo */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Sombra suave */
    position: fixed; /* Fija la barra en la parte superior */
    top: 0; /* Fija la posición en la parte superior */
    width: 100%; /* Barra ocupa todo el ancho */
    z-index: 1000; /* Asegura que la barra esté en la capa superior */
  }
  
  /* Estilos para los elementos de la lista dentro de la barra de navegación */
  nav ul {
    width: 100%;
    list-style: none; /* Elimina los marcadores de lista */
    display: flex; /* Alinea los elementos en fila */
    justify-content: flex-end; /* Alinea los elementos a la derecha */
    align-items: center; /* Centra verticalmente los elementos */
    padding: 10px 20px; /* Padding dentro del nav */
  }
  
  /* Estilos para los elementos de lista individuales */
  nav li {
    height: 50px; /* Altura de cada elemento */
  }
  
  /* Estilos para los enlaces de navegación */
  nav a {
    height: 100%;
    padding: 0 20px; /* Espacio alrededor del texto del enlace */
    text-decoration: none; /* Elimina subrayado */
    display: flex;
    align-items: center; /* Centra verticalmente el texto */
    color: rgb(17, 26, 43); /* Color del texto */
    transition: color 0.3s ease, background-color 0.3s ease; /* Transiciones suaves al pasar el ratón */
  }
  
  /* Cambia el color y el fondo del enlace al pasar el ratón */
  nav a:hover {
    color: #007aff; /* Color azul en el hover */
    background-color: rgba(0, 122, 255, 0.1); /* Fondo azul translúcido en el hover */
    border-radius: 8px; /* Bordes redondeados */
  }
  
  /* Margen automático para el primer elemento, empujándolo a la izquierda */
  nav li:first-child {
    margin-right: auto;
  }
  
  .sidebar {
    position: fixed; /* Posición fija */
    top: 0;
    right: 0;
    height: 100vh; /* Ocupa toda la altura de la pantalla */
    width: 250px; /* Ancho fijo */
    background-color: rgba(255, 255, 255, 0.95); /* Fondo blanco translúcido */
    backdrop-filter: blur(12px); /* Desenfoque de fondo */
    box-shadow: -10px 0 10px rgba(0, 0, 0, 0.1); /* Sombra para darle profundidad */
    list-style: none; /* Elimina los marcadores de lista */
    display: flex; /* Alineación en columna */
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding-top: 20px; /* Espacio superior */
    transform: translateX(100%); /* Fuera de la vista inicialmente */
    opacity: 0; /* Inicialmente invisible */
    transition: transform 0.5s ease, opacity 0.5s ease; /* Transiciones suaves */
  }
  
  .sidebar.show {
    transform: translateX(0);
    opacity: 0.1; /* Menú casi completamente opaco */
  }

  
  .sidebar li {
    width: 100%;
  }
  
  .sidebar a {
    width: 100%;
    padding: 15px 20px;
    text-decoration: none;
    color: rgb(35, 39, 49);
    transition: color 0.3s ease, background-color 0.3s ease;
  }
  
  .sidebar a:hover {
    color: #007aff;
    background-color: rgba(0, 122, 255, 0.1);
  }
  
  .menu-button {
    display: none;
  }
  
  @media (max-width: 800px) {
    .hideOnMobile {
      display: none;
    }
    .menu-button {
      display: block;
    }
  }
  
  @media (max-width: 400px) {
    .sidebar {
      width: 100%;
    }
  }
  

  





* {
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    margin: 10;
    padding: 10;
}

img {
    width: 100%;
}

.collage {
    border-radius: 0px;
    display: flex;
    padding: 0px;
    flex-wrap: wrap;
    animation: fadeIn 2s forwards;
    justify-content: center;
}

.columna {
    border-radius: 0px;
    flex: 15%;
    padding: 1%;
}

.columna img {
    border-radius: 0px;
    margin-top: 25px;
    transition: transform 0.2s;
}




@media (max-width: 768px) {
    .collage {
        margin-top: 1px;
        border-radius: 0px;
        gap: 1px;
        padding: 1px;
    }

    .columna {
        flex: 1 1 45%;
        padding: 1%;
    }

    .columna img {
        margin-top: 10px;
    }
}

@media (max-width: 480px) {
    .columna {
        flex: 1 1 100%;
        padding: 1%;
    }

    .columna img {
        margin-top: 5px;
    }
}

/* Estilo para la barra superior */
.top-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: white;
    height: 60px; /* Altura de la barra */
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra para darle relieve */
}

/* Estilo para el logo */
.logo {
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%); /* Centra el logo verticalmente dentro de la barra */
    max-width: 1050px; /* Tamaño máximo del logo */
    width: 15vw; /* Tamaño responsive */
    height: auto; /* Mantener la proporción del logo */
}

@media (max-width: 600px) {
    .logo {
        width: 20vw; /* Aumenta el tamaño del logo en pantallas pequeñas */
    }
}