:root {
    --gradient: linear-gradient(180deg, #001c15ff -9%, #001c15cc 81%, #001c15 100%, #ccff9955 160%, #001c15ff 100% );
}

div:has(>.text-year) {
    position: absolute;
    width: 100%;
/*    right: 0;
    padding-right: 3%;*/
    height: 100%;
    margin-top: 6%;
    text-align:center;
    padding-left:6%;
    padding-right:6%;
}

.text-year {
    font-size: clamp(15px, 2.1vw, 40px) !important;
    filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));
}

#Capa_2 {
    position:absolute;
    width: 100%;
    height: 100%;
    display: block;
    transform: translate(0%,36%);
}

#Timeline circle,
#Timeline g:has(>text) {
    transition: 400ms;
    -webkit-transition: 400ms;
    -moz-transition: 400ms;
    -ms-transition: 400ms;
    -o-transition: 400ms;
    transform-origin: inherit;
    transform-box: fill-box;
}

.timeline-mark-hover {
    transform: scale(1.3) translate(-100%, -100%);
    filter: drop-shadow(0 0 10px var(--flo-green));
    -webkit-transform: scale(1.3) translate(-10%, -10%);
    -moz-transform: scale(1.3) translate(-10%, -10%);
    -ms-transform: scale(1.3) translate(-10%, -10%);
    -o-transform: scale(1.3) translate(-10%, -10%);
}

.timeline-year-hover {
    transform: scale(2.0) translate(-25%, -50%);
    -webkit-transform: scale(2.0) translate(-25%, -50%);
    -moz-transform: scale(2.0) translate(-25%, -50%);
    -ms-transform: scale(2.0) translate(-25%, -50%);
    -o-transform: scale(2.0) translate(-25%, -50%);
}

#background-timeline {
    position: relative;
    height: 450px;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    max-height: 900px;
    overflow: hidden;
    isolation: isolate;
    transition: background-image 0.4s ease-in-out;
    -webkit-transition: background-image 0.4s ease-in-out;
}

.timeline-svg-container {
    width: 100%;
    height: 450px;
    overflow:hidden;
    position: relative;
}

@media(max-width: 1080px){
    .timeline-svg-container {
        overflow-x: auto; 
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
}

.timeline-stage {
    position: relative;
    height: 450px;
    min-width: 1080px;
    width: 100%;
    margin: 0 auto;
}

.timeline-svg {
    width: 100%;
    height: 100%;
    display: block; 
    flex: 0 0 auto; 
}

.bg-image {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    z-index: -1;
    height:440px;
}

.bg-2026 {
    background-image: var(--gradient),url(../images/timeline/2026.webp);
    background-position: center !important;
}

.bg-2023 {
    background-image: var(--gradient),url(../images/timeline/2023.webp);
}

.bg-2020 {
    background-image: var(--gradient),url(../images/timeline/2020.webp);
    background-position: center !important;
}

.bg-2019 {
    background-image: var(--gradient),url(../images/timeline/tm-8.webp);
    background-position: bottom !important;
}


.bg-2018 {
    background-image: var(--gradient),url(../images/timeline/tm-7.webp);
    background-position: bottom !important;
}

.bg-2015 {
    background-image: var(--gradient),url(../images/timeline/2015.webp);
    background-position: top !important;
}

.bg-2010 {
    background-image: var(--gradient),url(../images/timeline/2010.webp);
}

.bg-2007 {
    background-image: var(--gradient),url(../images/timeline/tm-4.webp);
    background-position: center !important;
}

.bg-2001 {
    background-image: var(--gradient),url(../images/timeline/tm-3.webp);
    background-position: center !important;
}

.bg-1987 {
    background-image: var(--gradient),url(../images/timeline/tm-2.webp);
    background-position: center !important;
}

.bg-1922 {
    background-image: var(--gradient),url(../images/timeline/1922.png);
    background-position: center !important;
}

.bg-2014 {
    background-image: var(--gradient), url(../images/timeline/2014.jpeg);
    background-position: center !important;
}

.bg-2021 {
    background-image: var(--gradient), url(../images/timeline/2020.webp);
    background-position: center !important;
}

.bg-2024 {
    background-image: var(--gradient), url(../images/timeline/2023.webp);
    background-position: center !important;
}


.tm-fade-in {
    animation: fade-in .4s linear forwards;
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.tm-fade-out {
    animation: fade-out .4s linear forwards;
}

@keyframes fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}