/* ===== Desktop/Web: base (sin recortes) =================================== */
#bg-layer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  background-image: var(--bg-image);      /* web.jpg por defecto */
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain;               /* no recortes */
  background-color: var(--brand-color, #F36F21);
  z-index: -1;
}

html, body { height: 100%; }
body { margin: 0; }

/* ===== Escritorios anchos: usa web-2.jpg en pantallas panorámicas ========= */
@media (min-aspect-ratio: 16/10) and (min-width: 1280px) {
  #bg-layer {
    background-image: var(--bg-image-wide, var(--bg-image));
    background-size: contain;
  }
}

/* ===== Móvil / táctiles: responsive.jpg y altura real del viewport ======== */
@media (max-width: 768px), (pointer: coarse) {
  #bg-layer {
    background-image: var(--bg-image-mobile, var(--bg-image)); /* responsive.jpg */
    height: 100dvh;
  }
  @supports (height: 100svh) {
    #bg-layer { height: 100svh; }
  }
}