/* style.css */

* { margin: 0; padding: 0; box-sizing: border-box; }
body { -webkit-font-smoothing: antialiased; background-color: #050505; }

/* ==========================================================
   HEADER & MENU DESKTOP
   ========================================================== */
/* Estado do Header ao Descer a Página (Claro e elegante) */
#main-header.scrolled {
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-color: rgba(252, 250, 238, 0.95); /* premium-cream translúcido */
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(212, 175, 55, 0.1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

/* Os links do menu precisam ficar escuros */
.nav-link {
    color: #f7e3d9;
    position: relative;
    transition: color 0.3s ease;
}

/* O fundo do menu mobile */
/* Fundo Elegante e Claro para o Menu Mobile */
.nav-menu.mobile-active {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(252, 250, 238, 0.98); /* O nosso tom Creme Premium (Off-white) */
    backdrop-filter: blur(15px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    z-index: 40;
}
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 1px;
    background: #D4AF37;
    transition: width 0.3s ease;
}
.nav-link:hover::after { width: 100%; }

/* ==========================================================
   MENU MOBILE (X ANIMADO E TELA CHEIA)
   ========================================================== */
.nav-menu.mobile-active {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100vh; 
    background-color: rgba(5, 5, 5, 0.98);
    backdrop-filter: blur(15px);
    flex-direction: column;
    justify-content: center; 
    align-items: center;
    gap: 3rem;
    z-index: 40;
}

.nav-menu.mobile-active .nav-link {
    font-size: 16px;
    letter-spacing: 0.3em;
}

#menu-mobile-btn.open .line-1 {
    transform: translateY(4.5px) rotate(45deg);
    width: 32px; 
}

#menu-mobile-btn.open .line-2 {
    transform: translateY(-4.5px) rotate(-45deg);
    width: 32px;
}
/* ==========================================================
   MENU MOBILE - CORES BLINDADAS (ALTA PRIORIDADE)
   ========================================================== */

/* 1. Garante que o fundo do menu é Creme e opaco */
.nav-menu.mobile-active {
    background-color: rgba(252, 250, 238, 0.98) !important;
    backdrop-filter: blur(15px);
}

/* 2. Força a cor Carvão (Charcoal) nos links do menu mobile */
.nav-menu.mobile-active .nav-link {
    color: #2C2A29 !important; 
    font-size: 16px !important;
    letter-spacing: 0.3em;
}

/* 3. Garante que no Hover os links ficam Dourados */
.nav-menu.mobile-active .nav-link:hover {
    color: #D4AF37 !important;
}

/* 4. Força a cor no botão "Agendar" dentro do menu mobile */
.nav-menu.mobile-active .btn-gold-mini {
    color: #2C2A29 !important;
    border-color: #D4AF37 !important;
}

.nav-menu.mobile-active .btn-gold-mini:hover {
    background-color: #D4AF37 !important;
    color: #ffffff !important;
}

/* 5. Garante que o botão hambúrguer (as linhas) fica escuro para ser visto no fundo claro */
#menu-mobile-btn .line-1,
#menu-mobile-btn .line-2 {
    background-color: #2C2A29 !important;
}
/* ==========================================================
   BOTÃO MAGNÉTICO PREMIUM
   ========================================================== */
.btn-premium-magnetic {
    background: transparent;
    cursor: pointer;
    backface-visibility: hidden;
}

@media (max-width: 768px) {
    .btn-premium-magnetic {
        padding: 1rem 2rem;
    }
}

/* ==========================================================
   FAIXA EM MOVIMENTO (MARQUEE INFINITO)
   ========================================================== */
.animate-marquee {
    /* 25 segundos define a velocidade. Aumente para ficar mais lento */
    animation: scroll-marquee 25s linear infinite;
    display: flex;
    width: max-content;
}

@keyframes scroll-marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Move exatamente um terço da largura total (pois temos 3 grupos) para um loop perfeito */
        transform: translateX(calc(-100% / 3)); 
    }
}