/* ---------- sección Temario · rueda de bloques ---------- */
.opr-t-rejilla{display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,.86fr) !important;
  gap:clamp(30px,4vw,66px) !important; align-items:center !important}

.opr-t-datos{display:flex !important; gap:clamp(20px,2.6vw,34px) !important; margin-top:26px !important;
  padding-top:22px !important; border-top:1px solid var(--borde) !important}
.opr-t-datos > div{display:flex !important; flex-direction:column !important; gap:1px !important}
.opr-t-datos b{font-size:1.75rem !important; font-weight:800 !important; line-height:1 !important; letter-spacing:-.035em !important}
.opr-t-datos b i{font-size:1rem !important; font-weight:700 !important; vertical-align:.32em !important; margin-left:1px !important}
.opr-t-datos span{font-size:.78125rem !important; font-weight:500 !important; color:var(--tenue) !important}

.opr-t-mandos{display:flex !important; align-items:center !important; gap:14px !important; margin-top:24px !important}
.opr-t-flechas{display:flex !important; gap:7px !important}
.opr-t-flechas button{width:42px !important; height:42px !important; border-radius:999px !important; display:grid !important; place-items:center !important;
  color:var(--suave) !important; box-shadow:inset 0 0 0 1.5px var(--borde) !important; transition:all .16s ease !important}
.opr-t-flechas button:hover{color:var(--tinta) !important; background:var(--p50) !important; box-shadow:inset 0 0 0 1.5px var(--borde2) !important}
.opr-t-flechas svg{width:17px !important; height:17px !important}
.opr-t-posicion{font-size:.84375rem !important; font-weight:700 !important; color:var(--tenue) !important}

.opr-t-puntos{display:flex !important; flex-wrap:wrap !important; gap:6px !important; margin-top:18px !important}
.opr-t-punto{width:9px !important; height:9px !important; border-radius:3px !important; background:var(--p200) !important; transition:all .2s ease !important}
.opr-t-punto:hover{background:var(--acento) !important; opacity:.6 !important}
.opr-t-punto[aria-selected="true"]{width:26px !important; background:var(--acento) !important}

/* --- la rueda --- */
.opr-t-rueda{position:relative !important; height:clamp(420px,56vh,510px) !important; perspective:1500px !important; overflow:hidden !important;
  touch-action:pan-y !important; cursor:grab !important; -webkit-user-select:none !important; user-select:none !important;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent) !important;
  mask-image:linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent) !important}
.opr-t-rueda:active{cursor:grabbing !important}

.opr-t-tarjeta{position:absolute !important; left:50% !important; top:50% !important; width:min(94%,430px) !important; height:100% !important;
  display:flex !important; flex-direction:column !important; padding:22px 24px !important;
  border-radius:var(--radio) !important; background:var(--superficie) !important;
  box-shadow:inset 0 0 0 1px var(--borde), 0 26px 54px -30px rgba(18,23,28,.4) !important;
  transform-origin:50% 50% !important;
  transform:translate(-50%,-50%)
            translateX(calc(var(--d) * 44%))
            translateZ(calc(var(--d) * var(--d) * -150px))
            rotateY(calc(var(--d) * -13deg))
            scale(calc(1 - 0.07 * (var(--d) * var(--d)))) !important;
  opacity:.34 !important; z-index:1 !important; cursor:pointer !important; overflow:hidden !important;
  transition:transform .48s cubic-bezier(.36,.66,.2,1), opacity .38s ease, box-shadow .38s ease !important}
.opr-t-tarjeta::before{content:'' !important; position:absolute !important; left:0 !important; top:0 !important; bottom:0 !important; width:4px !important; background:var(--acento) !important}
.opr-t-tarjeta.es-centro{opacity:1 !important; z-index:5 !important; cursor:default !important;
  box-shadow:inset 0 0 0 1px var(--borde), 0 34px 64px -28px rgba(18,23,28,.42) !important}
.opr-t-tarjeta.es-lejos{opacity:0 !important; pointer-events:none !important}

.opr-t-tarjeta-cab{display:flex !important; align-items:center !important; gap:13px !important; padding-bottom:14px !important;
  margin-bottom:13px !important; border-bottom:1px solid var(--borde) !important}
.opr-t-romano{flex:none !important; min-width:48px !important; height:48px !important; padding:0 9px !important; border-radius:13px !important;
  background:var(--acento) !important; color:#fff !important; display:grid !important; place-items:center !important;
  font-size:1.0625rem !important; font-weight:800 !important; letter-spacing:.01em !important}
.opr-t-tarjeta-cab b{display:block !important; font-size:1.1875rem !important; font-weight:800 !important; letter-spacing:-.024em !important;
  line-height:1.15 !important; text-wrap:balance !important}
.opr-t-tarjeta-cab i{display:block !important; margin-top:3px !important; font-size:.78125rem !important; font-weight:500 !important;
  color:var(--tenue) !important; font-variant-numeric:tabular-nums !important}

.opr-t-temas{display:flex !important; flex-direction:column !important; gap:1px !important; overflow:hidden !important; flex:1 !important}
.opr-t-temas li{display:flex !important; align-items:flex-start !important; gap:10px !important; padding:4px 0 !important}
.opr-t-temas b{flex:none !important; min-width:22px !important; font-size:.8125rem !important; font-weight:800 !important; color:var(--acento) !important; padding-top:.1em !important}
.opr-t-temas span{font-size:.90625rem !important; font-weight:500 !important; line-height:1.33 !important; letter-spacing:-.009em !important;
  color:var(--tinta) !important; text-wrap:pretty !important}

@media (max-width:960px){
  .opr-t-rueda{height:clamp(430px,66vw,490px) !important}
  .opr-t-tarjeta{width:min(92%,420px) !important}
}
/* en pantallas estrechas solo cabe la tarjeta central: las de al lado salen de escena */
@media (max-width:760px){
  .opr-t-rueda{
    -webkit-mask-image:none !important; mask-image:none !important;
    height:auto !important; min-height:474px !important; perspective:none !important}
  .opr-t-tarjeta{width:100% !important; height:auto !important; min-height:474px !important;
    transform:translate(-50%,-50%) translateX(calc(var(--d) * 108%)) !important; opacity:0 !important}
  .opr-t-tarjeta.es-centro{opacity:1 !important}
}
@media (max-width:560px){
  .opr-t-datos b{font-size:1.5rem !important}
  .opr-t-rueda,.opr-t-tarjeta{min-height:498px !important}
  .opr-t-tarjeta{padding:19px 17px !important}
  .opr-t-temas span{font-size:.875rem !important}
  .opr-t-romano{min-width:42px !important; height:42px !important; font-size:.9375rem !important}
  .opr-t-tarjeta-cab b{font-size:1.0625rem !important}
}

/* ---- móvil: primero el texto y las cifras, después la rueda ---- */
@media (max-width:960px){
  .opr-t-rejilla{display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:0 !important}
  .opr-temario .opr-t-texto{display:contents !important}
  .opr-temario .opr-rotulo{order:1 !important}
  .opr-temario .opr-h2{order:2 !important}
  .opr-temario .opr-entradilla{order:3 !important}
  .opr-t-datos{order:4 !important}
  .opr-t-rueda{order:5 !important; margin-top:32px !important}
  .opr-t-mandos{order:6 !important}
  .opr-t-puntos{order:7 !important}
}