<div id="contador-box" style="
    width: 520px;
    background: #041E2D;
    padding: 40px 20px 55px 20px;
    border-radius: 25px;
    margin:auto;
    font-family: Arial, sans-serif;
    position: relative;
    text-align: center;
">

    <!-- TAG SUPERIOR -->
    <div style="
        position: absolute;
        top: -20px;
        left: 50%;
        transform: translateX(-50%);
        background: #00D4FF;
        padding: 6px 26px;
        border-radius: 20px;
        font-size: 16px;
        font-weight: bold;
        color: #000;
    ">Faltam</div>

    <!-- CONTEÚDO PRINCIPAL -->
    <div style="display: flex; gap: 25px; justify-content: center; align-items: flex-start;">

        <!-- DIAS -->
        <div style="text-align: center;">
            <div id="dias" style="font-size: 48px; font-weight: bold; color: #FFFFFF;">00</div>
            <div style="width: 40px; height: 3px; background: #00D4FF; margin: 6px auto 8px auto;"></div>
            <div style="font-size: 14px; color: #FFFFFF;">Dias</div>
        </div>

        <div style="font-size: 35px; font-weight:bold; color:#FFFFFF; margin-top:5px;">:</div>

        <!-- HORAS -->
        <div style="text-align: center;">
            <div id="horas" style="font-size: 48px; font-weight: bold; color: #FFFFFF;">00</div>
            <div style="width: 40px; height: 3px; background: #00D4FF; margin: 6px auto 8px auto;"></div>
            <div style="font-size: 14px; color: #FFFFFF;">Horas</div>
        </div>

        <div style="font-size: 35px; font-weight:bold; color:#FFFFFF; margin-top:5px;">:</div>

        <!-- MINUTOS -->
        <div style="text-align: center;">
            <div id="minutos" style="font-size: 48px; font-weight: bold; color: #FFFFFF;">00</div>
            <div style="width: 40px; height: 3px; background: #00D4FF; margin: 6px auto 8px auto;"></div>
            <div style="font-size: 14px; color: #FFFFFF;">Minutos</div>
        </div>

        <div style="font-size: 35px; font-weight:bold; color:#FFFFFF; margin-top:5px;">:</div>

        <!-- SEGUNDOS -->
        <div style="text-align: center;">
            <div id="segundos" style="font-size: 48px; font-weight: bold; color: #FFFFFF;">00</div>
            <div style="width: 40px; height: 3px; background: #00D4FF; margin: 6px auto 8px auto;"></div>
            <div style="font-size: 14px; color: #FFFFFF;">Segundos</div>
        </div>

    </div>

    <!-- TAG INFERIOR -->
    <div style="
        position: absolute;
        bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
        background: #00D4FF;
        padding: 6px 26px;
        border-radius: 20px;
        font-size: 15px;
        font-weight: bold;
        color: #000;
    ">
        para 1 de janeiro de 2026
    </div>

</div>
 
<script>
    function atualizarContador() {
        // DATA DA REFORMA TRIBUTÁRIA
        const destino = new Date("2026-01-01T00:00:00").getTime();
        const agora = new Date().getTime();
        const diferenca = destino - agora;

        if (diferenca <= 0) {
            document.getElementById("dias").innerHTML = "00";
            document.getElementById("horas").innerHTML = "00";
            document.getElementById("minutos").innerHTML = "00";
            document.getElementById("segundos").innerHTML = "00";
            return;
        }

        const dias = Math.floor(diferenca / (1000 * 60 * 60 * 24));
        const horas = Math.floor((diferenca / (1000 * 60 * 60)) % 24);
        const minutos = Math.floor((diferenca / (1000 * 60)) % 60);
        const segundos = Math.floor((diferenca / 1000) % 60);

        document.getElementById("dias").innerHTML = dias.toString().padStart(2, "0");
        document.getElementById("horas").innerHTML = horas.toString().padStart(2, "0");
        document.getElementById("minutos").innerHTML = minutos.toString().padStart(2, "0");
        document.getElementById("segundos").innerHTML = segundos.toString().padStart(2, "0");
    }

    // Atualiza a cada 1 segundo
    setInterval(atualizarContador, 1000);
    atualizarContador();
</script>