.sect-gold{
    width: 100%;
    height: auto;
    padding: 30px 0;
    margin: 0;
    background: linear-gradient(to bottom, #fefefe, #bd8d24);
}

.cont-esim-princ{
    width: 90%;
    max-width: 1200px;
    padding: 0;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: start;
    background-color: #eaeaea;
}

.cont-tit-asig{
    width: 100%;
    height: auto;
    padding: 10px;
    margin: 0;
    border-radius: 20px;
    text-align: center;
    background-color: #060a2f;
}

.txt-tit-asig{
    font-size: 20px;
    font-weight: 400;
    color: white;
    padding: 0 !important;
    margin: 0 !important;
}

.cont-questions{

}

.txt-tit-reac{
    font-size: 18px;
    font-weight: 800;
    color: black;
    padding: 0 !important;
    margin: 0 0 10px 0!important;
    text-align: center;
}

.cont-part-qa{
    width: 100%;
    height: auto;
    padding: 10px;
    margin: 0;
    background-color: white;
    background-image: url(/img/logo-unam-sim-transp.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%;
    border-radius: 20px;
}

.txt-questionn{
    font-size: 20px;
    font-weight: 400;
    color: black;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center;
}

.img-preg-exam {
    display: block;
    width: 25%;
    max-width: 300px;
    height: auto;
    padding: 0;
    margin: 0 auto;
}

.img-preg-exam-v2 {
    display: block;
    width: 40%;
    max-width: 500px;
    height: auto;
    padding: 0;
    margin: 0 auto;
}

.cont-questions { display: none; margin-bottom: 30px;}

.cont-questions.active { display: block; width: 100%; height: auto; background-color: #eaeaea; padding: 10px; margin: 0;}


.options {
   width: 100%;
   height: auto;
   padding: 0;
   margin: 16px 0 0 0;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
}

.options button {
    width: 40%; 
    margin: 8px 8px; 
    padding: 16px; 
    border: 1px solid black;
    border-radius: 16px;
    cursor: pointer;
}

.bg-blue{
    background-color: #ddf5f8;
}

.font-btn1{
    font-size: 16px; 
}

.font-btn2{
    font-size: 18px; 
}

.font-btn3{
    font-size: 20px; 
}

.font-btn4{
    font-size: 22px; 
}

.font-btn5{
    font-size: 24px; 
}

.opc-abcd{
    font-size: 28px;
}


.correct { background-color: #b6ffb8; }

.incorrect { background-color: #ffa5ae; }

    .nav-buttons {
    width: 100%;
    height: auto;
    padding: 10px;
      display: flex; 
      justify-content: space-between; 
      margin: 0;
    }

    .solution-container {
        width: 100%;
        height: auto;
        padding: 10px;
        display: flex; 
        flex-direction: row;
        justify-content: space-between; 
        margin: 0;
    }

    .solution-container button {
      padding: 10px 15px; color: white; border: none; border-radius: 10px; cursor: pointer; font-size: 16px; display: inline-block; width: auto;
    }

    .bg-btn-sol {
        background: #bd8d24;
    }

     .bg-btn-quest {
        background: #060a2f;
    }

    /* En desktop: orden natural */
    .btn-sim-order-1 { order: 1; }

    .btn-sim-order-2 { order: 2; }

    .btn-sim-order-3 { order: 3; }


    .center { justify-content: center; }

    /*
    .nav-buttons button, #restart-btn {
      padding: 10px 15px; color: white; border: none; border-radius: 10px; cursor: pointer;
    }
    */

    #restart-btn { margin: 10px auto; display: inline-block; padding: 10px 15px; color: white; border: none; border-radius: 10px; cursor: pointer; background: #060a2f; font-size: 16px;}
    
    #result { width: 100%; height: auto; padding: 0 16px; font-size: 18px; font-weight: bold; margin-top: 10px; text-align: center;}
   
    #popup {
      display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.7); justify-content: center; align-items: center; z-index: 800;
    }
    #popup-content {
      background: white; padding: 20px; max-width: 750px; width: 95%; position: relative; border-radius: 15px;
    }
    #popup iframe { width: 100%; height: 415px; }
    #popup button { position: absolute; top: 5px; right: 10px; background: red; color: white; border: none; border-radius: 50%; padding: 3px 8px;}


    .timer-container {
        width: 100%;
        text-align: center;
        margin-top: 10px;
        font-size: 20px;
        font-weight: bold;
        color: #060a2f;
        background-color: white;
    }

    .txt-timer {
        font-size: 20px;
        font-weight: bold;
        color: #060a2f;
        padding: 0 !important;
        margin: 0 !important;
    }


    @media (min-width: 0) and (max-width: 699px){

        
        .txt-tit-asig{
            font-size: 18px;
        }

        .txt-tit-reac{
            font-size: 16px;
        }

        .txt-questionn{
            font-size: 17px;

        }

        .img-preg-exam {
            display: block;
            width: 80%;
            max-width: 300px;
            height: auto;
            padding: 0;
            margin: 0 auto;
        } 
        
        .img-preg-exam-v2 {
            display: block;
            width: 90%;
            max-width: 350px;
            height: auto;
            padding: 0;
            margin: 0 auto;
        }

        .options {
            width: 100%;
            height: auto;
            padding: 0;
            margin: 16px 0 0 0;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
        }

        .options button {
            width: 100%; 
            margin: 8px 8px; 
            padding: 10px; 
            border: 1px solid black;
            border-radius: 16px;
            cursor: pointer;
        }

        .options button:first-child {
            margin-top: 0; 
        }

        .options button:last-child {
            margin-bottom: 0; 
        }

        .solution-container {
            width: 100%;
            height: auto;
            padding: 10px;
            display: flex; 
            flex-direction: column;
            justify-content: center; 
            align-items: center;
            margin: 0;
        }

    .solution-container button {
      padding: 10px 15px; color: white; border: none; border-radius: 10px; cursor: pointer; font-size: 16px; margin: 8px 0; width: 100%;
    }

    .solution-container button:first-child {
         margin-top: 0;
    }

    .solution-container button:nth-child(2) {
         margin-bottom: 0;
    }


      /* En desktop: orden natural */
    .btn-sim-order-1 { order: 1; }

    .btn-sim-order-3 { order: 2; }

    .btn-sim-order-2 { order: 3; }

    .font-btn1{
    font-size: 16px; 
    }

    .font-btn2{
        font-size: 16px; 
    }

    .font-btn3{
        font-size: 18px; 
    }

    .font-btn4{
        font-size: 18px; 
    }

    .font-btn5{
        font-size: 20px; 
    }

    .opc-abcd{
    font-size: 26px;
}

    #popup-content {
      background: white; padding: 20px; max-width: 750px; width: 95%; position: relative; border-radius: 15px;
    }
    #popup iframe { width: 100%; height: 250px; }
    #popup button { position: absolute; top: 5px; right: 10px; background: red; color: white; border: none; border-radius: 50%; padding: 8px 14px;}



    }