.elementor-2031 .elementor-element.elementor-element-1f76920{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-2031 .elementor-element.elementor-element-d8ceb46 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}#elementor-popup-modal-2031{background-color:rgba(0,0,0,.8);justify-content:center;align-items:center;pointer-events:all;}#elementor-popup-modal-2031 .dialog-message{width:640px;height:auto;}#elementor-popup-modal-2031 .dialog-close-button{display:flex;}#elementor-popup-modal-2031 .dialog-widget-content{border-radius:20px 20px 20px 20px;box-shadow:2px 8px 23px 3px rgba(0,0,0,0.2);}/* Start custom CSS for html, class: .elementor-element-d8ceb46 */*{box-sizing:border-box;margin:0;padding:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
body{font-family:var(--font-sans);color:var(--color-text-primary);background:transparent}
#app{max-width:620px;margin:0 auto;padding:1.5rem 1rem 2rem}

.header{margin-bottom:1.5rem}
.header h2{font-size:18px;font-weight:500;margin-bottom:4px}
.header p{font-size:14px;color:var(--color-text-secondary)}

.prog-bar-wrap{margin-bottom:1.5rem}
.prog-meta{display:flex;justify-content:space-between;font-size:12px;color:var(--color-text-secondary);margin-bottom:6px}
.prog-track{height:5px;background:var(--color-border-tertiary);border-radius:40px;overflow:hidden}
.prog-fill{height:100%;background:#378ADD;border-radius:40px;transition:width .4s cubic-bezier(.4,0,.2,1)}

.q-card{
  background:var(--color-background-primary);
  border:.5px solid var(--color-border-tertiary);
  border-radius:var(--border-radius-lg);
  padding:1.5rem;
  margin-bottom:1rem
}

.q-label{
  font-size:11px;
  color:var(--color-text-secondary);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.07em;
  margin-bottom:.6rem
}

.q-text{
  font-size:16px;
  font-weight:500;
  line-height:1.5;
  color:var(--color-text-primary)
}

.options{
  display:grid;
  gap:8px
}

.opt{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 14px;
  border:.5px solid var(--color-border-tertiary);
  border-radius:var(--border-radius-md);
  background:var(--color-background-primary);
  cursor:pointer;
  font-size:14px;
  color:var(--color-text-primary);
  text-align:left;
  font-family:var(--font-sans);
  width:100%;
  transition:border-color .18s,background .18s;
}

/* HOVER GRIS */
.opt:hover{
  border-color:#d0d0d0;
  background:#f2f2f2 !important;
}

/* CÍRCULO HOVER */
.opt:hover .letter{
  background:#e0e0e0;
  border-color:#cfcfcf;
}

.opt:disabled,
.opt.locked{
  pointer-events:none
}

.opt.chosen{
  border-color:#378ADD;
  background:#E6F1FB
}

.opt.correct{
  border-color:#3B6D11;
  background:#EAF3DE
}

.opt.wrong{
  border-color:#A32D2D;
  background:#FCEBEB
}

.opt.correct .letter{
  background:#3B6D11;
  border-color:#3B6D11;
  color:#EAF3DE
}

.opt.wrong .letter{
  background:#A32D2D;
  border-color:#A32D2D;
  color:#FCEBEB
}

.opt.chosen .letter{
  background:#378ADD;
  border-color:#378ADD;
  color:#E6F1FB
}

.letter{
  width:26px;
  height:26px;
  border-radius:50%;
  border:.5px solid var(--color-border-secondary);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:500;
  flex-shrink:0;
  font-family:var(--font-sans);
  transition:background .18s,border-color .18s,color .18s
}

.feedback{
  display:flex;
  align-items:center;
  gap:8px;
  padding:.6rem .9rem;
  border-radius:var(--border-radius-md);
  font-size:13px;
  font-weight:500;
  margin-top:.75rem;
  border:.5px solid
}

.feedback.ok{
  background:#EAF3DE;
  color:#27500A;
  border-color:#97C459
}

.feedback.ko{
  background:#FCEBEB;
  color:#791F1F;
  border-color:#F09595
}

.row-next{
  display:flex;
  justify-content:flex-end;
  margin-top:1rem
}

button.next-btn{
  padding:9px 20px;
  border-radius:var(--border-radius-md);
  border:.5px solid var(--color-border-secondary);
  background:transparent;
  font-size:14px;
  font-family:var(--font-sans);
  color:var(--color-text-primary);
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:6px;
  transition:background .18s
}

button.next-btn:hover{
  background:#f2f2f2
}

.result-wrap{
  background:var(--color-background-primary);
  border:.5px solid var(--color-border-tertiary);
  border-radius:var(--border-radius-lg);
  padding:2rem 1.5rem;
  text-align:center
}

.big-score{
  font-size:52px;
  font-weight:500;
  line-height:1;
  margin-bottom:4px
}

.score-sub{
  font-size:13px;
  color:var(--color-text-secondary);
  margin-bottom:1.25rem
}

.gauge-track{
  height:8px;
  background:var(--color-border-tertiary);
  border-radius:40px;
  overflow:hidden;
  max-width:300px;
  margin:0 auto .25rem
}

.gauge-fill{
  height:100%;
  border-radius:40px;
  transition:width 1.1s cubic-bezier(.4,0,.2,1)
}

.gauge-ends{
  display:flex;
  justify-content:space-between;
  font-size:11px;
  color:var(--color-text-secondary);
  max-width:300px;
  margin:0 auto 1.25rem
}

.level-pill{
  display:inline-block;
  font-size:16px;
  font-weight:500;
  padding:7px 20px;
  border-radius:40px;
  margin-bottom:.75rem
}

.result-desc{
  font-size:14px;
  color:var(--color-text-secondary);
  max-width:420px;
  margin:0 auto 1.25rem;
  line-height:1.6
}

.course-row{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:.75rem 1.1rem;
  border:.5px solid var(--color-border-tertiary);
  border-radius:var(--border-radius-md);
  font-size:14px;
  margin-bottom:1.5rem;
  color:var(--color-text-secondary)
}

.course-row b{
  color:var(--color-text-primary)
}

.stats-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-bottom:1.5rem
}

.stat-box{
  background:#f4f4f4;
  border-radius:var(--border-radius-md);
  padding:.85rem .5rem;
  text-align:center
}

.stat-num{
  font-size:22px;
  font-weight:500;
  color:var(--color-text-primary)
}

.stat-lbl{
  font-size:11px;
  color:var(--color-text-secondary);
  margin-top:2px
}

.restart-btn{
  padding:9px 22px;
  border-radius:var(--border-radius-md);
  border:.5px solid var(--color-border-secondary);
  background:transparent;
  font-size:14px;
  font-family:var(--font-sans);
  color:var(--color-text-primary);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:background .18s
}

.restart-btn:hover{
  background:#f2f2f2
}

.review-section{
  margin-top:1.25rem;
  text-align:left
}

.review-title{
  font-size:13px;
  font-weight:500;
  color:var(--color-text-secondary);
  margin-bottom:.75rem;
  display:flex;
  align-items:center;
  gap:6px
}

.review-item{
  border:.5px solid var(--color-border-tertiary);
  border-radius:var(--border-radius-md);
  padding:.85rem 1rem;
  margin-bottom:8px;
  font-size:13px
}

.review-item.r-ok{
  border-color:#97C459
}

.review-item.r-ko{
  border-color:#F09595
}

.ri-q{
  font-weight:500;
  color:var(--color-text-primary);
  margin-bottom:5px;
  line-height:1.4
}

.ri-your{
  color:var(--color-text-secondary);
  margin-bottom:3px
}

.ri-correct{
  color:#27500A;
  font-weight:500
}

.ri-wrong-ans{
  color:#791F1F
}

@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(12px)
  }
  to{
    opacity:1;
    transform:translateY(0)
  }
}

.anim{
  animation:fadeUp .28s cubic-bezier(.4,0,.2,1) both
}

@media(max-width:480px){
  .stats-grid{
    grid-template-columns:repeat(3,1fr)
  }

  .q-text{
    font-size:15px
  }
}/* End custom CSS */