/* Banner del encabezado de los perfiles profesionales. Dos piezas, un mismo hueco:

   - partials/banner_espacio.html: la plantilla fija de referencias/banner-espacio, igual en
     la ficha privada de todos (/access/<slug>/);
   - partials/banner_perfil.html: el banner personal, en el perfil público y en la vista
     previa que lo representa.

   La geometría base es la de styles.css de la referencia, que allí se explica una a una: el
   ancho disponible y el alto por proporción (2048 / 684), con nada encima —ni borde, ni
   radio, ni sombra, ni filtro—. La única transformación es el zoom que elige la persona
   (más abajo, «Encuadre»).

   Todo cuelga de .bnp para que no lo toquen style.css, perfil-ficha.css ni
   perfil-publico.css, y para que estas reglas tampoco toquen nada más. */

/* overflow:hidden: con zoom la imagen crece alrededor de su punto focal y no debe asomar
   fuera de su espacio. */
.bnp{display:block;width:100%;max-width:2048px;margin:0 auto;padding:0;line-height:0;overflow:hidden}
.bnp__ampliar{display:block;line-height:0}
.bnp__imagen{display:block;width:100%;height:auto;aspect-ratio:2048/684;max-width:100%;
  border:0;border-radius:0;box-shadow:none;filter:none}

/* El arte de la referencia llena el espacio exacto, así que se muestra entero. El banner que
   sube una persona viene con otra proporción, y ahí sí se encuadra para no dejar franjas. */
/* Encuadre de la persona (2026-10-27, partials/banner_perfil.html): --bnp-x / --bnp-y son el
   punto focal y --bnp-zoom el acercamiento, en el style del <img>. El foco es a la vez el
   object-position y el centro del zoom, así que ese punto de la imagen se queda donde está
   al acercar; con zoom >= 1 la imagen sigue cubriendo todo su espacio, sin huecos. Sin
   variables (el arte de reserva, la plantilla fija) queda como antes: centrada y sin zoom. */
/* Por dispositivo (2026-10-28): el <img> trae los nueve valores (--bnp-x / -y / -zoom de
   escritorio, --bnp-tablet-* y --bnp-movil-*) y aquí se elige cuál vale según el ancho de
   la página del perfil (@container pf, el .pf de perfil-publico.css): menos de 641 es
   móvil y menos de 1000 tablet (personalizacion.BANNER_TABLET_DESDE y
   BANNER_ESCRITORIO_DESDE; los mismos cortes que el alto del hero). La vista previa es esa
   misma página en un iframe, así que elige igual. La fórmula es UNA: solo cambian los
   valores (--bnp-ex / -ey / -ez, el encuadre en uso). Fuera de .pf (la miniatura de la
   ficha) no hay contenedor y queda el de escritorio, como antes. Un dispositivo sin valor
   toma el de escritorio; --bnp-y-inicial es el Y de reserva (45 % en las cabeceras). */
.bnp__imagen{--bnp-ex:var(--bnp-x,50%);--bnp-ey:var(--bnp-y,var(--bnp-y-inicial,50%));--bnp-ez:var(--bnp-zoom,1);
  object-fit:cover;object-position:var(--bnp-ex) var(--bnp-ey);
  transform:scale(var(--bnp-ez));transform-origin:var(--bnp-ex) var(--bnp-ey)}
@container pf (max-width:999.98px){
  .bnp__imagen{--bnp-ex:var(--bnp-tablet-x,var(--bnp-x,50%));--bnp-ey:var(--bnp-tablet-y,var(--bnp-y,var(--bnp-y-inicial,50%)));
    --bnp-ez:var(--bnp-tablet-zoom,var(--bnp-zoom,1))}
}
@container pf (max-width:640.98px){
  .bnp__imagen{--bnp-ex:var(--bnp-movil-x,var(--bnp-x,50%));--bnp-ey:var(--bnp-movil-y,var(--bnp-y,var(--bnp-y-inicial,50%)));
    --bnp-ez:var(--bnp-movil-zoom,var(--bnp-zoom,1))}
}
.bnp--espacio .bnp__imagen{object-fit:contain}
/* Color predefinido: el mismo espacio, pintado. */
.bnp--color{aspect-ratio:2048/684}

/* ---------- Cabecera compacta ----------
   Donde el banner encabeza una página (.bnp--cabecera), se comporta como los hero del sitio:
   una franja ancha y baja, no una imagen suelta que se come media pantalla. A 1216 de ancho,
   la proporción de la referencia pedía 406 px de alto; aquí se queda en 320.
   La escalera baja con la pantalla para que la franja siga siendo una franja. No la lleva la
   miniatura de la vista previa, que es otra cosa y mantiene su proporción. */
.bnp--cabecera{--bnp-alto:320px}
@media (max-width:1199.98px){.bnp--cabecera{--bnp-alto:280px}}
@media (max-width:991.98px){.bnp--cabecera{--bnp-alto:250px}}
@media (max-width:767.98px){.bnp--cabecera{--bnp-alto:220px}}
@media (max-width:575.98px){.bnp--cabecera{--bnp-alto:200px}}

/* La plantilla fija: manda la proporción de la referencia y el alto solo la topa. Así, en
   pantallas angostas, donde el alto natural ya es menor que el tope, se sigue viendo la
   composición entera —como pide su README— y no se recorta nada; en escritorio se recorta
   arriba y abajo, que es donde solo hay techo y mesa.
   El foco ya no se fija en el centro (2026-10-29): en el perfil público ese mismo arte es el
   banner por defecto y trae en el style su encuadre estándar
   (personalizacion.ENCUADRES_DEL_BANNER_POR_DEFECTO), que usa la fórmula de arriba. La
   plantilla fija no trae ninguno y sigue centrada (--bnp-y-inicial de más abajo). */
.bnp--espacio.bnp--cabecera .bnp__imagen{max-height:var(--bnp-alto);object-fit:cover}

/* El banner personal: proporción desconocida, así que manda el alto y la imagen se encuadra.
   El encuadre va en 45% y no en el centro: deja respirar la parte de arriba, donde caen las
   caras y los logotipos, sin comerse la banda de abajo. Desde 2026-10-27 es solo el valor
   inicial: la persona lo mueve (y es el mismo 45 del encuadre guardado por omisión). */
.bnp--cabecera{--bnp-y-inicial:45%}
.bnp--espacio.bnp--cabecera{--bnp-y-inicial:50%}
.bnp--cabecera:not(.bnp--espacio) .bnp__imagen{height:var(--bnp-alto);aspect-ratio:auto;object-fit:cover}
.bnp--cabecera.bnp--color{height:var(--bnp-alto);aspect-ratio:auto}