/* style.css */
[x-cloak] {
    display: none !important;
}

/* Efeito de Vidro */
.glass {
    background: rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* --- LINHA DO TEMPO (CORRIGIDA) --- */
.timeline-container {
    position: relative;
    padding: 2rem 0;
}

/* A linha vertical central (ou lateral no mobile) */
.timeline-line {
    position: absolute;
    background: #334155;
    width: 2px;
    top: 0;
    bottom: 0;
    /* Mobile: Linha na esquerda */
    left: 24px;
    z-index: 0;
}

/* Desktop: Linha no centro */
@media (min-width: 768px) {
    .timeline-line {
        left: 50%;
        margin-left: -1px;
    }
}

/* O ponto (bolinha) na linha */
.timeline-dot {
    position: absolute;
    left: 24px;
    /* Mobile */
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    z-index: 10;
    border: 4px solid #0f172a;
    background: #ff0000;
    /* Red from the new logo */
    box-shadow: 0 0 0 4px rgba(255, 0, 0, 0.2);
}

@media (min-width: 768px) {
    .timeline-dot {
        left: 50%;
    }
}

/* Ajustes de Espaçamento para o Conteúdo */
.timeline-content-left {
    margin-left: 60px;
    /* Espaço para a linha no mobile */
}

.timeline-content-right {
    margin-left: 60px;
    /* Espaço para a linha no mobile */
}

@media (min-width: 768px) {
    .timeline-content-left {
        margin-left: 0;
        margin-right: 50px;
        /* Distância da linha central */
        text-align: right;
    }

    .timeline-content-right {
        margin-left: 50px;
        /* Distância da linha central */
        text-align: left;
    }
}