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

body {
  font-family: 'Montserrat', sans-serif;
  background-color: white;
  cursor: none;
}


/* CURSOR */

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 30px;     /* Tamaño del círculo */
  height: 30px;
  background-color: #DBF244;
  border-radius: 50%;
  pointer-events: none;  /* El cursor no bloquea clics */
  z-index: 1000;
  transform: translate(-50%, -50%);
}

/* TITULO */

header {
  text-align: center;
  margin: 50px 0;
}

.titulo-img {
  max-width: 150px; /* Ajusta según necesites */
  width: 100%;
  height: auto;
}



/* GALERÍA */

.grid-galeria {
  display: grid;
  grid-template-columns: repeat(3, 300px); /* Cada columna mide 300px */
  gap: 10px;
  justify-content: center;
}

.item {
  width: 300px;
  height: 300px;
  overflow: hidden;
  
}

.itema {
  width: 300px;
  height: 530px; /* Más alto que los demás */
  overflow: hidden;
}

.itemaa {
  width: 300px;
  height: 450px; /* Más alto que los demás */
  overflow: hidden;
}

.ancho {
  grid-column: span 3;
  width: 920px;  /* 3 x 300px + 2 x gap (2x10px) = 920px */
  height: auto; /* Altura personalizada aquí */
  overflow: hidden;
  position: relative;
}

.video {
  grid-column: span 3;
  width: 920px; /* o el ancho de tu grid */
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
  border: 2px solid #608CF3;
}
.video video {
  width: 100%;
  height: auto;
}



.item img,
.itema img,
.itemaa img,
.ancho img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 2px solid #608CF3;
}




/* BOTON VOLVER */

.volver-btn {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 9999;
  display: inline-block;
}

.volver-btn img {
  width: 50px; /* Puedes ajustar el tamaño aquí */
  height: auto;
  transition: transform 0.2s ease;
}

.volver-btn img:hover {
  transform: scale(1.1); /* Efecto al pasar el cursor */
}




/* RESPONSIVE */

@media (max-width: 1024px) {
  .grid-galeria {
    grid-template-columns: repeat(3, 220px); /* Reduce el ancho de cada columna */
    gap: 8px;
    justify-content: center;
  }
  .item, .itema, .itemaa {
    width: 220px;
  }
  .item {
    height: 220px;
  }
  .itema {
    height: 390px;
  }
  .itemaa {
    height: 330px;
  }
  .ancho, .video {
    width: 680px; /* 3 x 220 + 2 x 8 = 680px */
  }
  .volver-btn img {
    width: 40px;
  }
  .titulo-img {
    max-width: 120px;
  }
  .cursor {
    width: 20px;
    height: 20px;
  }
}


@media (max-width: 767px) {
  .grid-galeria {
    grid-template-columns: repeat(3, 150px); /* Sigue con 3 columnas pero más pequeñas */
    gap: 6px;
    justify-content: center;
  }
  .item, .itema, .itemaa {
    width: 150px;
  }
  .item {
    height: 150px;
  }
  .itema {
    height: 265px;
  }
  .itemaa {
    height: auto;
  }
  .ancho, .video {
    width: 462px; /* 3 x 150 + 2 x 6 = 462px */
  }
  .volver-btn img {
    width: 30px;
  }
  .titulo-img {
    max-width: 90px;
  }
  .cursor {
    width: 15px;
    height: 15px;
  }
}