/* =========================================================
   TODOS LOS LUGARES — sincronizado con el mapa (experience-nav.js)
   Móvil: buscador + filas compactas (sticker · nombre · categoría · Ver →)
   ≥768px: buscador + rejilla de stickers sobre la página (sin tarjetas)
   ========================================================= */

.lugares {
  position: relative; z-index: 2;
  width: min(100%, 1180px); margin: var(--space-xl) auto 0;
  padding: 0 var(--gutter);
}

/* ---------- Título + contador ---------- */
.lugares-cabecera { text-align: center; }
.lugares-contador { margin-top: .4rem; font-size: .8rem; color: var(--color-ink-soft); }

/* ---------- Buscador: renglón de cuaderno con lupa de tinta ---------- */
.lugares-buscar {
  position: relative;
  width: min(100%, 420px); margin: var(--space-md) auto var(--space-sm);
}
.lugares-buscar input {
  width: 100%; min-height: 44px; padding: .55rem 2rem .55rem .1rem;
  font: inherit; font-size: 1rem; color: var(--color-ink);   /* 16px: evita el zoom de iOS */
  background: transparent;
  border: 0; border-bottom: 1.5px solid var(--color-ink); border-radius: 0;
  -webkit-appearance: none; appearance: none;
}
.lugares-buscar input::placeholder { color: var(--color-ink-soft); }
.lugares-buscar input:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 4px; border-radius: 2px; }
.lugares-buscar input::-webkit-search-cancel-button { margin-right: 1.4rem; }
.lugares-lupa {
  position: absolute; right: .1rem; top: 50%; width: 20px; height: 20px; transform: translateY(-50%);
  fill: none; stroke: var(--color-ink); stroke-width: 1.6; stroke-linecap: round;
  pointer-events: none;
}

.lugares-vacio {
  margin-top: var(--space-sm); text-align: center;
  font-family: var(--font-hand); font-weight: 700; font-size: 1.25rem; color: var(--color-ink-soft);
}

/* ---------- Lista (móvil: filas) ---------- */
.lugares-lista {
  display: flex; flex-direction: column; gap: .1rem;
  margin: 0; padding: 0; list-style: none;
}
.lugar-item {
  --giro: 0deg;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  border-bottom: 1px solid var(--color-line-soft);
}
.lugar-item:last-child { border-bottom: 0; }

/* El sticker va directo sobre la página, sin tarjeta */
.lugar {
  display: grid; grid-template-columns: 76px minmax(0, 1fr); grid-template-rows: auto auto;
  column-gap: .9rem; align-items: center;
  width: 100%; min-width: 0; min-height: 44px; padding: .5rem .2rem;
  background: none; border: 0; border-radius: var(--radius-hand-sm);
  color: var(--color-ink); text-align: left;
  cursor: pointer;
}
.lugar img {
  grid-row: 1 / 3;
  width: 76px; height: 52px; object-fit: contain;
  filter: var(--sombra-objeto);
  transform: rotate(var(--giro));
  transition: transform var(--transition-fast);
}
.lugar-nombre {
  align-self: end; justify-self: start;
  font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; line-height: 1.3;
}
.lugar-cat { align-self: start; margin-top: .1rem; font-size: .78rem; line-height: 1.25; color: var(--color-ink-soft); }
.lugar-frase { display: none; }                 /* móvil: velocidad; la historia vive en la ficha */

@media (hover: hover) {
  .lugar:hover img { transform: translateY(-2px) rotate(var(--giro)); }
}
/* Lugar activo: Pergamino lo señala con marcador amarillo bajo el nombre; el sticker se endereza */
.lugar[aria-current="true"] img { transform: rotate(0deg) scale(1.05); }
.lugar[aria-current="true"] .lugar-nombre {
  background: linear-gradient(transparent 52%, var(--color-yellow-wash) 52%, var(--color-yellow-wash) 92%, transparent 92%);
}

/* Acceso directo a la ficha */
.lugar-ficha {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 .5rem;
  background: none; border: 0; cursor: pointer; white-space: nowrap;
  font-family: var(--font-ui); font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-ink-soft);
  transition: color var(--transition-fast);
}
.lugar-ficha:hover, .lugar-ficha:focus-visible,
.lugar[aria-current="true"] + .lugar-ficha { color: var(--color-ink); }

/* =========================================================
   ≥768px: rejilla de stickers
   ========================================================= */
@media (min-width: 768px) {
  .lugares-lista {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--space-md) var(--space-sm);
    margin-top: var(--space-md);
  }
  .lugar-item {
    display: flex; flex-direction: column; align-items: center;
    border-bottom: 0;
  }
  .lugar {
    display: flex; flex-direction: column; align-items: center;
    padding: .4rem .3rem .2rem;
    text-align: center;
  }
  .lugar img { width: auto; max-width: 100%; height: 92px; }
  .lugar-nombre { margin-top: .6rem; align-self: center; }
  .lugar-cat { margin-top: .15rem; align-self: center; }
  .lugar-frase {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin-top: .3rem; max-width: 22ch;
    font-size: .8rem; line-height: 1.35; color: var(--color-ink-soft);
  }
}

@media (min-width: 1024px) {
  .lugares-lista { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}