/* ========== FONTES ========== */


/* ========== BASE (standalone) ========== */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: #000;
    font-family: sans-serif;
    overscroll-behavior: none;
    touch-action: none;
}

.tela {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.btn {
    position: absolute;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
}

.btn img { width: 100%; height: 100%; display: block; }

/* ========== TELA MAQUETE DIGITAL ========== */
/* ========== FONTES ========== */
@font-face {
    font-family: 'Futura PT';
    src: url('font-text/futura-pt/FuturaCyrillicMedium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

/* Peso "Book" - usado nos textos da maquete digital (é o peso do Figma) */
@font-face {
    font-family: 'Futura PT';
    src: url('font-text/futura-pt/FuturaCyrillicBook.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

/* ========== TELA MAQUETE DIGITAL ========== */
.maquete-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #000;
    cursor: grab;
}

.maquete-container:active {
    cursor: grabbing;
}

#maquete-frame-display {
    width: 100%;
    height: 100%;
    object-fit: fill;
    transition: transform 0.1s ease-out;
    -webkit-user-drag: none;
    user-select: none;
}

/* DUAS camadas empilhadas, não uma: ao trocar de destaque a camada que entra
   sobe enquanto a que sai desce, então a troca no mesmo frame é crossfade.
   Mesma geometria do frame (fill/100%) para os desenhos ficarem alinhados. */
.maquete-overlay-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    transition: opacity 300ms ease-out, transform 0.1s ease-out;
    -webkit-user-drag: none;
    user-select: none;
    opacity: 0;
    pointer-events: none;
}

.maquete-overlay-layer.visible {
    opacity: 1;
}

/* Loading */
.maquete-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: opacity 0.4s ease;
}

.maquete-loading.hidden {
    opacity: 0;
    pointer-events: none;
}

.maquete-loading-bar-container {
    width: 20vw;
    height: 0.37vh;
    background: #333;
    border-radius: 0.19vh;
    overflow: hidden;
}

.maquete-loading-bar {
    height: 100%;
    background: #cedc00;
    width: 0%;
    transition: width 0.1s;
}

.maquete-loading-percent {
    color: #fff;
    font-size: 1.15vw;
    margin-top: 1.5vh;
}

/* Card Dúvida - fica encostado na borda esquerda, revela ao tocar/passar o mouse */
.maquete-duvida {
    position: absolute;
    top: 5.74vh;
    left: -27.56vw;
    width: 31.12vw;
    height: 26.57vh;
    z-index: 3;
    cursor: pointer;
    transition: left 0.35s ease;
}

.maquete-duvida:hover,
.maquete-duvida.active {
    left: -2.5vw;
}

/* Mosca da unidade em destaque - canto inferior esquerdo.
   Mesmo tamanho da tela de unidades (arte 408x300). Aparece e some junto com o
   desenho do apartamento, no mesmo tempo de fade dos overlays (300ms). */
.maquete-mosca {
    position: absolute;
    left: 2vw;
    bottom: 2vh;
    width: 14vw;
    height: 18.33vh;
    object-fit: contain;
    z-index: 3;
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease-out;
}

.maquete-mosca.visible { opacity: 1; }

.maquete-elemento-inferior {
    position: absolute;
    top: 97.87vh;
    left: 65.57vw;
    width: 34.27vw;
    height: 3.33vh;
    z-index: 2;
    pointer-events: none;
}

/* ---------- Barra de insolação (2ª animação / "chain") ----------
   Geometria do Figma (base 1920x1080): x=321 y=949 1278x92, raio 18.
   Só aparece enquanto uma insolação está ativa (o motor põe .visible). */
#maquete-chain-wrap {
    position: absolute;
    z-index: 4;
    display: none;
    align-items: center;
    left: 16.72vw;
    top: 87.87vh;
    width: 66.56vw;
    height: 8.52vh;
    background: rgba(217, 217, 217, 0.85);
    border-radius: 0.94vw;
    box-shadow: 0.31vw 0.37vh 0.27vw rgba(0, 0, 0, 0.25);
    pointer-events: none; /* rótulos/ícones são decorativos; o slider reativa */
}

#maquete-chain-wrap.visible { display: flex; }

/* Ícones do nascer/pôr do sol - 50x40.66 e 50x41.14 no Figma */
.maquete-chain-icon {
    position: absolute;
    width: 2.60vw;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.maquete-chain-icon-ini { left: 3.07vw; top: 2.22vh; height: 3.76vh; }

.maquete-chain-icon-fim { left: 60.94vw; top: 2.04vh; height: 3.81vh; }

.maquete-chain-label {
    position: absolute;
    top: 2.13vh;
    height: 4.44vh;
    display: flex;
    align-items: center;
    font-family: 'Futura PT', sans-serif;
    font-weight: 400;
    font-size: 1.25vw;
    color: #292926;
    white-space: nowrap;
    pointer-events: none;
}

.maquete-chain-label-ini { left: 6.30vw; }

.maquete-chain-label-fim { left: 55.10vw; width: 5.21vw; justify-content: flex-end; }

/* Trilho: 690x6 no Figma (x=638 dentro da barra), marcador 36x36.
   O padding vertical cresce só a ÁREA DE TOQUE, sem mexer no desenho. */
#maquete-chain-slider {
    position: absolute;
    left: 16.51vw;
    top: 50%;
    width: 35.94vw;
    height: 3.33vh;
    transform: translateY(-50%);
    margin: 0;
    padding: 0;
    cursor: pointer;
    pointer-events: auto;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    box-sizing: content-box;
    touch-action: manipulation;
}

/* Preenchido (#e4ec28) até o ponto atual, resto #aaa. --chain-progress (0..1)
   é atualizado pelo JS a cada frame da insolação. O gradiente é recuado em
   meio marcador para o CENTRO dele percorrer o trilho de ponta a ponta. */
#maquete-chain-slider::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    height: 0.56vh;
    border-radius: 0.52vw;
    background: linear-gradient(to right,
        #e4ec28 0,
        #e4ec28 calc(0.94vw + var(--chain-progress, 0) * (100% - 1.88vw)),
        #aaaaaa calc(0.94vw + var(--chain-progress, 0) * (100% - 1.88vw)),
        #aaaaaa 100%);
}

#maquete-chain-slider::-moz-range-track {
    height: 0.56vh;
    border-radius: 0.52vw;
    background: linear-gradient(to right,
        #e4ec28 0,
        #e4ec28 calc(0.94vw + var(--chain-progress, 0) * (100% - 1.88vw)),
        #aaaaaa calc(0.94vw + var(--chain-progress, 0) * (100% - 1.88vw)),
        #aaaaaa 100%);
}

#maquete-chain-slider::-moz-range-progress { background: transparent; }

/* Marcador: círculo amarelo de 36px do Figma */
#maquete-chain-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1.88vw;
    height: 3.33vh;
    background: #e4ec28;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    box-shadow: 0 0.19vh 0.21vw rgba(0, 0, 0, 0.25);
    margin-top: calc((0.56vh - 3.33vh) / 2);
}

#maquete-chain-slider::-moz-range-thumb {
    width: 1.88vw;
    height: 3.33vh;
    background: #e4ec28;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    box-shadow: 0 0.19vh 0.21vw rgba(0, 0, 0, 0.25);
}

/* ---------- Menu lateral da maquete ---------- */
/* Arte 340x61 (1x), encostada na borda direita - o corte diagonal é do PNG */
.maquete-btn-menu {
    right: 0;
    width: 17.71vw;
    height: 5.65vh;
    z-index: 4;
}

.maquete-btn-apartamentos { top: 21.30vh; }

.maquete-btn-insolacao { top: 28.89vh; }

.maquete-btn-menu .maquete-btn-on { display: none; }

.maquete-btn-menu.aberto .maquete-btn-off { display: none; }

.maquete-btn-menu.aberto .maquete-btn-on { display: block; }

/* ---------- Popups da maquete ---------- */
.maquete-popup {
    position: absolute;
    background: rgba(217, 217, 217, 0.85);
    border-radius: 0.94vw;
    box-shadow: 0.31vw 0.37vh 0.27vw rgba(0, 0, 0, 0.25);
    font-family: 'Futura PT', sans-serif;
    font-weight: 400;
    color: #131313;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 4;
}

.maquete-popup.active {
    opacity: 1;
    pointer-events: auto;
}

/* Popup APARTAMENTOS: x=1414 y=408 451x600 */
.maquete-popup-apartamentos {
    left: 73.65vw;
    top: 37.78vh;
    width: 23.49vw;
    height: 55.56vh;
}

/* Popup INSOLAÇÃO (lado): x=1580 y=405 311x139 */
.maquete-popup-insolacao {
    left: 82.29vw;
    top: 37.50vh;
    width: 16.20vw;
    height: 12.87vh;
}

/* Alternador FRONTAL / POSTERIOR - 186x52 no popup de apartamentos */
.maq-lado {
    top: 2.31vh;
    width: 9.69vw;
    height: 4.81vh;
    background: transparent;
    font-family: inherit;
    font-weight: 400;
    font-size: 1.25vw;
    color: #131313;
    transition: background 0.2s ease;
}

.maq-lado-frontal { left: 1.67vw; }

.maq-lado-posterior { left: 12.19vw; }

.maq-lado.ativo { background: #e4ec28; }

.maq-titulo {
    position: absolute;
    left: 1.67vw;
    top: 11.02vh;
    width: 20.21vw;
    height: 2.59vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25vw;
}

/* Rótulos dos grupos - 19px no Figma */
.maq-grupo {
    position: absolute;
    left: 1.67vw;
    width: 9.48vw;
    height: 2.22vh;
    display: flex;
    align-items: center;
    font-size: 0.99vw;
}

.maq-grupo-1 { top: 15.37vh; }

.maq-grupo-2 { top: 30.09vh; }

.maq-grupo-3 { top: 40.19vh; }

/* Linhas de tipologia - 388x42, raio 5, borda #aaa */
.maq-tipo {
    left: 1.67vw;
    width: 20.21vw;
    height: 3.89vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.89vw 0 1.04vw;
    background: #ededed;
    border: 1px solid #aaaaaa;
    border-radius: 0.26vw;
    font-family: inherit;
    font-weight: 400;
    font-size: 1.25vw;
    color: #131313;
    transition: background 0.2s ease;
}

.maq-tipo.ativo { background: #e4ec28; }

.maq-tipo-1 { top: 18.43vh; }

.maq-tipo-2 { top: 23.06vh; }

.maq-tipo-3 { top: 33.15vh; }

.maq-tipo-4 { top: 43.24vh; }

.maq-tipo-5 { top: 47.87vh; }

/* O "v" girado -90° vira o chevron ">" do Figma */
.maq-seta {
    display: inline-block;
    transform: rotate(-90deg);
    line-height: 1;
}

/* Botões FRONTAL / POSTERIOR do popup de insolação - 212x42.5 */
.maq-sol {
    left: 2.60vw;
    width: 11.04vw;
    height: 3.93vh;
    background: transparent;
    font-family: inherit;
    font-weight: 400;
    font-size: 1.25vw;
    color: #131313;
    transition: background 0.2s ease;
}

.maq-sol-frontal { top: 1.57vh; }

.maq-sol-posterior { top: 7.48vh; }

.maq-sol.ativo { background: #e4ec28; }

@media (any-pointer: coarse) {
    #maquete-chain-slider { padding: 1vh 0; }
}