.core-main-timeline {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    padding: clamp(2rem, 5vw, 4rem) var(--site-shell-gap, 2rem);
    background: var(--core-main-band-bg, var(--color-primary-50));
    color: var(--color-primary-50);
    /* Mantém tudo CONTIDO DENTRO da seção */
    position: relative;
    z-index: 20;
    /* IMPORTANTE: conter cards dentro da seção */
    --popup-offset: 221.1px; /* distância que os cards se projetam para cima/baixo */
    --timeline-node-size: 134px; /* diâmetro dos pontos principais */
    --timeline-vertical-padding: calc(var(--popup-offset) + var(--timeline-card-height) - var(--timeline-node-size));
    overflow: hidden; /* garante que nada ultrapasse a seção */
    /* Altura consistente dos cards (pode ajustar este token) */
    --timeline-card-height: 220px;
    --timeline-card-color: var(--color-primary-600);
    --timeline-title-gradient: linear-gradient(
        90deg,
        var(--color-primary-100),
        var(--color-primary-600),
        color-mix(in srgb, var(--color-primary-600) 85%, var(--color-primary-400) 15%)
    );
    /* Damos respiro no rodapé para caber os popups inferiores */
    padding-bottom: calc((clamp(2rem, 5vw, 4rem) + var(--popup-offset)) / 10);
}

.core-main-timeline__content {
    width: min(100%, 1200px);
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 4vw, 3rem);
    align-items: stretch;
    text-align: center;
}

.core-main-timeline__title {
    font-size: clamp(2rem, 3vw, 2.75rem);
    font-weight: 700;
    text-align: center;
    margin: 0;
    align-self: center;
    display: inline-block;
    background: var(--timeline-title-gradient);
    background-size: 160% auto;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* TIMELINE ABAIXO DO TÍTULO (desktop): empurramos a linha de pontos para baixo
   o suficiente para que os popups superiores não invadam o título */
.core-main-timeline .timeline-container {
    display: flex;
    gap: 33.5px;
    width: 100%;
    min-height: calc(var(--timeline-node-size) + (var(--timeline-vertical-padding) * 2));
    padding-block: var(--timeline-vertical-padding);
    justify-content: center;
    font-weight: 900;
    font-size: 67px;
    overflow: visible;
    margin-top: clamp(1rem, 2vw, 1.5rem);
}

.core-main-timeline .timeline-point {
    transition-duration: 0.5s;
    border-radius: 50%;
    background: linear-gradient(145deg, #1e2125, #23282c);
    display: grid;
    place-items: center;
    width: 134px;
    height: 134px;
    position: relative;

}

.core-main-timeline .timeline-point::before {
    content: "";
    width: 200px;
    height: 200px;
    z-index: -1;
    border-radius: 50%;
    position: absolute;
    background: conic-gradient(var(--color) var(--angle), transparent 0deg 360deg);
    animation: rotateBorder 1s linear var(--delay) forwards;
}

.core-main-timeline .timeline-point:nth-child(odd)::before {
    transform: rotate(-90deg);
}

.core-main-timeline .timeline-point:nth-child(even)::before {
    transform: rotate(90deg) scaleY(-1);
}

@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.core-main-timeline .timeline-point:nth-child(1) { --color: var(--color-primary-500); --delay: 0s; }
.core-main-timeline .timeline-point:nth-child(2) { --color: var(--color-primary-500); --delay: 1s; }
.core-main-timeline .timeline-point:nth-child(3) { --color: var(--color-primary-500); --delay: 2s; }
.core-main-timeline .timeline-point:nth-child(4) { --color: var(--color-primary-500); --delay: 3s; }
.core-main-timeline .timeline-point:nth-child(5) { --color: var(--color-primary-500); --delay: 4s; }

.core-main-timeline .popup {
    width: 321.6px;
    min-height: var(--timeline-card-height);
    height: auto;
    display: grid;
    grid-template-columns: 16% 84%;
    position: absolute;
    color: var(--color-primary-50);
    border-radius: 30px;
    background-color: var(--timeline-card-color);
    animation: expandPopup 0.5s linear calc(var(--delay) + 0.5s) forwards;
    z-index: 3;
}

.core-main-timeline .timeline-point:nth-child(odd) .popup { bottom: 221.1px; }
.core-main-timeline .timeline-point:nth-child(even) .popup { top: 221.1px; }

.core-main-timeline .popup-number {
    grid-row: span 2;
    display: grid;
    font-size: 2rem;
    font-weight: bold;
    place-items: center;
    opacity: 0;
    height: 100%;
    animation: fadeIn 0.5s linear calc(var(--delay) + 0.7s) forwards;
}

.core-main-timeline .popup-details {
    padding: 20px;
    background-color: #1c1f23;
    border-radius: 30px;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--color-primary-50);
    text-align: left;
    background: linear-gradient(145deg, #16181b, #22262b);
    margin: 3.35px;
    opacity: 0;
    animation: fadeIn 0.5s linear calc(var(--delay) + 0.7s) forwards;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.core-main-timeline .popup-details p {
    margin: 0;
    line-height: 1.5;
    font-weight: 400;
    font-size: 0.95rem;
}

.core-main-timeline .popup-title {
    color: inherit;
    padding-bottom: 6.7px;
    font-size: 20.1px;
    font-weight: 900;
}

.core-main-timeline .popup::before {
    content: "";
    width: 6.7px;
    height: 0;
    border-radius: 20px;
    background-color: var(--timeline-card-color);
    position: absolute;
    left: 50%;
    top: -41.9px;
    display: flex;
    animation: drawLine 0.5s linear var(--delay) forwards;
}

.core-main-timeline .timeline-point:nth-child(odd) .popup::before {
    top: calc(100% + 47px);
    transform: rotateX(180deg);
}

.core-main-timeline .timeline-point:hover {
    background: linear-gradient(145deg, var(--color), #1e2125);
    color: var(--color-primary-50);
}

@keyframes rotateBorder { from { --angle: 0deg; } to { --angle: 180deg; } }
@keyframes expandPopup { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
@keyframes drawLine { 0% { height: 0%; opacity: 0; } 100% { height: 33.5px; opacity: 1; } }
@keyframes fadeIn { to { opacity: 1; } }

/* MOBILE: empilha cards abaixo de 1050px mantendo formato e altura adaptativa */
@media (max-width: 1050px) {
    .core-main-timeline {
        padding-inline: var(--site-shell-gap, 1.5rem);
        padding-bottom: calc(clamp(2rem, 5vw, 4rem) + (var(--popup-offset) / 2));
        overflow: visible;
    }

    .core-main-timeline__content {
        width: 100%;
        max-width: 100%;
        overflow: visible;
    }

    .core-main-timeline .timeline-container {
        flex-direction: column;
        align-items: stretch;
        gap: clamp(1.25rem, 3vw, 2rem);
        padding: 0;
        min-height: auto;
        width: 100%;
        max-width: 100%;
        height: auto;
        overflow: visible;
        scroll-snap-type: none;
        font-size: clamp(3rem, 9vw, 4.5rem);
    }

    .core-main-timeline .timeline-point {
        width: min(321.6px, 100%);
        height: auto;
        flex: 0 0 auto;
        margin: 0 auto;
        background: none;
        position: static;
        box-shadow: none;
        pointer-events: auto;
        box-sizing: border-box;
        overflow: visible;
        display: block;
        scroll-snap-align: unset;
    }

    .core-main-timeline .timeline-point i {
        display: none;
    }

    .core-main-timeline .timeline-point::before {
        display: none;
    }

    .core-main-timeline .timeline-point .popup::before {
        display: none;
    }

    .core-main-timeline .timeline-point .popup {
        position: static;
        display: grid;
        width: 100%;
        max-width: min(321.6px, calc(100vw - var(--site-shell-gap, 1.5rem) * 2 - 0.5rem));
        margin: 0 auto;
        pointer-events: auto;
        box-sizing: border-box;
        overflow: visible;
        height: auto;
        min-height: var(--timeline-card-height);
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        border-radius: 30px !important;
    }

    .core-main-timeline .timeline-point:nth-child(odd) .popup { bottom: auto !important; top: auto !important; }
    .core-main-timeline .timeline-point:nth-child(even) .popup { top: auto !important; bottom: auto !important; }

    .core-main-timeline .popup-details {
        overflow-wrap: break-word;
        word-wrap: break-word;
        word-break: break-word;
        hyphens: auto;
        height: auto;
        min-height: 100%;
        animation: none !important;
        opacity: 1 !important;
        border-radius: 30px !important;
    }

    .core-main-timeline .popup-number {
        animation: none !important;
        opacity: 1 !important;
    }

    .core-main-timeline .popup-title {
        overflow-wrap: break-word;
        word-wrap: break-word;
        word-break: break-word;
    }

    .core-main-timeline .popup-details p {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    .core-main-timeline .timeline-point:hover,
    .core-main-timeline .timeline-point:focus-within {
        background: none;
        box-shadow: none;
    }

    /* Ajustes adicionais para telas muito pequenas */
    @media (max-width: 480px) {
        .core-main-timeline .popup {
            grid-template-columns: 12% 88%;
            max-width: min(100%, calc(100vw - var(--site-shell-gap, 1.5rem) * 2 - 1rem));
        }

        .core-main-timeline .popup-details {
            padding: clamp(12px, 3vw, 16px);
            font-size: clamp(0.8rem, 3.5vw, 0.9rem);
        }

        .core-main-timeline .popup-title {
            font-size: clamp(0.95rem, 4.5vw, 1.1rem);
            padding-bottom: 0.4rem;
        }

        .core-main-timeline .popup-number {
            font-size: clamp(1.3rem, 5vw, 1.6rem);
        }
    }
}

/* Stack-only fallback quando a largura não comporta o layout lateral */
@media (max-width: 640px) {
    .core-main-timeline .timeline-container {
        flex-direction: column;
        align-items: center;
        gap: clamp(1rem, 3vw, 1.5rem);
        padding: 0;
        min-height: auto;
        overflow: visible;
        scroll-snap-type: none;
    }

    .core-main-timeline .timeline-point {
        width: min(321.6px, 100%);
        height: auto;
        background: none;
        box-shadow: none;
        position: static;
        flex: 0 0 auto;
        margin: 0 auto;
        scroll-snap-align: unset;
    }

    .core-main-timeline .timeline-point::before,
    .core-main-timeline .timeline-point i {
        display: none !important;
    }

    .core-main-timeline .timeline-point .popup::before {
        display: none !important;
    }

    .core-main-timeline .timeline-point .popup {
        position: static;
        width: 100%;
        max-width: min(321.6px, 100%);
        margin: 0 auto;
        height: auto;
        min-height: var(--timeline-card-height);
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .core-main-timeline .popup-details {
        height: auto;
        min-height: 100%;
    }
}

/* ====== Overrides de empilhamento (desktop) ======
   Evita que os cards da timeline sejam cortados por seções irmãs abaixo
   sem afetar o layout mobile já tratado acima. */
@media (min-width: 1051px) {
  .core-main-timeline {
    overflow: visible; /* permite projeção dos popups para fora da seção */
    z-index: 20;       /* mantém acima de irmãos subsequentes */
  }

  .core-main-timeline .popup {
    z-index: 50;       /* assegura que o card fique no topo localmente */
  }
}