/* ---------- Temario · portada ----------
   OJO: esta sección NO se blinda (ver SIN_BLINDAR en build.py). La imagen se
   coloca y se escala con estilos en línea desde el guion, y una hoja con
   !important los anularía. Es el fallo que rompió el hero de la home dos veces. */
.opr-ix-hero{position:relative !important; overflow:hidden !important}
.opr-ix-hero::before{content:'' !important; position:absolute !important; inset:-40% -20% auto 40% !important; height:150% !important; pointer-events:none !important;
  background:radial-gradient(ellipse at center, rgba(96,111,128,.30), transparent 62%) !important}

.opr-ix-h-rejilla{position:relative !important; display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,.78fr) !important;
  gap:clamp(24px,3vw,52px) !important; align-items:center !important}

.opr-ix-h-ent{opacity:0 !important; transform:translateY(14px) !important;
  transition:opacity .5s ease, transform .55s cubic-bezier(.32,.72,.16,1) !important;
  transition-delay:calc(var(--r) * 90ms) !important}
.opr-ix-hero.es-dentro .opr-ix-h-ent{opacity:1 !important; transform:none !important}

.opr-ix-h-titulo{color:#fff !important; text-wrap:balance !important; max-width:14ch !important}
.opr-ix-h-titulo em{display:block !important; color:var(--p400) !important; font-weight:800 !important}
.opr-ix-hero .opr-entradilla{max-width:50ch !important}

.opr-ix-h-ctas{display:flex !important; flex-wrap:wrap !important; gap:11px !important; margin-top:30px !important}
.opr-ix-h-ctas .opr-btn{padding:14px 23px !important; font-size:.9375rem !important}

.opr-ix-h-datos{display:flex !important; flex-wrap:wrap !important; gap:clamp(20px,3vw,42px) !important; margin-top:36px !important;
  padding-top:25px !important; border-top:1px solid var(--p800) !important}
.opr-ix-h-datos > div{display:flex !important; flex-direction:column !important; gap:3px !important}
.opr-ix-h-datos b{font-size:1.95rem !important; font-weight:800 !important; line-height:1 !important; letter-spacing:-.04em !important; color:#fff !important}
.opr-ix-h-datos span{font-size:.78125rem !important; font-weight:500 !important; color:var(--p500) !important; max-width:19ch !important; text-wrap:pretty !important}

/* la figura: solo el hueco. El tamaño real lo pone el guion en línea. */
.opr-ix-h-figura{position:relative !important; display:flex !important; justify-content:center !important; align-items:flex-end !important; min-height:1px !important}
.opr-ix-hero img.opr-ix-agentes{display:block !important; height:auto !important; max-width:100% !important;
  opacity:0 !important; transform:translateY(22px) scale(.97) !important;
  transition:opacity .7s ease, transform .8s cubic-bezier(.32,.72,.16,1) !important; transition-delay:.24s !important;
  filter:drop-shadow(0 26px 46px rgba(0,0,0,.5)) !important}
.opr-ix-hero.es-dentro img.opr-ix-agentes{opacity:1 !important; transform:none !important}

@media (max-width:900px){
  .opr-ix-h-rejilla{grid-template-columns:1fr !important; gap:0 !important}
  .opr-ix-h-titulo{max-width:none !important}
  /* En móvil el guion ni siquiera inserta la imagen. Esto es el cinturón por si
     alguna vez llega igualmente. OJO con la especificidad: el núcleo trae
     `.opr img{display:block !important}` con (0,1,1), así que hace falta al menos eso;
     `.opr-ix-agentes{display:none !important}` a secas NO la ocultaría. */
  .opr-ix-hero img.opr-ix-agentes{display:none !important}
  .opr-ix-h-figura{display:none !important}
}
@media (max-width:560px){
  .opr-ix-h-datos{gap:18px 24px !important; margin-top:30px !important}
  .opr-ix-h-datos b{font-size:1.65rem !important}
  .opr-ix-h-ctas .opr-btn{flex:1 1 100% !important}
}