@font-face {
    font-family: 'Digital7'; 
    
    /* 🚨 CÓDIGO CORRIGIDO 🚨 */
    /* Aponta para o caminho /layout/digital.otf e usa o formato 'opentype' */
    src: url('digital.otf') format('opentype'); 
    
    font-weight: normal;
    font-style: normal;
}


#mechanical-countdown {
    /* Garante que fique fixo mesmo ao rolar a página */
    position: absolute;
    top: 230px;       
    /* Estilos do Container */
    display: flex;
    align-items: flex-start; /* Alinha o topo dos blocos */
    background-color: rgba(1, 0, 0, 0.877); /* Azul escuro semi-transparente */
    padding: 10px 15px;
    border-radius: 8px;
    box-shadow: 0 4px 20px -7px rgb(246 170 0);
    font-family: 'Arial', monospace;
    color: #ffffff;
    z-index: 1000;
    font-size: 0.8em;
    flex-direction: initial;
}


.title-clock {

    font-size: 16px;
    display: flex;
    font-weight: 900;
    align-self: center;
    flex-direction: column; /* Faz com que os itens internos empilhem verticalmente */
    align-items: center;    /* Centraliza os dígitos e o rótulo */
    margin: 0 5px;          /* Espaçamento entre os blocos (Dias, Horas, etc.) */
}
.time-block {
    display: flex;
    flex-direction: column; /* Faz com que os itens internos empilhem verticalmente */
    align-items: center;    /* Centraliza os dígitos e o rótulo */
    margin: 0 5px;          /* Espaçamento entre os blocos (Dias, Horas, etc.) */
}

/* Estilo do Segmento de Dígitos */
.time-segment {
    display: flex;
    margin-bottom: 5px; /* Espaço entre os dígitos e o rótulo de baixo */
    perspective: 500px;
}

/* Estilo Individual do Dígito (Mantido) */
.digit {
    display: inline-block;
    width: 25px; 
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-family: 'Digital7', monospace; 
    font-size: 3em;
    background-color: #ffffff42; 
    border-radius: 4px;
    margin: 0 1px;
    box-shadow: inset 0 0 5px rgb(255 255 255 / 64%); 
    
    transform-style: preserve-3d;
    transform: rotateX(0deg); 
}

/* 3. Estilo do Rótulo (Label) */
.label {
    font-size: 0.8em;
    font-weight: normal;
    color: #ffc107; /* Amarelo/Dourado */
    /* Garante que o texto não seja selecionável para um visual mais limpo */
    user-select: none; 
}

/* 4. Estilo do Separador (Pontos de Pulsação) */
.separator {
    font-size: 4em;
    font-weight: bold;
    color: #ffc107;
    line-height: 40px; /* Alinha o ponto com o centro dos dígitos */
    margin: 0 5px;
    
    /* Adiciona o ponto de separação com CSS (::before) */
    position: relative;
    width: 5px; /* Apenas para a animação */
    height: 40px;
    opacity: 1; /* Remove a animação de pulso se quiser que os ':' fiquem estáticos */
}

/* Para ter a animação de pulso, você pode definir a animação no contêiner #mechanical-countdown 
   ou usar o código abaixo se quiser o ':' de volta, mas fica muito alto */
.separator::before {
    content: ":";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: pulse 1.5s infinite alternate; /* Animação de pulsar */
    font-size: 0.5em; /* Apenas para criar o efeito de dois pontos */
}


/* Animação de Pulsar para o Separador */
@keyframes pulse {
    0% { opacity: 1; }
    100% { opacity: 0.6; }
}

/* Animação de Giro (Simula o Flipping) - Mantida */
@keyframes flip-down {
    0% { transform: rotateX(0deg); opacity: 1; }
    50% { transform: rotateX(-90deg); opacity: 0.5; }
    51% { transform: rotateX(90deg); opacity: 0.5; }
    100% { transform: rotateX(0deg); opacity: 1; }
}

/* Classe aplicada ao dígito que está mudando - Mantida */
.flipping {
    animation: flip-down 0.5s linear;
}