:root {
    --bg-color: #ffffff;
    --text-primary: #0b0d13;
    --card-bg: rgba(0, 0, 0, 0.05);
    --dropdown-bg: rgba(255, 255, 255, 0.95);
    --gradient-1: rgba(20, 184, 166, 0.12);
    --gradient-2: rgba(139, 92, 246, 0.12);
    --border-subtle: rgba(0, 0, 0, 0.08);
    --revenda-color: #0A2C2E;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #000000;
        --text-primary: #ffffff;
        --card-bg: rgba(255, 255, 255, 0.08);
        --dropdown-bg: rgba(20, 20, 20, 0.98);
        --gradient-1: rgba(20, 184, 166, 0.30);
        --gradient-2: rgba(139, 92, 246, 0.30);
        --border-subtle: rgba(255, 255, 255, 0.15);
    }
}

* { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }

body { 
    background: radial-gradient(circle at 5% 0%, var(--gradient-1), transparent 45%), radial-gradient(circle at 95% 0%, var(--gradient-2), transparent 45%), var(--bg-color);
    color: var(--text-primary); min-height: 100vh; font-family: 'Inter', sans-serif; background-attachment: fixed; overflow-x: hidden;
}

.glow-line {
    height: 1px; width: 100%; max-width: 600px; margin: 40px auto;
    background: linear-gradient(90deg, transparent, #2dd4bf, #8b5cf6, transparent);
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.4); opacity: 0.5;
}

.card-planos { position: relative; overflow: hidden; }
.ribbon { position: absolute; top: 0; right: 0; width: 120px; height: 120px; overflow: hidden; z-index: 10; pointer-events: none; }
.ribbon span { position: absolute; display: block; width: 180px; padding: 10px 0; color: #fff; font-size: 9px; font-weight: 900; text-align: center; text-transform: uppercase; right: -45px; top: 28px; transform: rotate(45deg); letter-spacing: 1px; box-shadow: 0 5px 10px rgba(0,0,0,0.1); }

.bg-card { background: var(--card-bg); backdrop-filter: blur(15px); border: 1px solid var(--border-subtle); }
.unit-gradient { background: linear-gradient(135deg, #FF0000 0%, #4f46e5 100%); }
.nuvi-gradient { background: linear-gradient(135deg, #a855f7 0%, #0ea5e9 100%); }
.test-gradient { background: linear-gradient(135deg, #ef4444 0%, #8b5cf6 50%, #0ea5e9 100%); }

/* REVENDA */
.revenda-card {
    background: var(--card-bg);
    border: 2px solid var(--revenda-color);
    border-radius: 3rem;
    backdrop-filter: blur(15px);
}
.btn-revenda {
    background: var(--revenda-color);
    color: white;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(10, 44, 46, 0.3);
}
.btn-revenda:hover { transform: scale(1.02); filter: brightness(1.1); }

/* FAQ STYLE */
.faq-item {
    background: var(--card-bg);
    border: 1px solid var(--border-subtle);
    border-radius: 1.5rem;
    overflow: hidden;
    transition: all 0.3s ease;
}
.faq-question { cursor: pointer; user-select: none; }

.faq-answer { 
    max-height: 0; 
    overflow: hidden; 
    transition: max-height 0.5s ease-out, padding 0.3s ease;
    opacity: 0;
}

.faq-item.active .faq-answer { 
    max-height: 500px;
    opacity: 1;
    transition: max-height 0.5s ease-in, opacity 0.3s ease-in;
}

.faq-icon { transition: transform 0.3s ease; }
.faq-item.active .faq-icon { transform: rotate(180deg); }

.carousel-container { display: flex; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; gap: 15px; padding: 0 20px; }
.carousel-container::-webkit-scrollbar { display: none; }
.carousel-item { flex: 0 0 135px; border-radius: 1.25rem; position: relative; padding: 2px; background: linear-gradient(135deg, #2dd4bf, #8b5cf6, #f97316); }
.carousel-inner { border-radius: 1.15rem; overflow: hidden; height: 100%; width: 100%; background: #000; }

.anchor-section { scroll-mt: 100px; }