/* 22 · experiencias — a jornada do atleta como percurso horizontal (capítulo claro).
   A faixa (.xp-track) é desenhada no tamanho do plano geral — os 6 pontos legíveis na tela — e a
   câmera (JS) a percorre de perto, ponto a ponto, antes de abrir. Tudo sob #experiencias. */
#experiencias .xp-stage {
  --xp-max: 1680px;
  --in: max(var(--gutter), calc((100% - var(--xp-max)) / 2));
  --xp-pole: 14px;
  --xp-g: clamp(14px, 1.5vw, 28px);
  background: transparent;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  padding-top: calc(var(--hud-h) + clamp(12px, 3vh, 34px));
  padding-bottom: clamp(12px, 2.4vh, 26px);
}
#experiencias .checker { z-index: 0; }

/* ---------- cabeçalho ---------- */
#experiencias .xp-head { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-inline: var(--in); }
#experiencias .xp-head__t { display: grid; gap: 6px; }
#experiencias .xp-kicker { color: var(--acai-light); }
#experiencias .xp-title { font-size: calc((clamp(38px, 4.2vw, 76px)) * var(--ts, 1)); color: var(--acai-dark); }
#experiencias .xp-now { flex: none; padding-bottom: .5em; }
#experiencias .xp-now b { color: var(--ink-text); font-variant-numeric: tabular-nums; }
#experiencias .xp-now span { color: var(--ink-text-2); }

/* ---------- a faixa ---------- */
#experiencias .xp-zone { container: xpz / size; position: relative; z-index: 1; overflow: clip; min-height: 0; }
#experiencias .xp-track { position: absolute; left: var(--in); top: 0; width: calc(100% - 2 * var(--in)); transform-origin: 0 0; }
#experiencias .xp-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
#experiencias .xp-ahead { fill: none; stroke: rgba(74, 31, 96, .34); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1 11; }
#experiencias .xp-route { stroke-width: 6; filter: drop-shadow(0 2px 6px rgba(244, 178, 35, .45)); }

#experiencias .xp-list { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--xp-g); align-items: stretch; }
#experiencias .xp-st {
  --on: 0;
  position: relative; container-type: inline-size; display: flex; flex-direction: column; gap: 0;
  padding-bottom: clamp(16px, 2.6cqh, 24px); /* espaço sob a linha */
}
#experiencias .xp-list { counter-reset: xp; }
#experiencias .xp-st { counter-increment: xp; }
#experiencias .xp-st__img { aspect-ratio: var(--xp-ar, 4 / 3); margin: 0; border-radius: 4px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 2px 6px rgba(40, 5, 50, .1), 0 16px 36px rgba(40, 5, 50, calc(.06 + .12 * var(--on)));
  background: linear-gradient(160deg, #e6d9ea 0%, #d8c6de 100%); }
/* reserva enquanto a imagem não chega: chapa açaí com o número do ponto (sem texto alternativo à mostra) */
#experiencias .xp-st__img img { color: transparent; font-size: 0; }
#experiencias .xp-st__img.is-missing { background: linear-gradient(135deg, var(--acai) 0%, var(--acai-dark) 100%); }
#experiencias .xp-st__img.is-missing img { visibility: hidden; }
#experiencias .xp-st__img.is-missing::after { content: counter(xp, decimal-leading-zero); position: absolute; right: 7%; bottom: 2%; font-family: var(--f-display); font-style: italic; font-weight: 900; font-size: calc(46cqi * var(--ts, 1)); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(244, 178, 35, .55); }
#experiencias .xp-st__img.is-missing::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 22px, rgba(245, 238, 224, .05) 22px 23px); }
#experiencias .xp-st__img img { filter: grayscale(calc(1 - var(--on))) contrast(calc(.86 + .14 * var(--on))) brightness(calc(1.08 - .08 * var(--on))); opacity: calc(.62 + .38 * var(--on)); }
#experiencias .xp-st__txt { display: grid; gap: .3em; padding-top: clamp(10px, 5cqi, 16px); padding-bottom: clamp(12px, 6cqi, 18px); }
#experiencias .xp-st__t { font-family: var(--f-display); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: calc((clamp(18px, 12cqi, 36px)) * var(--ts, 1)); line-height: 1.12; letter-spacing: -.002em; padding-top: .06em; color: var(--acai-light); overflow-wrap: normal; }
/* o título escurece quando o atleta chega (o texto nunca fica abaixo do contraste AA) */
#experiencias .xp-st__t { color: color-mix(in srgb, var(--acai-dark) calc(var(--on) * 100%), var(--acai-light)); }
#experiencias .xp-st__d { font-size: calc((clamp(14px, 8cqi, 22px)) * var(--ts, 1)); line-height: 1.4; color: var(--ink-text-2); text-wrap: pretty; }

/* placa de quilômetro, de pé sobre a linha */
#experiencias .xp-plate {
  position: relative; align-self: center; margin-top: auto; margin-bottom: var(--xp-pole);
  display: grid; justify-items: center; gap: .12em; min-width: 3.4em; padding: .42em .5em .34em;
  font-size: calc((clamp(11px, 6.2cqi, 17px)) * var(--ts, 1)); color: var(--acai-dark); background: #fbf7ef;
  border: 2px solid var(--acai-dark); border-radius: 3px; box-shadow: 0 6px 16px rgba(40, 5, 50, .16);
  isolation: isolate;
}
#experiencias .xp-plate::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--honey); opacity: var(--on); }
#experiencias .xp-plate::after { content: ''; position: absolute; left: 50%; top: 100%; width: 2px; height: calc(var(--xp-pole) + 2px); margin-left: -1px; background: var(--acai-dark); }
#experiencias .xp-plate small { font-family: var(--f-display); font-weight: 700; font-size: .56em; letter-spacing: .16em; text-transform: uppercase; line-height: 1; }
#experiencias .xp-plate b { font-family: var(--f-display); font-style: italic; font-weight: 900; font-size: 1.62em; line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; padding-top: .04em; }

/* o atleta */
#experiencias .xp-runner { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 3; pointer-events: none; will-change: transform; }
#experiencias .xp-runner__dot { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--honey); box-shadow: 0 0 0 3px var(--acai-dark), 0 4px 14px rgba(40, 5, 50, .4); }
#experiencias .xp-runner__ring { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--honey); animation: xp-ping 1.4s var(--ease-out) infinite; }
@keyframes xp-ping { from { transform: scale(1); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }
#experiencias .xp-runner__tag { position: absolute; right: 16px; top: 0; transform: translateY(-50%); padding: 4px 12px 4px 9px; white-space: nowrap; font-family: var(--f-display); font-style: italic; font-weight: 800; font-size: calc(13px * var(--ts, 1)); letter-spacing: .1em; text-transform: uppercase; line-height: 1.1; color: var(--offwhite); background: var(--acai-dark); clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%); }
/* linha de chegada: faixa quadriculada cruzando a linha */
#experiencias .xp-finish { position: absolute; left: 0; top: 0; width: 12px; height: 48px; margin: -24px 0 0 -6px; z-index: 2; color: var(--acai-dark);
  background: repeating-conic-gradient(currentColor 0 25%, #fbf7ef 0 50%) 0 0 / 12px 12px; box-shadow: 0 0 0 1.5px var(--acai-dark), 0 4px 10px rgba(40, 5, 50, .2); }

/* aviso das imagens geradas: à esquerda, onde o corte inclinado do capítulo claro é mais baixo (à direita a cunha escura o engolia) */
#experiencias .xp-note { max-width: none; padding-inline: var(--in); text-align: left; font-size: calc(12px * var(--ts, 1)); letter-spacing: .02em; }

/* Janela menos panorâmica: a imagem ganha altura e o plano geral ocupa a tela */
@container xpz (max-aspect-ratio: 12 / 5) {
  #experiencias .xp-st__img { --xp-ar: 1; }
}
/* Janela alta ou estreita (tablet em pé): as estações alternam acima e abaixo da linha. */
@container xpz (max-aspect-ratio: 3 / 2) {
  #experiencias .xp-list { grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 0; }
  #experiencias .xp-st:nth-child(1) { grid-area: 1 / 1 / 2 / 3; }
  #experiencias .xp-st:nth-child(2) { grid-area: 2 / 2 / 3 / 4; }
  #experiencias .xp-st:nth-child(3) { grid-area: 1 / 3 / 2 / 5; }
  #experiencias .xp-st:nth-child(4) { grid-area: 2 / 4 / 3 / 6; }
  #experiencias .xp-st:nth-child(5) { grid-area: 1 / 5 / 2 / 7; }
  #experiencias .xp-st:nth-child(6) { grid-area: 2 / 6 / 3 / 8; }
  #experiencias .xp-st:nth-child(odd) { padding-bottom: 0; }
  #experiencias .xp-st:nth-child(even) { padding-bottom: 0; }
  #experiencias .xp-st:nth-child(even) .xp-plate { order: -1; margin: var(--xp-pole) 0 clamp(12px, 5cqi, 18px); }
  #experiencias .xp-st:nth-child(even) .xp-plate::after { top: auto; bottom: 100%; }
  #experiencias .xp-st__img { --xp-ar: 4 / 3; }
}

/* tela grande (2560×1440, projetor): o plano geral ocupava 40% do quadro; a faixa cresce com a altura */
@media (min-width: 1800px) and (min-height: 1200px) {
  #experiencias .xp-stage { --xp-max: max(1680px, 150svh); }
}

.reduced #experiencias .xp-runner__ring { animation: none; opacity: 0; }