/* =========================================================
   PÁGINA DE UNA EXPERIENCIA (tours/<slug>/)
   Reutiliza la cabecera, el hero, las fichas y el pie del inicio;
   acá va solo lo propio de estas páginas.
   ========================================================= */

/* ---------- Portada con la foto del tour ---------- */
.hero--tour { min-height: min(92svh, 54rem); }
/* Velo más oscuro que en el inicio: hay fotos muy claras (salares, nieve) */
.hero--tour::after {
  background: linear-gradient(to top, rgba(34,37,42,.92) 0%, rgba(34,37,42,.6) 55%, rgba(34,37,42,.4) 100%);
}
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero--tour .hero__title {
  max-width: 18ch;
  font-size: clamp(2.5rem, min(8vw, 11svh), 6rem);
  line-height: .95;
  text-wrap: balance;
}
.hero--tour .hero__lead { margin-top: var(--s-5); }
.hero--tour .hero__base { flex-wrap: wrap; }
.hero--tour .hero__base strong { color: var(--c-roto); font-weight: 700; }
.hero__credit a { color: inherit; }
.hero__credit a:hover { color: var(--c-roto); }

/* Migas: Inicio / Experiencias */
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-5); }
.crumbs li {
  display: flex;
  gap: var(--s-2);
  font-size: var(--fs-small);
  font-variation-settings: 'wdth' var(--w-narrow);
  color: var(--c-on-dark-soft);
}
.crumbs li + li::before { content: "/"; opacity: .6; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--c-roto); text-decoration: underline; }

/* ---------- Contenido ---------- */
.tour-page {
  display: grid;
  gap: var(--s-7);
  max-width: var(--max);
  margin-inline: auto;
  padding: var(--s-8) var(--gutter);
}
.tour-page__main { display: grid; gap: var(--s-6); align-content: start; }
.tour-page__desc {
  max-width: var(--measure);
  font-size: var(--fs-lead);
  text-wrap: pretty;
}
.tour-page__note { max-width: var(--measure); font-size: var(--fs-small); color: var(--c-ink-soft); }
.tour-page__aside { display: grid; gap: var(--s-4); align-content: start; }

@media (min-width: 60rem) {
  .tour-page { grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--s-8); padding-block: var(--s-9); }
  .tour-page__aside { position: sticky; top: calc(var(--header-h) + var(--s-4)); }
}

/* Tarjeta de altura con regla de 2.000 a 6.000 m */
.alt-card {
  padding: var(--s-5);
  border-radius: var(--r-md);
  background: var(--c-grafito);
  color: var(--c-roto);
}
.alt-card__label,
.alt-card__town {
  font-size: var(--fs-small);
  font-variation-settings: 'wdth' var(--w-narrow);
  color: var(--c-on-dark-soft);
}
.alt-card__value {
  font-size: clamp(2.75rem, 5vw, 3.75rem);
  font-weight: 800;
  font-variation-settings: 'wdth' var(--w-wide);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--c-ambar);
}
.alt-scale {
  position: relative;
  height: 6px;
  margin-top: var(--s-4);
  border-radius: var(--r-pill);
  background: linear-gradient(var(--c-ambar), var(--c-ambar)) 0 0 / calc(var(--p) * 100%) 100% no-repeat,
              rgba(250, 250, 250, .16);
}
.alt-scale__town {
  position: absolute;
  top: -4px;
  left: calc(var(--town) * 100%);
  width: 2px;
  height: 14px;
  background: var(--c-roto);
}
.alt-scale__legend {
  display: flex;
  justify-content: space-between;
  margin-top: var(--s-2);
  font-size: .75rem;
  font-variation-settings: 'wdth' var(--w-narrow);
  color: var(--c-on-dark-soft);
}
.alt-card__town { margin-top: var(--s-1); }
.alt-card__title {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid rgba(250, 250, 250, .16);
  font-weight: 700;
}
.alt-card__text { margin-top: var(--s-1); color: var(--c-on-dark-soft); text-wrap: pretty; }

.cta-card {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-roto);
}
.cta-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  font-variation-settings: 'wdth' 112;
  line-height: 1.2;
}
.cta-card__note { color: var(--c-ink-soft); text-wrap: pretty; }
.cta-card__btn { white-space: normal; text-align: center; }

/* ---------- Jerónimo ---------- */
.tour-guide { padding: 0 var(--gutter) var(--s-8); }
.tour-guide__inner {
  display: flex;
  gap: var(--s-5);
  align-items: flex-start;
  max-width: calc(var(--max) - 2 * var(--gutter));
  margin-inline: auto;
  padding-top: var(--s-7);
  border-top: 1px solid var(--c-line);
}
.tour-guide__inner img {
  flex: none;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  object-fit: cover;
}
.tour-guide__name { font-size: 1.25rem; font-weight: 700; font-variation-settings: 'wdth' 112; }
.tour-guide__role { font-size: var(--fs-small); color: var(--c-ink-soft); }
.tour-guide__text { max-width: var(--measure); margin-top: var(--s-3); text-wrap: pretty; }
.tour-guide__link {
  display: inline-block;
  margin-top: var(--s-3);
  font-weight: 600;
  color: var(--c-cobre);
  text-underline-offset: 4px;
}

/* ---------- Otras experiencias ---------- */
.related {
  display: grid;
  gap: var(--s-6);
  justify-items: start;
  max-width: var(--max);
  margin-inline: auto;
  padding: var(--s-8) var(--gutter) var(--s-9);
}
.related__title { font-size: var(--fs-h3); }
.related__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: var(--s-6) var(--s-5);
  width: 100%;
}
.related__link { display: grid; gap: var(--s-1); text-decoration: none; }
.related__thumb {
  aspect-ratio: 4 / 3;
  margin-bottom: var(--s-2);
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--c-line);
}
.related__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-med) var(--ease); }
.related__link:hover .related__thumb img { transform: scale(1.05); }
.related__alt {
  font-weight: 700;
  font-variation-settings: 'wdth' var(--w-wide);
  font-variant-numeric: tabular-nums;
  color: var(--c-cobre);
}
.related__name {
  font-size: 1.25rem;
  font-weight: 700;
  font-variation-settings: 'wdth' 112;
  line-height: 1.15;
}
.related__link:hover .related__name { color: var(--c-cobre); }
.related__teaser { color: var(--c-ink-soft); text-wrap: pretty; }