main{
    display: flex;
    flex-wrap: wrap;
    gap: 100px;
}	


.sobre{
    width: 100%;
}
.sobre .container{
    gap: 50px;
}
.sobre .texto{
    width: 100%;
    gap: 30px;
    align-items: center;
    justify-content: space-between;
    color: var(--primaria);
}
.sobre .texto p{
    max-width: 905px;
    width: 100%;
}
.sobre .sobre-div{
    width: 100%;
    gap: 20px;
}
.sobre .sobre-div .box{
    max-width: calc(100% / 3 - 20px);
    width: 100%;
    border: 1px solid #00000033;
    border-radius: 10px;
    padding: 30px;
    gap: 20px;
    color: var(--primaria);
}
.sobre .sobre-div .box .titulo{
    align-items: center;
    gap: 30px;
}
.sobre .sobre-div .box .titulo h2 strong{
    line-height: 1;
}
.sobre .sobre-div .box .titulo p{
    color: var(--primaria);
}


.historia{
    width: 100%;
    align-items: center;
    position: relative;
}
.historia::after{
    content: "";
    position: absolute;
    z-index: 2;
    left: 0;
    top: 50px;
    width: 477px;
    height: 703px;
    align-items: center;
    background-image: url(../imagens/sobre/bg.png);
    background-repeat: no-repeat;
    background-size: auto;
}
.historia::before{
    content: "";
    position: absolute;
    z-index: 3;
    right: 0;
    max-width: calc(100% - 40px);
    width: 100%;
    height: 459px;
    background: var(--main-1);
    border-top-left-radius: 300px;
    border-bottom-left-radius: 300px;
}
.historia .container{
    gap: 30px;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 10;
}
.historia .img{
    max-width: 523px;
    width: 100%;
    height: fit-content;
}
.historia .img img{
    width: 100%;
    border-radius: 10px;
}
.historia .img p{
    font-size: 12px;
    color: #27272780;
    margin-top: 3px;
}
.historia .texto{
    max-width: 762px;
    width: 100%;
    color: #fff;
}
.historia .texto h2 strong{
    color: var(--cor-2);
    line-height: 1;
}
.historia .texto p{
    margin-top: 20px;
}


.video{
    width: 100%;
    position: relative;
    padding-bottom: 50px;
}
.video::after{
    content: "";
    width: 100%;
    height: 419px;
    background: var(--main-3);
    position: absolute;
    bottom: 0;
    left: 0;
}
.video .container{
    align-items: center;
    position: relative;
    z-index: 10;
    gap: 30px;
}
.video .titulo{
    width: 100%;
    align-items: center;
    text-align: center;
    color: var(--primaria);
}
.video .titulo h2 strong{
    line-height: 1;
}
.video iframe{
    width: 100%;
    height: 837px;
    border-radius: 20px;
}


.relacionados{
    width: 100%;
    position: relative;
}
.relacionados::after{
    content: "";
    position: absolute;
    z-index: 2;
    right: 0;
    top: -299px;
    width: 569px;
    height: 602px;
    align-items: center;
    background-image: url(../imagens/sobre/bg2.png);
    background-repeat: no-repeat;
    background-size: auto;
}
.relacionados .titulo{
    width: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.relacionados .titulo h2{
    color: #fff;
}
.relacionados .titulo h2 strong{
    color: var(--cor-1);
}
.relacionados .box-div{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.relacionados .box-div .box{
    max-width: calc(100% / 3 - 14px);
    width: 100%;
    border-radius: 22px;
    background-color: #fff;
    border: 1px solid #eee;
}
.relacionados .box-div .box .img{
    display: flex;
    width: 100%;
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
    overflow: hidden;
    position: relative;
}
.relacionados .box-div .box .img img{
    width: 100%;
    border-top-right-radius: 22px;
    border-top-left-radius: 22px;
    transition: ease .3s;
}
.relacionados .box-div .box .img span{
    position: absolute;
    z-index: 10;
    left: 10px;
    top: 10px;
    border-radius: 50px;
    padding: 5px 20px;
    color: var(--primaria);
    background-color: var(--cor-2);
}
.relacionados .box-div .box .texto{
    width: 100%;
    padding: 20px;
}
.relacionados .box-div .box .texto span{
    color: #20343ea3;
}
.relacionados .box-div .box .texto h4{
    color: var(--primaria);
}
.relacionados .box-div .box .texto p{
    margin-top: 20px;
}
.relacionados .box-div .box .link{
    width: 100%;
    padding: 20px;
    margin-top: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.relacionados .box-div .box .link a{
    max-width: 148px;
    width: 100%;
    min-height: 39px;
    text-align: center;
    padding: 10px 40px;
    border-radius: 5px;
    background-color: var(--cor-3);
    color: var(--primaria);
    flex-shrink: 0;
    white-space: nowrap;
    transition: ease .3s;
}
.relacionados .box-div .box .link a:hover{
    background-color: var(--cor-4);
    transition: ease .3s;
}
.relacionados .box-div .box:hover .img img{
    transform: scale(1.1);
    transition: ease .3s;
} 


.lojas{
    width: 100%;
    padding-bottom: 30px;
    position: relative;
}
.lojas::before{
    content: "";
    width: 100%;
    height: 430px;
    background: var(--main-3);
    position: absolute;
    bottom: 0;
    left: 0;
}
.lojas .container{
    align-items: center;
    gap: 50px;
    position: relative;
    z-index: 10;
}
.lojas .img{
    max-width: 713px;
    width: 100%;
    height: fit-content;
}
.lojas .img img{
    width: 100%;
    border-radius: 10px;
}
.lojas .texto{
    max-width: 542px;
    width: 100%;
    color: #fff;
    padding-top: 40px;
}
.lojas .texto h2{
    font-size: 38px;
}
.lojas .texto h2 strong{
    color: var(--cor-2);
}
.lojas .texto a{
    margin-top: 30px;
    max-width: 184px;
    width: 100%;
    min-height: 39px;
    padding: 5px 20px;
    border-radius: 5px;
    background-color: var(--cor-3);
    color: var(--primaria);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: ease .3s;
}
.lojas .texto a:hover{
    background-color: var(--cor-4);
    transition: ease .3s;
}







/* --- SEÇÃO LINHA DO TEMPO --- */
.linha-tempo {
    width: 100%;
    overflow: hidden;
    position: relative;
    z-index: 10;
}
.linha-tempo .titulo{
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    color: var(--primaria);
}
.linha-tempo .titulo h2 strong{
    line-height: 1;
}
.linha-tempo .titulo p{
    max-width: 351px;
}
.linha-tempo .titulo p span{
    color: var(--cor-1);
}
.linha-tempo .desktop{
    width: 100%;
}
.linha-tempo .timeline-content-wrapper {
    width: 100%;
    position: relative;
    height: 300px; 
    margin-bottom: 40px;
}
.linha-tempo .timeline-item {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex; justify-content: center; align-items: center; gap: 40px;
    opacity: 0; visibility: hidden;
    transform: translateY(30px);
    transition: all 0.6s ease-in-out;
    color: var(--primaria);
}
.linha-tempo .timeline-item h2 strong{
    line-height: 1;
}
.linha-tempo .timeline-item.active {
    opacity: 1 !important;
    visibility: visible;
    transform: translateY(0);
}
/* --- Slider de Navegação --- */
.linha-tempo .timeline-slider-navigation {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    max-width: 1320px;
    margin: 40px 0 0;
    position: relative;
}
.linha-tempo .timeline-window {
    flex: 1;
    overflow: hidden;
    position: relative;
    padding: 80px 30px 80px;
}
.linha-tempo .timeline-window,
.linha-tempo .timeline-window * {
    box-sizing: border-box;
}
.linha-tempo .timeline-track {
    position: relative;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.linha-tempo .years-wrapper {
    display: flex;
    width: 100%;
    justify-content: space-between; 
    align-items: center;
    position: relative;
    z-index: 5;
}
.linha-tempo .year-dot {
    flex: none; 
    position: relative;
    display: flex;
    justify-content: center;
    cursor: pointer;
    width: 20px; 
}
/* Bolinha Visual */
.linha-tempo .year-dot::before {
    content: '';
    width: 18px; height: 18px;
    background: #D9D9D9;
    border-radius: 50%;
    z-index: 10;
    transition: all 0.3s;
}
.linha-tempo .year-dot.filled::before,
.linha-tempo .year-dot.active::before {
    background: #ed3237;
}
/* Texto do Ano */
.linha-tempo .year-dot::after {
    content: attr(data-year);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: #99999994;
    font-size: 25px;
    white-space: nowrap;
    transition: color 0.3s;
}
/* ÍMPARES (1, 3, 5...) - Ficam em cima */
.linha-tempo .year-dot:nth-child(odd)::after {
    top: -50px;
    bottom: auto; /* Garante que não haja conflito */
}
/* PARES (2, 4, 6...) - Ficam embaixo */
.linha-tempo .year-dot:nth-child(even)::after {
    bottom: -50px;
    top: auto; /* Reseta o valor padrão para permitir o posicionamento inferior */
}
.linha-tempo .year-dot.active::after {
    color: var(--primaria);
}
/* Barras de Progresso */
.linha-tempo .progress-bar-bg, 
.linha-tempo .progress-line {
    position: absolute;
    top: 50%;
    left: 0; /* Colado no início */
    transform: translateY(-50%);
    height: 7px;
    width: 100%; /* Ocupa o wrapper inteiro */
    margin-left: 0; /* Removido conforme solicitado */
}
.linha-tempo .progress-bar-bg { background: #D9D9D9; z-index: 1; }
.linha-tempo .progress-line { 
    background: #ed3237; 
    z-index: 2; 
    width: 0%; 
    transition: width 0.5s ease; 
}
/* Setas */
.linha-tempo .nav-arrow {
    background: none; border: none; 
    position: absolute;
    bottom: 74px;
}
.linha-tempo .nav-arrow.next{
    right: -30px;
}
.linha-tempo .nav-arrow.prev{
    left: -30px;
}
.linha-tempo .nav-arrow i{
    color: var(--primaria);
    cursor: pointer;
    font-size: 30px; 
    transition: all 0.3s;
}
.linha-tempo .nav-arrow:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
/* LINHA MOBILE */
.linha-tempo .mobile { display: none; }
.linha-tempo .arrow-mobile{ display: none; }
.linha-tempo .arrow-mobile i{
    color: var(--primaria);
    cursor: pointer;
    font-size: 30px; 
    transition: all 0.3s;
}
.linha-tempo .mobile{
    width: 100%;
    flex-direction: column;
    gap: 40px;
    position: relative;
}
.linha-tempo .mobile .linha-conteudo{
    width: 100%;
}
.linha-tempo .mobile .linha-conteudo .box{
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 30px;
}
.linha-tempo .mobile .linha-conteudo .box img{
    max-width: 120px;
    height: fit-content;
}
.linha-tempo .mobile .dots-div{
    width: 100%;
    position: relative;
}
.linha-tempo .mobile .dots-div::before{
    position: absolute;
    content: "";
    width: 100%;
    height: 5px;
    background-color: #ddd;
    top: 5px;
}
.linha-tempo .mobile .linha-dots{
    width: 100%;
}
.linha-tempo .mobile .linha-dots .slick-current .dots{
    color: var(--primaria);
}
.linha-tempo .mobile .linha-dots .dots{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: #99999994;
    text-align: center;
    cursor: pointer;
    position: relative;
}
.linha-tempo .mobile .linha-dots .dots::before{
    display: flex;
    content: "";
    width: 15px;
    height: 15px;
    background-color: #ddd;
    border-radius: 50%;
    transition: ease .3s;
}
.linha-tempo .mobile .linha-dots .slick-current .dots::before{
    background-color: var(--cor-1);
    transition: ease .3s;
}


/* MEDIA DESKTOP */
@media screen and (max-width: 1600px){
    .historia::before{
        max-width: 100%;
    }
    .video iframe{
        height: 40vw;
    }
}

@media screen and (max-width: 1440px){
    .sobre .texto p{
        max-width: calc(100% - 30px - 282px);
    }

    .historia{
        background: var(--main-1);
        padding: 50px 0;
    }
    .historia::before{
        display: none;
    }
    .historia .img p{
        color: #fff;
    }

    .video::after{
        height: 25vw;
        min-height: 150px;
    }    

    .linha-tempo .year-dot::after{
        font-size: 20px;
    }
}

@media screen and (max-width: 1366px){

}

@media screen and (max-width: 1280px){
    .linha-tempo .year-dot::after{
        font-size: 18px;
    }
}

@media screen and (max-width: 1100px){

}

/* MOBILE */
@media screen and (max-width: 1000px){
    .sobre .texto{
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .sobre .texto p{
        max-width: 100%;
    }
    .sobre .sobre-div{
        flex-wrap: wrap;
        justify-content: center;
    }
    .sobre .sobre-div .box{
        max-width: calc(100% / 2 - 40px);
    }

    .historia .container{
        flex-direction: column;
        align-items: center;
    }

    .linha-tempo .container{
        display: flex;
        flex-direction: column;
        gap: 40px;
    }
    .linha-tempo .titulo{
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .linha-tempo .desktop{
        display: none!important;
    }
    .linha-tempo .mobile { display: flex; }
    .linha-tempo .arrow-mobile{ 
        display: flex; 
        gap: 15px; 
        width: 100%;
        justify-content: center;
    }

    .lojas {
        background: var(--main-3);
        padding: 50px 0;
    }
    .lojas::before{
        display: none;
    }
    .lojas .container{
        flex-direction: column;
        align-items: center;
    }
    .lojas .texto{
        display: flex;
        flex-direction: column;
        padding-top: 0;
        text-align: center;
        align-items: center;
    }

    .historia::after,
    .relacionados::after{
        display: none;
    }
}

@media screen and (max-width: 800px){
    .sobre .sobre-div .box{
        max-width: calc(100% / 2 - 10px);
    }

    .linha-tempo .mobile .linha-dots .dots h3{
        font-size: 25px;
    }

    .relacionados .box-div{
        justify-content: center;
    }
    .relacionados .box-div .box{
        max-width: 300px;
    }
}

@media screen and (max-width: 600px){
    main{
        gap: 50px;
    }
    
    .sobre .sobre-div .box{
        max-width: 100%;
    }

    .video iframe{
        height: 350px;
    }

    .linha-tempo .mobile .linha-conteudo .box img {
        max-width: 20vw;
    }
    .linha-tempo .mobile .linha-dots .dots h3{
        font-size: 22px;
    }
}

@media screen and (max-width: 480px){
    .linha-tempo .mobile .linha-conteudo .box h2{
        font-size: 24px;
    }
    .linha-tempo .mobile .linha-conteudo .box h2 strong{
        font-size: 26px;
    }
}

@media screen and (max-width: 400px){

}

@media screen and (max-width: 375px){

}