/* Rentas Tulum v8 — orden y fluidez.
   · Índice del recorrido: píldora fija "3/11 · La Veleta" con avance, lista de paradas y "Saltar recorrido".
   · Paradas un poco más cortas para que el viaje entre zonas fluya sin perder el tiempo de lectura.
   · Filtro de precio (aviso de "precio a consultar"), descripción en párrafos y mosaicos del mapa en tono sobrio. */

/* ——— Recorrido: las 11 paradas seguidas ——— */
.tour { position: relative; }
.interlude { min-height: 90vh; min-height: 90svh; }
@media (max-width: 1023px) { .interlude { min-height: 86vh; min-height: 86svh; } }
html.w3d-nogl .interlude { min-height: 78vh; min-height: 78svh; }
.il-card .kicker { font-variant-numeric: tabular-nums; }

/* ——— Índice del recorrido ——— */
.tour-nav {
  position: fixed; z-index: 45; left: 50%; top: calc(var(--topbar-h) + env(safe-area-inset-top) + 10px);
  transform: translate(-50%, -6px); width: max-content; max-width: calc(100vw - 24px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 320ms var(--ease), transform 320ms var(--ease), visibility 0s linear 320ms;
}
html.in-tour .tour-nav { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition: opacity 320ms var(--ease), transform 320ms var(--ease), visibility 0s; }
body.lock .tour-nav { opacity: 0 !important; visibility: hidden !important; }
.tn-pill {
  position: relative; display: flex; align-items: center; gap: 2px; padding: 4px; overflow: hidden;
  border-radius: var(--r-pill); background: rgba(251, 250, 247, .94); box-shadow: var(--shadow-2);
  border: 1px solid rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
}
.tn-toggle {
  display: inline-flex; align-items: center; gap: .55em; min-height: 40px; padding: 0 .55em 0 .9em; border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--ink); font: inherit; font-size: .9375rem; cursor: pointer; white-space: nowrap;
}
.tn-toggle:hover { background: rgba(42, 33, 25, .05); }
.tn-toggle:focus-visible, .tn-skip:focus-visible, .tn-list a:focus-visible { outline: none; box-shadow: var(--focus); }
.tn-count { font-size: .8125rem; font-weight: 700; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.tn-label { font-weight: 650; max-width: 42vw; overflow: hidden; text-overflow: ellipsis; }
.tn-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: transform var(--dur-fast) var(--ease); }
.tour-nav.open .tn-toggle svg { transform: rotate(180deg); }
.tn-skip {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 .95em; border-radius: var(--r-pill);
  font-size: .8125rem; font-weight: 600; color: var(--muted); text-decoration: none; white-space: nowrap;
}
.tn-skip:hover { color: var(--ink); background: rgba(42, 33, 25, .05); }
.tn-bar { position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; border-radius: 2px; background: rgba(42, 33, 25, .08); overflow: hidden; }
.tn-bar i { position: absolute; inset: 0; background: var(--gold); transform-origin: 0 50%; transform: scaleX(var(--tn-p, 0)); transition: transform 420ms var(--ease); }
.tn-list {
  list-style: none; margin: 8px auto 0; padding: 8px; width: min(560px, calc(100vw - 24px));
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  border-radius: var(--r-lg); background: rgba(251, 250, 247, .97); box-shadow: var(--shadow-3);
  max-height: calc(100vh - var(--topbar-h) - 90px); overflow: auto; overscroll-behavior: contain;
}
.tn-list[hidden] { display: none; }
.tn-list a {
  display: flex; align-items: center; gap: .7em; min-height: 44px; padding: 0 .8em; border-radius: var(--r-sm);
  color: var(--ink); text-decoration: none; font-size: .9375rem; font-weight: 550;
}
.tn-list a:hover { background: var(--bg); }
.tn-n {
  display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; flex: none; border-radius: 50%;
  font-size: .75rem; font-weight: 700; color: var(--muted); background: var(--bg-2); font-variant-numeric: tabular-nums;
}
.tn-list a[aria-current] { background: var(--gold-soft); }
.tn-list a[aria-current] .tn-n { background: var(--gold-ink); color: #fff; }
@media (max-width: 640px) {
  .tour-nav { top: calc(var(--topbar-h) + env(safe-area-inset-top) + 8px); }
  .tn-list { grid-template-columns: 1fr; }
  .tn-toggle { font-size: .875rem; min-height: 38px; }
  .tn-skip { min-height: 38px; padding: 0 .8em; }
  .tn-label { max-width: 38vw; }
}
@media (max-width: 359px) { .tn-skip { display: none; } }
@media (prefers-reduced-motion: reduce) { .tour-nav, .tn-bar i, .tn-toggle svg { transition: none; } }

/* ——— Catálogo: filtro de precio ——— */
/* Cada píldora de filtro mide lo que su texto (Chrome, Edge y Android): en el teléfono Zona y Precio se ven sin deslizar.
   Safari ignora la regla y conserva el ancho de siempre. */
@supports (field-sizing: content) {
  .pill-select select { field-sizing: content; }
}
.filter-note { margin: calc(var(--s2) * -1) 0 var(--s4); font-size: var(--fs-xs); color: var(--muted); }
.filter-note .linklike { font-weight: 650; color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; }
.empty .btn + .btn { margin-left: var(--s2); }

/* ——— Ficha: descripción en párrafos ——— */
.detail-info .desc-more { margin-top: var(--s3); color: var(--ink-2); max-width: 62ch; }

/* ——— Mapa: OpenStreetMap con un tono más sobrio, a juego con el sitio ——— */
.leaflet-container .rn-tiles { filter: saturate(.72) contrast(.96) brightness(1.03); }
@media (forced-colors: active) { .leaflet-container .rn-tiles { filter: none; } }