/* destino.css — seção nova "Do terreno ao destino" (docs/refino/destino.md). Medidas em px do vídeo × --u.
   --extra = palco (--pal) + fecho (1100). O palco é preso (sticky) por --pal − 100vh de rolagem; a caixa
   (quadro + coluna) fica no meio da tela e encolhe a altura em telas baixas (o quadro corta por object-fit). */
#destino{--pal:2636;--extra:3736;background:var(--c-ink);color:#fff}
.ds__palco{position:relative;height:calc(var(--pal) * var(--u))}
.ds__cena{position:sticky;top:0;height:100vh;overflow:hidden}
.ds__caixa{position:absolute;left:0;right:0;top:50%;height:min(calc(628 * var(--u)), calc(100vh - 96 * var(--u)));
  transform:translateY(-50%)}

/* ===== o quadro: pares empilhados; cada um com o antes, o hoje (recortado pela divisa) e a metade do K ===== */
.ds__quadro{position:absolute;left:calc(58 * var(--u));top:0;width:calc(1004 * var(--u));height:100%;
  border-radius:calc(26 * var(--u));overflow:hidden;background:var(--c-grafite);isolation:isolate;
  touch-action:pan-y;-webkit-user-select:none;user-select:none}
.ds__par{position:absolute;inset:0}
.ds__lado{position:absolute;inset:0;overflow:hidden}
.ds__lado img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:50% 55%;
  pointer-events:none;-webkit-user-drag:none}
.ds__k{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.ds__k-linha{fill:none;stroke:#fff;stroke-width:1.5;stroke-linejoin:miter;stroke-opacity:.92}
.ds__k-bracos{fill:var(--c-limao)}
.ds__proxy{position:absolute;left:0;top:0;width:0;height:0;visibility:hidden}
/* rótulo de cada lado: status com o quadrado da marca (vazado no antes, cheio no hoje) */
.ds__tag{position:absolute;top:calc(22 * var(--u));display:flex;align-items:center;gap:calc(8 * var(--u));
  --cap:7.4;--lh:8;padding:calc(10 * var(--u)) calc(14 * var(--u)) calc(10 * var(--u)) calc(12 * var(--u));
  border-radius:calc(20 * var(--u));background:rgba(12,12,12,.56);color:#fff;font-weight:600;
  text-transform:uppercase;letter-spacing:.11em;white-space:nowrap}
.ds__lado--antes .ds__tag{left:calc(22 * var(--u))}
.ds__lado--hoje .ds__tag{right:calc(22 * var(--u))}
.ds__q{flex:none;width:calc(7 * var(--u));height:calc(7 * var(--u));background:var(--c-limao)}
.ds__q--obra{background:none;box-shadow:inset 0 0 0 calc(1.7 * var(--u)) var(--c-limao)}
.ds__dica{position:absolute;left:0;top:50%;margin-top:calc(-13.7 * var(--u));--cap:7.4;--lh:8;
  padding:calc(10 * var(--u)) calc(13 * var(--u));border-radius:calc(20 * var(--u));background:rgba(12,12,12,.56);
  color:#fff;font-weight:600;letter-spacing:.14em;white-space:nowrap;pointer-events:none}
/* foco do teclado: a alça (role=slider) acompanha a divisa */
.ds__pega{position:absolute;left:0;top:50%;width:calc(70 * var(--u));height:calc(96 * var(--u));
  margin-top:calc(-48 * var(--u));border-radius:calc(14 * var(--u));outline:none}
.ds__pega:focus-visible{box-shadow:0 0 0 calc(2 * var(--u)) var(--c-limao)}

/* ===== coluna: título, intro e a lista dos pares (o fio verde enche com a varredura de cada um) ===== */
.ds__col{position:absolute;left:calc(1110 * var(--u));top:0;width:calc(312 * var(--u));height:100%;
  display:flex;flex-direction:column;justify-content:space-between}
.ds__rot,.ds__frot{display:flex;align-items:center;gap:calc(9 * var(--u));--cap:7.6;--lh:8;font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;color:#8e8e8e}
.ds__tit{margin-top:calc(26 * var(--u));--cap:33;--lh:40;color:#fff;letter-spacing:-.035em;white-space:nowrap}
/* recorte das letras: folga de 10 acima e 8 abaixo da linha */
.ds__tl{display:block;padding:calc(10 * var(--u)) 0 calc(8 * var(--u));margin:calc(-10 * var(--u)) 0 calc(-8 * var(--u))}
.ds__intro{margin-top:calc(24 * var(--u));--cap:10.4;--lh:20;color:#8e8e8e;letter-spacing:-.01em;width:calc(300 * var(--u))}
/* tela muito larga e baixa (a caixa encolhe): a coluna não comporta a intro */
@media (min-aspect-ratio:2/1){.ds__intro{display:none}}
.ds__lista{display:flex;flex-direction:column}
.ds__item{position:relative;display:grid;grid-template-columns:calc(34 * var(--u)) 1fr;row-gap:calc(8 * var(--u));
  width:100%;text-align:left;padding:calc(12 * var(--u)) 0 calc(13 * var(--u));color:#fff}
.ds__item:focus-visible{outline:calc(2 * var(--u)) solid var(--c-limao);outline-offset:calc(4 * var(--u))}
.ds__num{grid-column:1;grid-row:1;align-self:center;--cap:7.6;--lh:8;font-weight:600;letter-spacing:.1em;color:#5d5d5d;
  transition:color .4s cubic-bezier(.215,.61,.355,1)}
.ds__nome{grid-column:2;grid-row:1;--cap:15;--lh:15;letter-spacing:-.03em;color:#5d5d5d;
  transition:color .4s cubic-bezier(.215,.61,.355,1),transform .5s cubic-bezier(.215,.61,.355,1)}
.ds__local,.ds__dado{grid-column:2;--cap:8.4;--lh:14;color:#5d5d5d;letter-spacing:-.005em;
  transition:color .4s cubic-bezier(.215,.61,.355,1)}
.ds__item:hover .ds__nome{color:#cfcfcf;transform:translateX(calc(3 * var(--u)))}
.ds__item.is-ativo .ds__nome{color:#fff}
.ds__item.is-ativo .ds__num{color:var(--c-limao)}
.ds__item.is-ativo .ds__local,.ds__item.is-ativo .ds__dado{color:#a5a5a5}
.ds__fio{position:absolute;left:0;right:0;bottom:0;height:1px;background:#2e3030}
.ds__fio>i{position:absolute;inset:0;background:var(--c-limao);transform-origin:0 50%;transform:scaleX(0)}
/* próximo destino: chevron verde para baixo (os braços do K girados) */
.ds__prox{display:grid;grid-template-columns:calc(34 * var(--u)) 1fr;row-gap:calc(10 * var(--u));
  padding-top:calc(20 * var(--u));color:#fff}
.ds__seta{grid-row:1 / 3;align-self:center;width:calc(14 * var(--u));height:calc(20 * var(--u));background:var(--c-limao);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='511 20 220 325'%3E%3Cpath d='M568.3 182.7 511.9 124.9 616 20.8h114.5L569.2 182.7zM569.2 182.7 731 344.6H616.5L512.1 240.1l-.7-.2 56.9-57.2z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='511 20 220 325'%3E%3Cpath d='M568.3 182.7 511.9 124.9 616 20.8h114.5L569.2 182.7zM569.2 182.7 731 344.6H616.5L512.1 240.1l-.7-.2 56.9-57.2z'/%3E%3C/svg%3E") center/contain no-repeat;
  transform:rotate(-90deg);transition:transform .5s cubic-bezier(.215,.61,.355,1)}
.ds__prox:hover .ds__seta{transform:rotate(-90deg) translateX(calc(-4 * var(--u)))}
.ds__prot{--cap:7.6;--lh:8;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:#8e8e8e}
.ds__pnome{--cap:15;--lh:15;letter-spacing:-.03em}

/* ===== fecho: SKNA Moinho (y relativo ao topo do fecho) ===== */
.ds__fecho{position:relative;height:calc(1100 * var(--u))}
.ds__fecho > *{position:absolute}
.ds__frot{left:calc(59 * var(--u));top:calc(100 * var(--u))}
.ds__ftit{left:calc(59 * var(--u));top:calc(150 * var(--u));--cap:64;--lh:64;color:#fff;letter-spacing:-.04em;
  padding:calc(16 * var(--u)) 0 calc(10 * var(--u));margin-top:calc(-16 * var(--u))}
.ds__flocal{left:calc(59 * var(--u));top:calc(262 * var(--u));--cap:10.4;--lh:12;color:#8e8e8e;white-space:nowrap}
.ds__bt{left:calc(59 * var(--u));top:calc(312 * var(--u));height:calc(61 * var(--u));display:flex;align-items:center;
  gap:calc(18 * var(--u));padding:0 calc(26 * var(--u)) 0 calc(30 * var(--u));border-radius:calc(30.5 * var(--u));
  background:#fff;color:var(--c-ink);transform-origin:50% 50%;transition:background-color .3s cubic-bezier(.215,.61,.355,1)}
.ds__bt span{--cap:11;--lh:12;font-weight:600;white-space:nowrap}
.ds__bt svg{width:calc(18 * var(--u));height:calc(15 * var(--u));transition:transform .4s cubic-bezier(.215,.61,.355,1)}
.ds__bt:hover{background:var(--c-limao)}
.ds__bt:hover svg{transform:translateX(calc(4 * var(--u)))}
.ds__ftxt{left:calc(760 * var(--u));top:calc(146 * var(--u));width:calc(560 * var(--u))}
.ds__ftxt p{--cap:13;--lh:27;color:#cfcfcf;white-space:nowrap}
.ds__dados{left:calc(760 * var(--u));top:calc(318 * var(--u));width:calc(662 * var(--u));display:grid;
  grid-template-columns:calc(150 * var(--u)) calc(176 * var(--u)) calc(206 * var(--u)) 1fr}
.ds__dados > div{padding-left:calc(16 * var(--u));border-left:1px solid #2e3030}
/* números em caixa baixa ("4.600 m²", "19 a 500 m²", "Festval" como a marca escreve) */
.ds__dados dt{--cap:22;--lh:22;color:#fff;letter-spacing:-.03em;white-space:nowrap;text-transform:none}
.ds__dados dd{margin-top:calc(14 * var(--u));--cap:7.4;--lh:8;font-weight:600;text-transform:uppercase;
  letter-spacing:.11em;color:#8e8e8e;white-space:nowrap}
/* a tira: ontem, hoje e 2027 crescem para o futuro e assentam na linha do tempo (base em y 860) */
.ds__tira{left:0;top:0;width:100%;height:100%;pointer-events:none}
.ds__painel{position:absolute;margin:0;overflow:hidden;border-radius:calc(20 * var(--u));background:var(--c-grafite)}
.ds__painel img,.ds__painel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ds__painel--0{left:calc(58 * var(--u));top:calc(610 * var(--u));width:calc(360 * var(--u));height:calc(250 * var(--u));background:#efefef}
.ds__painel--0 img{inset:auto 0 0 auto;width:104%;height:auto;object-fit:contain}
.ds__painel--1{left:calc(450 * var(--u));top:calc(545 * var(--u));width:calc(420 * var(--u));height:calc(315 * var(--u))}
.ds__painel--2{left:calc(902 * var(--u));top:calc(488 * var(--u));width:calc(520 * var(--u));height:calc(372 * var(--u))}
.ds__ilus{position:absolute;left:calc(16 * var(--u));bottom:calc(16 * var(--u));--cap:7.2;--lh:8;
  padding:calc(7 * var(--u)) calc(10 * var(--u));border-radius:calc(20 * var(--u));background:rgba(12,12,12,.46);
  color:#fff;font-weight:600;text-transform:uppercase;letter-spacing:.1em;white-space:nowrap}
.ds__linha{left:calc(58 * var(--u));top:calc(900 * var(--u));width:calc(1364 * var(--u));height:1px}
.ds__traco{position:absolute;inset:0;background:#3a3c3c;transform-origin:0 50%}
.ds__ponta{position:absolute;right:calc(-1 * var(--u));top:calc(-6.5 * var(--u));width:calc(9 * var(--u));height:calc(13 * var(--u));
  background:var(--c-limao);transform:rotate(180deg);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='511 20 220 325'%3E%3Cpath d='M568.3 182.7 511.9 124.9 616 20.8h114.5L569.2 182.7zM569.2 182.7 731 344.6H616.5L512.1 240.1l-.7-.2 56.9-57.2z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='511 20 220 325'%3E%3Cpath d='M568.3 182.7 511.9 124.9 616 20.8h114.5L569.2 182.7zM569.2 182.7 731 344.6H616.5L512.1 240.1l-.7-.2 56.9-57.2z'/%3E%3C/svg%3E") center/contain no-repeat}
.ds__marco{top:calc(900 * var(--u));width:calc(360 * var(--u))}
.ds__marco--0{left:calc(58 * var(--u))}
.ds__marco--1{left:calc(450 * var(--u))}
.ds__marco--2{left:calc(902 * var(--u))}
.ds__marco > *{position:absolute;left:0}
.ds__no{top:calc(-4.5 * var(--u));width:calc(9 * var(--u));height:calc(9 * var(--u));background:var(--c-limao)}
.ds__no--obra{background:var(--c-ink);box-shadow:inset 0 0 0 calc(1.8 * var(--u)) var(--c-limao)}
.ds__quando{top:calc(30 * var(--u));--cap:7.6;--lh:8;font-weight:600;letter-spacing:.12em;color:var(--c-limao)}
.ds__mtit{top:calc(52 * var(--u));--cap:15;--lh:15;color:#fff;letter-spacing:-.03em}
.ds__mleg{top:calc(80 * var(--u));--cap:8.8;--lh:14;color:#8e8e8e;white-space:nowrap}