/* Versicolor® · Método (dono: frente F7, DIRECAO-v2 §4.4 e a mistura pedida pelo Daniel a 15-Out-2026).
   1 abertura · 2 as seis etapas em sequência (sem JS e com movimento reduzido: cada etapa com o seu desenho parado;
     no PC uma por linha, abaixo de 1024 px numa fila que se percorre de lado, para a página caber no teto de ecrãs)
   · 3 o palco vivo (.mp-vivo com .mp-pc ou .mp-tel, postos por um script em linha logo no início da secção, para não
     haver salto): no PC com rato ou trackpad a secção fica presa e o scroll conduz a planta (--mp-preso ecrãs de
     percurso, um gesto por etapa); nos ecrãs táteis, separadores e swipe, nada preso
   · 4 o traço (camadas e rótulos) · 5 saídas. Usa base.css: numeral, rótulo, ligação, t-frase, t-texto. */

/* ------------------------------------------------------------------ 1. abertura */
.metodo-abertura { padding-block: calc(var(--cab) + clamp(24px, 4vw, 56px)) clamp(40px, 5vw, 72px); }
.metodo-abertura__grelha { row-gap: 28px; align-items: end; }
.metodo-abertura__texto { grid-column: 1 / -1; display: grid; gap: 18px; align-content: end; }
.metodo-abertura__titulo { max-width: 10ch; }
.metodo-abertura__titulo sup { font-size: .3em; vertical-align: 1.6em; margin-left: .06em; letter-spacing: 0; }
.metodo-abertura__principio { max-width: none; text-wrap: balance; }
.metodo-abertura__intro { color: var(--tinta-3); max-width: 50ch; text-wrap: pretty; }
.metodo-abertura__foto { grid-column: 1 / -1; margin: 0; }
@media (max-width: 1023px) { .metodo-abertura__foto { aspect-ratio: 3 / 2; } }
@media (min-width: 1024px) {
  .metodo-abertura__texto { grid-column: 1 / 8; padding-bottom: 8px; }
  .metodo-abertura__foto { grid-column: 9 / -1; max-height: min(50svh, 470px); aspect-ratio: 4 / 5; justify-self: end; width: 100%; }
}

/* ------------------------------------------------------------------ 2. as seis etapas (comum) e em sequência (sem JS, movimento reduzido) */
/* --mp-preso: o percurso preso, em ecrãs (o scroll durante o qual o palco fica fixo). A secção mede esse percurso mais
   um ecrã. 1,95 ecrãs = 5 passos de 0,39 ecrã, da 01 à 06 (a 01 assenta quando a secção chega ao topo, a 06 no fim). */
.metodo-palco { --mp-preso: 1.95; background: var(--noite); }
.mp-envolve { padding-block: calc(var(--secao) * .6) var(--secao); }
.mp-desenho { display: none; }

/* separadores 01 a 06: numeral e verbo; o escolhido acende o fio (no PC o fio enche com o scroll, --p) */
.mt-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; }
.mt-tab { position: relative; display: grid; gap: 8px; align-content: start; justify-items: start; min-height: 44px; padding: 16px 8px 12px 0;
  color: var(--tinta-2); transition: color .3s var(--ease); -webkit-tap-highlight-color: transparent; }
.mt-tab::after { content: ''; position: absolute; left: 0; right: 12px; top: 0; height: 1px; background: var(--linha); }
.mt-tab::before { content: ''; position: absolute; z-index: 1; left: 0; right: 12px; top: 0; height: 1px; background: var(--luz);
  transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
.mt-tab[aria-selected="true"] { color: var(--osso); }
.mt-tab__n { color: var(--tinta-2); transition: color .3s var(--ease); }
.mt-tab[aria-selected="true"] .mt-tab__n { color: var(--luz); }
.mt-tab__verbo { font: 300 clamp(18px, 1.6vw, 26px)/1.05 var(--serif); letter-spacing: -.012em; }
.mt-tab:focus-visible { outline: 2px solid var(--luz); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .mt-tab:hover { color: var(--osso); } }
@media (min-width: 768px) and (max-width: 1023px) { .mt-tab__verbo { font-size: 17px; } }
@media (max-width: 767px) {
  .mt-tabs { display: flex; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--margem) * -1); padding-inline: var(--margem);
    scroll-snap-type: x proximity; overscroll-behavior-x: contain; scroll-padding-inline: var(--margem); }
  .mt-tabs::-webkit-scrollbar { display: none; }
  .mt-tab { flex: 0 0 auto; padding-right: 22px; scroll-snap-align: start; }
  .mt-tab::before, .mt-tab::after { right: 14px; }
  .mt-tab__verbo { font-size: 19px; }
}

/* cada etapa: o desenho parado, o texto do cliente e as duas imagens da fase */
.mp-etapas { margin-top: clamp(20px, 2.4vw, 32px); }
.mp-etapa { display: grid; gap: 20px; align-content: start; min-width: 0; }
.mp-etapa__planta { display: grid; gap: 12px; align-content: start; color: var(--osso); min-width: 0; }
.mp-parado { position: relative; aspect-ratio: 1000 / 660; }
.mp-parado__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mp-parado__svg :is(path, use) { fill: none; }
.mp-etapa__legenda { margin: 0; color: var(--tinta-2); }
.mp-foto { position: absolute; inset: 0; overflow: hidden; background: var(--superficie); }
.mp-foto picture, .mp-foto img { display: block; width: 100%; height: 100%; }
.mp-foto img { object-fit: cover; }
.mp-etapa__texto { display: grid; gap: 12px; align-content: start; min-width: 0; }
.mp-etapa__verbo { margin: 0; letter-spacing: .2em; display: flex; gap: 14px; align-items: baseline; }
.mp-etapa__n { color: var(--tinta-2); letter-spacing: .1em; }
.mp-etapa__frase { max-width: 20ch; text-wrap: balance; color: var(--osso); }
.mp-etapa__corpo { color: var(--tinta-3); max-width: 44ch; text-wrap: pretty; }
.mp-etapa__lig { margin-top: 4px; justify-self: start; }
.mp-etapa__imgs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-content: start; min-width: 0; }
.mt-fig { margin: 0; min-width: 0; position: relative; }
/* a largura é sempre a da célula: com a altura fixada no palco do PC, o aspect-ratio em linha do <picture> não a encolhe */
.mt-fig > picture { display: block; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; background: var(--superficie); }
.mt-fig img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* render: o rótulo "3D" sobre a imagem, como nas páginas de obra (um render nunca passa por fotografia) */
.mt-fig__3d { position: absolute; left: 8px; top: 8px; z-index: 2; padding: 4px 7px 3px; font-size: 10px; letter-spacing: .14em;
  background: rgb(11 11 12 / .66); color: var(--osso); pointer-events: none; }

/* em sequência no PC: desenho, texto e imagens lado a lado, uma etapa por linha (cerca de 0,47 ecrã cada a 1440x900) */
.metodo-palco:not(.mp-vivo) .mp-etapa + .mp-etapa { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--linha); }
@media (min-width: 1024px) {
  .metodo-palco:not(.mp-vivo) .mp-etapa { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--calha); align-items: start; }
  .metodo-palco:not(.mp-vivo) .mp-etapa__planta { grid-column: 1 / 6; }
  .metodo-palco:not(.mp-vivo) .mp-etapa__texto { grid-column: 6 / 10; padding-top: 26px; }
  .metodo-palco:not(.mp-vivo) .mp-etapa__imgs { grid-column: 10 / -1; grid-template-columns: minmax(0, 1fr); padding-top: 26px; }
  .metodo-palco:not(.mp-vivo) .mt-fig > picture { aspect-ratio: 9 / 5 !important; }
}
/* em sequência abaixo de 1024 px: as seis etapas numa fila que se percorre de lado (a seguinte espreita à direita);
   os separadores levam a cada uma sem JS (âncoras) */
@media (max-width: 1023px) {
  .metodo-palco:not(.mp-vivo) .mp-etapas { display: flex; align-items: flex-start; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--margem) * -1); padding-inline: var(--margem);
    scroll-padding-inline: var(--margem); }
  .metodo-palco:not(.mp-vivo) .mp-etapas::-webkit-scrollbar { display: none; }
  .metodo-palco:not(.mp-vivo) .mp-etapa { flex: 0 0 min(86%, 460px); scroll-snap-align: start; gap: 18px; }
  .metodo-palco:not(.mp-vivo) .mp-etapa + .mp-etapa { margin: 0; padding: 0; border: 0; }
}

/* ------------------------------------------------------------------ 3. o palco vivo (.mp-vivo; sem .sem-mov) */
.js:not(.sem-mov) .mp-vivo .mp-desenho { display: flex; flex-direction: column; position: relative; color: var(--osso); min-height: 0; }
.js:not(.sem-mov) .mp-vivo .mp-desenho__legenda { margin: 0; color: var(--tinta-2); min-height: 1.2em; transition: opacity .3s var(--ease); }
.js:not(.sem-mov) .mp-vivo .mp-desenho__quadro { position: relative; flex: 1; min-height: 0; margin-top: 12px; }
.js:not(.sem-mov) .mp-vivo .mp-desenho .mp-foto { opacity: 0; visibility: hidden; transform-origin: 50% 60%; will-change: opacity, transform; }
.js:not(.sem-mov) .mp-vivo .mp-etapa__planta { display: none; }
.js:not(.sem-mov) .mp-vivo .mp-etapas { display: grid; }
.js:not(.sem-mov) .mp-vivo .mp-etapa { grid-area: 1 / 1; margin: 0; padding: 0; border: 0; row-gap: 22px; grid-template-columns: minmax(0, 1fr);
  opacity: 0; visibility: hidden; transition: opacity .2s var(--ease), visibility 0s linear .2s; }
.js:not(.sem-mov) .mp-vivo .mp-etapa.is-ativa { opacity: 1; visibility: visible; transition: opacity .5s var(--ease) .14s, visibility 0s; }
.js:not(.sem-mov) .mp-vivo .mp-etapa :is(.mp-etapa__texto > *, .mt-fig) { transform: translateY(12px); transition: transform .2s var(--ease); }
.js:not(.sem-mov) .mp-vivo .mp-etapa.is-ativa :is(.mp-etapa__texto > *, .mt-fig) { transform: none; transition: transform .7s var(--ease) .14s; }
.js:not(.sem-mov) .mp-vivo .mp-etapa.is-ativa .mp-etapa__texto > :nth-child(2) { transition-delay: .18s; }
.js:not(.sem-mov) .mp-vivo .mp-etapa.is-ativa .mp-etapa__texto > :nth-child(n+3) { transition-delay: .22s; }
.js:not(.sem-mov) .mp-vivo .mp-etapa.is-ativa .mt-fig { transition-delay: calc(.24s + var(--k, 0) * .06s); }
.js:not(.sem-mov) .mp-vivo .mp-etapa :is(.mp-etapa__texto, .mp-etapa__imgs) { grid-column: 1 / -1; grid-row: auto; align-self: start; }

/* PC com rato ou trackpad: a secção fica presa enquanto as seis etapas passam; a planta ocupa metade da largura, à esquerda */
@media (min-width: 1024px) {
  .js:not(.sem-mov) .mp-vivo.mp-pc .mp-percurso { height: calc(100svh * (1 + var(--mp-preso))); }
  .js:not(.sem-mov) .mp-vivo.mp-pc .mp-fixo { position: sticky; top: 0; height: 100svh; padding-top: var(--cab); overflow: hidden;
    display: flex; flex-direction: column; }
  .js:not(.sem-mov) .mp-vivo.mp-pc .mp-envolve { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column;
    padding-block: clamp(10px, 2.2svh, 24px) clamp(24px, 5svh, 48px); }
  .js:not(.sem-mov) .mp-vivo.mp-pc .mp-tabs { flex: none; }
  .js:not(.sem-mov) .mp-vivo.mp-pc .mt-tab { padding-block: 14px 0; }
  .js:not(.sem-mov) .mp-vivo.mp-pc .mp-corpo { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--calha); margin-top: clamp(16px, 3svh, 32px); }
  .js:not(.sem-mov) .mp-vivo.mp-pc .mp-desenho { grid-column: 1 / 7; }
  .js:not(.sem-mov) .mp-vivo.mp-pc .mp-etapas { grid-column: 8 / -1; margin: 0; align-self: center; }
  .js:not(.sem-mov) .mp-vivo.mp-pc .mp-etapa__imgs { column-gap: var(--calha); }
  /* em ecrãs baixos (1024x768, 1366x768) as imagens encolhem para caber no ecrã preso, com corte e nunca esticadas */
  .js:not(.sem-mov) .mp-vivo.mp-pc .mt-fig > picture { aspect-ratio: auto !important; height: clamp(110px, calc((100svh - 560px) * .9), 230px); }
}

/* ecrãs táteis (telemóvel, tablet, iPad em paisagem): nada preso; a planta grande no topo do palco, o texto e as imagens por baixo */
.js:not(.sem-mov) .mp-vivo.mp-tel .mp-envolve { padding-block: 36px 52px; }
.js:not(.sem-mov) .mp-vivo.mp-tel .mp-desenho { margin-top: 18px; height: clamp(230px, min(74vw, 50svh), 520px); touch-action: pan-y; }
.js:not(.sem-mov) .mp-vivo.mp-tel .mp-desenho__quadro { margin-top: 10px; }
.js:not(.sem-mov) .mp-vivo.mp-tel .mp-etapas { margin-top: 22px; touch-action: pan-y; }
.js:not(.sem-mov) .mp-vivo.mp-tel .mp-etapa { row-gap: 18px; }
/* tablet em paisagem (1024 px ou mais, ao toque): a planta à esquerda e o texto à direita, como no PC, sem prender */
@media (min-width: 1024px) {
  .js:not(.sem-mov) .mp-vivo.mp-tel .mp-corpo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--calha);
    margin-top: 24px; align-items: center; }
  .js:not(.sem-mov) .mp-vivo.mp-tel .mp-desenho { grid-column: 1 / 7; margin-top: 0; height: clamp(360px, 62svh, 600px); }
  .js:not(.sem-mov) .mp-vivo.mp-tel .mp-etapas { grid-column: 8 / -1; margin-top: 0; }
  .js:not(.sem-mov) .mp-vivo.mp-tel .mp-etapa__imgs { column-gap: var(--calha); }
}

/* ------------------------------------------------------------------ 4. o traço: camadas e rótulos */
/* rótulos das camadas separadas (etapa 04); no palco vivo a posição vem do metodo.js, nos desenhos parados vem em % */
.mt-rot { position: absolute; left: 0; top: 0; z-index: 2; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  font: 500 10px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-3); opacity: 0;
  margin-top: -5px; pointer-events: none; }
.mt-rot::before { content: ''; width: 22px; height: 1px; background: var(--linha-forte); }
.js:not(.sem-mov) .mp-vivo .mp-desenho .mt-rot { will-change: transform, opacity; }
.mt-rot--parado { opacity: 1; margin-left: 10px; translate: 0 0; }
@media (max-width: 767px) { .mt-rot { font-size: 9px; letter-spacing: .14em; gap: 6px; } .mt-rot::before { width: 12px; } }
.mp-traco { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; color: inherit;
  --mt-tinta: var(--osso); --mt-novo: var(--luz); --mt-antes: var(--osso); --mt-baixa: 1; }
/* as camadas usam <use> do mesmo traço: o caminho em <defs> herda a cor e a espessura do <use> que o chama */
.mp-traco defs path { stroke: inherit; stroke-width: inherit; }
.mp-traco .mt-c :is(path, use) { fill: none; vector-effect: non-scaling-stroke; }
.mp-traco .mt-chao { stroke: var(--pedra); stroke-width: .6; }
.mp-traco .mt-chao use { opacity: calc(.55 * var(--mt-baixa)); }
.mp-traco .mt-pegada { stroke: var(--pedra); stroke-width: .6; }
.mp-traco .mt-guias { stroke: var(--pedra); stroke-width: .75; stroke-dasharray: 2 6; }
.mp-traco .mt-antes { stroke: var(--mt-antes); stroke-width: 1; }
.mp-traco .mt-paredes { stroke: var(--mt-novo); stroke-width: 1; }
.mp-traco .mt-vaos { stroke: #B7B2A8; stroke-width: .7; }
.mp-traco .mt-arestas { stroke: var(--mt-tinta); stroke-width: .6; }
.mp-traco .mt-topo { stroke: var(--mt-tinta); stroke-width: 1; }
.mp-traco .mt-mob { stroke: #B7B2A8; stroke-width: .7; }
.mp-traco .mt-teto { stroke: var(--pedra); stroke-width: .7; }
.mp-traco .mt-luz { stroke: var(--luz); stroke-width: 1.5; }
/* o traço que se desenha: cada caminho com pathLength 1 e o tracejado posto pelo JS (--d); só o grupo que se está a
   desenhar paga o tracejado, o resto passa ao traço inteiro (um só caminho) */
.mp-traco .mt-traca path { stroke-dasharray: 1 1; stroke-dashoffset: var(--d, 1); }
.mp-traco .mt-luz .mt-traca path { stroke-dashoffset: var(--d, 1); }
.mp-traco .is-inteiro > .mt-traca, .mp-traco :not(.is-inteiro) > .mt-inteiro { display: none; }
.mp-traco .is-vazio > .mt-traca { visibility: hidden; }
/* sem JS: a casa como estava, vista de cima, já desenhada */
html:not(.js) .mp-traco .mt-antes > .mt-traca { display: none; }
html:not(.js) .mp-traco .mt-antes > .mt-inteiro { display: inline; }

/* ------------------------------------------------------------------ 5. saídas */
.metodo-saidas__grelha { row-gap: 12px; }
.metodo-saida { grid-column: 1 / -1; display: grid; gap: 10px; align-content: start; padding: 20px 0; border-top: 1px solid var(--linha); color: inherit; }
.metodo-saida__frase { max-width: none; }
@media (min-width: 1024px) {
  .metodo-saida { grid-column: span 6; }
}
@media (hover: hover) and (pointer: fine) {
  .metodo-saida .ligacao { transition: color .3s var(--ease); }
  .metodo-saida:hover .ligacao { color: var(--luz); }
}