/* TIMELINE INSTITUCIONAL */

@keyframes aparecer_da_esquerda {
    from { filter: opacity(0%); left: -100%; }
    to { filter: opacity(100%); left: 0; }
}

@keyframes aparecer_da_direita {
    from { filter: opacity(0%); left: 100%; }
    to { filter: opacity(100%); left: 0; }
}

@keyframes desaparecer_a_esquerda {
    from { filter: opacity(100%); left: 0; }
    to { filter: opacity(0%); left: -100%; }
}

@keyframes desaparecer_a_direita {
    from { filter: opacity(100%); left: 0; }
    to { filter: opacity(0%); left: 100%; }
}

.aparecer_da_esquerda { animation: aparecer_da_esquerda 1s; }
.aparecer_da_direita { animation: aparecer_da_direita 1s; }
.desaparecer_a_esquerda { animation: desaparecer_a_esquerda 1s; }
.desaparecer_a_direita { animation: desaparecer_a_direita 1s; }

.mod_mr_timeline_intitucional { padding: 96px 0; overflow-x: hidden; }
.mod_mr_timeline_intitucional .ti_timeline_timeline { display: grid; grid-template-columns: max-content 1fr max-content; align-items: center; }

.ti_timeline_titulo { font-size: 36px; font-weight: 700; color: #002F8E; margin-bottom: 96px; }
.tl_seta { line-height: 145%; width: 30px; height: 30px; font-size: 22px; border: 2px solid #3359A5; color: #3359A5; border-radius: 100%; cursor: pointer; text-align: center; transition: 0.5s; }
.tl_seta:not(.tl_seta_inativa):hover { background-color: #3359A5; color: white; }
.tl_seta_inativa { border-color: #999 !important; background-color: #999 !important; color: white; }
.tl_momentos_nav { display: flex; justify-content: space-around; position: relative; height: max-content; }
.tl_momentos_nav::-webkit-scrollbar { display: none; }
.tl_momentos_nav_linha { position: absolute; height: 2px; width: 100%; top: calc(50% - 1px); background-color: #3359A5; }
.um_momento { aspect-ratio: 1 / 1; width: 10px; position: relative; border: 2px solid #3359A5; background-color: white; border-radius: 100%; cursor: pointer; transition: 0.5s;
  div { position: absolute; top: -200%; transform: translateX(-45%) translateY(0); color: #3359A5; font-size: 14px; font-weight: 700; transition: 0.5s }
}
.momento_ativo { border-color: #B8288B; background-color: #B8288B;
  div { color: #B8288B; font-size: 24px; transform: translateX(-45%) translateY(-30%); }
}

.tl_informacao { position: relative; width: 100%; }
.tl_informacao_container { position: absolute; width: 100%; margin-top: 48px; }
.tl_informacao_titulo { font-size: 56px; color: #962172; font-weight: 700; line-height: 120%; border-bottom: 2px solid #99ACD2; margin-bottom: 48px; padding-bottom: 16px; }
.tl_informacao_informacao { display: grid; grid-template-columns: max-content 1fr; grid-gap: 48px; align-items: center; }
.tl_informacao_informacao_img { text-align: center; }
.tl_informacao_informacao_txt { overflow: hidden; color: #002F8E; line-height: 170%; }

@media (max-width: 1200px){
  .mod_mr_timeline_intitucional, .tl_informacao_container, .tl_informacao_informacao { overflow: hidden; }
  .tl_informacao_informacao { overflow-y: hidden; grid-template-columns: max-content; grid-template-rows: repeat(2, max-content); justify-content: center; }
  .tl_informacao_informacao_txt { max-width: calc(100vw - 80px); }
}

@media (max-width: 800px){
  .um_momento:not(.momento_ativo) div { visibility: hidden; }
}


/* PREMIAÇÕES */
.mr_premiacoes {
  background-color: #00143C; padding: 64px 0; color: white;
  background-image: url(../../media/mod_mr_timeline_intitucional/imagens/premiacoes_bg_esquerda.png), url(../../media/mod_mr_timeline_intitucional/imagens/premiacoes_bg_direita.png);
  background-position: left center, right center;
  background-repeat: no-repeat, no-repeat;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow-x: hidden;
}

.scrollable_premiacoes {
    display: flex; 
    gap: 200px; 
    max-width: 100%; 
    height: 300px;
    will-change: transform;
    position: relative; /* Important for proper positioning */
}

.premiacoes_titulo {
  font-size: 36px;
  font-weight: 700;
  color: #FACE47;
  margin-bottom: 24px;
}

.marquee-wrapper {
    display: flex;
    gap: 200px;
    will-change: transform;
    position: relative;
}

.um_premio {
    flex-shrink: 0;
    width: auto; /* Let content determine width */
}

.um_premio img {
    display: block; /* Prevents inline spacing issues */
    max-width: none; /* Prevents responsive image scaling */
    position: absolute;
}

.alinhar_cima img { top: 0; }
.alinhar_baixo img { bottom: 0; }