```css
:root {
    --bg: #f5f5f5;
    --card: #ffffff;
    --text: #222222;
    --muted: #777777;
    --border: #e2e2e2;
    --primary: #222222;
    --accent: #ffcc00;
    --success: #198754;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
}

.container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 20px;
}

/* =========================
   CABEÇALHO
   ========================= */

.top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.eyebrow {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #777;
    margin-bottom: 5px;
}

h1 {
    margin: 0;
    font-size: 32px;
    line-height: 1.1;
    font-weight: 800;
}

.subtitle {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 15px;
}

.status {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    font-size: 13px;
    color: #666;
}

.dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #198754;
    display: inline-block;
}

/* =========================
   RESUMO
   ========================= */

.summary {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 18px;
    margin-bottom: 15px;
}

.summary-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 12px;
}

.summary-title {
    font-size: 15px;
    font-weight: 700;
}

.summary-percent {
    font-size: 18px;
    font-weight: 800;
}

.progress {
    width: 100%;
    height: 9px;
    background: #e8e8e8;
    border-radius: 20px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    width: 0;
    background: #333;
    border-radius: 20px;
    transition: width .3s ease;
}

.summary-info {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
    font-size: 13px;
    color: var(--muted);
}

.summary-values {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 15px;
}

.summary-value {
    padding: 12px;
    background: #f7f7f7;
    border-radius: 8px;
}

.summary-value span {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 4px;
}

.summary-value strong {
    font-size: 17px;
}

/* =========================
   AVISO
   ========================= */

.notice {
    padding: 13px 15px;
    margin-bottom: 15px;
    background: #fff8dc;
    border: 1px solid #f0df9a;
    border-radius: 8px;
    color: #665800;
    font-size: 13px;
}

/* =========================
   RESULTADOS
   ========================= */

.results {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.results-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding: 18px;
    border-bottom: 1px solid var(--border);
}

.results-head h2 {
    margin: 0;
    font-size: 20px;
}

.results-head span {
    font-size: 13px;
    color: var(--muted);
}

/* =========================
   FILTROS
   ========================= */

.filters {
    display: flex;
    gap: 10px;
    padding: 15px;
    background: #fafafa;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.filters select,
.filters input {
    height: 42px;
    padding: 0 12px;
    border: 1px solid #d8d8d8;
    border-radius: 8px;
    background: #fff;
    font-size: 15px;
    color: #333;
    box-sizing: border-box;
}

.filters select {
    min-width: 220px;
}

.filters input {
    flex: 1;
    min-width: 220px;
}

.filters input:focus,
.filters select:focus {
    outline: none;
    border-color: #aaa;
}

/* =========================
   LISTA DE CANDIDATOS
   ========================= */

.candidate-list {
    display: block;
    padding: 10px;
    background: #f1f1f1;
}

.candidate {
    display: grid;
    grid-template-columns: 42px 72px minmax(180px, 1fr) 130px 100px;
    gap: 12px;
    align-items: center;
    padding: 16px 18px;
    margin-bottom: 10px;
    background: #ffffff;
    border: 1px solid #e2e2e2;
    border-radius: 10px;
}

.candidate:last-child {
    margin-bottom: 0;
}

.rank {
    font-size: 18px;
    font-weight: 800;
    color: #888;
    text-align: center;
}

.candidate-photo {
    width: 72px;
    height: 72px;
    overflow: hidden;
    border-radius: 8px;
    background: #eeeeee;
    display: flex;
    align-items: center;
    justify-content: center;
}

.candidate-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.candidate-info {
    min-width: 0;
}

.candidate-info strong {
    display: block;
    font-size: 17px;
    line-height: 1.2;
    margin-bottom: 6px;
}

.candidate-info span {
    display: block;
    font-size: 13px;
    color: var(--muted);
}

.votes {
    text-align: right;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    line-height: 1.1;
}

.votes .percentage {
    display: block;
    color: #FFCC00;
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
}

.votes .vote-total {
    display: block;
    margin-top: 6px;
    color: var(--text);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.1;
}

.candidate-status {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.elected {
    display: inline-block;
    padding: 6px 9px;
    border-radius: 6px;
    background: #198754;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .3px;
}

.situation {
    display: inline-block;
    padding: 5px 8px;
    border-radius: 6px;
    background: #eeeeee;
    color: #666;
    font-size: 10px;
    font-weight: 700;
}

/* =========================
   CARREGAMENTO
   ========================= */

.loading {
    padding: 35px 20px;
    text-align: center;
    color: var(--muted);
    font-size: 14px;
}

.empty {
    padding: 35px 20px;
    text-align: center;
    color: var(--muted);
    font-size: 14px;
}

/* =========================
   RODAPÉ
   ========================= */

footer {
    padding: 20px 0;
    text-align: center;
    color: #888;
    font-size: 12px;
}

/* =========================
   MOBILE
   ========================= */

@media (max-width: 700px) {

    .container {
        padding: 12px;
    }

    .top {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    h1 {
        font-size: 27px;
    }

    .summary-values {
        grid-template-columns: 1fr;
    }

    .results-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .filters {
        flex-direction: column;
    }

    .filters select,
    .filters input {
        width: 100%;
        min-width: 0;
    }

    .candidate {
        grid-template-columns: 34px 60px minmax(0, 1fr);
        gap: 10px;
        padding: 14px;
    }

    .candidate-photo {
        width: 60px;
        height: 60px;
    }

    .candidate-info strong {
        font-size: 15px;
    }

    .candidate-info span {
        font-size: 12px;
    }

    .votes {
        text-align: left;
        grid-column: 3;
        align-items: flex-start;
        margin-top: 5px;
    }

    .votes .percentage {
        font-size: 24px;
    }

    .votes .vote-total {
        font-size: 18px;
    }

    .candidate-status {
        grid-column: 3;
        justify-content: flex-start;
    }

    .rank {
        font-size: 16px;
    }
}
```

### 2. `deputado-federal/index.html`

Aqui está a versão completa, mantendo a API e a lógica que já estavam funcionando:

```html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Resultados TSE 2026 — Deputado Federal</title>

    <link rel="stylesheet" href="style.css">
</head>

<body>

<div class="container">

    <header class="top">
        <div>
            <div class="eyebrow">ELEIÇÕES 2026</div>

            <h1>Deputado Federal</h1>

            <p class="subtitle">
                Apuração em tempo real — dados oficiais do TSE
            </p>
        </div>

        <div class="status" id="status">
            <span class="dot"></span>
            <span id="statusText">Carregando...</span>
        </div>
    </header>


    <section class="summary">

        <div class="summary-head">
            <span class="summary-title">
                Totalização
            </span>

            <span
                class="summary-percent"
                id="totalizationPercent"
            >
                0,00%
            </span>
        </div>

        <div class="progress">
            <div
                class="progress-bar"
                id="progressBar"
            ></div>
        </div>

        <div class="summary-info">
            <span id="sectionsText">
                Aguardando dados...
            </span>

            <span id="updatedText">
                —
            </span>
        </div>

        <div class="summary-values">

            <div class="summary-value">
                <span>Votos válidos</span>

                <strong id="validVotes">
                    0
                </strong>
            </div>

            <div class="summary-value">
                <span>Votos em branco</span>

                <strong id="blankVotes">
                    0
                </strong>
            </div>

            <div class="summary-value">
                <span>Votos nulos</span>

                <strong id="nullVotes">
                    0
                </strong>
            </div>

        </div>

    </section>


    <div class="notice">
        Os resultados são atualizados automaticamente conforme a
        totalização oficial do Tribunal Superior Eleitoral.
    </div>


    <section class="results">

        <div class="results-head">

            <h2>Votação</h2>

            <span id="refreshInfo">
                Atualização automática
            </span>

        </div>


        <div class="filters">

            <select id="stateSelect">

                <option value="ac">Acre</option>
                <option value="al">Alagoas</option>
                <option value="ap">Amapá</option>
                <option value="am">Amazonas</option>
                <option value="ba" selected>Bahia</option>
                <option value="ce">Ceará</option>
                <option value="df">Distrito Federal</option>
                <option value="es">Espírito Santo</option>
                <option value="go">Goiás</option>
                <option value="ma">Maranhão</option>
                <option value="mt">Mato Grosso</option>
                <option value="ms">Mato Grosso do Sul</option>
                <option value="mg">Minas Gerais</option>
                <option value="pa">Pará</option>
                <option value="pb">Paraíba</option>
                <option value="pr">Paraná</option>
                <option value="pe">Pernambuco</option>
                <option value="pi">Piauí</option>
                <option value="rj">Rio de Janeiro</option>
                <option value="rn">Rio Grande do Norte</option>
                <option value="rs">Rio Grande do Sul</option>
                <option value="ro">Rondônia</option>
                <option value="rr">Roraima</option>
                <option value="sc">Santa Catarina</option>
                <option value="sp">São Paulo</option>
                <option value="se">Sergipe</option>
                <option value="to">Tocantins</option>

            </select>


            <input
                type="search"
                id="candidateSearch"
                placeholder="Buscar candidato, número ou partido..."
                autocomplete="off"
            >

        </div>


        <div
            id="candidateList"
            class="candidate-list"
        >
            <div class="loading">
                Carregando candidatos e aguardando a
                totalização oficial...
            </div>
        </div>

    </section>


    <footer>
        Dados oficiais do Tribunal Superior Eleitoral — TSE
    </footer>

</div>


<script>

const CONFIG = {
    api: 'api.php',
    refreshInterval: 15000
};


let currentUf = 'ba';
let candidates = [];


/* =========================
   FUNÇÕES AUXILIARES
   ========================= */

function escapeHtml(value) {

    if (value === null || value === undefined) {
        return '';
    }

    return String(value)
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#039;');
}


function formatNumber(value) {

    const number = Number(value || 0);

    return number.toLocaleString('pt-BR');
}


function formatPercentage(value) {

    const number = Number(value || 0);

    return number.toLocaleString('pt-BR', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
    }) + '%';
}


/* =========================
   FOTO DO CANDIDATO
   ========================= */

function getCandidatePhotoUrl(candidate) {

    if (!candidate || !candidate.sqcand) {
        return '../assets/foto-indisponivel.svg';
    }

    return (
        'https://resultados.tse.jus.br/' +
        'oficial/' +
        'ele2026/' +
        '6259/' +
        'fotos/' +
        currentUf +
        '/' +
        candidate.sqcand +
        '.jpeg'
    );
}


/* =========================
   SITUAÇÃO
   ========================= */

function getSituation(candidate) {

    if (!candidate) {
        return '';
    }

    return (
        candidate.situation ||
        candidate.st ||
        ''
    );
}


/* =========================
   RENDERIZAÇÃO
   ========================= */

function renderCandidate(candidate, index) {

    const photoUrl =
        getCandidatePhotoUrl(candidate);

    const situation =
        getSituation(candidate);

    let statusHtml = '';


    if (candidate.elected === true) {

        statusHtml += `
            <span class="elected">
                ELEITO
            </span>
        `;
    }


    if (situation && !candidate.elected) {

        statusHtml += `
            <span class="situation">
                ${escapeHtml(situation)}
            </span>
        `;
    }


    return `
        <article class="candidate">

            <div class="rank">
                ${index + 1}
            </div>


            <div class="candidate-photo">

                <img
                    src="${photoUrl}"
                    alt="${escapeHtml(
                        candidate.name ||
                        candidate.full_name ||
                        ''
                    )}"
                    loading="lazy"
                    onerror="
                        this.onerror=null;
                        this.src='../assets/foto-indisponivel.svg';
                    "
                >

            </div>


            <div class="candidate-info">

                <strong>
                    ${escapeHtml(
                        candidate.name ||
                        candidate.full_name ||
                        'Candidato'
                    )}
                </strong>

                <span>
                    Nº
                    ${escapeHtml(
                        candidate.number || ''
                    )}

                    ${
                        candidate.party
                            ? ' · ' +
                              escapeHtml(candidate.party)
                            : ''
                    }
                </span>

            </div>


            <div class="votes">

                <span class="percentage">
                    ${formatPercentage(
                        candidate.percentage
                    )}
                </span>

                <span class="vote-total">
                    ${formatNumber(
                        candidate.votes
                    )}
                </span>

            </div>


            <div class="candidate-status">
                ${statusHtml}
            </div>

        </article>
    `;
}


/* =========================
   LISTA
   ========================= */

function renderCandidates(list) {

    const container =
        document.getElementById('candidateList');


    if (!list || !list.length) {

        container.innerHTML = `
            <div class="empty">
                Nenhum candidato encontrado.
            </div>
        `;

        return;
    }


    container.innerHTML =
        list.map(
            (candidate, index) =>
                renderCandidate(candidate, index)
        ).join('');
}


/* =========================
   FILTRO
   ========================= */

function filterCandidates() {

    const search =
        document
            .getElementById('candidateSearch')
            .value
            .trim()
            .toLowerCase();


    if (!search) {

        renderCandidates(candidates);

        return;
    }


    const filtered =
        candidates.filter(candidate => {

            const values = [

                candidate.name,
                candidate.full_name,
                candidate.number,
                candidate.party,
                candidate.party_name

            ];


            return values.some(value =>

                String(value || '')
                    .toLowerCase()
                    .includes(search)

            );

        });


    renderCandidates(filtered);
}


/* =========================
   RESUMO
   ========================= */

function updateSummary(data) {

    const totalization =
        Number(
            data.totalization ||
            data.totalization_percent ||
            data.percentage_totalization ||
            0
        );


    document.getElementById(
        'totalizationPercent'
    ).textContent =
        formatPercentage(totalization);


    document.getElementById(
        'progressBar'
    ).style.width =
        Math.min(100, totalization) + '%';


    const total =
        data.totalization ||
        data.totalization_percent;


    document.getElementById(
        'sectionsText'
    ).textContent =
        data.sections
            ? `Seções: ${formatNumber(data.sections)}`
            : 'Aguardando totalização...';


    document.getElementById(
        'updatedText'
    ).textContent =
        data.updated_at ||
        data.server_time ||
        '—';


    document.getElementById(
        'validVotes'
    ).textContent =
        formatNumber(
            data.valid_votes ||
            data.validVotes ||
            0
        );


    document.getElementById(
        'blankVotes'
    ).textContent =
        formatNumber(
            data.blank_votes ||
            data.blankVotes ||
            0
        );


    document.getElementById(
        'nullVotes'
    ).textContent =
        formatNumber(
            data.null_votes ||
            data.nullVotes ||
            0
        );
}


/* =========================
   STATUS
   ========================= */

function updateStatus(online, text) {

    const status =
        document.getElementById('status');

    const statusText =
        document.getElementById('statusText');

    const dot =
        status.querySelector('.dot');


    statusText.textContent = text;


    if (online) {

        dot.style.background =
            '#198754';

    } else {

        dot.style.background =
            '#dc3545';

    }
}


/* =========================
   INTERFACE
   ========================= */

function updateInterface(data) {

    candidates =
        Array.isArray(data.candidates)
            ? data.candidates
            : [];


    updateSummary(data);

    renderCandidates(candidates);

    updateStatus(
        true,
        'Dados atualizados'
    );
}


/* =========================
   CARREGAMENTO
   ========================= */

async function loadResults() {

    try {

        updateStatus(
            true,
            'Atualizando...'
        );


        const url =
            `${CONFIG.api}?uf=${encodeURIComponent(currentUf)}&_=${Date.now()}`;


        const response =
            await fetch(url, {
                cache: 'no-store'
            });


        if (!response.ok) {
            throw new Error(
                `HTTP ${response.status}`
            );
        }


        const data =
            await response.json();


        if (data.error) {
            throw new Error(data.error);
        }


        updateInterface(data);


    } catch (error) {

        console.error(error);


        updateStatus(
            false,
            'Erro ao atualizar'
        );


        document.getElementById(
            'candidateList'
        ).innerHTML = `
            <div class="empty">
                Não foi possível carregar os
                resultados neste momento.
            </div>
        `;
    }
}


/* =========================
   MUDANÇA DE ESTADO
   ========================= */

function changeState(uf) {

    currentUf = uf;


    const url =
        new URL(window.location.href);


    url.searchParams.set(
        'uf',
        currentUf
    );


    window.history.replaceState(
        {},
        '',
        url
    );


    document.getElementById(
        'candidateSearch'
    ).value = '';


    loadResults();
}


/* =========================
   INICIALIZAÇÃO
   ========================= */

function initialize() {

    const params =
        new URLSearchParams(
            window.location.search
        );


    const requestedUf =
        (params.get('uf') || 'ba')
            .toLowerCase();


    const stateSelect =
        document.getElementById(
            'stateSelect'
        );


    const optionExists =
        Array.from(
            stateSelect.options
        ).some(
            option =>
                option.value === requestedUf
        );


    if (optionExists) {

        currentUf = requestedUf;

        stateSelect.value =
            currentUf;

    } else {

        currentUf = 'ba';

        stateSelect.value =
            'ba';
    }


    stateSelect.addEventListener(
        'change',
        event => {
            changeState(
                event.target.value
            );
        }
    );


    document
        .getElementById('candidateSearch')
        .addEventListener(
            'input',
            filterCandidates
        );


    loadResults();


    setInterval(
        loadResults,
        CONFIG.refreshInterval
    );
}


initialize();

</script>

</body>
</html>
```

**Agora a diferença importante:** o Deputado Federal não usa mais `../assets/style.css`. Ele possui seu próprio `style.css`, mas as regras do card foram mantidas no mesmo padrão que você aprovou: `42px / 72px / candidato / votos / status`.

Se depois de substituir esses dois arquivos **algum detalhe ainda estiver diferente**, aí não devemos ficar alterando CSS no escuro: comparamos diretamente o `style.css` do módulo que está correto com este e ajustamos apenas a diferença.