/* ===================== peças fixadas ao scroll =====================
   Motor em /assets/js/pecas.js. Carregadas só nas páginas que as usam.
   Variáveis no escopo .mt para não poluírem o site:
     --run    a corrida, quanto se desce com o bloco fixado antes de o largar.
              Sem ela a pista fica da altura do bloco e a animação não corre.
     --topo   altura do cabeçalho fixo, relida pelo JS no resize.
     --sage, --oak, --stone  tons aproximados da fotografia desta cozinha em verde sálvia.
   ================================================================= */
.mt{--topo:88px;--run:320svh;--sage:#5f7463;--oak:#b98544;--stone:#e4dfd3}

/* ============================ a peça: a cozinha a ser montada ============================ */
.mt{background:#f0f5f5;padding-bottom:0}
.mt-head{max-width:780px;margin-bottom:clamp(28px,4vw,52px)}
.mt-head h2{margin-top:18px}
.mt-track{position:relative;overflow-anchor:none}
/* sem isto o Chrome corrige o scroll sempre que a lista de etapas muda de altura, e a página desliza sozinha */
.mt-pin{display:grid;grid-template-columns:minmax(300px,.72fr) 1.28fr;gap:clamp(32px,6vw,96px);align-items:center;padding-bottom:clamp(56px,7vw,110px)}
/* modo vivo: só com movimento permitido e JavaScript */
.mt-live .mt-track{height:calc(100vh - var(--topo) + 320vh);height:calc(100svh - var(--topo) + var(--run))}
.mt-live .mt-pin{position:sticky;top:var(--topo);height:calc(100vh - var(--topo));height:calc(100svh - var(--topo));padding-bottom:0}
.mt-steps{list-style:none;margin:0;padding:0;position:relative;min-height:29rem}
.mt-steps::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--line)}
.mt-step{position:relative;padding:16px 0 16px 30px}
.mt-step::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--orange);transform:scaleY(0);transform-origin:50% 0;transition:transform .4s ease}
.mt-n{display:block;font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--orange-txt);margin-bottom:6px}
.mt-desc>div{overflow:hidden}
.mt-desc p{max-width:40ch;padding-top:10px;font-size:16px;line-height:1.55}
.mt-live .mt-step{opacity:.45;transition:opacity .4s ease}
.mt-live .mt-step.is-on{opacity:1}
.mt-live .mt-step.is-on::before{transform:scaleY(1)}
.mt-live .mt-desc{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s ease}
.mt-live .mt-step.is-on .mt-desc{grid-template-rows:1fr}
.mt-seg{display:none}
.mt-stage{margin:0}
.mt-svg{display:block;width:100%;height:auto;max-height:calc(100vh - var(--topo) - 130px);max-height:calc(100svh - var(--topo) - 130px);margin-inline:auto;overflow:visible;--sw:1.6}
.mt-cap{margin-top:10px;font-size:13px;color:var(--muted);text-align:right}
/* ---- o desenho ---- */
.mt-svg .line{fill:none;stroke:var(--ink);stroke-width:var(--sw)}
.mt-svg .line.thin{stroke-width:calc(var(--sw)*.8)}
.mt-svg .wall-plane{fill:#fdfefd}
.mt-svg .floor-band{fill:#d9b47a;transform-box:fill-box;transform-origin:0 50%}
.mt-svg .carc{fill:#d0dedd;stroke:var(--ink);stroke-width:calc(var(--sw)*.8)}
.mt-svg .carc.open{fill:#e9f0ef}
.mt-svg .oak-panel{fill:#a97a42}
.mt-svg .plan-line{fill:none;stroke:var(--ink);stroke-opacity:.5;stroke-width:calc(var(--sw)*.8)}
.mt-svg .front{fill:var(--sage);stroke:var(--ink);stroke-width:calc(var(--sw)*.7)}
.mt-svg .oven{fill:#16282c}
.mt-svg .oven-glass{fill:#2c474d}
.mt-svg .oven-led{fill:var(--orange)}
.mt-svg .glass-door{fill:#dbe9e8;fill-opacity:.75;stroke:var(--oak);stroke-width:5}
.mt-svg .glass-shelf{fill:var(--oak)}
.mt-svg .oak-frame{fill:none;stroke:var(--oak);stroke-width:7}
.mt-svg .oak-line{fill:none;stroke:var(--oak);stroke-width:4}
.mt-svg .handle{fill:#d8b36c;transform-box:fill-box;transform-origin:50% 50%}
.mt-svg .worktop{fill:var(--stone);stroke:var(--ink);stroke-width:var(--sw)}
.mt-svg .niche{fill:var(--oak)}
.mt-svg .niche-in{fill:#f1e6d4}
.mt-svg .plinth{fill:#cfd6d8;stroke:var(--ink);stroke-width:calc(var(--sw)*.6)}
.mt-svg .joint{stroke:var(--ink);stroke-opacity:.28;stroke-width:1.2}
.mt-svg .dim{fill:none;stroke:var(--orange-txt);stroke-width:calc(var(--sw)*.9)}
.mt-svg .dim.ext{stroke-opacity:.5}
.mt-svg .thin-dim{stroke-width:calc(var(--sw)*.75)}
.mt-svg .dim-label{fill:var(--orange-txt);font-size:25px;font-weight:600;letter-spacing:.03em}
.mt-svg .mod-label{fill:var(--orange-txt);font-size:20px;font-weight:600}
.mt-svg .glow{fill:#f5b861;fill-opacity:.28}
.mt-svg .strip-line{stroke:#f0a94f;stroke-width:3.5}
.mt-svg .spot-on ellipse{fill:#f5b861}
.mt-svg .spot-on .halo{fill:#f5b861;fill-opacity:.28}
.mt-svg .pot-body{fill:#dfe6e7;stroke:var(--ink);stroke-width:calc(var(--sw)*.8)}
.mt-svg .pot-lid,.mt-svg .pot-handle{stroke:var(--ink);stroke-width:calc(var(--sw)*1.1);fill:none}
.mt-svg .bowl-body{fill:#9ab0a1;stroke:var(--ink);stroke-width:calc(var(--sw)*.8)}
.mt-svg .plant-pot{fill:#cfd6d8;stroke:var(--ink);stroke-width:calc(var(--sw)*.7)}
.mt-svg .leaf{fill:var(--sage)}
.mt-svg .swap-ring{fill:none;stroke:var(--orange-txt);stroke-width:3.5}
.mt-svg .swap-note line{stroke:var(--orange-txt);stroke-width:2}
.mt-svg .swap-note text{fill:var(--orange-txt);font-size:21px;font-weight:600}
/* camadas de construção: escondidas quando não há movimento */
.mt-svg .x{opacity:0}
/* motor: cada elemento .ph lê a progressão --p e calcula a sua, entre --a e --b */
.mt-live .mt-svg .x{opacity:1}
.mt-live .mt-svg .ph{
  --k:clamp(0,calc((var(--p) - var(--a)) / (var(--b) - var(--a))),1);
  --e:calc(var(--k) * var(--k) * (3 - 2 * var(--k)));
}
.mt-live .mt-svg .dr{stroke-dasharray:calc(var(--L) * 1px);stroke-dashoffset:calc(var(--L) * (1 - var(--k)) * 1px)}
.mt-live .mt-svg .fd{opacity:var(--k)}
.mt-live .mt-svg .fo{opacity:calc(1 - var(--k))}
.mt-live .mt-svg .sl{opacity:clamp(0,calc(var(--k) * 4),1);transform:translate(calc(var(--dx,0) * (1 - var(--e)) * 1px),calc(var(--dy,0) * (1 - var(--e)) * 1px))}
.mt-live .mt-svg .sl-out{opacity:calc(1 - clamp(0,calc(var(--k) * 2),1));transform:translateY(calc(var(--dy,0) * var(--e) * 1px))}
.mt-live .mt-svg .up{transform:scaleY(var(--e));transform-box:fill-box;transform-origin:50% 100%}
.mt-live .mt-svg .rx{transform:scaleX(var(--e))}
.mt-live .mt-svg .pop{transform:scale(var(--e));opacity:var(--k)}

/* ============================ a peça: dormir nas nuvens ============================
   Fotografia real de céu, licenciada e não gerada, com o colchão desenhado por cima.
   O scroll é o fim do dia a passar a noite: a camada .nu-noite escurece a fotografia
   em vez de a substituir, o colchão desce e assenta, as estrelas acendem no último terço.
   Só transform e opacity, nenhum filtro, para correr a 60 quadros num telemóvel. */
.mt-noites{background:#EEF4F7}
.mt-noites .mt-pin{display:grid;grid-template-columns:minmax(260px,.78fr) 1.22fr;
  gap:clamp(28px,5vw,72px);align-items:center}
.mt-noites .mt-copy h2{margin-top:16px}
.mt-noites .entrada{max-width:40ch;margin-top:20px;font-size:15px}
.mt-noites .mt-stage{margin:0;min-width:0}
.mt-noites .mt-cap{font-size:12px;margin:12px 0 0;color:var(--muted)}
.mt-noites .mt-quote{margin-top:34px;padding-left:18px;border-left:2px solid var(--plum)}
.mt-noites .mt-q{font-family:var(--serif);font-size:clamp(19px,2vw,26px);line-height:1.22;
  color:var(--deep);margin:0 0 10px;max-width:22ch}
.mt-noites .mt-fonte{font-size:12px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--plum);font-weight:600;margin:0}
.mt-noites .marca-d{background:var(--plum);width:46px;height:3px;display:block;margin-bottom:14px}

.mt-ceu{position:relative;display:block;width:100%;aspect-ratio:1.58;overflow:hidden;border-radius:18px}
.mt-ceu .nu-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* a noite cai por cima da fotografia, nunca a substitui */
.mt-ceu .nu-noite{position:absolute;inset:0;background:#0F2630;opacity:.82}
.mt-live .mt-ceu .nu-noite{opacity:calc(var(--p,0)*.82)}
.mt-ceu .nu-desenho{position:absolute;inset:0;width:100%;height:100%}
/* o colchão desce e assenta nas nuvens */
.mt-ceu .nu-cama{transform:none;opacity:1}
.mt-live .mt-ceu .nu-cama{
  opacity:clamp(0,calc((var(--p,0) - .1)/.2),1);
  transform:translateY(calc(-110px + clamp(0,calc((var(--p,0) - .1)/.5),1)*110px))}
.mt-ceu .nu-colchao{fill:#FCFEFF}
.mt-ceu .nu-almofada{fill:#EEF5F9}
.mt-ceu .nu-manta{fill:var(--plum);opacity:.86}
.mt-ceu .nu-manta-dobra{stroke:#fff;stroke-width:1.5;opacity:.35;fill:none}
.mt-ceu .nu-linha{stroke:#B9D3DF;stroke-width:2;fill:none}
/* as estrelas acendem no último terço, cada uma no seu tempo */
.mt-ceu .nu-e{fill:#fff;opacity:.92}
.mt-live .mt-ceu .nu-e{opacity:clamp(0,calc((var(--p,0) - .55 - var(--i)*.008)/.18),.92)}
@media(max-width:900px){
  .mt-noites .mt-pin{grid-template-columns:1fr;gap:24px}
  .mt-noites .mt-stage{order:-1}
  .mt-noites .mt-quote{margin-top:24px}
  .mt-ceu{aspect-ratio:1.3}
}

/* ============================ a peça: ar fresco ============================
   Fotografia real de uma sala com a porta aberta e a cortina levantada pelo ar.
   É cenário, não obra do cliente: não se vê equipamento nenhum, e é por isso que
   pode entrar. As correntes desenham-se por cima e as folhas vão com elas, por
   offset-path, que o browser compõe sem tocar no layout. */
.mt-ar-peca{--run:170svh}
.mt-ar-peca .mt-pin{display:block}
.mt-ar-peca .mt-stage{margin:0}
.mt-ar-peca .mt-cap{font-size:12px;margin:12px 0 0;color:var(--muted)}
.mt-ar{position:relative;display:block;width:100%;aspect-ratio:1.79;overflow:hidden;border-radius:18px}
.mt-ar .ar-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mt-ar .ar-desenho{position:absolute;inset:0;width:100%;height:100%}
/* as correntes desenham-se desde a abertura */
.mt-ar .ar-rota{stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;opacity:.5;
  filter:drop-shadow(0 1px 3px rgba(6,43,50,.35))}
.mt-live .mt-ar .ar-rota{stroke-dasharray:var(--L,2000);
  stroke-dashoffset:calc(var(--L,2000) * (1 - clamp(0,calc((var(--p,0) - .05)/.4),1)))}
/* as folhas seguem a corrente que lhes calha */
.mt-ar .ar-f{fill:var(--olive)}
.mt-ar .ar-fn{stroke:#fff;stroke-width:1.6;fill:none;opacity:.6}
.mt-ar .ar-folha{offset-path:var(--rota);offset-rotate:auto;offset-distance:100%;opacity:0;
  filter:drop-shadow(0 2px 4px rgba(6,43,50,.3))}
.mt-live .mt-ar .ar-folha{
  offset-distance:calc(clamp(0,calc((var(--p,0) - var(--atraso))/.62),1) * 100%);
  opacity:clamp(0,calc((var(--p,0) - var(--atraso))*7),1)}
@media(max-width:900px){.mt-ar-peca{--run:130svh}.mt-ar{aspect-ratio:1.4}}

/* ============================ a peça: a energia depois do sol ============================
   Fotografia real de uma casa ao anoitecer, com as janelas acesas. É cenário e não
   obra do cliente: não se vê instalação nenhuma, e é por isso que pode entrar.
   O scroll é o fim do dia: o sol desce, a energia desce pelo fio em pontos, a bateria
   enche com a percentagem a contar, e a casa acende quando há carga. */
.mt-sol-peca{--run:190svh}
.mt-sol-peca .mt-pin{display:block}
.mt-sol-peca .mt-stage{margin:0}
.mt-sol-peca .mt-cap{font-size:12px;margin:12px 0 0;color:var(--muted)}
.mt-sol{position:relative;display:block;width:100%;aspect-ratio:1.79;overflow:hidden;border-radius:18px}
.mt-sol .so-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* a casa está apagada ao princípio e acende conforme a bateria enche */
.mt-sol .so-escuro{position:absolute;inset:0;background:#0a1420;opacity:0}
.mt-live .mt-sol .so-escuro{opacity:calc(.68 * (1 - clamp(0,calc((var(--p,0) - .3)/.45),1)))}
.mt-sol .so-desenho{position:absolute;inset:0;width:100%;height:100%}
/* o sol desce e apaga-se */
.mt-sol .so-sol{transform:translate(980px,180px);opacity:0}
.mt-live .mt-sol .so-sol{transform:translate(980px,calc(180px + var(--p,0)*300px));
  opacity:calc(1 - clamp(0,calc(var(--p,0)/.45),1))}
.mt-sol .so-disco{fill:#f2c46a}
.mt-sol .so-raios{stroke:#f2c46a;stroke-width:3;stroke-linecap:round;opacity:.8}
/* o fio e a energia que desce por ele */
.mt-sol .so-fio{stroke:var(--olive);stroke-width:3;fill:none;stroke-linecap:round;opacity:.65;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.4))}
.mt-live .mt-sol .so-fio{stroke-dasharray:var(--L,400);
  stroke-dashoffset:calc(var(--L,400)*(1 - clamp(0,calc((var(--p,0) - .12)/.25),1)))}
.mt-sol .so-ponto{fill:var(--olive);offset-path:path('M980 180C940 300 900 400 870 470');
  offset-distance:100%;opacity:0}
.mt-live .mt-sol .so-ponto{
  offset-distance:calc(mod(calc((var(--p,0)*3.2) + var(--i)*.2),1)*100%);
  opacity:clamp(0,calc((var(--p,0) - .2)*6),.95)}
/* a bateria enche */
.mt-sol .so-bcaixa,.mt-sol .so-bterm{fill:rgba(255,255,255,.94);stroke:var(--deep);stroke-width:2.4}
.mt-sol .so-bborda{fill:none;stroke:var(--deep);stroke-width:2}
.mt-sol .so-bnivel{fill:var(--olive);transform-box:fill-box;transform-origin:bottom;transform:scaleY(1)}
.mt-live .mt-sol .so-bnivel{transform:scaleY(clamp(0,calc((var(--p,0) - .2)/.65),1))}
.mt-sol .so-pct{font-family:"Schibsted Grotesk",Arial,sans-serif;font-size:24px;font-weight:600;fill:var(--deep)}
@media(max-width:900px){.mt-sol-peca{--run:150svh}.mt-sol{aspect-ratio:1.4}}

/* As peças de climatização vivem fora da coluna de texto: numa coluna estreita
   o bloco fixado sobrava meio ecrã por baixo da imagem. */
.mt-ar-peca,.mt-sol-peca{width:100%;margin-top:clamp(32px,4vw,56px)}
.mt-ar-peca .mt-pin,.mt-sol-peca .mt-pin{min-height:0;height:auto;padding:0;align-content:start}