/* Paleta de Cores e Configurações Gerais */
:root {
    /* Mapeamento Mágico: Suas variáveis originais agora puxam a cor do Painel Admin automaticamente */
    --brand-orange: var(--brand-primary, #0046fe); 
    --wireframe-gray: #aeaeae;
    --brand-green: var(--brand-secondary, #2ecc71);
    --premium-blue: #001242;
}

/* NORMALIZAÇÃO DE FONTE PARA EVITAR O NEGRITO EXCESSIVO NO MAC */
body {
    background-color: #ffffff;
    font-family: var(--font-global, "Poppins", "Segoe UI Variable", "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
    -webkit-text-size-adjust: 100%; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
    font-weight: 400; /* Alterado de 100 para 400 */
    color: #333;
    margin: 0;
    padding: 0;
}

/* Opcional: Se os botões dos filtros estiverem a forçar negrito */
.form-select, .btn, .dropdown-item {
    -webkit-font-smoothing: antialiased;
    font-weight: 400 !important;
}

/* 2. HERO SECTION */
.hero-box {
    background-color: var(--wireframe-gray);
    height: 320px;
    border-radius: 12px;
}

.btn-cta {
    background-color: var(--brand-green) !important;
    border-color: var(--brand-green) !important;
    font-size: 1.1rem;
    transition: transform 0.2s;
}

.btn-cta:hover {
    transform: scale(1.03);
}

.section-title {
    color: #555555;
    font-weight: 600;
}

/* 3. CARROSSEL */
.card-gray {
    background-color: var(--wireframe-gray);
    height: 220px;
    border-radius: 8px;
}

.custom-carousel-btn {
    width: 5%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    padding: 15px;
}

.carousel-indicators {
    bottom: -35px;
}

.carousel-indicators button {
    background-color: var(--wireframe-gray) !important;
}

/* 4. BANNER INTERMEDIÁRIO */
.banner-box {
    background-color: var(--wireframe-gray);
    height: 120px;
    border-radius: 8px;
}

/* 5. SEÇÃO DE PREÇOS */
.pricing-section {
    background-color: var(--premium-blue);
    border-radius: 24px;
}

.max-w-700 {
    max-width: 700px;
}

.premium-price-card {
    background-color: #ffffff;
    border-radius: 24px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
    overflow: hidden;
}

.premium-price-card.featured {
    transform: scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    border: 2px solid #00f2fe;
}

@media (max-width: 991px) {
    .premium-price-card.featured {
        transform: none;
    }
}

.plan-header-text h3 {
    color: var(--brand-orange);
    letter-spacing: -0.5px;
}

.sub-plan-text {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.currency-value {
    font-size: 3rem;
    color: color-mix(in srgb, var(--brand-orange) 80%, black);
    font-weight: 900;
    line-height: 1;
}

.currency-value .cents {
    font-size: 1.5rem;
    vertical-align: super;
    font-weight: 700;
}

.text-dark-blue {
    color: color-mix(in srgb, var(--brand-orange) 65%, black) !important;
}

.bg-discount {
    background-color: var(--brand-green);
    color: #ffffff;
    font-size: 0.8rem;
    padding: 6px 12px;
    border-radius: 6px;
}

.recommended-badge {
    background: linear-gradient(90deg, #00b4db, #0083b0);
    font-size: 0.75rem;
    letter-spacing: 1px;
}

.features-list li {
    font-size: 0.88rem;
    color: #334155;
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.4;
    text-align: left;
}

.check-blue {
    color: color-mix(in srgb, var(--brand-orange) 85%, white);
    font-weight: bold;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.btn-outline-premium {
    color: var(--brand-orange);
    border: 2px solid var(--brand-orange);
    background-color: transparent;
    letter-spacing: 0.5px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.btn-outline-premium:hover {
    background-color: var(--brand-orange);
    color: #ffffff;
}

.btn-gradient-premium {
    background: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%);
    letter-spacing: 0.5px;
    font-size: 0.95rem;
    box-shadow: 0 4px 15px rgba(0, 242, 254, 0.4);
    transition: opacity 0.2s ease;
}

.btn-gradient-premium:hover {
    opacity: 0.9;
    color: white;
}

/* =========================================
   ESTILOS EXCLUSIVOS DA PÁGINA INICIAL
========================================= */
.banner-destaque {
    background-image: url('style/banner-site.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--brand-orange); 
    height: 250px;
    border-radius: 15px;
    margin-top: 40px;
    width: 100%;
}

.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 15px;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--brand-orange) 30%, white);
}

.dot.active {
    background-color: var(--brand-orange);
}

.card-inicio {
    border: 1px solid #EAEAEA;
    border-radius: 10px;
    padding: 25px;
    background-color: white;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
    height: 100%;
    transition: transform 0.2s;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: block;
}

.card-inicio:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.05);
}

.card-inicio h4 {
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
}

.card-inicio p {
    color: #666;
    margin-bottom: 0;
    font-size: 1.05rem;
}

@media (min-width: 992px) {
    .container-reduzido {
        max-width: 1000px;
    }
}

/* =========================================
   PAINEL DE DESEMPENHO (DESEMPENHO.PHP)
========================================= */
.card-stat {
    border: 1px solid #EAEAEA;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    transition: 0.2s;
}

.card-stat h2 {
    font-size: 2.5rem;
    color: #555;
    letter-spacing: -1px;
}

.bg-green-custom {
    background-color: var(--brand-green) !important;
    color: white !important;
    border: none;
}

.bg-green-custom h2 { color: white; }

.bg-red-custom {
    background-color: #C0392B !important;
    color: white !important;
    border: none;
}

.bg-red-custom h2 { color: white; }

.btn-group-custom .btn {
    border-color: #ced4da;
    color: #555;
}

.btn-group-custom .btn.active {
    background-color: var(--brand-orange);
    border-color: var(--brand-orange);
    color: white;
}

/* =========================================
   SEÇÃO DE DESEMPENHO NA HOME
========================================= */
.home-stat-card {
    background-color: #F8F9FB;
    border-radius: 10px;
    padding: 20px;
    border: 1px solid #F0F0F0;
}

.home-stat-card p {
    font-size: 1.05rem;
    color: #444;
}

.stat-number {
    color: #4A3B7E;
    font-weight: 700;
    margin-bottom: 0;
}

.home-ranking-card {
    background-color: #F8F9FB;
    border-radius: 10px;
    border: 1px solid #F0F0F0;
}

.btn-ranking-active {
    background-color: var(--brand-green);
    color: #ffffff;
    border: none;
}

.btn-ranking-active:hover {
    filter: brightness(0.9);
}

.ranking-box {
    background-color: #FFFFFF;
}

/* =========================================
   PÁGINA DE PERFIL DO USUÁRIO
========================================= */
.profile-avatar {
    width: 90px;
    height: 90px;
    background-color: #B3B3B3;
    border-radius: 50%;
    display: inline-block;
}

.profile-name {
    font-size: 1.4rem;
    font-weight: 700;
    color: #111;
    margin-bottom: 2px;
}

.profile-email {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 8px;
}

.profile-since {
    font-size: 0.85rem;
    color: #999;
}

.plan-container-bg {
    background-color: #F9F9F9;
    border-radius: 8px;
    padding: 30px;
}

.plan-card-white {
    background-color: #FFFFFF;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

.date-box-plan {
    background-color: #F4F5F7;
    border-radius: 6px;
    padding: 8px 15px;
    min-width: 110px;
}

.alert-renew-plan {
    background-color: color-mix(in srgb, var(--brand-orange) 10%, white);
    border-radius: 8px;
    padding: 20px;
}

.alert-renew-text {
    color: var(--brand-orange);
    font-weight: 500;
    font-size: 0.95rem;
}

.btn-blue-plan {
    background-color: var(--brand-orange);
    color: white;
    font-weight: 500;
    border: none;
    border-radius: 6px;
    padding: 10px 20px;
    font-size: 0.9rem;
    transition: 0.2s;
}

.btn-blue-plan:hover {
    background-color: color-mix(in srgb, var(--brand-orange) 80%, black);
    color: white;
}

.plan-fine-print {
    font-size: 0.75rem;
    color: #888;
    line-height: 1.5;
}

.table-plan th {
    background-color: #F8F9FA;
    color: #444;
    font-weight: 500;
    font-size: 0.9rem;
    border: none;
}

.table-plan td {
    vertical-align: middle;
    border: none;
    color: #555;
    font-size: 0.9rem;
    padding: 15px 10px;
}

.badge-status-active {
    background-color: var(--brand-orange);
    color: white;
    font-weight: 500;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 0.8rem;
}

.profile-footer-link {
    font-size: 1.3rem;
    font-weight: 600;
    color: #111;
    text-decoration: none;
    display: block;
    margin-bottom: 15px;
    transition: color 0.2s;
}

.profile-footer-link:hover {
    color: var(--brand-orange);
}

/* =========================================
   ESTILOS DOS FILTROS E CONTROLES (QUESTÕES)
========================================= */
.custom-select {
    border-radius: 8px;
    border: 1px solid #dcdcdc;
    padding: 12px 15px; 
    color: #333;
    background-color: #ffffff;
    font-size: 1rem;
    width: 100%;
}

@media (max-width: 768px) {
    .custom-select {
        height: 50px; 
        font-size: 1.05rem;
    }
}

.btn-filtrar-custom {
    background-color: var(--brand-orange);
    color: white;
    font-size: 1.2rem;
    font-weight: 600;
    padding: 15px;
    border-radius: 8px;
    border: none;
    height: 50px;
}
.btn-filtrar-custom:hover {
    background-color: color-mix(in srgb, var(--brand-orange) 80%, black);
    color: white;
}

.font-size-controls {
    display: inline-flex;
    align-items: center;
    background-color: white;
    border: 1px solid #EAEAEA;
    border-radius: 8px;
    overflow: hidden;
}
.font-size-controls button {
    background-color: white;
    padding: 8px 20px; 
    font-size: 1.1rem;
}
.font-size-controls button:hover {
    background-color: #f8f9fa;
}

/* ==========================================================================
   ESTILOS GLOBAIS DA VITRINE DE PLANOS (PARA O SITE REAL E PREVIEW)
   ========================================================================== */
#wrapper-planos-preview, .vitrine-planos-real {
    border-radius: 32px;
    transition: all 0.4s;
}
#wrapper-planos-preview .plan-card, .vitrine-planos-real .plan-card {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 45px 35px;
    height: 100%;
    border-radius: 24px;
    margin: 0 10px;
}
#wrapper-planos-preview .plan-title, .vitrine-planos-real .plan-title {
    background: var(--brand-primary);
    color: white !important;
    display: inline-block;
    padding: 6px 18px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --------------------------------------------------------------------------
   MODELO 1: NEON GLOW & GLASSMORPHISM (Fundo Escuro Premium)
-------------------------------------------------------------------------- */
.model_1 {
    background-color: #030712 !important;
    padding: 60px 20px;
    position: relative;
    box-shadow: inset 0 0 100px rgba(0,0,0,0.8);
}
.model_1 .plan-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}
.model_1 .plan-card * { color: #ffffff !important; border-color: rgba(255,255,255,0.15) !important; }
.model_1 .plan-card p { color: #cbd5e1 !important; opacity: 1 !important; }
.model_1 .plan-card.destaque {
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand-primary) 30%, #0b1120) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
    border: 1px solid color-mix(in srgb, var(--brand-primary) 70%, transparent) !important;
    box-shadow: 0 30px 80px color-mix(in srgb, var(--brand-primary) 35%, rgba(0,0,0,0.8));
    transform: scale(1.05);
}
.model_1 .btn-plan {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
}
.model_1 .plan-card.destaque .btn-plan {
    background: #ffffff !important;
    color: #030712 !important;
    border: none !important;
    font-weight: 800 !important;
}
.model_1 .plan-features i { color: var(--brand-primary) !important; }

/* --------------------------------------------------------------------------
   MODELO 2: FINTECH DARK (Sólido Sofisticado)
-------------------------------------------------------------------------- */
.model_2 {
    background-color: #0b1120 !important;
    padding: 60px 20px;
}
.model_2 .plan-card {
    background: #111827 !important;
    border: 1px solid #1f2937 !important;
    color: #ffffff !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
}
.model_2 .plan-card * { color: #ffffff !important; border-color: #1f2937 !important; }
.model_2 .plan-card p { color: #9ca3af !important; opacity: 1 !important; }
.model_2 .plan-card.destaque {
    background: linear-gradient(180deg, #1f2937 0%, #111827 100%) !important;
    border-top: 4px solid var(--brand-secondary) !important;
    transform: translateY(-15px);
    box-shadow: 0 25px 50px rgba(0,0,0,0.5);
}
.model_2 .btn-plan { background: #374151 !important; color: #ffffff !important; }
.model_2 .plan-card.destaque .btn-plan { background: var(--brand-primary) !important; color: #ffffff !important; border: none !important; }

/* --------------------------------------------------------------------------
   MODELO 3: NEOMORPHISM SOFT (Modo Claro/Escuro Inteligente)
-------------------------------------------------------------------------- */
.model_3 {
    background-color: #f1f5f9 !important;
    padding: 60px 20px;
}
body.dark-mode .model_3 { background-color: #030712 !important; }
.model_3 .plan-card {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08) !important;
    color: #0f172a !important;
}
.model_3 .plan-card * { color: #0f172a !important; border-color: #e2e8f0 !important; }
.model_3 .plan-card p { color: #475569 !important; opacity: 1 !important; }
body.dark-mode .model_3 .plan-card { background: #111827 !important; border-color: #1f2937 !important; color: #ffffff !important; }
body.dark-mode .model_3 .plan-card * { color: #ffffff !important; border-color: #374151 !important; }
.model_3 .plan-card.destaque {
    box-shadow: 0 25px 60px rgba(0,0,0,0.15) !important;
    transform: scale(1.04);
    z-index: 2;
    border: 2px solid var(--brand-primary) !important;
}
.model_3 .plan-card.invertido { background: #0f172a !important; color: #ffffff !important; border: none !important; }
.model_3 .plan-card.invertido * { color: #ffffff !important; }
.model_3 .btn-plan { background: #0f172a !important; color: #ffffff !important; }
body.dark-mode .model_3 .btn-plan { background: #374151 !important; color: #ffffff !important; }
.model_3 .plan-card.destaque .btn-plan {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)) !important;
    color: #ffffff !important;
    border: none !important;
}

/* --------------------------------------------------------------------------
   MODELO 4: OVERLAP CLEAN (Floating Modern)
-------------------------------------------------------------------------- */
.model_4 {
    background-color: #ffffff !important;
    padding: 60px 20px;
}
body.dark-mode .model_4 { background-color: #030712 !important; }
.model_4 .plan-card {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}
.model_4 .plan-card * { color: #0f172a !important; border-color: #e2e8f0 !important; }
.model_4 .plan-card p { color: #475569 !important; opacity: 1 !important; }
body.dark-mode .model_4 .plan-card { background: #111827 !important; border-color: #1f2937 !important; color: #ffffff !important; }
body.dark-mode .model_4 .plan-card * { color: #ffffff !important; border-color: #374151 !important; }
.model_4 .plan-card.destaque {
    background: linear-gradient(135deg, var(--brand-primary) 0%, color-mix(in srgb, var(--brand-primary) 80%, #000) 100%) !important;
    color: #ffffff !important;
    border: none !important;
    transform: scale(1.07);
    z-index: 10;
    box-shadow: 0 25px 50px color-mix(in srgb, var(--brand-primary) 35%, rgba(0,0,0,0.25));
}
.model_4 .plan-card.destaque * { color: #ffffff !important; border-color: rgba(255,255,255,0.3) !important; }
.model_4 .btn-plan { background: #f1f5f9 !important; color: var(--brand-primary) !important; font-weight: 800 !important; }
body.dark-mode .model_4 .btn-plan { background: #374151 !important; color: #ffffff !important; }
.model_4 .plan-card.destaque .btn-plan { background: #ffffff !important; color: var(--brand-primary) !important; border: none !important; }

/* ==========================================================================
   DESIGN SYSTEM: GRADIENTES ATMOSFÉRICOS E GLASSMORPHISM (LIGHT & DARK)
   ========================================================================== */

:root {
    --glass-bg-light: rgba(255, 255, 255, 0.75);
    --glass-border-light: rgba(226, 232, 240, 0.8);
    --shadow-soft-light: 0 20px 40px rgba(0, 0, 0, 0.04);
}

body.dark-mode {
    --glass-bg-dark: rgba(15, 23, 42, 0.65);
    --glass-border-dark: rgba(255, 255, 255, 0.08);
    --shadow-soft-dark: 0 20px 40px rgba(0, 0, 0, 0.6);
}

/* --------------------------------------------------------------------------
   1. FUNDOS COM GRADIENTES MESH (ATMOSFERA SUAVE)
   -------------------------------------------------------------------------- */
body {
    background-color: #f8fafc;
    background-image: 
        radial-gradient(at 0% 0%, color-mix(in srgb, var(--brand-primary) 8%, transparent) 0px, transparent 50%),
        radial-gradient(at 100% 0%, color-mix(in srgb, var(--brand-secondary) 6%, transparent) 0px, transparent 50%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

body.dark-mode {
    background-color: #030712 !important;
    background-image: 
        radial-gradient(at 15% 15%, color-mix(in srgb, var(--brand-primary) 18%, transparent) 0px, transparent 55%),
        radial-gradient(at 85% 85%, color-mix(in srgb, var(--brand-secondary) 12%, transparent) 0px, transparent 55%),
        radial-gradient(at 50% 50%, rgba(15, 23, 42, 0.8) 0px, transparent 100%) !important;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* --------------------------------------------------------------------------
   2. EFEITOS DE VIDRO (GLASSMORPHISM) EM CARDS E CONTAINERS
   -------------------------------------------------------------------------- */
.card, .ranking-container, .table-responsive, .questao-box, .filter-box {
    background: var(--glass-bg-light) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border-light) !important;
    box-shadow: var(--shadow-soft-light) !important;
}

body.dark-mode .card, 
body.dark-mode .ranking-container, 
body.dark-mode .table-responsive, 
body.dark-mode .questao-box, 
body.dark-mode .filter-box {
    background: var(--glass-bg-dark) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border-dark) !important;
    box-shadow: var(--shadow-soft-dark) !important;
}

/* --------------------------------------------------------------------------
   3. BOTÕES COM ILUMINAÇÃO E GRADIENTES MODERNOS
   -------------------------------------------------------------------------- */
.btn-primary, .btn-custom, .sidebar-link.active {
    background: linear-gradient(135deg, var(--brand-primary) 0%, color-mix(in srgb, var(--brand-primary) 80%, #000) 100%) !important;
    border: none !important;
    box-shadow: 0 4px 15px color-mix(in srgb, var(--brand-primary) 35%, transparent) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-primary:hover, .btn-custom:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px color-mix(in srgb, var(--brand-primary) 50%, transparent) !important;
}

/* --------------------------------------------------------------------------
   4. TIPOGRAFIA E GLOW DE TÍTULOS
   -------------------------------------------------------------------------- */
h1, h2, h3, .hero-title, .pricing-header h2 {
    letter-spacing: -0.03em;
}

body.dark-mode h1, body.dark-mode h2, body.dark-mode h3 {
    text-shadow: 0 2px 20px rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   DESIGN SYSTEM: GRADIENTES ATMOSFÉRICOS (MESH) & GLASSMORPHISM MODERN
   ========================================================================== */

/* 1. BACKGROUND COM GRADIENTES FLUIDOS E MANCHAS DE LUZ (MODO CLARO) */
body {
    background-color: #fafbfc !important;
    background-image: 
        radial-gradient(circle at 10% 15%, color-mix(in srgb, var(--brand-primary) 12%, transparent) 0px, transparent 45%),
        radial-gradient(circle at 90% 85%, color-mix(in srgb, var(--brand-secondary) 10%, transparent) 0px, transparent 45%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.8) 0px, transparent 100%) !important;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* 2. BACKGROUND COM GRADIENTES FLUIDOS E MANCHAS DE LUZ (MODO ESCURO) */
body.dark-mode {
    background-color: #030712 !important;
    background-image: 
        radial-gradient(circle at 15% 15%, color-mix(in srgb, var(--brand-primary) 22%, transparent) 0px, transparent 50%),
        radial-gradient(circle at 85% 85%, color-mix(in srgb, var(--brand-secondary) 18%, transparent) 0px, transparent 50%),
        radial-gradient(circle at 50% 30%, rgba(15, 23, 42, 0.9) 0px, transparent 100%) !important;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* 3. TRANSFORMAÇÃO DOS CARDS EM GLASSMORPHISM MODERNO */
.card, .ranking-container, .table-responsive, .questao-box, .filter-box, .materia-bloco {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.03), 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.06) !important;
}

body.dark-mode .card, 
body.dark-mode .ranking-container, 
body.dark-mode .table-responsive, 
body.dark-mode .questao-box, 
body.dark-mode .filter-box,
body.dark-mode .materia-bloco {
    background: rgba(17, 24, 39, 0.65) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .card:hover {
    border-color: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.7) !important;
}

/* 4. BOTÕES E ELEMENTOS DE DESTAQUE COM GRADIENTES VIVOS */
.btn-primary, .btn-custom, .sidebar-link.active {
    background: linear-gradient(135deg, var(--brand-primary) 0%, color-mix(in srgb, var(--brand-primary) 75%, #000) 100%) !important;
    border: none !important;
    box-shadow: 0 8px 25px color-mix(in srgb, var(--brand-primary) 35%, transparent) !important;
}

.btn-primary:hover, .btn-custom:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 0 12px 35px color-mix(in srgb, var(--brand-primary) 50%, transparent) !important;
}

/* 5. AJUSTE DA BARRA DE CRONOGRAMA / DESTAQUES */
.bg-orange, [style*="background-color: #fa6e1d"], [style*="background: #fa6e1d"] {
    background: linear-gradient(135deg, var(--brand-primary) 0%, color-mix(in srgb, var(--brand-primary) 80%, #ff5a1f) 100%) !important;
    box-shadow: 0 10px 30px color-mix(in srgb, var(--brand-primary) 40%, transparent);
}

/* ==========================================================================
   CONTROLE DO BLOCO DE FUNDO DO HERO (TRANSPARÊNCIA PARA GRADIENTES)
   ========================================================================== */
body[data-hero-box="0"] .hero-section,
body[data-hero-box="0"] .banner-hero,
body[data-hero-box="0"] #hero,
body[data-hero-box="0"] .hero-container,
body[data-hero-box="0"] .hero-banner-simulados {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* ========================================================================== 
   VITRINE DE PLANOS — FONTE ÚNICA PARA O SITE REAL E O EDITOR
   ========================================================================== */
.vitrine-planos-real {
    --plan-primary: var(--brand-primary);
    --plan-secondary: var(--brand-secondary);
    --plan-on-primary: #ffffff;
    border-radius: 32px;
    isolation: isolate;
    overflow: visible;
    padding: 4rem 1.25rem !important;
    transition: background .35s ease;
}
.vitrine-planos-real .plan-card {
    min-height: 490px;
    height: 100%;
    margin: 0 10px;
    padding: 42px 34px;
    border-radius: 26px;
    overflow: visible;
    transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease, border-color .35s ease;
}
.vitrine-planos-real .plan-card:hover { transform: translateY(-7px); }
.vitrine-planos-real .plan-card.destaque:hover { transform: translateY(-16px) scale(1.035); }
.vitrine-planos-real .plan-title { display: inline-block; padding: 7px 16px; border-radius: 999px; font-size: .75rem; font-weight: 800; letter-spacing: .08em; margin-bottom: 20px; text-transform: uppercase; }
.vitrine-planos-real .pmma-economia-badge { margin: -8px 0 4px; font-size: .78rem; font-weight: 700; }
.vitrine-planos-real .plan-features { position: relative; z-index: 1; }
.vitrine-planos-real .plan-features i { width: 18px; text-align: center; }

/* Informações de parcelamento e valor total nos cards de planos. */
.vitrine-planos-real .plan-price-row,
.pricing-price-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 7px;
    margin: 20px 0 5px;
}

.vitrine-planos-real .plan-price-row .plan-price,
.pricing-price-row .pricing-price {
    margin: 0 !important;
}

.vitrine-planos-real .plan-installments,
.pricing-installments {
    display: inline-block;
    font-size: .78rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: .01em;
    opacity: .78;
}

.vitrine-planos-real .plan-full-price,
.pricing-full-price {
    margin: 0 0 14px;
    font-size: .84rem;
    font-weight: 700;
    line-height: 1.35;
    opacity: .78;
}

.pricing-price-row { margin-top: 0; }
.pricing-full-price { color: #64748b; }

@media (max-width: 576px) {
    .vitrine-planos-real .plan-price-row { align-items: flex-start; }
    .vitrine-planos-real .plan-installments { width: 100%; }
}

/* 1. Aurora Glass */
.vitrine-planos-real.model_1 { background: radial-gradient(circle at 10% 20%, color-mix(in srgb, var(--plan-primary) 25%, transparent), transparent 40%), radial-gradient(circle at 90% 80%, color-mix(in srgb, var(--plan-secondary) 20%, transparent), transparent 40%), #030712 !important; }
.vitrine-planos-real.model_1 #tit_planos { color: #fff !important; }
.vitrine-planos-real.model_1 #sub_planos { color: #d7d4ff !important; }
.vitrine-planos-real.model_1 .plan-card { position: relative; background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.035)) !important; border: 1px solid rgba(255,255,255,.18) !important; color: #fff !important; box-shadow: 0 20px 45px rgba(0,0,0,.36); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.vitrine-planos-real.model_1 .plan-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: .28; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.65) 1px, transparent 1px); background-size: 11px 11px; mask-image: linear-gradient(to bottom, #000, transparent 42%); }
.vitrine-planos-real.model_1 .plan-card * { position: relative; z-index: 1; color: #fff !important; border-color: rgba(255,255,255,.16) !important; }
.vitrine-planos-real.model_1 .plan-card p { color: #d7d4ff !important; }
.vitrine-planos-real.model_1 .plan-card.destaque { background: linear-gradient(160deg, color-mix(in srgb, var(--plan-primary) 82%, var(--plan-secondary)), #151033 72%) !important; border-color: rgba(255,255,255,.48) !important; box-shadow: 0 28px 75px color-mix(in srgb, var(--plan-primary) 42%, transparent); transform: translateY(-12px) scale(1.035); }
.vitrine-planos-real.model_1 .btn-plan { background: rgba(255,255,255,.14) !important; border: 1px solid rgba(255,255,255,.36) !important; color: #fff !important; }
.vitrine-planos-real.model_1 .plan-card.destaque .btn-plan { background: #fff !important; border: 0 !important; color: #15102d !important; }
.vitrine-planos-real.model_1 .plan-features i { color: color-mix(in srgb, var(--plan-primary) 58%, #fff) !important; }

/* 2. Grid Light */
.vitrine-planos-real.model_2 { background-color: #f8fafc !important; background-image: linear-gradient(rgba(15,23,42,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.09) 1px, transparent 1px) !important; background-size: 32px 32px !important; }
.vitrine-planos-real.model_2 #tit_planos { color: #172033 !important; }
.vitrine-planos-real.model_2 .plan-card { background: rgba(255,255,255,.93) !important; border: 1px solid rgba(15,23,42,.1) !important; color: #172033 !important; box-shadow: 0 18px 42px rgba(15,23,42,.11); }
.vitrine-planos-real.model_2 .plan-card * { color: #172033 !important; border-color: #e2e8f0 !important; }
.vitrine-planos-real.model_2 .plan-card p, .vitrine-planos-real.model_2 #sub_planos { color: #64748b !important; }
.vitrine-planos-real.model_2 .plan-card.destaque { background: linear-gradient(160deg, color-mix(in srgb, var(--plan-primary) 74%, var(--plan-secondary)), color-mix(in srgb, var(--plan-primary) 52%, #fff)) !important; border-color: color-mix(in srgb, var(--plan-primary) 55%, #fff) !important; box-shadow: 0 25px 55px color-mix(in srgb, var(--plan-primary) 26%, transparent); transform: translateY(-14px) scale(1.035); }
.vitrine-planos-real.model_2 .plan-card.destaque * { color: var(--plan-on-primary) !important; border-color: color-mix(in srgb, var(--plan-on-primary) 32%, transparent) !important; }
.vitrine-planos-real.model_2 .btn-plan { background: #172033 !important; color: #fff !important; }
.vitrine-planos-real.model_2 .plan-card.destaque .btn-plan { background: #fff !important; color: #172033 !important; }
.vitrine-planos-real.model_2 .plan-features i { color: var(--plan-primary) !important; }
.vitrine-planos-real.model_2 .plan-card.destaque .plan-features i { color: var(--plan-on-primary) !important; }

/* 3. Emerald Pro */
.vitrine-planos-real.model_3 { background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--plan-primary) 24%, transparent), transparent 42%), #081312 !important; }
.vitrine-planos-real.model_3 #tit_planos { color: #f8fafc !important; }
.vitrine-planos-real.model_3 #sub_planos { color: #a8b8b3 !important; }
.vitrine-planos-real.model_3 .plan-card { background: linear-gradient(180deg, color-mix(in srgb, var(--plan-secondary) 22%, #15201f), #0c1413) !important; border: 1px solid color-mix(in srgb, var(--plan-secondary) 42%, #29443f) !important; color: #f8fafc !important; box-shadow: 0 18px 40px rgba(0,0,0,.34); }
.vitrine-planos-real.model_3 .plan-card * { color: #f8fafc !important; border-color: color-mix(in srgb, var(--plan-secondary) 42%, #29443f) !important; }
.vitrine-planos-real.model_3 .plan-card p { color: #a8b8b3 !important; }
.vitrine-planos-real.model_3 .plan-card.destaque { background: linear-gradient(155deg, color-mix(in srgb, var(--plan-primary) 74%, #0e261f), #101c1a 74%) !important; border-color: color-mix(in srgb, var(--plan-primary) 62%, #b7f7dd) !important; box-shadow: 0 28px 72px color-mix(in srgb, var(--plan-primary) 35%, transparent); transform: translateY(-16px) scale(1.04); }
.vitrine-planos-real.model_3 .btn-plan { background: #1d322e !important; color: #fff !important; }
.vitrine-planos-real.model_3 .plan-card.destaque .btn-plan { background: var(--plan-primary) !important; color: var(--plan-on-primary) !important; }
.vitrine-planos-real.model_3 .plan-features i { color: color-mix(in srgb, var(--plan-primary) 65%, #fff) !important; }

/* 4. Periwinkle Focus */
.vitrine-planos-real.model_4 { background: linear-gradient(180deg, #f7f8ff, #e8ecff) !important; }
.vitrine-planos-real.model_4 #tit_planos { color: #20284b !important; }
.vitrine-planos-real.model_4 .plan-card { background: rgba(255,255,255,.92) !important; border: 1px solid #e4e7f5 !important; color: #20284b !important; box-shadow: 0 12px 28px rgba(73,84,151,.11); }
.vitrine-planos-real.model_4 .plan-card * { color: #20284b !important; border-color: #e4e7f5 !important; }
.vitrine-planos-real.model_4 .plan-card p, .vitrine-planos-real.model_4 #sub_planos { color: #6c7390 !important; }
.vitrine-planos-real.model_4 .plan-card.destaque { background: linear-gradient(165deg, color-mix(in srgb, var(--plan-primary) 62%, #dbeafe), color-mix(in srgb, var(--plan-primary) 82%, var(--plan-secondary))) !important; border-color: transparent !important; box-shadow: 0 28px 55px color-mix(in srgb, var(--plan-primary) 36%, transparent); transform: translateY(-19px) scale(1.055); }
.vitrine-planos-real.model_4 .plan-card.destaque * { color: var(--plan-on-primary) !important; border-color: color-mix(in srgb, var(--plan-on-primary) 32%, transparent) !important; }
.vitrine-planos-real.model_4 .btn-plan { background: #eff1fb !important; color: #4652a3 !important; }
.vitrine-planos-real.model_4 .plan-card.destaque .btn-plan { background: #fff !important; color: #20284b !important; }
.vitrine-planos-real.model_4 .plan-features i { color: var(--plan-primary) !important; }
.vitrine-planos-real.model_4 .plan-card.destaque .plan-features i { color: var(--plan-on-primary) !important; }

/* 5. Graphite */
.vitrine-planos-real.model_5 { background: linear-gradient(135deg, #0b0d0e, #15191c) !important; }
.vitrine-planos-real.model_5 #tit_planos { color: #f8fafc !important; }
.vitrine-planos-real.model_5 #sub_planos { color: #a4adb6 !important; }
.vitrine-planos-real.model_5 .plan-card { background: #171b1f !important; border: 1px solid #30363d !important; color: #f8fafc !important; box-shadow: 0 16px 38px rgba(0,0,0,.42); border-radius: 18px !important; }
.vitrine-planos-real.model_5 .plan-card * { color: #f8fafc !important; border-color: #30363d !important; }
.vitrine-planos-real.model_5 .plan-card p { color: #a4adb6 !important; }
.vitrine-planos-real.model_5 .plan-card.destaque { background: linear-gradient(160deg, color-mix(in srgb, var(--plan-secondary) 34%, #20272b), #111518) !important; border-top: 4px solid var(--plan-primary) !important; box-shadow: 0 26px 58px rgba(0,0,0,.55); transform: translateY(-13px); }
.vitrine-planos-real.model_5 .btn-plan { background: #2c343a !important; color: #fff !important; border-radius: 8px !important; }
.vitrine-planos-real.model_5 .plan-card.destaque .btn-plan { background: var(--plan-primary) !important; color: var(--plan-on-primary) !important; }
.vitrine-planos-real.model_5 .plan-features i { color: color-mix(in srgb, var(--plan-primary) 65%, #fff) !important; }

/* 6. Sunset Mesh */
.vitrine-planos-real.model_6 { background: radial-gradient(circle at 8% 8%, color-mix(in srgb, var(--plan-primary) 24%, transparent), transparent 34%), radial-gradient(circle at 92% 88%, color-mix(in srgb, var(--plan-secondary) 24%, transparent), transparent 36%), #fff7ed !important; }
.vitrine-planos-real.model_6 #tit_planos { color: #3b1b12 !important; }
.vitrine-planos-real.model_6 .plan-card { background: rgba(255,255,255,.9) !important; border: 1px solid color-mix(in srgb, var(--plan-primary) 22%, #fff) !important; color: #3b1b12 !important; box-shadow: 0 16px 36px rgba(146,64,14,.12); }
.vitrine-planos-real.model_6 .plan-card * { color: #3b1b12 !important; border-color: color-mix(in srgb, var(--plan-primary) 20%, #fff) !important; }
.vitrine-planos-real.model_6 .plan-card p, .vitrine-planos-real.model_6 #sub_planos { color: #885148 !important; }
.vitrine-planos-real.model_6 .plan-card.destaque { background: linear-gradient(160deg, color-mix(in srgb, var(--plan-primary) 74%, var(--plan-secondary)), color-mix(in srgb, var(--plan-primary) 46%, #fff)) !important; border-color: rgba(255,255,255,.75) !important; box-shadow: 0 28px 62px color-mix(in srgb, var(--plan-primary) 32%, transparent); transform: translateY(-15px) scale(1.04); }
.vitrine-planos-real.model_6 .plan-card.destaque * { color: var(--plan-on-primary) !important; border-color: color-mix(in srgb, var(--plan-on-primary) 36%, transparent) !important; }
.vitrine-planos-real.model_6 .btn-plan { background: #3b1b12 !important; color: #fff !important; }
.vitrine-planos-real.model_6 .plan-card.destaque .btn-plan { background: #fff !important; color: #3b1b12 !important; }
.vitrine-planos-real.model_6 .plan-features i { color: var(--plan-primary) !important; }
.vitrine-planos-real.model_6 .plan-card.destaque .plan-features i { color: var(--plan-on-primary) !important; }

/* 7. Academy Luxe */
.vitrine-planos-real.model_7 { background: linear-gradient(145deg, #fffbeb, #f4ecd4) !important; }
.vitrine-planos-real.model_7 #tit_planos { color: var(--plan-secondary) !important; }
.vitrine-planos-real.model_7 .plan-card { background: rgba(255,255,255,.88) !important; border: 1px solid #dfd3b5 !important; color: var(--plan-secondary) !important; box-shadow: 0 15px 34px rgba(23,37,84,.13); border-radius: 20px !important; }
.vitrine-planos-real.model_7 .plan-card * { color: var(--plan-secondary) !important; border-color: #e8dfc8 !important; }
.vitrine-planos-real.model_7 .plan-card p, .vitrine-planos-real.model_7 #sub_planos { color: #64748b !important; }
.vitrine-planos-real.model_7 .plan-title { background: var(--plan-secondary) !important; color: var(--plan-on-secondary, #ffffff) !important; }
.vitrine-planos-real.model_7 .plan-card.destaque { background: linear-gradient(165deg, var(--plan-primary), var(--plan-secondary)) !important; border-color: var(--plan-primary) !important; box-shadow: 0 27px 58px color-mix(in srgb, var(--plan-secondary) 28%, transparent); transform: translateY(-14px) scale(1.035); }
.vitrine-planos-real.model_7 .plan-card.destaque * { color: var(--plan-on-primary) !important; border-color: color-mix(in srgb, var(--plan-on-primary) 24%, transparent) !important; }
.vitrine-planos-real.model_7 .plan-card.destaque .plan-title, .vitrine-planos-real.model_7 .plan-card.destaque .btn-plan { background: color-mix(in srgb, var(--plan-primary) 70%, #fff) !important; color: var(--plan-on-primary) !important; }
.vitrine-planos-real.model_7 .btn-plan { background: var(--plan-secondary) !important; color: var(--plan-on-secondary, #ffffff) !important; border-radius: 10px !important; }
.vitrine-planos-real.model_7 .plan-features i { color: var(--plan-primary) !important; }
.vitrine-planos-real.model_7 .plan-card.destaque .plan-features i { color: var(--plan-on-primary) !important; }

/* Contraste dos modelos claros em modo noturno */
body.dark-mode .vitrine-planos-real.model_2 { background-color: #0f172a !important; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px) !important; }
body.dark-mode .vitrine-planos-real.model_2 #tit_planos, body.dark-mode .vitrine-planos-real.model_4 #tit_planos, body.dark-mode .vitrine-planos-real.model_6 #tit_planos, body.dark-mode .vitrine-planos-real.model_7 #tit_planos { color: #f8fafc !important; }
body.dark-mode .vitrine-planos-real.model_2 #sub_planos, body.dark-mode .vitrine-planos-real.model_4 #sub_planos, body.dark-mode .vitrine-planos-real.model_6 #sub_planos, body.dark-mode .vitrine-planos-real.model_7 #sub_planos { color: #cbd5e1 !important; }
body.dark-mode .vitrine-planos-real.model_2 .plan-card, body.dark-mode .vitrine-planos-real.model_4 .plan-card { background: #162033 !important; border-color: #334155 !important; box-shadow: 0 18px 42px rgba(0,0,0,.35); }
body.dark-mode .vitrine-planos-real.model_2 .plan-card *, body.dark-mode .vitrine-planos-real.model_4 .plan-card * { color: #f8fafc !important; border-color: #334155 !important; }
body.dark-mode .vitrine-planos-real.model_2 .plan-card p, body.dark-mode .vitrine-planos-real.model_4 .plan-card p { color: #cbd5e1 !important; }
body.dark-mode .vitrine-planos-real.model_2 .btn-plan, body.dark-mode .vitrine-planos-real.model_4 .btn-plan { background: var(--plan-secondary) !important; color: #fff !important; }
body.dark-mode .vitrine-planos-real.model_2 .plan-card.destaque *, body.dark-mode .vitrine-planos-real.model_4 .plan-card.destaque * { color: var(--plan-on-primary) !important; border-color: color-mix(in srgb, var(--plan-on-primary) 32%, transparent) !important; }

body.dark-mode .vitrine-planos-real.model_6 { background: radial-gradient(circle at 8% 8%, color-mix(in srgb, var(--plan-primary) 22%, transparent), transparent 34%), #1d1118 !important; }
body.dark-mode .vitrine-planos-real.model_6 .plan-card { background: #2a1720 !important; border-color: color-mix(in srgb, var(--plan-primary) 32%, #334155) !important; box-shadow: 0 16px 36px rgba(0,0,0,.36); }
body.dark-mode .vitrine-planos-real.model_6 .plan-card * { color: #fff7ed !important; border-color: #5b2c3a !important; }
body.dark-mode .vitrine-planos-real.model_6 .plan-card p { color: #fed7cc !important; }
body.dark-mode .vitrine-planos-real.model_6 .btn-plan { background: var(--plan-secondary) !important; color: #fff !important; }
body.dark-mode .vitrine-planos-real.model_6 .plan-card.destaque * { color: var(--plan-on-primary) !important; border-color: color-mix(in srgb, var(--plan-on-primary) 36%, transparent) !important; }

body.dark-mode .vitrine-planos-real.model_7 { background: linear-gradient(145deg, #0f172a, #172554) !important; }
body.dark-mode .vitrine-planos-real.model_7 .plan-card { background: #16213a !important; border-color: #475569 !important; box-shadow: 0 15px 34px rgba(0,0,0,.36); }
body.dark-mode .vitrine-planos-real.model_7 .plan-card * { color: #f8fafc !important; border-color: #475569 !important; }
body.dark-mode .vitrine-planos-real.model_7 .plan-card p { color: #cbd5e1 !important; }
body.dark-mode .vitrine-planos-real.model_7 .plan-title { background: var(--plan-secondary) !important; color: var(--plan-on-secondary, #ffffff) !important; }
body.dark-mode .vitrine-planos-real.model_7 .btn-plan { background: var(--plan-secondary) !important; color: var(--plan-on-secondary, #ffffff) !important; }
body.dark-mode .vitrine-planos-real.model_7 .plan-card.destaque * { color: var(--plan-on-primary) !important; border-color: color-mix(in srgb, var(--plan-on-primary) 24%, transparent) !important; }

/* Sem painel grande atrás das ofertas: somente os cards recebem o destaque visual. */
#section_planos.vitrine-planos-real {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}

/* Os sete estilos atuam somente nos cards. Nunca no painel externo da vitrine. */
#section_planos.vitrine-planos-real.model_1,
#section_planos.vitrine-planos-real.model_2,
#section_planos.vitrine-planos-real.model_3,
#section_planos.vitrine-planos-real.model_4,
#section_planos.vitrine-planos-real.model_5,
#section_planos.vitrine-planos-real.model_6,
#section_planos.vitrine-planos-real.model_7,
body.dark-mode #section_planos.vitrine-planos-real.model_1,
body.dark-mode #section_planos.vitrine-planos-real.model_2,
body.dark-mode #section_planos.vitrine-planos-real.model_3,
body.dark-mode #section_planos.vitrine-planos-real.model_4,
body.dark-mode #section_planos.vitrine-planos-real.model_5,
body.dark-mode #section_planos.vitrine-planos-real.model_6,
body.dark-mode #section_planos.vitrine-planos-real.model_7 {
    background: transparent !important;
    background-image: none !important;
}
#section_planos.vitrine-planos-real #tit_planos { color: var(--plan-secondary) !important; }
#section_planos.vitrine-planos-real #sub_planos { color: #475569 !important; }

/* Aurora precisa de base opaca quando deixa de ter o fundo escuro da seção. */
#section_planos.vitrine-planos-real.model_1 .plan-card:not(.destaque) {
    background: linear-gradient(145deg, rgba(30,41,59,.98), rgba(15,23,42,.98)) !important;
}

body.dark-mode #section_planos.vitrine-planos-real #tit_planos { color: #f8fafc !important; }
body.dark-mode #section_planos.vitrine-planos-real #sub_planos { color: #cbd5e1 !important; }

/* ========================================================================== 
   BANNER HERO — IMAGEM ENVIADA
   A imagem é renderizada em sua proporção real para não sofrer zoom ou corte.
   ========================================================================== */
.hero-section[data-tem-banner="1"] {
    position: relative;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    isolation: isolate;
    background-image: none !important;
}

.hero-banner-image {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    object-fit: contain;
}

.hero-section[data-tem-banner="1"] > .container {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    max-width: none;
    height: 100%;
    pointer-events: none;
}

.hero-section[data-tem-banner="1"] > .container :is(a, button, input, select, textarea) {
    pointer-events: auto;
}

.hero-section[data-tem-banner="1"] > .container > .row {
    min-height: 100%;
    align-content: center;
}

@media (max-width: 768px) {
    .hero-section[data-tem-banner="1"] { padding: 0 !important; }
}

/* ========================================================================== 
   BANNER HERO — GRADIENTES AUTOMÁTICOS DO TEMA
   Sem imagem, o banner usa luzes suaves derivadas das cores do tema.
   ========================================================================== */
.hero-section[data-tem-banner="0"] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 440px;
    align-items: center;
    box-sizing: border-box;
    background-image: none !important;
}

.hero-section[data-tem-banner="0"] > .container {
    position: relative;
    z-index: 1;
    width: 100%;
}

.hero-section[data-tem-banner="0"]::before,
.hero-section[data-tem-banner="0"]::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* Aurora: cenário escuro, elegante e com luzes difusas. */
.hero-section[data-tem-banner="0"][data-gradiente-hero="aurora"] {
    background-color: #080b19 !important;
}
.hero-section[data-tem-banner="0"][data-gradiente-hero="aurora"]::before {
    background:
        radial-gradient(ellipse 56% 105% at -6% 112%, color-mix(in srgb, var(--hero-primary) 58%, transparent), transparent 72%),
        radial-gradient(ellipse 46% 90% at 88% 2%, color-mix(in srgb, var(--hero-secondary) 52%, transparent), transparent 68%),
        radial-gradient(circle at 57% 44%, color-mix(in srgb, var(--hero-primary) 15%, transparent), transparent 35%),
        linear-gradient(120deg, #070a16 0%, #11162a 50%, #070914 100%);
}
.hero-section[data-tem-banner="0"][data-gradiente-hero="aurora"]::after {
    opacity: .46;
    background: linear-gradient(114deg, transparent 19%, rgba(255,255,255,.055) 42%, transparent 62%);
}

/* Névoa: versão clara com profundidade, sem perder sobriedade. */
.hero-section[data-tem-banner="0"][data-gradiente-hero="nevoa"] {
    background-color: #f4f7ff !important;
}
.hero-section[data-tem-banner="0"][data-gradiente-hero="nevoa"]::before {
    background:
        radial-gradient(ellipse 46% 122% at 21% 108%, color-mix(in srgb, var(--hero-primary) 31%, transparent), transparent 70%),
        radial-gradient(circle at 76% 22%, color-mix(in srgb, var(--hero-secondary) 29%, transparent), transparent 34%),
        radial-gradient(circle at 58% 70%, color-mix(in srgb, var(--hero-primary) 14%, transparent), transparent 34%),
        linear-gradient(132deg, #ffffff 0%, #f7f9ff 48%, #edf3ff 100%);
}
.hero-section[data-tem-banner="0"][data-gradiente-hero="nevoa"]::after {
    opacity: .28;
    background-image: linear-gradient(color-mix(in srgb, var(--hero-secondary) 15%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--hero-secondary) 15%, transparent) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: linear-gradient(to left, transparent, #000 35%, transparent 90%);
}

/* Horizonte: contraste profundo e dois pontos de cor, como uma aurora distante. */
.hero-section[data-tem-banner="0"][data-gradiente-hero="horizonte"] {
    background-color: #0b1020 !important;
}
.hero-section[data-tem-banner="0"][data-gradiente-hero="horizonte"]::before {
    background:
        radial-gradient(ellipse 58% 96% at 2% 112%, color-mix(in srgb, var(--hero-primary) 62%, transparent), transparent 69%),
        radial-gradient(ellipse 42% 84% at 103% 10%, color-mix(in srgb, var(--hero-secondary) 49%, transparent), transparent 69%),
        linear-gradient(165deg, #080b17 0%, #111932 51%, #080b17 100%);
}
.hero-section[data-tem-banner="0"][data-gradiente-hero="horizonte"]::after {
    opacity: .58;
    background: linear-gradient(to bottom, transparent 58%, color-mix(in srgb, var(--hero-primary) 23%, transparent) 100%);
}

/* Foco neon: halo macio; sem arcos ou círculos recortados. */
.hero-section[data-tem-banner="0"][data-gradiente-hero="orbita"] {
    background-color: #070817 !important;
}
.hero-section[data-tem-banner="0"][data-gradiente-hero="orbita"]::before {
    background:
        radial-gradient(ellipse 54% 142% at 72% 108%, color-mix(in srgb, var(--hero-primary) 58%, transparent), transparent 64%),
        radial-gradient(ellipse 45% 100% at 74% 10%, color-mix(in srgb, var(--hero-secondary) 42%, transparent), transparent 62%),
        radial-gradient(circle at 39% 48%, color-mix(in srgb, var(--hero-secondary) 14%, transparent), transparent 29%),
        linear-gradient(136deg, #070817 0%, #0c1024 52%, #080713 100%);
}
.hero-section[data-tem-banner="0"][data-gradiente-hero="orbita"]::after {
    opacity: .32;
    background: linear-gradient(112deg, transparent 31%, color-mix(in srgb, var(--hero-primary) 18%, transparent) 49%, transparent 68%);
    filter: blur(18px);
}

/* Mosaico: faixas translúcidas, discretas e inspiradas em interfaces premium. */
.hero-section[data-tem-banner="0"][data-gradiente-hero="mosaico"] {
    background-color: #101224 !important;
}
.hero-section[data-tem-banner="0"][data-gradiente-hero="mosaico"]::before {
    background:
        linear-gradient(117deg, transparent 0%, transparent 34%, color-mix(in srgb, var(--hero-primary) 32%, transparent) 40%, transparent 57%),
        linear-gradient(297deg, transparent 0%, transparent 43%, color-mix(in srgb, var(--hero-secondary) 29%, transparent) 50%, transparent 66%),
        radial-gradient(circle at 82% 17%, color-mix(in srgb, var(--hero-primary) 37%, transparent), transparent 38%),
        linear-gradient(140deg, #090b17, #16152b 53%, #090b17);
}
.hero-section[data-tem-banner="0"][data-gradiente-hero="mosaico"]::after {
    opacity: .38;
    background-image: linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 74px 100%;
    mask-image: linear-gradient(to right, transparent, #000 26%, #000 78%, transparent);
}

/* Grade tecnológica: linhas finas e uma iluminação central controlada. */
.hero-section[data-tem-banner="0"][data-gradiente-hero="grade"] {
    background-color: #0a1020 !important;
}
.hero-section[data-tem-banner="0"][data-gradiente-hero="grade"]::before {
    background:
        linear-gradient(color-mix(in srgb, var(--hero-primary) 17%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--hero-secondary) 15%, transparent) 1px, transparent 1px),
        radial-gradient(ellipse 42% 108% at 54% -6%, color-mix(in srgb, var(--hero-primary) 43%, transparent), transparent 67%),
        linear-gradient(145deg, #080e1c, #111a31 52%, #080e1c);
    background-size: 42px 42px, 42px 42px, cover, cover;
}
.hero-section[data-tem-banner="0"][data-gradiente-hero="grade"]::after {
    opacity: .38;
    background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--hero-secondary) 24%, transparent), transparent 38%);
}

@media (max-width: 768px) {
    .hero-section[data-tem-banner="0"] { min-height: 400px; }
    .hero-section[data-tem-banner="0"]::before { transform: scale(1.12); }
}

/* Etiqueta do plano destacado: fica dentro da área segura do card.
   Assim não é recortada por cards elevados ou pelo contêiner da seção. */
.vitrine-planos-real #planos-grid-dinamico,
#wrapper-planos-preview > .row {
    padding-top: 38px;
}

.vitrine-planos-real .plan-card.destaque,
#wrapper-planos-preview .plan-card.destaque {
    padding-top: 78px !important;
}

.vitrine-planos-real .plan-card .plan-highlight-badge,
#wrapper-planos-preview .plan-card .plan-highlight-badge {
    position: absolute;
    top: 16px;
    left: 50%;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: calc(100% - 32px);
    min-height: 30px;
    padding: 7px 15px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--plan-on-primary) 32%, transparent) !important;
    border-radius: 999px;
    background: var(--plan-primary) !important;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--plan-primary) 30%, transparent);
    color: var(--plan-on-primary) !important;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    transform: translateX(-50%);
    white-space: nowrap;
}

@media (max-width: 576px) {
    .vitrine-planos-real #planos-grid-dinamico { padding-top: 30px; }
    .vitrine-planos-real .plan-card.destaque { padding-top: 72px !important; }
}

/* ========================================================================== 
   MODO ESCURO — HIERARQUIA, CONTRASTE E PROFUNDIDADE
   Estas regras são mais específicas para prevalecerem sobre estilos legados
   carregados pelo cabeçalho e manterem o site inteiro consistente.
   ========================================================================== */
html body.dark-mode {
    background-color: #081321 !important;
    background-image:
        radial-gradient(ellipse at 12% 0%, color-mix(in srgb, var(--brand-primary) 24%, transparent) 0%, transparent 42%),
        radial-gradient(ellipse at 90% 88%, color-mix(in srgb, var(--brand-secondary) 15%, transparent) 0%, transparent 42%),
        linear-gradient(155deg, #0b1728 0%, #07111e 54%, #081321 100%) !important;
    color: #edf4ff !important;
}

html body.dark-mode .content-wrapper {
    color: #e7effb;
    background: transparent !important;
}

/* Superfícies principais: separadas do fundo, sem ficarem cinza ou opacas demais. */
html body.dark-mode .content-wrapper .bg-white,
html body.dark-mode .content-wrapper .card,
html body.dark-mode .content-wrapper .card-inicio,
html body.dark-mode .content-wrapper #section_estatisticas,
html body.dark-mode .content-wrapper .home-ranking-card,
html body.dark-mode .content-wrapper .feature-box {
    background: linear-gradient(145deg, #172943 0%, #13233a 100%) !important;
    border-color: #385371 !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255,255,255,.035) !important;
}

/* Elementos internos recebem um degrau a mais de profundidade. */
html body.dark-mode .content-wrapper .bg-light,
html body.dark-mode .content-wrapper .home-stat-card,
html body.dark-mode .content-wrapper .ranking-box {
    background: #0d1c30 !important;
    border-color: #304a68 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}

html body.dark-mode .content-wrapper .features-bar {
    background: linear-gradient(100deg, #14243a, #1a2d47) !important;
    border-top: 1px solid rgba(148, 181, 222, .13);
    border-bottom: 1px solid rgba(148, 181, 222, .13);
}

html body.dark-mode .content-wrapper .feature-box {
    background: #172943 !important;
    border: 1px solid #385371 !important;
}

html body.dark-mode .content-wrapper .feature-box:hover,
html body.dark-mode .content-wrapper .card-inicio:hover {
    border-color: color-mix(in srgb, var(--brand-primary) 68%, #a9c8ef) !important;
    box-shadow: 0 16px 36px color-mix(in srgb, var(--brand-primary) 17%, transparent) !important;
}

/* Tipografia: título claro, informações auxiliares em azul-cinza bem legível. */
html body.dark-mode .content-wrapper h1,
html body.dark-mode .content-wrapper h2,
html body.dark-mode .content-wrapper h3,
html body.dark-mode .content-wrapper h4,
html body.dark-mode .content-wrapper h5,
html body.dark-mode .content-wrapper h6,
html body.dark-mode .content-wrapper .text-dark,
html body.dark-mode .content-wrapper .stat-number {
    color: #f5f9ff !important;
}

html body.dark-mode .content-wrapper .text-muted,
html body.dark-mode .content-wrapper .text-secondary,
html body.dark-mode .content-wrapper small,
html body.dark-mode .content-wrapper .pricing-full-price {
    color: #b8c9df !important;
    opacity: 1;
}

html body.dark-mode .content-wrapper #section_hero h1 {
    color: #ffffff !important;
    text-shadow: 0 4px 24px rgba(0,0,0,.34);
}

html body.dark-mode .content-wrapper #section_hero p {
    color: #d1e0f4 !important;
    text-shadow: 0 2px 12px rgba(0,0,0,.28);
}

html body.dark-mode .content-wrapper #tit_grade,
html body.dark-mode .content-wrapper .card-inicio h4 {
    color: var(--brand-primary) !important;
}

/* Disciplinas: os ícones não podem herdar a cor secundária escura do tema. */
html body.dark-mode .content-wrapper #section_grade .feature-box > i {
    display: inline-block;
    width: auto;
    height: auto;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    color: #fffdf5 !important;
    text-shadow: none !important;
}

/* Planos no escuro: cartões claros o suficiente para ler de primeira. */
html body.dark-mode #section_planos.vitrine-planos-real .plan-card:not(.destaque) {
    background: linear-gradient(155deg, #172a45, #12233a) !important;
    border-color: #40607f !important;
    box-shadow: 0 16px 34px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.04) !important;
}

html body.dark-mode #section_planos.vitrine-planos-real .plan-card:not(.destaque) p,
html body.dark-mode #section_planos.vitrine-planos-real .plan-card:not(.destaque) .plan-full-price,
html body.dark-mode #section_planos.vitrine-planos-real .plan-card:not(.destaque) .plan-installments {
    color: #c7d7ea !important;
}

html body.dark-mode #section_planos.vitrine-planos-real .plan-card:not(.destaque) .btn-plan {
    background: #294566 !important;
    border: 1px solid #537696 !important;
    color: #f7fbff !important;
}

html body.dark-mode #section_planos.vitrine-planos-real .plan-card.destaque {
    border-color: color-mix(in srgb, var(--plan-primary) 72%, #b8d5ff) !important;
    box-shadow: 0 22px 50px color-mix(in srgb, var(--plan-primary) 25%, transparent), inset 0 1px 0 rgba(255,255,255,.16) !important;
}

html body.dark-mode #section_planos.vitrine-planos-real .plan-card.destaque p,
html body.dark-mode #section_planos.vitrine-planos-real .plan-card.destaque .plan-full-price,
html body.dark-mode #section_planos.vitrine-planos-real .plan-card.destaque .plan-installments {
    color: color-mix(in srgb, var(--plan-on-primary) 82%, #cfe0ff) !important;
}

/* ========================================================================== 
   QUESTÕES — RESPOSTAS E COMENTÁRIOS
   Sem brilho artificial nos controles de resposta e com superfícies próprias
   para os comentários no modo escuro. Os seletores alternativos mantêm a
   correção compatível com os componentes legados da área de questões.
   ========================================================================== */

/* O botão de verificar e as alternativas não devem emitir sombra de neon. */
html body :is(
    #verificarResposta,
    #btnVerificarResposta,
    #btn-verificar-resposta,
    .btn-verificar-resposta,
    .btn-verificar,
    .btn-check-answer,
    [class*="verificar-resposta" i],
    [class*="check-answer" i],
    [data-action="verificar-resposta" i],
    [data-action="check-answer" i]
) {
    box-shadow: none !important;
    filter: none !important;
    text-shadow: none !important;
}

html body :is(
    .alternativa,
    .opcao-resposta,
    .answer-option,
    .answer-choice,
    [class*="alternativa" i],
    [class*="opcao-resposta" i]
) {
    box-shadow: none !important;
}

/* Contêineres e cartões: no escuro nunca devem ficar brancos com texto claro. */
html body.dark-mode :is(
    .comments-container,
    .comentarios-container,
    .comments-section,
    .comentarios-section,
    .comment-card,
    .comentario-card,
    .comment-item,
    .comentario-item,
    .comment-body,
    .comentario-body,
    .comment-content,
    .comentario-conteudo,
    .maia-comment,
    .ia-comment,
    [class*="comment-card" i],
    [class*="comentario-card" i],
    [class*="comment-body" i],
    [class*="comentario-body" i],
    [class*="comment-content" i],
    [class*="comentario-conteudo" i]
) {
    background: #14243a !important;
    border-color: #3c5878 !important;
    color: #eef5ff !important;
}

html body.dark-mode :is(
    .comment-card,
    .comentario-card,
    .comment-item,
    .comentario-item,
    .comment-body,
    .comentario-body,
    .comment-content,
    .comentario-conteudo,
    .maia-comment,
    .ia-comment,
    [class*="comment-card" i],
    [class*="comentario-card" i],
    [class*="comment-body" i],
    [class*="comentario-body" i],
    [class*="comment-content" i],
    [class*="comentario-conteudo" i]
) :is(h1, h2, h3, h4, h5, h6, strong, b, p, span, li, blockquote) {
    color: #eef5ff !important;
    opacity: 1 !important;
}

html body.dark-mode :is(
    .comment-card,
    .comentario-card,
    .comment-item,
    .comentario-item,
    .comment-body,
    .comentario-body,
    .comment-content,
    .comentario-conteudo,
    [class*="comment-card" i],
    [class*="comentario-card" i],
    [class*="comment-body" i],
    [class*="comentario-body" i],
    [class*="comment-content" i],
    [class*="comentario-conteudo" i]
) :is(.text-muted, small, time, .comment-meta, .comentario-meta) {
    color: #b9cbe1 !important;
    opacity: 1 !important;
}

/* Editor de comentário e barra de formatação no mesmo esquema escuro. */
html body.dark-mode :is(
    .comment-editor,
    .comentario-editor,
    [class*="comment-editor" i],
    [class*="comentario-editor" i]
) {
    overflow: hidden;
    background: #0e1a2c !important;
    border: 1px solid #466486 !important;
    border-radius: 9px;
    color: #eef5ff !important;
}

html body.dark-mode :is(
    .comment-editor,
    .comentario-editor,
    [class*="comment-editor" i],
    [class*="comentario-editor" i]
) :is(textarea, input, [contenteditable="true"], .ql-editor) {
    background: #0e1a2c !important;
    border-color: #466486 !important;
    color: #eef5ff !important;
    caret-color: #ffffff;
}

html body.dark-mode :is(
    .comment-editor,
    .comentario-editor,
    [class*="comment-editor" i],
    [class*="comentario-editor" i]
) :is(textarea, input, [contenteditable="true"], .ql-editor)::placeholder {
    color: #9eb2cb !important;
    opacity: 1;
}

html body.dark-mode :is(
    .comment-editor,
    .comentario-editor,
    [class*="comment-editor" i],
    [class*="comentario-editor" i]
) :is(.ql-toolbar, [class*="toolbar" i]) {
    background: #172943 !important;
    border-color: #466486 !important;
    color: #eef5ff !important;
}

html body.dark-mode :is(
    .comment-editor,
    .comentario-editor,
    [class*="comment-editor" i],
    [class*="comentario-editor" i]
) :is(.ql-toolbar button, [class*="toolbar" i] button, .ql-stroke) {
    color: #eef5ff !important;
    stroke: #eef5ff !important;
}

/* ========================================================================== 
   REFINAMENTO VISUAL — MAIS LEVE, RESPIRÁVEL E SÓBRIO
   Reduz a aparência pesada sem alterar as cores e a identidade escolhidas.
   ========================================================================== */
:root {
    --ui-border-light: #e3e9f1;
    --ui-border-dark: #385371;
    --ui-shadow-light: 0 2px 10px rgba(15, 23, 42, .045);
    --ui-shadow-dark: 0 3px 12px rgba(0, 0, 0, .20);
}

html { font-size: 15px; }

body {
    font-family: var(--font-global, "Poppins", "Segoe UI Variable", "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.58;
    letter-spacing: .003em;
}

body :is(h1, h2, h3) {
    font-weight: 600 !important;
    letter-spacing: -.022em;
    line-height: 1.18;
}

body :is(h4, h5, h6) {
    font-weight: 600 !important;
    letter-spacing: -.012em;
    line-height: 1.28;
}

body .fw-bold { font-weight: 600 !important; }
body .fw-semibold { font-weight: 500 !important; }

body :is(.btn, .form-control, .form-select, .dropdown-item) {
    font-size: .92rem;
    letter-spacing: .002em;
}

body .btn { font-weight: 500 !important; }
body .btn.fw-bold { font-weight: 600 !important; }

/* Superfícies limpas: borda delicada e sombra curta, sem efeito de vidro pesado. */
html body :is(.card, .ranking-container, .table-responsive, .questao-box, .filter-box, .materia-bloco) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: var(--ui-border-light) !important;
    box-shadow: var(--ui-shadow-light) !important;
    transition: border-color .18s ease, box-shadow .18s ease !important;
}

html body :is(.card, .ranking-container, .table-responsive, .questao-box, .filter-box, .materia-bloco):hover {
    transform: none !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .06) !important;
}

html body.dark-mode :is(.card, .ranking-container, .table-responsive, .questao-box, .filter-box, .materia-bloco) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: var(--ui-border-dark) !important;
    box-shadow: var(--ui-shadow-dark) !important;
}

html body.dark-mode :is(h1, h2, h3, .hero-title, .pricing-header h2) {
    text-shadow: none !important;
}

/* Botões sólidos e calmos; o foco permanece visível sem halo forte. */
html body :is(.btn-primary, .btn-custom) {
    background: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--brand-primary) 16%, transparent) !important;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

html body :is(.btn-primary, .btn-custom):hover {
    background: color-mix(in srgb, var(--brand-primary) 88%, #000) !important;
    border-color: color-mix(in srgb, var(--brand-primary) 88%, #000) !important;
    box-shadow: 0 2px 5px color-mix(in srgb, var(--brand-primary) 18%, transparent) !important;
    filter: none !important;
    transform: none !important;
}

html body :is(.form-control, .form-select) {
    border-color: #d7e0eb;
    border-radius: 8px;
    box-shadow: none !important;
}

html body :is(.form-control, .form-select):focus {
    border-color: color-mix(in srgb, var(--brand-primary) 62%, #b7c9de) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-primary) 13%, transparent) !important;
}

@media (min-width: 992px) {
    .container-xl { padding-right: 2rem; padding-left: 2rem; }
    .container-xl > .row.g-4 { --bs-gutter-x: 2rem; --bs-gutter-y: 2rem; }
}

/* ===========================================================================
   TEMA "MAPA DA APROVAÇÃO"
   Azul profundo, coral, ouro e verde-lima aplicados com gradientes contidos.
   =========================================================================== */
html[data-theme-preset="paes_aprovacao"] {
    --brand-primary: #0B28D8;
    --brand-secondary: #F2493D;
    --theme-ink: #101A3B;
    --theme-surface: #FFFDF5;
    --theme-gold: #E9AC08;
    --theme-lime: #C8ED64;
    --ui-border-light: #DCE3F7;
    --ui-border-dark: #304472;
    --ui-shadow-light: 0 4px 18px rgba(16, 26, 59, .055);
    --ui-shadow-dark: 0 5px 20px rgba(0, 0, 0, .22);
}

html[data-theme-preset="paes_aprovacao"] body:not(.dark-mode) {
    color: var(--theme-ink);
    background-color: #F7F8FF !important;
    background-image:
        radial-gradient(ellipse 42rem 30rem at -8% -12%, rgba(11, 40, 216, .10), transparent 70%),
        radial-gradient(ellipse 34rem 24rem at 104% 6%, rgba(242, 73, 61, .075), transparent 72%),
        linear-gradient(160deg, #FFFDF5 0%, #F7F8FF 52%, #F1F4FF 100%) !important;
}

html[data-theme-preset="paes_aprovacao"] body.dark-mode {
    background-color: #07112F !important;
    background-image:
        radial-gradient(ellipse 40rem 28rem at -10% 0%, rgba(31, 67, 236, .24), transparent 72%),
        radial-gradient(ellipse 30rem 24rem at 108% 100%, rgba(242, 73, 61, .13), transparent 74%),
        linear-gradient(155deg, #091536 0%, #07112F 54%, #050A1D 100%) !important;
}

html[data-theme-preset="paes_aprovacao"] .sidebar-custom,
html[data-theme-preset="paes_aprovacao"] .mobile-topbar {
    background: linear-gradient(165deg, #1839E6 0%, #0B28D8 48%, #07165D 100%) !important;
    box-shadow: 1px 0 10px rgba(7, 22, 93, .13) !important;
}

html[data-theme-preset="paes_aprovacao"] .sidebar-link.active {
    background: linear-gradient(90deg, rgba(255, 253, 245, .18), rgba(255, 253, 245, .07)) !important;
    border-left-color: var(--theme-lime) !important;
}

html[data-theme-preset="paes_aprovacao"] body :is(.btn-primary, .btn-custom, .btn-acessar, .btn-plan, .btn-gradient-premium) {
    background: linear-gradient(135deg, #1739E5 0%, #0B28D8 58%, #0921B2 100%) !important;
    border-color: #0B28D8 !important;
    color: #FFFDF5 !important;
    box-shadow: 0 2px 7px rgba(11, 40, 216, .16) !important;
}

html[data-theme-preset="paes_aprovacao"] body :is(.btn-primary, .btn-custom, .btn-acessar, .btn-plan, .btn-gradient-premium):hover {
    background: linear-gradient(135deg, #0B28D8 0%, #071DAB 100%) !important;
    border-color: #071DAB !important;
    box-shadow: 0 3px 9px rgba(11, 40, 216, .20) !important;
    filter: none !important;
    transform: none !important;
}

html[data-theme-preset="paes_aprovacao"] :is(.curso-selo-premium, .premium-badge, .badge-premium) {
    background: linear-gradient(135deg, #F2493D 0%, #E9AC08 100%) !important;
    color: #FFFDF5 !important;
    border: 0 !important;
    box-shadow: none !important;
}

html[data-theme-preset="paes_aprovacao"] .hero-section[data-tem-banner="0"][data-gradiente-hero="horizonte"] {
    background-color: #081A7F !important;
}

html[data-theme-preset="paes_aprovacao"] .hero-section[data-tem-banner="0"][data-gradiente-hero="horizonte"]::before {
    background:
        radial-gradient(ellipse at 4% 112%, rgba(11, 40, 216, .78) 0%, transparent 68%),
        radial-gradient(ellipse at 103% 8%, rgba(242, 73, 61, .42) 0%, transparent 66%),
        linear-gradient(155deg, #071B88 0%, #0B28D8 50%, #07165D 100%) !important;
}

html[data-theme-preset="paes_aprovacao"] .hero-section .hero-subtitle,
html[data-theme-preset="paes_aprovacao"] .hero-section .text-highlight {
    color: var(--theme-lime) !important;
}

html[data-theme-preset="paes_aprovacao"] :is(.card, .curso-card, .materia-bloco, .questao-box, .filter-box) {
    border-color: var(--ui-border-light) !important;
    box-shadow: var(--ui-shadow-light) !important;
}

html[data-theme-preset="paes_aprovacao"] body.dark-mode :is(.card, .curso-card, .materia-bloco, .questao-box, .filter-box) {
    border-color: var(--ui-border-dark) !important;
    box-shadow: var(--ui-shadow-dark) !important;
}

/* ===========================================================================
   TEMA "SOL DA APROVAÇÃO"
   Laranja vivo, dourado e uma base creme. A atmosfera promocional fica
   inteiramente na tela inicial; as páginas de estudo permanecem limpas.
   =========================================================================== */
html[data-theme-preset="sol_aprovacao"] {
    --brand-primary: #FA6E1D;
    --brand-secondary: #FFBC00;
    --theme-ink: #10213F;
    --theme-surface: #FBFAF8;
    --theme-gold: #FFBC00;
    --theme-accent: #FA6E1D;
    --ui-border-light: #F0D7C0;
    --ui-border-dark: #344454;
    --ui-shadow-light: none;
    --ui-shadow-dark: none;
}

html[data-theme-preset="sol_aprovacao"] body.index-page:not(.dark-mode) {
    color: var(--theme-ink);
    background-color: #FBFCFE !important;
    background-image: none !important;
}

html[data-theme-preset="sol_aprovacao"] body.index-page.dark-mode {
    background-color: #101820 !important;
    background-image: none !important;
}

html[data-theme-preset="sol_aprovacao"] .sidebar-custom {
    background: var(--sidebar-bg) !important;
    box-shadow: none !important;
}

html[data-theme-preset="sol_aprovacao"] .mobile-topbar,
html[data-theme-preset="sol_aprovacao"] .sidebar-brand-area {
    background: #10213F !important;
}

html[data-theme-preset="sol_aprovacao"] .sidebar-brand-area {
    border-bottom-color: rgba(255, 255, 255, .10) !important;
}

html[data-theme-preset="sol_aprovacao"] .sidebar-footer {
    border-top-color: rgba(16, 33, 63, .10) !important;
}

html[data-theme-preset="sol_aprovacao"] .sidebar-link {
    color: var(--sidebar-text) !important;
}

html[data-theme-preset="sol_aprovacao"] .sidebar-link i {
    color: #FA6E1D;
}

html[data-theme-preset="sol_aprovacao"] .sidebar-link:hover {
    color: var(--sidebar-text-hover) !important;
    background: rgba(255, 188, 0, .10) !important;
}

html[data-theme-preset="sol_aprovacao"] .sidebar-link:hover i {
    color: #FA6E1D;
}

html[data-theme-preset="sol_aprovacao"] .sidebar-link.active {
    color: var(--sidebar-text-hover) !important;
    background: rgba(250, 110, 29, .09) !important;
    border-left-color: #FA6E1D !important;
}

html[data-theme-preset="sol_aprovacao"] .sidebar-link.active i {
    color: #FA6E1D !important;
}

html[data-theme-preset="sol_aprovacao"] .sidebar-link.mt-4 {
    background-color: rgba(250, 110, 29, .09) !important;
}

html[data-theme-preset="sol_aprovacao"] .sidebar-link.mt-4 :is(.text-white, span) {
    color: var(--sidebar-text-hover) !important;
}

html[data-theme-preset="sol_aprovacao"] .sidebar-link.mt-4 i {
    color: #FA6E1D !important;
}

html[data-theme-preset="sol_aprovacao"] .theme-label,
html[data-theme-preset="sol_aprovacao"] .sidebar-user-name {
    color: var(--sidebar-text-hover) !important;
}

html[data-theme-preset="sol_aprovacao"] .sidebar-user-status {
    color: var(--sidebar-text) !important;
}

html[data-theme-preset="sol_aprovacao"] .sidebar-user-box:hover {
    background: rgba(255, 188, 0, .10) !important;
}

html[data-theme-preset="sol_aprovacao"] .sidebar-user-avatar {
    background-color: #FFBC00;
    color: #10213F;
}

html[data-theme-preset="sol_aprovacao"] .sidebar-btn-outline {
    border-color: rgba(16, 33, 63, .22);
    color: var(--sidebar-text-hover);
}

html[data-theme-preset="sol_aprovacao"] .sidebar-btn-outline:hover {
    background-color: rgba(255, 188, 0, .12);
    color: var(--sidebar-text-hover);
}

html[data-theme-preset="sol_aprovacao"] .sidebar-btn-solid {
    background-color: #FA6E1D;
    color: #FFFFFF;
}

html[data-theme-preset="sol_aprovacao"] .sidebar-btn-solid:hover {
    background-color: #D95911;
    color: #FFFFFF;
}

html[data-theme-preset="sol_aprovacao"] body.dark-mode {
    --sidebar-bg: #1C2834;
    --sidebar-text: rgba(255, 255, 255, .78);
    --sidebar-text-hover: #FFFFFF;
    --sidebar-active-bg: rgba(250, 110, 29, .17);
    --sidebar-active-border: #FA6E1D;
}

html[data-theme-preset="sol_aprovacao"] body.dark-mode .sidebar-footer {
    border-top-color: rgba(255, 255, 255, .10) !important;
}

html[data-theme-preset="sol_aprovacao"] body.dark-mode .sidebar-btn-outline {
    border-color: rgba(255, 255, 255, .26);
}

html[data-theme-preset="sol_aprovacao"] body :is(.btn-primary, .btn-custom, .btn-acessar, .btn-plan, .btn-gradient-premium) {
    background: #FA6E1D !important;
    border-color: #FA6E1D !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
}

html[data-theme-preset="sol_aprovacao"] body :is(.btn-primary, .btn-custom, .btn-acessar, .btn-plan, .btn-gradient-premium):hover {
    background: #B83F08 !important;
    border-color: #B83F08 !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
}

html[data-theme-preset="sol_aprovacao"] :is(.curso-selo-premium, .premium-badge, .badge-premium) {
    background: #FA6E1D !important;
    color: #FFFFFF !important;
    border: 0 !important;
}

html[data-theme-preset="sol_aprovacao"] body.index-page .hero-section[data-tem-banner="0"] {
    background-color: #FFF3E8 !important;
}

html[data-theme-preset="sol_aprovacao"] body.index-page .hero-section[data-tem-banner="0"]::before {
    background: none !important;
    opacity: 0 !important;
}

html[data-theme-preset="sol_aprovacao"] body.index-page .hero-section[data-tem-banner="0"]::after {
    background: none !important;
    opacity: 0 !important;
}

html[data-theme-preset="sol_aprovacao"] body.index-page .hero-section[data-tem-banner="0"] :is(#hero_titulo_el, #hero_subtitulo_el) {
    text-shadow: none !important;
}

html[data-theme-preset="sol_aprovacao"] .hero-section .pricing-hero-card {
    background: rgba(255, 255, 255, .94) !important;
    border: 1px solid #F0D7C0 !important;
    box-shadow: none !important;
}

html[data-theme-preset="sol_aprovacao"] .hero-section .pricing-badge {
    background-color: #FFBC00 !important;
    color: #10213F !important;
}

html[data-theme-preset="sol_aprovacao"] .hero-section .btn-assine-hero {
    background-color: #FA6E1D !important;
    border-color: #FA6E1D !important;
    border-radius: 10px !important;
}

html[data-theme-preset="sol_aprovacao"] body.index-page .features-bar {
    background: #FFF7E2 !important;
    border-top: 1px solid rgba(255, 188, 0, .36) !important;
    border-bottom: 1px solid rgba(255, 188, 0, .36) !important;
}

html[data-theme-preset="sol_aprovacao"] body.index-page .feature-box,
html[data-theme-preset="sol_aprovacao"] body.index-page .card-inicio {
    border: 1px solid #F1DECE !important;
    box-shadow: none !important;
}

html[data-theme-preset="sol_aprovacao"] body.index-page .countdown-bar {
    background: #10213F !important;
    border-top-color: rgba(255, 255, 255, .24) !important;
}

html[data-theme-preset="sol_aprovacao"] body.index-page #txt_contador {
    color: #FFBC00 !important;
}

html[data-theme-preset="sol_aprovacao"] :is(.card, .curso-card, .materia-bloco, .questao-box, .filter-box) {
    border-color: var(--ui-border-light) !important;
    box-shadow: var(--ui-shadow-light) !important;
}

html[data-theme-preset="sol_aprovacao"] body.dark-mode :is(.card, .curso-card, .materia-bloco, .questao-box, .filter-box) {
    border-color: var(--ui-border-dark) !important;
    box-shadow: var(--ui-shadow-dark) !important;
}

/* ===========================================================================
   COLEÇÃO SÓBRIA
   Cinco identidades claras inspiradas em arquitetura, editorial e dashboards.
   Os acentos aparecem em detalhes de navegação para manter a interface leve.
   =========================================================================== */
html[data-theme-preset="calcario_nogueira"] {
    --brand-primary: #26302D;
    --brand-secondary: #60736A;
    --theme-ink: #1C2421;
    --theme-surface: #F7F6F2;
    --theme-accent: #86583A;
    --theme-page-background: radial-gradient(ellipse 34rem 23rem at 101% -8%, rgba(134, 88, 58, .08), transparent 72%), linear-gradient(155deg, #FBFAF7 0%, #F2F2ED 54%, #F8F7F3 100%);
    --theme-dark-background: linear-gradient(155deg, #17201C 0%, #101714 58%, #0B110E 100%);
    --theme-sidebar-gradient: linear-gradient(165deg, #3A4641 0%, #26302D 52%, #1D2522 100%);
    --theme-active-background: linear-gradient(90deg, rgba(170, 183, 177, .20), rgba(255, 255, 255, .045));
    --ui-border-light: #DCE2DC;
    --ui-border-dark: #405047;
    --ui-shadow-light: 0 4px 18px rgba(28, 36, 33, .055);
    --ui-shadow-dark: 0 5px 20px rgba(0, 0, 0, .24);
}

html[data-theme-preset="editorial_grafite"] {
    --brand-primary: #171717;
    --brand-secondary: #4B5053;
    --theme-ink: #171717;
    --theme-surface: #FAFAF9;
    --theme-accent: #745F43;
    --theme-page-background: radial-gradient(ellipse 32rem 22rem at 102% 0%, rgba(116, 95, 67, .065), transparent 74%), linear-gradient(155deg, #FCFCFB 0%, #F4F4F1 56%, #FAFAF8 100%);
    --theme-dark-background: linear-gradient(155deg, #1C1C1B 0%, #111110 60%, #090909 100%);
    --theme-sidebar-gradient: linear-gradient(165deg, #2A2A2A 0%, #171717 55%, #0E0E0E 100%);
    --theme-active-background: linear-gradient(90deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .035));
    --ui-border-light: #E3E3E0;
    --ui-border-dark: #404040;
    --ui-shadow-light: 0 4px 18px rgba(23, 23, 23, .05);
    --ui-shadow-dark: 0 5px 20px rgba(0, 0, 0, .25);
}

html[data-theme-preset="bruma_saas"] {
    --brand-primary: #234F70;
    --brand-secondary: #4D768A;
    --theme-ink: #182A35;
    --theme-surface: #F2F7F9;
    --theme-accent: #2F6F69;
    --theme-page-background: radial-gradient(ellipse 38rem 25rem at 98% -6%, rgba(168, 194, 207, .42), transparent 72%), radial-gradient(ellipse 26rem 20rem at -5% 105%, rgba(35, 79, 112, .08), transparent 70%), linear-gradient(155deg, #FAFCFD 0%, #EDF5F7 52%, #F5F9FA 100%);
    --theme-dark-background: linear-gradient(155deg, #142C3C 0%, #0D1E2A 60%, #08141C 100%);
    --theme-sidebar-gradient: linear-gradient(165deg, #356988 0%, #234F70 55%, #173A54 100%);
    --theme-active-background: linear-gradient(90deg, rgba(168, 194, 207, .23), rgba(255, 255, 255, .045));
    --ui-border-light: #D5E3E8;
    --ui-border-dark: #315269;
    --ui-shadow-light: 0 4px 18px rgba(24, 42, 53, .055);
    --ui-shadow-dark: 0 5px 20px rgba(0, 0, 0, .23);
}

html[data-theme-preset="grafite_financeiro"] {
    --brand-primary: #252B2E;
    --brand-secondary: #527989;
    --theme-ink: #172125;
    --theme-surface: #F3F6F7;
    --theme-accent: #C7E600;
    --theme-page-background: radial-gradient(ellipse 36rem 25rem at 99% -8%, rgba(144, 181, 196, .42), transparent 70%), radial-gradient(ellipse 22rem 18rem at -2% 105%, rgba(199, 230, 0, .075), transparent 70%), linear-gradient(155deg, #FAFCFC 0%, #EEF3F5 54%, #F6F8F8 100%);
    --theme-dark-background: linear-gradient(155deg, #20282C 0%, #12191C 58%, #0C1113 100%);
    --theme-sidebar-gradient: linear-gradient(165deg, #394247 0%, #252B2E 56%, #1B2023 100%);
    --theme-active-background: linear-gradient(90deg, rgba(199, 230, 0, .16), rgba(199, 230, 0, .035));
    --ui-border-light: #D6E1E5;
    --ui-border-dark: #3E5963;
    --ui-shadow-light: 0 4px 18px rgba(23, 33, 37, .055);
    --ui-shadow-dark: 0 5px 20px rgba(0, 0, 0, .25);
}

html[data-theme-preset="bosque_estrutural"] {
    --brand-primary: #34423C;
    --brand-secondary: #5D715F;
    --theme-ink: #202722;
    --theme-surface: #F5F5F0;
    --theme-accent: #7C6A4D;
    --theme-page-background: radial-gradient(ellipse 35rem 24rem at 100% -7%, rgba(182, 192, 181, .36), transparent 72%), radial-gradient(ellipse 24rem 18rem at -3% 104%, rgba(124, 106, 77, .07), transparent 70%), linear-gradient(155deg, #FBFBF7 0%, #F0F2ED 52%, #F7F7F2 100%);
    --theme-dark-background: linear-gradient(155deg, #25322C 0%, #17201B 60%, #0E1511 100%);
    --theme-sidebar-gradient: linear-gradient(165deg, #4A5A51 0%, #34423C 54%, #26322D 100%);
    --theme-active-background: linear-gradient(90deg, rgba(182, 192, 181, .21), rgba(255, 255, 255, .04));
    --ui-border-light: #DBE1D9;
    --ui-border-dark: #47594B;
    --ui-shadow-light: 0 4px 18px rgba(32, 39, 34, .055);
    --ui-shadow-dark: 0 5px 20px rgba(0, 0, 0, .24);
}

html[data-theme-preset="calcario_nogueira"] body:not(.dark-mode),
html[data-theme-preset="editorial_grafite"] body:not(.dark-mode),
html[data-theme-preset="bruma_saas"] body:not(.dark-mode),
html[data-theme-preset="grafite_financeiro"] body:not(.dark-mode),
html[data-theme-preset="bosque_estrutural"] body:not(.dark-mode) {
    color: var(--theme-ink);
    background: var(--theme-page-background) !important;
}

html[data-theme-preset="calcario_nogueira"] body.dark-mode,
html[data-theme-preset="editorial_grafite"] body.dark-mode,
html[data-theme-preset="bruma_saas"] body.dark-mode,
html[data-theme-preset="grafite_financeiro"] body.dark-mode,
html[data-theme-preset="bosque_estrutural"] body.dark-mode {
    background: var(--theme-dark-background) !important;
}

html[data-theme-preset="calcario_nogueira"] :is(.sidebar-custom, .mobile-topbar),
html[data-theme-preset="editorial_grafite"] :is(.sidebar-custom, .mobile-topbar),
html[data-theme-preset="bruma_saas"] :is(.sidebar-custom, .mobile-topbar),
html[data-theme-preset="grafite_financeiro"] :is(.sidebar-custom, .mobile-topbar),
html[data-theme-preset="bosque_estrutural"] :is(.sidebar-custom, .mobile-topbar) {
    background: var(--theme-sidebar-gradient) !important;
    box-shadow: 1px 0 12px color-mix(in srgb, var(--brand-primary) 24%, transparent) !important;
}

html[data-theme-preset="calcario_nogueira"] .sidebar-link.active,
html[data-theme-preset="editorial_grafite"] .sidebar-link.active,
html[data-theme-preset="bruma_saas"] .sidebar-link.active,
html[data-theme-preset="grafite_financeiro"] .sidebar-link.active,
html[data-theme-preset="bosque_estrutural"] .sidebar-link.active {
    background: var(--theme-active-background) !important;
    border-left-color: var(--theme-accent) !important;
}

html[data-theme-preset="calcario_nogueira"] body :is(.btn-primary, .btn-custom, .btn-acessar, .btn-plan, .btn-gradient-premium),
html[data-theme-preset="editorial_grafite"] body :is(.btn-primary, .btn-custom, .btn-acessar, .btn-plan, .btn-gradient-premium),
html[data-theme-preset="bruma_saas"] body :is(.btn-primary, .btn-custom, .btn-acessar, .btn-plan, .btn-gradient-premium),
html[data-theme-preset="grafite_financeiro"] body :is(.btn-primary, .btn-custom, .btn-acessar, .btn-plan, .btn-gradient-premium),
html[data-theme-preset="bosque_estrutural"] body :is(.btn-primary, .btn-custom, .btn-acessar, .btn-plan, .btn-gradient-premium) {
    background: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 7px color-mix(in srgb, var(--brand-primary) 17%, transparent) !important;
}

html[data-theme-preset="calcario_nogueira"] body :is(.btn-primary, .btn-custom, .btn-acessar, .btn-plan, .btn-gradient-premium):hover,
html[data-theme-preset="editorial_grafite"] body :is(.btn-primary, .btn-custom, .btn-acessar, .btn-plan, .btn-gradient-premium):hover,
html[data-theme-preset="bruma_saas"] body :is(.btn-primary, .btn-custom, .btn-acessar, .btn-plan, .btn-gradient-premium):hover,
html[data-theme-preset="grafite_financeiro"] body :is(.btn-primary, .btn-custom, .btn-acessar, .btn-plan, .btn-gradient-premium):hover,
html[data-theme-preset="bosque_estrutural"] body :is(.btn-primary, .btn-custom, .btn-acessar, .btn-plan, .btn-gradient-premium):hover {
    background: color-mix(in srgb, var(--brand-primary) 88%, #000) !important;
    border-color: color-mix(in srgb, var(--brand-primary) 88%, #000) !important;
    filter: none !important;
    transform: none !important;
}

html[data-theme-preset="calcario_nogueira"] :is(.card, .curso-card, .materia-bloco, .questao-box, .filter-box),
html[data-theme-preset="editorial_grafite"] :is(.card, .curso-card, .materia-bloco, .questao-box, .filter-box),
html[data-theme-preset="bruma_saas"] :is(.card, .curso-card, .materia-bloco, .questao-box, .filter-box),
html[data-theme-preset="grafite_financeiro"] :is(.card, .curso-card, .materia-bloco, .questao-box, .filter-box),
html[data-theme-preset="bosque_estrutural"] :is(.card, .curso-card, .materia-bloco, .questao-box, .filter-box) {
    border-color: var(--ui-border-light) !important;
    box-shadow: var(--ui-shadow-light) !important;
}

html[data-theme-preset="calcario_nogueira"] body.dark-mode :is(.card, .curso-card, .materia-bloco, .questao-box, .filter-box),
html[data-theme-preset="editorial_grafite"] body.dark-mode :is(.card, .curso-card, .materia-bloco, .questao-box, .filter-box),
html[data-theme-preset="bruma_saas"] body.dark-mode :is(.card, .curso-card, .materia-bloco, .questao-box, .filter-box),
html[data-theme-preset="grafite_financeiro"] body.dark-mode :is(.card, .curso-card, .materia-bloco, .questao-box, .filter-box),
html[data-theme-preset="bosque_estrutural"] body.dark-mode :is(.card, .curso-card, .materia-bloco, .questao-box, .filter-box) {
    border-color: var(--ui-border-dark) !important;
    box-shadow: var(--ui-shadow-dark) !important;
}

/* ===========================================================================
   FUNDO SÓLIDO NAS PÁGINAS INTERNAS
   Os gradientes atmosféricos ficam restritos à index (body.index-page).
   Sidebars, botões e o hero continuam com seus próprios estilos.
   =========================================================================== */
html body:not(.index-page),
html[data-theme-preset] body:not(.index-page) {
    background-image: none !important;
    background-attachment: initial !important;
}

html body:not(.index-page):not(.dark-mode) {
    background-color: var(--theme-surface, #fafbfc) !important;
}

html body.dark-mode:not(.index-page) {
    background-color: #081321 !important;
}

html[data-theme-preset="paes_aprovacao"] body.dark-mode:not(.index-page) {
    background-color: #07112F !important;
}

html[data-theme-preset="sol_aprovacao"] body.dark-mode:not(.index-page) {
    background-color: #1B130F !important;
    background-image: none !important;
}

/* ===========================================================================
   SOL DA APROVAÇÃO — LIMPEZA FINAL
   Esta camada vem por último para neutralizar estilos legados carregados em
   páginas específicas: sem glow, bordas espessas ou gradientes chamativos.
   =========================================================================== */
html[data-theme-preset="sol_aprovacao"] body.dark-mode,
html[data-theme-preset="sol_aprovacao"] body.dark-mode:not(.index-page) {
    background-color: #101820 !important;
    background-image: none !important;
}

html[data-theme-preset="sol_aprovacao"] :is(.btn, button, input[type="button"], input[type="submit"], input[type="reset"]):not(.btn-close),
html[data-theme-preset="sol_aprovacao"] :is(.sidebar-link.active, .desktop-toggle-btn, .checkout-provider-option) {
    box-shadow: none !important;
    background-image: none !important;
    text-shadow: none !important;
}

html[data-theme-preset="sol_aprovacao"] .sidebar-link {
    border-left-width: 1px !important;
}

html[data-theme-preset="sol_aprovacao"] :is(.premium-price-card, .plan-card, .pmma-pricing-card, .pricing-hero-card, .feature-box, .curso-card, .caderno-card, .cadernos-hero, .cadernos-column) {
    border-width: 1px !important;
    box-shadow: none !important;
    background-image: none !important;
}

html[data-theme-preset="sol_aprovacao"] :is(.bg-orange, [style*="background-color: #fa6e1d"], [style*="background: #fa6e1d"], [style*="background-color:#fa6e1d"], [style*="background:#fa6e1d"]) {
    background: #FA6E1D !important;
    background-image: none !important;
    box-shadow: none !important;
}

html[data-theme-preset="sol_aprovacao"] .cadernos-hero {
    background: #FFFFFF !important;
    background-image: none !important;
    border: 1px solid #E5E7EB !important;
}

html[data-theme-preset="sol_aprovacao"] .caderno-info-panel {
    border-left-width: 2px !important;
}

html[data-theme-preset="sol_aprovacao"] .caderno-answer.selected {
    border-width: 1px !important;
}

html[data-theme-preset="sol_aprovacao"] .curso-card:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: var(--ui-border-light) !important;
}

html[data-theme-preset="sol_aprovacao"] .curso-capa:not([style]) {
    background: #FFF7E2 !important;
    background-image: none !important;
    color: #FA6E1D !important;
}

html[data-theme-preset="sol_aprovacao"] :is(.banner-apostilas, .capa-placeholder, .ranking-header, .modal-pdf-header) {
    background: #10213F !important;
    background-image: none !important;
    box-shadow: none !important;
}

html[data-theme-preset="sol_aprovacao"] body.dark-mode :is(.content-wrapper .feature-box, .content-wrapper .card-inicio, .content-wrapper .home-ranking-card, #section_estatisticas, .cadernos-hero, .cadernos-column, .caderno-card) {
    background: #182230 !important;
    background-image: none !important;
    border: 1px solid #344454 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html[data-theme-preset="sol_aprovacao"] body.dark-mode .features-bar,
html[data-theme-preset="sol_aprovacao"] body.dark-mode .countdown-bar {
    background: #10213F !important;
    background-image: none !important;
}