/*
    Proyecto: CSS Desafíos
    Descripción: 
    - Usa CSS del Kit https://kitdigital.uc.cl/.
    - Usa CSS de componentes Kit Plan Estratégico.
    Autor: Dirección de Experiencia Digital de la UC
    Versión: 1.0.0.
*/



/****** STEPS *******/

.uc-steps .uc-step.step-current .uc-step_head .uc-step_count, 
.uc-steps .uc-step.step-done .uc-step_head .uc-step_count,
.uc-steps .uc-step .uc-step_head .uc-step_line {
    background-color: #03122E;
}
.uc-steps .uc-step .uc-step_head .uc-step_count {
    color: #03122E;
    border: 2px solid #03122E;
}
.uc-steps .uc-step {
    width: 12.5%;
    margin-bottom: 24px;
}

@media (max-width: 1200px) {
    .uc-steps {
        flex-direction: column;
    }
    .uc-steps .uc-step {
        width: 100%;
        display: flex;
        flex-direction: row;
        gap: 12px;
    }
    .uc-steps .uc-step .uc-step_head .uc-step_line {
        top:    70px;
        rotate: 90deg;
        width:  60px;
        left:   -7px;
    }
    .uc-step_info {
        margin-top: 0px;
    }
}

@media (max-width: 768px) {
  
    .uc-steps .uc-step .uc-step_head .uc-step_line {
        /*display: none;*/
        top:    68px;
        width:  80px;
        left:   -24px;
    }
}


/****** COMPONENTE IMAGE CROP *****/


.uc-img-crop {
    border-top-right-radius: 40px;
    position: relative;
    width: 100%;
    overflow: hidden;
    aspect-ratio: 16 / 9; /* móvil */
}

@media (min-width: 992px) {
    .uc-img-crop {
        aspect-ratio: 4 / 3; /* desktop: más recorte vertical */
    }
}

.uc-img-crop img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Modificadores de foco */
.uc-img-crop--focus-top    img { object-position: center top; }
.uc-img-crop--focus-center img { object-position: center center; }
.uc-img-crop--focus-bottom img { object-position: center bottom; }


/* boton flotante */

.uc-btn.btn-fixed {
  
    width: 100%;
}

.btn-fixed_container {
    background: white;
    position: fixed;
    display: block;
    z-index: 9999;
     width: 100%;
     right: 0;
    bottom: 0;
}



/* boton flotante */

/* OTROS */


.card-type--areas {
    box-shadow: none;
    border: 1px solid #C6C6C6;
}

.uc-collapse .uc-collapse_heading {
        border-left: 4px solid #000;
        padding: 12px 16px;
}

.uc-collapse .uc-collapse_heading .uc-icon.icon-shape--rounded {
    background-color: #fff;
}

.uc-collapse .uc-collapse_heading:hover .uc-icon.icon-shape--rounded {
    background-color: #eee;
}