/* Etiqueta de equipaje vintage — botón seleccionable reutilizado en la
   selección de paisaje (y potencialmente en otros menús futuros).
   Cada instancia recibe una ligera rotación aleatoria vía JS
   (--tag-rotate) para que parezcan tiradas a mano, no una grilla. */

.luggage-tag{
  --tag-rotate: 0deg;
  position: relative;
  flex: none;
  width: clamp(96px, 11vw, 130px);
  padding: 22px 10px 14px;
  background: linear-gradient(165deg, var(--parchment) 0%, #ddcda8 100%);
  border: 1px solid rgba(90, 65, 30, 0.35);
  border-radius: 4px 4px 10px 10px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
  color: #3a2c1a;
  font-family: var(--font-utility);
  cursor: pointer;
  transform: rotate(var(--tag-rotate)) translateY(0);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.luggage-tag::before{
  /* el "ojal"/agujero de la etiqueta */
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--void-edge);
  box-shadow: inset 0 0 0 2px rgba(90, 65, 30, 0.4);
  transform: translateX(-50%);
}

.luggage-tag__label{
  display: block;
  margin-top: 6px;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  line-height: 1.25;
  text-align: center;
}

.luggage-tag:hover{
  transform: rotate(var(--tag-rotate)) translateY(-4px);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.4);
}

.luggage-tag:focus-visible{
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.luggage-tag.is-selected{
  transform: rotate(0deg) translateY(-8px);
  border-color: var(--brass);
  box-shadow: 0 0 0 2px var(--brass), 0 12px 20px rgba(0, 0, 0, 0.45);
}