.qp-widget,.qp-prizes{max-width:760px;margin:30px auto;font-family:inherit}
.qp-cover,.qp-question-card,.qp-result-screen,.qp-prize,.qp-already{background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 10px 35px rgba(0,0,0,.09);border:1px solid #eee}
.qp-cover>img{display:block;width:100%;max-height:330px;object-fit:cover}
.qp-cover-body,.qp-question-card,.qp-result-screen,.qp-already{padding:28px}
.qp-badge{font-size:11px;letter-spacing:1.5px;font-weight:800;opacity:.65}
.qp-widget h2{
    margin:8px 0 14px;
    padding: 7px;
    font-size:18px;
    scroll-margin-top: 10px!important;
    line-height:1.15}
.qp-question-card h3{font-size:20px;line-height:1.3;margin:0 0 24px}
.qp-description{
    color:#000000;
    padding:0 10px;
    font-size:14px;
    line-height:1.6}
.qp-points-note{
    color: white;
    padding:12px 16px;
    border-radius:12px;
    background:#717af6;
    font-size:14px}
.qp-btn{
    display:inline-block;
    border:0;border-radius:12px;
    padding:11px 18px;
    background:#111;
    color:#fff;
    text-decoration:none;cursor:pointer;
    font-weight:700;font-size:14px}
.qp-btn:hover{opacity:.9;color:#fff}

.qp-widget { position: relative; z-index: 9999; }

.qp-choice{display:flex;gap:12px;align-items:center;padding:14px 16px;border:1px solid #615f5f;border-radius:14px;margin:10px 0;cursor:pointer;transition:.18s;background:#fff;font-size:14px}
.qp-choice:hover,
.qp-choice.selected{border-color:#111;box-shadow:0 4px 14px rgba(0,0,0,.06)}
.qp-choice input{accent-color:#111}
.qp-nav{display:flex;justify-content:space-between;gap:10px;margin-top:18px}
.qp-back{background:#eee;color:#111}
.qp-result-screen{text-align:center}
.qp-icon{width:52px;height:52px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:#111;color:#fff;font-size:26px}
.qp-earned{font-size:18px;font-weight:800;margin:20px 0}
.qp-advice{text-align:left;background:#f7f7f7;border-radius:15px;padding:18px;margin:20px 0;font-size:14px}
.qp-advice li{margin:8px 0}
.qp-register-box{margin-top:20px;padding:20px;background:#f5f5f5;border-radius:15px;font-size:14px}
.qp-login{margin-left:10px}
.qp-review-list{text-align:left;margin-top:20px}
.qp-review-item{padding:14px 0;border-bottom:1px solid #eee;font-size:14px}
.qp-review-item span{display:block;margin-top:5px;font-weight:600;font-size:13px}
.qp-prizes{max-width:1000px}
.qp-balance{font-size:20px;margin-bottom:20px}
.qp-prize-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.qp-prize{padding:20px;font-size:14px}
.qp-prize img{width:100%;height:160px;object-fit:cover;border-radius:13px}
.qp-prize .qp-btn{margin-top:15px;width:100%}
@media(max-width:600px){
  .qp-widget{margin:15px}
  .qp-cover-body,.qp-question-card,.qp-result-screen,.qp-already{padding:6px}
  
  .qp-question-card h3{font-size:18px}
  .qp-nav .qp-btn{padding:10px 12px;font-size:13px}
} 




/** esto es para la card del quiz antes del boton comenzar quiz */
/* ============ Neutraliza animaciones heredadas del tema ============ */
.qp-wizard,
.qp-wizard * {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}

/* ============ Contenedor del wizard ============ */
.qp-wizard {
    background: #ffffff;
    border-radius: 20px;
    border: 2px solid #222222;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08);
    font-family: inherit;
    padding: 16px;
}

/* ============ Barra de progreso ============ */
.qp-progress {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.qp-progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 999px;
    overflow: hidden;
}

.qp-progress-bar i {
    display: block;
    height: 100%;
    width: 0%;
    background: #000000;
    border-radius: 999px;
    transition: width 0.3s ease !important;
    font-style: normal;
}

.qp-progress-text {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #000000;
}

/* ============ Cada pregunta ============ */
.qp-step {
    padding: 0;
}

.qp-question {
    margin: 0 0 20px 0;
}

.qp-question h3 {
    margin: 0 !important;
    padding: 14px 16px !important;
    background: rgba(245, 158, 11, 0.12);
    border-radius: 10px;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 800;
    color: #000000;
}

/* ============ Respuesta tipo texto ============ */
.qp-text-answer {
    width: 100%;
    min-height: 120px;
    border: 2px solid #222222;
    border-radius: 12px;
    padding: 12px;
    font-size: 13px;
    font-family: inherit;
    color: #000000;
    resize: vertical;
    box-sizing: border-box;
}

/* ============ Opciones ============ */
.qp-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.qp-choice {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 2px solid #222222;
    border-radius: 12px;
    padding: 12px 14px;
    cursor: pointer;
    transition: background 0.15s ease !important;
}

.qp-choice:hover {
    background: rgba(245, 158, 11, 0.08);
}

.qp-choice input {
    width: 18px;
    height: 18px;
    accent-color: #000000;
    flex-shrink: 0;
}

.qp-choice span {
    font-size: 13px;
    color: #000000;
    line-height: 1.4;
}

/* ============ Navegación ============ */
.qp-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
}

.qp-navigation .qp-btn {
    flex: 1;
    text-align: center;
    border: 2px solid #000000;
    border-radius: 12px;
    padding: 14px 20px;
    cursor: pointer;
    font-weight: 700;
    font-size: 12px;
    transition: background 0.2s ease, color 0.2s ease !important;
}

.qp-navigation .qp-next {
    background: #000000;
    color: #ffffff;
}

.qp-navigation .qp-next:hover {
    background: #ffffff;
    color: #000000;
}

.qp-navigation .qp-back {
    background: #ffffff;
    color: #000000;
}

.qp-navigation .qp-back:hover {
    background: rgba(0, 0, 0, 0.06);
} 
/* Contenedor del wizard de preguntas */
 

 
  
 
   

/* Pantalla de resultado */
.qp-result-screen {
    background: #ffffff;
    border-radius: 20px;
    border: 2px solid #222222;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 24px 16px;
    text-align: center;
}

.qp-result-screen .qp-icon {
    font-size: 40px;
    margin-bottom: 12px;
}

.qp-result-screen h2 {
    font-size: 15px;
    font-weight: 800;
    color: #000000;
    margin: 0 0 12px 0;
}

.qp-result-screen p {
    font-size: 13px;
    color: #111111;
    margin: 0 0 20px 0;
}
/** FIN esto es para la card del quiz antes del boton comenzar quiz */