/* =========================================================
   BASE GERAL
   Regras compartilhadas por todas as telas do app.
   Referencia Figma: 1920x1080 landscape.
   ========================================================= */

:root {
    --base-width: 1920;
    --base-height: 1080;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    touch-action: manipulation;
    user-select: none;
}

img,
button {
    -webkit-user-drag: none;
}

button {
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

/* =========================================================
   #tela-descanso
   Tela inicial com fundo, logo central e botao "toque para iniciar".
   ========================================================= */

.descanso-bg {
    left: -0.1042vw;
    width: 100.1563vw;
    height: 100.0926vh;
}

.descanso-logo {
    position: absolute;
    left: 21.7188vw;
    top: 18.4259vh;
    width: 56.601vw;
    height: 42.7778vh;
    object-fit: fill;
    pointer-events: none;
}

.descanso-start {
    position: absolute;
    left: 36.6406vw;
    top: 71.0648vh;
    width: 26.7188vw;
    height: 11.3426vh;
    display: block;
}

.descanso-start img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
}

/* =========================================================
   #tela-menu
   Menu principal com imagem da mulher, marca, frase e botoes laterais.
   ========================================================= */

.menu-bg {
    position: absolute;
    inset: 0;
    background: #eee8dd;
}

.menu-retangulo {
    position: absolute;
    left: 0;
    top: 0;
    width: 58.3854vw;
    height: 100vh;
    object-fit: fill;
    pointer-events: none;
}

.menu-line,
.menu-mulher,
.menu-logo,
.menu-frase {
    position: absolute;
    pointer-events: none;
}

.menu-line-top-left {
    left: 0;
    top: 0;
    width: 20.1042vw;
    height: 18.1481vh;
}

.menu-line-top-right {
    right: 0;
    top: 0;
    width: 24.8958vw;
    height: 7.3148vh;
}

.menu-line-bottom-right {
    right: 0;
    bottom: 0;
    width: 45.1042vw;
    height: 8.3333vh;
}

.menu-mulher {
    left: 3.9583vw;
    top: 5.463vh;
    width: 67.3177vw;
    height: 95.0463vh;
    object-fit: fill;
}

.menu-logo {
    left: 12.9167vw;
    top: 36.3889vh;
    width: 46.25vw;
    height: 27.1296vh;
    object-fit: fill;
}

.menu-frase {
    left: 10.1042vw;
    top: 68.6111vh;
    width: 51.5885vw;
    height: 5.5556vh;
    object-fit: fill;
}

/* Botoes do menu principal: Projeto, Localizacao, Galeria, Filme, Institucional. */
.menu-nav {
    position: absolute;
    left: 72.6563vw;
    top: 23.3333vh;
    width: 23.6979vw;
    height: 58.5417vh;
}

.menu-btn {
    position: absolute;
    left: 0;
    width: 23.6979vw;
    height: 8.3796vh;
    display: block;
}

.menu-btn img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
}

.menu-btn-projeto {
    top: 0;
}

.menu-btn-localizacao {
    top: 12.5416vh;
}

.menu-btn-galeria {
    top: 25.0832vh;
}

.menu-btn-filme {
    top: 37.6249vh;
}

.menu-btn-institucional {
    top: 50.1665vh;
}

/* =========================================================
   #tela-projeto-implantacao
   Tela de projeto na aba Implantacao.
   Contem estados: Cobertura, 2o Pavimento e Terreo.
   ========================================================= */

/* Fundo, moldura branca, linhas decorativas e elementos comuns da tela. */
.implantacao-bg {
    position: absolute;
    inset: 0;
    background: #eee8dd;
}

.implantacao-retangulo,
.implantacao-line-top-left,
.implantacao-line-bottom-right,
.implantacao-painel,
.implantacao-titulo,
.implantacao-bolotario,
.implantacao-planta,
.implantacao-pin,
.implantacao-mao,
.implantacao-lupa {
    position: absolute;
    pointer-events: none;
}

.implantacao-retangulo {
    left: 42.3438vw;
    top: -4.8148vh;
    width: 43.2292vw;
    height: 117.2222vh;
    object-fit: fill;
}

.implantacao-line-top-left {
    left: 0;
    top: 0;
    width: 26.0417vw;
    height: 25.9259vh;
}

.implantacao-line-bottom-right {
    right: 0;
    bottom: 0;
    width: 51.1979vw;
    height: 4.1667vh;
}

.implantacao-painel {
    left: 3.2292vw;
    top: 5.3704vh;
    width: 93.4896vw;
    height: 91.3426vh;
    object-fit: fill;
    z-index: 1;
}

/* Estado Cobertura: titulo, bolotario, planta e pins 01-04. */
.implantacao-titulo {
    left: 0;
    top: 10.0926vh;
    width: 24.2708vw;
    height: 8.0556vh;
    object-fit: fill;
    z-index: 5;
}

.implantacao-bolotario {
    left: 9.375vw;
    top: 24.8148vh;
    width: 12.7083vw;
    height: 32.3145vh;
    object-fit: fill;
    z-index: 5;
}

.implantacao-planta {
    left: 25vw;
    top: 12.4074vh;
    width: 63.2813vw;
    height: 82.6852vh;
    object-fit: fill;
    z-index: 3;
}

.implantacao-pin {
    position: absolute;
    width: 2.5521vw;
    height: 4.4444vh;
    z-index: 4;
    pointer-events: auto;
}

.implantacao-pin img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
}

.implantacao-pin-01 {
    left: 43.75vw;
    top: 44.1667vh;
}

.implantacao-pin-02 {
    left: 56.6667vw;
    top: 42.6852vh;
    width: 2.6823vw;
    height: 4.6759vh;
}

.implantacao-pin-03 {
    left: 56.6667vw;
    top: 56.2037vh;
}

.implantacao-pin-04 {
    left: 51.1458vw;
    top: 53.7963vh;
}

.implantacao-pin-17 {
    left: 61.5625vw;
    top: 55.463vh;
}

/* Maos estaticas das implantacoes ficam ocultas (o tutorial as substitui). */
.implantacao-mao {
    left: 44.6354vw;
    top: 44.9074vh;
    width: 3.75vw;
    height: 6.8519vh;
    z-index: 5;
    display: none;
}

/* Mao-tutorial: escondida por padrao; so aparece durante o tutorial.
   transform-origin na ponta do dedo (para o "toque" pressionar ali). */
.implantacao-mao-tutorial {
    position: absolute;
    width: 3.75vw;
    height: 6.8519vh;
    z-index: 8;
    pointer-events: none;
    object-fit: fill;
    opacity: 0;
    transform-origin: 40% 8%;
}

.implantacao-lupa {
    position: absolute;
    left: 28.1771vw;
    top: 65.2778vh;
    width: 8.2813vw;
    height: 8.4259vh;
    z-index: 2;
    pointer-events: auto;
}

.implantacao-lupa img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
}

/* Controle de estados da implantacao: apenas o pavimento ativo fica visivel. */
.implantacao-floor:not(.floor-active) {
    display: none !important;
}

/* Estado 2o Pavimento: substitui titulo, bolotario, planta, mao e pins 05-13. */
.implantacao-titulo-2pavimento {
    left: -4.1667vw;
    top: 10.0926vh;
    width: 33.75vw;
    height: 8.0556vh;
}

.implantacao-bolotario-2pavimento {
    left: 9.375vw;
    top: 24.8148vh;
    width: 18.4896vw;
    height: 58.8889vh;
}

.implantacao-planta-2pavimento {
    left: 25.8854vw;
    top: 12.7778vh;
    width: 62.9167vw;
    height: 81.9444vh;
}

.implantacao-mao-2pavimento {
    left: 37.6042vw;
    top: 39.4444vh;
}

.implantacao-pin-05 {
    left: 36.6667vw;
    top: 38.6111vh;
}

.implantacao-pin-06 {
    left: 43.8021vw;
    top: 40.2778vh;
}

.implantacao-pin-07 {
    left: 51.1458vw;
    top: 43.9815vh;
}

.implantacao-pin-08 {
    left: 58.4375vw;
    top: 43.5185vh;
}

.implantacao-pin-09 {
    left: 55.4688vw;
    top: 52.1296vh;
}

.implantacao-pin-10 {
    left: 48.9063vw;
    top: 51.6667vh;
}

.implantacao-pin-11 {
    left: 46.5104vw;
    top: 60.3704vh;
}

.implantacao-pin-12 {
    left: 42.5vw;
    top: 57.1296vh;
}

.implantacao-pin-13 {
    left: 36.6667vw;
    top: 58.4259vh;
}

.implantacao-pin-18 {
    left: 52.0833vw;
    top: 53.8889vh;
}

.implantacao-titulo-terreo {
    left: -4.1667vw;
    top: 10.0926vh;
    width: 29.5833vw;
    height: 8.0556vh;
}

.implantacao-bolotario-terreo {
    left: 9.375vw;
    top: 24.8148vh;
    width: 18.4896vw;
    height: 15.463vh;
}

.implantacao-planta-terreo {
    left: 25.7813vw;
    top: 12.8704vh;
    width: 63.0208vw;
    height: 82.037vh;
}

.implantacao-pin-14 {
    left: 57.2917vw;
    top: 50.5556vh;
}

.implantacao-pin-15 {
    left: 68.6458vw;
    top: 52.2222vh;
}

.implantacao-pin-16 {
    left: 46.0417vw;
    top: 48.9815vh;
}

/* Cards abertos ao clicar nos pins da implantacao. */
.implantacao-pin-cards {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 8; /* acima do menu (6) -> o popup e a lupa ficam clicaveis sobre os botoes */
}

.implantacao-pin-card {
    position: absolute;
    display: none;
    pointer-events: none;
}

.implantacao-pin-card.active {
    display: block;
}

.implantacao-pin-card > img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
    pointer-events: none;
}

.implantacao-pin-card-01 {
    left: 43.0208vw;
    top: 42.6852vh;
    width: 33.8021vw;
    height: 44.537vh;
}

.implantacao-pin-card-02 {
    left: 55.9896vw;
    top: 41.2963vh;
    width: 33.8021vw;
    height: 44.537vh;
}

.implantacao-pin-card-03 {
    left: 55.9896vw;
    top: 54.8148vh;
    width: 31.8229vw;
    height: 41.9293vh;
}

.implantacao-pin-card-04 {
    left: 50.4688vw;
    top: 52.4074vh;
    width: 33.8021vw;
    height: 44.537vh;
}

.pin-card-zoom {
    position: absolute;
    width: 1.2527vw;
    height: 2.227vh;
    z-index: 2;
    pointer-events: auto;
}

.pin-card-zoom img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
}

.pin-card-zoom-01 {
    right: 0.9896vw;
    top: 1.8519vh;
}

.pin-card-zoom-02 {
    right: 0.9896vw;
    top: 1.8519vh;
}

.pin-card-zoom-03 {
    right: 0.9366vw;
    top: 1.7434vh;
    width: 1.1794vw;
    height: 2.0966vh;
}

.pin-card-zoom-04 {
    right: 0.9896vw;
    top: 1.8519vh;
}

.implantacao-pin-card-05 {
    left: 35.9896vw;
    top: 37.2222vh;
    width: 33.8021vw;
    height: 44.537vh;
}

.implantacao-pin-card-06 {
    left: 43.125vw;
    top: 38.8889vh;
    width: 33.8021vw;
    height: 44.537vh;
}

.implantacao-pin-card-07 {
    left: 50.5208vw;
    top: 42.5vh;
    width: 33.8021vw;
    height: 44.537vh;
}

.implantacao-pin-card-08 {
    left: 57.7604vw;
    top: 42.1296vh;
    width: 33.8021vw;
    height: 44.537vh;
}

.implantacao-pin-card-09 {
    left: 54.7917vw;
    top: 50.7407vh;
    width: 33.8021vw;
    height: 44.537vh;
}

.implantacao-pin-card-11 {
    left: 45.8854vw;
    top: 58.9815vh;
    width: 25.8854vw;
    height: 34.1062vh;
}

.implantacao-pin-card-12 {
    left: 41.8229vw;
    top: 55.7407vh;
    width: 25.8854vw;
    height: 34.1062vh;
}

.implantacao-pin-card-13 {
    left: 35.9896vw;
    top: 57.1296vh;
    width: 25.8854vw;
    height: 34.1062vh;
}

.implantacao-pin-card-15 {
    left: 67.9688vw;
    top: 50.8333vh;
    width: 25.8854vw;
    height: 34.1062vh;
}

.pin-card-zoom-05,
.pin-card-zoom-06,
.pin-card-zoom-07,
.pin-card-zoom-08,
.pin-card-zoom-09 {
    right: 0.9896vw;
    top: 1.8519vh;
}

.pin-card-zoom-11,
.pin-card-zoom-12,
.pin-card-zoom-13,
.pin-card-zoom-15 {
    right: 0.7776vw;
    top: 1.418vh;
    width: 0.9593vw;
    height: 1.7055vh;
}

/* Menu lateral da tela de projeto: Implantacao, Unidades, Comparativo. */
.implantacao-menu {
    position: absolute;
    left: 80.9375vw;
    top: 18.1481vh;
    width: 20.5917vw;
    height: 49.213vh;
    z-index: 6;
}

.implantacao-menu-btn {
    position: absolute;
    display: block;
}

.implantacao-menu-btn img,
.implantacao-close img,
.implantacao-seta img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
}

.implantacao-menu-implantacao {
    left: 0;
    top: 0;
    width: 19.9219vw;
    height: 12.4537vh;
}

.implantacao-menu-pavimentos {
    left: 4.1146vw;
    top: 12.3148vh;
    width: 15.8073vw;
    height: 12.3611vh;
}

.implantacao-menu-unidades {
    left: 3.6458vw;
    top: 24.537vh;
    width: 16.276vw;
    height: 12.3611vh;
}

.implantacao-menu-comparativo {
    left: 3.6458vw;
    top: 36.7593vh;
    width: 16.276vw;
    height: 12.4537vh;
}

.implantacao-close {
    position: absolute;
    right: 1.875vw;
    top: 3.1481vh;
    width: 1.3542vw;
    height: 2.5926vh;
    z-index: 7;
}

/* Setas inferiores para alternar Cobertura -> 2o Pavimento -> Terreo. */
.implantacao-seta {
    position: absolute;
    width: 4.8438vw;
    height: 8.6111vh;
    z-index: 6;
}

.implantacao-seta-esquerda {
    left: 83.3333vw;
    top: 82.3148vh;
}

.implantacao-seta-direita {
    left: 88.9063vw;
    top: 82.3148vh;
}

/* =========================================================
   ZOOM / POPUP
   Overlay reutilizado na Implantacao e em Unidades.
   data-zoom-type define tamanho e posicao da imagem ampliada.
   ========================================================= */

.zoom-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: none;
    background: rgba(0, 0, 0, 0.58);
}

.zoom-overlay.active {
    display: block;
}

.zoom-overlay-img {
    position: absolute;
    object-fit: fill;
    pointer-events: none;
}

.zoom-overlay[data-zoom-type="planta"] .zoom-overlay-img {
    left: 12.9167vw;
    top: 1.5741vh;
    width: 75.9896vw;
    height: 98.0556vh;
}

/* Zoom dos pavimentos: planta em tela cheia. */
.zoom-overlay[data-zoom-type="pavimento"] .zoom-overlay-img {
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
}

.zoom-overlay[data-zoom-type="pin"] .zoom-overlay-img {
    left: 16.1979vw;
    top: 7.4074vh;
    width: 67.6042vw;
    height: 89.0741vh;
}

.zoom-overlay[data-zoom-type="unidade"] .zoom-overlay-img {
    left: 29.6354vw;
    top: 2.7778vh;
    width: 43.9063vw;
    height: 89.0741vh;
    object-fit: contain; /* preserva a proporcao (nao achata plantas de aspecto diferente) */
}

/* Ajuste pontual do zoom da planta 38,50 (landscape 2006x1536): caixa mais larga
   p/ ela encostar na altura como as outras. AJUSTE AQUI os 4 valores se precisar. */
.zoom-overlay[data-zoom-type="unidade"][data-zoom-id="3850"] .zoom-overlay-img {
    left: 17vw;
    top: 2.7778vh;
    width: 66vw;
    height: 89.0741vh;
}

.zoom-overlay-close {
    position: absolute;
    left: 48.1771vw;
    bottom: 0vh;
    width: 4.9219vw;
    height: 7.4074vh;
    background: transparent;
    border: 0;
    z-index: 2;
}

.zoom-overlay-close img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
}

.zoom-overlay[data-zoom-type="unidade"] .zoom-overlay-close {
    left: 48.1771vw;
    bottom: 0vh;
    width: 4.9219vw;
    height: 7.4074vh;
}

/* =========================================================
   #tela-projeto-pavimento
   Tela de projeto na aba Pavimentos: 3 estados (3ao14, 15ao19,
   21ao29) navegaveis pelas setas; lupa amplia a planta em tela cheia.
   ========================================================= */

.pavimento-bg {
    position: absolute;
    inset: 0;
    background: #eee8dd;
}

.pavimento-retangulo,
.pavimento-line-top-left,
.pavimento-line-bottom-right,
.pavimento-painel,
.pavimento-titulo,
.pavimento-planta {
    position: absolute;
    pointer-events: none;
    object-fit: fill;
}

.pavimento-retangulo {
    left: 42.3438vw;
    top: -4.8148vh;
    width: 43.2292vw;
    height: 117.2222vh;
}

.pavimento-line-top-left {
    left: 0;
    top: 0;
    width: 26.0417vw;
    height: 25.9259vh;
}

.pavimento-line-bottom-right {
    right: 0;
    bottom: 0;
    width: 51.1979vw;
    height: 4.1667vh;
}

.pavimento-painel {
    left: 3.2292vw;
    top: 5.3704vh;
    width: 93.4896vw;
    height: 91.3426vh;
    z-index: 1;
}

/* Controle de estados: apenas o pavimento ativo fica visivel. */
.pavimento-item:not(.pav-active) {
    display: none !important;
}

.pavimento-titulo {
    left: 0;
    height: 8.0556vh;
    z-index: 5;
}

.pavimento-titulo-3ao14 {
    top: 10.2778vh;
    width: 41.1979vw;
}

.pavimento-titulo-15ao19,
.pavimento-titulo-21ao29 {
    top: 10.0926vh;
    width: 43.0729vw;
}

.pavimento-planta {
    z-index: 3;
}

.pavimento-planta-3ao14 {
    left: 8.1771vw;
    top: 18.9815vh;
    width: 72.3057vw;
    height: 73.1444vh;
}

.pavimento-planta-15ao19 {
    left: 7.6042vw;
    top: 19.6296vh;
    width: 73.1771vw;
    height: 72.5926vh;
}

.pavimento-planta-21ao29 {
    left: 7.2917vw;
    top: 18.8889vh;
    width: 73.8021vw;
    height: 73.9815vh;
}

.pavimento-lupa {
    position: absolute;
    left: 65.6771vw;
    top: 65.9259vh;
    width: 16.9792vw;
    height: 8.4259vh;
    z-index: 2;
    pointer-events: auto;
}

.pavimento-lupa img,
.pavimento-menu-btn img,
.pavimento-close img,
.pavimento-seta img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
}

.pavimento-menu {
    position: absolute;
    left: 80.9375vw;
    top: 18.1481vh;
    width: 20.5917vw;
    height: 49.213vh;
    z-index: 6;
}

.pavimento-menu-btn {
    position: absolute;
    display: block;
}

.pavimento-menu-implantacao {
    left: 3.6458vw;
    top: 0;
    width: 16.276vw;
    height: 12.3611vh;
}

.pavimento-menu-pavimentos {
    left: -0.6771vw;
    top: 12.3148vh;
    width: 20.599vw;
    height: 12.4537vh;
}

.pavimento-menu-unidades {
    left: 3.6458vw;
    top: 24.537vh;
    width: 16.276vw;
    height: 12.3611vh;
}

.pavimento-menu-comparativo {
    left: 3.6458vw;
    top: 36.7593vh;
    width: 16.276vw;
    height: 12.4537vh;
}

.pavimento-close {
    position: absolute;
    right: 1.875vw;
    top: 3.1481vh;
    width: 1.3542vw;
    height: 2.5926vh;
    z-index: 7;
}

.pavimento-seta {
    position: absolute;
    width: 4.8438vw;
    height: 8.6111vh;
    z-index: 6;
}

.pavimento-seta-esquerda {
    left: 83.3333vw;
    top: 82.3148vh;
}

.pavimento-seta-direita {
    left: 88.9063vw;
    top: 82.3148vh;
}

/* =========================================================
   #tela-projeto-unidades
   Tela de projeto na aba Unidades.
   Estado atual: unidade 27,50 m2.
   ========================================================= */

/* Fundo, retangulo lateral, linhas decorativas e painel branco. */
.unidades-bg {
    position: absolute;
    inset: 0;
    background: #eee8dd;
}

.unidades-retangulo,
.unidades-line-top-right,
.unidades-line-bottom-left,
.unidades-painel,
.unidades-titulo,
.unidades-desc,
.unidades-planta,
.unidades-mao {
    position: absolute;
    pointer-events: none;
}

.unidades-retangulo {
    left: 58.6979vw;
    top: -1.6667vh;
    width: 41.3021vw;
    height: 117.2222vh;
    object-fit: fill;
}

.unidades-line-top-right {
    right: 0;
    top: 0;
    width: 21.5625vw;
    height: 13.6111vh;
}

.unidades-line-bottom-left {
    left: 0;
    bottom: 0;
    width: 26.5104vw;
    height: 14.2593vh;
}

.unidades-painel {
    left: 4.7917vw;
    top: 7.037vh;
    width: 90.4688vw;
    height: 86.0185vh;
    object-fit: fill;
}

/* Conteudo da unidade 27,50 m2: titulo, descricao e planta. */
.unidades-titulo {
    left: 0vw;
    top: 10.0926vh;
    width: 31.0417vw;
    height: 11.2963vh;
    object-fit: fill;
}

.unidades-desc {
    left: 12.5vw;
    top: 23.4259vh;
    width: 17.6042vw;
    height: 3.2407vh;
    object-fit: fill;
}

.unidades-planta {
    left: 35vw;
    top: 9.9074vh;
    width: 37.5313vw;
    height: 78.0926vh;
    object-fit: fill;
    z-index: 2;
}

/* Lupa da planta da unidade e mao indicativa. */
.unidades-lupa {
    position: absolute;
    left: 69.1667vw;
    top: 69.6296vh;
    width: 8.2813vw;
    height: 8.4259vh;
    z-index: 1;
}

.unidades-lupa img,
.unidades-menu-btn img,
.unidades-close img,
.unidades-seta img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
}

.unidades-mao {
    left: 75.1042vw;
    top: 71.5741vh;
    width: 3.75vw;
    height: 6.8519vh;
    z-index: 4;
    display: none;
}

/* Ajuste fino - Unidade 27,50 m2.
   Mexa nesses valores para alterar somente a primeira unidade. */
.unidades-titulo-2750 {
    left: 0vw;
    top: 10.0926vh;
    width: 32.0417vw;
    height: 11.2963vh;
}

.unidades-desc-2750 {
    left: 13.5vw;
    top: 23.4259vh;
    width: 17.6042vw;
    height: 3.2407vh;
}

.unidades-planta-2750 {
    left: 35vw;
    top: 9.9074vh;
    width: 37.5313vw;
    height: 78.0926vh;
}

.unidades-lupa-2750 {
    left: 69.1667vw;
    top: 69.6296vh;
    width: 8.2813vw;
    height: 8.4259vh;
}

.unidades-mao-2750 {
    left: 75.1042vw;
    top: 71.5741vh;
    width: 3.75vw;
    height: 6.8519vh;
}

/* Estados do carrossel de unidades: 27,50 -> 30 -> 38,50 -> 47. */
.unidade-item:not(.unidade-active) {
    display: none !important;
}




.unidades-titulo-3850 {
    left: -0.5vw;
    top: 10.0926vh;
    width: 31.0417vw;
    height: 11.2963vh;
}

.unidades-titulo-47 {
    left: -3.5vw;
    top: 10.0926vh;
    width: 32.9167vw;
    height: 11.2963vh;
}

.unidades-desc-30{
    left: 12.5vw;
}
.unidades-desc-3850 {
    left: 12vw;
    top: 22.1296vh;
    width: 17.6042vw;
    height: 3.2407vh;
}

.unidades-desc-47 {
    left: 10.5vw;
    top: 22.1296vh;
    width: 18.9323vw;
    height: 3.2407vh;
}

.unidades-planta-30 {
    left: 27.9896vw;
    top: 10.0926vh;
    width: 39.9792vw;
    height: 78.0926vh;
}

.unidades-planta-3850 {
    left: 23.5vw;
    top: 17.1481vh;
    width: 50.2396vw;
    height: 69.1111vh;
}

.unidades-planta-47 {
    left: 31.9792vw;
    top: 11.6667vh;
    width: 38.8333vw;
    height: 74.5185vh;
}

.unidades-lupa-30 {
    left: 65.5208vw;
    top: 69.7222vh;
}

.unidades-lupa-3850 {
    left: 70.6563vw;
    top: 69.7222vh;
}

.unidades-lupa-47 {
    left: 67.5vw;
    top: 70.6481vh;
}

/* Menu lateral de Unidades. */
.unidades-menu {
    position: absolute;
    left: 80.9375vw;
    top: 18.1481vh;
    width: 20.5917vw;
    height: 49.213vh;
    z-index: 5;
}

.unidades-menu-btn {
    position: absolute;
    display: block;
}

.unidades-menu-implantacao {
    left: 3.6458vw;
    top: 0;
    width: 16.276vw;
    height: 12.3611vh;
}

.unidades-menu-pavimentos {
    left: 4.1146vw;
    top: 12.3148vh;
    width: 15.8073vw;
    height: 12.3611vh;
}

.unidades-menu-unidades {
    left: 0;
    top: 24.537vh;
    width: 19.9219vw;
    height: 12.4537vh;
}

.unidades-menu-comparativo {
    left: 3.6458vw;
    top: 36.7593vh;
    width: 16.276vw;
    height: 12.4537vh;
}

.unidades-close {
    position: absolute;
    right: 1.875vw;
    top: 3.1481vh;
    width: 1.3542vw;
    height: 2.5926vh;
    z-index: 7;
}

/* X de fechar da tela Unidades em branco (o terracota sumia com o fundo). */
.unidades-close img {
    filter: brightness(0) invert(1);
}

/* Setas inferiores da tela Unidades. */
.unidades-seta {
    position: absolute;
    width: 4vw;
    height: 7vh;
    z-index: 6;
}

.unidades-seta-esquerda {
    left: 83.3333vw;
    top: 80vh;
}

.unidades-seta-direita {
    left: 87.9063vw;
    top: 80vh;
}

/* =========================================================
   #tela-projeto-comparativo
   Tela de projeto na aba Comparativo.
   Estado inicial: painel branco com menu inferior de miniaturas.
   ========================================================= */

.comparativo-bg {
    position: absolute;
    inset: 0;
    background: #eee8dd;
}

.comparativo-retangulo,
.comparativo-line-top-right,
.comparativo-line-bottom-right,
.comparativo-painel,
.comparativo-mini-base {
    position: absolute;
    pointer-events: none;
}

.comparativo-retangulo {
    left: 9.6875vw;
    top: -5.463vh;
    width: 43.2292vw;
    height: 117.2222vh;
    object-fit: fill;
}

.comparativo-line-top-right {
    right: 0;
    top: 0;
    width: 21.5625vw;
    height: 13.6111vh;
}

.comparativo-line-bottom-right {
    right: 0;
    bottom: 0;
    width: 12.6563vw;
    height: 18.6111vh;
}

.comparativo-painel {
    left: 4.7917vw;
    top: 7.037vh;
    width: 90.4688vw;
    height: 86.0185vh;
    object-fit: fill;
}

.comparativo-duvida {
    position: absolute;
    left: -28vw;
    top: 25.0926vh;
    width: 31.1213vw;
    height: 10.5556vh;
    z-index: 5;
    cursor: pointer;
    transition: left 0.85s cubic-bezier(0.16, 0.84, 0.28, 1);
}

/* Gaveta de ajuda aberta: desliza para a direita ate -3vw (so o "?" some da borda). */
.comparativo-duvida.aberto {
    left: -3vw;
}

.comparativo-duvida img,
.comparativo-menu-btn img,
.comparativo-close img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
}

/* Menu inferior de miniaturas das plantas. */
.comparativo-miniaturas {
    position: absolute;
    left: 20vw;
    top: 78.7037vh;
    width: 60.0521vw;
    height: 26.5741vh;
}

.comparativo-mini-base {
    left: 0;
    top: 0;
    width: 60.0521vw;
    height: 21.2963vh;
    object-fit: fill;
}

.comparativo-mini-2750 {
    left: 7.8125vw;
    top: 4.4444vh;
    width: 6.9271vw;
    height: 13.9815vh;
}

.comparativo-mini-30 {
    left: 18.6979vw;
    top: 2.963vh;
    width: 8.0729vw;
    height: 15.463vh;
}

.comparativo-mini-3850 {
    left: 30.7292vw;
    top: 5.9259vh;
    width: 9.1667vw;
    height: 12.5vh;
}

.comparativo-mini-47 {
    left: 43.8542vw;
    top: 2.3148vh;
    width: 8.3854vw;
    height: 16.1111vh;
}

/* Containers de comparacao: 2 slots lado a lado sobre o painel branco.
   Sao apenas ANCORAS -> a planta (img) entra no seu TAMANHO EXATO (Figma),
   alinhada pela base e centralizada na largura do slot.
   AJUSTE MANUAL:
     - left  -> posicao horizontal do slot (centro do slot = left + width/2)
     - top + height -> base comum das plantas (base = top + height)
     - width -> so define o CENTRO do slot; NAO estica a planta. */
.comparativo-container {
    position: absolute;
    top: 10vh;
    height: 64vh;     /* base das plantas = 12 + 64 = 76vh */
    width: 36vw;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
}

.comparativo-container-1 {
    left: 4vw;
}

.comparativo-container-2 {
    left: 42vw;
}

.comparativo-container-img {
    /* width/height definidos por planta via JS (tamanho exato do Figma) */
    display: block;
    object-fit: fill;
    transform-origin: center bottom;
    opacity: 0;
    visibility: hidden;
    transform: translateY(2.2vh) scale(0.965);
    filter: drop-shadow(0.3vw 0.7vh 0.4vw rgba(0, 0, 0, 0.22));
    transition: opacity 0.5s ease, transform 0.62s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.5s;
}

/* Entrada: sobe suave e assenta na base. */
.comparativo-container-img.has-image {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition: opacity 0.5s ease, transform 0.62s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
    pointer-events: auto; /* clicar na planta grande remove ela do slot */
    cursor: pointer;
}

/* Saida: some com fade + leve descida (nada de corte seco). */
.comparativo-container-img.is-clearing,
.comparativo-container-img.is-clearing.has-image {
    opacity: 0;
    visibility: visible;
    transform: translateY(1.6vh) scale(0.975);
    transition: opacity 0.4s ease, transform 0.44s cubic-bezier(0.4, 0, 0.6, 1);
}

/* Tamanho exato de cada planta (Figma). O JS adiciona a classe comp-<id>.
   Ajuste o tamanho de cada uma individualmente aqui. */
.comparativo-container-img.comp-2750 { width: 25.4688vw; height: 56.2963vh; }
.comparativo-container-img.comp-30   { width: 29.8438vw; height: 61.4815vh; }
.comparativo-container-img.comp-47   { width: 30.8854vw; height: 63.9815vh; }

/* ---- Planta 3850: ajuste fino PONTUAL (nao afeta as outras) ----
   width/height = tamanho da planta;
   margin-left:   + move p/ DIREITA  | - p/ ESQUERDA
   margin-bottom: + SOBE             | - DESCE */
.comparativo-container-img.comp-3850 {
    width: 33.8542vw;
    height: 50.5556vh;
    margin-left: 5vw;
    margin-bottom: 0vh;
}

.comparativo-container-img.comp-47{
    margin-left: 3vw;
}

/* Miniaturas clicaveis: selecionar destaca, as outras esmaecem. */
.comparativo-mini {
    position: absolute;
    pointer-events: auto;
    cursor: pointer;
    transition: opacity 0.28s ease, transform 0.28s ease, filter 0.28s ease;
}

.comparativo-mini.comparativo-selecionada {
    opacity: 1;
    transform: translateY(-0.6vh) scale(1.05);
    filter: drop-shadow(0 0.55vh 0.4vw rgba(0, 0, 0, 0.28));
}

.comparativo-mini.comparativo-nao-selecionada {
    opacity: 0.4;
    transform: translateY(0) scale(0.97);
}

/* Mao-tutorial: escondida por padrao; posicionada sobre a 1a miniatura.
   transform-origin na ponta do dedo (para o "toque" pressionar ali). */
.comparativo-mao-tutorial {
    position: absolute;
    left: 30.07vw;
    top: 84.16vh;
    width: 3.0208vw;
    height: 5.463vh;
    z-index: 8;
    pointer-events: none;
    object-fit: fill;
    opacity: 0;
    transform-origin: 40% 8%;
}

/* Menu lateral do Comparativo. */
.comparativo-menu {
    position: absolute;
    left: 80.9375vw;
    top: 18.1481vh;
    width: 20.5917vw;
    height: 49.213vh;
    z-index: 5;
}

.comparativo-menu-btn {
    position: absolute;
    display: block;
}

.comparativo-menu-implantacao {
    left: 3.6458vw;
    top: 0;
    width: 16.276vw;
    height: 12.3611vh;
}

.comparativo-menu-pavimentos {
    left: 4.1146vw;
    top: 12.3148vh;
    width: 15.8073vw;
    height: 12.3611vh;
}

.comparativo-menu-unidades {
    left: 3.6458vw;
    top: 24.537vh;
    width: 16.276vw;
    height: 12.4537vh;
}

.comparativo-menu-comparativo {
    left: 0;
    top: 36.7593vh;
    width: 19.9219vw;
    height: 12.4537vh;
}

.comparativo-close {
    position: absolute;
    right: 1.875vw;
    top: 3.1481vh;
    width: 1.3542vw;
    height: 2.5926vh;
    z-index: 7;
}

/* =========================================================
   #tela-localizacao-mapa
   Tela de Localizacao na aba Mapa.
   Contem mapa, endereco, menu Mapa/Convivencias e pins ON/OFF clicaveis.
   ========================================================= */

.localizacao-bg {
    position: absolute;
    inset: 0;
    background: #eee8dd;
}

.localizacao-retangulo,
.localizacao-line-top-left,
.localizacao-line-bottom-right,
.localizacao-painel,
.localizacao-titulo,
.localizacao-pin-logo {
    position: absolute;
    pointer-events: none;
}

.localizacao-retangulo {
    left: 42.3438vw;
    top: -4.8148vh;
    width: 43.2292vw;
    height: 117.2222vh;
    object-fit: fill;
}

.localizacao-line-top-left {
    left: 0;
    top: 0;
    width: 26.0417vw;
    height: 25.9259vh;
    object-fit: fill;
}

.localizacao-line-bottom-right {
    right: 0;
    bottom: 0;
    width: 51.1979vw;
    height: 4.1667vh;
    object-fit: fill;
}

.localizacao-painel {
    left: 4.7396vw;
    top: 7.963vh;
    width: 90.4688vw;
    height: 86.0185vh;
    object-fit: fill;
    z-index: 1;
}

/* Container do mapa interativo do Google (mesma area do antigo painel). */
.localizacao-mapa-google {
    position: absolute;
    left: 4.7396vw;
    top: 7.963vh;
    width: 90.4688vw;
    height: 86.0185vh;
    z-index: 1;
    background: #eee8dd;
}

/* Numero de identificacao em cada pin durante a calibracao (usa data-mapa-pin). */
.mapa-calibrando .localizacao-pin::after {
    content: attr(data-mapa-pin);
    position: absolute;
    left: 50%;
    top: -1.8vh;
    transform: translateX(-50%);
    background: #201a12;
    color: #c9a86a;
    font-family: monospace;
    font-size: 1vw;
    font-weight: 700;
    padding: 0.1vh 0.5vw;
    border-radius: 0.3vw;
    pointer-events: none;
    white-space: nowrap;
    z-index: 6;
}

/* Painel de calibracao (so aparece no modo de ajuste). */
.mapa-calibra {
    position: absolute;
    left: 6vw;
    top: 20vh;
    width: 22vw;
    max-height: 62vh;
    overflow-y: auto;
    z-index: 30;
    background: rgba(20, 16, 12, 0.92);
    color: #f4efe6;
    border-radius: 0.8vw;
    padding: 1vw 1.1vw;
    font-family: monospace;
    font-size: 0.82vw;
    line-height: 1.5;
    box-shadow: 0 0.4vh 1.6vh rgba(0, 0, 0, 0.4);
}

.mapa-calibra h4 {
    font-size: 0.95vw;
    margin-bottom: 0.6vh;
    letter-spacing: 0.03vw;
}

.mapa-calibra .mapa-calibra-linha {
    white-space: nowrap;
}

.mapa-calibra button {
    margin-top: 0.8vh;
    width: 100%;
    padding: 0.7vh 0.5vw;
    border: none;
    border-radius: 0.4vw;
    background: #c9a86a;
    color: #201a12;
    font-family: inherit;
    font-size: 0.85vw;
    font-weight: 700;
    cursor: pointer;
}

.mapa-calibra button:active {
    transform: scale(0.98);
}

.localizacao-titulo {
    left: -2.8125vw;
    top: 10.3704vh;
    width: 57.1875vw;
    height: 11.6667vh;
    object-fit: fill;
    z-index: 4;
}

.localizacao-pin-logo {
    left: 44.0625vw;
    top: 32.5vh;
    width: 9.7396vw;
    height: 22.037vh;
    object-fit: fill;
    z-index: 4;
}

/* Pins do mapa: o OFF fica posicionado dentro da area total do asset ON. */
.localizacao-pin {
    position: absolute;
    display: block;
    z-index: 5;
    width: 5.1648vw;
    height: 6.0081vh;
    overflow: visible;
}

.localizacao-pin-on,
.localizacao-pin-off {
    position: absolute;
    object-fit: fill;
    display: block;
    pointer-events: none;
}

.localizacao-pin-on {
    display: none;
}

.localizacao-pin-off {
    left: 0;
    top: -1.722vh;
    width: 5.1648vw;
    height: 9.4556vh;
}

.localizacao-pin.active .localizacao-pin-on {
    display: block;
}

.localizacao-pin.active .localizacao-pin-off {
    display: none;
}

.localizacao-pin-01 {
    left: 62.7332vw;
    top: 46.8623vh;
}

.localizacao-pin-02 {
    left: 27vw;
    top: 47.5474vh;
}

.localizacao-pin-03 {
    left: 33.5665vw;
    top: 29.8252vh;
}

.localizacao-pin-04 {
    left: 15.0873vw;
    top: 66.7141vh;
}

.localizacao-pin-05 {
    left: 60.129vw;
    top: 82.10299vh;
}

.localizacao-pin-06 {
    left: 70.8582vw;
    top: 67.1585vh;
}

.localizacao-pin-07 {
    left: 38.7748vw;
    top: 69.2697vh;
}

.localizacao-pin-08 {
    left: 63.1498vw;
    top: 19.1771vh;
}

.localizacao-pin-01 .localizacao-pin-on {
    left: -4.3998vw;
    top: -3.8993vh;
    width: 13.8371vw;
    height: 9.9074vh;
}

.localizacao-pin-02 .localizacao-pin-on {
    left: -6.7957vw;
    top: -3.8993vh;
    width: 18.732vw;
    height: 9.9074vh;
}

.localizacao-pin-03 .localizacao-pin-on {
    left: -3.5665vw;
    top: -3.8993vh;
    width: 12.2746vw;
    height: 9.9074vh;
}

.localizacao-pin-04 .localizacao-pin-on {
    left: -3.8269vw;
    top: -3.8993vh;
    width: 12.8125vw;
    height: 9.9074vh;
}

.localizacao-pin-05 .localizacao-pin-on {
    left: -5.5457vw;
    top: -3.8993vh;
    width: 16.25vw;
    height: 9.9074vh;
}

.localizacao-pin-06 .localizacao-pin-on {
    left: -7.7332vw;
    top: -3.8993vh;
    width: 20.625vw;
    height: 9.9074vh;
}

.localizacao-pin-07 .localizacao-pin-on,
.localizacao-pin-08 .localizacao-pin-on {
    left: -4.6602vw;
    top: -3.8993vh;
    width: 14.4792vw;
    height: 9.9074vh;
}

/* Menu lateral da Localizacao: Mapa selecionado e Convivencias. */
.localizacao-menu {
    position: absolute;
    left: 80.9375vw;
    top: 18.1481vh;
    width: 20.5917vw;
    height: 20.037vh;
    z-index: 6;
}

.localizacao-menu-btn {
    position: absolute;
    display: block;
}

.localizacao-menu-btn img,
.localizacao-close img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
}

.localizacao-menu-mapa {
    left: 0;
    top: 0;
    width: 19.9219vw;
    height: 12.4537vh;
}

.localizacao-menu-convivencias {
    left: 3.6458vw;
    top: 12.3148vh;
    width: 16.276vw;
    height: 12.3611vh;
}

.localizacao-close {
    position: absolute;
    right: 1.875vw;
    top: 3.1481vh;
    width: 1.3542vw;
    height: 2.5926vh;
    z-index: 7;
}

/* =========================================================
   #tela-localizacao-convivencias
   Tela de Localizacao na aba Convivencias.
   Faixa "O seu espaco no mundo.", menu Mapa/Convivencias e
   filtros por categoria (Lazer/Cultura, Saude, Ensino,
   Supermercados, Servicos). Estado estatico: filtros em OFF.
   ========================================================= */

.convivencias-bg {
    position: absolute;
    inset: 0;
    background: #eee8dd;
}

.convivencias-line-left,
.convivencias-painel,
.convivencias-retangulo,
.convivencias-faixa,
.convivencias-desc,
.convivencias-mao {
    position: absolute;
    pointer-events: none;
}

/* Linha decorativa que emoldura o canto esquerdo (fica atras do painel). */
.convivencias-line-left {
    left: -10.5729vw;
    top: 3.4259vh;
    width: 26.0417vw;
    height: 93.7037vh;
    object-fit: fill;
    z-index: 1;
}

/* Painel branco principal. */
.convivencias-painel {
    left: 4.7396vw;
    top: 7.963vh;
    width: 93.4635vw;
    height: 91.3426vh;
    object-fit: fill;
    z-index: 2;
}

/* Faixa lateral laranja (direita) que recebe o menu (fica atras do painel branco). */
.convivencias-retangulo {
    right: 0;
    top: 0;
    width: 23.2292vw;
    height: 100vh;
    object-fit: fill;
    z-index: 1;
}

/* Faixa laranja com a frase principal. */
.convivencias-faixa {
    left: -1.9792vw;
    top: 26.2037vh;
    width: 77.8385vw;
    height: 29.0741vh;
    object-fit: fill;
    z-index: 4;
}

.convivencias-desc {
    left: 3.8542vw;
    top: 36.5046vh;
    width: 37.6042vw;
    height: 5.4167vh;
    object-fit: fill;
    z-index: 5;
}

/* Carrossel de cards de lugares: ancorado pela direita -> o ultimo card fica
   sempre no mesmo lugar, independente da quantidade de cards da categoria.
   Cards excedentes transbordam para a esquerda e sao cortados pela tela. */
#convivencias-carrossel {
    position: absolute;
    right: 28.3333vw;
    top: 12.1296vh;
    height: 58.3796vh;
    display: flex;
    align-items: flex-start;
    gap: 1.3021vw;
    z-index: 5;
    pointer-events: none;
}

.convivencias-card {
    flex-shrink: 0;
    height: 100%;
    width: auto;
    display: block;
}

/* Seta "Proximo": avanca/rotaciona o carrossel de lugares. */
.convivencias-proximo {
    position: absolute;
    left: 74.0667vw;
    top: 37vh;
    width: 2.5vw;
    height: 5.0926vh;
    z-index: 5;
    pointer-events: auto;
    cursor: pointer;
}

.convivencias-proximo img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
}

/* Mao-tutorial: escondida por padrao; so aparece durante o tutorial.
   transform-origin na ponta do dedo (para o "toque" pressionar ali). */
.convivencias-mao {
    left: 74.1979vw;
    top: 38.8889vh;
    width: 4.375vw;
    height: 7.963vh;
    object-fit: fill;
    z-index: 6;
    opacity: 0;
    transform-origin: 40% 8%;
}

/* Botoes de filtro por categoria (3 em cima, 2 embaixo). */
.convivencias-filtro {
    position: absolute;
    display: block;
    z-index: 4;
}

.convivencias-filtro {
    cursor: pointer;
}

/* OFF e ON tem alturas diferentes -> contain preserva a proporcao nos 2 estados. */
.convivencias-filtro img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.convivencias-filtro-cultura {
    left: 17.9167vw;
    top: 74.9074vh;
    width: 21.5365vw;
    height: 9.7222vh;
}

.convivencias-filtro-saude {
    left: 40vw;
    top: 74.9074vh;
    width: 21.5365vw;
    height: 9.1204vh;
}

.convivencias-filtro-ensino {
    left: 62.0313vw;
    top: 74.9074vh;
    width: 21.5365vw;
    height: 9.1204vh;
}

.convivencias-filtro-supermercados {
    left: 28.1771vw;
    top: 84.4444vh;
    width: 21.5365vw;
    height: 9.1204vh;
}

.convivencias-filtro-servicos {
    left: 51.8229vw;
    top: 84.4444vh;
    width: 21.5365vw;
    height: 9.1204vh;
}

/* Menu lateral: Mapa e Convivencias (selecionado). */
.convivencias-menu {
    position: absolute;
    left: 80.9375vw;
    top: 18.1481vh;
    width: 20.5917vw;
    height: 25vh;
    z-index: 6;
}

.convivencias-menu-btn {
    position: absolute;
    display: block;
}

.convivencias-menu-btn img,
.convivencias-close img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
}

.convivencias-menu-mapa {
    left: 3.6458vw;
    top: 0;
    width: 16.276vw;
    height: 12.3611vh;
}

.convivencias-menu-convivencias {
    left: 0;
    top: 12.2222vh;
    width: 19.9219vw;
    height: 12.4537vh;
}

.convivencias-close {
    position: absolute;
    right: 1.875vw;
    top: 3.1481vh;
    width: 1.3542vw;
    height: 2.5926vh;
    z-index: 7;
}

/* X branco para contrastar com o fundo laranja. */
.convivencias-close img {
    filter: brightness(0) invert(1);
}

/* =========================================================
   #tela-galeria
   Visualizador de fotos: foto atual recortada no container,
   card de titulo (texto vivo) + pavimento, setas prev/next,
   X e lupa (zoom em tamanho original).
   ========================================================= */

.galeria-bg {
    position: absolute;
    inset: 0;
    background: #eee8dd;
}

.galeria-retangulo,
.galeria-line-top-left,
.galeria-line-bottom-right {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    object-fit: fill;
}

/* Retangulo laranja de fundo (aparece acima/abaixo da foto). */
.galeria-retangulo {
    left: 42.3438vw;
    top: 0;
    width: 43.2292vw;
    height: 100vh;
}

.galeria-line-top-left {
    left: 0;
    top: 0;
    width: 28.4896vw;
    height: 25.9259vh;
}

.galeria-line-bottom-right {
    right: 0;
    bottom: 0;
    width: 51.1979vw;
    height: 4.1667vh;
}

/* Container/foto: 1737x929 em (91,86). Recorta a imagem (cover). */
.galeria-foto,
.galeria-foto-anterior {
    position: absolute;
    left: 4.7396vw;
    top: 7.963vh;
    width: 90.4688vw;
    height: 86.0185vh;
    object-fit: cover;
    border-radius: 1.0417vw;
    z-index: 2;
    pointer-events: none;
}

/* Camada do crossfade: fica sobre a foto nova e some (opacity controlada em animations.css). */
.galeria-foto-anterior {
    z-index: 3;
    opacity: 0;
}

/* Card de titulo com texto vivo. */
.galeria-titulo-card {
    position: absolute;
    left: -1.875vw;
    top: 5.7407vh;
    width: 26.0417vw;
    height: 12.4074vh;
    z-index: 6;
    pointer-events: none;
    font-family: 'Segoe UI', Arial, sans-serif;
    color: #fff;
}

.galeria-titulo-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.galeria-titulo,
.galeria-pavimento {
    position: absolute;
    left: 7.5521vw;
    white-space: nowrap;
    line-height: 1;
}

.galeria-titulo {
    top: 1.4815vh;
    font-size: 2.3958vw;
    font-weight: 700;
}

.galeria-pavimento {
    top: 6.7593vh;
    font-size: 1.5625vw;
    font-weight: 400;
}

/* Lupa: abre o zoom da imagem original. Fica atras da foto (z-index baixo);
   a foto tem pointer-events:none, entao a lupa continua clicavel. */
.galeria-lupa {
    position: absolute;
    left: 91.7188vw;
    top: 72.1296vh;
    width: 8.2813vw;
    height: 8.4259vh;
    z-index: 1;
    cursor: pointer;
}

.galeria-lupa img,
.galeria-seta img,
.galeria-close img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
}

/* Setas prev/next. */
.galeria-seta {
    position: absolute;
    top: 82.3148vh;
    width: 4.8438vw;
    height: 8.6111vh;
    z-index: 6;
    cursor: pointer;
}

.galeria-seta-esquerda {
    left: 83.3854vw;
}

.galeria-seta-direita {
    left: 88.4896vw;
}

.galeria-close {
    position: absolute;
    right: 1.875vw;
    top: 3.1481vh;
    width: 1.3542vw;
    height: 2.5926vh;
    z-index: 7;
    cursor: pointer;
}

/* Zoom da galeria: imagem inteira (qualquer proporcao) ajustada a tela
   sem distorcer (contain centraliza e mantem o aspecto original). */
.zoom-overlay[data-zoom-type="galeria"] .zoom-overlay-img {
    left: 2vw;
    top: 2vh;
    width: 96vw;
    height: 96vh;
    object-fit: contain;
}

/* =========================================================
   #tela-filme
   Player do video institucional. Poster (1o frame) + botao Play
   central com mao. Ao clicar: toca com controles. Ao sair/terminar:
   reseta e reexibe o overlay.
   ========================================================= */

.filme-bg {
    position: absolute;
    inset: 0;
    background: #eee8dd;
}

.filme-retangulo,
.filme-line-top-right,
.filme-line-bottom-left {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    object-fit: fill;
}

.filme-retangulo {
    right: 0;
    top: 0;
    width: 41.3021vw;
    height: 100vh;
}

.filme-line-top-right {
    right: 0;
    top: 0;
    width: 21.5625vw;
    height: 13.6111vh;
}

.filme-line-bottom-left {
    left: 0;
    bottom: 0;
    width: 26.5104vw;
    height: 14.2593vh;
}

/* Container do video (recorta a borda arredondada). */
#filme-container {
    position: absolute;
    left: 4.7917vw;
    top: 7.037vh;
    width: 90.4688vw;
    height: 86.0185vh;
    overflow: hidden;
    border-radius: 1.0417vw;
    z-index: 2;
}

.filme-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #000;
}

/* Em tela cheia o painel do video ocupa a tela toda, sem cantos arredondados. */
#filme-container:fullscreen {
    border-radius: 0;
    background: #000;
}

#filme-container:-webkit-full-screen {
    border-radius: 0;
    background: #000;
}

#filme-container:fullscreen .filme-video {
    object-fit: contain;
}

#filme-container:-webkit-full-screen .filme-video {
    object-fit: contain;
}

/* Overlay clicavel com o botao de play: retangulo escuro ~60% sobre o
   container inteiro. Some ao iniciar o video (.filme-oculto). */
.filme-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    cursor: pointer;
}

.filme-overlay.filme-oculto {
    display: none;
}

/* Depois que o video ja comecou, o overlay de pausa mostra so o Play
   (sem a dica da mao). */
.filme-overlay.filme-comecou .filme-mao {
    display: none;
}

.filme-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 3.4375vw;
    height: 6.1111vh;
}

.filme-mao {
    position: absolute;
    left: calc(50% + 1.71875vw);
    top: calc(50% + 3.1481vh);
    transform: translate(-50%, -50%);
    width: 3.75vw;
    height: 6.8519vh;
    pointer-events: none;
}

/* Play central: aparece so quando pausado no meio (video ja iniciado). */
.filme-center-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 3.4375vw;
    height: 6.1111vh;
    z-index: 3;
    cursor: pointer;
    display: none;
    filter: drop-shadow(0 0.4vh 1vh rgba(0, 0, 0, 0.5));
}

#filme-container.is-started:not(.is-playing) .filme-center-play {
    display: block;
}

/* Barra de controle (aparece apos iniciar o video). */
.filme-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 9vh;
    display: flex;
    align-items: center;
    gap: 1.1vw;
    padding: 0 2vw;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
    z-index: 4;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

#filme-container.is-started .filme-controls {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s;
}

/* Auto-esconder: some enquanto o video toca e nao ha interacao. */
#filme-container.is-started.controles-ocultos .filme-controls {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

/* Botao play/pause desenhado em CSS. */
.filme-ctrl-toggle {
    position: relative;
    flex: 0 0 auto;
    width: 2.4vw;
    height: 4.4vh;
    cursor: pointer;
}

/* PLAY (triangulo) quando pausado. */
.filme-ctrl-toggle::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-35%, -50%);
    width: 0;
    height: 0;
    border-top: 1.05vh solid transparent;
    border-bottom: 1.05vh solid transparent;
    border-left: 1.5vh solid #fff;
    border-right: 0;
}

/* PAUSE (duas barras) quando tocando. */
#filme-container.is-playing .filme-ctrl-toggle::before {
    transform: translate(-50%, -50%);
    width: 0.5vw;
    height: 2.1vh;
    border-top: 0;
    border-bottom: 0;
    border-left: 0.35vw solid #fff;
    border-right: 0.35vw solid #fff;
}

.filme-tempo {
    flex: 0 0 auto;
    min-width: 3vw;
    color: #fff;
    font-size: 1.05vw;
    font-variant-numeric: tabular-nums;
    text-align: center;
    text-shadow: 0 0.1vh 0.3vh rgba(0, 0, 0, 0.5);
}

/* Trilha de progresso arrastavel. */
.filme-barra {
    position: relative;
    flex: 1 1 auto;
    height: 0.65vh;
    min-height: 5px;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 1vh;
    cursor: pointer;
    touch-action: none;
}

.filme-barra-preenchida {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: #fff;
    border-radius: 1vh;
    pointer-events: none;
}

.filme-barra-thumb {
    position: absolute;
    left: 0%;
    top: 50%;
    width: 1.7vh;
    height: 1.7vh;
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%);
    box-shadow: 0 0.2vh 0.5vh rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

/* Botao de mudo (icone SVG). */
.filme-ctrl-mute {
    flex: 0 0 auto;
    width: 2.2vw;
    height: 4vh;
    cursor: pointer;
}

.filme-mute-icon {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 0.1vh 0.3vh rgba(0, 0, 0, 0.5));
}

/* Estado mudo: esconde as ondas e mostra o risco. */
.filme-mute-slash {
    display: none;
}

#filme-container.is-muted .filme-mute-waves {
    display: none;
}

#filme-container.is-muted .filme-mute-slash {
    display: block;
}

/* Slider de volume (mesmo padrao da barra de progresso, menor). */
.filme-volume {
    position: relative;
    flex: 0 0 auto;
    width: 7vw;
    height: 0.65vh;
    min-height: 5px;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 1vh;
    cursor: pointer;
    touch-action: none;
}

.filme-volume-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: #fff;
    border-radius: 1vh;
    pointer-events: none;
}

.filme-volume-thumb {
    position: absolute;
    left: 100%;
    top: 50%;
    width: 1.5vh;
    height: 1.5vh;
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%);
    box-shadow: 0 0.2vh 0.5vh rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

.filme-close {
    position: absolute;
    right: 1.875vw;
    top: 3.1481vh;
    width: 1.3542vw;
    height: 2.5926vh;
    z-index: 7;
    cursor: pointer;
}

.filme-close img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
    /* Deixa o X branco para contrastar com o fundo laranja. */
    filter: brightness(0) invert(1);
}

/* =========================================================
   #tela-institucional
   Painel branco com logo, coluna de texto (overline +
   titulo + paragrafo) e 3 itens de estatistica (icone +
   numero + descricao). Tela estatica.
   ========================================================= */

.inst-bg {
    position: absolute;
    inset: 0;
    background: #eee8dd;
}

.inst-retangulo,
.inst-painel,
.inst-line-top-right,
.inst-line-bottom-left,
.inst-logo,
.inst-titulo,
.inst-desc {
    position: absolute;
    pointer-events: none;
    object-fit: fill;
}

/* Retangulo laranja de fundo (direita, atras do painel). */
.inst-retangulo {
    right: 0;
    top: 0;
    width: 41.3021vw;
    height: 100vh;
    z-index: 1;
}

/* Painel branco principal. */
.inst-painel {
    left: 4.7917vw;
    top: 6.3889vh;
    width: 93.4635vw;
    height: 91.3426vh;
    z-index: 2;
}

/* Linhas decorativas (sobre o painel). */
.inst-line-top-right {
    right: 0;
    top: 0;
    width: 31.25vw;
    height: 16.4815vh;
    z-index: 3;
}

.inst-line-bottom-left {
    left: 0;
    bottom: 0;
    width: 26.5104vw;
    height: 14.2593vh;
    z-index: 3;
}

/* Banner laranja com o logo ENGECASTRO. */
.inst-logo {
    left: -3.9063vw;
    top: 10.5556vh;
    width: 36.0417vw;
    height: 11.7593vh;
    z-index: 4;
}

/* Overline "INSTITUCIONAL" (texto vivo - asset nao fornecido). */
.inst-overline {
    position: absolute;
    left: 8.9063vw;
    top: 25.0926vh;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 1.1458vw;
    font-weight: 600;
    letter-spacing: 0.32em;
    color: #b85c3f;
    z-index: 4;
    pointer-events: none;
}

.inst-overline-traco {
    position: absolute;
    left: 8.9063vw;
    top: 29.8148vh;
    width: 6.3021vw;
    height: 0.1852vh;
    background: #b85c3f;
    z-index: 4;
    pointer-events: none;
}

/* Titulo "Sobre a Engecastro". */
.inst-titulo {
    left: 8.9063vw;
    top: 33.3333vh;
    width: 38.8281vw;
    height: 6.7593vh;
    z-index: 4;
}

/* Paragrafo. */
.inst-desc {
    left: 8.9063vw;
    top: 47.037vh;
    width: 40.3125vw;
    height: 29.6792vh;
    z-index: 4;
}

/* Itens de estatistica. */
.inst-item-icone,
.inst-item-titulo,
.inst-item-desc {
    position: absolute;
    pointer-events: none;
    object-fit: fill;
    z-index: 4;
}

/* Icones (coluna esquerda dos itens). */
.inst-item-icone {
    left: 52.3958vw;
    width: 7.2135vw;
    height: 12.8241vh;
}

.inst-item-1 .inst-item-icone {
    top: 31.3889vh;
}

.inst-item-2 .inst-item-icone {
    top: 50.463vh;
    width: 7.2396vw;
    height: 12.8704vh;
}

.inst-item-3 .inst-item-icone {
    top: 69.2593vh;
}

/* Numeros / titulos dos itens. */
.inst-item-titulo {
    left: 62.7083vw;
    width: 8.6979vw;
    height: 4.3519vh;
}

.inst-item-titulo-zona {
    width: 26.4844vw;
}

.inst-item-1 .inst-item-titulo {
    top: 31.3889vh;
}

.inst-item-2 .inst-item-titulo {
    top: 50.0926vh;
    width: 8.6719vw;
}

.inst-item-3 .inst-item-titulo {
    top: 69.7222vh;
}

/* Descricoes dos itens. */
.inst-item-desc {
    left: 62.7083vw;
    height: 3.0093vh;
}

.inst-item-1 .inst-item-desc {
    top: 39.0741vh;
    width: 16.3281vw;
}

.inst-item-2 .inst-item-desc {
    top: 57.7778vh;
    width: 23.1771vw;
    height: 3.0556vh;
}

.inst-item-3 .inst-item-desc {
    top: 77.4074vh;
    width: 22.0573vw;
    height: 3.1944vh;
}

/* Botao fechar (X branco sobre o fundo laranja). */
.inst-close {
    position: absolute;
    right: 1.875vw;
    top: 3.1481vh;
    width: 1.3542vw;
    height: 2.5926vh;
    z-index: 7;
    cursor: pointer;
}

.inst-close img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
    filter: brightness(0) invert(1);
}