/* =====================================================================
   #experiencias — «Experiencias» (Lane D) · FINAL.md §8.4
   Mobile-first: base = native scroll-snap carousel (all widths in reduce
   mode). Desktop + motion + js = horizontal pinned gallery.
   ===================================================================== */

#experiencias {
  position: relative;
  padding-block: var(--section-pad) 0;
  overflow-x: clip; /* the marquee row is wider than the viewport (clip, not a scroll container) */
}

/* ---------- City marquee (decorative) ---------- */
.marquee {
  overflow: hidden;
  margin-block: var(--sp-7) var(--sp-4);
  padding-block: var(--sp-2);
  font: italic 400 clamp(2.25rem, 6vw, 5rem) / 1.1 var(--ff-display);
  font-optical-sizing: auto;
  letter-spacing: -0.01em;
  color: var(--c-cream);
  opacity: 0.92;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  user-select: none;
}
.marquee__row {
  display: flex;
  align-items: center;
  width: max-content;
  white-space: nowrap;
}
.marquee__row > * {
  margin-inline-end: clamp(1.25rem, 3vw, 2.75rem); /* margin (not gap) so xPercent -50 loops seamlessly */
}
.marquee__row i {
  font-style: normal;
  font-size: 0.42em;
  color: var(--c-gold-light);
  translate: 0 -0.15em;
}

/* ---------- Gallery (carousel base) ---------- */
.gallery {
  position: relative;
  padding-block: var(--sp-4) var(--sp-9);
}
.track {
  list-style: none;
  margin: 0;
  display: flex;
  gap: 4vw;
  padding: var(--sp-4) 7vw var(--sp-7);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 7vw;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.track::-webkit-scrollbar { display: none; }

.vit {
  flex: 0 0 78vw;
  max-width: 520px;
  scroll-snap-align: center;
  contain: layout paint;
  padding: var(--sp-2) var(--sp-2) var(--sp-5); /* room for the paper shadow inside the contain box */
}
@media (min-width: 640px) {
  .vit { flex-basis: 56vw; }
}
@media (min-width: 1024px) {
  .vit { flex-basis: clamp(320px, 34vw, 520px); }
}

/* ---------- Card («vitrina») ---------- */
.vit .sheet {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-rows: auto auto auto auto auto auto;
  align-content: start;
  padding: var(--sp-3) var(--sp-3) var(--sp-6);
  overflow: hidden;
  isolation: isolate;
}
/* warm light that grows behind the arch when the card is "lit" */
.vit .sheet::before {
  content: "";
  position: absolute;
  inset: -12% -20% auto;
  height: 70%;
  background: radial-gradient(ellipse at 50% 25%, color-mix(in srgb, var(--c-gold-light) 55%, transparent) 0%, color-mix(in srgb, var(--c-gold-light) 0%, transparent) 62%);
  opacity: 0;
  transition: opacity 0.9s var(--ease-cine);
  pointer-events: none;
  z-index: 0;
}
.vit.is-lit .sheet::before { opacity: 1; }

.vit__photo {
  position: relative;
  z-index: 1;
  margin: 0;
  width: 100%;
  transition: transform 0.9s var(--ease-cine);
  transform-origin: 50% 100%;
}
.vit.is-lit .vit__photo { transform: scale(1.03); }
.vit__photo picture {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 0.7s var(--ease-cine);
}

.vit__num {
  position: absolute;
  z-index: 2;
  top: calc(var(--sp-3) + var(--sp-4));
  left: 50%;
  translate: -50% 0;
  margin: 0;
  font: 700 var(--fs-h2) / 1 var(--ff-display);
  font-optical-sizing: auto;
  color: var(--c-cream);
  text-shadow: 0 1px 14px color-mix(in srgb, var(--c-night) 55%, transparent);
  letter-spacing: 0.02em;
  pointer-events: none;
}

.vit__kicker {
  position: relative;
  z-index: 1;
  margin: var(--sp-5) var(--sp-2) 0;
  color: var(--c-terracotta-text);
  font-variant-numeric: tabular-nums;
}
.vit__title {
  position: relative;
  z-index: 1;
  margin: 0.4em var(--sp-2) 0;
  font: 500 var(--fs-h3) / var(--lh-heading) var(--ff-display);
  font-optical-sizing: auto;
  color: var(--c-navy);
  text-wrap: balance;
}
.vit__title::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 0.4em;
  background: var(--c-gold);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.6s var(--ease-out);
}
.vit__sub {
  position: relative;
  z-index: 1;
  margin: 0.35em var(--sp-2) 0;
  font: italic 400 var(--fs-small) / 1.3 var(--ff-display);
  color: var(--c-ink-soft);
}
.vit__lead {
  position: relative;
  z-index: 1;
  margin: var(--sp-3) var(--sp-2) var(--sp-5);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--c-ink-soft);
  max-width: var(--measure);
}
.vit__more {
  position: relative;
  z-index: 1;
  justify-self: start;
  margin-inline: var(--sp-2);
  min-height: 44px;
}
.vit__cat {
  position: absolute;
  z-index: 1;
  right: var(--sp-4);
  bottom: var(--sp-4);
  width: 22px;
  height: 36px;
  color: var(--c-navy);
  opacity: 0.55;
  transform: rotate(-8deg);
  transform-origin: 50% 100%;
  transition: transform 0.6s var(--ease-out), opacity 0.4s;
}

/* hover choreography — fine pointers only (touch: lit state via IntersectionObserver) */
@media (hover: hover) and (pointer: fine) {
  .vit:hover .vit__photo picture { transform: scale(1.06); }
  .vit:hover .vit__title::after,
  .vit:focus-within .vit__title::after { transform: scaleX(1); }
  .vit:hover .vit__cat,
  .vit:focus-within .vit__cat { transform: rotate(0deg); opacity: 0.9; }
}
.vit:focus-within .vit__title::after { transform: scaleX(1); }

/* ---------- Progress rule + hint ---------- */
.gallery__rule {
  position: absolute;
  left: 7vw;
  right: 7vw;
  bottom: var(--sp-7);
  height: 1px;
  background: var(--c-gold);
  opacity: 0.9;
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.gallery__hint {
  position: absolute;
  right: 7vw;
  bottom: calc(var(--sp-7) + var(--sp-3));
  margin: 0;
  font: 600 var(--fs-eyebrow) / 1 var(--ff-body);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--c-cream);
  opacity: 0.85;
}

/* ---------- Desktop + motion + JS: the pinned horizontal gallery ---------- */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  html.js:not(.reduce) .gallery {
    height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    overflow: hidden;
  }
  html.js:not(.reduce) .track {
    width: max-content;
    overflow: visible;
    scroll-snap-type: none;
    gap: 4vw;
    padding: 0 8vw;
  }
  html.js:not(.reduce) .vit {
    flex: 0 0 clamp(320px, 34vw, 520px);
    height: 72svh;
    padding: 0 var(--sp-2) 18px;
  }
  html.js:not(.reduce) .vit .sheet {
    grid-template-rows: minmax(0, 1fr) auto auto auto auto auto;
  }
  html.js:not(.reduce) .vit__photo {
    aspect-ratio: auto;
    height: 100%;
    min-height: 0;
  }
  html.js:not(.reduce) .vit__lead {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  html.js:not(.reduce) .gallery__rule {
    left: 8vw;
    right: 8vw;
    bottom: 6svh;
  }
  html.js:not(.reduce) .gallery__hint {
    right: 8vw;
    bottom: calc(6svh + var(--sp-3));
  }
}

/* ---------- #exp-dialog (markup in Core's foot partial; filled by experiencias.js) ---------- */
#exp-dialog::backdrop {
  animation: exp-backdrop 0.5s var(--ease-cine) both;
}
@keyframes exp-backdrop {
  from { opacity: 0; }
  to { opacity: 1; }
}
#exp-dialog .dialog__media {
  width: 100%;              /* aspect-ratio boxes default to justify-self:start in a grid — stretch across */
  justify-self: stretch;
}
#exp-dialog .dialog__title {
  outline: none;
}
#exp-dialog .dialog__text h4 {
  margin: var(--sp-5) 0 var(--sp-2);
  font: 500 var(--fs-h3) / var(--lh-heading) var(--ff-display);
  color: var(--c-navy);
}
#exp-dialog .dialog__text p {
  margin: 0 0 var(--sp-4);
  max-width: var(--measure);
  line-height: var(--lh-body);
}
#exp-dialog .dialog__text .sabias {
  position: relative;
  margin: var(--sp-5) 0 var(--sp-4);
  padding: var(--sp-4) var(--sp-5) var(--sp-4) calc(var(--sp-6) + 18px);
  border-left: 3px solid var(--c-gold);
  background: var(--c-cream-light);
}
#exp-dialog .dialog__text .sabias__cat {
  position: absolute;
  left: var(--sp-3);
  top: var(--sp-4);
  width: 18px;
  height: 30px;
  color: var(--c-navy);
}
#exp-dialog .dialog__text .sabias h4 {
  margin: 0 0 var(--sp-2);
  font: 700 var(--fs-eyebrow) / 1 var(--ff-body);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--c-terracotta-text);
}
#exp-dialog .dialog__text .sabias p {
  margin: 0;
  font: italic 400 var(--fs-lead) / 1.45 var(--ff-display);
}