/* =========================================
   FLOPPY: Disquetes físicos de plástico
   con etiqueta pegada y obturador metálico
   ========================================= */

.floppy-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

.floppy-card {
  /* El plástico tintado del cuerpo */
  --fa: var(--rgb-pink);
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.14) 0%, transparent 40%),
    linear-gradient(165deg, rgba(var(--fa), 0.55) 0%, rgba(var(--fa), 0.3) 60%, rgba(var(--fa), 0.42) 100%),
    #1c1630;
  border-radius: 4px 4px 8px 4px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -2px 4px rgba(0, 0, 0, 0.45),
    0 6px 14px rgba(0, 0, 0, 0.5);
  color: inherit;
  cursor: pointer;
  display: block;
  height: 116px;
  position: relative;
  text-decoration: none;
  transition: transform 0.15s ease;
  width: 116px;
}

.floppy-card:nth-child(3n+2) { --fa: var(--rgb-cyan); }
.floppy-card:nth-child(3n+3) { --fa: var(--rgb-purple); }

/* Tiradas sobre la mesa, ninguna recta */
.floppy-card:nth-child(odd)  { transform: rotate(-2.5deg); }
.floppy-card:nth-child(even) { transform: rotate(1.8deg); }

.floppy-card:hover {
  transform: rotate(0) translateY(-6px);
  z-index: 2;
}

/* Obturador metálico */
.floppy-metal {
  background: linear-gradient(90deg, #9a92ad 0%, #cdc7dd 45%, #847b9c 100%);
  border-radius: 0 0 2px 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  height: 24px;
  left: 50%;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 52px;
}

.floppy-metal::after {
  background-color: #221c33;
  border-radius: 1px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8);
  content: "";
  height: 14px;
  position: absolute;
  right: 9px;
  top: 4px;
  width: 9px;
}

/* Etiqueta de papel escrita a mano */
.floppy-label {
  align-items: center;
  background: linear-gradient(175deg, #f4ecf7 0%, #dcd2e6 100%);
  border-radius: 2px;
  bottom: 9px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  color: #2b2438;
  display: flex;
  font-family: var(--font-pixel);
  font-size: 0.95rem;
  justify-content: center;
  left: 9px;
  line-height: 1.1;
  padding: 4px;
  position: absolute;
  right: 9px;
  text-align: center;
  top: 34px;
}