/* destino.css (celular) — "Do terreno ao destino" (#destino), fundo tinta. js/m/destino.js monta.
   O palco é a única seção presa da página no celular: .dm__palco tem 100svh + a distância da varredura (--dist) e
   .dm__cena fica sticky por essa distância (sem pin-spacer: a barra do navegador que aparece e some não mexe na
   geometria). Dentro da cena, uma coluna: abas, o quadro em pé (3:4, encolhe para caber) e o endereço do par.
   A faixa de baixo (80u) fica livre para o chip do menu. Rótulos: nunca abaixo de 11 px reais. */
#destino{background:var(--c-ink);color:#fff}
#destino{--rot:max(11px, calc(11 * var(--u)))}

/* ===== cabeça ===== */
.dm__cab{padding-top:calc(104 * var(--u));padding-bottom:calc(36 * var(--u))}
.dm__rot{display:flex;align-items:center;gap:calc(9 * var(--u));font-family:var(--f-texto);font-weight:600;font-size:var(--rot);
  letter-spacing:.12em;text-transform:uppercase;color:#8e8e8e}
.dm__q{flex:none;width:calc(7 * var(--u));height:calc(7 * var(--u));background:var(--c-limao)}
.dm__q--obra{background:none;box-shadow:inset 0 0 0 calc(1.7 * var(--u)) var(--c-limao)}
.dm__tit{margin-top:calc(22 * var(--u));font-size:calc(62 * var(--u));line-height:.92;color:#fff}
/* máscaras das linhas (App.linhas): a folga é padding com margem negativa, e margens negativas vizinhas colapsam
   (vale a maior, não a soma). Cada linha do título é um bloco flow-root (a margem não atravessa) e, entre duas
   máscaras irmãs (o título do Moinho quebra em duas no celular), a de cima da segunda leva a soma. Sem isso o
   texto ficava .14em mais alto por linha durante a subida e pulava no fim (tools/m/frase_salto.js). */
.dm__tl{display:flow-root}
#destino .ln-mask + .ln-mask{margin-top:-.34em}
.dm__intro{margin-top:calc(22 * var(--u));max-width:calc(330 * var(--u));font-size:calc(16 * var(--u));line-height:1.5;color:#a5a5a5}

/* ===== palco preso ===== */
.dm__palco{--dist:calc(1680 * var(--u));position:relative;height:calc(100vh + var(--dist));height:calc(100svh + var(--dist))}
.dm__cena{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;
  gap:calc(14 * var(--u));padding:calc(var(--safe-t) + 14 * var(--u)) var(--pad) calc(var(--safe-b) + 80 * var(--u))}

/* abas: número + lugar + o fio que enche de verde com a varredura do par (alvo de 52u) */
.dm__abas{flex:none;display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:calc(12 * var(--u))}
.dm__aba{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:calc(6 * var(--u));min-height:calc(52 * var(--u));
  padding:calc(8 * var(--u)) 0 calc(12 * var(--u));text-align:left;color:#8e8e8e;transition:color .4s var(--e-suave)}
.dm__anum{font-family:var(--f-texto);font-weight:600;font-size:var(--rot);letter-spacing:.1em;line-height:1;transition:color .4s var(--e-suave)}
.dm__anome{font-size:calc(17 * var(--u));line-height:1;letter-spacing:-.02em;white-space:nowrap}
.dm__aba.is-ativo{color:#fff}
.dm__aba.is-ativo .dm__anum{color:var(--c-limao)}
.dm__aba:active .dm__anome{transform:translateY(1px)}
.dm__fio{position:absolute;left:0;right:0;bottom:0;height:calc(1.5 * var(--u));background:#2e3030}
.dm__fio>i{position:absolute;inset:0;background:var(--c-limao);transform-origin:0 50%;transform:scaleX(0)}

/* o quadro: pares empilhados; cada um com o antes, o hoje (recortado pela divisa) e a metade do K */
.dm__quadro{position:relative;flex:0 1 auto;min-height:0;width:100%;aspect-ratio:3 / 4;border-radius:calc(20 * var(--u));
  overflow:hidden;background:var(--c-grafite);isolation:isolate;touch-action:pan-y;-webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none}
.dm__par{position:absolute;inset:0}
.dm__lado{position:absolute;inset:0;overflow:hidden}
.dm__lado picture{display:contents}
.dm__lado img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;transform-origin:50% 55%;
  pointer-events:none;-webkit-user-drag:none}
.dm__k{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.dm__k-linha{fill:none;stroke:#fff;stroke-width:1.5;stroke-linejoin:miter;stroke-opacity:.92}
.dm__k-bracos{fill:var(--c-limao)}
.dm__proxy{position:absolute;left:0;top:0;width:0;height:0;visibility:hidden}
.dm__tag{position:absolute;top:calc(12 * var(--u));display:flex;align-items:center;gap:calc(7 * var(--u));
  padding:calc(8 * var(--u)) calc(11 * var(--u)) calc(8 * var(--u)) calc(10 * var(--u));border-radius:calc(20 * var(--u));
  background:rgba(12,12,12,.6);color:#fff;font-family:var(--f-texto);font-weight:600;font-size:var(--rot);line-height:1;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.dm__lado--antes .dm__tag{left:calc(12 * var(--u))}
.dm__lado--hoje .dm__tag{right:calc(12 * var(--u))}
.dm__dica{position:absolute;left:0;top:50%;padding:calc(9 * var(--u)) calc(12 * var(--u));
  border-radius:calc(20 * var(--u));background:rgba(12,12,12,.6);color:#fff;font-family:var(--f-texto);font-weight:600;
  font-size:var(--rot);line-height:1;letter-spacing:.14em;white-space:nowrap;pointer-events:none}
/* a alça para o teclado (role=slider): anda com a divisa; o anel só aparece no foco do teclado */
.dm__pega{position:absolute;left:0;top:50%;width:calc(64 * var(--u));height:calc(84 * var(--u));margin-top:calc(-42 * var(--u));
  border-radius:calc(14 * var(--u));outline:none;pointer-events:none}
.dm__pega:focus-visible{box-shadow:0 0 0 2px var(--c-limao)}

/* endereço e dado do par ativo (os três no mesmo lugar; o JS troca) */
.dm__info{flex:none;display:grid}
.dm__inf{grid-area:1 / 1;max-width:calc(330 * var(--u))}
.dm__local{font-size:calc(14 * var(--u));line-height:1.45;color:#a5a5a5}
.dm__dado{margin-top:calc(4 * var(--u));font-size:calc(14 * var(--u));line-height:1.45;font-weight:600;color:#fff}

/* tela baixa e larga (celular deitado, tablet em paisagem): o quadro deita e usa a foto inteira do desktop
   (<source> no JS), a faixa do endereço sai e as folgas encolhem */
@media (max-height:560px){
  .dm__cena{gap:calc(8 * var(--u));padding-top:calc(var(--safe-t) + 8px);padding-bottom:calc(var(--safe-b) + 12px)}
  .dm__info{display:none}
  .dm__quadro{flex:1 1 0;aspect-ratio:auto;max-width:calc((100svh - 120px) * 1.9);align-self:center}
  .dm__aba{min-height:44px;padding-top:4px;padding-bottom:8px}
}

/* ===== fecho: SKNA Moinho ===== */
.dm__fecho{padding-top:calc(96 * var(--u));padding-bottom:calc(84 * var(--u))}
.dm__ftit{margin-top:calc(20 * var(--u));font-size:calc(64 * var(--u));line-height:.92;color:#fff}
.dm__flocal{margin-top:calc(14 * var(--u));font-size:calc(14 * var(--u));color:#8e8e8e}
.dm__ftxt{margin-top:calc(26 * var(--u));max-width:calc(350 * var(--u));font-size:calc(17 * var(--u));line-height:1.55;color:#cfcfcf}
/* dados em 2 × 2, com o fio à esquerda de cada um (a régua do desktop em pé) */
.dm__dados{margin-top:calc(34 * var(--u));display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));row-gap:calc(24 * var(--u));
  column-gap:calc(12 * var(--u))}
.dm__dados > div{padding-left:calc(14 * var(--u));border-left:1px solid #34373a}
.dm__dados dt{font-size:calc(30 * var(--u));line-height:1;letter-spacing:-.03em;color:#fff;text-transform:none;white-space:nowrap}
.dm__dleg{margin-top:calc(10 * var(--u));font-family:var(--f-texto);font-weight:600;font-size:var(--rot);line-height:1.3;
  letter-spacing:.1em;text-transform:uppercase;color:#8e8e8e}
.dm__bt{margin-top:calc(36 * var(--u));display:flex;align-items:center;justify-content:space-between;gap:calc(16 * var(--u));
  width:100%;max-width:calc(350 * var(--u));min-height:calc(58 * var(--u));padding:0 calc(24 * var(--u)) 0 calc(26 * var(--u));
  border-radius:calc(29 * var(--u));background:#fff;color:var(--c-ink);font-family:var(--f-texto);font-weight:600;
  font-size:calc(16 * var(--u));letter-spacing:-.01em;transition:background-color .25s var(--e-suave)}
.dm__bt svg{flex:none;width:calc(18 * var(--u));height:calc(15 * var(--u));transition:transform .3s var(--e-expo)}
.dm__bt:active{background:var(--c-limao);transition-duration:0s}
.dm__bt:active svg{transform:translateX(calc(4 * var(--u)))}

/* linha do tempo em pé: o eixo fino à esquerda (desenha com a rolagem), um nó por tempo e o chevron verde ↓ no fim.
   Os painéis crescem para o futuro: 80 → 90 → 100% da coluna. */
.dm__linha{position:relative;margin-top:calc(72 * var(--u));padding-left:calc(26 * var(--u))}
.dm__eixo{position:absolute;left:calc(4 * var(--u));top:calc(6 * var(--u));bottom:calc(14 * var(--u));width:1px;background:#26292a}
.dm__eixo>i{position:absolute;inset:0;background:#55595b;transform-origin:50% 0}
.dm__ponta{position:absolute;left:calc(-4 * var(--u));bottom:0;width:calc(17 * var(--u));height:calc(12 * var(--u))}
/* o chevron é a metade dos braços do K ("<"), girado para baixo */
.dm__ponta>i{position:absolute;left:50%;top:50%;width:calc(12 * var(--u));height:calc(17 * var(--u));margin:calc(-8.5 * var(--u)) 0 0 calc(-6 * var(--u));
  background:var(--c-limao);transform:rotate(-90deg);
  -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;}
.dm__tempos{display:flex;flex-direction:column;gap:calc(44 * var(--u));padding-bottom:calc(34 * var(--u))}
.dm__tempo{position:relative}
.dm__no{position:absolute;left:calc(-26 * var(--u));top:calc(1 * var(--u));width:calc(9 * var(--u));height:calc(9 * var(--u));background:var(--c-limao)}
.dm__no--obra{background:var(--c-ink);box-shadow:inset 0 0 0 calc(1.8 * var(--u)) var(--c-limao)}
.dm__quando{font-family:var(--f-texto);font-weight:600;font-size:var(--rot);line-height:1;letter-spacing:.12em;color:var(--c-limao)}
.dm__mtit{margin-top:calc(12 * var(--u));font-size:calc(24 * var(--u));line-height:1;letter-spacing:-.025em;color:#fff}
.dm__mleg{margin-top:calc(8 * var(--u));font-size:calc(14 * var(--u));line-height:1.4;color:#8e8e8e}
.dm__painel{position:relative;margin-top:calc(18 * var(--u));overflow:hidden;border-radius:calc(18 * var(--u));background:var(--c-grafite)}
.dm__painel img,.dm__painel video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
/* ontem: a foto P&B sobre o cinza do próprio card de arquivo, encostada embaixo à direita (como no desktop) */
.dm__painel--0{width:80%;aspect-ratio:1.44;background:#efefef}
.dm__painel--0 img{inset:auto 0 0 auto;width:104%;height:auto;object-fit:contain}
.dm__painel--1{width:90%;aspect-ratio:4 / 3}
.dm__painel--2{width:100%;aspect-ratio:1040 / 744}
.dm__ilus{position:absolute;left:calc(12 * var(--u));bottom:calc(12 * var(--u));padding:calc(7 * var(--u)) calc(10 * var(--u));
  border-radius:calc(20 * var(--u));background:rgba(12,12,12,.5);color:#fff;font-family:var(--f-texto);font-weight:600;
  font-size:var(--rot);line-height:1;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}

/* tablet (820): o texto do fecho em coluna mais estreita e os painéis com teto, para o 2027 não virar outdoor */
@media (min-width:700px){
  .dm__intro,.dm__ftxt{max-width:calc(400 * var(--u))}
  .dm__dados{grid-template-columns:repeat(4, minmax(0, auto));justify-content:start;column-gap:calc(22 * var(--u))}
  .dm__tempos{max-width:calc(470 * var(--u))}
}
@media (prefers-reduced-motion:reduce){.dm__aba,.dm__anum,.dm__bt,.dm__bt svg{transition:none}}