/* =====================================================
   YANA NUI AVANCES
===================================================== */

.yn-avances{
    --yn-green:#31544f;
    --yn-green-dark:#234740;
    --yn-gold:#c88a3d;
    --yn-cream:#f7f1e7;
    --yn-blue:#e8f3f8;
    --yn-text:#274640;

    width:100%;
    color:var(--yn-text);
}


/* =====================================================
   LÍNEA DE TIEMPO
===================================================== */

.yn-timeline-section{
    width:100%;
    background:
        linear-gradient(
            135deg,
            #31544f,
            #1f4b43
        );

    padding:
        34px 5vw
        38px;

    box-sizing:border-box;
}


.yn-timeline-title{
    max-width:1500px;
    margin:
        0 auto
        26px;

    color:#fff;

    font-size:
        clamp(
            26px,
            2.1vw,
            38px
        );

    font-weight:700;
}


.yn-timeline-wrap{
    margin:auto;

    display:grid;

    grid-template-columns:
        56px
        minmax(0,1fr)
        56px;

    align-items:center;

    gap:20px;
}


.yn-timeline{
    display:grid;

    grid-template-columns:
        repeat(
            10,
            minmax(80px,1fr)
        );

    grid-template-rows:
        auto auto;

    row-gap:34px;

    column-gap:0;

    min-width:0;
}


.yn-timeline-item{
    position:relative;

    appearance:none;
    border:0;
    background:none;

    padding:0 6px;

    color:#fff;

    text-align:center;
    cursor:pointer;

    min-width:0;
}


.yn-timeline-item[hidden]{
    display:none !important;
}


/*
 Línea entre semanas
*/

.yn-timeline-item::before{
    content:"";

    position:absolute;

    top:16px;
    left:0;
    right:0;

    height:1px;

    background:
        rgba(
            255,255,255,.5
        );

    z-index:0;
}


.yn-timeline-item:first-child::before{
    left:50%;
}


.yn-dot{
    position:relative;
    z-index:2;

    margin:auto;

    width:34px;
    height:34px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:50%;

    border:
        1px solid
        rgba(
            255,255,255,.7
        );

    background:#768b86;
    color:#fff;

    font-weight:600;
}


.yn-timeline-item.is-active
.yn-dot{
    background:
        var(--yn-gold);

    border-color:
        var(--yn-gold);
}


.yn-timeline-label{
    display:block;

    margin-top:9px;

    font-size:13px;
    font-weight:700;

    color:#fff;
}


.yn-timeline-stage{
    display:block;

    margin-top:4px;

    color:
        rgba(
            255,255,255,.8
        );

    font-size:12px;

    line-height:1.25;
}


/* flechas línea */

.yn-timeline-scroll{
    width:48px;
    height:48px;

    border-radius:50%;

    border:
        1px solid
        rgba(
            255,255,255,.7
        );

    background:
        transparent;

    color:#fff;

    font-size:25px;

    cursor:pointer;
}


.yn-timeline-scroll:disabled{
    opacity:.22;
    cursor:default;
}



/* =====================================================
   CONTENIDO DE LA SEMANA
===================================================== */

.yn-week-inner{
    width:
        calc(
            100% - 160px
        );

    max-width:1500px;

    margin:auto;

    padding:
        58px 0
        70px;
}


.yn-week-header{
    display:flex;

    align-items:flex-start;
    justify-content:space-between;

    gap:30px;

    margin-bottom:10px;
}


.yn-kicker{
    font-size:
        clamp(
            28px,
            2.6vw,
            44px
        );

    font-weight:700;

    line-height:1.05;

    color:var(--yn-green-dark);
}


.yn-week-nav-meta{
    display:flex;

    align-items:center;

    gap:10px;
}


.yn-week-meta-text{
    text-align:right;

    margin-right:8px;
}


.yn-week-nav-meta strong{
    display:block;
    font-size:20px;
}


.yn-week-nav-meta small{
    display:block;

    margin-top:2px;

    font-size:13px;
}


.yn-week-arrow{
    width:44px;
    height:44px;

    border-radius:50%;

    border:
        1px solid
        #d7cfc3;

    background:#fff;

    cursor:pointer;

    font-size:20px;

    color:var(--yn-green);
}


.yn-week-stage{
    margin-bottom:12px;

    color:
        var(--yn-gold);

    text-transform:
        uppercase;

    font-weight:700;

    letter-spacing:.08em;
}


/* =====================================================
   GALERÍA PRINCIPAL
===================================================== */

.yn-gallery-main{
    display:grid;

    grid-template-columns:
        minmax(0,1.8fr)
        minmax(260px,.95fr);

    gap:12px;

    width:100%;

    height:
        clamp(
            470px,
            52vw,
            720px
        );
}


.yn-gallery-main figure{
    margin:0;

    overflow:hidden;

    border-radius:14px;
}


.yn-gallery-main img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
}


.yn-main-img{
    height:100%;
}


.yn-side-imgs{
    display:grid;

    grid-template-rows:
        1fr 1fr;

    gap:12px;

    min-height:0;
}


.yn-side-imgs figure{
    min-height:0;
}


/* =====================================================
   CARD GALERÍA SEMANA
===================================================== */

.yn-week-gallery-card {
	margin-top: 18px;
    padding: 30px 36px;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    background-image: url(https://yananui.com/wp-content/uploads/2026/09/FondoFooter.webp);
    background-size: auto;
    background-position: top right;
}


.yn-week-gallery-card::after{
    content:"";

    position:absolute;

    right:-40px;
    bottom:-90px;

    width:380px;
    height:300px;

    opacity:.08;

    background:
        radial-gradient(
            circle,
            #fff,
            transparent 65%
        );
}


.yn-week-gallery-copy{
    position:relative;
    z-index:1;
}


.yn-week-gallery-copy h3{
    margin:
        0 0 8px;

    color:#fff;

    font-size:
        clamp(
            24px,
            2vw,
            35px
        );

    line-height:1.1;
}


.yn-week-gallery-copy p{
    max-width:530px;

    margin:0;

    color:
        rgba(
            255,255,255,.88
        );

    font-size:16px;
    line-height:1.5;
}


.yn-drive-btn{
    position:relative;
    z-index:1;

    flex-shrink:0;

    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:18px;

    padding:
        16px 30px;

    background:
        var(--yn-gold);

    color:#fff !important;

    border-radius:999px;

    text-decoration:none;

    font-weight:600;

    transition:
        transform .2s ease,
        opacity .2s ease;
}


.yn-drive-btn:hover{
    transform:
        translateY(-2px);

    opacity:.94;
}



/* =====================================================
   NOTAS / INFORMACIÓN
===================================================== */

.yn-info-grid{
    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:18px;

    margin-top:18px;
}


.yn-info-grid.is-single{
    grid-template-columns:1fr;
}


.yn-notes-card,
.yn-info-card{
    padding:
        29px 34px;

    border-radius:14px;

    box-sizing:border-box;
}


.yn-notes-card{
    background:
        linear-gradient(
            135deg,
            #fbf7ee,
            #f5eee0
        );
}


.yn-info-card{
    background:
        linear-gradient(
            135deg,
            #eef7fb,
            #dfeff7
        );
}


.yn-notes-card h4,
.yn-info-card h4{
    display:flex;

    align-items:center;

    gap:13px;

    margin:
        0 0 20px;

    font-size:20px;
    font-weight:700;

    color:
        var(--yn-green-dark);
}


.yn-card-title-icon{
    color:
        var(--yn-gold);

    font-size:28px;
}


.yn-info-icon{
    display:flex;

    justify-content:center;
    align-items:center;

    width:34px;
    height:34px;

    border:
        2px solid
        var(--yn-green-dark);

    border-radius:50%;

    font-family:serif;
    font-weight:700;

    font-size:21px;
}


/*
 IMPORTANTE:
 Quitamos por completo la sangría
 tradicional del UL.
*/

.yn-notes-card ul{
    margin:0;
    padding:0;

    list-style:none;
}


.yn-notes-card li{
    display:flex;

    align-items:flex-start;

    gap:11px;

    margin:
        0 0 10px;

    padding:0;

    list-style:none;

    line-height:1.45;
}


.yn-notes-card li:last-child{
    margin-bottom:0;
}


.yn-note-icon{
    flex:
        0 0 19px;

    width:19px;
    height:19px;

    display:flex;

    justify-content:center;
    align-items:center;

    margin-top:2px;

    border-radius:50%;

    background:
        var(--yn-gold);

    color:#fff;

    font-size:11px;

    font-weight:700;
}


.yn-info-card p{
    margin:0;

    line-height:1.65;
}



/* =====================================================
   LOADING
===================================================== */

.yn-loading{
    text-align:center;

    padding:14px;

    font-weight:600;

    color:var(--yn-green);
}


.yn-avances.is-loading
.yn-week-content{
    opacity:.55;
    transition:
        opacity .2s ease;
}

/* =====================================================
   YANA NUI
   TIMELINE SERPENTEANTE
   Página completa
===================================================== */

.yn-avances-full .yn-timeline-serpentine {
    background: #345954;
    padding: 34px 48px 42px;
    position: relative;
    overflow: hidden;
}


/* TÍTULO */

.yn-avances-full .yn-timeline-title {
    margin: 0 0 30px;
    color: #fff;
    font-size: 36px;
    line-height: 1.1;
    font-weight: 500;
}


/* CONTENEDOR */

.yn-avances-full .yn-timeline-shell {
    position: relative;
}


/* FLUJO */

.yn-avances-full .yn-timeline-flow {
    position: relative;
}


/* FILAS */

.yn-avances-full .yn-timeline-row {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    position: relative;
    z-index: 2;
}


/* separación entre ambas filas */

.yn-avances-full .yn-timeline-row-bottom {
    margin-top: 78px;
}


/* =====================================================
   ITEM
===================================================== */

.yn-avances-full .yn-timeline-row .yn-timeline-item {

    appearance: none;
    -webkit-appearance: none;

    border: 0;
    background: transparent;

    color: #fff;

    padding: 0 4px;

    min-width: 0;

    position: relative;

    text-align: center;

    cursor: pointer;

    font-family: inherit;

}


/* Línea IZQUIERDA del punto */

.yn-avances-full .yn-timeline-row .yn-timeline-item::before {

    content: "";

    position: absolute;

    top: 17px;

    left: 0;
    right: 50%;

    height: 1px;

    background: rgba(219, 233, 229, .62);

    z-index: -1;

}


/* Línea DERECHA del punto */

.yn-avances-full .yn-timeline-row .yn-timeline-item::after {

    content: "";

    position: absolute;

    top: 17px;

    left: 50%;
    right: 0;

    height: 1px;

    background: rgba(219, 233, 229, .62);

    z-index: -1;

}


/* =====================================================
   PUNTO / SEMANA
===================================================== */

.yn-avances-full .yn-dot {

    width: 36px;
    height: 36px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin: 0 auto 8px;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,.85);

    background: #78918d;

    color: #fff;

    font-size: 15px;
    font-weight: 600;

    position: relative;

    z-index: 3;

    transition:
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;

}


/* SEMANA */

.yn-avances-full .yn-timeline-label {

    display: block;

    color: #fff;

    font-size: 14px;
    line-height: 1.2;
    font-weight: 700;

    margin-bottom: 3px;

}


/* ETAPA */

.yn-avances-full .yn-timeline-stage {

    display: block;

    color: rgba(255,255,255,.88);

    font-size: 12px;
    line-height: 1.25;

}


/* =====================================================
   ACTIVA
===================================================== */

.yn-avances-full .yn-timeline-item.is-active .yn-dot {

    background: #C8893F;

    border-color: #E6B06D;

    transform: scale(1.08);

    box-shadow:
        0 0 0 4px rgba(200,137,63,.16);

}


/* =====================================================
   EXTREMOS
===================================================== */

/*
 Primera visible:
 sin línea hacia atrás,
 salvo que existan semanas anteriores.
*/

.yn-avances-full
.yn-timeline-serpentine:not(.has-prev)
.yn-timeline-row-top
.yn-timeline-item:first-child::before {

    display: none;

}


/*
 ÚLTIMA SEMANA PUBLICADA:
 NO HAY LÍNEA A LA DERECHA.
*/

.yn-avances-full
.yn-timeline-item.is-final-week::after {

    display: none !important;

}


/* =====================================================
   CURVA 10 → 11
===================================================== */

.yn-avances-full .yn-timeline-turn {

    display: none;

    position: absolute;

    top: 17px;

    left: 0%;
    right: -2%;

    height: 98px;

    border-right:
        2px solid rgba(219,233,229,.62);

    border-bottom:
        2px solid rgba(219,233,229,.62);

    border-radius:
        0 42px 42px 0;

    pointer-events: none;

    z-index: 1;

}


/*
 Mostrar únicamente si hay
 una segunda fila.
*/

.yn-avances-full
.yn-timeline-serpentine.has-second-row
.yn-timeline-turn {

    display: block;

}


/*
 Flecha donde la curva vuelve
 hacia la Semana 11.
*/

.yn-avances-full .yn-timeline-turn::after {

    content: "";

    position: absolute;

    left: -1px;
    bottom: -6px;

    width: 0;
    height: 0;

    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;

    border-left:
        10px solid rgba(219,233,229,.85);

}


/* =====================================================
   FLECHAS DE DESPLAZAMIENTO
===================================================== */

.yn-avances-full .yn-flow-prev,
.yn-avances-full .yn-flow-next {

    position: absolute;

    z-index: 10;

    width: 42px;
    height: 42px;

    border-radius: 50%;

    border:
        1px solid rgba(255,255,255,.65);

    background:
        rgba(255,255,255,.04);

    color: #fff;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 22px;

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease;

}


.yn-avances-full .yn-flow-prev:hover,
.yn-avances-full .yn-flow-next:hover {

    background:
        rgba(255,255,255,.12);

    transform: scale(1.04);

}


/*
 Flecha izquierda alineada
 con el primer elemento superior.
*/

.yn-avances-full .yn-flow-prev {

    left: -20px;
    top: -3px;

}


/*
 Flecha derecha alineada con
 el final de la segunda fila.
*/

.yn-avances-full .yn-flow-next {

    right: -20px;
    bottom: 42px;

}


/*
 hidden debe ganar siempre.
*/

.yn-avances-full
.yn-flow-prev[hidden],
.yn-avances-full
.yn-flow-next[hidden] {

    display: none !important;

}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1100px) {

    .yn-avances-full .yn-timeline-serpentine {
        padding-left: 26px;
        padding-right: 26px;
    }

    .yn-avances-full .yn-timeline-shell {
        overflow-x: auto;
        padding-left: 50px;
        padding-right: 50px;
    }
	
	.yn-avances-full .yn-flow-prev {
		left: 4px;
		top: 1px;
		z-index: 1;
	}
	
	.yn-avances-full .yn-flow-next {
		right: 0px;
		bottom: 5px;
		z-index: 1;
	}

    .yn-avances-full .yn-timeline-flow {
        min-width: 1050px;
    }

}


/* MOBILE */

@media (max-width: 767px) {

    .yn-avances-full .yn-timeline-serpentine {
        padding: 25px 15px 32px;
    }

    .yn-avances-full .yn-timeline-title {
        font-size: 28px!important;
        margin-bottom: 22px!important;
    }

    .yn-avances-full .yn-timeline-flow {
        min-width: 180px;
		margin-top: 6px;
    }
	
	span.yn-timeline-label, span.yn-timeline-stage {
		display: none !important;
	}
	
	.yn-avances-full .yn-timeline-turn{
		height: 40px;
	}
	
	.yn-avances-full .yn-timeline-serpentine.has-second-row .yn-timeline-turn::before {
        left: -21px !important;
        bottom: -46px !important;
        width: 35px !important;
        height: 45px !important;
	}
	
	.yn-avances-full .yn-timeline-row-bottom {
		margin-top: 38px;
	}
		
    .yn-avances-full .yn-timeline-serpentine.has-second-row .yn-timeline-turn::after {
        left: -6px !important;
        bottom: -51px !important;
    }
}

/* =====================================================
   TABLET
===================================================== */

@media(max-width:1024px){

    .yn-week-inner{
        width:
            calc(
                100% - 60px
            );
    }


    .yn-timeline-section{
        padding-left:25px;
        padding-right:25px;
    }


    .yn-timeline{
        grid-template-columns:
            repeat(
                10,
                minmax(
                    68px,
                    1fr
                )
            );

        overflow:hidden;
    }


    .yn-gallery-main{
        height:540px;

        grid-template-columns:
            minmax(
                0,
                1.6fr
            )
            minmax(
                220px,
                .9fr
            );
    }

}



/* =====================================================
   MOBILE
===================================================== */

@media(max-width:767px){

    /*
     Contenido
    */

    .yn-week-inner{
        width:
            calc(
                100% - 28px
            );

        padding:
            35px 0
            45px;
    }


    /*
     Header
    */

    .yn-week-header{
        align-items:center;
    }

	.yn-week-nav-meta {
		display: flex;
		flex-direction: column;
	}
	
	button.yn-week-arrow.yn-next {
		margin-left: 90px;
		margin-top: -44px;
	}
	
	.yn-week-inner {
		width: calc(100% - 28px);
		padding: 25px 0px;
	}
	
	.yn-kicker {
		font-size: 27px;
		margin-top: -30px;
	}
	
	.yn-week-stage {
		margin-top: -50px;
		margin-bottom: 20px;
	}
	
	.yn-week-gallery-copy h3 {
		text-align: center;
	}
	
	.yn-week-gallery-copy p {
		text-align: center;
		margin-bottom: -20px;
	}
    

    .yn-week-nav-meta{
        gap:5px;
    }


    .yn-week-meta-text strong{
        font-size:17px;
    }


    .yn-week-meta-text small{
        font-size:11px;
    }


    .yn-week-arrow{
        width:38px;
        height:38px;
    }


    /*
     Galería:
     grande 100%
     dos pequeñas 50 / 50
    */

    .yn-gallery-main{
        display:block;

        height:auto;
    }


    .yn-main-img{
        width:100%;

        aspect-ratio:
            4 / 3;
    }


    .yn-side-imgs{
        margin-top:8px;

        display:grid;

        grid-template-columns:
            1fr 1fr;

        grid-template-rows:none;

        gap:8px;
    }


    .yn-side-imgs figure{
        aspect-ratio:
            1 / .8;
    }


    /*
     Card verde
    */

    .yn-week-gallery-card{
        padding:
            24px 20px;

        flex-direction:column;

        align-items:flex-start;
    }


    .yn-drive-btn{
        width:100%;

        box-sizing:border-box;
    }


    /*
     Notas
    */

    .yn-info-grid{
        grid-template-columns:1fr;
    }


    .yn-notes-card,
    .yn-info-card{
        padding:
            24px 20px;
    }


    /*
     Timeline móvil:
     horizontal.
    */

    .yn-timeline-section{
        padding:
            26px 14px
            30px;
    }


    .yn-timeline-title{
        margin-bottom:20px;
    }


    .yn-timeline-wrap{
        grid-template-columns:
            42px
            minmax(0,1fr)
            42px;

        gap:7px;
    }


    .yn-timeline-scroll{
        width:40px;
        height:40px;
    }


    .yn-timeline{
        grid-template-columns:
            repeat(
                10,
                minmax(
                    86px,
                    1fr
                )
            );

        overflow:hidden;
    }


    .yn-timeline-stage{
        font-size:10px;
    }

}

/* =====================================================
   FIX AISLADO — TIMELINE SERPENTEANTE
   NO MODIFICA EL RESTO DEL PLUGIN
===================================================== */

.yn-avances-full .yn-timeline-wrap.yn-timeline-serpentine{
    display:block !important;
}
/* PASO 2 — TÍTULO TIMELINE */

.yn-avances-full
.yn-timeline-serpentine
.yn-timeline-title{
    width:100%;
    max-width:none;

    margin:0 0 55px;

    text-align:center;

    font-size:52px;
    line-height:1;

    font-weight:700;
}
/* =====================================================
   FIX FINAL — CURVA IZQUIERDA DE LA SERPENTINA
===================================================== */

/* Curva que baja desde la línea intermedia
   y gira hacia Semana 17 */
.yn-avances-full
.yn-timeline-serpentine.has-second-row
.yn-timeline-turn::before{
    content: "";
    position: absolute;
    left: -25px;
    bottom: -65px;
    width: 52px;
    height: 65px;
    box-sizing: border-box;
    border-left: 2px solid rgba(219, 233, 229, .62);
    border-bottom: 2px solid rgba(219, 233, 229, .62);
    border-radius: 40px 0 0 42px;
    pointer-events: none;
}


/* Reubicamos la flecha al FINAL de esa curva */
.yn-avances-full
.yn-timeline-serpentine.has-second-row
.yn-timeline-turn::after{
    content:"";

    position:absolute;

    left:21px;
    bottom:-70px;

    width:0;
    height:0;

    border-top:6px solid transparent;
    border-bottom:6px solid transparent;

    border-left:10px solid rgba(219,233,229,.85);
}

/* =====================================================
   HOME — LÍNEA DE PROGRESO
===================================================== */

.yn-avances-home .yn-home-progress{
    position:relative;

    width:100%;

    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-top:26px;

    padding:0 8px;

    box-sizing:border-box;
}


/* Línea horizontal */

.yn-avances-home .yn-home-progress-line{

    position:absolute;

    left:8px;
    right:8px;

    top:50%;

    height:1px;

    background:rgba(255,255,255,.42);

    transform:translateY(-50%);

    z-index:1;
}


/* Cada hito */

.yn-avances-home .yn-home-progress-item{

    position:relative;

    z-index:2;

    appearance:none;
    -webkit-appearance:none;

    border:0;
    padding:0;

    background:transparent;

    cursor:pointer;
}


/* Círculo */

.yn-avances-home .yn-home-progress-dot{

    display:flex;

    align-items:center;
    justify-content:center;

    width:24px;
    height:24px;

    border-radius:50%;

    background:#78918d;

    color:#fff;

    font-size:11px;
    font-weight:600;

    line-height:1;

    border:1px solid rgba(255,255,255,.35);

    box-sizing:border-box;
}


/* Semanas ya recorridas */

.yn-avances-home
.yn-home-progress-item.is-completed
.yn-home-progress-dot{

    background:#C8893F;
}


/* Semana actual */

.yn-avances-home
.yn-home-progress-item.is-active
.yn-home-progress-dot{

    background:#C8893F;

    border-color:#E6B06D;

    box-shadow:
        0 0 0 3px rgba(200,137,63,.15);
}


/* Responsive */

@media(max-width:767px){

    .yn-avances-home .yn-home-progress{
        overflow-x:auto;

        gap:55px;

        justify-content:flex-start;

        padding-bottom:8px;
    }

    .yn-avances-home .yn-home-progress-line{
        min-width:700px;
    }

}

/* =====================================================
   HOME — AVANCES
   SOLO AFECTA [yananui_avance_home]
===================================================== */


/* =====================================================
   CONTENEDOR HOME
===================================================== */

.yn-avances-home{
    width:100%;
    box-sizing:border-box;
}


/* =====================================================
   GALERÍA HOME
   1 GRANDE IZQUIERDA + 2 DERECHA
===================================================== */

.yn-avances-home .yn-home-gallery{

    width:calc(100% - 160px);
    max-width:1500px;

    margin:0 auto;

    display:grid;

    grid-template-columns:
        minmax(0, 1.8fr)
        minmax(280px, .95fr);

    gap:12px;

    height:clamp(
        430px,
        42vw,
        620px
    );

    box-sizing:border-box;
}


/* Quitar márgenes nativos */

.yn-avances-home .yn-home-gallery figure{
    margin:0;

    overflow:hidden;

    border-radius:14px;

    min-width:0;
    min-height:0;
}


/* Todas las imágenes */

.yn-avances-home .yn-home-gallery img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
}


/* Imagen grande izquierda */

.yn-avances-home .yn-home-main-img{
    width:100%;
    height:100%;
}


/* Columna derecha */

.yn-avances-home .yn-home-side-imgs{

    display:grid;

    grid-template-rows:
        minmax(0,1fr)
        minmax(0,1fr);

    gap:12px;

    height:100%;

    min-width:0;
    min-height:0;
}


/* =====================================================
   PROGRESO HOME
===================================================== */

.yn-avances-home .yn-home-progress{

    position:relative;

    width:calc(100% - 160px);
    max-width:1500px;

    margin:
        34px auto
        0;

    display:flex;

    align-items:center;
    justify-content:space-between;

    box-sizing:border-box;

    padding:0;
}


/* =====================================================
   LÍNEA
===================================================== */

.yn-avances-home .yn-home-progress-line{

    position:absolute;

    left:0;
    right:0;

    top:50%;

    height:2px;

    background:
        rgba(255,255,255,.48);

    transform:
        translateY(-50%);

    z-index:1;
}


/* =====================================================
   CADA PUNTO
===================================================== */

.yn-avances-home .yn-home-progress-item{

    position:relative;

    z-index:2;

    appearance:none;
    -webkit-appearance:none;

    border:0;

    padding:0;

    background:transparent;

    cursor:pointer;

    font-family:inherit;
}


/* =====================================================
   CÍRCULOS
===================================================== */

.yn-avances-home .yn-home-progress-dot{

    display:flex;

    align-items:center;
    justify-content:center;

    width:36px;
    height:36px;

    border-radius:50%;

    background:#78918d;

    border:
        1px solid
        rgba(255,255,255,.75);

    color:#fff;

    font-size:14px;
    line-height:1;
    font-weight:600;

    box-sizing:border-box;

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}


/* =====================================================
   SEMANA ACTUAL
===================================================== */

.yn-avances-home
.yn-home-progress-item.is-active
.yn-home-progress-dot{

    background:#C8893F;

    border-color:#E6B06D;

    transform:scale(1.12);

    box-shadow:
        0 0 0 4px rgba(200,137,63,.16);
}


/* =====================================================
   HOVER
===================================================== */

.yn-avances-home
.yn-home-progress-item:hover
.yn-home-progress-dot{

    transform:scale(1.08);
}


.yn-avances-home
.yn-home-progress-item.is-active:hover
.yn-home-progress-dot{

    transform:scale(1.12);
}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:1024px){

    .yn-avances-home .yn-home-gallery,
    .yn-avances-home .yn-home-progress{

        width:calc(100% - 60px);
    }


    .yn-avances-home .yn-home-gallery{

        grid-template-columns:
            minmax(0,1.55fr)
            minmax(220px,.9fr);

        height:520px;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:767px){

    .yn-avances-home .yn-home-gallery{

        width:calc(100% - 28px);

        height:auto;

        display:block;
    }


    /* Foto principal */

    .yn-avances-home .yn-home-main-img{

        width:100%;

        aspect-ratio:4 / 3;
    }


    /* Fotos secundarias */

    .yn-avances-home .yn-home-side-imgs{

        margin-top:8px;

        display:grid;

        grid-template-columns:
            1fr 1fr;

        grid-template-rows:none;

        gap:8px;

        height:auto;
    }


    .yn-avances-home
    .yn-home-side-imgs figure{

        aspect-ratio:1 / .8;
    }


    /* Progreso */

    .yn-avances-home .yn-home-progress{
        width: 100%;
        margin-top: 25px;
        overflow-x: hidden;
        justify-content: space-between;
        gap: initial;
        padding: 5px 5px 12px;
    }


    .yn-avances-home .yn-home-progress-line{

        left:5px;

        width:640px;

        right:auto;
    }


    .yn-avances-home .yn-home-progress-item{

        flex:
            0 0 auto;
    }

}