/* ---------------- estilos ---------------- */
.corkboard-wrapper {
  max-width: 1000px;
  margin: 30px auto;
  text-align: center;
}

/* tablero (corcho) */
.corkboard {
  margin-top: 25px;
  width: 100%;
  min-height: 700px;
  background: url("src/bg-corcho.jpg") center/cover no-repeat;
  border: 14px solid #d1a774;
  border-radius: 8px;
  padding: 20px;
  position: relative; /* imprescindible */
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.25);
  z-index: 1;
}

/* polaroid (estado inicial oculto y arriba) */
.photo-item {
  width: 140px;
  background: white;
  padding: 10px 10px 22px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  border-radius: 4px;
  position: absolute;
  transform-origin: top center;
  z-index: 5;
  will-change: transform, left, top;
  opacity: 0; /* oculto inicialmente */
  transform: translateY(-160px) rotate(-20deg); /* estado inicial real */
}

/* Animación cuando está listo */
.photo-item.drop {
  animation: dropPhoto 0.9s cubic-bezier(.22,.9,.32,1) forwards;
  opacity: 1;
}

/* Animación sin opacidad cambiada */
@keyframes dropPhoto {
  0% {
    transform: translateY(-160px) rotate(-20deg);
  }
  60% {
    transform: translateY(12px) rotate(6deg);
  }
  80% {
    transform: translateY(-6px) rotate(-3deg);
  }
  100% {
    transform: translateY(0) rotate(var(--rotation));
  }
}


/* imagen */
.photo-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 3px;
}

/* chincheta */
.pin {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  position: absolute;
  top: -9px;
  left: calc(50% - 9px);
  z-index: 10;
  box-shadow: 0 3px 4px rgba(0,0,0,0.45);
}
.pin.red { background: #d32f2f; }
.pin.green { background: #2e7d32; }
.pin.blue { background: #1565c0; }
.pin.yellow { background: #fbc02d; }
.pin.white { background: #f5f5f5; border: 1px solid #aaa; }

/* hover: levantar */
.photo-item:hover {
  transform: translateY(0) rotate(0deg) scale(1.08);
  z-index: 60;
  transition: transform 0.18s ease;
}

/* responsive */
@media (max-width:500px){
  .photo-item { width: 110px; padding-bottom:18px; }
}

/* ------ MODAL IMAGEN AMPLIADA ------ */

.img-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 999;
}

.img-modal.active {
  visibility: visible;
  opacity: 1;
}

.img-modal img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 8px;
  box-shadow: 0 0 25px rgba(0,0,0,0.8);
  transform: scale(0.6);
  transition: transform 0.25s ease;
}

.img-modal.active img {
  transform: scale(1);
}