Simulador da Libertadores 2026: Preveja o campeão

Redação 365Scores29/05/2026 - 12:51 pm

O sorteio da Conmebol definiu o chaveamento oficial do mata-mata da Libertadores 2026, e agora a ansiedade do torcedor está no nível máximo. Com seis clubes brasileiros vivos na disputa (Flamengo, Palmeiras, Fluminense, Corinthians, Cruzeiro e Mirassol), a rota rumo à Glória Eterna promete ser uma das mais disputadas dos últimos anos.

Quem avança para as quartas de final? Teremos clássicos nacionais? Quem vai levantar a taça mais desejada das Américas? Chegou a hora de você bancar o vidente e projetar todo o campeonato!

➡️ Simulador da Sul-Americana 2026: Preveja o campeão
➡️ Simulador Copa do Mundo 2026: faça as contas e preveja o campeão!

Como funciona o Simulador da Libertadores 365Scores?

Simular o mata-mata no 365Scores é muito simples e rápido. Siga o passo a passo:

Escolha os vencedores das oitavas de final: Analise os confrontos do chaveamento e clique no time que você acha que passa de fase.
Defina as quartas e semifinais: Conforme os times avançam, novos cruzamentos são formados automaticamente. Continue palpitando!
Selecione o grande campeão: Escolha quem vence a final em jogo único e veja a sua projeção concluída.

Simule o caminho do seu time no chaveamento da Libertadores:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body { margin: 0; padding: 0; background-color: #151E22; font-family: Arial, sans-serif; }
        
        #lib-bracket-wrapper {
            --bg-main: #151E22;
            --bg-card: #1B262B;
            --bg-hover: #223036;
            --text-white: #FFFFFF;
            --text-gray: #A0B0B9;
            --text-gold: #D4AF37;
            --border-color: #33464F;
            width: 100%; background-color: var(--bg-main); color: var(--text-white);
            padding: 20px; border-radius: 12px; box-sizing: border-box;
        }
        #lib-bracket-wrapper * { box-sizing: border-box; }

.lib-sim-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; border-bottom: 1px solid var(--border-color); padding-bottom: 15px; }
        .lib-sim-title { font-size: clamp(16px, 2.5vw, 22px); font-weight: 900; margin: 0; color: var(--text-gold); text-transform: uppercase; }
        .lib-sim-desc { font-size: 13px; color: var(--text-gray); margin: 5px 0 0; }
        .lib-sim-logo img { height: 30px; }

.lib-phase-title { font-size: 14px; font-weight: 900; text-align: center; color: var(--text-gold); margin: 20px 0 15px; letter-spacing: 2px; text-transform: uppercase; }

/* Grid de Oitavas */
        .lib-matches-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 30px; }
        .lib-match-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; padding: 10px; }
        
        .lib-matchup-row { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
        
        .lib-team-btn {
            flex: 1; display: flex; flex-direction: column; align-items: center; padding: 10px 5px;
            cursor: pointer; border-radius: 6px; border: 2px solid transparent; transition: all 0.2s;
            min-width: 0; 
        }
        .lib-team-btn:hover { background: var(--bg-hover); }
        .lib-team-btn img { width: 32px; height: 32px; object-fit: contain; margin-bottom: 5px; }
        .lib-team-btn span { 
            font-size: 11px; font-weight: bold; width: 100%; text-align: center;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }

.lib-team-btn.selected { border-color: var(--text-gold); background: rgba(212, 175, 55, 0.1); }
        .lib-team-btn.selected span { color: var(--text-gold); }
        .lib-team-btn.unselected { opacity: 0.3; filter: grayscale(100%); }

.lib-vs-badge { font-size: 10px; font-weight: 900; color: var(--border-color); }

/* Árvore de Quartas e Semis */
        .lib-tree-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; }
        .lib-tree-match { 
            display: flex; align-items: center; background: var(--bg-card); border: 1px solid var(--border-color); 
            border-radius: 8px; overflow: hidden; height: 50px;
        }
        .lib-tree-team { 
            flex: 1; display: flex; align-items: center; gap: 8px; padding: 0 10px; height: 100%; cursor: pointer;
            min-width: 0; transition: 0.2s;
        }
        .lib-tree-team:hover { background: var(--bg-hover); }
        .lib-tree-team img { width: 24px; height: 24px; object-fit: contain; }
        .lib-tree-team span { 
            font-size: 12px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1;
        }
        .lib-tree-team.win { background: rgba(212, 175, 55, 0.15); color: var(--text-gold); }
        .lib-tree-team.empty { opacity: 0.2; cursor: default; }

.lib-tree-vs { width: 20px; text-align: center; font-size: 10px; font-weight: bold; color: var(--border-color); }

/* Final */
        .lib-final-area { max-width: 400px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; align-items: center; }
        .lib-champion-box { 
            text-align: center; padding: 20px; background: linear-gradient(145deg, #1B262B, #000);
            border: 2px solid var(--text-gold); border-radius: 15px; width: 100%;
            box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
        }
        .lib-champion-box h4 { margin: 0 0 10px; font-size: 12px; color: var(--text-gold); letter-spacing: 3px; }
        .lib-champion-box img { width: 80px; height: 80px; margin-bottom: 10px; }
        .lib-champion-box .name { font-size: 20px; font-weight: 900; text-transform: uppercase; }

/* Correção Mobile */
        @media (max-width: 600px) {
            .lib-matches-grid { grid-template-columns: 1fr; } /* Força 1 coluna para não quebrar */
            .lib-tree-grid { grid-template-columns: 1fr; }
            .lib-sim-header { flex-direction: column; gap: 15px; text-align: center; }
        }
    </style>
</head>
<body>

<div id="lib-bracket-wrapper">
    <div class="lib-sim-header">
        <div class="lib-sim-title-wrapper">
            <h2 class="lib-sim-title">CAMINHO ATÉ A FINAL: LIBERTADORES</h2>
            <p class="lib-sim-desc">Toque nos escudos para definir os classificados até a grande final!</p>
        </div>
        <div class="lib-sim-logo">
            <img decoding="async" src="https://imagecache.365scores.com/image/upload/f_png,c_limit,q_auto:eco,dpr_1/Website/logo_new" alt="365Scores">
        </div>
    </div>

<div>
        <h3 class="lib-phase-title">OITAVAS DE FINAL</h3>
        <div id="lib-oitavas-grid" class="lib-matches-grid"></div>

<div>
            <h3 class="lib-phase-title">QUARTAS DE FINAL</h3>
            <div id="lib-quartas-grid" class="lib-tree-grid"></div>
        </div>

<div>
            <h3 class="lib-phase-title">SEMIFINAIS</h3>
            <div id="lib-semis-grid" class="lib-tree-grid"></div>
        </div>

<div>
            <h3 class="lib-phase-title">GRANDE FINAL</h3>
            <div id="lib-final-container" class="lib-final-area"></div>
        </div>
    </div>
</div>

const oitavasArr = [
        { id: 1, t1: "EST", t2: "UCA" }, { id: 2, t1: "ROS", t2: "COR" },
        { id: 3, t1: "CRU", t2: "FLA" }, { id: 4, t1: "TOL", t2: "IDV" },
        { id: 5, t1: "MIR", t2: "LDU" }, { id: 6, t1: "PAL", t2: "CER" },
        { id: 7, t1: "PLA", t2: "COQ" }, { id: 8, t1: "FLU", t2: "RIV" }
    ];

let state = {
        oitavas: {}, quartas: {}, semis: {}, final: null
    };

window.pickOitavas = function(mid, team) {
        state.oitavas[mid] = team;
        const qid = Math.ceil(mid/2);
        state.quartas[qid] = null;
        const sid = Math.ceil(qid/2);
        state.semis[sid] = null;
        state.final = null;
        renderAll();
    };

window.pickQuartas = function(qid, team) {
        if(!team) return;
        state.quartas[qid] = team;
        const sid = Math.ceil(qid/2);
        state.semis[sid] = null;
        state.final = null;
        renderAll();
    };

window.pickSemis = function(sid, team) {
        if(!team) return;
        state.semis[sid] = team;
        state.final = null;
        renderAll();
    };

window.pickFinal = function(team) {
        if(!team) return;
        state.final = team;
        renderAll();
    };

function renderAll() {
        let ohtml = '';
        oitavasArr.forEach(function(m) {
            const win = state.oitavas[m.id];
            ohtml += '<div class="lib-match-card"><div class="lib-matchup-row">' +
                     '<div class="lib-team-btn ' + (win===m.t1?'selected':(win?'unselected':'')) + '" onclick="pickOitavas(' + m.id + ',\'' + m.t1 + '\')">' +
                     '<img decoding="async" src="' + teams[m.t1].img + '"><span>' + teams[m.t1].name + '</span></div>' +
                     '<div class="lib-vs-badge">VS</div>' +
                     '<div class="lib-team-btn ' + (win===m.t2?'selected':(win?'unselected':'')) + '" onclick="pickOitavas(' + m.id + ',\'' + m.t2 + '\')">' +
                     '<img decoding="async" src="' + teams[m.t2].img + '"><span>' + teams[m.t2].name + '</span></div>' +
                     '</div></div>';
        });
        document.getElementById('lib-oitavas-grid').innerHTML = ohtml;

let qhtml = '';
        [1, 2, 3, 4].forEach(function(i) {
            const t1 = state.oitavas[i*2-1]; const t2 = state.oitavas[i*2];
            const win = state.quartas[i];
            qhtml += renderTreeNode(i, t1, t2, win, 'pickQuartas');
        });
        document.getElementById('lib-quartas-grid').innerHTML = qhtml;

let shtml = '';
        [1, 2].forEach(function(i) {
            const t1 = state.quartas[i*2-1]; const t2 = state.quartas[i*2];
            const win = state.semis[i];
            shtml += renderTreeNode(i, t1, t2, win, 'pickSemis');
        });
        document.getElementById('lib-semis-grid').innerHTML = shtml;

const f1 = state.semis[1]; const f2 = state.semis[2];
        let fhtml = '<div class="lib-tree-match" style="width:100%; max-width:350px;">' +
                    renderTreeTeam(f1, state.final === f1, 'pickFinal') +
                    '<div class="lib-tree-vs">VS</div>' +
                    renderTreeTeam(f2, state.final === f2, 'pickFinal') +
                    '</div>';
        if(state.final) {
            fhtml += '<div class="lib-champion-box"><h4>CAMPEÃO 2026</h4>' +
                     '<img decoding="async" src="' + teams[state.final].img + '">' +
                     '<div class="name">' + teams[state.final].name + '</div></div>';
        }
        document.getElementById('lib-final-container').innerHTML = fhtml;

reportHeight();
    }

function renderTreeNode(id, t1, t2, win, func) {
        return '<div class="lib-tree-match">' +
               renderTreeTeam(t1, win === t1, func, id) +
               '<div class="lib-tree-vs">X</div>' +
               renderTreeTeam(t2, win === t2, func, id) +
               '</div>';
    }

function renderTreeTeam(id, isWin, func, mid) {
        if(!id) return '<div class="lib-tree-team empty"><img decoding="async" src="https://imagecache.365scores.com/image/upload/f_png,c_limit,q_auto:eco,dpr_1/Competitors/0"><span>A definir</span></div>';
        const arg1 = mid ? mid + ',' : '';
        return '<div class="lib-tree-team ' + (isWin?'win':'') + '" onclick="' + func + '(' + arg1 + '\'' + id + '\')"><img decoding="async" src="' + teams[id].img + '"><span>' + teams[id].name + '</span></div>';
    }

window.addEventListener('resize', reportHeight);
    
    renderAll();
})();
</script>
</body>
</html>