/* ---------- Entrevista · la quinta prueba ---------- */

/* --- la cabecera, con el agente a la derecha ---
   A la altura del titular y solo en pantallas anchas. Por debajo de 900 px no
   sale: apilado se comería media pantalla antes de llegar al carrusel, que es
   lo que se viene a ver. El guion tampoco lo descarga mientras la ventana sea
   estrecha; el corte es el mismo aquí y allí. */
.opr-en .opr-en-p-alto{
  display:grid !important; grid-template-columns:minmax(0,1fr) auto !important;
  gap:clamp(20px,3vw,44px) !important; align-items:center !important;
  margin-bottom:clamp(34px,4vw,52px) !important;
}
.opr-en .opr-en-p-cabeza{margin-bottom:0 !important}
.opr-en .opr-en-p-figura{display:flex !important; justify-content:flex-end !important; min-height:1px !important}
.opr-en .opr-en-p-figura img{
  display:block !important; width:auto !important; height:clamp(250px,26vw,340px) !important;
  filter:drop-shadow(0 18px 34px rgba(18,23,28,.22)) !important;
}
@media (max-width:900px){
.opr-en .opr-en-p-alto{grid-template-columns:1fr !important}
.opr-en .opr-en-p-figura{display:none !important}
}


/* --- el carrusel de las cinco competencias ---
   La sección va en fondo claro y no en blanco, y no es un capricho: las
   tarjetas son blancas y las de fuera van desenfocadas. Una tarjeta blanca
   desenfocada sobre fondo blanco DESAPARECE — tropiezo n.º 24 del documento
   03, que le pasó al carrusel de Próximamente. */
.opr-en .opr-en-p-carrusel{position:relative !important; margin-top:8px !important}
.opr-en .opr-en-p-escena{
  position:relative !important; overflow:hidden !important;
  touch-action:pan-y !important; cursor:grab !important; user-select:none !important;
}
.opr-en .opr-en-p-escena.es-agarrada{cursor:grabbing !important}
.opr-en .opr-en-p-comp{
  position:absolute !important; top:0 !important; left:50% !important;
  width:min(360px,74vw) !important; padding:28px 26px 26px !important;
  transform:translate(-50%,0) !important;
  transition:transform .52s cubic-bezier(.32,.72,.16,1),
             opacity .42s ease, filter .42s ease !important;
  will-change:transform !important;
}
.opr-en .opr-en-p-num{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  width:30px !important; height:30px !important; margin-bottom:14px !important;
  border-radius:999px !important; background:var(--p100) !important;
  font-size:.875rem !important; font-weight:800 !important; color:var(--suave) !important;
}
.opr-en .opr-en-p-comp h3{min-height:2.7em !important}
.opr-en .opr-en-p-comp p{margin-top:9px !important; font-size:.9375rem !important; color:var(--suave) !important; overflow-wrap:anywhere !important}


/* Las flechas son hermanas de la escena, no hijas: un botón dentro de la zona
   de arrastre no responde (tropiezo n.º 23). */
.opr-en .opr-en-p-flecha{
  position:absolute !important; top:50% !important; margin-top:-22px !important;
  width:44px !important; height:44px !important; border-radius:999px !important; z-index:6 !important;
  display:grid !important; place-items:center !important;
  background:var(--superficie) !important; color:var(--tinta) !important;
  box-shadow:inset 0 0 0 1px var(--borde), var(--sombra-s) !important;
  transition:box-shadow .16s ease, transform .12s ease !important;
}
.opr-en .opr-en-p-flecha:hover{box-shadow:inset 0 0 0 1px var(--borde2), var(--sombra) !important}
.opr-en .opr-en-p-flecha:active{transform:translateY(1px) !important}
.opr-en .opr-en-p-flecha svg{width:19px !important; height:19px !important}
.opr-en .opr-en-p-flecha.es-izq{left:0 !important}
.opr-en .opr-en-p-flecha.es-der{right:0 !important}


/* Los puntos son botones, así que necesitan 38 px de zona pulsable aunque el
   punto que se ve mida ocho. La zona va transparente. */
.opr-en .opr-en-p-puntos{display:flex !important; justify-content:center !important; gap:2px !important; margin-top:18px !important}
.opr-en .opr-en-p-punto{
  width:38px !important; height:38px !important; display:grid !important; place-items:center !important;
  background:transparent !important; border-radius:999px !important;
}
.opr-en .opr-en-p-punto i{
  display:block !important; width:8px !important; height:8px !important; border-radius:999px !important;
  background:var(--p300) !important; transition:background .16s ease, transform .16s ease !important;
}
.opr-en .opr-en-p-punto:hover i{background:var(--p500) !important}
.opr-en .opr-en-p-punto[aria-pressed="true"] i{background:var(--tinta) !important; transform:scale(1.25) !important}


/* --- el baremo --- */
.opr-en .opr-en-p-baremo{
  display:grid !important; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr) !important;
  gap:clamp(26px,3.4vw,52px) !important; align-items:start !important;
  margin-top:clamp(46px,5vw,76px) !important; padding-top:clamp(38px,4vw,58px) !important;
  border-top:1px solid var(--borde) !important;
}
.opr-en .opr-en-p-honesto{
  margin-top:22px !important; padding:16px 18px !important;
  background:var(--p50) !important; border-radius:var(--radio-s) !important;
  box-shadow:inset 0 0 0 1px var(--borde) !important;
  color:var(--suave) !important; line-height:1.55 !important;
}
.opr-en .opr-en-p-honesto b{color:var(--tinta) !important}
.opr-en .opr-en-p-niveles{list-style:none !important; display:grid !important; gap:8px !important}
.opr-en .opr-en-p-niveles li{
  display:grid !important; grid-template-columns:auto minmax(0,1fr) auto !important;
  gap:6px 16px !important; align-items:baseline !important;
  padding:15px 18px !important; border-radius:var(--radio-s) !important;
  background:var(--superficie) !important; box-shadow:inset 0 0 0 1px var(--borde) !important;
}
.opr-en .opr-en-p-nivel{
  grid-row:span 2 !important; align-self:center !important;
  font-size:.75rem !important; font-weight:700 !important; color:var(--tenue) !important; white-space:nowrap !important;
}
.opr-en .opr-en-p-niveles b{min-width:0 !important}
.opr-en .opr-en-p-pts{font-size:1.25rem !important; font-weight:800 !important; letter-spacing:-.03em !important; white-space:nowrap !important}
.opr-en .opr-en-p-niveles p{
  grid-column:2 / span 2 !important; font-size:.875rem !important; color:var(--suave) !important; overflow-wrap:anywhere !important;
}
.opr-en .opr-en-p-niveles li.es-corte{
  background:var(--av100) !important; box-shadow:inset 0 0 0 1.5px var(--av500) !important;
}
.opr-en .opr-en-p-niveles li.es-corte b, .opr-en .opr-en-p-niveles li.es-corte .opr-en-p-pts{color:var(--av900) !important}
.opr-en .opr-en-p-niveles li.es-corte .opr-en-p-nivel, .opr-en .opr-en-p-niveles li.es-corte p{color:var(--av900) !important}
.opr-en .opr-en-p-sello{
  grid-column:2 / span 2 !important; margin-top:4px !important;
  font-size:.75rem !important; font-weight:700 !important; color:var(--av600) !important;
}


/* --- los cuatro tipos de pregunta --- */
.opr-en .opr-en-p-tipos{margin-top:clamp(46px,5vw,76px) !important; padding-top:clamp(38px,4vw,58px) !important; border-top:1px solid var(--borde) !important}
.opr-en .opr-en-p-tipos-cabeza{margin-bottom:22px !important}
.opr-en .opr-en-p-seg{flex-wrap:wrap !important; max-width:100% !important}
.opr-en .opr-en-p-panel{padding:clamp(24px,2.8vw,34px) !important; min-height:236px !important}
.opr-en .opr-en-p-panel-r{margin-top:7px !important; font-size:.9375rem !important; color:var(--suave) !important}

/* `grid-auto-rows:1fr` iguala todas las filas a la más alta: los cajones miden
   lo mismo aunque una pregunta ocupe una línea y otra tres. */
.opr-en .opr-en-p-preg{list-style:none !important; display:grid !important; grid-auto-rows:1fr !important; gap:9px !important; margin-top:20px !important}
.opr-en .opr-en-p-preg li{
  display:flex !important; align-items:center !important;
  padding:13px 17px !important; border-radius:var(--radio-s) !important;
  background:var(--p50) !important; box-shadow:inset 0 0 0 1px var(--borde) !important;
  font-size:.9375rem !important; font-weight:500 !important; overflow-wrap:anywhere !important;
}
.opr-en .opr-en-p-panel-nota{margin-top:20px !important; line-height:1.55 !important}
.opr-en .opr-en-p-fuente{margin-top:clamp(34px,3.4vw,46px) !important; padding-top:20px !important; border-top:1px solid var(--borde) !important}
@media (max-width:900px){
.opr-en .opr-en-p-baremo{grid-template-columns:1fr !important}
}
@media (max-width:640px){
.opr-en .opr-en-p-comp{width:min(320px,80vw) !important; padding:24px 20px 22px !important}
.opr-en .opr-en-p-flecha{width:40px !important; height:40px !important; margin-top:-20px !important}
}
@media (max-width:560px){
.opr-en .opr-en-p-niveles li{grid-template-columns:minmax(0,1fr) auto !important}
.opr-en .opr-en-p-nivel{grid-row:auto !important; grid-column:1 / span 2 !important}
.opr-en .opr-en-p-niveles p{grid-column:1 / span 2 !important}
.opr-en .opr-en-p-sello{grid-column:1 / span 2 !important}
.opr-en .opr-en-p-seg button{padding:9px 13px !important; font-size:.875rem !important}
}