.hidden {
    display: none !important;
}
/* ===============================
   CONTENEDOR GENERAL
================================ */
.capitalbrake-test {
    margin-top: 2rem;
    width: 800px;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    
}

/* ===============================
   TEXTO DE PREGUNTAS
================================ */
.capitalbrake-test h3,
.test-question {
    text-transform: uppercase;
    color: rgba(0,0,0,0.7);
    font-weight: bold;
    }
    .test-question{margin-bottom: 1rem;}

   
/* ===============================
   SELECTOR DE TEST
================================ */
.test-selector {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 2rem;
    margin: 2rem 0;
}

.test-selector button {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: none;
    background: #ffffff;
    box-shadow: 0 0 20px rgba(0,0,0,0.4);
    font-family: 'Cal Sans', sans-serif;
    text-transform: uppercase;
    cursor: pointer;
}

   .test-selector button:hover {
                                box-shadow: 0 0 20px rgba(0,0,0,0.2);}

/* ===============================
   BARRA DE PROGRESO
================================ */
.progress-wrapper {
    margin: 2rem 10%;
    width: 80%;
    position: relative;
    
}

.progress-text {
    position: absolute;
    top: -0.8rem;
    right: 0;
    color: #b0b0b0;
    font-size: 0.6rem;
}

.progress-bar {
    width: 100%;
    height: 7px;
    background: #d3d3d3;
    border-radius: 5px;
    border:solid 1px #d3d3d3;
    box-shadow: 0 3px 5px rgba(0,0,0,0.1);
}

.progress-fill {
    height: 100%;
    width: 0%;
    border-radius: 5px;
    background: linear-gradient(
        to left,
        #b6f18d,
        #b0f998
    );
    transition: width 0.3s ease;
}

/* ===============================
   BOTONES DE RESPUESTA
================================ */
.test-answers,
.test-app{width: 100%;
          height: auto;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
              }

.answer-btn{
    width:600px;
    height: 30px;
    background: #ffffff;
    color:#191a1c;
    border: none;
    border-radius: 15px;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-left: 1rem;
    cursor: pointer;
    transition: all ease 0.5s;
}

    .answer-btn:hover{background-color: #192130;
                      color:#d3d3d3;}



/* círculo verde */
.answer-btn::before {
    content: "";
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: linear-gradient(
        to bottom,
        #b6f18d,
        #5fa85c
    );
    flex-shrink: 0;
}

.answer-btn span {
    text-align: left;
    color: #191a1c;
}
/*-----meta---*/


.test-meta,
.result-title{width: 100%;
              text-align: left;
              color: #b0b0b0;
              font-size: 0.6rem;
              margin: 0;
           }

/*estilos de resultados parciales de 1 o 2 test*/
.test-result{
             width: 100%;
             min-height: 100px;
             display: flex;
             flex-direction: column;
             justify-content: flex-start;
             align-items: flex-start;
             margin-bottom: 1.5rem;}

            .result-profile,
            .result-title-final{font-size: 1.7rem;
                                line-height: 1.5rem;
                                color: rgba(25,26,28,0.6);
                                font-weight: normal;}


            
            .result-profile strong{color:#b6f18d;}

            .result-description{width: 90%;
                                height: auto;
                                margin-left: 0.25rem;
                                font-size: 1.2rem;
                                line-height: 1rem;
                                color: rgba(25,26,28,0.3);
                                margin-top: 0.5rem;}


.test-next{width: 100%;
           height: 200px;
           display: flex;
           flex-direction: row;
           flex-wrap: wrap;
           justify-content: flex-start;
           align-items: center;
           }

           .test-next-text{width: 100%;
                           text-align: left;
                           font-size: 1.6rem;
                           font-weight: normal;
                           line-height: 1.4rem;
                           color: rgba(25,26,28,0.4);
                           margin-top: 2rem;}

.test-next-actions{width: 100%;
                   display: flex;
                   flex-direction: row;
                   justify-content: center;
                   align-items: center;}

.test-type-btn{background: rgba(25,26,28,1);
               color: rgba(255,255,255,1);
               border: solid 1px rgba(0,0,0,0.7);
               border-radius: 5px;
               text-align: center;
               width: 300px;
               height: 30px;
               font-weight: normal;
               font-family: "Outfit", sans-serif;
               margin-right:1rem ;
               transition: all ease 0.5s;}

          .test-type-btn:hover{background-color: rgba(255,255,255,1);
                               border: solid 1px rgba(201,254,123,1);
                               color: rgba(25,26,28,0.6);
                               box-shadow: 0 0 5px rgba(201,254,123,1);}

.test-email{width: 80%;
            margin-right: 20%;
            padding: 1rem; 
                    
            box-shadow:0 0 5px rgba(0,0,0,0.2);
            border-radius: 15px;}

            .test-email-text{font-size: 0.8rem;
                             line-height: 0.8rem;
                             color: rgba(25,26,28,0.3);
                             margin-bottom: 1rem;}

            .test-email-form{display: flex;
                             flex-direction: row;
                             justify-content: center;
                             align-items: center;}
                
            .test-email-input{border: solid 1px rgba(0,0,0,0.5);
                              border-right: none;
                              border-radius: 5px 0 0 5px;
                              height: 30px;
                              width: 400px;
                              padding-left:0.5rem;
                              font-weight: normal;
                              font-family: "Outfit", sans-serif;
                              color:#192130; }
                              .test-email-input:focus{outline: none;}

            .test-email-btn{background: rgba(25,26,28,1);
                            color: rgba(255,255,255,1);
                            border: solid 1px rgba(0,0,0,0.7);
                            border-left: none;
                            border-radius:0 5px 5px 0;
                            text-align: center;
                            width: 200px;
                            height: 30px;
                            font-weight: normal;
                            font-family: "Outfit", sans-serif;
                            transition: all ease 0.5s;}

                            .test-email-btn:hover{background-color: rgba(201,254,123,1);
                                                  border: solid 1px rgb(106, 155, 33);
                                                  border-left: none;
                                                  color: rgba(25,26,28,0.6);
                                                  box-shadow: 0 0 5px rgba(201,254,123,1);}

.test-txt.test-active .test-intro {
    display: none !important;
}