/* ==========================================================================
 * O PALCO DO ESTÚDIO AUTOCÁVADO: o exterior diante da parede e o interior a
 * 360 graus no mesmo sítio, com a troca «Estúdio | Cenário | Interior».
 *
 * A folha única do configurador do site (/configurador), do da cotação no CMS,
 * da página de modelo e da proposta digital, a par do módulo
 * Shared/Components/Interior360/StudioStage.js, que monta o painel do interior
 * e a troca e escreve as medidas do estúdio. Cada sítio
 * fica com o que é dele: onde a troca assenta, a luz do «a carregar» e os
 * tokens da casa dele, nos --studio-* abaixo. O resto é daqui.
 *
 * Os tokens, que cada sítio põe no palco, no painel e na troca (o painel vai
 * para o <body> no ecrã inteiro e leva-os consigo), e o valor do site quando o
 * sítio não os põe:
 *   --studio-wall-ink    a tinta do degradê da parede
 *   --studio-logo-ink    o grafite do logótipo
 *   --studio-ink         o escuro do painel e dos véus por cima do panorama
 *   --studio-field       o claro do texto e dos ícones sobre o panorama
 *   --studio-glass, --studio-glass-filter, --studio-glass-edge,
 *   --studio-glass-hover o vidro escuro dos comandos, o rebordo e o rato
 *   --studio-ease        a curva das transições
 *   --studio-radius      o canto do painel
 *   --studio-pad         a margem dos comandos à borda do painel
 *   --studio-note-top    onde começa a nota das imagens, por baixo dos comandos
 *                        que o sítio põe no topo do palco (por omissão, a margem)
 *   --studio-note-end    o recuo da nota à direita, para não passar por baixo
 *                        da troca quando ela vive no canto do palco
 *   --studio-full-z      a camada do palco no ecrã inteiro (por omissão, 2000; o
 *                        CMS põe a dos modais, abaixo do telefone)
 * O StudioStage escreve na caixa, além das medidas do estúdio, o
 * `--cfg-switch-w` (a largura da troca), o `--studio-scene-gap` (do fundo das
 * vistas ao fundo da caixa, onde a falha do cenário e os comandos assentam) e,
 * no ecrã inteiro, o `--studio-full-bg` (a parede que a caixa tinha por trás) e
 * o zoom (`--studio-zoom`, `--studio-pan-x`, `--studio-pan-y`); e na dica do
 * gesto o sítio livre dela (`--studio-hint-shift`, `--studio-hint-lift`).
 * ========================================================================== */

/* ── O ESTÚDIO, por trás das vistas e fixo enquanto o carro roda ────────────
   A parede é o fundo do palco, o chão é o mesmo fundo abaixo da linha do
   horizonte, e a parede escurece até à linha, como na página da L200 (a mesma
   curva de 16 paragens), o que lhe dá a profundidade. O logótipo oficial, em
   grafite, fica acima do tejadilho e ao meio (sai quando não cabe com metade
   da largura do desenho, na página de modelo). O JS (`paintStudio`) escreve na
   caixa do palco a altura da linha (medida nas vistas reais, um pouco acima do
   centro das rodas), a do degradê e o sítio e a largura do logótipo; sem as
   vistas medidas do carro, o estúdio não se desenha. */
.cfg-studio { position: relative; isolation: isolate; }
.cfg-studio::before {
    content: ''; position: absolute; left: 0; right: 0; z-index: -1; pointer-events: none;
    top: calc(var(--studio-horizonte, 0px) - var(--studio-sombra, 0px));
    height: var(--studio-sombra, 0px);
    opacity: 0; transition: opacity .45s var(--studio-ease, var(--site-ease));
    background: linear-gradient(to top, /* ds-ok: a curva de 16 paragens da L200, na tinta da parede */
        color-mix(in srgb, var(--studio-wall-ink, var(--site-ink)) 24.3%, transparent) 0%,
        color-mix(in srgb, var(--studio-wall-ink, var(--site-ink)) 23.98%, transparent) 8.1%,
        color-mix(in srgb, var(--studio-wall-ink, var(--site-ink)) 23.11%, transparent) 15.5%,
        color-mix(in srgb, var(--studio-wall-ink, var(--site-ink)) 21.77%, transparent) 22.5%,
        color-mix(in srgb, var(--studio-wall-ink, var(--site-ink)) 20.05%, transparent) 29%,
        color-mix(in srgb, var(--studio-wall-ink, var(--site-ink)) 18.01%, transparent) 35.3%,
        color-mix(in srgb, var(--studio-wall-ink, var(--site-ink)) 15.75%, transparent) 41.2%,
        color-mix(in srgb, var(--studio-wall-ink, var(--site-ink)) 13.37%, transparent) 47.1%,
        color-mix(in srgb, var(--studio-wall-ink, var(--site-ink)) 10.94%, transparent) 52.9%,
        color-mix(in srgb, var(--studio-wall-ink, var(--site-ink)) 8.55%, transparent) 58.8%,
        color-mix(in srgb, var(--studio-wall-ink, var(--site-ink)) 6.29%, transparent) 64.7%,
        color-mix(in srgb, var(--studio-wall-ink, var(--site-ink)) 4.25%, transparent) 71%,
        color-mix(in srgb, var(--studio-wall-ink, var(--site-ink)) 2.53%, transparent) 77.5%,
        color-mix(in srgb, var(--studio-wall-ink, var(--site-ink)) 1.19%, transparent) 84.5%,
        color-mix(in srgb, var(--studio-wall-ink, var(--site-ink)) .32%, transparent) 91.9%,
        color-mix(in srgb, var(--studio-wall-ink, var(--site-ink)) 0%, transparent) 100%);
}
.cfg-studio-logo {
    position: absolute; left: 50%; top: var(--studio-logo-y, 0px); z-index: -1; pointer-events: none;
    width: var(--studio-logo-w, 0px); transform: translate(-50%, -50%);
    color: var(--studio-logo-ink, var(--mitsubishi-anthracite-gray)); line-height: 0;
    opacity: 0; transition: opacity .45s var(--studio-ease, var(--site-ease));
}
.cfg-studio-logo svg { display: block; width: 100%; height: auto; }
.has-studio .cfg-studio::before { opacity: var(--studio-forca, .5); }
.has-studio.has-logo .cfg-studio-logo { opacity: 1; }

/* ── O CENÁRIO (Shared/Components/Scene360) desenha o carro no seu canvas,
   primeiro filho do palco, por cima do estúdio e por baixo dos comandos. Com
   ele à vista (`has-scene`, que o Scene360 põe no palco no fim da entrada), as
   duas camadas das vistas escondem-se sem sair do sítio: a caixa delas diz ao
   cenário onde está o carro, e por isso nunca `display: none`. */
.cfg-studio.has-scene > :is(img, picture) { visibility: hidden; }

/* ── O INTERIOR A 360 GRAUS, com a interface da maqueta do Estúdio Autocávado
   (docs/maquetas/asx-interior-cenario/): o panorama enche o palco, um véu em
   cima e outro em baixo dão contraste ao que é branco, e os comandos são de
   vidro escuro, porque assentam numa fotografia. As vistas de fora ficam por
   baixo, montadas, e voltam com o mesmo ângulo. A troca é um cruzamento de
   180 ms; com o movimento reduzido é a seco. O visualizador escreve o
   `touch-action`, o `is-loading`, o `is-dragging` e, no ecrã inteiro, a
   posição fixa por cima de tudo; o StudioStage.js escreve o `is-error`, com a
   frase e o «Tentar outra vez» no lugar do panorama. ──────────────────────── */
.cfg-int360 {
    position: absolute; inset: 0; z-index: 4; overflow: hidden;
    border-radius: var(--studio-radius, 0px);
    background: var(--studio-ink, var(--site-ink)); color: var(--studio-field, var(--site-field));
    opacity: 0; transition: opacity .18s var(--studio-ease, var(--site-ease));
    cursor: grab; outline: none;
}
.cfg-int360[hidden] { display: none; }
.cfg-int360.is-on { opacity: 1; }
.cfg-int360.is-dragging { cursor: grabbing; }
.cfg-int360:focus-visible { box-shadow: inset 0 0 0 2px var(--studio-field, var(--site-field)), inset 0 0 0 4px var(--studio-ink, var(--site-ink)); } /* ds-ok: o foco do palco, o anel claro com o escuro por dentro, sobre a fotografia */
.cfg-int360.is-fullscreen { border-radius: 0; }
.cfg-int360-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* Até o primeiro panorama chegar, o palco mostra a luz a passar (a de cada
   sítio) e não um quadro preto. Numa troca de versão o panorama de antes fica
   até cruzar. */
.cfg-int360.is-loading:not(.has-pano) .cfg-int360-canvas { visibility: hidden; }
.cfg-int360::before, .cfg-int360::after {
    content: ''; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none;
}
/* O véu de cima desce até por baixo da nota: começa a 64% e fica assim até ao
   fim da segunda linha dela, para o branco da nota ler-se também sobre o
   vidro claro do para-brisas. */
.cfg-int360::before {
    --studio-veu: calc(var(--studio-note-top, var(--studio-pad, 12px)) + 36px);
    top: 0; height: calc(var(--studio-veu) + 64px);
    background: linear-gradient(to bottom, /* ds-ok: o véu sobre a fotografia, na tinta do palco, como o de baixo */
        color-mix(in srgb, var(--studio-ink, var(--site-ink)) 64%, transparent) 0,
        color-mix(in srgb, var(--studio-ink, var(--site-ink)) 64%, transparent) var(--studio-veu),
        color-mix(in srgb, var(--studio-ink, var(--site-ink)) 0%, transparent) 100%);
}
.cfg-int360::after {
    bottom: 0; height: 88px;
    background: linear-gradient(to top, color-mix(in srgb, var(--studio-ink, var(--site-ink)) 62%, transparent), color-mix(in srgb, var(--studio-ink, var(--site-ink)) 0%, transparent));
}
/* O TOPO DO PAINEL: o nome (só no ecrã inteiro) e a nota das imagens, um ponto
   acima das notas do site (11px e não 10, porque assenta numa fotografia), no
   claro do panorama. Sai com o erro, e enquanto não há panorama não há imagem a
   que se refira. */
.cfg-int360-top {
    position: absolute; z-index: 2; pointer-events: none;
    top: var(--studio-note-top, var(--studio-pad, 12px));
    left: var(--studio-pad, 12px);
    right: var(--studio-note-end, var(--studio-pad, 12px));
}
.cfg-int360-title { display: none; }
.cfg-int360-note {
    margin: 0; max-width: 60ch;
    font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0;
    color: var(--studio-field, var(--site-field));
}
.cfg-int360:not(.has-pano) .cfg-int360-note,
.cfg-int360.is-error .cfg-int360-note { visibility: hidden; }
/* Abaixo dos 641 px a nota sai do palco (tapava o habitáculo com a dica: 55% do
   palco colado do site a 390) e lê-se junto da troca, numa linha
   (`.cfg-stage-note`); no ecrã inteiro fica por baixo do nome. */
.cfg-int360:not(.is-fullscreen) .cfg-int360-note { display: none; }
.cfg-stage-note {
    flex: 1 0 100%; max-width: 100%; margin: 4px 0 0;
    font-size: 12px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cfg-stage-note[hidden] { display: none; }
/* O ERRO no lugar do panorama: a frase e o «Tentar outra vez», ao meio, sobre o
   escuro do painel. A dica sai, e o ecrã inteiro também (o StudioStage
   esconde o botão), que não há nada para ver. */
.cfg-int360-error {
    position: absolute; inset: 0; z-index: 3;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    padding: var(--studio-pad, 12px); text-align: center; cursor: default;
}
.cfg-int360-error[hidden] { display: none; }
.cfg-int360-error-text { margin: 0; max-width: 32ch; font-size: 14px; line-height: 1.4; color: var(--studio-field, var(--site-field)); }
.cfg-int360.is-error { cursor: default; }
/* A DICA DO GESTO, uma só para as três vistas e nos quatro sítios: uma
   cápsula de 32 px do vidro da troca, ao fundo e ao meio das vistas (à altura
   do meio do botão do ecrã inteiro), com a mão e a frase. Sai ao primeiro
   gesto (o StudioStage põe o `is-oculta`), a esbater. Não tapa o carro nem os
   comandos: o StudioStage mede o primeiro lugar livre e escreve o
   deslocamento (`--studio-hint-shift` ao lado, `--studio-hint-lift` para
   cima, negativo para baixo das vistas). Por baixo das vistas, entre elas e a
   linha seguinte (o palco colado do telemóvel), cabe a compacta, de 24 px
   (`is-compacta`). */
.cfg-stage-hint {
    position: absolute; z-index: 5; left: calc(50% + var(--studio-hint-shift, 0px)); transform: translateX(-50%);
    bottom: calc(var(--studio-scene-gap, 0px) + var(--studio-pad, 12px) + 6px + var(--studio-hint-lift, 0px));
    display: flex; align-items: center; gap: 8px; height: 32px; margin: 0; padding: 0 12px; border-radius: 16px;
    max-width: calc(100% - 2 * (var(--studio-pad, 12px) + 52px)); white-space: nowrap;
    color: var(--studio-field, var(--site-field)); font-size: 12px; line-height: 16px; pointer-events: none;
    transition: opacity .45s var(--studio-ease, var(--site-ease));
}
.cfg-stage-hint[hidden] { display: none; }
.cfg-stage-hint.is-oculta { opacity: 0; }
.cfg-stage-hint .ph-icon { flex: none; font-size: 14px; }
.cfg-stage-hint > span { overflow: hidden; text-overflow: ellipsis; }
.cfg-stage-hint.is-compacta { gap: 6px; height: 24px; padding: 0 10px; border-radius: 12px; font-size: 11px; }
.cfg-stage-hint.is-compacta .ph-icon { font-size: 12px; }
/* OS COMANDOS DO PALCO, de todas as vistas: o ecrã inteiro ao canto de baixo
   à direita das vistas (por cima do painel do interior), e o zoom, que só há
   no ecrã inteiro. A distância ao fundo é a das vistas, porque a troca pode
   viver na caixa, por baixo delas. */
.cfg-stage-tools {
    position: absolute; z-index: 6; display: flex; gap: 8px;
    right: var(--studio-pad, 12px); bottom: calc(var(--studio-scene-gap, 0px) + var(--studio-pad, 12px));
}
.cfg-stage-zoom { position: absolute; z-index: 6; display: flex; flex-direction: column; gap: 8px; }
.cfg-stage-zoom[hidden] { display: none; }
/* O que o leitor de ecrã ouve (o quadrante e o «Interior à vista»), fora da vista. */
.cfg-int360-status {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ── A TROCA E OS BOTÕES REDONDOS são o mesmo vidro. Onde a troca assenta (no
   palco, ou na linha por baixo dele) é de cada sítio. A troca tem um botão por
   vista que a versão tem (o StudioStage esconde os outros), e aparece com dois
   ou mais. Na cotação do CMS a troca é o contentor das pílulas da casa
   (`is-pills`, com o desenho do Pills.js e do pills.css), e daqui leva só o
   sítio e a camada; no site público e na proposta digital fica o vidro
   (decisão de 2026-11-10). ───────────────────────────────────────────────── */
.cfg-view-switch:not(.is-pills),
.cfg-int360-btn,
.cfg-int360-retry,
.cfg-stage-hint,
.cfg-stage-guide {
    background: var(--studio-glass, color-mix(in srgb, var(--site-ink) 64%, transparent));
    -webkit-backdrop-filter: var(--studio-glass-filter, blur(8px)); backdrop-filter: var(--studio-glass-filter, blur(8px));
    box-shadow: inset 0 0 0 1px var(--studio-glass-edge, color-mix(in srgb, var(--site-field) 28%, transparent)); /* ds-ok: o rebordo do vidro, como na maqueta */
}
.cfg-int360-btn {
    width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
    display: grid; place-items: center; color: var(--studio-field, var(--site-field)); cursor: pointer;
    transition: background-color .2s var(--studio-ease, var(--site-ease));
}
/* No ecrã inteiro o painel vive no <body>, fora do `[hidden]` de cada folha. */
.cfg-int360-btn[hidden] { display: none; }
.cfg-int360-btn .ph-icon { font-size: 20px; }
/* Sem mais para onde aproximar ou afastar: o botão fica no Tab e diz porquê no `aria-disabled`. */
.cfg-int360-btn[aria-disabled="true"] { opacity: .45; cursor: default; }
/* O «Tentar outra vez» é um botão da troca sozinho: o mesmo vidro, a mesma
   altura e a mesma letra. */
.cfg-int360-retry {
    min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px;
    color: var(--studio-field, var(--site-field)); font: inherit; font-size: 13px; font-weight: 500; line-height: 44px;
    cursor: pointer; transition: background-color .2s var(--studio-ease, var(--site-ease));
}
.cfg-view-switch { z-index: 6; }
.cfg-view-switch:not(.is-pills) { display: flex; padding: 2px; border-radius: 999px; }
/* O `[hidden]` ganha à moldura das pílulas (`display: inline-block` no pills.css). */
.cfg-view-switch[hidden][hidden],
.cfg-view-switch button[hidden] { display: none; }
.cfg-view-switch:not(.is-pills) > button {
    min-width: 44px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px;
    background: none; color: var(--studio-field, var(--site-field)); font: inherit; font-size: 13px; font-weight: 500; line-height: 44px;
    cursor: pointer; transition: background-color .2s var(--studio-ease, var(--site-ease)), color .2s var(--studio-ease, var(--site-ease));
}
.cfg-view-switch:not(.is-pills) > [aria-pressed="true"] { background: var(--studio-field, var(--site-field)); color: var(--studio-ink, var(--site-ink)); cursor: default; }
/* O CENÁRIO A PREPARAR-SE: a primeira compilação leva segundos, com o Estúdio
   à vista e a rodar. Passados 300 ms o botão ganha um anel a girar na tinta
   dele (o StudioStage põe o `is-busy`), desenhado DENTRO do padding, à direita
   e posicionado: não alarga o botão, e «Estúdio» e «Interior» não se mexem
   debaixo do dedo. Com o movimento reduzido não há anel (parado, lia-se como
   um «C»): a cápsula «A preparar o cenário» entra logo. */
.cfg-view-switch button { position: relative; }
.cfg-view-switch .is-busy::after {
    content: ''; position: absolute; right: 2px; top: 50%; width: 10px; height: 10px; margin-top: -5px;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
    animation: studioPrepara .8s linear infinite;
}
@keyframes studioPrepara { to { transform: rotate(360deg); } }

/* A FALHA DO CENÁRIO, sobre o Estúdio que voltou: uma cápsula do mesmo vidro
   da troca, por baixo do carro e ao meio das vistas de fora, com a frase e o
   «Tentar outra vez» no claro do botão premido. Dobra em duas linhas quando
   não cabe numa. O StudioStage diz a distância do fundo das vistas ao fundo da
   caixa (`--studio-scene-gap`: a troca pode viver por baixo delas). */
.cfg-scene-error {
    position: absolute; z-index: 5; left: 50%; transform: translateX(-50%);
    bottom: calc(var(--studio-scene-gap, 0px) + var(--studio-pad, 12px));
    width: max-content; max-width: calc(100% - 2 * var(--studio-pad, 12px));
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px;
    padding: 4px 4px 4px 12px; border-radius: 26px;
    background: var(--studio-glass, color-mix(in srgb, var(--site-ink) 64%, transparent));
    -webkit-backdrop-filter: var(--studio-glass-filter, blur(8px)); backdrop-filter: var(--studio-glass-filter, blur(8px));
    box-shadow: inset 0 0 0 1px var(--studio-glass-edge, color-mix(in srgb, var(--site-field) 28%, transparent)); /* ds-ok: o rebordo do vidro, o da troca */
    color: var(--studio-field, var(--site-field));
}
.cfg-scene-error[hidden] { display: none; }
/* A espera longa e a versão sem cenário dizem-se na mesma cápsula, sem botão. */
.cfg-scene-error[data-tipo="espera"],
.cfg-scene-error[data-tipo="sem"] { padding: 8px 16px; }
.cfg-scene-retry[hidden] { display: none; }
/* Abaixo dos 641 a cápsula sai de cima do carro (a 390 o palco colado tem 160 px
   e ela tapava um terço, rodas incluídas): fica em fluxo, junto da troca. */
.cfg-scene-error.is-junto {
    position: static; transform: none; width: auto; max-width: 100%; margin: 4px auto 0;
}
/* No telemóvel a frase e o botão cabem numa linha (a 390 o palco colado do site
   tem 160 px, e em duas linhas a falha tapava o carro); a partir dos 641 ganham
   a letra e o ar da troca. */
.cfg-scene-error-text { margin: 0; font-size: 12px; line-height: 1.4; text-align: center; }
.cfg-scene-retry {
    min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px;
    background: var(--studio-field, var(--site-field)); color: var(--studio-ink, var(--site-ink));
    font: inherit; font-size: 13px; font-weight: 500; line-height: 44px; cursor: pointer;
    transition: background-color .2s var(--studio-ease, var(--site-ease));
}
@media (hover: hover) {
    .cfg-scene-retry:hover { background: color-mix(in srgb, var(--studio-field, var(--site-field)) 86%, var(--studio-ink, var(--site-ink))); }
}
.cfg-scene-retry:focus-visible {
    outline: 2px solid var(--studio-field, var(--site-field)); outline-offset: 2px; /* ds-ok: o foco sobre a fotografia, o par do vidro */
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--studio-ink, var(--site-ink)) 50%, transparent); /* ds-ok: o halo escuro deixa ler o anel claro, como na troca */
}
@media (hover: hover) {
    .cfg-view-switch:not(.is-pills) > [aria-pressed="false"]:hover { background: var(--studio-glass-hover, color-mix(in srgb, var(--site-field) 14%, transparent)); }
    .cfg-int360-btn:hover,
    .cfg-int360-retry:hover { background: color-mix(in srgb, var(--studio-ink, var(--site-ink)) 80%, transparent); }
}
.cfg-view-switch:not(.is-pills) > button:focus-visible,
.cfg-int360-btn:focus-visible,
.cfg-int360-retry:focus-visible {
    outline: 2px solid var(--studio-field, var(--site-field)); outline-offset: 2px; /* ds-ok: o foco sobre a fotografia, o par do vidro */
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--studio-ink, var(--site-ink)) 50%, transparent); /* ds-ok: o halo escuro deixa ler o anel claro sobre a fotografia, como na maqueta */
}

/* ── O ECRÃ INTEIRO é a caixa do palco inteira, de todas as vistas, fixa por
   cima da página (o iPhone não tem a API do browser) e levada para o <body>
   pelo StudioStage: as vistas enchem-na e crescem de verdade, e o painel do
   interior enche-a por cima delas. «Fechar» (e «Frente», no interior) em cima à
   direita, a troca ao fundo e ao meio, o zoom ao fundo à direita, e as
   instruções por cima da troca. As margens são as do ecrã inteiro do interior
   (12 e 20 px, e 32 em cima e 48 dos lados no computador), com as do iPhone
   somadas. ─────────────────────────────────────────────────────────────── */
body > .is-stage-full {
    --studio-full-x: 12px; --studio-full-y: 12px;
    position: fixed; inset: 0; z-index: var(--studio-full-z, 2000);
    width: auto; height: auto; min-height: 0; max-width: none; max-height: none; margin: 0;
    display: block; overflow: hidden; border-radius: 0; aspect-ratio: auto; transform: none;
    background: var(--studio-full-bg, var(--studio-ink, var(--site-ink)));
}
body > .is-stage-full > .cfg-studio {
    position: absolute; inset: 0; width: auto; height: auto; min-height: 0; max-width: none; max-height: none;
    margin: 0; border: 0; aspect-ratio: auto; border-radius: 0; touch-action: none;
}
body > .is-stage-full > .cfg-int360 { inset: 0; aspect-ratio: auto; border-radius: 0; }
body > .is-stage-full > .cfg-stage-tools {
    top: calc(var(--studio-full-y) + env(safe-area-inset-top, 0px)); bottom: auto;
    right: calc(var(--studio-full-x) + env(safe-area-inset-right, 0px));
}
body > .is-stage-full > .cfg-stage-zoom {
    right: calc(var(--studio-full-x) + env(safe-area-inset-right, 0px));
    bottom: calc(var(--studio-full-y) + env(safe-area-inset-bottom, 0px));
}
/* A troca ao fundo, ao meio, sem tocar no zoom (44 px e o vão de cada lado). */
body > .is-stage-full > .cfg-view-switch {
    position: absolute; top: auto; right: auto; left: 50%; transform: translateX(-50%);
    bottom: calc(var(--studio-full-y) + env(safe-area-inset-bottom, 0px));
    width: max-content; max-width: calc(100% - 2 * (var(--studio-full-x) + 56px)); margin: 0;
}
/* As instruções e a cápsula do cenário assentam por cima da troca (48 px e o vão de 12). */
body > .is-stage-full > :is(.cfg-stage-guide, .cfg-scene-error) {
    position: absolute; left: 50%; transform: translateX(-50%); margin: 0;
    bottom: calc(var(--studio-full-y) + env(safe-area-inset-bottom, 0px) + 60px);
    width: max-content; max-width: calc(100% - 2 * (var(--studio-full-x) + 56px));
}
body > .is-stage-full:not(.has-switch) > :is(.cfg-stage-guide, .cfg-scene-error) { bottom: calc(var(--studio-full-y) + env(safe-area-inset-bottom, 0px)); }
/* A cápsula do cenário à vista diz mais do que as instruções: elas esperam. */
body > .is-stage-full:has(> .cfg-scene-error:not([hidden])) > .cfg-stage-guide { display: none; }
/* O INTERIOR NO ECRÃ INTEIRO: o nome em cima à esquerda, como na maqueta, e a
   nota por baixo dele, com o véu de cima a cobri-los; à direita ficam os
   comandos do palco. As instruções da vista substituem a dica do gesto. */
.cfg-int360.is-fullscreen::before { --studio-veu: 120px; height: 190px; }
.cfg-int360.is-fullscreen::after { height: 140px; }
.cfg-int360.is-fullscreen .cfg-int360-top { top: 20px; left: 20px; right: 132px; }
.cfg-int360.is-fullscreen .cfg-int360-title {
    display: block; margin: 0;
    font-size: 20px; font-weight: 600; line-height: 1.15; letter-spacing: -.012em;
}
.cfg-int360-title > span { display: block; margin-top: 4px; font-size: 13px; font-weight: 500; line-height: 1.35; letter-spacing: 0; }
.cfg-int360.is-fullscreen .cfg-int360-note { margin-top: 8px; }

/* AS INSTRUÇÕES: uma cápsula do vidro da troca, com cada gesto num item
   (ícone e frase curta), e o Esc. Dobram em linhas quando não cabem numa. Saem
   ao primeiro gesto (o StudioStage põe o `is-oculta`), a esbater; com o
   movimento reduzido, a seco. */
.cfg-stage-guide {
    z-index: 5; padding: 8px 16px; border-radius: 22px; pointer-events: none;
    color: var(--studio-field, var(--site-field)); font-size: 13px; line-height: 18px;
    transition: opacity .45s var(--studio-ease, var(--site-ease));
}
.cfg-stage-guide[hidden] { display: none; }
.cfg-stage-guide.is-oculta { opacity: 0; }
.cfg-stage-guide-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin: 0; padding: 0; list-style: none; }
.cfg-stage-guide-list > li { display: inline-flex; align-items: center; gap: 8px; }
.cfg-stage-guide-list .ph-icon { font-size: 16px; }
.cfg-stage-guide kbd {
    font: inherit; font-size: 11px; font-weight: 600; line-height: 16px; padding: 0 6px; border-radius: 4px;
    box-shadow: inset 0 0 0 1px var(--studio-glass-edge, color-mix(in srgb, var(--site-field) 28%, transparent)); /* ds-ok: a tecla desenha-se com o rebordo do vidro */
}

/* O ZOOM DAS VISTAS DE FORA (o Estúdio e o Cenário): a camada das vistas
   cresce a partir do meio e desloca-se (`--studio-pan-*`), com o estúdio, o
   carro e o canvas do cenário juntos (`is-scaled`). Acima do zoom de entrada
   (`is-zoomed`; ao alto abre a 1,4 ou menos, para o carro caber) arrasta-se
   para a mover (a mão aberta e fechada). A meio de um gesto (`is-panning`)
   segue o dedo a seco. Com o palco ampliado as setas de rodar das vistas
   saem, também na base: crescem com ele e saíam meio cortadas pelas bordas do
   ecrã, e aproximado arrastar já não roda; roda-se a arrastar na base e com as
   setas do teclado. */
body > .is-stage-full.is-scaled > .cfg-studio {
    transform: translate(var(--studio-pan-x, 0px), var(--studio-pan-y, 0px)) scale(var(--studio-zoom, 1));
    transform-origin: 50% 50%;
    transition: transform .18s var(--studio-ease, var(--site-ease));
}
body > .is-stage-full.is-zoomed > .cfg-studio { cursor: grab; }
body > .is-stage-full.is-panning > .cfg-studio { transition: none; cursor: grabbing; }
body > .is-stage-full.is-scaled > .cfg-studio button { visibility: hidden; }
/* Com o cenário no palco (o canvas dele, do nascer ao sair) o zoom é a seco: o
   cenário redesenha-se para cada escala, e uma passagem do `transform` corre no
   compositor à frente do canvas, que ficava um fotograma atrás e deixava a
   borda do ecrã por pintar ao afastar. */
body > .is-stage-full.is-scaled > .cfg-studio:has(> .scene360-canvas) { transition: none; }

@media (min-width: 641px) {
    .cfg-view-switch:not(.is-pills) > button { padding: 0 20px; }
    .cfg-view-switch:not(.is-pills) > .is-busy::after { right: 5px; }
    .cfg-scene-error { gap: 4px 12px; padding-left: 16px; }
    .cfg-scene-error-text { font-size: 13px; }
    .cfg-scene-retry { padding: 0 20px; }
    .cfg-int360.is-fullscreen .cfg-int360-top { top: 32px; left: 32px; }
    .cfg-int360.is-fullscreen .cfg-int360-title { font-size: 22px; }
    .cfg-int360:not(.is-fullscreen) .cfg-int360-note { display: block; }
    .cfg-stage-note:not([hidden]) { display: none; }
    body > .is-stage-full { --studio-full-x: 20px; --studio-full-y: 20px; }
}
@media (min-width: 1025px) {
    .cfg-int360.is-fullscreen::before { --studio-veu: 140px; height: 220px; }
    .cfg-int360.is-fullscreen .cfg-int360-top { top: 40px; left: 48px; right: 160px; }
    .cfg-int360.is-fullscreen .cfg-int360-title { font-size: 28px; }
    .cfg-int360.is-fullscreen .cfg-int360-title > span { margin-top: 6px; font-size: 18px; }
    .cfg-int360.is-fullscreen .cfg-int360-note { margin-top: 12px; font-size: 12px; }
    body > .is-stage-full { --studio-full-x: 48px; --studio-full-y: 32px; }
}
@media (prefers-reduced-motion: reduce) {
    .cfg-studio::before, .cfg-studio-logo,
    .cfg-int360, .cfg-stage-hint, .cfg-int360-btn, .cfg-int360-retry, .cfg-view-switch button, .cfg-scene-retry,
    .cfg-stage-guide, body > .is-stage-full.is-scaled > .cfg-studio { transition: none; }
    .cfg-view-switch .is-busy::after { display: none; }
}