/* ---------- sección Pruébalo ---------- */
.opr-px-p-rejilla{display:grid !important; grid-template-columns:minmax(0,.84fr) minmax(0,1fr) !important; gap:clamp(36px,5vw,70px) !important; align-items:center !important}
@media (max-width:920px){ .opr-px-p-rejilla{grid-template-columns:1fr !important; gap:34px !important} }

.opr-px-p-lista{margin-top:30px !important; display:flex !important; flex-direction:column !important; gap:15px !important}
.opr-px-p-lista li{display:flex !important; align-items:flex-start !important; gap:12px !important; font-size:.9375rem !important; color:var(--suave) !important}
.opr-px-p-lista b{font-weight:700 !important; color:var(--tinta) !important}
.opr-px-p-tic{flex:none !important; width:20px !important; height:20px !important; margin-top:2px !important; border-radius:999px !important;
  background:#EBEFF4 !important; color:#475362 !important; display:grid !important; place-items:center !important}
.opr-px-p-tic svg{width:11px !important; height:11px !important}

/* la tarjeta mantiene la misma altura en todos los estados */
.opr-px-p-tarjeta{overflow:hidden !important; box-shadow:var(--sombra) !important; min-height:540px !important;
  display:flex !important; flex-direction:column !important}
.opr-px-p-test{display:flex !important; flex-direction:column !important; flex:1 !important}

/* --- ajustes previos --- */
.opr-px-p-ajuste{flex:1 !important; display:flex !important; flex-direction:column !important; justify-content:center !important;
  padding:clamp(26px,3vw,34px) !important; gap:0 !important}
.opr-px-p-ajuste-etq{display:block !important; font-size:.78125rem !important; font-weight:600 !important; color:var(--tenue) !important}
.opr-px-p-ajuste-tit{margin-top:7px !important; font-size:1.375rem !important; font-weight:800 !important; letter-spacing:-.026em !important; line-height:1.14 !important}
.opr-px-p-ajuste-sub{margin-top:7px !important; margin-bottom:18px !important; font-size:.9375rem !important; color:var(--suave) !important}
.opr-px-p-modos{margin-bottom:16px !important}
.opr-px-p-modos{display:flex !important; flex-direction:column !important; gap:9px !important}
.opr-px-p-modos button{display:block !important; width:100% !important; text-align:left !important; padding:15px 17px !important; border-radius:var(--radio-s) !important;
  box-shadow:inset 0 0 0 1.5px var(--borde) !important; transition:box-shadow .15s ease, background .15s ease !important}
.opr-px-p-modos b{display:block !important; font-size:.96875rem !important; font-weight:700 !important; letter-spacing:-.013em !important; color:var(--suave) !important}
.opr-px-p-modos span{display:block !important; margin-top:3px !important; font-size:.84375rem !important; color:var(--tenue) !important; line-height:1.45 !important}
.opr-px-p-modos button:hover{background:var(--p50) !important; box-shadow:inset 0 0 0 1.5px var(--borde2) !important}
.opr-px-p-modos button[aria-checked="true"]{box-shadow:inset 0 0 0 2px var(--p950) !important; background:var(--p50) !important}
.opr-px-p-modos button[aria-checked="true"] b{color:var(--tinta) !important}
.opr-px-p-empezar{width:100% !important; padding:14px 20px !important}

/* --- cabecera y pie --- */
.opr-px-p-cabecera{display:flex !important; align-items:flex-start !important; justify-content:space-between !important; gap:14px !important;
  padding:15px 22px !important; border-bottom:1px solid var(--borde) !important; background:#FBFCFD !important}
.opr-px-p-bloque{display:inline-flex !important; align-items:flex-start !important; gap:8px !important;
  font-size:.84rem !important; font-weight:600 !important; color:var(--suave) !important; line-height:1.35 !important}
.opr-px-p-bloque i{flex:none !important; width:6px !important; height:6px !important; margin-top:.42em !important; border-radius:2px !important; background:var(--borde2) !important; display:block !important}
.opr-px-p-contador{flex:none !important; white-space:nowrap !important; font-size:.84rem !important; font-weight:700 !important; color:var(--tinta) !important; line-height:1.35 !important}

.opr-px-p-cuerpo{padding:22px 22px 18px !important; display:flex !important; flex-direction:column !important; flex:1 !important}
.opr-px-p-pregunta{margin-bottom:18px !important; font-size:1.09375rem !important; font-weight:600 !important; line-height:1.42 !important;
  letter-spacing:-.012em !important; text-wrap:pretty !important; min-height:3.1em !important}

/* la escena reserva su altura: opciones y explicación se turnan dentro */
.opr-px-p-escena{position:relative !important; flex:1 !important; min-height:262px !important}
.opr-px-p-opciones{display:flex !important; flex-direction:column !important; gap:9px !important}
.opr-px-p-opcion{display:flex !important; align-items:flex-start !important; gap:12px !important; width:100% !important; text-align:left !important;
  padding:13px 15px !important; border-radius:var(--radio-s) !important; background:var(--superficie) !important;
  box-shadow:inset 0 0 0 1.5px var(--borde) !important; font-size:.96875rem !important; line-height:1.45 !important;
  transition:box-shadow .14s ease, background .14s ease, opacity .2s ease, transform .1s ease !important}
.opr-px-p-opcion:hover:not(:disabled){box-shadow:inset 0 0 0 1.5px var(--borde2) !important; background:#FAFBFD !important}
.opr-px-p-opcion:active:not(:disabled){transform:translateY(1px) !important}
.opr-px-p-opcion:disabled{cursor:default !important}
.opr-px-p-letra{flex:none !important; width:22px !important; height:22px !important; margin-top:1px !important; border-radius:6px !important;
  background:var(--p100) !important; color:var(--suave) !important; font-size:.75rem !important; font-weight:700 !important;
  display:grid !important; place-items:center !important; transition:background .14s, color .14s !important}
.opr-px-p-opcion.es-ok{background:var(--ok100) !important; box-shadow:inset 0 0 0 1.5px var(--ok600) !important; color:var(--ok900) !important}
.opr-px-p-opcion.es-ok .opr-px-p-letra{background:var(--ok600) !important; color:#fff !important}
.opr-px-p-opcion.es-no{background:var(--no100) !important; box-shadow:inset 0 0 0 1.5px var(--no600) !important; color:var(--no900) !important}
.opr-px-p-opcion.es-no .opr-px-p-letra{background:var(--no600) !important; color:#fff !important}
.opr-px-p-opcion.es-marcada{box-shadow:inset 0 0 0 2px var(--p950) !important}
.opr-px-p-opcion.es-marcada .opr-px-p-letra{background:var(--p950) !important; color:#fff !important}
.opr-px-p-opcion.es-apagada{opacity:.45 !important}
/* las opciones que ya no cuentan se retiran para dejar sitio a la explicación */
.opr-px-p-opcion.es-fuera{display:none !important}

.opr-px-p-expl{max-height:0 !important; overflow:hidden !important; opacity:0 !important; margin-top:0 !important;
  transition:max-height .3s ease, opacity .24s ease .06s, margin-top .3s ease !important}
.opr-px-p-expl.visible{max-height:230px !important; opacity:1 !important; margin-top:11px !important}
.opr-px-p-expl > div{padding:14px 16px !important; border-radius:var(--radio-s) !important; border-left:3px solid var(--borde2) !important;
  font-size:.90625rem !important; line-height:1.52 !important}
.opr-px-p-expl.es-ok > div{background:var(--ok100) !important; border-left-color:var(--ok600) !important; color:var(--ok900) !important}
.opr-px-p-expl.es-no > div{background:var(--no100) !important; border-left-color:var(--no600) !important; color:var(--no900) !important}
.opr-px-p-veredicto{display:block !important; font-weight:700 !important; margin-bottom:4px !important}
.opr-px-p-art{font-weight:700 !important}
.opr-px-p-truco{display:block !important; margin-top:8px !important; font-size:.84375rem !important; opacity:.9 !important}
.opr-px-p-truco b{font-weight:700 !important}

.opr-px-p-pie{display:flex !important; align-items:center !important; justify-content:space-between !important; gap:16px !important;
  padding:15px 22px !important; border-top:1px solid var(--borde) !important; background:#FBFCFD !important}
.opr-px-p-siguiente{padding:12px 20px !important; font-size:.9375rem !important}
.opr-px-p-puntos{display:flex !important; gap:6px !important; align-items:center !important}
.opr-px-p-punto{width:8px !important; height:8px !important; border-radius:999px !important; background:var(--p300) !important; transition:all .24s ease !important}
.opr-px-p-punto.activo{width:24px !important; background:var(--p950) !important}
.opr-px-p-punto.hecha{background:var(--p600) !important}
.opr-px-p-punto.ok{background:var(--ok600) !important}
.opr-px-p-punto.no{background:var(--no600) !important}

/* --- resultado --- */
.opr-px-p-final{flex:1 !important; padding:26px 22px 22px !important; display:flex !important; flex-direction:column !important;
  align-items:center !important; text-align:center !important; gap:11px !important; overflow-y:auto !important}
.opr-px-p-marcador{display:flex !important; align-items:baseline !important; gap:7px !important}
.opr-px-p-marcador b{font-size:2.9rem !important; font-weight:800 !important; line-height:1 !important; letter-spacing:-.04em !important}
.opr-px-p-marcador span{font-size:.9375rem !important; font-weight:600 !important; color:var(--tenue) !important}
.opr-px-p-final-txt{max-width:40ch !important; font-size:.9375rem !important; color:var(--suave) !important; text-wrap:pretty !important}

.opr-px-p-repaso{width:100% !important; display:flex !important; flex-direction:column !important; gap:6px !important; margin-top:4px !important; text-align:left !important}
.opr-px-p-item{border-radius:var(--radio-s) !important; background:var(--p50) !important; box-shadow:inset 0 0 0 1px var(--borde) !important}
.opr-px-p-item summary{display:flex !important; align-items:flex-start !important; gap:10px !important; padding:11px 13px !important; cursor:pointer !important;
  font-size:.84375rem !important; line-height:1.45 !important; color:var(--suave) !important}
.opr-px-p-item summary::-webkit-details-marker{display:none !important}
.opr-px-p-item summary i{flex:none !important; width:7px !important; height:7px !important; margin-top:.45em !important; border-radius:2px !important; background:var(--no600) !important; display:block !important}
.opr-px-p-item.es-ok summary i{background:var(--ok600) !important}
.opr-px-p-item-cuerpo{padding:0 13px 13px 30px !important; display:flex !important; flex-direction:column !important; gap:6px !important;
  font-size:.84375rem !important; line-height:1.5 !important; color:var(--suave) !important}
.opr-px-p-item-cuerpo b{color:var(--tinta) !important; font-weight:700 !important}

.opr-px-p-final-btns{display:flex !important; flex-wrap:wrap !important; gap:9px !important; justify-content:center !important; margin-top:6px !important; width:100% !important}
.opr-px-p-final-btns .opr-btn{flex:1 1 auto !important; padding:12px 18px !important; font-size:.90625rem !important}
.opr-px-p-mas{font-size:.84375rem !important; font-weight:600 !important; color:var(--suave) !important; margin-top:2px !important}
.opr-px-p-mas:hover{color:var(--tinta) !important}

@media (max-width:560px){
  .opr-px-p-tarjeta{min-height:0 !important}
  .opr-px-p-escena{min-height:0 !important}
  .opr-px-p-pregunta{min-height:0 !important; font-size:1.03125rem !important}
  .opr-px-p-cabecera{padding:13px 16px !important}
  .opr-px-p-bloque{font-size:.78rem !important}
  .opr-px-p-cuerpo{padding:19px 16px 16px !important}
  .opr-px-p-pie{padding:14px 16px !important}
  .opr-px-p-final-btns .opr-btn{flex:1 1 100% !important}
}