/* =====================================================================
   Banner de portada de unidad (imagen 1920x700 con el texto incluido).
   Escritorio: la imagen completa, sin recortar ni recomprimir; el texto HTML
   queda solo para lectores de pantalla y un enlace invisible cubre el botón
   que viene dibujado en la imagen.
   Celular (<=700px): la imagen se recorta con CSS a la zona gráfica (el archivo
   no se modifica) y el texto, el titular y el botón se muestran en HTML.

   Variables por banner (en el style del div.hban). Valores por defecto = banner oscuro:
     --hb-bg / --hb-bgimg   fondo bajo la imagen (color o degradado)
     --hb-ratio             proporción ancho/alto del recorte en celular
     --hb-zoom              ancho de la imagen respecto al recorte (recorta a la derecha)
     --hb-hit               zona del botón dibujado: left / top / width / height (ver .hban-hit)
     --hb-h1, --hb-sub, --hb-b, --hb-tag, --hb-accent, --hb-cta-bg/-fg/-bd, --hb-back
   Se carga después de theme-azul.css.
   ===================================================================== */
.hban{position:relative;padding-top:72px;background:var(--hb-bgimg,var(--hb-bg,#02012F))}
.hban-stage{position:relative}
.hban-img{display:block;width:100%;height:auto}
.hban-back{position:absolute;left:13.45%;top:5%;z-index:2;font-family:var(--font-mono);font-size:12.5px;letter-spacing:.02em;color:var(--hb-back,rgba(255,255,255,.82));transition:color .2s}
.hban-back:hover{color:var(--hb-back-h,#fff)}
.hban-hit{position:absolute;z-index:2;left:var(--hb-hit-l,13.3%);top:var(--hb-hit-t,76.3%);width:var(--hb-hit-w,17.8%);height:var(--hb-hit-h,8.8%);border-radius:999px;transition:box-shadow .2s}
.hban-hit:hover{box-shadow:0 0 0 3px var(--hb-hit-glow,rgba(255,255,255,.38))}
.hban-hit:focus-visible{outline:2px solid var(--hb-hit-focus,#fff);outline-offset:3px}
.hban-txt{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hban-txt .hb-cta{display:none}

@media(max-width:700px){
  .hban{padding-top:62px}
  .hban-stage{aspect-ratio:var(--hb-ratio,1.2);overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,#000 78%,transparent 100%)}
  .hban-img{position:absolute;right:0;top:50%;width:var(--hb-zoom,280%);max-width:none;transform:translateY(-50%)}
  .hban-back{left:16px;top:12px;font-size:12px;padding:6px 12px;border-radius:999px;background:var(--hb-back-bg,transparent)}
  .hban-hit{display:none}
  .hban-txt{position:relative;width:auto;height:auto;margin:-22px 0 0;padding:0 20px 26px;overflow:visible;clip:auto;white-space:normal;color:var(--hb-h1,#fff)}
  .hban .hb-tag{display:block;font-family:var(--font-mono);font-weight:500;font-size:var(--hb-tag-fs,12px);letter-spacing:var(--hb-tag-ls,.32em);text-transform:uppercase;color:var(--hb-tag,#fff)}
  .hban .hban-txt h1{font-family:var(--font-display);font-weight:800;font-size:clamp(30px,9vw,40px);line-height:1.04;letter-spacing:-.03em;color:var(--hb-h1,#fff);margin:16px 0 0;max-width:var(--hb-h1-w,15ch);text-shadow:none}
  .hban .hb-accent{display:block;background:var(--hb-accent,linear-gradient(90deg,#5BA8FF,#9ACFFF));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--hb-accent-fb,#7DB9FF)}
  .hban .hb-sub{margin-top:16px;font-size:15.5px;line-height:1.45;color:var(--hb-sub,#E6ECFF);max-width:36ch}
  .hban .hb-sub b{color:var(--hb-b,#A8E4FF);font-weight:700}
  .hban .hban-txt .hb-cta{display:inline-flex;align-items:center;justify-content:center;margin-top:22px;padding:14px 26px;border-radius:999px;background:var(--hb-cta-bg,#fff);border:1.5px solid var(--hb-cta-bd,#0029FF);color:var(--hb-cta-fg,#0029FF);font-family:var(--font-display);font-weight:800;font-size:14.5px;letter-spacing:.01em;text-transform:uppercase}
}

/* =====================================================================
   Efecto de fondo animado (shader WebGL, assets/shader-hero.js). Opt-in:
   <div class="hban-stage hban-fx"> con un <canvas class="hban-shader"> detrás y
   la imagen del banner repartida en dos capas (texto / gráfico) mezcladas en
   modo "screen": lo oscuro deja ver el efecto, lo brillante (texto, candado)
   queda encima. Las dos capas flotan suave. Sin WebGL queda la imagen sobre
   fondo marino. --hb-split = punto donde termina el texto (en %).
   ===================================================================== */
.hban-fx{isolation:isolate;overflow:hidden;background:#000D23}
.hban-fx .hban-shader{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;background:#000D23;opacity:.8}
.hban-fx::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,13,35,.6) 0%,rgba(0,13,35,.32) 50%,rgba(0,13,35,0) 72%)}
.hban-fx .hban-fl{mix-blend-mode:screen;will-change:transform}
.hban-fx .hban-fl-b{pointer-events:none}
.hban-fx .hban-fl-a{position:relative;z-index:1;-webkit-mask-image:linear-gradient(90deg,#000 0,#000 var(--hb-split,63.3%),transparent calc(var(--hb-split,63.3%) + 6%));mask-image:linear-gradient(90deg,#000 0,#000 var(--hb-split,63.3%),transparent calc(var(--hb-split,63.3%) + 6%));animation:hb-float-a 7s ease-in-out infinite}
.hban-fx .hban-fl-b{position:absolute;inset:0;z-index:1;-webkit-mask-image:linear-gradient(90deg,transparent var(--hb-split,63.3%),#000 calc(var(--hb-split,63.3%) + 6%));mask-image:linear-gradient(90deg,transparent var(--hb-split,63.3%),#000 calc(var(--hb-split,63.3%) + 6%));animation:hb-float-b 9s ease-in-out infinite}
@keyframes hb-float-a{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes hb-float-b{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@media(prefers-reduced-motion:reduce){.hban-fx .hban-fl{animation:none}}
@media(max-width:700px){
  .hban-fx .hban-fl-a{display:none}
  .hban-fx .hban-fl-b{display:contents}
  .hban-fx .hban-fl-b .hban-img{mix-blend-mode:screen;z-index:1}
}

/* Variante para banners CLAROS con el efecto: el fondo animado se invierte a tonos
   claros y la imagen se multiplica encima (lo blanco deja ver el efecto; el texto
   y las personas quedan). Se agrega la clase hban-light junto a hban-fx. */
.hban-fx.hban-light{background:#EAF2FF}
.hban-light .hban-shader{filter:invert(1) hue-rotate(180deg) saturate(1.1);opacity:.7}
.hban-fx.hban-light::after{display:none}
.hban-light .hban-fl{mix-blend-mode:multiply}
@media(max-width:700px){.hban-fx.hban-light .hban-fl-b .hban-img{mix-blend-mode:multiply}}

/* Variante para llevar un banner CLARO a azul oscuro con el efecto (hban-inv junto a hban-fx):
   el texto se invierte a blanco, la foto pasa a un duotono azul oscuro y el botón dibujado en la
   imagen se cubre con un botón real (el enlace .hban-hit lleva su texto). */
.hban-fx.hban-inv{container-type:inline-size}
.hban-inv .hban-fl-a .hban-img{filter:invert(1) hue-rotate(180deg)}
.hban-inv .hban-fl-b .hban-img{filter:grayscale(1) sepia(1) hue-rotate(185deg) saturate(3.5) brightness(.8) contrast(1.15)}
.hban-inv .hban-fl-b{-webkit-mask-image:linear-gradient(90deg,transparent var(--hb-split,58%),#000 calc(var(--hb-split,58%) + 14%));mask-image:linear-gradient(90deg,transparent var(--hb-split,58%),#000 calc(var(--hb-split,58%) + 14%))}
.hban-inv .hban-hit{display:flex;align-items:center;justify-content:center;background:#fff;border:1.5px solid #0029FF;color:#0029FF;font-family:var(--font-display);font-weight:800;font-size:1.15cqw;letter-spacing:.01em;text-transform:uppercase;white-space:nowrap}
.hban-inv .hban-hit:hover{box-shadow:0 0 0 3px rgba(143,211,255,.55)}
@media(max-width:700px){.hban-inv .hban-hit{display:none}}

/* Enlace "Volver" que ya viene dibujado en la imagen del banner: en escritorio queda un enlace
   invisible sobre el texto de la imagen (--hb-back-l/-t/-w/-h2); en celular se muestra normal. */
.hban-back:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media(min-width:701px){
  .hban-back.hban-ghost{left:var(--hb-back-l,13.1%);top:var(--hb-back-t,5.4%);width:var(--hb-back-w,18.7%);height:var(--hb-back-h2,5.2%);padding:0;font-size:0;color:transparent;background:none}
}

/* Banner que ya es azul (no casi negro): sube el contraste de la imagen para que lo oscuro del
   fondo deje ver el efecto animado; el texto blanco y los azules vivos no se apagan. */
.hban-punch .hban-fl .hban-img{filter:contrast(1.4) brightness(.95)}