/* Fondo de hero — un solo lugar para todo el sitio.
   · Cambia --bnc-hero-bg para recolorear los 60 heros de golpe.
   · Cada hero acepta además una imagen de fondo arrastrable (.hero-bg).
     Al cargarla, el patrón de isotipo se oculta y entra un velo que mantiene
     legible el texto blanco. */
:root{
  --bnc-hero-bg: linear-gradient(160deg,#0a2f6e 0%,#16407e 55%,#2f63a8 100%);
  --bnc-hero-scrim: linear-gradient(100deg,rgba(0,13,36,.82) 0%,rgba(0,13,36,.62) 46%,rgba(0,13,36,.28) 100%);
}

.hero-bg{position:absolute;inset:0;z-index:0;background:transparent}
.hero-bg image-slot{position:absolute;inset:0;background:transparent}
.hero-bg image-slot::part(frame){background:transparent}
.hero-bg image-slot::part(ring){display:none}
.hero-bg image-slot::part(empty){opacity:0;transition:opacity .15s ease}
.hero-bg:hover image-slot::part(empty){opacity:1;background:rgba(10,13,18,.55)}

/* con imagen cargada: velo encima y patrón fuera */
.hero-bg:has(image-slot[data-filled])::after{content:"";position:absolute;inset:0;background:var(--bnc-hero-scrim);pointer-events:none}
section:has(.hero-bg image-slot[data-filled]) > .hero-pattern{opacity:0}

/* el contenido siempre por encima de las capas de fondo */
section:has(> .hero-bg) > .bnc-container{position:relative;z-index:2}

/* Home: el texto del hero es oscuro sobre blanco, así que el velo va en claro */
:root{ --bnc-hero-scrim-light: linear-gradient(100deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.74) 44%,rgba(255,255,255,.34) 100%); }
.hero-bg--light:has(image-slot[data-filled])::after{background:var(--bnc-hero-scrim-light)}
.hero-sec:has(.hero-bg image-slot[data-filled]) > div:first-child{opacity:0}
.hero-sec:has(> .hero-bg) > .bnc-container{position:relative;z-index:2}

/* Alto de portada como en Curaçao (y como el carrusel del Home): ocupa la pantalla bajo el header
   (80px) y las migas (~51px), dejando ver el cintillo de redes (~60px). Solo escritorio: en móvil
   la portada se apila (imagen arriba) y conserva su alto natural. Tope de 720 px (mínimo 480 px): en monitores grandes la portada no llena toda la vista. La imagen ocupa todo el alto. */
@media (min-width: 1081px) {
  section > .cuentas-hero-grid,
  section:not(.hero-sec) > .bnc-container.hero-grid {
    min-height: clamp(480px, calc(100vh - 192px), 720px) !important;
    min-height: clamp(480px, calc(100svh - 192px), 720px) !important;
  }
  /* Recuadro de la imagen con la proporción de la propia imagen (--hero-ar, lo fija image-slot) y apoyado
     abajo: la imagen entra entera y conserva el alto de la portada. Si es apaisada, el recuadro se ensancha
     hacia la derecha hasta el borde de la pantalla como máximo (si no cabe, baja el alto, nunca recorta).
     Antes: recuadro cuadrado al ancho de la columna (aspect-ratio 1/1; width 100%), las apaisadas quedaban pequeñas. */
  section > .cuentas-hero-grid { padding-bottom: 0 !important; }
  section > .cuentas-hero-grid > div:last-child {
    --hero-h: min(calc(100svh - 232px), 680px);
    --hero-room: calc(100% + 32px + max(0px, (100vw - 1280px) / 2) - 17px);
    align-self: end !important; aspect-ratio: var(--hero-ar, 1) !important;
    width: min(calc(var(--hero-h) * var(--hero-ar, 1)), var(--hero-room)) !important;
    height: auto !important; min-height: 0 !important; max-height: none !important; margin-inline: auto;
  }
}

/* Imagen de portada como en Curaçao: sin esquinas redondeadas y la imagen entera (recorte sin fondo)
   apoyada abajo, para que en monitores grandes no se corte contra el recuadro. */
section > .cuentas-hero-grid > div:last-child image-slot::part(frame){border-radius:0 !important}
section > .cuentas-hero-grid > div:last-child image-slot::part(image){object-fit:contain !important;object-position:center bottom !important}

/* Trama del isotipo con deriva lenta, como en Curaçao: se desplaza exactamente una baldosa
   (62×39px) cada 30 s, así el bucle no tiene corte. Sin movimiento si el usuario lo reduce. */
@keyframes bncTrama { from { transform: rotate(-8deg) scale(1.3) translate(0, 0); } to { transform: rotate(-8deg) scale(1.3) translate(62px, 39px); } }
.hero-pattern, .hero-trama { animation: bncTrama 30s linear infinite; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .hero-pattern, .hero-trama { animation: none; } }