.opr-hero{
  --opr-fondo:#051F20; --opr-halo:#1A4139; --opr-acento:#DAF1DE;
  position:relative; width:100%; isolation:isolate; overflow:hidden;
  min-height:min(100svh,880px); height:100svh;
  background:var(--opr-fondo); color:#DAF1DE;
  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}

.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}

/* ---- 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: el bucle de vídeo recortado, abajo a la derecha ---- */
.opr-hero .opr-escena{position:absolute; inset:0; z-index:8; user-select:none; pointer-events:none}
.opr-hero .opr-agentes{position:absolute; z-index:10; right:2%; bottom:0; height:84%; aspect-ratio:992/748;
  -webkit-mask-image:linear-gradient(to top, transparent 0, #000 7%);
          mask-image:linear-gradient(to top, transparent 0, #000 7%)}
.opr-hero .opr-agentes > *{position:absolute; inset:0; width:100%; height:100%; display:block;
  object-fit:contain; object-position:50% 100%}
.opr-hero .opr-lienzo{opacity:0; transition:opacity 420ms ease}
.opr-hero .opr-agentes.en-marcha .opr-lienzo{opacity:1}
.opr-hero .opr-agentes.en-marcha .opr-quieto{opacity:0; transition:opacity 420ms ease 120ms}
.opr-hero .opr-fuente{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}

/* ---- 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:#DAF1DE}
.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:#DAF1DE; color:#051F20}
.opr-hero .opr-boton-1:hover{background:#FFF; transform:translateY(-1px)}
.opr-hero .opr-boton-2{background:transparent; color:#DAF1DE; 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:#DAF1DE}
.opr-hero .opr-seg button[aria-pressed="true"]{background:#DAF1DE; color:#051F20}
.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:#DAF1DE; 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 #DAF1DE; outline-offset:3px}

/* ---- móvil: como la portada de antes, en una pantalla. Arriba BRAVOZULU
   con los agentes delante; abajo el rótulo, el título y los dos botones. ---- */
@media (max-width:1000px){
  /* El verde llega hasta abajo del todo (100lvh, también detrás de la barra
     del navegador), pero el contenido se queda en la parte que se ve (100svh). */
  .opr-hero{display:flex; flex-direction:column; height:100vh; height:100lvh; min-height:560px; max-height:none;
    padding:78px clamp(18px,5vw,28px) max(56px, calc(env(safe-area-inset-bottom) + 30px)); text-align:center}
  @supports (height:100svh){
    .opr-hero{padding-bottom:calc(100lvh - 100svh + max(56px, calc(env(safe-area-inset-bottom) + 30px)))}
  }
  /* 1.0.8 (Sergio, 23/10): todo el contenido un poco más arriba; abajo quedaba
     pegado al borde y arriba sobraba hueco. Antes, 22 px abajo. */
  .opr-hero .opr-texto{display:contents}
  .opr-hero .opr-escena{order:1; position:relative; inset:auto; flex:1 1 auto; min-height:0;
    margin:0 calc(-1 * clamp(18px,5vw,28px)); overflow:hidden}
  .opr-hero .opr-palabra{top:0}
  /* 1.0.9 (Sergio, 23/10): letras más alargadas, ×1,5 en vertical. */
  .opr-hero .opr-palabra b{opacity:.085; transform:scaleY(1.5); transform-origin:50% 0}
  .opr-hero .opr-agentes{right:auto; left:50%; transform:translateX(-50%); bottom:0;
    -webkit-mask-image:linear-gradient(to top, transparent 0, #000 22%);
            mask-image:linear-gradient(to top, transparent 0, #000 22%)}
  /* 1.0.7 (Sergio, 23/10): el acabado del escritorio también en el móvil.
     La luz entra por la derecha y se pierde hacia la izquierda (el velo va
     por detrás de los agentes, solo en el fondo y en BRAVOZULU), oscurecido
     abajo, BRAVOZULU sin estirar, botones uno al lado del otro y las cifras;
     más aire entre el título, los botones y las cifras. */
  .opr-hero .opr-velo{z-index:4;
    background:linear-gradient(100deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.52) 26%, rgba(0,0,0,.18) 54%, transparent 76%)}
  .opr-hero .opr-vineta{background:linear-gradient(to top, rgba(0,0,0,.5) 0%, rgba(0,0,0,.22) 36%, transparent 58%)}
  .opr-hero .opr-halo{opacity:.55}
  .opr-hero .opr-rotulo, .opr-hero .opr-titulo, .opr-hero .opr-ctas, .opr-hero .opr-datos{position:relative; z-index:60}
  .opr-hero .opr-rotulo{order:2; margin:4px 0 10px; font-size:.88rem}
  .opr-hero .opr-titulo{order:3; margin:0 auto 30px; font-size:clamp(1.9rem,8.6vw,2.5rem); max-width:16ch}
  .opr-hero .opr-desc{display:none}
  .opr-hero .opr-ctas{order:4; flex-direction:row; justify-content:center; gap:10px}
  .opr-hero .opr-boton{flex:1 1 0; padding:14px 16px; font-size:.98rem; border-radius:10px}
  .opr-hero .opr-datos{order:5; justify-content:center; margin-top:30px; gap:26px}
  .opr-hero .opr-datos > div{align-items:center}
}
@media (max-width:1000px) and (max-height:700px){
  .opr-hero{padding-bottom:max(34px, calc(env(safe-area-inset-bottom) + 18px))}
  @supports (height:100svh){
    .opr-hero{padding-bottom:calc(100lvh - 100svh + max(34px, calc(env(safe-area-inset-bottom) + 18px)))}
  }
  .opr-hero .opr-titulo{font-size:1.7rem; margin-bottom:20px}
  .opr-hero .opr-boton{padding:12px 14px}
  .opr-hero .opr-datos{margin-top:20px}
}
@media (prefers-reduced-motion:reduce){
  .opr-hero, .opr-hero .opr-halo{transition-duration:1ms !important}
}

/* 1.1.0: en el móvil los botones son Acceder y Crear cuenta. */
.opr-hero .opr-bm{display:none}
@media (max-width:1000px){
  .opr-hero .opr-bd{display:none}
  .opr-hero .opr-bm{display:inline-flex}
}