/* ==========================================================
   SKY'S HOME - DESCIDA DO PRÉDIO (styles/home/building.css)
   Efeito de crossfade sticky com 3 estágios das imagens 1.jpg, 2.jpg e 3.jpg
   Base: 1rem = 10px (definido em reset.css)
   ========================================================== */

/* 1. Container Geral com trilha de scroll estendida */

/* 1. Container Geral com trilha de scroll estendida */

/* 1. Container Geral com trilha de scroll estendida e Variáveis Dinâmicas de Tema */

.building-scroll {
    --theme-bg: #FAFAF9;
    --theme-accent-gradient: linear-gradient(135deg, #FF6600, #FF007F);
    --theme-accent-color: #FF6600;
    --theme-glow: rgba(255, 102, 0, 0.45);
    --theme-tag-bg: rgba(18, 22, 31, 0.03);
    --theme-tag-border: rgba(18, 22, 31, 0.1);

    /* Variáveis dos Cards de Estágio - Padrão / Neutro (Fundo Claro #FAFAF9) */
    --step-accent: #12161f;
    --step-divider: rgba(18, 22, 31, 0.15);
    --step-divider-active: #12161f;
    --step-card-bg: transparent;
    --step-card-border: transparent;
    --step-card-glow: transparent;
    --step-card-inset: transparent;
    --step-p-active: rgba(18, 22, 31, 0.85);
    --step-arrow-glow: transparent;
    --title-accent-color: #12161f;
    --title-accent-gradient: none;
    --nav-height-desktop: 7.2rem;

    position: relative;
    z-index: 1;
    width: 100%;
    height: 950vh;
    /* Trilha estendida para garantir tempo amplo de contemplação de todos os estágios, especialmente o último prédio */
    background-color: var(--theme-bg);
    border-bottom: none;
    transition: background-color 0.8s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.8s ease;
}

/* TEMA 1: Zenith Sky Lounge (1.1.png) -> Tons Roxo Aveludado, Magenta e Vinho Ruby */

.building-scroll.theme-zenith {
    --theme-bg: #100615;
    /* Ameixa/ametista escuro aveludado e profundo */
    --theme-accent-gradient: linear-gradient(135deg, #FF007F 0%, #D81159 50%, #7928CA 100%);
    --theme-accent-color: #FF2A85;
    --theme-glow: rgba(255, 42, 133, 0.65);
    --theme-tag-bg: rgba(255, 42, 133, 0.12);
    --theme-tag-border: rgba(255, 42, 133, 0.35);
    border-bottom-color: rgba(255, 255, 255, 0.08);

    /* Variáveis dos Cards Estilo Zenith (Referência: Magenta / Pink Neon) */
    --step-accent: #FF2A85;
    --step-divider: rgba(255, 42, 133, 0.3);
    --step-divider-active: rgba(255, 42, 133, 0.85);
    --step-card-bg: rgba(24, 8, 30, 0.65);
    --step-card-border: rgba(255, 42, 133, 0.45);
    --step-card-glow: rgba(255, 42, 133, 0.4);
    --step-card-inset: rgba(255, 42, 133, 0.08);
    --step-p-active: rgba(255, 235, 248, 0.88);
    --step-arrow-glow: rgba(255, 42, 133, 0.65);
    --title-accent-color: #FF2A85;
    --title-accent-gradient: linear-gradient(135deg, #FF6EB4 0%, #FF2A85 55%, #D81159 100%);
}

/* TEMA 2: Sky Restô (2.2.png) -> Espresso Tostado, Terracota Quente e Verde Oliva */

.building-scroll.theme-resto {
    --theme-bg: #120b08;
    /* Espresso bronze escuro e acolhedor de alta gastronomia */
    --theme-accent-gradient: linear-gradient(135deg, #FF7A3D 0%, #C85A32 50%, #D4A373 100%);
    --theme-accent-color: #FF7A3D;
    --theme-glow: rgba(255, 122, 61, 0.65);
    --theme-tag-bg: rgba(255, 122, 61, 0.12);
    --theme-tag-border: rgba(255, 122, 61, 0.35);
    border-bottom-color: rgba(255, 255, 255, 0.08);

    /* Variáveis dos Cards Estilo Restô (Terracota / Âmbar Quente) */
    --step-accent: #FF7A3D;
    --step-divider: rgba(255, 122, 61, 0.3);
    --step-divider-active: rgba(255, 122, 61, 0.85);
    --step-card-bg: rgba(28, 14, 8, 0.65);
    --step-card-border: rgba(255, 122, 61, 0.45);
    --step-card-glow: rgba(255, 122, 61, 0.4);
    --step-card-inset: rgba(255, 122, 61, 0.08);
    --step-p-active: rgba(255, 240, 230, 0.88);
    --step-arrow-glow: rgba(255, 122, 61, 0.65);
    --title-accent-color: #FF7A3D;
    --title-accent-gradient: linear-gradient(135deg, #FFB088 0%, #FF7A3D 55%, #C85A32 100%);
}

/* TEMA 3: Skybar (3.3.png) -> Atmosfera Noturna / Midnight Blue com Foco de Luzes */

.building-scroll.theme-skybar {
    --theme-bg: #070c18;
    /* Azul meia-noite profundo extraído da referência */
    --theme-accent-gradient: linear-gradient(135deg, #00D2FF 0%, #0099FF 50%, #0066FF 100%);
    --theme-accent-color: #00D2FF;
    --theme-glow: rgba(0, 210, 255, 0.65);
    --theme-tag-bg: rgba(0, 210, 255, 0.12);
    --theme-tag-border: rgba(0, 210, 255, 0.35);
    border-bottom-color: rgba(255, 255, 255, 0.08);

    /* Variáveis dos Cards Estilo Skybar (Ciano Elétrico / Cobalto) */
    --step-accent: #00D2FF;
    --step-divider: rgba(0, 210, 255, 0.3);
    --step-divider-active: rgba(0, 210, 255, 0.85);
    --step-card-bg: rgba(10, 20, 38, 0.65);
    --step-card-border: rgba(0, 210, 255, 0.45);
    --step-card-glow: rgba(0, 210, 255, 0.4);
    --step-card-inset: rgba(0, 210, 255, 0.08);
    --step-p-active: rgba(230, 242, 255, 0.88);
    --step-arrow-glow: rgba(0, 210, 255, 0.65);
    --title-accent-color: #00D2FF;
    --title-accent-gradient: linear-gradient(135deg, #70E1FF 0%, #00D2FF 55%, #0088FF 100%);
}

/* 2. Container Fixo/Sticky preso na tela durante a rolagem */

.building-scroll__sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100vh;
    height: 100svh;
    background-color: var(--theme-bg);
    /* Sincroniza suavemente a cor de fundo */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding-top: calc(var(--nav-height-desktop, 7.2rem) + clamp(1.2rem, 1.8vh, 2.2rem));
    padding-bottom: clamp(1.6rem, 2.5vh, 2.8rem);
    padding-left: clamp(2rem, 4vw, 5rem);
    padding-right: clamp(2rem, 4vw, 5rem);
    box-sizing: border-box;
    transition: background-color 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Overlay de Escurecimento Cinematográfico (Transição Suave para a Seção Routes) */

.building-scroll__dark-overlay {
    position: absolute;
    inset: 0;
    background-color: #141414;
    /* Fallback padrão */
    z-index: 100;
    /* Sobreposto a todo o conteúdo sticky */
    pointer-events: none;
    opacity: 0;
    overflow: hidden;
    transition: none !important;
    /* Resposta direta e imediata ao giro do scroll do mouse */
    will-change: opacity;
}

/* Camadas de Tema Espelhadas do Card Ativo da Seção Routes */

.building-theme-bg {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity;
}

.building-theme-bg.is-active {
    opacity: 1;
}

/* Tema 0: Skybar (Azul Safira Noturno e Branco Reflexivo) */

.building-theme-bg--0 {
    background:
        radial-gradient(circle at 25% 20%, rgba(255, 255, 255, 0.22) 0%, rgba(144, 202, 249, 0.26) 35%, transparent 65%),
        radial-gradient(circle at 85% 55%, rgba(13, 71, 161, 0.40) 0%, transparent 60%),
        linear-gradient(135deg, #050d1a 0%, #0c1a36 38%, #112850 72%, #07101e 100%);
}

/* Tema 1: Sky Restô (Terracota, Bege Aveludado e Verde Oliva) */

.building-theme-bg--1 {
    background:
        radial-gradient(circle at 80% 20%, rgba(212, 175, 122, 0.28) 0%, transparent 55%),
        radial-gradient(circle at 20% 70%, rgba(85, 107, 47, 0.38) 0%, transparent 55%),
        linear-gradient(135deg, #28130b 0%, #3e1b10 35%, #2e2413 65%, #182312 100%);
}

/* Tema 2: Sky Zenith Lounge (Tons Roxo para Vermelho, Magenta e Vermelho Rubi) */

.building-theme-bg--2 {
    background:
        radial-gradient(circle at 18% 22%, rgba(224, 64, 251, 0.32) 0%, transparent 60%),
        radial-gradient(circle at 82% 35%, rgba(229, 57, 53, 0.30) 0%, transparent 55%),
        linear-gradient(135deg, #1d0624 0%, #35082a 35%, #4c071d 70%, #26040e 100%);
}

/* Tema 3: Skygroup (Preto Arquitetônico Profundo & Grafite Noturno) */

.building-theme-bg--3 {
    background-color: #141414;
    background: #141414;
}

/* Camadas Atmosféricas com Focos de Luz Difusos e Vinheta Noturna para os 3 Ambientes */

.building-scroll__ambient {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity;
    background-size: 100% 100%;
}

/* 1. Atmosfera Zenith Sky Lounge (Ameixa Velvet, Magenta e Vinho Ruby) */

.building-scroll__ambient--zenith {
    background-color: #100615;
    background-image:
        radial-gradient(circle at 76% 25%, rgba(216, 17, 89, 0.48) 0%, rgba(121, 40, 202, 0.24) 36%, transparent 68%),
        radial-gradient(circle at 26% 68%, rgba(142, 14, 90, 0.44) 0%, rgba(75, 12, 70, 0.22) 42%, transparent 72%),
        radial-gradient(ellipse at 50% 50%, rgba(35, 10, 42, 0.55) 0%, rgba(16, 6, 21, 0.96) 100%);
}

/* 2. Atmosfera Sky Restô (Espresso Tostado, Terracota Quente e Verde Oliva) */

.building-scroll__ambient--resto {
    background-color: #120b08;
    background-image:
        radial-gradient(circle at 76% 25%, rgba(200, 90, 50, 0.50) 0%, rgba(160, 65, 30, 0.24) 36%, transparent 68%),
        radial-gradient(circle at 26% 68%, rgba(95, 115, 75, 0.44) 0%, rgba(55, 65, 40, 0.22) 42%, transparent 72%),
        radial-gradient(ellipse at 50% 50%, rgba(38, 22, 14, 0.55) 0%, rgba(18, 11, 8, 0.96) 100%);
}

/* 3. Atmosfera Skybar (Azul Meia-Noite Profundo, Cobalto e Ciano Oceânico) */

.building-scroll__ambient--skybar {
    background-color: #070c18;
    background-image:
        radial-gradient(circle at 76% 25%, rgba(68, 118, 185, 0.48) 0%, rgba(38, 72, 122, 0.22) 35%, transparent 68%),
        radial-gradient(circle at 26% 68%, rgba(42, 80, 138, 0.42) 0%, rgba(20, 44, 82, 0.2) 42%, transparent 72%),
        radial-gradient(ellipse at 50% 50%, rgba(18, 34, 60, 0.55) 0%, rgba(7, 12, 24, 0.95) 100%);
}

/* Ativação por tema com transição fluida de crossfade acelerado por GPU */

.building-scroll.theme-zenith .building-scroll__ambient--zenith {
    opacity: 1;
}

.building-scroll.theme-resto .building-scroll__ambient--resto {
    opacity: 1;
}

.building-scroll.theme-skybar .building-scroll__ambient--skybar {
    opacity: 1;
}

/* Container de conteúdo que organiza a ilustração e os textos laterais */

.building-scroll__container {
    width: 100%;
    max-width: var(--container-max, 136rem);
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}

/* 3. Coluna de Informações / Indicadores dos Níveis */

.building-scroll__info {
    max-width: clamp(48rem, 40vw, 53rem);
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(1.8rem, 2.4vh, 2.8rem);
    z-index: 10;
}

.building-scroll__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.5rem 1.3rem;
    background: var(--theme-tag-bg);
    border: 1px solid var(--theme-tag-border);
    border-radius: 9999px;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 1.15rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dark, #12161f);
    width: fit-content;
    transition: all 0.6s ease;
}

.building-scroll__tag .pulse-dot {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: var(--theme-accent-gradient);
    box-shadow: 0 0 10px var(--theme-glow);
    transition: background 0.6s ease, box-shadow 0.6s ease;
}

/* Título Dinâmico na Coluna de Informações */
.building-scroll__title {
    font-family: var(--font-display, 'Syne', sans-serif);
    font-size: clamp(2.4rem, 3.2vw, 4.2rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--text-dark, #12161f);
    margin: 0;
    transition: color 0.6s ease;
}

.building-scroll__title-accent {
    color: var(--theme-accent, #0284c7);
    transition: color 0.6s ease;
}

/* Lista de Estágios com Design Fiel à Referência Luxury Cards */

.building-scroll__steps {
    display: flex;
    flex-direction: column;
    gap: clamp(1.2rem, 1.6vh, 1.6rem);
    margin-top: 0.6rem;
    width: 100%;
}

.building-scroll__step {
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(1.4rem, 1.6vw, 1.8rem);
    padding: clamp(1.4rem, 1.6vh, 1.7rem) clamp(1.8rem, 2vw, 2.4rem);
    border-radius: 1.6rem;
    border: 1px solid transparent;
    background-color: transparent;
    box-sizing: border-box;
    width: 100%;
    transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, opacity 0.4s ease;
    cursor: default;
}

/* 1. Número do Estágio (01, 02, 03) */

.building-scroll__step-num {
    font-family: var(--font-sans, 'Inter Tight', sans-serif);
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--step-accent);
    min-width: 2.6rem;
    line-height: 1;
    transition: color 0.4s ease, opacity 0.4s ease;
}

/* 2. Divisor Vertical */

.building-scroll__step-divider {
    width: 1px;
    height: 3.4rem;
    background-color: var(--step-divider);
    flex-shrink: 0;
    transition: background-color 0.4s ease;
}

/* 3. Conteúdo Textual */

.building-scroll__step-content {
    flex: 1;
    min-width: 0;
}

.building-scroll__step-content h4 {
    font-family: var(--font-sans, 'Inter Tight', sans-serif);
    font-size: clamp(1.75rem, 1.7vw, 1.95rem);
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--text-dark, #12161f);
    margin: 0 0 0.35rem 0;
    transition: color 0.4s ease;
}

.building-scroll__step-content p {
    font-family: var(--font-sans, 'Inter Tight', sans-serif);
    font-size: clamp(1.2rem, 1.15vw, 1.3rem);
    line-height: 1.45;
    color: rgba(18, 22, 31, 0.65);
    margin: 0;
    transition: color 0.4s ease;
}

/* 4. Seta Indicadora na Direita */

.building-scroll__step-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--step-accent);
    opacity: 0.35;
    transition: transform 0.4s ease, opacity 0.4s ease, color 0.4s ease, filter 0.4s ease;
}

.building-scroll__step-arrow svg {
    display: block;
    width: 2rem;
    height: 2rem;
}

/* Estado Inicial no Estágio 0 (Fundo Claro #FAFAF9): Todos os 3 cards visíveis, legíveis e sem seleção */

.building-scroll:not([class*="theme-"]) .building-scroll__step {
    opacity: 0.85;
}

.building-scroll:not([class*="theme-"]) .building-scroll__step-num {
    color: rgba(18, 22, 31, 0.65);
}

.building-scroll:not([class*="theme-"]) .building-scroll__step-divider {
    background-color: rgba(18, 22, 31, 0.15);
}

.building-scroll:not([class*="theme-"]) .building-scroll__step-arrow {
    opacity: 0.35;
    color: #12161f;
}

/* Estado Inativo nos Temas Noturnos: Cards inativos recebem cor clara e recuam suavemente para dar destaque ao ativo */

.building-scroll[class*="theme-"] .building-scroll__step:not(.is-active) {
    opacity: 0.45;
}

.building-scroll[class*="theme-"] .building-scroll__step:not(.is-active) .building-scroll__step-arrow {
    opacity: 0.28;
    color: #ffffff;
}

.building-scroll[class*="theme-"] .building-scroll__step:not(.is-active) .building-scroll__step-content h4 {
    color: #ffffff;
}

.building-scroll[class*="theme-"] .building-scroll__step:not(.is-active) .building-scroll__step-content p {
    color: rgba(255, 255, 255, 0.55);
}

/* ESTADO ATIVO: Card Iluminado com Borda Fina, Fundo de Vidro Escuro e Brilho Lateral */

.building-scroll__step.is-active {
    opacity: 1 !important;
    background: var(--step-card-bg);
    border-color: var(--step-card-border);
    box-shadow:
        0 14px 40px rgba(0, 0, 0, 0.55),
        0 0 35px -4px var(--step-card-glow),
        inset 0 0 24px var(--step-card-inset);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.building-scroll__step.is-active .building-scroll__step-num {
    font-weight: 600;
    color: var(--step-accent);
}

.building-scroll__step.is-active .building-scroll__step-divider {
    background-color: var(--step-divider-active);
}

.building-scroll__step.is-active .building-scroll__step-content h4 {
    color: #ffffff;
    font-weight: 500;
}

.building-scroll__step.is-active .building-scroll__step-content p {
    color: var(--step-p-active);
}

.building-scroll__step.is-active .building-scroll__step-arrow {
    opacity: 1;
    color: var(--step-accent);
    filter: drop-shadow(0 0 8px var(--step-arrow-glow));
}

/* Adaptação de Cores, Tipografia e Elementos para Temas Noturnos (Desktop & Geral) */

.building-scroll.theme-zenith .building-scroll__title,
.building-scroll.theme-resto .building-scroll__title,
.building-scroll.theme-skybar .building-scroll__title {
    color: #ffffff;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
}

.building-scroll.theme-zenith .building-scroll__tag,
.building-scroll.theme-resto .building-scroll__tag,
.building-scroll.theme-skybar .building-scroll__tag {
    color: #ffffff;
}

.building-scroll.theme-zenith .building-scroll__progress-bar,
.building-scroll.theme-resto .building-scroll__progress-bar,
.building-scroll.theme-skybar .building-scroll__progress-bar {
    background: rgba(255, 255, 255, 0.15);
}

/* Sombras das tags conforme o tema */

.building-scroll.theme-zenith .building-scroll__tag {
    box-shadow: 0 0 16px rgba(255, 42, 133, 0.3);
}

.building-scroll.theme-resto .building-scroll__tag {
    box-shadow: 0 0 16px rgba(255, 122, 61, 0.3);
}

.building-scroll.theme-skybar .building-scroll__tag {
    box-shadow: 0 0 16px rgba(0, 210, 255, 0.25);
}

/* Inversão estilizada dos logotipos com halos nas cores de cada ambiente */

#mobile-logo-group {
    filter: drop-shadow(0 4px 14px rgba(18, 22, 31, 0.12));
}

.building-scroll.theme-zenith #mobile-logo-zenith {
    filter: invert(1) brightness(1.2) drop-shadow(0 0 18px rgba(255, 42, 133, 0.65));
}

.building-scroll.theme-resto #mobile-logo-resto {
    filter: invert(1) brightness(1.2) drop-shadow(0 0 18px rgba(255, 122, 61, 0.65));
}

.building-scroll.theme-skybar #mobile-logo-bar {
    filter: invert(1) brightness(1.2) drop-shadow(0 0 18px rgba(0, 210, 255, 0.6));
}

/* 4. Palco Central das Imagens Sobrepostas */

.building-scroll__stage {
    position: relative;
    height: min(calc(100vh - var(--nav-height-desktop, 7.2rem) - 4.5rem), 660px);
    max-height: 70vh;
    width: auto;
    aspect-ratio: 1142 / 2048;
    max-width: 90vw;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2rem;
    overflow: visible;
    /* Permite que os SVGs flutuem livremente além das bordas */
    background: radial-gradient(circle at center, rgba(18, 22, 31, 0.03) 0%, transparent 70%);
}

/* Animações contínuas de flutuação e levitação orgânica */

/* Imagens com Sobreposição Absoluta Perfeita */

.building-scroll__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    will-change: opacity;
    pointer-events: none;
    user-select: none;
    opacity: 0;
    /* Controlado via JavaScript atrelado ao scroll */
    filter: drop-shadow(0 14px 32px rgba(0, 0, 0, 0.08));
}

/* Estado inicial para a primeira imagem */

.building-scroll__img:first-child {
    opacity: 1;
}

/* 4.2 Indicador Arquitetônico do Andar ("Bandeja") - Desktop: Posicionado à esquerda da construção */

.building-floor-tray {
    position: absolute;
    right: 66%;
    left: auto;
    width: clamp(175px, 16.5vw, 215px);
    z-index: 25;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-12px);
    transition:
        top 0.65s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0.45s,
        filter 0.6s ease;
}

.building-floor-tray.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* Posicionamento vertical para cada pavimento (Zenith = 46, Restô = 45, Skybar = 44) */

.building-floor-tray[data-floor="46"] {
    top: 30%;
}

.building-floor-tray[data-floor="45"] {
    top: 35%;
}

.building-floor-tray[data-floor="44"] {
    top: 40%;
}

.building-floor-tray__inner {
    position: relative;
    width: 100%;
}

/* Rótulo tipográfico luxuoso posicionado sobre a bandeja */

.building-floor-tray__label {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    display: flex;
    align-items: flex-end;
    gap: 0.45rem;
    padding-bottom: 2px;
    white-space: nowrap;
    user-select: none;
}

.building-floor-tray__num {
    font-family: var(--font-primary, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    font-size: clamp(2.1rem, 2.3vw, 2.6rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.04em;
    color: #ffffff;
    transition: opacity 0.16s ease, transform 0.16s ease, text-shadow 0.6s ease;
}

.building-floor-tray__text {
    font-family: var(--font-primary, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    font-size: clamp(1.25rem, 1.35vw, 1.55rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    padding-bottom: 1px;
}

/* Traçado vetorial nítido em linha contínua */

.building-floor-tray__svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

.building-floor-tray__svg--desktop {
    display: block;
}

.building-floor-tray__svg--mobile {
    display: none;
}

.floor-tray-line {
    stroke: rgba(255, 255, 255, 0.95);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
    stroke-linecap: square;
    stroke-linejoin: miter;
    transition: stroke 0.6s ease;
}

.floor-tray-dot {
    fill: #ffffff;
    transition: fill 0.6s ease;
}

/* Iluminação temática dinâmica para a bandeja conforme o ambiente ativo */

.building-scroll.theme-zenith .building-floor-tray {
    filter: drop-shadow(0 0 8px rgba(255, 42, 133, 0.8)) drop-shadow(0 0 18px rgba(255, 42, 133, 0.35));
}

.building-scroll.theme-zenith .building-floor-tray__num {
    text-shadow: 0 0 12px rgba(255, 42, 133, 0.85);
}

.building-scroll.theme-resto .building-floor-tray {
    filter: drop-shadow(0 0 8px rgba(255, 122, 61, 0.8)) drop-shadow(0 0 18px rgba(255, 122, 61, 0.35));
}

.building-scroll.theme-resto .building-floor-tray__num {
    text-shadow: 0 0 12px rgba(255, 122, 61, 0.85);
}

.building-scroll.theme-skybar .building-floor-tray {
    filter: drop-shadow(0 0 8px rgba(0, 210, 255, 0.8)) drop-shadow(0 0 18px rgba(0, 210, 255, 0.35));
}

.building-scroll.theme-skybar .building-floor-tray__num {
    text-shadow: 0 0 12px rgba(0, 210, 255, 0.85);
}

/* 5. Barra de Progresso Vertical */

.building-scroll__progress-bar {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 16rem;
    background: rgba(18, 22, 31, 0.08);
    border-radius: 3px;
    overflow: hidden;
}

.building-scroll__progress-fill {
    width: 100%;
    height: 0%;
    background: var(--theme-accent-gradient);
    transition: height 0.1s linear, background 0.6s ease;
}

/* Logotipos Dinâmicos dos Ambientes (Substitui o título em Desktop e Mobile) */

.building-scroll__logos,
.building-scroll__mobile-logos {
    display: flex;
    position: relative;
    width: 100%;
    max-width: 320px;
    height: clamp(80px, 9.5vh, 95px);
    align-items: center;
    justify-content: flex-start;
    margin: 0.2rem 0;
}

.building-logo,
.building-mobile-logo {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    max-height: clamp(75px, 9vh, 88px);
    max-width: 260px;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: left center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.45s;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.08));
}

.building-logo.is-active,
.building-mobile-logo.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) scale(1.02);
}

/* ----------------------------------------------------------
   Ajustes Responsivos (Mobile e Tablet)
   ---------------------------------------------------------- */

@media (max-width: 1023px) {
    .building-scroll__title {
        display: none;
    }
    .building-scroll {
        height: 540vh;
        /* Trilha estendida no mobile para transições nítidas e confortáveis */
    }

    .building-scroll__sticky {
        padding: clamp(1.5rem, 3vw, 2.5rem);
    }

    .building-scroll__container {
        flex-direction: column-reverse;
        justify-content: center;
        gap: 1.5rem;
    }

    .building-scroll__info {
        max-width: 100%;
        text-align: center;
        align-items: center;
        gap: 1rem;
    }

    .building-scroll__logos,
    .building-scroll__mobile-logos {
        display: flex;
        justify-content: center;
        margin: 0.3rem auto;
        max-width: 280px;
        height: 80px;
    }

    .building-logo,
    .building-mobile-logo {
        left: 50%;
        transform: translate(-50%, -50%);
        max-height: 75px;
        max-width: min(200px, 70vw);
        object-position: center;
    }

    .building-logo.is-active,
    .building-mobile-logo.is-active {
        transform: translate(-50%, -50%) scale(1.02);
    }

    .building-scroll__steps {
        display: none;
        /* No mobile simplifica para manter foco visual no prédio */
    }

    .building-scroll__stage {
        height: min(56vh, 480px);
    }

    .building-scroll__progress-bar {
        display: none;
    }

    /* Adaptação dos focos de luz das 3 seções para proporção vertical mobile */

    .building-scroll__ambient--zenith {
        background-image:
            radial-gradient(circle at 80% 18%, rgba(216, 17, 89, 0.52) 0%, rgba(121, 40, 202, 0.26) 38%, transparent 70%),
            radial-gradient(circle at 20% 72%, rgba(142, 14, 90, 0.48) 0%, rgba(75, 12, 70, 0.24) 42%, transparent 72%),
            radial-gradient(ellipse at 50% 50%, rgba(35, 10, 42, 0.55) 0%, rgba(16, 6, 21, 0.98) 100%);
    }

    .building-scroll__ambient--resto {
        background-image:
            radial-gradient(circle at 80% 18%, rgba(200, 90, 50, 0.54) 0%, rgba(160, 65, 30, 0.26) 38%, transparent 70%),
            radial-gradient(circle at 20% 72%, rgba(95, 115, 75, 0.48) 0%, rgba(55, 65, 40, 0.24) 42%, transparent 72%),
            radial-gradient(ellipse at 50% 50%, rgba(38, 22, 14, 0.55) 0%, rgba(18, 11, 8, 0.98) 100%);
    }

    .building-scroll__ambient--skybar {
        background-image:
            radial-gradient(circle at 80% 18%, rgba(68, 118, 185, 0.52) 0%, rgba(38, 72, 122, 0.25) 38%, transparent 70%),
            radial-gradient(circle at 20% 72%, rgba(42, 80, 138, 0.46) 0%, rgba(20, 44, 82, 0.22) 42%, transparent 72%),
            radial-gradient(ellipse at 50% 50%, rgba(18, 34, 60, 0.55) 0%, rgba(7, 12, 24, 0.98) 100%);
    }

    /* Posicionamento do Indicador de Andar ("Bandeja") no lado direito do edifício em Mobile/Tablet */

    .building-floor-tray {
        left: 58%;
        right: auto;
        width: clamp(140px, 28vw, 175px);
        transform: translateX(12px);
    }

    .building-floor-tray.is-active {
        transform: translateX(0);
    }

    .building-floor-tray__svg--desktop {
        display: none;
    }

    .building-floor-tray__svg--mobile {
        display: block;
    }

    .building-floor-tray[data-floor="46"] {
        top: 27%;
    }

    .building-floor-tray[data-floor="45"] {
        top: 32%;
    }

    .building-floor-tray[data-floor="44"] {
        top: 37%;
    }

    .building-floor-tray__label {
        left: 42%;
        height: 25px;
    }

    .building-floor-tray__num {
        font-size: clamp(1.6rem, 4vw, 1.95rem);
    }

    .building-floor-tray__text {
        font-size: clamp(1.05rem, 2.6vw, 1.25rem);
        letter-spacing: 0.16em;
    }
}

/* Telas muito compactas / smartphones */

@media (max-width: 540px) {
    .building-floor-tray {
        left: 56%;
        width: clamp(100px, 28vw, 130px);
    }
}

/* Tablet específico (768px a 1023px) */

@media (min-width: 768px) and (max-width: 1023px) {
    .building-scroll__mobile-logos {
        height: 90px;
        max-width: 300px;
    }

    .building-mobile-logo {
        max-height: 80px;
        max-width: 220px;
    }

    .building-scroll__stage {
        height: min(60vh, 520px);
    }
}