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

/* Contenedor interno del lightbox */
#lightbox-content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

/* Imagen/video dentro del lightbox */
#lightbox-content img,
#lightbox-content video {
  max-width: 90%;
  max-height: 90%;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0,0,0,0.7);
}


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%;
  }
}



/*Este codigo es para las imagenes y videos sean responsive*/
/* Estilos generales del body */
body {
  font-family: Arial, sans-serif;
}

/* Contenedor del collage con grid */
.collage-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Siempre 3 columnas */
  gap: 50px;
  padding: 50px;
  margin-top: 5px;
}

/* Estilos para los elementos del collage */
.collage-item {
  position: relative;
}

.collage-item img,
.collage-item video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  margin-top: 40px;
}

.collage-item video {
  max-height: auto;
  max-width: 100%;
}

/* Estilos específicos para pantallas pequeñas */
@media (max-width: 768px) {
  .collage-container {
      grid-template-columns: repeat(3, 1fr); /* Mantén 3 columnas en pantallas pequeñas */
      gap: 20px; /* Reduce el espacio entre columnas en pantallas pequeñas */
      padding: 15px;
  }

  .collage-item img,
  .collage-item video {
      border-radius: 5px;
      margin-top: 20px; /* Ajusta el margen superior para dispositivos móviles */
  }
}