body{
    background-color: white !important;
}
.cont-cuerpo-principal{
   margin-top: 20px;
    display: flex;
    
  
    justify-content: center;
}

.cuerpo-principal {
    display: flex;
    border: solid #D2D2D2 1px;
    max-width: 35rem;
    min-height: 10rem;
    width: calc(20px + 60vw);
    border-radius: calc(0.008 * (20px + 60vw)); /* Ajusta el factor según lo que necesites */
    flex-direction: column;
    padding: calc(0.02*(20px + 60vw));
    margin-bottom: 6rem;
}


.cont-titulo-principal{
    display: flex;
    justify-content: center;
    text-align: center;
}

.titulo-principal {
    color: var(--azul-oscuro);
    font-weight: bold;
    font-family: 'Montserrat';
    font-size: clamp(24px,  calc(5px + 2vw), 27px);
    margin-top: 10px;
}



.cont-subtitulo-principal{
    display: flex;
    justify-content: center;
    text-align: center;
    padding-right: 5%;
    padding-left: 5%;
}

.sub-titulo-principal {
    color: var(--azul-oscuro);
    font-weight: 400;
    font-family: 'Montserrat';
    font-size: clamp(18px,  calc(5px + 2vw), 23px);
    margin-top: 10px;
}


.cont-instrucciones-principal{
    display: flex;
    justify-content: center;
    text-align: center;
    padding-right: 5%;
    padding-left: 5%;
    margin-top: 10px;
}

.sub-instrucciones-principal {
    color: grey;
    font-weight: 400;
    font-family: 'Montserrat';
    font-size: clamp(13px,  calc(5px + 2vw), 16px);
}

.cont-progress-line {
    text-align: center;
    margin-top: 20px;
}


.btn-adelante{
    
        width: 100px;
        background: var(--azul-oscuro);
        font-weight: bold;
        color: white;
        border: 0 none;
        border-radius: 0px;
        cursor: pointer;
        padding: 10px 5px;
        margin: 10px 0px 10px 5px;
        float: right;
        border-radius: 35px;
        text-align: center;
        justify-content: center;
        font-family: 'Montserrat';
        font-size: 14px;
   
}
.btn-atras{
    
        width: 100px;
        background: var(--azul-claro);
        font-weight: bold;
        color: white;
        border: 0 none;
        border-radius: 0px;
        cursor: pointer;
        padding: 10px 5px;
        margin: 10px 0px 10px 5px;
        float: right;
        border-radius: 35px;
        text-align: center;
        justify-content: center;
        font-family: 'Montserrat';
        font-size: 14px;
   
}



.cont-mensaje-paso {
    display: flex;
    width: 100%;
    justify-content: space-between;
}
.titulo-mensaje {
    color: var(--azul-oscuro);
    font-weight: 400;
    font-family: 'Montserrat';
    font-size: clamp(18px, calc(5px + 2vw), 23px);
    margin-top: 10px;
}
.conteo-mensaje {
    color: gray;
    font-weight: 400;
    font-family: 'Montserrat';
    font-size: clamp(18px, calc(5px + 2vw), 23px);
    margin-top: 10px;
}

.pasoStep{
    display: flex;
    flex-direction: column;
}

.cont-cards-opiniones {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 20px;
    margin-bottom: 4rem;
}
.btn-opciones:hover{
    cursor: pointer;
}

.btn-opciones {
    font-size: 15px;
}

button.btn-opciones .li-btn {
   margin-top: 10px;
}
.cont-botones {
    display: flex;
    justify-content: end;
}

.btn-selected{
    background-color: var(--azul-claro)!important;
}


.cont-mensaje-alerta {
    display: flex;
    justify-content: center;
}

.mensaje_alerta {
    color: red;
   

    font-weight: 600;
    font-family: 'Montserrat';
    font-size: clamp(12px, calc(5px + 2vw), 15px);
}


.cont-consulta {
    display: flex;
    justify-content: center;
    padding-bottom: 20px;
}


.invisible{
    display: none;
}

input, textarea{
    padding: 8px 15px 8px 15px;
    border: 1px solid #ccc;
    border-radius: 0px;
    margin-bottom: 25px;
    margin-top: 2px;
    width: 100%;
    box-sizing: border-box;
    font-family: montserrat;
    color: #2C3E50;
    background-color: #ECEFF1;
    font-size: 16px;
    letter-spacing: 1px;
    border-radius: 16px;
}
textarea {
    resize: vertical;
}

.cont-text-area-opinion{
    margin-top: 12px;
}
.fieldlabels {
    color: gray;
    text-align: left;
    display: inline-block;
    font-family: montserrat;
    font-size: clamp(12px, calc(5px + 1.4vw), 15px);
}

.contenedor-campos {
    margin-top: 20px;
}


ul.cont-errores {
    display: flex;
    flex-direction: column;
    margin-left: 28px;
    margin-top: -18px;
    color: red;
    font-weight: 500;
}
ul.cont-errores2 {
    display: flex;
    flex-direction: column;
    margin-left: 28px;
    margin-top: 5px;
    color: red;
    font-weight: 500;
}

.cont-elementos-sector{
    position: relative;
}


.cont-multimedia{
    font-family: 'Montserrat', sans-serif;
}


.cont-img-prev {
    display: flex;
    justify-content: center;
}
.check-img {
    width: 7.2rem;
}


.cont-realizado {
    justify-content: center;
    display: flex;
    margin-top: 3rem;
}

.cont-check {
    display: flex;
    justify-content: center;
    margin-top: 23px;
}


.cont-textos-final {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    margin-top: 38px;
}

.parrafo-final {
    color: var(--azul-oscuro);
    font-weight: 500;
    font-family: 'Montserrat';
    font-size: clamp(14px, calc(5px + 2vw), 19px);
    margin-top: 10px;
}


.btn-nuevo {
    width: 100px;
    background: var(--azul-oscuro);
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 0px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 33px 0px 34px 5px;
  
    border-radius: 35px;
    text-align: center;
    justify-content: center;
    font-family: 'Montserrat';
    font-size: 14px;
}




@media (min-width:1000px){
    .cuerpo-principal {
     
        max-width: 51rem;
      
       
    }
}
@media (max-width:530px){
    .cuerpo-principal {
     
        max-width: 50rem;
        min-height: 10rem;
        width: calc(20px + 80vw);
       
    }
}