/* =====================================================================
   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}
}