/* ---------- Planes · cuál me conviene ---------- */
.opr-pe-cabeza{margin-bottom:clamp(30px,3.6vw,46px) !important; max-width:56ch !important}
.opr-pe .opr-h2{max-width:21ch !important}

.opr-pe-rejilla{display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,400px) !important;
  gap:clamp(20px,2.6vw,34px) !important; align-items:start !important}

/* --- las tres preguntas --- */
.opr-pe-preguntas{display:flex !important; flex-direction:column !important; gap:10px !important}
.opr-pe-paso{padding:22px 24px 24px !important; border-radius:var(--radio) !important; background:var(--superficie) !important;
  box-shadow:inset 0 0 0 1px var(--borde), var(--sombra-s) !important}
.opr-pe-cab{display:flex !important; align-items:center !important; gap:11px !important; margin-bottom:14px !important}
.opr-pe-n{flex:none !important; width:29px !important; height:24px !important; border-radius:7px !important; background:var(--p100) !important; color:var(--suave) !important;
  display:grid !important; place-items:center !important; font-size:.75rem !important; font-weight:800 !important}
.opr-pe-paso.es-hecho .opr-pe-n{background:var(--p950) !important; color:#fff !important}
.opr-pe-q{font-size:1.0625rem !important; font-weight:700 !important; letter-spacing:-.014em !important; line-height:1.3 !important}

.opr-pe-ops{display:flex !important; flex-wrap:wrap !important; gap:8px !important}
.opr-pe-op{display:inline-flex !important; align-items:center !important; min-height:40px !important; padding:10px 17px !important;
  border-radius:999px !important; background:var(--superficie) !important; color:var(--suave) !important;
  box-shadow:inset 0 0 0 1px var(--borde2) !important;
  font-size:.9375rem !important; font-weight:600 !important; letter-spacing:-.01em !important; line-height:1.2 !important; text-align:left !important;
  transition:background .16s ease, color .16s ease, box-shadow .16s ease !important}
.opr-pe-op:hover{color:var(--tinta) !important; background:var(--p100) !important; box-shadow:inset 0 0 0 1px var(--p500) !important}
.opr-pe-op[aria-pressed="true"]{background:var(--p950) !important; color:#fff !important; box-shadow:inset 0 0 0 1px var(--p950) !important}

/* --- panel de la derecha --- */
.opr-pe-panel{position:sticky !important; top:96px !important; padding:26px 24px 24px !important; border-radius:var(--radio) !important;
  background:var(--p950) !important; color:var(--p100) !important; box-shadow:var(--sombra) !important}
.opr-pe-marcador{display:flex !important; align-items:baseline !important; gap:7px !important}
.opr-pe-marcador b{font-size:1.75rem !important; font-weight:800 !important; letter-spacing:-.03em !important; color:#fff !important}
.opr-pe-marcador span{font-size:.875rem !important; font-weight:600 !important; color:var(--p400) !important}
.opr-pe-espera-txt{margin-top:12px !important; font-size:.9375rem !important; line-height:1.55 !important; color:var(--p400) !important; text-wrap:pretty !important}

.opr-pe-resumen{display:flex !important; flex-wrap:wrap !important; gap:6px !important; margin-bottom:16px !important}
.opr-pe-chip{padding:5px 11px !important; border-radius:999px !important; font-size:.75rem !important; font-weight:600 !important;
  color:var(--p300) !important; box-shadow:inset 0 0 0 1px var(--p800) !important}
.opr-pe-rot{display:block !important; font-size:.8125rem !important; font-weight:600 !important; color:var(--p400) !important}
.opr-pe-nombre{margin-top:5px !important; font-size:1.625rem !important; font-weight:800 !important; letter-spacing:-.03em !important; line-height:1.1 !important; color:#fff !important}
.opr-pe-precio{display:flex !important; align-items:baseline !important; gap:5px !important; margin-top:14px !important; padding-top:14px !important;
  border-top:1px solid var(--p800) !important}
.opr-pe-precio b{font-size:2rem !important; font-weight:800 !important; line-height:1 !important; letter-spacing:-.04em !important; color:#fff !important}
.opr-pe-precio span{font-size:.78125rem !important; font-weight:600 !important; color:var(--p500) !important}
.opr-pe-porque{margin-top:14px !important; font-size:.9375rem !important; line-height:1.55 !important; color:var(--p300) !important; text-wrap:pretty !important}
.opr-pe-alt{margin-top:12px !important; padding-top:12px !important; border-top:1px solid var(--p800) !important;
  font-size:.8125rem !important; line-height:1.5 !important; color:var(--p500) !important; text-wrap:pretty !important}
.opr-pe-acciones{display:flex !important; flex-direction:column !important; gap:8px !important; margin-top:18px !important}
.opr-pe-acciones .opr-btn{width:100% !important; padding:13px 18px !important; font-size:.9375rem !important}
/* El panel es oscuro dentro de una sección clara, así que las reglas de
   .es-noche del núcleo no le llegan: hay que invertir los botones aquí. */
.opr-pe-panel .opr-btn-1{background:var(--p50) !important; color:var(--p950) !important}
.opr-pe-panel .opr-btn-1:hover{background:#fff !important}
.opr-pe-panel .opr-btn-2{color:var(--p100) !important; box-shadow:inset 0 0 0 1.5px var(--p700) !important}
.opr-pe-panel .opr-btn-2:hover{background:var(--p900) !important; box-shadow:inset 0 0 0 1.5px var(--p600) !important}
.opr-pe-otra{align-self:center !important; padding:8px 4px !important; font-size:.84375rem !important; font-weight:600 !important; color:var(--p400) !important}
.opr-pe-otra:hover{color:#fff !important}

@media (max-width:900px){
  .opr-pe-rejilla{grid-template-columns:1fr !important}
  .opr-pe-panel{position:static !important}
  .opr-pe-cabeza{max-width:none !important}
  .opr-pe .opr-h2{max-width:none !important}
}
@media (max-width:520px){
  .opr-pe-paso{padding:20px 18px 22px !important}
  .opr-pe-ops{flex-direction:column !important; align-items:stretch !important}
  .opr-pe-op{justify-content:flex-start !important}
}