.opr-hero{
  --opr-fondo:#12171C; --opr-halo:#2E3B49; --opr-acento:#EBEFF4;
  position:relative; width:100%; isolation:isolate; overflow:hidden;
  min-height:min(100svh,880px); height:100svh;
  background:var(--opr-fondo); color:#EBEFF4;
  font-family:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  transition:background-color 700ms cubic-bezier(.4,0,.2,1);
}

/* --- BLINDAJE: neutraliza lo que el tema de WordPress pueda inyectar ---
   Va antes que todo lo demás; las reglas de abajo lo sobrescriben. ------- */
.opr-hero{box-sizing:border-box; padding:0; margin:0; border:0; text-align:left; letter-spacing:normal}
.opr-hero *, .opr-hero *::before, .opr-hero *::after{
  box-sizing:border-box; margin:0; padding:0; border:0; background:none;
  text-transform:none; text-decoration:none; text-shadow:none; box-shadow:none;
  float:none; list-style:none; font-style:normal;
  letter-spacing:inherit; line-height:inherit; font-family:inherit;
}
.opr-hero img{max-width:none; height:auto; border-radius:0}
.opr-hero button{font:inherit; cursor:pointer}
@media (max-width:1000px){ .opr-hero{height:auto; min-height:0} }

.opr-hero .opr-halo{position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.9;
  background:radial-gradient(ellipse 105% 78% at 50% 104%, var(--opr-halo) 0%, transparent 66%);
  transition:background 700ms cubic-bezier(.4,0,.2,1)}
.opr-hero .opr-vineta{position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.42) 0%, transparent 38%)}
.opr-hero .opr-velo{position:absolute; inset:0; z-index:30; pointer-events:none;
  background:linear-gradient(100deg, rgba(0,0,0,.74) 0%, rgba(0,0,0,.52) 20%, rgba(0,0,0,.14) 38%, transparent 52%)}
.opr-hero .opr-grano{position:absolute; inset:0; z-index:55; pointer-events:none; opacity:.42;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.085'/%3E%3C/svg%3E");
  background-size:200px 200px}
@media (max-width:1000px){ .opr-hero .opr-velo, .opr-hero .opr-vineta{display:none} }

/* ---- barra superior ---- */
@media (max-width:880px){
}

/* ---- palabra grande de fondo ---- */
.opr-hero .opr-palabra{position:absolute; left:0; right:0; z-index:3; top:clamp(80px,15%,158px);
  display:flex; justify-content:center; pointer-events:none; user-select:none}
.opr-hero .opr-palabra b{font-weight:800; line-height:.82; letter-spacing:-.035em; white-space:nowrap;
  color:#FFF; opacity:.085; text-transform:uppercase; font-size:100px}

/* ---- agentes ---- */
.opr-hero .opr-escena{position:absolute; inset:0; z-index:8; touch-action:pan-y; user-select:none; cursor:grab}
.opr-hero .opr-escena:active{cursor:grabbing}
.opr-hero .opr-grupo{position:absolute; bottom:0; left:50%; height:60%;
  display:flex; align-items:flex-end; justify-content:center;
  transform:translateX(-50%); transform-origin:bottom center;
  transition:left 780ms cubic-bezier(.4,0,.2,1), height 780ms cubic-bezier(.4,0,.2,1),
             bottom 780ms cubic-bezier(.4,0,.2,1), opacity 640ms ease, filter 640ms ease;
  will-change:left,height,opacity,filter}
.opr-hero .opr-grupo.opr-lejos{cursor:pointer}
.opr-hero .opr-grupo img{height:100%; width:auto; display:block; margin-inline:-3%;
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.55))}
.opr-hero .opr-grupo img.opr-atras{height:95%}

/* ---- texto ---- */
.opr-hero .opr-texto{position:absolute; z-index:60; left:clamp(18px,4vw,54px); bottom:clamp(24px,6vh,64px);
  max-width:min(470px,40vw)}
.opr-hero .opr-rotulo{display:block; margin-bottom:15px; font-size:.94rem; font-weight:600;
  letter-spacing:-.005em; color:var(--opr-acento); transition:color 700ms ease}
.opr-hero .opr-titulo{margin-bottom:14px; font-weight:800; letter-spacing:-.035em; line-height:.98;
  font-size:clamp(1.9rem,3.5vw,3.05rem); text-wrap:balance; color:#EBEFF4}
.opr-hero .opr-titulo em{font-style:normal; display:block}
.opr-hero .opr-desc{margin-bottom:22px; font-size:clamp(.94rem,1.05vw,1.02rem); line-height:1.6;
  color:rgba(235,239,244,.8); max-width:44ch}
.opr-hero .opr-ctas{display:flex; flex-wrap:wrap; gap:11px; align-items:center}
.opr-hero .opr-boton{display:inline-flex; align-items:center; justify-content:center; padding:12px 22px;
  border-radius:10px; font-weight:700; font-size:.94rem; border:1px solid transparent; cursor:pointer;
  transition:transform 140ms, background-color 160ms, border-color 160ms}
.opr-hero .opr-boton-1{background:#EBEFF4; color:#12171C}
.opr-hero .opr-boton-1:hover{background:#FFF; transform:translateY(-1px)}
.opr-hero .opr-boton-2{background:transparent; color:#EBEFF4; border-color:rgba(235,239,244,.3)}
.opr-hero .opr-boton-2:hover{border-color:rgba(235,239,244,.62)}
.opr-hero .opr-datos{margin-top:24px; display:flex; gap:26px; align-items:flex-start}
.opr-hero .opr-datos > div{display:flex; flex-direction:column; gap:1px}
.opr-hero .opr-datos b{font-size:1.22rem; font-weight:700; letter-spacing:-.03em; line-height:1;
  font-variant-numeric:tabular-nums; color:rgba(235,239,244,.92)}
.opr-hero .opr-datos span{font-size:.8rem; font-weight:400; color:rgba(235,239,244,.5)}

/* ---- controles ---- */
.opr-hero .opr-controles{position:absolute; z-index:62; left:67%; transform:translateX(-50%); bottom:10%;
  display:flex; align-items:center; gap:12px}
.opr-hero .opr-seg{display:flex; gap:6px; padding:5px; border-radius:12px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.opr-hero .opr-seg button{font-size:.81rem; font-weight:600; padding:9px 15px; border-radius:8px;
  border:0; cursor:pointer; background:transparent; color:rgba(235,239,244,.68);
  transition:background-color 200ms, color 200ms; white-space:nowrap}
.opr-hero .opr-seg button:hover{color:#EBEFF4}
.opr-hero .opr-seg button[aria-pressed="true"]{background:#EBEFF4; color:#12171C}
.opr-hero .opr-flechas{display:flex; gap:9px}
.opr-hero .opr-flechas button{width:42px; height:42px; border-radius:999px; cursor:pointer; background:transparent;
  border:1.5px solid rgba(235,239,244,.35); color:#EBEFF4; display:grid; place-items:center;
  transition:transform 150ms, background-color 150ms}
.opr-hero .opr-flechas button:hover{transform:scale(1.07); background:rgba(255,255,255,.12)}
.opr-hero .opr-flechas svg{width:19px; height:19px}
.opr-hero button:focus-visible, .opr-hero a:focus-visible{outline:2px solid #EBEFF4; outline-offset:3px}

/* ---- móvil: el texto manda, los agentes van debajo del subtítulo ---- */
@media (max-width:1000px){
  .opr-hero{display:flex; flex-direction:column; padding:86px clamp(18px,5vw,28px) 30px}
  .opr-hero .opr-texto{display:contents}
  .opr-hero .opr-rotulo{order:1}
  .opr-hero .opr-titulo{order:2}
  .opr-hero .opr-desc{order:3; margin-bottom:0; max-width:none}
  .opr-hero .opr-escena{order:4; position:relative; height:min(46vh,352px); margin:14px 0 4px}
  .opr-hero .opr-palabra{top:1%}
  .opr-hero .opr-ctas{order:5; margin-top:16px}
  .opr-hero .opr-datos{order:6}
  .opr-hero .opr-controles{order:7; position:static; transform:none; flex-direction:column;
    align-items:stretch; gap:12px; padding:22px 0 0}
  .opr-hero .opr-seg{justify-content:space-between}
  .opr-hero .opr-seg button{flex:1; padding:10px 6px; font-size:.77rem}
  .opr-hero .opr-flechas{justify-content:flex-end}
}
@media (prefers-reduced-motion:reduce){
  .opr-hero .opr-grupo, .opr-hero, .opr-hero .opr-halo{transition-duration:1ms !important}
}