.M13{
    padding: 98px 0;
    overflow: hidden;
}
/*Feedbacks*/

.M13 .superiorContent{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 50px;
}

.M13 .superiorContent .left{
    max-width: 581px;
    width: 100%;
}

.M13 .superiorContent .left .topTitle * {
    color: #03F;
    font-family: "FS Emeric";
    font-size: 20px;
    font-style: normal;
    font-weight: 350;
    line-height: 120%; /* 24px */
    margin-bottom: 4px;
}

.M13 .superiorContent .left .title *{
    color: #212529;
    font-size: clamp(28px, 5vw,36px);
    font-family: "FS Emeric";
    font-style: normal;
    font-weight: 350;
    line-height: 120%; /* 43.2px */
    letter-spacing: -0.65px;
    margin-bottom: 24px;
}

.M13 .superiorContent .left .subtitle *{
    color: #666;
    font-family: "FS Emeric";
    font-size: 20px;
    font-style: normal;
    font-weight: 350;
    line-height: 120%;
    max-width: 535px;
    width: 100%;
}

.M13 .superiorContent .imgRight{
    max-width: 402.57px;
    width: 100%;
    height: 564px;
}

.M13 .superiorContent .imgRight img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.M13 .downContent .timeline{
    display: flex;
    gap: 35px;
    flex-direction: row;
    align-items: center;
}

/*Swiper Controller*/
/*Controllers Swiper*/

.M13 .controllers{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    margin-top: 32px;
    position: absolute;
    top: 180px;
}

.M13 .controllers .btns{
    position: unset;
    min-width: 24px;
    width: 24px;
    height: 24px;
    border-radius: 1000px;
    border: 1px solid #6B8FFF;
    margin-top: unset!important;
    background-color: #FFF;
    transition: all .3s linear;
}

.M13 .swiperCont{ position: relative; }

.M13 .controllers .btns svg{
    width: 8px;
    height: 10px;
}

.M13 .controllers .btns:after{
    content: unset;
}

.M13 .controllers .swiper-pagination-mobile,
.M13 .controllers .swiper-pagination{
    width: fit-content;
    position: unset;
    color: #666;
    font-family: "FS Emeric";
    font-size: 12px;
    font-style: normal;
    font-weight: 350;
    line-height: 120%;
    letter-spacing: 0.25px;
}

.M13 .controllers .btns path{
    stroke: #6B8FFF;
    transition: all .3s linear;
}

/*Accesible States Btn*/
.M13 .controllers .btns:hover{background-color: #6B8FFF;}
.M13 .controllers .btns:hover path{ stroke: #FFF;}

.M13 .controllers .btns:active{ background: #A6BCFF;}
.M13 .controllers .btns:active path{ stroke: #A6BCFF;}

.M13 .controllers .btns:focus,
.M13 .controllers .btns:focus-visible {
    outline: 2px solid #3869FF;
    outline-offset: 3px;
    border-radius: 1000px;
}
/*Swiper slide Circular*/
/* Contenedor circular */
.M13 .swiper.swiperCircle {
    width: 980px;
    height: 980px;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
}

/* Quitar el flex que mete Swiper */
.M13 .swiper.swiperCircle .swiper-wrapper {
    display: block !important;
    position: relative;
    width: 100%;
    height: 100%;
}

/* Slides posicionadas en el centro */
.M13 .swiper.swiperCircle .swiper-slide {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 40px;
    height: 40px;
    transform-origin: 0 0;
    white-space: nowrap;
    background: none !important;
    width: auto !important;
    height: auto !important;
    color: #666;
    font-family: "FS Emeric";
    font-size: 24px;
    font-style: normal;
    font-weight: 450;
    line-height: 100%;
    letter-spacing: -2px;
    cursor: pointer;
}

.M13 .groupCircles{
    display: flex;
    min-width: 980px;
    height: 980px;
    position: relative;
    justify-content: center;
    align-items: center;
}

.M13 .circleData {
    width: 850px;
    height: 850px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1000px;
    border: 100px solid #EDF2FE;
    position: relative;
}

.M13 .circleData::after{
    content: '';
    position: absolute;
    top: 50%;
    right: -100px;
    width: 100px;
    height: 3px;
    background-color: #0033FF;
}

.M13 .circleData .circleTitle{
    margin-top: 30px;
    margin-left: calc((850px / 2) - 200px);
    max-width: 254px;
    width: 100%;
}

.M13 .circleData .circleTitle *{
    color: #212529;
    font-family: "FS Emeric";
    font-size: 24px;
    font-style: normal;
    font-weight: 450;
    line-height: 120%; /* 28.8px */
    letter-spacing: -0.25px;
}


/*Slide Left*/
.M13 .swiperCont .swiperTitles .swiper-slide{
    height: 300px!important;
}

.M13 .swiperCont .swiperTitles .swiper-slide *{
    color: #03F;
    font-family: "FS Emeric";
    font-size: 48px;
    font-style: normal;
    font-weight: 350;
    line-height: 100%; /* 48px */
    letter-spacing: -0.65px;
}

.M13 .swiperCont{
    max-width: 505px;
    width: 100%;
}

.M13 .swiperCont .swiperTitles .swiper-slide span{
    position: absolute;
    bottom: 40%;
}

/* Base: todos muy tenues */
.M13 .swiperCircle .swiper-slide {
    opacity: 0.1;
    transition: opacity 0.3s ease;
}

/* Activo bien visible */
.M13 .swiper.swiperCircle .swiper-slide.swiper-slide-active {
    opacity: 1;
    font-family: "FS Emeric";
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%;
    letter-spacing: -2px;
}

/* Inmediato siguiente/anterior */
.M13 .swiperCircle .swiper-slide-active + .swiper-slide,
.M13 .swiperCircle .swiper-slide-prev {
    opacity: 0.5;
}

/* Segundo siguiente/anterior */
.M13 .swiperCircle .swiper-slide-active + .swiper-slide + .swiper-slide,
.M13 .swiperCircle .swiper-slide-prev.prev-prev {
    opacity: 0.4;
}

/* Tercer siguiente/anterior */
.M13 .swiperCircle .swiper-slide-active + .swiper-slide + .swiper-slide + .swiper-slide,
.M13 .swiperCircle .swiper-slide-prev.prev-prev.prev-prev {
    opacity: 0.3;
}

/* Cuarto siguiente/anterior */
.M13 .swiperCircle .swiper-slide-active + .swiper-slide + .swiper-slide + .swiper-slide + .swiper-slide,
.M13 .swiperCircle .swiper-slide-prev.prev-prev.prev-prev.prev-prev {
    opacity: 0.2;
}

.M13 .desktop{ display: block; }
.M13 .mobile{ display: none; }

/*mobile*/
.M13 .downContent.mobile .swiperTexts .swiper-slide,
.M13 .downContent.mobile .swiperYears .swiper-slide{ text-align: center; }

.M13 .downContent.mobile{ position: relative; }

.M13 .downContent.mobile .textCircle *{
    margin: 90px auto 0px auto;
    max-width: 260px;
    width: 100%;
    color: #212529;
    text-align: center;
    font-family: "FS Emeric";
    font-size: 24px;
    font-style: normal;
    font-weight: 450;
    line-height: 120%;
    letter-spacing: -0.25px;
}

.M13 .downContent.mobile .semicircle{
    max-width: 900px;
    width: 100%;
    height: 170px;
    overflow: hidden;
    position: relative;
    margin-bottom: 31px;
    padding-bottom: 47px;
    box-sizing: content-box
}

.M13 .downContent.mobile .semicircle:after{
    content: '';
    width: 3px;
    height: 100px;
    bottom: 65px;
    left: 50%;
    position: absolute;
    background-color: #03F;
}

.M13 .downContent.mobile .semicircle .stnCircle{
    min-width: clamp(900px, 240vw, 1200px);
    height: 900px;
    border: 100px solid #ECF1FE;
    border-radius: 100%;
    position: absolute;
    bottom: 65px;
    left: 50%;            
    transform: translateX(-50%);
}

.M13 .downContent.mobile .swiperYears .swiper-slide{
    opacity: 0.6;
    color: #4B4F54;
    font-family: "FS Emeric";
    font-size: 24px;
    font-style: normal;
    font-weight: 450;
    line-height: 100%;
    letter-spacing: -2px;
    cursor: pointer;
}

.M13 .downContent.mobile .swiperYears .swiper-slide.swiper-slide-active{
    opacity: 1;
    font-family: "FS Emeric";
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 24px */
    letter-spacing: -2px;
}

.M13 .downContent.mobile .swiperTexts .swiper-slide{
    padding: 0 50px;
}

.M13 .downContent.mobile .swiperTexts .swiper-slide *{
    color: #03F;
    text-align: center;
    font-family: "FS Emeric";
    font-size: 28px;
    font-style: normal;
    font-weight: 350;
    line-height: 120%; /* 33.6px */
    letter-spacing: -0.25px;
    margin-top: 0!important;
    margin-bottom: 0!important;
}



@media screen and (max-width: 1920px){
    .M13 .downContent .timeline{
        transform: translateX(-22dvw);
    }
}

@media screen and (max-width: 1500px){
    .M13 .downContent .timeline{
        transform: translateX(-30dvw);
    }

    .M13 .swiperCont{
        min-width: 550px;
    }
}

@media screen and (max-width: 1250px){
    .M13 .downContent .timeline{
        transform: translateX(-37dvw);
    }

    .M13 .swiperCont{
        min-width: clamp(350px, 37vw,550px);
    }

    .M13 .superiorContent{
        gap: 30px;
        margin-bottom: 0;
    }
}

@media screen and (max-width: 1100px){
    .M13 .downContent .timeline{
        transform: translateX(-42dvw);
    }

    .M13 .swiperCont{
        min-width: clamp(350px, 37vw,550px);
    }
}

@media screen and (max-width: 992px){
    .M13 .downContent .timeline{
        transform: translateX(-45%) scale(0.8);
    }

    .M13 .swiperCont{
        min-width: 450px;
    }

}

@media screen and (max-width: 767px){
    /* Contenedor del arco de años */
    .M13 .swiperYears {
        position: relative;
        min-width: 900px;
        height: 900px;
        overflow: visible;
        margin-bottom: 60px;
        bottom: 1107px;
        left: 50%;
        transform: translateX(-50%);
    }

    /* Anulamos transform de Swiper */
    .M13 .swiperYears .swiper-wrapper {
        transform: none !important;
    }

    /* Cada año colocado manualmente */
    .M13 .swiperYears .swiper-slide {
        transform: translateX(-50%) !important;
        position: absolute;
        left: 0;
        top: 0;
        font-size: 18px;
        font-weight: 500;
        color: #333;
        transition: left 0.6s ease, top 0.6s ease;
        cursor: pointer;

        /* tamaño solo para el contenido */
        width: auto !important;
        height: auto !important;
        display: inline-block;
        padding: 4px 8px;
        white-space: nowrap;
    }

    /* Botones deshabilitados */
    .M13 .swiper-button-prev.disabled,
    .M13 .swiper-button-next.disabled {
        opacity: 0.4;
        pointer-events: none;
    }

    /* Textos */
    .M13 .swiperTexts {
        width: 100%;
        min-height: 60px;
        text-align: center;
        font-size: 16px;
        font-weight: 500;
        color: #222;
        padding: 15px;
    }

    /* Centrado de controles */
    .M13 .controlsAndSwiper {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }
    .M13 .controlsAndSwiper .controllers {
        display: flex;
        align-items: center;
        gap: 15px;
    }
    .M13 .controlsAndSwiper .btns {
        cursor: pointer;
        display: flex;
        align-items: center;
    }

    /*****************************************/

    .M13 .superiorContent .left .subtitle *{
        font-family: "FS Emeric";
        font-size: 20px;
        font-style: normal;
        font-weight: 350;
        line-height: 120%;
        margin: 0;
    
    }

    .M13 .superiorContent .left .title * {
        font-family: "FS Emeric";
        font-size: 28px;
        font-style: normal;
        font-weight: 350;
        line-height: 120%;
        letter-spacing: -0.25px;
    }

    .M13 .swiperTexts{
        padding: 0 20px;
    }

    .M13 .superiorContent{
        padding: 0 10px;
    }

    .M13{
        padding: 64px 0 90px 0;
    }

    .M13 .superiorContent{
        flex-direction: column;
        gap: 64px;
    }

    .M13 .mobile{ display: block; }
    .M13 .desktop{ display: none; }

    .M13 .controlsAndSwiper .controllers{
        margin-top: 10px;
        margin-bottom: 64px;
        position: unset;
        justify-content: center;
    }

    .M13 .superiorContent .imgRight{
        width: 100%;
        height: 335px;
    }
}