/* ============================================
   SOFIA TURISMO — style.css
   ============================================ */

/* Fonte */
body {
    font-family: 'Inter', sans-serif;
}

/* Canvas 3D global */
#globalCanvas {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}

header, main, footer {
    position: relative;
    z-index: 1;
}

/* Animação de entrada */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Nav item */
.nav-item {
    border-bottom: 2px solid transparent;
    transition: all 0.3s;
}
.nav-item.active {
    color: #D4AF37;
    font-weight: 700;
    border-bottom: 2px solid #D4AF37;
}

/* Scrollbar oculta */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ============ CARROSSEL 3D ============ */
.prod-card {
    position: absolute;
    width: 320px;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
    border-radius: 20px;
    overflow: hidden;
    flex-shrink: 0;
}
.prod-card.ativo {
    transform: translateX(0) scale(1) translateZ(0px);
    z-index: 10;
    opacity: 1;
    filter: brightness(1);
}
.prod-card.esquerda {
    transform: translateX(-280px) scale(0.78) translateZ(-120px);
    z-index: 5;
    opacity: 0.55;
    filter: brightness(0.7);
}
.prod-card.direita {
    transform: translateX(280px) scale(0.78) translateZ(-120px);
    z-index: 5;
    opacity: 0.55;
    filter: brightness(0.7);
}
.prod-card.esquerda2 {
    transform: translateX(-490px) scale(0.6) translateZ(-200px);
    z-index: 1;
    opacity: 0.2;
    filter: brightness(0.5);
}
.prod-card.direita2 {
    transform: translateX(490px) scale(0.6) translateZ(-200px);
    z-index: 1;
    opacity: 0.2;
    filter: brightness(0.5);
}
.prod-card.oculto {
    transform: translateX(0) scale(0.4);
    z-index: 0;
    opacity: 0;
    pointer-events: none;
}

/* ============ HERO ============ */
@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes borderPulse {
    0%, 100% { box-shadow: 0 0 0px rgba(212,175,55,0); }
    50%       { box-shadow: 0 0 25px rgba(212,175,55,0.2); }
}
@keyframes bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%       { transform: translateX(-50%) translateY(-8px); }
}
@keyframes goldPulse {
    0%, 100% { box-shadow: 0 0 0 1px rgba(212,175,55,0.4), 0 0 30px rgba(212,175,55,0.2); }
    50%       { box-shadow: 0 0 0 1px rgba(212,175,55,0.7), 0 0 55px rgba(212,175,55,0.35); }
}

/* ============ FILTROS FROTA ============ */
.filtro-btn {
    transition: all 0.3s;
    cursor: pointer;
}

/* ============ RESPONSIVO MOBILE ============ */
@media (max-width: 768px) {
    .prod-card { width: 280px; }
    .prod-card.ativo     { transform: translateX(0) scale(1.02) translateZ(0); filter: brightness(1); }
    .prod-card.esquerda  { transform: translateX(-185px) scale(0.75) translateZ(-80px); opacity: 0.6; filter: brightness(0.7); }
    .prod-card.direita   { transform: translateX(185px)  scale(0.75) translateZ(-80px); opacity: 0.6; filter: brightness(0.7); }
    .prod-card.esquerda2 { transform: translateX(-320px) scale(0.55) translateZ(-150px); opacity: 0.2; filter: brightness(0.5); }
    .prod-card.direita2  { transform: translateX(320px)  scale(0.55) translateZ(-150px); opacity: 0.2; filter: brightness(0.5); }
}