/* --- NAVBAR --- */
nav { 
    position: fixed; 
    width: 100%; 
    padding: 20px 8%; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    z-index: 1000; 
    transition: 0.4s; 
}

nav.sticky { 
    background: rgba(15, 15, 15, 0.95); 
    padding: 12px 8%; 
    backdrop-filter: blur(10px); 
    border-bottom: 3px solid var(--amarelo); 
}

.logo-img { height: 60px; border-radius: 5px; transition: 0.3s; }
nav.sticky .logo-img { height: 50px; }

.nav-links { display: flex; align-items: center; gap: 30px; }

.nav-item { 
    color: #fff; 
    text-decoration: none; 
    font-weight: 700; 
    font-size: 0.9rem; 
    transition: 0.3s; 
}

.nav-item:hover { color: var(--amarelo); }

.nav-item.disabled { opacity: 0.5; cursor: not-allowed; }

.btn-nav { 
    background: var(--amarelo); 
    color: #000; 
    padding: 10px 20px; 
    border-radius: 8px; 
    text-decoration: none; 
    font-weight: 700; 
    font-size: 0.8rem; 
    transition: 0.3s;
}

.btn-nav:hover { background: var(--amarelo-hover); }

/* --- LAYOUT E TÍTULOS --- */
.container { padding: 100px 10%; }

.section-title { 
    text-align: center; 
    margin-bottom: 60px; 
    font-size: 2.5rem; 
    font-weight: 900; 
    position: relative; 
    padding-bottom: 25px; 
}

.modern-divider::after { 
    content: ""; 
    position: absolute; 
    bottom: 0; 
    left: 50%; 
    transform: translateX(-50%); 
    width: 250px; 
    height: 4px; 
    background: radial-gradient(50% 50% at 50% 50%, var(--amarelo) 0%, rgba(255, 206, 0, 0) 100%);
    border-radius: 50%;
}

/* --- CARDS & GRIDS --- */
.grid, .steps-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 30px; 
}

.interactive-card { 
    background: #fff; 
    padding: 40px; 
    border-radius: 25px; 
    box-shadow: var(--card-shadow); 
    border: 1px solid #f0f0f0; 
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); 
    position: relative; 
    cursor: pointer; 
}

.interactive-card:hover { 
    transform: scale(1.05) translateY(-5px); 
    box-shadow: var(--card-hover-shadow); 
    border-color: var(--amarelo); 
    z-index: 10; 
}

.card.special { background: var(--preto); color: white; border: none; }

.badge { 
    background: var(--amarelo); 
    color: #000; 
    font-size: 0.7rem; 
    font-weight: 900; 
    padding: 3px 10px; 
    border-radius: 10px; 
    margin-bottom: 15px; 
    display: inline-block; 
}

.step-icon { 
    font-size: 2.5rem; 
    margin-bottom: 20px; 
    background: #f8f9fa; 
    width: 70px; 
    height: 70px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border-radius: 18px; 
    transition: 0.3s; 
}

.interactive-card:hover .step-icon { 
    background: var(--amarelo); 
    transform: rotate(-10deg) scale(1.1); 
}

/* --- SLIDER DE CLIENTES --- */
.slider-wrapper { 
    padding: 100px 0; 
    background: var(--cinza-fundo); 
    position: relative; 
    text-align: center; 
}

.slider-wrapper::before, .slider-wrapper::after {
    content: ""; 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
    width: 100%; 
    height: 4px;
    background: radial-gradient(50% 50% at 50% 50%, var(--amarelo) 0%, rgba(255, 206, 0, 0) 100%);
}
.slider-wrapper::before { top: 0; }
.slider-wrapper::after { bottom: 0; }

.slider-label { 
    display: block;
    text-align: center; 
    font-size: 0.8rem; 
    font-weight: 800; 
    color: #aaa; 
    text-transform: uppercase; 
    letter-spacing: 3px; 
    margin-bottom: 60px; 
    width: 100%;
}

.slider-container-fixed {
    max-width: 1000px; 
    margin: 0 auto;
    overflow: hidden;
}

.slider-mask { 
    overflow: hidden; 
    position: relative; 
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); 
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); 
}

/* Container da trilha */
.slider-track { 
    display: flex; 
    width: max-content; 
    gap: 40px; 
    /* REMOVEMOS A ANIMAÇÃO CSS AQUI */
    /* animation: scrollSlide 40s linear infinite; <--- APAGUE ISSO */
    
    /* Prepara para o JS */
    will-change: transform; 
    cursor: grab; /* Mãozinha aberta */
}

.slider-track:active {
    cursor: grabbing; /* Mãozinha fechada quando clica */
}

/* O resto (slider-wrapper, slide, img) mantém igual */

/* Pausa no CSS (já funciona bem sem precisar do JS, mas pode manter o JS se preferir) */
.slider-track:hover {
    animation-play-state: paused;
}

/* Item individual */
.slide { 
    width: 200px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 10px; 
    /* GARANTE QUE O ITEM NÃO AMASSE */
    flex-shrink: 0; 
    
    /* Impede selecionar o container do slide */
    user-select: none;
    -webkit-user-select: none;
}

.slide img { 
    height: 230px; 
    width: auto;
    opacity: 0.8; 
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    cursor: pointer;
    pointer-events: none; /* O Segredo: O mouse ignora a imagem e pega o container */
    user-select: none;    /* Impede selecionar o texto/imagem */
    -webkit-user-drag: none; /* Impede o fantasma da imagem no Chrome/Safari */
}

/* Container da trilha */
.slider-track { 
    display: flex; 
    width: max-content; 
    gap: 40px; 
    cursor: grab; /* Mãozinha aberta */
    
    /* BLOQUEIO TOTAL DE SELEÇÃO (Resolve o bug azul) */
    user-select: none;
    -webkit-user-select: none; /* Safari/Chrome */
    -moz-user-select: none;    /* Firefox */
    
    will-change: transform; 
}

.slider-track:active {
    cursor: grabbing; /* Mãozinha fechada */
}

.slide span {
    font-size: 0.9rem;
    font-weight: 700;
    color: #ccc;
    text-transform: uppercase;
    transition: 0.3s;
    /* O SEGREDO: O mouse atravessa a imagem e clica na track */
    pointer-events: none; 
    /* Garante que a imagem não seja arrastada nativamente */
    -webkit-user-drag: none;
}

.slide:hover img { 
    opacity: 1;
    transform: scale(1.15); 
}

.slide:hover span {
    color: var(--amarelo); 
}

/* A Mágica do Loop */
@keyframes scrollSlide { 
    0% { transform: translateX(0); } 
    /* Como a largura total é (LarguraSlide + Gap) * NumeroTotalDeSlides */
    /* Queremos mover apenas a metade dos slides (7 slides) */
    /* Conta: 7 * (200px + 40px) = 1680px */
    /* O jeito mais fácil é usar -50% da largura total da track */
    100% { transform: translateX(-50%); } 
}

/* --- RODAPÉ REFINADO --- */
.main-footer { 
    text-align: center; 
    padding: 60px 20px; 
    background: #050505; 
    color: #666; 
    font-size: 0.85rem; 
    border-top: 1px solid #1a1a1a; 
    letter-spacing: 0.5px;
    line-height: 1.5;
}

.main-footer p {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}

.main-footer::before {
    content: "";
    display: block;
    width: 40px;
    height: 2px;
    background: var(--amarelo);
    margin: 0 auto 25px;
    border-radius: 2px;
}