/* =========================================
   Seção Metodologia (Timeline)
   ========================================= */

.metodologia {
    width: 100%;
    padding: 4rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: var(--cor-bg);
    overflow-x: hidden; /* Evite a rolagem horizontal durante as animações. */
}

.metodologia-conteudo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6rem;
}

.metodologia-textos {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 800px;
    gap: 1.5rem;
}

/* Timeline Container */
.timeline {
    position: relative;
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 2rem 0;
    display: flex;
    flex-direction: column;
    gap: 4rem; /* Spacing between rows */
}

/* Linha de Fundo */
.timeline::after {
    content: '';
    position: absolute;
    width: 2px;
    background-color: var(--cor-primaria);
    top: 5rem;
    bottom: 5rem;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0.15;
}

/* Linha Animada (Preenchimento) */
.timeline-preenchimento {
    position: absolute;
    width: 2px;
    background-color: var(--cor-primaria);
    top: 5rem;
    left: 50%;
    transform: translateX(-50%);
    height: 0%;
    z-index: 1;
    /* transition: height 0.1s linear; */ /* controlado por JS no scroll */
}

/* Timeline Items */
.timeline-item {
    padding: 0 50px;
    position: relative;
    width: 50%;
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s ease-out;
    display: flex;
    align-items: center;
}

.timeline-item.visivel {
    opacity: 1;
    transform: translateY(0);
}

.timeline-item.esquerda {
    left: 0;
    justify-content: flex-end;
}

.timeline-item.direita {
    left: 50%;
    justify-content: flex-start;
}

/* O Ponto */
.timeline-ponto {
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: var(--cor-primaria);
    border-radius: 50%;
    z-index: 2;
    top: 50%;
    transform: translateY(-50%);
}

.timeline-item.esquerda .timeline-ponto {
    right: -6px; /* - (width/2) to center on line */
}

.timeline-item.direita .timeline-ponto {
    left: -6px;
}

/* Os Números */
.timeline-numero {
    font-size: 3rem;
    font-weight: 800;
    color: var(--cor-primaria);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background-color: transparent; 
}

/* Posiciona o número no lado oposto do card para encostar na linha */
.timeline-item.esquerda .timeline-numero {
    right: -90px;
}

.timeline-item.direita .timeline-numero {
    left: -90px;
}

/* O Card */
.timeline-card {
    background: #ffffff;
    border: 1px solid rgba(1, 6, 71, 0.2);
    border-radius: 16px;
    padding: 2rem;
    width: 100%; /* Espaço em branco para não tocar no meio */
    position: relative;
    z-index: 3;
    transition: transform 0.3s ease;

    img {
        height: 6.25rem;
        width: 6.25rem;
    }
}

.timeline-card:hover {
    transform: translateY(-5px);
}

.timeline-card h3 {
    font-size: 1.5rem;
    color: var(--cor-primaria);
    margin-bottom: 1rem;
}

.timeline-card p {
    font-size: 1.05rem;
    color: var(--cor-texto);
    line-height: 1.6;
    opacity: 0.8;
}

/*

Botão outline (Catálogo de Treinamentos)

.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 1.5rem;
    padding: 0.6rem 1.25rem;
    border: 1px solid var(--cor-texto);
    border-radius: 50px;
    color: var(--cor-primaria);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    opacity: 0.8;
}

.btn-outline span {
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.btn-outline:hover {
    background-color: var(--cor-primaria);
    color: var(--cor-bg);
    opacity: 1;
    border-color: var(--cor-primaria);

    span {
        transform: rotate(45deg);
    }
}

*/

/* Responsividade Mobile */
@media (max-width: 1024px) {

    .metodologia-conteudo {
        padding: 0 20px;
    }

    .timeline::after, 
    .timeline-preenchimento {
        left: 20px;
        transform: none;
    }

    .timeline-item {
        width: 100%;
        padding-left: 60px;
        padding-right: 0;
        justify-content: flex-start;
        left: 0 !important;
    }

    .timeline-item.esquerda .timeline-ponto,
    .timeline-item.direita .timeline-ponto {
        right: auto;
        left: 14px; /* Alignment with line at 20px -> center 21-6=15, 14 works visually */
    }

    .timeline-card {
        width: 100%;
    }

    /* Oculta os números enormes laterais no mobile */
    .timeline-numero {
        display: none; 
    }
}