/* =======================================
           1. VARIÁVEIS E TEMA GLOBAL
           ======================================= */
        :root {
            --color-primary: #3b82f6;
            --color-secondary: #0ea5e9;
            --color-success: #22c55e;
            --color-warning: #facc15;
            --color-danger: #e11d48; /* Vermelho eb */
            --glass-bg: rgba(255, 255, 255, 0.015);
            --glass-border: rgba(255, 255, 255, 0.05);
            --dark-panel: linear-gradient(145deg, rgba(15, 23, 42, 0.6), rgba(2, 6, 23, 0.8));
            --bg-color: #020617;
        }

        html, body {
            width: 100%;
            max-width: 100%;
            overflow-x: clip !important;
            position: relative;
        }

        body {
            background-color: var(--bg-color); /* Fundo base escuro (#020617) */
            background-image:
                /* 1. Verde Esmeralda (Renováveis / Natureza) no topo esquerdo */
                radial-gradient(circle at 10% 0%, rgba(16, 185, 129, 0.09), transparent 50%),

                /* 2. Azul Ciano (Tecnologia / Inovação) no fundo direito */
                radial-gradient(circle at 90% 100%, rgba(14, 165, 233, 0.08), transparent 50%),

                /* 3. Laranja/Âmbar sutil (A chama do Biogás / Geração) no meio direito */
                radial-gradient(circle at 85% 30%, rgba(245, 158, 11, 0.04), transparent 45%),

                /* 4. Malha Grid pontilhada (Toque Futurista B2B) */
                linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);

            /* Define os tamanhos: os 3 primeiros são os brilhos, os 2 últimos formam o Grid de 40x40px */
            background-size: 100% 100%, 100% 100%, 100% 100%, 40px 40px, 40px 40px;
            background-attachment: fixed; /* O fundo fica fixo enquanto o portal rola, dando profundidade */

            color: #e2e8f0;
            font-family: 'Plus Jakarta Sans', sans-serif;
        }

        a { text-decoration: none; transition: 0.3s ease; }
        .text-gradient { background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        .hover-primary:hover { color: var(--color-primary) !important; }
        .hover-white:hover { color: #fff !important; }
        .transition-300 { transition: 0.3s ease; }

        *{
            font-family: 'Plus Jakarta Sans', sans-serif;
        }

        /* Garante a exibição no hover apenas em telas grandes (Desktop) */
        @media (min-width: 992px) {
            .dropdown-hover:hover > .dropdown-menu {
                display: block;
                margin-top: 0; /* Remove a margem real que causa o corte */
                animation: fadeInMenu 0.3s ease forwards;
            }

            /* A PONTE INVISÍVEL: Cria uma área sensível acima do menu */
            .dropdown-hover > .dropdown-menu::before {
                content: "";
                position: absolute;
                top: -15px; /* Altura do 'buraco' entre o link e o menu */
                left: 0;
                width: 100%;
                height: 15px;
                background: transparent;
            }
        }

        /* Animação suave para não aparecer bruscamente */
        @keyframes fadeInMenu {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Animação Global */
        .fade-in-up {
            opacity: 0;
            transform: translateY(20px);
            transition: 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }
        /* Quando visível, o transform deve ser 'none' para não quebrar o sticky */
        .fade-in-up.visible {
            opacity: 1;
            transform: none !important;
        }

        /* Estrutura da Sidebar */
        .sidebar-sticky {
            position: -webkit-sticky;
            position: sticky;
            top: 110px; /* Distância do topo (ajuste para sua navbar fixa) */
            z-index: 10;
            height: fit-content; /* Garante que a div tenha apenas a altura do conteúdo */
        }

        /* =======================================
           2. PADRONIZAÇÃO DE TÍTULOS DE SESSÃO
           ======================================= */
        .section-header {
            display: flex; justify-content: space-between; align-items: flex-end;
            /* border-bottom: 1px solid rgba(255, 255, 255, 0.1); */
            padding-bottom: 12px; margin-bottom: 25px;
        }
        .section-title {
            font-size: 1.6rem; font-weight: 800; color: #fff; margin: 0;
            display: flex; align-items: center; gap: 8px; letter-spacing: -0.5px;
        }
        .section-title .dot { color: var(--color-success); }
        .section-link {
            font-size: 0.85rem; font-weight: 700; color: var(--color-primary);
            text-transform: uppercase; letter-spacing: 1px; display: flex; align-items: center; gap: 5px;
        }
        .section-link:hover { color: #fff; }

        /* Setas de Navegação (Sliders) */
        .nav-arrows button {
            background: rgba(255, 255, 255, 0.05); border: 1px solid var(--glass-border);
            color: #cbd5e1; font-size: 1.2rem; cursor: pointer; transition: 0.3s;
            width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
        }
        .nav-arrows button:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

        /* =======================================
        ESTILOS DO MENU PRINCIPAL E DROPDOWNS
        ======================================= */

        /* Links da Navbar */
        .navbar-nav .nav-link {
            font-size: 0.95rem;
            padding-left: 12px !important;
            padding-right: 12px !important;
            transition: color 0.3s ease;
        }

        /* Dropdown Glass Menor (Para os menus de texto) */
        .glass-dropdown-sm {
            background: rgba(15, 23, 42, 0.95);
            backdrop-filter: blur(16px);
            border: 1px solid var(--glass-border);
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
            padding: 10px;
            margin-top: 10px !important;
            min-width: 220px;
        }

        .glass-dropdown-sm .dropdown-item {
            color: #cbd5e1;
            font-size: 0.9rem;
            font-weight: 500;
            padding: 8px 16px;
            border-radius: 6px;
            transition: all 0.2s ease;
        }

        .glass-dropdown-sm .dropdown-item:hover,
        .glass-dropdown-sm .dropdown-item:focus {
            background: rgba(59, 130, 246, 0.1);
            color: #fff;
            transform: translateX(4px); /* Leve animação para a direita */
        }

        /* Abrir dropdown ao passar o mouse (apenas em telas grandes) */
        @media (min-width: 992px) {
            .dropdown-hover:hover > .dropdown-menu {
                display: block;
                animation: fadeInUP 0.3s ease forwards;
            }
        }

        @keyframes fadeInUP {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

    /* =========================================
       ESTILOS PREMIUM DO MENU MOBILE (OFFCANVAS)
       ========================================= */
    .dark-glass-offcanvas {
        background: rgba(2, 6, 23, 0.95) !important;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-left: 1px solid rgba(255, 255, 255, 0.08);
        width: 320px !important;
    }
    .offcanvas-mobile-link {
        color: #f8fafc;
        font-size: 1.1rem;
        font-weight: 600;
        padding: 12px 0;
        text-decoration: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        transition: color 0.3s ease;
    }
    .offcanvas-mobile-link:hover, .offcanvas-mobile-link[aria-expanded="true"] {
        color: var(--color-primary, #3b82f6);
    }
    .mobile-submenu {
        background: rgba(255, 255, 255, 0.02);
        border-radius: 8px;
        margin-top: 5px;
        margin-bottom: 10px;
    }
    .mobile-submenu-link {
        color: #cbd5e1;
        text-decoration: none;
        padding: 10px 15px;
        display: block;
        font-size: 0.95rem;
        border-left: 2px solid transparent;
        transition: all 0.2s;
    }
    .mobile-submenu-link:hover {
        color: #fff;
        border-left-color: var(--color-primary, #3b82f6);
        background: rgba(255, 255, 255, 0.05);
    }
    /* Rotação do ícone ao abrir o submenu */
    .offcanvas-mobile-link .bi-chevron-down {
        transition: transform 0.3s ease;
    }
    .offcanvas-mobile-link[aria-expanded="true"] .bi-chevron-down {
        transform: rotate(180deg);
    }

        /* =======================================
           3. NAVBAR, MEGAMENU E PESQUISA
           ======================================= */
        .navbar-top { backdrop-filter: blur(20px); background: rgba(2, 6, 23, 0.90); border-bottom: 1px solid var(--glass-border); padding: 12px 0; position: fixed; top: 0; width: 100%; z-index: 1030; }

        .glass-dropdown { background: rgba(15, 23, 42, 0.95); backdrop-filter: blur(16px); border: 1px solid var(--glass-border); border-radius: 16px; box-shadow: 0 15px 40px rgba(0,0,0,0.6); padding: 16px; margin-top: 15px !important; }
        .megamenu { width: 320px; max-height: 85vh; overflow-y: auto; }
        .dropdown-toggle-apps::after { display: none; }
        .app-section-title { font-size: 0.75rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 1px; margin: 10px 8px 12px; }

        .apps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
        .app-item { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px 8px; border-radius: 12px; color: #e2e8f0; border: 1px solid transparent; }
        .app-item:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); color: #fff; }
        .app-item i { margin-bottom: 10px; transition: transform 0.2s ease; }
        .app-item:hover i { transform: scale(1.15); }
        .app-item span { font-size: 0.8rem; font-weight: 500; text-align: center; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

        @media (min-width: 992px) {
            .glass-dropdown.megamenu { width: 800px; padding: 24px; }
            .megamenu-inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
            .apps-grid { grid-template-columns: repeat(2, 1fr); }
        }

        /* Pesquisa Header */
        .search-bar-header { transition: all 0.3s ease; }
        .search-bar-header:focus-within { border-color: var(--color-primary) !important; background: rgba(59, 130, 246, 0.08) !important; box-shadow: 0 0 15px rgba(59, 130, 246, 0.3); }
        .search-bar-header input::placeholder { color: #64748b; }
        .search-bar-header input:focus { outline: none; box-shadow: none; }

        .mobile-search-dropdown { position: absolute; top: 100%; left: 0; width: 100%; background: rgba(2, 6, 23, 0.95); backdrop-filter: blur(20px); border-bottom: 1px solid var(--glass-border); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5); z-index: 1020; }

        /* Login User Pill */
        .user-pill { background: rgba(255,255,255,0.05); border: 1px solid var(--glass-border); border-radius: 50px; padding: 4px 12px 4px 4px; display: flex; align-items: center; gap: 10px; cursor: pointer; }
        .user-pill:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); }
        .user-avatar { background: linear-gradient(135deg, #3b82f6, #0ea5e9); color: #fff; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; object-fit: cover;}
        .user-dropdown-item { color: #cbd5e1; padding: 10px 12px; border-radius: 8px; display: flex; align-items: center; width: 100%; margin-bottom: 4px; }
        .user-dropdown-item:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
        .btn-logout { color: #ef4444; padding: 10px 12px; border-radius: 8px; display: flex; align-items: center; width: 100%; background: transparent; border: none; font-size: 1rem; transition: 0.2s;}
        .btn-logout:hover { background: rgba(239, 68, 68, 0.1); color: #f87171; }

        /* =======================================
        4. TICKER NEWS (Com Limite de Corte)
        ======================================= */
        .ticker-container {
            display: flex;
            align-items: center;
            overflow: hidden;
            background: rgba(255, 255, 255, 0.02);
            border-radius: 8px;
            padding: 0; /* Removido padding lateral para a label encostar na borda */
            border: 1px solid var(--glass-border);
            margin-top: 90px;
            margin-bottom: 25px;
            height: 45px; /* Altura fixa para alinhar perfeitamente */
        }

        .ticker-label {
            background: var(--color-danger);
            color: #fff;
            font-weight: 800;
            font-size: 0.75rem;
            text-transform: uppercase;
            padding: 0 15px;
            height: 100%; /* Ocupa toda a altura para vedar a passagem do texto */
            display: flex;
            align-items: center;
            gap: 5px;
            z-index: 10; /* Fica acima de qualquer resquício de texto */
            white-space: nowrap;
            box-shadow: 10px 0 15px rgba(2, 6, 23, 0.6); /* Sombra que ajuda a "apagar" o texto ao entrar */
        }

        /* O SEGREDO: Esta div define onde o texto começa e termina de aparecer */
        .ticker-content {
            flex-grow: 1;
            overflow: hidden; /* Corta o texto exatamente no limite da label */
            display: flex;
            align-items: center;
            height: 100%;
        }

        .ticker-move {
            display: flex;
            white-space: nowrap;
            animation: ticker 55s linear infinite;
        }

        .ticker-move:hover { animation-play-state: paused; }

        .ticker-item {
            display: flex;
            align-items: center;
            padding-right: 3rem;
            color: #cbd5e1;
            font-size: 0.9rem;
        }

        .ticker-item a { color: #cbd5e1; transition: 0.3s; text-decoration: none; }
        .ticker-item a:hover { color: var(--color-primary); }

        @keyframes ticker {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        /* =======================================
           5. HERO NEWS GRID E CARDS BÁSICOS
           ======================================= */
        .news-overlay { position: relative; border-radius: 12px; overflow: hidden; display: block; background: #000; height: 100%; }
        .news-overlay-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; opacity: 0.8; }
        .news-overlay::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 80%; background: linear-gradient(to top, rgba(2, 6, 23, 1) 0%, rgba(2, 6, 23, 0) 100%); z-index: 1; }
        .news-overlay:hover .news-overlay-img { transform: scale(1.05); opacity: 1; }
        .news-overlay-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 25px; z-index: 2; }
        .news-tag { display: inline-block; padding: 4px 10px; border-radius: 4px; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
        .news-title { color: #fff; font-weight: 800; line-height: 1.25; text-shadow: 0 2px 10px rgba(0,0,0,0.5); transition: 0.3s; margin-bottom: 8px; }
        .news-overlay:hover .news-title { color: var(--color-secondary); }

        .hero-main { height: 480px; }
        .hero-sub { height: 230px; }
        .hero-main .news-title { font-size: clamp(1.8rem, 2.5vw, 2.2rem); }
        .hero-sub .news-title { font-size: 1.15rem; }
        @media (max-width: 991px) { .hero-main, .hero-sub { height: 300px; margin-bottom: 15px; } }

        .glass-panel { background: var(--dark-panel); border: 1px solid var(--glass-border); border-radius: 16px; padding: 30px; }
        .glass-card { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 16px; padding: 20px; transition: 0.3s; }
        .glass-card:hover { border-color: rgba(59, 130, 246, 0.3); transform: translateY(-4px); }

        .ad-space { width: 100%; background: rgba(255, 255, 255, 0.02); border: 1px dashed rgba(255, 255, 255, 0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #475569; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 2px; position: relative; }
        .ad-space::before { content: 'Espaço Publicitário'; position: absolute; }
        .ad-leaderboard { height: 120px; margin: 40px 0; }
        .ad-square { height: 300px; margin-bottom: 20px; }
        /* Força os anúncios a nunca ultrapassarem a largura da tela no mobile */
        .ad-wrapper {
            max-width: 100%;
            overflow-x: clip;
            text-align: center;
        }
        .ad-wrapper ins,
        .ad-wrapper iframe,
        .ad-wrapper img {
            max-width: 100% !important;
            height: auto !important; /* Mantém a proporção da imagem ao encolher */
            display: inline-block;
        }

        /* =======================================
           6. COLUNISTAS (eb STYLE)
           ======================================= */
        .colunistas-track { display: flex; gap: 30px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 10px; }
        .colunistas-track::-webkit-scrollbar { display: none; }
        .colunista-item { display: flex; align-items: center; gap: 15px; min-width: 340px; max-width: 380px; scroll-snap-align: start; text-decoration: none; }
        .colunista-avatar { width: 80px; height: 80px; border-radius: 50%; border: 2px solid var(--color-primary); padding: 3px; background-clip: content-box; object-fit: cover; flex-shrink: 0; transition: 0.3s; }
        .colunista-item:hover .colunista-avatar { border-color: var(--color-secondary); transform: scale(1.05); }
        .colunista-info { display: flex; flex-direction: column; justify-content: center; }
        .colunista-name { font-size: 1.15rem; font-weight: 800; color: #f8fafc; margin-bottom: 4px; transition: 0.3s; line-height: 1.1; }
        .colunista-item:hover .colunista-name { color: var(--color-primary); }
        .colunista-headline { font-size: 0.9rem; color: #cbd5e1; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

        /* =======================================
           7. RADAR DO SETOR (PREMIUM FUTURISTA)
           ======================================= */
        .radar-card-premium {
            background: linear-gradient(180deg, rgba(15, 23, 42, 0.4) 0%, rgba(2, 6, 23, 0.8) 100%);
            backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 20px; position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .radar-card-premium:hover { transform: translateY(-8px); border-color: rgba(255, 255, 255, 0.15); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); }

        .radar-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 180px; height: 180px; border-radius: 50%; filter: blur(70px); z-index: 0; opacity: 0.15; transition: opacity 0.4s ease; pointer-events: none; }
        .radar-card-premium:hover .radar-glow { opacity: 0.35; }

        .radar-header-premium { padding: 20px; text-align: center; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; font-size: 0.9rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); display: flex; align-items: center; justify-content: center; gap: 8px; position: relative; z-index: 2; }
        .radar-body-premium { padding: 30px 25px; position: relative; z-index: 2; }
        .radar-body-premium .metric-title { font-size: 1.05rem; font-weight: 700; color: #f8fafc; margin-bottom: 20px; line-height: 1.4; }
        .radar-body-premium .metric-value { font-size: 4rem; font-weight: 800; line-height: 1; margin-bottom: 5px; letter-spacing: -2px; }
        .radar-body-premium .metric-value span { font-size: 1.2rem; font-weight: 600; letter-spacing: 0; }
        .radar-body-premium .metric-sub { font-size: 0.9rem; font-weight: 600; color: #cbd5e1; margin-bottom: 25px; }
        .radar-body-premium .metric-source { font-size: 0.75rem; color: #64748b; font-weight: 600; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 1px; }

        .radar-list-premium { list-style: none; padding: 0; margin: 0 0 20px; text-align: left; }
        .radar-list-premium li { display: flex; justify-content: space-between; border-bottom: 1px dashed rgba(255,255,255,0.1); padding: 12px 0; font-size: 0.95rem; color: #cbd5e1; }
        .radar-list-premium li:last-child { border-bottom: none; }
        .btn-radar { width: 100%; border-radius: 50px; font-weight: 700; text-transform: uppercase; padding: 14px; font-size: 0.85rem; letter-spacing: 1px; transition: 0.3s; display: inline-flex; justify-content: center; align-items: center; gap: 8px; }

        /* Temas Radar */
        .radar-biogas { border-top: 3px solid #facc15; }
        .radar-biogas .radar-header-premium { color: #facc15; }
        .radar-biogas .radar-glow { background: #facc15; }
        .radar-biogas .metric-value { background: linear-gradient(135deg, #fef08a, #f59e0b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        .radar-biogas .btn-radar { background: rgba(250, 204, 21, 0.05); color: #facc15; border: 1px solid rgba(250,204,21,0.2); }
        .radar-biogas .btn-radar:hover { background: #facc15; color: #020617; box-shadow: 0 0 20px rgba(250, 204, 21, 0.4); }

        .radar-biometano { border-top: 3px solid #4ade80; }
        .radar-biometano .radar-header-premium { color: #4ade80; }
        .radar-biometano .radar-glow { background: #4ade80; }
        .radar-biometano .metric-value { background: linear-gradient(135deg, #86efac, #16a34a); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        .radar-biometano .btn-radar { background: rgba(74, 222, 128, 0.05); color: #4ade80; border: 1px solid rgba(74, 222, 128, 0.2); }
        .radar-biometano .btn-radar:hover { background: #4ade80; color: #020617; box-shadow: 0 0 20px rgba(74, 222, 128, 0.4); }

        .radar-mundo { border-top: 3px solid #38bdf8; }
        .radar-mundo .radar-header-premium { color: #38bdf8; }
        .radar-mundo .radar-glow { background: #38bdf8; }
        .radar-mundo .metric-value { background: linear-gradient(135deg, #bae6fd, #0284c7); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        .radar-mundo .btn-radar { background: rgba(56, 189, 248, 0.05); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.2); }
        .radar-mundo .btn-radar:hover { background: #38bdf8; color: #082f49; box-shadow: 0 0 20px rgba(56, 189, 248, 0.4); }

        /* =======================================
           8. ÚLTIMAS NOTÍCIAS (eb GRID)
           ======================================= */
        .eb-card { display: flex; flex-direction: column; text-decoration: none; transition: 0.3s; height: 100%; }
        .eb-card:hover .eb-title { color: var(--color-primary); }
        .eb-img-wrap { position: relative; border-radius: 6px; overflow: hidden; margin-bottom: 12px; }
        .eb-img { width: 100%; aspect-ratio: 16/10; object-fit: cover; transition: transform 0.5s ease; }
        .eb-card:hover .eb-img, .eb-card-hz:hover .eb-img { transform: scale(1.05); }

        .eb-badge-sq { position: absolute; top: 0; left: 0; width: 14px; height: 14px; background-color: var(--color-success); z-index: 2; border-bottom-right-radius: 4px; }
        .eb-title { color: #f8fafc; font-size: 1.15rem; font-weight: 800; line-height: 1.3; margin-bottom: 8px; transition: 0.3s; }
        .eb-excerpt { display: flex; align-items: flex-start; gap: 6px; color: #94a3b8; font-size: 0.85rem; line-height: 1.4; }
        .eb-arrow { color: var(--color-secondary); font-size: 1.0rem; margin-top: 2px; }

        .eb-card-hz { display: flex; flex-direction: row; gap: 15px; text-decoration: none; transition: 0.3s; align-items: flex-start; }
        .eb-card-hz:hover .eb-title { color: var(--color-primary); }
        .eb-card-hz .eb-img-wrap { width: 120px; flex-shrink: 0; margin-bottom: 0; }
        .eb-card-hz .eb-img { aspect-ratio: 4/3; }
        .eb-card-hz .eb-title { font-size: 0.95rem; margin-bottom: 4px; }

        .eb-cat-label { display: inline-block; background-color: var(--color-danger); color: #fff; font-size: 0.65rem; font-weight: 800; text-transform: uppercase; padding: 2px 6px; border-radius: 3px; margin-bottom: 6px; letter-spacing: 0.5px; }
        .eb-cat-agro { background-color: #d97706; }
        .eb-cat-infra { background-color: #2563eb; }
        @media (max-width: 991px) { .eb-card-hz { flex-direction: column; gap: 8px; } .eb-card-hz .eb-img-wrap { width: 100%; } .eb-card-hz .eb-img { aspect-ratio: 16/9; } }

        /* =======================================
           9. WEBSTORIES (ENTREVISTAS eb)
           ======================================= */
        .story-track { display: flex; gap: 15px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 15px; }
        .story-track::-webkit-scrollbar { display: none; }
        .story-card {
            position: relative;
            min-width: 280px; /* Aumentado de 190px para 280px */
            width: 280px;
            height: 340px;
            border-radius: 12px; /* Borda levemente mais suave para acompanhar a largura */
            overflow: hidden;
            scroll-snap-align: start;
            display: block;
            background: #020617;
            flex-shrink: 0;
        }

        .story-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top center; /* Garante que o topo da imagem (cabeças) não seja cortado */
            transition: transform 0.6s ease;
            opacity: 0.85;
        }
        .story-card:hover .story-img { transform: scale(1.05); opacity: 1; }
        .story-badge { position: absolute; top: 0; left: 0; width: 22px; height: 22px; background: var(--color-danger); z-index: 3; border-bottom-right-radius: 6px; }
        .story-overlay { position: absolute; bottom: 0; left: 0; width: 100%; height: 75%; background: linear-gradient(to top, rgba(2, 6, 23, 1) 0%, rgba(2, 6, 23, 0) 100%); z-index: 1; pointer-events: none; }
        .story-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 15px; z-index: 2; }
        .story-card-title { color: #fff; font-size: 0.95rem; font-weight: 700; line-height: 1.35; margin: 0; text-shadow: 0 2px 4px rgba(0,0,0,0.8); transition: 0.3s; }
        .story-card:hover .story-card-title { color: var(--color-secondary); }

        /* =======================================
           10. SEGMENTOS E EVENTOS
           ======================================= */
        .segment-card { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 16px; display: flex; align-items: flex-start; gap: 15px; text-decoration: none; transition: 0.3s; height: 100%; }
        .segment-card:hover { background: rgba(255, 255, 255, 0.04); border-color: rgba(59, 130, 246, 0.4); transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); }
        .segment-icon { width: 42px; height: 42px; border-radius: 10px; background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(14, 165, 233, 0.05)); border: 1px solid rgba(59, 130, 246, 0.2); color: var(--color-secondary); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; transition: 0.3s; }
        .segment-card:hover .segment-icon { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
        .segment-info h4 { color: #f8fafc; font-size: 1.25rem; font-weight: 700; margin-bottom: 5px; transition: 0.3s; }
        .segment-card:hover .segment-info h4 { color: var(--color-secondary); }
        .segment-info p { color: #94a3b8; font-size: 0.8rem; line-height: 1.4; margin: 0; }

        .evento-card { display: flex; gap: 15px; background: rgba(255,255,255,0.02); border-radius: 12px; padding: 15px; transition: 0.3s; border: 1px solid transparent; }
        .evento-card:hover { background: rgba(255,255,255,0.04); border-color: var(--glass-border); }
        .evento-date { background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.2); border-radius: 8px; min-width: 60px; text-align: center; padding: 10px 5px; color: var(--color-primary); }
        .evento-date .day { font-size: 1.5rem; font-weight: 800; line-height: 1; display: block; }
        .evento-date .month { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; }

        /* =======================================
           11. BIOGÁS PLAY (VÍDEOS)
           ======================================= */
        .play-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 10px; }
        .play-track::-webkit-scrollbar { display: none; }
        .play-card { min-width: 280px; max-width: 280px; scroll-snap-align: start; display: block; text-decoration: none; transition: 0.3s; }
        .play-img-wrap { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 16/9; margin-bottom: 12px; }
        .play-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
        .play-card:hover .play-img { transform: scale(1.05); }
        .play-btn-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 32px; background: #fff; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #020617; font-size: 1.5rem; transition: 0.3s; }
        .play-card:hover .play-btn-icon { background: var(--color-danger); color: #fff; }
        .play-card-title { color: #e2e8f0; font-size: 0.95rem; font-weight: 600; line-height: 1.4; transition: 0.3s; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
        .play-card:hover .play-card-title { color: var(--color-danger); }

        /* =======================================
           TALK & JOBS (PREMIUM FUTURISTA)
           ======================================= */
        /* Luzes de Fundo (Aura) */
        .ambient-glow-wrapper { position: relative; z-index: 1; }
        .ambient-glow {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            width: 250px; height: 250px; border-radius: 50%; filter: blur(90px);
            z-index: -1; pointer-events: none; opacity: 0.25; transition: 0.5s ease;
        }
        .ambient-glow.warning { background: var(--color-warning); }
        .ambient-glow.info { background: var(--color-secondary); }

        .ambient-glow-wrapper:hover .ambient-glow { opacity: 0.4; }

        /* Cartões Premium Glass */
        .premium-card {
            background: linear-gradient(145deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
            backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255,255,255,0.05); border-radius: 16px;
            padding: 16px; display: flex; gap: 18px; align-items: center;
            text-decoration: none; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            position: relative; overflow: hidden;
        }

        /* Efeito de borda luminosa no Hover */
        .premium-card::before {
            content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: radial-gradient(800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255,255,255,0.06), transparent 40%);
            z-index: 0; pointer-events: none; opacity: 0; transition: opacity 0.4s ease;
        }

        .premium-card.talk:hover {
            border-color: rgba(245, 158, 11, 0.4); transform: translateX(8px);
            box-shadow: 0 15px 35px rgba(0,0,0,0.3), 0 0 20px rgba(245, 158, 11, 0.1);
        }
        .premium-card.job:hover {
            border-color: rgba(14, 165, 233, 0.4); transform: translateX(8px);
            box-shadow: 0 15px 35px rgba(0,0,0,0.3), 0 0 20px rgba(14, 165, 233, 0.1);
        }
        .premium-card:hover::before { opacity: 1; }

        /* Elementos Internos */
        .premium-card-content { position: relative; z-index: 1; flex-grow: 1; }

        /* Thumb do Podcast */
        .talk-thumb-premium {
            width: 100px; height: 100px; border-radius: 12px; object-fit: cover;
            border: 1px solid rgba(255,255,255,0.1); position: relative; z-index: 1;
        }
        .talk-play-premium {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            width: 40px; height: 40px; border-radius: 50%;
            background: rgba(245, 158, 11, 0.85); backdrop-filter: blur(4px);
            color: #fff; display: flex; align-items: center; justify-content: center;
            font-size: 1.5rem; transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 2;
            box-shadow: 0 0 15px rgba(245, 158, 11, 0.5);
        }
        .premium-card.talk:hover .talk-play-premium { transform: translate(-50%, -50%) scale(1.15); background: #f59e0b; }

        /* Logo do Job */
        .job-logo-premium {
            width: 65px; height: 65px; border-radius: 14px; background: rgba(255,255,255,0.9);
            padding: 8px; object-fit: contain; border: 1px solid rgba(255,255,255,0.2);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2); z-index: 1;
        }

        /* Tags Premium */
        .badge-premium {
            display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 0.7rem;
            font-weight: 800; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px;
        }
        .badge-talk { background: rgba(245, 158, 11, 0.15); color: #facc15; border: 1px solid rgba(245, 158, 11, 0.3); }
        .badge-job { background: rgba(14, 165, 233, 0.15); color: #38bdf8; border: 1px solid rgba(14, 165, 233, 0.3); }

        .premium-card-title { color: #f8fafc; font-size: 1.05rem; font-weight: 700; line-height: 1.3; margin-bottom: 6px; transition: 0.3s; }
        .premium-card.talk:hover .premium-card-title { color: #facc15; }
        .premium-card.job:hover .premium-card-title { color: #38bdf8; }

        .premium-card-meta { display: flex; align-items: center; gap: 12px; color: #94a3b8; font-size: 0.8rem; font-weight: 500; }
        .premium-card-meta i { font-size: 0.9rem; }
        /* =======================================
           13. MAIS LIDAS (eb RANKING)
           ======================================= */
        .mais-lidas-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 10px; }
        .mais-lidas-track::-webkit-scrollbar { display: none; }
        .mais-lidas-card { min-width: 220px; max-width: 220px; scroll-snap-align: start; display: block; text-decoration: none; transition: 0.3s; }
        .mais-lidas-img-wrap { position: relative; border-radius: 6px; overflow: hidden; aspect-ratio: 16/9; margin-bottom: 12px; }
        .mais-lidas-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
        .mais-lidas-card:hover .mais-lidas-img { transform: scale(1.05); }
        .mais-lidas-badge { position: absolute; top: 0; left: 0; width: 24px; height: 24px; background-color: var(--color-primary); color: #fff; font-size: 0.85rem; font-weight: 800; display: flex; align-items: center; justify-content: center; z-index: 2; border-bottom-right-radius: 4px; }
        .mais-lidas-title { color: #e2e8f0; font-size: 0.95rem; font-weight: 700; line-height: 1.35; transition: 0.3s; margin: 0; }
        .mais-lidas-card:hover .mais-lidas-title { color: var(--color-primary); }

        /* Estilo Premium para os botões sociais */
        .btn-social-premium {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 38px;
            height: 38px;
            border-radius: 10px; /* Borda quadrada levemente arredondada (squircle) */
            background: rgba(255, 255, 255, 0.03); /* Fundo de vidro quase transparente */
            border: 1px solid var(--glass-border);
            color: #cbd5e1;
            text-decoration: none;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Animação elástica suave */
        }

        .btn-social-premium:hover {
            background: var(--color-primary); /* Acende com a cor principal do portal */
            color: #ffffff;
            border-color: var(--color-primary);
            transform: translateY(-5px); /* Botão "pula" para cima ao passar o mouse */
            box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4); /* Brilho neon inferior */
        }

        .btn-social-premium i {
            font-size: 1.1rem;
            transition: transform 0.3s ease;
        }

        /* Leve pulo no ícone ao passar o mouse */
        .btn-social-premium:hover i {
            transform: scale(1.1);
        }

        /* =======================================
   PAGINAÇÃO PREMIUM - VERSÃO CORRIGIDA
   ======================================= */

/* 1. Garante que o contentor pai não esconda a paginação */
.pagination {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
    display: flex !important; /* Força a exibição */
    justify-content: center;
    gap: 10px;
    list-style: none;
}

/* 2. Estilo base dos botões (links) */
.page-link {
    background-color: rgba(255, 255, 255, 0.05) !important; /* Um pouco mais visível */
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important; /* Força texto branco */
    padding: 10px 18px !important;
    border-radius: 10px !important;
    transition: all 0.3s ease;
    text-decoration: none !important;
}

/* 3. Efeito de Hover (Passar o rato) */
.page-link:hover {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(59, 130, 246, 0.3);
}

/* 4. Página Ativa (Onde o utilizador está) */
.page-item.active .page-link {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #ffffff !important;
    z-index: 3;
    font-weight: bold;
}

/* 5. Botões Desativados (Anterior/Próximo no fim da lista) */
.page-item.disabled .page-link {
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
    color: #475569 !important;
    opacity: 0.5;
    cursor: not-allowed;
}

/* 6. CORREÇÃO DE TAMANHO (Caso ainda apareçam os ícones gigantes do Tailwind) */
.pagination svg {
    width: 20px !important; /* Limita o tamanho de qualquer ícone SVG */
    height: 20px !important;
}

/* 7. REMOVE O TEXTO "Showing 1 to 12..." que às vezes quebra o layout no dark mode */
.pagination .small.text-muted,
.pagination .d-none.flex-sm-fill {
    display: none !important;
}

/* =========================================
       ANIMAÇÃO SUTIL DE GÁS DENTRO DOS CARDS
       ========================================= */
    .card-bubbles-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 0;
        pointer-events: none;
        border-radius: inherit; /* Respeita o arredondamento do card */
    }

    .card-bubble {
        position: absolute;
        bottom: -30px;
        /* Reduzido de 0.25 para 0.12 */
        background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.12), transparent 70%);
        border-radius: 50%;
        /* Sombras reduzidas pela metade (de 0.4 para 0.2 e de 0.3 para 0.15) */
        box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.2), inset 2px 2px 4px rgba(255, 255, 255, 0.15);
        animation: card-rise infinite ease-in;
        opacity: 0;
    }

    /* Bolhas menores, tempos e trajetórias diferentes */
    .card-bubble:nth-child(1) { width: 22px; height: 22px; left: 15%; animation-duration: 7s; animation-delay: 0s; }
    .card-bubble:nth-child(2) { width: 10px; height: 10px; left: 35%; animation-duration: 5s; animation-delay: 2s; }
    .card-bubble:nth-child(3) { width: 18px; height: 18px; left: 55%; animation-duration: 8s; animation-delay: 1s; }
    .card-bubble:nth-child(4) { width: 28px; height: 28px; left: 75%; animation-duration: 10s; animation-delay: 4s; }
    .card-bubble:nth-child(5) { width: 14px; height: 14px; left: 85%; animation-duration: 6s; animation-delay: 3s; }

    @keyframes card-rise {
        0% {
            bottom: -30px;
            transform: translateX(0) scale(0.8);
            opacity: 0;
        }
        20% {
            opacity: 0.45; /* Pico de visibilidade reduzido pela metade (era 0.9) */
        }
        50% {
            transform: translateX(8px) scale(1.05);
        }
        80% {
            opacity: 0.3; /* Reduzido pela metade (era 0.6) */
        }
        100% {
            bottom: 110%;
            transform: translateX(-8px) scale(0.9);
            opacity: 0;
        }
    }

    /* * Aplica o estado inicial transparente para as imagens,
     * MAS IGNORA as imagens injetadas pelo Revive Adserver (dentro da tag <ins>)
     */
    img:not(ins img) {
        opacity: 0;
        transition: opacity 0.8s ease-in-out;
    }

    /* Classe que o Javascript vai adicionar quando o download terminar */
    img.is-loaded {
        opacity: 1;
    }