/* ---------- Planes · dudas ---------- */
.opr-pq-cabeza{position:relative !important; margin-bottom:clamp(24px,3vw,36px) !important}

/* La agente cuelga de la cabecera, no del contenedor: la cabecera no cambia de
   alto al abrir una pregunta, así que se queda quieta mientras el acordeón
   crece por debajo. Sombra suave, la de fondo claro del sistema. */
img.opr-pq-agente{position:absolute !important; right:24px !important; top:calc(100% + 26px) !important; width:172px !important; height:auto !important;
  pointer-events:none !important; user-select:none !important;
  filter:drop-shadow(0 22px 28px rgba(18,23,28,.18)) !important}
.opr-pq-lista{display:flex !important; flex-direction:column !important; gap:8px !important; max-width:72ch !important}

.opr-pq-item{border-radius:var(--radio) !important; background:var(--superficie) !important;
  box-shadow:inset 0 0 0 1px var(--borde), var(--sombra-s) !important; overflow:hidden !important}

.opr-pq-btn{display:flex !important; align-items:center !important; justify-content:space-between !important; gap:16px !important;
  width:100% !important; padding:18px 22px !important; text-align:left !important; background:transparent !important;
  font-family:inherit !important; font-size:1.0625rem !important; font-weight:700 !important; letter-spacing:-.014em !important;
  line-height:1.35 !important; color:var(--tinta) !important; transition:color .16s ease !important}
.opr-pq-btn:hover{color:var(--p700) !important}
.opr-pq-mas{flex:none !important; width:24px !important; height:24px !important; display:grid !important; place-items:center !important; color:var(--suave) !important}
.opr-pq-mas svg{width:16px !important; height:16px !important; transition:transform .22s ease !important}
.opr-pq-item.es-abierto .opr-pq-mas svg{transform:rotate(45deg) !important}

/* El desplegado anima la altura; el interior lleva su propio relleno para que
   el texto no salte al abrir. */
.opr-pq-caja{height:0 !important; overflow:hidden !important; transition:height .24s ease !important}
.opr-pq-txt{padding:0 22px 20px !important; font-size:.9375rem !important; line-height:1.6 !important; color:var(--suave) !important; text-wrap:pretty !important}
.opr-pq-txt a{font-weight:600 !important; color:var(--tinta) !important; text-decoration:underline !important; text-underline-offset:3px !important}

@media (prefers-reduced-motion:reduce){
  .opr-pq-caja{transition:none !important}
  .opr-pq-mas svg{transition:none !important}
}
/* Igual que en la portada: por debajo de 1080 px no hay hueco. Para ocultar
   una imagen hace falta `img.clase`, o `.opr img{display:block !important}` le gana. */
@media (max-width:1080px){ img.opr-pq-agente{display:none !important} }

@media (max-width:520px){
  .opr-pq-btn{padding:16px 18px !important; font-size:1rem !important}
  .opr-pq-txt{padding:0 18px 18px !important}
}