/* ==========================================================
   ONGLink - Banners con gradiente + imagen (estilo versión 1)
   Prefijo .ol-hero para no chocar con Tailwind.
   Uso: <section class="ol-hero" style="--ol-bg:url('...')">
   ========================================================== */
.ol-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(90deg, #0a53d4, #0d62e6);
}
/* Imagen a la derecha que se desvanece hacia el gradiente */
.ol-hero::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: var(--ol-w, 36%);
  background: var(--ol-bg) right center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%);
          mask-image: linear-gradient(90deg, transparent, #000 55%);
  opacity: .85;
  pointer-events: none;
}
.ol-hero > * { position: relative; z-index: 1; }

.ol-hero--page { --ol-w: 38%; min-height: 200px; display: flex; align-items: center; }
.ol-hero--page > div { width: 100%; }
.ol-hero--home { --ol-w: 46%; min-height: 410px; display: flex; align-items: center; }
.ol-hero--home > div { width: 100%; }

.ol-hero__icon {
  width: 48px; height: 48px; border-radius: 16px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  color: #dbeafe;
}

/* Móvil / tablet: la imagen queda de fondo tenue para no tapar el texto */
@media (max-width: 1023px) {
  .ol-hero::before {
    width: 100%;
    opacity: .18;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .ol-hero--home { min-height: 0; }
}