:root {
    --navy-deep: #04080f;
    --navy-mid:  #081020;
    --gold:      #c5a059;
    --gold-dim:  rgba(197,160,89,0.25);
    --white:     #ffffff;
    --muted:     rgba(255,255,255,0.55);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: auto; }
body {
    font-family: 'Montserrat', sans-serif;
    background: var(--navy-deep);
    color: var(--white);
    overflow-x: hidden;
}

/* STARFIELD */
#starfield { position:fixed; inset:0; z-index:0; pointer-events:none; }


/* PROGRESS */
#progress {
    position:fixed; top:0; left:0; height:2px; width:0%;
    background:linear-gradient(to right, transparent, var(--gold));
    z-index:1000; 
}

/* ══ LOGOS FLUTUANTES ══ */
.float-logo {
    position: fixed;
    z-index: 15;
    padding: 9px 22px;
    background: transparent !important;
    backdrop-filter: none !important;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    opacity: 0;
    white-space: nowrap;
    pointer-events: none;
    will-change: transform, opacity, top, left;
    mix-blend-mode: screen !important; /* Remove tons acinzentados/brancos do fundo da imagem */
    filter: drop-shadow(0 0 10px rgba(0,0,0,0.5));
}


/* Posições home */
.fl-0 { top:11%;  left:7%; }
.fl-1 { top:23%;  left:25%; }
.fl-2 { top: 9%;  left:56%; }

.fl-4 { top:30%;  left:72%; }


/* tamanho logo */
.fl-0 img { height: 130px; }
.fl-1 img { height: 70px; }
.fl-2 img { height: 80px; }

.fl-4 img { height: 65px; }



/* ══ PAINEL DE DESCRIÇÃO ══ */
.desc-panel {
    position: fixed;
    top: 50%;
    right: -520px;
    transform: translateY(-50%) !important;
    width: clamp(280px, 34vw, 540px);
    z-index: 20;
    opacity: 0;
    display: flex;
    pointer-events: none;
    align-items: center;
}
.desc-panel-inner {
    padding: 44px 44px 44px 36px;
    border-left: 1px solid var(--gold-dim);
    background: linear-gradient(135deg, rgba(8,16,32,0.88) 0%, rgba(4,8,15,0.94) 100%);
    backdrop-filter: blur(24px);
}
.panel-num    { font-size:.58rem; letter-spacing:4px; color:var(--gold); margin-bottom:18px; opacity:.7; }
.panel-div    { width:32px; height:1px; background:var(--gold); margin-bottom:20px; }
.panel-cat    { font-size:.80rem; letter-spacing:4px; text-transform:uppercase; color:var(--gold); margin-bottom:12px; }
.panel-title  {
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(1.7rem,2.6vw,2.5rem);
    font-weight:400; line-height:1.2; margin-bottom:16px;
}
.panel-title em { font-style:italic; color:var(--gold); }
.panel-desc   { font-size:.82rem; line-height:1.9; color:var(--muted); font-weight:300; }

/* ══ HERO ══ */
#hero {
    height:100vh; display:flex; align-items:center;
    justify-content:center; position:relative;
    text-align:center; padding:0 2vw; z-index:5;
}
.hero-text { position:relative; z-index:20; max-width:1100px; will-change: transform, opacity; }
.hero-eyebrow {
    font-size:.68rem; letter-spacing:5px; text-transform:uppercase;
    color:var(--gold); margin-bottom:26px; opacity:0;
}
.hero-headline {
    font-family: 'Montserrat', sans-serif;
    font-size:clamp(2rem,3.5rem,5.5rem); font-weight:600;
    line-height:1.1; margin-bottom:28px; opacity:0;
}
.hero-headline span {color:var(--gold); font-weight:700; }
.hero-sub {
    font-size:clamp(.78rem,1.2vw,.96rem); line-height:1.9;
    color:var(--muted); max-width:800px; margin:0 auto;
    font-weight:300; opacity:0;
}
.hero-sub strong { color:var(--white); font-weight:600; }
.hero-line {
    width:1px; height:55px;
    background:linear-gradient(to bottom, transparent, var(--gold), transparent);
    margin:36px auto 0; opacity:0;
}
.scroll-hint {
    position:absolute; bottom:44px; left:50%;
    transform:translateX(-50%); display:flex;
    flex-direction:column; align-items:center;
    gap:8px; opacity:0; color:var(--muted);
    font-size:.58rem; letter-spacing:3px; text-transform:uppercase;
}
.scroll-hint-line {
    width:1px; height:38px;
    background:linear-gradient(to bottom, var(--gold), transparent);
    animation:spulse 2s ease-in-out infinite;
}
@keyframes spulse { 0%,100%{opacity:.3;transform:scaleY(1)} 50%{opacity:1;transform:scaleY(1.2)} }

/* ══ SCROLL SECTIONS ══ */
#scroll-container { position:relative; z-index:5; }

/* Cada cena = 100vh: transição rápida */
.company-scene { height:100vh; position:relative; }

/* ══ CLOSING ══ */
#closing {
    height:100vh; display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    text-align:center; padding:0 5vw; position:relative; z-index:5;
}
.closing-inner { opacity:0; transform:translateY(40px); }
.closing-eyebrow { font-size:.65rem; letter-spacing:5px; text-transform:uppercase; color:var(--gold); margin-bottom:28px; }
.closing-headline {
    font-family: 'Montserrat', sans-serif;
    font-size:clamp(2rem,3.5rem,5.5rem); font-weight:600;
    line-height:1.1; margin-bottom:28px;
}
.closing-headline span { color:var(--gold); }
.closing-sub { font-size:.88rem; color:var(--muted); font-weight:300; margin-bottom:56px; letter-spacing:1px; }

.closing-glow {
    position:absolute; width:500px; height:500px; border-radius:50%;
    background:radial-gradient(circle,rgba(197,160,89,.07) 0%,transparent 70%);
    pointer-events:none;
}

/* ══ BRAND FIXO ══ */
.group-brand {
    position:fixed; bottom:36px; left:50%;
    transform:translateX(-50%); z-index:50;
    display:flex; 
    align-items:center;
    gap:9px; opacity:0; pointer-events:none;
}
.brand-icon { width:44px; height:22px; position:relative; }
.brand-icon::before {
    content:''; position:absolute; bottom:0; left:0; width:0; height:0;
    border-left:22px solid transparent; border-right:22px solid transparent;
    border-bottom:18px solid var(--gold);
}
.brand-icon::after {
    content:''; position:absolute; bottom:0; left:7px; width:0; height:0;
    border-left:15px solid transparent; border-right:15px solid transparent;
    border-bottom:12px solid var(--navy-deep);
}
.brand-name { font-size:.6rem; letter-spacing:5px; font-weight:500; color:var(--white); text-transform:uppercase; }

/* ══ NAV DOTS ══ */
.nav-dots {
    position:fixed; right:28px; top:50%;
    transform:translateY(-50%); z-index:100;
    display:flex; flex-direction:column; gap:11px; opacity:0;
}
.nav-dot {
    width:5px; height:5px; border-radius:50%;
    background:rgba(255,255,255,.2);
    transition:all .3s; cursor:none;
}
.nav-dot.active { background:var(--gold); box-shadow:0 0 8px var(--gold); transform:scale(1.5); }

/* estrela */

/* Container para garantir o posicionamento relativo */
.progress-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px; /* Aumentei um pouco a altura para acomodar a estrela */
    z-index: 10000;
}

/* Sua barra de progresso existente (ajuste se necessário) */
.progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #b8923a, #ffdf91, #b8923a);
    transform-origin: left;
    transform: scaleX(0); /* Começa zerada */
}

/* Configuração da Estrela */
.progress-star {
    position: absolute;
    top: 3px; /* Centraliza verticalmente na barra de 6px */
    left: 0; /* Começa na esquerda */
    width: 24px; /* Tamanho da estrela */
    height: 24px;
    transform: translate(-50%, -50%); /* Centraliza o próprio SVG na ponta */
    
    /* O EFEITO DE BRILHO (GLOW) */
    filter: drop-shadow(0 0 8px rgba(255, 223, 145, 0.9));
    
    pointer-events: none; /* Não interfere no clique */
}

.bamberg-logo{
    height: 60px;
    padding: 0 15px;
}

.cta-btn {
    display: inline-block;
    padding: 16px 52px;
    border: 1px solid var(--gold);
    color: var(--gold);
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    margin-top: 30px;
}

.cta-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gold);
    transform: translateX(-100%);
    transition: transform 0.4s ease;
    z-index: -1;
}

.cta-btn:hover::before { transform: translateX(0); }
.cta-btn:hover { color: var(--navy-deep); }

.closing-socials {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-top: 30px;
}

.closing-socials a {
    color: #fff; /* Cor padrão */
    font-size: 24px;
    transition: all 0.3s ease;
    opacity: 0.7;
    text-decoration: none;
}

.closing-socials a:hover {
    color: #d4af37; /* O mesmo dourado usado no site */
    opacity: 1;
    transform: translateY(-3px); /* Leve efeito de flutuação */
}

.closing-socials a i {
    color: inherit; 
}


/* Mobile: reduzir área de clique do scroll */
@media (max-width: 1024px) {
    #navDots { 
        display: none !important; 
    }

    .bamberg-logo {
        height: 40px !important; /* Reduzido de 60px */
        width: auto;
    }

    .desc-panel {
        right: auto !important;
        left: 15px !important;
        top: 65% !important; /* Ajustado para dar mais espaço à logo */
        transform: translateY(-50%) !important;
        width: calc(100% - 30px) !important;
        max-width: none;
        z-index: 90 !important; /* Garante que fique acima de tudo */
    }

    .desc-panel-inner {
        border-left: none;
        border-top: 1px solid var(--gold-dim);
        text-align: center;
        width: 100% !important;
        padding: 30px 20px;
        background: rgba(4, 8, 15, 0.98); /* Fundo mais opaco para leitura no mobile */
        backdrop-filter: blur(30px) !important;
    }

    /* Garante que a Hero seja visível mesmo sem animação complexa */
    .hero-eyebrow, .hero-headline, .hero-sub {
        opacity: 1 !important;
        transform: none !important;
    }

    .panel-div { margin: 0 auto 20px; }

    .float-logo {
        opacity: 0; /* Garante que não comecem invisíveis */
        visibility: visible !important;
        display: block !important;
        transition: none;
        will-change: transform, left, top, opacity; /* Melhora performance mobile */
    }

    .closing-headline {
        font-family: 'Montserrat', sans-serif;
        font-size:clamp(1.2rem,2.5rem,3.5rem); font-weight:600;
        line-height:1.1; margin-bottom:28px;
    }

    .fl-0 { top:5%;  left:22%; }
    .fl-1 { top:15%;  left:5%; }
    .fl-2 { top: 9%;  left:56%; }
    .fl-3 { top: 3%;  left:62%; }
    .fl-4 { top:65%;  left:2%; }
    

    .fl-0 img { height: 70px; }
    .fl-1 img { height: 30px; }
    .fl-2 img { height: 40px; }
    .fl-3 img { height: 35px; }
    .fl-4 img { height: 30px; }
   

    .scene {
        min-height: 240vh; /* Aumenta o "vão" entre as logos no scroll */
    }
    
    body::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(8, 19, 37, 0.7); /* Escurece o fundo em 30% */
        z-index: 1; /* Fica acima das estrelas, mas abaixo do texto */
        pointer-events: none;
    }

    .closing-socials {
        gap: 20px; /* Mais espaço para o toque no celular */
        margin-top: 20px;
    }
    
    .closing-socials a {
        font-size: 28px; /* Ícones um pouco maiores no mobile */
    }

}