.beca{
      display:flex;
      width:100%;
      justify-content:center;
      padding: 0 20px;
    }

    .quiz{
      padding:50px 20px 20px 20px;
      background-color:rgba(255,255,255,0.1);
      border:1px solid rgba(255,255,255,0.2);
      border-radius:30px;
      max-width:1275px;
    }
    
    .quiz-head{
      display:flex;
      flex-direction:column;
      padding:0;
      align-items:center;
      text-align:center;
      gap:20px;
    }
    
    .quiz-head h2{
      font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height:52px;
  font-size:55px; 
      margin: 0;
      color:white;
    }
    
    .quiz-head p{
      margin:0; color:var(--muted);
      font-size:13px;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height:25px;
  font-size:17px;
  color:rgba(255,255,255,0.9);
    }

    .progress{
      height:10px;
      width:100%;
      border-radius:999px;
      background: rgba(255,255,255,.06);
      border:1px solid var(--line);
      overflow:hidden; margin:12px 0 16px;
    }
    
    .progress{
      margin-top:40px;
      margin-bottom:40px;
    }
    
    .bar{
      height:100%;
      width:0%;
      background:linear-gradient(90deg, rgba(91,255,183,.95), rgba(118,167,255,.95));
      border-radius:999px;
      transition: width .25s ease;
    }

    .step{
      display:none;
      border:1px solid var(--line);
      background: rgba(0,0,0,.20);
      border-radius:18px;
      padding:40px 31px;
      gap:21px;
    }
    
    .step.active{
      display:block
    }

    /* ROW -> FLEX */
    .row{
      display:flex;
      gap:12px;
    }
    .row > div{
      flex:1;
    }

    label{
        font-family: "Poppins", sans-serif;
        font-weight: 500;
        font-style: normal;
        font-size:17px;
        line-height:22px;
        color:rgba(255,255,255,0.8);
    }
    
    input, select, textarea{
      width:100%;
       box-sizing: border-box;
      padding:12px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.04);
      color:var(--text); outline:none;
      background-color:green;
    }
    
    input:focus, select:focus, textarea:focus{
      border-color: rgba(91,255,183,.55)
    }
    
    textarea{
      min-height:92px; resize:vertical;
      background-color:pink;
    }

    /* OPT -> FLEX */
    .opt{
      display:flex;
      gap:10px;
      margin-top:8px;
      flex-wrap:wrap;
      justify-content:center;
    }
    
    .opt .chip{
      flex: 0 0 calc(50% - 10px);
    }

    .chip{
      border:1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.03);
      padding:12px; border-radius:16px;
      cursor:pointer; transition:.15s ease; user-select:none;
    }
    
    .chip:hover{
      transform: translateY(-1px); border-color: rgba(255,255,255,.22)
    }
    
    .chip strong{
      font-weight:600;
      font-size:18px;
    }
    
    .chip span{
      display:block; font-size:14px; color:var(--muted); margin-top:6px; letter-spacing:0.02;
      font-weight:400; color:rgba(255,255,255,0.8);
    }
    
    .chip.selected{
      border-color: rgba(91,255,183,.55);
      box-shadow: 0 0 0 6px rgba(91,255,183,.10);
    }

    .quiz-actions{
      display:flex; justify-content:space-between; 
      gap:10px;
      margin-top:12px;
      flex-wrap:wrap;
    }
    
    .note{
      color:var(--muted);
      font-size:12px;
      margin-top:10px;
    }

    .result{
      display:none;
      margin-top:34px;
      border-radius:18px;
      border:1px solid rgba(91,255,183,.30);
      background: rgba(91,255,183,.08); 
      padding:20px;
    }
    
    .result.show{
      display:block
    }
    
    .result p{
      margin:0;
      color: rgba(234,240,255,.90);
      font-size:13px;
      padding-top: 20px;
      
    }

    /* MINI RESULT -> FLEX */
    .result .mini{
      margin-top:10px;
      display:flex;
      gap:10px;
    }
    .result .mini .tag{
      flex:1;
    }

    .tag{
      border-radius:16px;
      padding:10px;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(0,0,0,.18);
    }
    
    .tag b{
      display:block;
      font-size:12.5px
    }
    
    .tag span{
      display:block;
      color:var(--muted);
      font-size:12px;
      margin-top:3px
    }

    details{
      border:1px solid var(--line);
      background: rgba(255,255,255,.03);
      border-radius:18px;
      padding:12px 14px;
    }
    
    details + details{
      margin-top:10px
    }
    
    summary{
      cursor:pointer;
      font-weight:700;
      font-size:13px}
    
    details p{
      margin:8px 0 0;
      color:var(--muted);
      font-size:13px}



    /* RESPONSIVE */
    @media (max-width: 780px){
      .row{
        flex-direction:column;
      }
      .opt .chip{
        flex:1 1 100%;
      }
      .result .mini{
        flex-direction:column;
      }
    }
    
    label{
      display:flex;
      padding-bottom:20px;
    }
    
    .space{
      padding-top:10px;
    }
    
    .chip {
    border: 1px solid rgba(255, 255, 255, .15);
    background: rgba(0, 0, 0, 0.14);
        font-family: "Poppins", sans-serif;
        font-weight: 500;
        font-style: normal;
        font-size:18px;
        line-height:22px;
        padding:29px 40px;
      color:white;
    }
    
    .card.quiz button {
            all:unset;
      display:flex;
      box-sizing:border-box;
      width:fit-content;
      cursor:pointer;
      padding:13px 23px;
      border-radius:50px;
      border:1px solid rgba(255,255,255,0.2);
        font-family: "Poppins", sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size:13.73px;
        line-height:15px;
      color:white;
      letter-spacing:0.02em;
      margin-top:10px;
    }
    
    select, textarea, input{
      color:white;
          border: 1px solid rgba(255, 255, 255, .15);
    background: rgba(0, 0, 0, 0.14);
              font-family: "Poppins", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size:15px;
        line-height:20px;
      color:white;
      letter-spacing:0.02em;
    }
    
    .note{
        font-family: "Poppins", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size:13.73px;
        line-height:20px;
      letter-spacing:0.02em;
        color:white;
      color:rgba(255,255,255,0.8);
      padding-top:15px;
    }
    
    select, input{
        font-family: "Poppins", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size:15px;
        line-height:20px;
        letter-spacing:0.02em;
        color:white;
    }

    h3{
        font-family: "Poppins", sans-serif;
        font-weight: 600;
        font-style: normal;
        font-size:20px;
        line-height:24px;
        letter-spacing:0.02em;
        color:white;
    }
    
    .result p{
        font-family: "Poppins", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size:15px;
        line-height:22px;
        letter-spacing:0.02em;
        color:rgba(255,255,255,0.85);
    }
    
    .result .mini{
        padding-top:25px;
      padding-bottom:10px;
      margin:0;
    }
    
    .tag b {
      display: block;
        font-family: "Poppins", sans-serif;
        font-weight: 500;
        font-style: normal;
        font-size:14px;
        line-height:17px;
        letter-spacing:0.02em;
        color:rgba(255,255,255,1);
    }
    
    .tag span {
        font-family: "Poppins", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size:13px;
        line-height:19px;
        letter-spacing:0.02em;
        color:rgba(255,255,255,0.8);
    }
    
    .tag{
      padding:20px;
    }
    
    a.linkwhats{
            all:unset;
            display:flex;
      box-sizing:border-box;
      width:fit-content;
        text-decoration:none;
        cursor:pointer;
        color:white;
        display:flex;
        width:fit-content;
        padding:13px 22px;
        text-align:center;
        background-color:#B8181B;
        border-radius:50px;
        font-family: "Poppins", sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size:14px;
        line-height:15px;
        transition:all 0.3s ease;
    }

    a.linkwhats:hover{
      transform: translateY(-3px);
    }
    
    .bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #13A131, #77DA8C);
    border-radius: 999px;
    transition: width .25s ease;
}
    
.wrap{
  width:100%;
  display:flex;
  justify-content:center;
}

.card.quiz{
  width:100%;
  max-width:1275px; /* el ancho real del step 1 */
}
    
    .progress{
      margin-bottom:30px;
      margin-top:;
    }
    

    @media(max-width:950px){

      .step {
        padding: 18px;
      }
    }