/* 
   ==============================================
   CSS da Timeline - Versão com Variáveis Elementor
   Layouts: Horizontal, Vertical e Grid
   ==============================================
*/

/* ESTILOS GERAIS */
.timeline { position: relative; width: 90%; max-width: 1200px; margin: 50px auto; font-family: "Poppins", Sans-serif; }
.timeline ol { list-style-type: none; padding: 0; margin: 0; counter-reset: timeline-counter; } /* Contador padrão para horizontal/vertical */
.timeline ol li div { position: relative; padding: 20px; white-space: normal; background: var(--e-global-color-0794524); border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); color: var(--e-global-color-text); font-weight: 300; }
.timeline .tl-icon { display: block; font-size: 2.5rem; margin-bottom: 10px; color: var(--e-global-color-accent); }
.timeline .tl-title { display: block; font-size: 1.4rem; margin-bottom: 8px; color: var(--e-global-color-text); font-family: var(--e-global-typography-primary-font-family); font-weight: var(--e-global-typography-primary-font-weight); }
.timeline p { margin: 0; line-height: 1.5; font-family: var(--e-global-typography-text-font-family); font-weight: var(--e-global-typography-text-font-weight); font-size: 15px; }

/* LAYOUT HORIZONTAL */
.timeline-horizontal{margin: 120px 0;}
.timeline-horizontal ol { display: flex; justify-content: space-between; padding: 150px 0; }
.timeline-horizontal ol li { position: relative; flex-grow: 1; height: 5px; background: var(--e-global-color-0794524); }
.timeline-horizontal ol li:last-child { flex-grow: 1; }
.timeline-horizontal ol li::after { content: counter(timeline-counter); counter-increment: timeline-counter; position: absolute; top: 50%; left: 100%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; background: var(--e-global-color-primary); color: var(--e-global-color-0794524); z-index: 1; display: flex; align-items: center; justify-content: center; font-family: var(--e-global-typography-primary-font-family); font-weight: var(--e-global-typography-primary-font-weight); font-size: 1.2rem; border: 3px solid var(--e-global-color-cd85082); }
.timeline-horizontal ol li div { position: absolute; left: 100%; transform: translateX(-50%); width: 280px; text-align: center; }
.timeline-horizontal ol li:nth-child(odd) div { bottom: 40px; }
.timeline-horizontal ol li:nth-child(even) div { top: 40px; }
.timeline-horizontal ol li div::before{ content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    left: 50%;
    transform: translateX(-50%);
}
.timeline-horizontal ol li:nth-child(odd) div::before{
    bottom: -10px;
    border-width: 10px 10px 0px 10px;
    border-color: var(--e-global-color-0794524) transparent transparent transparent;
}
.timeline-horizontal ol li:nth-child(even) div::before{
    top: -10px;
    border-width: 0px 10px 10px 10px;
    border-color: transparent transparent var(--e-global-color-0794524) transparent;
}
/* LAYOUT VERTICAL */
.timeline-vertical ol { position: relative; border-left: 5px solid var(--e-global-color-0794524); margin-left: 50%; transform: translateX(-2.5px); }
.timeline-vertical ol li { position: relative; margin-bottom: 0px; background: transparent; height: auto; display: flow-root; }
.timeline-vertical ol li:last-child { margin-bottom: 0; }
.timeline-vertical ol li::after { content: counter(timeline-counter); counter-increment: timeline-counter; position: absolute; top: 15px; left: -2.5px; transform: translateX(-50%); width: 40px; height: 40px; border-radius: 50%; background: var(--e-global-color-primary); color: var(--e-global-color-0794524); z-index: 1; display: flex; align-items: center; justify-content: center; font-family: var(--e-global-typography-primary-font-family); font-weight: var(--e-global-typography-primary-font-weight); font-size: 1.2rem; border: 3px solid var(--e-global-color-cd85082); padding-top: 3px; }
.timeline-vertical ol li div { width: calc(100% - 60px); }
.timeline-vertical ol li:nth-child(odd) div { float: left; transform: translateX(-100%); margin-left: -40px; text-align: right; }
.timeline-vertical ol li:nth-child(even) div { float: left; margin-left: 40px; text-align: left; }
.timeline-vertical ol li div::before { content: ''; position: absolute; top: 24px; width: 0; height: 0; border-style: solid; }
.timeline-vertical ol li:nth-child(odd) div::before { right: -10px; border-width: 10px 0 10px 10px; border-color: transparent transparent transparent var(--e-global-color-0794524); }
.timeline-vertical ol li:nth-child(even) div::before { left: -10px; border-width: 10px 10px 10px 0; border-color: transparent var(--e-global-color-0794524) transparent transparent; }


/* 
   ----------------------------------------------
   LAYOUT GRID (.timeline-grid) - CORREÇÃO DE NUMERAÇÃO
   ----------------------------------------------
*/

.timeline-grid {
    --h-gap: 40px;
    --v-gap: 50px;
    /* FIX 1: Reseta o contador APENAS UMA VEZ no container principal. */
    counter-reset: timeline-counter;
}

.timeline-grid__row ol {
    display: flex;
    gap: var(--h-gap);
    list-style: none;
    padding: 0;
    margin: 0;
    /* FIX 2: Impede que a lista de cada linha reinicie o contador. */
    counter-reset: none; 
}

.timeline-grid__row--reversed ol {
    flex-direction: row-reverse;
}

.timeline-grid__row:not(:last-child) {
    margin-bottom: var(--v-gap);
}

.timeline-grid ol li {
    position: relative;
    flex: 1;
    list-style: none;
}

.timeline-grid ol li div {
    text-align: center;
    border: 1px solid var(--e-global-color-primary);
    border-radius: 10px;
    padding-top: 30px;
}

/* Numeração do item - esta parte já estava correta */
.timeline-grid ol li div::before {
    content: counter(timeline-counter);
    counter-increment: timeline-counter;
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--e-global-color-primary);
    color: var(--e-global-color-0794524);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: bold;
    border: 3px solid var(--e-global-color-cd85082);
    z-index: 1;
}

/* --- CONECTORES DO GRID --- */
.timeline-grid li::after, .timeline-grid li::before {
    content: '';
    position: absolute;
    background-color: var(--e-global-color-accent);
    z-index: 1;
}

.timeline-grid__row ol li:not(:last-child)::after {
    height: 4px;
    width: var(--h-gap);
    top: calc(50% - 2px);
    left: 100%;
}

.timeline-grid__row--reversed ol li:first-child::after {
    height: 4px;
    width: var(--h-gap);
    top: calc(50% - 2px);
    left: 0;
    transform: translateX(-100%);
}
.timeline-grid__row--reversed ol li:not(:first-child)::after {
    left: auto;
    right: 100%;
}
.timeline-grid__row:not(:last-child) ol li:last-child::after {
    width: 4px;
    height: var(--v-gap);
    top: 100%;
    left: calc(50% - 2px);
}

.timeline-grid__row--reversed:not(:last-child) ol li:last-child::before {
    display: none;
}



/* 
   ----------------------------------------------
   RESPONSIVO - ATUALIZADO PARA MOBILE
   ----------------------------------------------
*/

@media screen and (max-width: 992px) { 
    /* Esta seção de tablet permanece a mesma, pois as principais mudanças são para celular */
    .timeline-horizontal ol { flex-direction: column; width: 100%; padding: 0; }
    .timeline-horizontal ol li { height: auto; width: 5px; padding-bottom: 80px; background: var(--e-global-color-0794524); }
    .timeline-horizontal ol li::after {top: auto; left: 50%; bottom: 100%; transform: translate(-50%, -50%);}
    .timeline-horizontal ol li div { position: relative; left: 40px; top: 0; transform: translateX(0); width: calc(100% - 60px); text-align: left; }
    .timeline-horizontal ol li:nth-child(odd) div, .timeline-horizontal ol li:nth-child(even) div { bottom: auto; top: -20px; }
}

@media screen and (max-width: 768px) { /* Celular - NOVOS AJUSTES */
    .timeline{width: 90% !important; margin: 50px auto !important;}
    /* 
     * Ajuste #1: LAYOUT HORIZONTAL (Mobile)
     * - Remove linha, caixas com 80% de largura, alinhamento alternado.
    */
    .timeline-horizontal { margin: 50px 0; }
    .timeline-horizontal ol {
        flex-direction: column;
        align-items: center; /* Centraliza a base para o alinhamento alternado */
        padding: 0;
        gap: 50px; /* Espaçamento entre os itens */
    }
    .timeline-horizontal ol li {
        width: 100%;
        height: auto;
        padding-bottom: 0;
        background: transparent; /* Remove a linha */
        display: flex; /* Permite o alinhamento do box interno */
    }
    .timeline-horizontal ol li:last-child {
        height: auto;
    }
    .timeline-horizontal ol li div {
        position: relative;
        width: 80%;
        transform: none; /* Reseta transformações */
        left: auto; top: auto; bottom: auto; right: auto;
        text-align: center;
    }
    /* Alinhamento alternado */
    .timeline-horizontal ol li:nth-child(odd) div {
        margin-left: 0;
        margin-right: auto;
    }
    .timeline-horizontal ol li:nth-child(even) div {
        margin-left: auto;
        margin-right: 0;
    }
    /* Reposiciona o número e a seta */
    .timeline-horizontal ol li::after {
        transform: translateX(-50%);
    }
    .timeline-horizontal ol li:nth-child(odd)::after{left: 40%;}
    .timeline-horizontal ol li:nth-child(even)::after{left: 60%;}

    .timeline-horizontal ol li div::before {
        display: none; /* Esconde as setas verticais que não fazem mais sentido */
    }


    /* 
     * Ajuste #2: LAYOUT VERTICAL (Mobile)
     * - Corrige a seta dos itens ímpares para ser igual à dos pares.
    */
    .timeline-vertical ol { margin-left: 20px; transform: none; }
    .timeline-vertical ol li{margin-bottom: 30px;}
    .timeline-vertical ol li::after { left: 0; } /* Mantém a numeração na linha */
    .timeline-vertical ol li div, 
    .timeline-vertical ol li:nth-child(odd) div, 
    .timeline-vertical ol li:nth-child(even) div { 
        width: calc(100% - 60px); 
        float: none; 
        transform: none; 
        margin-left: 40px; 
        text-align: left; 
    }
    .timeline-vertical ol li div::before {
        display: block;
        left: -10px;
        right: auto; 
        border-width: 10px 10px 10px 0;
        border-color: transparent var(--e-global-color-0794524) transparent transparent;
    }
    .timeline-vertical ol li:nth-child(odd) div::before{
        rotate: 180deg;
    }


    /* 
     * Ajuste #3: LAYOUT GRID (Mobile)
     * - Simplifica para uma coluna única com conector vertical.
    */
    .timeline-grid__row ol,
    .timeline-grid__row--reversed ol {
        flex-direction: column; /* Garante que ambas as linhas fiquem em coluna */
        gap: 0; /* O gap agora é controlado pela margem do li */
    }
    .timeline-grid__row:not(:last-child) {
        margin-bottom: 0;
    }
    .timeline-grid ol li {
        margin-bottom: var(--v-gap); /* Espaçamento uniforme entre todos os itens */
        flex: 1; /* Garante que o item ocupe o espaço */
    }

    /* Mostra APENAS o conector vertical para baixo em todos os itens, exceto o último */
    .timeline-grid ol li:not(:last-child)::after {
        display: block;
        background-color: var(--e-global-color-accent);
        width: 4px;
        height: var(--v-gap);
        top: 100%;
        left: calc(50% - 2px);
        transform: none; /* Reseta transformações */
    }
}


/*Estilo para .list*/
.list .timeline-grid__row ol li:not(:last-child)::after{
    background-image: repeating-linear-gradient(to right, #ccc 0, #ccc 4px, transparent 4px, transparent 8px);
    background-size: 6px 2px;
    background-repeat: repeat-x;
    height: 2px;
    width: var(--h-gap);
    top: calc(50% - 1px);
    left: 100%;
    background-color: transparent;
}
.list .timeline-grid ol li div::before{display: none !important;}
.list .timeline .tl-title {
    font-size: 1rem;
    font-weight: 500;
    min-width: 90px;
    line-height: 1.2;
    margin-bottom: 0px !important;
}
.list .timeline ol li div{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    padding: 12px !important;
    border-style: dashed;
    border-color: #777;
    background: #FFFFFFDD;
    box-shadow: none;
}
.list .timeline .tl-icon{
    font-size: 1.3rem;
    margin-bottom: 0px;
}
.list .timeline{width: 100%;}

@media screen and (max-width: 768px) {
    .list .timeline ol li div{justify-content: center;}
    .list .timeline-grid__row ol li:not(:last-child)::after{
        height: 2px;
        width: calc(var(--h-gap) + 10px);
        top: 100%;
        left: calc(50% - var(--h-gap) + 10px);
        background-color: transparent;
        transform: rotate(90deg) translateX(50%);
        z-index: -1;
    }
}